@nuxtseo/design-system 0.0.0-stage → 0.1.1

package/css/global.css

@@ -0,0 +1,1896 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+/* Type families. A site sets its own in an unlayered `:root` rule; OG images
+   read them from the Tailwind entry instead (README, Brand seams). `--font-title`
+   carries page titles (`.text-title`, `font-title`) and defaults to the display
+   family. The faces load only with `designSystem: { fonts: true }`. */
+@theme {
+  --font-sans: 'Hubot Sans', sans-serif;
+  --font-display: 'Hubot Sans', sans-serif;
+  --font-title: 'Hubot Sans', sans-serif;
+  --font-mono: 'Fira Code', monospace;
+}
+
+/* Tracking token — `tracking-data` utility + `var(--tracking-data)` for the
+   handful of CSS rules (popover/alert/stat-card) that share the same dense
+   tabular-data letter-spacing. `@theme static` because the var is read by
+   global.css rules and would otherwise be tree-shaken when no utility hits. */
+@theme static {
+  --tracking-data: -0.005em;
+}
+
+.ui-slot-text {
+  display: inline-flex;
+  white-space: pre;
+}
+
+.ui-slot-text__slot {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  overflow: hidden;
+  overflow-x: visible;
+  overflow-y: clip;
+  line-height: 1.3;
+  vertical-align: bottom;
+}
+
+.ui-slot-text__sizer {
+  visibility: hidden;
+  white-space: pre;
+}
+
+.ui-slot-text__face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: pre;
+  transition:
+    transform var(--ui-slot-duration, 260ms) var(--ui-slot-easing, cubic-bezier(0.34, 1.56, 0.64, 1)) var(--ui-slot-delay, 0ms),
+    opacity var(--ui-slot-duration, 260ms) var(--ease-standard) var(--ui-slot-delay, 0ms);
+  will-change: transform, opacity;
+}
+
+.ui-slot-text-roll-enter-from {
+  opacity: 0;
+}
+
+.ui-slot-text-roll-leave-to {
+  opacity: 0;
+}
+
+.ui-slot-text--up .ui-slot-text-roll-enter-from {
+  transform: translateY(105%);
+}
+
+.ui-slot-text--up .ui-slot-text-roll-leave-to {
+  transform: translateY(-105%);
+}
+
+.ui-slot-text--down .ui-slot-text-roll-enter-from {
+  transform: translateY(-105%);
+}
+
+.ui-slot-text--down .ui-slot-text-roll-leave-to {
+  transform: translateY(105%);
+}
+
+.ui-slot-text-roll-enter-to,
+.ui-slot-text-roll-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Horizontal scroller edge fade (`useEdgeFade`): mask the side(s) with content
+   off-screen so the strip reads as scrollable. JS sets data-fade-* only while
+   the strip overflows, so a wide viewport never masks. Shared by `UiTabs` and
+   the `ProDataToolbar` metric row. --fade is the ramp width. */
+.ui-edge-fade {
+  --fade: 1.75rem;
+  scrollbar-width: none;
+}
+.ui-edge-fade::-webkit-scrollbar {
+  display: none;
+}
+.ui-edge-fade[data-fade-end] {
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent);
+}
+.ui-edge-fade[data-fade-start] {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade));
+  mask-image: linear-gradient(to right, transparent, #000 var(--fade));
+}
+.ui-edge-fade[data-fade-start][data-fade-end] {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
+}
+
+/* Palette overrides — MUST be `@theme static`.
+   Tailwind v4 tree-shakes any `@theme` variable that no utility class
+   references, so it never lands in `:root`. Nuxt UI's color plugin builds
+   `--ui-color-primary-*: var(--color-violet-*, <stock fallback>)` (and the
+   same for `--color-slate-*`) inside a runtime <style> tag that Tailwind
+   never scans — so without `static` the override is shaken out and the stock
+   fallback wins. `static` forces emission so the overrides actually bind. */
+@theme static {
+  /* Neutral — Nuxt UI resolves `neutral: 'slate'` (app.config) to
+     `--color-slate-*`, NOT `--color-neutral-*`. Slate realigned from its
+     stock hue 257 to 292 (the violet primary hue) and chroma lifted ~2.4x so
+     a clear violet warmth bleeds through every surface; the dashboard reads
+     as a violet-tinted grey rather than a cold blue-grey. Chroma stays low
+     enough that neutrals still read as neutral, not as a colour wash. Dark bg
+     held at 11% lightness so the surface is not near-black. */
+  --color-slate-50: oklch(98.4% 0.005 292);
+  --color-slate-100: oklch(96.8% 0.009 292);
+  --color-slate-200: oklch(92.9% 0.020 292);
+  --color-slate-300: oklch(86.9% 0.033 292);
+  --color-slate-400: oklch(70.4% 0.052 292);
+  --color-slate-500: oklch(55.4% 0.058 292);
+  --color-slate-600: oklch(44.6% 0.056 292);
+  --color-slate-700: oklch(32% 0.050 292);
+  --color-slate-800: oklch(22% 0.044 292);
+  --color-slate-900: oklch(16% 0.036 292);
+  --color-slate-950: oklch(11% 0.029 292);
+
+  /* Primary — Nuxt UI resolves `primary: 'violet'` / `pro: 'violet'` to
+     `--color-violet-*`. Stock Tailwind v4 violet ran chroma .25-.28 at high
+     lightness across the 400-600 band, reading electric against the
+     de-chromatized surface. Rather than cut chroma (which drifts the mids
+     toward gray-mauve), the 300-600 band trades lightness for chroma: darker
+     stops carry full saturation, so primary reads as a deep, rich violet —
+     not bright, not gray. Hue pinned to 292 to match the neutral ramp. Light
+     shoulder (50-200) chroma lifted above a linear ramp so pale tints read as
+     visible lilac, not near-white grey. */
+  --color-violet-50: oklch(97.0% 0.037 292);
+  --color-violet-100: oklch(94.4% 0.065 292);
+  --color-violet-200: oklch(89.5% 0.110 292);
+  --color-violet-300: oklch(76.0% 0.150 292);
+  --color-violet-400: oklch(63.0% 0.180 292);
+  --color-violet-500: oklch(54.0% 0.225 292);
+  --color-violet-600: oklch(48.0% 0.240 292);
+  --color-violet-700: oklch(43.0% 0.230 292);
+  --color-violet-800: oklch(38.0% 0.200 292);
+  --color-violet-900: oklch(33.0% 0.165 292);
+  --color-violet-950: oklch(24.0% 0.120 292);
+}
+
+/* Semantic TEXT legibility — `--text-color-*` outranks `--color-*` for the
+   `text-*` utilities only, so `text-warning` et al resolve through these while
+   bg/border/ring/charts keep Nuxt UI's `--ui-*` defaults (tints, badges and
+   solid fills are untouched). Why: the stock 500 shades fail WCAG on white
+   (amber-500 1.9:1, red-500 3.8:1, green-500 2.2:1, blue-500 3.8:1), so light
+   mode steps each hue down to its lightest AA-passing stop (warning 700 5.0:1,
+   error 700, success 700 5.0:1, info 600 5.3:1). Error takes 700 because 600
+   measured 4.05 to 4.23:1 on its own `bg-error/10` tint, the badge and soft
+   button surface; 700 holds AA there. Dark mode keeps the
+   Nuxt UI per-mode `--ui-*` value (400 shades — already passing). `static`
+   because several consumers reference these via runtime-built class maps. */
+@theme static {
+  --text-color-success: var(--ui-text-success);
+  --text-color-info: var(--ui-text-info);
+  --text-color-warning: var(--ui-text-warning);
+  --text-color-error: var(--ui-text-error);
+  --text-color-amber-400: var(--ui-text-warning);
+  --text-color-amber-500: var(--ui-text-warning);
+  --text-color-green-500: var(--ui-text-success);
+}
+
+/* Primary TEXT seam. This site's violet ramp already passes AA as text, so
+   `text-primary` reads `--ui-primary` unchanged. A site whose primary fails as
+   text on white sets `--ui-text-primary` (e.g. its 700 shade in light mode),
+   the same way the semantic hues above step down. `inline` resolves the
+   fallback on the element, so a scoped `--ui-primary` still applies. */
+@theme inline {
+  --text-color-primary: var(--ui-text-primary, var(--ui-primary));
+}
+
+/* Data-viz seam. Each chart identity slot in `dataVizColors.ts` reads
+   `--ui-viz-<slot>` when a site sets it, and this site's Tailwind hue
+   otherwise. These utilities (`bg-viz-clicks`, `text-viz-clicks`, the `/15`
+   fills) carry the class side; the `hex` field there carries the same
+   property with the hex fallback for SVG paint. `inline` resolves the
+   fallback on the element, so a scoped override applies too.
+
+   Text slots whose hue this file already steps down for AA (amber 400/500
+   read `--ui-text-warning`) keep that step. Period text reads the 600 shade
+   in light mode and the 400 shade in dark, which pass AA on each page.
+
+   Marks need 3:1 against the page (WCAG 1.4.11). A slot whose stock hue falls
+   under that on white reads `--_viz-<slot>` in light mode: the lightest shade
+   of the same hue that clears 3:1 there. Only `.light` sets it. Dark mode
+   falls through to the stock hue, which already passes, so dark charts keep
+   their exact colours. The chart neutral and the semantic chart fills step
+   down the same way. */
+:root {
+  --_viz-current-text: var(--color-blue-600);
+  --_viz-comparison-text: var(--color-purple-600);
+}
+
+.dark {
+  --_viz-current-text: var(--color-blue-400);
+  --_viz-comparison-text: var(--color-purple-400);
+}
+
+.light {
+  --_viz-ctr: var(--color-emerald-600);
+  --_viz-position: var(--color-orange-600);
+  --_viz-users: var(--color-cyan-600);
+  --_viz-inp: var(--color-amber-600);
+  --_viz-device-desktop: var(--color-blue-500);
+  --_viz-device-mobile: var(--color-green-600);
+  --_viz-device-tablet: var(--color-amber-600);
+  --_viz-non-brand: var(--color-emerald-600);
+  --_viz-rank-3: var(--color-emerald-600);
+  --_viz-rank-4: var(--color-orange-600);
+  --_viz-rank-5: var(--color-cyan-600);
+  --_viz-rank-7: var(--color-amber-600);
+  --_viz-rank-9: var(--color-teal-600);
+  --_viz-rank-10: var(--color-rose-500);
+  --_viz-resource-script: var(--color-orange-600);
+  --_viz-resource-image: var(--color-cyan-600);
+  --_viz-category-1: var(--color-blue-500);
+  --_viz-category-2: var(--color-green-600);
+  --_viz-category-3: var(--color-amber-600);
+  --_viz-category-4: var(--color-red-500);
+  --_viz-category-5: var(--color-violet-500);
+  --_viz-neutral: oklch(52% 0.03 292);
+  --_viz-success: var(--color-green-600);
+  --_viz-warning: var(--color-amber-600);
+}
+
+@theme inline {
+  --color-viz-clicks: var(--ui-viz-clicks, var(--color-blue-500));
+  --color-viz-impressions: var(--ui-viz-impressions, var(--color-purple-500));
+  --color-viz-ctr: var(--ui-viz-ctr, var(--_viz-ctr, var(--color-emerald-500)));
+  --color-viz-position: var(--ui-viz-position, var(--_viz-position, var(--color-orange-500)));
+  --color-viz-sessions: var(--ui-viz-sessions, var(--color-blue-500));
+  --color-viz-users: var(--ui-viz-users, var(--_viz-users, var(--color-cyan-500)));
+  --color-viz-pageviews: var(--ui-viz-pageviews, var(--color-purple-500));
+  --color-viz-lcp: var(--ui-viz-lcp, var(--color-blue-500));
+  --color-viz-inp: var(--ui-viz-inp, var(--_viz-inp, var(--color-amber-500)));
+  --color-viz-cls: var(--ui-viz-cls, var(--color-purple-500));
+  --color-viz-current: var(--ui-viz-current, var(--color-blue-500));
+  --color-viz-comparison: var(--ui-viz-comparison, var(--color-purple-500));
+  --color-viz-device-desktop: var(--ui-viz-device-desktop, var(--_viz-device-desktop, var(--color-blue-400)));
+  --color-viz-device-mobile: var(--ui-viz-device-mobile, var(--_viz-device-mobile, var(--color-green-400)));
+  --color-viz-device-tablet: var(--ui-viz-device-tablet, var(--_viz-device-tablet, var(--color-amber-400)));
+  --color-viz-brand: var(--ui-viz-brand, var(--color-violet-500));
+  --color-viz-non-brand: var(--ui-viz-non-brand, var(--_viz-non-brand, var(--color-emerald-500)));
+  --color-viz-rank-1: var(--ui-viz-rank-1, var(--color-blue-500));
+  --color-viz-rank-2: var(--ui-viz-rank-2, var(--color-purple-500));
+  --color-viz-rank-3: var(--ui-viz-rank-3, var(--_viz-rank-3, var(--color-emerald-400)));
+  --color-viz-rank-4: var(--ui-viz-rank-4, var(--_viz-rank-4, var(--color-orange-500)));
+  --color-viz-rank-5: var(--ui-viz-rank-5, var(--_viz-rank-5, var(--color-cyan-500)));
+  --color-viz-rank-6: var(--ui-viz-rank-6, var(--color-pink-500));
+  --color-viz-rank-7: var(--ui-viz-rank-7, var(--_viz-rank-7, var(--color-amber-400)));
+  --color-viz-rank-8: var(--ui-viz-rank-8, var(--color-indigo-400));
+  --color-viz-rank-9: var(--ui-viz-rank-9, var(--_viz-rank-9, var(--color-teal-400)));
+  --color-viz-rank-10: var(--ui-viz-rank-10, var(--_viz-rank-10, var(--color-rose-400)));
+  --color-viz-resource-document: var(--ui-viz-resource-document, var(--color-blue-500));
+  --color-viz-resource-script: var(--ui-viz-resource-script, var(--_viz-resource-script, var(--color-orange-500)));
+  --color-viz-resource-stylesheet: var(--ui-viz-resource-stylesheet, var(--color-purple-500));
+  --color-viz-resource-image: var(--ui-viz-resource-image, var(--_viz-resource-image, var(--color-cyan-500)));
+  --color-viz-resource-font: var(--ui-viz-resource-font, var(--color-pink-500));
+
+  /* Text side. `--ui-viz-<slot>-text` recolours only the `text-viz-<slot>`
+     class, for a mark hue that fails AA as text; unset, text follows the mark. */
+  --text-color-viz-clicks: var(--ui-viz-clicks-text, var(--ui-viz-clicks, var(--color-blue-500)));
+  --text-color-viz-impressions: var(--ui-viz-impressions-text, var(--ui-viz-impressions, var(--color-purple-500)));
+  --text-color-viz-ctr: var(--ui-viz-ctr-text, var(--ui-viz-ctr, var(--_viz-ctr, var(--color-emerald-500))));
+  --text-color-viz-position: var(--ui-viz-position-text, var(--ui-viz-position, var(--_viz-position, var(--color-orange-500))));
+  --text-color-viz-sessions: var(--ui-viz-sessions-text, var(--ui-viz-sessions, var(--color-blue-500)));
+  --text-color-viz-users: var(--ui-viz-users-text, var(--ui-viz-users, var(--_viz-users, var(--color-cyan-500))));
+  --text-color-viz-pageviews: var(--ui-viz-pageviews-text, var(--ui-viz-pageviews, var(--color-purple-500)));
+  --text-color-viz-lcp: var(--ui-viz-lcp-text, var(--ui-viz-lcp, var(--color-blue-500)));
+  --text-color-viz-inp: var(--ui-viz-inp-text, var(--ui-viz-inp, var(--ui-text-warning)));
+  --text-color-viz-cls: var(--ui-viz-cls-text, var(--ui-viz-cls, var(--color-purple-500)));
+  --text-color-viz-current: var(--ui-viz-current-text, var(--ui-viz-current, var(--_viz-current-text)));
+  --text-color-viz-comparison: var(--ui-viz-comparison-text, var(--ui-viz-comparison, var(--_viz-comparison-text)));
+  --text-color-viz-device-desktop: var(--ui-viz-device-desktop-text, var(--ui-viz-device-desktop, var(--_viz-device-desktop, var(--color-blue-400))));
+  --text-color-viz-device-mobile: var(--ui-viz-device-mobile-text, var(--ui-viz-device-mobile, var(--_viz-device-mobile, var(--color-green-400))));
+  --text-color-viz-device-tablet: var(--ui-viz-device-tablet-text, var(--ui-viz-device-tablet, var(--ui-text-warning)));
+  --text-color-viz-brand: var(--ui-viz-brand-text, var(--ui-viz-brand, var(--color-violet-500)));
+  --text-color-viz-non-brand: var(--ui-viz-non-brand-text, var(--ui-viz-non-brand, var(--_viz-non-brand, var(--color-emerald-500))));
+  --text-color-viz-rank-1: var(--ui-viz-rank-1-text, var(--ui-viz-rank-1, var(--color-blue-500)));
+  --text-color-viz-rank-2: var(--ui-viz-rank-2-text, var(--ui-viz-rank-2, var(--color-purple-500)));
+  --text-color-viz-rank-3: var(--ui-viz-rank-3-text, var(--ui-viz-rank-3, var(--_viz-rank-3, var(--color-emerald-400))));
+  --text-color-viz-rank-4: var(--ui-viz-rank-4-text, var(--ui-viz-rank-4, var(--_viz-rank-4, var(--color-orange-500))));
+  --text-color-viz-rank-5: var(--ui-viz-rank-5-text, var(--ui-viz-rank-5, var(--_viz-rank-5, var(--color-cyan-500))));
+  --text-color-viz-rank-6: var(--ui-viz-rank-6-text, var(--ui-viz-rank-6, var(--color-pink-500)));
+  --text-color-viz-rank-7: var(--ui-viz-rank-7-text, var(--ui-viz-rank-7, var(--ui-text-warning)));
+  --text-color-viz-rank-8: var(--ui-viz-rank-8-text, var(--ui-viz-rank-8, var(--color-indigo-400)));
+  --text-color-viz-rank-9: var(--ui-viz-rank-9-text, var(--ui-viz-rank-9, var(--_viz-rank-9, var(--color-teal-400))));
+  --text-color-viz-rank-10: var(--ui-viz-rank-10-text, var(--ui-viz-rank-10, var(--_viz-rank-10, var(--color-rose-400))));
+  --text-color-viz-resource-document: var(--ui-viz-resource-document-text, var(--ui-viz-resource-document, var(--color-blue-500)));
+  --text-color-viz-resource-script: var(--ui-viz-resource-script-text, var(--ui-viz-resource-script, var(--_viz-resource-script, var(--color-orange-500))));
+  --text-color-viz-resource-stylesheet: var(--ui-viz-resource-stylesheet-text, var(--ui-viz-resource-stylesheet, var(--color-purple-500)));
+  --text-color-viz-resource-image: var(--ui-viz-resource-image-text, var(--ui-viz-resource-image, var(--_viz-resource-image, var(--color-cyan-500))));
+  --text-color-viz-resource-font: var(--ui-viz-resource-font-text, var(--ui-viz-resource-font, var(--color-pink-500)));
+}
+
+:root {
+  --ui-text-success: var(--ui-color-success-700);
+  --ui-text-info: var(--ui-color-info-600);
+  --ui-text-warning: var(--ui-color-warning-800);
+  --ui-text-error: var(--ui-color-error-700);
+}
+
+.dark {
+  --ui-text-success: var(--ui-success);
+  --ui-text-info: var(--ui-info);
+  --ui-text-warning: var(--ui-warning);
+  --ui-text-error: var(--ui-error);
+}
+
+:root {
+  /* Let the UA animate to/from intrinsic keywords (height: auto, width:
+     min-content, …). Pure progressive enhancement — unsupported browsers
+     ignore it. Inherited, so declaring once on :root covers the tree. */
+  interpolate-size: allow-keywords;
+
+  /* Pro dashboard container — single source of truth for the page-content
+     width + horizontal padding. Consumed via the `.pro-container` utility
+     defined below; never reach for `max-w-[1128px]` inline. */
+  --pro-container-width: 1280px;
+
+  /* Motion easings — standard for page/content transitions, spring for reveals
+     with subtle overshoot, exit for leave animations that accelerate away. */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* Density — the central spacing knobs. Consumed by UiCard (md size, sm+
+     breakpoint) and ProPageZone (zone margins/gaps); values are re-based to
+     match the shipped rendering, so changing one here retunes the whole
+     surface in a single review. */
+  --density-card-padding: 1.5rem; /* UiCard md body/header padding at sm+ */
+  --density-element-gap: 1.5rem; /* in-zone gap (secondary/tertiary; primary runs 0.5rem tighter) */
+  --density-section-gap: 2.5rem; /* between-zone margin (secondary/tertiary; primary runs 0.5rem tighter) */
+
+  /* ═══ Variable-font type axes (Hubot Sans: wght 200–900, wdth 75–125%) ═══
+     Single source of truth for every typographic axis the semantic text tokens
+     (.text-title/.text-heading/.text-subheading, .font-emphasis/.font-strong,
+     .numerals-display) read from — tune the whole type system here.
+     Defaults live on :root so the tokens work on marketing surfaces too;
+     `.dashboard-theme` overrides to its denser tuning. */
+  --wght-body: 430;
+  --wght-emphasis: 540;
+  --wght-heading: 620;
+  --wght-title: 680;
+  --wght-numeral: 560;
+  --wdth-body: 100%;
+  --wdth-heading: 92%;
+  --wdth-numeral: 95%;
+  --tracking-tight: -0.02em;
+  --tracking-snug: -0.01em;
+  /* Heading sizes are role vars too, so .text-title/.text-heading/.text-subheading
+     resize per context: editorial defaults here, compact override in .dashboard-theme. */
+  --size-title: 1.5rem;
+  --size-heading: 1.125rem;
+  --size-subheading: 1rem;
+
+  /* ═══ Depth & elevation ═══════════════════════════════════════════════
+     Kept outside @theme so Tailwind doesn't inline the values at build time
+     (which would break the runtime .dashboard-theme remap below). Consumed
+     via plain CSS — `box-shadow: var(--elevation-raised)` — never a Tailwind
+     `shadow-*` utility.
+
+     TWO TIERS. Components reference ONLY tier B.
+       Tier A — ingredients (--_depth-*): composable atoms, never used direct.
+       Tier B — presets (--elevation-*): the component-facing API.
+
+     ── Tier A: ingredients ─────────────────────────────────────────────── */
+  --_depth-ambient-low:
+    0 1px 2px rgb(0 0 0 / 0.03),
+    0 1px 5px rgb(0 0 0 / 0.035);
+  --_depth-ambient-high:
+    0 1px 1px 0 rgb(0 0 0 / 0.04),
+    0 2px 6px -2px rgb(0 0 0 / 0.06),
+    0 8px 16px -6px rgb(0 0 0 / 0.08);
+  /* Inset edge: white top highlight (light-from-above) + dark bottom shade. */
+  --_depth-bevel:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.06),
+    inset 0 -1px 0 0 rgb(0 0 0 / 0.04);
+  /* Brand bevel: the popover/tooltip variant — top highlight tinted primary
+     so detached chrome carries a subtle brand edge. */
+  --_depth-bevel-brand:
+    inset 0 1.5px 0 0 color-mix(in srgb, var(--ui-color-primary-400) 26%, transparent),
+    inset 0 -1px 0 0 rgb(0 0 0 / 0.04);
+  --_depth-ring: inset 0 0 0 1px var(--ui-border);
+  --_depth-sheen: linear-gradient(
+    to bottom,
+    rgb(255 255 255 / 0.025),
+    rgb(0 0 0 / 0.015) 60%,
+    rgb(0 0 0 / 0.03)
+  );
+
+  /* ── Tier B: elevation presets (component-facing API) ───────────────────
+       inset    recessed, carved edge, no lift  — resting stat cards, skeletons
+       flat     1px hairline, zero lift         — dashboard cards, table shells
+       raised   resting drop shadow + bevel     — marketing cards, hover states
+       overlay  atmospheric shadow + bevel      — modals, drawers, alerts
+       popover  atmospheric + brand bevel       — tooltip / popover / dropdown
+       emphasis lift + brand bevel, remap-proof — THE one card that matters (max 1/page)
+       hover    accent-tinted halo, hover-only  — buttons, cards, links
+     --surface-raised is the matching top-lit gradient FILL for overlay-tier
+     surfaces (applied as background-image, not box-shadow). */
+  --elevation-inset: var(--_depth-bevel);
+  --elevation-flat: var(--_depth-ring);
+  --elevation-raised: var(--_depth-ambient-low), var(--_depth-bevel);
+  --elevation-overlay: var(--_depth-ambient-high), var(--_depth-bevel);
+  --elevation-popover: var(--_depth-ambient-high), var(--_depth-bevel-brand);
+  /* Emphasis: the single sanctioned in-page contrast move. Deliberately NOT
+     remapped by .dashboard-theme (unlike raised→flat) — it exists so exactly
+     one surface per page can outrank the flat hairline field. Budget: one.
+     Stack = primary-tinted hairline ring + soft brand ambient + lift + brand
+     bevel (the login-panel glow recipe, dialed down to card scale). */
+  --elevation-emphasis:
+    0 0 0 1px color-mix(in oklab, var(--ui-color-primary-400) 35%, var(--ui-border)),
+    0 2px 16px -2px color-mix(in oklab, var(--ui-color-primary-500) 18%, transparent),
+    var(--_depth-ambient-low),
+    inset 0 1.5px 0 0 color-mix(in srgb, var(--ui-color-primary-400) 32%, transparent);
+  --elevation-hover:
+    0 2px 8px -2px color-mix(in oklab, var(--fx-accent) 10%, transparent),
+    0 8px 20px -8px color-mix(in oklab, var(--fx-accent) 8%, transparent);
+  --surface-raised: var(--_depth-sheen);
+
+  /* Hover-FX accent — the tint of --elevation-hover and the cursor FX. Neutral
+     by default; a surface can set `--fx-accent: var(--ui-color-primary-500)`
+     for a brand-tinted lift. */
+  --fx-accent: var(--ui-text);
+
+  /* Focus ring — an interaction-state token, orthogonal to the elevation
+     ladder. Left standalone; not part of the --elevation-* family. The colour
+     is its own token because the ring ships in two forms: a box-shadow halo
+     (--shadow-focus) and the outline every Nuxt UI control draws on
+     `:focus-visible` (see "One focus treatment" below). One tint, both forms.
+     Opaque on purpose: a focus indicator needs 3:1 against the page (WCAG
+     1.4.11), and the old 30% tint measured 1.57:1 on white and 1.28:1 on dark.
+     Primary 500 measures 5.6:1 on white; `.dark` swaps to 400 (5.5:1). */
+  --focus-ring-color: var(--ui-color-primary-500);
+  --shadow-focus: 0 0 0 3px var(--focus-ring-color);
+}
+
+/* ═══ Greydients — the visibility arc ══════════════════════════════════════
+   A curated family of muted, luminous gradients (Nuevo.Tokyo "greydient" genre,
+   derived onto our hue-285 warm-slate + violet). They render the product's core
+   arc — a site moving from UNSEEN to SEEN (unindexed → crawled → discovered →
+   ranked) — as a day-cycle of light. The governing rule: ATMOSPHERE AT THE
+   EDGES, SILENCE AT THE CENTER. Greydients live on threshold + narrative
+   surfaces (auth, hero, empty/preview, share render); the moment real user data
+   appears the near-monochrome discipline takes over. NEVER on dashboard data
+   surfaces (see the Avoid list). Applied only through <UiAtmosphere> / the
+   `.ui-atmosphere` layer below — never as a raw background per surface.
+
+   Kept OUTSIDE @theme (like --elevation-*) so Tailwind never inlines them and
+   the light/dark twin resolves at runtime. Consumed as `background: var(--…)`.
+   Character comes from HUE-TRAVEL + value-shaping at low chroma (≤ 0.04; Dusk's
+   0.085 is the single brand exception), interpolated `in oklch` so the blend
+   stays luminous. Light mode is a pale daylight wash; dark is the dramatic
+   dark→luminous sweep — authored per mode, nothing auto-inverts.
+
+   ink      深夜 unseen      · deep night — OG / share ground, dark cards
+   twilight 黄昏 crawled     · the reference — auth / onboarding front door
+   dawn     暁   discovered  · warm first light — marketing warmth
+   dusk     紫   ranked      · the violet hour — the brand hero (spends color)
+   mist     霞   soft light  · diffuse — the only one calm behind text / previews
+   ash      鼠   baseline    · pure warm-slate grey — neutral rest state */
+:root {
+  --greydient-ink: linear-gradient(135deg in oklch, oklch(93% 0.012 300) 0%, oklch(89% 0.022 300) 55%, oklch(85% 0.03 314) 100%);
+  --greydient-twilight: linear-gradient(135deg in oklch, oklch(95% 0.015 340) 0%, oklch(90% 0.03 350) 48%, oklch(88% 0.025 300) 100%);
+  --greydient-dawn: linear-gradient(135deg in oklch, oklch(94% 0.02 45) 0%, oklch(91% 0.038 30) 50%, oklch(97% 0.012 66) 100%);
+  --greydient-dusk: linear-gradient(135deg in oklch, oklch(95% 0.018 300) 0%, oklch(89% 0.05 293) 46%, oklch(91% 0.02 286) 100%);
+  --greydient-dusk-vivid: linear-gradient(135deg in oklch, var(--ui-color-primary-950) 0%, var(--ui-color-primary-600) 48%, var(--ui-color-primary-800) 100%);
+  --greydient-mist: linear-gradient(135deg in oklch, oklch(96% 0.012 300) 0%, oklch(93% 0.018 330) 52%, oklch(97% 0.01 350) 100%);
+  --greydient-ash: linear-gradient(135deg in oklch, oklch(95% 0.004 285) 0%, oklch(91% 0.008 285) 50%, oklch(87% 0.012 285) 100%);
+}
+
+.dark {
+  --greydient-ink: linear-gradient(135deg in oklch, oklch(13% 0.02 288) 0%, oklch(21% 0.032 300) 55%, oklch(30% 0.045 316) 100%);
+  --greydient-twilight: linear-gradient(135deg in oklch, oklch(17% 0.04 324) 0%, oklch(72% 0.03 350) 48%, oklch(77% 0.032 286) 100%);
+  --greydient-dawn: linear-gradient(135deg in oklch, oklch(30% 0.035 40) 0%, oklch(74% 0.045 24) 50%, oklch(92% 0.018 66) 100%);
+  --greydient-dusk: linear-gradient(135deg in oklch, oklch(20% 0.05 300) 0%, oklch(52% 0.085 292) 46%, oklch(84% 0.028 286) 100%);
+  --greydient-dusk-vivid: linear-gradient(135deg in oklch, var(--ui-color-primary-200) 0%, var(--ui-color-primary-500) 48%, var(--ui-color-primary-300) 100%);
+  --greydient-mist: linear-gradient(135deg in oklch, oklch(66% 0.022 300) 0%, oklch(80% 0.024 330) 52%, oklch(91% 0.014 350) 100%);
+  --greydient-ash: linear-gradient(135deg in oklch, oklch(24% 0.006 285) 0%, oklch(54% 0.01 285) 50%, oklch(82% 0.014 285) 100%);
+}
+
+.dark {
+  /* Dark mode redefines the ingredients; presets inherit via var() automatically. */
+  --_depth-ambient-low:
+    0 1px 2px rgb(0 0 0 / 0.35),
+    0 1px 5px rgb(0 0 0 / 0.22);
+  --_depth-ambient-high:
+    0 1px 1px 0 rgb(0 0 0 / 0.4),
+    0 2px 6px -2px rgb(0 0 0 / 0.35),
+    0 8px 16px -6px rgb(0 0 0 / 0.4);
+  /* Highlight strengthened + shade deepened — a 6% white edge vanishes on
+     dark chrome, and dark surfaces need a heavier settle line. */
+  --_depth-bevel:
+    inset 0 1px 0 0 rgb(255 255 255 / 0.08),
+    inset 0 -1px 0 0 rgb(0 0 0 / 0.2);
+  --_depth-bevel-brand:
+    inset 0 1.5px 0 0 color-mix(in srgb, var(--ui-color-primary-400) 40%, transparent),
+    inset 0 -1px 0 0 rgb(0 0 0 / 0.2);
+  --_depth-sheen: linear-gradient(
+    to bottom,
+    rgb(255 255 255 / 0.04),
+    rgb(255 255 255 / 0.015) 55%,
+    rgb(0 0 0 / 0.04)
+  );
+}
+
+/* Dashboard scope — compact density and a hairline-style card shadow so dense
+   data surfaces sit flat instead of floating. Remapping --elevation-raised to
+   --elevation-flat means every card resolves to the hairline ring here; nothing
+   else changes. Variable-font type axes (wght, wdth, tracking vars) now live on
+   :root as the single source of truth; override them here if the dashboard ever
+   wants denser tuning than the editorial default. */
+.dashboard-theme {
+  /* Density currently matches the editorial defaults (the previous 0.75rem/
+     0.5rem/1.5rem overrides were aspirational — no component read them, and
+     wiring them in as-was would have halved padding on ~130 cards). Tighten
+     deliberately by overriding the --density-* vars here; UiCard md and
+     ProPageZone pick it up everywhere at once. */
+  --elevation-raised: var(--elevation-flat);
+
+  /* Compact heading sizes — the dense dashboard runs titles far smaller than the
+     editorial defaults. Three distinct tiers: title 16 / heading 13 / sub 12. */
+  --size-title: 1rem;
+  --size-heading: 0.8125rem;
+  --size-subheading: 0.75rem;
+}
+
+/* Tabular figures everywhere so numeric columns and KPIs align. */
+.dashboard-theme,
+.dashboard-theme :where(p, span, div, td, th, li, button, input, label, a) {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Dashboard body uses the body family (Hubot Sans, variable) tuned to a
+   slightly-above-Regular weight. The family is set once here and inherited.
+   Set on each element in the list above, this unlayered rule beat the layered
+   `font-mono` utility, so a mono value in a dashboard span rendered in the
+   body face. */
+.dashboard-theme {
+  font-family: var(--font-sans);
+  font-weight: var(--wght-body);
+  font-stretch: var(--wdth-body);
+}
+
+.dashboard-theme :where(h1, h2, h3, h4, h5, h6) {
+  font-weight: var(--wght-heading);
+  font-stretch: var(--wdth-heading);
+  letter-spacing: var(--tracking-snug);
+}
+
+/* Drop the 300ms double-tap-zoom delay on interactive controls (touch). Scoped
+   to controls (zero-specificity :where) so component classes still win and page
+   content keeps normal pinch-zoom. */
+:where(button, a, summary, label, [role="button"], [role="tab"], [role="menuitem"], [role="switch"], [role="option"]) {
+  touch-action: manipulation;
+}
+
+.light {
+  color-scheme: light;
+  /* Bind surfaces to `--ui-color-neutral-*` (Nuxt UI's neutral alias → the
+     hue-292 slate override) rather than stock `--color-neutral-*` (cold hue
+     257), so the documented violet warmth reaches marketing/docs too. The
+     `.dashboard-theme` blocks below already bind this way (to mauve). */
+  --ui-bg: #fff;
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+  /* Text seam. These three sit on Nuxt SEO's violet hue, off the neutral
+     ramp; a site re-hues them by setting `--ui-light-text*` (README). */
+  --ui-text-dimmed: var(--ui-light-text-dimmed, oklch(47.5% 0.052 292));
+  --ui-text-muted: var(--ui-color-neutral-600);
+  --ui-text-toned: var(--ui-color-neutral-700);
+  --ui-text: var(--ui-light-text, oklch(37% 0.044 285));
+  --ui-text-highlighted: var(--ui-light-text-highlighted, oklch(21% 0.042 285));
+  --ui-text-inverted: #fff;
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-100);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+  /* Brand landing dots (nuxtseo-shared/brand): green = a module shipped it,
+     violet = Pro read it back. The tile is the favicon plate. */
+  --nuxtseo-brand-free: oklch(62.7% 0.194 149.2);
+  --nuxtseo-brand-pro: var(--ui-color-primary-500);
+  /* The Pro climb. Deeper on light ground, where the favicon's pale end disappears. */
+  --nuxtseo-brand-gradient-from: #5b21b6;
+  --nuxtseo-brand-gradient-to: #a68af7;
+  --nuxtseo-brand-tile: oklch(21% 0.042 285);
+  --nuxtseo-brand-tile-ink: oklch(98.4% 0.005 292);
+}
+
+.dark {
+  color-scheme: dark;
+  /* Tier ladder in dark: 8.5 → 15 → 21 → 30. The old 7.5 → 13 gap read flat
+     on large surfaces; the new deltas give nav / body / elevated cards a
+     visible hierarchy without breaking the "no pure black" rule. */
+  --ui-bg: var(--ui-color-neutral-950);
+  --ui-bg-muted: var(--ui-color-neutral-900);
+  --ui-bg-elevated: var(--ui-color-neutral-800);
+  --ui-bg-accented: var(--ui-color-neutral-700);
+  --ui-bg-inverted: #fff;
+  --focus-ring-color: var(--ui-color-primary-400);
+  /* Dimmed shares muted's 400 step in dark. The 500 step measured 4.22:1 on
+     bg-default and 2.65:1 on bg-accented, under the 4.5:1 AA floor; 400 holds
+     4.8:1 or more on every surface up to bg-accented. */
+  --ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-400);
+  --ui-text-toned: var(--ui-color-neutral-300);
+  --ui-text: var(--ui-color-neutral-300);
+  --ui-text-highlighted: var(--ui-color-neutral-100);
+  --ui-text-inverted: var(--ui-color-neutral-900);
+  --ui-border: var(--ui-color-neutral-800);
+  --ui-border-muted: var(--ui-color-neutral-800);
+  --ui-border-accented: var(--ui-color-neutral-700);
+  --ui-border-inverted: #fff;
+  --nuxtseo-brand-free: oklch(79.2% 0.209 151.7);
+  --nuxtseo-brand-pro: var(--ui-color-primary-400);
+  --nuxtseo-brand-gradient-from: #6925d5;
+  --nuxtseo-brand-gradient-to: #ddcfff;
+  --nuxtseo-brand-tile: oklch(27% 0.05 292);
+  --nuxtseo-brand-tile-ink: oklch(98.4% 0.005 292);
+}
+
+body {
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  /* Normalize fallback x-height to Hubot's so the swap (and any web-font failure)
+     holds layout — complements @nuxt/fonts' generated metric overrides. */
+  font-size-adjust: from-font;
+  /* Hubot Sans has a full 200–900 weight axis, so faux-bold should never fire;
+     kill WEIGHT synthesis only. Style synthesis is left ON deliberately — Hubot
+     ships no italic master, so `<em>`, blockquote cites and the italic-selection
+     effect all rely on synthesized obliques. (Not `font-synthesis: none`, which
+     would render every italic upright.) */
+  font-synthesis-weight: none;
+  /* The legibility win without `text-rendering: optimizeLegibility` (a layout
+     footgun on long bodies): turn on kerning + common ligatures explicitly. */
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+  text-wrap: balance;
+}
+
+#root, #__nuxt {
+  isolation: isolate;
+}
+
+/* ─── Highlighter text selection ──────────────────────────────────────────────
+   Instead of the native highlight bar, selected text gets a hand-drawn violet
+   marker swipe. CSS `::selection` can't do gradients / slanted ends / rough
+   edges, so the plugin (`app/plugins/selection-highlight.client.ts`) paints an
+   OVERLAY of `.mark` divs over the selection's per-line client-rects. The overlay
+   never mutates the document (selection, copy and live Vue surfaces are all
+   untouched) and paints live during the drag.
+
+   These rules: (1) blank the native highlight, (2) re-assert it inside regions
+   the overlay skips, (3) style the overlay marks, (4) expose the per-theme ink
+   tokens the plugin reads off the selected element. Everything is gated on
+   `html.selection-hl-ready`, a class the plugin adds ONLY when JS runs and
+   reduced-motion is not requested, so the no-JS / reduced-motion fallback keeps
+   the normal native selection. */
+:root {
+  /* Ink tokens (light defaults). `--hl`/`--hl2` are the duotone stroke, `--pool`
+     the ink-pool depth at the bottom edge, `--blend`/`--hlop` how the layer
+     composites, `--streak` the dry-marker texture. Dark overrides below. */
+  --selection-hl: oklch(62% 0.19 292);
+  --selection-hl2: oklch(58% 0.21 326);
+  --selection-pool: oklch(46% 0.22 300 / 0.55);
+  --selection-streak: rgba(255, 255, 255, 0.05);
+  --selection-blend: multiply;
+  --selection-op: 0.56;
+}
+.dark {
+  --selection-hl: oklch(64% 0.18 292);
+  --selection-hl2: oklch(70% 0.16 268);
+  --selection-pool: oklch(74% 0.16 300 / 0.40);
+  --selection-streak: rgba(0, 0, 0, 0.05);
+  --selection-blend: screen;
+}
+
+html.selection-hl-ready ::selection {
+  background-color: transparent;
+  color: inherit;
+}
+html.selection-hl-ready ::-moz-selection {
+  background-color: transparent;
+  color: inherit;
+}
+
+/* Re-assert the native highlight inside regions the overlay never paints (it
+   bails on these — keep in sync with EXCLUDE in selection-highlight.client.ts).
+   Without this the blank above leaves selection invisible there. Placed after the
+   blank so it wins the specificity tie. */
+html.selection-hl-ready :is(input, textarea, [contenteditable], pre, code, .rangi)::selection,
+html.selection-hl-ready :is(input, textarea, [contenteditable], pre, code, .rangi) ::selection {
+  background-color: Highlight;
+  color: HighlightText;
+}
+html.selection-hl-ready :is(input, textarea, [contenteditable], pre, code, .rangi)::-moz-selection,
+html.selection-hl-ready :is(input, textarea, [contenteditable], pre, code, .rangi) ::-moz-selection {
+  background-color: Highlight;
+  color: HighlightText;
+}
+
+/* Overlay container (one per document) + per-theme isolated, blended sub-layers
+   + the marks. Opaque marks inside an isolated group can overlap to close the
+   line gaps without doubling the darkness; blend + translucency live on the
+   group. The rough hand-drawn edge is applied only once a selection settles
+   (`.rough`), since displacing every frame while dragging makes edges crawl. */
+#selection-hl-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 60;
+}
+#selection-hl-layer .group {
+  position: fixed;
+  inset: 0;
+  isolation: isolate;
+}
+#selection-hl-layer .mark {
+  position: fixed;
+  background:
+    repeating-linear-gradient(91deg, transparent 0 9px, var(--mk-streak, transparent) 9px 10px),
+    linear-gradient(180deg, transparent 52%, var(--mk-pool, transparent) 108%),
+    linear-gradient(94deg, transparent 0, var(--mk-hl, transparent) 7px, var(--mk-hl2, transparent) 50%, var(--mk-hl, transparent) calc(100% - 7px), transparent 100%);
+  border-radius: 6px 7px 5px 8px;
+}
+#selection-hl-layer.rough .mark {
+  filter: url(#selection-hl-rough);
+}
+
+
+:root {
+  --scrollbar-track-light: #f1f1f1;
+  --scrollbar-thumb-light: #888;
+  --scrollbar-track-dark: #2c2c2c;
+  --scrollbar-thumb-dark: #555;
+}
+
+html.light {
+  --scrollbar-track: var(--scrollbar-track-light);
+  --scrollbar-thumb: var(--scrollbar-thumb-light);
+}
+
+html.dark {
+  --scrollbar-track: var(--scrollbar-track-dark);
+  --scrollbar-thumb: var(--scrollbar-thumb-dark);
+}
+
+/* scrollbar-width/color are inherited, so set them on the root — propagates to
+   every scroll container without a universal `*` selector forcing a match on
+   every node in the DOM (a style-recalc cost on large docs pages / tables). */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  /* Reserve the gutter whether or not this page needs to scroll. Without it the
+     document scrollbar appears only on tall pages, and every centred column
+     jumps by its width on the way in and out — Settings shows it plainly:
+     Billing and Notifications overflow, General, Members and API tokens do not,
+     so moving between them shifted the content ~10px each time and read as a
+     glitch. */
+  scrollbar-gutter: stable;
+}
+
+/* A `position: fixed` element is laid out against the initial containing block,
+   which EXCLUDES the gutter reserved above. So `inset-0` on a dim overlay stops
+   ~10px short of the right edge and leaves an undimmed strip beside every
+   modal, measured at 1280, 1440, 1920 and 2560 — the dialog itself then centres
+   inside the short box and sits 5px left of the viewport centre.
+
+   Before the gutter was reserved this only showed on pages tall enough to
+   scroll, which is how it reached prod as "the invite modal looks fixed-width".
+   `100vw` includes the gutter by definition. A fixed element contributes no
+   scrollable overflow, so the extra 10px cannot produce a scrollbar of its
+   own. */
+[data-slot="overlay"] {
+  width: 100vw;
+}
+
+/* Same cause, the centred dialog rather than its overlay: `left-1/2` resolves
+   against that same short containing block, so the dialog lands 5px left of the
+   viewport centre. Matched on the utility itself, because a slideover is also
+   `[data-slot="content"]` and is anchored to an edge on purpose. */
+[data-slot="content"][class*="left-1/2"] {
+  left: 50vw;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: .25rem;
+}
+
+/* Thin overlay scrollbar — hidden track, faint thumb that firms up on hover.
+   Opt-in via `.scroll-overlay` on a scroll container (e.g. the dashboard
+   sidebar) so it reads modern without restyling every scroller. Standard
+   props are Baseline; the @supports block is the WebKit/Blink fallback. */
+.scroll-overlay {
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color .2s ease;
+}
+
+.scroll-overlay:hover,
+.scroll-overlay:focus-within {
+  scrollbar-color: var(--scrollbar-thumb) transparent;
+}
+
+@supports not (scrollbar-color: auto) {
+  .scroll-overlay::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .scroll-overlay::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .scroll-overlay::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 9999px;
+    transition: background-color .2s ease;
+  }
+
+  .scroll-overlay:hover::-webkit-scrollbar-thumb,
+  .scroll-overlay:focus-within::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+  }
+}
+
+/* ─── Modern form affordances (2026) ──────────────────────────────────────
+   Progressive enhancements — unsupported browsers fall back to native UA
+   behaviour with no JS. */
+
+/* Brand-tint built-in controls (checkbox / radio / range / progress) so native
+   inputs in prose and raw markup match the violet primary. `accent-color`
+   tracks the active primary, so `.dashboard-theme` keeps it on-palette too.
+   Paired with the per-mode `color-scheme` already set on `.light`/`.dark`. */
+:root {
+  accent-color: var(--ui-color-primary-500);
+}
+
+/* One focus treatment, and it is the brand's. Every Nuxt UI control focuses
+   with `outline-primary/25`, which reads `--ui-primary` — and `apps/site` sets
+   that variable to near-black in light mode and a pale blue in dark (Nuxt UI's
+   "black as primary" trick). So a focused field drew a 3px translucent
+   near-black halo outside the violet inset ring it also turns on: a grey drop
+   shadow around a violet edge, two treatments arguing. Colour the halo from the
+   focus token, and the halo and the ring become one violet edge at the width
+   DESIGN.md asks for.
+
+   Every colour gets it, not only primary: neutral buttons drew `inverted/25`
+   (1.78:1 on white), and the error, success and info controls drew their own
+   25% tint. The 2px offset puts page colour on both sides of the ring, so it
+   holds 3:1 beside a dark solid button as well as beside the page.
+
+   Matched on Nuxt UI's default focus width: only a control that took that
+   default is repainted, and anything that sets its own outline on purpose
+   keeps it. Unlayered on purpose, so it beats the utility. */
+[class*="focus-visible:outline-3"]:focus-visible {
+  outline-color: var(--focus-ring-color);
+  outline-offset: 2px;
+}
+
+/* Autofill: the UA paints a hard yellow fill that ignores `background-color`.
+   Override it via the inset box-shadow trick so autofilled fields read as our
+   surface, keep token text colour, and don't fade back to yellow. */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: var(--ui-text-highlighted);
+  -webkit-box-shadow: 0 0 0 1000px var(--ui-bg-elevated) inset;
+  box-shadow: 0 0 0 1000px var(--ui-bg-elevated) inset;
+  caret-color: var(--ui-text);
+  /* Defeat the UA's delayed fade-to-yellow without animating anything real. */
+  transition: background-color 9999s ease-in-out 0s;
+}
+
+/* Textareas grow to fit their content (vertical only — width stays stable),
+   bounded 3–16 lines so they can't collapse to nothing or run off a card.
+   Native CSS auto-grow; degrades to a fixed box + scroll where unsupported
+   (Firefox). */
+textarea {
+  field-sizing: content;
+  min-block-size: 3lh;
+  max-block-size: 16lh;
+}
+
+/* Figma-style squircle corners on box primitives, as a native progressive
+   enhancement (Chrome 139+). `corner-shape` applies to the border, background
+   and overflow clipping in one declaration, so it needs no JS and renders at
+   SSR with zero hydration morph. `:where()` keeps specificity 0 so anything
+   can still override it. `rounded-full` is excluded deliberately — a
+   superellipse at pill/avatar radius distorts the circle into a blob. Browsers
+   without support ignore the property and keep the round `border-radius`;
+   UiCard additionally falls back to Lisse's clip-path (see `useSquircle`). */
+@supports (corner-shape: squircle) {
+  :where(.rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl) {
+    corner-shape: squircle;
+  }
+}
+
+.page-enter-active,
+.page-leave-active {
+  /* Scope to opacity + transform only: `transition: all` forces the browser to
+     watch every property, and animating `filter: blur()` across a full dashboard
+     subtree (charts + tables) is GPU-expensive and drops frames on every nav.
+     0.12s each way keeps the out-in cross-fade tight (~0.24s total). */
+  transition: opacity 0.12s var(--ease-standard), transform 0.12s var(--ease-standard);
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+/* Auth card content entrance (login / onboarding). These pages set
+   `pageTransition: false`: wrapping their Suspense subtree in Nuxt's page
+   `<Transition>` deadlocks the leave (the leaving page's unmount callback waits
+   on the incoming Suspense and never fires), so the incoming page never mounts
+   and the form stays blank until a hard reload. A mount-triggered CSS animation
+   gives the same fade-in without any Transition/Suspense involvement — it
+   replays whenever the page root element is freshly inserted on navigation. */
+@keyframes auth-content-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.auth-content-in {
+  animation: auth-content-in 0.28s var(--ease-standard) both;
+}
+
+/* Ambient page glow. The diffuse halo is baked into the gradient itself (soft
+   stops fading to transparent) instead of a `filter: blur(180px)` over a
+   viewport-wide fixed element — a 180px blur is one of the most expensive
+   raster operations and re-rasterizes the whole surface on scroll / theme
+   change. `contain: paint` isolates it from the rest of the page. */
+.gradient {
+  position: fixed;
+  top: 10vh;
+  width: 100%;
+  height: 60vh;
+  z-index: -1;
+  background: radial-gradient(60% 60% at 50% 40%, var(--ui-color-primary-200) 0%, color-mix(in oklab, var(--ui-color-primary-300) 60%, transparent) 35%, transparent 70%);
+  opacity: 0.5;
+  contain: paint;
+  pointer-events: none;
+}
+
+.dark .gradient {
+  background: radial-gradient(60% 60% at 50% 40%, var(--ui-color-primary-800) 0%, color-mix(in oklab, var(--ui-color-primary-900) 60%, transparent) 35%, transparent 70%);
+  opacity: 0.18;
+}
+
+@keyframes slide-right {
+  from {
+    transform: scale(0.6) translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes pop {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.slide-right {
+  animation: slide-right 400ms var(--ease-spring) forwards;
+}
+
+.pop {
+  animation: pop 400ms var(--ease-spring) forwards;
+}
+
+/* One-time reveal for a RichSegment `delta` pair (UiRichText) — fades + lifts
+   2px on mount, once, never re-triggers on re-render (a plain `animation`
+   on a freshly-created node runs on mount only, no watcher/class-toggle
+   needed). Ends opaque + untransformed so the reduced-motion override below
+   still lands on the correct final state. */
+@keyframes rich-delta-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.rich-delta-reveal {
+  animation: rich-delta-reveal 400ms var(--ease-spring) both;
+}
+
+/* One-time dot pulse for UiCoverageNote's `partial` state (evidence still
+   growing) — a single soft expand-and-settle, not the infinite
+   `motion-safe:animate-pulse` UiHealthDot/UiSyncDot use for ongoing status.
+   Ends at its resting scale/opacity. */
+@keyframes coverage-dot-pulse-once {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.8);
+    opacity: 0.45;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.coverage-dot-pulse-once {
+  animation: coverage-dot-pulse-once 900ms var(--ease-standard) 1;
+}
+
+.slide-up-enter-active, .slide-up-leave-active {
+  transition: all 0.2s var(--ease-standard);
+}
+.slide-up-enter-from, .slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+/* Unovis chart theming — prevent blinding white grid lines in dark mode.
+   The tooltip vars repeat on the tooltip element itself because a tooltip
+   mounted on `document.body` (UiTopEntityStackChart) is outside the container. */
+.dark :is(.unovis-xy-container, .unovis-single-container, .unovis-tooltip, .vis-tooltip) {
+  --vis-axis-grid-color: var(--ui-border);
+  --vis-axis-tick-color: var(--ui-border);
+  --vis-axis-tick-label-color: var(--ui-text-dimmed);
+  --vis-tooltip-background-color: var(--ui-bg-elevated);
+  --vis-tooltip-border-color: var(--ui-border);
+  --vis-tooltip-text-color: var(--ui-text);
+}
+
+/* SVG ignores font-variant-numeric inheritance from the dashboard root — set it
+   explicitly on Unovis tick labels and tooltip text. Same for crosshair/tooltip
+   wrappers that teleport outside .dashboard-theme. */
+:is(.unovis-xy-container, .unovis-single-container) :is(.vis-axis-tick-label, text) {
+  font-variant-numeric: tabular-nums;
+}
+
+.unovis-tooltip,
+.unovis-crosshair-tooltip,
+.vis-tooltip {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ─── Provisional data (texture channel) ───────────────────────────────────
+   Diagonal hatch marking a mark whose observation is INCOMPLETE: the producer
+   hit a row budget, the window is still filling, or the scope was truncated.
+   The value drawn is a floor, not a count.
+
+   Texture is a third encoding channel alongside position and colour. It NEVER
+   carries severity — colour keeps that job (`semanticColors`) and series
+   identity (`proDataVizColors`), so a hatched mark stays readable in greyscale
+   and the two channels never say different things about the same glyph.
+
+   Ink is thinned so a provisional mark RECEDES against its solid neighbour;
+   incomplete must never read as louder than measured. Colour comes from
+   `currentColor`, so callers set `text-*` (or inherit) and the hatch follows.
+
+   Never hand-roll a repeating-linear-gradient at a call site — DESIGN.md
+   ("Data Visualization → Provisional marks") makes these two the only forms. */
+.provisional-hatch {
+  background-image: repeating-linear-gradient(
+    45deg,
+    color-mix(in oklab, currentColor 72%, transparent) 0 1.5px,
+    transparent 1.5px 6px
+  );
+}
+
+/* Tighter pitch for small glyphs (day pills, legend swatches, table cells).
+   Below ~20px the default pitch collapses to one or two strokes and reads as a
+   smudge rather than a texture. */
+.provisional-hatch-fine {
+  background-image: repeating-linear-gradient(
+    45deg,
+    color-mix(in oklab, currentColor 80%, transparent) 0 1px,
+    transparent 1px 3.5px
+  );
+}
+
+/* Mega menu animations — shared across all header dropdown menus */
+@keyframes mega-menu-enter {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes mega-column-stagger {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes mega-item-fade {
+  from { opacity: 0; transform: translateX(-6px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.mega-menu {
+  animation: mega-menu-enter 0.2s ease-out;
+}
+
+.mega-column {
+  animation: mega-column-stagger 0.25s ease-out backwards;
+  animation-delay: calc(var(--stagger, 0) * 40ms);
+}
+
+.mega-item {
+  animation: mega-item-fade 0.2s ease-out backwards;
+  animation-delay: calc(var(--stagger, 0) * 40ms + var(--item-delay, 0) * 30ms + 80ms);
+}
+
+/* Pro dashboard page container — width + responsive horizontal padding.
+   Every pro dashboard page wrapper (ProPage, ProPageHeader, ProSiteFeaturePage,
+   chat shells, scheduled-reports views) composes this class so the page-width
+   token has one definition. Enforced by the `nuxtseo/pro-container-class`
+   ESLint rule which bans inline `max-w-[1128px]` in /pro/dashboard files. */
+.pro-container {
+  max-width: var(--pro-container-width);
+  margin-inline: auto;
+  @apply px-4 sm:px-6 lg:px-9;
+}
+
+/* Section accent — module-colored section tints (landing sections, docs headers, module-scoped pages) */
+.section-accent-pink { @apply bg-pink-50 dark:bg-pink-500/5 border-pink-200/50 dark:border-pink-500/10; }
+.section-accent-purple { @apply bg-purple-50 dark:bg-purple-500/5 border-purple-200/50 dark:border-purple-500/10; }
+.section-accent-yellow { @apply bg-yellow-50 dark:bg-yellow-500/5 border-yellow-200/50 dark:border-yellow-500/10; }
+.section-accent-green { @apply bg-green-50 dark:bg-green-500/5 border-green-200/50 dark:border-green-500/10; }
+.section-accent-blue { @apply bg-blue-50 dark:bg-blue-500/5 border-blue-200/50 dark:border-blue-500/10; }
+.section-accent-sky { @apply bg-sky-50 dark:bg-sky-500/5 border-sky-200/50 dark:border-sky-500/10; }
+
+/* Dashboard mauve palette: editorial monochrome tone reserved for /pro/dashboard.
+   Marketing/docs pages stay on the warm-slate neutral (hue 285). A site keeps
+   its own ramp here by setting `--ui-dashboard-neutral-<step>` (README). */
+.dashboard-theme {
+  --ui-color-neutral-50: var(--ui-dashboard-neutral-50, var(--color-mauve-50, oklch(98.5% 0 0)));
+  --ui-color-neutral-100: var(--ui-dashboard-neutral-100, var(--color-mauve-100, oklch(96.7% 0.001 286.375)));
+  --ui-color-neutral-200: var(--ui-dashboard-neutral-200, var(--color-mauve-200, oklch(92% 0.004 286.32)));
+  --ui-color-neutral-300: var(--ui-dashboard-neutral-300, var(--color-mauve-300, oklch(87.1% 0.006 286.286)));
+  --ui-color-neutral-400: var(--ui-dashboard-neutral-400, var(--color-mauve-400, oklch(70.5% 0.015 286.067)));
+  --ui-color-neutral-500: var(--ui-dashboard-neutral-500, var(--color-mauve-500, oklch(55.2% 0.016 285.938)));
+  --ui-color-neutral-600: var(--ui-dashboard-neutral-600, var(--color-mauve-600, oklch(44.2% 0.017 285.786)));
+  --ui-color-neutral-700: var(--ui-dashboard-neutral-700, var(--color-mauve-700, oklch(37.4% 0.016 285.822)));
+  --ui-color-neutral-800: var(--ui-dashboard-neutral-800, var(--color-mauve-800, oklch(27.4% 0.006 286.033)));
+  --ui-color-neutral-900: var(--ui-dashboard-neutral-900, var(--color-mauve-900, oklch(21% 0.006 285.885)));
+  --ui-color-neutral-950: var(--ui-dashboard-neutral-950, var(--color-mauve-950, oklch(14.1% 0.005 285.823)));
+}
+
+.light.dashboard-theme {
+  background-color: var(--ui-bg);
+  --ui-bg: #fff;
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+  --ui-text-dimmed: var(--ui-dashboard-light-text-dimmed, oklch(47.5% 0.018 286));
+  --ui-text-muted: var(--ui-color-neutral-600);
+  --ui-text-toned: var(--ui-color-neutral-700);
+  --ui-text: var(--ui-color-neutral-800);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: #fff;
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-100);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+}
+
+.dark.dashboard-theme {
+  background-color: var(--ui-bg);
+  --color-mauve-50: oklch(98.5% 0.002 326);
+  --color-mauve-100: oklch(96.4% 0.005 325.6);
+  --color-mauve-200: oklch(92.5% 0.011 325.62);
+  --color-mauve-300: oklch(86.7% 0.020 325.68);
+  --color-mauve-400: oklch(70.8% 0.032 323.02);
+  --color-mauve-500: oklch(54.7% 0.044 322.5);
+  --color-mauve-600: oklch(44% 0.040 321.78);
+  --color-mauve-700: oklch(34.4% 0.038 323.89);
+  --color-mauve-800: oklch(24.4% 0.032 320.12);
+  --color-mauve-900: oklch(18.9% 0.026 322.12);
+  --color-mauve-950: oklch(14.8% 0.018 326);
+  /* `.dashboard-theme` binds `--ui-color-neutral-*` to these steps on this same
+     element, so the dark values above flow through without a second binding. */
+
+  /* Mauve 400 measures 4.48:1 on mauve 700 (bg-accented), so muted and dimmed
+     share one step just above it: 4.6:1 there, 7.7:1 on bg-default. */
+  --ui-text-dimmed: var(--ui-dashboard-dark-text-dimmed, oklch(71.5% 0.032 323));
+  --ui-text-muted: var(--ui-dashboard-dark-text-muted, oklch(71.5% 0.032 323));
+  --ui-text-toned: var(--ui-color-neutral-300);
+  --ui-text: var(--ui-color-neutral-200);
+  --ui-text-highlighted: #fff;
+  --ui-text-inverted: var(--ui-color-neutral-900);
+  --ui-bg: var(--ui-color-neutral-950);
+  --ui-bg-muted: var(--ui-color-neutral-900);
+  --ui-bg-elevated: var(--ui-color-neutral-800);
+  --ui-bg-accented: var(--ui-color-neutral-700);
+  --ui-bg-inverted: #fff;
+  --ui-border: var(--ui-color-neutral-800);
+  --ui-border-muted: var(--ui-color-neutral-700);
+  --ui-border-accented: var(--ui-color-neutral-700);
+  --ui-border-inverted: #fff;
+}
+
+/* Surface utility for hero/feature/pricing cards on marketing pages.
+   One source of truth for the translucent card treatment — tune here, not per-page.
+   Tier: "feature" cards in the radius-by-elevation rule (rounded-xl / 12px). */
+.surface-soft {
+  background-color: color-mix(in oklab, var(--ui-bg) 60%, transparent);
+  border: 1px solid var(--ui-border);
+  border-radius: 0.75rem;
+  box-shadow: var(--elevation-raised);
+  transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
+}
+
+.dark .surface-soft {
+  background-color: color-mix(in oklab, var(--ui-bg-elevated) 5%, transparent);
+}
+
+.surface-soft:hover {
+  border-color: var(--ui-border-accented);
+}
+
+/* Marketing links/cards — shared landing-page surfaces built on semantic tokens. */
+.surface-link {
+  @apply relative block h-full rounded-lg ring-1 ring-default bg-default transition-all hover:ring-accented hover:bg-muted/50;
+}
+
+.surface-stat {
+  @apply p-5;
+  background-color: color-mix(in oklab, var(--ui-bg) 60%, transparent);
+  border: 1px solid var(--ui-border);
+  border-radius: 0.75rem;
+  box-shadow: var(--elevation-raised);
+  transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
+}
+
+.dark .surface-stat {
+  background-color: color-mix(in oklab, var(--ui-bg-elevated) 5%, transparent);
+}
+
+.surface-stat:hover {
+  border-color: var(--ui-border-accented);
+}
+
+.marketing-pill {
+  @apply inline-flex items-center gap-2 rounded-full bg-default text-highlighted ring-1 ring-default shadow-sm transition-all;
+}
+
+.marketing-label {
+  @apply inline-flex items-center gap-2 rounded-full bg-default ring-1 ring-default text-xs font-semibold tracking-wide text-highlighted;
+}
+
+/* Inset surface for nested content (code rows, mini-stats, whispered panels)
+   one tier deeper than surface-soft. Used inside cards. */
+.surface-inset {
+  background-color: var(--ui-bg-muted);
+  border: 1px solid var(--ui-border-muted);
+}
+
+.dark .surface-inset {
+  background-color: color-mix(in oklab, var(--ui-bg) 50%, var(--ui-bg-muted));
+}
+
+/* ═══ Atmosphere — the greydient application layer ═════════════════════════
+   Rendered through <UiAtmosphere>. Three axes tuned here ONCE:
+     palette   — which --greydient-* (set via --_atmo-greydient)
+     geometry  — sky | bloom | wash | veil  (position + mask)
+     intensity — subtle | ambient | present | vivid (opacity, mode-aware)
+   The .dark overrides are GLOBAL on purpose: a scoped `:global(.dark) .x` rule
+   collapses to a bare `.dark {}` and dims the whole app (learned the hard way).
+   Consumers never hand-roll masks/opacity again — they pick intent. */
+.ui-atmosphere {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background-image: var(--_atmo-greydient, var(--greydient-ash));
+  opacity: var(--_atmo-op, 0.6);
+}
+
+/* intensity → opacity (light) */
+.ui-atmosphere[data-intensity="subtle"] { --_atmo-op: 0.45; }
+.ui-atmosphere[data-intensity="ambient"] { --_atmo-op: 0.6; }
+.ui-atmosphere[data-intensity="present"] { --_atmo-op: 0.78; }
+.ui-atmosphere[data-intensity="vivid"] { --_atmo-op: 0.58; }
+/* intensity → opacity (dark — quieter so data/text stays the signal) */
+.dark .ui-atmosphere[data-intensity="subtle"] { --_atmo-op: 0.14; }
+.dark .ui-atmosphere[data-intensity="ambient"] { --_atmo-op: 0.26; }
+.dark .ui-atmosphere[data-intensity="present"] { --_atmo-op: 0.38; }
+.dark .ui-atmosphere[data-intensity="vivid"] { --_atmo-op: 0.58; }
+
+/* geometry → position + mask */
+.ui-atmosphere[data-geometry="sky"] {
+  inset: 0 0 auto 0;
+  height: 70vh;
+  mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
+  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
+}
+.ui-atmosphere[data-geometry="bloom"] {
+  mask-image: radial-gradient(58% 50% at 50% 38%, black, transparent 76%);
+  -webkit-mask-image: radial-gradient(58% 50% at 50% 38%, black, transparent 76%);
+}
+.ui-atmosphere[data-geometry="wash"] {
+  mask-image: radial-gradient(92% 120% at 16% 22%, black, transparent 76%);
+  -webkit-mask-image: radial-gradient(92% 120% at 16% 22%, black, transparent 76%);
+}
+/* veil = full scrim tint over a faded preview; no mask, softer by default */
+
+/* grain — baked in, static (soft-light so it reads as tooth, not dirt) */
+.ui-atmosphere[data-grain]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+  mix-blend-mode: soft-light;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-size: 200px 200px;
+}
+
+/* ═══ Semantic type tokens ═══════════════════════════════════════════════
+   Each bundles every Hubot Sans axis (family + size + weight + width + tracking
+   + leading) for its role, all read from the :root wght/wdth/tracking vars — so
+   the whole type system tunes from one place. Headings are full "super tokens";
+   .font-emphasis/.font-strong are the orthogonal weight axis for body text
+   (combine with text-sm, text-xs, .text-mini). */
+
+/* Page title — the largest in-page heading (page headers, hero metrics). Size is
+   a role var so it stays editorial on marketing, compact inside .dashboard-theme. */
+.text-title {
+  font-family: var(--font-title);
+  font-size: var(--size-title);
+  font-weight: var(--wght-title);
+  font-stretch: var(--wdth-heading);
+  letter-spacing: var(--tracking-tight);
+  line-height: 1.15;
+  text-wrap-style: balance;
+}
+
+/* Section heading — groups of cards / a titled region within a page. */
+.text-heading {
+  font-family: var(--font-display);
+  font-size: var(--size-heading);
+  font-weight: var(--wght-heading);
+  font-stretch: var(--wdth-heading);
+  letter-spacing: var(--tracking-snug);
+  line-height: 1.3;
+  text-wrap: balance;
+}
+
+/* Subheading — card / group title, one tier below a section heading. Carries the
+   lighter emphasis weight (not full heading weight) so it stays distinct from
+   .text-heading even where their sizes sit close in the dense dashboard. */
+.text-subheading {
+  font-family: var(--font-display);
+  font-size: var(--size-subheading);
+  font-weight: var(--wght-emphasis);
+  font-stretch: var(--wdth-heading);
+  letter-spacing: var(--tracking-snug);
+  line-height: 1.35;
+  text-wrap: balance;
+}
+
+/* Body weight axis — emphasis (slightly bold) and strong (heading-weight) for
+   inline/body text. Weight only; pair with a size token. Both read the vars so
+   weight tunes centrally instead of via raw font-medium/font-semibold. */
+.font-emphasis {
+  font-weight: var(--wght-emphasis);
+}
+.font-strong {
+  font-weight: var(--wght-heading);
+}
+
+/* Stat numerals — display-font tabular figures for counters, KPIs, big numbers.
+   Size-agnostic (figures vary); weight/width read the numeral axis vars. */
+.numerals-display {
+  font-family: var(--font-display);
+  font-weight: var(--wght-numeral);
+  font-stretch: var(--wdth-numeral);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'tnum' 1, 'ss01' 1, 'lnum' 1;
+}
+
+/* Heavier numeral weight step — layers on top of .numerals-display (same
+   family/stretch/tabular features), stepping only the weight up the --wght
+   axis. Same-specificity selector defined after .numerals-display, so source
+   order resolves the font-weight conflict for elements carrying both classes.
+   Use for the side of a pair that should read as the "current" or hero value
+   (a delta's `to`, a lone metric standing in for a whole sentence) — never
+   both sides of a pair at once, that would cancel the emphasis. */
+.numerals-display-heavy {
+  font-weight: var(--wght-heading);
+}
+
+/* Description text — the muted subtitle that sits under a title in page headers
+   (PageHeader, ProPageHeader, auth screens). One token so size / leading / color
+   stay locked together. Re-based onto text-xs(12) when .text-dense was retired. */
+.text-description {
+  @apply text-xs text-muted leading-snug;
+}
+
+/* Mini — the 10px micro tier below Tailwind's 12px floor: metadata, captions,
+   timestamps, tiny chart/tooltip labels, badges, kbd, micro figures. Size only;
+   color (usually dimmed) at call site. Absorbed the retired .text-meta (11→10).
+   For 12px+ use Tailwind primitives (text-xs/sm/…) directly. */
+.text-mini {
+  @apply text-[10px];
+}
+
+/* Label — the dense uppercase-tracked chrome label inside the dashboard:
+   column headers, metric/filter labels, stat captions. Consolidates a sprawl
+   of 10–12px uppercase combos (varying weight/tracking) onto one spec.
+   Color is a muted DEFAULT baked in: at 10px this is normal text for WCAG, and
+   the old `text-label text-dimmed` idiom measured 4.22:1 on bg-default in dark
+   (3.61 on bg-elevated) — under the 4.5:1 AA floor. Muted lands at 7.67:1 and
+   still recedes behind the data. In @layer components so the call sites that
+   need primary/success/current keep overriding it (an unlayered rule would beat
+   the utility and silently force muted). */
+@layer components {
+  .text-label {
+    @apply text-[10px] font-semibold uppercase tracking-wider;
+    color: var(--ui-text-muted);
+  }
+}
+
+/* Micro label — the 9px tier below .text-label, for the tiniest tags (table
+   corner flags, inline status pills). Same uppercase-tracked treatment. */
+.text-micro {
+  @apply text-[9px] uppercase tracking-wider;
+}
+
+/* Inline code chip — one definition for `<code>` inside prose / UI so the mono
+   size, tint and padding stop drifting (bg-elevated vs bg-muted, text-mini vs
+   text-xs, varying px were all in the wild). Relative size scales with context. */
+.code-inline {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background-color: var(--ui-bg-muted);
+  color: var(--ui-text);
+  border-radius: 0.25rem;
+  padding: 0.0625rem 0.3125rem;
+}
+
+/* ─── Overlay chrome (UiPopover / UDropdownMenu / UContextMenu / USelectMenu) ───
+   Tooltip-grade depth without gradient surfaces. Inset edges create the bevel.
+   shadow-sm tier is permitted here per DESIGN.pro.md (overlays only). */
+.ui-popover-content {
+  background-image: var(--surface-raised);
+  box-shadow: var(--elevation-popover) !important;
+  letter-spacing: var(--tracking-data);
+  -webkit-font-smoothing: antialiased;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Alert depth — same tooltip-grade bevel as .ui-popover-content, tuned for
+   inline alert containers. Pairs with the color-tinted bg/border from Alert.vue. */
+.ui-alert {
+  background-image: var(--surface-raised);
+  box-shadow: var(--elevation-overlay);
+  letter-spacing: var(--tracking-data);
+  -webkit-font-smoothing: antialiased;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Menu item hover: outline-ring (no bg fill, no layout shift) — matches the
+   UiTooltipGrid active-cell vocabulary. Active/selected gets a left accent bar. */
+.ui-dropdown-item {
+  position: relative;
+  /* Transparent base outline so transition-colors fades to the accent on
+     highlight instead of animating from the initial outline-color (invert/
+     currentColor), which flashed white when switching the selected item. */
+  outline: 1.5px solid transparent;
+  outline-offset: -2px;
+}
+.ui-dropdown-item:where([data-highlighted], :hover, :focus-visible) {
+  outline-color: var(--ui-border-accented);
+}
+.ui-dropdown-item:where([data-state="checked"], [aria-checked="true"], [aria-selected="true"])::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  bottom: 4px;
+  width: 2px;
+  border-radius: 999px;
+  background: var(--ui-text);
+  opacity: 0.55;
+}
+
+.ui-dropdown-separator {
+  border-top-width: 1px;
+}
+
+/* Disclosure (UiDisclosure) — native <details>. Chromium animates the content
+   block to its intrinsic height via interpolate-size + ::details-content;
+   Firefox/Safari toggle instantly (graceful degradation, no JS fallback). */
+.ui-disclosure {
+  interpolate-size: allow-keywords;
+}
+
+.ui-disclosure::details-content {
+  block-size: 0;
+  overflow: clip;
+  transition:
+    block-size 200ms var(--ease-standard),
+    content-visibility 200ms allow-discrete;
+}
+
+.ui-disclosure[open]::details-content {
+  block-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-dropdown-item,
+  .ui-disclosure::details-content {
+    transition: none !important;
+  }
+
+  /* Pure-CSS animations/transitions don't go through motion-v's
+     useReducedMotion() gate, so disable them here. Elements still settle on
+     their final (visible) state because every keyframe/transition above ends
+     opaque and untransformed. */
+  .page-enter-active,
+  .page-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: none !important;
+  }
+
+  .auth-content-in {
+    animation: none !important;
+  }
+
+  .slide-right,
+  .pop,
+  .mega-menu,
+  .mega-column,
+  .mega-item,
+  .rich-delta-reveal,
+  .coverage-dot-pulse-once {
+    animation: none !important;
+  }
+}
+
+/* Leading icon in dropdown/context/select menus rendered like ProNavIcon:
+   primary-tinted rounded square behind the iconify mask. The icon span is
+   mask-rendered (no children, no own background possible), so ::before draws
+   the container behind it. Light + dark variants. */
+/* The icon span is mask-rendered; ::before tricks behind it get clipped by
+   sibling stacking contexts. Use double box-shadow instead — paints rings
+   OUTSIDE the icon's box, creating a visible tinted container. */
+.ui-dropdown-lead-icon {
+  border-radius: 4px;
+  margin-inline: 4px;
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--ui-color-primary-400) 14%, transparent),
+    0 0 0 5px color-mix(in srgb, var(--ui-color-primary-400) 24%, transparent);
+  transition: box-shadow 140ms ease-out;
+}
+.dark .ui-dropdown-lead-icon {
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--ui-color-primary-700) 22%, transparent),
+    0 0 0 5px color-mix(in srgb, var(--ui-color-primary-600) 30%, transparent);
+}
+/* Highlighted/hovered — container picks up a bit more primary. */
+[data-highlighted] .ui-dropdown-lead-icon,
+.ui-dropdown-item:hover .ui-dropdown-lead-icon {
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--ui-color-primary-400) 22%, transparent),
+    0 0 0 5px color-mix(in srgb, var(--ui-color-primary-400) 36%, transparent);
+}
+.dark [data-highlighted] .ui-dropdown-lead-icon,
+.dark .ui-dropdown-item:hover .ui-dropdown-lead-icon {
+  box-shadow:
+    0 0 0 4px color-mix(in srgb, var(--ui-color-primary-600) 35%, transparent),
+    0 0 0 5px color-mix(in srgb, var(--ui-color-primary-500) 45%, transparent);
+}
+
+/* Focused surface (auth screens + onboarding wizard). UiCard's translucent fill
+   (bg-elevated at 5–35%) is tuned for the dashboard's recessed backdrop; on the
+   focused surface's near-white base that leaves cards ~1% off the page, so they
+   read as empty outlines. Make the fill opaque here so onboarding/auth cards are
+   legible. Dashboard cards are outside `.ui-focused` and keep their translucency.
+   The emphasis card's shadow is an inline style and survives this. */
+.ui-focused [data-ui-card] {
+  background-color: var(--ui-bg-elevated);
+}
+
+/* ─────────────────────────────── Docs prose ───────────────────────────────
+   Markdown rendering fixes that belong to the renderer, not to any one page.
+   Every selector keys on a `prose-*` hook added by `prose.*` in
+   `app/app.config.ts`, so one rule reaches docs, learn-seo and recipes, and
+   module Markdown in ~/pkg stays untouched. These rules are unlayered on
+   purpose: Nuxt UI's prose themes ship arbitrary variants such as
+   `[&>code]:border-dashed` in `@layer utilities`, which a layered rule of the
+   same specificity would lose to. */
+
+/* Inline code must never set the page's min-content width. API headings carry
+   type signatures with no break opportunity ("urls:
+   MaybeFunction<MaybePromise<SitemapUrlInput[]>>"), which scrolled the whole
+   document sideways at 390px. */
+code.prose-code {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+/* …except inside a table cell. A cell is sized from its min-content width, and
+   `anywhere` makes that one character, so the auto table layout crushed the
+   Type column of every API table into a four-line sliver at 390px
+   ("string | string[]" read as "stri / ng | / stri / ng[]"). The table root
+   scrolls, so the extra width has somewhere to go: break a token only when the
+   token alone cannot fit, which leaves the column as wide as its longest word.
+   `break-word` is the load-bearing value here — it does not feed back into
+   min-content sizing the way `anywhere` does. */
+:is(.prose-table th, .prose-table td) code.prose-code {
+  overflow-wrap: break-word;
+}
+
+/* A table wider than the article scrolls inside its own container, and nothing
+   at the border said so: the last column of a five-column table just stopped,
+   which reads as a four-column table. Two `local` covers ride with the content
+   and two `scroll` shadows stay pinned to the container, so an edge is shaded
+   exactly while there is more table past it and clean once you reach the end.
+   The shadows sit under the cells, so they show against the body rows; the
+   header keeps its own tinted fill. */
+.prose-table-scroll {
+  background-image:
+    linear-gradient(to right, var(--ui-bg), transparent),
+    linear-gradient(to left, var(--ui-bg), transparent),
+    linear-gradient(to right, color-mix(in oklab, var(--ui-text) 28%, transparent), transparent),
+    linear-gradient(to left, color-mix(in oklab, var(--ui-text) 28%, transparent), transparent);
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-repeat: no-repeat;
+  background-size: 3rem 100%, 3rem 100%, 1.25rem 100%, 1.25rem 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+
+/* A fenced code block scrolls; it never wraps. Nuxt UI ships the `pre` as
+   `whitespace-pre-wrap wrap-break-word`, which broke a URL, a token or a type
+   signature mid-token with nothing to say the break was not in the code — and
+   because nothing ever overflowed, `overflow-x: auto` never produced a
+   scrollbar (`scrollWidth === clientWidth` on every block measured). Keep the
+   line intact and let the block scroll. Inline code in prose and in table cells
+   still wraps: the rules above are scoped to `code.prose-code`, and a fenced
+   block's `code` child carries no such class. */
+pre.prose-pre {
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+  overflow-x: auto;
+  /* A sideways flick inside the block must not chain to the page or to the
+     browser's back gesture. */
+  overscroll-behavior-x: contain;
+}
+
+/* The token stream inside a fenced block is never its own surface. Nuxt UI's
+   callout theme fills every descendant `code` with `bg-default`, which is right
+   for an inline pill and wrong for a fenced block: it painted an opaque white
+   band across the block inside a tip callout, ending where the longest line
+   ended, so the block read as a mis-sized inner element. The fill is dropped
+   for every fenced block, not only in a callout, so the next rule that tints
+   `code` cannot leak into one either. */
+pre.prose-pre > code {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* The scroll has to announce itself, and it has to do it while the pointer is
+   somewhere else. Two `local` covers ride with the content and two `scroll`
+   shadows stay pinned, so an edge is shaded exactly while there is more code
+   past it — the same treatment the wide-table container carries, keyed to the
+   block's own `bg-muted` surface. The track is drawn too: the document
+   scrollbar palette is a flat grey pair, so a block on `bg-muted` takes a track
+   and thumb mixed from the text colour and reads in both themes. */
+pre.prose-pre {
+  scrollbar-width: thin;
+  scrollbar-color:
+    color-mix(in oklab, var(--ui-text) 32%, transparent)
+    color-mix(in oklab, var(--ui-text) 9%, transparent);
+  background-image:
+    linear-gradient(to right, var(--ui-bg-muted), transparent),
+    linear-gradient(to left, var(--ui-bg-muted), transparent),
+    linear-gradient(to right, color-mix(in oklab, var(--ui-text) 28%, transparent), transparent),
+    linear-gradient(to left, color-mix(in oklab, var(--ui-text) 28%, transparent), transparent);
+  background-position: 0 0, 100% 0, 0 0, 100% 0;
+  background-repeat: no-repeat;
+  background-size: 2rem 100%, 2rem 100%, 1rem 100%, 1rem 100%;
+  background-attachment: local, local, scroll, scroll;
+}
+/* …except inside a callout, which tints its own code block from the callout's
+   hue (see the `div.prose-callout pre` rule below). A cover keyed to `bg-muted`
+   paints a grey smear over that tint at both edges, so there the scrollbar
+   carries the affordance alone. */
+div.prose-callout pre.prose-pre {
+  background-image: none;
+}
+
+pre.prose-pre::-webkit-scrollbar {
+  height: 8px;
+}
+pre.prose-pre::-webkit-scrollbar-track {
+  background-color: color-mix(in oklab, var(--ui-text) 9%, transparent);
+  border-radius: 9999px;
+}
+pre.prose-pre::-webkit-scrollbar-thumb {
+  background-color: color-mix(in oklab, var(--ui-text) 32%, transparent);
+  border-radius: 9999px;
+}
+
+/* The external-link arrow on outbound prose links lives in
+   build/external-links.ts: its own-site hosts are a build option. */
+
+/* Inline code inside a link. `prose.code` is an atomic inline (`inline-block`
+   with its own fill), so the link underline stopped at the pill and the pill's
+   6px side padding read as a gap before the next word ("AiBots  constant").
+   Inside a link the code keeps the mono face and drops the pill, so the
+   underline runs unbroken and the gap disappears. */
+a.prose-link > code {
+  /* `inline-block` is an atomic inline: the link's underline stops at its edge
+     whatever the fill is, so the display change is load-bearing here. */
+  display: inline;
+  background-color: transparent;
+  border-color: transparent;
+  padding-inline: 0;
+  color: inherit;
+}
+
+/* Callout. Nuxt UI lays the icon out as an inline box and expects the first
+   paragraph to be unwrapped (`mdc-unwrap="p"`); comark keeps the `<p>`, so the
+   icon was pushed onto a line of its own. Give it a fixed gutter instead, and
+   flatten the paragraph margins the unwrap used to remove. */
+div.prose-callout:has(> .prose-callout-icon) {
+  padding-inline-start: 2.5rem;
+}
+div.prose-callout > .prose-callout-icon {
+  position: absolute;
+  inset-inline-start: 1rem;
+  top: 0.9375rem;
+  margin-inline-end: 0;
+}
+div.prose-callout > p {
+  margin-block: 0;
+}
+div.prose-callout > p + * {
+  margin-block-start: 0.625rem;
+}
+
+/* Callout body copy is body copy. Nuxt UI tints the whole block with
+   `text-{color}-600 dark:text-{color}-300`, so an info callout read as a blue
+   paragraph and a tip callout as a green one — the hue said "this sentence is
+   special" when it only meant "this is a note". The icon, the hairline border
+   and the low-alpha fill carry the semantic hue; the sentence does not. Links
+   and the icon set their own colour on themselves, so they are untouched. */
+div.prose-callout {
+  color: var(--ui-text);
+}
+
+/* Inline code inside a callout. Nuxt UI fills the pill with `bg-default` and a
+   full border, which punched a hard white hole through the tinted fill and made
+   a package name heavier than the sentence holding it. Derive the pill from the
+   callout it sits in: a faint tint of its own colour, a hairline of the same
+   hue, no second surface. `currentcolor` keeps one rule correct for all nine
+   callout colours and both themes. */
+div.prose-callout :not(pre) > code {
+  background-color: color-mix(in oklab, currentcolor 10%, transparent);
+  border-color: color-mix(in oklab, currentcolor 20%, transparent);
+}
+
+/* A `pre` inside a callout is a real code block, not a pill, so it keeps a
+   surface of its own — but `bg-default` made it a white card floating in the
+   green fill of a tip. Tint it from the callout instead, and let its `code`
+   child stay a bare token stream: the pill treatment above is scoped to
+   inline code for exactly this reason. */
+div.prose-callout pre {
+  background-color: color-mix(in oklab, currentcolor 6%, transparent);
+  border-color: color-mix(in oklab, currentcolor 18%, transparent);
+}
+
+/* Package-manager tabs. Five full-colour brand marks (npm red, yarn blue, pnpm
+   yellow, bun pink) against a near-monochrome page are a wash, not a pop: the
+   strip out-shouted the command it labels. Desaturate every tab until it is the
+   selected one, which is also the one piece of state the strip has to show. */
+.prose-code-tab .prose-code-tab-icon {
+  filter: grayscale(1);
+  opacity: 0.6;
+  transition:
+    filter 150ms var(--ease-standard, ease),
+    opacity 150ms var(--ease-standard, ease);
+}
+.prose-code-tab[data-state='active'] .prose-code-tab-icon {
+  filter: none;
+  opacity: 1;
+}
+
+/* API reference property entries. Every module's API page writes a property as
+   `## `name: Type`{lang="ts"}` followed by a one-item `- Default: x` list. The
+   pill read as a stray chip and the list as a stray bullet, with nothing
+   separating one property from the next. Render the heading as a real entry
+   header over a hairline, and the metadata list as a quiet row. */
+h2.prose-h2:has(> code:only-child),
+h3.prose-h3:has(> code:only-child) {
+  margin-top: 2.5rem;
+  margin-bottom: 0.5rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--ui-border);
+}
+h2.prose-h2:first-child:has(> code:only-child),
+h3.prose-h3:first-child:has(> code:only-child) {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+h2.prose-h2 > code:only-child,
+h3.prose-h3 > code:only-child {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--ui-text-highlighted);
+  font-size: inherit;
+  font-weight: inherit;
+}
+h2.prose-h2:has(> code:only-child) + ul.prose-ul,
+h3.prose-h3:has(> code:only-child) + ul.prose-ul {
+  margin-block: 0;
+  padding-inline-start: 0;
+  list-style: none;
+  font-size: 0.875rem;
+  color: var(--ui-text-muted);
+}
+h2.prose-h2:has(> code:only-child) + ul.prose-ul > li,
+h3.prose-h3:has(> code:only-child) + ul.prose-ul > li {
+  margin-block: 0;
+  padding-inline-start: 0;
+  line-height: 1.5rem;
+}