anentrypoint-design 0.0.487 → 0.0.489

package/dist/247420.css

@@ -204,7 +204,7 @@
   --fs-lg:       18px;
   --fs-xl:       21px;
   --fs-h4:       clamp(24px, 2cqi, 28px);
-  --fs-h3:       clamp(25px, 2.6cqi, 34px);
+  --fs-h3:       clamp(26px, 2.6cqi, 34px);
   --fs-h2:       clamp(28px, 3.6cqi, 44px);
   --fs-h1:       clamp(34px, 5cqi, 64px);
   --fs-hero:     clamp(42px, 7cqi, 96px);
@@ -548,6 +548,27 @@
   --code-num:     var(--sun);
 }
 
+/* [data-accent="X"] overrides (below) hardcode LIGHT-tuned fills (--acid,
+   --purple, --green) with no dark-theme companion, so data-theme=dark +
+   data-accent=acid/purple/green produced a near-invisible fill against the
+   dark page bg (measured: acid 1.15:1, purple 1.04:1, green 2.98:1 on --ink
+   -- all under the 3:1 non-text UI-fill floor). Same convention as the base
+   --accent retune above: restate the fill as its dark-tuned equivalent so
+   the swatch stays visible, using tones already verified elsewhere in this
+   file (green retune 7.48:1 on --ink, purple-2 retune 6.11:1 on --ink). */
+.ds-247420[data-theme="ink"][data-accent="acid"],
+.ds-247420[data-theme="dark"][data-accent="acid"] {
+  --accent: #BFBFBF; --accent-bright: #BFBFBF; --accent-fg: var(--ink); --accent-ink: var(--paper); --panel-accent: #BFBFBF;
+}
+.ds-247420[data-theme="ink"][data-accent="purple"],
+.ds-247420[data-theme="dark"][data-accent="purple"] {
+  --accent: #C277FF; --accent-bright: #C277FF; --accent-fg: var(--ink); --accent-ink: #C277FF; --panel-accent: #C277FF;
+}
+.ds-247420[data-theme="ink"][data-accent="green"],
+.ds-247420[data-theme="dark"][data-accent="green"] {
+  --accent: #5CBF52; --accent-bright: #5CBF52; --accent-fg: var(--ink); --accent-ink: #5CBF52; --panel-accent: #5CBF52;
+}
+
 /* Restores the pre-existing (weaker) dark-theme selection tint after the
    light-theme-only bump in app-shell.css's base ::selection rule. */
 .ds-247420[data-theme="ink"] ::selection,
@@ -850,6 +871,21 @@
 .ds-247420, .ds-247420 body { margin: 0; padding: 0; }
 .ds-247420 button, .ds-247420 input, .ds-247420 select, .ds-247420 textarea { font: inherit; }
 
+/* Global reduced-motion safety net: catches any component transition/animation
+   that lacks its own per-file prefers-reduced-motion override (most components
+   already opt out locally; this is the backstop for the rest, e.g.
+   plugins-config.css, catalog-theme.css, sidebar-misc.css, row-print.css,
+   topbar.css, primitives.css, git-status.css, panel-row.css). Scroll-snap
+   carousels handle scroll-behavior themselves and are unaffected. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 *, .ds-247420 *::before, .ds-247420 *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
 .ds-247420 .skip-link {
   --skip-link-preflight-translate-clear: -100%;
   position: absolute;
@@ -1034,6 +1070,13 @@
   text-underline-offset: 4px;
   text-decoration-thickness: 2px;
 }
+/* Visited state was entirely absent -- a returning user had no way to tell an
+   already-read link from an unread one, the one link state browsers don't
+   fake for you. --purple-2 keeps it distinct from both the unvisited accent
+   and any hover/danger tone already in the palette. */
+.ds-247420 a.ds-link-accent:visited, .ds-247420 .ds-prose a:visited {
+  color: var(--purple-2);
+}
 .ds-247420 a.ds-link-accent:hover, .ds-247420 .ds-prose a:hover {
   background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
 }
@@ -1117,7 +1160,7 @@
   display: flex; flex-wrap: wrap;
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
-  padding: 10px var(--pad-x);
+  padding: var(--space-2-5) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
@@ -1130,7 +1173,7 @@
   position: sticky; top: 0; z-index: var(--z-header);
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
-  padding: 8px var(--pad-x);
+  padding: var(--space-2) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .ds-247420 .app-chrome > .app-topbar,
@@ -1148,7 +1191,7 @@
 .ds-247420 .app-topbar > .app-search { flex: 1 1 auto; }
 .ds-247420 .app-topbar > nav { margin-left: auto; }
 .ds-247420 .app-topbar > .app-topbar-theme { flex: 0 0 auto; }
-.ds-247420 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
+.ds-247420 .app-topbar nav { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; }
 .ds-247420 .app-topbar nav a { flex: 0 0 auto; }
 .ds-247420 .app-topbar nav a {
   color: var(--fg-2);
@@ -1201,6 +1244,12 @@
   border-radius: var(--r-pill);
   font-size: var(--fs-sm); color: var(--fg-3);
   max-width: 360px;
+  /* Match the system-wide input border language (.ds-field / .ds-search-input:
+     tonal fill + printed baseline rule) instead of a borderless pill, so the
+     topbar search reads as the same control family as every other input. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
 .ds-247420 .app-search .icon { opacity: 0.6; }
 .ds-247420 .app-search input {
@@ -1208,20 +1257,32 @@
   font-family: inherit; font-size: inherit; color: var(--fg);
   width: 100%;
 }
+/* Same focus language as .ds-field/.ds-search-input: no outline ring, the
+   baseline rule thickens to the accent instead — matching every other form
+   input in the system rather than a one-off outline ring. */
 .ds-247420 .app-search:focus-within {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
+  background: var(--bg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
 }
 
 .ds-247420 .app-crumb {
   min-height: var(--app-crumb-h);
-  padding: 6px var(--pad-x);
-  display: flex; align-items: center; gap: 8px;
+  padding: var(--space-1-75) var(--pad-x);
+  display: flex; align-items: center; gap: var(--space-2);
   font-size: var(--fs-sm); color: var(--fg-3);
+  min-width: 0;
 }
-.ds-247420 .app-crumb .sep { opacity: 0.5; }
-.ds-247420 .app-crumb .leaf { color: var(--fg); font-weight: 600; }
-.ds-247420 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); }
+.ds-247420 .app-crumb .sep { opacity: 0.5; flex: 0 0 auto; }
+/* Trail segments and the current/leaf segment truncate independently instead
+   of the whole crumb bar overflowing — a long segment (deep file path, long
+   title) must not push the sibling segments or the right slot off-screen. */
+.ds-247420 .app-crumb > span:not(.sep):not(.crumb-right) {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0; flex: 0 1 auto;
+}
+.ds-247420 .app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; }
+.ds-247420 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; }
 
 /* The shell is the grid cell (.app-body's fixed sidebar column); it must own
    its own scroll, not just size to content, because .app-body's row track is
@@ -1264,7 +1325,7 @@
 .ds-247420 .app-side .group {
   font-size: var(--fs-xs); font-weight: 600;
   color: var(--fg-3); padding: 0 var(--space-3);
-  margin-bottom: 6px;
+  margin-bottom: var(--space-1-75);
 }
 .ds-247420 .app-side a {
   display: grid; grid-template-columns: 18px 1fr auto;
@@ -1279,7 +1340,7 @@
   min-height: 44px;
   border-radius: var(--r-1);
   color: var(--fg-2);
-  margin-bottom: 2px;
+  margin-bottom: var(--space-hair);
 }
 @media (pointer: coarse) {
   .ds-247420 .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); }
@@ -1375,6 +1436,14 @@
    width:100% restores fill-then-cap for every .narrow page, not just wide
    viewports (the shrink-to-fit bug undersized even the base 760px case). */
 .ds-247420 .app-main.narrow { width: 100%; max-width: var(--measure-narrow); margin: 0 auto; }
+/* .narrow means "prose reading measure", not "shrink the whole shell on wide
+   screens" -- the fixed 760px floor read as narrow on any viewport above
+   ~1300px since the clamp below only widens the no-side case. Sidebar-present
+   narrow pages (docs, papers) get the same wide-viewport widening treatment,
+   just without the no-side variant's extra sidebar-width allowance. */
+.ds-247420 .app-body:not(.no-side) .app-main.narrow {
+  max-width: clamp(var(--measure-narrow), 46vw, 1000px);
+}
 /* A shell with no sidebar has no competing column, so the prose clamp there was
    leaving the whole sidebar's worth of width empty -- 760px of content inside a
    1413px shell on a real page. Widen the clamp by the space the absent sidebar
@@ -1439,8 +1508,16 @@
   color: var(--fg-3);
   border-top: 1px solid var(--rule);
 }
-.ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ds-247420 .app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
 .ds-247420 .app-status .item:first-of-type { color: var(--accent-ink); }
+/* Subtle divider between adjacent status segments — a thin inset rule, not a
+   full-height border, so it reads as a quiet separator rather than boxing
+   each item. */
+.ds-247420 .app-status .item:not(:first-of-type)::before {
+  content: ''; flex: 0 0 auto;
+  width: 1px; height: 10px;
+  background: var(--rule-strong);
+}
 .ds-247420 .app-status .spread { flex: 1; }
 /* The status bar NEVER wraps: at narrow widths the trailing items (hints,
    agent target) drop in priority order instead of breaking mid-word onto a
@@ -1541,6 +1618,10 @@
 .ds-247420 .ds-icon-btn-base { width: 32px; height: 32px; }
 .ds-247420 .ds-icon-btn-lg { width: 40px; height: 40px; }
 .ds-247420 .ds-icon-btn-xl { width: 48px; height: 48px; }
+@media (pointer: coarse) {
+  .ds-247420 .ds-icon-btn-xs { width: 32px; height: 32px; }
+  .ds-247420 .ds-icon-btn-sm { width: 32px; height: 32px; }
+}
 .ds-247420 .ds-icon-btn-ghost { background: transparent; }
 .ds-247420 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-247420 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
@@ -1562,7 +1643,11 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-247420 .ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-pico); }
+/* --fs-nano (11px), not --fs-pico (10px): --fs-pico sits below the 11px
+   legibility floor other small-scale labels in this system respect (see
+   .ds-stat-lbl, .ds-session-row-id), and this size is used live for the
+   workspace rail item-count badge (atoms.js Badge size="sm"). */
+.ds-247420 .ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-nano); }
 .ds-247420 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
 .ds-247420 .ds-badge.tone-green, .ds-247420 .ds-badge.tone-live, .ds-247420 .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
@@ -1619,7 +1704,6 @@
 .ds-247420 .chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
 .ds-247420 .chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-247420 .chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.ds-247420 .chip.tone-yellow   { background: var(--sun);         color: var(--ink); }
 
 .ds-247420 .chip.ds-chip-removable { padding-right: var(--space-1); }
 .ds-247420 .ds-chip-remove-btn {
@@ -1659,6 +1743,7 @@
 }
 .ds-247420 .glyph { --glyph-size-sm: var(--fs-nano); --glyph-size-base: var(--fs-tiny); --glyph-size-lg: var(--fs-body); }
 .ds-247420 .glyph-sm { width: var(--icon-xs); height: var(--icon-xs); }
+.ds-247420 .glyph-base { width: 18px; height: 18px; }
 .ds-247420 .glyph-lg { width: 22px; height: 22px; }
 
 /* Shared empty-state base -- hero-content.css's .empty and community.css's
@@ -1677,6 +1762,44 @@
 .ds-247420 .ds-empty-state--panel { background: var(--bg-2); border-radius: var(--r-1); }
 .ds-247420 .ds-empty-state--compact { padding: var(--space-5) var(--space-3); }
 
+/* .ds-tooltip — shared floating bubble (overlay-primitives/tooltip.js appends
+   one instance to <body> and repositions it via useFloating). Fade timing
+   matches the component's own 350ms hover-intent delay. */
+.ds-247420 .ds-tooltip {
+  position: fixed;
+  z-index: var(--z-top);
+  max-width: 240px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--r-1);
+  background: var(--fg);
+  color: var(--bg);
+  font-size: var(--fs-xs);
+  line-height: 1.35;
+  box-shadow: var(--shadow-2);
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96);
+  transition: opacity var(--dur-snap) var(--ease), transform var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-tooltip:not([hidden]) { opacity: 1; transform: scale(1); }
+.ds-247420 .ds-tooltip::after {
+  content: '';
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  background: var(--fg);
+  transform: rotate(45deg);
+}
+.ds-247420 .ds-tooltip[data-placement^="top"]::after    { bottom: -3px; left: 50%; margin-left: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="bottom"]::after { top: -3px; left: 50%; margin-left: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="left"]::after   { right: -3px; top: 50%; margin-top: -3px; }
+.ds-247420 .ds-tooltip[data-placement^="right"]::after  { left: -3px; top: 50%; margin-top: -3px; }
+.ds-247420 .ds-tooltip.kind-danger { background: var(--warn); color: var(--ink); }
+.ds-247420 .ds-tooltip.kind-danger::after { background: var(--warn); }
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-tooltip { transition: none; }
+}
+
 /* ============================================================
    Panel — soft tonal container, no border decoration
    ============================================================ */
@@ -1738,9 +1861,19 @@
   font-size: var(--fs-tiny); font-weight: 600;
   color: var(--fg-3);
   letter-spacing: var(--tr-caps); text-transform: uppercase;
+  /* A hairline divider is the header's only structural separator from the
+     body — without it, an uppercase caps label at fs-tiny/600 reads as just
+     another dim meta line once the eye drops past the top of the panel. */
+  border-bottom: var(--bw-hair) solid var(--rule);
+  margin-bottom: var(--space-1);
 }
 .ds-247420 .panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; }
-.ds-247420 .panel-head > :last-child {
+/* A borderless .panel-wide (no card edge to lean on) would otherwise show a
+   divider floating with nothing to visually anchor it — drop it there and
+   rely on spacing alone, matching panel-wide's already-transparent chrome. */
+.ds-247420 .panel.panel-wide .panel-head { border-bottom: none; margin-bottom: 0; }
+.ds-247420 .panel.panel--dense .panel-head { border-bottom: var(--bw-hair) solid var(--rule); margin-bottom: 0; }
+.ds-247420 .panel-head > :last-child:not(.ds-badge) {
   font-weight: 500; color: var(--fg-3);
   font-family: var(--ff-mono); letter-spacing: 0;
 }
@@ -2041,6 +2174,12 @@
   padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
 }
 .ds-247420 .ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
+/* HeroFromPageData's richer badge shape ({label, desc}) renders a strong
+   figure plus a muted descriptor inside the same .ds-hero-stat row — give
+   the pair a baseline-aligned inline layout instead of falling back to
+   unstyled default inline flow. */
+.ds-247420 .ds-hero-stat-n { font-weight: 700; color: var(--fg); margin-right: var(--space-2); }
+.ds-247420 .ds-hero-stat-l { color: var(--fg-3); font-size: var(--fs-xs); }
 .ds-247420 .ds-hero-title {
   font-family: var(--ff-display); font-weight: 700;
   /* Bespoke display clamp, deliberately off the --fs-* ladder: --fs-hero is
@@ -2153,6 +2292,8 @@
   padding: var(--space-2) 0;
   font-family: var(--ff-display); font-weight: 600;
   text-transform: uppercase; letter-spacing: var(--tr-caps);
+  mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
+  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--fg) 28px, var(--fg) calc(100% - 28px), transparent 100%);
 }
 .ds-247420 .ds-marquee-track {
   display: inline-flex; gap: var(--space-5);
@@ -2185,7 +2326,7 @@
 .ds-247420 .cli {
   display: flex; align-items: center; gap: 14px;
   overflow-x: auto;
-  padding: 20px 24px;
+  padding: var(--space-3-5) var(--space-4);
   background: var(--ink); color: var(--paper);
   border-radius: var(--r-3);
   font-family: var(--ff-mono); font-size: var(--fs-lg);
@@ -2193,12 +2334,13 @@
 .ds-247420 .cli .prompt { color: var(--green-2); }
 .ds-247420 .cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
 .ds-247420 .cli .copy   {
-  padding: 8px 16px; background: transparent; color: var(--paper);
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
   font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill);
 }
 .ds-247420 .cli .copy:hover { background: var(--fg-3); }
+.ds-247420 .cli .copy:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 /* Multi-line CLI block: when .cli holds .ds-cli-row / .ds-cli-comment children
    (quickstart scripts, multi-command snippets — see CliBlock in
@@ -2234,7 +2376,7 @@
 .ds-247420 .ds-quickstart-cli { flex-direction: column; align-items: stretch; gap: var(--space-2); }
 .ds-247420 .ds-quickstart-copy {
   align-self: flex-end;
-  padding: 8px 16px; background: transparent; color: var(--paper);
+  padding: var(--space-2) var(--space-3); background: transparent; color: var(--paper);
   font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-caps);
   cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule-strong);
   border-radius: var(--r-pill); border: none;
@@ -2430,10 +2572,13 @@
   display: inline-flex; align-items: center; gap: var(--space-hair);
   font-size: var(--fs-xs); font-weight: 600;
 }
+/* --green, not --success (--green-2): --success measures 3.2:1 on --paper-2,
+   below the 4.5:1 AA floor for text -- --success is tuned for non-text uses
+   (fills/backgrounds, where 3:1 suffices), --green clears 5.2:1 as text. */
 .ds-247420 .kpi-delta-up { color: var(--green); }
 .ds-247420 .kpi-delta-down { color: var(--danger); }
 .ds-247420 .ds-sparkline path { stroke: currentColor; }
-.ds-247420 .ds-sparkline-up { color: var(--success); }
+.ds-247420 .ds-sparkline-up { color: var(--green); }
 .ds-247420 .ds-sparkline-down { color: var(--danger); }
 
 /* ============================================================
@@ -3284,6 +3429,13 @@
   border-radius: var(--r-3); background: var(--bg);
   transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
 }
+/* Idle hover: a quiet pre-drag affordance (border firms up, faint tint) so a
+   pointer resting over the zone reads as "droppable" before a drag even
+   starts — distinct from and weaker than the .dragover treatment below. */
+.ds-247420 .ds-dropzone:hover {
+  border-color: var(--fg-3);
+  background: var(--bg-2);
+}
 .ds-247420 .ds-dropzone-inner {
   display: flex; align-items: center; justify-content: center;
   gap: var(--space-2); flex-wrap: wrap;
@@ -3292,6 +3444,9 @@
 /* Icon size, not type — see .ds-file-cell-media .ds-file-icon above. */
 .ds-247420 .ds-dropzone-glyph { font-size: var(--icon-lg, 24px); color: var(--fg-3); }
 .ds-247420 .ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
+.ds-247420 .ds-dropzone:not(.dragover):not(.rejected):hover {
+  border-color: var(--fg-3);
+}
 .ds-247420 .ds-dropzone.dragover {
   border-color: var(--accent);
   background: var(--accent-tint);
@@ -3305,6 +3460,26 @@
   0%, 100% { border-color: var(--accent); }
   50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
 }
+/* Rejected — an in-flight drag carrying a disallowed payload (wrong type,
+   over the size cap). Distinct from dragover: warn tone, not accent, so the
+   two "something is happening" states never read as the same affordance. */
+.ds-247420 .ds-dropzone.rejected {
+  border-color: var(--warn);
+  background: color-mix(in oklab, var(--warn) 10%, var(--bg));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-dropzone.rejected { animation: ds-dropzone-shake 0.4s var(--ease); }
+}
+.ds-247420 .ds-dropzone.rejected .ds-dropzone-glyph,
+.ds-247420 .ds-dropzone.rejected .ds-dropzone-label { color: var(--warn); }
+@keyframes ds-dropzone-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+.ds-247420 .ds-dropzone--wrap.rejected > .ds-dropzone-inner {
+  outline-color: var(--warn);
+}
 /* Wrapper form (has children): no permanent chrome - the content renders as if
    the zone were not there, and the dashed affordance overlays it ONLY while a
    drag is in flight. */
@@ -3412,6 +3587,8 @@
            max(var(--space-3), env(safe-area-inset-bottom))
            max(var(--space-3), env(safe-area-inset-left));
   background: color-mix(in oklab, var(--ink) 55%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
@@ -3486,10 +3663,17 @@
    floor. --ink on the same fill measures 6.27:1. Same principle as the
    --accent/--accent-ink split the token layer documents: a light saturated fill
    takes the dark text tone. Measured in a live browser. */
+/* Severity is never color-alone (gd-14, color-blindness/grayscale-print safe):
+   the bold weight + widened letter-spacing is a shape cue that survives a
+   colorless render, matching how .btn-primary.danger differs from every
+   other .btn-primary at a glance even with color stripped out. */
 .ds-247420 .btn-primary.danger {
   background: var(--warn);
   border-color: var(--warn);
   color: var(--ink);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) color-mix(in oklab, var(--ink) 25%, transparent);
+  font-weight: 700;
+  letter-spacing: 0.01em;
 }
 .ds-247420 .btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
 
@@ -3826,6 +4010,7 @@
   text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   position: relative;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .ds-247420 .chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .chat-msg.you .chat-avatar {
@@ -3867,6 +4052,13 @@
   min-width: 0;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
+/* Tail corner: the bubble edge nearest its own avatar (bottom-left for
+   'them', bottom-right for 'you') squares off slightly, matching bubble
+   position to the sender's avatar the way a speech-bubble tail would — a
+   consistent radius on all four corners reads as a generic card, not a
+   turn in a conversation. */
+.ds-247420 .chat-msg:not(.you) .chat-bubble { border-bottom-left-radius: var(--r-0); }
+.ds-247420 .chat-msg.you .chat-bubble { border-bottom-right-radius: var(--r-0); }
 .ds-247420 .chat-msg:hover .chat-bubble { transform: translateY(-1px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 6%, transparent); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
 /* Own bubble — calm tinted lead, not a full electric fill (chat stays readable). */
 .ds-247420 .chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
@@ -4304,6 +4496,163 @@
    fell back to the paper tone at 3.13:1 on ink. */
 .ds-247420 .aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
 
+/* ============================================================
+   Composer attachment-detected badge, context line, hint, toolbar,
+   note strip, elapsed counter, dragover state — all referenced from
+   composer.js / composer-affordances.js but previously had no CSS at
+   all (unstyled DOM nodes / plain text falling through to block
+   defaults).
+   ============================================================ */
+.ds-247420 .chat-composer-context {
+  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-1) 0;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  letter-spacing: 0.01em;
+}
+.ds-247420 button.chat-composer-context {
+  background: transparent; border: 0; cursor: pointer; text-align: left;
+  border-radius: var(--r-0);
+}
+.ds-247420 button.chat-composer-context:hover { color: var(--fg-2); }
+.ds-247420 button.chat-composer-context:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .chat-composer-context-sep { color: var(--fg-3); opacity: 0.6; }
+.ds-247420 .chat-composer-context-bit {
+  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
+  font: inherit; color: var(--fg-3); border-radius: var(--r-0);
+  transition: color var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .chat-composer-context-bit:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
+.ds-247420 .chat-composer-context-bit:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .chat-composer-context-text { color: var(--fg-3); }
+
+.ds-247420 .chat-composer-detected-badge {
+  display: flex; align-items: center; gap: var(--space-2);
+  width: 100%; order: -1;
+  padding: var(--space-1) var(--space-2-5);
+  margin: 0 0 var(--space-1);
+  background: color-mix(in oklab, var(--accent) 12%, var(--bg-2));
+  border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent);
+  border-radius: var(--r-1);
+  font-size: var(--fs-xs); color: var(--fg);
+}
+.ds-247420 .chat-composer-detected-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-composer-detected-dismiss {
+  flex-shrink: 0; width: 20px; height: 20px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; cursor: pointer; border-radius: 50%;
+  color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-tiny); line-height: 1;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .chat-composer-detected-dismiss:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--fg); }
+.ds-247420 .chat-composer-detected-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+
+.ds-247420 .chat-composer-hint {
+  width: 100%; order: 2;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: 0 var(--space-1);
+}
+
+.ds-247420 .chat-composer-toolbar {
+  display: flex; align-items: center; gap: var(--space-1);
+  flex-shrink: 0;
+}
+.ds-247420 .chat-composer-toolbar .composer-btn {
+  width: 32px; height: 32px; border-radius: var(--r-1);
+}
+@media (pointer: coarse) {
+  .ds-247420 .chat-composer-toolbar .composer-btn { width: 44px; height: 44px; }
+}
+
+.ds-247420 .chat-composer-note {
+  width: 100%; order: 3;
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  padding: var(--space-1) var(--space-1) 0;
+}
+
+.ds-247420 .chat-composer-elapsed {
+  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3);
+  flex-shrink: 0; padding: 0 var(--space-1);
+}
+
+.ds-247420 .chat-composer.dragover {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
+}
+
+/* ============================================================
+   EmojiPicker (ov-emoji-*) — an anchored popover with search input,
+   category tabs, and an emoji grid; previously entirely unstyled.
+   Search input mirrors .ds-search-input's tonal-fill treatment so it
+   reads consistently with the rest of the system's search fields.
+   ============================================================ */
+.ds-247420 .ov-emoji-root {
+  position: fixed;
+  display: flex; flex-direction: column; gap: var(--space-2);
+  width: 280px; max-height: 320px;
+  padding: var(--space-2-5);
+  background: var(--bg);
+  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
+  border-radius: var(--r-2);
+  box-shadow: var(--shadow-overlay, var(--shadow-3));
+  z-index: var(--z-dropdown, var(--z-raised));
+}
+.ds-247420 .ov-emoji-search {
+  width: 100%; box-sizing: border-box;
+  font: inherit; font-size: var(--fs-sm); color: var(--fg);
+  background: var(--bg-2); border: 0;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule);
+  border-radius: var(--r-1);
+  height: var(--ctl-sm, 32px);
+  padding: 0 var(--space-2-5);
+  transition: box-shadow var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .ov-emoji-search::placeholder { color: var(--fg-3); }
+.ds-247420 .ov-emoji-search:focus-visible,
+.ds-247420 .ov-emoji-search:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--accent), 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
+}
+.ds-247420 .ov-emoji-tabs {
+  display: flex; gap: var(--space-1);
+  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
+  padding-bottom: var(--space-1);
+}
+.ds-247420 .ov-emoji-tab {
+  flex: 1;
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 30px; font-size: var(--fs-sm);
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease);
+}
+.ds-247420 .ov-emoji-tab:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .ov-emoji-tab[aria-selected="true"] { background: color-mix(in oklab, var(--accent) 16%, transparent); }
+.ds-247420 .ov-emoji-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
+.ds-247420 .ov-emoji-grid { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent; }
+.ds-247420 .ov-emoji-grid-inner {
+  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1);
+}
+.ds-247420 .ov-emoji-cell {
+  display: inline-flex; align-items: center; justify-content: center;
+  aspect-ratio: 1; font-size: var(--fs-lg); line-height: 1;
+  background: transparent; border: 0; border-radius: var(--r-1);
+  cursor: pointer;
+  transition: background var(--dur-snap, .15s) var(--ease, ease), transform 0.12s ease;
+}
+.ds-247420 .ov-emoji-cell:hover { background: color-mix(in oklab, var(--fg) 10%, transparent); transform: scale(1.12); }
+.ds-247420 .ov-emoji-cell:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; background: color-mix(in oklab, var(--fg) 10%, transparent); }
+.ds-247420 .ov-emoji-empty {
+  grid-column: 1 / -1;
+  text-align: center; color: var(--fg-3); font-size: var(--fs-xs);
+  padding: var(--space-3) 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ov-emoji-cell { transition: background var(--dur-snap, .15s) var(--ease, ease); }
+  .ds-247420 .ov-emoji-cell:hover { transform: none; }
+}
+
 /* ============================================================
    Sidebar polish: hide zero-count badges; tonal active state;
    monospace count chips.
@@ -4631,6 +4980,7 @@
 }
 .ds-247420 .ds-context-menu-item.danger {
   color: var(--warn);
+  box-shadow: inset 2px 0 0 var(--warn);
 }
 .ds-247420 .ds-context-menu-item.danger:hover {
   background: color-mix(in oklab, var(--warn) 12%, var(--bg));
@@ -4733,6 +5083,7 @@
 .ds-247420 .prose p { margin: 0 0 var(--space-4) 0; }
 .ds-247420 .prose p:last-child { margin-bottom: 0; }
 .ds-247420 .prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
+.ds-247420 .prose a:visited { color: color-mix(in oklab, var(--accent-ink) 70%, var(--purple-2, var(--fg-3))); }
 .ds-247420 .prose a:hover { text-decoration-color: currentColor; }
 
 /* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
@@ -4848,38 +5199,13 @@
 }
 
 /* Switch primitive (form-primitives.js Toggle) -- track + sliding knob.
-   Previously unstyled anywhere in this repo (a bare button with no visible
-   affordance), so every real consumer resorted to a local literal-bracket-
-   text reimplementation ('[x] on'/'[ ] off') instead. Sized off --space
-   tokens: a 40x22 track (2x11 knob diameter + 2px inset each side) is the
-   standard iOS/Material switch proportion, not an arbitrary literal. */
-.ds-247420 .ds-toggle {
-  appearance: none; -webkit-appearance: none;
-  display: inline-flex; align-items: center; flex-shrink: 0;
-  width: 40px; height: 22px; padding: 2px;
-  border: 1px solid var(--rule-strong); border-radius: var(--r-pill, 999px);
-  background: var(--bg-3); box-shadow: none; cursor: pointer;
-  transition: background-color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
-}
-.ds-247420 .ds-toggle-knob {
-  width: 16px; height: 16px; border-radius: 50%;
-  background: var(--fg-3);
-  transition: transform var(--dur-snap) var(--ease), background-color var(--dur-snap) var(--ease);
-}
-.ds-247420 .ds-toggle[aria-checked="true"] {
-  background: var(--accent-ink); border-color: var(--accent-ink);
-}
-.ds-247420 .ds-toggle[aria-checked="true"] .ds-toggle-knob {
-  background: var(--panel-0, var(--bg));
-  transform: translateX(18px);
-}
-.ds-247420 .ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
-.ds-247420 .ds-toggle:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-.ds-247420 .ds-toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
-.ds-247420 .ds-toggle-row .ds-toggle-label { color: inherit; }
+   Canonical definition lives in editor-primitives.css alongside the rest of
+   the .ds-check/.ds-radio/.ds-toggle form-primitive family (that file loads
+   AFTER this one in the build.mjs concat order, so a second .ds-toggle block
+   here was dead weight that silently lost the cascade while still disagreeing
+   on size/colors/knob-offset with the surviving rule — a duplicate-source-of-
+   -truth foot-gun, not an intentional override). Removed; see
+   editor-primitives.css's ".ds-toggle" block for track/knob/disabled/focus. */
 
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
@@ -4968,6 +5294,15 @@
    button) - transparent to any flex/grid layout the bare input previously
    sat in directly. */
 .ds-247420 .ds-search-input-wrap { display: contents; }
+/* Leading-icon slot, matching .app-search's icon placement in Topbar so the
+   two search surfaces read as one control family instead of icon-vs-no-icon. */
+.ds-247420 .ds-search-field { position: relative; display: inline-flex; align-items: center; min-width: 0; }
+.ds-247420 .ds-search-field .ds-search-icon {
+  position: absolute; left: var(--space-3);
+  display: inline-flex; pointer-events: none;
+  color: var(--fg-3); opacity: 0.6;
+}
+.ds-247420 .ds-search-field .ds-search-input { padding-left: calc(var(--space-3) + 15px + var(--space-2)); }
 
 /* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
    ghost-icon treatment but sized to the kit's 44px touch-target floor
@@ -4989,7 +5324,7 @@
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-247420 .ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
-.ds-247420 .ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-247420 .ds-search-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 .ds-247420 .ds-field input:not(.input):focus-visible,
 .ds-247420 .ds-field textarea:not(.input):focus-visible,
@@ -5009,7 +5344,7 @@
 }
 .ds-247420 .ds-field input:not(.input)[aria-invalid="true"],
 .ds-247420 .ds-field textarea:not(.input)[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--danger);
 }
 
 /* Clear button for text inputs */
@@ -5314,9 +5649,11 @@
 .ds-247420 .ds-skeleton {
   background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
   background-size: 200% 100%;
-  animation: ds-shimmer 1.5s infinite;
   border-radius: var(--r-1);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .ds-247420 .ds-skeleton { animation: ds-shimmer 1.5s infinite; }
+}
 
 @keyframes ds-shimmer {
   0% { background-position: 200% 0; }
@@ -5586,10 +5923,26 @@
 /* Column resize handles: a thin keyboard-accessible separator pinned to the
    right edge of each chrome track; drag (or ArrowLeft/Right) writes a clamped
    inline --ws-*-w. */
-.ds-247420 .ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
-.ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
-.ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); }
+.ds-247420 .ws-resizer { position: relative; grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; display: flex; align-items: center; justify-content: center; }
+.ds-247420 .ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: var(--rule); opacity: 0.4; transition: background var(--dur-snap) var(--ease), opacity var(--dur-snap) var(--ease); }
+.ds-247420 .ws-resizer:hover::after, .ds-247420 .ws-resizer:focus-visible::after { background: var(--accent); opacity: 1; }
+/* Grip: a small pill of dots centered on the handle, visible at rest (low
+   contrast) so the resizer reads as a draggable affordance rather than an
+   invisible hit zone, then brightens to accent on hover/drag like the line. */
+.ds-247420 .ws-resizer::before {
+  content: ""; position: absolute; width: 4px; height: 20px; border-radius: var(--r-hair);
+  background-image: radial-gradient(circle, var(--fg-3) 1px, transparent 1px);
+  background-size: 4px 5px; background-repeat: repeat-y; background-position: center;
+  opacity: 0.5; transition: opacity var(--dur-snap) var(--ease), background-image var(--dur-snap) var(--ease);
+  pointer-events: none;
+}
+.ds-247420 .ws-resizer:hover::before, .ds-247420 .ws-resizer:focus-visible::before {
+  opacity: 1; background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
+}
 .ds-247420 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
+/* Active drag state: wider + fully opaque accent grip so the handle a
+   fast-moving pointer has left :hover on still visibly reads as "gripped". */
+.ds-247420 .ws-resizer.ws-resizer-active::after { background: var(--accent); width: 3px; }
 .ds-247420 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ds-247420 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ds-247420 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -5644,7 +5997,10 @@
 .ds-247420 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ds-247420 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ds-247420 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
-.ds-247420 .ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
+/* Wordmark treatment matches .brand (topbar.css) — same display family/weight/
+   tracking — so the rail brand reads as the SAME logotype as every other kit's
+   topbar wordmark instead of a lighter, differently-set imitation. */
+.ds-247420 .ws-rail-brand { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: var(--tr-tight); color: var(--fg); white-space: nowrap; overflow: hidden; }
 .ds-247420 .ws-rail-action {
   display: flex; align-items: center; gap: var(--space-2);
   padding: var(--space-2) var(--space-3); margin: var(--space-1) 0;
@@ -5876,7 +6232,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ds-247420 .ws-shell, .ds-247420 .ws-rail, .ds-247420 .ws-pane, .ds-247420 .ws-sessions, .ds-247420 .ws-scrim { transition: none; }
-  .ds-247420 .ws-resizer::after { transition: none; }
+  .ds-247420 .ws-resizer::after, .ds-247420 .ws-resizer::before { transition: none; }
 }
 
 /* ============================================================
@@ -6342,7 +6698,17 @@
     aspect-ratio: auto;
   }
 }
-.ds-247420 .ds-deck-slide { flex: 1; display: flex; min-width: 0; }
+.ds-247420 .ds-deck-slide {
+  flex: 1; display: flex; min-width: 0;
+  animation: ds-deck-slide-in var(--dur-base) var(--ease);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-247420 .ds-deck-slide { animation: none; }
+}
+@keyframes ds-deck-slide-in {
+  from { opacity: 0; transform: translateY(var(--space-1-75)); }
+  to { opacity: 1; transform: none; }
+}
 .ds-247420 .ds-deck-controls {
   /* 14px sits between --space-2-75 (12) and --space-3 (16) with no tier; it is
      the deck control spacing tuned against the mono glyph run. */
@@ -6353,6 +6719,19 @@
 @media (pointer: coarse) {
   .ds-247420 .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
 }
+/* Dot progress indicator: one dot per slide, current slide filled with
+   --accent (same fill token .ds-dot-on uses elsewhere in the system), rest
+   dim at --fg-3 so the row reads as a track, not a second counter. */
+.ds-247420 .ds-deck-progress {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--space-1-5); padding-bottom: var(--space-2);
+}
+.ds-247420 .ds-deck-dot {
+  width: var(--space-1-5); height: var(--space-1-5); border-radius: 50%;
+  background: var(--fg-3); flex: 0 0 auto;
+  transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
+}
+.ds-247420 .ds-deck-dot--active { background: var(--accent); transform: scale(1.3); }
 /* Kit small-label voice — one local composition of the house `.t-label` recipe
    (base.css) for every eyebrow/label in the appended kit blocks below. These
    previously each restated the four declarations with drifted tracking
@@ -6463,7 +6842,12 @@
 }
 .ds-247420 .ds-gallery-tile {
   cursor: pointer; display: flex; flex-direction: column; gap: var(--space-1-75);
-  padding: var(--space-2-75); border-radius: var(--r-1); min-height: clamp(120px, 18vw, 160px);
+  padding: var(--space-2-75); border-radius: var(--r-1);
+  /* Fixed aspect-ratio (not just a min-height floor) so every tile in the grid
+     occupies the same shape regardless of caption length — the ascii specimen
+     is centered inside via .ds-tile-cap's flex alignment, the equivalent of
+     object-fit: cover for a text tile with no bitmap to crop. */
+  aspect-ratio: 4 / 3;
   border: 0; text-align: left; font: inherit; color: inherit;
   background: var(--tile-tone, var(--panel-1));
   transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
@@ -6473,7 +6857,7 @@
    translateY + shadow idiom .chat-msg:hover .chat-bubble already uses. */
 .ds-247420 .ds-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
 .ds-247420 .ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-247420 .ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
+.ds-247420 .ds-gallery-tile--tight { aspect-ratio: 3 / 2; }
 /* The lightbox scrim/card chrome itself is now Dialog's (.ds-ep-dialog /
    .ds-ep-dialog-backdrop in editor-primitives.css) — Dialog already ships
    role="dialog", aria-modal, Tab-trap and focus-restore-on-close, which the
@@ -6497,13 +6881,21 @@
 @media (max-width: 480px) {
   .ds-247420 .ds-topbar-search { flex-basis: 100%; }
 }
-.ds-247420 .ds-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
+/* Namespaced .ds-kit-empty-state (not .ds-empty-state) -- .ds-empty-state is
+   primitives.css's shared base (padding var(--space-6), color var(--fg-3));
+   this sheet loads after it in app-shell.css's import order, so reusing the
+   same class name silently overrode that base's padding/color for every
+   consumer, defeating the "shared base, one place" contract primitives.css
+   documents. This block is unused by any component today, but kept
+   namespaced so a future consumer gets this sheet's fluid clamp() treatment
+   deliberately rather than by cascade accident. */
+.ds-247420 .ds-kit-empty-state { padding: clamp(var(--space-3), 5vw, var(--space-4)); text-align: center; color: var(--panel-text-3); }
 /* Fluid ICON size (empty-state mark), not a type tier: it scales with the
    viewport between 24 and 32px. Every fluid --fs-* tier is a heading clamp
    tuned to cqi + heading weight, so none of them substitutes here. */
-.ds-247420 .ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
-.ds-247420 .ds-empty-state-msg { margin: var(--space-1-75) 0; }
-.ds-247420 .ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
+.ds-247420 .ds-kit-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
+.ds-247420 .ds-kit-empty-state-msg { margin: var(--space-1-75) 0; }
+.ds-247420 .ds-kit-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
 
 /* --- system primer ------------------------------------------ */
 /* The three primer panels below share one fluid inset,
@@ -6892,6 +7284,7 @@
   border-radius: 50%; background: var(--bg-3); color: var(--fg);
   font-family: var(--ff-mono); font-weight: 600; text-transform: lowercase;
   letter-spacing: 0.02em; user-select: none; flex-shrink: 0; object-fit: cover;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 .ds-247420 .ds-avatar-sm { width: 24px; height: 24px; font-size: var(--fs-pico); }
 .ds-247420 .ds-avatar-md { width: 36px; height: 36px; font-size: var(--fs-micro); }
@@ -7019,6 +7412,7 @@
   font-weight: 600;
   line-height: 1;
   user-select: none;
+  box-shadow: inset 0 0 0 1px var(--rule);
 }
 
 /* Body stack — name + time on one baseline, text beneath. .chat-stack's
@@ -9454,6 +9848,9 @@
   font-size: var(--fs-sm);
 }
 .ds-247420 .vx-toggle { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }
+@media (pointer: coarse) {
+  .ds-247420 .vx-toggle { width: 24px; height: 24px; }
+}
 
 .ds-247420 .vx-queue {
   display: flex; align-items: center; gap: var(--space-2);
@@ -10205,7 +10602,7 @@
 .ds-247420 .ds-session-agent { font-size: var(--fs-tiny); color: var(--fg-3); }
 /* New-activity cue is a hollow accent RING so it stays shape-distinct from the
    running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
-.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
+.ds-247420 .ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); display: inline-block; flex: none; }
 .ds-247420 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-247420 .ds-session-state-error { color: var(--flame); }
 
@@ -12197,7 +12594,7 @@
     outline: var(--focus-w) solid var(--focus-color);
     outline-offset: var(--focus-offset);
 }
-.ds-247420 .ds-toggle:disabled { cursor: not-allowed; }
+.ds-247420 .ds-toggle:disabled { cursor: not-allowed; opacity: 0.5; }
 
 @media (prefers-reduced-motion: no-preference) {
     .ds-247420 .ds-toggle { transition: background var(--dur-base, 160ms) var(--ease), border-color var(--dur-base, 160ms) var(--ease); }
@@ -12555,6 +12952,7 @@
 }
 .ds-247420 .ov-emoji-tab:hover { background: var(--bg-2); }
 .ds-247420 .ov-emoji-tab[aria-selected="true"] { border-bottom-color: var(--accent); background: var(--bg-2); }
+.ds-247420 .ov-emoji-tab:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ds-247420 .ov-emoji-grid { overflow: auto; max-height: 220px; padding: var(--space-2, 8px); }
 .ds-247420 .ov-emoji-grid-inner { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-1, 4px); }
 .ds-247420 .ov-emoji-cell {
@@ -12563,8 +12961,12 @@
     border-radius: var(--r-1, 8px); cursor: pointer;
     display: inline-flex; align-items: center; justify-content: center;
 }
-.ds-247420 .ov-emoji-cell:hover, .ds-247420 .ov-emoji-cell:focus-visible {
-    background: color-mix(in oklab, var(--accent) 18%, transparent); outline: none;
+.ds-247420 .ov-emoji-cell:hover {
+    background: color-mix(in oklab, var(--accent) 18%, transparent);
+}
+.ds-247420 .ov-emoji-cell:focus-visible {
+    background: color-mix(in oklab, var(--accent) 18%, transparent);
+    outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px;
 }
 
 /* ---------------------------------------------------------------
@@ -12656,6 +13058,9 @@
 .ds-247420 .ov-set-control:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: 1px; border-color: var(--accent-ink); }
 .ds-247420 input.ov-set-control[type="range"] { padding: 0; accent-color: var(--accent); }
 .ds-247420 .ov-set-toggle { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
+@media (pointer: coarse) {
+    .ds-247420 .ov-set-toggle { width: 24px; height: 24px; }
+}
 .ds-247420 .ov-set-btn {
     width: 100%; appearance: none; cursor: pointer;
     background: var(--accent); color: var(--accent-fg);