@mkbabb/glass-ui 0.2.0 → 2.0.0

package/dist/styles/dock.css

@@ -0,0 +1,1085 @@
+/* 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.
+ */
+
+@layer components {
+    :where(
+        .glass-dock,
+        .dock-layer-stack,
+        .dock-layer-item-host,
+        .dock-layer-tab,
+        .dock-icon-button,
+        .dark-mode-toggle-button,
+        .dock-tab-button,
+        .dock-select-trigger,
+        .dock-dropdown-trigger
+    ) {
+        --dock-motion-fast: var(--duration-fast) var(--ease-standard);
+        --dock-motion-standard: var(--duration-normal) var(--ease-standard);
+        --dock-motion-resize: var(--duration-normal) var(--spring-snappy);
+    }
+
+    .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);
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        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));
+        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
+    }
+
+    /* T.W2.T1 — `overflow: hidden` is the default shell, but the
+       container-query host path (`<GlassDock containerName="…">`) must
+       allow descendants to wrap and report intrinsic widths past the
+       padding box. Inline-style on the SFC sets `overflow: visible` for
+       that path; this rule grants the default clip to every dock that
+       is NOT a container-query host. The `data-container-name` attribute
+       is the structural marker (set by the SFC when `containerName` is
+       passed). */
+    .glass-dock:not([data-container-name]) {
+        overflow: hidden;
+    }
+
+    .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);
+    }
+
+    /* 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);
+    }
+
+    .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);
+    }
+
+    /* 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-button density-keyed height (R3-spec / audit-E P0-3;
+       consolidated into dock.css at Q.W3 Lane A — formerly split into
+       utilities.css and surviving only by import-cascade accident).
+       The four bare DockIconButton consumers solve their density-keyed
+       height via `--dock-control-size` (set per density tier above);
+       DockTabButton's analogous `--dock-tab-h` knob lives in the same
+       density rungs so the tab-button row no longer free-floats to the
+       glyph + padding sum. Compact density lands at 32px to match the
+       deployed product's bottom-dock height. The `.dock-tab-button` rule
+       (further down this file) consumes `--dock-tab-h`. */
+    .glass-dock[data-density="compact"] {
+        --dock-tab-h-compact: 32px;
+        --dock-tab-h: var(--dock-tab-h-compact);
+    }
+    .glass-dock[data-density="comfortable"] {
+        --dock-tab-h-comfortable: 38px;
+        --dock-tab-h: var(--dock-tab-h-comfortable);
+    }
+    .glass-dock[data-density="spacious"] {
+        --dock-tab-h-spacious: 44px;
+        --dock-tab-h: var(--dock-tab-h-spacious);
+    }
+    .glass-dock[data-density="audacious"] {
+        --dock-tab-h-audacious: var(--dock-density-audacious-tab-min-height, 3.5rem);
+        --dock-tab-h: var(--dock-tab-h-audacious);
+    }
+
+    /* Density-audacious mobile carve (R3-spec / audit-D D-Rec-5;
+       consolidated into dock.css at Q.W3 Lane A). At narrow viewports
+       the audacious-dock label glyphs compress so the audacious chrome
+       doesn't overflow its host: `≤14px at <480` and `15px at 480–719`.
+       Consumer dock label spans bind `font-size: var(--dock-label-size)`
+       (typography.css `.dock-label` recipe is the canonical consumer). */
+    @media (max-width: 479px) {
+        .glass-dock[data-density="audacious"] {
+            --dock-label-size: 14px;
+        }
+    }
+    @media (min-width: 480px) and (max-width: 719px) {
+        .glass-dock[data-density="audacious"] {
+            --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. */
+    .glass-dock:not(.vertical) {
+        transition:
+            padding var(--dock-motion-resize),
+            box-shadow var(--dock-motion-standard),
+            transform var(--dock-motion-resize),
+            background var(--dock-motion-standard),
+            border-color var(--dock-motion-standard);
+    }
+
+    /* Z.W2.T2 — vertical rails grow-to-fit + clamp, no scroll. Per A2 §B6
+       + A4 special-focus: canon-intent is grow-and-wrap, not scroll. The
+       prior `overflow-y: auto` produced the "dock scrolls when it
+       shouldn't" regression at narrow viewports; the right escape is to
+       let descendants wrap to multiple rows (consumers opt-in via
+       `dock-wrap`) or to clamp via `--dock-max-block-size` and let the
+       cap fail visibly rather than mask the overflow as a scroll
+       affordance.
+
+       The edge-fade `mask-image` retired here in lockstep with the
+       horizontal `.dock-layers` rule. With grow-to-fit + visible
+       overflow the rail never scrolls, so a scroll-feather mask has
+       nothing to feather — it only bled a transparent ramp onto the
+       top and bottom rail items, casting a stray directional shadow
+       on those edge controls. J.W3.C's auto + mask-fade shape is fully
+       superseded: grow-to-fit is the whole contract, no 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-x: visible;
+        overflow-y: visible;
+        padding: var(--dock-vertical-padding, var(--dock-padding-block, 0.375rem));
+        border-radius: var(--radius-dock);
+        transition:
+            height var(--dock-motion-resize),
+            width var(--dock-motion-resize),
+            padding var(--dock-motion-resize),
+            box-shadow var(--dock-motion-standard),
+            transform 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);
+    }
+
+    /* 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;
+    }
+
+    .glass-dock.collapsed:hover {
+        background: var(--glass-bg-wash);
+        border-color: var(--glass-border-floating);
+        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
+        transform: 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);
+    }
+
+    .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);
+    }
+
+    /* Z.W2.T2 — horizontal dock content grows visibly when the active
+       layer's natural width exceeds the dock's content area. Per
+       A2 §B6 + A4 special-focus: the canon-intent for the bottom dock
+       is grow-to-fit; consumers needing wrap opt into `dock-wrap`. The
+       prior `overflow-x: auto` produced the user-reported "dock scrolls
+       when it shouldn't" — the wrong escape valve.
+
+       The edge-fade `mask-image` retired here. Once Z.W2.T2 made the
+       dock grow-to-fit, content is never clipped and never scrolls, so
+       the mask had nothing left to feather — it was kept only "for
+       visual symmetry" with the vertical rule. In practice the 1rem
+       transparent ramp at each edge bled onto the first and last dock
+       items: the rightmost control (e.g. a settings cog) had its outer
+       edge faded into the glass backdrop, which read as a stray
+       directional shadow on that item. A scroll-affordance feather on
+       a surface that never scrolls is pure cosmetic damage, so it is
+       removed at the root rather than masked per-consumer. */
+    .glass-dock.expanded:not(.dock-wrap) > .dock-layers {
+        overflow-x: visible;
+    }
+
+    /* ── 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`. */
+    .dock-layer,
+    .dock-layer-item-host {
+        transition:
+            opacity var(--dock-motion-fast),
+            visibility 0s linear var(--duration-fast);
+    }
+
+    .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;
+        /* The active layer shows immediately — no deferred `visibility`. */
+        transition:
+            opacity var(--dock-motion-fast),
+            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;
+    }
+
+    /* ── Base layout — distinct per surface ─────────────────────────── */
+    .dock-layer {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        grid-area: 1 / 1;
+        gap: var(--dock-layer-gap, 0.375rem);
+        height: var(--dock-layer-height, 2.5rem);
+    }
+
+    .dock-layer.layer-active {
+        position: relative;
+    }
+
+    .dock-layer:not(.layer-active) {
+        position: absolute;
+        inset: 0;
+    }
+
+    .glass-dock.expanded {
+        overflow: visible;
+    }
+
+    .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;
+        overflow: visible;
+    }
+
+    /* Z.W2.T2 — always-expanded vertical rails inherit the same
+       grow-to-fit + visible contract. The prior auto pair re-introduced
+       the scroll affordance that A2 §B6 rejected. */
+    .glass-dock.vertical.always-expanded {
+        overflow-x: visible;
+        overflow-y: visible;
+    }
+
+    .glass-dock.dock-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-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));
+    }
+
+    .glass-dock.dock-wrap .dock-layer--summary {
+        height: auto;
+        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
+    }
+
+    .glass-dock.dock-wrap .dock-separator {
+        display: none;
+    }
+
+    .glass-dock.dock-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);
+    }
+
+    .dock-layer-rail .dock-layer-tab {
+        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;
+        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);
+    }
+
+    .dock-layer-rail .dock-layer-tab.is-active {
+        background: color-mix(in srgb, var(--primary) 15%, transparent);
+        color: var(--primary);
+    }
+
+    .dock-layer-stack {
+        position: relative;
+        display: grid;
+        transition:
+            width var(--dock-motion-resize),
+            height var(--dock-motion-resize);
+    }
+
+    /* 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;
+    }
+
+    .dock-icon-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: var(--dock-control-size, var(--size-icon-btn));
+        height: var(--dock-control-size, var(--size-icon-btn));
+        padding: var(--dock-icon-padding, 0);
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        border-radius: var(--dock-control-radius, var(--radius-pill));
+        color: color-mix(in srgb, var(--foreground) calc(var(--opacity-icon-muted) * 100%), transparent);
+        outline: none;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            transform var(--dock-motion-fast),
+            opacity var(--dock-motion-fast);
+    }
+
+    .dock-icon-button--compact {
+        width: var(--dock-compact-control-size, auto);
+        height: var(--dock-compact-control-size, auto);
+        min-width: var(--dock-compact-control-min-width, 0);
+        padding: var(--dock-compact-control-padding, 0.25rem);
+    }
+
+    .dock-icon-button:hover:not(:disabled) {
+        background: var(--muted);
+        color: var(--btn-hover-color, var(--foreground));
+        transform: scale(var(--scale-hover-dock));
+    }
+
+    .dock-icon-button:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-icon-button:focus:not(:focus-visible) {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .dock-icon-button:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            transform var(--dock-motion-fast),
+            opacity var(--dock-motion-fast),
+            box-shadow var(--dock-motion-fast);
+    }
+
+    .dock-icon-button:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
+    /* O.W6 Lane B — token-ladder active paint. Defaults match the prior
+       hardcoded recipe (--muted bg + --foreground color, no transform / border
+       / shadow). Consumers override the active variant via the
+       `--dock-active-{bg,color,scale,border,shadow}` cohort scoped to a parent
+       (e.g. bbnf-buddy `ToolsLayer.vue` audacious active treatment) — no
+       `:deep()` escapes required. See tokens.css §10 (dock geometry block). */
+    .dock-icon-button:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
+        background: var(--dock-active-bg);
+        color: var(--dock-active-color);
+        transform: scale(var(--dock-active-scale));
+        border: var(--dock-active-border);
+        box-shadow: var(--dock-active-shadow);
+    }
+
+    /* 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. */
+
+    .dark-mode-toggle-button {
+        width: var(--dark-mode-toggle-size, 2.25rem);
+        height: var(--dark-mode-toggle-size, 2.25rem);
+        min-width: var(--dark-mode-toggle-size, 2.25rem);
+        min-height: var(--dark-mode-toggle-size, 2.25rem);
+        max-width: var(--dark-mode-toggle-size, 2.25rem);
+        max-height: var(--dark-mode-toggle-size, 2.25rem);
+        aspect-ratio: 1;
+        padding: var(--dark-mode-toggle-padding, 0.375rem);
+        transition:
+            opacity var(--dock-motion-standard),
+            background-color var(--dock-motion-standard),
+            box-shadow var(--dock-motion-fast);
+    }
+
+    .dark-mode-toggle-button > svg {
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+    }
+
+    .dark-mode-toggle-button:hover,
+    .dark-mode-toggle-button:focus {
+        background: var(--surface-tint-10);
+        opacity: 1;
+        outline: none;
+    }
+
+    .dark-mode-toggle-button:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    .dark-mode-toggle-button[data-size="sm"] {
+        --dark-mode-toggle-size: 1.75rem;
+        --dark-mode-toggle-padding: 0.25rem;
+    }
+
+    .dark-mode-toggle-button[data-size="md"] {
+        --dark-mode-toggle-size: 2.25rem;
+        --dark-mode-toggle-padding: 0.375rem;
+    }
+
+    .dark-mode-toggle-button[data-size="lg"] {
+        --dark-mode-toggle-size: 2.75rem;
+        --dark-mode-toggle-padding: 0.5rem;
+    }
+
+    .dark-mode-toggle-button[data-size="control"] {
+        --dark-mode-toggle-size: var(--control-size, 2.25rem);
+        --dark-mode-toggle-padding: var(--control-icon-padding, 0.375rem);
+    }
+
+    .dark-mode-toggle-button[data-size="dock"],
+    .glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not([data-size="control"]) {
+        --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn));
+        --dark-mode-toggle-padding: var(--dock-icon-padding, 0);
+    }
+
+    .dock-tab-button {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+        /* P.W4 Lane B inline-absorb: the `--dock-tab-h` density-keyed height
+           knob (parallel to DockIconButton's --dock-control-size) merged
+           here from the prior DockTabButton.vue scoped style block. The
+           density rungs that set `--dock-tab-h` per tier live in this same
+           file (the `.glass-dock[data-density="…"]` blocks above) — Q.W3
+           Lane A consolidated them out of utilities.css, closing the
+           cascade-order split-brain. When a parent <GlassDock density="…">
+           sets `--dock-tab-h`, the tab-button reserves that row even when
+           the glyph + padding sum would ride lower. Falls through to
+           `--dock-tab-min-height` (kept for audacious-tier callers) and
+           finally to `auto`. R3-spec / audit-E P0-3. */
+        min-height: var(--dock-tab-h, var(--dock-tab-min-height, auto));
+        padding-inline: var(--dock-tab-padding-inline, 0.75rem);
+        padding-block: var(--dock-tab-padding-block, 0.375rem);
+        border: none;
+        background: transparent;
+        border-radius: var(--dock-control-radius, var(--radius-pill));
+        /* Default font-size carries through to text-only tab content; consumers
+           wrapping content in an explicit type utility (e.g. `text-hero`,
+           `text-display`) on an inner <span> win because Tailwind v4 ships
+           @utility blocks in @layer utilities, which ranks above @layer
+           components — so this declaration is a fallback, not a ceiling. */
+        font-size: var(--type-small);
+        line-height: 1;
+        color: var(--muted-foreground);
+        text-decoration: none;
+        cursor: pointer;
+        white-space: nowrap;
+        outline: none;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            transform var(--dock-motion-fast);
+    }
+
+    .dock-tab-button:hover:not(:disabled) {
+        background: var(--surface-tint-8);
+        color: var(--foreground);
+    }
+
+    .dock-tab-button:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-tab-button:focus:not(:focus-visible) {
+        box-shadow: none;
+    }
+
+    .dock-tab-button:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-tab-button:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
+    .dock-tab-button:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
+        background: var(--surface-tint-10);
+        color: var(--foreground);
+    }
+
+    /* Tier — primary ────────────────────────────────────────────
+     *
+     * Per W2.7 §9, §12, §13, §17. The primary tier composes three at-rest
+     * marks (top-highlight, bottom under-shadow, baseline glass) with three
+     * disco accents on hover (specular swap, sparkle sweep, disco-grain).
+     *
+     * Reservation: disco fires on hover only. At rest the button reads as
+     * a Vignelli-restrained composed glass surface. The `--phase-color`
+     * cascade (provided by `<InstrumentChassis>` via `data-phase`) tints
+     * the disco-grain radial only on hover; idle is neutral.
+     *
+     * K.W6 Lane B — the canonical disco-grain + sparkle-sweep + specular
+     * recipe lifted to `@utility btn-audacious` (utilities.css). The Vue
+     * <DockTabButton> attaches `btn-audacious` automatically when the
+     * consumer passes `data-tier="primary"`. The dock-local rules below
+     * are STRICTLY the dock extension: structural shell (padding, base
+     * surface tint, min-height) + phase-tint extensions (hover radial
+     * uses `--phase-color`, plus the `[data-phase]` `::before` halo).
+     */
+    .dock-tab-button[data-tier="primary"] {
+        --dock-tab-min-height: 4rem;
+        padding-inline: 1.5rem;
+        background:
+            color-mix(in srgb, var(--card) 60%, transparent);
+        color: var(--foreground);
+    }
+
+    /* Phase-tint hover override — same disco-grain composition as
+     * `btn-audacious`, but the radial uses `--phase-color` (instrument-
+     * cluster axis) instead of the canonical `--primary`. The `--paper-
+     * clean-texture` overlay and `--glass-specular` shadow stack are
+     * inherited from the underlying `btn-audacious` utility. */
+    .dock-tab-button[data-tier="primary"]:hover:not(:disabled) {
+        --glass-grain-opacity: var(--glass-grain-opacity-disco, 0.08);
+        background-image:
+            var(--paper-clean-texture),
+            radial-gradient(
+                ellipse at 30% 30%,
+                color-mix(in srgb, var(--phase-color, var(--foreground)) 18%, transparent),
+                transparent 70%
+            );
+        background-blend-mode: overlay, normal;
+        background-size: var(--paper-texture-size), auto;
+    }
+
+    /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
+     *
+     * The inner `<GlyphFace>` halo (`.glyph-face-backplate { inset: -25% }`)
+     * gets clipped by the pill's `overflow: hidden`; the halo never escapes
+     * the inner glyph wrapper. This `::before` lifts the phase-tint to the
+     * pill itself so the glow composes with the whole CTA. Scoped to
+     * active phases — at idle / ready the pill stays neutral and inherits
+     * the W2.7 reservation ("disco fires on hover only"). */
+    .dock-tab-button[data-tier="primary"][data-phase]:not([data-phase="ready"]):not([data-phase="idle"])::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: radial-gradient(
+            ellipse at 30% 30%,
+            color-mix(in srgb, var(--phase-color, var(--foreground)) 18%, transparent) 0%,
+            transparent 70%
+        );
+        pointer-events: none;
+        z-index: -1;
+        opacity: 1;
+        transition: opacity var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Tier — secondary ──────────────────────────────────────────
+     *
+     * Companion to `data-tier="primary"`. Carries the same edge-light +
+     * edge-shadow skeu vocabulary at quieter weight: no disco accent, no
+     * sparkle, no curvature radial. Composes for icon-button consumers
+     * (chassis ActionCluster, SettingsCog) where the surface needs a
+     * glass-tier read but not the audacious primary punch. Per P.W1.B
+     * audit-C §3 — closes the four bare `<DockIconButton>` consumer sites
+     * (cog + back + retake + stop) without redefining the family.
+     */
+    .dock-tab-button[data-tier="secondary"],
+    .dock-icon-button[data-tier="secondary"] {
+        background: color-mix(in srgb, var(--card) 50%, transparent);
+        border: 1px solid var(--glass-border-quiet);
+        box-shadow:
+            var(--border-hairline),
+            var(--glass-highlight);
+    }
+
+    .dock-tab-button[data-tier="secondary"]:hover:not(:disabled),
+    .dock-icon-button[data-tier="secondary"]:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--card) 65%, transparent);
+        box-shadow:
+            var(--glass-specular),
+            0 0.5px 0 0 rgb(0 0 0 / 0.06);
+    }
+
+    .dock-select-trigger,
+    .dock-dropdown-trigger {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        gap: var(--dock-trigger-gap, 0.25rem);
+        min-height: var(--dock-trigger-min-height, auto);
+        padding:
+            var(--dock-trigger-padding-block, 0.25rem)
+            var(--dock-trigger-padding-inline, 0.5rem);
+        white-space: nowrap;
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        border-radius: var(--dock-control-radius, var(--radius-pill));
+        color: color-mix(in srgb, var(--foreground) calc(var(--opacity-icon-muted) * 100%), transparent);
+        outline: none;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            transform var(--dock-motion-fast),
+            opacity var(--dock-motion-fast);
+    }
+
+    .dock-select-trigger:hover:not(:disabled),
+    .dock-dropdown-trigger:hover:not(:disabled) {
+        background: var(--muted);
+        color: var(--btn-hover-color, var(--foreground));
+    }
+
+    .dock-dropdown-trigger:hover:not(:disabled) {
+        transform: scale(var(--scale-hover-dock));
+    }
+
+    .dock-select-trigger:active:not(:disabled),
+    .dock-dropdown-trigger:active:not(:disabled) {
+        transform: scale(var(--scale-press-dock));
+    }
+
+    .dock-select-trigger:focus:not(:focus-visible),
+    .dock-dropdown-trigger:focus:not(:focus-visible) {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+        transition:
+            background-color var(--dock-motion-fast),
+            color var(--dock-motion-fast),
+            transform var(--dock-motion-fast),
+            opacity var(--dock-motion-fast),
+            box-shadow var(--dock-motion-fast);
+    }
+
+    .dock-select-trigger:disabled,
+    .dock-dropdown-trigger:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
+    .dock-select-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]),
+    .dock-dropdown-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
+        background: var(--muted);
+        color: var(--foreground);
+    }
+
+    .dock-select-trigger__chevron {
+        width: var(--dock-trigger-icon-size, 0.75rem);
+        height: var(--dock-trigger-icon-size, 0.75rem);
+        flex-shrink: 0;
+        opacity: 0.5;
+        transition: transform var(--dock-motion-fast);
+    }
+
+    .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
+        transform: rotate(180deg);
+    }
+
+    @media (min-width: 640px) {
+        .glass-dock.dock-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-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-wrap .dock-layer--summary {
+            height: var(--dock-layer-height, 2.5rem);
+        }
+
+        .glass-dock.dock-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.
+
+       Density overrides (`[data-density="compact"]` etc.) still win
+       inside `@layer components` ordering — consumers that explicitly
+       opt into compact density on touch devices get their compact size
+       back. The media-query only lifts the *default* path. */
+    @media (pointer: coarse) {
+        .glass-dock {
+            --dock-control-size: var(--dock-touch-target, 2.75rem);
+            --size-icon-btn: var(--dock-touch-target, 2.75rem);
+        }
+    }
+}