@mkbabb/glass-ui 3.10.0 → 3.10.1

package/src/styles/dock/morph.css

@@ -61,9 +61,22 @@
        authority, and at rest `--dock-expand-t` resolves to the class endpoint (0
        collapsed / 1 expanded) so the resting look is exact. */
     .glass-dock.variant-dock:not(.vertical) {
+        /* AY.W-A11Y-PERF O-1 — the resting-endpoint dock bg composes the W55 oklab
+           adaptive tint so the bright bucket (engaged when a consumer/page marks
+           `--glass-backdrop: light` on the dock's ancestor — the @container block
+           below + the page-redesign W60 wiring) reaches the LIVE `.variant-dock`
+           surface (this 0,3,0 morph interp OVERRIDES the 0,1,0 shell.css bg, so the
+           tint must be applied HERE too). The srgb transition mix is preserved between
+           the two color endpoints; the adaptive darken rides the resting endpoint
+           (`--glass-bg-dock` wrapped in the oklab tint) — at the `0%` rest default the
+           inner oklab mix is a no-op so this is byte-identical to today. */
         background: color-mix(
             in srgb,
-            var(--glass-bg-dock, var(--glass-bg-resting))
+            color-mix(
+                in oklab,
+                var(--glass-bg-dock, var(--glass-bg-resting)),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
                 calc(var(--dock-expand-t, 1) * 100%),
             var(--glass-bg-wash)
         );
@@ -78,18 +91,40 @@
     /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
        wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
        its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
-       Padding interpolates linearly between the collapsed floor and the expanded
-       block/inline padding on the same `--dock-expand-t` scalar. */
+
+       AY.W-DOCK-CHROME §1 — the LAYOUT-ISOLATION fix: the collapse↔expand morph is
+       an INLINE-WIDTH aperture by contract ("horizontal docks animate width"), so
+       the BLOCK axis MUST be invariant across the morph — otherwise the dock's
+       outer height shrinks ~4px on collapse (the collapsed-pad 0.25rem vs the
+       expanded pad-block 0.375rem, ×2) and, because a free-floating / inline dock
+       sits in normal flow (`display:inline-flex`), that height delta REFLOWS its
+       siblings — the page content jumped as the dock animated (the user's 13:27
+       audit item 1). The fix holds `padding-block` PINNED at the expanded value in
+       BOTH states (no `--dock-expand-t` interpolation on the block axis) so the
+       outer block-size is constant; ONLY `padding-inline` morphs to tighten the
+       collapsed pill inline. The collapsed circle is unaffected — its diameter is
+       owned by the summary pane's own symmetric `block-size` + `aspect-ratio:1`
+       (the `.collapsed .dock-layer--summary` rule below), CENTRED on the dock's
+       stable-height plate by the root `align-items:center`, not by the root pad. So
+       the morph reflows NOTHING vertically: 0px container-height delta. */
     .glass-dock.variant-dock:not(.vertical):not(.dock-overflow-wrap) {
-        --dock-pad-collapsed: var(
-            --dock-collapsed-padding,
-            var(--dock-padding-block, 0.375rem)
-        );
-        padding-block: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
+        /* The collapsed inline-pad endpoint is the EXPANDED block pad (max'd with the
+           consumer `--dock-collapsed-padding` handle) so the height-pinned collapsed
+           pill is SYMMETRIC → a clean circle at the `--radius-dock` 9999px. The block
+           axis is pinned to the expanded pad (below), so matching the inline collapsed
+           endpoint to it keeps the box square (the B4 "symmetric collapsed padding
+           keeps the pill a circle" intent, preserved through the §1 height-pin). The
+           `max()` lets a consumer set `--dock-collapsed-padding` LARGER for a looser
+           pill but never SMALLER than the block pad (which would re-introduce the
+           narrower-than-tall oval the height-pin would otherwise leave). */
+        --dock-pad-collapsed: max(
+            var(--dock-padding-block, 0.375rem),
+            var(--dock-collapsed-padding, 0px)
         );
+        /* block padding is INVARIANT — the expanded value, both states (the
+           layout-isolation contract above): the inline aperture morphs, the block
+           axis is pinned so the outer height never changes → 0px container reflow. */
+        padding-block: var(--dock-padding-block, 0.375rem);
         padding-inline: calc(
             var(--dock-pad-collapsed) +
                 (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) *
@@ -110,14 +145,17 @@
         box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
     }
 
-    /* AX.W45-TUNE Q1 — the collapsed summary floors on BOTH axes off the SAME
-       `--dock-collapsed-summary-min-size` token (now MINTED in tokens.css §10 as a
-       tight ≈0.7× of the full control height). The prior rule floored ONLY
-       `min-width` and let the token fall to `--dock-layer-height` (the full control
-       height) — so the collapsed pill read as a full-row stub, not a proportioned
-       squircle. Adding the symmetric `min-block-size` makes the collapsed pill a
-       tight square-ish dot the consumer's glyph sits centred in (the proportioned-
-       pill target the user's Q1 named). */
+
+    /* AY.W-DOCK-NAV B4 — the collapsed summary is a PERFECT CIRCLE. The `.dock-layer`
+       base rule (`.glass-dock:not(.vertical) .dock-layer`) locks `height:
+       var(--dock-layer-height)` (40px) on EVERY layer including the summary; against
+       the 0.85× `--dock-collapsed-summary-min-size` min-width that made the pane
+       40h × 30w — an oval (the user's "circle, not oval"). This rule (1) LIFTS the
+       height-lock so the summary block-sizes to the SAME token its width floors at,
+       and (2) floors both axes to that ONE token, so the collapsed pane is a square
+       and the root's symmetric collapsed padding keeps the pill a circle. The glyph
+       sits centred on both axes. The `aspect-ratio: 1` belt-and-braces guarantees
+       1:1 even if a consumer's collapsed-slot content is wider than the floor. */
     .glass-dock.collapsed .dock-layer--summary {
         min-width: var(
             --dock-collapsed-summary-min-size,
@@ -127,6 +165,15 @@
             --dock-collapsed-summary-min-size,
             var(--dock-layer-height, 2.5rem)
         );
+        block-size: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        height: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        aspect-ratio: 1;
         justify-content: center;
     }
 
@@ -146,6 +193,35 @@
         --dock-expand-t: var(--dock-morph-t);
     }
 
+    /* AY.W-DOCK-NAV B15 — the EMPTY-collapsed-summary trap. A dock with a
+       `#persistent` control but NO `#collapsed` slot (the overview first-section
+       dock) still renders a `.dock-layer--summary` pane that floors to the circle
+       min-width — so collapsed it read as a WIDE pill: the persistent Home glyph on
+       the LEFT + an empty circle of dead space on the RIGHT (the measured 84×50
+       oval). Expanding then grew the content INTO that right-side void, so the
+       morph read "from the right" not center-out (the user's B15). When the summary
+       slot is EMPTY (`:not(:has(*))`), collapse it to zero width + no floor so the
+       persistent control stands alone as the collapsed circle, and the morph grows
+       symmetrically about the persistent. An empty Vue `#collapsed` slot renders
+       ZERO child nodes (no whitespace text node either), so `:empty` matches it
+       exactly — and a flat `:empty` avoids the nested-`:has()` form Lightning CSS
+       drops. An authored `#collapsed` slot (non-empty summary) keeps its circle
+       pill. */
+    .glass-dock.collapsed .dock-layer--summary:empty {
+        min-width: 0;
+        inline-size: 0;
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+
+    /* The persistent control IS the collapsed pill in the empty-summary case — drop
+       the inter-region gap so the collapsed circle is exactly the persistent box. */
+    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent
+        + .dock-layers {
+        margin-inline-start: 0;
+    }
+
     /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
        The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
        root transition above, so this hover scale settles on the SAME spring curve

package/src/styles/dock/shell.css

@@ -64,6 +64,18 @@
            stacking-context guarantee). Covers every dock scale site. */
         scale: 1;
         position: relative;
+        /* AY.W-A11Y-PERF O-1 — engage the W55 bright-backdrop bucket BY DEFAULT on
+           the dock (the surface the user reported unreadable over light content). The
+           SELF-engage rule in dock/morph.css darkens the dock's OWN plate toward ink
+           unconditionally (a dock floats over arbitrary — frequently light — page
+           content). `dark` (the :root default) stays the inherited value a consumer
+           re-reads; the descendant/nested-glass reach uses the @container block. */
+        --glass-backdrop: light;
+        /* AY.W-A11Y-PERF O-4 — paint containment so the maximal-glass nested
+           backdrop-filter sample does not escape the dock box (the standard nested-
+           backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
+           already-blurred buffer at each level without it). */
+        contain: paint;
         display: inline-flex;
         align-items: center;
         /* AW.W1 — the dock does NOT establish a default inline-size container.

package/src/styles/dock-controls.css

@@ -225,7 +225,22 @@
             [data-size="control"]
         ) {
         --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn));
-        --dark-mode-toggle-padding: var(--dock-icon-padding, 0);
+        /* AY.W-DOCK-CHROME §2 — the in-dock toggle GLYPH insets to the nav-glyph
+           register. The toggle SVG carries `h-full w-full` (the utility layer, which
+           BEATS the component-layer `> svg { width: --dock-control-glyph-size }` rule
+           below), so the glyph fills whatever the PADDED box leaves. Prior the in-dock
+           padding fell to `var(--dock-icon-padding, 0)` (the token is never defined →
+           0 pad → the glyph filled the whole 40px box edge-to-edge, ~2.5× the 16-20px
+           nav glyphs — the user's "too large" read). Pad the box by HALF the box↔glyph
+           difference so the `h-full` SVG lands at exactly `--dock-icon-glyph` (the
+           `--dock-scale`-keyed size the nav icons paint) — optically UNIFORM with the
+           nav glyphs through the utility-win path, not fighting it. */
+        --dark-mode-toggle-padding: calc(
+            (
+                    var(--dock-control-size, var(--size-icon-btn)) -
+                        var(--dock-icon-glyph, 1.25rem)
+                ) / 2
+        );
     }
 
     /* AX.W06 USF-2 — the dock-control optical-size contract. The
@@ -327,28 +342,21 @@
     /* Tier — primary ────────────────────────────────────────────
      *
      * Per W2.7 §9, §12, §13, §17. The primary tier composes three at-rest
-     * marks (top-highlight, bottom under-shadow, baseline glass) with two
-     * disco accents on hover (specular swap, disco-grain).
-     *
-     * D6.b — the disco-STAR is GONE (the sparkle-sweep sweep is excised from the
-     * underlying `btn-audacious`, utilities.css). The primary dock button's gold
-     * identity — the "golden dock button" the user likes — is RE-EXPRESSED sans
-     * star: a tooled `--gold-rim` gilt edge (the brushed-brass-under-glass read)
-     * plus the surviving specular catch-light + disco-grain on hover. Three quiet
-     * golds replacing one loud star.
+     * marks (top-highlight, bottom under-shadow, baseline glass) with three
+     * disco accents on hover (specular swap, sparkle sweep, disco-grain).
      *
      * Reservation: disco fires on hover only. At rest the button reads as
-     * a Vignelli-restrained composed glass surface with a hairline gilt edge.
-     * The `--phase-color` cascade (provided by `<InstrumentChassis>` via
-     * `data-phase`) tints the disco-grain radial only on hover; idle is neutral.
+     * a Vignelli-restrained composed glass surface. The `--phase-color`
+     * cascade (provided by `<InstrumentChassis>` via `data-phase`) tints
+     * the disco-grain radial only on hover; idle is neutral.
      *
-     * K.W6 Lane B — the canonical disco-grain + specular recipe lifted to
-     * `@utility btn-audacious` (utilities.css). The Vue <DockTabButton> attaches
-     * `btn-audacious` automatically when the consumer passes `data-tier="primary"`.
-     * The dock-local rules below are STRICTLY the dock extension: structural shell
-     * (padding, base surface tint, min-height) + the gilt-edge gold identity +
-     * phase-tint extensions (hover radial uses `--phase-color`, plus the
-     * `[data-phase]` `::before` halo).
+     * K.W6 Lane B — the canonical disco-grain + sparkle-sweep + specular
+     * recipe lifted to `@utility btn-audacious` (utilities.css). The Vue
+     * <DockTabButton> attaches `btn-audacious` automatically when the
+     * consumer passes `data-tier="primary"`. The dock-local rules below
+     * are STRICTLY the dock extension: structural shell (padding, base
+     * surface tint, min-height) + phase-tint extensions (hover radial
+     * uses `--phase-color`, plus the `[data-phase]` `::before` halo).
      */
     .dock-tab-button[data-tier="primary"] {
         --dock-tab-min-height: 4rem;
@@ -356,17 +364,6 @@
         background: color-mix(in srgb, var(--card) 60%, transparent);
         color: var(--foreground);
 
-        /* D6.b — the gilt edge: a 1px inner `--gold-rim` ring + a faint gold
-           top-catch, the tooled-brass identity that replaces the excised star.
-           A box-shadow (no layout, no paint cost), composing UNDER the hover
-           specular/grain. The gold reads as a bevel light at the edge, never a
-           fill — the surface still reads as composed glass. Idiom mirrors the
-           `.glass-gilt` modifier (glass.css region) at the dock-button scale. */
-        box-shadow:
-            inset 0 0 0 1px var(--gold-rim),
-            inset 0 0.5px 0 0
-                color-mix(in oklab, var(--gold-light) 30%, transparent);
-
         /* Phase-tint hover override — same disco-grain composition as
          * `btn-audacious`, but the radial uses `--phase-color` (instrument-
          * cluster axis) instead of the canonical `--primary`. The `--paper-

package/src/styles/glass/a11y-fallback.css

@@ -0,0 +1,245 @@
+/* glass/a11y-fallback.css
+   The accessibility + capability overrides — @media (prefers-reduced-transparency) / (prefers-contrast: more) / (forced-colors: active), the non-backdrop-filter @layer components fallback, and the :has()-less @supports fallback. LAST in cascade (they override the base ladder).
+   Carved from the glass.css cascade root; @import-ed by glass.css in cascade
+   order, each in its own @layer components (isomorphic to the monolith).
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+/* ── 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 any `.glass-material` div picks up 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 {
+    /* GUARD 1 — the NO-BLUR-AT-ALL engine (supports NEITHER the unprefixed NOR the
+       webkit form): paint an opaque-leaning plate so text stays legible without any
+       blur. AY.W-A11Y-PERF O-2b note: this is the floor for the theoretical
+       neither-supported case. The Safari ≤17 webkit-only trap (supports the `-webkit-`
+       form, so this `@supports not (… or …)` is FALSE and the fallback does NOT fire)
+       is closed at the SOURCE OF THE PREFIX: O-2a's build pass guarantees the shipped
+       dist carries the `-webkit-backdrop-filter:` pair, so a Safari-17 engine renders
+       the BLUR off the prefixed rule (it no longer falls through to a transparent
+       unprefixed-only surface). The trap closes where the prefix is emitted, not here. */
+    @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);
+        }
+    }
+
+    /* GUARD 2 — the WEBKIT-ONLY engine (supports `-webkit-backdrop-filter` but NOT the
+       unprefixed `backdrop-filter` — Safari ≤17). With O-2a's build-emitted prefix the
+       shipped rung carries the `-webkit-backdrop-filter:` pair, so this engine PAINTS
+       the blur off that prefixed declaration. This guard exists to DOCUMENT-and-confirm
+       that path (and would re-assert the translucent glass identity if a future change
+       ever stripped the rung bg under this engine) — it re-states the rungs' translucent
+       glass-mix so a webkit-only engine that DID get the prefix keeps the glass look,
+       never the opaque GUARD-1 plate. The `proof:webkit-backdrop` gate asserts the
+       shipped dist carries BOTH guards. */
+    @supports ((-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px)))) {
+        .glass-wash {
+            background: color-mix(in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength));
+        }
+        .glass-quiet {
+            background: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+        }
+        .glass-resting {
+            background: color-mix(in oklab, var(--glass-bg-resting), var(--glass-tint-source) var(--glass-tint-strength));
+        }
+        .glass-floating {
+            background: color-mix(in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength));
+        }
+        .glass-overlay {
+            background: color-mix(in oklab, var(--glass-bg-overlay), var(--glass-tint-source) var(--glass-tint-strength));
+        }
+        .glass-btn {
+            background: var(--glass-bg-wash);
+        }
+    }
+}
+
+/* ── :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);
+    }
+}