@mkbabb/glass-ui 2.1.0 → 3.1.0

package/src/styles/tokens.css

@@ -11,6 +11,27 @@
  */
 
 :root {
+    /* ═══════════════════════════════════════════════
+       §-1  COLOR-SCHEME (AQ.W2 §1)
+
+       Lets native UI (scrollbars, spinbuttons, form-control chrome, the
+       default focus ring) honor the OS preference when the consumer has
+       NOT pinned a `.dark` class. glass-ui's dark mode is class-driven
+       (`.dark`, theme.css `@variant dark`), so `.dark` overrides to a hard
+       `dark` regardless of OS — but absent the class, native chrome should
+       still track `prefers-color-scheme`. `light dark` (not `only light`)
+       on `:root` delivers that; `.dark` hard-pins `dark`.
+
+       Baseline Widely Available → adopt natively, no `@supports` guard
+       (older engines ignore the property and keep default-light chrome).
+       `accent-color` (AQ.W2 §4) is the companion native-control brand;
+       both are inherited built-in <color>/keyword properties re-specified
+       inside `.dark`. The `--accent-color` token is defined in the §5
+       color block below (custom properties resolve order-independently).
+       ═══════════════════════════════════════════════ */
+    color-scheme: light dark;
+    accent-color: var(--accent-color);
+
     /* ═══════════════════════════════════════════════
        §0  THEME BRIDGE FALLBACKS
 
@@ -79,21 +100,10 @@
        headline and the thank-you headline stay in lockstep. */
     --motion-duration-complete-shimmer: 2.4s;
     --motion-delay-complete-shimmer: 220ms;
-    /* AJ.W2-ζ canon checkpoint — the gold-headline shimmer at
-       CompleteHeadline + ThankYou reads these two tokens under a
-       one-shot CSS animation. The gradient (background-size: 240% 100%
-       with --color-gold-light at 46%), the @keyframes
-       (gold-headline-shimmer: background-position 120% 0 → -120% 0),
-       and the animation declaration are mutually consistent: at 2.4s
-       duration + 220ms delay the bright band traverses the headline
-       glyphs cleanly. A regression that drops either token to 0ms /
-       unset / 0 would silently collapse the celebratory shimmer to an
-       imperceptible blow-through (live regression P1-12 surfaced this
-       risk; investigation closed at the publisher as a verify — both
-       values resolve correctly today). These two values are LOAD-
-       BEARING. Do not retire / zero / un-publish without an explicit
-       decision + companion consumer-side migration at speedtest's
-       CompleteHeadline.vue + ThankYou.vue. */
+    /* The gold-headline shimmer reads these two tokens under a one-shot
+       animation: at 2.4s + 220ms delay the bright band traverses the headline
+       glyphs cleanly. Load-bearing — zeroing either collapses the shimmer to
+       an imperceptible blow-through. */
 
     /* CompleteBadge staged-reveal cluster — the disc / ring / check curve
        fires at three asymmetric durations + delays per the A4-AF staged-
@@ -106,43 +116,16 @@
     --motion-delay-badge-ring: 220ms;
     --motion-delay-badge-check: 460ms;
 
-    /* AJ-W4-κ — staggered-reveal increment canon (per A5 §8.9). Promotes
-       the scattered per-consumer constants
-       (`STATS_CARD_STAGGER_MS = 40` in MetricGaugeCards,
-        `BAR_STAGGER_MS = 80` in DistributionChart,
-        `SERIES_STAGGER_MS = 120` in TimeSeriesChart,
-        `useStagger` default 80ms) to one shared canon so a per-row /
-       per-cell / per-bar cascade across consumer surfaces reads at one
-       of three named tiers.
-
-       The three tiers are perceptually distinct registers:
-         • tight (40ms) — dense row cascades where the gap between
-           consecutive reveals should be sub-perceptual (StatsCards row
-           strip, results-table rows under their `:nth-child(N+1)` delays)
-         • default (80ms) — the canonical row-stagger rhythm (the
-           speedtest ResultStack row-tint sweep, the DistributionChart
-           bar entrance — both already at 80ms). Aliased as `default`
-           to match `useStagger`'s built-in fallback so consumers
-           omitting `delayMs` resolve to the same token.
-         • relaxed (120ms) — wider cascades where each reveal carries
-           its own attention budget (TimeSeriesChart series entrance)
-
-       The FD2 §6 rule-1 "shared period multiple" canon for ambient
-       cycles extends here to staggers: at 40/80/120ms, the default
-       (80ms) is the LCM of tight (40) AND a 2/3 of relaxed (120)
-       — a tight cascade beating against a default cascade syncs on
-       every-other-reveal, and a default cascade against a relaxed
-       cascade syncs on every-three-reveals. Consumers that nest
-       multiple cascades on adjacent surfaces should pick adjacent
-       tiers so the cross-beats stay quiet.
-
-       Consumers can read these tokens directly from inline-style
-       calc() expressions (`animation-delay: calc(var(--motion-stagger-default) * var(--row-index))`)
-       or via JS by resolving the CSS custom property at runtime
-       (`getComputedStyle(document.documentElement).getPropertyValue('--motion-stagger-default')`).
-       The latter shape collapses the speedtest TS-side constants
-       (SERIES_STAGGER_MS, BAR_STAGGER_MS, STATS_CARD_STAGGER_MS) into
-       single-source token reads. */
+    /* Staggered-reveal increment canon — three perceptually-distinct tiers for
+       per-row/per-cell/per-bar cascades:
+         • tight (40ms) — dense row cascades, sub-perceptual gap
+         • default (80ms) — the canonical row-stagger rhythm (matches
+           `useStagger`'s built-in fallback)
+         • relaxed (120ms) — wider cascades where each reveal carries its own
+           attention budget
+       Adjacent tiers keep cross-beats quiet (80 is the LCM of 40 and 2/3 of
+       120). Consumers read these via inline-style calc() or `getComputedStyle`
+       at runtime. */
     --motion-stagger-tight: 40ms;
     --motion-stagger-default: 80ms;
     --motion-stagger-relaxed: 120ms;
@@ -199,23 +182,13 @@
     --ease-accelerate: var(--ease-in);
 
     /* ═══════════════════════════════════════════════
-       §2.A AMBIENT MOTION — Pulse aura tokens (AB.W3.T1)
-
-       Parameterise the breathing rhythm for `<Pulse variant="aura">`
-       so consumers don't re-author the cycle per site. The 6s
-       duration is the canon ambient-pulse rate (matches the dial's
-       idle breathing). Scale 1.0 ↔ 1.15 reads as a quiet halo at
-       intensity="normal"; the Pulse component remaps min/max from
-       its `intensity` prop ('subtle' = 1.06; 'vivid' = 1.22).
-
-       Opacity min/max scope is `--pulse-aura-opacity-{min,max}` —
-       the aura ALWAYS keeps a visible halo (min 0.55) so the colour
-       stays read at the trough; the peak goes to 0.95 so the breath
-       reads as a soft swell, not a fade-in-fade-out.
-
-       Reduced motion: Pulse.vue's scoped @media bracket forces
-       `animation: none` and parks at the min stop. Depth + colour
-       remain visible; the breath cycle disables.
+       §2.A AMBIENT MOTION — Pulse aura tokens
+
+       Breathing rhythm for `<Pulse variant="aura">`. The 6s duration is the
+       canon ambient-pulse rate; scale 1.0 ↔ 1.15 reads as a quiet halo at
+       intensity="normal" (Pulse remaps min/max from its `intensity` prop).
+       The aura always keeps a visible halo at the trough (opacity min 0.55).
+       Reduced motion: Pulse.vue parks at the min stop, breath cycle disabled.
        ═══════════════════════════════════════════════ */
     --animate-ambient-pulse-duration: 6s;
     --animate-ambient-pulse-scale-min: 1.0;
@@ -247,37 +220,18 @@
     --progress-sectioned-track: var(--secondary);
 
     /* ═══════════════════════════════════════════════
-       §2.C ANIMATION EXPRESSIVENESS — AI.W4 grammar
-       (publisher-side; consumer-side companions live in speedtest)
-
-       Three idiom families compose the W4 wave:
-
-       • Progress lifecycle (M.1) — the under-meter / survey progress bar
-         rides an intake pulse on rising-edge, a crescendo brightening at
-         ≥85%, and a one-shot discharge flash at 100%. The crescendo is a
-         typed CSS variable (`@property --progress-crescendo`) so the
-         indicator's leading-edge gradient stop interpolates smoothly.
-
-       • Chassis phase-tint companion (M.1) — the `--phase-color` cross-
-         fade established by the chassis cascade gains an amount companion
-         (`@property --phase-tint-amount`) so the chassis backdrop "warms
-         toward" the active phase. Both typed vars interpolate together
-         across the speedtest-owned `--motion-duration-phase-handoff`
-         window; the chassis reads the consumer-tuned clock with a safe
-         600ms default so a non-speedtest consumer still gets the cross-
-         fade shape.
-
-       • Audacious button press-ripple (M.2 Q5 — ratified G-AI-D27) — the
-         `btn-audacious` utility gains an in-place `@property --ripple-
-         radius` ripple emanating from the pressed surface. Single typed
-         length, ramps 0 → max over the ripple duration, retires on
-         release. Q3 (needle micro-jitter) + Q4 (DockLayerGroup sympath-
-         etic motion) were pruned at G-AI-D27 — no tokens reserved.
-
-       All three families coexist with the existing `--motion-*` /
-       `--phase-*` cluster. Speedtest re-uses these tokens at the existing
-       --motion-duration-phase-handoff (consumer-side, 600ms). PRM brackets
-       live alongside each consumer rule. */
+       §2.C ANIMATION EXPRESSIVENESS
+
+       Three idiom families:
+       • Progress lifecycle — the progress bar rides an intake pulse on
+         rising-edge, a crescendo brightening at ≥85%, and a one-shot discharge
+         flash at 100% (the crescendo is the typed `@property --progress-crescendo`).
+       • Chassis phase-tint companion — `@property --phase-tint-amount` so the
+         chassis backdrop warms toward the active phase, interpolating with
+         `--phase-color` across the consumer's phase-handoff window (600ms default).
+       • Audacious button press-ripple — `btn-audacious` gains a typed
+         `@property --ripple-radius` ramping 0 → max over the ripple duration.
+       ═══════════════════════════════════════════════ */
 
     /* Progress lifecycle — typed crescendo + segment-local durations */
     --motion-duration-progress-intake: 220ms;       /* rising-edge pulse */
@@ -391,6 +345,13 @@
     --popover: var(--neutral-0);
     --popover-foreground: var(--foreground);
 
+    /* R0G-5 (AO.W4) — warm-neutral public-data panel surface. One warmth step
+       off --card (hue 44 vs 48, +4 sat, −2 L) so a consumer's aurora-OFF
+       /dashboard/* surfaces read with the admin canon's warm-neutral chrome
+       instead of the colder bare card. Opaque surface (the --card family), not
+       a --surface-tint-* overlay. Consumer applies on /dashboard/* only. */
+    --surface-public-data-panel: hsl(44 16% 96%);
+
     --muted: var(--neutral-1);
     --muted-foreground: var(--neutral-5);
     /* W7-α' (AK-FD1) — one rung less-faint than --muted-foreground for
@@ -413,6 +374,34 @@
     --shadow: hsl(24 10% 10%);
     --shadow-color: var(--foreground);
 
+    /* AQ.W2 §4 — native-control accent. `accent-color` is an inherited
+       built-in <color>, so per the §2b resolve-late discipline it reads a
+       dedicated UNREGISTERED token set per-mode (NOT light-dark()) and is
+       re-specified inside `.dark` — otherwise the accent freezes to the
+       light shade at the cascade root. Light: muted-black checkmarks /
+       sliders on warm cream. Dark arm (`.dark`) reads `--ring` (mid-tone),
+       not the near-white dark `--primary`, so a checkbox's white checkmark
+       keeps contrast headroom (accent-color.md §5). */
+    --accent-color: var(--primary);
+
+    /* Border hairline at whisper alpha — the canonical rung for
+       section-spine / panel-edge hairlines a consumer wants to read as an
+       iOS-26 whisper rather than a hard rule. Consumers compose this named
+       rung instead of hand-mixing `color-mix(... var(--border) ...)`
+       per-site (token-first). 45% is the canonical whisper. Auto-dark via
+       `--border` (which is `var(--neutral-4)`, light-dark()-resolved). */
+    --border-soft: color-mix(in srgb, var(--border) 45%, transparent);
+
+    /* AQ.W3 §W3.4 — tokenized scrollbar thumb + track. Minted in the color
+       block so the `scrollbar-color` / `::-webkit-scrollbar-thumb` rungs read a
+       single source. Auto-dark via `--muted-foreground` (light-dark()-resolved,
+       AQ.W2) — the OS scrollbar chrome also honors `color-scheme: dark`, so the
+       custom thumb tracks the dark surface without an explicit dark mirror. The
+       thumb α (25%) matches the prior inline `.scrollbar-thin` value byte-for-
+       byte; `transparent` track keeps the scroll-pane glass reading through. */
+    --scrollbar-thumb: color-mix(in srgb, var(--muted-foreground) 25%, transparent);
+    --scrollbar-track: transparent;
+
     /* Foreground-tint rungs — canonical handles for the 36+ raw
        `color-mix(in srgb, var(--foreground) N%, transparent)` sites surveyed
        in R5 axis-1. Each rung's α is named in its key (4 → 4%, 22 → 22%).
@@ -547,21 +536,12 @@
        variable at any ancestor. Auto-dark via `--card`. */
     --card-header-bg:    color-mix(in srgb, var(--card) 60%, transparent);
 
-    /* Dock shadows */
-    /* User 2026-05-13 (third + fourth report). The dock previously layered:
-         1) directional `0 4px 20px` drop  → retired (third report; the Y-
-            offset concentrated on the pill's rounded right cap and read as
-            a right-edge halo on the rightmost child).
-         2) `0 0 0 1px` hairline outer ring → retired (fourth report; in
-            dark mode the 10% cream-white ring traced the right-cap arc and
-            still read as a shadow even after the directional drop was
-            gone).
-       The dock's own `border: 1.5px solid var(--glass-border-dock)` already
-       provides silhouette definition, so the outer ring was redundant. The
-       canonical dock shadow is now a single omnidirectional glow in the
-       `--shadow-md`/`--shadow-lg` family. Per-instance directional drop
-       can still be reinstated via `--shadow-dock-override` (consumed by
-       every `.glass-dock` state selector — see dock.css). */
+    /* Dock shadows — a single omnidirectional glow in the
+       `--shadow-md`/`--shadow-lg` family (a directional drop concentrated on
+       the pill's rounded right cap as a right-edge halo; the dock's own
+       border already defines the silhouette). Per-instance directional drop
+       reinstates via `--shadow-dock-override` (consumed by every `.glass-dock`
+       state selector — see dock.css). */
     --shadow-dock:           0 0 20px color-mix(in srgb, var(--shadow-color) 14%, transparent);
     --shadow-dock-collapsed: 0 0 12px color-mix(in srgb, var(--shadow-color) 12%, transparent);
     --dock-shadow:           var(--shadow-dock);
@@ -617,27 +597,11 @@
     --glass-blur-resting-radius:  12px;
     --glass-blur-floating-radius: 16px;
     --glass-blur-overlay-radius:  24px;
-    /* AJ.W2-β — dock blur lifted to 14px (was 0px at J.W3.C, was 1px
-       pre-J.W3.C). Per FD1 §4 §1.9 (AJ-time live regression P1-11):
-       "the dock should feel anchored to its surface; too much blur
-       dissociates" — but zero blur reads as "transparent-with-tint",
-       NOT as "feathered glass." The AJ-time perceptual register
-       overrides the J.W3.C compositor-cost concern: 14px is the lower
-       end of the FD1 §4 target range (14-16px); the dock composes
-       `blur()` only (no saturate — preserved from J.W3.C); the
-       `prefers-reduced-transparency` PRM bracket at glass.css:229
-       still maps the dock to its opacity-only register.
-       Quiet tier (above) lifted 3px → 10px on the same perceptual-
-       register reset (FD1 §4 target range 10-12px; 10px is the lower
-       end). The MetricBadge pills + InstrumentChassis-internal cells
-       now read as translucent gauge rather than flat tint.
-
-       AL-W3-α (T10 per A-synthesis §1.5): retune 14px → 11px with a
-       paired opacity lift 0.32 → 0.42 (below). The user mandate at
-       AL-time was "slight blur" + "refined glassyness" — at 11px /
-       0.42 the dock reads as a CRISPER GLASS PILL (the iOS Control
-       Center register), not a feathered watercolour wash. Holds the
-       register at the lower blur radius. */
+    /* Dock blur radius — 11px, paired with the 0.42 opacity below: a crisp
+       glass pill (the iOS Control Center register), not a feathered wash.
+       The dock composes `blur()` only (no saturate); the
+       `prefers-reduced-transparency` bracket at glass.css maps it to the
+       opacity-only register. */
     --glass-blur-dock-radius:     11px;
 
     --glass-blur-wash:     blur(var(--glass-blur-wash-radius)) saturate(1.05);
@@ -645,23 +609,14 @@
     --glass-blur-resting:  blur(var(--glass-blur-resting-radius)) saturate(1.05);
     --glass-blur-floating: blur(var(--glass-blur-floating-radius)) saturate(1.4);
     --glass-blur-overlay:  blur(var(--glass-blur-overlay-radius)) saturate(1.5);
-    /* Dock blur composes blur() only — no saturate. The 14px radius
-       feathers the aurora bleed-through into a watercolour register
-       while `--glass-bg-dock` (32% card opacity) carries the
-       translucent register. The dock reads as "feathered glass" rather
-       than "transparent tint" (AJ.W2-β). */
+    /* Dock blur composes blur() only — no saturate. */
     --glass-blur-dock:     blur(var(--glass-blur-dock-radius));
 
-    /* Dock-specific opacity. Lighter than `resting` (0.65) so the dock reads
-       as a translucent overlay rather than a panel — backdrop bleed visible
-       through it. Consumed by `.glass-dock` via the `--glass-bg-dock` token.
-
-       AL-W3-α (T10 per A-synthesis §1.5): retune 0.32 → 0.42 paired with
-       the dock blur radius drop (14px → 11px above). The user mandate at
-       AL-time was "slight blur" + "refined glassyness" — the +0.10 opacity
-       lift HOLDS the surface register against the tightened blur, so the
-       dock still reads as a clearly painted chrome rather than dissociating
-       into a frosted ghost. */
+    /* Dock-specific opacity (0.42) — lighter than `resting` (0.65) so the dock
+       reads as a translucent overlay rather than a panel, backdrop bleed
+       visible through it. Consumed by `.glass-dock` via `--glass-bg-dock`. The
+       value holds the surface register against the tightened 11px blur so the
+       dock reads as painted chrome, not a frosted ghost. */
     --glass-opacity-dock: 0.42;
 
     /* Chassis-specific opacity. Looser than `default` (0.50) so the
@@ -881,6 +836,13 @@
         - var(--page-padding-top, 0rem)
         - 1rem
     );
+    /* R0G-2 (AO.W3/W4) — chassis mobile dial-reserve canon. instrument-
+       chassis.css's mobile breakpoint reserves the dial's final box from
+       frame 0 via these vars (with the same values as inline fallbacks, the
+       safety net). Token-first home so the vars resolve canonically. */
+    --instrument-dial-min-height-mobile: 24rem;
+    --instrument-dial-meter-reserve-mobile: minmax(0, 1fr);
+
     --max-width-input: 24rem;
     --input-min-width-sm: 5rem;
     --min-width-input-sm: var(--input-min-width-sm);
@@ -961,6 +923,15 @@
        WCAG 2.5.5 floor on touch devices. */
     --dock-touch-target: 2.75rem; /* 44px */
 
+    /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
+       NON-dock coarse-pointer surfaces (`Button size="icon"`,
+       ExpandableContainer triggers, ResponsiveTabs mobile trigger). One
+       named rung the `@media (pointer: coarse)` block in utilities.css reads,
+       retiring the per-consumer one-liner `min-h-[44px]` patches. Equals
+       `--dock-touch-target` numerically; kept as a distinct token so the
+       dock floor and the general floor can be retuned independently. */
+    --touch-target: 2.75rem; /* 44px */
+
     /* MetricBadge — stacked variant geometry. The 2-row stacked layout
        (label / value+unit) wants a taller floor than the inline pill so the
        label has breathing room above the baseline pair. T.W2.T2 +
@@ -1000,27 +971,10 @@
     --scale-press: 0.96;
     --scale-press-dock: 0.92;
 
-    /* Press-scale — the canonical iOS Liquid Glass press value.
-       `--scale-press` (0.96) is the canonical rung every primitive
-       should reach for unless it has a documented reason — see
-       DESIGN.md §L3. `--scale-press-btn` (aliased to `--scale-press-sm`,
-       0.97) is the slightly-softer rung the legacy button + slider
-       recipes consume.
-
-       AL-W10 SLIM reconciliation (per audit G-W1-2 / G-W1-4 F-2):
-       the prior `--scale-press: 0.95` value drifted from the §L3
-       canonical 0.96 rung; the canon-amend lifts the token to match
-       the iOS `.regular` control rung the precept ratifies.
-
-       Q.W4 Lane D (Q-sty-5) retired the P.W4 `--scale-press-{xs,md,lg}`
-       rungs: the ladder was minted as preemptive consumer-facing
-       substrate for a words/frontend `active:scale-[X.XX]` absorption
-       that never landed — a fleet-wide grep (words/frontend, fourier,
-       bbnf-buddy, speedtest, keyframes.js + glass-ui src/) found zero
-       `var(--scale-press-{xs,md,lg})` consumers. Substrate-without-
-       consumer is binary (N invariant 23 / L invariant 8); the three
-       unused rungs are gone. `sm` is retained — `--scale-press-btn`
-       aliases it. */
+    /* Press-scale rungs. `--scale-press` (0.96) is the canonical iOS Liquid
+       Glass press value every primitive reaches for unless it has a documented
+       reason (DESIGN.md §L3); `--scale-press-btn` aliases the slightly-softer
+       `--scale-press-sm` (0.97) the button + slider recipes consume. */
     --scale-press-sm: 0.97;
     --scale-press-btn: var(--scale-press-sm);
     --opacity-disabled: 0.5;
@@ -1168,26 +1122,12 @@
     /* ═══════════════════════════════════════════════
        §17 METRIC
 
-       MetricRow / MetricStack value-clamp dialect. The post-P
-       `9ba68ca` + `d244dd5` commits introduced this 8-token family
-       (plus the P.W5 Lane A.1 MetricRow clamp work) as a private SFC
-       dialect — the defaults lived as `var(…, fallback)` literals
-       scattered across MetricRow.vue / MetricStack.vue, never
-       discoverable or `:root`-overridable. Q.W4 Lane A promotes the
-       whole family here per the DESIGN.md feature-token-home rule;
-       the SFCs now consume them bare.
-
-       The declared values ARE the `audacious` poster register — the
-       hero-scale clamp for a single giant number the user watches
-       climb. MetricStack's `[data-register="result"]` scoped selector
-       legitimately overrides this register-locally for the compact
-       multi-row ledger; that override now retunes a globally declared
-       default rather than minting a fallback.
-
-       Three clamp arms each: `min` (floor), `cqi` (the binding
-       container-query middle term), `max` (ceiling). value + label
-       carry all three; unit carries min/max only (its cqi coefficient
-       is a fixed 6cqi, not consumer-tuned).
+       MetricRow / MetricStack value-clamp dialect. The declared values are the
+       `audacious` poster register — the hero-scale clamp for a single giant
+       number; MetricStack's `[data-register="result"]` selector overrides it
+       locally for the compact multi-row ledger. Three clamp arms each: `min`
+       (floor), `cqi` (the binding container-query middle term), `max`
+       (ceiling); unit carries min/max only (its cqi is a fixed 6cqi).
        ═══════════════════════════════════════════════ */
 
     /* Value register — audacious-poster hero clamp */
@@ -1206,69 +1146,35 @@
     --metric-row-label-clamp-max: 2.75rem;
 
     /* ═══════════════════════════════════════════════
-       §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM —
-       AK.W3 / FD1 TRANSPOSITION 5 absorb.
-
-       The under-meter progress bar nests INTO the dial's painted-disc
-       bound (FD2 §5.2) and any two stacked progress rails inside a
-       cluster share the same vertical rhythm token. Both tokens were
-       authored speedtest-local (`AJ.W3-α`, `AJ.W3-μ.3`) but the design
-       intent is library-canon: the instrument-chassis family owns the
-       under-meter / progress-cluster grammar, so the tokens absorb here
-       at AK.W3. Speedtest reads transitively through the canon.
-
-       AM-W7-δ — `--meter-progress-gap` RETIRED (dead-canon). It was
-       absorbed pre-emptively at AK.W3 for a post-nest "meter ↔ per-phase
-       progress-bar gap" composition that never materialised: speedtest's
-       bar uses the negative `--meter-progress-inset` instead, and a
-       fleet grep (glass-ui src/ + demo + speedtest) found ZERO `var()`
-       consumers (only doc references in pre-AL/pre-AK audits flagging it
-       as G-AL-D-METER-PROGRESS-GAP-DEAD-CANON, routed to retire). Per
-       NO-legacy-code it is removed rather than kept as speculative
-       forward-compat reservation; a future glass-ui Meter primitive that
-       needs the gap re-authors it at its real consumer.
-
-       • `--meter-progress-inset` — the negative-margin inset that pulls
-         the under-meter bar INTO the unpainted ring lane around the
-         dial canvas (~4% of meter-size, two-thirds of the way through
-         the lane). Consumed at `.phase-progress` with `margin-block-
-         start: calc(-1 * var(--meter-progress-inset))`.
-       • `--progress-stack-gap` — vertical rhythm between any two stacked
-         progress rails inside one cluster (the under-meter bar cluster
-         + the global PhaseTimeline siblinged at W3-β).
+       §2.D INSTRUMENT-CLUSTER COMPOSITION RHYTHM
+
+       The instrument-chassis family owns the under-meter / progress-cluster
+       grammar.
 
-       The `--meter-size` reference inside the inset clamp resolves
-       against the consumer's own `--meter-size` declaration; when no
-       consumer ships one (a non-speedtest demo of the chassis), the
-       inline fallback of 200px keeps the calc well-defined. */
+       • `--meter-progress-inset` — the negative-margin inset that pulls the
+         under-meter bar INTO the unpainted ring lane around the dial canvas
+         (~4% of meter-size). Consumed at `.phase-progress` via
+         `margin-block-start: calc(-1 * var(--meter-progress-inset))`. The
+         `--meter-size` reference resolves against the consumer's own
+         declaration; the 200px fallback keeps the calc well-defined.
+       • `--progress-stack-gap` — vertical rhythm between any two stacked
+         progress rails inside one cluster.
+       ═══════════════════════════════════════════════ */
     --meter-progress-inset: calc(var(--meter-size, 200px) * 0.04);
     --progress-stack-gap: clamp(0.1875rem, 0.4cqi, 0.375rem);
 
     /* ═══════════════════════════════════════════════
-       §2.E CELEBRATION-TIER REGISTER — AK.W3 / FD1
-       TRANSPOSITION 5 absorb.
-
-       The celebration cluster (speedtest "Complete!" headline,
-       ThankYou's "Thanks for taking the time" headline) is a SHARED
-       peak across multiple consumer surfaces. Before AK.W3 these
-       tokens were speedtest-local (`AJ.W3-μ.4`, W2-C headline-parity)
-       but the design intent is library-canon: any glass-ui consumer
-       composing a "completion" / "thank-you" surface should reach
-       for the same row-rhythm + headline-ceiling pair.
-
-       • `--celebration-row-rhythm` — gap between the celebration
-         cluster's rows (cqi-axis so the rhythm tracks the card's
-         intrinsic width).
-       • `--text-celebration-headline-size` — the SINGLE designed peak
-         both celebration surfaces clamp toward (the W2-C unification).
-         cqi-axis so the size tracks each card's intrinsic width.
-       • `--complete-headline-size` — the per-consumer FONT-SIZE HOOK
-         that `CompleteHeadline.vue` reads (`font-size:
-         var(--complete-headline-size, …)`). Each consumer assigns the
-         canon clamp (`--text-celebration-headline-size`) to this hook
-         at the container so the headline pegs at the shared peak.
-         The default falls back to a smaller hero-rung clamp for
-         consumers that haven't opted into the celebration ceiling. */
+       §2.E CELEBRATION-TIER REGISTER
+
+       Shared peak for any "completion" / "thank-you" surface.
+
+       • `--celebration-row-rhythm` — gap between the cluster's rows (cqi-axis).
+       • `--text-celebration-headline-size` — the single designed peak both
+         celebration surfaces clamp toward (cqi-axis).
+       • `--complete-headline-size` — the per-consumer font-size hook a consumer
+         assigns the canon clamp to so its headline pegs at the shared peak;
+         the default falls back to a smaller hero-rung clamp.
+       ═══════════════════════════════════════════════ */
     --celebration-row-rhythm: clamp(0.5rem, 1.6cqi, 1rem);
     --text-celebration-headline-size: clamp(2.5rem, 12cqi, 9rem);
     --complete-headline-size: clamp(2.25rem, 11cqi, 4rem);
@@ -1276,36 +1182,196 @@
     /* ═══════════════════════════════════════════════
        §19 TABLE DENSITY
 
-       A single unitless knob `--table-density` scales the cell
-       padding and header row height of the Table / DataTable
-       primitive. Default `1` is backward-compatible (resolves to
-       the same `1rem` cell padding and `3rem` header height as the
-       pre-knob hardcoded values). Consumers set this on a wrapping
-       element or on `:root` to tune density for their context:
-
-         • 0.75 — compact admin table (tighter rows, more data/screen)
-         • 1    — default (unchanged)
-         • 1.25 — comfortable / touch-friendly rows
-
-       The derived tokens are read by the `table-cell` and `table-head`
-       CSS utilities (utilities.css) which TableCell.vue and TableHead.vue
-       consume instead of the former Tailwind `p-4` / `h-12` literals.
-       Changing `--table-density` cascades instantly via CSS inheritance —
-       no JS prop is needed.
+       A single unitless knob `--table-density` scales the cell padding +
+       header row height of the Table / DataTable primitive. Default `1`
+       resolves to 1rem cell padding + 3rem header height; 0.75 is a compact
+       admin table, 1.25 is comfortable/touch-friendly. The derived tokens are
+       read by the `table-cell` / `table-head` utilities; changing the knob
+       cascades instantly via CSS inheritance — no JS prop needed.
        ═══════════════════════════════════════════════ */
     --table-density: 1;
     --table-cell-px: calc(1rem * var(--table-density));
     --table-cell-py: calc(1rem * var(--table-density));
     --table-head-h: calc(3rem * var(--table-density));
     --table-head-px: calc(1rem * var(--table-density));
+
+    /* ═══════════════════════════════════════════════
+       §20 PLATFORM MOTION (AQ.W5)
+
+       The native-platform motion substrate axes. Three families, each read
+       by a `@supports`-gated CSS recipe in `scroll-driven.css`,
+       `animations.css` (§TOP-LAYER), and `view-transition.css` — every visual
+       knob a token so a consumer retunes without editing library source.
+
+       SCROLL-DRIVEN (scroll-driven.css). Values mirror the JS-fallback
+       composable defaults (`useScrollProgress` / `useStaggerReveal`) so the
+       native CSS path and the fallback path read identically — no visual seam
+       at the `@supports` boundary.
+
+       TOP-LAYER (animations.css §TOP-LAYER). The `@starting-style` entry/exit
+       grammar for native `<dialog>` / `[popover]` glass surfaces. Backdrop dim
+       uses the `hsl(var(--background) / α)` channel form — the legitimate
+       single-token alpha case (AQ.W2's color-mix migration is orthogonal).
+
+       VIEW-TRANSITION (view-transition.css). The shared `.gl-list-item` group
+       recipe + the `--vt-*` axes the `useViewTransition` substrate consumers
+       (dock layer swap, muster J's verdict re-rank) tune their swap against.
+       ═══════════════════════════════════════════════ */
+    --scroll-progress-scroller: root;
+    --scroll-reveal-rise: 6px;
+    --scroll-reveal-range-end: 60%;
+
+    --top-layer-enter-scale: 0.96;
+    --top-layer-backdrop-blur: 8px;
+    --top-layer-backdrop-dim: 0.5;
+
+    --vt-duration: var(--duration-normal);
+    --vt-ease: var(--ease-apple-spring);
+    --vt-rise: 8px;
+}
+
+/* ═══════════════════════════════════════════════
+   §-1b  LIGHT-DARK() COLOR ARCHITECTURE (AQ.W2 §2)
+
+   Every PAIRED color token (a token whose `:root` and `.dark` values are
+   BOTH a <color> and differ) folds onto one `light-dark(light, dark)`
+   declaration, keyed off the element's `color-scheme` (§-1). This is the
+   single-source-of-truth collapse of the `.dark` mirror AND the dynamism
+   win: an unregistered custom property holding a `light-dark()` expression
+   re-resolves under a descendant `color-scheme` override (a `.dark`
+   code-block embedded in a light page, or vice-versa).
+
+   DISCIPLINE (§2b — BINDING): these tokens MUST stay UNREGISTERED (no
+   `@property … syntax:"<color>"`). A registered <color> would resolve ONCE
+   at the declaring element and inherit the RESOLVED color, freezing the
+   descendant re-resolution. glass-ui's only `@property` registrations (§18)
+   are non-color (percentage/length), so the discipline holds — W2 adds NO
+   color `@property`.
+
+   The semantic `var()`-aliases (`--background`, `--muted`, `--border`,
+   `--secondary`, `--accent`, `--card-foreground`, …) do NOT appear here:
+   they point at the SAME source name in both modes and auto-track once the
+   `--neutral-*` ladder + `--foreground` resolve via `light-dark()`. Their
+   redundant `.dark` re-declarations DELETE below.
+
+   FALLBACK (§2c): this whole block is `@supports`-gated, so an engine
+   WITHOUT `light-dark()` skips it and the retained `.dark` class block (the
+   SOLE fallback floor) drives dark exactly as at HEAD. `light-dark()` is the
+   enhancement OVER the class — not a parallel alias. Baseline Newly
+   Available; the fallback floor is the pre-existing class block (net-zero
+   new fallback LOC).
+   ═══════════════════════════════════════════════ */
+@supports (color: light-dark(white, black)) {
+    :root {
+        /* Neutral ladder — the source the var()-aliases track */
+        --neutral-0: light-dark(hsl(48 12% 98%), hsl(24 8% 6%));
+        --neutral-1: light-dark(hsl(48 10% 95%), hsl(24 6% 11%));
+        --neutral-2: light-dark(hsl(48  9% 90%), hsl(24 5% 16%));
+        --neutral-3: light-dark(hsl(48  8% 82%), hsl(24 5% 22%));
+        --neutral-4: light-dark(hsl(48  7% 70%), hsl(24 5% 34%));
+        --neutral-5: light-dark(hsl(48  6% 40%), hsl(48 5% 62%));
+        --neutral-6: light-dark(hsl(48  7% 30%), hsl(48 6% 72%));
+
+        /* Core surfaces + ink */
+        --foreground:                 light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
+        --card:                       light-dark(var(--neutral-0), hsl(24 8% 10%));
+        --popover:                    light-dark(var(--neutral-0), hsl(24 8% 10%));
+        --surface-public-data-panel:  light-dark(hsl(44 16% 96%), hsl(36 9% 12%));
+
+        --primary:                 light-dark(hsl(24 10% 10%), hsl(48 10% 90%));
+        --primary-foreground:      light-dark(var(--neutral-0), hsl(24 10% 10%));
+        --destructive:             light-dark(hsl(0 72% 50%), hsl(0 62.8% 30.6%));
+        --destructive-foreground:  light-dark(var(--neutral-0), hsl(48 10% 90%));
+        --ring:                    light-dark(hsl(24 10% 10%), hsl(48 10% 70%));
+        --shadow:                  light-dark(hsl(24 10% 10%), hsl(0 0% 5%));
+
+        /* §4 native-control accent — the per-mode arms (dark reads the
+           mid-tone ring for checkmark-glyph contrast headroom, NOT the
+           near-white dark primary). Joins the light-dark() collapse; still
+           re-specified as `accent-color` inside `.dark` per §2b. */
+        --accent-color:            light-dark(var(--primary), var(--ring));
+
+        /* Section palette — jewel tones brightened ~20% L for dark */
+        --section-color-0:   light-dark(hsl(334 63% 47%), hsl(334 72% 70%));
+        --section-color-1:   light-dark(hsl(272 44% 47%), hsl(272 54% 73%));
+        --section-color-2:   light-dark(hsl(224 58% 46%), hsl(224 67% 72%));
+        --section-color-3:   light-dark(hsl(194 62% 36%), hsl(194 61% 64%));
+        --section-color-4:   light-dark(hsl(163 46% 35%), hsl(163 50% 60%));
+        --section-color-5:   light-dark(hsl(35 70% 42%),  hsl(37 73% 67%));
+        --section-color-6:   light-dark(hsl(6 72% 49%),   hsl(6 77% 66%));
+        --section-color-7:   light-dark(hsl(286 46% 47%), hsl(286 58% 72%));
+        --section-color-8:   light-dark(hsl(342 62% 44%), hsl(342 71% 69%));
+        --section-color-9:   light-dark(hsl(205 20% 38%), hsl(205 24% 70%));
+        --section-color-10:  light-dark(hsl(86 38% 36%),  hsl(86 44% 63%));
+        --section-color-11:  light-dark(hsl(187 58% 39%), hsl(187 63% 65%));
+        --section-color-12:  light-dark(hsl(256 44% 52%), hsl(256 60% 74%));
+
+        --accent-pink:     light-dark(hsl(330 65% 55%), hsl(335 55% 65%));
+        --section-heading: light-dark(hsl(328 60% 46%), hsl(330 55% 68%));
+        --accent-red:      light-dark(hsl(0 72% 50%),   hsl(0 68% 62%));
+
+        /* Viz basis (amber/green stay var()-aliases → auto-track) */
+        --viz-fourier:   light-dark(hsl(6 72% 49%),   hsl(6 77% 66%));
+        --viz-chebyshev: light-dark(hsl(224 58% 46%), hsl(224 67% 72%));
+        --viz-legendre:  light-dark(hsl(286 46% 47%), hsl(286 58% 72%));
+
+        /* WCAG companion chart labels */
+        --chart-ping-label:     light-dark(oklch(0.40 0.18 230), oklch(0.85 0.12 230));
+        --chart-download-label: light-dark(oklch(0.40 0.20 22),  oklch(0.85 0.14 22));
+        --chart-upload-label:   light-dark(oklch(0.40 0.16 55),  oklch(0.85 0.12 55));
+        --chart-jitter-label:   light-dark(oklch(0.40 0.20 305), oklch(0.85 0.14 305));
+
+        /* Semantic UI accents */
+        --tier-featured: light-dark(hsl(45 100% 50%),  hsl(45 100% 60%));
+        --tier-saved:    light-dark(hsl(210 100% 60%), hsl(210 100% 70%));
+        --like:          light-dark(hsl(0 80% 60%),    hsl(0 80% 68%));
+        --success:       light-dark(hsl(142 71% 45%),  hsl(142 71% 58%));
+        --warning:       light-dark(hsl(38 92% 50%),   hsl(38 92% 60%));
+        --info:          light-dark(hsl(217 91% 60%),  hsl(217 91% 70%));
+        --delete:        light-dark(hsl(0 70% 55%),    hsl(0 70% 62%));
+
+        /* Semantic foregrounds (warning-foreground is identical both modes
+           → stays a single light-mode declaration, no light-dark() needed) */
+        --success-foreground: light-dark(var(--neutral-0), hsl(48 10% 96%));
+        --info-foreground:    light-dark(var(--neutral-0), hsl(48 10% 96%));
+
+        /* Cartoon-shadow color primitives (§2d — plain colors, convert) */
+        --shadow-cartoon-color:      light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.07));
+        --shadow-cartoon-color-soft: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.03));
+
+        /* Gold family */
+        --gold:       light-dark(hsl(43 74% 49%),  hsl(43 74% 55%));
+        --gold-light: light-dark(hsl(51 100% 50%), hsl(51 100% 55%));
+        --gold-dark:  light-dark(hsl(34 87% 38%),  hsl(34 87% 45%));
+    }
 }
 
 /* ═══════════════════════════════════════════════
    DARK MODE — warm dark, section palette brightened ~20% L
+
+   FALLBACK FLOOR (AQ.W2 §2c): this class block is the SOLE non-light-dark()
+   dark path. On a `light-dark()`-supporting engine with `.dark` present,
+   `.dark { color-scheme: dark }` (§1) makes every §-1b token resolve to its
+   dark arm and these explicit dark values agree with it (kept as the floor
+   for non-supporting engines). The pure `var()`-alias re-declarations
+   (`--muted`/`--secondary`/`--accent`/`--border`/`--input`/… and the
+   `--background`/`*-foreground` aliases) are DELETED — they auto-track the
+   `--neutral-*` ladder + `--foreground` resolved above; only EXPLICIT-color
+   dark values (and the non-color overrides §2d) stay.
    ═══════════════════════════════════════════════ */
 .dark {
+    /* §1 — hard-pin native chrome to dark regardless of OS preference. §4 —
+       re-specify the inherited `accent-color` so it re-resolves to the dark
+       arm (§2b: an inherited built-in <color> set at `:root` would freeze to
+       the light shade without this re-specification). */
+    color-scheme: dark;
+    accent-color: var(--accent-color);
+
     /* Neutral scale mirrors light-mode pattern: step UP from the background's
-       low L toward foreground. Same perceptual deltas as light. */
+       low L toward foreground. Same perceptual deltas as light. FALLBACK
+       FLOOR — kept verbatim for non-light-dark() engines (§2c); on a
+       supporting engine `color-scheme: dark` (above) drives the §-1b
+       light-dark() arms and these agree. */
     --neutral-0: hsl(24 8% 6%);    /* L 6  — page surface (dark) */
     --neutral-1: hsl(24 6% 11%);   /* L 11 — soft field */
     --neutral-2: hsl(24 5% 16%);   /* L 16 — chip / tab-inactive */
@@ -1319,25 +1385,19 @@
        (cf. neutral-5's 7.39:1). */
     --neutral-6: hsl(48 6% 72%);   /* L 72 — strong-muted text (secondary register) */
 
-    --background: var(--neutral-0);
+    /* --background / --card-foreground / --popover-foreground / --muted /
+       --muted-foreground{,-strong} / --secondary{,-foreground} /
+       --accent{,-foreground} / --border / --input are pure var()-aliases —
+       DELETED here (AQ.W2 §2a): they auto-track the --neutral-* ladder +
+       --foreground above. Re-declaring them would be redundant. */
     --foreground: hsl(48 10% 90%);
     --card: hsl(24 8% 10%);
-    --card-foreground: var(--foreground);
     --popover: hsl(24 8% 10%);
-    --popover-foreground: var(--foreground);
-
-    --muted: var(--neutral-1);
-    --muted-foreground: var(--neutral-5);
-    /* W7-α' (AK-FD1) — strong-muted secondary text. Auto-tracks the dark
-       neutral-6 rung above; by-colour, not alpha. */
-    --muted-foreground-strong: var(--neutral-6);
-    --secondary: var(--neutral-2);
-    --secondary-foreground: var(--foreground);
-    --accent: var(--neutral-3);
-    --accent-foreground: var(--foreground);
 
-    --border: var(--neutral-4);
-    --input: var(--neutral-4);
+    /* R0G-5 (AO.W4) — dark mirror of the warm-neutral public-data panel.
+       --card's dark hsl(24 8% 10%) nudged one warmth step toward amber
+       (24→36) + +1 sat + +2 L so the dark dashboard panel lifts off the page. */
+    --surface-public-data-panel: hsl(36 9% 12%);
 
     --primary: hsl(48 10% 90%);
     --primary-foreground: hsl(24 10% 10%);
@@ -1368,8 +1428,9 @@
     --viz-fourier:   hsl(6 77% 66%);
     --viz-chebyshev: hsl(224 67% 72%);
     --viz-legendre:  hsl(286 58% 72%);
-    --viz-amber:     var(--section-color-5);
-    --viz-green:     var(--section-color-4);
+    /* --viz-amber / --viz-green / --meter-track-stroke are pure var()-aliases
+       (→ --section-color-5/-4 / --foreground) — DELETED (§2a); they auto-track
+       their sources, which convert via §-1b. */
 
     /* O.W6 Lane D — WCAG companion labels lift to L≈0.85 against the
        deep dark canvas; same two-token discipline as light mode (canvas
@@ -1379,11 +1440,6 @@
     --chart-upload-label:   oklch(0.85 0.12 55);
     --chart-jitter-label:   oklch(0.85 0.14 305);
 
-    /* O.W6 Lane D — Meter track stroke dark companion. Mirrors `:root`
-       (was speedtest's consumer-side `var(--background)` — bg-on-bg
-       invisible at dark mode; F1.V-02 closure). */
-    --meter-track-stroke: var(--foreground);
-
     --tier-featured: hsl(45 100% 60%);
     --tier-saved:    hsl(210 100% 70%);
     --like:          hsl(0 80% 68%);