@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/completion-seal.css

@@ -37,6 +37,39 @@
     transform: scale(var(--seal-scale, 1));
 }
 
+/* The PERSONAL-BEST earned-gold garnish (BG.W-SEAL-DISC) — a result that beat the user's
+   historical best re-points the seal ink onto the brighter earned-gold register. The seal
+   mints NO new gold literal — `--seal-best` COMPOSES the gold FAMILY (`--color-gold-light`,
+   the brighter earned gold), so a consumer re-tuning the gold family re-tunes the
+   best-garnish in lockstep (the earned-gold register has ONE home; the Q2 no-re-author
+   fence). Gold is EARNED — the personal-best coin reads a touch brighter, never a new
+   hue. */
+.completion-seal[data-best] {
+    --seal-best: var(--color-gold-light, var(--gold-light));
+    --seal-ink: var(--seal-best);
+}
+
+/* The DISC gesture — the composed earned-coin (disc→ring→check). The three layers stagger
+   on animation-delay off ONE gold-draw mechanism; the sequencing clocks are token-first
+   (a consumer retunes the cadence). The disc FACE lands, then the ring draws around it,
+   then the check draws inside. */
+.completion-seal[data-shape="disc"] {
+    --seal-ring-delay: var(--spring-snappy-duration, 0.34s);
+    --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2);
+}
+
+/* The disc FACE — the earned-coin the ring draws around. A translucent glass-gold coin
+   (the warm-cream liquid-glass identity — NOT an opaque slab) so the ring + check read as
+   saturated gold ON the whisper-gold face. The fill defaults visible so a non-animating /
+   PRM / non-supporting seal shows the settled coin. Token-first (`--seal-disc-fill`). */
+.completion-seal__disc {
+    fill: var(
+        --seal-disc-fill,
+        color-mix(in oklab, var(--seal-ink), transparent 82%)
+    );
+    stroke: none;
+}
+
 /* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
    stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
    fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
@@ -78,11 +111,13 @@
    fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
    pass each on the stroke-reveal + the settle + the glint. */
 @media (prefers-reduced-motion: no-preference) {
+    /* Every shape's coin lands with the settle overshoot (the root scale, all shapes). */
     .completion-seal[data-play] {
         animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
             var(--spring-bouncy) both;
     }
-    .completion-seal[data-play] .completion-seal__mark {
+    /* The single-mark shapes (check / ring / wordmark) — the ONE draw + settle-glint. */
+    .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark {
         animation:
             completion-seal-draw var(--spring-snappy-duration, 0.34s)
                 var(--ease-out, ease-out) both,
@@ -90,6 +125,31 @@
                 var(--ease-out, ease-out)
                 var(--spring-snappy-duration, 0.34s) both;
     }
+
+    /* The disc gesture — the three layers stagger disc→ring→check on the ONE draw
+       mechanism (the staggered animation-delays sequence same-clock passes; no fourth
+       recipe). The FACE fades in (opacity), the ring draws around it, then the check
+       draws inside + glints once on its own arrival. */
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__disc {
+        animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s)
+            var(--ease-out, ease-out) both;
+    }
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__ring {
+        animation: completion-seal-draw var(--spring-snappy-duration, 0.34s)
+            var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both;
+    }
+    .completion-seal[data-shape="disc"][data-play] .completion-seal__check {
+        animation:
+            completion-seal-draw var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both,
+            completion-seal-glint var(--spring-snappy-duration, 0.34s)
+                var(--ease-out, ease-out)
+                calc(
+                    var(--seal-check-delay, 0.68s) +
+                        var(--spring-snappy-duration, 0.34s)
+                )
+                both;
+    }
 }
 
 /* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
@@ -103,6 +163,20 @@
     }
 }
 
+/* The disc FACE materialize (BG.W-SEAL-DISC) — the earned-coin face fades in before the
+   ring draws around it (the first beat of the disc→ring→check gesture). Compositor-only
+   (opacity — a paint channel, NO layout property). `both` fill holds the settled visible
+   face; under PRM (this whole @media block is inert) the face is the static visible coin
+   (the disc's CSS default opacity 1). */
+@keyframes completion-seal-disc-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
 /* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
    transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
    (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */

package/src/styles/configurator.css

@@ -13,6 +13,18 @@
  * Tailwind utility on the preset-row wrapper.
  */
 
+/* BI.W-CONFIG-IN-SHEET — the ONE section-vs-chrome inline padding anchor + the
+ * inter-section card gap. `--configurator-pad-inline` is the SINGLE inline anchor
+ * BOTH the sheet chrome (SheetHeader/footer) AND the section rows read, so the
+ * section content aligns with the chrome content (UF-A5/GEO-9: the section body no
+ * longer indents 12px while the chrome sits at 24px). Inheriting on :root so the
+ * gear sheet's `px-(--configurator-pad-inline)` chrome utilities resolve it; a
+ * consumer retunes the whole chassis inline rhythm from one override. */
+:root {
+    --configurator-pad-inline: 1rem; /* 16px — the unified section+chrome inline anchor */
+    --configurator-section-gap: 0.5rem; /* 8px — the inter-section card breath */
+}
+
 /* 1. Section register — the <ConfiguratorLayer> header label reads as a SECTION
  *    (√φ subheading, 20.4px / 600), NOT a row. Replaces the flat
  *    `text-small font-semibold text-foreground` span (D6-3: "section labels read
@@ -37,7 +49,12 @@
 .configurator-presets {
     padding-block: var(--configurator-preset-row-weight);
 }
-.configurator-presets [role="tablist"] {
+/* The gallery track gap — the toggle-button group (BD.W-CONFIG-GALLERY-DOCK
+ * retired the `role="tablist"`/`role="tab"` ARIA-contradiction for the
+ * toggle-button `role="group"` + `aria-pressed` pattern). The token drives the
+ * inter-tile rhythm. */
+.configurator-presets .configurator-gallery-track,
+.configurator-presets [role="group"] {
     gap: var(--configurator-preset-row-gap);
 }
 
@@ -60,6 +77,41 @@
 .configurator-layer {
     border-color: var(--configurator-divider-section);
     background-color: var(--configurator-section-tint);
+    /* BI.W-CONFIG-IN-SHEET (Law 1 — the concentric-radius RELAY reader; ruling 11,
+     * sites #1 + #3). A multi-row section wears a CARD radius, never a flush-square
+     * hairline block (UF-A4 / Law 2). The section derives its own corner concentric
+     * with its PARENT ctx — the <Configurator> root (site #1, publishes
+     * --radius-ctx=--radius-panel) OR the gear Sheet (site #3, W-SHEET-RADIUS
+     * publishes --radius-ctx=--radius-dialog) — across the parent's inner pad:
+     *   border-radius = max(floor, ctx − inset)
+     * so the inner corner stays concentric with the outer and never rounds below the
+     * 4px floor. This SUPERSEDES the prior "no per-section radius / flush border-b"
+     * contract (ConfiguratorLayer.vue) — a clean break: the section is now a full
+     * (all-side) bordered card, not a bottom-hairline-divided flat block. NO
+     * `overflow: hidden` on the card: the section-header trigger's OUTSET `.focus-ring`
+     * (box-shadow) must NOT be clipped by the card box (a keyboard-a11y regression), and
+     * at the concentric card radius the header hover-fill's rounded-corner poke is
+     * sub-perceptual — the rounded border + section tint carry the card read. */
+    border-radius: max(
+        var(--radius-floor),
+        calc(var(--radius-ctx) - var(--radius-inset))
+    );
+}
+/* The inter-section card breath — a gap between stacked section cards (replacing the
+ * retired flush `border-b last:border-b-0` divider). Adjacent-sibling so only the
+ * INTER-section seams get the gap; the first card stays flush to its container top. */
+.configurator-layer + .configurator-layer {
+    margin-block-start: var(--configurator-section-gap);
+}
+/* The ONE inline-padding anchor (BI.W-CONFIG-IN-SHEET) — the section header trigger
+ * AND the section body read var(--configurator-pad-inline), the SAME anchor the sheet
+ * chrome reads, so the section content aligns with the chrome content (UF-A5/GEO-9).
+ * The section SFC drops its raw `px-3` (12px) literal; the vertical `py-2` stays. */
+.configurator-layer-trigger {
+    padding-inline: var(--configurator-pad-inline);
+}
+.configurator-layer-body {
+    padding-inline: var(--configurator-pad-inline);
 }
 .configurator-layer-body[data-dividers] > * + * {
     border-color: var(--configurator-divider);
@@ -98,17 +150,183 @@
  * utility read — the token contract is byte-identical, only the MECHANISM moves
  * onto shipped CSS. The explicit mobile rows reset to `none` so one auto row
  * stretches to the taller column. */
+/* The MOBILE / base placement of the three section-level children (the gallery
+ * moved OUT of the aside to a grid sibling — BD.W-CONFIG-GALLERY-DOCK). Single
+ * column, three rows: gallery → stage → aside. The base `grid-template-rows`
+ * (`auto minmax(stage-min,auto) 1fr`) ships from the SFC; these rules pin each
+ * child to its row so the source order (gallery, stage, aside) reads correctly.
+ * When no gallery renders the `auto` row collapses to 0 (an empty track). */
+[data-slot="configurator"] > [data-gallery-dock] {
+    grid-row: 1;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-stage {
+    grid-row: 2;
+    grid-column: 1;
+}
+[data-slot="configurator"] > .configurator-aside {
+    grid-row: 3;
+    grid-column: 1;
+}
+
 @media (min-width: 1024px) {
+    /* The DESKTOP TWO-COLUMN geometry. Two columns (stage 1fr | aside band) and
+     * two rows: the gallery row (auto) over the body row (1fr). The placement of
+     * the gallery dock is the ONLY thing the `data-gallery` axis swaps. */
     [data-slot="configurator"] {
         grid-template-columns: minmax(0, 1fr)
             minmax(
                 var(--configurator-aside-min, 280px),
                 var(--configurator-aside-max, 360px)
             );
-        grid-template-rows: none;
+        grid-template-rows: auto minmax(0, 1fr);
+    }
+
+    /* data-gallery="aside" (the default, inspector idiom) — the gallery sits in
+     * the ASIDE column, row 1, above the controls; the stage spans BOTH rows on
+     * the left. Byte-equivalent to the legacy "preset row inside the aside top". */
+    [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-stage {
+        grid-row: 1 / span 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="aside"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+
+    /* data-gallery="top" (the §2.1 reflow) — the gallery is a LARGE full-width
+     * dock spanning BOTH columns up-top; the stage (col 1) + controls (col 2)
+     * reclaim the full height in row 2. The gallery is now ~studio-width, not the
+     * 360px gutter — ~5 φ-tall tiles visible, horizontally scrollable. */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        grid-row: 1;
+        grid-column: 1 / span 2;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-stage {
+        grid-row: 2;
+        grid-column: 1;
+    }
+    [data-slot="configurator"][data-gallery="top"] > .configurator-aside {
+        grid-row: 2;
+        grid-column: 2;
+    }
+}
+
+/* The gallery-dock chrome divider — the hairline under the up-top dock / the
+ * left edge of the aside-placed dock. A dark-adaptive border off the same token
+ * the rest of the instrument reads, so it survives both glass plates. */
+[data-slot="configurator"] > [data-gallery-dock] {
+    border-color: var(--configurator-divider);
+}
+[data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
+    border-bottom-width: 1px;
+}
+@media (min-width: 1024px) {
+    /* The up-top dock carries a bottom hairline; the aside-placed dock carries it
+     * too (above the controls). */
+    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
+        border-bottom-width: 1px;
+    }
+}
+
+/* ── The WARM-GLASS gallery tiles + the device-free field-well ────────────────
+ * BD.W-CONFIG-GALLERY-DOCK §5/§B1. The tile is a `.glass-capsule` warm-glass cel
+ * (composed in the SFC class list) — the §3 colourful field reads THROUGH, never
+ * a flat opaque bg-card scrim. These rules add the GEOMETRY the capsule register
+ * doesn't carry: the φ-tall card shape, the rounded field-well, the active ring,
+ * the loading shimmer. No new material is minted — the transmissive composite is
+ * the shared `.glass-capsule`; the cartoon cast is the shared `.cartoon-cast`. */
+
+/* The big field-well tile (the PresetPickerRow / baked-thumbnail form). A φ-tall
+ * card: a 16:10 field-well crowned by a label band. The capsule register paints
+ * the warm-glass body; this rule sets the card radius + the column flex so the
+ * well meets the rounded crown with zero bg leak. */
+.configurator-preset-tile {
+    inline-size: clamp(160px, 22vw, 232px);
+    border-radius: var(--radius-card);
+    /* The capsule fill is a warm-glass PILL by default (--radius-pill); a TILE is
+     * a card, so re-point the geometry to the card radius here. The transmissive
+     * fill + rim + cast all carry from .glass-capsule. */
+}
+
+/* BG.W-PRESET-RIBBON-TOP (F7.6) — the LARGE full-width TOP RIBBON tile floor. When
+ * the gallery is pinned up-top (data-gallery="top") the presets span the whole studio
+ * width, not the 360px aside gutter, so the tiles read one rung LARGER than the aside
+ * form — the "LARGE ribbon" the aurora studio wants. Still the SAME
+ * .configurator-preset-tile card (no new material, the warm-glass capsule + cast carry
+ * from the base rule); only the inline-size floor lifts, and it is scoped to the top
+ * placement so the aside inspector idiom stays byte-unchanged. The clamp MIN (200px)
+ * clears the ≥72px LARGE-ribbon floor with headroom; the FadingScroll port (the
+ * .configurator-gallery-track) still clips the horizontal overflow. */
+[data-slot="configurator"][data-gallery="top"] .configurator-preset-tile {
+    inline-size: clamp(200px, 20vw, 288px);
+}
+
+/* The §3 field-well — the device-free `auroraFallbackGround` background-image is
+ * set inline per tile; this rule sets the cover sizing + the rounded inner crown.
+ * The well is the COLOURFUL field; the warm-glass capsule frames it. */
+.configurator-preset-well {
+    background-size: cover;
+    background-position: center;
+    /* a smooth bilinear upscale of the tiny raster (the per-quadrant mean
+     * luminance is preserved — the certify band reads true). */
+    image-rendering: auto;
+}
+
+/* The loading state — a warm shimmer until the field build lands (the field
+ * build is synchronous + cheap, so this is a sub-frame flicker at most). */
+.configurator-preset-well.is-loading {
+    background-image: linear-gradient(
+        100deg,
+        color-mix(in oklab, var(--card) 84%, transparent) 30%,
+        color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%,
+        color-mix(in oklab, var(--card) 84%, transparent) 70%
+    );
+    background-size: 200% 100%;
+    animation: configurator-preset-shimmer 1.2s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+    .configurator-preset-well.is-loading {
+        animation: none;
+    }
+}
+@keyframes configurator-preset-shimmer {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -200% 0;
     }
 }
 
+/* The active tile ring — a 2px foreground-keyed inset crown over the warm-glass
+ * cel (an inset ring never clips on the scroll axis, the PresetPickerRow note).
+ * Composes with the capsule's own rim; the cast deepens to `-lg` in the SFC. */
+.configurator-preset-tile.is-active {
+    box-shadow:
+        /* BG.W-DESHADCN — the active-tile crown reads the renamed house
+           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
+        inset 0 0 0 2px var(--focus-ring-color),
+        var(--shadow-cartoon-lg);
+}
+
+/* The compact CHIP form (the default fallback gallery — text-only preset pills).
+ * The capsule register paints the warm-glass body; this rule restores the pill
+ * radius the capsule already ships, and the active chip reads a selected fill via
+ * the `--glass-capsule-fill` override hook (no fork). */
+.configurator-preset-chip {
+    border-radius: var(--radius-pill);
+}
+.configurator-preset-chip.is-active {
+    /* the selected rung — re-point the capsule fill toward the quiet glass-tint
+     * selected register via the documented override hook (NO new composite). */
+    --glass-capsule-fill: var(--glass-bg-quiet);
+}
+
 /* 5. The SIDE FLIP — a data-attr, default RIGHT (BC.W-CONFIG-RIGHT).
  *
  * The aside side moves off the dead `lg:col-start-*` arbitrary utility (gated
@@ -122,11 +340,20 @@
  * order — WCAG 1.3.2/2.4.3 inviolate, the AM.W0 contract). Below `lg` (single
  * column) neither side has meaning. */
 @media (min-width: 1024px) {
-    [data-slot="configurator"][data-aside-side="left"] .configurator-stage {
-        grid-column-start: 2;
+    /* The flip swaps the two BODY columns (stage ↔ aside) while DOM/tab order stays
+     * gallery→stage→aside. The selectors carry `>`-child specificity to match the
+     * `data-gallery` placement rules above (which also use `>`); a bare descendant
+     * selector would lose the cascade to those and the flip would no-op. The aside
+     * keeps its body row (row 2); only the column target moves. The aside-placed
+     * gallery dock follows the aside to column 1. */
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-stage {
+        grid-column: 2;
+    }
+    [data-slot="configurator"][data-aside-side="left"] > .configurator-aside {
+        grid-column: 1;
     }
-    [data-slot="configurator"][data-aside-side="left"] .configurator-aside {
-        grid-column-start: 1;
-        grid-row-start: 1;
+    [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"]
+        > [data-gallery-dock] {
+        grid-column: 1;
     }
 }

package/src/styles/dialog-placement.css

@@ -0,0 +1,68 @@
+/*
+ * dialog-placement.css — the overlay-band Dialog side-slide structural positioning,
+ * precompiled (BI.W-DIALOG-PLACEMENT — the Sheet fold; the BG.W-SHEET-INSET-ROOT
+ * emission INVERSE, terminalized onto Dialog `placement`).
+ *
+ * THE FOLD: Sheet's side-slide is a Dialog PAINT axis now (`<DialogContent placement=
+ * top|right|bottom|left>`), same reka `DialogRoot` + FocusScope. The retired Sheet
+ * authored its STRUCTURAL positioning (position/inset/size/z-index) as CVA Tailwind
+ * utilities — load-bearing GEOMETRY that DIES in any consumer whose Tailwind content-scan
+ * does not reach glass-ui's compiled dist (the D7 configurator-drawer break). This rule
+ * ships that geometry PRECOMPILED as a plain `[data-slot="dialog-content"][data-placement]`
+ * attribute-selector rule, so it ALWAYS emits in dist/glass-ui.css regardless of JIT reach.
+ * DialogContent.vue mints `data-slot="dialog-content"` + `:data-placement` on the portaled
+ * content node for a side placement (center emits NO `data-placement`, so none of these
+ * rules touch a centered modal); the CVA keeps ONLY decoration (glass tier, overlay padding
+ * ladder, per-side rounding/border, the `sheet-animate` + slide-in/out data-state pairs).
+ *
+ * SPECIFICITY — the rules are wrapped in `:where()` (0,0,0). The library ships the DEFAULT
+ * positioning; a consumer's own sizing utility (the demo PresetEditor's `w-full sm:max-w-md`,
+ * a `.w-full`/`.h-full` class at 0,1,0) WINS over the `:where()` default, so the side sheet
+ * stays consumer-overridable (the token-first / consumer-overrides identity). UNLAYERED (like
+ * select.css's [data-slot] bound) so it never loses to an unlayered utility. Locked by
+ * proof:emission (the overlay-band inverse clause).
+ *
+ * PHYSICAL properties (width/height/max-width/top/right/bottom/left) mirror the retired
+ * Sheet CVA utilities EXACTLY (`inset-y-0 right-0 h-full w-3/4 sm:max-w-sm` &c.), so a
+ * consumer's physical sizing override resolves cleanly by SPECIFICITY against the same
+ * property name — no logical-vs-physical cascade ambiguity, and the enter/exit slide travel
+ * is byte-identical to the retired Sheet frame-series.
+ */
+:where([data-slot="dialog-content"][data-placement]) {
+    position: fixed;
+    z-index: var(--z-modal);
+}
+
+/* Top/bottom side sheets span the full width (left:0;right:0), anchor to their edge. */
+:where([data-slot="dialog-content"][data-placement="top"]) {
+    left: 0;
+    right: 0;
+    top: 0;
+}
+:where([data-slot="dialog-content"][data-placement="bottom"]) {
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* Left/right side sheets span the full height (top:0;bottom:0), 3/4 width, capped at sm. */
+:where([data-slot="dialog-content"][data-placement="left"]) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 75%;
+}
+:where([data-slot="dialog-content"][data-placement="right"]) {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 75%;
+}
+@media (min-width: 40rem) {
+    :where([data-slot="dialog-content"][data-placement="left"]),
+    :where([data-slot="dialog-content"][data-placement="right"]) {
+        max-width: 24rem; /* the prior sm:max-w-sm */
+    }
+}

package/src/styles/dock/adaptive-legibility.css

@@ -0,0 +1,119 @@
+/* dock/adaptive-legibility.css — the dock's ADAPTIVE-LEGIBILITY self-engage (carved
+ * from dock/morph.css to hold both partials under the 500-line no-god-module bound).
+ *
+ * This partial owns the darken-over-light legibility concern, distinct from the morph
+ * chrome: the unconditional `:where(.glass-dock)` self-engage (AZ.W-ADAPTIVE-AUTO), the
+ * continuous backdrop-luma tint clamp (BC.W-ADAPTIVE-RECONCILE), the BD.W-DOCK-CORE D2
+ * warm-chromatic dock ink, the ancestor `@container style(--glass-backdrop: light)`
+ * descendant bucket, the AX.W55 contrast-color() progressive refinement, and the
+ * BB.W-LIQUID-REVEAL / BC.W-DOCK-SHRINK-BLUR PRM reveal-blur carve.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components` as morph.css
+ * (the carve is isomorphic — same layer, source order preserved → ZERO visual delta). */
+
+@layer components {
+    /* ── Adaptive legibility: SELF-ENGAGE the dock over a light backdrop by default
+       (AZ.W-ADAPTIVE-AUTO Arm 1 — the literal G2 surface; "Glass dock over VERY
+       LIGHT materials is unreadable, darken DYNAMICALLY like iOS 27") ─────────────
+       The dock floats over WHATEVER the consumer painted — frequently a light/near-
+       white app surface (the canonical G2 case the user reported). AY.W-A11Y-PERF
+       O-1 set `--glass-backdrop: light` on the dock's OWN root (shell.css) intending
+       a self-darken, but CSS style queries NEVER self-match (the `@container
+       style()` block below reads an ANCESTOR — verified on Chrome 148), so the
+       self-declaration was a NO-OP. This `:where(.glass-dock)` rule is the genuine
+       UNCONDITIONAL self-engage — mirroring the overlay band's `ladder.css:169` —
+       re-pointing the INHERITING tint tokens DIRECTLY on the dock root so the
+       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers (which compose
+       the oklab tint AT THE ELEMENT — the substitution-vs-inheritance-safe targets)
+       darken toward warm-ink in lockstep. `--dock-fg-on-aurora` re-points to the
+       warm-ink here too — ONE reconciled path, the foreground twin folded in (it
+       reaches the dock CONTROLS' glyph/label color). Over a DARK page the darken is
+       sub-perceptual; a dark-substrate consumer opts out via `--glass-tint-strength:
+       0%` on the dock root. The morph-root interp (`.glass-dock:not(.vertical)`
+       above) stays `color-mix(in srgb …)` for the transition — the adaptive darken
+       rides its RESTING endpoint (`--glass-bg-dock`), the in-flight morph frames are
+       sub-perceptual (the ratified resting-endpoint-only default). The muted body
+       register lifts to the full warm-ink under the engaged plate (the muted L40
+       tier cannot clear 4.5:1 on a translucent darkened plate — darkening moves the
+       plate TOWARD muted's own luminance; the low-contrast muted register is
+       inappropriate over a busy glass plate, so it resolves to the legible dark
+       ink, which clears ~10:1). */
+    :where(.glass-dock) {
+        /* BD.W-DOCK-CORE (D2) — the dock self-engage reads the warm-CHROMATIC dock ink
+           (glass-fx.css), NOT the frozen global `--glass-tint-ink` (W-DARK-MATERIAL's
+           whole-system register). So the darken-over-light RAISES chroma toward a warm
+           material (H ≈ 62°, C ≈ 0.016 at AA) rather than dropping L with chroma flat (the
+           gray dock). ONE dock tint source, ONE global ink — file-line-disjoint. */
+        --glass-tint-source: var(--glass-tint-ink-dock);
+        /* BC.W-ADAPTIVE-RECONCILE — the dock JOINS the continuous observer driver (the
+           literal G2 surface: "darken DYNAMICALLY like iOS 27"). The dock's own
+           `useGlassBackdropLuminance` observer samples the threaded `:background-canvas`
+           (aurora/blob) and WRITES `--glass-backdrop-luma`; this clamp READS it and lerps
+           the plate from the warm-cream floor toward the ≤24% AA ceiling as the field
+           brightens past the knee — deepening over a bright bleed, lifting translucent over
+           a dark trough (the SAME clamp the content/overlay tiers get — ONE axis/driver/
+           signal; the discrete `@container` bucket RETIRED). Calm (luma ≤ knee) → floor. */
+        --glass-tint-strength: clamp(
+            var(--glass-tint-strength-floor),
+            calc(
+                var(--glass-tint-strength-floor) +
+                (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee)))
+            ),
+            var(--glass-tint-strength-aa)
+        );
+        --dock-fg-on-aurora: var(--glass-tint-ink);
+        --muted-foreground: var(--foreground);
+    }
+
+    /* The ancestor-querying `@container` block KEPT — it reaches the DESCENDANT
+       nested-glass surfaces inside a dock when a consumer marks `--glass-backdrop:
+       light` on the dock's ancestor (the self-engage above re-points only the dock
+       root's own inheriting tokens; a consumer's explicit ancestor bucket still
+       cascades to nested glass through this block). */
+    @container style(--glass-backdrop: light) {
+        .glass-dock {
+            --glass-tint-source: var(--glass-tint-ink);
+            --glass-tint-strength: var(--glass-tint-strength-aa);
+            --dock-fg-on-aurora: var(--glass-tint-ink);
+        }
+    }
+
+    /* AX.W55 — the `contrast-color()` flip for the dock control foreground (Chrome
+       147+/Safari 26+; progressive enhancement, NEVER the load-bearing floor). The
+       declarative bucket above already carries AA on all engines (it darkens the dock
+       plate so the warm-dark `--dock-fg-on-aurora` clears ~17:1 over white at the 18%
+       floor). On a supporting engine `contrast-color()` REFINES the control ink,
+       anchored on the LIGHT BACKDROP signal (`--card`, the warm-white surface base the
+       bright bucket implies) — `contrast-color(var(--card))` resolves to the legible
+       DARK ink. Anchoring on the dark ink instead inverts to white (illegible on the
+       still-light dock plate), so the anchor is the light surface, matching the rung
+       refinement in glass.css. The bucket is the floor; this is the native pick. */
+    @supports (color: contrast-color(white)) {
+        /* The SELF-ENGAGED dock refinement (the unconditional self-engage above);
+           progressive enhancement only — the declarative darken is the AA floor. */
+        :where(.glass-dock) {
+            --dock-fg-on-aurora: contrast-color(var(--card));
+            --muted-foreground: contrast-color(var(--card));
+        }
+        @container style(--glass-backdrop: light) {
+            .glass-dock {
+                --dock-fg-on-aurora: contrast-color(var(--card));
+            }
+        }
+    }
+}
+
+/* BB.W-LIQUID-REVEAL — the dock-expand bloom beat's blur-settle is OFF under
+   `prefers-reduced-motion: reduce` (the vestibular floor): a reduced-motion dock reads
+   crisp at every state, no in-between blur frames.
+   BC.W-DOCK-SHRINK-BLUR — the self-blur is now gated to `[data-morphing]`, so the PRM
+   carve zeroes it on the ARMED scope too (specificity 0,2,0) — a PRM dock that briefly
+   arms `[data-morphing]` carries no 3px bloom; the resting `.glass-dock` is already
+   crisp by the re-gate. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-dock,
+    .glass-dock[data-morphing] {
+        --dock-reveal-blur: 0px;
+    }
+}