@mkbabb/glass-ui 3.11.2 → 3.13.0

package/src/styles/dock/layer-group.css

@@ -10,9 +10,12 @@
  * `.dock-layer-item-host` pane.
  *
  * NOTE: this `.dock-layer-rail` is the LAYER-SWITCHER rail inside a
- * `<DockLayerGroup>` — distinct from the `GlassDock variant="rail"` navigation
- * column (dock/shell.css + dock-controls.css) and the `<InstrumentRail>` cockpit
- * chassis (instrument-rail). The three share the noun, not the architecture.
+ * `<DockLayerGroup>` — the in-dock switcher tab strip. AZ.W-DOCK-TAXONOMY
+ * de-overloaded the "rail" noun: the `GlassDock variant="rail"` vertical-nav
+ * variant is GONE (a vertical nav column is now `orientation="vertical"`), and
+ * `<InstrumentRail>` retired at AY W-IC1. `.dock-layer-rail` is the ONLY surviving
+ * "rail" in the dock band; the noun is otherwise free (reserved for the
+ * W-RAIL-EXTEND beyond-dock facility).
  *
  * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
  * carve is isomorphic (same layer, same source order → ZERO visual delta). */
@@ -87,38 +90,59 @@
         flex-direction: column-reverse;
     }
 
-    /* AX.W45 DK8 — the rail gets its OWN surface plate. Previously the rail was a
-       bare bordered gutter (a hairline `border-right`, no background), so its
-       `--primary 15%` indicator + `--accent 40%` hover were tuned against an absent
-       plate (the "bg's not right"). The `--dock-layer-rail-bg` rung (a quiet
-       `--surface-tint-8` default, consumer-overridable) gives the rail a finished
-       glass-quiet surface; the hover/active affordance reads the `--dock-layer-rail-
-       {hover,active}` tokens, so the whole rail ladder is tunable from §10. */
+    /* AZ.W-DOCK-RAIL — the rail is a HAIRLINE register, not a fused plate. The
+       AX.W45 `--surface-tint-8` filled plate + `--radius-md` rounded background
+       (the "heavy dark blob column" R3-1) are RETIRED: the rail box paints NO fill
+       (`--dock-layer-rail-bg` defaults transparent at §sizing) and carries no
+       rounded plate background. The single `border-right` hairline — re-keyed to
+       the tunable `--dock-layer-rail-divider` token — is the only visible rail
+       edge: a thin rule between the switcher column and the dock body. The
+       hover/active affordance reads the `--dock-layer-rail-{hover,active}` glass
+       tints, so the whole rail ladder is tunable from §sizing. */
     .dock-layer-rail {
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
+        /* AY.W-DOCK-NAV B6 — `align-self: start` (not the group's `stretch`
+           default) so the column rail reports its OWN intrinsic content height
+           (the stacked tabs) to the group's cross-axis sizing rather than being
+           stretched to the group's content-row height. Under `stretch` the rail's
+           height resolved to the group height, which was the single content-row
+           height — circular: the rail's 3 tall tabs overflowed a 40px rail and the
+           lower tabs + the indicator fell below the dock floor (the B6 break). With
+           `align-self: start` the rail demands its natural column height, the group
+           grows to it, and the dock grows to contain the whole rail. The
+           `min-height: max-content` belt makes the demand explicit — a row-flex
+           child's cross-size can otherwise resolve to the (smaller) container row
+           height even under `align-self: start`; `max-content` floors the rail at
+           its stacked-tab content height so the chain (group → pane → dock) grows
+           to fit. */
+        align-self: start;
+        min-height: max-content;
         gap: var(--dock-layer-rail-gap, 0.125rem);
         padding: var(--dock-layer-rail-padding, 0.125rem);
-        background: var(--dock-layer-rail-bg, var(--surface-tint-8));
-        border-radius: var(--dock-layer-rail-radius, var(--radius-md));
-        border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
+        background: var(--dock-layer-rail-bg, transparent);
+        border-right: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, 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);
+        border-bottom: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, 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);
+        border-left: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, 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);
+        border-top: 1px solid
+            var(--dock-layer-rail-divider, color-mix(in srgb, var(--border) 40%, transparent));
     }
 
     /* AU.W8.4 — the rail is a reka-ui Tabs contract. The travelling
@@ -134,12 +158,27 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        /* AY.W-DOCK-NAV B6 — `flex-shrink: 0` so the stacked tabs in the column rail
+           hold their full size and the rail demands its natural content height (no
+           tab squish). With the rail's `align-self: start` this makes the rail report
+           its true column height to the group's cross-axis sizing, growing the dock
+           to contain all the tabs + the travelling indicator (the B6 un-clip). */
+        flex-shrink: 0;
         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);
+        /* AZ.W-DOCK-RAIL — the rest glyph lifts OFF the low-contrast
+           `--muted-foreground` (which read sub-AA over the now-hairline transparent
+           backdrop) to the nav-glyph contrast register: a strong warm-ink tint of
+           the dock foreground (`--dock-fg-on-aurora` → `--foreground`), tempered to
+           ~78% for the unselected read while staying ≥4.5:1 over the dock substrate.
+           The selected tab flips to the full register below. */
+        color: var(
+            --dock-layer-rail-glyph,
+            color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 78%, transparent)
+        );
         cursor: pointer;
         font: inherit;
         font-size: 0.75rem;
@@ -150,19 +189,34 @@
             color var(--dock-motion-fast);
     }
 
+    /* AZ.W-DOCK-RAIL — floor the rail glyph. The `size-4` (16px) icon class on the
+       lucide component does not survive the column inline-flex: with no concrete
+       `width`/`flex-shrink`, the un-floored SVG collapsed to a 4px sliver
+       (F2-R3-1). This rule floors BOTH axes to 1rem (16px) and pins
+       `flex-shrink: 0` so the glyph never re-squishes inside the flex tab. */
+    .dock-layer-rail .dock-layer-tab svg {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+    }
+
     .dock-layer-rail .dock-layer-tab:hover {
         background: var(
             --dock-layer-rail-hover,
-            color-mix(in srgb, var(--accent) 40%, transparent)
+            color-mix(in srgb, var(--accent) 30%, transparent)
         );
-        color: var(--foreground);
+        color: var(--dock-fg-on-aurora, 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. */
+       BACKGROUND is RETIRED — the travelling indicator carries that affordance.
+       AZ.W-DOCK-RAIL — the selected glyph reads the full warm-ink register (the
+       nav-glyph contrast canon), deferring the exact accent to W-REGISTER-IOS's
+       root via `--dock-rail-active-accent` (defaults to the dock foreground, NOT
+       a saturated brand `--primary`). */
     .dock-layer-rail .dock-layer-tab[data-state="active"] {
-        color: var(--primary);
+        color: var(--dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground)));
     }
 
     /* AU.W8.4 — the dock control focus-ring contract does not cover
@@ -204,10 +258,14 @@
         height: var(--reka-tabs-indicator-size);
         transform: translateY(var(--reka-tabs-indicator-position));
         border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
-        background: var(
-            --dock-layer-rail-active,
-            color-mix(in srgb, var(--primary) 15%, transparent)
-        );
+        /* AZ.W-DOCK-RAIL — the travelling indicator paints the glass-register
+           `--dock-layer-rail-active` (defaults to `--glass-bg-floating`, the
+           "selected reads as glass" register). The inline fallback is the SAME
+           glass tier — NOT the saturated `--primary 15%` warm-red mix the prior
+           register baked. The baked-plate utilities the reka `<TabsIndicator>`
+           wrapper used to render are suppressed via `:surface="false"` in
+           DockLayerGroup.vue, so THIS token rule is the sole paint. */
+        background: var(--dock-layer-rail-active, var(--glass-bg-floating));
         transition:
             width var(--duration-fast) var(--spring-snappy),
             height var(--duration-fast) var(--spring-snappy),

package/src/styles/dock/layers.css

@@ -60,6 +60,18 @@
         inline-size: var(--dock-morph-size);
     }
 
+    /* AZ.W-DOCK-TAXONOMY (move 2) — a VERTICAL dock's outer `.dock-layers` morphs the
+       BLOCK axis (its collapse↔expand shrinks `height`, not `width`). The orchestrator
+       measures/writes the same `--dock-morph-from/to` span on the block axis
+       (`outerLayerAxis` is now the resolved orientation; `morphAxisProp` maps
+       vertical→`block-size`), so the CSS lands the scalar on `block-size` and lets the
+       inline axis stay intrinsic. This is the wiring that gives a collapsible vertical
+       dock the height-morph the mandate names. */
+    .glass-dock.vertical[data-morphing] .dock-layers {
+        inline-size: auto;
+        block-size: var(--dock-morph-size);
+    }
+
     /* A vertical inner group morphs the BLOCK axis — the same span lands on
        block-size, and the inline axis stays intrinsic. */
     .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
@@ -196,9 +208,19 @@
        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). */
+    /* AY.W-DOCK-NAV B6 — the height is a FLOOR (`min-height`), not a fixed lock. A
+       single-row content pane's intrinsic height already equals
+       `--dock-layer-height` (the controls + line-height sum to it), so `min-height`
+       is byte-identical for the common case. But a horizontal dock hosting a COLUMN
+       switcher-rail (`<DockLayerGroup>` with `show-rail`) lays the rail out as a
+       stack of tabs taller than one row — the prior fixed `height` clipped the
+       rail's lower tabs + the active indicator BELOW the dock floor (the B6 "no rail
+       line / broken" read, measured: 2 of 3 tabs clipped). The floor lets the pane
+       block-size to the rail's natural column height so the dock grows to contain
+       the whole rail. The cross axis keeps `nowrap`. */
     .glass-dock:not(.vertical) .dock-layer {
         white-space: nowrap;
-        height: var(--dock-layer-height, 2.5rem);
+        min-height: var(--dock-layer-height, 2.5rem);
     }
 
     .dock-layer.is-active {

package/src/styles/dock/morph-bridge.css

@@ -0,0 +1,123 @@
+/* dock/morph-bridge.css — the AZ.W-MORPH-SHOWCASE metaball-teardrop bridge (H4 arm a).
+ *
+ * The net-new CSS SVG-goo filter that hides the V↔H dock topology jump-cut. The
+ * fleet's Arch B picks "the existing goo-blob mounted behind the docks OR a net-new
+ * CSS SVG-goo filter … the implementation picks per perf/browser." This wave picks the
+ * CSS SVG-goo filter — the M5-DETERMINISTIC choice: the bridge has NO free-running
+ * `uTime` (the goo-blob's three wall-clock channels would RED the M5 scalar-binding
+ * clause), NO WebGL pass at all (so the HG5 frame budget clears trivially — zero shader
+ * frames), and its teardrop aspect is a PURE function of `--dock-morph-t`. The classic
+ * gooey-CSS trick: blur two plates so their alpha bleeds together, then threshold the
+ * blurred alpha back to a sharp edge (feColorMatrix on the A channel) so the merge
+ * reads as one amorphous metaball silhouette.
+ *
+ * The bridge is DECORATIVE only (the contained-creature constraint — it hosts no dock
+ * children; the real DOM docks crossfade UNDER it). It paints BEHIND the two docks and
+ * fully occludes the reflow at the `t≈0.5` midpoint where both plates are at their
+ * dimmest.
+ *
+ * Determinism (HG4/M5): every animated axis below is `f(var(--dock-morph-t))` (the ONE
+ * inheriting scalar the morph spring writes) or `f(var(--stretch))` (the scalar's
+ * DERIVATIVE the liquid-flex squish writes) — NEVER a CSS animation/transition with its
+ * own clock. A frame captured at a given `--dock-morph-t` is byte-reproducible. */
+
+@layer components {
+    /* The bridge host — sits absolutely behind the two docks, isolation-safe so the
+       goo filter does not leak onto siblings. The two plates inside it are merged by
+       the SVG goo filter referenced via `filter: url(#…)`. */
+    .dock-morph-bridge {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        pointer-events: none;
+        z-index: 0;
+        /* The goo: blur-then-threshold the child plates' alpha. The filter id is
+           authored once in the showcase SFC (a hidden <svg><filter>); the consumer
+           binds it here. `isolation: isolate` keeps the blur/threshold scoped to the
+           plates, not the page behind. */
+        isolation: isolate;
+        /* Under reduced motion the bridge is hidden — the morph snaps (no teardrop). */
+        opacity: var(--dock-bridge-opacity, 1);
+    }
+
+    /* The goo container the filter applies to — only the plates inside it merge.
+       SCOPED to a TIGHT centered box just larger than the max plate footprint (NOT
+       inset:0 over the whole stage) so the per-frame `feGaussianBlur` repaint covers
+       a small region, not the full stage — the morph frame budget (HG5) clears. The
+       box is sized off the morph spans (the consumer passes --dock-bridge-h-w /
+       --dock-bridge-v-h); `contain: paint` clips the filter work to it. */
+    .dock-morph-bridge-goo {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        translate: -50% -50%;
+        width: calc(var(--dock-bridge-h-w, 18rem) + 2.5rem);
+        height: calc(var(--dock-bridge-v-h, 16rem) + 2.5rem);
+        display: grid;
+        place-items: center;
+        contain: layout paint;
+        filter: var(--dock-bridge-goo-filter, none);
+    }
+
+    /* A bridge plate — a warm-glass capsule. TWO plates: one tracks the vertical dock
+       footprint (tall capsule), one the horizontal (wide capsule); both shrink toward
+       the shared center as the morph crosses the midpoint so the blur fuses them into
+       ONE teardrop. The size + corner radius are `f(--dock-morph-t)`; the
+       volume-preserving squish reads `--stretch` (the scalar derivative). */
+    .dock-morph-bridge-plate {
+        position: absolute;
+        /* The warm-cream gel body — the metaball-teardrop fill (a soft radial so the
+           blur threshold reads a domed droplet, not a flat slab). */
+        background: radial-gradient(
+            120% 120% at 50% 38%,
+            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
+            var(--glass-bg-resting, var(--card)) 62%,
+            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
+        );
+        border-radius: 999px;
+        /* The volume-preserving teardrop squish — stretch along the travel axis,
+           compress reciprocally. Reads `--stretch` (the liquid-flex derivative). The
+           vertical plate squishes on Y, the horizontal on X (set per-plate below). */
+        will-change: width, height, transform;
+    }
+
+    /* The VERTICAL plate — a tall capsule (the t=0 silhouette). It collapses its height
+       toward the center as t: 0 → 0.5, where it has merged into the teardrop. Width is
+       the dock's inline footprint; height interpolates full → a thin neck. */
+    .dock-morph-bridge-plate--vertical {
+        width: var(--dock-bridge-v-w, 3.25rem);
+        /* full height at t=0, necking to ~the width (a circle) by t=0.5, gone by t=1 */
+        height: calc(
+            var(--dock-bridge-v-h, 16rem) *
+                (1 - clamp(0, var(--dock-morph-t, 0), 1)) +
+                var(--dock-bridge-v-w, 3.25rem) * clamp(0, var(--dock-morph-t, 0), 1)
+        );
+        opacity: calc(1 - clamp(0, calc((var(--dock-morph-t, 0) - 0.5) * 2), 1));
+        /* squish Y on travel (the tall plate stretches along its collapse axis) */
+        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
+    }
+
+    /* The HORIZONTAL plate — a wide capsule (the t=1 silhouette). It grows its width
+       from the center as t: 0.5 → 1. Height is the dock's block footprint; width
+       interpolates a thin neck → full. */
+    .dock-morph-bridge-plate--horizontal {
+        height: var(--dock-bridge-h-h, 3.25rem);
+        width: calc(
+            var(--dock-bridge-h-h, 3.25rem) * (1 - clamp(0, var(--dock-morph-t, 0), 1)) +
+                var(--dock-bridge-h-w, 18rem) * clamp(0, var(--dock-morph-t, 0), 1)
+        );
+        opacity: clamp(0, calc(var(--dock-morph-t, 0) * 2), 1);
+        /* squish X on travel (the wide plate stretches along its growth axis) */
+        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
+    }
+
+    /* PRM — the bridge is removed; the morph snaps to the target dock (the spring's
+       respectReducedMotion jumps the scalar 0→1 in one frame, the docks land at their
+       endpoints, the goo teardrop never paints). */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-morph-bridge {
+            --dock-bridge-opacity: 0;
+        }
+    }
+}

package/src/styles/dock/morph.css

@@ -54,18 +54,41 @@
 
     /* The morphing root chrome — background / border-color interpolate between the
        collapsed and expanded endpoints on the ONE `--dock-expand-t` scalar. Scoped
-       to the horizontal `variant-dock` (the rail / instrument-strip variants own
-       their own surface vocabulary and do not collapse↔expand). The two color axes
-       blend in srgb (the house mix the token ladder speaks). The `.collapsed`
-       discrete bg/border declarations are RETIRED — this block is the single
-       authority, and at rest `--dock-expand-t` resolves to the class endpoint (0
-       collapsed / 1 expanded) so the resting look is exact. */
-    .glass-dock.variant-dock:not(.vertical) {
+       to the horizontal dock (`:not(.vertical)`) — the inline-axis aperture morph;
+       a vertical dock collapses its BLOCK axis (the summary/full FLIP from the
+       orchestrator) and reads its own surface plate (shell.css `.glass-dock.vertical`).
+       The two color axes blend in srgb (the house mix the token ladder speaks). The
+       `.collapsed` discrete bg/border declarations are RETIRED — this block is the
+       single authority, and at rest `--dock-expand-t` resolves to the class endpoint
+       (0 collapsed / 1 expanded) so the resting look is exact.
+       AZ.W-DOCK-TAXONOMY — the `variant-dock` class is gone; `.glass-dock:not(.vertical)`
+       IS the horizontal dock now (no second-way to express orientation). */
+    .glass-dock:not(.vertical) {
+        /* AY.W-A11Y-PERF O-1 / AZ.W-ADAPTIVE-AUTO Arm 1 — BOTH morph endpoints compose
+           the W55 oklab adaptive tint so the self-engage darken (the unconditional
+           `:where(.glass-dock)` rule below re-points the element-level
+           `--glass-tint-source`/`--glass-tint-strength`) reaches the LIVE
+           horizontal dock surface in BOTH the expanded AND the COLLAPSED look (this
+           0,3,0 morph interp OVERRIDES the 0,1,0 shell.css bg, so the tint must be
+           applied HERE — and the COLLAPSED endpoint `--glass-bg-wash` must carry it too,
+           else a collapsed dock over light paints the un-darkened wash and the plate
+           vanishes — the C5-2 ΔL≈0.01 collapse, re-surfaced on the collapsed endpoint).
+           The srgb transition mix between the two TINTED endpoints is preserved (the
+           in-flight morph frames are sub-perceptual); at the `0%` rest default both
+           inner oklab mixes are no-ops so this is byte-identical to today. */
         background: color-mix(
             in srgb,
-            var(--glass-bg-dock, var(--glass-bg-resting))
+            color-mix(
+                in oklab,
+                var(--glass-bg-dock, var(--glass-bg-resting)),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
                 calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-bg-wash)
+            color-mix(
+                in oklab,
+                var(--glass-bg-wash),
+                var(--glass-tint-source) var(--glass-tint-strength)
+            )
         );
         border-color: color-mix(
             in srgb,
@@ -78,18 +101,40 @@
     /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
        wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
        its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
-       Padding interpolates linearly between the collapsed floor and the expanded
-       block/inline padding on the same `--dock-expand-t` scalar. */
-    .glass-dock.variant-dock:not(.vertical):not(.dock-overflow-wrap) {
-        --dock-pad-collapsed: var(
-            --dock-collapsed-padding,
-            var(--dock-padding-block, 0.375rem)
-        );
-        padding-block: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
+
+       AY.W-DOCK-CHROME §1 — the LAYOUT-ISOLATION fix: the collapse↔expand morph is
+       an INLINE-WIDTH aperture by contract ("horizontal docks animate width"), so
+       the BLOCK axis MUST be invariant across the morph — otherwise the dock's
+       outer height shrinks ~4px on collapse (the collapsed-pad 0.25rem vs the
+       expanded pad-block 0.375rem, ×2) and, because a free-floating / inline dock
+       sits in normal flow (`display:inline-flex`), that height delta REFLOWS its
+       siblings — the page content jumped as the dock animated (the user's 13:27
+       audit item 1). The fix holds `padding-block` PINNED at the expanded value in
+       BOTH states (no `--dock-expand-t` interpolation on the block axis) so the
+       outer block-size is constant; ONLY `padding-inline` morphs to tighten the
+       collapsed pill inline. The collapsed circle is unaffected — its diameter is
+       owned by the summary pane's own symmetric `block-size` + `aspect-ratio:1`
+       (the `.collapsed .dock-layer--summary` rule below), CENTRED on the dock's
+       stable-height plate by the root `align-items:center`, not by the root pad. So
+       the morph reflows NOTHING vertically: 0px container-height delta. */
+    .glass-dock:not(.vertical):not(.dock-overflow-wrap) {
+        /* The collapsed inline-pad endpoint is the EXPANDED block pad (max'd with the
+           consumer `--dock-collapsed-padding` handle) so the height-pinned collapsed
+           pill is SYMMETRIC → a clean circle at the `--radius-dock` 9999px. The block
+           axis is pinned to the expanded pad (below), so matching the inline collapsed
+           endpoint to it keeps the box square (the B4 "symmetric collapsed padding
+           keeps the pill a circle" intent, preserved through the §1 height-pin). The
+           `max()` lets a consumer set `--dock-collapsed-padding` LARGER for a looser
+           pill but never SMALLER than the block pad (which would re-introduce the
+           narrower-than-tall oval the height-pin would otherwise leave). */
+        --dock-pad-collapsed: max(
+            var(--dock-padding-block, 0.375rem),
+            var(--dock-collapsed-padding, 0px)
         );
+        /* block padding is INVARIANT — the expanded value, both states (the
+           layout-isolation contract above): the inline aperture morphs, the block
+           axis is pinned so the outer height never changes → 0px container reflow. */
+        padding-block: var(--dock-padding-block, 0.375rem);
         padding-inline: calc(
             var(--dock-pad-collapsed) +
                 (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) *
@@ -110,14 +155,17 @@
         box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
     }
 
-    /* AX.W45-TUNE Q1 — the collapsed summary floors on BOTH axes off the SAME
-       `--dock-collapsed-summary-min-size` token (now MINTED in tokens.css §10 as a
-       tight ≈0.7× of the full control height). The prior rule floored ONLY
-       `min-width` and let the token fall to `--dock-layer-height` (the full control
-       height) — so the collapsed pill read as a full-row stub, not a proportioned
-       squircle. Adding the symmetric `min-block-size` makes the collapsed pill a
-       tight square-ish dot the consumer's glyph sits centred in (the proportioned-
-       pill target the user's Q1 named). */
+
+    /* AY.W-DOCK-NAV B4 — the collapsed summary is a PERFECT CIRCLE. The `.dock-layer`
+       base rule (`.glass-dock:not(.vertical) .dock-layer`) locks `height:
+       var(--dock-layer-height)` (40px) on EVERY layer including the summary; against
+       the 0.85× `--dock-collapsed-summary-min-size` min-width that made the pane
+       40h × 30w — an oval (the user's "circle, not oval"). This rule (1) LIFTS the
+       height-lock so the summary block-sizes to the SAME token its width floors at,
+       and (2) floors both axes to that ONE token, so the collapsed pane is a square
+       and the root's symmetric collapsed padding keeps the pill a circle. The glyph
+       sits centred on both axes. The `aspect-ratio: 1` belt-and-braces guarantees
+       1:1 even if a consumer's collapsed-slot content is wider than the floor. */
     .glass-dock.collapsed .dock-layer--summary {
         min-width: var(
             --dock-collapsed-summary-min-size,
@@ -127,6 +175,15 @@
             --dock-collapsed-summary-min-size,
             var(--dock-layer-height, 2.5rem)
         );
+        block-size: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        height: var(
+            --dock-collapsed-summary-min-size,
+            var(--dock-layer-height, 2.5rem)
+        );
+        aspect-ratio: 1;
         justify-content: center;
     }
 
@@ -146,17 +203,62 @@
         --dock-expand-t: var(--dock-morph-t);
     }
 
+    /* AY.W-DOCK-NAV B15 — the EMPTY-collapsed-summary trap. A dock with a
+       `#persistent` control but NO `#collapsed` slot (the overview first-section
+       dock) still renders a `.dock-layer--summary` pane that floors to the circle
+       min-width — so collapsed it read as a WIDE pill: the persistent Home glyph on
+       the LEFT + an empty circle of dead space on the RIGHT (the measured 84×50
+       oval). Expanding then grew the content INTO that right-side void, so the
+       morph read "from the right" not center-out (the user's B15). When the summary
+       slot is EMPTY (`:not(:has(*))`), collapse it to zero width + no floor so the
+       persistent control stands alone as the collapsed circle, and the morph grows
+       symmetrically about the persistent. An empty Vue `#collapsed` slot renders
+       ZERO child nodes (no whitespace text node either), so `:empty` matches it
+       exactly — and a flat `:empty` avoids the nested-`:has()` form Lightning CSS
+       drops. An authored `#collapsed` slot (non-empty summary) keeps its circle
+       pill. */
+    .glass-dock.collapsed .dock-layer--summary:empty {
+        min-width: 0;
+        inline-size: 0;
+        padding: 0;
+        margin: 0;
+        border: 0;
+    }
+
+    /* The persistent control IS the collapsed pill in the empty-summary case — drop
+       the inter-region gap so the collapsed circle is exactly the persistent box. */
+    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent
+        + .dock-layers {
+        margin-inline-start: 0;
+    }
+
     /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
        The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
        root transition above, so this hover scale settles on the SAME spring curve
        the expand morph uses — a collapsed→hover→expand gesture is one continuous
        spring, not a `scale`-ease handed off to the width-spring. The hover scale
        and the press squish (`--scale-press-dock`) are now one register on the dock
-       surface. */
+       surface.
+
+       AZ.W-DOCK-FLICKER — the `scale` arm is GATED on `:not([data-morphing])` (the
+       collapse-onset scale-pop fix, C2-2). `.collapsed` flips on SYNCHRONOUSLY when
+       a hovered dock begins collapsing, but the box is still painted at EXPANDED
+       width for the morph's leading frames (the `onSwap` pin + 1-rAF measure-defer
+       in dockMorphContext.ts). The bare `.collapsed:hover { scale: 1.1 }` multiplied
+       that transient ~535px box, painting a ±24-34px right-edge pop (the user's
+       "flashing"). Scoping the SCALE to `:not([data-morphing])` makes the +1.1 lift
+       apply ONLY at rest (the box is the 54px circle then) — during `[data-morphing]`
+       the hover scale is inert, mirroring the shipped `--dock-expand-t`
+       `[data-morphing]` precedent above (morph.css:46-53). The surface arms
+       (background/border/shadow) stay on the bare `:hover` (they don't multiply
+       geometry, so a hovered collapse keeps its hover read without the pop). */
     .glass-dock.collapsed:hover {
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
         box-shadow: var(--shadow-dock-override, var(--shadow-dock));
+    }
+
+    .glass-dock.collapsed:hover:not([data-morphing]) {
         scale: var(--dock-collapsed-hover-scale);
     }
 
@@ -200,22 +302,44 @@
         border-color: var(--glass-border-floating, var(--glass-border-resting));
     }
 
-    /* ── Adaptive legibility: the dock over a light backdrop (AX.W55 — the literal
-       G2 surface; "Glass dock over VERY LIGHT materials is unreadable") ──────────
-       The dock is the surface the user reported unreadable over light content. Its
-       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers all now read the
-       SAME oklab tint seam the five rungs use, so this ONE bucket block — set when a
-       consumer marks `--glass-backdrop: light` on the dock's ancestor — lifts every
-       dock surface toward ink in lockstep. The tint tokens are INHERITING, so
-       re-pointing them on the `.glass-dock` root re-resolves every nested surface +
-       cascades to the dock CONTROLS (which read `--dock-fg-on-aurora` for their
-       foreground); `--dock-fg-on-aurora` re-points to the warm-ink here so the
-       control glyphs/labels clear AA over the now-darkened plate — ONE reconciled
-       path, the foreground twin folded INTO the probe, not a third fork. The
-       morph-root interp (`.variant-dock:not(.vertical)` above) stays `color-mix(in
-       srgb …)` for the transition; the adaptive darken rides its RESTING endpoint
-       (`--glass-bg-dock`, which carries the tint) — the in-flight morph frames are
-       sub-perceptual (the ratified resting-endpoint-only default). */
+    /* ── Adaptive legibility: SELF-ENGAGE the dock over a light backdrop by default
+       (AZ.W-ADAPTIVE-AUTO Arm 1 — the literal G2 surface; "Glass dock over VERY
+       LIGHT materials is unreadable, darken DYNAMICALLY like iOS 27") ─────────────
+       The dock floats over WHATEVER the consumer painted — frequently a light/near-
+       white app surface (the canonical G2 case the user reported). AY.W-A11Y-PERF
+       O-1 set `--glass-backdrop: light` on the dock's OWN root (shell.css) intending
+       a self-darken, but CSS style queries NEVER self-match (the `@container
+       style()` block below reads an ANCESTOR — verified on Chrome 148), so the
+       self-declaration was a NO-OP. This `:where(.glass-dock)` rule is the genuine
+       UNCONDITIONAL self-engage — mirroring the overlay band's `ladder.css:169` —
+       re-pointing the INHERITING tint tokens DIRECTLY on the dock root so the
+       shell (`--glass-bg-dock`), chassis-strip, and held/open tiers (which compose
+       the oklab tint AT THE ELEMENT — the substitution-vs-inheritance-safe targets)
+       darken toward warm-ink in lockstep. `--dock-fg-on-aurora` re-points to the
+       warm-ink here too — ONE reconciled path, the foreground twin folded in (it
+       reaches the dock CONTROLS' glyph/label color). Over a DARK page the darken is
+       sub-perceptual; a dark-substrate consumer opts out via `--glass-tint-strength:
+       0%` on the dock root. The morph-root interp (`.glass-dock:not(.vertical)`
+       above) stays `color-mix(in srgb …)` for the transition — the adaptive darken
+       rides its RESTING endpoint (`--glass-bg-dock`), the in-flight morph frames are
+       sub-perceptual (the ratified resting-endpoint-only default). The muted body
+       register lifts to the full warm-ink under the engaged plate (the muted L40
+       tier cannot clear 4.5:1 on a translucent darkened plate — darkening moves the
+       plate TOWARD muted's own luminance; the low-contrast muted register is
+       inappropriate over a busy glass plate, so it resolves to the legible dark
+       ink, which clears ~10:1). */
+    :where(.glass-dock) {
+        --glass-tint-source: var(--glass-tint-ink);
+        --glass-tint-strength: var(--glass-tint-strength-aa);
+        --dock-fg-on-aurora: var(--glass-tint-ink);
+        --muted-foreground: var(--foreground);
+    }
+
+    /* The ancestor-querying `@container` block KEPT — it reaches the DESCENDANT
+       nested-glass surfaces inside a dock when a consumer marks `--glass-backdrop:
+       light` on the dock's ancestor (the self-engage above re-points only the dock
+       root's own inheriting tokens; a consumer's explicit ancestor bucket still
+       cascades to nested glass through this block). */
     @container style(--glass-backdrop: light) {
         .glass-dock {
             --glass-tint-source: var(--glass-tint-ink);
@@ -235,6 +359,12 @@
        still-light dock plate), so the anchor is the light surface, matching the rung
        refinement in glass.css. The bucket is the floor; this is the native pick. */
     @supports (color: contrast-color(white)) {
+        /* The SELF-ENGAGED dock refinement (the unconditional self-engage above);
+           progressive enhancement only — the declarative darken is the AA floor. */
+        :where(.glass-dock) {
+            --dock-fg-on-aurora: contrast-color(var(--card));
+            --muted-foreground: contrast-color(var(--card));
+        }
         @container style(--glass-backdrop: light) {
             .glass-dock {
                 --dock-fg-on-aurora: contrast-color(var(--card));