@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock/morph.css

@@ -1,499 +1 @@
-/* dock/morph.css — the SINGLE-SCALAR morph chrome + state response (AX.W06 carve).
- *
- * Carved from the dock.css god-module (slice 25). This partial owns the dock's
- * DYNAMIC chrome: the W01 `--dock-expand-t` directional expanded-ness derivation,
- * the root background/border/padding interpolation on the ONE `--dock-morph-t`
- * clock, the collapsed/summary state (the W45-TUNE Q1 proportioned pill + the
- * summary glyph reveal), the held / open-descendant surface response, and the
- * W55 adaptive-legibility `--glass-backdrop: light` bucket. The static structural
- * surface (root, clip, variants, persistent) lives in dock/shell.css.
- *
- * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
- * carve is isomorphic (same layer, same source order → ZERO visual delta). */
-
-@layer components {
-    /* AX.W01 — the root chrome morphs off the SINGLE `--dock-morph-t` scalar, NOT a
-       CSS transition (the prior `padding/scale/radius var(--dock-motion-resize)` +
-       `background/border-color var(--dock-motion-standard)` transition list — TWO
-       curves on TWO durations — is DELETED). `--dock-expand-t` is the directional
-       expanded-ness (0 = collapsed look, 1 = expanded look) derived from the
-       per-swap morph scalar + the synchronously-set `.expanded`/`.collapsed` class:
-       the box width AND the root padding/radius/color move on ONE clock. The
-       per-frame writes drive the registered `<number>` scalar; the `calc()` reads
-       below interpolate composited. Under PRM the spring's `respectReducedMotion`
-       settles instantly (the scalar jumps 0→1 in one frame → the chrome snaps). */
-
-    /* `--dock-expand-t` — the directional expanded-ness. `--dock-morph-t` is a
-       REGISTERED `@property` (initial-value 0), so it is NEVER guaranteed-invalid:
-       `var(--dock-morph-t, 1)` reads 0 at REST (the fallback is DEAD), which would
-       resolve every expanded dock to expand-t 0 → the collapsed resting look (the
-       pill-radius + collapsed bg/border/padding regression). So the resting value is
-       stated STATICALLY per class, and ONLY while a morph is in flight
-       (`[data-morphing]` armed on the root by useLayerTransition, cleared on settle)
-       does expand-t track the live spring scalar. The class is ALREADY the END state
-       during the morph, so the read resolves the correct in-flight blend (collapse
-       1→0 via `1 - t`; expand 0→1 via `t`); on settle `[data-morphing]` clears and
-       expand-t snaps to the exact class endpoint. */
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the `--dock-expand-t` directional derivation is
-       ORIENTATION-AGNOSTIC. The derivation reads the per-swap morph scalar + the
-       synchronously-set `.expanded`/`.collapsed` class — there is NO axis in this
-       blend (a `t`-vs-`1-t` directional read), so the `:not(.vertical)` qualifier is
-       DROPPED here. A collapsing VERTICAL dock now derives the same in-flight
-       expand-t (the box-size arm `layers.css` already morphs `block-size` on
-       `--dock-morph-t`; this gives the chrome the matching directional scalar). The
-       earlier "a vertical rail is ALWAYS-EXPANDED" assumption is retired since
-       vertical-collapse shipped — `alwaysExpanded` defaults false (GlassDock.vue),
-       so a genuinely-collapsing vertical dock gets its chrome on the ONE clock. */
-    .glass-dock.expanded,
-    .glass-dock.always-expanded {
-        --dock-expand-t: 1;
-    }
-
-    .glass-dock.collapsed {
-        --dock-expand-t: 0;
-    }
-
-    .glass-dock.expanded[data-morphing],
-    .glass-dock.always-expanded[data-morphing] {
-        --dock-expand-t: var(--dock-morph-t);
-    }
-
-    .glass-dock.collapsed[data-morphing] {
-        --dock-expand-t: calc(1 - var(--dock-morph-t));
-    }
-
-    /* BC.W-DOCK-SHRINK-BLUR — the BB.W-LIQUID-REVEAL bloom-from-source decongest is a
-       TRANSIENT, not a resting state. HEAD keyed the bare `.glass-dock` self-blur off
-       `--dock-expand-t`, which AT REST resolves to the class endpoint → a PERMANENT 3px
-       self-blur on the resting collapsed dock, STACKED on the 9px backdrop (the "blurry
-       mess when shrunken", glass-dock-codebase §2.4). The FIX gates the self-blur (a
-       SURFACE `filter` arm on the dock's own pixels — NOT `backdrop-filter`, so the glass
-       plate blur is never clobbered; compositor-safe) to `[data-morphing]`: at REST the
-       dock is CRISP; ONLY mid-morph does the 3px bloom settle to 0 as the pill
-       materializes (the iOS-27 bloom, gesture-only). The backdrop blur (the glass
-       material) is UNTOUCHED. PRM zeroes it (the carve below). Clean break, no alias. */
-    .glass-dock {
-        --dock-reveal-blur: 0px; /* resting: CRISP — no own-pixel self-blur */
-    }
-    .glass-dock[data-morphing] {
-        --dock-reveal-blur: 3px; /* the transient decongest bloom — mid-morph only */
-        filter: blur(calc(var(--dock-reveal-blur) * (1 - var(--dock-expand-t, 1))));
-    }
-
-    /* The morphing root chrome — background / border-color interpolate between the
-       collapsed and expanded endpoints on the ONE `--dock-expand-t` scalar. Scoped
-       to the horizontal dock (`:not(.vertical)`) — the inline-axis aperture morph;
-       a vertical dock collapses its BLOCK axis (the summary/full FLIP from the
-       orchestrator) and reads its own surface plate (shell.css `.glass-dock.vertical`).
-       The two color axes blend in srgb (the house mix the token ladder speaks). The
-       `.collapsed` discrete bg/border declarations are RETIRED — this block is the
-       single authority, and at rest `--dock-expand-t` resolves to the class endpoint
-       (0 collapsed / 1 expanded) so the resting look is exact.
-       AZ.W-DOCK-TAXONOMY — the `variant-dock` class is gone; `.glass-dock:not(.vertical)`
-       IS the horizontal dock now (no second-way to express orientation). */
-    .glass-dock:not(.vertical) {
-        /* AY.W-A11Y-PERF O-1 / AZ.W-ADAPTIVE-AUTO Arm 1 — BOTH morph endpoints compose
-           the W55 oklab adaptive tint so the self-engage darken (the unconditional
-           `:where(.glass-dock)` rule below re-points the element-level
-           `--glass-tint-source`/`--glass-tint-strength`) reaches the LIVE
-           horizontal dock surface in BOTH the expanded AND the COLLAPSED look (this
-           0,3,0 morph interp OVERRIDES the 0,1,0 shell.css bg, so the tint must be
-           applied HERE — and the COLLAPSED endpoint `--glass-bg-wash` must carry it too,
-           else a collapsed dock over light paints the un-darkened wash and the plate
-           vanishes — the C5-2 ΔL≈0.01 collapse, re-surfaced on the collapsed endpoint).
-           The srgb transition mix between the two TINTED endpoints is preserved (the
-           in-flight morph frames are sub-perceptual); at the `0%` rest default both
-           inner oklab mixes are no-ops so this is byte-identical to today. */
-        background: color-mix(
-            in srgb,
-            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%),
-            color-mix(
-                in oklab,
-                var(--glass-bg-wash),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-        );
-        border-color: color-mix(
-            in srgb,
-            var(--glass-border-dock, var(--glass-border-resting))
-                calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-border-floating)
-        );
-    }
-
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL chrome-interp un-gate (BB-1). The
-       bg/border interp is AXIS-INVARIANT (a color mix reads the scalar with no
-       axis), so the vertical dock interpolates its plate between the SAME
-       collapsed↔expanded endpoints on the SAME `--dock-expand-t` scalar the
-       horizontal block reads — the ONE `DOCK_SPRING` clock, no second clock, no
-       re-added CSS transition. This PARALLEL `.vertical` block (specificity 0,2,0,
-       source-order AFTER the shell.css static `.glass-dock.vertical` plate so it
-       wins at equal specificity) is the inverse-axis twin of the horizontal block
-       above — the box-size morph already rides `block-size` on `layers.css`'s
-       `--dock-morph-t`; this gives the plate chrome the matching directional blend
-       so the vertical collapse↔expand no longer SNAPS its bg/border discretely. At
-       the rest endpoints `--dock-expand-t` resolves to the class value (0 collapsed
-       / 1 expanded), so the resting look is exact — byte-equivalent to the shell.css
-       static plate it supersedes during the morph. */
-    .glass-dock.vertical {
-        background: color-mix(
-            in srgb,
-            color-mix(
-                in oklab,
-                var(--glass-bg-dock, var(--glass-bg-wash)),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-                calc(var(--dock-expand-t, 1) * 100%),
-            color-mix(
-                in oklab,
-                var(--glass-bg-wash),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-        );
-        border-color: color-mix(
-            in srgb,
-            var(--glass-border-dock, var(--glass-border-wash))
-                calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-border-floating)
-        );
-    }
-
-    /* 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.
-
-       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:not(.vertical):not(.dock-overflow-wrap) {
-        /* 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)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL padding interp is the AXIS-INVERSE
-       of the horizontal layout-isolation contract above. The vertical collapse↔
-       expand is a BLOCK-HEIGHT aperture (the box-size arm morphs `block-size`,
-       layers.css), so the CROSS (inline) axis MUST be invariant across the morph —
-       else the dock's outer WIDTH changes on collapse and reflows its horizontal
-       siblings (the §1 contract, mirrored onto the vertical axis). So `padding-
-       inline` is PINNED at the expanded inline value in BOTH states, and ONLY
-       `padding-block` morphs to tighten the collapsed pill on the morph axis. The
-       collapsed block-pad endpoint is the EXPANDED inline pad (max'd with the
-       consumer `--dock-collapsed-padding` handle) so the height-pinned-cross collapsed
-       pill is SYMMETRIC. Specificity 0,2,0 source-order after shell.css's static
-       `.glass-dock.vertical` padding so this wins at equal specificity; at the rest
-       endpoints `--dock-expand-t` is the class value so the look is exact. Scoped to
-       the NON-scroll/non-wrap vertical dock. */
-    .glass-dock.vertical:not(.dock-overflow-wrap) {
-        --dock-pad-collapsed: max(
-            var(--dock-padding-inline, 0.5rem),
-            var(--dock-collapsed-padding, 0px)
-        );
-        /* inline padding is INVARIANT — the cross axis, pinned both states so the
-           outer inline-size never changes → 0px horizontal sibling reflow. */
-        padding-inline: var(--dock-padding-inline, 0.5rem);
-        padding-block: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* AX.W01 — the collapsed padding / background / border-color are RETIRED here
-       (the `--dock-expand-t` morph block above is the single authority for those
-       three axes — they interpolate, never snap). `.collapsed` keeps only its
-       non-morphing concerns: the pointer affordance, the centred summary layout,
-       and the collapsed shadow (box-shadow crossfades discretely — a subtle,
-       acceptable swap that a `color-mix` cannot blend across its multi-layer
-       value). */
-    .glass-dock.collapsed {
-        cursor: pointer;
-        justify-content: center;
-        box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
-    }
-
-
-    /* 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,
-            var(--dock-layer-height, 2.5rem)
-        );
-        min-block-size: var(
-            --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;
-    }
-
-    /* AX.W45 DK1 — the collapsed/summary glyph appears WITH the pill, no added
-       delay. The `--summary` pane is the INCOMING pane on collapse, but the shared
-       stagger ramp reads `--dock-expand-t` which runs 1→0 on collapse — so the
-       summary glyph used to fade OUT over the back half of the morph and pop in only
-       at settle (the "shrunken icon does not appear for a while" defect). Keying the
-       summary pane's stagger scalar to `--dock-morph-t` directly (the per-swap
-       incoming-ness, 0→1) reveals it as the box settles — appearing WITH the pill.
-       The summary is a single front-loaded glyph (onset 0), so this lands it at full
-       opacity by the morph's tail. The `--dock-expand-t` directional scalar stays
-       the right driver for the box CHROME (bg/border/padding/radius interpolate
-       between the collapsed↔expanded endpoints); only the summary pane's CONTENT
-       reveal is decoupled onto the incoming scalar. */
-    .glass-dock[data-morphing] .dock-layer--summary {
-        --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
-       the expand morph uses — a collapsed→hover→expand gesture is one continuous
-       spring, not a `scale`-ease handed off to the width-spring. The hover scale
-       and the press squish (`--scale-press-dock`) are now one register on the dock
-       surface.
-
-       AZ.W-DOCK-FLICKER — the `scale` arm is GATED on `:not([data-morphing])` (the
-       collapse-onset scale-pop fix, C2-2). `.collapsed` flips on SYNCHRONOUSLY when
-       a hovered dock begins collapsing, but the box is still painted at EXPANDED
-       width for the morph's leading frames (the `onSwap` pin + 1-rAF measure-defer
-       in dockMorphContext.ts). The bare `.collapsed:hover { scale: 1.1 }` multiplied
-       that transient ~535px box, painting a ±24-34px right-edge pop (the user's
-       "flashing"). Scoping the SCALE to `:not([data-morphing])` makes the +1.1 lift
-       apply ONLY at rest (the box is the 54px circle then) — during `[data-morphing]`
-       the hover scale is inert, mirroring the shipped `--dock-expand-t`
-       `[data-morphing]` precedent above (morph.css:46-53). The surface arms
-       (background/border/shadow) stay on the bare `:hover` (they don't multiply
-       geometry, so a hovered collapse keeps its hover read without the pop). */
-    .glass-dock.collapsed:hover {
-        background: var(--glass-bg-wash);
-        border-color: var(--glass-border-floating);
-        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-    }
-
-    .glass-dock.collapsed:hover:not([data-morphing]) {
-        scale: var(--dock-collapsed-hover-scale);
-        will-change: transform; /* BC.W-DOCK-ENGINE move 2 — promote the armed-at-rest scale lift */
-    }
-
-    /* J.W5.C — held-state substrate response.
-     *
-     * When a descendant signals `dockKeepOpen` (e.g. an active slider drag),
-     * `useDockState.isHeld` flips true and the root carries `data-held`.
-     * The dock background lifts a tier (resting → floating-equivalent) and
-     * the border quiets to the floating ring; the change tracks pointer
-     * movement on `--duration-fast` so it reads as a held-cursor cue, not
-     * a state change. The same flag is consumed by descendants (Slider
-     * thumb halo) via `useOptionalDockContext().held` for cross-substrate
-     * coordination (typed-key canonical shape; O.W2 invariant 25).
-     */
-    .glass-dock[data-held] {
-        /* AX.W55 — the held tier threads the oklab tint wrapper (zero-delta at the
-           `0%` rest default) so the adaptive darken reaches the held state too. */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating, var(--glass-bg-resting)),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        border-color: var(--glass-border-floating, var(--glass-border-resting));
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-
-    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
-       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
-       read natively (no consumer JS). Idempotent with `[data-held]` above (same
-       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
-    .glass-dock:has([data-state="open"]) {
-        /* AX.W55 — same oklab tint wrapper as `[data-held]` (zero-delta at rest). */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating, var(--glass-bg-resting)),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        border-color: var(--glass-border-floating, var(--glass-border-resting));
-    }
-
-    /* ── 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) {
-        --glass-tint-source: var(--glass-tint-ink);
-        /* 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, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
-            ),
-            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;
-    }
-}
+@layer components { .glass-dock.expanded, .glass-dock.always-expanded { --dock-expand-t: 1; } .glass-dock.collapsed { --dock-expand-t: 0; } .glass-dock.expanded[data-morphing]:not([data-pane-swap]), .glass-dock.always-expanded[data-morphing]:not([data-pane-swap]) { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing]:not([data-pane-swap]) { --dock-expand-t: calc(1 - var(--dock-morph-t)); } .glass-dock { --dock-reveal-blur: 0px; } .glass-dock[data-morphing] { --dock-reveal-blur: 1.25px; filter: blur( calc( var(--dock-reveal-blur) * clamp(0, calc((0.5 - var(--dock-expand-t)) / 0.5), 1) ) ); } .glass-dock:not(.vertical) .dock-plate { background: color-mix( in srgb, 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) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-resting)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock.vertical .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-wash)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock:not(.vertical):not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-block, 0.375rem), var(--dock-collapsed-padding, 0px) ); 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)) * var(--dock-expand-t) ); } .glass-dock.vertical:not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-inline, 0.5rem), var(--dock-collapsed-padding, 0px) ); padding-inline: var(--dock-padding-inline, 0.5rem); padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.collapsed { cursor: pointer; justify-content: center; box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed)); } .glass-dock.collapsed .dock-layer--summary { min-width: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); min-block-size: var( --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; } .glass-dock[data-morphing] .dock-layer--summary { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed .dock-layer--summary:empty { min-width: 0; inline-size: 0; padding: 0; margin: 0; border: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers { margin-inline-start: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent { display: grid; place-items: center; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * { place-self: center; } .glass-dock.collapsed .dock-persistent svg, .glass-dock.collapsed .dock-layer--summary svg { min-width: 1rem; min-height: 1rem; } .glass-dock.collapsed:hover { box-shadow: var(--shadow-dock-override, var(--shadow-dock)); } .glass-dock.collapsed:hover .dock-plate { background: var(--glass-bg-wash); border-color: var(--glass-border-floating); } .glass-dock.collapsed:hover:not([data-morphing]) { scale: var(--dock-collapsed-hover-scale); will-change: transform; } .glass-dock[data-held] .dock-plate { background: color-mix( in oklab, var(--glass-bg-floating, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-floating, var(--glass-border-resting)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }