/* ============================================================
   Desoul Console — "Ledger" design system
   Warm-paper operator's instrument. One deep-green accent for the
   single primary action per screen; amber = waiting on you / uses
   session. Attributes (verdict, relevance) live inline after a
   repo's name; progression (matched→assigned→applied→mined) lives
   in a fixed leading slot as a shape. Nothing shares a channel.
   ============================================================ */
:root{
  --paper:#F7F5F0; --surface:#FFFEFB; --surface-2:#FBFAF6; --raised:#F2EFE6;
  --ink:#1F1D18; --ink-2:#5C584C; --ink-3:#8A8578; --ink-4:#A39D8D;
  --rule:#E6E1D5; --rule-2:#E2DDCF; --rule-3:#D8D2C4; --rule-faint:#F2EEE3;
  --accent:#2F6B4F; --accent-ink:#FDFCF9; --accent-soft:#E7F0E9; --accent-tint:#F2F7F3; --accent-2:#3E8A63;
  --amber:#B0700F; --amber-ink:#8A5A10; --amber-bg:#FBF4E2; --amber-border:#E4CD97;
  --slate:#4A5D82; --crit:#B3402F;
  --v-sub:#2F6B4F; --v-watch:#A06A12; --v-ref:#4A5D82; --v-ignore:#A39D8D;
  --meter-hi:#2F6B4F; --meter-mid:#C9A15B; --meter-lo:#C4BEAE;
  --log-bg:#26251F; --log-fg:#B7B1A0; --log-ok:#8FA398; --log-warn:#D8A03F; --log-crit:#D77A6A;
  --sans:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"Source Code Pro",ui-monospace,Menlo,monospace;
  /* Owner decision 2026-08-08: the console wears the companion's own look — thick ink outline,
     cream fill, hard offset shadow, generous radius — all the way into the data. A rounded display
     face carries the voice; Source Sans 3 still sets body text and Source Code Pro still sets every
     number, because a measurement has to stay a measurement. See docs/claude-design-brief.md. */
  --display:"Baloo 2","Source Sans 3",system-ui,sans-serif;
  --line:#211F19;            /* the outline. One colour, so the whole console is drawn by one pen */
  --line-2:#6B6455;          /* a quieter outline, for things inside something already outlined */
  --pop:4px 4px 0 var(--line);
  --pop-sm:3px 3px 0 var(--line);
  --pop-lg:6px 6px 0 var(--line);
  --bw:2.5px;                /* the pen's width */
  --sb:216px; --radius:10px; --radius-sm:8px; --radius-xs:6px;
  --shadow:0 30px 60px -44px rgba(60,54,38,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;
  background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:rgba(47,107,79,.16)}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:24px}h2{font-size:16px}
code,.mono,.meta{font-family:var(--mono)}
.meta{color:var(--ink-3);font-size:12px}
.meta.never,.never{color:var(--amber)}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.sec-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.empty{color:var(--ink-3);font-size:13px}
p{margin:0 0 10px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}
.nav-item:focus-visible{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.mono,.meta,.grid td,.slot,.vmark,.meter-n,.log,.chip,.tag{font-variant-numeric:tabular-nums}

/* ---- app shell ---- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sidebar{background:var(--surface-2);border-right:1px solid var(--rule);padding:10px 12px;
  display:flex;flex-direction:column;gap:5px;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo-wrap{display:block;padding:0 8px 8px}
.logo-wrap:hover{text-decoration:none}
/* Generated mark, chosen by what survives 18px rather than by taste — scripts/logo.py.
   The console had no logo FILE at all before this; `◈` was a Unicode glyph, which is why
   the generated banner could not carry the mark: there was nothing to hand it. */
.logo-mark{width:100%;max-width:138px;height:auto;object-fit:contain;display:block;margin:0 auto}
/* DESOUL green, CONSOLE black (owner, 2026-08-08). The name carries the accent; the noun after it
   is just the noun. `b` wraps CONSOLE in the markup, so the colours live here and the markup does
   not have to be touched to swap them back. */
.logo-text{font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--accent)}
.logo-text b{color:var(--ink);font-weight:700}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-xs);
  color:var(--ink-2);font-size:13px;font-weight:500}
.nav-item:hover{background:var(--raised);color:var(--ink);text-decoration:none}
.nav-item.active{background:var(--accent-tint);color:var(--accent);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.nav-item.active .ic{stroke:var(--accent)}
/* Every icon in the rail, not only the ones inside a link. The Workshop door's icon sits in a
   <summary>, matched nothing here, and kept the SVG defaults — 89px and solid black, in the
   permanent chrome of all 24 pages. Scope it to the rail so the next icon that is not a link
   cannot repeat it. */
.sidebar .ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav-item.sm{font-size:12px;padding:5px 10px;color:var(--ink-2)}
/* count of sessions parked on a question — the one number that says "go look now" */
.nav-badge{margin-left:auto;background:var(--rust,#a4462f);color:#fff;border-radius:9px;
  padding:0 6px;font-size:10px;font-weight:700;line-height:16px;min-width:16px;text-align:center}
.nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-4);padding:16px 10px 4px}

/* ---- the path (register A: chrome) ----------------------------------------------------------
   The sidebar tells the story: five numbered steps in order, each with its real surfaces under it.
   A rule runs down the numbers so it reads as one sequence rather than five unrelated groups —
   the only ornament in here, and it is doing the work of the sentence nobody wants to write. */
.path-head{display:flex;align-items:baseline;gap:8px;padding:0 10px 6px}
.path-head>span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.path-walk{margin-left:auto;font-size:11px;color:var(--accent);white-space:nowrap;opacity:.85}
.path-walk:hover{opacity:1}
.path-walk.active{font-weight:700;opacity:1}
.nav.path{position:relative}
.nav.path::before{content:'';position:absolute;left:19px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(var(--rule-3),var(--rule-faint))}
.step{display:flex;align-items:center;gap:9px;padding:10px 10px 3px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.step:first-child{padding-top:2px}
.step i{width:19px;height:19px;border-radius:50%;background:var(--surface-2);border:1px solid var(--rule-3);
  color:var(--ink-3);font:600 10px/17px var(--mono);font-style:normal;text-align:center;flex:none;z-index:1}
.step em{font-style:normal;font-weight:400;font-size:10px;letter-spacing:0;text-transform:none;color:var(--ink-4)}
.nav.path .nav-item{margin-left:28px}
/* The step you are standing in. No inset bar here: the skin at the end of this file gives an
   active item the same outline-and-offset-shadow as every other raised thing, and a more specific
   rule up here would quietly beat it (measured — the offset shadow never appeared). */

/* one door for everything off the path — nothing deleted, nothing competing for the front door */
.shop{margin-top:8px;border-top:1px solid var(--rule-faint);padding-top:8px}
.shop>summary{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-xs);
  color:var(--ink-3);font-size:13px;font-weight:500;cursor:pointer;list-style:none}
.shop>summary::-webkit-details-marker{display:none}
.shop>summary:hover{background:var(--raised);color:var(--ink)}
.shop-caret{margin-left:auto;color:var(--ink-4);font-weight:400;
  transition:transform .2s cubic-bezier(.2,.7,.3,1);display:inline-block}
.shop[open] .shop-caret{transform:rotate(90deg)}
.shop .nav-item.sm{margin-left:26px;padding:4px 10px}
/* Config, search and the server stamp travel together and never scroll away. The rail measures
   931px whatever the window is, so at 900 the last item was cut in half and the two below it were
   invisible — with no scrollbar to say so. Pinned it costs nothing at 900, where the path ends at
   747; below ~850 it covers the last step, and at that size the rail is over budget either way. */
.rail-tail{margin-top:auto;position:sticky;bottom:0;display:flex;flex-direction:column;gap:5px;
  background:var(--surface-2);padding:6px 0 4px}
/* Below the height where the path and the tail both fit, the tail stops being pinned. Decided
   2026-08-13 on one rule: it never paints over the path. No CSS invents the missing space, so the
   only choice is which failure you get — a Config below the fold, which a scroll recovers, or a
   step-5 item hidden under an opaque strip, which nothing does. The pin is what makes it opaque,
   so the pin is what goes.

   The threshold is arithmetic, not taste, and it MOVES whenever the path gains an item. Re-measure
   rather than nudge it: it is (where the path ends) + (the tail's height) + the rail's 10px.
     2026-08-13  path ended at 716, tail 172  ->  899
     2026-08-17  path ends   at 750, tail 172  ->  933   (/profile joined step 5)
   Measured at 940 the tail sits at 758 and clears; at 920 it sits at 738 and covers step 5, which
   is precisely the failure tests/test_ui_rendered.py exists to catch — and did, on this change. */
@media (max-height:932px){ .rail-tail{position:static} }
.nav-item.sm.more{color:var(--ink-4);font-size:12px;padding-left:20px}
.nav-item.sm.more:hover{color:var(--accent)}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot.on{background:var(--accent-2)}.dot.off{background:var(--amber)}
/* health status dots (dashy/homepage pattern): ok=ran today, stale=old, none=never */
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;flex:none}
.sdot-ok{background:var(--accent-2)}.sdot-stale{background:var(--amber)}.sdot-none{background:var(--ink-4)}
.palette-btn{display:flex;justify-content:space-between;align-items:center;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-xs);
  color:var(--ink-3);padding:7px 10px;font-size:12px;cursor:pointer;font-family:var(--sans)}
.palette-btn:hover{border-color:var(--rule-3);color:var(--ink-2)}
.palette-btn kbd{font-family:var(--mono);font-size:11px;background:var(--raised);padding:1px 6px;border-radius:4px}
.srv-stamp{font-family:var(--mono);font-size:10px;color:var(--accent-2);padding:10px 10px 2px}

.main{min-width:0}
.topbar{display:flex;align-items:baseline;gap:12px;padding:14px 32px;border-bottom:1px solid var(--rule);
  background:var(--surface-2);position:sticky;top:0;z-index:10}
.crumbs{display:flex;align-items:baseline;gap:12px;flex:1;min-width:0}
.crumb{font-size:15px;font-weight:600}
.crumb-sep{color:var(--ink-3);font-size:13px;font-weight:400}
.topbar-meta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* The bottom padding is the companion's height, not a taste value. She is fixed in the corner at
   104px square, and a page exactly one viewport tall has nowhere to scroll — on Today that left a
   relevance score permanently under her arm. The slack is what lets anything she covers be
   scrolled clear. */
.content{max-width:1200px;padding:26px 32px 120px}

/* ---- buttons: one vocabulary ---- */
.btn{background:var(--surface);color:#3F3C33;border:1px solid var(--rule-3);border-radius:7px;
  padding:8px 15px;font-size:13px;font-weight:500;font-family:var(--sans);cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s}
.btn:hover{border-color:var(--ink-4);text-decoration:none}
.btn:active{background:var(--raised)}
.btn:disabled{opacity:.5;cursor:default;color:var(--ink-4)}
.btn:disabled:hover{border-color:var(--rule-3)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn-primary:hover{background:#28603f;border-color:#28603f}
.btn-amber,.btn.paid,.paid{background:var(--amber-bg);color:var(--amber-ink);border-color:var(--amber-border);font-weight:600}
.btn-amber:hover,.btn.paid:hover{border-color:#d6b877}
.btn-quiet{background:transparent;border:none;color:var(--ink-2);padding:8px 4px;font-size:13px;
  font-family:var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-3)}
.btn-quiet:hover{color:var(--ink)}
.btn-sm{padding:6px 12px;font-size:12px}
.apply-btn,.batch-apply,.mine-skill,.propose-btn{background:var(--surface);color:#3F3C33;border:1px solid var(--rule-3);
  border-radius:7px;padding:6px 12px;font-size:12px;font-weight:500;font-family:var(--sans);cursor:pointer}
.apply-btn:hover,.batch-apply:hover,.mine-skill:hover,.propose-btn:hover{border-color:var(--ink-4)}
.propose-btn{color:var(--accent);border-color:var(--accent)}
.propose-btn:hover{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.copy-cmd{cursor:pointer}
.inline-form{display:inline}

/* ---- cards & sections ---- */
.card{background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:16px}
.card.pad-0{padding:0;overflow:hidden}
.card-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.card-head .sec-label{margin:0}
.card-head .right{margin-left:auto}
.screen{background:var(--surface-2);border:1px solid var(--rule-3);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:24px;align-items:start}
.stack{display:flex;flex-direction:column;gap:22px;min-width:0}
.section-gap{margin-top:26px}

/* ---- decision hero (Today) ---- */
.decision{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.decision-h{font-size:27px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:8px 0 0}
.decision-sub{font-size:13px;color:var(--ink-2);margin:7px 0 0}
.decision-actions{display:flex;gap:10px;flex:none;padding-bottom:4px}

/* ---- pipeline strip ---- */
.pipe{display:flex;border:1px solid var(--rule-2);background:var(--surface);border-radius:var(--radius-sm);
  overflow:hidden;margin:22px 0}
.pipe-cell{flex:1;padding:11px 18px;border-left:1px solid var(--rule-faint);display:flex;flex-direction:column;gap:3px}
.pipe-cell:first-child{border-left:none}
.pipe-cell .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.pipe-cell .v{font-size:13px}
.pipe-cell .t{font-family:var(--mono);font-size:10px;color:var(--accent-2)}
.pipe-cell .t.never{color:var(--amber)}

/* ---- needs-me item (amber-edged) ---- */
.needs-item{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--amber-border);
  border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:14px}
.needs-item .icn{width:18px;text-align:center;color:var(--amber);font-size:13px;flex:none}
.needs-item .body{min-width:0;flex:1}
.needs-item .body b{font-weight:600}

/* ---- ledger rows ---- */
.rows{background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);overflow:hidden}
.row{display:grid;gap:14px;padding:11px 16px;border-top:1px solid var(--rule-faint);align-items:start}
.row:first-child{border-top:none}
.row.head{background:var(--surface-2);border-top:none;padding:8px 16px}
.row.head span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}
.row-group{display:flex;align-items:baseline;gap:10px;padding:11px 16px 8px;border-top:1px solid var(--rule-faint);background:var(--surface-2)}
.row-group:first-child{border-top:none}
.row-group .right{margin-left:auto}
.row--svm{grid-template-columns:22px minmax(0,1fr) 60px}
.row--sv{grid-template-columns:22px minmax(0,1fr) auto}
.row--catalog{grid-template-columns:22px minmax(0,1fr) 196px 60px}
.row--plan{grid-template-columns:28px minmax(0,1fr) 118px 92px}
.row--run{grid-template-columns:128px minmax(0,1fr) 108px 108px 84px}
.row--tl{grid-template-columns:104px 92px minmax(0,1fr);align-items:baseline;border-top:none;padding:9px 16px}
.row-name{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.row-repo{font-size:13px;font-weight:600;color:var(--ink)}
.row-essence{font-size:12px;color:var(--ink-2);margin-top:3px;max-width:82ch}
.row-tags{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:4px}
.row-benefit{font-size:12px;line-height:1.45;color:var(--ink-2);margin-top:4px;max-width:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none;cursor:pointer}
.row-benefit:hover{color:var(--ink-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.row-benefit-more{color:var(--accent);white-space:nowrap;font-weight:500}
.row-more{display:block;padding:9px 16px 11px 52px;border-top:1px solid var(--rule-faint);font-size:12px;color:var(--accent)}
.rows-foot{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:10px}

/* ---- reports: a digest names itself and can be sent ---- */
.row--report{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.rep-sum{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:4px}

/* ---- triage: one row, one decision. Everything here rides the existing .row, so the queue
   wears the same skin as every other list and only the focus/exit states are new. ---- */
.row--triage{grid-template-columns:12px minmax(0,1fr) 60px 152px;align-items:center}
.tri-ev{width:8px;height:8px;border-radius:50%;background:var(--rule-3)}
.tri-ev.ev2{background:var(--meter-mid)}
.tri-ev.ev3{background:var(--accent)}
/* The same source queued behind another project name — 19% of the queue on 2026-08-13. Quiet: it
   is a fact about the row, not a verdict on it. */
.tri-also{font-family:var(--mono);font-size:10px;color:var(--ink-4);white-space:nowrap}
.tri-also kbd{font-family:var(--mono);font-size:10px;background:var(--raised);padding:0 3px;border-radius:3px}
.tri-row.on{outline:2px solid var(--accent);outline-offset:2px}
.tri-row:focus{outline:2px solid var(--accent);outline-offset:2px}
.tri-row.gone{display:none}
.tri-acts{display:flex;gap:8px;justify-content:flex-end}
.tri-foot{display:flex;align-items:center;gap:14px;margin-top:14px;
  font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.tri-save{color:var(--accent-2)}
.tri-save.bad{color:var(--crit)}
.decision-sub kbd{font-family:var(--mono);font-size:11px;background:var(--raised);
  border:1px solid var(--rule-3);border-radius:4px;padding:1px 5px}
.ext{font-family:var(--mono);font-size:10px;color:var(--ink-4)}

/* ---- state system ---- */
.slot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;margin-top:1px;font-size:12px}
.slot-none{color:var(--ink-4);font-size:14px}
.slot-matched{color:var(--ink-3)}
.slot-assigned{color:var(--ink);font-size:11px}
.slot-applied{border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:10px}
.slot-mined{color:var(--accent);font-size:13px}
.vmark{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;white-space:nowrap}
.vmark-SUBSCRIBE{color:var(--v-sub)}
.vmark-WATCH{color:var(--v-watch)}
.vmark-REFERENCE{color:var(--v-ref)}
.vmark-IGNORE{color:var(--v-ignore)}
.meter{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;justify-self:end}
.meter-n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink)}
.meter-bar{width:44px;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}
.meter-fill{display:block;height:100%}
.meter-hi{background:var(--meter-hi)}.meter-mid{background:var(--meter-mid)}.meter-lo{background:var(--meter-lo)}
.routed{display:flex;flex-direction:column;gap:3px;min-width:0}
.routed-to{font-size:12px;color:var(--ink-2)}
.routed-stage{font-family:var(--mono);font-size:10px}

/* ---- chips / tags / badges / view-chips ---- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--ink-2);
  background:var(--raised);border-radius:5px;padding:3px 9px}
.chip .k{color:var(--ink-4)}
.tag{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.badge{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;border-radius:4px;padding:2px 8px}
.badge-active{color:var(--accent-2);background:var(--accent-soft)}
.badge-hold{color:var(--amber-ink);background:var(--amber-bg)}
.badge-ver{color:var(--ink-2);background:var(--raised);letter-spacing:.04em}
.viewchips{display:flex;gap:6px;flex-wrap:wrap}
.vchip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:16px;border:1px solid var(--rule-3);
  color:var(--ink-2);font-size:12px;background:var(--surface)}
.vchip span{font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.vchip:hover{border-color:var(--ink-4);text-decoration:none}
.vchip.on{background:var(--ink);color:var(--accent-ink);border-color:var(--ink);font-weight:600}
.vchip.on span{color:#B7B1A0}
.vchip.warn span{color:var(--amber)}

/* category index (Vault-style: taxonomy with counts, one-click drill) */
.catchips{display:flex;gap:5px;flex-wrap:wrap;margin:-4px 0 16px}
.catchip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:13px;
  border:1px solid var(--rule-faint);color:var(--ink-2);font-size:11px;background:var(--surface-2)}
.catchip span{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.catchip:hover{border-color:var(--ink-4);text-decoration:none}
.catchip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.catchip.on span{color:var(--accent-2)}
.filter-count{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.is-hidden{display:none!important}

/* ---- knowledge graph / wiki (slice 1: pages + backlinks) ---- */
.ntype{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;flex:none}
.ntype-project{background:var(--accent)}.ntype-research{background:var(--slate)}
.ntype-memory{background:var(--amber)}.ntype-doc{background:var(--ink-3)}
.ntype-source{background:#7E6BA6}.ntype-ghost{background:var(--ink-4)}
.glist{display:flex;flex-direction:column;border:1px solid var(--rule-2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.gnode{display:flex;align-items:center;gap:2px;padding:8px 14px;border-top:1px solid var(--rule-faint);color:var(--ink)}
.gnode:first-child{border-top:none}
.gnode:hover{background:var(--surface-2);text-decoration:none}
.gnode-title{font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gnode-meta{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4);flex:none;padding-left:12px}
.wiki{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.wiki-head{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.wiki-title{font-size:21px;font-weight:600;margin:0;min-width:0}
.wiki-path{font-family:var(--mono);font-size:11px;margin-bottom:14px;word-break:break-all}
.wiki-rail{display:flex;flex-direction:column;gap:14px}
.linklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.linklist li{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 0;min-width:0}
.linklist a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
.linklist .rel{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;flex:none;padding-left:6px}
.linklist .ghost{color:var(--ink-4);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
@media (max-width:820px){.wiki{grid-template-columns:1fr}}
/* graph canvas (slice 2) */
.graphwrap{position:relative;border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
#graph-svg{display:block;width:100%;height:calc(100vh - 148px);min-height:520px;touch-action:none;cursor:grab}
#graph-svg:active{cursor:grabbing}
.gedge{stroke:var(--rule-3);stroke-width:1;pointer-events:none}
.gedge.hot{stroke:var(--ink-3);stroke-width:1.4}
.gedge.dim{stroke:var(--rule-faint)}
/* planning (layered) graph: subtle flow animates the Idea→…→Tasks path left→right */
.gedge.flow{stroke-dasharray:5 7;animation:gflow 1.05s linear infinite}
@keyframes gflow{to{stroke-dashoffset:-12}}
@media (prefers-reduced-motion:reduce){.gedge.flow{animation:none;stroke-dasharray:none}}
/* injected view control: zoom-level readout + fit-to-view button (both graphs) */
.gzoom{position:absolute;top:10px;right:10px;z-index:5;display:flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:8px;padding:3px 4px 3px 9px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.gzoom-pct{font-family:var(--mono);font-size:10px;color:var(--ink-3);min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.gzoom-fit{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--rule-3);border-radius:6px;padding:3px 9px;cursor:pointer}
.gzoom-fit:hover{border-color:var(--ink-4);color:var(--ink)}
.hull{fill-opacity:.05;stroke-opacity:.13;stroke-width:30;stroke-linejoin:round;pointer-events:none;transition:opacity .2s}
.gnode-c circle{stroke:var(--surface);stroke-width:1.5}
.gnode-c circle.pinned{stroke-dasharray:2.5 2}
.gnode-c circle.bridge{stroke:#C8912E;stroke-width:2.6}
.gnode-c circle.hit{stroke:var(--ink);stroke-width:3}
.glabel{font-family:var(--sans);font-size:9px;fill:var(--ink-2);pointer-events:none;paint-order:stroke;stroke:var(--surface);stroke-width:2.6px;stroke-linejoin:round}
.gcol-label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-3);pointer-events:none}
/* AI News — real news-feed cards */
.newsfeed{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.ncard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);overflow:hidden;color:var(--ink)}
.ncard:hover{border-color:var(--ink-4);text-decoration:none;box-shadow:0 5px 18px rgba(0,0,0,.06)}
.ncard-thumb{position:relative;aspect-ratio:2/1;background:var(--raised)}
.ncard-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ncard-thumb .nsig{position:absolute;top:9px;left:9px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:5px}
.sig-adapt{background:var(--accent);color:var(--accent-ink)}
.sig-investigate{background:var(--surface);color:var(--slate);border:1px solid var(--rule-3)}
/* applicability badge (reviewed news): read=neutral, skip=muted */
.sig-read{background:var(--surface);color:var(--slate);border:1px solid var(--rule-3)}
.sig-skip{background:var(--surface);color:var(--ink-4);border:1px solid var(--rule-3);opacity:.8}
/* applicability filter row */
.applicchips{margin-top:-8px}
.chiplabel{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);align-self:center;margin-right:2px}
.sigdot{width:7px;height:7px;border-radius:50%;display:inline-block;border:1px solid var(--rule-3)}
.sigdot.sig-adapt{background:var(--accent);border-color:var(--accent)}
.sigdot.sig-read{background:var(--slate)}
.sigdot.sig-skip{background:var(--ink-4);opacity:.6}
/* Papers section (Catalog): text-only arXiv concept cards */
.papergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:14px}
.pcard{display:flex;flex-direction:column;gap:6px;padding:13px 15px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.pcard:hover{border-color:var(--ink-4);text-decoration:none;box-shadow:0 5px 18px rgba(0,0,0,.06)}
.pcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pcard-meta{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.pcard-sig{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:5px;flex:none}
.pcard-title{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.pcard-auth{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-body{font-size:12px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.pcard-cat{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2);background:var(--accent-soft);padding:2px 7px;border-radius:5px}
/* paper detail page */
.doc-title{font-size:22px;font-weight:600;color:var(--ink);line-height:1.25;margin:6px 0 12px;max-width:70ch}
.doc-auth{font-size:13px;color:var(--ink-3);margin:0 0 4px}
.paper-note{margin:14px 0;padding:11px 14px;border-left:3px solid var(--accent);background:var(--raised);border-radius:0 6px 6px 0;font-size:14px;color:var(--ink);line-height:1.5}
.paper-note .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:3px}
.paper-apply{border-left-color:var(--slate)}
.paper-apply .k{color:var(--slate)}
.paper-abs{font-size:14px;color:var(--ink-2);line-height:1.6;max-width:72ch}
/* Usage dashboard */
.ustats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ustat{padding:14px 16px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm)}
.ustat-muted{opacity:.72}
.ustat-k{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.ustat-v{font-size:26px;font-weight:600;color:var(--ink);margin:4px 0 3px;font-variant-numeric:tabular-nums;line-height:1}
.ustat-sub{font-size:11px;color:var(--ink-3)}
/* estimated limit gauges (Claude-panel style) */
.ulim-cal{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:none;color:var(--ink-4);font-weight:400}
.ulimits{display:flex;flex-direction:column;gap:12px}
.ulim-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.ulim-k{font-size:12px;color:var(--ink-2);font-weight:500}
.ulim-p{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ulim-track{height:7px;background:var(--rule-2);border-radius:5px;overflow:hidden}
.ulim-fill{height:100%;border-radius:5px;background:var(--accent);transition:width .4s ease}
.ulim-session .ulim-fill{background:var(--accent)}
.ulim-today .ulim-fill{background:var(--accent-2,var(--accent))}
.ulim-weekly .ulim-fill{background:var(--amber)}
.ulim-weekly .ulim-p,.ulim-note b{color:var(--amber-ink)}
.ulim-note{font-size:11px;color:var(--ink-4);margin-top:10px;line-height:1.5}
/* usage subtabs (Window | Setup hygiene) */
.usubtabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--rule-2)}
.usubtab{padding:8px 16px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.usubtab:hover{color:var(--ink)}
.usubtab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
/* setup hygiene */
.ustat-of{font-size:15px;color:var(--ink-3);font-weight:400}
.urow-scope,.setup-chip em{font-style:normal;color:var(--ink-4);font-family:var(--mono);font-size:10px}
.setup-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.setup-chip{display:inline-flex;gap:5px;align-items:baseline;background:var(--surface);border:1px solid var(--rule-2);border-radius:20px;padding:4px 11px;font-size:11px;color:var(--ink-2)}
.setup-chip.dup{border-color:var(--amber-border);background:var(--amber-bg);color:var(--amber-ink)}
.setup-dup{margin-top:12px;font-size:11px;color:var(--amber-ink);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:var(--radius-sm);padding:9px 12px;line-height:1.5}
.setup-noreview{color:var(--ink-3);font-size:12px;line-height:1.6}
.ubars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 4px;border-bottom:1px solid var(--rule-2)}
.ubar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.ubar-fill{width:70%;max-width:44px;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.ubar-lbl{font-family:var(--mono);font-size:9px;color:var(--ink-4);margin-top:5px;white-space:nowrap}
.ucols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:8px}
@media (max-width:640px){.ucols{grid-template-columns:1fr}}
.urow{display:flex;align-items:center;gap:9px;margin:5px 0}
.urow-name{font-size:12px;color:var(--ink-2);width:130px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow-track{flex:1;height:8px;background:var(--raised);border-radius:4px;overflow:hidden}
.urow-fill{height:100%;background:var(--accent);border-radius:4px}
.urow-fill.mdl-opus{background:var(--accent)}.urow-fill.mdl-sonnet{background:var(--slate)}
.urow-fill.mdl-haiku{background:var(--rule-3)}.urow-fill.mdl-fable{background:var(--accent-2)}
.urow-pct{font-family:var(--mono);font-size:10px;color:var(--ink-3);width:34px;text-align:right;font-variant-numeric:tabular-nums}
.uwaste{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ucard{padding:13px 15px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm)}
.ucard-v{font-size:22px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ucard-k{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:3px 0 4px}
.ucard-h{font-size:11px;color:var(--ink-4);line-height:1.4}
/* bottom-left usage button + closable modal */
.usage-btn{display:flex;align-items:center;gap:8px;width:100%;margin-top:6px;padding:7px 11px;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);color:var(--ink-3);font-family:var(--sans);font-size:12px;cursor:pointer;text-align:left}
.usage-btn:hover{border-color:var(--rule-3);color:var(--ink)}
.usage-btn.active{background:var(--accent-tint);border-color:var(--accent-soft);color:var(--accent);font-weight:600}
.usage-btn.active .ic{stroke:var(--accent)}
.usage-btn .ic{width:15px;height:15px;flex:none}
.umodal{position:fixed;inset:0;background:rgba(60,54,38,.28);z-index:55;backdrop-filter:blur(2px);overflow-y:auto}
.umodal-panel{position:relative;width:min(880px,94vw);margin:6vh auto;background:var(--surface);border:1px solid var(--rule-3);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:22px 26px 26px}
.umodal-close{position:absolute;top:12px;right:14px;width:28px;height:28px;border:1px solid var(--rule-2);background:var(--surface);border-radius:6px;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer}
.umodal-close:hover{border-color:var(--ink-4);color:var(--ink)}
.urec{font-size:13px;color:var(--ink-2);line-height:1.6;background:var(--raised);border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:14px 16px}
.urec h1,.urec h2,.urec h3{font-size:14px;color:var(--ink);margin:10px 0 5px}
.urec h1:first-child,.urec h2:first-child,.urec h3:first-child{margin-top:0}
.urec ul{margin:6px 0;padding-left:20px}
.urec li{margin:3px 0}
.urec strong{color:var(--ink)}
.upast{margin-top:10px}
.upast summary{cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);padding:4px 0}
.upast summary:hover{color:var(--ink-3)}
.upast-item{margin-top:8px;opacity:.85}
.upast-date{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
/* tokens/$ toggle */
.umode-toggle{display:flex;gap:2px;flex:none;padding-bottom:4px;background:var(--raised);border:1px solid var(--rule-2);border-radius:8px;padding:2px}
.umode-btn{font-family:var(--mono);font-size:11px;letter-spacing:.03em;padding:5px 11px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);cursor:pointer}
.umode-btn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.upanel[data-mode="tok"] .umode-usd{display:none}
.upanel[data-mode="usd"] .umode-tok{display:none}
.urow-pct{width:auto;min-width:34px;display:inline-flex;justify-content:flex-end}
.ncard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.ncard-meta{font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.ncard-title{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncard-brief{font-size:13px;color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ncard-src{margin-top:auto;padding-top:4px;font-size:10px;color:var(--ink-4);line-height:1.6}
.ncard-more{color:var(--accent);font-weight:500}
.ncard-thumb .nsrc{position:absolute;bottom:8px;left:8px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:5px;background:rgba(31,29,24,.82);color:#fff}
.ncard-title.newstitle{font-family:var(--sans);font-size:15px;font-weight:600;white-space:normal;line-height:1.3;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 6px}
.ncard-thumb .noimg-label{display:none}
.ncard-thumb.noimg{background:linear-gradient(135deg,var(--raised),var(--surface-2));display:flex;align-items:center;justify-content:center}
.ncard-thumb.noimg img,.ncard-thumb.noimg .nsrc{display:none}
.ncard-thumb.noimg .noimg-label{display:block;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.03em}
.graph-hint{position:absolute;left:12px;bottom:10px;pointer-events:none;background:var(--surface);padding:2px 7px;border-radius:6px;opacity:.9}
.typetoggles{display:flex;gap:5px;flex-wrap:wrap}
.ttog{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:14px;border:1px solid var(--rule-3);background:var(--surface);color:var(--ink-2);font-size:11px;font-family:var(--sans);cursor:pointer}
.ttog .tc{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.ttog:hover{border-color:var(--ink-4)}
.ttog.off{opacity:.5}.ttog.off .ntype{filter:grayscale(1)}
.gcheck{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer}
.gcheck input{accent-color:var(--accent);cursor:pointer}
.rolegrid{display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center}
.rolechk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);cursor:pointer;font-family:var(--mono)}
.rolechk input{accent-color:var(--accent);cursor:pointer}
/* MCP picker (constitution page) — which servers a session in this project may reach.
   .rolegrid's bigger sibling: 14 servers rather than 8 roles, so it bands them by WHERE the
   server comes from, because "why is this even on offer" is the question you ask before "do I
   want it". Three columns at the card's 1095px, folding to two then one — a list you scan.
   The two submit buttons ARE the mode (see docs/mcp-card-design.md): ticking nothing and
   pressing `scope to ticked` saves NONE, which is a different stored state from never having
   scoped at all, and no radio or hidden field has to be got right for that to be true. */
.mcp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:7px 18px;
  align-items:baseline}
.mcp-group{grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:12px;
  color:var(--ink);margin-top:12px}
.mcp-group:first-child{margin-top:2px}
.mcpchk{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-2);
  font-family:var(--mono);cursor:pointer;min-width:0}
.mcpchk input{accent-color:var(--accent);cursor:pointer;flex:none}
.mcpchk em{font-style:normal;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* amber is "waiting on you" everywhere else in this system, so only the reason you can act on
   earns it; a server shipped with no url is inert, not pending, and reads grey. */
.mcpchk .why{color:var(--ink-4);flex:none}
.mcpchk .why.act{color:var(--amber-ink)}
.mcpchk.off{color:var(--ink-4);cursor:default}
.mcpchk.off input{cursor:not-allowed}
.mcp-foot{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:16px;border-top:1px solid var(--rule-2);padding-top:13px}
.mcp-foot .meta{margin:0;flex:1 1 420px;line-height:1.5}
.mcp-foot .btn{margin-left:auto}
.mcp-foot .btn-quiet{margin-left:0}
/* progression roadmap (slice 4) */
.rmap-next{font-size:13px;margin:4px 0 12px;color:var(--ink)}
.rmap-next .k{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-right:9px}
.rmap-pain{display:flex;flex-direction:column;gap:4px;margin:0 0 14px}
.pain{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.pain-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
.rmap-ms{border-left:2px solid var(--rule-2);padding-left:16px;margin:2px 0 2px 3px}
.rmap-ver{display:flex;align-items:baseline;gap:10px;margin-top:11px;position:relative}
.rmap-ver::before{content:"";position:absolute;left:-21px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.rmap-ver .ver{font-weight:600;font-size:13px}
.rmap-ver .ver-date{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.rmap-items{margin:3px 0 0;padding-left:16px;color:var(--ink-2);font-size:12px;line-height:1.65}
.glegend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-2px 0 12px;align-items:center}
.lchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2)}
.lchip:hover{color:var(--ink);text-decoration:none}
.lchip.muted{color:var(--ink-4)}
.lswatch{width:9px;height:9px;border-radius:3px;flex:none}
.gtip{position:fixed;z-index:60;max-width:290px;pointer-events:none;background:var(--ink);color:var(--surface);
  padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.42;box-shadow:0 4px 18px rgba(0,0,0,.2)}
.gtip b{display:block;font-size:12px;margin-bottom:1px}
.gtip .tt{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.07em;opacity:.6}
.gtip p{margin:5px 0 0;opacity:.9}
.gcontrols{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-2px 0 12px}
.gcontrols #g-search{width:180px;background:var(--surface);color:var(--ink);border:1px solid var(--rule-3);border-radius:7px;padding:6px 10px;font-size:12px;font-family:var(--sans)}
.gcontrols #g-search::placeholder{color:var(--ink-4)}

/* ---- filters / forms ---- */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.field,.filters input,.filters select,.filters button,.sql-form textarea,.editor-form textarea,.form-col textarea,.form-col input{
  background:var(--surface);color:var(--ink);border:1px solid var(--rule-3);border-radius:7px;
  padding:7px 11px;font-size:12px;font-family:var(--sans)}
.filters input{width:220px}
.filters input::placeholder,.form-col textarea::placeholder{color:var(--ink-4)}
.filters button,.editor-form button,.sql-form button{cursor:pointer;font-weight:500}
.filters .sep{width:1px;height:22px;background:var(--rule-2)}
.filters .meta{margin-left:auto}
.form-col{display:flex;flex-direction:column;gap:8px;max-width:660px}
.form-col textarea{font-family:var(--sans);font-size:13px;resize:vertical;line-height:1.5}
.form-col .btn-primary{align-self:flex-start}
.sql-form{display:flex;gap:8px;align-items:flex-start;margin-bottom:16px}
.sql-form textarea{flex:1;font-family:var(--mono);font-size:12px;resize:vertical}
.editor-form textarea{width:100%;font-family:var(--mono);font-size:12px;line-height:1.5}
.editor-form button{margin-top:8px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--accent)}

/* ---- tables (Data explorer, config, discovered) ---- */
table.grid{width:100%;border-collapse:collapse}
.grid th{text-align:left;font-family:var(--mono);color:var(--ink-4);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--rule-2);background:var(--surface-2)}
.grid td{padding:9px 12px;border-top:1px solid var(--rule-faint);vertical-align:top;font-size:12px;color:var(--ink-2)}
.grid tr:hover td{background:var(--surface-2)}
.grid a{color:var(--ink);font-weight:500}
.table-scroll{overflow-x:auto;border:1px solid var(--rule-2);border-radius:var(--radius-sm)}
.table-scroll .grid td,.table-scroll .grid th{white-space:nowrap}
.table-scroll .cell{max-width:340px;overflow:hidden;text-overflow:ellipsis}

/* ---- timeline ---- */
.tl-kind{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em}
.tl-kind.applied,.tl-kind.mined{color:var(--accent)}
.tl-kind.approved{color:var(--amber)}
.tl-kind.plain{color:var(--ink-3)}
.tl-date{font-family:var(--mono);font-size:10px;color:var(--ink-4)}
.tl-text{font-size:12px;color:#3F3C33;line-height:1.45}

/* ---- plan lifecycle steps ---- */
.steps{display:flex;align-items:center;gap:0;margin-bottom:24px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px}
.step-dot{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;box-sizing:border-box;flex:none;border:1.5px solid var(--rule-3)}
.step.done .step-dot{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step.now .step-dot{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}
.step-label{font-size:12px;color:var(--ink-4)}
.step.done .step-label{color:var(--ink-2)}
.step.now .step-label{color:var(--ink);font-weight:700}
.step-line{width:56px;height:1px;background:var(--rule-3);margin:0 12px}

/* ---- approval card + option radios ---- */
.approve{background:var(--surface);border:1px solid var(--amber-border);border-radius:var(--radius-sm);padding:18px 20px;margin-top:22px}
.approve h3{font-size:15px}
.opts{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--rule-3);background:var(--surface);
  border-radius:var(--radius-sm);padding:11px 14px;width:300px;box-sizing:border-box;cursor:pointer}
.opt.sel,.opt:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.opt .radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--rule-3);box-sizing:border-box;flex:none;margin-top:2px}
.opt.sel .radio,.opt:has(input:checked) .radio{border:4.5px solid var(--accent);background:var(--surface)}
.opt.disabled{opacity:.55;cursor:default}
.opt b{font-size:13px;font-weight:600}.opt small{font-size:11px;color:var(--ink-2)}

/* ---- log panel (dark) ---- */
.log{background:var(--log-bg);border:1px solid #1D1C17;border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--log-fg);padding:12px 14px;
  max-height:320px;overflow:auto;white-space:pre-wrap}
.log .rc-ok,.log-ok{color:var(--log-ok)}
.log .rc-bad,.log-crit{color:var(--log-crit)}
.log-warn{color:var(--log-warn)}
.log-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.log-head .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8F8A7A}
.log-head .st{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--log-ok)}
pre.log{white-space:pre-wrap}

/* ---- outcome / observations ---- */
.metrics{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.metric{font-family:var(--mono);font-size:10px;color:var(--ink-2);background:var(--raised);border-radius:5px;padding:3px 8px}
.st-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;padding:2px 8px;border-radius:4px}
.st-chip.st-ok{color:var(--accent-2);background:var(--accent-soft)}
.st-chip.st-crit{color:var(--crit);background:rgba(179,64,47,.10)}
.st-chip.st-idle{color:var(--ink-3);background:var(--raised)}
.obs-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.obs{display:flex;gap:10px;align-items:flex-start}
.obs-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;background:var(--ink-3)}
.obs-crit .obs-dot{background:var(--crit)}.obs-warn .obs-dot{background:var(--amber)}
.obs-info .obs-dot{background:var(--ink-3)}.obs-ok .obs-dot{background:var(--accent-2)}
.obs .t{font-size:13px;font-weight:600;line-height:1.4}
.obs .d{font-size:12px;color:var(--ink-3);line-height:1.5}
.obs strong a{color:var(--ink)}

/* ---- documents (digest, summaries, reports) ---- */
.doc{background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:8px 26px 22px;max-width:860px}
.doc-head{color:var(--ink-3);font-family:var(--mono);font-size:12px;border-bottom:1px solid var(--rule);padding:12px 0;margin-bottom:8px}
.doc h1{font-size:20px;margin-top:16px}
.doc h2{font-size:15px;color:var(--ink);margin-top:24px}
.doc h3{font-size:13px;color:var(--accent);margin-top:18px}
.doc blockquote{margin:10px 0;padding:2px 14px;border-left:2px solid var(--amber-border);color:var(--ink-2);font-style:italic}
.doc code{background:var(--raised);border-radius:4px;padding:1px 5px;font-size:12px}
.doc pre{background:var(--log-bg);color:var(--log-fg);border-radius:var(--radius-xs);padding:12px 14px;overflow:auto}
.doc pre code{background:none;padding:0;color:inherit}
.doc table{border-collapse:collapse;margin:12px 0}
.doc th,.doc td{border:1px solid var(--rule-2);padding:6px 10px;font-size:12px;text-align:left}
.doc li{margin:3px 0}
.report-list{list-style:none;padding:0}
.report-list li{padding:9px 0;border-bottom:1px solid var(--rule)}
.report-list a{font-family:var(--mono);font-size:13px}

/* ---- disclosure ---- */
.disc{border-top:1px solid var(--rule);margin-top:6px}
.disc>summary{cursor:pointer;padding:12px 2px;font-size:13px;color:var(--ink-2);list-style-position:inside}
.disc>summary:hover{color:var(--ink)}
.disc .doc,.disc .rows,.disc .grid{margin-top:10px}
.disc[open]>summary{color:var(--ink)}
summary.btn{display:inline-block;list-style:none}
summary.btn::-webkit-details-marker{display:none}
details.newplan{margin-bottom:12px}
.note{margin-top:14px;font-size:11px;color:var(--amber-ink);background:var(--amber-bg);
  border:1px dashed var(--amber-border);border-radius:var(--radius-xs);padding:8px 12px;max-width:74ch;line-height:1.5}

/* ---- command palette ---- */
#palette{position:fixed;inset:0;background:rgba(60,54,38,.28);z-index:50;backdrop-filter:blur(2px)}
.palette-box{width:560px;margin:13vh auto 0;background:var(--surface);border:1px solid var(--rule-3);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow)}
#palette-input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);
  padding:15px 18px;font-size:15px;border-bottom:1px solid var(--rule);font-family:var(--sans)}
#palette-input::placeholder{color:var(--ink-4)}
#palette-results{list-style:none;margin:0;padding:4px;max-height:340px;overflow-y:auto}
#palette-results li a{display:flex;justify-content:space-between;padding:9px 12px;color:var(--ink);border-radius:var(--radius-xs)}
#palette-results li a:hover,#palette-results li.sel a{background:var(--raised);text-decoration:none}
#palette-results .kind{color:var(--ink-4);font-size:11px;font-family:var(--mono)}

/* ---- toast ---- */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:8px;font-size:13px;z-index:60;box-shadow:var(--shadow)}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .split{grid-template-columns:1fr}
  .pipe{flex-wrap:wrap}.pipe-cell{min-width:44%}
}

/* section sub-nav (Tier 0 IA consolidation: Research = Overview/Catalog/Connections, Config = Config/Roles) */
.subnav{display:flex;gap:2px;padding:8px 32px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.subnav-item{font-size:12px;color:var(--ink-2);padding:5px 12px;border-radius:var(--radius-xs);text-decoration:none;font-weight:500;transition:background .12s,color .12s}
.subnav-item:hover{background:var(--raised);color:var(--ink);text-decoration:none}
.subnav-item.active{background:var(--accent-tint);color:var(--accent);font-weight:600}

/* ── Tier 1: visual staged plan document ─────────────────────────────────────── */
.pln-steps{display:flex;align-items:center;gap:0;margin:2px 0 22px;flex-wrap:wrap}
.pln-step{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);font-weight:500}
.pln-step .pln-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:var(--raised);color:var(--ink-4);border:1px solid var(--rule-3)}
.pln-step.done{color:var(--accent)}.pln-step.done .pln-dot{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.pln-step.current{color:var(--ink)}.pln-step.current .pln-dot{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.pln-line{flex:1;min-width:20px;height:1px;background:var(--rule-3);margin:0 10px}.pln-line.done{background:var(--accent)}
.pln-goal{max-width:64ch;font-size:24px;line-height:1.25;margin:0}
.pln-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink-3)}
.pln-cx{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:20px;font-weight:600}
.cx-simple{background:var(--accent-soft);color:var(--accent)}
.cx-standard{background:var(--amber-bg);color:var(--amber-ink)}
.cx-complex{background:#f6e4e0;color:var(--crit)}
.pln-refs{margin-top:12px;max-height:120px}
.pln-action{margin:18px 0}
.pln-action-h{font-size:14px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:9px}
.pln-num{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.pln-action-p{font-size:12px;color:var(--ink-2);margin:8px 0 12px;max-width:72ch;line-height:1.6}
.pln-sec{margin:14px 0}
.pln-sec-h{display:flex;align-items:baseline;margin-bottom:12px}
.pln-lead{font-size:16px;line-height:1.4;color:var(--ink);font-weight:500;max-width:60ch;margin-bottom:14px}
.pln-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pln-k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:600;margin-bottom:4px}
.pln-kt{margin-top:14px}
.pln-v{font-size:13px;color:var(--ink-2);line-height:1.55}
.pln-pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:11px;padding:3px 11px;border-radius:20px;background:var(--surface-2);border:1px solid var(--rule-2);color:var(--ink-2)}
.pill-accent{background:var(--accent-tint);border-color:transparent;color:var(--accent)}
.pln-note{margin-top:14px;font-size:12px;color:var(--ink-2);background:var(--surface-2);border-left:2px solid var(--rule-3);padding:8px 12px;border-radius:0 var(--radius-xs) var(--radius-xs) 0;line-height:1.55}
.pln-stat{display:inline-flex;flex-direction:column;gap:2px;background:var(--accent-tint);border:1px solid var(--accent-soft);border-radius:var(--radius-sm);padding:12px 18px;margin-bottom:12px}
.pln-stat-l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);font-weight:600}
.pln-stat-v{font-size:18px;font-weight:600;color:var(--accent);letter-spacing:-.01em}
.pln-callout{font-size:14px;line-height:1.5;color:var(--ink);border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:6px 0 4px;max-width:64ch}
.pln-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.pln-table th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--rule-2)}
.pln-table td{padding:8px 10px;border-bottom:1px solid var(--rule-faint);color:var(--ink-2);vertical-align:top}
.pln-td-name{color:var(--ink);font-weight:600}
.pln-list{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--ink-2);line-height:1.6}
.pln-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pln-mini{background:var(--surface-2);border:1px solid var(--rule-2);border-radius:var(--radius-sm);padding:12px 14px}
.pln-mini-why{margin-top:4px;opacity:.8}
.sev{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-block}
.sev-low{background:var(--accent-soft);color:var(--accent)}
.sev-medium,.sev-med{background:var(--amber-bg);color:var(--amber-ink)}
.sev-high{background:#f6e4e0;color:var(--crit)}
@media(max-width:640px){.pln-grid2,.pln-cards{grid-template-columns:1fr}}

/* ── Tier 2: plan review-loop annotations ────────────────────────────────────── */
mark.annot{background:var(--amber-bg);border-bottom:2px solid #E4CD97;color:inherit;padding:0 1px;border-radius:2px;cursor:pointer;transition:background .3s,border-color .3s}
mark.annot.flash{background:var(--accent-soft);border-color:var(--accent)}
.annot-bubble{position:absolute;z-index:200}
.annot-bubble button{background:var(--ink);color:var(--surface);border:none;border-radius:var(--radius-xs);font-size:12px;padding:5px 11px;cursor:pointer;box-shadow:var(--shadow)}
.annot-composer{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:210;width:min(440px,92vw);background:var(--surface);border:1px solid var(--rule-3);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.annot-quote{font-size:12px;color:var(--ink-3);font-style:italic;border-left:2px solid var(--rule-3);padding-left:10px;margin-bottom:10px;line-height:1.5}
.annot-composer textarea{width:100%;border:1px solid var(--rule-2);border-radius:var(--radius-xs);padding:8px 10px;font:inherit;font-size:13px;resize:vertical;background:var(--surface-2);color:var(--ink)}
.annot-c-actions{display:flex;gap:10px;align-items:center;margin-top:10px}
.annot-cancel{background:none;border:none;color:var(--ink-3);font-size:12px;cursor:pointer}
.cmt{border-top:1px solid var(--rule-faint);padding:12px 2px}
.cmt:first-of-type{border-top:none}
.cmt-resolved{opacity:.55}
.cmt-head{display:flex;align-items:center;gap:8px;font-size:11px}
.cmt-sec{font-weight:600;color:var(--ink-2)}
.cmt-status{font-size:9px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;padding:1px 7px;border-radius:20px}
.cmt-status.open{background:var(--amber-bg);color:var(--amber-ink)}
.cmt-status.resolved{background:var(--accent-soft);color:var(--accent)}
.cmt-quote{font-size:12px;color:var(--ink-3);font-style:italic;border-left:2px solid var(--rule-3);padding-left:10px;margin:6px 0;line-height:1.5}
.cmt-body{font-size:13px;color:var(--ink);line-height:1.55;margin-top:4px}
.cmt-reply{font-size:12px;color:var(--ink-2);background:var(--accent-tint);border-radius:var(--radius-xs);padding:6px 10px;margin-top:6px}
.cmt-actions{display:flex;gap:12px;margin-top:8px}
.cmt-actions button{background:none;border:none;color:var(--accent);font-size:11px;cursor:pointer;padding:0}
.cmt-actions button:hover{text-decoration:underline}

/* ── Tier 3: design-preview wireframe (lo-fi, sketch-before-build) ────────────── */
.wf-screens{display:flex;flex-wrap:wrap;gap:16px}
.wf-screen{flex:1;min-width:280px;border:1px solid var(--rule-2);border-radius:var(--radius-sm);background:var(--surface-2);padding:10px 10px 4px}
.wf-title{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.wf-region{border:1.5px dashed var(--rule-3);border-radius:var(--radius-xs);background:var(--surface);padding:8px 10px;margin-bottom:8px}
.wf-label{font-size:11px;font-weight:600;color:var(--ink-2)}
.wf-note{font-weight:400;color:var(--ink-4)}
.wf-hero{padding-top:20px;padding-bottom:20px}
.wf-bar{padding:6px 10px}
.wf-grid{display:grid;gap:6px;margin-top:8px}
.wf-cell{height:40px;border:1px dashed var(--rule-3);border-radius:4px;background:var(--surface-2)}
.wf-els{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.wf-el{font-size:11px}
.wf-button{border:1.5px solid var(--ink-3);border-radius:20px;padding:2px 12px;color:var(--ink-2);font-weight:600;font-family:var(--mono);font-size:10px}
.wf-input{border:1px solid var(--rule-3);border-bottom:1.5px solid var(--ink-4);border-radius:4px;padding:3px 12px;color:var(--ink-4);min-width:90px;font-size:10px}
.wf-text{color:var(--ink-3)}

/* ── Tier 4a: whiteboard ──────────────────────────────────────────────────────── */
.wb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wb-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* font-family because a native <button> does not inherit it — without this the whiteboard's
   tools sat in Arial while everything around them was Source Sans 3. */
.wb-tool{background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--radius-xs);padding:5px 9px;font-size:13px;font-family:var(--sans);cursor:pointer;color:var(--ink-2);min-width:30px;line-height:1}
.wb-tool:hover{background:var(--raised)}
.wb-tool.active{background:var(--accent-tint);border-color:transparent;color:var(--accent)}
.wb-colors{display:flex;gap:5px;margin:0 6px}
.wb-swatch{width:18px;height:18px;border-radius:50%;border:2px solid var(--rule-2);cursor:pointer;padding:0}
.wb-swatch.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink-3)}
#wb-size{width:84px;accent-color:var(--accent)}
.wb-save{display:flex;gap:8px;align-items:center}
.wb-name{border:1px solid var(--rule-2);border-radius:var(--radius-xs);padding:6px 10px;font:inherit;font-size:13px;background:var(--surface);color:var(--ink)}
.wb-canvas-wrap{height:82vh;min-height:560px;border:1px solid var(--rule-2);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
#wb-canvas{display:block;touch-action:none;cursor:crosshair}
.wb-hint{margin-top:8px;line-height:1.6}
.wb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.wb-card{border:1px solid var(--rule-2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.wb-card img{width:100%;height:120px;object-fit:cover;display:block;background:var(--surface-2);border-bottom:1px solid var(--rule-faint)}
.wb-card-meta{display:flex;align-items:center;gap:6px;font-size:11px;padding:7px 9px;color:var(--ink-2)}
.wb-reopen{width:100%;border:none;border-top:1px solid var(--rule-faint);background:var(--surface-2);color:var(--accent);font-size:11px;padding:6px;cursor:pointer}
.wb-reopen:hover{background:var(--raised)}

/* ── Tier 4b: pen overlay on the plan ─────────────────────────────────────────── */
#plan-annot{position:relative}
#pen-layer{position:absolute;top:0;left:0;pointer-events:none;z-index:5;touch-action:none}
#pen-layer.on{pointer-events:auto;cursor:crosshair}
.pen-controls{display:flex;align-items:center;gap:8px;margin:12px 0 2px;flex-wrap:wrap}
.pen-bar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.clar{margin:10px 0}
.clar-q{font-size:12px;color:var(--ink);font-weight:500;margin-bottom:4px}
.clar-a{width:100%;border:1px solid var(--rule-2);border-radius:var(--radius-xs);padding:6px 9px;font:inherit;font-size:12px;background:var(--surface);color:var(--ink);resize:vertical}
.clar-row{display:flex;align-items:center;gap:10px;margin-top:5px}
.clar-state{font-size:11px;color:var(--accent);font-weight:600}

/* Files panel — project file browser (VS Code-style lazy tree) */
.ft-wrap{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:14px;margin-top:12px}
.ft-side{min-width:0}
.ft-filter{width:100%;box-sizing:border-box;font-family:var(--mono);font-size:12px;
  padding:5px 8px;border:1px solid var(--rule-3);border-radius:5px;background:var(--surface);
  color:var(--ink);margin-bottom:8px}
.ft-tree{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12px}
.ft-tree .ft-tree{padding-left:14px;border-left:1px solid var(--rule-faint);margin-left:4px}
.ft-file,.ft-dir{display:flex;align-items:center;gap:4px;line-height:1.9}
.ft-row{cursor:pointer;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ft-dir-row{color:var(--ink);font-weight:500}
.ft-row:hover{color:var(--accent)}
.ft-mini{border:none;background:none;cursor:pointer;color:var(--ink-4);font-size:12px;padding:0 4px}
.ft-mini:hover{color:var(--accent)}
.ft-err{color:#a4443a;font-family:var(--mono);font-size:12px}
.ft-preview{min-width:0;border:1px solid var(--rule);border-radius:6px;background:var(--surface);overflow:hidden}
.ft-pv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.ft-pv-name{font-family:var(--mono);font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-pv-body{margin:0;padding:10px 12px;font-family:var(--mono);font-size:12px;line-height:1.55;
  color:var(--ink);max-height:60vh;overflow:auto;white-space:pre;tab-size:2}

/* ── Feature tree (skill-tree progression) — Ledger: warm paper, one green accent ── */
.ftree-toggle{display:inline-flex;align-items:center;gap:2px;font-size:12px}
.ftree-toggle a{padding:2px 8px;border-radius:var(--radius-xs);color:var(--ink-3)}
.ftree-toggle a.on{background:var(--accent-tint);color:var(--accent);font-weight:600}
.ftree-toggle .ftree-edit{margin-left:8px;color:var(--ink-3)}
/* popup: full-screen modal, tree scaled to fit (no scroll) */
.ftree-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:22px}
.ftree-backdrop{position:absolute;inset:0;background:rgba(31,29,24,.44)}
.ftree-modal-box{position:relative;z-index:1;display:flex;flex-direction:column;width:min(96vw,1440px);height:92vh;
  background:var(--surface);border:1px solid var(--raised);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ftree-modal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--raised)}
.ftree-modal-head #ftree-rebuild{margin-left:auto}
.ftree-modal-x{font-size:22px;line-height:1;color:var(--ink-3);padding:0 2px 0 10px}
.ftree-modal-x:hover{color:var(--ink)}
.ftree-modal-body{position:relative;flex:1;min-height:0;background:var(--surface-2)}
.ftree-svg{display:block;width:100%;height:100%}
.ftree-band{fill:var(--surface);stroke:var(--raised);stroke-width:1}
.ftree-band-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;fill:var(--ink-4)}
.ftree-edge{fill:none;stroke:var(--ink-4);stroke-width:1.4;opacity:.55}
.ftree-node rect{fill:var(--surface);stroke:var(--ink-3);stroke-width:1.4}
.ftree-node-title{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--ink)}
.ftree-node-state{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3)}
/* states — done = filled accent; active = accent outline; next = paper; locked = muted */
.ftree-node.state-done rect{fill:var(--accent);stroke:var(--accent)}
.ftree-node.state-done .ftree-node-title{fill:var(--accent-ink)}
.ftree-node.state-done .ftree-node-state{fill:var(--accent-soft)}
.ftree-node.state-active rect{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}
.ftree-node.state-active .ftree-node-title{fill:var(--accent)}
.ftree-node.state-active .ftree-node-state{fill:var(--accent-2)}
.ftree-node.state-next rect{fill:var(--surface);stroke:var(--ink-3)}
.ftree-node.state-locked rect{fill:var(--raised);stroke:var(--ink-4);stroke-dasharray:0}
.ftree-node.state-locked .ftree-node-title{fill:var(--ink-3)}
.ftree-node.state-locked .ftree-node-state{fill:var(--ink-4)}
.ftree-node.unverified rect{stroke-dasharray:4 3}
.ftree-node.changed rect{stroke:var(--amber);stroke-width:2}
.ftree-node:hover rect{filter:brightness(.98)}
.ftree-legend{font-size:12px;color:var(--ink-3)}
.ftree-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 2px 0 6px;vertical-align:middle;border:1px solid var(--ink-3)}
.ftree-legend i.st-done{background:var(--accent);border-color:var(--accent)}
.ftree-legend i.st-active{background:var(--accent-tint);border-color:var(--accent)}
.ftree-legend i.st-next{background:var(--surface)}
.ftree-legend i.st-locked{background:var(--raised);border-color:var(--ink-4)}
/* node detail slide-in */
.ftree-panel{position:absolute;top:8px;right:8px;width:288px;max-width:calc(100% - 16px);background:var(--surface);
  border:1px solid var(--raised);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;z-index:5}
.ftree-panel h4{margin:0 24px 4px 0;font-size:14px}
.ftree-panel-x{position:absolute;top:8px;right:10px;border:0;background:none;font-size:18px;line-height:1;color:var(--ink-3);cursor:pointer}
.ftree-panel-state{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.ftree-panel-state.state-done{color:var(--accent)}
.ftree-panel-state.state-active{color:var(--accent-2)}
.ftree-panel p{margin:6px 0;font-size:13px;color:var(--ink-2)}
.ftree-panel-ev{font-style:italic;color:var(--ink-3);font-size:12px}
.ftree-panel-docs{margin-top:8px}
.ftree-panel-docs .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ftree-panel-docs ul{list-style:none;margin:4px 0 0;padding:0}
.ftree-doc{display:block;width:100%;text-align:left;border:0;background:none;padding:3px 0;font-family:var(--mono);
  font-size:12px;color:var(--accent);cursor:pointer}
.ftree-doc:hover{text-decoration:underline}

/* ── AI Companion (Stage 1: reporting) ── */
.cmp-usage{display:flex;gap:8px;align-items:center;flex-shrink:0}
.cmp-meter{display:flex;flex-direction:column;align-items:center;padding:4px 10px;border:1px solid var(--raised);border-radius:var(--radius-sm);background:var(--surface);min-width:56px}
.cmp-meter .k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.cmp-meter b{font-size:15px;color:var(--ink)}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:14px}
.cmp-row{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink)}
.cmp-row:hover{background:var(--raised)}
.cmp-kind{flex-shrink:0;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:10px;background:var(--raised);color:var(--ink-3)}
.cmp-kind.cmp-plan{background:var(--accent-soft);color:var(--accent)}
.cmp-kind.cmp-blocked{background:var(--amber-bg);color:var(--amber-ink)}
.cmp-kind.cmp-pain{background:var(--amber-bg);color:var(--amber-ink)}
.cmp-proj{flex-shrink:0;font-weight:600;font-size:12px;color:var(--ink-2)}
.cmp-sum{color:var(--ink-2);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* companion dispatch */
.cmp-dispatch .cmp-req{width:100%;box-sizing:border-box;resize:vertical;font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--raised);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.cmp-dispatch-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.cmp-sel{padding:5px 8px;border:1px solid var(--raised);border-radius:var(--radius-sm);background:var(--surface);font-size:13px;color:var(--ink)}
.cmp-resume{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.cmp-confirm{margin-top:10px;padding:11px 12px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-tint)}
.cmp-cmd{display:flex;gap:8px;align-items:flex-start}
.cmp-cmd code{flex:1;min-width:0;overflow-x:auto;white-space:pre;font-family:var(--mono);font-size:12px;background:var(--surface);padding:6px 8px;border-radius:var(--radius-xs);border:1px solid var(--raised)}
.cmp-con{font-size:12px;color:var(--ink-3);margin-top:7px}
.cmp-con .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:5px}
.cmp-warn{color:var(--amber-ink);background:var(--amber-bg);padding:3px 7px;border-radius:4px;margin-top:5px;font-size:12px}
.cmp-confirm-actions{display:flex;gap:8px;margin-top:10px}
.cmp-opened{color:var(--accent);font-size:13px}
.cmp-routed{font-size:13px;color:var(--ink-2);margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--raised)}
.cmp-open-tgt{font-size:14px;color:var(--ink);margin-bottom:4px}
.cmp-open-tgt .cmp-kind{margin-left:6px}

/* ---- Servers panel ---- */
.srv-list{display:flex;flex-direction:column}
.srv-row{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule-2)}
.srv-row:last-child{border-bottom:0}
.srv-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.srv-dot.on{background:var(--accent);box-shadow:0 0 0 3px rgba(47,107,79,.18)}
.srv-dot.off{background:var(--rule-3)}
.srv-main{flex:1;min-width:0}
.srv-name{font-weight:600;font-size:14px}
.srv-tag{font-size:11px;color:var(--ink-3);font-weight:500;border:1px solid var(--rule-3);border-radius:5px;padding:1px 5px;margin-left:4px}
.srv-meta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--ink-3);margin-top:2px;flex-wrap:wrap}
.srv-url{color:var(--ink-3)}
.srv-url:hover{color:var(--accent)}
.srv-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.srv-note{font-size:12px;color:var(--ink-3)}

/* Companion voice buffer: show the request box is accumulating before it finalizes */
.cmp-req.cmp-buffering{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,79,.14)}

/* ==============================================================================================
   THE SKIN — the console wears the companion's own look (owner decision 2026-08-08)
   ==============================================================================================
   One pen draws everything: a thick ink outline, a cream fill, a hard offset shadow, a generous
   radius. The chatbox in the corner had this look on its own and everything around it did not,
   which read as two products in one window.

   This block is deliberately LAST in the file so it wins on order rather than by piling up
   selectors — every rule here is the same specificity as the one it replaces, and finding what
   changed means reading one section instead of diffing 600 lines.

   What did NOT change: the palette, the numbers, and the type that carries them. Every measurement
   is still Source Code Pro at its old size, because a repo count that reads as decoration is worse
   than an ugly one. The rounded face carries voice and headings only.
   -------------------------------------------------------------------------------------------- */

/* ---- type ---- */
h1,h2,h3,.decision-h,.sec-label,.step,.card-head .sec-label,.logo-text,.btn,.vchip,.badge-active,
.whatis-say{font-family:var(--display)}
.decision-h{font-weight:700;letter-spacing:0;line-height:1.15}
h1,h2,h3{letter-spacing:0}
.sec-label{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--ink)}
/* numbers keep the mono face and the old sizes on purpose — see the note above */

/* ---- the display tier, 2026-08-09 ----
   Measured against Raycast and GitHub: 33 text styles is normal (they run 39 and 35), but a
   9.5-20px range is not, against their 12-64 and 12-32. With no step above body text a playful
   register reads dense rather than deliberate — Raycast buys playful-and-premium with scale
   contrast, not more decoration. Only the line a page OPENS with gets the tier, and it falls
   back to the old 27px before the sidebar's 760px floor so the five steps keep their room.
   In the same pass the half-pixel steps (13.5/12.5/11.5/10.5/9.5) were floored onto integers:
   22 distinct sizes down to 16, and every one of them merged DOWNWARD, so nothing that fit
   before can stop fitting now. The register itself is untouched — settled twice. */
.decision-h,.pln-goal,.doc-title,h1{font-size:clamp(27px,3.4vw,34px)}

/* ---- surfaces ---- */
.card,.screen,.pipe,.rows,.needs-item,.panel,.doc,.tbl-wrap,.approval,.log-panel{
  border:var(--bw) solid var(--line);border-radius:14px;box-shadow:var(--pop);background:var(--surface)}
.card{padding:16px 18px;margin-bottom:18px}
/* The brief wears .doc for its prose rhythm, but .doc is a surface in its own right — inside a
   card it draws a second border, a second background and a second shadow. Strip the box, keep the
   typography. It has to sit BELOW the surfaces rule above: written earlier in the file it ties on
   specificity and loses on source order, which measured as a 2.5px border still painting. Long
   code lines scroll inside their own block rather than widening the page. */
.pln-brief{background:none;border:0;border-radius:0;box-shadow:none;padding:0;max-width:76ch}
.pln-brief h1:first-child,.pln-brief h2:first-child{margin-top:0}
.pln-brief pre{overflow-x:auto}
/* Run it here, or take the prompt elsewhere. The copy button stays for the window you already
   have open — it is a fallback now, not the only way through. */
.pln-run{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pln-edited{color:var(--amber-ink,#8a5a12)}
.pln-silent{border-left:3px solid var(--amber-border,#d9b86a)}
.screen{box-shadow:var(--pop-lg)}
.pipe{overflow:hidden}
.pipe-cell{border-left:2px solid var(--line);padding:12px 18px}
.pipe-cell:first-child{border-left:none}
.needs-item{border-color:var(--amber-ink);background:var(--amber-bg);box-shadow:4px 4px 0 var(--amber-ink)}

/* ---- rows: the data wears it too, at a smaller pen so a long list still reads ---- */
.rows{background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:8px}
.row{background:var(--surface);border:2px solid var(--line);border-radius:12px;
  box-shadow:var(--pop-sm);padding:11px 15px}
.row:first-child{border-top:2px solid var(--line)}
.row.head{background:none;border:0;box-shadow:none;padding:2px 15px 0}
.row-group{background:none;border:0;padding:12px 4px 2px}
.row-group>*{font-family:var(--display);font-weight:700}
.row:hover{box-shadow:5px 5px 0 var(--line);transform:translate(-1px,-1px);
  transition:transform .12s cubic-bezier(.2,.7,.3,1),box-shadow .12s cubic-bezier(.2,.7,.3,1)}
.row-more{border-top:0;padding-left:15px}
.row-repo{font-family:var(--display);font-size:15px;font-weight:700}

/* ---- controls ---- */
.btn,.apply-btn,.batch-apply,.mine-skill,.propose-btn{
  border:var(--bw) solid var(--line);border-radius:999px;box-shadow:var(--pop-sm);
  font-weight:700;color:var(--ink);background:var(--surface);
  transition:transform .1s cubic-bezier(.2,.7,.3,1),box-shadow .1s cubic-bezier(.2,.7,.3,1)}
.btn:hover,.apply-btn:hover,.batch-apply:hover,.mine-skill:hover,.propose-btn:hover{
  border-color:var(--line);background:var(--raised)}
.btn:active,.apply-btn:active,.batch-apply:active,.mine-skill:active,.propose-btn:active{
  transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn:disabled,.btn:disabled:hover{box-shadow:none;transform:none;background:var(--raised);
  border-color:var(--line-2);color:var(--ink-4)}
.btn-primary,.btn-primary:hover{background:var(--accent-2);color:#fff;border-color:var(--line)}
.btn-amber,.btn.paid,.paid{background:#F5D98E;color:var(--ink);border-color:var(--line)}
.btn-quiet{border:0;box-shadow:none;background:none;font-weight:600}
.btn-quiet:hover{background:none;transform:none}
input[type=text],input[type=search],input[type=url],input[type=number],input:not([type]),
select,textarea,.filter-input,.palette-box input{
  border:var(--bw) solid var(--line);border-radius:999px;background:var(--surface);
  font-family:var(--sans);padding:8px 15px}
textarea{border-radius:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:var(--pop-sm)}

/* ---- chips, tags, badges ---- */
.chip,.vchip,.catchip,.badge,.tag.pill{border:2px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font-weight:600}
.chip{padding:3px 10px}
.catchip{padding:3px 11px;background:var(--surface)}
.catchip.on,.vchip.on{background:var(--accent-2);color:#fff;border-color:var(--line)}
.catchip.on span,.vchip.on span{color:#E7F0E9}
.badge{padding:1px 9px}
.badge-active{background:#BFE8CB;color:var(--ink)}
.badge-hold{background:#F5D98E;color:var(--ink)}
.badge-ver{background:var(--raised);color:var(--ink)}
.nav-badge{border:2px solid var(--line);background:#E9705A;color:#fff;line-height:14px}

/* ---- the shell ---- */
.sidebar{background:var(--surface-2);border-right:var(--bw) solid var(--line)}
.logo-text{font-weight:800;letter-spacing:.06em}
.nav-item{border-radius:999px;font-weight:600}
.nav-item.active{background:#BFE8CB;color:var(--ink);border:2px solid var(--line);
  box-shadow:var(--pop-sm);padding:5px 8px;font-weight:700}
.nav-item.active .ic{stroke:var(--ink)}
.step{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.step i{border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;
  line-height:16px;box-shadow:2px 2px 0 var(--line)}
.nav.path::before{background:var(--line-2);opacity:.35}
.topbar{border-bottom:var(--bw) solid var(--line)}
.subnav{border-bottom:2px solid var(--line)}
.subnav-item{border:2px solid transparent;border-radius:999px;font-weight:600}
.subnav-item.active{background:#BFE8CB;color:var(--ink);border-color:var(--line);box-shadow:2px 2px 0 var(--line)}
.shop{border-top:2px dashed var(--line-2)}
.shop>summary{font-weight:700;border-radius:999px}
.palette-btn{border:var(--bw) solid var(--line);border-radius:999px;box-shadow:var(--pop-sm);font-weight:700}
.palette-box{border:var(--bw) solid var(--line);border-radius:18px;box-shadow:var(--pop-lg)}
#toast{border:var(--bw) solid var(--line);border-radius:999px;box-shadow:var(--pop);font-weight:700}

/* ---- the front door's one sentence (chrome, the product speaking) ---- */
.whatis{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;
  background:#BFE8CB;border:var(--bw) solid var(--line);border-radius:16px;
  box-shadow:var(--pop);padding:13px 18px}
.whatis-say{font-size:15px;font-weight:600;line-height:1.35;min-width:0;flex:1}
/* the same sentence, quieter, on a surface that is not the front door */
.whatis-sm{background:var(--surface);padding:11px 16px;margin-bottom:14px}
.whatis-sm .whatis-say{font-size:13px;font-weight:500;font-family:var(--sans)}
.whatis-sm b{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em}
.whatis-walk{margin-left:auto;white-space:nowrap;background:var(--surface);color:var(--ink);
  border:2px solid var(--line);border-radius:999px;box-shadow:var(--pop-sm);padding:6px 14px;
  font-weight:700;font-size:13px;
  transition:transform .1s cubic-bezier(.2,.7,.3,1),box-shadow .1s cubic-bezier(.2,.7,.3,1)}
.whatis-walk:hover{text-decoration:none;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.whatis-walk:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}

/* Reduced motion: the hover lifts are transforms, and the global rule at the top already collapses
   their duration. Nothing here animates on its own. */

/* ---- an empty surface, in the companion register ----------------------------------------------
   Emptiness is the one state that cannot explain itself. This says what will be here and offers
   the single action that fills it. Chrome, not data: the moment there are rows, this is gone. */
.blank{display:flex;align-items:center;gap:20px;max-width:62ch;margin:8px 0 18px;
  background:var(--surface);border:var(--bw) solid var(--line);border-radius:16px;
  box-shadow:var(--pop);padding:18px 22px}
.blank-fig{width:76px;height:76px;object-fit:contain;flex:none;opacity:.9}
.blank-body{min-width:0}
.blank-h{font-family:var(--display);font-size:17px;font-weight:700;line-height:1.2}
.blank-say{font-size:13px;color:var(--ink-2);line-height:1.5;margin:5px 0 0}
.blank-say + .btn{margin-top:11px}
@media (max-width:620px){.blank{flex-direction:column;text-align:center}}

/* `hidden` means hidden, everywhere and finally. The attribute is implemented by the user agent as
   display:none, which ANY class setting another display silently beats — that has now shipped four
   times in this codebase (three panels painting at once on /sessions, the companion widget, and
   .needs-bar below, caught by tests/test_ui_rendered.py before it reached a page). /sessions and
   the widget each carry a local copy of this rule; this is the one that makes those unnecessary. */
[hidden]{display:none!important}

/* ---- the three moments the product speaks (register A) ----------------------------------------
   Waiting on you, landed well, refused. All three were the same grey before: a small badge, a
   sentence, and another sentence. */

/* 1 · waiting on you — the only state where the product is genuinely stuck until you act */
.needs-bar{display:flex;align-items:center;gap:10px;margin:0;padding:11px 32px;
  background:#F5D98E;border-bottom:var(--bw) solid var(--line);color:var(--ink);
  font-family:var(--display);font-size:14px;font-weight:600}
.needs-bar:hover{text-decoration:none;background:#F0CE72}
.needs-bar b{font-weight:800}
.needs-dot{width:10px;height:10px;border-radius:50%;background:#E9705A;flex:none;
  border:2px solid var(--line);animation:needs-pulse 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes needs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.needs-go{margin-left:auto;font-size:13px;font-weight:700;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.needs-dot{animation:none}}

/* 2 · landed well  ·  3 · refused */
#toast.t-win{background:#BFE8CB;color:var(--ink)}
#toast.t-bad{background:#E9705A;color:#fff}
#toast.t-ok{background:var(--surface);color:var(--ink)}

/* ---- the one signature transition: a plan becoming work ---------------------------------------
   Exactly one, and this is the boundary it marks — the single click the spine calls the whole
   governance story. Five animations for five step boundaries would be a toy.

   The tasks arrive in the order they will run in. Easing is a LITERAL cubic-bezier because a
   var() inside @keyframes silently degrades to linear (measured 4.3x velocity discontinuity,
   docs/claude-design-brief.md), and the end frame is `transform:none; opacity:1` — byte-identical
   to the static render, which is the Final Frame Contract. */
.rows.just-approved .row:not(.head){animation:task-lands .42s cubic-bezier(.22,.9,.3,1) both}
.rows.just-approved .row:not(.head):nth-child(2){animation-delay:.02s}
.rows.just-approved .row:not(.head):nth-child(3){animation-delay:.09s}
.rows.just-approved .row:not(.head):nth-child(4){animation-delay:.16s}
.rows.just-approved .row:not(.head):nth-child(5){animation-delay:.23s}
.rows.just-approved .row:not(.head):nth-child(6){animation-delay:.30s}
.rows.just-approved .row:not(.head):nth-child(n+7){animation-delay:.37s}
@keyframes task-lands{
  from{opacity:0;transform:translateY(-9px) scale(.985);box-shadow:0 0 0 var(--line)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.rows.just-approved .row{animation:none}}

/* ---- the banner, with its wordmark in markup ---------------------------------------------------
   The art is generated and deliberately text-free (docs/theme-prompt.md: the model garbles small
   lettering, and type baked into a raster cannot be recoloured or corrected). So the wordmark is
   real text on top, in the display face, at whatever size the viewport gives it. It sits top-left
   because that quadrant of the art measures 0.0% ink. */
/* container-type, so everything over the art can be sized in cqw — a fraction of the BANNER, not
   of the viewport. The step labels have to fit inside cards that are 7.31% of the art wide, and
   vw units drift against that as the sidebar takes its fixed 216px out of the viewport. The
   element's aspect-ratio equals the image's, so `cover` fits exactly and art coordinates map
   linearly onto percentages. */
.hero{position:relative;container-type:inline-size;
  aspect-ratio:1792/592;background:url("/static/mascot/banner.jpg") center/cover;
  border:var(--bw) solid var(--line);border-radius:16px;box-shadow:var(--pop);
  margin:0 0 20px;overflow:hidden}
/* The names, in the boxes drawn to hold them — each one standing exactly where its placeholder
   bar was. Measured off banner.jpg: the bars sit at y 284-308, so their centre is 50.08% of the
   height, and each card's fill was sampled either side of its own bar. The label carries that
   fill as a patch, which is what lets the word take the middle of the card rather than hiding
   above it. min-width covers the bar; the text grows the patch when it is wider (PUBLISH is
   within 3px of its bar), and since the surrounding fill is flat to 0.6/255 the extra does not
   show. Keep --bg in the markup with the other measurements, not split across two files. */
.hero-steps{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.hero-steps li{position:absolute;left:var(--x);top:50.08%;transform:translate(-50%,-50%);
  min-width:var(--w);padding:.3em .45em;background:var(--bg);border-radius:4px;text-align:center;
  font-family:var(--mono);font-size:1.5cqw;letter-spacing:.04em;text-transform:uppercase;
  font-weight:600;color:var(--ink);white-space:nowrap}
/* Below this the cards are ~38px wide and the label would be smaller than the 12px floor the
   browser check enforces. The art alone still shows five steps. */
@media (max-width:620px){.hero-steps{display:none}}
/* ONE row, sized against the band that is actually empty.
   Two faults, one cause. The mark and the line were positioned independently (mark top:5%, line
   top:clamp(78px,22%,206px)), which only held while the mark was a wide wordmark; 327ffda made it
   the owner's SQUARE lockup, so its height became its width and it painted over "read → route" —
   42px of overlap at a 765px banner, 89px at 1400px. And both were sized as a fraction of WIDTH
   while the space they must fit is a band defined by HEIGHT.
   Re-measured 2026-08-10 (the old note said "top-left is 0.0% ink" without saying how much of it):
   the art is empty for its top 16% out to x=75%, and for its bottom 17% across the full width.
   Everything between is the five cards. At 14% of width the square mark is 42% of the art's
   height — it cannot fit a 16% band stacked, at any viewport. So the copy is one horizontal row
   sized off the hero's HEIGHT, which is the dimension the constraint is written in. */
.hero-copy{position:absolute;left:clamp(16px,3.4%,42px);top:clamp(8px,2.6%,22px);
  height:clamp(26px,11%,58px);display:flex;align-items:baseline;gap:clamp(8px,1.4%,20px)}
/* Text, not the logo image — see the note in demo.html. Type scales into any band; a square
   raster lockup has to choose between covering the cards and being unreadable. */
.hero-mark{font-family:var(--display);font-weight:800;letter-spacing:.01em;color:var(--accent);
  font-size:clamp(15px,2.1vw,28px);line-height:1;white-space:nowrap}
.hero-mark b{color:var(--ink);font-weight:800}