/* ROBOT SANDWICH — engine styles. tokens.css holds the variables. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* SAFARI'S DATA DETECTORS (v128). iOS wraps anything that looks like a
   date, a phone number, an address or a flight number in its own <a> and
   paints it system blue — after the fact, in markup we never wrote. The
   meta in index.html turns most of it off; this catches what gets through.
   Not the cause of the blue tile titles (that was the button reset), but
   the same symptom from the other direction, and free. */
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;
  font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;
  line-height:inherit!important}
body{font-family:var(--body);color:var(--ink);background:#fff;min-height:100vh;
  display:flex;flex-direction:column;font-weight:400;line-height:1.6}
.beb{font-family:var(--display);letter-spacing:0;line-height:.95}
/* COLOUR, NOT JUST FONT (v128). This line inherited the font and said
   nothing about colour, so the browser's own default won — black on every
   desktop, which is near enough to --ink that nobody ever looked, and the
   SYSTEM BLUE on iOS. The shopfront's tile titles went blue on an iPad
   while their subtitles, which set their own colour, stayed grey. One
   word fixes the whole class; a button that sets its own colour is
   untouched. */
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}

/* ===========================================================================
   BUTTONS (v164). Five, and one shape. Every room uses these; SET UP too.
     BIG    full width, Bebas 24, the thing that moves you on; ink when ready
     MAIN   sized to its word, Bebas 20; .second is the outline of a pair
     SMALL  Inter 9.5 caps; .second is the soft fill
     QUIET  no box, grey caps; .x for a cross
     ROUND  icon only; .sm for the ones inside something else
   .on-red flips the fill: white with red words, outlines white.
   .waiting (and .dormant, which FEED IT toggles) keeps the shape, goes grey.
   =========================================================================== */
.b-big,.b-main,.b-small,.b-quiet,.b-round{cursor:pointer;border:none;line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s}
.b-big{width:100%;border-radius:var(--pill);background:var(--red);color:#fff;
  font-family:var(--display);font-size:24px;letter-spacing:1.5px;padding:15px 22px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.b-big:hover{background:var(--red-dark)}
.b-big.ready,.b-big.brief{background:var(--ink);color:#fff}
.b-big.ready:hover,.b-big.brief:hover{background:#000}
.b-main{border-radius:var(--pill);background:var(--red);color:#fff;
  font-family:var(--display);font-size:20px;letter-spacing:1.5px;padding:10px 28px 8px}
.b-main:hover{background:var(--red-dark)}
a.b-main{display:inline-block;text-decoration:none;cursor:pointer}   /* a link wearing the pill (SET UP's GET IN TOUCH) */
.b-main.second{background:transparent;color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.b-main.second:hover{background:var(--red);color:#fff}
.b-main.ready{background:var(--ink)}
.b-main.ready:hover{background:#000}
.b-small{border-radius:var(--pill);background:var(--red);color:#fff;font-family:var(--body);
  font-size:9.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;padding:8px 17px}
.b-small:hover{background:var(--red-dark)}
.b-small.second{background:var(--paper);color:var(--red);box-shadow:inset 0 0 0 1px var(--border)}
.b-small.second:hover{background:var(--ink);color:#fff;box-shadow:none}
.b-quiet{background:none;color:var(--mid);font-family:var(--body);font-size:9.5px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;padding:8px 2px}
.b-quiet:hover{color:var(--ink)}
.b-quiet.x{font-size:17px;letter-spacing:0;padding:0 4px}
.b-quiet.x:hover{color:var(--red)}
.b-round{width:42px;height:42px;padding:0;border-radius:50%;background:var(--red);color:#fff;flex:none}
.b-round:hover{background:var(--red-dark)}
.b-round.sm{width:30px;height:30px;font-size:15px}
.b-round.sm svg{width:15px;height:15px}
.b-round.ink{background:var(--ink)}
.b-round.ink:hover{background:#000}
.b-round.outline{background:none;color:var(--mid);box-shadow:inset 0 0 0 1px var(--border)}
.b-round.outline:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.b-round.quiet{background:none;color:var(--red)}
.b-round.quiet:hover{background:var(--paper)}
.b-round.white{background:#fff;color:var(--red);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.b-round.white:hover{background:var(--paper)}
.b-main svg,.b-big svg{width:18px;height:18px;flex:none}
/* on red */
.on-red.b-big,.on-red.b-main,.on-red.b-small,.on-red.b-round{background:#fff;color:var(--red)}
.on-red.b-big:hover,.on-red.b-main:hover,.on-red.b-small:hover,.on-red.b-round:hover{background:var(--paper)}
.on-red.b-main.second{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #fff}
.on-red.b-main.second:hover{background:#fff;color:var(--red)}
.on-red.b-small.second{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.on-red.b-small.second:hover{background:#fff;color:var(--red)}
.on-red.b-quiet{color:rgba(255,255,255,.75)}
.on-red.b-quiet:hover{color:#fff}
.on-red.b-big.ready,.on-red.b-big.brief{background:var(--ink);color:#fff}
/* waiting: the shape stays, the colour goes */
.b-big.waiting,.b-main.waiting,.b-main.dormant,.b-small.waiting{background:#D8D4CE;color:#fff;box-shadow:none;cursor:default}
.b-big.waiting:hover,.b-main.waiting:hover,.b-main.dormant:hover,.b-small.waiting:hover{background:#D8D4CE;color:#fff}
.on-red.b-big.waiting,.on-red.b-main.waiting,.on-red.b-small.waiting{background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.on-red.b-big.waiting:hover,.on-red.b-main.waiting:hover,.on-red.b-small.waiting:hover{background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
/* the doors that wake: a stop's button is waiting until .live lands */
.stop-door:not(.live){background:#D8D4CE;color:#fff;box-shadow:none;cursor:default}
.on-red.stop-door:not(.live){background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.b-big:disabled,.b-main:disabled,.b-small:disabled,.b-round:disabled{opacity:.5;cursor:default}
.b-small.dormant{background:#D8D4CE;color:#fff;cursor:default}
.b-big[hidden],.b-main[hidden],.b-small[hidden],.b-quiet[hidden],.b-round[hidden]{display:none}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:2px}
/* v120: not on the round chrome. A red hoop round the burger or a card's ×
   reads as an alarm — something has gone wrong — when all that happened is
   the browser marking where the keyboard is. It turns up after Escape
   closes a card, which is why it seems to appear out of nowhere.
   The ring stays, because somebody navigating by keyboard has to be able to
   see where they are. It just stops shouting: the same grey the chrome uses
   everywhere else, tight to the shape. */
.burger:focus-visible,.menu-x:focus-visible{outline:2px solid var(--border);outline-offset:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.topbar{background:#fff;padding:13px var(--g);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0}
/* the mark is the way home, so it has to be a button — but it must look
   exactly like the image it always was */
.mark-home{background:none;border:none;padding:0;cursor:pointer;display:block;line-height:0}

/* THE DEMO DUMP CARD. The email is shown as what it is - something off a
   clipboard - because in one press that is exactly what it becomes. Dressing
   it as an inbox would suggest the robot reads your mail. It reads text. */
.demo-line{font-size:14.5px;line-height:1.55;margin-bottom:10px}
.demo-why{font-size:13px;line-height:1.55;color:var(--mid);margin-bottom:14px}
/* the sample, on paper, like a pasted email. A long one scrolls inside its
   panel; the button stays in view (v166). */
.demo-hold{max-height:min(320px,42vh);overflow-y:auto;border-radius:var(--r-input);
  border:1px solid var(--border);background:var(--paper)}
.demo-dump{background:var(--paper);border:none;border-radius:var(--r-input);
  padding:14px 16px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.demo-cta{display:flex;justify-content:flex-end;margin-top:16px}
.hiw-btns,.faq-cta,.whirl-cta{margin-top:16px}
.mark{font-size:22px}
.mark span{color:var(--red)}
.who{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--mid);font-weight:600}
.top-r{display:flex;align-items:center;gap:12px}

/* ---------------- hamburger + house pages ---------------- */
.burger{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  transition:background .15s}
.burger:hover{background:var(--paper)}
.burger svg{width:19px;height:19px;display:block}
.burger line{stroke:var(--ink);stroke-width:2;stroke-linecap:round;transition:transform .2s ease,opacity .2s ease}
.burger.x .bl1{transform:translateY(4.5px) rotate(45deg);transform-origin:center}
.burger.x .bl2{opacity:0}
.burger.x .bl3{transform:translateY(-4.5px) rotate(-45deg);transform-origin:center}
.menu-menu{position:absolute;top:54px;right:14px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);padding:6px;min-width:148px;box-shadow:0 10px 30px rgba(26,25,23,.14);
  display:none;z-index:60}
.menu-menu.on{display:block}
.menu-menu button{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:var(--r-input);
  font-family:var(--display);font-size:16px;letter-spacing:1.2px}
.menu-menu button:hover{background:var(--paper);color:var(--red)}
/* v120: the way in and out is a different kind of thing from the doors
   above it, so it gets a line rather than a colour. Red in here would read
   as a warning and signing out is routine. */
.menu-menu #menuSignIn{border-top:1px solid var(--border);border-radius:0 0 var(--r-input) var(--r-input);
  margin-top:6px;padding-top:14px}
.menu-shade{position:fixed;inset:0;background:rgba(26,25,23,.68);display:none;
  align-items:center;justify-content:center;z-index:70;padding:20px}
.menu-shade.on{display:flex}
.menu-card{background:var(--paper);border-radius:var(--r-card);width:100%;max-width:560px;
  max-height:min(84vh,700px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 60px -12px rgba(0,0,0,.6);text-align:left}
/* the card's furniture — one head for every card (v079): the title over a
   grey keyline, then air. The sign-in card has no title and keeps its own. */
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:26px 22px 16px 30px;border-bottom:1px solid var(--border)}
.menu-title{font-family:var(--display);font-size:40px;letter-spacing:1px;line-height:.95}
/* no dots on headlines. Michael: "I hate the red dot on headlines." */


.menu-x svg{width:15px;height:15px}
.menu-x line{stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.menu-body{padding:24px 30px 30px;overflow-y:auto}
/* .about is the plain-prose card body — the client's SET UP door still wears it */
.menu-body.about p{font-size:15px;line-height:1.65;margin-bottom:14px;font-weight:400}
.menu-body.about p:last-child{margin-bottom:0}
.faq{border-bottom:1px solid var(--border)}
/* the questions in bold body, not Bebas — nine caps headlines in a stack
   read as a poster (Michael, v079). The title keeps the display face. */
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-align:left;padding:15px 2px;font-family:var(--body);font-weight:600;font-size:15px;
  letter-spacing:0;line-height:1.35;transition:color .15s}
.faq-q:hover{color:var(--red)}
.faq.open .faq-q{color:var(--red)}
.faq-chev{flex-shrink:0;width:17px;height:17px;transition:transform .22s ease}
.faq-chev path{stroke:var(--red);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.faq.open .faq-chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .26s ease}
.faq.open .faq-a{max-height:240px}
.faq-a p{font-size:14.5px;line-height:1.6;font-weight:400;padding:0 2px 16px;max-width:52ch;color:#2c2a27}
.faq-cta{margin-top:16px}

/* ---------------- door ---------------- */
#door{flex:1;background:var(--red);display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:var(--g);text-align:center}
.greet{position:relative;width:100%;display:flex;align-items:center;justify-content:center;
  min-height:min(46vw,250px);margin-bottom:34px;transition:min-height .4s ease,margin-bottom .4s ease}
/* Once the bubble's gone the box hands its land back — the greeting doesn't
   need a bubble-sized paddock, just enough room to say HELLO YOU. */
.greet.settled{min-height:90px;margin-bottom:34px}   /* v199: room for the OPEN sign to hang */
.bub{position:absolute;width:min(56vw,300px);animation:pop .45s cubic-bezier(.2,1.4,.4,1) both;
  transition:transform .35s ease,opacity .35s ease;transform-style:preserve-3d}
/* TWO FACES (v117). HELLO on the front, READY? on the back, so the turn is
   continuous: front on the way out, back through the middle, front again on
   the way home. With one face the middle half of a 360 shows the bubble
   mirrored, which is why this had to stop being a single shape.
   The front's word is swapped at the halfway mark — see door.js — while it
   is turned away and nobody can see it happen. */
.bub .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* The front stays in flow. Two absolute faces leave .bub with no content to
   measure, so the box collapses to nothing and the shape spills out of it —
   invisible on the doorway, where .greet holds the paddock open, and very
   visible on the sign-in card, where it lands on top of the word box. */
.bub .face.front{position:relative;inset:auto}
.bub .face.back{transform:rotateY(180deg)}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.bub svg{display:block;width:100%;height:auto}
.bub-word{position:absolute;inset:0 0 12% 0;display:flex;align-items:center;justify-content:center}
.bub-word span{color:var(--red);font-size:clamp(42px,8.8vw,70px)}   /* 80% of what it was (v079) */
/* .gone must kill the entry animation — its fill-mode (`both`) otherwise
   pins opacity:1 forever and beats the class in the cascade. That was the
   ghost: bubble staying put with the echo mangled behind it. */
.bub.gone{animation:none;transform:scale(.86);opacity:0;pointer-events:none;
  visibility:hidden;transition:transform .35s ease,opacity .35s ease,visibility 0s .35s}
.echowrap{position:absolute}
.echo{color:#fff;font-size:62px;white-space:nowrap;opacity:0}
.echo.on{opacity:1;animation:pop .4s cubic-bezier(.2,1.4,.4,1) both}
/* The sandwich: sticker-cut art (black line, solid white body, transparent
   outside the outline) so it sits on the red like a sticker, not a picture.
   The 4% nudge optically centres the *sandwich* — the head-left / legs-right
   sprawl otherwise makes a mathematically centred image look drifted left. */
.sando{display:none;width:min(160px,40%);height:auto;margin:0 auto 8px;
  transform:translateX(4%)}
.sando.on{display:block;animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
/* The question drops a weight, not a voice: same condensed caps family
   feel as the HELLO, one notch quieter. Oswald 500 is Bebas's next weight
   down in spirit — Bebas itself only comes in one. */
.q{color:#fff;font-family:'Oswald',var(--display),sans-serif;font-weight:500;
  font-size:clamp(17px,2.8vw,24px);letter-spacing:2.5px;margin:-4px 0 28px;
  display:none;animation:up .3s .1s ease both}
.q.on{display:block}

.door-signin{width:100%;max-width:360px;margin:0 auto}
.door-row{display:flex;gap:8px}
.door-row input{flex:1;min-width:0;background:#fff;border:none;border-radius:var(--pill);
  padding:13px 20px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;
  text-align:center}
.door-row input::placeholder{color:var(--mid)}
/* the padlock is the action, and on white the action is white on red */



.door-go{flex-shrink:0}
.door-go svg{width:24px;height:24px;overflow:visible}
.shackle{transform-origin:4.5px 7px;transition:transform .3s ease}
.door-go.open .shackle{transform:rotate(-38deg) translateY(-1px)}
.door-note{font-size:12px;color:var(--mid);margin-top:11px;line-height:1.55;min-height:18px}
.door-note.bad{font-weight:500}
.door-note .line{margin:0;text-align:left;font-size:13.5px;padding:7px 12px 7px 9px}
.door-note .line .botdisc{width:24px;height:24px}
.door-note .line .botdisc svg{width:17px;height:17px}

.door-tiles{margin:0 auto;display:none;flex-direction:column;gap:10px;width:100%;max-width:360px;
  animation:up .3s .18s ease both}
.door-tile{background:#fff;border-radius:var(--r-card);padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;text-align:left;width:100%;transition:transform .15s}
.door-tile:hover{transform:translateY(-2px)}
/* its own colour, so the tile doesn't depend on the reset above to be right */
.door-tile-t{font-size:17px;font-family:'Oswald',var(--display),sans-serif;font-weight:500;letter-spacing:2px;
  color:var(--ink)}
.door-tile-d{font-size:12px;color:var(--mid);margin-top:1px}

.door-tile.soon{opacity:.45;cursor:default}
/* the offer (v132, v141): a tile like the others — the name, the save mark
   after it, the date underneath */
.door-tile.resume{text-align:left}
.door-tile.resume .door-tile-t{display:flex;align-items:center;gap:10px;text-transform:uppercase}
.door-tile-save{display:inline-flex;width:20px;height:20px;color:var(--red);flex:none}
.door-tile-save svg{width:100%;height:100%}
.door-tile.soon:hover{transform:none}


/* ---------------- THE SHOPFRONT (v062) ----------------
   The signed-out door, which a stranger sees and a client sees about once
   a month. Same red field, same robot, same tile grammar — bigger, because
   it's a sign, not a doorway. `.public` on #door is the fork; signedIn()
   takes it off and the greet, the question and the doorway take over. */
.shop{display:none;flex-direction:column;align-items:center;width:100%;animation:up .3s .1s ease both}
#door.public .shop{display:flex}
#door.public .greet{display:none}
/* the robot is on the sign too, a size up — it's the mark, not a greeting */
#door.public .sando{display:block;width:min(58vw,270px);animation:pop .45s cubic-bezier(.2,1.4,.4,1) both}
/* v199: the name is the whole sign now. No tagline under it — the robot in
   the sandwich already says it. The OPEN sign hangs off the word. */
.namewrap{position:relative;display:inline-block;font-size:clamp(52px,10vw,92px)}
/* the doorway's own scale, one step up: HELLO MICHAEL is 62px, so the
   sign is 72 — the biggest thing on the page, not a billboard. Everything
   above the fold on a laptop. (v062 was 120px and ate the screen.) */
.shop-name{font-size:1em;line-height:.95;letter-spacing:.01em;color:#fff;font-weight:400;margin-top:10px}
.shop-tiles{margin-top:clamp(40px,6vw,58px);width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px}
.shop-tile{padding:18px 20px}
.shop-tile .door-tile-t{font-size:19px;letter-spacing:.06em}
.shop-tile .door-tile-d{font-size:13px;margin-top:2px}


/* SIGN IN: a secondary button on red — white outline — not a line of
   underlined text. (The mock had the underline; the rule came after.) */
.shop-signin{margin-top:26px;font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:14px;
  letter-spacing:.18em;color:#fff;background:none;border:1.5px solid var(--white-hi);border-radius:var(--pill);
  padding:9px 22px 8px;cursor:pointer;transition:background .15s,color .15s}
.shop-signin:hover{background:#fff;color:var(--red);border-color:#fff}

/* SIGN IN, the card. The door's own furniture, on white, with the HELLO
   bubble inverted — red with white HELLO — and no title: it's self-evident. */
.menu-card.signin{max-width:420px;position:relative}
.menu-card.signin .menu-head{position:absolute;top:0;right:0;padding:14px 16px 0 0;z-index:1}
.menu-body.signin{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:64px 26px 36px}
.menu-body.signin .bub{position:relative;width:min(46vw,190px);margin:0 0 20px;animation:none}
.menu-body.signin .bub svg path{fill:var(--red)}
.menu-body.signin .bub-word span{color:#fff;font-size:clamp(42px,8.8vw,58px)}
.menu-body.signin .door-signin{width:100%;max-width:300px}
/* the way out, for somebody who arrives without the word */
.door-lost{margin-top:14px;font-size:12.5px;color:var(--mid);text-align:center}
.door-lost a{color:var(--red);text-decoration:underline}

/* THE REMINDER (v215): the link is a QUIET button, the arrow a ROUND one;
   nothing new in the set. [hidden] has to be said where a display is set. */
.door-forgot{margin-top:14px}
.door-signin[hidden],.door-row[hidden],.demo-cta[hidden]{display:none}
.door-note.sent{font-size:14.5px;color:var(--ink);line-height:1.55;margin-top:2px;text-align:center}
.word-signin.door-remind .door-note{text-align:left}
.word-signin.door-remind .door-note.sent{text-align:left}

/* HOW IT WORKS: the whole sell, one card. Art direction v078 (Michael's
   E): the title up a notch over a grey keyline, air before the copy, the
   hook bold as a standfirst, the rest at body size on a measure. */
.menu-body.hiw p{font-size:14.5px;line-height:1.6;margin-bottom:11px;max-width:50ch;color:#2c2a27}
.menu-body.hiw p.hiw-stand{font-size:17px;line-height:1.4;font-weight:600;color:var(--ink);margin:0 0 18px}
@media(max-width:480px){
  .menu-head{padding:22px 16px 14px 22px}
  .menu-title{font-size:34px}
  .menu-body{padding:20px 22px 24px}
  .menu-body.hiw p.hiw-stand{font-size:16px}
}
.hiw-sub{font-size:24px;letter-spacing:.5px;margin:32px 0 10px}
.hiw-rooms{margin:10px 0 22px;display:flex;flex-direction:column;border-top:1px solid var(--border)}
.hiw-room{padding:16px 2px;border-bottom:1px solid var(--border);display:flex;gap:14px;align-items:flex-start}
.hiw-ic{flex:none;width:38px;height:38px;border-radius:50%;background:var(--red);display:grid;place-items:center;margin-top:2px;color:#fff}
.hiw-ic svg{width:19px;height:19px}
.hiw-room h3{font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:18px;letter-spacing:.06em;color:var(--red);margin-bottom:6px}
.hiw-room p{margin:0;font-size:15px}
.hiw-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}




/* GIVE IT A WHIRL, for now */
.menu-card.whirl{max-width:420px}
.whirl-row{display:flex;gap:14px;align-items:flex-start}
/* flex:none, or the row squashes the disc into an oval to make room for the line */
.whirl-row .botdisc{flex:none;width:36px;height:36px;margin-top:2px;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.whirl-row .botdisc svg{width:25px;height:25px}
.whirl-row p{margin:0 0 4px;font-size:16px;line-height:1.55}
.whirl-cta{text-align:center;margin-top:16px}

/* ---------------- room ---------------- */
#sandwich{flex:1;display:none;flex-direction:column;padding:0 var(--g)}
#sandwich.on{display:flex}
/* the red runs to the bottom of the window on all three pages (v180).
   FILE IT used to stop short and leave a white void under the files; the
   64px of paper under every room went with it. 65px is the top bar. */
.feedstage,.fixstage,.filestage{min-height:calc(100vh - 65px);box-sizing:border-box}
.wrap{max-width:680px;width:100%;margin:0 auto}

/* THE LINE (v165). FEED IT | FIX IT | FILE IT, at the top of every room, on
   the red. The live page is white, the others grey. No numbers, no ticks.
   It replaced the white rail, the big headings and both taglines. Under it,
   one line of instruction, no longer than the line itself. The .step class
   and data-s are what go() and reach() have always read. */
.room-line{max-width:960px;margin:0 auto 22px}
.room-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.step{font-family:var(--display);font-size:clamp(36px,6vw,64px);line-height:.9;letter-spacing:.5px;
  color:#fff;padding:0;transition:opacity .15s;text-transform:uppercase}
.step:not(.on){opacity:.4}
.step:not(.on):not(.locked):hover{opacity:.75}
.step.locked{cursor:default}
.room-nav .sep{width:2px;height:.7em;font-size:clamp(36px,6vw,64px);background:rgba(255,255,255,.35)}
/* THE LADDER (v180). Three whites on the red, three steps: the live tab
   pure white, the instruction under it .86, the module labels .55. They
   used to be one white and the hierarchy went flat. If the label ever
   feels lost on a phone in sunlight, .65 — and leave the instruction alone. */
.room-instr{color:rgba(255,255,255,.86);font-size:15px;margin:8px 0 0;line-height:1.3}
/* the labels over the two modules, every page: plain spaced caps */
.room-lbl{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:3px;font-weight:700;
  text-transform:uppercase;margin:0 0 12px 2px}

.pane{display:none;animation:up .3s ease}
.pane.on{display:block}
@keyframes up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  margin-bottom:6px}
input,select,textarea{width:100%;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--r-input);padding:10px 12px;font-size:14px;font-family:inherit;color:var(--ink);
  font-weight:400;outline:none}
/* v188: a box is a box. Grey border, ink while you're typing, red nowhere —
   Michael: "the red is too much". Red stays for what's missing (.awake, TBC). */
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
textarea{resize:vertical;min-height:90px;line-height:1.6}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.three{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.two,.three{grid-template-columns:1fr}}
.bar{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}

/* copy blocks */
.block{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px;
  margin-bottom:12px;transition:border-color .15s}
.block:hover{border-color:#d6d2cc}


.ph{background:var(--delta);border-radius:3px;padding:0 3px;color:var(--red-dark);font-weight:500}
.opt{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-input);
  padding:11px 14px;font-size:14.5px;text-align:left;display:flex;gap:11px;align-items:flex-start;
  line-height:1.5;width:100%}
.opt:hover{border-color:var(--mid)}
.opt.pick{border-color:var(--red);background:#fff;box-shadow:inset 0 0 0 1px var(--red)}

.flags{background:var(--yellow);border-radius:var(--r-card);padding:14px 16px;margin-bottom:14px;font-size:13px}
.flags b{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.flags li{margin-left:16px;margin-bottom:3px;line-height:1.5}
.wants{background:var(--paper);border-radius:12px 12px 12px 4px;padding:10px 14px;
  margin-bottom:14px;font-size:13px;line-height:1.55}
.wants b{color:var(--red);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  margin-right:6px}

/* ---------------- FIX IT — the Wrangler split ----------------
   The whole email on the table, white on red. Tools on the right.
   Padlocks in the gutter between: open / pencil / shut, and they're
   the buttons. The artefact wears the client; the chrome stays ours. */
.fixstage{margin-left:calc(50% - 50vw);width:100vw;background:var(--red);
  padding:28px 24px 60px;}
.fixstage .room-line{max-width:1200px}
/* v180: one left edge for the headline, the label and the frame (the grid
   shares the line's 1200 and starts where it starts), and the rail ends
   where the line ends, so the page stops leaning. */
.fix-grid{display:grid;grid-template-columns:minmax(0,var(--fx-w,644px)) 380px;
  gap:40px;justify-content:space-between;align-items:start;max-width:1200px;margin:0 auto;}
/* the lozenge — one pill, three jobs: which output, which section, the
   standing question. White on the red room; outlined when it's an
   output that isn't on the table. */
.fix-lozrow{display:flex;gap:8px;align-items:center;min-height:30px;margin:0 0 14px;}
/* one output: the row is empty and takes no room, so the frame's top and
   the rail's card top are the same line (v180). With tabs, the rail drops
   by the row's height to match. */
.fix-tabs:empty{display:none}
.fix-grid.tabbed .fix-rail{padding-top:44px}
.fix-loz{display:inline-block;background:#fff;color:var(--red);
  font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  border-radius:var(--pill);padding:6px 14px 5px;line-height:1.2;user-select:none;}
.fix-loz.off{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);padding:4.5px 12.5px 3.5px;cursor:pointer;}
/* THE LABEL. A lozenge that names what you're looking at — FIX IT's topic,
   SET UP's stop — is not a button, so it doesn't wear the button's red.
   Grey on white, same Oswald. (.empty is the old name for the same idea.) */
.fix-loz.label,.fix-loz.empty{color:var(--mid);}
.fix-artwrap{position:relative;}
/* THE MAT (v078). The container paints the email; the room paints the world.
   Every artefact sits on the same flat grey ground with a hairline and a
   soft shadow (the hairline and shadow are in FIX_INNER_CSS, fix.js, on the
   email itself) — the way a mail client's preview pane looks. Containers
   stop painting a page ground of their own; the Crumb Sheet's butter used
   to run edge to edge and swallow the shadow whole. */
.fix-art.mail{background:#E4E1DC;border:none;border-radius:var(--r-card);overflow:visible;box-shadow:none;padding:0;}
/* v111: the mat is the artefact's own body padding (FIX_INNER_CSS in
   fix.js), even on all four sides. This used to add 6px top and bottom
   and nothing at the sides, on top of an inner padding that was 0 at the
   top — so the ground ran thin at the top, wide at the bottom, and the
   shadow had nowhere to fall above the work. One number now, in one
   place. */
.fix-sec{position:relative;}
.fix-sec.flash{animation:fxlanded .7s ease-out;}
@keyframes fxlanded{0%{background:rgba(237,28,36,.14);}100%{background:transparent;}}
.fix-art .ph{cursor:not-allowed;}
/* a hole we know about. Loud on purpose: work ships with TBC in it every
   day of the week, but nobody should be able to miss one. */
.ph.tbc{color:var(--red);font-weight:600;letter-spacing:.5px}
mark.fix-ch{background:var(--yellow);color:inherit;border-radius:2px;padding:0 1px;
  box-shadow:none;}

/* the gutter — the locks belong to THE WORK: one rail, fixed x, a dotted
   stub tying each lock to the artefact edge. Vertical comes from the
   section; horizontal comes from the card. */
.fix-gutter{position:absolute;top:0;right:-92px;width:44px;height:100%;pointer-events:none;}
.fix-pad{position:absolute;left:0;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  pointer-events:auto;background:#fff;color:var(--red);box-shadow:0 4px 14px rgba(0,0,0,.24);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .25s,background .2s,color .2s,top .3s;}
.fix-pad::before{content:'';position:absolute;right:100%;width:48px;
  border-top:2px dotted rgba(255,255,255,.85);}
.fix-pad svg{width:19px;height:19px;overflow:visible;}
.fix-pad:hover{transform:scale(1.12);}
.fix-pad.locked{color:var(--ink);}
.fix-pad.edit{box-shadow:0 4px 14px rgba(0,0,0,.24),0 0 0 5px rgba(255,255,255,.35);transform:scale(1.06);}
.fix-pad.fixed{background:#f2d6d7;color:#b9686c;cursor:not-allowed;box-shadow:none;}
.fix-pad.fixed:hover{transform:none;}
/* v189: the section's name under its padlock */
.fix-padname{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:5px;width:90px;
  text-align:center;font-family:var(--body);font-size:8px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(255,255,255,.75);line-height:1.2;pointer-events:none}

/* the rail */
.fix-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;}
.fix-rail .room-lbl{margin-bottom:0}   /* the gap does the 12, so the card tops the frame (v180) */

/* ── THE CHAT — one family (v020). The robot talks; the human answers,
   in every room. FEED IT's values are the base; the rail adds .narrow,
   and .narrow is only allowed to touch padding and margin. The what
   lives in the pill; the why lives in the chat; the input bar is the
   pencil; locking is a thing the robot reports, not a thing you press. */

.chat{display:flex;flex-direction:column;gap:10px;overflow-y:auto;scroll-behavior:smooth}
.chat-row{display:flex;gap:10px;align-items:flex-end}
.chat-row.me{justify-content:flex-end;margin-left:60px}
.chat-cav{flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.chat-cav.ghost{visibility:hidden}
.chat-msg{background:var(--paper);color:var(--ink);border-radius:var(--r-card);border-bottom-left-radius:4px;
  padding:13px 16px;font-size:13.5px;line-height:1.55;max-width:430px}
.chat-row.me .chat-msg{background:#fff;border:1px solid var(--border);
  border-radius:var(--r-card);border-bottom-right-radius:4px;white-space:pre-wrap}
.chat-think{min-height:36px}
/* things that ride inside a bubble — same in both door-tiles */
.chat-msg .quote{display:block;font-style:normal;color:var(--mid);font-size:11.5px;margin-bottom:3px}
/* the chip (v210): a change of section in FIX IT's one chat. The name in red,
   between two hairlines, the way a day is marked in a message thread. */
.chat-chip{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.chat-chip::before,.chat-chip::after{content:'';flex:1;height:1px;background:var(--border)}
.chat-chip span{font-family:'Oswald',var(--display),sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--red)}
.chat-msg .confirm{display:block;margin-bottom:6px}
/* the angle: a proposition the human is meant to talk over, so it sits
   inline in the sentence that asks about it, in quotes, in ink. It was a
   red block, which read as the answer arriving rather than a suggestion.
   The quotes carry it; bold on top was one signal too many. */
.chat-msg .angle{font-style:normal;font-weight:400;color:var(--ink)}
/* the fixer's two options — a bubble you can press */
.chat-opt{margin-left:46px;align-self:flex-start;max-width:280px;background:transparent;color:var(--red);
  border:1px solid var(--red);border-radius:var(--r-card);padding:9px 13px;font-size:13.5px;line-height:1.5;
  text-align:left;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.chat-opt:hover{background:var(--red);color:#fff}
/* the offer wears a rule, not a box (v125). Michael: fewer visual things
   going on. The box made it a second kind of button in a column that
   already has buttons, and a filled-red hover on top of that was one more
   signal again. The red "want that instead?" is what says press me; it
   survives losing the border, which is how we know the border was spare.
   The two drawer options above keep their boxes — they are a pair being
   chosen between, and a box is what makes a pair read as a pair. */
.chat-opt.offer{color:var(--ink);max-width:340px;text-align:left;white-space:normal;
  border:none;border-left:3px solid var(--red);border-radius:0;padding:2px 0 2px 12px}
.chat-opt.offer b{display:block;margin-top:6px;color:var(--red);font-weight:600}
.chat-opt.offer:hover{background:transparent;color:var(--ink)}
.chat-opt.offer:hover b{color:var(--red-dark)}
/* two ideas together (v208): a grey bubble, a round white disc with a red
   tick on the right. The disc is the padlock's and the pencil's family; a
   tap on it takes the idea. Mock C. */
.chat-opt.idea{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:340px;
  background:var(--paper);color:var(--ink);border:none;border-radius:var(--r-card);
  padding:8px 8px 8px 14px;white-space:normal;font-weight:600}
.chat-opt.idea:hover{background:var(--paper);color:var(--ink)}
.chat-opt.idea .disc{flex:0 0 32px;height:32px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18);display:grid;place-items:center;transition:box-shadow .15s}
.chat-opt.idea .disc svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.chat-opt.idea:hover .disc{box-shadow:0 0 0 3px rgba(214,58,43,.25),0 1px 4px rgba(0,0,0,.18)}
/* spent (v210): a bubble from a section you've left. Where it was, grey, dead. */
.chat-opt.spent{opacity:.55;pointer-events:none;cursor:default;color:var(--mid);border-color:var(--mid)}
.chat-opt.spent b{color:var(--mid)}
.chat-opt.idea.spent .disc svg{stroke:var(--mid)}

/* ---------------- THE WAIT (v125) ----------------
   Small type beside the thinking face, saying what the robot is at. It is
   theatre, and it earns its keep: a wait you can watch is shorter than the
   same wait spent staring at a face. Furniture, never conversation — it is
   not a bubble, it never lands in the transcript, and it goes when the
   answer does. The words are STR.waits; the cycle is waitGo() in chrome.js. */
.wait-line{align-self:center;font-size:12px;line-height:1.4;color:var(--mid);
  padding-left:2px;max-width:280px;animation:wait-in .32s ease both;
  transition:opacity .26s ease,transform .26s ease}
/* the swap: out, change while it can't be seen, back in. .26s each way has to
   match WAIT_FADE in chrome.js — the swap is timed off it, not off this. */
.wait-line.out{opacity:0;transform:translateY(-3px)}
@keyframes wait-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the dig's line sits beside its face, like every other wait (v152 —
   Michael: "should be by the robot"). It used to stack, centred. */
.search-head .wait-line{display:block;align-self:center;margin:0 0 0 12px;text-align:left}
@media (prefers-reduced-motion:reduce){.wait-line{animation:none!important}}
/* the rail is 352 wide inside its card: tighter bubble, tighter me-margin */
.chat.narrow .chat-msg{padding:11px 14px}
.chat.narrow .chat-row.me{margin-left:40px}

/* the constant: the white face on its red disc, everywhere the robot
   speaks. The disc is the mark; the white chip is just the seat. One
   size in the chat, one shadow, and it never reskins. */
.botdisc{width:27px;height:27px;border-radius:50%;background:var(--red);
  display:flex;align-items:center;justify-content:center}
.botdisc svg{width:19px;height:19px;display:block;overflow:visible}
.chat-cav .botdisc{width:36px;height:36px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.chat-cav .botdisc svg{width:25px;height:25px}
/* the composer: quote (if any), the box, ? and the arrow. Paper is
   enough — no dashed box, no rule, no SEND. */
.fix-compose{border-top:1px solid var(--border);padding-top:12px;position:relative;}
.fix-quote{display:none;border-left:3px solid var(--red);padding:2px 10px;font-size:12.5px;color:#444;line-height:1.4;margin:0 0 8px;}
.fix-quote.on{display:block;}
.fix-compose textarea{width:100%;border:none;outline:none;background:none;resize:none;font-family:inherit;
  font-size:15px;line-height:1.5;color:var(--ink);padding:2px 0;min-height:52px;}
.fix-compose textarea::placeholder{color:var(--mid);}
.fix-crow{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
/* ---------------- THE QUESTION MARK (v125) ----------------
   One control, one behaviour, four rooms. There were two of these, built at
   different times: FEED IT's dropped a bubble into the chat, FIX IT's popped
   a hardcoded three-way tooltip, and the dump and the checklist had none at
   all. The tooltip is the one that works in a room with no chat to drop a
   bubble into, so the tooltip is the one that lives. It hangs off the button
   rather than off a room's composer, which is what lets it go anywhere.
   The button keeps whatever shape its room already had — red disc in FEED
   IT's tool rows, small grey circle in FIX IT's composer. */
.q-wrap{position:relative;display:inline-flex}
.q-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid #c9c9c9;color:#9a9a9a;background:none;cursor:pointer;
  font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:14px;display:grid;place-items:center;}
.q-btn:hover{border-color:var(--red);color:var(--red)}
.q-tip{position:absolute;left:0;bottom:calc(100% + 9px);background:var(--ink);color:#fff;font-size:12.5px;line-height:1.4;
  padding:8px 12px;border-radius:var(--r-card);width:max-content;max-width:290px;display:none;z-index:4;}
.q-tip.on{display:block;}



.fix-arrow svg{width:19px;height:19px;}

/* WRAP IT UP — the seventh padlock */

.fix-wrap{display:flex;align-items:center;justify-content:center;gap:13px;transition:background .2s,color .2s,transform .2s}
.fix-wrap:hover{transform:translateY(-1px)}
.fix-wrapico{display:flex;}
.fix-wrapico svg{width:24px;height:24px;}



/* thinking — the face, one behaviour per wait. Shared by FEED IT and FIX IT. */
.botdisc.think svg{width:19px;height:19px;display:block;overflow:visible;}
.chat-cav .botdisc.think svg{width:25px;height:25px;}
.botdisc.think .eye,.botdisc.think .bulb{transform-box:fill-box;transform-origin:center;}
/* eyeroll — the eyes travel to the edge of the face, and the head casts
   4° with them. The old travel was 2.6 units, which on a 25px svg is a
   1.6px eye moving 1.9px: smaller than the antialiasing around it. Travel
   alone still wouldn't carry it at this size, so something large moves too.
   Eyes stay at r 2.2 here — this behaviour is about where they point, not
   about the eye itself. */
.botdisc.think.eyeroll .eye{animation:thEyeroll 2.2s infinite ease-in-out;}
.botdisc.think.eyeroll .bulb{animation:thBulb 2.2s infinite;}
.botdisc.think.eyeroll svg{animation:thCast 2.2s infinite ease-in-out;}
@keyframes thEyeroll{0%,100%{transform:translate(0,0)}15%{transform:translate(-4.4px,-1.6px)}35%{transform:translate(0,-4.6px)}55%{transform:translate(4.4px,-1.6px)}70%{transform:translate(0,0)}}
@keyframes thCast{0%,100%{transform:rotate(0)}15%{transform:rotate(-4deg)}35%{transform:rotate(0)}55%{transform:rotate(4deg)}70%{transform:rotate(0)}}
@keyframes thBulb{0%,100%{opacity:1}50%{opacity:.3}}
.botdisc.think.rollboth{animation:thRollboth 3.2s infinite cubic-bezier(.45,0,.2,1);}
@keyframes thRollboth{0%{transform:rotate(0)}38%{transform:rotate(360deg)}50%{transform:rotate(360deg)}88%{transform:rotate(0)}100%{transform:rotate(0)}}
.botdisc.think.rock svg{animation:thRock 1.2s infinite ease-in-out;transform-origin:50% 80%;}
@keyframes thRock{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
/* blink — a double blink on a 1.4s loop. Keyframes are percentages, so
   the stops are worked back from the duration to keep each lid movement at
   a true 144ms; change the 1.4s and these have to be recomputed with it.
   576ms of gesture, 824ms of stillness.
   The eye grows to r 3 for this behaviour alone. A blink is a lid acting on
   an eye, so there has to be enough eye for the closing to be an event —
   squash needs something to squash. The roll is about where the eyes point
   and doesn't need it. */
.botdisc.think.blink .eye{r:3px;animation:thBlink 1.4s infinite;}
.botdisc.think.blink .eye:nth-of-type(2){animation-delay:.06s;}
.botdisc.think.blink .bulb{animation:thBulb 1.4s infinite;}
@keyframes thBlink{0%,48%,100%{transform:scaleY(1)}
  58.3%{transform:scaleY(.08)}68.6%{transform:scaleY(1)}
  78.9%{transform:scaleY(.08)}89.2%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.botdisc.think *{animation:none!important;}}

/* don't touch */

@media(max-width:920px){
  .fix-grid{grid-template-columns:1fr;gap:22px;}
  .fix-rail{position:static;}
  .fix-artwrap{padding-right:56px;}
  .fix-gutter{right:0;}
}

/* fall into place: locked receipts, the open block, the waiting queue.
   Same padlock as the door — it pops open to let you in, it snaps shut as
   you commit copy. */
.receipt{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);
  padding:12px 18px;margin-bottom:10px;display:flex;align-items:center;gap:13px;width:100%;
  text-align:left;font-family:inherit;transition:border-color .15s;animation:up .25s ease}
.receipt:hover{border-color:var(--red)}
.receipt svg{width:15px;height:15px;flex-shrink:0}
.waiting{background:transparent;border:1px dashed var(--border);border-radius:var(--r-card);
  padding:12px 18px;margin-bottom:10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  font-weight:600;color:var(--mid);opacity:.6}

/* legals */
.always{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:6px 20px 16px;margin-top:6px}
.always summary{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:var(--mid);cursor:pointer;padding:12px 0}
.always li{font-size:12.5px;line-height:1.65;margin-bottom:8px;list-style:none;position:relative;padding-left:16px}
.always li::before{content:'';position:absolute;left:2px;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--mid)}

/* email preview */
.mail{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}

.file{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-input);padding:13px 15px;margin-bottom:8px}
.file-i{width:32px;height:32px;border-radius:var(--r-input);background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:9px;letter-spacing:1px;font-weight:700;flex-shrink:0}
.file-n{font-size:13.5px;font-weight:500}
.file-d{font-size:11px;color:var(--mid)}

.load{display:flex;align-items:center;gap:11px;color:var(--mid);font-size:13px;padding:14px 0}
.spin{width:15px;height:15px;border:2px solid var(--border);border-top-color:var(--red);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ================= THE BRIEF LADDER =================
   Fill-in-the-blanks. The connective words whisper in grey;
   the answers shout in Bebas on fat red lines. */

.ladder{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}
.join{font-family:var(--display);font-size:24px;letter-spacing:0;color:#B7B2AC;
  line-height:1;white-space:nowrap}

.blank{position:relative;display:inline-block;border-bottom:4px solid var(--red);
  padding:0 9px 2px;cursor:pointer;font-family:var(--display);font-size:42px;
  letter-spacing:0;line-height:1;white-space:nowrap;transition:background .12s}
.blank:hover{background:#FFF3F3}

/* typed answers sit on the same red line */

/* prize type: a real <select>, wearing the blank's clothes */

/* number chips */
.pop{position:absolute;top:calc(100% + 12px);left:0;z-index:20;background:#fff;
  border:1px solid var(--ink);border-radius:var(--r-card);padding:13px 15px;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.08);white-space:nowrap}
.pop.open{display:flex;gap:8px}

/* dates: Bebas labels, calendar pills */
.dates{display:flex;gap:48px;margin-bottom:40px;flex-wrap:wrap;align-items:flex-start}

/* what do we know */
.paste textarea{background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-card);
  padding:15px 17px;font-size:14px;min-height:105px}
.paste textarea:focus{border-color:var(--ink)}

@media(max-width:560px){
  .blank{font-size:31px}
  .join{font-size:19px}
  .dates{gap:22px}
}

/* Red is the tool's talking voice: the Brief is a conversation, so it happens
   on red with white cards. The working door-tiles (copy, review) stay on paper. */




/* ---------------- THE QUIZ (FEED IT page one) ----------------
   Ported from feed-it-ghost-mock.html — the mock is the spec. The room
   borrows FIX IT's Wrangler grammar: full-bleed red, the artefact's ghost
   on the left of the table, the robot talking from the right. The rail is
   fixed (three questions, the container's promise); the BOUNCER dresses
   each stop live and falls back to config patter without breaking step. */
/* v180: the same full-bleed as FIX IT. calc(340px - 50vw) assumed the wrap
   was its full 680, which it isn't on a phone: FEED IT sat 125px to the
   right of the window at 430 wide. */
.feedstage{margin-left:calc(50% - 50vw);width:100vw;background:var(--red);
  padding:28px var(--g) 58px}
.feed-wrap{max-width:960px;margin-inline:auto;text-align:left}
/* .feed-hed is SET UP's crumb now; FEED IT's heading went with the rail (v165) */
.feed-hed{font-family:var(--display);font-size:52px;line-height:.85;color:#fff;
  margin:0 0 8px;letter-spacing:1px}
.feed-lbl{margin-left:2px;margin-bottom:0}   /* the gutter number hangs outside the column, so the card starts at its edge; the column's own gap does the 12 */
.feedstage .room-line{margin-left:0}
.feed-grid{display:grid;grid-template-columns:300px minmax(0,540px);gap:80px;
  justify-content:start;align-items:start}
.feed-answer{margin-left:46px;margin-top:6px}
.feed-say{background:#fff;border-radius:var(--r-card);padding:4px}
.feed-say textarea{width:100%;border:none;outline:none;background:none;resize:none;
  font-family:inherit;font-size:13.5px;line-height:1.6;color:var(--ink);
  padding:11px 13px;min-height:96px;font-weight:400}
.feed-say textarea::placeholder{color:var(--mid)}
.feed-foot{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--border);margin:0 4px;padding:8px 4px;gap:10px}
.feed-tools{display:flex;gap:8px}
.feed-tool{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;transition:background .15s,transform .15s}
.feed-tool:hover{background:var(--red-dark);transform:scale(1.08)}
.feed-tool svg{width:17px;height:17px}


/* the story's door: live red the moment it shows (the robot's asked), not
   the ghost-white WRITE THE WORDS wears while padlocks are open */
.fix-arrow.small svg{width:13px;height:13px}





/* the ghost's holders (the drawing is mock.js, v178) */
.ghost-art{background:#F3F2F0;border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 10px 32px rgba(0,0,0,.18)}
@media(max-width:880px){
  .feed-grid{grid-template-columns:1fr;gap:30px}
  .ghost-hold{max-width:280px}
}

/* ---------------- THE CONCERTINA (FEED IT, v013) ----------------
   Ported from feed-it-concertina-mock.html — the mock is the spec.
   Three stops in the right column: DUMP / BOUNCE / CHECK. Closed = title
   + sub; open = the action; one open at a time. The gutter numbers are
   engine chrome and never reskin. Everything inside a stop is the
   furniture the tool already had — the pad borrows the pics page's
   dropzone, the chat is .chat, the deets are .deets-card — it just
   loses its own card. */
.feed-wrap{max-width:1000px}
.feed-grid{grid-template-columns:300px minmax(0,600px)}
/* v180: this line used to sit after the 880px rule above and beat it, so on
   a phone the grid kept two columns and YOUR STUFF ran off the right edge */
@media(max-width:880px){.feed-grid{grid-template-columns:1fr}}
.feed-acc{display:flex;flex-direction:column;gap:12px;position:relative;margin-left:46px}
/* the robot naming the short stop, in the stop it just sent you to.
   Says its piece and gets out of the way after a few seconds. */
/* THE LINE — something failed, the room stands. The robot disc wearing the
   error face, a red-tinted strip, a 3px red left border and a square left
   edge (deliberate: no curve on the left). Sits beside the wound. Fades
   after 7s unless it's asking for something, in which case it stays. */
.line{display:flex;align-items:center;gap:11px;
  background:var(--delta);border-left:3px solid var(--red);
  color:var(--red);font-weight:500;font-size:14.5px;line-height:1.35;
  padding:9px 14px 9px 11px;border-radius:0 var(--r-input) var(--r-input) 0;margin:0 0 14px;
  animation:line-in .28s ease-out both;transition:opacity .28s ease}
.line .botdisc{flex:none}
.line.out{opacity:0}
/* on the red door-tiles the strip goes solid white so it reads as furniture */
.line.onred{background:#fff;border-left-color:var(--red-dark);box-shadow:0 3px 10px rgba(0,0,0,.18)}
/* in the docs row it claims a whole row of the wrapping flex */
.feed-docs .line{flex:0 0 100%;width:100%;margin:6px 0 0;box-sizing:border-box}
/* under a doorway tile */
.door-tiles .line{margin:-2px 0 0;text-align:left}
/* in the chat rail: the line replaces the bubble, the disc sits in the cave */
.chat-row .line{margin:0;flex:1;min-width:0}
@keyframes line-in{from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.line{animation:none}}

/* THE CARD — a whole pane failed to arrive. Renders in the page flow, in
   the space the missing thing should occupy. White on the red room, the
   same tile grammar as FILE IT's fillings and the Doorway's door-tiles. */
.card{background:#fff;border-radius:var(--r-card);padding:34px 28px 30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 28px rgba(0,0,0,.18);
  animation:up .3s ease}
.card .botdisc{width:44px;height:44px;box-shadow:0 4px 14px rgba(0,0,0,.22);margin-bottom:18px}
.card .botdisc svg{width:31px;height:31px}
.card-h{font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:20px;letter-spacing:2.5px;
  text-transform:uppercase;line-height:1.1;margin-bottom:8px;color:var(--ink)}
.card-p{font-size:14.5px;line-height:1.55;color:#3a3835;max-width:36ch;margin-bottom:22px}


.file-tiles .card{grid-column:1 / -1}
/* the card stands in for the artefact, so it stands where the artefact
   stands. The frame's own body is inset 22px (FIX_INNER_CSS) and the
   tab lozenge is aligned to that; a card at margin 0 sat 22px left of
   its own EMAIL tab, which is what you see when the copy call falls. */
.fix-art .card{margin:0 22px}
.feed-stage{position:relative}
.feed-card{background:#fff;border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.10)}
.feed-gut{position:absolute;left:-46px;top:14px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
  font-family:'Bebas Neue',var(--display);font-size:20px;line-height:1;padding-top:2px}
.feed-stage.todo .feed-gut{border:2px solid var(--white-mid);color:var(--white-mid)}
.feed-stage.on .feed-gut{background:#fff;color:var(--red);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.feed-stage.done .feed-gut{background:#fff;color:var(--mid)}
.feed-head{display:flex;align-items:center;gap:14px;padding:18px 18px 16px;cursor:pointer;
  user-select:none;text-align:left;width:100%}
.feed-head .feed-q{font-family:'Bebas Neue',var(--display);font-weight:400;font-size:34px;letter-spacing:1px;
  text-transform:uppercase;display:block;color:var(--red);line-height:.9}
.feed-head .feed-sub{font-size:13.5px;line-height:1.5;color:var(--ink);margin-top:5px}
.feed-chev{margin-left:auto;flex:0 0 16px;width:16px;height:16px;transition:transform .2s}
.feed-chev path{stroke:#C4C0B6}
.feed-stage.on .feed-chev{transform:rotate(180deg)}
.feed-stage.on .feed-chev path{stroke:var(--red)}
.feed-stage.todo .feed-head{cursor:default}
.feed-stage.todo .feed-q{color:#D6D2CB}
.feed-stage.todo .feed-sub{color:#D6D2CB}
.feed-stage.done .feed-q{color:var(--mid)}
.feed-stage.done .feed-sub{color:var(--mid)}
.feed-bod{display:none;padding:0 18px 14px}
.fix-prompt{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--mid)}
.fix-prompt[hidden]{display:none}   /* v196: 18 to sit under .feed-head's 18, not 4px left of it */
.feed-stage.on .feed-bod{display:block}
.feed-stage.on .feed-head{padding-bottom:8px}
/* the existing furniture, inside a stop */
.feed-bod .feed-answer{margin-left:0;margin-top:0}
.feed-bod .feed-say{padding:0}
.feed-bod .feed-foot{margin:0;padding:8px 0 0}
.feed-bod .chat{margin-bottom:10px;max-height:38vh}   /* the chat scrolls before half a screen (v092), the box and the pill stay put */
/* the composer grows to what's in it and then scrolls, rather than slicing
   a paste through the middle of its third line. The cap keeps the chat
   above from being squeezed off the card. */
.feed-bod .feed-say textarea{min-height:0;padding:9px 4px;max-height:150px;overflow-y:auto}
/* no display type inside the stops — the sections don't perform */

.feed-bod .deets-title{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:2px;color:var(--mid);margin-bottom:4px}
.feed-bod .deets-title em{color:var(--mid)}
/* stop one is a landing pad: the pics page's dropzone, borrowed whole */
/* ---- DUMP YOUR DOCS: three doors, one box ------------------------------
   The discs are engine chrome, same family as the padlocks and the card
   ticks — they never reskin. Three states: hollow (nothing landed), has
   (something's in that box, even closed), on (this box is open). The `has`
   ring is the only tell for a closed door, so no badges and no counts. */
.dump-doors{display:flex;justify-content:center;gap:34px;margin:4px 0 6px}
.dump-door{background:none;border:none;padding:0;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:7px}
.dump-door b{font-family:var(--display);font-weight:500;font-size:13px;
  letter-spacing:.6px;color:var(--mid);transition:color .15s}
.dump-disc{width:56px;height:56px;border-radius:50%;border:1.5px solid #cfcfcf;
  background:#fff;color:#cfcfcf;display:grid;place-items:center;transition:all .15s}
.dump-disc svg{width:25px;height:25px}
.dump-door:hover .dump-disc{transform:scale(1.08)}
.dump-door.has .dump-disc{border-color:var(--red);color:var(--red)}
.dump-door.has b{color:var(--ink)}
.dump-door.on .dump-disc{background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.dump-door.on b{color:var(--ink)}
.dump-door:active .dump-disc{transform:scale(.94)}
/* the global focus ring boxes the button, label and all — a red rectangle
   round a circle. Move it onto the disc, where it reads as a ring and
   keyboard users still get their tell. */
.dump-door:focus-visible{outline:none}
.dump-door:focus-visible .dump-disc{outline:2px solid var(--red);outline-offset:3px}

/* The container's own nudge, under the doors. Nothing feeds it as of
   v023 — the slot and these rules stay so it's one line to bring back. */
.dump-nudge{text-align:center;font-size:13px;color:var(--mid);
  max-width:42ch;margin:0 auto 18px}
.dump-nudge:empty{display:none}

/* one box. Solid at rest, never dashed — dashed is reserved for a live
   drag. Centred while empty, top-aligned and growing once anything lands. */
.dump-plate{border:1.5px solid var(--border);border-radius:var(--r-card);
  min-height:150px;padding:18px;display:flex;flex-direction:column;
  justify-content:center;transition:border-color .15s,background .15s}
.dump-plate.filled{justify-content:flex-start}
.dump-plate.over{border:2px dashed var(--red);background:rgba(237,28,36,.05)}
.dump-view{display:none;flex-direction:column;align-items:center;gap:12px;width:100%}
.dump-view.on{display:flex}
.dump-view.filled{align-items:stretch}
.dump-empty{display:flex;flex-direction:column;align-items:center;gap:12px}
.dump-baby{width:30px;height:30px;color:var(--mid);flex:none}
.dump-view.filled .dump-baby{display:none}
.dump-plate.over .dump-baby{color:var(--red);display:block}
.dump-hint{margin:0;font-size:14px;color:var(--mid);text-align:center}   /* 14, like the search prompt and the empty paste box (v165) */
.dump-hint a{color:var(--red);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.dump-view.filled .dump-empty{margin-top:12px}

/* a landed file. Doc icon, name, tick. Hollow tick means it didn't read. */
.dump-row{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r-input);background:#fff;margin-bottom:8px}
.dump-row svg{width:17px;height:17px;color:var(--mid);flex:none}
.dump-name{flex:1;font-size:13.5px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}


.dump-tick{width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;flex:none}
.dump-tick svg{width:12px;height:12px;color:#fff}
/* a file being read server-side. The tick is empty and breathing until
   its words come back — same row, three states, no new furniture. */
.dump-row.wait{border-style:dashed}
.dump-row.wait .dump-name{color:var(--mid)}
.dump-row.wait .dump-tick{background:none;box-shadow:inset 0 0 0 1.5px var(--border);
  animation:dumpWait 1.1s ease-in-out infinite}
@keyframes dumpWait{0%,100%{opacity:1}50%{opacity:.35}}
.dump-row.bad .dump-tick{background:#fff;border:1.5px solid #cfcfcf;color:transparent}
/* .feed-docs is a wrapping flex row, so the line has to claim a whole one
   of its own — otherwise it sits beside whichever row wrapped last. */
.dump-bad{flex:0 0 100%;width:100%;margin:0}

/* ---- SEARCH: the third door ---------------------------------------------
   A tool, not a container. Its furniture is the engine's: the same discs,
   the same plate rows, the same thinking head, and FIX IT's arrow — which
   already settled that a field gets an arrow, not a SEND button. */

/* the ask. Field and arrow are one object, centred under the magnifier. */
.search-ask{display:none;flex-direction:column;align-items:center;gap:12px;width:100%}
.search-ask.on{display:flex}
.search-fieldrow{display:flex;align-items:center;gap:10px}
.search-field{width:min(300px,64vw);border:none;background:none;font-family:inherit;
  font-size:14px;color:var(--ink);padding:2px 2px 6px;text-align:center;
  border-bottom:1px solid var(--border);outline:none}
.search-field::placeholder{color:var(--mid)}
.search-field:focus{border-bottom-color:var(--ink)}
/* the arrow, borrowed whole from the composer — 42px there, smaller here
   because it sits beside one line and not a paragraph. */



.search-arrow{flex:none}
.search-arrow svg{width:16px;height:16px}
/* planning: the arrow turns like a clock hand — the full rotation is the
   loading gesture everyone already knows (thinkFace settled that). It
   stays red while it turns: pink means can't, motion means busy. */
/* NOT .spin — see the note on .bub.turn. The donut's own
   `animation:sp .7s` was landing on the button as well, so the arrow was
   turning inside a turning button, at neither of the two written speeds. */
.search-arrow.looking,.search-arrow.looking:disabled{background:var(--red)}
.search-arrow.looking svg{animation:srspin 1s linear infinite}
@keyframes srspin{to{transform:rotate(360deg)}}
/* looking: the field waits its turn but doesn't leave */
.search-field:disabled{color:var(--mid);background:none}

/* the thinking head, over the searches it's working through */
.search-head{display:none;justify-content:flex-start;align-items:center;padding:2px 0 14px}
.search-head.on{display:flex}
/* the same size the chat gives it — this is a wait, not a byline */
.search-head .botdisc{width:36px;height:36px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.search-head .botdisc.think svg{width:25px;height:25px}

/* the subheads: Bebas in ink — a section signal inside the card, sitting
   between the red title's register and the body's. */
.search-sub{display:none;font-family:var(--display);font-size:19px;letter-spacing:.04em;
  color:var(--ink);text-align:center;margin:10px 0 12px}
.search-sub.on{display:block}

/* a search: proposed (tick to opt in), running, or done */
.search-list{display:none;width:100%}
.search-list.on{display:block}

/* GO DIGGING: the door's action lives in the flow it commits, centred.
   Hollow until a search is ticked — the button teaches the rule. */
.search-dig{align-self:center;margin-top:6px}
.search-line{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r-input);background:#fff;margin-bottom:8px;
  font-size:13.5px;color:var(--ink)}
.search-line svg{width:15px;height:15px;color:var(--mid);flex:none}
.search-line.doing{border-color:var(--red)}
.search-line.done{color:var(--mid)}

/* the catch */
.search-hits{display:none;width:100%}
.search-hits.on{display:block}
/* a found fact. Hollow on arrival — the line says tick what's handy. */
.search-hit{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;
  border:1px solid var(--border);border-radius:var(--r-input);background:#fff;margin-bottom:8px;
  cursor:pointer;text-align:left;width:100%}
.search-hit.on{border-color:var(--red)}
.search-tick{width:22px;height:22px;border-radius:50%;border:1.5px solid #cfcfcf;background:#fff;
  color:transparent;display:grid;place-items:center;flex:none;margin-top:1px}
.search-tick svg{width:12px;height:12px}
.search-hit.on .search-tick{background:var(--red);border-color:var(--red);color:#fff}
.search-fact{display:block;font-size:13.5px;line-height:1.45;color:var(--ink)}
.search-src{display:block;font-size:11.5px;color:var(--mid);margin-top:3px}
/* the receipt: a linked source is underlined so it reads as clickable,
   and sized generously enough to hit without ticking the row */
a.search-src{width:fit-content;text-decoration:underline;text-underline-offset:2px;padding:2px 0}
a.search-src:hover{color:var(--red)}
/* the hit was a button; as a div it needs its keyboard tell back */
.search-hit:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* barred facts (prices) are filtered server-side and never rendered —
   the rules run, they don't perform. */

/* the peek: a landed row opens to show what was found and where from.
   Without it, "no source, no fact" dies the moment the row collapses to a
   name. In place, not a modal — the modal is spoken for. */
.peek{border-top:1px solid var(--border);background:var(--paper);padding:11px 12px 12px}

/* WORDS: mirrors DOCS while empty — scissors, then a centred grey
   invitation at the hint's 12px, and it stays centred whether you've
   clicked in or not. Type or paste and it becomes an ordinary
   left-aligned textarea at reading size. One element, not a hint that
   swaps for a field. The radius is for the focus ring, which follows
   the corners and reads as a ring rather than a validation rectangle.
   (This used to be two rules 12px apart fighting over one selector —
   v023 flagged the tidy; this is it.) */
.feed-paste{display:block;width:100%;border:none;background:none;resize:none;
  min-height:96px;font-family:inherit;font-size:14px;line-height:1.6;
  color:var(--ink);outline:none;padding:0 4px 2px;border-radius:var(--r-input);
  text-align:left}
.feed-paste:placeholder-shown{text-align:center;font-size:14px;min-height:0;height:22px}   /* empty, it is one line, so the scissors sit where DOCS puts its glyph (v092) */
#feedViewWords .dump-baby{margin-top:12px}   /* DOCS has an empty list and a gap above its glyph; match it */
.feed-paste::placeholder{color:var(--mid)}
/* no ring on the pad itself — the global textarea:focus-visible ring drew a
   red validation box inside the plate. And the plate does not wake on
   focus any more (v080): it used to go red whenever a field inside it had
   focus, which meant WORDS and SEARCH lit up and DOCS never did — three
   doors, three browser states. The pad is the same grey in every door, one
   plane; the disc above says which door you're in; the only red the pad
   ever wears is a live drag. Michael: "grey. It's classy." */
.feed-paste:focus-visible{outline:none}
/* THE GRAB LINE (v180). The demo lives in the WORDS box now, not on a play
   button in the foot: the empty box reads "Paste words here or grab some to
   play with." and only "grab some" is a link, to the demo dump. It behaves
   like a placeholder — there while the box is empty, gone once there's
   text — but a placeholder can't hold a link, so it's an overlay on the
   box: the line lets clicks through to the textarea, the link takes its own. */
.feed-paste-hold{position:relative;width:100%}
.feed-grab{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;margin:0}
.feed-grab a{pointer-events:auto}
.dump-view.filled .feed-grab{display:none}
/* the search field wore the same ring over its own red pill — same rule */
.search-field:focus-visible{outline:none}

.feed-docs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.feed-docs:empty{margin-top:0}
.feed-bod>.feed-foot{border-top:none;padding-top:10px}
/* the deets live inside stop three: cards become sections */
.feed-bod .deets-cards{max-width:none;gap:0}
.feed-bod .deets-card{padding:12px 0 4px;border-radius:0}
.feed-bod .deets-card+.deets-card{border-top:1px solid var(--border)}




/* v188: the DONE size, pushed to the right edge under the chat */
.story-door{display:flex;width:fit-content;margin:12px 0 0 auto}
.story-door[hidden]{display:none}
@media(max-width:880px){
  .feed-acc{margin-left:40px}
  .feed-gut{left:-40px;width:30px;height:30px;font-size:17px}
}

/* ---------------- THE CHECKLIST (FEED IT page two) ----------------
   Ported from checklist-mock.html — the mock is the spec. One dumb
   renderer; DEETS_CONFIG deals the screen. One awake device: red text
   where the fact should be. The tick circle is the control. */
.deets-cards{width:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:14px;text-align:left}
.deets-card{background:#fff;border-radius:var(--r-input);padding:20px 20px 8px}
.deets-card.legals{padding-bottom:12px}
.deets-title{font-family:var(--display);font-size:24px;letter-spacing:.04em;color:var(--ink);margin-bottom:6px}
.deets-title em{font-style:normal;color:var(--red)}
.deets-row{border-top:.5px solid #ECEAE3;padding:11px 0}
.deets-main{display:flex;align-items:center;gap:12px}
.deets-label{flex:none;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mid);font-weight:500}
.deets-value{flex:1;min-width:0;text-align:right;cursor:pointer}
.deets-ask{font-size:15px;font-weight:500;color:var(--red)}
.tick{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;cursor:pointer;border:2px solid #C4C0B6;background:#fff;color:#C4C0B6;
  transition:transform .12s,background .15s,border-color .15s;padding:0}
.tick svg{width:16px;height:16px}
.tick:active{transform:scale(.9)}
.tick.on{border-color:var(--red);background:var(--red);color:#fff}
.deets-row input,.deets-row select{font-family:'Inter',sans-serif;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid var(--border);border-radius:var(--r-input);padding:6px 10px;outline:none;
  text-align:right;width:70%;max-width:260px}
.deets-row input:focus,.deets-row select:focus{border-color:var(--ink)}
.deets-row input[type=date]{width:175px}
.deets-row .deets-subin{width:74px;max-width:none;font-size:12.5px;color:var(--mid);border:none;
  border-bottom:1px dashed var(--border);border-radius:0;padding:2px 0;text-align:center;margin-right:8px}
.deets-notsure{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--mid);
  border-bottom:1px dashed var(--border);cursor:pointer}
.deets-doors{margin-top:10px;background:var(--red);border-radius:var(--r-input);padding:14px 16px;text-align:left}
.deets-doorline{display:flex;gap:10px;align-items:flex-start;color:#fff;font-size:14px;line-height:1.5}
.deets-doorbot{flex:none;width:26px;height:26px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center}
.deets-doorbot svg{width:17px;height:17px}
.deets-doorbtns{display:flex;gap:10px;margin:12px 0 0 36px}


.deets-legwait{font-size:12.5px;color:var(--mid);padding:4px 0 8px}



/* ---------------- LOCK THE DEETS (v031) ----------------
   Was CHECK YOUR DEETS. Three sections, three padlocks, one door. Only two
   things are active on this card: red TBCs to fill, and specific terms to
   tick. Everything else is furniture. The details are canon, so the stop
   borrows FIX IT's padlock rather than a tick — and the client learns the
   device here, on easy facts, before FIX IT asks for it again.
   Ported from deets-mock.html; the mock is the spec. */
.deets-sec{position:relative;padding:20px 88px 20px 0;border-top:1px solid var(--border)}
.deets-sec:first-child{border-top:none;padding-top:4px}
.deets-sec .deets-title{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:2px;
  color:var(--mid);text-transform:uppercase;margin-bottom:8px}
.deets-sec .deets-title em{font-style:normal;color:var(--mid)}
.deets-sec .deets-title.deets-t2{margin-top:20px}
.deets-body.inert,.deets-body>.inert{pointer-events:none;opacity:.55}
.deets-body .deets-factgrid{padding-right:0}

/* THE PRIZE — one sentence, ink, the same facts the prize clause prints.
   Not a widget, not chips, not a bubble. TBC carries the only red. */
.deets-prize{font-size:17px;line-height:1.55}
.deets-prize b{font-weight:600}
.tbc{color:var(--red);font-weight:500}

/* THE DATES — a plain list. Filled rows sit in ink and shut up. Open, they
   become the platform's own picker; no library, no widget. */
/* the dates' own table (v158–v189) is gone: they're lines now (v190) */

/* the padlock — FIX IT's icons, restyled for a white card: white disc, red
   icon, ink once it's shut. No dotted stub; it floats clean in the gutter,
   centred on its section. The halo goes red-tinted, since FIX IT's white
   ring vanishes against paper. */
.deets-pad{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:#fff;color:var(--red);box-shadow:0 3px 12px rgba(0,0,0,.16);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,box-shadow .25s,background .2s,color .2s}
.deets-pad svg{width:19px;height:19px;overflow:visible}
.deets-pad:hover{transform:translateY(-50%) scale(1.12)}
.deets-pad.locked{color:var(--ink)}
.deets-pad.edit{box-shadow:0 3px 12px rgba(0,0,0,.16),0 0 0 5px rgba(237,28,36,.12);
  transform:translateY(-50%) scale(1.06)}

/* the refusal — canon doesn't ship with a hole in it, so the hole says so */
@keyframes deets-flash{0%,100%{opacity:1}25%,75%{opacity:.2}}
.deets-sec.flash .tbc,.deets-sec.flash .deets-ask{animation:deets-flash .85s ease 2}

/* standard terms: one quiet block naming the clauses, served by the clause
   library. Nothing tickable, nothing red. "Read them" opens the words. */
.deets-std{font-size:13.5px;color:var(--mid);line-height:1.6}
/* the robot heard you and couldn't use it. Same awake red as TBC — this is
   still a row that needs answering — but it carries your words, so nobody
   wonders whether the answer went in. */
.deets-ask.caught{font-style:italic;letter-spacing:0;text-transform:none}
/* two settled facts that disagree. Both still show — there is no hole to
   mark — and the row says which way round they should be. */
.deets-clash{margin-top:5px;font-size:12px;line-height:1.4;color:var(--red);font-weight:500}
.deets-row.clashing{outline:1.5px solid var(--red);outline-offset:3px;border-radius:var(--r-input)}
.deets-peek{display:inline-block;font-size:12.5px;color:var(--red);font-weight:500;
  cursor:pointer;border-bottom:1px dotted var(--red)}
.deets-stdfull{display:none;margin-top:10px;background:var(--paper);border-radius:var(--r-card);
  padding:14px 16px;font-size:12.5px;color:var(--ink);line-height:1.6}
.deets-stdfull.on{display:block}
.deets-stdfull b{display:block;font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--mid);margin:10px 0 2px}
.deets-stdfull b:first-child{margin-top:0}
.deets-pills.inert{pointer-events:none;opacity:.55}

/* THE DOOR — outside the cards, under the whole concertina, on the red.
   FIX IT's wrap furniture. Ghost-white and dead until every padlock is
   shut; then solid white, red type, alive. */
.feed-acc>.deets-door{font-family:var(--display);font-size:23px;letter-spacing:1.5px;
  line-height:1;padding:15px 22px 12px;height:auto;border-radius:var(--pill);border:none;
  display:block;width:100%;margin:20px 0 0;cursor:default;
  background:rgba(255,255,255,.28);color:rgba(255,255,255,.55);
  transition:background .2s,color .2s,box-shadow .2s}
.feed-acc>.deets-door.live{background:#fff;color:var(--red);cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
@media(max-width:880px){.deets-sec{padding-right:60px}.deets-pad{width:38px;height:38px}}

/* ---------------- the pics page (FEED IT page three) ----------------
   The robot's writing; the human fills the window with pictures.
   Optional by design — the exit works empty or full, only the label flips. */
.pic{position:relative;border-radius:var(--r-input);overflow:hidden;border:1px solid var(--border);aspect-ratio:1}
.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic.hold img{opacity:.45}
.pic button{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  border:none;background:var(--ink);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.pic button:hover{background:var(--red)}

/* ---------------- THE DOORWAY (v014) ----------------
   Tiles read off the container folders, grouped by brand. The brand
   name only shows when there's more than one. Testing tiles are Hunch-
   only: ink badge, ink go-circle — engine chrome saying "not for clients". */
.door-brand{width:100%;margin:10px 0 -4px;color:#fff;font-family:'Oswald',var(--display),sans-serif;
  font-weight:500;letter-spacing:2.5px;font-size:12px;opacity:.8;text-align:left;padding-left:4px}
.door-brand:first-child{margin-top:0}
.badge{display:inline-block;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:#fff;background:var(--ink);border-radius:var(--pill);padding:3px 8px;
  margin-left:8px;vertical-align:middle}


/* the artefact lives in an iframe — its skin and ours never meet */
.fix-frame{display:block;width:100%;border:0;background:transparent}
.mail .fix-frame{border-radius:var(--r-card)}

/* checklist: repeating groups */
.deets-tag{display:inline-block;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--red);border-radius:var(--pill);padding:3px 9px;vertical-align:middle;margin-left:8px;font-weight:600}






/* ---------------- v015: one shape, the lineup ----------------
   The bounce box wears the pad's dashed box: a white box with a cursor
   in it, NEXT underneath, no placeholder. Stop 3's lineup: a story is a
   row with its topics as chips beneath. */
/* The bounce composer. Its footer sits inside .feed-say, so the reset at
   `.feed-bod>.feed-foot` — direct children only — sailed straight past it and
   left a rule across the box. Killed here rather than by loosening that
   selector, which would un-line footers this hasn't looked at. */
.feed-bod .feed-say{border:2px dashed var(--border);border-radius:var(--r-input);padding:8px 10px 4px}
.feed-say .feed-foot{border-top:none}
.feed-bod .feed-say textarea{font-size:15px;line-height:1.5}
.deets-card.story{position:relative;padding-bottom:12px}
.deets-card.story .deets-row{border-top:none;padding-top:4px}
.deets-tag.grey{background:var(--paper);color:var(--mid)}

/* ---------------- the deets pills (v019) ----------------
   Clauses as pills: fixed grey and tickless, proposals on in red, the
   rest greyed inline — spot it grey and add it. Tap the name and the
   pill opens into the words as they'll print; unconfirmed facts read
   as an ellipsis. Peek, not hover — legal text is reading matter. */
.deets-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.deets-pill{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--red);border-radius:var(--pill);
  padding:6px 14px 6px 8px;font-size:13px;font-weight:500;max-width:100%;background:#fff}
.deets-pill.fixed{border-color:var(--border);padding:6px 14px}
.deets-pill.off{border-color:var(--border);color:var(--mid);font-weight:400}
.deets-ptick{width:18px;height:18px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  flex:none;cursor:pointer;margin-top:1px}
.deets-ptick svg{width:11px;height:11px;color:#fff}   /* the chrome's TICK carries its own stroke */
.deets-pill.off .deets-ptick{background:#fff;border:1.5px solid #cfcfcf}
.deets-pill.off .deets-ptick svg{display:none}
.deets-pbody{min-width:0}
.deets-pname{background:none;border:none;padding:0;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;text-align:left}
.deets-pname:focus{outline:none}
.deets-pname:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:4px}

/* ---------------- the deets facts (v020, lines since v190) ----------------
   Every fact is a line: the label in the small caps, the fact beside it, the
   labels in a column fitted to the group (--lab, set by deets.js). The same
   line a story draws. A link is red; TBC pressed is grey; TBC owed is red.
   Editing: the box sits under the label. Was a pill, v020–v189 — Michael:
   "the data points change, but the format should be the same". */
.deets-card.facts{position:relative;padding-bottom:20px;padding-right:16px}
.deets-factgrid{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-right:44px}
.deets-row.fact{border-top:none;padding:5px 0;cursor:pointer}
.deets-row.fact .deets-main{gap:0}
.deets-row.fact .deets-value{text-align:left;font-size:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.deets-row.fact .story-lab{min-width:var(--lab,52px);font-weight:500}
.deets-row.fact .story-val{color:var(--ink)}
.deets-row.fact .story-val.tbc{color:var(--mid)}
.deets-row.fact .story-val.owed,.deets-row.fact .story-val.caught{color:var(--red);font-weight:500}
.deets-row.fact .story-val.caught{font-style:italic;font-weight:400}
.deets-row.fact .deets-clash{flex-basis:100%}
.deets-row.fact.editing{cursor:default}
.deets-row.fact.editing .deets-value{display:block}
.deets-row.fact.editing .deets-value>.story-lab{display:block;margin-bottom:6px}
.deets-row.fact.editing input,.deets-row.fact.editing select{text-align:left;width:100%;max-width:340px;font-size:14px;padding:8px 12px}
.deets-row.fact.editing .deets-subin{width:74px;display:inline-block;margin-right:8px}
.deets-row.fact.editing .deets-tbcbtn{vertical-align:middle}
.deets-dates .deets-row.fact input[type=date]{width:auto;font-family:var(--body);font-size:14px;padding:6px 10px;text-align:left;cursor:pointer}
/* inside a story line the line's own label is already drawn */
.story-line .deets-row.story-open .deets-value>.story-lab{display:none}
.story-line .deets-row.story-open{padding:0}
.deets-card.story{position:relative;padding-bottom:20px}
.deets-card.story .deets-pills{padding-right:44px}
.deets-storyname{font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:15px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.deets-pwords{display:none;font-size:12px;font-weight:400;color:var(--mid);line-height:1.45;margin-top:3px;max-width:420px}
.deets-pill.peeked{border-radius:var(--r-card)}
.deets-pill.peeked .deets-pbody{flex-basis:100%}
.deets-pill.peeked .deets-pwords{display:block}
.deets-rm{float:right;line-height:1}
.deets-card.story .deets-rm{position:absolute;top:12px;right:14px;float:none}

/* ---------------- THE WORKINGS card (v015, reshaped v016) ----------------
   White card: lozenge on top, the section's thread, the composer. */
.fix-card{background:#fff;border-radius:var(--r-card);padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}
/* TWO SIZES, NOT A HUNDRED (v123). Empty, the chat takes no room at all and
   the composer drops its keyline — the card at rest is one small box that
   plainly wants typing in. The moment a thread exists it takes its full
   working height in one move and scrolls from then on, so 10 BITS TO LOCK
   travels once and then holds still. A card that grows line by line walks
   that button down the page, and the rail is sticky, so you feel it. */
.fix-card .chat{max-height:46vh;min-height:46vh}
.fix-card .chat:empty{min-height:0;display:none}
.fix-card .chat:empty + .fix-compose{border-top:none;padding-top:0}

/* ---------------- FILE IT — the takeaway counter (v017) ----------------
   Ported from file-it-mock.html — the mock is the spec. Same Wrangler
   grammar as FEED IT and FIX IT: full-bleed red, the robot asking. White
   tiles on red are the Doorway's door-tiles wearing the detail list's tick —
   one control, learned once. Grey tiles go paper and the line says why;
   nothing sells. The robot says WRAPPED once; the files stack in a card. */
.filestage{margin-left:calc(50% - 50vw);width:100vw;background:var(--red);
  padding:28px var(--g) 58px}
.file-wrap{max-width:960px;margin-inline:auto;text-align:left}
/* the tiles stay live after a wrap: re-tick one and WRAP IT comes back.
   They used to fade and go dead, and "Change the order" was the only way
   back in — that link is gone, so the way back is the tiles themselves. */
.file-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:900px}
.tile{position:relative;background:#fff;border-radius:var(--r-card);padding:20px 18px 18px;text-align:left;
  display:flex;flex-direction:column;gap:12px;min-height:190px;transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 16px rgba(0,0,0,.10);color:var(--ink)}
.tile:hover{transform:translateY(-2px)}
.tile.off{background:var(--paper);box-shadow:none;cursor:default}
.tile.off:hover{transform:none}
.tile-i{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex-shrink:0}
.tile-i svg{width:22px;height:22px}
.tile.off .tile-i{background:#DAD6CF}
.tile-t{font-family:var(--display);font-size:30px;letter-spacing:1px;line-height:.9;margin-top:auto}
.tile.off .tile-t{color:var(--mid)}
.tile-d{font-size:13px;line-height:1.5;font-weight:400;min-height:40px}
.tile.off .tile-d{color:var(--mid)}
.tile .tick{position:absolute;top:14px;right:14px}
.tile.on .tick{border-color:var(--red);background:var(--red);color:#fff}
.tile.off .tick{display:none}
.file-bar{display:flex;flex-direction:column;align-items:center;max-width:900px;margin-top:30px}
.file-bar .line{margin:14px 0 0}


.file-done{display:none;margin-top:30px;max-width:900px;animation:up .3s ease}
.file-done.on{display:block}
.file-say{display:flex;gap:10px;align-items:flex-end;margin-bottom:30px}   /* v180: the same air as between the cards and the bubble */
.file-say .botdisc{width:36px;height:36px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.file-say .botdisc svg{width:25px;height:25px}
.file-msg{background:#fff;border-radius:var(--r-card);border-bottom-left-radius:4px;padding:12px 16px;font-size:13.5px;line-height:1.55}
.file-msg b{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:1px;display:block;color:var(--red);line-height:1;margin-bottom:3px}
.file-files{background:#fff;border-radius:var(--r-card);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.10)}
.file-files .file{border-radius:0;border:none;border-bottom:1px solid var(--border);margin:0;padding:13px 16px}
.file-files .file:last-child{border-bottom:none}
/* GRAB IT pinned to the right edge of its row, not hanging off the end of
   the filename (v180); a row with nothing to give wears a grey one. */
.file>div:not(.file-i){flex:1;min-width:0}
.file-go{margin-left:auto;flex:none}
.file-go.off{color:#B7B1A9;box-shadow:inset 0 0 0 2px #DAD6CF;cursor:default;pointer-events:none}


.file-next{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}


@media(max-width:880px){
  .filestage{margin-left:calc(50% - 50vw);padding-left:var(--g)}
  .file-tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.file-tiles{grid-template-columns:1fr}.tile{min-height:0}}

/* ---- THINKING: the beat while the WRITER runs --------------------------
   Was inline in index.html while the stylesheet was mid-sync between two
   machines. Folded in here 31 Aug; the <style> block is gone. */
/* the hidden attribute is a UA rule, and any author display: beats it —
   so the beat needs its own way to stay out of sight. */
.beat[hidden]{display:none}
/* v205: v197's flex:1 never worked — the beat sits in .wrap, which is a plain
   block, not in #sandwich's flex column, so it fell back to the 540px floor.
   Same rule the three rooms use (v180): the window less the 65px top bar.
   v197, superseded: it filled 62% of the screen and the page's own white showed under
   it — Michael: "Top half red. Bottom half white. Looks odd." #sandwich is a
   flex column, so the beat takes what's left under the engine bar instead. */
.beat{background:var(--red);width:100vw;margin-left:calc(50% - 50vw);
  min-height:calc(100vh - 65px);box-sizing:border-box;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:48px 20px}
.beat-bot{width:min(120px,30vw);height:auto;margin:0 0 26px;
  animation:beat-bob 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes beat-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-6px) rotate(1.5deg)}}
/* The line, at an aside's size rather than a billboard's — it's a remark
   the robot makes while it works, and at 56px a long one wrapped and the
   joke landed in two goes.

   The lines turn rather than fade: one face rotates away as the next turns
   in behind it, hinged on a horizontal axis. Both faces are absolute so
   they share the same box; min-height holds the line open. */
.beat-say{position:relative;color:#fff;text-align:center;width:100%;
  font-size:clamp(22px,3.4vw,32px);min-height:1.2em;perspective:800px}
.beat-say span{display:block;position:absolute;left:0;right:0;top:0;
  backface-visibility:hidden;transform-origin:50% 50% -.55em}
.beat-say .in{animation:beat-turn-in .52s cubic-bezier(.25,.9,.25,1) both}
.beat-say .out{animation:beat-turn-out .42s cubic-bezier(.5,0,.75,.4) both}
@keyframes beat-turn-in{from{transform:rotateX(-92deg);opacity:0}
  70%{opacity:1}to{transform:rotateX(0);opacity:1}}
@keyframes beat-turn-out{from{transform:rotateX(0);opacity:1}
  to{transform:rotateX(92deg);opacity:0}}

/* The beads — one per line. Not a meter: each one is an event landing, and
   the last is the robot finishing, which only the draft can light. */
.beat-beads{display:flex;gap:7px;margin-top:30px}
.beat-beads b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);
  transition:background .5s ease,transform .5s ease}
.beat-beads b.on{background:#fff;transform:scale(1.25)}

@media(prefers-reduced-motion:reduce){
  .beat-bot{animation:none}
  .beat-say .in,.beat-say .out{animation:none}
  .beat-say .out{opacity:0}
  .beat-beads b{transition:none}
}

/* SET UP — the fifth room, Hunch only — is drawn by setup.css. It borrows
   this file's furniture (the rail, FIX IT's grid, padlock and wrap button,
   the deets card, the chat) and adds nothing here. Two sites in parallel:
   a slip in the room's own file can only break the room. */

/* the client's side of the SET UP door: one line and one way to answer it */



/* ===========================================================================
   DROP IT IN — the picture modal (v083). The strip (the artefact in a
   shadow root, the mask) styles itself inside the shadow; this is the card
   around it: the words lane, the tools, the button. Lifted from mock v5.
   =========================================================================== */
/* .dropin, not .pic — .pic is the old pics page's thumbnail, still in this file */
.menu-card.dropin{max-width:664px;max-height:min(92vh,820px)}
.pic-strip{width:600px;max-width:100%;margin:0 auto}
#picErr:empty{display:none}
#picErr{margin:12px auto 0;max-width:600px}
.pic-orword{max-width:600px;margin:18px auto 0}
.pic-orword label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;color:var(--mid);margin-bottom:7px}
.pic-orword input{width:100%;background:#fff;border:1px solid var(--border);border-radius:var(--pill);padding:12px 20px;font-size:14px;font-family:var(--body);color:var(--ink);outline:none}
.pic-orword input:focus{border-color:var(--ink)}
.pic-orword input::placeholder{color:var(--mid)}
.pic-orword input + label,.pic-orword div + label{margin-top:16px}
.pic-orword.hasimg #picLinkRow{display:none}
.pic-orword.hasimg label + label{margin-top:0}
.pic-orword input:disabled{opacity:.55}
.pic-orword.hidden{display:none}
.pic-tools{display:none;margin-top:18px}
.pic-tools.on{display:block}
.pic-note{text-align:center;font-size:12px;color:var(--mid);margin-bottom:12px}
.pic-zoomrow{display:flex;align-items:center;gap:14px;max-width:320px;margin:0 auto}
.pic-zoomrow svg{width:18px;height:18px;color:var(--mid);flex:none}
.pic-zoomrow svg.big{width:24px;height:24px}
.pic-zoomrow input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border);outline:none}
.pic-zoomrow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--red);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pic-zoomrow input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--red);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pic-actions{display:flex;align-items:center;justify-content:center;margin-top:20px}
/* v181: USE IT is .b-main, the same pill DONE wears; this only says what
   disabled looks like. (Its padding and letterspacing rode on .menu-cta,
   which went in v164, so the button rendered as bare text.) */
.pic-use:disabled{opacity:.45;cursor:default}
.pic-use:disabled:hover{background:var(--red)}
@media(max-width:700px){.pic-strip{width:100%}}

/* THE TURN (v104, finished v117). The bubble goes all the way round and
   lands where it started, arriving on the other word. 900ms at ease-in-out:
   it was .5s, which is a flicker rather than a turn, and the word swap and
   the second face never existed — STR.door.ready was written in v104 and
   nothing ever read it. */
.menu-body.signin .bub.turn{animation:bubSpin .9s ease-in-out both}
/* NOT .spin. That class is the little loading donut at the top of this file
   — 15px square, round, bordered — and it was landing on the bubble every
   time the door opened, squashing the box to 15px tall. The turn ran; there
   was nothing left of the bubble to see it on. */
@keyframes bubSpin{from{transform:perspective(700px) rotateY(0)}to{transform:perspective(700px) rotateY(360deg)}}

/* ---------------- UHOH ----------------
   The note that something's broken. Lives in a menu card like FAQS, so it
   borrows the card, the head and the shade; only the body is its own. */
/* the headline is the card's title now, so the body opens on the line that
   does the asking */
.uhoh-sub{font-size:14px;line-height:1.5;color:var(--mid);margin:0 0 14px}
#uhohNote{width:100%;box-sizing:border-box;border:1.5px solid var(--white-mid);
          border-radius:var(--r-card);padding:12px 14px;font-family:inherit;
          font-size:14px;line-height:1.45;color:var(--ink);resize:vertical;
          background:#fff}
#uhohNote:focus{outline:none;border-color:var(--ink)}




/* ---------------- THE TESTING STRIP (v124) ----------------
   Hunch only, and only when a fixture is loaded. It OVERLAYS and never
   pushes: a bar that sits in the layout changes the height of everything
   under it, and then 46vh doesn't mean on the workbench what it means in
   the app. Ink, never red — it has to be impossible to screenshot this and
   think you're looking at the product. Collapsed to a tab until you want
   it; T toggles, arrows jump. */
.test-strip{position:fixed;left:0;right:0;bottom:0;z-index:200;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start}
.test-tab{pointer-events:auto;margin-left:14px;border:none;cursor:pointer;
  font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:11px;letter-spacing:1.6px;
  color:#fff;background:var(--ink);border-radius:9px 9px 0 0;padding:6px 13px 5px;
  box-shadow:0 -4px 14px rgba(0,0,0,.25)}
.test-tab:hover{background:#2E2823}
.test-body{pointer-events:auto;display:none;width:100%;background:var(--ink);color:#fff;
  padding:13px 16px 15px;box-shadow:0 -10px 30px rgba(0,0,0,.3);
  max-height:44vh;overflow-y:auto}
.test-strip.open .test-body{display:block}
.test-now{font-size:13.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.test-now b{font-family:'Oswald',var(--display),sans-serif;font-weight:500;letter-spacing:1.3px;
  text-transform:uppercase;font-size:12px;color:#fff}
.test-stale{font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:1.2px;color:var(--ink);background:#E8C54A;border-radius:var(--pill);padding:2px 8px 1px}
.test-why{font-size:12px;color:#E8C54A;margin-top:3px}
.test-jumps{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.test-jump{cursor:pointer;border:1px solid #4A423B;background:none;color:#D7D0C8;border-radius:var(--pill);
  font-family:inherit;font-size:12.5px;padding:6px 12px;transition:background .12s,color .12s}
.test-jump:hover{border-color:#877C72;color:#fff}
.test-jump.on{background:#fff;border-color:#fff;color:var(--ink)}
.test-jump i{font-style:normal;color:#E8C54A;margin-left:5px}
.test-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;
  border-top:1px solid #3A332E;padding-top:11px}
.test-tool{cursor:pointer;border:1px solid #4A423B;background:none;color:#fff;border-radius:var(--pill);
  font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:11px;letter-spacing:1.4px;
  padding:6px 13px 5px;text-decoration:none}
.test-tool:hover{border-color:#877C72}
.test-keys{font-size:11px;color:#6F6760;letter-spacing:.6px;margin-left:auto}
.test-said{font-size:12.5px;color:#9A938B;margin-top:9px;min-height:17px}
.test-strip button:focus-visible,.test-strip a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:520px){.test-keys{display:none}}

/* SEARCH sat ~10px higher than DOCS and WORDS: its ask is a 30px arrow row,
   not a 22px line, and its glyph had no gap above it. 16 above and 8
   between put the magnifier and the field where the other two doors put
   theirs, so the plate doesn't bounce as you click across (v167). */
#searchAsk{gap:8px}
#searchAsk .dump-baby{margin-top:16px}

/* THE WORD MODAL and GOING BACKWARDS (v172). The demo card's furniture,
   with the door's word field on paper: it gets a keyline, since white on
   white is nothing. Two buttons on GOING BACKWARDS sit together, quiet one
   first. */
.word-signin{margin:6px 0 0;max-width:none}
.word-signin .door-row input{box-shadow:inset 0 0 0 1px var(--border);text-align:left}
.demo-cta{gap:14px;align-items:center}
/* the poke line under the beads (v172): Michael's voice, small, white */
.beat-note{margin-top:22px;color:#fff;font-size:14.5px;line-height:1.5;text-align:center;min-height:1.5em;max-width:46ch}
/* MANUAL MODE (v172): the two questions in the chat, in a paper box, and
   LOCK THE STORY under them. The composer is shut while they're up. */
.chat-row.manual{display:block;margin:6px 0 4px 44px}
.manual-box{background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px 14px;display:flex;flex-direction:column;gap:8px}
.manual-q{font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink);margin-top:4px}
.manual-box textarea{width:100%;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;color:var(--ink);resize:vertical;outline:none;background:#fff}
.manual-box textarea:focus{border-color:var(--ink)}
.manual-go{align-self:flex-end;margin-top:6px}

/* ---------------- the story card (v175) ----------------
   A story is its name and its lines. Grey plus is nothing. */
.deets-card.story{padding:14px 0 12px}
.story-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;cursor:text}
.story-name{font-weight:600;font-size:16px;color:var(--ink)}
.story-name.empty{color:var(--mid);font-weight:400;font-style:italic}
.story-namein{font:inherit;font-weight:600;font-size:16px;border:none;border-bottom:1.5px solid var(--ink);outline:none;padding:2px 0;width:100%}
.story-head .deets-rm{margin-left:auto;float:none}
.story-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;font-size:14px;margin:6px 0;cursor:default}
.story-lab{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);min-width:52px}
.story-val{color:var(--ink);cursor:pointer}
.story-val.tbc{color:var(--mid)}
.story-link{color:var(--red);text-decoration:underline;text-underline-offset:3px;cursor:pointer;word-break:break-all}
.story-plus{width:22px;height:22px;border:1.5px solid #c8c8c8;border-radius:50%;background:#fff;color:#b0b0b0;font-size:15px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.story-plus:hover{border-color:var(--red);color:var(--red)}
.story-line .deets-row.story-open{flex-basis:100%;margin-left:62px}
.story-line .deets-row.story-open input{text-align:left}   /* v188: a box in a story line reads left, like the line */
.story-terms{flex-basis:100%;margin-left:62px;display:flex;flex-direction:column;gap:6px}
.story-terms .deets-pills{margin-top:2px}
.story-clause{font-size:13px;color:var(--ink);line-height:1.45;margin-top:4px}
.deets-tbcbtn{font:inherit;font-size:12px;border:1px solid var(--border);background:#fff;border-radius:var(--pill);padding:3px 10px;margin-left:8px;cursor:pointer;color:var(--mid)}
.deets-tbcbtn:hover{border-color:var(--red);color:var(--red)}
.deets-sec.locked .story-plus{visibility:hidden}

/* ---------------- the mock-up (v178) ----------------
   The layout greyed by the engine, in an iframe scaled to its holder. */
.mock-hold{position:relative;overflow:hidden;background:#F3F2F0;border-radius:var(--r-card);box-shadow:0 10px 32px rgba(0,0,0,.18)}
.mock-frame{display:block;position:absolute;top:0;left:0}
.beat-art{width:min(300px,80vw);margin:22px auto 0}


/* ---------------- THE OPEN SIGN (v199) ----------------
   Hangs off the big word — ROBOT SANDWICH out, HELLO NAME in — tucked into
   the bottom of the letters and resting a few degrees left. Sized in em, so
   it follows the word it hangs from (fitEcho sets the slot's size on the
   way in). Swings once when the door draws, again when you touch it, and
   nudges once after ten quiet seconds. Never a loop. Reduced motion gets it
   standing still: the rule at the top kills every animation. */
.open-sign-slot{position:absolute;right:4%;top:.75em;width:1.34em;z-index:2;line-height:0}
.echowrap .open-sign-slot{font-size:62px}
.echo:not(.on) ~ .open-sign-slot{visibility:hidden}
.open-sign{--t:-4deg;display:block;width:100%;height:auto;overflow:visible;
  transform-origin:50% 0;transform:rotate(var(--t));cursor:pointer}
.open-sign.swing{animation:signSwing 2.6s cubic-bezier(.3,.1,.3,1) both}
.open-sign.nudge{animation:signNudge 1.7s cubic-bezier(.3,.1,.3,1) both}
@keyframes signSwing{
  0%{transform:rotate(calc(var(--t) + 16deg))}18%{transform:rotate(calc(var(--t) - 10deg))}
  36%{transform:rotate(calc(var(--t) + 6.5deg))}54%{transform:rotate(calc(var(--t) - 3.5deg))}
  72%{transform:rotate(calc(var(--t) + 1.8deg))}88%{transform:rotate(calc(var(--t) - .6deg))}
  100%{transform:rotate(var(--t))}}
@keyframes signNudge{
  0%{transform:rotate(var(--t))}16%{transform:rotate(calc(var(--t) + 4.5deg))}
  38%{transform:rotate(calc(var(--t) - 3deg))}60%{transform:rotate(calc(var(--t) + 1.6deg))}
  82%{transform:rotate(calc(var(--t) - .6deg))}100%{transform:rotate(var(--t))}}

/* v214: THE CARD in SET UP — the door's tile, under its brand, with a pencil */
.card-strip{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.card-strip[hidden]{display:none}
.card-strip-col{flex:0 1 360px;min-width:0}
.card-strip .door-brand{margin:0 0 6px}
.card-strip-tile{cursor:default}
.card-strip-tile:hover{transform:none}
.card-strip-pen{margin-top:20px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--red);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card-strip-pen svg{width:16px;height:16px}
.card-strip-done{margin-top:20px;border:0;border-radius:999px;background:#fff;color:var(--red);cursor:pointer;flex:none;
  font-family:var(--display),sans-serif;font-size:15px;letter-spacing:.08em;padding:8px 16px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card-strip-boxes{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.card-strip-boxes input{width:100%;box-sizing:border-box;border:1.5px solid #bbb;border-radius:8px;padding:6px 8px;
  font:inherit;color:var(--ink);background:#fff;outline:none}
.card-strip-boxes input:focus{border-color:var(--ink)}
.card-strip-name{font-family:'Oswald',var(--display),sans-serif !important;font-size:17px !important;font-weight:500;letter-spacing:2px}
.card-strip-line{font-size:13px !important}
#setupSay .line-t{white-space:pre-line}