agentgui 1.0.1021 → 1.0.1023

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

@@ -7,19 +7,9 @@
    Source-of-truth tokens. Component sheet lives in app-shell.css.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&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 Space Grotesk 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 'Space Grotesk' family; this only kicks in for the fallback glyphs. */
-@font-face {
-  font-family: 'Space Grotesk Fallback';
-  src: local('Arial');
-  size-adjust: 96%;
-  ascent-override: 95%;
-  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 */
@@ -131,14 +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 — Space Grotesk carries display/headings (editorial grotesk with real
-     character), Inter 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 Space Grotesk loads. */
-  --ff-display:  'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
-  --ff-body:     'Inter', 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;
@@ -174,9 +161,17 @@
   --tr-tighter:  -0.03em;
 
   /* Spacing (8pt) */
+  /* Micro rungs below --space-1 — dense editor/inspector chrome (table cell
+     padding, pill gaps, tight toolbar gutters) needs finer steps than the 8pt
+     scale offers; same reasoning as --r-hair/--r-0 sitting below --r-1. */
+  --space-hair:  2px;
+  --space-half:  3px;
   --space-0:     0;
   --space-1:     4px;
+  --space-1-5:   5px;
+  --space-1-75:  6px;
   --space-2:     8px;
+  --space-2-5:   10px;
   --space-3:     16px;
   --space-4:     24px;
   --space-5:     32px;
@@ -200,10 +195,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;
@@ -233,6 +232,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;
@@ -247,8 +250,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);
@@ -273,7 +279,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;
 }
 
@@ -281,13 +287,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;
 }
 
@@ -500,7 +506,7 @@
 /* app-shell.css */
 /* ============================================================
    247420 design system — component sheet
-   "Acid Editorial": Space Grotesk display + Inter body + JetBrains code.
+   "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.
    ============================================================ */
@@ -530,7 +536,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 {
@@ -747,7 +753,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
@@ -783,7 +789,7 @@
   width: 100%;
 }
 .ds-247420 .app-search:focus-within {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--accent-ink);
   outline-offset: 2px;
 }
 
@@ -825,7 +831,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 {
@@ -871,17 +877,31 @@
 .ds-247420 .app-main > .chat,
 .ds-247420 .app-main > .chat-area,
 .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; }
 
 @media (min-width: 1400px) {
-  .ds-247420 .app { max-width: 1400px; margin-left: auto; margin-right: auto; }
+  /* Fluid ceiling, not a hard stop: scales from 1400px up to 1920px across the
+     1400-2200px viewport band (matches .ws-shell's 1920px ultrawide cap below)
+     instead of freezing at 1400px and leaving >1000px dead margin on a 2560px+
+     display. Row/prose measure caps (--measure-wide etc.) still own line-length
+     readability, so widening the shell itself does not create unreadable rows. */
+  .ds-247420 .app { max-width: clamp(1400px, 92vw, 1920px); margin-left: auto; margin-right: auto; }
   .ds-247420 .app-main .chat,
   .ds-247420 .app-main > .chat-area,
   .ds-247420 .app-main > .main-content { max-width: none; margin: 0; width: 100%; }
   /* Status bar inherits the .app max-width cap above and stretches edge-to-edge
      within it; no separate width constraint (which previously narrowed it). */
   .ds-247420 .app-status { width: 100%; }
+  /* Cap row text measure inside the wide capped main (ultrawide readability). */
+  .ds-247420 .row .title, .ds-247420 .row .sub { max-width: var(--measure-wide); }
+}
+/* Beyond 1920px the shell itself stops growing (matches .ws-shell's own cap) —
+   extra space becomes page margin rather than stretching sidebar/content grid
+   tracks to distances a pointer/eye shouldn't have to travel. */
+@media (min-width: 2200px) {
+  .ds-247420 .app { max-width: 1920px; }
 }
 
 .ds-247420 .app-status {
@@ -934,7 +954,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;
 }
 
@@ -961,7 +981,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;
 }
@@ -973,7 +993,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); }
@@ -986,6 +1006,9 @@
 .ds-247420 .ds-badge.tone-error   { background: var(--flame);       color: var(--on-color); }
 .ds-247420 .ds-badge.tone-success { background: var(--green-tint);  color: var(--green-deep); }
 .ds-247420 .ds-badge.tone-neutral { background: var(--bg-3);        color: var(--fg-2); }
+.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-yellow  { background: var(--sun);         color: var(--ink); }
 
 .ds-247420 .chip {
   display: inline-flex; align-items: center; gap: 6px;
@@ -1009,6 +1032,22 @@
 .ds-247420 .chip.tone-ok       { background: var(--green-tint);  color: var(--green-deep); }
 .ds-247420 .chip.tone-miss     { background: var(--flame);       color: var(--on-color); }
 .ds-247420 .chip.tone-neutral  { background: var(--bg-3);        color: var(--fg-2); }
+.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); }
+
+/* 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;
+  border-radius: var(--r-pill);
+  font-size: var(--fs-micro);
+  background: var(--bg-3); color: var(--fg-2);
+  margin: 1px;
+}
+.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); }
 
 .ds-247420 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
@@ -1047,7 +1086,7 @@
      rows sit on ONE left axis (the old 24/32 padding was authored for the
      pre-padding .panel-wide era and indented the label 16px past its content). */
   padding: var(--space-2) var(--space-3);
-  font-size: var(--fs-xs); font-weight: 600;
+  font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3);
   letter-spacing: var(--tr-caps); text-transform: uppercase;
 }
@@ -1175,7 +1214,6 @@
 .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; }
-.ds-247420 .ds-hero-badge { grid-area: actions; }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   font-size: clamp(40px, 9cqi, 116px);
@@ -1190,7 +1228,10 @@
 /* The lead phrase in the title — printed in the electric lead, not glowing. */
 .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; align-self: end; }
-@media (max-width: 900px) {
+/* Container-queried (the whole shell is; a 500px pane on a wide viewport
+   would keep the two-column grid under a width @media). Left-aligned stack —
+   no centering — preserving the asymmetric intent. */
+@container (max-width: 900px) {
   .ds-247420 .ds-hero {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas: 'title' 'body' 'actions';
@@ -1261,13 +1302,21 @@
 }
 .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 { animation-play-state: paused; }
+.ds-247420 .ds-marquee:hover .ds-marquee-track,
+.ds-247420 .ds-marquee:focus-within .ds-marquee-track,
+.ds-247420 .ds-marquee:active .ds-marquee-track { animation-play-state: paused; }
 @keyframes ds-marquee-run {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
 }
+/* Touch has no hover-pause; slow the ticker so it burns less attention. */
+@media (hover: none), (pointer: coarse) {
+  .ds-247420 .ds-marquee-track { animation-duration: 40s; }
+}
 @media (prefers-reduced-motion: reduce) {
-  .ds-247420 .ds-marquee-track { animation: none; }
+  /* Static: wrap to a readable strip instead of a frozen half-offscreen run. */
+  .ds-247420 .ds-marquee-track { animation: none; flex-wrap: wrap; white-space: normal; }
+  .ds-247420 .ds-marquee-run-b { display: none; }
 }
 
 /* ============================================================
@@ -1275,6 +1324,7 @@
    ============================================================ */
 .ds-247420 .cli {
   display: flex; align-items: center; gap: 14px;
+  overflow-x: auto;
   padding: 20px 24px;
   background: var(--ink); color: var(--paper);
   border-radius: var(--r-3);
@@ -1290,22 +1340,23 @@
 }
 .ds-247420 .cli .copy:hover { background: var(--fg-3); }
 
-/* Multi-line CLI block: when .cli holds .cli-line / .cli-cmt children
-   (quickstart scripts, multi-command snippets) it stacks as a column
-   instead of the single-line install row. */
-.ds-247420 .cli:has(.cli-line),
-.ds-247420 .cli:has(.cli-cmt) {
+/* Multi-line CLI block: when .cli holds .ds-cli-row / .ds-cli-comment children
+   (quickstart scripts, multi-command snippets — see CliBlock in
+   src/components/content.js) it stacks as a column instead of the
+   single-line install row. */
+.ds-247420 .cli:has(.ds-cli-row),
+.ds-247420 .cli:has(.ds-cli-comment) {
   flex-direction: column; align-items: stretch; gap: 0;
   font-size: var(--fs-sm); line-height: 1.6;
 }
-.ds-247420 .cli-line {
+.ds-247420 .ds-cli-row {
   display: flex; gap: 10px;
   font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
   padding: 3px 0;
 }
-.ds-247420 .cli-line .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
-.ds-247420 .cli-line .cmd { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: var(--paper); }
-.ds-247420 .cli-cmt {
+.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); }
+.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;
@@ -1328,6 +1379,15 @@
 }
 .ds-247420 table.kv td:last-child {
   font-weight: 600;
+  overflow-wrap: anywhere; min-width: 0;
+}
+/* Tiny screens: stack the key over the value instead of squeezing a 14ch
+   label column beside long unbroken values (URLs, hashes). */
+@media (max-width: 400px) {
+  .ds-247420 table.kv td { display: block; width: auto; padding: 4px 0; }
+  .ds-247420 table.kv td:first-child { padding-top: 8px; }
+  .ds-247420 table.kv tr + tr td { border-top: 0; }
+  .ds-247420 table.kv tr + tr td:first-child { border-top: 1px solid var(--rule); }
 }
 
 /* ============================================================
@@ -1341,7 +1401,7 @@
 .ds-247420 table th {
   text-align: left;
   padding: 12px 16px;
-  font-size: var(--fs-xs); font-weight: 600;
+  font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
   background: var(--bg-2);
 }
@@ -1349,7 +1409,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); }
@@ -1418,6 +1478,41 @@
   font-weight: 600; margin-top: 8px;
   letter-spacing: var(--tr-caps); text-transform: uppercase;
 }
+.ds-247420 .kpi-foot {
+  display: flex; align-items: center; justify-content: space-between;
+  margin-top: var(--space-2);
+}
+.ds-247420 .kpi-delta {
+  display: inline-flex; align-items: center; gap: var(--space-hair);
+  font-size: var(--fs-xs); font-weight: 600;
+}
+.ds-247420 .kpi-delta-up { color: var(--success); }
+.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-down { color: var(--danger); }
+
+/* ============================================================
+   BarChart
+   ============================================================ */
+.ds-247420 .ds-barchart { display: flex; flex-direction: column; gap: var(--space-2); }
+.ds-247420 .ds-barchart-row {
+  display: grid; grid-template-columns: minmax(90px, 25%) 1fr auto;
+  align-items: center; gap: var(--space-2);
+}
+.ds-247420 .ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
+.ds-247420 .ds-barchart-track {
+  height: var(--space-2); border-radius: var(--r-pill);
+  background: var(--bg-3); overflow: hidden;
+}
+.ds-247420 .ds-barchart-fill {
+  height: 100%; width: var(--bar-pct, 0%);
+  background: var(--accent); border-radius: var(--r-pill);
+}
+.ds-247420 .ds-barchart-value {
+  font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
+  font-variant-numeric: tabular-nums;
+}
 
 /* ============================================================
    Empty state
@@ -1523,6 +1618,10 @@
   }
   .ds-247420 .row .sub { grid-column: 1 / -1; order: 3; }
   .ds-247420 .row .title { font-size: var(--fs-sm); }
+  /* Changelog carries 3 children: give date+ver line one, message wraps below
+     (the generic 2-col .row override staggers it into an implicit row). */
+  .ds-247420 .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 {
@@ -1566,7 +1665,9 @@
     gap: var(--space-2);
   }
   .ds-247420 .kpi-card { padding: var(--space-3); }
-  .ds-247420 .kpi-card .num { font-size: clamp(22px, 5vw, 32px); }
+  /* Container-relative like the base rule (5vw sized against the viewport and
+     jumped across the breakpoint). */
+  .ds-247420 .kpi-card .num { font-size: clamp(22px, 8cqi, 32px); }
 
   /* Empty State */
   .ds-247420 .empty { padding: var(--space-5); font-size: var(--fs-xs); }
@@ -1600,10 +1701,11 @@
 @container (max-width: 760px) {
   .ds-247420 .app-body { grid-template-columns: 1fr !important; }
   .ds-247420 .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
-  .ds-247420 .app-topbar { grid-template-columns: 1fr auto; }
   .ds-247420 .app-topbar nav { font-size: var(--fs-xs); gap: 14px; }
   .ds-247420 .row { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important; }
   .ds-247420 .row .sub { grid-column: 1 / -1; order: 3; }
+  .ds-247420 .ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
+  .ds-247420 .ds-changelog-row .title { grid-column: 1 / -1; }
 }
 
 /* --------------------------------------------------------------------
@@ -1618,9 +1720,8 @@
     min-height: 44px;
   }
 
-  /* Topbar Navigation */
+  /* Topbar Navigation (flex container — no grid-template here) */
   .ds-247420 .app-topbar {
-    grid-template-columns: auto 1fr auto;
     gap: var(--space-3); padding: 12px var(--space-4);
   }
   .ds-247420 .app-topbar nav {
@@ -1699,6 +1800,8 @@
     gap: var(--space-2);
   }
   .ds-247420 .row .code { display: none; }
+  /* Changelog's date lives in span.code — hiding it is data loss, not reflow. */
+  .ds-247420 .ds-changelog-row .code { display: inline; font-size: var(--fs-micro); }
   .ds-247420 .row .sub { grid-column: 1 / -1; }
 }
 
@@ -1739,7 +1842,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; }
@@ -1761,7 +1864,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; }
@@ -1809,7 +1912,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);
@@ -1882,7 +1985,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,
@@ -1894,7 +1997,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 {
@@ -1907,7 +2010,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 {
@@ -1917,7 +2020,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; }
@@ -1955,7 +2058,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; }
@@ -1981,15 +2084,19 @@
 .ds-247420 .ds-file-cell.is-locked { opacity: 0.6; }
 .ds-247420 .ds-file-row.is-locked { opacity: 0.6; }
 .ds-247420 .ds-file-row.is-restricted .title { color: var(--fg-2); }
+/* A fourth, deliberately bordered/mono tag variant for file-permission tags
+   specifically (distinct from .ds-badge for numeric counts and .chip for
+   status/label words) - is-noaccess reuses the shared --flame tone token
+   so 'no access' reads the same red as chip.tone-error/miss elsewhere. */
 .ds-247420 .ds-file-perm-tag { font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-3); padding: 1px 6px; border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1); white-space: nowrap; }
-.ds-247420 .ds-file-perm-tag.is-noaccess { color: var(--flame); border-color: color-mix(in srgb, var(--flame) 40%, transparent); }
+.ds-247420 .ds-file-perm-tag.is-noaccess { color: var(--flame); border-color: var(--flame); }
 .ds-247420 .ds-file-cell-open {
   display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1);
   width: 100%; padding: var(--space-1); margin: 0;
   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;
@@ -2036,8 +2143,17 @@
 
 /* Full-width files stack: the stage's space-3 vertical beat without its
    920px cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
-   bands keep one consistent rhythm instead of touching edge-to-edge. */
-.ds-247420 .ds-files-stack { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
+   bands keep one consistent rhythm instead of touching edge-to-edge. Carries
+   the same side/bottom padding as .ds-file-stage (top collapses the same way
+   when mounted directly under .app-main, which already supplies top padding)
+   so switching a consumer from the capped stage to this full-width stack is a
+   pure width change, not a spacing regression. */
+.ds-247420 .ds-files-stack {
+  display: flex; flex-direction: column; gap: var(--space-3); min-height: 0;
+  padding: 0 var(--space-3) var(--space-4);
+}
+.ds-247420 .app-main > div > .ds-files-stack,
+.ds-247420 .app-main .ds-files-stack { padding-top: 0; }
 
 /* Breadcrumb path */
 .ds-247420 .ds-crumb-path {
@@ -2049,6 +2165,10 @@
   padding: 4px 8px; border-radius: var(--r-1);
   color: var(--fg-3); font-family: inherit; font-size: var(--fs-sm);
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+  /* A single long unbroken segment (hash-named dir) must never force the
+     whole path past the viewport. */
+  max-width: min(40vw, 220px);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .ds-247420 .ds-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
 .ds-247420 .ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
@@ -2074,6 +2194,15 @@
   font-size: var(--fs-sm); color: var(--fg-3);
 }
 .ds-247420 .ds-page-header-dense .ds-page-header-right { flex: 0 0 auto; margin-left: auto; }
+/* Below ~480px the single-line ellipsis truncates the majority of the lede
+   text with no way to recover it (no title attr, no expand) - let the row
+   wrap and the lede break onto its own line instead of clipping. */
+@media (max-width: 480px) {
+  .ds-247420 .ds-page-header-dense-row { flex-wrap: wrap; }
+  .ds-247420 .ds-page-header-dense-lede {
+    flex-basis: 100%; overflow: visible; text-overflow: clip; white-space: normal;
+  }
+}
 .ds-247420 .ds-file-toolbar-left,
 .ds-247420 .ds-file-toolbar-right {
   display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
@@ -2145,6 +2274,14 @@
   border-radius: var(--r-3);
 }
 .ds-247420 .ds-dropzone--wrap.dragover { animation: none; }
+/* Touch devices can never fire dragover — keep the pick-files affordance
+   visible as a compact static row so upload stays reachable in wrap mode. */
+@media (hover: none) and (pointer: coarse) {
+  .ds-247420 .ds-dropzone--wrap > .ds-dropzone-inner {
+    display: flex; position: static; padding: var(--space-2);
+    outline: none; background: transparent;
+  }
+}
 
 /* Upload progress */
 .ds-247420 .ds-upload-progress { display: flex; flex-direction: column; gap: 6px; }
@@ -2173,7 +2310,12 @@
 .ds-247420 .ds-upload-item.error .ds-upload-fill { background: var(--warn); }
 .ds-247420 .ds-upload-item.error .ds-upload-pct { color: var(--warn); }
 /* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
-.ds-247420 .ds-upload-item { grid-template-columns: minmax(0, 1fr) 120px 44px auto; }
+.ds-247420 .ds-upload-item { grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 44px auto; }
+@media (max-width: 480px) {
+  .ds-247420 .ds-upload-item { grid-template-columns: minmax(0, 1fr) 44px; }
+  .ds-247420 .ds-upload-bar { grid-column: 1 / -1; order: 3; }
+  .ds-247420 .ds-upload-actions { grid-column: 1 / -1; justify-content: flex-end; }
+}
 .ds-247420 .ds-upload-actions { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
 .ds-247420 .ds-upload-act {
   padding: 2px 10px; min-height: 24px; cursor: pointer;
@@ -2181,9 +2323,14 @@
   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
+     (the width-based mobile block misses wide touch tablets). */
+  .ds-247420 .ds-file-act, .ds-247420 .ds-file-sort-btn, .ds-247420 .ds-crumb-seg, .ds-247420 .ds-file-filter-input { min-height: 44px; }
+  .ds-247420 .ds-file-act { min-width: 44px; }
+  .ds-247420 .ds-file-check, .ds-247420 .ds-file-selectall, .ds-247420 .ds-density-btn { min-height: 44px; min-width: 44px; }
 }
 
 /* Empty state */
@@ -2199,7 +2346,11 @@
 .ds-247420 .ds-modal-backdrop {
   position: fixed; inset: 0; z-index: var(--z-modal, 800);
   display: flex; align-items: center; justify-content: center;
-  padding: var(--space-3);
+  /* Notch/home-indicator safe: near-fullscreen modals must not slide under. */
+  padding: max(var(--space-3), env(safe-area-inset-top))
+           max(var(--space-3), env(safe-area-inset-right))
+           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(3px);
 }
@@ -2209,7 +2360,9 @@
 @keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
 .ds-247420 .ds-modal {
   display: flex; flex-direction: column;
-  width: 100%; max-width: 460px; max-height: calc(100vh - 2 * var(--space-4));
+  width: 100%; max-width: 460px;
+  max-height: calc(100vh - 2 * var(--space-4));
+  max-height: calc(100dvh - 2 * var(--space-4));
   background: var(--bg); color: var(--fg);
   border: var(--bw-hair) solid var(--rule);
   border-radius: var(--r-3); box-shadow: var(--shadow-3);
@@ -2241,7 +2394,11 @@
   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; }
+}
 /* In-body modal error (role=alert): mutation failures (409/403) surface INSIDE
    the dialog, not behind the fixed overlay. */
 .ds-247420 .ds-modal-error {
@@ -2265,10 +2422,12 @@
 .ds-247420 .ds-preview-name {
   font-weight: 600; font-size: var(--fs-body);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
+  flex: 1 1 auto;
 }
 .ds-247420 .ds-preview-meta {
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   color: var(--fg-3); white-space: nowrap;
+  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
 }
 .ds-247420 .ds-preview-actions { display: inline-flex; gap: 2px; margin-left: auto; }
 .ds-247420 .ds-preview-body {
@@ -2277,7 +2436,9 @@
   display: flex; flex-direction: column;
 }
 .ds-247420 .ds-preview-media {
-  max-width: 100%; max-height: 70vh; margin: 0 auto;
+  max-width: 100%;
+  max-height: 70vh; max-height: 70dvh;
+  margin: 0 auto;
   border-radius: var(--r-2); object-fit: contain;
 }
 .ds-247420 .ds-preview-audio { width: 100%; }
@@ -2323,10 +2484,22 @@
 
 /* Mobile — modals go near-fullscreen, preview media shrinks. */
 @media (max-width: 560px) {
-  .ds-247420 .ds-modal { max-width: 100%; max-height: calc(100vh - 2 * var(--space-3)); }
-  .ds-247420 .ds-modal-preview { width: 100%; height: calc(100vh - 2 * var(--space-3)); max-height: none; }
-  .ds-247420 .ds-preview-media { max-height: 50vh; }
+  .ds-247420 .ds-modal {
+    max-width: 100%;
+    max-height: calc(100vh - 2 * var(--space-3));
+    max-height: calc(100dvh - 2 * var(--space-3));
+  }
+  .ds-247420 .ds-modal-preview {
+    width: 100%; max-height: none;
+    height: calc(100vh - 2 * var(--space-3));
+    height: calc(100dvh - 2 * var(--space-3));
+  }
+  .ds-247420 .ds-preview-media { max-height: 50vh; max-height: 50dvh; }
   .ds-247420 .ds-file-stage { padding: var(--space-3) var(--space-2); }
+  /* Preview head: let it wrap and drop the nowrap meta (duplicated in body)
+     so the close button can never be pushed past the modal edge. */
+  .ds-247420 .ds-preview-head { flex-wrap: wrap; row-gap: 4px; }
+  .ds-247420 .ds-preview-meta { display: none; }
 }
 
 /* -- File browser UX affordances ---------------------------- */
@@ -2385,7 +2558,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);
@@ -2407,7 +2580,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);
@@ -2461,7 +2634,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;
@@ -2475,7 +2648,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;
@@ -2521,7 +2694,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 {
@@ -2632,7 +2805,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);
@@ -2651,7 +2824,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);
 }
@@ -2660,7 +2833,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 {
@@ -2678,7 +2851,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); }
@@ -2701,7 +2874,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;
 }
@@ -2712,7 +2885,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; }
@@ -2736,7 +2909,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;
@@ -2857,7 +3030,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 {
@@ -2943,10 +3116,21 @@
     .ds-247420 .chat-composer textarea { padding: 10px 12px; }
 }
 
-/* --- landscape orientation: reduce vertical space for composer --- */
+/* --- landscape orientation: reduce vertical space for chrome + composer --- */
 @media (max-height: 500px) and (orientation: landscape) {
-    .ds-247420 .chat-composer { padding: 6px 0; }
-    .ds-247420 .chat-composer textarea { min-height: 44px; max-height: 120px; }
+    /* Keep horizontal padding: 0 put the textarea/focus ring flush on the edge. */
+    .ds-247420 .chat-composer { padding: 6px var(--space-2); }
+    .ds-247420 .chat-composer textarea { min-height: 36px; max-height: 96px; }
+    .ds-247420 .chat-composer .chat-composer-hint,
+    .ds-247420 .chat-composer .chat-composer-context { display: none; }
+    /* Compact the shell chrome: ~114px of topbar+crumb+status is a third of a
+       360px-tall landscape fold. */
+    .ds-247420 { --app-topbar-h: 40px; --app-crumb-h: 24px; }
+    .ds-247420 .app-chrome { padding: 4px var(--pad-x); }
+    .ds-247420 .app-status { display: none; }
+    .ds-247420 .ws-crumb { min-height: 32px; }
+    .ds-247420 .ds-hero { padding: var(--space-4) 0 var(--space-3); }
+    .ds-247420 .ds-hero-title { font-size: clamp(28px, 6cqi, 56px); }
 }
 
 /* ============================================================
@@ -2958,8 +3142,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;
@@ -3289,7 +3477,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;
 }
 
@@ -3299,7 +3487,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;
 }
 
@@ -3370,6 +3558,15 @@
   }
 }
 
+/* Touch floor also for coarse-pointer devices that report hover (hybrid
+   laptops/tablets with mice) — the block above requires hover:none too. */
+@media (pointer: coarse) {
+  .ds-247420 .ds-icon-btn, .ds-247420 .ds-icon-btn-xs, .ds-247420 .ds-icon-btn-sm, .ds-247420 .ds-icon-btn-base {
+    min-width: 44px; min-height: 44px;
+  }
+  .ds-247420 .btn, .ds-247420 .btn-primary, .ds-247420 .btn-ghost, .ds-247420 .app-topbar nav a, .ds-247420 .app-side a { min-height: 44px; }
+}
+
 /* ------------------------------------------------------------
    Theme Transition Smoothness
    -------------------------------------------------------------- */
@@ -3601,16 +3798,24 @@
   .ds-247420 .app-body.no-side { grid-template-columns: 1fr !important; }
   .ds-247420 .app-side-shell {
     position: absolute;
-    left: 0; top: var(--app-topbar-h);
-    height: calc(100% - var(--app-topbar-h) - var(--app-status-h));
+    /* Full-height overlay drawer: the merged .app-chrome wraps and its real
+       height drifts from --app-topbar-h, so anchoring below it misplaces the
+       drawer. Overlay the chrome instead (z above --z-header), like ws drawers. */
+    left: 0; top: 0;
+    height: 100%;
     width: 280px; max-width: 80%;
     transform: translateX(-100%);
     transition: transform var(--dur-base, 240ms) var(--ease, ease);
-    z-index: 50;
+    /* Above the sticky chrome (z-header): scrim > chrome > content budget. */
+    z-index: calc(var(--z-header, 100) + 2);
     background: var(--bg);
     border-right: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
     overflow-y: auto;
+    overscroll-behavior: contain;
   }
+  /* Lock the content scroller while the drawer is open so touch pans don't
+     scroll the page behind the scrim. */
+  .ds-247420 .app-body.side-open .app-main { overflow: hidden; }
   .ds-247420 .app-side-shell.open,
   .ds-247420 .app-side.open,
   .ds-247420 .app-body.side-open .app-side-shell { transform: translateX(0); }
@@ -3643,7 +3848,8 @@
   display: none;
   position: absolute; inset: 0;
   background: color-mix(in oklab, var(--bg) 60%, transparent);
-  z-index: 49;
+  /* Above the sticky chrome so nav behind an open drawer is not clickable. */
+  z-index: calc(var(--z-header, 100) + 1);
 }
 @container (max-width: 900px) {
   .ds-247420 .app-body.side-open .app-side-scrim { display: block; }
@@ -3655,7 +3861,9 @@
 .ds-247420 .app-side-toggle {
   display: none;
   position: absolute; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
-  z-index: 51;
+  /* Above the sticky topbar/chrome (z-header) and the drawer/scrim so the
+     translucent blurred chrome never paints over or intercepts the toggle. */
+  z-index: calc(var(--z-header, 100) + 3);
   /* 44x44 minimum hit area (WCAG 2.5.5 / Apple HIG) - 36px is below the
      reliable-tap threshold on touch. */
   width: 44px; height: 44px;
@@ -3666,7 +3874,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; }
@@ -3707,6 +3915,8 @@
   .ds-247420 .app-topbar nav,
   .ds-247420 .app-topbar > :last-child { display: none; }
   .ds-247420 .brand { font-size: var(--fs-tiny); }
+  /* Slightly narrower drawer on tiny phones; max-width:80% remains the guard. */
+  .ds-247420 .app-side-shell { width: 260px; }
 }
 
 /* ----------------------------------------------------------------------------
@@ -3754,7 +3964,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; }
@@ -3780,6 +3990,11 @@
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 .ws-shell { transition: grid-template-columns var(--dur-base) var(--ease); }
 }
+/* Ultrawide: cap the shell so the 1fr content track doesn't stretch to
+   unreadable measures while the fixed side columns pin to their clamps. */
+@media (min-width: 1920px) {
+  .ds-247420 .ws-shell { max-width: 1920px; margin-inline: auto; }
+}
 
 /* Rail (left nav) */
 .ds-247420 .ws-rail {
@@ -3801,7 +4016,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; }
@@ -3814,8 +4029,8 @@
   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-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
+.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);
   width: 100%; padding: var(--space-2); min-height: 44px;
@@ -3824,7 +4039,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); }
@@ -3878,6 +4093,7 @@
   min-height: 0; display: flex; flex-direction: column;
   background: var(--bg-2); border-left: var(--bw-hair) solid var(--bg-3);
   overflow: hidden; transition: width var(--dur-base) var(--ease);
+  overscroll-behavior: contain;
 }
 .ds-247420 .ws-pane-collapsed .ws-pane { width: 0; border-left: none; }
 .ds-247420 .ws-pane-collapsed .ws-pane > * { display: none; }
@@ -3896,7 +4112,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
@@ -3962,12 +4178,19 @@
   }
   .ds-247420 .ws-sessions {
     position: fixed; inset: 0 auto 0 0;
-    width: min(var(--ws-sessions-w), 80vw);
+    /* Immune to the desktop collapse var (--ws-sessions-w:0px persisted from
+       a desktop session would open an invisible 0-width drawer). */
+    width: min(max(var(--ws-sessions-w), 280px), 80vw);
     z-index: 42; transform: translateX(-110%);
     transition: transform var(--dur-base) var(--ease);
     border-right: var(--bw-hair) solid var(--bg-3);
+    overscroll-behavior: contain;
   }
   .ds-247420 .ws-shell.ws-sessions-open .ws-sessions { transform: translateX(0); }
+  /* Drawer mode ignores the desktop collapsed state: children stay rendered
+     and the border returns, so a persisted collapse can't blank the drawer. */
+  .ds-247420 .ws-shell.ws-sessions-collapsed .ws-sessions > * { display: revert; }
+  .ds-247420 .ws-shell.ws-sessions-collapsed .ws-sessions { border-right: var(--bw-hair) solid var(--bg-3); }
   .ds-247420 .ws-sessions-drawer-toggle { display: inline-flex; }
 }
 
@@ -4013,7 +4236,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; }
@@ -4025,7 +4248,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. */
@@ -4038,20 +4261,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) {
@@ -4061,7 +4284,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.
@@ -4077,6 +4300,509 @@
   .ds-247420 .ws-crumb,
   .ds-247420 .app-status { display: none; }
   .ds-247420 .ws-main { overflow: visible; height: auto; }
+  /* AppShell: unpin the viewport-height frame so content flows across pages,
+     and drop all chrome (it prints as page furniture otherwise). */
+  .ds-247420 .app { height: auto; min-height: 0; overflow: visible; display: block; }
+  .ds-247420 .app-body { display: block; }
+  .ds-247420 .app-main { overflow: visible; height: auto; display: block; max-width: 100%; }
+  .ds-247420 .app-topbar, .ds-247420 .app-chrome, .ds-247420 .app-crumb, .ds-247420 .app-side-shell, .ds-247420 .app-side-scrim, .ds-247420 .app-side-toggle, .ds-247420 .btn-fab, .ds-247420 .skip-link, .ds-247420 .ds-marquee { display: none; }
+  /* Modals/preview: print the content, not a blurred overlay clipped to one page. */
+  .ds-247420 .ds-modal-backdrop { position: static; background: none; backdrop-filter: none; padding: 0; }
+  .ds-247420 .ds-modal, .ds-247420 .ds-modal-preview { max-width: 100%; max-height: none; box-shadow: none; }
+  .ds-247420 .ds-modal-body, .ds-247420 .ds-preview-body, .ds-247420 .ds-preview-code, .ds-247420 .ds-preview-text { overflow: visible; }
+  .ds-247420 .ds-modal-actions, .ds-247420 .ds-preview-actions { display: none; }
+  /* Data-density: fixed-height log clips; bg-only tiles lose their boundary. */
+  .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; }
+}
+
+/* ============================================================
+   Data density — dense observability/dashboard primitives (ported from the
+   gmsniff GUI). Components: PhaseWalk, TreeNode, BarRow, StatTile/StatsGrid,
+   SubGrid, SessionRow, DevRow, LiveLog/LiveLogEntry. src/components/data-density.js.
+   All colors derive from colors_and_type.css tokens — see lint-tokens.mjs.
+   ============================================================ */
+
+/* --danger-surface: semantic surface for a deviation/error callout background
+   (gmsniff's #3a1a1a dark-red-tinted panel). Derived from --warn so it always
+   reads as "danger" against the active theme instead of a baked literal. */
+.ds-247420 {
+  --danger-surface: color-mix(in oklab, var(--warn) 14%, var(--bg));
+}
+
+/* PhaseWalk */
+.ds-247420 .ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
+.ds-247420 .ds-phasewalk-seg {
+  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); }
+.ds-247420 .ds-phasewalk-seg.is-gap { background: var(--warn); }
+/* Standalone PhaseWalk reserves headroom for the labels instead of letting
+   them escape upward and overlap the element above. */
+.ds-247420 .ds-phasewalk { padding-top: 15px; }
+.ds-247420 .ds-phasewalk-lbl {
+  position: absolute; top: -15px; left: 0;
+  font-size: var(--fs-micro); color: var(--fg-3); white-space: nowrap;
+}
+/* Inline in a single-line SessionRow the labels would overlap the row above —
+   segments already carry title tooltips. */
+.ds-247420 .ds-session-row .ds-phasewalk { padding-top: 0; }
+.ds-247420 .ds-session-row .ds-phasewalk-lbl { display: none; }
+
+/* TreeNode */
+.ds-247420 .ds-tree-node {
+  padding: 5px 10px; border-left: var(--bw-rule) solid var(--bg-3);
+  margin: 2px 0 2px 16px; font-size: var(--fs-tiny);
+  min-width: 0; overflow-wrap: anywhere;
+}
+@media (max-width: 400px) {
+  .ds-247420 .ds-tree-node { margin-left: 8px; padding-left: 8px; }
+}
+.ds-247420 .ds-tree-node.is-phase { border-color: var(--accent); background: var(--bg-3); font-weight: 600; }
+.ds-247420 .ds-tree-node.is-deviation { border-color: var(--warn); background: var(--danger-surface); color: var(--warn); }
+.ds-247420 .ds-tree-node.is-mutable-resolve { border-color: var(--success); }
+.ds-247420 .ds-tree-node.is-prd-add { border-color: var(--sun); }
+.ds-247420 .ds-tree-node-ts { margin-right: 8px; color: var(--fg-3); }
+.ds-247420 .ds-tree-node-pills { margin-left: 6px; }
+.ds-247420 .ds-tree-node-reason { margin-top: 2px; color: var(--fg-2); }
+.ds-247420 .ds-tree-node-deviation { margin-top: 2px; }
+.ds-247420 .ds-tree-node-residuals { margin-top: 2px; color: var(--fg-3); }
+
+/* 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: 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; }
+}
+
+/* StatTile / StatsGrid */
+/* min(140px, 100%) keeps the grid from collapsing to 1 column early inside
+   padded panels; the wrapper div stretches its tile to equal row height. */
+.ds-247420 .ds-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--space-2); }
+.ds-247420 .ds-stats-grid > div { display: grid; }
+@media (max-width: 360px) {
+  .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: 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); }
+.ds-247420 .ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
+
+/* SubGrid */
+.ds-247420 .ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
+.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: 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); }
+.ds-247420 .ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
+
+/* SessionRow */
+.ds-247420 .ds-session-row {
+  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
+  flex-wrap: wrap; min-width: 0;
+  border-bottom: var(--bw-hair) solid var(--bg-3); cursor: pointer;
+}
+.ds-247420 .ds-session-row:hover { background: var(--bg-3); }
+.ds-247420 .ds-session-row-id {
+  font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--accent-ink);
+  flex: 0 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ds-247420 .ds-session-row-counts {
+  font-size: var(--fs-micro); color: var(--fg-3);
+  flex: 1 1 200px; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+@media (max-width: 640px) {
+  .ds-247420 .ds-session-row-span { flex-basis: 100%; }
+}
+.ds-247420 .ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
+.ds-247420 .ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
+
+/* 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: var(--r-hair); font-size: var(--fs-tiny);
+}
+.ds-247420 .ds-dev-row strong { color: var(--warn); }
+
+/* LiveLog — natural height with a viewport-tracking cap (dvh follows mobile
+   URL-bar chrome; min-height keeps short-landscape from going near-zero). */
+.ds-247420 .ds-live-log {
+  height: auto;
+  max-height: calc(100vh - 200px);
+  max-height: calc(100dvh - 200px);
+  min-height: 160px;
+  overflow-y: auto; overflow-x: hidden;
+  font-family: var(--ff-mono); font-size: var(--fs-micro); line-height: 1.5;
+}
+/* Embedded in a WM window the viewport calc is meaningless — fill the container. */
+.ds-247420 .fd-root .ds-live-log { height: 100%; max-height: none; min-height: 0; flex: 1 1 auto; }
+.ds-247420 .ds-live-log-empty { height: auto; min-height: 0; padding: var(--space-3); color: var(--fg-3); }
+.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: 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). */
+@media (pointer: coarse) {
+  .ds-247420 .ds-sub-btn { min-height: 44px; }
+  .ds-247420 .ds-session-row { min-height: 44px; }
+  .ds-247420 .ds-live-log-entry { padding-block: 6px; }
+}
+
+
+/* == appended: popovers-files == */
+/* FilePreviewMedia controls row — spacing + coarse-pointer tap floor */
+.ds-247420 .ds-preview-media-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+@media (hover: none), (pointer: coarse) {
+  .ds-247420 .ds-preview-media-controls .chat-code-copy,
+  .ds-247420 .chat-code-copy-head {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+
+/* == appended: ui-kits == */
+/* ============================================================
+   ui_kit responsive helpers (kits-grids sweep) */
+.ds-247420 .ds-section-pad { padding: clamp(6px, 1.2vw, 16px); }
+.ds-247420 .ds-panel-gap { margin: var(--space-2) 0; }
+.ds-247420 .ds-panel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
+@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%; }
+
+/* --- slide deck ------------------------------------------- */
+.ds-247420 .ds-deck-stage {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  max-width: min(1100px, 100%);
+  margin: var(--space-3) auto;
+  background: var(--bg-2);
+  border-radius: var(--r-2);
+  padding: clamp(16px, 5vw, 64px);
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size; /* cqw units track the stage, not the viewport */
+}
+@media (max-height: 500px) and (orientation: landscape) {
+  .ds-247420 .ds-deck-stage {
+    max-height: calc(100vh - 140px);
+    max-height: calc(100dvh - 140px);
+    aspect-ratio: auto;
+  }
+}
+.ds-247420 .ds-deck-slide { flex: 1; display: flex; min-width: 0; }
+.ds-247420 .ds-deck-controls {
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  padding: 8px; font-family: var(--ff-mono); font-size: var(--fs-sm);
+}
+.ds-247420 .ds-deck-count { color: var(--fg-3); }
+@media (pointer: coarse) {
+  .ds-247420 .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
+}
+.ds-247420 .ds-slide-eyebrow {
+  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--fg-3); margin-bottom: clamp(12px, 2.5cqw, 24px);
+}
+.ds-247420 .ds-slide-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.5cqw, 24px); min-width: 0; }
+.ds-247420 .ds-slide-col--start { align-items: flex-start; }
+.ds-247420 .ds-slide-col--narrow { max-width: 38ch; }
+.ds-247420 .ds-slide-col--quote { max-width: 42ch; }
+.ds-247420 .ds-slide-hero {
+  font-size: clamp(var(--fs-h2), 6cqw, var(--fs-hero));
+  line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 600;
+  color: var(--slide-accent, var(--accent-ink));
+  overflow-wrap: anywhere;
+}
+.ds-247420 .ds-slide-h1 {
+  font-size: clamp(var(--fs-h3), 4.5cqw, var(--fs-h1));
+  line-height: var(--lh-snug); color: var(--fg); font-weight: 500; min-width: 0;
+}
+.ds-247420 .ds-slide-h1--lead { margin-bottom: 12px; }
+.ds-247420 .ds-slide-quote-body {
+  font-size: clamp(var(--fs-lg), 3.5cqw, var(--fs-h2));
+  line-height: var(--lh-snug); color: var(--fg); font-weight: 400; font-style: italic;
+}
+.ds-247420 .ds-slide-cite { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-247420 .ds-slide-bullet {
+  display: flex; gap: clamp(8px, 2vw, 18px); align-items: baseline;
+  border-bottom: 1px solid var(--rule); padding: 12px 0; flex-wrap: wrap;
+}
+.ds-247420 .ds-slide-bullet-key {
+  flex: 0 1 clamp(56px, 18%, 100px); min-width: 0;
+  font-family: var(--ff-mono); font-size: var(--fs-sm);
+  color: var(--slide-accent, var(--accent-ink));
+}
+.ds-247420 .ds-slide-bullet-val { color: var(--fg-2); font-size: var(--fs-lg); min-width: 0; }
+.ds-247420 .ds-slide-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 32px); margin-top: 12px; }
+@media (max-width: 760px) {
+  .ds-247420 .ds-slide-split { grid-template-columns: 1fr; }
+}
+.ds-247420 .ds-slide-split-cell {
+  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)); }
+
+/* --- error 404 --------------------------------------------- */
+.ds-247420 .ds-err-hero {
+  padding: clamp(16px, 5vw, 36px) clamp(12px, 4vw, 22px);
+  text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
+}
+.ds-247420 .ds-err-numeral {
+  font-family: var(--ff-mono); font-size: clamp(56px, 20vw, 120px);
+  line-height: 1; color: var(--panel-text-3); letter-spacing: -0.03em;
+}
+.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: var(--r-0);
+  overflow-wrap: anywhere; word-break: break-all;
+}
+
+/* --- gallery ------------------------------------------------ */
+.ds-247420 .ds-tile-grid {
+  padding: clamp(8px, 2.5vw, 16px);
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px;
+}
+.ds-247420 .ds-tile-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
+.ds-247420 .ds-swatch-grid {
+  padding: clamp(8px, 2.5vw, 16px);
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px;
+}
+.ds-247420 .ds-gallery-tile {
+  cursor: pointer; display: flex; flex-direction: column; gap: 6px;
+  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 {
+  position: fixed; inset: 0; background: var(--scrim);
+  display: flex; align-items: center; justify-content: center;
+  padding: clamp(12px, 4vw, 32px);
+  padding-bottom: max(clamp(12px, 4vw, 32px), env(safe-area-inset-bottom));
+  z-index: 50;
+}
+.ds-247420 .ds-lightbox-card {
+  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);
+  overflow: auto;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.ds-247420 .ds-lightbox-preview {
+  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));
+}
+
+/* --- search ------------------------------------------------- */
+.ds-247420 .ds-topbar-search { width: min(280px, 100%); min-width: 0; flex: 1 1 clamp(140px, 30vw, 280px); }
+@media (max-width: 480px) {
+  .ds-247420 .ds-topbar-search { flex-basis: 100%; }
+}
+.ds-247420 .ds-empty-state { padding: clamp(16px, 5vw, 24px); text-align: center; color: var(--panel-text-3); }
+.ds-247420 .ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
+.ds-247420 .ds-empty-state-msg { margin: 6px 0; }
+.ds-247420 .ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
+
+/* --- system primer ------------------------------------------ */
+.ds-247420 .ds-swatch-grid-sm {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr));
+  gap: 12px; padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px);
+}
+.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: 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; }
+.ds-247420 .ds-type-row {
+  display: flex; align-items: baseline; gap: 14px;
+  border-bottom: 1px solid var(--rule); padding-bottom: 8px; flex-wrap: wrap;
+}
+.ds-247420 .ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+.ds-247420 .ds-type-sample {
+  min-width: 0; overflow-wrap: anywhere; line-height: var(--lh-tight); color: var(--fg);
+  font-size: var(--sample-size, var(--fs-body));
+}
+.ds-247420 .ds-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
+.ds-247420 .ds-prim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.ds-247420 .ds-prim-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
+
+/* == appended: content-site == */
+/* Home landing wrappers (site/theme.mjs) — replace banned inline styles. */
+.ds-247420 .ds-home-hero-wrap { padding: 0 var(--space-2, 8px); }
+.ds-247420 .ds-home-panel { margin: var(--space-2, 8px); }
+@media (max-width: 480px) {
+  .ds-247420 .ds-home-panel { margin: var(--space-1, 4px) 0; }
+}
+.ds-247420 .ds-quickstart {
+  padding: var(--space-3, 16px) var(--space-4, 22px);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+/* Table() scroll containment — wide tables scroll inside their own box,
+   never the page body. */
+.ds-247420 .ds-table-wrap {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
+.ds-247420 .ds-table-wrap > table { min-width: 100%; }
+
+
+/* == appended: settings kit cleanup == */
+/* == appended: settings kit == */
+.ds-247420 .ds-settings-main { padding: 8px; }
+.ds-247420 .ds-settings-body { padding: 14px 18px; }
+.ds-247420 .ds-settings-body-stack { display: flex; flex-direction: column; gap: 10px; }
+.ds-247420 .ds-field-block { margin: 10px 0; }
+.ds-247420 .ds-field-eyebrow {
+  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--panel-text-3);
+}
+.ds-247420 .ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
+.ds-247420 .ds-note-quiet { margin: 0; color: var(--panel-text-2); }
+.ds-247420 .ds-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
+.ds-247420 .ds-btn-row-tight { gap: 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; }
+.ds-247420 .ds-toggle-label { margin-left: 8px; color: inherit; opacity: 0.7; }
+.ds-247420 .ds-btn-warn { color: var(--warn); }
+.ds-247420 .ds-btn-mascot { color: var(--mascot); }
+.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: 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: 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;
+}
+.ds-247420 .ds-modal-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: space-between; flex-wrap: wrap; }
+
+/* == appended: signin kit cleanup == */
+/* -- signin kit (ui_kits/signin) -- */
+.ds-247420 .ds-auth-wrap { padding: var(--space-2, 8px); display: flex; flex-direction: column; align-items: center; }
+.ds-247420 .ds-auth-col { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; margin: clamp(12px, 4vw, 24px) 0; min-width: 0; }
+.ds-247420 .ds-auth-form { padding: clamp(12px, 3vw, 18px); display: flex; flex-direction: column; gap: 10px; }
+.ds-247420 .ds-auth-sent { align-items: center; text-align: center; }
+.ds-247420 .ds-auth-sent-glyph { font-size: 32px; color: var(--panel-accent); }
+.ds-247420 .ds-auth-sent-title { margin: 0; font-weight: 600; }
+.ds-247420 .ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
+.ds-247420 .ds-auth-field { display: flex; flex-direction: column; gap: 4px; }
+.ds-247420 .ds-auth-field-label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+.ds-247420 .ds-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
+.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: 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; }
+.ds-247420 .ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
+.ds-247420 .ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
+.ds-247420 .ds-auth-provider-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); display: inline-flex; }
+.ds-247420 .ds-auth-modes { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
+.ds-247420 .ds-auth-mode-link { color: var(--panel-text-3); text-decoration: none; }
+.ds-247420 .ds-auth-mode-link--active { color: var(--panel-text); text-decoration: underline; }
+.ds-247420 .ds-auth-fineprint { text-align: center; font-size: 12px; color: var(--panel-text-3); margin: 6px 0; }
+
+/* == appended: gallery-misc kit cleanup == */
+/* --- shared helpers (converted from inline styles) --- */
+.ds-247420 .ds-m0 { margin: 0; }
+.ds-247420 .ds-text-2 { color: var(--panel-text-2); }
+.ds-247420 .ds-text-3 { color: var(--panel-text-3); }
+.ds-247420 .ds-kit-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; }
+
+/* --- gallery kit --- */
+.ds-247420 .ds-tile-cap { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); white-space: pre-line; color: var(--panel-text-2); font-size: 18px; min-width: 0; text-align: center; }
+.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: 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; }
+.ds-247420 .ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
+.ds-247420 .ds-lightbox-tag { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--panel-text-3); }
+
+/* --- error_404 kit --- */
+.ds-247420 .ds-err-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
+.ds-247420 .ds-err-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
+
+/* == appended: terminal-capp kit cleanup == */
+/* --- terminal kit ------------------------------------------ */
+.ds-247420 .ds-section-pad-sm { padding: 8px; }
+.ds-247420 .ds-kit-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.ds-247420 .ds-cli-cmt .cmd { color: var(--fg-3); }
+.ds-247420 .ds-cli-out .cmd { color: var(--fg-2); }
+.ds-247420 .ds-cli-ok .prompt, .ds-247420 .ds-cli-ok .cmd { color: var(--accent-ink); }
+.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: 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); }
+/* full-viewport render root (community-app) */
+.ds-247420 .ds-root-viewport { height: 100vh; height: 100dvh; }
+
+/* --- chat kit: widescreen detail pane -----------------------
+   .chat itself stays single-column (shared component, untouched) and
+   stretches full-width on ultrawide via the existing .app-main > .chat
+   max-width:none rule above (~L380) — that's fine for a bare thread, but
+   it leaves a lone thread column growing to 1400px+ with no other use of
+   the extra width. This wrapper adds a persistent "thread info" rail once
+   there is room to spare, instead of just widening the message column. */
+.ds-247420 .ds-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
+.ds-247420 .ds-chat-layout > .chat { min-width: 0; }
+.ds-247420 .ds-chat-detail { display: none; }
+@media (min-width: 1100px) {
+  .ds-247420 .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4); }
+  .ds-247420 .ds-chat-detail { display: block; position: sticky; top: 0; }
 }
 
 /* community.css */
@@ -4092,8 +4818,13 @@
 .ds-247420 .cm-shell {
   display: flex;
   height: 100vh;
+  height: 100dvh;
   width: 100%;
   overflow: hidden;
+  /* Notched devices: keep the rail and bottom chrome out of the unsafe zones. */
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
   background: var(--bg);
   color: var(--fg);
   font-family: var(--ff-body);
@@ -4177,7 +4908,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; }
@@ -4233,7 +4964,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;
 }
@@ -4294,7 +5025,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);
 }
 
 /* ============================================================
@@ -4374,7 +5105,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;
 }
 
@@ -4426,7 +5157,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 {
@@ -4555,7 +5286,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;
 }
 
@@ -4880,7 +5611,7 @@
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 18%, transparent) transparent;
   transition: width var(--dur-base) var(--ease), flex-basis var(--dur-base) var(--ease);
-  will-change: width, flex-basis, opacity, transform; contain: layout style;
+  contain: layout style;
 }
 .ds-247420 .cm-member-list:not(.open) {
   width: 0;
@@ -4894,7 +5625,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 {
@@ -5025,7 +5756,7 @@
 /* ============================================================
    Responsive — collapse sidebars on narrow viewports
    ============================================================ */
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .ds-247420 .cm-channel-sidebar {
     position: absolute;
     z-index: 20;
@@ -5052,6 +5783,21 @@
   .ds-247420 .cm-chat-header-topic { display: none; }
 }
 
+/* Drawer scrim — dims the chat while a drawer overlays it on narrow screens.
+   Visual affordance only (pointer-events: none): tap-to-close needs a real
+   element + handler in CommunityShell, which lives outside this stylesheet. */
+@media (max-width: 900px) {
+  .ds-247420 .cm-shell:has(.cm-channel-sidebar.open) .cm-main::before,
+  .ds-247420 .cm-shell:has(.cm-member-list.open) .cm-main::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 15;
+    background: color-mix(in oklab, var(--ink) 40%, transparent);
+    pointer-events: none;
+  }
+}
+
 @media (max-width: 480px) {
   .ds-247420 .cm-server-rail {
     flex: 0 0 56px;
@@ -5064,22 +5810,12 @@
     height: 44px;
     padding: 4px;
   }
-  .ds-247420 .cm-channel-sidebar {
-    left: 56px;
-    width: 80vw;
-    max-width: 200px;
-  }
+  .ds-247420 .cm-channel-sidebar,
   .ds-247420 .cm-channel-sidebar.open {
+    left: 56px;
     width: 80vw;
-    max-width: 200px;
-  }
-
-  /* Mobile touch target fixes for icon buttons */
-  .ds-247420 .cm-cat-add,
-  .ds-247420 .cm-ch-action-btn {
-    width: 44px;
-    height: 44px;
-    padding: 8px;
+    /* Use the width beside the 56px rail, not a 200px sliver. */
+    max-width: min(320px, calc(100vw - 56px));
   }
   .ds-247420 .cm-ch-icon {
     flex: 0 0 24px;
@@ -5088,6 +5824,44 @@
   }
 }
 
+/* Touch target floors — applies on any coarse-pointer device (phones AND
+   touch tablets/laptops), not just narrow viewports. */
+@media (pointer: coarse) {
+  .ds-247420 .cm-channel-item,
+  .ds-247420 .cm-member-item { min-height: 44px; }
+  .ds-247420 .cm-cat-add,
+  .ds-247420 .cm-ch-action-btn,
+  .ds-247420 .cm-user-btn,
+  .ds-247420 .cm-vs-btn,
+  .ds-247420 .cm-tp-new,
+  .ds-247420 .cm-tp-close,
+  .ds-247420 .cm-rb-cancel,
+  .ds-247420 .cm-mh-btn {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .ds-247420 .cm-forum-search,
+  .ds-247420 .cm-forum-sort,
+  .ds-247420 .cm-forum-new { min-height: 44px; }
+}
+
+/* Ultrawide: clamp the message/forum/page column to a readable measure. */
+@media (min-width: 1600px) {
+  .ds-247420 .cm-main > .chat,
+  .ds-247420 .cm-forum-list,
+  .ds-247420 .cm-page-body {
+    max-width: 110ch;
+    margin-inline: auto;
+    width: 100%;
+  }
+}
+
+/* No hover on touch: hover-revealed channel actions must stay reachable. */
+@media (hover: none) {
+  .ds-247420 .cm-channel-item .cm-ch-actions { opacity: 0.6; }
+  .ds-247420 .cm-category-header .cm-cat-add { opacity: 0.6; }
+}
+
 /* ---------- a11y polish: focus-visible coverage on community interactive elements ---------- */
 /* Every interactive surface with a :hover state must also have a :focus-visible state so
    keyboard users get equivalent feedback. The selectors here mirror the existing :hover rules. */
@@ -5095,53 +5869,53 @@
 .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 {
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  height: 48px;
-  padding: 0 var(--space-2);
+  height: calc(48px + env(safe-area-inset-top));
+  padding: env(safe-area-inset-top) max(var(--space-2), env(safe-area-inset-right)) 0 max(var(--space-2), env(safe-area-inset-left));
   background: var(--bg-2);
   border-bottom: 1px solid var(--panel-3);
 }
@@ -5161,7 +5935,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;
@@ -5206,7 +5980,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 {
@@ -5219,6 +5993,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;
@@ -5295,6 +6070,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; }
@@ -5404,6 +6180,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 {
@@ -5416,6 +6193,7 @@
 .ds-247420 .vx-modal {
   width: 100%; max-width: 440px;
   max-height: 90vh;
+  max-height: 90dvh;
   display: flex; flex-direction: column;
   border-radius: var(--r-3);
   background: var(--bg);
@@ -5433,6 +6211,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);
@@ -5490,6 +6269,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;
@@ -5507,6 +6287,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; }
@@ -5541,10 +6322,21 @@
 /* ThreadPanel — cm-thread-panel / cm-tp-* */
 .ds-247420 .cm-thread-panel {
   display: flex; flex-direction: column;
+  flex: 0 0 300px; width: 300px; min-width: 0;
   height: 100%; min-height: 0;
   background: var(--bg-2); color: var(--fg);
   border-left: var(--bw-hair) solid var(--rule);
 }
+@media (max-width: 900px) {
+  .ds-247420 .cm-thread-panel {
+    position: absolute;
+    z-index: 20;
+    top: 0; right: 0; bottom: 0;
+    height: auto;
+    width: min(320px, 90vw);
+    box-shadow: -2px 0 16px color-mix(in oklab, var(--ink) 30%, transparent);
+  }
+}
 .ds-247420 .cm-tp-head {
   display: flex; align-items: center; justify-content: space-between;
   padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule);
@@ -5558,6 +6350,7 @@
 .ds-247420 .cm-tp-new:hover, .ds-247420 .cm-tp-close:hover { background: var(--bg-3); color: var(--fg); }
 .ds-247420 .cm-tp-list { flex: 1; min-height: 0; overflow-y: auto; }
 .ds-247420 .cm-tp-item {
+  position: relative; /* anchors .cm-tp-dot to the row, not the panel */
   display: flex; flex-direction: column; gap: 2px;
   width: 100%; text-align: left; cursor: pointer;
   padding: var(--space-2); border: none; background: transparent;
@@ -5567,15 +6360,52 @@
 .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-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
+.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-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); }
-.ds-247420 .cm-forum-toolbar { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
+.ds-247420 .cm-forum-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border-bottom: var(--bw-hair) solid var(--rule); }
 .ds-247420 .cm-forum-search { flex: 1; 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); }
 .ds-247420 .cm-forum-sort { padding: var(--space-1); border: var(--bw-hair) solid var(--rule-strong); border-radius: var(--r-1); background: var(--bg-3); color: var(--fg); }
 .ds-247420 .cm-forum-new { padding: var(--space-1) var(--space-2); border: none; border-radius: var(--r-1); background: var(--accent); color: var(--accent-fg); cursor: pointer; }
@@ -5768,13 +6598,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 {
@@ -5796,7 +6626,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 {
@@ -5824,7 +6654,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));
@@ -5863,7 +6693,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. */
@@ -5874,7 +6704,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 {
@@ -6004,7 +6834,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; }
@@ -6023,10 +6853,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. */
@@ -6117,7 +6947,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; }
@@ -6157,6 +6987,12 @@
   font-family: var(--ff-mono); font-size: var(--fs-tiny);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
+/* Below ~480px a single nowrap line silently truncates most of the agent /
+   model / cwd context (no way to recover it - no title attr on the container,
+   only on individual bits). Let it wrap instead of clipping. */
+@media (max-width: 480px) {
+  .ds-247420 .chat-composer-context { white-space: normal; overflow: visible; text-overflow: clip; }
+}
 .ds-247420 button.chat-composer-context { cursor: pointer; }
 .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); }
@@ -6206,7 +7042,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 {
@@ -6216,7 +7052,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); }
@@ -6238,7 +7074,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; }
@@ -6255,7 +7091,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; }
 
@@ -6266,8 +7102,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
@@ -6299,7 +7136,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; }
 }
@@ -6327,7 +7164,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 {
@@ -6367,7 +7204,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; }
 }
@@ -6475,7 +7313,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; }
@@ -6492,11 +7330,14 @@
    neutral pill and from the accent-toned running pill (--success = green-2). */
 .ds-247420 .chat-msg .chat-tool.tool-done .chat-tool-status { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
 .ds-247420 .chat-tool-body { border-top: var(--bw-hair) solid var(--rule); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
+/* details' intrinsic min-content sizing: an unbroken token in the pre must not
+   widen the tool card past the bubble column. */
+.ds-247420 .chat-msg .chat-tool, .ds-247420 .chat-tool-body, .ds-247420 .chat-tool-section { min-width: 0; max-width: 100%; }
 .ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-1); }
 .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); }
@@ -6559,10 +7400,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); }
@@ -6732,6 +7574,29 @@
 .ds-247420 .ds-ep-toolbar-trailing { margin-left: auto; }
 .ds-247420 .ds-ep-toolbar-center { flex: 1; min-width: 0; }
 
+/* ToolbarRow — flat wrapping action row, no slot structure. */
+.ds-247420 .ds-ep-toolbar-row {
+    display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap;
+    margin-bottom: var(--space-2-5, 10px);
+}
+.ds-247420 .ds-ep-toolbar-row input,
+.ds-247420 .ds-ep-toolbar-row select,
+.ds-247420 .ds-ep-toolbar-row textarea {
+    background: var(--panel-2, var(--bg-2));
+    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);
+    font-size: var(--fs-tiny, 12px);
+    font-family: inherit;
+}
+.ds-247420 .ds-ep-toolbar-row input { flex: 1; min-width: 140px; }
+.ds-247420 .ds-ep-toolbar-row input:focus-visible,
+.ds-247420 .ds-ep-toolbar-row select:focus-visible,
+.ds-247420 .ds-ep-toolbar-row textarea:focus-visible {
+    outline: none; border-color: var(--accent);
+}
+
 /* Tabs */
 .ds-247420 .ds-ep-tabs { display: flex; flex-direction: column; min-height: 0; height: 100%; }
 .ds-247420 .ds-ep-tabs-head {
@@ -6780,7 +7645,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;
@@ -6907,6 +7772,45 @@
 .ds-247420 .ds-ep-propfield.block .ds-ep-btngrp { width: 100%; }
 .ds-247420 .ds-ep-propfield.block .ds-ep-btngrp-btn { flex: 1 1 0; text-align: center; }
 
+/* PropertyGridRow — bordered-row variant for a list of independently-editable
+   records (each record its own bottom-divided block, last one flush). */
+.ds-247420 .ds-ep-propgrid-row {
+    border-bottom: 1px solid var(--rule);
+    padding: var(--space-2, 8px) 0;
+}
+.ds-247420 .ds-ep-propgrid-row:last-child { border-bottom: none; }
+
+/* InlineEditableField — transparent-until-focus input, error state exposed
+   both visually (danger border) and semantically (aria-invalid, read by the
+   caller's own error text via aria-describedby if wired).
+   Specificity note: `.ds-ep-propfield-value input` (descendant combinator,
+   2 classes + 1 tag = (0,2,1) specificity) sets a visible border on every
+   input nested in a PropertyField -- the exact idiom InlineEditableField is
+   meant to be dropped into. A bare `input.ds-ep-inline-input` is only
+   (0,1,1) and loses; `:where(.ds-ep-propfield-value, .ds-ep-inline-standalone)`
+   is intentionally NOT used here because :where() has zero specificity and
+   would still lose. Instead the selector repeats .ds-ep-inline-input twice
+   (a valid, standard way to bump specificity by one class without adding an
+   ambient wrapper dependency) to reliably out-rank the PropertyField rule
+   regardless of nesting context. */
+.ds-247420 .ds-ep-inline-input.ds-ep-inline-input {
+    background: transparent;
+    border: 1px solid transparent;
+    color: inherit; font: inherit;
+    width: 100%;
+    border-radius: var(--r-1, 4px);
+    padding: var(--space-hair, 2px) var(--space-1, 4px);
+}
+.ds-247420 .ds-ep-inline-input.ds-ep-inline-input:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+    background: var(--panel-2, var(--bg-2));
+}
+.ds-247420 .ds-ep-inline-input.ds-ep-inline-input.has-error,
+.ds-247420 .ds-ep-inline-input.ds-ep-inline-input[aria-invalid="true"] {
+    border-color: var(--danger);
+}
+
 /* Flush dense action bar docked at a panel bottom (inspector Edit/Delete etc.).
    Compact buttons, square-ish, bordered top — not big floating pills. */
 .ds-247420 .ds-ep-actionbar {
@@ -6938,6 +7842,103 @@
     .ds-247420 .ds-ep-toolbar button:not(.ds-ep-btngrp-btn) { min-height: 36px; height: 36px; }
 }
 
+/* Pager */
+.ds-247420 .ds-ep-pager {
+    display: flex; align-items: center; gap: var(--space-1-75, 6px);
+    margin-top: var(--space-2, 8px);
+    font: var(--fs-tiny, 12px)/1 var(--ff-mono, monospace);
+    color: var(--panel-text-3, var(--fg-3));
+}
+.ds-247420 .ds-ep-pager-btn {
+    appearance: none; cursor: pointer;
+    background: var(--panel-2, var(--bg-2));
+    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);
+    font: inherit;
+}
+.ds-247420 .ds-ep-pager-btn:hover:not([disabled]) { background: color-mix(in oklab, var(--accent) 10%, transparent); }
+.ds-247420 .ds-ep-pager-btn:disabled { opacity: 0.4; cursor: default; }
+.ds-247420 .ds-ep-pager-label { white-space: nowrap; }
+
+/* JsonViewer */
+.ds-247420 .ds-ep-json {
+    font-size: var(--fs-tiny, 12px);
+    font-family: var(--ff-mono, ui-monospace, Consolas, monospace);
+    white-space: pre-wrap; word-break: break-all;
+    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));
+    max-height: 300px;
+    overflow-y: auto;
+    margin: 0;
+}
+.ds-247420 .ds-ep-json-empty {
+    color: var(--panel-text-3, var(--fg-3));
+    white-space: normal;
+    text-align: center;
+}
+/* JsonViewer syntax tokens (mode:'highlight'/'tree') — semantic theme tokens
+   only (retuned per-theme in colors_and_type.css); fallbacks chain to
+   coarser tokens, never a raw literal, so standalone kits stay themed. */
+.ds-247420 .ds-ep-json-k { color: var(--sky, var(--accent)); }
+.ds-247420 .ds-ep-json-s { color: var(--green-2, var(--green)); }
+.ds-247420 .ds-ep-json-n { color: var(--flame, var(--warn)); }
+.ds-247420 .ds-ep-json-b { color: var(--purple-2, var(--purple)); }
+.ds-247420 .ds-ep-json-z { color: var(--panel-text-3, var(--fg-3)); font-style: italic; }
+/* Collapsible tree mode — native details/summary, indent guides on children. */
+.ds-247420 .ds-ep-json-tree { white-space: normal; }
+.ds-247420 .ds-ep-json-kids {
+    padding-left: var(--space-3-5, 14px);
+    margin-left: var(--space-1, 4px);
+    border-left: 1px solid var(--rule);
+}
+.ds-247420 .ds-ep-json-sum {
+    cursor: pointer; user-select: none;
+    list-style: none;
+    border-radius: var(--r-1, 4px);
+}
+.ds-247420 .ds-ep-json-sum::-webkit-details-marker { display: none; }
+.ds-247420 .ds-ep-json-sum::before {
+    content: '+';
+    display: inline-block; width: var(--space-3, 12px);
+    color: var(--panel-text-3, var(--fg-3));
+}
+.ds-247420 .ds-ep-json-node[open] > .ds-ep-json-sum::before { content: '-'; }
+.ds-247420 .ds-ep-json-sum:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); }
+.ds-247420 .ds-ep-json-sum:focus-visible {
+    outline: 2px solid var(--accent-ink);
+    outline-offset: -2px;
+}
+.ds-247420 .ds-ep-json-tag {
+    margin-left: var(--space-1, 4px);
+    font-size: var(--fs-micro, 11px);
+    color: var(--panel-text-3, var(--fg-3));
+}
+.ds-247420 .ds-ep-json-leaf { padding-left: var(--space-3, 12px); word-break: break-all; }
+/* Copy affordance (copyable:true) — floats over the viewer's top-right. */
+.ds-247420 .ds-ep-json-wrap { position: relative; }
+.ds-247420 .ds-ep-json-copy {
+    position: absolute; top: var(--space-1-75, 6px); right: var(--space-1-75, 6px); z-index: 1;
+    appearance: none; cursor: pointer;
+    background: var(--panel-1, var(--bg-1));
+    border: 1px solid var(--rule);
+    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);
+    opacity: 0.75;
+}
+.ds-247420 .ds-ep-json-copy:hover { opacity: 1; border-color: var(--accent); }
+.ds-247420 .ds-ep-json-copy.copied { color: var(--green-2, var(--green)); border-color: var(--green-2, var(--green)); opacity: 1; }
+.ds-247420 .ds-ep-json-copy:focus-visible {
+    outline: 2px solid var(--accent-ink);
+    outline-offset: 2px;
+    opacity: 1;
+}
+
 /* Dock — 3x3 grid for in-engine overlay (canvas pass-through center) */
 .ds-247420 .ds-ep-dock {
     display: grid;
@@ -7042,6 +8043,11 @@
 .ds-247420 .ds-ep-ctxmenu {
     position: absolute;
     min-width: 180px;
+    max-width: calc(100vw - 8px);
+    max-height: calc(100vh - 8px);
+    max-height: calc(100dvh - 8px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
     background: var(--panel-1, var(--panel-bg));
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
@@ -7090,7 +8096,7 @@
 }
 .ds-247420 .ds-ep-drawer.side-left   { left: 0; top: 0; bottom: 0; width: 86vw; max-width: 320px; }
 .ds-247420 .ds-ep-drawer.side-right  { right: 0; top: 0; bottom: 0; width: 86vw; max-width: 320px; }
-.ds-247420 .ds-ep-drawer.side-bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-top-left-radius: 12px; border-top-right-radius: 12px; }
+.ds-247420 .ds-ep-drawer.side-bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; max-height: 80dvh; border-top-left-radius: 12px; border-top-right-radius: 12px; }
 @media (min-width: 768px) {
     .ds-247420 .ds-ep-drawer.side-left, .ds-247420 .ds-ep-drawer.side-right { width: 360px; max-width: 360px; }
 }
@@ -7102,7 +8108,7 @@
     position: fixed; inset: 0; z-index: 9500;
     background: var(--scrim-strong);
     display: flex; align-items: center; justify-content: center;
-    padding: 16px;
+    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
 }
 .ds-247420 .ds-ep-dialog {
     background: var(--panel-1, var(--panel-bg));
@@ -7111,7 +8117,9 @@
     border-radius: var(--r-2, 10px);
     box-shadow: var(--shadow-overlay);
     min-width: 280px; max-width: min(560px, 100%);
-    max-height: 90vh; overflow: auto;
+    max-height: 90vh;
+    max-height: min(90dvh, calc(100dvh - 32px));
+    overflow: auto;
     display: flex; flex-direction: column;
     outline: none;
 }
@@ -7129,12 +8137,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
@@ -7177,8 +8188,9 @@
 .ds-247420 .ds-ep-btngrp-btn:focus-visible,
 .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);
+.ds-247420 .ds-ep-dialog-btn:focus-visible,
+.ds-247420 .ds-ep-pager-btn:focus-visible {
+    outline: 2px solid var(--accent-ink);
     outline-offset: 2px;
 }
 
@@ -7190,7 +8202,8 @@
     .ds-247420 .ds-ep-btngrp-btn,
     .ds-247420 .ds-ep-ctxmenu-item,
     .ds-247420 .ds-ep-dialog-btn,
-    .ds-247420 .ds-ep-tree-row {
+    .ds-247420 .ds-ep-tree-row,
+    .ds-247420 .ds-ep-pager-btn {
         min-height: 44px;
         padding-top: 10px;
         padding-bottom: 10px;
@@ -7229,7 +8242,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);
 }
@@ -7258,7 +8271,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;
 }
 
@@ -7285,6 +8298,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;
@@ -7302,7 +8316,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; }
@@ -7387,6 +8401,11 @@
     padding: 0;
     outline: none;
     min-width: 160px;
+    max-width: calc(100vw - 8px);
+    max-height: calc(100vh - 8px);
+    max-height: calc(100dvh - 8px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
 }
 @media (prefers-reduced-motion: no-preference) {
     .ds-247420 .ds-popover { transition: opacity 140ms ease, transform 140ms ease; }
@@ -7412,7 +8431,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"] {
@@ -7456,7 +8475,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"] {
@@ -7465,7 +8484,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) {
@@ -7532,6 +8551,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; }
@@ -7566,6 +8586,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); }
@@ -7664,7 +8685,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 {
@@ -7694,6 +8715,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)); }
@@ -7759,8 +8781,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;
@@ -7773,7 +8795,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.
@@ -7860,6 +8882,7 @@
   display: flex;
   flex-direction: column;
   height: 100vh;
+  height: 100dvh;
   min-height: 0;
   overflow: hidden;
 }
@@ -7906,7 +8929,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);
@@ -7928,7 +8951,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;
@@ -7961,6 +8984,40 @@
   align-content: start;
 }
 
+/* ============================================================
+   Responsive — collapse the server+channel rail on narrow viewports.
+   community-app builds its own hand-rolled .ca-app/.app-body/.ca-rail tree
+   (not AppShell()), so it does not inherit AppShell's @container drawer CSS
+   (keyed off .app/.app-side-shell, which .ca-app/.ca-rail never establish).
+   Mirrors the .cm-channel-sidebar off-canvas idiom in community.css 1:1: same
+   breakpoint, same translateX(-110%) + .open reveal, same :has() scrim — so
+   the .ca-rail drawer driven by MobileHeader's hamburger (mobileMenuOpen in
+   the adapter snapshot) behaves identically to the community kit's sidebar.
+   ============================================================ */
+@media (max-width: 900px) {
+  .ds-247420.ds-247420 .ca-rail {
+    position: absolute;
+    z-index: 20;
+    top: 0; left: 0; bottom: 0;
+    width: 240px; min-width: 240px;
+    transform: translateX(-110%);
+    transition: transform var(--dur-base, 240ms) var(--ease, ease);
+    box-shadow: 2px 0 16px color-mix(in oklab, var(--ink, #000) 30%, transparent);
+  }
+  .ds-247420.ds-247420 .ca-rail.open { transform: translateX(0); }
+  .ds-247420.ds-247420 .ca-app:has(.ca-rail.open) .app-main {
+    position: relative;
+  }
+  .ds-247420.ds-247420 .ca-app:has(.ca-rail.open) .app-main::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 15;
+    background: color-mix(in oklab, var(--ink, #000) 40%, transparent);
+    pointer-events: none;
+  }
+}
+
 /* app-surfaces.css */
 /* app-surfaces.css — agentgui application-surface styling.
  *
@@ -8117,15 +9174,19 @@
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: .4em; text-align: center; min-height: 50vh; color: var(--fg-3);
 }
-.ds-247420 .history-empty-title { margin: 0; font-size: 1.05rem; color: var(--fg-2); }
+.ds-247420 .history-empty-title { margin: 0; font-size: var(--fs-lg); color: var(--fg-2); }
 .ds-247420 .history-empty-sub { margin: 0; max-width: 42ch; }
 
-/* Settings: two-column on wide screens (backend + agents). */
+/* Settings: two-column on wide screens (backend + agents). Grid gap is the
+   single source of rhythm between stacked Panels here - .panel's own
+   margin-bottom would stack on top of the gap (32px + 24px = 56px, a break
+   used nowhere else), so it's zeroed for direct grid children. */
 .ds-247420 .settings-grid {
   display: grid; gap: var(--space-4, 16px);
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
 }
+.ds-247420 .settings-grid > .panel { margin-bottom: 0; }
 .ds-247420 .agentgui-main-settings .settings-grid { margin-top: 0; }
 
 /* The kit Chat head computes its own zero-padded count and ignores our sub
@@ -8172,7 +9233,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 {
@@ -8185,6 +9246,11 @@
   .ds-247420 .app, .ds-247420 .app-main, .ds-247420 .panel, .ds-247420 .chat, .ds-247420 .chat-thread {
     background: var(--paper) !important; color: var(--ink) !important; box-shadow: none !important;
   }
+  /* Community surface: unclamp the fixed-height shell and hide the chrome so a
+     transcript prints as flowing pages instead of one clipped viewport. */
+  .ds-247420 .cm-shell { height: auto; overflow: visible; display: block; }
+  .ds-247420 .cm-server-rail, .ds-247420 .cm-channel-sidebar, .ds-247420 .cm-member-list, .ds-247420 .cm-mobile-header, .ds-247420 .cm-voice-strip { display: none !important; }
+  .ds-247420 .cm-main, .ds-247420 .cm-channel-list { overflow: visible; height: auto; }
 }
 
 /* gm-prose.css */
@@ -8236,13 +9302,14 @@
   top: 24px;
   align-self: start;
   max-height: calc(100vh - 48px);
+  max-height: calc(100dvh - 48px);
   overflow-y: auto;
   overscroll-behavior: contain;
   margin: 0;
   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;
@@ -8251,7 +9318,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;
 }
@@ -8287,7 +9354,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);
@@ -8299,7 +9366,7 @@
   white-space: pre-wrap;
   word-break: break-word;
 }
-.ds-247420 .cli .cli-cmt {
+.ds-247420 .cli .ds-cli-comment {
   color: var(--panel-text-3);
   white-space: pre-wrap;
   word-break: break-word;
@@ -8307,20 +9374,20 @@
   padding: 3px 0;
   line-height: 1.6;
 }
-.ds-247420 .cli .cli-cmt:empty::before { content: '\00a0'; }
-.ds-247420 .cli .cli-line {
+.ds-247420 .cli .ds-cli-comment:empty::before { content: '\00a0'; }
+.ds-247420 .cli .ds-cli-row {
   display: flex;
   gap: 10px;
   padding: 3px 0;
   white-space: pre-wrap;
   word-break: break-word;
 }
-.ds-247420 .cli .cli-line .prompt {
+.ds-247420 .cli .ds-cli-row .prompt {
   color: var(--panel-accent);
   flex: 0 0 auto;
   user-select: none;
 }
-.ds-247420 .cli .cli-line .cmd {
+.ds-247420 .cli .ds-cli-row .cmd {
   color: var(--panel-text);
   flex: 1 1 auto;
   white-space: pre-wrap;
@@ -8348,7 +9415,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;
@@ -8365,7 +9432,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 {
@@ -8466,7 +9533,7 @@
 }
 .ds-247420 .sp-loading-bar-track {
   height: 6px;
-  border-radius: 3px;
+  border-radius: var(--r-hair);
   background: var(--bg-3);
   overflow: hidden;
 }
@@ -8502,8 +9569,9 @@
 }
 .ds-247420 .sp-hud-ammo {
   position: fixed;
-  bottom: 50px;
-  right: 20px;
+  /* Fixed chrome clears notch/home-indicator on cutout devices. */
+  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  right: calc(20px + env(safe-area-inset-right, 0px));
   font-size: 24px;
   font-weight: bold;
   color: var(--fg);
@@ -8512,7 +9580,7 @@
 .ds-247420 .sp-hud-ammo-reloading { color: var(--warn); }
 .ds-247420 .sp-hud-health {
   position: fixed;
-  bottom: 20px;
+  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
   left: 50%;
   transform: translateX(-50%);
   width: 200px;
@@ -8539,7 +9607,7 @@
 .ds-247420 .sp-hud-boost {
   position: fixed;
   top: 80px;
-  right: 20px;
+  right: calc(20px + env(safe-area-inset-right, 0px));
   padding: 8px 16px;
   background: var(--accent);
   color: var(--accent-fg);
@@ -8572,6 +9640,11 @@
   border: 1px solid var(--bw-rule, var(--rule));
   border-radius: var(--r-2, 10px);
   color: var(--fg);
+  /* Short landscape phones: keep lower controls reachable inside the card. */
+  max-height: calc(100vh - 32px);
+  max-height: calc(100dvh - 32px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
 }
 .ds-247420 .sp-lobby-title {
   margin: 0;