/* CRAVE CREW — the Floor rework.
   Design authority: `docs/design-handoff-floor/`. `Crave OS Floor.dc.html` is
   the pixel spec and README.md is the written one; where the two disagreed the
   pixels won, which is what the handoff itself asks for.

   The language: a near-black ground (#090909) with a darker rail beside it,
   surfaces that are the SAME black lifted a few points, and rings drawn as
   `box-shadow: inset 0 0 0 1px` rather than borders so a state change never
   moves a pixel. Crave gold means one thing — a call is needed. Crave cyan
   means one thing — work is happening right now. Warm neutral is the
   operator's own register. Every seat names its engine. Numbers are tabular
   everywhere they can be compared, and no glyph in this app is an emoji.

   What survived from P10/P12: the token ARCHITECTURE (same variable names, so
   every component rule below still resolves), the gutter law, the gold law,
   the closed radius vocabulary, and every behaviour. What changed is every
   value in the palette, the whole radius set, and the type scale. */

/* ---------------------------------------------------------------- tokens --
   The handoff's palette, verbatim. The names are P10's so the component rules
   below did not have to be rewritten to reach them; the VALUES are the
   handoff's own. */
:root{
  color-scheme:dark light;
  /* The shell, the rail beside it, and the surfaces above them. The handoff
     names six: #090909 shell, #070707/#060606 rail, then #0C-#0F for
     popovers, cards, the composer and stat cells. */
  --ground:#090909; --panel:#0D0D0D; --raised:#0F0F0F; --sunken:#0C0C0C;
  --rail-bg:#060606;      /* the crew rail and the top bar */
  --composer-bg:#0E0E0E;  /* the composer slab and a working-now card */
  /* Hairlines, weakest to strongest. These are OPAQUE in the handoff, not
     alpha: the design draws structure with flat near-blacks so that a ring
     inside a ring reads as two distinct steps rather than a smear. */
  --line:#151515; --line-soft:#141414;
  --ring:#1A1A1A;         /* a card's own ring */
  --ring-strong:#1F1F1F;  /* the composer, a ghost button */
  --ring-lift:#202020;    /* a popover, a lightbox panel */
  --ring-top:#232323;     /* an avatar's ring, a toast */
  /* Ink, primary to faintest. --dim and --dim2 keep their P10 ROLE (readable
     metadata) and take the handoff's two readable muted values; the three
     faint values below them are the design's micro-label register and are
     used only at the sizes the handoff sets them. */
  --text:#F5F1EA; --body:#DCD7CF; --dim:#8A8579; --dim2:#B4AFA6;
  --ink-2:#EFE7D8;        /* the operator's own words */
  --ink-4:#A9A49B;        /* a contribution card's conclusion line */
  --faint:#5C5C5C; --fainter:#4A4A4A; --faintest:#3F3F3F;
  --idle:#3A3A3A;         /* an idle seat's timer */
  /* Signal */
  --gold:#FFAA00;        /* fills: the decision slab, SEND, an approve */
  --gold-ink:#FFAA00;    /* gold as TEXT: a call, a flag, a price */
  --gold-hover:#FFC24D;
  --gold-dim:#8F7326;    /* a gold-dim micro-label */
  --gold-dim2:#8F8878;   /* gold-dim body text */
  --gold-on:#0D0D0D;     /* ink that sits on a gold fill */
  --on-gold:var(--gold-on);
  --gold-soft:rgba(255,170,0,.05); --gold-edge:rgba(255,170,0,.3);
  --gold-ring:rgba(255,170,0,.45); --gold-wash:rgba(255,170,0,.14);
  /* Crave Cyan, and it means ONE thing: work that is running right now. A
     working seat, a stream in flight, a live meter, a render in progress. It
     is never decoration and never a resting state. */
  --live:#00E6FF; --live-soft:rgba(0,230,255,.12); --live-edge:rgba(0,230,255,.28);
  --live-dim:#2F6B75;    /* the WORKING group's own label */
  /* Warm Neutral: the OPERATOR'S register. His own voice in a thread, and the
     actions that take him back to reading. Gold is reserved for decisions, so
     these must not borrow it. */
  --warm:#E9DCC1; --warm-ink:#E9DCC1; --warm-on:#0D0D0D;
  --warm-soft:rgba(233,220,193,.08); --warm-edge:rgba(233,220,193,.16);
  --ok:#6BE37A; --warn:#FFAA00; --bad:#FF4A1C;
  --user-bg:rgba(233,220,193,.08); --user-line:rgba(233,220,193,.16);
  --user-top:transparent;
  --prov-bg:rgba(107,227,122,.07); --prov-line:rgba(107,227,122,.22);
  --nav-h:52px;
  --nav-bg:rgba(9,9,9,.92);
  /* The radius vocabulary, and it is still CLOSED. The handoff names exactly
     eight and this file may not invent a ninth: 2px tags, 9px buttons and
     rows, 10px thumbs, 13px cards, 14px the decision slab and popovers, 16px
     the composer and the operator's bubble, 20px the lightbox, and the pill. */
  --r-micro:2px; --r:9px; --r-thumb:10px; --r-card:13px;
  --r-slab:14px; --r-lg:16px; --r-sheet:20px; --r-pill:999px;
  /* Seat identity, expressed as MIXES rather than colours, because a custom
     property declared at :root resolves its own var() against :root, where
     --seat does not exist yet. Only rules that set --seat on the element may
     reference it, so the theme carries the recipe and the rule carries the mix.
     The handoff draws an avatar as a flat near-black disc with a hairline ring
     and the seat's colour as the INITIALS, so the mixes go to nearly nothing. */
  --avatar-mix:0%; --avatar-base:#0F0F0F; --avatar-edge:0%;
  --avatar-ink-mix:100%; --avatar-ink-base:#000;
  --seat-ink-mix:100%; --seat-ink-base:#000;
  --author-ink:#8A8579;
  /* The scroll inset. The composer, the chip strip and the quote rail are FLEX
     SIBLINGS of the thread rather than fixed overlays, so the fix is a real
     bottom inset plus the phone's home indicator. */
  --thread-inset:24px;
  /* The artifact lightbox. Both tokens are declared on bare :root and
     re-stated in BOTH light paths, so neither theme borrows the other's. */
  --overlay:rgba(4,4,4,.88); --lb-ink:#8A8579;
  /* The one gutter law. Every element in the conversation column — the thread,
     its head, the seat strip, the decision banner, the chip strip, the quote
     rail and the composer — is inset by THIS and by nothing else, so the column
     has one left edge and one right edge at every width. The handoff sets the
     desk measure at 34px either side of an 820px column. */
  --rail:max(12px,calc((100% - 892px)/2));
  --col:820px;          /* the handoff's thread measure */
  --gut:152px;          /* the turn's left gutter label column, desktop */
  --side-w:262px;       /* the handoff's crew rail */
  --top-h:58px;         /* the handoff's app bar */
  /* Motion. Two easings and three durations, and the file may not invent a
     fourth of either. */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-snap:cubic-bezier(.6,-.05,.2,1.1);
  --t-flip:120ms; --t:200ms; --t-sheet:360ms;
  /* Poppins 300/400/500/600/700 for body, labels and tabular figures; Archivo
     Black, ALL CAPS only, for display. NO MONO FACE ANYWHERE — the mono stack
     is deliberately aliased to the same humanist family so a stray
     var(--mono) cannot reintroduce a terminal read. Archivo Black is now
     VENDORED (see the @font-face below), so the display role finally renders
     as the handoff draws it rather than falling through to Poppins 900. */
  --sans:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:"Archivo Black",Poppins,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--sans);
}
/* Self-hosted, latin subset, from the brand's own Poppins. font-src is 'self'
   in the CSP and nothing here reaches another host.
   Three body weights and one display weight, and the RANGES are declared so
   that every weight this stylesheet asks for lands on a file that exists:
   400 resolves to the 300 face, 600 to the 700 face, 800 to the 900 face.
   Nothing is synthesised and no fourth body weight is loaded. */
@font-face{font-family:Poppins;font-style:normal;font-weight:300 400;font-display:swap;
  src:url(/brand/fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(/brand/fonts/poppins-500.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/brand/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800 900;font-display:swap;
  src:url(/brand/fonts/poppins-900.woff2) format("woff2")}
/* Archivo Black, the handoff's display face, VENDORED as a latin-subset woff2
   (9.8 KB). It stands in for Druk Wide Bold and is ALL CAPS only. font-src is
   'self' and this file reaches no other host. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/brand/fonts/archivo-black.woff2) format("woff2")}
/* The one display role: all caps, tight, heavy. The handoff sets it at .01em
   rather than negative tracking, because Archivo Black is already tight. */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.05}
/* Mist: the light Console, RE-DERIVED for this system rather than inverted.
   The handoff pixel-specs the dark Console only, so Mist keeps every ROLE the
   dark theme assigns and re-values it for paper: warm stone rather than blue
   drafting paper, because the ground is now Crave black rather than obsidian
   and its light twin should be the same neutral family; opaque hairlines the
   same way the dark theme draws them; the gold FILL kept at brand gold, which
   reads correctly on paper, with dark ink on it; gold as TEXT darkened to
   clear 4.5:1; cyan darkened to a teal that still reads as LIVE and nothing
   else. Written twice on purpose, once for the system setting and once for the
   explicit toggle, because a media query and an attribute cannot share a head. */
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#F4F2ED; --panel:#FFFFFF; --raised:#FBFAF7; --sunken:#EDEAE3;
    --rail-bg:#EEEBE4; --composer-bg:#FFFFFF;
    --line:#E0DCD2; --line-soft:#E8E5DC;
    --ring:#DCD7CB; --ring-strong:#CFC9BA; --ring-lift:#C6BFAE; --ring-top:#BDB5A2;
    --text:#14110B; --body:#2E2A21; --dim:#6E6656; --dim2:#4A4437;
    --ink-2:#241F16; --ink-4:#5A5346;
    --faint:#7A7263; --fainter:#8A8273; --faintest:#9A9284;
    --idle:#A69E90;
    --gold:#FFAA00; --gold-ink:#8A5A00; --gold-hover:#B37400;
    --gold-dim:#8A5A00; --gold-dim2:#6E5A33;
    /* White on brand gold is 1.9:1. The FILL stays brand gold, which is the
       one thing Mist may not re-derive; the ink on it goes near-black. */
    --gold-on:#1C1205; --on-gold:#1c1205;
    --gold-soft:rgba(255,170,0,.12); --gold-edge:rgba(138,90,0,.42);
    --gold-ring:rgba(138,90,0,.55); --gold-wash:rgba(255,170,0,.22);
    --live:#0E6F7E; --live-soft:rgba(14,111,126,.10); --live-edge:rgba(14,111,126,.42);
    --live-dim:#0E6F7E;
    /* Warm Neutral on paper: the parchment fill would vanish, so the register
       keeps its ROLE and changes its value, the way Mist treats gold. */
    --warm:#6B5A3A; --warm-ink:#6B5A3A; --warm-on:#FFFFFF;
    --warm-soft:rgba(107,90,58,.09); --warm-edge:rgba(107,90,58,.30);
    --ok:#0F7A4A; --warn:#8A5A00; --bad:#B32D0C;
    --user-bg:rgba(107,90,58,.09); --user-line:rgba(107,90,58,.26);
    --user-top:transparent;
    --prov-bg:rgba(15,122,74,.07); --prov-line:rgba(15,122,74,.22);
    --nav-bg:rgba(244,242,237,.92);
    --avatar-mix:12%; --avatar-base:#FFFFFF; --avatar-edge:0%;
    --avatar-ink-mix:72%; --avatar-ink-base:#14110B;
    --seat-ink-mix:72%; --seat-ink-base:#14110B;
    --author-ink:#4A4437;
    --overlay:rgba(32,28,20,.80); --lb-ink:#5A5346;
  }
}
:root[data-theme="light"]{
  --ground:#F4F2ED; --panel:#FFFFFF; --raised:#FBFAF7; --sunken:#EDEAE3;
  --rail-bg:#EEEBE4; --composer-bg:#FFFFFF;
  --line:#E0DCD2; --line-soft:#E8E5DC;
  --ring:#DCD7CB; --ring-strong:#CFC9BA; --ring-lift:#C6BFAE; --ring-top:#BDB5A2;
  --text:#14110B; --body:#2E2A21; --dim:#6E6656; --dim2:#4A4437;
  --ink-2:#241F16; --ink-4:#5A5346;
  --faint:#7A7263; --fainter:#8A8273; --faintest:#9A9284;
  --idle:#A69E90;
  --gold:#FFAA00; --gold-ink:#8A5A00; --gold-hover:#B37400;
  --gold-dim:#8A5A00; --gold-dim2:#6E5A33;
  --gold-on:#1C1205; --on-gold:#1c1205;
  --gold-soft:rgba(255,170,0,.12); --gold-edge:rgba(138,90,0,.42);
  --gold-ring:rgba(138,90,0,.55); --gold-wash:rgba(255,170,0,.22);
  --live:#0E6F7E; --live-soft:rgba(14,111,126,.10); --live-edge:rgba(14,111,126,.42);
  --live-dim:#0E6F7E;
  --warm:#6B5A3A; --warm-ink:#6B5A3A; --warm-on:#FFFFFF;
  --warm-soft:rgba(107,90,58,.09); --warm-edge:rgba(107,90,58,.30);
  --ok:#0F7A4A; --warn:#8A5A00; --bad:#B32D0C;
  --user-bg:rgba(107,90,58,.09); --user-line:rgba(107,90,58,.26);
  --user-top:transparent;
  --prov-bg:rgba(15,122,74,.07); --prov-line:rgba(15,122,74,.22);
  --nav-bg:rgba(244,242,237,.92);
  --avatar-mix:12%; --avatar-base:#FFFFFF; --avatar-edge:0%;
  --avatar-ink-mix:72%; --avatar-ink-base:#14110B;
  --seat-ink-mix:72%; --seat-ink-base:#14110B;
  --author-ink:#4A4437;
  --overlay:rgba(32,28,20,.80); --lb-ink:#5A5346;
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ------------------------------------------------------------- animations --
   The handoff's six, verbatim, plus the two easings above. Nothing in this
   file may invent a seventh. */
@keyframes cvring{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@keyframes cvpulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes cvbar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes cvin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cvfade{from{opacity:0}to{opacity:1}}
@keyframes cvblink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ------------------------------------------------------------------ base -- */
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;background:var(--ground);color:var(--body);
  font:14px/1.55 var(--sans);
  font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
button,input,textarea,select{font:inherit;font-variant-numeric:tabular-nums}
button{cursor:pointer;border:0}
button:disabled{opacity:.4;cursor:wait}
::selection{background:rgba(255,170,0,.28)}
:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.hidden{display:none!important}
h1,h2,h3,p{margin-top:0}
/* The handoff's own scrollbar: a thin dark track and a lifted thumb, so a
   scrolling column does not paint a bright system bar through the shell. */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--rail-bg)}
::-webkit-scrollbar-thumb{background:#1C1C1C;border-radius:var(--r)}
::-webkit-scrollbar-thumb:hover{background:#2A2A2A}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:#CFC9BA}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb{background:#CFC9BA}}

/* Every piece of metadata in this app is one type role: uppercase, tracked
   wide, small. The handoff sets this register at 8.5-10px with .12-.26em
   tracking; this declaration is the floor of it and the components below tune
   the exact size and tracking the handoff gives each one. */
.lbl,.roster-section,.tele,.g-who,.g-time,.act,.mdl,.st,.tab-count,.filter,
.side-status,.strip-role,.strip-state,.gallery-head,.opt-title,.artifact-tag,
.plan-state,.plan-eng,.decision-cause,.head-spend,.room-when,.file-tag,
.seat-eng,.est,.kbd,.log-eng{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.num,.money,.tele,.head-spend,.est,.g-time{font-variant-numeric:tabular-nums}
.num{color:var(--gold-ink);font-weight:600;font-variant-numeric:tabular-nums}

/* The mark. Gold half is the /CREW. The handoff draws its wordmark in Archivo
   Black at 13px with the second half in gold; the TREATMENT is adopted and the
   NAME is not — this app is Crave Crew, and the brand's own product name is
   not a design decision the handoff gets to make. */
.wordmark{font-family:var(--display);font-weight:400;font-size:13px;
  letter-spacing:.01em;color:#F2EDE6;text-transform:uppercase}
.wordmark b{color:var(--gold-ink);font-weight:400}
:root[data-theme="light"] .wordmark{color:var(--text)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .wordmark{color:var(--text)}}
/* Brand assets are SACRED: scaled, never recoloured, never redrawn. The one
   documented derivative is a weight change on Mist, where the brand gold on
   drafting paper drops to ~1.9:1 and the mark disappears. */
.mark-icon{width:auto;height:20px;display:block}
.brand-logo{width:132px;height:auto;display:block;margin:0 auto 18px}
:root[data-theme="light"] .mark-icon,:root[data-theme="light"] .brand-logo{
  filter:brightness(0.82) saturate(1.3) contrast(1.04)
}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .mark-icon,
  :root:not([data-theme="dark"]) .brand-logo{filter:brightness(0.82) saturate(1.3) contrast(1.04)}}
.brand-lockup{display:inline-flex;align-items:center;gap:9px}

/* ----------------------------------------------------------------- login -- */
.login{display:grid;place-items:center;min-height:100dvh;padding:24px 20px calc(24px + env(safe-area-inset-bottom));padding-top:calc(24px + env(safe-area-inset-top))}
.login section{width:100%;max-width:340px;background:var(--panel);border:0;
  box-shadow:inset 0 0 0 1px var(--ring),0 24px 60px rgba(0,0,0,.8);
  border-radius:var(--r-lg);padding:28px 24px}
:root[data-theme="light"] .login section{box-shadow:inset 0 0 0 1px var(--ring),0 20px 44px rgba(32,28,20,.10)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .login section{
  box-shadow:inset 0 0 0 1px var(--ring),0 20px 44px rgba(32,28,20,.10)}}
.login h1{font-size:19px;letter-spacing:.01em;text-align:center;color:var(--gold-ink);margin:0 0 10px}
.login p{color:var(--faint);font-size:12px;font-weight:300;text-align:center}
.login label{display:block;margin:22px 0 4px;font-size:8.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fainter)}
.login input{width:100%;margin-top:8px;padding:12px 14px;min-height:46px;background:var(--sunken);
  border:0;box-shadow:inset 0 0 0 1px var(--ring-strong);border-radius:var(--r-thumb);color:var(--text)}
.login input{font-family:inherit}
.login input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--gold-edge)}
.login input::placeholder{color:var(--faintest)}
.login .hint{margin:10px 0 0;font-size:11px;font-weight:300;color:var(--faint)}
#login-btn{width:100%;margin-top:20px;padding:0 16px;min-height:46px;background:var(--gold);
  color:var(--on-gold);border-radius:var(--r-thumb);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;transition:background var(--t-flip) var(--ease)}
#login-btn:hover{background:var(--gold-hover)}
.error{color:var(--bad);font-size:12px;min-height:16px;margin:10px 0 0}

/* ----------------------------------------------------------------- shell -- */
.shell{display:flex;flex-direction:column;min-height:100dvh;height:100dvh}
@media(min-width:981px){
  /* Two bands across the top, then the rail and the column beside it. */
  .shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);height:100dvh}
  .topbar,.workbar{grid-column:1/-1}
}

/* --------------------------------------------------------------- app bar -- */
/* 58px, #060606, one hairline under it. The mark, the views, the counters and
   the operator, in that order, exactly as the handoff draws them. */
.topbar{display:none}
@media(min-width:981px){
  .topbar{display:flex;align-items:center;gap:16px;height:var(--top-h);flex-shrink:0;
    padding:0 24px;background:var(--rail-bg);border-bottom:1px solid var(--line)}
}
.topbar .mark-icon{height:24px}
.tb-div{width:1px;height:16px;background:#1C1C1C;flex:none}
:root[data-theme="light"] .tb-div{background:var(--ring)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .tb-div{background:var(--ring)}}
.tb-nav{display:flex;align-items:center;gap:20px}
.tb-nav button{background:transparent;padding:0;min-height:24px;color:var(--faint);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:color var(--t-flip) var(--ease)}
.tb-nav button:hover{color:var(--dim)}
.tb-nav button.active{color:#F2EDE6}
:root[data-theme="light"] .tb-nav button.active{color:var(--text)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .tb-nav button.active{color:var(--text)}}
.tb-gap{flex:1}
.tb-counts{display:flex;align-items:center;gap:18px}
.tc{display:flex;flex-direction:column;gap:2px}
.tc b{color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.tc i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums}
/* IN FLIGHT is money on work that is RUNNING, so it is the one counter that is
   cyan. TODAY is settled, so it is not. */
.tc i.tc-live-ink{color:var(--live)}
.tb-me{width:27px;height:27px;min-height:27px;padding:0;border-radius:50%;flex:none;
  background:var(--warm);color:var(--warm-on);font-size:9.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}

/* ------------------------------------------------ working-now, one line -- */
/* P70. Every seat running RIGHT NOW on ONE line: the dot, the words, then
   `name · stage · elapsed` per seat. The band is HIDDEN when nothing is running
   rather than showing an empty row: an idle company should not paint a live
   band. The per-seat cards this band used to stack, and the second copy of the
   same list down on the Floor, are both gone. */
.workbar{display:none}
@media(min-width:981px){
  .workbar:not(.hidden){display:flex;align-items:center;gap:10px;flex-shrink:0;
    padding:7px 24px;border-bottom:1px solid var(--line);overflow:hidden;
    white-space:nowrap;
    background:linear-gradient(to bottom,#0B0B0B,var(--ground))}
}
:root[data-theme="light"] .workbar:not(.hidden){background:linear-gradient(to bottom,var(--raised),var(--ground))}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .workbar:not(.hidden){
  background:linear-gradient(to bottom,var(--raised),var(--ground))}}
.wb-live{display:flex;align-items:center;gap:7px;color:var(--live);flex:none;
  font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
.wb-dot{width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 10px rgba(0,230,255,.85);flex:none}
.wb-seats{min-width:0;display:flex;align-items:baseline;overflow:hidden}
.wb-seat{display:flex;align-items:baseline;gap:5px;min-width:0;flex:none;
  padding:0;background:none;border:0;text-align:left;color:var(--dim)}
/* One hairline between seats: the middots inside a reading and the break
   between two readings must not be the same mark. */
.wb-seat+.wb-seat{margin-left:11px;padding-left:11px;border-left:1px solid var(--line)}
.wb-seat:hover .wb-name{color:color-mix(in srgb,var(--seat,var(--live)) var(--seat-ink-mix),var(--seat-ink-base))}
.wb-name{font-size:12px;font-weight:600;color:var(--text);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-sep{color:var(--faint);font-size:11px;flex:none}
.wb-note{font-size:11px;font-weight:300;color:#6E6E6E;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
:root[data-theme="light"] .wb-note{color:var(--dim)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .wb-note{color:var(--dim)}}
.wb-elapsed{font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--seat,var(--live)) var(--seat-ink-mix),var(--seat-ink-base));flex:none}

/* ------------------------------------------------------------- side rail -- */
.side{
  display:flex;flex-direction:column;min-height:0;flex:1;
  background:var(--rail-bg);border-right:1px solid var(--line-soft);
  padding-top:env(safe-area-inset-top);
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px 12px}
/* At desk width the app bar carries the mark, so the rail's own head is the
   handoff's THE CREW. Below it there is no app bar, so the lockup comes back. */
.side-head{display:none;font-size:14px;color:#F2EDE6}
:root[data-theme="light"] .side-head{color:var(--text)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .side-head{color:var(--text)}}
@media(min-width:981px){
  .brand .brand-lockup{display:none}
  .side-head{display:block}
  /* The app bar carries CREW / ROOMS / RUNS / LEDGER, so the rail's own tab row
     is a second copy of the same control. The handoff's rail has one list and
     one search and nothing else, so at desk width the duplicate goes. */
  .side .tabs{display:none}
}
.find{position:relative;margin:0 14px 12px}
.find input{
  width:100%;min-height:38px;padding:0 44px 0 32px;background:var(--panel);
  border:0;box-shadow:inset 0 0 0 1px #191919;border-radius:var(--r-thumb);
  color:#D6D2CA;font-size:12.5px;font-weight:300;
}
:root[data-theme="light"] .find input{box-shadow:inset 0 0 0 1px var(--ring);color:var(--body)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .find input{
  box-shadow:inset 0 0 0 1px var(--ring);color:var(--body)}}
.find input::placeholder{color:#4A4A4A}
:root[data-theme="light"] .find input::placeholder{color:var(--faintest)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .find input::placeholder{color:var(--faintest)}}
.find:before{content:"";position:absolute;left:13px;top:50%;width:9px;height:9px;margin-top:-7px;
  border:1px solid var(--faintest);border-radius:50%}
.find:after{content:"";position:absolute;left:20px;top:50%;width:5px;height:1px;margin-top:2px;
  background:var(--faintest);transform:rotate(45deg)}
.kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#333;
  font-size:9.5px;font-weight:600;letter-spacing:.04em}
:root[data-theme="light"] .kbd{color:var(--faintest)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .kbd{color:var(--faintest)}}
@media(pointer:coarse),(max-width:720px){.find input{min-height:48px}}
.tabs{display:flex;gap:6px;padding:0 14px 10px}
.tabs button{
  min-height:30px;padding:0 11px;border-radius:var(--r);background:transparent;color:var(--faint);
  font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:color var(--t-flip) var(--ease),box-shadow var(--t-flip) var(--ease);
}
.tabs button:hover{color:var(--dim)}
.tabs button.active{color:var(--text);box-shadow:inset 0 0 0 1px var(--ring-strong);background:var(--panel)}
.tab-count{margin-left:6px;color:var(--gold-ink);font-size:9px}
.filters{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap}
.filter{
  min-height:28px;padding:0 10px;border-radius:var(--r);background:transparent;
  border:0;box-shadow:inset 0 0 0 1px var(--ring-strong);color:var(--faint);
  font-size:8.5px;letter-spacing:.18em;
}
.filter.on{box-shadow:inset 0 0 0 1px var(--ring-lift);background:var(--panel);color:var(--text)}
.filter.f-needs{box-shadow:inset 0 0 0 1px var(--gold-edge);color:var(--gold-ink)}
.filter.f-needs.on{background:var(--gold);color:var(--on-gold);box-shadow:none}
.filter.f-working{box-shadow:inset 0 0 0 1px var(--live-edge);color:var(--live)}
.filter.f-working.on{background:var(--live);color:#062B31;box-shadow:none}
.filter b{font-weight:700;margin-left:5px}

.panel{flex:1;min-height:0;overflow-y:auto;padding:0 12px 14px}
.panel#rooms,.panel#runs{padding:16px 12px 24px}
.panel-note{color:var(--faint);font-size:11px;line-height:1.5;margin:2px 0 12px;font-weight:300}

/* The group heads. One micro-label a group, in the group's own tint, and no
   rule: the handoff separates groups with space rather than a line. */
.roster-section{
  display:flex;align-items:center;gap:8px;margin:14px 0 3px;padding:6px 10px 8px;
  color:var(--faintest);font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.roster-section:first-child{margin-top:2px}
.roster-section i{display:none}
.roster-section b{font-weight:700;color:inherit}
.roster-section b:before{content:"· "}
.roster-section.s-needs{color:var(--gold-dim)}
.roster-section.s-working{color:var(--live-dim)}
/* The roster keeps a measure of its own, which is what stops the list running
   the full width of a phone in landscape. */
.seat-list,.room-list,.room-toolbar,.roster-section{
  max-width:880px;margin-left:auto;margin-right:auto}
.seat-list{display:block}

/* A seat row: monogram, name, its engine, and how long it has been in this
   state. Every seat always names its engine — that is a product rule, not
   decoration — and the timer is the relay's own elapsed, never a guess. */
.seat{
  display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;
  width:100%;text-align:left;background:transparent;color:var(--text);
  padding:11px 13px;border:0;border-radius:var(--r-card);
  transition:background var(--t-flip) var(--ease);
}
.seat+.seat{margin-top:3px}
.seat:hover{background:var(--sunken)}
.seat.on{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;font-family:var(--sans);
  background:color-mix(in srgb,var(--seat) var(--avatar-mix),var(--avatar-base));
  border:0;box-shadow:0 0 0 1px #1C1C1C;
  color:color-mix(in srgb,var(--seat) var(--seat-ink-mix),var(--seat-ink-base));
}
:root[data-theme="light"] .avatar{box-shadow:0 0 0 1px var(--ring)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .avatar{box-shadow:0 0 0 1px var(--ring)}}
.seat-body{display:block;min-width:0}
.seat-top{display:flex;align-items:center;gap:8px;min-width:0}
.seat-name{font-size:13px;font-weight:500;letter-spacing:0;color:#C4BFB6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="light"] .seat-name{color:var(--body)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .seat-name{color:var(--body)}}
.seat.on .seat-name,.seat.needs .seat-name{color:var(--text);font-weight:600}
.seat-eng{color:var(--faintest);margin-top:2px;display:block;font-size:10px;
  font-weight:700;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat.needs .seat-eng{color:var(--gold-dim2)}
.role{display:block;margin-top:6px;color:var(--faint);font-size:11px;line-height:1.4;
  font-weight:300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.role.preview{color:var(--dim)}
.role.new{color:var(--dim2)}
/* The handoff's rail row carries name, engine and timer and nothing else. A
   seat that needs a CALL is the one exception: the reason is why the row is
   gold, so it stays on the row and is not one tap away. */
.seat.working .role{display:none}
.seat-meta{display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.when{color:var(--faint);font-size:11px}
.mdl,.st{display:none}          /* the engine now rides the row's own label line */
/* An unread line is a quiet dot. Gold is a CALL and may not be spent here. */
.unread{width:5px;height:5px;border-radius:50%;background:var(--faintest);display:inline-block;flex:none}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.seat .chips .chip{background:transparent;box-shadow:none;padding:0;min-height:0;
  font-size:9px;letter-spacing:.12em}

/* NEEDS YOU: a gold monogram, the reason in words, and the row itself lifted. */
.seat.needs,.seat.working{align-items:center}
.seat.needs{background:rgba(255,170,0,.03)}
.seat.needs .avatar{background:rgba(255,170,0,.15);box-shadow:0 0 0 1px var(--gold-ring);
  color:var(--gold-ink)}
.seat.lead{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.seat.working .dot{background:var(--live)}
.seat.needs .dot{background:var(--gold)}
.seat-when{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--idle);
  font-size:10px;font-variant-numeric:tabular-nums;flex:none}
.seat.working .seat-when{color:color-mix(in srgb,var(--seat,var(--live)) var(--seat-ink-mix),var(--seat-ink-base))}
.seat.needs .seat-when{color:var(--gold-dim2)}
/* A working seat's monogram carries the pulsing ring, drawn BEHIND it so the
   row never moves when the state flips. */
.seat.working .seat-av{position:relative;display:grid;place-items:center;width:32px;height:32px}
.seat.working .seat-av:before{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 1px var(--seat,var(--live))}
@media(prefers-reduced-motion:no-preference){
  .seat.working .seat-av:before{animation:cvring 2.4s ease-out infinite}
}
/* A live seat carries a cyan progress rule under its step line. */
.prog{display:block;position:relative;height:2px;margin-top:9px;background:var(--ring);
  border-radius:var(--r-micro);overflow:hidden}
.prog i{position:absolute;inset:0 auto 0 0;display:block;width:100%;background:var(--live);
  border-radius:var(--r-micro)}
.prog.indet i{width:38%;animation:slide 1.6s linear infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.typing{color:var(--live)}
.seat.working .prog{display:none}

.room-toolbar{padding:2px 0 12px}
#new-room{min-height:34px;padding:0 14px;background:transparent;border:0;
  box-shadow:inset 0 0 0 1px var(--ring-strong);
  border-radius:var(--r);color:var(--dim);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;transition:color var(--t-flip) var(--ease)}
#new-room:hover{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.room-list{display:block}
.room-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;
  color:var(--text);padding:11px 13px;border-radius:var(--r-card);
  transition:background var(--t-flip) var(--ease)}
.room-row+.room-row{margin-top:3px}
.room-row:hover{background:var(--sunken)}
.room-row.on{background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.room-body{display:block;min-width:0;flex:1}
/* A room's name and its last line each take one line and stop. A list that
   grows a row when a name is long has no rhythm to read down. */
.room-name{display:block;font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-row .preview{display:block;margin-top:3px;color:var(--faint);font-size:11px;font-weight:300;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-when{color:var(--idle);white-space:nowrap;flex:none;font-size:10px;
  font-variant-numeric:tabular-nums;letter-spacing:.1em}
.create{padding:12px 0}
.create h2{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.create label,.routine-create label{display:block;margin:12px 0 4px;font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.create input,.create select,.routine-create input,.routine-create select,.routine-create textarea{
  width:100%;margin-top:6px;padding:10px;min-height:44px;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r);color:var(--text);font-size:13px}
.routine-create textarea{min-height:76px}
.create fieldset{margin:14px 0 0;border:1px solid var(--line);border-radius:var(--r);padding:10px}
.create legend{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);padding:0 4px}
.pick{display:flex;align-items:center;gap:8px;min-height:38px;font-size:13px}
.create button,.routine-create button{margin-top:14px;min-height:44px;padding:0 16px;background:var(--gold);
  color:var(--on-gold);border-radius:var(--r);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.create button.quiet,.quiet{background:var(--sunken);border:1px solid var(--line);color:var(--dim2)}

.run-list{display:block}
.run-row{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.run-row.off{opacity:.55}
.run-head{display:flex;align-items:center;gap:8px}
.run-head strong{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run-seat{color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.run-meta{margin-top:6px;color:var(--dim);font-size:11.5px}
.run-row .quiet{min-height:34px;padding:0 10px;border-radius:var(--r);font-size:10px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase}

.side-foot{
  display:flex;align-items:center;gap:9px;padding:13px 22px;
  padding-bottom:calc(13px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
}
.side-status{flex:1;color:var(--faint);display:flex;align-items:center;gap:9px;min-width:0;
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-status:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ok);flex:none}
.side-status.warn:before{background:var(--gold)}
.side-admin{min-height:30px;padding:0 8px;border-radius:var(--r);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;background:transparent;border:0;color:var(--faint)}
.side-admin:hover,.side-admin.active{color:var(--gold-ink)}
#logout-btn{min-height:38px;padding:0 14px;border:0;box-shadow:inset 0 0 0 1px var(--ring-strong);
  border-radius:var(--r);text-transform:uppercase;
  font-size:10px;font-weight:700;letter-spacing:.12em;background:transparent;color:var(--dim)}

/* ------------------------------------------------------------- workspace -- */
.workspace{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--ground)}
.workspace>header{
  display:none;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 20px 12px;padding-top:calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
body.in-admin .workspace>header{display:flex}
.workspace>header h1{font-size:15px;font-weight:700;letter-spacing:.06em;margin:0}
.workspace>header p{margin:5px 0 0;color:var(--dim);font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase}
.secure{color:var(--ok);display:inline-flex;align-items:center;gap:7px;font-size:10px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.secure:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 4px var(--ok)}

.view{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.view#admin{padding:18px 20px calc(24px + var(--nav-h));display:block}
/* Admin takes the same measure as the conversation column. A settings pane
   stretched across a 1440px monitor is a 72px label with a metre of nothing
   after it, which is exactly what a measure exists to stop. */
@media(min-width:981px){.view#admin{padding:22px 34px 34px}
  .view#admin>*{max-width:var(--col);margin-left:auto;margin-right:auto}}
.admin-note{margin:0 0 12px}
.admin-note h2{font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fainter);margin:26px 0 8px}
.admin-note:first-child h2{margin-top:0}
.admin-note p{color:var(--faint);font-size:12.5px;font-weight:300;max-width:60ch}
.settings-block{border:0;box-shadow:inset 0 0 0 1px var(--ring);border-radius:var(--r-card);
  background:var(--panel);padding:4px 16px;margin:0 0 8px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0}
.settings-row strong{display:block;font-size:13px;font-weight:600;color:var(--text)}
.settings-note{display:block;margin-top:4px;color:var(--faint);font-size:12px;font-weight:300;max-width:52ch}
#theme-select,#push-toggle{min-height:38px;padding:0 12px;background:transparent;border:0;
  box-shadow:inset 0 0 0 1px var(--ring-strong);
  border-radius:var(--r);color:var(--text);font-size:12px}
.registry{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:12px}
.registry th{display:none}
.registry tr{display:block;border:0;box-shadow:inset 0 0 0 1px var(--ring);border-radius:var(--r-card);
  background:var(--panel);margin-bottom:6px;overflow:hidden}
.registry td{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:8px 14px;border-top:1px solid var(--line-soft);word-break:break-word;color:var(--dim2)}
.registry td:first-child{display:block;background:var(--sunken);border-top:0;font-weight:600;
  font-size:13px;color:var(--text);padding:11px 14px}
.registry td:before{content:attr(data-label);color:var(--fainter);font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.registry td:first-child:before{content:none}

/* ----------------------------------------------------------- thread head -- */
/* The handoff's 66px band: the seat, what it is, what it is running on, and
   the room's own controls as ghost buttons. */
.thread-view{padding:0}
.thread-head{padding:12px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-inline:var(--rail);padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);background:var(--ground);
}
/* The one gutter law, written out at the width the handoff measures it. The
   same value as --rail, on purpose: the conversation column has ONE left edge
   and ONE right edge, and every element in it takes them. */
@media(min-width:721px){
  .thread-head{padding:16px max(12px,calc((100% - 892px)/2));gap:14px}
}
.thread-head .avatar{width:34px;height:34px;font-size:11px;flex:none;
  background:var(--gold-wash);box-shadow:0 0 0 1px var(--gold-ring)}
.head-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.head-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The engine chip. Gold, ringed rather than filled, with its own dot: it is a
   STATEMENT of what is running, never a call, so it never takes a gold fill. */
.eng-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:0;
  box-shadow:inset 0 0 0 1px var(--gold-edge);border-radius:var(--r-pill);
  color:var(--gold-ink);background:transparent;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.eng-chip:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.head-engine{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.he-lbl{color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.head-div{width:1px;height:22px;background:#1C1C1C;flex:none}
:root[data-theme="light"] .head-div{background:var(--ring)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .head-div{background:var(--ring)}}
.composer .eng-chip{box-shadow:inset 0 0 0 1px var(--live-edge);color:var(--gold-ink);
  border-radius:var(--r);padding:7px 11px;font-size:10.5px;letter-spacing:.1em}
.composer .eng-chip{box-shadow:inset 0 0 0 1px rgba(255,170,0,.28)}
.head-id p:empty{display:none}
.thread-head h2{font-size:15.5px;font-weight:600;letter-spacing:.01em;text-transform:none;margin:0;
  color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The sub-line says what the seat IS, in one line. It ellipses rather than
   wrapping: a header that grows a row when a role is long is a header that
   moves the thread under it. */
.thread-head p{margin:0;color:var(--faint);font-size:11px;font-weight:300;
  letter-spacing:0;text-transform:none;display:block;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.head-meter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.head-spend{color:var(--faint);font-size:10px;letter-spacing:.12em}
/* Every control in this band is the handoff's ghost button: ringed, tracked,
   and gold only on hover, because reading is what this screen is for. */
.head-meter .quiet{min-height:34px;padding:8px 13px;border-radius:var(--r);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--ring-lift);color:var(--dim);
  transition:color var(--t-flip) var(--ease),box-shadow var(--t-flip) var(--ease)}
.head-meter .quiet:hover{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.head-meter .synth{background:transparent;box-shadow:inset 0 0 0 1px var(--ring-lift);color:var(--dim)}
.head-meter .synth.on{background:var(--gold);box-shadow:none;color:var(--on-gold)}
.synth-caption{color:var(--faint);font-size:11px;font-weight:300;text-align:right;white-space:nowrap}
#back-btn{background:transparent;border:0;box-shadow:none;border-radius:0;color:var(--dim);
  min-height:44px;min-width:34px;padding:0;font-size:13px}
#back-btn:hover{box-shadow:none;color:var(--text)}
#back-btn:before{content:"< "}
@media(min-width:981px){ #back-btn{display:none} }

/* ------------------------------------------------------------ seat strip -- */
/* P10 §Surface 1: all the room's seats across the top, each with a one-word
   live status under it. This IS the room's presence model. */
.seat-strip{
  display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;
  padding:14px var(--rail);border-bottom:1px solid var(--line);background:var(--ground);
}
.seat-strip::-webkit-scrollbar{display:none}
.strip-seat{display:flex;flex-direction:column;align-items:center;gap:7px;background:transparent;
  min-width:72px;padding:0;color:var(--text)}
.strip-seat .avatar{width:44px;height:44px;font-size:12px}
.strip-seat.on .avatar{border-width:1.5px;border-color:color-mix(in srgb,var(--seat) 85%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--seat) 30%,transparent)}
.strip-seat.live .avatar{border-color:var(--live);box-shadow:0 0 0 1px var(--live-soft)}
.strip-seat.out{opacity:.45}
.strip-role{color:var(--dim2);font-size:9px;letter-spacing:.09em;max-width:70px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.strip-seat.on .strip-role{color:var(--gold-ink)}
.strip-seat.live .strip-role{color:var(--live)}
.strip-state{color:var(--dim);font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:none;
  max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strip-seat.live .strip-state{color:var(--live)}
.strip-add .avatar{border:1px dashed var(--line);background:transparent;color:var(--dim);
  border-color:rgba(255,255,255,.18)}

/* ---------------------------------------------------------------- sheets -- */
.sheet{background:var(--panel);border-bottom:1px solid var(--line);padding:16px var(--rail);
  max-height:52vh;overflow-y:auto;box-shadow:inset 0 -1px 0 var(--ring)}
.sheet>*{width:100%;max-width:var(--col);margin-left:auto;margin-right:auto}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet-head h3{font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fainter);margin:0}
.sheet-head .quiet{min-height:34px;padding:8px 13px;border-radius:var(--r);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--ring-lift);color:var(--dim)}
.sheet-head .quiet:hover{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.sheet-note{margin:9px 0 14px;color:var(--faint);font-size:12px;font-weight:300;max-width:60ch}
.routine-list{display:block}
.routine-row{padding:10px 0;border-bottom:1px solid var(--line-soft)}
.routine-row.off{opacity:.55}
.routine-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.routine-row-head strong{font-size:13px;font-weight:600}
.routine-row .quiet{min-height:36px;padding:0 10px;border-radius:var(--r);font-size:10px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.routine-meta{margin-top:5px;color:var(--dim);font-size:11.5px}
.routine-brief{margin-top:6px;color:var(--body);font-size:12.5px}
/* P16 THE STUDIO PICKER. Phone first: the sheet is read at 390px and the grid
   is three across there, so a photograph is still identifiable at a glance and
   the rel path under it stays the thing that is actually cited. */
.studio-bar{padding:0 var(--rail) 8px;display:flex;justify-content:flex-start}
.studio-bar>*{width:100%;max-width:var(--col);margin:0 auto}
.studio-bar button{min-height:40px;padding:0 14px;border:0;border-radius:var(--r);
  background:transparent;box-shadow:inset 0 0 0 1px var(--ring-lift);color:var(--dim);
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.studio-bar button:hover{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.st-step{display:flex;align-items:center;gap:9px;margin:16px 0 9px;
  color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.st-step b{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:var(--r-pill);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ring);
  color:var(--dim);font-size:9px}
.st-presets{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
@media(min-width:721px){.st-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-preset{display:block;width:100%;text-align:left;padding:10px 12px;cursor:pointer;
  background:var(--sunken);border:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--ring);
  color:var(--body)}
.st-preset strong{display:block;font-size:12.5px;font-weight:600;color:var(--text)}
.st-preset .st-hint{display:block;margin-top:3px;color:var(--dim);font-size:11.5px;font-weight:300}
.st-preset .st-meta{display:block;margin-top:5px;color:var(--faint);font-size:9.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.st-preset.on{box-shadow:inset 0 0 0 1px var(--gold-edge);background:var(--gold-soft)}
.st-preset.on .st-meta{color:var(--gold-dim2)}
#studio-find{width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r);
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ring);color:var(--text);font-size:13px}
.st-anchor{margin:8px 0 10px;color:var(--faint);font-size:11.5px;font-weight:300}
/* The grid scrolls INSIDE the sheet, and it is deliberately shorter than the
   sheet is: a scroll area that fills its own scroll area cannot be got past. */
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
  max-height:26vh;overflow-y:auto}
@media(min-width:721px){.st-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:32vh}}
.st-cell{position:relative;padding:0;border:0;cursor:pointer;background:var(--sunken);
  border-radius:var(--r-thumb);box-shadow:inset 0 0 0 1px var(--ring);overflow:hidden;
  display:flex;flex-direction:column}
.st-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:var(--raised)}
.st-cell .st-rel{display:block;padding:5px 6px;color:var(--faint);font-size:9px;
  font-weight:400;line-height:1.25;word-break:break-all;text-align:left}
.st-cell.on{box-shadow:inset 0 0 0 2px var(--gold-ring)}
.st-cell.st-missing img{opacity:.25}
.st-n{position:absolute;top:5px;left:5px;z-index:1;padding:2px 6px;border-radius:var(--r-pill);
  background:var(--gold);color:var(--gold-on);font-size:8.5px;font-weight:700;
  letter-spacing:.1em;font-style:normal}
.st-label{display:block;margin:0 0 10px;color:var(--dim);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase}
.st-label input{display:block;width:100%;min-height:44px;margin-top:6px;padding:0 12px;border:0;
  border-radius:var(--r);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ring);
  color:var(--text);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none}
.st-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.st-row-lbl{color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;min-width:52px}
.st-engines,.st-shots{display:flex;gap:6px;flex-wrap:wrap}
.st-opt{min-height:38px;padding:0 12px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ring);color:var(--dim);
  font-size:11px;font-weight:600}
.st-opt.on{box-shadow:inset 0 0 0 1px var(--gold-edge);background:var(--gold-soft);color:var(--gold-ink)}
.st-total{margin:12px 0 10px;color:var(--dim2);font-size:12px;font-weight:300}
#studio-stage{width:100%;min-height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--gold);color:var(--gold-on);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
#studio-stage:disabled{background:var(--sunken);color:var(--faint);cursor:default;
  box-shadow:inset 0 0 0 1px var(--ring)}
@media(pointer:coarse),(max-width:720px){.studio-bar button,.st-opt{min-height:44px}}
/* THE STEP LEDGER — "how this answer got here". The handoff's row: an index, a
   verb, the detail, the engine that ran it, how long it took, and its mark.
   Every field is a row the relay already wrote to the dispatch ledger. */
.log-list{display:block}
.log-row{display:flex;align-items:baseline;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:300;color:var(--dim2)}
.log-n{color:var(--faintest);font-size:10px;font-weight:700;width:18px;flex:none;
  font-variant-numeric:tabular-nums}
.log-row b{font-weight:700;min-width:76px;flex:none;color:var(--dim);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.log-row .log-detail{flex:1;min-width:0}
.log-eng{color:var(--faintest);font-size:9px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;width:104px;text-align:right;flex:none}
.log-row .log-ms{color:var(--faint);font-size:11px;width:44px;text-align:right;flex:none;
  font-variant-numeric:tabular-nums}
.log-row .money{margin-left:0;color:var(--gold-ink);font-weight:600;font-size:11px;
  width:62px;text-align:right;flex:none}

/* ---------------------------------------------------------------- thread -- */
/* The handoff's column: 820px, centred, 22px between turns, 22px/34px inset. */
.thread{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:8px var(--rail) calc(var(--thread-inset) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.thread>*{width:100%;max-width:var(--col);margin-left:auto;margin-right:auto;flex:none}
@media(min-width:721px){.thread{padding-top:22px}}
/* A turn is a block, not a two-column grid: the handoff puts the attribution
   INLINE above the words, with the metering right-aligned on the same rule.
   The gutter element survives as that header row, so nothing in app.js had to
   learn a new shape. */
.msg{display:block;padding:0;border-top:0;margin:0 0 22px}
.msg:first-child{border-top:0}
.gutter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:static;
  margin-bottom:14px}
.g-who{color:var(--text);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none}
.msg.user .g-who{color:var(--faintest);font-size:8.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase}
.g-av{width:24px;height:24px;flex:none;font-size:9px;background:var(--gold-wash);
  box-shadow:0 0 0 1px var(--gold-ring);color:var(--gold-ink)}
.msg.from-seat .g-av{background:#121212;box-shadow:0 0 0 1px var(--ring-top);
  color:color-mix(in srgb,var(--seat,var(--gold)) var(--seat-ink-mix),var(--seat-ink-base))}
:root[data-theme="light"] .msg.from-seat .g-av{background:var(--raised);box-shadow:0 0 0 1px var(--ring)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .msg.from-seat .g-av{
  background:var(--raised);box-shadow:0 0 0 1px var(--ring)}}
/* The hairline that carries the attribution across to the metering. */
.g-rule{flex:1;min-width:12px;height:1px;background:#161616}
:root[data-theme="light"] .g-rule{background:var(--line-soft)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .g-rule{background:var(--line-soft)}}
.g-time{color:var(--faintest);font-weight:700;font-size:8.5px;letter-spacing:.16em}
/* The metering, as the handoff's stacks: a tracked micro-label with the figure
   under it, tabular, so LATENCY / COST / TOKENS line up down the thread. */
.tele{display:flex;align-items:flex-end;gap:18px;color:var(--dim);font-weight:500;
  letter-spacing:0;line-height:1.2;flex:none;text-transform:none;font-size:12.5px}
.tele-who{display:none}
.tele-metrics{display:contents}
.tm{display:flex;flex-direction:column;gap:2px}
.tm b{color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.tm i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--dim2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* The engine pill on a seat's own turn. Quiet by default; a seat's colour is
   what identifies it, and the pill states the engine because every seat always
   names its engine. */
.tele-eng{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--ring-lift);color:var(--dim);
  font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;flex:none}
.tele-st{font-weight:700;letter-spacing:.14em;font-size:8.5px;text-transform:uppercase;
  align-self:flex-end;padding-bottom:1px}
.tele-st.ok{color:var(--ok)} .tele-st.warn{color:var(--gold-ink)} .tele-st.bad{color:var(--bad)}
.tele-st.model{color:var(--dim)} .tele-st.exploratory{color:var(--gold-ink)}
.show-work{background:transparent;color:var(--dim);padding:2px 0;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;min-height:24px;flex:none;
  transition:color var(--t-flip) var(--ease)}
.show-work:hover{color:var(--gold-ink)}
.show-work:after{content:" v"}
.show-work.open:after{content:" ^"}
@media(pointer:coarse),(max-width:720px){.show-work{min-height:44px}}
.body{min-width:0;padding-left:0;border-left:0}
/* The handoff's summary paragraph: 16.5px at 1.75, weight 300. This is the
   read, and it is set to be read. */
.bubble{font-size:16.5px;line-height:1.75;color:var(--body);font-weight:300;letter-spacing:0}
.bubble p{margin:0 0 14px}
.bubble p:last-child{margin-bottom:0}
.bubble strong{color:var(--warm-ink);font-weight:500}
.bubble code{font-family:var(--mono);font-size:13px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--ring);border-radius:var(--r-micro);padding:1px 5px}
.bubble pre{font-family:var(--mono);font-size:12.5px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--ring);
  border-radius:var(--r);padding:13px 15px;overflow-x:auto;margin:0 0 12px}
/* The operator's own line: right-aligned, warm-neutral, and the one bubble in
   the app with an asymmetric corner, exactly as the handoff draws it. */
.msg.user{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.msg.user .gutter{margin-bottom:0;justify-content:flex-end}
.msg.user .g-rule{display:none}
.msg.user .body{max-width:68%}
.msg.user .bubble{color:var(--ink-2);font-size:15px;line-height:1.6;font-weight:300;letter-spacing:0}
.user .bubble{border-radius:var(--r-lg) var(--r-lg) 5px var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--user-line);background:var(--user-bg);border:0;padding:13px 17px}
/* The speaker line: the monogram, the name, the engine, then the metering. */
.author{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.msg.user .author{flex:none;justify-content:flex-end}
.msg.user .author .g-who{color:var(--faintest)}

/* The day divider. Two hairlines fading out of the ground and the day between
   them, in the faintest register in the app. */
.day-rule{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.day-rule i{flex:1;height:1px;font-style:normal;
  background:linear-gradient(to right,transparent,#161616)}
.day-rule i+i{background:linear-gradient(to left,transparent,#161616)}
:root[data-theme="light"] .day-rule i{background:linear-gradient(to right,transparent,var(--line))}
:root[data-theme="light"] .day-rule i+i{background:linear-gradient(to left,transparent,var(--line))}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .day-rule i{background:linear-gradient(to right,transparent,var(--line))}
  :root:not([data-theme="dark"]) .day-rule i+i{background:linear-gradient(to left,transparent,var(--line))}}
.day-rule span{color:var(--faintest);font-size:8.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;white-space:nowrap}

/* ------------------------------------------------- the contribution rail -- */
/* In a ROOM, a seat that is not chairing is CONTRIBUTING to the chair's answer,
   so its turn renders as the handoff's contribution card on a 2px rail with a
   dot in the seat's own colour. The chair's turn keeps the full-width read.
   The rail is real structure, not decoration: it is what makes a five-seat room
   legible as one answer rather than five. */
.msg.contrib{display:flex;gap:16px;padding-left:10px;margin-bottom:16px}
.msg.contrib .contrib-rail{width:2px;flex:none;background:#161616;position:relative}
:root[data-theme="light"] .msg.contrib .contrib-rail{background:var(--line)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .msg.contrib .contrib-rail{background:var(--line)}}
.msg.contrib .contrib-rail:after{content:"";position:absolute;top:16px;left:-3px;
  width:8px;height:8px;border-radius:50%;background:var(--seat,var(--live))}
/* The LAST contribution in a run terminates the line rather than trailing it
   off the bottom of the group. */
.msg.contrib.contrib-last .contrib-rail{background:transparent}
.msg.contrib.contrib-last .contrib-rail:before{content:"";position:absolute;top:0;left:0;
  width:2px;height:20px;background:#161616}
:root[data-theme="light"] .msg.contrib.contrib-last .contrib-rail:before{background:var(--line)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .msg.contrib.contrib-last .contrib-rail:before{
  background:var(--line)}}
.msg.contrib .contrib-card{flex:1;min-width:0;border-radius:var(--r-card);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--ring);padding:14px 16px}
.msg.contrib .gutter{margin-bottom:11px;gap:11px}
.msg.contrib .g-av{width:26px;height:26px}
.msg.contrib .g-who{font-size:13px}
/* A contribution names its engine in ITS OWN colour: on a rail of five seats
   that is what tells them apart at a glance. */
.msg.contrib .tele-eng{color:color-mix(in srgb,var(--seat,var(--live)) var(--seat-ink-mix),var(--seat-ink-base));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--seat,var(--live)) 28%,transparent);font-size:8px}
.msg.contrib .bubble{font-size:13.5px;line-height:1.65;color:var(--ink-4)}
.msg.contrib .tele{gap:12px;font-size:10.5px}
.msg.contrib .tm b{font-size:8px}
.msg.contrib .tm i{font-size:11px;color:var(--fainter)}
/* A flagged contribution is the handoff's Brand card: gold wash, gold ring, and
   the reason readable without opening anything. Gold here is a CALL. */
.msg.contrib.contrib-flag .contrib-card{background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--gold-edge);padding:15px 17px}
.msg.contrib.contrib-flag .contrib-rail:after{background:var(--gold)}
.msg.contrib.contrib-flag .g-av{background:var(--gold-wash);box-shadow:0 0 0 1px var(--gold-ring);
  color:var(--gold-ink)}
.msg.contrib.contrib-flag .g-who{color:var(--text)}
.msg.contrib.contrib-flag .tele-eng{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
.msg.contrib.contrib-flag .g-rule{background:rgba(255,170,0,.14)}
.msg.contrib.contrib-flag .bubble{color:var(--body);font-size:15px;line-height:1.7}
.md-h{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
.md-h1{color:var(--dim2)}
.md-list{margin:0 0 10px;padding-left:18px}
.md-list li{margin:0 0 5px}
/* P10: the one line in a turn that carries the point renders at display size. */
.bubble blockquote{margin:14px 0;padding:2px 0 2px 14px;border-left:2px solid var(--line);
  color:var(--dim2);font-size:14px}
.from-seat .bubble blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:2px solid var(--gold);
  font-size:27px;line-height:1.2;font-weight:700;color:var(--text);letter-spacing:-.026em}
@media(max-width:720px){.from-seat .bubble blockquote{font-size:21px;padding-left:14px}}
.table-wrap{overflow-x:auto;margin:0 0 10px;border:1px solid var(--line);border-radius:var(--r)}
.md-table{border-collapse:collapse;width:100%;font-size:12.5px}
.md-table th,.md-table td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
.md-table th{color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.bubble hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.link{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px}
.caret{display:inline-block;width:7px;height:15px;margin-left:2px;background:var(--live);
  vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Structured options: titled quote cards, two columns at desk width. */
.opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
@media(max-width:720px){.opt-grid{grid-template-columns:minmax(0,1fr)}}
.opt-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.opt-title{display:block;color:var(--dim2);margin-bottom:7px}
.opt-body{display:block;color:var(--text);font-size:15px;line-height:1.45}

/* Act-trace chips: what the seat actually did, from the tool ledger. */
.acts{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:14px 0 0}
.act{
  min-height:28px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--ring);border-radius:var(--r);
  color:var(--dim);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font-size:9px;letter-spacing:.14em;
}
.act.warn{box-shadow:inset 0 0 0 1px var(--gold-edge);color:var(--gold-ink)}
.act.warn:before{content:"!";font-weight:700;margin-right:1px}
.act.trace{margin-left:auto;background:transparent;box-shadow:none;color:var(--dim)}
.act.trace:hover{color:var(--gold-ink)}
.act.trace:after{content:" v"}
.act.trace.open:after{content:" ^"}
@media(pointer:coarse),(max-width:720px){.act{min-height:44px}}

/* SHOW WORK / FULL TRACE: the provenance, the colleagues and the flags. */
.work{margin:12px 0 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.work .lbl{display:block;color:var(--dim);margin-bottom:8px}
.meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:8px 0 0;padding-top:6px;
  border-top:1px solid var(--line-soft)}
.meta:empty{display:none;border:0;margin:0;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:3px 10px;
  border:0;box-shadow:inset 0 0 0 1px var(--ring);border-radius:var(--r);
  background:transparent;color:var(--dim);
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  white-space:normal;overflow-wrap:anywhere;max-width:100%;
}
.chip.warn{box-shadow:inset 0 0 0 1px var(--gold-edge);color:var(--gold-ink)}
.chip.bad{box-shadow:inset 0 0 0 1px rgba(255,74,28,.4);color:var(--bad)}
.chip.model{color:var(--dim2)}
.chip.source{box-shadow:inset 0 0 0 1px var(--prov-line);background:var(--prov-bg);color:var(--dim2)}
.chip.flag{cursor:pointer}
@media(pointer:coarse),(max-width:720px){.chip{min-height:44px}}
.flag-note{flex-basis:100%;margin-top:8px;padding:10px 12px;background:var(--sunken);
  border-left:2px solid var(--warn);border-radius:var(--r);color:var(--body);font-size:12.5px}
.flag-note b{display:block;color:var(--text);margin-bottom:4px}
.sources{flex-basis:100%;margin-top:8px}
.src-row{display:block;width:100%;text-align:left;background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:9px 10px;margin-bottom:5px;color:var(--dim2);font-size:12px;
  overflow-wrap:anywhere;min-height:40px}
.reply,.handoff{color:var(--dim);font-size:11.5px;margin-bottom:7px}
.synth-head{color:var(--gold-ink);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:8px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
/* The per-turn actions are TEXT, not buttons: they are the quietest thing in a
   turn and must not read as three more chips. */
.actions .act{color:var(--faint);background:transparent;border:0;box-shadow:none;padding:0;
  min-height:22px;font-size:9.5px}
.actions .act:hover{color:var(--dim2)}
@media(hover:hover) and (min-width:721px){
  .actions{opacity:0;transition:opacity .12s ease-out}
  .msg:hover .actions,.msg:focus-within .actions{opacity:1}
}
@media(pointer:coarse),(max-width:720px){.actions .act{min-height:44px}}
.msg.routine .bubble{display:none}
.msg.routine.open .bubble{display:block}
.routine-head{display:block;width:100%;text-align:left;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 12px;color:var(--dim2);font-size:11.5px;min-height:44px}
.routine-head:before{content:"v";margin-right:8px;color:var(--dim)}
.msg.routine.open .routine-head:before{content:"^"}
.ask-card{margin:10px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ask-head{display:block;width:100%;text-align:left;background:transparent;color:var(--dim2);
  padding:11px 12px;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;min-height:44px}
.ask-head:before{content:"v";margin-right:8px;color:var(--dim)}
.ask-card.open .ask-head:before{content:"^"}
.ask-body{padding:0 12px 12px}
.ask-q{color:var(--dim);font-size:12px;margin-bottom:8px}
.ask-a{color:var(--body);font-size:13.5px}
.ask-src{margin-top:8px;color:var(--dim);font-size:11px;overflow-wrap:anywhere}
.msg.system .bubble{color:var(--bad)}
.thread-error{margin:16px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.thread-error p{margin:0 0 10px;color:var(--body);font-size:13px}
.retry{background:var(--sunken);border:1px solid var(--line);color:var(--text)}

/* --------------------------------------------------- tabled in the room -- */
/* Artifacts the crew produced, as a full-width gallery row with a label that
   states what it is, how many, and which pipeline made it. */
/* The section rule the handoff uses above every band in a turn: one tracked
   micro-label, a hairline to the right edge, and one gold text action. */
.gallery{padding:0;border-top:0;margin-top:16px}
.gallery-head{display:flex;align-items:center;gap:12px;color:var(--fainter);margin-bottom:9px;
  font-size:8.5px;letter-spacing:.22em;font-weight:700}
.gallery-head i{flex:1;font-style:normal;height:1px;background:var(--line)}
.gallery-head .review{background:transparent;color:var(--gold-ink);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;min-height:32px;padding:0;
  transition:color var(--t-flip) var(--ease)}
.gallery-head .review:hover{color:var(--gold-hover)}
.gallery-head .review:after{content:" ->"}
@media(pointer:coarse),(max-width:720px){.gallery-head .review{min-height:44px}}
.shots{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shot{flex:none;width:172px;height:172px;padding:0;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;position:relative}
@media(max-width:720px){.shot{width:132px;height:132px}}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot.pending{display:grid;place-items:center;border-style:dashed;border-color:var(--live-edge);color:var(--live);
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.shot.qc-missing:after{content:"preview unavailable";position:absolute;inset:auto 0 0;padding:6px;
  background:var(--sunken);color:var(--dim);font-size:10px;text-align:center}

/* A card is not a turn: it has no gutter, so it spans the column. */
.msg.artifact,.msg.plan{display:block}
/* A band of tabled shots. Each tile is still its own message node with its own
   id, which the P9 contract requires; they flow into one row because they are
   inline blocks, and the FIRST tile of a run carries the band's label above it.
   Which tile is first is recomputed from the DOM after every render, so a
   catch-up that inserts a missed shot relabels the band instead of lying. */
.msg.tabled{display:inline-block;vertical-align:top;width:172px;margin:0 8px 10px 0;
  padding:0;border-top:0}
.msg.tabled.lead{margin-top:34px;position:relative}
.msg.tabled.lead .gallery-head{position:absolute;top:-26px;left:0;margin:0;
  width:max-content;max-width:calc(100vw - 24px)}
.msg.tabled.lead .gallery-head i{display:none}
.gallery-head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg.tabled .shot{width:100%;height:172px}
@media(max-width:720px){.msg.tabled{width:132px}.msg.tabled .shot{height:132px}}
.artifact{padding-top:16px}
.artifact-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.artifact-head b{font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--dim2)}
.artifact-tag{color:var(--gold-ink)}
.artifact-cost,.artifact-when{color:var(--dim);font-size:10px;letter-spacing:.06em}
.artifact-title{font-size:15px;font-weight:600;margin-bottom:10px}
.qc-lead{margin:12px 0 8px;color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.qc-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.qc-strip::-webkit-scrollbar{display:none}
.qc-page{flex:none;width:104px;padding:0;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;position:relative;min-height:134px}
.qc-page img{width:100%;height:134px;object-fit:cover;object-position:top;display:block}
.qc-num{position:absolute;left:0;bottom:0;padding:3px 6px;background:var(--sunken);color:var(--dim);
  font-size:9px;font-weight:700;letter-spacing:.09em}
.qc-page.qc-missing:after{content:"preview unavailable";position:absolute;inset:0;display:grid;
  place-items:center;color:var(--dim);font-size:10px;text-align:center;padding:8px}
.artifact-image{display:block;width:100%;padding:0;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:10px}
.artifact-image img{max-width:100%;width:100%;height:auto;display:block}
.artifact-image.qc-missing{min-height:120px}
.lightbox{position:fixed;inset:0;z-index:50;background:var(--overlay);display:grid;place-items:center;padding:24px}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain}
.lb-cap{margin-top:12px;color:var(--lb-ink);font-size:11px;letter-spacing:.09em;text-transform:uppercase}

.file-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:48px;
  padding:10px 12px;background:var(--sunken);border:1px solid var(--line);
  border-left:2px solid var(--gold);border-radius:var(--r);color:var(--text)}
.file-tag{color:var(--gold-ink);background:color-mix(in srgb,var(--gold) 8%,transparent);
  border:1px solid var(--gold-edge);border-radius:var(--r-micro);padding:3px 6px;font-size:9px}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.file-size{color:var(--dim);font-size:11px}

/* The staged image batch. Nothing here generates; the owner's tap does. */
.plan{padding-top:16px}
.plan-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.plan-state{color:var(--gold-ink)}
.plan-declined .plan-state,.plan-failed .plan-state{color:var(--bad)}
.plan-done .plan-state{color:var(--ok)}
.plan-eng{color:var(--dim)}
.plan-cost{margin-left:auto;color:var(--gold-ink);font-size:11px;font-weight:600}
.plan-title{font-size:15px;font-weight:600;margin-bottom:10px}
.plan-shot{padding:10px 0;border-top:1px solid var(--line-soft)}
.plan-shot-head{font-size:12.5px;color:var(--text)}
.plan-noref{margin-left:8px;color:var(--warn);border:1px solid var(--gold-edge);border-radius:var(--r-micro);
  padding:2px 6px;font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.plan-refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.plan-ref{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);
  background:var(--sunken);border:1px solid var(--line-soft);border-radius:var(--r-micro);padding:3px 7px;font-size:10.5px}
.plan-unres{margin-top:6px;color:var(--warn);font-size:11.5px}
.plan-prompt{display:block;width:100%;text-align:left;margin-top:8px;padding:9px 10px;background:var(--sunken);
  border:1px solid var(--line-soft);border-radius:var(--r);color:var(--dim2);font-size:11.5px;min-height:44px}
.plan-prompt-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-prompt.open .plan-prompt-text{-webkit-line-clamp:unset;display:block}
.plan-actions{display:flex;gap:8px;margin-top:12px}
.plan-approve{min-height:44px;padding:0 16px;background:var(--gold);color:var(--on-gold);border-radius:var(--r);
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.plan-edit{min-height:44px;padding:0 16px;background:transparent;border:1px solid var(--line);color:var(--dim2);
  border-radius:var(--r);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}

/* The flow card (P11 §2.1). It IS the plan card: same head, same money slot,
   same two committing actions, same radii. Everything below is only what a flow
   has that a batch does not, which is an ordered list of colleagues, a spend
   line per step, and one sentence saying what he ends up holding. */
.flow-deliverable{color:var(--dim2);font-size:13px;line-height:1.5;margin:-4px 0 4px}
.flow-step-row .plan-shot-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:10px;font-weight:700;letter-spacing:.11em;color:var(--dim2)}
.flow-step-row .plan-noref{margin-left:auto;color:var(--gold-ink)}
.flow-step-row.done .plan-shot-head{color:var(--ok)}
.flow-step-row.done .plan-shot-head:after{content:"done";margin-left:6px;color:var(--ok);font-size:9px}
.flow-task{margin-top:5px;color:var(--body);font-size:13.5px;line-height:1.5}
.flow-running .plan-state{color:var(--live)}
.flow-done .plan-state{color:var(--ok)}
.flow-declined .plan-state,.flow-cancelled .plan-state{color:var(--bad)}
.flow-paused .plan-state,.flow-blocked .plan-state{color:var(--warn)}

/* The one link line the originating chat gets, and the step rule inside the
   project room. Both reuse an existing row shape rather than inventing one. */
.msg.flow-link .file-row{border-left-color:var(--live)}
.msg.flow-link .file-tag{color:var(--live);background:var(--live-soft);border-color:var(--live-edge)}
.msg.flow-step{display:block;margin:18px 0 2px}
.flow-step-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.flow-step-n{color:var(--live)}
.flow-step-who{color:var(--dim2)}
.flow-step-line i{flex:none;width:22px;height:1px;background:var(--line);font-style:normal}
.flow-step-task{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:0;font-weight:400;font-size:11.5px;color:var(--dim)}

/* A project room on the room list, and the archived section under it. */
.chip.live{border-color:var(--live-edge);color:var(--live)}
.room-row.archived{opacity:.72}
.room-row.archived .room-name{color:var(--dim2)}

/* ------------------------------------------------- the owner's own call -- */
/* P10 §Surface 1. A restyle of the existing gated actions, never new authority:
   every button below posts to the endpoint that card always posted to. */
/* The gold slab. It is SOLID gold at every width, because it is the one thing
   on screen that blocks the operator, and it is the only solid gold on the
   screen it appears on. */
.decision{
  margin:0 var(--rail) 12px;padding:16px 20px;
  background:var(--gold);border:0;border-radius:var(--r-slab);
  box-shadow:0 14px 40px rgba(255,170,0,.14);
}
@media(min-width:721px){.decision{max-width:var(--col);margin-left:auto;margin-right:auto}}
.decision-cause{display:flex;align-items:center;gap:8px;color:rgba(13,13,13,.6);margin-bottom:4px;
  font-size:8.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.decision-when{margin-left:auto;letter-spacing:0;font-size:10.5px;text-transform:none;
  font-variant-numeric:tabular-nums}
.decision-body{display:block;color:var(--gold-on);font-size:15px;line-height:1.5;font-weight:500;
  margin-bottom:14px}
.decision-acts{display:flex;gap:9px;flex-wrap:wrap}
.decision-acts button{min-height:44px;padding:11px 16px;border-radius:var(--r);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:box-shadow var(--t-flip) var(--ease),color var(--t-flip) var(--ease)}
.decision-acts .yes{background:var(--gold-on);color:var(--gold)}
.decision-acts .yes:hover{color:var(--gold-hover)}
.decision-acts .no{background:transparent;border:0;
  box-shadow:inset 0 0 0 1px rgba(13,13,13,.3);color:var(--gold-on)}
.decision-acts .no:hover{box-shadow:inset 0 0 0 1px rgba(13,13,13,.7)}
@media(min-width:721px){.decision{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:22px}
  .decision-cause{grid-column:1/-1;margin-bottom:2px}
  .decision-body{margin-bottom:0}
  .decision-acts{margin:0;flex-wrap:nowrap}}
/* Once the call is made the slab is REPLACED by a quiet strip that states the
   outcome. The gold is spent, so it goes; what remains is the record. */
.decision.resolved{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--ring-strong);
  display:flex;align-items:center;gap:14px;padding:14px 18px;grid-template-columns:none}
@media(prefers-reduced-motion:no-preference){.decision.resolved{animation:cvin var(--t) var(--ease)}}
.decision.resolved .res-dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--ok)}
.decision.resolved.res-gold .res-dot{background:var(--gold)}
.decision.resolved.res-stop .res-dot{background:var(--bad)}
.decision.resolved .res-kicker{color:var(--ok);font-size:8.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;flex:none}
.decision.resolved.res-gold .res-kicker{color:var(--gold-ink)}
.decision.resolved.res-stop .res-kicker{color:var(--bad)}
.decision.resolved .res-body{flex:1;min-width:0;color:var(--dim);font-size:13.5px;
  line-height:1.5;font-weight:300}
.decision.resolved .res-undo{background:transparent;color:var(--fainter);font-size:10px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:0;min-height:32px;flex:none}
.decision.resolved .res-undo:hover{color:var(--dim)}

/* --------------------------------------------------------------- ticker -- */
.status-row{display:flex;align-items:center;gap:10px;padding:12px 0 4px;color:var(--live);font-size:12px}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 5px var(--live);flex:none}
.status-row .think{margin-left:auto;color:var(--dim);font-size:11px}
.streaming .prog{margin-top:12px}
.step-head{color:var(--live);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:9px}
.steps{margin-bottom:10px}
.step{display:flex;align-items:baseline;gap:9px;padding:3px 0;color:var(--dim);font-size:13.5px}
.step i{font-style:normal;width:12px;color:var(--ok);flex:none}
.step.now{color:var(--text)}
.step.now i:before{content:"◦";color:var(--live)}
.link-state{margin:0 var(--rail) 8px;padding:8px 12px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r);color:var(--warn);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.link-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* -------------------------------------------------------------- composer -- */
.chip-strip{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
  padding:0 var(--rail) 10px;margin-top:10px}
.chip-strip::-webkit-scrollbar{display:none}
.chip-lead{color:var(--dim);font-size:11px;align-self:center;white-space:nowrap}
.reply-chip{flex:none;min-height:40px;padding:0 13px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-pill);color:var(--text);font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.reply-chip:before{content:">";color:var(--dim);margin-right:7px}
.reply-chip:hover{border-color:var(--gold)}
.reply-chip.synth{border-color:var(--gold-edge);color:var(--gold-ink)}
@media(pointer:coarse),(max-width:720px){.reply-chip{min-height:44px}}
.quote-box{display:flex;align-items:flex-start;gap:9px;margin:0 var(--rail) 10px;padding:10px 12px;
  background:var(--sunken);border-left:2px solid var(--gold);border-radius:var(--r)}
.quote-mark{color:var(--gold-ink);font-size:16px;line-height:1}
.quote-body{flex:1;min-width:0;color:var(--dim2);font-size:12px}
.quote-body b{display:block;color:var(--text);margin-bottom:2px}
.quote-clear{min-height:44px;min-width:44px;background:transparent;border:0;color:var(--dim);font-size:16px}
/* The composer slab: lifted off the ground with its own ring and a shadow that
   throws upward, so the thread reads as scrolling UNDER it. */
.composer{padding:0 var(--rail) calc(22px + env(safe-area-inset-bottom));background:var(--ground);
  border-top:0;padding-top:12px}
/* The column measure is taken by the FORM when it docks on one row, and by the
   slab itself when it stacks. Applying it to every child would cap the docked
   row's parts individually and crush the field. */
.composer>*{width:100%;max-width:var(--col);margin-left:auto;margin-right:auto}
@media(min-width:721px){
  /* The form keeps the rail as PADDING, so its cap has to carry the rail too or
     the docked row loses 2x143px of field to a measure it already had. */
  .composer.dock{max-width:calc(var(--col) + var(--rail) * 2);margin-left:auto;margin-right:auto}
  .composer.dock>*{max-width:none;margin:0}
}
.target{display:flex;gap:7px;margin-bottom:9px}
.tgt{min-height:30px;padding:0 11px;border-radius:var(--r);background:transparent;border:0;
  box-shadow:inset 0 0 0 1px var(--ring-strong);
  color:var(--dim);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tgt.on{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--ring-lift)}
@media(pointer:coarse),(max-width:720px){.tgt{min-height:44px}}
.seat-picker{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.seat-picker button{min-height:36px;padding:0 11px;background:transparent;border:0;
  box-shadow:inset 0 0 0 1px var(--ring-strong);
  border-radius:var(--r);color:var(--dim);font-size:11px}
.seat-picker button:hover{color:var(--gold-ink);box-shadow:inset 0 0 0 1px var(--gold-edge)}
@media(pointer:coarse),(max-width:720px){.seat-picker button{min-height:44px}}
.composer-box{background:var(--composer-bg);border:0;border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--ring-strong),0 -16px 40px rgba(0,0,0,.55);
  padding:13px 15px;display:flex;flex-direction:column;gap:11px}
:root[data-theme="light"] .composer-box{box-shadow:inset 0 0 0 1px var(--ring-strong),0 -14px 34px rgba(32,28,20,.08)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .composer-box{
  box-shadow:inset 0 0 0 1px var(--ring-strong),0 -14px 34px rgba(32,28,20,.08)}}
/* A room takes the floor on ONE line: the target, the field, attach, send.
   A phone has no room for that, so below 721px the composer stacks. */
@media(min-width:721px){
.composer.dock{display:flex;align-items:center;gap:9px}
.composer.dock .target{margin:0;flex:none;width:auto}
.composer.dock .composer-box{flex:1;min-width:0;width:auto;
  display:flex;flex-direction:row;align-items:center;gap:9px;padding:8px 10px}
.composer.dock textarea{padding:0;min-height:24px;flex:1;min-width:0;order:2}
.composer.dock .composer-row{flex:none;display:contents}
.composer.dock .attach{order:1}
.composer.dock .at-seat{order:3}
.composer.dock .eng-chip{order:4}
.composer.dock .cm-gap{display:none}
.composer.dock .cm{order:5}
.composer.dock #send{order:6}
.composer.dock .est{margin-left:0}
}
.composer-box:focus-within{box-shadow:inset 0 0 0 1px var(--gold-edge),0 -16px 40px rgba(0,0,0,.55)}
.composer-row{display:flex;align-items:center;gap:9px}
.composer textarea{width:100%;min-height:24px;max-height:120px;padding:0;resize:none;
  background:transparent;border:0;color:var(--ink-2);font-size:15px;line-height:1.6;
  font-weight:300;display:block}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--faint)}
.composer .attach{width:30px;height:30px;min-height:30px;padding:0;background:transparent;
  border:0;box-shadow:inset 0 0 0 1px var(--ring-strong);border-radius:var(--r);
  color:#6E6E6E;font-size:15px;line-height:1;transition:color var(--t-flip) var(--ease)}
.composer .attach:hover{color:var(--gold-ink)}
.at-seat{min-height:30px;padding:7px 11px;background:transparent;border:0;
  box-shadow:inset 0 0 0 1px var(--ring-strong);
  border-radius:var(--r);color:var(--dim);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;transition:color var(--t-flip) var(--ease)}
.at-seat:hover{color:var(--gold-ink)}
.composer .eng-chip{white-space:nowrap}
.cm-gap{flex:1}
/* The composer's own metric stacks. EST. COST is the seat's recent average and
   says so; TURNS is the room's real turn count. Neither is a quote. */
.cm{display:flex;flex-direction:column;gap:2px;flex:none}
.cm b{color:var(--fainter);font-size:8.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.cm i{font-style:normal;font-size:12.5px;font-weight:600;color:var(--faint);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-height:15px}
.est{color:var(--faint);white-space:nowrap;margin-left:0;font-size:12.5px;
  font-weight:600;letter-spacing:0;text-transform:none}
/* SEND is dead until there is something to send, and gold the moment there is.
   That flip is the whole affordance, so it is a real state change, not a hover. */
#send{min-height:38px;padding:10px 21px;background:#141414;color:var(--fainter);border-radius:var(--r-thumb);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t-flip) var(--ease),color var(--t-flip) var(--ease),
    box-shadow var(--t-flip) var(--ease)}
:root[data-theme="light"] #send{background:var(--sunken);color:var(--faintest)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) #send{background:var(--sunken);color:var(--faintest)}}
#send.ready{background:var(--gold);color:var(--on-gold);box-shadow:0 0 0 1px rgba(255,170,0,.4)}
@media(pointer:coarse),(max-width:720px){.composer .attach,.at-seat,#send{min-height:44px}
  .composer .attach{width:44px;height:44px}}

/* ------------------------------------------------------------ tab bar --- */
nav.bottom{
  display:flex;position:sticky;bottom:0;z-index:20;height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:var(--nav-bg);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.bottom button{flex:1;position:relative;background:transparent;color:var(--faint);font-size:9.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:color var(--t-flip) var(--ease)}
.bottom button:before{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:18px;height:1.5px;background:transparent;display:none}
.bottom button.active{color:var(--gold-ink)}
.bottom button.active:before{background:var(--gold)}
@media(min-width:981px){nav.bottom{display:none}}
/* P10: the reference keeps the tab bar in a conversation, and P9's D8 is the
   argument for it: a cold open lands INSIDE a thread, so without the bar the
   roster is one unmarked Back away. It hides only when the keyboard is up. */
@media(min-width:981px){body.in-thread nav.bottom{display:none}}

/* P9 U2's floor, restated for everything this pass introduced: wherever the
   pointer is coarse or the viewport is a phone, a control clears 44px. The
   desk keeps the dense instrument scale it was designed at. */
@media(pointer:coarse),(max-width:720px){
  button,select,.tabs button,.filter,.tgt,.quiet,.side-admin,#new-room,#logout-btn{min-height:44px}
  .show-work{min-height:44px}
}

/* --------------------------------------------------------- phone layout -- */
@media(max-width:980px){
  .workspace{display:none}
  body.in-pane .workspace{display:flex}
  body.in-pane .side{display:none}
  .side{padding-bottom:0}
  .thread-head{position:sticky;top:0;z-index:10}
}
@media(max-width:720px){
  /* The conversation header on a phone: one line that names where you are,
     one line of metadata under it, and nothing else. */
  .thread-head{gap:9px;padding-top:calc(9px + env(safe-area-inset-top));padding-bottom:9px}
  /* The room's name earns the width the word BACK was taking. */
  #back-btn{font-size:0;min-width:22px}
  #back-btn:before{content:"<";font-size:15px}
  .thread-head h2{font-size:16px;max-width:100%}
  /* One line that names where you are, one line of metadata under it. */
  .head-id{display:block;flex:1 1 auto;min-width:0}
  .head-line{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap}
  /* The phone header names the seat, its engine and its role on two lines and
     stops. The RUNNING ON stack and the head divider are desk furniture: at
     390px the engine already rides the sub-line and the composer chip. */
  .head-line .eng-chip{display:none}
  .head-engine,.head-div{display:none}
  /* The handoff's 16.5px read is a DESK measure. At 390px it sets to 15.5px,
     which is the same rhythm at the width the phone actually has. */
  .bubble{font-size:15.5px;line-height:1.7}
  .msg{margin-bottom:20px}
  /* At 390px the attribution and the metering cannot share a line without one
     running through the other, so the turn head becomes TWO rows: who spoke on
     the first, what it cost on the second. Nothing is dropped. */
  .gutter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;margin-bottom:10px}
  .author{grid-column:1;grid-row:1;gap:8px;flex-wrap:wrap}
  .author .g-rule{display:none}
  .author .g-time{margin-left:auto}
  .tele{grid-column:1/-1;grid-row:2;gap:14px;justify-content:flex-start}
  .show-work{grid-column:2;grid-row:1;align-self:center}
  .tm b{font-size:8px}
  .tm i{font-size:11.5px}
  .msg.user .gutter{display:flex}
  /* On the rail, a card at 390px keeps the line but tightens the gap. */
  .msg.contrib{gap:11px;padding-left:2px}
  .msg.contrib .contrib-card{padding:12px 13px}
  .thread-head p{width:100%;font-size:9.5px;letter-spacing:.09em;order:3}
  .thread-head .avatar{width:26px;height:26px;font-size:9px}
  .head-id{gap:8px}
  /* Two rows and no more: where you are, then what it is costing. */
  .head-meter{order:2;margin-left:auto;gap:2px;flex-wrap:nowrap}
  .head-meter .quiet{white-space:nowrap;padding:0 8px}
  .head-spend{display:none}
  .thread-head p{order:3}
  /* A ROOM composes on one row, the way the phone reference draws it; a seat's
     thread keeps the two-row box, because the field needs the width and the @
     picker needs to stay reachable. The base composer is a COLUMN in the new
     system, so the phone has to state the row direction explicitly. */
  .composer .composer-box{display:flex;flex-direction:row;align-items:center;gap:8px;
    padding:8px 10px}
  .composer .composer-box .composer-row{display:contents}
  .composer textarea{order:2;flex:1;min-height:40px;padding:9px 0}
  .composer .attach{order:1}
  /* The metric stacks are DESK furniture: at 390px the field and SEND own the
     width, and both figures are one tap away in the room log. */
  .cm,.cm-gap{display:none}
  /* The @ picker stays: addressing a seat is the phone's most-used control.
     The engine chip and the estimate are the two the reference drops. */
  /* The @ picker is the phone's most-used control after SEND, so it keeps its
     place; the estimate is what the width buys. */
  .at-seat{order:5;padding:0 9px;display:none}
  .est{display:none}
  .composer.dock .eng-chip{display:none}
  /* SEND becomes the reference's directional button: the word costs a third of
     the field's width on a 390px screen. */
  #send{order:3;width:44px;padding:0;font-size:0}
  #send:after{content:"↑";font-size:17px;font-weight:700}
  .composer.dock .target{margin-bottom:9px}
  /* In a ROOM the owner's call anchors on a rule across the whole width, the
     way ref-1 draws it; in a seat's thread it stays the contained card ref-2
     draws. Two references, two treatments, and each one is right where it is. */
  .thread-view.room .decision{margin:0 0 10px;border:0;border-top:1px solid var(--gold-edge);
    border-radius:0;padding:14px var(--rail)}
  .head-spend{margin-right:auto}
  .synth-caption{display:none}
  .seat-strip{gap:14px;padding-top:11px;padding-bottom:11px}
  .strip-seat{min-width:60px;gap:5px}
  .strip-seat .avatar{width:38px;height:38px;font-size:11px}
  .thread{padding-top:12px}
  /* The gutter label becomes an inline header above the words, and it stops
     being sticky: in one column a sticky label slides down OVER the words. */
  .msg{grid-template-columns:minmax(0,1fr);gap:0}
  .gutter{position:static;flex-direction:row;flex-wrap:wrap;align-items:baseline;
    justify-content:flex-start;text-align:left;gap:8px;margin-bottom:9px}
  .gutter .author{display:flex;align-items:baseline;gap:8px}
  .body{padding-left:0;border-left:0}
  .tele{justify-content:flex-start;gap:5px;font-size:9.5px}
  .gutter .g-who,.gutter .g-time{font-size:9.5px}
  .thread-head h2{font-size:15px}
  .head-meter .quiet{padding:0 10px}
  .synth-caption{text-align:left}
}

/* --------------------------------------------------------------- motion -- */
@media(prefers-reduced-motion:no-preference){
  .msg.arrived .bubble{animation:bubbleScan .24s ease-out}
}
@keyframes bubbleScan{from{opacity:.35;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .prog.indet i{animation:none;width:100%}
  .caret{animation:none}
  .link-state::before{animation:none}
}

/* The on-screen keyboard (P9 U4). `--kb` is 0 whenever no keyboard is up, so
   this rule is inert on a desktop and on a phone at rest. */
body.kb-open .composer{padding-bottom:calc(12px + var(--kb,0px))}
body.kb-open nav.bottom{display:none}

/* ===========================================================================
   P12 — THE PHONE, REBUILT AROUND THE FLOOR
   Contract: `~/workspace/output/crave-crew/P12-SPEC.md`, the five phone
   references and the eight-page design system beside them. Where the PDF's
   WORDS and the reference PIXELS disagreed the words won, then the pixels,
   then the spec, which is the precedence the brief sets.

   Everything below this line is PHONE. The desk keeps P10's layout untouched;
   what it inherits from this pass is the token system and the type system,
   which are declared once at the top of this file and apply everywhere.

   THE GOLD LAW, mechanically: an element that carries a decision-weight gold
   (a gold fill, or a gold ring around the call itself) wears `.gold-use`, and
   no screen in this app paints more than two of them. Gold as a MICRO-LABEL
   (a section rule, a figure) is the label register, not a gold use, and the
   design system uses it that way on its own pages.
   =========================================================================== */

/* ------------------------------------------------------------ shared parts */
/* The cyan level meter. Four bars, and it means exactly one thing: live. */
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:13px;flex:none}
.meter i{width:2.5px;height:5px;background:var(--live);border-radius:var(--r-micro);
  opacity:.55}
@media(prefers-reduced-motion:no-preference){
  .meter i{animation:lvl 1s ease-in-out infinite}
  .meter i:nth-child(2){animation-delay:.12s}
  .meter i:nth-child(3){animation-delay:.26s}
  .meter i:nth-child(4){animation-delay:.38s}
}
@keyframes lvl{0%,100%{height:4px;opacity:.45}50%{height:13px;opacity:1}}
/* A working seat's monogram breathes. Cyan, because it is live work. */
.avatar.pulse{box-shadow:0 0 0 1.5px var(--live-edge)}
@media(prefers-reduced-motion:no-preference){
  .avatar.pulse{animation:ring 1.9s ease-in-out infinite}
}
@keyframes ring{0%,100%{box-shadow:0 0 0 1.5px rgba(0,230,255,.30)}
  50%{box-shadow:0 0 0 1.5px var(--live-edge),0 0 10px var(--live-soft)}}
.avatar.mini{width:22px;height:22px;font-size:8px}

/* The section rule: a coloured dot, an uppercase micro-label, and a hairline
   running to the right edge. One element, three sections, three roles. */
.floor-rule{display:flex;align-items:center;gap:9px;margin:22px 0 11px}
.floor-rule:first-child{margin-top:4px}
.floor-rule-t{display:flex;align-items:center;gap:8px;color:var(--dim);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.floor-rule-t:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.floor-rule.r-gold .floor-rule-t:before,.floor-rule.r-live .floor-rule-t:before{
  box-shadow:0 0 0 3px rgba(255,255,255,.03)}
.floor-rule:after{content:"";flex:1;height:1px;background:var(--line)}
.floor-rule.r-gold .floor-rule-t{color:var(--gold-ink)}
.floor-rule.r-gold .floor-rule-t:before{background:var(--gold);
  box-shadow:0 0 0 3px rgba(255,170,0,.10),0 0 10px rgba(255,170,0,.55)}
.floor-rule.r-live .floor-rule-t{color:var(--live)}
.floor-rule.r-live .floor-rule-t:before{background:var(--live);
  box-shadow:0 0 0 3px rgba(0,230,255,.10),0 0 10px rgba(0,230,255,.55)}

/* ------------------------------------------------------- 6A · THE FLOOR --- */
.view.floor,.view.ledger{display:none}
/* The LEDGER is now a desk view too: the app bar names it, so it has to open
   there. The Floor stays phone-only — at desk width the crew rail and the
   working-now band already say everything the Floor says, in a column that
   never leaves the screen. */
@media(min-width:981px){
  .view.ledger:not(.hidden){display:block;padding:0 34px 34px}
}
@media(max-width:980px){
  /* BLOCK, not flex: these two are scrolling documents, and a flex column made
     the body a fixed-height box its own content painted out of. */
  .view.floor,.view.ledger{display:block}
  /* The Floor IS the phone's home, so the workspace has to be on screen for it
     even though no conversation is open. */
  body.in-floor .workspace{display:flex}
  body.in-floor .side{display:none}
}
.floor{display:block;padding:0 var(--rail) calc(12px + var(--nav-h));overflow-y:auto}
/* Circular monograms on every P12 phone surface. The desk keeps P10's squircle,
   which is what its own reference draws. */
.floor .avatar,.p-panel .avatar,.presence-stack .avatar{border-radius:50%}
.floor-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 6px;padding-top:calc(14px + env(safe-area-inset-top))}
.floor-head .mark-icon{width:19px;height:19px}
.floor-head .wordmark{font-size:14px;letter-spacing:.05em}
.floor-me{width:38px;height:38px;min-height:38px;border-radius:50%;background:var(--warm);
  color:var(--warm-on);font-size:10px;font-weight:700;letter-spacing:.06em;flex:none}
.floor-title{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:8px 0 14px;min-width:0}
/* Archivo Black is a WIDER face than the Poppins 900 this used to fall back to,
   so the same clamp now runs the counters off a 390px screen. The measure
   drops to fit the face rather than the counters wrapping under it. */
.floor-h1{margin:0;font-size:clamp(22px,6.6vw,30px);color:var(--text);white-space:nowrap;flex:none}
.floor-counts{display:flex;gap:12px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.fc{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.fc b{color:var(--dim);font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap}
.fc i{font-style:normal;font-size:14.5px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.005em}
/* IN FLIGHT is money on work that is RUNNING, so it is the one figure here
   that is cyan. TODAY is settled, so it is not. */
.fc i.fc-live-ink{color:var(--live)}
.floor-body{min-height:0}

/* BLOCKED ON YOU. The lead card carries its own evidence and its own actions,
   so the call can be made without opening the thread. Every other blocked item
   is a quiet row that opens where it lives — which is also the gold law
   holding: two gold uses on this screen, both of them on the lead card. */
.blocked{display:block;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-card);padding:13px 14px;margin:0 0 8px}
.blocked.lead{background:color-mix(in srgb,var(--gold) 7%,var(--panel));
  border-color:var(--gold);padding:15px 15px 14px;
  box-shadow:0 0 0 4px rgba(255,170,0,.05),0 0 22px -4px rgba(255,170,0,.22),
    0 14px 34px -18px rgba(255,170,0,.45)}
.blocked-head{display:flex;align-items:center;gap:11px}
.blocked-head .avatar{width:34px;height:34px;font-size:10px;flex:none}
.blocked.lead .blocked-head .avatar{box-shadow:0 0 0 1.5px var(--gold-edge)}
.blocked-id{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.blocked-id strong{font-size:15px;font-weight:700;letter-spacing:-.005em}
.blocked-sub{color:var(--dim);font-size:8.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blocked-when{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;flex:none}
.blocked-line{margin:12px 0 0;color:var(--body);font-size:14.5px;line-height:1.52;font-weight:300}
.blocked.lead .blocked-line{color:var(--text)}
.blocked-ev{display:flex;align-items:stretch;gap:7px;margin-top:12px}
.ev-thumb{width:52px;height:52px;padding:0;border-radius:var(--r);overflow:hidden;
  background:var(--sunken);border:1px solid var(--line);flex:none}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ev-more{flex:1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-edge);border-radius:var(--r);color:var(--gold-ink);
  font-size:11.5px;font-weight:500}
.blocked-acts{display:flex;gap:9px;margin-top:13px}
.b-yes{flex:1;min-height:46px;padding:0 14px;background:var(--gold);color:var(--on-gold);
  border-radius:var(--r);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.b-no{min-height:46px;padding:0 18px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.blocked-err{margin:9px 0 0;color:var(--bad);font-size:12px}
/* An action the relay has switched off states its reason instead of vanishing. */
.b-off{opacity:.42}
.blocked-why{margin:8px 0 0;color:var(--dim);font-size:11px;line-height:1.45}

/* P13: THE WATCH CARD. Facts first (they are what tripped), then the crew's
   read and its draft with the seat that produced each one named, then one line
   of relay-written provenance. No gold in here: the lead card's ring and its
   primary action are the screen's two gold uses and this body adds none. */
/* A watch card carries FOUR actions where every other card carries two, so its
   action row wraps rather than pushing the last one off the right edge. The
   committing action keeps the full first line; the rest sit under it. */
.blocked-acts{flex-wrap:wrap}
.blocked .watch-body ~ .blocked-acts .b-yes{flex:1 1 100%}
.blocked .watch-body ~ .blocked-acts .b-no{flex:1 1 auto;padding:0 14px}
.watch-body{margin-top:11px}
.watch-head{margin:0;color:var(--text);font-size:14px;line-height:1.45;font-weight:600}
.watch-line{margin:7px 0 0;color:var(--body);font-size:13.5px;line-height:1.5;font-weight:300}
.watch-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.watch-fact{display:inline-flex;align-items:baseline;gap:6px;padding:4px 8px;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r)}
.watch-fact b{color:var(--dim);font-size:8px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.watch-fact i{color:var(--text);font-style:normal;font-size:11.5px;font-weight:600;
  font-variant-numeric:tabular-nums}
.watch-block{margin-top:12px;padding:10px 11px;background:var(--sunken);
  border:1px solid var(--line-soft);border-radius:var(--r)}
.watch-label{display:block;color:var(--dim);font-size:8px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.watch-text{margin:6px 0 0;color:var(--body);font-size:13.5px;line-height:1.55;
  font-weight:300;white-space:pre-wrap}
.watch-copy{margin-top:9px;min-height:38px;padding:0 14px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);color:var(--warm-ink);
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.watch-note{margin:9px 0 0;color:var(--dim);font-size:11.5px;line-height:1.45}
.watch-src{margin:9px 0 0;color:var(--dim);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}

/* The admin panel's connector health matrix: one row per source, its state as a
   real LED, and, when it cannot read, exactly what is missing by NAME. */
.watch-matrix{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.watch-src-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--panel)}
.watch-led{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.watch-src-row.s-live .watch-led{background:var(--live);box-shadow:0 0 8px -1px var(--live)}
.watch-src-row.s-degraded .watch-led{background:var(--bad)}
.watch-src-row.s-disabled .watch-led{background:var(--warn,#c8963e)}
.watch-src-name{flex:1;min-width:0;color:var(--text);font-size:13px;font-weight:600}
.watch-src-why{color:var(--dim);font-size:11px;text-align:right;max-width:58%}
.watch-src-state{color:var(--dim);font-size:8.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;flex:none}

/* P70. The Floor's per-seat WORKING NOW cards are gone: `.working`, its face,
   its engine chip, its stage clamp, its meter and its step foot went with the
   card. The Floor states the working COUNT; the line at the top of the window
   is the one place the seats themselves are named. */

/* The quiet majority: one line, one tap, and not a pixel more until wanted. */
.quiet-line{display:flex;align-items:center;width:100%;text-align:left;min-height:48px;padding:0 2px;
  margin-top:6px;background:transparent;border:0;border-top:1px solid var(--line-soft);
  color:var(--dim);font-size:12.5px}
.floor-empty{color:var(--dim);font-size:13px;padding:26px 2px}

/* ASK ANY SEAT: the operator's own voice, so warm neutral, full width. */
.ask-any{width:100%;min-height:52px;margin:16px 0 6px;background:var(--warm);color:var(--warm-on);
  border-radius:var(--r-card);font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase}

/* --------------------------------------------------------- 6A · LEDGER --- */
.ledger{display:block;padding:0 var(--rail) calc(12px + var(--nav-h));overflow-y:auto}
.ledger-head{padding:16px 0 4px;padding-top:calc(16px + env(safe-area-inset-top))}
.ledger-h1{margin:0;font-size:34px;color:var(--text)}
.ledger-note{margin:8px 0 0;color:var(--dim);font-size:12px;font-weight:300}
.ledger-body{min-height:0}
.lg-today{display:flex;align-items:baseline;gap:12px;padding:20px 0 4px}
.lg-big{font-size:36px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lg-lab{color:var(--dim);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.lg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line-soft)}
.lg-l{min-width:0;display:flex;flex-direction:column;gap:2px}
.lg-l strong{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-sub{color:var(--dim);font-size:10.5px}
.lg-calls{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-money{font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.lg-none{color:var(--dim);font-size:12.5px;padding:12px 0}

/* --------------------------------------------- 6B · THE PRESENCE LINE ----- */
/* 38px, not 90. Everything the floor rail said, in one line, and reading gets
   the whole width back. */
.presence-line{display:none;align-items:center;gap:10px;width:100%;height:38px;min-height:38px;
  padding:0 var(--rail);background:var(--raised);border:0;
  border-block:1px solid var(--line);text-align:left}
.presence-stack{display:flex;align-items:center;flex:none}
.presence-stack .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--raised)}
.presence-stack .avatar:first-child{margin-left:0}
.presence-count{flex:1;min-width:0;color:var(--dim2);font-size:12.5px;font-weight:300;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-view{color:var(--dim2);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;flex:none}

/* --------------------------------------------- 6C · THE PRESENCE SHEET ---- */
/* Design system page 5, binding: 24px top radius, the content behind dimmed to
   30%, 360ms easing, a 38x4 grabber, and the sheet never exceeds 62% of the
   screen so the thread underneath stays recognisable.
   There is NO GOLD in this sheet, deliberately: it contains no decision. */
.p-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.p-scrim{position:absolute;inset:0;background:rgba(13,13,13,.70)}
.p-panel{position:relative;width:100%;max-height:62vh;display:flex;flex-direction:column;
  background:var(--panel);border-top:1px solid var(--line);
  border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:0 var(--rail) calc(12px + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:no-preference){
  .p-panel{animation:sheetUp .36s cubic-bezier(.22,.9,.26,1)}
}
@keyframes sheetUp{from{transform:translateY(22px);opacity:.4}to{transform:none;opacity:1}}
.p-grab{display:block;width:38px;height:4px;border-radius:var(--r-pill);background:var(--line);
  margin:10px auto 4px}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 12px}
.p-title{margin:0;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  letter-spacing:.04em}
.p-title:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 6px var(--live-soft)}
.p-flight{color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}
.p-body{flex:1;min-height:0;overflow-y:auto}
.p-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-card);
  padding:9px 12px;margin:0 0 5px}
.p-row .avatar{width:30px;height:30px;font-size:9px;flex:none}
.p-id{min-width:0;display:flex;flex-direction:column;gap:2px}
.p-top{display:flex;align-items:baseline;gap:8px}
.p-top strong{font-size:14.5px;font-weight:700}
.p-eng{color:var(--dim2);font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.p-stage{color:var(--dim2);font-size:12px;font-weight:300;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.p-ms{color:var(--live);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums}
.p-foot{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:7px}
.p-foot .prog{flex:1}
.p-step{color:var(--dim);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-done-row{display:flex;align-items:center;gap:10px;padding:7px 2px}
.p-done-row .avatar{width:24px;height:24px;font-size:8px;flex:none}
.p-done-t{flex:1;min-width:0;color:var(--dim2);font-size:13px;font-weight:300;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-done-ms{color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}
.p-empty{color:var(--dim);font-size:12.5px;padding:14px 2px}
.p-acts{display:flex;gap:10px;padding:10px 0 0}
.p-pause{flex:1;min-height:48px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r-card);color:var(--text);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase}
.p-pause:disabled{opacity:.4;cursor:not-allowed}
/* BACK TO READING is the operator's own register, so warm neutral. */
.p-back{flex:1.35;min-height:48px;background:var(--warm);color:var(--warm-on);
  border-radius:var(--r-card);font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase}
.p-said{margin:10px 0 0;color:var(--dim);font-size:10px;line-height:1.35;font-weight:300}

/* -------------------------------------------- 6D · THE ARTIFACT REVIEW ---- */
/* Crave lives or dies on the photograph, so the photograph gets the screen.
   Protection gradients top and bottom ONLY. Never a tinted box over the food:
   that is a brand rule and it is why the labels are capsules and scrims. */
/* Addressed by ID, deliberately: `.review` is already the band's own REVIEW
   button, and a class collision here put a fixed overlay's geometry onto a
   text button in the transcript. */
#review{position:fixed;inset:0;z-index:70;background:var(--ground);display:flex;
  flex-direction:column;justify-content:space-between;overflow:hidden}
.rv-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden}
.rv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.rv-top,.rv-bottom{position:relative;z-index:2}
.rv-top{display:flex;align-items:flex-start;gap:12px;
  padding:calc(12px + env(safe-area-inset-top)) var(--rail) 34px;
  background:linear-gradient(180deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.52) 52%,transparent 100%)}
.rv-close{width:44px;height:44px;min-height:44px;background:transparent;color:var(--text);
  font-size:22px;line-height:1;flex:none;padding:0;margin-left:-10px}
.rv-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rv-kicker{color:var(--gold-ink);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-name{font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-plate{align-self:flex-start;padding:8px 12px;min-height:34px;display:inline-flex;
  align-items:center;border:1px solid rgba(255,255,255,.30);border-radius:var(--r-pill);
  background:rgba(13,13,13,.55);color:var(--text);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none}
.rv-bottom{padding:40px var(--rail) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(13,13,13,.94) 0%,rgba(13,13,13,.86) 55%,transparent 100%)}
.rv-dots{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-bottom:12px}
.rv-dot-row{display:flex;align-items:center;gap:2px}
/* The bar is 3px; the TAP is 44 by 24. The hit area is transparent padding so
   the swipe dots clear the touch floor without becoming furniture. */
.rv-dot{width:24px;height:44px;min-height:44px;padding:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center}
.rv-dot:before{content:"";display:block;width:9px;height:3px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.32)}
.rv-dot.on:before{width:20px;background:var(--gold)}
.rv-size{color:var(--dim);font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rv-caption-wrap{margin-bottom:12px}
.rv-caption-by{display:block;color:var(--gold-ink);font-size:8.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.rv-caption{margin:0;font-size:17px;font-weight:300;line-height:1.35;color:var(--text)}
/* An absent line is stated, never filled in. */
.rv-caption.rv-nocap{color:var(--dim);font-size:13.5px;font-style:normal}
.rv-checks{border:1px solid var(--line);border-radius:var(--r-card);background:rgba(13,13,13,.66);
  padding:11px 13px;margin-bottom:13px}
.rv-checks-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:9px;margin-bottom:8px;border-bottom:1px solid var(--line-soft)}
.rv-run{color:var(--dim);font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-meter{color:var(--dim);font-size:10.5px;font-variant-numeric:tabular-nums;flex:none}
.rv-check{display:flex;align-items:center;gap:10px;min-height:26px;padding:4px 0}
.rv-glyph{width:14px;text-align:center;flex:none;font-size:12px}
.rv-check-l{flex:1;min-width:0;font-size:13px;font-weight:300;color:var(--body)}
.rv-by{color:var(--dim);font-size:8.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;flex:none}
.rv-check.rv-pass .rv-glyph{color:var(--ok)}
.rv-check.rv-fail .rv-glyph{color:var(--bad)}
.rv-check.rv-fail .rv-check-l{color:var(--text)}
/* The one thing the pipeline cannot clear on its own, left OPEN in gold. */
.rv-check.rv-open .rv-glyph,.rv-check.rv-open .rv-by{color:var(--gold-ink)}
.rv-check.rv-open .rv-check-l{color:var(--text)}
/* Three verdicts, WEIGHTED. Approve is gold and widest. Regenerate is the same
   width as approve but quiet. Cut is deliberately narrow: a destructive action
   should not be the easy tap. */
.rv-acts{display:flex;gap:8px}
.rv-cut{min-height:48px;padding:0 16px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);color:var(--dim2);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;flex:none}
.rv-regen{flex:1;min-height:48px;padding:0 12px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);color:var(--text);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.rv-approve{flex:1.35;min-height:48px;padding:0 12px;background:var(--gold);color:var(--on-gold);
  border-radius:var(--r);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.rv-cut.on,.rv-regen.on{border-color:var(--warm-edge);color:var(--warm-ink)}
/* The footer states the REAL position, and "none published" is a fact about
   this program rather than a count that could drift: nothing here publishes. */
.rv-foot{margin:11px 0 0;text-align:center;color:var(--dim);font-size:10.5px;
  font-variant-numeric:tabular-nums}
@media(min-width:721px){
  /* THE ARTIFACT LIGHTBOX, per the handoff. At desk width the review stops
     being a phone-shaped column and becomes the design's panel: a blurred
     scrim, a 1020px slab, the photograph CONTAINED on its own near-black
     ground, and a 310px column of checks and verdicts beside it. Nothing about
     what it does changes; only where it sits and what it is dressed in. */
  #review{background:var(--overlay);backdrop-filter:blur(6px);display:flex;
    align-items:center;justify-content:center;padding:44px;position:fixed}
  .rv-panel{position:relative}
  @media(prefers-reduced-motion:no-preference){#review{animation:cvfade 160ms linear}}
  .rv-panel{position:relative;inset:auto;width:100%;max-width:1020px;max-height:100%;
    display:grid;grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:auto minmax(0,1fr);
    background:#0B0B0B;border-radius:var(--r-sheet);overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--ring-lift),0 40px 90px rgba(0,0,0,.9)}
  @media(prefers-reduced-motion:no-preference){.rv-panel{animation:cvin 220ms var(--ease)}}
  .rv-img{position:relative;inset:auto;grid-column:1;grid-row:1/-1;width:100%;height:100%;
    max-height:520px;object-fit:contain;background:#060606;align-self:center}
  .rv-top{grid-column:2;grid-row:1;background:none;padding:16px 20px;
    border-bottom:1px solid #171717;align-items:center;gap:10px;flex-wrap:wrap}
  .rv-bottom{grid-column:2;grid-row:2;background:none;padding:20px;overflow-y:auto;
    border-left:0;display:flex;flex-direction:column;gap:16px}
  .rv-panel>.rv-top{border-left:1px solid #171717}
  .rv-panel>.rv-bottom{border-left:1px solid #171717}
  .rv-close{width:30px;height:30px;min-height:30px;margin:0;order:3;font-size:15px;
    position:absolute;top:12px;right:12px}
  .rv-id{order:1;flex:1 1 100%;min-width:0}
  .rv-name{white-space:normal;font-size:15px;line-height:1.3}
  .rv-plate{order:2;flex:none}
  .rv-dots,.rv-caption-wrap,.rv-checks,.rv-acts,.rv-foot{margin:0}
  .rv-checks{background:transparent;border:0;box-shadow:none;padding:0}
  /* Three verdicts, WEIGHTED. Approve is gold, full width and FIRST; the two
     quiet ones share the row under it, with CUT the narrower of the pair
     because a destructive action should not be the easy tap. */
  .rv-acts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .rv-approve,.rv-regen,.rv-cut{flex:none;width:100%;border-radius:var(--r-thumb)}
  .rv-approve{grid-column:1/-1;order:-1;min-height:44px;font-size:11px;letter-spacing:.14em}
  :root[data-theme="light"] .rv-panel{background:var(--panel)}
  :root[data-theme="light"] .rv-img{background:var(--sunken)}
  :root[data-theme="light"] .rv-panel>.rv-top,:root[data-theme="light"] .rv-panel>.rv-bottom{
    border-color:var(--line)}
}
@media(min-width:721px) and (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .rv-panel{background:var(--panel)}
  :root:not([data-theme="dark"]) .rv-img{background:var(--sunken)}
  :root:not([data-theme="dark"]) .rv-panel>.rv-top,
  :root:not([data-theme="dark"]) .rv-panel>.rv-bottom{border-color:var(--line)}
}

/* ----------------------------------------------------------------- toast -- */
/* A centred pill above the composer. One dot in the tint of what happened, one
   sentence, and it leaves at 2600ms. It REPORTS a result; it never asks for
   one, and nothing in this app is only ever said here. */
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:11px;max-width:min(420px,calc(100vw - 32px));
  padding:11px 20px;border-radius:var(--r-pill);background:rgba(9,9,9,.94);
  box-shadow:inset 0 0 0 1px var(--ring-top),0 20px 50px rgba(0,0,0,.8)}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.96);
  box-shadow:inset 0 0 0 1px var(--ring-strong),0 20px 50px rgba(32,28,20,.18)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .toast{
  background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 1px var(--ring-strong),0 20px 50px rgba(32,28,20,.18)}}
@media(prefers-reduced-motion:no-preference){.toast{animation:cvin var(--t) var(--ease-snap)}}
.toast-dot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--gold)}
.toast span{color:#D6D2CA;font-size:12px;font-weight:400;line-height:1.4}
:root[data-theme="light"] .toast span{color:var(--body)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .toast span{color:var(--body)}}
@media(max-width:980px){.toast{bottom:calc(var(--nav-h) + 74px)}}

/* ------------------------------- the phone thread, per 6B ----------------- */
/* THE GOLD LAW, held under pressure, at every width. When a decision is DOCKED
   above the composer, the in-thread card for that same decision must not paint a
   second gold call: the dock IS the call, and two gold approves for one decision
   is exactly the inflation the law exists to stop. The card keeps its action, in
   the quiet register, so the transcript still reads correctly on its own. */
.thread-view .plan-approve{
  background:transparent;border:1px solid var(--line);color:var(--text)}
@media(max-width:980px){
  /* The presence line replaces the seat strip on a phone. Reading owns the
     width; the strip's full content is one tap away in the sheet. */
  .seat-strip{display:none}
  .presence-line:not(.hidden){display:flex}
  /* The decision DOCKS above the composer and never scrolls away. It already
     is a flex sibling of the thread rather than an overlay, so what changes is
     the dress: solid gold, its waiting time on it, actions in thumb reach. */
  .thread-view .decision,.thread-view.room .decision{
    margin:0 var(--rail) 8px;padding:13px 14px 14px;border:0;
    border-radius:var(--r-card);background:var(--gold);color:var(--gold-on)}
  .thread-view .decision .decision-cause{display:flex;align-items:center;gap:8px;
    color:var(--gold-on);opacity:.72;font-size:8.5px;letter-spacing:.15em}
  .thread-view .decision .decision-when{margin-left:auto;letter-spacing:0;
    font-size:10.5px;font-variant-numeric:tabular-nums;text-transform:none}
  .thread-view .decision .decision-body{color:var(--gold-on);font-size:14.5px;font-weight:500}
  .thread-view .decision .decision-acts{margin-top:12px;gap:8px}
  .thread-view .decision .decision-acts .yes{background:var(--gold-on);color:var(--gold);
    min-height:46px}
  .thread-view .decision .decision-acts .no{background:transparent;
    border:1px solid rgba(13,13,13,.45);color:var(--gold-on);min-height:46px}
  /* The composer NAMES THE ENGINE the next message will spend. P10 dropped the
     chip on a phone for width; the design system makes it a rule, so it comes
     back and the estimate stays gone. */
  .composer .eng-chip:not(.hidden){display:inline-flex;order:3}
  #send{order:4}
  .composer .eng-chip{font-size:8.5px;padding:5px 8px;white-space:nowrap}
  /* An artifact is FULL BLEED: edge to edge, out past the conversation rail. */
  .msg.tabled{width:auto;margin-inline:calc(var(--rail) * -1);position:relative}
  .msg.tabled.lead .gallery-head{position:static;margin:0 var(--rail) 8px;width:auto;max-width:none}
  .msg.tabled .shot{width:100%;height:auto;aspect-ratio:4/5;border-radius:0}
  .msg.tabled .shot img{width:100%;height:100%;object-fit:cover}
  /* A band of three or more is a CONTACT SHEET at this width: thumbnails, not
     three full-bleed photographs stacked down the screen. */
  .msg.tabled:not(.lead){width:112px;margin-inline:0}
  .msg.tabled:not(.lead) .shot{aspect-ratio:1;border-radius:var(--r)}
}
.ev-label{display:block;margin-top:7px;color:var(--dim);font-size:8px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}
.blocked-quiet-line{margin:9px 0 0;color:var(--dim2);font-size:13px;font-weight:300;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* The act trace as one line (P12 §6B). The chips are unchanged at desk width. */
@media(max-width:980px){
  .acts.acts-line{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
  .act-sentence{flex:1;min-width:0;color:var(--dim);font-size:11.5px;font-weight:300;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .act-sentence.warn{color:var(--warn)}
  .acts.acts-line .act.trace{flex:none;background:transparent;border:0;color:var(--dim2);
    font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:0 2px}
}

/* A working seat with no countable stage: presence, and no claim of progress. */
.dots{display:inline-flex;align-items:center;gap:4px;flex:none}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--dim);opacity:.5}
@media(prefers-reduced-motion:no-preference){
  .dots i{animation:blip 1.4s ease-in-out infinite}
  .dots i:nth-child(2){animation-delay:.18s}
  .dots i:nth-child(3){animation-delay:.36s}
}
@keyframes blip{0%,100%{opacity:.25}50%{opacity:.9}}

/* --------------------------------------- P18 · ARTIFACT SEARCH + PROMOTE --- */
/* The finder on the ARTIFACTS view is the sidebar's own search control, given
   the view's margins instead of the rail's. One search field in this app, one
   look, wherever it is standing. */
.af-find{margin:18px 0 6px}
.af-row{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line-soft)}
.af-row:hover .lg-l strong{color:var(--gold-ink)}

/* PROMOTE lives under the upload card as a quiet offer, not a call to action:
   it is available on every photograph and wanted on a few, so it reads as an
   affordance until it is opened. */
.promote{margin-top:8px}
.promote-open{min-height:34px;padding:0 10px;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);color:var(--dim2);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase}
.promote-open:hover{color:var(--text);border-color:var(--gold-edge)}
.promote-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.promote-form input{flex:1;min-width:180px;min-height:38px;padding:0 10px;background:var(--sunken);
  border:1px solid var(--line-soft);border-radius:var(--r);color:var(--text);font-size:12.5px;font-weight:300}
.promote-go{min-height:38px;padding:0 14px;background:var(--gold);color:var(--on-gold);border-radius:var(--r);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.promote-form .error{flex-basis:100%;margin:0}
/* The photograph itself on the card, because a label is not a photograph and
   the owner is approving the picture rather than the sentence about it. */
.promote-thumb{display:block;width:100%;max-width:260px;margin-top:10px;border-radius:var(--r);
  border:1px solid var(--line-soft)}

/* ------------------------------------ P19 · RESEARCH + LEARNED DESK NOTES --- */
/* Both reuse the staged-batch card wholesale, because both ARE staged batches
   in every sense that matters: a thing written down, waiting on one tap, with
   its price and its evidence on its own face. What is added here is only what
   those two carry and an image batch does not: a scope line, and a per-line
   decision row. */

/* The scope on a Floor research card. Quieter than the line above it: it is the
   boundary of the question rather than the question. */
.blocked-scope{margin:8px 0 0;color:var(--dim2);font-size:12.5px;font-weight:300;line-height:1.5}

/* PER-LINE DECISIONS. Each row is its own call, so each row gets its own rule,
   its own evidence chip and its own pair of buttons. They are deliberately not
   styled as a list of one card's contents: they are separate decisions that
   happen to have arrived together. */
.blocked-lines{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.blocked-line-row{padding:10px 11px;background:var(--sunken);border:1px solid var(--line-soft);
  border-radius:var(--r)}
.blocked-line-seat{display:block;color:var(--dim2);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase}
.blocked-line-note{margin:6px 0 0;color:var(--text);font-size:13.5px;font-weight:300;line-height:1.5}
.blocked-line-ev{display:block;margin-top:5px;color:var(--dim2);font-size:11px;font-weight:400}
.blocked-line-acts{display:flex;gap:8px;margin-top:9px}
.blocked-line-acts button{min-height:34px;padding:0 12px;font-size:9.5px}

/* The same row inside the transcript card. */
.note-line{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft)}
.note-line:first-of-type{border-top:0;padding-top:0}
.note-ev{display:block;margin-top:5px;color:var(--dim2);font-size:11px;font-weight:400}
.note-done{margin-top:8px;color:var(--dim2);font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase}

/* ============================ P18 EMERGENCY MODE ==========================
   The banner is deliberately the loudest object in the app. A mode that grants
   send authority should be impossible to forget you left on, so it is full
   width, it sits above every surface, it carries the clock, and the way out is
   on it. It exists only while armed; disarmed, the markup is hidden and the
   page is byte-identical to the one that shipped before this phase. */
.emergency-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:9px 16px;background:var(--gold);color:#1A1200;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 1px 0 rgba(0,0,0,.35)}
.emergency-banner.hidden{display:none}
.eb-tag{font-weight:800;letter-spacing:.14em}
.eb-eng,.eb-left{font-weight:600;letter-spacing:.06em;opacity:.82;text-transform:none}
.eb-left{margin-left:auto}
.eb-off{border:1px solid rgba(26,18,0,.45);background:transparent;color:#1A1200;
  padding:3px 12px;border-radius:var(--r-pill);font:inherit;cursor:pointer}
.eb-off:hover{background:rgba(26,18,0,.12)}
.eb-off:disabled{opacity:.5;cursor:default}

/* The card body. The COMPLETE payload, verbatim, in a monospaced block so a
   line break in the copy is a line break on the card. Never truncated: he is
   approving these exact words. */
.ea-kind{margin-top:10px;color:var(--dim2);font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.ea-payload{margin-top:6px;padding:11px 13px;border:1px solid var(--line-soft);
  border-radius:var(--r-thumb);background:var(--sunk,rgba(0,0,0,.18));
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto}
.ea-expiry{margin-top:7px;color:var(--dim2);font-size:11px}

/* The settings panel's log tail. Read-only, newest first, append-only at the
   database level, and it says what happened rather than what a state is. */
.em-pass{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--dim2)}
.em-pass input{padding:7px 10px;border:1px solid var(--line-soft);
  border-radius:var(--r);background:transparent;color:inherit;font:inherit;min-width:200px}
.em-log{margin-top:12px;border-top:1px solid var(--line-soft);padding-top:10px;
  max-height:260px;overflow:auto}
.em-log-row{display:flex;gap:10px;padding:5px 0;font-size:11.5px;line-height:1.5}
.em-log-when{flex:0 0 92px;color:var(--dim2);font-size:10.5px;padding-top:1px}
.em-log-what{flex:1;word-break:break-word}

/* ---- P23 delta 6: the Chief's controls in the thread head ------------------
   No new colours and no new type. Two selects wearing the head's own quiet
   treatment, and the Full Access toggle, which is the only thing here that
   carries decision weight and so is the only thing here that goes gold. */
.chief-controls{display:flex;align-items:center;gap:8px}
.chief-controls.hidden{display:none}
.chief-controls select{padding:5px 8px;border:1px solid var(--line-soft);border-radius:var(--r-micro);
  background:var(--surface,transparent);color:var(--ink);font:inherit;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase}
.chief-controls select:disabled{opacity:.4}
.fa-toggle{font-size:10.5px;letter-spacing:.08em}
.fa-toggle.on{background:var(--gold);color:var(--gold-on);border-color:var(--gold)}
.chief-sheet-open{font-size:10.5px;letter-spacing:.08em}
.chief-sheet-open.hidden{display:none}
.sheet{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.55)}
.sheet.hidden{display:none}
.sheet .sheet-body{width:min(520px,100%);background:var(--panel,#141414);
  border-top:1px solid var(--line-soft);border-radius:var(--r-sheet) var(--r-sheet) 0 0;padding:18px 18px 24px;
  display:flex;flex-direction:column;gap:12px}
.sheet .sheet-body h2{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0}
@media (min-width:480px){.chief-sheet-open{display:none}}
@media (max-width:479px){
  .chief-controls{flex-direction:column;align-items:stretch;gap:10px}
  .chief-controls select,.chief-controls .fa-toggle{width:100%}
}

/* P23 section 5. The published page's one control. Neutral: opening a document
   is not a decision, so it carries no gold. */
.page-open { margin-top: 10px; align-self: flex-start; }