anentrypoint-design 0.0.322 → 0.0.324

package/app-shell.css

@@ -1,4782 +1,24 @@
-/* ============================================================
-   247420 design system — component sheet
-   "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.
-   ============================================================ */
-
-/* ============================================================
-   Base
-   ============================================================ */
-* { box-sizing: border-box; }
-html, body { margin: 0; padding: 0; }
-button, input, select, textarea { font: inherit; }
-
-/* ============================================================
-   Accessibility — Skip Link
-   ============================================================ */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  background: var(--accent);
-  color: var(--accent-fg);
-  padding: 8px 16px;
-  text-decoration: none;
-  z-index: 100;
-  border-radius: var(--r-pill);
-  font-weight: 600;
-  font-size: var(--fs-sm);
-}
-.skip-link:focus {
-  top: 10px;
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-body {
-  background: var(--bg);
-  color: var(--fg);
-  font-family: var(--ff-body);
-  font-size: var(--fs-body);
-  line-height: var(--lh-base);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-}
-/* Light (paper, the default theme) needs a stronger accent share than dark to
-   clear a visible selection tint against --bg-2 -- the dark-theme value (24%)
-   read too weak on paper. Dark/ink keeps its existing 24% mix, restored below
-   in the ink/dark + auto-dark blocks (mirrors the --danger/--flame pattern of
-   scoping a value per theme rather than sharing one across both). */
-::selection { background: color-mix(in oklab, var(--accent) 46%, var(--bg-2)); color: var(--fg); }
-
-/* Every root has a CQ container so fluid type can resolve to a meaningful inline-size. */
-.app, .ds-stage {
-  container-type: inline-size;
-  overflow-x: clip;
-  min-width: 0;
-}
-.app * { min-width: 0; }
-
-/* ============================================================
-   Typography
-   ============================================================ */
-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; }
-h3, .t-h3 { font-family: var(--ff-display); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em;          font-weight: 600; margin: 0; }
-h4, .t-h4 { font-family: var(--ff-display); font-size: var(--fs-h4); line-height: var(--lh-snug);                                  font-weight: 600; margin: 0; }
-
-/* App/chrome typescale opt-in: compact heading ceiling for application UIs. */
-[data-typescale="app"] h1, [data-typescale="app"] .t-h1 { font-size: var(--fs-h1-app); line-height: 1.15; }
-[data-typescale="app"] h2, [data-typescale="app"] .t-h2 { font-size: var(--fs-h2-app); }
-[data-typescale="app"] h3, [data-typescale="app"] .t-h3 { font-size: var(--fs-h3-app); }
-[data-typescale="app"] h4, [data-typescale="app"] .t-h4 { font-size: var(--fs-h4-app); }
-
-.t-hero    { font-family: var(--ff-display); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
-.t-mega    { font-family: var(--ff-display); font-size: var(--fs-mega); line-height: 0.92;            letter-spacing: var(--tr-tighter); font-weight: 700; margin: 0; }
-
-.t-display { font-family: var(--ff-display); font-weight: 600; letter-spacing: var(--tr-tight); }
-.t-mono    { font-family: var(--ff-mono); }
-.t-body    { font-family: var(--ff-body); }
-
-.t-label   { font-family: var(--ff-mono); font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: var(--tr-label); font-weight: 500; }
-.t-micro   { font-family: var(--ff-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--fg-3); }
-.t-meta    { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--fg-3); }
-
-.lede, .t-lede {
-  font-family: var(--ff-body); font-size: var(--fs-xl);
-  line-height: var(--lh-tall); max-width: 38ch; font-weight: 400; color: var(--fg-2);
-  margin: 0;
-}
-
-.eyebrow {
-  font-family: var(--ff-mono);
-  font-size: var(--fs-tiny);
-  font-weight: 600;
-  letter-spacing: var(--tr-label);
-  text-transform: uppercase;
-  color: var(--accent-ink);
-  display: inline-flex; align-items: center; gap: 12px;
-}
-/* Editorial kicker mark — a short solid ink rule, the print-byline tell. */
-.eyebrow::before {
-  content: '';
-  width: 28px; height: 3px; background: currentColor;
-}
-
-.ds-prose {
-  font-family: var(--ff-body);
-  font-size: var(--fs-lg);
-  line-height: var(--lh-long);
-  max-width: var(--measure);
-  text-wrap: pretty;
-}
-.ds-prose p  { margin: 0 0 var(--space-4); }
-.ds-prose h1 { font-size: clamp(34px, 5.4cqi, 64px); margin-bottom: var(--space-3); }
-.ds-prose h2 { margin: var(--space-6) 0 var(--space-3); }
-.ds-prose h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-lg); font-weight: 600; }
-
-.dim { color: var(--fg-3); }
-
-/* Links */
-a { color: inherit; text-decoration: none; }
-a.ds-link-accent, .ds-prose a {
-  color: var(--accent-ink);
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 2px;
-}
-a.ds-link-accent:hover, .ds-prose a:hover {
-  background: var(--accent); color: var(--accent-fg); text-decoration-color: transparent;
-}
-
-kbd {
-  font-family: var(--ff-mono); font-size: 0.85em;
-  background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-1);
-}
-
-code {
-  font-family: var(--ff-mono); font-size: 0.92em;
-  background: var(--bg-2); padding: 0.15em 0.5em; border-radius: var(--r-1);
-}
-
-pre {
-  font-family: var(--ff-mono);
-  background: var(--panel-bg);
-  color: var(--panel-text, inherit);
-  padding: var(--space-5);
-  overflow-x: auto;
-  line-height: 1.55;
-  font-size: var(--fs-sm);
-  margin: 0;
-  border-radius: var(--r-3);
-}
-pre .k { color: var(--code-str-alt, var(--mascot)); }
-pre .s { color: var(--code-string, var(--green)); }
-pre .c { color: var(--fg-3); }
-pre .n { color: var(--code-num); }
-
-/* ============================================================
-   AppShell — page frame. The topbar floats above a soft background;
-   the body sits inside a rounded inner shell for a friendlier feel.
-   ============================================================ */
-.app {
-  display: flex; flex-direction: column;
-  /* Offset parent for the sidebar drawer/scrim/toggle, which are absolute so
-     they overlay THIS shell (a thebird WM window) rather than the viewport. */
-  position: relative;
-  min-height: 100vh;
-  /* Definite height so the flex column resolves height:100% for descendants
-     (e.g. a full-height chat) at every breakpoint, not just where a desktop
-     media override happened to set explicit heights. dvh tracks mobile chrome. */
-  min-height: 100dvh;
-  height: 100dvh;
-  background: var(--bg);
-  color: var(--fg);
-  /* Notched-device safe area padding (no-op on devices without notches) */
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
-
-/* When the app shell is embedded inside a windowed surface (e.g. the freddie
-   dashboard mounted in a WM window via .fd-root) it is NOT a full-page app:
-   `min-height:100vh` and the absence of an explicit width make it collapse to
-   0 width at desktop, where the responsive single-column @media rules don't
-   apply. Inside .fd-root it must fill its container instead. (At <=767px the
-   grid already linearizes, which is why the bug only showed at desktop width.) */
-.fd-root .app { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; }
-.fd-root .app-body { min-width: 0; }
-
-/* Full-bleed canvas host (e.g. a game/3D viewport that fills the page behind the
-   shell): the shell's opaque var(--bg) would paint OVER the canvas and hide it.
-   Mark the host with `canvas-host` to make the shell surfaces transparent so the
-   live canvas shows through. The canvas itself is the backdrop. */
-.canvas-host,
-.canvas-host .app,
-body.canvas-host { background: transparent !important; }
-
-:root {
-  --app-status-h: 26px;
-  --app-topbar-h: var(--size-lg);
-  --app-crumb-h: var(--size-sm);
-}
-
-.app-topbar {
-  position: sticky; top: 0; z-index: var(--z-header);
-  display: flex; flex-wrap: wrap;
-  align-items: center; gap: var(--space-4);
-  min-height: var(--app-topbar-h);
-  padding: 10px var(--pad-x);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
-}
-
-/* Merged chrome: when AppShell gets both a topbar and a crumb it wraps them
-   in .app-chrome and they share ONE sticky band instead of stacking as two
-   bars. The breadcrumb provides the left identity (it already begins with the
-   brand), so the topbar's standalone brand is hidden to avoid showing the name
-   twice; nav and the crumb's right slot sit together on the right. */
-.app-chrome {
-  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);
-  background: color-mix(in oklab, var(--bg) 97%, transparent);
-}
-.app-chrome > .app-topbar,
-.app-chrome > .app-crumb {
-  position: static; background: none; backdrop-filter: none;
-  -webkit-backdrop-filter: none; padding: 0; min-height: 0;
-  flex: 1 1 auto;
-}
-.app-chrome > .app-crumb { order: 1; flex: 1 1 auto; }
-.app-chrome > .app-topbar { order: 2; flex: 0 0 auto; }
-.app-chrome > .app-topbar > .brand { display: none; }
-.app-chrome > .app-topbar > nav { margin-left: 0; }
-.app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
-.app-topbar > .brand { flex: 0 0 auto; }
-.app-topbar > .app-search { flex: 1 1 auto; }
-.app-topbar > nav { margin-left: auto; }
-.app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
-.app-topbar nav a { flex: 0 0 auto; }
-.app-topbar nav a {
-  color: var(--fg-2);
-  /* Dense desktop chrome (was a 44px pill with 12px 14px pad — marketing-scale
-     touch target in the top bar). Matches the .app-side a treatment: ~34px,
-     --r-1 rounded rect, tighter padding. The 44px tap target is restored under
-     @media(pointer:coarse) (the existing .app-topbar nav a rule further down). */
-  padding: var(--space-2) var(--space-2-5);
-  min-height: 34px;
-  display: flex;
-  align-items: center;
-  border-radius: var(--r-1);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.app-topbar nav a:hover { background: var(--bg-2); color: var(--fg); }
-.app-topbar nav a:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-/* Active tab reads as a subtle tinted pill with an accent underline rather than
-   an oversized filled oval that sits taller than its inactive siblings and reads
-   as misaligned. Same height as the inactive links — only the tint + underline
-   change. */
-.app-topbar nav a.active {
-  color: var(--accent-ink);
-  background: color-mix(in oklab, var(--accent) 16%, transparent);
-  box-shadow: inset 0 -2px 0 0 var(--accent);
-  font-weight: 600;
-}
-
-.brand {
-  font-family: var(--ff-display);
-  font-weight: 700; font-size: var(--fs-lg);
-  letter-spacing: var(--tr-tight);
-}
-/* The wordmark separator printed in the electric lead — the brand tell. */
-.brand .slash { color: var(--accent-ink); font-weight: 700; margin: 0 3px; }
-
-.app-search {
-  display: inline-flex; align-items: center; gap: var(--space-2-5);
-  /* Snap to the single-line control ladder (--field-height == --ctl-md, 34px,
-     density-scaled) so the topbar search aligns with sibling topbar controls and
-     shrinks under [data-density]. Was raw 9px 16px padding off the ladder — the
-     one front-door input the control-height port missed. */
-  height: var(--field-height);
-  padding: 0 var(--space-3); background: var(--bg-2);
-  border-radius: var(--r-pill);
-  font-size: var(--fs-sm); color: var(--fg-3);
-  max-width: 360px;
-}
-.app-search .icon { opacity: 0.6; }
-.app-search input {
-  border: 0; background: transparent;
-  font-family: inherit; font-size: inherit; color: var(--fg);
-  width: 100%;
-}
-.app-search:focus-within {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-
-.app-crumb {
-  min-height: var(--app-crumb-h);
-  padding: 6px var(--pad-x);
-  display: flex; align-items: center; gap: 8px;
-  font-size: var(--fs-sm); color: var(--fg-3);
-}
-.app-crumb .sep { opacity: 0.5; }
-.app-crumb .leaf { color: var(--fg); font-weight: 600; }
-.app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); }
-
-.app-side-shell { background: var(--bg); }
-.app-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch; align-content: stretch; flex: 1; min-height: 0; }
-.app-body.no-side { grid-template-columns: minmax(0, 1fr); }
-/* When there is no sidebar, the empty side-shell must not occupy a grid row,
-   otherwise main wraps to a second (collapsed) row. Remove it from layout. */
-.app-body.no-side .app-side-shell { display: none; }
-
-.app-side {
-  display: flex; flex-direction: column; gap: var(--space-4);
-  padding: var(--space-5) var(--space-3);
-  font-size: var(--fs-sm);
-}
-.app-side .group {
-  font-size: var(--fs-xs); font-weight: 600;
-  color: var(--fg-3); padding: 0 var(--space-3);
-  margin-bottom: 6px;
-}
-.app-side a {
-  display: grid; grid-template-columns: 18px 1fr auto;
-  gap: var(--space-2-5); align-items: center;
-  /* Dense rounded-rect nav row (was a 44px pill with 12px 14px padding — tall
-     and consumer-shaped). A --r-1 rounded rect at ~34px reads as compact app
-     chrome; the full 44px touch target is restored under pointer:coarse below. */
-  padding: var(--space-2) var(--space-2-5);
-  min-height: 34px;
-  border-radius: var(--r-1);
-  color: var(--fg-2);
-  margin-bottom: 2px;
-}
-@media (pointer: coarse) {
-  .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); }
-}
-.app-side a:hover { background: var(--bg-2); color: var(--fg); }
-.app-side a:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-.app-side a.active {
-  color: var(--accent-fg);
-  background: var(--accent);
-  font-weight: 600;
-}
-.app-side .count {
-  background: color-mix(in oklab, var(--fg) 10%, transparent);
-  color: var(--fg-2);
-  padding: 3px 10px; font-size: var(--fs-micro); font-weight: 700;
-  border-radius: var(--r-pill);
-}
-/* The lime active pill is the sidebar's one accent moment; its own count
-   chip rides the ink-on-accent pair instead of a second competing hue. */
-.app-side a.active .count {
-  background: color-mix(in oklab, var(--accent-fg) 82%, transparent);
-  color: var(--accent);
-}
-
-.app-main {
-  padding: var(--space-5) var(--pad-x) 0;
-  min-width: 0;
-  /* Full-height flex column so a single flex:1 child (e.g. .chat) fills the
-     region between crumb and status instead of floating at content height. */
-  display: flex; flex-direction: column;
-  min-height: 0;
-  align-self: stretch;
-  height: 100%;
-}
-/* Document children (hero, sections, panels) keep their natural height in the
-   scrolling flex column. Without flex-shrink:0 the flex algorithm shrinks them
-   toward min-height:0 once total content exceeds the fixed-height .app-main,
-   collapsing every section to 0 and piling content on top of itself — the
-   failure mode any long-scroll page (a marketing/landing route) hits. Grow
-   children (.chat/.grow/etc.) re-assert flex:1 1 auto below via higher
-   specificity, so a single full-height pane still fills the region. */
-.app-main > * { min-height: 0; flex: none; }
-/* The main region scrolls its own overflow at every breakpoint (previously
-   only ≥901px), so a fixed-height .app never clips route content and inner
-   panels don't fight the page scroll. */
-.app-main { overflow-y: auto; }
-/* Reserve the scrollbar track so routes with/without overflow don't shift
-   the layout horizontally when the bar appears. */
-.app-main { scrollbar-gutter: stable; }
-/* Jump-target anchors clear the inner-scroll top edge (no chrome overlap,
-   but a little breathing room when deep-linked within .app-main). */
-.app-main [id] { scroll-margin-top: var(--space-4); }
-/* Full-height route children fill the region instead of scrolling the page. */
-.app-main > .chat,
-.app-main > .chat-area,
-.app-main > .ds-file-stage,
-.app-main > .ds-files-stack,
-.app-main > .grow { flex: 1 1 auto; min-height: 0; }
-.app-main.narrow { max-width: var(--measure-narrow); margin: 0 auto; }
-/* Article-body heading rhythm and lede spacing, consumed by flatspace-rendered
-   long-form pages (docs, papers) that drop headings/panels directly into .app-main. */
-.app-main > h1,
-.app-main > h2,
-.app-main > h3 { margin-top: 36px; margin-bottom: 12px; }
-.app-main > h1:first-child { margin-top: 8px; }
-.app-main > .panel,
-.app-main > .work-detail-chips,
-.app-main > .cli { margin-top: 18px; margin-bottom: 18px; }
-.app-main .ds-lede { margin-top: 4px; margin-bottom: 18px; max-width: 64ch; line-height: 1.6; }
-.work-detail-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; row-gap: 10px; }
-@media (max-width: 720px) {
-  .app-main > h1,
-  .app-main > h2,
-  .app-main > h3 { margin-top: 28px; }
-}
-
-@media (min-width: 1400px) {
-  /* 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. */
-  .app { max-width: clamp(1400px, 92vw, 1920px); margin-left: auto; margin-right: auto; }
-  .app-main .chat,
-  .app-main > .chat-area,
-  .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). */
-  .app-status { width: 100%; }
-  /* Cap row text measure inside the wide capped main (ultrawide readability). */
-  .row .title, .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) {
-  .app { max-width: 1920px; }
-}
-
-.app-status {
-  display: flex; align-items: center; gap: var(--space-3);
-  width: 100%;
-  height: var(--app-status-h); min-height: var(--app-status-h);
-  /* A thin desktop status strip, not a webpage footer band. */
-  padding: 0 var(--space-4);
-  /* Status chrome is prose, not code - mono is reserved for code/paths. */
-  font-family: var(--ff-body); font-size: var(--fs-xs); line-height: 1.2;
-  color: var(--fg-3);
-  border-top: 1px solid var(--rule);
-}
-.app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.app-status .item:first-of-type { color: var(--accent-ink); }
-.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
-   second line. */
-.app-status { flex-wrap: nowrap; overflow: hidden; }
-@media (max-width: 1100px) {
-  .app-status .item:last-of-type:not(:only-of-type) { display: none; }
-}
-
-/* The "dateline" — ASCII bar used at the top of every preview/brand page.
-   3-4 flex slots; a .spread filler pushes the trailing slot to the far
-   edge instead of every span running together with no gap. */
-.dateline {
-  display: flex; align-items: center; gap: var(--space-3);
-  flex-wrap: nowrap; overflow: hidden;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.2;
-  letter-spacing: 0.02em;
-  color: var(--fg-3);
-}
-.dateline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
-.dateline .spread { flex: 1 1 auto; min-width: var(--space-3); }
-
-/* ============================================================
-   Primitives
-   ============================================================ */
-.btn, .btn-primary, .btn-ghost {
-  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-  /* Fixed height + horizontal-only padding: the control height is exact and
-     alignable (flex centres the label vertically), the way webgeist snaps every
-     control to a height ladder. Default is the --ctl-md rung; --btn-sm/--btn-lg
-     retune height + h-padding + font per size. Density scales the ladder. */
-  height: var(--ctl-md); min-height: var(--ctl-md);
-  padding: 0 var(--space-2-75);
-  font-family: var(--ff-body);
-  font-weight: 600; font-size: var(--fs-sm);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  /* Rounded-rect app chrome, not a marketing-page stadium CTA.
-     Shape vocabulary: r-1/r-2 = actionable buttons, icon-buttons, and
-     containers; r-pill = reserved for status/input/chip/badge/progress
-     surfaces (composer input, chips, badges, progress bars, theme-toggle
-     segments) - never for actions. */
-  border-radius: var(--r-1);
-  border: var(--bw-hair) solid transparent;
-  box-shadow: none;
-  /* Restrained hover-lift: a 1px rise + hairline shadow reads as a crisp,
-     confident affordance rather than a soft glow-card float. */
-  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-snap) var(--ease),
-    color var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring),
-    border-color var(--dur-snap) var(--ease);
-}
-.btn { background: var(--bg-2); color: var(--fg); border-color: var(--rule); }
-.btn:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); box-shadow: var(--shadow-1); }
-/* Primary CTA — the electric lead as a solid editorial block; hover inverts to
-   an ink block with the lead as text, a confident two-tone flip. */
-.btn-primary {
-  background: var(--accent); color: var(--accent-fg);
-  font-weight: 700;
-}
-.btn-primary:hover { background: var(--fg); color: var(--accent-ink); 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: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);
-  outline-offset: var(--focus-offset);
-}
-
-/* Button size ladder — the size prop on Btn() (sm | md | lg). md is the base
-   rule above; sm/lg retune height (off the --ctl-* ladder), horizontal padding,
-   and font-size so a size swap is one class, never inline padding overrides
-   (the old preview faked sizes with style=). Applies to every variant. */
-.btn-sm, .btn-sm.btn-primary, .btn-sm.btn-ghost {
-  height: var(--ctl-sm); min-height: var(--ctl-sm);
-  padding: 0 var(--space-2); font-size: var(--fs-tiny); gap: var(--space-1);
-}
-.btn-lg, .btn-lg.btn-primary, .btn-lg.btn-ghost {
-  height: var(--ctl-lg); min-height: var(--ctl-lg);
-  padding: 0 var(--space-4); font-size: var(--fs-body); gap: var(--space-2);
-}
-
-/* App-mode quiet interactions — the marketing hover-lift (translateY + shadow)
-   and the .row .meta slide read as decorative float on a dense working surface.
-   Under [data-typescale="app"], state changes are background/border-only: crisp,
-   no motion, no elevation. Marketing surfaces (no data-typescale) keep the lift. */
-[data-typescale="app"] .btn:hover,
-[data-typescale="app"] .btn-primary:hover,
-[data-typescale="app"] .btn-ghost:hover { transform: none; box-shadow: none; }
-[data-typescale="app"] .btn:active,
-[data-typescale="app"] .btn-primary:active,
-[data-typescale="app"] .btn-ghost:active { transform: none; }
-[data-typescale="app"] .panel { transition: box-shadow var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease); }
-[data-typescale="app"] a.row:hover .meta,
-[data-typescale="app"] .row[role="button"]:hover .meta { transform: none; }
-
-/* ============================================================
-   IconButton — square icon-only button
-   ============================================================ */
-.ds-icon-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 0; border: none; cursor: pointer;
-  border-radius: var(--r-1, 6px);
-  background: transparent; color: var(--fg);
-  width: 32px; height: 32px;
-}
-.ds-icon-btn-xs { width: 22px; height: 22px; }
-.ds-icon-btn-sm { width: 26px; height: 26px; }
-.ds-icon-btn-base { width: 32px; height: 32px; }
-.ds-icon-btn-lg { width: 40px; height: 40px; }
-.ds-icon-btn-xl { width: 48px; height: 48px; }
-.ds-icon-btn-ghost { background: transparent; }
-.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); }
-/* warn = destructive ACTION tone; flame stays exclusively error STATUS. */
-.ds-icon-btn-danger { background: var(--warn); color: var(--on-color); }
-.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 {
-  opacity: 0.5; cursor: not-allowed; pointer-events: none;
-}
-
-/* ============================================================
-   Badge — small inline count/status pill
-   ============================================================ */
-.ds-badge {
-  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: var(--r-pill);
-  background: var(--bg-3); color: var(--fg-2);
-}
-/* Badge size ladder — sm for dense inline counts, lg for prominent markers.
-   Base (above) stays the 18px default. */
-.ds-badge.ds-badge--sm { min-width: 14px; height: 14px; padding: 0 var(--space-1); font-size: 10px; }
-.ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
-/* Canonical tone names are tone-success / tone-error / tone-neutral. Every
-   other tone name grouped into the same rule below (tone-green/tone-live,
-   tone-flame, tone-wip, tone-sun/tone-yellow, tone-ok/tone-miss) is a
-   true-synonym legacy alias, kept working but sharing one declaration so the
-   tone-family colors can't drift apart across names. */
-.ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
-  background: var(--green-tint); color: var(--green-deep);
-}
-.ds-badge.tone-flame, .ds-badge.tone-error {
-  background: var(--flame); color: var(--on-color);
-}
-.ds-badge.tone-wip, .ds-badge.tone-neutral {
-  background: var(--bg-3); color: var(--fg-2);
-}
-.ds-badge.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
-.ds-badge.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.ds-badge.tone-sun, .ds-badge.tone-yellow {
-  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); }
-
-.chip {
-  display: inline-flex; align-items: center; gap: var(--space-1-75);
-  padding: 3px 10px;
-  background: var(--bg-2); color: var(--fg-2);
-  font-family: var(--ff-body);
-  font-size: var(--fs-tiny); font-weight: 600;
-  letter-spacing: var(--tr-caps); text-transform: uppercase;
-  border-radius: var(--r-pill);
-}
-/* Chip size ladder — sm for dense toolbars/table cells, lg for prominent
-   status. tone-* colouring (below) is orthogonal to size. */
-.chip.chip--sm { padding: var(--space-half) var(--space-2); font-size: var(--fs-micro); gap: var(--space-1); }
-.chip.chip--lg { padding: var(--space-1-75) var(--space-2-75); font-size: var(--fs-xs); }
-/* Tag variant — a rectangular, sentence-case chip for dense data (table cells,
-   inline labels) where the all-caps pill reads too shouty and space-hungry.
-   Keeps the tone-* palette; drops the caps + pill for a tight --r-0 corner. */
-.chip.chip--tag {
-  text-transform: none; letter-spacing: 0; font-weight: 500;
-  border-radius: var(--r-0); padding: var(--space-half) var(--space-2);
-}
-/* Same canonical/legacy-alias grouping as .ds-badge above. */
-.chip.tone-green, .chip.tone-live, .chip.tone-success, .chip.tone-ok {
-  background: var(--green-tint); color: var(--green-deep);
-}
-.chip.tone-flame, .chip.tone-error, .chip.tone-miss {
-  background: var(--flame); color: var(--on-color);
-}
-.chip.tone-wip, .chip.tone-neutral {
-  background: var(--bg-3); color: var(--fg-2);
-}
-.chip.tone-purple  { background: var(--purple-tint); color: var(--purple-deep); }
-.chip.tone-mascot  { background: var(--mascot-tint); color: var(--ink); }
-.chip.tone-sun, .chip.tone-yellow {
-  background: var(--sun); color: var(--ink);
-}
-.chip.tone-disabled { background: var(--bg-3);        color: var(--fg-3); }
-.chip.tone-blue     { background: var(--accent-tint); color: var(--accent-ink); }
-.chip.tone-orange   { background: color-mix(in oklab, var(--flame) 30%, var(--sun) 70%); color: var(--ink); }
-.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-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-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 {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px;
-  font-family: var(--ff-mono); font-size: var(--fs-tiny);
-  opacity: 0.8;
-}
-
-/* ============================================================
-   Panel — soft tonal container, no border decoration
-   ============================================================ */
-.panel {
-  background: var(--panel-1, var(--bg-2));
-  border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-2);
-  margin: 0 0 var(--space-4);
-  padding: var(--space-3);
-  position: relative;
-  /* Crisp, restrained elevation — a hairline border does the edge definition;
-     the shadow only adds a whisper of lift, not a soft glow-card float. */
-  box-shadow: var(--shadow-1);
-  transition: box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-snap) var(--ease),
-    transform var(--dur-base) var(--ease-spring);
-}
-/* Editorial accent spine — an opt-in printed-ink rule down the left edge that
-   reads as a magazine pull-quote bar, not a glow card. */
-.panel.panel-spine {
-  border-radius: 0 var(--r-2) var(--r-2) 0;
-  padding-left: calc(var(--space-3) + var(--bw-chunk));
-}
-.panel.panel-spine::before {
-  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
-  width: var(--bw-chunk); background: var(--accent);
-  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
-}
-.panel.panel-inline { background: var(--bg-2); padding: var(--space-3) var(--space-3); }
-.panel.panel-wide   { background: transparent; box-shadow: none; border: none; }
-/* Dense panel — a compact container for app surfaces (inspector sections,
-   sidebars) that want the .panel look without the roomy 16px pad + 24px stack
-   gap. Tighter corner + padding + head, so it sits between .panel and the
-   flush editor .ds-ep-panel. */
-.panel.panel--dense {
-  padding: var(--space-2); margin-bottom: var(--space-2-75);
-  border-radius: var(--r-1);
-}
-.panel.panel--dense .panel-head { padding: var(--space-1-5) var(--space-2); }
-.panel.panel--dense .panel-body { padding: var(--space-1-5) var(--space-2) var(--space-2); }
-.panel.panel--dense .panel-body > * + * { margin-top: var(--space-2); }
-.panel-head {
-  display: flex; align-items: baseline; justify-content: space-between;
-  /* Shares the .panel-body 16px side padding so the caps label and the body
-     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-tiny); font-weight: 600;
-  color: var(--fg-3);
-  letter-spacing: var(--tr-caps); text-transform: uppercase;
-}
-.panel.panel-wide .panel-head { padding-left: 0; padding-right: 0; }
-.panel-head > :last-child {
-  font-weight: 500; color: var(--fg-3);
-  font-family: var(--ff-mono); letter-spacing: 0;
-}
-.panel-body { padding: var(--space-2) var(--space-3) var(--space-3); }
-.panel-body > * { margin: 0; }
-.panel-body > * + * { margin-top: var(--space-3); }
-.panel.panel-wide .panel-body { padding: 0; }
-
-/* ============================================================
-   Row — primary list pattern. Indicator rail on the left,
-   no hairlines between rows.
-   ============================================================ */
-.row {
-  display: grid;
-  grid-template-columns: minmax(80px, 12ch) minmax(0, 1fr) auto;
-  gap: var(--space-3);
-  align-items: baseline;
-  /* App density is the BASE: a list row is quiet working chrome, so it defaults
-     to the compact 12px/16px rhythm (density-scaled) rather than the old
-     16px/24px marketing padding. .row--lede restores the roomier marketing
-     voice for editorial index pages. */
-  padding: calc(var(--space-2-75) * var(--density)) var(--space-3);
-  background: var(--bg);
-  border-radius: var(--r-1);
-  color: var(--fg);
-  position: relative;
-  /* Only background + the leading rail animate; padding/size never change on
-     interaction, so they are deliberately absent (a padding transition here was
-     dead and misleading). */
-  transition: background var(--dur-snap) var(--ease), box-shadow var(--dur-base) var(--ease-spring);
-}
-.row + .row { margin-top: 2px; }
-/* 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
-   real interactive role. */
-a.row:hover, button.row:hover, .row[role="button"]:hover {
-  box-shadow: var(--shadow-1);
-}
-/* `detail` drops to its own full-width line. The row is a grid, so span every
-   track (grid-column 1/-1); flex-basis:100% covers the flex-row fallback. */
-.ds-row-detail {
-  white-space: pre-wrap;
-  font-family: var(--ff-mono);
-  font-size: var(--fs-sm);
-  line-height: var(--lh-snug);
-  margin-top: var(--space-2);
-  padding: 10px 12px;
-  background: var(--bg);
-  border-radius: var(--r-1);
-  overflow-x: auto;
-  flex-basis: 100%;
-  grid-column: 1 / -1;
-}
-.row::before {
-  content: '';
-  position: absolute; left: 7px; top: 0; bottom: 0; width: 3px;
-  margin: auto 0;
-  height: 0;                 /* collapsed by default; reveals from centre */
-  background: var(--rule-strong);
-  border-radius: var(--r-pill);
-  opacity: 0;
-  transition: height var(--dur-base) var(--ease), opacity var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
-}
-/* A clickable row (onClick -> role=button, or a link row) is interactive, so it
-   carries a pointer cursor; without this the click affordance is invisible. */
-.row[role="button"], a.row { cursor: pointer; }
-/* Hover reveals the rail (grows from centre) only on interactive rows — a static
-   row should not signal an affordance it does not have. */
-.row[role="button"]:hover, a.row:hover { background: var(--bg-2); }
-.row[role="button"]:hover::before, a.row:hover::before { height: 56%; opacity: 1; }
-/* Editorial hover-reveal — the row's meta (cta) slides toward the lead accent
-   and nudges right, the printed-index "open ->" affordance. */
-.row .meta { transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-spring); }
-a.row:hover .meta, .row[role="button"]:hover .meta { color: var(--accent-ink); transform: translateX(3px); }
-.row.active { background: color-mix(in oklab, var(--accent) 10%, var(--bg-2)); }
-.row.active::before { height: 64%; opacity: 1; background: var(--accent); }
-.row.active .title { color: var(--accent-ink); }
-.row.row-state-disabled { opacity: 0.5; pointer-events: none; }
-.row.row-state-error { background: color-mix(in oklab, var(--flame) 10%, var(--bg-2)); }
-.row.row-state-error::before { height: 64%; opacity: 1; background: var(--flame); }
-/* rail tones — a persistent status colour on the leading rail (the ::before
-   bar). Always shown (a status indicator, not a hover affordance). Active/error
-   still win via their own rules below in source order. */
-.row.rail-green::before,
-.row.rail-purple::before,
-.row.rail-flame::before { height: 56%; opacity: 1; }
-.row.rail-green::before  { background: var(--accent-ink); }
-.row.rail-purple::before { background: var(--purple-2); }
-.row.rail-flame::before  { background: var(--flame); }
-/* Differentiate the rail by SHAPE, not hue alone (color-blind safety): error
-   reads as a taller solid bar, subagent as a dashed/gapped fill, ok stays the
-   short solid bar. Paired with the sr-only status word emitted by Row(). */
-.row.rail-flame::before  { height: 64%; }
-.row.rail-purple::before { background: repeating-linear-gradient(var(--purple-2) 0 4px, transparent 4px 7px); }
-.row-grid { /* explicit grid-template-columns set inline */ }
-/* A row with no leading code/index drops the empty first column so the title
-   takes the full width instead of wrapping in the narrow code gutter. */
-.row.row-nocode { grid-template-columns: minmax(0, 1fr) auto; }
-
-.row .code  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
-/* Title defaults to the quiet app voice (fs-sm/500) — the 18px/600 marketing
-   voice is now opt-in via .row--lede. */
-.row .title { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-sm); line-height: var(--lh-snug); display: flex; align-items: baseline; gap: var(--space-2-5); flex-wrap: wrap; min-width: 0; }
-.row .title .sub { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
-/* Marketing/editorial index row — restores the roomier padding + larger title
-   the default carried before app-scale became the base. */
-.row--lede { padding: var(--space-3) var(--space-4); }
-.row--lede .title { font-size: var(--fs-lg); font-weight: 600; }
-/* App typescale: list rows are quiet working chrome (the 18px/600 default is a
-   marketing-surface voice). One size for ALL app list rows - matches
-   .ds-file-row/.ds-session-title at fs-sm/500; values mirror the kit's own
-   mobile block below. Marketing pages without data-typescale keep the default. */
-[data-typescale="app"] .row { padding: 12px 16px; }
-[data-typescale="app"] .row .title { font-size: var(--fs-sm); font-weight: 500; }
-.row .sub   { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-sm); color: var(--fg-3); }
-/* Context-pane cwd fact reads as a path (like .ds-dash-cwd/.ds-session-agent/
-   .ds-dash-model) -- scoped to that one row so no other Row .sub is affected. */
-.ds-context-cwd-row .row .sub { font-family: var(--ff-mono); }
-.row .meta  { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
-/* WorksList meta pairs a label with a disclosure chevron, inline-aligned. */
-.ds-works-meta { display: inline-flex; align-items: center; gap: .4em; }
-
-a.row { text-decoration: none; }
-
-/* ============================================================
-   Hero
-   ============================================================ */
-/* Signature hero — asymmetric editorial header. Title spans wide; the body +
-   actions sit offset in a narrower right column on desktop, stacked on mobile.
-   No centered stack. */
-.ds-hero {
-  padding: var(--space-9) 0 var(--space-8);
-  display: grid; gap: var(--space-5) var(--space-5);
-  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
-  grid-template-areas: 'title title' 'body aside';
-  align-items: start;
-  max-width: var(--measure-wide);
-  position: relative; isolation: isolate;
-}
-.ds-hero-head { grid-area: title; display: grid; gap: var(--space-3); }
-.ds-hero-body  { grid-area: body; }
-/* The right column carries its own visual weight — a spined, halftone-
-   textured card holding the badge/stat cluster and the CTAs — so the
-   asymmetric grid reads as a deliberate composition, not leftover space
-   beside the narrow body copy. Stretches to the body column's height. */
-.ds-hero-aside {
-  grid-area: aside; position: relative; isolation: isolate;
-  align-self: stretch; display: flex; flex-direction: column;
-  justify-content: space-between; gap: var(--space-5);
-  background: var(--bg-2);
-  border-radius: 0 var(--r-2) var(--r-2) 0;
-  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-4) + var(--bw-chunk));
-}
-.ds-hero-aside::before {
-  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
-  width: var(--bw-chunk); background: var(--accent);
-  border-radius: var(--bw-chunk) 0 0 var(--bw-chunk);
-}
-.ds-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); }
-.ds-hero-stat {
-  font-family: var(--ff-mono); font-size: var(--fs-sm);
-  color: var(--fg-2); letter-spacing: var(--tr-tight);
-  padding-bottom: var(--space-2); border-bottom: var(--bw-hair) solid var(--bg-3);
-}
-.ds-hero-stat:last-child { border-bottom: 0; padding-bottom: 0; }
-.ds-hero-title {
-  font-family: var(--ff-display); font-weight: 700;
-  font-size: clamp(40px, 9cqi, 116px);
-  line-height: 0.96; letter-spacing: var(--tr-tighter);
-  margin: 0; max-width: 16ch; text-wrap: balance;
-}
-.ds-hero-body {
-  font-family: var(--ff-body); font-size: var(--fs-xl);
-  line-height: 1.45; margin: 0; max-width: 46ch;
-  color: var(--fg-2);
-}
-/* The lead phrase in the title — printed in the electric lead, not glowing. */
-.ds-hero-accent { color: var(--accent-ink); font-weight: 700; }
-.ds-hero-actions {
-  display: flex; gap: var(--space-2, 10px); flex-wrap: wrap;
-  align-self: start; margin-top: var(--space-hair, 4px);
-}
-/* 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-hero {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: 'title' 'body' 'aside';
-    align-items: start;
-    padding: var(--space-7) 0 var(--space-6);
-  }
-  .ds-hero-aside {
-    border-radius: var(--r-2); flex-direction: row; flex-wrap: wrap;
-    justify-content: flex-start; align-items: center;
-  }
-  .ds-hero-stats { flex-direction: row; flex-wrap: wrap; }
-  .ds-hero-stat { border-bottom: 0; padding-bottom: 0; }
-}
-.ds-chat-title { margin: 0; font-size: inherit; }
-
-/* ============================================================
-   Section grouping
-   ============================================================ */
-.ds-section { margin: var(--space-8) 0; }
-/* Compact section (e.g. a PageHeader used as a page's first element): no large
-   leading margin, modest trailing margin — top-aligns without consumer overrides. */
-.ds-section-compact { margin-top: 0; margin-bottom: var(--space-4); }
-.ds-section > h3 {
-  font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-h3);
-  margin: 0 0 var(--space-5);
-  letter-spacing: -0.01em;
-}
-
-@media (max-width: 900px) {
-  .ds-section { margin: var(--space-4) 0; }
-}
-
-/* ============================================================
-   Print texture — the signature surface treatment. Opt-in overlay that
-   reads as risograph/newsprint grain, layered above the surface fill but
-   below content. Faint by default so type stays crisp; reduced-data and
-   reduced-motion are unaffected (texture is static).
-   ============================================================ */
-.ds-grain { position: relative; isolation: isolate; }
-.ds-grain::after {
-  content: ''; position: absolute; inset: 0; z-index: -1;
-  pointer-events: none;
-  background-image: var(--grain);
-  background-size: 160px 160px;
-  opacity: var(--grain-opacity);
-  mix-blend-mode: var(--grain-blend);
-}
-/* ============================================================
-   Marquee / ticker — brand kinetic device ("always open 24/7"). The track
-   holds two identical runs so the loop is seamless; reduced-motion freezes it
-   to a single static run. Editorial, not a decorative flourish.
-   ============================================================ */
-.ds-marquee {
-  overflow: hidden; width: 100%;
-  border-block: var(--bw-rule) solid var(--fg);
-  padding: var(--space-2) 0;
-  font-family: var(--ff-display); font-weight: 600;
-  text-transform: uppercase; letter-spacing: var(--tr-caps);
-}
-.ds-marquee-track {
-  display: inline-flex; gap: var(--space-5);
-  white-space: nowrap; will-change: transform;
-  animation: ds-marquee-run 28s linear infinite;
-}
-.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,
-.ds-marquee:focus-within .ds-marquee-track,
-.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-marquee-track { animation-duration: 40s; }
-}
-@media (prefers-reduced-motion: reduce) {
-  /* Static: wrap to a readable strip instead of a frozen half-offscreen run. */
-  .ds-marquee-track { animation: none; flex-wrap: wrap; white-space: normal; }
-  .ds-marquee-run-b { display: none; }
-}
-
-/* ============================================================
-   Install — single CLI command card
-   ============================================================ */
-.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);
-  font-family: var(--ff-mono); font-size: var(--fs-lg);
-}
-.cli .prompt { color: var(--green-2); }
-.cli .cmd    { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--paper); }
-.cli .copy   {
-  padding: 8px 16px; 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);
-}
-.cli .copy:hover { background: var(--fg-3); }
-
-/* 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. */
-.cli:has(.ds-cli-row),
-.cli:has(.ds-cli-comment) {
-  flex-direction: column; align-items: stretch; gap: 0;
-  font-size: var(--fs-sm); line-height: 1.6;
-}
-.ds-cli-row {
-  display: flex; gap: 10px;
-  font-family: var(--ff-mono); font-size: 13px; line-height: 1.6;
-  padding: 3px 0;
-}
-.ds-cli-row .prompt { color: var(--green-2); flex: 0 0 auto; user-select: none; }
-.ds-cli-row .cmd { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; color: var(--paper); }
-.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;
-}
-
-/* ============================================================
-   Receipt — key/value table
-   ============================================================ */
-table.kv { width: 100%; border-collapse: collapse; }
-table.kv td {
-  padding: 8px 0;
-  font-family: var(--ff-body); font-size: var(--fs-sm);
-}
-table.kv tr + tr td { border-top: 1px solid var(--rule); }
-table.kv td:first-child {
-  color: var(--fg-3);
-  font-size: var(--fs-xs);
-  text-transform: uppercase; letter-spacing: var(--tr-caps);
-  width: 14ch;
-}
-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) {
-  table.kv td { display: block; width: auto; padding: 4px 0; }
-  table.kv td:first-child { padding-top: 8px; }
-  table.kv tr + tr td { border-top: 0; }
-  table.kv tr + tr td:first-child { border-top: 1px solid var(--rule); }
-}
-
-/* ============================================================
-   Generic table
-   ============================================================ */
-table {
-  width: 100%; border-collapse: collapse;
-  font-family: var(--ff-body); font-size: var(--fs-sm);
-  /* A data grid, not a card: a tight --r-0 corner (was --r-3/22px, which read
-     as a rounded card). Cells drop to 8px 12px for a dense, scannable row
-     (was 12/14 x 16 => ~43px rows). Density scales the vertical padding. */
-  border-radius: var(--r-0); overflow: hidden;
-}
-table th {
-  text-align: left;
-  padding: calc(var(--space-2) * var(--density)) var(--space-2-75);
-  font-size: var(--fs-tiny); font-weight: 600;
-  color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--tr-caps);
-  background: var(--bg-2);
-}
-table td { padding: calc(var(--space-2) * var(--density)) var(--space-2-75); border-top: 1px solid var(--rule); }
-table tr.clickable { cursor: pointer; }
-table tr.clickable:hover td { background: var(--bg-2); }
-table tr.clickable:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: -2px;
-}
-table tr.clickable:focus-visible td { background: var(--bg-2); }
-
-/* Table() striped/compact opt-in density modifiers (webgeist g-table parity).
-   Scoped under .ds-table-wrap so they never leak onto an unrelated bare
-   <table> a consumer hand-rolls outside this component. */
-.ds-table-wrap.is-striped table tr:nth-child(even) td { background: var(--bg-2); }
-.ds-table-wrap.is-striped table tr.clickable:nth-child(even):hover td,
-.ds-table-wrap.is-striped table tr.clickable:nth-child(even):focus-visible td { background: var(--bg-3, var(--bg-2)); }
-.ds-table-wrap.is-compact table th { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
-.ds-table-wrap.is-compact table td { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
-
-/* ============================================================
-   Changelog
-   ============================================================ */
-.ds-changelog-row {
-  grid-template-columns: minmax(110px, 14ch) minmax(60px, 9ch) minmax(0, 1fr) !important;
-}
-.ds-changelog-ver {
-  font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-sm);
-}
-
-/* ============================================================
-   Works
-   ============================================================ */
-.work-detail {
-  padding: var(--space-4) var(--space-5) var(--space-5);
-  margin: 4px 0 var(--space-2);
-  background: var(--bg-2);
-  border-radius: var(--r-3);
-  display: flex; flex-direction: column; gap: var(--space-3);
-}
-.ds-work-body { margin: 0; max-width: 60ch; }
-.ds-work-actions { display: flex; gap: 10px; flex-wrap: wrap; }
-
-/* ============================================================
-   Manifesto / pull moment
-   ============================================================ */
-.ds-manifesto { max-width: 60ch; }
-.ds-manifesto-para {
-  font-family: var(--ff-body); font-size: var(--fs-lg);
-  line-height: var(--lh-long); margin: 0 0 var(--space-3);
-}
-.ds-manifesto-para.dim { color: var(--fg-3); }
-
-/* ============================================================
-   Currently shipping dots
-   ============================================================ */
-.ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
-.ds-dot-on  { color: var(--green-2); }
-.ds-dot-off { color: var(--fg-3); }
-.ds-dot-live { color: var(--green-2); }
-.ds-dot-idle { color: var(--fg-3); }
-
-/* ============================================================
-   KPI
-   ============================================================ */
-.kpi {
-  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: var(--space-2);
-}
-.kpi-card {
-  /* Was --space-5 (32px) pad + --r-3 (22px) — four cards ate a full fold. A
-     16px pad on a --r-1 corner keeps them prominent but dense; the number drops
-     from a 48px marketing display to a 32px app-scale figure. */
-  padding: var(--space-3);
-  background: var(--bg-2);
-  border-radius: var(--r-1);
-}
-.kpi-card .num {
-  font-family: var(--ff-body); font-weight: 600;
-  font-size: clamp(22px, 3cqi, 32px); line-height: 1;
-  letter-spacing: var(--tr-tight);
-}
-.kpi-card .lbl {
-  font-size: var(--fs-xs); color: var(--fg-3);
-  font-weight: 600; margin-top: 8px;
-  letter-spacing: var(--tr-caps); text-transform: uppercase;
-}
-.kpi-foot {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-top: var(--space-2);
-}
-.kpi-delta {
-  display: inline-flex; align-items: center; gap: var(--space-hair);
-  font-size: var(--fs-xs); font-weight: 600;
-}
-.kpi-delta-up { color: var(--green); }
-.kpi-delta-down { color: var(--danger); }
-.ds-sparkline path { stroke: currentColor; }
-.ds-sparkline-up { color: var(--success); }
-.ds-sparkline-down { color: var(--danger); }
-
-/* ============================================================
-   BarChart
-   ============================================================ */
-.ds-barchart { display: flex; flex-direction: column; gap: var(--space-2); }
-.ds-barchart-row {
-  display: grid; grid-template-columns: minmax(90px, 25%) 1fr auto;
-  align-items: center; gap: var(--space-2);
-}
-.ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
-.ds-barchart-track {
-  /* 6px unifies with the system's other bar tracks (.ds-upload-bar,
-     .ds-bar-bg); was --space-2 (8px), the lone thicker slab in the bar family. */
-  height: var(--space-1-75); border-radius: var(--r-pill);
-  background: var(--bg-3); overflow: hidden;
-}
-.ds-barchart-fill {
-  height: 100%; width: var(--bar-pct, 0%);
-  background: var(--fg-3); border-radius: var(--r-pill);
-}
-.ds-barchart-fill.is-active { background: var(--accent); }
-.ds-barchart-value {
-  font-size: var(--fs-xs); font-weight: 600; color: var(--fg-3);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ============================================================
-   Empty state
-   ============================================================ */
-.empty {
-  /* Was --space-8 (96px) — an empty list spent 192px of vertical space on
-     nothing. --space-6 (48px) still centres a message with air, without the
-     empty state dominating the fold. Mobile drops it further (below). */
-  padding: var(--space-6);
-  text-align: center;
-  color: var(--fg-3);
-  background: var(--bg-2);
-  border-radius: var(--r-1);
-  font-size: var(--fs-sm);
-}
-
-/* ============================================================
-   Form
-   ============================================================ */
-.row-form {
-  display: grid; gap: 12px;
-  padding: var(--space-5);
-  background: var(--bg-2);
-  border-radius: var(--r-3);
-}
-.row-form input,
-.row-form textarea {
-  font-family: inherit; font-size: var(--fs-sm);
-  padding: 12px 16px;
-  background: var(--bg); color: var(--fg);
-  border: 0; border-radius: var(--r-2);
-  box-shadow: inset 0 0 0 1px var(--rule);
-}
-.row-form input:focus-visible,
-.row-form textarea:focus-visible { box-shadow: var(--focus-ring-inset); }
-
-/* Field char counter (TextField maxLength) */
-.ds-field-count {
-  font-size: var(--fs-tiny, 13px);
-  color: var(--fg-3, var(--fg-2));
-  text-align: right;
-}
-
-/* Multi-column form layout (Form columns prop) */
-.row-form[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
-.row-form[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
-@media (max-width: 600px) {
-  .row-form[data-columns="2"],
-  .row-form[data-columns="3"] { grid-template-columns: 1fr; }
-}
-
-/* ============================================================
-   Responsive Design — Mobile (480px), Tablet (1024px), Desktop (1440px+)
-   ============================================================ */
-
-/* --------------------------------------------------------------------
-   Mobile Portrait Breakpoint (480px and below)
-   ---------------------------------------------------------------------- */
-@media (max-width: 480px) {
-  /* App Layout: single-column + drawer is handled once in the ≤900px block;
-     no need to re-declare grid-template-columns here (was a redundant !important). */
-
-  /* Topbar Navigation: stack the nav onto its own full-width row below the
-     brand and let it scroll horizontally. The brand stays on the first row;
-     nav wraps to a second row at 100% width (flex-wrap on .app-topbar). */
-  .app-topbar {
-    gap: var(--space-2); padding: 12px var(--space-3);
-  }
-  /* When the topbar is folded into .app-chrome it is a flex:0 0 auto child, so
-     it sizes to its nav's content and overflows the viewport instead of letting
-     the nav's own overflow-x:auto engage. Constrain it to the chrome width so
-     the horizontally-scrolling nav stays inside the screen. */
-  .app-chrome > .app-topbar { max-width: 100%; min-width: 0; flex-basis: 100%; }
-  .app-topbar > nav {
-    flex: 1 1 100%; margin-left: 0; order: 3; min-width: 0; max-width: 100%;
-    display: flex; gap: 2px; flex-wrap: nowrap;
-    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
-    /* Fade the trailing edge so a clipped last item (e.g. "source ->" cut to
-       "sour") reads as scrollable content, not a broken/truncated label. */
-    mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
-    -webkit-mask-image: linear-gradient(90deg, var(--fg) 0 calc(100% - 28px), transparent 100%);
-  }
-  .app-topbar nav::-webkit-scrollbar { display: none; }
-  .app-topbar nav a {
-    flex: 0 0 auto; padding: 10px 12px; min-height: 44px; white-space: nowrap;
-  }
-  .brand { font-size: var(--fs-tiny); font-weight: 600; }
-
-  /* Search */
-  .app-search {
-    display: none; /* Hide search on mobile unless explicitly pinned */
-  }
-
-  /* Main Content */
-  .app-main { padding: var(--space-4) var(--space-2); }
-  .app-main.narrow { max-width: 100%; margin: 0; }
-
-  /* Headings stay on the fluid base clamps (cqi) — no mobile re-clamp. */
-
-  /* Panel & Row */
-  .panel { margin: 0 0 var(--space-3); }
-  .panel-head { padding: var(--space-3) var(--space-2); gap: var(--space-2); }
-  .panel-body { padding: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
-  .panel-body > table { min-width: 100%; }
-
-  .row {
-    grid-template-columns: minmax(0, 1fr) auto !important;
-    gap: var(--space-2); padding: 12px 16px;
-    row-gap: 4px !important;
-  }
-  .row .sub { grid-column: 1 / -1; order: 3; }
-  .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-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
-  .ds-changelog-row .title { grid-column: 1 / -1; }
-
-  /* Buttons */
-  .btn, .btn-primary, .btn-ghost {
-    padding: 11px 16px; font-size: var(--fs-tiny);
-    min-height: 44px; /* Touch target minimum */
-  }
-
-  /* File Grid */
-  .ds-file-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-  }
-  .ds-file-row {
-    gap: 8px; padding: 10px 12px;
-    font-size: var(--fs-xs);
-  }
-  .ds-file-open { gap: 10px; }
-  /* At mobile row widths, a fixed-size meta column (date/size) plus the
-     always-visible action buttons leave the flexible title only a few px —
-     not enough for even one legible character before the two collide. Drop
-     the metadata column here; the title + actions still fully identify and
-     operate on the row, and meta stays available in the file viewer. */
-  .ds-file-row .ds-file-meta { display: none; }
-  .ds-file-row .ds-file-actions { opacity: 1; }
-  /* H4: floor finger-sized controls so file actions/sort/filter/breadcrumb are
-     reachable by touch (cohesion sweep). */
-  .ds-file-act, .ds-file-sort-btn, .ds-crumb-seg { min-height: 44px; }
-  .ds-file-filter-input { min-height: 44px; }
-  .ds-file-check, .ds-file-selectall, .ds-density-btn { min-height: 44px; min-width: 44px; }
-
-  /* Chat */
-  .chat-stack { max-width: 100%; min-width: 0; }
-  .chat-bubble {
-    padding: 10px 12px; font-size: var(--fs-sm);
-  }
-  .chat-avatar { width: 28px; height: 28px; font-size: 11px; }
-  .chat-msg:hover { padding: 4px 0; margin: 0; background: transparent; }
-  .chat-composer { padding: 8px; gap: 6px; }
-  .chat-composer textarea { padding: 10px 12px; font-size: var(--fs-sm); }
-
-  /* KPI Cards */
-  .kpi {
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: var(--space-2);
-  }
-  .kpi-card { padding: var(--space-3); }
-  /* Container-relative like the base rule (5vw sized against the viewport and
-     jumped across the breakpoint). */
-  .kpi-card .num { font-size: clamp(22px, 8cqi, 32px); }
-
-  /* Empty State */
-  .empty { padding: var(--space-5); font-size: var(--fs-xs); }
-
-  /* Form */
-  .row-form { gap: 10px; padding: var(--space-3); }
-  .row-form input,
-  .row-form textarea { padding: 11px 12px; font-size: var(--fs-sm); }
-
-  /* Hero Section — keep fluid base font-size, just unconstrain width on mobile. */
-  .ds-hero { padding: var(--space-6) 0 var(--space-5); }
-  .ds-hero-title { max-width: 100%; }
-  .ds-hero-body { max-width: 100%; }
-
-  /* Table Responsiveness */
-  table { font-size: var(--fs-xs); }
-  table th,
-  table td { padding: 10px 12px; }
-
-  /* CLI Block */
-  .cli {
-    flex-direction: column; align-items: flex-start; gap: 10px;
-    padding: 16px 12px; font-size: var(--fs-xs);
-  }
-  .cli .copy { padding: 6px 12px; font-size: var(--fs-micro); }
-}
-
-/* --------------------------------------------------------------------
-   Container Query Responsive (720px and below)
-   ---------------------------------------------------------------------- */
-@container (max-width: 760px) {
-  .app-body { grid-template-columns: 1fr !important; }
-  .app-side-shell { border-right: 0; border-bottom: 1px solid var(--rule); }
-  .app-topbar nav { font-size: var(--fs-xs); gap: 14px; }
-  .row { grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 4px !important; }
-  .row .sub { grid-column: 1 / -1; order: 3; }
-  .ds-changelog-row { grid-template-columns: minmax(70px, 10ch) minmax(0, 1fr) !important; }
-  .ds-changelog-row .title { grid-column: 1 / -1; }
-}
-
-/* --------------------------------------------------------------------
-   Tablet Landscape Breakpoint (768px to 1024px)
-   ---------------------------------------------------------------------- */
-@media (min-width: 481px) and (max-width: 1024px) {
-  /* App Layout — side handled by 900px drawer block; restore for 901-1024 */
-  .app-side a {
-    padding: 12px 12px; gap: 8px;
-    grid-template-columns: 16px 1fr auto;
-    font-size: var(--fs-xs);
-    min-height: 44px;
-  }
-
-  /* Topbar Navigation (flex container — no grid-template here) */
-  .app-topbar {
-    gap: var(--space-3); padding: 12px var(--space-4);
-  }
-  .app-topbar nav {
-    display: flex; gap: 8px; font-size: var(--fs-xs);
-    flex-wrap: wrap;
-  }
-  .app-topbar nav a {
-    padding: 12px 12px; font-size: var(--fs-xs);
-    min-height: 44px;
-  }
-  .brand { font-size: var(--fs-sm); }
-
-  /* Search */
-  .app-search {
-    display: inline-flex;
-    max-width: 280px; font-size: var(--fs-xs);
-    padding: 8px 14px;
-  }
-
-  /* Main Content */
-  .app-main { padding: var(--space-6) var(--space-4); }
-  .app-main.narrow { max-width: 100%; }
-
-  /* Headings stay on the fluid base clamps (cqi) — no tablet re-clamp. */
-
-  /* File list — single column rows on tablet (cards only via data-columns) */
-  .ds-file-row {
-    grid-template-columns: 24px minmax(0, 1fr) auto auto;
-    gap: 12px; padding: 12px 14px;
-  }
-
-  /* Chat Bubbles */
-  .chat-stack { max-width: min(75%, 420px); }
-  .chat-bubble {
-    padding: 11px 14px; font-size: var(--fs-sm);
-  }
-  .chat-avatar { width: 32px; height: 32px; font-size: 12px; }
-
-  /* KPI Cards */
-  .kpi {
-    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: var(--space-3);
-  }
-
-  /* Buttons */
-  .btn, .btn-primary, .btn-ghost {
-    padding: 12px 18px; font-size: var(--fs-sm);
-  }
-
-  /* Panel - keep the head on the body's left axis at laptop widths too. */
-  .panel-head { padding: var(--space-2) var(--space-3); }
-  .panel-body { padding: var(--space-2) var(--space-3); }
-
-  /* Hero — fluid base font-size; only width unconstrained on tablet. */
-  .ds-hero { padding: var(--space-7) 0 var(--space-6); max-width: 100%; }
-  .ds-hero-title { max-width: 100%; }
-
-  /* Row */
-  .row {
-    grid-template-columns: minmax(90px, 12ch) minmax(0, 1fr) auto;
-    gap: var(--space-2); padding: 14px 16px;
-  }
-}
-
-/* --------------------------------------------------------------------
-   Mid Breakpoint (768px and below) — collapse sidebar + simplify row grid
-   ---------------------------------------------------------------------- */
-@media (max-width: 768px) {
-  /* Sidebar stacks above main rather than sitting beside it */
-  .app-body { grid-template-columns: 1fr; }
-  .app-side { width: 100%; max-width: none; }
-
-  /* Row drops the leading code column; title + meta share the line */
-  .row {
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--space-2);
-  }
-  .row .code { display: none; }
-  /* Changelog's date lives in span.code — hiding it is data loss, not reflow. */
-  .ds-changelog-row .code { display: inline; font-size: var(--fs-micro); }
-  .row .sub { grid-column: 1 / -1; }
-}
-
-/* --------------------------------------------------------------------
-   Desktop Breakpoint Enhancements (1025px and up)
-   ---------------------------------------------------------------------- */
-@media (min-width: 1025px) {
-  /* Chat Bubbles */
-  .chat-stack { max-width: min(70%, 480px); }
-
-  /* KPI Cards */
-  .kpi {
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-    gap: var(--space-3);
-  }
-}
-
-/* ============================================================
-   Chat — minimal styles (placeholder for full chat surface)
-   ============================================================ */
-.ds-chat { display: flex; flex-direction: column; gap: 12px; padding: var(--space-4); }
-.ds-chat-msg { padding: 12px 18px; background: var(--bg-2); border-radius: var(--r-3); max-width: min(90vw, 36em); }
-.ds-chat-msg.user { background: var(--accent-tint); color: var(--fg); align-self: flex-end; }
-.ds-chat-md { font-size: var(--fs-sm); line-height: 1.6; }
-.ds-chat-composer { display: flex; gap: 8px; padding: var(--space-4); }
-.ds-chat-composer input { flex: 1; padding: 13px 18px; background: var(--bg-2); border: 0; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-sm); color: var(--fg); }
-.ds-chat-composer input:focus-visible { box-shadow: var(--focus-ring-inset); }
-
-/* ============================================================
-   File surface — responsive grid + row layouts
-   ============================================================ */
-
-/* Default file grid — a vertical list of rows. Each row lays out its own
-   columns internally; the container only stacks them. Card mode (multi-column)
-   is opt-in via [data-columns]. */
-.ds-file-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.ds-file-grid:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-2); }
-
-/* Listing wrapper holds the optional filter + sort header above the grid. */
-.ds-file-listing { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
-/* The quick filter is a compact control, not a full-width form row - a giant
-   input above the grid reads as a search page and costs fold height. */
-/* The filter is now an inline item in the single .ds-file-controls toolbar row
-   (the standalone right-aligned .ds-file-filter strip was removed). */
-.ds-file-filter-input {
-  width: min(280px, 100%); padding: 6px 12px; font-size: var(--fs-sm);
-  background: var(--bg); color: var(--fg);
-  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
-}
-.ds-file-controls .ds-file-filter-wrap { flex: 0 1 220px; display: contents; }
-.ds-file-controls .ds-file-filter-wrap .ds-file-filter-input { flex: 0 1 220px; }
-.ds-file-filter-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
-.ds-file-sort { display: flex; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); }
-.ds-file-sort-btn {
-  font-size: var(--fs-tiny); font-family: var(--ff-mono); color: var(--fg-3);
-  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: var(--r-1);
-}
-.ds-file-sort-btn:hover { color: var(--fg-2); background: var(--bg-2); }
-.ds-file-sort-btn.active { color: var(--accent-ink); }
-.ds-file-sort-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-/* Skeleton shimmer rows shown while a directory loads. */
-.ds-file-row-skeleton { cursor: default; pointer-events: none; }
-/* In-place refresh: dim the populated grid instead of swapping it for shimmer
-   rows (the rows stay; the round-trip reads as a settle, not a reload). */
-.ds-file-grid.is-refreshing { opacity: .6; }
-@media (prefers-reduced-motion: no-preference) {
-  .ds-file-grid { transition: opacity .15s var(--ease); }
-}
-/* EventList loading skeleton (shares the .ds-skel shimmer base above). */
-.ds-event-row-skeleton { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; pointer-events: none; }
-.ds-skel-rank { height: 12px; width: 2.5ch; }
-.ds-event-state { padding: var(--space-2) 16px; }
-.ds-skel { display: inline-block; border-radius: var(--r-1); background: var(--bg-2); position: relative; overflow: hidden; }
-.ds-skel::after {
-  content: ''; position: absolute; inset: 0;
-  background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
-  transform: translateX(-100%); animation: ds-skel-shimmer 1.2s infinite;
-}
-.ds-skel-icon { width: 22px; height: 22px; }
-.ds-skel-title { height: 12px; width: 60%; }
-.ds-skel-meta { height: 10px; width: 64px; margin-left: auto; }
-@keyframes ds-skel-shimmer { 100% { transform: translateX(100%); } }
-@media (prefers-reduced-motion: reduce) { .ds-skel::after { animation: none; } }
-
-/* File row — linear layout (checkbox? · open-button[code · icon · title · meta] · actions).
-   The row is a flex strip; the open <button> is the stretching member and lays
-   out the entry's own columns. It needs a full reset (UA button chrome off)
-   because FileRow wraps the row content in a real button for native keyboard
-   semantics. */
-.ds-file-row {
-  display: flex; align-items: center; gap: 10px;
-  padding: 11px 16px; background: var(--bg);
-  border: var(--bw-hair) solid transparent;
-  border-radius: var(--r-2); color: var(--fg);
-  cursor: pointer;
-  transition: background var(--dur-snap) var(--ease),
-              border-color var(--dur-snap) var(--ease),
-              transform var(--dur-snap) var(--ease);
-}
-.ds-file-open {
-  display: flex; align-items: center; gap: 14px;
-  flex: 1 1 auto; min-width: 0;
-  background: none; border: 0; padding: 0; margin: 0;
-  color: inherit; font: inherit; text-align: left; cursor: pointer;
-}
-.ds-file-open[disabled] { cursor: default; }
-.ds-file-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); border-radius: var(--r-1); }
-.ds-file-row:hover {
-  background: var(--bg-2);
-  border-color: var(--rule);
-}
-.ds-file-row:active { transform: translateY(1px); }
-.ds-file-row.active { background: var(--accent-tint); border-color: var(--accent); }
-.ds-file-row[data-file-type="dir"]      { border-left-width: 3px; border-left-color: var(--accent); }
-.ds-file-row[data-file-type="image"],
-.ds-file-row[data-file-type="video"],
-.ds-file-row[data-file-type="audio"],
-.ds-file-row[data-file-type="code"],
-.ds-file-row[data-file-type="text"],
-.ds-file-row[data-file-type="archive"],
-.ds-file-row[data-file-type="document"],
-.ds-file-row[data-file-type="symlink"],
-.ds-file-row[data-file-type="other"]    { border-left-width: 3px; border-left-color: var(--rule); }
-
-/* Row internals — these are the classes FileRow actually renders. */
-.ds-file-row .title {
-  font-weight: 500; font-size: var(--fs-sm);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  min-width: 0; flex: 1 1 auto;
-}
-.ds-file-row .code {
-  font-family: var(--ff-mono); font-size: var(--fs-micro);
-  color: var(--fg-3);
-}
-.ds-file-row .ds-file-meta {
-  font-family: var(--ff-mono); font-size: var(--fs-xs);
-  color: var(--fg-3); white-space: nowrap;
-  /* Never shrink below content: a flex sibling with white-space:nowrap and
-     the default flex-shrink:1 silently overflows its own box (no ellipsis)
-     when the row runs out of width, painting the date/size over the title
-     and action icons at mobile widths. Fixed-size the meta column instead
-     and let .title (flex:1, min-width:0, ellipsis) absorb the squeeze. */
-  flex-shrink: 0;
-}
-
-/* File icon — glyph chip, tinted per type. */
-.ds-file-icon {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 26px; height: 26px; font-size: 15px; line-height: 1;
-  color: var(--fg-2);
-}
-.ds-file-row[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
-.ds-file-row[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
-.ds-file-row[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
-.ds-file-row[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
-.ds-file-row[data-file-type="code"]     .ds-file-icon { color: var(--green-2); }
-.ds-file-row[data-file-type="archive"]  .ds-file-icon { color: var(--flame); }
-.ds-file-row[data-file-type="document"] .ds-file-icon { color: var(--amber, var(--sun)); }
-
-/* Row actions — a faint baseline keeps them discoverable at rest (not fully
-   hidden, which left mouse/trackpad users unable to find rename/move/delete
-   without accidentally hovering a row), full opacity on hover/focus. */
-.ds-file-actions {
-  display: inline-flex; gap: 2px; align-items: center;
-  opacity: 0.35; transition: opacity var(--dur-base) var(--ease);
-}
-.ds-file-row:hover .ds-file-actions,
-.ds-file-row:focus-within .ds-file-actions { opacity: 1; }
-.ds-file-act {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 28px; height: 28px; padding: 0;
-  background: transparent; border: 0; border-radius: var(--r-1);
-  color: var(--fg-3); font-size: 14px; cursor: pointer;
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.ds-file-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-file-act-warn:hover { background: color-mix(in oklab, var(--warn) 18%, var(--bg)); color: var(--warn); }
-
-/* Multi-select — per-row checkbox, header tri-state, bulk action strip. */
-/* CSS-drawn multi-select checkbox: a bordered box that fills with the accent +
-   a border-drawn tick when its parent button is .is-marked or aria-checked.
-   Shared by FileRow/FileCell (.is-marked) and the file/session select-all +
-   SessionCard select (aria-checked true/mixed) since the bundle concatenates
-   all CSS. Replaces the old [x]/[ ] bracket text - no glyphs, AT keeps the
-   role=checkbox/aria-checked name+state.
-   See also .ds-check in editor-primitives.css — a separate native-input
-   checkbox family for form/settings contexts; intentionally distinct
-   rendering (native vs CSS-drawn), do not let one drift toward the other
-   by accident. */
-.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: var(--r-0);
-  transition: background var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
-}
-.is-marked > .ds-check-box,
-[aria-checked="true"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
-.is-marked > .ds-check-box::after,
-[aria-checked="true"] > .ds-check-box::after {
-  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
-  border: solid var(--bg); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
-}
-[aria-checked="mixed"] > .ds-check-box { background: var(--fg); border-color: var(--fg); }
-[aria-checked="mixed"] > .ds-check-box::after {
-  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px; background: var(--bg); border-radius: var(--r-hair);
-}
-
-.ds-file-check {
-  display: inline-flex; align-items: center; justify-content: center;
-  min-width: 28px; height: 28px; padding: 0 4px;
-  background: transparent; border: 0; border-radius: var(--r-1);
-  color: var(--fg-3);
-  cursor: pointer;
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.ds-file-check:hover { background: var(--bg-3); color: var(--fg); }
-.ds-file-check.is-marked { color: var(--accent-ink); }
-.ds-file-check:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-file-check[disabled] { opacity: 0.4; cursor: default; }
-.ds-file-row.is-marked { background: var(--accent-tint); border-color: var(--accent); }
-.ds-file-selectall {
-  display: inline-flex; align-items: center; gap: var(--space-1);
-  font-family: var(--ff-mono); font-size: var(--fs-tiny); color: var(--fg-2);
-  cursor: pointer; background: none; border: none;
-  padding: var(--space-1); border-radius: var(--r-1);
-}
-.ds-file-selectall:hover { background: var(--bg-2); color: var(--fg); }
-.ds-file-selectall:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-file-controls { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-1); flex-wrap: wrap; }
-.ds-file-controls .spread { flex: 1 1 auto; }
-.ds-file-controls .ds-file-sort { padding: 0; }
-.ds-bulkbar {
-  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
-  padding: var(--space-1) var(--space-2);
-  background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
-}
-.ds-bulkbar-count { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-2); }
-/* BulkBar is a toolbar (it even declares role=toolbar): compact rect buttons,
-   quiet destructive outline - the app arm-confirms destructive bulk actions
-   via ConfirmDialog, so the strip never needs a loud CTA. */
-.ds-bulkbar .btn, .ds-bulkbar .btn-primary {
-  padding: 5px 12px; min-height: 32px; border-radius: var(--r-1); font-weight: 500;
-}
-.ds-bulkbar .btn { background: transparent; border: var(--bw-hair) solid var(--rule); color: var(--fg-2); }
-.ds-bulkbar .btn:hover { background: var(--bg-2); color: var(--fg); }
-.ds-bulkbar .btn-primary.danger { background: transparent; color: var(--warn); border: var(--bw-hair) solid var(--warn); }
-.ds-bulkbar .btn-primary.danger:hover { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn); }
-@media (pointer: coarse) {
-  .ds-bulkbar .btn, .ds-bulkbar .btn-primary { min-height: 44px; }
-}
-
-/* Density picker — list / compact / thumbnails. */
-.ds-density {
-  display: inline-flex; gap: 2px; padding: 2px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
-}
-.ds-density-btn {
-  display: inline-flex; align-items: center; justify-content: center;
-  width: 28px; height: 28px; color: var(--fg-2);
-  background: none; border: none; cursor: pointer;
-  padding: 0; border-radius: calc(var(--r-1) - 2px);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.ds-density-btn:hover { color: var(--fg); }
-.ds-density-btn.active { background: var(--accent-tint); color: var(--fg); }
-.ds-density-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-/* Compact density — tighter rows for long listings. */
-.ds-file-grid[data-density="compact"] { gap: 2px; }
-.ds-file-grid[data-density="compact"] .ds-file-row { padding: 5px 12px; gap: 10px; }
-.ds-file-grid[data-density="compact"] .ds-file-row .title { font-size: var(--fs-xs); }
-.ds-file-grid[data-density="compact"] .ds-file-row .ds-file-meta { font-size: var(--fs-micro); }
-.ds-file-grid[data-density="compact"] .ds-file-icon { width: 20px; height: 20px; font-size: 13px; }
-
-/* Thumbnail density — tile grid; image entries carry a real lazy thumbnail. */
-.ds-file-grid-thumb {
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
-  gap: var(--space-3); align-items: start;
-}
-.ds-file-cell {
-  position: relative;
-  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
-  overflow: hidden;
-  transition: border-color var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
-}
-.ds-file-cell:hover { border-color: var(--fg-3); }
-.ds-file-cell.active { border-color: var(--accent); background: var(--accent-tint); }
-.ds-file-cell.is-marked { border-color: var(--accent); background: var(--accent-tint); }
-.ds-file-cell.is-locked { opacity: 0.6; }
-.ds-file-row.is-locked { opacity: 0.6; }
-.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-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-file-perm-tag.is-noaccess { color: var(--flame); border-color: var(--flame); }
-.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-file-cell-open[disabled] { cursor: default; }
-.ds-file-cell-open:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; border-radius: var(--r-2); }
-.ds-file-cell-media {
-  display: flex; align-items: center; justify-content: center;
-  width: 100%; aspect-ratio: 4 / 3;
-  background: var(--bg-2); border-radius: var(--r-1); overflow: hidden;
-}
-.ds-file-cell-media .ds-file-icon { width: 34px; height: 34px; font-size: 24px; }
-.ds-file-cell-thumb { width: 100%; height: 100%; object-fit: cover; }
-/* Per-type icon tints on thumb tiles so the grid keeps the colour-coding the
-   list rows already carry (mirrors .ds-file-row[data-file-type] .ds-file-icon). */
-.ds-file-cell[data-file-type="dir"]      .ds-file-icon { color: var(--accent-ink); }
-.ds-file-cell[data-file-type="image"]    .ds-file-icon { color: var(--mascot); }
-.ds-file-cell[data-file-type="video"]    .ds-file-icon { color: var(--purple-2); }
-.ds-file-cell[data-file-type="audio"]    .ds-file-icon { color: var(--sky); }
-.ds-file-cell[data-file-type="code"]     .ds-file-icon { color: var(--green-2); }
-.ds-file-cell[data-file-type="archive"]  .ds-file-icon { color: var(--flame); }
-.ds-file-cell[data-file-type="document"] .ds-file-icon { color: var(--amber); }
-.ds-file-cell[data-file-type="symlink"]  .ds-file-icon { color: var(--purple); }
-.ds-file-cell-name {
-  font-size: var(--fs-tiny); text-align: left;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.ds-file-cell-meta { font-family: var(--ff-mono); font-size: var(--fs-micro); color: var(--fg-3); text-align: left; }
-.ds-file-cell-check {
-  position: absolute; top: 4px; left: 4px; z-index: 1;
-  background: color-mix(in oklab, var(--bg) 78%, transparent);
-}
-
-/* ============================================================
-   File browser surface — stage, toolbar, breadcrumb, dropzone,
-   upload progress, empty state, modals, preview. Authored for
-   fsbrowse but lives in the shared kit under .ds-247420 scope.
-   ============================================================ */
-
-/* Stage — the scrollable content column. */
-.ds-file-stage {
-  display: flex; flex-direction: column; gap: var(--space-3);
-  width: 100%; max-width: var(--measure-wide); margin: 0 auto;
-  padding: var(--space-2) var(--space-3) var(--space-4);
-}
-/* When the stage is the app-main child, the shell already supplies top
-   padding — collapse the stage's own so content isn't pushed down. */
-.app-main > div > .ds-file-stage,
-.app-main .ds-file-stage { padding-top: 0; }
-
-/* Full-width files stack: the stage's space-3 vertical beat without its
-   --measure-wide cap/auto-margins, so the roots / toolbar / bulkbar / uploads / grid
-   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-files-stack {
-  display: flex; flex-direction: column; gap: var(--space-3); min-height: 0;
-  padding: 0 var(--space-3) var(--space-4);
-}
-.app-main > div > .ds-files-stack,
-.app-main .ds-files-stack { padding-top: 0; }
-
-/* Breadcrumb path */
-.ds-crumb-path {
-  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
-  font-size: var(--fs-sm);
-}
-.ds-crumb-seg {
-  background: transparent; border: 0; cursor: pointer;
-  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-crumb-seg:hover { background: var(--bg-2); color: var(--fg); }
-.ds-crumb-seg.leaf { color: var(--fg); font-weight: 600; }
-.ds-crumb-sep { color: var(--fg-3); opacity: 0.6; user-select: none; }
-
-/* Toolbar */
-.ds-file-toolbar {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: var(--space-2); flex-wrap: wrap;
-}
-/* Dense page header: one row, small heading, single-line muted lede. The
-   working surfaces (files, live, history, settings) lead with content, not a
-   display H1 + paragraph that costs the first 150px of every fold. */
-.ds-page-header-dense { margin: 0 0 var(--space-3); }
-.ds-page-header-dense-row { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
-.ds-page-header-dense-row h1 {
-  margin: 0; font-size: var(--fs-lg); line-height: 1.3; font-weight: 600;
-  letter-spacing: normal; flex: 0 0 auto;
-}
-.ds-page-header-dense-lede {
-  flex: 1 1 auto; min-width: 0;
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-  font-size: var(--fs-sm); color: var(--fg-3);
-}
-.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-page-header-dense-row { flex-wrap: wrap; }
-  .ds-page-header-dense-lede {
-    flex-basis: 100%; overflow: visible; text-overflow: clip; white-space: normal;
-  }
-}
-.ds-file-toolbar-left,
-.ds-file-toolbar-right {
-  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
-}
-/* Toolbar-scoped buttons: quiet, compact, rectangular - a toolbar is chrome,
-   not a CTA row; the stadium pill stays for real page-level actions. */
-.ds-file-toolbar .btn, .ds-file-toolbar .btn-ghost {
-  padding: 5px 12px; min-height: 32px;
-  border-radius: var(--r-1);
-  font-weight: 500;
-  background: transparent;
-  border: var(--bw-hair) solid var(--rule); color: var(--fg-2);
-}
-.ds-file-toolbar .btn:hover, .ds-file-toolbar .btn-ghost:hover { background: var(--bg-2); color: var(--fg); }
-@media (pointer: coarse) {
-  .ds-file-toolbar .btn, .ds-file-toolbar .btn-ghost { min-height: 44px; }
-}
-.ds-meta-mono {
-  font-family: var(--ff-mono); font-size: var(--fs-xs);
-  color: var(--fg-3); letter-spacing: var(--tr-caps);
-}
-
-/* Error banner — dismissible toast row. */
-.ds-error-banner {
-  padding: 10px 14px; border-radius: var(--r-2);
-  background: color-mix(in oklab, var(--warn) 14%, var(--bg));
-  border: var(--bw-hair) solid color-mix(in oklab, var(--warn) 40%, transparent);
-  color: var(--warn); font-size: var(--fs-sm); cursor: pointer;
-}
-.ds-error-banner:hover { background: color-mix(in oklab, var(--warn) 20%, var(--bg)); }
-
-/* Dropzone */
-.ds-dropzone {
-  border: var(--bw-rule) dashed var(--rule);
-  border-radius: var(--r-3); background: var(--bg);
-  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
-}
-.ds-dropzone-inner {
-  display: flex; align-items: center; justify-content: center;
-  gap: var(--space-2); flex-wrap: wrap;
-  padding: var(--space-4) var(--space-3); text-align: center;
-}
-.ds-dropzone-glyph { font-size: 22px; color: var(--fg-3); }
-.ds-dropzone-label { font-size: var(--fs-sm); color: var(--fg-3); }
-.ds-dropzone.dragover {
-  border-color: var(--accent);
-  background: var(--accent-tint);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .ds-dropzone.dragover { animation: ds-dropzone-pulse 1.1s var(--ease) infinite; }
-}
-.ds-dropzone.dragover .ds-dropzone-glyph,
-.ds-dropzone.dragover .ds-dropzone-label { color: var(--accent-ink); }
-@keyframes ds-dropzone-pulse {
-  0%, 100% { border-color: var(--accent); }
-  50% { border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
-}
-/* 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. */
-.ds-dropzone--wrap { position: relative; border: none; border-radius: 0; background: transparent; }
-.ds-dropzone--wrap > .ds-dropzone-inner { display: none; }
-.ds-dropzone--wrap.dragover > .ds-dropzone-inner {
-  display: flex; position: absolute; inset: 0; z-index: 5;
-  margin: 0; padding: var(--space-3);
-  align-items: center; justify-content: center;
-  background: color-mix(in srgb, var(--bg) 84%, transparent);
-  outline: var(--bw-rule) dashed var(--accent); outline-offset: -6px;
-  border-radius: var(--r-3);
-}
-.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-dropzone--wrap > .ds-dropzone-inner {
-    display: flex; position: static; padding: var(--space-2);
-    outline: none; background: transparent;
-  }
-}
-
-/* Upload progress */
-.ds-upload-progress { display: flex; flex-direction: column; gap: 6px; }
-.ds-upload-item {
-  display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px;
-  gap: var(--space-2); align-items: center;
-  padding: 8px 12px; border-radius: var(--r-2);
-  background: var(--bg-2); font-size: var(--fs-xs);
-}
-.ds-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-upload-bar {
-  height: 6px; border-radius: var(--r-pill);
-  background: var(--bg-3); overflow: hidden;
-}
-.ds-upload-fill {
-  display: block; height: 100%; width: 0;
-  background: var(--fg-3); border-radius: var(--r-pill);
-  transition: width var(--dur-base) var(--ease);
-}
-.ds-upload-fill.is-active { background: var(--accent); }
-/* Indeterminate: percent is unknown mid-transfer (fetch gives no chunk-level
-   progress) — a sliding marquee bar reads as "working", not stuck at 0%. */
-.ds-upload-bar.indeterminate .ds-upload-fill {
-  width: 40%; transition: none;
-  animation: ds-upload-marquee 1.1s ease-in-out infinite;
-}
-@keyframes ds-upload-marquee {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(250%); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .ds-upload-bar.indeterminate .ds-upload-fill { animation: none; width: 100%; opacity: 0.5; }
-}
-.ds-upload-pct {
-  font-family: var(--ff-mono); font-size: var(--fs-micro);
-  color: var(--fg-3); text-align: right;
-}
-.ds-upload-item.done .ds-upload-fill { background: var(--success); }
-.ds-upload-item.done .ds-upload-pct { color: var(--green); }
-.ds-upload-item.error .ds-upload-fill { background: var(--warn); }
-.ds-upload-item.error .ds-upload-pct { color: var(--warn); }
-/* Per-row upload recovery actions (replace / dismiss) — error rows are not dead ends. */
-.ds-upload-item { grid-template-columns: minmax(0, 1fr) minmax(60px, 120px) 44px auto; }
-@media (max-width: 480px) {
-  .ds-upload-item { grid-template-columns: minmax(0, 1fr) 44px; }
-  .ds-upload-bar { grid-column: 1 / -1; order: 3; }
-  .ds-upload-actions { grid-column: 1 / -1; justify-content: flex-end; }
-}
-.ds-upload-actions { display: inline-flex; gap: var(--space-1); justify-content: flex-end; }
-.ds-upload-act {
-  padding: 2px 10px; min-height: 24px; cursor: pointer;
-  background: var(--bg); border: var(--bw-hair) solid var(--rule); border-radius: var(--r-1);
-  color: var(--fg-2); font-family: var(--ff-body); font-size: var(--fs-micro);
-}
-.ds-upload-act:hover { background: var(--bg-3); color: var(--fg); }
-.ds-upload-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-@media (hover: none), (pointer: coarse) {
-  .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-file-act, .ds-file-sort-btn, .ds-crumb-seg, .ds-file-filter-input { min-height: 44px; }
-  .ds-file-act { min-width: 44px; }
-  .ds-file-check, .ds-file-selectall, .ds-density-btn { min-height: 44px; min-width: 44px; }
-}
-
-/* Empty state */
-.ds-file-empty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: var(--space-2); padding: var(--space-6) var(--space-3);
-  color: var(--fg-3); text-align: center;
-}
-.ds-file-empty-glyph { font-size: 34px; opacity: 0.55; }
-.ds-file-empty-text { font-size: var(--fs-sm); }
-
-/* -- Modals ------------------------------------------------- */
-.ds-modal-backdrop {
-  position: fixed; inset: 0; z-index: var(--z-modal, 800);
-  display: flex; align-items: center; justify-content: center;
-  /* 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);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .ds-modal-backdrop { animation: ds-modal-fade var(--dur-base) var(--ease); }
-}
-@keyframes ds-modal-fade { from { opacity: 0; } to { opacity: 1; } }
-.ds-modal {
-  display: flex; flex-direction: column;
-  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);
-  overflow: hidden;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .ds-modal { animation: ds-modal-rise var(--dur-base) var(--ease); }
-}
-@keyframes ds-modal-rise {
-  from { opacity: 0; transform: translateY(8px) scale(0.98); }
-  to   { opacity: 1; transform: none; }
-}
-.ds-modal-small { max-width: 380px; }
-.ds-modal-preview { max-width: 880px; }
-.ds-modal-head {
-  padding: var(--space-3) var(--space-4);
-  font-weight: 600; font-size: var(--fs-body);
-  border-bottom: var(--bw-hair) solid var(--rule);
-}
-.ds-modal-body { padding: var(--space-4); overflow: auto; font-size: var(--fs-sm); }
-.ds-modal-actions {
-  display: flex; justify-content: flex-end; gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-top: var(--bw-hair) solid var(--rule);
-}
-.ds-modal-input {
-  width: 100%; padding: 10px 12px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-2); color: var(--fg);
-  font-family: inherit; font-size: var(--fs-sm);
-}
-.ds-modal-input:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-/* iOS auto-zooms inputs under 16px on focus, breaking the modal layout. */
-@media (hover: none), (pointer: coarse) {
-  .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-modal-error {
-  margin: var(--space-2) 0 0; padding: 8px 10px;
-  border: var(--bw-hair) solid var(--flame); border-radius: var(--r-2);
-  background: color-mix(in oklab, var(--flame) 12%, var(--bg));
-  color: var(--flame); font-size: var(--fs-xs);
-}
-.btn-primary.danger {
-  background: var(--warn);
-  border-color: var(--warn);
-  color: var(--on-color);
-}
-.btn-primary.danger:hover { filter: brightness(0.92); border-color: var(--warn); }
-
-/* -- Preview ------------------------------------------------ */
-.ds-preview-head {
-  display: flex; align-items: center; gap: var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: var(--bw-hair) solid var(--rule);
-}
-.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-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-preview-actions { display: inline-flex; gap: 2px; margin-left: auto; }
-.ds-preview-body {
-  flex: 1; min-height: 0; overflow: auto;
-  padding: var(--space-3) var(--space-4);
-  display: flex; flex-direction: column;
-}
-.ds-preview-media {
-  max-width: 100%;
-  max-height: 70vh; max-height: 70dvh;
-  margin: 0 auto;
-  border-radius: var(--r-2); object-fit: contain;
-}
-.ds-preview-audio { width: 100%; }
-.ds-preview-code,
-.ds-preview-text {
-  margin: 0; flex: 1; min-height: 0; overflow: auto;
-  padding: var(--space-3);
-  background: var(--ink); color: var(--paper);
-  border-radius: var(--r-2);
-  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: var(--lh-base);
-  white-space: pre; tab-size: 2;
-}
-.ds-preview-text { white-space: pre-wrap; word-break: break-word; }
-.ds-preview-code code, .ds-preview-text code { font: inherit; color: inherit; background: none; }
-.ds-preview-truncated {
-  margin-top: var(--space-2); padding-top: var(--space-2);
-  border-top: var(--bw-hair) solid color-mix(in oklab, var(--paper) 20%, transparent);
-  color: var(--paper-3); font-size: var(--fs-micro);
-}
-.ds-preview-fallback {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: var(--space-2); padding: var(--space-6); color: var(--fg-3);
-}
-.ds-preview-glyph { font-size: 34px; opacity: 0.6; }
-
-/* Thin scrollbars inside preview bodies. */
-.ds-preview-code, .ds-preview-text, .ds-modal-body, .ds-preview-body {
-  scrollbar-width: thin;
-}
-.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-preview-code::-webkit-scrollbar-thumb,
-.ds-preview-text::-webkit-scrollbar-thumb {
-  background: color-mix(in oklab, var(--paper) 28%, transparent);
-  border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box;
-}
-.ds-preview-body::-webkit-scrollbar-thumb,
-.ds-modal-body::-webkit-scrollbar-thumb {
-  background: var(--bg-3); border-radius: var(--r-pill);
-}
-
-/* Mobile — modals go near-fullscreen, preview media shrinks. */
-@media (max-width: 560px) {
-  .ds-modal {
-    max-width: 100%;
-    max-height: calc(100vh - 2 * var(--space-3));
-    max-height: calc(100dvh - 2 * var(--space-3));
-  }
-  .ds-modal-preview {
-    width: 100%; max-height: none;
-    height: calc(100vh - 2 * var(--space-3));
-    height: calc(100dvh - 2 * var(--space-3));
-  }
-  .ds-preview-media { max-height: 50vh; max-height: 50dvh; }
-  .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-preview-head { flex-wrap: wrap; row-gap: 4px; }
-  .ds-preview-meta { display: none; }
-}
-
-/* ============================================================
-   Catalog / demo shell — a shared, compact framing for the preview/*.html
-   component galleries, so each preview stops hand-rolling its own <style>
-   (body padding, section margins, demo boxes). Mirrors webgeist's dense
-   catalog: a 240px sticky sidebar + capped main + a hairline-bordered,
-   flex-wrapping .ds-demo cell that packs variants inline and reflows.
-   ============================================================ */
-.ds-catalog { display: flex; min-height: 100vh; gap: 0; }
-.ds-catalog-side {
-  width: 240px; flex-shrink: 0;
-  border-right: var(--bw-hair) solid var(--rule);
-  padding: var(--space-3);
-  position: sticky; top: 0; height: 100vh; overflow-y: auto;
-}
-.ds-catalog-side h1 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
-.ds-catalog-side .subtitle { font-size: var(--fs-micro); color: var(--fg-3); margin: 0 0 var(--space-4); }
-.ds-catalog-side nav h4 {
-  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tr-label);
-  color: var(--fg-3); margin: var(--space-3) 0 var(--space-1);
-}
-.ds-catalog-side nav a {
-  display: block; padding: var(--space-half) 0; font-size: var(--fs-tiny);
-  color: var(--fg-2); text-decoration: none;
-}
-.ds-catalog-side nav a:hover { color: var(--accent-ink); }
-.ds-catalog-main { flex: 1; padding: var(--space-5); max-width: var(--measure-wide); min-width: 0; }
-.ds-catalog-section { margin-bottom: var(--space-5); padding-top: var(--space-3); border-top: var(--bw-hair) solid var(--rule); }
-.ds-catalog-section > h2 { font-size: var(--fs-h3-app); margin: 0 0 var(--space-3); }
-
-/* The gallery cell: a hairline-bordered, flex-wrapping bin that packs a
-   component's variants inline and reflows — the signature "showcase" frame. */
-.ds-demo {
-  border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-1);
-  padding: var(--space-3);
-  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
-  background: var(--bg);
-}
-.ds-demo + .ds-demo { margin-top: var(--space-2-75); }
-.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); }
-
-@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); }
-  .ds-catalog-main { padding: var(--space-3); }
-}
-
-/* -- File browser UX affordances ---------------------------- */
-/* Toolbar filter input — compact search box. */
-.ds-filter-input {
-  width: clamp(120px, 22vw, 220px);
-  padding: 7px 12px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-pill); color: var(--fg);
-  font-family: inherit; font-size: var(--fs-xs);
-}
-.ds-filter-input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
-
-/* Loading skeleton: FileSkeleton renders `.ds-file-grid.ds-file-skeleton` with
-   `.ds-file-row.ds-file-row-skeleton` rows whose inner `.ds-skel` children shimmer
-   (via .ds-skel::after). The container therefore inherits the .ds-file-grid layout
-   and must NOT be a single 48px gradient bar (that collapsed every row and double-
-   shimmered). The dead .ds-file-grid-loading rule + unused ds-skeleton-shimmer
-   keyframe were removed; only the inner .ds-skel children animate. */
-
-/* Drag-to-move drop target highlight on a directory row. */
-.ds-file-row.ds-drop-target {
-  border-color: var(--accent);
-  background: var(--accent-tint);
-  box-shadow: inset 0 0 0 1px var(--accent);
-}
-.ds-file-row[draggable="true"] { cursor: grab; }
-.ds-file-row[draggable="true"]:active { cursor: grabbing; }
-
-/* (A stale duplicate multi-select block used to live here: an absolute-overlay
-   .ds-file-check hidden until hover, plus .ds-file-check.on / .ds-file-row.selected
-   / .ds-bulk-bar rules NO component ever emits. Being later in source at equal
-   specificity it clobbered the real in-flow checkbox at ~1243 - the shipped
-   multi-select rendered invisible-until-hover with clipped brackets. The live
-   rules are the earlier block; only the still-load-bearing bits remain below.) */
-.ds-file-row { position: relative; }
-/* Touch / coarse-pointer devices have no hover — keep the per-row action
-   buttons (rename/delete/download) visible so the file manager is fully
-   reachable without a pointer (e.g. an iPad in landscape). */
-@media (hover: none), (pointer: coarse) {
-  .ds-file-actions { opacity: 1; }
-}
-
-/* Keyboard-shortcuts hint — compact two-column legend. */
-.ds-shortcuts-hint {
-  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 4px var(--space-3);
-  padding: var(--space-3) var(--space-4);
-  background: var(--bg-2); border: var(--bw-hair) solid var(--rule);
-  border-radius: var(--r-2); font-size: var(--fs-xs);
-}
-.ds-shortcut-row { display: flex; align-items: center; gap: var(--space-2); }
-.ds-shortcuts-hint .ds-kbd-label { flex: 1 1 auto; opacity: .85; }
-.ds-shortcuts-hint .ds-kbd { white-space: normal; max-width: 100%; }
-.ds-kbd-caps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
-.ds-kbd-sep { color: var(--fg-3); font-size: var(--fs-micro); padding: 0 2px; }
-.ds-kbd {
-  display: inline-block; min-width: 0;
-  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);
-  white-space: nowrap;
-}
-
-/* ============================================================
-   Theme toggle (segmented + compact) — bound to src/theme.js
-   ============================================================ */
-.ds-segmented {
-  display: inline-flex; gap: 0; padding: 2px;
-  background: var(--bg-2); border-radius: var(--r-pill);
-  font-family: var(--ff-mono); font-size: var(--fs-xs);
-}
-.ds-segmented .ds-seg-btn {
-  background: transparent; border: 0; color: var(--fg-3);
-  padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
-  display: inline-flex; align-items: center; gap: 6px;
-  transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
-}
-.ds-segmented .ds-seg-btn:hover { color: var(--fg); }
-.ds-segmented .ds-seg-btn:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.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);
-}
-.ds-theme-toggle.btn {
-  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). */
-.ds-theme-disc {
-  flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
-  border: var(--bw-hair) solid var(--fg-3);
-  background: linear-gradient(90deg, var(--fg-3) 0 50%, transparent 50% 100%);
-}
-
-/* ============================================================
-   Chat kit polish — styles every class emitted by Chat /
-   ChatMessage / ChatComposer / AICat. Before this block the
-   chat-* classes had no CSS and rendered as unstyled paragraphs.
-   ============================================================ */
-.chat {
-  display: flex; flex-direction: column;
-  flex: 1; min-height: 0; gap: var(--space-3);
-}
-.chat-head {
-  display: flex; align-items: baseline; gap: 8px;
-  padding: var(--space-3) 0 var(--space-2);
-  font-family: var(--ff-mono); font-size: var(--fs-xs);
-  color: var(--fg-3); text-transform: lowercase; letter-spacing: 0.02em;
-  border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
-  margin-bottom: var(--space-2);
-}
-.chat-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
-.chat-head .ds-chat-title,
-.chat-head > span:nth-child(2) {
-  font-family: var(--ff-body); font-size: var(--fs-h4);
-  font-weight: 600; color: var(--fg);
-  text-transform: none; letter-spacing: var(--tr-tight, -0.01em); line-height: 1.2;
-}
-.chat-head .sub { color: var(--fg-3); }
-.chat-head .spread { flex: 1; }
-
-.chat-thread {
-  display: flex; flex-direction: column; gap: var(--space-3);
-  flex: 1; min-height: 0; overflow-y: auto;
-  padding: var(--space-2) 0;
-  scrollbar-width: thin; scrollbar-color: var(--bg-3) transparent;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .chat-thread { scroll-behavior: smooth; }
-}
-.chat-thread::-webkit-scrollbar { width: 8px; }
-.chat-thread::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: var(--r-0); }
-.chat-empty {
-  margin: auto;
-  text-align: center;
-  color: var(--fg-3);
-  font-family: var(--ff-mono);
-  pointer-events: none;
-}
-.chat-empty-title { font-size: var(--fs-sm); margin: 0 0 var(--space-1); }
-.chat-empty-sub { font-size: var(--fs-tiny); margin: 0; opacity: .7; }
-
-.chat-msg { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; position: relative; min-width: 0; }
-.chat-msg.you { flex-direction: row-reverse; }
-.chat-msg.you .chat-stack { align-items: flex-end; }
-.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); }
-
-.chat-avatar {
-  width: 36px; height: 36px; flex-shrink: 0;
-  border-radius: 50%; background: var(--bg-3); color: var(--fg);
-  display: inline-flex; align-items: center; justify-content: center;
-  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
-  text-transform: lowercase; letter-spacing: 0.02em; user-select: none;
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
-  position: relative;
-}
-.chat-msg:hover .chat-avatar { transform: scale(1.03); box-shadow: 0 1px 4px color-mix(in oklab, var(--fg) 6%, transparent); }
-.chat-msg.you .chat-avatar {
-  background: color-mix(in oklab, var(--accent) 18%, var(--bg-3));
-  color: var(--accent-ink);
-}
-.chat-msg.aicat .chat-avatar {
-  background: color-mix(in oklab, var(--mascot) 26%, var(--bg-2));
-  color: var(--mascot-deep);
-}
-
-.chat-stack {
-  display: flex; flex-direction: column; gap: 4px;
-  max-width: min(70%, 56ch); min-width: 0;
-  flex: 0 1 auto; overflow: hidden;
-}
-
-.chat-bubble {
-  padding: 10px 14px; background: var(--bg-2); color: var(--fg);
-  max-width: 100%;
-  border-radius: var(--r-2); line-height: 1.55;
-  word-wrap: break-word; overflow-wrap: anywhere;
-  font-size: var(--fs-sm);
-  min-width: 0;
-  transition: transform 0.12s ease, box-shadow 0.12s ease;
-}
-.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). */
-.chat-msg.you .chat-bubble { background: var(--accent-tint); color: var(--fg); }
-.chat-msg.aicat .chat-bubble {
-  background: color-mix(in oklab, var(--mascot) 14%, var(--bg-2));
-  border: 1px solid color-mix(in oklab, var(--mascot) 28%, transparent);
-}
-.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: var(--r-0);
-}
-.chat-msg.you .chat-bubble code { background: color-mix(in oklab, var(--fg) 10%, transparent); }
-.chat-bubble a {
-  color: inherit; text-decoration: underline;
-  text-underline-offset: 2px; text-decoration-thickness: 1px;
-  text-decoration-color: color-mix(in oklab, currentColor 50%, transparent);
-}
-.chat-bubble a:hover { text-decoration-color: currentColor; }
-.chat-bubble strong { font-weight: 700; }
-.chat-bubble em { font-style: italic; }
-
-.chat-bubble.chat-md { line-height: 1.6; }
-.chat-bubble.chat-md > :first-child { margin-top: 0; }
-.chat-bubble.chat-md > :last-child { margin-bottom: 0; }
-.chat-bubble.chat-md h1,
-.chat-bubble.chat-md h2,
-.chat-bubble.chat-md h3,
-.chat-bubble.chat-md h4 {
-  font-family: var(--ff-body); font-weight: 600;
-  margin: var(--space-2) 0 var(--space-1); line-height: var(--lh-snug);
-}
-.chat-bubble.chat-md h1 { font-size: 1.15em; }
-.chat-bubble.chat-md h2 { font-size: 1.08em; }
-.chat-bubble.chat-md h3 { font-size: 1.04em; }
-.chat-bubble.chat-md p { margin: var(--space-2) 0; }
-.chat-bubble.chat-md ul,
-.chat-bubble.chat-md ol { margin: var(--space-2) 0; padding-left: 22px; }
-.chat-bubble.chat-md li { margin: var(--space-1) 0; }
-.chat-bubble.chat-md blockquote {
-  margin: var(--space-2) 0; padding: 4px 12px;
-  border-left: 3px solid color-mix(in oklab, currentColor 30%, transparent);
-  color: color-mix(in oklab, currentColor 75%, transparent); font-style: italic;
-}
-.chat-bubble.chat-md pre {
-  background: var(--bg);
-  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
-  padding: 12px 16px; border-radius: var(--r-1); overflow-x: auto;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.55;
-  color: var(--fg); margin: var(--space-2) 0;
-}
-/* When injectCodeCopy has wrapped the fence (.chat-code-block), reserve room
-   for the absolute .chat-code-lang tab. This selector outranks the bare
-   .chat-code-block pre reservation in chat.css, which the 2-class md pre
-   selector above would otherwise override. */
-.chat-code-block .chat-bubble.chat-md pre,
-.chat-bubble.chat-md .chat-code-block pre {
-  padding-top: calc(var(--space-3) + 4px);
-}
-/* Markdown tables + horizontal rules: agents routinely emit them, but they were
-   unstyled (bare unspaced cells, vanished rules). */
-.chat-bubble.chat-md table { border-collapse: collapse; width: auto; max-width: 100%; margin: 8px 0; font-size: .95em; display: block; overflow-x: auto; }
-.chat-bubble.chat-md th,
-.chat-bubble.chat-md td { border: var(--bw-hair) solid var(--rule); padding: 4px 10px; text-align: left; }
-.chat-bubble.chat-md th { background: color-mix(in oklab, var(--fg) 5%, transparent); font-weight: 600; }
-.chat-bubble.chat-md hr { border: 0; border-top: var(--bw-hair) solid var(--rule); margin: 12px 0; }
-
-.chat-msg .chat-bubble.chat-code,
-.chat-msg.you .chat-bubble.chat-code,
-.chat-bubble.chat-code {
-  padding: 0; background: var(--bg);
-  color: var(--fg);
-  border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
-  overflow: hidden; max-width: 100%; min-width: 0;
-}
-.chat-bubble.chat-code pre,
-.chat-bubble pre,
-.chat-msg pre {
-  max-width: 100%;
-  overflow-x: auto;
-  scrollbar-width: thin;
-  scrollbar-color: var(--bg-3) transparent;
-}
-.chat-bubble pre code,
-.chat-msg pre code {
-  display: block;
-  white-space: pre;
-  min-width: 0;
-}
-.chat-code-head {
-  display: flex; align-items: center; gap: 10px;
-  padding: 8px 12px;
-  background: color-mix(in oklab, var(--fg) 6%, var(--bg-2));
-  border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
-  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
-}
-.chat-code-head .lang { text-transform: uppercase; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.06em; }
-.chat-code-head .filename,
-.chat-code-head .name { color: var(--fg-2); font-weight: 500; }
-.chat-code-head .spread { flex: 1; }
-.chat-bubble.chat-code pre {
-  margin: 0; padding: 12px 16px; background: transparent;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); line-height: 1.55;
-  overflow-x: auto; color: var(--fg); border-radius: 0;
-}
-.chat-bubble.chat-code code { background: transparent; padding: 0; font-size: inherit; }
-.chat-bubble.chat-code .token.keyword,
-.chat-bubble.chat-code .token.atrule,
-.chat-bubble.chat-code .token.selector { color: var(--accent-ink); }
-.chat-bubble.chat-code .token.string,
-.chat-bubble.chat-code .token.attr-value { color: var(--code-str-alt, var(--mascot)); }
-.chat-bubble.chat-code .token.comment { color: var(--fg-3); font-style: italic; }
-.chat-bubble.chat-code .token.number,
-.chat-bubble.chat-code .token.boolean { color: var(--code-num, var(--sun)); }
-.chat-bubble.chat-code .token.punctuation { color: var(--fg-2); }
-.chat-bubble.chat-code .token.property,
-.chat-bubble.chat-code .token.attr-name { color: var(--code-keyword, var(--sky)); }
-
-.chat-msg.you .chat-image,
-.chat-msg .chat-image,
-.chat-image {
-  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);
-  transition: box-shadow 0.15s ease, border-color 0.15s ease;
-}
-.chat-msg:hover .chat-image,
-.chat-image:hover {
-  border-color: var(--rule);
-}
-.chat-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
-.chat-image .cap,
-.chat-image .caption { display: block; padding: 8px 12px; font-size: var(--fs-xs); color: var(--fg-3); font-family: var(--ff-mono); }
-
-.chat-msg.you .chat-file,
-.chat-msg .chat-file,
-.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: 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);
-}
-.chat-file:hover { background: var(--bg-3); }
-.chat-file .glyph {
-  font-size: 22px; width: 36px; height: 36px;
-  display: inline-flex; align-items: center; justify-content: center;
-  background: var(--bg-3);
-  color: var(--fg-2); border-radius: var(--r-0); flex-shrink: 0; font-family: var(--ff-mono);
-}
-.chat-file > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.chat-file .name {
-  font-weight: 600; font-size: var(--fs-sm);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
-}
-.chat-file .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
-.chat-file .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.chat-file .go { font-family: var(--ff-mono); font-size: 16px; color: var(--fg-3); flex-shrink: 0; }
-.chat-file:hover .go { color: var(--accent-ink); }
-
-.chat-msg.you .chat-pdf,
-.chat-msg .chat-pdf,
-.chat-pdf {
-  background: var(--bg-2);
-  color: var(--fg);
-  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-  border-radius: var(--r-1); overflow: hidden; max-width: min(100%, 480px);
-  transition: box-shadow 0.12s ease, border-color 0.12s ease;
-}
-.chat-msg:hover .chat-pdf { border-color: var(--rule); }
-.chat-pdf-head {
-  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
-  background: color-mix(in oklab, var(--fg) 5%, var(--bg-2));
-  border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
-}
-.chat-pdf-head .glyph { font-size: 18px; color: var(--mascot); flex-shrink: 0; }
-.chat-pdf-head .name { flex: 1; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.chat-pdf-head .size { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.chat-pdf-head a { color: var(--accent-ink); font-family: var(--ff-mono); font-size: var(--fs-xs); text-decoration: none; }
-.chat-pdf embed,
-.chat-pdf iframe,
-.chat-pdf object { width: 100%; height: 360px; border: 0; display: block; }
-
-.chat-msg.you .chat-link,
-.chat-msg .chat-link,
-.chat-link {
-  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: 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;
-}
-.chat-msg:hover .chat-link,
-.chat-link:hover {
-  background: var(--bg-3);
-}
-.chat-link:not(:has(.thumb)):not(:has(img)) { grid-template-columns: 1fr; }
-.chat-link .thumb,
-.chat-link img.thumb { width: 80px; height: 80px; border-radius: var(--r-0); object-fit: cover; background: var(--bg-3) center/cover no-repeat; }
-.chat-link .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
-.chat-link .host { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); text-transform: lowercase; }
-.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; }
-.chat-link .desc { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
-
-.chat-meta {
-  display: flex; align-items: center; gap: 6px;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3);
-  padding: 0 6px; letter-spacing: 0.02em;
-}
-.chat-meta .who { font-weight: 600; color: var(--fg-2); }
-.chat-meta .who::after { content: ' ·'; color: var(--fg-3); font-weight: 400; }
-.chat-meta .t { color: var(--fg-3); }
-.chat-meta .tick { color: var(--fg-3); margin-left: 2px; letter-spacing: -2px; font-family: var(--ff-mono); }
-.chat-meta .tick.read { color: var(--accent-ink); }
-
-.chat-reactions {
-  display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
-}
-.chat-reactions .rxn {
-  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: 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;
-}
-.chat-reactions .rxn:hover { background: var(--bg-3); transform: scale(1.06); }
-.chat-reactions .rxn.you {
-  background: color-mix(in oklab, var(--accent) 18%, var(--bg-2));
-  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
-  color: var(--accent-ink);
-}
-.chat-reactions .rxn .e { font-size: 14px; line-height: 1; }
-.chat-reactions .rxn .n { font-family: var(--ff-mono); font-weight: 600; font-size: 11px; color: var(--fg-2); }
-.chat-reactions .rxn.you .n { color: var(--accent-ink); }
-
-.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
-.chat-typing span {
-  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .chat-typing span {
-    animation: chat-typing-bounce 1.4s infinite ease-in-out;
-  }
-  .chat-typing span:nth-child(1) { animation-delay: 0s; }
-  .chat-typing span:nth-child(2) { animation-delay: 0.18s; }
-  .chat-typing span:nth-child(3) { animation-delay: 0.36s; }
-  @keyframes chat-typing-bounce {
-    0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
-    30% { transform: translateY(-5px); opacity: 1; }
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  @keyframes chat-fade-in {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .chat-msg {
-    animation: chat-fade-in 0.3s ease-out forwards;
-  }
-  .chat-msg:nth-child(1) { animation-delay: 0s; }
-  .chat-msg:nth-child(2) { animation-delay: 0.05s; }
-  .chat-msg:nth-child(3) { animation-delay: 0.1s; }
-  .chat-msg:nth-child(n+4) { animation-delay: 0.15s; }
-}
-
-/* Calm composer (claude.ai/code): ONE bordered rounded-rect shell holding the
-   context line, a borderless textarea, the hint, and an inline send button -
-   not a stadium pill + a floating round send. The shell carries the border and
-   the focus ring; the textarea fills it transparently. flex-wrap lets the
-   context line and hint occupy their own rows above/below the input row. */
-.chat-composer {
-  display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--space-2);
-  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
-  background: var(--bg);
-  /* The composer sits bg-on-bg: the 14% --rule hairline is ~1.3:1 on paper,
-     leaving the primary input near-invisible at rest - use the strong rule. */
-  border: var(--bw-hair) solid var(--rule-strong);
-  border-radius: var(--r-2);
-  /* A flat hairline box on a flat background is the single most-repeated
-     "looks unfinished" tell in the chat surface - the one control the user
-     types into every turn had no more visual weight than a settings card.
-     --shadow-1 (already defined kit-wide, just unused here) lifts it a hair
-     off the page at rest; the existing focus-within box-shadow overrides it. */
-  box-shadow: var(--shadow-1);
-  flex-shrink: 0;
-  transition: border-color var(--dur-snap) var(--ease), box-shadow var(--dur-snap) var(--ease);
-}
-.chat-composer:focus-within {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 18%, transparent);
-}
-.chat-composer.is-error,
-.chat-composer:has(textarea[aria-invalid="true"]) {
-  border-color: var(--flame);
-}
-.chat-composer.is-error:focus-within,
-.chat-composer:has(textarea[aria-invalid="true"]):focus-within {
-  box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 22%, transparent);
-}
-.chat-composer textarea {
-  flex: 1; min-width: 0; padding: 8px 4px;
-  background: none; color: var(--fg);
-  border: none; border-radius: 0;
-  font-family: inherit; font-size: var(--fs-sm);
-  /* 1.5 is the value that actually renders (a later polish block used to
-     re-declare it; the sizing block now states the truth). */
-  line-height: 1.5; resize: none;
-  min-height: 28px; max-height: 200px;
-  box-sizing: border-box;
-  /* Always auto, not focus-only: a capped-height composer that loses focus
-     while scrolled must still show its scrollbar - otherwise once the field
-     blurs there is zero cue that content exists below the fold. */
-  overflow-y: auto;
-  scrollbar-width: thin;
-}
-.chat-composer textarea::placeholder { color: var(--fg-3); }
-.chat-composer textarea:focus { background: none; border: none; box-shadow: none; outline: none; }
-.chat-composer .send {
-  border-radius: var(--r-1);
-  background: var(--accent); color: var(--accent-fg);
-  border: 0; cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-  transition: background var(--dur-snap, .15s) var(--ease, ease);
-}
-.chat-composer .send:disabled { opacity: .5; cursor: not-allowed; }
-/* Ghost icon buttons in the toolbar (attach / emoji / more). Size + radius are
-   owned by .chat-composer-toolbar .composer-btn in chat.css (32px / --r-1,
-   44px coarse); this base rule keeps only the shared appearance. */
-.composer-btn {
-  background: transparent; color: var(--fg-3);
-  border: 0; cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center;
-  flex-shrink: 0;
-  transition: background var(--dur-snap, .15s) var(--ease, ease), color var(--dur-snap, .15s) var(--ease, ease);
-}
-.composer-btn:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--fg); }
-.chat-composer .send:hover { filter: brightness(0.92); }
-.chat-composer .send:active { filter: brightness(0.94); }
-.chat-composer .send:focus-visible,
-.composer-btn:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-.chat-composer .send:disabled {
-  background: var(--bg-3); color: var(--fg-3); cursor: not-allowed; transform: none;
-}
-@media (prefers-reduced-motion: reduce) {
-  .chat-composer,
-  .chat-composer textarea,
-  .chat-composer .send,
-  .composer-btn { transition: none; }
-}
-
-.aicat-portrait { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; }
-.aicat-face {
-  width: 32px; height: 32px; font-size: 24px;
-  display: inline-flex; align-items: center; justify-content: center;
-  background: color-mix(in oklab, var(--mascot) 22%, var(--bg-2));
-  border-radius: 50%; flex-shrink: 0;
-}
-.aicat-meta { display: flex; flex-direction: column; font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-3); }
-.aicat-meta .name { color: var(--mascot-deep, var(--mascot)); font-weight: 600; }
-[data-theme="dark"] .aicat-meta .name, [data-theme="ink"] .aicat-meta .name { color: var(--mascot); }
-
-/* ============================================================
-   Sidebar polish: hide zero-count badges; tonal active state;
-   monospace count chips.
-   ============================================================ */
-.app-side .count {
-  padding: 1px 8px; font-size: var(--fs-micro); font-weight: 700;
-  font-family: var(--ff-mono); letter-spacing: 0.04em;
-  min-width: 18px; text-align: center;
-}
-.app-side a:has(> .count:empty) > .count,
-.app-side .count:empty { display: none; }
-.app-side a .glyph { font-family: var(--ff-mono); font-size: 13px; font-weight: 600; color: var(--fg-3); text-align: center; }
-.app-side a.active .glyph { color: var(--accent-ink); }
-
-/* -- select primitive --------------------------------------------------- */
-.ds-select {
-    width: 100%;
-    min-width: 0;
-    min-height: 32px; /* shared control floor with .btn/.btn-primary/.btn-ghost */
-    padding: 10px 30px 10px 14px; /* right gap clears the chevron */
-    background: var(--bg-2);
-    border: 0;
-    border-radius: var(--r-2);
-    font-family: inherit;
-    font-size: var(--fs-sm);
-    color: var(--fg);
-    /* Clip long option text gracefully - a select that cuts 'Claude Sonnet
-       (latest' mid-parenthesis reads as broken; ellipsis reads as truncated. */
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    appearance: none;
-    background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
-        linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
-    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
-    background-size: 5px 5px, 5px 5px;
-    background-repeat: no-repeat;
-    cursor: pointer;
-}
-.ds-select:focus-visible { box-shadow: var(--focus-ring-inset); }
-.ds-select:hover { background-color: var(--bg-3); }
-
-/* -- chat composer autogrow polish (sizing lives in the primary block) -- */
-.chat-composer textarea {
-    transition: height var(--dur-snap) var(--ease);
-}
-.chat-composer textarea:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-/* -- mobile responsive: chat -------------------------------------------- */
-@media (max-width: 768px) {
-    .chat-stack { max-width: 100%; }
-    .chat-msg { padding: 4px 0; }
-    .chat-msg:hover { padding: 4px 0; margin: 0; border-radius: 0; background: transparent; }
-    .chat-bubble { font-size: var(--fs-sm); padding: 10px 14px; }
-    .chat-avatar { width: 28px; height: 28px; font-size: 12px; }
-    .chat-composer { padding: 8px; }
-    .chat-composer textarea { padding: 10px 12px; }
-}
-
-/* --- landscape orientation: reduce vertical space for chrome + composer --- */
-@media (max-height: 500px) and (orientation: landscape) {
-    /* Keep horizontal padding: 0 put the textarea/focus ring flush on the edge. */
-    .chat-composer { padding: 6px var(--space-2); }
-    .chat-composer textarea { min-height: 36px; max-height: 96px; }
-    .chat-composer .chat-composer-hint,
-    .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. */
-    :root { --app-topbar-h: 40px; --app-crumb-h: 24px; }
-    .app-chrome { padding: 4px var(--pad-x); }
-    .app-status { display: none; }
-    .ws-crumb { min-height: 32px; }
-    .ds-hero { padding: var(--space-4) 0 var(--space-3); }
-    .ds-hero-title { font-size: clamp(28px, 6cqi, 56px); }
-}
-
-/* ============================================================
-   Enhanced UX: Component States, Drag-and-Drop, Context Menus
-   Comprehensive improvements for perfect UX across all surfaces
-   ============================================================ */
-
-/* ------------------------------------------------------------
-   Component States — Disabled, Loading, Error, Success
-   -------------------------------------------------------------- */
-
-/* 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). */
-.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
-.btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-disabled,
-button:disabled, [disabled] {
-  opacity: 0.6;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* Loading state — spinning indicator */
-@keyframes spinner-rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-/* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
-   busy indicator) via the shared spinner-rotate keyframe. Respects reduced
-   motion. Use instead of a decorative rotation glyph. */
-.ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
-@media (prefers-reduced-motion: reduce) { .ds-spin { animation: none; } }
-
-.loading { position: relative; }
-.loading::after {
-  content: '';
-  position: absolute; top: 50%; right: 12px;
-  width: 16px; height: 16px;
-  border: 2px solid var(--bg-3);
-  border-top-color: var(--accent);
-  border-radius: 50%;
-  animation: spinner-rotate 0.8s linear infinite;
-}
-
-/* Error state */
-.error, [data-state="error"],
-.row.error, input.error,
-textarea.error {
-  border-color: var(--warn) !important;
-  background-color: color-mix(in oklab, var(--warn) 6%, var(--bg));
-}
-.error::placeholder { color: color-mix(in oklab, var(--warn) 60%, var(--fg-3)); }
-
-/* Success state */
-.success, [data-state="success"],
-.row.success { background-color: color-mix(in oklab, var(--green-2) 6%, var(--bg)); }
-
-/* Readonly state */
-[readonly], .readonly {
-  background: var(--bg-2);
-  cursor: default;
-  opacity: 0.8;
-}
-
-/* ------------------------------------------------------------
-   Enhanced Button Micro-Interactions
-   -------------------------------------------------------------- */
-
-/* Button scale feedback on active */
-.btn:active:not(:disabled),
-.btn-primary:active:not(:disabled),
-.btn-ghost:active:not(:disabled),
-button:active:not(:disabled) {
-  transform: scale(0.98);
-}
-
-/* Enhanced hover transitions — transition only the properties that actually
-   change (not `all`, which animates layout and is a perf trap), and drop the
-   blanket `will-change` (it forces a permanent compositor layer per element). */
-.btn, .btn-primary, .btn-ghost,
-button, a.row, .row,
-.chip, [role="button"],
-input[type="checkbox"], input[type="radio"] {
-  transition: background-color var(--dur-snap) var(--ease),
-              color var(--dur-snap) var(--ease),
-              box-shadow var(--dur-snap) var(--ease),
-              transform var(--dur-snap) var(--ease);
-}
-
-/* Native checkbox/radio tint — browser default is UA blue, which fights the
-   single lime lead accent wherever a raw control lands outside a bespoke
-   toggle (e.g. signin's "remember me"). accent-color re-tints the native
-   control box without hand-drawing a replacement. */
-input[type="checkbox"], input[type="radio"] {
-  accent-color: var(--accent-ink);
-}
-
-/* Prevent double-tap zoom on buttons (iOS) */
-.btn, .btn-primary, .btn-ghost, button {
-  -webkit-user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
-/* ------------------------------------------------------------
-   Drag-and-Drop Styles
-   -------------------------------------------------------------- */
-
-/* Draggable element */
-[draggable="true"], .draggable {
-  cursor: grab;
-  user-select: none;
-}
-[draggable="true"]:active { cursor: grabbing; }
-
-/* Drag-over state */
-.drag-over {
-  border: 2px dashed var(--accent);
-}
-
-/* Drag-ghost (semi-transparent dragging element) */
-.drag-ghost {
-  opacity: 0.5;
-  transform: rotate(2deg) scale(0.95);
-}
-
-/* Drop-zone indicator */
-.drop-zone {
-  border: 2px dashed var(--rule-strong);
-  border-radius: var(--r-2);
-  padding: var(--space-4);
-  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
-  min-height: 120px;
-  display: flex; align-items: center; justify-content: center;
-  text-align: center; color: var(--fg-3);
-  transition: all var(--dur-snap) var(--ease);
-}
-.drop-zone.active {
-  border-color: var(--accent);
-  background: color-mix(in oklab, var(--accent) 10%, var(--bg));
-  color: var(--accent-ink);
-}
-
-/* List item reorder indicator */
-.list-item.dragging { opacity: 0.5; }
-.list-item.drag-before::before,
-.list-item.drag-after::after {
-  content: '';
-  position: absolute;
-  left: 0; right: 0; height: 2px;
-  background: var(--accent);
-}
-.list-item.drag-before::before { top: -2px; }
-.list-item.drag-after::after { bottom: -2px; }
-
-@keyframes pulse-line {
-  0%, 100% { opacity: 0.3; }
-  50% { opacity: 1; }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .list-item.drag-before::before,
-  .list-item.drag-after::after { animation: pulse-line 0.6s ease-in-out infinite; }
-}
-
-/* ------------------------------------------------------------
-   Context Menu Styles
-   -------------------------------------------------------------- */
-
-.ds-context-menu {
-  position: absolute;
-  background: var(--bg-2);
-  border: 1px solid var(--rule);
-  border-radius: var(--r-2);
-  box-shadow: var(--shadow-overlay);
-  min-width: 160px;
-  z-index: calc(var(--z-overlay, 1000) + 1);
-  padding: 4px 0;
-}
-
-@keyframes context-menu-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .ds-context-menu { animation: context-menu-in 0.15s ease-out; }
-}
-
-.ds-context-menu-item {
-  display: flex; align-items: center; gap: 10px;
-  padding: 10px 14px;
-  cursor: pointer;
-  color: var(--fg);
-  font-size: var(--fs-sm);
-  transition: background var(--dur-snap) var(--ease);
-}
-.ds-context-menu-item:hover {
-  background: var(--bg-3);
-  color: var(--accent-ink);
-}
-.ds-context-menu-item:active {
-  background: color-mix(in oklab, var(--accent) 20%, var(--bg-3));
-}
-.ds-context-menu-item.danger {
-  color: var(--warn);
-}
-.ds-context-menu-item.danger:hover {
-  background: color-mix(in oklab, var(--warn) 12%, var(--bg));
-}
-.ds-context-menu-divider {
-  height: 1px;
-  background: var(--rule);
-  margin: 4px 0;
-}
-.ds-context-menu-icon {
-  width: 16px; height: 16px;
-  flex-shrink: 0;
-  opacity: 0.7;
-}
-
-/* Context menu trigger indicator */
-[data-has-context-menu] {
-  cursor: context-menu;
-}
-
-/* ------------------------------------------------------------
-   Enhanced Form Inputs
-   -------------------------------------------------------------- */
-
-/* Base chrome for any BARE native control (outside .ds-field/.row-form/.input):
-   the same editorial tonal-fill + printed-baseline-rule as .ds-field, so a raw
-   <input> is never a browser-default white box in dark mode. The guards are
-   wrapped in :where() so they add ZERO specificity — the whole selector stays
-   at (0,1,1), exactly like `.ds-field input`, so the later .ds-field / .ds-field--sm
-   / .row-form descendant rules win by source order instead of being out-specified
-   (a bare :not(.input) counts as a class and would beat every .ds-field rule,
-   which clobbered the size variants). */
-input[type="text"]:where(:not(.input):not(.ds-search-input)),
-input[type="email"]:where(:not(.input):not(.ds-search-input)),
-input[type="password"]:where(:not(.input):not(.ds-search-input)),
-input[type="number"]:where(:not(.input):not(.ds-search-input)),
-input[type="search"]:where(:not(.input):not(.ds-search-input)),
-input[type="url"]:where(:not(.input):not(.ds-search-input)),
-input[type="tel"]:where(:not(.input):not(.ds-search-input)),
-textarea:where(:not(.input)),
-select:where(:not(.ds-select)) {
-  font: inherit; color: var(--fg);
-  background: var(--bg-2);
-  border: 0;
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
-              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
-  border-radius: var(--r-1);
-  padding: 0 var(--space-3);
-  transition: background var(--dur-snap) var(--ease),
-              border-color var(--dur-snap) var(--ease),
-              box-shadow var(--dur-snap) var(--ease);
-}
-/* Single-line bare controls snap to the field height; textarea keeps auto
-   height with symmetric padding (its content decides the box). */
-input[type="text"]:where(:not(.input):not(.ds-search-input)),
-input[type="email"]:where(:not(.input):not(.ds-search-input)),
-input[type="password"]:where(:not(.input):not(.ds-search-input)),
-input[type="number"]:where(:not(.input):not(.ds-search-input)),
-input[type="search"]:where(:not(.input):not(.ds-search-input)),
-input[type="url"]:where(:not(.input):not(.ds-search-input)),
-input[type="tel"]:where(:not(.input):not(.ds-search-input)),
-select:where(:not(.ds-select)) {
-  height: var(--field-height);
-}
-textarea:where(:not(.input)) { padding: var(--space-2) var(--space-3); min-height: calc(4 * 1.5em); }
-input[type="text"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="email"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="password"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="number"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="search"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="url"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-input[type="tel"]:where(:not(.input):not(.ds-search-input)):focus-visible,
-textarea:where(:not(.input)):focus-visible,
-select:where(:not(.ds-select)):focus-visible {
-  outline: none;
-  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);
-}
-
-input[type="text"]::placeholder,
-input[type="email"]::placeholder,
-input[type="password"]::placeholder,
-input[type="number"]::placeholder,
-input[type="search"]::placeholder,
-input[type="url"]::placeholder,
-textarea::placeholder {
-  color: var(--fg-3);
-}
-
-/* Long-form reading voice — quiet sans, generous line-height, capped to a
-   readable measure so a wide viewport never stretches body copy edge to
-   edge. Links use --accent-ink (never the bare fill, which is unreadable
-   as text). */
-.prose {
-  max-width: var(--measure);
-  font-family: var(--ff-body); font-size: var(--fs-body); line-height: 1.6;
-  color: var(--fg);
-}
-.prose p { margin: 0 0 var(--space-4) 0; }
-.prose p:last-child { margin-bottom: 0; }
-.prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
-.prose a:hover { text-decoration-color: currentColor; }
-
-/* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
-   slight built-in rotation (variants may override via inline transform for
-   a stronger tilt). Max 1 per page per the component's own caption. */
-.stamp {
-  display: inline-block;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
-  text-transform: uppercase; letter-spacing: 0.08em;
-  padding: var(--space-1-5, var(--space-2)) var(--space-3);
-  border: 2px solid var(--fg);
-  border-radius: var(--r-hair);
-  color: var(--fg);
-  transform: rotate(-2deg);
-  white-space: nowrap;
-}
-.stamp.ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
-.stamp.acid { background: var(--accent); border-color: var(--accent-ink); color: var(--accent-ink); }
-.stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
-.stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
-
-/* Same rubber-stamp face, but a real interactive <button> — resets UA button
-   chrome so it isn't blue link text in a browser default box. */
-.btn-stamp {
-  display: inline-block; cursor: pointer;
-  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: 700;
-  text-transform: uppercase; letter-spacing: 0.08em;
-  padding: var(--space-1-5, var(--space-2)) var(--space-3);
-  border: 2px solid var(--fg);
-  border-radius: var(--r-hair);
-  background: transparent; color: var(--fg);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.btn-stamp:hover { background: var(--panel-hover); }
-.btn-stamp.acid { border-color: var(--accent-ink); color: var(--accent-ink); }
-.btn-stamp.acid:hover { background: var(--accent-tint); }
-.btn-stamp.purple { border-color: var(--purple-2); color: var(--purple-2); }
-.btn-stamp.mascot { border-color: var(--mascot); color: var(--mascot-deep); }
-
-/* Structural hairlines — "no boxes, no cards, structure comes from rules."
-   Three weights: .rule (default separator), .rule-double (major section
-   break), .rule-dotted (optional/skippable). Applied to a bare <hr>, which
-   otherwise falls back to the browser's default inset groove line. */
-hr.rule, hr.rule-double, hr.rule-dotted {
-  width: 100%; height: 0; border: 0;
-}
-hr.rule { border-top: 1px solid var(--rule); }
-hr.rule-double { border-top: 3px double var(--rule-strong); }
-hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
-
-/* Hairline-only text input — no box, no fill. A single bottom rule that
-   thickens to 2px on focus, matching the row/rule zero-border aesthetic
-   instead of a browser-default boxed field. */
-.input {
-  display: block; width: 100%; box-sizing: border-box;
-  border: 0; border-bottom: 1px solid var(--rule-strong);
-  border-radius: var(--r-0);
-  background: transparent;
-  padding: var(--space-2) var(--space-1);
-  font: inherit; color: var(--fg);
-}
-.input::placeholder { color: var(--fg-3); }
-.input:focus-visible {
-  outline: none;
-  border-bottom-width: 2px;
-  border-bottom-color: var(--accent-ink);
-}
-
-/* -- Field controls: themed base for TextField / Select / SearchInput --
-   Root fix: previously only `transition` was set, so themed apps got
-   browser-default white boxes in dark mode and labels collided with inputs
-   because `.ds-field` had no layout. */
-.ds-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1, 6px);
-  align-items: stretch;
-  width: 100%;
-}
-.ds-field-label {
-  font-size: var(--fs-sm, 14px);
-  color: var(--fg-2);
-  line-height: 1.3;
-}
-.ds-field-hint {
-  font-size: var(--fs-tiny, 13px);
-  color: var(--fg-3);
-  line-height: 1.35;
-}
-.ds-field-count {
-  font-size: var(--fs-tiny, 13px);
-  color: var(--fg-3);
-  align-self: flex-end;
-}
-
-.ds-field input,
-.ds-field textarea,
-.ds-field .ds-select,
-.ds-search-input {
-  width: 100%;
-  box-sizing: border-box;
-  font: inherit;
-  color: var(--fg);
-  background: var(--bg-2);
-  border: 0;
-  /* Editorial field — tonal fill with a printed baseline rule that thickens to
-     the electric lead on focus, instead of a uniform hairline box. */
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
-              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
-  /* Tighter corner than the old --r-2 (14px): a dense pro control, not a soft
-     consumer box. Single-line controls snap to --field-height with h-only
-     padding so they align pixel-exact with buttons on the same --ctl-md rung. */
-  border-radius: var(--r-1);
-  height: var(--field-height);
-  padding: 0 var(--space-3);
-  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
-}
-/* textarea is multi-line: height is auto (min-height instead), keep symmetric
-   vertical padding so text doesn't sit flush to the top edge. */
-.ds-field textarea { height: auto; min-height: calc(4 * 1.5em); padding: var(--space-2) var(--space-3); resize: vertical; }
-
-/* Field size ladder (size prop on TextField/Select/SearchInput). md == base.
-   sm/lg retune height + h-padding + font off the --ctl-* ladder, matching the
-   button ladder so a form of mixed controls stays on one rhythm. */
-.ds-field--sm input, .ds-field--sm .ds-select, .ds-field--sm .ds-search-input {
-  height: var(--ctl-sm); padding: 0 var(--space-2-5); font-size: var(--fs-tiny);
-}
-.ds-field--sm textarea { height: auto; padding: var(--space-1-75) var(--space-2-5); font-size: var(--fs-tiny); }
-.ds-field--lg input, .ds-field--lg .ds-select, .ds-field--lg .ds-search-input {
-  height: var(--ctl-lg); padding: 0 var(--space-4); font-size: var(--fs-body);
-}
-.ds-field--lg textarea { height: auto; padding: var(--space-2-5) var(--space-4); font-size: var(--fs-body); }
-.ds-search-input::placeholder { color: var(--fg-3); }
-/* Only present when SearchInput is passed resultCount or has a value (clear
-   button) - transparent to any flex/grid layout the bare input previously
-   sat in directly. */
-.ds-search-input-wrap { display: contents; }
-
-/* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
-   ghost-icon treatment but sized to the kit's 44px touch-target floor
-   (app-shell.css already establishes this convention for .ds-file-check /
-   .ds-density-btn / .ds-upload-act etc). Positioned by the consumer's own
-   flex/grid context (ds-search-input-wrap is display:contents), so it simply
-   sits after the input in DOM order. */
-.ds-search-clear {
-  display: inline-flex;
-  align-items: center; justify-content: center;
-  min-width: 44px; min-height: 44px;
-  flex-shrink: 0;
-  cursor: pointer;
-  color: var(--fg-3);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  border-radius: var(--r-1);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
-.ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
-
-.ds-field input:focus-visible,
-.ds-field textarea:focus-visible,
-.ds-field .ds-select:focus-visible,
-.ds-search-input:focus-visible {
-  outline: none;
-  background: var(--bg);
-  /* Focus thickens the baseline to the lead accent — the printed-rule tell. */
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
-              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
-}
-.ds-field input:disabled,
-.ds-field textarea:disabled,
-.ds-field .ds-select:disabled {
-  opacity: .55;
-  cursor: not-allowed;
-}
-.ds-field input[aria-invalid="true"],
-.ds-field textarea[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
-}
-
-/* Clear button for text inputs */
-input[type="text"]:not(:placeholder-shown) + .input-clear,
-input[type="email"]:not(:placeholder-shown) + .input-clear,
-input[type="password"]:not(:placeholder-shown) + .input-clear {
-  display: inline-flex;
-}
-
-.input-clear {
-  display: none;
-  align-items: center; justify-content: center;
-  width: 32px; height: 32px;
-  cursor: pointer;
-  color: var(--fg-3);
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin-right: 8px;
-  border-radius: var(--r-1);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
-}
-.input-clear:hover {
-  background: var(--bg-2);
-  color: var(--fg);
-}
-
-/* ------------------------------------------------------------
-   Accessibility Enhancements
-   -------------------------------------------------------------- */
-
-/* Base focus-visible: 2px ring + 2px offset clears dark bg-3 surfaces (WCAG 1.4.11) */
-:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-
-/* Enhanced focus-visible for all interactive elements */
-[role="button"]:focus-visible,
-[role="link"]:focus-visible,
-[role="tab"]:focus-visible,
-.row:focus-visible,
-.row[tabindex]:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-
-/* Skip to main content link */
-.skip-to-main {
-  position: absolute; top: -40px; left: 0;
-  background: var(--fg); color: var(--bg);
-  padding: 8px 16px; border-radius: var(--r-1);
-  text-decoration: none; z-index: var(--z-overlay, 1000);
-}
-.skip-to-main:focus { top: 10px; }
-
-/* Reduced motion preferences — scoped to the DS surface so it doesn't reach
-   into and neutralize the host document's own motion. */
-@media (prefers-reduced-motion: reduce) {
-  .ds-247420 *, .app * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-  /* Kill the residual paint frame of looping skeleton/shimmer placeholders and
-     give reduced-motion users a steady placeholder fill instead. */
-  .skeleton, .ds-skeleton, .ds-session-row-skeleton .ds-skel {
-    animation: none !important;
-    background: var(--bg-2) !important;
-  }
-}
-
-/* ------------------------------------------------------------
-   Performance
-   -------------------------------------------------------------- */
-
-/* Limit layout/style containment to self-contained components. `paint` is
-   intentionally omitted — it clips focus rings, tooltips and dropdowns that
-   emanate from a contained .row/.btn. */
-.panel, .row {
-  contain: layout style;
-}
-
-/* ------------------------------------------------------------
-   Mobile Touch Optimizations
-   -------------------------------------------------------------- */
-
-@media (hover: none) and (pointer: coarse) {
-  /* Mobile devices: larger touch targets, faster responses */
-  .btn, .btn-primary, .btn-ghost,
-  button, a.row, [role="button"],
-  .ds-icon-btn, .composer-btn {
-    min-height: 48px;
-    min-width: 48px;
-    padding: 12px 20px;
-  }
-  /* Icon buttons stay square — the padding bump above would distort them. */
-  .ds-icon-btn, .composer-btn { padding: 0; }
-
-  /* Remove hover effects on touch devices (use active instead) */
-  .btn:hover, .btn-primary:hover, .btn-ghost:hover {
-    background-color: inherit;
-  }
-
-  /* Momentum scrolling for iOS */
-  .app-side, .panel, .row {
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Long-press feedback for drag-enabled items */
-  [draggable="true"], .draggable {
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-  }
-}
-
-/* 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-icon-btn, .ds-icon-btn-xs, .ds-icon-btn-sm, .ds-icon-btn-base {
-    min-width: 44px; min-height: 44px;
-  }
-  .btn, .btn-primary, .btn-ghost,
-  .app-topbar nav a, .app-side a { min-height: 44px; }
-}
-
-/* ------------------------------------------------------------
-   Theme Transition Smoothness
-   -------------------------------------------------------------- */
-
-/* Scoped to the DS wrapper so the design system never reaches out and
-   animates the host document's html/body. */
-.ds-247420, .app {
-  transition: background-color var(--dur-base) var(--ease),
-              color var(--dur-base) var(--ease);
-}
-
-/* ------------------------------------------------------------
-   Empty State & Loading States
-   -------------------------------------------------------------- */
-
-/* Skeleton loading state */
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--bg-2) 0%,
-    var(--bg-3) 50%,
-    var(--bg-2) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-load 1.5s infinite;
-  border-radius: var(--r-2);
-}
-
-@keyframes skeleton-load {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-.skeleton-line { height: 12px; margin-bottom: 12px; }
-.skeleton-title { height: 24px; margin-bottom: 16px; width: 60%; }
-
-/* ------------------------------------------------------------
-   Toast Notification Styles
-   -------------------------------------------------------------- */
-
-.toast {
-  position: fixed;
-  bottom: 24px; right: 24px;
-  background: var(--bg-2);
-  border: 1px solid var(--rule);
-  border-radius: var(--r-2);
-  padding: var(--space-3) var(--space-4);
-  max-width: 320px;
-  box-shadow: var(--shadow-overlay);
-  z-index: calc(var(--z-overlay, 1000) + 10);
-}
-
-@keyframes toast-slide-in {
-  from {
-    opacity: 0;
-    transform: translateX(400px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .toast { animation: toast-slide-in 0.3s ease-out; }
-}
-
-.toast.error { border-color: var(--warn); }
-.toast.success { border-color: var(--green-2); }
-/* --sun measures well under 3:1 against every app background (1.1-1.5:1) -
-   a border effectively invisible in light theme; --amber is the tuned sibling
-   warning tone already used for this exact severity elsewhere. */
-.toast.warning { border-color: var(--amber); }
-
-@media (max-width: 480px) {
-  .toast {
-    bottom: 16px; right: 16px; left: 16px;
-    max-width: none;
-  }
-}
-
-/* ============================================================
-   Spinner — animated loading indicator
-   ============================================================ */
-.ds-spinner {
-  display: inline-flex;
-  gap: 4px;
-  align-items: center;
-  height: 16px;
-}
-.ds-spinner span {
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--accent);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .ds-spinner span { animation: ds-bounce 1.4s infinite ease-in-out; }
-  .ds-spinner span:nth-child(1) { animation-delay: 0s; }
-  .ds-spinner span:nth-child(2) { animation-delay: 0.18s; }
-  .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-sm { height: 12px; gap: 2px; }
-.ds-spinner-sm span { width: 2px; height: 2px; }
-
-.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; }
-
-@keyframes ds-bounce {
-  0%, 80%, 100% { transform: translateY(0); }
-  40% { transform: translateY(-8px); }
-}
-
-/* ============================================================
-   Skeleton — animated loading placeholder
-   ============================================================ */
-.ds-skeleton-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.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);
-}
-
-@keyframes ds-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-/* ============================================================
-   Alert — contextual message banner
-   ============================================================ */
-.ds-alert {
-  display: flex;
-  gap: var(--space-3);
-  align-items: flex-start;
-  padding: var(--space-3) var(--space-4);
-  border-radius: var(--r-1);
-  background: var(--panel-1);
-  border: 1px solid var(--rule-strong);
-  color: var(--fg);
-}
-
-.ds-alert-info { --alert-tone: var(--sky); }
-.ds-alert-success { --alert-tone: var(--green); }
-.ds-alert-warn { --alert-tone: var(--amber); }
-.ds-alert-error { --alert-tone: var(--warn); }
-
-.ds-alert-icon {
-  flex-shrink: 0;
-  color: var(--alert-tone);
-  font-weight: 600;
-  min-width: 20px;
-  text-align: center;
-}
-
-.ds-alert-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.ds-alert-title {
-  font-weight: 500;
-  font-size: var(--fs-sm);
-}
-
-.ds-alert-message {
-  font-size: var(--fs-sm);
-  color: var(--fg-2);
-}
-.ds-alert-retry { margin-top: var(--space-2); }
-
-.ds-alert-dismiss {
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--fg-3);
-  padding: 0;
-  font-size: 14px;
-  line-height: 1;
-  min-width: 20px;
-  text-align: center;
-  transition: color var(--dur-snap) var(--ease);
-}
-.ds-alert-dismiss:hover { color: var(--fg); }
-
-/* ============================================================
-   Responsive Perfection — Drawer rail, ultrawide cap, mobile compact
-   ============================================================ */
-
-/* Tablet + Mobile: side rail becomes off-canvas drawer (≤900px) */
-/* Sidebar drawer collapse keys on the SHELL width (@container on .app, which is
-   container-type:inline-size) — NOT the viewport. Full-page (freddie) the shell
-   == viewport so this is identical to the old @media(max-width:900px); embedded
-   in a thebird WM window the drawer + hamburger appear when the WINDOW is narrow
-   even on a wide desktop. Drawer/scrim/toggle are absolute (anchored to .app), so
-   they overlay the window, not the page. */
-@container (max-width: 900px) {
-  .app-body,
-  .app-body.no-side { grid-template-columns: 1fr !important; }
-  .app-side-shell {
-    position: absolute;
-    /* 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);
-    /* 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. */
-  .app-body.side-open .app-main { overflow: hidden; }
-  .app-side-shell.open,
-  .app-side.open,
-  .app-body.side-open .app-side-shell { transform: translateX(0); }
-  .app-side {
-    flex-direction: column !important;
-    flex-wrap: nowrap !important;
-    gap: var(--space-2);
-    padding: var(--space-3);
-    font-size: var(--fs-sm);
-  }
-  .app-side a {
-    flex: 0 0 auto; min-width: 0;
-    grid-template-columns: 18px 1fr auto;
-    padding: 10px 12px;
-  }
-  .app-side .group { width: 100%; }
-  /* Keep the crumb on mobile — apps mount contextual controls (model picker,
-     actions, live status) in crumb-right, so hiding it strands them. Collapse
-     the breadcrumb trail/leaf instead and let the right cluster wrap. */
-  .app-crumb { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 8px 12px; }
-  .app-crumb > .sep, .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
-  .app-crumb .crumb-right { margin-left: 0; }
-  .chat-head { padding: var(--space-2) var(--space-3) var(--space-2); margin-bottom: var(--space-2); }
-  .app-main { padding-left: var(--space-3); padding-right: var(--space-3); }
-}
-
-/* Drawer scrim — absolute so it covers THIS shell, shown when drawer open and
-   the shell is narrow (@container on .app). */
-.app-side-scrim {
-  display: none;
-  position: absolute; inset: 0;
-  background: color-mix(in oklab, var(--bg) 60%, transparent);
-  /* 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) {
-  .app-body.side-open .app-side-scrim { display: block; }
-}
-
-/* Nav toggle (hamburger) — hidden when the shell is wide, shown when the shell
-   itself is narrow (@container on .app). Absolute so it sits in THIS shell's
-   topbar, not pinned to the viewport corner. */
-.app-side-toggle {
-  display: none;
-  position: absolute; top: calc((var(--app-topbar-h) - 44px) / 2); left: 10px;
-  /* 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;
-  align-items: center; justify-content: center;
-  font-size: 18px; line-height: 1;
-  background: var(--bg-2); color: var(--fg);
-  border: 1px solid var(--rule, color-mix(in oklab, var(--fg) 12%, transparent));
-  border-radius: var(--r-1, 6px);
-  cursor: pointer;
-}
-.app-side-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-@container (max-width: 900px) {
-  .app-side-toggle { display: inline-flex; }
-  .app-topbar .brand { margin-left: 44px; }
-  /* Merged-chrome layout (.app-chrome > .app-crumb) puts the breadcrumb, not
-     the topbar brand, at the left edge where the absolute-positioned toggle
-     sits — without this the crumb text renders directly under the button. */
-  .app-chrome > .app-crumb { margin-left: 44px; }
-}
-
-/* Desktop: the app shell is exactly viewport-height and contains its own
-   scroll, so only .app-main (and the side rail) scroll — never the page too.
-   Pinning .app to 100dvh + overflow:hidden is what prevents the double
-   scrollbar that a min-height:100vh shell + inner overflow:auto produces.
-   .app-body fills the gap between topbar/crumb and status via flex:1 rather
-   than a hand-computed calc() that drifts from the real chrome heights. */
-@media (min-width: 901px) {
-  .app { height: 100dvh; min-height: 0; overflow: hidden; }
-  /* Embedded shell (freddie WM window) fills its container, not the viewport. */
-  .fd-root .app { height: 100%; overflow: visible; }
-  .app-body { min-height: 0; flex: 1 1 auto; }
-  .app-side-shell { overflow-y: auto; min-height: 0; }
-  .app-main { overflow-y: auto; min-height: 0; }
-}
-
-/* Mobile (≤480) status bar compact; hide tail item */
-@media (max-width: 480px) {
-  .app-status {
-    font-size: var(--fs-micro);
-    padding: 4px var(--space-2);
-    gap: var(--space-2);
-  }
-  .app-status > :last-child:not(:only-child) { display: none; }
-}
-
-/* Tiny phone (≤360) topbar compact */
-@media (max-width: 360px) {
-  .app-topbar {
-    padding: 8px var(--space-2);
-    font-size: var(--fs-xs);
-    gap: var(--space-2);
-  }
-  .app-topbar nav,
-  .app-topbar > :last-child { display: none; }
-  .brand { font-size: var(--fs-tiny); }
-  /* Slightly narrower drawer on tiny phones; max-width:80% remains the guard. */
-  .app-side-shell { width: 260px; }
-}
-
-/* ----------------------------------------------------------------------------
-   WorkspaceShell — Claude-Desktop / cowork three-column app shell.
-   Columns: [ws-rail] [ws-sessions?] [ws-content] [ws-pane?]
-   Collapse via .ws-rail-collapsed / .ws-pane-collapsed classes on .ws-shell.
-   All sizing/colour from kit tokens; no hardcoded palette.
----------------------------------------------------------------------------- */
-.ws-shell {
-  /* Fluid chrome columns: shrink on small laptops, breathe on ultrawide, so the
-     ~848px of fixed chrome no longer eats a constant slab. An inline --ws-*-w
-     written by a resize drag overrides these (inline wins), pinning the width. */
-  --ws-rail-w: clamp(200px, 16vw, 260px);
-  --ws-rail-w-collapsed: 60px;
-  --ws-sessions-w: clamp(248px, 22vw, 360px);
-  --ws-pane-w: clamp(288px, 24vw, 420px);
-  display: grid;
-  grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) 1fr var(--ws-pane-w);
-  grid-template-areas: "rail sessions content pane";
-  height: 100%;
-  min-height: 0;
-  background: var(--bg);
-  color: var(--fg);
-}
-.ws-shell.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr var(--ws-pane-w); grid-template-areas: "rail content pane"; }
-.ws-shell.ws-no-pane.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr; grid-template-areas: "rail content"; }
-.ws-shell.ws-no-pane:not(.ws-no-sessions) { grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) 1fr; grid-template-areas: "rail sessions content"; }
-/* G1 stable frame: when a tab has no pane but asks to keep the column geometry
-   (ws-no-pane + ws-pane-collapsed), KEEP the 4-track grid with the pane track
-   at width 0 instead of collapsing to a 3-track layout - so the shell does not
-   re-flow its column count on tab switch. The pane track stays present (0px),
-   so chat/history/files/live/settings share one geometry. */
-.ws-shell.ws-no-pane.ws-pane-collapsed:not(.ws-no-sessions) { grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) 1fr var(--ws-pane-w); grid-template-areas: "rail sessions content pane"; }
-.ws-shell.ws-no-pane.ws-pane-collapsed.ws-no-sessions { grid-template-columns: var(--ws-rail-w) 1fr var(--ws-pane-w); grid-template-areas: "rail content pane"; }
-.ws-shell.ws-rail-collapsed { --ws-rail-w: var(--ws-rail-w-collapsed); }
-.ws-shell.ws-pane-collapsed { --ws-pane-w: 0px; }
-/* Sessions column desktop collapse (parity with the pane collapse), reclaiming
-   its width for a full-width thread/grid. */
-.ws-shell.ws-sessions-collapsed { --ws-sessions-w: 0px; }
-.ws-sessions-collapsed .ws-sessions { overflow: hidden; border-right: none; }
-.ws-sessions-collapsed .ws-sessions > * { display: none; }
-/* 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. */
-.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; }
-.ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
-.ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); }
-.ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
-.ws-resizer.ws-resizer-rail { grid-column: 1; }
-.ws-resizer.ws-resizer-sessions { grid-column: 2; }
-.ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
-/* A resizer must vanish once its TRACK is removed by the staging media blocks,
-   else dragging it writes a --ws-*-w var that no longer affects the now-fixed
-   drawer (a dead handle). Mirror the 1480 / 1100 / 900 staging exactly. */
-@media (max-width: 1480px) { .ws-resizer.ws-resizer-pane { display: none; } }
-@media (max-width: 1100px) { .ws-resizer.ws-resizer-sessions { display: none; } }
-@media (max-width: 900px)  { .ws-resizer { display: none; } }
-/* A resizer must also vanish once its TRACK is desktop-collapsed: a 0px (pane/
-   sessions) or 60px icon-only (rail) track has no width to drag, and a drag would
-   write an INLINE --ws-*-w that overrides the collapse var (inline wins), fighting
-   the collapse state. Mirror the breakpoint guards for the collapse classes. */
-.ws-rail-collapsed .ws-resizer-rail,
-.ws-sessions-collapsed .ws-resizer-sessions,
-.ws-pane-collapsed .ws-resizer-pane { display: none; }
-/* Coarse-pointer hit target for hybrid touch laptops above the drawer breakpoint
-   (the 8px sliver is un-grabbable by touch). */
-@media (pointer: coarse) { .ws-resizer { width: 16px; margin-right: -8px; } }
-/* Ease the rail/pane collapse. Track COUNT stays stable on collapse (only a
-   width var flips), so grid-template-columns is animatable; reduced-motion
-   drops it to an instant swap. */
-@media (prefers-reduced-motion: no-preference) {
-  .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) {
-  .ws-shell { max-width: 1920px; margin-inline: auto; }
-}
-
-/* Rail (left nav) */
-.ws-rail {
-  grid-area: rail;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: var(--bg-2);
-  border-right: var(--bw-hair) solid var(--bg-3);
-  overflow: hidden;
-  transition: width var(--dur-base) var(--ease);
-}
-.ws-rail-toggle {
-  position: absolute; top: var(--space-2); right: var(--space-2);
-  width: 36px; height: 36px;
-  display: inline-flex; align-items: center; justify-content: center;
-  background: transparent; border: none; color: var(--fg-2);
-  border-radius: var(--r-1); cursor: pointer;
-}
-.ws-rail-toggle:hover { background: var(--bg-3); color: var(--fg); }
-.ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
-.ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
-.ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
-.ws-rail-action {
-  display: flex; align-items: center; gap: var(--space-2);
-  padding: var(--space-2) var(--space-3); margin: var(--space-1) 0;
-  background: var(--accent); color: var(--accent-fg, var(--bg));
-  border: none; border-radius: var(--r-1); cursor: pointer;
-  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 600;
-  min-height: 40px; white-space: nowrap; overflow: hidden;
-}
-.ws-rail-action:hover { filter: brightness(0.92); }
-.ws-rail-action:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.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; }
-.ws-rail-item {
-  display: flex; align-items: center; gap: var(--space-2);
-  width: 100%; padding: var(--space-2); min-height: 44px;
-  background: transparent; border: none; color: var(--fg-2);
-  border-radius: var(--r-1); cursor: pointer; text-align: left;
-  font-family: var(--ff-body); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
-}
-.ws-rail-item:hover { background: var(--bg-3); color: var(--fg); }
-.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); }
-.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); }
-
-/* Collapsed rail: icon-only — hide text labels, center icons, drop toggle's far-right pin */
-.ws-rail-collapsed .ws-rail-brand,
-.ws-rail-collapsed .ws-rail-action-label,
-.ws-rail-collapsed .ws-rail-item-label,
-.ws-rail-collapsed .ws-rail-item-count { display: none; }
-.ws-rail-collapsed .ws-rail-item,
-.ws-rail-collapsed .ws-rail-action { justify-content: center; gap: 0; }
-.ws-rail-collapsed .ws-rail-head { justify-content: center; }
-
-/* Sessions column */
-.ws-sessions {
-  grid-area: sessions;
-  min-height: 0; display: flex; flex-direction: column;
-  /* Rail and pane both sit on --bg-2 (a recessed plane framing the elevated
-     --bg content column); sessions used flat --bg instead, so the
-     conversation list and the chat thread read as the SAME surface with only
-     a 1px hairline between them - the flattest, most "one big beige box"
-     tell in the shell. --bg-2 restores the three-plane depth (rail/sessions
-     recessed either side, content elevated in the middle) the design
-     already establishes everywhere else. */
-  background: var(--bg-2); border-right: var(--bw-hair) solid var(--bg-3);
-  overflow: hidden;
-}
-.ws-no-sessions .ws-sessions { display: none; }
-
-/* Content column */
-.ws-content { grid-area: content; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
-/* Crumb band is the top chrome of the content column: a stable height so the
-   top edge aligns with the rail head, and a left gutter matching .ws-main so
-   the trail text is not flush against the rail border. */
-.ws-crumb { flex: 0 0 auto; min-height: calc(var(--app-crumb-h) + var(--space-3)); padding: 0 var(--space-5); display: flex; align-items: center; gap: var(--space-1); border-bottom: var(--bw-hair) solid var(--bg-3); }
-.ws-crumb-main { flex: 1 1 auto; min-width: 0; }
-/* Content column gutter. Claude-Code-class calm: file grid / dashboard / event
-   list / history get a generous, consistent inner gutter instead of butting
-   against the 1px column borders. The chat tab opts out via .ws-main--flush
-   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; }
-.ws-main:focus { outline: none; }
-
-/* Right context pane */
-.ws-pane {
-  grid-area: pane; position: relative;
-  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;
-}
-.ws-pane-collapsed .ws-pane { width: 0; border-left: none; }
-.ws-pane-collapsed .ws-pane > * { display: none; }
-@media (pointer: coarse) {
-  .ws-rail-toggle { width: 44px; height: 44px; }
-  .ws-drawer-toggle { width: 44px; height: 44px; }
-  .ws-desktop-toggle { width: 44px; height: 44px; }
-}
-
-/* Drawer toggles and the scrim are hidden by default and revealed by the staged
-   media blocks BELOW - these base rules must precede those blocks in source
-   order: at equal specificity the later rule wins regardless of media, so a
-   trailing display:none silently kills every drawer affordance (shipped bug:
-   the mobile drawers were dead because these lines used to sit last). */
-.ws-drawer-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: none; color: var(--fg-2); cursor: pointer; border-radius: var(--r-1); }
-/* Desktop-only chrome toggle (sessions collapse): inverse of the mobile drawer-toggle. */
-.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); }
-.ws-desktop-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-desktop-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-@media (max-width: 900px) { .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
-   drawer-toggle), so hide this crumb control past that breakpoint. */
-@media (max-width: 1480px) { .ws-pane-toggle { display: none; } }
-@media (max-width: 480px) { .ds-247420 .ws-crumb { padding-left: var(--space-2); padding-right: var(--space-2); } }
-.ws-scrim { display: none; }
-
-/* Responsive: the columns yield to the CONTENT in stages - the main column is
-   the product, so the right pane gives way first, the sessions list second,
-   and only below 900px does the rail itself drop to a fixed icon strip. Yielded
-   columns stay reachable as overlay drawers (.ws-pane-open / .ws-sessions-open,
-   toggled from the crumb bar) over a shared fade scrim. Before this staging the
-   4-track grid survived down to 901px and crushed the chat thread to ~245px
-   while the 320px context pane kept its full width. */
-
-/* Stage 1 (<=1480px): drop the pane TRACK; the context pane becomes a right
-   overlay drawer. */
-@media (max-width: 1480px) {
-  .ws-shell,
-  .ws-shell.ws-no-pane,
-  .ws-shell.ws-pane-collapsed,
-  .ws-shell.ws-no-pane.ws-pane-collapsed:not(.ws-no-sessions) {
-    grid-template-columns: var(--ws-rail-w) var(--ws-sessions-w) minmax(0, 1fr);
-    grid-template-areas: "rail sessions content";
-  }
-  .ws-shell.ws-no-sessions,
-  .ws-shell.ws-no-pane.ws-no-sessions,
-  .ws-shell.ws-no-pane.ws-pane-collapsed.ws-no-sessions {
-    grid-template-columns: var(--ws-rail-w) minmax(0, 1fr);
-    grid-template-areas: "rail content";
-  }
-  /* Drawer width is a literal: --ws-pane-w is 0px while pane-collapsed, and a
-     desktop-collapsed pane must still open as a full drawer. */
-  .ws-pane {
-    position: fixed; inset: 0 0 0 auto;
-    width: min(340px, 85vw);
-    z-index: 42; transform: translateX(110%);
-    transition: transform var(--dur-base) var(--ease);
-  }
-  .ws-shell.ws-pane-open .ws-pane { transform: translateX(0); width: min(340px, 85vw); }
-  .ws-shell.ws-pane-open.ws-pane-collapsed .ws-pane { border-left: var(--bw-hair) solid var(--bg-3); }
-  .ws-shell.ws-pane-open.ws-pane-collapsed .ws-pane > * { display: revert; }
-  .ws-pane-drawer-toggle { display: inline-flex; }
-  /* Scrim is always present from this stage down so it FADES with the drawer
-     instead of hard-appearing; pointer-events gate keeps it inert while closed. */
-  .ws-scrim { display: block; opacity: 0; pointer-events: none; position: fixed; inset: 0; z-index: 41; background: color-mix(in srgb, var(--fg) 38%, transparent); transition: opacity var(--dur-base) var(--ease); }
-  .ws-shell.ws-sessions-open .ws-scrim, .ws-shell.ws-pane-open .ws-scrim { opacity: 1; pointer-events: auto; }
-}
-
-/* Stage 2 (<=1100px): drop the sessions TRACK; the conversation list becomes a
-   left overlay drawer. */
-@media (max-width: 1100px) {
-  .ws-shell,
-  .ws-shell.ws-no-pane,
-  .ws-shell.ws-pane-collapsed,
-  .ws-shell.ws-no-sessions,
-  .ws-shell.ws-no-pane.ws-no-sessions,
-  .ws-shell.ws-no-pane.ws-pane-collapsed:not(.ws-no-sessions),
-  .ws-shell.ws-no-pane.ws-pane-collapsed.ws-no-sessions {
-    grid-template-columns: var(--ws-rail-w) minmax(0, 1fr);
-    grid-template-areas: "rail content";
-  }
-  .ws-sessions {
-    position: fixed; inset: 0 auto 0 0;
-    /* 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;
-  }
-  .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. */
-  .ws-shell.ws-sessions-collapsed .ws-sessions > * { display: revert; }
-  .ws-shell.ws-sessions-collapsed .ws-sessions { border-right: var(--bw-hair) solid var(--bg-3); }
-  .ws-sessions-drawer-toggle { display: inline-flex; }
-}
-
-/* Stage 3 (<=900px): single content column; the rail drops to a fixed icon-only
-   strip. Labels hide UNCONDITIONALLY here - a 60px rail showing clipped label
-   text ('age', 'Ne') is the worst of both worlds. */
-@media (max-width: 900px) {
-  .ws-shell,
-  .ws-shell.ws-no-sessions,
-  .ws-shell.ws-no-pane,
-  .ws-shell.ws-pane-collapsed,
-  .ws-shell.ws-no-pane.ws-no-sessions,
-  .ws-shell.ws-no-pane.ws-pane-collapsed:not(.ws-no-sessions),
-  .ws-shell.ws-no-pane.ws-pane-collapsed.ws-no-sessions {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-areas: "content";
-  }
-  .ws-rail { position: fixed; inset: 0 auto 0 0; width: var(--ws-rail-w-collapsed); z-index: 40; }
-  .ws-rail .ws-rail-brand,
-  .ws-rail .ws-rail-action-label,
-  .ws-rail .ws-rail-item-label,
-  .ws-rail .ws-rail-item-count,
-  .ws-rail .ds-theme-toggle-label { display: none; }
-  .ws-rail .ws-rail-item, .ws-rail .ws-rail-action { justify-content: center; gap: 0; }
-  .ws-rail .ws-rail-head { justify-content: center; }
-  /* Expand/collapse is meaningless on the icon strip. */
-  .ws-rail-toggle { display: none; }
-  .ws-rail-foot { display: flex; justify-content: center; }
-  /* The 1100px rule's closed-state translateX(-110%) was sized for left:0;
-     once left shifts to the collapsed rail width, -110% no longer clears the
-     viewport and leaves a sliver of the "closed" drawer visible on screen. */
-  .ws-sessions { inset: 0 auto 0 var(--ws-rail-w-collapsed); transform: translateX(calc(-100% - var(--ws-rail-w-collapsed))); }
-  .ws-shell.ws-sessions-open .ws-sessions { transform: translateX(0); }
-  .ws-content { grid-area: content; padding-left: var(--ws-rail-w-collapsed); }
-  /* The Crumb's narrow collapse elsewhere keys on the .app @container, which
-     does not exist inside WorkspaceShell - mirror it here so the crumb bar
-     cannot overflow a narrow viewport (trail hides, leaf ellipsizes, the
-     right cluster wraps under instead of pushing past the edge). */
-  .ws-crumb { padding-top: 6px; padding-bottom: 6px; }
-  .ws-crumb .app-crumb { flex-wrap: wrap; min-width: 0; }
-  .ws-crumb .app-crumb > .sep, .ws-crumb .app-crumb > span:not(.crumb-right):not(.leaf) { display: none; }
-  .ws-crumb .app-crumb .leaf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-  .ws-crumb .app-crumb .crumb-right { margin-left: 0; flex-wrap: wrap; min-width: 0; display: inline-flex; }
-}
-.ws-drawer-toggle:hover { background: var(--bg-2); color: var(--fg); }
-.ws-drawer-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-@media (prefers-reduced-motion: reduce) {
-  .ws-shell, .ws-rail, .ws-pane, .ws-sessions, .ws-scrim { transition: none; }
-  .ws-resizer::after { transition: none; }
-}
-
-/* ============================================================
-   Row title highlight, expanded-row actions, filter pills.
-   ============================================================ */
-
-/* Highlighted match inside a Row title (Row `highlight` prop). */
-.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. */
-.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; padding-top: var(--space-2); }
-.row-act {
-  display: inline-flex; align-items: center; justify-content: center;
-  padding: 4px 10px; min-height: 28px;
-  background: var(--bg-2); border: var(--bw-hair) solid var(--bg-3); border-radius: var(--r-1);
-  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);
-}
-.row-act:hover { background: var(--bg-3); color: var(--fg); }
-.row-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-/* FilterPills - a group of pill toggle buttons (aria-pressed). */
-.ds-filter-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
-.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: 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-filter-pill:hover { background: var(--bg-3); color: var(--fg); }
-.ds-filter-pill.active { background: var(--accent-tint); color: var(--fg); border-color: var(--accent); }
-.ds-filter-pill:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-/* Touch floor for the new small controls. */
-@media (pointer: coarse) {
-  .row-act, .ds-filter-pill { min-height: 44px; }
-}
-
-/* Disabled file actions (read-only row / in-flight mutation) stay visible but inert. */
-.ds-file-act:disabled { opacity: .45; cursor: default; }
-.ds-file-act:disabled:hover { background: transparent; color: var(--fg-3); }
-.ds-file-act:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-
-/* ============================================================
-   Print — linearize WorkspaceShell so main content prints in full.
-   The multi-column CSS grid with overflow:auto regions clips at
-   the on-screen height in print/PDF; drop all chrome and let
-   .ws-main expand to its natural document height.
-   ============================================================ */
-@media print {
-  .ws-shell { display: block; }
-  .ws-rail,
-  .ws-sessions,
-  .ws-pane,
-  .ws-crumb,
-  .app-status { display: none; }
-  .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). */
-  .app { height: auto; min-height: 0; overflow: visible; display: block; }
-  .app-body { display: block; }
-  .app-main { overflow: visible; height: auto; display: block; max-width: 100%; }
-  .app-topbar, .app-chrome, .app-crumb, .app-side-shell, .app-side-scrim,
-  .app-side-toggle, .btn-fab, .skip-link, .ds-marquee { display: none; }
-  /* Modals/preview: print the content, not a blurred overlay clipped to one page. */
-  .ds-modal-backdrop { position: static; background: none; backdrop-filter: none; padding: 0; }
-  .ds-modal, .ds-modal-preview { max-width: 100%; max-height: none; box-shadow: none; }
-  .ds-modal-body, .ds-preview-body, .ds-preview-code, .ds-preview-text { overflow: visible; }
-  .ds-modal-actions, .ds-preview-actions { display: none; }
-  /* Data-density: fixed-height log clips; bg-only tiles lose their boundary. */
-  .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; }
-}
-
-/* ============================================================
-   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. */
-:root {
-  --danger-surface: color-mix(in oklab, var(--warn) 14%, var(--bg));
-}
-
-/* PhaseWalk */
-.ds-phasewalk { display: inline-flex; gap: 2px; vertical-align: middle; }
-.ds-phasewalk-seg {
-  width: 18px; height: 10px; border-radius: var(--r-hair);
-  background: var(--bg-3); position: relative;
-}
-.ds-phasewalk-seg.is-reached { background: var(--success); }
-.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-phasewalk { padding-top: 15px; }
-.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-session-row .ds-phasewalk { padding-top: 0; }
-.ds-session-row .ds-phasewalk-lbl { display: none; }
-
-/* TreeNode */
-.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-tree-node { margin-left: 8px; padding-left: 8px; }
-}
-.ds-tree-node.is-phase { border-color: var(--accent); background: var(--bg-3); font-weight: 600; }
-.ds-tree-node.is-deviation { border-color: var(--warn); background: var(--danger-surface); color: var(--warn); }
-.ds-tree-node.is-mutable-resolve { border-color: var(--success); }
-.ds-tree-node.is-prd-add { border-color: var(--amber); }
-.ds-tree-node-ts { margin-right: 8px; color: var(--fg-3); }
-.ds-tree-node-pills { margin-left: 6px; }
-.ds-tree-node-reason { margin-top: 2px; color: var(--fg-2); }
-.ds-tree-node-deviation { margin-top: 2px; }
-.ds-tree-node-residuals { margin-top: 2px; color: var(--fg-3); }
-
-/* BarRow */
-.ds-bar-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: var(--fs-tiny); }
-.ds-bar-row-label { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-bar-bg { flex: 1; min-width: 60px; background: var(--bg-3); border-radius: var(--r-hair); height: 6px; overflow: hidden; }
-.ds-bar-fill { background: var(--fg-3); height: 100%; border-radius: var(--r-hair); }
-.ds-bar-fill.is-active { background: var(--accent); }
-.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-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-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--space-2); }
-.ds-stats-grid > div { display: grid; }
-@media (max-width: 360px) {
-  .ds-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
-}
-.ds-stats-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
-.ds-stat { min-width: 0; background: var(--bg-3); border-radius: var(--r-0); padding: 10px 12px; }
-.ds-stat-val { font-size: clamp(18px, 5cqi, 22px); font-weight: 700; color: var(--accent-ink); overflow-wrap: anywhere; }
-.ds-stat-val.rate-big { font-size: clamp(24px, 7cqi, 32px); color: var(--success); }
-.ds-stat-val.err-rate { font-size: clamp(24px, 7cqi, 32px); color: var(--warn); }
-.ds-stat-lbl { font-size: var(--fs-micro); color: var(--fg-3); margin-top: 2px; }
-
-/* Inline row — flex row with centered items and a small gap, for demo/kit
-   markup that needs to lay siblings out horizontally without an inline style. */
-.ds-inline-row { display: flex; align-items: center; gap: var(--space-2, 8px); }
-
-/* SubGrid */
-.ds-sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin-top: 8px; }
-.ds-sub-grid-empty { padding: var(--space-3); color: var(--fg-3); font-size: var(--fs-tiny); }
-.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-sub-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
-.ds-sub-btn span { display: block; font-size: 18px; font-weight: 700; color: var(--accent-ink); }
-
-/* SessionRow */
-.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-session-row:hover { background: var(--bg-3); }
-.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-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-session-row-span { flex-basis: 100%; }
-}
-.ds-session-row-devcnt { color: var(--warn); font-weight: 600; }
-.ds-session-row-span { font-size: var(--fs-micro); color: var(--fg-3); }
-
-/* DevRow */
-.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-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-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. */
-.fd-root .ds-live-log { height: 100%; max-height: none; min-height: 0; flex: 1 1 auto; }
-.ds-live-log-empty { height: auto; min-height: 0; padding: var(--space-3); color: var(--fg-3); }
-.ds-live-log-entry { padding: 2px 8px; border-bottom: var(--bw-hair) solid var(--bg-3); overflow-wrap: anywhere; }
-.ds-live-log-entry:hover { background: var(--bg-3); }
-.ds-live-log-ts { margin-right: 6px; color: var(--fg-3); }
-.ds-live-log-subtag { margin-right: 6px; padding: 0 5px; border-radius: var(--r-hair); font-size: var(--fs-micro); }
-.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-sub-btn { min-height: 44px; }
-  .ds-session-row { min-height: 44px; }
-  .ds-live-log-entry { padding-block: 6px; }
-}
-
-
-/* == appended: popovers-files == */
-/* FilePreviewMedia controls row — spacing + coarse-pointer tap floor */
-.ds-preview-media-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  flex-wrap: wrap;
-}
-@media (hover: none), (pointer: coarse) {
-  .ds-preview-media-controls .chat-code-copy,
-  .chat-code-copy-head {
-    min-height: 44px;
-    min-width: 44px;
-  }
-}
-
-/* == appended: ui-kits == */
-/* ============================================================
-   ui_kit responsive helpers (kits-grids sweep) */
-.ds-section-pad { padding: clamp(6px, 1.2vw, 16px); }
-.ds-panel-gap { margin: var(--space-2) 0; }
-.ds-panel-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-2) 0; }
-@media (max-width: 760px) {
-  .ds-panel-duo { grid-template-columns: 1fr; }
-}
-/* wide dense rows/tables scroll inside their panel, never the page */
-.ds-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
-
-/* --- slide deck ------------------------------------------- */
-.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-deck-stage {
-    max-height: calc(100vh - 140px);
-    max-height: calc(100dvh - 140px);
-    aspect-ratio: auto;
-  }
-}
-.ds-deck-slide { flex: 1; display: flex; min-width: 0; }
-.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-deck-count { color: var(--fg-3); }
-@media (pointer: coarse) {
-  .ds-deck-controls .btn { min-height: 44px; min-width: 44px; }
-}
-.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-slide-col { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.5cqw, 24px); min-width: 0; }
-.ds-slide-col--start { align-items: flex-start; }
-.ds-slide-col--narrow { max-width: 38ch; }
-.ds-slide-col--quote { max-width: 42ch; }
-.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-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-slide-h1--lead { margin-bottom: 12px; }
-.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-slide-cite { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--fg-3); }
-.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-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-slide-bullet-val { color: var(--fg-2); font-size: var(--fs-lg); min-width: 0; }
-.ds-slide-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 3vw, 32px); margin-top: 12px; }
-@media (max-width: 760px) {
-  .ds-slide-split { grid-template-columns: 1fr; }
-}
-.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-slide-split-cell--accent { border-left: 3px solid var(--slide-accent, var(--accent)); }
-
-/* --- error 404 --------------------------------------------- */
-.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-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-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-tile-grid {
-  padding: clamp(8px, 2.5vw, 16px);
-  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 8px;
-}
-.ds-tile-grid--tight { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
-.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-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-gallery-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 8px color-mix(in oklab, var(--fg) 10%, transparent); }
-.ds-gallery-tile:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
-.ds-gallery-tile--tight { min-height: clamp(96px, 14vw, 120px); }
-.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-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-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-topbar-search { width: min(280px, 100%); min-width: 0; flex: 1 1 clamp(140px, 30vw, 280px); }
-@media (max-width: 480px) {
-  .ds-topbar-search { flex-basis: 100%; }
-}
-.ds-empty-state { padding: clamp(16px, 5vw, 24px); text-align: center; color: var(--panel-text-3); }
-.ds-empty-state-glyph { font-size: clamp(24px, 6vw, 32px); }
-.ds-empty-state-msg { margin: 6px 0; }
-.ds-empty-state-hint { margin: 0; font-size: var(--fs-sm); }
-
-/* --- system primer ------------------------------------------ */
-.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-swatch-grid-lg { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
-.ds-swatch-col { display: flex; flex-direction: column; gap: 6px; }
-.ds-swatch-chip { height: 48px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--swatch, var(--panel-1)); }
-.ds-swatch-chip--big { height: 64px; }
-.ds-swatch-name { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
-.ds-type-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 14px; }
-.ds-type-row {
-  display: flex; align-items: baseline; gap: 14px;
-  border-bottom: 1px solid var(--rule); padding-bottom: 8px; flex-wrap: wrap;
-}
-.ds-type-row-label { flex: 0 0 64px; font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
-.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-prim-panel { padding: clamp(10px, 2.5vw, 14px) clamp(10px, 3vw, 18px); display: flex; flex-direction: column; gap: 18px; }
-.ds-prim-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
-.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-home-hero-wrap { padding: 0 var(--space-2, 8px); }
-.ds-home-panel { margin: var(--space-2, 8px); }
-@media (max-width: 480px) {
-  .ds-home-panel { margin: var(--space-1, 4px) 0; }
-}
-/* Home landing section tablist (site/theme.mjs Tabs()) — bare .tabs had no
-   rule anywhere, so the four links rendered as unstyled inline text jammed
-   together with no separation. Mirror the topbar nav pill-tab treatment. */
-.tabs[role="tablist"] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-1, 4px);
-  font-size: var(--fs-sm);
-}
-.tabs[role="tablist"] a {
-  display: flex;
-  align-items: center;
-  gap: var(--space-1, 4px);
-  padding: var(--space-2, 8px) var(--space-3, 12px);
-  border-radius: var(--r-pill);
-  color: var(--fg-2);
-  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease),
-    transform var(--dur-base) var(--ease-spring);
-}
-.tabs[role="tablist"] a:hover { background: var(--bg-2); color: var(--fg); transform: translateY(-1px); }
-.tabs[role="tablist"] a.active {
-  color: var(--accent-ink);
-  background: color-mix(in oklab, var(--accent) 16%, transparent);
-  box-shadow: inset 0 -2px 0 0 var(--accent);
-  font-weight: 600;
-}
-.ds-quickstart {
-  padding: var(--space-3, 16px) var(--space-4, 24px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1-75, 6px);
-}
-/* Table() scroll containment — wide tables scroll inside their own box,
-   never the page body. */
-.ds-table-wrap {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  max-width: 100%;
-}
-.ds-table-wrap > table { min-width: 100%; }
-
-
-/* == appended: settings kit cleanup == */
-/* == appended: settings kit == */
-.ds-settings-main { padding: var(--space-2, 8px); }
-.ds-settings-body { padding: 14px 18px; }
-.ds-settings-body-stack { display: flex; flex-direction: column; gap: var(--space-2-5, 10px); }
-.ds-field-block { margin: var(--space-2-5, 10px) 0; }
-.ds-field-eyebrow {
-  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em;
-  text-transform: uppercase; color: var(--panel-text-3);
-}
-.ds-hint-sm { font-size: 12px; color: var(--panel-text-2); }
-.ds-note-quiet { margin: 0; color: var(--panel-text-2); }
-.ds-btn-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
-.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; }
-.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
-   the text-safe tone, same accent/accent-ink split used everywhere else. */
-.ds-btn-mascot { color: var(--mascot-deep); }
-.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-savebar-note { flex: 1 1 160px; min-width: 0; color: var(--panel-text-2); }
-.ds-settings-modal { min-width: min(320px, calc(100vw - 32px)); max-width: 480px; }
-.ds-modal-body-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
-.ds-modal-note { margin: 0 0 8px; color: var(--panel-text-2); font-size: 14px; }
-.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-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-auth-wrap { padding: var(--space-2, 8px); display: flex; flex-direction: column; align-items: center; }
-.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-auth-form { padding: clamp(12px, 3vw, 18px); display: flex; flex-direction: column; gap: 10px; }
-.ds-auth-sent { align-items: center; text-align: center; }
-.ds-auth-sent-glyph { font-size: 32px; color: var(--panel-accent); }
-.ds-auth-sent-title { margin: 0; font-weight: 600; }
-.ds-auth-sent-sub { margin: 0; color: var(--panel-text-2); overflow-wrap: anywhere; }
-.ds-auth-field { display: flex; flex-direction: column; gap: 4px; }
-.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-auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
-.ds-auth-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; }
-.ds-auth-remember-text { color: var(--panel-text-2); font-size: 13px; }
-.ds-auth-forgot { font-size: 13px; }
-.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-auth-providers { display: flex; gap: 8px; flex-wrap: wrap; }
-.ds-auth-provider-btn { flex: 1 1 100px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; }
-.ds-auth-provider-btn--loading { opacity: 0.7; pointer-events: none; }
-.ds-auth-provider-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); display: inline-flex; }
-.ds-auth-modes { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
-.ds-auth-mode-link { color: var(--panel-text-3); text-decoration: none; }
-.ds-auth-mode-link--active { color: var(--panel-text); text-decoration: underline; }
-.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-m0 { margin: 0; }
-.ds-text-2 { color: var(--panel-text-2); }
-.ds-text-3 { color: var(--panel-text-3); }
-.ds-kit-head { display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 16px); flex-wrap: wrap; }
-
-/* --- gallery kit --- */
-.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-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; flex-wrap: wrap; min-width: 0; }
-.ds-tile-glyph { font-family: var(--ff-mono); color: var(--panel-text-3); }
-.ds-tile-label { color: var(--panel-text); overflow-wrap: anywhere; }
-.ds-gal-swatch { height: 64px; border-radius: var(--r-0); background: var(--swatch, var(--panel-1)); }
-.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-gal-swatch-name { color: var(--panel-text); }
-.ds-gal-swatch-hint { color: var(--panel-text-3); overflow-wrap: anywhere; }
-.ds-lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
-.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-err-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
-.ds-err-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
-
-/* == appended: terminal-capp kit cleanup == */
-/* --- terminal kit ------------------------------------------ */
-.ds-section-pad-sm { padding: 8px; }
-.ds-kit-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
-.ds-cli-cmt .cmd { color: var(--fg-3); }
-.ds-cli-out .cmd { color: var(--fg-2); }
-.ds-cli-ok .prompt, .ds-cli-ok .cmd { color: var(--accent-ink); }
-.ds-cli-warn .prompt, .ds-cli-warn .cmd { color: var(--mascot-deep); }
-.ds-cli-log .prompt { color: var(--fg-3); }
-.ds-cli-log .cmd { color: var(--fg-2); font-family: var(--ff-mono); }
-.ds-term-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-2); border-radius: var(--r-1); }
-.ds-term-body--tall { min-height: 280px; }
-.ds-term-input-row { margin-top: 6px; }
-.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-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-chat-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-3); }
-.ds-chat-layout > .chat { min-width: 0; }
-.ds-chat-detail { display: none; }
-@media (min-width: 1100px) {
-  .ds-chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: var(--space-4); }
-  .ds-chat-detail { display: block; position: sticky; top: 0; }
-}
+/* app-shell.css -- re-exports the split source sheets in src/css/app-shell/
+   in their original order. This file is a published package export consumed
+   directly via <link rel="stylesheet" href="app-shell.css"> by preview/*.html
+   and ui_kits/*/index.html (never through the build step, which reads the
+   split files directly for byte-identical dist output -- see scripts/build.mjs).
+   Splitting only: no rule was added, removed, or reordered versus the
+   original monolithic app-shell.css. */
+@import url('./src/css/app-shell/base.css');
+@import url('./src/css/app-shell/topbar.css');
+@import url('./src/css/app-shell/primitives.css');
+@import url('./src/css/app-shell/panel-row.css');
+@import url('./src/css/app-shell/hero-content.css');
+@import url('./src/css/app-shell/responsive.css');
+@import url('./src/css/app-shell/chat-basic.css');
+@import url('./src/css/app-shell/files.css');
+@import url('./src/css/app-shell/catalog-theme.css');
+@import url('./src/css/app-shell/chat-polish.css');
+@import url('./src/css/app-shell/sidebar-misc.css');
+@import url('./src/css/app-shell/states-interactions.css');
+@import url('./src/css/app-shell/loading-alerts.css');
+@import url('./src/css/app-shell/responsive2-workspace.css');
+@import url('./src/css/app-shell/row-print.css');
+@import url('./src/css/app-shell/data-density.css');
+@import url('./src/css/app-shell/kits-appended.css');