anentrypoint-design 0.0.477 → 0.0.480

package/src/components/theme-toggle.js

@@ -67,11 +67,16 @@ export function ThemeToggle({ compact = false, onChange } = {}) {
                 el.setAttribute('title', titleFor(now));
                 const lab = el.querySelector('.ds-theme-toggle-label');
                 if (lab) lab.textContent = labelFor(now);
+                const disc = el.querySelector('.ds-theme-disc');
+                if (disc) disc.setAttribute('data-mode', now);
             })
         },
-        // CSS-drawn half-disc so the control still reads as the theme switch
-        // when the label is hidden (icon-only rail strip).
-        h('span', { class: 'ds-theme-disc', 'aria-hidden': 'true' }),
+        // CSS-drawn disc so the control still reads as the theme switch when
+        // the label is hidden (icon-only rail strip). data-mode selects a
+        // per-mode fill (solid light / solid dark / half-and-half for auto)
+        // so the icon itself — not just the title tooltip — shows current
+        // state at a glance.
+        h('span', { class: 'ds-theme-disc', 'data-mode': current, 'aria-hidden': 'true' }),
         h('span', { class: 'ds-theme-toggle-label' }, labelFor(current)));
     }
 

package/src/copy-code.js

@@ -0,0 +1,103 @@
+// copy-code.js -- vanilla-JS "copy" button injector for <pre><code> blocks.
+//
+// Standalone module, no dependencies, no framework assumptions: include it
+// with a plain <script src="…/copy-code.js"></script> (or type="module") on
+// any page rendering doc/code blocks and it wires itself up on
+// DOMContentLoaded, finding every `pre > code` element and injecting a small
+// button that copies the block's text to the clipboard.
+//
+// Self-invoking so a page can include it more than once without double-
+// registering handlers or double-injecting buttons (guarded per-element via
+// a data attribute).
+(function () {
+  'use strict';
+
+  const COPY_LABEL = 'copy';
+  const COPIED_LABEL = 'copied';
+  const FAILED_LABEL = 'copy failed';
+  const RESET_MS = 1500;
+  const MARK_ATTR = 'data-copy-code-wired';
+
+  function copyText(text) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(text);
+    }
+    // Fallback for non-secure contexts / browsers without navigator.clipboard.
+    return new Promise((resolve, reject) => {
+      try {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        const ok = document.execCommand('copy');
+        document.body.removeChild(ta);
+        ok ? resolve() : reject(new Error('execCommand copy failed'));
+      } catch (err) {
+        reject(err);
+      }
+    });
+  }
+
+  function makeButton(codeEl) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'copy-code-btn';
+    btn.textContent = COPY_LABEL;
+    btn.setAttribute('aria-label', 'copy code to clipboard');
+
+    let resetTimer = null;
+    btn.addEventListener('click', () => {
+      copyText(codeEl.textContent || '').then(
+        () => setLabel(true),
+        () => setLabel(false)
+      );
+    });
+
+    function setLabel(ok) {
+      btn.textContent = ok ? COPIED_LABEL : FAILED_LABEL;
+      clearTimeout(resetTimer);
+      resetTimer = setTimeout(() => { btn.textContent = COPY_LABEL; }, RESET_MS);
+    }
+
+    return btn;
+  }
+
+  function wireBlock(codeEl) {
+    const pre = codeEl.parentElement;
+    if (!pre || pre.tagName !== 'PRE') return;
+    if (pre.hasAttribute(MARK_ATTR)) return;
+    pre.setAttribute(MARK_ATTR, '1');
+    // Position context for an absolutely-positioned button; harmless no-op
+    // if the page's own CSS already sets a position on <pre>.
+    if (!pre.style.position) pre.style.position = 'relative';
+    pre.appendChild(makeButton(codeEl));
+  }
+
+  function wireAll(root) {
+    (root || document).querySelectorAll('pre > code').forEach(wireBlock);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => wireAll(document));
+  } else {
+    wireAll(document);
+  }
+
+  // Minimal default styling, injected once, so the button is usable even on
+  // pages with no bespoke .copy-code-btn rule of their own. A page that wants
+  // its own look can simply define .copy-code-btn in its own stylesheet --
+  // this only runs if that class isn't already styled to be visible.
+  if (!document.getElementById('copy-code-btn-style')) {
+    const style = document.createElement('style');
+    style.id = 'copy-code-btn-style';
+    style.textContent =
+      '.copy-code-btn{position:absolute;top:.5em;right:.5em;font:inherit;' +
+      'font-size:.75em;line-height:1;padding:.35em .6em;border:1px solid currentColor;' +
+      'border-radius:4px;background:transparent;color:inherit;cursor:pointer;opacity:.6}' +
+      '.copy-code-btn:hover{opacity:1}';
+    document.head.appendChild(style);
+  }
+})();

package/src/css/app-shell/base.css

@@ -75,6 +75,24 @@ body {
   scrollbar-width: thin;
   scrollbar-color: var(--bg-3) transparent;
 }
+/* Firefox gets themed scrollbars via scrollbar-width/-color above; Chrome,
+   Safari, and Edge need the ::-webkit-scrollbar family too, or every
+   scrollable node in the app shell falls back to the raw OS scrollbar and
+   clashes with the dark UI. Same selector scope, same --bg-3 token. */
+.app::-webkit-scrollbar, .ds-stage::-webkit-scrollbar,
+.app *::-webkit-scrollbar, .ds-stage *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.app::-webkit-scrollbar-track, .ds-stage::-webkit-scrollbar-track,
+.app *::-webkit-scrollbar-track, .ds-stage *::-webkit-scrollbar-track {
+  background: transparent;
+}
+.app::-webkit-scrollbar-thumb, .ds-stage::-webkit-scrollbar-thumb,
+.app *::-webkit-scrollbar-thumb, .ds-stage *::-webkit-scrollbar-thumb {
+  background: var(--bg-3);
+  border-radius: var(--r-pill, 999px);
+}
 
 h1, .t-h1 { font-family: var(--ff-display); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }
 h2, .t-h2 { font-family: var(--ff-display); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); font-weight: 600; margin: 0; }

package/src/css/app-shell/catalog-theme.css

@@ -41,6 +41,12 @@
 .ds-demo-label { font-size: var(--fs-xs); font-weight: 500; margin: 0 0 var(--space-1); }
 .ds-demo-desc { font-size: var(--fs-tiny); color: var(--fg-3); margin: 0 0 var(--space-2); }
 
+/* Per-preview backlink to the full token map/doc — names which token
+   families the specimen above it demonstrates, then links out to the
+   generated theme-map for the resolved values. */
+.tokens-backlink { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); margin-top: 2px; }
+.tokens-backlink a { color: inherit; }
+
 @media (max-width: 768px) {
   .ds-catalog { flex-direction: column; }
   .ds-catalog-side { width: 100%; height: auto; position: static; border-right: 0; border-bottom: var(--bw-hair) solid var(--rule); }
@@ -137,11 +143,23 @@
   font-family: var(--ff-mono); font-size: var(--fs-xs);
   display: inline-flex; align-items: center; gap: 6px;
 }
-/* CSS-drawn half-disc mark on the compact theme toggle: keeps the control
-   legible when its text label is hidden (icon-only rail strip). */
+/* CSS-drawn disc mark on the compact theme toggle: keeps the control
+   legible when its text label is hidden (icon-only rail strip). Per-mode
+   fill gives the icon itself a distinct look for auto/light/dark, so state
+   reads without relying on the title tooltip alone. */
 .ds-theme-disc {
   flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
   border: var(--bw-hair) solid var(--fg-3);
+  /* auto: half-and-half, matches default (no data-mode) for safety */
+  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
+}
+.ds-theme-disc[data-mode="auto"] {
   background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
 }
+.ds-theme-disc[data-mode="paper"] {
+  background: var(--bg); border-color: var(--fg-3);
+}
+.ds-theme-disc[data-mode="ink"] {
+  background: var(--fg-3); border-color: var(--fg-3);
+}
 

package/src/css/app-shell/chat-polish.css

@@ -69,6 +69,18 @@
   background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
   color: var(--mascot-deep);
 }
+/* Plain assistant turns ('them', no aicat persona) previously fell through to
+   the bare .chat-avatar gray disc with no role identity at all — 'you' and
+   'aicat' both got a tinted background + ring, the default assistant got
+   nothing. Give it the same tinted-background treatment via --color-success
+   (the conventional assistant/bot association, distinct from the accent hue
+   'you' owns and the mascot hue 'aicat' owns) plus a thin identity ring so
+   role is readable from the avatar alone, not just bubble position/color. */
+.chat-msg.them:not(.aicat) .chat-avatar {
+  background: color-mix(in oklab, var(--color-success) 20%, var(--bg-3));
+  color: color-mix(in oklab, var(--color-success) 65%, var(--fg));
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-success) 35%, transparent);
+}
 
 .chat-stack {
   display: flex; flex-direction: column; gap: var(--space-1);

package/src/css/app-shell/collab.css

@@ -79,6 +79,11 @@
   border-radius: var(--r-pill);
   background: var(--bg-2);
 }
+/* .ds-collab-chip-avatar (24px identity circle) and .ds-collab-chip-status
+   (8px status dot) below are both circular via border-radius: 50% but are
+   intentionally distinct: different sizes, different content (initial vs.
+   plain fill), different positioning role (layout box vs. absolute badge).
+   Not extracting a shared class -- there's nothing substantive to share. */
 .ds-collab-chip-avatar {
   position: relative;
   width: 24px;

package/src/css/app-shell/data-density.css

@@ -14,6 +14,10 @@
 
 /* PhaseWalk */
 .ds-phasewalk { display: inline-flex; gap: var(--space-hair); vertical-align: middle; }
+/* NOTE: a second toggle-switch-shaped implementation exists in
+   plugins-config.css:91 (.ds-plugins-toggle) at a different scale (40x22 vs
+   this 18x10) — consider consolidating into a shared .ds-switch primitive
+   with a size modifier. */
 .ds-phasewalk-seg {
   width: 18px; height: 10px; border-radius: var(--r-hair);
   background: var(--bg-3); position: relative;

package/src/css/app-shell/files.css

@@ -263,6 +263,12 @@
   display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
   gap: var(--space-3); align-items: start;
 }
+/* Mobile fallback: auto-fill can still pack 2 cramped columns down to ~320px
+   viewports; force a single column below the shared mobile breakpoint
+   (docs/responsive.md) so thumbnails and file rails always read as a list. */
+@media (max-width: 480px) {
+  .ds-file-grid-thumb { grid-template-columns: 1fr; }
+}
 .ds-file-cell {
   position: relative;
   background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
@@ -729,7 +735,7 @@
 .ds-preview-code::-webkit-scrollbar,
 .ds-preview-text::-webkit-scrollbar,
 .ds-preview-body::-webkit-scrollbar,
-.ds-modal-body::-webkit-scrollbar { width: 10px; height: 10px; }
+.ds-modal-body::-webkit-scrollbar { width: 8px; height: 8px; }
 .ds-preview-code::-webkit-scrollbar-thumb,
 .ds-preview-text::-webkit-scrollbar-thumb {
   background: color-mix(in oklab, var(--paper) 28%, transparent);

package/src/css/app-shell/hero-content.css

@@ -88,6 +88,18 @@
   display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
   justify-content: flex-start; margin-top: var(--space-hair, 4px);
 }
+/* Hero CTA labels are content-driven (e.g. "GitHub", proper nouns from
+   home.yaml) and the site's voice is deliberately all-lowercase everywhere
+   else. Force the rendered case here rather than hand-lowercasing every
+   proper-noun label at the content layer, so a future CTA label doesn't
+   silently reintroduce Title Case. */
+.ds-hero-actions .btn { text-transform: lowercase; }
+/* Filter input above the homepage's "ui kits" panel — reuses the same
+   .input token the search kit's own topbar query box uses, just placed
+   inline above the panel instead of in a topbar slot. */
+.ds-kits-panel-wrap { display: flex; flex-direction: column; gap: var(--space-2, 10px); }
+.ds-kits-filter { display: flex; }
+.ds-kits-filter-input { width: 100%; max-width: 32ch; }
 /* Below this width the aside card's own internal rhythm (stat rows still
    stacked vertically at full width) is already correct for a narrow column —
    no separate breakpoint override needed now that .ds-hero is always a
@@ -167,6 +179,7 @@
   white-space: nowrap; will-change: transform;
   animation: ds-marquee-run 28s linear infinite;
 }
+.ds-marquee-run { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-marquee-item { display: inline-flex; align-items: center; gap: var(--space-5); }
 .ds-marquee-sep { color: var(--accent-ink); }
 .ds-marquee:hover .ds-marquee-track,
@@ -487,7 +500,7 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
    Form
    ============================================================ */
 .row-form {
-  display: grid; gap: 12px;
+  display: grid; gap: var(--space-2-75);
   padding: var(--space-5);
   background: var(--bg-2);
   border-radius: var(--r-3);

package/src/css/app-shell/kits-appended.css

@@ -451,6 +451,11 @@
 .ds-btn-row-tight { gap: var(--space-1-75, 6px); }
 .ds-key-input { flex: 1 1 160px; min-width: 0; font-family: var(--ff-mono); }
 .ds-toggle-btn { min-width: 78px; }
+/* Side-by-side checked/unchecked reference pair (settings kit theme panel) --
+   documents the visual difference between states in one static, non-live
+   spot rather than requiring a viewer to toggle a real control back and
+   forth to compare. */
+.ds-toggle-state-sample { display: flex; align-items: center; gap: var(--space-1-5, 6px); }
 .ds-toggle-label { margin-left: var(--space-2, 8px); color: inherit; opacity: 0.7; }
 .ds-btn-warn { color: var(--warn); }
 /* Raw --mascot text measures 3.11:1 on paper (fails 4.5:1); --mascot-deep is
@@ -593,6 +598,14 @@
   display: flex; flex-direction: column; gap: 0;
   background: var(--ink); border-radius: var(--r-1);
   font-family: var(--ff-mono); font-size: var(--fs-micro); line-height: 1.65;
+  /* Responsive strategy for long logs: cap the scrollback height and scroll
+     vertically rather than growing the page indefinitely; long command/output
+     lines wrap (see .cli .cmd's overflow-wrap: anywhere below) instead of
+     scrolling horizontally, so wrapping is the chosen default over
+     horizontal scroll for this kit. */
+  max-height: 60vh;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
 }
 /* .cli is authored in hero-content.css as a STANDALONE hero code block --
    20px/24px padding, --fs-lg type, --r-3 radius and its own --ink background

package/src/css/app-shell/loading-alerts.css

@@ -2,15 +2,16 @@
 /* ============================================================
    Spinner — animated loading indicator
    ============================================================ */
+/* Dots spinner — use for small inline/compact loading states. */
 .ds-spinner {
   display: inline-flex;
-  gap: 4px;
+  gap: var(--space-1);
   align-items: center;
   height: 16px;
 }
 .ds-spinner span {
-  width: 4px;
-  height: 4px;
+  width: var(--space-1);
+  height: var(--space-1);
   border-radius: 50%;
   background: var(--accent);
 }
@@ -21,17 +22,17 @@
   .ds-spinner span:nth-child(3) { animation-delay: 0.36s; }
 }
 
-.ds-spinner-lg { height: 24px; gap: 6px; }
-.ds-spinner-lg span { width: 6px; height: 6px; }
+.ds-spinner-lg { height: 24px; gap: var(--space-1-75); }
+.ds-spinner-lg span { width: var(--space-1-75); height: var(--space-1-75); }
 
-.ds-spinner-sm { height: 12px; gap: 2px; }
-.ds-spinner-sm span { width: 2px; height: 2px; }
+.ds-spinner-sm { height: 12px; gap: var(--space-hair); }
+.ds-spinner-sm span { width: var(--space-hair); height: var(--space-hair); }
 
 .ds-spinner-xs { height: 8px; gap: 1px; }
 .ds-spinner-xs span { width: 1.5px; height: 1.5px; }
 
-.ds-spinner-xl { height: 32px; gap: 8px; }
-.ds-spinner-xl span { width: 8px; height: 8px; }
+.ds-spinner-xl { height: 32px; gap: var(--space-2); }
+.ds-spinner-xl span { width: var(--space-2); height: var(--space-2); }
 
 @keyframes ds-bounce {
   0%, 80%, 100% { transform: translateY(0); }
@@ -81,7 +82,7 @@
   flex-shrink: 0;
   color: var(--alert-tone);
   font-weight: 600;
-  min-width: 20px;
+  min-width: var(--space-3-5);
   text-align: center;
 }
 
@@ -110,11 +111,12 @@
   cursor: pointer;
   color: var(--fg-3);
   padding: 0;
-  font-size: 14px;
+  font-size: var(--fs-xs);
   line-height: 1;
-  min-width: 20px;
+  min-width: var(--space-3-5);
   text-align: center;
   transition: color var(--dur-snap) var(--ease);
 }
 .ds-alert-dismiss:hover { color: var(--fg); }
+.ds-alert-dismiss:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 

package/src/css/app-shell/otp-input.css

@@ -17,11 +17,11 @@
 .ds-otp-box:focus-visible {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);
+  box-shadow: var(--focus-ring-inset);
 }
 .ds-otp-box-filled { border-color: var(--rule-strong); background: var(--bg-3); }
 .ds-otp-box-error { border-color: var(--red); }
-.ds-otp-box-error:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 40%, transparent); }
+.ds-otp-box-error:focus-visible { box-shadow: var(--focus-ring-inset); }
 .ds-otp-box:disabled { opacity: 0.5; cursor: default; }
 
 @media (prefers-reduced-motion: reduce) {

package/src/css/app-shell/panel-row.css

@@ -73,6 +73,13 @@
   margin: 0; font: inherit; font-size: inherit; font-weight: inherit;
   letter-spacing: inherit; text-transform: inherit; color: inherit;
 }
+/* Category glyph beside a panel title (kits / previews / decks / docs on the
+   homepage) — same inline-svg vocabulary as icons.js, sized to sit on the
+   text baseline rather than dominating it. */
+.ds-panel-title-glyph {
+  display: inline-flex; align-items: center; gap: var(--space-1-5, 6px);
+}
+.ds-panel-title-glyph .ds-icon { flex-shrink: 0; color: var(--fg-3); }
 .panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
 .panel-body > * { margin: 0; }
 /* One-line explanatory caption under a panel's title — e.g. distinguishing
@@ -113,6 +120,14 @@
   transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring);
 }
 .row + .row { margin-top: 2px; }
+/* Mobile tap-target floor: at compact/comfortable density on a touch
+   viewport the padding-only row height can fall under the 44px effective
+   tap target (WCAG 2.5.5), especially at [data-density="compact"] (0.75x).
+   Force a min-height on narrow/coarse-pointer viewports only, so the dense
+   desktop mono/list layout (file-row, index-row) is untouched above 640px. */
+@media (max-width: 640px), (pointer: coarse) {
+  .row, a.row, button.row, .row[role="button"] { min-height: 44px; }
+}
 /* Interactive rows (anchor/button wrappers) get a hairline lift on hover,
    matching the btn/panel elevation language — non-interactive rows (plain
    divs used as static list items) are unaffected since the selector needs a

package/src/css/app-shell/plugins-config.css

@@ -87,6 +87,9 @@
 }
 .ds-plugins-version { font-size: var(--fs-micro); color: var(--fg-3); }
 
+/* NOTE: a second toggle-switch implementation exists in data-density.css:18
+   (.ds-phasewalk-seg) at a different scale (18x10 vs this 40x22) — consider
+   consolidating into a shared .ds-switch primitive with a size modifier. */
 .ds-plugins-toggle {
   flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; border: none; padding: 0;
   background: var(--rule); position: relative; cursor: pointer;

package/src/css/app-shell/primitives.css

@@ -22,7 +22,7 @@
 }
 .btn-primary:hover { background: var(--fg); color: var(--green); transform: translateY(-1px); box-shadow: var(--shadow-2); }
 .btn-ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
-.btn-ghost:hover { background: var(--fg); color: var(--bg); transform: translateY(-1px); }
+.btn-ghost:hover { background: color-mix(in oklab, var(--fg) 12%, transparent); transform: translateY(-1px); }
 .btn:active, .btn-primary:active, .btn-ghost:active { transform: translateY(1px); box-shadow: none; }
 .btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible, .ds-icon-btn:focus-visible {
   outline: var(--focus-w) solid var(--focus-color);
@@ -54,7 +54,9 @@
   border-radius: var(--r-1, 6px);
   background: transparent; color: var(--fg);
   width: 32px; height: 32px;
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
+.ds-icon-btn:hover { background: var(--bg-2); }
 .ds-icon-btn-xs { width: 22px; height: 22px; }
 .ds-icon-btn-sm { width: 26px; height: 26px; }
 .ds-icon-btn-base { width: 32px; height: 32px; }
@@ -64,7 +66,10 @@
 .ds-icon-btn-ghost:hover { background: var(--fg); color: var(--bg); }
 .ds-icon-btn-primary { background: var(--accent); color: var(--accent-fg); }
 .ds-icon-btn-primary:hover { background: var(--fg); color: var(--accent-ink); }
-.ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
+/* --ink, not --on-color: --on-color is a fixed #fff, which measures 3.07:1 on
+   --warn (#FF5A52) -- below the 4.5:1 AA floor. --ink measures 6.27:1. Same
+   fix as .btn-primary.danger in app-shell/files.css. */
+.ds-icon-btn-danger { background: var(--warn); color: var(--ink); }
 .ds-icon-btn-danger:hover { filter: brightness(0.92); }
 .ds-icon-btn:active { transform: translateY(1px); }
 .ds-icon-btn:disabled, .ds-icon-btn.is-disabled {
@@ -78,7 +83,7 @@
   border-radius: var(--r-pill);
   background: var(--bg-3); color: var(--fg-2);
 }
-.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
+.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: var(--fs-pico); }
 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
 .ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
@@ -95,7 +100,7 @@
   background: var(--sun); color: var(--ink);
 }
 .ds-badge.tone-blue    { background: var(--accent-tint); color: var(--accent-ink); }
-.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
+.ds-badge.tone-orange  { background: color-mix(in oklab, var(--flame) 22%, var(--bg)); color: color-mix(in oklab, var(--flame) 65%, black); }
 
 .chip {
   display: inline-flex; align-items: center; gap: var(--space-1-75);
@@ -163,6 +168,10 @@
 .ds-pill.tone-accent { background: var(--accent-tint); color: var(--accent-ink); }
 .ds-pill.tone-muted  { background: transparent; color: var(--fg-3); box-shadow: inset 0 0 0 1px var(--rule); }
 
+/* .glyph-* sizes (14/18/22px) are for small inline text-adjacent glyphs
+   (single characters/icons sitting in a text flow), a different scale and
+   purpose than the .ds-icon-btn-* tap-target scale (22/26/32/40/48px) below --
+   the -sm/-lg naming overlap is coincidental, not a shared system. */
 .glyph {
   display: inline-flex; align-items: center; justify-content: center;
   width: 18px; height: 18px;

package/src/css/app-shell/responsive.css

@@ -3,6 +3,19 @@
    Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
    ============================================================ */
 
+/* Breakpoint reference (CSS custom properties can't be used in @media queries,
+   so these are documented here for consistency — always use these exact values):
+   - Mobile/tablet boundary: 768px (max-width) — used for compact nav/sidebar
+     collapse (catalog-theme.css, sidebar-misc.css). Note: kits-appended.css
+     uses 760px for the same kind of collapse in a few places — a near-miss
+     of this value, worth aligning to 768px when touched.
+   - Tablet/desktop boundary: 900px (max-width) / 901px (min-width) — used for
+     main layout reflow (hero-content.css, responsive2-workspace.css)
+   - Legacy tablet band: 481px–1024px (min-width 481px / max-width 1025px) —
+     used in this file (responsive.css) for a specific tablet treatment,
+     consider migrating to the 768/900 pair
+*/
+
 /* --------------------------------------------------------------------
    Mobile Portrait Breakpoint (480px and below)
    ---------------------------------------------------------------------- */

package/src/css/app-shell/responsive2-workspace.css

@@ -281,7 +281,9 @@
 .ws-rail-item:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
 .ws-rail-item.active { background: var(--accent-tint); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
 .ws-rail-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
-.ws-rail-item-count { font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-3); }
+/* Shape/color come from the shared .ds-badge component (see app-shell/primitives.css);
+   this class is now just the rail-item layout hook (spacing, collapsed-state targeting). */
+.ws-rail-item-count { flex: none; margin-inline-start: var(--space-1); }
 .ws-rail-item-flag { width: 6px; height: 6px; border-radius: 50%; flex: none; }
 .ws-rail-item-flag.tone-flame { background: var(--flame); box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 38%, transparent); }
 .ws-rail-foot { margin-top: auto; padding-top: var(--space-2); border-top: var(--bw-hair) solid var(--bg-3); }
@@ -324,6 +326,7 @@
    because the chat thread carries its own --measure gutter. */
 .ws-main { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
 .ws-main.ws-main--flush { padding: 0; }
+/* Non-interactive scroll region (content column), not a focusable control — outline intentionally suppressed. */
 .ws-main:focus { outline: none; }
 
 /* Right context pane */

package/src/css/app-shell/row-print.css

@@ -71,5 +71,39 @@
   .ds-live-log { height: auto; max-height: none; overflow: visible; }
   .ds-stat, .kpi-card { border: 1px solid var(--rule); }
   .ds-session-row { break-inside: avoid; }
+
+  /* Receipt table (Receipt() in src/components/content/panel.js, `.kv`) — the
+     project_page kit's "receipt" section, and any other kv-table consumer.
+     On screen it inherits panel/token colors that can render as near-white
+     text on a printer's assumed-white page background if the browser's
+     "background graphics" print option is off (the common default); force
+     the LIGHT-theme ink/paper tokens (real print-page colors, not a raw
+     literal — --ink/--paper are the same "true black text on true white
+     page" values the light theme already defines) and visible cell borders
+     so it stays legible without relying on background-graphics printing at
+     all. break-inside:avoid keeps a receipt from splitting a row across a
+     page boundary. */
+  .kv { border-collapse: collapse; width: 100%; color: var(--ink); background: var(--paper); }
+  .kv tr { break-inside: avoid; }
+  .kv td { border: 1px solid var(--paper-3); padding: 4px 8px; color: var(--ink); }
+
+  /* Any button/interactive-only affordance still present inside otherwise-
+     printable content (copy buttons, expand/collapse toggles, filter pills,
+     the receipt/doc section's own action row) is chrome, not content. */
+  .btn, .btn-primary, .btn-ghost, .row-act, .ds-filter-pills,
+  .app-search, input[type="search"] { display: none; }
+
+  /* Force real ink-on-paper for body copy: panel/fg tokens are tuned for
+     screen surfaces (including dark theme, where --panel-text can resolve
+     near-white) and a printer defaults to a white page regardless of
+     data-theme, so an unconverted dark-theme page would print near-invisible
+     text without this override. Same --ink/--paper light-theme pair as the
+     receipt table above, not a second raw literal. */
+  /* No !important: source order already wins here (this rule is the last
+     word inside its own @media print block, same as every other override in
+     this file), and an unconditional !important on `body` would beat even a
+     future print-specific consumer override with higher specificity. */
+  html body, .app-main, .page-body, .ds-lede { color: var(--ink); background: var(--paper); }
+  a { color: var(--ink); text-decoration: underline; }
 }