altitude-design 0.2.1 → 0.3.1

package/dist/altitude.no-fonts.css

@@ -1,4 +1,4 @@
-:root, [data-theme="daylight"] {
+:root, [data-theme="daylight"], [data-theme="mesa"] {
   --surface-trench: #e1e4ea;
   --surface-well: #eaedf1;
   --surface-ground: #f3f4f7;
@@ -27,6 +27,28 @@
   --presence-2: #0b7285;
   --presence-3: #7046c9;
   --on-presence: #ffffff;
+  --data-1: #5d7bff;
+  --data-2: #e65000;
+  --data-3: #0498b9;
+  --data-4: #2a8f00;
+  --data-5: #643980;
+  --data-6: #c56f99;
+  --data-other: #31343c;
+  --data-context: #898a8e;
+  --data-seq-1: #e4ebff;
+  --data-seq-2: #c1cdef;
+  --data-seq-3: #a0b0de;
+  --data-seq-4: #8093cd;
+  --data-seq-5: #6176bb;
+  --data-seq-6: #4559a9;
+  --data-seq-7: #2b3c97;
+  --data-div-neg-3: #503000;
+  --data-div-neg-2: #966112;
+  --data-div-neg-1: #c6a178;
+  --data-div-mid: #e6e8ed;
+  --data-div-pos-1: #97a7d6;
+  --data-div-pos-2: #5569ad;
+  --data-div-pos-3: #1d2a84;
   --scrim: #12161f52;
   --trench: inset 0 1px 3px #0f17292e, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900;
   --well: inset 0 1px 2px #0f17291a, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900;
@@ -39,7 +61,7 @@
   --lip-top: inset 0 18px 18px -18px #0f17293d;
   --lip-bottom: inset 0 -18px 18px -18px #0f17293d;
 }
-[data-theme="nightfall"] {
+[data-theme="nightfall"], [data-theme="alpine"] {
   --surface-trench: #08090c;
   --surface-well: #0c0e12;
   --surface-ground: #121419;
@@ -68,88 +90,28 @@
   --presence-2: #3fc1d0;
   --presence-3: #b39dff;
   --on-presence: #0b0d12;
-  --scrim: #00000080;
-  --trench: inset 0 2px 4px #000000b3, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --well: inset 0 1px 2px #00000099, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --elev-0: inset 0 1px 0 #ffffff00, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
-  --elev-1: inset 0 1px 0 #ffffff12, 0 0 0 1px #ffffff0a, 0 1px 2px #00000080, 0 2px 6px -1px #00000052;
-  --elev-2: inset 0 1px 0 #ffffff17, 0 0 0 1px #ffffff0d, 0 2px 4px -1px #00000073, 0 10px 20px -6px #00000066;
-  --elev-3: inset 0 1px 0 #ffffff1c, 0 0 0 1px #ffffff0f, 0 4px 8px -2px #00000073, 0 18px 36px -10px #00000080;
-  --elev-4: inset 0 1px 0 #ffffff21, 0 0 0 1px #ffffff12, 0 8px 16px -4px #00000080, 0 30px 60px -16px #0000008c;
-  --elev-5: inset 0 1px 0 #ffffff26, 0 0 0 1px #ffffff14, 0 12px 24px -6px #0000008c, 0 48px 96px -24px #00000099;
-  --lip-top: inset 0 18px 18px -18px #000000cc;
-  --lip-bottom: inset 0 -18px 18px -18px #000000cc;
-}
-[data-theme="mesa"] {
-  --surface-trench: #e5ddd2;
-  --surface-well: #eee7dd;
-  --surface-ground: #f6f1ea;
-  --surface-raised: #fffcf8;
-  --surface-lifted: #fffdfa;
-  --surface-floating: #ffffff;
-  --surface-overlay: #ffffff;
-  --surface-modal: #ffffff;
-  --ink: #221b14;
-  --ink-muted: #62564a;
-  --ink-faint: #a09484;
-  --line: #e6ded3;
-  --line-control: #807467;
-  --accent: #b4441b;
-  --on-accent: #ffffff;
-  --accent-ink: #a63e17;
-  --accent-soft: #f8e4d9;
-  --positive: #2c6e3f;
-  --positive-soft: #e3efdc;
-  --caution: #8a5000;
-  --caution-soft: #fbeccf;
-  --critical: #b3261e;
-  --critical-soft: #f9e1dc;
-  --on-critical: #ffffff;
-  --presence-1: #a8256a;
-  --presence-2: #0b7285;
-  --presence-3: #6e44c2;
-  --on-presence: #ffffff;
-  --scrim: #221b144d;
-  --trench: inset 0 1px 3px #2a1a0c2e, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --well: inset 0 1px 2px #2a1a0c1a, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --elev-0: inset 0 1px 0 #ffffff00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00, 0 0 0 0 #2a1a0c00;
-  --elev-1: inset 0 1px 0 #ffffffb3, 0 0 0 1px #2a1a0c17, 0 1px 2px #2a1a0c12, 0 2px 4px -1px #2a1a0c0f;
-  --elev-2: inset 0 1px 0 #ffffffcc, 0 0 0 1px #2a1a0c12, 0 2px 4px -1px #2a1a0c14, 0 8px 16px -6px #2a1a0c24;
-  --elev-3: inset 0 1px 0 #ffffffe6, 0 0 0 1px #2a1a0c0f, 0 4px 8px -2px #2a1a0c14, 0 16px 32px -10px #2a1a0c33;
-  --elev-4: inset 0 1px 0 #ffffff, 0 0 0 1px #2a1a0c0d, 0 8px 16px -4px #2a1a0c17, 0 28px 56px -16px #2a1a0c3d;
-  --elev-5: inset 0 1px 0 #ffffff, 0 0 0 1px #2a1a0c0a, 0 12px 24px -6px #2a1a0c1a, 0 48px 96px -24px #2a1a0c4d;
-  --lip-top: inset 0 18px 18px -18px #2a1a0c3d;
-  --lip-bottom: inset 0 -18px 18px -18px #2a1a0c3d;
-}
-[data-theme="alpine"] {
-  --surface-trench: #060a09;
-  --surface-well: #0a0f0e;
-  --surface-ground: #0f1513;
-  --surface-raised: #151e1b;
-  --surface-lifted: #1a2522;
-  --surface-floating: #202c28;
-  --surface-overlay: #25332f;
-  --surface-modal: #2a3935;
-  --ink: #eaf3ef;
-  --ink-muted: #9db0a9;
-  --ink-faint: #5d6c67;
-  --line: #222c29;
-  --line-control: #62736d;
-  --accent: #5fd6b2;
-  --on-accent: #04140f;
-  --accent-ink: #6fdcbc;
-  --accent-soft: #13302a;
-  --positive: #8ed67a;
-  --positive-soft: #1a2e17;
-  --caution: #efbd5b;
-  --caution-soft: #2f2712;
-  --critical: #ff8a70;
-  --critical-soft: #3a1a14;
-  --on-critical: #1a0905;
-  --presence-1: #f07ab8;
-  --presence-2: #5cc8e0;
-  --presence-3: #b9a3ff;
-  --on-presence: #06100d;
+  --data-1: #455ee1;
+  --data-2: #989902;
+  --data-3: #983dbc;
+  --data-4: #ce3401;
+  --data-5: #0397d2;
+  --data-6: #227702;
+  --data-other: #676a73;
+  --data-context: #86888b;
+  --data-seq-1: #2d3242;
+  --data-seq-2: #404966;
+  --data-seq-3: #54618c;
+  --data-seq-4: #687ab3;
+  --data-seq-5: #7e94dc;
+  --data-seq-6: #97b0ff;
+  --data-seq-7: #bfd0ff;
+  --data-div-neg-3: #ffc580;
+  --data-div-neg-2: #c68e48;
+  --data-div-neg-1: #816038;
+  --data-div-mid: #36383c;
+  --data-div-pos-1: #576590;
+  --data-div-pos-2: #8097df;
+  --data-div-pos-3: #bfd0ff;
   --scrim: #00000080;
   --trench: inset 0 2px 4px #000000b3, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
   --well: inset 0 1px 2px #00000099, 0 0 0 0 #00000000, 0 0 0 0 #00000000, 0 0 0 0 #00000000;
@@ -177,6 +139,14 @@
   --radius-lg: 14px;
   --radius-xl: 20px;
   --radius-full: 9999px;
+  --size-target-min: 24px;
+  --size-control-sm: 30px;
+  --size-control-md: 36px;
+  --size-field-sm: 34px;
+  --size-field-md: 40px;
+  --size-row-md: 32px;
+  --breakpoint-narrow: 480px;
+  --breakpoint-compact: 640px;
   --dur-press: 90ms;
   --dur-travel-1: 140ms;
   --dur-travel-2: 180ms;
@@ -184,11 +154,16 @@
   --dur-travel-4: 260ms;
   --dur-travel-5: 300ms;
   --dur-sweep: 1600ms;
+  --dur-breath: 4800ms;
+  --dur-wave: 1800ms;
   --dur-grace: 300ms;
   --dur-onset: 500ms;
   --dur-hold: 1000ms;
   --dur-hover: 1800ms;
+  --dur-linger: 2000ms;
   --dur-settle: 8000ms;
+  --dur-arrive: 1100ms;
+  --dur-plate: 600ms;
   --ease-rise: cubic-bezier(0.2, 0.9, 0.25, 1);
   --ease-sink: cubic-bezier(0.45, 0, 0.8, 0.35);
   --ease-settle: cubic-bezier(0.3, 1.3, 0.45, 1);
@@ -203,6 +178,31 @@
   --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
 }
+@media (pointer: coarse) {
+  :root {
+    --size-target-min: 44px;
+    --size-control-sm: 40px;
+    --size-control-md: 44px;
+    --size-field-sm: 44px;
+    --size-field-md: 48px;
+    --size-row-md: 44px;
+  }
+}
+[data-density="comfortable"] {
+  --size-target-min: 44px;
+  --size-control-sm: 40px;
+  --size-control-md: 44px;
+  --size-field-sm: 44px;
+  --size-field-md: 48px;
+  --size-row-md: 44px;
+}
+[data-density="compact"] {
+  --size-control-sm: 30px;
+  --size-control-md: 36px;
+  --size-field-sm: 34px;
+  --size-field-md: 40px;
+  --size-row-md: 32px;
+}
 
 
 /* Altitude — component styles. Every value comes from tokens.css; the only
@@ -213,6 +213,13 @@
   --alt-travel: 1;
   /* Convexity cue: a 2–5 L* light-to-dark face gradient on things you press (measured; see Research). Pressing flattens it. */
   --alt-sheen: linear-gradient(to bottom, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.03));
+  /* Insets that step down on a phone (Mobile, M11), so a small screen doesn't stack a desktop's padding at every level
+     of nesting. Each is full from the compact breakpoint (640px) up and eases to space-4 below it: the page's gutter and
+     an overlay's inset from space-6 (16px by 427px), a card's from space-5 (16px by 512px). They follow the viewport,
+     like a density, so a narrow card in a desktop grid keeps its padding; what changes form in a narrow slot still
+     follows its container. */
+  --alt-inset-page: clamp(var(--space-4), 3.75vw, var(--space-6));
+  --alt-inset-box: clamp(var(--space-4), 3.125vw, var(--space-5));
 }
 :root, [data-theme] {
   /* The hairline that outlines a slab, face and wall together, so its edges read on light grounds. */
@@ -229,7 +236,7 @@
      in use stays calm. 80% ink keeps a 3:1 change from line-control in every scheme. */
   --alt-rim-held: color-mix(in oklab, var(--ink) 80%, var(--line-control));
 }
-[data-theme="mesa"] { --alt-cast: rgb(42 26 12 / 0.22); --alt-cast-deep: rgb(42 26 12 / 0.36); }
+/* alpine is a retired name for nightfall (#324). */
 [data-theme="nightfall"], [data-theme="alpine"] {
   --alt-ring: color-mix(in oklab, var(--ink) 9%, transparent); --alt-cast: rgb(0 0 0 / 0.8); --alt-cast-deep: rgb(0 0 0 / 1);
   --alt-wall-in: color-mix(in oklab, var(--surface-trench), #000 55%); --alt-lip: rgb(255 255 255 / 0.035);
@@ -272,10 +279,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   cursor: pointer;
   transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
 }
-.alt-lift:hover, .alt-lift:focus-visible { background: var(--alt-bg-up); box-shadow: var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel))); }
+.alt-lift:focus-visible { background: var(--alt-bg-up); box-shadow: var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-lift:hover { background: var(--alt-bg-up); box-shadow: var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel))); } }
 .alt-lift:active { box-shadow: var(--elev-0); transform: translateY(calc(1px * var(--alt-travel))); transition-duration: var(--dur-press); transition-timing-function: ease-out; }
 .alt-lift:focus-visible, .alt-tabs-trigger:focus-visible, .alt-acc-trigger:focus-visible,
-.alt-slider-thumb:focus-visible, .alt-switch:focus-visible, .alt-tabs-content:focus-visible, .alt-toast-close:focus-visible {
+.alt-slider-thumb:focus-visible, .alt-switch:focus-visible, .alt-tabs-content:focus-visible, .alt-toast-close:focus-visible, .alt-chart-pin-remove:focus-visible {
   outline: 2px solid var(--accent-ink); outline-offset: 2px;
 }
 
@@ -289,7 +297,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   --wall: var(--wall-1); --wall-c: var(--surface-trench);
   --alt-bg: var(--surface-raised); --alt-bg-up: var(--surface-lifted); --alt-fg: var(--ink); --alt-sh: var(--elev-1); --alt-sh-up: var(--elev-2);
   position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
-  height: 36px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md);
+  height: var(--size-control-md); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-md);
   font: 500 14px/20px var(--font-sans); letter-spacing: -0.003em; white-space: nowrap; user-select: none; cursor: pointer;
   background: var(--alt-bg); background-image: var(--alt-sheen); color: var(--alt-fg);
   /* A button stays exactly where it is until the pointer is on it: no approach, no lean. */
@@ -302,14 +310,14 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    outline 2px off a box that covers the face and the wall, because an outline never adds to the page's scrollable
    area: a button at the edge of a narrow screen must not give the page a sideways scroll. At rest the box is the face
    alone, so only a keyboard-focused button's wall (the box's bottom edge, at most 5px) reaches past its own box. */
-.alt-btn:focus-visible, .alt-crumbs button:focus-visible { outline: none; }
-.alt-btn::after, .alt-crumbs button::after {
+.alt-btn:focus-visible, .alt-crumbs .alt-crumb-link:focus-visible { outline: none; }
+.alt-btn::after, .alt-crumbs .alt-crumb-link::after {
   content: ""; position: absolute; pointer-events: none; opacity: 0;
   inset: 0; outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-md);
   transition: opacity var(--dur-travel-1) var(--ease-rise), bottom var(--dur-press) ease-out;
 }
-.alt-btn[data-size="sm"]::after, .alt-crumbs button::after { border-radius: var(--radius-sm); }
-.alt-btn:focus-visible::after, .alt-crumbs button:focus-visible::after { opacity: 1; bottom: calc(-1 * var(--wall, 0px) - 1px); }
+.alt-btn[data-size="sm"]::after, .alt-crumbs .alt-crumb-link::after { border-radius: var(--radius-sm); }
+.alt-btn:focus-visible::after, .alt-crumbs .alt-crumb-link:focus-visible::after { opacity: 1; bottom: calc(-1 * var(--wall, 0px) - 1px); }
 .alt-btn:active::after, .alt-btn[data-loading]::after { bottom: 0; }
 .alt-btn-label { display: inline-flex; align-items: center; gap: var(--space-2); transition: opacity var(--dur-travel-1) var(--ease-rise); }
 .alt-btn-label > svg { flex: none; margin-inline: -2px; }
@@ -322,16 +330,21 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   --alt-bg: var(--critical); --alt-bg-up: var(--critical); --alt-fg: var(--on-critical); --alt-sh: var(--elev-2); --alt-sh-up: var(--elev-3);
 }
 .alt-btn[data-variant="ghost"] { --wall: 0px; --alt-bg: transparent; --alt-bg-up: var(--surface-raised); --alt-sh: var(--elev-0); --alt-sh-up: var(--elev-1); background-image: none; }
-.alt-btn[data-variant="ghost"]:hover:not(:disabled), .alt-btn[data-variant="ghost"]:focus-visible { --wall: var(--wall-1); background-image: var(--alt-sheen); }
-.alt-btn[data-size="sm"] { height: 30px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
+.alt-btn[data-variant="ghost"]:focus-visible { --wall: var(--wall-1); background-image: var(--alt-sheen); }
+@media (hover: hover) { .alt-btn[data-variant="ghost"]:hover:not(:disabled) { --wall: var(--wall-1); background-image: var(--alt-sheen); } }
+.alt-btn[data-size="sm"] { height: var(--size-control-sm); padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
 .alt-btn[data-size="lg"] { height: 44px; padding: 0 var(--space-5); font-size: 15px; }
-.alt-btn[data-square] { width: 36px; padding: 0; }
-.alt-btn[data-square][data-size="sm"] { width: 30px; }
+.alt-btn[data-square] { width: var(--size-control-md); padding: 0; }
+.alt-btn[data-square][data-size="sm"] { width: var(--size-control-sm); }
 .alt-btn[data-square][data-size="lg"] { width: 44px; }
-.alt-btn:hover:not(:disabled):not([data-loading]), .alt-btn:focus-visible {
+.alt-btn:focus-visible {
   background: var(--alt-bg-up); background-image: var(--alt-sheen);
   box-shadow: 0 calc(var(--wall) + 1px) 0 0 var(--wall-c), var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel)));
 }
+@media (hover: hover) { .alt-btn:hover:not(:disabled):not([data-loading]) {
+  background: var(--alt-bg-up); background-image: var(--alt-sheen);
+  box-shadow: 0 calc(var(--wall) + 1px) 0 0 var(--wall-c), var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel)));
+} }
 .alt-btn:active:not(:disabled):not([data-loading]) {
   box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); background-image: none; transform: translateY(var(--wall));
   transition-duration: var(--dur-press); transition-timing-function: ease-out;
@@ -348,13 +361,14 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   background: var(--alt-bg); box-shadow: var(--alt-sh); border-radius: var(--radius-lg); color: var(--ink);
   display: flex; flex-direction: column;
 }
-.alt-card.alt-lift:hover, .alt-card.alt-lift:focus-visible { transform: translateY(calc(-2px * var(--alt-travel))); }
-.alt-card-header { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-5) 0; }
+.alt-card.alt-lift:focus-visible { transform: translateY(calc(-2px * var(--alt-travel))); }
+@media (hover: hover) { .alt-card.alt-lift:hover { transform: translateY(calc(-2px * var(--alt-travel))); } }
+.alt-card-header { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--alt-inset-box) var(--alt-inset-box) 0; }
 .alt-card-title { margin: 0; font: 600 17px/24px var(--font-sans); letter-spacing: -0.01em; }
 .alt-card-desc { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
-.alt-card-content { padding: var(--space-4) var(--space-5) var(--space-5); font: 400 15px/23px var(--font-sans); }
-.alt-card-header + .alt-card-footer { padding-top: var(--space-5); }
-.alt-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
+.alt-card-content { padding: var(--space-4) var(--alt-inset-box) var(--alt-inset-box); font: 400 15px/23px var(--font-sans); }
+.alt-card-header + .alt-card-footer { padding-top: var(--alt-inset-box); }
+.alt-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: 0 var(--alt-inset-box) var(--alt-inset-box); }
 
 /* ── Input / Textarea: a field is an opening cut into the page, and its depth says whether it still needs filling.
    One camera for everything: under a raised face you see its front wall; inside an opening you see its back wall,
@@ -369,15 +383,15 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-input {
   --w: 4px; --wc: var(--alt-wall-in); --halo: 0px; --halo-c: transparent;
   --wd: calc(var(--w) + var(--n) * 2px);
-  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3);
+  position: relative; isolation: isolate; display: flex; align-items: center; gap: var(--space-2); height: var(--size-field-md); padding: 0 var(--space-3);
   border: 1px solid var(--line-control); border-radius: var(--radius-md);
   background: var(--surface-well); color: var(--ink); cursor: text;
   box-shadow: inset 0 var(--wd) 0 0 var(--wc), inset 0 calc(var(--wd) + 3px) 3px -2px var(--alt-cast), 0 1px 0 0 var(--alt-lip), 0 0 0 var(--halo) var(--halo-c);
   transition: background-color var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-settle), border-color var(--dur-travel-1) var(--ease-rise), outline-color var(--dur-travel-1) var(--ease-rise);
   outline: 1px solid transparent; outline-offset: 0;
 }
-.alt-input[data-size="sm"] { --w: 3px; height: 34px; border-radius: var(--radius-sm); }
-.alt-input:hover { border-color: var(--ink-muted); }
+.alt-input[data-size="sm"] { --w: 3px; height: var(--size-field-sm); border-radius: var(--radius-sm); }
+@media (hover: hover) { .alt-input:hover { border-color: var(--ink-muted); } }
 /* Filled: the floor rises flush with the page. Nothing left to receive, so approach no longer deepens it. */
 .alt-input:has(input:not(:placeholder-shown)), .alt-input:has(textarea:not(:placeholder-shown)) { --w: 0px; --n: 0; background: var(--surface-raised); }
 /* Focused: the floor lights up, and an empty field stays open (at the depth approach previewed) until something is put
@@ -395,6 +409,19 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-input[data-multiline] { height: auto; padding: var(--space-2) var(--space-3); align-items: stretch; flex-direction: column; overflow: hidden; }
 .alt-input textarea { min-height: 84px; resize: vertical; line-height: 21px; }
 .alt-input-adorn { display: inline-flex; color: var(--ink-muted); flex: none; transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle); }
+/* Suggested: a value proposed for the field is a ghost of the value in ink-faint, the feedforward vocabulary (the ghost
+   of the check a box would get). It isn't the value, so an empty field with a ghost stays an opening; Tab accepts,
+   raising the floor flush with one afterglow. The ghost appears without motion: nothing has arrived in the record. */
+.alt-input-field { position: relative; flex: 1; min-width: 0; display: flex; align-self: stretch; }
+.alt-input-field[data-multiline] { flex-direction: column; }
+.alt-input-ghost {
+  position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; white-space: pre; pointer-events: none;
+  font: 400 14px/20px var(--font-sans); color: var(--ink-faint);
+  transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle);
+}
+.alt-input-ghost[data-multiline] { display: block; white-space: pre-wrap; overflow-wrap: break-word; line-height: 21px; }
+.alt-input-ghost-typed { color: transparent; }
+@media (forced-colors: active) { .alt-input-ghost { color: GrayText; } }
 /* Fill line: with a maxLength, the well fills from the floor as the text approaches the limit. */
 .alt-input-gauge {
   --g: var(--accent-ink);
@@ -447,18 +474,18 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition: transform var(--dur-travel-2) var(--ease-settle), filter var(--dur-travel-1) var(--ease-rise), color var(--dur-travel-1);
 }
 /* Hover is feedforward: an unchecked box shows a ghost of the check it would get; a checked one lifts its mark. */
-.alt-check:not(.alt-radio):hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track .alt-check-mark { color: var(--ink-faint); filter: none; }
-.alt-check:not(.alt-radio):hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track .alt-check-tick { stroke-dashoffset: 0; opacity: 0.55; transition: stroke-dashoffset var(--dur-travel-2) var(--ease-rise); }
-.alt-check:not(.alt-radio):hover:not([data-disabled]) input:checked + .alt-check-track .alt-check-mark { transform: translateY(calc(-0.5px * var(--alt-travel))); filter: drop-shadow(0 1.5px 1px rgb(0 0 0 / 0.32)); }
-.alt-check input:checked + .alt-check-track, .alt-check input:indeterminate + .alt-check-track { border-color: var(--accent); }
-.alt-check input:checked + .alt-check-track .alt-check-fill, .alt-check input:indeterminate + .alt-check-track .alt-check-fill { opacity: 1; clip-path: circle(75% at 50% 50%); }
-.alt-check:hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track { border-color: var(--ink-muted); }
+@media (hover: hover) { .alt-check:not(.alt-radio):hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track .alt-check-mark { color: var(--ink-faint); filter: none; } }
+@media (hover: hover) { .alt-check:not(.alt-radio):hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track .alt-check-tick { stroke-dashoffset: 0; opacity: 0.55; transition: stroke-dashoffset var(--dur-travel-2) var(--ease-rise); } }
+@media (hover: hover) { .alt-check:not(.alt-radio):hover:not([data-disabled]) input:checked + .alt-check-track .alt-check-mark { transform: translateY(calc(-0.5px * var(--alt-travel))); filter: drop-shadow(0 1.5px 1px rgb(0 0 0 / 0.32)); } }
+.alt-check input:checked + .alt-check-track, .alt-check input[type="checkbox"]:indeterminate + .alt-check-track { border-color: var(--accent); }
+.alt-check input:checked + .alt-check-track .alt-check-fill, .alt-check input[type="checkbox"]:indeterminate + .alt-check-track .alt-check-fill { opacity: 1; clip-path: circle(75% at 50% 50%); }
+@media (hover: hover) { .alt-check:hover:not([data-disabled]) input:not(:checked):not(:indeterminate) + .alt-check-track { border-color: var(--ink-muted); } }
 .alt-check:not(.alt-radio):active:not([data-disabled]) .alt-check-track { box-shadow: var(--trench); }
 .alt-check:not(.alt-radio):active:not([data-disabled]) .alt-check-mark { transform: scale(calc(1 - 0.12 * var(--alt-travel))); transition-duration: var(--dur-press); }
 .alt-check input:focus-visible + .alt-check-track { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-check-mark path { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset var(--dur-travel-1) var(--ease-sink); }
 .alt-check input:checked:not(:indeterminate) + .alt-check-track .alt-check-tick,
-.alt-check input:indeterminate + .alt-check-track .alt-check-dash { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-travel-2) var(--ease-rise) 60ms; }
+.alt-check input[type="checkbox"]:indeterminate + .alt-check-track .alt-check-dash { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-travel-2) var(--ease-rise) 60ms; }
 .alt-check-text { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
 .alt-check-label { font: 500 14px/20px var(--font-sans); }
 .alt-check-desc { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
@@ -479,7 +506,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition: box-shadow var(--dur-travel-1) var(--ease-rise), scale var(--dur-travel-2) var(--ease-settle);
 }
 .alt-radio-thumb[data-ready] { transition: transform var(--dur-travel-3) var(--ease-settle), box-shadow var(--dur-travel-1) var(--ease-rise), scale var(--dur-travel-2) var(--ease-settle); }
-.alt-radio-group:has(.alt-radio:hover input:checked) .alt-radio-thumb { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-radio-group:has(.alt-radio:hover input:checked) .alt-radio-thumb { box-shadow: var(--elev-2); } }
 .alt-radio-group:has(.alt-radio:active input:checked) .alt-radio-thumb { scale: calc(1 + 0.25 * var(--alt-travel)) calc(1 - 0.08 * var(--alt-travel)); }
 /* Feedforward: hovering an unchosen option shows a ghost of the thumb where it would land. */
 .alt-radio .alt-check-track::after {
@@ -487,7 +514,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   background: var(--surface-raised); box-shadow: var(--elev-1); opacity: 0; scale: 0.5; pointer-events: none;
   transition: opacity var(--dur-travel-1) var(--ease-sink), scale var(--dur-travel-2) var(--ease-settle);
 }
-.alt-radio:hover:not([data-disabled]) input:not(:checked) + .alt-check-track::after { opacity: 0.5; scale: 0.85; transition-timing-function: var(--ease-rise), var(--ease-settle); }
+@media (hover: hover) { .alt-radio:hover:not([data-disabled]) input:not(:checked) + .alt-check-track::after { opacity: 0.5; scale: 0.85; transition-timing-function: var(--ease-rise), var(--ease-settle); } }
 .alt-radio-group[data-disabled] .alt-radio-thumb { background: var(--surface-well); background-image: none; box-shadow: var(--elev-0); }
 
 /* ── Switch: a trench with a raised thumb; the accent pours in behind the thumb. ── */
@@ -510,7 +537,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-switch[aria-checked="true"] { border-color: var(--accent); }
 .alt-switch[aria-checked="true"] .alt-switch-fill { opacity: 1; clip-path: inset(0 0 0 0 round 999px); }
 .alt-switch[aria-checked="true"] .alt-switch-thumb { transform: translateX(calc(var(--track) - var(--tw))); }
-.alt-switch:hover:not(:disabled) .alt-switch-thumb { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-switch:hover:not(:disabled) .alt-switch-thumb { box-shadow: var(--elev-2); } }
 .alt-switch:active:not(:disabled) { --tw: calc(18px + 5px * var(--alt-travel)); }
 .alt-switch:disabled { cursor: not-allowed; border-color: var(--line); background: var(--surface-ground); box-shadow: var(--elev-0); }
 .alt-switch:disabled .alt-switch-thumb { box-shadow: var(--elev-0); background: var(--surface-well); }
@@ -525,7 +552,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    variant="segmented": the options sit in a well and one raised pill glides between them. ── */
 .alt-tabs { display: flex; flex-direction: column; gap: var(--space-4); }
 .alt-tabs-list {
-  position: relative; display: inline-flex; align-self: flex-start; gap: 2px; padding: var(--space-1);
+  position: relative; display: inline-flex; align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; gap: 2px; padding: var(--space-1);
   border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well);
 }
 .alt-tabs-indicator {
@@ -534,21 +561,30 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 .alt-tabs-indicator[data-ready] { transition: transform var(--dur-travel-3) var(--ease-settle), width var(--dur-travel-3) var(--ease-settle), opacity var(--dur-travel-1); }
 .alt-tabs-trigger {
-  position: relative; z-index: 1; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-md) - var(--space-1));
+  position: relative; z-index: 1; height: var(--size-control-sm); padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius-md) - var(--space-1));
   background: none; color: var(--ink-muted); font: 500 14px/20px var(--font-sans); cursor: pointer; white-space: nowrap;
   transition: color var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise);
 }
-.alt-tabs-trigger:hover, .alt-tabs-trigger[aria-selected="true"] { color: var(--ink); }
-.alt-tabs[data-variant="segmented"] .alt-tabs-trigger:hover:not([aria-selected="true"]) { background: color-mix(in oklab, var(--surface-raised) 40%, transparent); }
+.alt-tabs-trigger[aria-selected="true"], .alt-tabs-trigger[aria-checked="true"] { color: var(--ink); }
+@media (hover: hover) { .alt-tabs-trigger:hover { color: var(--ink); } }
+@media (hover: hover) { .alt-tabs[data-variant="segmented"] .alt-tabs-trigger:hover:not([aria-selected="true"]), .alt-tgroup .alt-tabs-trigger:hover:not([aria-checked="true"]):not(:disabled) { background: color-mix(in oklab, var(--surface-raised) 40%, transparent); } }
+/* Narrow (#259): the list scrolls within itself; an edge with more tabs past it fades out, so you can see there's more. */
+.alt-tabs-list::-webkit-scrollbar { display: none; }
+.alt-tabs-list[data-more-end] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+.alt-tabs-list[data-more-start] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
+.alt-tabs-list[data-more-start][data-more-end] { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
 .alt-tabs-content { animation: alt-emerge var(--dur-travel-2) var(--ease-rise); border-radius: var(--radius-sm); }
 
 .alt-tabs[data-variant="folder"] { gap: 0; }
+/* The list makes no layer of its own, so each tab stacks against the panel: only the chosen tab lies over it (covering its
+   hairline); the others, and a tab dropping back, sit behind the sheet. */
 .alt-tabs[data-variant="folder"] > .alt-tabs-list {
-  --r: 10px; align-self: stretch; z-index: 2; gap: var(--space-1); margin-bottom: -1px; padding: 0 var(--space-5);
+  /* It scrolls when narrow (#259), so the tab's shadow above and its 1px reach into the panel sit in its padding. */
+  --r: 10px; align-self: stretch; z-index: auto; gap: var(--space-1); margin: -6px 0 -2px; padding: 6px var(--alt-inset-box) 1px;
   border: 0; border-radius: 0; background: none; box-shadow: none;
 }
 .alt-tabs[data-variant="folder"] .alt-tabs-indicator { display: none; }
-.alt-tabs[data-variant="folder"] .alt-tabs-trigger { isolation: isolate; height: 38px; padding: 0 var(--space-4); border-radius: var(--r) var(--r) 0 0; }
+.alt-tabs[data-variant="folder"] .alt-tabs-trigger { z-index: 0; isolation: isolate; height: calc(var(--size-control-md) + 2px); padding: 0 var(--space-4); border-radius: var(--r) var(--r) 0 0; }
 .alt-tabs[data-variant="folder"] .alt-tabs-trigger:focus-visible { outline-offset: -5px; }
 /* The tab: the top edge of its sheet. It reaches 1px into the panel to cover the panel's top hairline. */
 .alt-tabs[data-variant="folder"] .alt-tabs-trigger::before {
@@ -565,17 +601,18 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
     radial-gradient(circle at 100% 0, transparent calc(var(--r) - 0.75px), var(--alt-ring) calc(var(--r) - 0.5px), var(--alt-ring) calc(var(--r) + 0.25px), var(--surface-raised) calc(var(--r) + 0.75px)) right / var(--r) var(--r) no-repeat;
   opacity: 0; transition: opacity var(--dur-travel-1) var(--ease-sink);
 }
+.alt-tabs[data-variant="folder"] .alt-tabs-trigger[aria-selected="true"] { z-index: 2; }
 .alt-tabs[data-variant="folder"] .alt-tabs-trigger[aria-selected="true"]::before {
   opacity: 1; transform: none; transition: opacity var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-3) var(--ease-settle);
 }
 .alt-tabs[data-variant="folder"] .alt-tabs-trigger[aria-selected="true"]::after { opacity: 1; transition: opacity var(--dur-travel-2) var(--ease-rise) 60ms; }
-.alt-tabs[data-variant="folder"] .alt-tabs-trigger:hover:not([aria-selected="true"])::before {
+@media (hover: hover) { .alt-tabs[data-variant="folder"] .alt-tabs-trigger:hover:not([aria-selected="true"])::before {
   opacity: 1; transform: translateY(calc(5px * var(--alt-travel))); clip-path: inset(-8px -8px calc(1px + 5px * var(--alt-travel)) -8px);
   background: color-mix(in oklab, var(--surface-raised) 50%, var(--surface-ground)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 6%, transparent);
   transition: opacity var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
-}
+} }
 .alt-tabs[data-variant="folder"] > .alt-tabs-content {
-  position: relative; z-index: 1; padding: var(--space-5); border-radius: var(--radius-lg);
+  position: relative; z-index: 1; padding: var(--alt-inset-box); border-radius: var(--radius-lg);
   background: var(--surface-raised); box-shadow: var(--elev-2); color: var(--ink);
   animation: alt-sheet-surface var(--dur-travel-3) var(--ease-rise);
 }
@@ -591,9 +628,9 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   border: 2px solid var(--accent); border-radius: var(--radius-full); background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1);
   transition: left var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
 }
-.alt-slider:hover .alt-slider-thumb { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-slider:hover .alt-slider-thumb { box-shadow: var(--elev-2); } }
 .alt-slider[data-dragging] .alt-slider-fill, .alt-slider[data-dragging] .alt-slider-thumb { transition-property: box-shadow, transform; }
-.alt-slider[data-dragging] .alt-slider-thumb { box-shadow: var(--elev-3); transform: scale(calc(1 + 0.12 * var(--alt-travel))); cursor: grabbing; }
+.alt-slider[data-dragging] .alt-slider-thumb:not([data-rest]) { box-shadow: var(--elev-3); transform: scale(calc(1 + 0.12 * var(--alt-travel))); cursor: grabbing; }
 .alt-slider-bubble {
   position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; min-width: 32px; padding: 3px 8px; text-align: center;
   border-radius: var(--radius-sm); background: var(--surface-floating); box-shadow: var(--elev-1); color: var(--ink);
@@ -601,13 +638,23 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   opacity: 0; transform: translateY(calc(4px * var(--alt-travel))) scale(calc(1 - 0.1 * var(--alt-travel))); transform-origin: 50% 100%;
   transition: opacity var(--dur-travel-1) var(--ease-sink), transform var(--dur-travel-1) var(--ease-sink), box-shadow var(--dur-travel-1) var(--ease-sink);
 }
-.alt-slider[data-dragging] .alt-slider-bubble, .alt-slider-thumb:focus-visible .alt-slider-bubble {
+.alt-slider[data-dragging] .alt-slider-thumb:not([data-rest]) .alt-slider-bubble, .alt-slider-thumb:focus-visible .alt-slider-bubble {
   opacity: 1; transform: none; box-shadow: var(--elev-3);
   transition: opacity var(--dur-travel-3) var(--ease-rise), transform var(--dur-travel-3) var(--ease-rise), box-shadow var(--dur-travel-3) var(--ease-rise);
 }
 .alt-slider[data-disabled] { cursor: not-allowed; }
 .alt-slider[data-disabled] .alt-slider-fill { background: var(--line-control); box-shadow: none; }
 .alt-slider[data-disabled] .alt-slider-thumb { border-color: var(--line-control); box-shadow: var(--elev-0); }
+/* A range: two thumbs with the raised fill between them. Only the thumb under the pointer lifts, and the one held
+   floats; the other stays at rest. The fill lifts on hover too, because dragging it moves both thumbs. */
+.alt-slider[data-range] .alt-slider-fill { position: absolute; top: 0; cursor: grab; transition: left var(--dur-travel-1) var(--ease-glide), width var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { .alt-slider[data-range]:not([data-disabled]):hover .alt-slider-thumb { box-shadow: var(--elev-1); } }
+.alt-slider-fill[data-grabbed] { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-slider[data-range]:not([data-disabled]) :is(.alt-slider-thumb:hover, .alt-slider-fill:hover) { box-shadow: var(--elev-2); } }
+.alt-slider[data-range][data-dragging] .alt-slider-thumb[data-grabbed] { box-shadow: var(--elev-3); }
+.alt-slider[data-range][data-dragging] .alt-slider-fill { transition-property: box-shadow; }
+.alt-slider-fill[data-grabbed] { cursor: grabbing; }
+.alt-slider[data-range][data-disabled] .alt-slider-fill { cursor: not-allowed; box-shadow: none; }
 
 /* ── Progress ── */
 .alt-progress { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-trench); box-shadow: var(--trench); overflow: hidden; }
@@ -661,71 +708,76 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 @media (prefers-reduced-motion: reduce) { .alt-badge-lamp[data-pulse] { animation: none; } }
 [data-motion="reduced"] .alt-badge-lamp[data-pulse] { animation: none; }
 
-/* ── Avatar: presence as height, drawn the way the eye judges height above a floor: by the gap between a thing and
-   its shadow (Kersten, Mamassian & Knill 1997). Every face is a disc with a cast shadow on the ground beneath it.
-   Active people hover: the face lifts off and its shadow shrinks and fades. Idle people rest: a tight contact
-   shadow right under them. Offline people lie flat in the page, grey, with no shadow at all. Someone live
-   (speaking, typing, presenting) drifts gently up and down. --hr is the height as a fraction of the face. ── */
+/* ── Avatar: a person is a disc. While they're here (active or idle) it rests on the page like a card, at level 1 with
+   its contact shadow; when they're not (offline) it's part of the record, a plate set flush into the page, grey. Faces
+   are neutral: status hues never stand for a person, and colour stays in the lamp, as on a Badge (filled when active,
+   an empty ring when idle). Only someone live (speaking, typing, presenting), or an avatar you can press under the
+   pointer, leaves the ground: the face lifts and a shadow appears on the page beneath it, smaller and fainter the
+   higher it goes. A detached shadow is what makes an object read as floating rather than resting (Kersten, Mamassian
+   & Knill 1997). --hr is the height as a fraction of the face. ── */
 @property --hr { syntax: "<number>"; inherits: true; initial-value: 0; }
 .alt-avatar {
   --size: 36px; --hr: 0; --lift: calc(var(--size) * var(--hr) * var(--alt-travel));
+  --av-sh: var(--elev-1); --av-plate: inset 0 1px 1.5px color-mix(in oklab, var(--ink) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent);
   position: relative; isolation: isolate; display: inline-grid; flex: none; width: var(--size); height: var(--size); vertical-align: middle;
   transition: --hr var(--dur-travel-3) var(--ease-settle);
 }
 .alt-avatar-face {
-  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius-full);
-  background-color: var(--surface-raised); background-image: radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.2), transparent 60%);
-  box-shadow: inset 0 0 0 1px var(--alt-ring); color: var(--ink);
-  font: 600 calc(var(--size) * 0.36) / 1 var(--font-sans); letter-spacing: 0.01em; user-select: none;
+  position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: var(--av-r, var(--radius-full));
+  background: var(--surface-raised); box-shadow: var(--av-sh); color: var(--ink);
+  font: 600 calc(var(--size) * 0.36) / 1 var(--font-sans); user-select: none;
   transform: translateY(calc(-1 * var(--lift)));
-  transition: background-color var(--dur-travel-2), color var(--dur-travel-2), filter var(--dur-travel-2), box-shadow var(--dur-travel-2);
+  transition: background-color var(--dur-travel-2), color var(--dur-travel-2), box-shadow var(--dur-travel-2) var(--ease-rise);
 }
 .alt-avatar-face img { width: 100%; height: 100%; object-fit: cover; }
-/* The cast shadow. The higher the face, the smaller and fainter it gets — that gap is what reads as height. */
+/* One letter has room to be bigger: small faces (under 28px) show only the first. */
+.alt-avatar-face[data-one] { font-size: calc(var(--size) * 0.46); }
+/* A team, an organisation, a bot or an agent is a square tile; its corners (--av-r) grow with its size, from
+   radius-xs to radius-lg. Its shadow, lamp and states are a person's. */
+.alt-avatar[data-shape="square"] .alt-avatar-lamp { inset-inline-end: calc(var(--lamp) * -0.3); bottom: calc(var(--lamp) * -0.3); }
+.alt-avatar[data-shape="square"] .alt-avatar-shadow { left: 8%; right: 8%; border-radius: var(--radius-sm); }
+/* The shadow on the page. At rest it isn't there (the face's own level-1 shadow is its contact shadow); it fades in
+   as the face leaves the ground, then shrinks and fades the higher the face goes: that gap is what reads as height. */
 .alt-avatar-shadow {
-  position: absolute; left: 7%; right: 7%; top: 100%; height: calc(var(--size) * 0.2); margin-top: calc(var(--size) * -0.1);
-  border-radius: 50%; background: radial-gradient(closest-side, var(--alt-cast-deep), var(--alt-cast-deep) 25%, transparent); pointer-events: none;
-  scale: calc(1 - var(--hr) * 1.15); opacity: calc(1 - var(--hr) * 1.7);
-}
-.alt-avatar[data-tint="accent"] .alt-avatar-face { background-color: var(--accent-soft); }
-.alt-avatar[data-tint="positive"] .alt-avatar-face { background-color: var(--positive-soft); }
-.alt-avatar[data-tint="caution"] .alt-avatar-face { background-color: var(--caution-soft); }
-.alt-avatar[data-tint="critical"] .alt-avatar-face { background-color: var(--critical-soft); }
-.alt-avatar[data-status="active"] { --hr: 0.15; }
-.alt-avatar[data-status="offline"] .alt-avatar-face, .alt-avatar[data-tint="more"] .alt-avatar-face {
-  background-color: var(--surface-well); background-image: none; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--alt-ring), inset 0 1px 2px var(--alt-cast);
-}
-.alt-avatar[data-status="offline"] .alt-avatar-face { filter: grayscale(1); }
-.alt-avatar[data-status="offline"] .alt-avatar-face img { opacity: 0.6; }
-.alt-avatar[data-status="offline"] .alt-avatar-shadow, .alt-avatar[data-tint="more"] .alt-avatar-shadow { opacity: 0; }
-.alt-avatar[data-tint="more"] .alt-avatar-face { font-size: calc(var(--size) * 0.32); }
-.alt-avatar[data-live] { animation: alt-drift var(--dur-hover) ease-in-out infinite alternate; }
-@keyframes alt-drift { from { --hr: 0.15; } to { --hr: 0.24; } }
-@media (prefers-reduced-motion: reduce) { .alt-avatar[data-live] { animation: none; --hr: 0.2; } }
-[data-motion="reduced"] .alt-avatar[data-live] { animation: none; --hr: 0.2; }
-.alt-avatar[data-presence] .alt-avatar-face { outline: 2px solid var(--alt-presence); outline-offset: 1px; }
+  position: absolute; left: 14%; right: 14%; top: 100%; height: calc(var(--size) * 0.14); margin-top: calc(var(--size) * -0.07);
+  border-radius: 50%; pointer-events: none;
+  background: radial-gradient(closest-side, var(--alt-cast-deep), color-mix(in oklab, var(--alt-cast-deep) 55%, transparent) 50%, transparent);
+  opacity: calc(clamp(0, var(--hr) * 12, 1) * (1 - var(--hr) * 1.4)); scale: calc(1 - var(--hr) * 1.1);
+}
+.alt-avatar:is([data-status="offline"], [data-more]) .alt-avatar-face {
+  background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); color: var(--ink-muted); box-shadow: var(--av-plate), 0 1px 0 0 var(--alt-lip);
+}
+.alt-avatar[data-status="offline"] .alt-avatar-face img { filter: grayscale(1); opacity: 0.5; }
+.alt-avatar[data-more] .alt-avatar-face { font-size: calc(var(--size) * 0.32); font-weight: 550; font-variant-numeric: tabular-nums; }
+.alt-avatar[data-live] { --av-sh: var(--elev-2); animation: alt-drift var(--dur-hover) ease-in-out infinite alternate; }
+@keyframes alt-drift { from { --hr: 0.14; } to { --hr: 0.22; } }
+@media (prefers-reduced-motion: reduce) { .alt-avatar[data-live] { animation: none; --hr: 0.18; } }
+[data-motion="reduced"] .alt-avatar[data-live] { animation: none; --hr: 0.18; }
+/* Presence colour: a 2px ring drawn tight around the face. */
+.alt-avatar[data-presence] .alt-avatar-face { outline: 2px solid var(--alt-presence); outline-offset: 0; }
+/* The lamp is a Badge lamp, cut out of the face by a ring of ground: filled when active, an empty ring when idle. */
 .alt-avatar-lamp {
-  --b-lamp: var(--positive);
-  position: absolute; z-index: 2; right: 0; bottom: 0; width: max(8px, calc(var(--size) * 0.24)); height: max(8px, calc(var(--size) * 0.24)); border-radius: var(--radius-full);
+  --b-lamp: var(--positive); --lamp: clamp(8px, calc(var(--size) * 0.2), 12px);
+  position: absolute; z-index: 2; inset-inline-end: 0; bottom: 0; width: var(--lamp); height: var(--lamp); border-radius: var(--radius-full);
   background: var(--b-lamp); box-shadow: 0 0 0 2px var(--surface-ground); transform: translateY(calc(-1 * var(--lift)));
 }
-.alt-avatar[data-status="idle"] .alt-avatar-lamp { --b-lamp: var(--caution); }
-.alt-avatar[data-interactive]:hover, .alt-avatar[data-interactive]:focus-visible { --hr: 0.3; }
+.alt-avatar[data-status="idle"] .alt-avatar-lamp { background: var(--surface-raised); box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 clamp(2px, calc(var(--size) * 0.05), 3px) var(--caution); }
 .alt-avatar[data-interactive] { cursor: pointer; outline: none; }
+.alt-avatar[data-interactive]:focus-visible { --hr: 0.26; --av-sh: var(--elev-2); }
+@media (hover: hover) { .alt-avatar[data-interactive]:hover { --hr: 0.26; --av-sh: var(--elev-2); } }
+.alt-avatar[data-interactive]:active { --hr: 0; --av-sh: var(--elev-0); transition-duration: var(--dur-press); }
 .alt-avatar[data-interactive]:focus-visible .alt-avatar-face { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
-.alt-avatar-group { isolation: isolate; display: inline-flex; align-items: flex-end; padding: calc(var(--size, 36px) * 0.32) 0 calc(var(--size, 36px) * 0.1); }
+/* Group: every face stands on one ground line, cut out of the one before it by a ring of ground. Later faces are
+   laid on top, overlapping by 15% of a face, which keeps the initials beneath whole. */
+.alt-avatar-group { isolation: isolate; display: inline-flex; align-items: flex-end; padding: calc(var(--size, 36px) * 0.26) 0 calc(var(--size, 36px) * 0.08); }
 .alt-avatar-group .alt-avatar { isolation: auto; }
-/* Faces overlap by a fifth. An avatar that waited for its data sits inside its loading wrapper (display: contents at
-   rest), so the overlap is counted from the group's own children either way, imprints included. */
+/* An avatar that waited for its data sits inside its loading wrapper (display: contents at rest), so the overlap is
+   counted from the group's own children either way, imprints included. */
 .alt-avatar-group > .alt-avatar:not(:first-child),
-.alt-avatar-group > :is(.alt-await, .alt-await-wait):not(:first-child) :is(.alt-avatar, .alt-avatar-imprint) { margin-left: calc(var(--size, 36px) * -0.22); }
-/* Overlapping faces are cut out of each other with a ring of ground; higher faces sit in front. */
-.alt-avatar-group .alt-avatar .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring); }
-.alt-avatar-group .alt-avatar[data-status="offline"] .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), inset 0 0 0 1px var(--alt-ring), inset 0 1px 2px var(--alt-cast); }
-.alt-avatar-group .alt-avatar[data-status="active"] .alt-avatar-face { z-index: 3; }
-.alt-avatar-group .alt-avatar[data-status="idle"] .alt-avatar-face { z-index: 2; }
-.alt-avatar-group .alt-avatar:not([data-tint="more"]):hover { --hr: 0.32; }
-.alt-avatar-group .alt-avatar:not([data-tint="more"]):hover .alt-avatar-face { z-index: 5; }
+.alt-avatar-group > :is(.alt-await, .alt-await-wait):not(:first-child) :is(.alt-avatar, .alt-avatar-imprint) { margin-inline-start: calc(var(--size, 36px) * -0.12); }
+.alt-avatar-group .alt-avatar .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), var(--av-sh); }
+.alt-avatar-group .alt-avatar:is([data-status="offline"], [data-more]) .alt-avatar-face { box-shadow: 0 0 0 2px var(--surface-ground), var(--av-plate); }
+@media (hover: hover) { .alt-avatar-group .alt-avatar:is([data-live], [data-interactive]:hover, [data-interactive]:focus-visible) .alt-avatar-face { z-index: 5; } }
 .alt-avatar-group .alt-avatar-lamp { display: none; }
 
 /* ── Skeleton: an imprint of the content to come, pressed into the page. Light passes over it while it waits; when the
@@ -773,8 +825,77 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 /* Text imprints are as tall as the text they stand for: one line-height of the surrounding type per line. */
 .alt-await-lines { display: flex; flex-direction: column; justify-content: space-around; height: calc(var(--lines, 1) * 1lh); max-width: 100%; }
 .alt-await-lines > .alt-skeleton { flex: none; height: 0.6em; }
-.alt-await-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
+.alt-await-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--alt-inset-box); }
 .alt-await-card-body { font: 400 15px/23px var(--font-sans); }
+
+/* ── Breath (AltitudeProvider loading="breath", #343). Instead of light sweeping over it, the imprint breathes: its floor
+   deepens from well to trench over 40% of dur-breath and releases over the rest, slower and less even than a pending
+   write's breath. In Nightfall, where well and trench are nearly one tone, the back wall (lip-top) breathes instead.
+   Every imprint takes its phase from one page clock, lagged by its height in the view (--alt-breath-delay, set by
+   useBreath), so they change in step and a swell crosses the view in dur-wave. Ten seconds in, it calms to a shallow,
+   slower breath. Depth and tone only: nothing travels. Charts, stats and meters hold still (their imprints stand for
+   amounts). When content lands: raised content (settle="raised") rises 8px to level 2 and settles to its rest over
+   dur-arrive; flush content fills past the ground (its floor passes just above it, then fills in flush); content that
+   arrives into a view already showing gets a plate that dissolves over dur-plate, no tint, so it isn't an afterglow. ── */
+[data-loading="breath"] .alt-skeleton::after { content: none; }
+[data-loading="breath"] .alt-skeleton { animation: alt-breath var(--dur-breath) linear var(--alt-breath-delay, 0ms) infinite; }
+[data-loading="breath"][data-theme="nightfall"] .alt-skeleton, [data-theme="nightfall"] [data-loading="breath"] .alt-skeleton { animation-name: alt-breath-wall; }
+[data-loading="breath"] :is([data-calm] .alt-skeleton, .alt-skeleton[data-calm]) { animation: alt-breath-calm calc(var(--dur-breath) * 0.75) ease-in-out infinite alternate; }
+[data-loading="breath"] :is(.alt-chart-imprint .alt-skeleton, .alt-stat-imprint, .alt-sparkline-imprint, .alt-meter-imprint) { animation: none; }
+@keyframes alt-breath {
+  0% { background-color: var(--surface-well); box-shadow: var(--well); animation-timing-function: ease-in-out; }
+  40% { background-color: var(--surface-trench); box-shadow: var(--trench); animation-timing-function: ease-in-out; }
+  100% { background-color: var(--surface-well); box-shadow: var(--well); }
+}
+@keyframes alt-breath-wall {
+  0% { box-shadow: var(--well), inset 0 0 0 0 transparent; animation-timing-function: ease-in-out; }
+  40% { box-shadow: var(--well), var(--lip-top); animation-timing-function: ease-in-out; }
+  100% { box-shadow: var(--well), inset 0 0 0 0 transparent; }
+}
+@keyframes alt-breath-calm { to { background-color: color-mix(in oklab, var(--surface-well), var(--surface-trench) 45%); } }
+[data-loading="breath"] .alt-await[data-phase="reveal"] > .alt-await-face { position: relative; animation: alt-fill-ride calc(var(--dur-travel-3) * 2) linear var(--alt-rise-delay, 0ms) backwards; }
+[data-loading="breath"] .alt-await[data-phase="reveal"] > .alt-await-imprint { animation: alt-fill-past calc(var(--dur-travel-3) * 2) linear var(--alt-rise-delay, 0ms) forwards; }
+[data-loading="breath"] .alt-await[data-phase="reveal"][data-arrival="late"] > .alt-await-imprint { animation: alt-await-fill var(--dur-travel-1) linear var(--alt-rise-delay, 0ms) forwards; }
+[data-loading="breath"] .alt-await[data-phase="reveal"][data-arrival="late"]:not([data-rest="raised"]) > .alt-await-face::before {
+  content: ""; position: absolute; inset: -3px -6px; z-index: -1; border-radius: var(--radius-sm); pointer-events: none;
+  background: var(--surface-raised); box-shadow: var(--elev-1); animation: alt-plate var(--dur-plate) linear var(--alt-rise-delay, 0ms) both;
+}
+[data-loading="breath"] .alt-await[data-phase="reveal"][data-rest="raised"] > .alt-await-face { animation: alt-arrive var(--dur-arrive) linear var(--alt-rise-delay, 0ms) backwards; }
+[data-loading="breath"] .alt-await[data-phase="reveal"][data-rest="raised"] > .alt-await-face::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--alt-await-radius, var(--radius-lg)); pointer-events: none;
+  box-shadow: var(--elev-2); animation: alt-plate var(--dur-arrive) linear var(--alt-rise-delay, 0ms) both;
+}
+[data-loading="breath"] .alt-await[data-phase="reveal"][data-rest="raised"] > .alt-await-imprint { animation: alt-await-fill var(--dur-travel-3) linear var(--alt-rise-delay, 0ms) forwards; }
+[data-loading="breath"] .alt-reveal[data-reveal] { animation: alt-reveal-past calc(var(--dur-travel-3) * 2) linear var(--alt-rise-delay, 0ms) backwards; }
+/* A chart's marks still fade in place (Charts: "fade, don't rise"), under breath too. */
+[data-loading="breath"] .alt-await.alt-chart-await[data-phase="reveal"] > .alt-await-face { animation: alt-emerge var(--dur-travel-3) var(--ease-rise) var(--alt-rise-delay, 0ms) backwards; }
+[data-loading="breath"] .alt-await.alt-chart-await[data-phase="reveal"] > .alt-await-imprint { animation: alt-await-fill var(--dur-travel-3) linear var(--alt-rise-delay, 0ms) forwards; }
+[data-loading="breath"] .alt-reveal[data-reveal] > .alt-reveal-inner { animation: alt-fill-ride calc(var(--dur-travel-3) * 2) linear var(--alt-rise-delay, 0ms) backwards; }
+@keyframes alt-fill-ride {
+  0% { opacity: 0; transform: translateY(calc(3px * var(--alt-travel))); animation-timing-function: var(--ease-rise); }
+  50% { opacity: 1; transform: translateY(calc(-1.5px * var(--alt-travel))); animation-timing-function: var(--ease-decay); }
+  100% { transform: none; }
+}
+@keyframes alt-fill-past {
+  0% { background-color: var(--surface-well); box-shadow: var(--well); animation-timing-function: var(--ease-rise); }
+  50% { opacity: 1; background-color: var(--surface-raised); box-shadow: var(--elev-1); animation-timing-function: var(--ease-decay); }
+  100% { opacity: 0; background-color: var(--surface-ground); box-shadow: var(--elev-0); }
+}
+@keyframes alt-reveal-past {
+  0% { background-color: var(--surface-well); box-shadow: var(--well); animation-timing-function: var(--ease-rise); }
+  50% { background-color: var(--surface-raised); box-shadow: var(--elev-1); animation-timing-function: var(--ease-decay); }
+  100% { background-color: transparent; box-shadow: var(--elev-0); }
+}
+@keyframes alt-arrive {
+  0% { opacity: 0; transform: translateY(calc(8px * var(--alt-travel))); animation-timing-function: var(--ease-rise); }
+  20% { opacity: 1; transform: translateY(calc(-3px * var(--alt-travel))); animation-timing-function: var(--ease-decay); }
+  100% { transform: none; }
+}
+@keyframes alt-plate { 0% { opacity: 0; } 20% { opacity: 1; animation-timing-function: var(--ease-decay); } 100% { opacity: 0; } }
+/* Reduced motion and forced colours: the breath stops, as a pending write's does; the imprint holds still at well depth. */
+@media (prefers-reduced-motion: reduce) { [data-loading="breath"] :is(.alt-skeleton, [data-calm] .alt-skeleton, .alt-skeleton[data-calm]) { animation: none; } }
+[data-motion="reduced"] :is(.alt-skeleton, [data-calm] .alt-skeleton, .alt-skeleton[data-calm]) { animation: none; }
+@media (forced-colors: active) { [data-loading="breath"] :is(.alt-skeleton, [data-calm] .alt-skeleton, .alt-skeleton[data-calm]) { animation: none; } }
 .alt-avatar-imprint { display: inline-block; vertical-align: middle; }
 .alt-badge-imprint { display: inline-block; vertical-align: middle; width: 64px; height: 22px; }
 .alt-badge-imprint[data-variant="count"] { width: 22px; border-radius: var(--radius-full); }
@@ -820,8 +941,38 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   flex: none; width: 24px; height: 24px; margin: -2px -6px 0 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-xs);
   background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), color var(--dur-travel-1);
 }
-.alt-alert-close:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); }
+@media (hover: hover) { .alt-alert-close:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--ink); } }
 .alt-alert-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-alert-close[data-labelled] { width: auto; height: auto; padding: 4px 8px; font: 500 13px/18px var(--font-sans); white-space: nowrap; align-self: center; }
+/* A page banner: the same sheet, laid edge to edge across the top of the app or page, so it has no side rounding and
+   no side edges, only its bottom edge and contact shadow. It informs (flat, ground) or asks for action (raised), as
+   any Alert does. Sticky, it stays at the top while the page scrolls. Its text wraps; its padding follows the page's. */
+.alt-banner[data-sticky] { position: sticky; top: 0; z-index: 30; }
+.alt-alert[data-placement="page"] { border-radius: 0; box-shadow: 0 1px 0 0 color-mix(in oklab, var(--a-fg) 22%, transparent), 0 1.5px 3px -0.5px var(--alt-cast); }
+.alt-alert[data-placement="page"][data-variant="raised"] { box-shadow: var(--elev-1); }
+.alt-alert[data-placement="page"] .alt-alert-inner { flex-wrap: wrap; padding: var(--space-3) var(--alt-page-pad, var(--space-4)); }
+.alt-alert[data-placement="page"] .alt-alert-body { min-width: min(100%, 240px); }
+.alt-alert-stack[data-placement="page"] .alt-alert-sheet { border-radius: 0; left: 0; right: 0; }
+
+/* ── RemovalReceipt. Left in place, then closed: the result shows in the item's slot, at its height, on the ground
+   (a trace of what happened, not a live surface). It lifts off as an Alert does, and only then does the gap glide shut. ── */
+.alt-receipt-item { display: contents; }
+/* The receipt lays itself out, whatever the item's own layout was (a row stacked on a phone included); at the item's
+   height, its line sits in the middle of the slot. */
+.alt-receipt[data-removed] { box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; justify-content: flex-start; gap: var(--space-2) var(--space-3); }
+.alt-receipt-note:empty { display: none; }
+.alt-receipt-note { flex: 1 1 12rem; min-width: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font: 400 14px/20px var(--font-sans);
+  animation: alt-receipt-in var(--dur-travel-2) ease-out both; }
+.alt-receipt-icon { display: inline-flex; flex: none; }
+.alt-receipt[data-tone="critical"] .alt-receipt-note { color: var(--ink); }
+.alt-receipt[data-tone="critical"] .alt-receipt-icon { color: var(--critical); }
+.alt-receipt-action { display: flex; flex-wrap: wrap; gap: var(--space-2); animation: alt-receipt-in var(--dur-travel-2) ease-out both; }
+@keyframes alt-receipt-in { from { opacity: 0; } }
+/* Like every pending surface, it only shows as pending after dur-grace, so a fast write never flickers. */
+.alt-receipt[data-status="pending"] { background: var(--surface-lifted); border-radius: var(--radius-md); transition: background-color var(--dur-travel-1) var(--ease-rise) var(--dur-grace); animation-fill-mode: forwards; }
+.alt-receipt[data-leaving] { pointer-events: none; }
+.alt-receipt[data-leaving] > .alt-receipt-note, .alt-receipt[data-leaving] > .alt-receipt-action { animation: alt-lifted-off calc(var(--dur-travel-3) * 0.7) var(--ease-sink) both; }
+@media (forced-colors: active) { .alt-receipt[data-removed] { outline: 1px solid CanvasText; outline-offset: -1px; } }
 
 .alt-alert-stack { position: relative; display: grid; gap: var(--space-2); }
 .alt-alert-stack[data-sheets="1"] { --sheets: 1; } .alt-alert-stack[data-sheets="2"] { --sheets: 2; }
@@ -843,11 +994,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   background: var(--surface-floating); color: var(--ink); box-shadow: var(--elev-2); font: 600 12px/1 var(--font-sans); cursor: pointer;
   transition: box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
 }
-.alt-alert-more:hover { box-shadow: var(--elev-3); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-alert-more:hover { box-shadow: var(--elev-3); transform: translateY(calc(-1px * var(--alt-travel))); } }
 .alt-alert-more:active { box-shadow: var(--elev-1); transform: none; transition-duration: var(--dur-press); }
 .alt-alert-more:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-alert-stack[data-expanded] .alt-alert-more { position: static; justify-self: end; height: 26px; background: none; color: var(--ink-muted); box-shadow: none; transform: none; }
-.alt-alert-stack[data-expanded] .alt-alert-more:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); }
+@media (hover: hover) { .alt-alert-stack[data-expanded] .alt-alert-more:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } }
 .alt-alert-stack-item { animation: alt-fan var(--dur-travel-3) var(--ease-settle) calc(var(--i) * 30ms) backwards; }
 .alt-alert-stack-item:first-child { animation: none; }
 @keyframes alt-fan { from { opacity: 0; transform: translateY(calc(var(--i) * -12px * var(--alt-travel))) scale(calc(1 - 0.02 * var(--alt-travel))); } }
@@ -867,8 +1018,8 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-acc-item[data-state="open"] { background: var(--surface-raised); box-shadow: var(--elev-2); margin: var(--space-2) 0; }
 .alt-acc-item[data-state="open"]:first-child { margin-top: 0; }
 .alt-acc-item[data-state="open"]:last-child { margin-bottom: 0; }
-.alt-acc-item[data-state="open"]::before, .alt-acc-item[data-state="open"] + .alt-acc-item::before,
-.alt-acc-item:has(> .alt-acc-heading .alt-acc-trigger:hover)::before, .alt-acc-item:has(> .alt-acc-heading .alt-acc-trigger:hover) + .alt-acc-item::before { opacity: 0; }
+.alt-acc-item[data-state="open"]::before, .alt-acc-item[data-state="open"] + .alt-acc-item::before { opacity: 0; }
+@media (hover: hover) { .alt-acc-item:has(> .alt-acc-heading .alt-acc-trigger:hover)::before, .alt-acc-item:has(> .alt-acc-heading .alt-acc-trigger:hover) + .alt-acc-item::before { opacity: 0; } }
 .alt-acc-heading { margin: 0; }
 .alt-acc-trigger {
   display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
@@ -876,11 +1027,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   font: 500 15px/22px var(--font-sans); text-align: left; cursor: pointer;
   transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise);
 }
-.alt-acc-item[data-state="closed"] .alt-acc-trigger:hover {
+@media (hover: hover) { .alt-acc-item[data-state="closed"] .alt-acc-trigger:hover {
   background: color-mix(in oklab, var(--surface-raised) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 5%, transparent), 0 1px 2px var(--alt-cast);
-}
+} }
 .alt-acc-chevron { flex: none; color: var(--ink-muted); transition: transform var(--dur-travel-3) var(--ease-settle); }
-.alt-acc-trigger:hover .alt-acc-chevron { transform: translateY(calc(2px * var(--alt-travel))); }
+@media (hover: hover) { .alt-acc-trigger:hover .alt-acc-chevron { transform: translateY(calc(2px * var(--alt-travel))); } }
 .alt-acc-item[data-state="open"] .alt-acc-chevron { transform: rotate(180deg); }
 .alt-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-travel-3) var(--ease-glide); }
 .alt-acc-item[data-state="open"] .alt-acc-panel { grid-template-rows: 1fr; }
@@ -918,15 +1069,19 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-tip {
   left: 50%; bottom: calc(100% + 8px); translate: -50% 0; transform-origin: 50% 100%;
   padding: 5px 10px; border-radius: var(--radius-sm); background: var(--surface-floating); box-shadow: var(--elev-3);
-  font: 500 12.5px/17px var(--font-sans); white-space: nowrap; pointer-events: none;
+  font: 500 12.5px/17px var(--font-sans); width: max-content; max-width: min(320px, calc(100vw - 16px)); pointer-events: none;
 }
 .alt-tip[data-side="bottom"] { bottom: auto; top: calc(100% + 8px); transform-origin: 50% 0; }
 .alt-tip[data-state="closed"] { transform: translateY(calc(4px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel))); }
 .alt-tip[data-side="bottom"][data-state="closed"] { transform: translateY(calc(-4px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel))); }
+.alt-tip[data-side="right"] { left: calc(100% + 8px); bottom: auto; top: 50%; translate: 0 -50%; transform-origin: 0 50%; }
+.alt-tip[data-side="right"][data-state="closed"] { transform: translateX(calc(-4px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel))); }
 .alt-tip[data-warm] { transition-duration: var(--dur-travel-1); }
 
+/* On screen at any width (#248): a panel is capped at the viewport's width, and useFitFloating shifts it sideways to
+   stay 8px clear of the edges when it opens. */
 .alt-pop {
-  top: calc(100% + 8px); left: 0; transform-origin: 0 0; min-width: 220px; padding: var(--space-4);
+  top: calc(100% + 8px); left: 0; transform-origin: 0 0; min-width: min(220px, calc(100vw - 16px)); max-width: calc(100vw - 16px); box-sizing: border-box; padding: var(--space-4);
   border-radius: var(--radius-lg); background: var(--surface-floating); box-shadow: var(--elev-3); outline: none;
 }
 .alt-pop[data-align="end"] { left: auto; right: 0; transform-origin: 100% 0; }
@@ -936,14 +1091,14 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-pop[data-state="closed"] { transform: translateY(calc(-6px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel))); }
 .alt-pop[data-side="top"][data-state="closed"] { transform: translateY(calc(6px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel))); }
 
-.alt-menu { padding: var(--space-1); min-width: 228px; }
+.alt-menu { padding: var(--space-1); min-width: min(228px, calc(100vw - 16px)); }
 .alt-menu-hl {
   position: absolute; top: 0; left: var(--space-1); right: var(--space-1); border-radius: var(--radius-sm); background: var(--accent-soft);
   pointer-events: none; transition: transform var(--dur-travel-2) var(--ease-settle), height var(--dur-travel-2) var(--ease-settle), opacity var(--dur-travel-1), background-color var(--dur-travel-1);
 }
 .alt-menu-hl[data-tone="critical"] { background: var(--critical-soft); }
 .alt-menu-item, .alt-menu-label {
-  position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm);
+  position: relative; display: flex; align-items: center; gap: 10px; min-height: calc(var(--size-control-md) - 2px); padding: 0 10px; border-radius: var(--radius-sm);
   font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; user-select: none;
   opacity: 0; transform: translateY(calc(-3px * var(--alt-travel)));
   transition: opacity var(--dur-travel-2) var(--ease-rise), transform var(--dur-travel-2) var(--ease-rise);
@@ -959,14 +1114,15 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-menu-sep { height: 1px; margin: var(--space-1) 6px; background: var(--line); }
 
 /* ── Dialog: level 5. The page recedes, the scrim veils it, the dialog rises with its shadow growing. ── */
-.alt-dialog-root { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-6); }
+/* The modal roots cover the visible viewport (#251), not the largest one, so a footer is never under the keyboard. */
+.alt-dialog-root { position: fixed; inset: 0; top: var(--alt-vv-top, 0px); bottom: auto; height: var(--alt-vvh, 100dvh); z-index: var(--z-modal); display: grid; place-items: center; padding: var(--alt-inset-page); padding: calc(var(--alt-inset-page) + env(safe-area-inset-top, 0px)) calc(var(--alt-inset-page) + env(safe-area-inset-right, 0px)) calc(var(--alt-inset-page) + env(safe-area-inset-bottom, 0px)) calc(var(--alt-inset-page) + env(safe-area-inset-left, 0px)); }
 .alt-scrim {
-  position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
+  position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); /* tells-ignore: CM2 the scrim recedes the page behind a dialog (Elevation), not decoration */
   transition: opacity var(--dur-travel-5) var(--ease-rise);
 }
 .alt-dialog {
-  position: relative; width: min(100%, 460px); max-height: calc(100vh - 48px); overflow: auto; outline: none;
-  padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-modal); box-shadow: var(--elev-5); color: var(--ink);
+  position: relative; width: min(100%, 460px); max-height: calc(100vh - 48px); max-height: calc(var(--alt-vvh, 100dvh) - 2 * var(--alt-inset-page)); overflow: auto; outline: none;
+  padding: var(--alt-inset-page); border-radius: var(--radius-xl); background: var(--surface-modal); box-shadow: var(--elev-5); color: var(--ink);
   transition: opacity var(--dur-travel-5) var(--ease-rise), transform var(--dur-travel-5) var(--ease-rise), box-shadow var(--dur-travel-5) var(--ease-rise);
 }
 .alt-dialog[data-size="sm"] { width: min(100%, 380px); }
@@ -987,10 +1143,16 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-dialog-close { position: absolute; top: var(--space-4); right: var(--space-4); color: var(--ink-muted); }
 
 /* ── Toast: the stack is a depth stack. Newest in front at level 4; older ones sink behind it. ── */
+/* Safe areas (#252): every layer fixed to the screen's edge adds env(safe-area-inset-*) to its offset, so in an
+   edge-to-edge page (viewport-fit=cover) it clears the notch, the rounded corners and the home indicator. Without
+   viewport-fit=cover env() is 0 and nothing moves. The mode frame stays at the physical edge: it frames the screen. */
 .alt-toaster {
-  position: fixed; z-index: var(--z-toast); right: var(--space-6); bottom: var(--space-6); width: min(360px, calc(100vw - 32px));
+  position: fixed; z-index: var(--z-toast); right: calc(var(--space-6) + env(safe-area-inset-right, 0px)); bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); width: min(360px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
   transition: height var(--dur-travel-4) var(--ease-rise);
 }
+/* On touch (#253): a tap opens the stack and holds it (timers paused) until a tap outside; a horizontal swipe dismisses
+   a toast, so the toast lets vertical scrolling through. */
+.alt-toast { touch-action: pan-y; }
 .alt-toast {
   position: absolute; right: 0; bottom: 0; width: 100%; display: flex; align-items: flex-start; gap: var(--space-3);
   padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg);
@@ -1011,7 +1173,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   display: grid; place-items: center; width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0; flex: none; border: 0; border-radius: var(--radius-xs);
   background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), color var(--dur-travel-1);
 }
-.alt-toast-close:hover { background: var(--surface-well); color: var(--ink); }
+@media (hover: hover) { .alt-toast-close:hover { background: var(--surface-well); color: var(--ink); } }
 
 
 /* ════════════════════ Depth signals: what height can tell you ════════════════════ */
@@ -1075,7 +1237,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 /* ── HoldButton: holding pushes it through the ground; the fuse along the bottom shows how far. ── */
 .alt-hold { overflow: visible; }
 .alt-hold .alt-btn-label { position: static; }
-.alt-hold-text { position: relative; }
+/* All of its labels share one grid cell and only the current one is visible, so the button keeps the width of its
+   longest label: holding and completing never change its size or move what's beside it. */
+.alt-hold-text { position: relative; display: inline-grid; justify-items: center; }
+.alt-hold-label { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
+.alt-hold-label:not([data-shown]) { visibility: hidden; }
 .alt-hold-fill {
   position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: var(--radius-full); background: currentColor; opacity: 0.9;
   transform: scaleX(0); transform-origin: left; transition: transform var(--dur-travel-2) var(--ease-sink);
@@ -1087,13 +1253,1366 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-hold[data-hold="holding"] .alt-hold-fill { transform: scaleX(1); transition: transform var(--alt-hold-dur) linear; }
 .alt-hold[data-hold="done"]:not([data-final]) { animation: alt-land-a calc(var(--dur-travel-3) * 1.6) var(--ease-settle); }
 /* A completed hold is final by default: the action is now part of the record, so the button lies flat and can't be pressed again. */
-.alt-btn.alt-hold[data-final], .alt-btn.alt-hold[data-final]:hover, .alt-btn.alt-hold[data-final]:active, .alt-btn.alt-hold[data-final]:focus-visible {
+.alt-btn.alt-hold[data-final], .alt-btn.alt-hold[data-final]:active, .alt-btn.alt-hold[data-final]:focus-visible {
   background: var(--surface-well); background-image: none; color: var(--ink-muted); box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); transform: none; cursor: default;
   transition: box-shadow var(--dur-travel-2) var(--ease-settle), transform var(--dur-travel-2) var(--ease-settle), background-color var(--dur-travel-2), color var(--dur-travel-2);
 }
+@media (hover: hover) { .alt-btn.alt-hold[data-final]:hover {
+  background: var(--surface-well); background-image: none; color: var(--ink-muted); box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); transform: none; cursor: default;
+  transition: box-shadow var(--dur-travel-2) var(--ease-settle), transform var(--dur-travel-2) var(--ease-settle), background-color var(--dur-travel-2), color var(--dur-travel-2);
+} }
 
 .alt-hold[data-final] .alt-hold-fill { opacity: 0; }
 
+/* ── Separator: a divider is part of the page, so it's 1px of line on the ground: no shadow, no wall, never
+   line-control (that's for the edges of controls). A vertical one stretches to its row. A labelled one ("or") is the
+   word in ink-muted between two lines; its lines are drawn, so only the word is read. ── */
+.alt-sep { flex: none; margin: 0; border: 0; background: var(--line); }
+.alt-sep[data-orientation="horizontal"] { width: 100%; height: 1px; }
+.alt-sep[data-orientation="vertical"] { display: inline-block; width: 1px; min-height: 1em; align-self: stretch; vertical-align: middle; }
+/* A card's header has no bottom padding (its content brings the gap), so a separator under it brings the same gap. */
+.alt-card-header + .alt-sep { margin-top: var(--space-4); }
+.alt-sep-labelled, .alt-sep-labelled[data-orientation] { display: flex; align-items: center; gap: var(--space-3); width: auto; height: auto; background: none; font: 500 12.5px/17px var(--font-sans); letter-spacing: 0.005em; color: var(--ink-muted); }
+.alt-sep-labelled[data-orientation="vertical"] { flex-direction: column; min-height: 4em; }
+.alt-sep-labelled::before, .alt-sep-labelled::after { content: ""; flex: 1; min-width: 1px; min-height: 1px; background: var(--line); }
+@media (prefers-contrast: more) { .alt-sep:not(.alt-sep-labelled), .alt-sep-labelled::before, .alt-sep-labelled::after { background: var(--line-control); } }
+[data-contrast="more"] .alt-sep:not(.alt-sep-labelled), [data-contrast="more"] .alt-sep-labelled::before, [data-contrast="more"] .alt-sep-labelled::after { background: var(--line-control); }
+@media (forced-colors: active) { .alt-sep:not(.alt-sep-labelled), .alt-sep-labelled::before, .alt-sep-labelled::after { background: CanvasText; forced-color-adjust: none; } }
+
+/* ── Link: navigation is text in the record, so it never lifts: lifting a word would break its line. It's accent-ink
+   with an underline (never colour alone); hover thickens the underline, focus is the 2px accent-ink ring. An external
+   link ends with an icon and says it opens a new tab. ── */
+.alt-link {
+  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
+  border-radius: var(--radius-xs); cursor: pointer; transition: text-decoration-thickness var(--dur-travel-1) var(--ease-rise);
+}
+@media (hover: hover) { .alt-link:hover { text-decoration-thickness: 2px; } }
+.alt-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-link[data-visited]:visited { text-decoration-color: var(--ink-muted); }
+.alt-link-tail { white-space: nowrap; }
+.alt-link-ext { display: inline-block; margin-left: 0.2em; vertical-align: -0.1em; }
+@media (prefers-contrast: more) { .alt-link { text-decoration-thickness: 2px; } }
+[data-contrast="more"] .alt-link { text-decoration-thickness: 2px; }
+@media (forced-colors: active) { .alt-link { color: LinkText; } .alt-link:focus-visible { outline-color: Highlight; } }
+
+/* ── FormattedNumber: a number is the record, so it lies flush in its sentence or cell, in tabular figures. A changed
+   value cross-fades (the old figure fading out over the new) and takes a ground-level tint that decays over dur-settle:
+   the afterglow without the lift, because a word in a line can't rise. It never counts. ── */
+.alt-num { display: inline-grid; padding: 0 3px; margin: 0 -3px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.alt-num-text { grid-area: 1 / 1; }
+.alt-num-text[data-in] { animation: alt-stat-in var(--dur-travel-2) var(--ease-glide) both; }
+.alt-num-text[data-out] { animation: alt-stat-out var(--dur-travel-2) var(--ease-glide) both; }
+.alt-num[data-settle]::before { animation-name: alt-chart-tint-a; }
+.alt-num[data-settle="b"]::before { animation-name: alt-chart-tint-b; }
+@media (prefers-reduced-motion: reduce) { .alt-num-text[data-in] { animation: none; } .alt-num-text[data-out] { display: none; } }
+[data-motion="reduced"] .alt-num-text[data-in] { animation: none; }
+[data-motion="reduced"] .alt-num-text[data-out] { display: none; }
+@media (forced-colors: active) { .alt-num[data-settle]::before { border: 1px solid Highlight; } }
+
+/* ── RelativeTime: a timestamp is part of the record, so it's plain text on the ground. Ticking forward ("3 min" to
+   "4 min") isn't a change to the record and gets nothing; a new moment (the record edited again) takes the same
+   ground-level tint as a changed number. It's focusable for its Tooltip, so it carries the focus ring. ── */
+.alt-reltime { padding: 0 2px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums; }
+.alt-reltime:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 0; }
+.alt-reltime[data-settle]::before { animation-name: alt-chart-tint-a; }
+.alt-reltime[data-settle="b"]::before { animation-name: alt-chart-tint-b; }
+@media (forced-colors: active) { .alt-reltime[data-settle]::before { border: 1px solid Highlight; } .alt-reltime:focus-visible { outline-color: Highlight; } }
+
+/* ── CopyButton: copying is a press that confirms in words. It's a Button (ghost by default); once copied it stays
+   pressed to the ground for dur-linger, its icon cross-fades from copy to a check and its words to "Copied" (all its
+   words share one cell, so its width never changes). No rise and no afterglow: nothing new arrived on the page. A
+   failure says so in words, with the way to copy by hand announced. ── */
+.alt-copy-icons, .alt-copy-words { display: inline-grid; place-items: center; }
+.alt-copy-icons > svg, .alt-copy-words > span { grid-area: 1 / 1; transition: opacity var(--dur-travel-1) var(--ease-rise); }
+.alt-copy-icons > svg:not([data-shown]), .alt-copy-words > span:not([data-shown]) { opacity: 0; visibility: hidden; }
+.alt-copy-words > span { white-space: nowrap; }
+.alt-btn.alt-copy[data-copy="copied"], .alt-btn.alt-copy[data-copy="copied"]:focus-visible {
+  box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); background-image: none; transform: translateY(var(--wall));
+}
+@media (hover: hover) { .alt-btn.alt-copy[data-copy="copied"]:hover {
+  box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); background-image: none; transform: translateY(var(--wall));
+} }
+.alt-btn.alt-copy[data-variant="ghost"][data-copy="copied"] { background: transparent; }
+.alt-btn.alt-copy[data-copy="failed"] .alt-copy-icons { color: var(--critical); }
+@media (forced-colors: active) { .alt-btn.alt-copy:hover:not([data-copy="copied"]) { border: 1px solid ButtonText; } }
+
+/* ── Toggle and ToggleGroup: a button that stays on. On is a choice, so it's built like the Switch, not like a held
+   press (which would read as loading): the face is cut into a shallow well with accent-soft poured in and the label in
+   accent-ink. Off is the ghost (ground) or secondary (level 1) slab it started as. Pointing at an on toggle previews
+   off: the well lightens toward the raised face it will become. Sinking uses ease-sink, rising ease-rise.
+   type="single" is segmented Tabs without panels: options in a well, one raised pill that glides (the same classes).
+   type="multiple" is a row of Toggles. ── */
+.alt-btn.alt-toggle[aria-pressed="true"], .alt-btn.alt-toggle[aria-pressed="true"]:focus-visible, .alt-btn.alt-toggle[aria-pressed="true"]:active:not(:disabled) {
+  --wall: 0px; background: var(--accent-soft); background-image: none; color: var(--accent-ink); box-shadow: var(--well); transform: none;
+  transition: background-color var(--dur-travel-2) var(--ease-sink), box-shadow var(--dur-travel-2) var(--ease-sink), color var(--dur-travel-2) var(--ease-sink);
+}
+@media (hover: hover) { .alt-btn.alt-toggle[aria-pressed="true"]:hover:not(:disabled):not([data-loading]) {
+  --wall: 0px; background: var(--accent-soft); background-image: none; color: var(--accent-ink); box-shadow: var(--well); transform: none;
+  transition: background-color var(--dur-travel-2) var(--ease-sink), box-shadow var(--dur-travel-2) var(--ease-sink), color var(--dur-travel-2) var(--ease-sink);
+} }
+@media (hover: hover) { .alt-btn.alt-toggle[aria-pressed="true"]:hover:not(:disabled):not([data-loading]) { background: color-mix(in oklab, var(--accent-soft) 55%, var(--surface-raised)); } }
+.alt-btn.alt-toggle[aria-pressed="true"]:disabled { background: var(--surface-well); color: var(--ink-faint); }
+.alt-tgroup[data-type="multiple"] { display: inline-flex; align-items: center; gap: 2px; }
+.alt-tgroup[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
+.alt-tgroup[data-type="single"] .alt-tabs-indicator { transition: none; }
+.alt-tgroup[data-type="single"] .alt-tabs-indicator[data-ready] { transition: transform var(--dur-travel-3) var(--ease-glide), top var(--dur-travel-3) var(--ease-glide), width var(--dur-travel-3) var(--ease-glide), height var(--dur-travel-3) var(--ease-glide), opacity var(--dur-travel-1); }
+@media (prefers-reduced-motion: reduce) { .alt-tgroup[data-type="single"] .alt-tabs-indicator[data-ready] { transition: opacity var(--dur-travel-1); } }
+[data-motion="reduced"] .alt-tgroup[data-type="single"] .alt-tabs-indicator[data-ready] { transition: opacity var(--dur-travel-1); }
+.alt-tgroup .alt-tabs-trigger:disabled { color: var(--ink-faint); cursor: not-allowed; }
+@media (forced-colors: active) {
+  .alt-btn.alt-toggle[aria-pressed="true"] { border: 1px dashed CanvasText; background: Highlight; color: HighlightText; forced-color-adjust: none; }
+  .alt-btn.alt-toggle[data-variant="secondary"][aria-pressed="false"] { border: 1px solid CanvasText; }
+}
+
+/* ── Toolbar: the bar lies on the ground (a line rim when bordered); its tools are ghost buttons that lift one level
+   when pointed at, and latched tools are Toggles. Groups are parted by decorative separators. With overflow="menu" the
+   tools that don't fit are hidden from the end and offered in a "More tools" menu; they don't animate as they go. ── */
+.alt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
+.alt-toolbar[data-overflow="menu"] { flex-wrap: nowrap; }
+.alt-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
+.alt-toolbar[data-bordered] { padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-ground); }
+.alt-toolbar > [data-overflowed] { display: none; }
+.alt-toolbar-group { display: inline-flex; align-items: center; gap: 2px; }
+.alt-toolbar[data-orientation="vertical"] .alt-toolbar-group { flex-direction: column; align-items: stretch; }
+.alt-toolbar .alt-sep[data-orientation="vertical"] { align-self: center; height: 20px; min-height: 0; margin-inline: var(--space-1); }
+.alt-toolbar[data-orientation="vertical"] .alt-sep[data-orientation="vertical"] { width: auto; height: 1px; margin: var(--space-1) 0; }
+.alt-toolbar-more { flex: none; margin-left: auto; }
+@media (forced-colors: active) { .alt-toolbar-btn:hover:not([aria-pressed="true"]), .alt-toolbar-btn:focus-visible:not([aria-pressed="true"]) { border: 1px solid CanvasText; } }
+
+/* ── SplitButton: one action with its alternatives. Two faces on one slab, sharing one wall: the action and a chevron,
+   parted by a 1px notch (line-control). Each face lifts on its own when pointed at, because each does something
+   different, and each has its own focus ring around its face and wall. A loading action is held pressed while the
+   chevron stays usable. ── */
+.alt-split { display: inline-flex; align-items: stretch; isolation: isolate; }
+.alt-split .alt-pop-anchor { display: inline-flex; }
+.alt-split .alt-split-action { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.alt-split .alt-split-menu { border-top-left-radius: 0; border-bottom-left-radius: 0; width: 32px; }
+.alt-split .alt-split-menu[data-size="sm"] { width: 26px; }
+.alt-split .alt-split-action::after { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+.alt-split .alt-split-menu::after { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+.alt-split .alt-split-menu::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-control); pointer-events: none; }
+.alt-split[data-variant="primary"] .alt-split-menu::before { background: color-mix(in oklab, var(--on-accent) 45%, var(--accent)); }
+.alt-split .alt-split-action:focus-visible, .alt-split .alt-split-menu:focus-visible { z-index: 1; }
+/* One slab, so it moves as one: pointing at either face lifts both, and pressing either presses both, so the faces
+   never stand at two heights with a step between them. Which face you're on (and so what a click does) is said by a
+   tint on that face alone, not by height. */
+@media (hover: hover) {
+  .alt-split:has(:is(.alt-split-action, .alt-split-menu):hover:not(:disabled)) :is(.alt-split-action, .alt-split-menu):not(:disabled) {
+    background: var(--alt-bg-up); background-image: var(--alt-sheen);
+    box-shadow: 0 calc(var(--wall) + 1px) 0 0 var(--wall-c), var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel)));
+  }
+  .alt-split:has(:is(.alt-split-action, .alt-split-menu):hover:not(:disabled)) :is(.alt-split-action, .alt-split-menu):hover:not(:disabled) { background-color: color-mix(in oklab, var(--alt-bg-up), var(--alt-fg) 12%); }
+}
+.alt-split:has(:is(.alt-split-action, .alt-split-menu):focus-visible) :is(.alt-split-action, .alt-split-menu):not(:disabled) {
+  background-image: var(--alt-sheen); box-shadow: 0 calc(var(--wall) + 1px) 0 0 var(--wall-c), var(--alt-sh-up); transform: translateY(calc(-1px * var(--alt-travel)));
+}
+.alt-split:has(:is(.alt-split-action, .alt-split-menu):active:not(:disabled)) :is(.alt-split-action, .alt-split-menu):not(:disabled) {
+  box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); background-image: none; transform: translateY(var(--wall));
+  transition-duration: var(--dur-press); transition-timing-function: ease-out;
+}
+@media (forced-colors: active) { .alt-split .alt-split-menu::before { background: CanvasText; } }
+
+/* ── NumberInput: an opening that fills, like Input, with two small raised steppers in its end cap: you press them,
+   so they're slabs (push up, fill down), level 1 with a 1px wall, lifting to 2 when pointed at, flush and faint at a
+   limit. The unit sits beside the number in ink-muted. Editing isn't a change to the record, so nothing glows. ── */
+.alt-numfield { padding-right: 3px; }
+.alt-numfield input { font-variant-numeric: tabular-nums; }
+.alt-numfield-unit { font: 400 14px/20px var(--font-sans); }
+/* Side by side, 24×24 each (#261): stacked, two 15px steppers could never each reach the 24px minimum. Down first. */
+.alt-numfield-steps { display: flex; flex-direction: row-reverse; gap: 2px; flex: none; align-self: center; }
+.alt-numfield-step {
+  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-xs); cursor: pointer;
+  background: var(--surface-raised); background-image: var(--alt-sheen); color: var(--ink-muted);
+  box-shadow: 0 1px 0 0 var(--surface-trench), var(--elev-1);
+  transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle), color var(--dur-travel-1);
+}
+.alt-numfield[data-size="sm"] .alt-numfield-step { height: 24px; }
+@media (hover: hover) { .alt-numfield-step:hover:not(:disabled) { background-color: var(--surface-lifted); color: var(--ink); box-shadow: 0 2px 0 0 var(--surface-trench), var(--elev-2); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-numfield-step:active:not(:disabled) { box-shadow: 0 0 0 0 var(--surface-trench), var(--elev-0); background-image: none; transform: translateY(1px); transition-duration: var(--dur-press); }
+.alt-numfield-step:disabled { background: transparent; background-image: none; box-shadow: none; color: var(--ink-faint); cursor: default; }
+[data-contrast="more"] .alt-numfield-step:not(:disabled) { box-shadow: 0 1px 0 0 var(--ink), var(--elev-1); }
+@media (forced-colors: active) { .alt-numfield-step:not(:disabled) { border: 1px solid ButtonText; } }
+
+/* ── InputOTP: a one-time code as a row of openings. One real input lies invisible over the row and drives it; each
+   slot is built like an Input (the same well, wall and floor): empty, its back wall shows; the slot the next character
+   goes into is held (floor lit, the depth approach would preview, the neutral rim when reached by keyboard) with a
+   caret; once its character lands its floor rises flush. A pasted or autofilled code fills left to right, staggered
+   35ms a slot. A rejected code drops the whole row to a trench on critical-soft. ── */
+.alt-otp { position: relative; display: inline-flex; align-items: center; gap: clamp(4px, 2vw, var(--space-2)); max-width: 100%; min-width: 0; }
+.alt-otp-input {
+  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; opacity: 0;
+  background: transparent; color: transparent; caret-color: transparent; font-size: 16px; cursor: text;
+}
+.alt-otp-input:disabled { cursor: not-allowed; }
+/* Narrow (#266): slots give way from 40px to 28px, and gaps tighten, so an eight-character code fits a 320px screen. */
+.alt-otp-group { display: inline-flex; gap: clamp(3px, 1.6vw, 6px); min-width: 0; }
+.alt-otp-slot { justify-content: center; flex: 0 1 40px; width: 40px; min-width: 28px; height: 48px; padding: 0; font: 600 20px/1 var(--font-mono); cursor: text; }
+.alt-otp-slot[data-filled]:not([data-invalid]):not([data-disabled]) { --w: 0px; --n: 0; background: var(--surface-raised); }
+.alt-otp-slot[data-active]:not([data-invalid]) { background: var(--surface-raised); --n: var(--alt-travel); }
+.alt-otp[data-key-focus] .alt-otp-slot[data-active] { border-color: var(--alt-rim-held); outline-color: var(--alt-rim-held); }
+.alt-otp[data-key-focus] .alt-otp-slot[data-active][data-invalid] { border-color: var(--critical); outline-color: var(--critical); }
+.alt-otp-char { transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle); }
+.alt-otp-caret { position: absolute; left: 50%; top: 50%; width: 1.5px; height: 22px; margin: -11px 0 0 -0.75px; background: var(--ink); animation: alt-otp-blink 1.1s steps(1) infinite; }
+@keyframes alt-otp-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .alt-otp-caret { animation: none; } }
+[data-motion="reduced"] .alt-otp-caret { animation: none; }
+.alt-otp[data-burst] .alt-otp-slot { transition-delay: calc(var(--i) * 35ms); }
+.alt-otp-sep { flex: none; width: 10px; height: 2px; border-radius: var(--radius-full); background: var(--line-control); }
+@media (forced-colors: active) { .alt-otp-slot[data-filled]:not([data-invalid]) { border-style: solid !important; } .alt-otp-caret { background: CanvasText; } }
+
+/* ── TimeInput: a time of day typed by segment, built like DatePicker's field (the same segments and well). It's an
+   opening that fills only when every segment holds a value: a partial time ("09:––") is still a hole. A time zone's
+   short name sits after it in ink-muted, and is spoken with it. ── */
+.alt-time { width: fit-content; min-width: 132px; max-width: 100%; }
+.alt-time-icon { margin-left: -2px; }
+.alt-time-gap { display: inline-block; width: 0.35em; }
+.alt-time-zone { font: 400 13px/20px var(--font-sans); }
+
+/* ── PasswordInput: an Input with a reveal Toggle in its end cap (sunk and filled while the password shows). Creating
+   a password, its strength is a reading, so it's a Meter (a flush track with flat ink), never Progress's raised fill,
+   with the word beside its label; each requirement is stamped as met, like a done Checklist item, muted with a check.
+   Caps Lock is a caption with an icon. ── */
+.alt-pw { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.alt-pw .alt-input { padding-right: 4px; }
+.alt-pw-reveal.alt-btn[data-square][data-size="sm"] { width: var(--size-control-sm); height: var(--size-control-sm); color: var(--ink-muted); }
+.alt-pw-caps { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 12.5px/17px var(--font-sans); color: var(--ink); }
+.alt-pw-caps svg { flex: none; color: var(--caution); }
+.alt-pw-strength .alt-meter-label { display: inline-flex; gap: 8px; }
+.alt-pw-word { font-weight: 600; color: var(--ink); }
+.alt-pw-reqs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font: 400 13px/18px var(--font-sans); color: var(--ink); }
+.alt-pw-reqs li { display: flex; align-items: center; gap: 8px; transition: color var(--dur-travel-1) var(--ease-rise); }
+.alt-pw-reqs li[data-met] { color: var(--ink-muted); }
+.alt-pw-stamp { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: var(--radius-full); border: 1px solid var(--line-control); color: var(--ink-muted); }
+.alt-pw-reqs li[data-met] .alt-pw-stamp { border-color: transparent; background: var(--surface-well); box-shadow: var(--well); }
+@media (forced-colors: active) { .alt-pw-stamp { border-color: CanvasText; } .alt-pw-caps svg { color: CanvasText; } }
+
+/* ── SecretField: two readings. A new secret is an opening, something to take away: a sunk well (its back wall
+   showing, though it holds text) in mono, with a raised Copy beside it and a caution warning, until you confirm you've
+   saved it; then its floor rises flush and it masks to its tail. A stored secret is settled: flush, masked, with a
+   reveal Toggle (if allowed), Rotate and a held revoke. ── */
+.alt-secret { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.alt-secret-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
+.alt-secret-field { flex: 1; min-width: 0; cursor: default; }
+.alt-input.alt-secret-field[data-open] { --w: 4px; background: var(--surface-well); }
+.alt-input.alt-secret-field[data-filled] { border-color: var(--line); }
+.alt-secret-value { flex: 1; min-width: 0; font: 400 13.5px/20px var(--font-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: alt-emerge var(--dur-travel-2) var(--ease-rise); --alt-from-y: 0px; }
+.alt-input input.alt-secret-value { font: 400 13.5px/20px var(--font-mono); cursor: text; }
+.alt-secret-dots { letter-spacing: 0.1em; color: var(--ink-muted); }
+.alt-secret-warning { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 500 12.5px/17px var(--font-sans); color: var(--ink); }
+.alt-secret-warning svg { flex: none; margin-top: 1.5px; color: var(--caution); }
+.alt-secret-saved:focus { outline: none; }
+.alt-secret-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+@media (forced-colors: active) { .alt-input.alt-secret-field[data-filled] { border-style: solid !important; } .alt-secret-warning svg { color: CanvasText; } }
+
+/* ── CodeBlock: code shown to read and copy is the record, so it lies flush on the ground: a 1px line rim, mono type,
+   no shadow. The header carries its name, a segmented switch between forms (npm, pnpm) and a ghost CopyButton.
+   Highlighted lines are accent-soft bands behind the text; line numbers sit in an ink-faint gutter. Code still
+   arriving has a dashed line-control rule down its left and says "Writing…". Syntax colours are yours (ink, ink-muted
+   and accent-ink by default, never the data palette) and carry nothing on their own. ── */
+.alt-code { --alt-code-lh: 20px; margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-ground); color: var(--ink); overflow: hidden; }
+.alt-code[data-streaming] { border-left: 2px dashed var(--line-control); }
+.alt-code-tabs { gap: 0; }
+.alt-code-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 44px; padding: 6px 6px 6px var(--space-4); border-bottom: 1px solid var(--line); }
+.alt-code-head .alt-tabs-list { padding: 2px; }
+.alt-code-head .alt-tabs-trigger { height: 26px; padding: 0 var(--space-2); font-size: 13px; }
+.alt-code-title { font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-code-title[data-language] { font-family: var(--font-mono); color: var(--ink-muted); }
+.alt-code-tools { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
+.alt-code-writing { font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-code-panel { border-radius: 0; animation-duration: var(--dur-travel-1); --alt-from-y: 0px; }
+/* Scrolling in the page chains: a region on the ground (CodeBlock, ScrollArea, Table, Conversation, Terminal,
+   streaming reasoning) hands the wheel or swipe to the page once it reaches its edge, so it never traps you. Only layers
+   above the page (the CommandPalette list, Sheet, a Select's list, a menu as a sheet) contain their overscroll, since
+   the page under them shouldn't move. */
+.alt-code-scroll { overflow: auto; }
+.alt-code-scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-code-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: max-content; padding: var(--space-3) 0; }
+.alt-code-grid[data-numbers] { grid-template-columns: auto minmax(0, 1fr); }
+.alt-code-band { position: absolute; left: 0; right: 0; top: calc(var(--space-3) + var(--l) * var(--alt-code-lh)); height: var(--alt-code-lh); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent-ink); }
+.alt-code-gutter { position: relative; display: flex; flex-direction: column; padding: 0 var(--space-3) 0 var(--space-4); text-align: right; font: 400 12.5px/var(--alt-code-lh) var(--font-mono); color: var(--ink-faint); user-select: none; }
+.alt-code-pre { position: relative; margin: 0; padding: 0 var(--space-4); font: 400 13px/var(--alt-code-lh) var(--font-mono); tab-size: 2; white-space: pre; }
+.alt-code-grid[data-numbers] .alt-code-pre { padding-left: 0; }
+.alt-code-pre code { font: inherit; }
+.alt-code .tok-comment, .alt-code .token.comment, .alt-code .hljs-comment { color: var(--ink-muted); font-style: italic; }
+.alt-code .tok-keyword, .alt-code .token.keyword, .alt-code .hljs-keyword { color: var(--accent-ink); }
+.alt-code .tok-string, .alt-code .token.string, .alt-code .hljs-string { color: var(--ink); }
+@media (prefers-contrast: more) { .alt-code { border-color: var(--line-control); } }
+[data-contrast="more"] .alt-code { border-color: var(--line-control); }
+@media (forced-colors: active) { .alt-code { border: 1px solid CanvasText; } .alt-code-band { background: Mark; forced-color-adjust: none; box-shadow: none; } }
+
+/* ── ColorPicker: colours as choices, built like RadioGroup. Each swatch is a trench (line-control rim) the colour
+   pours into; the chosen one carries the raised white mark, one mark that travels between swatches on ease-glide.
+   Pointing at another swatch shows a ghost of the mark (feedforward). The hex field is an Input that fills only when
+   it holds a whole colour. The full picker floats in a Popover: the area and the hue strip are wells, their handles
+   raised. A contrast check is a Badge plate that says in words whether text on the colour passes. ── */
+.alt-color { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.alt-swatches { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
+.alt-swatch {
+  position: relative; flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-control); border-radius: var(--radius-full);
+  background: var(--surface-trench); box-shadow: var(--trench); cursor: pointer; -webkit-tap-highlight-color: transparent;
+}
+.alt-swatch-fill { position: absolute; inset: -1px; border-radius: inherit; background: var(--swatch); box-shadow: inset 0 3px 3px -2px var(--alt-cast-deep, rgb(0 0 0 / 0.35)), inset 0 0 0 1px rgb(0 0 0 / 0.12); }
+.alt-swatch:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-swatch::after {
+  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--radius-full);
+  background: var(--surface-raised); box-shadow: var(--elev-1); opacity: 0; scale: 0.5; pointer-events: none;
+  transition: opacity var(--dur-travel-1) var(--ease-sink), scale var(--dur-travel-2) var(--ease-settle);
+}
+@media (hover: hover) { .alt-swatch:hover:not([aria-checked="true"])::after { opacity: 0.5; scale: 0.85; } }
+.alt-swatch-mark {
+  position: absolute; left: 0; top: 0; z-index: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: var(--radius-full); pointer-events: none;
+  background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1);
+}
+.alt-swatch-mark[data-ready] { transition: transform var(--dur-travel-3) var(--ease-glide), opacity var(--dur-travel-1); }
+@media (prefers-reduced-motion: reduce) { .alt-swatch-mark[data-ready] { transition: opacity var(--dur-travel-1); } }
+[data-motion="reduced"] .alt-swatch-mark[data-ready] { transition: opacity var(--dur-travel-1); }
+.alt-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.alt-color-hex { width: 150px; }
+.alt-color-hex input { font-family: var(--font-mono); text-transform: lowercase; }
+.alt-input.alt-color-partial:has(input:not(:placeholder-shown)):not(:focus-within) { --w: 4px; background: var(--surface-well); }
+.alt-color-chip { display: block; width: 16px; height: 16px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }
+.alt-color-checks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.alt-color-custom { display: flex; flex-direction: column; gap: 12px; width: 240px; max-width: 100%; padding: var(--space-3); }
+.alt-color-area, .alt-color-hue { position: relative; touch-action: none; cursor: crosshair; box-shadow: var(--well); }
+.alt-color-area { height: 150px; border-radius: var(--radius-md); background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--hue) 100% 50%)); }
+/* tells-ignore: CO1 the hue track is the whole spectrum, purple included */
+.alt-color-hue { height: 14px; border-radius: var(--radius-full); background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
+.alt-color-area:focus-visible, .alt-color-hue:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-color-handle { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--surface-raised); border-radius: var(--radius-full); box-shadow: var(--elev-2); pointer-events: none; }
+[data-contrast="more"] .alt-swatch[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
+@media (forced-colors: active) {
+  .alt-swatch-fill, .alt-color-area, .alt-color-hue, .alt-color-chip { forced-color-adjust: none; }
+  .alt-swatch { border: 1px solid CanvasText; } .alt-swatch[aria-checked="true"] { border-width: 2px; } .alt-swatch-mark { border: 1px solid CanvasText; }
+}
+
+/* ── Pagination: the page numbers sit in a trench (surface-well) and the current page is one raised thumb that
+   travels to it on ease-glide, as RadioGroup's does. Pointing at another page shows a ghost of the thumb there. While
+   the next page loads the thumb is held pressed. Previous and Next are ghost buttons, flush and faint at the ends. ── */
+.alt-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
+.alt-pager-pages { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.alt-pager-track { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well); }
+.alt-pager-track li { display: flex; }
+.alt-pager-page {
+  position: relative; z-index: 1; display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 var(--space-2); border: 0; border-radius: calc(var(--radius-md) - var(--space-1));
+  background: none; color: var(--ink-muted); font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer;
+  transition: color var(--dur-travel-1) var(--ease-rise);
+}
+.alt-pager-page::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-raised); box-shadow: var(--elev-1); opacity: 0; transition: opacity var(--dur-travel-1) var(--ease-sink); }
+@media (hover: hover) { .alt-pager-page:hover:not([aria-current])::after { opacity: 0.45; transition-timing-function: var(--ease-rise); } }
+.alt-pager-page[aria-current] { color: var(--ink); }
+@media (hover: hover) { .alt-pager-page:hover { color: var(--ink); } }
+.alt-pager-page[aria-current] { font-weight: 600; cursor: default; }
+.alt-pager-page:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-pager-thumb { position: absolute; top: var(--space-1); bottom: var(--space-1); left: 0; border-radius: calc(var(--radius-md) - var(--space-1)); background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); pointer-events: none; }
+.alt-pager-thumb[data-ready] { transition: transform var(--dur-travel-1) var(--ease-glide), width var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1), opacity var(--dur-travel-1); }
+.alt-pager-thumb[data-loading] { box-shadow: var(--elev-0); background-image: none; }
+.alt-pager-gap { display: inline-grid; place-items: center; min-width: 24px; color: var(--ink-faint); font: 500 13px/18px var(--font-sans); }
+.alt-pager-step { gap: 4px; text-decoration: none; }
+.alt-pager-step[aria-disabled] { color: var(--ink-faint); cursor: default; pointer-events: none; }
+.alt-pager-summary { font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+@media (max-width: 480px) { .alt-pager-step-text { display: none; } }
+@media (prefers-reduced-motion: reduce) { .alt-pager-thumb[data-ready] { transition: opacity var(--dur-travel-1); } }
+[data-motion="reduced"] .alt-pager-thumb[data-ready] { transition: opacity var(--dur-travel-1); }
+[data-contrast="more"] .alt-pager-thumb { box-shadow: 0 2px 0 0 var(--ink), var(--elev-1); }
+@media (forced-colors: active) { .alt-pager-track { border: 1px dashed CanvasText; } .alt-pager-thumb { border: 1px solid CanvasText; } }
+
+/* ── PageHeader: the page's name is the record, so the block lies on the ground; only its actions are live, with one
+   slot for the primary (level 2) and the rest secondary or ghost. Sticky, it rises one level (surface-raised, elev-1)
+   when content passes under it, as ScrollArea's header does. ── */
+/* --alt-page-pad is the page's side padding (AppShell sets it): the header reaches through it, so a sticky header's
+   rise spans the page edge to edge. */
+.alt-page-head { display: flex; flex-direction: column; gap: var(--space-3); margin-inline: calc(-1 * var(--alt-page-pad, 0px)); padding: var(--space-4) var(--alt-page-pad, 0px); background: var(--surface-ground); }
+.alt-page-head[data-sticky] { position: sticky; top: 0; z-index: 10; transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+.alt-page-head[data-under] { background: var(--surface-raised); box-shadow: var(--elev-1); }
+.alt-page-head-sentinel { display: block; height: 1px; margin-bottom: -1px; }
+.alt-page-head-crumbs .alt-crumbs ol { padding-top: 6px; padding-bottom: 0; }
+.alt-page-head-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); }
+.alt-page-head-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: min(100%, 240px); flex: 1; }
+.alt-page-head-title { margin: 0; font: 600 24px/30px var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
+.alt-page-head-desc { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); max-width: 70ch; }
+.alt-page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.alt-page-head-tabs .alt-tabs { gap: 0; }
+@media (forced-colors: active) { .alt-page-head[data-under] { border-bottom: 1px solid CanvasText; } }
+
+/* ── AppShell and Sidebar: where you are is part of the record, so the frame lies on the ground: sidebar, top bar
+   and page on surface-ground, divided by line. Only what acts is live: a destination lifts one level when pointed at,
+   and the current one sits on a raised pill (segmented Tabs' build) that glides between destinations. Only a count
+   floats. Collapsing to a rail changes width on ease-glide, not level. The top bar rises one level while content
+   passes under it. On narrow screens the sidebar is a Sheet drawer. ── */
+.alt-shell { --alt-sidebar-w: 248px; --alt-rail-w: 56px; position: relative; display: flex; height: 100%; min-height: 0; background: var(--surface-ground); color: var(--ink); }
+.alt-skip { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 50; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--ink); font: 500 13px/18px var(--font-sans); transform: translateY(-200%); }
+.alt-skip:focus { transform: none; outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-sidebar { display: flex; flex-direction: column; flex: none; width: var(--alt-sidebar-w); min-height: 0; border-right: 1px solid var(--line); background: var(--surface-ground); overflow: hidden; transition: width var(--dur-travel-3) var(--ease-glide); }
+.alt-sidebar[data-rail] { width: var(--alt-rail-w); }
+.alt-sidebar-drawer .alt-sidebar { width: auto; border: 0; background: none; margin-inline: calc(-1 * var(--space-2)); }
+.alt-sidebar-header, .alt-sidebar-footer { flex: none; padding: var(--space-2); }
+.alt-sidebar-header { border-bottom: 1px solid var(--line); }
+.alt-sidebar-footer { border-top: 1px solid var(--line); }
+.alt-sidebar-content { position: relative; flex: 1; min-height: 0; overflow: auto; padding: var(--space-2); }
+.alt-sidebar-pill { position: absolute; left: 0; top: 0; border-radius: var(--radius-sm); background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); pointer-events: none; }
+.alt-sidebar-pill[data-ready] { transition: transform var(--dur-travel-3) var(--ease-glide), width var(--dur-travel-3) var(--ease-glide), height var(--dur-travel-3) var(--ease-glide), opacity var(--dur-travel-1); }
+.alt-sidebar-group + .alt-sidebar-group { margin-top: var(--space-3); }
+.alt-sidebar-label { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 0 var(--space-2); border: 0; background: none; font: 500 12px/16px var(--font-sans); letter-spacing: 0.01em; color: var(--ink-muted); text-align: left; white-space: nowrap; }
+button.alt-sidebar-label { cursor: pointer; border-radius: var(--radius-sm); }
+button.alt-sidebar-label:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-sidebar-chev { margin-left: auto; transition: transform var(--dur-travel-2) var(--ease-settle); }
+.alt-sidebar-label[aria-expanded="false"] .alt-sidebar-chev { transform: rotate(-90deg); }
+.alt-sidebar[data-rail] .alt-sidebar-label { visibility: hidden; height: 12px; }
+.alt-sidebar-menu { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.alt-sidebar-item { position: relative; display: flex; align-items: center; }
+.alt-sidebar-button {
+  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: calc(var(--size-control-md) - 2px); padding: 0 var(--space-2); border-radius: var(--radius-sm);
+  font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; white-space: nowrap; cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), color var(--dur-travel-1);
+}
+@media (hover: hover) { .alt-sidebar-button:hover:not([aria-current]) { background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink); } }
+.alt-sidebar-button[aria-current] { color: var(--ink); font-weight: 600; }
+.alt-sidebar-button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-sidebar-icon { display: inline-flex; flex: none; width: 20px; justify-content: center; }
+.alt-sidebar-text { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--dur-travel-2) var(--ease-rise); }
+/* Artifact (#271): what an agent is making, in a pane on the ground beside the conversation. Being written isn't the
+   record yet: a dashed line-control rule at the pane's edge; complete goes solid with one afterglow; failed, critical.
+   Viewing an earlier version is a mode, so it's a flush strip with a line-control border, not a lift. The reference in
+   a message is a plate that acts. */
+.alt-artifact { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; background: var(--surface-ground); border-left: 2px solid var(--line); outline: none; }
+.alt-artifact[data-status="writing"] { border-left-style: dashed; border-left-color: var(--line-control); }
+.alt-artifact-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
+.alt-artifact-titles { flex: 1; min-width: 0; }
+.alt-artifact-title { margin: 0; font: 600 15px/21px var(--font-sans); color: var(--ink); overflow-wrap: anywhere; outline: none; }
+.alt-artifact-title:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-sm); }
+.alt-artifact-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-artifact-state[data-tone="critical"] { color: var(--critical); }
+.alt-artifact-tools { display: inline-flex; gap: 2px; }
+.alt-artifact-versions { display: flex; align-items: center; gap: 2px; padding: 4px var(--space-3); }
+.alt-artifact-version { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-artifact-earlier { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px var(--space-3) 6px var(--space-4); border-block: 1px solid var(--line-control); font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-artifact-earlier > span { margin-right: auto; }
+.alt-artifact-views { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.alt-artifact-views > .alt-tabs-list { align-self: flex-start; margin: var(--space-2) var(--space-3); }
+.alt-artifact-body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-3); animation: alt-fade-in var(--dur-travel-1) var(--ease-rise) both; }
+.alt-artifact-body iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-ground); }
+.alt-artifact-ref { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px 8px 10px; border: 0; border-radius: var(--radius-md); text-align: left; cursor: pointer;
+  background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent); color: var(--ink);
+  transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { .alt-artifact-ref:hover { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-artifact-ref:active { transform: none; box-shadow: none; transition-duration: var(--dur-press); }
+.alt-artifact-ref:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-artifact-ref-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink-muted); }
+.alt-artifact-ref-text { display: flex; flex-direction: column; min-width: 0; }
+.alt-artifact-ref-title { font: 600 13.5px/19px var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alt-artifact-ref-meta { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+@media (prefers-reduced-motion: reduce) { .alt-artifact-body { animation: none; } }
+[data-contrast="more"] .alt-artifact { border-left-color: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-artifact { border-left-color: CanvasText; }
+  .alt-artifact[data-status="writing"] { border-left-style: dotted; }
+  .alt-artifact-ref { border: 1px solid CanvasText; }
+}
+/* ThreadList (#269): conversations as Sidebar destinations, each with its state in words. Working isn't pending, so it
+   never hovers: a plate with a steady lamp. Needs-you is a caution plate (a row can't lift into a card inside a nav).
+   Unread is a dot and weight 600. Renaming opens a well in the row; deleting leaves a receipt in its slot. */
+.alt-threads { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+.alt-threads-search { margin: 0 var(--space-2); }
+.alt-thread .alt-thread-link { height: auto; min-height: 44px; padding-block: 5px; align-items: flex-start; }
+.alt-thread .alt-sidebar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
+.alt-thread-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.alt-thread-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alt-thread[data-unread] .alt-thread-title { font-weight: 600; color: var(--ink); }
+.alt-thread-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
+.alt-thread-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-thread-plate { flex: none; }
+.alt-thread-time { white-space: nowrap; }
+.alt-thread-more { position: absolute; right: 4px; top: 6px; opacity: 0; transition: opacity var(--dur-travel-1); }
+.alt-thread:focus-within .alt-thread-more, .alt-thread-more[aria-expanded="true"] { opacity: 1; }
+@media (hover: hover) { .alt-thread:hover .alt-thread-more { opacity: 1; } }
+@media (hover: none) { .alt-thread-more { opacity: 1; } }
+.alt-thread:has(.alt-thread-more) .alt-thread-main { padding-right: 28px; }
+.alt-thread-rename { display: block; width: 100%; padding: 4px; }
+.alt-threads-new { width: 100%; justify-content: center; }
+/* AgentFleet: every agent in a run of work, grouped by what they need from you. Rows are the record, flush, with their
+   state in words on a plate (the lamp only repeats it); working never hovers. The open agent is selected: tinted and
+   raised one level, as a table's selected row. Finished agents are stamped: a check and muted ink. Agents an agent
+   started hang under it in a 1px line-control bracket, as TraceParallel's subagents do. */
+.alt-fleet { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
+.alt-fleet-summary { margin: 0; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-fleet-group { display: flex; flex-direction: column; gap: 2px; }
+.alt-fleet-group-head { display: flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 0 var(--space-2); border: 0; background: none; color: var(--ink-muted); font: 600 13px/18px var(--font-sans); text-align: start; }
+button.alt-fleet-group-head { cursor: pointer; border-radius: var(--radius-sm); }
+button.alt-fleet-group-head:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-fleet-chevron { transform: rotate(-90deg); transition: transform var(--dur-travel-1) var(--ease-glide); }
+.alt-fleet-group[data-open] .alt-fleet-chevron { transform: none; }
+.alt-fleet-group-count { font-variant-numeric: tabular-nums; font-weight: 500; }
+.alt-fleet-empty { margin: 0; padding: var(--space-1) var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-fleet-list, .alt-agent-children { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.alt-fleet-list[hidden] { display: none; }
+.alt-agent-children { margin: 2px 0 2px 18px; padding-left: 8px; border-left: 1px solid var(--line-control); }
+.alt-agent-line { position: relative; }
+.alt-agent-row { --row-bg: transparent; --row-sh: var(--elev-0);
+  display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; padding: 8px var(--space-2); border: 0; border-radius: var(--radius-md);
+  background: var(--row-bg); box-shadow: var(--row-sh); color: var(--ink); font: 400 13px/18px var(--font-sans); text-align: start;
+  transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise); }
+button.alt-agent-row { cursor: pointer; }
+@media (hover: hover) { button.alt-agent-row:hover { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+button.alt-agent-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-agent[data-selected] > .alt-agent-line > .alt-agent-row { --row-bg: var(--accent-soft); --row-sh: var(--elev-1); }
+.alt-agent-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.alt-agent-line:has(.alt-agent-output) .alt-agent-head { padding-right: 64px; }
+.alt-agent-mark { display: inline-flex; flex: none; width: 14px; justify-content: center; color: var(--ink-muted); }
+.alt-agent-mark i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
+.alt-agent[data-agent-state="working"] > .alt-agent-line .alt-agent-mark { color: var(--accent); }
+.alt-agent[data-agent-state="working"] > .alt-agent-line .alt-agent-mark i { background: currentColor; }
+.alt-agent[data-agent-state="needs-input"] > .alt-agent-line .alt-agent-mark, .alt-agent[data-agent-state="stalled"] > .alt-agent-line .alt-agent-mark { color: var(--caution); }
+.alt-agent[data-agent-state="needs-input"] > .alt-agent-line .alt-agent-mark i { background: currentColor; }
+.alt-agent[data-agent-state="failed"] > .alt-agent-line .alt-agent-mark { color: var(--critical); }
+.alt-agent[data-agent-state="done"] > .alt-agent-line .alt-agent-mark { color: var(--positive); }
+.alt-agent-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.alt-agent-time { flex: none; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.alt-agent-activity { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 22px; color: var(--ink-muted); }
+.alt-agent-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-left: 22px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-agent-conflict { display: flex; align-items: flex-start; gap: 6px; margin: 3px 0 0 22px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--caution-soft); color: var(--ink); font: 400 12px/16px var(--font-sans); }
+.alt-agent-conflict svg { flex: none; margin-top: 1px; color: var(--caution); }
+.alt-agent-conflict code { font: 400 11.5px/16px var(--font-code); }
+.alt-agent-output { position: absolute; top: 7px; right: var(--space-2); }
+.alt-agent:is([data-agent-state="done"], [data-agent-state="stopped"]) > .alt-agent-line .alt-agent-name { font-weight: 500; color: var(--ink-muted); }
+@media (forced-colors: active) {
+  .alt-agent[data-selected] > .alt-agent-line > .alt-agent-row { outline: 1px solid Highlight; }
+  .alt-agent-children { border-left-color: CanvasText; }
+  .alt-agent-conflict { border: 1px dashed CanvasText; }
+}
+/* AgentRequests: the decisions agents are waiting on, oldest first. Each asks for action, so it's a raised card (level
+   1) that arrives lifted and settles; nothing in it has been dispatched, so nothing hovers. Its answers are secondary
+   and ghost: the view's one primary stays where it is. With nothing waiting it says so, flush. */
+.alt-requests { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+.alt-requests-head { display: flex; align-items: center; gap: 8px; min-height: 28px; }
+.alt-requests-title { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-requests-oldest { margin-left: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-requests-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: var(--space-2) 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-requests-empty svg { flex: none; color: var(--positive); }
+.alt-requests-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.alt-request { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-md); }
+.alt-request-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-request-agent { font-weight: 600; color: var(--ink); }
+.alt-request-time { margin-left: auto; font-variant-numeric: tabular-nums; }
+.alt-request-title { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-request-detail { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 2px; }
+.alt-request-actions > .alt-btn[data-variant="ghost"]:last-child { margin-left: auto; }
+/* AgentLanes: where each agent's time went, on one clock. A chart, so nothing here has height (Charts): stretches are
+   equal bars lying on each lane, told apart by fill and pattern and named in the key. Working is data-1; waiting on you
+   is caution hatched at 45°; waiting on another agent is a 1px dashed outline; failed is critical. "Now" is a 1px
+   line-control rule. The selected lane's name is accent-ink with aria-pressed; lanes never lift. */
+.alt-lanes { --lane-name: 132px; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; min-width: 0; }
+.alt-lanes-takeaway { font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-lanes-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-lanes-legend li { display: inline-flex; align-items: center; gap: 6px; }
+.alt-lane-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
+.alt-lanes-plot { position: relative; display: flex; flex-direction: column; gap: 6px; }
+.alt-lane { display: grid; grid-template-columns: var(--lane-name) 1fr; align-items: center; gap: var(--space-2); }
+.alt-lane-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: var(--ink); font: 500 12.5px/24px var(--font-sans); text-align: start; }
+button.alt-lane-name { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; border-radius: var(--radius-xs); }
+@media (hover: hover) { button.alt-lane-name:hover { text-decoration-color: currentColor; } }
+button.alt-lane-name:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-lane[data-selected] .alt-lane-name { color: var(--accent-ink); font-weight: 650; }
+.alt-lane-track { position: relative; height: 14px; border-bottom: 1px solid var(--line); }
+.alt-lane-bar { position: absolute; top: 1px; bottom: 1px; min-width: 2px; border-radius: 2px; }
+.alt-lane-swatch[data-lane="working"], .alt-lane-bar[data-lane="working"] { background: var(--data-1); }
+.alt-lane-swatch[data-lane="waiting"], .alt-lane-bar[data-lane="waiting"] { background: repeating-linear-gradient(45deg, var(--caution) 0 2px, var(--caution-soft) 2px 5px); box-shadow: inset 0 0 0 1px var(--caution); }
+.alt-lane-swatch[data-lane="blocked"], .alt-lane-bar[data-lane="blocked"] { background: transparent; box-shadow: none; border: 1px dashed var(--ink-muted); }
+.alt-lane-swatch[data-lane="failed"], .alt-lane-bar[data-lane="failed"] { background: var(--critical); }
+.alt-lanes-axis { display: grid; grid-template-columns: var(--lane-name) 1fr; gap: var(--space-2); }
+.alt-lanes-ticks { position: relative; height: 16px; font: 400 11.5px/16px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-lanes-ticks > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
+.alt-lanes-ticks > span[data-edge="start"] { transform: none; }
+.alt-lanes-ticks > span[data-edge="end"] { transform: translateX(-100%); color: var(--ink); }
+.alt-lanes-now { position: absolute; top: 0; bottom: 18px; right: 0; width: 1px; background: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-lane-bar, .alt-lane-swatch { forced-color-adjust: none; }
+  .alt-lane-bar[data-lane="working"], .alt-lane-swatch[data-lane="working"] { background: CanvasText; }
+  .alt-lane-bar[data-lane="waiting"], .alt-lane-swatch[data-lane="waiting"] { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 5px); box-shadow: inset 0 0 0 1px CanvasText; }
+  .alt-lane-bar[data-lane="blocked"], .alt-lane-swatch[data-lane="blocked"] { border-color: CanvasText; }
+  .alt-lane-bar[data-lane="failed"], .alt-lane-swatch[data-lane="failed"] { background: repeating-linear-gradient(-45deg, CanvasText 0 1px, Canvas 1px 3px); border: 2px solid CanvasText; }
+  .alt-lanes-now { background: CanvasText; }
+}
+@media (max-width: 480px) { .alt-lanes { --lane-name: 88px; } }
+@media (pointer: coarse) { button.alt-fleet-group-head, button.alt-lane-name { min-height: 44px; } }
+/* In the rail only icons show: each destination is a square, and the rail lets its tooltips out to the right. */
+.alt-sidebar[data-rail], .alt-sidebar[data-rail] .alt-sidebar-content { overflow: visible; }
+.alt-sidebar[data-rail] .alt-sidebar-item .alt-tip-anchor { display: flex; flex: 1; }
+.alt-sidebar[data-rail] .alt-sidebar-button { justify-content: center; padding: 0; }
+.alt-sidebar[data-rail] .alt-sidebar-text { display: none; }
+.alt-sidebar[data-rail] .alt-sidebar-header .alt-sidebar-text { display: none; }
+.alt-sidebar-badge { position: absolute; right: var(--space-2); z-index: 2; pointer-events: none; }
+.alt-sidebar[data-rail] .alt-sidebar-badge { right: 2px; top: 0; transform: scale(0.8); }
+.alt-shell-page { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; }
+.alt-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface-ground); transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+.alt-topbar[data-under] { background: var(--surface-raised); box-shadow: var(--elev-1); }
+.alt-shell-sentinel { display: block; height: 1px; margin-bottom: -1px; }
+.alt-inset { --alt-page-pad: var(--alt-inset-page); display: block; padding: 0 var(--alt-page-pad) var(--alt-page-pad); outline: none; }
+@media (prefers-reduced-motion: reduce) { .alt-sidebar { transition: none; } .alt-sidebar-pill[data-ready] { transition: opacity var(--dur-travel-1); } }
+[data-motion="reduced"] .alt-sidebar { transition: none; }
+[data-motion="reduced"] .alt-sidebar-pill[data-ready] { transition: opacity var(--dur-travel-1); }
+@media (prefers-contrast: more) { .alt-sidebar, .alt-sidebar-header, .alt-sidebar-footer, .alt-topbar { border-color: var(--line-control); } }
+[data-contrast="more"] .alt-sidebar, [data-contrast="more"] .alt-sidebar-header, [data-contrast="more"] .alt-sidebar-footer, [data-contrast="more"] .alt-topbar { border-color: var(--line-control); }
+[data-contrast="more"] .alt-sidebar-pill { box-shadow: 0 2px 0 0 var(--ink), var(--elev-1); }
+@media (forced-colors: active) { .alt-sidebar-pill { border: 1px solid CanvasText; } .alt-sidebar-button:hover:not([aria-current]) { border: 1px solid CanvasText; } }
+
+/* ── Resizable: panes beside each other on the ground, parted by 1px of line. The panes never lift; only the grip is
+   live: a small line-control plate, flush at rest, lifting one level when pointed at or focused, floating at level 3
+   while held (whatever is in a hand floats). Collapsing a pane changes its size on ease-glide, not its level. ── */
+.alt-resizable { display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; }
+.alt-resizable[data-direction="vertical"] { flex-direction: column; }
+.alt-resizable-panel { flex: 0 0 auto; min-width: 0; min-height: 0; overflow: auto; background: var(--surface-ground); }
+.alt-resizable-panel[data-collapsed] { overflow: hidden; }
+.alt-resizable[data-animate] .alt-resizable-panel { transition: flex-basis var(--dur-travel-3) var(--ease-glide); }
+.alt-resizable-handle { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 1px; background: var(--line); cursor: col-resize; touch-action: none; outline: none; }
+.alt-resizable[data-direction="vertical"] > .alt-resizable-handle { width: auto; height: 1px; cursor: row-resize; }
+.alt-resizable-handle::before { content: ""; position: absolute; inset: 0 calc((var(--size-target-min) - 1px) / -2); }
+.alt-resizable[data-direction="vertical"] > .alt-resizable-handle::before { inset: calc((var(--size-target-min) - 1px) / -2) 0; }
+.alt-resizable-grip {
+  position: relative; width: 8px; height: 28px; border-radius: var(--radius-full); border: 1px solid var(--line-control); background: var(--surface-ground);
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-settle), border-color var(--dur-travel-1);
+}
+.alt-resizable[data-direction="vertical"] .alt-resizable-grip { width: 28px; height: 8px; }
+.alt-resizable-handle:focus-visible .alt-resizable-grip { background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); border-color: transparent; }
+@media (hover: hover) { .alt-resizable-handle:hover .alt-resizable-grip { background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); border-color: transparent; } }
+.alt-resizable-handle:focus-visible .alt-resizable-grip { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-resizable-handle[data-held] .alt-resizable-grip { background: var(--surface-floating); box-shadow: var(--elev-3); border-color: transparent; transition-timing-function: var(--ease-rise); }
+@media (prefers-reduced-motion: reduce) { .alt-resizable[data-animate] .alt-resizable-panel { transition: none; } }
+[data-motion="reduced"] .alt-resizable[data-animate] .alt-resizable-panel { transition: none; }
+@media (prefers-contrast: more) { .alt-resizable-handle { background: var(--line-control); } }
+[data-contrast="more"] .alt-resizable-handle { background: var(--line-control); }
+[data-contrast="more"] .alt-resizable-handle[data-held] .alt-resizable-grip { box-shadow: 0 2px 0 0 var(--ink), var(--elev-3); }
+@media (forced-colors: active) { .alt-resizable-handle { background: CanvasText; } .alt-resizable-grip { border: 1px solid CanvasText; } .alt-resizable-handle[data-held] .alt-resizable-grip { border-width: 2px; } }
+
+/* ── ContextMenu: DropdownMenu's menu (level 3, the gliding highlight), opened where you right-click or long-press, or
+   at the thing with Shift+F10. The thing shows it's the subject with a 2px accent-ink outline: a ring, never a height,
+   so a flush row doesn't lift out of its table. ── */
+.alt-context { position: fixed; z-index: var(--z-floating); }
+.alt-context .alt-context-menu { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 0; }
+[data-context-open] { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+@media (forced-colors: active) { [data-context-open] { outline-color: Highlight; } }
+
+/* ── App mode (AltitudeProvider mode): test mode, viewing as a customer, read-only, a preview. The page is the ground,
+   so height can't say "this whole ground is different"; the mode is said in words and a border (law 7 as the primary
+   channel): a flush strip on the tone's soft colour naming it at the top, a 2px inset frame around the viewport in its
+   tone that stays while scrolling and above dialogs and sheets, and a plate in their headers. Nothing moves. ── */
+.alt-mode-strip { --m: var(--caution); --m-soft: var(--caution-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); padding: 6px var(--space-4); background: var(--m-soft); border-bottom: 1px solid color-mix(in oklab, var(--m) 35%, transparent); font: 400 13px/18px var(--font-sans); color: var(--ink); }
+.alt-mode-strip[data-tone="accent"], .alt-mode-frame[data-tone="accent"] { --m: var(--accent); --m-soft: var(--accent-soft); }
+.alt-mode-strip[data-tone="critical"], .alt-mode-frame[data-tone="critical"] { --m: var(--critical); --m-soft: var(--critical-soft); }
+.alt-mode-strip[data-tone="neutral"], .alt-mode-frame[data-tone="neutral"] { --m: var(--ink-muted); --m-soft: var(--surface-well); }
+.alt-mode-label { font-weight: 600; }
+.alt-mode-desc { color: var(--ink); }
+.alt-mode-action { margin-left: auto; }
+.alt-mode-frame { --m: var(--caution); position: fixed; inset: 0; z-index: 2147483000; border: 2px solid var(--m); pointer-events: none; }
+.alt-mode-plate { margin-bottom: var(--space-1); align-self: flex-start; }
+@media (prefers-contrast: more) { .alt-mode-frame { border-width: 3px; } }
+[data-contrast="more"] .alt-mode-frame { border-width: 3px; }
+@media (forced-colors: active) { .alt-mode-frame { border: 4px double CanvasText; } .alt-mode-strip { border-bottom: 1px solid CanvasText; } }
+
+/* ── DropZone's queue: each file is a slat on the ground under the zone. Uploading is a task, so a Progress fill rises
+   out of its trench; processing is a write the server hasn't confirmed, so the slat hovers as pending; done lands and
+   settles with the afterglow; failed drops to a trench with its reason and Retry. ── */
+.alt-drop-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
+.alt-upload-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
+.alt-upload { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-ground); box-shadow: 0 0 0 1px var(--line); }
+.alt-upload-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
+.alt-upload-name { font: 500 14px/20px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alt-upload-state { display: inline-flex; align-items: center; gap: 4px; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-upload[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench); }
+.alt-upload[data-state="failed"] .alt-upload-state { color: var(--critical); }
+.alt-upload .alt-progress { margin-top: 2px; }
+.alt-upload-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
+
+/* ── FilterBar groups: nested logic drawn as brackets on the ground. A group is a flush 1px line-control rule around its
+   own conditions and its own all/any switch: part of the record of the query, not a live surface. ── */
+.alt-filter-tree { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-filter-group { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); margin-left: var(--space-4); padding: var(--space-2); padding-right: 36px; border: 1px solid var(--line-control); border-radius: var(--radius-md); }
+.alt-filter-group-remove { position: absolute; top: 6px; right: 6px; }
+.alt-filter-add-group { align-self: flex-start; margin-left: var(--space-4); }
+@media (forced-colors: active) { .alt-filter-group { border-color: CanvasText; } }
+
+/* ── Timeline: the ground is the record, literally. Events stand on a ground line turned upright (1px ink-muted, the
+   rule Stepper and the chart baseline stand on) as flush entries stamped onto it, each with a flush plate on the line.
+   A new event arrives lifted and settles (the afterglow, staggered); one you caused hovers until it lands, or drops to a
+   trench with Retry; an event that links lifts when pointed at; its detail opens as a raised card, as an Accordion lid
+   does. ── */
+.alt-timeline-list { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 0 0 36px; list-style: none; }
+.alt-timeline-list::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--ink-muted); }
+.alt-timeline-day { padding: var(--space-3) 0 var(--space-1); }
+.alt-timeline-day:first-child { padding-top: 0; }
+.alt-timeline-day-label { margin: 0 0 0 -36px; padding-left: 36px; font: 600 12.5px/17px var(--font-sans); color: var(--ink-muted); background: var(--surface-ground); position: relative; }
+.alt-timeline-item { position: relative; border-radius: var(--radius-md); }
+.alt-timeline-marker { position: absolute; left: -36px; top: 7px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: var(--radius-full); background: var(--surface-ground); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-muted); }
+.alt-timeline-marker svg { width: 14px; height: 14px; }
+.alt-timeline-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--ink-muted); }
+.alt-timeline-body { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
+.alt-timeline-entry, .alt-timeline-link { display: flex; flex-direction: column; gap: 2px; font: 400 14px/20px var(--font-sans); color: var(--ink); }
+.alt-timeline-link { margin: -6px -8px; padding: 6px 8px; border-radius: var(--radius-sm); text-decoration: none; transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { .alt-timeline-link:hover { background: var(--surface-raised); box-shadow: var(--elev-1); } }
+.alt-timeline-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-timeline-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-timeline-state { display: inline-flex; align-items: center; gap: 4px; }
+.alt-timeline-state[data-failed] { color: var(--critical); }
+/* A failed event isn't new to the record: it drops to its trench without the afterglow's tint. */
+.alt-timeline-item[data-status="failed"]::before { animation: none; }
+.alt-timeline-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.alt-timeline-detail { padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1); animation: alt-emerge var(--dur-travel-2) var(--ease-rise); --alt-from-y: -4px; }
+@media (prefers-contrast: more) { .alt-timeline-list::before { width: 2px; } }
+[data-contrast="more"] .alt-timeline-list::before { width: 2px; }
+@media (forced-colors: active) { .alt-timeline-list::before { background: CanvasText; } .alt-timeline-marker { box-shadow: none; border: 1px solid CanvasText; } }
+
+/* ── NotificationCenter: the bell is live (a ghost button), only its count floats, the panel floats at level 3 (a
+   Sheet at 4 on narrow screens), and the list in it lies on the ground: a record of what happened. Unread is a mark,
+   not a height: an accent dot and weight 600, with "Unread" in the name. A new notification arrives lifted and
+   settles; an item that links lifts when pointed at. Mark all as read removes the dots with a cross-fade. ── */
+.alt-notes-bell { position: relative; }
+.alt-notes-badge { position: absolute; top: -4px; right: -6px; pointer-events: none; }
+.alt-notes-pop { width: min(380px, calc(100vw - 32px)); padding: var(--space-3); }
+.alt-notes-title-bar { margin: 0 0 var(--space-1); font: 600 15px/20px var(--font-sans); color: var(--ink); }
+.alt-notes { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-notes-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 30px; }
+.alt-notes-count { font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-notes-list { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow: auto; margin: 0 -4px; padding: 0 4px; list-style: none; }
+.alt-notes-day { padding: var(--space-2) var(--space-2) 2px; font: 600 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-notes-item { border-radius: var(--radius-md); }
+.alt-notes-link { display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-md); color: var(--ink); text-decoration: none; transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { a.alt-notes-link:hover { background: var(--surface-raised); box-shadow: var(--elev-1); } }
+a.alt-notes-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-notes-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--radius-full); background: var(--accent); opacity: 0; transition: opacity var(--dur-travel-2) var(--ease-rise); }
+.alt-notes-item[data-unread] .alt-notes-dot { opacity: 1; }
+.alt-notes-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.alt-notes-title { font: 400 14px/20px var(--font-sans); }
+.alt-notes-item[data-unread] .alt-notes-title { font-weight: 600; }
+.alt-notes-body { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-notes-time { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-notes-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 8px 8px 26px; }
+.alt-notes-empty { margin: 0; padding: var(--space-4) var(--space-2); font: 400 14px/20px var(--font-sans); color: var(--ink-muted); text-align: center; }
+.alt-notes-foot { padding-top: var(--space-2); border-top: 1px solid var(--line); font: 400 13px/18px var(--font-sans); }
+@media (forced-colors: active) { .alt-notes-dot { forced-color-adjust: none; background: CanvasText; } }
+
+/* ── SyncIndicator: whether work has reached the server, said on a flush Badge plate whose lamp relights when the
+   state changes (saving pulses). A label never lifts, so a change of state cross-fades; only when the plate opens the
+   queue of waiting changes does it lift when pointed at, because then it acts. ── */
+.alt-sync { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.alt-sync-button { padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; transition: box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { .alt-sync-button:hover { box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-sync-button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-sync-time { font-weight: 400; color: var(--ink-muted); }
+.alt-sync-queue { display: flex; flex-direction: column; gap: var(--space-2); width: 280px; max-width: 100%; }
+.alt-sync-queue-title { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--ink); }
+[data-contrast="more"] .alt-sync-plate { box-shadow: inset 0 0 0 1px var(--line-control); }
+
+/* ── DiffView: both versions are the record, so it lies flush with a line rim (as CodeBlock). Additions are positive-
+   soft with a + sign, removals critical-soft and struck through with a − sign, and words that changed inside a line take
+   a stronger tint; a changed property shows the old value struck through beside the new. Signs and words carry it, never
+   colour alone. Long unchanged runs fold behind lids. ── */
+.alt-diff { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-ground); overflow: hidden; }
+.alt-diff-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 6px 6px 6px var(--space-4); border-bottom: 1px solid var(--line); }
+.alt-diff-caption { font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-diff-summary { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+/* The buttons wrap rather than run past the frame, which clips them (a review's four don't fit a phone on one line). */
+.alt-diff-nav { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-left: auto; min-width: 0; }
+.alt-diff-body { overflow: auto; max-height: 420px; padding: var(--space-2) 0; }
+.alt-diff-lines { min-width: max-content; font: 400 13px/20px var(--font-mono); }
+.alt-diff-line { display: flex; padding-right: var(--space-4); outline: none; }
+.alt-diff-line:focus-visible { box-shadow: inset 2px 0 0 var(--accent-ink); }
+.alt-diff-sign { flex: none; width: 28px; text-align: center; color: var(--ink-muted); user-select: none; }
+.alt-diff-text { white-space: pre; text-decoration: none; color: var(--ink); }
+.alt-diff-line[data-kind="add"] { background: var(--positive-soft); }
+.alt-diff-line[data-kind="del"] { background: var(--critical-soft); }
+.alt-diff-line[data-kind="del"] .alt-diff-text { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--critical) 60%, transparent); }
+.alt-diff-line[data-kind="add"] .alt-diff-sign { color: var(--positive); }
+.alt-diff-line[data-kind="del"] .alt-diff-sign { color: var(--critical); }
+.alt-diff-word { color: inherit; border-radius: 2px; }
+.alt-diff-line[data-kind="add"] .alt-diff-word { background: color-mix(in oklab, var(--positive) 22%, transparent); }
+.alt-diff-line[data-kind="del"] .alt-diff-word { background: color-mix(in oklab, var(--critical) 18%, transparent); }
+.alt-diff-fold button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px var(--space-4) 4px 28px; border: 0; border-block: 1px solid var(--line); background: var(--surface-ground); font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); cursor: pointer; text-align: left; }
+/* Reviewing (#282): a change awaiting a decision is a proposal, raised at level 1 around its lines (as PropertyList's
+   proposed value); deciding lowers it to the record: accepted flush with one afterglow, rejected muted and collapsed. */
+.alt-diff-hunk { position: relative; margin: 4px 6px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1); overflow: hidden;
+  transition: box-shadow var(--dur-travel-1) var(--ease-sink), background-color var(--dur-travel-1) var(--ease-sink), margin var(--dur-travel-1) var(--ease-sink); }
+.alt-diff-hunk[data-decision] { margin-inline: 0; border-radius: 0; background: none; box-shadow: none; }
+.alt-diff-hunk[data-decision="reject"] { color: var(--ink-muted); }
+.alt-diff-hunk[data-decision="reject"] .alt-diff-line { opacity: 0.6; }
+.alt-diff-hunk-bar { position: sticky; left: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: min(100%, 100cqw); padding: 2px 6px 2px 28px; font: 500 12.5px/17px var(--font-sans); }
+.alt-diff-hunk-state { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--ink-muted); }
+.alt-diff-hunk-folded { display: block; width: 100%; padding: 4px var(--space-4) 4px 28px; border: 0; background: none; color: var(--ink-muted); font: 500 12.5px/17px var(--font-sans); text-align: left; cursor: pointer; }
+.alt-diff-hunk-folded:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-diff-body { container-type: inline-size; }
+@media (prefers-reduced-motion: reduce) { .alt-diff-hunk { transition: none; } }
+@media (forced-colors: active) { .alt-diff-hunk:not([data-decision]) { border: 1px solid CanvasText; } }
+@media (hover: hover) { .alt-diff-fold button:hover { background: var(--surface-raised); color: var(--ink); } }
+.alt-diff-fold button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-diff-props { display: flex; flex-direction: column; margin: 0; padding: 0 var(--space-4); }
+.alt-diff-prop { display: grid; grid-template-columns: minmax(96px, 30%) 1fr; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 14px/20px var(--font-sans); outline: none; }
+.alt-diff-prop:last-child { border-bottom: 0; }
+.alt-diff-prop:focus-visible { box-shadow: inset 2px 0 0 var(--accent-ink); }
+.alt-diff-prop dt { color: var(--ink-muted); }
+.alt-diff-prop dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
+.alt-diff-old { padding: 0 4px; border-radius: var(--radius-xs); background: var(--critical-soft); text-decoration: line-through; color: var(--ink); }
+.alt-diff-new { padding: 0 4px; border-radius: var(--radius-xs); background: var(--positive-soft); text-decoration: none; color: var(--ink); font-weight: 500; }
+.alt-diff-arrow { transform: rotate(-90deg); color: var(--ink-muted); }
+[data-contrast="more"] .alt-diff-line[data-kind="add"] { box-shadow: inset 2px 0 0 var(--positive); }
+[data-contrast="more"] .alt-diff-line[data-kind="del"] { box-shadow: inset 2px 0 0 var(--critical); }
+@media (forced-colors: active) { .alt-diff-line[data-kind], .alt-diff-old, .alt-diff-new, .alt-diff-word { background: none; } .alt-diff { border: 1px solid CanvasText; } }
+
+/* ── SaveBar: an unsaved draft at page scope is something in your hand, so the bar floats at level 3, docked to the
+   bottom edge (below a Sheet or a Dialog, never competing with them). It rises from the edge once a change has settled
+   into the draft; saving hovers as a pending write; saved, it lowers away while the fields settle; a failed save drops
+   it to a trench, keeping the draft. ── */
+.alt-savebar {
+  position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-floating); translate: -50% 0;
+  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); width: max-content; max-width: calc(100vw - 32px);
+  padding: 8px 8px 8px var(--space-4); border-radius: var(--radius-lg); background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--ink);
+  transition: opacity var(--dur-travel-3) var(--ease-rise), transform var(--dur-travel-3) var(--ease-rise), background-color var(--dur-travel-2), box-shadow var(--dur-travel-2);
+}
+.alt-savebar[data-state="closed"] { opacity: 0; transform: translateY(calc(16px * var(--alt-travel))); transition-timing-function: var(--ease-settle); }
+.alt-savebar[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench); outline: 1px solid var(--critical); animation-duration: var(--dur-travel-5); }
+.alt-savebar-text { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--font-sans); }
+.alt-savebar[data-status="failed"] .alt-savebar-text svg { color: var(--critical); }
+.alt-savebar-actions { display: inline-flex; gap: var(--space-2); margin-left: auto; }
+[data-contrast="more"] .alt-savebar { box-shadow: 0 3px 0 0 var(--ink), var(--elev-3); }
+@media (forced-colors: active) { .alt-savebar { border: 2px solid CanvasText; } .alt-savebar[data-status="pending"] { border-style: dotted; } .alt-savebar[data-status="failed"] { border: 3px dashed CanvasText; } }
+
+/* ── Settings: a section is a raised Card (level 1) of rows; the danger zone is the same card with a critical rim,
+   never higher. A row is flush, label and description on the start side, the control on the end side, stacked when
+   the section is narrow. An apply-now control's write is the row's: pending hovers it, committed lands, failed drops
+   it into a trench, with the state in words beside the control. ── */
+.alt-settings-section { container-type: inline-size; padding: var(--alt-inset-box); gap: var(--space-3); }
+.alt-settings-section[data-tone="critical"] { box-shadow: var(--elev-1), inset 0 0 0 1px var(--critical); }
+.alt-settings-head { display: flex; flex-direction: column; gap: var(--space-1); }
+.alt-settings-title { margin: 0; font: 600 17px/24px var(--font-sans); letter-spacing: -0.01em; }
+.alt-settings-desc, .alt-settings-readonly { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
+.alt-settings-readonly { display: flex; gap: 6px; align-items: flex-start; }
+.alt-settings-readonly svg { flex: none; margin-top: 3px; }
+.alt-settings-rows { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; }
+.alt-settings-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-5);
+  margin-inline: calc(-1 * var(--space-3)); padding: var(--space-3); border-radius: var(--radius-md);
+}
+.alt-settings-row + .alt-settings-row { box-shadow: inset 0 1px 0 var(--line); }
+.alt-settings-row[data-status="pending"] { background: var(--surface-raised); }
+.alt-settings-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.alt-settings-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-settings-rowdesc, .alt-settings-error { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-settings-error { display: flex; gap: 6px; align-items: flex-start; color: var(--critical); }
+.alt-settings-error svg { flex: none; margin-top: 2px; }
+.alt-settings-control { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
+.alt-settings-control > .alt-input, .alt-settings-control > .alt-select { width: min(280px, 100%); }
+.alt-settings-status { font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-settings-status:empty { display: none; }
+.alt-settings-row[data-status="failed"] .alt-settings-status { color: var(--critical); }
+@container (max-width: 480px) {
+  .alt-settings-row { grid-template-columns: minmax(0, 1fr); }
+  .alt-settings-control { align-items: flex-start; }
+}
+@media (forced-colors: active) { .alt-settings-section[data-tone="critical"] { border: 2px solid CanvasText; } }
+
+/* ── PermissionMatrix: roles against permissions. The grid is settled, on the ground with line dividers. An editable
+   grant is a choice, a Checkbox's trench that the accent pours into; an inherited or fixed grant is already decided, so
+   it's a flush stamped check (or a dash), muted, like a done Checklist item: pressed into the record, not disabled. The
+   active cell is a 2px accent-ink ring, never a height. A saving cell hovers; a saved one settles. ── */
+.alt-matrix { overflow-x: auto; }
+.alt-matrix-grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font: 400 14px/20px var(--font-sans); color: var(--ink); }
+.alt-matrix-grid th, .alt-matrix-grid td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: center; }
+.alt-matrix-grid thead th { font: 600 13px/18px var(--font-sans); color: var(--ink); white-space: nowrap; }
+.alt-matrix-grid .alt-matrix-perm { text-align: left; font-weight: 400; white-space: nowrap; }
+.alt-matrix-group th { padding-top: var(--space-4); text-align: left; font: 600 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-matrix-cell { position: relative; }
+.alt-matrix-box { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); cursor: pointer; outline: none; }
+.alt-matrix-box[data-fixed] { cursor: help; }
+.alt-matrix-box:focus-visible { box-shadow: 0 0 0 2px var(--accent-ink); }
+.alt-matrix-box[data-on] .alt-check-fill { opacity: 1; clip-path: circle(75% at 50% 50%); }
+.alt-matrix-box[data-on] .alt-check-tick { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-travel-2) var(--ease-rise) 60ms; }
+.alt-matrix-box[data-on] .alt-check-track { border-color: var(--accent); }
+.alt-matrix-stamp { display: grid; place-items: center; width: 22px; height: 22px; color: var(--ink-muted); }
+.alt-matrix-dash { display: block; width: 10px; height: 2px; border-radius: 1px; background: var(--ink-faint); }
+[data-contrast="more"] .alt-matrix-box:focus-visible { box-shadow: 0 0 0 3px var(--accent-ink); }
+@media (forced-colors: active) { .alt-matrix-box:focus-visible { box-shadow: none; outline: 2px solid Highlight; } .alt-matrix-dash { background: CanvasText; } }
+
+/* ── PlanPicker: plans are positions in one choice, so the cards lie flush on the ground (a line rim) and one raised
+   mark, the radio thumb's build, travels to the chosen card's corner on ease-glide; the chosen card also takes an
+   accent rim. Pointing at another card shows a ghost of the mark there. "Current plan" and "Recommended" are flush plates,
+   never extra height: the only level-2 slab is the Continue button beside it. A period change cross-fades the prices. ── */
+.alt-plans { display: flex; flex-direction: column; gap: var(--space-4); }
+.alt-plans-period { align-self: flex-start; }
+.alt-plans-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
+.alt-plan {
+  position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg);
+  background: var(--surface-ground); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; outline: none;
+  transition: box-shadow var(--dur-travel-2) var(--ease-rise);
+}
+.alt-plan[data-chosen] { box-shadow: inset 0 0 0 2px var(--accent); }
+.alt-plan[aria-disabled] { cursor: not-allowed; color: var(--ink-faint); }
+.alt-plan:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-plan::after {
+  content: ""; position: absolute; top: 15px; right: 15px; width: 14px; height: 14px; border-radius: var(--radius-full);
+  background: var(--surface-raised); box-shadow: var(--elev-1); opacity: 0; scale: 0.5; pointer-events: none; transition: opacity var(--dur-travel-1) var(--ease-sink), scale var(--dur-travel-2) var(--ease-settle);
+}
+@media (hover: hover) { .alt-plan:hover:not([data-chosen]):not([aria-disabled])::after { opacity: 0.5; scale: 0.85; } }
+.alt-plans-mark { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--radius-full); background: var(--accent); box-shadow: var(--elev-1), inset 0 0 0 3px var(--surface-raised); pointer-events: none; }
+.alt-plans-mark[data-ready] { transition: transform var(--dur-travel-3) var(--ease-glide), opacity var(--dur-travel-1); }
+.alt-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-right: 24px; }
+.alt-plan-name { font: 600 16px/22px var(--font-sans); }
+.alt-plan-plates { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.alt-plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
+.alt-plan-amount { font: 600 26px/32px var(--font-sans); letter-spacing: -0.015em; }
+.alt-plan-per { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-plan-desc { font: 400 13.5px/19px var(--font-sans); color: var(--ink-muted); }
+.alt-plan-desc p { margin: 0 0 var(--space-2); }
+.alt-plan-desc ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; color: var(--ink); }
+.alt-plan-desc li { display: flex; gap: 6px; align-items: flex-start; }
+.alt-plan-desc li svg { flex: none; margin-top: 2px; color: var(--positive); }
+.alt-plan-why { margin: 0; color: var(--ink-muted); }
+@media (prefers-reduced-motion: reduce) { .alt-plans-mark[data-ready] { transition: opacity var(--dur-travel-1); } }
+[data-motion="reduced"] .alt-plans-mark[data-ready] { transition: opacity var(--dur-travel-1); }
+[data-contrast="more"] .alt-plans-mark { box-shadow: 0 2px 0 0 var(--ink), inset 0 0 0 3px var(--surface-raised); }
+@media (forced-colors: active) { .alt-plan { border: 1px solid CanvasText; } .alt-plan[data-chosen] { border-width: 2px; } .alt-plans-mark { forced-color-adjust: none; outline: 1px solid CanvasText; } }
+
+/* ── FeatureGate: locked, not disabled. Disabled means nothing happens; a locked control explains the plan and offers
+   the upgrade, so it keeps its own build and normal ink and lifts when pointed at (hover is a promise), with a lock and
+   a flush plan plate. Pressing it opens a Popover at level 3 with the upgrade as its one primary. ── */
+.alt-gate { display: inline-flex; }
+.alt-gate-trigger .alt-btn-label, .alt-gate-trigger { gap: 6px; }
+.alt-gate-lock { flex: none; color: var(--ink-muted); }
+.alt-gate-plan { margin-left: 2px; }
+.alt-gate-pop { width: min(300px, calc(100vw - 32px)); }
+.alt-gate-body { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-gate-title { display: flex; align-items: center; gap: 6px; margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-gate-desc, .alt-gate-admin { margin: 0; font: 400 13.5px/19px var(--font-sans); color: var(--ink-muted); }
+.alt-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-1); font: 400 13.5px/19px var(--font-sans); }
+
+/* ── CommentThread: posted comments are the record, flush on the ground; the composer is an Input well that fills; a
+   comment being posted hovers as pending, lands and settles, or drops to a trench keeping its text. Mentions are flush
+   accent-soft plates in the text and a listbox at level 3 while writing. A resolved thread is stamped like a done
+   Checklist item: muted, collapsed to one line, kept in place. Someone typing shows their presence colour, quietly. ── */
+.alt-comments { display: flex; flex-direction: column; gap: var(--space-3); }
+.alt-comment-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.alt-comment { border-radius: var(--radius-md); }
+.alt-comment-article { display: flex; gap: 10px; padding: 8px; }
+.alt-comment-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.alt-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
+.alt-comment-author { font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-comment-time { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-comment-failed { display: inline-flex; align-items: center; gap: 4px; color: var(--critical); }
+.alt-comment-body { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+.alt-comment-mention { padding: 0 3px; border-radius: var(--radius-xs); background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
+.alt-comment-actions { display: flex; gap: var(--space-2); margin-top: 4px; }
+.alt-comment[data-deleted] { display: flex; align-items: center; gap: var(--space-2); padding: 8px 8px 8px 46px; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); font-style: italic; }
+.alt-comments-resolved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px 8px; border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well); }
+.alt-comments-stamp { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-comments[data-resolved] .alt-comment-list { opacity: 0.7; }
+.alt-comments-compose { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-comments-field { position: relative; }
+.alt-comments-field textarea { min-height: 56px; }
+.alt-comments-mentions { top: calc(100% + 4px); left: 0; min-width: 220px; padding: var(--space-1); }
+.alt-comments-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); cursor: pointer; }
+.alt-comments-option[data-active] { background: var(--accent-soft); }
+.alt-comments-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
+.alt-comments-typing { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-comments-dots { display: inline-flex; gap: 3px; }
+.alt-comments-dots i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--presence-1); animation: alt-typing 1.2s ease-in-out infinite; }
+.alt-comments-dots i:nth-child(2) { animation-delay: 0.15s; } .alt-comments-dots i:nth-child(3) { animation-delay: 0.3s; }
+@keyframes alt-typing { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .alt-comments-dots i { animation: none; } }
+[data-motion="reduced"] .alt-comments-dots i { animation: none; }
+@media (forced-colors: active) { .alt-comment-mention { border: 1px solid CanvasText; } }
+
+/* ── Tour: a note in the air above the page. One step at a time floats at level 3 beside its target, which takes a
+   2px accent-ink ring (a ring, not a lift: the target may not be something you press). It never dims the page,
+   because receding is the summit's privilege, and it isn't modal. Moving on lifts the step off; the next rises at its
+   own target. ── */
+.alt-tour {
+  position: fixed; z-index: var(--z-floating); width: min(320px, calc(100vw - 16px)); padding: var(--space-4); border-radius: var(--radius-lg);
+  background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--ink); outline: none;
+  animation: alt-emerge var(--dur-travel-3) var(--ease-rise); --alt-from-y: 6px;
+}
+.alt-tour[data-side="above"] { --alt-from-y: -6px; }
+.alt-tour:focus-visible { box-shadow: var(--elev-3), 0 0 0 2px var(--accent-ink); }
+.alt-tour-count { margin: 0 0 2px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-tour-title { margin: 0 24px 6px 0; font: 600 15px/21px var(--font-sans); }
+.alt-tour-body { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
+.alt-tour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
+.alt-tour-dots { display: inline-flex; gap: 4px; margin-right: auto; }
+.alt-tour-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--line-control); }
+.alt-tour-dots i[data-on] { background: var(--accent); }
+.alt-tour-close { position: absolute; top: 8px; right: 8px; }
+[data-tour-target] { outline: 2px solid var(--accent-ink) !important; outline-offset: 3px !important; border-radius: var(--radius-sm); }
+[data-contrast="more"] .alt-tour { box-shadow: 0 4px 0 0 var(--ink), var(--elev-3); }
+@media (forced-colors: active) { .alt-tour { border: 2px solid CanvasText; } [data-tour-target] { outline-color: Highlight !important; } }
+
+/* ── PromptInput: where a person writes to an agent. The whole composer is the Input well (empty: its back wall shows and
+   it deepens as the pointer nears; holding text: the floor rises flush), with attachments as Tag plates above the text
+   and a toolbar below. Send is the level-2 primary; while generating it becomes Stop in the same slot and size, its icon
+   cross-fading without travel. An empty composer's Send is flush and faint but stays focusable (aria-disabled).
+   Dragging a file over drops the well to a trench, as DropZone. ── */
+.alt-prompt { position: relative; }
+.alt-prompt-well { position: relative; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); }
+.alt-prompt-well .alt-prompt-text { width: 100%; min-height: 24px; resize: none; transition: height var(--dur-travel-2) var(--ease-glide); }
+.alt-prompt-files { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+/* @ mentions and / commands (#283): the list is a floating Combobox list (level 3) rising above the composer, grouped
+   with headings; what's chosen is a flush plate in the composer's context row ("@label" stays in the text too). */
+.alt-prompt-suggest { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 20; width: min(420px, 100%); max-height: 280px; overflow: auto; padding: 4px; }
+.alt-prompt-suggest-head { margin: 4px 8px 2px; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-prompt-option { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; }
+.alt-prompt-option[data-active] { background: var(--surface-raised); box-shadow: var(--elev-1); }
+.alt-prompt-option-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-prompt-option-label[data-kind="command"], .alt-prompt-command .alt-tag-face { font-family: var(--font-mono); }
+.alt-prompt-option-desc { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-prompt-searching { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-prompt-searching .alt-skeleton { width: 80px; height: 10px; }
+/* Dictation (#284): listening is a latched toggle (a shallow well with accent-soft poured in, a steady lamp and the
+   word), never a pulse or a waveform; interim words are a ghost in ink-faint, like a suggestion, never in the value. */
+.alt-btn.alt-prompt-dictate[data-listening], .alt-btn.alt-prompt-dictate[data-listening]:focus-visible, .alt-btn.alt-prompt-dictate[data-listening]:active:not(:disabled) {
+  --wall: 0px; background: var(--accent-soft); background-image: none; color: var(--accent-ink); box-shadow: var(--well); transform: none; }
+.alt-prompt-listening { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font: 500 12.5px/17px var(--font-sans); }
+.alt-prompt-lamp { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 22%, transparent); }
+.alt-prompt-dictate[data-blocked] { color: var(--ink-faint); }
+.alt-prompt-interim { margin: 2px 0 0; font: 400 15px/23px var(--font-sans); color: var(--ink-faint); white-space: pre-wrap; }
+@media (forced-colors: active) { .alt-btn.alt-prompt-dictate[data-listening] { border: 2px solid Highlight; } }
+.alt-prompt-context { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px 0; }
+.alt-prompt-kind { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); }
+.alt-prompt-kind[data-kind="file"] { background: var(--accent-ink); }
+.alt-prompt-kind[data-kind="person"] { background: var(--positive); }
+.alt-prompt-chip { display: inline-flex; border-radius: var(--radius-sm); }
+.alt-prompt-uploading { color: var(--ink-muted); }
+.alt-prompt-bar { display: flex; align-items: center; gap: var(--space-2); }
+.alt-prompt-send { margin-left: auto; }
+.alt-prompt-send svg { animation: alt-fade-in var(--dur-travel-1) var(--ease-rise); }
+@keyframes alt-fade-in { from { opacity: 0; } }
+.alt-prompt-send[aria-disabled] {
+  background: var(--surface-well); background-image: none; color: var(--ink-faint); box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); transform: none; cursor: not-allowed;
+}
+@media (hover: hover) { .alt-prompt-send[aria-disabled]:is(:hover, :active, :focus-visible) {
+  background: var(--surface-well); background-image: none; color: var(--ink-faint); box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); transform: none; cursor: not-allowed;
+} }
+.alt-prompt-well[data-drop="over"] { background: var(--accent-soft); box-shadow: var(--trench); border-color: var(--accent-ink); }
+.alt-prompt-drop { position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px/20px var(--font-sans); color: var(--accent-ink); background: color-mix(in oklab, var(--accent-soft), transparent 15%); pointer-events: none; }
+@media (prefers-reduced-motion: reduce) { .alt-prompt-text { transition: none; } }
+[data-motion="reduced"] .alt-prompt-text { transition: none; }
+@media (forced-colors: active) { .alt-prompt-send[aria-disabled] { border: 1px solid GrayText; color: GrayText; } .alt-prompt-well[data-drop="over"] { border: 2px dashed CanvasText; } }
+
+/* ── Conversation: settled messages are the record. A person's message is a flush accent-soft sheet; an assistant's is
+   flush with no bubble. A streaming answer isn't the record yet and isn't a pending write either (nothing you sent is in
+   flight), so it rests on the ground with charts' "not yet the record" treatment: a dashed line-control rule down its
+   left edge, "Generating…" and a caret. Completing makes the rule solid and settles it once. "Jump to latest" floats at
+   level 3 once you've scrolled up. ── */
+.alt-convo { position: relative; display: flex; flex-direction: column; min-height: 0; }
+.alt-convo-scroll { flex: 1; min-height: 0; overflow-y: auto; outline: none; border-radius: var(--radius-md); }
+.alt-convo-scroll:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+/* The scrollbar sits beside the messages, never over them: a classic bar gets a gutter of its own, and the content keeps
+   12px clear of the right edge, where an overlay bar (macOS, phones) is drawn. */
+.alt-convo-scroll { scrollbar-gutter: stable; scrollbar-width: thin; }
+.alt-convo-content { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-1); }
+.alt-msg { display: flex; flex-direction: column; gap: 4px; max-width: 72ch; border-radius: var(--radius-md); }
+.alt-msg[data-from="user"] { align-self: flex-end; max-width: min(72ch, 85%); padding: 10px 14px; background: var(--accent-soft); color: var(--ink); }
+/* Attachments (#274): part of the record, on the ground. Images are 64px thumbnails in a 1px line rim; files are the
+   composer's Tag plates, settled. One that opens lifts a level when pointed at, as any plate that acts. */
+.alt-msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
+.alt-msg[data-from="user"] .alt-msg-attachments { justify-content: flex-end; }
+.alt-msg-attachment { display: flex; min-width: 0; }
+.alt-msg-thumb { position: relative; display: block; height: 64px; padding: 0; border: 0; border-radius: var(--radius-md); background: none; overflow: hidden; cursor: default; transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+.alt-msg-thumb img { display: block; height: 64px; width: auto; max-width: 160px; min-width: 48px; object-fit: cover; }
+.alt-msg-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
+:is(a, button).alt-msg-thumb { cursor: pointer; }
+.alt-msg-file { height: 28px; }
+.alt-msg-file .alt-tag-face { max-width: 36ch; text-decoration: none; }
+:is(a, button).alt-tag-face { cursor: pointer; }
+.alt-msg-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alt-msg-file-meta { flex: none; color: var(--ink-muted); font-weight: 450; }
+.alt-msg-file[data-unavailable] { color: var(--ink-muted); }
+@media (hover: hover) {
+  .alt-msg-file[data-acts]:hover { --t-bg: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+  :is(a, button).alt-msg-thumb:hover { box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+}
+.alt-msg-thumb:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-msg-file[data-acts]:active, :is(a, button).alt-msg-thumb:active { transform: none; box-shadow: none; transition-duration: var(--dur-press); }
+@media (forced-colors: active) { .alt-msg-thumb { border: 1px solid CanvasText; } }
+.alt-msg[data-from="assistant"] { border-radius: 0; padding: 2px 0 8px 14px; box-shadow: inset 2px 0 0 0 transparent; transition: box-shadow var(--dur-travel-2) var(--ease-rise); }
+.alt-msg[data-stream="streaming"] { box-shadow: none; background-image: linear-gradient(var(--line-control) 50%, transparent 50%); background-size: 2px 8px; background-repeat: repeat-y; background-position: left top; }
+.alt-msg[data-stream="complete"], .alt-msg[data-stream="stopped"], .alt-msg[data-stream="error"] { box-shadow: inset 2px 0 0 0 var(--line); }
+.alt-msg[data-stream="error"] { box-shadow: inset 2px 0 0 0 var(--critical); }
+.alt-msg-name { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-msg-content { font: 400 15px/23px var(--font-sans); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* ---- Terminal (#273) ----
+   A command's output in CodeBlock's frame: flush on the ground, a 1px rim, mono. Running, it isn't the record yet, so
+   a dashed line-control rule runs down the left; finished, the rule goes solid (critical when the exit is non-zero)
+   with one afterglow. stderr lines carry a critical mark in the gutter. "Jump to latest output" floats at level 3. */
+.alt-term { position: relative; border-left-width: 2px; }
+.alt-term[data-status="running"] { border-left-style: dashed; border-left-color: var(--line-control); }
+.alt-term-cmd { min-width: 0; font: 500 13px/18px var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
+.alt-term-prompt { color: var(--ink-muted); }
+.alt-term-viewport { position: relative; }
+.alt-term-body { max-height: 320px; overflow: auto; scrollbar-width: thin; outline: none; }
+.alt-term-body:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-term-pre { margin: 0; padding: var(--space-3) var(--space-4); font: 400 13px/20px var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
+.alt-term-line { position: relative; display: block; min-height: 20px; }
+.alt-term-line[data-stream="stderr"]::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) + 6px); top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--critical); }
+.alt-term [data-tone="critical"] { color: var(--critical); }
+.alt-term [data-tone="caution"] { color: var(--caution); }
+.alt-term [data-tone="positive"] { color: var(--positive); }
+.alt-term [data-tone="accent"] { color: var(--accent-ink); }
+.alt-term [data-tone="muted"] { color: var(--ink-muted); }
+.alt-term [data-bold] { font-weight: 600; }
+.alt-term-more { display: block; margin: var(--space-2) var(--space-4) 0; padding: 0; border: 0; background: none; color: var(--accent-ink); font: 500 12.5px/24px var(--font-sans); text-decoration: underline; cursor: pointer; }
+.alt-term-exit { display: flex; align-items: center; gap: 6px; padding: 8px var(--space-4); border-top: 1px solid var(--line); font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-term-exit[data-tone="critical"] { color: var(--critical); }
+[data-contrast="more"] .alt-term { border-color: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-term { border-color: CanvasText; }
+  .alt-term[data-status="running"] { border-left-style: dotted; }
+  .alt-term-line[data-stream="stderr"]::before { background: CanvasText; }
+}
+
+/* ---- Suggestions (#272) ----
+   Prompts to start from or follow up with are things you press: small secondary buttons, raised at level 1 with their
+   wall, lifting to 2 when pointed at, never the view's level-2 primary (that's the composer's Send). Follow-ups merely
+   became available, so they cross-fade in under the answer; they don't rise. */
+.alt-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
+.alt-suggestions[data-arrive] { animation: alt-fade-in var(--dur-onset) var(--ease-rise) both; }
+.alt-suggestion { max-width: 100%; }
+.alt-suggestion-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alt-msg .alt-suggestions { margin-top: 4px; }
+.alt-empty .alt-suggestions { justify-content: center; }
+@media (prefers-reduced-motion: reduce) { .alt-suggestions[data-arrive] { animation: none; } }
+[data-motion="reduced"] .alt-suggestions[data-arrive] { animation: none; }
+
+/* ---- Markdown (#268) ----
+   An answer's text set as the record: everything sits on the ground at level 0 and nothing here adds height. Code is
+   CodeBlock, links are Link, [n] markers are InlineCitation (the only part that lifts, when pointed at), tables use
+   Table's flush rows with line dividers, and an image waits in a sunk imprint (-1) and rises out of it. Headings are
+   the heading style, never the title (which belongs to the page). Rims and rules are line; under contrast="more"
+   they're line-control, and in forced colours CanvasText. */
+.alt-md { font: 400 15px/23px var(--font-sans); color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
+.alt-md :is(p, .alt-md-list, .alt-md-quote, .alt-md-pre, .alt-md-table, .alt-md-html) { margin: 0 0 12px; }
+/* After the block margins: at equal specificity the later rule wins, so the last block doesn't carry 12px out of the answer. */
+.alt-md > :first-child { margin-top: 0; }
+.alt-md > :last-child { margin-bottom: 0; }
+.alt-md :is(li, blockquote) > :last-child { margin-bottom: 0; }
+.alt-md-h { margin: 20px 0 8px; color: var(--ink); font: 600 15px/23px var(--font-sans); }
+.alt-md-h[data-depth="1"] { font-size: 19px; line-height: 26px; letter-spacing: -0.01em; }
+.alt-md-h[data-depth="2"] { font-size: 17px; line-height: 24px; }
+.alt-md-list { padding-inline-start: 1.5em; }
+.alt-md-list li + li { margin-top: 4px; }
+.alt-md-list .alt-md-list { margin: 4px 0 0; }
+.alt-md-list li::marker { color: var(--ink-muted); }
+.alt-md-task-item { list-style: none; display: flex; gap: 8px; align-items: flex-start; margin-inline-start: -1.5em; }
+.alt-md-task { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-top: 3.5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line-control); color: var(--on-accent); }
+.alt-md-task[data-done] { background: var(--accent); box-shadow: none; }
+.alt-md-task-body { min-width: 0; }
+.alt-md-code { padding: 1px 5px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line); font: 400 0.87em/1 var(--font-mono); overflow-wrap: anywhere; }
+.alt-md-quote { margin-inline: 0; padding-inline-start: 12px; border-inline-start: 2px solid var(--line); color: var(--ink-muted); }
+.alt-md-hr { margin: 16px 0; }
+.alt-md-table { overflow-x: auto; outline: none; scrollbar-width: thin; }
+.alt-md-table:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-md); }
+.alt-md-table .alt-table { width: auto; min-width: 100%; }
+.alt-md-table .alt-th, .alt-md-table .alt-td { padding: 8px 12px; }
+.alt-md del { color: var(--ink-muted); }
+.alt-md-img { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
+.alt-md-img img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); transition: opacity var(--dur-travel-1) var(--ease-rise), translate var(--dur-travel-1) var(--ease-rise); }
+.alt-md-img[data-state="wait"] { width: min(100%, 320px); aspect-ratio: 16 / 9; }
+.alt-md-img[data-state="wait"] img { position: absolute; inset: 0; opacity: 0; translate: 0 2px; }
+.alt-md-img-imprint { position: absolute; inset: 0; border-radius: var(--radius-md); }
+.alt-md-img-failed { color: var(--ink-muted); font-style: italic; }
+@media (prefers-reduced-motion: reduce) { .alt-md-img img { transition: none; translate: none; } }
+[data-contrast="more"] .alt-md-code { box-shadow: inset 0 0 0 1px var(--line-control); }
+[data-contrast="more"] .alt-md-quote { border-inline-start-color: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-md-code, .alt-md-task { box-shadow: none; border: 1px solid CanvasText; }
+  .alt-md-quote { border-inline-start-color: CanvasText; }
+  .alt-md-task[data-done] { background: Highlight; color: HighlightText; }
+}
+.alt-msg-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--ink-muted); animation: alt-caret 1s steps(1) infinite; }
+@keyframes alt-caret { 50% { opacity: 0; } }
+.alt-msg-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-msg-caption[data-tone="critical"] { color: var(--critical); }
+.alt-msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -6px; }
+.alt-msg-actions .alt-tgroup { gap: 2px; }
+.alt-msg-versions { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
+.alt-msg-version { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+/* Editing a sent message (#275): the text stays where it is while a Textarea well opens around it, inside the sheet.
+   Editing is local input, not a pending write, so nothing hovers; "Send edit" is secondary, leaving the composer's
+   Send the view's one primary. */
+.alt-msg[data-from="user"][data-editing] { width: min(72ch, 85%); }
+.alt-msg-editor { display: flex; flex-direction: column; gap: 8px; }
+.alt-msg-editor .alt-textarea, .alt-msg-editor textarea { width: 100%; font: 400 15px/23px var(--font-sans); }
+.alt-msg-editor-actions { display: flex; justify-content: flex-end; gap: 6px; }
+.alt-msg[data-from="user"] .alt-msg-actions { justify-content: flex-end; margin-left: 0; margin-right: -6px; }
+.alt-msg[data-from="user"] .alt-msg-edited { justify-content: flex-end; }
+/* The queue (#276): written but not dispatched, so it doesn't hover; the person's sheet on the ground with a dashed
+   line-control rim, the way Altitude draws what isn't in the record yet. It appears in place: it's the person's own act. */
+.alt-convo-queue { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.alt-queued { width: fit-content; max-width: min(72ch, 85%); padding: 8px 12px 4px; border: 1px dashed var(--line-control); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); }
+.alt-queued[data-editing] { width: min(72ch, 85%); padding-bottom: 8px; }
+.alt-queued-text { margin: 0; font: 400 15px/23px var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
+.alt-queued-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
+.alt-queued-state { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-queued-actions { display: inline-flex; gap: 2px; margin-right: -6px; }
+@media (forced-colors: active) { .alt-queued { border-color: CanvasText; } }
+/* Checkpoints (#277): a divider with a word between its lines, on the ground. While restoring, its label hovers as
+   pending (after dur-grace); restored, it settles once; failed, it sinks into a trench. Restore is a ghost button. */
+.alt-checkpoint { display: flex; align-items: center; gap: var(--space-3); margin: 4px 0; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-checkpoint-line { flex: 1; min-width: 16px; height: 1px; background: var(--line); }
+.alt-checkpoint-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; padding: 2px 8px; border-radius: var(--radius-sm); }
+.alt-checkpoint-label > * + *::before { content: "·"; margin-right: 6px; color: var(--ink-muted); }
+.alt-checkpoint-word { color: var(--ink); }
+.alt-checkpoint-name { overflow-wrap: anywhere; }
+.alt-checkpoint time { font-variant-numeric: tabular-nums; }
+.alt-checkpoint-actions { display: inline-flex; gap: 2px; }
+.alt-checkpoint-actions:empty { display: none; }
+.alt-checkpoint[data-phase="failed"] .alt-checkpoint-word { color: var(--critical); }
+[data-contrast="more"] .alt-checkpoint-line { background: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-checkpoint-line { background: CanvasText; }
+  .alt-checkpoint-label[data-status="pending"] { outline: 1px dotted CanvasText; }
+  .alt-checkpoint-label[data-status="failed"] { outline: 3px dashed CanvasText; }
+}
+.alt-convo-jump, .alt-term-jump { position: absolute; left: 50%; bottom: var(--space-3); translate: -50% 0; z-index: 1; --alt-bg: var(--surface-floating); --alt-sh: var(--elev-3); --alt-sh-up: var(--elev-3); animation: alt-emerge var(--dur-travel-2) var(--ease-rise); --alt-from-y: 6px; }
+@media (prefers-reduced-motion: reduce) { .alt-msg-caret { animation: none; } }
+[data-motion="reduced"] .alt-msg-caret { animation: none; }
+[data-contrast="more"] .alt-msg[data-stream] { box-shadow: inset 2px 0 0 0 var(--line-control); }
+[data-contrast="more"] .alt-msg[data-stream="streaming"] { box-shadow: none; background-size: 2px 8px; }
+@media (forced-colors: active) {
+  .alt-msg[data-stream="streaming"] { background-image: none; border-left: 2px dotted CanvasText; }
+  .alt-msg[data-stream="complete"], .alt-msg[data-stream="stopped"] { border-left: 2px solid CanvasText; }
+  .alt-msg[data-from="user"] { border: 1px solid CanvasText; }
+  .alt-msg-caret { forced-color-adjust: none; background: CanvasText; }
+}
+
+/* ── Confirmation: a proposal from an agent, not yet dispatched. It's status that asks for action, so it's raised
+   (level 1, Alert's raised rule), never pending: hovering would say the action is already in flight. Approving turns it
+   into a pending write (hovers after dur-grace), which lands with the afterglow or drops to a trench. Rejected and
+   expired are flush and muted, kept in the record. ── */
+.alt-confirm {
+  display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); border-radius: var(--radius-lg);
+  background: var(--surface-ground); box-shadow: inset 0 0 0 1px var(--line); max-width: 560px;
+  transition: background var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-rise);
+}
+.alt-confirm[data-state="requested"] { background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); }
+.alt-confirm[data-state="rejected"], .alt-confirm[data-state="expired"] { color: var(--ink-muted); }
+.alt-confirm[data-state="rejected"] .alt-confirm-title, .alt-confirm[data-state="expired"] .alt-confirm-title { color: var(--ink-muted); }
+.alt-confirm-line { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-confirm-line[data-tone="accent"] { color: var(--accent-ink); }
+.alt-confirm-line[data-tone="critical"] { color: var(--critical); }
+.alt-confirm-title { margin: 0; font: 600 15px/21px var(--font-sans); color: var(--ink); }
+.alt-confirm-consequence { margin: 0; font: 400 14px/20px var(--font-sans); color: inherit; }
+.alt-confirm-details { margin-top: var(--space-2); }
+.alt-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
+.alt-confirm-who { margin-right: auto; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+[data-contrast="more"] .alt-confirm[data-state="requested"] { box-shadow: 0 3px 0 0 var(--ink), var(--elev-1); }
+/* Editing a proposal (#281): its fields open in place inside the raised card (wells), as EditRegion does; Reject and
+   Approve stay; an edited proposal carries an "Edited" plate by its title. */
+.alt-confirm-edit { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
+.alt-confirm-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
+.alt-confirm-edited { display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: var(--radius-sm); vertical-align: 2px;
+  background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent); font: 550 11.5px/1 var(--font-sans); color: var(--ink-muted); }
+.alt-confirm-scope { display: flex; flex-direction: column; gap: 1px; padding-block: 6px; white-space: normal; }
+.alt-menu:has(.alt-confirm-scope) { min-width: min(300px, calc(100vw - 16px)); }
+.alt-menu-item:has(.alt-confirm-scope) { height: auto; min-height: var(--size-row-md, 32px); }
+.alt-confirm-scope-desc { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+@media (forced-colors: active) { .alt-confirm { border: 1px solid CanvasText; } }
+/* Question (#270): Confirmation's raised card asking for an answer rather than approval. Options are trenches (radio or
+   checkbox), "Your own answer" a well; Answer is the one primary. Answered, it presses to the ground as one muted line. */
+.alt-question-options { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
+.alt-question-other { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
+.alt-question-other-label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-question[data-state="answered"], .alt-question[data-state="expired"] { padding-block: 8px; box-shadow: none; background: none; }
+.alt-question-record { display: flex; align-items: flex-start; gap: 6px; margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
+.alt-question-record svg { flex: none; margin-top: 2.5px; }
+.alt-question-asked { color: var(--ink); }
+.alt-question-asked::after { content: " ·"; color: var(--ink-muted); }
+.alt-question-set { display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; }
+.alt-question-set > .alt-confirm { max-width: none; }
+
+/* ── Trace: an agent's steps as a vertical Stepper. Done steps are flush with a stamped check, the running step stands
+   raised on its wall (no spinner: a small steady lamp in its mark), planned steps are imprints. A failed step drops to a
+   trench with a critical rim and Retry. A step waiting for approval holds a Confirmation. Tool calls and reasoning sit
+   behind Accordion lids under their step, indented to the text. ── */
+.alt-trace .alt-step { width: 100%; }
+.alt-trace .alt-step[data-state="failed"] { background: var(--surface-well); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); color: var(--ink); }
+.alt-trace .alt-step[data-state="failed"] .alt-step-mark { background: var(--critical); color: var(--on-critical); }
+.alt-trace-live { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); }
+.alt-trace-error { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 4px; font: 400 13px/18px var(--font-sans); color: var(--ink); }
+/* Indented to the step's text where there's room; in a narrow trace (under 480px) one small step in, so tool calls and
+   approvals keep the width (a percentage margin reads the step's width: 40px at 480px, 12px from 452px down). */
+.alt-trace-detail { display: flex; flex-direction: column; gap: var(--space-2); margin: 6px 0 0 clamp(var(--space-3), 100% - 440px, 40px); }
+/* Subagents (#278): a nested run is a nested list behind an Accordion lid that says how it's going; steps that run at
+   once sit in a labelled group with a 1px line-control bracket, several raised at once because each is in play. */
+.alt-trace-nested-title { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
+.alt-trace-nested-sum { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-trace-nested .alt-trace { padding: 4px 0 0; }
+.alt-trace-parallel { margin: 6px 0 0; padding: 2px 0 2px 12px; border-left: 1px solid var(--line-control); }
+.alt-trace-parallel-head { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 6px; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-trace-parallel-head > :first-child { color: var(--ink); }
+@media (forced-colors: active) { .alt-trace-parallel { border-left-color: CanvasText; } }
+.alt-trace-acc .alt-acc-trigger { padding-block: 6px; font-size: 13px; }
+.alt-trace-tool code { font: 500 12.5px/18px var(--font-mono); }
+.alt-trace-io { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-trace-wait, .alt-trace-reasoning { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); white-space: pre-wrap; }
+/* Reasoning while it streams (#279): not yet the record, like a streaming answer: "Thinking…" on the lid, and a dashed
+   line-control rule down the open compartment. No shimmer, no pulsing dots, no ticking counter; the lid's words
+   cross-fade when it completes. */
+.alt-trace-thought-title { animation: alt-fade-in var(--dur-travel-1) var(--ease-rise) both; }
+.alt-trace-thought[data-status="streaming"] .alt-trace-reasoning { max-height: 240px; overflow-y: auto; padding-left: 10px; border-left: 1px dashed var(--line-control); }
+.alt-trace-reasoning-hidden { margin: 0; padding: 4px 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
+@media (prefers-reduced-motion: reduce) { .alt-trace-thought-title { animation: none; } }
+[data-motion="reduced"] .alt-trace-thought-title { animation: none; }
+@media (forced-colors: active) { .alt-trace-thought[data-status="streaming"] .alt-trace-reasoning { border-left: 1px dotted CanvasText; } }
+.alt-trace-item:last-child .alt-step-line { display: none; }
+@media (forced-colors: active) { .alt-step[data-state="failed"] { border: 3px dashed CanvasText; } }
+
+/* ── AILabel: marks what AI made. A label is part of the record, so it's a flush Badge plate with a small static icon
+   and a word: no gradient, no glow, no shimmer (the light never moves, and a gradient rim reads as focus). It acts, so
+   it lifts one level when pointed at, and opens a Popover at level 3 saying how the content was produced. ── */
+.alt-ailabel { border: 0; cursor: pointer; font-family: var(--font-sans); transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1); }
+.alt-ailabel svg { flex: none; color: var(--ink-muted); }
+.alt-ailabel:focus-visible, .alt-ailabel[aria-expanded="true"] { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-ailabel:hover { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-ailabel:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-ailabel-pop { width: min(320px, calc(100vw - 32px)); }
+.alt-ailabel-body { display: flex; flex-direction: column; gap: var(--space-2); }
+.alt-ailabel-title { margin: 0; font: 600 14px/20px var(--font-sans); }
+.alt-ailabel-sub { margin: var(--space-1) 0 0; font: 600 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-ailabel-facts { display: grid; gap: 4px; margin: 0; font: 400 13px/18px var(--font-sans); }
+.alt-ailabel-facts div { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-2); }
+.alt-ailabel-facts dt { color: var(--ink-muted); }
+.alt-ailabel-facts dd { margin: 0; color: var(--ink); }
+.alt-ailabel-sources { margin: 0; padding-left: 1.3em; font: 400 13px/19px var(--font-sans); }
+.alt-ailabel-more { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+[data-contrast="more"] .alt-ailabel { box-shadow: inset 0 0 0 1px var(--line-control); }
+@media (forced-colors: active) { .alt-ailabel { border: 1px solid ButtonText; } }
+
+/* ── InlineCitation: a numbered source marker in generated text. A citation is part of the record, so it's a small flush
+   plate (ChartAnnotation's build) with a mono number, raised a little off the baseline like a superscript; it acts, so it
+   lifts one level when pointed at, and a HoverCard previews the source at level 3. Sources is a flush ordered list. ── */
+.alt-cite {
+  display: inline-flex; align-items: center; gap: 2px; min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1px; border-radius: var(--radius-xs);
+  vertical-align: 0.35em; background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); color: var(--ink-muted);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent); font: 600 10.5px/1 var(--font-mono); text-decoration: none; justify-content: center;
+  transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1), color var(--dur-travel-1);
+}
+.alt-cite:focus-visible { background: var(--surface-raised); color: var(--accent-ink); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-cite:hover { background: var(--surface-raised); color: var(--accent-ink); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-cite:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-cite[data-unverified] svg { color: var(--caution); }
+.alt-cite-card { width: min(300px, calc(100vw - 32px)); }
+.alt-cite-preview { display: flex; flex-direction: column; gap: 4px; }
+.alt-cite-meta { margin: 0; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
+.alt-cite-title { margin: 0; font: 600 14px/20px var(--font-sans); }
+.alt-cite-excerpt { margin: 4px 0 0; padding-left: 10px; box-shadow: inset 2px 0 0 var(--line-control); font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
+.alt-cite-warn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--ink); font: 500 12px/16px var(--font-sans); }
+.alt-cite-meta .alt-cite-warn { margin-left: 0; }
+.alt-cite-warn svg { color: var(--caution); }
+.alt-sources { margin-top: var(--space-3); }
+.alt-sources-heading { margin: 0 0 6px; font: 600 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-sources-list { margin: 0; padding-left: 1.4em; font: 400 13.5px/20px var(--font-sans); color: var(--ink); }
+.alt-sources-list li { scroll-margin: 40px; border-radius: var(--radius-xs); outline: none; }
+.alt-sources-list li:target, .alt-sources-list li:focus { background: var(--accent-soft); }
+.alt-sources-domain { color: var(--ink-muted); }
+[data-contrast="more"] .alt-cite { box-shadow: inset 0 0 0 1px var(--line-control); }
+@media (forced-colors: active) { .alt-cite { border: 1px solid LinkText; } }
+
 /* ── Pile: thickness says roughly how many (ordinal), the badge says exactly. Click a pile that has items and they
    slide out from under the top card, floating over the page below (level 3) without moving anything. Click the top,
    press Escape or click away and they slide back under. ── */
@@ -1109,8 +2628,10 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 .alt-pile-live .alt-pile-top { cursor: pointer; }
 /* Hover: the top lifts and the sheets beneath fan a little, a preview of what's underneath. */
-.alt-pile-live .alt-pile-top:hover, .alt-pile-live .alt-pile-top:focus-visible { box-shadow: var(--elev-2); transform: translateY(calc(-3px * var(--alt-travel))); }
-.alt-pile-live:has(.alt-pile-top:hover) .alt-pile-sheet, .alt-pile-live:has(.alt-pile-top:focus-visible) .alt-pile-sheet { --fan: var(--alt-travel); }
+.alt-pile-live .alt-pile-top:focus-visible { box-shadow: var(--elev-2); transform: translateY(calc(-3px * var(--alt-travel))); }
+@media (hover: hover) { .alt-pile-live .alt-pile-top:hover { box-shadow: var(--elev-2); transform: translateY(calc(-3px * var(--alt-travel))); } }
+.alt-pile-live:has(.alt-pile-top:focus-visible) .alt-pile-sheet { --fan: var(--alt-travel); }
+@media (hover: hover) { .alt-pile-live:has(.alt-pile-top:hover) .alt-pile-sheet { --fan: var(--alt-travel); } }
 .alt-pile-live .alt-pile-top:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-pile-count {
   position: absolute; z-index: 5; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
@@ -1140,9 +2661,12 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   opacity: 1; transform: none;
   transition: transform var(--dur-travel-3) var(--ease-settle) calc(var(--i) * 22ms), opacity var(--dur-travel-2) var(--ease-rise) calc(var(--i) * 22ms), box-shadow var(--dur-travel-1) var(--ease-rise);
 }
-.alt-pile-list[data-state="open"] .alt-pile-item:hover, .alt-pile-list[data-state="open"] .alt-pile-item:focus-visible {
+.alt-pile-list[data-state="open"] .alt-pile-item:focus-visible {
   box-shadow: var(--elev-3); transform: translateY(calc(-2px * var(--alt-travel))); transition-delay: 0ms;
 }
+@media (hover: hover) { .alt-pile-list[data-state="open"] .alt-pile-item:hover {
+  box-shadow: var(--elev-3); transform: translateY(calc(-2px * var(--alt-travel))); transition-delay: 0ms;
+} }
 .alt-pile-list[data-state="open"] .alt-pile-item:active { box-shadow: var(--elev-0); transform: translateY(calc(1px * var(--alt-travel))); transition-duration: var(--dur-press); transition-delay: 0ms; }
 .alt-pile-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 
@@ -1153,7 +2677,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition: box-shadow var(--dur-travel-2) var(--ease-rise);
 }
 .alt-scroll[data-top] .alt-scroll-header { box-shadow: var(--elev-2); }
-.alt-scroll-body { overflow: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
+.alt-scroll-body { overflow: auto; outline: none; scrollbar-width: thin; }
 .alt-scroll-body:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
 .alt-scroll-lip { position: absolute; left: 0; right: 0; height: 24px; pointer-events: none; opacity: 0; transition: opacity var(--dur-travel-2) var(--ease-rise); z-index: 1; }
 .alt-scroll-lip[data-edge="top"] { top: 0; box-shadow: var(--lip-top); }
@@ -1163,12 +2687,12 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 
 /* ── DropZone: flush until a file is in flight anywhere, then it opens; over it, it deepens. ── */
 .alt-drop {
-  display: grid; place-items: center; gap: var(--space-2); min-height: 132px; padding: var(--space-5); text-align: center;
+  display: grid; place-items: center; gap: var(--space-2); min-height: 132px; padding: var(--alt-inset-box); text-align: center;
   border: 1.5px dashed var(--line-control); border-radius: var(--radius-lg); background: var(--surface-ground); box-shadow: var(--elev-0);
   color: var(--ink-muted); font: 500 14px/20px var(--font-sans); cursor: pointer;
   transition: background-color var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-rise), border-color var(--dur-travel-2), transform var(--dur-travel-2) var(--ease-settle);
 }
-.alt-drop:hover { border-color: var(--ink-muted); }
+@media (hover: hover) { .alt-drop:hover { border-color: var(--ink-muted); } }
 .alt-drop:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-drop[data-drop="armed"] { background: var(--surface-well); box-shadow: var(--well); border-color: var(--ink-muted); }
 .alt-drop[data-drop="over"] { background: var(--accent-soft); box-shadow: var(--trench); border-style: solid; border-color: var(--accent-ink); color: var(--ink); transform: scale(calc(1 - 0.01 * var(--alt-travel))); }
@@ -1180,7 +2704,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    It sinks in when it appears (flush to well, dur-travel-1, ease-sink), the inverse of content arriving lifted,
    and it never pulses. ── */
 .alt-empty {
-  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); text-align: center;
+  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--alt-inset-page); text-align: center;
   border: 1.5px dashed var(--line-control); border-radius: var(--radius-lg); background: var(--surface-well); box-shadow: var(--well);
   color: var(--ink-muted); font: 400 15px/23px var(--font-sans);
   animation: alt-empty-sink var(--dur-travel-1) var(--ease-sink);
@@ -1192,7 +2716,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-empty-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
 .alt-empty-desc { margin: 0; max-width: 46ch; color: var(--ink-muted); text-wrap: pretty; }
 .alt-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
-.alt-empty:has(.alt-empty-actions > :first-child:is(:hover, :focus-visible):not(:disabled)) { box-shadow: var(--trench); border-color: var(--ink-muted); }
+@media (hover: hover) { .alt-empty:has(.alt-empty-actions > :first-child:is(:hover, :focus-visible):not(:disabled)) { box-shadow: var(--trench); border-color: var(--ink-muted); } }
 .alt-empty[data-size="sm"] { gap: var(--space-1); padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); font: 400 14px/20px var(--font-sans); }
 .alt-empty[data-size="sm"] .alt-empty-icon > svg { width: 18px; height: 18px; }
 .alt-empty[data-size="sm"] .alt-empty-title { font: 500 14px/20px var(--font-sans); letter-spacing: 0; }
@@ -1203,21 +2727,29 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-sort-item {
   position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-4) 10px var(--space-3);
   border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink);
-  font: 500 14px/20px var(--font-sans); user-select: none; touch-action: none; cursor: grab; outline: none;
+  font: 500 14px/20px var(--font-sans); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; cursor: grab; outline: none;
   transition: transform var(--dur-travel-2) var(--ease-settle), box-shadow var(--dur-travel-2) var(--ease-rise), background-color var(--dur-travel-1);
 }
-.alt-sort-item:hover { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-sort-item:hover { box-shadow: var(--elev-2); } }
 .alt-sort-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-sort-item[data-held] { z-index: 3; cursor: grabbing; background: var(--surface-floating); box-shadow: var(--elev-3); }
 .alt-sort-item[data-held]:not([data-following]) { transform: translateY(calc(-2px * var(--alt-travel))) rotate(calc(-0.5deg * var(--alt-travel))); }
 .alt-sort-item[data-following] { transition: box-shadow var(--dur-travel-2) var(--ease-rise), background-color var(--dur-travel-1); rotate: calc(-0.6deg * var(--alt-travel)); scale: calc(1 + 0.015 * var(--alt-travel)); }
 .alt-sort-grip { display: inline-flex; color: var(--ink-muted); flex: none; }
+/* On touch a swipe on the row scrolls and a press-and-hold picks it up; the grip picks it up at once, with a finger-sized hit area (#256). */
+.alt-sort-grip { position: relative; touch-action: none; }
+@media (pointer: coarse) { .alt-sort-grip::after { content: ""; position: absolute; inset: -14px -14px; } }
 .alt-sort-body { flex: 1; min-width: 0; }
 .alt-sort-slot {
   position: absolute; left: 0; right: 0; z-index: 0; border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well);
   border: 1.5px dashed var(--line-control); transition: top var(--dur-travel-2) var(--ease-settle);
 }
 
+/* ── Breadcrumb and Drilldown share one staircase (CrumbStep): every step stands on the ground line, each deeper one a
+   taller slab. Breadcrumb's steps are links (or your router's), the current page a step that doesn't press, and a deep
+   path's middle waits behind a "…" step that opens a menu. A route change re-renders it without motion. ── */
+.alt-breadcrumb ol { padding-top: 14px; padding-bottom: 4px; }
+
 /* ── Drilldown: hierarchy as a stack. Each place you go into is laid on top of the last: the crumbs climb a
    staircase (each one step higher, its wall one pixel thicker), and the view sits on a pile as thick as you are deep. ── */
 .alt-drill { display: flex; flex-direction: column; gap: var(--space-4); }
@@ -1226,10 +2758,10 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    higher, so all the contact shadows line up. Face and wall share one hairline so the top edge always reads.
    Shadow list: [face ring, wall, wall ring, contact, ambient]. */
 .alt-crumbs li { position: relative; display: flex; --rise: calc(var(--d) * 3px); }
-.alt-crumbs button {
+.alt-crumbs .alt-crumb-link {
   --wd: calc(2px + var(--rise)); --wall: var(--wd); --wall-c: color-mix(in oklab, var(--surface-trench), var(--ink) 6%);
-  position: relative; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
-  font: 500 13px/18px var(--font-sans); color: var(--ink-muted); white-space: nowrap; cursor: pointer;
+  position: relative; display: inline-flex; align-items: center; height: var(--size-control-sm); padding: 0 12px; border: 0; border-radius: var(--radius-sm);
+  font: 500 13px/18px var(--font-sans); color: var(--ink-muted); white-space: nowrap; text-decoration: none; cursor: pointer;
   background: var(--surface-raised); background-image: var(--alt-sheen);
   box-shadow: 0 0 0 1px var(--alt-ring), 0 var(--wd) 0 0 var(--wall-c), 0 var(--wd) 0 1px var(--alt-ring),
     0 calc(var(--wd) + 1px) 2px 0 var(--alt-cast), 0 calc(var(--wd) + 3px) 8px -3px var(--alt-cast);
@@ -1237,12 +2769,15 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition: transform var(--dur-travel-2) var(--ease-settle), box-shadow var(--dur-travel-2) var(--ease-settle),
     color var(--dur-travel-1), background-color var(--dur-travel-1);
 }
-.alt-crumbs li:not([data-current]) button:hover, .alt-crumbs li:not([data-current]) button:focus-visible {
+.alt-crumbs li:not([data-current]) .alt-crumb-link:focus-visible {
   --wd: calc(3px + var(--rise)); color: var(--ink); background-color: var(--surface-lifted);
 }
-.alt-crumbs li:not([data-current]) button:active { --wd: 0px; background-image: none; transition-duration: var(--dur-press); transition-timing-function: ease-out; }
-.alt-crumbs li[data-current] button { color: var(--ink); font-weight: 600; cursor: default; }
-.alt-crumbs li[data-new] button { animation: alt-crumb-rise var(--dur-travel-3) var(--ease-settle); }
+@media (hover: hover) { .alt-crumbs li:not([data-current]) .alt-crumb-link:hover {
+  --wd: calc(3px + var(--rise)); color: var(--ink); background-color: var(--surface-lifted);
+} }
+.alt-crumbs li:not([data-current]) .alt-crumb-link:active { --wd: 0px; background-image: none; transition-duration: var(--dur-press); transition-timing-function: ease-out; }
+.alt-crumbs li[data-current] .alt-crumb-link { color: var(--ink); font-weight: 600; cursor: default; }
+.alt-crumbs li[data-new] .alt-crumb-link { animation: alt-crumb-rise var(--dur-travel-3) var(--ease-settle); }
 /* A new step is built: it rises out of the ground to its height. */
 @keyframes alt-crumb-rise {
   from { transform: none; box-shadow: 0 0 0 1px var(--alt-ring), 0 0 0 0 var(--wall-c), 0 0 0 1px var(--alt-ring), 0 1px 2px 0 var(--alt-cast), 0 3px 8px -3px var(--alt-cast); }
@@ -1266,7 +2801,8 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   background: transparent; color: var(--ink); text-align: left; cursor: pointer; box-shadow: var(--elev-0);
   transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
 }
-.alt-drill-row:hover, .alt-drill-row:focus-visible { background: var(--surface-lifted); box-shadow: var(--elev-2); transform: translateY(calc(-1px * var(--alt-travel))); }
+.alt-drill-row:focus-visible { background: var(--surface-lifted); box-shadow: var(--elev-2); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-drill-row:hover { background: var(--surface-lifted); box-shadow: var(--elev-2); transform: translateY(calc(-1px * var(--alt-travel))); } }
 .alt-drill-row:active { box-shadow: var(--elev-0); transform: translateY(calc(1px * var(--alt-travel))); transition-duration: var(--dur-press); }
 .alt-drill-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-drill-row-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
@@ -1284,7 +2820,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    change, rows that survive travel to their new places (FLIP, ease-glide) and new ones rise 4px in, at most four at a
    time (riseDelay) and only near the top; the rest cross-fade. On opening, predicted items are there at once and the
    rest fade in over dur-onset. ── */
-.alt-cmd-root { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; justify-items: center; align-items: start; padding: max(var(--space-6), 12vh) var(--space-4) var(--space-6); }
+.alt-cmd-root { position: fixed; inset: 0; top: var(--alt-vv-top, 0px); bottom: auto; height: var(--alt-vvh, 100dvh); z-index: var(--z-modal); display: grid; justify-items: center; align-items: start; padding: max(var(--space-6), calc(var(--alt-vvh, 100dvh) * 0.12)) var(--space-4) var(--space-6); }
 .alt-cmd-root[data-state="closed"] .alt-scrim { opacity: 0; transition-duration: calc(var(--dur-travel-5) * 0.7); transition-timing-function: var(--ease-sink); }
 .alt-cmd {
   position: relative; display: flex; flex-direction: column; width: min(100%, 600px); max-height: 100%; overflow: hidden; outline: none;
@@ -1299,7 +2835,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-cmd .alt-cmd-field { height: 48px; padding: 0 var(--space-3) 0 var(--space-4); gap: var(--space-3); border-radius: calc(var(--radius-xl) - var(--space-3)); }
 .alt-cmd .alt-cmd-field input { font-size: 16px; }
 .alt-cmd .alt-cmd-field:focus-within, .alt-cmd .alt-cmd-field:has(input:not(:placeholder-shown)) { background: var(--surface-modal); }
-.alt-cmd-viewport { position: relative; flex: 0 1 auto; min-height: 0; max-height: min(380px, 52vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.alt-cmd-viewport { position: relative; flex: 0 1 auto; min-height: 0; max-height: min(380px, 52vh); max-height: min(380px, calc(var(--alt-vvh, 100dvh) * 0.52)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
 .alt-cmd-viewport[data-ready] { transition: height var(--dur-travel-2) var(--ease-glide); }
 .alt-cmd-list { position: relative; padding: 0 var(--space-2) var(--space-2); outline: none; }
 .alt-cmd-group + .alt-cmd-group { margin-top: var(--space-1); }
@@ -1310,7 +2846,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 .alt-cmd-hl[data-tone="critical"] { background: var(--critical-soft); }
 .alt-cmd-item {
-  position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm);
+  position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--size-field-md); padding: 0 10px; border-radius: var(--radius-sm);
   font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; user-select: none;
 }
 .alt-cmd-item[data-tone="critical"] { color: var(--critical); }
@@ -1338,7 +2874,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    8px clear of its edge so its own edges, and the shadow it casts below them, read as height. While content scrolls
    under its header the header rises; where content continues below, the footer's top edge curves away. A bottom
    sheet has a finger pull: a small recess (an opening, like every place you put something into) to drag it down by. ── */
-.alt-sheet-root { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
+.alt-sheet-root { position: fixed; inset: 0; top: var(--alt-vv-top, 0px); bottom: auto; height: var(--alt-vvh, 100dvh); z-index: var(--z-overlay); pointer-events: none; }
 .alt-sheet-root > .alt-scrim { pointer-events: auto; }
 .alt-sheet-root[data-state="closed"] > .alt-scrim { opacity: 0; transition-duration: calc(var(--dur-travel-4) * 0.7); transition-timing-function: var(--ease-sink); }
 .alt-sheet {
@@ -1349,10 +2885,10 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 }
 .alt-sheet[data-size="sm"] { --w: 360px; }
 .alt-sheet[data-size="lg"] { --w: 560px; }
-.alt-sheet[data-side="right"], .alt-sheet[data-side="left"] { top: var(--edge); bottom: var(--edge); width: min(calc(100% - 2 * var(--edge)), var(--w)); }
-.alt-sheet[data-side="right"] { right: var(--edge); transform-origin: 100% 50%; }
-.alt-sheet[data-side="left"] { left: var(--edge); transform-origin: 0 50%; }
-.alt-sheet[data-side="bottom"] { --w: 720px; left: 0; right: 0; bottom: var(--edge); width: min(calc(100% - 2 * var(--edge)), var(--w)); max-height: calc(100% - 2 * var(--space-8)); margin: 0 auto; transform-origin: 50% 100%; }
+.alt-sheet[data-side="right"], .alt-sheet[data-side="left"] { top: calc(var(--edge) + env(safe-area-inset-top, 0px)); bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 2 * var(--edge)), var(--w)); }
+.alt-sheet[data-side="right"] { right: calc(var(--edge) + env(safe-area-inset-right, 0px)); transform-origin: 100% 50%; }
+.alt-sheet[data-side="left"] { left: calc(var(--edge) + env(safe-area-inset-left, 0px)); transform-origin: 0 50%; }
+.alt-sheet[data-side="bottom"] { --w: 720px; left: 0; right: 0; bottom: calc(var(--edge) + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 2 * var(--edge)), var(--w)); max-height: calc(100% - 2 * var(--space-8)); margin: 0 auto; transform-origin: 50% 100%; }
 .alt-sheet[data-side="bottom"][data-size="sm"] { --w: 480px; }
 .alt-sheet[data-side="bottom"][data-size="lg"] { --w: 960px; }
 .alt-sheet-root[data-state="closed"] .alt-sheet { opacity: 0; box-shadow: var(--elev-1); }
@@ -1364,19 +2900,19 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   transition-duration: calc(var(--dur-travel-4) * 0.7); transition-timing-function: var(--ease-sink);
 }
 .alt-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
-.alt-sheet-inner { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; padding: 0 var(--space-6); }
+.alt-sheet-inner { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; padding: 0 var(--alt-inset-page); }
 .alt-sheet-header {
-  position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin: 0 calc(-1 * var(--space-6));
-  padding: var(--space-6) calc(var(--space-6) + 36px) var(--space-2) var(--space-6); background: var(--surface-overlay); box-shadow: var(--elev-0);
+  position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; margin: 0 calc(-1 * var(--alt-inset-page));
+  padding: var(--alt-inset-page) calc(var(--alt-inset-page) + 36px) var(--space-2) var(--alt-inset-page); background: var(--surface-overlay); box-shadow: var(--elev-0);
   transition: box-shadow var(--dur-travel-2) var(--ease-rise);
 }
 .alt-sheet[data-top] .alt-sheet-header { box-shadow: var(--elev-2); }
 .alt-sheet-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; }
 .alt-sheet-desc { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
-.alt-sheet-inner > :last-child:not(.alt-sheet-footer) { margin-bottom: var(--space-6); }
+.alt-sheet-inner > :last-child:not(.alt-sheet-footer) { margin-bottom: var(--alt-inset-page); }
 .alt-sheet-footer {
-  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--space-2); margin: auto calc(-1 * var(--space-6)) 0;
-  padding: var(--space-4) var(--space-6) var(--space-6); background: var(--surface-overlay);
+  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; gap: var(--space-2); margin: auto calc(-1 * var(--alt-inset-page)) 0;
+  padding: var(--space-4) var(--alt-inset-page) var(--alt-inset-page); background: var(--surface-overlay);
 }
 .alt-sheet-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; pointer-events: none; box-shadow: var(--lip-bottom); opacity: 0; transition: opacity var(--dur-travel-2) var(--ease-rise); }
 .alt-sheet[data-bottom] .alt-sheet-footer::before { opacity: 1; }
@@ -1491,9 +3027,12 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-step-desc { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
 .alt-step[role="button"] { cursor: pointer; }
 .alt-step[role="button"][data-state="done"] { --wall: 0px; }
-.alt-step[role="button"][data-state="done"]:hover, .alt-step[role="button"][data-state="done"]:focus-visible {
+.alt-step[role="button"][data-state="done"]:focus-visible {
   --wall: var(--wall-1); --st-ring: var(--alt-ring); --st-cast: var(--alt-cast); background: color-mix(in oklab, var(--surface-raised) 60%, transparent);
 }
+@media (hover: hover) { .alt-step[role="button"][data-state="done"]:hover {
+  --wall: var(--wall-1); --st-ring: var(--alt-ring); --st-cast: var(--alt-cast); background: color-mix(in oklab, var(--surface-raised) 60%, transparent);
+} }
 .alt-step[role="button"][data-state="done"]:active { --wall: 0px; transition-duration: var(--dur-press); transition-timing-function: ease-out; }
 .alt-step[role="button"]:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-stepper[data-orientation="vertical"] { flex-direction: column; align-items: stretch; flex-wrap: nowrap; padding: 4px 0 0; }
@@ -1511,17 +3050,31 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
    level 3, tilted, over a slot that opens as a well. Cells can't share one shadow, so each row's height is drawn as a
    single slab by its first cell, as wide as the table (--alt-row-w, measured). ── */
 .alt-data-table { min-width: 0; }
-.alt-table-tools { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; margin-bottom: var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink); }
-.alt-table-selection { display: inline-flex; align-items: center; gap: var(--space-2); --alt-from-y: 4px; animation: alt-emerge var(--dur-travel-1) var(--ease-rise); }
+.alt-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 36px; margin-bottom: var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-table-selection { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); --alt-from-y: 4px; animation: alt-emerge var(--dur-travel-1) var(--ease-rise); }
 .alt-table-selection .alt-badge[data-variant="count"] { position: static; }
-.alt-table-tools-end { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; }
-.alt-table-wrap { position: relative; isolation: isolate; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
+.alt-table-tools-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); min-width: 0; max-width: 100%; margin-left: auto; }
+/* At narrow widths the toolbar wraps (WCAG 1.4.10 Reflow): a field in it may shrink rather than push the row off the page. */
+.alt-table-tools-end > .alt-input { flex: 0 1 auto; min-width: 0; }
+.alt-table-tools-end > .alt-input input { min-width: 0; }
+.alt-table-wrap { position: relative; isolation: isolate; overflow: auto; scrollbar-width: thin; outline: none; }
 .alt-table-wrap:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: var(--radius-md); }
 .alt-table-wrap::after { content: ""; position: sticky; z-index: 4; bottom: 0; display: block; height: 24px; margin-top: -24px; pointer-events: none; box-shadow: var(--lip-bottom); opacity: 0; transition: opacity var(--dur-travel-2) var(--ease-rise); }
 .alt-table-wrap[data-bottom]::after { opacity: 1; }
 .alt-table { --alt-row-w: 100%; width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--font-sans); color: var(--ink); font-variant-numeric: tabular-nums; }
 .alt-th, .alt-td { padding: 10px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); transition: border-color var(--dur-travel-1); }
 .alt-th[data-align="end"], .alt-td[data-align="end"] { text-align: right; }
+/* Narrow (#260): columns keep a readable width and the table scrolls inside its frame. A header never wraps, and a
+   cell's min-width (from minWidth, or 6rem when the table is narrow) stops a column being squeezed to "Des…". */
+.alt-table-wrap { container-type: inline-size; }
+@container (max-width: 480px) { .alt-table { table-layout: auto; width: max-content; min-width: 100%; } .alt-th, .alt-td:not([colspan]) { min-width: 6rem; } .alt-table :is(.alt-td-check, .alt-td-expand, .alt-td-grip, .alt-td-edit, .alt-th-check, .alt-th-expand, .alt-th-grip, .alt-th-edit, .alt-th:empty) { min-width: 0; } }
+/* A sticky column stays put over a flush 1px edge, on the ground surface (no shadow: it isn't live). */
+.alt-table .alt-th[data-sticky], .alt-table .alt-td[data-sticky] { position: sticky; left: 0; z-index: 2; background: var(--surface-ground); box-shadow: inset -1px 0 0 var(--line); }
+.alt-table .alt-th[data-sticky] { z-index: 5; }
+/* The edge with more columns fades; the start edge only without a sticky column, which already marks it. */
+.alt-table-wrap[data-more-end] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+.alt-table-wrap[data-more-start]:not(:has([data-sticky])) { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
+.alt-table-wrap[data-more-start][data-more-end]:not(:has([data-sticky])) { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
 .alt-th { position: sticky; top: 0; z-index: 3; padding-block: 9px; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); white-space: nowrap; }
 .alt-td:first-child { position: relative; }
 .alt-tr { --row-bg: transparent; --row-sh: var(--elev-0); transition: transform var(--dur-travel-1) var(--ease-rise), color var(--dur-travel-2) var(--ease-rise); }
@@ -1533,17 +3086,18 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-table-wrap[data-top] .alt-table-head .alt-tr { --row-bg: var(--surface-raised); --row-sh: var(--elev-2); }
 .alt-table-wrap[data-top] .alt-th { border-bottom-color: transparent; }
 .alt-tr[data-interactive] { cursor: pointer; }
-.alt-tr[data-interactive]:not([data-row-held]):hover, .alt-tr[data-interactive]:not([data-row-held]):has(.alt-table-rowbtn:focus-visible) { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+.alt-tr[data-interactive]:not([data-row-held]):has(.alt-table-rowbtn:focus-visible) { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-tr[data-interactive]:not([data-row-held]):hover { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
 .alt-tr[data-interactive]:not([data-row-held]):active { --row-sh: var(--elev-0); transform: none; transition-duration: var(--dur-press); }
 .alt-tr[data-row-relevance="match"] { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); }
 .alt-tr[data-row-relevance="miss"] { --row-bg: var(--surface-well); --row-sh: var(--well); color: var(--ink-muted); }
 .alt-tr[data-selected] { --row-bg: var(--accent-soft); --row-sh: var(--elev-1); }
-.alt-tr[data-selected][data-interactive]:not([data-row-held]):hover { --row-bg: var(--accent-soft); --row-sh: var(--elev-2); }
+@media (hover: hover) { .alt-tr[data-selected][data-interactive]:not([data-row-held]):hover { --row-bg: var(--accent-soft); --row-sh: var(--elev-2); } }
 .alt-tr[data-row-held] { position: relative; z-index: 5; --row-bg: var(--surface-floating); --row-sh: var(--elev-3); rotate: calc(-0.35deg * var(--alt-travel)); transition: none; }
 .alt-tr[data-row-held][data-selected] { --row-bg: color-mix(in oklab, var(--accent-soft) 70%, var(--surface-floating)); }
 .alt-tr[data-row-held]:not([data-following]) { transform: translateY(calc(-3px * var(--alt-travel))); }
-.alt-tr:is([data-interactive]:hover, [data-selected], [data-row-relevance], [data-row-held]) > .alt-td,
 .alt-tr:has(+ .alt-tr:is([data-selected], [data-row-relevance], [data-row-held])) > .alt-td { border-bottom-color: transparent; }
+@media (hover: hover) { .alt-tr:is([data-interactive]:hover, [data-selected], [data-row-relevance], [data-row-held]) > .alt-td { border-bottom-color: transparent; } }
 .alt-tr[data-row-settle="a"] > .alt-td:first-child::before { animation: alt-afterglow-a var(--dur-settle) linear var(--alt-rise-delay, 0ms) backwards; }
 .alt-tr[data-row-settle="b"] > .alt-td:first-child::before { animation: alt-afterglow-b var(--dur-settle) linear var(--alt-rise-delay, 0ms) backwards; }
 .alt-table[data-dragging] .alt-tr:not([data-following]) { transition: transform var(--dur-travel-2) var(--ease-settle); }
@@ -1552,11 +3106,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   background: none; color: inherit; font: inherit; cursor: pointer; box-shadow: var(--elev-0);
   transition: background-color var(--dur-travel-1), color var(--dur-travel-1), box-shadow var(--dur-travel-1) var(--ease-rise);
 }
-.alt-table-sort:hover { color: var(--ink); background: var(--surface-raised); box-shadow: var(--elev-1); }
+@media (hover: hover) { .alt-table-sort:hover { color: var(--ink); background: var(--surface-raised); box-shadow: var(--elev-1); } }
 .alt-table-sort:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-table-sort:not([data-sort="none"]) { color: var(--ink); }
 .alt-table-sort-icon { opacity: 0; transition: transform var(--dur-travel-2) var(--ease-settle), opacity var(--dur-travel-1); }
-.alt-table-sort:hover .alt-table-sort-icon { opacity: 0.45; }
+@media (hover: hover) { .alt-table-sort:hover .alt-table-sort-icon { opacity: 0.45; } }
 .alt-table-sort:not([data-sort="none"]) .alt-table-sort-icon { opacity: 1; }
 .alt-table-sort[data-sort="descending"] .alt-table-sort-icon { transform: rotate(180deg); }
 .alt-th[data-align="end"] .alt-table-sort { flex-direction: row-reverse; }
@@ -1564,7 +3118,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-th-check .alt-check, .alt-td-check .alt-check { display: inline-flex; vertical-align: middle; }
 .alt-th-grip, .alt-td-grip { width: 24px; padding-right: 0; }
 .alt-table-grip { display: inline-grid; place-items: center; width: 24px; height: 28px; margin: -4px 0 -4px -6px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--ink-muted); cursor: grab; touch-action: none; }
-.alt-table-grip:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); }
+@media (hover: hover) { .alt-table-grip:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); } }
 .alt-table-grip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
 .alt-tr[data-row-held] .alt-table-grip { cursor: grabbing; color: var(--ink); }
 .alt-table-slot { position: absolute; z-index: -2; left: 0; width: var(--alt-row-w); border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well); outline: 1.5px dashed var(--line-control); outline-offset: -3px; pointer-events: none; transition: top var(--dur-travel-2) var(--ease-settle); }
@@ -1600,11 +3154,11 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-board-empty { display: grid; place-items: center; min-height: 72px; border-radius: var(--radius-md); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
 .alt-board-card {
   position: relative; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1);
-  color: var(--ink); font: 500 14px/20px var(--font-sans); cursor: grab; user-select: none; outline: none;
+  color: var(--ink); font: 500 14px/20px var(--font-sans); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; outline: none;
   transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1), transform var(--dur-travel-2) var(--ease-settle),
     rotate var(--dur-travel-2) var(--ease-settle), scale var(--dur-travel-2) var(--ease-settle);
 }
-.alt-board-card:hover:not([data-carried]):not([data-held]) { box-shadow: var(--elev-2); }
+@media (hover: hover) { .alt-board-card:hover:not([data-carried]):not([data-held]) { box-shadow: var(--elev-2); } }
 .alt-board-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
 .alt-board-card[data-carried] { z-index: 10; cursor: grabbing; background: var(--surface-floating); box-shadow: var(--elev-3); rotate: calc(-1.2deg * var(--alt-travel)); scale: calc(1 + 0.015 * var(--alt-travel)); }
 .alt-board-card[data-carried]:not([data-following]) { transform: translateY(calc(-3px * var(--alt-travel))); }
@@ -1632,6 +3186,565 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
 .alt-menu[data-ephemeral][data-state="open"] .alt-menu-item:not([data-predicted]) { transition: opacity var(--dur-onset) linear, transform var(--dur-onset) var(--ease-rise); transition-delay: 0ms; }
 .alt-menu[data-ephemeral][data-state="open"] .alt-menu-item[data-predicted], .alt-menu[data-ephemeral][data-state="open"] .alt-menu-label { transition-duration: var(--dur-travel-1); transition-delay: 0ms; }
 
+/* ════════════════════ Charts ════════════════════ */
+
+/* ── ChartContainer: the frame every chart shares. A chart is the record drawn as a shape, so everything in the frame
+   lies flush on whatever it sits on, the page or a Card's surface-raised: no level, no shadow, no wall, no sheen. Amounts
+   are length and position on a flat plot standing on the ground line (1px ink-muted, as under Stepper and Drilldown),
+   never height. Gridlines are decorative line hairlines, horizontal only; tick labels are caption text in ink-muted
+   with tabular figures. Marks wear data-* fills and strokes and nothing else. On resize it lays out again without
+   animating. ── */
+.alt-chart { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); color: var(--ink); }
+.alt-chart-head { display: flex; flex-direction: column; gap: 2px; }
+.alt-chart-title { font: 600 15px/22px var(--font-sans); color: var(--ink); }
+.alt-chart-desc { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
+/* A takeaway (#187) is the chart's heading: text-heading in ink. The title over it becomes a label, caption-sized
+   ink-muted, so the chart stays named. A changed takeaway cross-fades in place, like a Stat's value. */
+.alt-chart-takeaway { display: grid; margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
+.alt-chart-head[data-takeaway] .alt-chart-title { font: 500 12.5px/17px var(--font-sans); letter-spacing: 0.005em; color: var(--ink-muted); }
+.alt-chart-head[data-takeaway] .alt-chart-desc { margin-top: 2px; }
+.alt-chart-takeaway-text { grid-area: 1 / 1; }
+.alt-chart-takeaway-text[data-in] { animation: alt-stat-in var(--dur-travel-2) var(--ease-glide) both; }
+.alt-chart-takeaway-text[data-out] { animation: alt-stat-out var(--dur-travel-2) var(--ease-glide) both; }
+.alt-chart-plot { position: relative; width: 100%; min-width: 0; }
+.alt-chart-svg { position: absolute; inset: 0; display: block; overflow: visible; }
+.alt-chart-grid line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-ground { stroke: var(--ink-muted); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-floor { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
+/* Axis text is a caption in weight 400 (#193): the frame's words rank below the marks, the ground line and references.
+   Inline y labels sit just above their gridlines on a halo of the plot's colour, as reference labels do. */
+.alt-chart-axis text { fill: var(--ink-muted); font: 400 13px/19px var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-chart-axis[data-inline] text { stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
+.alt-chart-summary { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
+/* ── BarChart: amounts as lengths standing on the ground line. Bars are the record, so they're flat data-* fills,
+   square where they meet the ground and rounded (radius-xs) only at the data end; neighbours and stacked segments
+   are parted by a real gap, never a shadow. A negative bar hangs below the ground line: that's position, not depth,
+   so it has no inner wall and doesn't read as an opening. A bar never lifts, on hover or anywhere else. Value labels
+   are selective and wear ink, never a series colour. ── */
+.alt-bar-label { fill: var(--ink); font: 500 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; }
+@media (forced-colors: active) { .alt-bar-label { fill: CanvasText; } }
+
+/* ── Not yet the record (#67): a period still being counted or a forecast. A pending write hovers, but a pending mark
+   can't, since lifting a bar misstates it; so it's drawn with pattern and a word instead. Bars are hatched at 45° in
+   their colour on the plot's own, with no solid fill (a projection also keeps its outline); lines are dashed from the
+   last settled point and their points hollow; areas are hatched. The record ends at a 1px line-control rule named in
+   words ("Today"). A partial period that completes cross-fades from hatch to solid over dur-travel-3: it's been pressed
+   into the record. An uncertainty band is a flat, low-opacity fill: no gradient, no error bars. ── */
+.alt-bar-mark, .alt-bar-pending { transition: fill-opacity var(--dur-travel-3) var(--ease-glide), stroke-opacity var(--dur-travel-3) var(--ease-glide), fill var(--dur-travel-1) var(--ease-glide); }
+/* Focus (#188): what a chart isn't about is drawn in data-context, one flat neutral, and its words recede to ink-muted.
+   A change of focus cross-fades fills and strokes in place over dur-travel-1; under reduced motion it changes at once.
+   Under forced colours context is GrayText at full strength, apart from a filter's misses, which also recede to 35%. */
+.alt-line-stroke, .alt-area-fill, .alt-area-line, .alt-scatter-dot { transition: fill var(--dur-travel-1) var(--ease-glide), stroke var(--dur-travel-1) var(--ease-glide); }
+.alt-line-label[data-context], .alt-area-label[data-context] { fill: var(--ink-muted); }
+/* The record before (#189): both settled, both flat on the ground, the earlier one quieter. On bars, a 2px ink tick
+   across the bar at the earlier value, 4px past it each side (the bullet graph's comparative measure); on lines, a
+   1.5px solid ink-muted trace under the series, named at its end. Never dotted: under forced colours dots mean pending. */
+.alt-bar-compare { stroke: var(--ink); stroke-width: 2; shape-rendering: crispEdges; }
+/* A reading set down (#190): the readout lands on the record as a plate, from level 3 to the ground over dur-travel-3 on
+   ease-settle, then takes the afterglow once. A pin icon tells it from an annotation; its ghost remove button lifts
+   when pointed at, as a ghost button does. Two pins say their difference under the x axis on a line-control bracket. */
+.alt-chart-note[data-pin] { display: inline-flex; align-items: center; gap: 4px; padding-right: 2px;
+  animation: alt-pin-land var(--dur-travel-3) var(--ease-settle) both, alt-pin-glow var(--dur-settle) var(--ease-decay) var(--dur-travel-3) both; }
+.alt-chart-pin-icon { flex: none; color: var(--ink-muted); }
+.alt-chart-pin-remove { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--ink-muted); cursor: pointer; box-shadow: var(--elev-0); transition: background-color var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1) var(--ease-glide), transform var(--dur-travel-1) var(--ease-glide); }
+.alt-chart-pin-remove:focus-visible { background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-chart-pin-remove:hover { background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink); transform: translateY(calc(-1px * var(--alt-travel))); } }
+@keyframes alt-pin-land { from { box-shadow: var(--elev-3); transform: translateY(calc(-6px * var(--alt-travel))); } }
+@keyframes alt-pin-glow { 0%, 12% { outline: 2px solid var(--accent-soft); outline-offset: 1px; } 100% { outline: 2px solid transparent; outline-offset: 1px; } }
+.alt-chart-pins-strip path { stroke: var(--line-control); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-pins-strip text { fill: var(--ink); font: 500 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; }
+@media (forced-colors: active) { .alt-chart-pins-strip path { stroke: CanvasText; } .alt-chart-pins-strip text { fill: CanvasText; } .alt-chart-pin-icon, .alt-chart-pin-remove { color: CanvasText; } }
+.alt-line-compare { stroke: var(--ink-muted); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
+@media (forced-colors: active) { .alt-bar-compare { stroke: CanvasText; } .alt-line-compare { stroke: CanvasText; stroke-width: 1; } }
+/* ── DotPlot (#192): values where zero isn't part of the story, as position, never height. The values are the record,
+   so dots lie flat on the ground as a ScatterChart's do: at least 8px, a marker per series, ringed 2px in the plot's
+   colour. With no zero there's no ground line, only the plot's foot. Each row has a 1px line guide from its label. A
+   spread is a flat band of the series colour at 16% behind the dot, never error bars. A dumbbell joins a hollow "from"
+   dot to a filled "to" dot with a 2px ink-muted link. A mark that acts gets a 2px ink outline, never a lift. ── */
+.alt-dot-guide { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-dot-range { fill-opacity: 0.16; }
+.alt-dot-link { stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
+.alt-dot-hover { fill: none; stroke: var(--ink); stroke-width: 2; }
+.alt-chart-plot[data-interactive] .alt-dot-row { cursor: pointer; }
+@media (prefers-contrast: more) { .alt-dot-guide { stroke: var(--line-control); } }
+[data-contrast="more"] .alt-dot-guide { stroke: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-dot-guide { stroke: GrayText; }
+  .alt-dot-range { fill: GrayText; fill-opacity: 0.4; }
+  .alt-dot-link, .alt-dot-hover { stroke: CanvasText; }
+  .alt-dot-mark[data-from] { stroke: CanvasText; fill: Canvas; }
+}
+/* Changed since a snapshot (#191): a changed bar's old value is the comparison's tick; a changed line point's old place
+   is a small hollow ink-muted ring. The caption says how many changed, in a switch that recedes the rest. */
+.alt-line-since { fill: var(--alt-chart-bg); stroke: var(--ink-muted); stroke-width: 1.5; }
+.alt-chart-since { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); border-radius: var(--radius-sm); font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
+@media (forced-colors: active) { .alt-line-since { stroke: CanvasText; fill: Canvas; } }
+.alt-legend-key[data-context] { color: var(--ink-muted); }
+@media (prefers-reduced-motion: reduce) { .alt-bar-mark, .alt-line-stroke, .alt-area-fill, .alt-area-line, .alt-scatter-dot { transition-property: fill-opacity, stroke-opacity; } }
+[data-motion="reduced"] .alt-bar-mark, [data-motion="reduced"] .alt-line-stroke, [data-motion="reduced"] .alt-area-fill, [data-motion="reduced"] .alt-area-line, [data-motion="reduced"] .alt-scatter-dot { transition-property: fill-opacity, stroke-opacity; }
+.alt-chart-boundary line { stroke: var(--line-control); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-boundary-label { fill: var(--ink-muted); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 500 12.5px/17px var(--font-sans); }
+.alt-line-hollow { fill: var(--alt-chart-bg); stroke-width: 2; }
+.alt-bar-label-status { fill: var(--ink-muted); }
+.alt-chart-readout-note { margin-left: 6px; color: var(--ink); font-weight: 600; }
+.alt-chart-readout-note::before { content: "· "; }
+/* ── Filtered in place (#70): misses recede to 35% and keep their place and their colour slot, so positions survive
+   the filter. Relevance elsewhere raises matches, but marks can't rise, so in a chart it's spent as contrast only.
+   Misses cross-fade over dur-travel-1. The frame says how many match, in words. ── */
+.alt-chart-rel { transition: opacity var(--dur-travel-1) var(--ease-glide); }
+.alt-bar-label-miss { fill: var(--ink-muted); }
+.alt-chart-count { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+@media (forced-colors: active) {
+  .alt-chart-rel[data-miss] { opacity: 1 !important; }
+  .alt-chart-rel[data-miss] .alt-bar-mark:not([fill^="url"]), .alt-chart-rel[data-miss] .alt-area-fill:not([fill^="url"]) { fill: GrayText; }
+  .alt-chart-rel[data-miss] [fill^="url"] { opacity: 0.45; }
+  .alt-chart-rel[data-miss] .alt-line-stroke, .alt-chart-rel[data-miss] .alt-area-line { stroke: GrayText; }
+  .alt-chart-rel[data-miss] circle, .alt-chart-rel[data-miss] rect, .alt-chart-rel[data-miss] path:not([class]) { fill: GrayText; stroke: GrayText; }
+  .alt-bar-label-miss { fill: GrayText; }
+  .alt-chart-count { color: CanvasText; }
+}
+/* ── ChartBrush (#74): an overview you slide a window along. The overview is an opening, the series flat in a trench;
+   the window is a raised lens over it (level 1, accent rim, clear face), level 2 on hover and 3 while held, whose
+   grips are a range Slider's thumbs, whose date bubbles hang below, clear of the plot's axis. The series is a flat line spanning its own low to high, as a Sparkline's is;
+   outside the window it recedes to 35%. ── */
+.alt-brush { display: flex; flex-direction: column; gap: 6px; }
+.alt-brush-slide { position: relative; touch-action: none; user-select: none; cursor: pointer; padding: 2px 0; }
+.alt-brush-track { position: relative; border-radius: var(--radius-sm); background: var(--surface-trench); box-shadow: var(--trench); overflow: hidden; }
+.alt-brush-svg { display: block; }
+.alt-brush-line { stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
+.alt-brush-lens {
+  position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 2px solid var(--accent); border-radius: var(--radius-sm);
+  box-shadow: var(--elev-1); cursor: grab;
+  transition: left var(--dur-travel-1) var(--ease-glide), width var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1) var(--ease-rise);
+}
+@media (hover: hover) { .alt-brush-lens:hover { box-shadow: var(--elev-2); } }
+.alt-brush-lens[data-grabbed] { box-shadow: var(--elev-3); cursor: grabbing; }
+.alt-brush-lens:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-brush-grip {
+  position: absolute; top: 50%; width: 10px; height: 24px; translate: -50% -50%; box-sizing: border-box;
+  border: 2px solid var(--accent); border-radius: var(--radius-full); background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1);
+  cursor: ew-resize; transition: left var(--dur-travel-1) var(--ease-glide), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
+}
+@media (hover: hover) { .alt-brush-grip:hover { box-shadow: var(--elev-2); } }
+.alt-brush-grip[data-grabbed] { box-shadow: var(--elev-3); transform: scale(calc(1 + 0.12 * var(--alt-travel))); }
+.alt-brush-grip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-brush[data-dragging] :is(.alt-brush-lens, .alt-brush-grip) { transition-property: box-shadow, transform; }
+.alt-brush-bubble {
+  position: absolute; left: 50%; top: calc(100% + 8px); translate: -50% 0; padding: 3px 8px; text-align: center;
+  border-radius: var(--radius-sm); background: var(--surface-floating); box-shadow: var(--elev-1); color: var(--ink);
+  font: 500 12px/16px var(--font-mono); white-space: nowrap; pointer-events: none; z-index: 1;
+  opacity: 0; transform: translateY(calc(-4px * var(--alt-travel))) scale(calc(1 - 0.1 * var(--alt-travel))); transform-origin: 50% 0;
+  transition: opacity var(--dur-travel-1) var(--ease-sink), transform var(--dur-travel-1) var(--ease-sink);
+}
+.alt-brush-grip[data-edge="start"] .alt-brush-bubble { left: 50%; translate: 0 0; transform-origin: 0 0; }
+.alt-brush-grip[data-edge="end"] .alt-brush-bubble { left: auto; right: 50%; translate: 0 0; transform-origin: 100% 0; }
+.alt-brush-grip[data-grabbed] .alt-brush-bubble, .alt-brush-grip:focus-visible .alt-brush-bubble {
+  opacity: 1; transform: none; box-shadow: var(--elev-3);
+  transition: opacity var(--dur-travel-3) var(--ease-rise), transform var(--dur-travel-3) var(--ease-rise), box-shadow var(--dur-travel-3) var(--ease-rise);
+}
+.alt-brush-range { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+[data-contrast="more"] .alt-brush-lens { border-color: var(--ink); }
+@media (forced-colors: active) {
+  .alt-brush-track { border: 2px dashed CanvasText; }
+  .alt-brush-lens { border: 1px solid Highlight; box-shadow: none; }
+  .alt-brush-lens[data-grabbed] { border-width: 2px; }
+  .alt-brush-grip { border: 1px solid CanvasText; }
+  .alt-brush-line { forced-color-adjust: none; stroke: CanvasText; }
+  .alt-brush-range { color: CanvasText; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .alt-brush-lens, .alt-brush-grip { transition-property: box-shadow; }
+}
+
+
+/* ── Marks you can select or drill into (#69). Hover is a promise: only where a click does something does the plot take
+   a pointer cursor and outline the record under it in 2px ink (appearing over dur-travel-1), and the readout names the
+   action. A mark can't lift without misstating its value, so in a chart the hover cue is the outline, the cursor and
+   the readout; height stays with the readout. The selection keeps its colour and the rest recede, as a filter's do. ── */
+.alt-chart-plot[data-interactive] { cursor: pointer; }
+.alt-chart-hover path, .alt-chart-hover circle { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; animation: alt-chart-hover-in var(--dur-travel-1) var(--ease-glide); }
+@keyframes alt-chart-hover-in { from { stroke-opacity: 0; } }
+.alt-chart-readout-action { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--ink-muted); font-weight: 500; }
+.alt-chart-selection { display: flex; align-items: center; gap: var(--space-2); min-height: 0; font: 500 13px/19px var(--font-sans); color: var(--ink); }
+.alt-chart-selection:empty { display: none; }
+@media (forced-colors: active) {
+  .alt-chart-hover path, .alt-chart-hover circle { stroke: Highlight; }
+  .alt-chart-readout-action { border-top-color: CanvasText; }
+}
+
+/* ── Live charts (#66): show the new state at once and leave a fading trace (phosphor). A new or changed mark carries
+   a 2px ink outline (an outline, not height or a glow) that holds for the first second and decays over dur-settle on
+   ease-decay, with its value beside it for that first second. A whole refresh is one change: the "Updated" caption
+   takes a ground-level tint instead. Afterglows keep under reduced motion: they're tint, not travel. ── */
+.alt-chart-glow path, .alt-chart-glow circle { fill: none; stroke: var(--ink); stroke-width: 2; animation: alt-chart-glow var(--dur-settle) linear var(--alt-rise-delay, 0ms) both; }
+.alt-chart-glow text { fill: var(--ink); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 600 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; animation: alt-chart-glow-label var(--dur-settle) linear var(--alt-rise-delay, 0ms) both; }
+@keyframes alt-chart-glow { 0%, 12% { stroke-opacity: 1; animation-timing-function: var(--ease-decay); } 100% { stroke-opacity: 0; } }
+@keyframes alt-chart-glow-label { 0%, 12% { opacity: 1; } 14%, 100% { opacity: 0; } }
+.alt-chart-live { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
+.alt-chart-updated { padding: 1px 6px; margin-left: -6px; border-radius: var(--radius-sm); font: 400 13px/19px var(--font-sans); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-chart-updated[data-settle]::before { animation-name: alt-chart-tint-a; }
+.alt-chart-updated[data-settle="b"]::before { animation-name: alt-chart-tint-b; }
+@keyframes alt-chart-tint-a { 0%, 12% { background-color: var(--accent-soft); animation-timing-function: var(--ease-decay); } 100% { background-color: transparent; } }
+@keyframes alt-chart-tint-b { 0%, 12% { background-color: var(--accent-soft); animation-timing-function: var(--ease-decay); } 100% { background-color: transparent; } }
+@media (forced-colors: active) {
+  .alt-chart-glow path, .alt-chart-glow circle { stroke: Highlight; }
+  .alt-chart-glow text { fill: CanvasText; stroke: Canvas; }
+  .alt-chart-updated[data-settle]::before { border: 1px solid Highlight; }
+}
+
+/* ── References and annotations (#68): what a chart is read against. A reference line is 1px ink-muted and solid,
+   because dashes mean projected; a status threshold wears caution or critical, with its icon in the label. A band is a
+   flat line-coloured fill (a decorative token, so it isn't read as data or as an opening), under the marks. Labels are
+   caption text on a halo of the plot's colour, kept apart in rows. An annotation is a Badge plate flush at the top of
+   the plot (a label is part of the record) with a 1px line-control leader to its x; one that acts lifts one level. ── */
+.alt-chart-ref { stroke: var(--ink-muted); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-ref[data-tone="caution"] { stroke: var(--caution); }
+.alt-chart-ref[data-tone="critical"] { stroke: var(--critical); }
+.alt-chart-ref-label text { fill: var(--ink-muted); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 500 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-chart-ref-label[data-tone] text { fill: var(--ink); }
+.alt-chart-ref-icon { color: var(--critical); }
+.alt-chart-ref-label[data-tone="caution"] .alt-chart-ref-icon { color: var(--caution); }
+.alt-chart-note-leader { stroke: var(--line-control); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-note { position: absolute; z-index: 1; justify-content: center; box-sizing: border-box; }
+button.alt-chart-note { border: 0; cursor: pointer; box-shadow: var(--elev-0); transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { button.alt-chart-note:hover { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+button.alt-chart-note:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+@media (forced-colors: active) {
+  .alt-bar-pending { stroke: CanvasText; stroke-dasharray: 2 2; }
+  .alt-chart-ref, .alt-chart-ref[data-tone] { stroke: CanvasText; }
+  .alt-chart-ref-label text, .alt-chart-ref-label[data-tone] text { fill: CanvasText; stroke: Canvas; }
+  .alt-chart-ref-icon, .alt-chart-ref-label[data-tone="caution"] .alt-chart-ref-icon { color: CanvasText; }
+  .alt-chart-note-leader { stroke: CanvasText; }
+  .alt-chart-note, button.alt-chart-note { border: 1px solid CanvasText; }
+  button.alt-chart-note:focus-visible { outline-color: Highlight; }
+  .alt-chart-boundary line { stroke: CanvasText; }
+  .alt-chart-boundary-label { fill: CanvasText; stroke: Canvas; }
+  .alt-line-hollow { fill: Canvas; }
+  .alt-bar-label-status { fill: CanvasText; }
+}
+
+/* ── The table view: the same record as a sortable DataTable, behind a segmented Chart | Table control (one raised
+   pill gliding between two views of one record). Both views sit in one box, so switching doesn't move the page: the
+   table scrolls inside the chart's size, and the two cross-fade over dur-travel-2 rather than slide. The unchosen
+   view stays mounted but inert. ── */
+.alt-chart-tabs { display: contents; }
+.alt-chart-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
+.alt-chart-bar .alt-tabs-list { flex: none; }
+.alt-chart-views { display: grid; min-width: 0; }
+.alt-chart-view { grid-area: 1 / 1; min-width: 0; transition: opacity var(--dur-travel-2) var(--ease-glide); }
+.alt-chart-view.alt-tabs-content { animation: none; }
+.alt-chart-view[data-state="inactive"] { opacity: 0; pointer-events: none; }
+.alt-chart-view[data-view="table"] { position: relative; }
+.alt-chart-tablebox { position: absolute; inset: 0; overflow: auto; }
+
+/* ── Loading, refetch and nothing: an imprint in the chart's shape while data is on its way (surface-well bars or a
+   band pressed into the page, no labels, after dur-grace like every imprint); data lands by fading in place, never
+   rising, because a rising bar would leave the ground line. A refetch keeps the chart and, after dur-grace, drops its
+   marks to half strength. Nothing to show is an opening: an EmptyState in the plot's own box, with no axes. ── */
+.alt-chart-imprint { display: flex; align-items: flex-end; gap: 8%; padding: 8px 4% 26px; box-sizing: border-box; }
+.alt-chart-imprint > .alt-skeleton { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
+.alt-chart-imprint[data-shape="line"] { padding: 0; }
+.alt-chart-imprint-line { fill: none; stroke: var(--surface-well); stroke-width: 10px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.alt-chart-await[data-phase="reveal"] > .alt-await-face { --alt-from-y: 0px; }
+.alt-chart-plot[data-refreshing] .alt-chart-marks { opacity: 0.5; transition: opacity var(--dur-travel-1) var(--ease-glide) var(--dur-grace); }
+.alt-chart-marks { transition: opacity var(--dur-travel-1) var(--ease-glide); }
+.alt-chart-empty { position: absolute; inset: 0; display: grid; }
+.alt-chart-empty > .alt-empty { margin: 0; justify-content: center; }
+@media (forced-colors: active) { .alt-chart-imprint-line { stroke: GrayText; stroke-dasharray: 6 4; stroke-width: 2px; } .alt-chart-imprint ~ .alt-chart-legend rect { fill: CanvasText; } }
+
+/* ── The keyboard path: a layer of focusable nodes over the aria-hidden SVG, one level at a time (summary, series,
+   points) with a roving tabindex, so the plot is one Tab stop. A node is invisible until focused; then it's the focus
+   ring itself, 2px accent-ink at a 2px offset, round on a point. It moves instantly, because it's focus, and the
+   readout opens on the focused point. Nodes take no pointer events, so the plot's hover still works through them. ── */
+.alt-chart-nav { position: absolute; inset: 0; pointer-events: none; }
+.alt-chart-node { position: absolute; box-sizing: border-box; border-radius: var(--radius-sm); outline: none; }
+.alt-chart-node[data-level="point"] { border-radius: var(--radius-full); }
+.alt-chart-node:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+@media (forced-colors: active) { .alt-chart-node:focus-visible { outline-color: Highlight; } }
+
+/* ── LineChart: change over time as 2px strokes lying on the plot, round joins, no fill, no glow. A missing value is a
+   gap in the line, never bridged. The last point wears a marker and each line is named at its end in ink, so the
+   lines are their own legend. ── */
+.alt-line-label { fill: var(--ink); font: 500 12.5px/17px var(--font-sans); }
+@media (forced-colors: active) { .alt-line-label { fill: CanvasText; } }
+.alt-line-active { stroke: var(--alt-chart-bg); stroke-width: 2; paint-order: stroke; }
+
+/* ── Sparkline: a word-sized trend, the record in the row it sits in. It lies flush on the ground like every mark: a
+   1.5px stroke (2px under contrast="more"), round joins, no fill under it, no axes, no gridlines, no readout, and a 4px
+   marker on the last point. Bars are flat fills parted by 1px, standing on zero. A normal range is a flat band of
+   line behind the marks. Its height is one line of the text around it (1lh) and it sits on that text's baseline. The
+   colour is context (ink-muted) unless it's the series (data-1) or a status. While its data loads it's an imprint one
+   line high and its own width. ── */
+.alt-sparkline { --spark: var(--ink-muted); display: inline-block; vertical-align: middle; height: 1.4em; height: 1lh; min-width: 0; }
+.alt-sparkline > svg { display: block; overflow: visible; }
+.alt-sparkline[data-tone="data"] { --spark: var(--data-1); }
+.alt-sparkline[data-tone="positive"] { --spark: var(--positive); }
+.alt-sparkline[data-tone="caution"] { --spark: var(--caution); }
+.alt-sparkline[data-tone="critical"] { --spark: var(--critical); }
+.alt-sparkline-line { fill: none; stroke: var(--spark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
+.alt-sparkline-end, .alt-sparkline-bar { fill: var(--spark); }
+.alt-sparkline-band { fill: var(--line); }
+.alt-sparkline-imprint { display: inline-block; vertical-align: middle; height: 0.6em; border-radius: var(--radius-xs); }
+@media (prefers-contrast: more) { .alt-sparkline-line { stroke-width: 2; } }
+[data-contrast="more"] .alt-sparkline-line { stroke-width: 2; }
+@media (forced-colors: active) {
+  .alt-sparkline, .alt-sparkline[data-tone] { --spark: CanvasText; }
+  .alt-sparkline-band { fill: none; stroke: GrayText; stroke-dasharray: 2 2; }
+}
+
+/* ── Stat: a headline number. A number is the record, so a stat lies flush on what it sits on (a Card's surface, or
+   the page): no level, no shadow. The label is text-label in ink-muted; the value is text-title (text-display when
+   size="hero", once per view) in ink, weight 600, tabular figures. A change with no stated good direction is
+   ink-muted text with an arrow; with one, it's a Badge plate whose lamp is positive or critical, so the word, the
+   arrow and the colour each say it. A changed value cross-fades (dur-travel-2) and the stat takes the afterglow; it
+   never counts up. While the value loads it's an imprint of a number's width under a label already in place. ── */
+.alt-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; border-radius: var(--radius-md); }
+.alt-stat-label { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
+.alt-stat-main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
+.alt-stat-value { display: inline-grid; font: 600 28px/34px var(--font-sans); letter-spacing: -0.018em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.alt-stat[data-size="hero"] .alt-stat-value { font: 600 44px/48px var(--font-sans); letter-spacing: -0.025em; }
+.alt-stat-text { grid-area: 1 / 1; }
+.alt-stat-text[data-in] { animation: alt-stat-in var(--dur-travel-2) var(--ease-glide) both; }
+.alt-stat-text[data-out] { animation: alt-stat-out var(--dur-travel-2) var(--ease-glide) both; }
+@keyframes alt-stat-in { from { opacity: 0; } }
+@keyframes alt-stat-out { to { opacity: 0; } }
+.alt-stat-trend { display: inline-flex; align-items: center; min-width: 0; font: 400 15px/23px var(--font-sans); }
+.alt-stat-imprint { display: inline-block; vertical-align: middle; width: 4.5em; height: 0.6em; border-radius: var(--radius-xs); }
+.alt-stat-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font: 500 12.5px/17px var(--font-sans); letter-spacing: 0.005em; color: var(--ink-muted); }
+.alt-stat-change { gap: 4px; font-variant-numeric: tabular-nums; }
+.alt-stat-change[data-neutral] { display: inline-flex; align-items: center; color: var(--ink-muted); }
+.alt-stat-arrow { display: block; flex: none; }
+.alt-stat-help { flex-basis: 100%; font-weight: 400; }
+.alt-stat-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--space-5) var(--space-6); }
+@media (forced-colors: active) { .alt-stat-change.alt-badge { border: 1px solid CanvasText; } }
+
+/* ── Meter: where a reading sits in a known range. A reading is the record, so unlike Progress (a task under way, live,
+   a raised fill rising out of a trench) a meter lies on the ground: a flush track of line with the reading drawn
+   across it as flat ink, data-1 by default, no shadow, wall or sheen. Thresholds are 1px ink-muted notches standing
+   at the track's rim. Past `high` the fill turns caution and past the limit critical, cross-fading, and the state is
+   said in a Badge whose lamp relights. Segments are flat data-* fills parted by 2px, with a legend of their values.
+   The fill glides on ease-glide (dur-travel-3); under reduced motion it changes in place. ── */
+.alt-meter { --meter-fill: var(--data-1); --meter-bg: var(--surface-ground); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+.alt-card .alt-meter { --meter-bg: var(--surface-raised); }
+.alt-meter[data-state="high"] { --meter-fill: var(--caution); }
+.alt-meter[data-state="critical"] { --meter-fill: var(--critical); }
+.alt-meter-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-meter-value { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
+.alt-meter-state { order: 3; }
+.alt-meter-track { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--line); }
+.alt-meter-fill {
+  position: absolute; top: 0; bottom: 0; border-radius: inherit; background: var(--meter-fill);
+  transition: width calc(var(--dur-travel-3) * var(--alt-travel)) var(--ease-glide), left calc(var(--dur-travel-3) * var(--alt-travel)) var(--ease-glide), background-color var(--dur-travel-3) var(--ease-glide);
+}
+/* A segment after the first is parted from the one before by a 2px cut in the surface's own colour, and only the ends are rounded. */
+.alt-meter-fill[data-slot] { border-radius: 0; }
+.alt-meter-fill[data-slot] + .alt-meter-fill[data-slot] { border-left: 2px solid var(--meter-bg); background-clip: padding-box; }
+.alt-meter-fill[data-slot]:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
+.alt-meter-notch { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -0.5px; background: var(--ink-muted); }
+.alt-meter-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-meter-legend-value { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-meter-imprint { height: 8px; border-radius: var(--radius-full); }
+@media (prefers-contrast: more) { .alt-meter-track { box-shadow: inset 0 0 0 1px var(--ink); } .alt-meter-notch { background: var(--ink); } }
+[data-contrast="more"] .alt-meter-track { box-shadow: inset 0 0 0 1px var(--ink); }
+[data-contrast="more"] .alt-meter-notch { background: var(--ink); }
+@media (forced-colors: active) {
+  .alt-meter-track { background: Canvas; border: 1px solid CanvasText; }
+  .alt-meter-fill { background: Highlight; forced-color-adjust: none; }
+  .alt-meter-fill[data-slot] { background: Highlight !important; }
+  .alt-meter-fill[data-slot] + .alt-meter-fill[data-slot] { border-left-color: Canvas; background-clip: border-box; }
+  .alt-meter-notch { background: CanvasText; }
+  .alt-meter-legend rect { fill: CanvasText; }
+}
+
+/* ── BarList: a ranked list whose rows are their own bars. Rows are the record, flush on the ground with line
+   dividers, like a table's. Each row's bar is a flat tint of data-1 (22%, so ink holds 4.5:1 over it) behind its label,
+   its length the row's value against the largest; the label wraps rather than being cut, and the value sits at the
+   row's end in tabular figures. A row that does something (a link or a button) lifts one level when pointed at, as
+   Table's rows do, and its bar stays flat on it; a row that doesn't never moves. "Other" wears data-other. Filtering
+   in place raises matches and sinks misses. Re-ranked rows are carried to their places (FLIP, dur-travel-3,
+   ease-glide), and bars glide to their new lengths; under reduced motion both change in place. ── */
+.alt-barlist-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
+.alt-barlist { align-self: stretch; margin: 0; padding: 0; list-style: none; font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-barlist-row { --bar: color-mix(in oklab, var(--data-1) 22%, transparent); position: relative; border-bottom: 1px solid var(--line); }
+.alt-barlist-row:last-child { border-bottom-color: transparent; }
+.alt-barlist-row[data-other] { --bar: color-mix(in oklab, var(--data-other) 22%, transparent); }
+.alt-barlist-item {
+  position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 36px;
+  margin: 0; padding: 3px var(--space-2) 3px 0; box-sizing: border-box; border: 0; border-radius: var(--radius-sm);
+  background: transparent; font: inherit; color: inherit; text-align: start; text-decoration: none;
+}
+button.alt-barlist-item, a.alt-barlist-item {
+  cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: var(--elev-0);
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise);
+}
+@media (hover: hover) { button.alt-barlist-item:hover, a.alt-barlist-item:hover { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+button.alt-barlist-item:active, a.alt-barlist-item:active { box-shadow: var(--elev-0); transform: none; transition-duration: var(--dur-press); }
+button.alt-barlist-item:focus-visible, a.alt-barlist-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-barlist-zone { position: relative; isolation: isolate; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 30px; padding: 4px var(--space-2); }
+.alt-barlist-bar {
+  position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; border-radius: var(--radius-xs); background: var(--bar);
+  transition: width calc(var(--dur-travel-3) * var(--alt-travel)) var(--ease-glide);
+}
+.alt-barlist-name { flex: 1; min-width: 0; overflow-wrap: break-word; }
+.alt-barlist-value { flex: none; font-variant-numeric: tabular-nums; }
+.alt-barlist-share { flex: none; min-width: 3.2em; text-align: end; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
+.alt-barlist-row[data-other] .alt-barlist-name { color: var(--ink-muted); }
+.alt-barlist-imprint { display: block; height: 0.6em; margin: 14px 0; }
+.alt-barlist-row[data-relevance="miss"] .alt-barlist-name, .alt-barlist-row[data-relevance="miss"] .alt-barlist-value { color: var(--ink-muted); }
+@media (prefers-contrast: more) { .alt-barlist-bar { box-shadow: inset 0 0 0 1px var(--ink); } }
+[data-contrast="more"] .alt-barlist-bar { box-shadow: inset 0 0 0 1px var(--ink); }
+@media (forced-colors: active) {
+  .alt-barlist-bar { forced-color-adjust: none; background: color-mix(in srgb, Highlight 25%, Canvas); border: 1px solid Highlight; }
+  button.alt-barlist-item:hover, a.alt-barlist-item:hover { outline: 1px solid CanvasText; }
+  .alt-barlist-row { border-bottom-color: GrayText; }
+  .alt-barlist-row[data-relevance="match"] { outline: 1px solid CanvasText; outline-offset: -1px; }
+  .alt-barlist-row[data-relevance="miss"] { border-bottom-style: dashed; }
+}
+
+/* ── AreaChart: a total over time and what it's made of. Bands are the record: flat data-* fills stacked on the ground
+   line in config order, parted by a 2px line in the plot's own colour (the gap a stacked bar has), with a 2px top line
+   on the topmost. A single area is a flat data-1 fill at reduced opacity under its 2px line. No gradient fill, ever:
+   the only face gradient in Altitude is the sheen, and it means "press it". Bands are named inside themselves in ink,
+   on a halo of the plot's colour, where they're tall enough. ── */
+.alt-area-sep { stroke: var(--alt-chart-bg); stroke-width: 2; }
+.alt-area-label { fill: var(--ink); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 500 12.5px/17px var(--font-sans); pointer-events: none; }
+.alt-chart-imprint[data-shape="area"] { padding: 0; }
+.alt-chart-imprint-area { fill: var(--surface-well); }
+@media (prefers-contrast: more) { .alt-area-sep { stroke: var(--ink); stroke-width: 3; } }
+[data-contrast="more"] .alt-area-sep { stroke: var(--ink); stroke-width: 3; }
+@media (forced-colors: active) {
+  .alt-area-sep { stroke: Canvas; }
+  .alt-area-label { fill: CanvasText; stroke: Canvas; }
+  .alt-chart-imprint-area { fill: none; stroke: GrayText; stroke-dasharray: 6 4; stroke-width: 2px; vector-effect: non-scaling-stroke; }
+}
+
+/* ── Heatmap (#61): a value per cell across two dimensions. Cells are the record, so they lie flat on the plot: a
+   data-seq step (data-div around a midpoint for polarity), parted by a 2px gap of the plot's own colour and rounded
+   at radius-xs (less on small cells), never raised, shaded or glowing. "No data" isn't an opening, since it isn't
+   waiting for anything: no fill and a 1px line outline. Rows and columns are named in ink-muted like an axis; the
+   legend is the steps as swatches with their ranges in ink. With no crosshair in a grid, the cell under the readout
+   wears a 2px ink outline, which never lifts it. A value change cross-fades the cell's fill; under reduced motion it's
+   instant. Under forced colours and print each step adds a pattern density (none, sparse dots, dense dots, hatching,
+   crosshatch), and contrast="more" gives every cell a 1px ink edge. ── */
+.alt-heat-labels text { fill: var(--ink-muted); font: 500 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-heat-legend text { fill: var(--ink); font: 500 12.5px/17px var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-heat-fill { transition: fill var(--dur-travel-1) var(--ease-glide); }
+.alt-heat-none { fill: none; stroke: var(--line); stroke-width: 1; }
+.alt-heat-pattern { pointer-events: none; }
+.alt-heat-active { fill: none; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
+.alt-chart-node[data-shape="cell"] { border-radius: var(--radius-xs); }
+.alt-chart-imprint[data-shape="grid"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 8px 0 26px; }
+.alt-chart-imprint[data-shape="grid"] > .alt-skeleton { border-radius: var(--radius-xs); }
+@media (prefers-reduced-motion: reduce) { .alt-heat-fill { transition: none; } }
+[data-motion="reduced"] .alt-heat-fill { transition: none; }
+@media (prefers-contrast: more) { .alt-heat-none { stroke: var(--line-control); } }
+[data-contrast="more"] .alt-heat-none { stroke: var(--line-control); }
+@media (forced-colors: active) {
+  .alt-heat-labels text, .alt-heat-legend text { fill: CanvasText; }
+  .alt-heat-none { stroke: GrayText; }
+  .alt-heat-active { stroke: Highlight; }
+}
+
+/* ── ScatterChart (#62): two measures per record. Dots are the record, so they lie on the plot: at least 8px, a data-*
+   fill and a marker shape per group (circle, square, triangle), with a 2px ring of the plot's own colour so dots that
+   overlap stay apart, and never a shadow, sheen or glow. At most three groups, the palette's first three slots, since
+   any two dots can be neighbours. The dot under the readout is drawn again on top, so an overlapped dot is seen whole;
+   it doesn't lift. Labelled outliers are ink on a halo with a 1px ink-muted leader; the trend is a 1px ink-muted
+   line, named in words. Under forced colours the shapes carry the groups; contrast="more" rings each dot in 1px ink. ── */
+.alt-scatter-label text { fill: var(--ink); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 500 12.5px/17px var(--font-sans); }
+.alt-scatter-label line { stroke: var(--ink-muted); stroke-width: 1; }
+.alt-scatter-trend line { stroke: var(--ink-muted); stroke-width: 1; }
+.alt-scatter-axis-name text { fill: var(--ink-muted); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 600 12.5px/17px var(--font-sans); }
+.alt-scatter-trend text { fill: var(--ink-muted); stroke: var(--alt-chart-bg); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; font: 500 12.5px/17px var(--font-sans); }
+.alt-chart-imprint[data-shape="dots"] { display: block; position: relative; padding: 0; }
+.alt-chart-imprint-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--radius-full); }
+@media (forced-colors: active) {
+  .alt-scatter-label text, .alt-scatter-trend text, .alt-scatter-axis-name text { fill: CanvasText; stroke: Canvas; }
+  .alt-scatter-label line, .alt-scatter-trend line { stroke: CanvasText; }
+}
+
+/* ── ChartTooltip: reading exact values. The crosshair is a mark on the ground (1px line-control, snapped to the nearest
+   x); the readout is live, a level-3 floating surface like Tooltip. It rises 4px once as its shadow grows from elev-1
+   to elev-3, then steps between x positions with no easing (it follows the data, not each pixel of the pointer), flips
+   sides so it never covers the point, and leaves in 70% of the time. It shares Tooltip's 400ms warm-up. It's
+   aria-hidden: the same values are in each datum's name, the keyboard path and the table view. ── */
+.alt-chart { --alt-chart-bg: var(--surface-ground); }
+.alt-card .alt-chart { --alt-chart-bg: var(--surface-raised); }
+.alt-chart-plot { touch-action: pan-y; }
+.alt-chart-crosshair { stroke: var(--line-control); stroke-width: 1; shape-rendering: crispEdges; }
+.alt-chart-readout {
+  position: absolute; z-index: var(--z-floating); pointer-events: none; display: grid; gap: 3px; min-width: 112px;
+  padding: 8px 10px; border-radius: var(--radius-lg); background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--ink);
+  font: 400 12.5px/17px var(--font-sans); white-space: nowrap;
+  transition: opacity var(--dur-travel-3) var(--ease-rise), transform var(--dur-travel-3) var(--ease-rise), box-shadow var(--dur-travel-3) var(--ease-rise);
+}
+.alt-chart-readout[data-state="closed"] {
+  opacity: 0; box-shadow: var(--elev-1); transform: translateY(calc(4px * var(--alt-travel)));
+  transition-timing-function: var(--ease-sink); transition-duration: calc(var(--dur-travel-3) * 0.7);
+}
+.alt-chart-readout[data-warm] { transition-duration: var(--dur-travel-1); }
+.alt-chart-readout[data-side="right"] { translate: 14px 0; }
+.alt-chart-readout[data-side="left"] { translate: calc(-100% - 14px) 0; }
+.alt-chart-readout[data-side="below"] { translate: 0 14px; }
+.alt-chart-readout[data-side="above"] { translate: 0 calc(-100% - 14px); }
+.alt-chart-readout-label { font-weight: 500; color: var(--ink-muted); margin-bottom: 1px; }
+.alt-chart-readout-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; }
+.alt-chart-readout-key { display: block; }
+.alt-chart-readout-value { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
+.alt-chart-readout-name { color: var(--ink-muted); }
+/* ── ChartLegend: names the series. A legend that only labels is settled: keys flush on the ground, a swatch in the
+   series colour and its name in ink. A legend that hides and shows series is a row of choices, so each key is built
+   like a Checkbox: a ghost button that lifts one level when pointed at (clicking it does something), holding a trench
+   that the series colour pours into while the series is shown and drains out of when it's hidden. The checked fill
+   is the series colour, not accent, because the swatch is the key. Hidden series keep their colour slots. ── */
+.alt-chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-chart-legend[data-toggle] { gap: var(--space-1); margin-left: calc(-1 * var(--space-2)); }
+.alt-legend-key { display: inline-flex; align-items: center; gap: var(--space-2); }
+.alt-legend-mark { display: block; flex: none; }
+button.alt-legend-key {
+  appearance: none; border: 0; margin: 0; padding: 5px var(--space-2); border-radius: var(--radius-sm); font: inherit; color: var(--ink);
+  background: transparent; box-shadow: var(--elev-0); cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise), color var(--dur-travel-1);
+}
+button.alt-legend-key:focus-visible { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { button.alt-legend-key:hover:not([aria-disabled]) { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+button.alt-legend-key:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+button.alt-legend-key[aria-pressed="false"] { color: var(--ink-muted); }
+button.alt-legend-key[aria-disabled] { cursor: default; }
+.alt-legend-swatch {
+  display: inline-grid; place-items: center; width: 22px; height: 16px; box-sizing: border-box; border-radius: 5px;
+  border: 1px solid var(--line-control); background: var(--surface-trench); box-shadow: var(--trench);
+}
+.alt-legend-swatch .alt-legend-mark {
+  opacity: 0; clip-path: circle(0% at 50% 50%);
+  transition: clip-path var(--dur-travel-1) var(--ease-sink), opacity var(--dur-travel-1) var(--ease-sink);
+}
+.alt-legend-swatch[data-shown] { border-color: transparent; }
+.alt-legend-swatch .alt-legend-mark { width: 22px; height: 16px; }
+.alt-legend-swatch[data-shown] .alt-legend-mark { opacity: 1; clip-path: circle(75% at 50% 50%); transition-timing-function: var(--ease-rise); }
+@media (prefers-contrast: more) { .alt-legend-swatch { box-shadow: inset 0 1px 0 0 var(--ink); } }
+[data-contrast="more"] .alt-legend-swatch { box-shadow: inset 0 1px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-chart-readout { border: 2px solid CanvasText; }
+  button.alt-legend-key:hover:not([aria-disabled]) { border: 1px solid CanvasText; padding: 4px 7px; }
+  .alt-legend-swatch { border-color: CanvasText; }
+  .alt-legend-swatch:not([data-shown]) { border-style: dashed; }
+  .alt-chart-crosshair { stroke: CanvasText; }
+  .alt-line-active { stroke: Canvas; }
+}
+@media (prefers-contrast: more) {
+  .alt-chart-grid line, .alt-chart-floor { stroke: var(--line-control); }
+  .alt-chart-ground { stroke: var(--ink); }
+}
+[data-contrast="more"] .alt-chart-grid line, [data-contrast="more"] .alt-chart-floor { stroke: var(--line-control); }
+[data-contrast="more"] .alt-chart-ground { stroke: var(--ink); }
+@media (forced-colors: active) {
+  .alt-chart-axis text { fill: CanvasText; }
+  .alt-chart-axis[data-inline] text { stroke: Canvas; }
+  .alt-chart-grid line, .alt-chart-floor { stroke: GrayText; }
+  .alt-chart-ground { stroke: CanvasText; }
+}
+
 /* ════════════════════ Accessible elevation ════════════════════ */
 
 /* High contrast: elevation becomes a hard slab whose thickness is the height (1 level = 1px more),
@@ -1649,7 +3762,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
     --line: var(--line-control); --alt-sheen: none;
     --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
   }
-  .alt-btn, .alt-kbd, .alt-crumbs button { --wall-c: var(--ink); }
+  .alt-btn, .alt-kbd, .alt-crumbs .alt-crumb-link { --wall-c: var(--ink); }
   .alt-empty { border-style: solid; }
 }
 [data-contrast="more"], [data-contrast="more"] [data-theme] {
@@ -1664,7 +3777,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   --line: var(--line-control); --alt-sheen: none;
   --alt-ring: var(--ink); --alt-cast: transparent; --alt-cast-deep: transparent; --alt-wall-in: var(--ink-muted); --alt-lip: transparent; --alt-rim-held: var(--ink);
 }
-[data-contrast="more"] .alt-btn, [data-contrast="more"] .alt-kbd, [data-contrast="more"] .alt-crumbs button { --wall-c: var(--ink); }
+[data-contrast="more"] .alt-btn, [data-contrast="more"] .alt-kbd, [data-contrast="more"] .alt-crumbs .alt-crumb-link { --wall-c: var(--ink); }
 [data-contrast="more"] .alt-empty { border-style: solid; }
 
 /* Forced colours (Windows High Contrast) drop every box-shadow, which erases elevation entirely
@@ -1688,7 +3801,7 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   .alt-tabs[data-variant="folder"] .alt-tabs-trigger[aria-selected="true"] { border: 2px solid CanvasText; border-bottom: 0; }
   .alt-tabs[data-variant="folder"] > .alt-tabs-content { border: 1px solid CanvasText; }
   .alt-acc-item[data-state="open"] { border: 1px solid CanvasText; } .alt-acc-content { border: 1px dashed CanvasText; }
-  .alt-crumbs button { border: 1px solid CanvasText; } .alt-crumbs li[data-current] button { border-width: 2px; }
+  .alt-crumbs .alt-crumb-link { border: 1px solid CanvasText; } .alt-crumbs li[data-current] .alt-crumb-link { border-width: 2px; }
   .alt-cmd { border: 4px double CanvasText; } .alt-cmd-hl { display: none; } .alt-cmd-item[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
   .alt-sheet { border: 2px solid CanvasText; } .alt-sheet-pull { border: 1px dashed CanvasText; }
   .alt-input[data-filled]:not([data-invalid]) { border-style: solid !important; }
@@ -1697,5 +3810,769 @@ body { margin: 0; background: var(--surface-ground); color: var(--ink); font-fam
   .alt-board-card { border: 1px solid CanvasText; } .alt-board-card[data-carried] { border-width: 2px; } .alt-board[data-carrying] .alt-board-col { border: 1px dashed CanvasText; } .alt-board[data-carrying] .alt-board-col[data-over] { border: 2px dashed Highlight; } .alt-board-slot { outline-color: CanvasText; }
   .alt-tr[data-row-held] > .alt-td { border-block: 2px solid CanvasText; } .alt-table-slot { outline-color: CanvasText; } .alt-table-wrap[data-top] .alt-th { border-bottom: 1px solid CanvasText; }
   .alt-step[data-state="current"] { border: 1px solid CanvasText; } .alt-step[data-state="upcoming"] { border: 1px dashed CanvasText; } .alt-step-mark { border: 1px solid CanvasText; } .alt-step-line[data-done] { background: Highlight; }
-  .alt-avatar[data-status="offline"] .alt-avatar-face { border: 1px dashed CanvasText; } .alt-avatar[data-status="active"] .alt-avatar-face { border: 2px solid CanvasText; }
+  .alt-avatar:is([data-status="offline"], [data-more]) .alt-avatar-face { border-color: GrayText; } .alt-avatar[data-live] .alt-avatar-face { border-width: 2px; }
+  .alt-avatar[data-status="active"] .alt-avatar-lamp { forced-color-adjust: none; background: CanvasText; }
+}
+
+/* Stationary dialogs keep their context still; the dimming scrim and modal tier remain. */
+.alt-dialog-root[data-background="stationary"] > .alt-scrim,
+[data-modal-stationary] > .alt-scrim {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* ── InlineEdit: one value edited where it sits. The value's text lives in a slot with the control's own inset (12px
+   and a transparent 1px border, as .alt-input and .alt-select-trigger have) and font, at the control's height, and the
+   line reaches 13px past its column on each side so the text itself lines up with the page. Opening puts the control in
+   the same slot: the text stays exactly where it was and only the well (floor, walls, border) fades in around it. Save
+   and Cancel take the Edit button's place on the same row; notes under the line (an error, the key hint, "Choose to
+   save") arrive as the line's glide reaches them. The status is announced, never shown. ── */
+.alt-inline-edit { min-width: 0; }
+.alt-inline-edit-surface { min-width: 0; border-radius: var(--radius-md); }
+.alt-inline-edit-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; margin-inline: -13px; }
+.alt-inline-edit-slot, .alt-inline-edit-slot-box { flex: 0 1 auto; min-width: 0; }
+.alt-inline-edit[data-state]:not([data-state="read"]) .alt-inline-edit-slot-box { flex: 1 1 14rem; }
+.alt-inline-edit-slot {
+  position: relative; box-sizing: border-box; display: flex; align-items: center; max-width: 100%; min-height: max(40px, calc(1lh + 18px));
+  padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-md);
+}
+.alt-inline-edit-value { overflow-wrap: anywhere; min-width: 0; }
+.alt-inline-edit-slot-box > .alt-input:not([data-multiline]) { font: inherit; height: max(40px, calc(1lh + 18px)); }
+.alt-inline-edit-slot-box .alt-input input, .alt-inline-edit-slot-box .alt-input textarea, .alt-inline-edit-slot-box .alt-select-trigger { font: inherit; }
+.alt-inline-edit-slot-box .alt-select > .alt-input { font: inherit; height: max(40px, calc(1lh + 18px)); }
+.alt-inline-edit .alt-input, .alt-inline-edit .alt-select { min-width: 0; }
+.alt-inline-edit .alt-input input { width: 100%; min-width: 0; }
+/* The well opens under text that stays put: only its floor, walls and border fade in. */
+.alt-inline-edit-slot-box > .alt-input, .alt-inline-edit-slot-box .alt-select > .alt-input, .alt-edit-region-form[data-layout="in-place"] :is(.alt-input, .alt-select > .alt-input) { animation: alt-well-open var(--dur-travel-2) var(--ease-sink); }
+@keyframes alt-well-open { from { background-color: transparent; border-color: transparent; box-shadow: none; } }
+.alt-inline-edit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-inline-start: auto; }
+.alt-inline-edit-actions .alt-btn { max-width: 100%; white-space: normal; }
+.alt-inline-edit-note { margin: var(--space-2) 0 0; }
+.alt-inline-edit-current { color: var(--ink-muted); font: 400 12.5px/17px var(--font-sans); overflow-wrap: anywhere; }
+/* Multiline: the slot takes the textarea's inset and the whole width; Edit, then Save and Cancel, sit under it on the right. */
+.alt-inline-edit[data-multiline] .alt-inline-edit-slot, .alt-inline-edit[data-multiline] .alt-inline-edit-slot-box { flex: 1 1 100%; }
+.alt-inline-edit[data-multiline] .alt-inline-edit-slot { align-items: flex-start; min-height: 0; padding: var(--space-2) 12px; }
+.alt-inline-edit[data-multiline] .alt-inline-edit-value { white-space: pre-wrap; }
+.alt-inline-edit[data-multiline] textarea { flex: none; min-height: 0; resize: none; }
+.alt-inline-edit[data-multiline] .alt-inline-edit-actions { margin-inline-start: 0; justify-content: flex-start; }
+.alt-inline-edit-keys { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
+
+/* The value as its own button ('pencil', 'field'): the same slot, so its text sits where it always does. */
+.alt-inline-edit-slot-button { width: auto; margin: 0; font: inherit; color: inherit; text-align: start; background: transparent; cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), border-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+.alt-inline-edit-slot-button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-inline-edit-slot-button:disabled { cursor: default; }
+.alt-inline-edit-slot-button[data-empty] .alt-inline-edit-value { color: var(--ink-muted); }
+/* Pencil: a faint well tint and the pencil, whose space is always reserved, so showing it moves nothing. Touch screens
+   can't hover, so they always show it. */
+.alt-inline-edit-pencil { flex: none; margin-inline-start: var(--space-2); color: var(--ink-muted); opacity: 0; transition: opacity var(--dur-travel-1) var(--ease-rise); }
+@media (hover: hover) { .alt-inline-edit[data-trigger="pencil"] .alt-inline-edit-slot-button:hover:not(:disabled) { background: var(--surface-well); } }
+.alt-inline-edit-slot-button:focus-visible .alt-inline-edit-pencil { opacity: 1; }
+@media (hover: hover) { .alt-inline-edit-slot-button:hover:not(:disabled) .alt-inline-edit-pencil { opacity: 1; } }
+@media (hover: none) { .alt-inline-edit-pencil { opacity: 1; } }
+/* Field: pointing at the value draws the filled input's border and floor around it, so the click only focuses it. */
+.alt-inline-edit[data-trigger="field"] .alt-inline-edit-slot-button { cursor: text; }
+@media (hover: hover) { .alt-inline-edit[data-trigger="field"] .alt-inline-edit-slot-button:is(:hover, :focus-visible):not(:disabled) { background: var(--surface-raised); border-color: var(--line-control); box-shadow: 0 1px 0 0 var(--alt-lip); } }
+.alt-inline-edit[data-trigger="field"] .alt-inline-edit-slot-button:focus-visible { outline-color: var(--alt-rim-held); }
+/* It was drawn on hover already, so the real field doesn't fade in again. */
+.alt-inline-edit[data-trigger="field"] .alt-inline-edit-slot-box > .alt-input { animation: none; }
+/* hint="seam": at rest, a hairline groove is scored under the value where its well will open (a line-control cut with
+   the well's light lip beneath it), so a value whose trigger only shows on hover still reads as something to point at.
+   The field trigger's border replaces it on hover. Flat in contrast="more" and forced colours. */
+.alt-inline-edit [data-hint="seam"]::after {
+  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; border-radius: 1px; pointer-events: none;
+  background: color-mix(in oklab, var(--line-control) 40%, transparent); box-shadow: 0 1px 0 0 var(--alt-lip);
+  transition: opacity var(--dur-travel-1) var(--ease-rise);
+}
+.alt-inline-edit[data-trigger="pencil"] [data-hint="seam"]::after { right: calc(12px + 15px + var(--space-2)); }
+.alt-inline-edit-plate[data-hint="seam"] { position: relative; }
+.alt-inline-edit-plate[data-hint="seam"]::after { left: 12px; right: 12px; bottom: 3px; }
+@media (hover: hover) { .alt-inline-edit[data-trigger="field"] [data-hint="seam"]:is(:hover, :focus-visible)::after { opacity: 0; } }
+.alt-inline-edit [data-hint="seam"][data-empty]::after { display: none; }
+[data-contrast="more"] .alt-inline-edit [data-hint="seam"]::after { background: var(--line-control); box-shadow: none; }
+@media (forced-colors: active) {
+  .alt-inline-edit [data-hint="seam"]::after { background: none; border-bottom: 1px dashed CanvasText; box-shadow: none; }
+  .alt-inline-edit[data-trigger="field"] .alt-inline-edit-slot-button:is(:hover, :focus-visible) { border-color: CanvasText; }
+}
+
+/* ── EditRegion: several fields of one record, saved together. Read mode is the record on the ground (level 0) with a
+   visible Edit button. Editing lifts the region into a static raised card (level 1, no hover lift: it's being worked
+   in, not offered), as an Accordion lid lifts over its compartment; the fields inside are openings (Input, Select…),
+   and Surface's own signals carry the write: pending hovers after dur-grace, a known failure drops to a trench, an
+   accepted save settles back to the ground with one afterglow for the whole region. The height glides open; the
+   fields fade in together, never staggered. Forced colours and contrast="more" come from Surface and the controls. ── */
+.alt-edit-region { min-width: 0; --alt-er-pad: var(--space-3); }
+.alt-edit-region[data-layout="in-place"] { --alt-er-pad: calc(var(--space-2) + 13px); }
+/* The editor's padding and border are there in read mode too, under a matching negative margin, so lifting it changes
+   colour and shadow but never moves the record; the afterglow fills that padded box, so it never sits against the text. */
+.alt-edit-region-surface { min-width: 0; margin: calc(-1 * (var(--space-2) + 1px)) calc(-1 * (var(--alt-er-pad) + 1px)); padding: var(--space-2) var(--alt-er-pad); border: 1px solid transparent; border-radius: var(--radius-lg);
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), border-color var(--dur-travel-1) var(--ease-rise); }
+.alt-edit-region:not([data-state="read"]) .alt-edit-region-surface { border-color: var(--line-control); }
+.alt-edit-region-view { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
+.alt-edit-region-values { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
+.alt-edit-region-form { display: grid; gap: var(--space-4); min-width: 0; --alt-from-y: 0px; animation: alt-emerge var(--dur-travel-1) var(--ease-rise); }
+.alt-edit-region-fields { display: grid; gap: var(--space-3); min-width: 0; }
+.alt-edit-region-fields .alt-field, .alt-edit-region-fields .alt-input, .alt-edit-region-fields .alt-select { min-width: 0; }
+.alt-edit-region-fields .alt-input input { width: 100%; min-width: 0; }
+.alt-edit-region-chrome { display: grid; gap: var(--space-3); }
+.alt-edit-region-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
+.alt-edit-region-actions .alt-btn { max-width: 100%; white-space: normal; }
+/* In place: the form doesn't fade in as a whole; fields whose text lands where their value was simply appear, the
+   rest fade in, and nothing slides. Controls take the value's font and reach 13px past their column on each side. */
+.alt-edit-region-form[data-layout="in-place"] { gap: var(--space-3); animation: none; }
+/* The fields sit where the values were, so the form adds no spacing of its own between them. */
+.alt-edit-region-form[data-layout="in-place"] .alt-edit-region-fields { display: block; }
+.alt-edit-region-form[data-layout="in-place"] :is(.alt-input:not(.alt-select > .alt-input), .alt-select) { margin-inline: -13px; }
+.alt-edit-region-form[data-layout="in-place"] :is(.alt-input input, .alt-input textarea, .alt-select-trigger, .alt-switch-row) { font: inherit; }
+.alt-edit-region-form[data-layout="in-place"] .alt-input:not([data-multiline]), .alt-edit-region-form[data-layout="in-place"] .alt-select > .alt-input { font: inherit; height: max(40px, calc(1lh + 18px)); }
+.alt-edit-region-form[data-layout="in-place"] .alt-edit-region-actions { justify-content: flex-end; }
+/* The record around the fields names them (a row's label, the value's place), so a Field's label is announced, not shown. */
+.alt-edit-region-form[data-layout="in-place"] .alt-field { gap: var(--space-1); }
+.alt-edit-region-form[data-layout="in-place"] .alt-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+/* A reserved value already has its control's height and inset, so in labelled rows Edit moves nothing. */
+.alt-edit-region-value[data-reserve] { box-sizing: border-box; display: flex; align-items: center; min-height: max(40px, calc(1lh + 18px)); margin-inline: -13px; padding: 0 12px; border: 1px solid transparent; overflow-wrap: anywhere; }
+/* ── TagInput: a set of short values in one field. The field is an opening, built like Input; once it holds a tag its
+   floor rises flush (filled). Each tag is a label, part of the record, so it's a Badge plate stamped flush into the
+   floor, and stamped again (down 3px, settling) when it arrives. A first Backspace arms the last tag: it lifts one
+   level on a critical tint; a second lifts it off (up 8px, fading) and the gap closes. A tag waiting on onAdd or
+   onRemove hovers at level 2 after dur-grace; a rejected one drops to a trench with a critical rim. Suggestions are the
+   Combobox's list at level 3. ── */
+.alt-tag-input { position: relative; display: block; min-width: 0; }
+.alt-tag-input > .alt-input { height: auto; min-height: var(--size-field-md); flex-wrap: wrap; align-items: center; row-gap: 4px; padding-block: 5px; }
+.alt-tag-input > .alt-input[data-size="sm"] { min-height: var(--size-field-sm); padding-block: 3px; }
+.alt-tag-input > .alt-input > input { flex: 1 1 6ch; min-width: 6ch; height: 28px; }
+.alt-tag-input > .alt-input:not([data-filled]):not([data-invalid]):not([data-disabled]) { --w: 4px; --n: calc(var(--near) * var(--alt-travel)); background: var(--surface-well); }
+.alt-tag-list { display: contents; list-style: none; margin: 0; padding: 0; }
+.alt-tag {
+  --t-bg: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%);
+  position: relative; display: inline-flex; align-items: center; max-width: 100%; height: 24px; border-radius: var(--radius-sm);
+  background: var(--t-bg); color: var(--ink); font: 550 12.5px/1 var(--font-sans); vertical-align: middle;
+  box-shadow: inset 0 1px 1.5px color-mix(in oklab, var(--ink) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent), 0 1px 0 0 var(--alt-lip);
+  transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise);
+}
+.alt-tag-face { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 24ch; height: 100%; margin: 0; padding: 0 8px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
+.alt-tag-face:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-tag:has(.alt-tag-remove) .alt-tag-face { padding-right: 2px; }
+.alt-tag-remove { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), box-shadow var(--dur-travel-1); }
+@media (hover: hover) { .alt-tag-remove:hover { background: var(--surface-raised); color: var(--ink); box-shadow: var(--elev-1); } }
+.alt-tag[data-stamp] { animation: alt-stamp-a var(--dur-travel-2) var(--ease-settle); }
+.alt-tag[data-armed] { --t-bg: var(--critical-soft); background: var(--critical-soft); transform: translateY(calc(-1px * var(--alt-travel))); box-shadow: var(--elev-1), inset 0 0 0 1px color-mix(in oklab, var(--critical) 40%, transparent); }
+.alt-tag[data-status="pending"] { animation: alt-tag-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-tag-pending { to { background: var(--surface-lifted); box-shadow: var(--elev-2); transform: translateY(calc(-2px * var(--alt-travel))); } }
+.alt-tag[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-tag[data-leaving] { animation: alt-lifted-off 140ms var(--ease-rise) forwards; }
+.alt-tag-edit { display: inline-flex; }
+.alt-tag-edit-input { height: 24px; padding: 0 6px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-well); color: var(--ink); font: 500 12.5px/1 var(--font-sans); box-shadow: var(--well); outline: none; }
+.alt-tag-edit-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-tag-edit-input[aria-invalid] { background: var(--critical-soft); border-color: var(--critical); }
+.alt-tag-hint { display: block; margin-top: var(--space-1); color: var(--ink-muted); font: 400 12.5px/17px var(--font-sans); }
+.alt-tag-error { margin: var(--space-1) 0 0; }
+.alt-tag-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.alt-tag-standalone { margin: 2px; }
+[data-contrast="more"] .alt-tag[data-armed] { box-shadow: 0 2px 0 0 var(--ink), inset 0 0 0 1px var(--critical); }
+@media (forced-colors: active) {
+  .alt-tag { border: 1px solid CanvasText; } .alt-tag[data-armed] { border: 1px solid Highlight; outline: 1px solid Highlight; }
+  .alt-tag[data-status="pending"] { border-style: dotted; } .alt-tag[data-status="failed"] { border: 2px dashed CanvasText; }
+  .alt-tag-input > .alt-input:not([data-filled]) { border-style: dashed; }
+}
+
+/* ── DatePicker, DateRangePicker, Calendar: the field is an opening built like Select. Day, month and year are typed
+   segments; a partial date isn't a value, so the floor rises flush only once a whole, allowed date is held. The
+   calendar floats at level 3 like a Popover. Days are flush (at this density a trench per day would be noise); the
+   chosen day carries the one raised accent mark, the RadioGroup thumb's rule, and the mark is carried to a new day in
+   the same month. Hovering a day shows the mark's ghost (feedforward). A range is the Slider's build: a sunk
+   accent-soft track between two raised ends. A month change is lateral, so it cross-fades. Calendar on its own lies
+   on the page at level 0. ── */
+.alt-date-picker { position: relative; display: block; min-width: 0; }
+.alt-date-picker > .alt-input { gap: 0; padding-right: 4px; cursor: text; }
+.alt-date-segs { display: inline-flex; align-items: center; min-width: 0; font: 400 14px/20px var(--font-sans); font-variant-numeric: tabular-nums; transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle); }
+.alt-date-seg { padding: 1px 2px; border-radius: 3px; outline: none; caret-color: transparent; }
+.alt-date-seg[data-placeholder] { color: var(--ink-muted); }
+.alt-date-seg:focus { background: var(--accent); color: var(--on-accent); }
+.alt-date-sep { padding: 0 1px; color: var(--ink-muted); }
+.alt-date-to { padding: 0 var(--space-2); color: var(--ink-muted); transform: translateY(calc(var(--wd) * 0.5)); }
+.alt-date-button { display: inline-grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); margin-left: auto; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), box-shadow var(--dur-travel-1), color var(--dur-travel-1); }
+@media (hover: hover) { .alt-date-button:hover:not(:disabled) { background: var(--surface-raised); color: var(--ink); box-shadow: var(--elev-1); } }
+.alt-date-button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-date-picker > .alt-input:not([data-filled]):not([data-invalid]):not([data-disabled]) { --w: 4px; --n: calc(var(--near) * var(--alt-travel)); background: var(--surface-well); }
+.alt-date-picker > .alt-input:not([data-filled]):not([data-invalid]):not([data-disabled]):focus-within { --n: var(--alt-travel); }
+.alt-date-error { margin: var(--space-1) 0 0; }
+.alt-date-panel { padding: var(--space-3); min-width: 0; }
+.alt-date-step { margin: 0 0 var(--space-2); color: var(--ink-muted); font: 500 12.5px/17px var(--font-sans); }
+.alt-cal { width: max-content; color: var(--ink); font: 400 13.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
+.alt-cal-title { margin: 0; font: 600 14px/20px var(--font-sans); }
+.alt-cal-nav { display: inline-grid; place-items: center; width: var(--size-control-sm); height: var(--size-control-sm); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), box-shadow var(--dur-travel-1); }
+@media (hover: hover) { .alt-cal-nav:hover:not(:disabled) { background: var(--surface-raised); color: var(--ink); box-shadow: var(--elev-1); } }
+.alt-cal-nav:disabled { opacity: 0.4; cursor: default; }
+.alt-cal-nav:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+[dir="rtl"] .alt-cal-chevron { scale: -1 1; }
+.alt-cal-body { position: relative; }
+.alt-cal-grid { border-collapse: separate; border-spacing: 0 2px; animation: alt-cal-fade var(--dur-travel-1) ease-out; }
+@keyframes alt-cal-fade { from { opacity: 0; } }
+.alt-cal-grid th { width: 36px; height: 24px; padding: 0; color: var(--ink-muted); font: 500 11.5px/1 var(--font-sans); text-align: center; }
+.alt-cal-grid td { padding: 0; text-align: center; }
+.alt-cal-day {
+  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm);
+  background: none; color: inherit; font: inherit; cursor: pointer; transition: color var(--dur-travel-2) var(--ease-settle);
+}
+.alt-cal-day::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: var(--radius-sm); background: var(--accent); opacity: 0; scale: 0.8; transition: opacity var(--dur-travel-1) var(--ease-sink), scale var(--dur-travel-2) var(--ease-settle); }
+@media (hover: hover) { .alt-cal-day:hover:not([aria-disabled]):not([data-chosen])::before { opacity: 0.16; scale: 1; } }
+.alt-cal-day:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-cal-day[data-today]::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent-ink); }
+.alt-cal-day[aria-disabled] { color: var(--ink-faint); cursor: default; }
+.alt-cal-day[data-chosen] { color: var(--on-accent); font-weight: 600; }
+.alt-cal-day[data-chosen][data-today]::after { background: var(--on-accent); }
+.alt-cal-mark {
+  position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--radius-sm); pointer-events: none; opacity: 0;
+  background: var(--accent); background-image: var(--alt-sheen); box-shadow: var(--elev-1), inset 0 -2px 0 0 color-mix(in oklab, var(--accent-ink) 55%, transparent);
+  transition: transform var(--dur-travel-2) var(--ease-settle), width var(--dur-travel-2) var(--ease-settle), height var(--dur-travel-2) var(--ease-settle);
+}
+/* Presets: a column of rows beside the calendar (above it when narrow), built like Select's options at level 3 inside
+   the popover: one gliding highlight, the chosen row wearing the tick. A chosen preset fills the field with its name in
+   ink and its dates in ink-muted, and settles with the value's afterglow. */
+.alt-date-panes { display: flex; align-items: flex-start; gap: var(--space-3); }
+.alt-date-presets { position: relative; flex: none; min-width: 168px; padding: 0 var(--space-3) 0 0; border-right: 1px solid var(--line); }
+.alt-date-presets .alt-menu-hl { left: 0; right: var(--space-3); }
+.alt-date-presets:focus { outline: none; }
+.alt-date-custom { min-width: 0; }
+@media (max-width: 480px) {
+  .alt-date-panes { flex-direction: column; }
+  .alt-date-presets { align-self: stretch; padding: 0 0 var(--space-2); border-right: 0; border-bottom: 1px solid var(--line); }
+  .alt-date-presets .alt-menu-hl { right: 0; }
+}
+.alt-date-preset {
+  display: flex; align-items: baseline; gap: 0.35em; flex: 1; min-width: 0; margin: 0; padding: 1px 2px; border: 0; border-radius: 3px; background: none;
+  font: 400 14px/20px var(--font-sans); color: var(--ink); text-align: start; white-space: nowrap; cursor: pointer;
+  transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle);
+}
+.alt-date-preset:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-date-preset-name { flex: none; font-weight: 500; }
+.alt-date-preset-dates { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+.alt-date-preset[data-glow="a"] { animation: alt-value-a calc(var(--dur-settle) / 5) var(--ease-decay); }
+.alt-date-preset[data-glow="b"] { animation: alt-value-b calc(var(--dur-settle) / 5) var(--ease-decay); }
+@media (forced-colors: active) { .alt-date-presets { border-color: CanvasText; } .alt-date-presets .alt-select-option[data-active] { outline: 2px solid Highlight; outline-offset: -2px; } }
+/* A range: the sunk track, then the two raised ends. */
+.alt-cal[data-range] .alt-cal-day[data-span]:not([data-chosen])::before { opacity: 1; scale: 1; inset: 2px -1px; border-radius: 0; background: var(--accent-soft); box-shadow: var(--well); }
+.alt-cal[data-range] .alt-cal-day[data-span-start]:not([data-chosen])::before { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
+.alt-cal[data-range] .alt-cal-day[data-span-end]:not([data-chosen])::before { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
+.alt-cal[data-range] .alt-cal-day[data-chosen]::before { opacity: 1; scale: 1; background: var(--accent); background-image: var(--alt-sheen); box-shadow: var(--elev-1); }
+.alt-calendar { display: inline-block; }
+[data-contrast="more"] .alt-cal-mark, [data-contrast="more"] .alt-cal[data-range] .alt-cal-day[data-chosen]::before { box-shadow: 0 2px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-date-panel { border: 2px solid CanvasText; }
+  .alt-date-picker > .alt-input:not([data-filled]) { border-style: dashed; }
+  .alt-cal-mark, .alt-cal[data-range] .alt-cal-day[data-chosen]::before { forced-color-adjust: none; background: Highlight; }
+  .alt-cal-day[data-chosen] { forced-color-adjust: none; color: HighlightText; }
+  .alt-cal[data-range] .alt-cal-day[data-span]:not([data-chosen])::before { border: 1px dashed CanvasText; background: Canvas; }
+  .alt-cal-day[data-today] { text-decoration: underline; }
+  .alt-date-seg:focus { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+}
+@media (prefers-reduced-motion: reduce) { .alt-cal-mark { transition: none; } }
+
+/* ── Tree: a hierarchy seen all at once. Nodes are the record: flush rows on the ground, indented space-4 per level,
+   like Table rows. Only a node that acts lifts on hover; the selected node is tinted accent-soft and raised one level.
+   Expanding is disclosure of existing records, so it's a chevron turn, not a rise. Renaming sinks the label into a
+   well (InlineEdit's field); a write hovers while pending and drops to a trench when it fails. A carried node floats
+   at level 3, tilted, with a count of what it carries; the slot it would land in is a thin well at the target's
+   depth, and a node it would go into opens to a trench with an accent rim (a dashed critical one if it can't). ── */
+.alt-tree-wrap { position: relative; min-width: 0; }
+.alt-tree { margin: 0; padding: 0; list-style: none; color: var(--ink); font: 400 14px/20px var(--font-sans); }
+.alt-tree-row {
+  --indent: calc((var(--level, 1) - 1) * var(--space-4));
+  position: relative; display: flex; align-items: center; gap: 4px; min-height: var(--size-row-md); padding: 2px var(--space-2) 2px 4px; border-radius: var(--radius-sm);
+  outline: none; cursor: default; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise);
+}
+.alt-tree-indent { flex: none; width: var(--indent); }
+.alt-tree-chevron { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--ink-muted); cursor: pointer; }
+.alt-tree-chevron svg { rotate: -90deg; transition: rotate var(--dur-travel-2) var(--ease-settle); }
+.alt-tree-chevron[data-open] svg { rotate: 0deg; }
+[dir="rtl"] .alt-tree-chevron:not([data-open]) svg { rotate: 90deg; }
+.alt-tree-leaf { flex: none; width: 20px; }
+.alt-tree-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (hover: hover) { .alt-tree-row:hover:not([data-carried]) { background: var(--surface-raised); box-shadow: var(--elev-1); } }
+.alt-tree-row[aria-selected="true"] { background: var(--accent-soft); box-shadow: var(--elev-1); }
+.alt-tree-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-tree-row[data-status="pending"] { animation: alt-tree-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-tree-pending { to { background: var(--surface-lifted); box-shadow: var(--elev-2); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-tree-row[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-tree-row[data-carried="keys"] { z-index: 2; background: var(--surface-floating); box-shadow: var(--elev-3); rotate: calc(-1.2deg * var(--alt-travel)); }
+.alt-tree-row[data-carried="pointer"] { opacity: 0.4; }
+.alt-tree-row[data-into] { background: var(--surface-trench); box-shadow: var(--trench), inset 0 0 0 2px var(--accent); }
+.alt-tree-row[data-into="blocked"] { box-shadow: var(--trench), inset 0 0 0 2px var(--critical); }
+.alt-tree-slot { height: 6px; margin: -3px 0 -3px calc((var(--level, 1) - 1) * var(--space-4) + 28px); border-radius: var(--radius-full); background: var(--surface-well); box-shadow: var(--well), inset 0 0 0 1px var(--accent); list-style: none; }
+.alt-tree-count { flex: none; margin-left: auto; padding: 1px 6px; border-radius: var(--radius-full); background: var(--surface-floating); box-shadow: var(--elev-2); font: 650 11px/16px var(--font-sans); font-variant-numeric: tabular-nums; }
+.alt-tree-ghost {
+  position: fixed; z-index: var(--z-floating); display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 2px var(--space-3); border-radius: var(--radius-sm);
+  background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--ink); font: 400 14px/20px var(--font-sans); pointer-events: none;
+  rotate: calc(-1.2deg * var(--alt-travel)); scale: calc(1 + 0.015 * var(--alt-travel));
+}
+.alt-tree-wrap[data-carrying="pointer"] { cursor: grabbing; }
+.alt-tree-name { position: relative; display: inline-flex; flex-direction: column; flex: 1; min-width: 0; }
+.alt-tree-name-input {
+  width: 100%; min-width: 8ch; height: 26px; padding: 0 6px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); outline: none;
+  background: var(--surface-well); box-shadow: var(--well); color: var(--ink); font: inherit; animation: alt-tree-sink var(--dur-travel-1) var(--ease-sink);
+}
+@keyframes alt-tree-sink { from { background: var(--surface-ground); box-shadow: none; } }
+.alt-tree-name-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-tree-name[data-invalid] .alt-tree-name-input { background: var(--critical-soft); border-color: var(--critical); box-shadow: var(--trench); }
+.alt-tree-error { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--critical); font: 400 12px/16px var(--font-sans); white-space: normal; }
+.alt-tree-new { cursor: default; }
+.alt-tree-imprint { width: 40%; height: 12px; border-radius: var(--radius-sm); }
+.alt-tree-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+[data-contrast="more"] .alt-tree-row[data-carried="keys"], [data-contrast="more"] .alt-tree-ghost { box-shadow: var(--elev-3), 0 3px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-tree-row[aria-selected="true"] { border: 1px solid Highlight; } .alt-tree-row[data-carried="keys"], .alt-tree-ghost { border: 2px solid CanvasText; }
+  .alt-tree-slot { background: none; border-top: 2px dashed CanvasText; height: 0; } .alt-tree-row[data-into] { border: 3px dashed Highlight; }
+  .alt-tree-row[data-status="pending"] { border: 1px dotted CanvasText; } .alt-tree-row[data-status="failed"] { border: 2px dashed CanvasText; }
+}
+
+/* ── Checklist: a list you write into. Each item is the record, flush on the ground, and its line is the editor: no
+   raised editor and no Save, the line commits when you leave it. The empty line at the end is an opening (a well
+   while it's focused or holds text). The checkbox is the Checkbox's choice; a done item is pressed into the record,
+   muted with a strike drawn left to right, and stays in place. A write hovers after dur-grace and a failure drops to
+   a trench with Retry on the line. Nesting indents by space-6 and glides sideways, a change of hierarchy. ── */
+.alt-checklist { position: relative; min-width: 0; color: var(--ink); font: 400 14px/20px var(--font-sans); }
+.alt-checklist-list { margin: 0; padding: 0; list-style: none; }
+.alt-checklist-list .alt-checklist-list { padding-left: var(--space-6); }
+.alt-checklist-item { min-width: 0; border-radius: var(--radius-sm); outline: none; }
+.alt-checklist-item:focus-visible > .alt-checklist-line { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
+.alt-checklist-line { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-1); border-radius: var(--radius-sm); transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise); }
+.alt-checklist-line > .alt-check { flex: none; }
+.alt-checklist-text { flex: 1; min-width: 0; height: 28px; margin: 0; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-sm); outline: none; background: none; color: inherit; font: inherit; }
+.alt-checklist-text:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ink); }
+.alt-checklist-item[data-done] > .alt-checklist-line .alt-checklist-text {
+  color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--ink-muted);
+  animation: alt-checklist-strike var(--dur-travel-2) var(--ease-rise);
+}
+@keyframes alt-checklist-strike { from { text-decoration-color: transparent; color: var(--ink); } }
+.alt-checklist-item[data-arrived] > .alt-checklist-line { animation: alt-checklist-open var(--dur-travel-1) var(--ease-sink); }
+@keyframes alt-checklist-open { from { background: var(--surface-well); box-shadow: var(--well); transform: translateY(calc(-4px * var(--alt-travel))); } }
+.alt-checklist-item[data-status="pending"] > .alt-checklist-line { animation: alt-checklist-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-checklist-pending { to { background: var(--surface-lifted); box-shadow: var(--elev-2); } }
+.alt-checklist-item[data-status="failed"] > .alt-checklist-line { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-checklist-failed { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--critical); font: 400 12.5px/17px var(--font-sans); }
+.alt-checklist-new .alt-checklist-line { color: var(--ink-muted); }
+.alt-checklist-plus { display: inline-grid; place-items: center; flex: none; width: 20px; font: 500 16px/1 var(--font-sans); }
+.alt-checklist-new .alt-checklist-text::placeholder { color: var(--ink-muted); opacity: 1; }
+.alt-checklist-new .alt-checklist-line:focus-within, .alt-checklist-new .alt-checklist-line:has(input:not(:placeholder-shown)) { background: var(--surface-well); box-shadow: var(--well); color: var(--ink); }
+.alt-checklist-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+[data-contrast="more"] .alt-checklist-new .alt-checklist-line:focus-within { box-shadow: inset 0 2px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-checklist-new .alt-checklist-line { border: 1px dashed CanvasText; }
+  .alt-checklist-item[data-status="pending"] > .alt-checklist-line { border: 1px dotted CanvasText; }
+  .alt-checklist-item[data-status="failed"] > .alt-checklist-line { border: 2px dashed CanvasText; }
+}
+
+/* ── FilterBar: a query as a row of conditions. Applied filters are part of what you're looking at, so each condition
+   is a plate stamped flush into the bar like a Badge, split into segments (field · condition · value · remove). Each
+   segment opens a picker, so it lifts one level when pointed at (hover is a promise). A condition still waiting for
+   a value keeps that segment as an opening (a dashed well), and so does Add filter, deepening under the pointer.
+   Pickers float at level 3 as Select's list does. A changed condition is re-stamped (down 3px, settling). ── */
+.alt-filter-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; color: var(--ink); font: 400 13px/18px var(--font-sans); }
+.alt-filter-token {
+  display: inline-flex; align-items: stretch; max-width: 100%; min-height: 28px; border-radius: var(--radius-sm);
+  background: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%);
+  box-shadow: inset 0 1px 1.5px color-mix(in oklab, var(--ink) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 9%, transparent), 0 1px 0 0 var(--alt-lip);
+}
+.alt-filter-token[data-stamp] { animation: alt-stamp-a var(--dur-travel-2) var(--ease-settle); }
+.alt-filter-anchor { position: relative; display: inline-flex; min-width: 0; }
+.alt-filter-seg {
+  display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; margin: 0; padding: 0 8px; border: 0; border-radius: var(--radius-sm);
+  background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise);
+}
+.alt-filter-seg[aria-expanded="true"] { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); }
+@media (hover: hover) { .alt-filter-seg:hover { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-filter-seg:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -1px; }
+.alt-filter-field { font-weight: 600; }
+.alt-filter-operator { color: var(--ink-muted); }
+.alt-filter-value { font-weight: 550; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
+.alt-filter-value[data-empty] { margin: 3px; min-height: 22px; border: 1px dashed var(--line-control); background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); font-weight: 400; }
+.alt-filter-remove { width: 28px; justify-content: center; padding: 0; color: var(--ink-muted); }
+.alt-filter-add { border: 1px dashed var(--line-control); background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); }
+@media (hover: hover) { .alt-filter-add:hover { background: var(--surface-trench); box-shadow: var(--trench); transform: none; color: var(--ink); } }
+.alt-filter-plus { font: 500 15px/1 var(--font-sans); }
+.alt-filter-match { color: var(--ink-muted); }
+.alt-filter-match strong { color: var(--ink); font-weight: 600; }
+.alt-filter-count { color: var(--ink-muted); font: 400 12.5px/17px var(--font-sans); }
+.alt-filter-picker { min-width: 200px; max-width: min(320px, calc(100vw - 32px)); padding: var(--space-1); }
+.alt-filter-list { max-height: 260px; overflow-y: auto; outline: none; }
+.alt-filter-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--size-row-md); padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font: 400 13.5px/18px var(--font-sans); }
+.alt-filter-option[data-active] { background: var(--accent-soft); }
+.alt-filter-empty { padding: var(--space-2); color: var(--ink-muted); }
+.alt-filter-search, .alt-filter-input {
+  width: 100%; min-width: 0; height: 32px; margin-bottom: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--line-control); border-radius: var(--radius-sm);
+  background: var(--surface-well); box-shadow: var(--well); color: var(--ink); font: 400 13.5px/18px var(--font-sans); outline: none; box-sizing: border-box;
+}
+.alt-filter-search:focus-visible, .alt-filter-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-filter-form { display: grid; gap: var(--space-2); padding: var(--space-2); }
+.alt-filter-form label { display: grid; gap: 2px; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
+.alt-filter-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (hover: hover) { [data-contrast="more"] .alt-filter-seg:hover { box-shadow: 0 2px 0 0 var(--ink); } }
+@media (forced-colors: active) {
+  .alt-filter-token { border: 1px solid CanvasText; } .alt-filter-value[data-empty], .alt-filter-add { border: 1px dashed CanvasText; }
+  .alt-filter-picker { border: 2px solid CanvasText; } .alt-filter-option[data-active] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+}
+
+/* ── Schedule: time you handle directly. The grid is ground, with line rules on the hour. Events are live work items
+   raised one level like BoardCards (a tinted left edge), lifting on hover. Time opens only while something could land
+   in it: while an event is carried or a span drawn, the days sink into wells; the slot under a carried event deepens
+   to a trench with an accent rim, as long as the event (critical rim where it can't go). A carried event floats at
+   level 3, tilted. Drawing makes a well the length of the drag, which rises into an event to be named. Pending writes
+   hover after dur-grace; failures drop to a trench. The now line is accent-ink: it isn't status. ── */
+.alt-schedule { --cols: var(--days); position: relative; min-width: 0; color: var(--ink); font: 400 12.5px/16px var(--font-sans); }
+.alt-schedule-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
+.alt-schedule-period { margin: 0; font: 600 15px/22px var(--font-sans); }
+.alt-schedule-nav { display: inline-flex; gap: 2px; }
+.alt-schedule-grid { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); min-width: 0; overflow-x: auto; animation: alt-schedule-fade var(--dur-travel-1) ease-out; }
+@keyframes alt-schedule-fade { from { opacity: 0; } }
+.alt-schedule-row, .alt-schedule-body { display: contents; }
+.alt-schedule-corner, .alt-schedule-day { position: sticky; top: 0; z-index: 3; padding: 6px 4px; background: var(--surface-ground); border-bottom: 1px solid var(--line); color: var(--ink-muted); font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.alt-schedule-day[data-today] { color: var(--accent-ink); font-weight: 650; }
+.alt-schedule-row[aria-rowindex="2"] .alt-schedule-time { transform: none; }
+.alt-schedule-time { height: var(--slot); padding-right: 6px; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; transform: translateY(-7px); }
+.alt-schedule-cell { position: relative; height: var(--slot); border-left: 1px solid var(--line); outline: none; transition: background-color var(--dur-travel-1) var(--ease-sink), box-shadow var(--dur-travel-1) var(--ease-sink); }
+.alt-schedule-row[data-hour] > .alt-schedule-cell { border-top: 1px solid var(--line); }
+.alt-schedule-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ink); z-index: 2; }
+.alt-schedule[data-carrying] .alt-schedule-cell { background: var(--surface-well); }
+.alt-schedule-event-box { position: absolute; z-index: 1; display: flex; }
+.alt-schedule-event {
+  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1px; width: 100%; min-width: 0; margin: 0; padding: 3px 6px 3px 8px; overflow: hidden;
+  border: 0; border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--elev-1), inset 3px 0 0 0 var(--accent); color: var(--ink); font: inherit; text-align: left; cursor: grab;
+  transition: box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise);
+}
+.alt-schedule-event > * { flex: none; }
+.alt-schedule-event[data-short] { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; }
+.alt-schedule-event[data-short] small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.alt-schedule-event strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
+.alt-schedule-event small { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
+@media (hover: hover) { .alt-schedule-event:hover { box-shadow: var(--elev-2), inset 3px 0 0 0 var(--accent); } }
+.alt-schedule-event:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; z-index: 2; }
+.alt-schedule-event[data-carried] { z-index: 5; background: var(--surface-floating); box-shadow: var(--elev-3), inset 3px 0 0 0 var(--accent); rotate: calc(-1.2deg * var(--alt-travel)); cursor: grabbing; }
+.alt-schedule-event[data-status="pending"] { animation: alt-schedule-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-schedule-pending { to { background: var(--surface-lifted); box-shadow: var(--elev-2), inset 3px 0 0 0 var(--accent); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-schedule-event[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-schedule-event[data-held] { cursor: not-allowed; box-shadow: var(--elev-3), 0 0 0 2px var(--presence-1); }
+.alt-schedule-event[data-held="2"] { box-shadow: var(--elev-3), 0 0 0 2px var(--presence-2); }
+.alt-schedule-event[data-held="3"] { box-shadow: var(--elev-3), 0 0 0 2px var(--presence-3); }
+.alt-schedule-event[data-held="2"] .alt-schedule-holder { background: var(--presence-2); }
+.alt-schedule-event[data-held="3"] .alt-schedule-holder { background: var(--presence-3); }
+.alt-schedule-holder { position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--presence-1); color: var(--on-presence); font: 600 10.5px/14px var(--font-sans); }
+.alt-schedule-handle { position: absolute; left: 25%; right: 25%; bottom: -3px; z-index: 2; height: 6px; border-radius: var(--radius-full); background: var(--surface-raised); box-shadow: var(--elev-1); cursor: ns-resize; opacity: 0; transition: opacity var(--dur-travel-1); }
+.alt-schedule-event-box:focus-within .alt-schedule-handle { opacity: 1; }
+@media (hover: hover) { .alt-schedule-event-box:hover .alt-schedule-handle { opacity: 1; } }
+.alt-schedule-slot { position: absolute; left: 2px; right: 2px; z-index: 0; border-radius: var(--radius-sm); background: var(--surface-trench); box-shadow: var(--trench), inset 0 0 0 2px var(--accent); }
+.alt-schedule-slot[data-blocked] { box-shadow: var(--trench), inset 0 0 0 2px var(--critical); }
+.alt-schedule-drawn { width: 100%; padding: 3px 6px; border-radius: var(--radius-sm); background: var(--surface-trench); box-shadow: var(--trench), inset 0 0 0 1px var(--accent); color: var(--ink-muted); }
+.alt-schedule-draft { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--elev-1), inset 3px 0 0 0 var(--accent); animation: alt-emerge var(--dur-travel-2) var(--ease-rise); }
+.alt-schedule-draft small { padding-left: 4px; color: var(--ink-muted); }
+.alt-schedule-field { display: flex; flex-direction: column; min-width: 0; }
+.alt-schedule-event-box > .alt-schedule-field { position: absolute; inset: 2px; z-index: 3; }
+.alt-schedule-title-input { width: 100%; min-width: 0; height: 24px; padding: 0 6px; border: 1px solid var(--line-control); border-radius: var(--radius-sm); outline: none; background: var(--surface-well); box-shadow: var(--well); color: var(--ink); font: 500 12.5px/16px var(--font-sans); box-sizing: border-box; }
+.alt-schedule-title-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-schedule-title-input[aria-invalid] { background: var(--critical-soft); border-color: var(--critical); }
+.alt-schedule-error { display: inline-flex; align-items: center; gap: 3px; color: var(--critical); font: 400 11px/14px var(--font-sans); }
+.alt-schedule-now { position: absolute; left: -4px; right: 0; z-index: 4; height: 2px; background: var(--accent-ink); pointer-events: none; }
+.alt-schedule-now::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-ink); }
+.alt-schedule-failure { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border-radius: var(--radius-md); background: var(--critical-soft); color: var(--ink); font: 400 13px/18px var(--font-sans); }
+.alt-schedule-failure > svg { color: var(--critical); }
+.alt-schedule-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+[data-contrast="more"] .alt-schedule-event { box-shadow: 0 2px 0 0 var(--ink), inset 3px 0 0 0 var(--accent); }
+[data-contrast="more"] .alt-schedule-event[data-carried] { box-shadow: 0 3px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-schedule-event { border: 1px solid CanvasText; } .alt-schedule-event[data-carried] { border-width: 2px; }
+  .alt-schedule-slot, .alt-schedule-drawn { border: 2px dashed CanvasText; } .alt-schedule-now { background: Highlight; }
+  .alt-schedule-event[data-status="pending"] { border-style: dotted; } .alt-schedule-event[data-status="failed"] { border: 2px dashed CanvasText; }
+}
+
+/* ── DataGrid: a table edited cell by cell. Cells are the record, flush in Table's rows; the active cell is a focus
+   ring, not a height, and a range is an accent-soft tint (choosing a target isn't live content). Editable columns
+   carry a pencil in the header instead of a hover lift: a click selects rather than acts. The cell being edited opens
+   into a well clipped to the cell, with the held rim; an invalid value deepens to a trench with its message beside it.
+   A saving cell holds a small raised plate after dur-grace; a failed cell drops to a trench with a critical mark; a
+   landed value settles, and a pasted range settles as one change. ── */
+.alt-data-grid { min-width: 0; }
+.alt-data-grid .alt-table { table-layout: fixed; }
+.alt-grid-head { display: inline-flex; align-items: center; gap: 4px; }
+.alt-grid-pencil { display: inline-flex; color: var(--ink-faint); }
+.alt-grid-cell { position: relative; outline: none; cursor: cell; overflow: visible; white-space: nowrap; }
+.alt-grid-value { display: block; overflow: hidden; text-overflow: ellipsis; }
+.alt-grid-cell[data-range] { background: var(--accent-soft); }
+.alt-grid-cell[data-active] { box-shadow: inset 0 0 0 2px var(--accent-ink); }
+.alt-grid-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ink); }
+.alt-grid-cell[data-editing] { padding: 0; background: var(--surface-well); box-shadow: var(--well), inset 0 0 0 2px var(--alt-rim-held, var(--accent)); animation: alt-grid-sink var(--dur-travel-1) var(--ease-sink); }
+@keyframes alt-grid-sink { from { background: transparent; box-shadow: none; } }
+.alt-grid-cell[data-editing]:has([aria-invalid="true"]) { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 2px var(--critical); }
+.alt-grid-cell[data-invalid]:not([data-editing]) { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-grid-cell[data-invalid][data-active]:not([data-editing]) { box-shadow: var(--trench), inset 0 0 0 2px var(--accent-ink); }
+@media (forced-colors: active) { .alt-grid-cell[data-invalid]:not([data-editing]) { outline: 2px dashed CanvasText; outline-offset: -3px; } }
+.alt-grid-input { display: block; width: 100%; height: 100%; min-height: 40px; padding: 10px 12px; border: 0; outline: none; background: none; color: var(--ink); font: inherit; box-sizing: border-box; }
+.alt-grid-cell[data-align="end"] .alt-grid-input { text-align: right; }
+.alt-grid-editor { display: block; padding: 3px; }
+.alt-grid-tip {
+  position: absolute; left: 0; top: calc(100% + 4px); z-index: 6; max-width: 260px; padding: 4px 8px; border-radius: var(--radius-sm);
+  background: var(--surface-floating); box-shadow: var(--elev-3); color: var(--critical); font: 400 12px/16px var(--font-sans); white-space: normal;
+}
+.alt-grid-unsaved { color: var(--ink-muted); }
+.alt-grid-cell[data-status="pending"] .alt-grid-plate { position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 2px; background: var(--surface-lifted); box-shadow: var(--elev-2); animation: alt-onset var(--dur-travel-1) ease-out var(--dur-grace) backwards; }
+.alt-grid-cell[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-grid-fail { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: inline-flex; color: var(--critical); }
+.alt-grid-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+[data-contrast="more"] .alt-grid-cell[data-editing] { box-shadow: inset 0 2px 0 0 var(--ink), inset 0 0 0 2px var(--accent); }
+@media (forced-colors: active) {
+  .alt-grid-cell[data-active] { outline: 2px solid Highlight; outline-offset: -2px; } .alt-grid-cell[data-range] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .alt-grid-cell[data-editing] { outline: 2px dashed CanvasText; } .alt-grid-cell[data-editing]:has([aria-invalid="true"]) { outline: 3px dashed CanvasText; }
+  .alt-grid-cell[data-status="pending"] { outline: 1px dotted CanvasText; } .alt-grid-cell[data-status="failed"] { outline: 2px dashed CanvasText; }
+}
+
+/* ── ItemGroup: a list changed in the list itself. Slats are the record, flush on the ground with line dividers, as
+   Table rows. Editing lifts one slat at a time into its EditRegion (a static raised card) while its neighbours stay
+   flush and readable. The add slat is an opening: a dashed well that deepens to a trench under the pointer. A slat
+   picked up to reorder floats at level 3, tilted, over a slot that opens as a well. A recoverable removal leaves its
+   RemovalReceipt in the slat's place, then glides the gap shut; a confirmed one asks in a stationary Dialog, then
+   glides the slat shut. ── */
+.alt-item-group { position: relative; display: grid; gap: var(--space-2); min-width: 0; color: var(--ink); container-type: inline-size; }
+.alt-item-list { margin: 0; padding: 0; list-style: none; outline: none; }
+.alt-item-slat { position: relative; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); border-radius: 0; transition: transform var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1); }
+.alt-item-slat[data-editing] { border-bottom-color: transparent; }
+.alt-item-body { flex: 1; min-width: 0; }
+.alt-item-slat[data-carried] { z-index: 2; padding-inline: var(--space-2); border-radius: var(--radius-md); background: var(--surface-floating); box-shadow: var(--elev-3); rotate: calc(-0.5deg * var(--alt-travel)); border-bottom-color: transparent; }
+.alt-item-slat[data-status="pending"] { animation: alt-item-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-item-pending { to { background: var(--surface-lifted); box-shadow: var(--elev-2); } }
+.alt-item-slot { position: absolute; left: 0; right: 0; top: -3px; height: 6px; border-radius: var(--radius-full); background: var(--surface-well); box-shadow: var(--well); }
+.alt-item-grip { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 2px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: grab; }
+@media (hover: hover) { .alt-item-grip:hover { background: var(--surface-raised); box-shadow: var(--elev-1); } }
+.alt-item-grip[aria-pressed="true"] { cursor: grabbing; color: var(--ink); }
+.alt-item-grip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
+.alt-item-media { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--surface-well); color: var(--ink-muted); }
+.alt-item-media[data-variant="avatar"] { background: none; }
+.alt-item-content { flex: 1; min-width: 0; }
+.alt-item-title { font: 500 14.5px/21px var(--font-sans); overflow-wrap: anywhere; }
+.alt-item-description { margin: 2px 0 0; color: var(--ink-muted); font: 400 13px/18px var(--font-sans); overflow-wrap: anywhere; }
+.alt-item-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); flex: none; }
+.alt-item-description[data-truncate] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 1); line-clamp: var(--lines, 1); overflow: hidden; }
+/* Narrow (#267): under 480px of the group's width, actions take their own row, lined up with the content (after the
+   media), so a row's title keeps the width; narrow="inline" keeps them beside it. */
+@container (max-width: 480px) {
+  .alt-item:has(> .alt-item-actions[data-narrow="below"]) { flex-wrap: wrap; }
+  .alt-item-actions[data-narrow="below"] { flex-basis: 100%; }
+  .alt-item:has(> .alt-item-media) > .alt-item-actions[data-narrow="below"] { padding-left: calc(36px + var(--space-3)); }
+}
+.alt-item-separator { margin: 0; border: 0; border-top: 1px solid var(--line); }
+.alt-item-add {
+  display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 44px; padding: 0 var(--space-3); border: 1px dashed var(--line-control); border-radius: var(--radius-md);
+  background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); font: 500 14px/20px var(--font-sans); cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-sink), box-shadow var(--dur-travel-1) var(--ease-sink), color var(--dur-travel-1);
+}
+.alt-item-add:focus-visible { background: var(--surface-trench); box-shadow: var(--trench); color: var(--ink); }
+@media (hover: hover) { .alt-item-add:hover { background: var(--surface-trench); box-shadow: var(--trench); color: var(--ink); } }
+.alt-item-add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-item-plus { font: 500 17px/1 var(--font-sans); }
+.alt-item-new { animation: alt-emerge var(--dur-travel-2) var(--ease-rise); }
+.alt-item-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+[data-contrast="more"] .alt-item-slat[data-carried] { box-shadow: var(--elev-3), 0 3px 0 0 var(--ink); }
+@media (forced-colors: active) {
+  .alt-item-add, .alt-item-slot { border: 1px dashed CanvasText; } .alt-item-slat[data-carried] { border: 2px solid CanvasText; }
+  .alt-item-slat[data-status="pending"] { outline: 1px dotted CanvasText; }
+}
+
+/* ── Board, edited in place. A column's add slot is an opening: a dashed well that deepens to a trench under the
+   pointer. Activating it rises into a new card (static, level 1) holding a title field; the next slot is ready after
+   each add. Renaming turns a card's title into a well; a card being edited can't be picked up. A pending card hovers
+   after dur-grace; a failed one drops to a trench with its title kept and Retry. A fuller editor is an EditRegion in
+   the card's place. ── */
+.alt-board-add-wrap { margin-top: var(--space-2); }
+.alt-board-add {
+  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 0 var(--space-3); border: 1px dashed var(--line-control); border-radius: var(--radius-md);
+  background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); font: 500 13.5px/18px var(--font-sans); cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-sink), box-shadow var(--dur-travel-1) var(--ease-sink), color var(--dur-travel-1);
+}
+.alt-board-add:focus-visible { background: var(--surface-trench); box-shadow: var(--trench); color: var(--ink); }
+@media (hover: hover) { .alt-board-add:hover { background: var(--surface-trench); box-shadow: var(--trench); color: var(--ink); } }
+.alt-board-add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-board-add > span { font: 500 16px/1 var(--font-sans); }
+.alt-board-new { display: grid; gap: var(--space-1); cursor: default; animation: alt-emerge var(--dur-travel-2) var(--ease-rise); }
+.alt-board-new[data-status="pending"], .alt-board-rename[data-status="pending"] { animation: alt-board-pending var(--dur-travel-1) var(--ease-rise) var(--dur-grace) both; }
+@keyframes alt-board-pending { to { box-shadow: var(--elev-2); transform: translateY(calc(-2px * var(--alt-travel))); } }
+.alt-board-new[data-status="failed"] { background: var(--critical-soft); box-shadow: var(--trench), inset 0 0 0 1px var(--critical); }
+.alt-board-add-hint { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
+.alt-board-add-error { display: inline-flex; align-items: center; gap: 4px; color: var(--critical); font: 400 12px/16px var(--font-sans); }
+.alt-board-rename { display: grid; gap: var(--space-1); }
+.alt-board-card[data-editing] { cursor: default; }
+.alt-board-card-tools { position: absolute; top: 4px; right: 4px; display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--dur-travel-1); }
+.alt-board-card:focus-within .alt-board-card-tools, .alt-board-card:focus-visible .alt-board-card-tools { opacity: 1; }
+@media (hover: hover) { .alt-board-card:hover .alt-board-card-tools { opacity: 1; } }
+/* Without hover the tools are always there, or a finger could never find them (#254). */
+@media (hover: none) { .alt-board-card-tools { opacity: 1; } }
+.alt-board-card-editor { min-width: 0; }
+@media (forced-colors: active) { .alt-board-add { border: 1px dashed CanvasText; } .alt-board-new[data-status="pending"] { outline: 1px dotted CanvasText; } .alt-board-new[data-status="failed"] { outline: 2px dashed CanvasText; } }
+
+/* ── DataTable, expanded and edited in its row. Read-only detail is a reveal of the record, so it stays on the ground:
+   a full-width region under the row, inset by space-4, with a line rule, and the disclosure chevron turns. Editing is
+   live, so it rises: the row and its region become one raised slab (elev-1, drawn by the first cell as for selected
+   rows), holding a static EditRegion; the cells above keep the record identified. Sorting and reordering wait. ── */
+.alt-td-expand, .alt-th-expand { width: 40px; padding-inline: 6px; }
+/* Density: compact rows keep every target at least 24px tall (WCAG 2.5.8). Showing, hiding or reordering a column is a
+   change of layout, not of the record, so the table doesn't animate it. */
+.alt-table[data-density="compact"] .alt-td { padding-block: 4px; }
+.alt-table[data-density="compact"] .alt-th { padding-block: 6px; }
+.alt-table-hidden { color: var(--ink-muted); font-weight: 400; }
+/* Paging: the footer holds Pagination (or "Load more") under a line. While the next page loads the current rows stay on
+   the ground at half strength, as a refetching chart does, and the page thumb is held pressed. */
+.alt-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: -1px; }
+.alt-table[data-refetching] tbody { opacity: 0.5; transition: opacity var(--dur-travel-2) var(--ease-sink); }
+/* Selecting past the page: once a page is selected, a flush accent-soft row offers every matching record; a selection of
+   "all matching" is said in words. With actionsPlacement floating (or auto, once the toolbar scrolls away), the count and
+   actions dock at the bottom edge as a bar at level 3: a selection is a set of records in your hand. */
+/* Saved views: folder Tabs whose active tab is one raised sheet with the filters and table beneath it. A view you've
+   changed is a draft: a dot on its tab (and "modified" in its name), and Save view, Save as new view and Reset beside
+   the tabs, as a SaveBar does for a page. */
+.alt-views { position: relative; }
+.alt-views-actions { position: absolute; top: 0; right: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); height: 38px; align-items: center; }
+.alt-views-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: var(--radius-full); background: var(--accent); vertical-align: 2px; }
+.alt-views-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
+.alt-views-new { display: flex; flex-direction: column; gap: var(--space-3); width: 240px; max-width: 100%; }
+.alt-views-new .alt-btn { align-self: flex-end; }
+@media (max-width: 640px) { .alt-views-actions { position: static; height: auto; margin-bottom: var(--space-2); justify-content: flex-start; } }
+@media (forced-colors: active) { .alt-views-dot { background: CanvasText; forced-color-adjust: none; } }
+.alt-table-allrow > .alt-td { padding: var(--space-2) var(--space-3); background: var(--accent-soft); text-align: center; font: 400 13px/18px var(--font-sans); color: var(--ink); }
+.alt-table-allrow .alt-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; }
+.alt-table-floatbar {
+  position: sticky; bottom: var(--space-3); z-index: 6; display: flex; justify-content: center; margin-top: var(--space-3); pointer-events: none;
+}
+.alt-table-floatbar > .alt-table-selection {
+  pointer-events: auto; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 8px 6px 10px; border-radius: var(--radius-lg);
+  background: var(--surface-floating); box-shadow: var(--elev-3); font: 500 14px/20px var(--font-sans);
+  animation: alt-emerge var(--dur-travel-3) var(--ease-rise); --alt-from-y: 12px;
+}
+@media (forced-colors: active) { .alt-table-floatbar > .alt-table-selection { border: 2px solid CanvasText; } }
+.alt-table-columns { display: flex; flex-direction: column; gap: var(--space-2); width: 240px; max-width: 100%; }
+.alt-table-columns-title { margin: 0; font: 600 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-table-columns-title + * { margin-bottom: var(--space-2); }
+.alt-table-columns .alt-sort-item { padding: 6px 8px; }
+.alt-td-edit, .alt-th-edit { width: 1%; white-space: nowrap; }
+.alt-table-disclose { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer; transition: background-color var(--dur-travel-1), box-shadow var(--dur-travel-1); }
+@media (hover: hover) { .alt-table-disclose:hover { background: var(--surface-raised); box-shadow: var(--elev-1); color: var(--ink); } }
+.alt-table-disclose:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-table-disclose svg { rotate: -90deg; transition: rotate var(--dur-travel-2) var(--ease-settle); }
+.alt-table-disclose[aria-expanded="true"] svg { rotate: 0deg; }
+[dir="rtl"] .alt-table-disclose:not([aria-expanded="true"]) svg { rotate: 90deg; }
+.alt-table-detail > .alt-td { padding: var(--space-3) var(--space-4) var(--space-4); white-space: normal; animation: alt-emerge var(--dur-travel-2) var(--ease-glide); --alt-from-y: -4px; }
+.alt-tr[data-expanded]:not([data-editing]) > .alt-td { border-bottom-color: transparent; }
+.alt-tr[data-editing] { --row-bg: var(--surface-raised); --row-sh: var(--elev-1); }
+.alt-tr[data-editing]:not(.alt-table-editrow) > .alt-td { border-bottom-color: transparent; }
+.alt-tr[data-editing]:not(.alt-table-editrow) > .alt-td:first-child::before { bottom: -2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; clip-path: inset(-12px -12px 0 -12px); }
+.alt-table-editrow > .alt-td:first-child::before { border-top-left-radius: 0; border-top-right-radius: 0; clip-path: inset(0 -12px -12px -12px); }
+.alt-table-editrow > .alt-td { padding: var(--space-2) var(--space-4) var(--space-4); white-space: normal; }
+.alt-table-editrow .alt-edit-region-surface { margin: 0; border: 0; padding: 0; background: none; box-shadow: none; }
+/* ItemGroup swaps a slat for its editor, so the editor keeps to the list's column rather than reaching past it. */
+.alt-item-group .alt-edit-region-surface { margin-inline: 0; }
+@media (forced-colors: active) { .alt-tr[data-editing] > .alt-td { border-block: 1px solid CanvasText; } }
+
+/* ── PropertyList: one record's properties. They're the record, on the ground. An editable value is one plate (the
+   InlineEdit trigger) that lifts one level when pointed at, because clicking it opens its editor; read-only values
+   never lift, so editability shows without a pencil per row. An unset value is a small opening: a dashed well, the
+   empty field's treatment at plate size, so a half-filled record reads at a glance. Edit all lifts the list into one
+   raised EditRegion. ── */
+.alt-property-list { position: relative; min-width: 0; color: var(--ink); container-type: inline-size; }
+.alt-property-tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-1); }
+.alt-property-dl { display: grid; gap: var(--space-3); margin: 0; }
+.alt-property { display: grid; gap: 2px; min-width: 0; }
+.alt-property-list[data-layout="inline"] .alt-property-dl { gap: 0; }
+.alt-property-list[data-layout="inline"] .alt-property { grid-template-columns: minmax(8rem, 30%) 1fr; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
+.alt-property-label { color: var(--ink-muted); font: 500 12.5px/17px var(--font-sans); }
+.alt-property-value { min-width: 0; margin: 0; font: 400 14px/20px var(--font-sans); overflow-wrap: anywhere; }
+.alt-property-empty { color: var(--ink-muted); }
+.alt-property .alt-inline-edit-read { display: block; }
+/* Proposed changes: a field with a proposal is status that asks for action, so it's raised one level (as Confirmation),
+   showing the current value struck beside the proposed one (DiffView's property change), with Reject and Accept. Nothing
+   touches the record until it's accepted; accepting hovers as pending, then settles with the afterglow. The summary
+   offers Accept all and Reject all. */
+.alt-property-proposals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); padding: 6px 6px 6px var(--space-3); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--elev-1); }
+.alt-property-proposals-text { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font: 500 13px/18px var(--font-sans); color: var(--ink); }
+.alt-property[data-proposed] { margin: 4px calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--radius-md); background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1); }
+.alt-property-list[data-layout="inline"] .alt-property[data-proposed] { align-items: start; padding: var(--space-2); border-bottom-color: transparent; }
+.alt-property-list[data-layout="inline"] .alt-property[data-proposed] .alt-property-label { padding-top: 6px; }
+.alt-property-proposal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--space-2); }
+.alt-property-change { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.alt-property-proposal-by { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-property-proposal-error { display: inline-flex; align-items: center; gap: 4px; color: var(--critical); }
+.alt-property-proposal-by { grid-column: 1; }
+.alt-property-proposal-actions { display: inline-flex; gap: 4px; grid-column: 2; grid-row: 1 / span 2; }
+/* Narrow (#258): under the narrow breakpoint, an inline list stacks each label over its value, and a proposal stacks its
+   change, who proposed it and its actions, so the values are never squeezed into a column a few letters wide. */
+@container (max-width: 480px) {
+  .alt-property-list[data-layout="inline"] .alt-property { grid-template-columns: minmax(0, 1fr); gap: 2px; }
+  .alt-property-list[data-layout="inline"] .alt-property[data-proposed] .alt-property-label { padding-top: 0; }
+  .alt-property-proposal { grid-template-columns: minmax(0, 1fr); }
+  .alt-property-proposal-actions { grid-column: 1; grid-row: auto; margin-top: var(--space-1); }
+}
+@media (forced-colors: active) { .alt-property[data-proposed], .alt-property-proposals { border: 1px solid CanvasText; } }
+.alt-inline-edit-plate {
+  display: inline-flex; align-items: center; min-height: 30px; max-width: 100%; padding: 2px 12px; border: 1px solid transparent; border-radius: var(--radius-sm);
+  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-1) var(--ease-rise);
+}
+@media (hover: hover) { .alt-inline-edit-plate:hover:not(:disabled) { background: var(--surface-raised); box-shadow: var(--elev-1); transform: translateY(calc(-1px * var(--alt-travel))); } }
+.alt-inline-edit-plate:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.alt-inline-edit-plate:disabled { cursor: default; }
+.alt-inline-edit-plate[data-empty] { margin-left: 13px; padding-inline: 8px; border: 1px dashed var(--line-control); background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); font-size: 13px; }
+@media (hover: hover) { .alt-inline-edit-plate[data-empty]:hover:not(:disabled) { background: var(--surface-trench); box-shadow: var(--trench); transform: none; color: var(--ink); } }
+@media (hover: hover) { [data-contrast="more"] .alt-inline-edit-plate:hover:not(:disabled) { box-shadow: 0 2px 0 0 var(--ink); } }
+@media (forced-colors: active) { .alt-inline-edit-plate[data-empty] { border: 1px dashed CanvasText; } .alt-inline-edit-plate:hover { outline: 1px solid CanvasText; } }
+
+/* Workflow feedback uses the existing invalid trench and readable ground signals. */
+.alt-error-summary { border: 2px solid var(--critical); border-radius: var(--radius-lg); background: var(--critical-soft); color: var(--ink); padding: var(--space-4); overflow-wrap: anywhere; }
+.alt-error-summary h2 { margin: 0 0 var(--space-2); font: 600 var(--text-heading)/1.3 var(--font-sans); }
+.alt-error-summary ul { display: grid; gap: var(--space-1); margin: 0; padding-inline-start: var(--space-5); }
+/* Each link is a 24px target (WCAG 2.2 SC 2.5.8) whatever line-height the host page sets. */
+.alt-error-summary a { display: inline-flex; align-items: center; min-block-size: 24px; color: var(--ink); text-decoration: underline; }
+.alt-error-summary:focus { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+@media (forced-colors: active) { .alt-error-summary { border-color: CanvasText; } .alt-error-summary a { color: LinkText; } }
+
+/* ── Field text on touch (#250): under a coarse pointer, text you type is at least 16px, the size below which iOS
+   Safari zooms the page when a field is focused (and leaves it zoomed). max(16px, 1em) keeps a field that inherits
+   larger text (an in-place title) at its own size. It's a platform minimum, so it wins over every field's own font
+   (the only !important in the stylesheet's sizing). Labels stay text-label; only the text you type grows. Never
+   maximum-scale=1 instead: that stops pinch zoom and fails WCAG 1.4.4. ── */
+@media (pointer: coarse) {
+  :is([class*="alt-"] :is(input, textarea, select), :is(input, textarea, select)[class*="alt-"]):not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]) {
+    font-size: max(16px, 1em) !important;
+  }
+}
+
+/* ── Hit areas (#261): a small face keeps its size and its tier, and a transparent ::after centred on it reaches
+   size-target-min, 24px (WCAG 2.5.8) or 44px under a coarse pointer, so a finger finds it. It has no colour, border
+   or shadow, so forced colours and every elevation are untouched. Date segments sit side by side, so theirs stops at
+   24px rather than covering a neighbour. ── */
+:is(.alt-tag-remove, .alt-toast-close, .alt-cite, .alt-ailabel, .alt-filter-operator, .alt-date-seg, .alt-numfield-step, .alt-table-sort, .alt-link, .alt-reltime, .alt-chart-pin-remove) { position: relative; }
+:is(.alt-numfield-step, .alt-slider-thumb, .alt-brush-grip, .alt-tag-remove, .alt-toast-close, .alt-cite, .alt-ailabel, button.alt-chart-note, .alt-alert-more, .alt-filter-operator, .alt-table-sort, .alt-chart-pin-remove)::after {
+  content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--size-target-min)); height: max(100%, var(--size-target-min)); transform: translate(-50%, -50%);
+}
+.alt-numfield .alt-numfield-step::after { width: 100%; }
+/* Links and relative times sit in rows of text: they reach 24px tall, never wider, so neighbours stay apart. */
+:is(.alt-link, .alt-reltime):not(:is(p, li, dd, td) > *)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 24px); transform: translateY(-50%); }
+.alt-date-seg::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }
+
+/* ── A menu as a sheet (#249): on a narrow touch screen DropdownMenu and Select open at the bottom edge, where the thumb
+   is, rather than wherever the trigger happened to be. It's still the menu, at level 3 (surface-floating, elev-3):
+   changing edges doesn't climb a tier. It clears the safe areas, holds at most 70% of the visible height, has a head
+   with its title and Close, rows at size-row-md, and dims the page at half the scrim's strength. It rises from the
+   edge over dur-travel-3 on ease-rise, as a Sheet does, and fades under reduced motion. ── */
+.alt-pop[data-presentation="sheet"] {
+  position: fixed; top: auto; left: calc(var(--space-2) + env(safe-area-inset-left, 0px)); right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
+  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); translate: none; width: auto; min-width: 0; max-width: none;
+  max-height: min(70vh, 560px); max-height: min(calc(var(--alt-vvh, 100dvh) * 0.7), 560px); overflow-y: auto; overscroll-behavior: contain;
+  padding: 0 var(--space-1) var(--space-1); transform-origin: 50% 100%;
+  box-shadow: var(--elev-3), 0 0 0 100vmax color-mix(in oklab, var(--scrim) 50%, transparent);
 }
+.alt-pop[data-presentation="sheet"][data-state="closed"] { transform: translateY(calc(24px * var(--alt-travel))); }
+.alt-menu-sheet .alt-menu { position: relative; min-width: 0; padding: 0; }
+.alt-menu-sheet :is(.alt-menu-item, .alt-select-option) { min-height: var(--size-row-md); }
+.alt-menu-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
+  margin: 0 calc(-1 * var(--space-1)); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--surface-floating); }
+.alt-menu-sheet-title { min-width: 0; font: 600 15px/22px var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (forced-colors: active) { .alt-pop[data-presentation="sheet"] { border: 2px solid CanvasText; box-shadow: none; } }