@mkbabb/glass-ui 3.10.1 → 3.11.0

package/src/styles/glass.css

@@ -1,25 +1,22 @@
 /* Glass utilities — glassmorphism surface classes referencing --glass-* tokens
  *
- * ── No-PLATE-on-PLATE discipline (re-scoped under the glass-first default) ──
- * Apple's Liquid Glass guidance reserves glass for the floating layers; glass-ui
- * adopts the RUNG-PAIRING rule across three layer bands (the z-index registry
- * already encodes them, tokens.css §3 `--z-*`):
+ * ── No-glass-on-glass discipline (AV.W15 D5) ───────────────────────────────
+ * Apple's Liquid Glass guidance: "glass is best reserved for the navigation
+ * layer that floats above the content" — there is no glass-on-glass. glass-ui
+ * adopts the same RUNG-PAIRING rule across three layer bands (the existing
+ * z-index registry already encodes them, tokens.css §3 `--z-*`):
  *
- *   content    (--z-background … --z-content)  — the page substrate.
+ *   content    (--z-background … --z-content)  — the page substrate; NOT glass.
  *   navigation (--z-controls … --z-dock/panel) — the glass band (dock, panels,
  *                                                 floating chrome).
  *   overlay    (--z-overlay … --z-modal)       — the glass band (dialog/sheet
  *                                                 over content).
  *
- * The discipline bans PLATE-in-PLATE: a second `.glass-*` PANEL nested inside a
- * glass panel is a violation (the blur stacks muddy, the rim doubles, the read
- * collapses) — the inner PANEL should read as a flat tier. But CONTROL-on-plate
- * is SANCTIONED: under the glass-first maximal default, `btn-glass` (a real
- * backdrop-filter control) inside `.glass-card` inside a glass Dialog is the
- * COMMON composition. The depth-3 ceiling + `contain: paint` budget that keeps
- * the nested blur cheap is gated by W-A11Y-PERF (the enforcement half); this
- * header is the doc half. Bottom line: do not nest a glass PANEL inside a glass
- * panel; a glass CONTROL on a glass plate is fine and budget-gated.
+ * A glass surface nested INSIDE another glass surface is a discipline violation
+ * — the inner surface should read as a FLAT tier (a `--card` / `--muted` fill),
+ * not a second `.glass-*` plate (the blur stacks muddy, the rim doubles, the
+ * read collapses). Reach for glass in the navigation/overlay bands only; inside
+ * a glass panel, compose flat tiers.
  *
  * ── iOS-spring-on-controls cross-ref (AV.W15 C/M cross-ref) ────────────────
  * The momentum-gated press squish (the control's "lift up on touch, quiet at
@@ -29,22 +26,1182 @@
  * (AV.W9, velocity continuity) and the slider arm (AV.W11); it is cross-
  * referenced here and authored there, not re-derived. See
  * `src/components/custom/dock/README.md` for the canonical discipline.
- *
- * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
- * The glass rule body is carved into cohesive `glass/*.css` partials (each
- * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
- * The base ladder splits into three adjacent `@layer components` blocks
- * (material · ladder · surfaces) — same layer, same source order, so the carve
- * is isomorphic. The squircle `@supports` arm and the a11y `@media`/`@supports`
- * overrides MUST stay AFTER the base ladder (they override it). See
- * docs/precepts/design-idioms.md §cohesion-aware partials.
  */
 
-/* CSS @import rules must precede every other rule. The six partials @import in
-   cascade order: */
-@import "./glass/material.css";
-@import "./glass/ladder.css";
-@import "./glass/surfaces.css";
-@import "./glass/progress-rail.css";
-@import "./glass/squircle.css";
-@import "./glass/a11y-fallback.css";
+@layer components {
+    /* ── The unified glass material (AW.W22) ──────────────────────────────
+       ONE source for the three material atoms that AV.W15 scattered onto
+       opt-in classes + single tiers:
+         (a) the moving-specular `::before` catch-light (folded here from
+             glass-specular-track.css — that file now keeps only the thin
+             `.glass-specular-track` ALIAS + the brackets that point HERE),
+         (b) the `--glass-edge-light` full-perimeter rim (moved off the
+             floating-only block so EVERY rung carries it),
+         (c) the pointer interaction-light hooks (the `--specular-*`
+             `@property` channel mapped from the consumer's --mouse-x/--mouse-y
+             write).
+       The five ladder rungs + `.glass-card` + the `.dock-icon-button` CONTROL
+       compose `.glass-material`, so a Switch thumb, a glass Button, a Dialog,
+       and a Sheet all read as the SAME material without per-component wiring.
+
+       The `.glass-dock` SHELL is OUT of this group BY DESIGN — it hand-rolls a
+       parallel surface (its own `--glass-*-dock` family + a local rim + an
+       instrument-strip `::before`) the dock arm owns. The COHESION CONSEQUENCE is
+       DELIBERATE: the dock shell carries NO shared edge-gleam / moving-specular
+       `::before` (its only `::before` is the `variant-instrument-strip` engraved
+       bezel, dock/shell.css — a different effect). The dock's catch-light lives on
+       its CONTROLS (`.dock-icon-button` et al., listed below + in the opt-in
+       transition block), which ARE in the material group — NOT on the shell plate.
+       Adding a shell gleam would re-introduce glass-on-glass over the controls, so
+       the shell-without-gleam is a NAMED EXEMPTION, gated as `dock-shell-exempt` in
+       proof:glass-cohesion (the only exemption beside the legibility allowlist).
+
+       The selector GROUP is the single source. Adding a surface to the band
+       material is one comma-entry here, not a new opt-in class string. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-specular-track,
+    .dock-icon-button,
+    .dock-tab-button,
+    .dock-select-trigger,
+    .dock-dropdown-trigger {
+        position: relative;
+    }
+
+    /* (b) The rim — UNIFORM across all rungs (ONE `--glass-edge-light` token,
+       not a per-rung family). The floating/overlay tiers previously wired it
+       into their box-shadow stack; it now rides the material group as a
+       dedicated `::after` inset ring so it composes alongside (not inside) each
+       tier's own shadow recipe. The `::after` grain overlay already claims the
+       five rungs' `::after`; the rim is folded INTO that same overlay's
+       box-shadow below (the grain `::after` gets the rim inset ring) so no
+       pseudo-element collides. */
+
+    /* (a)+(c) The moving-specular `::before` catch-light — the iOS-26
+       illuminate-from-within behaviour. A masked radial-gradient glow rides the
+       surface at the pointer position (--mouse-x/--mouse-y → the typed
+       --specular-* channel). Folded VERBATIM from glass-specular-track.css so
+       there is exactly ONE specular source. */
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .glass-specular-track::before,
+    .dock-icon-button::before,
+    .dock-tab-button::before,
+    .dock-select-trigger::before,
+    .dock-dropdown-trigger::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        pointer-events: none;
+        z-index: 1;
+        /* Map the consumer's pointer write onto the typed properties, ON THE
+           PSEUDO. The `--mouse-x/--mouse-y` write lands on the HOST (inline
+           style) as UNREGISTERED props that inherit down to this `::before`;
+           the registered `--specular-*` props are `inherits: false`, so the
+           mapping is declared HERE where the pseudo owns its typed value. The
+           `var(--mouse-x, 50%)` floor is the centred fallback. */
+        --specular-x: var(--mouse-x, 50%);
+        --specular-y: var(--mouse-y, 50%);
+        /* The catch-light intensity at REST — reads the token cohort
+           (tokens.css §specular-intensity), default 0 so a static, unwired
+           surface is CLEAN and the @property `initial-value: 0` dormancy is no
+           longer defeated by a floor. Hover/active lift it through the same
+           cohort (the interaction-light state machine below). */
+        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+        /* AX.W52 D19 — a thin, BOUNDED, pointer-anchored EDGE gleam (not the prior
+           full-plate central disc that washed small tiles muddy). The geometry is an
+           EXPLICIT-radius circle bounded by `--glass-specular-size` (36% of the
+           plate) whose falloff reaches `/0` well INSIDE the plate (70%) — a tracked
+           catch-light reading the surface near the lit edge, NEVER a whole-surface
+           wash. The core is genuinely WARM-CREAM (L < 100% so the warm hue survives;
+           the prior `hsl(40 30% 100%)` blew out to white). The `--specular-intensity`
+           multiplier drives the layer `opacity`, NOT a per-stop alpha (a
+           registered-`@property` var() nested in an hsl() alpha computes to 0 in
+           Chromium — the cross-engine-safe path); the per-stop alphas are literals so
+           even the lifted hover/active states read as a lens, not a flash. */
+        background: radial-gradient(
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+            hsl(40 35% 92% / 0.5) 0%,
+            hsl(40 35% 92% / 0) 70%,
+            transparent 100%
+        );
+        opacity: var(--specular-intensity, 0);
+        /* Clip the gleam to ITS OWN radius (not the whole plate) so it stays a
+           bounded glint. `mask-image` Baseline 2023-12-07; a non-supporting engine
+           ignores it and the `inset: 0` + radius-inherit + the in-paint falloff
+           already bound the gleam to the surface. */
+        mask-image: radial-gradient(
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+            black 0%,
+            black 60%,
+            transparent 100%
+        );
+        /* AX.W52 D19 — `plus-lighter` (additive but HDR-clamped, Safari 16.4+) over
+           the prior `screen` (a non-linear lightener that lifted the whole tile
+           toward white — the muddy-card defect). A non-supporting engine degrades to
+           a plain low-alpha warm overlay (the gleam composes normally — no blend, no
+           blowout), the no-workaround floor; NOT a `screen` fallback. */
+        mix-blend-mode: plus-lighter;
+        /* The moving-specular TRANSITION is NOT declared here. An idle/unwired
+           `::before` is STATIC (no interpolation track), so a bare glass rung / an
+           un-armed Card / a glass Button at rest attaches ZERO animation tracks (the
+           keyframes.js runtime counts 0 idle tracks, not 19). The transition rides
+           ONLY the WIRED + interactive surfaces — the opt-in scoped block below. */
+    }
+
+    /* AY.W-GLASS — the moving-specular transition is OPT-IN (the Card wire-or-omit
+       pattern, generalized). It attaches ONLY to a WIRED surface
+       (`.glass-specular-track` — Card emits it conditionally, the dock controls + the
+       Slider thumb compose it) OR to any glass surface under `:hover`/`:active` (the
+       pointer is present, so the interpolation is legitimately live). An idle/unwired
+       `.glass-floating` / `.glass-wash` / bare-rung `::before` carries NO transition
+       and thus NO keyframes.js track. The §6 register is PRESERVED (still
+       `--ease-standard` on the position-tracked + surface-opacity legs — H-motion §6
+       "position-tracked → --ease-standard"; only the SELECTOR scope changes). The dock
+       controls keep the always-on transition (they are interactive controls; their rest
+       intensity is 0 so they paint nothing at rest, but a control legitimately carries
+       the transition). */
+    .glass-specular-track::before,
+    .glass-material:hover::before,    .glass-material:active::before,
+    .glass-wash:hover::before,        .glass-wash:active::before,
+    .glass-quiet:hover::before,       .glass-quiet:active::before,
+    .glass-resting:hover::before,     .glass-resting:active::before,
+    .glass-floating:hover::before,    .glass-floating:active::before,
+    .glass-overlay:hover::before,     .glass-overlay:active::before,
+    .glass-card:hover::before,        .glass-card:active::before,
+    .dock-icon-button::before,
+    .dock-tab-button::before,
+    .dock-select-trigger::before,
+    .dock-dropdown-trigger::before {
+        /* Smooth the position + intensity between pointer samples (the typed
+           @property regs make the percentage stops interpolable). */
+        transition:
+            --specular-x var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            --specular-y var(--duration-fast, 150ms) var(--ease-standard, ease-out),
+            opacity var(--duration-normal, 240ms) var(--ease-standard, ease-out);
+    }
+
+    .dark .glass-material::before,
+    .dark .glass-wash::before,
+    .dark .glass-quiet::before,
+    .dark .glass-resting::before,
+    .dark .glass-floating::before,
+    .dark .glass-overlay::before,
+    .dark .glass-card::before,
+    .dark .glass-specular-track::before,
+    .dark .dock-icon-button::before,
+    .dark .dock-tab-button::before,
+    .dark .dock-select-trigger::before,
+    .dark .dock-dropdown-trigger::before {
+        /* Softer over the deep canvas — `plus-lighter` still lifts on dark, so the
+           `.dark` cohort runs a lower hover/active rung (tokens.css §specular-
+           intensity `.dark` arm); the rest rung is already 0 so the dark arm only
+           softens hover/active via the cohort. The rest rung re-reads the (dark)
+           token here so a dark `:root` override resolves. */
+        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+    }
+
+    /* (c) Interaction-light lockstep — hover/active lift the intensity in the
+       SAME rungs the scale-press squish keys off, so material-light fires in
+       lockstep with the press across every glass surface. Settles back on leave
+       via the opacity transition above. */
+    .glass-material:hover::before,
+    .glass-wash:hover::before,
+    .glass-quiet:hover::before,
+    .glass-resting:hover::before,
+    .glass-floating:hover::before,
+    .glass-overlay:hover::before,
+    .glass-card:hover::before,
+    .glass-specular-track:hover::before,
+    .dock-icon-button:hover::before,
+    .dock-tab-button:hover::before,
+    .dock-select-trigger:hover::before,
+    .dock-dropdown-trigger:hover::before {
+        --specular-intensity: var(--glass-specular-intensity-hover, 0.1);
+    }
+    .glass-material:active::before,
+    .glass-wash:active::before,
+    .glass-quiet:active::before,
+    .glass-resting:active::before,
+    .glass-floating:active::before,
+    .glass-overlay:active::before,
+    .glass-card:active::before,
+    .glass-specular-track:active::before,
+    .dock-icon-button:active::before,
+    .dock-tab-button:active::before,
+    .dock-select-trigger:active::before,
+    .dock-dropdown-trigger:active::before {
+        --specular-intensity: var(--glass-specular-intensity-active, 0.16);
+    }
+
+    /* AX.W45-TUNE C5 — the SELECTED dock control reads as the keyframes-dock glass
+       register: a glass-tier active fill (`--dock-control-active-bg` → the floating
+       plate, tokens.css) WITH the specular gleam waking over it, not a flat ink
+       stamp. The CSS `:active` pseudo above only fires on press-down; a SELECTED tile
+       (`.is-active` / `[aria-pressed]` / `[aria-expanded]` / `[aria-current]`) holds
+       the gleam lit so the selected element reads as a lit glass tier the substrate
+       shows through (the model the user named, `pass-3:13`). Family-scoped addition
+       on the dock-control `::before`, line-disjoint from the shared recipe above. */
+    .dock-icon-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-tab-button:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-select-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before,
+    .dock-dropdown-trigger:is(.is-active, .active, [aria-pressed="true"], [aria-expanded="true"], [aria-current="page"])::before {
+        --specular-intensity: var(--glass-specular-intensity-active, 0.16);
+    }
+
+    /* ── LIQUID by tier — the moving-specular hover catch-light is the
+       FLOATING / OVERLAY tier's PROPERTY, not a per-surface wire (D6.c M10) ──────
+       The shared `:hover::before` rule above already lifts `--specular-intensity`
+       to the hover rung on EVERY material surface, so the catch-light wakes on
+       hover library-wide. What this block promotes is the FLOATING / OVERLAY
+       tier's identity: a navigation/overlay-band surface (a Dialog, a Sheet, a
+       Popover, the dock crest's `.glass-floating`) reads as LIQUID OUT OF THE BOX
+       — the catch-light is a tier guarantee, documented here so a consumer reaches
+       for `variant="floating"` and inherits the lens without a `useSpecularTracking`
+       wire. The pointer-anchored TRACKING still rides `useSpecularTracking` (a
+       host can sharpen the lens to the cursor); un-wired, the catch-light sits at
+       the centred `50%` fallback and breathes on hover — felt, not garish.
+
+       The magnitude rides the SAME `--glass-specular-intensity-hover` cohort the
+       aurora-calibrated π-ledger judges (tokens.css §specular-intensity), so the
+       liquid tier never out-shouts a number — it is the SAME gleam, named as a
+       tier default. The OPT-OUT survives: `.glass-no-liquid` on a floating/overlay
+       surface pins the rest rung (a flat tier for dense data, the deft escape). */
+    .glass-floating:not(.glass-no-liquid),
+    .glass-overlay:not(.glass-no-liquid) {
+        --glass-liquid: 1; /* the tier carries the liquid identity (informational marker) */
+    }
+    .glass-floating.glass-no-liquid:hover::before,
+    .glass-overlay.glass-no-liquid:hover::before,
+    .glass-floating.glass-no-liquid:active::before,
+    .glass-overlay.glass-no-liquid:active::before {
+        /* The deft escape — a dense-data floating surface that wants a FLAT tier
+           pins the catch-light at the clean rest rung even on hover/active. */
+        --specular-intensity: var(--glass-specular-intensity-rest, 0);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        /* PRM fence — the liquid tier degrades to the static centred gleam. The
+           `useSpecularTracking` write is already PRM-gated (it skips the pointer
+           write under reduce); this pins the CSS half (`--specular-x/y: 50%`
+           centred) AND kills the position-track `transition` so an un-wired liquid
+           tile does NOT animate a travelling catch-light on hover under PRM. The
+           gleam may still LIFT on hover (a discrete opacity step, no interpolation
+           track) — the correct PRM degrade: no MOTION, the surface still responds.
+           This mirrors the shared moving-specular PRM bracket (one static-pin
+           convention across the specular cohort). */
+        .glass-floating::before,
+        .glass-overlay::before {
+            --specular-x: 50%;
+            --specular-y: 50%;
+            transition: none;
+        }
+    }
+
+    /* ── The GILT EDGE — `.glass-gilt`, the gilt-tooled glass modifier (D6.c M3/M12) ──
+       A fine book's cover is gold-tooled at the EDGE — never a gold fill. The
+       modifier composes on ANY tier (the tier is the FROST; the gilt is the
+       hairline gold catch on its rim) so a featured card OR the dock crest wears
+       the same recipe over its own backdrop. Two box-shadow layers ride INSIDE
+       the tier (they do not perturb the tier's own elevation stack — they are
+       additive inset rings):
+         (1) a 1px inset ring on `--gold-rim` — the tooled gold edge (D6.b lands
+             `--gold-rim` = `--gold` at ~40%α over the surface; referenced by name,
+             so the gilt resolves the moment the token cohort is minted), and
+         (2) a 0.5px gold top-catch highlight — the bevel light reading off the
+             upper edge, `--gold-light` at low α so it is a catch, not a band.
+       The surface still reads as cream-glass; the gold is the bevel light, the
+       SCARCE flourish (the consumption budget — at most one gilt surface per
+       route — is the atlas's D7 rule, not enforced here). */
+    .glass-gilt {
+        box-shadow:
+            inset 0 0 0 1px var(--gold-rim, color-mix(in oklab, var(--gold) 40%, transparent)),
+            inset 0 0.5px 0 0 color-mix(in oklab, var(--gold-light) 35%, transparent),
+            var(--glass-material-rim),
+            var(--glass-shadow-floating);
+    }
+
+    /* The liquid-metal CATCH-LIGHT (D6.c M12) — `.glass-gilt` overrides the
+       moving-specular `::before` sweep COLOR from warm-cream to GOLD, so the light
+       travelling across the gilt edge is golden the way gold leaf catches a warm
+       highlight. This is the single richest moment in the platform — gold + liquid
+       + specular — and therefore the most scarce (ONE surface ever, the title-page
+       flourish; the budget lives in D7). The geometry (bounded circle, the
+       `--glass-specular-size` falloff, the `plus-lighter` blend, the mask) is
+       INHERITED verbatim from the shared `::before`; only the gradient color stops
+       shift to the warm-gold mix. The intensity still rides the `--specular-intensity`
+       opacity multiplier (0 at rest), so a resting gilt surface paints NO gold sweep
+       — it wakes on hover like every liquid tier. */
+    .glass-gilt::before {
+        background: radial-gradient(
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
+            color-mix(in oklab, var(--gold-light) 60%, hsl(40 35% 92%)) 0%,
+            hsl(40 35% 92% / 0) 70%,
+            transparent 100%
+        );
+    }
+
+    /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
+       Tier semantics, alpha-monotonic per R3-spec §A:
+         wash      ~0.30α  + light blur      (was `subtle`)
+         quiet     ~0.50α  + medium blur     (the missing rung)
+         resting   ~0.65α  + canonical blur  (was `default`; the speedtest plate)
+         floating  ~0.80α  + heavier blur    (was `elevated`)
+         overlay   ~0.95α  + heaviest blur   (NEW; modal-over-modal) */
+
+    /* The five-rung surface ladder declares the unprefixed
+       `backdrop-filter` only. Lightning CSS / autoprefixer in the
+       consumer's pipeline emits the `-webkit-` legacy form when
+       browserslist targets demand it. Authoring both forms manually
+       caused Lightning CSS in Tailwind v4 to dedup-and-keep-prefixed,
+       which modern Chromium then dropped from the CSSOM (the prefixed
+       alias is parser-rejected post-Chrome 113). Single-source-of-truth
+       authorship lets the build pipeline deliver the right matrix. */
+    /* AW.W23 — every rung's background composes the adaptive-tint recipe
+       (`color-mix(in oklab, <rung bg>, var(--glass-tint-source) var(--glass-tint-
+       strength))`). With the default `--glass-tint-strength: 0%` the mix is a
+       no-op = byte-identical to the un-tinted rung; a consumer biases the surface
+       toward a sampled backdrop hue by setting `--glass-tint-source` + a
+       strength ≤30%. oklab is the mwg-preferred tint space (NEVER an
+       `oklch(from …)` lightness-shift — browsers don't gamut-map yet). */
+    .glass-wash {
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-wash);
+        border: 1px solid var(--glass-border-wash);
+        box-shadow: var(--glass-material-rim), var(--glass-shadow-wash);
+    }
+
+    /* AL-W10 SLIM under-shadow wiring (tokens.css §AL-W10 SLIM —
+       UNDER-SHADOW recipe rungs). Each tier composes its canonical
+       iOS Liquid Glass under-shadow (a 0.5px dark hairline along the
+       bottom edge reading as glass thickness) as a NON-INSET layer
+       PREPENDED to the existing `--glass-shadow-*` recipe — the under-
+       shadow lays the floor; the existing shadow stack lays the lift.
+         quiet   → `--glass-under-shadow-quiet`   (0 2px 8px -1px α0.04)
+         resting → `--glass-under-shadow-default` (0 4px 16px -2px α0.08)
+         floating→ `--glass-under-shadow-vivid`   (0 8px 32px -4px α0.12)
+       `.glass-wash` is sub-perceptual; `.glass-overlay` is modal-heavy
+       — neither composes an under-shadow rung (Y4/Y6/Y7 SLIM retention).
+       Spine tier wires its own rung at instrument-chassis.css. */
+    .glass-quiet {
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-quiet);
+        border: 1px solid var(--glass-border-quiet);
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-quiet),
+            var(--glass-shadow-quiet);
+    }
+
+    .glass-resting {
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-resting);
+        border: 1px solid var(--glass-border-resting);
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-default),
+            var(--glass-shadow-resting);
+    }
+
+    /* AV.W15 M3 / AW.W22 — the floating tier carries the full-perimeter rim (the
+       catch-light that "defines the silhouette", WWDC25 sess. 219). The rim now
+       comes from the unified `--glass-material-rim` (= `--glass-edge-light`) so
+       it shares ONE source with the rest of the ladder; it rides INSIDE the
+       box-shadow stack so it composes with the under-shadow floor + the lift. */
+    .glass-floating {
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-floating);
+        border: 1px solid var(--glass-border-floating);
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-vivid),
+            var(--glass-shadow-floating);
+    }
+
+    .glass-overlay {
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-overlay);
+        border: 1px solid var(--glass-border-overlay);
+        box-shadow: var(--glass-material-rim), var(--glass-shadow-overlay);
+    }
+
+    /* ── Adaptive legibility: the bright-backdrop bucket (AX.W55 — the iOS-26/27
+       "locally darken the glass over light content" move; G2) ──────────────────
+       When a consumer sets `--glass-backdrop: light` on any ancestor (a near-white
+       card surface, a pale aurora bleed, a bright data grid), the `@container
+       style()` read engages here and LIFTS the tint toward ink: `--glass-tint-
+       strength` climbs from the `0%` rest default to the bounded AA floor
+       (`--glass-tint-strength-aa`, ≤24% — translucent floor preserved) and `--glass-
+       tint-source` re-points from `var(--card)` to the warm-ink `--glass-tint-ink`.
+       Both are INHERITING custom properties the rungs' `background:` composite
+       already reads, so re-pointing them on the material group re-resolves the
+       EXISTING `color-mix(in oklab, <rung bg>, …)` toward ink — ZERO new compositing
+       seam, the literal darken-over-light recipe. The `.glass-*::before` specular
+       `plus-lighter` gleam (W52) is untouched (it composes ON the darkened plate;
+       the darkening is the orthogonal oklab-tint axis). No `@supports` wrapper:
+       style queries introduce no new `container-type` value (every element is a
+       style container by default), so an engine without style-query support parses
+       the unknown at-rule as invalid, drops the block, and keeps the zero-delta
+       glass (the graceful degradation — the surface is today's-glass, the pre-W55
+       state; see utilities.css §density for the same precedent). */
+    @container style(--glass-backdrop: light) {
+        .glass-material,
+        .glass-wash,
+        .glass-quiet,
+        .glass-resting,
+        .glass-floating,
+        .glass-overlay,
+        .glass-card {
+            --glass-tint-source: var(--glass-tint-ink);
+            --glass-tint-strength: var(--glass-tint-strength-aa);
+        }
+    }
+
+    /* AX.W55 — the `contrast-color()` foreground-ink flip (Chrome 147+/Safari 26+).
+       A PROGRESSIVE-ENHANCEMENT layer, NEVER the load-bearing floor (Open-Q #5
+       ratified): the declarative bucket above already carries AA on ALL engines (it
+       darkens the translucent plate so dark text clears ~11:1 over white at the 18%
+       floor — the live π readback ratifies). On a supporting engine `contrast-color()`
+       REFINES the foreground-ink pick natively, anchored on the LIGHT BACKDROP signal
+       (`--card`, the warm-white surface base the bright bucket implies) — NOT on the
+       ink. `contrast-color(var(--card))` over the light backdrop resolves to the
+       maximally-legible DARK ink (anchoring on the dark ink instead would invert to
+       white, illegible on the still-light translucent plate). The bucket is the floor;
+       this is the native refinement. Scoped to the bright bucket. */
+    @supports (color: contrast-color(white)) {
+        @container style(--glass-backdrop: light) {
+            .glass-material,
+            .glass-wash,
+            .glass-quiet,
+            .glass-resting,
+            .glass-floating,
+            .glass-overlay,
+            .glass-card {
+                color: contrast-color(var(--card));
+            }
+        }
+    }
+
+    /* ── The opaque escape (AX.W54) ───────────────────
+       The level-0 endpoint of the SAME glass machinery — a solid `--card` plate
+       (the opacity seam → 1) with `blur(0)` (the blur seam → 0), routed through
+       the ONE `--glass-level` knob. NOT a parallel solid `background:` recipe:
+       a `.glass-*` surface that ALSO carries `.glass-opaque` keeps its glass edge,
+       rim, and under-shadow (a solid plate with a glass edge, not a bare div), and
+       the @supports fallback + the a11y brackets compose coherently. This is the
+       explicit opt-out from the MAXIMAL glass default (dense data, forced-colors,
+       a consumer that wants a flat surface). */
+    .glass-opaque {
+        --glass-level: 0;
+    }
+
+    /* ── Content-aware under-shadow modifier (AV.W15 M4) ──────────────
+       Apple raises the under-shadow over text (so the glass reads as
+       lifting OFF the text) and drops it over solid light. The modifier
+       is ATTRIBUTE-DRIVEN, no JS: a consumer adds `.glass-over-text`
+       (or `[data-over-content="text"]`) to a text-bearing glass surface to
+       swap it ONE under-shadow rung heavier, or `[data-over-content="solid"]`
+       to lighten it one rung over a solid-light backdrop. It reuses the
+       existing `--glass-under-shadow-{quiet,default,vivid}` rungs (no new
+       shadow value — `vivid` is sufficient over text), redefining only the
+       leading under-shadow layer per tier; the lift stack is untouched.
+
+       The selectors are per-tier so the swap is rung-correct
+       (quiet→default, resting→vivid). `.glass-floating` already sits at the
+       `vivid` ceiling over text, so the heavier variant is a no-op there
+       (the rung saturates) — documented, not an error. */
+    .glass-quiet.glass-over-text,
+    .glass-quiet[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-quiet);
+    }
+    .glass-resting.glass-over-text,
+    .glass-resting[data-over-content="text"] {
+        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-resting);
+    }
+
+    /* The inverse — over a solid-light backdrop the under-shadow lightens
+       one rung (the glass need not lift as hard off a flat bright field). */
+    .glass-resting[data-over-content="solid"] {
+        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-resting);
+    }
+    .glass-floating[data-over-content="solid"] {
+        box-shadow:
+            var(--glass-material-rim),
+            var(--glass-under-shadow-default),
+            var(--glass-shadow-floating);
+    }
+
+    /* Grain noise overlay — reuses paper texture SVG, no extra assets */
+    .glass-wash::after,
+    .glass-quiet::after,
+    .glass-resting::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        /* D6.c M5 — the grain rung lifted off the dead 0.025 floor to a felt-but-
+           deft 0.038 (the page rung; the kitsch ceiling is ~0.05). The canonical
+           token still wins; this is the felt floor a no-override mount inherits. */
+        opacity: var(--glass-grain-opacity, 0.038);
+        pointer-events: none;
+        mix-blend-mode: overlay;
+    }
+
+    /* (b) The unified rim — `--glass-edge-light` full-perimeter inset ring on
+       EVERY material surface (AW.W22). Previously the rim was wired only into
+       the floating/overlay tiers' box-shadow stack; promoting it to the material
+       group makes wash/quiet/resting/card/dock-control all carry the same
+       silhouette catch-light from ONE token. The rim is its OWN `box-shadow`
+       declaration on the material group so it composes uniformly without
+       perturbing each tier's elevation recipe (the floating/overlay tiers drop
+       their now-redundant inline `--glass-edge-light` layer below). The alpha is
+       deliberately low so the rim never eats AA legibility over a busy
+       backdrop. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-specular-track,
+    .dock-icon-button {
+        --glass-material-rim: var(--glass-edge-light);
+    }
+
+    .dark .glass-wash::after,
+    .dark .glass-quiet::after,
+    .dark .glass-resting::after,
+    .dark .glass-floating::after,
+    .dark .glass-overlay::after {
+        mix-blend-mode: soft-light;
+    }
+
+    /* ── Convenience shorthands (tier + shape) ── */
+
+    /* Static surface utility — no hover lift, no transition.
+       Interactive cards live in <Card> (which owns its own hover composition)
+       or in components that explicitly opt into a hover variant. */
+    .glass-card {
+        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
+           `:has(:focus-visible)` rule redefines them (one source, shared with
+           the fallback). */
+        --card-focus-shadow: var(--shadow-card);
+        --card-focus-border: var(--glass-border-quiet);
+        position: relative;
+        background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        backdrop-filter: var(--glass-blur-quiet);
+        border: 1px solid var(--card-focus-border);
+        border-radius: var(--radius-card);
+        box-shadow: var(--glass-material-rim), var(--card-focus-shadow);
+        contain: layout style;
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
+       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
+       `@supports not selector(:has(*))` class fallback (below) ships anyway
+       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+    .glass-card:has(:focus-visible) {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+
+    /* ── Glassmorphic circular icon button ── */
+
+    .glass-btn {
+        @apply flex items-center justify-center cursor-pointer;
+
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
+           mints the stacking context once so the hover/press scale below does
+           not flicker it into being (the z-index/anchor hazard). */
+        scale: 1;
+        width: var(--size-icon-btn);
+        height: var(--size-icon-btn);
+        border-radius: var(--radius-pill);
+        border: 1.5px solid var(--glass-border-wash);
+        background: var(--glass-bg-wash);
+        backdrop-filter: var(--glass-blur-wash);
+        color: var(--muted-foreground);
+        /* AX.W52 §6 doctrine — the surface legs ride the bezier `--ease-standard`;
+           the `scale` leg is reconciled onto `--spring-smooth` (was `--spring-snappy`)
+           so the icon-button hover settles on the SAME ONE register as `.btn-pill` /
+           `.tap-squish` / `btn-interactive` (the gate asserts one scale register
+           across all four). The press still reads crisp — `--spring-smooth` ζ=0.86
+           settles fast without a visible bounce. */
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            scale var(--duration-normal) var(--spring-smooth);
+    }
+
+    .glass-btn:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--background) 85%, transparent);
+        border-color: var(--surface-tint-22);
+        color: var(--foreground);
+        scale: var(--scale-hover);
+    }
+
+    .glass-btn:active:not(:disabled) {
+        scale: var(--scale-press);
+    }
+
+    .glass-btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    .glass-btn:disabled {
+        opacity: 0.35;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    .glass-btn.is-active,
+    .glass-btn[aria-pressed="true"] {
+        background: var(--surface-tint-10);
+        border-color: var(--surface-tint-25);
+        color: var(--foreground);
+    }
+
+    /* ── Pill button base ─────────────────────────── */
+    .btn-pill {
+        @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
+
+        /* AX.W52 §6 identity base — `scale: 1` at rest so the hover/press scale
+           below animates the `scale` longhand (not `transform`) coherently and
+           does not flicker the stacking context into being (AQ.W3 §W3.2). */
+        scale: 1;
+        /* AX.W51 D18 — the pill GEOMETRY rides the ONE `--ui-scale` comfort axis.
+           gap / padding scale by the master scalar; the font reads the
+           `--control-text` register (`calc(--type-small * --ui-scale)`, the same
+           `text-sm` register the Button CVA paints), so a bare `.btn-pill` consumer
+           and a `<Button>` agree on the control font, and ONE `--ui-scale` override
+           grows the pill's height (via padding) + gap + font in lockstep. Desktop
+           default is the identity (scale 1 → the prior proportion). */
+        gap: calc(0.375rem * var(--ui-scale));
+        border-radius: var(--radius-pill);
+        padding: calc(0.5rem * var(--ui-scale)) calc(1rem * var(--ui-scale));
+        font-size: var(--control-text);
+        /* AX.W52 — the ONE coherent button transition (RED witness 5/6). The
+           SURFACE legs (bg/border/box-shadow/color/opacity) ride the bezier
+           `--ease-standard` (a colour cross-fade reads as a wobble on a spring);
+           the TRANSFORM leg (`scale`) rides `--spring-smooth` (the sub-perceptual
+           settle), so the hover lift + the surface cross-fade read as ONE glide.
+           The DEAD `transform` leg is retired — the variants animate the `scale`
+           longhand. CRITICAL: `.tap-squish` (composed alongside on the button
+           base, utilities.css) ALSO lists this full coherent set, so neither
+           class's `transition` shorthand can clobber the other down to a
+           scale-only animation — the cascade bug that left every button
+           transitioning ONLY `scale` (the live-readback RED, RED witness 5). The
+           doctrine: surface-props→bezier, transform→spring (tokens.css §2). */
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth);
+    }
+
+    .btn-pill > * {
+        @apply flex-shrink-0;
+    }
+
+
+    .btn-pill:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+
+    /* ── Glass-button backdrop ─────────────────────────────────────────────
+       AX.W52 — the `glass`/`glass-wash` Button variants compose `.glass-wash`,
+       which resolves `--glass-blur-wash` = `blur(1px)` — a sub-perceptual
+       diffusion authored for a small detail TILE, not a button the user reads
+       as "glass" (the live readback found the glass variants at a negligible
+       1px). A hero control wants a real glass blur. `.btn-glass` re-points the
+       backdrop at `--glass-blur-btn` (the `quiet`-tier 10px radius + the gentle
+       `saturate(1.05) brightness(1.02)` light-concentration), so the glass
+       button variants actually read as liquid glass while the wash TILE tier
+       keeps its 1px untouched. Declares the UNPREFIXED `backdrop-filter` ONLY —
+       Lightning CSS emits the `-webkit-` companion per the single-source
+       authorship discipline above (hand-authoring both forms makes Lightning
+       dedup-and-keep-prefixed, which modern Chromium then drops). */
+    .btn-glass {
+        backdrop-filter: var(--glass-blur-btn);
+    }
+
+    /* ── Pill input ───────────────────────────────── */
+    .input-pill {
+        @apply flex w-full;
+
+        /* AX.W51 D18 — the input pill rides the ONE `--ui-scale` comfort axis: the
+           height reads the `--control-h-md` cohort (`max(calc(2.5rem * --ui-scale),
+           --control-floor)`, the h-10 register with the WCAG-44px coarse clamp), the
+           font reads `--control-text`, the inline padding scales — so ONE override
+           grows the field's height + padding + font in lockstep. Desktop default is
+           the identity. */
+        height: var(--control-h-md);
+        border-radius: var(--radius-pill);
+        /* AW.W13 — the resting field edge reads as an enclosed control at rest
+           (~15%α — ~2× the prior 8% glass-wash floor that vanished on cream). The
+           `:focus-visible` accent ring + the `:user-invalid`/`[aria-invalid]`
+           destructive ring below still win by order + specificity.
+           AX.W54 — moved off the srgb `--surface-tint-15` fork onto the glass
+           border seam (`--glass-border-floating`, the matching 15%α rung) so the
+           pill is ONE glass model with the rest of the ladder, not a divergent
+           tint axis. */
+        border: 1.5px solid var(--glass-border-floating);
+        background: var(--glass-bg-quiet);
+        /* AX.W54 — the pill reads as REAL glass: the quiet-tier 10px blur (the
+           same `--glass-blur-quiet` its `--glass-bg-quiet` background pairs with),
+           not the sub-perceptual `blur(1px)` wash it carried — and the
+           `--glass-level` knob now clarifies it in lockstep with every surface. */
+        backdrop-filter: var(--glass-blur-quiet);
+        padding: 0 calc(1rem * var(--ui-scale));
+        font-size: var(--control-text);
+        color: var(--foreground);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    .input-pill::placeholder {
+        color: var(--surface-tint-35);
+    }
+
+    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
+       accent ring on a mouse click); `:focus-visible` matches the
+       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
+       the `:user-invalid` rungs so an invalid focused field shows destructive,
+       not accent (the `:user-invalid:focus-visible` rule below wins by order +
+       specificity). `:focus-visible` Baseline Widely — no fallback. */
+    .input-pill:focus-visible {
+        outline: none;
+        border-color: var(--color-accent-opaque, var(--ring));
+        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
+    }
+
+    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
+       The forgiving `:where(:user-invalid, .user-invalid-fallback,
+       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
+       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
+       fallback class for engines without `:user-invalid` (css §3.2; NOT a
+       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
+       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
+       serves APP-DRIVEN validity — a custom key match, an async server check —
+       where there is no native constraint to trip `:user-invalid`, so the app
+       sets the ARIA attribute and the library's own ring paints with no
+       `:deep()` re-paint at the consumer. The destructive/success tints reuse
+       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
+       asterisk — the border/bg shift is the supplementary cue, never the sole
+       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
+       a long valid form is not a wall of green. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
+        border-color: var(--destructive);
+        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
+    }
+    .input-pill:where(:user-valid, .user-valid-fallback) {
+        border-color: var(--success);
+    }
+    /* Invalid + keyboard-focused → destructive ring (overrides the accent
+       `:focus-visible` ring above by order + the extra invalid compound). The
+       `[aria-invalid]` arm rides the same widened group so an app-driven
+       invalid field shows the destructive ring on focus too. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
+        border-color: var(--destructive);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+            color-mix(in srgb, var(--destructive) 35%, transparent);
+    }
+
+    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
+       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
+       content between a 3-line floor and a token-driven ceiling, then scrolls.
+       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
+       engine the declaration is ignored and the element keeps the
+       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
+       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
+       the unchanged no-op fallback. */
+    .input-pill[data-autosize] {
+        field-sizing: content;
+        width: 100%;
+        min-block-size: 3lh;
+        max-block-size: var(--textarea-autosize-max, 12lh);
+        resize: vertical;
+    }
+
+    .input-pill:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* AW.W13 — the Select trigger mirrors the input pill's resting border lift.
+       The reka-ui SelectTrigger renders `role="combobox"` over the `.glass-wash`
+       surface; its 8%α `--glass-border-wash` field edge vanished on cream just
+       like the input pill, so the same `--surface-tint-15` lift makes the
+       trigger read as an enclosed control at rest. Scoped to the combobox role
+       so the lift reaches ONLY the Select trigger, not every `.glass-wash`
+       surface. */
+    .glass-wash[role="combobox"] {
+        border-color: var(--surface-tint-15);
+    }
+
+    /* ── AW.W23 — chromatic edge dispersion (the polished-glass rim fringe) ──
+       An opt-in `.glass-chromatic` composes the warm/cool oklab fringe OVER the
+       W22 uniform rim (it does NOT replace it — the rim still rides each rung's
+       box-shadow). The fringe is a transparency garnish, so it composes ONLY
+       under `prefers-reduced-transparency: no-preference` and drops under
+       `reduce` (handled by the bracket below). The fringe lands as a dedicated
+       inset box-shadow pair on the material surface so it adds onto the rim. */
+    @media (prefers-reduced-transparency: no-preference) {
+        .glass-chromatic {
+            box-shadow: var(--glass-edge-dispersion), var(--glass-material-rim);
+        }
+    }
+}
+
+/* ── Deck-position rail (AW.W16 · AX.W24) ───────────────────────────────────
+   A Tailwind `@utility` that RESTYLES the shipped `<Progress variant="default">`
+   (the reka-ui ProgressRoot track + its indicator child) into the thin
+   bottom-of-deck position rail. It composes the EXISTING fill — it does NOT
+   re-author a second track/range mechanic. Every visual axis is a
+   `--progress-rail-*` token, so a consumer/dark-flip re-tints with zero library
+   edit (`:root { --progress-rail-fill: … }`). The viewport-pinned chrome
+   (`position: fixed`, `env(safe-area-inset-bottom)`, the z-index) is CONSUMER-
+   supplied — this recipe owns only the LOOK.
+
+   AX.W24 — WHY `@utility`, not `@layer components`. The rail RESTYLES the default
+   Progress: it must override the `h-4` height + `rounded-pill` radius utilities the
+   variant bakes. Those utilities live in `@layer utilities`, which ALWAYS outranks
+   `@layer components` regardless of source order, so the prior `@layer components`
+   recipe's `height: 3px` was a silent no-op (the rail painted as a 16px bar). An
+   `@utility` lands the recipe IN `@layer utilities` alongside `h-4`, where a single-
+   class selector wins the geometry by source order — the idiomatic Tailwind-v4 way
+   to author a restyle-class that out-ranks base utilities (the `btn-audacious` /
+   `cartoon-surface` pattern).
+
+   The COLOUR fix is the SEPARATE token-read-at-source path (NOT a layer-juggle):
+   `ProgressDefault` reads `--progress-fill`/`--progress-track` and dropped its
+   `bg-secondary`/`bg-primary` utilities, so this recipe FEEDS those tokens rather
+   than fighting a utility colour. The `--progress-fill` set on the rail root cascades
+   to the indicator child (a CSS custom property inherits), so the indicator reads the
+   override hue. */
+@utility glass-progress-rail {
+    /* The track hairline + zero radius — the rail reads as a thin square sliver, not
+       the variant's 16px `rounded-pill` bar. A single-class @utility ties `h-4`/
+       `rounded-pill` on SPECIFICITY (both 0,1,0) and Tailwind's utility sort can emit
+       `h-4` later, so the bare tie loses. The doubled-class self-reference (`&&` →
+       `.glass-progress-rail.glass-progress-rail`, specificity 0,2,0) wins the geometry
+       DETERMINISTICALLY over the base utilities regardless of emit order — the precise,
+       contained way to out-rank a base utility without `!important`. */
+    && {
+        height: var(--progress-rail-h, 3px);
+        border-radius: 0;
+    }
+    /* Feed the token-read default variant — these route the consumer's
+       `--progress-rail-*` axes into the `--progress-fill`/`--progress-track` tokens
+       the variant reads at source (the cascade-correct colour path). */
+    --progress-track: var(
+        --progress-rail-track,
+        color-mix(in srgb, var(--foreground) 8%, transparent)
+    );
+    --progress-fill: var(--progress-rail-fill, var(--primary));
+
+    /* The fill — the shipped ProgressIndicator child. The indicator paints the
+       inherited `--progress-fill`; the leading-edge glow is re-authored (AX.W24 F2)
+       as a TRAILING right-edge INSET box-shadow that lives INSIDE the indicator's
+       own box. The prior `4px 0 8px` OUTSET rightward shadow extended PAST the fill
+       boundary into the ProgressRoot's load-bearing `overflow-hidden` clip and was
+       eaten — invisible at every value. An `inset` shadow offset leftward
+       (`inset -Npx 0 …`) brightens just inside the indicator's right (leading) edge
+       — the moving position head — and never crosses the fill boundary, so the clip
+       cannot eat it (the clip is never lifted; that would re-break the default
+       Progress look for every other consumer). `box-shadow` is a separate property
+       from `background`, so it composes cleanly over the token-read fill. */
+    && > * {
+        border-radius: 0;
+        box-shadow:
+            inset
+            calc(-1 * var(--progress-rail-glow-x, 4px))
+            0
+            var(--progress-rail-glow-blur, 8px)
+            calc(-1 * var(--progress-rail-glow-spread, 2px))
+            color-mix(
+                in srgb,
+                hsl(0 0% 100%) var(--progress-rail-glow-strength, 55%),
+                transparent
+            );
+    }
+}
+
+/* ── AX.W56 — the rounded-vs-squircle POLICY (re-homes AW.W23's squircle) ─────
+   Cards, glass buttons, and pills stay ROUND. The earlier AW.W23 block applied
+   `corner-shape: squircle` to `.glass-card`/`.glass-btn`/`.btn-pill`, which
+   inverted the design intent — the superellipse is imperceptible at a 16px card
+   radius or a stadium pill, so the squircle on those surfaces was visual cost
+   without read. The squircle is RE-HOMED onto the one surface where it reads: the
+   big-dock card shell (`dock.css` → `var(--corner-shape-bigdock)` under
+   `@supports (corner-shape: superellipse(2))`). This is a clean break — no alias,
+   no `--corner-shape-card` decl here (it resolves `round`, the default, so a
+   `corner-shape` rule would be a no-op). The `--corner-shape-*` token axis lives
+   in `theme.css`; a consumer who WANTS a squircle card opts in by re-pointing
+   `--corner-shape-card` at `superellipse(var(--corner-k-squircle))`. Do NOT
+   re-add a squircle rule to the card/button/pill surfaces — they are round by
+   policy. */
+
+/* ── AX.W56(R1) — squircle coupling onto the overlay-band glass surfaces ───────
+   W54 makes GLASS the default for the Dialog + Sheet content surfaces; W56 couples
+   the SQUIRCLE onto them too. Both ride `.glass-floating` at the large
+   `--radius-dialog` (16px) modal radius where the superellipse READS — the same
+   iOS-26 idiom the big-dock card shell carries. The compound selectors scope the
+   shape to the dialog/sheet content ONLY (the `.rounded-dialog` class the
+   DialogContent surface composes, the `.sheet-animate` class the SheetContent
+   surface composes via `sheetVariants`) so it never leaks onto a bare
+   `.glass-floating` panel. Mirrors the big-dock idiom EXACTLY: an `@supports`-
+   gated ENHANCEMENT (Chrome 139+, no FF/Safari 2026) over the `border-radius`
+   round CONTRACT — the squircle is the better tier, NOT a degraded fallback. The
+   shape is the tokenized `var(--corner-shape-{dialog,sheet})` (theme.css) so it is
+   as overridable as the radius; a consumer dials either back to round by
+   re-pointing the alias. The `@supports` condition tests the LITERAL
+   `superellipse(2)` (a `var()` is not evaluable in an `@supports` query) — the same
+   Chrome-139 feature the token resolves to. */
+@layer components {
+    @supports (corner-shape: superellipse(2)) {
+        .glass-floating.rounded-dialog {
+            corner-shape: var(--corner-shape-dialog);
+        }
+        .glass-floating.sheet-animate {
+            corner-shape: var(--corner-shape-sheet);
+        }
+    }
+}
+
+/* ── Accessibility: reduced transparency ──────────
+   AX.W54 — the gestalt collapse: ONE `--glass-level: 0` replaces the ten per-rung
+   opacity+blur clobbers. The level-0 path resolves solid `--card` + `blur(0)`
+   through the SAME machinery (the opacity seam → 1, the blur seam → 0), so every
+   glass surface — current and future — flattens with no per-rung enumeration. The
+   grain + highlight kills stay (they sit off the level axis). */
+@media (prefers-reduced-transparency: reduce) {
+    :root {
+        --glass-level: 0;
+        --glass-grain-opacity: 0;
+        --glass-highlight: 0 0 0 0 transparent;
+    }
+}
+
+/* ── Accessibility: high contrast ─────────────────
+   AX.W54 — a single bounded `--glass-level: 0.3` (mostly-solid, not fully flat)
+   replaces the five per-rung opacity clobbers: every rung firms up toward solid
+   for AA while keeping a hint of the glass register. ONE knob, every rung.
+
+   AX.W55 — the Clear↔Tinted user-escape (Apple's iOS-26.2 analog) COORDINATES the
+   two axes here: the OPACITY axis rides W54's `--glass-level` (firm up toward solid)
+   AND the TINT axis biases toward ink — `--glass-tint-source` → the warm-ink +
+   `--glass-tint-strength` → the AA floor, the same darken the automatic bright
+   bucket applies, now reached by the explicit "more contrast" user request. The two
+   axes stay DISTINCT (level = opacity+blur, tint = darken) but share the bracket so
+   a high-contrast user gets BOTH a firmer plate and the ink-tint legibility lift —
+   one coordinated escape, not two parallel forks. */
+@media (prefers-contrast: more) {
+    :root {
+        --glass-level: 0.3;
+        --glass-tint-source: var(--glass-tint-ink);
+        --glass-tint-strength: var(--glass-tint-strength-aa);
+    }
+}
+
+/* ── Accessibility: forced-colors (Windows High Contrast) glass-language skin ──
+   AX.W36 — when the OS forces a palette (Windows High Contrast), the platform
+   strips the whole decorative glass register: `backdrop-filter` is dropped, the
+   `--glass-*` inset/box-shadow rungs vanish, and every meaning-bearing chroma
+   flattens to one system color. A `.glass-floating` Dialog over a `.glass-resting`
+   Card would read as two borderless transparent rectangles with no edge, and a
+   green-vs-red StatusDot would resolve to one indistinguishable dot. This skin
+   restores the STRUCTURE the glass chrome encoded — it does NOT pin glass-ui's
+   brand colours (no `forced-color-adjust: none`); the chrome is decorative and
+   YIELDS to the user's forced palette (css forced-colors guidance). Only the
+   standard WHC system keywords are used (`Canvas`/`CanvasText`/`Highlight`) — no
+   glass-ui token leaks into the WHC arm.
+
+   COORDINATES WITH W54 — the same `--glass-level: 0` opaque escape the reduced-
+   transparency / high-contrast brackets ride. Setting the ONE clarity knob to 0
+   collapses the `--glass-bg-*` opacity recipe to solid `--card` + `blur(0)` through
+   the SAME machinery (no parallel solid recipe), so the platform sees opaque plates
+   it maps to `Canvas`. The grain + highlight kills match the reduce bracket (they
+   sit off the level axis). The W55 tint axis is moot under WHC (the user's palette
+   supersedes the ink-darken) but harmless — the opaque plate is system-painted. */
+@media (forced-colors: active) {
+    :root {
+        --glass-level: 0;
+        --glass-grain-opacity: 0;
+        --glass-highlight: 0 0 0 0 transparent;
+    }
+
+    /* Every glass-material ladder rung relied on `backdrop-filter` + an inset
+       `box-shadow` rim for its silhouette — both gone under WHC. Restore a real
+       `border` keyed to the system text colour so each tier pane reads as a boxed
+       region. The selector group MIRRORS the ladder definition above (one source,
+       not a hand-rolled re-list) so a future rung added to the material group
+       inherits the WHC edge for free — and a `.glass-material` div that became one
+       via the GlassPanel retire gets the edge with no per-component arm. */
+    .glass-material,
+    .glass-wash,
+    .glass-quiet,
+    .glass-resting,
+    .glass-floating,
+    .glass-overlay,
+    .glass-card,
+    .glass-drawer {
+        border: 1px solid CanvasText;
+    }
+
+    /* The floating + overlay rungs (Dialog / Sheet / Popover / DropdownMenu /
+       HoverCard compose them) + the Drawer (the overlay-band sheet, drawer.css)
+       get the canonical `Canvas` fill so the modal reads as a DISTINCT boxed
+       region OVER the page, not a transparent overlap — the hierarchy survives.
+       The `CanvasText` edge above already draws the box; this opaque fill
+       separates the floating layer from the content beneath it. */
+    .glass-floating,
+    .glass-overlay,
+    .glass-drawer {
+        background: Canvas;
+    }
+
+    /* The decorative specular catch-light (`::before`) + grain overlay (`::after`)
+       paint nothing meaningful once chroma collapses — yield them entirely (the
+       same decorative-chrome cede the `--glass-level: 0` opaque escape performs on
+       the body). They are NOT part of the structure the skin restores. */
+    .glass-material::before,
+    .glass-wash::before,
+    .glass-quiet::before,
+    .glass-resting::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-card::before,
+    .glass-drawer::before,
+    .glass-wash::after,
+    .glass-quiet::after,
+    .glass-resting::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+        display: none;
+    }
+
+    /* Meaning-bearing hue identity → a bordered glyph that keeps ok/warn/error
+       distinguishable by a WHC-HONORED system color, NOT a glass-ui hue (which WHC
+       strips to one fill). StatusDot reflects its variant onto `data-status`
+       (StatusDot.vue) and the inner dot carries `.status-dot__dot`; the
+       `role="img"` + `aria-label` accessible name already ships, so this is the
+       VISUAL differentiation only. A bare bordered dot + the per-status fill triplet
+       below means a sighted WHC user can still tell the row apart.
+
+       `!important` IS load-bearing here: StatusDot paints the dot fill via an INLINE
+       `:style="dotStyle"` (`background-color`, specificity 1,0,0,0), which outranks
+       any stylesheet selector AND which forced-colors then `forced-color-adjust:
+       auto`-remaps to a single Canvas-white — collapsing the row to one indistinct
+       dot. The WHC arm must override that inline fill, and inline can only be beaten
+       by `!important`; this is the documented forced-colors degradation path (the
+       arm only activates under WHC). The component keeps its inline hue in normal
+       mode untouched. */
+    .status-dot__dot {
+        border: 1px solid CanvasText;
+        /* The bordered ring alone separates a dot from its surround; the per-status
+           fill below adds the WHC-honored distinction. */
+    }
+    /* The inner painted fill (`.status-dot__fill`, `h-full w-full`) + the pulse ring
+       carry the SAME inline glass-ui hue StatusDot paints — under WHC they cover the
+       outer `.status-dot__dot` glyph with a `forced-color-adjust`-remapped Canvas
+       fill (the row collapses to one white dot even with the outer system color set).
+       Yield them so the outer bordered + system-color glyph is the sole visible dot. */
+    .status-dot__fill,
+    .status-dot__pulse {
+        display: none;
+    }
+    /* The ok/warn/error/idle distinction rides the standard WHC keyword palette:
+         active (ok)   → Highlight   (the affirmative system accent)
+         paused (warn) → Mark        (the marked/attention system color)
+         error         → CanvasText  (a solid filled dot — the strongest weight)
+         idle/custom   → Canvas      (a hollow dot — only the CanvasText ring reads)
+       Each stays distinguishable by the system color the user's palette assigns,
+       never glass-ui chroma. The `!important` beats the component's inline fill. */
+    .status-dot__dot[data-status="active"] {
+        background: Highlight !important;
+    }
+    .status-dot__dot[data-status="paused"] {
+        background: Mark !important;
+    }
+    .status-dot__dot[data-status="error"] {
+        background: CanvasText !important;
+    }
+    .status-dot__dot[data-status="idle"],
+    .status-dot__dot[data-status="custom"] {
+        background: Canvas !important;
+    }
+}
+
+/* ── @supports fallbacks for non-backdrop-filter browsers ── */
+@layer components {
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        .glass-wash {
+            background: color-mix(in srgb, var(--card) 80%, transparent);
+        }
+        .glass-quiet {
+            background: color-mix(in srgb, var(--card) 88%, transparent);
+        }
+        .glass-resting {
+            background: color-mix(in srgb, var(--card) 94%, transparent);
+        }
+        .glass-floating {
+            background: color-mix(in srgb, var(--card) 98%, transparent);
+        }
+        .glass-overlay {
+            background: var(--card);
+        }
+        .glass-btn {
+            background: color-mix(in srgb, var(--background) 92%, transparent);
+        }
+    }
+}
+
+/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
+   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
+   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
+   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
+   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
+   override values have one source. NOT a live+dead alias — `:has()` is the
+   enhancement, this the documented degradation path. */
+@supports not selector(:has(*)) {
+    .glass-card.is-focus-within {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+}