segreant 0.1.0 → 0.2.0

package/dist/dashboard/web/styles/app.css

@@ -2,7 +2,7 @@
    Segreant web GUI — the Night Vault system.
 
    Inherited from the incumbent dashboard rather than replaced: dark ledger
-   ground, gold as the single accent, serif display, mono for anything that is a
+   ground, gold for the mark, money and caution, ember for what you act on, serif display, mono for anything that is a
    quantity or an identifier. What changes here is scope — this is a console for
    operating the product, not a page for reading five cards.
 
@@ -38,8 +38,26 @@
      the light theme has to be much darker to stay legible on paper. */
   --gold-text: #e8b33c;
   --gold-soft: rgba(232, 179, 60, 0.14);
+  /* The griffin's own gold, apart from the caution gold above. Beside the ember
+     accent a bright yellow read as a second, competing highlight; this antique
+     gold shares ember's warmth and still reads as gold (7.3:1 on the page).
+     Chosen from six candidates rendered in the live header (2026-10-16). */
+  --brand: #c9963a;
+  /* Text on a gold fill. Dark in both themes: the light theme's gold is a
+     mid-tone, and its paper-coloured --ink on it fell to about 3:1. */
+  --on-gold: #14161d;
+  /* Ember is what you act on: buttons, the current job, selection, focus and
+     links. Gold keeps three jobs: the griffin, money, and "look at this".
+     Orange (hue 25) sits beside the griffin's gold (hue 42) as one warm family
+     against the cool ink, without ever repainting the mark. */
+  --accent: #f0883e;
+  --accent-text: #f39a57;
+  --accent-soft: rgba(240, 136, 62, 0.14);
+  --on-accent: #14161d;
   --mint: #63c593;
-  --coral: #e25d4a;
+  /* Waste red moved off orange's hue (8 -> 352) so "not kept" never reads
+     as "press here". */
+  --coral: #f0566a;
   --sky: #7ea6e0;
   --violet: #9ba4d6;
 
@@ -60,6 +78,16 @@
      single place to turn it off. */
   --t: 160ms;
   --ease: cubic-bezier(0.2, 0, 0, 1);
+  /* Scrollbars are part of the page, not the operating system's chrome: a
+     default grey bar inside a gold-on-ink table read as unfinished. */
+  --scroll-thumb: #2b3142;
+  --scroll-thumb-hover: #3b4357;
+  /* Chart series, in fixed order: the five costliest models, then the rest.
+     Checked for colour-blind separation against each theme's panel; identity
+     never rests on the hue alone (a legend and a readout name every one). */
+  --series-1: #3987e5; --series-2: #199e70; --series-3: #9085e9; --series-4: #d55181; --series-5: #008300;
+  --series-other: #5b6275;
+  color-scheme: dark;
 }
 
 :root[data-theme='light'] {
@@ -75,13 +103,29 @@
   --gold: #b8842a;
   --gold-text: #846013;
   --gold-soft: rgba(184, 132, 42, 0.12);
+  --brand: #b8842a;
+  --accent: #b04a14;
+  --accent-text: #a8440f;
+  --accent-soft: rgba(176, 74, 20, 0.10);
+  --on-accent: #ffffff;
   --mint: #206d4c;
-  --coral: #a83625;
+  --coral: #b3243f;
   --sky: #3f68b0;
   --violet: #5c62a8;
   --shadow: 0 18px 48px rgba(60, 50, 30, 0.14);
+  --scroll-thumb: #cfc8b6;
+  --scroll-thumb-hover: #b9b19c;
+  --series-1: #2a78d6; --series-2: #1baf7a; --series-3: #6250d6; --series-4: #e87ba4; --series-5: #008300;
+  --series-other: #aaa595;
+  color-scheme: light;
 }
 
+/* Compact: the same page with tighter spacing, for readers who live in it. */
+:root[data-density='compact'] {
+  --s3: 9px; --s4: 12px; --s5: 15px; --s6: 18px; --s8: 24px; --s10: 28px; --s12: 34px;
+}
+:root[data-intros='off'] .view-head .view-plain { display: none; }
+
 @media (prefers-reduced-motion: reduce) {
   :root { --t: 0ms; }
   *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
@@ -91,6 +135,16 @@
 
 html { overflow-x: clip; }
 
+/* Every scrolling area (page, tables, drawers, code) inherits these. The
+   standard properties cover Chromium 121+ and Firefox; the -webkit- rules
+   cover older Chromium and Safari. */
+html { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
+::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
+::-webkit-scrollbar-corner { background: transparent; }
+
 body {
   background: var(--ink);
   color: var(--text);
@@ -106,8 +160,11 @@ body {
 
 [hidden] { display: none !important; }
 
+/* A heading focused for screen readers after a page change is not a control. */
+h1[tabindex='-1']:focus { outline: none; }
+
 :focus-visible {
-  outline: 2px solid var(--gold);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -132,10 +189,25 @@ body {
 }
 
 .brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: inherit; }
-.brand-mark { width: 26px; height: 30px; flex: none; filter: drop-shadow(0 2px 10px rgba(232, 179, 60, 0.3)); }
+.brand-mark { width: 34px; height: 34px; flex: none; }
+.firstrun-mark .brand-mark { width: 56px; height: 56px; }
 .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
 .brand-name { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
-.brand-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
+.brand-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
+.brand, .register-switch, .topbar-demo { flex: none; }
+
+/* Laptop widths: one row cannot hold the brand, eight jobs and the register
+   switch, so at 980 px the tag broke into three lines and the switch was cut
+   off. The jobs move to a second row instead; below 821 px the phone grid
+   further down takes over. */
+@media (min-width: 821px) and (max-width: 1240px) {
+  .topbar { flex-wrap: wrap; row-gap: var(--s2); column-gap: var(--s4); padding: var(--s3) var(--s6); }
+  .register-switch { order: 1; margin-left: auto; }
+  /* A zero-height, full-width item: everything ordered after it starts row two. */
+  .topbar::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
+  .ops { order: 3; margin-left: auto; }
+  .ops-util { order: 4; margin-left: 0; }
+}
 
 .ops { display: flex; gap: var(--s1); margin-left: auto; }
 .op {
@@ -144,7 +216,12 @@ body {
   transition: color var(--t) var(--ease), background var(--t) var(--ease);
 }
 .op:hover { color: var(--text); background: var(--panel); }
-.op[aria-current='page'] { color: var(--text); background: var(--panel-2); }
+.op[aria-current='page'] { color: var(--text); background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--accent); }
+/* Setup sits apart from the jobs: quieter, and after a hairline. */
+.card-action { margin-left: auto; margin-right: var(--s3); padding: var(--s1) var(--s3); border-radius: var(--r-sm); font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
+.card-action:hover { border-color: var(--accent); }
+.ops-util { margin-left: 0; padding-left: var(--s3); border-left: 1px solid var(--line-soft); }
+.op-util { color: var(--faint); font-size: 13.5px; }
 
 .register-switch { display: flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
 .register-switch button {
@@ -152,7 +229,7 @@ body {
   font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
   padding: 5px 10px; border-radius: 6px; transition: all var(--t) var(--ease);
 }
-.register-switch button[aria-pressed='true'] { background: var(--panel-2); color: var(--gold-text); }
+.register-switch button[aria-pressed='true'] { background: var(--panel-2); color: var(--accent-text); }
 
 .sheet { max-width: 1180px; margin: 0 auto; padding: 0 var(--s8); width: 100%; }
 
@@ -163,6 +240,19 @@ body {
   font-size: 12.5px; color: var(--faint);
 }
 .shellfoot a { color: var(--muted); }
+.shellfoot-links { display: flex; gap: var(--s5); }
+
+/* The privacy statement: prose, so it reads at a book's line length rather
+   than the dashboard's full width. */
+.privacy { max-width: 68ch; }
+/* The promise itself: full text colour, and not a page explanation, so hiding
+   explanations in "What you see" never hides it. */
+.privacy-lead { color: var(--text); font-size: 15px; line-height: 1.6; margin-top: var(--s2); }
+.privacy-section p, .privacy-section li { line-height: 1.6; color: var(--text); }
+.privacy-section p + p { margin-top: var(--s3); }
+.privacy-section ul { margin: var(--s3) 0 0; padding-left: var(--s5); display: grid; gap: var(--s2); }
+/* A command inside running prose: marked, not boxed, so lines keep their spacing. */
+.inline-code { font-family: var(--mono); font-size: 0.88em; color: var(--text); background: var(--line-soft); border-radius: 4px; padding: 0.08em 0.36em; white-space: nowrap; }
 
 /* ---------- The ledger spine: the thesis, as the layout ------------------ */
 
@@ -205,13 +295,13 @@ body {
   color: var(--faint); cursor: pointer;
   transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
 }
-.band-inspect:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }
-.band-active { border-top-color: var(--gold); background: var(--panel); }
+.band-inspect:hover { color: var(--accent-text); border-bottom-color: var(--accent-text); }
+.band-active { border-top-color: var(--accent); background: var(--panel); }
 
 /* An unestablished layer is drawn as an open socket, not a filled card. The
    dashed top edge is the visual half of the same statement its words make. */
 .band-open { border-top-style: dashed; border-top-color: var(--line); }
-.band-open.band-active { border-top-color: var(--gold-text); }
+.band-open.band-active { border-top-color: var(--accent-text); }
 
 .band-label {
   font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
@@ -225,8 +315,16 @@ body {
   font-family: var(--sans); font-size: 15px; letter-spacing: 0;
   color: var(--faint); font-style: italic;
 }
+.band-period { letter-spacing: 0.06em; text-transform: none; }
+.band-pending .band-value { opacity: 0.7; }
 .band-basis { font-size: 12.5px; color: var(--muted); max-width: 34ch; }
-.band-next { font-size: 12px; color: var(--gold-text); max-width: 34ch; }
+.band-next { font-size: 12px; color: var(--accent-text); max-width: 34ch; }
+/* An estimate: present, but never at a measured figure's size or brightness. */
+.band-estimate { display: flex; flex-direction: column; gap: 4px; font-size: clamp(16px, 1.45vw, 20px); color: var(--muted); }
+.band-chip {
+  align-self: flex-start; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.01em;
+  color: var(--sky); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px;
+}
 
 /* The separator IS the thesis: metered != billed != allocated != realized.
    Four claims, four evidence standards, never interchangeable. */
@@ -274,7 +372,7 @@ body {
   cursor: pointer; transition: all var(--t) var(--ease);
 }
 .chip:hover { color: var(--text); border-color: var(--line); }
-.chip[aria-pressed='true'] { color: var(--ink); background: var(--gold); border-color: var(--gold); }
+.chip[aria-pressed='true'] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
 
 .grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
 .grid-2 { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@@ -313,8 +411,12 @@ body {
   padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor;
 }
 .pill-demo { color: var(--violet); }
+.topbar-demo { flex-shrink: 0; }
 .pill-estimate { color: var(--sky); }
 .pill-unverified { color: var(--gold-text); }
+/* Nothing to show yet is a state, not a warning: neutral and dashed, so the
+   caution gold stays rare enough to mean "look at this". */
+.pill-empty { color: var(--muted); border-style: dashed; }
 .pill-ok { color: var(--mint); }
 .pill-warn { color: var(--coral); }
 
@@ -329,7 +431,14 @@ th {
 }
 td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
 tr:last-child td { border-bottom: 0; }
+/* Phone tables: 12px a side on every cell cost a four-column table its last
+   column at 375px (Saved splits measured 353px in a 343px wrapper). */
+@media (max-width: 480px) { th, td { padding-left: var(--s2); padding-right: var(--s2); } }
 .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+/* A name the user chose (project, model, cost centre) may be one unbroken
+   token. Without a break point it sets the column's minimum width and pushes
+   the amount beside it off a phone screen, so names break anywhere. */
+.name-cell { overflow-wrap: anywhere; min-width: 7rem; }
 
 /* ---------- Actions ----------------------------------------------------- */
 
@@ -407,6 +516,8 @@ tr:last-child td { border-bottom: 0; }
 
 .drawer-h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s3); display: block; }
 .drawer-summary { margin-bottom: var(--s3); }
+/* A preview being recomputed for edited fields: still readable, visibly not current. */
+.drawer-preview.is-refreshing > :not(h3) { opacity: 0.5; transition: opacity 120ms; }
 .drawer-muted { color: var(--faint); }
 .drawer-error { color: var(--coral); }
 .drawer-done { color: var(--mint); }
@@ -429,7 +540,7 @@ tr:last-child td { border-bottom: 0; }
   border: 1px solid var(--line-soft); background: none; color: var(--muted);
   padding: 0 var(--s3); border-radius: var(--r-sm); cursor: pointer; transition: all var(--t) var(--ease);
 }
-.cmd-copy:hover { color: var(--gold-text); border-color: var(--gold); }
+.cmd-copy:hover { color: var(--accent-text); border-color: var(--accent); }
 
 .drawer-input {
   width: 100%; font-family: var(--mono); font-size: 13px;
@@ -437,8 +548,13 @@ tr:last-child td { border-bottom: 0; }
   border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s2) var(--s3);
 }
 
+.pricing-model { padding-block: var(--s3); border-bottom: 1px solid var(--line-soft); }
+.pricing-model .drawer-h3 { overflow-wrap: anywhere; }
+
 .drawer-foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: var(--s3); }
 .drawer-actions { display: flex; gap: var(--s2); justify-content: flex-end; }
+/* Why Apply is unavailable: read before the buttons, at body size, not as fine print. */
+.drawer-blocked { font-size: 13px; color: var(--muted); text-align: right; text-wrap: pretty; }
 
 .btn-ghost, .btn-commit {
   font: inherit; font-size: 13px; padding: var(--s2) var(--s5);
@@ -447,11 +563,11 @@ tr:last-child td { border-bottom: 0; }
 .btn-ghost { background: none; border: 1px solid var(--line); color: var(--muted); }
 .btn-ghost:hover { color: var(--text); border-color: var(--muted); }
 
-.btn-commit { border: 1px solid var(--gold); background: var(--gold); color: #14161d; font-weight: 500; }
+.btn-commit { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 500; }
 .btn-commit:hover:not(:disabled) { filter: brightness(1.08); }
 .btn-commit:disabled { opacity: 0.4; cursor: not-allowed; }
 .btn-commit.tone-danger { background: var(--coral); border-color: var(--coral); color: #fff; }
-.btn-commit.tone-warn { background: var(--gold); border-color: var(--gold); }
+.btn-commit.tone-warn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
 
 body.drawer-open { overflow: hidden; }
 body.claim-open { overflow: hidden; }
@@ -539,7 +655,7 @@ body.claim-open { overflow: hidden; }
 .claim-missing { border-left-color: var(--coral); }
 .claim-missing ul { color: var(--text); }
 .claim-complete { font-size: 13px; color: var(--mint); }
-.claim-next { font-size: 13px; color: var(--gold-text); }
+.claim-next { font-size: 13px; color: var(--accent-text); }
 
 @media (max-width: 900px) {
   .claim-panel { width: 100%; padding: var(--s5); }
@@ -560,7 +676,7 @@ body.claim-open { overflow: hidden; }
   border: 1px solid var(--line); background: var(--panel); color: var(--text);
   font: inherit; cursor: pointer; transition: all var(--t) var(--ease);
 }
-.choice:hover { border-color: var(--gold); }
+.choice:hover { border-color: var(--accent); }
 .choice strong { display: block; font-size: 15px; margin-bottom: var(--s2); }
 .choice span { color: var(--muted); font-size: 13px; }
 .firstrun .fine { color: var(--faint); font-size: 13px; margin-top: var(--s6); max-width: 58ch; }
@@ -578,6 +694,12 @@ body.claim-open { overflow: hidden; }
   padding: var(--s3) var(--s4); margin-bottom: var(--s5); background: var(--panel-2);
 }
 .banner-demo { border-color: var(--violet); }
+.banner-stale { border-color: var(--coral); align-items: center; justify-content: space-between; }
+.banner.banner-stale strong { color: var(--coral); }
+.banner-retry { flex: none; padding: var(--s2) var(--s4); border-radius: var(--r-sm); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
+.banner-retry:hover { border-color: var(--muted); }
+/* Figures read before the server stopped: still legible, visibly not current. */
+.sheet.is-stale { opacity: 0.55; filter: saturate(0.35); transition: opacity var(--t) var(--ease); }
 .banner p { font-size: 13px; color: var(--muted); max-width: 70ch; }
 .banner strong { color: var(--text); }
 
@@ -601,7 +723,7 @@ body.claim-open { overflow: hidden; }
   transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
 }
 .axis:hover { color: var(--text); }
-.axis[aria-pressed='true'] { color: var(--text); border-bottom-color: var(--gold); }
+.axis[aria-pressed='true'] { color: var(--text); border-bottom-color: var(--accent); }
 .axisbar-note { font-size: 12.5px; color: var(--faint); margin-left: auto; }
 
 /* ---------- Ledger -------------------------------------------------------- */
@@ -628,6 +750,19 @@ body.claim-open { overflow: hidden; }
   border-bottom: 1px solid var(--line-soft);
 }
 
+.ledger-gates .ledger-head, .ledger-gates .ledger-row { grid-template-columns: minmax(0, 1fr) 6rem 6rem 7rem; }
+.ledger-gates .ledger-key { font-family: var(--sans); font-size: 14px; }
+.ledger-gates .ledger-bar { background: var(--mint); }
+.gate-pass { color: var(--mint); }
+.gate-fail { color: var(--coral); }
+.gate-unchecked { color: var(--faint); }
+@media (max-width: 820px) {
+  /* Three bare numbers mean nothing without their headers, so this table
+     keeps its header row where the other ledgers fold it away. */
+  .ledger-gates .ledger-head { position: static; width: auto; height: auto; margin: 0; padding: var(--s3) 0; overflow: visible; clip: auto; white-space: normal; border-bottom: 1px solid var(--line-soft); }
+  .ledger-gates .ledger-head, .ledger-gates .ledger-row { grid-template-columns: minmax(0, 1fr) 3.5rem 3.5rem 4.5rem; grid-template-areas: none; gap: var(--s2); }
+}
+
 .ledger-key {
   font-family: var(--mono); font-size: 13px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
@@ -665,6 +800,9 @@ body.claim-open { overflow: hidden; }
 /* Governance alerts. Severity is carried by a word and a rule, never by colour
    alone -- the same standard the pills follow. */
 .alerts { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
+/* Sits above the alert list and the cap card in a plain block; without its own
+   margin its border touched the cap card's. */
+.alert-coverage { margin-bottom: var(--s5); }
 .alert {
   border: 1px solid var(--line); border-left: 2px solid var(--line);
   border-radius: var(--r); padding: var(--s3) var(--s4); background: var(--panel);
@@ -713,6 +851,9 @@ body.claim-open { overflow: hidden; }
 .fact-key {
   display: flex; align-items: center; gap: var(--s2);
   font-size: 13px; color: var(--text); min-width: 0;
+  /* Keys quote names the user chose ("Spend where project <name>"); one
+     unbroken name otherwise sets the row's minimum width and widens the page. */
+  overflow-wrap: anywhere;
 }
 .fact-val {
   font-family: var(--mono); font-size: 12px; color: var(--faint);
@@ -735,7 +876,7 @@ body.claim-open { overflow: hidden; }
   width: 6px; height: 6px; border-radius: 50%; flex: none;
   border: 1px solid var(--line); background: transparent;
 }
-.dot-on { background: var(--gold); border-color: var(--gold); }
+.dot-on { background: var(--accent); border-color: var(--accent); }
 
 /* Spend against a cap. Deliberately thin: it is a reading, not a gauge to watch. */
 .meter {
@@ -771,11 +912,21 @@ body.claim-open { overflow: hidden; }
   color: var(--faint); padding: var(--s2) 0;
 }
 .more summary:hover { color: var(--text); }
-.more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+.more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
 @media (max-width: 820px) {
-  .topbar { padding: var(--s3) var(--s4); gap: var(--s3); flex-wrap: wrap; }
-  .ops { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
+  /* On a phone the header wraps to several rows, and a sticky one that tall
+     would hold a quarter of the screen. A sideways-scrolling job strip hid
+     Value past the right edge with nothing saying it was there, so every job
+     sits in a grid instead, each a full-size target, all visible at once. */
+  .topbar { position: static; padding: var(--s3) var(--s4); gap: var(--s3); flex-wrap: wrap; }
+  .ops { margin-left: 0; order: 3; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
+  .ops-util { order: 4; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; padding-left: 0; }
+  .op { min-height: 44px; text-align: center; background: var(--panel); }
+  /* Every grid cell has a fill here, so the current page needs more than a
+     slightly different fill to stand out. */
+  .op[aria-current='page'] { color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
+  .register-switch button { min-height: 38px; }
   .register-switch { margin-left: auto; }
   .sheet { padding: 0 var(--s4); }
   .shellfoot { padding: var(--s5) var(--s4) var(--s8); }
@@ -821,3 +972,365 @@ body.claim-open { overflow: hidden; }
 .kernel-link { background: none; border: 0; padding: 0; color: var(--sky); font-family: var(--mono); font-size: 12px; cursor: pointer; text-align: left; word-break: break-all; }
 .kernel-link:hover, .kernel-link:focus-visible { text-decoration: underline; }
 .kernel-record { font-family: var(--mono); font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 24rem; overflow: auto; padding: var(--s3); border: 1px solid var(--line); border-radius: 6px; margin: var(--s2) 0 0; }
+
+/* ---------- Workflow steps (Allocate) ------------------------------------- */
+/* A job done in order: each step says what it is for, shows what exists, and
+   carries the form that adds to it. The number is the order the engine needs,
+   not decoration. */
+
+.step { margin-top: var(--s8); }
+.step-title {
+  display: flex; align-items: center; gap: var(--s3);
+  font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--text);
+}
+.step-n {
+  display: inline-grid; place-items: center; flex: none;
+  width: 26px; height: 26px; border-radius: 50%;
+  border: 1px solid var(--accent); color: var(--accent-text);
+  font-family: var(--mono); font-size: 12px;
+}
+.step-lede { color: var(--muted); max-width: 70ch; margin: var(--s1) 0 var(--s3) calc(26px + var(--s3)); }
+.step > .facts, .step > .inline-form, .step > .run-panel, .step > p.drawer-muted, .step > .form-hint, .step > .drawer-warning, .step > .step-aside { margin-left: calc(26px + var(--s3)); }
+.step-aside { margin-top: var(--s3); max-width: 420px; }
+
+.basis-strip .card-head { flex-wrap: wrap; gap: var(--s2); }
+.basis-strip .card-title { margin-right: auto; }
+
+.fact-sub { color: var(--faint); font-size: 12px; margin-left: var(--s2); }
+.fact-val { display: inline-flex; align-items: baseline; gap: var(--s3); }
+.link-btn {
+  background: none; border: 0; padding: 0; font: inherit; font-family: var(--mono); font-size: 12px;
+  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
+}
+.link-btn:hover, .link-btn:focus-visible { color: var(--coral); }
+
+.inline-form {
+  margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--line-soft);
+  border-radius: var(--r-sm); background: var(--panel); display: grid; gap: var(--s3);
+}
+.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); }
+.form-field { display: grid; gap: var(--s1); flex: 1 1 200px; min-width: 0; }
+.form-field label, .shares legend { font-size: 12px; color: var(--muted); }
+.form-hint { font-size: 12.5px; color: var(--faint); min-height: 1em; }
+.form-hint:empty { display: none; }
+.form-actions { display: flex; justify-content: flex-end; gap: var(--s2); align-items: center; }
+select.drawer-input { font-family: inherit; }
+
+.shares { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); }
+.share { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
+.share .drawer-input { width: 8rem; text-align: right; }
+
+.run-panel { display: grid; gap: var(--s4); }
+.run-row .form-field { flex: 0 1 300px; }
+/* Allocate: the rule form's further conditions stay folded until wanted, so the
+   common rule (one project to one centre) is still one row. */
+.rule-more { display: grid; gap: var(--s3); }
+.rule-more > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; font-size: 13px; color: var(--muted); }
+.rule-more > summary::-webkit-details-marker { display: none; }
+.rule-more > summary::before { content: '\25B8'; margin-right: var(--s2); }
+.rule-more[open] > summary::before { content: '\25BE'; }
+.rule-more > summary:hover { color: var(--text); }
+.rule-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.rule-more-row .form-field { flex: 1 1 150px; }
+/* The rule form inside a drawer: the same fields, spaced as blocks, since the
+   drawer has no inline-form grid around them. */
+.rule-drawer-fields { display: grid; gap: var(--s4); margin-top: var(--s3); }
+.run-dates { flex: 1 1 100%; }
+.run-dates .form-field { flex: 0 1 200px; }
+.run-result { display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--panel); }
+.row-unalloc td { color: var(--gold-text); }
+.row-unalloc .fact-sub { display: block; margin: 2px 0 0; }
+tfoot td { border-top: 1px solid var(--line); font-weight: 500; }
+
+.statement-kept { display: grid; gap: var(--s1); margin: var(--s2) 0; }
+.statement-kept-row { display: flex; justify-content: space-between; gap: var(--s4); font-size: 14px; }
+.statement-kept-val { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: nowrap; }
+
+.view-prefs { margin-top: var(--s5); }
+.view-prefs .pref-group { border: 0; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s2); }
+.view-prefs legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: var(--s1); }
+.pref { display: flex; align-items: center; gap: var(--s2); font-size: 14px; cursor: pointer; }
+.pref input { accent-color: var(--accent); width: 16px; height: 16px; }
+.pref-links { display: flex; flex-wrap: wrap; gap: var(--s3); }
+.pref-links a { color: var(--accent-text); font-size: 13px; }
+
+/* The page-level result of a save: fixed in view, because the form that caused
+   it may be far down a long page. Errors stay; confirmations clear. */
+.page-notice {
+  position: fixed; left: 50%; bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
+  z-index: 40; max-width: min(640px, calc(100vw - 2 * var(--s4)));
+  padding: var(--s3) var(--s5); border-radius: var(--r-sm);
+  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
+  box-shadow: 0 8px 28px rgb(0 0 0 / 0.28);
+  width: max-content; overflow-wrap: anywhere;
+}
+.page-notice.drawer-error { border-color: var(--coral); color: var(--coral); }
+/* Idle: present for screen readers, invisible on screen. */
+.page-notice:empty { padding: 0; border: 0; box-shadow: none; background: none; }
+
+/* A step the ledger already satisfies: its number becomes a check in mint. */
+.step-done .step-n { border-color: var(--mint); color: var(--mint); }
+
+/* Label and value pairs in a preview: what will be written, before it is. */
+.preview-rows { display: grid; gap: var(--s1); margin: 0; }
+.preview-row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--s3); padding: var(--s1) 0; border-bottom: 1px solid var(--line-soft); }
+.preview-row:last-child { border-bottom: 0; }
+.preview-row dt { color: var(--muted); font-size: 13px; }
+.preview-row dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
+
+.fact-stack { flex-direction: column; align-items: stretch; gap: var(--s2); }
+.fact-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
+.fact-stack .fact-sub { display: block; margin: 2px 0 0; }
+.fact-stack .fact-key { flex-direction: column; align-items: flex-start; gap: 0; }
+
+.close-details { margin-top: var(--s10); }
+.close-details > summary { cursor: pointer; list-style: revert; }
+.close-details[open] > summary { margin-bottom: var(--s2); }
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+@media (max-width: 820px) {
+  .step-lede, .step > .facts, .step > .inline-form, .step > .run-panel, .step > p.drawer-muted { margin-left: 0; }
+  .btn-commit, .btn-ghost { min-height: 44px; }
+  .form-row > .btn-commit, .form-row > .btn-ghost, .form-actions > .btn-commit { width: 100%; }
+  .preview-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+  .fact-line { flex-direction: column; gap: var(--s1); }
+  .step > .facts, .step > .form-hint { margin-left: 0; }
+}
+
+/* ---------- Statement ------------------------------------------------------ */
+.month-bar { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0 var(--s5); flex-wrap: wrap; }
+.month-bar .btn-ghost { padding: var(--s1) var(--s3); font-size: 16px; line-height: 1; }
+.month-label { font-family: var(--serif); font-size: 20px; min-width: 10ch; text-align: center; }
+.month-state { color: var(--muted); font-size: 13px; }
+.appearance { margin-top: var(--s5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
+.appearance .card-head { margin: 0; }
+.appearance .basis { margin: 0; }
+.theme-switch button { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; min-height: 32px; }
+.statement-download { margin-left: auto; color: var(--accent-text); font-size: 14px; padding: var(--s2) 0; }
+.statement-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+/* One recorded split's CSV, in the Saved splits table: the same accent link, sized for a thumb on phones. */
+.run-period { display: block; }
+.run-download { display: inline-block; margin-top: 2px; color: var(--accent-text); font-size: 12px; white-space: nowrap; }
+.run-download:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 820px) { .run-download { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; } }
+@media (max-width: 820px) { .statement-download { margin-left: 0; width: 100%; min-height: 44px; display: flex; align-items: center; } }
+.statement-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (max-width: 820px) { .statement-grid { grid-template-columns: minmax(0, 1fr); } }
+.statement-card .pill { white-space: nowrap; }
+.statement-card { display: flex; flex-direction: column; gap: var(--s2); }
+.statement-card .stat { margin: var(--s1) 0; }
+.statement-none { color: var(--muted); }
+.statement-run { display: grid; gap: 2px; padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
+.statement-run:last-of-type { border-bottom: 0; }
+.statement-shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
+.statement-shares li { display: flex; justify-content: space-between; gap: var(--s3); font-size: 14px; }
+.statement-link { margin-top: auto; padding-top: var(--s2); color: var(--accent-text); font-size: 13px; text-underline-offset: 3px; }
+.statement-rule { margin-top: var(--s4); max-width: 80ch; }
+
+/* ---------- Folds (long evidence, closed by default) ------------------------ */
+.fold { margin-top: var(--s3); border-top: 1px solid var(--line-soft); }
+.fold:last-of-type { border-bottom: 1px solid var(--line-soft); }
+.fold-summary, .parity-summary { cursor: pointer; padding: var(--s3) 0; list-style: revert; color: var(--text); font-size: 14px; }
+.fold-summary:hover, .parity-summary:hover { color: var(--accent-text); }
+.fold[open] > .fold-summary { margin-bottom: var(--s2); }
+.fold-head { margin-top: var(--s10); }
+.parity-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
+.parity-summary .section-title { margin: 0; }
+/* A flex summary loses the native disclosure triangle; without one, nothing says
+   this line opens. */
+.parity-summary { list-style: none; }
+.parity-summary::-webkit-details-marker { display: none; }
+.parity-summary::before { content: '\25B8'; color: var(--muted); }
+.parity-details[open] > .parity-summary::before { content: '\25BE'; }
+/* Close: an adopted export says it is in use rather than offering itself again. */
+.in-use { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
+/* Close: each recorded comparison opens to what was recorded. The summary is a
+   flex row, so it draws its own disclosure marker, as the parity table does. */
+.recorded-run > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: baseline; padding: var(--s2) 0; }
+.recorded-run > summary::-webkit-details-marker { display: none; }
+.recorded-run > summary .fact-line { flex: 1; min-width: 0; }
+.recorded-run > summary::before { content: '\25B8'; color: var(--muted); margin-right: var(--s2); }
+.recorded-run[open] > summary::before { content: '\25BE'; }
+.recorded-run > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.recorded-run[open] > summary { margin-bottom: var(--s2); }
+.declared-scope { margin-bottom: var(--s3); }
+.parity-counts { color: var(--muted); font-size: 13px; }
+/* The capability and its plain description are what this table is for; the
+   command column had taken the width and wrapped the descriptions a word or
+   two per line. Status tags stay on one line. */
+.parity-table td:first-child { width: 44%; min-width: 260px; }
+.parity-table .tag { white-space: nowrap; }
+/* Opens the capability's drawer. An action, so it takes the action colour, not
+   the muted link-btn grey (whose coral hover means "archive"), and a 24px target. */
+.parity-table .parity-open {
+  display: inline-flex; align-items: center; min-height: 24px; margin-top: var(--s1);
+  color: var(--accent-text);
+}
+.parity-table .parity-open:hover, .parity-table .parity-open:focus-visible { color: var(--text); }
+.parity-table td:last-child code { white-space: nowrap; }
+
+/* ---------- Workbench (Spend) -------------------------------------------- */
+
+/* Dense by design: the reader lives on this page. Ember marks what can be
+   chosen; gold stays for the brand and for "look at this". */
+.wb { margin-bottom: var(--s8); }
+.wb-body { display: flex; flex-direction: column; gap: var(--s4); }
+.wb-pair { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
+.wb-pair-sessions { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
+@media (max-width: 1180px) { .wb-pair, .wb-pair-sessions { grid-template-columns: minmax(0, 1fr); } }
+.wb-head-note { font-size: 12px; color: var(--faint); }
+
+.wb-tiles {
+  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
+  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r);
+}
+.wb-tile { display: flex; flex-direction: column; gap: 3px; padding: var(--s3) var(--s4); min-width: 0; border-left: 1px solid var(--line-soft); }
+.wb-tile:first-child { border-left: 0; }
+.wb-tile-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
+.wb-tile-value { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text); }
+.wb-tile-sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
+.wb-tile-caution .wb-tile-value { color: var(--gold-text); }
+@media (max-width: 1000px) {
+  .wb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .wb-tile:nth-child(3n + 1) { border-left: 0; }
+  .wb-tile:nth-child(n + 4) { border-top: 1px solid var(--line-soft); }
+}
+@media (max-width: 560px) {
+  .wb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .wb-tile { border-left: 0; border-top: 1px solid var(--line-soft); }
+  .wb-tile:nth-child(even) { border-left: 1px solid var(--line-soft); }
+  .wb-tile:nth-child(-n + 2) { border-top: 0; }
+}
+
+/* The chart. HTML rather than SVG, so labels stay crisp at any width. One
+   scale: every gridline is a value the axis really reaches. */
+.wb-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s2); }
+.wb-legend-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
+.wb-legend-value { color: var(--text); }
+.wb-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
+.wb-readout { font-size: 12.5px; color: var(--muted); min-height: 3em; margin-bottom: var(--s3); font-variant-numeric: tabular-nums; }
+.wb-plot { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); height: 210px; padding-bottom: 20px; }
+.wb-yaxis { position: relative; }
+.wb-ytick {
+  position: absolute; right: var(--s2); transform: translateY(50%);
+  font-family: var(--mono); font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.wb-bars {
+  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
+  gap: clamp(1px, 0.4vw, 5px); align-items: end; border-bottom: 1px solid var(--line);
+}
+.wb-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line-soft); pointer-events: none; }
+.wb-bar {
+  position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
+  background: none; border: 0; padding: 0; cursor: pointer; min-width: 0;
+}
+.wb-bar:disabled { cursor: default; }
+.wb-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
+.wb-stack { display: flex; flex-direction: column; width: 100%; max-width: 34px; margin: 0 auto; border-radius: 3px 3px 0 0; overflow: hidden; }
+.wb-seg { display: block; min-height: 1px; flex-basis: 0; }
+.wb-seg + .wb-seg { border-top: 1px solid var(--panel); }
+.wb-bars:has(.wb-bar.is-focus) .wb-bar:not(.is-focus) .wb-stack { opacity: 0.45; }
+.wb-xtick {
+  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 4px;
+  font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap;
+}
+
+/* Outcomes. Words carry the state; colour only repeats it. */
+.wb-split { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; margin-bottom: var(--s3); }
+.wb-split-seg { display: block; flex-basis: 0; background: currentColor; }
+.wb-oc-rows { display: flex; flex-direction: column; }
+.wb-oc-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 5.5rem 3rem; gap: var(--s3); align-items: baseline;
+  padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px;
+}
+.wb-oc-key { display: inline-flex; align-items: center; gap: var(--s2); }
+.wb-oc-key > span:last-child { color: var(--text); }
+.wb-oc-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
+.wb-oc-n { color: var(--muted); font-size: 12px; }
+.wb-oc-share { color: var(--faint); font-size: 12px; }
+.oc-kept { color: var(--mint); }
+.oc-notkept { color: var(--coral); }
+.oc-contested { color: var(--gold-text); }
+.oc-unknown { color: var(--faint); }
+.oc-maturing { color: var(--sky); }
+.oc-unmeasured { color: var(--violet); }
+.oc-none { color: var(--faint); }
+.wb-split-seg.oc-none { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px); }
+.wb-oc-key.oc-none .wb-oc-dot { background: none; border: 1px solid var(--faint); }
+
+/* Sessions. */
+.wb-table { font-size: 12.5px; }
+.wb-table td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
+.wb-row { cursor: pointer; }
+.wb-row:hover td { background: var(--panel-2); }
+.wb-row.is-selected td { background: var(--accent-soft); }
+.wb-row.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
+.wb-when { text-align: left; }
+.wb-open { color: var(--accent-text); text-decoration: none; font-size: 12px; }
+.wb-open:hover, .wb-open:focus-visible { color: var(--text); text-decoration: underline; }
+.wb-who { min-width: 0; }
+.wb-tool { display: block; color: var(--text); }
+.wb-model { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
+.wb-cost { color: var(--text); }
+.wb-ctx { white-space: nowrap; }
+.wb-ctx .wb-dumbbell { display: block; margin: 0 0 2px; }
+.wb-ctx-text { display: block; text-align: left; }
+.wb-when-day, .wb-when-time { display: block; }
+.wb-when-time { color: var(--muted); font-size: 11px; }
+.wb-dumbbell { position: relative; display: inline-block; width: 5.5rem; height: 12px; vertical-align: middle; margin-right: var(--s2); }
+.wb-db-track { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
+.wb-db-span { position: absolute; top: calc(50% - 1px); height: 2px; background: var(--accent); }
+.wb-db-span.is-down { background: var(--sky); }
+.wb-db-start, .wb-db-end {
+  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
+}
+.wb-db-start { background: var(--panel); border: 1.5px solid var(--accent); }
+.wb-db-end { background: var(--accent); }
+.wb-db-peak { position: absolute; top: 1px; bottom: 1px; width: 0; border-left: 1px solid var(--faint); }
+.wb-ctx-text { font-size: 11.5px; color: var(--muted); }
+.wb-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.wb-chip {
+  display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor;
+  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em; white-space: nowrap;
+}
+.wb-none { font-size: 11.5px; color: var(--muted); }
+.wb-more { margin-top: var(--s3); color: var(--accent-text); }
+.wb-more:hover, .wb-more:focus-visible { color: var(--text); }
+
+/* Inside one session. */
+.wb-detail { position: sticky; top: var(--s4); }
+.wb-detail-who { font-size: 13px; color: var(--muted); margin-bottom: var(--s3); }
+.wb-detail-who strong { color: var(--text); font-weight: 600; }
+.wb-profile { display: flex; align-items: flex-end; gap: 2px; height: 84px; border-bottom: 1px solid var(--line); padding-top: 10px; }
+.wb-pbar { position: relative; flex: 1 1 0; min-width: 2px; background: var(--accent); opacity: 0.85; border-radius: 2px 2px 0 0; }
+.wb-pbar.has-mark::after {
+  content: ""; position: absolute; left: 50%; top: -9px; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg);
+}
+.wb-pbar.mark-refused::after { background: var(--gold); }
+.wb-pbar.mark-failed::after, .wb-pbar.mark-both::after { background: var(--coral); }
+.wb-profile-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
+.wb-profile-key { font-size: 11.5px; color: var(--muted); margin-top: var(--s2); }
+.wb-mark-key { display: inline-block; width: 6px; height: 6px; transform: rotate(45deg); margin: 0 2px 1px 0; }
+.wb-mark-key.mark-refused { background: var(--gold); }
+.wb-mark-key.mark-failed { background: var(--coral); }
+.wb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s4); margin: var(--s4) 0; }
+.wb-fact { display: flex; justify-content: space-between; gap: var(--s2); border-bottom: 1px solid var(--line-soft); padding: 3px 0; font-size: 12.5px; min-width: 0; }
+.wb-fact dt { color: var(--muted); }
+.wb-fact dd { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
+.wb-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin: var(--s4) 0 var(--s2); font-weight: 400; }
+.wb-commit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.wb-commit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); font-size: 12.5px; }
+.wb-sha { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
+.wb-subject { color: var(--text); flex: 1 1 10rem; min-width: 0; }
+.wb-check { font-size: 11px; color: var(--faint); }
+.wb-hints { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); max-width: 60ch; }
+.wb-hints li::marker { color: var(--accent); }
+@media (max-width: 1180px) { .wb-detail { position: static; } }
+
+.wb-req { display: block; }
+.wb-req-note { display: block; font-size: 10.5px; color: var(--gold-text); }
+.wb-table th, .wb-table td { padding-left: var(--s2); padding-right: var(--s2); }