@motir/design-system 0.1.2 → 0.2.0

package/theme.css

@@ -222,6 +222,35 @@
   --height-input: 44px;
   --height-control: 36px; /* single-line / square small control */
 
+  /* The space the collapsed nav rail puts AROUND its control: its `px-2`
+     gutters (8px a side), its 1px right border, and the 3px of slack the
+     shipped rail has always carried. Not the rail's width — the width is this
+     PLUS one `--height-control` square, composed at the point of use in
+     `components/ui/AppLayout.tsx` so the sum re-resolves under whatever
+     [data-style] is in scope rather than freezing the value `:root` happened
+     to have.
+
+     Calibrated so the DEFAULT style is unchanged: 36px + 20px is the 56px the
+     rail has always been. A denser style now gets a narrower rail and a roomier
+     one a wider rail, which is the density axis working rather than a constant
+     ignoring it. Deliberately NOT overridden per style — a style moves the
+     CONTROL, and the rail follows it (MOTIR-4232). */
+  --width-rail-chrome: 20px;
+
+  /* The inset a FLOATING rail is held away from the frame on all four sides, so
+     the shell canvas reads around it (MOTIR-4253). ZERO here, and that is the
+     point: the rail has a shared right EDGE in ten of the eleven styles, and an
+     edge is flush by definition. Only a style that turns the rail into a panel
+     with a shadow moves it.
+
+     It is composed into `AppLayout`'s two grid columns rather than applied to
+     the rail alone, because the rail FILLS its cell — a margin would shrink the
+     rail inside an unchanged column and take the collapsed rail's content box
+     below one `--height-control` square, which is exactly the invariant
+     MOTIR-4232 established. At `0px` both sums compile to the numbers every
+     other style already had. */
+  --spacing-rail-inset: 0px;
+
   /* ── Interaction ────────────────────────────────────────────────── */
   --transition-duration: 150ms;
   --transition-fast: 100ms;
@@ -349,7 +378,8 @@
 /* ═══════════════════════════════════════════════════════════════════════
    TIER 2 — Named-style overrides ([data-style], Axis 2)
    `warm-editorial` is the base (the Tier-0 defaults above — Notion-sober
-   rectangles), so it needs no override block.
+   rectangles). Its explicit block repeats that shape/feel contract so a nested
+   base-style scope shadows a foreign active style instead of inheriting it.
    `soft-playful` adopts Figma's pill buttons + larger radius + softer shadows
    + roomier spacing + a gentler motion feel. Each later style (Swiss,
    Neo-Brutalism, Glassmorphism, …) adds its own `[data-style='<id>']` block
@@ -357,6 +387,70 @@
    motion / type) — NEVER a colour token (that is the data-palette axis).
    ═══════════════════════════════════════════════════════════════════════ */
 
+[data-style='warm-editorial'] {
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+  --radius-btn: 8px;
+  --radius-card: 12px;
+  --radius-input: 8px;
+  --radius-modal: 12px;
+  --radius-badge: 9999px;
+  --radius-control: 6px;
+  --radius-kbd: 4px;
+  --shadow-flat: none;
+  --shadow-subtle: 0 1px 2px rgba(15, 15, 15, 0.04);
+  --shadow-card: 0 4px 12px rgba(15, 15, 15, 0.08);
+  --shadow-elevated: 0 8px 24px rgba(15, 15, 15, 0.12);
+  --shadow-modal: 0 16px 48px -8px rgba(15, 15, 15, 0.16);
+  --shadow-hero-mockup: 0 24px 48px -8px rgba(15, 15, 15, 0.2);
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 20px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 40px;
+  --spacing-section: 64px;
+  --spacing-section-lg: 96px;
+  --spacing-hero: 120px;
+  --spacing-btn-x: 18px;
+  --spacing-btn-y: 10px;
+  --spacing-btn-x-sm: 12px;
+  --spacing-btn-y-sm: 8px;
+  --spacing-input-x: 16px;
+  --spacing-input-y: 12px;
+  --spacing-card-padding: 24px;
+  --spacing-control-x: 10px;
+  --spacing-control-y: 6px;
+  --spacing-icon-btn: 4px;
+  --spacing-chip-x: 10px;
+  --spacing-chip-y: 2px;
+  --spacing-kbd-x: 6px;
+  --spacing-kbd-y: 2px;
+  --spacing-tooltip-x: 8px;
+  --spacing-tooltip-y: 4px;
+  /* The rail keeps its shared edge under this style, so it is flush — the
+     default's mirror of the Tier-0 value, not an override (MOTIR-4253). */
+  --spacing-rail-inset: 0px;
+  --height-btn-sm: 32px;
+  --height-btn-md: 40px;
+  --height-btn-lg: 48px;
+  --height-input: 44px;
+  --height-control: 36px;
+  --transition-duration: 150ms;
+  --transition-fast: 100ms;
+  --transition-slow: 250ms;
+  --hover-scale: 1;
+  --active-scale: 0.98;
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+}
+
 [data-style='soft-playful'] {
   /* Figma's pill geometry */
   --radius-btn: 9999px; /* pill */
@@ -548,80 +642,132 @@
    they are NOT the bare [data-style] token block and never carry a hue token
    there — the disjoint-axis token-block test still passes. ───────────────── */
 
+/* ═══════════════════════════════════════════════════════════════════════
+   ⚠️ A STYLE CANVAS IS PAINTED ON `body` AND ON `[data-app-shell]`, FROM ONE
+   RULE (MOTIR-4230 for 3D / Immersive, MOTIR-4234 for the rest)
+   ═══════════════════════════════════════════════════════════════════════
+   Six of the eleven registered styles express part of their identity as a
+   `body`-level CANVAS: glassmorphism's vibrant wash, cybercore's tech grid,
+   aurora's drifting ribbons, 3D / Immersive's atmosphere, neumorphism's
+   moulded field and retrofuturism's synthwave sky. `body` alone covers the
+   anonymous surfaces — auth, the public site, `/tokens` — where nothing is
+   stacked over the canvas. On a SIGNED-IN route it covers nothing at all: the
+   shell root (`components/ui/AppLayout.tsx`, and the platform-admin
+   `AdminShell`) is a `h-dvh overflow-hidden` box carrying `bg-(--el-page-bg)`,
+   an OPAQUE fill over the whole viewport. The canvas was painted and then
+   hidden, so a user who picked one of these styles got the surface treatment
+   on individual panels and a flat frame around them — and glass is the sharpest
+   case, because the thing its frosted rail was blurring was that flat fill
+   rather than the wash the blur exists to refract.
+
+   So each of those rules names TWO members, `body` and the `data-app-shell`
+   hook both shells carry, and the shell repaints the SAME layers over its own
+   page fill. ONE RULE, TWO SELECTORS, DELIBERATELY — a second rule restating a
+   gradient stack is a copy that drifts on the first tune, and the whole defect
+   was the canvas and the frame disagreeing about what the canvas is. Where the
+   body rule fixes `background-attachment`, both members inherit it from the one
+   declaration, which is what makes the two pixel-identical rather than merely
+   similar: each resolves against the viewport instead of against its own box.
+
+   A style that paints NO canvas of its own (`warm-editorial`, `soft-playful`,
+   `swiss-minimal-flat`, `neo-brutalism`, `hand-drawn-indie`) is untouched by
+   all of this and the shell keeps the `--el-page-bg` fill it has always had:
+   the hook is a hook, not a style.
+
+   `tests/theme/styleShellCanvas.test.ts` pins the pairing for EVERY style that
+   paints a canvas — derived from the stylesheet, not from a list — and
+   `tests/e2e/shell-immersive-atmosphere.spec.ts` is the rendered half.
+   ═══════════════════════════════════════════════════════════════════════ */
+
 /* The canvas: the palette's page bg + three soft corner washes. The hue sources
    are the `--el-*` accent roles (NOT Tier-0 `--color-*`), so the washes re-tint
    with the active palette — the `data-palette` axis (7.3.48 / MOTIR-1065)
    overrides `--el-*`, never `--color-*`, so reading `--el-*` here is what keeps
    the glass orthogonal to the palette. The gradient is what the frosted panels
    blur — without it, the blur is invisible. */
-[data-style='glassmorphism'] body {
-  background-image:
-    radial-gradient(
-      85% 80% at 6% -12%,
-      color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
-      transparent 62%
-    ),
-    radial-gradient(
-      80% 75% at 110% 4%,
-      color-mix(in srgb, var(--el-highlight) var(--glass-wash), transparent),
-      transparent 60%
-    ),
-    radial-gradient(
-      95% 90% at 50% 120%,
-      color-mix(in srgb, var(--el-link) var(--glass-wash), transparent),
-      transparent 62%
-    ),
-    radial-gradient(
-      60% 60% at 85% 95%,
-      color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
-      transparent 60%
-    );
-  background-attachment: fixed;
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-image:
+      radial-gradient(
+        85% 80% at 6% -12%,
+        color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
+        transparent 62%
+      ),
+      radial-gradient(
+        80% 75% at 110% 4%,
+        color-mix(in srgb, var(--el-highlight) var(--glass-wash), transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        95% 90% at 50% 120%,
+        color-mix(in srgb, var(--el-link) var(--glass-wash), transparent),
+        transparent 62%
+      ),
+      radial-gradient(
+        60% 60% at 85% 95%,
+        color-mix(in srgb, var(--el-accent) var(--glass-wash), transparent),
+        transparent 60%
+      );
+    background-attachment: fixed;
+  }
 }
 
 /* Frosted container surfaces — cards & popovers float as translucent sheets. */
-[data-style='glassmorphism'] [data-surface='card'],
-[data-style='glassmorphism'] [data-surface='popover'] {
-  /* The translucent fill lets the vibrant canvas through; the linear sheen is
-     the light raking across the glass (top-left → fading), the inset RIM is the
-     lit glass edge, and the soft drop makes the sheet FLOAT. White light is
-     palette-agnostic; the colour still comes only from the palette-derived
-     fill/border, so the axes stay disjoint. */
-  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-surface-alpha), transparent);
-  background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
-  border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
-  box-shadow:
-    inset 0 1px 0 0 var(--glass-rim),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
-    0 8px 32px -8px rgba(15, 15, 15, 0.18);
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='card'],
+  [data-surface='popover'] {
+    /* The translucent fill lets the vibrant canvas through; the linear sheen is
+       the light raking across the glass (top-left → fading), the inset RIM is the
+       lit glass edge, and the soft drop makes the sheet FLOAT. White light is
+       palette-agnostic; the colour still comes only from the palette-derived
+       fill/border, so the axes stay disjoint. */
+    background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-surface-alpha), transparent);
+    background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
+    border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
+    box-shadow:
+      inset 0 1px 0 0 var(--glass-rim),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
+      0 8px 32px -8px rgba(15, 15, 15, 0.18);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  }
 }
 
 /* Modal panel — a touch more opaque + a stronger blur (body-text AA + lift). */
-[data-style='glassmorphism'] [data-surface='modal'] {
-  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-modal-alpha), transparent);
-  background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
-  border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
-  box-shadow:
-    inset 0 1px 0 0 var(--glass-rim),
-    0 28px 70px -16px rgba(15, 15, 15, 0.34);
-  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
-  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='modal'] {
+    background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-modal-alpha), transparent);
+    background-image: linear-gradient(150deg, var(--glass-sheen), transparent 55%);
+    border-color: color-mix(in srgb, var(--el-border) var(--glass-border-alpha), transparent);
+    box-shadow:
+      inset 0 1px 0 0 var(--glass-rim),
+      0 28px 70px -16px rgba(15, 15, 15, 0.34);
+    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
+  }
 }
 
 /* The sidebar rail — frosted chrome over the canvas. */
-[data-style='glassmorphism'] [data-surface='sidebar'] {
-  background-color: color-mix(in srgb, var(--el-sidebar-bg) var(--glass-chrome-alpha), transparent);
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='sidebar'] {
+    background-color: color-mix(
+      in srgb,
+      var(--el-sidebar-bg) var(--glass-chrome-alpha),
+      transparent
+    );
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  }
 }
 
 /* Form controls — a translucent fill so inputs read as glass too. */
-[data-style='glassmorphism'] [data-surface='input'] {
-  background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-input-alpha), transparent);
-  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='input'] {
+    background-color: color-mix(in srgb, var(--el-page-bg) var(--glass-input-alpha), transparent);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+  }
 }
 
 /* The MODAL / command-palette BACKDROP — the most important glass surface, since
@@ -629,10 +775,12 @@
    light, palette-derived veil + a page BLUR, so the whole page behind frosts and
    the (also-frosted) modal panel refracts it — the proper glass-modal look.
    Overrides the primitives' `bg-black/40` utility. Palette-derived (no hue). */
-[data-style='glassmorphism'] [data-surface='overlay'] {
-  background-color: color-mix(in srgb, var(--el-page-bg) 24%, transparent);
-  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturate));
-  backdrop-filter: blur(8px) saturate(var(--glass-saturate));
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='overlay'] {
+    background-color: color-mix(in srgb, var(--el-page-bg) 24%, transparent);
+    -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturate));
+    backdrop-filter: blur(8px) saturate(var(--glass-saturate));
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -711,8 +859,10 @@
    descendant rule, not a bare token block, so the disjoint-axis test (which
    inspects token blocks) does not treat it as one — and it sets no colour
    anyway, so the two axes stay disjoint regardless. */
-[data-style='neo-brutalism'] .border {
-  border-width: 2px;
+@scope ([data-style='neo-brutalism']) to ([data-style]) {
+  .border {
+    border-width: 2px;
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -795,12 +945,15 @@
    so it adapts to the active palette and sits BEHIND content (text never
    renders on it), keeping AA intact. Dark-first — on the dark theme this reads
    as a Tron grid over the near-black canvas. */
-[data-style='cybercore-y2k'] body {
-  background-image:
-    linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px),
-    linear-gradient(90deg, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px);
-  background-size: 32px 32px;
-  background-position: center top;
+@scope ([data-style='cybercore-y2k']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-image:
+      linear-gradient(color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px),
+      linear-gradient(90deg, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px);
+    background-size: 32px 32px;
+    background-position: center top;
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -897,31 +1050,34 @@
    `--el-*`, never `--color-*`, which is what keeps the aurora orthogonal to the
    palette. background-size > 100% gives the gradient room to drift; the whole
    field eases back and forth over `--aurora-drift-duration`. */
-[data-style='aurora'] body {
-  background-image:
-    radial-gradient(
-      58% 75% at 12% 0%,
-      color-mix(in srgb, var(--el-accent) var(--aurora-wash), transparent),
-      transparent 60%
-    ),
-    radial-gradient(
-      54% 70% at 92% 8%,
-      color-mix(in srgb, var(--el-highlight) var(--aurora-wash), transparent),
-      transparent 58%
-    ),
-    radial-gradient(
-      68% 82% at 62% 104%,
-      color-mix(in srgb, var(--el-link) var(--aurora-wash), transparent),
-      transparent 62%
-    ),
-    radial-gradient(
-      48% 64% at 34% 58%,
-      color-mix(in srgb, var(--el-info) var(--aurora-wash-soft), transparent),
-      transparent 55%
-    );
-  background-size: 180% 180%;
-  background-attachment: fixed;
-  animation: aurora-drift var(--aurora-drift-duration) ease-in-out infinite alternate;
+@scope ([data-style='aurora']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-image:
+      radial-gradient(
+        58% 75% at 12% 0%,
+        color-mix(in srgb, var(--el-accent) var(--aurora-wash), transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        54% 70% at 92% 8%,
+        color-mix(in srgb, var(--el-highlight) var(--aurora-wash), transparent),
+        transparent 58%
+      ),
+      radial-gradient(
+        68% 82% at 62% 104%,
+        color-mix(in srgb, var(--el-link) var(--aurora-wash), transparent),
+        transparent 62%
+      ),
+      radial-gradient(
+        48% 64% at 34% 58%,
+        color-mix(in srgb, var(--el-info) var(--aurora-wash-soft), transparent),
+        transparent 55%
+      );
+    background-size: 180% 180%;
+    background-attachment: fixed;
+    animation: aurora-drift var(--aurora-drift-duration) ease-in-out infinite alternate;
+  }
 }
 
 @keyframes aurora-drift {
@@ -942,10 +1098,16 @@
 }
 
 /* Respect a reduced-motion preference — the aurora settles to a still gradient
-   (the identity holds; only the drift stops). */
+   (the identity holds; only the drift stops). BOTH members, for the reason the
+   canvas has two: the shell now carries the same `animation` declaration, so an
+   arm that stilled only `body` would leave a reduced-motion user with a drifting
+   frame around a still page — the defect inverted rather than fixed. */
 @media (prefers-reduced-motion: reduce) {
-  [data-style='aurora'] body {
-    animation: none;
+  @scope ([data-style='aurora']) to ([data-style]) {
+    body,
+    [data-app-shell] {
+      animation: none;
+    }
   }
 }
 
@@ -955,43 +1117,49 @@
    rather than lifted by a hard shadow. The sheen sits on background-image over
    the opaque background-color, so it never pulls the surface far enough from its
    base tone to threaten contrast. */
-[data-style='aurora'] [data-surface='card'],
-[data-style='aurora'] [data-surface='popover'] {
-  background-color: var(--el-surface);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
-    transparent 42%
-  );
-  box-shadow:
-    var(--shadow-card),
-    0 0 26px -8px color-mix(in srgb, var(--el-accent) var(--aurora-glow), transparent),
-    0 0 40px -14px color-mix(in srgb, var(--el-link) var(--aurora-glow), transparent);
+@scope ([data-style='aurora']) to ([data-style]) {
+  [data-surface='card'],
+  [data-surface='popover'] {
+    background-color: var(--el-surface);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
+      transparent 42%
+    );
+    box-shadow:
+      var(--shadow-card),
+      0 0 26px -8px color-mix(in srgb, var(--el-accent) var(--aurora-glow), transparent),
+      0 0 40px -14px color-mix(in srgb, var(--el-link) var(--aurora-glow), transparent);
+  }
 }
 
 /* Modal panel — opaque, with a deeper glow so the dialog separates cleanly from
    the drifting canvas behind it (and body text stays on the solid surface). */
-[data-style='aurora'] [data-surface='modal'] {
-  background-color: var(--el-surface);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
-    transparent 38%
-  );
-  box-shadow:
-    var(--shadow-modal),
-    0 0 60px -16px color-mix(in srgb, var(--el-accent) var(--aurora-glow-strong), transparent);
+@scope ([data-style='aurora']) to ([data-style]) {
+  [data-surface='modal'] {
+    background-color: var(--el-surface);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--el-highlight) var(--aurora-sheen), transparent),
+      transparent 38%
+    );
+    box-shadow:
+      var(--shadow-modal),
+      0 0 60px -16px color-mix(in srgb, var(--el-accent) var(--aurora-glow-strong), transparent);
+  }
 }
 
 /* The sidebar rail — opaque chrome carrying the faint aurora sheen so it reads as
    part of the lit surface family, not a flat slab. */
-[data-style='aurora'] [data-surface='sidebar'] {
-  background-color: var(--el-sidebar-bg);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--el-accent) var(--aurora-sheen), transparent),
-    transparent 30%
-  );
+@scope ([data-style='aurora']) to ([data-style]) {
+  [data-surface='sidebar'] {
+    background-color: var(--el-sidebar-bg);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--el-accent) var(--aurora-sheen), transparent),
+      transparent 30%
+    );
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -1067,6 +1235,13 @@
   --height-control: 40px;
   --height-input: 46px;
 
+  /* The rail FLOATS in this style, so it is held off the frame on all four
+     sides and the immersive atmosphere reads around it (MOTIR-4253). The base
+     layer is `0px`, so this is the only override — every other style's rail
+     stays flush against its shared edge, and both of `AppLayout`'s grid sums
+     compile to the numbers they have today. */
+  --spacing-rail-inset: 10px;
+
   /* Motion — smooth and floaty. A slower ease for the depth to feel weighty.
      The signature INTERACTION is the pointer-parallax TILT below (the standard
      "3D card" effect — cards tip toward the cursor), driven by the
@@ -1085,25 +1260,46 @@
    never a raw hue), so the style/palette axes stay disjoint and the material-
    rule test passes: a palette swap re-tints the atmosphere, a style swap leaves
    hues alone. This is what makes the table/list/board pages (no card surfaces of
-   their own) read as immersive too. */
-[data-style='3d-immersive'] body {
-  background-image:
-    radial-gradient(
-      130% 85% at 50% -15%,
-      color-mix(in srgb, var(--el-accent) 9%, transparent),
-      transparent 60%
-    ),
-    radial-gradient(
-      95% 75% at 108% 112%,
-      color-mix(in srgb, var(--el-link) 8%, transparent),
-      transparent 55%
-    ),
-    radial-gradient(
-      150% 130% at 50% 42%,
-      transparent 52%,
-      color-mix(in srgb, var(--el-text) 8%, transparent)
-    );
-  background-attachment: fixed;
+   their own) read as immersive too.
+
+   ⚠️ IT IS PAINTED ON THE SHELL CANVAS AS WELL AS ON `body`, AND THAT IS WHY THE
+   SELECTOR LIST HAS TWO MEMBERS (MOTIR-4230). `body` alone covers the anonymous
+   surfaces — auth, the public site, `/tokens` — where nothing is stacked over the
+   canvas. On a SIGNED-IN route the shell root (`components/ui/AppLayout.tsx`, and
+   the platform-admin `AdminShell`) is a `h-dvh` box carrying `bg-(--el-page-bg)`,
+   an OPAQUE fill covering the whole viewport: the body's atmosphere was painted
+   and then hidden behind it, so every card had its 3D tokens while the frame they
+   sit in stayed flat — the style did not read as immersive anywhere a user
+   actually works. The shells therefore carry a `data-app-shell` hook and repaint
+   the SAME layers over their own page fill, which is what the body would have
+   shown. `background-attachment: fixed` on both members is what makes the two
+   pixel-identical: each resolves against the viewport, not against its own box.
+
+   ONE RULE, TWO SELECTORS, DELIBERATELY — a second rule restating this gradient
+   stack is a copy that drifts on the first tune, and the whole defect was the
+   canvas and the frame disagreeing about what the canvas is. `tests/theme/
+   immersiveShellAtmosphere.test.ts` pins the pairing and the hook. */
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-image:
+      radial-gradient(
+        130% 85% at 50% -15%,
+        color-mix(in srgb, var(--el-accent) 9%, transparent),
+        transparent 60%
+      ),
+      radial-gradient(
+        95% 75% at 108% 112%,
+        color-mix(in srgb, var(--el-link) 8%, transparent),
+        transparent 55%
+      ),
+      radial-gradient(
+        150% 130% at 50% 42%,
+        transparent 52%,
+        color-mix(in srgb, var(--el-text) 8%, transparent)
+      );
+    background-attachment: fixed;
+  }
 }
 
 /* EVERY PANEL FLOATS — systematic depth across the WHOLE app, not just the
@@ -1118,11 +1314,15 @@
    Per-surface exceptions (the board column's clip-safe shadow, modals) override
    below by source order. Modals carry their own deeper shadow via the modal
    radius (next rule). */
-[data-style='3d-immersive'] .rounded-\(--radius-card\) {
-  box-shadow: var(--shadow-card);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  .rounded-\(--radius-card\) {
+    box-shadow: var(--shadow-card);
+  }
 }
-[data-style='3d-immersive'] .rounded-\(--radius-modal\) {
-  box-shadow: var(--shadow-modal);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  .rounded-\(--radius-modal\) {
+    box-shadow: var(--shadow-modal);
+  }
 }
 
 /* 3D / Immersive — the POINTER-PARALLAX TILT (the standard "3D card" effect,
@@ -1147,10 +1347,12 @@
      never establishes a transform stacking context that could reposition a
      non-portaled fixed/absolute descendant. On leave the engine drops the
      attribute and the transform eases back to none over 400ms. */
-  [data-style='3d-immersive'] [data-tilt] {
-    transition:
-      transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
-      box-shadow 260ms ease-out;
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt] {
+      transition:
+        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
+        box-shadow 260ms ease-out;
+    }
   }
   /* While the pointer is over the tile the engine sets data-tilt-active='1':
      tip it toward the cursor (the per-tile --tilt-rx/ry the engine writes),
@@ -1159,14 +1361,16 @@
      establish a 3D context (`preserve-3d`) so the card's slots can sit on
      separate translateZ planes and PARALLAX (a flat-plane tilt without this is
      the "halfway / flat-3D mix" tell). `position: relative` anchors the glare. */
-  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] {
-    transform: perspective(var(--tilt-perspective, 900px)) rotateX(var(--tilt-rx, 0deg))
-      rotateY(var(--tilt-ry, 0deg));
-    transform-style: preserve-3d;
-    transition:
-      transform 80ms linear,
-      box-shadow 260ms ease-out;
-    box-shadow: var(--shadow-elevated);
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt][data-tilt-active='1'] {
+      transform: perspective(var(--tilt-perspective, 900px)) rotateX(var(--tilt-rx, 0deg))
+        rotateY(var(--tilt-ry, 0deg));
+      transform-style: preserve-3d;
+      transition:
+        transform 80ms linear,
+        box-shadow 260ms ease-out;
+      box-shadow: var(--shadow-elevated);
+    }
   }
 
   /* DEPTH PLANES — the card's slots lift onto different translateZ planes so
@@ -1175,13 +1379,17 @@
      content never renders skewed). Only while actively tilting, so a resting
      card is perfectly flat. This is the standard layered-parallax technique
      (vanilla-tilt / Atropos): perspective + preserve-3d + per-layer translateZ. */
-  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] [data-tilt-layer='front'] {
-    transform: translateZ(42px);
-    transition: transform 80ms linear;
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt][data-tilt-active='1'] [data-tilt-layer='front'] {
+      transform: translateZ(42px);
+      transition: transform 80ms linear;
+    }
   }
-  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1'] [data-tilt-layer='back'] {
-    transform: translateZ(14px);
-    transition: transform 80ms linear;
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt][data-tilt-active='1'] [data-tilt-layer='back'] {
+      transform: translateZ(14px);
+      transition: transform 80ms linear;
+    }
   }
 
   /* GLARE — a cursor-tracked specular sweep across the face (the light catching
@@ -1189,33 +1397,39 @@
      hue → passes the material-rule test; a palette swap re-tints the sheen). It
      rides a high translateZ so it reads as light on the front glass, fades in
      only while active, and never eats pointer events. */
-  [data-style='3d-immersive'] [data-tilt]::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: radial-gradient(
-      circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%),
-      color-mix(in srgb, var(--el-page-bg) 65%, transparent),
-      transparent 55%
-    );
-    opacity: 0;
-    transition: opacity 200ms ease-out;
-    pointer-events: none;
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: radial-gradient(
+        circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%),
+        color-mix(in srgb, var(--el-page-bg) 65%, transparent),
+        transparent 55%
+      );
+      opacity: 0;
+      transition: opacity 200ms ease-out;
+      pointer-events: none;
+    }
   }
-  [data-style='3d-immersive'] [data-tilt][data-tilt-active='1']::after {
-    opacity: 0.45;
-    /* Just above the card FACE but BELOW the popped header/footer planes, so it
-       lights the surface without washing the floating title. */
-    transform: translateZ(2px);
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-tilt][data-tilt-active='1']::after {
+      opacity: 0.45;
+      /* Just above the card FACE but BELOW the popped header/footer planes, so it
+         lights the surface without washing the floating title. */
+      transform: translateZ(2px);
+    }
   }
 }
 
 /* `position: relative` anchors the glare ::after to each tile. Static (outside
    the motion gate) so the anchor is stable; the glare itself only shows while
    tilting (above). */
-[data-style='3d-immersive'] [data-tilt] {
-  position: relative;
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-tilt] {
+    position: relative;
+  }
 }
 
 /* ── 3D / Immersive — BOARD COLUMNS ─────────────────────────────────────────
@@ -1226,33 +1440,37 @@
    clip/occlusion-safe float shadow (small horizontal bleed, modest drop), and
    the scroll row widens its gap + adds bottom room so the shadow shows. Result:
    each column floats as its own distinct card. */
-[data-style='3d-immersive'] [data-board-col-panel] {
-  box-shadow:
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
-    0 1px 3px rgba(15, 15, 15, 0.08),
-    0 8px 18px -8px rgba(15, 15, 15, 0.22);
-  /* The column is `h-[calc(100dvh - 10.5rem - var(--shell-bottom-clearance))]` —
-     sized to fill the board area. In the `overflow-x-auto` row that
-     exactly-filling height means the column's rounded BOTTOM corner + its drop
-     shadow sit at the overflow-clip boundary and get sheared flat (the reported
-     "sharp bottom corner"). Trim the height by a further 2.5rem so the rounded
-     corner + shadow clear the clip and the column reads as a fully-rounded
-     floating card. Also clip the column's OWN children to its radius so a flush
-     inner surface can't square a corner — the board cards pop on hover but the
-     DragOverlay clone is portaled, so nothing 3D is lost.
-
-     ⚠️ This tracks BoardColumn's height and must keep spending the same
-     `--shell-bottom-clearance` the shell sets (MOTIR-2763), not a flat number:
-     a stylesheet cannot read the `showPlanWithAi` prop, so the custom property
-     is the only way this stays conditional on the orb actually mounting. The
-     13rem below is 10.5rem of chrome + this style's own 2.5rem trim. */
-  height: calc(100dvh - 13rem - var(--shell-bottom-clearance, 1.5rem));
-  overflow: hidden;
-}
-[data-style='3d-immersive'] [data-board-scroll] {
-  gap: 1.5rem;
-  padding-bottom: 2.25rem;
-  padding-top: 0.25rem;
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-board-col-panel] {
+    box-shadow:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
+      0 1px 3px rgba(15, 15, 15, 0.08),
+      0 8px 18px -8px rgba(15, 15, 15, 0.22);
+    /* The column is `h-[calc(100dvh - 10.5rem - var(--shell-bottom-clearance))]` —
+       sized to fill the board area. In the `overflow-x-auto` row that
+       exactly-filling height means the column's rounded BOTTOM corner + its drop
+       shadow sit at the overflow-clip boundary and get sheared flat (the reported
+       "sharp bottom corner"). Trim the height by a further 2.5rem so the rounded
+       corner + shadow clear the clip and the column reads as a fully-rounded
+       floating card. Also clip the column's OWN children to its radius so a flush
+       inner surface can't square a corner — the board cards pop on hover but the
+       DragOverlay clone is portaled, so nothing 3D is lost.
+
+       ⚠️ This tracks BoardColumn's height and must keep spending the same
+       `--shell-bottom-clearance` the shell sets (MOTIR-2763), not a flat number:
+       a stylesheet cannot read the `showPlanWithAi` prop, so the custom property
+       is the only way this stays conditional on the orb actually mounting. The
+       13rem below is 10.5rem of chrome + this style's own 2.5rem trim. */
+    height: calc(100dvh - 13rem - var(--shell-bottom-clearance, 1.5rem));
+    overflow: hidden;
+  }
+}
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-board-scroll] {
+    gap: 1.5rem;
+    padding-bottom: 2.25rem;
+    padding-top: 0.25rem;
+  }
 }
 
 /* ── 3D / Immersive — CONTROL DEPTH: every control sits on a named plane ────
@@ -1317,7 +1535,7 @@
    The `.justify-center` limb is the square icon-button shape: a centred control
    on the control radius is a key (the 3-dots trigger, the fullscreen toggle,
    every close ×). A row is never centred — it is `w-full` and `text-left`. */
-[data-style='3d-immersive']
+@scope ([data-style='3d-immersive']) to ([data-style]) {
   :where(
     .rounded-\(--radius-btn\),
     button.rounded-\(--radius-input\),
@@ -1333,27 +1551,34 @@
       [data-depth='flat']
     )
   ) {
-  box-shadow:
-    0 3px 0 0 var(--el-border-strong),
-    0 5px 10px -3px rgba(15, 15, 15, 0.18);
-  transition:
-    transform 90ms ease-out,
-    box-shadow 90ms ease-out,
-    background-color var(--transition-duration);
-}
-[data-style='3d-immersive'] [data-variant='primary'] {
-  box-shadow:
-    0 4px 0 0 var(--el-accent-pressed),
-    0 7px 12px -3px rgba(15, 15, 15, 0.32);
-}
-[data-style='3d-immersive'] [data-variant='danger'] {
-  box-shadow:
-    0 4px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
-    0 7px 12px -3px rgba(15, 15, 15, 0.32);
+    box-shadow:
+      0 3px 0 0 var(--el-border-strong),
+      0 5px 10px -3px rgba(15, 15, 15, 0.18);
+    transition:
+      transform 90ms ease-out,
+      box-shadow 90ms ease-out,
+      background-color var(--transition-duration);
+  }
+}
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='primary'] {
+    box-shadow:
+      0 4px 0 0 var(--el-accent-pressed),
+      0 7px 12px -3px rgba(15, 15, 15, 0.32);
+  }
+}
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='danger'] {
+    box-shadow:
+      0 4px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
+      0 7px 12px -3px rgba(15, 15, 15, 0.32);
+  }
 }
 /* Ghost — the deliberately-flat quiet button; no thickness. */
-[data-style='3d-immersive'] [data-variant='ghost'] {
-  box-shadow: none;
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='ghost'] {
+    box-shadow: none;
+  }
 }
 
 /* THE FLAT SET — rows, chips and switches, which §4 keeps on their parent's
@@ -1361,7 +1586,7 @@
    (0,1,0) wherever the two overlap (a centred control inside an open menu, a
    `data-depth='flat'` icon button). A menu row raised inside an already-floating
    popover reads as debris, not depth — the overlay is the thing that floats. */
-[data-style='3d-immersive']
+@scope ([data-style='3d-immersive']) to ([data-style]) {
   :is(
     [role='menuitem'],
     [role='option'],
@@ -1370,50 +1595,57 @@
     [role='switch'],
     [data-depth='flat']
   ),
-[data-style='3d-immersive']
-  :is([data-surface='popover'], [data-menu-surface])
-  :is(button, a).rounded-\(--radius-control\),
-[data-style='3d-immersive'] :is(button, a).w-full.rounded-\(--radius-control\) {
-  box-shadow: none;
+  :is([data-surface='popover'], [data-menu-surface]) :is(button, a).rounded-\(--radius-control\),
+  :is(button, a).w-full.rounded-\(--radius-control\) {
+    box-shadow: none;
+  }
 }
 
 /* THE PRESS — the raised set drops by its thickness and the base edge
    compresses, like a real key. Overrides the base `active:scale`. */
-[data-style='3d-immersive']
+@scope ([data-style='3d-immersive']) to ([data-style]) {
   :where(
-    .rounded-\(--radius-btn\),
-    button.rounded-\(--radius-input\),
-    :is(button, a).rounded-\(--radius-control\).justify-center,
-    [data-depth='key']
-  ):active:not(:disabled) {
-  transform: translateY(3px);
-  box-shadow:
-    0 1px 0 0 var(--el-border-strong),
-    0 2px 4px rgba(15, 15, 15, 0.14);
+      .rounded-\(--radius-btn\),
+      button.rounded-\(--radius-input\),
+      :is(button, a).rounded-\(--radius-control\).justify-center,
+      [data-depth='key']
+    ):active:not(:disabled) {
+    transform: translateY(3px);
+    box-shadow:
+      0 1px 0 0 var(--el-border-strong),
+      0 2px 4px rgba(15, 15, 15, 0.14);
+  }
 }
-[data-style='3d-immersive'] [data-variant='primary']:active:not(:disabled) {
-  box-shadow:
-    0 1px 0 0 var(--el-accent-pressed),
-    0 2px 5px rgba(15, 15, 15, 0.22);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='primary']:active:not(:disabled) {
+    box-shadow:
+      0 1px 0 0 var(--el-accent-pressed),
+      0 2px 5px rgba(15, 15, 15, 0.22);
+  }
 }
-[data-style='3d-immersive'] [data-variant='danger']:active:not(:disabled) {
-  box-shadow:
-    0 1px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
-    0 2px 5px rgba(15, 15, 15, 0.22);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='danger']:active:not(:disabled) {
+    box-shadow:
+      0 1px 0 0 color-mix(in srgb, var(--el-danger), black 32%),
+      0 2px 5px rgba(15, 15, 15, 0.22);
+  }
 }
-[data-style='3d-immersive'] [data-variant='ghost']:active:not(:disabled) {
-  box-shadow: none;
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  [data-variant='ghost']:active:not(:disabled) {
+    box-shadow: none;
+  }
 }
 
 /* THE QUIET PRESS — a control with no resting thickness still has to answer the
    pointer, or the style reads as flat wherever it is not a key: menu rows, list
    rows, nav links, inline affordances, the ghost button. One pixel of travel is
    the whole treatment; it is what separates "quiet" from "inert". */
-[data-style='3d-immersive']
+@scope ([data-style='3d-immersive']) to ([data-style]) {
   :where(:is(button, a).rounded-\(--radius-control\), [data-variant='ghost']):active:not(
-    :disabled
-  ) {
-  transform: translateY(1px);
+      :disabled
+    ) {
+    transform: translateY(1px);
+  }
 }
 
 /* THE RECESSED SET — text fields are pressed INTO the surface, not raised off
@@ -1424,16 +1656,17 @@
    not a copy of it. `[data-surface='input']` is the Input primitive's shell;
    the bare element selectors catch the hand-rolled fields. Checkbox and radio
    are excluded: they are chips, not wells. */
-[data-style='3d-immersive']
+@scope ([data-style='3d-immersive']) to ([data-style]) {
   :where(
     [data-surface='input'],
     input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']),
     textarea,
     select
   ) {
-  box-shadow:
-    inset 0 2px 6px -2px rgba(15, 15, 15, 0.26),
-    inset 0 1px 2px 0 rgba(15, 15, 15, 0.05);
+    box-shadow:
+      inset 0 2px 6px -2px rgba(15, 15, 15, 0.26),
+      inset 0 1px 2px 0 rgba(15, 15, 15, 0.05);
+  }
 }
 
 /* Hero controls paint their own shadow in an INLINE style, which beats every
@@ -1452,18 +1685,20 @@
    override every shape role. A descendant rule is neither, which is where the
    immersive background (which reads `--el-*` for the same reason) already
    lives. Custom properties inherit, so every control below `body` sees these. */
-[data-style='3d-immersive'] body {
-  --plan-hero-shadow:
-    0 4px 0 0 var(--el-accent-pressed),
-    inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 38%, transparent),
-    inset 0 0 0 1px color-mix(in srgb, var(--el-accent-text) 18%, transparent),
-    0 9px 18px -5px color-mix(in srgb, var(--el-accent) 75%, transparent),
-    0 0 22px -3px color-mix(in srgb, var(--el-highlight) 50%, transparent);
-  --plan-orb-shadow:
-    0 5px 0 0 var(--el-accent-pressed),
-    inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 40%, transparent),
-    0 12px 24px -6px color-mix(in srgb, var(--el-accent) 80%, transparent),
-    0 0 28px -2px color-mix(in srgb, var(--el-highlight) 55%, transparent);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  body {
+    --plan-hero-shadow:
+      0 4px 0 0 var(--el-accent-pressed),
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 38%, transparent),
+      inset 0 0 0 1px color-mix(in srgb, var(--el-accent-text) 18%, transparent),
+      0 9px 18px -5px color-mix(in srgb, var(--el-accent) 75%, transparent),
+      0 0 22px -3px color-mix(in srgb, var(--el-highlight) 50%, transparent);
+    --plan-orb-shadow:
+      0 5px 0 0 var(--el-accent-pressed),
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) 40%, transparent),
+      0 12px 24px -6px color-mix(in srgb, var(--el-accent) 80%, transparent),
+      0 0 28px -2px color-mix(in srgb, var(--el-highlight) 55%, transparent);
+  }
 }
 
 /* ── 3D / Immersive — DROPDOWNS / POPOVERS / MENUS unfold in 3D ──────────────
@@ -1489,22 +1724,129 @@
    rule above would otherwise flatten any `shadow-(--shadow-elevated)` surface to
    --shadow-card). Global + static so menus, tooltips, drag-overlays all keep the
    right depth. */
-[data-style='3d-immersive'] .shadow-\(--shadow-elevated\) {
-  box-shadow: var(--shadow-elevated);
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  .shadow-\(--shadow-elevated\) {
+    box-shadow: var(--shadow-elevated);
+  }
 }
 @media (prefers-reduced-motion: no-preference) {
   /* The 3D UNFOLD is scoped to actual MENU surfaces (the Popover primitive +
      the `data-menu-surface` hook on Combobox / MultiSelect / BoardSwitcher
      menus) — NOT every elevated surface, so a drag-overlay or toast doesn't
      unexpectedly fold open. */
-  [data-style='3d-immersive'] [data-surface='popover'],
-  [data-style='3d-immersive'] [data-menu-surface] {
-    transform-origin: top center;
-    animation: immersive-menu-open 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-surface='popover'],
+    [data-menu-surface] {
+      transform-origin: top center;
+      animation: immersive-menu-open 200ms cubic-bezier(0.22, 1, 0.36, 1);
+    }
   }
   /* A Radix popover that flips ABOVE its trigger folds from the bottom edge. */
-  [data-style='3d-immersive'] [data-surface='popover'][data-side='top'] {
-    transform-origin: bottom center;
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-surface='popover'][data-side='top'] {
+      transform-origin: bottom center;
+    }
+  }
+}
+
+/* 3D / Immersive — THE SHELL CHROME (MOTIR-4253, drawn by MOTIR-4252).
+   docs/styles/3d-immersive.md §4's `shell chrome` row + design/shell/
+   3d-immersive-shell.mock.html, which injects this block verbatim so a frame in
+   the asset cannot flatter a rule the implementation could not write.
+
+   ── The defect this closes ─────────────────────────────────────────────────
+   The plane ladder named ten surfaces and stopped before the FRAME: this block
+   carried no [data-surface='header'] and no [data-surface='sidebar'] rule at
+   all, while both hooks are emitted and five of the eleven styles already use
+   them. So roughly a quarter of every signed-in screen rendered byte-identically
+   to the default style — and §4's own `Quiet control / row` row was left
+   asserting that a sidebar nav link is flat *because the surface it sits in
+   floats*, of a surface no rule made float. §4b is the closure rule that keeps
+   the ladder from going silent about a surface again.
+
+   ── TWO OBJECTS, TWO PLANES, and the ladder says which ─────────────────────
+   How far a surface floats is how far you can see UNDER its edges. The rail has
+   four edges in the scene, so it can be an object at a distance: --shadow-card.
+   The bar has exactly one — its bottom — so the only thing it can express is a
+   CONTACT, which is --shadow-subtle, the ladder's tightest rung. A bar wearing
+   --shadow-card would out-float the panel it frames on the strength of one
+   visible edge.
+
+   Four things here are DECISIONS rather than syntax:
+   1. box-shadow ONLY on the bar, never `position`. hand-drawn-indie carries the
+      same guard explicitly a few hundred lines below — the sticky header is
+      already a containing block and overriding it breaks the sticky — and the
+      pleasing part is that the property is also the MECHANISM: TopNav's
+      `sticky … z-30` is the stacking context that lets the lid's shadow paint
+      over the region beneath it. A static header's downward shadow is painted
+      behind the next sibling's background and is invisible. The constraint and
+      the mechanism are the same line of the component.
+   2. The rail's shared edge goes `border-right-color: transparent`, NOT
+      `border: none`. The 1px stays in the box, so --width-rail-chrome (the
+      rail's px-2 gutters plus that border) is unchanged. A floating panel has a
+      shadow instead of a shared edge; it does not have a different width.
+   3. Both a11y fallbacks restore a LINE the treatment made transparent, and
+      NEITHER MOVES A PIXEL. The rail's hairline comes back as an `outline` at
+      `outline-offset: -1px` — drawn outside the box, follows the radius, costs
+      no layout — and the bar's `border-bottom` already has its width; only its
+      colour was taken away. This is neumorphism's pattern (its own
+      prefers-contrast / forced-colors blocks) applied to a treatment whose
+      structure rests on a shadow.
+   4. --spacing-rail-inset is `0px` in the base layer, so every other style is
+      untouched and AppLayout's two sums compile to today's numbers everywhere
+      else. That is what makes this a style-axis change rather than a shell one.
+
+   Colour: every value is an existing --el-* or an existing style-axis shadow
+   token. The block adds and changes NO colour token, so the style and palette
+   axes stay disjoint. */
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  /* The RAIL — a floating PANEL, inset from the frame on all four sides so the
+     immersive atmosphere reads around it. */
+  [data-surface='sidebar'] {
+    margin: var(--spacing-rail-inset);
+    height: calc(100% - 2 * var(--spacing-rail-inset));
+    border-radius: var(--radius-card);
+    border-right-color: transparent;
+    box-shadow: var(--shadow-card);
+  }
+}
+@scope ([data-style='3d-immersive']) to ([data-style]) {
+  /* The TOP BAR — the LID. No fill (the atmosphere runs under it), no hairline,
+     and a contact shadow cast down onto the region below. It keeps full-bleed
+     edges and square corners: a bar with a radius and a margin is a second
+     floating slab, not a lid. */
+  [data-surface='header'] {
+    background-color: transparent;
+    border-bottom-color: transparent;
+    box-shadow: var(--shadow-subtle);
+  }
+}
+
+/* Accessibility fallbacks — where STRUCTURE rests on a shadow, restore a solid
+   line. Both are geometry-neutral by construction (see decision 3 above), so a
+   high-contrast or forced-colours user gets the same layout, not a shifted one. */
+@media (prefers-contrast: more) {
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-surface='sidebar'] {
+      outline: 1px solid var(--el-border-strong);
+      outline-offset: -1px;
+    }
+    [data-surface='header'] {
+      border-bottom-color: var(--el-border-strong);
+    }
+  }
+}
+@media (forced-colors: active) {
+  @scope ([data-style='3d-immersive']) to ([data-style]) {
+    [data-surface='sidebar'] {
+      outline: 1px solid var(--el-border-strong);
+      outline-offset: -1px;
+      box-shadow: none;
+    }
+    [data-surface='header'] {
+      border-bottom-color: var(--el-border-strong);
+      box-shadow: none;
+    }
   }
 }
 
@@ -1591,52 +1933,62 @@
    dividers `.border-b` / `.border-t` (table rows, section rules) — the latter
    scoped INSIDE `[data-surface]` panels to bound the count to real surfaces (and
    their rows are virtualised, so only ~viewport-many overlays ever render). */
-[data-style='hand-drawn-indie'] .border {
-  border-width: 2px;
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  .border {
+    border-width: 2px;
+  }
 }
-[data-style='hand-drawn-indie'] .border:not(.fixed):not(.absolute):not(.sticky) {
-  position: relative;
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  .border:not(.fixed):not(.absolute):not(.sticky) {
+    position: relative;
+  }
 }
-[data-style='hand-drawn-indie'] .border::after {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  pointer-events: none;
-  border: 2px solid var(--el-border-strong);
-  border-radius: inherit;
-  filter: url(#hd-rough);
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  .border::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    pointer-events: none;
+    border: 2px solid var(--el-border-strong);
+    border-radius: inherit;
+    filter: url(#hd-rough);
+  }
 }
 
 /* Internal grid dividers — make the inner rules as rough as the frame. Scoped
    inside framed surfaces; `:not(.border)` so a full-box element isn't handled
    twice; `:not(:last-child)` mirrors the common `last:border-b-0` strip so the
    final row gets no phantom line. */
-[data-style='hand-drawn-indie']
-  [data-surface]
-  :is(.border-b, .border-t):not(.border):not(.fixed):not(.absolute):not(.sticky) {
-  position: relative;
-}
-[data-style='hand-drawn-indie'] [data-surface] .border-b:not(.border)::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 0;
-  pointer-events: none;
-  border-bottom: 2px solid var(--el-border-strong);
-  filter: url(#hd-rough);
-}
-[data-style='hand-drawn-indie'] [data-surface] .border-t:not(.border)::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: -1px;
-  height: 0;
-  pointer-events: none;
-  border-top: 2px solid var(--el-border-strong);
-  filter: url(#hd-rough);
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface] :is(.border-b, .border-t):not(.border):not(.fixed):not(.absolute):not(.sticky) {
+    position: relative;
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface] .border-b:not(.border)::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 0;
+    pointer-events: none;
+    border-bottom: 2px solid var(--el-border-strong);
+    filter: url(#hd-rough);
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface] .border-t:not(.border)::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -1px;
+    height: 0;
+    pointer-events: none;
+    border-top: 2px solid var(--el-border-strong);
+    filter: url(#hd-rough);
+  }
 }
 /* Suppress the overlay only where the REAL divider is removed: the last row of a
    fully-rendered list strips its border via `last:border-b-0`. (We can't use
@@ -1644,8 +1996,10 @@
    own `role="rowgroup"`, so it is itself a `:last-child` and would be wrongly
    skipped, which left the work-item table header's divider straight.) Same
    specificity as the draw rule, placed after, so it wins on the real last row. */
-[data-style='hand-drawn-indie'] [data-surface] .last\:border-b-0:last-child::after {
-  content: none;
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface] .last\:border-b-0:last-child::after {
+    content: none;
+  }
 }
 
 /* The APP SHELL FRAME — the sidebar rail's right edge + the top bar's bottom edge
@@ -1659,31 +2013,36 @@
    ONLY to a STATIC host (the rail) — never the STICKY header, which is already a
    containing block (overriding it would break the sticky), mirroring the `.border`
    rule's guard. */
-[data-style='hand-drawn-indie']
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
   :is([data-surface='sidebar'], [data-surface='header']):not(.fixed):not(.absolute):not(.sticky) {
-  position: relative;
-}
-[data-style='hand-drawn-indie'] [data-surface='sidebar']::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: -1px;
-  width: 0;
-  pointer-events: none;
-  border-right: 2px solid var(--el-border-strong);
-  filter: url(#hd-rough);
-}
-[data-style='hand-drawn-indie'] [data-surface='header']::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: 0;
-  pointer-events: none;
-  border-bottom: 2px solid var(--el-border-strong);
-  filter: url(#hd-rough);
+    position: relative;
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface='sidebar']::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -1px;
+    width: 0;
+    pointer-events: none;
+    border-right: 2px solid var(--el-border-strong);
+    filter: url(#hd-rough);
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface='header']::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -1px;
+    height: 0;
+    pointer-events: none;
+    border-bottom: 2px solid var(--el-border-strong);
+    filter: url(#hd-rough);
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -1795,8 +2154,11 @@
    panels look MOULDED OUT OF the same material rather than placed on top. Both
    the canvas and the surfaces below share `var(--el-surface)`, which is the whole
    neumorphic illusion. Palette-derived (no hue of its own). */
-[data-style='neumorphism'] body {
-  background-color: var(--el-surface);
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-color: var(--el-surface);
+  }
 }
 
 /* Raised container surfaces — cards & popovers swell OUT of the field on a paired
@@ -1806,45 +2168,53 @@
    from hue. The faint hairline is kept as the accessibility fallback so structure
    doesn't depend on the shadow alone. Opaque `--el-surface` keeps text on the
    palette's AA-tuned surface. */
-[data-style='neumorphism'] [data-surface='card'],
-[data-style='neumorphism'] [data-surface='popover'] {
-  background-color: var(--el-surface);
-  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
-  box-shadow:
-    var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow),
-    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-light);
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='card'],
+  [data-surface='popover'] {
+    background-color: var(--el-surface);
+    border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+    box-shadow:
+      var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow),
+      calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) var(--neu-blur) var(--neu-light);
+  }
 }
 
 /* Modal panel — the same raised mould, a touch deeper so the dialog separates
    from the field behind it (body text stays on the opaque surface). */
-[data-style='neumorphism'] [data-surface='modal'] {
-  background-color: var(--el-surface);
-  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
-  box-shadow:
-    calc(var(--neu-distance) + 2px) calc(var(--neu-distance) + 2px) calc(var(--neu-blur) + 8px)
-      var(--neu-shadow),
-    calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) calc(var(--neu-blur) + 4px)
-      var(--neu-light);
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='modal'] {
+    background-color: var(--el-surface);
+    border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+    box-shadow:
+      calc(var(--neu-distance) + 2px) calc(var(--neu-distance) + 2px) calc(var(--neu-blur) + 8px)
+        var(--neu-shadow),
+      calc(-1 * var(--neu-distance)) calc(-1 * var(--neu-distance)) calc(var(--neu-blur) + 4px)
+        var(--neu-light);
+  }
 }
 
 /* The sidebar rail — moulded from the same field as the chrome, gently raised so
    it reads as part of the one continuous surface. */
-[data-style='neumorphism'] [data-surface='sidebar'] {
-  background-color: var(--el-surface);
-  box-shadow:
-    var(--neu-distance) 0 var(--neu-blur) var(--neu-shadow),
-    calc(-1 * var(--neu-distance)) 0 var(--neu-blur) var(--neu-light);
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='sidebar'] {
+    background-color: var(--el-surface);
+    box-shadow:
+      var(--neu-distance) 0 var(--neu-blur) var(--neu-shadow),
+      calc(-1 * var(--neu-distance)) 0 var(--neu-blur) var(--neu-light);
+  }
 }
 
 /* Form controls — the inverse mould: a CONCAVE INSET well pressed INTO the field
    (the soft-UI input look), the paired shadow flipped to `inset`. */
-[data-style='neumorphism'] [data-surface='input'] {
-  background-color: var(--el-surface);
-  border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
-  box-shadow:
-    inset var(--neu-distance-sm) var(--neu-distance-sm) var(--neu-blur-sm) var(--neu-shadow),
-    inset calc(-1 * var(--neu-distance-sm)) calc(-1 * var(--neu-distance-sm)) var(--neu-blur-sm)
-      var(--neu-light);
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='input'] {
+    background-color: var(--el-surface);
+    border-color: color-mix(in srgb, var(--el-border) 45%, transparent);
+    box-shadow:
+      inset var(--neu-distance-sm) var(--neu-distance-sm) var(--neu-blur-sm) var(--neu-shadow),
+      inset calc(-1 * var(--neu-distance-sm)) calc(-1 * var(--neu-distance-sm)) var(--neu-blur-sm)
+        var(--neu-light);
+  }
 }
 
 /* Accessibility fallback — when a user asks for more contrast (or forced colours),
@@ -1852,23 +2222,27 @@
    moulded surface and flatten the paired shadow to a single readable lift.
    Palette-derived (var(--el-border)); no hue. */
 @media (prefers-contrast: more) {
-  [data-style='neumorphism'] [data-surface='card'],
-  [data-style='neumorphism'] [data-surface='popover'],
-  [data-style='neumorphism'] [data-surface='modal'],
-  [data-style='neumorphism'] [data-surface='input'],
-  [data-style='neumorphism'] [data-surface='sidebar'] {
-    border-color: var(--el-border-strong);
-    box-shadow: var(--shadow-card);
+  @scope ([data-style='neumorphism']) to ([data-style]) {
+    [data-surface='card'],
+    [data-surface='popover'],
+    [data-surface='modal'],
+    [data-surface='input'],
+    [data-surface='sidebar'] {
+      border-color: var(--el-border-strong);
+      box-shadow: var(--shadow-card);
+    }
   }
 }
 @media (forced-colors: active) {
-  [data-style='neumorphism'] [data-surface='card'],
-  [data-style='neumorphism'] [data-surface='popover'],
-  [data-style='neumorphism'] [data-surface='modal'],
-  [data-style='neumorphism'] [data-surface='input'],
-  [data-style='neumorphism'] [data-surface='sidebar'] {
-    border-color: var(--el-border-strong);
-    box-shadow: none;
+  @scope ([data-style='neumorphism']) to ([data-style]) {
+    [data-surface='card'],
+    [data-surface='popover'],
+    [data-surface='modal'],
+    [data-surface='input'],
+    [data-surface='sidebar'] {
+      border-color: var(--el-border-strong);
+      box-shadow: none;
+    }
   }
 }
 
@@ -1972,62 +2346,92 @@
    axis overrides `--el-*`, never `--color-*`, which keeps the horizon orthogonal
    to the palette. Painted as the body's own background (always behind content),
    the proven 3D/Immersive atmosphere approach. */
-[data-style='retrofuturism'] body {
-  background-image:
-    linear-gradient(
-      180deg,
-      transparent 54%,
-      color-mix(in srgb, var(--el-highlight) var(--retro-horizon), transparent) 60.5%,
-      color-mix(in srgb, var(--el-accent) var(--retro-horizon), transparent) 62.5%,
-      transparent 69%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, var(--el-link) var(--retro-sky), transparent),
-      transparent 46%
-    ),
-    linear-gradient(
-      0deg,
-      color-mix(in srgb, var(--el-accent) var(--retro-ground), transparent),
-      transparent 42%
-    );
-  background-size: 100% 100%;
-  background-attachment: fixed;
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  body,
+  [data-app-shell] {
+    background-image:
+      linear-gradient(
+        180deg,
+        transparent 54%,
+        color-mix(in srgb, var(--el-highlight) var(--retro-horizon), transparent) 60.5%,
+        color-mix(in srgb, var(--el-accent) var(--retro-horizon), transparent) 62.5%,
+        transparent 69%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--el-link) var(--retro-sky), transparent),
+        transparent 46%
+      ),
+      linear-gradient(
+        0deg,
+        color-mix(in srgb, var(--el-accent) var(--retro-ground), transparent),
+        transparent 42%
+      );
+    background-size: 100% 100%;
+    background-attachment: fixed;
+  }
+}
+
+/* ⚠️ THE SHELL BECOMES A STACKING CONTEXT — the one place the shell-canvas
+   pairing needs more than a second selector (MOTIR-4234). The grid floor below
+   is `position: fixed; z-index: -1`, and both shell roots are `relative` with
+   `z-index: auto`, so they establish NO stacking context: a negative-z-index
+   descendant of the shell would be painted into the ROOT stacking context, at
+   the step BEFORE positioned elements — i.e. behind the shell's own background,
+   which is exactly where `body::after` already is and exactly why the floor was
+   invisible on every signed-in route. `isolation: isolate` makes the shell its
+   own context, so its `::after` resolves INSIDE it: above the shell canvas
+   (step 1) and below all shell content (step 3 onwards), which is the
+   disposition the floor is designed for.
+
+   Scoped to retrofuturism, because it is the only style with a canvas LAYER
+   below content; the shell is left alone under every other style. It creates no
+   containing block, so the `position: fixed` floor still resolves against the
+   viewport and the shell's `overflow: hidden` does not clip it. */
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-app-shell] {
+    isolation: isolate;
+  }
 }
 
 /* The Outrun GRID FLOOR — a receding neon grid below the horizon. A separate
-   fixed layer (`body::after`) so it can be perspective-tilted and masked to fade
+   fixed layer (`body::after`, and `[data-app-shell]::after` for the signed-in
+   shell — the pairing above) so it can be perspective-tilted and masked to fade
    into the horizon; `z-index: -1` keeps it BEHIND all app content (above only the
-   body's own sky background), so it textures the floor without ever covering the
-   UI. Lines are `color-mix()` over `--el-*` accents (palette-derived, no hue of
-   their own); the mask uses the achromatic `black` keyword (no hex). The grid is
-   STATIC depth — like 3D/Immersive's atmosphere it carries the identity, so it is
-   not motion-gated (there is no animation to suppress). */
-[data-style='retrofuturism'] body::after {
-  content: '';
-  position: fixed;
-  left: -30%;
-  right: -30%;
-  bottom: 0;
-  height: 42vh;
-  background-image:
-    repeating-linear-gradient(
-      0deg,
-      color-mix(in srgb, var(--el-highlight) var(--retro-grid), transparent) 0 2px,
-      transparent 2px var(--retro-grid-size)
-    ),
-    repeating-linear-gradient(
-      90deg,
-      color-mix(in srgb, var(--el-accent) var(--retro-grid), transparent) 0 2px,
-      transparent 2px var(--retro-grid-size)
-    );
-  background-size: var(--retro-grid-size) var(--retro-grid-size);
-  transform: perspective(300px) rotateX(75deg);
-  transform-origin: bottom center;
-  -webkit-mask-image: linear-gradient(to top, black 2%, transparent 80%);
-  mask-image: linear-gradient(to top, black 2%, transparent 80%);
-  pointer-events: none;
-  z-index: -1;
+   sky background of whichever of the two is painting), so it textures the floor
+   without ever covering the UI. Lines are `color-mix()` over `--el-*` accents
+   (palette-derived, no hue of their own); the mask uses the achromatic `black`
+   keyword (no hex). The grid is STATIC depth — like 3D/Immersive's atmosphere it
+   carries the identity, so it is not motion-gated (there is no animation to
+   suppress). */
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  body::after,
+  [data-app-shell]::after {
+    content: '';
+    position: fixed;
+    left: -30%;
+    right: -30%;
+    bottom: 0;
+    height: 42vh;
+    background-image:
+      repeating-linear-gradient(
+        0deg,
+        color-mix(in srgb, var(--el-highlight) var(--retro-grid), transparent) 0 2px,
+        transparent 2px var(--retro-grid-size)
+      ),
+      repeating-linear-gradient(
+        90deg,
+        color-mix(in srgb, var(--el-accent) var(--retro-grid), transparent) 0 2px,
+        transparent 2px var(--retro-grid-size)
+      );
+    background-size: var(--retro-grid-size) var(--retro-grid-size);
+    transform: perspective(300px) rotateX(75deg);
+    transform-origin: bottom center;
+    -webkit-mask-image: linear-gradient(to top, black 2%, transparent 80%);
+    mask-image: linear-gradient(to top, black 2%, transparent 80%);
+    pointer-events: none;
+    z-index: -1;
+  }
 }
 
 /* Chrome container surfaces — OPAQUE (text AA is preserved against the base
@@ -2039,73 +2443,79 @@
    so they never pull a surface far from its base tone; the inset top/bottom lines
    are the lit chrome rim. Applied to EVERY panel via the global card-radius
    utility (the 3D/Immersive coverage approach), not just the <Card> primitive. */
-[data-style='retrofuturism'] [data-surface='card'],
-[data-style='retrofuturism'] [data-surface='popover'],
-[data-style='retrofuturism'] .rounded-\(--radius-card\) {
-  background-color: var(--el-surface);
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 36%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 49%,
-      transparent 62%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
-      transparent 16%,
-      transparent 78%,
-      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
-    );
-  box-shadow:
-    var(--shadow-card),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
-    0 0 28px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='card'],
+  [data-surface='popover'],
+  .rounded-\(--radius-card\) {
+    background-color: var(--el-surface);
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 36%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 49%,
+        transparent 62%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+        transparent 16%,
+        transparent 78%,
+        color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+      );
+    box-shadow:
+      var(--shadow-card),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
+      0 0 28px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+  }
 }
 
 /* Modal panel — the same chrome, with a deeper palette glow so the dialog
    separates cleanly from the grid behind it (and body text stays on the solid
    surface). Overrides the card-radius rule above for the modal radius. */
-[data-style='retrofuturism'] [data-surface='modal'] {
-  background-color: var(--el-surface);
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 34%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 49%,
-      transparent 64%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
-      transparent 14%,
-      transparent 80%,
-      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
-    );
-  box-shadow:
-    var(--shadow-modal),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    0 0 56px -14px color-mix(in srgb, var(--el-highlight) var(--retro-glow-strong), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='modal'] {
+    background-color: var(--el-surface);
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 34%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 49%,
+        transparent 64%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+        transparent 14%,
+        transparent 80%,
+        color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+      );
+    box-shadow:
+      var(--shadow-modal),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      0 0 56px -14px color-mix(in srgb, var(--el-highlight) var(--retro-glow-strong), transparent);
+  }
 }
 
 /* The sidebar rail — opaque chrome with a quieter specular + bevel so it reads as
    part of the polished-metal family, not a flat slab. */
-[data-style='retrofuturism'] [data-surface='sidebar'] {
-  background-color: var(--el-sidebar-bg);
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 40%,
-      color-mix(in srgb, white var(--retro-sheen), transparent) 50%,
-      transparent 60%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-sheen), transparent),
-      transparent 24%,
-      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
-    );
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='sidebar'] {
+    background-color: var(--el-sidebar-bg);
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 40%,
+        color-mix(in srgb, white var(--retro-sheen), transparent) 50%,
+        transparent 60%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-sheen), transparent),
+        transparent 24%,
+        color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+      );
+  }
 }
 
 /* Text inputs (a TYPING field) — a RECESSED chrome well: the bevel inverts (a
@@ -2113,14 +2523,16 @@
    metal. Clickable controls (dropdown / select / picker triggers + buttons) get
    the RAISED chrome below instead — matching the CTA — so a typing field stays
    recessed while everything you click reads as a raised chrome control. */
-[data-style='retrofuturism'] [data-surface='input'] {
-  background-color: var(--el-page-bg);
-  background-image: linear-gradient(
-    180deg,
-    color-mix(in srgb, black var(--retro-sheen), transparent) 0%,
-    transparent 34%
-  );
-  box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='input'] {
+    background-color: var(--el-page-bg);
+    background-image: linear-gradient(
+      180deg,
+      color-mix(in srgb, black var(--retro-sheen), transparent) 0%,
+      transparent 34%
+    );
+    box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+  }
 }
 
 /* ── EVERY clickable control reads as RETRO CHROME (7.3.40) ──────────────────
@@ -2151,46 +2563,50 @@
 /* FILLED CTAs — accent (primary) keeps its hue under a diagonal specular glint +
    a vertical metallic sweep + a palette glow. Keyed on the fill class so it
    covers the `Button` primitive AND `buttonVariants()` anchors alike. */
-[data-style='retrofuturism'] .rounded-\(--radius-btn\).bg-\(--el-accent\) {
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 38%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
-      transparent 62%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-spec), var(--el-accent)) 0%,
-      var(--el-accent) 46%,
-      color-mix(in srgb, black var(--retro-bevel-shade), var(--el-accent)) 100%
-    );
-  box-shadow:
-    var(--shadow-subtle),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    0 0 22px -6px color-mix(in srgb, var(--el-accent) var(--retro-glow-strong), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  .rounded-\(--radius-btn\).bg-\(--el-accent\) {
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 38%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+        transparent 62%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-spec), var(--el-accent)) 0%,
+        var(--el-accent) 46%,
+        color-mix(in srgb, black var(--retro-bevel-shade), var(--el-accent)) 100%
+      );
+    box-shadow:
+      var(--shadow-subtle),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      0 0 22px -6px color-mix(in srgb, var(--el-accent) var(--retro-glow-strong), transparent);
+  }
 }
 
 /* Danger CTAs — the same machined sweep, in the danger hue (so a destructive
    button reads as red chrome, not a flat red, matching the accent CTA). */
-[data-style='retrofuturism'] .rounded-\(--radius-btn\).bg-\(--el-danger\) {
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 38%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
-      transparent 62%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-spec), var(--el-danger)) 0%,
-      var(--el-danger) 46%,
-      color-mix(in srgb, black var(--retro-bevel-shade), var(--el-danger)) 100%
-    );
-  box-shadow:
-    var(--shadow-subtle),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    0 0 22px -6px color-mix(in srgb, var(--el-danger) var(--retro-glow-strong), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  .rounded-\(--radius-btn\).bg-\(--el-danger\) {
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 38%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+        transparent 62%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-spec), var(--el-danger)) 0%,
+        var(--el-danger) 46%,
+        color-mix(in srgb, black var(--retro-bevel-shade), var(--el-danger)) 100%
+      );
+    box-shadow:
+      var(--shadow-subtle),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      0 0 22px -6px color-mix(in srgb, var(--el-danger) var(--retro-glow-strong), transparent);
+  }
 }
 
 /* NEUTRAL STEEL chrome — every OTHER clickable control: bordered buttons + links
@@ -2199,67 +2615,446 @@
    `:not([role='group'])` excludes the segmented TRACK (its own rule below); the
    FILLED CTAs are excluded automatically (they carry a fill class, not `.border`).
    The gunmetal base is set here because secondary controls ship `bg-transparent`. */
-[data-style='retrofuturism'] .rounded-\(--radius-btn\).border:not([role='group']),
-[data-style='retrofuturism'] button.rounded-\(--radius-input\) {
-  background-color: color-mix(in srgb, black 24%, var(--el-surface));
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 36%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
-      transparent 64%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
-      transparent 42%,
-      transparent 60%,
-      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
-    );
-  box-shadow:
-    var(--shadow-subtle),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
-    0 0 18px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  .rounded-\(--radius-btn\).border:not([role='group']),
+  button.rounded-\(--radius-input\) {
+    background-color: color-mix(in srgb, black 24%, var(--el-surface));
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 36%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+        transparent 64%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+        transparent 42%,
+        transparent 60%,
+        color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+      );
+    box-shadow:
+      var(--shadow-subtle),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, black 24%, transparent),
+      0 0 18px -8px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+  }
 }
 
 /* SEGMENTED control (the board "Group by" switch + every other `Segmented` use):
    the classic metal segmented control — a RECESSED gunmetal TRACK (the
    `[role='group']` wrapper) with the ACTIVE segment (`aria-pressed='true'`) raised
    out of it as a chrome chip. Inactive segments stay transparent on the track. */
-[data-style='retrofuturism'] [role='group'].rounded-\(--radius-btn\) {
-  background-color: color-mix(in srgb, black 15%, var(--el-surface));
-  box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [role='group'].rounded-\(--radius-btn\) {
+    background-color: color-mix(in srgb, black 15%, var(--el-surface));
+    box-shadow: inset 0 1px 3px color-mix(in srgb, black var(--retro-glow), transparent);
+  }
 }
-[data-style='retrofuturism'] [role='group'] [aria-pressed='true'] {
-  background-color: color-mix(in srgb, black 24%, var(--el-surface));
-  background-image:
-    linear-gradient(
-      158deg,
-      transparent 36%,
-      color-mix(in srgb, white var(--retro-spec), transparent) 50%,
-      transparent 64%
-    ),
-    linear-gradient(
-      180deg,
-      color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
-      transparent 42%,
-      transparent 60%,
-      color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
-    );
-  box-shadow:
-    var(--shadow-subtle),
-    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 24%, transparent);
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [role='group'] [aria-pressed='true'] {
+    background-color: color-mix(in srgb, black 24%, var(--el-surface));
+    background-image:
+      linear-gradient(
+        158deg,
+        transparent 36%,
+        color-mix(in srgb, white var(--retro-spec), transparent) 50%,
+        transparent 64%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, white var(--retro-bevel-light), transparent) 0%,
+        transparent 42%,
+        transparent 60%,
+        color-mix(in srgb, black var(--retro-bevel-shade), transparent) 100%
+      );
+    box-shadow:
+      var(--shadow-subtle),
+      inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
+      inset 0 -1px 0 color-mix(in srgb, black 24%, transparent);
+  }
 }
 
 /* Hover — brighten the steel a touch (the controls' own `hover:bg-*` utilities
    are out-specified by the rules above, so restore a clear hover signal). */
-[data-style='retrofuturism']
+@scope ([data-style='retrofuturism']) to ([data-style]) {
   .rounded-\(--radius-btn\).border:not([role='group']):hover:not(:disabled),
-[data-style='retrofuturism'] button.rounded-\(--radius-input\):hover:not(:disabled),
-[data-style='retrofuturism'] [role='group'] [aria-pressed='false']:hover:not(:disabled) {
-  background-color: color-mix(in srgb, black 14%, var(--el-surface));
+  button.rounded-\(--radius-input\):hover:not(:disabled),
+  [role='group'] [aria-pressed='false']:hover:not(:disabled) {
+    background-color: color-mix(in srgb, black 14%, var(--el-surface));
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   THE HERO AI CONTROL, PER STYLE (drawn by MOTIR-4742, wired by MOTIR-4743).
+
+   The two controls that summon the planning workspace — the header pill
+   (`components/planning/PlanWithAILauncher.tsx`) and the floating M orb
+   (`components/planning/PlanWithAIFab.tsx`) — are the product's headline
+   affordance and the sanctioned exception to the flat-button norm
+   (`design/ai-chat/design-notes.md` § *The hero control is STYLE-AWARE*). Each
+   style gives them its own material. Before this section they rendered
+   byte-identically under all eleven: the hook the design prescribed was emitted
+   nowhere and the fill was painted inline, where no rule can reach it.
+
+   ── TWO ATTRIBUTES, AND THE SECOND IS LOAD-BEARING ─────────────────────────
+   `data-ai-cta` distinguishes the two because they do not share a fill recipe:
+   the orb's `radial-gradient` first stop is `--orb-lit-mix`, a guarded contrast
+   knob (MOTIR-3207, `tests/theme/orb-glyph-contrast.test.ts`), and a shared
+   `background-image` would silently overwrite it. So the shape-agnostic
+   properties — border, outer glow, type, ink — are written on
+   `[data-surface='ai-cta']`, and every FILL under `[data-ai-cta='pill']` or
+   `[data-ai-cta='orb']`.
+
+   ── THE TWO INLINE-DECLARED PROPERTIES TRAVEL ON CUSTOM PROPERTIES ─────────
+   The components declare exactly two things in an inline `style` prop —
+   `background-image` and `box-shadow` — and an inline declaration beats every
+   stylesheet rule. So BOTH are read through a `var()` seam:
+   `background-image: var(--plan-hero-fill, <the base recipe>)` (MOTIR-4743) and
+   `box-shadow: var(--plan-hero-shadow, <the base look>)` (MOTIR-3522), with the
+   orb's twins beside them.
+
+   `design/ai-chat/design-notes.md` § *The CSS, verbatim* writes each treatment
+   as plain `background-image` / `box-shadow` declarations. Both are transcribed
+   here onto those four variables, because written literally they would be
+   **INERT** — which is the very defect this section exists to close, one
+   property over. It is the same mechanism the design's own row 8 relies on and
+   the only one consistent with its "Warm Editorial has no block by design"
+   decision: painting the base in a `warm-editorial` block instead would give the
+   Tier-0 base a second copy of its own recipe to drift from.
+
+   ⚠️ THE SHADOW HALF WAS MEASURED, NOT REASONED. `tests/e2e/hero-ai-control-styles.spec.ts`
+   compares every style against the base in a real browser, and with the shadows
+   written literally exactly ONE control came back byte-identical to the base:
+   the AURORA ORB — the only one whose row sets nothing but a shadow. Every other
+   style also moves a fill, a border or the type, so its rule "worked" while its
+   shadow silently did not. A source-reading review passes that; the render does
+   not.
+
+   A shared `[data-surface='ai-cta']` rule sets BOTH shadow variables, since the
+   design gives the pill and the orb the same shadow and each control reads only
+   its own name. Everything the components do NOT declare inline —
+   `background-color`, `background-size`, `background-position`,
+   `background-repeat`, `border`, `backdrop-filter`, the type properties — is
+   written exactly as the design states it.
+
+   Radius, padding and height are NOT set here: they already flow through
+   `--radius-badge` / `--spacing-btn-x` / `--height-btn-md`, and re-stating them
+   would freeze the one axis that was already working. Palette-derived
+   throughout — `color-mix()` over `--el-*`, no raw hex — so a `data-palette`
+   swap re-tints all eleven treatments. Every label ratio in the design's table
+   was measured on the painted pixel; the tightest is glassmorphism at 4.87:1.
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* 1 · Warm Editorial — NO BLOCK, by design. It is the Tier-0 base, and the
+   components' own `var()` fallbacks ARE its treatment; a block repeating them
+   would be a second copy to drift. */
+
+/* 2 · Soft / Playful — pillowy stacked shadow, no border. */
+@scope ([data-style='soft-playful']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    font-weight: 800;
+    --plan-hero-shadow:
+      0 7px 0 -1px color-mix(in srgb, var(--el-accent) 22%, var(--el-page-bg)),
+      0 14px 22px -6px color-mix(in srgb, var(--el-accent) 55%, transparent);
+    --plan-orb-shadow:
+      0 7px 0 -1px color-mix(in srgb, var(--el-accent) 22%, var(--el-page-bg)),
+      0 14px 22px -6px color-mix(in srgb, var(--el-accent) 55%, transparent);
+  }
+}
+
+/* 3 · Swiss / Minimal-Flat — flat solid, sharp, uppercase, NO shadow. */
+@scope ([data-style='swiss-minimal-flat']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    --plan-hero-shadow: none;
+    --plan-orb-shadow: none;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+  }
+}
+@scope ([data-style='swiss-minimal-flat']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    --plan-hero-fill: none;
+    background-color: var(--el-accent);
+  }
+}
+
+/* 4 · Glassmorphism — frosted translucency over the rim. 86% is a FLOOR, not a
+   preference: white is the lightest backdrop the light theme can put behind it,
+   so 86% accent composited over anything measures >= 4.87:1. */
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    border: 1px solid var(--glass-rim);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    --plan-hero-shadow:
+      inset 0 1px 0 var(--glass-rim),
+      0 8px 22px -6px color-mix(in srgb, var(--el-accent) 45%, transparent);
+    --plan-orb-shadow:
+      inset 0 1px 0 var(--glass-rim),
+      0 8px 22px -6px color-mix(in srgb, var(--el-accent) 45%, transparent);
+  }
+}
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    --plan-hero-fill: none;
+    background-color: color-mix(in srgb, var(--el-accent) 86%, transparent);
+  }
+}
+@scope ([data-style='glassmorphism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='orb'] {
+    /* Crown-confined: across the whole circle this sheen lightens the 26/56
+       glyph box to 3.17:1 light / 2.67:1 dark and breaks the `--orb-lit-mix`
+       floor the style layer may not touch. Confined, it measures the shipped
+       3.78:1 / 3.10:1 — identical to no sheen at all. */
+    background-size:
+      100% 20%,
+      100% 100%;
+    background-position:
+      top left,
+      top left;
+    background-repeat: no-repeat;
+    --plan-orb-fill:
+      linear-gradient(160deg, var(--glass-sheen), transparent 90%),
+      radial-gradient(
+        circle at 33% 27%,
+        color-mix(in srgb, var(--el-accent-text) var(--orb-lit-mix), var(--el-accent)),
+        var(--el-accent) 56%,
+        color-mix(in srgb, var(--el-accent) 68%, var(--el-highlight))
+      );
+  }
+}
+
+/* 5 · Neo-Brutalism — hard 2px border + zero-blur offset shadow. */
+@scope ([data-style='neo-brutalism']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    border: 2px solid var(--el-text);
+    --plan-hero-shadow: 4px 4px 0 0 var(--el-text);
+    --plan-orb-shadow: 4px 4px 0 0 var(--el-text);
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+}
+@scope ([data-style='neo-brutalism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    --plan-hero-fill: none;
+    background-color: var(--el-accent);
+  }
+}
+
+/* 6 · Cybercore / Y2K — dark HUD ground, neon halo, mono label. The mixes toward
+   the achromatic `black` KEYWORD are sanctioned by this style's own material
+   layer, which uses them to read as lightness rather than as a hue, so the
+   palette axis stays disjoint. */
+@scope ([data-style='cybercore-y2k']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    border: 1px solid color-mix(in srgb, var(--el-highlight) 70%, transparent);
+    --plan-hero-shadow:
+      0 0 10px color-mix(in srgb, var(--el-highlight) 60%, transparent),
+      0 0 26px -4px color-mix(in srgb, var(--el-accent) 70%, transparent);
+    --plan-orb-shadow:
+      0 0 10px color-mix(in srgb, var(--el-highlight) 60%, transparent),
+      0 0 26px -4px color-mix(in srgb, var(--el-accent) 70%, transparent);
+    font-family: var(--font-mono);
+    letter-spacing: 0.04em;
+  }
+}
+@scope ([data-style='cybercore-y2k']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    --plan-hero-fill: linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--el-accent) 88%, black),
+      color-mix(in srgb, color-mix(in srgb, var(--el-accent) 70%, var(--el-highlight)) 78%, black)
+    );
+  }
+}
+@scope ([data-style='cybercore-y2k']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='orb'] {
+    --plan-orb-fill:
+      linear-gradient(
+        160deg,
+        color-mix(in srgb, var(--el-highlight) 22%, transparent),
+        transparent 55%
+      ),
+      radial-gradient(
+        circle at 33% 27%,
+        color-mix(in srgb, var(--el-accent-text) var(--orb-lit-mix), var(--el-accent)),
+        var(--el-accent) 56%,
+        color-mix(in srgb, var(--el-accent) 68%, var(--el-highlight))
+      );
+  }
+}
+
+/* 7 · Aurora — lit from within, colour halo, no hard shadow. */
+@scope ([data-style='aurora']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    --plan-hero-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) var(--aurora-sheen), transparent),
+      0 0 26px -2px color-mix(in srgb, var(--el-accent) var(--aurora-glow), transparent),
+      0 0 40px -6px color-mix(in srgb, var(--el-highlight) var(--aurora-glow), transparent);
+    --plan-orb-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) var(--aurora-sheen), transparent),
+      0 0 26px -2px color-mix(in srgb, var(--el-accent) var(--aurora-glow), transparent),
+      0 0 40px -6px color-mix(in srgb, var(--el-highlight) var(--aurora-glow), transparent);
+  }
+}
+@scope ([data-style='aurora']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    background-size:
+      100% 28%,
+      100% 100%;
+    background-position:
+      top left,
+      top left;
+    background-repeat: no-repeat;
+    --plan-hero-fill:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--el-accent-text) var(--aurora-sheen), transparent),
+        transparent 90%
+      ),
+      linear-gradient(
+        135deg,
+        var(--el-accent),
+        color-mix(in srgb, var(--el-accent) 86%, var(--el-highlight))
+      );
+  }
+}
+
+/* 8 · 3D / Immersive — NOTHING. `--plan-hero-shadow` / `--plan-orb-shadow` own
+   this control's depth and the components read them through a `var()` seam an
+   inline `box-shadow` would otherwise beat (MOTIR-3522). A rule here would
+   either lose to that inline declaration or take a `data-depth="key"` control
+   off the plane ladder it is declared on (docs/styles/3d-immersive.md §4 / §4b).
+   Deliberately empty — recorded so the absence reads as a decision, not an
+   omission. */
+
+/* 9 · Hand-Drawn / Indie — a drawn ink outline + a hand-placed offset.
+   ⚠️ THE `position: relative` IS GUARDED, where the design's transcription
+   states it bare. The orb is `.fixed`, and a fixed element is already a
+   containing block for its own `::after`; re-declaring it `relative` would drop
+   the orb out of fixed positioning entirely. Same `:not(.fixed):not(.absolute)
+   :not(.sticky)` guard this style's own `.border` rule carries, for the same
+   reason it carries it. */
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface='ai-cta']:not(.fixed):not(.absolute):not(.sticky) {
+    position: relative;
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    font-weight: 700;
+    --plan-hero-shadow: 3px 4px 0 -1px color-mix(in srgb, var(--el-border-strong) 55%, transparent);
+    --plan-orb-shadow: 3px 4px 0 -1px color-mix(in srgb, var(--el-border-strong) 55%, transparent);
+  }
+}
+@scope ([data-style='hand-drawn-indie']) to ([data-style]) {
+  [data-surface='ai-cta']::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    pointer-events: none;
+    border: 2px solid var(--el-border-strong);
+    border-radius: inherit;
+    filter: url(#hd-rough);
+  }
+}
+
+/* 10 · Neumorphism — moulded, NOT raised-and-glowing: no gradient, no glow, and
+   the hairline is KEPT (structure never relies on shadow alone). */
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    border: 1px solid color-mix(in srgb, var(--el-accent) 70%, var(--el-text));
+    --plan-hero-shadow:
+      var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow),
+      calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light);
+    --plan-orb-shadow:
+      var(--neu-distance) var(--neu-distance) var(--neu-blur) var(--neu-shadow),
+      calc(var(--neu-distance) * -1) calc(var(--neu-distance) * -1) var(--neu-blur) var(--neu-light);
+  }
+}
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    --plan-hero-fill: none;
+    background-color: var(--el-accent);
+  }
+}
+@scope ([data-style='neumorphism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='orb'] {
+    --plan-orb-fill: none;
+    background-color: var(--el-accent);
+  }
+}
+
+/* 11 · Retrofuturism — a chrome bevel + a CROWN-CONFINED specular streak.
+   ⚠️ THE STREAK IS THE THING THAT HAD TO MOVE, not the bevel. Across the full
+   box the diagonal at `--retro-spec` washes the label to 2.55:1 light / 2.22:1
+   dark, and thinning it does not rescue it (18% still measures 3.67:1 dark, by
+   which point the chrome has stopped reading). Sized to the top band it sits
+   above the cap height, the label sits on the bevel BODY at 6.76:1 / 5.16:1, and
+   the chrome still reads — a machined bevel IS a vertical light-to-dark ramp
+   with a highlight on the crown. The `white` / `black` keywords are this style's
+   own sanctioned lightness mixes, not a hue. */
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='ai-cta'] {
+    border: 1px solid color-mix(in srgb, var(--el-accent-text) 30%, transparent);
+    --plan-hero-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) var(--retro-bevel-light), transparent),
+      0 0 24px -4px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+    --plan-orb-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--el-accent-text) var(--retro-bevel-light), transparent),
+      0 0 24px -4px color-mix(in srgb, var(--el-accent) var(--retro-glow), transparent);
+  }
+}
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='pill'] {
+    background-size:
+      100% 28%,
+      100% 100%;
+    background-position:
+      top left,
+      top left;
+    background-repeat: no-repeat;
+    --plan-hero-fill:
+      linear-gradient(
+        104deg,
+        transparent 30%,
+        color-mix(in srgb, var(--el-accent-text) var(--retro-spec), transparent) 46%,
+        transparent 62%
+      ),
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--el-accent) 82%, white) 0%,
+        var(--el-accent) 20%,
+        color-mix(in srgb, var(--el-accent) 84%, black) 100%
+      );
+  }
+}
+@scope ([data-style='retrofuturism']) to ([data-style]) {
+  [data-surface='ai-cta'][data-ai-cta='orb'] {
+    /* Crown-confined, for the same reason as glass: unbounded it measures
+       3.34:1 light / 2.78:1 dark inside the glyph box. */
+    background-size:
+      100% 26%,
+      100% 100%;
+    background-position:
+      top left,
+      top left;
+    background-repeat: no-repeat;
+    --plan-orb-fill:
+      linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--el-accent-text) var(--retro-bevel-light), transparent),
+        transparent 90%
+      ),
+      radial-gradient(
+        circle at 33% 27%,
+        color-mix(in srgb, var(--el-accent-text) var(--orb-lit-mix), var(--el-accent)),
+        var(--el-accent) 56%,
+        color-mix(in srgb, var(--el-accent) 68%, var(--el-highlight))
+      );
+  }
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
@@ -2533,7 +3328,25 @@
      nobody renders — the base layer IS how the browser reaches these values. */
   --el-status-implemented: color-mix(in srgb, var(--color-accent) 75%, var(--color-charcoal));
   --el-status-in-review: var(--color-primary); /* brand — differentiate from in-progress */
-  --el-status-done: var(--color-success); /* green — resolved */
+  /* green — RESOLVED (MOTIR-3991). The bare --color-success (#1aae39) was
+     2.93:1 on --el-card and 2.69:1 on --el-surface in the BASE palette's LIGHT
+     theme — under 1.4.11's 3:1 for a graphical object, and the one palette x
+     theme in which this token missed the bar. --color-success is NOT free to
+     move: the same Tier-0 hue paints --el-success-surface's companion ink, the
+     success toast/notice family and the chart-success step, each held to its
+     own AA bar that pulls opposite to a dot's 3:1 — so the ramp takes one step
+     of the palette's own emphasis ink instead of re-tuning the source. 85% of
+     --color-success toward --color-charcoal gives #1e9c38, 3.58 / 3.29 / 3.58
+     on card / surface / page-bg. --color-charcoal flips with the theme
+     (#37352f light, #e5e5e5 dark), so the same expression DARKENS on white and
+     LIGHTENS on near-black — dark goes 7.29 / 6.62 / 7.29:1. Both inputs stay
+     palette-tuned, so the nine palettes that ride this base value re-skin it as
+     before and each keeps its own --color-success; ΔE2000 to the nearest
+     sibling stays >= 11.3 in all ten palettes x both themes. Why the base and
+     not a [data-palette='motir'] block: same as --el-status-implemented above —
+     <html> carries no data-appearance-scope, so the base layer IS how the
+     browser reaches these values. */
+  --el-status-done: color-mix(in srgb, var(--color-success) 85%, var(--color-charcoal));
   --el-status-blocked: var(--color-warning); /* amber — can't proceed (gap fixed) */
   --el-status-cancelled: var(--color-steel); /* terminal grey — not red (cancel ≠ error) */
 
@@ -2601,10 +3414,27 @@
   --el-label-4: var(--color-tint-lavender);
   --el-label-5: var(--color-tint-sky);
   --el-label-6: var(--color-tint-yellow);
-  /* Avatar ramp — KEEP the named keys (peach…yellow): lib/projects/avatar.ts persists
-     project.avatarColor ∈ these strings, so numbering them would break stored rows
-     (spec §7.1, rung-2 migration safety). The fallback fixes --el-type-* misuse #2 —
-     the mono initials tile keeps its blue but stops borrowing --el-type-task. */
+  /* Avatar ramp — KEEP the named keys (peach…yellow): they are addressed BY NAME, as
+     literal `bg-(--el-avatar-<key>)` class strings, by
+     `app/(authed)/triage/_components/TriageAvatar.tsx` (a hash of the display name
+     indexes a fixed six-entry array — its ORDER is load-bearing too) and by the
+     `--el-avatar-fallback` initial tiles in
+     `app/(authed)/settings/workspace/_components/gitSettingsPrimitives.tsx` and
+     `app/(authed)/settings/project/code-access/_components/CodeAccessSettings.tsx`.
+     `app/tokens/page.tsx` enumerates all seven. Numbering them would break those
+     lookups, and Tailwind cannot rewrite an arbitrary-value class it never sees.
+     ⚠️ Until MOTIR-4344 this comment reached the same conclusion from MIGRATION
+     safety instead: a module under `lib/projects/` was said to persist a per-project
+     colour column whose values were these key names, so numbering them would break
+     stored rows (spec §7.1, rung-2). Both halves of that warrant went in MOTIR-2680
+     (commit c73fb9112, 2026-08-11, landed in #2046) —
+     `prisma/migrations/20260811223000_drop_project_preset_avatar/migration.sql` drops
+     the column outright ("The values are LOST, deliberately") and the same change
+     deleted the module. The CONCLUSION survived its warrant; the warrant above is the
+     one that is true today. Neither dead address is repeated here on purpose — a
+     citation is only worth as much as the thing it addresses. The fallback fixes
+     --el-type-* misuse #2 — the mono initials tile keeps its blue but stops
+     borrowing --el-type-task. */
   --el-avatar-peach: var(--color-tint-peach);
   --el-avatar-rose: var(--color-tint-rose);
   --el-avatar-mint: var(--color-tint-mint);
@@ -2621,8 +3451,9 @@
   --el-notif-commented: var(--color-info); /* was --el-type-task */
   --el-notif-assigned: var(--color-accent-green); /* was --el-type-story */
   --el-notif-transitioned: var(--color-accent-teal); /* was --el-type-subtask */
-  /* The EXECUTOR badge on a Home row's assignee avatar (Story MOTIR-2649 ·
-     Subtask MOTIR-2653, per design/home/design-notes.md §"The agent state").
+  /* The EXECUTOR badge on a Workbench row's assignee avatar (Story MOTIR-2649 ·
+     Subtask MOTIR-2653, per design/workbench/design-notes.md §"The agent state"
+     — that area was renamed with the surface by MOTIR-4779).
      Same mapping form as --el-notif-mentioned above and for the same reason:
      it resolves to the accent fill today, but owning its own slot means a
      palette can move agent badges without dragging the CTA with them. The
@@ -2964,7 +3795,7 @@
 
    Not part of the Tier-3 layer above and deliberately not named `--el-*`:
    that layer is a COLOUR contract (every member aliases a Tier-0 --color-*
-   and is asserted palette-dependent by tests/theme/paletteTokenCoverage).
+   and is asserted palette-dependent by tests/theme/paletteTokenCoverage.test.ts).
    A knob here is a NUMBER inside a color-mix() — one value for every
    palette and both themes — so it fails both halves of that contract while
    being exactly the thing that has to be expressed once.
@@ -3026,7 +3857,7 @@
    `@layer utilities`; this rule is UNLAYERED, and an unlayered declaration
    outranks a layered one whatever their specificity. That is the whole of the
    mechanism — it does not depend on source order or on this file's position in
-   the `@import` list. Measured, not reasoned: tests/theme/reducedMotionSpinner
+   the `@import` list. Measured, not reasoned: tests/theme/reducedMotionSpinner.test.ts
    reads it back off the COMPILED stylesheet for both consumer shapes.
    ═══════════════════════════════════════════════════════════════════════ */
 @media (prefers-reduced-motion: reduce) {