/* Generated from tokens.json. Do not edit. */
:root {
  --bg: #FCF1DE;
  --side: #F6E1C8;
  --surface: #FFF9EE;
  --sunk: #F1DEC4;
  --line: #E5CDAA;
  --outline: #4B372E;
  --ink: #3B2D27;
  --sub: #6B5A4D;
  --accent: #176C60;
  --on-accent: #FFFFFF;
  --accent-bg: #C4EDE0;
  --ai: #5A4CBF;
  --ai-bg: #E4DDFB;
  --go: #276B35;
  --go-bg: #D4F0D7;
  --hold: #8A5200;
  --hold-bg: #FFE7A8;
  --stop: #B0304B;
  --stop-bg: #FFD9DF;
  --sky: #1F66A8;
  --sky-bg: #D3E7FA;
  --peach: #A14A18;
  --peach-bg: #FFDDC6;
  --plum: #8A3D94;
  --plum-bg: #F5DDF8;
  --code: #F4E6D0;
  --mint: #86D9BC;
  --butter: #FFD772;
  --coral: #FF9F8E;
  --skyf: #9DCBF3;
  --lilac: #C7B8F6;
  --rose: #F7A8C0;
  --on-fill: #2E2220;
  --sans: Figtree, ui-sans-serif, system-ui, sans-serif;
  --serif: Literata, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display: Fredoka, Figtree, ui-rounded, system-ui, sans-serif;
  --t-2: 11.5px;
  --t-1: 12.5px;
  --t0: 14px;
  --t1: 16px;
  --t2: 19px;
  --t3: 23px;
  --t4: 28px;
  --t5: 34px;
  --read: 17px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r-s: 10px;
  --r: 14px;
  --r-l: 20px;
  --pill: 999px;
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}
.theme-light {
  --bg: #FCF1DE;
  --side: #F6E1C8;
  --surface: #FFF9EE;
  --sunk: #F1DEC4;
  --line: #E5CDAA;
  --outline: #4B372E;
  --ink: #3B2D27;
  --sub: #6B5A4D;
  --accent: #176C60;
  --on-accent: #FFFFFF;
  --accent-bg: #C4EDE0;
  --ai: #5A4CBF;
  --ai-bg: #E4DDFB;
  --go: #276B35;
  --go-bg: #D4F0D7;
  --hold: #8A5200;
  --hold-bg: #FFE7A8;
  --stop: #B0304B;
  --stop-bg: #FFD9DF;
  --sky: #1F66A8;
  --sky-bg: #D3E7FA;
  --peach: #A14A18;
  --peach-bg: #FFDDC6;
  --plum: #8A3D94;
  --plum-bg: #F5DDF8;
  --code: #F4E6D0;
  --mint: #86D9BC;
  --butter: #FFD772;
  --coral: #FF9F8E;
  --skyf: #9DCBF3;
  --lilac: #C7B8F6;
  --rose: #F7A8C0;
  --on-fill: #2E2220;
  color-scheme: light;
}
.theme-dark {
  --bg: #241F33;
  --side: #1C1828;
  --surface: #2E2840;
  --sunk: #382F4D;
  --line: #4A4160;
  --outline: #120F1C;
  --ink: #F3ECFA;
  --sub: #B5ABCB;
  --accent: #7EE0CB;
  --on-accent: #0F2F2B;
  --accent-bg: #24474A;
  --ai: #C3B8FA;
  --ai-bg: #3C3566;
  --go: #A3E0A8;
  --go-bg: #25432E;
  --hold: #FFD27A;
  --hold-bg: #4C3C1A;
  --stop: #FFA5B8;
  --stop-bg: #532A38;
  --sky: #9FD0F7;
  --sky-bg: #28445F;
  --peach: #FFB894;
  --peach-bg: #523626;
  --plum: #E3AEF0;
  --plum-bg: #47294F;
  --code: #1F1A2C;
  --mint: #86D9BC;
  --butter: #FFD772;
  --coral: #FF9F8E;
  --skyf: #9DCBF3;
  --lilac: #C7B8F6;
  --rose: #F7A8C0;
  --on-fill: #2E2220;
  color-scheme: dark;
}

:root{--r2:var(--r-l)}
/* Studio components. Uses tokens only: no literal colour, size or radius below.
   Chunky treatment (outline + hard offset) is for things you press or that celebrate: buttons, pills, tabs, toasts, the mascot.
   Everything you read or scan (lists, trees, documents, logs) stays calm: hairlines and soft surfaces. */
*{box-sizing:border-box}
.sg{font:var(--t0)/1.5 var(--sans);color:var(--ink)}
:where(.sg) :is(button,input,select,textarea){font:inherit;color:inherit}
:where(.sg) button{cursor:pointer;background:none;border:0;padding:0}
:where(.sg) :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-s)}
:where(.sg) :is(code,.mono){font-family:var(--mono);font-size:var(--t-1)}
@media (prefers-reduced-motion:reduce){.sg *{transition:none!important;animation:none!important}}
/* buttons: pastel fill, dark outline, a ledge that presses down */
.btn{--fill:var(--surface);min-height:40px;padding:0 var(--s4);border-radius:var(--r);border:2px solid var(--outline);background:var(--fill);color:var(--on-fill);font:600 var(--t0) var(--display);letter-spacing:.1px;display:inline-flex;align-items:center;gap:var(--s2);box-shadow:0 3px 0 var(--outline);transform:translateY(0);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
.btn:not(.pri,.go,.ai,.warm,.no,.sky,.rose){color:var(--ink)}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--outline)}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--outline)}
.btn.pri{--fill:var(--mint)}.btn.go{--fill:var(--butter)}.btn.ai{--fill:var(--lilac)}.btn.warm{--fill:var(--coral)}.btn.sky{--fill:var(--skyf)}.btn.rose{--fill:var(--rose)}
.btn.no{--fill:var(--surface);color:var(--stop)}
.btn.ghost{border-color:transparent;box-shadow:none;background:transparent;color:var(--sub);transform:none}.btn.ghost:hover{background:var(--sunk);color:var(--ink);transform:none;box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 2px 0 var(--outline)}
.fld{display:grid;gap:6px;margin:0}.fld label{font:600 var(--t-1) var(--display)}
.fld input,.fld select,.fld textarea{min-height:42px;padding:8px var(--s3);border:2px solid var(--line);border-radius:var(--r);background:var(--surface);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.fld textarea{min-height:96px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--outline);box-shadow:0 3px 0 var(--outline)}
.fld .err{color:var(--stop);font-size:var(--t-1);font-weight:600}
/* status stickers */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);border:1.5px solid var(--outline);padding:1px var(--s3);font:600 var(--t-1) var(--display)}
.pill.recv{background:var(--accent-bg);color:var(--accent)}.pill.done,.pill.acc{background:var(--go-bg);color:var(--go)}.pill.wait,.pill.info{background:var(--hold-bg);color:var(--hold)}.pill.no{background:var(--stop-bg);color:var(--stop)}.pill.ai{background:var(--ai-bg);color:var(--ai)}
.kind{font:600 var(--t-2) var(--display);color:var(--sub);background:var(--sunk);border-radius:var(--pill);padding:1px 9px;margin-right:6px}
.kind.request{background:var(--sky-bg);color:var(--sky)}.kind.post{background:var(--peach-bg);color:var(--peach)}.kind.code{background:var(--plum-bg);color:var(--plum)}
.banner{border:2px dashed var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);color:var(--sub);font-size:var(--t-1)}.banner.warn{border-color:var(--hold)}
/* list, tabs, tree */
.item{display:flex;gap:var(--s3);width:100%;text-align:left;padding:var(--s2);border-radius:var(--r);align-items:center;transition:background var(--dur-1) var(--ease)}
.item:hover{background:var(--sunk)}.item.sel{background:var(--accent-bg);box-shadow:inset 0 0 0 2px var(--outline),3px 3px 0 var(--outline);font-weight:600}.item.sel .tk{font-weight:700}
.item .tk{font-weight:600;line-height:1.3}.item .ln{font-size:var(--t-1);color:var(--sub)}
.lamp{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:var(--t-2);font-weight:800;background:var(--sunk);color:var(--sub);border:1.5px solid var(--outline)}
.lamp.recv{background:var(--accent-bg);color:var(--accent)}.lamp.done{background:var(--go-bg);color:var(--go)}.lamp.wait{background:var(--hold-bg);color:var(--hold);border-radius:var(--r-s)}.lamp.no{background:var(--stop-bg);color:var(--stop)}
.tabbar{scrollbar-width:none;display:flex;gap:var(--s1);padding:var(--s2) var(--s2) 0;background:var(--side);border-bottom:2px solid var(--outline);overflow-x:auto}
.tb{display:flex;align-items:center;gap:var(--s2);min-height:36px;padding:0 var(--s2) 0 var(--s3);border-radius:var(--r) var(--r) 0 0;color:var(--sub);font:600 var(--t-1) var(--display);white-space:nowrap;border:2px solid transparent;border-bottom:0;transition:background var(--dur-1) var(--ease)}
.tb:hover{background:var(--sunk)}.tb.on{background:var(--bg);color:var(--ink);border-color:var(--outline);margin-bottom:-2px}
.tree summary{list-style:none;cursor:pointer;padding:5px var(--s2);border-radius:var(--r-s);display:flex;gap:var(--s2);align-items:center;transition:background var(--dur-1) var(--ease)}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"▸";color:var(--sub);font-size:var(--t-2);width:10px;transition:transform var(--dur-2) var(--ease)}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tree summary:hover,.tree .leaf:hover{background:var(--sunk)}
.tree .kids{margin-left:var(--s3);border-left:2px solid var(--line);padding-left:var(--s1)}
.tree .leaf{display:flex;gap:var(--s2);padding:5px var(--s2);border-radius:var(--r-s);width:100%;text-align:left}.tree .leaf.sel{background:var(--accent-bg)}
.tree .cnt{margin-left:auto;color:var(--sub);font-size:var(--t-2)}.tree .fn{font:var(--t-2) var(--mono);color:var(--sub)}
/* ribbon: each area is a small game-menu tile */
.rb{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;color:var(--on-fill);border:2px solid var(--outline);background:var(--fill,var(--sunk));box-shadow:0 2px 0 var(--outline);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.rb:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--outline)}.rb.on{transform:translateY(2px);box-shadow:0 0 0 var(--outline)}
.rb.docs{--fill:var(--mint)}.rb.chan{--fill:var(--skyf)}.rb.work{--fill:var(--coral)}.rb.bell{--fill:var(--butter)}.rb.ai{--fill:var(--lilac)}
/* content blocks: calm */
.blk{border:2px solid var(--line);background:var(--surface);border-radius:var(--r-l);padding:var(--s3) var(--s4)}
.blk.key{border-color:var(--outline);box-shadow:0 4px 0 var(--outline)}
.blk .k{font:600 var(--t-1) var(--display);color:var(--sub);margin-bottom:var(--s1)}
.blk.wait{border-color:var(--hold);background:var(--hold-bg)}
.cm{padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--sunk)}.cm.me{background:var(--accent-bg)}
.slot{display:flex;gap:var(--s2);padding:var(--s2) 0;border-top:2px solid var(--line)}.slot:first-child{border-top:0}
.slot .m{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:var(--t-2);flex:none;border:1.5px solid var(--outline)}
.slot .m.ok{background:var(--go-bg);color:var(--go)}.slot .m.no{background:var(--sunk);color:var(--sub)}
del{background:var(--stop-bg);color:var(--stop);text-decoration:line-through;border-radius:4px;padding:0 3px}ins{background:var(--go-bg);color:var(--go);text-decoration:none;border-radius:4px;padding:0 3px}
.rdx{font:var(--t-2) var(--mono);background:var(--accent-bg);color:var(--accent);border-radius:var(--r-s);padding:1px 6px;white-space:nowrap}
.log{background:var(--code);border:2px solid var(--line);border-radius:var(--r);padding:var(--s2) 0;font:var(--t-1)/1.6 var(--mono)}
.log .ln{display:grid;grid-template-columns:44px 56px 1fr;padding:0 var(--s3)}.log .n{color:var(--sub);text-align:right;padding-right:var(--s3)}
.lv.ERROR{color:var(--stop);font-weight:700}.lv.WARN{color:var(--hold);font-weight:700}.lv.INFO{color:var(--sub)}
.chat{font:var(--read)/1.65 var(--serif)}.msg{display:flex;gap:var(--s3);margin-bottom:var(--s4)}.msg.u{justify-content:flex-end}
.msg.u .b{background:var(--sunk);padding:var(--s2) var(--s3);border-radius:var(--r-l);font:var(--t0) var(--sans)}
.av{width:30px;height:30px;border-radius:50%;background:var(--lilac);color:var(--on-fill);display:grid;place-items:center;flex:none;border:2px solid var(--outline)}
.toast{display:inline-block;background:var(--butter);color:var(--on-fill);padding:var(--s2) var(--s4);border-radius:var(--r);font:600 var(--t0) var(--display);border:2px solid var(--outline);box-shadow:0 3px 0 var(--outline)}

*{box-sizing:border-box}
html,body{height:100%;margin:0}body{height:100dvh}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);overflow:hidden;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
code,pre,.mono{font-family:var(--mono);font-size:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.m0{margin:0}
/* the mascot (bean()): every colour is a class, not an inline style (style-src 'self', no
   unsafe-inline, SECURITY-ITD-008) */
.bn-svg{display:block}
.bn-body{fill:var(--mint);stroke:var(--outline);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bn-cheek{fill:var(--coral);opacity:.7}
.bn-o{fill:var(--outline)}
.bn-hi{fill:var(--surface)}
.bn-k{fill:none;stroke:var(--outline);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bn-mouth-happy{fill:var(--coral);stroke:var(--outline);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bn-z{font:700 22px var(--display);fill:var(--outline)}
.bn-cloud{fill:var(--skyf);stroke:var(--outline);stroke-width:3}
.bn-feather{fill:var(--butter);stroke:var(--outline);stroke-width:4;stroke-linejoin:round}
.bn-featherline{fill:none;stroke:var(--outline);stroke-width:3;stroke-linecap:round}
/* shell (REUSE from the command center) */
#app{flex:1;min-height:0;display:grid;grid-template-columns:60px 330px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 26px}
.ribbon{gap:var(--s3)!important;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;background:var(--side);border-right:1px solid var(--line)}
.side{background:var(--side);border-right:1px solid var(--line);overflow:auto;padding:0 8px 16px}
.side h2{margin:14px 6px 4px;font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.2px}
.stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.view{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--bg)}
.view.noinsp{grid-template-columns:minmax(0,1fr)}
.main{overflow:auto;padding:18px 28px 28px;min-width:0}
.insp{overflow:auto;border-left:1px solid var(--line);background:var(--side);padding:16px 16px}
.status{grid-column:2/4;display:flex;gap:16px;align-items:center;padding:0 12px;background:var(--side);border-top:1px solid var(--line);font-size:11.5px;color:var(--sub)}
.status b{color:var(--ink);font-weight:650}.status .sp{flex:1}
.status .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--go);margin-right:6px}
/* list items (REUSE) */
/* tree (NEW; the Studio pattern) */
.tree{font-size:12.5px}
.tree .ic{color:var(--sub);width:14px;text-align:center}
.hint{margin:12px 6px;color:var(--sub);font-size:11.5px;line-height:1.4}
/* document view (NEW) */
.crumb{font:12px var(--mono);color:var(--sub);margin-bottom:6px}
.prov{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--sub);margin-bottom:14px}
.prov .ok{color:var(--go);font-weight:650}.prov .stale{color:var(--hold);font-weight:700}
.doc h1{font:600 24px/1.25 var(--serif);margin:0 0 10px}
.doc p{margin:0 0 12px;font:16px/1.6 var(--serif)}
.doc table{border-collapse:collapse;margin:8px 0 16px;font-size:13px}
.doc th,.doc td{border:1px solid var(--line);padding:6px 10px;text-align:left}.doc th{background:var(--sunk)}
.fig{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px;margin:8px 0 16px}
.fig.err{border-color:var(--hold);background:var(--hold-bg)}
.fig .cap{font-size:12px;color:var(--sub);margin-top:6px}
pre.src{margin:8px 0 0;background:var(--code);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;overflow:auto}
/* log view (NEW) */
.logbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;font-size:12.5px}
.chip{border:1px solid var(--line);border-radius:14px;padding:4px 11px;background:var(--surface);font-weight:600;font-size:12px}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.log .lv{font-weight:700}.lv.ERROR{color:var(--stop)}.lv.WARN{color:var(--hold)}.lv.INFO{color:var(--sub)}
.log .fold{margin:2px 10px;padding:4px 10px;border:1px dashed var(--line);border-radius:6px;color:var(--sub);cursor:pointer;display:block;width:calc(100% - 20px);text-align:left}
/* request thread (NEW) */
.thr h1{font:700 20px/1.3 var(--sans);margin:2px 0 8px}
.sechd{font-size:11px;font-weight:700;color:var(--sub);margin:16px 0 8px;letter-spacing:.5px}.sechd:first-child{margin-top:0}
.kv{display:grid;grid-template-columns:84px 1fr;gap:5px 10px;font-size:12.5px}.kv dt{color:var(--sub)}.kv dd{margin:0;word-break:break-word}
/* forms and buttons (REUSE) */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.err{color:var(--stop);font-size:12.5px;font-weight:600;margin:4px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}.t th,.t td{text-align:left;padding:7px 8px;border-top:1px solid var(--line)}.t th{color:var(--sub);font-size:11px;font-weight:700;border-top:0}
.t .num{text-align:right;font-family:var(--mono)}
.note2{border-left:3px solid var(--ai);padding:2px 0 2px 10px;margin:10px 0;color:var(--sub);font-size:12.5px}
.tool{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:3px 10px;background:var(--surface);font:12px var(--sans);color:var(--sub);margin:0 0 8px 34px}
.tool b{color:var(--go)}
.chm{padding:6px 0}.chm .who{font-weight:700;font-size:13px}.chm .when{font-size:11.5px;color:var(--sub);margin-left:6px}.chm .tx{font-size:14px;margin-top:1px}
.chm.th{margin-left:22px;padding-left:10px;border-left:2px solid var(--line)}.chm.gone{color:var(--sub);font-style:italic}.chm.hl{background:var(--accent-bg);border-radius:8px;padding:6px 10px}
.fresh{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--sub);margin:4px 0 12px;flex-wrap:wrap}.fresh .stale{color:var(--hold);font-weight:700}.fresh .ok{color:var(--go);font-weight:650}
.upd{display:flex;gap:10px;padding:9px 0;margin-top:6px;border-top:1px solid var(--line);align-items:flex-start;font-size:13.5px;width:100%;text-align:left}.upd:first-child{margin-top:0;border-top:0}.upd .ud{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:var(--line)}.upd.un .ud{background:var(--accent)}.upd .w{color:var(--sub);font-size:12px}
.tree summary .nm,.tree .leaf .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tree summary.ini{font-weight:650;flex-wrap:wrap}.tree summary.ini .fn{order:3;flex-basis:100%;margin:0 0 0 16px}.tree summary.pk{align-items:flex-start}.tree summary.pk .nm{white-space:normal}
.tree .grp{font:600 11px var(--display);color:var(--sub);margin:12px 6px 4px;letter-spacing:.3px}
.tree .more{font-size:11.5px;color:var(--sub);padding:2px 8px}.tree .pkmeta{font-size:11.5px;color:var(--sub);padding:2px 8px 4px}.tree .dim{color:var(--hold);font-style:italic}
.tree .leaf .nm{flex:1}
.rb .pip{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:var(--stop);color:var(--surface);border:1.5px solid var(--outline);font:700 10px/14px var(--sans);text-align:center;padding:0 4px}
.rb{position:relative}
.fig svg{max-width:760px;display:block}
.thr .blk{margin:12px 0}.thr .cm{margin:8px 0}
.brand{display:flex;align-items:center;gap:8px;padding:12px 6px 4px}.brand .wm{font:500 19px/1 var(--display)}.brand .wm b{font-weight:700}
.empty{display:grid;justify-items:center;gap:10px;padding:56px 0;color:var(--sub);text-align:center}.empty b{font:600 17px var(--display);color:var(--ink)}
.mood{display:flex;gap:12px;align-items:center}
.tool{display:inline-flex;gap:8px;align-items:center;border:1.5px solid var(--line);border-radius:14px;padding:3px 10px;background:var(--surface);font:12px var(--sans);color:var(--sub);margin:0 0 8px 38px}.tool b{color:var(--go)}
.note2{border:2px dashed var(--line);border-radius:var(--r);padding:8px 12px;margin:10px 0;color:var(--sub);font-size:12.5px}
.chip.lint{background:var(--go-bg);color:var(--go);border-color:transparent}.chip.lint.adv{background:var(--hold-bg);color:var(--hold)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:12px 0}
.cardx{display:grid;gap:4px;text-align:left;align-content:start;border:2px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px 14px}
button.cardx:hover{border-color:var(--outline)}.cardx .ci{font-size:18px;color:var(--sub)}.cardx b{font:600 15px var(--display)}
.btn.sm{padding:3px 10px;font-size:12px}
.doc h3{font:600 15px var(--display);margin:18px 0 6px}.doc .meta{color:var(--sub);font-size:12.5px;margin-bottom:10px}.doc ul{font:15px/1.6 var(--serif);margin:0 0 12px;padding-left:20px}
.doc blockquote{margin:8px 0;padding:8px 14px;border-left:3px solid var(--ai);background:var(--sunk);font:15px/1.6 var(--serif)}
.opts{display:grid;gap:8px}.opt{border:1.5px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--surface)}.opt.on{border-color:var(--go);background:var(--go-bg)}.opt .meta{display:block;margin:2px 0 0}
.chk{list-style:none;padding:0}.chk li:before{content:"☐ "}.chk li.x:before{content:"☑ ";color:var(--go)}
.bar{height:10px;border-radius:6px;background:var(--sunk);margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--go)}
.kind{display:inline-block;font:700 10.5px var(--display);border-radius:var(--pill);padding:1px 8px}
.kind.question{background:var(--lilac-bg,var(--plum-bg));color:var(--plum)}
.kind.request{background:var(--sky-bg);color:var(--sky)}
.kind.message{background:var(--peach-bg);color:var(--peach)}
.kind.code{background:var(--go-bg);color:var(--go)}
.stg.todo{opacity:.75}
.sev{display:inline-block;font:700 10px var(--display);border-radius:var(--pill);padding:1px 7px;background:var(--sunk);color:var(--sub)}
.sev.stuck,.sev.failing{background:var(--stop-bg);color:var(--stop)}
.sev.waiting{background:var(--hold-bg);color:var(--hold)}
.sev.missing{background:var(--hold-bg);color:var(--hold)}
.ini .lnk{font:inherit;color:var(--sky);text-decoration:underline;text-underline-offset:2px}
.banner{display:flex;align-items:center;border:2px solid var(--outline);box-shadow:3px 3px 0 var(--outline);border-radius:var(--r-l);background:var(--go-bg);padding:10px 16px;margin:12px 0}
.banner.stuck{background:var(--stop-bg)}.banner.warn{background:var(--hold-bg)}.banner .hl{font:600 20px var(--display)}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}
.stg{display:grid;gap:3px;align-content:start;border:2px solid var(--line);border-radius:var(--r);background:var(--surface);padding:10px 12px;position:relative}
.stg b{font:600 13px var(--display)}.stg .sn{font:700 13px var(--mono);color:var(--sub)}
.stg.done{background:var(--go-bg);border-color:transparent}.stg.done .sn{color:var(--go)}
.stg.now{border-color:var(--outline);box-shadow:3px 3px 0 var(--outline);background:var(--accent-bg)}
.stg.stuck{border-color:var(--stop);background:var(--stop-bg)}.stg.stuck .sn{color:var(--stop)}
.att{display:flex;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid var(--line)}.att:first-child{border-top:0}.att .at{flex:1;font-size:13.5px}
.att.stop{background:linear-gradient(90deg,var(--stop-bg),transparent 40%)}
.who{display:inline-block;font:700 10.5px var(--display);border-radius:var(--pill);padding:1px 8px;background:var(--sunk);color:var(--sub)}
.who.eng{background:var(--sky-bg);color:var(--sky)}.who.slack{background:var(--peach-bg);color:var(--peach)}
.who.stop{background:var(--stop-bg);color:var(--stop)}

.navbtn{display:none}.leaf.off{opacity:.6;cursor:default}.leaf.off .meta{margin-left:auto;font-size:11px}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--sunk)}.t .pill{white-space:nowrap}
@media(max-width:1000px){
 #app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
 .ribbon{grid-row:2;grid-column:1;flex-direction:row;justify-content:space-around;gap:2px!important;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);overflow-x:auto}
 .ribbon .rb-sp{display:none}
 .rb{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 0;width:auto;min-width:0;max-width:64px;height:50px;gap:0;font-size:15px}
 .rb::after{content:attr(title);font:600 9px/1.1 var(--display);margin-top:2px;max-width:100%;overflow:hidden;text-overflow:clip}
 .stage,.side{grid-row:1;grid-column:1}.side{display:none;padding-bottom:24px}
 #app.nav-open .side{display:block}#app.nav-open .stage{display:none}
 .status{display:none}
 .tabbar{overflow-x:auto;white-space:nowrap;flex:none}.navbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:40px;font-size:18px;border-right:1px solid var(--line)}
 .view,.view.noinsp{display:block;overflow:auto}.main{overflow:visible;padding:14px 14px 28px}.insp{border-left:0;border-top:1px solid var(--line)}
 .two{grid-template-columns:1fr}.stages{grid-template-columns:1fr}.cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .main table{display:block;overflow-x:auto;max-width:100%}
 .btn,.item,.leaf,summary,.chip{min-height:44px}.att{flex-wrap:wrap;align-items:flex-start}.att .at{flex-basis:calc(100% - 40px)}.att .btn{margin-left:34px}
 .banner .hl{font-size:17px}.doc h1,.thr h1{font-size:20px}.doc p{font-size:15px}
 .fold{padding:12px 10px!important;min-height:44px}.lnk{min-height:44px;padding:12px 0;display:inline-flex;align-items:center}.kv{grid-template-columns:90px 1fr}.row{gap:6px}
}
.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;max-width:min(92vw,520px)}.toast.on{opacity:1;transform:translate(-50%,0)}
.wsw{display:flex;align-items:center;gap:8px;padding:2px 6px 8px}.wsw label{font:600 11px var(--display);color:var(--sub)}.wsw select{flex:1;min-height:36px;border:2px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 8px}
.wsb{font:700 9.5px var(--mono);color:var(--sub);border:1.5px solid var(--line);border-radius:6px;padding:0 5px;margin-left:6px}
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:14px;overflow-x:auto;padding:6px 2px 14px;align-items:start;scroll-snap-type:x proximity}
.kcol{display:grid;gap:10px;align-content:start;background:var(--sunk);border-radius:var(--r-l);padding:12px;min-height:140px;scroll-snap-align:start}
.kh{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--display);padding:2px 4px 4px}
.kc{display:grid;gap:8px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);padding:12px 14px}.kc:hover{border-color:var(--outline)}.kc.stuck{border-color:var(--stop);background:var(--stop-bg)}.kc.done{border-color:transparent;background:var(--go-bg)}.kc b{font:600 14px/1.3 var(--display)}.sev.done{background:var(--go-bg);color:var(--go)}
.kr{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.kempty{color:var(--sub);font-size:12px;text-align:center;padding:12px}
.klist{display:grid;gap:8px}.kc.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.kc.row b{flex:1 1 160px}
.stages{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important}.stg .doc{font:600 10.5px var(--mono);color:var(--sub)}.stg .own{font-size:11px;color:var(--sub);margin-top:2px}.stg .par{font:700 10px var(--display);color:var(--ai)}.stg.pl{border-style:dashed}
.rule{margin:2px 2px 12px}.who.prod{background:var(--plum-bg);color:var(--plum)}
.pulse{display:flex;gap:10px;align-items:center}.beat{width:10px;height:10px;border-radius:50%;background:var(--go);box-shadow:0 0 0 0 var(--go);animation:beat 2s infinite}.beat.off{background:var(--stop);animation:none}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(0,0,0,.25)}70%{box-shadow:0 0 0 8px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
@media(prefers-reduced-motion:reduce){.beat{animation:none}}
/* spacing rhythm: label to field 8, field to next control 14, button rows 8 apart */
.fld{gap:8px}.thr .fld,.doc .fld,.blk .fld{margin:0 0 14px}.blk .fld:last-child{margin-bottom:0}
.fld + .row,.fld + .btn,.fld + button,.fld + .err,.err + .row,.err + .btn{margin-top:14px}
.blk > .row,.thr > .row,.thr > .btn,.blk > .btn,.blk > button.btn{margin-top:14px}
.blk .k{margin-bottom:10px}.blk textarea,.blk input,.blk select{width:100%}
.err{margin:8px 0 12px}.thr h1{margin:2px 0 10px}.thr>.pill{margin-bottom:6px}
.row{gap:10px}.btn.sm{padding:0 12px;min-height:34px}
.chm{padding:10px 0}.item{padding:10px var(--s3)}.att{padding:10px 6px}
.logbar{gap:10px;margin:8px 0 14px}.logbar .chip{padding:5px 12px}
.item+.item,.leaf+.leaf{margin-top:6px}.item .ln{margin-top:2px}
@media(max-width:1280px) and (min-width:1001px){#app{grid-template-columns:60px 250px minmax(0,1fr)}.view{grid-template-columns:minmax(0,1fr) 230px}.main{padding:16px 20px 24px}}
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;align-items:end;margin:12px 0 16px}.sched .row{grid-column:1/-1;margin-top:2px}.sched select{width:100%}
.sched-top{margin-top:14px}
.side .btn.pri{margin:4px 6px 10px;width:calc(100% - 12px)}
.side .err{margin:0 6px 10px}
.ckl{display:inline-flex;align-items:center;gap:6px;margin-right:12px;font-size:13px}.ckl input{width:auto;min-height:0}
.t select,.sched select{min-height:36px;padding:0 10px;border:2px solid var(--line);border-radius:var(--r-s);background:var(--surface)}.t select:disabled{opacity:.6}
.tw{overflow-x:auto;max-width:100%}.t.roles th{vertical-align:top;min-width:120px}.t.roles td.ck{text-align:center}.t.roles input[type=checkbox]{width:20px;height:20px;min-height:0;accent-color:var(--accent)}.rn{width:100%;min-height:36px;border:2px solid var(--line);border-radius:var(--r-s);background:var(--surface);padding:0 8px;font:600 13px var(--display)}.rn:disabled{border-color:transparent;background:none;opacity:1}.t.roles th .btn{margin-top:8px}.t.roles th .meta{margin-top:12px}
.signin{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;padding:24px;overflow:auto}.sbox{max-width:480px;width:100%;display:grid;gap:14px;justify-items:center;text-align:center}.sbox h1{font:700 26px var(--display)}.accs{display:grid;gap:10px;width:100%}.acc{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;min-height:56px;border:2px solid var(--outline);border-radius:var(--r);background:var(--surface);box-shadow:0 3px 0 var(--outline)}.acc:hover{background:var(--accent-bg)}.acc .g{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--butter);font:700 15px var(--display);color:var(--on-fill);flex:none}.acc .meta{display:block;font-weight:400}.lnk.so{margin-left:auto;font-size:12px;color:var(--sky);text-decoration:underline;text-underline-offset:2px}.wsw .meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
blockquote.srcq{margin:0;padding:8px 14px;border-left:3px solid var(--ai);background:var(--sunk);font:15px/1.5 var(--serif)}