@mkbabb/glass-ui 2.1.0 → 3.1.0

package/src/styles/dock.css

@@ -22,6 +22,29 @@
         --dock-motion-resize: var(--duration-normal) var(--spring-snappy);
     }
 
+    /* Shared four-state contract — the focus-visible ring + disabled paint are
+       identical across every dock control, so they are expressed ONCE here as a
+       comma group over the control family rather than copied per rule-set. The
+       group keeps full class+pseudo specificity (NOT `:where()`, which would
+       zero the class and let a per-control :hover box-shadow override the focus
+       ring). Per-control transition extensions (the box-shadow fade on
+       focus-visible) stay with their own selectors below where they differ. */
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-icon-button:disabled,
+    .dock-tab-button:disabled,
+    .dock-select-trigger:disabled,
+    .dock-dropdown-trigger:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
     .glass-dock {
         --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
         /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
@@ -33,6 +56,11 @@
         --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);
+        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
+           mints the stacking context once so a portaled popover over `--z-dock`
+           stays above the dock during a hover scale (the load-bearing
+           stacking-context guarantee). Covers every dock scale site. */
+        scale: 1;
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -68,6 +96,7 @@
         --dock-trigger-padding-inline: var(--dock-density-compact-trigger-padding-inline, 0.4375rem);
         --dock-tab-padding-block: var(--dock-density-compact-tab-padding-block, 0.3125rem);
         --dock-tab-padding-inline: var(--dock-density-compact-tab-padding-inline, 0.625rem);
+        --dock-tab-h: 32px;
     }
 
     /* Comfortable density — the GlassDock default. Sits between compact
@@ -82,6 +111,7 @@
         --dock-trigger-padding-inline: var(--dock-density-comfortable-trigger-padding-inline, 0.5rem);
         --dock-tab-padding-block: var(--dock-density-comfortable-tab-padding-block, 0.4375rem);
         --dock-tab-padding-inline: var(--dock-density-comfortable-tab-padding-inline, 0.75rem);
+        --dock-tab-h: 38px;
     }
 
     .glass-dock[data-density="spacious"] {
@@ -94,6 +124,7 @@
         --dock-trigger-padding-inline: var(--dock-density-spacious-trigger-padding-inline, 0.625rem);
         --dock-tab-padding-block: var(--dock-density-spacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-spacious-tab-padding-inline, 0.875rem);
+        --dock-tab-h: 44px;
     }
 
     /* Audacious density — typography-forward chrome where the dock reads as
@@ -111,41 +142,13 @@
         --dock-tab-padding-block: var(--dock-density-audacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-audacious-tab-padding-inline, 1.5rem);
         --dock-tab-min-height: var(--dock-density-audacious-tab-min-height, 3.5rem);
+        --dock-tab-h: var(--dock-density-audacious-tab-min-height, 3.5rem);
     }
 
-    /* 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). */
+    /* Density-audacious mobile carve — at narrow viewports the audacious-dock
+       label glyphs compress so the chrome doesn't overflow its host
+       (≤14px at <480, 15px at 480–719). Consumer dock label spans bind
+       `font-size: var(--dock-label-size)` (typography.css `.dock-label`). */
     @media (max-width: 479px) {
         .glass-dock[data-density="audacious"] {
             --dock-label-size: 14px;
@@ -188,22 +191,11 @@
             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. */
+    /* Vertical rails grow-to-fit + clamp, no scroll: descendants wrap to
+       multiple rows (opt-in via `dock-wrap`) or clamp via
+       `--dock-max-block-size`; the cap fails visibly rather than masking
+       overflow as a scroll affordance. No edge-fade mask — a rail that never
+       scrolls has nothing to feather. */
     .glass-dock.vertical {
         display: inline-flex;
         flex-direction: column;
@@ -321,7 +313,7 @@
         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));
+        scale: var(--dock-collapsed-hover-scale);
     }
 
     /* J.W5.C — held-state substrate response.
@@ -344,6 +336,15 @@
             box-shadow var(--duration-fast) var(--ease-standard);
     }
 
+    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
+       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
+       read natively (no consumer JS). Idempotent with `[data-held]` above (same
+       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
+    .glass-dock:has([data-state="open"]) {
+        background: var(--glass-bg-floating, var(--glass-bg-resting));
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+    }
+
     .glass-dock:where(.fixed) {
         z-index: var(--z-dock);
     }
@@ -382,23 +383,11 @@
         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. */
+    /* Horizontal dock content grows visibly when the active layer's natural
+       width exceeds the content area (grow-to-fit; consumers needing wrap opt
+       into `dock-wrap`). No edge-fade mask — content never clips or scrolls,
+       so a feather has nothing to feather and only bleeds a stray ramp onto
+       the edge controls. */
     .glass-dock.expanded:not(.dock-wrap) > .dock-layers {
         overflow-x: visible;
     }
@@ -650,11 +639,30 @@
         min-width: 0;
     }
 
+    /* AP.W3 — axis-aware layer pane. The stack + `useLayerTransition` are
+       axis-aware, but the pane was hardcoded to a no-wrap ROW with
+       `width: max-content` — forcing a `vertical` group's content onto one
+       horizontal line that could not grow down (the vertical-overflow fight).
+       A vertical group stacks in a column, stretches, wraps, and block-sizes
+       to the height the stack animates. Horizontal byte-identical. */
+    .dock-layer-group.vertical .dock-layer-item-host {
+        flex-direction: column;
+        align-items: stretch;
+        white-space: normal;
+    }
+
+    .dock-layer-group.vertical .dock-layer-item-host.is-active {
+        width: auto;
+        height: max-content;
+    }
+
     .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);
@@ -667,7 +675,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -681,11 +689,11 @@
     .dock-icon-button:hover:not(:disabled) {
         background: var(--muted);
         color: var(--btn-hover-color, var(--foreground));
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-icon-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-icon-button:focus:not(:focus-visible) {
@@ -693,22 +701,17 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .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),
+            scale 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
@@ -718,7 +721,7 @@
     .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));
+        scale: var(--dock-active-scale);
         border: var(--dock-active-border);
         box-shadow: var(--dock-active-shadow);
     }
@@ -822,10 +825,12 @@
         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),
-            transform var(--dock-motion-fast);
+            scale var(--dock-motion-fast);
     }
 
     .dock-tab-button:hover:not(:disabled) {
@@ -834,22 +839,15 @@
     }
 
     .dock-tab-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        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;
-    }
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top. */
 
     .dock-tab-button:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
         background: var(--surface-tint-10);
@@ -958,6 +956,8 @@
         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:
@@ -973,7 +973,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -984,12 +984,12 @@
     }
 
     .dock-dropdown-trigger:hover:not(:disabled) {
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-select-trigger:focus:not(:focus-visible),
@@ -998,24 +998,18 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .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),
+            scale 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);
@@ -1027,11 +1021,14 @@
         height: var(--dock-trigger-icon-size, 0.75rem);
         flex-shrink: 0;
         opacity: 0.5;
-        transition: transform var(--dock-motion-fast);
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
+           for family consistency (not a stacking-context hazard: child glyph). */
+        rotate: 0deg;
+        transition: rotate var(--dock-motion-fast);
     }
 
     .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
-        transform: rotate(180deg);
+        rotate: 180deg;
     }
 
     @media (min-width: 640px) {
@@ -1072,12 +1069,15 @@
        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. */
+       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare
+       `.glass-dock`: the always-present density setter (0,2,0) shadowed a
+       bare (0,1,0) coarse floor, pinning the touch box at 40px. The
+       presence-selector (0,2,0) wins by source order, lifting
+       `--dock-control-size` to 44px — read by both the button box and the
+       dock width-math, so the slot reserves 44px (no overflow). Fine pointer
+       byte-identical. Proof: design/W1.2-motion-carve-and-dock.md §B.2. */
     @media (pointer: coarse) {
-        .glass-dock {
+        .glass-dock[data-density] {
             --dock-control-size: var(--dock-touch-target, 2.75rem);
             --size-icon-btn: var(--dock-touch-target, 2.75rem);
         }

package/src/styles/drawer.css

@@ -46,7 +46,7 @@
     border-bottom: 0;
     border-start-start-radius: var(--radius-panel);
     border-start-end-radius: var(--radius-panel);
-    background-color: hsl(var(--background));
+    background-color: var(--background);
     box-shadow: var(--shadow-2xl);
 }
 
@@ -98,7 +98,7 @@
     width: var(--drawer-handle-w);
     height: var(--drawer-handle-h);
     border-radius: var(--radius-pill);
-    background-color: hsl(var(--drawer-handle-color));
+    background-color: var(--drawer-handle-color);
     opacity: var(--drawer-handle-opacity);
     transition: opacity var(--duration-fast) var(--ease-out),
         width var(--duration-fast) var(--ease-out);

package/src/styles/glass.css

@@ -101,13 +101,30 @@
        Interactive cards live in <Card> (which owns its own hover composition)
        or in components that explicitly opt into a hover variant. */
     .glass-card {
+        /* Focus-elevation rungs (AQ.W3 §W3.1a) — identity = at-rest paint; the
+           `:has(:focus-visible)` rule redefines them (one source, shared with
+           the fallback). */
+        --card-focus-shadow: var(--shadow-card);
+        --card-focus-border: var(--glass-border-quiet);
         position: relative;
         background: var(--glass-bg-quiet);
         backdrop-filter: var(--glass-blur-quiet);
-        border: 1px solid var(--glass-border-quiet);
+        border: 1px solid var(--card-focus-border);
         border-radius: var(--radius-card);
-        box-shadow: var(--shadow-card);
+        box-shadow: var(--card-focus-shadow);
         contain: layout style;
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+
+    /* Elevate one rung on descendant KEYBOARD focus (`:focus-visible`, not
+       pointer). Scoped to `.glass-card`. `:has()` Baseline Widely; the
+       `@supports not selector(:has(*))` class fallback (below) ships anyway
+       (focus-elevation is UX-critical — child-state-styling MANDATORY clause). */
+    .glass-card:has(:focus-visible) {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
     }
 
     /* ── Glassmorphic circular icon button ── */
@@ -115,6 +132,10 @@
     .glass-btn {
         @apply flex items-center justify-center cursor-pointer;
 
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `scale: 1` at rest
+           mints the stacking context once so the hover/press scale below does
+           not flicker it into being (the z-index/anchor hazard). */
+        scale: 1;
         width: var(--size-icon-btn);
         height: var(--size-icon-btn);
         border-radius: var(--radius-pill);
@@ -126,18 +147,18 @@
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-normal) var(--spring-snappy);
+            scale var(--duration-normal) var(--spring-snappy);
     }
 
     .glass-btn:hover:not(:disabled) {
         background: color-mix(in srgb, var(--background) 85%, transparent);
         border-color: var(--surface-tint-22);
         color: var(--foreground);
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 
     .glass-btn:active:not(:disabled) {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
 
     .glass-btn:focus-visible {
@@ -210,12 +231,60 @@
         color: var(--surface-tint-35);
     }
 
-    .input-pill:focus {
+    /* AQ.W4 §W4.6 — keyboard-focus ring only. Was bare `:focus` (showed the
+       accent ring on a mouse click); `:focus-visible` matches the
+       `.focus-ring` / `.glass-btn` / dock-control discipline. Ordered BEFORE
+       the `:user-invalid` rungs so an invalid focused field shows destructive,
+       not accent (the `:user-invalid:focus-visible` rule below wins by order +
+       specificity). `:focus-visible` Baseline Widely — no fallback. */
+    .input-pill:focus-visible {
         outline: none;
         border-color: var(--color-accent-opaque, var(--ring));
         box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
     }
 
+    /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
+       The forgiving `:where(:user-invalid, .user-invalid-fallback)` group is
+       ONE rule covering native + the `useUserInvalidAria` fallback class (css
+       §3.2; NOT a live+dead alias — the class is the SOLE fallback for engines
+       without `:user-invalid`). The destructive/success tints reuse the
+       semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
+       asterisk — the border/bg shift is the supplementary cue, never the sole
+       one. `:user-valid` is intentionally subtle (border only, no bg fill) so
+       a long valid form is not a wall of green. */
+    .input-pill:where(:user-invalid, .user-invalid-fallback) {
+        border-color: var(--destructive);
+        background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
+    }
+    .input-pill:where(:user-valid, .user-valid-fallback) {
+        border-color: var(--success);
+    }
+    /* Invalid + keyboard-focused → destructive ring (overrides the accent
+       `:focus-visible` ring above by order + the extra `:user-invalid`
+       compound). */
+    .input-pill:where(:user-invalid, .user-invalid-fallback):focus-visible {
+        border-color: var(--destructive);
+        box-shadow: 0 0 0 var(--focus-ring-width)
+            color-mix(in srgb, var(--destructive) 35%, transparent);
+    }
+
+    /* AQ.W4 §W4.3 — `field-sizing: content` autosize (opt-in via the Textarea
+       `autosize` prop → `[data-autosize]`). The textarea grows vertically with
+       content between a 3-line floor and a token-driven ceiling, then scrolls.
+       `field-sizing` Baseline Newly (Chromium 2024) — on a non-supporting
+       engine the declaration is ignored and the element keeps the
+       `min/max-block-size` bounds + standard scroll (no JS, no `@supports`,
+       no grid-mirror polyfill). The fixed-size path (default, `min-h-20`) is
+       the unchanged no-op fallback. */
+    .input-pill[data-autosize] {
+        field-sizing: content;
+        width: 100%;
+        min-block-size: 3lh;
+        max-block-size: var(--textarea-autosize-max, 12lh);
+        resize: vertical;
+    }
+
     .input-pill:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -275,3 +344,17 @@
         }
     }
 }
+
+/* ── :has() focus-elevation fallback (AQ.W3 §W3.1a) ──────────────────────
+   SOLE fallback for engines without `:has()`. `.is-focus-within` is toggled
+   by a ≤6-LOC focusin/focusout guard in `Card.vue` that runs ONLY when
+   `!CSS.supports('selector(:has(*))')` (modern engines run zero JS). The
+   class redefines the SAME `--card-focus-*` rungs as the `:has()` rule, so the
+   override values have one source. NOT a live+dead alias — `:has()` is the
+   enhancement, this the documented degradation path. */
+@supports not selector(:has(*)) {
+    .glass-card.is-focus-within {
+        --card-focus-shadow: var(--shadow-md);
+        --card-focus-border: var(--glass-border-floating);
+    }
+}

package/src/styles/index.css

@@ -63,7 +63,14 @@
  *                              pop, dialog-scale, dropdown, tab-fade).
  *  10. animations.css        — @keyframes for components consumed via
  *                              `animation:` properties in (9) and component
- *                              <style> blocks.
+ *                              <style> blocks. Includes the §TOP-LAYER
+ *                              `@starting-style` entry/exit grammar (AQ.W5).
+ *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
+ *                              + [data-scroll-reveal]); the `@supports`-gated
+ *                              primary over the JS-composable fallback (AQ.W5).
+ *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
+ *                              recipe + `--vt-*` axes (AQ.W5; the
+ *                              `useViewTransition` substrate's CSS half).
  *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
  *                              (press cluster; K W6 + Q.W3 Lane E),
  *                              rainbow-vivid + rainbow-pastel. Consumes earlier
@@ -95,6 +102,8 @@
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
+@import "./scroll-driven.css";
+@import "./view-transition.css";
 @import "./utilities.css";
 @import "./instrument-chassis.css";
 @import "./instrument-rail.css";

package/src/styles/instrument-chassis.css

@@ -292,7 +292,34 @@
     @media (max-width: 720px) {
         .instrument-chassis .instrument-dial {
             grid-template-columns: 1fr;
-            grid-template-rows: auto auto auto;
+            /* R0G-2 (AO.W3) — reserve the dial's FINAL box from frame 0. The
+               desktop axis is already CLS-clean (the 3-column `align-items:
+               center` grid reserves row height from intrinsic min + the AP-Pγ
+               transform-only idle recentre). The mobile reflow previously
+               collapsed to `grid-template-rows: auto auto auto`, which reserves
+               NO height — the meter row, divider, and readout column sit at
+               zero height until the consumer's meter <canvas> + readout
+               numbers hydrate, then grow collapsed → final and push everything
+               below down ~326-331px → mobile-390 CLS 0.32-0.38.
+
+               The fix pins the dial box from frame 0: the meter row carries the
+               dominant reserve (`minmax(0, 1fr)` — it expands to fill the
+               envelope the `min-height` establishes), divider + readout stay
+               intrinsic (`auto`). The load-bearing reserve is `min-height` —
+               it fixes the dial's outer box so the rows distribute WITHIN a
+               reserved envelope rather than growing it post-hydration.
+
+               Both knobs are CSS custom properties (token-first). The
+               `--instrument-dial-min-height-mobile` canonical rung lands in
+               tokens.css at AO.W4; until then the inline `24rem` fallback IS
+               the default and carries the contract. A consumer whose meter is
+               a different size retunes the token — a tuning knob, not a
+               workaround for a missing reserve. */
+            grid-template-rows:
+                var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr))
+                auto
+                auto;
+            min-height: var(--instrument-dial-min-height-mobile, 24rem);
             gap: var(--instrument-dial-gap-mobile, 1.5rem);
         }