@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/dock.css

@@ -1,9 +1,45 @@
 /* Dock primitives exported through @mkbabb/glass-ui/styles.
  *
- * This file is the style authority for the dock component family. The Vue
- * SFCs own structure and runtime behavior; selectors, motion, glass, and
- * layering tokens live here so consumers have one public CSS path.
- */
+ * This file is the CORE of the dock component family — the `@property
+ * --dock-morph-t` registration, the @layer-components OPEN, the SHARED
+ * cross-control four-state contract (the :focus-visible / :disabled comma-groups
+ * + the motion-token :where() group — they reference every control selector but
+ * are shared, so they live at the import root, not per-control), and the
+ * `@import`s of the cohesive `dock/*.css` partials.
+ *
+ * AX.W06 — the 1762-line dock.css god-module (slice 25) was CARVED into
+ * src/styles/dock/ cohesive single-axis partials, each under the 500-line bound,
+ * @import-ed below in cascade order into the SAME `@layer components` so the
+ * carve is isomorphic (same layer, same source order → ZERO visual delta):
+ *   - dock/shell.css       — the `.glass-dock` structural skeleton (root, W02
+ *                            morph-clip aperture, grain, vertical-root, shape /
+ *                            variant plates, position, W45 #persistent + vertical
+ *                            three-region body).
+ *   - dock/morph.css       — the W01 single-scalar morph chrome + state response
+ *                            (--dock-expand-t interp, collapsed/summary, held /
+ *                            open, the W55 adaptive-legibility bucket).
+ *   - dock/density.css     — the W45 density × --dock-scale cascade.
+ *   - dock/layers.css      — the `.dock-layer` crossfade + hit-test + reveal-
+ *                            stagger contract + the `layout="grid"` tile grid.
+ *   - dock/layer-group.css — `.dock-layer-group` / layer-switcher rail / stack.
+ *   - dock/overflow.css    — the `overflow=` scroll/wrap strategies + the coarse
+ *                            multiplier.
+ *
+ * The FIVE interactive control families stay in dock-controls.css (the AU.W8b.3
+ * carve, @import-ed by index.css directly after this file). The Vue SFCs own
+ * structure + runtime behavior; selectors, motion, glass, and layering tokens
+ * live here + in the partials so consumers have one public CSS path. */
+
+/* CSS `@import` rules must precede every other rule (a `@property`/`@layer`
+   block after an `@import` would render it invalid + dropped). The six partials
+   @import in cascade order; each opens its own `@layer components` so the layered
+   cascade is preserved bit-for-bit (the carve-isomorphism gate is the witness). */
+@import "./dock/shell.css";
+@import "./dock/morph.css";
+@import "./dock/density.css";
+@import "./dock/layers.css";
+@import "./dock/layer-group.css";
+@import "./dock/overflow.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
    to the `.glass-dock` root; EVERY morph axis (box size, padding, radius, scale,
@@ -55,7 +91,8 @@
        group keeps full class+pseudo specificity (NOT `:where()`, which would
        zero the class and let a per-control :hover box-shadow override the focus
        ring). Per-control transition extensions (the box-shadow fade on
-       focus-visible) stay with their own selectors below where they differ. */
+       focus-visible) stay with their own selectors in dock-controls.css where
+       they differ. */
     .dock-icon-button:focus-visible,
     .dock-tab-button:focus-visible,
     .dock-select-trigger:focus-visible,
@@ -71,1348 +108,4 @@
         opacity: var(--opacity-disabled);
         cursor: not-allowed;
     }
-
-    .glass-dock {
-        --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
-        /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
-           live as semantic tokens (defaults in `tokens.css`). When
-           content exceeds the cap, the appropriate axis container
-           scrolls with a mask-fade. Consumers override per-instance by
-           setting `--dock-max-block-size` / `--dock-max-inline-size`
-           on a `.glass-dock` directly. */
-        --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
-        --dock-collapsed-hover-scale: var(--scale-hover-dock);
-        /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
-           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
-           is the px the child rises from as it fades in. Consumers retune the
-           cascade feel per instance.
-
-           AX.W02 — `--dock-stagger-step` is the per-child onset BEAT: each
-           successive control's reveal starts this fraction-of-morph later than the
-           one before it, so the row fills outer→in. ONE token × the child index
-           replaces the hand-typed 0.08/0.16/0.24/0.32/0.4 onset ladder — the onset
-           is `step × (childIndex − 1)`, capped (the cap below). 0.08 = ~5% of the
-           ~0.32s morph between items — inside Emil Kowalski's 30–60ms stagger band,
-           never the >100ms "slideshow" register. The onset rides the NORMALIZED
-           morph progress (`--dock-expand-t`), NOT a wall-clock timer, so a fast
-           flick and a slow hover-open both choreograph correctly and an interrupted
-           morph orphans no timers. */
-        --dock-stagger-window-size: 0.55;
-        --dock-stagger-rise: 4px;
-        --dock-stagger-step: 0.08;
-        /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
-           radius (default --radius-dock-card = --radius-3xl, density-scaled
-           below); `--dock-tile-min` is the grid tile minimum (auto-fill track
-           floor). Both are density-scaled (compact tighter, spacious looser) — the
-           card radius + tile size ride the density cascade, never magic numbers. */
-        --dock-card-radius: var(--radius-dock-card);
-        --dock-tile-min: 4.5rem;
-        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
-           mints the stacking context once so a portaled popover over `--z-dock`
-           stays above the dock during a hover scale (the load-bearing
-           stacking-context guarantee). Covers every dock scale site. */
-        scale: 1;
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        /* AW.W1 — the dock does NOT establish a default inline-size container.
-           `container-type: inline-size` applies `contain: inline-size`, which
-           makes an element's inline size INDEPENDENT of its contents — fatally
-           incompatible with a shrink-to-fit pill: under it `.glass-dock` cannot
-           size to its content and collapses to its padding floor (~19px) with the
-           active layer overflowing (the 3.3.0 regression — every horizontal dock,
-           collapsed AND always-expanded, rendered as a sliver). The `dock`-named
-           container is now OPT-IN via the `containerName` prop: a consumer
-           embedding the dock in a width-CONSTRAINED host (a 320px sidebar) sets
-           `containerName="dock"` to get the descendant container-query reads (the
-           audacious-label compression below), trading shrink-to-fit for the
-           host-constrained width it already has there. The default free-floating
-           dock shrink-wraps to its content (AV.W16 TW3 made this a default and
-           silently broke dock sizing for the common case). */
-        border-radius: var(--radius-dock);
-        white-space: nowrap;
-        max-inline-size: var(--dock-max-inline-size);
-        padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem);
-        background: var(--glass-bg-dock, var(--glass-bg-resting));
-        backdrop-filter: var(--dock-surface-blur);
-        border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
-        /* AV.W15 M3 — the full-perimeter `--glass-edge-light` rim rides as the
-           leading inset layer of the dock shadow stack (the navigation-band
-           silhouette catch-light, distinct from the top-only highlight). */
-        box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock));
-    }
-
-    /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
-       Migrated from `overflow: hidden` to a SINGLE-AXIS `overflow: clip` on the
-       MORPH axis (horizontal clips X / visible Y; vertical clips Y / visible X),
-       gated on a `data-morphing` attribute the driver owns (set at gesture START,
-       cleared on SETTLE). The clip PERSISTS through the morph — content is laid
-       out ONCE at its natural size behind the aperture and the growing/shrinking
-       box uncovers it, never spills it — and lifts to `visible` only at REST
-       expanded (so grown content + the focus ring paint past the box). The
-       prior `.expanded { overflow: visible }` (bound synchronously to
-       `visualExpanded`) lifted the clip at frame 0, leaving no aperture to reveal
-       through; the `:not([data-morphing])` guard holds the clip for the whole
-       gesture and lifts it on the final paint.
-
-       `overflow: clip` is PAINT-ONLY (not a scroll container): it never
-       participates in `scrollIntoView`/scroll-anchoring, cannot be a
-       scroll-driven-animation `scroller`, and drops the `min-width:0` scroll-box
-       dance for the non-scroll shell. The cross axis is ALWAYS explicitly
-       `visible` (the MDN single-axis-clip-degrades-to-hidden caveat). The
-       legitimate scroll ports (`.dock-scroll-{x,y}`, `overflow: auto`) STAY
-       `auto` — they are NOT migrated. AT.W7-dock-a's orthogonality holds: the
-       `containerName` opt-in does not touch the clip. */
-    .glass-dock:not(.vertical) {
-        overflow-x: clip;
-        overflow-y: visible;
-    }
-
-    .glass-dock.vertical {
-        overflow-x: visible;
-        overflow-y: clip;
-    }
-
-    /* DURING a morph the clip is the aperture — keyed off `data-morphing`, NOT
-       off `.expanded`, so it survives the whole gesture and the box reveals its
-       content rather than letting it spill. */
-    .glass-dock[data-morphing]:not(.vertical) {
-        overflow-x: clip;
-        overflow-y: visible;
-    }
-
-    .glass-dock[data-morphing].vertical {
-        overflow-x: visible;
-        overflow-y: clip;
-    }
-
-    /* AT REST EXPANDED — lift the morph-axis clip (grown content + focus ring
-       paint past the box). Fires ONLY when NOT morphing; the [data-morphing]
-       rules above win during the gesture by being more specific + later. */
-    .glass-dock.expanded:not([data-morphing]),
-    .glass-dock.always-expanded:not([data-morphing]) {
-        overflow: visible;
-    }
-
-    /* AX.W04 F6 — the vertical-dock max-block-size + internal-scroll CONTRACT.
-       A vertical rail caps at `--dock-max-block-size` (the `.vertical` rule), but
-       at rest the `overflow: visible` above let over-cap content SPILL — forcing a
-       consumer (bbnf-buddy ToolsLayer) to hand-anchor a max-height + scroll. Ship
-       the contract here: at rest a vertical column scrolls its OWN block axis when
-       content exceeds the cap (cross axis stays `visible` for focus rings + grown
-       popovers). When content fits under the cap (`height:auto` < cap) nothing
-       scrolls — the scroll port only engages on real over-cap content. The
-       block-axis morph clip stays `data-morphing`-gated above; this is the
-       AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
-       anchor the column to the viewport without re-deriving the scroll plumbing. */
-    .glass-dock.vertical.always-expanded:not([data-morphing]),
-    .glass-dock.vertical.expanded:not([data-morphing]) {
-        overflow-x: visible;
-        overflow-y: auto;
-        scrollbar-width: none;
-        overscroll-behavior-y: contain;
-    }
-
-    .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar,
-    .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar {
-        display: none;
-    }
-
-    .glass-dock[data-density="compact"] {
-        --dock-padding-block: var(--dock-density-compact-padding-block, 0.25rem);
-        --dock-padding-inline: var(--dock-density-compact-padding-inline, 0.375rem);
-        --dock-control-size: var(--dock-density-compact-control-size, 2rem);
-        --dock-layer-height: var(--dock-density-compact-layer-height, 2rem);
-        --dock-layer-gap: var(--dock-density-compact-gap, 0.25rem);
-        --dock-trigger-padding-block: var(
-            --dock-density-compact-trigger-padding-block,
-            0.1875rem
-        );
-        --dock-trigger-padding-inline: var(
-            --dock-density-compact-trigger-padding-inline,
-            0.4375rem
-        );
-        --dock-tab-padding-block: var(
-            --dock-density-compact-tab-padding-block,
-            0.3125rem
-        );
-        --dock-tab-padding-inline: var(
-            --dock-density-compact-tab-padding-inline,
-            0.625rem
-        );
-        --dock-tab-h: 32px;
-    }
-
-    /* Comfortable density — the GlassDock default. Sits between compact
-       and spacious. */
-    .glass-dock[data-density="comfortable"] {
-        --dock-padding-block: var(--dock-density-comfortable-padding-block, 0.375rem);
-        --dock-padding-inline: var(--dock-density-comfortable-padding-inline, 0.5rem);
-        --dock-control-size: var(--dock-density-comfortable-control-size, 2.5rem);
-        --dock-layer-height: var(--dock-density-comfortable-layer-height, 2.5rem);
-        --dock-layer-gap: var(--dock-density-comfortable-gap, 0.375rem);
-        --dock-trigger-padding-block: var(
-            --dock-density-comfortable-trigger-padding-block,
-            0.25rem
-        );
-        --dock-trigger-padding-inline: var(
-            --dock-density-comfortable-trigger-padding-inline,
-            0.5rem
-        );
-        --dock-tab-padding-block: var(
-            --dock-density-comfortable-tab-padding-block,
-            0.4375rem
-        );
-        --dock-tab-padding-inline: var(
-            --dock-density-comfortable-tab-padding-inline,
-            0.75rem
-        );
-        --dock-tab-h: 38px;
-    }
-
-    .glass-dock[data-density="spacious"] {
-        --dock-padding-block: var(--dock-density-spacious-padding-block, 0.5rem);
-        --dock-padding-inline: var(--dock-density-spacious-padding-inline, 0.75rem);
-        --dock-control-size: var(--dock-density-spacious-control-size, 2.75rem);
-        --dock-layer-height: var(--dock-density-spacious-layer-height, 2.75rem);
-        --dock-layer-gap: var(--dock-density-spacious-gap, 0.5rem);
-        --dock-trigger-padding-block: var(
-            --dock-density-spacious-trigger-padding-block,
-            0.375rem
-        );
-        --dock-trigger-padding-inline: var(
-            --dock-density-spacious-trigger-padding-inline,
-            0.625rem
-        );
-        --dock-tab-padding-block: var(
-            --dock-density-spacious-tab-padding-block,
-            0.5rem
-        );
-        --dock-tab-padding-inline: var(
-            --dock-density-spacious-tab-padding-inline,
-            0.875rem
-        );
-        --dock-tab-h: 44px;
-    }
-
-    /* Audacious density — typography-forward chrome where the dock reads as
-       a primary surface, not a tray. Tab buttons set their own min-height so
-       consumer-bumped fonts no longer drift the button height — the
-       `--dock-tab-min-height` token reserves the row regardless of glyph rise. */
-    .glass-dock[data-density="audacious"] {
-        --dock-padding-block: var(--dock-density-audacious-padding-block, 0.5rem);
-        --dock-padding-inline: var(--dock-density-audacious-padding-inline, 0.875rem);
-        --dock-control-size: var(--dock-density-audacious-control-size, 4rem);
-        --dock-layer-height: var(--dock-density-audacious-layer-height, 4rem);
-        --dock-layer-gap: var(--dock-density-audacious-gap, 0.875rem);
-        --dock-trigger-padding-block: var(
-            --dock-density-audacious-trigger-padding-block,
-            0.625rem
-        );
-        --dock-trigger-padding-inline: var(
-            --dock-density-audacious-trigger-padding-inline,
-            1rem
-        );
-        --dock-tab-padding-block: var(
-            --dock-density-audacious-tab-padding-block,
-            0.5rem
-        );
-        --dock-tab-padding-inline: var(
-            --dock-density-audacious-tab-padding-inline,
-            1.5rem
-        );
-        --dock-tab-min-height: var(--dock-density-audacious-tab-min-height, 3.5rem);
-        --dock-tab-h: var(--dock-density-audacious-tab-min-height, 3.5rem);
-    }
-
-    /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN
-       box is narrow the audacious-dock label glyphs compress so the chrome
-       doesn't overflow its host (≤14px below 30rem, 15px 30–45rem). Keyed off
-       the dock's `dock` inline-size container — now OPT-IN via the
-       `containerName="dock"` prop (AW.W1 removed the always-on default that
-       broke shrink-to-fit), so it fires only for a dock the consumer has
-       width-CONSTRAINED into a host (the 320px sidebar case) where the
-       compression is meaningful and the containment does not collapse the box.
-       A free-floating dock shrink-wraps (box == content) so there is nothing to
-       compress. The var
-       is set on the `.dock-label` descendant (which reads it via
-       `font-size: var(--dock-label-size)`, typography.css). Thresholds keep
-       the prior 479/719px viewport cadence as box widths (30rem ≈ 480px,
-       45rem ≈ 720px at the 16px root). */
-    @container dock (max-width: 29.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
-            --dock-label-size: 14px;
-        }
-    }
-    @container dock (min-width: 30rem) and (max-width: 44.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
-            --dock-label-size: 15px;
-        }
-    }
-
-    .glass-dock::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        opacity: var(--glass-grain-opacity);
-        pointer-events: none;
-        mix-blend-mode: overlay;
-    }
-
-    .dark .glass-dock::after {
-        mix-blend-mode: soft-light;
-    }
-
-    /* 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. */
-    .glass-dock:not(.vertical).expanded,
-    .glass-dock:not(.vertical).always-expanded {
-        --dock-expand-t: 1;
-    }
-
-    .glass-dock:not(.vertical).collapsed {
-        --dock-expand-t: 0;
-    }
-
-    .glass-dock:not(.vertical).expanded[data-morphing],
-    .glass-dock:not(.vertical).always-expanded[data-morphing] {
-        --dock-expand-t: var(--dock-morph-t);
-    }
-
-    .glass-dock:not(.vertical).collapsed[data-morphing] {
-        --dock-expand-t: calc(1 - var(--dock-morph-t));
-    }
-
-    /* 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 `variant-dock` (the rail / instrument-strip variants own
-       their own surface vocabulary and do not collapse↔expand). 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. */
-    .glass-dock.variant-dock:not(.vertical) {
-        background: color-mix(
-            in srgb,
-            var(--glass-bg-dock, var(--glass-bg-resting))
-                calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-bg-wash)
-        );
-        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)
-        );
-    }
-
-    /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
-       wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
-       its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
-       Padding interpolates linearly between the collapsed floor and the expanded
-       block/inline padding on the same `--dock-expand-t` scalar. */
-    .glass-dock.variant-dock:not(.vertical):not(.dock-overflow-wrap) {
-        --dock-pad-collapsed: var(
-            --dock-collapsed-padding,
-            var(--dock-padding-block, 0.375rem)
-        );
-        padding-block: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
-        );
-        padding-inline: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* Vertical rails grow-to-fit then clamp at `--dock-max-block-size` (the
-       AX.W04 F6 contract). At rest a capped column scrolls its OWN block axis
-       internally (the `.vertical.always-expanded:not([data-morphing])` port above)
-       so a consumer setting `--dock-max-block-size` gets a viewport-anchored
-       scrollable tool palette without hand-anchoring it. `overflow="wrap"` is
-       horizontal-only (the class is not emitted for a vertical orientation); a
-       vertical column's natural overflow story is this cap + internal scroll. No
-       edge-fade mask — the scroll is scrollbar-hidden, not feathered. */
-    .glass-dock.vertical {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: stretch;
-        justify-content: flex-start;
-        gap: 0.25rem;
-        white-space: normal;
-        width: auto;
-        height: auto;
-        max-block-size: var(--dock-max-block-size);
-        /* overflow on the block (morph) axis is the data-morphing-gated clip
-           shell above; the cross axis stays visible there. */
-        padding: var(--dock-vertical-padding, var(--dock-padding-block, 0.375rem));
-        border-radius: var(--radius-dock);
-        /* AX.W01 — a vertical rail is ALWAYS-EXPANDED (no collapse↔expand morph),
-           so its root padding/background/border-color never morph; the prior
-           `padding/background/border-color var(--dock-motion-*)` transition arms
-           are DELETED (a residual root CSS-transition on the morph-chrome props is
-           the second-clock smell the single-scalar rebuild retires). The block-axis
-           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
-           via the `--dock-morph-t` scalar (the size `calc()` above), never a CSS
-           transition here. KEPT: the DECORATIVE hover-scale + press-squish (the
-           individual `scale`/`transform`) and the box-shadow fade — these are
-           interaction polish on the static rail, NOT the morph. */
-        transition:
-            box-shadow var(--dock-motion-standard),
-            transform var(--dock-motion-resize),
-            scale var(--dock-motion-resize);
-    }
-
-    .glass-dock.variant-rail {
-        padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem));
-        background: var(--glass-bg-dock, var(--glass-bg-wash));
-        border-color: var(--glass-border-dock, var(--glass-border-wash));
-    }
-
-    .glass-dock.variant-rail.shape-pill {
-        border-radius: var(--radius-pill);
-    }
-
-    .glass-dock.variant-rail.shape-rounded {
-        border-radius: var(--radius-xl);
-    }
-
-    /* AW.W3b — horizontal-root shape rules. The `shape-*` class previously bound
-       ONLY under `.variant-rail`; on a horizontal `variant-dock` the prop silently
-       no-op'd (the root hardwired `--radius-dock` = `--radius-pill`). These rules
-       close that documented-but-dead prop — `shape="rounded"` / `shape="card"` now
-       paint on a horizontal dock. Scoped to `variant-dock:not(.vertical)` so the
-       rail + instrument-strip variants (which own their own radius) are untouched. */
-    .glass-dock.variant-dock:not(.vertical).shape-rounded {
-        border-radius: var(--radius-xl);
-    }
-
-    /* The big-dock CARD shell — a FINITE concentric radius above 2xl, below pill.
-       It does NOT collapse to a stadium. Collapsed it returns to a pill (the morph
-       target); the pill↔card radius now MORPHS on the SAME `--dock-expand-t` scalar
-       the box + chrome ride (ONE clock, no discrete snap) — `--radius-pill` at
-       expand-t 0 (collapsed), `--dock-card-radius` at expand-t 1 (expanded). The
-       prior two discrete `.shape-card` / `.shape-card.collapsed` rules + their
-       reliance on the deleted `border-radius var(--dock-motion-resize)` transition
-       are RETIRED for this single interpolation. */
-    .glass-dock.variant-dock:not(.vertical).shape-card {
-        border-radius: calc(
-            var(--radius-pill) +
-                (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* The squircle reads markedly better at the large card radius — an
-       `@supports`-gated ENHANCEMENT only (Chrome 139+, no FF/Safari 2026). The
-       border-radius arc is the CONTRACT; the squircle is the better tier (the
-       baseline arc is the acceptable contract, NOT a degraded fallback). */
-    @supports (corner-shape: squircle) {
-        .glass-dock.variant-dock:not(.vertical).shape-card {
-            corner-shape: squircle;
-        }
-    }
-
-    /* AJ-W1-δ — `instrument-strip` variant (per G-AJ-D7 Path 1).
-     *
-     * The speedtest survey cockpit's vertical rail needs chassis-strip
-     * aesthetics, not the dock-rail's stadium-pill chrome. Adopts the
-     * surface vocabulary of the `<InstrumentChassis>` family so the
-     * strip reads as a journey-station slot — the same surface the
-     * speedtest + complete + thankyou stations ride.
-     *
-     * The variant intentionally inherits the rail variant's vertical
-     * layout (orientation: vertical; flex-direction: column) — the
-     * orientation + fitContent computeds in GlassDock.vue branch on
-     * `variant === "instrument-strip"` alongside the existing rail
-     * branch. Only the surface vocabulary changes vs the rail:
-     *   - Border-radius drops from `--radius-pill` to `--radius-card`
-     *     (matches `<InstrumentChassis> { border-radius: var(--radius-card) }`).
-     *   - Background plate routes through `--glass-bg-chassis` (0.28α
-     *     per tokens.css §V) instead of `--glass-bg-wash`.
-     *   - Border routes through `--glass-border-quiet` to match the
-     *     chassis primitive's at-rest stroke.
-     *   - Box-shadow routes through `--glass-shadow-quiet` plus the
-     *     inset-bottom hairline matching the chassis primitive
-     *     (instrument-chassis.css:42-45).
-     *
-     * The `.shape-pill` / `.shape-rounded` class hooks are still emitted
-     * by the template but no rule binds them under
-     * `.variant-instrument-strip` — chassis-strip carries ONE canonical
-     * border-radius (`--radius-card`), per the chassis family. */
-    .glass-dock.variant-instrument-strip {
-        padding: var(
-            --dock-instrument-strip-padding,
-            var(--dock-padding-inline, 0.75rem)
-        );
-        background: var(--glass-bg-chassis, var(--glass-bg-wash));
-        border: 1px solid var(--glass-border-quiet, var(--glass-border-resting));
-        border-radius: var(--radius-card);
-        box-shadow:
-            var(--glass-shadow-quiet, var(--shadow-dock)),
-            inset 0 -0.5px 0 0 rgb(0 0 0 / 0.06);
-    }
-
-    /* Engraved-bezel inner stroke — matches `<InstrumentChassis>::before`
-     * (instrument-chassis.css:85-93). The chassis-strip silhouette without
-     * this stroke reads as a flat plate; with it the strip reads as the
-     * polished sleeve of an instrument-panel module. The `::before`
-     * z-index sits above the chassis backdrop but below the slotted
-     * content (the MetricBadge stack), matching the chassis primitive's
-     * z-order. The host `.glass-dock` is already `position: relative`. */
-    .glass-dock.variant-instrument-strip::before {
-        content: "";
-        position: absolute;
-        inset: 0.5px;
-        border-radius: calc(var(--radius-card) - 0.5px);
-        border: 1px solid var(--surface-tint-4);
-        pointer-events: none;
-        z-index: 1;
-    }
-
-    .dark .glass-dock.variant-instrument-strip::before {
-        border-color: var(--surface-tint-6);
-    }
-
-    /* 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));
-    }
-
-    .glass-dock.collapsed .dock-layer--summary {
-        min-width: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        justify-content: center;
-    }
-
-    /* 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. */
-    .glass-dock.collapsed:hover {
-        background: var(--glass-bg-wash);
-        border-color: var(--glass-border-floating);
-        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-        scale: var(--dock-collapsed-hover-scale);
-    }
-
-    /* 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] {
-        background: var(--glass-bg-floating, var(--glass-bg-resting));
-        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"]) {
-        background: var(--glass-bg-floating, var(--glass-bg-resting));
-        border-color: var(--glass-border-floating, var(--glass-border-resting));
-    }
-
-    .glass-dock:where(.fixed) {
-        z-index: var(--z-dock);
-    }
-
-    .dock-inline {
-        margin: 0 auto;
-    }
-
-    .dock-sticky {
-        position: sticky;
-        top: 0;
-        z-index: var(--z-dock);
-        margin: 0 auto;
-    }
-
-    /* J.W3.A — outer collapsed↔expanded pair drives width via FLIP.
-       `useLayerTransition` measures the natural width before/after the
-       slot swap and animates `width` between fixed pixel values via
-       the `--dock-motion-resize` spring; this eliminates the
-       `width: auto` non-interpolation diagnosed in R1+R6. The two
-       layers stack on a CSS grid (1/1 area) and crossfade opacity
-       in step with the FLIP. Spatial motion (width) is automatically
-       suppressed by the global `prefers-reduced-motion` gate in
-       `utilities.css` (which strips width from transition-property).
-       Opacity transitions remain — the 0.1s shortened cadence in PRM
-       still reads as a snap.
-
-       J.W3.C — when the active layer's natural width exceeds
-       `--dock-max-inline-size`, the dock root clips and the layer
-       scrolls horizontally with a mask-fade. `min-width: 0` lets the
-       grid item shrink under the cap (default min-content is the
-       child's intrinsic width which would prevent the clamp). */
-    .dock-layers {
-        display: grid;
-        min-width: 0;
-    }
-
-    /* AX.W01 — the box size morph reads the SAME `--dock-morph-t` scalar as the
-       root chrome (ONE clock, co-temporal by construction). `useLayerTransition`
-       measures the from→to size ONCE per swap (the allowed one-time FLIP
-       measurement) and writes `--dock-morph-from`/`--dock-morph-to` px on the
-       morphing element; the live scalar interpolates between them. The size lands
-       on the morph AXIS — `inline-size` for a horizontal `.dock-layers` (always
-       inline) + a horizontal inner stack, `block-size` for a vertical inner stack.
-       Gated on the root `[data-morphing]`, so at REST the intrinsic / `width:100%`
-       rules below hold (the morph vars are cleared on settle). Replaces the prior
-       `transition: width var(--dock-motion-resize)` inline-FLIP — there is NO CSS
-       transition on the size axis; the spring writes the scalar, CSS reads it. The
-       active pane is REVEALED through the clip aperture as the box grows (the W2
-       clip-reveal contract). */
-    .glass-dock[data-morphing] .dock-layers,
-    .glass-dock[data-morphing] .dock-layer-stack {
-        --dock-morph-size: calc(
-            var(--dock-morph-from, 0px) +
-                (var(--dock-morph-to, 0px) - var(--dock-morph-from, 0px)) *
-                var(--dock-morph-t, 0)
-        );
-        inline-size: var(--dock-morph-size);
-    }
-
-    /* A vertical inner group morphs the BLOCK axis — the same span lands on
-       block-size, and the inline axis stays intrinsic. */
-    .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
-        inline-size: auto;
-        block-size: var(--dock-morph-size);
-    }
-
-    /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
-       stagger directional scalar is the per-swap progress directly: `--dock-morph-t`
-       reads onto an inheriting `--dock-expand-t` on the morphing stack so the new
-       pane's children cascade in as it reveals. The geometry scalar
-       (`--dock-morph-t`) stays registered + non-inheriting on the root; this is the
-       small-subtree inheriting alias the stagger reads (the inheritance-bomb guard
-       only concerns the `:root`-wide write, which never happens). */
-    .glass-dock[data-morphing] .dock-layer-stack {
-        --dock-expand-t: var(--dock-morph-t, 1);
-    }
-
-    /* AV.W9.0 — the AU.W8b native container-morph arm (the `@supports` block that
-       opted the subtree into auto-to-length width interpolation and declared the
-       active layer's destination width as intrinsic) is RETIRED. It was never made
-       mutually exclusive with the `SpringProgress` FLIP driver in
-       `useLayerTransition.ts`: on Chrome 129+ the native arm interpolated
-       `.dock-layers` width on the browser's own clock WHILE the spring wrote inline
-       `width` per frame — a dual-driver race over the SAME property that cancelled
-       the morph and froze the dock at runtime (born-RED under
-       `proof:dock-animation-live`). One authority per concern: the size morph now
-       has exactly ONE driver on every engine — the `SpringProgress` FLIP path above
-       (`:382`), or the orthogonal View-Transitions path inside
-       `startViewTransition` (which owns size + crossfade as a single browser-side
-       mutation and never touches inline width). Neither coexists with a CSS-native
-       intrinsic-width destination, so the race is gone. This re-expresses the
-       `e8380d7` "one driver owns the morph" invariant on the modern
-       FLIP+spring(+VT) architecture. */
-
-    /* Horizontal dock content grows visibly when the active layer's natural
-       width exceeds the content area (grow-to-fit; consumers needing wrap opt
-       into `overflow="wrap"`). No edge-fade mask — content never clips or scrolls,
-       so a feather has nothing to feather and only bleeds a stray ramp onto
-       the edge controls. */
-    .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers {
-        overflow-x: visible;
-    }
-
-    /* ── Layer crossfade + hit-test contract (ONE vocabulary) ──────────────
-       AX.W02 — the outer `.dock-layer` (GlassDock's built-in collapsed↔expanded
-       pair) and the inner `.dock-layer-item-host` (a DockLayer inside a
-       DockLayerGroup) now share ONE active-state vocabulary: `.is-active` /
-       `.is-leaving`. The prior `.layer-active` / `.is-active` / `.is-leaving`
-       TRIPLE collapsed to the pair — both surfaces drive crossfade + hit-test off
-       the same two state classes, and the morph orchestrator fold (one engine per
-       dock) means the box, both panes, and every child stagger ride one
-       `--dock-morph-t` clock. The greppable-sync tombstone that kept the two
-       never-merged vocabularies in lockstep is DELETED — there is nothing to keep
-       in sync once the vocabulary is one.
-
-       The 3-state active/inactive/leaving visibility contract here is LOAD-BEARING
-       (the a11y-006 anchor): the inactive layer leaves the hit-test tree
-       (`visibility:hidden`), the leaving layer stays painted-but-untouchable
-       through its fade (`visibility:visible` + `pointer-events:none`), and the
-       active layer shows IMMEDIATELY (`visibility 0s`, no fade-in delay). One
-       owner governs each concern — size = the spring scalar, opacity = the CSS
-       crossfade below, visibility = this 3-state fork.
-
-       An inactive layer must leave the paint AND hit-test tree: `opacity:0` alone
-       leaves the box answering `elementFromPoint()`, so an inactive layer's button
-       intercepts clicks meant for the active one. `visibility:hidden` removes it
-       from both while KEEPING it in layout flow, so the FLIP measurement still
-       reads its geometry (`display:none` would zero it). The delayed `visibility`
-       transition holds a leaving layer `visible` for the length of the opacity
-       crossfade, then flips it `hidden`.
-
-       AU.W2 — the opacity-lockstep fold. The layer fade rides `--dock-motion-resize`
-       (the SAME duration the container morph runs at) — NOT the faster
-       `--dock-motion-fast` (0.2s), so the fade and the morph settle in lockstep.
-       The matched `visibility` hold extends to `--duration-normal` so the leaving
-       layer stays paintable for the FULL crossfade. */
-    .dock-layer,
-    .dock-layer-item-host {
-        transition:
-            opacity var(--dock-motion-resize),
-            visibility 0s linear var(--duration-normal);
-    }
-
-    .dock-layer:not(.is-active):not(.is-leaving),
-    .dock-layer-item-host:not(.is-active):not(.is-leaving) {
-        opacity: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-
-    .dock-layer.is-active,
-    .dock-layer-item-host.is-active {
-        opacity: 1;
-        visibility: visible;
-        pointer-events: auto;
-        /* AW.W2 — the active pane is STATICALLY opacity:1, REVEALED by the clip
-           aperture (the box is the reveal mechanism), never faded. There is ZERO
-           opacity authority on the active pane — the aperture uncovers a layout
-           that is laid out ONCE at natural size behind it. Only `visibility 0s`
-           survives (the active layer must paint at once, no fade-in delay — the
-           AU.W2 governing rule). The leaving pane keeps the shared-token opacity
-           fade below (the ONLY surviving opacity animation). */
-        transition: visibility 0s;
-    }
-
-    /* A leaving layer is inactive for hit-testing but still painted through its
-       fade-out. The outer collapse↔expand pair has no separate leaving marker in
-       markup — its `:not(.is-active):not(.is-leaving)` rule above covers the
-       crossfade-out via the delayed `visibility` transition; the inner pane swap
-       sets `.is-leaving` explicitly during the crossfade. */
-    .dock-layer.is-leaving,
-    .dock-layer-item-host.is-leaving {
-        opacity: 0;
-        visibility: visible;
-        pointer-events: none;
-    }
-
-    /* AV.W9.1 — the AU.W8b native discrete-visibility arm (the second `@supports`
-       block that expressed the 3-state contract as one discrete transition over
-       opacity + visibility with a `@starting-style` entry anchor) is RETIRED. It
-       was a THIRD opacity/visibility authority overlapping the hand-rolled 3-state
-       fork above and the spring's settle — three owners for one concern. With the
-       native size arm gone (W9.0), opacity now has ONE owner everywhere: the
-       `opacity var(--dock-motion-resize)` crossfade on `.dock-layer{,-item-host}`
-       (the AU.W2 lockstep token — kept), and visibility has ONE owner: the delayed
-       `visibility 0s linear var(--duration-normal)` hold of the 3-state fork above
-       (the a11y-006 anchor, LOAD-BEARING). One authority per concern: size = the
-       spring scalar, opacity = the CSS crossfade, visibility = the delayed-hold
-       fork. */
-
-    /* ── Base layout — distinct per surface ─────────────────────────── */
-    .dock-layer {
-        display: flex;
-        align-items: center;
-        grid-area: 1 / 1;
-        gap: var(--dock-layer-gap, 0.375rem);
-    }
-
-    /* AW.W2 — content-intrinsic axis follows the MORPH axis. A horizontal dock
-       lays its inline content out ONCE at `width: max-content` (nowrap) so the
-       width aperture uncovers a static row; the fixed `height` keeps the row a
-       single line. Scoped to `:not(.vertical)` so a vertical rail (whose
-       block-axis morph reveals a column) is NOT forced onto one nowrap row — the
-       vertical group's active host block-sizes to `height: max-content` below
-       (the AP.W3 column treatment, KEPT). */
-    .glass-dock:not(.vertical) .dock-layer {
-        white-space: nowrap;
-        height: var(--dock-layer-height, 2.5rem);
-    }
-
-    .dock-layer.is-active {
-        position: relative;
-    }
-
-    .dock-layer:not(.is-active) {
-        position: absolute;
-        inset: 0;
-    }
-
-    /* AX.W01 — the spring-keyed child stagger, now off the SINGLE morph scalar.
-       The driver writes `--dock-morph-t` to the `.glass-dock` root and arms
-       `[data-morphing]` while the spring runs; `--dock-expand-t` (the inheriting
-       directional expanded-ness derived above — 0 collapsed, 1 expanded) cascades
-       to the active pane's children. Each direct child reveals when `--dock-expand-t`
-       crosses its per-child onset, so the controls cascade IN ON the physical morph
-       — symmetric in both directions (expand fades them in outer→in, collapse fades
-       them back out) and an interrupted morph carries the cascade with it (no
-       orphaned timers). The active PANE stays statically opacity:1 (revealed by the
-       clip aperture); only its CHILDREN ride this per-child onset (the W2
-       clip-reveal contract is NOT regressed).
-
-       The reveal is a pure `calc` ramp: `opacity = clamp(0, (expand-t − onset) /
-       window, 1)`. Gated on the root `[data-morphing]` so at REST the children
-       carry no opacity authority (default cascade → 1). Under PRM the spring's
-       `respectReducedMotion` jumps `--dock-morph-t` 0→1 in one frame → `--dock-expand-t`
-       lands at the endpoint → the cascade collapses to 0 stagger frames; the
-       global PRM gate strips `translate` so the rise snaps too. The inner
-       DockLayerGroup defines its own `--dock-expand-t` (= the per-swap progress)
-       in DockLayerGroup's scope so a pane swap reveals the new pane's children. */
-    .glass-dock[data-morphing] .dock-layer.is-active > *,
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > * {
-        --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
-        --dock-stagger-onset: 0;
-        opacity: clamp(
-            0,
-            calc(
-                (var(--dock-expand-t, 1) - var(--dock-stagger-onset)) /
-                    var(--dock-stagger-window)
-            ),
-            1
-        );
-        translate: 0
-            calc(
-                (1 - clamp(0, calc((var(--dock-expand-t, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
-                    var(--dock-stagger-rise, 4px)
-            );
-    }
-
-    /* AX.W02 — per-child onsets off the ONE `--dock-stagger-step` token. Each
-       successive control starts `step` later than the one before it (`onset =
-       step × (childIndex − 1)`), so the row fills outer→in on expand. The
-       hand-typed 0.08/0.16/0.24/0.32/0.4 ladder is RETIRED — the onsets are now
-       derived from the single token, so retuning the cascade beat is a one-token
-       override. The set is capped at the 6th child (`nth-child(n + 6)` holds at
-       `step × 5`) so even a long row finishes within the morph window. ONE rule
-       over the unified `.is-active` vocabulary drives both the outer pane and the
-       inner pane-stack — no duplicated comma-group. (`sibling-index()` would
-       collapse this to a single declaration, but it is not yet Baseline across
-       Safari/Firefox — the token-keyed nth-child set is the cross-engine form, and
-       the magic ladder is gone either way.) */
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 1);
-    }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 2);
-    }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(4),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(4) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 3);
-    }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(5),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(5) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 4);
-    }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 6),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 5);
-    }
-
-    /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
-       `.always-expanded:not([data-morphing])` (the clip-shell block at the top).
-       A plain `overflow: visible` here would lift the clip DURING the morph (the
-       load-bearing sequencing gap), so the `overflow` declarations are dropped
-       from these state rules; they keep only their non-overflow concerns.
-
-       AX.W01 — `:not([data-morphing])` gate: at REST expanded the layers fill the
-       box (`width:100%`), but DURING the morph the FLIP from→to px (the
-       `--dock-morph-size` calc above) is the SOLE size authority — a `width:100%`
-       here would win on specificity and snap the box past the spring. The gate
-       hands the size to the scalar for the morph and back to 100% on settle. */
-    .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers {
-        width: 100%;
-    }
-
-    .glass-dock.expanded:not(.fit-content) .dock-layer--full {
-        width: 100%;
-    }
-
-    .glass-dock.always-expanded {
-        cursor: default;
-    }
-
-    /* ── AW.W3b — `layout="grid"` the 2D auto-grid big dock ──────────────
-       The active layer becomes a self-wrapping tile grid (Launchpad / Stage-Manager
-       track symmetry — `auto-fill` columns floored at `--dock-tile-min`, explicit
-       `grid-auto-rows` so the concentric look holds). DISTINCT from
-       `overflow="wrap"`'s content-ordered flex-wrap. A `layout="grid"` dock is
-       `alwaysExpanded` by contract (GlassDock.vue), so there is NO width morph and
-       hence NO per-frame grid-column reflow. `white-space: normal` releases the
-       single-row nowrap so the tiles wrap. */
-    .glass-dock.layout-grid {
-        white-space: normal;
-    }
-
-    .glass-dock.layout-grid .dock-layer--full {
-        display: grid;
-        grid-template-columns: repeat(
-            auto-fill,
-            minmax(var(--dock-tile-min, 4.5rem), 1fr)
-        );
-        grid-auto-rows: var(--dock-tile-min, 4.5rem);
-        gap: var(--dock-layer-gap, 0.375rem);
-        width: 100%;
-        height: auto;
-        white-space: normal;
-    }
-
-    /* A grid dock fills the inline cap; the active layer is the panel body, not a
-       shrink-to-fit row. The cap is the `--dock-max-inline-size` clamp (KEPT). */
-    .glass-dock.layout-grid .dock-layers {
-        width: 100%;
-    }
-
-    /* CONCENTRIC inner tiles — inner radius = outer card radius − padding (the
-       universal macOS / visionOS / Raycast rule). NEVER nest two pills
-       (stadium-in-stadium); a finite outer + a stepped-down inner. */
-    .glass-dock.layout-grid.shape-card .dock-layer--full > * {
-        border-radius: calc(
-            var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem)
-        );
-    }
-
-    /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
-       The default contract grows-to-fit then overflows visibly past the
-       axis cap. `overflow="scroll"` instead makes the dock the scroll port
-       on its layout axis, pairing the existing cap with a hidden-scrollbar
-       scroll region so over-cap content stays reachable. The rounded pill
-       masks the scroll edge; both axes keep their cap. */
-
-    /* Inline axis (horizontal docks). The active layer becomes the scroll
-       port: `min-width: 0` releases the flex item's `min-content` floor so
-       it can shrink under the clamped `.dock-layers` track, then `overflow-x:
-       auto` scrolls its over-cap content. `.dock-layers` must KEEP clipping
-       so the pill's rounded edge masks the scroll boundary — hence the
-       grow-mode `overflow-x: visible` (`.dock-layers`, above) is overridden
-       back to `hidden` here. */
-    .glass-dock.dock-scroll-x.expanded:not(.dock-overflow-wrap) > .dock-layers {
-        overflow-x: hidden;
-    }
-
-    .glass-dock.dock-scroll-x .dock-layer--full {
-        min-width: 0;
-        overflow-x: auto;
-        scrollbar-width: none;
-        /* Trap the inline-scroll momentum at the dock's own boundary so a
-           wheel/trackpad gesture that bottoms out the pill does NOT chain into
-           scrolling the page behind it (the dock is a self-contained scroll
-           port, not a window into the route scroller). */
-        overscroll-behavior-x: contain;
-    }
-
-    .glass-dock.dock-scroll-x .dock-layer--full::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* Block axis (vertical rails). The root keeps its `max-block-size` cap
-       and scrolls its over-cap children — cap + scroll is the correct
-       pairing the grow-mode contract split apart. Ties the
-       `.vertical.always-expanded` visible default on specificity and wins on
-       source order. */
-    .glass-dock.vertical.dock-scroll-y {
-        overflow-y: auto;
-        scrollbar-width: none;
-        /* Same momentum-trap as the inline port — a rail that bottoms out must
-           not chain its remaining wheel delta into the page scroller behind it. */
-        overscroll-behavior-y: contain;
-    }
-
-    .glass-dock.vertical.dock-scroll-y::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* ── `overflow="wrap"` recipe — CONTENT-DRIVEN intrinsic flex reflow ──
-       (AX.W04 F0). Parallel to the `.dock-scroll-{x,y}` hooks the
-       `overflow="scroll"` member emits, `overflow="wrap"` emits this class.
-       (HORIZONTAL-ONLY — GlassDock.vue guards the emit on
-       `orientation !== 'vertical'`; a vertical rail grows-to-fit + clamps via
-       `--dock-max-block-size`, its own overflow story.)
-
-       The reflow is INTRINSIC: `flex-wrap: wrap` is ALWAYS-ON (no viewport MQ),
-       and the dock shrink-wraps to content with `max-inline-size` capping it at
-       the canonical `--dock-max-inline-size` token (the SAME cap every
-       overflow strategy reads — `min(80vw, 64rem)` default, consumer-overridable
-       per-instance). So the layer wraps to N rows EXACTLY when its intrinsic row
-       exceeds the cap — at ANY viewport width — and collapses to one row when it
-       fits. The magic-640 `@media` snap-back + the `--dock-overflow-bp` token are
-       DELETED (the inherited mobile-responsive debt, origin 078dd79). */
-    .glass-dock.dock-overflow-wrap {
-        white-space: normal;
-        /* The content-driven cap. The dock ALREADY shrink-wraps to its content's
-           intrinsic width (the base `.glass-dock` rule), so `max-inline-size` caps
-           that intrinsic width at `--dock-max-inline-size`: under the cap the
-           shrink-wrap wins → one row; over the cap the dock holds at the cap and the
-           inner `flex-wrap: wrap` row reflows to N rows. ONE token, no breakpoint.
-           (The `min(max-content, …)` form is INVALID CSS — the math functions reject
-           the `max-content` intrinsic keyword, computing the property to its initial
-           `none` and silently dropping the cap; intrinsic-shrink + this plain cap IS
-           the valid `min(max-content, cap)`.) */
-        max-inline-size: var(--dock-max-inline-size);
-        padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem))
-            var(--dock-wrap-padding-inline, 0.625rem);
-
-        /* F4 — the pill↔card radius morph. A wrap dock is a FINITE multi-row CARD
-           surface when expanded and a stadium PILL when collapsed — the SAME
-           pill↔card morph the big-dock `shape-card` path rides. The corner glides
-           on the `--dock-expand-t` W01 single-scalar: `--radius-pill` at expand-t 0
-           (collapsed), `--dock-card-radius` at expand-t 1 (expanded — UNIFIED on
-           the SAME finite-radius token the big-dock card uses; the bare 16px
-           `--radius-2xl` literal is DELETED). ONE register, no discrete snap. */
-        border-radius: calc(
-            var(--radius-pill) +
-                (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
-        );
-
-        /* F1 — the card-tier elevation morph ("material thickens as glass flexes
-           larger", WWDC25 §219). The wrap dock lifts from the flat thin-pill
-           `--shadow-dock` glow onto the FLOATING-tier stack (the `--shadow-dock-wrap`
-           token names the canonical composite on `:root`; a consumer retints the
-           whole card shadow by overriding THAT one token per the cartoon-shadow
-           contract). The three floating layers — drop / material-rim / under-cast —
-           fade in driven by the SAME `--dock-expand-t` scalar the radius glides on:
-           `--dock-wrap-elev` is the scalar as a 0→1 percent, so each layer's alpha
-           tracks the corner morph in LOCKSTEP (ONE clock, ONE register). At
-           expand-t 0 (collapsed/pill) the floating layers are 0%-alpha (invisible)
-           → only the base `--shadow-dock` glow shows; at expand-t 1 (expanded/card)
-           the full floating stack grounds the multi-row silhouette. The per-layer
-           recipe mirrors `--shadow-dock-wrap` (= `--shadow-xl` + `--glass-material-rim`
-           + `--glass-under-shadow-vivid`) so the token stays the source-of-record. */
-        --dock-wrap-elev: calc(var(--dock-expand-t, 1) * 100%);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--shadow-dock-override, var(--shadow-dock)),
-            0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent),
-            0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent),
-            0 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent);
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-layer--full {
-        flex-wrap: wrap;
-        justify-content: center;
-        height: auto;
-        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
-        gap: var(--dock-wrap-row-gap, 0.25rem)
-            var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem));
-        /* AX.W04 — NO `transition: min-height` JS-morph (the AW.W3b spring-keyed
-           min-height detector is RETIRED — the false `proof:dock-layering-polish`
-           wrap-reflow claim is STRUCK). The reflow is intrinsic flex: rows
-           appear/vanish on the cap crossing with no second clock. The radius +
-           shadow lift ride the `--dock-expand-t` scalar (the W01 single clock),
-           NOT a CSS transition on the retired `--dock-motion-resize` list. */
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-layer--summary {
-        height: auto;
-        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-separator {
-        display: none;
-    }
-
-    /* Collapsed, a wrap dock is the single-row summary PILL. `white-space: nowrap`
-       keeps the summary on one line; the inline cap stays `max-inline-size:
-       var(--dock-max-inline-size)` (inherited from the `.dock-overflow-wrap` rule
-       above) so the collapsed box still shrink-wraps to the small summary's
-       max-content (NOT the full cap). The
-       radius morph resolves to `--radius-pill` at collapsed (--dock-expand-t 0) and
-       the box-shadow to the flat `--shadow-dock` glow (--dock-wrap-elev 0%). */
-    .glass-dock.dock-overflow-wrap.collapsed {
-        white-space: nowrap;
-    }
-
-    .dock-separator {
-        @apply flex-shrink-0;
-        width: 1px;
-        height: var(--dock-separator-height);
-        margin: 0 0.375rem;
-        background: var(--surface-tint-15);
-    }
-
-    .dock-spacer {
-        @apply flex-1;
-    }
-
-    .dock-layer-group {
-        display: flex;
-        gap: var(--dock-layer-group-gap, var(--dock-layer-gap, 0.25rem));
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .dock-layer-group.horizontal {
-        flex-direction: row;
-        align-items: stretch;
-    }
-
-    .dock-layer-group.horizontal.rail-end {
-        flex-direction: row-reverse;
-    }
-
-    .dock-layer-group.vertical {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .dock-layer-group.vertical.rail-end {
-        flex-direction: column-reverse;
-    }
-
-    .dock-layer-rail {
-        display: flex;
-        flex-direction: column;
-        flex-shrink: 0;
-        gap: var(--dock-layer-rail-gap, 0.125rem);
-        padding: var(--dock-layer-rail-padding, 0.125rem);
-        border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
-    }
-
-    .dock-layer-group.vertical .dock-layer-rail {
-        flex-direction: row;
-        border-right: none;
-        border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
-    }
-
-    .dock-layer-group.horizontal.rail-end .dock-layer-rail {
-        border-right: none;
-        border-left: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
-    }
-
-    .dock-layer-group.vertical.rail-end .dock-layer-rail {
-        border-bottom: none;
-        border-top: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
-    }
-
-    /* AU.W8.4 — the rail is a reka-ui Tabs contract. The travelling
-       `.dock-layer-tab-indicator` (the reka TabsIndicator) now carries the
-       active affordance; the rail is `position: relative` so the indicator's
-       absolute placement is rail-local. */
-    .dock-layer-rail {
-        position: relative;
-    }
-
-    .dock-layer-rail .dock-layer-tab {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
-        height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
-        border: 0;
-        border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
-        background: transparent;
-        color: var(--muted-foreground);
-        cursor: pointer;
-        font: inherit;
-        font-size: 0.75rem;
-        /* The tab glyph rides above the travelling indicator backplate. */
-        z-index: 1;
-        transition:
-            background var(--dock-motion-fast),
-            color var(--dock-motion-fast);
-    }
-
-    .dock-layer-rail .dock-layer-tab:hover {
-        background: color-mix(in srgb, var(--accent) 40%, transparent);
-        color: var(--foreground);
-    }
-
-    /* AU.W8.4 — KEEP the active glyph tint on the selected tab (reka emits
-       `data-state="active"` + `aria-selected="true"`); the per-button active
-       BACKGROUND is RETIRED — the travelling indicator carries that affordance. */
-    .dock-layer-rail .dock-layer-tab[data-state="active"] {
-        color: var(--primary);
-    }
-
-    /* AU.W8.4 — the dock control focus-ring contract does not cover
-       `.dock-layer-tab` (the rail tab is not in the `.dock-icon-button` family).
-       The roving tabindex means only the active tab is in the tab order; a
-       focus-visible tab paints the shared dock ring. */
-    .dock-layer-rail [role="tab"]:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-    }
-
-    /* AU.W8.4 — the travelling indicator (reka TabsIndicator). reka computes
-       `--reka-tabs-indicator-position` + `--reka-tabs-indicator-size` from the
-       active tab's geometry; the indicator morphs between tabs riding
-       `--dock-motion-resize` (= `--spring-dock` after AU.W8.2) — NOT a hardcoded
-       `--spring-snappy`. It paints the active-tab backplate the per-button
-       `.is-active` background used to. */
-    .dock-layer-rail .dock-layer-tab-indicator {
-        position: absolute;
-        left: 0;
-        top: 0;
-        height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
-        width: var(--reka-tabs-indicator-size);
-        transform: translateX(var(--reka-tabs-indicator-position));
-        border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
-        background: color-mix(in srgb, var(--primary) 15%, transparent);
-        transition:
-            width var(--dock-motion-resize),
-            transform var(--dock-motion-resize);
-        pointer-events: none;
-    }
-
-    /* For a vertical rail the indicator travels along the inline axis still
-       (the horizontal-always keyboard decision keeps the indicator inline);
-       reka's position var resolves to the active tab offset regardless. */
-
-    .dock-layer-stack {
-        position: relative;
-        display: grid;
-        /* AW.W2 — the morph axis (width for a horizontal group, height for a
-           vertical one) is driven by the `useLayerTransition` SpringProgress in
-           pixel space (FLIP path) or the View-Transition (native path); a CSS
-           `width`/`height` transition here would be a SECOND driver on the same
-           axis (the AV.W9.0 dual-driver race that froze the dock). The cross axis
-           is intrinsic-sized and never morphs. So NO size transition on the stack
-           — one owner per axis. */
-    }
-
-    /* Base layout — the crossfade + hit-test contract is shared with
-       `.dock-layer` above (see "Layer crossfade + hit-test contract"). The
-       default state is inactive: absolute + inset:0. */
-    .dock-layer-item-host {
-        grid-area: 1 / 1;
-        display: flex;
-        align-items: center;
-        white-space: nowrap;
-        gap: var(--dock-layer-gap, 0.375rem);
-        position: absolute;
-        inset: 0;
-    }
-
-    .dock-layer-item-host.is-active {
-        position: relative;
-        inset: auto;
-        width: max-content;
-        min-width: 0;
-    }
-
-    /* AP.W3 — axis-aware layer pane. The stack + `useLayerTransition` are
-       axis-aware, but the pane was hardcoded to a no-wrap ROW with
-       `width: max-content` — forcing a `vertical` group's content onto one
-       horizontal line that could not grow down (the vertical-overflow fight).
-       A vertical group stacks in a column, stretches, wraps, and block-sizes
-       to the height the stack animates. Horizontal byte-identical. */
-    .dock-layer-group.vertical .dock-layer-item-host {
-        flex-direction: column;
-        align-items: stretch;
-        white-space: normal;
-    }
-
-    .dock-layer-group.vertical .dock-layer-item-host.is-active {
-        width: auto;
-        height: max-content;
-    }
-
-    /* AU.W8b.3 — the five dock CONTROL families (.dock-icon-button,
-       .dark-mode-toggle-button, .dock-tab-button + tiers, the
-       .dock-select-trigger / .dock-dropdown-trigger pair, and the coarse-pointer
-       per-button touch floor) carved out to dock-controls.css (imported directly
-       after this file in index.css, same @layer components). dock.css keeps the
-       shell / density / grain / layer-crossfade contract + the shared
-       cross-control four-state comma-groups (the :focus-visible / :disabled groups
-       + the motion-token :where() group above). */
-
-    /* J.W3.B — `.dock-popover` substrate + `pop-up-*` / `pop-down-*`
-       Vue Transition keyframes retired. Hover-driven dock popovers
-       compose `<HoverPopover keep-dock-open>`, which inherits reka-ui
-       HoverCard's collision-avoidance + the canonical
-       `popover-animate` motion vocabulary. Click-anchored popovers
-       (no dock-keep semantics) compose `<Popover>` directly. */
-
-    /* AX.W04 F0 — the `@media (min-width: 640px)` desktop snap-back + the
-       `--dock-overflow-bp` token are DELETED. The prior viewport breakpoint forced
-       `flex-wrap: nowrap` + `max-width: none` above 640px, so the dock NEVER
-       wrapped on a wide viewport even when its row overflowed (the 800px → 1861px
-       viewport-bleed defect). The wrap is now CONTENT-driven: the always-on
-       `flex-wrap: wrap` + the `max-inline-size: var(--dock-max-inline-size)` cap
-       above (over the base shrink-wrap) reflow to N rows at ANY width on the
-       over-cap crossing — no viewport coupling, no breakpoint. */
-
-    /* O.W6 Lane D — Touch-target floor (speedtest AC.W6 F2.AA-03 / WCAG
-       2.5.5). On coarse-pointer devices (touch), every dock-control's
-       width/height floor lifts to the 44px WCAG target-size minimum.
-       The lift composes via `--dock-control-size` (the canonical knob
-       every dock-control surface — `.dock-icon-button`,
-       `.dock-tab-button`, `.dock-select-trigger`, `.dock-dropdown-trigger`
-       — already consumes) so the cascade reaches every control without
-       per-selector re-declaration. `--size-icon-btn` lifts in lockstep
-       so bare icon-button surfaces outside the dock (e.g.,
-       `.dark-mode-toggle-button[data-size="dock"]` and any consumer
-       that wires `var(--size-icon-btn)` for trigger sizing) inherit
-       the same floor.
-
-       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare
-       `.glass-dock`: the always-present density setter (0,2,0) shadowed a
-       bare (0,1,0) coarse floor, pinning the touch box at 40px. The
-       presence-selector (0,2,0) wins by source order, lifting
-       `--dock-control-size` to 44px — read by both the button box and the
-       dock width-math, so the slot reserves 44px (no overflow). Fine pointer
-       byte-identical. Proof: design/W1.2-motion-carve-and-dock.md §B.2. */
-    @media (pointer: coarse) {
-        .glass-dock[data-density] {
-            --dock-control-size: var(--dock-touch-target, 2.75rem);
-            --size-icon-btn: var(--dock-touch-target, 2.75rem);
-        }
-
-        /* S-2 — the in-dock floor above lifts the control-SIZE token (shell /
-           width-math), which only reaches a DockIconButton that has a
-           `.glass-dock` ancestor. The companion button-level floor (the
-           `.dock-icon-button:not(--compact)` `min-{block,inline}-size` that
-           reaches a STANDALONE DockIconButton with no dock wrapper) moved to
-           dock-controls.css with the rest of the control family (AU.W8b.3). */
-    }
 }