rvlib-shipkit 0.38.0 → 1.0.0

package/src/serve/hub-app/hub.css

@@ -1,123 +1,214 @@
-/* house palette — matches the graph family. Plain CSS on purpose: a
-   published lib must not impose bunfig plugins (tailwind) on consumers. */
-:root{--bg:#141210;--panel:#1e1a15;--panel2:#262019;--line:#332b22;--ink:#f3ebe0;--dim:#a89a88;
- --accent:#e88c28;--gold:#ffcf5c;--teal:#58c0b0;--red:#e05252;--blue:#6ca0e8;--chk1:#221d17;--chk2:#1a1611}
+/* THE TOKENS: the one place a colour is picked. Plain CSS on purpose, a
+   published lib must not impose bunfig plugins (tailwind) on consumers.
+   Graphite chrome, one cool accent for selection, focus and the primary
+   action, and red/orange/green reserved for STATE. No rule outside this
+   block writes a colour, and tests/hub-css-invariants.test.ts fails one
+   that does. */
+:root{--bg:#0d0e10;--panel:#141619;--panel2:#1b1e22;--line:#282c31;--ink:#e2e4e7;--dim:#8d9299;
+ --accent:#6b8fb3;--sel:#1a2430;--chk1:#16181b;--chk2:#121417;
+ /* state, and nothing else: red broken · orange taste pending · green measured passing */
+ --red:#d2605c;--warn:#cf9a4e;--ok:#6faa86;--blue:#6f9bd1;
+ /* the colourless ones: scrims, shadows, masks and the ruler hairlines */
+ --scrim:rgba(0,0,0,.6);--shadow:rgba(0,0,0,.62);--solid:#000;
+ --hi1:rgba(255,255,255,.28);--hi2:rgba(255,255,255,.16);--hi3:rgba(255,255,255,.07);
+ --ground:#1b2521;--groundline:#2a3630;--tag:#eef2f6;
+ /* the KIND hues: a row's type, never its state (tree-build TYPE_MARK) */
+ --k1:#8ca8c7;--k2:#a892c9;--k3:#6fb0b8;--k4:#c792b4;--k5:#9198a1;--k6:#8f95cf;
+ --wash:rgba(107,143,179,.15);--wash2:rgba(107,143,179,.11);--hair:rgba(107,143,179,.5);
+ --errbg:#2a1a1a;--errline:#4a2c2c;--errink:#e3bebe;
+ /* the ONE spacing scale: every padding, margin and gap in this sheet is a
+    value from it or 0, and tests/hub-css-invariants.test.ts fails the rest */
+ --s0:2px;--s1:4px;--s2:8px;--s3:12px;--s4:16px}
 *{box-sizing:border-box}html,body,#root{height:100%}
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif;overflow:hidden}
-.app{display:grid;grid-template-columns:46px 290px 1fr;height:100vh}
+/* the page is a flex ROW: a column mounted before .appcol sits left of the
+   header and everything under it, and .appcol stacks the header, the live
+   strip and the body */
+.app{display:flex;height:100vh}
+.appcol{flex:1;min-width:0;display:flex;flex-direction:column}
+.appbody{flex:1;min-height:0;display:grid;grid-template-columns:330px 1fr}
 
-/* ── icon rail: jump-to-section, never a navigation ── */
-.skrail{width:46px;height:100vh;display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:4px;
- background:#17140f;border-right:1px solid var(--line)}
-.skrail .ric{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;
- font-size:17px;cursor:pointer;filter:grayscale(35%);opacity:.75;position:relative;user-select:none}
-.skrail .ric:hover{background:var(--panel2);filter:none;opacity:1}
-.skrail .ric i{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
+/* ── the header: repo name, the core pages, the two runs and the run state ── */
+.hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--panel)}
+.hdr .sp{flex:1}
+.hname{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:var(--s2);white-space:nowrap}
+.hnav{display:flex;gap:var(--s1);overflow:hidden}
+.hnav button{border-color:transparent;color:var(--dim);border-radius:0;border-bottom:1px solid transparent;white-space:nowrap}
+.hnav button:hover{color:var(--ink);border-color:transparent;border-bottom-color:var(--line)}
+.hnav button.on{color:var(--accent);border-bottom-color:var(--accent)}
+/* the run state holds its width whatever it says, so a run never moves the buttons beside it */
+.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:260px;min-width:260px;flex:none;justify-content:flex-end;font-size:11.5px;color:var(--dim);overflow:hidden}
+.hstate.on{color:var(--ink)}
+.hstate .htext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ── the live strip: the one run chart. Folded, one thin row of ONE height
+   whatever runs; unfolded, the chart at the height its lanes hold, set
+   inline from a held value that grows at once and shrinks only after a
+   while, so it never jumps every second. The strip clips nothing itself, so
+   its (?) opens below it over the page; the chart box clips the chart ── */
+.live{display:flex;flex-direction:column;height:30px;flex:none;border-bottom:1px solid var(--line);background:var(--bg);font-size:11px;color:var(--dim)}
+.live .hbub{top:calc(100% + 6px);bottom:auto;z-index:30}
+.lrow{display:flex;gap:var(--s2);align-items:center;height:29px;flex:none;padding:0 var(--s3)}
+.lrow .sp{flex:1}
+.lfold{display:inline-flex;gap:var(--s1);align-items:center;border-color:transparent;color:var(--dim);padding:var(--s0) var(--s1)}
+.lfold .sk{font-size:9px;opacity:.55}
+.lwho{width:180px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
+.live.idle .lwho{color:var(--dim)}
+.lwho i{font-style:normal;color:var(--dim);margin-left:var(--s1)}
+.lwho b{font-weight:500;color:var(--accent);margin-left:var(--s1)}
+.lchart{flex:1;min-width:0;height:21px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
+.lopen{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s3);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
+.lnote,.lmore{flex:none;color:var(--warn);white-space:nowrap}
+.lbusy{flex:none;white-space:nowrap}
 
 /* ── sidebar ── */
-aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;height:100vh}
-.shead{position:sticky;top:0;background:var(--panel);padding:12px 14px;border-bottom:1px solid var(--line);
+aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0}
+.shead{position:sticky;top:0;background:var(--panel);padding:var(--s3);border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);z-index:2;display:flex;justify-content:space-between;align-items:center}
-/* segmented severity filter — all · needs · red */
-.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none}
-.seg button{background:var(--bg);color:var(--dim);border:0;border-radius:0;padding:2px 8px;font-size:10px;font-weight:600;
- letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
+/* segmented severity filter — all · needs · red. A thin border and an
+   underline on the live one: no fill, no pill */
+.seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
+.seg button{background:transparent;color:var(--dim);border:0;border-bottom:1px solid transparent;border-radius:0;
+ padding:var(--s0) var(--s2);font-size:11px;font-weight:500;text-transform:lowercase;letter-spacing:0;cursor:pointer}
 .seg button+button{border-left:1px solid var(--line)}
 .seg button:hover{color:var(--ink)}
-.seg button.on{background:var(--accent);color:#1a1206}
-.ssearch{padding:8px 12px}
-.ssearch input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);
- padding:6px 10px;font-size:12.5px;outline:none}
+.seg button.on{color:var(--accent);border-bottom-color:var(--accent)}
+.seg button .sk{margin-left:var(--s1);font-size:9px;opacity:.55}
+.swhen{padding:0 var(--s3) var(--s2);font-size:11px;color:var(--dim)}
+.ssearch{padding:var(--s2) var(--s3)}
+.ssearch input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
+ padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
 .ssearch input:focus{border-color:var(--accent)}
-/* section header — hairline top border, tight letterspacing; media cats
-   and collection sections share this treatment EXACTLY */
-.gname{padding:9px 14px 4px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
- border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;scroll-margin-top:46px}
-.gname .cn{cursor:pointer}.gname .cn:hover{color:var(--gold)}
-.gname .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-align:right;min-width:18px}
-.warnline{color:var(--red);text-transform:none;letter-spacing:0}
+/* ── the resource tree: ONE row shape, a fixed grid. The indent rides in
+   the FIRST column and the label eats the slack, so every right side slot
+   lines up down the whole column whatever the depth. Colour is on the
+   label, and the glyph slot repeats the state as one character: no dots,
+   no prose, no dash separators ── */
+.tree{padding:var(--s1) 0 var(--s4);outline:none}
+.tree:focus-visible{box-shadow:inset 2px 0 0 var(--accent)}
+.trow{display:grid;grid-template-columns:calc(var(--d,0)*12px + 18px) 14px minmax(0,1fr) 58px 46px 14px;
+ align-items:center;gap:var(--s1);padding:0 var(--s2);height:20px;line-height:20px;cursor:pointer;white-space:nowrap}
+.trow:hover{background:var(--panel2)}
+.trow.on{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
+/* the fold marker: an 11px chevron with the whole first column as its hit
+   target, and it turns rather than swapping for another glyph */
+.tw{display:flex;align-items:center;justify-content:flex-end;height:20px;color:var(--dim);user-select:none}
+.trow:hover .tw{color:var(--ink)}
+.cvt{transition:transform .12s ease;transform-origin:50% 50%;flex:none}
+.cvt.open{transform:rotate(90deg)}
+/* WHAT a row is: one glyph, one hue per kind. The hue is the kind's
+   identity and carries no state, which is why it is its own slot */
+.ty{font-size:11px;text-align:center;user-select:none;color:var(--dim)}
+.ty.k1{color:var(--k1)}
+.ty.k2{color:var(--k2)}
+.ty.k3{color:var(--k3)}
+.ty.k4{color:var(--k4)}
+.ty.k5{color:var(--k5)}
+.ty.k6{color:var(--k6)}
+.tl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
+.tl.red{color:var(--red)}
+.tl.warn{color:var(--warn)}
+.tl.ok{color:var(--ok)}
+.tl.idle{color:var(--ink)}
+.tl.quiet{color:var(--dim)}
+/* a check's id: a small dim tag before its title, never the loud part */
+.tid{font:9.5px ui-monospace,Menlo,monospace;color:var(--dim);margin-right:var(--s1);letter-spacing:.02em}
+/* the state glyph: ONE glyph per state, the same everywhere. Blocking
+   versus advisory is a muted tone, never a word */
+.tg{font-size:10px;text-align:center;color:var(--dim);user-select:none}
+.tg.red{color:var(--red)}
+.tg.warn{color:var(--warn)}
+.tg.ok{color:var(--ok)}
+.tg.adv{color:var(--warn);opacity:.75}
+.tg.run{color:var(--accent);animation:pulse 1.1s ease-in-out infinite}
+/* right aligned, tabular figures, ONE unit (ms) and one tone table, so a
+   column of durations compares by eye (hub-app/dur.ts owns both) */
+.tdur{font:10.5px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:right;color:var(--dim);overflow:hidden}
+.tdur.fast,.dnum.fast{color:var(--ok)}
+.tdur.plain,.dnum.plain{color:var(--ink)}
+.tdur.slow,.dnum.slow{color:var(--warn)}
+.tdur.bad,.dnum.bad{color:var(--red)}
+.tnote{font-size:10px;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
+.tnote b{font-weight:600;color:var(--red)}
+.stabs{display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s3);border-bottom:1px solid var(--line)}
+.stabs .sp{flex:1}
+.stabs .cnt{font-size:11px;color:var(--dim)}
+.catgen{display:inline-flex;gap:var(--s1)}
+.catgen button{padding:var(--s0) var(--s2);font-size:11px;font-weight:700}
+.tempty{padding:var(--s2) var(--s3);font-size:12px;color:var(--dim);white-space:pre-wrap}
+.warnline{color:var(--red)}
 .fold{cursor:pointer;color:var(--dim);font-size:15px;display:inline-block;width:22px;text-align:center;
- padding:2px 3px;margin:-2px 0;border-radius:6px;user-select:none}
+ padding:var(--s0);border-radius:3px;user-select:none}
 .fold:hover{color:var(--ink);background:var(--panel2)}
-.catgen button{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:6px;
- padding:1px 6px;font-size:11px;font-weight:700;margin-left:3px;cursor:pointer}
-.catgen button:hover{color:var(--ink);border-color:var(--accent)}
-/* items sit one step in from their header, on a subtle left guide line;
-   the full row hovers, the selected row keeps the accent bar */
-.arow{position:relative;display:flex;align-items:center;gap:8px;padding:3px 12px 3px 24px;cursor:pointer;
- border-left:3px solid transparent}
-.arow::before{content:'';position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--line)}
-.arow:hover{background:var(--panel2)}
-.arow.sel{background:rgba(232,140,40,.18);border-left-color:var(--accent)}
-.arow.sel::before{background:transparent}
-.arow .lb{flex:1;min-width:0}.arow .lb b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
-.arow .lb span{font-size:11px;color:var(--dim);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
-.dot.done{background:var(--gold)}.dot.some{background:var(--accent)}
-.dot.miss{background:#e5484d}.dot.stale{background:#f5a524}
-.cdot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
-.cdot.red{background:var(--red)}.cdot.yellow{background:var(--gold)}
+.spin{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:rot 1s linear infinite;flex:none}
 
 /* ── main column ── */
-main{display:flex;flex-direction:column;height:100vh;overflow:hidden}
+main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 /* topbar: the prompt is its OWN full-width row (folded by default to one
    ellipsized line; expanded = small mono, auto-grows to its content,
    scrolls only past ~14 lines), then ONE slim toolbar row */
-.bar{display:flex;flex-direction:column;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
+.bar{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--panel)}
 textarea{width:100%;min-height:64px;background:var(--bg);color:var(--ink);border:1px solid var(--line);
- border-radius:9px;padding:9px 11px;font:12px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
-.promptrow{display:flex;gap:6px;align-items:flex-start}
-.promptrow .fold{flex:none;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:9px;
- padding:6px 9px;font-size:11px;line-height:1.5}
-.bar .prompt{flex:1;min-height:36px;max-height:252px;overflow-y:auto;resize:none;font:11px/1.5 ui-monospace,Menlo,monospace;padding:7px 10px}
+ border-radius:3px;padding:var(--s2) var(--s3);font:12px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
+.promptrow{display:flex;gap:var(--s1);align-items:flex-start}
+.promptrow .fold{flex:none;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:3px;
+ padding:var(--s1) var(--s2);font-size:11px;line-height:1.5}
+.bar .prompt{flex:1;min-height:36px;max-height:252px;overflow-y:auto;resize:none;font:11px/1.5 ui-monospace,Menlo,monospace;padding:var(--s2)}
 .bar .prompt.folded{min-height:0;max-height:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;
- color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:9px}
-.toolbar{display:flex;gap:8px;align-items:center;min-height:30px}
-.toolbar button{padding:5px 11px;font-size:12px}
+ color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:3px}
+.toolbar{display:flex;gap:var(--s2);align-items:center;min-height:30px}
+.toolbar button{padding:var(--s1) var(--s3);font-size:12px}
 .toolbar .sp{flex:1}
-.toolbar .xn{display:flex;gap:3px;align-items:center;font-size:12px;color:var(--dim)}
-.toolbar .xn select{padding:4px 5px;font-size:12px}
-button{background:var(--accent);color:#1a1206;border:0;border-radius:9px;padding:8px 13px;font-weight:650;cursor:pointer}
-button.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
-button:disabled{opacity:.45;cursor:default}
-select,input[type=number]{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px}
+.toolbar .xn{display:flex;gap:var(--s0);align-items:center;font-size:12px;color:var(--dim)}
+.toolbar .xn select{padding:var(--s1);font-size:12px}
+/* BUTTONS: small, flat, one pixel border on the panel colour, a 12px
+   lowercase label. The accent is a border and an ink colour on the primary
+   action, never a fill, and nothing here is a big rounded rectangle */
+button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:3px;
+ padding:var(--s0) var(--s2);font:500 12px/1.5 system-ui,sans-serif;cursor:pointer}
+button:hover{border-color:var(--accent)}
+button.primary{color:var(--accent);border-color:var(--accent)}
+button.ghost{color:var(--dim)}
+button.ghost:hover{color:var(--ink)}
+button:disabled{opacity:.4;cursor:default;border-color:var(--line);color:var(--dim)}
+select,input[type=number]{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:var(--s2)}
 .status{font-size:12px;color:var(--dim);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;flex:none}
-.spin{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:rot 1s linear infinite;flex:none}
 @keyframes rot{to{transform:rotate(360deg)}}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
 .progbar{display:block;width:120px;height:4px;background:var(--panel2);border-radius:2px;overflow:hidden;flex:none}
-.progbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
-.detnote{font-size:11px;color:var(--teal);line-height:1.25}
-.jrow{display:flex;gap:8px;margin-top:6px;align-items:center}
+.progbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
+.detnote{font-size:11px;color:var(--ok);line-height:1.25}
+.jrow{display:flex;gap:var(--s2);margin-top:var(--s1);align-items:center}
 .jmsg{font-size:12px;color:var(--dim)}
-kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:11px}
-.help{font-size:11px;color:var(--dim);padding:4px 16px;border-top:1px solid var(--line)}
-.errs{background:#3a1717;border-bottom:1px solid #5a2222;color:#f0c0c0;font:12px/1.5 ui-monospace,Menlo,monospace;
- padding:6px 16px;white-space:pre-wrap}
+kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 var(--s1);font-size:11px}
+.help{font-size:11px;color:var(--dim);padding:var(--s1) var(--s4);border-top:1px solid var(--line)}
+.errs{background:var(--errbg);border-bottom:1px solid var(--errline);color:var(--errink);font:12px/1.5 ui-monospace,Menlo,monospace;
+ padding:var(--s1) var(--s4);white-space:pre-wrap}
 
 /* ── per-asset info chips ── */
-.info{flex-wrap:wrap;gap:6px;align-items:center;padding:6px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
-.info .chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);border-radius:6px;
- padding:2px 8px;font-size:11px;color:var(--ink);max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.info{flex-wrap:wrap;gap:var(--s1);align-items:center;padding:var(--s1) var(--s4);border-bottom:1px solid var(--line);background:var(--panel2)}
+.info .chip{display:inline-flex;align-items:center;gap:var(--s1);background:var(--bg);border:1px solid var(--line);border-radius:3px;
+ padding:var(--s0) var(--s2);font-size:11px;color:var(--ink);max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .info .chip b{color:var(--accent);font-weight:650;letter-spacing:.05em;text-transform:uppercase;font-size:10px}
-.info .chip.warn{border-color:var(--red);color:#f0c0c0}.info .chip.warn b{color:var(--red)}
+.info .chip.warn{border-color:var(--red);color:var(--errink)}.info .chip.warn b{color:var(--red)}
 .info .chip code{font:11px ui-monospace,Menlo,monospace;color:var(--dim)}
 
 /* ── stage ── */
-.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;
+.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--s4);overflow:hidden;
  background:conic-gradient(var(--chk1) 90deg,var(--chk2) 0 180deg,var(--chk1) 0 270deg,var(--chk2) 0) 0/34px 34px}
-.stage img.roll{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 20px #0008);z-index:5;position:relative}
+.stage img.roll{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 20px var(--shadow));z-index:5;position:relative}
 .stage .ph,.stagewrap .ph{color:var(--dim)}
-.stagewrap{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:18px}
-.stageaud{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:48px;padding:40px}
+.stagewrap{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:var(--s4)}
+.stageaud{display:flex;flex-direction:column;align-items:center;gap:var(--s3);font-size:48px;padding:var(--s4)}
 .stageaud audio{width:min(480px,80vw)}
 
 /* ── geometry overlay ── */
-#ov{position:absolute;border:2px solid var(--gold);border-radius:50%;background:rgba(255,207,92,.14);cursor:move;z-index:10}
-#ov .hdl{position:absolute;right:-7px;top:-7px;width:14px;height:14px;background:var(--gold);border-radius:3px;cursor:nesw-resize}
-#ov .arrow{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--gold);opacity:.8}
-#ov .sz{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);font-size:11px;color:var(--gold);
- background:#000a;padding:0 5px;border-radius:4px;white-space:nowrap}
-.plumb{position:absolute;width:0;border-left:1px dashed rgba(255,207,92,.5);top:-2000px;bottom:-2000px;z-index:9}
+#ov{position:absolute;border:2px solid var(--accent);border-radius:50%;background:var(--wash);cursor:move;z-index:10}
+#ov .hdl{position:absolute;right:-7px;top:-7px;width:14px;height:14px;background:var(--accent);border-radius:3px;cursor:nesw-resize}
+#ov .arrow{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--accent);opacity:.8}
+#ov .sz{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);font-size:11px;color:var(--accent);
+ background:var(--scrim);padding:0 var(--s1);border-radius:4px;white-space:nowrap}
+.plumb{position:absolute;width:0;border-left:1px dashed var(--hair);top:-2000px;bottom:-2000px;z-index:9}
 /* leg DRAG boxes all ride at 10, above the sprite (5) and the mask host
    (.ovlhost 6) — every leg grabbable even with a mask canvas on. depth is
    the PILLS' job, never theirs */
@@ -125,202 +216,453 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .leg.far{border-color:var(--blue)}
 .leg.near{border-color:var(--red)}
 .leg .hip{position:absolute;top:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:currentColor}
-.leg .foot{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:12px;height:7px;border-radius:50%;background:var(--gold)}
+.leg .foot{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:12px;height:7px;border-radius:50%;background:var(--accent)}
 .leg .lh{position:absolute;right:-6px;top:-6px;width:11px;height:11px;background:currentColor;border-radius:3px;cursor:nesw-resize}
-.leg .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:#eaf2ff;
- text-shadow:0 1px 2px #000c;pointer-events:none;white-space:nowrap}
-.leg.near .tag{color:#ffecec}
+.leg .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--tag);
+ text-shadow:0 1px 2px var(--solid);pointer-events:none;white-space:nowrap}
 /* resting-pose pill preview, game z-order sandwich: far pills (3) behind
    the sprite (5), near pills (7) over it — never intercept a drag */
-.pill{position:absolute;border-radius:999px;z-index:3;opacity:.9;pointer-events:none}
+.pill{position:absolute;border-radius:3px;z-index:3;opacity:.9;pointer-events:none}
 .pill.near{z-index:7}
-#rectbar{position:absolute;left:14px;bottom:14px;z-index:11;gap:8px;align-items:center;
- background:#000b;border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12px}
-#rectbar input[type=number]{width:64px;padding:4px}
+#rectbar{position:absolute;left:14px;bottom:14px;z-index:11;gap:var(--s2);align-items:center;
+ background:var(--scrim);border:1px solid var(--line);border-radius:5px;padding:var(--s2);font-size:12px}
+#rectbar input[type=number]{width:64px;padding:var(--s1)}
 #rectbar .ro{color:var(--dim);font:11px ui-monospace,Menlo,monospace}
-#rectbar label{display:flex;gap:6px;align-items:center}
+#rectbar label{display:flex;gap:var(--s1);align-items:center}
 
 /* ── category grid + lineup ── */
-#catgrid{flex:1;min-height:0;overflow-y:auto;padding:14px}
-.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
-.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer}
+#catgrid{flex:1;min-height:0;overflow-y:auto;padding:var(--s3)}
+.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s3)}
+.card{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2);cursor:pointer}
 .card:hover{border-color:var(--accent)}
-.card .th{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;
+.card .th{position:relative;aspect-ratio:1;border-radius:4px;overflow:hidden;
  background:conic-gradient(var(--chk1) 90deg,var(--chk2) 0 180deg,var(--chk1) 0 270deg,var(--chk2) 0) 0/14px 14px}
 .card .th img{width:100%;height:100%;object-fit:contain}
-.card .th .ovmini{position:absolute;border:1.5px solid var(--gold);border-radius:50%;background:rgba(255,207,92,.12)}
+.card .th .ovmini{position:absolute;border:1.5px solid var(--accent);border-radius:50%;background:var(--wash2)}
 .card .th .spin{position:absolute;top:8px;right:8px}
-.card .nm{font-size:12px;margin:6px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
-.card .nm:hover{color:var(--gold)}
-.card .row{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--dim)}
-.card .row input{width:58px;padding:3px}
-.card .aud{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:28px}
+.card .nm{font-size:12px;margin:var(--s1) 0 var(--s1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
+.card .nm:hover{color:var(--accent)}
+.card .row{display:flex;gap:var(--s1);align-items:center;font-size:11px;color:var(--dim)}
+.card .row input{width:58px;padding:var(--s0)}
+.card .aud{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);font-size:28px}
 .card .aud audio{width:92%;height:24px}
-#allbar{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:12px;color:var(--dim)}
-#allbar label{display:flex;gap:6px;align-items:center}
-#mixsec{margin-top:16px}
+#allbar{display:flex;gap:var(--s2);align-items:center;margin:0 0 var(--s3);font-size:12px;color:var(--dim)}
+#allbar label{display:flex;gap:var(--s1);align-items:center}
+#mixsec{margin-top:var(--s4)}
 #mixbox{position:relative;height:420px;overflow-x:auto;overflow-y:hidden;background:var(--panel);
- border:1px solid var(--line);border-radius:10px}
+ border:1px solid var(--line);border-radius:5px}
 #mixinner{position:relative;height:100%}
-#mixground{position:absolute;left:0;right:0;bottom:0;height:44px;background:#1d2b1a;border-top:1px solid #2c4527}
+#mixground{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--ground);border-top:1px solid var(--groundline)}
 .mixsprite{position:absolute;image-rendering:auto;pointer-events:none}
 .mixlabel{position:absolute;font-size:10px;color:var(--dim);text-align:center;transform:translateX(-50%)}
 .ruler{position:absolute;left:0;right:0;bottom:44px;top:0;pointer-events:none;
  background:
-  repeating-linear-gradient(to top,rgba(255,255,255,.28) 0 1px,transparent 1px 240px),
-  repeating-linear-gradient(to top,rgba(255,255,255,.16) 0 1px,transparent 1px 120px),
-  repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 1px,transparent 1px 24px)}
+  repeating-linear-gradient(to top,var(--hi1) 0 1px,transparent 1px 240px),
+  repeating-linear-gradient(to top,var(--hi2) 0 1px,transparent 1px 120px),
+  repeating-linear-gradient(to top,var(--hi3) 0 1px,transparent 1px 24px)}
 .rlabel{position:absolute;left:4px;font-size:9px;color:var(--dim)}
 .rlabel.b{font-weight:700;color:var(--ink)}
 
 /* ── roll vignettes (shared by the variants bar + category cards) ── */
-.vig{position:relative;height:100%;aspect-ratio:1;flex:none;border:2px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;
+.vig{position:relative;height:100%;aspect-ratio:1;flex:none;border:2px solid var(--line);border-radius:5px;overflow:hidden;cursor:pointer;
  background:conic-gradient(var(--chk1) 90deg,var(--chk2) 0 180deg,var(--chk1) 0 270deg,var(--chk2) 0) 0/12px 12px}
 .vig img{width:100%;height:100%;object-fit:contain}
 .vig.active{border-color:var(--ink)}
-.vig.picked{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
-.vig.alt{border-color:var(--teal)}
-.vig .st{position:absolute;top:4px;right:6px;font-size:16px;filter:drop-shadow(0 1px 2px #000)}
-.vig .btns{position:absolute;bottom:4px;left:4px;right:4px;display:flex;gap:4px;justify-content:center;opacity:0;transition:opacity .15s}
+.vig.picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
+.vig.alt{border-color:var(--ok)}
+.vig .st{position:absolute;top:4px;right:6px;font-size:16px;filter:drop-shadow(0 1px 2px var(--solid))}
+.vig .btns{position:absolute;bottom:4px;left:4px;right:4px;display:flex;gap:var(--s1);justify-content:center;opacity:0;transition:opacity .15s}
 .vig:hover .btns{opacity:1}
-.vig .btns button{padding:2px 7px;font-size:11px;border-radius:6px}
-.vig .btns .b-alt{background:var(--teal);color:#06342c}
-.vig .btns .b-del{background:var(--red);color:#fff}
-.vig.aud{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:20px}
+.vig .btns button{padding:var(--s0) var(--s2);font-size:11px;border-radius:3px}
+.vig .btns .b-alt{color:var(--ok);border-color:var(--ok)}
+.vig .btns .b-del{color:var(--red);border-color:var(--red)}
+.vig.aud{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);font-size:20px}
 .vig.aud audio{width:100%;height:24px}
-.vig.gen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--dim);font-size:11px}
+.vig.gen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);color:var(--dim);font-size:11px}
 
 /* ── tools bar + center row (stage column + variants side bar) ── */
-.toolsbar{display:flex;gap:6px;align-items:center;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
-.toolsbar .tab{background:transparent;color:var(--dim);border:0;border-bottom:2px solid transparent;border-radius:0;padding:4px 10px;font-size:12.5px;font-weight:650}
+.toolsbar{display:flex;gap:var(--s1);align-items:center;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--panel)}
+.toolsbar .tab{background:transparent;color:var(--dim);border:0;border-bottom:2px solid transparent;border-radius:0;padding:var(--s1) var(--s2);font-size:12.5px;font-weight:650}
 .toolsbar .tab.on{color:var(--ink);border-bottom-color:var(--accent)}
-.toolsbar .tdiv{width:1px;align-self:stretch;background:var(--line);margin:0 8px}
-.toolsbar .tlab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
-.toolsbar .chip{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 13px;font-size:12px;font-weight:600}
+.toolsbar .tdiv{width:1px;align-self:stretch;background:var(--line);margin:0 var(--s2)}
+.toolsbar .tlab{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-right:var(--s1)}
+.toolsbar .chip{background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:var(--s1) var(--s3);font-size:12px;font-weight:600}
 .toolsbar .chip.on{color:var(--ink);background:var(--bg);border-color:var(--accent)}
 .toolsbar .sp{flex:1}
-.toolsbar .ghost{font-size:12px;padding:4px 11px}
+.toolsbar .ghost{font-size:12px;padding:var(--s1) var(--s3)}
 .centerrow{display:flex;flex:1;min-height:0}
 .ovlhost{position:absolute;z-index:6;pointer-events:none}
 .fpanel{position:absolute;z-index:12;min-width:230px;max-width:520px;background:var(--panel);border:1px solid var(--line);
- border-radius:10px;box-shadow:0 10px 30px #000a;display:flex;flex-direction:column}
-.fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 9px;border-bottom:1px solid var(--line);
+ border-radius:5px;box-shadow:0 10px 30px var(--shadow);display:flex;flex-direction:column}
+.fhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s1) var(--s2);border-bottom:1px solid var(--line);
  cursor:grab;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;user-select:none}
-.fhead .x{background:transparent;color:var(--dim);border:0;padding:0 2px;font-size:12px}
+.fhead .x{background:transparent;color:var(--dim);border:0;padding:0 var(--s0);font-size:12px}
 .fhead .x:hover{color:var(--ink)}
-.fbody{padding:6px 9px;max-height:46vh;overflow:auto}
+.fbody{padding:var(--s1) var(--s2);max-height:46vh;overflow:auto}
 /* panel content inherits the hub's chunky default button — inside a card
    everything is DENSE, repo panel scripts get this for free */
-.fbody button{padding:3px 9px;font-size:11.5px;font-weight:600;border-radius:6px}
-.fbody input:not([type=color]),.fbody select{padding:3px 6px;font-size:11.5px}
+.fbody button{padding:var(--s0) var(--s2);font-size:11.5px;font-weight:600;border-radius:3px}
+.fbody input:not([type=color]),.fbody select{padding:var(--s0) var(--s1);font-size:11.5px}
 .fbody label{font-size:11.5px}
 .fbody .jsonta{width:100%;min-height:160px}
 .vbar{flex:none;border-left:1px solid var(--line);background:var(--panel);display:flex;min-height:0;position:relative}
-.vbar.closed{width:26px;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--dim);font-size:11px}
-.vbar .vcount{background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 6px;font-size:10px}
+.vbar.closed{width:26px;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);cursor:pointer;color:var(--dim);font-size:11px}
+.vbar .vcount{background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:var(--s0) var(--s1);font-size:10px}
 .vhandle{position:absolute;left:0;top:0;bottom:0;width:6px;cursor:col-resize;z-index:3}
 .vhandle:hover{background:var(--accent);opacity:.4}
-.vscroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:10px 8px 10px 12px}
+.vscroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s2) var(--s2) var(--s3)}
 .vbar .vig{width:100%;height:auto}
-.vbar .ph{color:var(--dim);font-size:12px;padding:8px}
+.vbar .ph{color:var(--dim);font-size:12px;padding:var(--s2)}
 
 /* ── asset remark row ── */
-.assetrem{flex:none;border-top:1px solid var(--line);background:var(--panel);padding:8px 12px}
-.assetrem .row{display:flex;gap:10px;align-items:center}
-.assetrem input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 10px;font-size:12.5px}
-.assetrem .rem{color:var(--teal);border-left:2px solid var(--teal);padding-left:10px;font-size:12.5px;margin:0 0 8px;white-space:pre-wrap}
+.assetrem{flex:none;border-top:1px solid var(--line);background:var(--panel);padding:var(--s2) var(--s3)}
+.assetrem .row{display:flex;gap:var(--s2);align-items:center}
+.assetrem input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);padding:var(--s2);font-size:12.5px}
+.assetrem .rem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12.5px;margin:0 0 var(--s2);white-space:pre-wrap}
 
 /* ── collection item card + status card ── */
-.colcard{max-width:760px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;text-align:left}
-.colcard h3{margin:0 0 10px;font-size:15px;display:flex;gap:10px;align-items:baseline}
+.colcard{max-width:760px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);text-align:left}
+.colcard h3{margin:0 0 var(--s2);font-size:15px;display:flex;gap:var(--s2);align-items:baseline}
+.colcard h3 .sp{flex:1}
 .colcard .truth{margin-left:auto;font:11px ui-monospace,Menlo,monospace;color:var(--dim)}
-.colcard .rem{color:var(--teal);border-left:2px solid var(--teal);padding-left:10px;font-size:12.5px;margin:8px 0;white-space:pre-wrap}
-.colcard .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
-.colcard input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 10px;font-size:12.5px}
-.colcard code{display:block;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:12px ui-monospace,Menlo,monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;margin-top:8px}
-.colcard .cand{background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 12px;margin-top:8px}
+.colcard .rem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12.5px;margin:var(--s2) 0;white-space:pre-wrap}
+.colcard .row{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2);flex-wrap:wrap}
+.colcard input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);padding:var(--s2);font-size:12.5px}
+.colcard code{display:block;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:var(--s2);font:12px ui-monospace,Menlo,monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;margin-top:var(--s2)}
+.colcard .cand{background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:var(--s2) var(--s3);margin-top:var(--s2)}
 .colcard .candhint{color:var(--dim);font-size:12.5px;white-space:pre-wrap}
-.colcard .err,.assetrem .err{color:var(--red);margin-top:8px;font-size:12.5px}
+.colcard .err,.assetrem .err{color:var(--red);margin-top:var(--s2);font-size:12.5px}
 .colcard a{color:var(--accent)}
 
-.back{cursor:pointer;color:var(--dim);font-size:12px}
-.back:hover{color:var(--ink)}
-.colcard .back{margin-bottom:8px}
+/* ONE GATE CHECK's page: small widgets on a responsive grid, each answering
+   one question and carrying the `(?)` for its own words. The label and value
+   table it replaces made every fact the same size and the same shape */
+.checkcard{max-width:1000px}
+/* the runs page: invocations on the left, one lane per check with its bar at
+   its real start and end, the three lists on the right. A bar wears the tones
+   of the check page's bar row, so red, warn, green and a grey replay mean the
+   same thing on both */
+.tlcard{max-width:1400px}
+/* the horizontal axis over the whole record: one svg, scrolled sideways,
+   zoomed by the wheel */
+.tlax{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab}
+.tlax.dragging{cursor:grabbing}
+.tlax::-webkit-scrollbar{display:none}
+/* the zoom control floats over the chart's top right corner: it shows while
+   the pointer is on the chart, and stays while the chart is zoomed */
+.tlchart{position:relative}
+.tlfloat{position:absolute;top:var(--s1);right:var(--s1);z-index:4;display:flex;gap:var(--s1);align-items:center}
+.tlzoom{background:var(--panel);opacity:0;transition:opacity .15s}
+.tlchart:hover .tlzoom,.tlchart.zoomed .tlzoom{opacity:1}
+/* the chart stopped following: one pill says so and takes it back to now */
+.tllive{background:var(--panel);color:var(--accent);border-color:var(--accent)}
+.tlax.compact{overflow:hidden;height:100%;padding-top:var(--s0)}
+.tlaxin{position:relative}
+.tlsvg{display:block}
+.tlband{fill:var(--wash2);stroke:var(--line)}
+.tlband.red{stroke:var(--red)}
+.tlbandlbl{fill:var(--dim);font:10px ui-monospace,Menlo,monospace}
+.tlb{fill:var(--dim);cursor:pointer}
+.tlb:hover{stroke:var(--ink)}
+.tlb.fast{fill:var(--ok)}
+.tlb.plain{fill:var(--accent)}
+.tlb.slow,.tlb.warn{fill:var(--warn)}
+.tlb.bad,.tlb.red{fill:var(--red)}
+.tlb.rep{fill:var(--line)}
+.tlb.run{fill:var(--accent);animation:pulse 1.6s ease-in-out infinite}
+.tlb.repo{fill:var(--k6)}
+.tlband.run{stroke:var(--accent)}
+.tlconc{fill:var(--hair)}
+.tlconc.over{fill:var(--warn)}
+.tlcap{stroke:var(--dim);stroke-dasharray:3 3}
+.tlcaplbl{fill:var(--dim);font:9.5px ui-monospace,Menlo,monospace}
+.tltick line{stroke:var(--line)}
+.tltick text,.tlgap text{fill:var(--dim);font:9.5px ui-monospace,Menlo,monospace}
+/* a folded idle stretch: a neutral slice the full height, apart from the
+   bars and the concurrency band, its duration inside */
+.tlgap rect{fill:var(--hi3);stroke:var(--line);stroke-dasharray:2 3}
+.tlgap.live rect{stroke:var(--accent)}
+.tlgap.live text{fill:var(--ink)}
+.tlgap text{font-size:10px;pointer-events:none}
+.tlnow{stroke:var(--accent)}
+/* fixed to the viewport, placed from the pointer: every box of the strip
+   clips its overflow, and a tooltip inside them is cut to a sliver */
+.tlaxtip{position:fixed;z-index:30;display:flex;flex-direction:column;gap:0;padding:var(--s1) var(--s2);pointer-events:none;
+ background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 12px var(--shadow);font-size:11px;white-space:nowrap}
+.tlaxtip .dim{color:var(--dim)}
+/* the runs page: one tab bar, then one list. Every line on a grid of fixed
+   columns (.rrun, .rtest, .rslow), 24px high, tabular numerals, numbers
+   right aligned, so ages, times and counts read down a column. A check line
+   shares its run's columns, its id spanning the three left of the time, and
+   its word sits in the ran or the cached column */
+.rtabs{display:flex;gap:var(--s3);align-items:center;height:32px;border-bottom:1px solid var(--line)}
+.rtabs .sp{flex:1}
+.rtab{display:inline-flex;gap:var(--s1);align-items:center;height:32px;background:transparent;border:0;border-bottom:2px solid transparent;border-radius:0;padding:0 var(--s1);color:var(--dim);font-size:12.5px}
+.rtab:hover{color:var(--ink)}
+.rtab.on{color:var(--ink);border-bottom-color:var(--accent)}
+.rbadge{min-width:18px;padding:0 var(--s1);border-radius:8px;font-size:10.5px;line-height:16px;text-align:center;font-variant-numeric:tabular-nums;background:var(--panel2);color:var(--dim)}
+.rbadge.red{background:var(--errbg);color:var(--red)}
+.rbadge.warn{color:var(--warn)}
+.rlist{margin-top:var(--s2);font-size:12px;font-variant-numeric:tabular-nums}
+.rline,.rhead{display:grid;gap:var(--s2);align-items:center;height:24px;padding:0 var(--s1);white-space:nowrap}
+.rline{cursor:pointer}
+.rline>*,.rhead>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.rline:hover{background:var(--panel2)}
+.rline.red{box-shadow:inset 2px 0 0 var(--red)}
+.rhead{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:right}
+.rrun,.rchild{grid-template-columns:12px 64px 72px minmax(0,1fr) 88px 64px 88px 48px}
+.rtest{grid-template-columns:152px minmax(0,1fr) 88px 144px 64px}
+/* a test file page: its runs, when, verdict, time against its budget, tier */
+.rtrun{grid-template-columns:64px minmax(0,1fr) 88px 88px;cursor:default}
+.rtrun .rid{display:flex;gap:var(--s2);align-items:center}
+/* the pages of the test groups: one line per file (where the time goes), one
+   per test check (the tests page), the failing files with their failure line */
+.rtime{grid-template-columns:minmax(0,1fr) 88px 72px 128px 72px 40px 88px}
+.rcheckt{grid-template-columns:152px 88px 48px 56px minmax(0,1fr) 72px}
+.rhead .tleft{text-align:left}
+.tshare{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--s1);align-items:center}
+.ttrack{display:block;height:6px;border-radius:1px;overflow:hidden;background:var(--panel2)}
+.ttrack i{display:block;height:100%;background:var(--accent)}
+.tfail{cursor:pointer}
+.tfail:hover{background:var(--panel2)}
+.tfline{grid-template-columns:minmax(0,1fr) 88px 64px}
+.tfline.wc{grid-template-columns:152px minmax(0,1fr) 88px 64px}
+.tfwhy{font:11px/1.5 ui-monospace,Menlo,monospace;color:var(--red);padding:0 var(--s1) var(--s1) var(--s4);white-space:pre-wrap;word-break:break-word}
+.tfwhy.dim{color:var(--dim)}
+.tsum{margin-bottom:var(--s2);font-size:12.5px}
+.tsline{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline}
+.tshape,.tstop{margin-top:var(--s1)}
+.tshape.tail,.tshape.volume{color:var(--warn)}
+/* the runner's wall cut into its phases, so time spent outside the files shows */
+.tpbar{display:flex;height:10px;border-radius:2px;overflow:hidden;background:var(--panel2);margin-bottom:var(--s2)}
+.tpbar i{display:block;height:100%}
+.tpbar .p-setup{background:var(--dim)}
+.tpbar .p-par{background:var(--accent)}
+.tpbar .p-ser{background:var(--k6)}
+.tpbar .p-alone{background:var(--warn)}
+.tpbar .p-host{background:var(--line)}
+.rslow{grid-template-columns:minmax(0,1fr) 88px 88px 144px}
+.rran,.rcached{text-align:right}
+.rran{color:var(--accent)}
+.rcached{color:var(--dim)}
+.rran.zero,.rcached.zero{opacity:.4}
+.rcaret{color:var(--dim)}
+.rwho{border:1px solid var(--line);border-radius:3px;padding:0 var(--s1);font-size:10px;line-height:16px;text-align:center;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
+.rchild .rid{grid-column:2/5;display:flex;gap:var(--s2);align-items:center;padding-left:var(--s4)}
+.rchild .rname{min-width:0;overflow:hidden;text-overflow:ellipsis}
+/* an unfolded run's checks scroll in a box of their own, so a fifty check
+   gate never pushes the other runs off the page */
+.rkids{max-height:16rem;overflow-y:auto;margin-bottom:var(--s1);border-radius:3px;box-shadow:inset 0 0 0 1px var(--line);background:var(--bg)}
+.rtag{font:11px ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis}
+.rtag.dim,.rnum.dim{color:var(--dim)}
+.rnum{text-align:right;font:12px ui-monospace,Menlo,monospace}
+.rnum.fast{color:var(--ok)}
+.rnum.slow{color:var(--warn)}
+.rnum.bad{color:var(--red)}
+.rred,.rflag.red{color:var(--red)}
+.rflag.warn{color:var(--warn)}
+.rempty{height:24px;line-height:24px;color:var(--dim)}
+/* it holds its width: a label growing from `run it now` to `running` used
+   to resize the header under the pointer */
+.urun{min-width:104px;display:inline-flex;gap:var(--s1);align-items:center;justify-content:center}
+/* a titled card and its label and value facts: the runs page lists and the
+   project card read these */
+.wcard{background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:var(--s3);min-width:0}
+.wcard.wide{grid-column:1/-1}
+.wtitle{display:flex;gap:var(--s1);align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
+ color:var(--dim);margin-bottom:var(--s2)}
+.wbody{font-size:12.5px;min-width:0}
+.wfact{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s1) 0;border-top:1px solid var(--line);min-width:0}
+.wk{flex:0 0 88px;color:var(--dim);font-size:11px;display:flex;gap:var(--s0);align-items:center}
+.wv{flex:1;min-width:0;word-break:break-word}
+.wcard code{display:inline;background:var(--panel2);border:1px solid var(--line);border-radius:3px;
+ padding:0 var(--s1);margin:0;font:11.5px ui-monospace,Menlo,monospace;max-height:none;white-space:normal}
+.wcard .dim{color:var(--dim)}
+.wcard .md{min-height:120px;max-height:320px;overflow-y:auto}
+/* the head: the id as a small tag, then the title, then the run button */
+.chead{display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
+.chead .sp{flex:1}
+.checkcard h3.ctitle{margin:0;font-size:15px;font-weight:600;display:inline;min-width:0;overflow-wrap:anywhere}
+/* ONE grid of facts: a dim label left, the value right, two per line on a
+   wide screen and one on a narrow one. No fact sits in a box of its own */
+.cfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s4);margin-top:var(--s2)}
+@media (max-width:900px){.cfacts{grid-template-columns:minmax(0,1fr)}}
+.cf{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s2);align-items:baseline;padding:var(--s1) 0;
+ border-top:1px solid var(--line);min-width:0;font-size:12.5px}
+.cf.wide{grid-column:1/-1}
+.ck{color:var(--dim);font-size:11px;display:inline-flex;gap:var(--s0);align-items:center}
+.cv{min-width:0}
+.cblock{display:block;margin-top:var(--s1)}
+.cwhen{display:inline-flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
+.ctimes{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:baseline}
+.ctimes .ck{margin-right:var(--s1)}
+.cinputs summary{cursor:pointer}
+/* the command: copyable monospace, wrapping only between tokens */
+.ccmd{margin-top:var(--s2)}
+.checkcard code{display:inline;background:var(--panel2);border:1px solid var(--line);border-radius:3px;
+ padding:0 var(--s1);margin:0;font:11.5px ui-monospace,Menlo,monospace;max-height:none;overflow:visible;white-space:normal}
+.checkcard .cargv{user-select:all;padding:var(--s0) var(--s2);line-height:1.7}
+.tok{white-space:nowrap}
+a.tok{color:var(--accent)}
+.ccopy{margin-left:var(--s2);font-size:10px;padding:0 var(--s2)}
+.cscript{margin-top:var(--s1)}
+/* a path never breaks mid token: it truncates, and its tooltip is the whole */
+.checkcard .cpath{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
+.checkcard .dim{color:var(--dim)}
+/* what is not a fact: the output and the slow suites, titled, unboxed */
+.csec{margin-top:var(--s4)}
+.cstitle{display:flex;gap:var(--s1);align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
+ color:var(--dim);margin-bottom:var(--s2)}
+.wline{margin-bottom:var(--s1);word-break:break-word}
+/* the check's own sentence, under the title: it answers "what is this row",
+   and the grid below it is detail. Rendered as markdown, so a code span and a
+   link in a description read as one */
+.usays{margin:var(--s2) 0 0 0;font-size:13px;line-height:1.55}
+.usays p{margin:0}
+/* one wire line, with its prefix and its indentation kept: the pre holds the
+   shape, the inline markdown inside it makes a pointer clickable */
+.wlogline{white-space:pre-wrap;word-break:break-word}
+.wlogline code{background:var(--panel2);border-radius:3px;padding:0 2px}
+/* one number, in the one unit, in the one tone (hub-app/dur.ts) */
+.dnum{font:12px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
+/* the last runs, oldest left: an average hides a check creeping up, and the
+   ledger cannot even see the reds */
+.bars{display:flex;gap:var(--s0);align-items:flex-end;height:34px;margin-top:var(--s2)}
+.bars .bar{flex:1;min-width:3px;border-radius:1px;background:var(--dim);display:block}
+.bars .bar.fast{background:var(--ok)}
+.bars .bar.plain{background:var(--accent)}
+.bars .bar.slow{background:var(--warn)}
+.bars .bar.bad,.bars .bar.red{background:var(--red)}
+.bars .bar.warn{background:var(--warn)}
+.bars .bar.rep{background:var(--line)}
+/* the lines of the run in flight, then the lines of the last one. A floor
+   height, so a streaming run never jumps the card it sits in */
+.wlog{margin:0;min-height:120px;max-height:320px;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
+ border-radius:3px;padding:var(--s2);font:11.5px/1.5 ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap}
+/* THE HELP: a `(?)` that says its one sentence at once, on hover and on
+   focus. No delay, no library, no state */
+.hlp{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;flex:none;
+ border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:9px;line-height:1;cursor:help;
+ position:relative;outline:none;user-select:none}
+.hlp:hover,.hlp:focus{color:var(--accent);border-color:var(--accent)}
+.hbub{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;
+ max-width:260px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);
+ padding:var(--s1) var(--s2);font:11.5px/1.4 system-ui,sans-serif;text-transform:none;letter-spacing:0;
+ color:var(--ink);white-space:normal;z-index:9}
+.hlp:hover .hbub,.hlp:focus .hbub{display:block}
+/* the type legend: every glyph of the tree with its word, in one bubble */
+.legend{display:flex;flex-direction:column;gap:var(--s1)}
+.legend .lrow{display:flex;gap:var(--s2);align-items:baseline;white-space:normal}
+.legend .lrow i{font-style:normal;width:12px;text-align:center;flex:none}
+/* the switch: one select named by effect, and the reason that makes `never`
+   sayable. It writes repo.config.ts, so the note under it is the file waiting
+   for a commit */
+.wsel{min-width:150px}
+.winputs{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s1)}
+/* an age that moves: the one clock ticks, and only these repaint */
+.ago{color:var(--dim);font-size:11.5px}
+.wclear{background:var(--bg);color:var(--dim);border:1px solid var(--line);border-radius:3px;
+ padding:var(--s0) var(--s2);font-size:10px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
+.wclear:hover{color:var(--ink)}
+.wreason{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
+ padding:var(--s1) var(--s2);font-size:12.5px;outline:none;margin-top:var(--s2)}
+.wreason:focus{border-color:var(--accent)}
+.wsuite{border-top:1px solid var(--line);padding:var(--s2) 0}
+.wfile{display:flex;gap:var(--s2);align-items:center}
+.wform{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
+.wform input{background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
+ padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
+.wform input:focus{border-color:var(--accent)}
 
 /* ── collection view (one card per instance) ── */
-.colgrid{flex:1;min-height:0;overflow-y:auto;padding:14px 16px}
+.colgrid{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4)}
 .cghead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
- display:flex;gap:10px;align-items:baseline;margin:0 0 12px}
+ display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
 .cghead .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-transform:none}
-.cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
-.cgcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;min-width:0}
+.cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
+.cgcard{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2) var(--s3);cursor:pointer;min-width:0}
 .cgcard:hover{border-color:var(--accent)}
-.cgcard .cgtop{display:flex;gap:8px;align-items:center;min-width:0}
+.cgcard .cgtop{display:flex;gap:var(--s2);align-items:center;min-width:0}
 .cgcard .cgtop b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .truth{display:block;font:11px ui-monospace,Menlo,monospace;color:var(--dim);margin-top:4px;
+.cgcard .truth{display:block;font:11px ui-monospace,Menlo,monospace;color:var(--dim);margin-top:var(--s1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .cgrem{color:var(--teal);border-left:2px solid var(--teal);padding-left:8px;font-size:12px;margin-top:6px;
+.cgcard .cgrem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12px;margin-top:var(--s1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 
 /* ── graph item view (the graph itself fills the stage) ── */
-.graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 16px 16px}
-.gvhead{display:flex;gap:10px;align-items:center;font-size:13px;min-width:0}
+.graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
+.gvhead{display:flex;gap:var(--s2);align-items:center;font-size:13px;min-width:0}
 .gvhead .gvtext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.graphview iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
+.graphview iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
+
+/* ── comfy item view (comfy-ts's own panel fills the stage) ── */
+.comfyview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
+.comfyview iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
+.comfyview .gvhead button.ghost{padding:var(--s0) var(--s2);font-size:12px}
+.comfyview .err{color:var(--red);font-size:12.5px}
+.comfyview .ph{flex:1;display:flex;align-items:center;justify-content:center}
+/* the same panel as a popup over an asset page, so the asset stays behind it */
+.cfov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;align-items:center;justify-content:center;padding:4vh 3vw}
+.cfbox{width:min(1200px,94vw);height:88vh;background:var(--panel);border:1px solid var(--line);border-radius:3px;
+ box-shadow:0 12px 40px var(--shadow);display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s3) var(--s3)}
+.cfbox iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:5px;background:var(--bg)}
+.cfbox .gvhead button.ghost{padding:var(--s0) var(--s2);font-size:12px}
+.cfbox .err{color:var(--red);font-size:12.5px}
+.cfbox .ph{flex:1;display:flex;align-items:center;justify-content:center}
 
 /* ── md output (truth-file card bodies — marked + sanitize allowlist) ── */
 .md{font-size:12px;line-height:1.5;color:var(--ink)}
-.md table{border-collapse:collapse;margin:6px 0;font-size:11.5px;max-width:100%}
-.md th,.md td{border:1px solid var(--line);padding:3px 8px;text-align:left;vertical-align:top}
+.md table{border-collapse:collapse;margin:var(--s1) 0;font-size:11.5px;max-width:100%}
+.md th,.md td{border:1px solid var(--line);padding:var(--s0) var(--s2);text-align:left;vertical-align:top}
 .md th{color:var(--accent);font-weight:650;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:var(--panel2)}
-.md blockquote{margin:6px 0;padding:2px 10px;border-left:2px solid var(--line);color:var(--dim)}
-.md hr{border:0;border-top:1px solid var(--line);margin:8px 0}
-.md h1,.md h2,.md h3{font-size:12.5px;margin:8px 0 4px;color:var(--accent);letter-spacing:.02em}
+.md blockquote{margin:var(--s1) 0;padding:var(--s0) var(--s2);border-left:2px solid var(--line);color:var(--dim)}
+.md hr{border:0;border-top:1px solid var(--line);margin:var(--s2) 0}
+.md h1,.md h2,.md h3{font-size:12.5px;margin:var(--s2) 0 var(--s1);color:var(--accent);letter-spacing:.02em}
 .md h1{font-size:13.5px}
-.md p{margin:4px 0}
-.md ul{margin:4px 0;padding-left:18px}
-.md li{margin:2px 0}
-.md code{display:inline;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 4px;
+.md p{margin:var(--s1) 0}
+.md ul{margin:var(--s1) 0;padding-left:var(--s4)}
+.md li{margin:var(--s0) 0}
+.md code{display:inline;background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 var(--s1);
  font:11px ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap;max-height:none;margin:0}
-.md pre{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0;
+.md pre{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:var(--s2);margin:var(--s1) 0;
  overflow-x:auto;font:11px/1.5 ui-monospace,Menlo,monospace;white-space:pre}
 .md pre code{background:none;border:0;padding:0}
 .md a{color:var(--accent)}
-.md.clamp{max-height:180px;overflow:hidden;margin-top:6px;
- -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
+.md.clamp{max-height:180px;overflow:hidden;margin-top:var(--s1);
+ -webkit-mask-image:linear-gradient(var(--solid) 65%,transparent);mask-image:linear-gradient(var(--solid) 65%,transparent)}
 
 /* ── secret (cred) cards ── */
 .credname{font:600 13px ui-monospace,Menlo,monospace}
-.creddesc{font-size:12px;color:var(--dim);margin-top:4px}
-.credrow{display:flex;gap:8px;align-items:center;margin-top:8px}
-.stchip{font-size:10px;border-radius:5px;padding:1px 7px;letter-spacing:.08em;text-transform:uppercase;
+.creddesc{font-size:12px;color:var(--dim);margin-top:var(--s1)}
+.credrow{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
+.stchip{font-size:10px;border-radius:5px;padding:var(--s0) var(--s2);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;flex:none;font-weight:600}
-.stchip.ok{color:var(--teal);border-color:var(--teal)}
+.stchip.ok{color:var(--ok);border-color:var(--ok)}
 .stchip.miss{color:var(--red);border-color:var(--red)}
 a.mint{color:var(--accent);font-size:12px;text-decoration:none}
 a.mint:hover{text-decoration:underline}
-.colcard h3 .stchip,.colcard h3 a.mint{margin-left:8px}
+.colcard h3 .stchip,.colcard h3 a.mint{margin-left:var(--s2)}
 
 /* ── cmd+j palette ── */
-.palov{position:fixed;inset:0;background:#0009;z-index:100;display:flex;justify-content:center;align-items:flex-start;
+.palov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;justify-content:center;align-items:flex-start;
  padding-top:14vh}
-.pal{width:min(560px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:12px;
- box-shadow:0 12px 40px #000a;overflow:hidden}
+.pal{width:min(560px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:3px;
+ box-shadow:0 12px 40px var(--shadow);overflow:hidden}
 .pal input{width:100%;background:var(--bg);border:0;border-bottom:1px solid var(--line);color:var(--ink);
- padding:12px 14px;font-size:14px;outline:none}
-.prows{max-height:50vh;overflow-y:auto;padding:6px}
-.prow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:13px}
+ padding:var(--s3);font-size:14px;outline:none}
+.prows{max-height:50vh;overflow-y:auto;padding:var(--s1)}
+.prow{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:4px;cursor:pointer;font-size:13px}
 .prow.on{background:var(--panel2)}
 .prow.none{color:var(--dim);cursor:default}
 .prow .plabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .prow .pchip{font-size:10px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:5px;
- padding:1px 6px;text-transform:uppercase;letter-spacing:.08em;flex:none}
+ padding:var(--s0) var(--s1);text-transform:uppercase;letter-spacing:.08em;flex:none}
 
 .wrap{max-width:900px;width:100%}
 .wrap h1{font-size:20px;margin:0}
-.wrap h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:10px}
-.hbar{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
+.wrap h1 small{color:var(--dim);font-weight:400;font-size:13px;margin-left:var(--s2)}
+.hbar{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 var(--s3)}
 .note{font-size:12px;color:var(--dim)}
-pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;overflow-x:auto;
+pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);overflow-x:auto;
  font:12.5px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap}
-.ok{color:var(--teal)}.warn{color:var(--gold)}.fail{color:var(--red)}.dim{color:var(--dim)}
+.ok{color:var(--ok)}.warn{color:var(--warn)}.fail{color:var(--red)}.dim{color:var(--dim)}