penthera 1.6.0 → 1.7.0

package/src/ui/static/app.css

@@ -1,11 +1,11 @@
 /*
- * penthera ui :: a 1-bit desktop with a terminal inside.
+ * penthera ui :: one view, three columns, a terminal inside.
  *
- * Register: System 7 era Mac (menu bar, pinstriped title bars, dithered
- * desktop, rounded push buttons, alert dialogs), worn the way a calm modern
- * product UI wears it: pinstripes only on real windows and dialogs, hairline
- * group boxes, one stat strip, figure captions that say where a number came
- * from. The CLI's voice and its #0000ed wordmark run through all of it.
+ * Layout: like the Claude Code desktop app. A left sidebar of projects and
+ * runs, one scrolling centre (a project, or a run as a transcript), and a
+ * right panel of stacked cards. Chrome is calm: hairlines, not boxes. The 1-bit
+ * register stays in the details: pattern swatches for severity, shade bars,
+ * the pinstriped approval dialog, the #0000ed wordmark on the empty state.
  * Black, white and patterns do the work; #0000ed is the one accent; green is
  * kept for the cursor, the prompt and "OK".
  *
@@ -79,371 +79,104 @@
   --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --fs: 13px;
   --gap: 16px;
-  --radius-btn: 6px;                      /* the one radius: classic push buttons. Windows stay square */
+  --radius-btn: 6px;                      /* the one radius: push buttons and the prompt bar. Panels stay square */
+  --left-w: 288px;
+  --right-w: 380px;
   --target: 28px;                         /* WCAG 2.5.8 floor is 24; coarse pointers get 44 below */
 }
 
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
+html, body { height: 100%; }
 html { background: var(--ground); }
 body {
   margin: 0;
-  min-height: 100dvh;
   color: var(--text-2);
+  background: var(--ground);
   font: var(--fs) / 1.5 var(--mono);
   font-variant-numeric: tabular-nums lining-nums;
   -webkit-font-smoothing: antialiased;
-  /* The desktop: fine 45-degree lines, the pattern behind every window. */
-  background:
-    repeating-linear-gradient(45deg, var(--dot) 0 1px, transparent 1px 4px),
-    var(--ground);
+  overflow: hidden;
 }
-
 ::selection { background: var(--accent); color: var(--on-accent); }
-a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+a { color: var(--accent-ink); text-underline-offset: 3px; }
 a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
 :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .skip { position: absolute; left: 8px; top: -40px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 4px 8px; }
 .skip:focus { top: 8px; }
+.pad { padding: 16px; }
 
-/* ── Menu bar ──────────────────────────────────────────────────────────── */
-
-.menubar {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  display: flex;
-  align-items: stretch;
-  gap: 4px;
-  min-height: 30px;
-  padding: 0 10px;
-  background: var(--ground);
-  border-bottom: 1px solid var(--frame);
-}
-.mb-mark { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 2px; color: var(--text-1); font-weight: 700; white-space: nowrap; }
-.mb-mark svg { display: block; }
-.mb-mark .px { fill: var(--accent); }
-:root[data-theme="dark"] .mb-mark .px { fill: var(--accent-ink); }
-.menubar nav { display: flex; min-width: 0; }
-.menubar ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
-.menubar nav a {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  min-height: var(--target);
-  padding: 0 10px;
-  color: var(--text-1);
-  text-decoration: none;
-  white-space: nowrap;
-}
-.menubar nav a .key { color: var(--text-3); margin-right: 6px; font-size: 11px; }
-.menubar nav a:hover { background: var(--frame); color: var(--ground); }
-.menubar nav a:hover .key { color: inherit; }
-.menubar nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
-.menubar nav a[aria-current="page"] .key { color: var(--on-accent); }
-.mb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-left: 8px; white-space: nowrap; }
-#mb-chips { display: flex; gap: 6px; }
-@media (max-width: 1320px) { .menubar nav a .key { display: none; } .menubar nav a { padding: 0 8px; } }
-.num .row-btn { text-align: right; }
-.mb-clock { color: var(--text-1); min-width: 5ch; text-align: right; }
-
-/* ── The window ────────────────────────────────────────────────────────── */
+/* ── The three columns ─────────────────────────────────────────────────── */
 
-.desktop { padding: 20px 22px 30px; }
-.window {
-  position: relative;
-  max-width: 1440px;
-  margin: 0 auto;
-  background: var(--ground);
-  border: 1px solid var(--frame);
-  box-shadow: 2px 2px 0 var(--frame);      /* the hard 1-bit drop shadow */
-}
-/* Registration crosshairs at the window's corners. */
-.window::before, .window::after {
-  content: "+";
-  position: absolute;
-  color: var(--text-3);
-  font-size: 13px;
-  line-height: 1;
-  pointer-events: none;
+.app {
+  display: grid;
+  grid-template-columns: var(--left-w) minmax(0, 1fr) var(--right-w);
+  height: 100dvh;
 }
-.window::before { top: -15px; left: -14px; }
-.window::after { bottom: -16px; right: -15px; }
-
-.titlebar {
-  position: relative;
-  display: flex;
+.app.no-left { grid-template-columns: 0 minmax(0, 1fr) var(--right-w); }
+.app.no-right { grid-template-columns: var(--left-w) minmax(0, 1fr) 0; }
+.app.no-left.no-right { grid-template-columns: 0 minmax(0, 1fr) 0; }
+.app.no-left .left, .app.no-right .right { visibility: hidden; }
+.left, .right { min-width: 0; overflow-y: auto; overflow-x: hidden; background: var(--ground); }
+.left { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
+.right { border-left: 1px solid var(--rule); }
+.center { min-width: 0; display: flex; flex-direction: column; outline: none; overflow: hidden; }
+.scrim { display: none; }
+
+/* ── Left sidebar ──────────────────────────────────────────────────────── */
+
+.brand { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; color: var(--text-1); font-weight: 700; }
+.brand svg { display: block; flex: none; }
+.brand .px { fill: var(--accent-ink); }
+.brand .grow { flex: 1; }
+.new-scan { margin: 2px 12px 12px; justify-content: center; }
+.side-label { margin: 14px 14px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); display: flex; justify-content: space-between; }
+.side-list { list-style: none; margin: 0; padding: 0 6px; display: grid; gap: 1px; }
+.item {
+  all: unset;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 2px 10px;
   align-items: center;
-  justify-content: center;
-  height: 22px;
-  margin: 0;
-  padding: 0 8px;
-  border-bottom: 1px solid var(--frame);
-  /* Pinstripes: 1px lines on a 2px rhythm, inset from every edge. */
-  background:
-    repeating-linear-gradient(to bottom, var(--frame) 0 1px, transparent 1px 2px) 4px 4px / calc(100% - 8px) 13px no-repeat,
-    var(--ground);
-}
-.titlebar .box {
-  position: absolute;
-  top: 4px;
-  width: 13px;
-  height: 13px;
-  border: 1px solid var(--frame);
-  background: var(--ground);
-  box-shadow: 0 0 0 2px var(--ground);
-}
-.titlebar .box.close { left: 10px; }
-.titlebar .box.zoom { right: 10px; }
-.titlebar .box.zoom::after { content: ""; position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-right: 1px solid var(--frame); border-bottom: 1px solid var(--frame); }
-.titlebar .title {
-  padding: 0 10px;
-  background: var(--ground);
+  width: 100%;
+  min-height: 40px;
+  padding: 6px 8px;
+  border-left: 2px solid transparent;
+  cursor: pointer;
   color: var(--text-1);
-  font-weight: 700;
-  font-size: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: calc(100% - 64px);
-}
-
-.prompt {
-  padding: 8px 20px;
-  border-bottom: 1px solid var(--hair);
-  color: var(--text-2);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.prompt .user { color: var(--ok); }
-.prompt .path { color: var(--accent-ink); }
-
-.main { padding: 24px 20px 28px; min-width: 0; outline: none; }
-
-.status {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 18px;
-  padding: 6px 20px;
-  border-top: 1px solid var(--frame);
-  color: var(--text-3);
-  font-size: 11px;
-}
-.status kbd { color: var(--text-1); }
-
-.cursor {
-  display: inline-block;
-  width: 1ch;
-  height: 1.15em;
-  vertical-align: text-bottom;
-  background: var(--ok);
-  box-shadow: var(--glow);
-  margin-left: 1px;
-  animation: blink 1s steps(1, end) infinite;
-}
-@keyframes blink { 50% { opacity: 0; } }
-
-/* ── Type ──────────────────────────────────────────────────────────────── */
-
-h1, h2, h3 { color: var(--text-1); font-weight: 700; letter-spacing: 0; }
-h1 { font-size: 17px; margin: 0 0 4px; }
-h2 { font-size: 13px; margin: 0 0 8px; }
-h3 { font-size: 13px; margin: 0 0 6px; }
-.lede { color: var(--text-3); margin: 0 0 22px; max-width: 78ch; }
-.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3); margin: 14px 0 6px; }
-.t1 { color: var(--text-1); }
-.muted, .faint { color: var(--text-3); }
-.ok { color: var(--ok); }
-.bad { color: var(--text-1); font-weight: 700; }
-.warn { color: var(--text-1); }
-.blue { color: var(--accent-ink); }
-.num { text-align: right; font-variant-numeric: tabular-nums; }
-.strong { color: var(--text-1); font-weight: 700; }
-kbd { font: inherit; border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; }
-code { color: var(--text-1); }
-
-/* ── Group boxes ───────────────────────────────────────────────────────── */
-
-.grid { display: grid; gap: 24px var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
-.span-12 { grid-column: span 12; }
-.span-8 { grid-column: span 8; }
-.span-7 { grid-column: span 7; }
-.span-6 { grid-column: span 6; }
-.span-5 { grid-column: span 5; }
-.span-4 { grid-column: span 4; }
-
-/* Every section is a small window: 1px frame, hard shadow, pinstriped bar. */
-.panel {
-  position: relative;
-  min-width: 0;
-  border: 1px solid var(--frame);
-  box-shadow: 2px 2px 0 var(--frame);
-  background: var(--ground);
 }
-.panel-bar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  height: 20px;
+.item:hover { background: var(--wash); }
+.item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.item[aria-current="true"] { background: var(--wash); border-left-color: var(--accent-ink); }
+.item .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item .sub { grid-column: 2 / -1; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.item .count { font-size: 12px; color: var(--text-2); }
+.item .dot { width: 8px; height: 8px; border: 1px solid var(--frame); }
+.item .dot.live { background: var(--ok); border-color: var(--ok); box-shadow: var(--glow); }
+.item .dot.done { background: var(--frame); }
+.group-h { padding: 8px 10px 2px; font-size: 11px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.side-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--text-3); }
+.side-foot .grow { flex: 1; }
+
+/* ── Small controls ────────────────────────────────────────────────────── */
+
+.icon {
+  font: inherit;
+  display: inline-grid;
+  place-items: center;
+  min-width: 28px;
+  min-height: 28px;
   padding: 0 6px;
-  border-bottom: 1px solid var(--frame);
-  background:
-    repeating-linear-gradient(to bottom, var(--frame) 0 1px, transparent 1px 2px) 0 4px / 100% 11px no-repeat,
-    var(--ground);
-}
-.panel-bar .box { width: 11px; height: 11px; flex: none; border: 1px solid var(--frame); background: var(--ground); box-shadow: 0 0 0 2px var(--ground); }
-.panel-h {
-  margin: 0 auto;
-  padding: 0 8px;
-  background: var(--ground);
-  color: var(--text-1);
-  font-size: 12px;
-  font-weight: 700;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.panel-meta { padding: 0 6px; background: var(--ground); color: var(--text-2); font-size: 11px; white-space: nowrap; }
-.panel-bar .grip { width: 9px; height: 11px; flex: none; background: repeating-linear-gradient(to bottom, var(--frame) 0 1px, var(--ground) 1px 3px); box-shadow: 0 0 0 2px var(--ground); }
-.panel-body { padding: 12px 14px 14px; min-width: 0; }
-
-/* Columns of short lists, NOBSUI-style: bold heading, a rule, then rows. */
-.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.cols > div { padding: 10px 14px 12px; min-width: 0; border-left: 1px solid var(--frame); }
-.cols > div:first-child { border-left: 0; }
-.cols h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--frame); font-size: 12px; }
-.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
-.rows li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 8px; align-items: baseline; }
-.rows .code { color: var(--text-3); font-size: 11px; }
-.rows .t { color: var(--text-1); overflow-wrap: anywhere; }
-.rows .t.b { font-weight: 700; }
-.rows .t .where { color: var(--text-3); font-weight: 400; }
-
-/* Gantt: finding lifetimes between scans. */
-.gantt .lane-label { fill: var(--text-1); font: 11px var(--mono); }
-.gantt .lane-label.b { font-weight: 700; }
-.gantt .lane-code { fill: var(--text-3); font: 10px var(--mono); }
-.gantt .bar { fill: var(--ground); stroke: var(--frame); stroke-width: 1; }
-.gantt .bar.open { fill: url(#pt-hatch-ink); }
-.gantt .bar.crit { fill: var(--frame); }
-.gantt .scan-line { stroke: var(--frame); stroke-width: 1; stroke-dasharray: 3 3; }
-.gantt .now-line { stroke: var(--frame); stroke-width: 1.5; }
-.gantt .chip { fill: var(--frame); }
-.gantt .chip-t { fill: var(--ground); font: 700 10px var(--mono); }
-.gantt .axis-t { fill: var(--text-2); font: 10px var(--mono); }
-.hatch-ink { stroke: var(--frame); stroke-width: 1; }
-
-/* Figure caption: where a number came from, set like a drawing's title block. */
-.fig {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 12px 0 0;
-  padding-top: 6px;
-  border-top: 1px dotted var(--rule);
-  font-size: 10.5px;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-3);
-}
-.panel-note { color: var(--text-3); font-size: 11px; margin: 10px 0 0; }
-
-/* A window inside the window: pinstriped title, hard shadow. Dialogs and the terminal only. */
-.subwin { border: 1px solid var(--frame); box-shadow: 2px 2px 0 var(--frame); background: var(--ground); min-width: 0; }
-.subwin > .titlebar { height: 20px; background:
-  repeating-linear-gradient(to bottom, var(--frame) 0 1px, transparent 1px 2px) 4px 4px / calc(100% - 8px) 11px no-repeat, var(--ground); }
-.subwin > .titlebar .box { top: 3px; width: 11px; height: 11px; }
-.subwin-body { padding: 14px; }
-
-/* ── About window: the wordmark (the one bold move) ────────────────────── */
-
-.about { margin-bottom: 28px; }
-.about .subwin-body { display: grid; gap: 4px; padding: 22px 24px 18px; }
-.wordmark {
-  margin: 0 0 8px;
-  font-size: clamp(5px, 1.3vw, 12.5px);
-  line-height: 1.08;
-  white-space: pre;
-  user-select: none;
-  overflow: hidden;
-}
-.wordmark .fill { color: var(--accent); text-shadow: var(--logo-glow); }
-.wordmark .edge { color: var(--accent-ink); }
-:root[data-theme="light"] .wordmark .edge { color: var(--text-1); }
-.about .tagline { color: var(--text-1); }
-.about .facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 10px; color: var(--text-3); font-size: 12px; }
-.about .facts b { color: var(--text-1); font-weight: 700; }
-
-/* ── Stat strip ────────────────────────────────────────────────────────── */
-
-.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--frame); margin-bottom: 28px; }
-.strip .cell { padding: 10px 14px 12px; min-width: 0; border-left: 1px solid var(--rule); }
-.strip .cell:first-child { border-left: 0; }
-.strip .label { margin: 0 0 4px; display: block; }
-.strip .big { font-size: 26px; line-height: 1.15; color: var(--text-1); font-weight: 700; }
-.strip .big .unit { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 2px; }
-.strip .big.ok { color: var(--ok); }
-.strip .sub { color: var(--text-3); font-size: 11px; margin-top: 2px; }
-.big { font-size: 22px; line-height: 1.2; color: var(--text-1); font-weight: 700; }
-
-/* ── Severity: 1-bit. Word first, then a pattern swatch, never colour alone ── */
-
-.sev { white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); }
-.sev::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 1px solid var(--frame); flex: none; }
-.sev-critical::before { background: var(--frame); }
-.sev-high::before { background: repeating-linear-gradient(45deg, var(--frame) 0 1.5px, transparent 1.5px 3px); }
-.sev-medium::before { background: conic-gradient(from 90deg at 1px 1px, transparent 50%, var(--frame) 0 75%, transparent 0) 0 0 / 2px 2px, conic-gradient(var(--frame) 25%, transparent 0) 0 0 / 2px 2px; }
-.sev-low::before { background: conic-gradient(from 90deg at 1px 1px, transparent 75%, var(--frame) 0) 0 0 / 3px 3px; }
-.sev-info::before { background: transparent; }
-.sev-critical { font-weight: 700; }
-.sev-low, .sev-info { color: var(--text-2); }
-
-/* Shade characters for text bars: █ ▓ ▒ ░ read as 1-bit patterns. */
-.shade { color: var(--text-1); }
-.shade.track { color: var(--text-4); }
-.bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 3px 12px; align-items: baseline; }
-.bars .bar { white-space: pre; overflow: hidden; letter-spacing: -0.04em; }
-.stackbar { white-space: pre; overflow: hidden; letter-spacing: -0.04em; color: var(--text-1); line-height: 1.2; margin: 2px 0 10px; }
-td .stackbar { margin: 0; max-width: 14ch; }
-
-/* ── Grade ─────────────────────────────────────────────────────────────── */
-
-.grade { display: inline-grid; place-items: center; min-width: 26px; height: 22px; border: 1px solid var(--frame); color: var(--text-1); font-weight: 700; }
-.grade-F, .grade-D { background: var(--frame); color: var(--ground); }
-.grade-big { margin: 0 16px 0 0; font-size: 22px; line-height: 1; white-space: pre; color: var(--text-1); }
-.grade-big.grade-F, .grade-big.grade-D { background: none; color: var(--text-1); }
-
-/* ── Tables ────────────────────────────────────────────────────────────── */
-
-.table-wrap { overflow-x: auto; }
-table { width: 100%; border-collapse: collapse; }
-th {
-  text-align: left;
-  font-weight: 400;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-3);
-  border-bottom: 1px solid var(--frame);
-  padding: 4px 10px 6px 0;
-  background: var(--ground);
-  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--radius-btn);
+  background: none;
+  color: var(--text-2);
+  cursor: pointer;
 }
-td { padding: 7px 10px 7px 0; border-bottom: 1px dotted var(--rule); vertical-align: top; }
-tr.group td { padding: 4px 8px; background: var(--wash); color: var(--text-1); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--rule); }
-tr.sel td { background: var(--accent); color: var(--on-accent); }
-tr.sel td * { color: var(--on-accent) !important; }
-tr.sel .sev::before { border-color: var(--on-accent); }
-.row-btn { all: unset; cursor: pointer; color: var(--text-1); display: block; min-height: 20px; }
-.row-btn:hover { text-decoration: underline; }
-.row-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
-
-/* ── Push buttons ──────────────────────────────────────────────────────── */
+.icon:hover { background: var(--wash); color: var(--text-1); border-color: var(--rule); }
+.icon[aria-pressed="true"] { color: var(--text-1); border-color: var(--rule); }
 
 .btn {
   font: inherit;
@@ -451,23 +184,23 @@ tr.sel .sev::before { border-color: var(--on-accent); }
   align-items: center;
   gap: 6px;
   min-height: var(--target);
-  padding: 3px 14px;
+  padding: 3px 12px;
   color: var(--text-1);
   background: var(--ground);
-  border: 1px solid var(--frame);
+  border: 1px solid var(--rule);
   border-radius: var(--radius-btn);
   cursor: pointer;
   white-space: nowrap;
   text-decoration: none;
 }
-.btn:hover { background: var(--wash); color: var(--text-1); }
-.btn:active { background: var(--frame); color: var(--ground); }   /* classic press: invert */
-.btn[disabled] { color: var(--text-4); border-color: var(--text-4); cursor: not-allowed; background: var(--ground); }
-/* The default button: blue face, the thick outer ring. */
-.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--frame); margin: 4px; }
+.btn:hover { background: var(--wash); color: var(--text-1); border-color: var(--frame); }
+.btn:active { background: var(--frame); color: var(--ground); }
+.btn[disabled] { color: var(--text-4); border-color: var(--hair); cursor: not-allowed; background: var(--ground); }
+.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
 .btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
 .btn.primary:active { background: var(--frame); color: var(--ground); }
-.btn.primary[disabled] { background: var(--ground); color: var(--text-4); box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--text-4); }
+.btn.primary[disabled] { background: var(--ground); color: var(--text-4); border-color: var(--hair); }
+.btn.small { min-height: 24px; padding: 0 8px; font-size: 12px; }
 .btn .k { opacity: 0.8; font-size: 11px; }
 
 .chip { display: inline-block; border: 1px solid var(--rule); padding: 0 6px; font-size: 11px; color: var(--text-2); white-space: nowrap; }
@@ -475,249 +208,242 @@ tr.sel .sev::before { border-color: var(--on-accent); }
 .chip.inv { background: var(--frame); color: var(--ground); border-color: var(--frame); }
 .chip.blue { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
 
-.toggle { font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; min-height: 24px; padding: 2px 8px; border: 1px solid var(--frame); border-radius: var(--radius-btn); background: var(--ground); color: var(--text-2); cursor: pointer; }
-.toggle[aria-pressed="true"] { background: var(--frame); color: var(--ground); }
-
-.themebtn { font: inherit; font-size: 12px; min-height: 22px; padding: 0 8px; background: var(--ground); color: var(--text-1); border: 1px solid var(--frame); border-radius: var(--radius-btn); cursor: pointer; white-space: nowrap; }
-.themebtn:active { background: var(--frame); color: var(--ground); }
-
-/* ── Fields ────────────────────────────────────────────────────────────── */
-
-.field { display: grid; gap: 4px; min-width: 0; }
-.field > span { font-size: 12px; color: var(--text-1); font-weight: 700; }
-.field .hint { font-size: 11px; color: var(--text-3); font-weight: 400; }
-input[type="text"], input[type="search"], input[type="number"], select {
+input[type="text"], input[type="search"], select {
   font: inherit;
   color: var(--text-1);
   background: var(--ground);
-  border: 1px solid var(--frame);
-  box-shadow: inset 1px 1px 0 var(--rule);
-  padding: 5px 8px;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-btn);
+  padding: 4px 8px;
   min-height: var(--target);
   min-width: 0;
-  width: 100%;
-  border-radius: 0;
 }
 input::placeholder { color: var(--text-3); }
-input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
-input[aria-invalid="true"] { border-width: 2px; }
+input:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
 input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 14px; height: 14px; margin: 0 6px 0 0; vertical-align: -2px; }
-.check { display: inline-flex; align-items: center; cursor: pointer; color: var(--text-1); min-height: 24px; }
-.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
-.filters .filters { margin: 0; }
-.filters .search { flex: 1 1 220px; max-width: 360px; width: auto; }
-.filters select { width: auto; max-width: 280px; }
-
-.form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: end; }
-.c12 { grid-column: span 12; }
-.c6 { grid-column: span 6; }
-.c4 { grid-column: span 4; }
-.c2 { grid-column: span 2; }
-
-/* Radio group as a strip of push buttons. */
-.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--frame); border-radius: var(--radius-btn); overflow: hidden; }
-.seg label { position: relative; cursor: pointer; }
-.seg label + label { border-left: 1px solid var(--frame); }
-.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
-.seg span { display: flex; align-items: center; min-height: var(--target); padding: 0 12px; color: var(--text-1); }
-.seg input:checked + span { background: var(--frame); color: var(--ground); }
-.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -4px; }
-
-.switch { font: inherit; display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); padding: 0 12px; background: var(--ground); color: var(--text-1); border: 1px solid var(--frame); border-radius: var(--radius-btn); cursor: pointer; }
-.switch .state { font-weight: 700; }
-.switch[aria-checked="true"] .state { color: var(--ok); }
-
-.error { color: var(--text-1); margin: 10px 0 0; padding: 6px 10px; border: 2px solid var(--frame); }
-.error::before { content: "[!] "; font-weight: 700; }
-.empty { color: var(--text-3); padding: 6px 0; margin: 0; }
-.notice { border: 1px dashed var(--rule); padding: 12px 14px; color: var(--text-2); }
-
-.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; margin: 0; }
-.kv dt { color: var(--text-3); }
-.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-1); }
-
-.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
-.list li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
-.list li .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.list a { display: inline-block; min-height: 24px; line-height: 24px; }
-.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
-.bullets li::before { content: "▸ "; color: var(--text-3); }
 
-/* "What next?" :: the CLI's numbered choices, as buttons. */
-.next { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); }
-.next ol { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: n; }
-.next li { counter-increment: n; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
-.next li::before { content: counter(n) "."; color: var(--text-3); min-width: 2ch; text-align: right; }
-.next button { all: unset; cursor: pointer; color: var(--text-1); min-height: 22px; padding: 0 2px; }
-.next button:hover { background: var(--frame); color: var(--ground); }
-.next button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-.next .why { color: var(--text-3); }
+/* ── Severity, grade, bars (the 1-bit details) ─────────────────────────── */
 
-/* Start here (first run) */
-.steps { display: grid; gap: 20px; }
-.step h3 { margin: 0 0 4px; }
-.step h3 .n { color: var(--text-3); font-weight: 400; margin-right: 8px; }
-.step p { margin: 0 0 8px; max-width: 72ch; }
+.sev { white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 6px; color: var(--text-1); }
+.sev::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 1px solid var(--frame); flex: none; }
+.sev-critical::before { background: var(--frame); }
+.sev-high::before { background: repeating-linear-gradient(45deg, var(--frame) 0 1.5px, transparent 1.5px 3px); }
+.sev-medium::before { background: conic-gradient(from 90deg at 1px 1px, transparent 50%, var(--frame) 0 75%, transparent 0) 0 0 / 2px 2px, conic-gradient(var(--frame) 25%, transparent 0) 0 0 / 2px 2px; }
+.sev-low::before { background: conic-gradient(from 90deg at 1px 1px, transparent 75%, var(--frame) 0) 0 0 / 3px 3px; }
+.sev-info::before { background: transparent; }
+.sev-critical { font-weight: 700; }
+.sev-low, .sev-info { color: var(--text-2); }
+.sw { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--frame); }
+.sw.sev-critical { background: var(--frame); }
 
-/* ── Charts ────────────────────────────────────────────────────────────── */
+.grade { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 3px; border: 1px solid var(--frame); color: var(--text-1); font-weight: 700; font-size: 12px; }
+.grade-F, .grade-D { background: var(--frame); color: var(--ground); }
+.grade.lg { min-width: 40px; height: 36px; font-size: 20px; }
 
-svg.chart { display: block; width: 100%; height: auto; overflow: visible; }
-svg.spark { display: block; width: 100%; max-width: 140px; height: 24px; }
-.chart .axis { stroke: var(--frame); stroke-width: 1; }
+.shade { color: var(--text-1); }
+.shade.track { color: var(--text-4); }
+.bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 3px 10px; align-items: baseline; }
+.bars .bar { white-space: pre; overflow: hidden; letter-spacing: -0.04em; }
+.stackbar { white-space: pre; overflow: hidden; letter-spacing: -0.04em; color: var(--text-1); line-height: 1.2; }
+svg.spark { display: block; width: 140px; max-width: 100%; height: 26px; }
+.spark .s-line { fill: none; stroke: var(--series); stroke-width: 1.5; }
+.spark .s-dot { fill: var(--series); }
 .chart .grid-line { stroke: var(--hair); stroke-width: 1; }
-.chart .tick { fill: var(--text-3); font: 10px var(--mono); }
-.chart .line-total { fill: none; stroke: var(--series); stroke-width: 2; }
-.chart .area-total { fill: url(#pt-hatch); }
 .hatch-line { stroke: var(--series); stroke-width: 1; opacity: 0.55; }
-.chart .line-severe { fill: none; stroke: var(--text-1); stroke-width: 1.2; stroke-dasharray: 3 3; }
-.chart .dot { fill: var(--ground); stroke: var(--series); stroke-width: 1.5; }
-.chart .col { fill: url(#pt-dither); stroke: var(--frame); stroke-width: 1; }
 .dither-dot { fill: var(--frame); }
-.chart .col-label { fill: var(--text-3); font: 10px var(--mono); }
-.chart .col-value { fill: var(--text-1); font: 11px var(--mono); }
-.spark .s-line { fill: none; stroke: var(--series); stroke-width: 1.5; }
-.spark .s-dot { fill: var(--series); }
-.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-3); margin-top: 8px; }
-.legend .sw { display: inline-block; width: 14px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 2px solid var(--series); }
-.legend .sw-severe { border-top: 2px dashed var(--text-1); }
+.hatch-ink { stroke: var(--frame); stroke-width: 1; }
 
-/* ── Findings split view ───────────────────────────────────────────────── */
+/* ── Centre ────────────────────────────────────────────────────────────── */
 
-.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: var(--gap); align-items: start; }
-.detail { position: sticky; top: 44px; max-height: calc(100dvh - 64px); overflow-y: auto; padding-top: 10px; }
-.detail h2:not(.panel-h) { font-size: 15px; margin: 6px 0 10px; }
-.detail .panel-body > section { margin-top: 16px; }
-.plain { border: 1px solid var(--frame); padding: 10px 12px; margin-top: 12px; display: grid; gap: 6px; }
-.plain p { margin: 0; }
-pre.block {
-  margin: 6px 0 0;
-  padding: 10px 12px;
-  border: 1px solid var(--rule);
-  background: var(--wash);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--rule);
+}
+.toolbar .title { color: var(--text-1); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.toolbar .grow { flex: 1; }
+.toolbar input[type="search"] { width: 220px; }
+.stream { flex: 1; overflow-y: auto; }
+.col { max-width: 920px; margin: 0 auto; padding: 22px 24px 40px; }
+
+.head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; margin-bottom: 18px; }
+.head h1 { margin: 0; font-size: 16px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.head .meta { grid-column: 2; color: var(--text-3); font-size: 12px; }
+.head .right-bits { grid-row: 1 / span 2; grid-column: 3; display: grid; justify-items: end; gap: 4px; }
+.head .counts { color: var(--text-2); font-size: 12px; }
+.head .counts b { color: var(--text-1); }
+
+.section { margin-top: 22px; }
+.section > h2 { margin: 0 0 8px; font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); display: flex; justify-content: space-between; gap: 12px; }
+.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
+.rows > li { border-bottom: 1px solid var(--hair); }
+.row {
+  all: unset;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 9.5em minmax(0, 1fr) auto;
+  gap: 2px 12px;
+  align-items: baseline;
+  width: 100%;
+  padding: 8px 8px;
+  cursor: pointer;
   color: var(--text-1);
-  max-height: 340px;
-  overflow: auto;
 }
+.row:hover { background: var(--wash); }
+.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.row[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
+.row[aria-current="true"] * { color: var(--on-accent) !important; }
+.row[aria-current="true"] .sev::before { border-color: var(--on-accent); }
+.row .where { grid-column: 2 / -1; color: var(--text-3); font-size: 12px; overflow-wrap: anywhere; }
+.row .tag { color: var(--text-3); font-size: 11px; }
+.row.b .t { font-weight: 700; }
+.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
+.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
+.mini li { display: flex; gap: 8px; align-items: baseline; min-width: 0; color: var(--text-1); }
+.mini li .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.muted { color: var(--text-3); }
+.t1 { color: var(--text-1); }
+.ok { color: var(--ok); }
+.bad { color: var(--text-1); font-weight: 700; }
+.blue { color: var(--accent-ink); }
+.empty { color: var(--text-3); margin: 6px 0; }
+
+/* The bold move: the CLI's blue wordmark, on the empty state only. */
+.wordmark { margin: 0 0 12px; font-size: clamp(5px, 1.1vw, 11px); line-height: 1.08; white-space: pre; user-select: none; overflow: hidden; }
+.wordmark .fill { color: var(--accent); text-shadow: var(--logo-glow); }
+.wordmark .edge { color: var(--accent-ink); }
+:root[data-theme="light"] .wordmark .edge { color: var(--text-1); }
+.start h1 { margin: 0 0 6px; font-size: 16px; color: var(--text-1); }
+.start .steps { display: grid; gap: 14px; margin-top: 18px; }
+.start .step { display: grid; grid-template-columns: 3ch minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); }
+.start .step .n { color: var(--text-3); }
+.start .step h3 { margin: 0; font-size: 13px; color: var(--text-1); }
+.start .step p { grid-column: 2; margin: 0; color: var(--text-3); }
+
+/* Transcript: a run as a stream of tool output. */
+.transcript { font-size: 12.5px; line-height: 1.55; }
+.transcript .ln { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.55em; color: var(--text-2); }
+.transcript .ln.cmd { color: var(--text-1); font-weight: 700; margin-top: 4px; }
+.transcript .ln.cmd::before { content: "$ "; color: var(--ok); }
+.transcript .ln.dim::before { content: "▸ "; color: var(--text-3); }
+.transcript .ln.ok { color: var(--ok); }
+.transcript .ln.bad { color: var(--text-1); font-weight: 700; }
+.transcript .ln.bad::before { content: "[!] "; }
+.transcript .ln.hl { color: var(--text-1); font-weight: 700; margin-top: 10px; }
+.cursor { display: inline-block; width: 1ch; height: 1.15em; vertical-align: text-bottom; background: var(--ok); box-shadow: var(--glow); margin-left: 1px; animation: blink 1s steps(1, end) infinite; }
+@keyframes blink { 50% { opacity: 0; } }
+.run-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
+.run-head h1 { margin: 0; font-size: 15px; color: var(--text-1); }
+
+/* The approval: the one pinstriped window left, inline in the transcript. */
+.dialog { margin: 14px 0; border: 1px solid var(--frame); box-shadow: 2px 2px 0 var(--frame); background: var(--ground); }
+.dialog-bar { height: 18px; border-bottom: 1px solid var(--frame); display: flex; justify-content: center; align-items: center;
+  background: repeating-linear-gradient(to bottom, var(--frame) 0 1px, transparent 1px 2px) 0 3px / 100% 11px no-repeat, var(--ground); }
+.dialog-bar span { padding: 0 8px; background: var(--ground); color: var(--text-1); font-size: 11px; font-weight: 700; }
+.dialog-body { padding: 12px 14px; display: grid; gap: 8px; }
+.dialog-body h3 { margin: 0; font-size: 13px; color: var(--text-1); }
+.dialog-body p { margin: 0; }
+.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; }
+.kv dt { color: var(--text-3); }
+.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-1); }
+pre.block { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--hair); background: var(--wash); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-1); max-height: 320px; overflow: auto; font: inherit; font-size: 12px; }
 pre.diff { white-space: pre; overflow-x: auto; }
 .diff .add { color: var(--text-1); font-weight: 700; }
 .diff .del { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-4); }
 .diff .hunk { color: var(--accent-ink); }
 .diff .meta { color: var(--text-3); }
 
-/* ── Terminal (Run) ────────────────────────────────────────────────────── */
-
-.term {
-  min-height: 340px;
-  max-height: 60dvh;
-  overflow-y: auto;
-  padding: 12px 14px;
-  font-size: 12.5px;
-  line-height: 1.55;
-  color: var(--text-2);
-  background:
-    repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px),
-    var(--ground);
-}
-.term .ln { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.55em; }
-.term .ln.cmd { color: var(--text-1); font-weight: 700; }
-.term .ln.cmd::before { content: "$ "; color: var(--ok); }
-.term .ln.dim::before { content: "▸ "; color: var(--text-3); }
-.term .ln.ok { color: var(--ok); }
-.term .ln.bad { color: var(--text-1); font-weight: 700; }
-.term .ln.bad::before { content: "[!] "; }
-.term .ln.hl { color: var(--text-1); font-weight: 700; margin-top: 6px; }
-.term-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--hair); flex-wrap: wrap; }
-
-/* The approval: a classic alert dialog. Double frame, icon, default button right. */
-.alert {
-  margin: 14px;
-  padding: 16px 18px;
-  border: 1px solid var(--frame);
-  box-shadow: inset 0 0 0 3px var(--ground), inset 0 0 0 4px var(--frame), 2px 2px 0 var(--frame);
-  background: var(--ground);
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 4px 14px;
-}
-.alert .icon { grid-row: span 3; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--frame); font-weight: 700; color: var(--text-1); }
-.alert h3 { margin: 2px 0 2px; }
-.alert p { margin: 0; }
-.alert .body { grid-column: 1 / -1; min-width: 0; }
-.alert .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 10px; }
-
-.timeline { list-style: none; margin: 0; padding: 0; }
-.timeline > li { padding-left: 18px; position: relative; padding-bottom: 12px; }
-.timeline > li::before { content: ""; position: absolute; left: 0; top: 5px; width: 8px; height: 8px; background: var(--frame); }
-.timeline > li::after { content: ""; position: absolute; left: 4px; top: 16px; bottom: 0; border-left: 1px dotted var(--rule); }
-.timeline > li:last-child::after { display: none; }
-.timeline .fixes { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
-.timeline .fixes li { display: flex; gap: 8px; min-width: 0; }
-.timeline .fixes .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-
-/* History: three columns, new / fixed / still open. */
-.cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--gap); }
+/* The prompt bar: one primary action. */
+.bar { border-top: 1px solid var(--rule); padding: 10px 14px 12px; background: var(--ground); }
+.bar-inner { max-width: 920px; margin: 0 auto; }
+.bar form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--frame); border-radius: var(--radius-btn); padding: 6px 6px 6px 10px; }
+.bar form:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
+.bar input[type="text"] { border: 0; padding: 4px 0; min-height: 28px; width: 100%; background: transparent; }
+.bar input[type="text"]:focus-visible { outline: none; }
+.bar .modes { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
+.mode { font: inherit; font-size: 12px; min-height: 26px; padding: 0 10px; border: 1px solid var(--rule); border-radius: var(--radius-btn); background: var(--ground); color: var(--text-2); cursor: pointer; }
+.mode:hover { color: var(--text-1); border-color: var(--frame); }
+.mode[aria-pressed="true"] { background: var(--frame); color: var(--ground); border-color: var(--frame); }
+.bar .note { font-size: 11px; color: var(--text-3); margin-left: auto; }
+.bar .confirm { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--text-1); flex-wrap: wrap; }
+.bar .confirm input { flex: 1; min-width: 160px; }
+.bar .err { margin: 8px 0 0; color: var(--text-1); font-size: 12px; }
+.bar .err::before { content: "[!] "; font-weight: 700; }
+
+/* ── Right panel: stacked cards ────────────────────────────────────────── */
+
+.cards { display: grid; }
+.card { border-bottom: 1px solid var(--rule); }
+.card > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; color: var(--text-1); font-weight: 700; font-size: 12px; }
+.card > summary::-webkit-details-marker { display: none; }
+.card > summary::before { content: "▸"; color: var(--text-3); font-weight: 400; }
+.card[open] > summary::before { content: "▾"; }
+.card > summary .aside { margin-left: auto; font-weight: 400; color: var(--text-3); font-size: 11px; }
+.card > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
+.card-body { padding: 0 14px 14px; display: grid; gap: 8px; min-width: 0; }
+.card-body .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 6px 0 0; }
+.detail-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
+.detail-head .grow { flex: 1; }
+.detail { padding: 14px; display: grid; gap: 12px; }
+.detail h2 { margin: 0; font-size: 14px; color: var(--text-1); }
+.detail section > .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); margin: 0 0 4px; }
+.plain { border: 1px solid var(--frame); padding: 10px 12px; display: grid; gap: 6px; }
+.plain p { margin: 0; }
+.plain b { color: var(--text-1); }
+.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-btn); overflow: hidden; }
+.seg label { position: relative; cursor: pointer; }
+.seg label + label { border-left: 1px solid var(--rule); }
+.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
+.seg span { display: flex; align-items: center; min-height: 28px; padding: 0 12px; color: var(--text-1); }
+.seg input:checked + span { background: var(--frame); color: var(--ground); }
+.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -4px; }
+.switch { font: inherit; display: inline-flex; gap: 10px; align-items: center; min-height: 28px; padding: 0 12px; background: var(--ground); color: var(--text-1); border: 1px solid var(--rule); border-radius: var(--radius-btn); cursor: pointer; }
+.switch[aria-checked="true"] .state { color: var(--ok); font-weight: 700; }
+kbd { font: inherit; font-size: 11px; border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; color: var(--text-1); }
 
-/* Scrollbars, 1-bit. */
-* { scrollbar-color: var(--frame) var(--ground); scrollbar-width: thin; }
+* { scrollbar-color: var(--rule) var(--ground); scrollbar-width: thin; }
 
-/* ── Responsive ────────────────────────────────────────────────────────── */
+/* ── Narrow: side panels become drawers ────────────────────────────────── */
 
 @media (max-width: 1180px) {
-  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
-  .split { grid-template-columns: minmax(0, 1fr); }
-  .detail { position: static; max-height: none; }
-  .cmp { grid-template-columns: minmax(0, 1fr); }
-  .cols { grid-template-columns: minmax(0, 1fr); }
-  .cols > div { border-left: 0; border-top: 1px solid var(--frame); }
-  .cols > div:first-child { border-top: 0; }
+  .app, .app.no-right { grid-template-columns: var(--left-w) minmax(0, 1fr); }
+  .app.no-left, .app.no-left.no-right { grid-template-columns: 0 minmax(0, 1fr); }
+  .right { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 30; box-shadow: -2px 0 0 var(--frame); }
+  .app.no-right .right { display: none; }
+  .app:not(.no-right) .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.45); }
 }
-
-@media (max-width: 820px) {
-  .menubar { flex-wrap: wrap; padding: 0 6px; position: static; }
-  .menubar nav { order: 3; width: 100%; border-top: 1px solid var(--hair); }
-  .menubar nav a { padding: 0 8px; }
-  .menubar nav a .key { display: none; }
-  #mb-chips { display: flex; gap: 6px; }
-@media (max-width: 1320px) { .menubar nav a .key { display: none; } .menubar nav a { padding: 0 8px; } }
-.num .row-btn { text-align: right; }
-.mb-clock { display: none; }
-  .desktop { padding: 12px 8px 20px; }
-  .window::before, .window::after { display: none; }
-  .main { padding: 18px 12px 20px; }
-  .prompt { padding: 8px 12px; }
-  .status { display: none; }
-  .c6, .c4, .c2 { grid-column: span 12; }
-  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .strip .cell:nth-child(3) { border-left: 0; }
-  .strip .cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
-  .strip .big { font-size: 20px; }
-  .cols { grid-template-columns: minmax(0, 1fr); }
-  .cols > div { border-left: 0; border-top: 1px solid var(--frame); }
-  .cols > div:first-child { border-top: 0; }
-  .hide-narrow { display: none; }
-  .trunc { max-width: 22ch; }
-  td svg.spark { min-width: 64px; }
+@media (max-width: 760px) {
+  .app, .app.no-left, .app.no-right, .app.no-left.no-right { grid-template-columns: minmax(0, 1fr); }
+  .left { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); z-index: 30; box-shadow: 2px 0 0 var(--frame); }
+  .app.no-left .left { display: none; }
+  .app:not(.no-left) .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, 0.45); }
+  .col { padding: 16px 14px 28px; }
+  .toolbar { padding: 8px 10px; }
+  .toolbar input[type="search"] { width: 120px; }
+  .row { grid-template-columns: minmax(0, 1fr) auto; }
+  .row .sev { grid-column: 1 / -1; }
+  .row .where { grid-column: 1 / -1; }
+  .cols2 { grid-template-columns: minmax(0, 1fr); }
+  .head { grid-template-columns: auto minmax(0, 1fr); }
+  .head .right-bits { grid-row: auto; grid-column: 1 / -1; justify-items: start; }
+  .bar .note { display: none; }
 }
-
 @media (pointer: coarse) {
   :root { --target: 44px; }
-  .menubar nav a { min-height: 44px; }
-  .row-btn, .next button { min-height: 32px; }
+  .item, .row { min-height: 44px; }
 }
-
-/* ── Reduced motion: no typing, no blink. Content is never hidden. ──────── */
-
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
   .cursor { opacity: 1; }
 }
-.week { margin-bottom: 26px; }
-.week .panel-body { padding: 0; }
-.cols .row-btn { display: inline; min-height: 0; }
-.panel-body > .cols { margin: -12px -14px -14px; }
-.stack { margin-top: 24px; }
-.week .panel-body > .cols { margin: 0; }
-svg.chart.gantt { min-width: 760px; }
-@media (max-width: 520px) { .panel-meta { display: none; } }
+.run-head .grow, .actions .grow { flex: 1; }
+.card-body .head { margin: 0; grid-template-columns: auto minmax(0, 1fr); }
+.card-body, .detail, .dialog-body { grid-template-columns: minmax(0, 1fr); }
+.card-body > *, .detail > *, .dialog-body > * { min-width: 0; }
+.mini li.stacked { display: grid; gap: 3px; }
+.chips { display: flex; flex-wrap: wrap; gap: 3px; }
+.bars .bar { line-height: 1.3; max-height: 1.3em; }