@bongos/core 1.19.444 → 1.19.446

package/modules/hall-ui/public/style.css

@@ -1,132 +1,323 @@
-/* builders hall — the vanilla Cloud Bongos dashboard shell (task 1723).
-   Clean, neutral, calm: app shell (fixed sidebar + sticky top bar + one
-   window-scrolled content column) + a small reused component kit.
-   Scope: docs/design/vanilla-hall-ui-redesign-scope.md.
-
-   THEMING CONTRACT (do not rename): the 13 color vars + 2 font vars below are
-   the instance-pack API — serve-internal.js themeMarkup() re-declares them from
-   config/branding.*.json AFTER this file, so an instance's palette/fonts win.
-   Everything else derives from them (color-mix) so any pack reskins the whole
-   kit. The values here are the neutral vanilla defaults. */
+/* builders hall — the vanilla Cloud Bongos dashboard shell (task 1723), rebuilt
+   into the chrome world by task 1003303 (goal 1000081).
+
+   THE WORLD. DESIGN.md at the repo root is this surface's world; the tier below
+   is its "Reuse: the hall and the status ledger" recipe followed literally, and
+   it is the tier the composition round authored and verified as
+   docs/design/mocks/hall/_tokens.css (task 1003302). The round's pick is v3
+   "the glass hall" — a 64px rail at every width, glass chrome, content on
+   --bg-card panels at the full radius with tone doing the separation. Record:
+   docs/design/hall-direction-v2.md.
+
+   THEMING CONTRACT (do not rename): the 13 color vars + 2 font vars at the head
+   of :root are the instance-pack API — serve-internal.js themeMarkup()
+   re-declares exactly these from config/branding.*.json AFTER this file, so an
+   instance's palette/fonts win. Their values here are branding.neutral.json's
+   theme.ui, byte for byte, so the served page and this sheet agree. Everything
+   else derives from them (var / color-mix), so any pack reskins the whole kit.
+
+   FOUR THINGS THIS TIER DOES THAT world.css DOES NOT, each a hall problem the
+   landing never had:
+
+   a. THE STATUS VOCABULARY IS FIXED, AND IT IS THE ONE SANCTIONED EXCEPTION TO
+      THE FIFTEEN RULE. DESIGN.md §Reuse: a surface that renders VERIFICATION
+      state — the hall's chips, CI marks — keeps its own green/amber/red and
+      must not adopt the world's warm accent-derived ok/warn/err. A grade that
+      failed must not be salmon on a page whose claim button is also salmon.
+      Three of the four values MOVED, and that is a measurement, not a taste:
+      the shipped values were tuned against the hall's retired ground
+      (--bg #f5f6f8), and against the world's darker paper (--bg #edecee) they
+      fail AA — ok 4.27:1, warn 4.13:1, info 3.85:1 and 4.36:1, and 4.19:1 on
+      the dark card. Re-solved here so all eight pairs clear 4.5:1 on both
+      grounds in both modes with ~9% of headroom. tests/hall_tokens.mjs measures
+      them; do not hand-tune one without re-running it.
+
+   b. THE HALL KEEPS BOTH MODES, ON ITS OWN SWITCH. The apex went dark only
+      (ADR 0204), so light is the hall's alone. shell.js writes
+      html[data-theme] — NOT the world's html[data-mode] — so the dark tier is
+      written twice on THAT pair: html[data-theme="dark"] and, for first paint
+      before the script runs, @media (prefers-color-scheme: dark)
+      html:not([data-theme]). Both bodies are byte-identical; the twins rule is
+      what keeps them so. html[data-theme="dark"] is (0,1,1) and outranks the
+      pack's injected :root (0,1,0), which is what lets dark win over the pack
+      while the instance's accent survives.
+
+   c. --line IS A WIDTH HERE, NOT A COLOUR (DESIGN.md warns about exactly this
+      name). The hairline's COLOUR is --rule / --rule-soft.
+
+   d. THE COMPAT ALIASES ARE LOAD-BEARING. ~450 rules across 20 page sheets
+      derive from --surface / --surface-2 / --border / --border-strong /
+      --accent-weak / --accent-text, so they are re-derived in the world's terms
+      rather than deleted: a page this task does not re-skin degrades into the
+      new palette instead of breaking. They retire page family by page family as
+      tasks 1003304-1003308 land.
+
+   Composition — rail/drawer breakpoints, panel padding, page layout — is NOT in
+   here. It lives on the shell rules below and on a page's own body, because a
+   body declaration beats an inherited :root value at every width and a token
+   tier that carries a breakpoint silently defeats its own media query. */
 
 :root {
-  /* ---- pack-driven vars (the theming API) ---- */
-  --bg:           #f5f6f8;
-  --bg-card:      #ffffff;
-  --bg-deep:      #eceef2;
-  --bg-frame:     #e7e9ee;
-
-  --ink:          #1a1d23;
-  --ink-soft:     #5b6372;
-  --ink-faint:    #8b93a1;
-  --rule:         #d4d8e0;
-  --rule-soft:    #e6e8ee;
-  --accent:       #4f63e7;
-  --accent-deep:  #3b4dc4;
-  --sea:          #175cd3;
-  --terracotta:   #b45309;
-
-  --font-display: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
-  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
-
-  /* ---- derived tokens (recompute from the pack vars) ---- */
-  --surface:       var(--bg-card);
-  --surface-2:     color-mix(in srgb, var(--bg-card) 45%, var(--bg));
-  --border:        color-mix(in srgb, var(--ink) 11%, var(--bg));
-  --border-strong: color-mix(in srgb, var(--ink) 22%, var(--bg));
-  --accent-weak:   color-mix(in srgb, var(--accent) 9%, var(--bg-card));
-  --accent-text:   color-mix(in srgb, var(--accent) 82%, var(--ink));
-
-  /* semantic status colors (deliberately NOT pack-driven) */
-  --ok:          #1a7f4b;
-  --ok-weak:     color-mix(in srgb, #1a7f4b 12%, var(--bg-card));
-  --warn:        #9a6700;
-  --warn-weak:   color-mix(in srgb, #d99a00 14%, var(--bg-card));
+  color-scheme: light;
+
+  /* ---- the contract tier: the thirteen colours + two faces a pack overrides ---- */
+  --bg:           #edecee;
+  --bg-card:      #fbfafc;
+  --bg-deep:      #e2e1e4;
+  --bg-frame:     #f6f5f7;
+  --ink:          #17181a;
+  --ink-soft:     #55565a;
+  --ink-faint:    #65656a;
+  --rule:         #c6c6c8;
+  --rule-soft:    #dcdbdd;
+  --accent:       #fb9569;
+  --accent-deep:  #a3481a;
+  --sea:          #5b6fd0;
+  --terracotta:   #c9512c;
+
+  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+
+  /* ---- derived: the third face. Mono is where the hall quotes the machine —
+          task ids, column heads, eyebrows, a credit figure's unit. ---- */
+  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+
+  /* ---- derived: glass. The blur is a token because light glass over paper is
+          a tint, not a frost — light sets it to 0px and stays paper. ---- */
+  --glass:        rgba(23, 24, 26, .05);
+  --glass-strong: rgba(23, 24, 26, .08);
+  --glass-edge:   rgba(23, 24, 26, .12);
+  --glass-blur:   0px;
+
+  /* ---- derived: the void. The hall has no hero; the void is what a control
+          needs when it sits over a plate, and the seam for one. ---- */
+  --void:         #050508;
+  --void-ink:     #ffffff;
+  --void-edge:    rgba(23, 24, 26, .12);
+
+  /* ---- derived: the skeleton tone. --bg-deep is the obvious choice and it is
+          WRONG: DESIGN.md collapses deep back to black in dark, so --bg-deep
+          and --bg are the same value there and a skeleton painted with it is
+          invisible. This mix reads in both modes and needs no dark twin,
+          because both of its terms already flip. ---- */
+  --skeleton: color-mix(in srgb, var(--ink) 10%, var(--bg-card));
+
+  /* ---- derived: the reading measure. A `ch` is the width of the font's ZERO
+          glyph, not a character, and Manrope's zero is much wider than its
+          average lowercase — primer.css's `max-width: 72ch` renders about 90
+          characters under a comment claiming 60-72. This token is MEASURED:
+          48ch renders ~60 characters at the hall's body size. Re-measure rather
+          than doing the ch maths. ---- */
+  --measure: 48ch;
+
+  /* ---- derived: accent behaviours. The One Warm Thing Rule holds in the hall
+          too — the accent lights only what is pressable or live (the claim
+          button, the current nav item, the active tab, a focus ring). A credit
+          figure is data, not live, so it is ink. --accent-on is the DARK ink
+          that goes on an accent fill: white on this salmon fails AA. ---- */
+  --accent-ink:  color-mix(in srgb, var(--accent) 45%, #240e00);
+  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --accent-tint: color-mix(in srgb, var(--accent) 30%, #fffdf9);
+  --accent-on:   #2a1305;
+  --accent-glow: 0 0 0 0 transparent;
+
+  /* ---- the status vocabulary: fixed, not pack-driven, not accent-derived.
+          See note (a) — these values are measured, not chosen. ---- */
+  --ok:          #187444;
+  --ok-weak:     color-mix(in srgb, #187444 12%, var(--bg-card));
+  --warn:        #895c00;
+  --warn-weak:   color-mix(in srgb, #895c00 14%, var(--bg-card));
   --danger:      #b42318;
   --danger-weak: color-mix(in srgb, #b42318 10%, var(--bg-card));
-  --info:        var(--sea);
-  --info-weak:   color-mix(in srgb, var(--sea) 11%, var(--bg-card));
-
-  /* layout metrics (scope §10) */
-  --sidebar-w: 240px;
-  --sidebar-w-rail: 64px;
-  --topbar-h: 56px;
-  --content-max: 1120px;
-  --radius: 10px;
-  --radius-sm: 8px;
-  --shadow-pop: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
-
-  /* z ladder — content overlays (rank tips z-50, modals z-50, toast z-100,
+  /* --info is the one state that is NOT a bright colour, because it derives
+          from the contract's --sea rather than a chosen hex, and that makes its
+          own weak fill the binding pair rather than the grounds. The round
+          measured info against --bg and --bg-card only; measured against
+          --info-weak too (tests/hall_tokens.mjs), dark's 91% sea fell to 4.12:1,
+          so dark lightens to 80% for 5.00:1 with the ~9% headroom the rest of
+          the vocabulary holds. Both weak fills mix the STATE colour into the
+          card, which is the shape ok/warn/danger already use — mixing the raw
+          --sea instead is what made the two drift apart. ---- */
+  --info:        color-mix(in srgb, var(--sea) 86%, #000000);
+  --info-weak:   color-mix(in srgb, var(--info) 9%, var(--bg-card));
+
+  /* ---- derived: focus. The world's two-tone ring — a 2px accent-derived
+          outline at 3px offset inside an 8px --bg halo, so the indicator keeps
+          its own edge over whatever it lands on. ---- */
+  --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);
+
+  /* ---- derived: the label face flips. Mono caps read as precise on paper and
+          thin on black, so light takes the mono and dark takes the body face.
+          Take the token, never the family. ---- */
+  --label-face:  var(--font-mono);
+  --label-size:  11px;
+  --label-space: .12em;
+  --label-case:  uppercase;
+
+  /* ---- derived: the type halo. Only type over a plate needs one, and in light
+          there is nothing behind it. Never a coloured glow. ---- */
+  --type-halo: none;
+
+  /* ---- structure. --line is a WIDTH (note c). ---- */
+  --line:        1px;
+  --radius:      16px;
+  --radius-sm:   10px;
+  --radius-pill: 999px;
+
+  /* ---- the shell's metrics. --topbar-h stays under the kit's 80px top-bar
+          floor; --sidebar-w IS the rail, because v3 pins the rail at every
+          width and the drawer is the phone's disclosure. ---- */
+  --top-h:           56px;
+  --topbar-h:        56px;
+  --sidebar-w-rail:  64px;
+  --sidebar-w:       var(--sidebar-w-rail);
+  --rail-open:       246px;
+  --content-max:     1120px;
+
+  /* ---- spacing: DESIGN.md's rhythm (6/10/14/22/34/52). The four-step
+          --space-* scale task 2179 named aliases onto it, so no ported rule
+          breaks; hairlines separate, padding does not. ---- */
+  --sp-hair: 6px;
+  --sp-xs:   10px;
+  --sp-sm:   14px;
+  --sp-md:   22px;
+  --sp-lg:   34px;
+  --sp-xl:   52px;
+  --space-1: var(--sp-hair);
+  --space-2: var(--sp-xs);
+  --space-3: var(--sp-sm);
+  --space-4: var(--sp-md);
+
+  /* ---- the compat aliases (note d) ---- */
+  --surface:       var(--bg-card);
+  --surface-2:     color-mix(in srgb, var(--ink) 5%, var(--bg-card));
+  --border:        var(--rule-soft);
+  --border-strong: var(--rule);
+  --accent-weak:   var(--accent-tint);
+  --accent-text:   var(--accent-ink);
+  /* The world has no shadow vocabulary for UI, so this is spent only where an
+     element floats over a scrim (the phone drawer, the deep-link card). Pure
+     black with alpha is the one literal the Fifteen Rule allows, as a scrim. */
+  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .28);
+
+  /* ---- z ladder — content overlays (rank tips z-50, modals z-50, toast z-100,
      copy-toast z-1000, deeplink z-2000, diagram fullscreen z-9999) must beat
-     the chrome; the mobile drawer sits above chrome but below dialogs. */
+     the chrome; the mobile drawer sits above chrome but below dialogs. ---- */
   --z-topbar: 30;
   --z-sidebar: 40;
   --z-scrim: 140;
   --z-drawer: 150;
-}
-
-/* ---------- spacing scale (task 2179) ----------
-   Four steps, deliberately matching the values the sheet had already converged
-   on (a census found 6/10/16/20 dominant), so this NAMES the existing rhythm
-   rather than restyling the hall. It governs the three things that decide
-   density — card padding, card gap, section gap — and is not a mandate to
-   rewrite every inset; chip and control padding stay as authored.
 
-   Kept in its OWN block rather than added to :root above: :root is the
-   pack-driven theming contract an instance overrides, and the program's audit
-   requires it unchanged. Spacing is structure, not theme.
-
-     1  6px   tight — inside a row or chip
-     2  10px  default gap between siblings
-     3  16px  comfortable — secondary card padding
-     4  20px  card padding, card gap, section gap                              */
-:root {
-  --space-1: 6px;
-  --space-2: 10px;
-  --space-3: 16px;
-  --space-4: 20px;
+  /* ---- the hall's own plate: the declared seam, deferred by the owner
+          ("decide after the shell lands", 2026-08-30). The hall's plate was
+          never shot, so it resolves to none and the shell is a complete
+          composition without one — which is exactly what light does anyway.
+          Adding one later is a change to these three values, not a re-layout. */
+  --plate: none;
+  --plate-blend: lighten;
+  --plate-veil: none;
 }
 
 /* ---------- dark theme ----------
-   Only the NEUTRALS flip; the instance pack's accent/sea/terracotta + fonts
-   survive, and every derived token (color-mix on these vars) re-derives
-   automatically. html[data-theme] outweighs the pack's injected :root override
-   (specificity 0,1,1 vs 0,1,0), so dark wins over the pack's light values.
-   shell.js owns the toggle + persistence (localStorage 'hall-theme'); the
-   media block below covers first paint for OS-dark users before it runs. */
+   Only the NEUTRALS and the mode-dependent derivations flip; the pack's
+   accent/sea/terracotta + fonts survive (the Unpinned Accent Rule — a dark
+   block may pin no accent literal, or a re-themed instance cannot reach dark),
+   and every color-mix on them re-derives for free. Written twice, byte-
+   identical: the [data-theme] switch shell.js owns, and the media block that
+   covers first paint for OS-dark users before the script runs. */
 
 html[data-theme="dark"] {
   color-scheme: dark;
-  --bg:       #101216;
-  --bg-card:  #181b21;
-  --bg-deep:  #0c0e11;
-  --bg-frame: #1e222a;
-  --ink:       #e7e9ee;
-  --ink-soft:  #9aa2b1;
-  --ink-faint: #6b7280;
-  --rule:      #333945;
-  --rule-soft: #242933;
-  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
+  --bg:        #000000;
+  --bg-card:   #101012;
+  --bg-deep:   #000000;
+  --bg-frame:  #08080a;
+  --ink:       #ffffff;
+  --ink-soft:  #c0c0c0;
+  --ink-faint: #a8a8a8;
+  --rule:      rgba(255, 255, 255, .16);
+  --rule-soft: rgba(255, 255, 255, .08);
+  --glass:        rgba(255, 255, 255, .11);
+  --glass-strong: rgba(255, 255, 255, .17);
+  --glass-edge:   rgba(255, 255, 255, .13);
+  --glass-blur:   18px;
+  --void:      #000000;
+  --void-ink:  var(--ink);
+  --void-edge: rgba(255, 255, 255, .16);
+  --accent-ink:  var(--accent);
+  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
+  --ok:          #4ade80;
+  --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
+  --warn:        #fbbf24;
+  --warn-weak:   color-mix(in srgb, #fbbf24 14%, var(--bg-card));
+  --danger:      #f87171;
+  --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
+  --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
+  --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
+  --focus:       var(--accent);
+  --label-face:  var(--font-body);
+  --label-size:  11.5px;
+  --label-space: .1em;
+  --type-halo:   0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
+  --surface-2:   color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+  --shadow-pop:  0 18px 40px rgba(0, 0, 0, .62);
+  --plate-veil:  linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
 }
 html[data-theme="dark"] body { background: var(--bg); }
 
 @media (prefers-color-scheme: dark) {
   html:not([data-theme]) {
     color-scheme: dark;
-    --bg:       #101216;
-    --bg-card:  #181b21;
-    --bg-deep:  #0c0e11;
-    --bg-frame: #1e222a;
-    --ink:       #e7e9ee;
-    --ink-soft:  #9aa2b1;
-    --ink-faint: #6b7280;
-    --rule:      #333945;
-    --rule-soft: #242933;
-    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5);
+    --bg:        #000000;
+    --bg-card:   #101012;
+    --bg-deep:   #000000;
+    --bg-frame:  #08080a;
+    --ink:       #ffffff;
+    --ink-soft:  #c0c0c0;
+    --ink-faint: #a8a8a8;
+    --rule:      rgba(255, 255, 255, .16);
+    --rule-soft: rgba(255, 255, 255, .08);
+    --glass:        rgba(255, 255, 255, .11);
+    --glass-strong: rgba(255, 255, 255, .17);
+    --glass-edge:   rgba(255, 255, 255, .13);
+    --glass-blur:   18px;
+    --void:      #000000;
+    --void-ink:  var(--ink);
+    --void-edge: rgba(255, 255, 255, .16);
+    --accent-ink:  var(--accent);
+    --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+    --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
+    --ok:          #4ade80;
+    --ok-weak:     color-mix(in srgb, #4ade80 14%, var(--bg-card));
+    --warn:        #fbbf24;
+    --warn-weak:   color-mix(in srgb, #fbbf24 14%, var(--bg-card));
+    --danger:      #f87171;
+    --danger-weak: color-mix(in srgb, #f87171 14%, var(--bg-card));
+    --info:        color-mix(in srgb, var(--sea) 80%, #ffffff);
+    --info-weak:   color-mix(in srgb, var(--info) 14%, var(--bg-card));
+    --focus:       var(--accent);
+    --label-face:  var(--font-body);
+    --label-size:  11.5px;
+    --label-space: .1em;
+    --type-halo:   0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
+    --surface-2:   color-mix(in srgb, var(--ink) 6%, var(--bg-card));
+    --shadow-pop:  0 18px 40px rgba(0, 0, 0, .62);
+    --plate-veil:  linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .93));
   }
   html:not([data-theme]) body { background: var(--bg); }
 }
 
+/* The Kill Switch Rule (DESIGN.md). Nothing escapes it, and no motion is
+   authored in JavaScript, because JavaScript motion escapes it. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 /* ---------- table of contents (task 2166) ----------
    Section banners in file order — grep "----------" to jump:
      tokens + dark theme (ABOVE — the theming contract; never move/rename)
@@ -158,12 +349,12 @@ html {
 
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
+  scrollbar-color: var(--rule) transparent;
 }
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
-  background: var(--border-strong);
+  background: var(--rule);
   border-radius: 5px;
   border: 2px solid transparent;
   background-clip: content-box;
@@ -182,33 +373,45 @@ body {
 }
 
 a {
-  color: var(--accent-text);
+  color: var(--accent-ink);
   text-decoration: none;
 }
-a:hover { text-decoration: underline; text-underline-offset: 2px; }
+a:hover { text-decoration: underline; text-underline-offset: 3px; }
 
 code, kbd, pre {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-family: var(--font-mono);
   font-size: 0.92em;
 }
 
+/* The label voice. Mono in light, the body face in dark — take the token, never
+   the family (DESIGN.md, The label face flips). */
+.lbl {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+  line-height: 1.2;
+}
+
+/* Every number the ledger produced is tabular, so a live refresh cannot reflow
+   the composition around it. */
+.num, .tabular { font-variant-numeric: tabular-nums; }
+
 select, input[type="text"], input[type="search"], textarea {
   font-family: var(--font-body);
   font-size: 14px;
   color: var(--ink);
-  background: var(--surface);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
-  padding: 6px 10px;
+  background: none;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  min-height: 30px;
+  padding: 5px 12px;
 }
+select:hover, input[type="text"]:hover, input[type="search"]:hover { border-color: var(--ink-faint); }
+textarea { border-radius: var(--radius-sm); }
 select:disabled { opacity: 0.55; cursor: not-allowed; }
-select option { background: var(--surface); color: var(--ink); }
-
-:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
+select option { background: var(--bg-card); color: var(--ink); }
 
 button { font-family: var(--font-body); }
 
@@ -221,48 +424,118 @@ button { font-family: var(--font-body); }
   white-space: nowrap;
 }
 
-/* ---------- app shell ---------- */
+/* ---------- app shell ----------
+   v3 "the glass hall" (the owner's pick, 2026-08-30): the sidebar is the 64px
+   rail at EVERY width, opening on hover or focus-within over the page; the
+   topbar and sidebar are glass; content sits on --bg-card panels at the full
+   --radius with tone doing the separation and no hairline edge.
+
+   Two rules the round found the hard way and this section obeys:
+   - a rail label must LEAVE the layout, not fade to opacity 0. A faded label
+     still occupies width and pushes its own icon out of the 64px strip.
+   - the rail's breakpoints are composition, so they live here on the shell
+     rules and never in the token tier: a page that declares --sidebar-w on
+     `body` would beat an inherited :root value and silently defeat the query. */
 
 .app { min-height: 100vh; }
 
+/* The ground and its veil. Both are tokens; the hall's plate is not shot yet,
+   so both resolve to none in both modes and the shell is a complete composition
+   without one. Adding one later is a token change, not a re-layout. */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: var(--plate);
+  background-size: cover;
+  background-position: center;
+  mix-blend-mode: var(--plate-blend);
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: var(--plate-veil);
+}
+
 .app-sidebar {
   position: fixed;
   inset: 0 auto 0 0;
-  width: var(--sidebar-w);
+  width: var(--sidebar-w-rail);
   z-index: var(--z-sidebar);
   display: flex;
   flex-direction: column;
-  background: var(--surface);
-  border-right: 1px solid var(--border);
+  background: var(--glass);
+  border-right: 1px solid var(--glass-edge);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
   overflow: hidden;
 }
+/* The rail opens over the content — no transition, because the world animates
+   transform and filter only. `:focus-within` is what makes it keyboard-reachable
+   at all; without it a tab into the rail lands on unlabelled icons. */
+.app-sidebar:hover,
+.app-sidebar:focus-within { width: var(--rail-open); }
 
 .app-sidebar__brand {
   display: flex;
   align-items: center;
+  justify-content: center;
   min-height: var(--topbar-h);
-  padding: 0 16px;
-  border-bottom: 1px solid var(--border);
+  padding: 0;
+  border-bottom: 1px solid var(--glass-edge);
   flex-shrink: 0;
 }
+/* The skip link — shell.js renders it as the first focusable thing in the
+   document and points it at a focusable, never-ringed <main>. Off-screen until
+   focused, then a pill in the top-left over everything. */
+.skip {
+  position: absolute;
+  left: -9999px;
+  top: 8px;
+  z-index: 200;
+  background: var(--bg-card);
+  color: var(--ink);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  padding: 11px 18px;
+  font-size: 13.5px;
+  text-decoration: none;
+}
+.skip:focus { left: 12px; }
+main:focus { outline: none; }
+
 .brand-mark {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
+  /* The label leaves the layout in the closed rail, so the dot alone would be
+     an 11px target — the mark still has to clear the 24px control floor. */
+  min-width: 32px;
+  min-height: 32px;
   font-family: var(--font-display);
-  font-weight: 700;
+  font-weight: 500;
   font-size: 15px;
+  letter-spacing: -0.015em;
   color: var(--ink);
-  min-width: 0;
 }
 .brand-mark:hover { text-decoration: none; }
+/* An outlined dot, not a filled one: the accent lights only what is pressable
+   or live, and a wordmark is neither. */
 .brand-mark__dot {
-  width: 10px; height: 10px;
-  border-radius: 3px;
-  background: var(--accent);
+  width: 11px; height: 11px;
+  border-radius: 50%;
+  border: 1px solid var(--ink);
+  background: none;
   flex-shrink: 0;
 }
 .brand-mark__name {
+  display: none;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -270,7 +543,7 @@ button { font-family: var(--font-body); }
 
 .app-sidebar__nav {
   flex: 1;
-  padding: 12px 10px;
+  padding: 14px 0 22px;
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -290,28 +563,39 @@ button { font-family: var(--font-body); }
 }
 .nav-group { display: flex; flex-direction: column; gap: 2px; }
 .nav-group + .nav-group { margin-top: 14px; }
+/* task 1003303: the items live in their own wrapper so the group head can carry
+   aria-controls (the frozen markup had aria-expanded pointing at nothing, which
+   fails the disclosure rule). The class deliberately does NOT start with
+   "nav-group" — tests/hall_nav.mjs splits the sidebar on that string to find
+   groups, and a wrapper that matched it would parse as a phantom sixth group. */
+.nav-items { display: flex; flex-direction: column; gap: 2px; }
 .nav-group__head {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--ink-faint);
-  padding: 4px 10px 2px;
-}
-.nav-group--collapsible .nav-group__head {
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
+  min-height: 26px;
+  padding: 8px 22px 4px;
+  text-align: left;
   background: none;
   border: none;
   cursor: pointer;
 }
-.nav-group--collapsible .nav-group__head:hover { color: var(--ink-soft); }
+.nav-group__head-label {
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
+.nav-group--collapsible .nav-group__head:hover .nav-group__head-label { color: var(--ink-soft); }
 .nav-group__chevron {
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 6px;
   flex-shrink: 0;
+  stroke: currentColor;
+  color: var(--ink-faint);
   transition: transform 0.15s ease;
 }
 .nav-group--collapsed .nav-group__chevron { transform: rotate(-90deg); }
@@ -321,42 +605,47 @@ button { font-family: var(--font-body); }
   position: relative;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
-  height: 36px;
-  padding: 0 10px;
+  min-height: 40px;
+  margin: 0 8px;
+  padding: 0;
   border-radius: var(--radius-sm);
   color: var(--ink-soft);
-  font-weight: 500;
   font-size: 14px;
+  text-transform: lowercase;
   white-space: nowrap;
 }
-.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
-.nav-item--active {
-  background: var(--accent-weak);
-  color: var(--accent-text);
-}
+.nav-item:hover { background: var(--glass); color: var(--ink); text-decoration: none; }
+.nav-item--active { background: var(--glass-strong); color: var(--ink); }
+/* The current item is the one live thing in the rail, so it takes the accent —
+   the lifecycle rail's lit-step grammar, one 2px bar on the leading edge. */
 .nav-item--active::before {
   content: "";
   position: absolute;
-  left: -10px; top: 7px; bottom: 7px;
-  width: 3px;
-  border-radius: 0 2px 2px 0;
+  left: 0; top: 8px; bottom: 8px;
+  width: 2px;
+  border-radius: 1px;
   background: var(--accent);
 }
-.nav-icon { width: 18px; height: 18px; flex-shrink: 0; }
+.nav-item__label { display: none; font-size: 14px; }
+.nav-icon { width: 16px; height: 16px; flex-shrink: 0; }
 
 .app-sidebar__foot {
-  padding: 12px 10px 14px;
-  border-top: 1px solid var(--border);
+  padding: 10px 0;
+  border-top: 1px solid var(--glass-edge);
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 8px;
   flex-shrink: 0;
 }
 .shell-user {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
+  min-height: 36px;
   padding: 4px 6px;
   min-width: 0;
   /* task 1831: the chip is now an <a> to /settings — strip link chrome, keep the
@@ -366,15 +655,15 @@ button { font-family: var(--font-body); }
   border-radius: var(--radius-sm);
   cursor: pointer;
 }
-.shell-user:hover { background: var(--surface-2); text-decoration: none; }
-.shell-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.shell-user:hover { background: var(--glass); text-decoration: none; }
 .shell-user__avatar {
-  width: 30px; height: 30px;
+  width: 26px; height: 26px;
   border-radius: 50%;
-  background: var(--accent-weak);
-  color: var(--accent-text);
-  font-size: 12px;
-  font-weight: 600;
+  background: var(--surface-2);
+  border: 1px solid var(--rule);
+  color: var(--ink-soft);
+  font-size: 11px;
+  font-weight: 500;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -382,43 +671,75 @@ button { font-family: var(--font-body); }
   flex-shrink: 0;
 }
 .shell-user__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
-.shell-user__meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.shell-user__meta { display: none; flex-direction: column; min-width: 0; line-height: 1.3; }
 .shell-user__name {
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 13.5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.shell-user__rank { font-size: 11.5px; color: var(--ink-faint); }
+.shell-user__rank {
+  font-family: var(--label-face);
+  font-size: 10.5px;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
+  color: var(--ink-faint);
+}
 .shell-signin,
 .shell-home,
 .shell-signout {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 10px;
-  height: 34px;
-  padding: 0 10px;
+  min-height: 32px;
+  padding: 0 8px;
   border-radius: var(--radius-sm);
   font-size: 13.5px;
-  font-weight: 500;
-  color: var(--ink-soft);
+  color: var(--ink-faint);
 }
 .shell-home { text-decoration: none; }
 .shell-signin {
-  justify-content: center;
   background: var(--accent);
-  color: #fff;
+  color: var(--accent-on);
+  border-radius: var(--radius-pill);
+  font-weight: 500;
+  min-height: 34px;
 }
-.shell-signin:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }
+.shell-signin:hover { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
 .shell-home:hover,
-.shell-signout:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
+.shell-signout:hover { background: var(--glass); color: var(--ink); text-decoration: none; }
+
+/* ---- the rail, open. Labels LEAVE the layout when closed and come back here;
+   the icon strip is what stays either way. ---- */
+.app-sidebar:hover .brand-mark__name,
+.app-sidebar:focus-within .brand-mark__name,
+.app-sidebar:hover .nav-item__label,
+.app-sidebar:focus-within .nav-item__label,
+.app-sidebar:hover .shell-user__meta,
+.app-sidebar:focus-within .shell-user__meta { display: block; }
+.app-sidebar:hover .nav-group--collapsible .nav-group__head,
+.app-sidebar:focus-within .nav-group--collapsible .nav-group__head { display: flex; }
+.app-sidebar:hover .app-sidebar__brand,
+.app-sidebar:focus-within .app-sidebar__brand { justify-content: flex-start; padding: 0 22px; }
+.app-sidebar:hover .nav-item,
+.app-sidebar:focus-within .nav-item { justify-content: flex-start; padding: 0 12px; }
+.app-sidebar:hover .app-sidebar__foot,
+.app-sidebar:focus-within .app-sidebar__foot { align-items: stretch; padding: 12px 16px; }
+.app-sidebar:hover .shell-user,
+.app-sidebar:focus-within .shell-user { justify-content: flex-start; }
+.app-sidebar:hover .shell-home,
+.app-sidebar:focus-within .shell-home,
+.app-sidebar:hover .shell-signout,
+.app-sidebar:focus-within .shell-signout { justify-content: flex-start; padding: 0 10px; }
 
 .app-body {
-  margin-left: var(--sidebar-w);
+  margin-left: var(--sidebar-w-rail);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  position: relative;
+  z-index: 1;
 }
 
 .app-topbar {
@@ -427,29 +748,36 @@ button { font-family: var(--font-body); }
   z-index: var(--z-topbar);
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 14px;
   height: var(--topbar-h);
-  padding: 0 24px;
-  background: color-mix(in srgb, var(--surface) 88%, transparent);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--border);
+  padding: 0 22px;
+  background: var(--glass);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border-bottom: 1px solid var(--glass-edge);
 }
+/* Sentence case, not a mono label: v3's own divergence, picked with it. */
 .topbar-title {
   margin: 0;
   font-family: var(--font-display);
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-weight: 300;
+  font-size: 19px;
+  letter-spacing: -0.025em;
+  text-transform: lowercase;
+  color: var(--ink);
 }
 .topbar-side {
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   min-width: 0;
 }
 .topbar-note {
-  font-size: 13px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
   white-space: nowrap;
   overflow: hidden;
@@ -461,17 +789,19 @@ button { font-family: var(--font-body); }
   display: flex;
   align-items: baseline;
   gap: 12px;
-  padding: 10px 24px;
+  padding: 10px 22px;
   font-size: 13px;
   color: var(--warn);
   background: var(--warn-weak);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--rule-soft);
 }
 .denied-notice code {
   font-size: 12px;
 }
 .denied-notice__close {
   margin-left: auto;
+  min-width: 24px;
+  min-height: 24px;
   border: 0;
   background: none;
   color: inherit;
@@ -483,31 +813,32 @@ button { font-family: var(--font-body); }
   display: none;
   align-items: center;
   justify-content: center;
-  width: 34px; height: 34px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  width: 32px; height: 32px;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-soft);
   cursor: pointer;
   padding: 0;
 }
-.topbar-menu svg { width: 18px; height: 18px; }
+.topbar-menu:hover { color: var(--ink); }
+.topbar-menu svg { width: 16px; height: 16px; }
 
 .theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px; height: 32px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-soft);
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
 }
-.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
-.theme-toggle svg { width: 17px; height: 17px; }
+.theme-toggle:hover { color: var(--ink); }
+.theme-toggle svg { width: 16px; height: 16px; }
 
 /* task 1475: the accessibility zoom control — sibling of the theme toggle.
    Widens to fit the "125%"/"150%" label when zoom is active. */
@@ -518,24 +849,24 @@ button { font-family: var(--font-body); }
   gap: 4px;
   min-width: 32px; height: 32px;
   padding: 0 8px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-soft);
   cursor: pointer;
   flex-shrink: 0;
 }
-.zoom-toggle:hover { background: var(--surface-2); color: var(--ink); }
-.zoom-toggle svg { width: 17px; height: 17px; }
-/* Active (zoomed-in) state reads as "on" with the instance accent. */
+.zoom-toggle:hover { color: var(--ink); }
+.zoom-toggle svg { width: 16px; height: 16px; }
+/* Active (zoomed-in) state reads as "on" — the accent, because a live control
+   is exactly what the accent is for. */
 .zoom-toggle--on {
-  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
-  background: var(--accent-weak);
-  color: var(--accent-text);
+  background: var(--accent-tint);
+  color: var(--accent-ink);
 }
 .zoom-toggle__pct {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
@@ -544,15 +875,15 @@ button { font-family: var(--font-body); }
   width: 100%;
   max-width: calc(var(--content-max) + 64px);
   margin: 0 auto;
-  padding: 24px 32px 64px;
+  padding: 26px 22px 108px;
   flex: 1;
 }
 
-.app-views .view > .view-zone + .view-zone { margin-top: var(--space-4); }
+.app-views .view > .view-zone + .view-zone { margin-top: var(--sp-md); }
 .view-zone--band {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space-4);
+  gap: var(--sp-md);
   align-items: start;
 }
 .view-zone--band > .scroll { margin: 0; }
@@ -564,11 +895,13 @@ button { font-family: var(--font-body); }
   gap: 12px;
   padding: 18px 4px 0;
   margin-top: 24px;
-  border-top: 1px solid var(--border);
+  border-top: 1px solid var(--rule-soft);
   font-size: 12.5px;
   color: var(--ink-faint);
 }
-.app-foot a { color: var(--ink-faint); }
+/* 3px of vertical padding so a link in a row with no rhythm of its own still
+   clears the 24px control floor (DESIGN.md §The footer). */
+.app-foot a { color: var(--ink-faint); display: inline-block; padding: 3px 0; min-height: 24px; }
 .app-foot a:hover { color: var(--ink); }
 .app-foot span { margin-right: auto; }
 
@@ -576,54 +909,67 @@ button { font-family: var(--font-body); }
   position: fixed;
   inset: 0;
   z-index: var(--z-scrim);
-  background: color-mix(in srgb, var(--ink) 40%, transparent);
+  background: rgba(0, 0, 0, .55);
 }
 
-/* ---------- responsive shell (scope §10) ---------- */
-
-@media (max-width: 1024px) {
-  .app-sidebar { width: var(--sidebar-w-rail); }
-  .app-body { margin-left: var(--sidebar-w-rail); }
-  .brand-mark__name,
-  .nav-item__label,
-  .nav-group__head,
-  .shell-user__meta { display: none; }
-  .nav-item, .shell-home, .shell-signout { justify-content: center; padding: 0; }
-  .nav-item--active::before { left: -6px; }
-  .shell-user { justify-content: center; padding: 2px 0; }
-  .shell-signin { font-size: 0; padding: 0; height: 34px; }
-  .shell-signin::after { content: "→"; font-size: 15px; }
+/* Focus: the world's two-tone ring — a 2px accent-derived outline at 3px offset
+   inside an 8px --bg halo, so the indicator keeps its own edge over whatever it
+   lands on (a bare outline measured 1.1:1 over the light bar). The rail's items
+   ring inside themselves instead, or the halo would spill out of the 64px strip. */
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
+  box-shadow: 0 0 0 8px var(--bg);
+  border-radius: var(--radius-sm);
 }
+.nav-item:focus-visible,
+.shell-user:focus-visible,
+.shell-home:focus-visible,
+.shell-signout:focus-visible {
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+/* ---------- responsive shell (scope §10) ----------
+   The rail holds at every width (v3), so there is no 1024px collapse any more.
+   What is left is the phone: under 768 the rail becomes the drawer shell.js
+   already owns, and the hamburger appears to open it. */
 
 @media (max-width: 768px) {
   .app-sidebar {
-    width: var(--sidebar-w);
+    width: var(--rail-open);
     transform: translateX(-100%);
     transition: transform 160ms ease;
     z-index: var(--z-drawer);
   }
+  /* The drawer is the rail already open — the hover expansion is off, because
+     there is no hover on a phone and a drawer that needed one could not open. */
+  .app-sidebar:hover,
+  .app-sidebar:focus-within { width: var(--rail-open); }
   html.drawer-open .app-sidebar { transform: translateX(0); box-shadow: var(--shadow-pop); }
   .app-body { margin-left: 0; }
-  .brand-mark__name, .nav-item__label, .nav-group__head, .shell-user__meta { display: block; }
-  .nav-item, .shell-home, .shell-signout { justify-content: flex-start; padding: 0 10px; }
+  .brand-mark__name, .nav-item__label, .shell-user__meta { display: block; }
+  .nav-group--collapsible .nav-group__head { display: flex; }
+  .app-sidebar__brand { justify-content: flex-start; padding: 0 22px; }
+  .nav-item, .shell-home, .shell-signout { justify-content: flex-start; padding: 0 12px; }
+  .app-sidebar__foot { align-items: stretch; padding: 12px 16px; }
   .shell-user { justify-content: flex-start; }
-  .shell-signin { font-size: 13.5px; padding: 0 10px; }
-  .shell-signin::after { content: none; }
   .topbar-menu { display: flex; }
   .topbar-note { display: none; }
-  .app-content { padding: 16px 16px 48px; }
+  .app-content { padding: 18px 14px 48px; }
   .view-zone--band { grid-template-columns: 1fr; }
 }
 
 @media (max-width: 480px) {
-  .app-content { padding: 12px 10px 40px; }
+  .app-content { padding: 14px 12px 40px; }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
-}
-
-/* ---------- cards (the .scroll legacy name is load-bearing) ---------- */
+/* ---------- cards (the .scroll legacy name is load-bearing) ----------
+   v3's panels: --bg-card at the full --radius, with TONE doing the separation
+   and no hairline edge. The world's "hairlines, not containers" rule is a
+   poster's rule; the owner's pick answers the container question for an
+   application surface with yes, and the compromise the pick makes is that a
+   panel is a tone, never a drawn box and never a shadow. */
 
 /* The three sanctioned card levels (task 2179). Anything that looks like a card
    is one of these — a fourth variant is a design decision, not a local override:
@@ -631,11 +977,11 @@ button { font-family: var(--font-body); }
      .scroll--quiet  secondary — a card INSIDE a card, or supporting detail
      .scroll--bare   none      — layout-only, for stat rows and grids          */
 .scroll {
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--bg-card);
+  border: 1px solid transparent;
   border-radius: var(--radius);
-  padding: var(--space-4);
-  margin: 0 0 var(--space-4);
+  padding: var(--sp-md);
+  margin: 0 0 var(--sp-md);
   /* anchor jumps must clear the 56px sticky top bar */
   scroll-margin-top: calc(var(--topbar-h) + 16px);
 }
@@ -646,88 +992,114 @@ button { font-family: var(--font-body); }
   border-radius: 0;
   padding: 0;
 }
-/* Secondary level: recedes against a primary card via surface-2 and a quieter,
-   smaller header. Use for supporting detail — not to fit more onto Home. */
+/* Secondary level: a card inside a card recedes by tone, one step further from
+   the ground than its parent. Use for supporting detail — not to fit more onto
+   Home. */
 .scroll--quiet {
   background: var(--surface-2);
-  padding: var(--space-3);
+  padding: var(--sp-sm);
 }
 .scroll--quiet > .scroll__h {
-  font-size: 13.5px;
+  font-size: 14px;
   color: var(--ink-soft);
 }
 
+/* Section headings take the display voice in sentence case — v3's own
+   divergence from the mono label, picked with it. */
 .scroll__h {
-  margin: 0 0 6px;
+  margin: 0 0 8px;
   font-family: var(--font-display);
-  font-size: 15px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-weight: 300;
+  font-size: 21px;
+  line-height: 1.15;
+  letter-spacing: -0.03em;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
 }
 .scroll__lede {
   margin: 0 0 14px;
   font-size: 13.5px;
   color: var(--ink-soft);
-  max-width: 68ch;
+  max-width: var(--measure);
 }
 .card-foot {
-  margin: 12px 0 0;
+  margin: 14px 0 0;
   font-size: 13px;
 }
 
 .pill-link,
 #welcome-reopen a {
-  display: inline-block;
-  font-size: 12.5px;
-  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  font-size: 13px;
+  text-transform: lowercase;
   color: var(--ink-soft);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  padding: 4px 12px;
+  background: none;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  padding: 0 12px;
 }
 #welcome-reopen { margin: 0; }
-.pill-link:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
+.pill-link:hover { color: var(--ink); text-decoration: none; border-color: var(--ink-faint); }
 
-/* ---------- stat tiles (Home) ---------- */
+/* ---------- stat tiles (Home) ----------
+   v3's signature: ONE glass band of figures divided by vertical hairlines, the
+   owner's dark reference exactly, rather than four separate objects. The figure
+   is the display face at 300 with tabular numerals — every number the ledger
+   produced holds its column when it refreshes (DESIGN.md, The Tabular Rule). */
 
 .stat-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
+  gap: 0;
+  background: var(--glass);
+  border: 1px solid var(--glass-edge);
+  border-radius: var(--radius);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  overflow: hidden;
 }
 .stat-tile {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 18px;
+  background: none;
+  border: 0;
+  border-left: 1px solid var(--glass-edge);
+  border-radius: 0;
+  padding: 20px 22px;
   min-height: 88px;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 2px;
+  gap: 8px;
 }
+.stat-tile:first-child { border-left: 0; }
 .stat-tile__label {
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
 }
 .stat-tile__num {
-  font-size: 26px;
-  font-weight: 650;
-  letter-spacing: -0.02em;
+  font-family: var(--font-display);
+  font-size: clamp(26px, 2.6vw, 34px);
+  font-weight: 300;
+  letter-spacing: -0.035em;
   font-variant-numeric: tabular-nums;
-  line-height: 1.15;
+  line-height: 1;
+  color: var(--ink);
+  text-shadow: var(--type-halo);
 }
-.stat-tile__num--badge { font-size: 15px; }
-.stat-tile__sub { font-size: 12px; color: var(--ink-faint); }
+.stat-tile__num--badge { font-size: 15px; letter-spacing: -0.02em; }
+.stat-tile__sub { font-size: 12.5px; color: var(--ink-faint); }
 
 @media (max-width: 480px) {
-  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
-  .stat-tile { padding: 12px 14px; min-height: 72px; }
-  .stat-tile__num { font-size: 21px; }
+  .stat-row { grid-template-columns: 1fr 1fr; }
+  .stat-tile { padding: 14px 16px; min-height: 72px; gap: 6px; }
+  .stat-tile__num { font-size: clamp(21px, 6.6vw, 28px); }
+  /* On two columns the band still divides, but now on both axes. */
+  .stat-tile:nth-child(odd) { border-left: 0; }
+  .stat-tile:nth-child(n + 3) { border-top: 1px solid var(--glass-edge); }
 }
 
 /* ---------- Standing layout: section rail + panels ---------- */
@@ -746,15 +1118,28 @@ button { font-family: var(--font-body); }
   gap: 2px;
 }
 .rail-link {
-  display: block;
-  padding: 6px 10px;
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 10px;
   border-radius: var(--radius-sm);
   font-size: 13px;
-  font-weight: 500;
+  text-transform: lowercase;
   color: var(--ink-soft);
+  position: relative;
+}
+.rail-link:hover { background: var(--glass); color: var(--ink); text-decoration: none; }
+/* The current section is live, so it takes the accent — the same lit-step
+   grammar the rail’s nav items use. */
+.rail-link--active { background: var(--glass-strong); color: var(--ink); }
+.rail-link--active::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 6px; bottom: 6px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--accent);
 }
-.rail-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
-.rail-link--active { background: var(--accent-weak); color: var(--accent-text); }
 
 /* task 2174: a Standing rail section — the scroll-spy anchor holding one or
    more cards. The extra air between groups is what makes the grouping legible
@@ -772,11 +1157,11 @@ button { font-family: var(--font-body); }
     overflow-x: auto;
     gap: 6px;
     padding: 8px 0;
-    background: color-mix(in srgb, var(--bg) 92%, transparent);
-    backdrop-filter: blur(6px);
+    background: var(--bg);
   }
-  .rail-link { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; }
-  .rail-link--active { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
+  .rail-link { white-space: nowrap; border: 1px solid var(--rule); background: none; border-radius: var(--radius-pill); min-height: 26px; padding: 0 12px; font-size: 12.5px; }
+  .rail-link--active { border-color: var(--accent); background: none; }
+  .rail-link--active::before { content: none; }
 }
 
 /* ---------- legacy page chrome compat (pre-shell pages) ---------- */
@@ -871,28 +1256,30 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .ledger th {
   position: sticky;
   top: var(--topbar-h);
-  background: var(--surface);
+  background: var(--bg-card);
   text-align: left;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  font-weight: 400;
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
-  padding: 8px 12px;
-  border-bottom: 1px solid var(--border-strong);
+  padding: 0 12px 8px 0;
+  border-bottom: 1px solid var(--rule);
   z-index: 1;
 }
 .ledger td {
-  padding: 12px;
+  padding: 14px 12px 14px 0;
   border-bottom: 1px solid var(--rule-soft);
   vertical-align: top;
 }
+.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
 .ledger tr:last-child td { border-bottom: none; }
-.ledger tbody tr:hover td { background: var(--surface-2); }
+.ledger tbody tr:hover td { background: var(--glass); }
 /* task 1467: a builder name that links to their profile page reads as plain
    text in the dense leaderboard/roster, revealing itself as a link on hover. */
 .lb-name { color: inherit; }
-.lb-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.lb-name:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
 .ledger__empty {
   color: var(--ink-faint);
   font-size: 13px;
@@ -956,16 +1343,17 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .filter {
   display: flex;
   flex-direction: column;
-  gap: 3px;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  gap: 4px;
+  font-family: var(--label-face);
+  font-size: var(--label-size);
+  letter-spacing: var(--label-space);
+  text-transform: var(--label-case);
   color: var(--ink-faint);
 }
 .filter select {
   min-width: 150px;
-  height: 32px;
+  min-height: 32px;
+  font-family: var(--font-body);
   padding: 4px 8px;
   font-size: 13.5px;
   text-transform: none;
@@ -976,7 +1364,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
    selects it sits alongside. */
 .filter input[type="search"] {
   min-width: 200px;
-  height: 32px;
+  min-height: 32px;
+  font-family: var(--font-body);
   padding: 4px 8px;
   font-size: 13.5px;
   text-transform: none;
@@ -999,24 +1388,51 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   gap: 12px;
   margin-top: 12px;
 }
-.pager__range { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
+.pager__range { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 
+/* Pill or nothing (DESIGN.md, Shapes). A ghost button is a hairline pill; the
+   one filled shape on a page is the accent door, and only where the action is
+   the live thing. 28px of box plus the row’s own air clears the 24px floor. */
 .btn-ghost {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  height: 30px;
-  padding: 0 12px;
+  min-height: 30px;
+  min-width: 56px;
+  padding: 0 14px;
   font-size: 13px;
-  font-weight: 500;
+  text-transform: lowercase;
   color: var(--ink-soft);
-  background: var(--surface);
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
+  background: none;
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+}
+.btn-ghost:hover:not(:disabled) { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }
+.btn-ghost:disabled { color: var(--ink-faint); border-color: var(--rule-soft); cursor: default; }
+
+/* The accent door: the page’s one primary action. --accent-on is the dark ink
+   that goes on the salmon; white on it fails AA and is banned. */
+.btn-accent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  min-width: 74px;
+  padding: 0 16px;
+  font-size: 13.5px;
+  font-weight: 500;
+  text-transform: lowercase;
+  color: var(--accent-on);
+  background: var(--accent);
+  border: 0;
+  border-radius: var(--radius-pill);
   cursor: pointer;
 }
-.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); text-decoration: none; }
-.btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-accent:hover:not(:disabled) { background: var(--accent-lift); color: var(--accent-on); text-decoration: none; }
+.btn-accent:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: default; }
 
 /* ---------- profile / standing ---------- */
 
@@ -1139,7 +1555,7 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 .conn-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
 .conn-req {
   display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
-  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1);
+  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
 }
 .conn-req__note { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--ink-soft); }
 .conn-req__state { font-size: 13px; color: var(--ink-faint); }
@@ -1429,20 +1845,29 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 
 .setup { margin-top: 12px; }
 .setup__intro { font-size: 13px; color: var(--ink-soft); }
-.setup__toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 12px; }
+.setup__toggle { display: flex; border: 0; border-bottom: 1px solid var(--rule); margin: 8px 0 12px; flex-wrap: wrap; }
+/* An open tab is the live thing in the strip, so it is what the accent lights:
+   a 2px underline sitting on the strip’s own hairline. */
 .setup__tab {
-  border: none;
-  background: var(--surface);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 8px;
+  min-height: 38px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  background: none;
   color: var(--ink-soft);
-  font-size: 13px;
-  font-weight: 500;
-  padding: 6px 14px;
+  font-size: 14px;
+  text-transform: lowercase;
+  padding: 0 16px;
   cursor: pointer;
 }
-.setup__tab + .setup__tab { border-left: 1px solid var(--border-strong); }
-.setup__tab[aria-selected="true"] { background: var(--accent-weak); color: var(--accent-text); }
-.setup__tab-tag { font-size: 10.5px; margin-left: 6px; color: var(--ink-faint); }
-.setup__tab-tag--rec { color: var(--ok); font-weight: 600; }
+.setup__tab:first-child { padding-left: 0; }
+.setup__tab:hover { color: var(--ink); }
+.setup__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
+.setup__tab-tag { font-family: var(--label-face); font-size: 10.5px; letter-spacing: var(--label-space); text-transform: var(--label-case); margin-left: 6px; color: var(--ink-faint); }
+.setup__tab-tag--rec { color: var(--ok); }
 .setup__pane { display: none; }
 .setup[data-config="desktop"] .setup__pane--desktop { display: block; }
 .setup[data-config="online"] .setup__pane--online { display: block; }
@@ -1537,40 +1962,50 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 
 /* ---------- landing (signed-out) ---------- */
 
-.landing { max-width: 560px; }
+.landing { max-width: var(--measure); }
 .landing__lede { font-size: 14px; color: var(--ink-soft); }
+/* A link inside landing prose is still a control: 3px of vertical padding is
+   what clears the 24px floor in a line that has no rhythm of its own
+   (DESIGN.md §The footer applies the same rule to its links). */
+.landing p a:not(.landing__btn) {
+  display: inline-block;
+  padding: 3px 0;
+  min-height: 24px;
+  line-height: 18px;
+}
 .landing__cta { margin: 14px 0; }
 .landing__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
-  padding: 0 18px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--accent);
+  min-height: 46px;
+  padding: 0 22px;
+  border-radius: var(--radius-pill);
+  border: 0;
   background: var(--accent);
-  color: #fff;
-  font-size: 13.5px;
-  font-weight: 600;
+  color: var(--accent-on);
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: lowercase;
   cursor: pointer;
 }
-.landing__btn:hover { background: var(--accent-deep); text-decoration: none; color: #fff; }
+.landing__btn:hover { background: var(--accent-lift); text-decoration: none; color: var(--accent-on); }
 .landing__note { font-size: 12.5px; color: var(--ink-faint); }
 .landing__error { color: var(--danger); }
 .landing__error-h { color: var(--danger); margin: 0 0 4px; font-size: 14px; }
 .landing__request {
-  border: 1px solid var(--border);
+  border: 0;
   border-radius: var(--radius);
   background: var(--surface-2);
-  padding: 16px 18px;
+  padding: 18px 20px;
   margin: 16px 0;
 }
-.landing__request-h { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
+.landing__request-h { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 300; letter-spacing: -0.025em; }
 .landing__request-lede { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
 .landing__request-lede--soft { color: var(--ink-faint); }
 .landing__form { display: flex; flex-direction: column; gap: 10px; }
-.landing__field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
-.landing__field input { background: var(--surface); }
+.landing__field { display: flex; flex-direction: column; gap: 4px; font-family: var(--label-face); font-size: var(--label-size); letter-spacing: var(--label-space); text-transform: var(--label-case); color: var(--ink-faint); }
+.landing__field input { font-family: var(--font-body); font-size: 14px; text-transform: none; letter-spacing: normal; }
 .landing__req-mark { color: var(--danger); }
 .landing__opt { color: var(--ink-faint); font-weight: 400; }
 .landing__form-hint { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
@@ -1748,10 +2183,10 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   transform: translate(-50%, 12px);
   z-index: 100;
   background: var(--ink);
-  color: var(--bg-card);
+  color: var(--bg);
   font-size: 13.5px;
-  padding: 10px 18px;
-  border-radius: var(--radius);
+  padding: 11px 20px;
+  border-radius: var(--radius-pill);
   box-shadow: var(--shadow-pop);
   opacity: 0;
   visibility: hidden;
@@ -1782,7 +2217,7 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   position: fixed;
   inset: 0;
   z-index: 2000;
-  background: color-mix(in srgb, var(--ink) 45%, transparent);
+  background: rgba(0, 0, 0, .55);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1790,8 +2225,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 }
 .deeplink-card__panel {
   position: relative;
-  background: var(--surface);
-  border: 1px solid var(--border);
+  background: var(--bg-card);
+  border: 1px solid var(--rule);
   border-radius: var(--radius);
   box-shadow: var(--shadow-pop);
   max-width: 560px;
@@ -1804,15 +2239,15 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   position: absolute;
   top: 10px; right: 10px;
   width: 28px; height: 28px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--surface);
+  border: 1px solid var(--rule);
+  border-radius: var(--radius-pill);
+  background: none;
   color: var(--ink-soft);
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
 }
-.deeplink-card__close:hover { background: var(--surface-2); }
+.deeplink-card__close:hover { border-color: var(--ink-faint); color: var(--ink); }
 .deeplink-card__kind {
   font-size: 11px;
   font-weight: 600;
@@ -1821,7 +2256,7 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   color: var(--ink-faint);
   margin: 0 0 4px;
 }
-.deeplink-card__title { font-size: 16px; font-weight: 650; margin: 0 0 8px; }
+.deeplink-card__title { font-family: var(--font-display); font-size: 21px; font-weight: 300; letter-spacing: -0.03em; margin: 0 0 8px; }
 .deeplink-card__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; }
 .deeplink-card__summary { font-size: 13.5px; margin: 0 0 10px; }
 .deeplink-card__note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
@@ -1995,40 +2430,47 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 /* filter-bar disclosure ("Filters" button) + removable active-filter chips */
 .filters__more-count { margin-left: 6px; }
 .filters--overflow {
-  padding: 10px 12px;
-  border: 1px dashed var(--border-strong);
+  padding: 12px 14px;
+  border: 0;
   border-radius: var(--radius-sm);
   background: var(--surface-2);
   margin-bottom: 14px;
 }
 .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
+/* An active filter IS live, so the chip is the one place in a filter bar the
+   accent belongs. */
 .chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 3px 10px;
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  min-height: 26px;
+  padding: 0 12px;
   font-size: 12.5px;
-  color: var(--accent-text);
-  background: var(--accent-weak);
-  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
-  border-radius: 999px;
+  text-transform: lowercase;
+  color: var(--accent-ink);
+  background: var(--accent-tint);
+  border: 0;
+  border-radius: var(--radius-pill);
   cursor: pointer;
 }
-.chip:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); }
+.chip:hover { color: var(--ink); }
 
 /* tab strip — the .setup__tab idiom in the .setup__toggle frame, promoted */
+/* A tab strip is hairlines, not a segmented box: one rule under the row and a
+   2px accent underline on the open tab, the lit-step grammar again. */
 .kit-tabs {
-  display: inline-flex;
+  display: flex;
   max-width: 100%;
   overflow-x: auto;
-  border: 1px solid var(--border-strong);
-  border-radius: var(--radius-sm);
+  border: 0;
+  border-bottom: 1px solid var(--rule);
+  border-radius: 0;
   margin: 0 0 14px;
 }
 .kit-tabs .setup__tab { white-space: nowrap; }
 .kit-tabs .setup__tab .count-pill { margin-left: 6px; }
 
 /* empty state — one short line + at most one action link */
-.empty-state { padding: 6px 0; }
-.empty-state p { margin: 0; font-size: 13px; color: var(--ink-faint); }
+.empty-state { padding: 8px 0; }
+.empty-state p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
 .empty-state__action { display: inline-block; margin-top: 6px; font-size: 13px; }
 
 /* skeleton shimmer — standard-height placeholder rows while data loads, so
@@ -2038,22 +2480,10 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
   width: 60%;
   min-width: 80px;
   height: 12px;
-  border-radius: 6px;
-  background: linear-gradient(90deg,
-    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 25%,
-    color-mix(in srgb, var(--ink) 13%, var(--bg-card)) 45%,
-    color-mix(in srgb, var(--ink) 7%, var(--bg-card)) 65%);
-  background-size: 200% 100%;
-  animation: kit-skel-shimmer 1.2s ease-in-out infinite;
+  border-radius: 2px;
+  background: var(--skeleton);
 }
 .kit-skel-row td { border-bottom: 1px solid var(--rule-soft); }
-@keyframes kit-skel-shimmer {
-  from { background-position: 120% 0; }
-  to   { background-position: -80% 0; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .kit-skel { animation: none; }
-}
 
 /* collapsible card body — the Work-backlog <details> idiom, generalized */
 .kit-collapse__summary {
@@ -2068,11 +2498,8 @@ main [id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }
 /* ---- Home dashboard (task 2169) ---- */
 /* Stat tiles are links now — inherit ink, reveal affordance on hover. */
 a.stat-tile { color: inherit; }
-a.stat-tile:hover {
-  text-decoration: none;
-  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
-  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
-}
+a.stat-tile:hover { text-decoration: none; background: var(--glass); }
+a.stat-tile:hover .stat-tile__sub { color: var(--ink-soft); }
 /* The over-budget "More" row — one quiet line, not a card. */
 .home-more { margin: 0; font-size: 13px; color: var(--ink-soft); }
 
@@ -2096,14 +2523,13 @@ a.stat-tile:hover {
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: 9px 12px;
-  border: 1px solid var(--border);
-  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
+  padding: 10px 14px;
+  border: 0;
   border-radius: var(--radius-sm);
   background: var(--surface-2);
 }
-.next-up__title { font-weight: 600; font-size: 13.5px; color: var(--ink); }
-.next-up__title:hover { color: var(--accent-text); }
+.next-up__title { font-weight: 500; font-size: 13.5px; color: var(--ink); }
+.next-up__title:hover { color: var(--accent-ink); }
 .next-up__meta { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
 .next-up__foot { margin: 0 0 14px; font-size: 13px; }