/* VENDORED — generated by @fluveo/tokens (Style Dictionary). DO NOT EDIT.
   Synced from packages/tokens/dist/tokens.css via: pnpm --filter @fluveo/dashboard sync:tokens
   Committed on purpose so the standalone Docker build (which only copies this
   service dir) can consume the design tokens without the workspace present. */
/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fbfbf9;
  --color-neutral-100: #f9f9f7;
  --color-neutral-150: #f2f2ee;
  --color-neutral-200: #f4f2eb;
  --color-neutral-300: #ede9de;
  --color-neutral-400: #d6d3d1;
  --color-neutral-500: #a6a09b;
  --color-neutral-600: #79716b;
  --color-neutral-700: #57534d;
  --color-neutral-800: #29261e;
  --color-neutral-850: #23211a;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;
  --color-neutral-1000: #000000;
  --color-blue-50: #e6eef9;
  --color-blue-75: #dcebff; /** Focus-halo tint. Brighter and more chromatic than 50/100 — it exists to read as a glow behind a control, not as a surface fill. */
  --color-blue-100: #d7e4f6;
  --color-blue-200: #c9daf3;
  --color-blue-300: #8bafe4;
  --color-blue-400: #6494db;
  --color-blue-500: #3c79d2;
  --color-blue-600: #2961b2;
  --color-blue-700: #224f91;
  --color-blue-800: #1e457f;
  --color-blue-900: #193b6c;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c6d2ff;
  --color-indigo-300: #a3b3ff;
  --color-indigo-400: #7c86ff;
  --color-indigo-500: #615fff;
  --color-indigo-600: #4f39f6;
  --color-indigo-700: #432dd7;
  --color-indigo-800: #372aac;
  --color-indigo-900: #312c85;
  --color-indigo-950: #1e1a4d;
  --color-green-50: #eafbf3;
  --color-green-100: #d0fae5;
  --color-green-200: #8dd9bc;
  --color-green-400: #45a16b;
  --color-green-500: #009966;
  --color-green-600: #008049;
  --color-green-700: #007a55;
  --color-green-750: #007041;
  --color-green-800: #006138;
  --color-green-900: #1f4730;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd4;
  --color-orange-200: #f6dfd5;
  --color-orange-300: #e5b49e;
  --color-orange-400: #d58868;
  --color-orange-500: #c45d31;
  --color-orange-600: #c74919;
  --color-orange-700: #ca3500;
  --color-orange-800: #91320f;
  --color-orange-900: #582f1d;
  --color-red-50: #fff1f2;
  --color-red-75: #ffe4e0; /** Danger-halo tint, the red counterpart to blue.75. Close to but NOT rose.100 (#ffe4e6) — that one is the FAILED pill fill and belongs to the other ramp. */
  --color-red-100: #f7d7d4;
  --color-red-200: #f6bbb6;
  --color-red-300: #de8d87;
  --color-red-400: #d56e67;
  --color-red-500: #cd5047;
  --color-red-600: #c03f34;
  --color-red-700: #983229;
  --color-red-800: #74261f;
  --color-red-900: #501b16;
  --color-black-alpha-0: rgba(0, 0, 0, 0);
  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
  --color-black-alpha-6: rgba(0, 0, 0, 0.06);
  --color-black-alpha-7: rgba(0, 0, 0, 0.07);
  --color-black-alpha-8: rgba(0, 0, 0, 0.08);
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-12: rgba(0, 0, 0, 0.12);
  --color-black-alpha-16: rgba(0, 0, 0, 0.16);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-48: rgba(0, 0, 0, 0.48);
  --color-black-alpha-100: #000000;
  --color-white-alpha-0: rgba(255, 255, 255, 0);
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-6: rgba(255, 255, 255, 0.06);
  --color-white-alpha-7: rgba(255, 255, 255, 0.07);
  --color-white-alpha-8: rgba(255, 255, 255, 0.08);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-12: rgba(255, 255, 255, 0.12);
  --color-white-alpha-16: rgba(255, 255, 255, 0.16);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-48: rgba(255, 255, 255, 0.48);
  --color-white-alpha-72: rgba(255, 255, 255, 0.72);
  --color-white-alpha-100: #ffffff;
  --color-gray-125: #f5f5f4; /** The one NEUTRAL step in this warm ramp — the balance rail's empty track (balances-empty@1x.png) is drawn #f5f5f4, with none of the ramp's yellow. Kept as its own step rather than warmed to fit, because the track reads as a cast against the card it sits on. */
  --color-gray-550: #938b84; /** Readable muted ink on dark surfaces, between gray.500 and gray.600. */
  --color-gray-650: #6b645e; /** Readable faint ink on light surfaces, including the selected sidebar. */
  --color-gray-675: #625c55; /** Readable secondary ink between gray.650 and body gray.700. */
  --color-gray-725: #525252; /** Neutral twin of 700 — same lightness, none of the ramp's yellow. Figma sets the inset panel titles in a dialog at this value; warming it to 700 tints them against the neutral body text beside them. The ramp's other neutral step is 125. */
  --color-gray-750: #3e3e3c;
  --color-sky-50: #f0f9ff;
  --color-rose-100: #ffe4e6;
  --color-rose-700: #c70036;
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-56: 56px;
  --font-tracking-tight-56: -3px;
  --font-tracking-tight-40: -1.8px;
  --font-tracking-tight-26: -1px;
  --font-tracking-tight-24: -0.7px;
  --font-tracking-tight-20: -0.4px;
  --font-tracking-tight-16: -0.32px;
  --font-tracking-normal: 0;
  --font-tracking-label: 0.05em;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --space-4-5: 18px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-6xl: 32px;
  --radius-full: 9999px;
  --avatar-ring-pink: #fcdcec;
  --avatar-ring-teal: #d7f4f6;
  --avatar-ring-purple: #e2ddfd;
  --avatar-ring-orange: #ffead3;
  --status-badge-danger-bg: #ffe4e6;
  --status-badge-danger-text: #c70036;
  --status-badge-info-bg: #dff2fe;
  --status-badge-info-text: #0069a8;
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-2: 0 1px 2px -1px rgba(0,0,0,0.10), 0 1px 3px 0 rgba(0,0,0,0.10);
  --shadow-3: 0 2px 4px -2px rgba(0,0,0,0.10), 0 4px 6px -1px rgba(0,0,0,0.10);
  --shadow-4: 0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-5: 0 8px 10px -6px rgba(0,0,0,0.16), 0 20px 25px -5px rgba(0,0,0,0.12);
  --shadow-border-1: 0 1px 2px 0 rgba(0,0,0,0.06), 0 0 1px 0 rgba(0,0,0,0.20);
  --shadow-border-2: 0 1px 2px -1px rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.06), 0 0 1px 0 rgba(0,0,0,0.20);
  --shadow-ring: 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-ring-strong: 0 0 0 1px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.06), 0 0 1px 0 rgba(0,0,0,0.20);
  --shadow-card-hover: 0 1px 2px -1px rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.06), 0 0 1px 0 rgba(0,0,0,0.20);
  --shadow-flyout: 0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10), 0 0 1px 0 rgba(0,0,0,0.20);
  --shadow-btn: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-btn-ink: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-btn-accent: 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-btn-danger: 0 1px 2px 0 rgba(0,0,0,0.06);
  --chart-series-wash: rgba(0, 153, 102, 0.1);
  --chart-compare: oklch(0.7662 0.0132 75.34);
  --chart-grid: oklch(0.9521 0.0041 91.45);
  --tooltip-fg-muted: oklch(0.72 0.009 90);
  --tooltip-positive: oklch(0.8005 0.1305 161);
  --tooltip-negative: oklch(0.7304 0.1401 27.13);
  --agent-highlight-border-width: 1px;
  --button-height: 40px; /** Recipe default · 40. */
  --button-height-sm: 32px; /** Small · 32 (dense toolbars/tables). */
  --button-height-lg: 40px; /** DEPRECATED alias of height. */
  --button-height-xl: 40px; /** DEPRECATED alias of height. */
  --button-icon: 16px; /** Icon · 16 at 40 and 32 (Figma xxl / lg); 14 at 28 (Figma md). */
  --button-icon-sm: 16px; /** Small (32, Figma lg) · 16. Was 15, drawn nowhere. */
  --button-icon-lg: 18px;
  --input-height: 40px;
  --amount-tracking: -0.01em;
  --drawer-width: clamp(560px, 50vw, 960px);
  --drawer-sheet-width: 400px; /** The flat record sheet beside a list (Transactions 115:7612, sheet 149:12420): 400 wide, flush right, no shadow. */
  --preview-width: 320px;
  --sidebar-width: 220px;
  --modal-art-height: 240px; /** The art band of an art-topped dialog (Modal `art`): Figma welcome sheet 339:6531, 480 × 240. */
  --modal-art-card-height: 220px; /** The art band of the card art layout (Modal artLayout="card"): Figma setup Details submitted 343:11694, 480 × 220. */
  --scrim-blur: 12px;
  --topbar-height: 60px;
  --focus-ring: 0 0 0 2px rgba(0,153,102,0.40); /** Applied on :focus-visible — 2px accent ring at 40% (green-500). */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /** Default: hover, state. */
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1); /** Entrances. */
  --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1); /** Badges, pops. */
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1); /** Symmetric on-screen. */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /** Drawers, sheets. */
  --duration-micro: 120ms; /** Press, hover, icon swap. */
  --duration-fast: 180ms; /** Tooltip, dropdown, popover. */
  --duration-normal: 200ms; /** Select, menu. */
  --duration-overlay: 250ms; /** Modal, dialog. */
  --duration-slow: 280ms; /** Entrances, reveals. */
  --duration-sheet: 500ms; /** Drag-continuous surfaces. */
  --duration-pulse: 1200ms; /** One period of the skeleton pulse and of the shell's indeterminate bar — the only permitted loops besides a spinner. */
  --duration-spin: 800ms; /** One revolution of a busy spinner. */
  --motion-spin-ease: linear;
  --motion-travel: 1; /** Multiplier for entrance travel (an 8px rise is calc(8px * var(--motion-travel))). 0 under reduced motion. */
  --motion-scale: 1; /** Multiplier for press and overlay scale (a 0.96 start is calc(1 - 0.04 * var(--motion-scale))). 0 under reduced motion. */
  --type-h1-tracking: -0.2px;
  --type-h2-tracking: -0.2px;
  --type-h3-tracking: -0.15px;
  --type-h4-tracking: -0.15px;
  --type-h5-tracking: -0.15px;
  --type-h6-tracking: -0.15px;
  --type-label-lg-tracking: -0.2px;
  --type-label-md-tracking: -0.2px;
  --type-label-base-tracking: -0.15px;
  --type-label-sm-tracking: -0.1px;
  --type-label-xs-tracking: -0.1px;
  --type-body-lg-tracking: -0.15px;
  --type-body-md-tracking: -0.15px;
  --type-body-base-tracking: -0.15px;
  --type-body-sm-tracking: -0.1px;
  --type-body-xs-tracking: -0.1px;
  --type-body-tiny-tracking: 0px;
  --color-gray-0: var(--color-neutral-0);
  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-150: var(--color-neutral-150);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-850: var(--color-neutral-850);
  --color-gray-900: var(--color-neutral-900);
  --color-gray-950: var(--color-neutral-950);
  --color-gray-1000: var(--color-neutral-1000);
  --color-violet-50: var(--color-indigo-50);
  --color-violet-100: var(--color-indigo-100);
  --color-violet-200: var(--color-indigo-200);
  --color-violet-300: var(--color-indigo-300);
  --color-violet-400: var(--color-indigo-400);
  --color-violet-500: var(--color-indigo-500);
  --color-violet-600: var(--color-indigo-600);
  --color-violet-700: var(--color-indigo-700);
  --color-violet-800: var(--color-indigo-800);
  --color-violet-900: var(--color-indigo-900);
  --color-violet-950: var(--color-indigo-950);
  --color-alpha-black-0: var(--color-black-alpha-0);
  --color-alpha-black-5: var(--color-black-alpha-5);
  --color-alpha-black-6: var(--color-black-alpha-6);
  --color-alpha-black-7: var(--color-black-alpha-7);
  --color-alpha-black-8: var(--color-black-alpha-8);
  --color-alpha-black-10: var(--color-black-alpha-10);
  --color-alpha-black-12: var(--color-black-alpha-12);
  --color-alpha-black-16: var(--color-black-alpha-16);
  --color-alpha-black-20: var(--color-black-alpha-20);
  --color-alpha-black-48: var(--color-black-alpha-48);
  --color-alpha-white-0: var(--color-white-alpha-0);
  --color-alpha-white-5: var(--color-white-alpha-5);
  --color-alpha-white-6: var(--color-white-alpha-6);
  --color-alpha-white-7: var(--color-white-alpha-7);
  --color-alpha-white-8: var(--color-white-alpha-8);
  --color-alpha-white-10: var(--color-white-alpha-10);
  --color-alpha-white-12: var(--color-white-alpha-12);
  --color-alpha-white-16: var(--color-white-alpha-16);
  --color-alpha-white-20: var(--color-white-alpha-20);
  --color-alpha-white-48: var(--color-white-alpha-48);
  --color-alpha-white-72: var(--color-white-alpha-72);
  --bg-page-body: var(--color-neutral-100);
  --bg-sidebar-surface: var(--color-neutral-100);
  --bg-sidebar-hovered: var(--color-neutral-200);
  --bg-sidebar-selected: var(--color-white-alpha-0);
  --bg-surface-base: var(--color-neutral-0);
  --bg-surface-subtle: var(--color-neutral-100);
  --bg-surface-raised: var(--color-neutral-150);
  --bg-surface-selected: var(--color-neutral-200);
  --bg-surface-overlay: var(--color-black-alpha-48);
  --bg-surface-inverse: var(--color-neutral-850);
  --bg-button-primary-default: var(--color-neutral-850);
  --bg-button-primary-hover: var(--color-neutral-800);
  --bg-button-primary-pressed: var(--color-neutral-900);
  --bg-button-primary-focus: var(--color-neutral-850);
  --bg-button-primary-disabled: var(--color-neutral-300);
  --bg-button-accent-default: var(--color-green-500);
  --bg-button-accent-hover: var(--color-green-600);
  --bg-button-accent-pressed: var(--color-green-700);
  --bg-button-accent-focus: var(--color-green-500);
  --bg-button-accent-disabled: var(--color-green-200);
  --bg-button-destructive-default: var(--color-red-500);
  --bg-button-destructive-hover: var(--color-red-600);
  --bg-button-destructive-pressed: var(--color-red-700);
  --bg-button-destructive-focus: var(--color-red-500);
  --bg-button-destructive-disabled: var(--color-red-200);
  --bg-button-outline-default: var(--color-neutral-50);
  --bg-button-outline-hover: var(--color-neutral-200);
  --bg-button-outline-pressed: var(--color-neutral-300);
  --bg-button-outline-focus: var(--color-neutral-50);
  --bg-button-outline-disabled: var(--color-neutral-200);
  --bg-button-secondary-default: var(--color-neutral-200);
  --bg-button-secondary-hover: var(--color-neutral-300);
  --bg-button-secondary-pressed: var(--color-neutral-400);
  --bg-button-secondary-focus: var(--color-neutral-200);
  --bg-button-secondary-disabled: var(--color-neutral-300);
  --bg-button-ghost-default: var(--color-white-alpha-0);
  --bg-button-ghost-hover: var(--color-neutral-200);
  --bg-button-ghost-pressed: var(--color-neutral-300);
  --bg-button-ghost-focus: var(--color-neutral-50);
  --bg-button-ghost-disabled: var(--color-white-alpha-0);
  --bg-vibrant-info-base: var(--color-blue-500);
  --bg-vibrant-info-subtle: var(--color-blue-50);
  --bg-vibrant-warning-subtle: var(--color-orange-200);
  --bg-vibrant-warning-base: var(--color-orange-500);
  --bg-vibrant-success-subtle: var(--color-green-100);
  --bg-vibrant-success-base: var(--color-green-400);
  --bg-vibrant-error-subtle: var(--color-red-100);
  --bg-vibrant-error-base: var(--color-red-500);
  --bg-interactive-default: var(--color-neutral-0);
  --bg-interactive-hover: var(--color-neutral-200);
  --bg-interactive-focus: var(--color-neutral-0);
  --bg-interactive-disabled: var(--color-neutral-300);
  --bg-track: var(--color-gray-125); /** Empty track behind a filled bar (the balance allocation rail). One step darker than --bg-inset and neutral, so the unfunded remainder reads as a groove rather than as more card. */
  --border-surface-default: var(--color-black-alpha-7);
  --border-surface-subtle: var(--color-black-alpha-5);
  --border-surface-strong: var(--color-black-alpha-10);
  --border-interactive-default: var(--color-black-alpha-8);
  --border-interactive-hover: var(--color-black-alpha-12);
  --border-interactive-focus: var(--color-black-alpha-20);
  --border-interactive-disabled: var(--color-black-alpha-6);
  --border-primary-default: var(--color-neutral-800);
  --border-destructive-default: var(--color-red-500);
  --border-accent-default: var(--color-green-500);
  --content-fg-default: var(--color-neutral-700);
  --content-fg-subtle: var(--color-neutral-600);
  --content-fg-strong: var(--color-neutral-900);
  --content-fg-placeholder: var(--color-neutral-500);
  --content-fg-disabled: var(--color-neutral-500);
  --content-fg-on-color: var(--color-neutral-0);
  --content-fg-on-primary: var(--color-neutral-0);
  --content-fg-on-color-secondary: var(--color-white-alpha-72);
  --content-vibrant-info-default: var(--color-blue-500);
  --content-vibrant-info-strong: var(--color-blue-900);
  --content-vibrant-info-disabled: var(--color-blue-300);
  --content-vibrant-warning-default: var(--color-orange-500);
  --content-vibrant-warning-strong: var(--color-orange-900);
  --content-vibrant-success-subtle: var(--color-green-400);
  --content-vibrant-success-default: var(--color-green-500);
  --content-vibrant-success-strong: var(--color-green-900);
  --content-vibrant-error-default: var(--color-red-500);
  --content-vibrant-error-strong: var(--color-red-900);
  --content-vibrant-error-disabled: var(--color-red-300);
  --effect-1: var(--color-black-alpha-6);
  --effect-2: var(--color-black-alpha-10);
  --effect-3: var(--color-black-alpha-12);
  --effect-4: var(--color-black-alpha-16);
  --effect-5: var(--color-black-alpha-20);
  --effect-primary: var(--color-black-alpha-10);
  --effect-danger: var(--color-red-200);
  --effect-accent: var(--color-green-100);
  --status-badge-success-bg: var(--color-green-100);
  --status-badge-success-text: var(--color-green-700);
  --status-badge-warning-bg: var(--color-orange-100);
  --status-badge-warning-text: var(--color-orange-700);
  --status-ok-dot: var(--color-green-500);
  --status-ok-badge: var(--color-green-500);
  --status-warn-dot: var(--color-orange-500);
  --status-warn-surface: var(--color-orange-50); /** Callout/banner fill — paler than bg, which is the pill fill. */
  --status-info-fg: var(--status-badge-info-text);
  --status-info-bg: var(--status-badge-info-bg);
  --status-info-dot: var(--color-blue-500);
  --status-info-surface: var(--color-sky-50); /** Callout/banner fill — paler than bg, which is the pill fill. */
  --status-bad-fg: var(--status-badge-danger-text);
  --status-bad-bg: var(--status-badge-danger-bg);
  --status-bad-dot: var(--color-red-500);
  --status-bad-surface: var(--color-red-50); /** Callout/banner fill — paler than bg, which is the pill fill. */
  --fg-3: var(--color-gray-675);
  --fg-4: var(--color-gray-650);
  --fg-brand: var(--color-gray-750);
  --fg-panel-title: var(--color-gray-725); /** Title of an inset panel inside a dialog (Destination, Account information). Neutral, and a shade under --fg-default so the panel reads as a sub-section of the dialog rather than a second heading. */
  --halo-accent: var(--color-blue-75);
  --halo-danger: var(--color-red-75);
  --accent-text: var(--color-green-700); /** Text-safe accent for readable navigation labels on light sidebar surfaces. */
  --accent-disabled-fg: var(--color-green-400);
  --accent-subtle: var(--color-green-100);
  --link: var(--color-green-500);
  --auth-link: var(--color-green-400); /** Links on the signed-out onboarding surfaces (/login, /signup). A step lighter than --link so they read as secondary against the auth card's single green call to action, which is --accent-bg (green.500) — the same value --link now carries. */
  --focus: var(--color-green-500);
  --btn-danger-disabled-fg: var(--color-red-400);
  --btn-danger-border: var(--color-red-700);
  --chart-series: var(--color-green-500);
  --agent-mark-size-md: var(--space-8);
  --agent-mark-size-lg: var(--space-10);
  --agent-mark-icon-md: var(--space-4);
  --agent-mark-icon-lg: var(--space-5);
  --agent-mark-radius: var(--radius-md);
  --agent-highlight-duration: calc(var(--duration-overlay) * 32);
  --button-radius: var(--radius-lg);
  --button-pad-x: var(--space-3-5); /** Recipe horizontal padding · 14. */
  --button-pad-x-sm: var(--space-2-5); /** Small (32, Figma size lg 314:10011) · 10. */
  --button-pad-x-lg: var(--space-3-5); /** DEPRECATED alias of pad-x. */
  --button-pad-x-xl: var(--space-3-5); /** DEPRECATED alias of pad-x. */
  --button-gap: var(--space-1-5); /** Icon↔label box gap · 6 (Figma size xxl 314:8931, spacing/1-5). The label box adds 2 each side, so icon to text reads 8. */
  --button-gap-sm: var(--space-1); /** Small and xs (32 / 28, Figma lg / md) · 4. */
  --button-label-pad-x: var(--space-0-5); /** The label box's inline padding · 2 (Figma 'text' frame, tw-spacing/0-5), every size. */
  --button-gap-xl: var(--space-2); /** DEPRECATED alias of gap. */
  --button-font-size: var(--font-size-14); /** label-base · 14. */
  --button-font-size-sm: var(--font-size-14); /** Small (32, Figma lg) is Labels/Base/Medium · 14. The 28 px xs size takes label-sm · 13. */
  --button-font-size-xl: var(--font-size-14); /** DEPRECATED alias of font-size. */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-5);
  --card-shadow: var(--shadow-card);
  --input-radius: var(--radius-lg);
  --input-pad-x: var(--space-3);
  --input-ring: var(--shadow-ring);
  --badge-radius: var(--radius-full);
  --amount-font: var(--font-family-mono);
  --amount-weight: var(--font-weight-semibold);
  --drawer-shadow: var(--shadow-flyout);
  --motion-quick: var(--duration-micro); /** Press and hover feedback; small things appearing or leaving. */
  --motion-quick-ease: var(--ease-smooth);
  --motion-standard: var(--duration-normal); /** The cross-fade: skeleton → content, a value changing, a panel swap, tooltips and menus appearing. What travel falls back to under reduced motion. */
  --motion-standard-ease: var(--ease-in-out);
  --motion-settle: var(--duration-slow); /** Anything that moves to a new place: a tab underline, the sidebar's active pill, a check mark, a row arriving, a bar growing; also the create form's split (the recorded layout exception). */
  --motion-settle-ease: var(--ease-smooth);
  --motion-pop: var(--duration-fast); /** A count badge or dot appearing. The one overshoot. */
  --motion-pop-ease: var(--ease-spring);
  --motion-overlay: var(--duration-overlay); /** Modal and dialog: scrim fade, panel fade + scale (scale through motion.scale). */
  --motion-overlay-ease: var(--ease-out);
  --motion-sheet: var(--duration-sheet); /** Drawer and sheet travel from the edge, including the mobile nav drawer. */
  --motion-sheet-ease: var(--ease-sheet);
  --motion-reveal: var(--duration-slow); /** The line chart's left-to-right wipe. Nothing else. (Before 2026-10-29 this aliased duration.overlay and the Assistant used it for message entrances, which are now motion.standard.) */
  --motion-reveal-ease: var(--ease-out);
  --motion-pulse: var(--duration-pulse); /** Skeleton, the shell's indeterminate bar, the Assistant's thinking dots — a loop that means 'not arrived yet', and nothing else. */
  --motion-pulse-ease: var(--ease-in-out);
  --motion-spin: var(--duration-spin); /** A busy spinner's revolution. */
  --toast-bg: var(--color-green-400); /** Snackbar fill. A step lighter than the green-500 an earlier sweep sampled off customers-customers-4; carried here so the pill owns its colour instead of borrowing --accent-disabled-fg, whose name describes a disabled foreground, not a surface. */
  --type-h1: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans);
  --type-h2: var(--font-weight-semibold) var(--font-size-24)/30px var(--font-family-sans);
  --type-h3: var(--font-weight-semibold) var(--font-size-20)/28px var(--font-family-sans);
  --type-h4: var(--font-weight-semibold) var(--font-size-18)/24px var(--font-family-sans);
  --type-h5: var(--font-weight-semibold) var(--font-size-16)/24px var(--font-family-sans);
  --type-h6: var(--font-weight-semibold) var(--font-size-14)/20px var(--font-family-sans);
  --type-label-lg: var(--font-weight-medium) var(--font-size-18)/24px var(--font-family-sans);
  --type-label-md: var(--font-weight-medium) var(--font-size-16)/20px var(--font-family-sans);
  --type-label-base: var(--font-weight-medium) var(--font-size-14)/16px var(--font-family-sans);
  --type-label-sm: var(--font-weight-medium) var(--font-size-13)/16px var(--font-family-sans);
  --type-label-xs: var(--font-weight-medium) var(--font-size-12)/16px var(--font-family-sans);
  --type-body-lg: var(--font-weight-regular) var(--font-size-18)/1.5 var(--font-family-sans);
  --type-body-md: var(--font-weight-regular) var(--font-size-16)/1.5 var(--font-family-sans);
  --type-body-base: var(--font-weight-regular) var(--font-size-14)/1.5 var(--font-family-sans);
  --type-body-sm: var(--font-weight-regular) var(--font-size-13)/1.5 var(--font-family-sans);
  --type-body-xs: var(--font-weight-regular) var(--font-size-12)/1.5 var(--font-family-sans);
  --type-body-tiny: var(--font-weight-regular) var(--font-size-11)/1.5 var(--font-family-sans);
  --type-mono-md: var(--font-weight-regular) var(--font-size-16)/24px var(--font-family-mono);
  --type-mono-base: var(--font-weight-regular) var(--font-size-14)/20px var(--font-family-mono);
  --type-display: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans); /** DEPRECATED → h1. */
  --type-title: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans); /** DEPRECATED → h1. */
  --type-heading: var(--font-weight-semibold) var(--font-size-24)/30px var(--font-family-sans); /** DEPRECATED → h2. */
  --type-card-title: var(--font-weight-semibold) var(--font-size-18)/24px var(--font-family-sans); /** DEPRECATED → h4. */
  --type-strong: var(--font-weight-semibold) var(--font-size-16)/24px var(--font-family-sans); /** DEPRECATED → h5. */
  --type-ui: var(--font-weight-medium) var(--font-size-14)/16px var(--font-family-sans); /** DEPRECATED → label-base. */
  --type-body: var(--font-weight-regular) var(--font-size-14)/1.5 var(--font-family-sans); /** DEPRECATED → body-base (was 15px). */
  --type-caption: var(--font-weight-regular) var(--font-size-12)/1.5 var(--font-family-sans); /** DEPRECATED → body-xs. */
  --type-mono-label: var(--font-weight-medium) var(--font-size-12)/1 var(--font-family-mono); /** Uppercase mono eyebrow — pair with 0.05em. */
  --bg-default: var(--bg-page-body);
  --bg-card: var(--bg-surface-base);
  --bg-inset: var(--bg-surface-subtle);
  --bg-sidebar-hover: var(--bg-sidebar-hovered);
  --bg-raised: var(--bg-surface-raised);
  --bg-panel-tint: var(--color-gray-150);
  --bg-overlay: var(--bg-surface-overlay);
  --bg-inverse: var(--bg-surface-inverse);
  --bg-tooltip: var(--color-gray-850);
  --border-default: var(--border-surface-default);
  --border-subtle: var(--border-surface-subtle);
  --border-strong: var(--border-surface-strong);
  --status-ok-fg: var(--status-badge-success-text);
  --status-ok-bg: var(--status-badge-success-bg);
  --status-warn-fg: var(--status-badge-warning-text);
  --status-warn-bg: var(--status-badge-warning-bg);
  --status-purple-fg: var(--color-violet-900);
  --status-purple-bg: var(--color-violet-100);
  --status-purple-dot: var(--color-violet-500);
  --status-gray-fg: var(--color-gray-600);
  --status-gray-bg: var(--color-gray-100);
  --status-gray-dot: var(--color-gray-500);
  --fg-2: var(--content-fg-default);
  --fg-default: var(--content-fg-strong);
  --fg-strong: var(--content-fg-strong);
  --fg-subtle: var(--content-fg-subtle);
  --fg-error: var(--content-vibrant-error-default);
  --fg-placeholder: var(--content-fg-placeholder);
  --fg-disabled: var(--content-fg-disabled);
  --fg-on-color: var(--content-fg-on-color);
  --fg-on-color-secondary: var(--content-fg-on-color-secondary);
  --fg-on-primary: var(--content-fg-on-primary);
  --fg-inverse: var(--color-gray-0);
  --primary-bg: var(--bg-button-primary-default);
  --primary-hover: var(--bg-button-primary-hover);
  --primary-pressed: var(--bg-button-primary-pressed);
  --primary-disabled: var(--bg-button-primary-disabled);
  --primary-fg: var(--content-fg-on-primary);
  --accent-bg: var(--bg-button-accent-default);
  --accent-hover: var(--bg-button-accent-hover);
  --accent-pressed: var(--bg-button-accent-pressed);
  --accent-disabled: var(--bg-button-accent-disabled);
  --accent-fg: var(--content-fg-on-color);
  --btn-outline-bg: var(--bg-button-outline-default);
  --btn-outline-hover: var(--bg-button-outline-hover);
  --btn-outline-pressed: var(--bg-button-outline-pressed);
  --btn-secondary-bg: var(--bg-button-secondary-default);
  --btn-secondary-hover: var(--bg-button-secondary-hover);
  --btn-secondary-pressed: var(--bg-button-secondary-pressed);
  --btn-ghost-hover: var(--bg-button-ghost-hover);
  --btn-ghost-pressed: var(--bg-button-ghost-pressed);
  --btn-danger-bg: var(--bg-button-destructive-default);
  --btn-danger-hover: var(--bg-button-destructive-hover);
  --btn-danger-pressed: var(--bg-button-destructive-pressed);
  --btn-danger-disabled: var(--bg-button-destructive-disabled);
  --btn-disabled-bg: var(--bg-button-primary-disabled);
  --btn-disabled-fg: var(--color-gray-400);
  --btn-accent-bg: var(--bg-button-accent-default);
  --btn-accent-hover: var(--bg-button-accent-hover);
  --btn-accent-pressed: var(--bg-button-accent-pressed);
  --btn-ink-border: var(--border-primary-default);
  --btn-surface-border: var(--border-interactive-default);
  --chip-pressed-bg: var(--color-gray-300);
  --chart-fill: var(--chart-series);
  --tooltip-fg: var(--color-gray-0);
  --agent-mark-bg: var(--accent-subtle);
  --agent-mark-fg: var(--accent-text);
  --input-bg: var(--bg-interactive-default);
  --input-border: var(--border-interactive-default);
  --input-focus-border: var(--border-accent-default); /** Focused field rim — the accent green, not the neutral interactive-focus rim. */
  --input-focus-ring: 0 0 0 2px var(--halo-accent); /** 2px halo behind a focused field. Solid tint, unlike the global --focus-ring (green at 40%), which the rest of the UI keeps. */
  --input-error-border: var(--border-destructive-default); /** Rejected field rim — same red.500 ink as the --fg-error message under it. */
  --input-error-ring: 0 0 0 2px var(--halo-danger); /** 2px halo behind a rejected field. The red counterpart to input.focus-ring; it outranks the focus halo so an invalid field stays red while being corrected. */
  --sidebar-bg: var(--bg-sidebar-surface);
  --btn-ink-hi: var(--primary-bg);
  --btn-accent-hi: var(--accent-bg);
  --btn-accent-border: var(--accent-hover);
  --btn-surface-hi: var(--btn-outline-bg);
  --btn-surface: var(--btn-outline-bg);
  --btn-danger-hi: var(--btn-danger-bg);
  --btn-danger: var(--btn-danger-bg);
  --chip-pressed-border: var(--border-subtle);
  --agent-highlight-stops: var(--border-subtle) 0%, var(--accent-subtle) 20%, var(--accent-bg) 32%, var(--accent-subtle) 44%, var(--border-subtle) 64%, var(--border-subtle) 100%;
  --button-primary-bg: var(--primary-bg);
  --button-primary-fg: var(--primary-fg);
  --button-primary-hover: var(--primary-hover);
  --button-accent-bg: var(--accent-bg);
  --button-accent-fg: var(--accent-fg);
  --button-accent-hover: var(--accent-hover);
  --button-secondary-bg: var(--btn-secondary-bg);
  --button-secondary-fg: var(--fg-default);
  --button-secondary-hover: var(--btn-secondary-hover);
  --card-bg: var(--bg-card);
}

/* VENDORED — generated by @fluveo/tokens (Style Dictionary). DO NOT EDIT.
   Synced from packages/tokens/dist/tokens.dark.css via: pnpm --filter @fluveo/dashboard sync:tokens
   Committed on purpose so the standalone Docker build (which only copies this
   service dir) can consume the design tokens without the workspace present. */
/**
 * Do not edit directly, this file was auto-generated.
 */

[data-theme="dark"] {
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fbfbf9;
  --color-neutral-100: #f9f9f7;
  --color-neutral-150: #f2f2ee;
  --color-neutral-200: #f4f2eb;
  --color-neutral-300: #ede9de;
  --color-neutral-400: #d6d3d1;
  --color-neutral-500: #a6a09b;
  --color-neutral-600: #79716b;
  --color-neutral-700: #57534d;
  --color-neutral-800: #29261e;
  --color-neutral-850: #23211a;
  --color-neutral-900: #1c1917;
  --color-neutral-950: #0c0a09;
  --color-neutral-1000: #000000;
  --color-blue-50: #e6eef9;
  --color-blue-75: #dcebff; /** Focus-halo tint. Brighter and more chromatic than 50/100 — it exists to read as a glow behind a control, not as a surface fill. */
  --color-blue-100: #d7e4f6;
  --color-blue-200: #c9daf3;
  --color-blue-300: #8bafe4;
  --color-blue-400: #6494db;
  --color-blue-500: #3c79d2;
  --color-blue-600: #2961b2;
  --color-blue-700: #224f91;
  --color-blue-800: #1e457f;
  --color-blue-900: #193b6c;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c6d2ff;
  --color-indigo-300: #a3b3ff;
  --color-indigo-400: #7c86ff;
  --color-indigo-500: #615fff;
  --color-indigo-600: #4f39f6;
  --color-indigo-700: #432dd7;
  --color-indigo-800: #372aac;
  --color-indigo-900: #312c85;
  --color-indigo-950: #1e1a4d;
  --color-green-50: #eafbf3;
  --color-green-100: #d0fae5;
  --color-green-200: #8dd9bc;
  --color-green-400: #45a16b;
  --color-green-500: #009966;
  --color-green-600: #008049;
  --color-green-700: #007a55;
  --color-green-750: #007041;
  --color-green-800: #006138;
  --color-green-900: #1f4730;
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd4;
  --color-orange-200: #f6dfd5;
  --color-orange-300: #e5b49e;
  --color-orange-400: #d58868;
  --color-orange-500: #c45d31;
  --color-orange-600: #c74919;
  --color-orange-700: #ca3500;
  --color-orange-800: #91320f;
  --color-orange-900: #582f1d;
  --color-red-50: #fff1f2;
  --color-red-75: #ffe4e0; /** Danger-halo tint, the red counterpart to blue.75. Close to but NOT rose.100 (#ffe4e6) — that one is the FAILED pill fill and belongs to the other ramp. */
  --color-red-100: #f7d7d4;
  --color-red-200: #f6bbb6;
  --color-red-300: #de8d87;
  --color-red-400: #d56e67;
  --color-red-500: #cd5047;
  --color-red-600: #c03f34;
  --color-red-700: #983229;
  --color-red-800: #74261f;
  --color-red-900: #501b16;
  --color-black-alpha-0: rgba(0, 0, 0, 0);
  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
  --color-black-alpha-6: rgba(0, 0, 0, 0.06);
  --color-black-alpha-7: rgba(0, 0, 0, 0.07);
  --color-black-alpha-8: rgba(0, 0, 0, 0.08);
  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
  --color-black-alpha-12: rgba(0, 0, 0, 0.12);
  --color-black-alpha-16: rgba(0, 0, 0, 0.16);
  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
  --color-black-alpha-48: rgba(0, 0, 0, 0.48);
  --color-black-alpha-100: #000000;
  --color-white-alpha-0: rgba(255, 255, 255, 0);
  --color-white-alpha-5: rgba(255, 255, 255, 0.05);
  --color-white-alpha-6: rgba(255, 255, 255, 0.06);
  --color-white-alpha-7: rgba(255, 255, 255, 0.07);
  --color-white-alpha-8: rgba(255, 255, 255, 0.08);
  --color-white-alpha-10: rgba(255, 255, 255, 0.1);
  --color-white-alpha-12: rgba(255, 255, 255, 0.12);
  --color-white-alpha-16: rgba(255, 255, 255, 0.16);
  --color-white-alpha-20: rgba(255, 255, 255, 0.2);
  --color-white-alpha-48: rgba(255, 255, 255, 0.48);
  --color-white-alpha-72: rgba(255, 255, 255, 0.72);
  --color-white-alpha-100: #ffffff;
  --color-gray-125: #f5f5f4; /** The one NEUTRAL step in this warm ramp — the balance rail's empty track (balances-empty@1x.png) is drawn #f5f5f4, with none of the ramp's yellow. Kept as its own step rather than warmed to fit, because the track reads as a cast against the card it sits on. */
  --color-gray-550: #938b84; /** Readable muted ink on dark surfaces, between gray.500 and gray.600. */
  --color-gray-650: #6b645e; /** Readable faint ink on light surfaces, including the selected sidebar. */
  --color-gray-675: #625c55; /** Readable secondary ink between gray.650 and body gray.700. */
  --color-gray-725: #525252; /** Neutral twin of 700 — same lightness, none of the ramp's yellow. Figma sets the inset panel titles in a dialog at this value; warming it to 700 tints them against the neutral body text beside them. The ramp's other neutral step is 125. */
  --color-gray-750: #3e3e3c;
  --color-sky-50: #f0f9ff;
  --color-rose-100: #ffe4e6;
  --color-rose-700: #c70036;
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-56: 56px;
  --font-tracking-tight-56: -3px;
  --font-tracking-tight-40: -1.8px;
  --font-tracking-tight-26: -1px;
  --font-tracking-tight-24: -0.7px;
  --font-tracking-tight-20: -0.4px;
  --font-tracking-tight-16: -0.32px;
  --font-tracking-normal: 0;
  --font-tracking-label: 0.05em;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-0-5: 2px;
  --space-1-5: 6px;
  --space-2-5: 10px;
  --space-3-5: 14px;
  --space-4-5: 18px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-6xl: 32px;
  --radius-full: 9999px;
  --bg-tooltip: oklch(0.3255 0.0075 95);
  --avatar-ring-pink: #fcdcec;
  --avatar-ring-teal: #d7f4f6;
  --avatar-ring-purple: #e2ddfd;
  --avatar-ring-orange: #ffead3;
  --shadow-1: 0 1px 2px 0 rgba(255,255,255,0.06);
  --shadow-2: 0 1px 2px -1px rgba(255,255,255,0.10), 0 1px 3px 0 rgba(255,255,255,0.10);
  --shadow-3: 0 2px 4px -2px rgba(255,255,255,0.10), 0 4px 6px -1px rgba(255,255,255,0.10);
  --shadow-4: 0 4px 6px -4px rgba(255,255,255,0.10), 0 10px 15px -3px rgba(255,255,255,0.10);
  --shadow-5: 0 8px 10px -6px rgba(255,255,255,0.16), 0 20px 25px -5px rgba(255,255,255,0.12);
  --shadow-border-1: 0 1px 2px 0 rgba(255,255,255,0.06), 0 0 1px 0 rgba(255,255,255,0.20);
  --shadow-border-2: 0 1px 2px -1px rgba(255,255,255,0.06), 0 1px 3px 0 rgba(255,255,255,0.06), 0 0 1px 0 rgba(255,255,255,0.20);
  --shadow-ring: 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-ring-strong: 0 0 0 1px rgba(255,255,255,0.12);
  --shadow-card: 0 1px 2px 0 rgba(255,255,255,0.06), 0 0 1px 0 rgba(255,255,255,0.20);
  --shadow-card-hover: 0 1px 2px -1px rgba(255,255,255,0.06), 0 1px 3px 0 rgba(255,255,255,0.06), 0 0 1px 0 rgba(255,255,255,0.20);
  --shadow-flyout: 0 4px 6px -4px rgba(255,255,255,0.10), 0 10px 15px -3px rgba(255,255,255,0.10), 0 0 1px 0 rgba(255,255,255,0.20);
  --shadow-btn: 0 1px 2px 0 rgba(255,255,255,0.06);
  --shadow-btn-ink: 0 1px 2px 0 rgba(255,255,255,0.06);
  --shadow-btn-accent: 0 1px 2px 0 rgba(255,255,255,0.06);
  --shadow-btn-danger: 0 1px 2px 0 rgba(255,255,255,0.06);
  --chart-series: oklch(0.6901 0.158 159.26);
  --chart-series-wash: oklch(0.6901 0.158 159.26 / 0.12);
  --chart-compare: oklch(0.5594 0.0149 71.2);
  --chart-grid: oklch(0.3018 0.0091 67.48);
  --tooltip-fg: oklch(0.9605 0.002 95);
  --tooltip-fg-muted: oklch(0.7302 0.0098 82);
  --tooltip-positive: oklch(0.8005 0.1305 161);
  --tooltip-negative: oklch(0.7304 0.1401 27.13);
  --agent-highlight-border-width: 1px;
  --button-height: 40px; /** Recipe default · 40. */
  --button-height-sm: 32px; /** Small · 32 (dense toolbars/tables). */
  --button-height-lg: 40px; /** DEPRECATED alias of height. */
  --button-height-xl: 40px; /** DEPRECATED alias of height. */
  --button-icon: 16px; /** Icon · 16 at 40 and 32 (Figma xxl / lg); 14 at 28 (Figma md). */
  --button-icon-sm: 16px; /** Small (32, Figma lg) · 16. Was 15, drawn nowhere. */
  --button-icon-lg: 18px;
  --input-height: 40px;
  --amount-tracking: -0.01em;
  --drawer-width: clamp(560px, 50vw, 960px);
  --drawer-sheet-width: 400px; /** The flat record sheet beside a list (Transactions 115:7612, sheet 149:12420): 400 wide, flush right, no shadow. */
  --preview-width: 320px;
  --sidebar-width: 220px;
  --modal-art-height: 240px; /** The art band of an art-topped dialog (Modal `art`): Figma welcome sheet 339:6531, 480 × 240. */
  --modal-art-card-height: 220px; /** The art band of the card art layout (Modal artLayout="card"): Figma setup Details submitted 343:11694, 480 × 220. */
  --scrim-blur: 12px;
  --topbar-height: 60px;
  --focus-ring: 0 0 0 2px rgba(0,153,102,0.40); /** Applied on :focus-visible — 2px accent ring at 40% (green-500). */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); /** Default: hover, state. */
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1); /** Entrances. */
  --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1); /** Badges, pops. */
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1); /** Symmetric on-screen. */
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /** Drawers, sheets. */
  --duration-micro: 120ms; /** Press, hover, icon swap. */
  --duration-fast: 180ms; /** Tooltip, dropdown, popover. */
  --duration-normal: 200ms; /** Select, menu. */
  --duration-overlay: 250ms; /** Modal, dialog. */
  --duration-slow: 280ms; /** Entrances, reveals. */
  --duration-sheet: 500ms; /** Drag-continuous surfaces. */
  --duration-pulse: 1200ms; /** One period of the skeleton pulse and of the shell's indeterminate bar — the only permitted loops besides a spinner. */
  --duration-spin: 800ms; /** One revolution of a busy spinner. */
  --motion-spin-ease: linear;
  --motion-travel: 1; /** Multiplier for entrance travel (an 8px rise is calc(8px * var(--motion-travel))). 0 under reduced motion. */
  --motion-scale: 1; /** Multiplier for press and overlay scale (a 0.96 start is calc(1 - 0.04 * var(--motion-scale))). 0 under reduced motion. */
  --type-h1-tracking: -0.2px;
  --type-h2-tracking: -0.2px;
  --type-h3-tracking: -0.15px;
  --type-h4-tracking: -0.15px;
  --type-h5-tracking: -0.15px;
  --type-h6-tracking: -0.15px;
  --type-label-lg-tracking: -0.2px;
  --type-label-md-tracking: -0.2px;
  --type-label-base-tracking: -0.15px;
  --type-label-sm-tracking: -0.1px;
  --type-label-xs-tracking: -0.1px;
  --type-body-lg-tracking: -0.15px;
  --type-body-md-tracking: -0.15px;
  --type-body-base-tracking: -0.15px;
  --type-body-sm-tracking: -0.1px;
  --type-body-xs-tracking: -0.1px;
  --type-body-tiny-tracking: 0px;
  --color-gray-0: var(--color-neutral-0);
  --color-gray-50: var(--color-neutral-50);
  --color-gray-100: var(--color-neutral-100);
  --color-gray-150: var(--color-neutral-150);
  --color-gray-200: var(--color-neutral-200);
  --color-gray-300: var(--color-neutral-300);
  --color-gray-400: var(--color-neutral-400);
  --color-gray-500: var(--color-neutral-500);
  --color-gray-600: var(--color-neutral-600);
  --color-gray-700: var(--color-neutral-700);
  --color-gray-800: var(--color-neutral-800);
  --color-gray-850: var(--color-neutral-850);
  --color-gray-900: var(--color-neutral-900);
  --color-gray-950: var(--color-neutral-950);
  --color-gray-1000: var(--color-neutral-1000);
  --color-violet-50: var(--color-indigo-50);
  --color-violet-100: var(--color-indigo-100);
  --color-violet-200: var(--color-indigo-200);
  --color-violet-300: var(--color-indigo-300);
  --color-violet-400: var(--color-indigo-400);
  --color-violet-500: var(--color-indigo-500);
  --color-violet-600: var(--color-indigo-600);
  --color-violet-700: var(--color-indigo-700);
  --color-violet-800: var(--color-indigo-800);
  --color-violet-900: var(--color-indigo-900);
  --color-violet-950: var(--color-indigo-950);
  --color-alpha-black-0: var(--color-black-alpha-0);
  --color-alpha-black-5: var(--color-black-alpha-5);
  --color-alpha-black-6: var(--color-black-alpha-6);
  --color-alpha-black-7: var(--color-black-alpha-7);
  --color-alpha-black-8: var(--color-black-alpha-8);
  --color-alpha-black-10: var(--color-black-alpha-10);
  --color-alpha-black-12: var(--color-black-alpha-12);
  --color-alpha-black-16: var(--color-black-alpha-16);
  --color-alpha-black-20: var(--color-black-alpha-20);
  --color-alpha-black-48: var(--color-black-alpha-48);
  --color-alpha-white-0: var(--color-white-alpha-0);
  --color-alpha-white-5: var(--color-white-alpha-5);
  --color-alpha-white-6: var(--color-white-alpha-6);
  --color-alpha-white-7: var(--color-white-alpha-7);
  --color-alpha-white-8: var(--color-white-alpha-8);
  --color-alpha-white-10: var(--color-white-alpha-10);
  --color-alpha-white-12: var(--color-white-alpha-12);
  --color-alpha-white-16: var(--color-white-alpha-16);
  --color-alpha-white-20: var(--color-white-alpha-20);
  --color-alpha-white-48: var(--color-white-alpha-48);
  --color-alpha-white-72: var(--color-white-alpha-72);
  --bg-page-body: var(--color-neutral-950);
  --bg-sidebar-surface: var(--color-neutral-1000);
  --bg-sidebar-hovered: var(--color-neutral-950);
  --bg-sidebar-selected: var(--color-white-alpha-0);
  --bg-surface-base: var(--color-neutral-1000);
  --bg-surface-subtle: var(--color-neutral-950);
  --bg-surface-raised: var(--color-neutral-900);
  --bg-surface-selected: var(--color-neutral-900);
  --bg-surface-overlay: var(--color-black-alpha-48);
  --bg-surface-inverse: var(--color-neutral-100);
  --bg-button-primary-default: var(--color-orange-500);
  --bg-button-primary-hover: var(--color-orange-400);
  --bg-button-primary-pressed: var(--color-orange-300);
  --bg-button-primary-focus: var(--color-orange-500);
  --bg-button-primary-disabled: var(--color-orange-900);
  --bg-button-accent-default: var(--color-green-500);
  --bg-button-accent-hover: var(--color-green-600);
  --bg-button-accent-pressed: var(--color-green-750);
  --bg-button-accent-focus: var(--color-green-500);
  --bg-button-accent-disabled: var(--color-green-900);
  --bg-button-destructive-default: var(--color-red-500);
  --bg-button-destructive-hover: var(--color-red-700);
  --bg-button-destructive-pressed: var(--color-red-800);
  --bg-button-destructive-focus: var(--color-red-500);
  --bg-button-destructive-disabled: var(--color-red-800);
  --bg-button-outline-default: var(--color-neutral-850);
  --bg-button-outline-hover: var(--color-neutral-900);
  --bg-button-outline-pressed: var(--color-neutral-800);
  --bg-button-outline-focus: var(--color-neutral-850);
  --bg-button-outline-disabled: var(--color-neutral-900);
  --bg-button-secondary-default: var(--color-neutral-900);
  --bg-button-secondary-hover: var(--color-neutral-800);
  --bg-button-secondary-pressed: var(--color-neutral-700);
  --bg-button-secondary-focus: var(--color-neutral-900);
  --bg-button-secondary-disabled: var(--color-neutral-900);
  --bg-button-ghost-default: var(--color-black-alpha-0);
  --bg-button-ghost-hover: var(--color-neutral-900);
  --bg-button-ghost-pressed: var(--color-neutral-800);
  --bg-button-ghost-focus: var(--color-neutral-850);
  --bg-button-ghost-disabled: var(--color-black-alpha-0);
  --bg-vibrant-info-base: var(--color-blue-500);
  --bg-vibrant-info-subtle: var(--color-blue-900);
  --bg-vibrant-warning-subtle: var(--color-orange-900);
  --bg-vibrant-warning-base: var(--color-orange-500);
  --bg-vibrant-success-subtle: var(--color-green-900);
  --bg-vibrant-success-base: var(--color-green-500);
  --bg-vibrant-error-subtle: var(--color-red-900);
  --bg-vibrant-error-base: var(--color-red-500);
  --bg-interactive-default: var(--color-neutral-950);
  --bg-interactive-hover: var(--color-neutral-900);
  --bg-interactive-focus: var(--color-neutral-950);
  --bg-interactive-disabled: var(--color-neutral-900);
  --border-surface-default: var(--color-white-alpha-8);
  --border-surface-subtle: var(--color-white-alpha-6);
  --border-surface-strong: var(--color-white-alpha-12);
  --border-interactive-default: var(--color-white-alpha-8);
  --border-interactive-hover: var(--color-white-alpha-12);
  --border-interactive-focus: var(--color-white-alpha-20);
  --border-interactive-disabled: var(--color-white-alpha-6);
  --border-primary-default: var(--color-black-alpha-10);
  --border-destructive-default: var(--color-red-500);
  --border-accent-default: var(--color-green-500);
  --content-fg-default: var(--color-neutral-400);
  --content-fg-subtle: var(--color-neutral-500);
  --content-fg-strong: var(--color-neutral-200);
  --content-fg-placeholder: var(--color-neutral-700);
  --content-fg-disabled: var(--color-neutral-800);
  --content-fg-on-color: var(--color-neutral-0);
  --content-fg-on-primary: var(--color-neutral-950);
  --content-fg-on-color-secondary: var(--color-white-alpha-72);
  --content-vibrant-info-default: var(--color-blue-300);
  --content-vibrant-info-strong: var(--color-blue-100);
  --content-vibrant-info-disabled: var(--color-blue-700);
  --content-vibrant-warning-default: var(--color-orange-300);
  --content-vibrant-warning-strong: var(--color-orange-100);
  --content-vibrant-success-subtle: var(--color-green-400);
  --content-vibrant-success-default: var(--color-green-200);
  --content-vibrant-success-strong: var(--color-green-100);
  --content-vibrant-error-default: var(--color-red-200);
  --content-vibrant-error-strong: var(--color-red-100);
  --content-vibrant-error-disabled: var(--color-red-700);
  --effect-1: var(--color-white-alpha-6);
  --effect-2: var(--color-white-alpha-10);
  --effect-3: var(--color-white-alpha-12);
  --effect-4: var(--color-white-alpha-16);
  --effect-5: var(--color-white-alpha-20);
  --effect-primary: var(--color-white-alpha-10);
  --effect-danger: var(--color-red-900);
  --effect-accent: var(--color-green-900);
  --status-badge-success-bg: var(--color-green-900);
  --status-badge-success-text: var(--color-green-200);
  --status-badge-warning-bg: var(--color-orange-900);
  --status-badge-warning-text: var(--color-orange-100);
  --status-badge-danger-bg: var(--color-red-900);
  --status-badge-danger-text: var(--color-red-200);
  --status-badge-info-bg: var(--color-blue-900);
  --status-badge-info-text: var(--color-blue-200);
  --status-ok-dot: var(--color-green-500);
  --status-ok-badge: var(--color-green-200);
  --status-warn-dot: var(--color-orange-500);
  --status-warn-surface: var(--color-orange-900);
  --status-info-dot: var(--color-blue-500);
  --status-info-surface: var(--color-blue-900);
  --status-bad-dot: var(--color-red-500);
  --status-bad-surface: var(--color-red-900);
  --fg-4: var(--color-gray-550);
  --halo-accent: var(--color-blue-900);
  --halo-danger: var(--color-red-900);
  --accent-text: var(--color-green-200); /** Text-safe accent for readable navigation labels on dark sidebar surfaces. */
  --accent-disabled-fg: var(--color-green-400);
  --accent-subtle: var(--color-green-900);
  --link: var(--color-green-200);
  --auth-link: var(--color-green-200); /** Tracks --link in dark rather than taking the light theme's green.400: that mid-green is the value that read off-palette on the dark auth card in the first place. */
  --focus: var(--color-green-500);
  --btn-danger-disabled-fg: var(--color-red-200);
  --btn-danger-border: var(--color-red-700);
  --chart-fill: var(--chart-series);
  --agent-mark-size-md: var(--space-8);
  --agent-mark-size-lg: var(--space-10);
  --agent-mark-icon-md: var(--space-4);
  --agent-mark-icon-lg: var(--space-5);
  --agent-mark-radius: var(--radius-md);
  --agent-highlight-duration: calc(var(--duration-overlay) * 32);
  --button-radius: var(--radius-lg);
  --button-pad-x: var(--space-3-5); /** Recipe horizontal padding · 14. */
  --button-pad-x-sm: var(--space-2-5); /** Small (32, Figma size lg 314:10011) · 10. */
  --button-pad-x-lg: var(--space-3-5); /** DEPRECATED alias of pad-x. */
  --button-pad-x-xl: var(--space-3-5); /** DEPRECATED alias of pad-x. */
  --button-gap: var(--space-1-5); /** Icon↔label box gap · 6 (Figma size xxl 314:8931, spacing/1-5). The label box adds 2 each side, so icon to text reads 8. */
  --button-gap-sm: var(--space-1); /** Small and xs (32 / 28, Figma lg / md) · 4. */
  --button-label-pad-x: var(--space-0-5); /** The label box's inline padding · 2 (Figma 'text' frame, tw-spacing/0-5), every size. */
  --button-gap-xl: var(--space-2); /** DEPRECATED alias of gap. */
  --button-font-size: var(--font-size-14); /** label-base · 14. */
  --button-font-size-sm: var(--font-size-14); /** Small (32, Figma lg) is Labels/Base/Medium · 14. The 28 px xs size takes label-sm · 13. */
  --button-font-size-xl: var(--font-size-14); /** DEPRECATED alias of font-size. */
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-5);
  --card-shadow: var(--shadow-card);
  --input-radius: var(--radius-lg);
  --input-pad-x: var(--space-3);
  --input-ring: var(--shadow-ring);
  --badge-radius: var(--radius-full);
  --amount-font: var(--font-family-mono);
  --amount-weight: var(--font-weight-semibold);
  --drawer-shadow: var(--shadow-flyout);
  --motion-quick: var(--duration-micro); /** Press and hover feedback; small things appearing or leaving. */
  --motion-quick-ease: var(--ease-smooth);
  --motion-standard: var(--duration-normal); /** The cross-fade: skeleton → content, a value changing, a panel swap, tooltips and menus appearing. What travel falls back to under reduced motion. */
  --motion-standard-ease: var(--ease-in-out);
  --motion-settle: var(--duration-slow); /** Anything that moves to a new place: a tab underline, the sidebar's active pill, a check mark, a row arriving, a bar growing; also the create form's split (the recorded layout exception). */
  --motion-settle-ease: var(--ease-smooth);
  --motion-pop: var(--duration-fast); /** A count badge or dot appearing. The one overshoot. */
  --motion-pop-ease: var(--ease-spring);
  --motion-overlay: var(--duration-overlay); /** Modal and dialog: scrim fade, panel fade + scale (scale through motion.scale). */
  --motion-overlay-ease: var(--ease-out);
  --motion-sheet: var(--duration-sheet); /** Drawer and sheet travel from the edge, including the mobile nav drawer. */
  --motion-sheet-ease: var(--ease-sheet);
  --motion-reveal: var(--duration-slow); /** The line chart's left-to-right wipe. Nothing else. (Before 2026-10-29 this aliased duration.overlay and the Assistant used it for message entrances, which are now motion.standard.) */
  --motion-reveal-ease: var(--ease-out);
  --motion-pulse: var(--duration-pulse); /** Skeleton, the shell's indeterminate bar, the Assistant's thinking dots — a loop that means 'not arrived yet', and nothing else. */
  --motion-pulse-ease: var(--ease-in-out);
  --motion-spin: var(--duration-spin); /** A busy spinner's revolution. */
  --toast-bg: var(--color-green-400); /** Snackbar fill. A step lighter than the green-500 an earlier sweep sampled off customers-customers-4; carried here so the pill owns its colour instead of borrowing --accent-disabled-fg, whose name describes a disabled foreground, not a surface. */
  --type-h1: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans);
  --type-h2: var(--font-weight-semibold) var(--font-size-24)/30px var(--font-family-sans);
  --type-h3: var(--font-weight-semibold) var(--font-size-20)/28px var(--font-family-sans);
  --type-h4: var(--font-weight-semibold) var(--font-size-18)/24px var(--font-family-sans);
  --type-h5: var(--font-weight-semibold) var(--font-size-16)/24px var(--font-family-sans);
  --type-h6: var(--font-weight-semibold) var(--font-size-14)/20px var(--font-family-sans);
  --type-label-lg: var(--font-weight-medium) var(--font-size-18)/24px var(--font-family-sans);
  --type-label-md: var(--font-weight-medium) var(--font-size-16)/20px var(--font-family-sans);
  --type-label-base: var(--font-weight-medium) var(--font-size-14)/16px var(--font-family-sans);
  --type-label-sm: var(--font-weight-medium) var(--font-size-13)/16px var(--font-family-sans);
  --type-label-xs: var(--font-weight-medium) var(--font-size-12)/16px var(--font-family-sans);
  --type-body-lg: var(--font-weight-regular) var(--font-size-18)/1.5 var(--font-family-sans);
  --type-body-md: var(--font-weight-regular) var(--font-size-16)/1.5 var(--font-family-sans);
  --type-body-base: var(--font-weight-regular) var(--font-size-14)/1.5 var(--font-family-sans);
  --type-body-sm: var(--font-weight-regular) var(--font-size-13)/1.5 var(--font-family-sans);
  --type-body-xs: var(--font-weight-regular) var(--font-size-12)/1.5 var(--font-family-sans);
  --type-body-tiny: var(--font-weight-regular) var(--font-size-11)/1.5 var(--font-family-sans);
  --type-mono-md: var(--font-weight-regular) var(--font-size-16)/24px var(--font-family-mono);
  --type-mono-base: var(--font-weight-regular) var(--font-size-14)/20px var(--font-family-mono);
  --type-display: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans); /** DEPRECATED → h1. */
  --type-title: var(--font-weight-semibold) var(--font-size-28)/32px var(--font-family-sans); /** DEPRECATED → h1. */
  --type-heading: var(--font-weight-semibold) var(--font-size-24)/30px var(--font-family-sans); /** DEPRECATED → h2. */
  --type-card-title: var(--font-weight-semibold) var(--font-size-18)/24px var(--font-family-sans); /** DEPRECATED → h4. */
  --type-strong: var(--font-weight-semibold) var(--font-size-16)/24px var(--font-family-sans); /** DEPRECATED → h5. */
  --type-ui: var(--font-weight-medium) var(--font-size-14)/16px var(--font-family-sans); /** DEPRECATED → label-base. */
  --type-body: var(--font-weight-regular) var(--font-size-14)/1.5 var(--font-family-sans); /** DEPRECATED → body-base (was 15px). */
  --type-caption: var(--font-weight-regular) var(--font-size-12)/1.5 var(--font-family-sans); /** DEPRECATED → body-xs. */
  --type-mono-label: var(--font-weight-medium) var(--font-size-12)/1 var(--font-family-mono); /** Uppercase mono eyebrow — pair with 0.05em. */
  --bg-default: var(--bg-page-body);
  --bg-card: var(--bg-surface-base);
  --bg-inset: var(--bg-surface-subtle);
  --bg-track: var(--color-gray-900); /** Dark keeps the groove readable by going UP from the near-black inset, not down: gray.125 would flare on this ground. */
  --bg-sidebar-hover: var(--bg-sidebar-hovered);
  --bg-raised: var(--bg-surface-raised);
  --bg-panel-tint: var(--color-gray-900);
  --bg-overlay: var(--bg-surface-overlay);
  --bg-inverse: var(--bg-surface-inverse);
  --border-default: var(--border-surface-default);
  --border-subtle: var(--border-surface-subtle);
  --border-strong: var(--border-surface-strong);
  --status-ok-fg: var(--status-badge-success-text);
  --status-ok-bg: var(--status-badge-success-bg);
  --status-warn-fg: var(--status-badge-warning-text);
  --status-warn-bg: var(--status-badge-warning-bg);
  --status-info-fg: var(--status-badge-info-text);
  --status-info-bg: var(--status-badge-info-bg);
  --status-bad-fg: var(--status-badge-danger-text);
  --status-bad-bg: var(--status-badge-danger-bg);
  --status-purple-fg: var(--color-violet-200);
  --status-purple-bg: var(--color-violet-900);
  --status-purple-dot: var(--color-violet-500);
  --status-gray-fg: var(--color-gray-400);
  --status-gray-bg: var(--color-gray-900);
  --status-gray-dot: var(--color-gray-500);
  --fg-2: var(--content-fg-default);
  --fg-3: var(--color-gray-500);
  --fg-default: var(--content-fg-strong);
  --fg-strong: var(--content-fg-strong);
  --fg-subtle: var(--content-fg-subtle);
  --fg-brand: var(--color-gray-200);
  --fg-panel-title: var(--color-gray-300); /** Dark mirrors the light relationship — one step under the body ink rather than the light theme's literal value, which would vanish into the panel. */
  --fg-error: var(--content-vibrant-error-default);
  --fg-placeholder: var(--content-fg-placeholder);
  --fg-disabled: var(--content-fg-disabled);
  --fg-on-color: var(--content-fg-on-color);
  --fg-on-color-secondary: var(--content-fg-on-color-secondary);
  --fg-on-primary: var(--content-fg-on-primary);
  --fg-inverse: var(--color-gray-900);
  --primary-bg: var(--bg-button-primary-default);
  --primary-hover: var(--bg-button-primary-hover);
  --primary-pressed: var(--bg-button-primary-pressed);
  --primary-disabled: var(--bg-button-primary-disabled);
  --primary-fg: var(--content-fg-on-primary);
  --accent-bg: var(--bg-button-accent-default);
  --accent-hover: var(--bg-button-accent-hover);
  --accent-pressed: var(--bg-button-accent-pressed);
  --accent-disabled: var(--bg-button-accent-disabled);
  --accent-fg: var(--content-fg-on-color);
  --btn-outline-bg: var(--bg-button-outline-default);
  --btn-outline-hover: var(--bg-button-outline-hover);
  --btn-outline-pressed: var(--bg-button-outline-pressed);
  --btn-secondary-bg: var(--bg-button-secondary-default);
  --btn-secondary-hover: var(--bg-button-secondary-hover);
  --btn-secondary-pressed: var(--bg-button-secondary-pressed);
  --btn-ghost-hover: var(--bg-button-ghost-hover);
  --btn-ghost-pressed: var(--bg-button-ghost-pressed);
  --btn-danger-bg: var(--bg-button-destructive-default);
  --btn-danger-hover: var(--bg-button-destructive-hover);
  --btn-danger-pressed: var(--bg-button-destructive-pressed);
  --btn-danger-disabled: var(--bg-button-destructive-disabled);
  --btn-disabled-bg: var(--bg-button-primary-disabled);
  --btn-disabled-fg: var(--color-gray-600);
  --btn-accent-bg: var(--bg-button-accent-default);
  --btn-accent-hover: var(--bg-button-accent-hover);
  --btn-accent-pressed: var(--bg-button-accent-pressed);
  --btn-ink-border: var(--border-primary-default);
  --btn-surface-border: var(--border-interactive-default);
  --chip-pressed-bg: var(--color-gray-700);
  --agent-mark-bg: var(--accent-subtle);
  --agent-mark-fg: var(--accent-text);
  --input-bg: var(--bg-interactive-default);
  --input-border: var(--border-interactive-default);
  --input-focus-border: var(--border-accent-default); /** Focused field rim — the accent green, not the neutral interactive-focus rim. */
  --input-focus-ring: 0 0 0 2px var(--halo-accent); /** 2px halo behind a focused field. Solid tint, unlike the global --focus-ring (green at 40%), which the rest of the UI keeps. */
  --input-error-border: var(--border-destructive-default); /** Rejected field rim — same red.500 ink as the --fg-error message under it. */
  --input-error-ring: 0 0 0 2px var(--halo-danger); /** 2px halo behind a rejected field. The red counterpart to input.focus-ring; it outranks the focus halo so an invalid field stays red while being corrected. */
  --sidebar-bg: var(--bg-sidebar-surface);
  --btn-ink-hi: var(--primary-bg);
  --btn-accent-hi: var(--accent-bg);
  --btn-accent-border: var(--accent-hover);
  --btn-surface-hi: var(--btn-outline-bg);
  --btn-surface: var(--btn-outline-bg);
  --btn-danger-hi: var(--btn-danger-bg);
  --btn-danger: var(--btn-danger-bg);
  --chip-pressed-border: var(--border-strong);
  --agent-highlight-stops: var(--border-subtle) 0%, var(--accent-subtle) 20%, var(--accent-bg) 32%, var(--accent-subtle) 44%, var(--border-subtle) 64%, var(--border-subtle) 100%;
  --button-primary-bg: var(--primary-bg);
  --button-primary-fg: var(--primary-fg);
  --button-primary-hover: var(--primary-hover);
  --button-accent-bg: var(--accent-bg);
  --button-accent-fg: var(--accent-fg);
  --button-accent-hover: var(--accent-hover);
  --button-secondary-bg: var(--btn-secondary-bg);
  --button-secondary-fg: var(--fg-default);
  --button-secondary-hover: var(--btn-secondary-hover);
  --card-bg: var(--bg-card);
}

/* Fluveo docs. The dashboard's tokens (tokens.css, tokens.dark.css, vendored from services/fluveo-dashboard/app)
   come before this file in the one stylesheet; every colour, radius and shadow here is one of them. The theme is
   html[data-theme], the same attribute the dashboard uses, so tokens.dark.css applies as is. */
@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: var(--font-family-sans);
  --mono: var(--font-family-mono);
  --accent: var(--accent-bg);
  --tab-fg: var(--fg-3);
  --tab-on: var(--fg-default);
  --measure: 760px;
  color-scheme: light;
}
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar-height) + var(--space-4)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sidebar-bg);
  color: var(--fg-2);
  font: var(--font-weight-regular) var(--font-size-15)/1.7 var(--font);
  letter-spacing: var(--type-body-base-tracking);
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
code, kbd, pre { font-family: var(--mono); }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--space-4); padding-inline: var(--space-1);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--fg-3);
  font: var(--font-weight-medium) var(--font-size-11)/var(--space-4) var(--mono);
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--space-3); top: var(--space-3); z-index: 50; padding: var(--space-1-5) var(--space-2-5); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-flyout); }

/* Buttons: the dashboard's .btn recipe (outline by default, sm size). */
.search-open, .ai-menu summary, .theme-toggle, .dash-link, .copy, .fields-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap-sm);
  height: var(--button-height-sm); padding: 0 var(--button-pad-x-sm);
  border: 1px solid var(--border-subtle); border-radius: var(--button-radius);
  background: var(--btn-outline-bg); color: var(--fg-2);
  font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--motion-quick) var(--motion-quick-ease), border-color var(--motion-quick) var(--motion-quick-ease), color var(--motion-quick) var(--motion-quick-ease);
}
.search-open:hover, .ai-menu summary:hover, .copy:hover { background: var(--btn-outline-hover); color: var(--fg-default); }
.ai-menu[open] summary { background: var(--btn-outline-pressed); }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--topbar-height); padding: 0 var(--space-5) 0 var(--space-4);
  background: var(--sidebar-bg);
}
.wordmark { display: flex; align-items: center; gap: var(--space-2); width: calc(var(--sidebar-width) - var(--space-4)); color: var(--fg-brand); text-decoration: none; flex: none; }
.wordmark-logo { display: block; height: 28px; width: auto; flex: none; }
.wordmark-docs { padding-left: var(--space-2); border-left: 1px solid var(--border-strong); font: var(--type-label-base); letter-spacing: var(--type-label-base-tracking); color: var(--fg-3); }
.search-open { justify-content: space-between; gap: var(--space-6); min-width: 280px; padding: 0 var(--space-1-5) 0 var(--space-3); border: 0; background: var(--bg-card); box-shadow: var(--shadow-ring); color: var(--fg-3); font: var(--type-body-sm); }
.search-open:hover { background: var(--bg-card); box-shadow: var(--shadow-ring-strong); color: var(--fg-2); }
.topbar-end { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.api-version { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); background: var(--status-gray-bg); color: var(--status-gray-fg); font: var(--font-weight-medium) var(--font-size-12)/1 var(--mono); }
.theme-toggle { border-color: transparent; background: transparent; }
.theme-toggle:hover { background: var(--btn-ghost-hover); color: var(--fg-default); }
.theme-icon { width: 14px; height: 14px; border-radius: var(--radius-full); border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
html[data-theme-pref="light"] .theme-icon { background: transparent; }
html[data-theme-pref="dark"] .theme-icon { background: currentColor; }
.dash-link { border-color: transparent; background: var(--btn-accent-bg); color: var(--accent-fg); box-shadow: var(--shadow-btn-accent); }
.dash-link:hover { background: var(--btn-accent-hover); }
.dash-link:active { background: var(--btn-accent-pressed); }
.nav-toggle { display: none; width: var(--button-height-sm); height: var(--button-height-sm); border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; }
.nav-toggle:hover { background: var(--btn-ghost-hover); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 16px; height: 1.5px; margin: auto; background: var(--fg-default); position: relative; content: ""; }
.nav-toggle span::before { position: absolute; top: -5px; }
.nav-toggle span::after { position: absolute; top: 5px; }

/* The dashboard's shell: the sidebar on the page background, the content on a plane with a hairline top and left. */
.layout { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 240px; min-height: calc(100vh - var(--topbar-height)); }
.sidebar { position: sticky; top: var(--topbar-height); height: calc(100vh - var(--topbar-height)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; padding: 0 var(--space-3) var(--space-10); }
.nav-section + .nav-section { margin-top: var(--space-6); }
.nav-title { margin: 0; padding: calc(var(--space-2) - 1px) var(--space-2-5); font: var(--type-body-xs); line-height: 16px; color: var(--fg-2); }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.sidebar a {
  display: block; min-height: 28px; padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-lg);
  font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking);
  color: var(--content-fg-default); text-decoration: none;
  transition: background var(--motion-quick) var(--motion-quick-ease), color var(--motion-quick) var(--motion-quick-ease);
}
.sidebar a:hover { background: var(--bg-sidebar-hover); color: var(--fg-default); }
.sidebar a[aria-current="page"] { color: var(--accent-text); }
.content, .aside { background: var(--bg-card); border-top: 1px solid var(--border-subtle); }
.content { min-width: 0; padding: var(--space-10) var(--space-12) var(--space-20); border-left: 1px solid var(--border-subtle); border-top-left-radius: var(--radius-md); overflow-wrap: anywhere; }
.aside { padding: var(--space-10) var(--space-5) 0 0; }
.toc { position: sticky; top: calc(var(--topbar-height) + var(--space-10)); font: var(--type-body-sm); letter-spacing: var(--type-body-sm-tracking); overflow-wrap: anywhere; }
.toc-title { margin: 0 0 var(--space-2); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--fg-default); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-subtle); }
.toc a { display: block; padding: var(--space-1) 0 var(--space-1) var(--space-3); margin-left: -1px; border-left: 1px solid transparent; color: var(--fg-3); text-decoration: none; line-height: 1.45; }
.toc a:hover { color: var(--fg-default); }
.toc .toc-l3 a { padding-left: var(--space-6); }
.toc a.is-active { color: var(--accent-text); border-left-color: var(--accent-bg); }

/* Page head */
.page-head { max-width: var(--measure); margin-bottom: var(--space-8); }
.eyebrow { display: flex; align-items: center; gap: var(--space-2-5); margin: 0 0 var(--space-3); font: var(--type-mono-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--accent-text); }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
h1 { margin: 0; font: var(--font-weight-semibold) var(--font-size-32)/40px var(--font); letter-spacing: var(--font-tracking-tight-24); color: var(--fg-default); }
.lede { margin: var(--space-3) 0 0; font: var(--type-body-lg); letter-spacing: var(--type-body-lg-tracking); color: var(--fg-3); }

/* "Use with AI" menu: an outline button and a flyout. */
.ai-menu { position: relative; flex: none; margin-top: var(--space-1); }
.ai-menu summary { list-style: none; }
.ai-menu summary::-webkit-details-marker { display: none; }
.ai-menu summary::after { content: "\25BE"; color: var(--fg-4); font-size: var(--font-size-11); }
.ai-menu-list { position: absolute; right: 0; top: calc(100% + var(--space-1-5)); z-index: 15; width: 300px; padding: var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-flyout); }
.ai-menu-list a, .ai-menu-list button { display: block; width: 100%; padding: var(--space-2) var(--space-2-5); border: 0; border-radius: var(--radius-md); background: none; color: var(--fg-default); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-align: left; text-decoration: none; cursor: pointer; }
.ai-menu-list a:hover, .ai-menu-list button:hover { background: var(--bg-surface-selected); }
.ai-menu-list small { display: block; margin-top: var(--space-0-5); font: var(--type-body-xs); color: var(--fg-3); }

/* Prose */
.prose { max-width: var(--measure); }
.prose:has(.rail, .tab-rail) { max-width: none; }
.prose > * { max-width: var(--measure); }
.prose > .rail, .prose > .ptabs:has(.tab-rail) { max-width: none; }
.prose h2 { margin: var(--space-12) 0 var(--space-3); font: var(--type-h2); letter-spacing: var(--type-h2-tracking); color: var(--fg-default); }
.prose h3 { margin: var(--space-8) 0 var(--space-2); font: var(--type-h4); letter-spacing: var(--type-h4-tracking); color: var(--fg-default); }
.prose h4 { margin: var(--space-6) 0 var(--space-1-5); font: var(--type-h5); letter-spacing: var(--type-h5-tracking); color: var(--fg-default); }
.prose h5, .prose h6 { margin: var(--space-5) 0 var(--space-1); font: var(--type-h6); color: var(--fg-default); }
.prose h2, .prose h3, .prose h4 { position: relative; }
.anchor { margin-left: var(--space-2); color: var(--fg-4); text-decoration: none; opacity: 0; font-weight: var(--font-weight-regular); }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { opacity: 1; }
.prose p, .prose ul, .prose ol { margin: 0 0 var(--space-4); }
.prose :is(ul, ol):not(.field-list, .steps) { padding-left: var(--space-6); }
.prose li:not(.field, .step) { margin: var(--space-1) 0; }
.prose .field-list { margin: 0; }
.prose .steps { margin: 0 0 var(--space-6); }
.prose li::marker { color: var(--fg-4); }
.prose li > ul, .prose li > ol { margin: var(--space-1) 0; }
.prose strong { font-weight: var(--font-weight-semibold); color: var(--fg-default); }
.prose :not(pre) > code { padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--bg-inset); border: 1px solid var(--border-subtle); font-size: 0.86em; color: var(--fg-default); }
.prose a:hover { color: var(--fg-default); }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-0-5) var(--space-4); border-left: 2px solid var(--border-strong); color: var(--fg-3); }
.prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }
.planned { color: var(--fg-4); border-bottom: 1px dashed var(--fg-4); cursor: help; }

/* Pictures (lib/pictures.mjs): as wide as the text column at most, and never wider than the size the picture is
   drawn at; a narrower one sits in the middle. */
.figure { margin: var(--space-8) 0 var(--space-4); }
.figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--card-radius); }
.figure figcaption { margin-top: var(--space-2); font: var(--type-body-xs); letter-spacing: var(--type-body-xs-tracking); color: var(--fg-3); text-align: center; }

/* The live preview of the payment form (lib/preview.mjs, lib/html.mjs). With scripts off, the card is the photograph
   and its caption. Otherwise site.js asks for the demo store's key, and the card's data-state says what the stage
   holds: none while the key is asked, "loading" while fluveo.js loads, "form" from mount() on, "photo" once it ended as
   the photograph. In all four the bar keeps its room and the stage its height, so nothing under the card moves. Every
   value here is a token of the site, by name; what the build writes on each element of the stage are the two sizes of
   its photograph, --preview-wide and --preview-tall, and the room it asks for, --preview-room, a count of --space-20
   (lib/preview.mjs says why that many). The stage sets no height: it is as high as the rooms of what it holds. The box
   an element mounts in is its photograph's: as wide, with the same white margin, so the form stands where its picture
   would. It is white under a light theme of the form whatever the site's theme, as the photograph is, and a dark theme
   gives the stage the site's dark tokens (data-theme on the stage). */
.preview { margin: var(--space-8) 0 var(--space-5); }
.preview-card { border-radius: var(--card-radius); background: var(--bg-inset); box-shadow: var(--card-shadow); overflow: hidden; }
.preview-bar { display: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--preview-width)), 1fr)); gap: var(--space-2) var(--space-5); padding: var(--space-2-5) var(--space-4); background: var(--bg-card); }
html.js .preview[data-script] .preview-bar { display: grid; visibility: hidden; }
html.js .preview:is([data-state="loading"], [data-state="form"]) .preview-bar { visibility: visible; }
.preview-control { display: flex; align-items: center; gap: var(--space-2); }
.preview-label { font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--fg-3); }
.preview-options { display: flex; padding: var(--space-0-5); border-radius: var(--button-radius); background: var(--bg-inset); }
.preview-option { position: relative; display: block; }
.preview-option input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.preview-option span { display: block; padding: var(--space-1) var(--space-2-5); border-radius: var(--radius-md); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--fg-3); white-space: nowrap; transition: background var(--motion-quick) var(--motion-quick-ease), color var(--motion-quick) var(--motion-quick-ease); }
.preview-option input:checked + span { background: var(--bg-card); box-shadow: var(--shadow-border-1); color: var(--fg-default); }
.preview-option input:focus-visible + span { box-shadow: var(--focus-ring); }
.preview-stage { display: flex; flex-direction: column; background: var(--bg-inset); }
.preview-element { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--space-6) var(--space-4); }
html.js .preview[data-script] .preview-element { min-block-size: calc(var(--space-20) * var(--preview-room)); }
.preview-element .figure { margin: 0; }
html.js .preview[data-script]:not([data-state="photo"]) .figure { display: none; }
.preview-mount { display: none; box-sizing: border-box; inline-size: var(--preview-wide); max-inline-size: 100%; padding: var(--space-6); border-radius: var(--card-radius); background: var(--color-neutral-0); color-scheme: light; }
html.js .preview[data-script]:not([data-state="photo"]) .preview-mount { display: block; }
html.js .preview[data-script]:not([data-state="form"]) .preview-mount { min-block-size: var(--preview-tall); }
.preview[data-size="phone"] .preview-mount { inline-size: calc(var(--preview-width) + var(--space-6) + var(--space-6)); }
.preview-stage[data-theme="dark"] .preview-mount { background: var(--bg-card); }
.prose .preview-caption { margin: var(--space-2) 0 0; font: var(--type-body-xs); letter-spacing: var(--type-body-xs-tracking); color: var(--fg-3); text-align: center; }
html.js .preview[data-script]:not([data-state]) .preview-caption, html.js .preview[data-state="loading"] .preview-caption { visibility: hidden; }

/* Prose tabs (lib/html.mjs). With no script the bar stays hidden and every panel shows under its label. With
   site.js the bar shows, scrolling inside itself when it is wider than the column, and only the open panel shows. */
.ptabs { margin: 0 0 var(--space-5); }
.tabs.ptabs-bar { display: none; height: calc(var(--space-12) + var(--space-1)); padding: var(--space-1); margin-bottom: var(--space-3); }
html.js .ptabs-bar { display: flex; }
.ptabs-bar .tab { flex: none; font: var(--type-label-base); letter-spacing: var(--type-label-base-tracking); }
.ptabs-bar .tab[aria-selected="true"] { color: var(--tab-on); border-color: var(--accent); }
.prose .ptabs-label { margin: var(--space-6) 0 var(--space-2); font: var(--type-label-base); letter-spacing: var(--type-label-base-tracking); color: var(--fg-default); }
html.js .ptabs-label, html.js .ptabs-panel:not(.is-on) { display: none; }
.ptabs-panel > :last-child { margin-bottom: 0; }

/* A sample (lib/markdown.mjs): a block the reader reads and does not run, such as an answer or a request trace. It has
   no Copy button and stands back from the blocks that run: no fill, a dashed edge, muted text. */
.code.is-sample { background: transparent; border-style: dashed; }
.code.is-sample > .code-head { background: var(--bg-inset); border-bottom-style: dashed; }
.code.is-sample .code-title, .code.is-sample pre { color: var(--fg-3); }

/* Tables: a card that holds the dashboard's table.t rows. */
.table-wrap { overflow-x: auto; overflow-wrap: normal; margin: 0 0 var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--card-radius); background: var(--bg-card); box-shadow: var(--card-shadow); }
table { width: 100%; border-collapse: collapse; font: var(--type-body-base); letter-spacing: var(--type-body-base-tracking); }
th, td { padding: var(--space-2-5) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
th { font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--fg-subtle); background: var(--bg-inset); white-space: nowrap; }
td { color: var(--fg-2); }
tr:last-child td { border-bottom: 0; }

/* Callouts: the dashboard's status callout (a soft wash, the border the same as the fill). */
.callout { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--accent-subtle); border: 1px solid var(--accent-subtle); font: var(--type-body-base); letter-spacing: var(--type-body-base-tracking); color: var(--fg-2); }
.callout > :last-child { margin-bottom: 0; }
.callout p { margin-bottom: var(--space-2); }
.callout-title { margin: 0 0 var(--space-1) !important; font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--accent-text); }
.callout-warning { background: var(--status-warn-surface); border-color: var(--status-warn-surface); }
.callout-warning .callout-title { color: var(--status-warn-fg); }
.callout-tip { background: var(--status-info-surface); border-color: var(--status-info-surface); }
.callout-tip .callout-title { color: var(--status-info-fg); }

/* Code: the dashboard's code well, with a head for the title, the language tabs and Copy. The head is sticky under
   the top bar, so while any part of a block is in view its Copy button is too; the block clips its corners without
   being a scroll box, which would hold the head in place. A title too long for the head ends in an ellipsis and never
   pushes Copy out; beside language tabs it keeps a short title whole, and the tabs scroll. */
.code { margin: 0 0 var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: clip; background: var(--bg-inset); }
.code-head { position: sticky; top: var(--topbar-height); z-index: 1; display: flex; align-items: center; gap: var(--space-3); min-height: var(--space-10); padding: 0 var(--space-1-5) 0 var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--bg-card); }
.code-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); color: var(--fg-default); white-space: nowrap; }
.code pre { margin: 0; padding: var(--space-4) var(--space-4-5); overflow-x: auto; color: var(--fg-2); font-size: var(--font-size-13); line-height: 1.6; font-feature-settings: 'liga' 0, 'calt' 0; }
.copy { flex: none; margin-left: auto; height: var(--space-7); padding: 0 var(--space-2); border-radius: var(--radius-md); }
.tabs { display: flex; align-self: stretch; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
/* A head's tabs reach over its bottom border, so the underline of the open tab covers it and the bar has nothing to
   scroll up or down: a wheel turn over the tabs scrolls the page. */
.code-head > .tabs { margin-bottom: -1px; }
.cg > .code-head > .code-title { min-width: var(--space-16); }
.code-head .tab { margin-bottom: 0; }
.tab { padding: 0 var(--space-2); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--tab-fg); font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); cursor: pointer; white-space: nowrap; transition: color var(--motion-quick) var(--motion-quick-ease), border-color var(--motion-quick) var(--motion-quick-ease); }
.tab:hover { color: var(--fg-2); }
.tab.is-default { color: var(--tab-on); border-color: var(--accent); }
.cg-panel { display: none; }
.cg-panel.is-default { display: block; }
/* The browser form a reader chose (lib/config.mjs CLIENTS), as build.mjs writes the rules of each server language. */
html[data-client="html"] .cg:has(> .cg-panel[data-client="html"]) > .cg-panel { display: none; }
html[data-client="html"] .cg:has(> .cg-panel[data-client="html"]) > .cg-panel[data-client="html"] { display: block; }
html[data-client="html"] .cg:has(> .cg-panel[data-client="html"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-client="html"] .cg:has(> .cg-panel[data-client="html"]) > .code-head .tab[data-set-client="html"] { color: var(--tab-on); border-color: var(--accent); }
html[data-client="react"] .cg:has(> .cg-panel[data-client="react"]) > .cg-panel { display: none; }
html[data-client="react"] .cg:has(> .cg-panel[data-client="react"]) > .cg-panel[data-client="react"] { display: block; }
html[data-client="react"] .cg:has(> .cg-panel[data-client="react"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-client="react"] .cg:has(> .cg-panel[data-client="react"]) > .code-head .tab[data-set-client="react"] { color: var(--tab-on); border-color: var(--accent); }
.t-c { color: var(--fg-4); font-style: italic; }
.t-s { color: var(--status-ok-fg); }
.t-n { color: var(--status-warn-fg); }
.t-k { color: var(--status-info-fg); }
.t-f { color: var(--status-purple-fg); }
.t-p { color: var(--status-bad-fg); }

/* Steps and two-column operations. A rail (lib/html.mjs) holds text and code pairs; narrow, each code follows its
   text. Wide with site.js, the rail is one grid: every text in the left column, every code in one cell that spans
   all rows on the right, and site.js marks .is-active the code of the text on the reading line, the middle of the
   window, or the last code above that text. Only that code shows, sticky, so no code ever stretches the text
   column. Its box ends above the window's bottom and scrolls inside itself, with each block's head sticky at the
   box's top. site.js keeps --code-top, the box's top while it is in the window, and --rail-end, the rail's bottom on screen: near the
   rail's end the box gets shorter instead of leaving, so the code of the last text stays in view with its Copy. */
.steps { list-style: none; counter-reset: step; margin: 0 0 var(--space-6); padding: 0; }
.step { counter-increment: step; position: relative; padding: 0 0 var(--space-2) var(--space-11); border-left: 1px solid var(--border-subtle); margin-left: var(--space-3-5); }
.step::before { content: counter(step); position: absolute; left: calc(-1 * var(--space-3-5)); top: var(--space-6); width: var(--space-7); height: var(--space-7); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--bg-card); box-shadow: var(--shadow-border-1); color: var(--fg-default); font: var(--type-label-sm); }
.step > .pair-text:first-child > h3:first-child { margin-top: var(--space-6); }
.split { padding: var(--space-2) 0 var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.split > .pair-text > h2:first-child { margin-top: var(--space-8); }
@media (min-width: 1240px) {
  html.js .rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rail-rows), auto); column-gap: var(--space-9); align-items: start; }
  html.js .rail > .step, html.js .rail > .split { display: contents; }
  html.js .rail > .step::before { content: none; }
  html.js .rail .pair-text { grid-column: 1; }
  html.js .rail .pair-code { grid-column: 2; grid-row: 1 / -1; position: sticky; top: calc(var(--topbar-height) + var(--space-6)); max-height: max(var(--space-20), min(calc(100vh - var(--code-top, var(--topbar-height)) - var(--space-6)), calc(var(--rail-end, 100vh) - var(--topbar-height) - var(--space-6)))); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  html.js .rail .pair-code:not(.is-active) { display: none; }
  html.js .rail .pair-code .code-head { top: 0; }
  html.js .rail > .step { counter-increment: none; }
  html.js .rail > .step > .pair-text { position: relative; padding: 0 0 var(--space-2) var(--space-11); border-left: 1px solid var(--border-subtle); margin-left: var(--space-3-5); }
  html.js .rail > .step > .pair-text:first-child { counter-increment: step; }
  html.js .rail > .step > .pair-text:first-child::before { content: counter(step); position: absolute; left: calc(-1 * var(--space-3-5)); top: var(--space-6); width: var(--space-7); height: var(--space-7); border-radius: var(--radius-full); display: grid; place-items: center; background: var(--bg-card); box-shadow: var(--shadow-border-1); color: var(--fg-default); font: var(--type-label-sm); }
  html.js .rail > .step > .pair-code { margin-top: var(--space-6); }
  html.js .split > .pair-text { padding: var(--space-2) 0 var(--space-7); border-bottom: 1px solid var(--border-subtle); }
  html.js .split > .pair-code { margin-top: var(--space-10); }
  /* A tab's rail (lib/html.mjs) holds commands and whole configuration files that must show without scrolling
     sideways, so its code column is the wider one. */
  html.js .tab-rail.rail { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
/* Up to 1600 px a page with such a rail gives the room of "On this page" to the rail. */
@media (min-width: 1240px) and (max-width: 1599px) {
  html.js .layout:has(.tab-rail) { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  html.js .layout:has(.tab-rail) > .aside { display: none; }
}
.endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5) var(--space-2-5); }
.endpoint .badge { text-decoration: none; }
.endpoint code { font-size: var(--font-size-14); }
.method { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); font: var(--font-weight-semibold) var(--font-size-11)/1 var(--mono); letter-spacing: var(--font-tracking-label); background: var(--status-ok-bg); color: var(--status-ok-fg); }
.method-delete { background: var(--status-bad-bg); color: var(--status-bad-fg); }
.method-get { background: var(--status-info-bg); color: var(--status-info-fg); }

/* Fields */
.fields { margin: var(--space-5) 0 var(--space-6); }
.fields-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.fields-title { font: var(--type-mono-label); letter-spacing: var(--font-tracking-label); text-transform: uppercase; color: var(--fg-3); }
.fields-toggle { height: var(--space-7); padding: 0 var(--space-2); border-color: transparent; background: transparent; color: var(--accent-text); }
.fields-toggle:hover { background: var(--btn-ghost-hover); }
.field-list { list-style: none; margin: 0; padding: 0; }
.field { padding: var(--space-3-5) 0; border-bottom: 1px solid var(--border-subtle); }
.field:target > .field-head .field-name code { background: var(--accent-subtle); }
.field-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.field-name { text-decoration: none; }
.field-name code { font-weight: var(--font-weight-semibold); color: var(--fg-default); font-size: var(--font-size-13); padding: 1px var(--space-1); border-radius: var(--radius-sm); }
.field-type { font: var(--font-weight-regular) var(--font-size-12)/1 var(--mono); color: var(--fg-3); }
.field-desc { margin-top: var(--space-1-5); font: var(--type-body-base); letter-spacing: var(--type-body-base-tracking); }
.field-desc > :last-child { margin-bottom: 0; }
.field-children { margin-top: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.field-children > summary { padding: var(--space-1-5) var(--space-3); font: var(--type-label-sm); color: var(--fg-3); cursor: pointer; }
.field-children > summary:hover { color: var(--fg-default); }
.field-children[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.field-children > .field-list { padding: 0 var(--space-3-5); }
.field-children .field:last-child { border-bottom: 0; }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); font: var(--type-label-xs); letter-spacing: var(--type-label-xs-tracking); white-space: nowrap; background: var(--status-gray-bg); color: var(--status-gray-fg); }
.badge-required { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.badge-expandable { background: var(--status-info-bg); color: var(--status-info-fg); }
.badge-preview { background: var(--status-purple-bg); color: var(--status-purple-fg); }
h2 > .badge, h3 > .badge { margin-left: var(--space-2); vertical-align: middle; }

/* Cards: the dashboard's card recipe. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-6); }
.card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); color: var(--fg-2); text-decoration: none; transition: box-shadow var(--motion-quick) var(--motion-quick-ease), border-color var(--motion-quick) var(--motion-quick-ease); }
a.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card-hover); color: var(--fg-2); }
.card-title { font: var(--type-label-base); letter-spacing: var(--type-label-base-tracking); color: var(--fg-default); }
a.card:hover .card-title { color: var(--accent-text); }
.card-desc { font: var(--type-body-sm); letter-spacing: var(--type-body-sm-tracking); color: var(--fg-3); }
.card.is-planned { border-style: dashed; box-shadow: none; background: transparent; }
.soon { align-self: flex-start; margin-top: var(--space-1-5); display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); background: var(--status-gray-bg); color: var(--status-gray-fg); font: var(--type-label-xs); }

/* Pager */
.pager { display: flex; justify-content: space-between; gap: var(--space-4); max-width: var(--measure); margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.pager a { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 200px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--card-radius); background: var(--card-bg); box-shadow: var(--card-shadow); text-decoration: none; font: var(--type-label-base); letter-spacing: var(--type-label-base-tracking); color: var(--fg-default); transition: box-shadow var(--motion-quick) var(--motion-quick-ease); }
.pager a:hover { box-shadow: var(--shadow-card-hover); color: var(--accent-text); }
.pager small { font: var(--type-body-xs); color: var(--fg-3); }
.pager-next { margin-left: auto; text-align: right; }

/* Search */
.search { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding: 12vh var(--space-4) var(--space-4); background: var(--bg-overlay); backdrop-filter: blur(var(--scrim-blur)); }
.search[hidden] { display: none; }
.search-panel { width: min(640px, 100%); max-height: 72vh; display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); background: var(--bg-card); box-shadow: var(--shadow-5); overflow: hidden; }
.search-input { width: 100%; height: 52px; padding: 0 var(--space-4-5); border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: var(--fg-default); font: var(--type-label-md); letter-spacing: var(--type-label-md-tracking); outline: none; }
.search-input::placeholder { color: var(--fg-placeholder); }
.search-results { list-style: none; margin: 0; padding: var(--space-1-5); overflow-y: auto; }
.search-results a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); color: var(--fg-default); font: var(--type-label-sm); text-decoration: none; }
.search-results a small { display: block; margin-top: var(--space-0-5); color: var(--fg-3); font: var(--type-body-xs); }
.search-results [aria-selected="true"] a { background: var(--bg-surface-selected); }
.search-results .empty { padding: var(--space-3-5) var(--space-3); color: var(--fg-3); font: var(--type-body-sm); }
.search-hint { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: var(--space-2) var(--space-3-5); border-top: 1px solid var(--border-subtle); background: var(--bg-inset); font: var(--type-body-xs); color: var(--fg-3); }
.search-hint kbd + kbd { margin-left: 0; }
.toast { position: fixed; bottom: var(--space-10); left: 50%; transform: translateX(-50%); z-index: 45; min-height: var(--space-8); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--toast-bg); color: var(--fg-on-color); font: var(--type-label-sm); opacity: 0; pointer-events: none; transition: opacity var(--motion-standard) var(--motion-standard-ease); }
.toast.is-on { opacity: 1; }

/* Narrow screens */
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .aside { display: none; }
}
@media (max-width: 880px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: block; }
  .wordmark { width: auto; }
  .sidebar { position: fixed; top: var(--topbar-height); left: 0; z-index: 25; width: 290px; padding-top: var(--space-3); background: var(--sidebar-bg); transform: translateX(-100%); transition: transform var(--motion-sheet) var(--motion-sheet-ease); }
  html.nav-open .sidebar { transform: none; box-shadow: var(--shadow-flyout); }
  .content { padding: var(--space-6) var(--space-4-5) var(--space-16); border-left: 0; border-top-left-radius: 0; }
  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
  .search-open { flex: 1 1 auto; min-width: 0; margin-left: var(--space-1); }
  .search-open span { overflow: hidden; text-overflow: ellipsis; }
  .search-open kbd, .wordmark-docs, .api-version, .theme-label { display: none; }
  .topbar-end { margin-left: 0; gap: var(--space-1); }
  .title-row { flex-direction: column; }
  .preview-element { padding-inline: var(--space-2); }
  .preview-mount { padding-inline: var(--space-4); }
  .pager a { flex: 1 1 0; min-width: 0; }
  h1 { font: var(--type-h1); }
}
@media print {
  .topbar, .sidebar, .aside, .ai-menu, .copy, .pager { display: none; }
  .layout { display: block; }
  .content { border: 0; }
}

/* Generated by build.mjs from lib/config.mjs: the chosen language wins before the first paint. */
html[data-lang="curl"] .cg:has(> .cg-panel[data-lang="curl"]) > .cg-panel { display: none; }
html[data-lang="curl"] .cg:has(> .cg-panel[data-lang="curl"]) > .cg-panel[data-lang="curl"] { display: block; }
html[data-lang="curl"] .cg:has(> .cg-panel[data-lang="curl"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="curl"] .cg:has(> .cg-panel[data-lang="curl"]) > .code-head .tab[data-set-lang="curl"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="node"] .cg:has(> .cg-panel[data-lang="node"]) > .cg-panel { display: none; }
html[data-lang="node"] .cg:has(> .cg-panel[data-lang="node"]) > .cg-panel[data-lang="node"] { display: block; }
html[data-lang="node"] .cg:has(> .cg-panel[data-lang="node"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="node"] .cg:has(> .cg-panel[data-lang="node"]) > .code-head .tab[data-set-lang="node"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="python"] .cg:has(> .cg-panel[data-lang="python"]) > .cg-panel { display: none; }
html[data-lang="python"] .cg:has(> .cg-panel[data-lang="python"]) > .cg-panel[data-lang="python"] { display: block; }
html[data-lang="python"] .cg:has(> .cg-panel[data-lang="python"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="python"] .cg:has(> .cg-panel[data-lang="python"]) > .code-head .tab[data-set-lang="python"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="php"] .cg:has(> .cg-panel[data-lang="php"]) > .cg-panel { display: none; }
html[data-lang="php"] .cg:has(> .cg-panel[data-lang="php"]) > .cg-panel[data-lang="php"] { display: block; }
html[data-lang="php"] .cg:has(> .cg-panel[data-lang="php"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="php"] .cg:has(> .cg-panel[data-lang="php"]) > .code-head .tab[data-set-lang="php"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="ruby"] .cg:has(> .cg-panel[data-lang="ruby"]) > .cg-panel { display: none; }
html[data-lang="ruby"] .cg:has(> .cg-panel[data-lang="ruby"]) > .cg-panel[data-lang="ruby"] { display: block; }
html[data-lang="ruby"] .cg:has(> .cg-panel[data-lang="ruby"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="ruby"] .cg:has(> .cg-panel[data-lang="ruby"]) > .code-head .tab[data-set-lang="ruby"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="go"] .cg:has(> .cg-panel[data-lang="go"]) > .cg-panel { display: none; }
html[data-lang="go"] .cg:has(> .cg-panel[data-lang="go"]) > .cg-panel[data-lang="go"] { display: block; }
html[data-lang="go"] .cg:has(> .cg-panel[data-lang="go"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="go"] .cg:has(> .cg-panel[data-lang="go"]) > .code-head .tab[data-set-lang="go"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="java"] .cg:has(> .cg-panel[data-lang="java"]) > .cg-panel { display: none; }
html[data-lang="java"] .cg:has(> .cg-panel[data-lang="java"]) > .cg-panel[data-lang="java"] { display: block; }
html[data-lang="java"] .cg:has(> .cg-panel[data-lang="java"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="java"] .cg:has(> .cg-panel[data-lang="java"]) > .code-head .tab[data-set-lang="java"] { color: var(--tab-on); border-color: var(--accent); }
html[data-lang="dotnet"] .cg:has(> .cg-panel[data-lang="dotnet"]) > .cg-panel { display: none; }
html[data-lang="dotnet"] .cg:has(> .cg-panel[data-lang="dotnet"]) > .cg-panel[data-lang="dotnet"] { display: block; }
html[data-lang="dotnet"] .cg:has(> .cg-panel[data-lang="dotnet"]) > .code-head .tab.is-default { color: var(--tab-fg); border-color: transparent; }
html[data-lang="dotnet"] .cg:has(> .cg-panel[data-lang="dotnet"]) > .code-head .tab[data-set-lang="dotnet"] { color: var(--tab-on); border-color: var(--accent); }