altitude-design 0.1.0 → 0.2.0

package/dist/altitude.no-fonts.css

@@ -0,0 +1,1659 @@
+:root, [data-theme="daylight"] {
+  --surface-trench: #e1e4ea;
+  --surface-well: #eaedf1;
+  --surface-ground: #f3f4f7;
+  --surface-raised: #ffffff;
+  --surface-lifted: #ffffff;
+  --surface-floating: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-modal: #ffffff;
+  --ink: #12161f;
+  --ink-muted: #4f5767;
+  --ink-faint: #8a92a0;
+  --line: #e0e3e9;
+  --line-control: #737b89;
+  --accent: #2b56d6;
+  --on-accent: #ffffff;
+  --accent-ink: #2a52c8;
+  --accent-soft: #e3eafc;
+  --positive: #13734f;
+  --positive-soft: #dcf2e8;
+  --caution: #875400;
+  --caution-soft: #fbefd3;
+  --critical: #b52e16;
+  --critical-soft: #fbe4de;
+  --on-critical: #ffffff;
+  --presence-1: #b0256f;
+  --presence-2: #0b7285;
+  --presence-3: #7046c9;
+  --on-presence: #ffffff;
+  --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;
+  --elev-0: inset 0 1px 0 #ffffff00, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900, 0 0 0 0 #0f172900;
+  --elev-1: inset 0 1px 0 #ffffffb3, 0 0 0 1px #0f172917, 0 1px 2px #0f172912, 0 2px 4px -1px #0f17290f;
+  --elev-2: inset 0 1px 0 #ffffffcc, 0 0 0 1px #0f172912, 0 2px 4px -1px #0f172914, 0 8px 16px -6px #0f172924;
+  --elev-3: inset 0 1px 0 #ffffffe6, 0 0 0 1px #0f17290f, 0 4px 8px -2px #0f172914, 0 16px 32px -10px #0f172933;
+  --elev-4: inset 0 1px 0 #ffffff, 0 0 0 1px #0f17290d, 0 8px 16px -4px #0f172917, 0 28px 56px -16px #0f17293d;
+  --elev-5: inset 0 1px 0 #ffffff, 0 0 0 1px #0f17290a, 0 12px 24px -6px #0f17291a, 0 48px 96px -24px #0f17294d;
+  --lip-top: inset 0 18px 18px -18px #0f17293d;
+  --lip-bottom: inset 0 -18px 18px -18px #0f17293d;
+}
+[data-theme="nightfall"] {
+  --surface-trench: #08090c;
+  --surface-well: #0c0e12;
+  --surface-ground: #121419;
+  --surface-raised: #191c23;
+  --surface-lifted: #1f232b;
+  --surface-floating: #252a33;
+  --surface-overlay: #2a303a;
+  --surface-modal: #2f3541;
+  --ink: #eef1f6;
+  --ink-muted: #a3abb9;
+  --ink-faint: #5f6775;
+  --line: #262a33;
+  --line-control: #6a7280;
+  --accent: #86a2ff;
+  --on-accent: #0b1022;
+  --accent-ink: #93acff;
+  --accent-soft: #1c2440;
+  --positive: #56cf9f;
+  --positive-soft: #10291f;
+  --caution: #ebb550;
+  --caution-soft: #2e2411;
+  --critical: #ff8064;
+  --critical-soft: #3a1913;
+  --on-critical: #1a0905;
+  --presence-1: #f07ab8;
+  --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;
+  --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;
+}
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --radius-xs: 4px;
+  --radius-sm: 7px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --radius-full: 9999px;
+  --dur-press: 90ms;
+  --dur-travel-1: 140ms;
+  --dur-travel-2: 180ms;
+  --dur-travel-3: 220ms;
+  --dur-travel-4: 260ms;
+  --dur-travel-5: 300ms;
+  --dur-sweep: 1600ms;
+  --dur-grace: 300ms;
+  --dur-onset: 500ms;
+  --dur-hold: 1000ms;
+  --dur-hover: 1800ms;
+  --dur-settle: 8000ms;
+  --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);
+  --ease-glide: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-decay: cubic-bezier(0.25, 0.4, 0.35, 1);
+  --wall-1: 2px;
+  --wall-2: 4px;
+  --z-floating: 30;
+  --z-overlay: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+  --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;
+}
+
+
+/* Altitude — component styles. Every value comes from tokens.css; the only
+   local knob is --alt-travel (1 = full motion, 0 = reduced: altitude still
+   changes, nothing moves). */
+
+:root {
+  --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));
+}
+:root, [data-theme] {
+  /* The hairline that outlines a slab, face and wall together, so its edges read on light grounds. */
+  --alt-ring: color-mix(in oklab, var(--ink) 12%, transparent);
+  /* A contact or cast shadow on the ground (avatars, crumbs, sheets). */
+  --alt-cast: rgb(15 23 41 / 0.22);
+  /* A cast shadow seen with a clear gap under its object (avatars) needs a denser core to read. */
+  --alt-cast-deep: rgb(15 23 41 / 0.36);
+  /* The inside wall of an opening, seen past its top edge. */
+  --alt-wall-in: color-mix(in oklab, var(--surface-trench), var(--ink) 10%);
+  /* Light catching the far edge of a cut in the page. */
+  --alt-lip: rgb(255 255 255 / 0.7);
+  /* The rim of an opening you're filling (a focused field, an open select): a neutral, never the accent, so a form
+     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); }
+[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);
+}
+/* Approach: [data-approach] elements receive --near (0 far … 1 touching) from the pointer tracker, and --mx/--my
+   (−1…1, where the pointer is on them) while hovered. --n is --near with reduced motion folded in. Approach belongs
+   to openings only (inputs, selects, the sheet's finger pull): an opening may deepen as a hand comes near, but
+   nothing raised ever moves until the pointer is actually on it. */
+.alt-input, [data-approach] { --near: 0; --mx: 0; --my: 0; --n: calc(var(--near) * var(--alt-travel)); }
+.alt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+@media (prefers-reduced-motion: reduce) { :root { --alt-travel: 0; } }
+[data-motion="reduced"] { --alt-travel: 0; }
+[data-motion="full"] { --alt-travel: 1; }
+
+body { margin: 0; background: var(--surface-ground); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
+.alt-root { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
+.alt-root[data-theme] { background: var(--surface-ground); }
+.alt-root *, .alt-root *::before, .alt-root *::after { box-sizing: border-box; }
+.alt-stage { transform-origin: 50% 35%; transition: transform var(--dur-travel-5) var(--ease-rise), filter var(--dur-travel-5) var(--ease-rise); }
+.alt-stage[data-receded] { transform: scale(calc(1 - 0.015 * var(--alt-travel))); filter: saturate(0.85); }
+
+@keyframes alt-emerge { from { opacity: 0; transform: translateY(calc(var(--alt-from-y, 6px) * var(--alt-travel))); } }
+@keyframes alt-spin { to { transform: rotate(360deg); } }
+@keyframes alt-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+@keyframes alt-travel { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
+.alt-spinner { animation: alt-spin 800ms linear infinite; }
+
+/* ── Surface: the primitive. data-level sets the tint and shadow; .alt-lift climbs one level on hover and presses to ground. ── */
+.alt-surface { background: var(--alt-bg); box-shadow: var(--alt-sh); color: var(--ink); border-radius: var(--radius-lg); }
+[data-level="-2"] { --alt-bg: var(--surface-trench); --alt-sh: var(--trench); --alt-bg-up: var(--surface-well); --alt-sh-up: var(--well); }
+[data-level="-1"] { --alt-bg: var(--surface-well); --alt-sh: var(--well); --alt-bg-up: var(--surface-ground); --alt-sh-up: var(--elev-0); }
+[data-level="0"] { --alt-bg: var(--surface-ground); --alt-sh: var(--elev-0); --alt-bg-up: var(--surface-raised); --alt-sh-up: var(--elev-1); }
+[data-level="1"] { --alt-bg: var(--surface-raised); --alt-sh: var(--elev-1); --alt-bg-up: var(--surface-lifted); --alt-sh-up: var(--elev-2); }
+[data-level="2"] { --alt-bg: var(--surface-lifted); --alt-sh: var(--elev-2); --alt-bg-up: var(--surface-floating); --alt-sh-up: var(--elev-3); }
+[data-level="3"] { --alt-bg: var(--surface-floating); --alt-sh: var(--elev-3); --alt-bg-up: var(--surface-overlay); --alt-sh-up: var(--elev-4); }
+[data-level="4"] { --alt-bg: var(--surface-overlay); --alt-sh: var(--elev-4); --alt-bg-up: var(--surface-modal); --alt-sh-up: var(--elev-5); }
+[data-level="5"] { --alt-bg: var(--surface-modal); --alt-sh: var(--elev-5); --alt-bg-up: var(--surface-modal); --alt-sh-up: var(--elev-5); }
+
+.alt-lift {
+  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: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 {
+  outline: 2px solid var(--accent-ink); outline-offset: 2px;
+}
+
+/* ── Button: importance is altitude, and altitude is visible as thickness.
+   A button is a slab standing on the ground: its face sits `--wall` above it, and the wall under the
+   face is that height made visible (wall-2 for primary and danger, wall-1 for secondary, none for ghost).
+   Hover raises the face 1px (the wall grows to stay on the ground). Pressing pushes the face all the
+   way down: the wall disappears and the sheen flattens. The shadow list is always five layers —
+   [wall, rim, ring, key, ambient] — so every state interpolates. ── */
+.alt-btn {
+  --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);
+  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. */
+  box-shadow: 0 var(--wall) 0 0 var(--wall-c), var(--alt-sh);
+  -webkit-tap-highlight-color: transparent;
+  transition: box-shadow var(--dur-travel-1) var(--ease-rise), background-color var(--dur-travel-1) var(--ease-rise),
+    color var(--dur-travel-1) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle);
+}
+/* Focus ring: wraps the whole slab, face and wall, so it follows the button's real shape at every height. */
+.alt-btn:focus-visible, .alt-crumbs button:focus-visible { outline: none; }
+.alt-btn::after, .alt-crumbs button::after {
+  content: ""; position: absolute; pointer-events: none; opacity: 0;
+  inset: -4px -4px calc(-4px - var(--wall, 0px) - 1px) -4px; border: 2px solid var(--accent-ink); border-radius: calc(var(--radius-md) + 4px);
+  transition: opacity var(--dur-travel-1) var(--ease-rise), inset var(--dur-press) ease-out;
+}
+.alt-btn[data-size="sm"]::after, .alt-crumbs button::after { border-radius: calc(var(--radius-sm) + 4px); }
+.alt-btn:focus-visible::after, .alt-crumbs button:focus-visible::after { opacity: 1; }
+.alt-btn:active::after, .alt-btn[data-loading]::after { inset: -4px; }
+.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; }
+.alt-btn[data-variant="primary"] {
+  --wall: var(--wall-2); --wall-c: color-mix(in oklab, var(--accent), #000 34%);
+  --alt-bg: var(--accent); --alt-bg-up: var(--accent); --alt-fg: var(--on-accent); --alt-sh: var(--elev-2); --alt-sh-up: var(--elev-3);
+}
+.alt-btn[data-variant="danger"] {
+  --wall: var(--wall-2); --wall-c: color-mix(in oklab, var(--critical), #000 34%);
+  --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-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][data-size="lg"] { width: 44px; }
+.alt-btn:hover:not(:disabled):not([data-loading]), .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)));
+}
+.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;
+}
+.alt-btn[data-loading] { box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); background-image: none; transform: translateY(var(--wall)); cursor: progress; }
+.alt-btn[data-loading] .alt-btn-label { opacity: 0; }
+.alt-btn-spinner { position: absolute; inset: 0; display: grid; place-items: center; animation: alt-emerge var(--dur-travel-1) var(--ease-rise); --alt-from-y: 0px; }
+.alt-btn:disabled { background: var(--surface-well); background-image: none; color: var(--ink-faint); box-shadow: 0 0 0 0 var(--wall-c), var(--elev-0); cursor: not-allowed; }
+.alt-btn[data-variant="ghost"]:disabled { background: transparent; }
+
+/* ── Card ── */
+.alt-card {
+  --alt-bg: var(--surface-raised); --alt-bg-up: var(--surface-lifted); --alt-sh: var(--elev-1); --alt-sh-up: var(--elev-2);
+  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-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); }
+
+/* ── 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,
+   just below the top edge. An empty field shows that inside wall (wall-in); a pointer approaching deepens it, the
+   way a receptacle opens for something about to be put in; once it holds a value the floor rises flush with the
+   page and the wall is gone, so a form shows which fields are still holes. Focus is the hand at work: the floor
+   lights and an empty field holds the depth that approach previewed until something is put in it. Only focus that
+   arrived from the keyboard also darkens the rim to a 2px neutral (--alt-rim-held, never the accent: a form in use
+   shouldn't glow); a field you clicked into needs no outline, since you know where you clicked and the caret is there.
+   data-key-focus comes from useKeyFocus(). Invalid drops it to trench depth and keyboard focus keeps its rim critical.
+   Shadow list is always [wall, occlusion, lip, halo]. ── */
+.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);
+  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); }
+/* 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
+   in it. Keyboard focus adds the 2px neutral rim, so you can find the field you tabbed to; the command palette's field
+   never needs it, since focus never leaves it. */
+.alt-input:focus-within { background: var(--surface-raised); --n: var(--alt-travel); }
+.alt-input[data-key-focus]:focus-within:not(.alt-cmd-field) { border-color: var(--alt-rim-held); outline-color: var(--alt-rim-held); }
+.alt-input input, .alt-input textarea {
+  flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: none;
+  font: 400 14px/20px var(--font-sans); color: inherit;
+  /* Content sits on the floor: it moves down with the wall and back up when the floor rises. */
+  transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle);
+}
+.alt-input input::placeholder, .alt-input textarea::placeholder { color: var(--ink-muted); opacity: 1; }
+.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); }
+/* Fill line: with a maxLength, the well fills from the floor as the text approaches the limit. */
+.alt-input-gauge {
+  --g: var(--accent-ink);
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: calc(var(--alt-fill, 0) * 100%);
+  background: color-mix(in oklab, var(--g) 7%, transparent); box-shadow: inset 0 1.5px 0 0 color-mix(in oklab, var(--g) 45%, transparent);
+  transition: height var(--dur-travel-2) var(--ease-glide), background-color var(--dur-travel-2), box-shadow var(--dur-travel-2);
+}
+.alt-input[data-fill="near"] .alt-input-gauge { --g: var(--caution); }
+.alt-input[data-fill="full"] .alt-input-gauge { --g: var(--critical); }
+.alt-input-count { align-self: flex-end; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
+.alt-input[data-fill="near"] .alt-input-count { color: var(--caution); }
+.alt-input[data-fill="full"] .alt-input-count { color: var(--critical); }
+/* Invalid: a problem to fill in. It drops to trench depth, tinted, whether or not it holds a value. */
+.alt-input[data-invalid], .alt-input[data-invalid]:has(input:not(:placeholder-shown)), .alt-input[data-invalid]:has(textarea:not(:placeholder-shown)) {
+  --w: 6px; --n: 0; --wc: color-mix(in oklab, var(--critical-soft), var(--critical) 34%);
+  background: var(--critical-soft); border-color: var(--critical);
+  transition-timing-function: var(--ease-rise), var(--ease-sink), var(--ease-rise), var(--ease-rise);
+}
+.alt-input[data-invalid]:focus-within { background: var(--surface-raised); }
+.alt-input[data-invalid][data-key-focus]:focus-within { border-color: var(--critical); outline-color: var(--critical); }
+.alt-input[data-disabled], .alt-input[data-disabled]:has(input:not(:placeholder-shown)) { --w: 0px; --n: 0; background: var(--surface-ground); border-color: var(--line); color: var(--ink-faint); cursor: not-allowed; }
+.alt-input[data-disabled] input { cursor: not-allowed; }
+
+.alt-field { display: flex; flex-direction: column; gap: 6px; }
+.alt-field-label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
+.alt-field-req { color: var(--critical); }
+.alt-field-hint, .alt-field-error { margin: 0; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-field-error { display: flex; gap: 6px; align-items: flex-start; color: var(--critical); --alt-from-y: -4px; animation: alt-emerge var(--dur-travel-2) var(--ease-rise); }
+.alt-field-error svg { flex: none; margin-top: 1.5px; }
+
+/* ── Checkbox & Radio: built like the Switch. Off is an empty trench with a line-control rim. On, the accent pours
+   into the trench and a raised white mark sits on it: the check for a checkbox, the thumb for a radio. A radio group
+   is one switch with several positions, so it has a single thumb that slides to the chosen option. ── */
+.alt-check { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
+.alt-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; pointer-events: none; }
+.alt-check-track {
+  position: relative; flex: none; box-sizing: border-box; width: 22px; height: 22px;
+  border: 1px solid var(--line-control); border-radius: 6px; background: var(--surface-trench); box-shadow: var(--trench);
+  transition: border-color var(--dur-travel-2) var(--ease-rise);
+}
+.alt-check-track[data-round] { border-radius: var(--radius-full); }
+.alt-check-fill {
+  /* inset −1px: the poured accent covers the rim too, so the fill and the outline are one shape. */
+  position: absolute; inset: -1px; border-radius: inherit; background: var(--accent); opacity: 0; clip-path: circle(0% at 50% 50%);
+  transition: clip-path var(--dur-travel-2) var(--ease-settle), opacity var(--dur-travel-1) var(--ease-rise);
+}
+.alt-check-mark {
+  position: absolute; inset: 0; margin: auto; color: var(--on-accent); pointer-events: none;
+  filter: drop-shadow(0 1px 0.5px rgb(0 0 0 / 0.28));
+  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); }
+.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-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); }
+.alt-check[data-disabled] { cursor: not-allowed; color: var(--ink-faint); }
+.alt-check[data-disabled] .alt-check-track { border-color: var(--line); background: var(--surface-ground); box-shadow: var(--elev-0); }
+.alt-check[data-disabled] .alt-check-mark { color: var(--ink-faint); filter: none; }
+.alt-check[data-disabled] .alt-check-fill { background: var(--line); }
+.alt-check[data-disabled] .alt-check-desc { color: var(--ink-faint); }
+.alt-radio-group { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
+.alt-radio-group[data-orientation="horizontal"] { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }
+.alt-radio .alt-check-fill { transition: clip-path var(--dur-travel-1) var(--ease-sink), opacity var(--dur-travel-1) var(--ease-sink); }
+.alt-radio input:checked + .alt-check-track .alt-check-fill {
+  transition: clip-path var(--dur-travel-2) var(--ease-settle) calc(var(--dur-travel-3) * 0.4), opacity var(--dur-travel-1) var(--ease-rise) calc(var(--dur-travel-3) * 0.4);
+}
+.alt-radio-thumb {
+  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);
+  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); }
+.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 {
+  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);
+}
+.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. ── */
+.alt-switch {
+  --track: 36px; --tw: 18px;
+  position: relative; flex: none; width: 42px; height: 24px; 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;
+  transition: border-color var(--dur-travel-2) var(--ease-rise);
+}
+.alt-switch-fill {
+  position: absolute; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0;
+  clip-path: inset(0 calc(100% - 22px) 0 0 round 999px);
+  transition: clip-path var(--dur-travel-2) var(--ease-settle), opacity var(--dur-travel-1) var(--ease-rise);
+}
+.alt-switch-thumb {
+  position: absolute; top: 2px; left: 2px; width: var(--tw); height: 18px; border-radius: var(--radius-full);
+  background: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-1);
+  transition: transform var(--dur-travel-2) var(--ease-settle), width var(--dur-travel-2) var(--ease-settle), box-shadow var(--dur-travel-1) var(--ease-rise);
+}
+.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); }
+.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); }
+.alt-switch:disabled .alt-switch-fill { background: var(--line); }
+.alt-switch-row { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
+.alt-switch-row[data-disabled] { color: var(--ink-faint); cursor: not-allowed; }
+
+/* ── Tabs. Default, "folder": every tab is the top edge of its own sheet, and the sheet on top is the one you're
+   reading. The chosen tab and its panel are one raised piece (with concave fillets where they meet); the other tabs
+   lie flush behind it. Choosing a tab brings its sheet up from behind (its tab rises into place, the panel's shadow
+   swells as it surfaces) while the old tab drops back. Hovering a tab peeks its sheet up a little.
+   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);
+  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-well); box-shadow: var(--well);
+}
+.alt-tabs-indicator {
+  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-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));
+  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-content { animation: alt-emerge var(--dur-travel-2) var(--ease-rise); border-radius: var(--radius-sm); }
+
+.alt-tabs[data-variant="folder"] { gap: 0; }
+.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);
+  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: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 {
+  content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; border-radius: inherit; pointer-events: none;
+  background: var(--surface-raised); box-shadow: 0 0 0 1px var(--alt-ring), 0 -2px 5px -2px var(--alt-cast); clip-path: inset(-8px -8px 0 -8px);
+  opacity: 0; transform: translateY(calc(10px * var(--alt-travel)));
+  transition: opacity var(--dur-travel-1) var(--ease-sink), transform var(--dur-travel-2) var(--ease-sink), background-color var(--dur-travel-1);
+}
+/* Fillets: the concave corners where the tab flows into the panel, hairline included. */
+.alt-tabs[data-variant="folder"] .alt-tabs-trigger::after {
+  content: ""; position: absolute; bottom: -1px; left: calc(-1 * var(--r)); right: calc(-1 * var(--r)); height: var(--r); z-index: -1; pointer-events: none;
+  background:
+    radial-gradient(circle at 0 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)) left / var(--r) var(--r) no-repeat,
+    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"]::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 {
+  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);
+  background: var(--surface-raised); box-shadow: var(--elev-2); color: var(--ink);
+  animation: alt-sheet-surface var(--dur-travel-3) var(--ease-rise);
+}
+.alt-tabs[data-variant="folder"] > .alt-tabs-content > * { --alt-from-y: 3px; animation: alt-emerge var(--dur-travel-2) var(--ease-rise) 40ms backwards; }
+@keyframes alt-sheet-surface { from { box-shadow: var(--elev-1); } }
+
+/* ── Slider: trench track, accent fill, raised thumb that floats to level 3 while held. ── */
+.alt-slider { position: relative; display: flex; align-items: center; height: 28px; touch-action: none; user-select: none; cursor: pointer; }
+.alt-slider-track { position: relative; flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--surface-trench); box-shadow: var(--trench); overflow: hidden; }
+.alt-slider-fill { height: 100%; border-radius: inherit; background: var(--accent); box-shadow: var(--elev-1); transition: width var(--dur-travel-1) var(--ease-glide); }
+.alt-slider-thumb {
+  position: absolute; top: 50%; width: 20px; height: 20px; translate: -50% -50%;
+  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); }
+.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-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);
+  font: 500 12px/16px var(--font-mono); white-space: nowrap; pointer-events: none;
+  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 {
+  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); }
+
+/* ── Progress ── */
+.alt-progress { position: relative; height: 8px; border-radius: var(--radius-full); background: var(--surface-trench); box-shadow: var(--trench); overflow: hidden; }
+.alt-progress-fill { height: 100%; border-radius: inherit; background: var(--accent); box-shadow: var(--elev-1); transition: width var(--dur-travel-3) var(--ease-glide); }
+.alt-progress[data-indeterminate] .alt-progress-fill { width: 32%; animation: alt-travel var(--dur-sweep) var(--ease-glide) infinite; }
+
+/* ── Badge: an indicator plate. A label is part of the record, so a badge is a plate set flush into the page — a
+   shallow stamp with a dark top edge and a light lip below — and it never lifts. Status carries an indicator lamp:
+   a flat dot in its tone's own colour (the colour its text takes), with no gloss, socket or glow, so it reads as part
+   of the plate's printing rather than a bead sitting on it. A neutral lamp is unlit: an empty ring. When the status
+   changes the lamp relights; when the label changes the plate is re-stamped. A count is the exception: a number that
+   wants your attention floats above the page, and pops up when it changes. ── */
+.alt-badge {
+  --b-bg: color-mix(in oklab, var(--surface-ground), var(--surface-well) 70%); --b-fg: var(--ink); --b-edge: var(--ink);
+  --b-lamp: var(--ink-muted); --b-tint: var(--surface-well); --b-ink: var(--ink-muted);
+  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm);
+  background: var(--b-bg); color: var(--b-fg); font: 550 12px/1 var(--font-sans); letter-spacing: 0.005em; white-space: nowrap; vertical-align: middle;
+  box-shadow: inset 0 1px 1.5px color-mix(in oklab, var(--b-edge) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--b-edge) 9%, transparent), 0 1px 0 0 var(--alt-lip);
+}
+.alt-badge:has(> .alt-badge-lamp) { padding-left: 6px; }
+.alt-badge[data-tone="accent"] { --b-lamp: var(--accent); --b-tint: var(--accent-soft); --b-ink: var(--accent-ink); }
+.alt-badge[data-tone="positive"] { --b-lamp: var(--positive); --b-tint: var(--positive-soft); --b-ink: var(--positive); }
+.alt-badge[data-tone="caution"] { --b-lamp: var(--caution); --b-tint: var(--caution-soft); --b-ink: var(--caution); }
+.alt-badge[data-tone="critical"] { --b-lamp: var(--critical); --b-tint: var(--critical-soft); --b-ink: var(--critical); }
+/* Without a lamp, a toned plate says its tone in its lettering. */
+.alt-badge[data-variant="plate"]:not(:has(> .alt-badge-lamp)) { --b-fg: var(--b-ink); }
+.alt-badge[data-variant="tinted"] { --b-bg: var(--b-tint); --b-fg: var(--b-ink); --b-edge: var(--b-ink); }
+.alt-badge[data-variant="outline"] { --b-fg: var(--b-ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line-control); }
+.alt-badge-lamp { position: relative; flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--b-lamp); }
+.alt-badge[data-tone="neutral"] .alt-badge-lamp { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b-lamp); }
+.alt-badge-lamp[data-lit] { animation: alt-lamp-on var(--dur-travel-3) var(--ease-rise); }
+.alt-badge-lamp[data-pulse] { animation: alt-lamp-pulse var(--dur-hover) ease-in-out infinite alternate; }
+@keyframes alt-lamp-on { from { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--b-lamp); } }
+@keyframes alt-lamp-pulse { to { opacity: 0.35; } }
+.alt-badge[data-stamp="a"] { animation: alt-stamp-a var(--dur-travel-3) var(--ease-settle); }
+.alt-badge[data-stamp="b"] { animation: alt-stamp-b var(--dur-travel-3) var(--ease-settle); }
+@keyframes alt-stamp-a { from { transform: translateY(calc(-3px * var(--alt-travel))) scale(calc(1 + 0.05 * var(--alt-travel))); filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.16)); } }
+@keyframes alt-stamp-b { from { transform: translateY(calc(-3px * var(--alt-travel))) scale(calc(1 + 0.05 * var(--alt-travel))); filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.16)); } }
+.alt-badge[data-variant="count"] {
+  --b-bg: var(--surface-floating); --b-fg: var(--ink);
+  justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
+  font: 650 11.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; box-shadow: var(--elev-2);
+}
+.alt-badge[data-variant="count"][data-tone="accent"] { --b-bg: var(--accent); --b-fg: var(--on-accent); }
+.alt-badge[data-variant="count"][data-tone="critical"] { --b-bg: var(--critical); --b-fg: var(--on-critical); }
+.alt-badge[data-variant="count"][data-tone="positive"], .alt-badge[data-variant="count"][data-tone="caution"] { --b-bg: var(--b-tint); --b-fg: var(--b-ink); }
+.alt-badge[data-variant="count"][data-stamp="a"] { animation-name: alt-count-a; }
+.alt-badge[data-variant="count"][data-stamp="b"] { animation-name: alt-count-b; }
+@keyframes alt-count-a { from { transform: translateY(calc(3px * var(--alt-travel))) scale(calc(1 - 0.2 * var(--alt-travel))); box-shadow: var(--elev-0); } }
+@keyframes alt-count-b { from { transform: translateY(calc(3px * var(--alt-travel))) scale(calc(1 - 0.2 * var(--alt-travel))); box-shadow: var(--elev-0); } }
+@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. ── */
+@property --hr { syntax: "<number>"; inherits: true; initial-value: 0; }
+.alt-avatar {
+  --size: 36px; --hr: 0; --lift: calc(var(--size) * var(--hr) * var(--alt-travel));
+  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;
+  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);
+}
+.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. */
+.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; }
+.alt-avatar-lamp {
+  --b-lamp: var(--positive);
+  position: absolute; z-index: 2; right: -1px; bottom: -1px; width: max(8px, calc(var(--size) * 0.24)); height: max(8px, calc(var(--size) * 0.24)); 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-interactive] { cursor: pointer; outline: none; }
+.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); }
+.alt-avatar-group > .alt-avatar { isolation: auto; margin-left: calc(var(--size) * -0.22); }
+.alt-avatar-group > .alt-avatar:first-child { margin-left: 0; }
+/* 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 .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
+   content lands it rises out of its imprint and the imprint fills in behind it. ── */
+.alt-skeleton { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface-well); box-shadow: var(--well); }
+.alt-skeleton[data-shape="circle"] { border-radius: var(--radius-full); }
+.alt-skeleton[data-shape="text"] { border-radius: var(--radius-xs); }
+.alt-skeleton::after {
+  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--surface-raised) 60%, transparent), transparent);
+  animation: alt-sweep var(--dur-sweep) var(--ease-glide) calc(var(--i, 0) * 90ms) infinite;
+}
+.alt-skeleton-lines { display: flex; flex-direction: column; gap: 9px; }
+@media (prefers-reduced-motion: reduce) { .alt-skeleton::after { animation: none; opacity: 0; } }
+[data-motion="reduced"] .alt-skeleton::after { animation: none; opacity: 0; }
+.alt-reveal[data-reveal] { border-radius: var(--radius-sm); animation: alt-imprint var(--dur-travel-3) linear var(--alt-rise-delay, 0ms) backwards; }
+.alt-reveal[data-reveal] > .alt-reveal-inner { animation: alt-rise-out var(--dur-travel-3) var(--ease-rise) var(--alt-rise-delay, 0ms) backwards; }
+@keyframes alt-imprint {
+  from { clip-path: inset(0 round var(--radius-sm)); background-color: var(--surface-well); box-shadow: var(--well); }
+  to { clip-path: inset(0 round var(--radius-sm)); background-color: transparent; box-shadow: var(--elev-0); }
+}
+@keyframes alt-rise-out { from { transform: translateY(calc(100% * var(--alt-travel))); opacity: 0.25; } }
+
+/* ── Alert: a sheet laid on the page. Status that informs is a thin tinted sheet resting on the ground — you can see
+   its paper edge and the contact shadow under it — and it never floats. Status that asks you to act is a raised
+   card. Dismissing lifts the sheet off the page and the gap closes behind it. Several alerts make an AlertStack:
+   one sheet on top and the rest peeking out beneath it, each tinted by its own tone, with a count; open the stack
+   and they fan out. Shadow list: [ring, paper edge, contact, lift]. ── */
+.alt-alert, .alt-alert-sheet { --a-bg: var(--surface-raised); --a-fg: var(--ink-muted); }
+.alt-alert[data-tone="accent"], .alt-alert-sheet[data-tone="accent"] { --a-bg: var(--accent-soft); --a-fg: var(--accent-ink); }
+.alt-alert[data-tone="positive"], .alt-alert-sheet[data-tone="positive"] { --a-bg: var(--positive-soft); --a-fg: var(--positive); }
+.alt-alert[data-tone="caution"], .alt-alert-sheet[data-tone="caution"] { --a-bg: var(--caution-soft); --a-fg: var(--caution); }
+.alt-alert[data-tone="critical"], .alt-alert-sheet[data-tone="critical"] { --a-bg: var(--critical-soft); --a-fg: var(--critical); }
+.alt-alert {
+  --a-sheet: 0 0 0 1px color-mix(in oklab, var(--a-fg) 18%, transparent), 0 1px 0 0 color-mix(in oklab, var(--a-bg), #000 10%), 0 1.5px 3px -0.5px var(--alt-cast);
+  display: grid; grid-template-rows: 1fr; border-radius: var(--radius-md); background: var(--a-bg); color: var(--ink);
+  box-shadow: var(--a-sheet), 0 0 0 0 transparent;
+  transition: grid-template-rows var(--dur-travel-3) var(--ease-glide) var(--dur-travel-1), opacity var(--dur-travel-2) var(--ease-sink) var(--dur-travel-1),
+    box-shadow var(--dur-travel-2) var(--ease-rise), transform var(--dur-travel-2) var(--ease-rise);
+}
+.alt-alert[data-variant="raised"] { --a-bg: var(--surface-raised); background-image: var(--alt-sheen); box-shadow: var(--elev-2); }
+/* Lifted off: the sheet rises and its shadow spreads, then it fades and the space closes. */
+.alt-alert[data-closing] {
+  grid-template-rows: 0fr; opacity: 0; transform: translateY(calc(-8px * var(--alt-travel))) scale(calc(1 + 0.01 * var(--alt-travel)));
+  box-shadow: var(--a-sheet), 0 14px 22px -10px var(--alt-cast);
+}
+.alt-alert[data-variant="raised"][data-closing] { box-shadow: var(--elev-4); }
+.alt-alert-inner { min-height: 0; overflow: hidden; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
+.alt-alert-icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--a-fg); }
+.alt-alert[data-variant="raised"][data-tone="accent"] .alt-alert-icon { color: var(--accent-ink); }
+.alt-alert[data-variant="raised"][data-tone="positive"] .alt-alert-icon { color: var(--positive); }
+.alt-alert[data-variant="raised"][data-tone="caution"] .alt-alert-icon { color: var(--caution); }
+.alt-alert[data-variant="raised"][data-tone="critical"] .alt-alert-icon { color: var(--critical); }
+.alt-alert-body { flex: 1; min-width: 0; }
+.alt-alert-title { margin: 0; font: 600 14px/20px var(--font-sans); }
+.alt-alert-text { font: 400 14px/20px var(--font-sans); color: var(--ink); }
+.alt-alert-title + .alt-alert-text { margin-top: 2px; }
+.alt-alert-action { flex: none; align-self: center; }
+.alt-alert-close {
+  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); }
+.alt-alert-close:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+
+.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; }
+.alt-alert-stack:not([data-expanded]) { padding-bottom: calc(var(--sheets, 0) * 6px); margin-bottom: 12px; }
+.alt-alert-stack-top { position: relative; z-index: 3; }
+.alt-alert-stack-top[data-risen] { animation: alt-from-under var(--dur-travel-3) var(--ease-rise); }
+/* In a stack the top sheet lifts off without closing its space: the next one comes up from under it. */
+.alt-alert-stack-top > .alt-alert[data-closing] { grid-template-rows: 1fr; }
+.alt-alert-sheet {
+  position: absolute; z-index: calc(3 - var(--i)); top: calc(var(--i) * 6px); bottom: calc(var(--sheets) * 6px - var(--i) * 6px); left: calc(var(--i) * 10px); right: calc(var(--i) * 10px);
+  border-radius: var(--radius-md); background: var(--a-bg); pointer-events: none;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--a-fg) 16%, transparent), 0 1px 0 0 color-mix(in oklab, var(--a-bg), #000 10%), 0 1.5px 3px -0.5px var(--alt-cast);
+  filter: brightness(calc(1 - var(--i) * 0.025));
+  animation: alt-tuck var(--dur-travel-3) var(--ease-settle) backwards;
+}
+@keyframes alt-tuck { from { transform: translateY(calc(var(--i) * -6px)); } }
+.alt-alert-more {
+  position: absolute; z-index: 4; right: var(--space-4); bottom: -11px; height: 22px; padding: 0 10px; border: 0; border-radius: var(--radius-full);
+  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))); }
+.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); }
+.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))); } }
+
+/* ── Accordion: closed items are lids lying flush on the page. Opening one lifts its lid into a raised card and
+   opens the compartment underneath, an opening sunk into the lid (with its back wall showing) where the content
+   sits. Hovering a closed row raises a ghost of its lid. ── */
+.alt-acc { display: flex; flex-direction: column; }
+.alt-acc-item {
+  position: relative; border-radius: var(--radius-lg); background: transparent; box-shadow: var(--elev-0);
+  transition: background-color var(--dur-travel-3) var(--ease-rise), box-shadow var(--dur-travel-3) var(--ease-rise), margin var(--dur-travel-3) var(--ease-glide);
+}
+.alt-acc-item + .alt-acc-item::before {
+  content: ""; position: absolute; top: 0; left: var(--space-4); right: var(--space-4); height: 1px; background: var(--line);
+  transition: opacity var(--dur-travel-1) var(--ease-rise);
+}
+.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-heading { margin: 0; }
+.alt-acc-trigger {
+  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-3);
+  padding: var(--space-4); border: 0; border-radius: inherit; background: none; color: var(--ink);
+  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 {
+  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))); }
+.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; }
+.alt-acc-panel > div { overflow: hidden; }
+/* The compartment: content sits in an opening under the lid, its back wall just visible below the rim. */
+.alt-acc-content {
+  margin: 0 var(--space-1) var(--space-1); padding: calc(var(--space-3) + 2px) var(--space-4) var(--space-3);
+  border-radius: calc(var(--radius-lg) - var(--space-1)); background: var(--surface-well);
+  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 0 0 var(--alt-wall-in), inset 0 4px 3px -2px var(--alt-cast);
+  font: 400 14px/21px var(--font-sans); color: var(--ink-muted);
+  opacity: 0; transform: translateY(calc(-4px * var(--alt-travel))); transition: opacity var(--dur-travel-1) var(--ease-sink), transform var(--dur-travel-1) var(--ease-sink);
+}
+.alt-acc-item[data-state="open"] .alt-acc-content { opacity: 1; transform: none; transition: opacity var(--dur-travel-3) var(--ease-rise) 60ms, transform var(--dur-travel-3) var(--ease-rise) 60ms; }
+
+/* ── Kbd: a tiny raised key that presses when its key is held. ── */
+.alt-kbd {
+  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin: 0 1px 2px;
+  border-radius: var(--radius-xs); background: var(--surface-raised); background-image: var(--alt-sheen); color: var(--ink-muted);
+  box-shadow: 0 var(--wall-1) 0 0 var(--surface-trench), var(--elev-1);
+  font: 500 12px/1 var(--font-mono); vertical-align: middle;
+  transition: box-shadow var(--dur-travel-1) var(--ease-settle), transform var(--dur-travel-1) var(--ease-settle), background-color var(--dur-travel-1);
+}
+.alt-kbd[data-pressed] { background: var(--surface-well); background-image: none; box-shadow: 0 0 0 0 var(--surface-trench), var(--elev-0); transform: translateY(var(--wall-1)); transition-duration: var(--dur-press); color: var(--ink); }
+
+/* ── Floating layer: tooltip, popover, menu. Closed pose = one level up and near the anchor; open = level 3. ── */
+.alt-tip-anchor, .alt-pop-anchor { position: relative; display: inline-flex; }
+.alt-tip, .alt-pop {
+  position: absolute; z-index: var(--z-floating); color: var(--ink);
+  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-tip[data-state="closed"], .alt-pop[data-state="closed"] {
+  opacity: 0; box-shadow: var(--elev-1);
+  transition-timing-function: var(--ease-sink); transition-duration: calc(var(--dur-travel-3) * 0.7);
+}
+.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;
+}
+.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-warm] { transition-duration: var(--dur-travel-1); }
+
+.alt-pop {
+  top: calc(100% + 8px); left: 0; transform-origin: 0 0; min-width: 220px; 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; }
+.alt-pop[data-align="center"] { left: 50%; translate: -50% 0; transform-origin: 50% 0; }
+.alt-pop[data-side="top"] { top: auto; bottom: calc(100% + 8px); transform-origin: 0 100%; }
+.alt-pop[data-side="top"][data-align="end"] { transform-origin: 100% 100%; }
+.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-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);
+  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);
+}
+.alt-menu[data-state="open"] .alt-menu-item, .alt-menu[data-state="open"] .alt-menu-label { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 16ms); }
+.alt-menu-label { min-height: 28px; font-size: 12.5px; color: var(--ink-muted); cursor: default; }
+.alt-menu-item[data-tone="critical"] { color: var(--critical); }
+.alt-menu-item[aria-disabled] { color: var(--ink-faint); cursor: not-allowed; }
+.alt-menu-icon { display: inline-flex; color: var(--ink-muted); }
+.alt-menu-item[data-tone="critical"] .alt-menu-icon { color: inherit; }
+.alt-menu-text { flex: 1; }
+.alt-menu-shortcut { font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }
+.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); }
+.alt-scrim {
+  position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
+  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);
+  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); }
+.alt-dialog[data-size="lg"] { width: min(100%, 620px); }
+.alt-dialog-root[data-state="closed"] .alt-scrim { opacity: 0; transition-duration: calc(var(--dur-travel-5) * 0.7); transition-timing-function: var(--ease-sink); }
+.alt-dialog-root[data-state="closed"] .alt-dialog {
+  opacity: 0; box-shadow: var(--elev-1); transform: translateY(calc(16px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel)));
+  transition-duration: calc(var(--dur-travel-5) * 0.7); transition-timing-function: var(--ease-sink);
+}
+.alt-dialog-head { display: flex; flex-direction: column; gap: 6px; padding-right: var(--space-8); }
+.alt-dialog-title { margin: 0; font: 600 19px/26px var(--font-sans); letter-spacing: -0.01em; }
+.alt-dialog-desc { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
+.alt-dialog-body { margin-top: var(--space-5); font: 400 15px/23px var(--font-sans); }
+.alt-dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
+.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. ── */
+.alt-toaster {
+  position: fixed; z-index: var(--z-toast); right: var(--space-6); bottom: var(--space-6); width: min(360px, calc(100vw - 32px));
+  transition: height var(--dur-travel-4) var(--ease-rise);
+}
+.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);
+  background: var(--surface-overlay); color: var(--ink); transform-origin: 50% 100%; overflow: hidden;
+  transition: transform var(--dur-travel-4) var(--ease-rise), opacity var(--dur-travel-4) var(--ease-rise), box-shadow var(--dur-travel-4) var(--ease-rise), height var(--dur-travel-4) var(--ease-rise);
+}
+.alt-toast[data-behind] > * { opacity: 0; transition: opacity var(--dur-travel-1); }
+.alt-toast > * { transition: opacity var(--dur-travel-2) var(--ease-rise); }
+.alt-toast-icon { display: inline-flex; margin-top: 1px; color: var(--ink-muted); flex: none; }
+.alt-toast[data-tone="positive"] .alt-toast-icon { color: var(--positive); }
+.alt-toast[data-tone="caution"] .alt-toast-icon { color: var(--caution); }
+.alt-toast[data-tone="critical"] .alt-toast-icon { color: var(--critical); }
+.alt-toast-body { flex: 1; min-width: 0; }
+.alt-toast-title { margin: 0; font: 600 14px/20px var(--font-sans); }
+.alt-toast-desc { margin: 2px 0 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
+.alt-toast-action { align-self: center; }
+.alt-toast-close {
+  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); }
+
+
+/* ════════════════════ Depth signals: what height can tell you ════════════════════ */
+
+/* Afterglow (recency). New or changed content lifts, tints and settles over dur-settle.
+   Drawn on ::before behind the content so the surface's own hover and press stay free. */
+[data-settle] { position: relative; isolation: isolate; }
+[data-settle]::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
+  animation: alt-afterglow-a var(--dur-settle) linear var(--alt-rise-delay, 0ms) both;
+}
+[data-settle="b"]::before { animation-name: alt-afterglow-b; }
+@keyframes alt-afterglow-a { 0%, 12% { background-color: var(--accent-soft); box-shadow: var(--elev-2); animation-timing-function: var(--ease-decay); } 100% { background-color: transparent; box-shadow: var(--elev-0); } }
+@keyframes alt-afterglow-b { 0%, 12% { background-color: var(--accent-soft); box-shadow: var(--elev-2); animation-timing-function: var(--ease-decay); } 100% { background-color: transparent; box-shadow: var(--elev-0); } }
+
+/* Commitment. Pending writes hover above the ground (only after dur-grace, so fast saves never flicker);
+   committed ones land; failed ones drop into a trench. */
+[data-status="pending"] { cursor: progress; animation: alt-hover var(--dur-hover) ease-in-out var(--dur-grace) infinite alternate both; }
+@keyframes alt-hover {
+  from { box-shadow: var(--elev-2); transform: translateY(calc(-2px * var(--alt-travel))); }
+  to { box-shadow: var(--elev-3); transform: translateY(calc(-4px * var(--alt-travel))); }
+}
+@media (prefers-reduced-motion: reduce) { [data-status="pending"] { animation: none; box-shadow: var(--elev-2); transition: box-shadow var(--dur-travel-1) var(--ease-rise) var(--dur-grace); } }
+[data-motion="reduced"] [data-status="pending"] { animation: none; box-shadow: var(--elev-2); transition: box-shadow var(--dur-travel-1) var(--ease-rise) var(--dur-grace); }
+[data-land="a"] { animation: alt-land-a calc(var(--dur-travel-3) * 1.6) var(--ease-settle); }
+[data-land="b"] { animation: alt-land-b calc(var(--dur-travel-3) * 1.6) var(--ease-settle); }
+@keyframes alt-land-a { from { box-shadow: var(--elev-3); transform: translateY(calc(-4px * var(--alt-travel))); } }
+@keyframes alt-land-b { from { box-shadow: var(--elev-3); transform: translateY(calc(-4px * var(--alt-travel))); } }
+.alt-surface[data-status="failed"], .alt-card[data-status="failed"], [data-status="failed"] {
+  background: var(--critical-soft); box-shadow: var(--trench); outline: 1px solid var(--critical); outline-offset: -1px;
+  animation: alt-drop var(--dur-travel-2) var(--ease-sink);
+}
+@keyframes alt-drop { from { box-shadow: var(--elev-1); transform: translateY(calc(-2px * var(--alt-travel))); } }
+
+/* Possession. Something being held (by you or a collaborator) is in a hand: level 3, slightly tilted. */
+[data-presence="1"] { --alt-presence: var(--presence-1); }
+[data-presence="2"] { --alt-presence: var(--presence-2); }
+[data-presence="3"] { --alt-presence: var(--presence-3); }
+[data-held] {
+  position: relative; z-index: 2; box-shadow: var(--elev-3);
+  transform: translateY(calc(-2px * var(--alt-travel))) rotate(calc(-0.5deg * var(--alt-travel)));
+  transition: box-shadow var(--dur-travel-3) var(--ease-rise), transform var(--dur-travel-3) var(--ease-rise);
+}
+[data-held-by] { outline: 2px solid var(--alt-presence); outline-offset: 2px; }
+[data-held-by]::after {
+  content: attr(data-held-by); position: absolute; top: -12px; left: 14px; padding: 1px 7px; border-radius: var(--radius-xs);
+  background: var(--alt-presence); color: var(--on-presence); box-shadow: var(--elev-1);
+  font: 600 11.5px/16px var(--font-sans); white-space: nowrap; pointer-events: none;
+}
+
+/* Relevance (focus+context). Matches rise one level, misses sink into a well. Nothing is removed,
+   so positions — and the person's spatial memory of them — survive the filter. No blur: small blur
+   isn't detected pre-attentively and blurred text is unpleasant to read; shading polarity is. */
+[data-relevance] {
+  transition: background-color var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-rise),
+    transform var(--dur-travel-2) var(--ease-settle), color var(--dur-travel-2) var(--ease-rise), filter var(--dur-travel-2);
+}
+[data-relevance="match"] { background: var(--alt-bg-up, var(--surface-lifted)); box-shadow: var(--alt-sh-up, var(--elev-2)); transform: translateY(calc(-1px * var(--alt-travel))); }
+[data-relevance="miss"] { background: var(--surface-well); box-shadow: var(--well); color: var(--ink-muted); filter: saturate(0.5); }
+
+/* ── 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; }
+.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);
+}
+.alt-btn.alt-hold[data-hold="holding"]:not(:disabled):not([data-loading]) {
+  box-shadow: 0 0 0 0 var(--wall-c), var(--trench); background-image: none; transform: translateY(calc(var(--wall) + 2px));
+  transition: box-shadow var(--alt-hold-dur) linear, transform var(--alt-hold-dur) linear;
+}
+.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 {
+  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; }
+
+/* ── 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. ── */
+.alt-pile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--sheets, 0) * 4px); transition: padding-bottom var(--dur-travel-3) var(--ease-glide); }
+.alt-pile[data-sheets="1"] { --sheets: 1; } .alt-pile[data-sheets="2"] { --sheets: 2; } .alt-pile[data-sheets="3"] { --sheets: 3; }
+.alt-pile-top, .alt-pile-sheet { grid-area: 1 / 1; border-radius: var(--radius-lg); background: var(--surface-raised); }
+.alt-pile-top { position: relative; z-index: 4; box-shadow: var(--elev-1); outline: none; transition: box-shadow var(--dur-travel-2) var(--ease-rise), transform var(--dur-travel-2) var(--ease-settle); }
+.alt-pile-sheet {
+  position: relative; z-index: calc(4 - var(--i)); box-shadow: var(--elev-1); filter: brightness(calc(1 - var(--i) * 0.025));
+  transform: translateY(calc(var(--i) * 4px)) scaleX(calc(1 - var(--i) * 0.035));
+  translate: 0 calc(var(--i) * 3px * var(--fan, 0)); rotate: calc((var(--i) - 2) * 1.2deg * var(--fan, 0));
+  transition: transform var(--dur-travel-3) var(--ease-settle), translate var(--dur-travel-3) var(--ease-settle), rotate var(--dur-travel-3) var(--ease-settle), opacity var(--dur-travel-2);
+}
+.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 { 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;
+  border-radius: var(--radius-full); background: var(--surface-floating); box-shadow: var(--elev-2); color: var(--ink);
+  font: 600 12px/1 var(--font-sans); pointer-events: none;
+}
+.alt-pile[data-open] { z-index: var(--z-floating); }
+.alt-pile[data-open] .alt-pile-sheet { opacity: 0; transform: none; --fan: 0; }
+.alt-pile[data-open] .alt-pile-top { box-shadow: var(--elev-2); }
+.alt-pile-list { position: absolute; z-index: 3; top: calc(100% - var(--sheets, 0) * 4px); left: -18px; right: -18px; pointer-events: none; }
+.alt-pile-list[data-state="open"] { pointer-events: auto; }
+/* Each card casts its own shadow; the scroll area has none. Its padding holds the shadows, and the top and bottom
+   edges fade out instead of cutting them off. */
+.alt-pile-list-inner {
+  margin: 0; padding: var(--space-2) 18px 24px; list-style: none; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--space-2), #000 calc(100% - 22px), transparent);
+  mask-image: linear-gradient(to bottom, transparent, #000 var(--space-2), #000 calc(100% - 22px), transparent);
+}
+.alt-pile-list[data-state="open"] .alt-pile-list-inner { overflow-y: auto; }
+.alt-pile-item {
+  display: block; width: 100%; padding: var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--surface-lifted); box-shadow: var(--elev-2);
+  color: inherit; font: inherit; text-align: left; cursor: pointer;
+  opacity: 0; transform: translateY(calc((var(--i) + 1) * -20px * var(--alt-travel))) scale(calc(1 - 0.03 * var(--alt-travel)));
+  transition: transform var(--dur-travel-2) var(--ease-sink), opacity var(--dur-travel-1) var(--ease-sink), box-shadow var(--dur-travel-1) var(--ease-rise);
+}
+.alt-pile-list[data-state="open"] .alt-pile-item {
+  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 {
+  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; }
+
+/* ── ScrollArea: edges curve away where content continues; content under the header lifts it. ── */
+.alt-scroll { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--elev-1); }
+.alt-scroll-header {
+  position: relative; z-index: 2; padding: var(--space-3) var(--space-4); background: var(--surface-raised); box-shadow: var(--elev-0);
+  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: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); }
+.alt-scroll-header ~ .alt-scroll-lip[data-edge="top"] { display: none; }
+.alt-scroll-lip[data-edge="bottom"] { bottom: 0; box-shadow: var(--lip-bottom); }
+.alt-scroll[data-top] .alt-scroll-lip[data-edge="top"], .alt-scroll[data-bottom] .alt-scroll-lip[data-edge="bottom"] { opacity: 1; }
+
+/* ── 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;
+  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); }
+.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))); }
+
+/* ── EmptyState: an opening the first record will fill. Nothing here yet isn't a problem (Alert) or a settled
+   container (Card): it's a space waiting to receive, so it's sunk, a well cut into the page with a dashed rim, the
+   same below-ground signal as an empty field. Its actions are ordinary raised buttons standing in it. Pointing at
+   the primary action deepens the well to a trench and darkens the rim: feedforward for where the record will land.
+   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;
+  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);
+  transition: box-shadow var(--dur-travel-1) var(--ease-sink), border-color var(--dur-travel-1);
+}
+@keyframes alt-empty-sink { from { background-color: var(--surface-ground); box-shadow: var(--elev-0); } }
+.alt-empty-icon { display: inline-flex; margin-bottom: var(--space-1); color: var(--ink-muted); }
+.alt-empty-icon > svg { width: 24px; height: 24px; }
+.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); }
+.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; }
+.alt-empty[data-size="sm"] .alt-empty-actions { margin-top: var(--space-2); }
+
+/* ── SortableList: pick up → level 3 in your hand; the landing slot opens as a well; release → it lands. ── */
+.alt-sort { position: relative; display: flex; flex-direction: column; }
+.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;
+  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); }
+.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; }
+.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);
+}
+
+/* ── 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); }
+.alt-crumbs ol { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; margin: 0; padding: 18px 0 8px; list-style: none; }
+/* Every step stands on the same ground line: a deeper step is a taller slab (its wall is longer), not one floating
+   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 {
+  --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;
+  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);
+  transform: translateY(calc(-1 * var(--wd)));
+  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 {
+  --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); }
+/* 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); }
+}
+.alt-drill-pile .alt-pile-sheet { animation: alt-sheet-in var(--dur-travel-3) var(--ease-settle); }
+@keyframes alt-sheet-in { from { transform: none; } }
+.alt-drill-stage { display: grid; overflow: hidden; }
+.alt-drill-view { grid-area: 1 / 1; padding: var(--space-2); outline: none; }
+.alt-drill-view[data-phase="out"] { pointer-events: none; }
+.alt-drill[data-dir="down"] .alt-drill-view[data-phase="in"] { animation: alt-laid-on var(--dur-travel-3) var(--ease-rise) both; }
+.alt-drill[data-dir="down"] .alt-drill-view[data-phase="out"] { animation: alt-pressed-under calc(var(--dur-travel-3) * 0.7) var(--ease-sink) both; }
+.alt-drill[data-dir="up"] .alt-drill-view[data-phase="in"] { animation: alt-from-under var(--dur-travel-3) var(--ease-rise) both; }
+.alt-drill[data-dir="up"] .alt-drill-view[data-phase="out"] { animation: alt-lifted-off calc(var(--dur-travel-3) * 0.7) var(--ease-sink) both; }
+@keyframes alt-laid-on { from { opacity: 0; transform: translateY(calc(-8px * var(--alt-travel))) scale(calc(1 + 0.02 * var(--alt-travel))); } }
+@keyframes alt-pressed-under { to { opacity: 0; transform: translateY(calc(6px * var(--alt-travel))) scale(calc(1 - 0.03 * var(--alt-travel))); } }
+@keyframes alt-from-under { from { opacity: 0; transform: translateY(calc(6px * var(--alt-travel))) scale(calc(1 - 0.03 * var(--alt-travel))); } }
+@keyframes alt-lifted-off { to { opacity: 0; transform: translateY(calc(-8px * var(--alt-travel))) scale(calc(1 + 0.02 * var(--alt-travel))); } }
+.alt-drill-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
+.alt-drill-row {
+  display: flex; width: 100%; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border: 0; border-radius: var(--radius-md);
+  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: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; }
+.alt-drill-row-title { font: 500 14px/20px var(--font-sans); }
+.alt-drill-row-desc { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-drill-count { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
+.alt-drill-chev { color: var(--ink-muted); transform: rotate(-90deg); flex: none; }
+.alt-drill-leaf { padding: var(--space-3); font: 400 14px/21px var(--font-sans); color: var(--ink); }
+
+/* ── CommandPalette: the summit. Level 5 like Dialog — the page recedes, the scrim veils it, the palette rises 16px
+   as its shadow grows from elev-1 — but anchored near the top, so the results can grow downward without the field
+   moving. The query field is an opening built exactly like Input: its back wall shows while it's empty, and once it
+   holds a query its floor rises flush with the palette (surface-modal, the page it sits on here; surface-raised
+   would sit below level 5 in dark schemes). One accent-soft highlight is carried between results. When the results
+   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[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;
+  border-radius: var(--radius-xl); background: var(--surface-modal); box-shadow: var(--elev-5); color: var(--ink); transform-origin: 50% 0;
+  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-cmd-root[data-state="closed"] .alt-cmd {
+  opacity: 0; box-shadow: var(--elev-1); transform: translateY(calc(16px * var(--alt-travel))) scale(calc(1 - 0.04 * var(--alt-travel)));
+  transition-duration: calc(var(--dur-travel-5) * 0.7); transition-timing-function: var(--ease-sink);
+}
+.alt-cmd-head { flex: none; padding: var(--space-3); }
+.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[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); }
+.alt-cmd-label { padding: 8px 10px 4px; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-cmd-hl {
+  position: absolute; top: 0; left: var(--space-2); right: var(--space-2); 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-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);
+  font: 500 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; user-select: none;
+}
+.alt-cmd-item[data-tone="critical"] { color: var(--critical); }
+.alt-cmd-item[aria-disabled] { color: var(--ink-faint); cursor: not-allowed; }
+.alt-cmd-icon { display: inline-flex; flex: none; color: var(--ink-muted); }
+.alt-cmd-item[data-tone="critical"] .alt-cmd-icon, .alt-cmd-item[aria-disabled] .alt-cmd-icon { color: inherit; }
+.alt-cmd-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); white-space: nowrap; overflow: hidden; }
+.alt-cmd-title { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
+.alt-cmd-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-cmd-match { background: none; color: var(--accent-ink); }
+.alt-cmd-item[data-tone="critical"] .alt-cmd-match { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
+.alt-cmd-keys { display: inline-flex; flex: none; gap: 2px; }
+.alt-cmd-empty { padding: var(--space-5) var(--space-6) var(--space-8); text-align: center; font: 400 14px/21px var(--font-sans); color: var(--ink-muted); }
+.alt-cmd-empty b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
+.alt-cmd-foot { flex: none; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-cmd-foot span { display: inline-flex; align-items: center; gap: 6px; }
+.alt-cmd-foot .alt-kbd { margin: 0 0 2px; }
+.alt-cmd-foot .alt-kbd + .alt-kbd { margin-left: -4px; }
+.alt-cmd[data-ephemeral] .alt-cmd-item:not([data-predicted]), .alt-cmd[data-ephemeral] .alt-cmd-label:not([data-predicted]) { animation: alt-onset var(--dur-onset) linear backwards; }
+@keyframes alt-onset { from { opacity: 0; } }
+
+/* ── Sheet: a large sheet laid over the page at level 4, anchored to an edge. It isn't slid in: it rises at its edge —
+   16px of travel from that edge at most, a fade, its shadow growing from elev-1 to elev-4 — while the page recedes
+   behind it (modal). Closing lifts it off: up and toward you as its shadow spreads, faster than it came. It stands
+   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 > .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 {
+  --edge: var(--space-2); --w: 440px;
+  position: absolute; display: flex; flex-direction: column; overflow: hidden; outline: none; pointer-events: auto;
+  border-radius: var(--radius-xl); background: var(--surface-overlay); box-shadow: var(--elev-4); color: var(--ink);
+  transition: opacity var(--dur-travel-4) var(--ease-rise), transform var(--dur-travel-4) var(--ease-rise), box-shadow var(--dur-travel-4) var(--ease-rise);
+}
+.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="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); }
+.alt-sheet-root[data-state="closed"] .alt-sheet[data-side="right"] { transform: translateX(calc(16px * var(--alt-travel))); }
+.alt-sheet-root[data-state="closed"] .alt-sheet[data-side="left"] { transform: translateX(calc(-16px * var(--alt-travel))); }
+.alt-sheet-root[data-state="closed"] .alt-sheet[data-side="bottom"] { transform: translateY(calc(16px * var(--alt-travel))); }
+.alt-sheet-root[data-state="closed"][data-exit] .alt-sheet {
+  box-shadow: var(--elev-5); transform: translateY(calc(-8px * var(--alt-travel))) scale(calc(1 + 0.01 * var(--alt-travel)));
+  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-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);
+  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-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);
+}
+.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; }
+.alt-sheet-close { position: absolute; z-index: 3; top: var(--space-4); right: var(--space-4); color: var(--ink-muted); }
+.alt-sheet-pull {
+  position: relative; z-index: 3; flex: none; align-self: center; width: 44px; height: 8px; margin: 10px 0 -8px; border-radius: var(--radius-full);
+  background: var(--surface-well); cursor: grab; touch-action: none;
+  box-shadow: inset 0 calc(2px + var(--n) * 1px) 0 0 var(--alt-wall-in), inset 0 calc(3px + var(--n) * 1px) 2px -1px var(--alt-cast), 0 1px 0 0 var(--alt-lip);
+  transition: box-shadow var(--dur-travel-2) var(--ease-settle);
+}
+.alt-sheet-pull::after { content: ""; position: absolute; inset: -12px -28px; }
+.alt-sheet[data-dragging] { transition: none; cursor: grabbing; }
+.alt-sheet[data-dragging] .alt-sheet-pull { cursor: grabbing; --n: 1; }
+.alt-sheet[data-side="bottom"] .alt-sheet-close { top: var(--space-3); }
+
+/* ── Select & Combobox: choosing a value is filling a field, so the trigger is an opening built like Input — its back
+   wall shows while it's empty (or on its placeholder), its floor rises flush once a value is chosen, and it drops to
+   trench depth when invalid. The list rises from the field's edge at level 3, like Popover and DropdownMenu, with the
+   one gliding highlight; the chosen option wears the Checkbox family's tick, drawn in as the list opens. On choosing,
+   the list sinks back, the floor rises and the new value settles in with a brief afterglow. In a Combobox what you
+   type is a query, not a value: the field stays an opening (its wall showing under the text) until you choose. ── */
+.alt-select { position: relative; display: block; min-width: 0; }
+.alt-select > .alt-input { padding: 0; cursor: pointer; }
+.alt-combobox > .alt-input { cursor: text; }
+.alt-input[data-filled]:not([data-invalid]):not([data-disabled]) { --w: 0px; --n: 0; background: var(--surface-raised); }
+.alt-combobox > .alt-input:not([data-filled]):not([data-invalid]):not([data-disabled]) { --w: 4px; --n: calc(var(--near) * var(--alt-travel)); }
+.alt-combobox > .alt-input[data-size="sm"]:not([data-filled]):not([data-invalid]):not([data-disabled]) { --w: 3px; }
+/* Open, or focused: held like a focused Input, and like it the 2px neutral rim only when you got there by keyboard
+   (data-key-focus sits on the whole .alt-select, so it survives focus moving into the list). While nothing is chosen
+   it holds the depth approach previewed; what you type into a Combobox doesn't fill it. */
+.alt-select[data-open] > .alt-input:not([data-invalid]) { background: var(--surface-raised); }
+.alt-select[data-key-focus] > .alt-input:focus-within, .alt-select[data-key-focus][data-open] > .alt-input:not([data-invalid]) { border-color: var(--alt-rim-held); outline-color: var(--alt-rim-held); }
+.alt-select[data-key-focus] > .alt-input[data-invalid]:focus-within { border-color: var(--critical); outline-color: var(--critical); }
+.alt-select[data-open] > .alt-input:not([data-invalid]):not([data-filled]),
+.alt-combobox > .alt-input:not([data-filled]):not([data-invalid]):not([data-disabled]):focus-within { --n: var(--alt-travel); }
+.alt-select-trigger {
+  display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 10px 0 var(--space-3);
+  border: 0; border-radius: inherit; background: none; color: inherit; font: 400 14px/20px var(--font-sans); text-align: left; cursor: inherit; outline: none;
+}
+.alt-select-trigger:disabled { cursor: not-allowed; }
+.alt-select-value {
+  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: var(--radius-xs);
+  transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-2) var(--ease-settle);
+}
+.alt-select-value[data-placeholder] { color: var(--ink-muted); }
+.alt-select-icon { display: inline-flex; margin-right: var(--space-2); vertical-align: -3px; color: var(--ink-muted); }
+.alt-select-chevron { flex: none; color: var(--ink-muted); transform: translateY(calc(var(--wd) * 0.5)); transition: transform var(--dur-travel-3) var(--ease-settle); }
+.alt-select[data-open] .alt-select-chevron { transform: translateY(calc(var(--wd) * 0.5)) rotate(180deg); }
+.alt-combobox input { padding-left: var(--space-3); border-radius: var(--radius-xs); }
+.alt-select-toggle { display: inline-grid; place-items: center; align-self: stretch; margin: 0; padding: 0 10px 0 4px; border: 0; background: none; color: inherit; cursor: pointer; }
+.alt-select-toggle:disabled { cursor: not-allowed; }
+.alt-select-list { left: 0; right: auto; min-width: 100%; width: max-content; max-width: max(100%, 360px); max-height: 280px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transform-origin: 50% 0; }
+.alt-select-list[data-side="top"] { transform-origin: 50% 100%; }
+.alt-select-list:focus { outline: none; }
+.alt-select-option { padding-right: 10px; }
+.alt-select-option .alt-menu-text { min-width: 0; }
+.alt-select-option:has(.alt-select-desc) { padding-block: 6px; }
+.alt-select-desc { display: block; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-select-tick { flex: none; color: var(--accent-ink); }
+.alt-select-tick path { stroke-dasharray: 16; }
+.alt-select-list[data-state="open"] .alt-select-tick path { animation: alt-tick-draw var(--dur-travel-2) var(--ease-rise) var(--dur-travel-1) backwards; }
+@keyframes alt-tick-draw { from { stroke-dashoffset: 16; } }
+.alt-select-empty { padding: 8px 10px; font: 400 13.5px/20px var(--font-sans); color: var(--ink-muted); }
+.alt-select-value[data-glow="a"], .alt-combobox input[data-glow="a"] { animation: alt-value-a calc(var(--dur-settle) / 5) var(--ease-decay); }
+.alt-select-value[data-glow="b"], .alt-combobox input[data-glow="b"] { animation: alt-value-b calc(var(--dur-settle) / 5) var(--ease-decay); }
+@keyframes alt-value-a { from { background-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } to { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }
+@keyframes alt-value-b { from { background-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } to { background-color: transparent; box-shadow: 0 0 0 3px transparent; } }
+
+/* ── Stepper: a process as a staircase of plates standing on one ground line, in the breadcrumb's vocabulary. Done
+   steps are settled into the record: plates flush with the ground, their edges stamped, wearing the Checkbox family's
+   raised check on the accent. The current step is a raised slab with a wall (wall-2), as tall as the primary action; it
+   carries no sheen, because it isn't pressed. Steps to come are imprints pressed into the page, like Skeleton's.
+   Advancing presses the current step down into the record (ease-sink), stamps its check in (as a Badge re-stamps), then
+   raises the next out of its imprint (ease-rise, within the attention budget). Every state uses the same six-layer
+   shadow list — [stamp or well edge, ring, wall, wall ring, contact, ambient] — so each animates into the others. ── */
+.alt-stepper { display: flex; align-items: center; flex-wrap: wrap; row-gap: var(--space-3); margin: 0; padding: 8px 0 4px; list-style: none; }
+.alt-step-item { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
+.alt-step-item:last-child { flex: none; }
+.alt-step-line { flex: 1 1 16px; min-width: 16px; height: 2px; margin: 0 var(--space-2); border-radius: var(--radius-full); background: var(--line-control); transition: background-color var(--dur-travel-2) var(--ease-rise); }
+.alt-step-line[data-done] { background: var(--accent); }
+.alt-step {
+  --wall: 0px; --wall-c: color-mix(in oklab, var(--surface-trench), var(--ink) 6%);
+  --st-in: inset 0 0 0 0 transparent; --st-ring: transparent; --st-cast: transparent;
+  position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; margin: 0; padding: 6px var(--space-3) 6px 7px;
+  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: 500 13.5px/18px var(--font-sans); text-align: left; white-space: nowrap;
+  box-shadow: var(--st-in), 0 0 0 1px var(--st-ring), 0 var(--wall) 0 0 var(--wall-c), 0 var(--wall) 0 1px var(--st-ring),
+    0 calc(var(--wall) + 1px) 2px 0 var(--st-cast), 0 calc(var(--wall) + 3px) 8px -3px var(--st-cast);
+  transform: translateY(calc(-1 * var(--wall)));
+  transition: box-shadow var(--dur-travel-2) var(--ease-settle), transform var(--dur-travel-2) var(--ease-settle), background-color var(--dur-travel-2) var(--ease-rise), color var(--dur-travel-1);
+}
+.alt-step[data-state="done"] { color: var(--ink); --st-in: inset 0 1px 1.5px color-mix(in oklab, var(--alt-cast) 70%, transparent); --st-ring: color-mix(in oklab, var(--ink) 10%, transparent); }
+.alt-step[data-state="current"] { --wall: var(--wall-2); --st-ring: var(--alt-ring); --st-cast: var(--alt-cast); background: var(--surface-raised); color: var(--ink); font-weight: 600; }
+.alt-step[data-state="upcoming"] { --st-in: inset 0 1px 2px var(--alt-cast); background: var(--surface-well); }
+.alt-step-mark {
+  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full);
+  font: 600 12px/1 var(--font-sans); font-variant-numeric: tabular-nums;
+  transition: background-color var(--dur-travel-2) var(--ease-rise), color var(--dur-travel-1), box-shadow var(--dur-travel-2) var(--ease-rise);
+}
+.alt-step[data-state="done"] .alt-step-mark { background: var(--accent); color: var(--on-accent); }
+.alt-step[data-state="done"] .alt-step-mark svg { filter: drop-shadow(0 1px 0.5px rgb(0 0 0 / 0.28)); }
+.alt-step[data-state="done"] .alt-step-mark path { stroke-dasharray: 16; }
+.alt-step[data-state="current"] .alt-step-mark { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
+.alt-step[data-state="upcoming"] .alt-step-mark { box-shadow: inset 0 0 0 1px var(--line-control); }
+.alt-step-mark[data-stamp="a"] { animation: alt-stamp-a var(--dur-travel-3) var(--ease-settle) 110ms backwards; }
+.alt-step-mark[data-stamp="b"] { animation: alt-stamp-b var(--dur-travel-3) var(--ease-settle) 110ms backwards; }
+.alt-step-mark[data-stamp] path { animation: alt-tick-draw var(--dur-travel-2) var(--ease-rise) 160ms backwards; }
+.alt-step[data-motion="press"] { transition-timing-function: var(--ease-sink); }
+.alt-step[data-motion="rise"] { transition-duration: var(--dur-travel-3); transition-timing-function: var(--ease-rise); transition-delay: var(--alt-rise-delay, 0ms); }
+.alt-step[data-motion="rise"] > * { animation: alt-step-rise var(--dur-travel-3) var(--ease-rise) var(--alt-rise-delay, 0ms) backwards; }
+@keyframes alt-step-rise { from { opacity: 0.3; transform: translateY(calc(5px * var(--alt-travel))); } }
+.alt-step-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+.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 {
+  --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; }
+.alt-stepper[data-orientation="vertical"] .alt-step-item { flex-direction: column; align-items: stretch; flex: none; }
+.alt-stepper[data-orientation="vertical"] .alt-step { display: flex; align-items: flex-start; white-space: normal; padding: 9px var(--space-3) 9px 9px; }
+.alt-stepper[data-orientation="vertical"] .alt-step-mark { margin-top: -2px; }
+.alt-stepper[data-orientation="vertical"] .alt-step-line { flex: none; width: 2px; min-width: 0; height: 12px; margin: 2px 0 2px 19px; }
+
+/* ── Table: rows are the record. They sit on the ground with `line` dividers, and only rows that do something react:
+   an interactive row lifts one level on hover (a ghost lift), dropping back to
+   the ground when pressed. A selected row is tinted accent-soft and raised one level; the toolbar counts the selection
+   with a floating count Badge. Filtering in place raises matches and sinks misses into a well. The header stays flush
+   until rows scroll under it, then rises (elev-2), as in ScrollArea; where rows continue below, the bottom edge curves
+   away. Re-sorting carries rows to their new places (FLIP) instead of reshuffling. A row picked up to reorder floats at
+   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-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-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; }
+.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); }
+.alt-tr > .alt-td:first-child::before, .alt-tr > .alt-th:first-child::before {
+  content: ""; position: absolute; z-index: -1; top: 0; bottom: -1px; left: 0; width: var(--alt-row-w); pointer-events: none;
+  border-radius: var(--radius-md); background: var(--row-bg); box-shadow: var(--row-sh);
+  transition: background-color var(--dur-travel-1) var(--ease-rise), box-shadow var(--dur-travel-1) var(--ease-rise);
+}
+.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]):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); }
+.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; }
+.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); }
+.alt-table-sort {
+  display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--radius-xs);
+  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); }
+.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; }
+.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; }
+.alt-th-check, .alt-td-check { width: 22px; padding-right: 2px; }
+.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); }
+.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); }
+.alt-table-rowbtn { margin: -2px -4px; padding: 2px 4px; border: 0; border-radius: var(--radius-xs); background: none; color: inherit; font: inherit; font-weight: 500; text-align: inherit; cursor: pointer; }
+.alt-table-rowbtn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.alt-table-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--ink-muted); }
+.alt-table-caption { caption-side: bottom; padding-top: var(--space-3); text-align: left; font: 500 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+
+/* ── Board: columns of cards. Columns are receptacles: flush on the ground at rest, so the board reads as its cards;
+   while a card is being carried every column opens into a well (ease-sink), and the one under the card deepens to a
+   trench with an accent rim, as DropZone shows it's ready to receive. Cards are raised (level 1) and lift to level 2
+   on hover. A picked-up card floats at level 3, tilted 1.2° and 1.5% larger,
+   and follows the pointer; the others glide aside and the slot it will land in opens as a trench; dropped, it is carried
+   into place with a settle (ease-settle) while its shadow sinks back to elev-1. A collapsed column is a Pile whose
+   thickness and count say how many cards it holds; it still takes drops, fanning its sheets as a card comes over it.
+   A collaborator's card is held: lifted, outlined in their presence colour, wearing their name. ── */
+.alt-board { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; overflow-x: auto; padding: var(--space-3) var(--space-1) var(--space-4); scrollbar-width: thin; }
+.alt-board-col {
+  position: relative; flex: none; width: 264px; display: flex; flex-direction: column; padding: var(--space-2); border-radius: var(--radius-lg);
+  background: transparent; box-shadow: var(--elev-0); outline: 1.5px solid transparent; outline-offset: -1.5px;
+  transition: background-color var(--dur-travel-2) var(--ease-rise), box-shadow var(--dur-travel-2) var(--ease-rise), outline-color var(--dur-travel-1), width var(--dur-travel-3) var(--ease-glide);
+}
+.alt-board[data-carrying] .alt-board-col { background: var(--surface-well); box-shadow: var(--well); transition-timing-function: var(--ease-sink); }
+.alt-board[data-carrying] .alt-board-col[data-over] { background: color-mix(in oklab, var(--accent-soft) 70%, var(--surface-well)); box-shadow: var(--trench); outline-color: var(--accent-ink); }
+.alt-board-col[data-collapsed] { width: 196px; }
+.alt-board-head { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 0 var(--space-2) 6px; }
+.alt-board-title { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-board-count { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
+.alt-board-fold { margin-left: auto; color: var(--ink-muted); }
+.alt-board-fold svg { transition: transform var(--dur-travel-2) var(--ease-settle); }
+.alt-board-fold[data-collapsed] svg { transform: rotate(-90deg); }
+.alt-board-list { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 72px; transition: padding-bottom var(--dur-travel-2) var(--ease-settle); }
+.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;
+  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); }
+.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))); }
+.alt-board-card[data-following] { transition: box-shadow var(--dur-travel-1), background-color var(--dur-travel-1), rotate var(--dur-travel-2) var(--ease-settle), scale var(--dur-travel-2) var(--ease-settle); }
+.alt-board-card[data-landing] { transition-duration: var(--dur-travel-2); transition-timing-function: var(--ease-settle); }
+.alt-board-card[data-held] { cursor: not-allowed; box-shadow: var(--elev-3); transform: translateY(calc(-2px * var(--alt-travel))) rotate(calc(-0.5deg * var(--alt-travel))); }
+.alt-board-card[data-held-by] { outline: 2px solid var(--alt-presence); outline-offset: 2px; }
+.alt-board-card small { display: block; margin-top: 4px; font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-board-slot { position: absolute; left: 0; right: 0; border-radius: var(--radius-md); background: var(--surface-trench); box-shadow: var(--trench); outline: 1.5px dashed var(--line-control); outline-offset: -3px; pointer-events: none; transition: top var(--dur-travel-2) var(--ease-settle); }
+.alt-board-pile { margin: 2px 2px 0; }
+.alt-board-pile-face { display: flex; flex-direction: column; gap: 2px; padding: 12px; font: 600 14px/20px var(--font-sans); color: var(--ink); }
+.alt-board-pile-face span { font: 400 12.5px/17px var(--font-sans); color: var(--ink-muted); }
+.alt-board[data-carrying] .alt-board-col[data-over] .alt-pile-sheet { --fan: var(--alt-travel); }
+
+/* ── HoverCard: a richer preview than a Tooltip, rising from its trigger at level 3 like Popover (6px from 96%, its
+   shadow growing to elev-3). It opens after the pointer rests 400ms (hover intent) or on keyboard focus, and waits
+   250ms after the pointer leaves; an invisible bridge spans the gap so the pointer can travel into it. It shares
+   Tooltip's warm-up between neighbours. ── */
+.alt-hovercard { width: 300px; min-width: 0; padding: var(--space-4); }
+.alt-hovercard::before { content: ""; position: absolute; left: 0; right: 0; height: 12px; }
+.alt-hovercard:not([data-side="top"])::before { bottom: 100%; }
+.alt-hovercard[data-side="top"]::before { top: 100%; }
+
+/* ── Ephemeral adaptation in menus: predicted items arrive at once; the rest fade in over dur-onset. ── */
+.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; }
+
+/* ════════════════════ Accessible elevation ════════════════════ */
+
+/* High contrast: elevation becomes a hard slab whose thickness is the height (1 level = 1px more),
+   with a solid ink edge. Same four-layer structure, so it still animates. */
+@media (prefers-contrast: more) {
+  :root, [data-theme] {
+    --elev-0: inset 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+    --elev-1: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 2px 0 1px var(--ink), 0 0 0 0 #0000;
+    --elev-2: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 3px 0 1px var(--ink), 0 0 0 0 #0000;
+    --elev-3: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 4px 0 1px var(--ink), 0 0 0 0 #0000;
+    --elev-4: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 5px 0 1px var(--ink), 0 0 0 0 #0000;
+    --elev-5: inset 0 0 0 0 #0000, 0 0 0 2px var(--ink), 0 7px 0 2px var(--ink), 0 0 0 0 #0000;
+    --well: inset 0 2px 0 0 var(--ink-muted), 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+    --trench: inset 0 4px 0 0 var(--ink-muted), 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+    --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-empty { border-style: solid; }
+}
+[data-contrast="more"], [data-contrast="more"] [data-theme] {
+  --elev-0: inset 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+  --elev-1: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 2px 0 1px var(--ink), 0 0 0 0 #0000;
+  --elev-2: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 3px 0 1px var(--ink), 0 0 0 0 #0000;
+  --elev-3: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 4px 0 1px var(--ink), 0 0 0 0 #0000;
+  --elev-4: inset 0 0 0 0 #0000, 0 0 0 1px var(--ink), 0 5px 0 1px var(--ink), 0 0 0 0 #0000;
+  --elev-5: inset 0 0 0 0 #0000, 0 0 0 2px var(--ink), 0 7px 0 2px var(--ink), 0 0 0 0 #0000;
+  --well: inset 0 2px 0 0 var(--ink-muted), 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+  --trench: inset 0 4px 0 0 var(--ink-muted), 0 0 0 0 #0000, 0 0 0 0 #0000, 0 0 0 0 #0000;
+  --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-empty { border-style: solid; }
+
+/* Forced colours (Windows High Contrast) drop every box-shadow, which erases elevation entirely
+   (measured: the ladder renders as blank). Height falls back to border weight and style. */
+@media (forced-colors: active) {
+  .alt-surface[data-level="1"], .alt-surface[data-level="2"], .alt-card, .alt-btn:not([data-variant="ghost"]), .alt-tabs-indicator,
+  .alt-switch-thumb, .alt-slider-thumb, .alt-kbd, .alt-avatar-face, .alt-sort-item, .alt-pile-top, .alt-pile-sheet, .alt-scroll { border: 1px solid CanvasText; }
+  .alt-surface[data-level="3"], .alt-surface[data-level="4"], .alt-pop, .alt-tip, .alt-toast, .alt-sort-item[data-held], [data-held] { border: 2px solid CanvasText; }
+  .alt-surface[data-level="5"], .alt-dialog { border: 4px double CanvasText; }
+  .alt-input:has(input:not(:placeholder-shown)), .alt-input:has(textarea:not(:placeholder-shown)) { border-style: solid !important; }
+  .alt-input[data-invalid] { border: 2px dashed CanvasText !important; }
+  .alt-surface[data-level="-1"], .alt-input, .alt-tabs-list, .alt-sort-slot, .alt-drop[data-drop="armed"], .alt-empty { border: 1px dashed CanvasText; }
+  .alt-surface[data-level="-2"], .alt-switch, .alt-slider-track, .alt-progress, [data-status="failed"], .alt-drop[data-drop="over"] { border: 2px dashed CanvasText; }
+  [data-status="pending"] { border: 2px dotted CanvasText; }
+  .alt-progress-fill, .alt-slider-fill, .alt-switch-fill, .alt-check-fill { background: Highlight; }
+  .alt-check-track { border: 2px dashed CanvasText; } .alt-radio-thumb { border: 1px solid CanvasText; } .alt-check-mark { color: Canvas; filter: none; }
+  .alt-pile-item { border: 1px solid CanvasText; }
+  .alt-alert, .alt-alert-sheet, .alt-badge { border: 1px solid CanvasText; } .alt-alert[data-variant="raised"], .alt-badge[data-variant="count"] { border: 2px solid CanvasText; }
+  .alt-badge-lamp, .alt-avatar-lamp { border: 1px solid CanvasText; }
+  .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-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; }
+  .alt-select-option[data-active] { outline: 2px solid Highlight; outline-offset: -2px; } .alt-select-tick { color: CanvasText; }
+  .alt-tr:is([data-selected], [data-row-relevance="match"], [data-interactive]:hover) > .alt-td { border-block: 1px solid CanvasText; } .alt-tr[data-row-relevance="miss"] > .alt-td { border-bottom: 1px dashed CanvasText; }
+  .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; }
+}