@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/glass.css

@@ -46,8 +46,15 @@
 
        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.
+       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. */
@@ -59,7 +66,10 @@
     .glass-overlay,
     .glass-card,
     .glass-specular-track,
-    .dock-icon-button {
+    .dock-icon-button,
+    .dock-tab-button,
+    .dock-select-trigger,
+    .dock-dropdown-trigger {
         position: relative;
     }
 
@@ -85,7 +95,10 @@
     .glass-overlay::before,
     .glass-card::before,
     .glass-specular-track::before,
-    .dock-icon-button::before {
+    .dock-icon-button::before,
+    .dock-tab-button::before,
+    .dock-select-trigger::before,
+    .dock-dropdown-trigger::before {
         content: "";
         position: absolute;
         inset: 0;
@@ -106,32 +119,71 @@
            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);
-        /* The travelling catch-light — a genuinely WARM-CREAM, low-alpha circular
-           glow centred on the tracked pointer position (L < 100% so the warm hue
-           survives — the prior `hsl(40 30% 100%)` was PURE WHITE at L=100%, which
-           saturated the 30% away and blew out under the screen blend; the
-           warm-cream the comment claimed never painted). The `--specular-intensity`
-           multiplier drives the layer `opacity`, not a per-stop alpha (a
+        /* 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 per-stop alphas here keep the core soft so even the lifted
-           hover/active states read as a lens, not a flash. */
+           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 at var(--specular-x, 50%) var(--specular-y, 50%),
-            hsl(40 30% 96% / 0.22) 0%,
-            hsl(40 30% 96% / 0.08) 22%,
-            transparent 55%
+            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 glow to the plate so it rides the surface. `mask-image`
-           Baseline 2023-12-07; a non-supporting engine ignores it and the
-           `inset: 0` + radius-inherit already bound the glow. */
+        /* 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 at var(--specular-x, 50%) var(--specular-y, 50%),
+            circle var(--glass-specular-size, 36%) at var(--specular-x, 50%) var(--specular-y, 50%),
             black 0%,
-            black 55%,
-            transparent 75%
+            black 60%,
+            transparent 100%
         );
-        mix-blend-mode: screen;
+        /* 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:
@@ -148,9 +200,12 @@
     .dark .glass-overlay::before,
     .dark .glass-card::before,
     .dark .glass-specular-track::before,
-    .dark .dock-icon-button::before {
-        /* Softer over the deep canvas — the screen blend lifts harder on dark.
-           The `.dark` magnitude lives in the token cohort (tokens.css §specular-
+    .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. */
@@ -169,8 +224,11 @@
     .glass-overlay:hover::before,
     .glass-card:hover::before,
     .glass-specular-track:hover::before,
-    .dock-icon-button:hover::before {
-        --specular-intensity: var(--glass-specular-intensity-hover, 0.22);
+    .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,
@@ -180,8 +238,117 @@
     .glass-overlay:active::before,
     .glass-card:active::before,
     .glass-specular-track:active::before,
-    .dock-icon-button:active::before {
-        --specular-intensity: var(--glass-specular-intensity-active, 0.32);
+    .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) ──
@@ -273,6 +440,76 @@
         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
@@ -322,7 +559,10 @@
         background: var(--paper-clean-texture);
         background-repeat: repeat;
         background-size: var(--paper-texture-size);
-        opacity: var(--glass-grain-opacity);
+        /* 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;
     }
@@ -405,11 +645,17 @@
         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-snappy);
+            scale var(--duration-normal) var(--spring-smooth);
     }
 
     .glass-btn:hover:not(:disabled) {
@@ -445,17 +691,40 @@
     .btn-pill {
         @apply inline-flex items-center justify-center cursor-pointer font-medium border-none;
 
-        gap: 0.375rem;
+        /* 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: 0.5rem 1rem;
-        font-size: 1rem;
+        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),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--spring-smooth);
     }
 
     .btn-pill > * {
@@ -469,23 +738,52 @@
         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;
 
-        height: 2.5rem;
+        /* 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.
-           Was `--glass-border-wash` (~8%α), which nearly vanished on cream; the
-           lift to `--surface-tint-15` (15%α — ~2× the prior floor) makes the
-           edge legible without going loud. The `:focus-visible` accent ring +
-           the `:user-invalid`/`[aria-invalid]` destructive ring below still win
-           by order + specificity, so this only raises the resting alpha. */
-        border: 1.5px solid var(--surface-tint-15);
+        /* 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);
-        backdrop-filter: var(--glass-blur-wash);
-        padding: 0 1rem;
-        font-size: 1rem;
+        /* 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),
@@ -664,50 +962,209 @@
     }
 }
 
-/* ── AW.W23 — corner-shape: squircle PE (Chrome 139+) ───────────────────────
-   The literal iOS-26 superellipse corner geometry that `backdrop-filter`,
-   borders, and shadows follow. `@supports (corner-shape: squircle)`-gated over
-   the un-gated `border-radius` round, which stays the fallback at zero cost on
-   every other engine (Safari/Firefox). The `corner-shape` decl sits ONLY inside
-   the `@supports` block — a leak onto the un-gated base would break the round
-   fallback on a partial-support engine. */
-@supports (corner-shape: squircle) {
-    @layer components {
-        .glass-card,
-        .glass-btn,
-        .btn-pill {
-            corner-shape: squircle;
+/* ── 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 ────────── */
+/* ── 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-opacity-wash: 1;
-        --glass-opacity-quiet: 1;
-        --glass-opacity-resting: 1;
-        --glass-opacity-floating: 1;
-        --glass-opacity-overlay: 1;
-        --glass-blur-wash: none;
-        --glass-blur-quiet: none;
-        --glass-blur-resting: none;
-        --glass-blur-floating: none;
-        --glass-blur-overlay: none;
-        --glass-blur-dock: none;
+        --glass-level: 0;
         --glass-grain-opacity: 0;
         --glass-highlight: 0 0 0 0 transparent;
     }
 }
 
-/* ── Accessibility: high contrast ───────────────── */
+/* ── 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-opacity-wash: 0.85;
-        --glass-opacity-quiet: 0.90;
-        --glass-opacity-resting: 0.94;
-        --glass-opacity-floating: 0.98;
-        --glass-opacity-overlay: 1;
+        --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;
     }
 }