/* ============================================================================
   MeshBoard web app — design system + three-pane layout
   Tokens pinned from meshboard-design/reimagine/design-system/tokens.css.
   Spectrum hues are LOCKED (pink=needs you, gold=in motion, mint=landed,
   violet=waiting, cream=you). Error is never hue-only — always + a shape.
   ========================================================================== */
:root{
  /* grounds (dark — the app default) */
  --bg:#0b1017; --raise:#10161f; --overlay:#141c27; --line:#1c2531; --line-soft:#18202b; --line-hover:#2a3646;
  /* neutrals */
  --ink:#ece7dc; --dim:#8fa3b8; --faint:#55677c;  /* lifted from #7E77A3 so de-emphasized text (kbd, msg author, labels) clears WCAG AA on the dark grounds */
  /* spectrum (locked) */
  --pink:#e08098; --gold:#d4b87f; --mint:#7fd4a3; --violet:#8b7cf6; --err:#d4655c;  /* violet nudged 4% brighter (same hue) so the "Queued" pill + violet links clear AA */
  --cream-grad:linear-gradient(180deg,#f4efe4,#ece7dc);
  --cream:#ece7dc;
  --accent-text:linear-gradient(180deg,#f4efe4,#d9d2c2);  /* the "you" accent is quiet cream now */
  --spectrum:linear-gradient(90deg,var(--gold),var(--pink),var(--violet),var(--mint));
  /* soft tints for backgrounds */
  --pink-soft:rgba(224,128,152,.12); --gold-soft:rgba(212,184,127,.12);
  --mint-soft:rgba(127,212,163,.12); --violet-soft:rgba(139,124,246,.12);
  --err-soft:rgba(212,101,92,.10);
  /* type */
  --sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  /* radii / spacing */
  --rc:16px; --rp:999px; --rs:22px; --rsm:11px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp6:24px; --sp8:32px;
  /* layout */
  --rail-w:264px; --detail-w:420px; --center-max:720px;
  /* shadow / glow */
  --sh-card:0 1px 0 rgba(255,255,255,.02), 0 8px 30px rgba(2,1,12,.5);
  --sh-pop:0 20px 60px rgba(2,1,12,.7), 0 0 0 1px var(--line);
  --bottom-chrome-h:0px;
  --motion-sheet-in:220ms;--motion-sheet-out:140ms;
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--violet);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#FAF4E4; --raise:#FFFFFF; --overlay:#F4EBD6; --line:#E6DCC4; --line-soft:#EFE6D2; --line-hover:#D8CCB0;
    --ink:#1C1633; --dim:#564E7A; --faint:#6A6189;
    --pink:#b3486b; --gold:#7d6534; --mint:#2f7f5e; --violet:#6a58c9; --err:#b3453c;
    --pink-soft:rgba(214,24,111,.09); --gold-soft:rgba(156,106,0,.10);
    --mint-soft:rgba(14,138,123,.10); --violet-soft:rgba(122,46,219,.08);
    --err-soft:rgba(201,47,37,.08);
    --cream-grad:linear-gradient(180deg,#2a2f38,#1c222c);
    --accent-text:linear-gradient(96deg,var(--pink),var(--violet));  /* deepened pink→violet so "you" reads on cream */
    --sh-card:0 1px 2px rgba(40,30,10,.06), 0 6px 18px rgba(40,30,10,.06);
    --sh-pop:0 24px 60px rgba(40,30,10,.18), 0 0 0 1px var(--line);
  }
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
kbd{font:600 10px/1.4 var(--mono);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--faint)}
.hide{display:none!important}
.sp{flex:1}
.dim{color:var(--dim)} .faint{color:var(--faint)} .sm{font-size:13px}
::selection{background:rgba(160,80,255,.35)}
:focus-visible{outline:none;box-shadow:var(--focus)}
.center-scroll::-webkit-scrollbar,.detail-scroll::-webkit-scrollbar,.rail::-webkit-scrollbar,.glass::-webkit-scrollbar{width:9px;height:9px}
.center-scroll::-webkit-scrollbar-thumb,.detail-scroll::-webkit-scrollbar-thumb,.rail::-webkit-scrollbar-thumb,.glass::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* ── dots (state, with shape rules) ── */
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.pink{background:var(--pink);box-shadow:0 0 8px var(--pink)}
.dot.gold{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.dot.mint{background:var(--mint);box-shadow:0 0 7px var(--mint)}
.dot.violet{background:var(--violet);box-shadow:0 0 6px var(--violet);opacity:.9}
.dot.red{background:var(--err);box-shadow:0 0 7px var(--err);border-radius:2px}      /* error = square */
.dot.pulse{animation:pul 1.5s ease-in-out infinite}
@keyframes pul{0%,100%{opacity:.45}50%{opacity:1}}
.pulse-ring{position:relative}
.pulse-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid currentColor;opacity:.0;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.5);opacity:0}}

/* ── pills ── */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--rp);padding:4px 11px;font:600 12px/1 var(--sans);white-space:nowrap}
.pill .pdot{width:7px;height:7px;border-radius:50%}
.pill.gold{background:var(--gold-soft);color:var(--gold)} .pill.gold .pdot{background:var(--gold)}
.pill.pink{background:var(--pink-soft);color:var(--pink)} .pill.pink .pdot{background:var(--pink)}
.pill.mint{background:var(--mint-soft);color:var(--mint)} .pill.mint .pdot{background:var(--mint)}
.pill.violet{background:var(--violet-soft);color:var(--violet)} .pill.violet .pdot{background:var(--violet)}
.pill.red{background:var(--err-soft);color:var(--err)} .pill.red .pdot{background:var(--err);border-radius:2px}
/* light: the pink pill's own --pink-soft tint lifts its ground enough to drop --pink under AA (3.94:1) — deepen just the pink pill's text */
@media (prefers-color-scheme: light){.pill.pink{color:#C2155F}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--rsm);padding:11px 16px;font:600 14px/1 var(--sans);border:1px solid var(--line);background:var(--raise);transition:border-color .15s,transform .12s,background .15s}
.btn:hover{border-color:var(--line-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.cream,.primary{background:#ece7dc;color:#0b1017;border:0;box-shadow:0 0 22px rgba(236,231,220,.22);font-weight:700}
.btn.cream:hover,.primary:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(236,231,220,.34)}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--rsm);padding:13px 18px;width:100%}
.primary:disabled{opacity:.55;box-shadow:none;cursor:default;transform:none}
.btn.ghost{background:transparent}
.btn.small{padding:8px 13px;font-size:13px}
.showmore{display:block;width:100%;margin:6px 0 2px;color:var(--dim);font-size:13px;background:transparent;border:0}
.showmore:hover{color:var(--ink);transform:none}
.worksearch{width:100%;background:var(--raise);border:1px solid var(--line);border-radius:var(--rsm);color:var(--ink);font:inherit;font-size:14px;padding:10px 13px;margin:0 0 14px;outline:none}
.worksearch:focus{border-color:var(--violet)}
.worksearch::placeholder{color:var(--faint)}
.workchips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 11px}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--rp);padding:6px 12px;font:600 12.5px/1 var(--sans);border:1px solid var(--line);background:var(--raise);color:var(--dim)}
.chip:hover{border-color:var(--line-hover);color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .cc{font-size:11px;opacity:.7}
@media (prefers-color-scheme: light){.chip .cc{opacity:.85}}  /* .7 count badge = 3.6:1 on white --raise (sub-AA); .85 -> 5.1:1. dark --raise keeps .7 -> ~5:1 */
.kbds{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.kbd-row{display:flex;align-items:center;gap:14px;padding:9px 4px;border-bottom:1px solid var(--line-soft)}
.kbd-row:last-child{border-bottom:0}
.kbd-row kbd{flex:none;min-width:118px;text-align:center}
.kbd-row span{color:var(--dim);font-size:14px}
.meshmirror{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);margin:0 0 14px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;color:var(--faint);border-radius:9px;width:34px;height:34px;transition:color .15s,background .15s}
.iconbtn:hover{color:var(--ink);background:rgba(255,255,255,.05)}

/* ============================ GATE ============================ */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(1100px 700px at 50% 30%,#101722,#0b1017 62%);color:#ece7dc;color-scheme:dark}
.gate-card{width:100%;max-width:430px;text-align:left;--ink:#ece7dc;--dim:#8fa3b8;--faint:#5c6b7e;
  --raise:rgba(255,255,255,.04);--line:rgba(143,163,184,.24)}
.gate-mark{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:22px;
  background:rgba(11,16,23,.7);border:1px solid rgba(143,163,184,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 30px rgba(0,0,0,.4)}
.gate h1{font:700 32px/1.12 var(--sans);letter-spacing:-.025em;margin:0 0 8px}
.gate h1 .you{background:var(--accent-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate p{color:var(--dim);font-size:15px;line-height:1.6;margin:0 0 22px}
.gate-box{background:linear-gradient(118deg,rgba(255,255,255,.05),transparent 42%),rgba(11,16,23,.6);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(143,163,184,.28);border-radius:18px;padding:20px;
  box-shadow:0 18px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.gate-box label{font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.gate-box input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;color:var(--ink);font:inherit;font-size:15px;padding:13px;outline:none;margin:10px 0 12px}
.gate-box input:focus{border-color:var(--violet)}
.gate-box button{width:100%;background:#ece7dc;color:#0b1017;border:0;border-radius:11px;padding:13px;font-weight:700}
.gate-demo{display:inline-block;margin-top:18px;color:var(--violet);font-size:13.5px}
.gate-demo:hover{text-decoration:underline}
.note{font-size:13px;margin-top:10px;min-height:17px;line-height:1.4}
.note.err{color:var(--err)} .note.ok{color:var(--mint)} .note.dim{color:var(--dim)}

/* ============================ DEMO BAR ============================ */
.demobar{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:9px;max-width:calc(100vw - 24px);white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8fa3b8;background:rgba(11,16,23,.92);border:1px solid rgba(143,163,184,.22);
  border-radius:999px;padding:8px 16px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.demobar b{color:#f4f0e6;font-weight:600;letter-spacing:.14em}
.demobar-dot{width:6px;height:6px;border-radius:50%;background:#7fce9e;flex:none;
  box-shadow:0 0 8px rgba(127,206,158,.7)}
.demobar-note{color:#8fa3b8}
.demobar-note::before{content:"·";margin-right:9px}
.demobar-cta{color:#a9e3c3;font-weight:600}
.demobar-cta::before{content:"·";margin-right:9px;color:#8fa3b8;font-weight:400}
@media(max-width:1280px){.demobar-note{display:none}}
@media(max-width:1000px){body.demo.floor-mode .floor-chrome-top{display:none}}
body.demo.floor-mode .app{top:0}
.demo-presets{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:6px}
.demo-presets a{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8fa3b8;text-decoration:none;background:rgba(11,16,23,.85);border:1px solid rgba(143,163,184,.16);
  border-radius:999px;padding:5px 11px;white-space:nowrap}
.demo-presets a:hover{color:#ece7dc;border-color:rgba(143,163,184,.4)}
.demo-presets a.on{color:#0b1017;background:#ece7dc;border-color:#ece7dc;font-weight:600}
@media (max-width:560px){
  .demo-presets{gap:5px;max-width:calc(100vw - 12px);overflow-x:auto;scrollbar-width:none}
  .demo-presets::-webkit-scrollbar{display:none}
  .demo-presets a{font-size:8.5px;letter-spacing:.1em;padding:5px 9px}
}

/* ============================ EMBED MODE ============================ */
/* ?embed=1 (see the boot <script> in index.html): a presentation-only skin
   for iframing the live demo on meshboard.ai. Top-level nav chrome hides;
   a small corner link points back at the full, un-iframed demo. */
html.embed .rail,
html.embed .center-top,
html.embed .botnav,
html.embed .demobar,
html.embed .demo-presets{display:none}
html.embed .app{grid-template-columns:minmax(0,1fr)!important}
.embed-open{display:none}
html.embed .embed-open{position:fixed;right:16px;bottom:16px;z-index:96;display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--bg);box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .14s cubic-bezier(.2,0,0,1),box-shadow .14s cubic-bezier(.2,0,0,1)}
.embed-open:hover{transform:translateY(-1px);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.embed-open:active{transform:scale(.97)}

/* ── the decision glass: the world stays; the decision materializes over it ── */
/* glass is a dark world regardless of the OS scheme: re-pin every token the
   light override redefines, so nothing rendered inside glass can follow it.
   */
.floor-glass{
  --bg:transparent;--raise:rgba(255,255,255,.05);--overlay:rgba(255,255,255,.06);
  --line:rgba(143,163,184,.22);--line-soft:rgba(143,163,184,.14);--line-hover:rgba(143,163,184,.4);
  --ink:#ece7dc;--dim:#8fa3b8;--faint:#5c6b7e;
  --pink:#e08098;--gold:#d4b87f;--mint:#7fd4a3;--violet:#8b7cf6;--err:#d4655c;
  --pink-soft:rgba(224,128,152,.12);--gold-soft:rgba(212,184,127,.12);
  --mint-soft:rgba(127,212,163,.12);--violet-soft:rgba(139,124,246,.12);--err-soft:rgba(212,101,92,.10);
  --accent-text:linear-gradient(180deg,#f4efe4,#d9d2c2);
  --sh-card:0 1px 0 rgba(255,255,255,.02),0 8px 30px rgba(2,1,12,.5);
  --sh-pop:0 20px 60px rgba(2,1,12,.7),0 0 0 1px var(--line);
  color-scheme:dark;
}
.floor-glass .pill.pink{color:#e08098}  /* counters the light-mode literal at the glass boundary */
.floor-glass .code{background:#04020F;color:#7fd4a3}  /* same: .code has a light literal */
/* flat-era flight-deck islands (.streampeek/.glass) re-set their own light
   token sets — inside glass they must speak the one dark language */
.floor-glass .streampeek,.floor-glass .glass{background:rgba(5,8,13,.72);
  --ink:#ece7dc;--dim:#8fa3b8;--faint:#5c6b7e;--gold:#d4b87f;--mint:#7fd4a3;--violet:#8b7cf6}
.floor-glass{position:absolute;top:88px;right:16px;bottom:16px;width:min(410px,calc(100vw - 32px));
  z-index:6;display:flex;flex-direction:column;gap:12px;padding:18px 18px 14px;overflow-y:auto;
  color:#ece7dc;background:linear-gradient(118deg,rgba(255,255,255,.05),transparent 42%),rgba(11,16,23,.56);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid rgba(143,163,184,.3);border-radius:16px;box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09);
  opacity:0;transform:translateX(14px);transition:opacity .22s ease,transform .22s ease;color-scheme:dark}
.floor-glass.on{opacity:1;transform:none}
.fg-head{display:flex;align-items:center;justify-content:space-between}
.fg-kicker{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#e08098}
.fg-dot{width:6px;height:6px;border-radius:50%;background:#e08098;box-shadow:0 0 9px rgba(224,128,152,.8)}
.fg-x{background:none;border:0;color:#8fa3b8;font-size:14px;cursor:pointer;padding:4px}
.fg-x:hover{color:#ece7dc}
.fg-q{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:#f4f0e6}
.fg-blast{font-size:13.5px;line-height:1.6;color:#b9c4d4}
.fg-ev{display:flex;gap:10px;align-items:baseline;font-size:12.5px;color:#c6cdd6;
  background:rgba(255,255,255,.035);border:1px solid rgba(143,163,184,.16);border-radius:10px;padding:10px 12px}
.fg-ev span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8fa3b8;flex:none}
.fg-stream{font-family:var(--mono);font-size:11px;line-height:1.7;background:rgba(5,8,13,.72);
  border:1px solid rgba(143,163,184,.14);border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.fg-row{display:flex;gap:10px;color:#c6cdd6}
.fg-row i{font-style:normal;color:#5c6b7e;flex:none}
.fg-choices{display:grid;gap:8px;margin-top:2px}
.floor-glass .choice{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;text-decoration:none;cursor:pointer;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(143,163,184,.22);color:#ece7dc}
.floor-glass .choice:hover{border-color:rgba(236,231,220,.45)}
.floor-glass .choice.go{border-color:rgba(127,206,158,.55);background:rgba(127,206,158,.07)}
.floor-glass .choice .cl{display:block;font-weight:600;font-size:14px;color:#f4f0e6}
.floor-glass .choice .cc{display:block;font-size:12px;color:#8fa3b8;margin-top:2px}
.floor-glass .choice .ck{font-family:var(--mono);font-size:11px;color:#5c6b7e;flex:none}
.fg-foot{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#5c6b7e;margin-top:auto;padding-top:6px}
.fg-foot a{color:#8fa3b8;text-decoration:none}
.fg-foot a:hover{color:#ece7dc}
.fg-kicker.fg-steel{color:#8fa3b8}
.fg-dot-steel{background:#8fa3b8;box-shadow:0 0 9px rgba(143,163,184,.7)}
.fg-need{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  cursor:pointer;padding:12px 14px;border-radius:12px;background:rgba(224,128,152,.08);
  border:1px solid rgba(224,128,152,.4);color:#f4f0e6;font-size:13.5px;font-weight:600}
.fg-need:hover{border-color:rgba(224,128,152,.75)}
.fg-need b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#e08098;font-weight:600;flex:none}
.fg-sect{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#5c6b7e;
  margin-top:6px;padding-top:10px;border-top:1px solid rgba(143,163,184,.12)}
.fg-task{display:flex;align-items:center;gap:9px;font-size:13px;color:#c6cdd6}
.fg-task .fg-tdot{width:5px;height:5px;border-radius:50%;background:#d4b87f;flex:none;box-shadow:0 0 7px rgba(212,184,127,.7)}
.fg-task i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#5c6b7e;margin-left:auto;flex:none}
.fg-receipt{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#8fce9e}
/* chat adopted into the glass: dark voice over the living world */
.floor-glass-chat{width:min(460px,calc(100vw - 32px));padding:14px 14px 12px}
.fg-host{flex:1;min-height:0;display:flex;flex-direction:column}
.fg-host #view-chat{display:block!important;flex:1;min-height:0;overflow-y:auto;padding:0;background:transparent}  /* overflow:hidden here silently killed TOUCH scrolling (programmatic scrollTop still worked — every probe passed, every thumb failed) */
.fg-host .chat{height:100%;display:flex;flex-direction:column;background:transparent;max-width:none;padding:0}
.fg-host .chat-msgs{flex:1;min-height:0;overflow-y:auto;background:transparent}
.fg-host .chat-msgs .who{color:#8fa3b8}
/* in chat, a work reference is a receipt: header + latest line; the full
   stream lives one tap away instead of parking a work card mid-thread */
.fg-host .chat-context .streampeek-rows{display:flex;flex-direction:column-reverse;max-height:27px;overflow:hidden}
.fg-host .chat-context{width:min(560px,96%);margin:2px 0}
.fg-host .chat-msgs .msg-text{color:#e9e4d8}
/* conversation children (.msg/.sysline/.day/.moment/.streampeek) each own their
   look — no blanket card on chat rows (it double-boxed every reply). */
.fg-host .chat-composer{background:transparent;border-top:0;padding-top:4px}
.fg-host .composer-capsule .ta,.fg-host .composer-capsule .ta:focus{background:none;border:0;box-shadow:none;color:#ece7dc;color-scheme:dark}
.fg-host .chat-composer .ta::placeholder{color:#5c6b7e}
/* adopted legacy views inside glass: the flat era, restyled dark */
.floor-glass-view{width:min(620px,calc(100vw - 32px))}
.fg-host [id^=view-]{display:block!important;flex:1;min-height:0;overflow-y:auto;padding:0;background:transparent;
  width:100%;max-width:none;margin:0;overscroll-behavior:contain}  /* .view's margin:0 auto defeats flex stretch — the view must fill the sheet, never size to max-content; contain stops scroll-chaining from confusing iOS gesture arbitration */
.fg-host .center-scroll,.fg-host .view{background:transparent}
.fg-host .card,.fg-host .needchip{background:rgba(255,255,255,.045);border:1px solid rgba(143,163,184,.18);color:#e9e4d8;box-shadow:none}
.fg-host .card b,.fg-host .card .nc-t,.fg-host h2,.fg-host h3{color:#f4f0e6}
.fg-host .card .dim,.fg-host .sub,.fg-host .k{color:#8fa3b8}
.fg-host .needchip{background:rgba(224,128,152,.08);border-color:rgba(224,128,152,.4)}
.fg-host input.search,.fg-host .search input,.fg-host input[type=search],.fg-host .ta{background:rgba(5,8,13,.7);border:1px solid rgba(143,163,184,.22);color:#ece7dc;color-scheme:dark}
/* ledger grammar: filter chips speak ghost-mono (scheme-invariant — root
   vars follow the OS scheme and leaked cream pills into dark glass) */
.fg-host .chip{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8fa3b8;background:rgba(255,255,255,.045);border:1px solid rgba(143,163,184,.28);border-radius:999px;padding:8px 12px}
.fg-host .chip:hover{color:#ece7dc;border-color:rgba(143,163,184,.5)}
.fg-host .chip.on{background:#ece7dc;color:#0b1017;border-color:#ece7dc}
.fg-host .chip .cc{opacity:.75;font-size:10px}
.fg-host .worksearch{border-radius:999px;padding:10px 16px}
.fg-host .worksearch:focus{border-color:rgba(127,206,158,.55);box-shadow:0 0 0 3px rgba(127,206,158,.12);outline:none}
.fg-host .band,.fg-host .band-h{color:#5c6b7e}
.fg-host .empty{color:#8fa3b8}
.fg-host .glass,.fg-host .streampeek{background:rgba(5,8,13,.72);border:1px solid rgba(143,163,184,.14)}
.fg-host .choice{background:rgba(255,255,255,.04);border:1px solid rgba(143,163,184,.22);color:#ece7dc}
.fg-host .choice.go{border-color:rgba(127,206,158,.55);background:rgba(127,206,158,.07)}
.fg-host .stream-dock{background:rgba(255,255,255,.045);border-color:rgba(143,163,184,.2);box-shadow:none}
.fg-host .stream-dock b,.fg-host .stream-dock .t{color:#f4f0e6}
.fg-host .filters,.fg-host .chips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media(max-width:720px){.floor-glass-view{max-height:86dvh}}
.fg-host .dec{background:rgba(255,255,255,.045);border:1px solid rgba(224,128,152,.4);border-radius:14px;box-shadow:none}
.fg-host .dec .q{color:#f4f0e6}
.fg-host .dec .blast{color:#b9c4d4}
.fg-host .glass,.fg-host .streampeek{background:rgba(5,8,13,.72);border:1px solid rgba(143,163,184,.16)}
.fg-host .btn.ghost{color:#ece7dc;border-color:rgba(143,163,184,.4)}
.fg-host .minicard{background:rgba(255,255,255,.04);border:1px solid rgba(143,163,184,.16)}
@media(max-width:720px){
  /* the world never pans: lock the document outright on phones so no zoom,
     rubber-band, or focus-scroll can shift the page container */
  body.floor-mode{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
  /* --kb tracks the real keyboard inset via visualViewport — the sheet rides
     above the keyboard instead of losing its bottom behind it (dvh ignores
     the iOS keyboard entirely) */
  .floor-glass{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;
    max-height:calc(100dvh - 120px);
    border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;z-index:75;
    padding:8px 16px calc(14px + max(10px, env(safe-area-inset-bottom)));
    transform:translate3d(0,24px,0);transition:opacity .22s ease}
  /* the sheet HUGS the visible viewport via transform — transforms never
     resize the scroller (resizing one mid-gesture is what makes iOS cancel
     scrolls), and untransitioned tracking can never flip-flop */
  .floor-glass.on{transform:translate3d(0,calc(-1 * var(--kb,0px)),0)}
  .floor-glass::before{content:"";display:block;width:38px;height:4.5px;border-radius:999px;
    background:rgba(143,163,184,.4);margin:2px auto 10px;flex:none}
  body.sheet-up .botnav{transform:translateY(110%)}
  body.sheet-up .floor-ask,body.sheet-up .floor-beam-chip,body.sheet-up .floor-hint{opacity:0;pointer-events:none}
  body.sheet-up .toast{bottom:auto;top:calc(max(12px, env(safe-area-inset-top)) + 58px)}
  /* the sheet owns the screen: world labels AND the stats line yield
     (important beats the engine's per-frame inline opacity) instead of
     painting through or bleeding into the frosted sheet edge */
  body.sheet-up .floor-label,body.sheet-up .floor-you,body.sheet-up .floor-sky{opacity:0!important;pointer-events:none!important}
  /* iOS Safari auto-zooms any focused input under 16px and the page stays
     zoomed after the keyboard closes — every in-world input holds the line */
  .floor-glass input,.floor-glass textarea,.floor-glass select,.sheet input,.sheet textarea{font-size:16px!important}
  /* the sheet scrolls as one surface; its header never scrolls away */
  .floor-glass .fg-head{position:sticky;top:0;z-index:3;background:rgba(11,16,23,.82);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    margin:0 -16px;padding:4px 16px 8px;border-radius:0}
  /* evidence reads as a stacked receipt on phones: kicker line, then value */
  .floor-glass .dec .ev{flex-wrap:wrap;row-gap:4px}
  .floor-glass .dec .ev .evk{flex-basis:100%}
  .fg-host{overflow-x:hidden;max-width:100%}
  .fg-host *{min-width:0}
  .fg-host .card,.fg-host .needchip{flex-wrap:wrap;row-gap:6px;white-space:normal}
  .fg-host .needchip .go,.fg-host .card .go{white-space:normal;text-align:left;margin-left:0;flex-basis:100%}
  .fg-host .glass,.fg-host .streampeek,.fg-host .stream-dock{max-width:100%;overflow-x:auto}
  .floor-glass{-webkit-user-select:text;user-select:text}
}
body.demo.floor-mode .floor-sky{top:92px}
body.demo .app{top:34px}

/* ============================ APP SHELL (3-pane) ============================ */
.app{position:fixed;inset:0;display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr) 0;transition:grid-template-columns .2s ease}
.app.rail-collapsed{grid-template-columns:0 minmax(0,1fr) 0}

/* ── LEFT RAIL ── */
.rail{grid-column:1;display:flex;flex-direction:column;min-height:0;background:var(--bg);border-right:1px solid var(--line);overflow:hidden}
.app.rail-collapsed .rail{display:none}
.app.rail-collapsed #railOpen{display:inline-flex!important}  /* keep an expand affordance when the rail is collapsed (desktop); !important to beat .hide */
.rail-top{display:flex;align-items:center;height:58px;padding:0 14px 0 31px;gap:8px}
.mark{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;font-size:15px;text-transform:uppercase}
.mark i{width:16px;height:16px;flex:none}
.rail-collapse{margin-left:auto}
.ask-btn{margin:2px 14px 12px;display:flex;align-items:center;gap:10px;background:var(--cream-grad);color:#0b1017;border-radius:var(--rp);padding:11px 16px;font-weight:700;font-size:14.5px;box-shadow:0 0 22px rgba(236,231,220,.2);position:relative;overflow:hidden;isolation:isolate;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease}
.ask-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 28%,rgba(255,255,255,.42) 42%,transparent 57%);transform:translateX(-125%);opacity:0;pointer-events:none;z-index:-1}
.ask-btn .ask-plus{width:18px;display:grid;place-items:center;font-size:17px;line-height:1;transform:translateY(-1px)}
.ask-btn kbd{margin-left:auto;background:rgba(42,5,24,.14);border-color:transparent;color:#5a1430}
.ask-btn:hover{box-shadow:0 0 30px rgba(255,143,176,.4);transform:translateY(-1px)}
.ask-btn.is-opening,.ask-btn.is-sent{transform:translateY(-2px) scale(1.018);box-shadow:0 10px 34px rgba(255,143,176,.44),0 0 0 1px rgba(255,255,255,.16) inset}
.ask-btn.is-opening::after,.ask-btn.is-sent::after{animation:sheenSweep .52s ease-out}
.nav{display:flex;flex-direction:column;padding:0 10px;gap:1px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--dim);font-weight:600;font-size:14.5px;position:relative}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.nav-item.on{background:var(--overlay);color:var(--ink)}
.nav-item .nav-lbl{flex:1}
.nav-item kbd{opacity:0;transition:opacity .15s}
.nav-item:hover kbd{opacity:1}
.nav-ico{width:17px;height:17px;flex:none;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;opacity:.85}
.nav-ico[data-ico="floor"]{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M3%2018h18M6%2013h12M9%208h6%22/%3E%3Cpath%20d=%22M12%205v14%22%20opacity=%22.5%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%221.8%22%20stroke-linecap=%22round%22%3E%3Cpath%20d=%22M3%2018h18M6%2013h12M9%208h6%22/%3E%3Cpath%20d=%22M12%205v14%22%20opacity=%22.5%22/%3E%3C/svg%3E")}
.nav-ico[data-ico="work"]{-webkit-mask-image:var(--ico-work);mask-image:var(--ico-work)}
.nav-ico[data-ico="decisions"]{-webkit-mask-image:var(--ico-dec);mask-image:var(--ico-dec)}
.nav-ico[data-ico="mesh"]{-webkit-mask-image:var(--ico-mesh);mask-image:var(--ico-mesh)}
.nav-ico[data-ico="chat"]{-webkit-mask-image:var(--ico-chat);mask-image:var(--ico-chat)}
:root{
  --ico-work:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h10"/></svg>');
  --ico-dec:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 21l-5-2.8 1-5.5-4-3.9 5.5-.8z"/></svg>');
  --ico-mesh:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="5" r="2.2"/><circle cx="5" cy="18" r="2.2"/><circle cx="19" cy="18" r="2.2"/><path d="M12 7v4m0 0l-5.5 5M12 11l5.5 5"/></svg>');
  --ico-chat:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.3A8 8 0 1 1 21 12z"/></svg>');
}
.rail-section{padding:14px 10px 0;display:flex;flex-direction:column;min-height:0}
.rail-grow{flex:1;overflow:auto}
.rail-h{font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:0 8px 9px}
.rail-list{display:flex;flex-direction:column;gap:2px}
.rail-inbox-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer;border:1px solid transparent;position:relative}
.rail-inbox-item:hover{background:var(--pink-soft);border-color:rgba(255,77,155,.3)}
.rail-inbox-item .ri-t{font:600 13px/1.3 var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-thread{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;cursor:pointer;color:var(--dim);position:relative}
.rail-thread:hover,.rail-thread.on{background:rgba(255,255,255,.04);color:var(--ink)}
.rail-thread .rt-t{font:500 13px/1.3 var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-managed{user-select:none;touch-action:none;transition:background .12s ease,border-color .12s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease}
.rail-managed:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.rail-dragging{opacity:.86;transform:scale(1.012);z-index:3;box-shadow:0 10px 24px rgba(2,1,12,.22),0 0 0 1px var(--line-hover)}
.rail-drop-before::before,.rail-drop-after::after{content:"";position:absolute;left:10px;right:10px;height:2px;border-radius:999px;background:var(--mint);box-shadow:0 0 12px rgba(77,221,208,.45);z-index:4}
.rail-drop-before::before{top:-2px}
.rail-drop-after::after{bottom:-2px}
.rail-list.rail-drag-active{border-radius:10px}
.rail-list.rail-drop-invalid{outline:1px dashed rgba(255,98,89,.55);outline-offset:4px}
.rail-more{margin-left:auto;width:25px;height:25px;border-radius:8px;color:var(--faint);display:grid;place-items:center;font:800 15px/1 var(--sans);opacity:0;transform:translateX(2px);transition:opacity .12s ease,background .12s ease,color .12s ease,transform .12s ease;flex:0 0 auto}
.rail-managed:hover .rail-more,.rail-managed:focus .rail-more,.rail-managed:focus-within .rail-more,.rail-more:focus-visible{opacity:1;transform:none}
.rail-more:hover,.rail-more:focus-visible{background:var(--overlay);color:var(--ink);outline:0}
.rail-menu{position:fixed;z-index:110;min-width:178px;background:var(--raise);border:1px solid var(--line);border-radius:13px;padding:6px;box-shadow:var(--sh-pop)}
.rail-menu button{display:block;width:100%;text-align:left;border-radius:9px;padding:9px 10px;color:var(--dim);font:600 13.5px/1 var(--sans)}
.rail-menu button:hover,.rail-menu button:focus-visible{background:var(--overlay);color:var(--ink);outline:0}
.rail-menu button.danger{color:#ff8d86}
.rail-menu button.danger:hover,.rail-menu button.danger:focus-visible{background:var(--err-soft);color:#ff6259}
.rail-dropflash{animation:railDropFlash .38s ease}
@keyframes railDropFlash{0%{box-shadow:0 0 0 0 rgba(70,246,199,.34);background:var(--mint-soft)}100%{box-shadow:0 0 0 10px rgba(70,246,199,0)}}
.rail-empty{font-size:12.5px;color:var(--faint);padding:2px 8px 8px;line-height:1.5}
.rail-foot{margin-top:auto;border-top:1px solid var(--line);padding:8px}
.rail-scrim{display:none}
.profile{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:10px}
.profile:hover{background:rgba(255,255,255,.04)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--overlay);display:grid;place-items:center;font:700 12px/1 var(--sans);color:var(--ink);border:1px solid var(--line)}
.profile-name{flex:1;text-align:left;font:600 13.5px/1 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-cog{color:var(--faint)}

/* ── CENTER ── */
.center{grid-column:2;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.center-top{display:flex;align-items:center;gap:12px;height:58px;padding:0 22px;border-bottom:1px solid var(--line-soft);background:rgba(6,3,30,.6);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
@media (prefers-color-scheme: light){.center-top{background:rgba(250,244,228,.7)}}
.center-title{font:700 18px/1 var(--sans);letter-spacing:-.01em;margin:0}
.center-scroll{flex:1;overflow:auto;padding:22px 22px 120px}
.center-inner,.view{max-width:var(--center-max);margin:0 auto}
.view{display:block}

/* bands */
.bandlbl{font:600 12px/1 var(--sans);color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin:26px 2px 12px;display:flex;align-items:center;gap:9px}
.bandlbl:first-child{margin-top:2px}
.bandlbl .ct{color:var(--faint);font-weight:600}
.surf-h{font:700 26px/1.1 var(--sans);letter-spacing:-.02em;margin:0 2px 4px}
.surf-sub{color:var(--dim);font-size:14px;margin:0 2px 8px}

/* ── cards ── */
.card{appearance:none;width:100%;background:var(--raise);border:1px solid var(--line);border-radius:var(--rc);padding:14px 16px;margin-bottom:10px;display:block;box-shadow:var(--sh-card);transition:border-color .16s,transform .14s;cursor:pointer;color:var(--ink);font:inherit;text-align:left}
.card:hover{border-color:var(--line-hover);transform:translateY(-1px)}
.card:focus-visible,.choice:focus-visible,.chip:focus-visible,.nav-item:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.card.sel{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),var(--sh-card)}
.crow{display:flex;align-items:center;gap:11px}
.t{font:600 15.5px/1.34 var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{color:var(--faint);font-size:17px}
.m{font:400 13px/1.5 var(--sans);color:var(--dim);margin-top:4px}
.r{font:500 12.5px/1.5 var(--mono);color:var(--dim);margin-top:7px}
.r .ok{color:var(--mint)} .r a{color:var(--mint)}
.phase{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font:500 13px/1 var(--sans)}
.phase .pulse{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.elapsed{margin-left:auto;color:var(--faint);font:500 12px/1 var(--mono)}

/* compact Watch-live previews on scan surfaces */
.streampeek{margin-top:12px;background:#050315;border:1px solid rgba(255,195,74,.24);border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.streampeek.decision{margin:12px 0 14px}
.streampeek.mesh,.streampeek.chat{margin-top:10px}
@media (prefers-color-scheme: light){.streampeek{background:#0d0a22;--ink:#F4F1FF;--dim:#B9B3D6;--faint:#8580B3;--gold:#FFC34A;--mint:#4DDDD0;--violet:#A050FF}}
.streampeek-h{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,.025);border-bottom:1px solid rgba(255,255,255,.05);color:var(--dim);font:600 10.5px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.streampeek-h .dot{width:7px;height:7px}
.stream-meta{min-width:0;flex:1;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:0;font:500 11px/1 var(--sans)}
.stream-open{flex:none;color:var(--gold);font:600 11px/1 var(--sans);white-space:nowrap;background:none;border:0;padding:0;appearance:none}
.stream-open[data-stream-open]{cursor:pointer}
button.stream-open:hover,.stream-open[data-stream-open]:hover{text-decoration:underline}
button.stream-open:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.streampeek-rows{max-height:104px;overflow:hidden}
.streampeek .grow-row{padding:6px 10px;gap:7px;font-size:11.5px;line-height:1.45}
.streampeek .grow-row .gt{width:38px}
.stream-dock{border:1px solid rgba(255,195,74,.18);background:linear-gradient(145deg,rgba(255,195,74,.08),var(--raise) 52%,rgba(160,80,255,.08));border-radius:var(--rc);padding:13px;box-shadow:var(--sh-card);min-width:0}
.mesh-stream-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:12px}
.stream-dock-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 12px}
.stream-eyebrow{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.stream-title{font:700 14.5px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stream-route{grid-column:1/-1;color:var(--dim);font:500 12.5px/1.25 var(--sans);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* waiting chip (Work band 1 — pointer only, never the question) */
.needchip{display:flex;align-items:center;gap:11px;border-color:rgba(255,77,155,.4);background:linear-gradient(135deg,var(--pink-soft),var(--raise) 70%)}
.needchip .nc-t{font:600 14.5px/1.3 var(--sans);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.needchip .go{margin-left:auto;color:var(--pink);font:600 13px/1 var(--sans);white-space:nowrap}

/* device / mini cards */
.dev{display:flex;align-items:center;gap:12px}
.dev .nm{font:600 15px/1.3 var(--sans)} .dev .meta{font:400 12.5px/1.4 var(--sans);color:var(--faint);margin-top:2px}
.dot.active{background:var(--mint);box-shadow:0 0 7px var(--mint)}
.dot.joining{background:var(--gold);animation:pul 1.5s ease-in-out infinite}
.dot.idle,.dot.sleeping{background:var(--violet);opacity:.55}
.dot.away{background:var(--faint);box-shadow:none}
.minicard{background:var(--raise);border:1px solid var(--line);border-radius:var(--rc);padding:15px 16px;margin-bottom:10px;box-shadow:var(--sh-card)}
.minicard .k{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.minicard .v{font:400 14px/1.55 var(--sans);color:var(--dim)} .minicard .v b{color:var(--ink)}
.code{background:#04020F;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:13px/1.5 var(--mono);color:var(--mint);overflow-x:auto;white-space:nowrap}
@media (prefers-color-scheme: light){.code{background:#0d2c28;color:#bfeee6}}
.mono{font-family:var(--mono);font-size:.92em}
/* API-key rows in settings */
.akrow{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--raise);margin-bottom:8px}
.akrow.revoked{opacity:.55}
.akrow .akmain{min-width:0;flex:1}
.akrow .aknm{font:600 14px/1.3 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akrow .akmeta{font:400 12px/1.4 var(--mono);color:var(--faint);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akwarn{border-color:rgba(245,200,90,.5)}
.akwarn .k{color:var(--gold)}
/* Plans comparison */
.plans{display:flex;flex-direction:column;gap:10px}
.plancard{border:1px solid var(--line);border-radius:14px;padding:14px 15px;background:var(--raise)}
.plancard.on{border-color:var(--violet);background:var(--violet-soft)}
.plantitle{font:600 15px/1.2 var(--sans);color:var(--ink);margin-bottom:9px}
.planfeat{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.5 var(--sans);color:var(--dim);margin:3px 0}
.planfeat .pf-c{color:var(--mint);font-weight:700;flex:none}
.plancur{font:600 12px/1 var(--sans);color:var(--violet);text-transform:uppercase;letter-spacing:.06em}
.copy{margin-top:9px}
.install-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin-bottom:12px}
.install-command-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
.install-command-row .copy{margin-top:0;height:38px}
.install-meta{font:500 11.5px/1.4 var(--sans);color:var(--faint);margin-top:8px}
.install-status{display:inline-flex;align-items:center;justify-content:center;min-height:25px;padding:0 10px;border-radius:var(--rp);font:700 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);background:var(--raise);color:var(--dim);white-space:nowrap}
.install-status.ready{border-color:rgba(77,221,208,.36);background:var(--mint-soft);color:var(--mint)}
.install-status.demo,.install-status.loading{border-color:rgba(255,195,74,.34);background:var(--gold-soft);color:var(--gold)}
.install-status.error{border-color:rgba(255,98,89,.38);background:var(--err-soft);color:var(--err)}
.install-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}
.install-steps span{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:11px;background:var(--raise);padding:8px 9px;color:var(--dim);font:600 12px/1.2 var(--sans);white-space:nowrap}
.install-steps b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--overlay);color:var(--ink);font:700 10px/1 var(--sans);flex:none}
.model-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.model-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:10px}
.metric-card{min-width:0}
.metric-big{font:700 26px/1 var(--sans);color:var(--ink);margin:6px 0 7px;font-variant-numeric:tabular-nums}
.ops-grid{align-items:stretch}
.ops-metric{display:flex;flex-direction:column}
.ops-metric .metric-big{margin-bottom:5px}
.metric-sub{font:700 12.5px/1.25 var(--sans);color:var(--ink);margin-bottom:5px}
.model-lanes{padding-bottom:12px}
.model-lanes-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.lane-list{display:flex;flex-direction:column;gap:8px}
.lane-row{display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:12px;background:var(--raise);padding:10px 11px}
.lane-row .dot{margin-top:4px;flex:none}
.lane-row b{display:block;font:600 13.5px/1.25 var(--sans);color:var(--ink)}
.lane-row span:not(.dot){display:block;font:400 12px/1.4 var(--sans);color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.machine-hero{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);background:var(--raise);border-radius:14px;padding:13px 14px;margin-bottom:10px}
.machine-hero b{display:block;font:700 15px/1.25 var(--sans);color:var(--ink);text-transform:capitalize}
.machine-hero span:last-child{display:block;font:400 12.5px/1.45 var(--sans);color:var(--dim);margin-top:3px}

/* money story */
.money-panel{overflow:hidden}
.money-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.money-hero{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:5px}
.money-big{font:700 30px/1 var(--sans);color:var(--mint);font-variant-numeric:tabular-nums}
.money-badge{flex:none;border:1px solid rgba(160,80,255,.28);background:var(--violet-soft);color:var(--violet);border-radius:var(--rp);padding:7px 10px;font:700 11px/1 var(--sans);white-space:nowrap}
.money-bar{height:8px;border-radius:var(--rp);background:var(--overlay);overflow:hidden;margin:14px 0 8px;display:flex}
.money-bar i{height:100%;display:block}
.money-bar .local{background:var(--mint)} .money-bar .cloud{background:var(--violet)}
.money-legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--faint);font:500 11.5px/1.35 var(--sans);margin-bottom:10px}
.money-legend span{display:inline-flex;align-items:center;gap:6px}
.money-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.money-legend .local{background:var(--mint)} .money-legend .cloud{background:var(--violet)}
.credit-bar{height:6px;border-radius:var(--rp);background:var(--overlay);overflow:hidden;margin:8px 0 4px}
.credit-bar i{display:block;height:100%;background:var(--gold)}
.money-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.money-metric{border:1px solid var(--line);border-radius:12px;background:var(--raise);padding:10px 11px;min-width:0}
.money-metric .mk{font:700 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.money-metric .mv{font:700 18px/1.1 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.money-metric .md{font:400 11.5px/1.35 var(--sans);color:var(--dim);margin-top:4px}
.money-note{border-top:1px solid var(--line-soft);margin-top:12px;padding-top:10px;color:var(--dim);font:500 12.5px/1.45 var(--sans)}

/* ── empty / skeleton ── */
.empty{text-align:center;padding:56px 20px;color:var(--dim);max-width:420px;margin:0 auto}
.empty>.pearl,.welcome .pearl{width:44px;height:44px;margin:0 auto 18px}
.empty .exs{justify-content:center}
.empty .big{font:600 19px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.empty p{font-size:14.5px;line-height:1.55;margin:0 0 6px}
.empty .exs{margin-top:18px}
/* post-payment welcome (persistent confirmation sheet) */
.welcome{text-align:center;padding:10px 6px}

.welcome h2{margin:0 0 10px}
.welcome p{color:var(--dim);font:400 14.5px/1.55 var(--sans);margin:0 auto 22px;max-width:380px}
.skel{height:66px;border-radius:var(--rc);background:linear-gradient(90deg,var(--raise),var(--overlay),var(--raise));background-size:200% 100%;animation:sh 1.3s linear infinite;margin-bottom:10px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================ DETAIL PANE ============================ */
.detail-scroll{flex:1;overflow:auto;padding:18px 18px 80px}
.detail-title{font:700 20px/1.25 var(--sans);letter-spacing:-.01em;margin:10px 0 12px}
.detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* the story timeline */
.story{position:relative;margin:8px 0 4px;padding-left:22px}
.story::before{content:"";position:absolute;left:6px;top:6px;bottom:10px;width:2px;background:var(--line)}
.beat{position:relative;padding:0 0 16px}
.beat::before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--violet);border:2px solid var(--bg)}
.beat.now::before{background:var(--gold);animation:pul 1.5s ease-in-out infinite}
.beat.good::before{background:var(--mint)} .beat.bad::before{background:var(--err);border-radius:2px}
.beat .bt{font:500 14px/1.45 var(--sans);color:var(--ink)}
.beat .bm{font:500 11.5px/1.4 var(--mono);color:var(--faint);margin-top:2px}
.beat.chapter .bt{color:var(--dim)}
.beat .open-art{color:var(--violet);font-size:12.5px;margin-top:3px;display:inline-block}

/* glass layer / watch-live stream */
.glass{background:#04020F;border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:340px;margin-top:6px}
/* glass is an always-dark "flight deck" island — keep dark-theme token values inside it even in light mode, so its text/hues stay legible */
@media (prefers-color-scheme: light){.glass{background:#0d0a22;--ink:#F4F1FF;--dim:#B9B3D6;--faint:#7E77A3;--gold:#FFC34A;--mint:#4DDDD0;--violet:#A050FF}}
.glass-h{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:9px 12px;background:rgba(4,2,15,.9);border-bottom:1px solid var(--line);font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);backdrop-filter:blur(6px)}
.grow{display:flex;flex-direction:column;gap:0}
.grow-row{display:flex;gap:9px;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.03);font:400 12.5px/1.5 var(--mono);color:var(--dim)}
.grow-row .gt{color:var(--faint);flex:none;width:42px}
.grow-row .gk{flex:none;width:15px;text-align:center;opacity:.7}
.grow-row .gtxt{min-width:0;overflow-wrap:anywhere}
.grow-row.think{color:#c8c0e8} .grow-row.tool{color:var(--gold)} .grow-row.file{color:var(--mint)}
.grow-row.check .gk{color:var(--mint)} .grow-row.route{color:var(--violet)} .grow-row.cost{color:var(--dim)} .grow-row.bad{color:#FFB7B2}
.grow-row.route .gk{opacity:1}  /* violet is the darkest row-key hue; the .7 dim drops the route glyph to ~2.9:1 on the dark glass ground — full strength = 4.7:1 light / 5.7:1 dark */
.glass-note{padding:8px 12px;font-size:12px;color:var(--faint);border-top:1px solid var(--line)}
.evidence-stream,.stream-sheet-glass{margin-top:10px;max-height:420px}
.stream-sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;margin-bottom:10px}
.stream-sheet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* receipts */
.receipt{border:1px solid rgba(77,221,208,.35);border-radius:var(--rc);padding:16px;margin-top:12px;background:linear-gradient(180deg,var(--mint-soft),var(--raise) 80%)}
@media (prefers-color-scheme: light){.receipt{border-color:rgba(9,112,96,.4)}}
.receipt .rh{font:700 16px/1.3 var(--sans);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.receipt .rmeta{display:flex;gap:14px;flex-wrap:wrap;font:500 12.5px/1.5 var(--mono);color:var(--dim);margin:8px 0}
.receipt .rmeta b{color:var(--ink)}
.frame{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:16/10;margin-top:10px}
.frame iframe{width:100%;height:100%;border:0;display:block}

/* decision card (full anatomy) */
.dec{border:1px solid rgba(255,77,155,.4);border-radius:var(--rc);padding:18px;margin-bottom:14px;background:linear-gradient(160deg,var(--pink-soft),var(--raise) 70%);box-shadow:var(--sh-card)}
.dec .kicker{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
.dec .q{font:600 19px/1.32 var(--sans);letter-spacing:-.01em;margin:0 0 8px}
.dec .blast{font:400 14px/1.5 var(--sans);color:var(--dim);margin-bottom:12px}
.dec .ev{width:100%;display:flex;gap:10px;align-items:center;text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-bottom:14px;font:500 13px/1.4 var(--sans);color:var(--dim)}
.dec .ev:hover{border-color:var(--line-hover)}
.dec .ev .evk{color:var(--faint);font:500 12px/1.4 var(--mono)}
.dec .ev .evgo{margin-left:auto;color:var(--violet);white-space:nowrap}
.dec .choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;align-items:center;gap:12px;text-align:left;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--raise);border-radius:12px;padding:12px 14px;transition:border-color .15s,transform .12s}
.choice:hover{border-color:var(--line-hover);transform:translateY(-1px)}
.choice.go{border-color:rgba(77,221,208,.5)}
/* light: the dark-mint glow border washes out on white — use the deepened mint so the recommended choice still reads */
@media (prefers-color-scheme: light){.choice.go{border-color:var(--mint)}}
.choice>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.choice .cl{display:block;font:600 14.5px/1.2 var(--sans)} .choice .cc{display:block;font:400 12.5px/1.4 var(--sans);color:var(--faint)}
.choice .ck{margin-left:auto;color:var(--faint)}
.choice.danger .cl{color:var(--err)}
.dec .timeout{font:400 12.5px/1.4 var(--sans);color:var(--faint);margin-top:13px;display:flex;align-items:center;gap:7px}
/* approval sent to the mesh — replaces the choice buttons until the state lands */
.dec.isqueued{border-color:rgba(77,221,208,.32)}
.dec .queued{display:flex;align-items:center;gap:9px;background:rgba(77,221,208,.07);border:1px solid rgba(77,221,208,.28);border-radius:12px;padding:12px 14px;font:500 13.5px/1.4 var(--sans);color:var(--dim)}
.dec .queued>span:nth-child(2){min-width:0;flex:1}
.qcancel{margin-left:auto;border:1px solid rgba(77,221,208,.42);border-radius:999px;padding:6px 10px;color:var(--mint);font:700 12px/1 var(--sans);background:rgba(77,221,208,.08)}
.qcancel:hover{border-color:var(--mint);background:rgba(77,221,208,.14)}
@media (prefers-color-scheme: light){.dec.isqueued{border-color:var(--mint)}.dec .queued{background:rgba(0,150,136,.07);border-color:var(--mint)}}
/* queued-asks banner above the work list (bridged: ask is on the way to the mesh) */
.pendbar{display:flex;align-items:center;gap:9px;background:rgba(77,221,208,.07);border:1px solid rgba(77,221,208,.26);border-radius:12px;padding:11px 14px;margin-bottom:14px;font:500 13px/1.4 var(--sans);color:var(--dim)}
#askChips:not(:empty){display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
@media (prefers-color-scheme: light){.pendbar{background:rgba(0,150,136,.06);border-color:var(--mint)}}

/* ============================ SHEETS / SCRIM ============================ */
#scrimHost{position:fixed;inset:0;z-index:1000;pointer-events:none}
.scrim{position:fixed;inset:0;background:rgba(4,7,12,.38);backdrop-filter:blur(9px) saturate(1.15);-webkit-backdrop-filter:blur(9px) saturate(1.15);z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;animation:fade .14s ease}
#scrimHost .scrim{pointer-events:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
.scrim.closing{animation:fadeOut var(--motion-sheet-out) cubic-bezier(.2,.8,.2,1) both;pointer-events:none}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.sheet{position:relative;width:100%;max-width:600px;
  --bg:transparent;--raise:rgba(255,255,255,.05);--ink:#ece7dc;--dim:#8fa3b8;--faint:#5c6b7e;
  --line:rgba(143,163,184,.22);--overlay:rgba(255,255,255,.06);
  color:var(--ink);color-scheme:dark;
  background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 42%),rgba(11,16,23,.55);
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid rgba(143,163,184,.3);border-radius:18px;max-height:90vh;overflow:auto;padding:22px;
  box-shadow:0 24px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 .5px rgba(255,255,255,.04);animation:rise .18s ease}
.sheet.ask-sheet{animation:rise var(--motion-sheet-in) cubic-bezier(.2,.8,.2,1) both}
.scrim.closing .sheet{animation:fall var(--motion-sheet-out) cubic-bezier(.2,.8,.2,1) both}
.sheet-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:var(--raise);color:var(--ink);font:700 22px/1 var(--sans);display:grid;place-items:center;cursor:pointer;z-index:1}
.sheet-close:hover,.sheet-close:focus-visible{color:var(--ink);border-color:rgba(126,54,232,.38);box-shadow:0 0 0 3px rgba(126,54,232,.14);outline:none}
@keyframes rise{from{transform:translateY(12px);opacity:1}to{transform:translateY(0);opacity:1}}
@keyframes fall{from{transform:translateY(0);opacity:1}to{transform:translateY(8px);opacity:0}}
.sheet h2{font:700 22px/1.2 var(--sans);margin:0 0 14px;letter-spacing:-.01em}
.sheet h2 .g{background:var(--accent-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.ta{width:100%;min-height:104px;background:var(--raise);border:1px solid var(--line);border-radius:13px;color:var(--ink);font:inherit;font-size:16px;padding:14px;outline:none;resize:vertical}
.ta:focus{border-color:var(--violet)}
.field{width:100%;background:var(--raise);border:1px solid var(--line);border-radius:11px;color:var(--ink);font:inherit;font-size:14px;padding:11px 13px;outline:none;margin:10px 0 14px}
.field:focus{border-color:var(--violet)}
.field + .primary{margin-top:2px}
.sheet-form{display:grid;gap:16px;margin-top:16px}
.sheet-form .field{margin:0}
.sheet-form .ta{margin:0;min-height:128px}
.sheet-form .field:focus-visible{box-shadow:var(--focus)}
.sheet-form .primary{min-height:50px;margin-top:2px}
.sheet-form .sheet-label{font:700 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.exs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.ex{background:var(--raise);border:1px solid var(--line);color:var(--dim);border-radius:var(--rp);padding:8px 13px;font-size:13px}
.ex:hover{border-color:var(--line-hover)} .ex.on{border-color:var(--violet);color:var(--ink)}
.exmore{display:inline-flex;align-items:center;margin:-4px 0 4px;padding:4px 2px;background:transparent;border:0;color:var(--violet);font:600 12px/1 var(--sans);cursor:pointer;opacity:.82}
.exmore:hover{opacity:1}
/* the value organ: observed consequences, receipt-quiet */
.vfacts{display:flex;flex-direction:column;gap:6px;margin:2px 0 12px}
.vfact{display:flex;align-items:center;gap:9px;font:500 13px/1.4 var(--sans);color:var(--dim)}
.vfact.mint{color:#bfe8d2} .vfact.rose{color:#eec2cd}
.vfact.vstake{background:none;border:0;padding:0;cursor:pointer;text-align:left;font:500 13px/1.4 var(--sans);color:#8fa3b8}
.vfact.vstake:hover{color:#ece7dc}
/* the digest: the return-loop payoff surface */
.digest{display:flex;flex-direction:column;gap:10px}
.dg-hero{font:600 17px/1.4 var(--sans);color:#f4f0e6}
.dg-hero .dg-rose{color:var(--pink)} .dg-hero .dg-gold{color:var(--gold)}
.dg-since{font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#5c6b7e;margin-bottom:6px}
/* one mouth: the ask field is also find — five ranked rows, law vocabulary */
.askfind{display:none;flex-direction:column;gap:4px;margin:2px 0 10px}
.askfind.on{display:flex}
.findrow{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid rgba(143,163,184,.18);
  background:rgba(255,255,255,.04);border-radius:12px;padding:10px 12px;cursor:pointer;color:#e9e4d8}
.findrow b{flex:1;min-width:0;font:600 13.5px/1.3 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.findrow .fstate{flex:none;font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8fa3b8}
.findrow .fstate.rose{color:var(--pink)} .findrow .fstate.gold{color:var(--gold)}
.findrow .fstate.violet{color:var(--violet)} .findrow .fstate.mint{color:var(--mint)}
.findrow:hover{border-color:rgba(143,163,184,.4)}
.askhint{display:none;font:12px/1.45 var(--sans);color:var(--faint);margin:7px 2px 0}
.askhint.on{display:block}
.runline{font:13px/1.5 var(--sans);color:var(--faint);margin:13px 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.runline b{color:var(--dim)}
.runline .gear{color:var(--violet);cursor:pointer}
.errbox{background:var(--err-soft);border:1px solid rgba(255,98,89,.35);border-radius:12px;padding:12px 14px;color:#FFB7B2;font-size:13px;margin-top:12px}
@media (prefers-color-scheme: light){.errbox{color:#a3261d}}

/* command palette */
.cmdk-sheet{max-width:560px;padding:0;overflow:hidden}
.cmdk-in{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:400 17px/1 var(--sans);padding:18px 20px;outline:none}
.cmdk-list{max-height:50vh;overflow:auto;padding:8px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;cursor:pointer;color:var(--dim)}
.cmdk-item.on,.cmdk-item:hover{background:var(--overlay);color:var(--ink)}
.cmdk-item .ci-k{margin-left:auto}
.cmdk-empty{padding:20px;color:var(--faint);text-align:center;font-size:14px}

/* chat */
.chat{display:flex;flex-direction:column;height:100%;position:relative}
.chat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:999px;background:var(--spectrum);opacity:.74;pointer-events:none}
.chat-msgs{flex:1;display:flex;flex-direction:column;gap:0;padding:10px 0 16px}
/* conversation craft: bubbles carry depth and rhythm — tight inside a run,
   air between speakers, a tail only where a run ends, and a soft entrance. */
.msg{max-width:76%;display:flex;flex-direction:column;font:400 15px/1.55 var(--sans)}
.msg.user{align-self:flex-end;align-items:flex-end}
.msg.agent{align-self:flex-start;align-items:flex-start}
.msg+.msg{margin-top:3px}
.msg.run-start,.msg.agent+.msg.user,.msg.user+.msg.agent{margin-top:16px}
.msg .msg-text{padding:12px 16px;border-radius:20px;white-space:pre-wrap;overflow-wrap:anywhere;
  box-shadow:0 2px 12px rgba(2,1,12,.22),inset 0 1px 0 rgba(255,255,255,.07)}
.msg.user .msg-text{background:linear-gradient(135deg,rgba(236,231,220,.14),rgba(236,231,220,.08));
  border:1px solid rgba(236,231,220,.18);color:#f4f0e6}
.msg.user.run-end .msg-text{border-bottom-right-radius:7px}
.msg.agent .msg-text{background:rgba(255,255,255,.055);border:1px solid rgba(143,163,184,.15);color:#e9e4d8}
.msg.agent.run-end .msg-text{border-bottom-left-radius:7px}
.msg .who{font:600 9.5px/1 var(--mono);color:#5c6b7e;letter-spacing:.14em;text-transform:uppercase;margin:0 6px 6px}
.msg.user .who{display:none}
.msg.launcher-failed{max-width:min(620px,94%)}
.msg.launcher-failed .msg-text{background:linear-gradient(135deg,rgba(255,98,89,.12),rgba(255,195,74,.08));border-color:rgba(255,98,89,.32);font-weight:600;color:var(--ink)}
.msg.host-pickup{max-width:min(520px,88%)}
.msg.host-pickup .msg-text{background:linear-gradient(135deg,rgba(77,221,208,.08),rgba(160,98,255,.05));border-color:rgba(77,221,208,.28);color:var(--dim);font-size:13.5px}
.msg-meta{margin:5px 8px 0;font:600 9.5px/1 var(--mono);letter-spacing:.1em;color:#5c6b7e}
/* the typing bubble: three breathing dots in an agent bubble */
.msg.typing .msg-text{display:flex;gap:5px;align-items:center;padding:14px 16px;min-width:58px}
.tdot{width:7px;height:7px;border-radius:50%;background:#8fa3b8;opacity:.4;animation:tdot 1.15s ease-in-out infinite}
.tdot:nth-child(2){animation-delay:.18s}
.tdot:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){.tdot{animation:none;opacity:.7}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.chat-msgs.pop .msg:last-child{animation:msgIn .32s cubic-bezier(.22,1.1,.36,1)}
@media (prefers-reduced-motion: reduce){.chat-msgs.pop .msg:last-child{animation:none}}
.msg-meta.syncing{color:var(--gold)}
.msg-meta.sent{color:var(--mint)}
.msg-meta.failed{color:var(--err)}
.msg.local-syncing{animation:chatBubblePulse 1.1s ease-in-out infinite}
@keyframes chatBubblePulse{0%,100%{box-shadow:0 8px 22px rgba(2,1,12,.16),0 0 0 rgba(255,195,74,0)}50%{box-shadow:0 8px 22px rgba(2,1,12,.16),0 0 24px rgba(255,195,74,.18)}}
.chat-status{align-self:flex-start;width:min(620px,94%);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid rgba(255,195,74,.30);background:linear-gradient(135deg,rgba(255,195,74,.10),rgba(160,98,255,.07));border-radius:15px;padding:12px 14px;color:var(--dim);font:600 13px/1.42 var(--sans)}
.chat-status b{display:block;color:var(--ink);font:800 13.5px/1.25 var(--sans);margin-bottom:3px}
.chat-status-copy>span{display:block}
.chat-status.error{border-color:rgba(255,98,89,.36);background:var(--err-soft)}
.chat-status .btn{margin:0;white-space:nowrap}
.chat-status-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chat-status-steps span{border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--faint);font:800 10px/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;background:rgba(255,255,255,.025)}
.chat-status-steps span.on{border-color:rgba(77,221,208,.36);background:var(--mint-soft);color:var(--mint)}
.chat-context{align-self:flex-start;width:min(620px,92%);margin:2px 0 2px 12px}
/* ── the conversation, rebuilt: one stream, moments inline, picker in the head ── */
.convo{display:flex;flex-direction:column;min-height:100%;position:relative}
.convo-id{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 2px 12px;border-bottom:1px solid rgba(143,163,184,.14);margin-bottom:12px}
.convo-thread{background:none;border:0;padding:0;color:#ece7dc;font:600 15px/1.3 var(--sans);cursor:pointer;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-car{color:#5c6b7e;font-size:11px}
.convo-presence{font:600 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5c6b7e;white-space:nowrap}
.thread-pop{position:absolute;top:44px;left:0;right:0;z-index:6;display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:16px;
  background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 42%),rgba(11,16,23,.94);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(143,163,184,.3);box-shadow:0 18px 60px rgba(0,0,0,.55)}
.tp-row{display:flex;align-items:center;gap:9px;padding:11px 12px;border:0;border-radius:10px;background:none;color:#c9d4df;font:500 14px/1 var(--sans);cursor:pointer;text-align:left}
.tp-row.on,.tp-row:hover{background:rgba(255,255,255,.06);color:#ece7dc}
.tp-new{color:#8fa3b8}
.day{align-self:stretch;display:flex;align-items:center;gap:12px;font:600 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#48566a;padding:2px 0 10px}
.day::before,.day::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(143,163,184,.22),transparent)}
.sysline{align-self:center;font:600 10px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5c6b7e;padding:16px 0;text-align:center}
.moment{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border-radius:16px;padding:12px 14px;cursor:pointer;margin-top:14px;box-shadow:0 2px 12px rgba(2,1,12,.2);
  background:rgba(255,255,255,.04);border:1px solid rgba(143,163,184,.2);color:#c9d4df}
.moment>div{flex:1;min-width:0}
.moment b{display:block;font:600 13.5px/1.35 var(--sans);color:#ece7dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moment .m2{display:block;font:400 11.5px/1.4 var(--mono);color:#8fa3b8;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moment .mgo{color:#5c6b7e;flex:none;margin-left:2px}
.moment.rose{border-color:rgba(224,128,152,.45);background:rgba(224,128,152,.07)}
.moment.gold{border-color:rgba(212,184,127,.35)}
.moment.mint{border-color:rgba(127,206,158,.35)}
.moment.violet{border-color:rgba(139,124,246,.4)}
.moment.cream{border-color:rgba(236,231,220,.32);background:rgba(236,231,220,.05)}
/* machine mode — a quieted machine reads WARM (cream, by choice), distinct from
   an away/asleep one (faint, cold). drain carries the gold work-accent. */
.dot.quiet{background:var(--cream);box-shadow:0 0 7px rgba(236,231,220,.5)}
.dot.drain{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.moment.mode-holding,.lane-row.mode-holding{transform:scale(.985);transition:transform .12s ease}
.lane-row[data-dev]{cursor:pointer;border-radius:11px;margin:0 -6px;padding:2px 6px;transition:background .15s}
.lane-row[data-dev]:hover{background:rgba(255,255,255,.03)}
/* press-and-hold panel — the 3-stop open · quiet · drain control + duration row.
   Springs from a machine row, so it wears the mesh surface's always-dark idiom
   (hardcoded translucent, like .minicard/.moment) rather than the theme tokens —
   it must read the same over the floor in both light and dark. Accents are the
   fixed brand hues: mint (open), cream (quiet), gold (drain). */
.mode-pop{position:fixed;z-index:120;width:min(300px,calc(100vw - 16px));background:#111823;border:1px solid rgba(143,163,184,.22);border-radius:16px;padding:14px;box-shadow:0 20px 60px rgba(2,1,12,.7),0 0 0 1px rgba(143,163,184,.14);display:flex;flex-direction:column;gap:11px}
.mode-pop-head b{display:block;font:600 14px/1.3 var(--sans);color:#ece7dc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-pop-head span{display:block;font:400 12px/1.3 var(--sans);color:#8fa3b8;margin-top:2px}
.mode-stops{display:flex;flex-direction:column;gap:6px}
.mode-stop{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;border:1px solid rgba(143,163,184,.2);background:rgba(255,255,255,.035);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.mode-stop:hover,.mode-stop:focus-visible{border-color:rgba(143,163,184,.42);outline:0}
.mode-stop-dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:3px;background:#55677c;transition:box-shadow .15s}
.mode-stop-txt b{display:block;font:600 13px/1.2 var(--sans);color:#ece7dc}
.mode-stop-txt span{display:block;font:400 11.5px/1.35 var(--sans);color:#8fa3b8;margin-top:2px}
.mode-stop.mint .mode-stop-dot{background:var(--mint)}
.mode-stop.cream .mode-stop-dot{background:var(--cream)}
.mode-stop.gold .mode-stop-dot{background:var(--gold)}
.mode-stop.on{background:rgba(255,255,255,.07)}
.mode-stop.mint.on{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.mode-stop.cream.on{border-color:rgba(236,231,220,.6);box-shadow:inset 0 0 0 1px rgba(236,231,220,.5)}
.mode-stop.gold.on{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.mode-stop.on .mode-stop-dot{box-shadow:0 0 9px currentColor}
.mode-dur-lbl{font:600 11px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:#55677c}
.mode-durs{display:flex;flex-wrap:wrap;gap:6px}
.mode-dur{border:1px solid rgba(143,163,184,.2);background:rgba(255,255,255,.035);color:#8fa3b8;border-radius:999px;padding:7px 12px;font:600 12px/1 var(--sans);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.mode-dur:hover,.mode-dur:focus-visible{border-color:rgba(143,163,184,.42);color:#ece7dc;outline:0}
.mode-dur.on{background:var(--cream);color:#17130b;border-color:var(--cream)}
.mode-commit{margin-top:2px;width:100%;border:1px solid rgba(143,163,184,.25);background:rgba(255,255,255,.06);color:#ece7dc;border-radius:var(--rsm);padding:11px 16px;font:700 13.5px/1 var(--sans);cursor:pointer;transition:filter .15s,transform .12s}
.mode-commit:hover{transform:translateY(-1px);filter:brightness(1.06)}
.mode-commit.mint{background:var(--mint);color:#08150e;border-color:var(--mint)}
.mode-commit.cream{background:linear-gradient(180deg,#f4efe4,#ece7dc);color:#1a130a;border-color:rgba(236,231,220,.6)}
.mode-commit.gold{background:var(--gold);color:#1c1405;border-color:var(--gold)}
.bubble-act{display:block;margin-top:9px;border:1px solid rgba(127,206,158,.55);background:rgba(127,206,158,.08);color:#a8e6c3;border-radius:999px;padding:9px 14px;font:600 12.5px/1 var(--sans);cursor:pointer}
.bubble-act:hover{background:rgba(127,206,158,.14)}
/* status cards ride the stream as quiet system lines */
.fg-host .chat-status{align-self:center;display:inline-flex;gap:9px;align-items:center;margin:16px auto 4px;
  font:600 10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8fa3b8;
  background:rgba(255,255,255,.03);border:1px solid rgba(143,163,184,.16);border-radius:999px;
  padding:7px 15px;max-width:calc(100% - 24px);box-shadow:none}
.fg-host .chat-status .dot{width:7px;height:7px}
.fg-host .chat-status .chat-status-copy b{font-weight:600;color:#8fa3b8}
.upd-chip{position:fixed;top:calc(max(10px, env(safe-area-inset-top)) + 6px);left:50%;transform:translateX(-50%);z-index:95;
  font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#0b1017;
  background:#ece7dc;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;
  box-shadow:0 10px 34px rgba(0,0,0,.5)}
/* the composer is one glass capsule: the field IS the surface, send is a
   cream circle inside it, and the request path is a quiet chip above */
.chat-composer{position:sticky;bottom:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;border:0;box-shadow:none;
  padding:14px 0 10px;margin-top:4px;
  background:linear-gradient(180deg,rgba(11,16,23,0),rgba(11,16,23,.88) 34%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip-req{align-self:flex-end;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.045);border:1px solid rgba(143,163,184,.28);border-radius:999px;padding:8px 13px;cursor:pointer;transition:color .15s,border-color .15s}
.chip-req:hover{color:var(--ink);border-color:rgba(143,163,184,.5)}
.composer-capsule{display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 16px;border-radius:26px;
  background:linear-gradient(118deg,rgba(255,255,255,.055),transparent 42%),rgba(11,16,23,.62);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(143,163,184,.3);box-shadow:0 14px 44px rgba(2,1,12,.4),inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .15s,box-shadow .15s}
.composer-capsule:focus-within{border-color:rgba(127,206,158,.55);box-shadow:0 14px 44px rgba(2,1,12,.4),0 0 0 3px rgba(127,206,158,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.composer-capsule .ta{flex:1;min-width:0;background:none;border:0;outline:none;box-shadow:none;resize:none;
  min-height:22px;max-height:150px;padding:10px 0;font:400 15px/1.45 var(--sans);color:var(--ink)}
.composer-capsule .ta::placeholder{color:var(--faint)}
.chat-send{width:40px;height:40px;flex:none;border:0;border-radius:999px;background:#ece7dc;color:#0b1017;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 20px rgba(236,231,220,.22);
  transition:transform .12s ease,opacity .18s ease,box-shadow .18s ease}
.chat-send:hover{transform:translateY(-1px)}
.chat-send:active{transform:scale(.9)}
.composer-capsule .ta:placeholder-shown+.chat-send{opacity:.35;box-shadow:none}
.composer-capsule .ta:not(:placeholder-shown)+.chat-send{box-shadow:0 6px 26px rgba(236,231,220,.34)}

/* toast */
.toast{position:fixed;bottom:calc(var(--bottom-chrome-h) + max(22px,env(safe-area-inset-bottom)));left:50%;transform:translateX(-50%);z-index:90;color:#ece7dc;background:rgba(11,16,23,.78);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(143,163,184,.26);border-radius:999px;padding:11px 18px;font:600 13.5px/1 var(--sans);box-shadow:0 12px 44px rgba(0,0,0,.45);display:flex;align-items:center;gap:10px;animation:rise .18s ease;color-scheme:dark}
.toast .undo{color:var(--violet);cursor:pointer}

/* ============================ RESPONSIVE ============================ */
/* desktop: pin the detail pane beside the work surface */
@media (min-width:1101px){
}
/* two-pane: detail overlays from the right */
@media (max-width:1100px){
  .app,.app.rail-collapsed{grid-template-columns:var(--rail-w) minmax(0,1fr)}
}
/* single-pane: rail → bottom nav */
@media (max-width:720px){
  .app,.app.rail-collapsed{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;top:0;bottom:0;left:-280px;width:280px;z-index:75;transform:none;transition:left .2s,margin-left .2s;border-right:1px solid var(--line)}
  .app.rail-open .rail,#app.rail-open #rail{left:-280px!important;margin-left:280px!important;transform:none!important;display:flex}
  .app.rail-open .rail-scrim{display:block;position:fixed;inset:0;z-index:74;background:rgba(2,1,12,.42);backdrop-filter:blur(2px);cursor:default}
  body.demo .app.rail-open .rail-scrim{top:34px}
  .center{grid-column:1}
  #railOpen{display:inline-flex!important}
  :root{--bottom-chrome-h:76px}
  .botnav{display:flex!important}
  .center-scroll{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .cmdk{display:none}
  .mesh-stream-grid{grid-template-columns:1fr}
  .stream-dock{padding:12px}
  .chat{height:auto;min-height:100%}
  .chat-status{width:100%;grid-template-columns:auto minmax(0,1fr)}
  .chat-status .btn{grid-column:2;justify-self:start}
  .chat-context{width:100%;margin-left:0}
  .chat-msgs{padding-bottom:18px}
  .chat-composer{position:sticky;bottom:0}
  .stream-title{white-space:normal}
}
@media (max-width:620px){
  .model-grid,.model-grid.compact,.money-metrics{grid-template-columns:1fr}
  .install-head,.install-command-row,.money-head{grid-template-columns:1fr;display:grid}
  .install-command-row .copy{width:100%}
  .install-steps{grid-template-columns:1fr}
  .model-lanes-head{display:grid;grid-template-columns:1fr;gap:8px}
  .stream-sheet-head{grid-template-columns:1fr}
}
.botnav{display:none;align-items:stretch;justify-content:space-around;
  min-height:calc(58px + max(10px, env(safe-area-inset-bottom)));
  padding:6px 6px max(10px, env(safe-area-inset-bottom));
  border-top:1px solid rgba(143,163,184,.22);
  background:rgba(11,16,23,.85);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  position:sticky;bottom:0;color-scheme:dark;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
body.low-gfx .botnav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,18,27,.985)}
.botnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#5c6b7e;font:600 10px/1 var(--sans);flex:1;position:relative;padding-top:4px}
.botnav a.on{color:#ece7dc}
.botnav a .nav-ico{width:21px;height:21px}
.botnav a .badge{position:absolute;top:0;right:50%;margin-right:-22px}
.botnav-ask{width:50px;height:50px;border-radius:50%;background:#ece7dc;color:#0b1017;font-size:24px;line-height:0;font-weight:700;
  box-shadow:0 6px 24px rgba(0,0,0,.45),0 0 0 4px rgba(11,16,23,.85),0 0 26px rgba(236,231,220,.25);
  margin-top:-18px;align-self:flex-start;flex:none;position:relative;isolation:isolate;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,opacity .18s ease;will-change:transform}
.botnav-ask::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 160deg,rgba(255,255,255,0),rgba(255,255,255,.72),rgba(255,195,74,.48),rgba(255,77,155,.38),rgba(255,255,255,0));opacity:0;transform:scale(.68);pointer-events:none;z-index:-1}
.botnav-ask::after{content:none}
.botnav-ask:hover,.botnav-ask:focus-visible{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 4px rgba(11,16,23,.85),0 0 30px rgba(236,231,220,.35)}
.botnav-ask:active{transform:translateY(0) scale(.94)}
.botnav-ask.is-opening{animation:fabPress .56s cubic-bezier(.17,.9,.25,1)}
.botnav-ask.is-opening::before{animation:fabBloom .62s ease-out}
.botnav-ask.is-sent{animation:fabSettle .64s cubic-bezier(.17,.9,.25,1)}
.botnav-ask.is-sent::before{animation:fabSentBloom .72s ease-out}
.primary.is-sending{position:relative;overflow:hidden}
.primary.is-sending::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 28%,rgba(255,255,255,.34) 45%,transparent 62%);transform:translateX(-120%);animation:sheenSweep 1.1s ease-in-out infinite;pointer-events:none}
body.sheet-open .botnav-ask,body.sheet-up .botnav-ask{transform:translateY(18px) scale(.88);opacity:0;pointer-events:none}
body.has-toast .botnav-ask{transform:translateY(-4px) scale(.97)}
@media (max-width:720px){body.keyboard-open .botnav{transform:translateY(calc(100% + env(safe-area-inset-bottom)));opacity:0;pointer-events:none}body.keyboard-open .center-scroll{padding-bottom:22px}}
@keyframes fabPress{0%{transform:translateY(0) scale(1)}42%{transform:translateY(-7px) scale(1.08)}66%{transform:translateY(-3px) scale(.97)}100%{transform:translateY(0) scale(1)}}
@keyframes fabSettle{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-10px) scale(1.04)}70%{transform:translateY(-2px) scale(.98)}100%{transform:translateY(0) scale(1)}}
@keyframes fabBloom{0%{opacity:.72;transform:scale(.56) rotate(0deg)}100%{opacity:0;transform:scale(1.55) rotate(42deg)}}
@keyframes fabSentBloom{0%{opacity:.5;transform:scale(.7) rotate(-18deg)}100%{opacity:0;transform:scale(1.82) rotate(56deg)}}
@keyframes sheenSweep{0%{opacity:0;transform:translateX(-125%)}18%{opacity:1}100%{opacity:0;transform:translateX(125%)}}

/* badges */
.badge{background:var(--pink);color:#0b1017;font:700 11px/1 var(--sans);border-radius:var(--rp);padding:3px 7px;min-width:19px;text-align:center}
/* light: pink deepens to magenta — flip badge text to white so the count stays legible (dark mode keeps dark-on-bright) */
@media (prefers-color-scheme: light){.badge{color:#fff}}

/* settings rows */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font:500 14px/1.35 var(--sans);color:var(--ink)}
.set-row input[type=checkbox]{appearance:none;width:40px;height:23px;border-radius:var(--rp);background:var(--overlay);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s;flex:none}
.set-row input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--faint);transition:transform .15s,background .15s}
.set-row input[type=checkbox]:checked{background:var(--violet-soft);border-color:var(--violet)}
.set-row input[type=checkbox]:checked::after{transform:translateX(17px);background:var(--violet)}
.set-cap{font:500 14px/1 var(--mono);color:var(--dim)}
.set-capin{width:62px;background:var(--raise);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;padding:5px 8px;margin-left:2px}
.set-capin:focus{border-color:var(--violet);outline:none}

/* onboarding (first run) */
.onb{max-width:560px;margin:14px auto;padding:8px 0}
.onb-mark{width:44px;height:44px;margin-bottom:22px}
.onb-h{font:700 30px/1.1 var(--sans);letter-spacing:-.025em;margin:0 0 8px}
.onb-sub{color:var(--dim);font-size:15.5px;line-height:1.55;margin:0 0 22px}
.onb-paths{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.onb-paths{grid-template-columns:1fr}}
.onb-path{text-align:left;border:1px solid var(--line);background:var(--raise);border-radius:var(--rc);padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-card);transition:border-color .15s,transform .14s}
.onb-path:hover{border-color:var(--violet);transform:translateY(-2px)}
.onb-path:first-child{border-color:rgba(255,143,176,.35);background:linear-gradient(165deg,rgba(255,143,176,.08),var(--raise) 70%)}
.onb-pt{font:700 16.5px/1.2 var(--sans)}
.onb-pd{font:400 13px/1.5 var(--sans);color:var(--dim);flex:1}
.onb-go{font:600 13px/1 var(--sans);color:var(--violet)}
.onb-path:first-child .onb-go{color:var(--pink)}
.onb-foot{color:var(--faint);font-size:13px;margin-top:18px}

/* the one mark: the gate's glass tile with the wire grid inside — every
   legacy pearl-dot site renders this, scheme-invariant */
.mark i,.empty>.pearl,.welcome .pearl,.onb-mark{
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23ece7dc%22%20stroke-width=%221.9%22%3E%3Cpath%20d=%22M4%208c5%200%206.2%201.1%208%201.1s3%20-1.1%208%20-1.1M4%2016c5%200%206.2%20-1.1%208%20-1.1s3%201.1%208%201.1M8%204c0%205%201.1%206.2%201.1%208s-1.1%203%20-1.1%208M16%204c0%205%20-1.1%206.2%20-1.1%208s1.1%203%201.1%208%22/%3E%3C/svg%3E") center/62% no-repeat,
    linear-gradient(118deg,rgba(255,255,255,.08),transparent 46%),rgba(11,16,23,.6);
  border:1px solid rgba(143,163,184,.3);border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.mark i{border-radius:5px}

/* THE FLOOR */
#view-floor{padding:0;height:calc(100dvh - 58px)}
.floor-wrap{position:relative;width:100%;height:100%;background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.floor-glass{-webkit-user-select:text;user-select:text}
.floor-label{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:3px;
  font-family:var(--mono);border:0;color:var(--ink);cursor:pointer;will-change:transform;
  background:rgba(11,16,23,.72);backdrop-filter:blur(6px);border-radius:9px;padding:6px 11px;
  box-shadow:0 4px 18px rgba(0,0,0,.45)}
.floor-label b{font-size:12px;letter-spacing:.06em;font-weight:600;max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f4f0e6}
.floor-label span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.floor-label:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:6px}
.floor-label.mini span,.floor-label.mini .fl-detail{display:none}
.floor-label.mini{padding:5px 10px;gap:0}

.floor-sky{position:absolute;top:26px;left:0;right:0;display:flex;gap:22px;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);z-index:2;pointer-events:none}
.floor-sky .amber{color:var(--gold)} .floor-sky .rose{color:var(--pink)} .floor-sky .mint{color:var(--mint)}
/* slam-refresh answer ack: the stats line breathes once when fresh truth lands */
.floor-sky.breathe{animation:skyBreathe .9s ease}
@keyframes skyBreathe{0%{opacity:1}30%{opacity:.35;letter-spacing:.26em}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){.floor-sky.breathe{animation:none}}
.floor-you{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;color:var(--dim);z-index:2;pointer-events:none}
@media (max-width:560px){ .floor-sky{flex-wrap:wrap;gap:8px 14px;padding:0 16px;top:96px} body.demo.floor-mode .floor-sky{top:96px} .floor-you{bottom:15%} }

/* MAX IMMERSION: on the Floor the app chrome dissolves — the world is the screen */
body.floor-mode .rail{display:none}
body.floor-mode .center-top{display:none}
body.floor-mode .center-scroll{overflow:hidden}
body.floor-mode #view-floor{padding:0;height:100dvh}
body.floor-mode .floor-wrap{position:fixed;inset:0;height:100dvh}
.floor-chrome-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;
  justify-content:space-between;padding:18px 22px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,16,23,.9),rgba(11,16,23,.62) 40%,rgba(11,16,23,.28) 72%,transparent)}
.floor-mark{display:flex;align-items:center;gap:10px;pointer-events:auto;text-decoration:none}
.floor-mark span{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--ink)}
.floor-nav{display:flex;gap:18px;pointer-events:auto}
.floor-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);text-decoration:none;position:relative}
.floor-nav a:hover{color:var(--ink)}
.floor-nav a b{position:absolute;top:-7px;right:-12px;background:var(--pink);color:#1c0a12;border-radius:999px;
  font-size:9px;min-width:14px;height:14px;display:grid;place-items:center;padding:0 3px;font-weight:700}
.floor-sky{top:64px}
.floor-ask{position:absolute;right:26px;bottom:26px;z-index:3;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:13px 22px;border-radius:999px;
  background:var(--ink);color:var(--bg);box-shadow:0 12px 40px rgba(0,0,0,.5);
  transition:transform .14s cubic-bezier(.2,0,0,1),box-shadow .14s cubic-bezier(.2,0,0,1)}
.floor-ask:hover{transform:translateY(-1px);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.floor-ask:active{transform:scale(.97)}
body.floor-mode .botnav{background:linear-gradient(to top,rgba(11,16,23,.94),rgba(11,16,23,.72) 60%,transparent);border-top:0}
@media (max-width:900px){
  .floor-nav{display:none}                      /* the botnav owns mobile navigation */
  .floor-ask{display:none}                      /* the botnav ＋ owns mobile ask */
  body.floor-mode .floor-wrap{height:calc(100dvh)}
  .floor-sky{top:58px}
}

/* floor-mode chrome: clear the demo banner; badge sits inline; mobile goes bare */

.floor-nav a b{position:static;display:inline-grid;margin-left:6px;transform:translateY(-1px)}
@media (max-width:900px){
  .floor-chrome-top{display:none}               /* max immersion: the world + botnav only */
  .floor-sky{top:26px}
  body.demo.floor-mode .floor-sky{top:88px}
}

/* proximity bloom: walk close and a station opens up */
.floor-label .fl-detail{display:none;font-style:normal;font-size:10px;letter-spacing:.04em;
  color:var(--dim);max-width:210px;white-space:normal;line-height:1.5;margin-top:3px}
.floor-label.near{background:rgba(11,16,23,.9);box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.floor-label.near .fl-detail{display:block}
.floor-hint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:2;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;
  white-space:nowrap;opacity:0;transition:opacity 600ms ease}
.floor-hint.show{opacity:.8}

/* THE FLOOR IS ALWAYS NIGHT: the world's canvas is navy in both color schemes,
   so its chrome never inherits theme tokens (light-mode ink on a dark world
   was invisible — operator caught it twice). Hardcoded dark-world palette. */
.floor-wrap{color-scheme:dark}
.floor-mark span{color:#ece7dc!important}
.floor-nav a{color:#8fa3b8!important}
.floor-nav a:hover{color:#ece7dc!important}
.floor-sky{color:#55677c!important}
.floor-sky .amber{color:#d4b87f!important}
.floor-sky .rose{color:#e08098!important}
.floor-sky .mint{color:#7fd4a3!important}
.floor-hint{color:#8fa3b8!important}
.floor-you{color:#8fa3b8!important}
.floor-label{color:#ece7dc!important;background:rgba(11,16,23,.78)!important}
.floor-label .fl-detail{color:#8fa3b8!important}
.floor-ask{background:#ece7dc!important;color:#0b1017!important}

/* north star: inside glass, no spectrum stripes - steel hairlines only */
.sheet .primary,.sheet button.primary,.floor-glass .primary,.floor-glass button.primary{background:#ece7dc;color:#0b1017;border:0}
.sheet .primary:hover{background:#f6f2e7}
.sheet .cmdk-in{border-bottom:1px solid rgba(143,163,184,.28)}
.sheet .btn.ghost{color:#ece7dc;border-color:rgba(143,163,184,.4)}
.fg-host .chat::before{display:none}
.fg-host .glass-h,.sheet .glass-h{border-image:none}
.fg-host [style*="spectrum"]{background:none}
.fg-host .glass-h{border-bottom:1px solid rgba(143,163,184,.14)}
.fg-host .ta:focus,.sheet .ta:focus{border-color:rgba(143,163,184,.5);box-shadow:none;outline:none}

.fg-thread{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  color:#8fa3b8;background:rgba(255,255,255,.04);border:1px solid rgba(143,163,184,.2);border-radius:999px;padding:5px 10px}
.fg-thread.on{color:#0b1017;background:#ece7dc;border-color:#ece7dc;font-weight:600}
.fg-thread:hover{color:#ece7dc}.fg-thread.on:hover{color:#0b1017}
.floor-crumb{position:absolute;top:96px;left:16px;z-index:6;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#ece7dc;background:rgba(11,16,23,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(143,163,184,.3);border-radius:999px;padding:9px 15px;
  box-shadow:0 8px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.09)}
.floor-crumb:hover{border-color:rgba(236,231,220,.5)}
body.low-gfx .floor-crumb{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,18,27,.985)}
.floor-invite{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);z-index:5;
  width:min(400px,calc(100vw - 40px));text-align:center;display:grid;gap:10px;justify-items:center;
  color:#ece7dc;background:linear-gradient(118deg,rgba(255,255,255,.05),transparent 42%),rgba(11,16,23,.6);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(143,163,184,.3);border-radius:18px;padding:26px 24px 20px;
  box-shadow:0 18px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.09);color-scheme:dark}
.floor-invite h3{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#f4f0e6}
.floor-invite p{font-size:13.5px;line-height:1.6;color:#b9c4d4;max-width:34ch}
.floor-invite .primary{padding:12px 22px;border-radius:999px;font-size:14px}
.invite-demo{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8fa3b8;text-decoration:none}
.invite-demo:hover{color:#ece7dc}
body.low-gfx .floor-invite{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(13,18,27,.985)}
.floor-beam-chip{position:absolute;right:16px;bottom:calc(var(--bottom-chrome-h, 0px) + 86px);z-index:6;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#0b1017;background:#e08098;border:0;border-radius:999px;padding:12px 18px;font-weight:700;
  box-shadow:0 8px 30px rgba(224,128,152,.4)}
@media (max-width:720px){
  .floor-hint{font-size:9.5px;letter-spacing:.12em;bottom:calc(var(--bottom-chrome-h, 56px) + 14px);padding:0 14px;white-space:nowrap;overflow:hidden}
  .floor-ask{bottom:calc(var(--bottom-chrome-h, 56px) + 42px)}
}
/* liquid identity: context tints the pane edge */
.floor-glass-decision{border-color:rgba(224,128,152,.34)}
.floor-glass-decision{box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09),0 0 34px -14px rgba(224,128,152,.35)}
.floor-glass-chat{border-color:rgba(127,206,158,.3);box-shadow:0 18px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.09),0 0 34px -14px rgba(127,206,158,.3)}
/* the fallback tier: weak GPUs and reduced-transparency users get solid, fast panes */
@media (prefers-reduced-transparency: reduce){
  .sheet,.floor-glass,.toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.985)!important}
  .scrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(4,7,12,.72)!important}
  /* the conversation-era surfaces go solid too (iOS verdict-pass exchange:
     their floor glasses had the same gap) */
  .composer-capsule,.thread-pop,.floor-glass .fg-head{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.99)!important}
  .chat-composer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.94)!important}
}
body.low-gfx .sheet,body.low-gfx .floor-glass,body.low-gfx .toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.985)!important}
body.low-gfx .scrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(4,7,12,.72)!important}
body.low-gfx .composer-capsule,body.low-gfx .thread-pop,body.low-gfx .floor-glass .fg-head{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.99)!important}
body.low-gfx .chat-composer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(13,18,27,.94)!important}

/* the sheet root owns the single grabber above; the head only owns the dismiss
   gesture (touch-action:none keeps Chrome from stealing it as a scroll) */
@media (max-width:720px){
  #floorGlass .fg-head{touch-action:none;position:relative}
}

/* the subscriptions editor: quiet form inside the ledger glass */
.subedit{margin:6px 0}
.se-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.se-in{font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line,rgba(160,170,190,.25));
  background:color-mix(in srgb,var(--raise,#141a24) 80%,transparent);color:var(--ink,#ece7dc);outline:none;min-width:0}
.se-in:focus{border-color:var(--dim,#8fa3b8)}
.se-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.se-err{font-size:12px;color:var(--pink,#e08fb1)}
@media (max-width:480px){.se-grid{grid-template-columns:1fr}}