/* rook-shell.css — structural console CSS: layout, zones, card box model,
   state stripes, verbs/arrows, sheets, expand. Palette via CSS custom properties. */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg); color:var(--text); font-family:var(--mono);
    font-size:15px; line-height:1.5; min-height:100vh; min-height:100dvh; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(1200px 600px at 82% -12%, rgba(110,231,210,.06), transparent 60%),
      radial-gradient(900px 520px at 6% 110%, rgba(167,139,250,.07), transparent 55%);
  }
  ::selection{background:rgba(110,231,210,.25)}
  button{font-family:var(--mono)}

  /* the 3D umwelt field mounts behind everything, in a later pass */
  #field{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; transition:opacity .5s ease}
  @media (max-width:640px){ #field{opacity:.34} }
  body.room{overflow:hidden}
  body.room #field{z-index:5; pointer-events:auto; opacity:1}
  body.room .shell{opacity:.05; pointer-events:none; transition:opacity .4s ease}
  body.room .fieldhud{display:flex}
  .fieldhud{display:none; position:fixed; z-index:6; left:0; right:0; bottom:0; justify-content:center;
    align-items:center; gap:10px; padding:16px; pointer-events:none}
  .fieldhud .fh{pointer-events:auto; background:rgba(13,15,24,.86); border:1px solid var(--line2);
    color:var(--muted); border-radius:999px; padding:8px 15px; font:inherit; font-size:12px; letter-spacing:.03em; cursor:pointer}
  .fieldhud .fh:hover{color:var(--text); border-color:var(--thread)}
  .fieldhud #fhLabel{pointer-events:none; color:var(--thread); background:none; border-color:transparent}
  /* "watch a task collapse" — additive room-mode control (Rung 1) */
  .fieldhud{flex-wrap:wrap}
  .fieldhud #fhColIn::placeholder{color:var(--muted); opacity:.7}
  .fieldhud #fhColIn:focus{outline:none; color:var(--text); border-color:var(--thread)}
  .fieldhud .fhchip{font-size:11px; padding:7px 12px}
  .fieldhud #fhColCap:empty{display:none}

  .shell{position:relative; z-index:1; max-width:900px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column}
  .topbar{
    display:flex; align-items:center; gap:10px; padding:13px 20px; padding-top:max(13px,env(safe-area-inset-top));
    border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
    background:linear-gradient(var(--bg),rgba(10,11,18,.86)); backdrop-filter:blur(8px);
  }
  .dot{width:9px;height:9px;border-radius:50%;background:var(--thread);
    box-shadow:0 0 10px var(--thread); animation:pulse 3.2s ease-in-out infinite; flex-shrink:0}
  .dot.cold{background:var(--faint); box-shadow:none; animation:none}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .brand{font-size:13px; letter-spacing:.06em; white-space:nowrap}
  .brand b{color:var(--thread); font-weight:600}
  .brand .mut{color:var(--faint)}
  .topbar .spacer{flex:1}
  .mood{font-size:11px; color:var(--muted); letter-spacing:.02em; text-align:right; line-height:1.35; max-width:180px}
  .mood .via{color:var(--faint); font-size:10px}

  /* topbar chips → slide-over sheets + modals */
  .chipbtn{background:rgba(255,255,255,.03); border:1px solid var(--line2); color:var(--muted);
    border-radius:9px; padding:6px 9px; font-size:14px; line-height:1; cursor:pointer; position:relative; transition:.15s}
  .chipbtn:hover{color:var(--text); border-color:var(--thread)}
  .chipbtn.on{color:var(--human); border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.08)}
  .unread{position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; font-size:10px;
    font-weight:700; color:var(--bg); background:var(--thread); border-radius:999px; display:flex; align-items:center; justify-content:center}

  /* ─────────── the current: one river, three zones ─────────── */
  #current{padding:14px 20px 130px; display:flex; flex-direction:column}
  .zone{display:flex; flex-direction:column}
  .zhead{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:16px 2px 10px}
  .zsub{font-size:11px; color:var(--faint); margin:12px 2px 8px; letter-spacing:.03em}
  .needshead{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--human);
    border-left:3px solid var(--human); padding:7px 0 7px 11px; margin:4px 0 10px;
    display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
  .needshead.urgent{color:var(--warn); border-left-color:var(--warn)}
  .needshead .calm{color:var(--faint); text-transform:none; letter-spacing:.01em; font-size:11px}
  /* clear the sticky topbar when the open-scroll lands on the highest-leverage action */
  #flowNav .strand, #flowStrands .needshead, #flowStrands .strand, .nowline{scroll-margin-top:70px}
  /* the leverage console + the zip pilot */
  .chipbtn.lev{color:var(--busy); border-color:rgba(251,191,36,.4)}
  .chipbtn.lev:hover{color:var(--bg); background:var(--busy); border-color:var(--busy)}
  .levpanel{position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end}
  .levpanel[hidden]{display:none}
  .levscrim{position:absolute; inset:0; background:rgba(6,7,12,.62); backdrop-filter:blur(4px)}
  .levcard{position:relative; z-index:1; width:min(520px,96vw); height:100dvh; overflow:auto;
    background:var(--surface); border-left:1px solid var(--line2); padding:18px;
    display:flex; flex-direction:column; gap:12px; animation:rise .25s ease}
  @media(max-width:640px){ .levpanel{align-items:flex-end}
    .levcard{width:100%; height:86dvh; border-left:none; border-top:1px solid var(--line2); border-radius:16px 16px 0 0} }
  .levtop{display:flex; align-items:baseline; gap:9px}
  .levtop b{color:var(--busy)} .levsub{color:var(--faint); font-size:12px; flex:1}
  .levx{background:none; border:1px solid var(--line2); color:var(--muted); border-radius:8px; padding:4px 9px; cursor:pointer}
  .levpilot{background:var(--busy); color:var(--bg); border:none; border-radius:10px; padding:11px;
    font:inherit; font-weight:600; cursor:pointer; letter-spacing:.02em}
  .levlist{display:flex; flex-direction:column; gap:4px}
  .levtier{font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin:12px 2px 4px}
  .levrow{display:flex; align-items:center; gap:11px; text-align:left; background:rgba(255,255,255,.02);
    border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:pointer; color:var(--text); font:inherit; width:100%}
  .levrow:hover{border-color:var(--busy); background:rgba(251,191,36,.06)}
  .levn{color:var(--faint); font-variant-numeric:tabular-nums; min-width:18px; text-align:right}
  .levbody{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
  .levtitle{font-size:14px; line-height:1.35}
  .levwhy{font-size:12px; color:var(--muted); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .levgo{color:var(--busy); font-size:12px; white-space:nowrap; opacity:.7}
  .zipbar{position:fixed; left:50%; transform:translateX(-50%); bottom:max(16px,env(safe-area-inset-bottom)); z-index:38;
    display:flex; align-items:center; gap:8px; background:rgba(13,15,24,.92); border:1px solid var(--line2);
    border-radius:999px; padding:7px 9px; box-shadow:0 8px 30px rgba(0,0,0,.4); backdrop-filter:blur(8px); max-width:94vw}
  .zipbar[hidden]{display:none}
  .zb{background:none; border:1px solid var(--line2); color:var(--text); border-radius:999px;
    width:34px; height:34px; cursor:pointer; font-size:13px; flex:none}
  .zb:hover:not(:disabled){border-color:var(--busy); color:var(--busy)}
  .zb:disabled{opacity:.3; cursor:default}
  .zipmid{display:flex; flex-direction:column; align-items:center; min-width:0; padding:0 4px}
  .zippos{font-size:10px; color:var(--faint); letter-spacing:.1em}
  .zipnow{font-size:12px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:48vw}
  .strand.zipped{box-shadow:0 0 0 2px var(--busy), 0 0 24px rgba(251,191,36,.28)}
  .zone.forecast .strand{opacity:.9}
  .zone.achievements .zhead{color:var(--awake)}

  .nowline{display:flex; align-items:center; gap:10px; margin:16px 0 6px; padding:9px 2px;
    border-top:1px dashed var(--line2); border-bottom:1px dashed var(--line2);
    font-family:var(--sans); font-size:12.5px; color:var(--muted); letter-spacing:.02em}
  .nowline .ndot{width:8px;height:8px;border-radius:50%;background:var(--thread);
    box-shadow:0 0 10px var(--thread); animation:pulse 3.2s ease-in-out infinite; flex-shrink:0}
  .nowline .cd{color:var(--warn); font-weight:600} .nowline .cf{color:var(--thread)} .nowline .cp{color:var(--faint)}

  /* push-in composer — Luke's violet voice */
  .pushin{display:flex; gap:9px; align-items:flex-end; margin:2px 0 6px}
  .pushin textarea{flex:1; resize:none; background:var(--surface); color:var(--text); border:1px solid var(--line2);
    border-radius:10px; padding:11px 13px; font-family:var(--sans); font-size:14.5px; min-height:46px; max-height:140px}
  .pushin textarea:focus{outline:none; border-color:var(--human)}
  .pushmsg{font-family:var(--sans); font-size:12.5px; color:var(--human); min-height:16px; margin:0 2px 8px}
  .send{background:var(--thread); color:var(--bg); border:none; border-radius:10px; padding:0 16px; height:46px;
    font-weight:700; font-size:14px; cursor:pointer; letter-spacing:.02em; transition:.15s; flex-shrink:0}
  .send:hover{filter:brightness(1.08)}
  .send:disabled{opacity:.45; cursor:default}

  /* ─────────── the ONE unified card ─────────── */
  .strand{border:1px solid var(--line); border-left:3px solid var(--sc,var(--faint)); border-radius:11px;
    background:var(--surface); padding:13px 15px; margin-bottom:10px; position:relative;
    transition:border-color .5s, background .5s, opacity .4s}
  .strand .stitle{font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--text);
    display:flex; align-items:baseline; gap:8px}
  .strand .sglyph{color:var(--sc); font-weight:700; flex-shrink:0}
  .strand .stx{flex:1; min-width:0}
  .strand .sseat{margin-left:auto; padding-left:8px; font-size:11px; color:var(--faint); font-weight:400; flex-shrink:0}
  .strand .swhy{font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.5}
  /* the forecast belief-appendage — each strand's ≈when, hung off /forecast */
  .strand .belief{display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-family:var(--mono);
    font-size:11px; color:var(--muted); letter-spacing:.02em; cursor:default}
  .strand .belief .bp{color:var(--text)}
  .strand .belief .bproj{color:var(--faint)}
  .strand .belief .bdot{width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0}
  .strand .belief .bp90{color:var(--faint)}
  .strand .belief.proj{color:var(--faint)} .strand .belief.proj .bp{color:var(--muted)}
  /* the commitment chip (order 1.7) — lease truth from commitd: who HOLDS it + a quiet TTL */
  .strand .commit{display:inline-flex; align-items:center; gap:6px; margin-top:6px; margin-right:10px;
    font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.02em; cursor:default}
  .strand .commit .cholder{color:var(--text)}
  .strand .commit .cttl{color:var(--faint); font-variant-numeric:tabular-nums}
  .strand .commit .cttl.low{color:var(--warn)}

  /* the walk co-pilot — Mycel: a task-scoped conversation with a clearly-named bot */
  .walkpanel{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
  .walkpanel[hidden]{display:none}   /* the class's display:flex overrides the bare `hidden` attr — this restores it (matches every sibling panel) */
  @media(min-width:720px){ .walkpanel{align-items:center} }
  .walkscrim{position:absolute; inset:0; background:rgba(4,6,10,.62); backdrop-filter:blur(2px)}
  .walkcard{position:relative; width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--line2); border-radius:18px 18px 0 0; overflow:hidden;
    box-shadow:0 -18px 60px rgba(0,0,0,.5)}
  @media(min-width:720px){ .walkcard{border-radius:16px; max-height:80vh} }
  .walktop{display:flex; align-items:flex-start; gap:10px; padding:14px 15px; border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(167,139,250,.08), transparent)}
  .walktop .wglyph{font-size:19px; line-height:1.3}
  .walktop .wmeta{flex:1; min-width:0}
  .walktop .wtitle{font-family:var(--sans); font-weight:600; font-size:14px; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .walktop .wwho{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:3px; letter-spacing:.02em}
  .walktop .wwho b{color:var(--human); font-weight:600}
  .walktop .wbadge{color:var(--thread)}
  .walkx{background:none; border:0; color:var(--faint); font-size:15px; cursor:pointer; padding:2px 4px}
  .walkx:hover{color:var(--text)}
  .walkmsgs{flex:1; overflow-y:auto; padding:14px 15px; display:flex; flex-direction:column; gap:12px}
  .wbub{max-width:86%; font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word}
  .wbub.mycel{align-self:flex-start}
  .wbub.luke{align-self:flex-end}
  .wbub .wtag{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--faint); margin-bottom:3px}
  .wbub.mycel .wtag b{color:var(--thread)}
  .wbub.luke .wtag{text-align:right; color:var(--human)}
  .wbub .wbody{padding:9px 12px; border-radius:12px}
  .wbub.mycel .wbody{background:var(--surface2, rgba(110,231,210,.06)); border:1px solid rgba(110,231,210,.18); border-top-left-radius:4px; color:var(--text)}
  .wbub.luke .wbody{background:rgba(167,139,250,.10); border:1px solid rgba(167,139,250,.28); border-top-right-radius:4px; color:var(--text)}
  .wthinking{align-self:flex-start; font-family:var(--mono); font-size:11.5px; color:var(--faint); padding:2px 4px}
  .wthinking b{color:var(--thread)}
  .wthinking .wd{display:inline-block; animation:wdots 1.4s steps(4,end) infinite; overflow:hidden; vertical-align:bottom; width:1.1em}
  @keyframes wdots{0%{width:0}100%{width:1.1em}}
  .walkin{display:flex; gap:8px; padding:11px 13px; border-top:1px solid var(--line); background:var(--bg)}
  .walkin textarea{flex:1; resize:none; background:var(--surface); color:var(--text); border:1px solid var(--line2);
    border-radius:10px; padding:9px 11px; font-family:var(--sans); font-size:13.5px; line-height:1.4; max-height:120px}
  .walkin textarea:focus{outline:none; border-color:var(--thread)}
  .walkin .send{background:var(--human); color:#0c0913; border:0; border-radius:10px; padding:0 14px; font-weight:600;
    font-family:var(--sans); font-size:13px; cursor:pointer; white-space:nowrap}
  .walkin .send:disabled{opacity:.5; cursor:default}
  @media (prefers-reduced-motion: reduce){ .wthinking .wd{animation:none; width:1.1em} }
  .strand .sblocks{font-size:11.5px; color:var(--faint); margin-top:6px}
  .strand .sblocks b{color:var(--sc)}
  .strand .sfit{font-size:11px; color:var(--faint); margin-top:5px; letter-spacing:.2px}
  .strand .sfit b{color:var(--thread); font-weight:500}
  .strand .sfit.diverge, .strand .sfit.diverge b{color:var(--warn)}
  /* the event chain that produced this state — Slice 4 provenance */
  .strand .strail{font-family:var(--mono); font-size:10.5px; color:var(--faint); margin-top:6px;
    letter-spacing:.02em; opacity:.72; overflow-x:auto; white-space:nowrap}
  .strand .strail .tarr{opacity:.5; padding:0 1px}

  /* state stripe = the zone language */
  .strand.dammed{--sc:var(--warn)}
  .strand.dammed.amber{--sc:var(--busy)}
  .strand.dammed.now{--sc:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, var(--line));
    background:linear-gradient(90deg, color-mix(in srgb, var(--warn) 8%, var(--surface)), var(--surface) 60%)}
  .strand.dammed.now .sglyph{animation:emberpulse 1.6s ease-in-out infinite}
  @keyframes emberpulse{0%,100%{opacity:1} 50%{opacity:.45}}
  .snow{margin-left:8px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius:5px; padding:1px 6px}
  .strand.flowing{--sc:var(--thread)}
  .strand.flowing::after{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(var(--thread), transparent); background-size:100% 24px;
    animation:flowline 2.4s linear infinite; opacity:.7}
  @keyframes flowline{from{background-position:0 -24px} to{background-position:0 24px}}
  .strand.parked{--sc:var(--faint); opacity:.72}
  .strand.parked .stitle{font-weight:400; color:var(--muted)}
  .strand.parked::after{display:none}
  .strand.review .sglyph{color:var(--warn)}
  .strand.releasing{--sc:var(--thread); background:rgba(110,231,210,.06); animation:release .7s cubic-bezier(.2,.7,.2,1)}
  @keyframes release{0%{transform:translateX(0)} 30%{transform:translateX(7px)} 100%{transform:translateX(0)}}
  /* the navigator — Luke's one move, violet */
  .strand.chair{--sc:var(--human); border-left-color:var(--human);
    background:linear-gradient(90deg, rgba(167,139,250,.07), var(--surface) 62%)}
  .strand.chair::after{display:none}
  .chairlabel{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--human); margin-bottom:8px}
  .whisper{font-family:var(--sans); font-size:12.5px; color:var(--faint); padding:6px 2px}
  /* ambient flowing (reqs, presence, workbench) — quiet status, clamped */
  .strand.ambient{padding:11px 14px}
  .strand.ambient .stx{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .strand.ambient .verbs{margin-top:7px}
  .pool{font-family:var(--sans); font-size:12.5px; color:var(--faint); padding:9px 13px;
    border:1px dashed var(--line2); border-radius:9px; margin-bottom:10px}

  /* verbs — action-first */
  .verbs{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
  .verb{font:inherit; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:9px; cursor:pointer;
    background:transparent; border:1px solid var(--line2); color:var(--text); transition:border-color .15s, background .15s}
  .verb:hover{border-color:var(--thread)}
  .verb:active{transform:translateY(1px)}
  .verb.primary{background:var(--thread); color:var(--bg); border-color:var(--thread)}
  .verb.primary:hover{filter:brightness(1.08)}
  .verb.chair{color:var(--human); border-color:rgba(167,139,250,.5)}
  .verb.chair:hover{background:rgba(167,139,250,.1); border-color:var(--human)}
  .vout{font-family:var(--sans); font-size:12px; color:var(--muted); min-height:15px; margin-top:8px; line-height:1.5}
  .vout.ok{color:var(--human)} .vout.no{color:var(--warn)}
  .cmd{font-family:var(--mono); font-size:12.5px; color:var(--busy); background:rgba(251,191,36,.06);
    border:1px solid rgba(251,191,36,.18); border-radius:8px; padding:9px 11px; margin-top:9px;
    overflow-x:auto; white-space:pre-wrap; line-height:1.5}

  /* ─────────── the two shapes: verb-card ribbon + junction arrow-stack ─────────── */
  /* verb card: the "from → to" state ribbon that rides above the title */
  .strand .stateribbon{display:inline-flex; align-items:center; gap:6px; margin-bottom:6px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}
  .strand .stateribbon .rbfrom{color:var(--muted)}
  .strand .stateribbon .rbarr{color:var(--sc,var(--thread)); opacity:.85}
  .strand .stateribbon .rbto{color:var(--thread)}
  /* the instructions BODY — the card's full text; NEVER clipped (no line-clamp, no slice) */
  .strand .instructions{font-family:var(--sans); font-size:13.5px; line-height:1.6; color:var(--text);
    margin-top:8px; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere}
  /* junction card: the arrows[] as a vertical labeled-button stack (each is one road) */
  .arrows{display:flex; flex-direction:column; gap:7px; margin-top:10px}
  .arrow{font:inherit; font-size:13px; font-weight:600; padding:10px 13px; border-radius:9px; cursor:pointer;
    background:transparent; border:1px solid var(--line2); color:var(--text); text-align:left;
    display:flex; align-items:center; gap:8px; transition:border-color .15s, background .15s}
  .arrow::before{content:'→'; color:var(--sc,var(--thread)); font-weight:700; opacity:.85; flex-shrink:0}
  .arrow:hover{border-color:var(--thread)}
  .arrow:active{transform:translateY(1px)}
  .arrow.primary{background:var(--thread); color:var(--bg); border-color:var(--thread)}
  .arrow.primary::before{color:var(--bg)}
  .arrow.defer{border-style:dashed; color:var(--muted)}
  .arrow.defer::before{content:'↧'; color:var(--muted)}
  .arrow.defer:hover{color:var(--text)}
  /* talk-back — the small ↩ affordance every non-ambient card carries */
  .talkrow{margin-top:9px}
  .talk{background:none; border:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer;
    padding:2px 0; letter-spacing:.02em; opacity:.9; transition:color .15s}
  .talk:hover{color:var(--thread)}
  /* the defer sink — a .releasing-style morph that settles the card downward; the tick reconciles */
  .strand.sinking{--sc:var(--thread); background:rgba(110,231,210,.05); opacity:.72;
    animation:sink .6s cubic-bezier(.2,.7,.2,1)}
  @keyframes sink{0%{transform:translateY(0)} 40%{transform:translateY(8px)} 100%{transform:translateY(0)}}
  /* the composer scope chip — shows which card a talk-back is aimed at */
  .sayscope{display:flex; align-items:center; gap:8px; margin:2px 0 8px; font-family:var(--sans);
    font-size:12px; color:var(--muted)}
  .sayscope[hidden]{display:none}
  .sayscope .scref{color:var(--thread)}
  .sayscope .scx{background:none; border:1px solid var(--line2); color:var(--faint); border-radius:8px;
    padding:1px 8px; font:inherit; font-size:11px; cursor:pointer}
  .sayscope .scx:hover{color:var(--text); border-color:var(--thread)}
  /* the ref chip on a thread message — which card the note answered */
  .msg .refchip{margin-left:7px; color:var(--thread); border:1px solid rgba(110,231,210,.28);
    border-radius:10px; padding:0 7px; font-size:10px; letter-spacing:.02em}

  /* the collapsible context (why ▸) */
  .digin{margin-top:9px; background:none; border:none; color:var(--thread); font:inherit; font-size:12.5px;
    cursor:pointer; padding:2px 0; letter-spacing:.02em}
  .rdetail{margin-top:9px; border-top:1px solid rgba(255,255,255,.07); padding-top:11px; display:flex; flex-direction:column; gap:11px}
  .rdetail[hidden]{display:none}
  .rwhat{font-family:var(--sans); font-size:13.5px; line-height:1.58; color:var(--text)}
  .rrefs{display:flex; flex-wrap:wrap; gap:6px}
  .rref{font-size:10.5px; color:var(--faint); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:1px 8px; font-family:var(--mono)}
  .rsteps .rsteph{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
  .rsteps ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px}
  .rsteps li{font-family:var(--sans); font-size:13px; line-height:1.5; color:var(--text)}

  /* inline ask input (release a secret / value) */
  .strand .arow{display:flex; gap:8px; margin-top:10px}
  .strand .arow input{flex:1; min-width:0; font:inherit; font-size:13.5px; color:var(--text); background:var(--bg);
    border:1px solid var(--line); border-radius:9px; padding:11px 12px}
  .strand .arow input:focus{outline:none; border-color:var(--thread)}
  .strand .arow button{font:inherit; font-size:13.5px; font-weight:600; color:var(--bg); background:var(--thread);
    border:none; border-radius:9px; padding:0 15px; cursor:pointer; white-space:nowrap}
  .strand .arow button:active{transform:translateY(1px)}
  .strand .astate{font-family:var(--sans); font-size:12px; min-height:16px; margin-top:7px; color:var(--muted)}
  .strand .astate.ok{color:var(--human)} .strand .astate.no{color:var(--warn)}
  .strand .cardprog{font-family:var(--sans); font-size:12px; margin:7px 0 2px; color:var(--muted)}
  .strand .cardprog.ok{color:var(--human)} .strand .cardprog.no{color:var(--warn)}
  .strand .cardpad .arow button.verb{padding:0 15px; border-radius:9px}

  /* forecast: geodesic "today" band + lanes */
  .zband{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px;
    border:1px solid var(--line); border-radius:9px; background:var(--surface); margin-bottom:12px}
  .zbh{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--thread)}
  .zbchip{font-family:var(--sans); font-size:12px; color:var(--muted); border:1px solid var(--line2); border-radius:20px; padding:3px 9px}
  .lane{display:flex; flex-direction:column; gap:3px; padding:9px 0; border-bottom:1px solid var(--line)}
  .lane:last-child{border-bottom:none}
  .lanetop{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text)}
  .laneout{font-family:var(--sans); font-size:12.5px; color:var(--muted); line-height:1.45}
  .chip{font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border:1px solid currentColor; border-radius:20px}

  /* achievements: landed + lately */
  .landrow{display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid rgba(52,211,153,.1); font-family:var(--sans); font-size:13px}
  .landrow .lg{color:var(--awake); flex-shrink:0}
  .landrow .lt{flex:1; color:#C6D8CF; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .landrow .lst{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--awake);
    border:1px solid rgba(52,211,153,.3); border-radius:20px; padding:2px 8px; flex-shrink:0}
  .feed{display:flex; flex-direction:column; gap:0; margin-top:6px}
  .ev{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid rgba(38,42,61,.5); font-size:13.5px}
  .ev .et{color:var(--faint); font-size:11.5px; flex-shrink:0; width:44px; padding-top:2px}
  .ev .ew{color:var(--awake); font-size:11.5px; flex-shrink:0; width:64px; padding-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ev .ex{font-family:var(--sans); color:#C1C3D2; line-height:1.5}
  .prose{font-family:var(--sans); font-size:14px; line-height:1.6; color:#B9BCCC}

  /* ─────────── slide-over sheets ─────────── */
  .sheet-host{position:fixed; inset:0; z-index:55; display:flex; justify-content:flex-end}
  .sheet-host[hidden]{display:none}
  .sheet-scrim{position:absolute; inset:0; background:rgba(6,7,12,.6); backdrop-filter:blur(3px)}
  .sheet-panel{position:relative; width:min(560px,100%); height:100%; background:var(--bg2);
    border-left:1px solid var(--line2); display:flex; flex-direction:column;
    animation:slidein .28s cubic-bezier(.2,.7,.2,1); box-shadow:-20px 0 60px rgba(0,0,0,.4)}
  @keyframes slidein{from{transform:translateX(28px); opacity:.3} to{transform:none; opacity:1}}
  .sheet-head{display:flex; align-items:center; gap:10px; padding:15px 20px;
    padding-top:max(15px,env(safe-area-inset-top)); border-bottom:1px solid var(--line)}
  .sheet-title{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--thread)}
  .sheet-x{margin-left:auto; background:none; border:1px solid var(--line2); color:var(--muted);
    border-radius:8px; width:32px; height:32px; font-size:15px; cursor:pointer}
  .sheet-x:hover{color:var(--text); border-color:var(--thread)}
  .sheet-body{flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden}
  .sview{flex:1; min-height:0; display:flex; flex-direction:column; padding:18px 20px; overflow-y:auto}
  .sview[hidden]{display:none}
  .sview.thread{overflow:hidden; padding-bottom:14px}
  .eyebrow{font-size:11px; letter-spacing:.22em; color:var(--faint); text-transform:uppercase; margin-bottom:12px}
  .sh1{font-size:20px; font-weight:600; letter-spacing:-.01em; margin-bottom:14px}
  .sh1 .accent{color:var(--thread)}
  @media (max-width:640px){
    .sheet-host{align-items:flex-end}
    .sheet-panel{width:100%; height:90vh; height:90dvh; border-left:none; border-top:1px solid var(--line2);
      border-radius:16px 16px 0 0; animation:rise .3s cubic-bezier(.2,.7,.2,1)}
  }
  @keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

  /* thread */
  .thread{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:4px 2px 14px}
  .msg{max-width:86%; display:flex; flex-direction:column; gap:3px}
  .msg .meta{font-size:10.5px; letter-spacing:.04em; color:var(--faint)}
  .msg .bub{border:1px solid var(--line); border-radius:12px; padding:10px 13px; font-family:var(--sans);
    font-size:14.5px; line-height:1.5; color:#DDDFEA; white-space:pre-wrap; word-wrap:break-word}
  .msg.agent{align-self:flex-start}
  .msg.agent .bub{background:var(--surface); border-color:var(--line2); border-top-left-radius:3px}
  .msg.agent .who{color:var(--thread)}
  .msg.user{align-self:flex-end; align-items:flex-end}
  .msg.user .bub{background:rgba(167,139,250,.10); border-color:rgba(167,139,250,.35); border-top-right-radius:3px}
  .msg.user .who{color:var(--human)}
  .msg .via{color:var(--faint)}
  .msg.user .who .vok{color:var(--human); margin-left:5px}
  .msg.user .who .vno{color:var(--faint); margin-left:5px; font-style:italic}
  .thread .empty{color:var(--faint); font-family:var(--sans); font-size:14px; margin:auto; text-align:center; line-height:1.6}
  .composer{display:flex; gap:9px; align-items:flex-end; border-top:1px solid var(--line); padding-top:13px}
  .composer textarea{flex:1; resize:none; background:var(--surface); color:var(--text); border:1px solid var(--line2);
    border-radius:10px; padding:11px 13px; font-family:var(--sans); font-size:14.5px; line-height:1.4; min-height:46px; max-height:140px}
  .composer textarea:focus{outline:none; border-color:var(--thread)}

  /* desk / queue */
  .card{border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:15px 16px; margin-bottom:12px}
  .card .h{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .card .h .sub{text-transform:none; letter-spacing:0; color:var(--faint); font-weight:400}
  .ticket{border:1px solid var(--line); border-left:3px solid var(--tc,var(--line2)); border-radius:9px;
    background:var(--surface); padding:12px 14px; margin-bottom:9px}
  .ticket .tt{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
  .ticket .tid{font-size:11px; color:var(--faint)}
  .ticket .tstat{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tc,var(--muted));
    border:1px solid var(--line2); border-radius:999px; padding:2px 8px}
  .ticket .tassign{font-size:11px; color:var(--thread)}
  .ticket .tx{font-family:var(--sans); font-size:14px; color:#CDCFDD; margin-top:7px; line-height:1.5}

  /* body sheet: fire + pulse + people + bell */
  .fire{font-family:var(--sans); font-size:14.5px; line-height:1.6; color:#CDCFDD}
  .waterfall{display:block; width:100%; height:76px; border-radius:8px; background:var(--bg);
    border:1px solid var(--line); image-rendering:pixelated}
  .wflabels{display:flex; justify-content:space-between; margin-top:5px; font-size:10px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
  .wflabels span{flex:1}
  .wflabels span:last-child{text-align:right}
  .people{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}
  .person{border:1px solid var(--line); border-left:3px solid var(--pc,var(--faint)); border-radius:9px; background:var(--surface); padding:12px 13px}
  .person .pn{font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--text)}
  .person .pn .node{color:var(--faint); font-weight:400; font-size:12px}
  .person .ps{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pc,var(--muted)); margin-top:3px}
  .person .pd{font-family:var(--sans); font-size:12.5px; color:var(--muted); margin-top:7px; line-height:1.45}
  .person .pa{font-size:10.5px; color:var(--faint); margin-top:6px}
  .bell{display:inline-flex; align-items:center; gap:9px; cursor:pointer; margin-top:4px;
    background:transparent; border:1.5px solid var(--thread); color:var(--thread);
    border-radius:10px; padding:11px 18px; font-size:14px; font-weight:600; letter-spacing:.02em; transition:.15s}
  .bell:hover{background:rgba(110,231,210,.08)}
  .bell:active{transform:translateY(1px)}
  .bellmsg{color:var(--awake); font-size:12.5px; margin-top:9px; min-height:16px; font-family:var(--sans)}

  /* identity + vault modals (kept as-is) */
  .idchip{background:rgba(255,255,255,.03); border:1px solid var(--line2); color:var(--muted);
    border-radius:999px; padding:5px 11px; font-size:11.5px; letter-spacing:.03em; cursor:pointer;
    white-space:nowrap; transition:.15s}
  .idchip:hover{color:var(--text); border-color:var(--thread)}
  .idchip.verified{color:var(--human); border-color:rgba(167,139,250,.5); background:rgba(167,139,250,.08)}
  .idpanel{position:fixed; inset:0; z-index:60; background:rgba(6,7,12,.72); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; padding:22px}
  .idpanel[hidden]{display:none}
  .idcard{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line2);
    border-radius:14px; padding:22px; animation:rise .3s cubic-bezier(.2,.7,.2,1)}
  .idh{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
  .idp{font-family:var(--sans); font-size:13px; line-height:1.55; color:var(--muted); margin-bottom:16px}
  .idp b{color:var(--human)}
  .idl{display:block; font-size:11px; letter-spacing:.06em; color:var(--muted); margin:12px 0 5px}
  .idopt{color:var(--faint); letter-spacing:0; text-transform:none}
  .idi{width:100%; background:var(--bg2); color:var(--text); border:1px solid var(--line2);
    border-radius:9px; padding:10px 12px; font-family:var(--mono); font-size:14px}
  .idi:focus{outline:none; border-color:var(--thread)}
  .idstate{font-family:var(--sans); font-size:12.5px; min-height:18px; margin-top:12px; color:var(--muted)}
  .idstate.ok{color:var(--human)} .idstate.no{color:var(--warn)}
  .idrow{display:flex; gap:9px; margin-top:16px}
  .idsave{flex:1; background:var(--thread); color:var(--bg); border:none; border-radius:9px; padding:11px; font-weight:700; font-size:14px; cursor:pointer}
  .idsave:hover{filter:brightness(1.08)}
  .idclose{background:none; border:1px solid var(--line2); color:var(--muted); border-radius:9px; padding:11px 16px; font-size:14px; cursor:pointer}
  .idclose:hover{color:var(--text)}

  @media (max-width:640px){
    #current{padding:12px 15px 120px}
    .topbar{gap:7px; padding:11px 14px}
    .mood{display:none}
    .msg{max-width:92%}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important; scroll-behavior:auto!important; transition:none!important}}