@mkbabb/glass-ui 3.7.0 → 3.9.0

package/dist/styles/dock.css

@@ -1,9 +1,68 @@
 /* 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,
+   background/border color, child stagger) is a pure `calc()` read off it — one
+   driver, one clock, on every engine (the View-Transitions collapse fork is
+   retired). `@property`-registered `<number>` so it interpolates COMPOSITED, not
+   discretely (an UNregistered custom property jumps + animates on the main
+   thread). `initial-value:0` = the collapsed-progress floor.
+
+   `inherits:true` (NOT false) — the SOTA inheritance-bomb guard is specifically
+   "never write the scalar to `:root`" (a whole-document subtree recalc per frame
+   over 1300+ elements). The scalar is written LOCALLY on the small `.glass-dock`
+   subtree, and its CONSUMERS are DESCENDANTS (`.dock-layers`/`.dock-layer-stack`
+   size + the active pane's child stagger) that read it via inheritance, so it MUST
+   inherit. Writing one inheriting var over a ~10–20-element dock subtree is the
+   exact pattern the prior `--dock-morph-progress` used (on `.dock-layers`); the
+   bomb only fires from a `:root` write, which never happens here. The root-chrome
+   reads (padding/bg/border) sit on the same element it is written to. */
+@property --dock-morph-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
 
 @layer components {
     :where(
@@ -32,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,
@@ -48,1180 +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-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
-        --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. */
-        --dock-stagger-window-size: 0.55;
-        --dock-stagger-rise: 4px;
-        /* 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;
-    }
-
-    .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;
-    }
-
-    /* J.W3.A — horizontal docks transition padding/shadow/transform/background/border
-       only. Width is driven by the inner `.dock-layers` FLIP via
-       `useLayerTransition`; pinning it here would race the FLIP and
-       reintroduce the `width: auto` non-interpolation diagnosed in
-       R1+R6.
-
-       AW.W3 — the collapsed-hover `scale` (the `.collapsed:hover` rule below) +
-       the press squish (`--scale-press-dock` on the dock controls) ride the
-       INDIVIDUAL `scale` property, NOT `transform`. Adding `scale
-       var(--dock-motion-resize)` here unifies the hover scale onto the SAME dock
-       spring vocabulary as the morph, so a collapsed→hover→expand gesture reads as
-       ONE continuous spring rather than a `scale`-ease handed off to the
-       width-spring. Under PRM the global gate strips `scale` from the
-       transition-property → the hover scale snaps (0 morph frames). */
-    .glass-dock:not(.vertical) {
-        transition:
-            padding var(--dock-motion-resize),
-            box-shadow var(--dock-motion-standard),
-            transform var(--dock-motion-resize),
-            scale var(--dock-motion-resize),
-            /* AW.W3b — the pill↔card corner radius morphs on the SAME spring the
-               aperture rides (ONE free interpolation). Without this the
-               shape-card collapsed↔expanded radius snaps discretely. The list is
-               shared by ALL horizontal docks — the radius transition also glides
-               the wrap collapsed↔expanded radius swap (desirable). */
-            border-radius var(--dock-motion-resize),
-            background var(--dock-motion-standard),
-            border-color var(--dock-motion-standard);
-    }
-
-    /* Vertical rails grow-to-fit + clamp, no scroll: descendants wrap to
-       multiple rows (opt-in via `overflow="wrap"`) or clamp via
-       `--dock-max-block-size`; the cap fails visibly rather than masking
-       overflow as a scroll affordance. No edge-fade mask — a rail that never
-       scrolls has nothing to feather. */
-    .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);
-        /* AW.W2 — axis-parity carve: NON-morph properties only. The block-axis
-           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
-           spring (or the VT path); a `height var(--dock-motion-resize)` here would
-           be a second driver on the same axis (the AV.W9.0 dual-driver race),
-           and `width` is the cross axis the spring never writes. Matches how
-           `:not(.vertical)` already excludes `width`. */
-        transition:
-            padding var(--dock-motion-resize),
-            box-shadow var(--dock-motion-standard),
-            transform var(--dock-motion-resize),
-            scale var(--dock-motion-resize),
-            background var(--dock-motion-standard),
-            border-color var(--dock-motion-standard);
-    }
-
-    .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 swap glides on the `--dock-motion-resize` spring
-       (`border-radius` is in the `:not(.vertical)` transition list). */
-    .glass-dock.variant-dock:not(.vertical).shape-card {
-        border-radius: var(--dock-card-radius);
-    }
-
-    .glass-dock.variant-dock:not(.vertical).shape-card.collapsed {
-        border-radius: var(--radius-pill);
-    }
-
-    /* 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);
-    }
-
-    .glass-dock.collapsed {
-        cursor: pointer;
-        padding: var(--dock-collapsed-padding, var(--dock-padding-block, 0.375rem));
-        justify-content: center;
-        background: var(--glass-bg-wash);
-        border-color: var(--glass-border-floating);
-        /* Idiomatic override path: the consumer-supplied
-           `--shadow-dock-override` variable engages in every dock state
-           (was: base only, leaking through here in collapsed). */
-        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;
-        transition: width var(--dock-motion-resize);
-    }
-
-    /* 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;
-    }
-
-    /* AU.W8b-visibility-fork — the 3-state active/inactive/leaving visibility
-       contract below is LOAD-BEARING (the a11y-006 bite-anchor). A later refactor
-       greps for this marker so the semantics are not collapsed: 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). The hand-rolled 3-state fork below is now the SOLE
-       visibility authority on every engine — AV.W9.1 retired the native
-       discrete-visibility arm that used to second-drive it, so one owner governs
-       visibility (one owner governs size, one owns opacity). */
-
-    /* ── Layer crossfade + hit-test contract (shared) ──────────────────
-       Two dock-layer surfaces stack on a 1/1 CSS grid and crossfade:
-       `.dock-layer` (GlassDock's built-in collapsed↔expanded pair) and
-       `.dock-layer-item-host` (a DockLayer inside a DockLayerGroup). They
-       differ only in base layout — the active/inactive/leaving paint +
-       hit-test semantics are identical, so the contract is expressed ONCE
-       here over both state vocabularies (`.layer-active` / `.is-active` /
-       `.is-leaving`) rather than copied per rule-set (Q-coh-5 — `beec35e`
-       patched the `visibility` fix into two parallel copies).
-
-       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 width measurement in `useLayerTransition` 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 (slides-F P0, the "not iOS-smooth"
-       report). The layer fade rides `--dock-motion-resize` (the SAME duration +
-       spring the container morph runs at, `:189`/`:216`/`:385`) — NOT the faster
-       `--dock-motion-fast` (0.2s). Before, the host faded in 0.2s while the
-       container morphed in 0.3s: a 100ms-apart settle (the items appeared to lag
-       the pill). Now 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 (now longer) crossfade. */
-    .dock-layer,
-    .dock-layer-item-host {
-        transition:
-            opacity var(--dock-motion-resize),
-            visibility 0s linear var(--duration-normal);
-    }
-
-    .dock-layer:not(.layer-active),
-    .dock-layer-item-host:not(.is-active):not(.is-leaving) {
-        opacity: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-
-    .dock-layer.layer-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. The prior
-           `opacity var(--dock-motion-resize)` arm is DELETED: there is ZERO
-           opacity authority on the active pane now — 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, the thin
-           polish proof:dock-opacity-lockstep names). */
-        transition: visibility 0s;
-    }
-
-    /* A leaving layer is inactive for hit-testing but still painted
-       through its fade-out. (`.dock-layer` has no separate leaving state —
-       its `:not(.layer-active)` rule above covers the crossfade-out via the
-       delayed `visibility` transition.) */
-    .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
-       `AU.W8b-visibility-fork` 3-state fallback above (the a11y-006 bite-anchor,
-       LOAD-BEARING). One authority per concern: size = spring/VT, 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.layer-active {
-        position: relative;
-    }
-
-    .dock-layer:not(.layer-active) {
-        position: absolute;
-        inset: 0;
-    }
-
-    /* AW.W3 — the spring-keyed child stagger. While the size spring drives the
-       morph, the driver arms the container (`.dock-layers` / `.dock-layer-stack`)
-       with `data-revealing` and writes the morph's normalized progress to
-       `--dock-morph-progress` (0 → 1) every frame. Each direct child of the
-       ACTIVE pane reveals when that progress crosses a per-child onset, so the
-       controls cascade IN ON the physical morph — a fast flick and a slow
-       hover-open both choreograph correctly, and an interrupted morph carries the
-       cascade with it (no orphaned timers). This is a per-CHILD opacity onset; the
-       active PANE itself stays statically opacity:1 (revealed by the aperture —
-       the W2 clip-reveal contract is NOT regressed).
-
-       The reveal is a pure `calc` ramp: `opacity = clamp(0, (progress − onset) /
-       window, 1)`. `--dock-stagger-onset` steps per child (nth-child); the window
-       is `--dock-stagger-window`. The children also rise a few px on a `translate`
-       that resolves on the same ramp. ONLY children inside the `[data-revealing]`
-       active pane are armed — at rest the children carry no opacity authority (the
-       default cascade leaves them at 1).
-
-       PRM: the driver never arms `data-revealing` on the synchronous PRM swap (the
-       FLIP fast-path returns before the spring; the spring's `respectReducedMotion`
-       settles instantly), so the children paint at full opacity at once. The
-       global PRM gate also strips `translate` from the transition-property — the
-       rise snaps. The cascade collapses to 0 stagger frames under PRM. */
-    .dock-layers[data-revealing] .dock-layer--full > *,
-    .dock-layer-stack[data-revealing] .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-morph-progress, 1) - var(--dock-stagger-onset)) /
-                    var(--dock-stagger-window)
-            ),
-            1
-        );
-        translate: 0
-            calc(
-                (1 - clamp(0, calc((var(--dock-morph-progress, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
-                    var(--dock-stagger-rise, 4px)
-            );
-    }
-
-    /* Per-child onsets — each successive control starts a beat later, so the row
-       fills outer→in on expand. The onsets are fractions of the morph progress;
-       capped so even a long row finishes within the morph window. */
-    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(2),
-    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(2) {
-        --dock-stagger-onset: 0.08;
-    }
-    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(3),
-    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(3) {
-        --dock-stagger-onset: 0.16;
-    }
-    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(4),
-    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(4) {
-        --dock-stagger-onset: 0.24;
-    }
-    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(5),
-    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(5) {
-        --dock-stagger-onset: 0.32;
-    }
-    .dock-layers[data-revealing] .dock-layer--full > *:nth-child(n + 6),
-    .dock-layer-stack[data-revealing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
-        --dock-stagger-onset: 0.4;
-    }
-
-    /* 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. */
-    .glass-dock.expanded:not(.fit-content) .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 (the `.dock-overflow-wrap` hook) ────────
-       Parallel to the `.dock-scroll-{x,y}` hooks the `overflow="scroll"`
-       member emits: the `overflow="wrap"` enum member emits this class. (The
-       prior `wrap` boolean's hook is retired — clean break, no alias.)
-       Expanded content wraps to multiple rows; the pill narrows to the
-       viewport gutter and snaps back to a single nowrap row past
-       `--dock-overflow-bp` (the `@media` at the tail). */
-    .glass-dock.dock-overflow-wrap {
-        white-space: normal;
-        border-radius: var(--radius-2xl);
-        max-width: var(--dock-wrap-max-width);
-        padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem))
-            var(--dock-wrap-padding-inline, 0.625rem);
-    }
-
-    .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));
-        /* AW.W3b — the graceful wrap-morph. The wrap/unwrap row-reflow flips
-           `flex-wrap` at the `--dock-overflow-bp` `@media` boundary; without a
-           transition the rows JUMP-CUT. Sequencing the layer's `min-height`
-           through the `--dock-motion-resize` spring MORPHS the reflow. The global
-           PRM gate strips `min-height` from the transition-property under reduce →
-           the morph snaps (0 morph frames) while the reflow still completes. The
-           wrap radius swap (`.collapsed` / `@media`) glides too — `border-radius`
-           is in the shared `:not(.vertical)` transition list (AW.W3b scope 2). */
-        transition: min-height var(--dock-motion-resize);
-    }
-
-    .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;
-    }
-
-    .glass-dock.dock-overflow-wrap.collapsed {
-        border-radius: var(--radius-pill);
-        white-space: nowrap;
-        max-width: none;
-    }
-
-    .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. */
-
-    /* The `overflow="wrap"` desktop snap-back. Past the overflow breakpoint a
-       wrap-mode dock reverts from the narrow multi-row pill to a single nowrap
-       row. The breakpoint is the named token `--dock-overflow-bp` (tokens.css §9
-       Layout) — its single source-of-record. A `var()` cannot drive a
-       media-query feature in Baseline CSS, so this one `@media` realizes the
-       token's value; there is no longer a bare unexplained magic number — the
-       threshold lives under one name and is documented at its mint.
-       AV.W16 TW3 — KEPT as `@media` (not converted to `@container`): the wrap
-       dock is `max-width: calc(100vw - gutter)` — it spans the VIEWPORT by
-       contract, so the snap-back is genuinely viewport-semantic. The dock
-       establishes its own `dock` container and cannot self-query that
-       container for a rule on the dock root; the descendant-readable
-       label/density rules above are the container-query candidates. */
-    @media (min-width: 640px /* = var(--dock-overflow-bp) */) {
-        .glass-dock.dock-overflow-wrap {
-            white-space: nowrap;
-            border-radius: var(--radius-pill);
-            max-width: none;
-            padding: var(
-                    --dock-wrap-desktop-padding-block,
-                    var(--dock-padding-block, 0.375rem)
-                )
-                var(--dock-wrap-desktop-padding-inline, 0.75rem);
-        }
-
-        .glass-dock.dock-overflow-wrap .dock-layer--full {
-            flex-wrap: nowrap;
-            height: var(--dock-layer-height, 2.5rem);
-            gap: var(--dock-wrap-desktop-gap, var(--dock-layer-gap, 0.25rem));
-        }
-
-        .glass-dock.dock-overflow-wrap .dock-layer--summary {
-            height: var(--dock-layer-height, 2.5rem);
-        }
-
-        .glass-dock.dock-overflow-wrap .dock-separator {
-            display: block;
-        }
-    }
-
-    /* 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). */
-    }
 }