@mkbabb/glass-ui 3.11.2 → 3.13.0

package/src/styles/dock-controls.css

@@ -1,23 +1,44 @@
-/* Dock CONTROL-family styles — carved out of dock.css at AU.W8b.3.
+/* Dock CONTROL-family styles — thin @import root over dock-controls/*.css
+   (AZ.W-CARVE — the AU.W8b.3 monolith drained its no-god-module ratchet row).
  *
  * dock.css keeps the shell / density / grain / layer-crossfade contract + the
  * shared cross-control four-state contract (the `:focus-visible` / `:disabled`
  * comma-groups + the motion-token `:where()` group, which reference these
  * control selectors but are shared, not per-control). This file owns the FIVE
- * control families themselves:
- *   1. `.dock-icon-button`        (base / --compact / hover / active / focus / active-paint)
- *   2. `.dark-mode-toggle-button` (sizes / hover / focus)
- *   3. `.dock-tab-button`         (base / states / tier-primary audacious / tier-secondary)
- *   4. `.dock-select-trigger` / `.dock-dropdown-trigger` (base / states / __chevron / open-flip)
- *   5. the `@media (pointer: coarse)` per-button touch-target floor on `.dock-icon-button`
+ * control families themselves, carved into cohesive partials each under the
+ * 500-line bound, @import-ed below in CASCADE ORDER into the SAME
+ * `@layer components` (the carve moves rules across files in the same source
+ * position → byte-isomorphic dist; the no-god-module import-order gate witnesses):
+ *   1. dock-controls/icon-button.css      `.dock-icon-button` (base / states / glyph / --compact)
+ *   2. dock-controls/dark-mode-toggle.css `.dark-mode-toggle-button` (sizes / in-dock glyph inset)
+ *   3. dock-controls/tab-button.css       `.dock-tab-button` (base / tier-primary / tier-secondary)
+ *   4. dock-controls/triggers.css         `.dock-select-trigger` / `.dock-dropdown-trigger` (base / states / __chevron)
+ *   5. dock-controls/touch-floor.css      the coarse @media touch floor + the vertical-rail SELECTED register
+ *
+ * The shared cross-family `:where()` group (the small-tile specular sizing
+ * re-point) stays at THIS root — exactly as the dock.css carve kept its shared
+ * `:where()` four-state contract at ITS root — because it references every
+ * control selector and nesting it under one control would change coverage.
  *
  * AU.W8b.2 — the per-family parent+state clusters use native `&`-nesting
  * (Baseline Widely available 2023; Lightning CSS down-compiles so the shipped
  * `dist` CSS is flat with IDENTICAL specificity). The cross-family comma-groups
- * stay in dock.css UN-nested (nesting under one control would change coverage).
+ * stay UN-nested (nesting under one control would change coverage).
  *
  * Imported by index.css directly after dock.css in the same `@layer components`
- * (cascade rung 6b) — no new subpath; it ships inside `/styles`. */
+ * (cascade rung 6b) — no new subpath; it ships inside `/styles`.
+ *
+ * CSS `@import` rules must precede every other rule (the dock.css precedent),
+ * so the five family partials @import FIRST; the shared cross-family `:where()`
+ * group follows in its own `@layer components`. The `:where()` group has ZERO
+ * specificity and sets `--glass-specular-size` on the control family — no family
+ * partial re-sets that property, so its source position (after the imports vs
+ * before) is cascade-immaterial; the byte-isomorphism witness (§4) is the arbiter. */
+@import "./dock-controls/icon-button.css";
+@import "./dock-controls/dark-mode-toggle.css";
+@import "./dock-controls/tab-button.css";
+@import "./dock-controls/triggers.css";
+@import "./dock-controls/touch-floor.css";
 
 @layer components {
     /* AV.W9.3 — momentum-gated dock-control press spring. The `:active` squish
@@ -50,590 +71,4 @@
            discipline) so the resting tile carries NO bloom. */
         --glass-specular-size: var(--dock-control-specular-size, 22%);
     }
-
-    .dock-icon-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        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));
-        /* Foreground base routes through `--dock-fg-on-aurora` (defaults to
-           `--foreground`, byte-identical to before) so a consumer floating the
-           dock over an aurora can lift contrast per-backdrop. The muted icon
-           weight mixes that base down with `--opacity-icon-muted`. */
-        color: color-mix(
-            in srgb,
-            var(--dock-fg-on-aurora, var(--foreground))
-                calc(var(--opacity-icon-muted) * 100%),
-            transparent
-        );
-        outline: none;
-        transition:
-            background-color var(--dock-motion-fast),
-            color var(--dock-motion-fast),
-            /* AT.W7-dock-b — `scale` carries the press micro-feedback spring
-               (transform-scoped only; the surface fades stay on the flat ease). */
-                scale var(--dock-press-spring),
-            opacity var(--dock-motion-fast),
-            /* The box-shadow fade now carries ONLY the focus-visible ring (shared
-               `:focus-visible` group in dock.css) + the active-state
-               `--dock-active-shadow` — the AX.W09-retired hover `--glass-highlight`
-               specular no longer rides it. */
-                box-shadow var(--dock-motion-fast);
-
-        /* AT.W7-dock-b — glass icon-hover. The icon-button hover reads as a glass
-           surface, not a flat `--muted` plate: a translucent card-tinted fill is
-           the hover affordance. A consumer retunes the fill via `--dock-icon-hover-bg`.
-
-           AX.W09 — the dock control's SECOND specular (the `--glass-highlight`
-           hover box-shadow, AT.W7-dock-b) is RETIRED. The dock-icon-button is a
-           member of the unified `.glass-material` group (glass.css), so the moving
-           `::before` catch-light is now its SOLE specular owner — one light per
-           surface (the §0 "excise or fail" discipline). Stacking the
-           `--glass-highlight` inset box-shadow on the most-hovered, slides-floated
-           surface was the worst-offending double-light blowout; the card-tinted
-           hover fill carries the affordance without a second catch-light, and
-           dropping it also removes the `:not(:focus-visible)` specular-vs-ring
-           juggle. */
-        /* AX.W45 DK2 — the hover reads the FAMILY token `--dock-control-hover-bg`
-           (the per-control `--dock-icon-hover-bg` still wins if a consumer set it),
-           so the whole dock-control family shares ONE glass-translucent hover fill.
-           One source per state across icon/tab/picker (no four-vocabulary drift). */
-        &:hover:not(:disabled) {
-            background: var(
-                --dock-icon-hover-bg,
-                var(--dock-control-hover-bg)
-            );
-            color: var(--btn-hover-color, var(--foreground));
-            scale: var(--scale-hover-dock);
-        }
-
-        &:active:not(:disabled) {
-            scale: var(--scale-press-dock);
-        }
-
-        &:focus:not(:focus-visible) {
-            box-shadow: none;
-            outline: none;
-        }
-
-        /* 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). */
-        &:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
-            background: var(--dock-active-bg);
-            color: var(--dock-active-color);
-            scale: var(--dock-active-scale);
-            border: var(--dock-active-border);
-            box-shadow: var(--dock-active-shadow);
-        }
-    }
-
-    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
-       group in dock.css. The box-shadow fade transition lives on the base
-       `.dock-icon-button` rule (it carries the focus-ring + active-shadow fade
-       since AX.W09 retired the hover `--glass-highlight` specular), so no
-       per-state transition override is needed. */
-
-    /* AX.W45 D15 — LIBRARY GLYPH OWNERSHIP. The dock icon-button now sizes its glyph
-       (mirroring `.dark-mode-toggle-button > svg`), so the glyph scales WITH the box
-       on the `--dock-scale` multiplier instead of swimming at a fixed consumer size.
-       `--dock-icon-glyph: calc(1.25rem * var(--dock-scale))` (tokens.css) rides the
-       multiplier — at 1.5× the glyph is 30px in a 60px box, the desktop proportion.
-       A consumer passing an explicit lucide size class still WINS (utility layer >
-       component layer) — a DEFAULT, not a ceiling, matching the `.dock-tab-button`
-       font-size precedent. */
-    .dock-icon-button > svg {
-        width: var(--dock-icon-glyph, 1.25rem);
-        height: var(--dock-icon-glyph, 1.25rem);
-    }
-
-    .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);
-    }
-
-    .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);
-
-        & > svg {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-        }
-
-        &:hover,
-        &:focus {
-            background: var(--surface-tint-10);
-            opacity: 1;
-            outline: none;
-        }
-
-        &:focus-visible {
-            box-shadow: var(--focus-ring-shadow);
-        }
-
-        &[data-size="sm"] {
-            --dark-mode-toggle-size: 1.75rem;
-            --dark-mode-toggle-padding: 0.25rem;
-        }
-
-        &[data-size="md"] {
-            --dark-mode-toggle-size: 2.25rem;
-            --dark-mode-toggle-padding: 0.375rem;
-        }
-
-        &[data-size="lg"] {
-            --dark-mode-toggle-size: 2.75rem;
-            --dark-mode-toggle-padding: 0.5rem;
-        }
-
-        &[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);
-    }
-
-    /* AX.W06 USF-2 — the dock-control optical-size contract. The
-       DarkModeToggle renders its OWN internal SVG `h-full w-full` (it bypasses
-       the `--dock-icon-glyph`-sized `> svg` slot the `.dock-icon-button` family
-       uses), so IN-DOCK it filled the whole control box edge-to-edge (~2.5× the
-       nav glyphs) — `--dock-icon-padding` is NEVER DEFINED, so the
-       `--dark-mode-toggle-padding: var(--dock-icon-padding, 0)` above fell to the
-       `0` fallback and zero padding let the SVG fill the box. Route the in-dock
-       toggle glyph through `--dock-control-glyph-size` (the ONE size the whole
-       dock-control family reads, default = `--dock-icon-glyph`, the same
-       `--dock-scale`-keyed glyph the nav icons paint), so the toggle is optically
-       UNIFORM with the nav glyphs WHEN DOCKED. The `h-full w-full` SVG stays
-       correct for the STANDALONE DarkModeToggle sizes (no `.glass-dock`
-       ancestor); this rule is scoped to the in-dock path only. Machine-checked by
-       the dock-control optical-parity gate, not eyeballed. */
-    .glass-dock
-        .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not(
-            [data-size="control"]
-        )
-        > svg {
-        width: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
-        height: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
-    }
-
-    .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 dock.css
-           (the `.glass-dock[data-density="…"]` blocks) — 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;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        transition:
-            background-color var(--dock-motion-fast),
-            color var(--dock-motion-fast),
-            /* AT.W7-dock-b — press micro-feedback spring (transform-scoped). */ scale
-                var(--dock-press-spring);
-
-        /* AX.W45 DK2 — converged onto the FAMILY hover/active token pair (the
-           surface-tint-8/10 ladder it spoke is ≈ the same intent — glass-translucent
-           foreground-over-transparent). ONE grammar across icon/tab/picker.
-           AX.W45-TUNE Q3/C3 — the hover MOTION channel is now UNIFIED: the
-           `--scale-hover-dock` lift fires here (it used to fire on only icon +
-           dropdown), so all four control members lift on hover as ONE register —
-           the bg cross-fade (glass-tier), the scale, and the specular gleam read
-           together BEFORE click. The transform rides `--dock-press-spring`
-           (`--spring-smooth`) per the W52 easing doctrine. */
-        &:hover:not(:disabled) {
-            background: var(--dock-control-hover-bg);
-            color: var(--foreground);
-            scale: var(--scale-hover-dock);
-        }
-
-        &:active:not(:disabled) {
-            scale: var(--scale-press-dock);
-        }
-
-        &:focus:not(:focus-visible) {
-            box-shadow: none;
-        }
-
-        /* focus-visible ring + disabled paint hoisted to the shared `:where()`
-           group in dock.css. */
-
-        &:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
-            background: var(--dock-control-active-bg);
-            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 two
-     * disco accents on hover (specular swap, disco-grain).
-     *
-     * D6.b — the disco-STAR is GONE (the sparkle-sweep sweep is excised from the
-     * underlying `btn-audacious`, utilities.css). The primary dock button's gold
-     * identity — the "golden dock button" the user likes — is RE-EXPRESSED sans
-     * star: a tooled `--gold-rim` gilt edge (the brushed-brass-under-glass read)
-     * plus the surviving specular catch-light + disco-grain on hover. Three quiet
-     * golds replacing one loud star.
-     *
-     * Reservation: disco fires on hover only. At rest the button reads as
-     * a Vignelli-restrained composed glass surface with a hairline gilt edge.
-     * 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 + 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) + the gilt-edge gold identity +
-     * 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);
-
-        /* D6.b — the gilt edge: a 1px inner `--gold-rim` ring + a faint gold
-           top-catch, the tooled-brass identity that replaces the excised star.
-           A box-shadow (no layout, no paint cost), composing UNDER the hover
-           specular/grain. The gold reads as a bevel light at the edge, never a
-           fill — the surface still reads as composed glass. Idiom mirrors the
-           `.glass-gilt` modifier (glass.css region) at the dock-button scale. */
-        box-shadow:
-            inset 0 0 0 1px var(--gold-rim),
-            inset 0 0.5px 0 0
-                color-mix(in oklab, var(--gold-light) 30%, transparent);
-
-        /* 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. */
-        /* AX.W52 D19 — the phase-tint hover radial DEMOTED: the prior
-         * `ellipse at 30% 30%` at 18% was a loud top-LEFT corner hotspot. Toned to
-         * 8% and the anchor shifted off the hard corner toward a softer top-biased
-         * ellipse (`40% 25%`) with a tighter `transparent 55%` falloff, so it reads
-         * as a surface lift rather than a corner glow — the disco hover identity
-         * survives, the egregious corner bloom does not. */
-        &:hover:not(:disabled) {
-            --glass-grain-opacity: var(--glass-grain-opacity-disco, 0.08);
-            background-image:
-                var(--paper-clean-texture),
-                radial-gradient(
-                    ellipse at 40% 25%,
-                    color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    ),
-                    transparent 55%
-                );
-            background-blend-mode: overlay, normal;
-            background-size: var(--paper-texture-size), auto;
-        }
-
-        /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
-         *
-         * An inner glyph wrapper's own halo would be clipped by the pill's
-         * `overflow: hidden` and never escape the glyph box. 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"). */
-        /* AX.W52 D19 — the REST phase-halo `::before` (fires during a speedtest run
-         * on the most prominent dock control) DEMOTED on the same axis as the hover
-         * radial: 18%→8%, the hard `30% 30%` corner shifted to a softer `40% 25%`
-         * top-biased ellipse with a tighter `transparent 55%` falloff, and the
-         * `opacity: 1` dropped to 0.5 so the persistent run-time halo is a subtle
-         * surface lift, not a corner bloom that washes the pill for the whole run. */
-        &[data-phase]:not([data-phase="ready"]):not([data-phase="idle"])::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: radial-gradient(
-                ellipse at 40% 25%,
-                color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    )
-                    0%,
-                transparent 55%
-            );
-            pointer-events: none;
-            z-index: -1;
-            opacity: 0.5;
-            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. The
-     * secondary tier is a cross-control comma-group (tab + icon button), so it
-     * stays flat — nesting under one control would change coverage.
-     */
-    .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;
-        /* AQ.W3 §W3.2 identity base */
-        scale: 1;
-        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));
-        /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
-        color: color-mix(
-            in srgb,
-            var(--dock-fg-on-aurora, var(--foreground))
-                calc(var(--opacity-icon-muted) * 100%),
-            transparent
-        );
-        outline: none;
-        transition:
-            background-color var(--dock-motion-fast),
-            color var(--dock-motion-fast),
-            /* AT.W7-dock-b — press micro-feedback spring (transform-scoped). */ scale
-                var(--dock-press-spring),
-            opacity var(--dock-motion-fast);
-    }
-
-    /* AX.W45 DK2 — the pickers move OFF the opaque `--muted` flat plate onto the
-       glass-translucent FAMILY hover token (the dock substrate shows through, not a
-       solid cream rectangle over the glass — the loudest "not right" tell). hover ≠
-       open now: the active/open rule below reads `--dock-control-active-bg` (a tint
-       LADDER step above hover), so an OPEN dropdown reads distinctly from a merely-
-       hovered one (paired with the chevron flip). ONE source per state, glass-aware
-       across the whole dock-control family. */
-    /* AX.W45-TUNE Q3/C3 — the picker hover lift is now in the SHARED group: the
-       `--scale-hover-dock` scale fires on BOTH select + dropdown (it used to fire on
-       the dropdown ONLY — the split-brain hover the DK2 fix left). All four dock
-       control members (icon/tab/select/dropdown) now lift on hover as one register,
-       mirroring the unified glass-tier `--dock-control-hover-bg` cross-fade. The
-       lone `.dock-dropdown-trigger:hover` scale rule is RETIRED into this group. */
-    .dock-select-trigger:hover:not(:disabled),
-    .dock-dropdown-trigger:hover:not(:disabled) {
-        background: var(--dock-control-hover-bg);
-        color: var(--btn-hover-color, var(--foreground));
-        scale: var(--scale-hover-dock);
-    }
-
-    .dock-select-trigger:active:not(:disabled),
-    .dock-dropdown-trigger:active:not(:disabled) {
-        scale: var(--scale-press-dock);
-    }
-
-    .dock-select-trigger:focus:not(:focus-visible),
-    .dock-dropdown-trigger:focus:not(:focus-visible) {
-        box-shadow: none;
-        outline: none;
-    }
-
-    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
-       group in dock.css; this rule adds only the box-shadow fade transition.
-       `scale` keeps the AT.W7-dock-b press micro-feedback spring. */
-    .dock-select-trigger:focus-visible,
-    .dock-dropdown-trigger:focus-visible {
-        transition:
-            background-color var(--dock-motion-fast),
-            color var(--dock-motion-fast),
-            scale var(--dock-press-spring),
-            opacity var(--dock-motion-fast),
-            box-shadow var(--dock-motion-fast);
-    }
-
-    .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"]
-    ) {
-        /* AX.W45 DK2 — the OPEN affordance: a translucent active fill a ladder step
-           above hover (NOT the opaque `--muted`, NOT byte-identical to hover). OPEN =
-           (chevron up + this active fill); HOVER = (the lighter hover fill, chevron
-           down) — the smooth glass-aware four-state read the picker lacked. */
-        background: var(--dock-control-active-bg);
-        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;
-        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
-           for family consistency (not a stacking-context hazard: child glyph).
-           AT.W7-dock-b — the open/close flip carries the press micro-feedback
-           spring (transform-scoped). */
-        rotate: 0deg;
-        transition: rotate var(--dock-press-spring);
-    }
-
-    .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
-        rotate: 180deg;
-    }
-
-    /* AX.W45 D15 — coarse-pointer touch floor, button-level half. The IN-DOCK floor
-       is subsumed into the `--dock-scale` multiplier + the `max(…, 44px)` clamp in
-       the dock.css density cascade (the in-dock control-size grows ~1.5× past the
-       44px target, the clamp guarantees the floor even below 1.0× scale). This
-       per-button rule is the STANDALONE half: a DockIconButton with NO `.glass-dock`
-       ancestor (a routed gear) has no density cascade lifting its size, so it keeps
-       the explicit `min-{block,inline}-size` floor. Scoped `:not(:where(.glass-dock
-       *))` so it does NOT double-stamp on an in-dock button (the cascade owns that —
-       one path per surface, no two-floor). Compact buttons opt out. */
-    @media (pointer: coarse) {
-        .dock-icon-button:not(.dock-icon-button--compact):not(:where(.glass-dock *)) {
-            min-block-size: var(--dock-touch-target, 2.75rem);
-            min-inline-size: var(--dock-touch-target, 2.75rem);
-        }
-    }
-
-    /* AX.W06 F2/F3 — the HOISTED refined rail nav-item polish. The demo's
-       `SidebarDock` dogfooded the active-category affordance (accent glyph tint +
-       a left-edge accent rule) as DEMO-PRIVATE chrome (`demo/layout/dock-nav.css`
-       `.demo-sidebar-item.is-active`), so a consumer reaching for `variant="rail"`
-       got the UN-refined bare `.is-active` colour shift. This hoists the refined
-       treatment into the shipped variant CSS so the demo == the shipped contract
-       (the demo no longer re-derives a worse rail by hand). The tap-squish press
-       feedback (the `:active` `--scale-press-dock` squish) + the right-anchored
-       tooltips are already the dock-control family + the consumer's `<Tooltip
-       side="right">` — this carries the active-item ACCENT, the half the variant
-       CSS did not own.
-
-       The accent is TOKENIZED, not baked: `--dock-rail-active-accent` defaults to
-       the library `--primary` brand ink; a consumer retints it per-instance (the
-       demo overrides it to `--viz-fourier` NCSU-red on the cascade). The active
-       state reads the SHIPPED four-state hooks the dock-control family already
-       activates (`.is-active`, `aria-current="page"`, `[aria-pressed="true"]`).
-       Scoped to a `.glass-dock.variant-rail` descendant icon-button — a horizontal
-       dock or the layer-switcher rail are untouched. */
-    .glass-dock.variant-rail .dock-icon-button {
-        position: relative;
-    }
-
-    .glass-dock.variant-rail
-        .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"]) {
-        --dock-active-color: var(--dock-rail-active-accent, var(--primary));
-        color: var(--dock-rail-active-accent, var(--primary));
-    }
-
-    /* The leading-edge accent rule — a short rounded bar pinned to the rail-leading
-       edge of the active nav item (the iOS / Figma side-rail selected-affordance).
-       `inset-inline-start` keys it off the writing-direction leading edge, so the
-       bar sits OUTSIDE the button on the rail's plate; `inset-block: <inset>` keeps
-       it short + centred. The width/inset/colour all read `--dock-rail-active-*`
-       tokens so the whole accent is tunable from one place. */
-    .glass-dock.variant-rail
-        .dock-icon-button:is(.is-active, [aria-current="page"], [aria-pressed="true"])::before {
-        content: "";
-        position: absolute;
-        inset-block: var(--dock-rail-accent-inset, 18%);
-        inset-inline-start: calc(
-            -1 * var(--dock-rail-accent-width, 3px) - var(--dock-rail-accent-gap, 2px)
-        );
-        width: var(--dock-rail-accent-width, 3px);
-        border-radius: var(--radius-pill);
-        background: var(--dock-rail-active-accent, var(--primary));
-        pointer-events: none;
-    }
 }

package/src/styles/dock.css

@@ -40,6 +40,8 @@
 @import "./dock/layers.css";
 @import "./dock/layer-group.css";
 @import "./dock/overflow.css";
+@import "./dock/rail-extend.css";
+@import "./dock/morph-bridge.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,

package/src/styles/floating-panel.css

@@ -10,6 +10,10 @@
         backdrop-filter: var(--glass-blur-resting);
         color: var(--popover-foreground);
         box-shadow: var(--glass-shadow-resting);
+        /* AZ.R5-4 — the comfortable panel inner-pad rung (consumer-verified the
+           tight default). Token-first: a consumer retunes every floating panel +
+           dropdown surface from `--panel-padding`. */
+        padding: var(--panel-padding);
         pointer-events: auto;
         /* V.W3.T9 — animation grammar routes through the canonical
            Tailwind `animate-floating-panel-in` utility (defined in
@@ -32,3 +36,14 @@
 .dropdown-sub-content {
     font-family: var(--dropdown-menu-font, inherit);
 }
+
+/* AZ.R5-4 — the comfortable menu inner-pad rung. The dropdown content family
+   reads the shared `--panel-padding` token (the prior hand-set `p-1` was the
+   tight floor the user flagged on the slides deck). Token-first: one override
+   retunes every teleported menu surface. Unlayered like the font rule above —
+   the `p-1`/literal Tailwind pad was removed from the SFC `cn()` chains so this
+   is the sole padding authority. */
+.dropdown-menu-content,
+.dropdown-sub-content {
+    padding: var(--panel-padding);
+}