agentgui 1.0.1117 → 1.0.1118

package/site/app/vendor/anentrypoint-design/247420.css

@@ -34,7 +34,7 @@
   --ink-2:       #333338;
   --ink-3:       #525252; /* WCAG-verified 2026 restyle: npm run a11y caught 4.10:1 at #58585F against --paper-3 (#c6c5c5-equivalent surfaces); #525252 clears 4.54:1 there and 7.81:1 against pure paper */
   --ink-3-dark:  #4D4D52; /* dark theme bg-3 (tier-3 surface) */
-  --paper-3-dark: #9B9B9B; /* dark theme fg-3 (tier-3 text); WCAG-verified: npm run a11y caught 4.41:1 at #999999 against --ink-2 (#333338); #9B9B9B clears 4.52:1 there */
+  --paper-3-dark: #BEBEBE; /* dark theme fg-3 (tier-3 text); #9B9B9B cleared 4.52:1 against --ink-2 but --fg-3 also renders on --bg-3 (--ink-3-dark, #4D4D52, e.g. .chip.tone-dim), where it measured only 3.02:1. #BEBEBE clears 4.52:1 on --ink-3-dark, 6.76:1 on --ink-2, 9.36:1 on --ink. */
 
   /* Lore palette. --acid was the prior electric-lime lead; RESTYLED to a
      neutral near-black accent matching webjsx-toolkit's grayscale --primary
@@ -189,6 +189,16 @@
   --ff-body:     system-ui, sans-serif;
   --ff-mono:     ui-monospace, Menlo, Consolas, monospace;
 
+  /* Weight scale — regular is the default voice for body/UI text everywhere;
+     medium/semibold/bold are reserved for genuine emphasis (active state,
+     unread counts, own-message author, section headers). Never reach for a
+     hardcoded 600/700 in a component rule — use these so the whole surface
+     can be re-tuned in one place instead of drifting per-component. */
+  --fw-regular:  400;
+  --fw-medium:   500;
+  --fw-semibold: 600;
+  --fw-bold:     700;
+
   /* Sub-12px tiers exist ONLY for dense OS/data chrome — taskbar strips,
      session chips, tool-call headers, file-row metadata, ID/stat columns.
      Never use them for body copy or ordinary UI text: at these sizes the
@@ -203,12 +213,24 @@
   --fs-body:     16px;
   --fs-lg:       18px;
   --fs-xl:       21px;
-  --fs-h4:       clamp(19px, 1.8cqi, 24px);
-  --fs-h3:       clamp(22px, 2.4cqi, 30px);
+  --fs-h4:       clamp(24px, 2cqi, 28px);
+  --fs-h3:       clamp(26px, 2.6cqi, 34px);
   --fs-h2:       clamp(28px, 3.6cqi, 44px);
   --fs-h1:       clamp(34px, 5cqi, 64px);
   --fs-hero:     clamp(42px, 7cqi, 96px);
   --fs-mega:     clamp(56px, 11cqi, 168px);
+  /* Bridges the fixed --fs-* ladder (tops out at --fs-xl, 21px) and the fluid
+     heading clamps below it — use for fixed (non-clamping) UI text that needs
+     to sit between --fs-xl and a heading tier, e.g. empty-state icon glyphs. */
+  --fs-2xl:      28px;
+
+  /* Icon size scale — canonical sizes for glyphs/icons across the kit going
+     forward. Existing ad-hoc pixel values (6/7/8/10/12/14/16/18px etc.)
+     don't need to be migrated in this pass; new/updated icon usage should. */
+  --icon-xs: 12px;
+  --icon-sm: 16px;
+  --icon-md: 20px;
+  --icon-lg: 24px;
 
   /* App/chrome typescale: the default heading scale above is tuned for
      marketing/hero layouts (h1 up to 64px). Application chrome — page titles,
@@ -357,6 +379,9 @@
   --z-below:      -1;
   --z-base:        0;
   --z-raised:    100;
+  --z-raised-1:  calc(var(--z-raised) + 1);
+  --z-raised-2:  calc(var(--z-raised) + 2);
+  --z-raised-3:  calc(var(--z-raised) + 3);
   --z-sticky:    200;
   --z-header:    300;
   --z-drawer:    400;
@@ -386,6 +411,17 @@
   --sidebar-width:           220px;
   --sidebar-width-collapsed: 64px;
 
+  /* Canonical breakpoint values — @media can't reference custom properties,
+     so these are documented here (not tokenized) for consistency across
+     responsive.css/responsive2-workspace.css/hero-content.css:
+       - 480px  (max-width) mobile portrait
+       - 768px  (max-width) mobile/tablet boundary, compact nav/sidebar collapse
+       - 768-1024px (min/max-width) tablet landscape band
+       - 900px  (max-width) / 901px (min-width) tablet/desktop layout reflow
+       - 1025px (min-width) desktop
+     Always use these exact values; a near-miss (e.g. 760px, 481px) should be
+     aligned to its canonical neighbour when touched. */
+
   --lh-tall:     1.4;
 
   /* Control size scale — heights for status/topbar/crumb + controls. */
@@ -417,6 +453,9 @@
   --focus-w:           2px;
   --focus-offset:      2px;
   --focus-ring-inset:  inset 0 0 0 var(--focus-w) var(--focus-color);
+
+  /* letterbox background for video/media containers */
+  --media-letterbox:   #000;
 }
 
 /* ============================================================
@@ -519,6 +558,27 @@
   --code-num:     var(--sun);
 }
 
+/* [data-accent="X"] overrides (below) hardcode LIGHT-tuned fills (--acid,
+   --purple, --green) with no dark-theme companion, so data-theme=dark +
+   data-accent=acid/purple/green produced a near-invisible fill against the
+   dark page bg (measured: acid 1.15:1, purple 1.04:1, green 2.98:1 on --ink
+   -- all under the 3:1 non-text UI-fill floor). Same convention as the base
+   --accent retune above: restate the fill as its dark-tuned equivalent so
+   the swatch stays visible, using tones already verified elsewhere in this
+   file (green retune 7.48:1 on --ink, purple-2 retune 6.11:1 on --ink). */
+.ds-247420[data-theme="ink"][data-accent="acid"],
+.ds-247420[data-theme="dark"][data-accent="acid"] {
+  --accent: #BFBFBF; --accent-bright: #BFBFBF; --accent-fg: var(--ink); --accent-ink: var(--paper); --panel-accent: #BFBFBF;
+}
+.ds-247420[data-theme="ink"][data-accent="purple"],
+.ds-247420[data-theme="dark"][data-accent="purple"] {
+  --accent: #C277FF; --accent-bright: #C277FF; --accent-fg: var(--ink); --accent-ink: #C277FF; --panel-accent: #C277FF;
+}
+.ds-247420[data-theme="ink"][data-accent="green"],
+.ds-247420[data-theme="dark"][data-accent="green"] {
+  --accent: #5CBF52; --accent-bright: #5CBF52; --accent-fg: var(--ink); --accent-ink: #5CBF52; --panel-accent: #5CBF52;
+}
+
 /* Restores the pre-existing (weaker) dark-theme selection tint after the
    light-theme-only bump in app-shell.css's base ::selection rule. */
 .ds-247420[data-theme="ink"] ::selection,
@@ -718,8 +778,20 @@
 
 /* Type-scale modifier — opt-in body/lg/xl bump for surfaces that want denser
    or larger reading sizes without a custom override. */
-.ds-247420[data-typescale="sm"] { --fs-body: 15px; --fs-lg: 17px; --fs-xl: 20px; }
-.ds-247420[data-typescale="lg"] { --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px; }
+.ds-247420[data-typescale="sm"] {
+  --fs-body: 15px; --fs-lg: 17px; --fs-xl: 20px;
+  --fs-h4: clamp(22px, 1.9cqi, 24px);
+  --fs-h3: clamp(23px, 2.4cqi, 32px);
+  --fs-h2: clamp(26px, 3.4cqi, 41px);
+  --fs-h1: clamp(32px, 4.7cqi, 60px);
+}
+.ds-247420[data-typescale="lg"] {
+  --fs-body: 17px; --fs-lg: 20px; --fs-xl: 24px;
+  --fs-h4: clamp(27px, 2.2cqi, 31px);
+  --fs-h3: clamp(28px, 2.9cqi, 38px);
+  --fs-h2: clamp(31px, 4cqi, 49px);
+  --fs-h1: clamp(38px, 5.6cqi, 71px);
+}
 
 /* Debug grid overlay — 8px mascot grid. Toggle via class on any container. */
 .ds-247420 .with-grid-overlay {
@@ -805,50 +877,41 @@
 }
 
 /* app-shell.css */
-/* ============================================================
-   247420 design system — component sheet
-   shadcn-neutral: system-font display + body + mono, no custom web fonts.
-   Confident hierarchy, centered editorial stack, neutral grayscale accent.
-   Indicator rails over hairlines.
-   ============================================================ */
-
-/* ============================================================
-   Base
-   ============================================================ */
 .ds-247420 * { box-sizing: border-box; }
 .ds-247420, .ds-247420 body { margin: 0; padding: 0; }
 .ds-247420 button, .ds-247420 input, .ds-247420 select, .ds-247420 textarea { font: inherit; }
 
-/* ============================================================
-   Accessibility — Skip Link
-   ============================================================ */
+/* Global reduced-motion safety net: catches any component transition/animation
+   that lacks its own per-file prefers-reduced-motion override (most components
+   already opt out locally; this is the backstop for the rest, e.g.
+   plugins-config.css, catalog-theme.css, sidebar-misc.css, row-print.css,
+   topbar.css, primitives.css, git-status.css, panel-row.css). Scroll-snap
+   carousels handle scroll-behavior themselves and are unaffected. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 *, .ds-247420 *::before, .ds-247420 *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 .ds-247420 .skip-link {
+  --skip-link-preflight-translate-clear: -100%;
   position: absolute;
-  /* -40px alone left the 44px-tall pill (padding + min-height floor below)
-     poking ~4px into every page pre-focus -- measured live via
-     getBoundingClientRect(). The offset must clear the full rendered height,
-     not a guessed constant, so translateY pushes it out by its own box. */
   top: 0;
   left: 0;
-  transform: translateY(-100%);
+  transform: translateY(var(--skip-link-preflight-translate-clear));
   background: var(--accent);
   color: var(--accent-fg);
   padding: var(--space-2) var(--space-3);
   text-decoration: none;
-  /* Must outrank every layer of chrome once focused, or the first Tab press
-     lands on a control hidden behind the sticky header (was z-index:100,
-     which the header alone now matches). */
   z-index: var(--z-top);
   border-radius: var(--r-pill);
   font-weight: 600;
   font-size: var(--fs-sm);
-  /* The skip link is the first thing a keyboard or switch user reaches, so it
-     is the last control that should be hard to hit. Its padding alone rendered
-     it 39px tall -- measured live under coarse-pointer emulation on every kit.
-     Floored unconditionally rather than under a pointer:coarse query, because
-     switch and head-pointer users are not detected as coarse pointers and need
-     the larger target just as much. */
-  min-height: 44px;
+  --skip-link-min-touch-target: 44px;
+  min-height: var(--skip-link-min-touch-target);
   display: inline-flex;
   align-items: center;
 }
@@ -858,23 +921,6 @@
   outline: var(--focus-w) solid var(--focus-color);
   outline-offset: var(--focus-offset);
 }
-/* Visually-hidden but still in the accessibility tree. Emitted by Row() (the
-   rail status word), FilterBar()/FileGrid() (aria-live result counts) and
-   form-primitives' required marker — all of which shipped BEFORE this rule
-   existed anywhere the app shell loads. The only other definitions live in
-   app-surfaces.css (pre-scoped to `.ds-247420`, so it never reaches a kit that
-   does not mount that root) and editor-primitives.css (a separate opt-in
-   <link>), which left every app-shell consumer rendering screen-reader-only
-   text VISIBLY the moment it passed `rail`/`resultCount`.
-   Deliberately NOT `display:none` / `visibility:hidden` / `width:0`: those
-   remove the node from the accessibility tree too, which defeats the entire
-   purpose — the text exists only for AT. The clip + 1px box is what keeps it
-   announced while occupying no visible area.
-   `margin: -1px` is OFF-SCALE ON PURPOSE — it is not rhythm, it is one half of
-   the canonical visually-hidden idiom: the negative margin cancels the 1px box
-   so the clipped element contributes zero layout. Snapping it to a --space-*
-   rung would reintroduce a measurable gap. `clip` is deprecated but retained
-   alongside `clip-path` for older AT/browser pairs that ignore the latter. */
 .ds-247420 .sr-only {
   position: absolute;
   width: 1px;
@@ -888,11 +934,6 @@
   border: 0;
 }
 
-/* .ds-aspect — generic aspect-ratio utility. Native `aspect-ratio` property
-   (broadly supported for years) rather than the padding-bottom hack: no
-   extra wrapper markup, no absolutely-positioned inner layer needed just to
-   fill the box. `--aspect` defaults to 16/9; a caller overrides it inline
-   (e.g. style="--aspect:1/1") or via a ratio-named modifier class below. */
 .ds-247420 .ds-aspect {
   aspect-ratio: var(--aspect, 16 / 9);
   width: 100%;
@@ -912,14 +953,11 @@
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
 }
-/* Light (paper, the default theme) needs a stronger accent share than dark to
-   clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
-   read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
-   in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
-   scoping a value per theme rather than sharing one across both). */
-.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
+.ds-247420 {
+  --selection-tint-paper-share: 46%;
+}
+.ds-247420 ::selection { background: color-mix(in oklab, var(--accent) var(--selection-tint-paper-share), var(--bg-2)); color: var(--fg); }
 
-/* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
 .ds-247420 .app, .ds-247420 .ds-stage {
   container-type: inline-size;
   overflow-x: clip;
@@ -927,29 +965,31 @@
 }
 .ds-247420 .app * { min-width: 0; }
 
-/* Scrollbar treatment, applied once at the root rather than per-component.
-   chat.css already styled its own thread and code blocks this way, but every
-   other scroll container (.app-side-shell, .app-main, .ds-scroll-x,
-   .ds-table-wrap, .ds-live-log) fell back to the UA default -- measured live,
-   4 of 4 containers on dashboard and 7 of 7 on gm_inspector were unstyled while
-   chat's two were not. A default scrollbar reads as a bright seam against a
-   near-black panel in the ink and dark themes, and inconsistently between two
-   panels on the same page. Tokens mean the thumb follows the active theme.
-   Inheriting from the container also covers scrollers added later. */
 .ds-247420 .app, .ds-247420 .ds-stage, .ds-247420 .app *, .ds-247420 .ds-stage * {
   scrollbar-width: thin;
   scrollbar-color: var(--bg-3) transparent;
 }
+/* Firefox gets themed scrollbars via scrollbar-width/-color above; Chrome,
+   Safari, and Edge need the ::-webkit-scrollbar family too, or every
+   scrollable node in the app shell falls back to the raw OS scrollbar and
+   clashes with the dark UI. Same selector scope, same --bg-3 token. */
+.ds-247420 .app::-webkit-scrollbar, .ds-247420 .ds-stage::-webkit-scrollbar, .ds-247420 .app *::-webkit-scrollbar, .ds-247420 .ds-stage *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.ds-247420 .app::-webkit-scrollbar-track, .ds-247420 .ds-stage::-webkit-scrollbar-track, .ds-247420 .app *::-webkit-scrollbar-track, .ds-247420 .ds-stage *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ds-247420 .app::-webkit-scrollbar-thumb, .ds-247420 .ds-stage::-webkit-scrollbar-thumb, .ds-247420 .app *::-webkit-scrollbar-thumb, .ds-247420 .ds-stage *::-webkit-scrollbar-thumb {
+  background: var(--bg-3);
+  border-radius: var(--r-pill, 999px);
+}
 
-/* ============================================================
-   Typography
-   ============================================================ */
 .ds-247420 h1, .ds-247420 .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
 .ds-247420 h2, .ds-247420 .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
 .ds-247420 h3, .ds-247420 .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
 .ds-247420 h4, .ds-247420 .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
 
-/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
 .ds-247420[data-typescale="app"] h1, .ds-247420[data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
 .ds-247420[data-typescale="app"] h2, .ds-247420[data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
 .ds-247420[data-typescale="app"] h3, .ds-247420[data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
@@ -959,16 +999,9 @@
 .ds-247420 .t-mega    { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92;            letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
 
 .ds-247420 .t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); }
-.ds-247420 .t-mono    { font-family: var(--ff-mono); }
+.ds-247420 .t-mono    { font-family: var(--ff-mono); font-weight: 400; }
 .ds-247420 .t-body    { font-family: var(--ff-body); }
 
-/* House small-label voice, in two sizes. Every declaration here is sourced
-   from a token, so a sheet that cannot join these selector lists (community.css
-   and gm-prose.css ship as separate <link>-able exports and must not depend on
-   app-shell.css being present) still composes the same voice by referencing the
-   same four tokens — --ff-mono / --fs-* / uppercase / --tr-label. That token
-   set, not this rule, is the single source of truth; a selector that restates a
-   literal instead of the token is the drift this pairing exists to prevent. */
 .ds-247420 .t-label   { font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-label); font-weight: 500; }
 .ds-247420 .t-micro   { font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
 .ds-247420 .t-meta    { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); }
@@ -979,17 +1012,18 @@
   margin: 0;
 }
 
-/* h1/h2/h3/h4 and .lede/.t-lede are both margin:0 primitives by design (a
-   heading used standalone must not force space its context doesn't want).
-   But a heading immediately followed by a lede is a named pairing, not two
-   independent primitives that happen to be adjacent -- it needs its own gap
-   regardless of whether the surrounding shell opts into .ds-app-surface
-   (which only adds this spacing on landing/marketing surfaces, leaving every
-   Operate-mode kit that skips that class with a zero-gap heading+subtitle). */
 .ds-247420 h1 + .lede, .ds-247420 h1 + .t-lede, .ds-247420 h2 + .lede, .ds-247420 h2 + .t-lede, .ds-247420 h3 + .lede, .ds-247420 h3 + .t-lede, .ds-247420 .t-h1 + .lede, .ds-247420 .t-h1 + .t-lede {
   margin-top: var(--space-2);
 }
 
+.ds-247420 .lede + .post-body, .ds-247420 .t-lede + .post-body, .ds-247420 .lede + .ds-prose, .ds-247420 .t-lede + .ds-prose {
+  margin-top: var(--space-4);
+}
+
+.ds-247420 .lede + .ds-section, .ds-247420 .t-lede + .ds-section {
+  margin-top: var(--space-8);
+}
+
 .ds-247420 .eyebrow {
   font-family: var(--ff-mono);
   font-size: var(--fs-tiny);
@@ -999,7 +1033,6 @@
   color: var(--accent-ink);
   display: inline-flex; align-items: center; gap: 12px;
 }
-/* Editorial kicker mark — a short solid ink rule, the print-byline tell. */
 .ds-247420 .eyebrow::before {
   content: '';
   width: 28px; height: 3px; background: currentColor;
@@ -1028,21 +1061,6 @@
   font-family: var(--ff-body);
 }
 .ds-247420 .ds-prose blockquote p:last-child { margin-bottom: 0; }
-/* Closing line of an article ("end. reply by opening a pr."), set off from the
-   body it terminates. Quieter and smaller than the prose around it: it takes
-   the mono face and the --fg-3 tone the house uses for ancillary voices
-   (.t-micro, .dim), so the endnote reads as chrome around the article rather
-   than a final paragraph of it. The --space-5 lead does the "set off" — it
-   breaks the paragraph rhythm so the eye registers the piece has ended before
-   reading the words; margin-bottom:0 overrides .ds-prose p's --space-4 so the
-   article does not end on dead space.
-   Lives here, beside the rest of the .ds-prose family, NOT in gm-prose.css:
-   the blog kit that uses this class links only colors_and_type.css +
-   app-shell.css, so a rule in that separately-<link>-ed export would be exactly
-   as undefined as the class was before. Sized at --fs-xs, not the --fs-micro
-   label rung: this is a readable sentence with a link in it, not a micro-label.
-   The link inherits .ds-prose a's --accent-ink treatment (a readable TEXT tone;
-   the bare --accent fill is ~1.07:1 on paper) — deliberately not re-stated. */
 .ds-247420 .ds-prose .ds-prose-endnote,
 .ds-247420 .ds-prose-endnote {
   margin-top: var(--space-5);
@@ -1055,7 +1073,6 @@
 
 .ds-247420 .dim { color: var(--fg-3); }
 
-/* Links */
 .ds-247420 a { color: inherit; text-decoration: none; }
 .ds-247420 a.ds-link-accent, .ds-247420 .ds-prose a {
   color: var(--accent-ink);
@@ -1063,6 +1080,13 @@
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
 }
+/* Visited state was entirely absent -- a returning user had no way to tell an
+   already-read link from an unread one, the one link state browsers don't
+   fake for you. --purple-2 keeps it distinct from both the unvisited accent
+   and any hover/danger tone already in the palette. */
+.ds-247420 a.ds-link-accent:visited, .ds-247420 .ds-prose a:visited {
+  color: var(--purple-2);
+}
 .ds-247420 a.ds-link-accent:hover, .ds-247420 .ds-prose a:hover {
   background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
 }
@@ -1073,8 +1097,9 @@
 }
 
 .ds-247420 code {
+  --code-pill-tier3-surface: var(--bg-3);
   font-family: var(--ff-mono); font-size: 0.92em;
-  background: var(--bg-2); padding: 0.15em 0.5em; border-radius: var(--r-1);
+  background: var(--code-pill-tier3-surface); padding: 0.15em 0.5em; border-radius: var(--r-1);
 }
 
 .ds-247420 pre {
@@ -1145,7 +1170,7 @@
   display: flex; flex-wrap: wrap;
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
-  padding: 10px var(--pad-x);
+  padding: var(--space-2-5) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
@@ -1158,7 +1183,7 @@
   position: sticky; top: 0; z-index: var(--z-header);
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
-  padding: 8px var(--pad-x);
+  padding: var(--space-2) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .ds-247420 .app-chrome > .app-topbar,
@@ -1175,7 +1200,24 @@
 .ds-247420 .app-topbar > .brand { flex: 0 0 auto; }
 .ds-247420 .app-topbar > .app-search { flex: 1 1 auto; }
 .ds-247420 .app-topbar > nav { margin-left: auto; }
-.ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
+/* Utility cluster grouping: the theme toggle sits after the repo-info nav
+   links with no visual separation between the two groups, so the row read
+   as one undifferentiated strip of controls. A thin inset rule plus extra
+   left gap reads as "these are a distinct utility group", matching the
+   subtle divider already used between .app-status segments. */
+.ds-247420 .app-topbar > .app-topbar-theme {
+  flex: 0 0 auto;
+  margin-left: var(--space-2);
+  padding-left: var(--space-3);
+  position: relative;
+}
+.ds-247420 .app-topbar > .app-topbar-theme::before {
+  content: ''; position: absolute; left: 0; top: 50%;
+  transform: translateY(-50%);
+  width: 1px; height: 18px;
+  background: var(--rule-strong);
+}
+.ds-247420 .app-topbar nav { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; }
 .ds-247420 .app-topbar nav a { flex: 0 0 auto; }
 .ds-247420 .app-topbar nav a {
   color: var(--fg-2);
@@ -1228,6 +1270,12 @@
   border-radius: var(--r-pill);
   font-size: var(--fs-sm); color: var(--fg-3);
   max-width: 360px;
+  /* Match the system-wide input border language (.ds-field / .ds-search-input:
+     tonal fill + printed baseline rule) instead of a borderless pill, so the
+     topbar search reads as the same control family as every other input. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
 .ds-247420 .app-search .icon { opacity: 0.6; }
 .ds-247420 .app-search input {
@@ -1235,22 +1283,70 @@
   font-family: inherit; font-size: inherit; color: var(--fg);
   width: 100%;
 }
+/* Same focus language as .ds-field/.ds-search-input: no outline ring, the
+   baseline rule thickens to the accent instead — matching every other form
+   input in the system rather than a one-off outline ring. */
 .ds-247420 .app-search:focus-within {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
+  background: var(--bg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
 }
 
 .ds-247420 .app-crumb {
   min-height: var(--app-crumb-h);
-  padding: 6px var(--pad-x);
-  display: flex; align-items: center; gap: 8px;
+  padding: var(--space-1-75) var(--pad-x);
+  display: flex; align-items: center; gap: var(--space-2);
   font-size: var(--fs-sm); color: var(--fg-3);
+  min-width: 0;
 }
-.ds-247420 .app-crumb .sep { opacity: 0.5; }
-.ds-247420 .app-crumb .leaf { color: var(--fg); font-weight: 600; }
-.ds-247420 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); }
-
-.ds-247420 .app-side-shell { background: var(--bg); }
+.ds-247420 .app-crumb .sep { opacity: 0.5; flex: 0 0 auto; }
+/* Trail segments and the current/leaf segment truncate independently instead
+   of the whole crumb bar overflowing — a long segment (deep file path, long
+   title) must not push the sibling segments or the right slot off-screen. */
+.ds-247420 .app-crumb > span:not(.sep):not(.crumb-right) {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0; flex: 0 1 auto;
+}
+/* Ancestor trail segments previously had no rule of their own and simply
+   inherited .app-crumb's base --fg-3 — the same tone the separators sit on
+   top of (before their own 0.5 opacity dims them further). That leaves only
+   two visually distinct tiers in practice (dim separator, bold leaf) rather
+   than three, since the ancestor tone reads as "default text colour", not a
+   deliberate middle step. --fg-3 is the crumb bar's OWN base, so explicitly
+   restating it here is the anchor for the 3-tier read: separator (--fg-3 at
+   0.5 opacity, dimmest) < ancestor (--fg-3, mid) < leaf (--fg bold, brightest). */
+.ds-247420 .app-crumb > span:not(.sep):not(.leaf):not(.crumb-right) { color: var(--fg-3); }
+.ds-247420 .app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; }
+.ds-247420 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; }
+
+/* The shell is the grid cell (.app-body's fixed sidebar column); it must own
+   its own scroll, not just size to content, because .app-body's row track is
+   `minmax(0, 1fr)` — a real height the sidebar can overflow once bins +
+   labels + more exceed it. Without this the extra rows were silently chopped
+   at the viewport edge with no way to reach them. */
+/* .app-side-shell and .app-main (below) are two INDEPENDENT scroll regions
+   side by side -- correct by design (a sidebar nav and a main panel each own
+   their own overflow), but with default invisible/overlay OS scrollbars a
+   user hovering the boundary has no visual cue which region the wheel will
+   scroll, or that there even are two scrollable zones rather than one page
+   scroll. Thin always-visible scrollbar tracks make each region's own scroll
+   ownership legible without changing the (correct) two-region architecture. */
+.ds-247420 .app-side-shell {
+  background: var(--bg); overflow-y: auto; min-height: 0;
+  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
+  /* Bottom-edge fade: a rail longer than the viewport otherwise shows only
+     the thin scrollbar track as its sole "there is more below" cue. Mirrors
+     the horizontal fade already used by .os-instances (src/kits/os/theme.css)
+     for its own overflow edge, oriented top-to-bottom for this vertical
+     scroller. The top edge stays fully opaque (rows start flush under the
+     topbar with no need to hint upward scroll on initial load); only the
+     trailing 24px softens toward transparent. */
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
+  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
+}
+.ds-247420 .app-side-shell::-webkit-scrollbar { width: 8px; }
+.ds-247420 .app-side-shell::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); }
+.ds-247420 .app-side-shell::-webkit-scrollbar-track { background: transparent; }
 .ds-247420 .app-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch; flex: 1; min-height: 0; }
 .ds-247420 .app-body.no-side { grid-template-columns: minmax(0, 1fr); }
 /* When there is no sidebar, the empty side-shell must not occupy a grid row,
@@ -1273,7 +1369,7 @@
 .ds-247420 .app-side .group {
   font-size: var(--fs-xs); font-weight: 600;
   color: var(--fg-3); padding: 0 var(--space-3);
-  margin-bottom: 6px;
+  margin-bottom: var(--space-1-75);
 }
 .ds-247420 .app-side a {
   display: grid; grid-template-columns: 18px 1fr auto;
@@ -1288,7 +1384,7 @@
   min-height: 44px;
   border-radius: var(--r-1);
   color: var(--fg-2);
-  margin-bottom: 2px;
+  margin-bottom: var(--space-hair);
 }
 @media (pointer: coarse) {
   .ds-247420 .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); }
@@ -1358,6 +1454,15 @@
 /* Reserve the scrollbar track so routes with/without overflow don't shift
    the layout horizontally when the bar appears. */
 .ds-247420 .app-main { scrollbar-gutter: stable; }
+/* Same visible-scroll-ownership rationale as .app-side-shell above -- makes
+   this the visually distinct SECOND independent scroll region rather than
+   an invisible-scrollbar mystery next to the sidebar. */
+.ds-247420 .app-main {
+  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
+}
+.ds-247420 .app-main::-webkit-scrollbar { width: 8px; }
+.ds-247420 .app-main::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); }
+.ds-247420 .app-main::-webkit-scrollbar-track { background: transparent; }
 /* Jump-target anchors clear the inner-scroll top edge (no chrome overlap,
    but a little breathing room when deep-linked within .app-main). */
 .ds-247420 .app-main [id] { scroll-margin-top: var(--space-4); }
@@ -1367,13 +1472,41 @@
 .ds-247420 .app-main > .ds-file-stage,
 .ds-247420 .app-main > .ds-files-stack,
 .ds-247420 .app-main > .grow { flex: 1 1 auto; min-height: 0; }
-.ds-247420 .app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }
+/* width:100% is load-bearing, not redundant with max-width: .app-body is a
+   CSS grid, and margin:auto on a grid item overrides the default stretch,
+   shrinking the item to its max-content width instead of filling the track
+   and then clamping -- confirmed live at 2560px viewport where mainWidth
+   measured 688px against a correctly-resolved 1400px max-width. Explicit
+   width:100% restores fill-then-cap for every .narrow page, not just wide
+   viewports (the shrink-to-fit bug undersized even the base 760px case). */
+.ds-247420 .app-main.narrow { width: 100%; max-width: var(--measure-narrow); margin: 0 auto; }
+/* .narrow means "prose reading measure", not "shrink the whole shell on wide
+   screens". The old clamp(760px, 46vw, 1000px) grew too slowly to track the
+   real available column: at 1920px viewport the .app-body grid's second
+   track (.app width minus --sidebar-width) is ~1556px, but 46vw=883px sat
+   well under the 1000px ceiling, leaving a ~340px dead gutter between the
+   sidebar and the centered narrow column on an ordinary desktop screen (not
+   just ultrawide) -- confirmed live via a real 1920x1080 CDP viewport, a
+   project page (#/p/<slug>). 62vw tracks the actual column growth far closer
+   (1920*0.62=1190px, much nearer the 1556px track than 883px was) while the
+   1200px ceiling still keeps prose from stretching into an unreadable
+   full-bleed line -- sidebar-present narrow pages read the same width class
+   as the no-side variant below instead of visibly starving next to it. */
+.ds-247420 .app-body:not(.no-side) .app-main.narrow {
+  max-width: clamp(var(--measure-narrow), 62vw, 1200px);
+}
 /* A shell with no sidebar has no competing column, so the prose clamp there was
    leaving the whole sidebar's worth of width empty -- 760px of content inside a
    1413px shell on a real page. Widen the clamp by the space the absent sidebar
-   would have taken so the measure still reads as prose, just not starved. */
+   would have taken so the measure still reads as prose, just not starved.
+   The floor stays a fixed 980px (no-side is still readable narrow); the
+   ceiling grows with viewport instead of staying pinned at 980px forever --
+   on a 2560px ultrawide the old fixed value left over half the shell as dead
+   side margin. 1400px ceiling keeps prose measure sane (nobody wants a
+   2400px-wide paragraph) while letting non-prose content (index rows, meta)
+   actually use the extra room. */
 .ds-247420 .app-body.no-side .app-main.narrow {
-  max-width: calc(var(--measure-narrow) + var(--sidebar-width));
+  max-width: clamp(calc(var(--measure-narrow) + var(--sidebar-width)), 60vw, 1400px);
 }
 /* Article-body heading rhythm and lede spacing, consumed by flatspace-rendered
    long-form pages (docs, papers) that drop headings/panels directly into .app-main. */
@@ -1426,8 +1559,16 @@
   color: var(--fg-3);
   border-top: 1px solid var(--rule);
 }
-.ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
 .ds-247420 .app-status .item:first-of-type { color: var(--accent-ink); }
+/* Subtle divider between adjacent status segments — a thin inset rule, not a
+   full-height border, so it reads as a quiet separator rather than boxing
+   each item. */
+.ds-247420 .app-status .item:not(:first-of-type)::before {
+  content: ''; flex: 0 0 auto;
+  width: 1px; height: 10px;
+  background: var(--rule-strong);
+}
 .ds-247420 .app-status .spread { flex: 1; }
 /* The status bar NEVER wraps: at narrow widths the trailing items (hints,
    agent target) drop in priority order instead of breaking mid-word onto a
@@ -1448,17 +1589,21 @@
   color: var(--fg-3);
 }
 .ds-247420 .dateline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.ds-247420 .dateline .spread { flex: 1 1 auto; min-width: var(--space-3); }
+/* The spreader itself only ever set flex-basis -- an empty div with no
+   background renders as blank space, not the "dotted spreader" the preview
+   page's own caption describes. border-bottom (not background-image) keeps
+   the dots crisp at 1px without a repeating-gradient banding artifact. */
+.ds-247420 .dateline .spread {
+  flex: 1 1 auto; min-width: var(--space-3); align-self: stretch;
+  display: flex; align-items: center;
+}
+.ds-247420 .dateline .spread::after {
+  content: ''; flex: 1 1 auto;
+  border-bottom: var(--bw-hair, 1px) dotted var(--rule-strong);
+}
 
-/* ============================================================
-   Primitives
-   ============================================================ */
 .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost {
   display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  /* Fixed height + horizontal-only padding: the control height is exact and
-     alignable (flex centres the label vertically), the way webgeist snaps every
-     control to a height ladder. Default is the --ctl-md rung; --btn-sm/--btn-lg
-     retune height + h-padding + font per size. Density scales the ladder. */
   height: var(--ctl-md); min-height: var(--ctl-md);
   padding: 0 var(--space-2-75);
   font-family: var(--ff-body);
@@ -1466,41 +1611,28 @@
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
-  /* Rounded-rect app chrome, not a marketing-page stadium CTA.
-     Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
-     containers; r-pill = reserved for status/input/chip/badge/progress
-     surfaces (composer input, chips, badges, progress bars, theme-toggle
-     segments) - never for actions. */
   border-radius: var(--r-1);
   border: var(--bw-hair) solid transparent;
   box-shadow: none;
-  /* Restrained hover-lift: a 1px rise + hairline shadow reads as a crisp,
-     confident affordance rather than a soft glow-card float. */
   transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease),
     color var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring),
     border-color var(--dur-snap) var(--ease);
 }
 .ds-247420 .btn { background: var(--bg-2); color: var(--fg); border-color: var(--rule); }
 .ds-247420 .btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
-/* Primary CTA — the electric lead as a solid editorial block; hover inverts to
-   an ink block with the lead as text, a confident two-tone flip. */
 .ds-247420 .btn-primary {
-  background: var(--accent); color: var(--accent-fg);
+  background: var(--green); color: var(--on-color);
   font-weight: 700;
 }
-.ds-247420 .btn-primary:hover { background: var(--fg); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-2); }
+.ds-247420 .btn-primary:hover { background: var(--fg); color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-2); }
 .ds-247420 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
-.ds-247420 .btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
+.ds-247420 .btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); transform: translateY(-1px); }
 .ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
 .ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible, .ds-247420 .ds-icon-btn:focus-visible {
   outline: var(--focus-w) solid var(--focus-color);
   outline-offset: var(--focus-offset);
 }
 
-/* Button size ladder — the size prop on Btn() (sm | md | lg). md is the base
-   rule above; sm/lg retune height (off the --ctl-* ladder), horizontal padding,
-   and font-size so a size swap is one class, never inline padding overrides
-   (the old preview faked sizes with style=). Applies to every variant. */
 .ds-247420 .btn-sm, .ds-247420 .btn-sm.btn-primary, .ds-247420 .btn-sm.btn-ghost {
   height: var(--ctl-sm); min-height: var(--ctl-sm);
   padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1);
@@ -1510,10 +1642,9 @@
   padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
 }
 
-/* App-mode quiet interactions — the marketing hover-lift (translateY + shadow)
-   and the .row .meta slide read as decorative float on a dense working surface.
-   Under [data-typescale="app"], state changes are background/border-only: crisp,
-   no motion, no elevation. Marketing surfaces (no data-typescale) keep the lift. */
+/* App chrome is compact/dense (see --fs-h1-app etc in colors_and_type.css) --
+   the marketing-scale hover lift/shadow reads as an oversized flourish at
+   this density, so app-typescale buttons opt out of it deliberately. */
 .ds-247420[data-typescale="app"] .btn:hover,
 .ds-247420[data-typescale="app"] .btn-primary:hover,
 .ds-247420[data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; }
@@ -1524,36 +1655,38 @@
 .ds-247420[data-typescale="app"] a.row:hover .meta,
 .ds-247420[data-typescale="app"] .row[role="button"]:hover .meta { transform: none; }
 
-/* ============================================================
-   IconButton — square icon-only button
-   ============================================================ */
 .ds-247420 .ds-icon-btn {
   display: inline-flex; align-items: center; justify-content: center;
   padding: 0; border: none; cursor: pointer;
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
   background: transparent; color: var(--fg);
   width: 32px; height: 32px;
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
+.ds-247420 .ds-icon-btn:hover { background: var(--bg-2); }
 .ds-247420 .ds-icon-btn-xs { width: 22px; height: 22px; }
 .ds-247420 .ds-icon-btn-sm { width: 26px; height: 26px; }
 .ds-247420 .ds-icon-btn-base { width: 32px; height: 32px; }
 .ds-247420 .ds-icon-btn-lg { width: 40px; height: 40px; }
 .ds-247420 .ds-icon-btn-xl { width: 48px; height: 48px; }
+@media (pointer: coarse) {
+  .ds-247420 .ds-icon-btn-xs { width: 32px; height: 32px; }
+  .ds-247420 .ds-icon-btn-sm { width: 32px; height: 32px; }
+}
 .ds-247420 .ds-icon-btn-ghost { background: transparent; }
 .ds-247420 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-247420 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
 .ds-247420 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
-/* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
-.ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
+/* --ink, not --on-color: --on-color is a fixed #fff, which measures 3.07:1 on
+   --warn (#FF5A52) -- below the 4.5:1 AA floor. --ink measures 6.27:1. Same
+   fix as .btn-primary.danger in app-shell/files.css. */
+.ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--ink); }
 .ds-247420 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
 .ds-247420 .ds-icon-btn:active { transform: translateY(1px); }
 .ds-247420 .ds-icon-btn:disabled, .ds-247420 .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
 }
 
-/* ============================================================
-   Badge — small inline count/status pill
-   ============================================================ */
 .ds-247420 .ds-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 6px;
@@ -1561,18 +1694,25 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-/* Badge size ladder — sm for dense inline counts, lg for prominent markers.
-   Base (above) stays the 18px default. */
-.ds-247420 .ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
+/* --fs-nano (11px), not --fs-pico (10px): --fs-pico sits below the 11px
+   legibility floor other small-scale labels in this system respect (see
+   .ds-stat-lbl, .ds-session-row-id), and this size is used live for the
+   workspace rail item-count badge (atoms.js Badge size="sm"). */
+.ds-247420 .ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-nano); }
 .ds-247420 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
-/* Canonical tone names are tone-success / tone-error / tone-neutral. Every
-   other tone name grouped into the same rule below (tone-green/tone-live,
-   tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
-   true-synonym legacy alias, kept working but sharing one declaration so the
-   tone-family colors can't drift apart across names. */
-.ds-247420 .ds-badge.tone-green, .ds-247420 .ds-badge.tone-live, .ds-247420 .ds-badge.tone-success {
+.ds-247420 .ds-badge.tone-green, .ds-247420 .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
 }
+/* tone-live is its own hue (sky), split out of the success/green group:
+   "live/broadcasting now" and "operation succeeded" are different facts and
+   read identically when both borrow the brand's accent green — a LIVE badge
+   next to an "ok" chip must not look like the same state. --sky is already
+   used for informational surfaces (ds-alert-info, audio-file icons) and is
+   never pinned by the thebird brand's `--accent:var(--green)!important`
+   override, so it stays visually distinct under every accent preset. */
+.ds-247420 .ds-badge.tone-live {
+  background: color-mix(in oklab, var(--sky) 22%, var(--bg)); color: var(--sky);
+}
 .ds-247420 .ds-badge.tone-flame, .ds-247420 .ds-badge.tone-error {
   background: var(--flame); color: var(--on-color);
 }
@@ -1585,7 +1725,7 @@
   background: var(--sun); color: var(--ink);
 }
 .ds-247420 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
-.ds-247420 .ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
+.ds-247420 .ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: var(--flame); }
 
 .ds-247420 .chip {
   display: inline-flex; align-items: center; gap: var(--space-1-75);
@@ -1596,42 +1736,55 @@
   letter-spacing: var(--tr-caps); text-transform: uppercase;
   border-radius: var(--r-pill);
 }
-/* Chip size ladder — sm for dense toolbars/table cells, lg for prominent
-   status. tone-* colouring (below) is orthogonal to size. */
 .ds-247420 .chip.chip--sm { padding: var(--space-half) var(--space-2); font-size: var(--fs-micro); gap: var(--space-1); }
 .ds-247420 .chip.chip--lg { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-xs); }
-/* Tag variant — a rectangular, sentence-case chip for dense data (table cells,
-   inline labels) where the all-caps pill reads too shouty and space-hungry.
-   Keeps the tone-* palette; drops the caps + pill for a tight --r-0 corner. */
 .ds-247420 .chip.chip--tag {
   text-transform: none; letter-spacing: 0; font-weight: 500;
   border-radius: var(--r-0); padding: var(--space-half) var(--space-2);
 }
-/* Same canonical/legacy-alias grouping as .ds-badge above. */
-.ds-247420 .chip.tone-green, .ds-247420 .chip.tone-live, .ds-247420 .chip.tone-success, .ds-247420 .chip.tone-ok {
+.ds-247420 .chip.tone-green, .ds-247420 .chip.tone-success, .ds-247420 .chip.tone-ok {
   background: var(--green-tint); color: var(--green-deep);
 }
+/* tone-live: its own sky hue, split from tone-ok/tone-success — see the
+   .ds-badge.tone-live comment above for the rationale. A small pulsing dot
+   precedes the label so "live" reads as an active broadcast state, not a
+   static status chip. */
+.ds-247420 .chip.tone-live {
+  background: color-mix(in oklab, var(--sky) 16%, var(--bg));
+  color: var(--sky);
+  position: relative;
+  padding-left: 22px;
+}
+.ds-247420 .chip.tone-live::before {
+  content: '';
+  position: absolute;
+  left: 10px; top: 50%;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--sky);
+  transform: translateY(-50%);
+  animation: chip-live-pulse 1.6s ease-in-out infinite;
+}
+@keyframes chip-live-pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--sky) 50%, transparent); }
+  50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .chip.tone-live::before { animation: none; }
+}
 .ds-247420 .chip.tone-flame, .ds-247420 .chip.tone-error, .ds-247420 .chip.tone-miss {
   background: var(--flame); color: var(--on-color);
 }
+.ds-247420 .chip.tone-warn {
+  background: color-mix(in oklab, var(--amber) 22%, var(--bg));
+  color: var(--amber);
+}
 .ds-247420 .chip.tone-wip, .ds-247420 .chip.tone-neutral {
   background: var(--bg-3); color: var(--fg-2);
 }
-/* `.chip.accent` is the bare-adjective spelling of tone-accent (ui_kits/blog
-   uses it for a "draft" chip). It had no rule anywhere, so an accented chip
-   rendered byte-identical to a plain one. Folded into the alias grouping rather
-   than given its own block, so the two spellings cannot drift apart. --accent
-   is the FILL and --accent-ink the readable text tone (AGENTS.md) — the bare
-   lead is ~1.07:1 on paper and unreadable as text. */
 .ds-247420 .chip.accent, .ds-247420 .chip.tone-accent {
   background: var(--accent-tint); color: var(--accent-ink);
 }
-/* tone-dim was applied by five kits (aicat, project_page, signin, system_primer,
-   terminal) with no rule anywhere, so a "dim" chip rendered byte-identical to a
-   plain one — measured at rgb(234,230,218) on rgb(31,31,38), same opacity. It is
-   the recede-into-the-row tone: the tier-3 foreground on the same recessed
-   surface tone-wip uses, which is quieter than the default --fg-2 without
-   dropping to an opacity fade that would take the border and background with it. */
 .ds-247420 .chip.tone-dim {
   background: var(--bg-3); color: var(--fg-3);
 }
@@ -1643,12 +1796,7 @@
 .ds-247420 .chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
 .ds-247420 .chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-247420 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.ds-247420 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
 
-/* Removable chip — a trailing dismiss (x) button for editable tag/filter
-   chip lists (session tags, saved-search chips). Reuses the chip's own
-   tone/size; the button itself stays neutral-at-rest, per the standing
-   color-reserved-for-meaning convention, tinting only on hover/focus. */
 .ds-247420 .chip.ds-chip-removable { padding-right: var(--space-1); }
 .ds-247420 .ds-chip-remove-btn {
   display: inline-flex; align-items: center; justify-content: center;
@@ -1658,14 +1806,12 @@
   cursor: pointer;
 }
 .ds-247420 .ds-chip-remove-btn:hover, .ds-247420 .ds-chip-remove-btn:focus-visible { opacity: 1; background: color-mix(in oklab, currentColor 16%, transparent); }
-.ds-247420 .ds-chip-remove-btn svg { width: 10px; height: 10px; }
+.ds-247420 .ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); }
 @media (pointer: coarse) {
   .ds-247420 .ds-chip-remove-btn { width: 24px; height: 24px; margin-left: 0; }
-  .ds-247420 .ds-chip-remove-btn svg { width: 12px; height: 12px; }
+  .ds-247420 .ds-chip-remove-btn svg { width: var(--icon-xs); height: var(--icon-xs); }
 }
 
-/* ds-pill — plain neutral chip, distinct from the toned .ds-badge/.chip family
-   (gmsniff's .pill: a bare rounded label with no semantic tone). */
 .ds-247420 .ds-pill {
   display: inline-block;
   padding: 1px 7px;
@@ -1677,26 +1823,75 @@
 .ds-247420 .ds-pill.tone-accent { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-247420 .ds-pill.tone-muted  { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--rule); }
 
+/* .glyph-* sizes (14/18/22px) are for small inline text-adjacent glyphs
+   (single characters/icons sitting in a text flow), a different scale and
+   purpose than the .ds-icon-btn-* tap-target scale (22/26/32/40/48px) below --
+   the -sm/-lg naming overlap is coincidental, not a shared system. */
 .ds-247420 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;
   font-family: var(--ff-mono); font-size: var(--fs-tiny);
   opacity: 0.8;
 }
-/* Glyph() (src/components/shell/atoms.js) emits `glyph glyph-{size}` and an
-   inline `font-size: var(--glyph-size-{size}, <literal>)`. The custom property
-   is the documented theming hook — it is what lets a theme retune glyph scale
-   without touching the component — but nothing declared it, so every glyph fell
-   through to the hard-coded inline literal and the hook was inert. Declaring
-   the three rungs on the scale makes the hook real; the sm/lg classes also give
-   the box a matching footprint instead of the one-size 18px square. */
-/* Values mirror Glyph()'s own inline fallbacks exactly (11 / 13 / 16px), so
-   declaring the hook changes nothing visually — it only makes the property
-   themeable, which is what it always claimed to be. */
 .ds-247420 .glyph { --glyph-size-sm: var(--fs-nano); --glyph-size-base: var(--fs-tiny); --glyph-size-lg: var(--fs-body); }
-.ds-247420 .glyph-sm { width: 14px; height: 14px; }
+.ds-247420 .glyph-sm { width: var(--icon-xs); height: var(--icon-xs); }
+.ds-247420 .glyph-base { width: 18px; height: 18px; }
 .ds-247420 .glyph-lg { width: 22px; height: 22px; }
 
+/* Shared empty-state base -- hero-content.css's .empty and community.css's
+   .fd-empty previously duplicated this full rule set; both are joined into
+   this selector list so the shared declarations live in one place, with
+   each keeping its own file-local rule for context-specific extras
+   (background/radius/font-size for .empty; padding for .fd-empty). New
+   consumers can add .ds-empty-state directly instead of a fresh copy. */
+.ds-247420 .ds-empty-state, .ds-247420 .empty, .ds-247420 .fd-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-6) var(--space-3);
+  text-align: center;
+  color: var(--fg-3);
+}
+.ds-247420 .ds-empty-state--panel { background: var(--bg-2); border-radius: var(--r-1); }
+.ds-247420 .ds-empty-state--compact { padding: var(--space-5) var(--space-3); }
+
+/* .ds-tooltip — shared floating bubble (overlay-primitives/tooltip.js appends
+   one instance to <body> and repositions it via useFloating). Fade timing
+   matches the component's own 350ms hover-intent delay. */
+.ds-247420 .ds-tooltip {
+  position: fixed;
+  z-index: var(--z-top);
+  max-width: 240px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--r-1);
+  background: var(--fg);
+  color: var(--bg);
+  font-size: var(--fs-xs);
+  line-height: 1.35;
+  box-shadow: var(--shadow-2);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-tooltip:not([hidden]) { opacity: 1; transform: scale(1); }
+.ds-247420 .ds-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--fg);
+  transform: rotate(45deg);
+}
+.ds-247420 .ds-tooltip[data-placement^="top"]::after    { bottom: -3px; left: 50%; margin-left: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="bottom"]::after { top: -3px; left: 50%; margin-left: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="left"]::after   { right: -3px; top: 50%; margin-top: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="right"]::after  { left: -3px; top: 50%; margin-top: -3px; }
+.ds-247420 .ds-tooltip.kind-danger { background: var(--warn); color: var(--ink); }
+.ds-247420 .ds-tooltip.kind-danger::after { background: var(--warn); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-tooltip { transition: none; }
+}
+
 /* ============================================================
    Panel — soft tonal container, no border decoration
    ============================================================ */
@@ -1758,9 +1953,19 @@
   font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3);
   letter-spacing: var(--tr-caps); text-transform: uppercase;
+  /* A hairline divider is the header's only structural separator from the
+     body — without it, an uppercase caps label at fs-tiny/600 reads as just
+     another dim meta line once the eye drops past the top of the panel. */
+  border-bottom: var(--bw-hair) solid var(--rule);
+  margin-bottom: var(--space-1);
 }
 .ds-247420 .panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; }
-.ds-247420 .panel-head > :last-child {
+/* A borderless .panel-wide (no card edge to lean on) would otherwise show a
+   divider floating with nothing to visually anchor it — drop it there and
+   rely on spacing alone, matching panel-wide's already-transparent chrome. */
+.ds-247420 .panel.panel-wide .panel-head { border-bottom: none; margin-bottom: 0; }
+.ds-247420 .panel.panel--dense .panel-head { border-bottom: var(--bw-hair) solid var(--rule); margin-bottom: 0; }
+.ds-247420 .panel-head > :last-child:not(.ds-badge) {
   font-weight: 500; color: var(--fg-3);
   font-family: var(--ff-mono); letter-spacing: 0;
 }
@@ -1772,6 +1977,13 @@
   margin: 0; font: inherit; font-size: inherit; font-weight: inherit;
   letter-spacing: inherit; text-transform: inherit; color: inherit;
 }
+/* Category glyph beside a panel title (kits / previews / decks / docs on the
+   homepage) — same inline-svg vocabulary as icons.js, sized to sit on the
+   text baseline rather than dominating it. */
+.ds-247420 .ds-panel-title-glyph {
+  display: inline-flex; align-items: center; gap: var(--space-1-5, 6px);
+}
+.ds-247420 .ds-panel-title-glyph .ds-icon { flex-shrink: 0; color: var(--fg-3); }
 .ds-247420 .panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
 .ds-247420 .panel-body > * { margin: 0; }
 /* One-line explanatory caption under a panel's title — e.g. distinguishing
@@ -1812,6 +2024,14 @@
   transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring);
 }
 .ds-247420 .row + .row { margin-top: 2px; }
+/* Mobile tap-target floor: at compact/comfortable density on a touch
+   viewport the padding-only row height can fall under the 44px effective
+   tap target (WCAG 2.5.5), especially at [data-density="compact"] (0.75x).
+   Force a min-height on narrow/coarse-pointer viewports only, so the dense
+   desktop mono/list layout (file-row, index-row) is untouched above 640px. */
+@media (max-width: 640px), (pointer: coarse) {
+  .ds-247420 .row, .ds-247420 a.row, .ds-247420 button.row, .ds-247420 .row[role="button"] { min-height: 44px; }
+}
 /* Interactive rows (anchor/button wrappers) get a hairline lift on hover,
    matching the btn/panel elevation language — non-interactive rows (plain
    divs used as static list items) are unaffected since the selector needs a
@@ -2046,6 +2266,12 @@
   padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
 }
 .ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
+/* HeroFromPageData's richer badge shape ({label, desc}) renders a strong
+   figure plus a muted descriptor inside the same .ds-hero-stat row — give
+   the pair a baseline-aligned inline layout instead of falling back to
+   unstyled default inline flow. */
+.ds-247420 .ds-hero-stat-n { font-weight: 700; color: var(--fg); margin-right: var(--space-2); }
+.ds-247420 .ds-hero-stat-l { color: var(--fg-3); font-size: var(--fs-xs); }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is
@@ -2054,7 +2280,12 @@
      still fits a narrow column, and a 116px ceiling between the two tiers.
      Snapping to either changes the hero's whole optical weight. */
   font-size: clamp(40px, 9cqi, 116px);
-  line-height: 0.96; letter-spacing: var(--tr-tighter);
+  /* 0.96 let ascenders/descenders visibly touch between wrapped lines at the
+     upper end of this clamp (measured on "the creative department of the
+     internet" at the 116px ceiling) -- 1.02 keeps the tight, no-air display
+     feel this title wants while clearing enough vertical room that letters
+     stop colliding. */
+  line-height: 1.02; letter-spacing: var(--tr-tighter);
   margin: 0; max-width: 20ch; text-wrap: balance;
 }
 .ds-247420 .ds-hero-body {
@@ -2066,8 +2297,20 @@
 .ds-247420 .ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
 .ds-247420 .ds-hero-actions {
   display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
-  justify-content: flex-start; margin-top: var(--space-hair, 4px);
-}
+  justify-content: flex-start; margin-top: var(--space-4);
+}
+/* Hero CTA labels are content-driven (e.g. "GitHub", proper nouns from
+   home.yaml) and the site's voice is deliberately all-lowercase everywhere
+   else. Force the rendered case here rather than hand-lowercasing every
+   proper-noun label at the content layer, so a future CTA label doesn't
+   silently reintroduce Title Case. */
+.ds-247420 .ds-hero-actions .btn { text-transform: lowercase; }
+/* Filter input above the homepage's "ui kits" panel — reuses the same
+   .input token the search kit's own topbar query box uses, just placed
+   inline above the panel instead of in a topbar slot. */
+.ds-247420 .ds-kits-panel-wrap { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
+.ds-247420 .ds-kits-filter { display: flex; }
+.ds-247420 .ds-kits-filter-input { width: 100%; max-width: 32ch; }
 /* Below this width the aside card's own internal rhythm (stat rows still
    stacked vertically at full width) is already correct for a narrow column —
    no separate breakpoint override needed now that .ds-hero is always a
@@ -2141,12 +2384,15 @@
   padding: var(--space-2) 0;
   font-family: var(--ff-display); font-weight: 600;
   text-transform: uppercase; letter-spacing: var(--tr-caps);
+  mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
 }
 .ds-247420 .ds-marquee-track {
   display: inline-flex; gap: var(--space-5);
   white-space: nowrap; will-change: transform;
   animation: ds-marquee-run 28s linear infinite;
 }
+.ds-247420 .ds-marquee-run { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-247420 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-247420 .ds-marquee-sep { color: var(--accent-ink); }
 .ds-247420 .ds-marquee:hover .ds-marquee-track,
@@ -2172,7 +2418,7 @@
 .ds-247420 .cli {
   display: flex; align-items: center; gap: 14px;
   overflow-x: auto;
-  padding: 20px 24px;
+  padding: var(--space-3-5) var(--space-4);
   background: var(--ink); color: var(--paper);
   border-radius: var(--r-3);
   font-family: var(--ff-mono); font-size: var(--fs-lg);
@@ -2180,12 +2426,13 @@
 .ds-247420 .cli .prompt { color: var(--green-2); }
 .ds-247420 .cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
 .ds-247420 .cli .copy   {
-  padding: 8px 16px; background: transparent; color: var(--paper);
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
   font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
 .ds-247420 .cli .copy:hover { background: var(--fg-3); }
+.ds-247420 .cli .copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Multi-line CLI block: when .cli holds .ds-cli-row / .ds-cli-comment children
    (quickstart scripts, multi-command snippets — see CliBlock in
@@ -2202,12 +2449,32 @@
   padding: 3px 0;
 }
 .ds-247420 .ds-cli-row .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
-.ds-247420 .ds-cli-row .cmd { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: var(--paper); }
+/* `overflow-wrap: break-word` only breaks a token when it genuinely cannot
+   fit the line at all (last resort); `word-break: break-word` (its
+   predecessor here) breaks ANY overflowing token eagerly, which is what
+   split "anentrypoint-design" mid-identifier inside the importmap JSON line.
+   `min-width: 0` lets the flex child actually shrink to trigger wrapping
+   instead of pushing the panel wider. */
+.ds-247420 .ds-cli-row .cmd { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; color: var(--paper); }
 .ds-247420 .ds-cli-comment {
   color: var(--fg-3);
   font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.6;
-  padding: 3px 0; white-space: pre-wrap; word-break: break-word;
+  padding: 3px 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal;
+}
+
+/* Quickstart copy button: sits below the multi-line block (Install's inline
+   copy button assumes a single-line row with room beside it; the stacked
+   quickstart block has no such side room). */
+.ds-247420 .ds-quickstart-cli { flex-direction: column; align-items: stretch; gap: var(--space-2); }
+.ds-247420 .ds-quickstart-copy {
+  align-self: flex-end;
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
+  cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
+  border-radius: var(--r-pill); border: none;
 }
+.ds-247420 .ds-quickstart-copy:hover { background: var(--fg-3); }
+.ds-247420 .ds-quickstart-copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ============================================================
    Receipt — key/value table
@@ -2257,13 +2524,27 @@
      (was 12/14 x 16 => ~43px rows). Density scales the vertical padding. */
   border-radius: var(--r-0); overflow: hidden;
 }
+/* Panel heads / KPI labels / table headers were all identical uppercase-
+   tracked-mono weight (600), so a page with several of these side by side
+   (a dashboard) reads as one flat volume with no anchor -- the most
+   repetitive, least-singular label (a column header, one of many per
+   table) drops to a lighter 500 with slightly tighter tracking, keeping the
+   system's uppercase-mono voice but giving panel titles (still 600) a real
+   step up as the "read this first" tier. */
 .ds-247420 table th {
   text-align: left;
   padding: calc(var(--space-2) * var(--density)) var(--space-2-75);
-  font-size: var(--fs-tiny); font-weight: 600;
-  color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
+  font-size: var(--fs-tiny); font-weight: 500;
+  color: var(--fg-3); text-transform: uppercase; letter-spacing: calc(var(--tr-caps) * 0.7);
   background: var(--bg-2);
 }
+/* letter-spacing adds trailing space AFTER the last glyph too, but the table's
+   own border-radius+overflow:hidden (above) clips flush to the card edge --
+   the last header's positive tracking bleeds past its own padding box and
+   gets cropped mid-word ("STATUS" -> "STATI"). Absorb that bleed with a bit
+   of extra right padding on the last column only, so no header text sits
+   closer to the clip edge than --tr-caps can push it. */
+.ds-247420 table th:last-child { padding-right: calc(var(--space-2-75) + var(--tr-caps, 0px)); }
 .ds-247420 table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); }
 .ds-247420 table tr.clickable { cursor: pointer; }
 .ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
@@ -2272,6 +2553,12 @@
   outline-offset: -2px;
 }
 .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
+/* Non-clickable (static) rows still get a subtle hover cue — most dashboard
+   tables (freddie's sessions-by-platform/model, tool distribution, commands)
+   never pass onRowClick, so they had zero row-hover feedback at all. A dim
+   hover on ANY row (not just .clickable) reads as "you're scanning this
+   row" without implying it's actionable. */
+.ds-247420 table tr:not(.clickable):hover td { background: color-mix(in oklab, var(--bg-2) 60%, transparent); }
 
 /* Table() striped/compact opt-in density modifiers (webgeist g-table parity).
    Scoped under .ds-table-wrap so they never leak onto an unrelated bare
@@ -2279,8 +2566,15 @@
 .ds-247420 .ds-table-wrap.is-striped table tr:nth-child(even) td { background: var(--bg-2); }
 .ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):hover td,
 .ds-247420 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):focus-visible td { background: var(--bg-3, var(--bg-2)); }
+.ds-247420 .ds-table-wrap.is-striped table tr:not(.clickable):nth-child(even):hover td { background: color-mix(in oklab, var(--bg-3, var(--bg-2)) 60%, transparent); }
 .ds-247420 .ds-table-wrap.is-compact table th { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
 .ds-247420 .ds-table-wrap.is-compact table td { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
+/* Numeric-column right-alignment: Table() (content/table.js) tags a cell
+   td.is-num when its raw content is a plain integer/decimal, so digit
+   columns (session counts, tool counts, etc.) line up on the ones place
+   instead of ragged-left like prose columns. th.is-num mirrors it on the
+   matching header so the label sits over its column. */
+.ds-247420 table td.is-num, .ds-247420 table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
 
 /* ============================================================
    Changelog
@@ -2343,7 +2637,10 @@
 .ds-247420 .ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
 .ds-247420 .ds-dot-on  { color: var(--green-2); }
 .ds-247420 .ds-dot-off { color: var(--fg-3); }
-.ds-247420 .ds-dot-live { color: var(--green-2); }
+/* live is a distinct hue from a plain "on" dot — see .chip.tone-live's
+   comment for the success-vs-live rationale. */
+.ds-247420 .ds-dot-live { color: var(--sky); }
+.ds-247420 .ds-dot-warn { color: var(--amber); }
 .ds-247420 .ds-dot-idle { color: var(--fg-3); }
 
 /* ============================================================
@@ -2360,6 +2657,37 @@
   padding: var(--space-3);
   background: var(--bg-2);
   border-radius: var(--r-1);
+  /* A thin border + hover elevation gives the tile real edges and a "this is
+     a distinct object" affordance instead of a flat color patch that blends
+     into the surrounding panel — matches the "no border, no hover state"
+     gap named against the stat tiles. */
+  border: 1px solid var(--rule);
+  position: relative;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+.ds-247420 .kpi-card:hover {
+  border-color: color-mix(in oklab, var(--accent) 40%, var(--rule));
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.12));
+}
+/* Number+caption stack, isolated from .kpi-foot below it. Previously the
+   number and label were plain block children of .kpi-card with the label's
+   own margin-top providing the gap — visually fine for a single card, but
+   across a row of four the caption's WRAPPED height (one line vs two, e.g.
+   "requests · 24h" vs "error rate · 5xx+4xx") pushed .kpi-foot down by a
+   different amount per card, so the deltas/sparklines never lined up on one
+   shared baseline. A dedicated flex column groups exactly the two elements
+   that must stay glued together, independent of whatever sits below. */
+.ds-247420 .kpi-stack {
+  display: flex; flex-direction: column; align-items: flex-start;
+}
+.ds-247420 .kpi-glyph {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  color: var(--fg-3);
+  opacity: 0.6;
+  display: inline-flex;
 }
 .ds-247420 .kpi-card .num {
   font-family: var(--ff-body); font-weight: 600;
@@ -2383,10 +2711,13 @@
   display: inline-flex; align-items: center; gap: var(--space-hair);
   font-size: var(--fs-xs); font-weight: 600;
 }
+/* --green, not --success (--green-2): --success measures 3.2:1 on --paper-2,
+   below the 4.5:1 AA floor for text -- --success is tuned for non-text uses
+   (fills/backgrounds, where 3:1 suffices), --green clears 5.2:1 as text. */
 .ds-247420 .kpi-delta-up { color: var(--green); }
 .ds-247420 .kpi-delta-down { color: var(--danger); }
 .ds-247420 .ds-sparkline path { stroke: currentColor; }
-.ds-247420 .ds-sparkline-up { color: var(--success); }
+.ds-247420 .ds-sparkline-up { color: var(--green); }
 .ds-247420 .ds-sparkline-down { color: var(--danger); }
 
 /* ============================================================
@@ -2417,13 +2748,12 @@
 /* ============================================================
    Empty state
    ============================================================ */
+/* Shares its base declarations with .ds-empty-state (primitives.css) via the
+   combined selector there -- .empty only adds its own font-size/background/
+   radius modifiers on top. Was --space-8 (96px) padding; --space-6 (48px)
+   still centres a message with air without the empty state dominating the
+   fold. */
 .ds-247420 .empty {
-  /* Was --space-8 (96px) — an empty list spent 192px of vertical space on
-     nothing. --space-6 (48px) still centres a message with air, without the
-     empty state dominating the fold. Mobile drops it further (below). */
-  padding: var(--space-6);
-  text-align: center;
-  color: var(--fg-3);
   background: var(--bg-2);
   border-radius: var(--r-1);
   font-size: var(--fs-sm);
@@ -2433,18 +2763,40 @@
    Form
    ============================================================ */
 .ds-247420 .row-form {
-  display: grid; gap: 12px;
+  display: grid; gap: var(--space-2-75);
   padding: var(--space-5);
   background: var(--bg-2);
   border-radius: var(--r-3);
-}
+  /* Grid's default justify-items:stretch was silently stretching the submit
+   * button (a direct grid child, same as every input) to the full column
+   * width -- other primary buttons elsewhere (e.g. session-ui's "new
+   * session") are inline/compact by contrast, since they're not grid
+   * children. justify-self:start keeps inputs/textareas at their natural
+   * grid-stretched width (a form field SHOULD fill its column) while the
+   * submit button sizes to its own content, matching the compact convention
+   * used everywhere else primary buttons appear. */
+}
+.ds-247420 .row-form > button[type="submit"] { justify-self: start; }
 .ds-247420 .row-form input,
 .ds-247420 .row-form textarea {
   font-family: inherit; font-size: var(--fs-sm);
   padding: 12px 16px;
-  background: var(--bg); color: var(--fg);
+  /* --bg here previously resolved to the SAME color as .row-form's own
+   * --bg-2 background in the dark theme, leaving only a 14%-opacity
+   * currentColor ring (var(--rule)) as the sole edge between an input and
+   * the panel behind it -- effectively invisible. --bg-3 (one step darker
+   * than the panel) plus a stronger border restores a real, panel-distinct
+   * field surface.
+   * LOAD-BEARING !important: `.row-form input` and states-interactions.css's
+   * bare `input[type="text"]:where(...)` rule are both (0,1,1) specificity
+   * (the :where() wrapper there is intentionally zero-specificity) --
+   * states-interactions.css @imports AFTER this file in app-shell.css, so on
+   * this exact tie it wins by source order and silently discarded these two
+   * declarations. Only !important beats that without restructuring the
+   * shared bare-input rule's own selector, which many other consumers rely on. */
+  background: var(--bg-3) !important; color: var(--fg);
   border: 0; border-radius: var(--r-2);
-  box-shadow: inset 0 0 0 1px var(--rule);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 28%, transparent) !important;
 }
 .ds-247420 .row-form input:focus-visible,
 .ds-247420 .row-form textarea:focus-visible { box-shadow: var(--focus-ring-inset); }
@@ -2466,6 +2818,19 @@
    Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
    ============================================================ */
 
+/* Breakpoint reference (CSS custom properties can't be used in @media queries,
+   so these are documented here for consistency — always use these exact values):
+   - Mobile/tablet boundary: 768px (max-width) — used for compact nav/sidebar
+     collapse (catalog-theme.css, sidebar-misc.css). Note: kits-appended.css
+     uses 760px for the same kind of collapse in a few places — a near-miss
+     of this value, worth aligning to 768px when touched.
+   - Tablet/desktop boundary: 900px (max-width) / 901px (min-width) — used for
+     main layout reflow (hero-content.css, responsive2-workspace.css)
+   - Tablet landscape band: 768px–1024px (min-width 768px / max-width 1024px) —
+     used in this file (responsive.css) for a specific tablet treatment;
+     aligned to the 768px mobile/tablet boundary above (was 481px, a near-miss).
+*/
+
 /* --------------------------------------------------------------------
    Mobile Portrait Breakpoint (480px and below)
    ---------------------------------------------------------------------- */
@@ -2540,8 +2905,7 @@
   .ds-247420 .app .row.ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
   .ds-247420 .ds-changelog-row .title { grid-column: 1 / -1; }
 
-  /* Buttons */
-  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost {
+  .ds-247420 .btn:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-primary:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-ghost:not(.btn-sm):not(.btn-lg) {
     /* 11px vertical is optical, not scale drift: --space-2-75 (12) would tip
        the intrinsic box past the 44px min-height floor below and make the
        floor dead, changing the mobile button rhythm. */
@@ -2644,7 +3008,7 @@
 /* --------------------------------------------------------------------
    Tablet Landscape Breakpoint (768px to 1024px)
    ---------------------------------------------------------------------- */
-@media (min-width: 481px) and (max-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1024px) {
   /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
   .ds-247420 .app-side a {
     padding: var(--space-2-75) var(--space-2-75); gap: var(--space-2);
@@ -2707,8 +3071,7 @@
     gap: var(--space-3);
   }
 
-  /* Buttons */
-  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost {
+  .ds-247420 .btn:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-primary:not(.btn-sm):not(.btn-lg), .ds-247420 .btn-ghost:not(.btn-sm):not(.btn-lg) {
     /* 18px inline has no tier (--space-3 is 16, --space-3-5 is 20); it is the
        tablet CTA width tuned against the 12px vertical, so snapping changes
        the button aspect on the most visible control in the kit. */
@@ -2870,7 +3233,12 @@
   border-color: var(--rule);
 }
 .ds-247420 .ds-file-row:active { transform: translateY(1px); }
-.ds-247420 .ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
+/* file-grid's own header/caption both claim NEVER A BORDER -- border-color
+   here silently broke that promise for exactly the row it's meant to call
+   out (the row a screenshot/manual test would actually look at). Selected
+   state stays legible via the tint alone; border-color stays transparent so
+   the base rule's promise holds for every row, active or not. */
+.ds-247420 .ds-file-row.active { background: var(--accent-tint); }
 .ds-247420 .ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
 .ds-247420 .ds-file-row[data-file-type="image"],
 .ds-247420 .ds-file-row[data-file-type="video"],
@@ -3036,6 +3404,12 @@
   display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
   gap: var(--space-3); align-items: start;
 }
+/* Mobile fallback: auto-fill can still pack 2 cramped columns down to ~320px
+   viewports; force a single column below the shared mobile breakpoint
+   (docs/responsive.md) so thumbnails and file rails always read as a list. */
+@media (max-width: 480px) {
+  .ds-247420 .ds-file-grid-thumb { grid-template-columns: 1fr; }
+}
 .ds-247420 .ds-file-cell {
   position: relative;
   background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
@@ -3205,20 +3579,35 @@
 }
 .ds-247420 .ds-error-banner:hover { background: color-mix(in oklab, var(--warn) 20%, var(--bg)); }
 
-/* Dropzone */
+/* Dropzone — a tonal target, not a dashed-border affordance (preview/
+   dropzone.html's own header/caption both describe this: "NO DASHED
+   BORDERS" / "tonal panel that swaps to --panel-select on dragover"). A
+   solid hairline plus the idle->dragover background swap is the actual
+   design; dashed was this system's OTHER "drop target" vocabulary
+   (.panel-docs, kits-appended.css) leaking in here by copy-paste. */
 .ds-247420 .ds-dropzone {
-  border: var(--bw-rule) dashed var(--rule);
+  border: var(--bw-rule) solid var(--rule);
   border-radius: var(--r-3); background: var(--bg);
   transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
+/* Idle hover: a quiet pre-drag affordance (border firms up, faint tint) so a
+   pointer resting over the zone reads as "droppable" before a drag even
+   starts — distinct from and weaker than the .dragover treatment below. */
+.ds-247420 .ds-dropzone:hover {
+  border-color: var(--fg-3);
+  background: var(--bg-2);
+}
 .ds-247420 .ds-dropzone-inner {
   display: flex; align-items: center; justify-content: center;
   gap: var(--space-2); flex-wrap: wrap;
   padding: var(--space-4) var(--space-3); text-align: center;
 }
 /* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
-.ds-247420 .ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
+.ds-247420 .ds-dropzone-glyph { font-size: var(--icon-lg, 24px); color: var(--fg-3); }
 .ds-247420 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-247420 .ds-dropzone:not(.dragover):not(.rejected):hover {
+  border-color: var(--fg-3);
+}
 .ds-247420 .ds-dropzone.dragover {
   border-color: var(--accent);
   background: var(--accent-tint);
@@ -3232,6 +3621,26 @@
   0%, 100% { border-color: var(--accent); }
   50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
+/* Rejected — an in-flight drag carrying a disallowed payload (wrong type,
+   over the size cap). Distinct from dragover: warn tone, not accent, so the
+   two "something is happening" states never read as the same affordance. */
+.ds-247420 .ds-dropzone.rejected {
+  border-color: var(--warn);
+  background: color-mix(in oklab, var(--warn) 10%, var(--bg));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-dropzone.rejected { animation: ds-dropzone-shake 0.4s var(--ease); }
+}
+.ds-247420 .ds-dropzone.rejected .ds-dropzone-glyph,
+.ds-247420 .ds-dropzone.rejected .ds-dropzone-label { color: var(--warn); }
+@keyframes ds-dropzone-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+.ds-247420 .ds-dropzone--wrap.rejected > .ds-dropzone-inner {
+  outline-color: var(--warn);
+}
 /* Wrapper form (has children): no permanent chrome - the content renders as if
    the zone were not there, and the dashed affordance overlays it ONLY while a
    drag is in flight. */
@@ -3339,6 +3748,8 @@
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -3413,10 +3824,17 @@
    floor. --ink on the same fill measures 6.27:1. Same principle as the
    --accent/--accent-ink split the token layer documents: a light saturated fill
    takes the dark text tone. Measured in a live browser. */
+/* Severity is never color-alone (gd-14, color-blindness/grayscale-print safe):
+   the bold weight + widened letter-spacing is a shape cue that survives a
+   colorless render, matching how .btn-primary.danger differs from every
+   other .btn-primary at a glance even with color stripped out. */
 .ds-247420 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
   color: var(--ink);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) color-mix(in oklab, var(--ink) 25%, transparent);
+  font-weight: 700;
+  letter-spacing: 0.01em;
 }
 .ds-247420 .btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
 
@@ -3497,7 +3915,7 @@
 .ds-247420 .ds-preview-code::-webkit-scrollbar,
 .ds-247420 .ds-preview-text::-webkit-scrollbar,
 .ds-247420 .ds-preview-body::-webkit-scrollbar,
-.ds-247420 .ds-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
+.ds-247420 .ds-modal-body::-webkit-scrollbar { width: 8px; height: 8px; }
 .ds-247420 .ds-preview-code::-webkit-scrollbar-thumb,
 .ds-247420 .ds-preview-text::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--paper) 28%, transparent);
@@ -3570,6 +3988,12 @@
 .ds-247420 .ds-demo-label { font-size: var(--fs-xs); font-weight: 500; margin: 0 0 var(--space-1); }
 .ds-247420 .ds-demo-desc { font-size: var(--fs-tiny); color: var(--fg-3); margin: 0 0 var(--space-2); }
 
+/* Per-preview backlink to the full token map/doc — names which token
+   families the specimen above it demonstrates, then links out to the
+   generated theme-map for the resolved values. */
+.ds-247420 .tokens-backlink { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
+.ds-247420 .tokens-backlink a { color: inherit; }
+
 @media (max-width: 768px) {
   .ds-247420 .ds-catalog { flex-direction: column; }
   .ds-247420 .ds-catalog-side { width: 100%; height: auto; position: static; border-right: 0; border-bottom: var(--bw-hair) solid var(--rule); }
@@ -3666,13 +4090,25 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   display: inline-flex; align-items: center; gap: 6px;
 }
-/* CSS-drawn half-disc mark on the compact theme toggle: keeps the control
-   legible when its text label is hidden (icon-only rail strip). */
+/* CSS-drawn disc mark on the compact theme toggle: keeps the control
+   legible when its text label is hidden (icon-only rail strip). Per-mode
+   fill gives the icon itself a distinct look for auto/light/dark, so state
+   reads without relying on the title tooltip alone. */
 .ds-247420 .ds-theme-disc {
   flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
   border: var(--bw-hair) solid var(--fg-3);
+  /* auto: half-and-half, matches default (no data-mode) for safety */
+  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
+}
+.ds-247420 .ds-theme-disc[data-mode="auto"] {
   background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
 }
+.ds-247420 .ds-theme-disc[data-mode="paper"] {
+  background: var(--bg); border-color: var(--fg-3);
+}
+.ds-247420 .ds-theme-disc[data-mode="ink"] {
+  background: var(--fg-3); border-color: var(--fg-3);
+}
 
 /* ============================================================
    Chat kit polish — styles every class emitted by Chat /
@@ -3735,6 +4171,7 @@
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .ds-247420 .chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .chat-msg.you .chat-avatar {
@@ -3745,6 +4182,18 @@
   background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
   color: var(--mascot-deep);
 }
+/* Plain assistant turns ('them', no aicat persona) previously fell through to
+   the bare .chat-avatar gray disc with no role identity at all — 'you' and
+   'aicat' both got a tinted background + ring, the default assistant got
+   nothing. Give it the same tinted-background treatment via --color-success
+   (the conventional assistant/bot association, distinct from the accent hue
+   'you' owns and the mascot hue 'aicat' owns) plus a thin identity ring so
+   role is readable from the avatar alone, not just bubble position/color. */
+.ds-247420 .chat-msg.them:not(.aicat) .chat-avatar {
+  background: color-mix(in oklab, var(--color-success) 20%, var(--bg-3));
+  color: color-mix(in oklab, var(--color-success) 65%, var(--fg));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-success) 35%, transparent);
+}
 
 .ds-247420 .chat-stack {
   display: flex; flex-direction: column; gap: var(--space-1);
@@ -3764,6 +4213,13 @@
   min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
+/* Tail corner: the bubble edge nearest its own avatar (bottom-left for
+   'them', bottom-right for 'you') squares off slightly, matching bubble
+   position to the sender's avatar the way a speech-bubble tail would — a
+   consistent radius on all four corners reads as a generic card, not a
+   turn in a conversation. */
+.ds-247420 .chat-msg:not(.you) .chat-bubble { border-bottom-left-radius: var(--r-0); }
+.ds-247420 .chat-msg.you .chat-bubble { border-bottom-right-radius: var(--r-0); }
 .ds-247420 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
 /* Own bubble — calm tinted lead, not a full electric fill (chat stays readable). */
 .ds-247420 .chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
@@ -4048,9 +4504,27 @@
 .ds-247420 .chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: var(--fs-nano); color: var(--fg-2); }
 .ds-247420 .chat-reactions .rxn.you .n { color: var(--accent-ink); }
 
+/* Typing indicator renders through the same .chat-bubble container as a real
+   message, but must never read as a bubble holding actual content — no
+   border, no hover-lift shadow, no tail-corner cut; just a pill-shaped
+   borderless dot cluster, visually lighter than any card/bubble on the page. */
+/* Double-class selector (.chat-bubble.chat-bubble-typing) deliberately, not
+   bare .chat-bubble-typing: chat.css (loaded after app-shell.css on every
+   kit that links both) still carries a plain `.chat-bubble { background:
+   var(--bg-2) }` rule at the same (0,1,0) specificity, and cascade order
+   would let that later rule win over an equal-specificity selector here. */
+.ds-247420 .chat-bubble.chat-bubble-typing {
+  background: transparent;
+  padding: var(--space-2) var(--space-1);
+  border-radius: var(--r-pill);
+}
+.ds-247420 .chat-msg:hover .chat-bubble.chat-bubble-typing { transform: none; box-shadow: none; }
+.ds-247420 .chat-msg:not(.you) .chat-bubble.chat-bubble-typing,
+.ds-247420 .chat-msg.you .chat-bubble.chat-bubble-typing { border-bottom-left-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }
+
 .ds-247420 .chat-typing { display: inline-flex; gap: var(--space-1); align-items: center; }
 .ds-247420 .chat-typing span {
-  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
+  width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3);
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -4172,8 +4646,18 @@
 
 .ds-247420 .aicat-portrait { display: inline-flex; align-items: center; gap: var(--space-2-5); padding: var(--space-1) 0; }
 .ds-247420 .aicat-face {
-  /* 24px is the ICON size inside a 32px round chip — see .chat-file .glyph. */
-  width: 32px; height: 32px; font-size: 24px;
+  /* The face is 3 lines of ascii art ( /\_/\ , ( o.o ) , > ^ < ), not a
+     single icon glyph -- the previous 24px/line-height:normal sizing (sized
+     like .chat-file .glyph's single-char icon) ran to ~3 line-heights tall
+     and clipped the ear/whisker rows against this box's fixed 32px height
+     + overflow:hidden. pico (10px) + line-height:1 fits all 3 lines in 30px.
+     padding:0 overrides the global `pre { padding: var(--space-5) }` (32px)
+     -- box-sizing:border-box + that padding alone exceeded the declared
+     32x32 box, so the box never actually enforced 32x32 and rendered at its
+     forced min-content size instead, clipping the art regardless of font
+     size. */
+  width: 32px; height: 32px; font-size: var(--fs-pico); line-height: 1;
+  padding: 0;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));
   border-radius: 50%; flex-shrink: 0;
@@ -4191,10 +4675,182 @@
    fell back to the paper tone at 3.13:1 on ink. */
 .ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
 
+/* ============================================================
+   Composer attachment-detected badge, context line, hint, toolbar,
+   note strip, elapsed counter, dragover state — all referenced from
+   composer.js / composer-affordances.js but previously had no CSS at
+   all (unstyled DOM nodes / plain text falling through to block
+   defaults).
+   ============================================================ */
+.ds-247420 .chat-composer-context {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-1) 0;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  letter-spacing: 0.01em;
+}
+.ds-247420 button.chat-composer-context {
+  background: transparent; border: 0; cursor: pointer; text-align: left;
+  border-radius: var(--r-0);
+}
+.ds-247420 button.chat-composer-context:hover { color: var(--fg-2); }
+.ds-247420 button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .chat-composer-context-sep { color: var(--fg-3); opacity: 0.6; }
+.ds-247420 .chat-composer-context-bit {
+  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
+  font: inherit; color: var(--fg-3); border-radius: var(--r-0);
+  transition: color var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .chat-composer-context-bit:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
+.ds-247420 .chat-composer-context-bit:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .chat-composer-context-text { color: var(--fg-3); }
+
+.ds-247420 .chat-composer-detected-badge {
+  display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-2-5);
+  margin: 0 0 var(--space-1);
+  background: color-mix(in oklab, var(--accent) 12%, var(--bg-2));
+  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
+  border-radius: var(--r-1);
+  font-size: var(--fs-xs); color: var(--fg);
+}
+.ds-247420 .chat-composer-detected-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-composer-detected-dismiss {
+  flex-shrink: 0; width: 20px; height: 20px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; cursor: pointer; border-radius: 50%;
+  color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .chat-composer-detected-dismiss:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--fg); }
+.ds-247420 .chat-composer-detected-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
+.ds-247420 .chat-composer-hint {
+  width: 100%; order: 2;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: 0 var(--space-1);
+}
+
+.ds-247420 .chat-composer-toolbar {
+  display: flex; align-items: center; gap: var(--space-1);
+  flex-shrink: 0;
+}
+.ds-247420 .chat-composer-toolbar .composer-btn {
+  width: 32px; height: 32px; border-radius: var(--r-1);
+}
+@media (pointer: coarse) {
+  .ds-247420 .chat-composer-toolbar .composer-btn { width: 44px; height: 44px; }
+}
+
+.ds-247420 .chat-composer-note {
+  width: 100%; order: 3;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: var(--space-1) var(--space-1) 0;
+}
+
+.ds-247420 .chat-composer-elapsed {
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  flex-shrink: 0; padding: 0 var(--space-1);
+}
+
+.ds-247420 .chat-composer.dragover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
+}
+
+/* ============================================================
+   EmojiPicker (ov-emoji-*) — an anchored popover with search input,
+   category tabs, and an emoji grid; previously entirely unstyled.
+   Search input mirrors .ds-search-input's tonal-fill treatment so it
+   reads consistently with the rest of the system's search fields.
+   ============================================================ */
+.ds-247420 .ov-emoji-root {
+  position: fixed;
+  display: flex; flex-direction: column; gap: var(--space-2);
+  width: 280px; max-height: 320px;
+  padding: var(--space-2-5);
+  background: var(--bg);
+  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-overlay, var(--shadow-3));
+  z-index: var(--z-dropdown, var(--z-raised));
+}
+.ds-247420 .ov-emoji-search {
+  width: 100%; box-sizing: border-box;
+  font: inherit; font-size: var(--fs-sm); color: var(--fg);
+  background: var(--bg-2); border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  border-radius: var(--r-1);
+  height: var(--ctl-sm, 32px);
+  padding: 0 var(--space-2-5);
+  transition: box-shadow var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .ov-emoji-search::placeholder { color: var(--fg-3); }
+.ds-247420 .ov-emoji-search:focus-visible,
+.ds-247420 .ov-emoji-search:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--accent), 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+}
+.ds-247420 .ov-emoji-tabs {
+  display: flex; gap: var(--space-1);
+  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  padding-bottom: var(--space-1);
+}
+.ds-247420 .ov-emoji-tab {
+  flex: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 30px; font-size: var(--fs-sm);
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .ov-emoji-tab:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .ov-emoji-tab[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 16%, transparent); }
+.ds-247420 .ov-emoji-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .ov-emoji-grid { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
+.ds-247420 .ov-emoji-grid-inner {
+  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1);
+}
+.ds-247420 .ov-emoji-cell {
+  display: inline-flex; align-items: center; justify-content: center;
+  aspect-ratio: 1; font-size: var(--fs-lg); line-height: 1;
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), transform 0.12s ease;
+}
+.ds-247420 .ov-emoji-cell:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); transform: scale(1.12); }
+.ds-247420 .ov-emoji-cell:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; background: color-mix(in oklab, var(--fg) 10%, transparent); }
+.ds-247420 .ov-emoji-empty {
+  grid-column: 1 / -1;
+  text-align: center; color: var(--fg-3); font-size: var(--fs-xs);
+  padding: var(--space-3) 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ov-emoji-cell { transition: background var(--dur-snap, .15s) var(--ease, ease); }
+  .ds-247420 .ov-emoji-cell:hover { transform: none; }
+}
+
 /* ============================================================
    Sidebar polish: hide zero-count badges; tonal active state;
    monospace count chips.
    ============================================================ */
+/* Rail row rhythm: the sidebar rows (bins/labels) previously packed at
+   --space-hair (2px) margin-bottom while the main content column reads at
+   the --space-5/--space-3 outer/inner rhythm (AGENTS.md "panel rhythm").
+   Bumping the inter-row gap to --space-1-5 (5px) — still a tight, dense-app
+   value, but enough that adjacent rows no longer read as glued together —
+   and making it density-aware via [data-density] mirrors the existing
+   compact-density override pattern in files.css (.ds-file-grid[data-density]).
+   [data-density="compact"] keeps the old tighter feel for long rail lists;
+   [data-density="spacious"] opens it further. */
+.ds-247420 .app-side a { margin-bottom: var(--space-1-5); }
+.ds-247420 .app-side[data-density="compact"] a,
+.ds-247420 .app-side-shell[data-density="compact"] .app-side a { margin-bottom: var(--space-hair); }
+.ds-247420 .app-side[data-density="spacious"] a,
+.ds-247420 .app-side-shell[data-density="spacious"] .app-side a { margin-bottom: var(--space-2); }
+
 .ds-247420 .app-side .count {
   padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
   font-family: var(--ff-mono); letter-spacing: 0.04em;
@@ -4298,12 +4954,32 @@
    :disabled pseudo-class, so a disabled link-styled button relies entirely
    on this class selector for its visual treatment (aria-disabled + tabindex
    are set in JS; this is the paired CSS half). */
+/* opacity:0.6 alone barely separated from an active .btn-primary against a
+   busy background -- close enough in dark mode that users clicked disabled
+   buttons expecting them to work. grayscale flattens any color signal (no
+   more "still looks clickable-green") and the steeper opacity drop reads as
+   unmistakably inert at a glance, not just slightly dimmed. */
 .ds-247420 .btn:disabled, .ds-247420 .btn-primary:disabled, .ds-247420 .btn-ghost:disabled, .ds-247420 .btn.is-disabled, .ds-247420 .btn-primary.is-disabled, .ds-247420 .btn-ghost.is-disabled, .ds-247420 button:disabled, .ds-247420[disabled] {
-  opacity: 0.6;
+  opacity: 0.5;
+  filter: grayscale(60%);
   cursor: not-allowed;
   pointer-events: none;
 }
 
+/* Systemic hover fallback — button-like elements with no design-system class
+   (a bare <button>, [role="button"], or a generic .row/.chip usage) get a
+   `transition` declared above (line ~106) but nothing to transition to, so
+   they look inert until clicked. This is a low-specificity (0,0,1)/(0,1,1)
+   catch-all: any element that also carries `.btn`/`.btn-primary`/`.btn-ghost`/
+   `.ds-icon-btn`/etc. keeps its own component `:hover` (those selectors are
+   equal-or-higher specificity and, for the shared ones, declared later in
+   the cascade), so this never overrides a deliberate per-component hover —
+   it only fills the gap for elements that don't have one. */
+.ds-247420 button:not(:disabled):hover,
+.ds-247420[role="button"]:not([aria-disabled="true"]):hover {
+  background-color: var(--panel-hover, var(--bg-3));
+}
+
 /* Loading state — spinning indicator */
 @keyframes spinner-rotate {
   from { transform: rotate(0deg); }
@@ -4311,10 +4987,12 @@
 }
 /* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
    busy indicator) via the shared spinner-rotate keyframe. Respects reduced
-   motion. Use instead of a decorative rotation glyph. */
+   motion. Use instead of a decorative rotation glyph.
+   Ring spinner — use for larger blocking/full-region loading states. */
 .ds-247420 .ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
 @media (prefers-reduced-motion: reduce) { .ds-247420 .ds-spin { animation: none; } }
 
+/* Ring spinner — use for larger blocking/full-region loading states. */
 .ds-247420 .loading { position: relative; }
 .ds-247420 .loading::after {
   content: '';
@@ -4496,6 +5174,7 @@
 }
 .ds-247420 .ds-context-menu-item.danger {
   color: var(--warn);
+  box-shadow: inset 2px 0 0 var(--warn);
 }
 .ds-247420 .ds-context-menu-item.danger:hover {
   background: color-mix(in oklab, var(--warn) 12%, var(--bg));
@@ -4598,6 +5277,7 @@
 .ds-247420 .prose p { margin: 0 0 var(--space-4) 0; }
 .ds-247420 .prose p:last-child { margin-bottom: 0; }
 .ds-247420 .prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
+.ds-247420 .prose a:visited { color: color-mix(in oklab, var(--accent-ink) 70%, var(--purple-2, var(--fg-3))); }
 .ds-247420 .prose a:hover { text-decoration-color: currentColor; }
 
 /* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
@@ -4614,7 +5294,13 @@
   transform: rotate(-2deg);
   white-space: nowrap;
 }
-.ds-247420 .stamp.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
+/* border-color previously matched background exactly (var(--ink) on both) --
+   same class of bug as the colors-core "paper" swatch: a border drawn in the
+   identical color as its own fill is invisible, so the ink-toned stamp was
+   the one variant on the page missing its box outline. --paper reads as a
+   visible ring against the ink fill (paper-on-ink is this token pair's
+   whole reason to exist), matching every other .stamp variant's contrast. */
+.ds-247420 .stamp.ink { background: var(--ink); border-color: var(--paper); color: var(--paper); }
 .ds-247420 .stamp.acid { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
 .ds-247420 .stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
 .ds-247420 .stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
@@ -4629,6 +5315,11 @@
   border: 2px solid var(--fg);
   border-radius: var(--r-hair);
   background: transparent; color: var(--fg);
+  /* .stamp's own caption claims the rubber-stamp motif is "always rotated
+     slightly" -- .btn-stamp is the same visual face as an interactive
+     <button> (preview/stamps-lore.html's second row) and had no rotation at
+     all, breaking that claim for every stamp in that row. */
+  transform: rotate(-2deg);
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .btn-stamp:hover { background: var(--panel-hover); }
@@ -4645,12 +5336,25 @@
   width: 100%; height: 0; border: 0;
 }
 .ds-247420 hr.rule { border-top: 1px solid var(--rule); }
-.ds-247420 hr.rule-double { border-top: 4px double var(--rule-strong); }
-.ds-247420 hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
-
-/* Hairline-only text input — no box, no fill. A single bottom rule that
-   thickens to 2px on focus, matching the row/rule zero-border aesthetic
-   instead of a browser-default boxed field. */
+.ds-247420 hr.rule-double {
+  height: 3px;
+  border-top: 1px solid var(--rule-strong);
+  border-bottom: 1px solid var(--rule-strong);
+}
+/* 1px was indistinguishable from .rule -- border-style:dotted needs enough
+   width to actually draw a gap between dots; below ~2px (esp. at DPRs where
+   1px resolves to a sub-pixel value like 0.8px) Chrome collapses it to a
+   solid line, which is exactly what preview/rules.html's report caught live. */
+.ds-247420 hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
+
+/* Hairline-only text input — no full box, no permanent fill. A single bottom
+   rule that thickens to 2px on focus, matching the row/rule zero-border
+   aesthetic instead of a browser-default boxed field. A completely flat,
+   static hairline reads as a static label rather than an editable control
+   at a glance (no cue at rest, nothing on hover) -- the very faint permanent
+   wash plus a stronger hover tint below signal "this is a field" without
+   reverting to the boxed/filled chrome the hairline design deliberately
+   moved away from. */
 .ds-247420 .input {
   display: block; width: 100%; box-sizing: border-box;
   /* appearance:none alone is not enough: with color-scheme:dark set on the
@@ -4664,11 +5368,13 @@
   color-scheme: normal;
   border: 0; border-bottom: 1px solid var(--rule-strong);
   border-radius: var(--r-0);
-  background: transparent;
+  background: color-mix(in oklab, var(--fg) 2.5%, transparent);
   box-shadow: none;
   padding: var(--space-2) var(--space-1);
   font: inherit; color: var(--fg);
+  transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
+.ds-247420 .input:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); }
 /* Touch floor for the BASE input. Several specific inputs already carried this
    (ds-file-filter-input, ds-modal-input, ds-term-input) but the primitive every
    form actually uses did not, so a plain field measured 34px under a coarse
@@ -4686,6 +5392,15 @@
   border-bottom-color: var(--accent-ink);
 }
 
+/* Switch primitive (form-primitives.js Toggle) -- track + sliding knob.
+   Canonical definition lives in editor-primitives.css alongside the rest of
+   the .ds-check/.ds-radio/.ds-toggle form-primitive family (that file loads
+   AFTER this one in the build.mjs concat order, so a second .ds-toggle block
+   here was dead weight that silently lost the cascade while still disagreeing
+   on size/colors/knob-offset with the surviving rule — a duplicate-source-of-
+   -truth foot-gun, not an intentional override). Removed; see
+   editor-primitives.css's ".ds-toggle" block for track/knob/disabled/focus. */
+
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
    browser-default white boxes in dark mode and labels collided with inputs
@@ -4773,6 +5488,15 @@
    button) - transparent to any flex/grid layout the bare input previously
    sat in directly. */
 .ds-247420 .ds-search-input-wrap { display: contents; }
+/* Leading-icon slot, matching .app-search's icon placement in Topbar so the
+   two search surfaces read as one control family instead of icon-vs-no-icon. */
+.ds-247420 .ds-search-field { position: relative; display: inline-flex; align-items: center; min-width: 0; }
+.ds-247420 .ds-search-field .ds-search-icon {
+  position: absolute; left: var(--space-3);
+  display: inline-flex; pointer-events: none;
+  color: var(--fg-3); opacity: 0.6;
+}
+.ds-247420 .ds-search-field .ds-search-input { padding-left: calc(var(--space-3) + 15px + var(--space-2)); }
 
 /* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
    ghost-icon treatment but sized to the kit's 44px touch-target floor
@@ -4794,7 +5518,7 @@
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-search-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 .ds-247420 .ds-field input:not(.input):focus-visible,
 .ds-247420 .ds-field textarea:not(.input):focus-visible,
@@ -4809,12 +5533,12 @@
 .ds-247420 .ds-field input:not(.input):disabled,
 .ds-247420 .ds-field textarea:not(.input):disabled,
 .ds-247420 .ds-field .ds-select:disabled {
-  opacity: .55;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 .ds-247420 .ds-field input:not(.input)[aria-invalid="true"],
 .ds-247420 .ds-field textarea:not(.input)[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--danger);
 }
 
 /* Clear button for text inputs */
@@ -5021,18 +5745,61 @@
   }
 }
 
+/* Stacking host for the imperative toast()/<Toast> component
+   (src/components/editor-primitives/toast.js). One fixed-position column;
+   individual toasts are appended/removed as siblings inside it rather than
+   each toast fixed-positioning itself, so more than one toast in flight
+   stacks instead of overlapping at the same bottom-right point. */
+.ds-247420 .ds-ep-toast-host {
+  position: fixed; z-index: var(--z-toast);
+  bottom: 24px; right: 24px;
+  display: flex; flex-direction: column-reverse; gap: var(--space-2);
+  pointer-events: none;
+}
+.ds-247420 .ds-ep-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: var(--space-3);
+  background: var(--bg-2); color: var(--fg);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  padding: var(--space-3) var(--space-4);
+  max-width: 320px;
+  box-shadow: var(--shadow-overlay);
+  font-size: var(--fs-sm);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-ep-toast { animation: toast-slide-in 0.3s ease-out; }
+  .ds-247420 .ds-ep-toast.leaving { animation: toast-slide-in 0.2s ease-in reverse; }
+}
+.ds-247420 .ds-ep-toast.kind-error   { border-color: var(--danger, var(--warn)); }
+.ds-247420 .ds-ep-toast.kind-success { border-color: var(--green-2); }
+.ds-247420 .ds-ep-toast.kind-warning { border-color: var(--amber); }
+.ds-247420 .ds-ep-toast-msg { flex: 1; }
+.ds-247420 .ds-ep-toast-action {
+  flex-shrink: 0;
+  background: transparent; border: 0; color: var(--accent-ink);
+  font: inherit; font-weight: 600; cursor: pointer; padding: 0;
+}
+.ds-247420 .ds-ep-toast-action:hover { text-decoration: underline; }
+
+@media (max-width: 480px) {
+  .ds-247420 .ds-ep-toast-host { bottom: 16px; right: 16px; left: 16px; }
+  .ds-247420 .ds-ep-toast { max-width: none; }
+}
+
 /* ============================================================
    Spinner — animated loading indicator
    ============================================================ */
+/* Dots spinner — use for small inline/compact loading states. */
 .ds-247420 .ds-spinner {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--space-1);
   align-items: center;
   height: 16px;
 }
 .ds-247420 .ds-spinner span {
-  width: 4px;
-  height: 4px;
+  width: var(--space-1);
+  height: var(--space-1);
   border-radius: 50%;
   background: var(--accent);
 }
@@ -5043,23 +5810,28 @@
   .ds-247420 .ds-spinner span:nth-child(3) { animation-delay: 0.36s; }
 }
 
-.ds-247420 .ds-spinner-lg { height: 24px; gap: 6px; }
-.ds-247420 .ds-spinner-lg span { width: 6px; height: 6px; }
+.ds-247420 .ds-spinner-lg { height: 24px; gap: var(--space-1-75); }
+.ds-247420 .ds-spinner-lg span { width: var(--space-1-75); height: var(--space-1-75); }
 
-.ds-247420 .ds-spinner-sm { height: 12px; gap: 2px; }
-.ds-247420 .ds-spinner-sm span { width: 2px; height: 2px; }
+.ds-247420 .ds-spinner-sm { height: var(--space-2-5); gap: var(--space-hair); }
+.ds-247420 .ds-spinner-sm span { width: var(--space-hair); height: var(--space-hair); }
 
-.ds-247420 .ds-spinner-xs { height: 8px; gap: 1px; }
+.ds-247420 .ds-spinner-xs { height: var(--space-2); gap: 1px; }
 .ds-247420 .ds-spinner-xs span { width: 1.5px; height: 1.5px; }
 
-.ds-247420 .ds-spinner-xl { height: 32px; gap: 8px; }
-.ds-247420 .ds-spinner-xl span { width: 8px; height: 8px; }
+.ds-247420 .ds-spinner-xl { height: var(--space-5); gap: var(--space-2); }
+.ds-247420 .ds-spinner-xl span { width: var(--space-2); height: var(--space-2); }
 
 @keyframes ds-bounce {
   0%, 80%, 100% { transform: translateY(0); }
   40% { transform: translateY(-8px); }
 }
 
+/* Two spinner visual languages coexist intentionally: dots (.ds-spinner*)
+   are for small inline/compact loading states (buttons, chips, list rows),
+   the ring (.loading::after in states-interactions.css) is for larger
+   blocking/full-region loading states (panels, full views). */
+
 /* ============================================================
    Skeleton — animated loading placeholder
    ============================================================ */
@@ -5071,9 +5843,11 @@
 .ds-247420 .ds-skeleton {
   background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
   background-size: 200% 100%;
-  animation: ds-shimmer 1.5s infinite;
   border-radius: var(--r-1);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-skeleton { animation: ds-shimmer 1.5s infinite; }
+}
 
 @keyframes ds-shimmer {
   0% { background-position: 200% 0; }
@@ -5103,7 +5877,7 @@
   flex-shrink: 0;
   color: var(--alert-tone);
   font-weight: 600;
-  min-width: 20px;
+  min-width: var(--icon-md);
   text-align: center;
 }
 
@@ -5132,13 +5906,14 @@
   cursor: pointer;
   color: var(--fg-3);
   padding: 0;
-  font-size: 14px;
+  font-size: var(--fs-xs);
   line-height: 1;
-  min-width: 20px;
+  min-width: var(--icon-md);
   text-align: center;
   transition: color var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-alert-dismiss:hover { color: var(--fg); }
+.ds-247420 .ds-alert-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* ============================================================
    Responsive Perfection — Drawer rail, ultrawide cap, mobile compact
@@ -5342,10 +6117,26 @@
 /* Column resize handles: a thin keyboard-accessible separator pinned to the
    right edge of each chrome track; drag (or ArrowLeft/Right) writes a clamped
    inline --ws-*-w. */
-.ds-247420 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
-.ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
-.ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); }
+.ds-247420 .ws-resizer { position: relative; grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; display: flex; align-items: center; justify-content: center; }
+.ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: var(--rule); opacity: 0.4; transition: background var(--dur-snap) var(--ease), opacity var(--dur-snap) var(--ease); }
+.ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); opacity: 1; }
+/* Grip: a small pill of dots centered on the handle, visible at rest (low
+   contrast) so the resizer reads as a draggable affordance rather than an
+   invisible hit zone, then brightens to accent on hover/drag like the line. */
+.ds-247420 .ws-resizer::before {
+  content: ""; position: absolute; width: 4px; height: 20px; border-radius: var(--r-hair);
+  background-image: radial-gradient(circle, var(--fg-3) 1px, transparent 1px);
+  background-size: 4px 5px; background-repeat: repeat-y; background-position: center;
+  opacity: 0.5; transition: opacity var(--dur-snap) var(--ease), background-image var(--dur-snap) var(--ease);
+  pointer-events: none;
+}
+.ds-247420 .ws-resizer:hover::before, .ds-247420 .ws-resizer:focus-visible::before {
+  opacity: 1; background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
+}
 .ds-247420 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
+/* Active drag state: wider + fully opaque accent grip so the handle a
+   fast-moving pointer has left :hover on still visibly reads as "gripped". */
+.ds-247420 .ws-resizer.ws-resizer-active::after { background: var(--accent); width: 3px; }
 .ds-247420 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ds-247420 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ds-247420 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -5400,7 +6191,10 @@
 .ds-247420 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ds-247420 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
-.ds-247420 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
+/* Wordmark treatment matches .brand (topbar.css) — same display family/weight/
+   tracking — so the rail brand reads as the SAME logotype as every other kit's
+   topbar wordmark instead of a lighter, differently-set imitation. */
+.ds-247420 .ws-rail-brand { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: var(--tr-tight); color: var(--fg); white-space: nowrap; overflow: hidden; }
 .ds-247420 .ws-rail-action {
   display: flex; align-items: center; gap: var(--space-2);
   padding: var(--space-2) var(--space-3); margin: var(--space-1) 0;
@@ -5423,7 +6217,9 @@
 .ds-247420 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ds-247420 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.ds-247420 .ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+/* Shape/color come from the shared .ds-badge component (see app-shell/primitives.css);
+   this class is now just the rail-item layout hook (spacing, collapsed-state targeting). */
+.ds-247420 .ws-rail-item-count { flex: none; margin-inline-start: var(--space-1); }
 .ds-247420 .ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
 .ds-247420 .ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
 .ds-247420 .ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
@@ -5466,7 +6262,14 @@
    because the chat thread carries its own --measure gutter. */
 .ds-247420 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
 .ds-247420 .ws-main.ws-main--flush { padding: 0; }
+/* Skip-link target (workspace-shell.js's "#ws-main" skip-link, tabindex="-1")
+   — it does receive real keyboard-driven focus when the skip link is
+   activated, so it needs a visible ring rather than a bare outline:none. */
 .ds-247420 .ws-main:focus { outline: none; }
+.ds-247420 .ws-main:focus-visible {
+  outline: var(--focus-w) solid var(--focus-color);
+  outline-offset: calc(-1 * var(--focus-offset));
+}
 
 /* Right context pane */
 .ds-247420 .ws-pane {
@@ -5623,7 +6426,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ds-247420 .ws-shell, .ds-247420 .ws-rail, .ds-247420 .ws-pane, .ds-247420 .ws-sessions, .ds-247420 .ws-scrim { transition: none; }
-  .ds-247420 .ws-resizer::after { transition: none; }
+  .ds-247420 .ws-resizer::after, .ds-247420 .ws-resizer::before { transition: none; }
 }
 
 /* ============================================================
@@ -5659,13 +6462,26 @@
 .ds-247420 .ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
 .ds-247420 .ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
+.ds-247420 .ds-filter-pill[class*="tone-"]::before {
+  content: '';
+  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
+  margin-right: var(--space-1);
+  background: currentColor;
+}
+.ds-247420 .ds-filter-pill.tone-accent  { color: var(--accent-ink); }
+.ds-247420 .ds-filter-pill.tone-warn    { color: var(--amber); }
+.ds-247420 .ds-filter-pill.tone-live    { color: var(--sky); }
+.ds-247420 .ds-filter-pill.tone-sun     { color: var(--sun); }
+.ds-247420 .ds-filter-pill.tone-success { color: var(--green-deep); }
+.ds-247420 .ds-filter-pill.tone-dim     { color: var(--fg-3); }
+
 /* Touch floor for the new small controls. */
 @media (pointer: coarse) {
   .ds-247420 .row-act, .ds-247420 .ds-filter-pill { min-height: 44px; }
 }
 
 /* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
-.ds-247420 .ds-file-act:disabled { opacity: .45; cursor: default; }
+.ds-247420 .ds-file-act:disabled { opacity: .5; cursor: default; }
 .ds-247420 .ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
 .ds-247420 .ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
@@ -5698,6 +6514,39 @@
   .ds-247420 .ds-live-log { height: auto; max-height: none; overflow: visible; }
   .ds-247420 .ds-stat, .ds-247420 .kpi-card { border: 1px solid var(--rule); }
   .ds-247420 .ds-session-row { break-inside: avoid; }
+
+  /* Receipt table (Receipt() in src/components/content/panel.js, `.kv`) — the
+     project_page kit's "receipt" section, and any other kv-table consumer.
+     On screen it inherits panel/token colors that can render as near-white
+     text on a printer's assumed-white page background if the browser's
+     "background graphics" print option is off (the common default); force
+     the LIGHT-theme ink/paper tokens (real print-page colors, not a raw
+     literal — --ink/--paper are the same "true black text on true white
+     page" values the light theme already defines) and visible cell borders
+     so it stays legible without relying on background-graphics printing at
+     all. break-inside:avoid keeps a receipt from splitting a row across a
+     page boundary. */
+  .ds-247420 .kv { border-collapse: collapse; width: 100%; color: var(--ink); background: var(--paper); }
+  .ds-247420 .kv tr { break-inside: avoid; }
+  .ds-247420 .kv td { border: 1px solid var(--paper-3); padding: 4px 8px; color: var(--ink); }
+
+  /* Any button/interactive-only affordance still present inside otherwise-
+     printable content (copy buttons, expand/collapse toggles, filter pills,
+     the receipt/doc section's own action row) is chrome, not content. */
+  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 .row-act, .ds-247420 .ds-filter-pills, .ds-247420 .app-search, .ds-247420 input[type="search"] { display: none; }
+
+  /* Force real ink-on-paper for body copy: panel/fg tokens are tuned for
+     screen surfaces (including dark theme, where --panel-text can resolve
+     near-white) and a printer defaults to a white page regardless of
+     data-theme, so an unconverted dark-theme page would print near-invisible
+     text without this override. Same --ink/--paper light-theme pair as the
+     receipt table above, not a second raw literal. */
+  /* No !important: source order already wins here (this rule is the last
+     word inside its own @media print block, same as every other override in
+     this file), and an unconditional !important on `body` would beat even a
+     future print-specific consumer override with higher specificity. */
+  .ds-247420 body, .ds-247420 .app-main, .ds-247420 .page-body, .ds-247420 .ds-lede { color: var(--ink); background: var(--paper); }
+  .ds-247420 a { color: var(--ink); text-decoration: underline; }
 }
 
 /* ============================================================
@@ -6056,7 +6905,17 @@
     aspect-ratio: auto;
   }
 }
-.ds-247420 .ds-deck-slide { flex: 1; display: flex; min-width: 0; }
+.ds-247420 .ds-deck-slide {
+  flex: 1; display: flex; min-width: 0;
+  animation: ds-deck-slide-in var(--dur-base) var(--ease);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-deck-slide { animation: none; }
+}
+@keyframes ds-deck-slide-in {
+  from { opacity: 0; transform: translateY(var(--space-1-75)); }
+  to { opacity: 1; transform: none; }
+}
 .ds-247420 .ds-deck-controls {
   /* 14px sits between --space-2-75 (12) and --space-3 (16) with no tier; it is
      the deck control spacing tuned against the mono glyph run. */
@@ -6067,6 +6926,19 @@
 @media (pointer: coarse) {
   .ds-247420 .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
 }
+/* Dot progress indicator: one dot per slide, current slide filled with
+   --accent (same fill token .ds-dot-on uses elsewhere in the system), rest
+   dim at --fg-3 so the row reads as a track, not a second counter. */
+.ds-247420 .ds-deck-progress {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--space-1-5); padding-bottom: var(--space-2);
+}
+.ds-247420 .ds-deck-dot {
+  width: var(--space-1-5); height: var(--space-1-5); border-radius: 50%;
+  background: var(--fg-3); flex: 0 0 auto;
+  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
+}
+.ds-247420 .ds-deck-dot--active { background: var(--accent); transform: scale(1.3); }
 /* Kit small-label voice — one local composition of the house `.t-label` recipe
    (base.css) for every eyebrow/label in the appended kit blocks below. These
    previously each restated the four declarations with drifted tracking
@@ -6177,7 +7049,12 @@
 }
 .ds-247420 .ds-gallery-tile {
   cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1-75);
-  padding: var(--space-2-75); border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
+  padding: var(--space-2-75); border-radius: var(--r-1);
+  /* Fixed aspect-ratio (not just a min-height floor) so every tile in the grid
+     occupies the same shape regardless of caption length — the ascii specimen
+     is centered inside via .ds-tile-cap's flex alignment, the equivalent of
+     object-fit: cover for a text tile with no bitmap to crop. */
+  aspect-ratio: 4 / 3;
   border: 0; text-align: left; font: inherit; color: inherit;
   background: var(--tile-tone, var(--panel-1));
   transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
@@ -6187,7 +7064,7 @@
    translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
 .ds-247420 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-247420 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
+.ds-247420 .ds-gallery-tile--tight { aspect-ratio: 3 / 2; }
 /* The lightbox scrim/card chrome itself is now Dialog's (.ds-ep-dialog /
    .ds-ep-dialog-backdrop in editor-primitives.css) — Dialog already ships
    role="dialog", aria-modal, Tab-trap and focus-restore-on-close, which the
@@ -6211,13 +7088,21 @@
 @media (max-width: 480px) {
   .ds-247420 .ds-topbar-search { flex-basis: 100%; }
 }
-.ds-247420 .ds-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
+/* Namespaced .ds-kit-empty-state (not .ds-empty-state) -- .ds-empty-state is
+   primitives.css's shared base (padding var(--space-6), color var(--fg-3));
+   this sheet loads after it in app-shell.css's import order, so reusing the
+   same class name silently overrode that base's padding/color for every
+   consumer, defeating the "shared base, one place" contract primitives.css
+   documents. This block is unused by any component today, but kept
+   namespaced so a future consumer gets this sheet's fluid clamp() treatment
+   deliberately rather than by cascade accident. */
+.ds-247420 .ds-kit-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
 /* Fluid ICON size (empty-state mark), not a type tier: it scales with the
    viewport between 24 and 32px. Every fluid --fs-* tier is a heading clamp
    tuned to cqi + heading weight, so none of them substitutes here. */
-.ds-247420 .ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
-.ds-247420 .ds-empty-state-msg { margin: var(--space-1-75) 0; }
-.ds-247420 .ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
+.ds-247420 .ds-kit-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
+.ds-247420 .ds-kit-empty-state-msg { margin: var(--space-1-75) 0; }
+.ds-247420 .ds-kit-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
 
 /* --- system primer ------------------------------------------ */
 /* The three primer panels below share one fluid inset,
@@ -6289,12 +7174,21 @@
   gap: var(--space-1-75, 6px);
 }
 /* Table() scroll containment — wide tables scroll inside their own box,
-   never the page body. */
+   never the page body. overflow-x:auto alone works but gives no visible cue
+   that a table is wider than its box (macOS overlay scrollbars stay hidden
+   until an active hover/scroll gesture) -- columns beyond the fold read as
+   simply missing rather than reachable. An always-visible thin scrollbar
+   track makes the overflow legible without a gesture first. */
 .ds-247420 .ds-table-wrap {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   max-width: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--rule-strong) transparent;
 }
+.ds-247420 .ds-table-wrap::-webkit-scrollbar { height: 8px; }
+.ds-247420 .ds-table-wrap::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); }
+.ds-247420 .ds-table-wrap::-webkit-scrollbar-track { background: transparent; }
 .ds-247420 .ds-table-wrap > table { min-width: 100%; }
 /* Sortable column headers (Table's opt-in sortable prop) — a docstudio-cue
    addition: color stays neutral at rest (this is a structural control, not a
@@ -6341,6 +7235,11 @@
 .ds-247420 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
 .ds-247420 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-247420 .ds-toggle-btn { min-width: 78px; }
+/* Side-by-side checked/unchecked reference pair (settings kit theme panel) --
+   documents the visual difference between states in one static, non-live
+   spot rather than requiring a viewer to toggle a real control back and
+   forth to compare. */
+.ds-247420 .ds-toggle-state-sample { display: flex; align-items: center; gap: var(--space-1-5, 6px); }
 .ds-247420 .ds-toggle-label { margin-left: var(--space-2, 8px); color: inherit; opacity: 0.7; }
 .ds-247420 .ds-btn-warn { color: var(--warn); }
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
@@ -6356,6 +7255,14 @@
   justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap;
   padding: calc(var(--space-2-75) * var(--density)) calc(var(--space-3) * var(--density));
   background: var(--panel-2); border-radius: var(--r-1);
+  /* --panel-1 (this bar's parent .panel surface) and --panel-2 are adjacent
+     lightness steps that measure only ~1.1-1.5:1 apart (both themes) -- too
+     close to read as a distinct nesting depth by background tone alone.
+     A hairline border is the same edge-definition device .panel itself
+     already uses (see the top of this file) rather than a token-lightness
+     change, which would risk the fg-3-on-panel-2 text contrast that is
+     already right at its AA floor in the dark theme. */
+  border: var(--bw-hair) solid var(--rule);
   margin: calc(var(--space-5) * var(--density)) 0 var(--space-2);
   box-shadow: var(--shadow-2, var(--shadow-1));
 }
@@ -6401,13 +7308,37 @@
 /* .ds-auth-field-label joins the kit small-label voice above, no overrides. */
 .ds-247420 .ds-auth-field-input-row { position: relative; display: flex; align-items: center; }
 /* Reserves room for the absolutely-positioned toggle: its --space-1 inset plus
-   the --ds-icon-btn-sm 26px box, so the input text never sits under it. */
+   the --ds-icon-btn-sm 26px box, so the input text never sits under it. This
+   only holds at the pointer:fine 26px box size, though -- the coarse-pointer
+   touch-floor rule (states-interactions.css) grows .ds-icon-btn-sm to a
+   min-width/height of 44px without this padding following it, so on a
+   touchscreen the enlarged hit target actually overlapped 14px into the
+   typed password text (44 + 4 inset > 34 reserved). Reserve for the coarse
+   floor too, gated behind the same media query, so clearance holds at both
+   sizes instead of only the desktop one. */
 .ds-247420 .ds-auth-field-input-row .input { flex: 1 1 auto; padding-right: calc(26px + var(--space-2)); }
+@media (pointer: coarse) {
+  .ds-247420 .ds-auth-field-input-row .input { padding-right: calc(44px + var(--space-2)); }
+}
 .ds-247420 .ds-auth-pw-toggle { position: absolute; right: var(--space-1); }
 .ds-247420 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
 .ds-247420 .ds-auth-remember { display: flex; align-items: center; gap: var(--space-1-75); cursor: pointer; }
+/* The native checkbox is already re-tinted site-wide via `accent-color:
+   var(--accent-ink)` in states-interactions.css (that rule's own comment
+   names this exact control) -- reused here rather than hand-drawing a new
+   checkbox component. What that global rule doesn't cover is size: the UA
+   default box renders at ~13px, which is under the 24px comfortable-tap
+   floor other controls in this row (the link text, the input fields) sit
+   above. Sized up on the existing --space-2-5 token, no new primitive. */
+.ds-247420 .ds-auth-remember input[type="checkbox"] { width: var(--space-2-5); height: var(--space-2-5); margin: 0; }
 .ds-247420 .ds-auth-remember-text { color: var(--panel-text-2); font-size: var(--fs-tiny); }
-.ds-247420 .ds-auth-forgot { font-size: var(--fs-tiny); }
+/* --accent-ink, not --accent, per the design system's text-vs-fill split
+   (AGENTS.md): --accent is a background/border-color lead only, --accent-ink
+   is the tone actually verified for text contrast. The link was previously
+   unstyled prose color at --fs-tiny, reading as inert grey next to the
+   checkbox label it shares a row with. */
+.ds-247420 .ds-auth-forgot { font-size: var(--fs-tiny); color: var(--accent-ink); font-weight: 500; }
+.ds-247420 .ds-auth-forgot:hover { text-decoration: underline; }
 /* Error and status share layout but not color: a color-only distinction
    between role="alert" (something is wrong) and role="status" (informational)
    fails WCAG 1.4.1, so each also carries a distinct ASCII marker via ::before —
@@ -6417,6 +7348,28 @@
 .ds-247420 .ds-auth-error::before { content: '[!]'; flex: none; }
 .ds-247420 .ds-auth-status { color: var(--panel-text-2); }
 .ds-247420 .ds-auth-status::before { content: '[i]'; flex: none; }
+/* The shared Divider() label defaults to --fs-tiny/--panel-text-3 (editor-
+   primitives.css), tuned for a dense editor toolbar rule -- inside the auth
+   form it sat at the same weight as fine print two rows below it and read
+   as barely-there rather than a section break between the password form and
+   the OAuth row. Scoped to this form only (never edit the shared component
+   sheet for one consumer): borrows the kit small-label voice above (mono,
+   --fs-nano, --tr-label, uppercase) at --panel-text-2 instead of the
+   dimmer -3 tier, plus the ::before/::after rule lines pushed to full
+   --panel-text opacity so the break itself, not just the label, is visible. */
+.ds-247420 .ds-auth-form .ds-ep-divider-labeled { margin: var(--space-1) 0; }
+.ds-247420 .ds-auth-form .ds-ep-divider-labeled::before,
+.ds-247420 .ds-auth-form .ds-ep-divider-labeled::after {
+  border-top-color: var(--panel-text-3);
+}
+.ds-247420 .ds-auth-form .ds-ep-divider-label {
+  font-family: var(--ff-mono);
+  font-size: var(--fs-nano);
+  font-weight: 600;
+  letter-spacing: var(--tr-label);
+  text-transform: uppercase;
+  color: var(--panel-text-2);
+}
 .ds-247420 .ds-auth-providers { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 .ds-247420 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2-5); }
 .ds-247420 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
@@ -6483,6 +7436,14 @@
   display: flex; flex-direction: column; gap: 0;
   background: var(--ink); border-radius: var(--r-1);
   font-family: var(--ff-mono); font-size: var(--fs-micro); line-height: 1.65;
+  /* Responsive strategy for long logs: cap the scrollback height and scroll
+     vertically rather than growing the page indefinitely; long command/output
+     lines wrap (see .cli .cmd's overflow-wrap: anywhere below) instead of
+     scrolling horizontally, so wrapping is the chosen default over
+     horizontal scroll for this kit. */
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
 }
 /* .cli is authored in hero-content.css as a STANDALONE hero code block --
    20px/24px padding, --fs-lg type, --r-3 radius and its own --ink background
@@ -6584,6 +7545,7 @@
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
   letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .ds-247420 .ds-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-pico); }
 .ds-247420 .ds-avatar-md { width: 36px; height: 36px; font-size: var(--fs-micro); }
@@ -6711,6 +7673,7 @@
   font-weight: 600;
   line-height: 1;
   user-select: none;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 
 /* Body stack — name + time on one baseline, text beneath. .chat-stack's
@@ -7102,12 +8065,16 @@
 }
 .ds-247420 .ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
 
+/* Same track/knob proportions as the shared .ds-toggle primitive
+   (states-interactions.css) -- kept as its own class since ds-plugins-toggle
+   is a plain <button>+.on instead of .ds-toggle's [aria-checked] contract,
+   but sized and colored to match it exactly rather than drifting. */
 .ds-247420 .ds-plugins-toggle {
-  flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; border: none; padding: 0;
+  flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--r-pill, 999px); border: none; padding: 0;
   background: var(--rule); position: relative; cursor: pointer;
   transition: background var(--dur-snap) var(--ease);
 }
-.ds-247420 .ds-plugins-toggle.on { background: var(--accent); }
+.ds-247420 .ds-plugins-toggle.on { background: var(--accent-ink); }
 .ds-247420 .ds-plugins-toggle[disabled] { cursor: wait; opacity: 0.65; }
 .ds-247420 .ds-plugins-toggle-knob {
   position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
@@ -7344,11 +8311,11 @@
 .ds-247420 .ds-otp-box:focus-visible {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
+  box-shadow: var(--focus-ring-inset);
 }
 .ds-247420 .ds-otp-box-filled { border-color: var(--rule-strong); background: var(--bg-3); }
 .ds-247420 .ds-otp-box-error { border-color: var(--red); }
-.ds-247420 .ds-otp-box-error:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 40%, transparent); }
+.ds-247420 .ds-otp-box-error:focus-visible { box-shadow: var(--focus-ring-inset); }
 .ds-247420 .ds-otp-box:disabled { opacity: 0.5; cursor: default; }
 
 @media (prefers-reduced-motion: reduce) {
@@ -7612,6 +8579,11 @@
   border-radius: var(--r-pill);
   background: var(--bg-2);
 }
+/* .ds-collab-chip-avatar (24px identity circle) and .ds-collab-chip-status
+   (8px status dot) below are both circular via border-radius: 50% but are
+   intentionally distinct: different sizes, different content (initial vs.
+   plain fill), different positioning role (layout box vs. absolute badge).
+   Not extracting a shared class -- there's nothing substantive to share. */
 .ds-247420 .ds-collab-chip-avatar {
   position: relative;
   width: 24px;
@@ -7726,7 +8698,7 @@
   justify-content: center;
   font-family: var(--ff-body);
   font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   letter-spacing: var(--tr-tight);
   cursor: pointer;
   overflow: hidden;
@@ -7776,11 +8748,14 @@
   min-width: 18px;
   height: 18px;
   padding: 0 var(--space-1-5);
+  /* --ink, not --paper: --paper is a fixed near-white, which measures ~3:1 on
+     --warn (#FF5A52) -- below the 4.5:1 AA floor. --ink clears it (same fix
+     as .btn-primary.danger in app-shell/files.css). */
   background: var(--warn);
-  color: var(--paper);
+  color: var(--ink);
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   border-radius: var(--r-pill);
   display: flex;
   align-items: center;
@@ -7799,7 +8774,7 @@
   align-items: center;
   justify-content: center;
   font-size: var(--fs-xl);
-  font-weight: 400;
+  font-weight: var(--fw-regular);
   cursor: pointer;
   border: 0;
   transition:
@@ -7845,7 +8820,7 @@
   padding: var(--space-2-75) var(--space-3);
   background: var(--bg-2);
   box-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 8%, transparent);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   font-size: var(--fs-sm);
   letter-spacing: -0.01em;
   /* No cursor:pointer, no :hover background, no user-select:none. This is a
@@ -7900,7 +8875,7 @@
   padding: var(--space-1) var(--space-2);
   font-family: var(--ff-body);
   font-size: var(--fs-micro);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   color: var(--fg-3);
   letter-spacing: var(--tr-caps);
   text-transform: uppercase;
@@ -7939,7 +8914,7 @@
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
   color: var(--fg-3);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   letter-spacing: 0;
   text-transform: none;
 }
@@ -8009,7 +8984,7 @@
 .ds-247420 .cm-channel-item.active {
   background: color-mix(in oklab, var(--fg) 10%, transparent);
   color: var(--fg);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 .ds-247420 .cm-channel-item.active::before {
   content: '';
@@ -8108,11 +9083,14 @@
   min-width: 16px;
   height: 16px;
   padding: 0 var(--space-1-5);
+  /* --ink, not --paper: --paper is a fixed near-white, which measures ~3:1 on
+     --warn (#FF5A52) -- below the 4.5:1 AA floor. --ink clears it (same fix
+     as .btn-primary.danger in app-shell/files.css). */
   background: var(--warn);
-  color: var(--paper);
+  color: var(--ink);
   font-family: var(--ff-mono);
   font-size: var(--fs-micro);
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   border-radius: var(--r-pill);
   display: inline-flex;
   align-items: center;
@@ -8191,13 +9169,16 @@
   height: 20px;
   border-radius: 50%;
   background: var(--avatar-bg, var(--bg-3));
-  color: var(--fg-2);
+  color: var(--avatar-fg, var(--fg-2));
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-pico);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   overflow: hidden;
+  /* Depth over a flat solid-color disc: a hairline inset ring so avatars
+     read as a real surface element, not a wireframe placeholder. */
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent);
   transition: box-shadow var(--dur-snap) var(--ease);
 }
 .ds-247420 .cm-ch-voice-user-avatar img {
@@ -8235,7 +9216,7 @@
    a pulsing dot and must read as the loudest thing in the strip). */
 .ds-247420 .cm-vs-label {
   color: var(--green);
-  font-weight: 700;
+  font-weight: var(--fw-bold);
   display: inline-flex;
   align-items: center;
   gap: var(--space-1-75);
@@ -8261,7 +9242,7 @@
 
 .ds-247420 .cm-vs-channel {
   font-size: var(--fs-sm);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   color: var(--fg);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8289,7 +9270,7 @@
   border-radius: var(--r-1);
   font-family: var(--ff-body);
   font-size: var(--fs-xs);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
@@ -8297,8 +9278,11 @@
   background: color-mix(in oklab, var(--fg) 18%, transparent);
 }
 .ds-247420 .cm-vs-btn.danger {
+  /* --ink, not --paper: --paper is a fixed near-white, which measures ~3:1 on
+     --warn (#FF5A52) -- below the 4.5:1 AA floor. Same fix pattern as
+     .btn-primary.danger in app-shell/files.css. */
   background: var(--warn);
-  color: var(--paper);
+  color: var(--ink);
 }
 .ds-247420 .cm-vs-btn.danger:hover {
   background: color-mix(in oklab, var(--warn) 80%, var(--ink));
@@ -8323,13 +9307,14 @@
   height: 32px;
   border-radius: 50%;
   background: var(--avatar-bg, var(--bg-3));
-  color: var(--fg-2);
+  color: var(--avatar-fg, var(--fg-2));
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-xs);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   overflow: hidden;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .ds-247420 .cm-user-avatar img {
   width: 100%;
@@ -8358,7 +9343,7 @@
 }
 .ds-247420 .cm-user-name {
   font-size: var(--fs-xs);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   color: var(--fg);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8439,7 +9424,7 @@
      pinned weight/size/colour, but a bare h1 also brings a UA block margin
      that would break this flex row — so the margin is zeroed explicitly. */
   margin: 0;
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   font-size: var(--fs-sm);
   color: var(--fg);
   letter-spacing: -0.01em;
@@ -8503,7 +9488,7 @@
   padding: var(--space-2-75) var(--space-3) var(--space-1-75);
   font-family: var(--ff-body);
   font-size: var(--fs-micro);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   color: var(--fg-3);
   letter-spacing: var(--tr-caps);
   text-transform: uppercase;
@@ -8534,13 +9519,14 @@
   height: 28px;
   border-radius: 50%;
   background: var(--avatar-bg, var(--bg-3));
-  color: var(--fg-2);
+  color: var(--avatar-fg, var(--fg-2));
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-micro);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   overflow: hidden;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .ds-247420 .cm-member-avatar img {
   width: 100%;
@@ -8595,13 +9581,14 @@
   height: 56px;
   border-radius: 50%;
   background: var(--avatar-bg, var(--bg-3));
-  color: var(--fg-2);
+  color: var(--avatar-fg, var(--fg-2));
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: var(--fs-lg);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   overflow: hidden;
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .ds-247420 .cm-voice-user-avatar img {
   width: 100%;
@@ -8616,7 +9603,7 @@
 .ds-247420 .cm-voice-user-name {
   font-size: var(--fs-xs);
   color: var(--fg);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   max-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -8811,7 +9798,7 @@
   flex: 1 1 auto;
   min-width: 0;
   font-family: var(--font-mono, monospace);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   color: var(--fg);
   white-space: nowrap;
   overflow: hidden;
@@ -8834,7 +9821,7 @@
   font-size: var(--fs-xs);
 }
 .ds-247420 .cm-rb-label { flex: none; color: var(--fg-2); }
-.ds-247420 .cm-rb-author { color: var(--accent); font-weight: 600; }
+.ds-247420 .cm-rb-author { color: var(--accent); font-weight: var(--fw-medium); }
 .ds-247420 .cm-rb-preview {
   flex: 1 1 auto;
   min-width: 0;
@@ -8866,7 +9853,7 @@
   width: 100%;
   padding: var(--space-2) var(--space-3);
   font-size: var(--fs-xs);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 .ds-247420 .cm-banner.clickable { cursor: pointer; }
 .ds-247420 .cm-banner.clickable:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
@@ -8877,7 +9864,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   padding: var(--space-hair) var(--space-2);
   border-radius: var(--r-1);
   cursor: pointer;
@@ -8939,7 +9926,7 @@
   color: var(--fg);
   font-family: var(--ff-body);
   font-size: var(--fs-sm);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
@@ -9061,7 +10048,7 @@
   color: var(--fg);
   font-family: var(--ff-body);
   font-size: var(--fs-sm);
-  font-weight: 600;
+  font-weight: var(--fw-semibold);
   cursor: pointer;
   transition: background var(--dur-base) var(--ease);
 }
@@ -9091,7 +10078,7 @@
   padding: var(--space-3);
   border-bottom: var(--bw-hair) solid var(--rule);
 }
-.ds-247420 .vx-modal-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
+.ds-247420 .vx-modal-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
 .ds-247420 .vx-modal-x {
   border: 0; background: transparent; color: var(--fg-3);
   font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 0 var(--space-1);
@@ -9115,7 +10102,7 @@
   color: var(--fg);
   font-family: var(--ff-body);
   font-size: var(--fs-tiny);
-  font-weight: 600;
+  font-weight: var(--fw-medium);
   letter-spacing: var(--tr-caps);
   cursor: pointer;
 }
@@ -9128,6 +10115,9 @@
   font-size: var(--fs-sm);
 }
 .ds-247420 .vx-toggle { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }
+@media (pointer: coarse) {
+  .ds-247420 .vx-toggle { width: 24px; height: 24px; }
+}
 
 .ds-247420 .vx-queue {
   display: flex; align-items: center; gap: var(--space-2);
@@ -9170,13 +10160,13 @@
 .ds-247420 .vx-chip-current { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 16%, var(--bg-3)); }
 .ds-247420 .vx-chip-live { border-color: var(--green-2); }
 .ds-247420 .vx-chip-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--fg-3); flex-shrink: 0; }
-.ds-247420 .vx-chip-name { font-weight: 600; }
+.ds-247420 .vx-chip-name { font-weight: var(--fw-medium); }
 .ds-247420 .vx-chip-dur { font-family: var(--ff-mono); color: var(--fg-3); }
 /* Joins the small-label voice above. Deliberate overrides: --green + weight 700
    because this is the "LIVE" badge on a session chip, same signal role as
    .cm-vs-label. */
 .ds-247420 .vx-chip-tag {
-  color: var(--green); font-weight: 700;
+  color: var(--green); font-weight: var(--fw-bold);
 }
 
 /* VoiceControls — vx-vc-* */
@@ -9222,7 +10212,7 @@
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule);
 }
-.ds-247420 .cm-tp-title { font-weight: 700; font-size: var(--fs-xs); }
+.ds-247420 .cm-tp-title { font-weight: var(--fw-bold); font-size: var(--fs-xs); }
 .ds-247420 .cm-tp-head-actions { display: flex; gap: var(--space-1); }
 .ds-247420 .cm-tp-new, .ds-247420 .cm-tp-close {
   border: none; background: transparent; color: var(--fg-2, var(--fg));
@@ -9240,7 +10230,7 @@
 }
 .ds-247420 .cm-tp-item:hover { background: var(--bg-3); }
 .ds-247420 .cm-tp-item.is-active { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }
-.ds-247420 .cm-tp-item.is-unread .cm-tp-item-title { font-weight: 700; }
+.ds-247420 .cm-tp-item.is-unread .cm-tp-item-title { font-weight: var(--fw-bold); }
 .ds-247420 .cm-tp-dot { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .ds-247420 .cm-tp-item-title { font-size: var(--fs-xs); }
 .ds-247420 .cm-tp-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -9294,7 +10284,7 @@
 .ds-247420 .cm-forum-item { display: flex; flex-direction: column; gap: var(--space-1); width: 100%; text-align: left; cursor: pointer; padding: var(--space-2) var(--space-3); border: none; background: transparent; border-bottom: var(--bw-hair) solid var(--rule); color: var(--fg); }
 .ds-247420 .cm-forum-item:hover { background: var(--bg-3); }
 .ds-247420 .cm-forum-item-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
-.ds-247420 .cm-forum-item-title { font-weight: 700; font-size: var(--fs-xs); }
+.ds-247420 .cm-forum-item-title { font-weight: var(--fw-bold); font-size: var(--fs-xs); }
 .ds-247420 .cm-forum-item-replies { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .8; white-space: nowrap; }
 .ds-247420 .cm-forum-item-snippet { font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .85; }
 .ds-247420 .cm-forum-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-micro); color: var(--fg-2, var(--fg)); opacity: .7; }
@@ -9306,10 +10296,14 @@
 /* PageView — cm-page / cm-page-* */
 .ds-247420 .cm-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
 .ds-247420 .cm-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--bw-hair) solid var(--rule); }
-.ds-247420 .cm-page-title { margin: 0; font-size: var(--fs-xl); font-weight: 700; }
+.ds-247420 .cm-page-head-title { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
+.ds-247420 .cm-page-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
+.ds-247420 .cm-page-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--fg-2, var(--fg)); }
+.ds-247420 .cm-page-author { font-weight: var(--fw-medium); }
+.ds-247420 .cm-page-time { opacity: .75; }
 .ds-247420 .cm-page-edit { padding: var(--space-1) var(--space-2); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); cursor: pointer; }
 .ds-247420 .cm-page-body { padding: var(--space-3); line-height: 1.6; }
-.ds-247420 .cm-page-empty { color: var(--fg-2, var(--fg)); opacity: .7; }
+.ds-247420 .cm-page-empty { color: var(--fg-2, var(--fg)); opacity: .82; }
 
 /* ============================================================
    freddie pages — layout for FREDDIE_PAGES renderers.
@@ -9319,12 +10313,15 @@
 .ds-247420 .fd-page-inner { display: flex; flex-direction: column; gap: var(--space-3, 16px); padding: var(--space-3, 16px); max-width: 1100px; }
 .ds-247420 .fd-page-inner > * { min-width: 0; }
 .ds-247420 .fd-loading { display: flex; align-items: center; gap: var(--space-2, 10px); padding: var(--space-4, 24px); color: var(--fg-2, var(--fg)); }
-.ds-247420 .fd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2, 10px); padding: var(--space-5, 32px) var(--space-3, 16px); color: var(--fg-2, var(--fg)); text-align: center; }
+/* Base layout shared with .ds-empty-state (primitives.css); overrides padding
+   (--space-5, denser than the shared --space-6) and color for this context. */
+.ds-247420 .fd-empty { padding: var(--space-5, 32px) var(--space-3, 16px); color: var(--fg-2, var(--fg)); }
 /* 28px is an ICON size (empty-state mark), not a type tier — the --fs-* ladder
    tops out at --fs-xl (21px) before every remaining rung becomes a fluid
-   heading clamp, so neither substitutes without visibly resizing the mark. */
-.ds-247420 .fd-empty-glyph { font-size: 28px; opacity: .55; line-height: 1; }
-.ds-247420 .fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 6px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); line-height: 1.5; }
+   heading clamp, so neither substitutes without visibly resizing the mark.
+   --fs-2xl bridges that gap as a fixed 28px token. */
+.ds-247420 .fd-empty-glyph { font-size: var(--fs-2xl); opacity: .55; line-height: 1; }
+.ds-247420 .fd-pre { margin: 0; padding: var(--space-2, 10px); background: var(--bg-3, var(--panel-bg-2)); border: var(--bw-hair, 1px) solid var(--rule, var(--panel-accent)); border-radius: var(--r-1, 8px); overflow: auto; max-height: 460px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-micro); line-height: 1.5; }
 .ds-247420 .fd-skill-body { max-height: 320px; }
 .ds-247420 .fd-row-actions { display: inline-flex; gap: var(--space-1, 6px); align-items: center; }
 .ds-247420 .fd-chat { display: flex; flex-direction: column; gap: var(--space-2, 10px); height: 100%; min-height: 0; }
@@ -9341,9 +10338,105 @@
 }
 
 /* chat.css */
-/* chat.css — chat-specific styles. Most chat styles live in app-shell.css under
-   the .chat-* prefix. This file carries the AgentChat kit styles (the reusable
-   multi-agent orchestration chat surface). */
+/* chat.css — chat-specific styles, including the base .chat-* rules used by
+   Chat()/ChatMessage() (chat/threads.js, chat/message.js): .chat, .chat-head,
+   .chat-thread, .chat-msg, .chat-avatar, .chat-bubble, .chat-stack,
+   .chat-empty. This file also carries the AgentChat kit styles (the reusable
+   multi-agent orchestration chat surface, .agentchat-*). */
+
+/* Base chat surface — the default (non-flat) messenger layout: left/right
+   avatar-disc + colored-bubble turns. .chat-msg-flat further down overrides
+   these to the claude.ai/code full-width turn style; these are the rules it
+   overrides FROM, and were previously entirely undefined, so the default
+   layout rendered on raw flex/browser defaults (unstyled bubble shape, no
+   avatar depth, no defined thread padding) until a Chat() consumer supplied
+   its own colliding class names. */
+.ds-247420 .chat {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+.ds-247420 .chat-head {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2-75) var(--space-3);
+  border-bottom: 1px solid var(--panel-3, color-mix(in oklab, var(--fg) 10%, transparent));
+  flex-shrink: 0;
+}
+.ds-247420 .chat-head .ds-chat-title { font-size: var(--fs-sm); font-weight: var(--fw-medium); margin: 0; }
+.ds-247420 .chat-head .sub { font-size: var(--fs-tiny); color: var(--fg-3); }
+.ds-247420 .chat-head .spread { flex: 1; }
+.ds-247420 .chat-thread {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3) var(--space-4);
+  /* A short thread must not stretch its one message across the whole
+     viewport height — pack content to the bottom (where the composer is)
+     instead of centering it in a sea of empty space above and below. */
+  justify-content: flex-end;
+}
+.ds-247420 .chat-empty {
+  margin: auto;
+  max-width: var(--measure-narrow, 60ch);
+  text-align: center;
+  padding: var(--space-5) var(--space-3);
+  color: var(--fg-3);
+}
+.ds-247420 .chat-empty-title { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--fg-2); margin: 0 0 var(--space-1); }
+.ds-247420 .chat-empty-sub { font-size: var(--fs-sm); margin: 0; }
+.ds-247420 .chat-msg {
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-start;
+  max-width: 100%;
+}
+.ds-247420 .chat-msg.you { flex-direction: row-reverse; }
+.ds-247420 .chat-msg.centered { justify-content: center; text-align: center; }
+.ds-247420 .chat-avatar {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--bg-3);
+  color: var(--fg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--fs-tiny);
+  font-weight: var(--fw-medium);
+  /* Depth over a flat solid-color disc: a hairline inset ring plus the same
+     soft shadow --panel-shadow uses elsewhere, so avatars read as a real
+     surface element instead of a wireframe placeholder. */
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent), 0 1px 2px color-mix(in oklab, var(--fg) 10%, transparent);
+}
+.ds-247420 .chat-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-width: 70%;
+  min-width: 0;
+}
+.ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
+.ds-247420 .chat-bubble {
+  padding: var(--space-2) var(--space-2-75);
+  background: var(--bg-2);
+  color: var(--fg);
+  /* r-2, not a pill — a pill-capsule bubble read as a generic chat-template
+     shape inconsistent with every other rounded element in the app (which
+     all use the r-0..r-3 scale, never 999px). */
+  border-radius: var(--r-2);
+  line-height: var(--lh-base, 1.5);
+  word-break: break-word;
+  font-size: var(--fs-sm);
+}
+.ds-247420 .chat-msg.you .chat-bubble { background: var(--accent); color: var(--accent-fg); }
+.ds-247420 .chat-meta { display: flex; gap: var(--space-1-5); font-size: var(--fs-nano); color: var(--fg-3); padding: 0 var(--space-1); }
 
 .ds-247420 .agentchat {
   display: flex;
@@ -9587,7 +10680,7 @@
 .ds-247420 .chat-msg-action {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
   min-width: 26px; height: 26px; padding: 0 var(--space-1-75); cursor: pointer;
-  border: none; border-radius: var(--r-1, 4px); background: none; color: var(--fg-3);
+  border: none; border-radius: var(--r-1, 8px); background: none; color: var(--fg-3);
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
@@ -9655,7 +10748,7 @@
   display: flex; align-items: center; gap: var(--space-2, 8px);
   padding: var(--space-1, 4px) var(--space-2, 8px);
   border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-1, 4px);
+  border-radius: var(--r-1, 8px);
   background: var(--bg-2);
 }
 .ds-247420 .agentchat-install-agent { flex: 0 0 auto; font-size: var(--fs-tiny); color: var(--fg-3); min-width: 8ch; }
@@ -9665,7 +10758,7 @@
 }
 .ds-247420 .agentchat-install-copy {
   flex: 0 0 auto; cursor: pointer; padding: var(--space-hair) var(--space-2); min-height: 24px;
-  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
+  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 8px);
   background: none; color: var(--fg-3);
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
@@ -9676,7 +10769,7 @@
 /* Host-supplied transcript export actions riding the controls row. */
 .ds-247420 .agentchat-export-act {
   cursor: pointer; padding: var(--space-1) var(--space-2-5); min-height: 32px;
-  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
+  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 8px);
   background: none; color: var(--fg-3);
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
@@ -9872,7 +10965,7 @@
 .ds-247420 .ds-session-agent { font-size: var(--fs-tiny); color: var(--fg-3); }
 /* New-activity cue is a hollow accent RING so it stays shape-distinct from the
    running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
-.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
+.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); display: inline-block; flex: none; }
 .ds-247420 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-session-state-error { color: var(--flame); }
 
@@ -9909,7 +11002,7 @@
   background: var(--bg); border: var(--border-w) solid var(--accent); border-radius: var(--r-1);
   padding: var(--space-1) var(--space-2);
 }
-.ds-247420 .ds-session-rename-input:focus { outline: none; }
+.ds-247420 .ds-session-rename-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
 
 /* Inline delete confirm — same row height, two flat buttons, no modal;
    mirrors SessionDashboard's arm-then-confirm bulk-stop control. */
@@ -9951,7 +11044,7 @@
 .ds-247420 .ds-dash-header .btn-primary.danger.is-armed { background: var(--warn); color: var(--ink); border-color: var(--warn); }
 .ds-247420 .ds-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2); padding: var(--space-3); }
 @media (min-width: 1500px) { .ds-247420 .ds-dash-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
-.ds-247420 .ds-dash-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-2); }
+.ds-247420 .ds-dash-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1); }
 
 /* Compact density — one line per session. The comfortable card stacks title +
    head + meta + actions as four flex rows and measured 208px tall on a real
@@ -10119,7 +11212,7 @@
   position: absolute; top: 6px; right: 6px;
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 48px; min-height: 24px; padding: var(--space-hair) var(--space-2);
-  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 4px);
+  border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1, 8px);
   background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
   opacity: 0; transition: opacity var(--dur-snap, .12s) var(--ease, ease);
@@ -10786,7 +11879,7 @@
   /* Minimap internal order: centerline < viewport < dot < tooltip. All four
      live inside the one raised widget, so they share its rung and differ
      only by a local offset. */
-  z-index: calc(var(--z-raised) + 1);
+  z-index: var(--z-raised-1);
 }
 .ds-247420 .chat-minimap-centerline {
   position: absolute;
@@ -10806,7 +11899,7 @@
   border-radius: var(--r-pill, 999px);
   transform: translate(-50%, -50%) scale(1);
   transition: transform 0.1s;
-  z-index: calc(var(--z-raised) + 2);
+  z-index: var(--z-raised-2);
 }
 .ds-247420 .chat-minimap-dot.is-user {
   background: color-mix(in oklab, var(--accent) 18%, transparent);
@@ -10831,7 +11924,7 @@
   /* Top of the minimap's internal order. Deliberately NOT --z-tooltip: it is
      clipped to the minimap rail rather than floating over the app, so it must
      not outrank real overlays that may cover the rail. */
-  z-index: calc(var(--z-raised) + 3);
+  z-index: var(--z-raised-3);
   pointer-events: none;
   opacity: 0.45;
   font-size: var(--fs-tiny);
@@ -10913,7 +12006,7 @@
 /* Buttons inside the dense strip shrink to fit the 26px band. */
 .ds-247420 .ds-ep-statusbar button {
     min-height: 0; height: 20px; padding: 0 var(--space-2);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: var(--fs-micro, 11px)/1 var(--ff-mono, monospace);
 }
 
@@ -10945,7 +12038,7 @@
     border: 1px solid var(--rule);
     color: var(--panel-text, var(--fg));
     padding: var(--space-1-5, 5px) var(--space-2-5, 10px);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font-size: var(--fs-tiny, 12px);
     font-family: inherit;
 }
@@ -11063,7 +12156,7 @@
 .ds-247420 .ds-ep-tree-row {
     display: flex; align-items: center; gap: var(--space-1-75);
     padding: var(--space-1) var(--space-2) var(--space-1) 0;
-    border-radius: var(--r-1, 10px);
+    border-radius: var(--r-1, 8px);
     cursor: pointer;
     color: var(--panel-text-2);
     transition: background var(--dur-snap, 80ms) var(--ease, ease), color var(--dur-snap, 80ms) var(--ease, ease);
@@ -11125,7 +12218,7 @@
     background: var(--panel-2);
     color: var(--panel-text);
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 10px);
+    border-radius: var(--r-1, 8px);
     padding: var(--space-1) var(--space-2);
     font: inherit;
     min-width: 0; width: 100%;
@@ -11166,7 +12259,7 @@
 .ds-247420 .ds-ep-propfield-value input,
 .ds-247420 .ds-ep-propfield-value .ds-input-bare {
     padding: var(--space-hair) var(--space-1-75);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: var(--fs-tiny, 12px)/1.3 var(--ff-mono, monospace);
 }
 .ds-247420 .ds-input-bare {
@@ -11174,7 +12267,7 @@
     background: var(--panel-2);
     color: var(--panel-text);
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     padding: var(--space-hair) var(--space-1-75);
     font: var(--fs-tiny, 12px)/1.3 var(--ff-mono, monospace);
     min-width: 0;
@@ -11216,7 +12309,7 @@
     border: 1px solid transparent;
     color: inherit; font: inherit;
     width: 100%;
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     padding: var(--space-hair, 2px) var(--space-1, 4px);
 }
 .ds-247420 .ds-ep-inline-input.ds-ep-inline-input:focus-visible {
@@ -11243,7 +12336,7 @@
     width: 100%;
     /* Snapped to --ctl-sm (was a lone 28px literal that happened to match). */
     min-height: var(--ctl-sm); height: var(--ctl-sm); padding: 0 var(--space-2-5);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
 }
 
@@ -11253,7 +12346,7 @@
 .ds-247420 .ds-ep-tree-row button:not(.ds-ep-btngrp-btn),
 .ds-247420 .ds-ep-toolbar button:not(.ds-ep-btngrp-btn) {
     min-height: 24px; height: 24px; padding: 0 var(--space-2);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
 }
 @media (pointer: coarse) {
@@ -11280,7 +12373,7 @@
     border: 1px solid var(--rule);
     color: var(--panel-text, var(--fg));
     padding: var(--space-half, 3px) var(--space-2-5, 10px);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: inherit;
 }
 .ds-247420 .ds-ep-pager-btn:hover:not([disabled]) { background: color-mix(in oklab, var(--accent) 10%, transparent); }
@@ -11298,7 +12391,7 @@
        computed to 23px -- just under the target floor. */
     min-width: max(24px, 1.75em);
     padding: var(--space-half, 3px) var(--space-1, 4px);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     font: inherit;
     text-align: center;
 }
@@ -11377,7 +12470,7 @@
     background: var(--panel-2, var(--bg-2));
     color: var(--panel-text, var(--fg));
     padding: var(--space-2, 8px);
-    border-radius: var(--r-1, var(--r-2, 4px));
+    border-radius: var(--r-1, 8px);
     max-height: 300px;
     overflow-y: auto;
     margin: 0;
@@ -11405,7 +12498,7 @@
 .ds-247420 .ds-ep-json-sum {
     cursor: pointer; user-select: none;
     list-style: none;
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
 }
 .ds-247420 .ds-ep-json-sum::-webkit-details-marker { display: none; }
 .ds-247420 .ds-ep-json-sum::before {
@@ -11435,7 +12528,7 @@
     color: var(--panel-text-2, var(--fg-2));
     font: var(--fs-micro, 11px)/1 var(--ff-mono, monospace);
     padding: var(--space-half, 3px) var(--space-2, 8px);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     opacity: 0.75;
 }
 .ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
@@ -11482,7 +12575,7 @@
 .ds-247420 .ds-ep-btngrp {
     display: inline-flex;
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 10px);
+    border-radius: var(--r-1, 8px);
     overflow: hidden;
     background: var(--panel-2);
 }
@@ -11569,7 +12662,7 @@
     padding: var(--space-2) var(--space-2-5);
     background: transparent; border: 0;
     color: inherit; font: inherit; text-align: left;
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     cursor: pointer;
 }
 .ds-247420 .ds-ep-ctxmenu-item:hover:not(.disabled),
@@ -11644,7 +12737,7 @@
     min-height: var(--ctl-sm); padding: 0 var(--space-3);
     display: inline-flex; align-items: center; justify-content: center;
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     background: var(--panel-2, transparent);
     color: inherit; font: inherit; cursor: pointer;
 }
@@ -11681,7 +12774,7 @@
        .kind-error below recolour border-left-color and nothing else. Do not
        demote to a hairline; that would erase the status signal. */
     border-left: var(--bw-chunk) solid var(--accent);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     padding: var(--space-2) var(--space-2-75);
     box-shadow: var(--shadow-3);
     min-width: 220px; max-width: 360px;
@@ -11704,7 +12797,7 @@
     font: inherit;
     font-weight: 600;
     padding: var(--space-1) var(--space-1-75);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     cursor: pointer;
 }
 .ds-247420 .ds-ep-toast-action:hover { background: var(--panel-2, var(--panel-bg)); }
@@ -11864,7 +12957,7 @@
     outline: var(--focus-w) solid var(--focus-color);
     outline-offset: var(--focus-offset);
 }
-.ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
+.ds-247420 .ds-toggle:disabled { cursor: not-allowed; opacity: 0.5; }
 
 @media (prefers-reduced-motion: no-preference) {
     .ds-247420 .ds-toggle { transition: background var(--dur-base, 160ms) var(--ease), border-color var(--dur-base, 160ms) var(--ease); }
@@ -11907,7 +13000,7 @@
     background: var(--panel-1, var(--panel-bg));
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     padding: var(--space-1-75) var(--space-2-5);
     font-size: var(--fs-micro);
     line-height: 1.4;
@@ -11960,7 +13053,7 @@
     padding: var(--space-1-5) var(--space-2-75);
     background: transparent; border: 0;
     color: inherit; font: inherit; text-align: left;
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     cursor: pointer;
 }
 .ds-247420 .ds-dropdown-item:hover,
@@ -11989,7 +13082,7 @@
     background: var(--panel-2, transparent);
     color: inherit; font: inherit;
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     padding: 0 var(--space-2-75);
     cursor: pointer;
     /* Snapped to the --ctl-sm rung so this small control shares the height
@@ -12012,7 +13105,7 @@
     padding: var(--space-1-5) var(--space-2-75);
     background: transparent; border: 0;
     color: inherit; font: inherit; text-align: left;
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     cursor: pointer;
     width: 100%;
 }
@@ -12039,7 +13132,7 @@
 }
 .ds-247420 .ov-menubutton-retry {
     appearance: none; background: transparent; border: 1px solid var(--rule);
-    border-radius: var(--r-1, 4px); color: inherit; font: inherit; font-size: var(--fs-sm);
+    border-radius: var(--r-1, 8px); color: inherit; font: inherit; font-size: var(--fs-sm);
     padding: var(--space-hair) var(--space-1-5); cursor: pointer;
 }
 .ds-247420 .ov-menubutton-retry:hover, .ds-247420 .ov-menubutton-retry:focus-visible { background: var(--panel-2, var(--rule)); outline: none; }
@@ -12048,7 +13141,7 @@
     background: var(--panel-2, transparent);
     color: inherit; font: inherit;
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 6px);
+    border-radius: var(--r-1, 8px);
     padding: 0 var(--space-2-75);
     cursor: pointer;
     min-height: var(--ctl-sm); height: var(--ctl-sm);
@@ -12066,7 +13159,7 @@
 .ds-247420 .ds-ep-diagnostics-title { margin: 0; font-size: var(--fs-lg); }
 .ds-247420 .ds-ep-diagnostics-refresh {
     appearance: none; background: var(--panel-2, transparent); color: inherit; font: inherit;
-    border: 1px solid var(--rule); border-radius: var(--r-1, 6px);
+    border: 1px solid var(--rule); border-radius: var(--r-1, 8px);
     padding: var(--space-1) var(--space-2-75); cursor: pointer;
 }
 .ds-247420 .ds-ep-diagnostics-refresh:disabled { opacity: 0.6; cursor: not-allowed; }
@@ -12088,7 +13181,7 @@
 .ds-247420 .ds-reorderable-horizontal { flex-direction: row; }
 .ds-247420 .ds-reorder-item {
     display: flex; align-items: center; gap: var(--space-2, 8px);
-    padding: var(--space-1, 4px); border-radius: var(--r-1, 10px);
+    padding: var(--space-1, 4px); border-radius: var(--r-1, 8px);
     background: var(--panel-1); color: var(--panel-text);
     transition: transform var(--dur-snap, 120ms) var(--ease, ease), opacity var(--dur-snap, 120ms) var(--ease, ease);
 }
@@ -12096,7 +13189,7 @@
     min-width: 44px; min-height: 44px;
     display: inline-flex; align-items: center; justify-content: center;
     appearance: none; background: transparent; color: var(--panel-text-2, var(--panel-text));
-    border: 0; border-radius: var(--r-1, 10px);
+    border: 0; border-radius: var(--r-1, 8px);
     cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
     touch-action: none; user-select: none;
 }
@@ -12120,7 +13213,7 @@
     display: inline-block; font: 0.85em/1 var(--ff-mono, monospace);
     padding: var(--space-1, 4px) calc(var(--space-1, 4px) * 1.5);
     border: 1px solid var(--rule, var(--panel-text-3));
-    border-radius: var(--r-1, 10px);
+    border-radius: var(--r-1, 8px);
     background: var(--panel-2, var(--panel-1)); color: var(--panel-text);
 }
 .ds-247420 .ds-kbd-group { margin: var(--space-3, 16px) 0; }
@@ -12174,7 +13267,7 @@
     padding: var(--space-2, 8px) var(--space-3, 16px);
     background: transparent; border: 0;
     color: var(--fg); font: inherit; text-align: left;
-    border-radius: var(--r-1, 10px); cursor: pointer;
+    border-radius: var(--r-1, 8px); cursor: pointer;
 }
 .ds-247420 .ov-cmd-item:hover { background: var(--panel-2, var(--rule)); }
 .ds-247420 .ov-cmd-item.is-active { background: var(--accent); color: var(--accent-fg); }
@@ -12202,6 +13295,14 @@
     box-shadow: var(--shadow-3);
     outline: none; overflow: hidden;
 }
+.ds-247420 .ov-emoji-search {
+    flex-shrink: 0; margin: var(--space-2, 8px); margin-bottom: 0;
+    padding: var(--space-1-5, 6px) var(--space-2, 8px);
+    border: 1px solid var(--rule); border-radius: var(--r-1, 8px);
+    background: var(--bg-1, var(--bg-3)); color: var(--fg);
+    font: inherit; font-size: var(--fs-sm, 13px);
+}
+.ds-247420 .ov-emoji-search:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; }
 .ds-247420 .ov-emoji-tabs {
     display: flex; flex-shrink: 0;
     border-bottom: 1px solid var(--rule);
@@ -12214,16 +13315,21 @@
 }
 .ds-247420 .ov-emoji-tab:hover { background: var(--bg-2); }
 .ds-247420 .ov-emoji-tab[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--bg-2); }
+.ds-247420 .ov-emoji-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ds-247420 .ov-emoji-grid { overflow: auto; max-height: 220px; padding: var(--space-2, 8px); }
 .ds-247420 .ov-emoji-grid-inner { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-1, 4px); }
 .ds-247420 .ov-emoji-cell {
     appearance: none; border: 0; background: transparent;
     aspect-ratio: 1; font-size: var(--fs-lg, 18px);
-    border-radius: var(--r-1, 10px); cursor: pointer;
+    border-radius: var(--r-1, 8px); cursor: pointer;
     display: inline-flex; align-items: center; justify-content: center;
 }
-.ds-247420 .ov-emoji-cell:hover, .ds-247420 .ov-emoji-cell:focus-visible {
-    background: color-mix(in oklab, var(--accent) 18%, transparent); outline: none;
+.ds-247420 .ov-emoji-cell:hover {
+    background: color-mix(in oklab, var(--accent) 18%, transparent);
+}
+.ds-247420 .ov-emoji-cell:focus-visible {
+    background: color-mix(in oklab, var(--accent) 18%, transparent);
+    outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px;
 }
 
 /* ---------------------------------------------------------------
@@ -12309,16 +13415,19 @@
 .ds-247420 .ov-set-control {
     appearance: none; flex-shrink: 0; max-width: 55%;
     background: var(--bg-3); color: var(--fg);
-    border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
+    border: 1px solid var(--rule); border-radius: var(--r-1, 8px);
     padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
 }
 .ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
 .ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
 .ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
+@media (pointer: coarse) {
+    .ds-247420 .ov-set-toggle { width: 24px; height: 24px; }
+}
 .ds-247420 .ov-set-btn {
     width: 100%; appearance: none; cursor: pointer;
     background: var(--accent); color: var(--accent-fg);
-    border: 0; border-radius: var(--r-1, 10px);
+    border: 0; border-radius: var(--r-1, 8px);
     padding: var(--space-2, 8px); font: inherit;
 }
 
@@ -12360,7 +13469,7 @@
 .ds-247420 .ov-lightbox-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: none; border-radius: 50%; background: color-mix(in oklab, var(--on-color) 12%, transparent); color: var(--on-color); font-size: 24px; line-height: 1; cursor: pointer; }
 .ds-247420 .ov-lightbox-x:hover { background: color-mix(in oklab, var(--on-color) 24%, transparent); }
 .ds-247420 .ov-lightbox-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 92vw; max-height: 90vh; }
-.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: #000; /* true black media letterbox, intentional */ }
+.ds-247420 .ov-lightbox-video { max-width: 92vw; max-height: 82vh; border-radius: var(--r-1); background: var(--media-letterbox); /* true black media letterbox, intentional */ }
 .ds-247420 .ov-lightbox-label { color: var(--on-color); font-size: var(--fs-tiny); opacity: .85; }
 
 /* ---------------------------------------------------------------
@@ -12404,7 +13513,7 @@
 .ds-247420 .ds-input-color {
     appearance: none; -webkit-appearance: none;
     width: 28px; height: 22px; padding: 0;
-    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    border: 1px solid var(--rule); border-radius: var(--r-1, 8px);
     background: var(--panel-2); cursor: pointer; flex-shrink: 0;
 }
 .ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: var(--space-hair); }
@@ -12413,7 +13522,7 @@
 .ds-247420 .ds-input-check {
     appearance: none; -webkit-appearance: none;
     width: 16px; height: 16px; flex-shrink: 0;
-    border: 1px solid var(--rule); border-radius: var(--r-1, 4px);
+    border: 1px solid var(--rule); border-radius: var(--r-1, 8px);
     background: var(--panel-2); cursor: pointer; position: relative;
 }
 .ds-247420 .ds-input-check:checked { background: var(--accent); border-color: var(--accent); }
@@ -12499,7 +13608,7 @@
 /* Collapse / CollapseGroup — progressive-disclosure toggle panel. */
 .ds-247420 .ds-ep-collapse {
     border: 1px solid var(--rule);
-    border-radius: var(--r-1, 4px);
+    border-radius: var(--r-1, 8px);
     background: var(--panel-2, var(--bg-2));
 }
 .ds-247420 .ds-ep-collapse + .ds-ep-collapse { margin-top: var(--space-1, 4px); }
@@ -12562,7 +13671,7 @@
     padding: var(--space-2, 8px) var(--space-3, 16px);
     background: transparent; border: 0;
     color: var(--fg); font: inherit; text-align: left;
-    border-radius: var(--r-1, 10px); cursor: pointer;
+    border-radius: var(--r-1, 8px); cursor: pointer;
 }
 .ds-247420 .ov-perm-item:hover { background: var(--panel-2, var(--rule)); }
 .ds-247420 .ov-perm-item[aria-checked="true"] { color: var(--accent-ink); }
@@ -12577,7 +13686,7 @@
 .ds-247420 .ov-perm-action {
     flex: 1; appearance: none; border: 1px solid var(--rule); background: transparent;
     color: var(--fg-2); font: inherit; font-size: var(--fs-tiny, 12px);
-    padding: var(--space-1) var(--space-2); border-radius: var(--r-1, 10px); cursor: pointer;
+    padding: var(--space-1) var(--space-2); border-radius: var(--r-1, 8px); cursor: pointer;
 }
 .ds-247420 .ov-perm-action:hover { background: var(--panel-2, var(--rule)); }
 
@@ -12600,14 +13709,14 @@
 .ds-247420 .ov-approval-cat { color: var(--fg-3); font-weight: 400; }
 .ds-247420 .ov-approval-args {
     margin: 0; padding: var(--space-2, 8px);
-    background: var(--panel-2, var(--rule)); border-radius: var(--r-1, 10px);
+    background: var(--panel-2, var(--rule)); border-radius: var(--r-1, 8px);
     font: var(--fs-tiny, 12px)/1.4 var(--ff-mono, monospace);
     color: var(--fg-3); max-height: 100px; overflow: auto; white-space: pre-wrap; word-break: break-all;
 }
 .ds-247420 .ov-approval-note {
     width: 100%; min-height: 48px; resize: vertical;
     padding: var(--space-2, 8px) var(--space-2-75, 12px);
-    border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1, 10px);
+    border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1, 8px);
     background: var(--bg); color: var(--fg); font: inherit; box-sizing: border-box;
 }
 .ds-247420 .ov-approval-note:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@@ -12691,6 +13800,48 @@
   padding: 0;
 }
 
+/* app topbar — mountCommunityApp's own sole chrome above the chat-head; had
+   no rules anywhere (relying on raw flex defaults), which read as unaligned
+   default spacing rather than a designed header row. */
+.ds-247420.ds-247420 .app-topbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 48px;
+  flex-shrink: 0;
+  padding: 0 var(--space-3);
+  background: var(--bg-2);
+  border-bottom: 1px solid var(--panel-3, color-mix(in oklab, var(--fg) 10%, transparent));
+}
+.ds-247420.ds-247420 .app-topbar .brand {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  min-width: 0;
+  font-weight: var(--fw-medium, 500);
+  font-size: var(--fs-sm);
+  color: var(--fg);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ds-247420.ds-247420 .app-topbar .brand .slash { color: var(--fg-3); }
+.ds-247420.ds-247420 .app-topbar nav {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.ds-247420.ds-247420 .app-topbar nav a {
+  color: var(--fg-2);
+  font-size: var(--fs-tiny);
+  text-decoration: none;
+  padding: var(--space-1) var(--space-1-5);
+  border-radius: var(--r-1);
+  transition: background var(--dur-snap, .12s) var(--ease, ease), color var(--dur-snap, .12s) var(--ease, ease);
+}
+.ds-247420.ds-247420 .app-topbar nav a:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420.ds-247420 .app-topbar nav a:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 2px; }
+
 /* server + channel rail */
 .ds-247420.ds-247420 .ca-rail {
   display: flex;
@@ -12706,7 +13857,7 @@
 }
 .ds-247420.ds-247420 .ca-rail .group {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--fw-semibold, 600);
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: var(--fg-3, color-mix(in oklab, var(--fg) 55%, transparent));
@@ -12766,7 +13917,7 @@
   background: var(--accent);
   color: var(--on-accent);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: var(--fw-semibold, 600);
   text-align: center;
 }
 .ds-247420.ds-247420 .ca-rail .rail-empty {
@@ -12977,7 +14128,7 @@
 .ds-247420 .health-summary { display: flex; flex-wrap: wrap; gap: .4em; margin: .6em 0; }
 .ds-247420 .health-chip {
   font-family: var(--ff-mono, ui-monospace, monospace);
-  font-size: .8rem; padding: .15em .55em; border-radius: var(--r-1, 6px);
+  font-size: .8rem; padding: .15em .55em; border-radius: var(--r-1, 8px);
   background: color-mix(in srgb, var(--fg) 8%, transparent);
   color: var(--fg-2);
   border: var(--bw-hair, 1px) solid color-mix(in srgb, var(--fg) 12%, transparent);
@@ -12995,7 +14146,7 @@
 .ds-247420 .ds-status-chip {
   display: inline-flex; align-items: center; gap: .35em;
   font-family: var(--ff-mono, ui-monospace, monospace);
-  font-size: .8rem; padding: .15em .55em; border-radius: var(--r-1, 6px);
+  font-size: .8rem; padding: .15em .55em; border-radius: var(--r-1, 8px);
   background: color-mix(in srgb, var(--fg) 8%, transparent);
   color: var(--fg-2);
   border: var(--bw-hair, 1px) solid color-mix(in srgb, var(--fg) 12%, transparent);
@@ -13023,7 +14174,7 @@
 }
 .ds-247420 .cwd-bar-btn {
   cursor: pointer; font: inherit; line-height: 1.3;
-  padding: .15em .55em; border-radius: var(--r-1, 6px);
+  padding: .15em .55em; border-radius: var(--r-1, 8px);
   background: color-mix(in srgb, var(--fg) 8%, transparent);
   border: var(--bw-hair, 1px) solid color-mix(in srgb, var(--fg) 14%, transparent);
   color: var(--fg-2);
@@ -13111,7 +14262,7 @@
   /* Re-assert the paper-tuned signal tokens so token-derived foregrounds
      (status discs, error text, tool cards) print with light-theme colours
      rather than the dark-theme-derived values inherited under auto-dark. */
-  .ds-247420 { --flame:#C53E00; --amber:#7C570F; --warn:#E0241A; --sky:#3A6EFF; --bg:var(--paper); --fg:var(--ink); }
+  .ds-247420 { --flame:#C53E00; --amber:#7C570F; --warn:#C41C0C; --sky:#3A6EFF; --bg:var(--paper); --fg:var(--ink); }
   .ds-247420 #app { min-height: auto; display: block; height: auto; }
   .ds-247420 .skip-link, .ds-247420 .status-dot, .ds-247420 .history-actions, .ds-247420 .chat-composer { display: none !important; }
   .ds-247420 .app, .ds-247420 .app-main, .ds-247420 .panel, .ds-247420 .chat, .ds-247420 .chat-thread {
@@ -13143,20 +14294,12 @@
 .ds-247420 .fd-page-error { max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; }
 
 /* gm-prose.css */
-/* ============================================================
-   gm-prose -- long-form article + doc-site prose surfaces
-   Extracted-article host, sticky table-of-contents rail, CLI
-   transcript block, definition-panel rows, repo cards, tag
-   chips, and attributed callouts. Consumed pro-rata by doc
-   sites (the gm paper) that mount the SDK and inject a flatspace
-   article into #ds-article-host. Every color is a token from
-   colors_and_type.css; no raw literals.
-   ============================================================ */
-
 .ds-247420 .ds-prose { line-height: 1.65; }
 .ds-247420 .ds-prose a { color: var(--panel-accent); }
 .ds-247420 .ds-prose a:hover { background: none; color: var(--panel-accent); text-decoration-color: transparent; }
 .ds-247420 .ds-prose pre, .ds-247420 .ds-prose table { overflow-x: auto; max-width: 100%; }
+.ds-247420 .ds-prose .mermaid { max-width: 100%; }
+.ds-247420 .ds-prose .mermaid svg { max-width: 100%; height: auto; cursor: zoom-in; }
 .ds-247420 .ds-prose canvas {
   display: block;
   width: 100%;
@@ -13172,33 +14315,33 @@
   min-height: 0;
 }
 
+.ds-247420 {
+  --article-toc-rail-w: 256px;
+  --article-toc-gutter-nonrhythm: 44px;
+  --article-toc-header-gap: 16px;
+}
 .ds-247420 #ds-article-host.has-toc {
   display: flex;
   align-items: flex-start;
-  /* 44px is OFF-SCALE ON PURPOSE — it is not a rhythm step but one term of the
-     three-term width equation on the next line (256px rail + 44px gutter +
-     measure). It sits between --space-6 (48) and --space-5 (32); snapping it
-     would silently change the host's computed max-width unless the calc were
-     re-derived, so the literal and the calc stay coupled and explicit. */
-  column-gap: 44px;
-  gap: 44px;
-  max-width: calc(256px + 44px + var(--measure-narrow));
+  column-gap: var(--article-toc-gutter-nonrhythm);
+  gap: var(--article-toc-gutter-nonrhythm);
+  max-width: calc(var(--article-toc-rail-w) + var(--article-toc-gutter-nonrhythm) + var(--measure));
   margin-left: auto;
   margin-right: auto;
 }
 .ds-247420 #ds-article-host.has-toc > .article-col {
   flex: 1 1 0;
   min-width: 0;
-  max-width: var(--measure-narrow);
+  max-width: var(--measure);
 }
 .ds-247420 #ds-article-host.has-toc > .toc {
-  flex: 0 0 256px;
+  flex: 0 0 var(--article-toc-rail-w);
   align-self: flex-start;
   position: sticky;
-  top: 24px;
+  top: calc(var(--article-header-h, calc(var(--app-topbar-h, 0px) + var(--app-crumb-h, 0px))) + var(--article-toc-header-gap));
   align-self: start;
-  max-height: calc(100vh - 48px);
-  max-height: calc(100dvh - 48px);
+  max-height: calc(100vh - var(--article-header-h, calc(var(--app-topbar-h, 0px) + var(--app-crumb-h, 0px))) - 32px);
+  max-height: calc(100dvh - var(--article-header-h, calc(var(--app-topbar-h, 0px) + var(--app-crumb-h, 0px))) - 32px);
   overflow-y: auto;
   overscroll-behavior: contain;
   margin: 0;
@@ -13222,15 +14365,6 @@
   background: var(--panel-text-3);
   background-clip: padding-box;
 }
-/* Small-label voice — the local composition of the house `.t-label` recipe
-   (src/css/app-shell/base.css). This sheet is a standalone published export
-   with its own <link>, so it cannot join the `.t-label` selector list; it
-   composes by referencing the identical token set. Both members are gm-
-   generated markup (injected into #ds-article-host), so the class list is not
-   reachable from src/ — the rule, not the markup, does the composing.
-   Deliberate override for both: --panel-text-2, because prose surfaces use the
-   panel text ramp rather than the app --fg ramp. Sized at --fs-nano: these
-   labels ride above dense article chrome, not UI text. */
 .ds-247420 #ds-article-host .toc .toc-title,
 .ds-247420 .ds-prose .gm-callout .who {
   font-family: var(--ff-mono);
@@ -13244,10 +14378,37 @@
   margin: 0 0 var(--space-3) 0;
 }
 .ds-247420 #ds-article-host .toc ol { margin: 0; padding-left: var(--space-3-5); }
-.ds-247420 #ds-article-host .toc li { font-size: var(--fs-tiny); line-height: 1.85; color: var(--panel-text); }
+.ds-247420 #ds-article-host .toc li {
+  font-size: var(--fs-tiny);
+  line-height: 1.85;
+  color: var(--panel-text);
+  min-height: 1.85em;
+}
+.ds-247420 #ds-article-host .toc li:nth-child(5n) { margin-bottom: var(--space-2); }
 .ds-247420 #ds-article-host .toc li::marker { color: var(--panel-text-3); font-variant-numeric: tabular-nums; }
 .ds-247420 #ds-article-host .toc a { color: var(--panel-text-2); text-decoration: none; transition: color .12s ease; }
 .ds-247420 #ds-article-host .toc a:hover { color: var(--panel-accent); }
+.ds-247420 #ds-article-host .toc li.toc-group {
+  margin-top: var(--space-3);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--panel-3);
+  list-style: none;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-nano);
+  text-transform: uppercase;
+  letter-spacing: var(--tr-label);
+  color: var(--panel-text-3);
+}
+.ds-247420 #ds-article-host .toc li.toc-group > ol {
+  margin-top: var(--space-1-5);
+  padding-left: var(--space-3);
+}
+.ds-247420 #ds-article-host .toc li.toc-group li {
+  font-size: var(--fs-nano);
+  line-height: 1.7;
+  min-height: 1.7em;
+}
+.ds-247420 #ds-article-host .toc li.toc-group li:nth-child(5n) { margin-bottom: 0; }
 .ds-247420 #ds-article-host.has-toc > .article-col > * { min-width: 0; }
 @media (max-width: 900px) {
   .ds-247420 #ds-article-host.has-toc { display: block; }
@@ -13260,28 +14421,15 @@
   }
 }
 
-/* .ds-cli-block — the multi-row article/transcript container (CliBlock()'s
-   outer wrapper holding stacked .ds-cli-row / .ds-cli-comment children).
-   Distinct from the bare `.cli` single prompt+cmd row primitive owned by
-   app-shell.css (Install(), HeroFromPageData(), terminal/site quickstart
-   lines) — the two used to share the `.cli` selector with incompatible
-   display models (flex row vs block transcript), so whichever stylesheet
-   loaded last silently won for both consumers. Renamed here to remove the
-   collision; see content.js CliBlock(). */
 .ds-247420 .ds-cli-block {
+  --ds-cli-block-fs-mono-halfrung: 12.5px;
   display: block;
   background: var(--panel-1);
   border-radius: var(--r-0);
   padding: var(--space-3) var(--space-3-5);
   margin: var(--space-3) 0 var(--space-5) 0;
   font-family: var(--ff-mono);
-  /* Deliberate half-step, NOT un-migrated drift: this is a transcript block set
-     in the mono face, which runs optically ~1 rung larger than the system
-     stack at the same px. --fs-micro (12) reads thin against the surrounding
-     prose and --fs-tiny (13) reads heavy; 12.5 is the tuned midpoint. There is
-     no half-rung on the --fs-* ladder and one must not be invented for a
-     single block, so this literal stays. */
-  font-size: 12.5px;
+  font-size: var(--ds-cli-block-fs-mono-halfrung);
   line-height: 1.6;
   color: var(--panel-text);
   box-shadow: var(--panel-shadow);
@@ -13354,18 +14502,11 @@
   color: var(--panel-text-2);
   border: 1px solid var(--panel-3);
   font-size: 0.7rem;
-  /* rem, not --space-*: the chip's inset is deliberately tied to the root type
-     scale alongside its own 0.7rem size, so the capsule keeps its proportions
-     when a doc site scales root font-size. A px rung would decouple them. */
-  padding: 0.15rem 0.5rem;
+  --tag-inset-rem-coupled-to-root-fontsize: 0.15rem 0.5rem;
+  padding: var(--tag-inset-rem-coupled-to-root-fontsize);
   border-radius: var(--r-hair);
   font-family: var(--ff-mono);
 }
-/* Attributed callout — an editorial pull-quote (it carries a .who byline), so
-   the left accent is DELIBERATE, not the generic alert stripe. Expressed via
-   the house .panel-spine idiom (absolute ::before rail at --bw-chunk, squared
-   leading corners) instead of a raw 3px border-left, so it stays on the border
-   scale and matches the spine primitive in panel-row.css. */
 .ds-247420 .ds-prose .gm-callout {
   position: relative;
   margin: var(--space-3-5) 0;
@@ -13380,23 +14521,11 @@
   width: var(--bw-chunk); background: var(--panel-accent);
   border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
 }
-/* Joins the small-label voice above; only its own box properties here. */
 .ds-247420 .ds-prose .gm-callout .who {
   display: block;
   margin-bottom: var(--space-1);
 }
 
-/* .ds-prose-endnote — the closing line of an article ("end. reply by opening a
-   pr."), set off from the body it terminates. Quieter and smaller than prose:
-   it takes the mono face and the --panel-text-2 tone that this sheet's other
-   ancillary voices use (.toc a, .gm-callout .who, .card .desc), so the endnote
-   reads as chrome around the article rather than a final paragraph of it. The
-   generous --space-5 lead is what does the "set off" — it breaks the paragraph
-   rhythm so the eye registers the piece has ended before reading the words.
-   Sized at --fs-xs rather than the --fs-nano label rung: this is a readable
-   sentence with a link in it, not an uppercase micro-label.
-   Replaces the inline style ui_kits/blog carried before the inline-style
-   sweep, which named this class without ever defining it. */
 .ds-247420 .ds-prose .ds-prose-endnote,
 .ds-247420 .ds-prose-endnote {
   margin-top: var(--space-5);
@@ -13406,9 +14535,6 @@
   line-height: 1.6;
   color: var(--panel-text-2);
 }
-/* The endnote's link keeps the prose accent but stays in the quiet register —
-   --panel-accent is the panel-ramp counterpart of --accent-ink (a readable
-   TEXT tone), never the bare --accent fill, which is ~1.07:1 on paper. */
 .ds-247420 .ds-prose-endnote a { color: var(--panel-accent); text-decoration: none; }
 .ds-247420 .ds-prose-endnote a:hover { text-decoration: underline; }
 
@@ -13419,14 +14545,14 @@
  * prefixer leaves it untouched (consumers mount on <html class="ds-247420">).
  * All values read kit tokens — no hardcoded hex, no inline design in the app. */
 
-.ds-247420 .site-panel { margin: var(--space-2); }
+.ds-247420 .site-panel { margin: var(--space-2); max-width: 1100px; padding: var(--space-3, 16px); }
 
 /* Hero block */
 .ds-247420 .site-hero { padding: var(--space-4); }
 .ds-247420 .site-hero-h { margin: 0 0 var(--space-2); }
 .ds-247420 .site-hero-body { margin: var(--space-2) 0 var(--space-3); color: var(--fg-2); max-width: 64ch; }
-.ds-247420 .site-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-3); }
-.ds-247420 .site-cta-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
+.ds-247420 .site-chip-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-3); }
+.ds-247420 .site-cta-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
 
 /* Quickstart CLI block — these .cli/.prompt/.cmd nodes were previously unstyled. */
 .ds-247420 .site-cli { padding: var(--space-3); background: var(--bg); border: var(--bw-hair, 1px) solid var(--rule); border-radius: var(--r-1); }
@@ -13594,8 +14720,8 @@
   width: min(360px, 88vw);
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 24px;
+  gap: var(--space-2-75);
+  padding: var(--space-4);
   background: var(--bg-2);
   border: 1px solid var(--bw-rule, var(--rule));
   border-radius: var(--r-2, 10px);
@@ -13624,7 +14750,7 @@
   font-family: var(--ff-mono);
   font-size: var(--fs-body);
   padding: 10px 14px;
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
   cursor: pointer;
 }
 .ds-247420 .sp-lobby-btn:hover { background: var(--bg-2); }
@@ -13641,12 +14767,12 @@
   background: var(--bg);
   color: var(--fg);
   border: 1px solid var(--bw-rule, var(--rule));
-  border-radius: var(--r-1, 6px);
-  padding: 8px 10px;
+  border-radius: var(--r-1, 8px);
+  padding: var(--space-2) var(--space-2-5);
   font: var(--fs-body) var(--ff-mono);
   outline: none;
 }
-.ds-247420 .sp-lobby-input:focus { border-color: var(--accent); }
+.ds-247420 .sp-lobby-input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring-inset); }
 .ds-247420 .sp-lobby-link { font-size: var(--fs-small, 11px); }
 .ds-247420 .sp-lobby-code {
   font-family: var(--ff-display);
@@ -13656,7 +14782,7 @@
   color: var(--accent);
   padding: 8px;
   background: var(--bg);
-  border-radius: var(--r-1, 6px);
+  border-radius: var(--r-1, 8px);
 }
 .ds-247420 .sp-lobby-err { min-height: 16px; color: var(--danger); font-size: var(--fs-small, 11px); }
 .ds-247420 .sp-lobby-close {