@mkbabb/glass-ui 3.12.0 → 3.13.0

package/dist/styles/typography.css

@@ -36,8 +36,9 @@
    neutral (no CLS). */
 @font-face {
     font-family: "Plus Jakarta Sans Fallback";
-    src: local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"),
-         local("-apple-system");
+    src:
+        local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"),
+        local("-apple-system");
     ascent-override: 92.3784%;
     descent-override: 19.7572%;
     size-adjust: 112.3639%;
@@ -77,8 +78,9 @@
    size-adjust ≈ 1.0 makes the swap geometrically transparent. */
 @font-face {
     font-family: "Fira Code Fallback";
-    src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"),
-         local("Consolas"), local("Courier New"), local("Roboto Mono Regular");
+    src:
+        local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"),
+        local("Courier New"), local("Roboto Mono Regular");
     ascent-override: 99.0161%;
     descent-override: 32.2052%;
     size-adjust: 99.9837%;
@@ -96,27 +98,67 @@
        references `"Fira Code"` first then the fallback chain. */
 
     /* Scale tokens */
-    --type-admin-label: 0.625rem;  /* 10px */
-    --type-micro:       0.6875rem; /* 11px */
-    --type-caption:     0.75rem;   /* 12px */
-    --type-small:       0.875rem;  /* 14px */
-    --type-body:        1rem;      /* 16px */
-    --type-prose:       1.125rem;  /* 18px */
-    --type-subheading:  1.272rem;  /* 20.4px — √φ */
-    --type-heading:     1.618rem;  /* 25.9px — φ */
-    --type-title:       2.058rem;  /* 32.9px — φ^(3/2) */
-    --type-display-1:   clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2 */
-    --type-display-2:   clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem);  /* φ^(5/2) */
-    --type-display-3:   clamp(2.618rem, 2rem + 3vw, 4.236rem);     /* φ^3 */
-    --type-display-4:   clamp(3.33rem, 2.5rem + 4vw, 5.382rem);    /* φ^(7/2) */
-    --type-display-5:   clamp(4.236rem, 3.5rem + 6vw, 6.854rem);   /* φ^4 */
+    --type-admin-label: 0.625rem; /* 10px — fixed sub-control micro (NOT fluid) */
+    --type-micro: 0.6875rem; /* 11px — fixed sub-control micro (NOT fluid) */
+    /* BODY/CONTROL register (AY.W-SCALE1 — the desktop-fluid half of corpus #4):
+       a GENTLE clamp() viewport base so the control/body register grows ~1-2 steps
+       on a wide display (the 27" "font too small" the user flagged) WITHOUT a
+       media-query staircase. The <min> of every clamp is the rung's prior fixed rem
+       — byte-identical at narrow/mobile (no shipped-narrow reflow; the coarse 1.5×
+       --ui-scale still lifts the comfort axis ON TOP). The vw slope is the body
+       register's GENTLE slope (not the φ-display ladder's aggressive vw) — the
+       "non-contrived" bar. The vw fluid term lives HERE (the typographic base),
+       exactly ONCE; the --ui-scale comfort scalar multiplies it exactly ONCE LATER
+       (tokens.css --control-text/-sm) — NO double-vw under coarse. The φ-identity
+       rungs below (--type-subheading/-heading/-title + the --type-display-* ladder)
+       are EXCLUDED — a hero/title is a typographic identity, not a control. */
+    --type-caption: clamp(
+        0.75rem,
+        0.71rem + 0.21vw,
+        1rem
+    ); /* 12px floor — --control-text-sm source */
+    --type-small: clamp(
+        0.875rem,
+        0.8rem + 0.25vw,
+        1.25rem
+    ); /* 14px floor — --control-text source (the workhorse) */
+    --type-body: clamp(
+        1rem,
+        0.92rem + 0.27vw,
+        1.375rem
+    ); /* 16px floor — global body cascade */
+    --type-prose: clamp(
+        1.125rem,
+        1.04rem + 0.28vw,
+        1.5rem
+    ); /* 18px floor — long-form prose */
+    --type-subheading: 1.272rem; /* 20.4px — √φ */
+    --type-heading: 1.618rem; /* 25.9px — φ */
+    --type-title: 2.058rem; /* 32.9px — φ^(3/2) */
+    --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2 */
+    --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); /* φ^(5/2) */
+    --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); /* φ^3 */
+    --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); /* φ^(7/2) */
+    --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); /* φ^4 */
     /* Audacious display tier (v1.0.3). Extends the φ-ladder three rungs
        beyond display-5 for poster-type consumers (speedtest hero,
        dashboard pane titles when the consumer wants the number to win).
        Same vw-axis as display-1..5 — consumer-agnostic. */
-    --type-display-mega:       clamp(5.382rem, 4rem + 9vw, 11.089rem);   /* φ^(9/2) — peak 177px */
-    --type-display-hero:       clamp(6.854rem, 4.5rem + 12vw, 17.942rem); /* φ^5    — peak 287px */
-    --type-display-audacious:  clamp(8.728rem, 5rem + 16vw, 22rem);      /* φ^(11/2) — peak 352px (fast.com peg) */
+    --type-display-mega: clamp(
+        5.382rem,
+        4rem + 9vw,
+        11.089rem
+    ); /* φ^(9/2) — peak 177px */
+    --type-display-hero: clamp(
+        6.854rem,
+        4.5rem + 12vw,
+        17.942rem
+    ); /* φ^5    — peak 287px */
+    --type-display-audacious: clamp(
+        8.728rem,
+        5rem + 16vw,
+        22rem
+    ); /* φ^(11/2) — peak 352px (fast.com peg) */
 
     /* Line heights & letter spacing live at tokens.css §0 as the canonical
        --type-leading-* / --type-tracking-* rungs. theme.css bridges them
@@ -448,6 +490,18 @@ body {
         letter-spacing: var(--type-tracking-caps);
     }
 
+    /* Section-accent eyebrow (AZ.W-SUFFUSE D3-7 / D1-8). ONE coherent
+       section-accent register — the colored mono eyebrow reads as an
+       intentional system, not a four-hue rainbow. The accent reads a single
+       `--section-label-accent` knob (default `--section-color-7`, the violet
+       brand anchor) so a page tints its whole eyebrow column at ONE chroma
+       from one override, NOT a different hue per section. This is the
+       one-color-event rule at PAGE scope: the eyebrow is the page's ONE
+       accent identity. The label/value/body ink below stays neutral. */
+    .section-label--tinted {
+        color: var(--section-label-accent, var(--section-color-7));
+    }
+
     /* Font-feature helpers */
     .tabular-nums {
         font-variant-numeric: tabular-nums;

package/dist/styles/utilities/a11y-overrides.css

@@ -0,0 +1,140 @@
+/* utilities/a11y-overrides.css
+   The accessibility + capability tail — @media (prefers-reduced-motion: reduce) (+ the .no-transition class), @media (forced-colors: active) focus/silhouette, @media (pointer: coarse) touch-target floor, and the @utility touch-hit-area. LAST in cascade.
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+/* ── Reduced motion: nuanced — preserve opacity, remove spatial motion ── */
+@media (prefers-reduced-motion: reduce) {
+    *:not([data-allow-motion]) {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+    }
+
+    /* Keep opacity transitions (safe, non-spatial) but shorten */
+    *:not([data-allow-motion]) {
+        transition-duration: 0.1s !important;
+        transition-property: opacity, color, background-color, border-color, box-shadow !important;
+    }
+}
+
+/* ── No-transition class (for theme switches, etc.) ── */
+html.no-transition,
+html.no-transition *,
+html.no-transition *::before,
+html.no-transition *::after {
+    transition-duration: 0s !important;
+}
+
+/* ── Forced-colors focus + silhouette rung (AQ.W2 §5 · generalized AX.W36) ────
+   Windows High Contrast / forced-colors mode STRIPS `box-shadow` — so the
+   glass focus rings (box-shadow + `outline: none`) vanish, leaving keyboard
+   users with no visible focus. Restore a real `outline` keyed to the system
+   `Highlight` color (outline survives forced-colors; box-shadow does not). The
+   box-shadow ring stays the primary in normal mode (it carries the glass
+   aesthetic) — these two are mutually exclusive by media query, NOT a parallel
+   path.
+
+   AX.W36 — the focus-survival selector set is GENERALIZED to the broader
+   interactive surface: the dock CONTROLS (`.dock-icon-button` / `.dock-tab-button`
+   / `.dock-select-trigger` / `.dock-dropdown-trigger`) + the pill button base
+   (`.btn-pill`) all carry a box-shadow focus ring (dock.css / utilities.css) that
+   vanishes under WHC just like the original five. This is the SAME `Highlight`
+   outline rung extended to cover them — ONE block, ONE path (the glass-language
+   structure-survival skin for the tier panes / StatusDot / floating surfaces lives
+   co-located with the ladder it skins, in glass.css).
+
+   `forced-color-adjust: none` is deliberately NOT used — glass-ui's glassmorphic
+   chrome is decorative and yields to the user's forced palette (css forced-colors
+   guidance). Baseline Widely Available; this IS the fallback mechanism (it only
+   activates under forced-colors), so no nested guard. */
+@media (forced-colors: active) {
+    .focus-ring:focus-visible,
+    .glass-btn:focus-visible,
+    .interactive-item:focus-visible,
+    .btn-pill:focus-visible,
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible,
+    .input-pill:focus,
+    .input-pill:focus-visible {
+        outline: 2px solid Highlight;
+        outline-offset: 2px;
+    }
+
+    /* Structural edges borne ONLY by box-shadow (the hairline catch-light + the
+       dock SHELL pill edge) also vanish — restore a real border so the silhouette
+       survives. CanvasText is the system text/border color. The `.glass-dock`
+       shell is OUT of the glass-material group BY DESIGN (it hand-rolls a parallel
+       surface — see glass.css), so it keeps its WHC edge HERE; the five-rung ladder
+       + `.glass-card` get their WHC border from the co-located glass-language skin
+       in glass.css (one source per surface family, no double-declaration). */
+    .hairline-accent,
+    .glass-dock {
+        border: 1px solid CanvasText;
+    }
+}
+
+/* ── Coarse-pointer touch-target floor (AQ.W3 §7) ───────────────────────────
+   General-surface companion to the dock-scoped R0G-6 floor (dock.css). On
+   coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
+   to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
+   `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
+   byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
+   attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
+   mobile Select) triggers.
+   `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
+@media (pointer: coarse) {
+    [data-size="icon"],
+    .expandable-container__trigger,
+    .segmented-tabs__trigger {
+        min-block-size: var(--touch-target, 2.75rem);
+        min-inline-size: var(--touch-target, 2.75rem);
+    }
+}
+
+/* ── @utility touch-hit-area (AY.W-SCALE2) ──────────────────────────────────
+   The hit-target is DECOUPLED from the visual size: a 16px Checkbox stays
+   16px visually, but on a COARSE pointer it acquires a ≥44px pointer-receptive
+   hit-rect via a centred `::before` overlay (WCAG 2.5.5). The six sub-44 form
+   atoms (Switch / Checkbox / RadioGroupItem / Slider-thumb / TagsInput-delete /
+   MultiSelect-remove-X) compose this ONE shared utility — DRY, one source, ≥2
+   consumers — instead of per-atom `min-h-[44px]` balloons.
+
+   DIVERGENCE-WITH-RATIONALE from the timeline precedent (ContinuousMarkers.vue
+   `.continuous-dot::before`, SegmentedTimeline `.boundary-dot::before`): the
+   timeline uses a FIXED symmetric `inset: calc((--touch-target - dot-size)/-2)`
+   — exact ONLY because its dot is a KNOWN fixed square. Our atoms are NOT square
+   and NOT a known size (a 24×44 Switch, a 16px Checkbox, a ~7px-wide Slider cap),
+   so a single symmetric inset would under/over-shoot one axis. This utility uses
+   the size-AGNOSTIC centred-min-size form: `min-width/min-height: var(--touch-
+   target)` + `top/left:50%` + `translate:-50% -50%` floors BOTH dimensions at
+   44px for ANY visual size, the generalization the timeline's known-square inset
+   cannot do.
+
+   COARSE-ONLY (the fine-pointer-byte-identical invariant, STRICTER than the
+   timeline whose `::before` exists at fine pointer too): the DEFAULT (fine)
+   path declares NO overlay box — `::before` has no `content`, so its min-width/
+   height resolve to `auto`/0 and the composited rect equals the bare visual box
+   (the AX.W51 fine-pointer-identical invariant). Only the nested `@media
+   (pointer: coarse)` block mints the `content:""` + the 44px overlay.
+
+   NO new floor token (D4): the overlay reads `var(--touch-target)`. */
+@utility touch-hit-area {
+    position: relative;
+
+    @media (pointer: coarse) {
+        &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            translate: -50% -50%;
+            min-width: var(--touch-target, 2.75rem);
+            min-height: var(--touch-target, 2.75rem);
+            /* Inherit the host's pointer-events so a tap within the halo
+               registers on the atom; the overlay itself is decorative (no
+               paint), so it never occludes the host's own interaction. */
+            pointer-events: auto;
+        }
+    }
+}

package/dist/styles/utilities/animate.css

@@ -0,0 +1,26 @@
+/* utilities/animate.css
+   The popover/dropdown shared @utility animation pair — popover-animate + slide-in-from-side (the data-state / data-side entry choreography for popover-class containers). FIRST (before the @layer components block, matching source order).
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+/* ── Popover/dropdown shared animation ──
+   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
+   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
+   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
+   for direction-keyed entries. */
+@utility popover-animate {
+    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
+           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+}
+
+/* ── Slide-in entry by side data-attr ──
+   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
+   reka-ui's `data-side` (`top|right|bottom|left`). The animation
+   direction inverts each side so panels enter from outside the
+   anchor's edge. */
+@utility slide-in-from-side {
+    @apply data-[side=bottom]:slide-in-from-top-2
+           data-[side=left]:slide-in-from-right-2
+           data-[side=right]:slide-in-from-left-2
+           data-[side=top]:slide-in-from-bottom-2;
+}

package/dist/styles/utilities/base.css

@@ -0,0 +1,365 @@
+/* utilities/base.css
+   The @layer components base half — section-description, labeled-field, popover-content, scrollbar, focus-ring, hairline-accent, interactive-item, tap-squish, status-dot, depth-text, preserve-3d, ios input fix, scroll-fade masks, deferred-section, scroll-timeline host, shimmer text, keyboard key.
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+@layer components {
+    /* ── Section description (V.W3.T7) ──────────────────────────────
+       Canonical recipe for the `<Section>` primitive's description
+       paragraph. Composes the body type + muted-foreground color in
+       one declaration so consumers don't fight twMerge's
+       typography-class collapse. */
+    .section-description {
+        font-size: var(--type-body);
+        color: var(--muted-foreground);
+        line-height: 1.5;
+        text-wrap: pretty; /* AQ.W3 §W3.3 — prose-register orphan/river fix */
+    }
+
+    /* ── Labeled-field label (V.W3.T5 / A5 §5.5) ────────────────────
+       Canonical recipe for `<LabeledField>`'s tooltip-wrapped label
+       layer. Four sibling wrappers (LabeledInput, LabeledSelect,
+       LabeledSlider, LabeledSwitch) used to repeat this literal across
+       their templates; promoting it to a utility lets the parent SFC
+       own one canonical declaration. */
+    .labeled-field-label {
+        font-family: var(--font-display);
+        font-size: var(--type-body);
+        /* AQ.W4 §W3.1c — the label color reads the group-state variable so the
+           `:has(:user-invalid)` rule below reddens it (one source of the
+           override value, shared with the `.has-error` fallback class). */
+        color: var(--field-label-color, var(--muted-foreground));
+        cursor: help;
+    }
+
+    /* AQ.W4 §W3.1c — LabeledField group error highlight. When any descendant
+       control is `:user-invalid`, the whole field group marks (the label
+       reddens via `--field-label-color`, the error region reveals). Scoped to
+       `.labeled-field` — never `body`, never a bare element. `:has()` Baseline
+       Widely; the `.has-error` / `.has-valid` fallback classes (toggled by the
+       `useUserInvalidAria` fallback path) are the SOLE degradation for engines
+       without `:has()`/`:user-invalid` (not a live+dead alias). */
+    .labeled-field {
+        --field-label-color: var(--muted-foreground);
+    }
+    .labeled-field:has(:user-invalid),
+    .labeled-field.has-error {
+        --field-label-color: var(--destructive);
+    }
+
+    /* The error region: hidden at rest, revealed once a descendant is
+       `:user-invalid` (or the `.has-error` fallback class is set). Non-color
+       reinforcement for the validity tint — the error TEXT is the primary
+       cue, the border/bg shift the supplement (forms guide: never color
+       alone). */
+    .labeled-field-error {
+        display: none;
+        font-size: var(--type-small);
+        color: var(--destructive);
+        margin-block-start: 0.25rem;
+    }
+    .labeled-field:has(:user-invalid) .labeled-field-error,
+    .labeled-field.has-error .labeled-field-error {
+        display: block;
+    }
+    /* Hide the error text once the field reads valid (the user corrected it). */
+    .labeled-field:has(:user-valid) .labeled-field-error,
+    .labeled-field.has-valid .labeled-field-error {
+        display: none;
+    }
+
+    /* ── Popover-content recipe (V.W3.T3 / A5 §3.2) ─────────────────
+       Canonical recipe for floating-tier portal containers
+       (PopoverContent, DropdownMenuContent, SelectContent, etc.).
+       Covers radius + outline + popover-foreground; consumers compose
+       this with `.glass-floating` (bg + blur + border + shadow), with
+       `.popover-animate` (data-state animation), and with the per-host
+       z-rung. The floating-tier shadow comes from
+       `--glass-shadow-floating` via `.glass-floating`, replacing the
+       `shadow-md`/`shadow-lg` literals that bypassed the canonical
+       cascade. */
+    .popover-content {
+        border-radius: var(--radius-panel);
+        color: var(--popover-foreground);
+        outline: none;
+    }
+
+    /* ── Scrollbar ── */
+    .scrollbar-hidden {
+        scrollbar-width: none;
+    }
+    .scrollbar-hidden::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* AQ.W3 §W3.4 — tokenized thin scrollbar. Standard `scrollbar-width` +
+       `scrollbar-color` (Baseline Widely, Chromium 121+) is the primary path,
+       reading `--scrollbar-{thumb,track}` (auto-dark via `--muted-foreground`).
+       The legacy `::-webkit-scrollbar` family is the SOLE fallback for older
+       WebKit/Blink, gated on `@supports not (scrollbar-color: auto)` so modern
+       engines never paint it — not a live+dead alias. */
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    }
+    @supports not (scrollbar-color: auto) {
+        .scrollbar-thin::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        .scrollbar-thin::-webkit-scrollbar-track {
+            background: var(--scrollbar-track);
+        }
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-thumb);
+            border-radius: var(--radius-pill);
+        }
+    }
+
+    /* ── Focus ring — auto-activates on :focus-visible ── */
+    .focus-ring:focus-visible {
+        outline: none;
+        border-radius: var(--radius-pill);
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    /* ── Hairline-accent — 0.5px catch-light + under-shadow pair ──
+       Composes the canonical `--border-hairline` token (tokens.css §
+       Glass-decorative). Adopt at any surface that wants the canonical
+       2-stop hairline (dock surfaces, instrument-chassis). Auto-mirrors
+       in dark via the .dark token override. */
+    .hairline-accent {
+        box-shadow: var(--border-hairline);
+    }
+
+    /* ── Interactive item (hover bg + focus ring + active scale) ── */
+    .interactive-item {
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        border-radius: var(--radius-lg);
+        user-select: none;
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--ease-standard);
+    }
+    .interactive-item:hover {
+        background-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    }
+    .interactive-item:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+    }
+    .interactive-item:active {
+        /* AW.W31.a — fold the residual literal press scale onto the canonical
+           `--scale-press*` cohort (the prior `0.98` was the sole per-atom press
+           literal surviving the W2/W3/W25 sweeps). `--scale-press-sm` (0.97) is
+           the soft press rung the button + slider recipes consume — ONE press
+           vocabulary, no per-atom literal. The 0.98→0.97 delta is sub-perceptual. */
+        scale: var(--scale-press-sm);
+    }
+    .interactive-item:disabled,
+    .interactive-item[data-disabled] {
+        pointer-events: none;
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
+    /* ── Tap-squish — universal press-state choreography ──
+       AL-W10 SLIM (X6 §M-1 + Y7 §3 + DESIGN.md §L3). I compose this
+       class onto every interactive surface that wants the iOS tap-
+       squish idiom; the press scales to `--scale-press` (0.96, the
+       canonical iOS `.regular` control rung). I keep this as a single
+       canonical rung — NOT a 3-rung ladder. The one outlier I leave
+       alone is the button `0.97` (`--scale-press-btn`), which consumes
+       its own slightly-softer token directly. The dock control now
+       tracks the canonical `--scale-press` (0.96) too (AT.W7-dock-b
+       press canon — the prior deeper `0.92` was retired to ONE source).
+
+       AX.W52 §6 doctrine — the `scale` register is reconciled onto
+       `--spring-smooth` (was `--spring-snappy`), the ONE button/interactive
+       scale register the §6 easing doctrine records and the gate asserts
+       across `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. At
+       ζ=0.86 `--spring-smooth` settles a press crisply with a sub-perceptual
+       (~0.5%) peak — no visible bounce — so press still reads alive while
+       hover reads as a smooth glide on the SAME spring.
+
+       The transition lists the SURFACE legs (bg/border/box-shadow/color/
+       opacity) on the bezier `--ease-standard` alongside the spring `scale`
+       leg — the SAME coherent set `.btn-pill` carries. This is load-bearing:
+       `.tap-squish` and `.btn-pill` are co-composed on the button base and
+       this `transition` shorthand would otherwise CLOBBER `.btn-pill`'s
+       surface legs down to a scale-only animation (the cascade bug that left
+       every button transitioning ONLY `scale` — the live-readback RED). With
+       both classes carrying the full set, whichever wins the surface cross-
+       fade survives. On a non-button press surface the extra legs are inert
+       unless that prop changes, in which case a smooth cross-fade is the
+       desired interactive read anyway.
+
+       Under PRM I retire the press transform entirely and lean on the
+       consumer's own hover/active bg-tint cascade to acknowledge the
+       press. */
+    .tap-squish {
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth);
+        transform-origin: center center;
+    }
+    .tap-squish:active {
+        scale: var(--scale-press);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .tap-squish:active {
+            /* Reset to the longhand identity (not `transform: none`) so the
+               press scale is neutralized under PRM. */
+            scale: 1;
+        }
+    }
+
+    /* ── Status dot indicator ── */
+    .status-dot {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: var(--radius-pill);
+        flex-shrink: 0;
+        transition:
+            color var(--duration-fast) var(--ease-standard),
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    /* ── Depth text (layered offset stamp) ──
+       AW.W26 — composes the `--text-shadow-depth` @theme identity token (the
+       hard offset stack + soft ambient tail) instead of a hand-rolled multi-stop
+       literal. The token holds the stack inside the `@theme` defs (gate 4) and
+       re-tints under `.dark` via `--shadow`/`--shadow-color` BY CONSTRUCTION. */
+    .depth-text {
+        --depth-color-primary: var(--primary);
+
+        color: var(--depth-color-primary);
+        text-shadow: var(--text-shadow-depth);
+    }
+
+    /* ── 3D preserve ── */
+    .preserve-3d {
+        transform-style: preserve-3d;
+    }
+
+    /* ── iOS input font-size fix (prevent auto-zoom) ── */
+    .ios input,
+    .ios select,
+    .ios textarea,
+    .ios [contenteditable] {
+        font-size: max(1rem, 1em);
+    }
+
+    /* ── Scroll fade masks ──
+       Single-source `mask-image` (AV.W16 TW7): the `-webkit-` companion is
+       dropped — Tailwind v4's Lightning CSS build pipeline auto-prefixes per
+       the browserslist targets, mirroring the glass ladder's single-source
+       `backdrop-filter` (glass.css). NOTE: this is the consistency cut; it
+       does NOT conflict with W15's `@supports`-gated older-Safari mask
+       fallback (that fallback is the distinct case where the companion is
+       genuinely needed and W15 gates it). */
+    .scroll-fade-mask {
+        mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    .scroll-fade-top {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
+    }
+
+    .scroll-fade-bottom {
+        mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    .scroll-fade-y {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
+       `content-visibility: auto` skips layout/paint/style of an offscreen
+       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
+       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
+       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
+       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
+       — the trap this closes. Estimate is token-driven (`--deferred-section-
+       size`, default 30rem). `.deferred-section--cached` →
+       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
+       re-show than `display:none`). Baseline Widely; unsupporting engines render
+       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
+       { skipped } at the render-skip boundary — pair with `useRAFLoop`
+       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
+       e => e.skipped ? loop.pause() : loop.resume())`. */
+    .deferred-section {
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+    .deferred-section--cached {
+        content-visibility: hidden;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+
+    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
+       Canonical scroll-overflow host that emits the `--card-scroll` named
+       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
+       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
+       inside it that carries `overflow-y: auto`).
+
+       `contain: layout style paint` isolates the named timeline so child
+       animations respond to THIS host's scroll only — not to portal-
+       triggered layout shifts in ancestor containers (the load-bearing
+       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
+       called out and the AI.W1 spec §1.2 ratified as canon).
+
+       Disambiguated from `.scroll-fade-*` (mask-image fade gradient at
+       the container's leading/trailing edge) — `.card-scroll-host` does
+       NOT paint any visual; it only emits the timeline. */
+    .card-scroll-host {
+        contain: layout style paint;
+        scroll-timeline: --card-scroll block;
+    }
+
+    /* ── Shimmer text effects ──
+       The text-fill + background-clip composition is load-bearing visual
+       (the gold gradient itself); only the `animation:` line is wrapped in
+       the PRM no-preference bracket so PRM users see the static gradient
+       without the slide animation. */
+    .gold-shimmer {
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .gold-shimmer {
+            animation: gold-shimmer-slide var(--duration-shimmer) linear infinite;
+        }
+    }
+
+    /* ── Keyboard key ── */
+    .kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding: 0 0.375rem;
+        font-family: var(--font-mono);
+        font-size: var(--type-micro);
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+        line-height: 1;
+    }
+
+}