/**
 * CUBE cascade entry — bundled by Vite to `dist/web/public/cube.css` (prod) or served from `/src/web/styles/cube-entry.css` (dev).
 * Order: tokens → globals → compositions → utilities → colocated blocks.
 */
/**
 * Design tokens as CSS custom properties.
 * Generated by scripts/build-design-tokens.mjs — do not edit by hand.
 */
:root {
  /* Palette primitives, grouped by hue: --scheme-{hue}-* (accent) + --scheme-{hue}-neutral-* (surfaces) */

  /* – Neptune — moonstone blue: accent (brand) – */
  /* Moonstone blue scale (tint) — default accent. */
  --scheme-neptune-50: #F2F8FC;
  --scheme-neptune-100: #DCECF6;
  --scheme-neptune-200: #BFDCEC;
  --scheme-neptune-300: #9CC7E0;
  --scheme-neptune-400: #86B6D2;
  /* Primary (Moonstone Blue). */
  --scheme-neptune-500: #73A6C4;
  --scheme-neptune-600: #5B8EAC;
  --scheme-neptune-700: #477392;
  --scheme-neptune-800: #345877;
  --scheme-neptune-900: #233B52;
  /* – Neptune — moonstone blue: surface neutrals – */
  /* Hue-matched surface/text neutrals: Tailwind slate (cool; pairs with Neptune accent). */
  --scheme-neptune-neutral-50: #F8FAFC;
  --scheme-neptune-neutral-100: #EDF1F6;
  --scheme-neptune-neutral-200: #E2E8F0;
  --scheme-neptune-neutral-300: #CBD5E1;
  --scheme-neptune-neutral-400: #94A3B8;
  --scheme-neptune-neutral-500: #64748B;
  --scheme-neptune-neutral-600: #475569;
  --scheme-neptune-neutral-700: #334155;
  --scheme-neptune-neutral-800: #1E293B;
  --scheme-neptune-neutral-900: #0F172A;

  /* – Aurora — emerald green: accent (brand) – */
  /* Emerald-tinted accent scale. */
  --scheme-aurora-50: #ECFDF5;
  --scheme-aurora-100: #D1FAE5;
  --scheme-aurora-200: #A7F3D0;
  --scheme-aurora-300: #6EE7B7;
  --scheme-aurora-400: #34D399;
  --scheme-aurora-500: #10B981;
  --scheme-aurora-600: #059669;
  --scheme-aurora-700: #047857;
  --scheme-aurora-800: #065F46;
  --scheme-aurora-900: #064E3B;
  /* – Aurora — emerald green: surface neutrals – */
  /* Zinc (cool; with Aurora accent). */
  --scheme-aurora-neutral-50: #FAFAFA;
  --scheme-aurora-neutral-100: #EFEFEF;
  --scheme-aurora-neutral-200: #E4E4E7;
  --scheme-aurora-neutral-300: #D4D4D8;
  --scheme-aurora-neutral-400: #A1A1AA;
  --scheme-aurora-neutral-500: #71717A;
  --scheme-aurora-neutral-600: #52525B;
  --scheme-aurora-neutral-700: #3F3F46;
  --scheme-aurora-neutral-800: #27272A;
  --scheme-aurora-neutral-900: #18181B;

  /* – Helios — amber / gold: accent (brand) – */
  --scheme-helios-50: #FFFBEB;
  --scheme-helios-100: #FEF3C7;
  --scheme-helios-200: #FDE68A;
  --scheme-helios-300: #FCD34D;
  --scheme-helios-400: #FBBF24;
  --scheme-helios-500: #F59E0B;
  --scheme-helios-600: #D97706;
  --scheme-helios-700: #B45309;
  --scheme-helios-800: #92400E;
  --scheme-helios-900: #78350F;
  /* – Helios — amber / gold: surface neutrals – */
  /* Gray (balanced, with yellow / amber accent). */
  --scheme-helios-neutral-50: #F9FAFB;
  --scheme-helios-neutral-100: #EFF1F3;
  --scheme-helios-neutral-200: #E5E7EB;
  --scheme-helios-neutral-300: #D1D5DB;
  --scheme-helios-neutral-400: #9CA3AF;
  --scheme-helios-neutral-500: #6B7280;
  --scheme-helios-neutral-600: #4B5563;
  --scheme-helios-neutral-700: #374151;
  --scheme-helios-neutral-800: #1F2937;
  --scheme-helios-neutral-900: #111827;

  /* – Nebula — violet / purple: accent (brand) – */
  --scheme-nebula-50: #F5F3FF;
  --scheme-nebula-100: #EDE9FE;
  --scheme-nebula-200: #DDD6FE;
  --scheme-nebula-300: #C4B5FD;
  --scheme-nebula-400: #A78BFA;
  --scheme-nebula-500: #8B5CF6;
  --scheme-nebula-600: #7C3AED;
  --scheme-nebula-700: #6D28D9;
  --scheme-nebula-800: #5B21B6;
  --scheme-nebula-900: #4C1D95;
  /* – Nebula — violet / purple: surface neutrals – */
  /* Violet-leaning gray (with purple accent). */
  --scheme-nebula-neutral-50: #FAF8FC;
  --scheme-nebula-neutral-100: #EDE9ED;
  --scheme-nebula-neutral-200: #E2D8E8;
  --scheme-nebula-neutral-300: #C9B8D0;
  --scheme-nebula-neutral-400: #A896B5;
  --scheme-nebula-neutral-500: #8276A0;
  --scheme-nebula-neutral-600: #645A7A;
  --scheme-nebula-neutral-700: #4A425E;
  --scheme-nebula-neutral-800: #352E48;
  --scheme-nebula-neutral-900: #1F1A2E;

  /* – Redshift — rose / red: accent (brand) – */
  --scheme-redshift-50: #FFF1F2;
  --scheme-redshift-100: #FFE4E6;
  --scheme-redshift-200: #FECDD3;
  --scheme-redshift-300: #FDA4AF;
  --scheme-redshift-400: #FB7185;
  --scheme-redshift-500: #F43F5E;
  --scheme-redshift-600: #E11D48;
  --scheme-redshift-700: #BE123C;
  --scheme-redshift-800: #9F1239;
  --scheme-redshift-900: #881337;
  /* – Redshift — rose / red: surface neutrals – */
  /* Stone (warm, with red / rose accent). */
  --scheme-redshift-neutral-50: #FAF9F9;
  --scheme-redshift-neutral-100: #F0EEEB;
  --scheme-redshift-neutral-200: #E8E3DF;
  --scheme-redshift-neutral-300: #D4CCC4;
  --scheme-redshift-neutral-400: #A89B94;
  --scheme-redshift-neutral-500: #7C7068;
  --scheme-redshift-neutral-600: #5A524D;
  --scheme-redshift-neutral-700: #433D3A;
  --scheme-redshift-neutral-800: #2D2925;
  --scheme-redshift-neutral-900: #1C1916;

  /* – Titan — orange: accent (brand) – */
  --scheme-titan-50: #FFF7ED;
  --scheme-titan-100: #FFEDD5;
  --scheme-titan-200: #FED7AA;
  --scheme-titan-300: #FDBA74;
  --scheme-titan-400: #FB923C;
  --scheme-titan-500: #F97316;
  --scheme-titan-600: #EA580C;
  --scheme-titan-700: #C2410C;
  --scheme-titan-800: #9A3412;
  --scheme-titan-900: #7C2D12;
  /* – Titan — orange: surface neutrals – */
  /* True gray (with orange / amber accent). */
  --scheme-titan-neutral-50: #FAFAFA;
  --scheme-titan-neutral-100: #F1F1F1;
  --scheme-titan-neutral-200: #E5E5E5;
  --scheme-titan-neutral-300: #D4D4D4;
  --scheme-titan-neutral-400: #A3A3A3;
  --scheme-titan-neutral-500: #737373;
  --scheme-titan-neutral-600: #525252;
  --scheme-titan-neutral-700: #404040;
  --scheme-titan-neutral-800: #262626;
  --scheme-titan-neutral-900: #171717;

  /* Active accent scale; re-mapped by html data-color-scheme. */
  --brand-50: var(--scheme-neptune-50);
  --brand-100: var(--scheme-neptune-100);
  --brand-200: var(--scheme-neptune-200);
  --brand-300: var(--scheme-neptune-300);
  --brand-400: var(--scheme-neptune-400);
  --brand-500: var(--scheme-neptune-500);
  --brand-600: var(--scheme-neptune-600);
  --brand-700: var(--scheme-neptune-700);
  --brand-800: var(--scheme-neptune-800);
  --brand-900: var(--scheme-neptune-900);
  --danger-50: #FEF2F2;
  --danger-500: #EF4444;
  --danger-700: #B91C1C;
  --info-50: #EFF6FF;
  --info-500: #3B82F6;
  --info-700: #1D4ED8;
  --neutral-0: #FFFFFF;
  /* Default Neptune neutrals; `data-color-scheme` remaps to `scheme.<id>.neutral.*` (ids in `scheme-hue-defs.ts`). */
  --neutral-50: var(--scheme-neptune-neutral-50);
  --neutral-100: var(--scheme-neptune-neutral-100);
  --neutral-200: var(--scheme-neptune-neutral-200);
  --neutral-300: var(--scheme-neptune-neutral-300);
  --neutral-400: var(--scheme-neptune-neutral-400);
  --neutral-500: var(--scheme-neptune-neutral-500);
  --neutral-600: var(--scheme-neptune-neutral-600);
  --neutral-700: var(--scheme-neptune-neutral-700);
  --neutral-800: var(--scheme-neptune-neutral-800);
  --neutral-900: var(--scheme-neptune-neutral-900);
  /* Semantic success (states and messaging). */
  --success-50: #ECFDF5;
  --success-500: #10B981;
  --success-700: #047857;
  --warning-50: #FFFBEB;
  --warning-500: #F59E0B;
  --warning-700: #B45309;

  /* Min viewport width for desktop tier and up (1024px at 16px root). */
  --breakpoint-desktop: 64rem;
  /* Min viewport width for the larger-phone band (576px at 16px root). Narrower viewports stack below this; tablet still starts at breakpoint.tablet. */
  --breakpoint-mobile: 36rem;
  /* Min viewport width for tablet tier and up (768px at 16px root). Pair with web-breakpoints skill. */
  --breakpoint-tablet: 48rem;
  /* Min viewport width for wide tier and up (1280px at 16px root). */
  --breakpoint-wide: 80rem;
  /* HUD / code: system UI mono first, then common dev fonts, generic fallback. Use with `code`, `pre`, and monospace readouts. */
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  /* Base UI: Oxanium (wght 200–800) + generic sans; self-host variable TTF under /assets/ + @font-face in globals.css (CSP-safe). */
  --font-sans: Oxanium, sans-serif;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-snug: 1.3;
  --leading-tight: 1.15;
  --radius-0: 0;
  /* Pill or circle. */
  --radius-full: 9999px;
  /* 12px */
  --radius-lg: 0.75rem;
  /* 8px */
  --radius-md: 0.5rem;
  /* 4px */
  --radius-sm: 0.25rem;
  /* 16px */
  --radius-xl: 1rem;
  /* 2px */
  --radius-xs: 0.125rem;
  /* Spacing scale; values in rem assuming 16px root (4px base unit). */
  --space-0: 0;
  /* 4px */
  --space-1: 0.25rem;
  /* 8px */
  --space-2: 0.5rem;
  /* 12px */
  --space-3: 0.75rem;
  /* 16px */
  --space-4: 1rem;
  /* 20px */
  --space-5: 1.25rem;
  /* 24px */
  --space-6: 1.5rem;
  /* 32px */
  --space-8: 2rem;
  /* 40px */
  --space-10: 2.5rem;
  /* 48px */
  --space-12: 3rem;
  /* 64px */
  --space-16: 4rem;
  /* 80px */
  --space-20: 5rem;
  /* 96px */
  --space-24: 6rem;
  /* 23px */
  --text-2xl: 1.4375rem;
  /* 29px */
  --text-3xl: 1.8125rem;
  /* 35px */
  --text-4xl: 2.1875rem;
  /* 17px */
  --text-lg: 1.0625rem;
  /* 15px */
  --text-md: 0.9375rem;
  /* 13px */
  --text-sm: 0.8125rem;
  /* 19px */
  --text-xl: 1.1875rem;
  /* 11px */
  --text-xs: 0.6875rem;
  --tracking-normal: 0em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.02em;
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --weight-semibold: 600;

  --color-danger: var(--danger-500);
  --color-info: var(--info-500);
  /* Semantic aliases; themeable later. Values reference palette token names. */
  --color-success: var(--success-500);
  --color-warning: var(--warning-500);

  /* Light theme: page background. Value references a palette token name. */
  --color-bg: var(--neutral-100);
  --color-border: var(--neutral-300);
  --color-focus-ring: var(--brand-500);
  --color-link: var(--brand-700);
  --color-primary: var(--brand-500);
  --color-primary-active: var(--brand-700);
  --color-primary-hover: var(--brand-600);
  --color-surface: var(--neutral-0);
  --color-surface-muted: var(--neutral-200);
  --color-text: var(--brand-900);
  --color-text-muted: var(--brand-600);
}
html[data-theme="dark"] {
  --color-bg: var(--neutral-900);
  --color-border: var(--neutral-600);
  --color-focus-ring: var(--brand-400);
  --color-link: var(--brand-300);
  --color-primary: var(--brand-400);
  --color-primary-active: var(--brand-200);
  --color-primary-hover: var(--brand-300);
  --color-surface: var(--neutral-800);
  --color-surface-muted: var(--neutral-700);
  --color-text: var(--brand-100);
  --color-text-muted: var(--brand-300);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --color-bg: var(--neutral-900);
    --color-border: var(--neutral-600);
    --color-focus-ring: var(--brand-400);
    --color-link: var(--brand-300);
    --color-primary: var(--brand-400);
    --color-primary-active: var(--brand-200);
    --color-primary-hover: var(--brand-300);
    --color-surface: var(--neutral-800);
    --color-surface-muted: var(--neutral-700);
    --color-text: var(--brand-100);
    --color-text-muted: var(--brand-300);
  }
}
/* ———————————————————————————————————————————————————— */
/* Per-`data-color-scheme` remaps (active accent + surface neutrals) */
/* ———————————————————————————————————————————————————— */
/* [Neptune — moonstone blue] :root tokens → --brand-* / --neutral-* when data-color-scheme="neptune" */
html[data-color-scheme="neptune"] {
  --brand-50: var(--scheme-neptune-50);
  --brand-100: var(--scheme-neptune-100);
  --brand-200: var(--scheme-neptune-200);
  --brand-300: var(--scheme-neptune-300);
  --brand-400: var(--scheme-neptune-400);
  --brand-500: var(--scheme-neptune-500);
  --brand-600: var(--scheme-neptune-600);
  --brand-700: var(--scheme-neptune-700);
  --brand-800: var(--scheme-neptune-800);
  --brand-900: var(--scheme-neptune-900);
  --neutral-50: var(--scheme-neptune-neutral-50);
  --neutral-100: var(--scheme-neptune-neutral-100);
  --neutral-200: var(--scheme-neptune-neutral-200);
  --neutral-300: var(--scheme-neptune-neutral-300);
  --neutral-400: var(--scheme-neptune-neutral-400);
  --neutral-500: var(--scheme-neptune-neutral-500);
  --neutral-600: var(--scheme-neptune-neutral-600);
  --neutral-700: var(--scheme-neptune-neutral-700);
  --neutral-800: var(--scheme-neptune-neutral-800);
  --neutral-900: var(--scheme-neptune-neutral-900);
}
/* [Aurora — emerald green] :root tokens → --brand-* / --neutral-* when data-color-scheme="aurora" */
html[data-color-scheme="aurora"] {
  --brand-50: var(--scheme-aurora-50);
  --brand-100: var(--scheme-aurora-100);
  --brand-200: var(--scheme-aurora-200);
  --brand-300: var(--scheme-aurora-300);
  --brand-400: var(--scheme-aurora-400);
  --brand-500: var(--scheme-aurora-500);
  --brand-600: var(--scheme-aurora-600);
  --brand-700: var(--scheme-aurora-700);
  --brand-800: var(--scheme-aurora-800);
  --brand-900: var(--scheme-aurora-900);
  --neutral-50: var(--scheme-aurora-neutral-50);
  --neutral-100: var(--scheme-aurora-neutral-100);
  --neutral-200: var(--scheme-aurora-neutral-200);
  --neutral-300: var(--scheme-aurora-neutral-300);
  --neutral-400: var(--scheme-aurora-neutral-400);
  --neutral-500: var(--scheme-aurora-neutral-500);
  --neutral-600: var(--scheme-aurora-neutral-600);
  --neutral-700: var(--scheme-aurora-neutral-700);
  --neutral-800: var(--scheme-aurora-neutral-800);
  --neutral-900: var(--scheme-aurora-neutral-900);
}
/* [Helios — amber / gold] :root tokens → --brand-* / --neutral-* when data-color-scheme="helios" */
html[data-color-scheme="helios"] {
  --brand-50: var(--scheme-helios-50);
  --brand-100: var(--scheme-helios-100);
  --brand-200: var(--scheme-helios-200);
  --brand-300: var(--scheme-helios-300);
  --brand-400: var(--scheme-helios-400);
  --brand-500: var(--scheme-helios-500);
  --brand-600: var(--scheme-helios-600);
  --brand-700: var(--scheme-helios-700);
  --brand-800: var(--scheme-helios-800);
  --brand-900: var(--scheme-helios-900);
  --neutral-50: var(--scheme-helios-neutral-50);
  --neutral-100: var(--scheme-helios-neutral-100);
  --neutral-200: var(--scheme-helios-neutral-200);
  --neutral-300: var(--scheme-helios-neutral-300);
  --neutral-400: var(--scheme-helios-neutral-400);
  --neutral-500: var(--scheme-helios-neutral-500);
  --neutral-600: var(--scheme-helios-neutral-600);
  --neutral-700: var(--scheme-helios-neutral-700);
  --neutral-800: var(--scheme-helios-neutral-800);
  --neutral-900: var(--scheme-helios-neutral-900);
}
/* [Nebula — violet / purple] :root tokens → --brand-* / --neutral-* when data-color-scheme="nebula" */
html[data-color-scheme="nebula"] {
  --brand-50: var(--scheme-nebula-50);
  --brand-100: var(--scheme-nebula-100);
  --brand-200: var(--scheme-nebula-200);
  --brand-300: var(--scheme-nebula-300);
  --brand-400: var(--scheme-nebula-400);
  --brand-500: var(--scheme-nebula-500);
  --brand-600: var(--scheme-nebula-600);
  --brand-700: var(--scheme-nebula-700);
  --brand-800: var(--scheme-nebula-800);
  --brand-900: var(--scheme-nebula-900);
  --neutral-50: var(--scheme-nebula-neutral-50);
  --neutral-100: var(--scheme-nebula-neutral-100);
  --neutral-200: var(--scheme-nebula-neutral-200);
  --neutral-300: var(--scheme-nebula-neutral-300);
  --neutral-400: var(--scheme-nebula-neutral-400);
  --neutral-500: var(--scheme-nebula-neutral-500);
  --neutral-600: var(--scheme-nebula-neutral-600);
  --neutral-700: var(--scheme-nebula-neutral-700);
  --neutral-800: var(--scheme-nebula-neutral-800);
  --neutral-900: var(--scheme-nebula-neutral-900);
}
/* [Redshift — rose / red] :root tokens → --brand-* / --neutral-* when data-color-scheme="redshift" */
html[data-color-scheme="redshift"] {
  --brand-50: var(--scheme-redshift-50);
  --brand-100: var(--scheme-redshift-100);
  --brand-200: var(--scheme-redshift-200);
  --brand-300: var(--scheme-redshift-300);
  --brand-400: var(--scheme-redshift-400);
  --brand-500: var(--scheme-redshift-500);
  --brand-600: var(--scheme-redshift-600);
  --brand-700: var(--scheme-redshift-700);
  --brand-800: var(--scheme-redshift-800);
  --brand-900: var(--scheme-redshift-900);
  --neutral-50: var(--scheme-redshift-neutral-50);
  --neutral-100: var(--scheme-redshift-neutral-100);
  --neutral-200: var(--scheme-redshift-neutral-200);
  --neutral-300: var(--scheme-redshift-neutral-300);
  --neutral-400: var(--scheme-redshift-neutral-400);
  --neutral-500: var(--scheme-redshift-neutral-500);
  --neutral-600: var(--scheme-redshift-neutral-600);
  --neutral-700: var(--scheme-redshift-neutral-700);
  --neutral-800: var(--scheme-redshift-neutral-800);
  --neutral-900: var(--scheme-redshift-neutral-900);
}
/* [Titan — orange] :root tokens → --brand-* / --neutral-* when data-color-scheme="titan" */
html[data-color-scheme="titan"] {
  --brand-50: var(--scheme-titan-50);
  --brand-100: var(--scheme-titan-100);
  --brand-200: var(--scheme-titan-200);
  --brand-300: var(--scheme-titan-300);
  --brand-400: var(--scheme-titan-400);
  --brand-500: var(--scheme-titan-500);
  --brand-600: var(--scheme-titan-600);
  --brand-700: var(--scheme-titan-700);
  --brand-800: var(--scheme-titan-800);
  --brand-900: var(--scheme-titan-900);
  --neutral-50: var(--scheme-titan-neutral-50);
  --neutral-100: var(--scheme-titan-neutral-100);
  --neutral-200: var(--scheme-titan-neutral-200);
  --neutral-300: var(--scheme-titan-neutral-300);
  --neutral-400: var(--scheme-titan-neutral-400);
  --neutral-500: var(--scheme-titan-neutral-500);
  --neutral-600: var(--scheme-titan-neutral-600);
  --neutral-700: var(--scheme-titan-neutral-700);
  --neutral-800: var(--scheme-titan-neutral-800);
  --neutral-900: var(--scheme-titan-neutral-900);
}
/* ———————————————————————————————————————————————————— */
/* Brand ramp × neutral-500 mix — data: tokens/colour-schemes.json. */
/* ———————————————————————————————————————————————————— */
/* Aurora — emerald green — Green / teal accent from the Aurora scale; calmer on light backgrounds than warm hues. */
/* light: neutral-500 mix (%) — brand ≤200: 10, ≤400: 14, ≥500: 18 */
html[data-theme="light"][data-color-scheme="aurora"] {
  --brand-50: color-mix(in srgb, var(--scheme-aurora-50) 90%, var(--scheme-aurora-neutral-500) 10%);
  --brand-100: color-mix(in srgb, var(--scheme-aurora-100) 90%, var(--scheme-aurora-neutral-500) 10%);
  --brand-200: color-mix(in srgb, var(--scheme-aurora-200) 90%, var(--scheme-aurora-neutral-500) 10%);
  --brand-300: color-mix(in srgb, var(--scheme-aurora-300) 86%, var(--scheme-aurora-neutral-500) 14%);
  --brand-400: color-mix(in srgb, var(--scheme-aurora-400) 86%, var(--scheme-aurora-neutral-500) 14%);
  --brand-500: color-mix(in srgb, var(--scheme-aurora-500) 82%, var(--scheme-aurora-neutral-500) 18%);
  --brand-600: color-mix(in srgb, var(--scheme-aurora-600) 82%, var(--scheme-aurora-neutral-500) 18%);
  --brand-700: color-mix(in srgb, var(--scheme-aurora-700) 82%, var(--scheme-aurora-neutral-500) 18%);
  --brand-800: color-mix(in srgb, var(--scheme-aurora-800) 82%, var(--scheme-aurora-neutral-500) 18%);
  --brand-900: color-mix(in srgb, var(--scheme-aurora-900) 82%, var(--scheme-aurora-neutral-500) 18%);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-color-scheme="aurora"] {
    --brand-50: color-mix(in srgb, var(--scheme-aurora-50) 90%, var(--scheme-aurora-neutral-500) 10%);
    --brand-100: color-mix(in srgb, var(--scheme-aurora-100) 90%, var(--scheme-aurora-neutral-500) 10%);
    --brand-200: color-mix(in srgb, var(--scheme-aurora-200) 90%, var(--scheme-aurora-neutral-500) 10%);
    --brand-300: color-mix(in srgb, var(--scheme-aurora-300) 86%, var(--scheme-aurora-neutral-500) 14%);
    --brand-400: color-mix(in srgb, var(--scheme-aurora-400) 86%, var(--scheme-aurora-neutral-500) 14%);
    --brand-500: color-mix(in srgb, var(--scheme-aurora-500) 82%, var(--scheme-aurora-neutral-500) 18%);
    --brand-600: color-mix(in srgb, var(--scheme-aurora-600) 82%, var(--scheme-aurora-neutral-500) 18%);
    --brand-700: color-mix(in srgb, var(--scheme-aurora-700) 82%, var(--scheme-aurora-neutral-500) 18%);
    --brand-800: color-mix(in srgb, var(--scheme-aurora-800) 82%, var(--scheme-aurora-neutral-500) 18%);
    --brand-900: color-mix(in srgb, var(--scheme-aurora-900) 82%, var(--scheme-aurora-neutral-500) 18%);
  }
}
/* Helios — amber / gold — Warm yellow–amber accent (Helios scale). Often softened in light mode so HUD chrome is less loud. */
/* light: neutral-500 mix (%) — brand ≤200: 10, ≤400: 14, ≥500: 18 */
html[data-theme="light"][data-color-scheme="helios"] {
  --brand-50: color-mix(in srgb, var(--scheme-helios-50) 90%, var(--scheme-helios-neutral-500) 10%);
  --brand-100: color-mix(in srgb, var(--scheme-helios-100) 90%, var(--scheme-helios-neutral-500) 10%);
  --brand-200: color-mix(in srgb, var(--scheme-helios-200) 90%, var(--scheme-helios-neutral-500) 10%);
  --brand-300: color-mix(in srgb, var(--scheme-helios-300) 86%, var(--scheme-helios-neutral-500) 14%);
  --brand-400: color-mix(in srgb, var(--scheme-helios-400) 86%, var(--scheme-helios-neutral-500) 14%);
  --brand-500: color-mix(in srgb, var(--scheme-helios-500) 82%, var(--scheme-helios-neutral-500) 18%);
  --brand-600: color-mix(in srgb, var(--scheme-helios-600) 82%, var(--scheme-helios-neutral-500) 18%);
  --brand-700: color-mix(in srgb, var(--scheme-helios-700) 82%, var(--scheme-helios-neutral-500) 18%);
  --brand-800: color-mix(in srgb, var(--scheme-helios-800) 82%, var(--scheme-helios-neutral-500) 18%);
  --brand-900: color-mix(in srgb, var(--scheme-helios-900) 82%, var(--scheme-helios-neutral-500) 18%);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-color-scheme="helios"] {
    --brand-50: color-mix(in srgb, var(--scheme-helios-50) 90%, var(--scheme-helios-neutral-500) 10%);
    --brand-100: color-mix(in srgb, var(--scheme-helios-100) 90%, var(--scheme-helios-neutral-500) 10%);
    --brand-200: color-mix(in srgb, var(--scheme-helios-200) 90%, var(--scheme-helios-neutral-500) 10%);
    --brand-300: color-mix(in srgb, var(--scheme-helios-300) 86%, var(--scheme-helios-neutral-500) 14%);
    --brand-400: color-mix(in srgb, var(--scheme-helios-400) 86%, var(--scheme-helios-neutral-500) 14%);
    --brand-500: color-mix(in srgb, var(--scheme-helios-500) 82%, var(--scheme-helios-neutral-500) 18%);
    --brand-600: color-mix(in srgb, var(--scheme-helios-600) 82%, var(--scheme-helios-neutral-500) 18%);
    --brand-700: color-mix(in srgb, var(--scheme-helios-700) 82%, var(--scheme-helios-neutral-500) 18%);
    --brand-800: color-mix(in srgb, var(--scheme-helios-800) 82%, var(--scheme-helios-neutral-500) 18%);
    --brand-900: color-mix(in srgb, var(--scheme-helios-900) 82%, var(--scheme-helios-neutral-500) 18%);
  }
}
/* Nebula — violet / purple — Purple accent (Nebula scale) with violet-leaning neutrals. */
/* light: neutral-500 mix (%) — brand ≤200: 13, ≤400: 18, ≥500: 23 */
html[data-theme="light"][data-color-scheme="nebula"] {
  --brand-50: color-mix(in srgb, var(--scheme-nebula-50) 87%, var(--scheme-nebula-neutral-500) 13%);
  --brand-100: color-mix(in srgb, var(--scheme-nebula-100) 87%, var(--scheme-nebula-neutral-500) 13%);
  --brand-200: color-mix(in srgb, var(--scheme-nebula-200) 87%, var(--scheme-nebula-neutral-500) 13%);
  --brand-300: color-mix(in srgb, var(--scheme-nebula-300) 82%, var(--scheme-nebula-neutral-500) 18%);
  --brand-400: color-mix(in srgb, var(--scheme-nebula-400) 82%, var(--scheme-nebula-neutral-500) 18%);
  --brand-500: color-mix(in srgb, var(--scheme-nebula-500) 77%, var(--scheme-nebula-neutral-500) 23%);
  --brand-600: color-mix(in srgb, var(--scheme-nebula-600) 77%, var(--scheme-nebula-neutral-500) 23%);
  --brand-700: color-mix(in srgb, var(--scheme-nebula-700) 77%, var(--scheme-nebula-neutral-500) 23%);
  --brand-800: color-mix(in srgb, var(--scheme-nebula-800) 77%, var(--scheme-nebula-neutral-500) 23%);
  --brand-900: color-mix(in srgb, var(--scheme-nebula-900) 77%, var(--scheme-nebula-neutral-500) 23%);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-color-scheme="nebula"] {
    --brand-50: color-mix(in srgb, var(--scheme-nebula-50) 87%, var(--scheme-nebula-neutral-500) 13%);
    --brand-100: color-mix(in srgb, var(--scheme-nebula-100) 87%, var(--scheme-nebula-neutral-500) 13%);
    --brand-200: color-mix(in srgb, var(--scheme-nebula-200) 87%, var(--scheme-nebula-neutral-500) 13%);
    --brand-300: color-mix(in srgb, var(--scheme-nebula-300) 82%, var(--scheme-nebula-neutral-500) 18%);
    --brand-400: color-mix(in srgb, var(--scheme-nebula-400) 82%, var(--scheme-nebula-neutral-500) 18%);
    --brand-500: color-mix(in srgb, var(--scheme-nebula-500) 77%, var(--scheme-nebula-neutral-500) 23%);
    --brand-600: color-mix(in srgb, var(--scheme-nebula-600) 77%, var(--scheme-nebula-neutral-500) 23%);
    --brand-700: color-mix(in srgb, var(--scheme-nebula-700) 77%, var(--scheme-nebula-neutral-500) 23%);
    --brand-800: color-mix(in srgb, var(--scheme-nebula-800) 77%, var(--scheme-nebula-neutral-500) 23%);
    --brand-900: color-mix(in srgb, var(--scheme-nebula-900) 77%, var(--scheme-nebula-neutral-500) 23%);
  }
}
/* Redshift — rose / red — Red / rose accent (Redshift scale) with stone-tinted warm neutrals. */
/* light: neutral-500 mix (%) — brand ≤200: 10, ≤400: 14, ≥500: 18 */
html[data-theme="light"][data-color-scheme="redshift"] {
  --brand-50: color-mix(in srgb, var(--scheme-redshift-50) 90%, var(--scheme-redshift-neutral-500) 10%);
  --brand-100: color-mix(in srgb, var(--scheme-redshift-100) 90%, var(--scheme-redshift-neutral-500) 10%);
  --brand-200: color-mix(in srgb, var(--scheme-redshift-200) 90%, var(--scheme-redshift-neutral-500) 10%);
  --brand-300: color-mix(in srgb, var(--scheme-redshift-300) 86%, var(--scheme-redshift-neutral-500) 14%);
  --brand-400: color-mix(in srgb, var(--scheme-redshift-400) 86%, var(--scheme-redshift-neutral-500) 14%);
  --brand-500: color-mix(in srgb, var(--scheme-redshift-500) 82%, var(--scheme-redshift-neutral-500) 18%);
  --brand-600: color-mix(in srgb, var(--scheme-redshift-600) 82%, var(--scheme-redshift-neutral-500) 18%);
  --brand-700: color-mix(in srgb, var(--scheme-redshift-700) 82%, var(--scheme-redshift-neutral-500) 18%);
  --brand-800: color-mix(in srgb, var(--scheme-redshift-800) 82%, var(--scheme-redshift-neutral-500) 18%);
  --brand-900: color-mix(in srgb, var(--scheme-redshift-900) 82%, var(--scheme-redshift-neutral-500) 18%);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-color-scheme="redshift"] {
    --brand-50: color-mix(in srgb, var(--scheme-redshift-50) 90%, var(--scheme-redshift-neutral-500) 10%);
    --brand-100: color-mix(in srgb, var(--scheme-redshift-100) 90%, var(--scheme-redshift-neutral-500) 10%);
    --brand-200: color-mix(in srgb, var(--scheme-redshift-200) 90%, var(--scheme-redshift-neutral-500) 10%);
    --brand-300: color-mix(in srgb, var(--scheme-redshift-300) 86%, var(--scheme-redshift-neutral-500) 14%);
    --brand-400: color-mix(in srgb, var(--scheme-redshift-400) 86%, var(--scheme-redshift-neutral-500) 14%);
    --brand-500: color-mix(in srgb, var(--scheme-redshift-500) 82%, var(--scheme-redshift-neutral-500) 18%);
    --brand-600: color-mix(in srgb, var(--scheme-redshift-600) 82%, var(--scheme-redshift-neutral-500) 18%);
    --brand-700: color-mix(in srgb, var(--scheme-redshift-700) 82%, var(--scheme-redshift-neutral-500) 18%);
    --brand-800: color-mix(in srgb, var(--scheme-redshift-800) 82%, var(--scheme-redshift-neutral-500) 18%);
    --brand-900: color-mix(in srgb, var(--scheme-redshift-900) 82%, var(--scheme-redshift-neutral-500) 18%);
  }
}
/* Titan — orange — Orange accent (Titan scale) with neutral grays. */
/* light: neutral-500 mix (%) — brand ≤200: 10, ≤400: 14, ≥500: 18 */
html[data-theme="light"][data-color-scheme="titan"] {
  --brand-50: color-mix(in srgb, var(--scheme-titan-50) 90%, var(--scheme-titan-neutral-500) 10%);
  --brand-100: color-mix(in srgb, var(--scheme-titan-100) 90%, var(--scheme-titan-neutral-500) 10%);
  --brand-200: color-mix(in srgb, var(--scheme-titan-200) 90%, var(--scheme-titan-neutral-500) 10%);
  --brand-300: color-mix(in srgb, var(--scheme-titan-300) 86%, var(--scheme-titan-neutral-500) 14%);
  --brand-400: color-mix(in srgb, var(--scheme-titan-400) 86%, var(--scheme-titan-neutral-500) 14%);
  --brand-500: color-mix(in srgb, var(--scheme-titan-500) 82%, var(--scheme-titan-neutral-500) 18%);
  --brand-600: color-mix(in srgb, var(--scheme-titan-600) 82%, var(--scheme-titan-neutral-500) 18%);
  --brand-700: color-mix(in srgb, var(--scheme-titan-700) 82%, var(--scheme-titan-neutral-500) 18%);
  --brand-800: color-mix(in srgb, var(--scheme-titan-800) 82%, var(--scheme-titan-neutral-500) 18%);
  --brand-900: color-mix(in srgb, var(--scheme-titan-900) 82%, var(--scheme-titan-neutral-500) 18%);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"][data-color-scheme="titan"] {
    --brand-50: color-mix(in srgb, var(--scheme-titan-50) 90%, var(--scheme-titan-neutral-500) 10%);
    --brand-100: color-mix(in srgb, var(--scheme-titan-100) 90%, var(--scheme-titan-neutral-500) 10%);
    --brand-200: color-mix(in srgb, var(--scheme-titan-200) 90%, var(--scheme-titan-neutral-500) 10%);
    --brand-300: color-mix(in srgb, var(--scheme-titan-300) 86%, var(--scheme-titan-neutral-500) 14%);
    --brand-400: color-mix(in srgb, var(--scheme-titan-400) 86%, var(--scheme-titan-neutral-500) 14%);
    --brand-500: color-mix(in srgb, var(--scheme-titan-500) 82%, var(--scheme-titan-neutral-500) 18%);
    --brand-600: color-mix(in srgb, var(--scheme-titan-600) 82%, var(--scheme-titan-neutral-500) 18%);
    --brand-700: color-mix(in srgb, var(--scheme-titan-700) 82%, var(--scheme-titan-neutral-500) 18%);
    --brand-800: color-mix(in srgb, var(--scheme-titan-800) 82%, var(--scheme-titan-neutral-500) 18%);
    --brand-900: color-mix(in srgb, var(--scheme-titan-900) 82%, var(--scheme-titan-neutral-500) 18%);
  }
}
/**
 * CUBE — global / baseline layer (element defaults, resets).
 * Loaded after design-tokens.css; use var(--…) for colors, space, and type.
 * Source of truth: bundled into dist/web/public/cube.css via styles/cube-entry.css + Vite.
 *
 * Oxanium: self-hosted under /assets/ (CSP `font-src 'self'`), not Google Fonts.
 */
@font-face {
  font-family: Oxanium;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/Oxanium-VariableFont_wght.ttf") format("truetype");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  /* `--font-sans` from design tokens; Oxanium from @font-face + generic sans */
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  min-height: 100vh;
  /* Default shell: `.glass-background` on `<body>` (utilities.css); this backs non-layout HTML pages */
  background-color: var(--color-bg);
  color: var(--color-text);
  text-rendering: optimizeLegibility;
}
/**
 * Glass screen model: `.glass-background` on `body` is the far layer; UI uses **translucent**
 * `--color-surface*` so the grid / glow shows through. Mirrors design-tokens theme selectors
 * (light :root, dark, system + prefers dark). `neutral.*` still follow `data-color-scheme`.
 */
:root {
  /**
   * Mix weight for `color-mix(primary, transparent)` washes (`--primary-fill-subtle`, table striping,
   * `.stripe-even-rows`, etc.). Light UI needs more weight on pale `--color-bg`; dark UI uses a lighter wash.
   */
  --primary-fill-subtle-mix-pct: 22%;
  --primary-fill-subtle: color-mix(
    in srgb,
    var(--color-primary) var(--primary-fill-subtle-mix-pct),
    transparent
  );
  /* Alias: same paint as `--primary-fill-subtle`; name kept for table/zebra call sites. */
  --stripe-even-row-background: var(--primary-fill-subtle);
  --color-surface: color-mix(in srgb, var(--neutral-0) 52%, transparent);
  --color-surface-muted: color-mix(
    in srgb,
    var(--neutral-100) 48%,
    transparent
  );
}
html[data-theme="dark"] {
  --primary-fill-subtle-mix-pct: 10%;
  --primary-fill-subtle: color-mix(
    in srgb,
    var(--color-primary) var(--primary-fill-subtle-mix-pct),
    transparent
  );
  --stripe-even-row-background: var(--primary-fill-subtle);
  --color-surface: color-mix(in srgb, var(--neutral-800) 56%, transparent);
  --color-surface-muted: color-mix(
    in srgb,
    var(--neutral-700) 50%,
    transparent
  );
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --primary-fill-subtle-mix-pct: 8%;
    --primary-fill-subtle: color-mix(
      in srgb,
      var(--color-primary) var(--primary-fill-subtle-mix-pct),
      transparent
    );
    --stripe-even-row-background: var(--primary-fill-subtle);
    --color-surface: color-mix(in srgb, var(--neutral-800) 56%, transparent);
    --color-surface-muted: color-mix(
      in srgb,
      var(--neutral-700) 50%,
      transparent
    );
  }
}
/* ——— Prose flow ——— */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-wrap: balance;
}
h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-4);
}
h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}
h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}
h5 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}
h6 {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  font-weight: var(--weight-semibold);
}
p {
  margin-block: 0 var(--space-4);
}
p:last-child {
  margin-block-end: 0;
}
small {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}
/* Relative to surrounding text (ordinals, footnote markers, citations). */
sup,
sub {
  font-size: 0.4em;
  line-height: 0;
}
sup {
  vertical-align: super;
}
sub {
  vertical-align: sub;
}
strong,
b {
  font-weight: var(--weight-semibold);
}
a {
  color: var(--color-link);
  text-underline-offset: 0.12em;
}
a:hover {
  color: var(--color-primary-hover);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
ul,
ol {
  margin-block: 0 var(--space-4);
  padding-inline-start: var(--space-6);
}
li {
  margin-block: var(--space-1);
  line-height: var(--leading-normal);
}
blockquote {
  margin-block: var(--space-4);
  margin-inline: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
hr {
  margin-block: var(--space-6);
  border: 0;
  border-block-start: 1px solid var(--color-border);
}
code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.925em;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-snug);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text);
}
pre {
  margin-block: var(--space-4);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text);
}
pre code {
  padding: 0;
  font-size: inherit;
  font-weight: var(--weight-regular);
  background: transparent;
}
/**
 * HUD / “screen chrome” glow — shared `box-shadow` stacks for framed controls and edge accents.
 *
 * - **Colors** (`--hud-glow-*`): reuse in custom stacks, `filter: drop-shadow()`, or pseudo-elements.
 * - **Layers** (`--hud-shadow-rim` …): compose comma-separated `box-shadow` values.
 * - **Bundles** (`--hud-shadow-screen-element` …): ready-made stacks for common surfaces.
 *
 * For a glow along one axis only (e.g. nav rail), use `--hud-shadow-*-edge` layers on `::before` /
 * `::after` instead of the symmetric rim/mid/outer trio.
 */
:root {
  --hud-glow-rim: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --hud-glow-mid: color-mix(in srgb, var(--color-primary) 17%, transparent);
  --hud-glow-outer: color-mix(in srgb, var(--color-primary) 7%, transparent);
  --hud-glow-outer-muted: color-mix(in srgb, var(--color-primary) 5%, transparent);

  --hud-glow-rim-hover: color-mix(in srgb, var(--color-primary) 19%, transparent);
  --hud-glow-mid-hover: color-mix(in srgb, var(--color-primary) 26%, transparent);
  --hud-glow-outer-hover: color-mix(in srgb, var(--color-primary) 12%, transparent);

  --hud-shadow-rim: 0 0 0 1px var(--hud-glow-rim);
  --hud-shadow-mid: 0 0 10px 0 var(--hud-glow-mid);
  --hud-shadow-outer: 0 0 24px 2px var(--hud-glow-outer);

  --hud-shadow-outer-tight: 0 0 16px 1px var(--hud-glow-outer);
  --hud-shadow-outer-lift: 0 4px 16px 0 var(--hud-glow-outer);
  --hud-shadow-outer-trim: 0 0 20px 1px var(--hud-glow-outer-muted);

  --hud-shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent);
  --hud-shadow-inset-soft: inset 0 1px 0 color-mix(in srgb, var(--color-text) 3%, transparent);
  --hud-shadow-inset-hover: inset 0 1px 0 color-mix(in srgb, var(--color-text) 6%, transparent);

  /* Cast along −X (e.g. narrow strip `::before` on the nav edge). */
  --hud-shadow-rim-edge: -1px 0 0 0 var(--hud-glow-rim);
  --hud-shadow-mid-edge: -2px 0 10px 0 var(--hud-glow-mid);
  --hud-shadow-outer-edge: -4px 0 24px 2px var(--hud-glow-outer);

  --hud-shadow-screen-element:
    var(--hud-shadow-rim), var(--hud-shadow-mid), var(--hud-shadow-outer), var(--hud-shadow-inset);

  --hud-shadow-screen-element-hover:
    0 0 0 1px var(--hud-glow-rim-hover), 0 0 16px 1px var(--hud-glow-mid-hover),
    0 0 32px 3px var(--hud-glow-outer-hover), var(--hud-shadow-inset-hover);

  --hud-shadow-select-list-below:
    var(--hud-shadow-rim), var(--hud-shadow-mid), var(--hud-shadow-outer-tight),
    var(--hud-shadow-inset-soft);

  --hud-shadow-select-list-above:
    var(--hud-shadow-rim), var(--hud-shadow-mid), var(--hud-shadow-outer-lift),
    var(--hud-shadow-inset-soft);

  --hud-shadow-select-surface-open:
    var(--hud-shadow-rim), var(--hud-shadow-mid), var(--hud-shadow-outer-trim), var(--hud-shadow-inset);

  --hud-shadow-nav-edge: var(--hud-shadow-rim-edge), var(--hud-shadow-mid-edge), var(--hud-shadow-outer-edge);
}
/**
 * CUBE — composition layer (layout primitives: flow, cluster, wrapper, etc.).
 * Source of truth: bundled into dist/web/public/cube.css via styles/cube-entry.css + Vite.
 */
/* Add .flow, .cluster, .wrapper, .grid, … as the design system grows. */
/* Readable column: max width + horizontal centering in the viewport (block axis is unconstrained). */
.center-inline {
  box-sizing: content-box;
  margin-inline: auto;
  padding-inline: var(--center-column-gutter-inline, var(--space-4));
}
.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-4));
  margin-block-end: 0;
  display: block;
}
/**
 * CUBE — utility layer (single-purpose *behaviors*, token-backed).
 * Source of truth: bundled into dist/web/public/cube.css via styles/cube-entry.css + Vite.
 */
/**
 * Center this box’s contents as a group on both block and inline axes. Defaults to at least
 * the dynamic viewport height so the group sits in the middle of the screen; override with
 * `--center-min-height` when centering within a shorter region.
 * Typical page pattern: a `.center-inline` ancestor constrains line length; this utility handles
 * vertical (and any leftover horizontal) centering of the group.
 * Flex (not grid + place-content) avoids macOS Chrome/Safari mis-anchoring native `<select>` popovers.
 */
.center {
  min-height: var(--center-min-height, 100dvh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/** Unstyled `ul` / `ol`: no markers, no UA margin or padding. Compose with e.g. `.stack` for gaps. */
.list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
}
/**
 * Remove an element from the visual layout while it stays in the DOM (forms, focus programmatically,
 * etc.). Does not by itself make content available to assistive tech—pair with labelling / roles as
 * needed, or hide from AT with `aria-hidden` when the visible control is elsewhere.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
/** Scrollable region with scrollbars hidden (wheel / touch / keyboard scrolling unchanged). */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}
/**
 * Horizontal scrollport for wide inline content inside a padded or flex parent. Sets `min-width: 0` so
 * the box can shrink below its contents (required for `overflow-x` to engage in flex/grid), enables
 * `overflow-x: auto`, touch momentum scrolling, and horizontal overscroll containment. Use for tables,
 * toolbars, chip rows, etc., so outer padding can stay outside the scrollbar.
 */
.horizontal-scroll-region {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/** Single-line overflow: ellipsis. In flex layouts, pair with `min-width: 0` on the item (or a parent flex rule) so it can shrink. */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**
 * Small capped label / section overline: uppercase, tracked, muted. For category lines above figures
 * (HUD cards, metrics). Pair with a heading or `span` carrying the label text.
 */
.overline {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/** Standard focus ring; add to focusable controls (or compose with `.screen-element` on buttons). */
.ring:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/**
 * Full “display glass” stack: opaque `color-bg` base + grid + soft radials. Shared by `body` and
 * the authenticated nav **below `breakpoint.wide` (`80rem`)** (a **second** sheet, same skin, stacked on the first). Diagonal uses an
 * **opaque** tint (`color-text` on `color-bg`); do not use frosted `color-surface` here — that
 * was the translucent white/dark haze. See `page-layout.css`: from **wide** up the nav column is **not** a
 * second layer (transparent, one canvas from `body` only).
 */
.glass-background {
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-border) 16%, transparent) 0 1px,
      transparent 1px 1.5rem
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--color-border) 14%, transparent) 0 1px,
      transparent 1px 1.5rem
    ),
    radial-gradient(
      ellipse 100% 60% at 50% 0%,
      color-mix(in srgb, var(--color-primary) 12%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 65% 45% at 100% 100%,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 0%,
      transparent 50%
    ),
    linear-gradient(
      168deg,
      var(--color-bg) 0%,
      color-mix(in srgb, var(--color-text) 4.5%, var(--color-bg) 95.5%) 46%,
      var(--color-bg) 100%
    );
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-size:
    auto,
    auto,
    100% 100%,
    100% 100%,
    100% 100%;
}
/**
 * Tight “screen on glass” chrome: primary border, `--radius-sm`, soft outer bloom + inner specular.
 * Compose with block styles (e.g. `.button`); hover brightens the rim via `box-shadow` only.
 */
.screen-element {
  --screen-element-padding-x: var(--space-8);
  --screen-element-padding-y: var(--space-4);
  padding: var(--screen-element-padding-y) var(--screen-element-padding-x);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--hud-shadow-screen-element);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;

  &:hover {
    box-shadow: var(--hud-shadow-screen-element-hover);
  }
}
/**
 * Softer HUD frame for panels **nested inside** a `.screen-element` (or other primary chrome): muted
 * primary border, gradient face, lighter shadow stack than `.screen-element`. Does not set
 * padding — blocks supply layout and spacing.
 */
.screen-element-secondary {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)) 0%,
    color-mix(in srgb, var(--primary-fill-subtle) 70%, transparent) 52%,
    color-mix(in srgb, var(--color-bg) 88%, transparent) 100%
  );
  box-shadow:
    var(--hud-shadow-rim),
    var(--hud-shadow-inset-soft),
    0 0 18px 0 var(--hud-glow-outer);
}
/**
 * Primary-tinted diagonal fill: brighter toward upper-left (mixed with `--color-text`), solid primary
 * mid, deeper toward lower-right (`--color-bg`). Use as `background-image` fill on ribbons, pills,
 * etc.; compose with borders / clip-path in blocks.
 */
.primary-specular-gradient {
  background-image: linear-gradient(
    138deg,
    color-mix(in srgb, var(--color-primary) 52%, var(--color-text)) 0%,
    var(--color-primary) 46%,
    color-mix(in srgb, var(--color-primary) 78%, var(--color-bg)) 100%
  );
}
/**
 * Knockout HUD labels: glyphs reveal `--color-bg` through ribbons and overlays (`primary-specular-gradient`,
 * glass layers, etc.). Compose with block or element styles for size and weight.
 */
.canvas-knockout-text {
  color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--color-bg) 0%,
    var(--color-bg) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
}
/**
 * Thin frosted overlay: nearly transparent with a faint `--color-primary` wash plus backdrop blur so
 * whatever sits beneath reads through softly. Unlike `.glass-background` (opaque HUD layers), this is
 * for panels/chips atop existing chrome — compose with borders or `.screen-element` as needed.
 */
.glass-primary-frost {
  background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/**
 * Translucent fill from `--color-primary` blended with transparency. Tune mix weight per appearance
 * with `--primary-fill-subtle-mix-pct` in `globals.css` (resolved as `--primary-fill-subtle`).
 */
.primary-fill-subtle {
  background: var(--primary-fill-subtle);
}
/**
 * Zebra stripe: tint every **even** direct child. Uses `--primary-fill-subtle` (alias
 * `--stripe-even-row-background` in `globals.css`) — same tint as `.table tbody tr:nth-child(even)`.
 * For non-`<table>` stacks (metrics lists, cards).
 */
.stripe-even-rows > :nth-child(even) {
  background: var(--primary-fill-subtle);
}
/**
 * Stretch to the containing block’s inline size. Uses `display: block` so `width: 100%` applies to
 * inline-level elements (`span`, `a`, etc.); controls that must stay `flex` / `inline-flex` should
 * use `width: 100%` in their block instead of this utility.
 */
.full-width {
  display: block;
  width: 100%;
}
/**
 * Use in regions that set `width: 100%` on broad selectors (e.g. nav sidebars) so a control
 * sizes to its content instead, without overflowing the container.
 */
.constrain-to-parent {
  /* layout */
  width: auto;
  max-width: 100%;
}
/**
 * Two-cell row: first child fills remaining inline space (`minmax(0, 1fr)`); second stays content-sized
 * at inline-end. Baseline-aligned for label + figure pairs (counts, amounts). Tune gaps with custom props.
 */
.split-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--split-pair-gap-inline, var(--space-4));
  row-gap: var(--split-pair-gap-block, var(--space-1));
}
/**
 * Responsive visibility — tiers mirror **`breakpoints.json`**. Use **literal `rem`** widths in **`@media`** (custom properties are invalid in media queries).
 * **`breakpoint.mobile`** **36rem**, **`breakpoint.tablet`** **48rem**, **`breakpoint.desktop`** **64rem**, **`breakpoint.wide`** **80rem**.
 *
 * Narrowest viewport is **below** **36rem** (no breakpoint token — base CSS only).
 *
 * **`show-*-up`:** **`display: none`** below that **`min-width`**, **`display: revert`** from the breakpoint up (**`show-mobile-up`** … **`show-wide-up`**).
 *
 * **`hide-*-up`:** default visible; **`display: none`** from that breakpoint up (**`hide-mobile-up`** … **`hide-wide-up`**).
 *
 * **`show-*-only` / `hide-*-only`:** a single viewport band, layered only with **`min-width`** (**`narrow-only`** below **36rem**; **`mobile-only`** from **36rem** until **`tablet`**; **`tablet-only`** until **`desktop`**; **`desktop-only`** until **`wide`**; **`wide-only`** from **80rem** up — identical span to **`show-wide-up`**).
 */
.show-mobile-up {
  display: none;

  /* = breakpoint.mobile in breakpoints.json */
  @media (min-width: 36rem) {
    display: revert;
  }
}
.show-tablet-up {
  display: none;

  /* = breakpoint tablet in breakpoints.json (48rem) */
  @media (min-width: 48rem) {
    display: revert;
  }
}
.show-desktop-up {
  display: none;

  /* = breakpoint desktop in breakpoints.json (64rem) */
  @media (min-width: 64rem) {
    display: revert;
  }
}
.show-wide-up {
  display: none;

  /* = breakpoint wide in breakpoints.json (80rem) */
  @media (min-width: 80rem) {
    display: revert;
  }
}
.hide-mobile-up {
  /* = breakpoint.mobile in breakpoints.json */
  @media (min-width: 36rem) {
    display: none;
  }
}
/* = breakpoint tablet in breakpoints.json */
@media (min-width: 48rem) {
  .hide-tablet-up {
    display: none;
  }
}
/* = breakpoint desktop in breakpoints.json */
@media (min-width: 64rem) {
  .hide-desktop-up {
    display: none;
  }
}
/* = breakpoint wide in breakpoints.json */
@media (min-width: 80rem) {
  .hide-wide-up {
    display: none;
  }
}
/* --- bands: visible / hidden only within one tier ---------------------------------- */
.show-narrow-only {
  display: revert;

  @media (min-width: 36rem) {
    display: none;
  }
}
.show-mobile-only {
  display: none;

  /* = breakpoint.mobile in breakpoints.json */
  @media (min-width: 36rem) {
    display: revert;
  }

  /* = breakpoint.tablet in breakpoints.json */
  @media (min-width: 48rem) {
    display: none;
  }
}
.show-tablet-only {
  display: none;

  @media (min-width: 48rem) {
    display: revert;
  }

  @media (min-width: 64rem) {
    display: none;
  }
}
.show-desktop-only {
  display: none;

  @media (min-width: 64rem) {
    display: revert;
  }

  @media (min-width: 80rem) {
    display: none;
  }
}
.show-wide-only {
  display: none;

  @media (min-width: 80rem) {
    display: revert;
  }
}
.hide-narrow-only {
  display: none;

  @media (min-width: 36rem) {
    display: revert;
  }
}
.hide-mobile-only {
  @media (min-width: 36rem) {
    display: none;
  }

  @media (min-width: 48rem) {
    display: revert;
  }
}
.hide-tablet-only {
  @media (min-width: 48rem) {
    display: none;
  }

  @media (min-width: 64rem) {
    display: revert;
  }
}
.hide-desktop-only {
  @media (min-width: 64rem) {
    display: none;
  }

  @media (min-width: 80rem) {
    display: revert;
  }
}
.hide-wide-only {
  @media (min-width: 80rem) {
    display: none;
  }
}
/**
 * Colocated block `@import` list (sorted). Generated by scripts/generate-cube-blocks-manifest.mjs.
 * Do not edit by hand.
 */
/* ndb2:block: routes/home/components/home-performance-card/home-performance-card.css */
.home-performance-card {
  --horizontal-divider-margin-block: var(--space-4);
  --stack-space: var(--space-6);

  & .home-performance-card__empty {
    --center-min-height: 8rem;
    margin-inline: var(--space-4);
  }
}
/* ndb2:block: routes/home/components/home-performance-card/home-performance-identity-card/home-performance-identity-card.css */
.home-performance-identity-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-4);

  padding: var(--space-2) var(--space-4);

  & .home-performance-identity-card__portrait {
    align-self: start;
    padding: var(--space-1);
    border-radius: var(--radius-sm);

    background: var(--primary-fill-subtle);
    box-shadow:
      var(--hud-shadow-rim),
      var(--hud-shadow-inset-soft),
      0 0 10px 0 var(--hud-glow-mid);
  }

  & .home-performance-identity-card__readout {
    --stack-space: var(--space-1);
  }

  & .home-performance-identity-card__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1);
  }

  & .home-performance-identity-card__snowflake {
    padding: 2px 4px;
    background: var(--primary-fill-subtle);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  & .home-performance-identity-card__name {
    text-transform: uppercase;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);

    & .home-performance-identity-card__caret {
      margin-inline-end: var(--space-1);

      font-size: var(--text-xl);
      font-weight: var(--weight-bold);
      line-height: 1;
      color: var(--color-primary);
      text-shadow: 0 0 12px
        color-mix(in srgb, var(--color-primary) 45%, transparent);
    }
  }

  /* Monospace ticker line — sparing HUD meta (see ndb2-web-design). */
  & .home-performance-identity-card__band {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.92;
  }
}
/* ndb2:block: routes/home/components/home-performance-card/performance-block/performance-block.css */
.performance-block {
  --stack-space: var(--space-2);

  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);

  & .performance-block__summary {
    text-align: center;
  }

  & .performance-block__rank {
    font-size: clamp(1.75rem, 1.5rem + 2.5vw, 2.75rem);
    font-weight: var(--weight-bold);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }

  & .performance-block__rank-context {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    max-inline-size: 9rem;
  }

  & .performance-block__body {
    font-size: var(--text-md);

    & > * {
      padding-inline: var(--space-2);
    }
  }
}
/* ndb2:block: routes/home/components/home-performance-card/performance-metric-row/performance-metric-row.css */
.performance-metric-row {
  --split-pair-gap-inline: var(--space-2);

  & span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
  }
}
/* ndb2:block: routes/home/components/leaderboard-table/leaderboard-table.css */
/* Block: home leaderboard — table root, player cells, column sort (HTMX). */
.leaderboard-empty {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-text-muted);
}
.leaderboard-table-th--identity {
  /* No visible title; see visually-hidden label in markup. */
  width: 0;
  min-width: 0;
}
/* Opaque fill for avatar column body cells / seam shadows (set per row). */
.leaderboard-table-root .table tbody tr:nth-child(odd) {
  --leaderboard-avatar-sticky-fill: var(--color-bg);
}
.leaderboard-table-root .table tbody tr:nth-child(even) {
  --leaderboard-avatar-sticky-fill: color-mix(
    in srgb,
    var(--color-primary) var(--primary-fill-subtle-mix-pct),
    var(--color-bg)
  );
}
.leaderboard-table-root .table thead .leaderboard-table-th--avatar {
  position: sticky;
  /* Pull 1px past the scrollport to cover fractional-pixel gaps when sticky locks. */
  left: -1px;
  padding-inline-start: calc(var(--table-cell-padding) + 1px);
  z-index: 2;
  width: 1%;
  min-width: 0;
  box-sizing: border-box;
  background-color: transparent;
}
.leaderboard-table-root .table tbody .leaderboard-player-avatar-cell {
  vertical-align: middle;
  width: 1%;
  position: sticky;
  left: -1px;
  padding-inline-start: calc(var(--table-cell-padding) + 1px);
  z-index: 2;
  box-sizing: border-box;
  background-color: var(--leaderboard-avatar-sticky-fill);
  /* Inline-end hairline: scrolling name column was visible through a subpixel seam next to this cell. */
  box-shadow:
    1px 0 0 0 var(--leaderboard-avatar-sticky-fill),
    4px 0 12px -4px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.leaderboard-player-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* End-aligned metrics (sort headers + body numbers): breathing room before column borders / dividers. */
.leaderboard-table-root .table :is(th, td).table-cell--align-end {
  padding-inline-end: calc(var(--table-cell-padding) + var(--space-1));
}
/* Cap name column on narrow viewports; wider viewports let the column grow for a single line. */
.leaderboard-table-root .table tbody .leaderboard-player-name-cell {
  max-width: min(11rem, 46vw);
}
/* = breakpoint.mobile in breakpoints.json */
@media (min-width: 36rem) {
  .leaderboard-table-root .table tbody .leaderboard-player-name-cell {
    max-width: none;
  }
}
/* ndb2:block: routes/home/components/season-card/season-card.css */
.season-card {
  --horizontal-divider-margin-block: var(--space-4);
  font-size: var(--text-xl);

  & .season-card__empty {
    --center-min-height: 12rem;
    margin: 0;
  }

  & .season-card__meta {
    font-weight: var(--weight-bold);
    text-align: center;
    font-size: var(--text-2xl);
  }

  & .season-card__stats {
    --stack-space: var(--space-4);
    columns: 2;
  }

  & .season-card__row :last-child {
    font-weight: var(--weight-semibold);
  }
}
/* ndb2:block: routes/home/page.css */
/* Home page — main menu */
.home-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.home-grid > * {
  flex: 1 1 18rem;
}
.main-menu {
  padding-block-end: var(--space-8);
}
/* ndb2:block: routes/login/components/discord-button/discord-button.css */
/* ndb2:block:discord-button — Discord OAuth CTA (login route) */
.discord-button {
  display: inline-block;
  padding: var(--space-s, 0.75rem) var(--space-l, 1.5rem);
  border-radius: var(--radius-m, 0.375rem);
  background: var(--color-accent, #5865f2);
  color: var(--color-on-accent, #fff);
  font-weight: 600;
  text-decoration: none;

  &:hover {
    filter: brightness(1.08);
  }
}
/* ndb2:block: routes/login/page.css */
.login-page {
  --screen-element-padding-x: var(--space-6);
  --screen-element-padding-y: var(--space-8);
}
/* ndb2:block: shared/components/button/button.css */
/* Block: theme-accent control; edge chrome from utility `.screen-element` (import order: utilities before blocks). */
/* — Root — */
.button {
  /* layout */
  --screen-element-padding-x: var(--space-3);
  --screen-element-padding-y: var(--space-2);
  /* Contain `::after` (absolute + % sizing); without this, the pseudo-element’s containing block is
     not the control and can expand to the viewport—last button in a column would steal hit-testing. */

  position: relative;
  z-index: 0;

  /* type */
  text-decoration: none;
  font: inherit;
  line-height: var(--leading-normal);

  /* color & surface */
  color: var(--color-text);

  /* interaction */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background 0.15s ease,
    color 0.15s ease;

  background: var(--color-surface-muted);

  &:hover {
    /* color & surface */
    color: var(--color-primary);
    /* background: transparent; */
  }
}
/* ndb2:block: shared/components/card-screen-element/card-screen-element.css */
/* Block: `screen-element` panel with a primary top ribbon and knockout title. */
.card-screen-element {
  --screen-element-padding-x: 0;
  --screen-element-padding-y: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;

  & .card-screen-element__bar {
    /* Slant angle from vertical; horizontal run = tan(θ) × (one text line + vertical padding). */
    --screen-element-bar-slope: 20deg;
    /* Title is h2 + .card-screen-element__heading → text-md; h2 keeps globals leading-snug (not bar 1lh). */
    --bar-interior-block-size: calc(var(--text-md) * var(--leading-snug));
    --bar-trapezoid-run: calc(
      tan(var(--screen-element-bar-slope)) *
        (var(--bar-interior-block-size) + 2 * var(--space-1))
    );

    flex: 0 0 auto;
    width: fit-content;
    max-width: calc(100% - var(--space-4));
    box-sizing: border-box;
    /* Reserve space for the top-right overhang (keeps the shape inside the box, avoids parent clip). */
    padding: var(--space-1) calc(var(--space-2) + var(--bar-trapezoid-run))
      var(--space-1) var(--space-2);
    /* Fill: `.primary-specular-gradient` (utilities.css). Right edge: slanted up and right. */
    clip-path: polygon(
      0% 0%,
      100% 0%,
      calc(100% - var(--bar-trapezoid-run)) 100%,
      0% 100%
    );
  }

  & .card-screen-element__heading {
    /* type (match heading strip + global scale from element tag h1–h6); knockout: `.canvas-knockout-text` */
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-semibold);
    font-size: var(--text-md);
  }

  & .card-screen-element__body {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    padding: var(--space-4);
  }
}
/* ndb2:block: shared/components/discord-avatar/discord-avatar.css */
/* Block: Discord user avatar image. Size: `--discord-avatar-size` (set from TSX, default 20px). */
.discord-avatar {
  --discord-avatar-size: 20px;
  flex-shrink: 0;

  & > img {
    display: block;
    width: var(--discord-avatar-size);
    height: var(--discord-avatar-size);
    border-radius: var(--radius-xs);
    object-fit: cover;
  }
}
/* ndb2:block: shared/components/form-field/form-field.css */
/* Block: form-field — label + one child control; uses `[ stack ]` for vertical rhythm. */
/* — Root — */
.form-field {
  & * {
    --stack-space: var(--space-2);
  }

  & label {
    /* type */
    font-weight: var(--weight-medium);
    /* color & surface */
    color: var(--color-text-muted);

    /* layout */
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}
/* ndb2:block: shared/components/heading-screen-element/heading-screen-element.css */
/* Block: trapezoid title ribbon + knockout heading — bar styles align with `.card-screen-element__bar`. */
.heading-screen-element {
  --screen-element-padding-x: 0;
  --screen-element-padding-y: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;

  & .heading-screen-element__bar {
    /* Slant angle from vertical; horizontal run = tan(θ) × (one text line + vertical padding). */
    --screen-element-bar-slope: 20deg;
    /*
     * Bar `1lh` follows inherited body type, not the nested h1–h6 — that skewed the cut vs the card bar.
     * Size the run from the same font × line-height tokens globals use per level.
     */
    --bar-interior-block-size: calc(var(--text-md) * var(--leading-snug));

    &:has(h1) {
      --bar-interior-block-size: calc(var(--text-3xl) * var(--leading-tight));
    }

    &:has(h2) {
      --bar-interior-block-size: calc(var(--text-2xl) * var(--leading-snug));
    }

    &:has(h3) {
      --bar-interior-block-size: calc(var(--text-xl) * var(--leading-snug));
    }

    &:has(h4) {
      --bar-interior-block-size: calc(var(--text-lg) * var(--leading-snug));
    }

    &:has(h5) {
      --bar-interior-block-size: calc(var(--text-md) * var(--leading-snug));
    }

    &:has(h6) {
      --bar-interior-block-size: calc(var(--text-sm) * var(--leading-normal));
    }

    --bar-trapezoid-run: calc(
      tan(var(--screen-element-bar-slope)) *
        (var(--bar-interior-block-size) + 2 * var(--space-1))
    );

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    min-height: min-content;

    padding: var(--space-1) calc(var(--space-2) + var(--bar-trapezoid-run))
      var(--space-1) var(--space-2);

    clip-path: polygon(
      0% 0%,
      100% 0%,
      calc(100% - var(--bar-trapezoid-run)) 100%,
      0% 100%
    );

    /* Fill: `.primary-specular-gradient` (utilities.css). */
  }

  @supports (
    clip-path: polygon(round 1px, 0% 0%, 100% 0%, 100% 100%, 0% 100%)
  ) {
    & .heading-screen-element__bar {
      clip-path: polygon(
        round var(--radius-sm),
        0% 0%,
        100% 0%,
        calc(100% - var(--bar-trapezoid-run)) 100%,
        0% 100%
      );
    }
  }

  & .heading-screen-element__bar h1,
  & .heading-screen-element__bar h2,
  & .heading-screen-element__bar h3,
  & .heading-screen-element__bar h4,
  & .heading-screen-element__bar h5,
  & .heading-screen-element__bar h6 {
    /* Knockout: `.canvas-knockout-text` on the heading element */
    letter-spacing: var(--tracking-wide);
    margin: 0;
    text-transform: uppercase;
  }
}
/* ndb2:block: shared/components/horizontal-divider/horizontal-divider.css */
/* Block: full-width HUD line — mirrors `.screen-element` border + `--hud-shadow-screen-element`. */
.horizontal-divider {
  display: block;
  width: 100%;
  height: 0;
  margin-inline: 0;
  margin-block: var(--horizontal-divider-margin-block, 0);
  padding: 0;
  border: none;
  border-top: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--hud-shadow-screen-element);
  background: transparent;
}
/* ndb2:block: shared/components/loading/loading.css */
.loader {
  --_loader-size: var(--loader-size, var(--space-16));
  --_loader-border: var(--loader-border-width, var(--space-2));

  position: relative;
  width: var(--_loader-size);
  height: var(--_loader-size);
  border-radius: 50%;
  display: inline-block;
  border-top: var(--_loader-border) solid
    color-mix(in srgb, var(--color-text) 85%, transparent);
  border-right: var(--_loader-border) solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--_loader-size);
  height: var(--_loader-size);
  border-radius: 50%;
  border-bottom: var(--_loader-border) solid var(--color-primary);
  border-left: var(--_loader-border) solid transparent;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ndb2:block: shared/components/page-layout/nav-drawer-toggle/nav-drawer-toggle.css */
/* Chevron over native checkbox; unchecked → points left (scaleX) */
.nav-drawer-toggle {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;

  & input {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;

    cursor: pointer;
    touch-action: manipulation;
    color: var(--color-text-muted);
    background-color: var(--color-text-muted);
    --nav-drawer-toggle-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M7.5 4.5L13.5 9.5L7.5 15.5'/%3E%3C/svg%3E");
    -webkit-mask: var(--nav-drawer-toggle-chevron) no-repeat center / 1.5rem
      1.5rem;
    mask: var(--nav-drawer-toggle-chevron) no-repeat center / 1.5rem 1.5rem;
    transform: scaleX(1);
    transform-origin: center;
    transition: transform 0.2s ease;

    &:not(:checked) {
      transform: scaleX(-1);
    }

    &:focus {
      outline: none;
    }
  }

  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-left: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  border-top: 1px solid var(--color-primary);
}
/* ndb2:block: shared/components/page-layout/page-layout.css */
/* Authenticated shell (see `AuthenticatedPageLayout`).
   Compact (default): fixed drawer rail + checkbox; wide and up: sticky rail full viewport height (`height: 100dvh`,
   `position: sticky`, `top: 0`, overflow inside if content exceeds). See `web-breakpoints` / `breakpoints.json`. */
.page-layout {
  --page-layout-nav-width: 16rem;

  position: relative;
  min-height: 100vh;
  min-height: 100dvh;

  /* = breakpoint.wide in breakpoints.json */
  @media (min-width: 80rem) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-width: 0;
  }

  & > main {
    position: relative;
    z-index: 0;
    min-width: 0;
    padding-block-start: var(--space-4);

    @media (min-width: 80rem) {
      flex: 1 1 0%;
    }
  }

  & .page-layout-nav {
    /* `[ glass-background ]` on the aside (see `page-layout.tsx`); strip it at wide so only `body`
       paints the HUD canvas. Specificity beats the utility. */
    box-sizing: border-box;
    border-left: 1px solid var(--color-primary);
    box-shadow: inset 0 1px 0
      color-mix(in srgb, var(--color-text) 4%, transparent);
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--page-layout-nav-width);
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
    min-width: 0;
    min-height: 0;
    transform: none;
    transition: transform 0.3s ease;

    @media (min-width: 80rem) {
      background-color: transparent;
      background-image: none;

      position: sticky;
      top: 0;
      align-self: flex-start;
      height: 100vh;
      height: 100dvh;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;

      right: auto;
      bottom: auto;
      z-index: auto;
      flex: 0 0 var(--page-layout-nav-width);
      width: var(--page-layout-nav-width);
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: var(--space-4);
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      pointer-events: none;
      z-index: 0;
      box-shadow: var(--hud-shadow-nav-edge);
    }

    & .page-layout-nav-toggle {
      position: absolute;
      top: var(--space-8);
      left: calc(-1 * var(--space-12));
      width: var(--space-12);
      /* Explicit square (~48px @ 16px root): comfortable touch target; chevron stays mask-sized inside. */
      height: var(--space-12);
      box-sizing: border-box;
      z-index: 2;
    }

    & .page-layout-nav-body {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      overflow: visible;
    }
  }

  & .page-layout-nav-mobile {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    height: 100%;

    @media (min-width: 80rem) {
      display: none;
    }
  }

  & .page-layout-nav-desktop {
    display: none;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;

    @media (min-width: 80rem) {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  &:has(#app-site-nav-reveal:not(:checked)) .page-layout-nav {
    transform: translateX(100%);
  }

  @media (min-width: 80rem) {
    &:has(#app-site-nav-reveal:not(:checked)) .page-layout-nav {
      transform: none;
    }
  }
}
.document-frame {
  max-width: 72rem;

  @media (min-width: 80rem) {
    max-width: 96rem;
    padding-right: 0;
  }
}
/* ndb2:block: shared/components/preferences-form/preferences-form.css */
.preferences-form {
  --stack-space: var(--space-3);
}
/* ndb2:block: shared/components/progress-bar-ticks/progress-bar-ticks.css */
/* Block: tick row in `.progress-bar-ticks__shell` (`.screen-element`); optional tab renders below that frame. */
.progress-bar-ticks {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;

  /*
   * Room under the caption row (percent tab drop-shadow and/or end labels) outside the bordered shell.
   */
  &.progress-bar-ticks--with-caption {
    padding-block-end: var(--space-3);
  }

  /*
   * Bordered HUD shell — ticks only — so the caption tab sits fully below `screen-element` rim/border.
   */
  & .progress-bar-ticks__shell {
    --screen-element-padding-x: var(--space-3);
    --screen-element-padding-y: var(--space-2);

    /* Static readout: avoid `.screen-element` hover brightening. */
    &:hover {
      box-shadow: var(--hud-shadow-screen-element);
      border-color: var(--color-primary);
    }
  }

  & .progress-bar-ticks__track {
    display: flex;
    align-items: stretch;
    gap: var(--space-1);
    min-height: var(--space-5);
    min-width: 0;
  }

  & .progress-bar-ticks__segment {
    flex: 1 1 0;
    min-width: 0;
    /* Unfilled: stronger than 50/50 border+bg so ticks read on light glass; `--color-text-muted` keeps contrast in both themes. */
    background: color-mix(
      in srgb,
      var(--color-text-muted) 20%,
      color-mix(in srgb, var(--color-border) 72%, var(--color-bg))
    );
    box-shadow: none;

    &[data-filled="true"] {
      background: var(--color-primary);
      box-shadow: 0 0 10px 0 var(--hud-glow-mid);
    }
  }

  /*
   * One row below the HUD shell: min (start) | centered percent tab | max (end).
   */
  & .progress-bar-ticks__figure-mount {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    width: 100%;
    padding-inline: 2px;
  }

  & .progress-bar-ticks__caption-min,
  & .progress-bar-ticks__caption-max {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    align-self: end;
    min-width: 0;
  }

  & .progress-bar-ticks__caption-min {
    justify-self: start;
    text-align: start;
  }

  & .progress-bar-ticks__caption-max {
    justify-self: end;
    text-align: end;
  }

  & .progress-bar-ticks__caption-center {
    display: flex;
    justify-content: center;
    justify-self: center;
    min-width: 0;
  }

  /*
   * Filled tab: primary diagonal — tab face; knockout on inner span via `.canvas-knockout-text`.
   */
  & .progress-bar-ticks__figure {
    display: block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-1) var(--space-6);
    clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
    text-align: center;
    filter: drop-shadow(0 var(--space-1) var(--space-3) var(--hud-glow-mid));
  }

  /* Typography; knockout: `.canvas-knockout-text` */
  & .progress-bar-ticks__figure-label {
    margin: 0;
    padding: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }
}
/* ndb2:block: shared/components/select/select.css */
/* Block: select — custom listbox + hidden native `<select>` (form / HTMX). */
/* — Root — */
.select {
  /* Inner curve of `.screen-element` border (1px); `:focus-visible` outline follows `border-radius`. */
  --select-trigger-r-tl: calc(var(--radius-sm) - 1px);
  --select-trigger-r-tr: calc(var(--radius-sm) - 1px);
  --select-trigger-r-bl: calc(var(--radius-sm) - 1px);
  --select-trigger-r-br: calc(var(--radius-sm) - 1px);

  /**
   * Floating list: `data-select-placement` (from JS) swaps “start” vs “end” edge — seam toward the
   * trigger, radii on the outer edge, anchor `top`/`bottom`, and a slightly different drop shadow.
   */
  --select-list-seam: 1px solid
    color-mix(in srgb, var(--color-primary) 22%, var(--color-bg) 78%);
  --select-list-border-start: var(--select-list-seam);
  --select-list-border-end: 1px solid var(--color-primary);
  --select-list-top: 100%;
  --select-list-bottom: auto;
  --select-list-r-tl: 0;
  --select-list-r-tr: 0;
  --select-list-r-bl: var(--radius-sm);
  --select-list-r-br: var(--radius-sm);
  --select-list-shadow: var(--hud-shadow-select-list-below);

  &[data-select-placement="above"] {
    --select-list-border-start: 1px solid var(--color-primary);
    --select-list-border-end: var(--select-list-seam);
    --select-list-top: auto;
    --select-list-bottom: 100%;
    --select-list-r-tl: var(--radius-sm);
    --select-list-r-tr: var(--radius-sm);
    --select-list-r-bl: 0;
    --select-list-r-br: 0;
    --select-list-shadow: var(--hud-shadow-select-list-above);
  }

  /**
   * **`.screen-element`** on the surface: one chrome around the **trigger** only.
   * The list is **not** in flow: it is absolutely placed under the surface (`.select` / surface are `position: relative`)
   * so the panel floats over page content. When open, the surface drops its bottom border + radii; the list carries the bottom corners.
   */
  & .select__surface {
    --screen-element-padding-x: 0;
    --screen-element-padding-y: 0;
    /* layout */
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    /* opaque panel — frosted tokens show the page behind */
    background: var(--color-bg);
    overflow: visible;
  }

  /* — Trigger (no separate screen-element; chrome is on `select__surface`) — */
  & .select__trigger {
    --screen-element-padding-x: var(--space-3);
    --screen-element-padding-y: var(--space-2);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
    text-align: start;
    border: 0;
    border-top-left-radius: var(--select-trigger-r-tl);
    border-top-right-radius: var(--select-trigger-r-tr);
    border-bottom-left-radius: var(--select-trigger-r-bl);
    border-bottom-right-radius: var(--select-trigger-r-br);
    /* type */
    font: inherit;
    line-height: var(--leading-normal);
    /* color & surface */
    color: var(--color-text);
    background: transparent;
    /* interaction */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: var(--screen-element-padding-y) var(--screen-element-padding-x);
    transition:
      background 0.15s ease,
      color 0.15s ease;

    &:hover {
      /* solid hover tint (not frosted `--color-surface-muted`) */
      background: color-mix(in srgb, var(--color-text) 6%, var(--color-bg) 94%);
      color: var(--color-primary);
    }

    /* Parents like `.site-nav * { width: 100% }` make every descendant full-width. Two
     * 100%-wide flex items in a row + `min-width: 0` on the label collapse the value to
     * zero width, so the closed label is invisible. Reset width for direct children. */
    & > * {
      width: auto;
      max-width: 100%;
    }
  }

  & .select__value {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  & .select__chevron {
    flex-shrink: 0;
    width: auto;
    max-width: none;
    font-size: 0.65em;
    line-height: 1;
    opacity: 0.85;
  }

  /* — Listbox: floats under the button (out of document flow) — */
  & .select__list {
    position: absolute;
    z-index: 50;
    top: var(--select-list-top);
    bottom: var(--select-list-bottom);
    /* Inset 1px each side: abspos `left:0;right:0` was to the *padding* box, so a 1px
     * border on the list sat *inside* the surface and looked one border short of the trigger. */
    left: -1px;
    right: -1px;
    width: auto;
    /* max width from JS (viewport) overrides when set; fall back: */
    max-height: 16rem;
    margin: 0;
    margin-top: 0; /* no gap: flush under trigger (below) */
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;

    box-sizing: border-box;
    border: 1px solid var(--color-primary);
    border-top: var(--select-list-border-start);
    border-bottom: var(--select-list-border-end);
    border-top-left-radius: var(--select-list-r-tl);
    border-top-right-radius: var(--select-list-r-tr);
    border-bottom-left-radius: var(--select-list-r-bl);
    border-bottom-right-radius: var(--select-list-r-br);
    box-shadow: var(--select-list-shadow);
    color: var(--color-text);
    background: var(--color-bg);

    &[hidden] {
      display: none !important;
    }
  }

  &.select--open:not([data-select-placement="above"]) {
    --select-trigger-r-bl: 0;
    --select-trigger-r-br: 0;
  }

  &.select--open[data-select-placement="above"] {
    --select-trigger-r-tl: 0;
    --select-trigger-r-tr: 0;
  }

  /* open, panel below: bottom border “removed” in paint only — keep 1px transparent to avoid
     layout shift (border:none shrinks the border box by 1px and moves the form-field / label). */
  &.select--open:not([data-select-placement="above"]) .select__surface {
    border-bottom: 1px solid transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* trim bottom spread so the panel attach looks like one control */
    box-shadow: var(--hud-shadow-select-surface-open);
  }

  /* open, panel above: same transparent 1px trick for the top edge */
  &.select--open[data-select-placement="above"] .select__surface {
    border-top: 1px solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: var(--hud-shadow-select-surface-open);
  }

  /* — Options — */
  & .select__option {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition:
      background 0.12s ease,
      color 0.12s ease;

    &:hover:not([aria-selected="true"]) {
      background: color-mix(in srgb, var(--color-primary) 26%, var(--color-bg));
      color: var(--color-text);
    }

    /* Selected row: stronger tint + body text for max contrast vs mid accent hues. */
    &[aria-selected="true"] {
      background: color-mix(in srgb, var(--color-primary) 38%, var(--color-bg));
      color: var(--color-text);
    }

    &[aria-selected="true"]:hover {
      background: color-mix(in srgb, var(--color-primary) 46%, var(--color-bg));
      color: var(--color-text);
    }
  }

  & .select__option[data-select-option-active="true"] {
    background: color-mix(in srgb, var(--color-primary) 38%, var(--color-bg));
    color: var(--color-text);
    /* Top/bottom only: full inset outline sat flush with the list border and read as double-wide sides. */
    outline: none;
    box-shadow:
      inset 0 1px 0 0 var(--color-primary),
      inset 0 -1px 0 0 var(--color-primary);
  }

  & .select__option[data-select-option-active="true"]:hover {
    background: color-mix(in srgb, var(--color-primary) 46%, var(--color-bg));
  }
}
/* ndb2:block: shared/components/site-nav/site-nav.css */
.site-nav {
  /* layout */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;

  & .site-nav__title {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-block: var(--space-2);
    align-items: baseline;
    width: 100%;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    text-transform: uppercase;

    & .site-nav__title-char {
      flex: 0 0 auto;
      display: inline-block;
      width: auto;
      color: var(--color-text);
    }
  }

  & > * {
    /* layout */
    display: block;
    width: 100%;
  }

  & > div:last-child {
    flex: 0 0 auto;
    margin-block-start: auto;
  }
}
/* ndb2:block: shared/components/table/components/th/th.css */
/* Block: Table sort header (`Th`) — label + ▲▼ (compose HTMX / ARIA via button props). */
.table-th {
  /* Match `<th>[ table-cell--align-* ]`: `text-align` does not affect this inner flex row. */
  &.table-cell--align-start > div {
    justify-content: flex-start;
  }

  &.table-cell--align-end > div {
    justify-content: flex-end;
  }

  & > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    & > span {
      text-transform: uppercase;
    }
  }

  & .table-th__controls {
    display: grid;
    grid-template-rows: 1fr 1fr;

    & button:first-child {
      grid-row: 1;
    }

    & button:last-child {
      grid-row: 2;
    }
  }
}
.table-th-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font: inherit;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0.25;
  cursor: pointer;
  padding-inline: 0;
  font-size: var(--text-xl);

  &:hover:not([aria-pressed="true"]) {
    opacity: 0.48;
    color: var(--color-text);
  }

  &:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
    opacity: 1;
  }

  &[aria-pressed="true"] {
    opacity: 1;
    color: var(--color-primary);

    & :hover {
      opacity: 1;
      color: var(--color-primary);
    }
  }
}
/* ndb2:block: shared/components/table/table.css */
/* Block: Table (`Table` adds bracket class `table`). Wide grids: parent should scroll (e.g. `.horizontal-scroll-region` or `CardScreenElement` `bodyOverflowX="auto"`). */
.table {
  --table-font-size: var(--text-md);
  --table-cell-padding: var(--space-1);

  width: max-content;
  min-width: 100%;
  border-spacing: 0;
  font-size: var(--table-font-size);
}
.table :is(th, td) {
  padding: var(--table-cell-padding);
}
.table :is(th, td).table-cell--align-start {
  text-align: start;
}
.table :is(th, td).table-cell--align-end {
  text-align: end;
}
.table :is(th, td).table-cell--align-center {
  text-align: center;
}
/* Subtle stripe: tint only body rows so multi-row headers stay uniform (`--primary-fill-subtle`). */
.table tbody tr:nth-child(even) {
  background: var(--primary-fill-subtle);
}
/* Optional vertical rules: add `table-cell--column-divider` on any `<th>` / `<td>`. */
.table :is(th, td).table-cell--column-divider {
  border-inline-start: 1px solid var(--color-border);
}