anentrypoint-design 0.0.240 → 0.0.242

package/dist/247420.css

@@ -7,20 +7,9 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');
-
-/* Metric-matched fallback for the display face. While Bricolage Grotesque
-   loads, text falls back to Arial with size-adjust tuned to its cap-height so
-   the oversized hero does not reflow on swap. Referenced first in --ff-display
-   via the 'Bricolage Grotesque' family; this only kicks in for the fallback
-   glyphs. */
-@font-face {
-  font-family: 'Bricolage Grotesque Fallback';
-  src: local('Arial');
-  size-adjust: 99%;
-  ascent-override: 94%;
-  descent-override: 24%;
-}
+/* System-font stack only — no web-font @import/@font-face. Every --ff-*
+   token below is the same fallback chain that used to sit after the custom
+   family names; removing the custom names just exposes it directly. */
 
 .ds-247420 {
   /* Tree view indentation tokens */
@@ -132,15 +121,11 @@
   --panel-accent-2: var(--accent-bright, var(--accent));
   --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
 
-  /* Type — Bricolage Grotesque carries display/headings (variable editorial
-     grotesque with real character), Hanken Grotesk carries body and UI,
-     JetBrains carries code. The narrow alias tracks the display face.
-     size-adjust on the fallback keeps the oversized hero from shifting while
-     Bricolage Grotesque loads. */
-  --ff-display:  'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Bricolage Grotesque', 'Bricolage Grotesque Fallback', 'Hanken Grotesk', system-ui, sans-serif;
-  --ff-body:     'Hanken Grotesk', system-ui, sans-serif;
-  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
+  /* Type — system-font stack, no custom web fonts loaded. */
+  --ff-display:  system-ui, sans-serif;
+  --ff-narrow:   system-ui, sans-serif;
+  --ff-body:     system-ui, sans-serif;
+  --ff-mono:     ui-monospace, Menlo, Consolas, monospace;
 
   --fs-micro:    12px;
   --fs-tiny:     13px;
@@ -202,10 +187,14 @@
   --rule:        color-mix(in oklab, currentColor 14%, transparent);
   --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
 
+  /* Micro rungs below --r-1 — chips, badges, scrollbar thumbs, tick marks
+     genuinely want a tighter corner than 10px; without these two tokens the
+     component sheets fell back to raw px literals bypassing the scale. */
+  --r-hair:      2px;
+  --r-0:         4px;
   --r-1:         10px;
   --r-2:         14px;
   --r-3:         22px;
-  --r-4:         32px;
   --r-pill:      999px;
 
   --dur-snap:    80ms;
@@ -235,6 +224,10 @@
   --measure:     68ch;
   --measure-wide:   940px;
   --measure-narrow: 760px;
+  /* Page-stage ceiling — independent of --measure-wide (which stays the
+     narrower editorial hero/prose measure). Fluid so ultra-wide viewports
+     actually gain real estate instead of flat-lining at a fixed px cap. */
+  --stage-wide:  min(96vw, 1440px);
 
   --sidebar-width:           220px;
   --sidebar-width-collapsed: 64px;
@@ -249,8 +242,11 @@
   /* Unified focus-ring tokens (single source for the design system). Outset
      rings (the default) tokenize colour+width+offset; bordered text fields use
      the inset variant. Deliberate negative offsets on edge-flush/clipping
-     containers stay literal. */
-  --focus-color:       var(--accent);
+     containers stay literal. --focus-color uses --accent-ink (the readable
+     text/UI-boundary tone), never bare --accent (the lime FILL token, which
+     measures ~1.07:1 against --paper and is nearly invisible as an outline —
+     see AGENTS.md token-split rule). */
+  --focus-color:       var(--accent-ink);
   --focus-w:           2px;
   --focus-offset:      2px;
   --focus-ring-inset:  inset 0 0 0 var(--focus-w) var(--focus-color);
@@ -275,7 +271,7 @@
 /* Link focus-visible */
 .ds-247420 a:focus-visible,
 .ds-247420[role="link"]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -283,13 +279,13 @@
 .ds-247420 input:focus-visible,
 .ds-247420 textarea:focus-visible,
 .ds-247420 select:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
 /* Interactive element focus-visible */
 .ds-247420[tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -502,10 +498,9 @@
 /* app-shell.css */
 /* ============================================================
    247420 design system — component sheet
-   "Acid Editorial": Bricolage Grotesque display + Hanken Grotesk body +
-   JetBrains code. Confident hierarchy, asymmetric grid tension, print
-   texture over glow, one electric lead accent. Indicator rails over
-   hairlines.
+   "Acid Editorial": system-font display + body + mono, no custom web fonts.
+   Confident hierarchy, asymmetric grid tension, print texture over glow,
+   one electric lead accent. Indicator rails over hairlines.
    ============================================================ */
 
 /* ============================================================
@@ -533,7 +528,7 @@
 }
 .ds-247420 .skip-link:focus {
   top: 10px;
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 .ds-247420 body {
@@ -750,7 +745,7 @@
 }
 .ds-247420 .app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .app-topbar nav a:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 /* Active tab reads as a subtle tinted pill with an accent underline rather than
@@ -786,7 +781,7 @@
   width: 100%;
 }
 .ds-247420 .app-search:focus-within {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -828,7 +823,7 @@
 }
 .ds-247420 .app-side a:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .app-side a:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 .ds-247420 .app-side a.active {
@@ -951,7 +946,7 @@
 .ds-247420 .btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-247420 .btn:active, .ds-247420 .btn-primary:active, .ds-247420 .btn-ghost:active { transform: translateY(2px); }
 .ds-247420 .btn:focus-visible, .ds-247420 .btn-primary:focus-visible, .ds-247420 .btn-ghost:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -978,7 +973,7 @@
 .ds-247420 .ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
 .ds-247420 .ds-icon-btn-danger:hover { filter: brightness(1.1); }
 .ds-247420 .ds-icon-btn:active { transform: translateY(1px); }
-.ds-247420 .ds-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-icon-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-icon-btn:disabled, .ds-247420 .ds-icon-btn.is-disabled {
   opacity: 0.5; cursor: not-allowed; pointer-events: none;
 }
@@ -990,7 +985,7 @@
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 18px; height: 18px; padding: 0 6px;
   font-size: var(--fs-micro); font-weight: 600; line-height: 1;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
 .ds-247420 .ds-badge.tone-green   { background: var(--green-tint);  color: var(--green-deep); }
@@ -1202,16 +1197,13 @@
   padding: var(--space-9) 0 var(--space-8);
   display: grid; gap: var(--space-5) var(--space-6);
   grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
-  grid-template-areas: 'title title' 'body actions' 'badge badge';
+  grid-template-areas: 'title title' 'body actions';
   align-items: end;
   max-width: var(--measure-wide);
 }
 .ds-247420 .ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
 .ds-247420 .ds-hero-body  { grid-area: body; }
 .ds-247420 .ds-hero-actions { grid-area: actions; }
-/* Badge gets its own row — sharing 'actions' overlapped it onto the CTAs
-   whenever a caller passes both actions and badge. */
-.ds-247420 .ds-hero-badge { grid-area: badge; }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   font-size: clamp(40px, 9cqi, 116px);
@@ -1232,7 +1224,7 @@
 @container (max-width: 900px) {
   .ds-247420 .ds-hero {
     grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: 'title' 'body' 'actions' 'badge';
+    grid-template-areas: 'title' 'body' 'actions';
     align-items: start;
     padding: var(--space-7) 0 var(--space-6);
   }
@@ -1406,7 +1398,7 @@
 .ds-247420 table tr.clickable { cursor: pointer; }
 .ds-247420 table tr.clickable:hover td { background: var(--bg-2); }
 .ds-247420 table tr.clickable:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
 }
 .ds-247420 table tr.clickable:focus-visible td { background: var(--bg-2); }
@@ -1804,7 +1796,7 @@
   flex-direction: column;
   gap: 4px;
 }
-.ds-247420 .ds-file-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-2); }
+.ds-247420 .ds-file-grid:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-2); }
 
 /* Listing wrapper holds the optional filter + sort header above the grid. */
 .ds-247420 .ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
@@ -1826,7 +1818,7 @@
 }
 .ds-247420 .ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
 .ds-247420 .ds-file-sort-btn.active { color: var(--accent-ink); }
-.ds-247420 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-sort-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Skeleton shimmer rows shown while a directory loads. */
 .ds-247420 .ds-file-row-skeleton { cursor: default; pointer-events: none; }
@@ -1874,7 +1866,7 @@
   color: inherit; font: inherit; text-align: left; cursor: pointer;
 }
 .ds-247420 .ds-file-open[disabled] { cursor: default; }
-.ds-247420 .ds-file-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-247420 .ds-file-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
 .ds-247420 .ds-file-row:hover {
   background: var(--bg-2);
   border-color: var(--rule);
@@ -1947,7 +1939,7 @@
    role=checkbox/aria-checked name+state. */
 .ds-247420 .ds-check-box {
   width: 15px; height: 15px; box-sizing: border-box; flex: 0 0 auto; position: relative;
-  border: 1.5px solid var(--fg-3); border-radius: 4px;
+  border: 1.5px solid var(--fg-3); border-radius: var(--r-0);
   transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
 }
 .ds-247420 .is-marked > .ds-check-box,
@@ -1959,7 +1951,7 @@
 }
 .ds-247420[aria-checked="mixed"] > .ds-check-box { background: var(--accent); border-color: var(--accent); }
 .ds-247420[aria-checked="mixed"] > .ds-check-box::after {
-  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: 1px;
+  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
 }
 
 .ds-247420 .ds-file-check {
@@ -1972,7 +1964,7 @@
 }
 .ds-247420 .ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .ds-file-check.is-marked { color: var(--accent-ink); }
-.ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-247420 .ds-file-check[disabled] { opacity: 0.4; cursor: default; }
 .ds-247420 .ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
 .ds-247420 .ds-file-selectall {
@@ -1982,7 +1974,7 @@
   padding: var(--space-1); border-radius: var(--r-1);
 }
 .ds-247420 .ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ds-file-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-247420 .ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
 .ds-247420 .ds-file-controls .spread { flex: 1 1 auto; }
 .ds-247420 .ds-file-controls .ds-file-sort { padding: 0; }
@@ -2020,7 +2012,7 @@
 }
 .ds-247420 .ds-density-btn:hover { color: var(--fg); }
 .ds-247420 .ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
-.ds-247420 .ds-density-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-density-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Compact density — tighter rows for long listings. */
 .ds-247420 .ds-file-grid[data-density="compact"] { gap: 2px; }
@@ -2054,7 +2046,7 @@
   background: none; border: none; cursor: pointer; color: var(--fg);
 }
 .ds-247420 .ds-file-cell-open[disabled] { cursor: default; }
-.ds-247420 .ds-file-cell-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .ds-file-cell-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
 .ds-247420 .ds-file-cell-media {
   display: flex; align-items: center; justify-content: center;
   width: 100%; aspect-ratio: 4 / 3;
@@ -2272,7 +2264,7 @@
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-247420 .ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-upload-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-upload-act { min-height: 44px; min-width: 44px; }
   /* 44px floor for file controls on ANY touch device, not only narrow ones
@@ -2343,7 +2335,7 @@
   border-radius: var(--r-2); color: var(--fg);
   font-family: inherit; font-size: var(--fs-sm);
 }
-.ds-247420 .ds-modal-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-modal-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 /* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
 @media (hover: none), (pointer: coarse) {
   .ds-247420 .ds-modal-input { font-size: 16px; min-height: 44px; }
@@ -2507,7 +2499,7 @@
 .ds-247420 .ds-kbd-sep { color: var(--fg-3); font-size: var(--fs-micro); padding: 0 2px; }
 .ds-247420 .ds-kbd {
   display: inline-block; min-width: 0;
-  padding: 2px 7px; border-radius: 6px;
+  padding: 2px 7px; border-radius: var(--r-0);
   background: var(--bg); border: var(--bw-hair) solid var(--rule);
   border-bottom-width: 2px;
   font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-2);
@@ -2529,7 +2521,7 @@
   transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
 .ds-247420 .ds-segmented .ds-seg-btn:hover { color: var(--fg); }
-.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-segmented .ds-seg-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-247420 .ds-segmented .ds-seg-btn.is-on {
   background: var(--bg); color: var(--fg);
   box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
@@ -2583,7 +2575,7 @@
   .ds-247420 .chat-thread { scroll-behavior: smooth; }
 }
 .ds-247420 .chat-thread::-webkit-scrollbar { width: 8px; }
-.ds-247420 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
+.ds-247420 .chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-0); }
 .ds-247420 .chat-empty {
   margin: auto;
   text-align: center;
@@ -2597,7 +2589,7 @@
 .ds-247420 .chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
 .ds-247420 .chat-msg.you { flex-direction: row-reverse; }
 .ds-247420 .chat-msg.you .chat-stack { align-items: flex-end; }
-.ds-247420 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: 6px 0; margin: 0; border-radius: 8px; transition: background var(--dur-base) var(--ease); }
+.ds-247420 .chat-msg:hover { background: color-mix(in oklab, var(--fg) 4%, transparent); padding: 6px 0; margin: 0; border-radius: var(--r-0); transition: background var(--dur-base) var(--ease); }
 
 .ds-247420 .chat-avatar {
   width: 36px; height: 36px; flex-shrink: 0;
@@ -2643,7 +2635,7 @@
 .ds-247420 .chat-bubble code {
   font-family: var(--ff-mono); font-size: 0.92em;
   background: color-mix(in oklab, var(--fg) 10%, transparent);
-  padding: 1px 6px; border-radius: 4px;
+  padding: 1px 6px; border-radius: var(--r-0);
 }
 .ds-247420 .chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-247420 .chat-bubble a {
@@ -2754,7 +2746,7 @@
 .ds-247420 .chat-msg.you .chat-image,
 .ds-247420 .chat-msg .chat-image,
 .ds-247420 .chat-image {
-  display: inline-block; border-radius: 12px; overflow: hidden;
+  display: inline-block; border-radius: var(--r-1); overflow: hidden;
   max-width: min(100%, 480px); background: var(--bg-2);
   text-decoration: none; color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
@@ -2773,7 +2765,7 @@
 .ds-247420 .chat-file {
   display: flex; align-items: center; gap: 12px; padding: 12px 14px;
   background: var(--bg-2); border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; text-decoration: none; color: var(--fg);
+  border-radius: var(--r-1); text-decoration: none; color: var(--fg);
   max-width: min(100%, 360px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease);
 }
@@ -2782,7 +2774,7 @@
   font-size: 22px; width: 36px; height: 36px;
   display: inline-flex; align-items: center; justify-content: center;
   background: color-mix(in oklab, var(--accent) 18%, transparent);
-  color: var(--accent-ink); border-radius: 8px; flex-shrink: 0; font-family: var(--ff-mono);
+  color: var(--accent-ink); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
 }
 .ds-247420 .chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
 .ds-247420 .chat-file .name {
@@ -2800,7 +2792,7 @@
   background: var(--bg-2);
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; overflow: hidden; max-width: min(100%, 480px);
+  border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
   transition: box-shadow 0.12s ease, border-color 0.12s ease;
 }
 .ds-247420 .chat-msg:hover .chat-pdf { border-color: color-mix(in oklab, var(--accent) 30%, transparent); }
@@ -2823,7 +2815,7 @@
   display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 10px;
   background: var(--bg-2);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 12px; text-decoration: none; color: var(--fg);
+  border-radius: var(--r-1); text-decoration: none; color: var(--fg);
   max-width: min(100%, 480px);
   transition: background var(--dur-snap, .15s) var(--ease, ease), border-color var(--dur-snap, .15s) var(--ease, ease), box-shadow 0.15s ease;
 }
@@ -2834,7 +2826,7 @@
 }
 .ds-247420 .chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
 .ds-247420 .chat-link .thumb,
-.ds-247420 .chat-link img.thumb { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
+.ds-247420 .chat-link img.thumb { width: 80px; height: 80px; border-radius: var(--r-0); object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
 .ds-247420 .chat-link .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 .ds-247420 .chat-link .host { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
 .ds-247420 .chat-link .title { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@@ -2858,7 +2850,7 @@
   display: inline-flex; align-items: center; gap: 4px;
   padding: 2px 8px; background: var(--bg-2);
   border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: 999px; font-size: var(--fs-xs);
+  border-radius: var(--r-pill); font-size: var(--fs-xs);
   cursor: pointer; user-select: none;
   transition: background var(--dur-snap, .12s) var(--ease, ease), border-color var(--dur-snap, .12s) var(--ease, ease), transform 0.12s ease;
   position: relative;
@@ -2979,7 +2971,7 @@
 .ds-247420 .chat-composer .send:active { filter: brightness(0.94); }
 .ds-247420 .chat-composer .send:focus-visible,
 .ds-247420 .composer-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 .ds-247420 .chat-composer .send:disabled {
@@ -3091,8 +3083,12 @@
    Component States — Disabled, Loading, Error, Success
    -------------------------------------------------------------- */
 
-/* Disabled state for all interactive elements */
-.ds-247420 .btn:disabled, .ds-247420 .btn-primary:disabled, .ds-247420 .btn-ghost:disabled, .ds-247420 button:disabled, .ds-247420[disabled] {
+/* Disabled state for all interactive elements. The `.is-disabled` class
+   variants cover Btn()'s anchor-rendered case (shell.js) — an <a> has no
+   :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). */
+.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;
   cursor: not-allowed;
   pointer-events: none;
@@ -3422,7 +3418,7 @@
 
 /* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
 .ds-247420 :focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -3432,7 +3428,7 @@
 .ds-247420[role="tab"]:focus-visible,
 .ds-247420 .row:focus-visible,
 .ds-247420 .row[tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -3819,7 +3815,7 @@
   border-radius: var(--r-1, 6px);
   cursor: pointer;
 }
-.ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .app-side-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 @container (max-width: 900px) {
   .ds-247420 .app-side-toggle { display: inline-flex; }
   .ds-247420 .app-topbar .brand { margin-left: 44px; }
@@ -3909,7 +3905,7 @@
 .ds-247420 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: 5; 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:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-247420 .ws-resizer:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .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; }
@@ -3961,7 +3957,7 @@
   border-radius: var(--r-1); cursor: pointer;
 }
 .ds-247420 .ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ws-rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ws-rail-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .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; }
@@ -3974,7 +3970,7 @@
   min-height: 40px; white-space: nowrap; overflow: hidden;
 }
 .ds-247420 .ws-rail-action:hover { filter: brightness(1.08); }
-.ds-247420 .ws-rail-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ws-rail-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ws-rail-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .ds-247420 .ws-rail-item {
   display: flex; align-items: center; gap: var(--space-2);
@@ -3984,7 +3980,7 @@
   font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
 }
 .ds-247420 .ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ws-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-247420 .ws-rail-item:focus-visible { outline: 2px solid var(--accent-ink); 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); }
@@ -4057,7 +4053,7 @@
 /* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
 .ds-247420 .ws-desktop-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
 .ds-247420 .ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ws-desktop-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 @media (max-width: 900px) { .ds-247420 .ws-desktop-toggle { display: none; } }
 /* The pane collapse toggle is meaningless once the pane TRACK is dropped (the
    pane becomes a mobile overlay drawer at <=1480px, reached via its own
@@ -4181,7 +4177,7 @@
   .ds-247420 .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
 }
 .ds-247420 .ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ws-drawer-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
 @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; }
@@ -4193,7 +4189,7 @@
    ============================================================ */
 
 /* Highlighted match inside a Row title (Row `highlight` prop). */
-.ds-247420 .ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; }
+.ds-247420 .ds-hl { background: color-mix(in oklab, var(--accent) 25%, transparent); color: inherit; border-radius: var(--r-hair); }
 
 /* Action strip rendered inside an EXPANDED Row (Row `actions` prop). The
    buttons stop propagation so they never fire the row onClick. */
@@ -4206,20 +4202,20 @@
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .row-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .row-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .row-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* FilterPills - a group of pill toggle buttons (aria-pressed). */
 .ds-247420 .ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 .ds-247420 .ds-filter-pill {
   display: inline-flex; align-items: center; justify-content: center;
   padding: 4px 12px; min-height: 28px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: 999px;
+  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-pill);
   color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-tiny); cursor: pointer;
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
 .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: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-filter-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* Touch floor for the new small controls. */
 @media (pointer: coarse) {
@@ -4229,7 +4225,7 @@
 /* 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:hover { background: transparent; color: var(--fg-3); }
-.ds-247420 .ds-file-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* ============================================================
    Print — linearize WorkspaceShell so main content prints in full.
@@ -4279,7 +4275,7 @@
 /* PhaseWalk */
 .ds-247420 .ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
 .ds-247420 .ds-phasewalk-seg {
-  width: 18px; height: 10px; border-radius: 2px;
+  width: 18px; height: 10px; border-radius: var(--r-hair);
   background: var(--bg-3); position: relative;
 }
 .ds-247420 .ds-phasewalk-seg.is-reached { background: var(--success); }
@@ -4318,8 +4314,8 @@
 /* BarRow */
 .ds-247420 .ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
 .ds-247420 .ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-247420 .ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: 2px; height: 6px; overflow: hidden; }
-.ds-247420 .ds-bar-fill { background: var(--accent); height: 100%; border-radius: 2px; }
+.ds-247420 .ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
+.ds-247420 .ds-bar-fill { background: var(--accent); height: 100%; border-radius: var(--r-hair); }
 .ds-247420 .ds-bar-row-value { flex-shrink: 0; color: var(--fg-2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 @media (max-width: 400px) {
   .ds-247420 .ds-bar-row-label { width: 72px; }
@@ -4334,7 +4330,7 @@
   .ds-247420 .ds-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
 }
 .ds-247420 .ds-stats-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
-.ds-247420 .ds-stat { min-width: 0; background: var(--bg-3); border-radius: 4px; padding: 10px 12px; }
+.ds-247420 .ds-stat { min-width: 0; background: var(--bg-3); border-radius: var(--r-0); padding: 10px 12px; }
 .ds-247420 .ds-stat-val { font-size: clamp(18px, 5cqi, 22px); font-weight: 700; color: var(--accent-ink); overflow-wrap: anywhere; }
 .ds-247420 .ds-stat-val.rate-big { font-size: clamp(24px, 7cqi, 32px); color: var(--success); }
 .ds-247420 .ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
@@ -4345,7 +4341,7 @@
 .ds-247420 .ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
 .ds-247420 .ds-sub-btn {
   padding: 6px 10px; background: var(--bg-3); border: var(--bw-hair) solid var(--bg-3);
-  border-radius: 4px; font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
+  border-radius: var(--r-0); font-size: var(--fs-tiny); cursor: pointer; color: var(--fg);
   text-align: left; font-family: var(--ff-body);
 }
 .ds-247420 .ds-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
@@ -4376,7 +4372,7 @@
 /* DevRow */
 .ds-247420 .ds-dev-row {
   background: var(--danger-surface); border-left: var(--bw-chunk) solid var(--warn);
-  padding: 8px 12px; margin: 4px 0; border-radius: 3px; font-size: var(--fs-tiny);
+  padding: 8px 12px; margin: 4px 0; border-radius: var(--r-hair); font-size: var(--fs-tiny);
 }
 .ds-247420 .ds-dev-row strong { color: var(--warn); }
 
@@ -4396,7 +4392,7 @@
 .ds-247420 .ds-live-log-entry { padding: 2px 8px; border-bottom: var(--bw-hair) solid var(--bg-3); overflow-wrap: anywhere; }
 .ds-247420 .ds-live-log-entry:hover { background: var(--bg-3); }
 .ds-247420 .ds-live-log-ts { margin-right: 6px; color: var(--fg-3); }
-.ds-247420 .ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: 2px; font-size: var(--fs-micro); }
+.ds-247420 .ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: var(--r-hair); font-size: var(--fs-micro); }
 .ds-247420 .ds-live-log-preview { margin-left: 6px; color: var(--fg-3); word-break: break-word; }
 
 /* Touch floors for the dense controls (not covered by the mobile width blocks). */
@@ -4432,6 +4428,13 @@
 @media (max-width: 760px) {
   .ds-247420 .ds-panel-duo { grid-template-columns: 1fr; }
 }
+/* Wide-viewport density: auto-fit grid so panel COUNT tracks actual children
+   instead of a hardcoded column number — 2 children sit 2-up, 5 wrap to a
+   third row, never an arbitrary 3-card reflex (same auto-fit/minmax pattern
+   as .ds-tile-grid). Panels floor at 280px before wrapping, so ultra-wide
+   screens still get more columns than a fixed repeat(3, ...) ever allowed. */
+.ds-247420 .ds-panel-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
+.ds-247420 .ds-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; }
 /* wide dense rows/tables scroll inside their panel, never the page */
 .ds-247420 .ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
 
@@ -4442,7 +4445,7 @@
   max-width: min(1100px, 100%);
   margin: var(--space-3) auto;
   background: var(--bg-2);
-  border-radius: 18px;
+  border-radius: var(--r-2);
   padding: clamp(16px, 5vw, 64px);
   box-sizing: border-box;
   display: flex;
@@ -4504,7 +4507,7 @@
   .ds-247420 .ds-slide-split { grid-template-columns: 1fr; }
 }
 .ds-247420 .ds-slide-split-cell {
-  padding: 18px; background: var(--bg-2); border-radius: 14px;
+  padding: 18px; background: var(--bg-2); border-radius: var(--r-2);
   color: var(--fg-2); font-size: var(--fs-lg); line-height: var(--lh-base); min-width: 0;
 }
 .ds-247420 .ds-slide-split-cell--accent { border-left: 3px solid var(--slide-accent, var(--accent)); }
@@ -4521,7 +4524,7 @@
 .ds-247420 .ds-err-path {
   display: inline-flex; gap: 6px; align-items: baseline; flex-wrap: wrap; max-width: 100%;
   font-family: var(--ff-mono); font-size: 13px; color: var(--panel-text-2);
-  background: var(--panel-1); padding: 6px 12px; border-radius: 8px;
+  background: var(--panel-1); padding: 6px 12px; border-radius: var(--r-0);
   overflow-wrap: anywhere; word-break: break-all;
 }
 
@@ -4537,10 +4540,15 @@
 }
 .ds-247420 .ds-gallery-tile {
   cursor: pointer; display: flex; flex-direction: column; gap: 6px;
-  padding: 12px; border-radius: 10px; min-height: clamp(120px, 18vw, 160px);
+  padding: 12px; border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
   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);
 }
+/* Flat tonal fill only (house style: no bespoke tile chrome, no borders — see
+   .ds-feature above), so the hover affordance is a lift, matching the same
+   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: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
 .ds-247420 .ds-lightbox {
@@ -4551,7 +4559,7 @@
   z-index: 50;
 }
 .ds-247420 .ds-lightbox-card {
-  background: var(--panel-0); border-radius: 14px; padding: clamp(16px, 4vw, 28px);
+  background: var(--panel-0); border-radius: var(--r-2); padding: clamp(16px, 4vw, 28px);
   width: min(520px, 100%); min-width: 0;
   max-height: calc(100vh - 24px);
   max-height: calc(100dvh - 24px);
@@ -4559,7 +4567,7 @@
   display: flex; flex-direction: column; gap: 14px;
 }
 .ds-247420 .ds-lightbox-preview {
-  padding: clamp(16px, 6vw, 36px); border-radius: 10px; text-align: center;
+  padding: clamp(16px, 6vw, 36px); border-radius: var(--r-1); text-align: center;
   font-family: var(--ff-mono); white-space: pre-line; font-size: clamp(16px, 5vw, 24px);
   background: var(--tile-tone, var(--panel-1));
 }
@@ -4581,7 +4589,7 @@
 }
 .ds-247420 .ds-swatch-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
 .ds-247420 .ds-swatch-col { display: flex; flex-direction: column; gap: 6px; }
-.ds-247420 .ds-swatch-chip { height: 48px; border-radius: 10px; border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
+.ds-247420 .ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
 .ds-247420 .ds-swatch-chip--big { height: 64px; }
 .ds-247420 .ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
 .ds-247420 .ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
@@ -4643,14 +4651,14 @@
 .ds-247420 .ds-savebar {
   position: sticky; bottom: 8px; display: flex; align-items: center;
   justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 10px;
-  background: var(--panel-2); border-radius: 10px; margin: 8px 0;
+  background: var(--panel-2); border-radius: var(--r-1); margin: 8px 0;
 }
 .ds-247420 .ds-savebar-note { flex: 1 1 160px; min-width: 0; color: var(--panel-text-2); }
 .ds-247420 .ds-settings-modal { min-width: min(320px, calc(100vw - 32px)); max-width: 480px; }
 .ds-247420 .ds-modal-body-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 .ds-247420 .ds-modal-note { margin: 0 0 8px; color: var(--panel-text-2); font-size: 14px; }
 .ds-247420 .ds-draft-preview {
-  background: var(--panel-1); padding: 12px; border-radius: 6px;
+  background: var(--panel-1); padding: 12px; border-radius: var(--r-0);
   font-size: 13px; color: var(--panel-text-2); max-height: 120px;
   overflow-y: auto; font-family: var(--ff-mono); overflow-wrap: anywhere;
 }
@@ -4671,7 +4679,7 @@
 .ds-247420 .ds-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
 .ds-247420 .ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
 .ds-247420 .ds-auth-forgot { font-size: 13px; }
-.ds-247420 .ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: 8px; color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
+.ds-247420 .ds-auth-error { padding: 8px 10px; background: var(--panel-1); border-radius: var(--r-0); color: var(--danger); font-size: 13px; overflow-wrap: anywhere; }
 .ds-247420 .ds-auth-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--panel-text-3); font-size: 12px; }
 .ds-247420 .ds-auth-divider-line { flex: 1; height: 1px; background: var(--panel-2); }
 .ds-247420 .ds-auth-providers { display: flex; gap: 8px; flex-wrap: wrap; }
@@ -4695,7 +4703,7 @@
 .ds-247420 .ds-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; flex-wrap: wrap; min-width: 0; }
 .ds-247420 .ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
 .ds-247420 .ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
-.ds-247420 .ds-gal-swatch { height: 64px; border-radius: 8px; background: var(--swatch, var(--panel-1)); }
+.ds-247420 .ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
 .ds-247420 .ds-gal-swatch-meta { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-family: var(--ff-mono); font-size: 11px; min-width: 0; }
 .ds-247420 .ds-gal-swatch-name { color: var(--panel-text); }
 .ds-247420 .ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
@@ -4716,7 +4724,7 @@
 .ds-247420 .ds-cli-warn .prompt, .ds-247420 .ds-cli-warn .cmd { color: var(--mascot); }
 .ds-247420 .ds-cli-log .prompt { color: var(--fg-3); }
 .ds-247420 .ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
-.ds-247420 .ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: 10px; }
+.ds-247420 .ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: var(--r-1); }
 .ds-247420 .ds-term-body--tall { min-height: 280px; }
 .ds-247420 .ds-term-input-row { margin-top: 6px; }
 .ds-247420 .ds-term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: 13px; color: var(--fg); }
@@ -4841,7 +4849,7 @@
   width: 4px;
   height: 8px;
   background: var(--fg);
-  border-radius: 0 4px 4px 0;
+  border-radius: 0 var(--r-0) var(--r-0) 0;
   transition: height var(--dur-base) var(--ease);
 }
 .ds-247420 .cm-server-icon:hover .cm-server-pill { height: 20px; }
@@ -4897,7 +4905,7 @@
   width: 32px;
   height: 2px;
   background: color-mix(in oklab, var(--fg) 12%, transparent);
-  border-radius: 2px;
+  border-radius: var(--r-hair);
   margin: 4px 0;
   flex-shrink: 0;
 }
@@ -4958,7 +4966,7 @@
 .ds-247420 .cm-channel-list::-webkit-scrollbar-track { background: transparent; }
 .ds-247420 .cm-channel-list::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--fg) 18%, transparent);
-  border-radius: 4px;
+  border-radius: var(--r-0);
 }
 
 /* ============================================================
@@ -5038,7 +5046,7 @@
   background: color-mix(in oklab, var(--fg) 8%, transparent);
 }
 .ds-247420 .cm-cat-add:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -5090,7 +5098,7 @@
   bottom: 4px;
   width: 3px;
   background: var(--accent);
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 var(--r-hair) var(--r-hair) 0;
 }
 
 .ds-247420 .cm-channel-item.voice-active {
@@ -5219,7 +5227,7 @@
   background: color-mix(in oklab, var(--fg) 10%, transparent);
 }
 .ds-247420 .cm-ch-action-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -5558,7 +5566,7 @@
 .ds-247420 .cm-member-list::-webkit-scrollbar { width: 8px; }
 .ds-247420 .cm-member-list::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--fg) 18%, transparent);
-  border-radius: 4px;
+  border-radius: var(--r-0);
 }
 
 .ds-247420 .cm-member-category {
@@ -5802,45 +5810,45 @@
 .ds-247420 .cm-server-icon:focus-visible,
 .ds-247420 .cm-server-back:focus-visible,
 .ds-247420 .cm-server-add:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
   border-radius: var(--r-2);
 }
 
 .ds-247420 .cm-channel-item:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .ds-247420 .cm-server-header:focus-visible,
 .ds-247420 .cm-category-header:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
 }
 
 .ds-247420 .cm-member-item:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: -2px;
   border-radius: var(--r-1);
 }
 
 .ds-247420 .cm-vs-btn:focus-visible,
 .ds-247420 .cm-user-btn:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
   border-radius: var(--r-1);
 }
 
 /* ThreadPanel / Forum / Page interactive elements */
 .ds-247420 .cm-tp-item:focus-visible,
-.ds-247420 .cm-forum-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-1); }
+.ds-247420 .cm-forum-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-1); }
 .ds-247420 .cm-tp-new:focus-visible,
 .ds-247420 .cm-tp-close:focus-visible,
 .ds-247420 .cm-forum-new:focus-visible,
 .ds-247420 .cm-forum-sort:focus-visible,
-.ds-247420 .cm-page-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
-.ds-247420 .cm-forum-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
+.ds-247420 .cm-page-edit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--r-1); }
+.ds-247420 .cm-forum-search:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink); }
 
 /* ---------- mobile header ---------- */
 .ds-247420 .cm-mobile-header {
@@ -5868,7 +5876,7 @@
   border-radius: var(--r-1);
 }
 .ds-247420 .cm-mh-btn:hover { background: var(--panel-3); }
-.ds-247420 .cm-mh-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .cm-mh-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .cm-mh-title {
   flex: 1 1 auto;
   min-width: 0;
@@ -5913,7 +5921,7 @@
   border-radius: var(--r-1);
 }
 .ds-247420 .cm-rb-cancel:hover { background: var(--panel-3); color: var(--fg); }
-.ds-247420 .cm-rb-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .cm-rb-cancel:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* ---------- banner ---------- */
 .ds-247420 .cm-banner {
@@ -5926,6 +5934,7 @@
   font-weight: 500;
 }
 .ds-247420 .cm-banner.clickable { cursor: pointer; }
+.ds-247420 .cm-banner.clickable:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
 .ds-247420 .cm-banner-msg { flex: 1 1 auto; min-width: 0; }
 .ds-247420 .cm-banner-action {
   flex: none;
@@ -6002,6 +6011,7 @@
   touch-action: none;
   transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-snap) var(--ease);
 }
+.ds-247420 .vx-ptt:hover { background: color-mix(in oklab, var(--fg) 8%, var(--bg-2)); }
 .ds-247420 .vx-ptt:active { transform: scale(0.97); }
 .ds-247420 .vx-ptt-icon { font-size: var(--fs-xl); line-height: 1; }
 .ds-247420 .vx-ptt-label { font-size: var(--fs-tiny); letter-spacing: var(--tr-label); text-transform: uppercase; }
@@ -6111,6 +6121,7 @@
   cursor: pointer;
   transition: background var(--dur-base) var(--ease);
 }
+.ds-247420 .vx-btn:hover { background: var(--bg-4, var(--bg-3)); }
 .ds-247420 .vx-btn-on, .ds-247420 .vx-btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
 
 .ds-247420 .vx-modal-backdrop {
@@ -6141,6 +6152,7 @@
   border: 0; background: transparent; color: var(--fg-3);
   font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 0 var(--space-1);
 }
+.ds-247420 .vx-modal-x:hover { color: var(--fg); }
 .ds-247420 .vx-modal-body { padding: var(--space-3); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
 .ds-247420 .vx-modal-foot {
   display: flex; justify-content: flex-end; gap: var(--space-2);
@@ -6198,6 +6210,7 @@
   cursor: pointer;
   font-size: var(--fs-sm);
 }
+.ds-247420 .vx-queue-btn:hover { background: var(--bg-4, var(--bg-2)); }
 .ds-247420 .vx-queue-strip {
   display: flex; gap: var(--space-2);
   overflow-x: auto;
@@ -6215,6 +6228,7 @@
   font-size: var(--fs-tiny);
   cursor: pointer;
 }
+.ds-247420 .vx-chip:hover { background: var(--bg-4, var(--bg-2)); border-color: var(--rule-strong); }
 .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; }
@@ -6291,7 +6305,44 @@
 .ds-247420 .cm-tp-item-title { font-size: var(--fs-1, 14px); }
 .ds-247420 .cm-tp-item-snippet { font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .cm-tp-item-meta { display: flex; gap: var(--space-2); font-size: var(--fs-micro, 11px); color: var(--fg-2, var(--fg)); opacity: .7; }
-.ds-247420 .cm-tp-empty, .ds-247420 .cm-forum-empty, .ds-247420 .cm-channel-empty, .ds-247420 .cm-member-empty { padding: var(--space-3); text-align: center; color: var(--fg-2, var(--fg)); opacity: .7; font-size: var(--fs-sm); }
+.ds-247420 .cm-tp-empty, .ds-247420 .cm-forum-empty, .ds-247420 .cm-channel-empty, .ds-247420 .cm-member-empty {
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
+  padding: var(--space-4) var(--space-3); text-align: center;
+  color: var(--fg-2, var(--fg)); opacity: .7; font-size: var(--fs-sm);
+}
+.ds-247420 .cm-tp-empty svg, .ds-247420 .cm-forum-empty svg, .ds-247420 .cm-channel-empty svg, .ds-247420 .cm-member-empty svg { opacity: .6; }
+
+/* Loading skeletons — cold-load placeholders for channel/member/thread/forum
+   lists. Same .ds-skel shimmer primitive as sessions.js/files.js so every
+   list surface in the kit uses one shimmer language, never a bare spinner. */
+.ds-247420 .cm-channel-item-skeleton, .ds-247420 .cm-member-item-skeleton {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2); margin: 2px var(--space-1);
+}
+.ds-247420 .cm-channel-item-skeleton .ds-skel-icon, .ds-247420 .cm-member-item-skeleton .ds-skel-icon {
+  width: 20px; height: 20px; border-radius: var(--r-round, 50%); flex: none; background: var(--bg-3);
+}
+.ds-247420 .cm-channel-item-skeleton .ds-skel-title, .ds-247420 .cm-member-item-skeleton .ds-skel-title {
+  height: 12px; width: 60%; border-radius: var(--r-1); background: var(--bg-3);
+}
+.ds-247420 .cm-list-item-skeleton {
+  display: flex; flex-direction: column; gap: 6px;
+  padding: var(--space-2) var(--space-3); border-bottom: var(--bw-hair) solid var(--rule);
+}
+.ds-247420 .cm-list-item-skeleton .ds-skel-title { height: 12px; width: 55%; border-radius: var(--r-1); background: var(--bg-3); }
+.ds-247420 .cm-list-item-skeleton .ds-skel-meta { height: 9px; width: 35%; border-radius: var(--r-1); background: var(--bg-3); }
+/* Self-contained shimmer keyframe: community.css ships standalone (the
+   community-app kit does not also load chat.css), so this cannot depend on
+   chat.css's ds-skel-shimmer definition even though the visual language and
+   token vocabulary match it exactly. */
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .cm-channel-item-skeleton .ds-skel-icon, .ds-247420 .cm-channel-item-skeleton .ds-skel-title, .ds-247420 .cm-member-item-skeleton .ds-skel-icon, .ds-247420 .cm-member-item-skeleton .ds-skel-title, .ds-247420 .cm-list-item-skeleton .ds-skel-title, .ds-247420 .cm-list-item-skeleton .ds-skel-meta {
+    animation: cm-skel-shimmer 1.3s ease-in-out infinite;
+    background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
+    background-size: 200% 100%;
+  }
+}
+@keyframes cm-skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
 /* ForumView — cm-forum / cm-forum-* */
 .ds-247420 .cm-forum { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg-1, var(--bg-2)); color: var(--fg); }
@@ -6488,13 +6539,13 @@
   position: absolute; right: 16px; bottom: 12px; z-index: 3;
   display: none; align-items: center; gap: .35em;
   padding: .4em .8em; font: inherit; font-size: var(--fs-tiny); cursor: pointer;
-  border-radius: 999px; border: var(--bw-hair) solid var(--rule);
+  border-radius: var(--r-pill); border: var(--bw-hair) solid var(--rule);
   background: var(--bg-2); color: var(--fg-2, var(--fg));
   box-shadow: 0 2px 8px color-mix(in srgb, var(--fg) 14%, transparent);
 }
 .ds-247420 .agentchat-jump.show { display: inline-flex; }
 .ds-247420 .agentchat-jump:hover { background: var(--bg-3); }
-.ds-247420 .agentchat-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .agentchat-jump:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
 /* Streaming caret: a thin blinking bar at the live edge of an assistant turn. */
 .ds-247420 .chat-stream-caret {
@@ -6516,7 +6567,7 @@
 }
 .ds-247420 .chat-msg-action-label { font-size: var(--fs-tiny); }
 .ds-247420 .chat-msg-action:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .chat-msg-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-msg-action:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 
 /* Empty state: a fresh thread is an invitation, not a void. */
 .ds-247420 .agentchat-empty {
@@ -6544,7 +6595,7 @@
   font: inherit;
   font-size: var(--fs-tiny);
   padding: .4em .8em;
-  border-radius: 999px;
+  border-radius: var(--r-pill);
   border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
   background: color-mix(in srgb, var(--fg) 5%, transparent);
   color: var(--fg-2, var(--fg));
@@ -6583,7 +6634,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-install-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .agentchat-install-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .agentchat-install-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-247420 .agentchat-install-actions { display: flex; justify-content: flex-start; }
 
 /* Host-supplied transcript export actions riding the controls row. */
@@ -6594,7 +6645,7 @@
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .agentchat-export-act:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .agentchat-export-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .agentchat-export-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* "working" tail: a long silent tool call shouldn't read as frozen. */
 .ds-247420 .agentchat-working {
@@ -6724,7 +6775,7 @@
 /* Rail filter uses the shared .ds-search-input primitive (provides bg/border/
    radius/focus-ring); only the rail layout + touch floor live here. */
 .ds-247420 .ds-session-head .ds-search-input { order: 1; flex: 1 1 auto; min-width: 0; min-height: 36px; padding: 0 10px; }
-.ds-247420 .ds-session-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-session-new:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 /* Touch floor (must FOLLOW the base rules - same specificity, order decides). */
 @media (pointer: coarse) {
   .ds-247420 .ds-session-new { width: 44px; min-height: 44px; }
@@ -6743,10 +6794,10 @@
   cursor: pointer; text-align: left; color: var(--fg);
 }
 .ds-247420 .ds-session-row:hover { background: var(--bg-2); }
-.ds-247420 .ds-session-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-247420 .ds-session-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ds-247420 .ds-session-row.active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent); }
 .ds-247420 .ds-session-row.rail-green::before, .ds-247420 .ds-session-row.rail-purple::before, .ds-247420 .ds-session-row.rail-flame::before {
-  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
+  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-hair);
 }
 /* Rail tones MUST match .row.rail-* in app-shell.css so the same semantic state
    reads as one colour across the conversation list and content rows. */
@@ -6837,7 +6888,7 @@
 }
 .ds-247420 .chat-code-block:hover .chat-code-copy, .ds-247420 .chat-code-block:focus-within .chat-code-copy { opacity: 1; }
 .ds-247420 .chat-code-copy.is-copied { color: var(--accent-ink); border-color: var(--accent); }
-.ds-247420 .chat-code-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-code-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 /* Head-placed copy (structured CodeNode + FilePreviewCode) is always visible. */
 .ds-247420 .chat-code-head .spread { flex: 1; }
 .ds-247420 .chat-code-copy-head { position: static; opacity: 1; }
@@ -6926,7 +6977,7 @@
   cursor: pointer; font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
 .ds-247420 .ds-dash-errors-toggle.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-dash-errors-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- C3: per-card select checkbox. --- */
 .ds-247420 .ds-dash-select {
@@ -6936,7 +6987,7 @@
   font-family: var(--ff-mono); font-size: var(--fs-sm);
 }
 .ds-247420 .ds-dash-select[aria-checked="true"] { color: var(--accent-ink); }
-.ds-247420 .ds-dash-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-dash-select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- C5: active dashboard card (current conversation). --- */
 .ds-247420 .ds-dash-card.is-active { box-shadow: inset 2px 0 0 var(--accent); }
@@ -6958,7 +7009,7 @@
 
 /* --- E1: inline file preview pane (split view, non-modal). --- */
 .ds-247420 .ds-preview-pane { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; }
-.ds-247420 .ds-preview-pane:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-247420 .ds-preview-pane:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ds-247420 .ds-preview-pane .ds-preview-body { flex: 1; min-height: 0; overflow: auto; }
 .ds-247420 .ds-preview-pane-empty { align-items: center; justify-content: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-preview-code-wrap { display: flex; flex-direction: column; min-height: 0; }
@@ -6975,7 +7026,7 @@
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-247420 .ds-file-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-file-more-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 /* --- D3: locked/no-access file row. --- */
 .ds-247420 .ds-file-row.is-locked { opacity: .6; }
 
@@ -6986,8 +7037,9 @@
   background: none; color: var(--fg-3); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
+.ds-247420 .ds-roots-tab:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .ds-roots-tab.active { background: var(--bg); color: var(--fg); }
-.ds-247420 .ds-roots-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-roots-tab:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 
 /* --- H4: touch targets. On a coarse pointer / narrow screen the hover-revealed
    action rows are made permanently visible and small controls floor to 44px so
@@ -7019,7 +7071,7 @@
   color: var(--fg-3); font-family: var(--ff-body); font-size: var(--fs-micro);
 }
 .ds-247420 .ds-session-meta-copy:hover { background: var(--bg-3); color: var(--fg); }
-.ds-247420 .ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-session-meta-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (pointer: coarse), (max-width: 640px) {
   .ds-247420 .ds-session-meta-copy { min-height: 44px; min-width: 44px; }
 }
@@ -7047,7 +7099,7 @@
 }
 
 /* Drag-over ring: token accent, never a hex. */
-.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
+.ds-247420 .chat-composer.dragover { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: var(--r-2); }
 
 /* Per-bit composer context: only the bit that owns a control is a button. */
 .ds-247420 .chat-composer-context-bit {
@@ -7087,7 +7139,8 @@
   border-radius: var(--r-1); background: var(--bg-2); color: var(--fg-2); cursor: pointer;
   font-family: var(--ff-body); font-size: var(--fs-tiny);
 }
-.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .agentchat-earlier-btn:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .agentchat-earlier-btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 @media (pointer: coarse) {
   .ds-247420 .agentchat-earlier-btn { min-height: 44px; }
 }
@@ -7195,7 +7248,7 @@
 }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head::-webkit-details-marker { display: none; }
 .ds-247420 .chat-msg .chat-tool .chat-tool-head:hover { background: var(--bg-2); }
-.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.ds-247420 .chat-msg .chat-tool .chat-tool-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .ds-247420 .chat-tool-icon { display: inline-flex; color: var(--fg-3); }
 .ds-247420 .chat-tool-name { font-family: var(--ff-mono); font-weight: 600; color: var(--fg); }
 .ds-247420 .chat-tool-label { color: var(--fg-3); font-size: var(--fs-tiny); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@@ -7219,7 +7272,7 @@
 .ds-247420 .chat-tool-section-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-caps); color: var(--fg-3); }
 .ds-247420 .chat-tool-copy { position: static; opacity: 0; }
 .ds-247420 .chat-tool-section:hover .chat-tool-copy, .ds-247420 .chat-tool-section:focus-within .chat-tool-copy { opacity: 1; }
-.ds-247420 .chat-tool-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
+.ds-247420 .chat-tool-copy:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; opacity: 1; }
 .ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-2); background: var(--bg-2); border-radius: var(--r-1); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1.45; overflow-x: auto; max-height: 320px; overflow-y: auto; }
 .ds-247420 .chat-tool-pre.is-error { color: var(--flame); }
 .ds-247420 .chat-tool-pre.chat-tool-empty { color: var(--fg-3); }
@@ -7282,10 +7335,11 @@
 .ds-247420 .ds-dash-breakdown .seg.is-idle::before { background: transparent; box-shadow: inset 0 0 0 1px var(--stale), inset 0 0 0 3px var(--bg); }
 .ds-247420 .ds-dash-stream-disc { display: inline-flex; align-items: center; gap: var(--space-1); }
 .ds-247420 .ds-dash-selectall { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-tiny); color: var(--fg-2); cursor: pointer; background: none; border: none; padding: var(--space-1); }
-.ds-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.ds-247420 .ds-dash-selectall:hover { color: var(--fg); }
+.ds-247420 .ds-dash-selectall:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .ds-247420 .ds-dash-clear { background: none; border: none; color: var(--fg-3); cursor: pointer; font-size: var(--fs-tiny); text-decoration: underline dotted; padding: var(--space-1); }
 .ds-247420 .ds-dash-clear:hover { color: var(--fg); }
-.ds-247420 .ds-dash-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-1); }
+.ds-247420 .ds-dash-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-radius: var(--r-1); }
 
 /* Conversation-rail loading skeleton (cold ccsniff walk). */
 .ds-247420 .ds-session-row-skeleton { display: flex; flex-direction: column; gap: 6px; padding: var(--space-2) var(--space-3); }
@@ -7503,7 +7557,7 @@
     overflow: auto;
 }
 .ds-247420 .ds-ep-tree-item { display: flex; flex-direction: column; }
-.ds-247420 .ds-ep-tree-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-ep-tree-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-ep-tree-row {
     display: flex; align-items: center; gap: 6px;
     padding: 4px 8px 4px 0;
@@ -7859,12 +7913,15 @@
     background: var(--panel-2, transparent);
     color: inherit; font: inherit; cursor: pointer;
 }
+.ds-247420 .ds-ep-dialog-btn:hover { background: var(--panel-3, var(--bg-3)); }
 .ds-247420 .ds-ep-dialog-btn.kind-primary {
     background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
 }
+.ds-247420 .ds-ep-dialog-btn.kind-primary:hover { filter: brightness(1.08); }
 .ds-247420 .ds-ep-dialog-btn.kind-danger {
     background: var(--danger); color: var(--on-accent); border-color: var(--danger);
 }
+.ds-247420 .ds-ep-dialog-btn.kind-danger:hover { filter: brightness(1.1); }
 
 /* ---------------------------------------------------------------
    Toast
@@ -7908,7 +7965,7 @@
 .ds-247420 .ds-ep-ctxmenu-item:focus-visible,
 .ds-247420 .ds-ep-resize:focus-visible,
 .ds-247420 .ds-ep-dialog-btn:focus-visible {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--accent-ink);
     outline-offset: 2px;
 }
 
@@ -7959,7 +8016,7 @@
 .ds-247420 .ds-ep-iconbtn:focus-visible,
 .ds-247420 .ds-ep-iconbtn-group button:focus-visible,
 .ds-247420 .ds-ep-resize:focus-visible {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--accent-ink);
     outline-offset: 2px;
     border-radius: var(--r-1);
 }
@@ -7988,7 +8045,7 @@
     cursor: inherit;
 }
 .ds-247420 .ds-check:focus-visible, .ds-247420 .ds-radio:focus-visible {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--accent-ink);
     outline-offset: 2px;
 }
 
@@ -8015,6 +8072,7 @@
     padding: 0;
     flex-shrink: 0;
 }
+.ds-247420 .ds-toggle:hover { border-color: var(--rule-strong, var(--fg-3)); }
 .ds-247420 .ds-toggle-knob {
     position: absolute;
     top: 1px; left: 1px;
@@ -8032,7 +8090,7 @@
     transform: translateX(20px);
 }
 .ds-247420 .ds-toggle:focus-visible {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--accent-ink);
     outline-offset: 2px;
 }
 .ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
@@ -8147,7 +8205,7 @@
     outline: none;
 }
 .ds-247420 .ds-dropdown-item:focus-visible {
-    outline: 2px solid var(--accent);
+    outline: 2px solid var(--accent-ink);
     outline-offset: -2px;
 }
 .ds-247420 .ds-dropdown-item[aria-disabled="true"] {
@@ -8191,7 +8249,7 @@
     cursor: grab; font: 14px/1 var(--ff-mono, monospace); letter-spacing: -2px;
     touch-action: none; user-select: none;
 }
-.ds-247420 .ds-reorder-handle:focus-visible { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
+.ds-247420 .ds-reorder-handle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-reorder-handle:active { cursor: grabbing; }
 .ds-247420[data-dragging="true"] { opacity: 0.6; cursor: grabbing; transform: scale(0.98); }
 .ds-247420[data-drop-target-active="true"] {
@@ -8200,7 +8258,7 @@
 }
 .ds-247420 .ds-reorder-insertion-line {
     height: 2px; background: var(--focus-ring, var(--accent));
-    border-radius: 1px; animation: ds-insertion-in var(--dur-snap, 120ms) var(--ease, ease);
+    border-radius: var(--r-hair); animation: ds-insertion-in var(--dur-snap, 120ms) var(--ease, ease);
 }
 @keyframes ds-insertion-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
 @media (prefers-reduced-motion: reduce) {
@@ -8267,6 +8325,7 @@
     color: var(--fg); font: inherit; text-align: left;
     border-radius: var(--r-1, 10px); 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); }
 .ds-247420 .ov-cmd-glyph { width: 18px; display: inline-flex; justify-content: center; flex-shrink: 0; }
 .ds-247420 .ov-cmd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -8301,6 +8360,7 @@
     padding: var(--space-2, 8px); cursor: pointer; font-size: var(--fs-lg, 18px);
     border-bottom: 2px solid transparent;
 }
+.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-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); }
@@ -8399,7 +8459,7 @@
     border: 1px solid var(--rule); border-radius: var(--r-1, 10px);
     padding: var(--space-1, 4px) var(--space-2, 8px); font: inherit;
 }
-.ds-247420 .ov-set-control:focus-visible { outline: none; border-color: var(--accent); }
+.ds-247420 .ov-set-control:focus-visible { outline: 2px solid var(--accent-ink); 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; }
 .ds-247420 .ov-set-btn {
@@ -8429,6 +8489,7 @@
 .ds-247420 .ov-auth-x:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tabs { display: flex; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
 .ds-247420 .ov-auth-tab { flex: 1; padding: var(--space-1) var(--space-2); border: 1px solid var(--rule); border-bottom: none; border-radius: var(--r-1) var(--r-1) 0 0; background: var(--bg-3); color: var(--fg-2, var(--fg)); cursor: pointer; }
+.ds-247420 .ov-auth-tab:hover { color: var(--fg); }
 .ds-247420 .ov-auth-tab.is-active { background: var(--bg-2); color: var(--fg); font-weight: 700; }
 .ds-247420 .ov-auth-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
 .ds-247420 .ov-auth-hint { margin: 0; font-size: var(--fs-0, 12px); color: var(--fg-2, var(--fg)); }
@@ -8494,8 +8555,8 @@
     background: var(--panel-2); cursor: pointer; flex-shrink: 0;
 }
 .ds-247420 .ds-input-color::-webkit-color-swatch-wrapper { padding: 2px; }
-.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: 2px; }
-.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-input-color::-webkit-color-swatch { border: none; border-radius: var(--r-hair); }
+.ds-247420 .ds-input-color:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .ds-247420 .ds-input-check {
     appearance: none; -webkit-appearance: none;
     width: 16px; height: 16px; flex-shrink: 0;
@@ -8508,7 +8569,7 @@
     width: 4px; height: 8px; border: solid var(--accent-fg);
     border-width: 0 2px 2px 0; transform: rotate(45deg);
 }
-.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.ds-247420 .ds-input-check:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
 /* ---------------------------------------------------------------
    Tree drag-reparent affordance — clear drop target + dragging row.
@@ -8642,7 +8703,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 8px;
-  border-radius: 6px;
+  border-radius: var(--r-0);
   color: var(--fg-2, color-mix(in oklab, var(--fg) 78%, transparent));
   text-decoration: none;
   font-size: var(--fs-sm, 14px);
@@ -8664,7 +8725,7 @@
   flex-shrink: 0;
   min-width: 18px;
   padding: 0 5px;
-  border-radius: 9px;
+  border-radius: var(--r-1);
   background: var(--accent);
   color: var(--on-accent);
   font-size: 11px;
@@ -8942,7 +9003,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .ds-247420 .ds-event-list .row.event-flash { animation: none; outline: 2px solid var(--accent); }
+  .ds-247420 .ds-event-list .row.event-flash { animation: none; outline: 2px solid var(--accent-ink); }
 }
 
 @media print {
@@ -9018,7 +9079,7 @@
   max-width: 100%;
   padding: 18px 18px 18px 20px;
   background: var(--panel-1);
-  border-radius: 10px;
+  border-radius: var(--r-1);
   box-shadow: var(--panel-shadow);
   scrollbar-width: thin;
   scrollbar-color: var(--panel-3) transparent;
@@ -9027,7 +9088,7 @@
 .ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar-track { background: transparent; }
 .ds-247420 #ds-article-host.has-toc > .toc::-webkit-scrollbar-thumb {
   background: var(--panel-3);
-  border-radius: 8px;
+  border-radius: var(--r-0);
   border: 2px solid transparent;
   background-clip: padding-box;
 }
@@ -9063,7 +9124,7 @@
 .ds-247420 .cli {
   display: block;
   background: var(--panel-1);
-  border-radius: 8px;
+  border-radius: var(--r-0);
   padding: 16px 20px;
   margin: 16px 0 28px 0;
   font-family: var(--ff-mono);
@@ -9124,7 +9185,7 @@
   padding: 14px 18px;
   margin: 8px 0;
   background: var(--panel-1);
-  border-radius: 6px;
+  border-radius: var(--r-0);
   font-size: 13px;
   box-shadow: var(--panel-shadow);
   text-decoration: none;
@@ -9141,7 +9202,7 @@
   border: 1px solid var(--panel-3);
   font-size: 0.7rem;
   padding: 0.15rem 0.5rem;
-  border-radius: 3px;
+  border-radius: var(--r-hair);
   font-family: var(--ff-mono);
 }
 .ds-247420 .ds-prose .gm-callout {
@@ -9242,7 +9303,7 @@
 }
 .ds-247420 .sp-loading-bar-track {
   height: 6px;
-  border-radius: 3px;
+  border-radius: var(--r-hair);
   background: var(--bg-3);
   overflow: hidden;
 }