@mkbabb/glass-ui 3.9.0 → 3.10.1

package/dist/styles/glass.css

@@ -1,22 +1,25 @@
 /* Glass utilities — glassmorphism surface classes referencing --glass-* tokens
  *
- * ── 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-*`):
+ * ── 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-*`):
  *
- *   content    (--z-background … --z-content)  — the page substrate; NOT glass.
+ *   content    (--z-background … --z-content)  — the page substrate.
  *   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).
  *
- * 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.
+ * 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.
  *
  * ── 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
@@ -26,1046 +29,22 @@
  * (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.
  */
 
-@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 dock's catch-light
-       lives on its CONTROL (`.dock-icon-button`, listed below), not the shell.
-
-       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;
-        /* 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);
-    }
-
-    /* ── 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);
-        opacity: var(--glass-grain-opacity);
-        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 {
-        border: 1px solid CanvasText;
-    }
-
-    /* The floating + overlay rungs (Dialog / Sheet / Popover / DropdownMenu /
-       HoverCard compose them) 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 {
-        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-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);
-    }
-}
+/* 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";