@mkbabb/glass-ui 3.13.0 → 4.0.0

package/src/styles/segmented-tabs.css

@@ -1,20 +1,39 @@
 /* ════════════════════════════════════════════════════════════════════════
-   The unified SegmentedTabs grammar. ONE indicator body across three variants
-   (segmented / pill / underline), gliding on the CONTROL register
-   (`--spring-snappy`) with the volume-preserving travel-squish.
+   The standardized SegmentedTabs grammar (BA.W-TABS). ONE indicator engine,
+   TWO materials, ONE orientation axis.
 
-   Carved out of the SFC `<style scoped>` into a styles/ partial (the drawer.css precedent), `@import`-ed into styles/index.css in cascade order.
-   Every selector is class/attribute-based (no Vue `data-v-*` scope hash), so the
-   rules paint un-scoped — the `.segmented-tabs`-family classes the template emits
-   carry them.
+     · PILL    (DEFAULT) — THE GLASS MATERIAL. The track rides `--glass-bg-quiet`
+                 + a hairline edge; the active indicator is the selected-reads-as-
+                 glass plate (`--glass-bg-floating`, the W-REGISTER-IOS tier — a
+                 glass tint FORWARD of the track, NEVER a saturated hue, never an
+                 opaque `bg-card`). It GLIDES + SQUISHES. Absorbs the retired
+                 `segmented` value (one register — the user kept it by name).
+     · UNDERLINE — THE PAPER MATERIAL. NO plate, NO blur, NO track surface — the
+                 2px `--foreground` ink hairline riding the shared `.paper-ink-mark`
+                 register (W-SURFACE-AXIS mints it; CONSUMED here, never re-minted).
+                 The engine drives the hairline's inline position/width only. It
+                 SLIDES (no squish — a hairline does not deform).
+
+   ORIENTATION is axis-derived (horizontal default · vertical). The vertical
+   indicator tracks the BLOCK axis (the R10-2 horizontal-only-utilities slab class
+   is structurally impossible — the engine keys off a computed `dim`). Vertical
+   underline = the leading-edge ink rail (the math-paper `border-l` read).
+
+   Carved out of the SFC `<style scoped>` into a styles/ partial (the drawer.css
+   precedent), `@import`-ed into styles/index.css in cascade order. Every selector
+   is class/attribute-based (no Vue `data-v-*` scope hash), so the rules paint
+   un-scoped — the `.segmented-tabs`-family classes the template emits carry them.
 
    `--bouncy-track-trim` is the token the track padding, the indicator
    `inset-block`, AND the `anchor()` offset all read so they cannot drift (the W20
    magic-number lock). `--stretch` is the JS-written travel-squish scalar (1 at
    rest); the indicator pairs it reciprocally (stretch X, compress Y →
-   volume-preserving).
+   volume-preserving). The glide + squish read ONE clock — `--tab-indicator-duration`
+   (= `--spring-snappy-duration`, the W-GLASS-CAL calibrated snappy settle, ~0.34s)
+   — so the channels cannot desync and the generic-300ms sub-pixel tail is gone.
    ════════════════════════════════════════════════════════════════════════ */
 
+/* ── The PILL track (the glass material — DEFAULT) ── */
 .segmented-tabs {
     --bouncy-track-trim: 0.1875rem;
     --bouncy-track-radius: 0.4375rem;
@@ -28,10 +47,22 @@
     grid-auto-columns: 1fr;
     padding: var(--bouncy-track-trim);
     border-radius: var(--bouncy-track-radius);
-    /* AX.W54 — the track rides the glass wash tier (the flagship surface),
-       not an opaque --muted-medium plate. */
-    background: var(--glass-bg-wash);
-    backdrop-filter: var(--glass-blur-wash);
+    /* BA.W-TABS — the pill track rides the glass quiet tier (the warm glass
+       material, the no-gray register) + a hairline edge. NOT a `--surface-tint`
+       gray plate (the R10-5 no-gray cut). */
+    background: var(--glass-bg-quiet);
+    backdrop-filter: var(--glass-blur-quiet);
+    -webkit-backdrop-filter: var(--glass-blur-quiet);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 24%, transparent);
+}
+
+/* ── The vertical orientation axis (the block stack) ── */
+.segmented-tabs--vertical {
+    display: inline-flex;
+    flex-direction: column;
+    grid-auto-flow: unset;
+    grid-auto-columns: unset;
+    align-items: stretch;
 }
 
 @media (min-width: 640px) {
@@ -42,13 +73,16 @@
     }
 }
 
-/* ── The shared indicator body ── */
+/* ── The shared indicator body (the PILL plate) ── */
 .segmented-indicator {
     position: absolute;
-    /* AX.W54 — the active indicator rides the glass quiet tier so it reads
-       FORWARD of the wash track (the keyframes-dock-selected model). */
-    background: var(--glass-bg-quiet);
-    backdrop-filter: var(--glass-blur-quiet);
+    /* BA.W-TABS — the active pill indicator rides the glass FLOATING tier (the
+       W-REGISTER-IOS "selected reads as glass" register), reading FORWARD of the
+       quiet-tier track. A glass tint, NEVER a saturated `--foreground` fill or an
+       opaque `bg-card`. */
+    background: var(--glass-bg-floating);
+    backdrop-filter: var(--glass-blur-floating);
+    -webkit-backdrop-filter: var(--glass-blur-floating);
     z-index: 0;
     inset-block: var(--bouncy-track-trim);
     border-radius: var(--bouncy-slider-radius);
@@ -62,46 +96,69 @@
     scale: var(--stretch) calc(1 / var(--stretch));
 }
 
+/* Vertical: the indicator deforms on the BLOCK axis (compress X / stretch Y) and
+   pads on the inline axis instead. */
+.segmented-tabs--vertical .segmented-indicator {
+    inset-block: auto;
+    inset-inline: var(--bouncy-track-trim);
+    scale: calc(1 / var(--stretch)) var(--stretch);
+}
+
 @media (prefers-reduced-motion: no-preference) {
     .segmented-indicator {
-        /* The squish releases on the same clock as the glide (the snappy
-           settle). Under PRM the scale stays 1 (the JS write early-returns). */
-        transition: scale var(--duration-normal) var(--spring-snappy);
+        /* ONE composited transform pair (translate+scale) on ONE calibrated
+           clock — the glide + the squish share `--tab-indicator-duration` so they
+           cannot desync (the R10-2 multi-property-desync class collapsed). */
+        transition: scale var(--tab-indicator-duration) var(--spring-snappy);
     }
 }
 
 /* Fallback (JS-measured) path — the indicator is moved by inline
-   `transform`/`width` writes; animate those alongside the squish scale. */
+   `transform`/`width` writes; animate those alongside the squish scale on the ONE
+   calibrated clock. */
 .segmented-indicator--js {
     transition:
-        transform var(--duration-normal) var(--spring-snappy),
-        width var(--duration-normal) var(--spring-snappy),
-        scale var(--duration-normal) var(--spring-snappy),
+        transform var(--tab-indicator-duration) var(--spring-snappy),
+        width var(--tab-indicator-duration) var(--spring-snappy),
+        height var(--tab-indicator-duration) var(--spring-snappy),
+        scale var(--tab-indicator-duration) var(--spring-snappy),
         opacity var(--duration-fast) ease;
 }
 
 /* Anchor path — the indicator tethers to the active button's `anchor-name`.
    `inset` reads the anchor's edges; the browser interpolates `inset` between
    buttons on selection (the glide), and the JS `--stretch` write deforms it
-   (the squish) on the SAME snappy clock. */
+   (the squish) on the SAME calibrated clock. */
 @supports (position-anchor: --x) {
     .segmented-indicator--anchor {
         position-anchor: --gl-tab-active;
+        /* The four edge longhands tether to the active button's anchor edges (the
+           inline-trimmed band over the full anchor block extent). NO `inset-block:
+           auto` shorthand here — it would reset the block longhands above it to auto
+           and collapse the indicator to height 0 (the live-found clobber). */
         inset-block-start: calc(anchor(top) + 0.1875rem);
         inset-block-end: calc(anchor(bottom) + 0.1875rem);
         inset-inline-start: anchor(left);
         inset-inline-end: anchor(right);
-        inset-block: auto;
         opacity: 1;
     }
+    /* Vertical: the anchor band runs the FULL block extent of the active button
+       (the indicator tracks the column, not the row) with the inline axis trimmed. */
+    .segmented-tabs--vertical .segmented-indicator--anchor {
+        inset-block-start: anchor(top);
+        inset-block-end: anchor(bottom);
+        inset-inline-start: calc(anchor(left) + 0.1875rem);
+        inset-inline-end: calc(anchor(right) + 0.1875rem);
+    }
     @media (prefers-reduced-motion: no-preference) {
         .segmented-indicator--anchor {
             transition:
-                inset var(--duration-normal) var(--spring-snappy),
-                scale var(--duration-normal) var(--spring-snappy);
+                inset var(--tab-indicator-duration) var(--spring-snappy),
+                scale var(--tab-indicator-duration) var(--spring-snappy);
         }
     }
-    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] {
+    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"],
+    .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-selected="true"] {
         anchor-name: --gl-tab-active;
     }
 }
@@ -111,11 +168,20 @@
         inset-block: 0.25rem;
         border-radius: 0.375rem;
     }
+    .segmented-tabs--vertical .segmented-indicator {
+        inset-block: auto;
+        inset-inline: 0.25rem;
+    }
     @supports (position-anchor: --x) {
         .segmented-indicator--anchor {
             inset-block-start: calc(anchor(top) + 0.25rem);
             inset-block-end: calc(anchor(bottom) + 0.25rem);
-            inset-block: auto;
+        }
+        .segmented-tabs--vertical .segmented-indicator--anchor {
+            inset-block-start: anchor(top);
+            inset-block-end: anchor(bottom);
+            inset-inline-start: calc(anchor(left) + 0.25rem);
+            inset-inline-end: calc(anchor(right) + 0.25rem);
         }
     }
 }
@@ -161,33 +227,8 @@
     filter: blur(0.5px);
 }
 
-/* ── Pill variant ── */
-.segmented-tabs--pill {
-    border-radius: var(--radius-pill);
-    background: var(--surface-tint-6);
-    padding: 0.125rem;
-    gap: 0.125rem;
-}
-
-.segmented-tabs--pill .segmented-indicator {
-    border-radius: var(--radius-pill);
-    background: var(--foreground);
-    box-shadow: none;
-    inset-block: 0.125rem;
-}
-
-.segmented-tabs--pill .segmented-tab {
-    border-radius: var(--radius-pill);
-    padding: 0.125rem 0.625rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-.segmented-tabs--pill .segmented-tab[aria-pressed="true"] {
-    color: var(--background);
-}
-
-/* ── Underline variant ── (the panel-nav `role=tablist` strip) */
+/* ── Underline variant ── (THE PAPER MATERIAL — the panel-nav `role=tablist` strip)
+   NO plate, NO blur, NO track surface — only the ink hairline paints. */
 .segmented-tabs--underline {
     display: flex;
     grid-auto-flow: unset;
@@ -195,7 +236,27 @@
     gap: 0.25rem;
     padding: 0;
     background: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    box-shadow: none;
     border-radius: 0;
+    /* BA.W-SURFACE-AXIS scope 8 — the underline indicator COMPOSES the shared
+       `.paper-ink-mark` PAPER ink-hairline register (the 2px --foreground ink mark
+       on a paper surface — no plate, no blur, no glass). The register tokens are
+       declared here on the host; the `::before` pseudo reads them. ≥2 consumers
+       with the math-paper section rail (a HORIZONTAL underline here, a VERTICAL
+       left-edge rail there — the SAME mark register, parameterized weight/color).
+       The register itself lives in glass/surface-axis.css (CONSUMED, never
+       re-minted — a shape gap triumvirates at the minting wave). */
+    --paper-ink-mark-weight: 2px;
+    --paper-ink-mark-color: var(--foreground);
+}
+
+/* Vertical underline = the leading-edge ink rail (the math-paper `border-l` read).
+   The hairline runs the block extent of the active tab on its inline-start edge. */
+.segmented-tabs--underline.segmented-tabs--vertical {
+    flex-direction: column;
+    align-items: stretch;
 }
 
 /* The active tab is the anchor the underline rule tethers to. */
@@ -204,28 +265,44 @@
 }
 
 /* The underline indicator pseudo, position-anchored to the active tab; the
-   browser interpolates `inset` between anchors on selection, and the `scale`
-   reads the same `--stretch` squish the slider does (one indicator grammar). */
+   browser interpolates `inset` between anchors on selection on the ONE calibrated
+   clock, and the `scale` reads the same `--stretch` squish the slider does (one
+   indicator grammar). */
 .segmented-tabs--underline::before {
     content: "";
     position: absolute;
     position-anchor: --gl-tab-active;
-    inset-block-start: calc(anchor(bottom) - 2px);
+    /* BA.W-SURFACE-AXIS scope 8 — the 2px ink mark reads the shared
+       `.paper-ink-mark` register (weight + --foreground ink) the host declares. */
+    inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px));
     inset-inline-start: anchor(left);
     inset-inline-end: anchor(right);
-    block-size: 2px;
-    background: var(--foreground);
+    block-size: var(--paper-ink-mark-weight, 2px);
+    background: var(--paper-ink-mark-color, var(--foreground));
     border-radius: var(--radius-sm);
     transform-origin: center;
     scale: var(--stretch) 1;
 }
 
+/* Vertical underline pseudo — the ink mark is a VERTICAL leading-edge rail (the
+   `border-l` read): a 2px-wide column on the active tab's inline-start edge,
+   running its full block extent. */
+.segmented-tabs--underline.segmented-tabs--vertical::before {
+    inset-block-start: anchor(top);
+    inset-block-end: anchor(bottom);
+    inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px));
+    inset-inline-end: auto;
+    block-size: auto;
+    inline-size: var(--paper-ink-mark-weight, 2px);
+    scale: 1 var(--stretch);
+}
+
 @media (prefers-reduced-motion: no-preference) {
     .segmented-tabs--underline::before {
-        /* control register — the glide + the squish on one snappy clock. */
+        /* control register — the glide + the squish on the ONE calibrated clock. */
         transition:
-            inset var(--duration-normal) var(--spring-snappy),
-            scale var(--duration-normal) var(--spring-snappy);
+            inset var(--tab-indicator-duration) var(--spring-snappy),
+            scale var(--tab-indicator-duration) var(--spring-snappy);
     }
 }
 
@@ -235,7 +312,11 @@
         display: none;
     }
     .segmented-tabs--underline .segmented-tab[aria-selected="true"] {
-        border-bottom: 2px solid var(--foreground);
+        border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
+    }
+    .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] {
+        border-bottom: none;
+        border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground);
     }
 }
 
@@ -243,29 +324,17 @@
     padding: 0.375rem 0.75rem;
     font-size: inherit;
     border-radius: 0.25rem;
-    transition: color var(--duration-normal) var(--ease-standard);
-}
-
-.segmented-tabs--underline .segmented-tab:hover {
-    color: var(--surface-tint-70);
+    /* The tab-text colour cross-fade rides the fast generic clock (the §6 doctrine
+       — a colour shift is a bezier ease, never a spring), matching the pill tab
+       buttons. The INDICATOR glide is the only channel on the calibrated spring
+       clock. */
+    transition: color var(--duration-fast) ease;
 }
 
-/* ── Overflow variants ──
- * `--scroll`/`--auto` swap the inline-grid for a flex row with intrinsic-width
- * tracks so tab text never clips; the container scrolls horizontally.
- */
-.segmented-tabs--scroll,
-.segmented-tabs--auto {
-    display: flex;
-    grid-auto-flow: unset;
-    grid-auto-columns: unset;
-    overflow-x: auto;
-    overflow-y: hidden;
-    width: 100%;
+.segmented-tabs--underline.segmented-tabs--vertical .segmented-tab {
+    text-align: start;
 }
 
-.segmented-tabs--scroll {
-    --mask-fade-width: 0.5rem;
-    padding-inline-end: calc(0.125rem + var(--mask-fade-width));
-    scroll-padding-inline: var(--mask-fade-width);
+.segmented-tabs--underline .segmented-tab:hover {
+    color: color-mix(in oklab, var(--foreground) 70%, transparent);
 }

package/src/styles/select.css

@@ -0,0 +1,50 @@
+/*
+ * select.css — the Select content collision-bound, pre-compiled (BA.W-EMISSION).
+ *
+ * THE DEFECT (BA-VJS-A2-WO1 / valuejs-fold A-2): SelectContent.vue authored its
+ * collision-bound as a Tailwind ARBITRARY-BRACKET utility
+ *   [max-height:var(--reka-popper-available-height,60dvh)]
+ * which is correct in SOURCE but compiles ONLY into a `dist/*.js` render-function
+ * chunk no consumer content-scan reaches (and the P9 emitComponentUtilities
+ * safelist rejects fully-arbitrary bracket tokens by construction). So in every
+ * consumer the bound NEVER painted — `getComputedStyle(content).maxHeight === "none"`
+ * — and a 16-item dropdown rendered 745px tall, overflowing a 900px viewport by
+ * 125px (the value.js U-DROPDOWN capture, the binding RED evidence).
+ *
+ * THE FIX: move the bound to a PRECOMPILED rule that ships in `dist/glass-ui.css`
+ * regardless of consumer JIT reach — it is a plain attribute-selector rule, not a
+ * Tailwind utility, so it always emits. The cap is the kf donor's default
+ * `min(24rem, 60dvh)` (kf design-idioms.css `--easing-dropdown-max-h`; the U8
+ * bounded-scroll reference), TIGHTENED by reka's measured
+ * `--reka-popper-available-height` on a short viewport via the inner `min()`.
+ * `overflow-y: auto` (already on the content via the CVA base) gives the inner
+ * scroll. The behaviour is identical to the authored class — it now SHIPS.
+ *
+ * --select-content-max-h is the ONE retint knob (a consumer widens/narrows the cap
+ * by overriding it on any ancestor). The default folds reka's available-height in:
+ * when reka reports a height (popper measured), the bound is the MIN of that and
+ * the 24rem/60dvh ceiling, so the panel never exceeds the viewport AND never grows
+ * past the comfortable ceiling.
+ */
+
+:root {
+    /* The comfortable ceiling — the kf donor default. */
+    --select-content-max-h: min(24rem, 60dvh);
+}
+
+[data-slot="select-content"] {
+    /* The collision-bound: the comfortable ceiling, tightened by reka's measured
+       available height on a short viewport. `--reka-popper-available-height` is
+       written by reka-ui's popper-positioner; on a tall viewport it exceeds the
+       ceiling (so the ceiling wins) and on a short one it clamps the panel to the
+       space below the trigger (so the panel bottoms inside the viewport). When reka
+       has not yet measured, the fallback is the ceiling alone. */
+    max-height: min(
+        var(--select-content-max-h),
+        var(--reka-popper-available-height, var(--select-content-max-h))
+    );
+    /* The inner-scroll affordance ships with the bound (the CVA base also sets
+       overflow-y-auto; restated here so the bound + scroll travel together as one
+       precompiled contract). */
+    overflow-y: auto;
+}

package/src/styles/theme/bridges.css

@@ -211,6 +211,14 @@
     --color-gold-dark: var(--gold-dark);
     --color-gold-deep: var(--gold-deep);
 
+    /* BA.W-ATLAS-RECONCILE C-3 — the silver structure metal (gold's mirror; the
+       InstrumentChassis `variant="structure"` register). The @theme namespace var
+       a `text-silver`/`bg-silver` utility resolves through. */
+    --color-silver: var(--silver);
+    --color-silver-light: var(--silver-light);
+    --color-silver-dark: var(--silver-dark);
+    --color-silver-deep: var(--silver-deep);
+
     --color-rainbow-red:    var(--rainbow-red);
     --color-rainbow-orange: var(--rainbow-orange);
     --color-rainbow-yellow: var(--rainbow-yellow);
@@ -333,5 +341,7 @@
     --transition-duration-panel: var(--duration-panel);
     --transition-duration-xl: var(--duration-xl);
     --transition-duration-xxl: var(--duration-xxl);
-    --transition-duration-sparkle: var(--duration-sparkle);
+    /* BA.W-GLASS-CAL — `--transition-duration-sparkle` bridge DELETED with the
+       `--duration-sparkle` token (the disco retirement); no `duration-sparkle`
+       utility consumer. */
 }

package/src/styles/tokens/color-radius.css

@@ -23,28 +23,55 @@
            5 → 6  : 10 L  (muted text → strong-muted text, secondary register)
 
        Semantic aliases re-point into the scale — no back-compat shims.
-       ═══════════════════════════════════════════════ */
-    --neutral-0: hsl(48 12% 98%);   /* L 98 — page surface */
-    --neutral-1: hsl(48 10% 95%);   /* L 95 — soft field bg */
-    --neutral-2: hsl(48  9% 90%);   /* L 90 — chip / tab-inactive bg */
-    --neutral-3: hsl(48  8% 82%);   /* L 82 — hover / highlight bg */
-    --neutral-4: hsl(48  7% 70%);   /* L 70 — subtle border */
-    --neutral-5: hsl(48  6% 40%);   /* L 40 — muted text (WCAG AA: 5.23:1 vs L98 page / 4.91:1 vs L95 muted) */
+
+       BA.W-NO-GRAY — THE WARM-CHROMA FLOOR (R10-5 "No gray."). The ladder was
+       SPECIFIED warm (hue 48) but RESOLVED achromatic — at 6-10% sat across
+       L40-95 the painted OKLab chroma landed C 0.0055-0.0155 (below the ~0.020
+       perceptual gray floor) AND at hsl-48 the OKLab hue mapped to ~95° (a
+       yellow-green), NOT the warm-amber the --foreground ink carries (hsl-24 →
+       OKLab H≈56°). The fix is CHROMA-ONLY at constant L: warm the hue toward
+       the foreground register (hsl 28-34 → OKLab H 62-72°, warm MATERIAL not a
+       cast) AND lift the saturation off the gray floor. The L is unchanged (the
+       contrast contract — AA re-ratified, ±0.01 of HEAD). The mid/low-L rungs
+       clear the strong floor C≥0.020; the L90 chip is gamut-bound (it cannot
+       carry 0.020 at L90 without a visible cast — the triumvirate "tinted not
+       warm" trigger), so it lifts to a materially-warm C≈0.013 (~2.4× HEAD).
+       Machine-locked by proof:no-gray + tests-visual/no-gray.spec.ts. */
+    --neutral-0: hsl(40 30% 98%);   /* L 98 — page surface (warm-cream, KEEP-NEUTRAL surface) */
+    --neutral-1: hsl(38 26% 95%);   /* L 95 — soft field bg */
+    --neutral-2: hsl(34 28% 90%);   /* L 90 — chip / tab-inactive bg (warm, gamut-bound C≈0.013) */
+    --neutral-3: hsl(33 30% 82%);   /* L 82 — hover / highlight bg (warm, C≈0.025) */
+    --neutral-4: hsl(32 26% 70%);   /* L 70 — subtle border (warm, C≈0.036) */
+    --neutral-5: hsl(30 22% 40%);   /* L 40 — muted text (warm, C≈0.043; WCAG AA: 5.21:1 vs page / 4.90:1 vs muted) */
     /* W7-α' (AK-FD1) — strong-muted text rung. One principled ladder step
        (10 L darker, the 5→6 cadence above) past muted text toward
        --foreground (L10). Sits at the 1/3 point of the L40→L10 muted→primary
        gap: legible secondary text that reads less-faint than muted but not as
        assertive as primary. By-COLOUR per the canon (a neutral step, not an
-       alpha mute); hue held at 48, sat nudged 6→7 toward --foreground's 10.
-       WCAG AA: 7.79:1 vs L98 page / 7.31:1 vs L95 muted (cf. neutral-5's
-       5.23:1) — comfortably above the 4.5:1 body floor. */
-    --neutral-6: hsl(48  7% 30%);   /* L 30 — strong-muted text (secondary register) */
+       alpha mute). BA.W-NO-GRAY — re-saturated onto the warm identity in
+       lockstep with the ladder (hsl 28 24% — OKLab H 62°, C≈0.038, the warm
+       register; L held at 30). WCAG AA: 7.88:1 vs L98 page / 7.43:1 vs L95
+       muted (cf. neutral-5's 5.21:1) — comfortably above the 4.5:1 body floor. */
+    --neutral-6: hsl(28 24% 30%);   /* L 30 — strong-muted text (secondary register, warm) */
 
     --background: var(--neutral-0);
     --foreground: hsl(24 10% 10%);
-    --card: var(--neutral-0);
+    /* BA.W-NO-GRAY L1 — the warm-bias glass PLATE. --card was `var(--neutral-0)`
+       (the near-achromatic L98 page, OKLab C 0.0017) — so every glass plate
+       (Card/Button/Toast/Popover/Dialog/Sheet, all --card-derived) composited a
+       flat gray slab over a flat backdrop (the G1/G8 defect, the user's "no gray
+       ... for cards, buttons"). Glass is TRANSMISSIVE — over a flat page there
+       is nothing behind to modulate, so the plate is its own near-neutral cream.
+       --card DECOUPLES from the page to a warm-cream value carrying a real OKLab
+       chroma (hsl 36 48% 97% → OKLab C 0.0062 at warm H 75°, L kept ~98 so the
+       page-card SURFACE read is byte-stable), so the plate reads WARM over ANY
+       backdrop — the plate floor (composited C ≥ 0.0035, ~2× HEAD) the gamut
+       allows a near-white translucent surface. The DARK --card is W-DARK-MATERIAL's
+       lifted hsl(24 8% 16%) (NOT re-warmed here — the dark register is its work).
+       Bounded: the cream family, never a tinted cast (the triumvirate bar). */
+    --card: hsl(36 48% 97%);
     --card-foreground: var(--foreground);
-    --popover: var(--neutral-0);
+    --popover: var(--card);
     --popover-foreground: var(--foreground);
 
     /* R0G-5 (AO.W4) — warm-neutral public-data panel surface. One warmth step