/* ── vendor/tokens.css ─────────────────────────── */
/**
 * Fleetio design tokens — extracted WITH selector context.
 *
 * The flattened dump at dri-new/tokens/all-token-declarations.css is NOT usable:
 * it interleaves light and dark values with the selector stripped, so
 * 1,291 declarations collapse to 614 names and neither theme survives. These
 * blocks come straight out of their production stylesheet
 * (application_react_styles-e1f53f20.css) with the selectors intact.
 *
 * Four contexts, and the dark one is scoped to BODY, not html — which is why
 * their own capture has both `09-dark-html-class-broken` and `10-dark-body-class`.
 *
 * Verbatim. Fleetio green #00884b included: this is a study object, not an
 * adoption. Nothing here is translated for any other product.
 */

/* ══ primitives — ramps, radius, spacing, type ══ */
:root,:host {
  --radius-none: 0;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-full: 9999px;
  --breakpoint-md: 768px;
  --breakpoint-xl: 1280px;
  --color-black: #000;
  --color-white: #fff;
  --color-gray-25: #f5f5f5;
  --color-gray-50: #e7e7e7;
  --color-gray-100: #d4d4d4;
  --color-gray-200: silver;
  --color-gray-300: #a9a9a9;
  --color-gray-400: #8d8d8d;
  --color-gray-500: #767676;
  --color-gray-600: #686868;
  --color-gray-700: #595959;
  --color-gray-800: #464747;
  --color-gray-900: #323333;
  --color-gray-950: #222323;
  --color-gray-975: #171818;
  --color-green-25: #e7faec;
  --color-green-50: #c7f1d5;
  --color-green-100: #9ee3b8;
  --color-green-200: #77d29c;
  --color-green-300: #4fbd81;
  --color-green-400: #28a466;
  --color-green-500: #00884b;
  --color-green-600: #067748;
  --color-green-700: #0c6643;
  --color-green-800: #11513a;
  --color-green-900: #103a2d;
  --color-green-950: #092821;
  --color-green-975: #051b19;
  --color-teal-25: #e3faf8;
  --color-teal-50: #c1f0ee;
  --color-teal-100: #a2dfdc;
  --color-teal-200: #7bceca;
  --color-teal-300: #53b9b4;
  --color-teal-400: #2ba09a;
  --color-teal-500: #00847e;
  --color-teal-600: #00746f;
  --color-teal-700: #00645f;
  --color-teal-800: #00504c;
  --color-teal-900: #003a37;
  --color-teal-950: #002826;
  --color-teal-975: #001c1b;
  --color-blue-25: #ecf7fe;
  --color-blue-50: #d0ebfc;
  --color-blue-100: #acdaf8;
  --color-blue-200: #81c8f5;
  --color-blue-300: #48b2f0;
  --color-blue-400: #2c97da;
  --color-blue-500: #007bc4;
  --color-blue-600: #006bb0;
  --color-blue-700: #005b9d;
  --color-blue-800: #004880;
  --color-blue-900: #00345e;
  --color-blue-950: #002441;
  --color-blue-975: #001930;
  --color-purple-25: #f4f4fc;
  --color-purple-50: #e6e6fa;
  --color-purple-100: #d3d0f6;
  --color-purple-200: #bebaf2;
  --color-purple-300: #a7a1ec;
  --color-purple-400: #8d85e2;
  --color-purple-500: #7268d3;
  --color-purple-600: #615ac1;
  --color-purple-700: #524dab;
  --color-purple-800: #3f3c8d;
  --color-purple-900: #2c2b67;
  --color-purple-950: #1d1d4b;
  --color-purple-975: #141436;
  --color-red-25: #fff2f2;
  --color-red-50: #ffe0de;
  --color-red-100: #fdc7c3;
  --color-red-200: #fbaca7;
  --color-red-300: #f98982;
  --color-red-400: #f65c50;
  --color-red-500: #dd3628;
  --color-red-600: #c62a21;
  --color-red-700: #ae1e18;
  --color-red-800: #8f110e;
  --color-red-900: #6b0606;
  --color-red-950: #4e0203;
  --color-red-975: #390202;
  --color-yellow-25: #fff5da;
  --color-yellow-50: #ffe5a2;
  --color-yellow-100: #fece57;
  --color-yellow-200: #f7b433;
  --color-yellow-300: #ea962f;
  --color-yellow-400: #d9721e;
  --color-yellow-500: #c95f14;
  --color-yellow-600: #ba510b;
  --color-yellow-700: #9c3900;
  --color-yellow-800: #802b00;
  --color-yellow-900: #5f1d00;
  --color-yellow-950: #451100;
  --color-yellow-975: #320b00;
  --color-black-alpha-0: #0000;
  --color-black-alpha-25: #0000000a;
  --color-black-alpha-50: #00000017;
  --color-black-alpha-100: #0000002b;
  --color-black-alpha-200: #00000040;
  --color-white-alpha-800: #ffffff40;
  --color-white-alpha-900: #ffffff2b;
  --color-white-alpha-950: #ffffff17;
  --color-white-alpha-975: #ffffff0a;
  --color-white-alpha-1000: #fff0;
  --color-neutral-600: #fff;
  --background-color-fill-beta-active: var(--color-teal-700);
  --background-color-fill-beta-hover: var(--color-teal-600);
  --background-color-fill-beta-secondary-active: var(--color-teal-200);
  --background-color-fill-beta-secondary-hover: var(--color-teal-100);
  --background-color-fill-beta-secondary: var(--color-teal-50);
  --background-color-fill-beta: var(--color-teal-500);
  --background-color-fill-brand-active: var(--color-green-700);
  --background-color-fill-brand-hover: var(--color-green-600);
  --background-color-fill-brand-secondary-active: var(--color-green-200);
  --background-color-fill-brand-secondary-hover: var(--color-green-100);
  --background-color-fill-brand-secondary: var(--color-green-50);
  --background-color-fill-brand-tertiary-active: var(--color-green-100);
  --background-color-fill-brand-tertiary-hover: var(--color-green-50);
  --background-color-fill-brand-tertiary: var(--color-green-25);
  --background-color-fill-brand: var(--color-green-500);
  --background-color-fill-danger-active: var(--color-red-700);
  --background-color-fill-danger-hover: var(--color-red-600);
  --background-color-fill-danger-secondary-active: var(--color-red-200);
  --background-color-fill-danger-secondary-hover: var(--color-red-100);
  --background-color-fill-danger-secondary: var(--color-red-50);
  --background-color-fill-danger: var(--color-red-500);
  --background-color-fill-info-active: var(--color-blue-700);
  --background-color-fill-info-hover: var(--color-blue-600);
  --background-color-fill-info-secondary-active: var(--color-blue-200);
  --background-color-fill-info-secondary-hover: var(--color-blue-100);
  --background-color-fill-info-secondary: var(--color-blue-50);
  --background-color-fill-info: var(--color-blue-500);
  --background-color-fill-inverse-active: var(--color-gray-700);
  --background-color-fill-inverse-hover: var(--color-gray-800);
  --background-color-fill-inverse-secondary-active: var(--color-gray-400);
  --background-color-fill-inverse-secondary-hover: var(--color-gray-500);
  --background-color-fill-inverse-secondary: var(--color-gray-600);
  --background-color-fill-inverse: var(--color-gray-900);
  --background-color-fill-magic-active: var(--color-purple-700);
  --background-color-fill-magic-hover: var(--color-purple-600);
  --background-color-fill-magic-secondary-active: var(--color-purple-200);
  --background-color-fill-magic-secondary-hover: var(--color-purple-100);
  --background-color-fill-magic-secondary: var(--color-purple-50);
  --background-color-fill-magic: var(--color-purple-500);
  --background-color-fill-primary-active: var(--color-gray-50);
  --background-color-fill-primary-hover: var(--color-gray-25);
  --background-color-fill-primary: var(--color-white);
  --background-color-fill-secondary-active: var(--color-gray-100);
  --background-color-fill-secondary-hover: var(--color-gray-50);
  --background-color-fill-secondary: var(--color-gray-25);
  --background-color-fill-success-active: var(--color-green-700);
  --background-color-fill-success-hover: var(--color-green-600);
  --background-color-fill-success-secondary-active: var(--color-green-200);
  --background-color-fill-success-secondary-hover: var(--color-green-100);
  --background-color-fill-success-secondary: var(--color-green-50);
  --background-color-fill-success: var(--color-green-500);
  --background-color-fill-tertiary-active: var(--color-gray-200);
  --background-color-fill-tertiary-hover: var(--color-gray-100);
  --background-color-fill-tertiary: var(--color-gray-50);
  --background-color-fill-transparent-active: var(--color-black-alpha-50);
  --background-color-fill-transparent-hover: var(--color-black-alpha-25);
  --background-color-fill-transparent-secondary-active: var(--color-black-alpha-200);
  --background-color-fill-transparent-secondary-hover: var(--color-black-alpha-100);
  --background-color-fill-transparent-secondary: var(--color-black-alpha-50);
  --background-color-fill-transparent: var(--color-black-alpha-0);
  --background-color-fill-warning-active: var(--color-yellow-400);
  --background-color-fill-warning-hover: var(--color-yellow-300);
  --background-color-fill-warning-secondary-active: var(--color-yellow-200);
  --background-color-fill-warning-secondary-hover: var(--color-yellow-100);
  --background-color-fill-warning-secondary: var(--color-yellow-50);
  --background-color-fill-warning: var(--color-yellow-200);
  --background-color-primary: var(--color-gray-25);
  --background-color-surface-beta: var(--color-teal-25);
  --background-color-surface-brand: var(--color-green-25);
  --background-color-surface-danger: var(--color-red-25);
  --background-color-surface-elevated: var(--color-white);
  --background-color-surface-info: var(--color-blue-25);
  --background-color-surface-magic: var(--color-purple-25);
  --background-color-surface-primary: var(--color-white);
  --background-color-surface-secondary: var(--color-gray-25);
  --background-color-surface-success: var(--color-green-25);
  --background-color-surface-tertiary: var(--color-gray-50);
  --background-color-surface-warning: var(--color-yellow-25);
  --text-color-beta-large: var(--color-teal-500);
  --text-color-beta-on-bg-fill: var(--color-white);
  --text-color-beta: var(--color-teal-600);
  --text-color-brand-large: var(--color-green-400);
  --text-color-brand-on-bg-fill: var(--color-white);
  --text-color-brand: var(--color-green-600);
  --text-color-danger-large: var(--color-red-500);
  --text-color-danger-on-bg-fill: var(--color-white);
  --text-color-danger: var(--color-red-600);
  --text-color-disabled: var(--color-gray-200);
  --text-color-info-large: var(--color-blue-500);
  --text-color-info-on-bg-fill: var(--color-white);
  --text-color-info: var(--color-blue-600);
  --text-color-inverse: var(--color-white);
  --text-color-link-active: var(--color-green-800);
  --text-color-link-hover: var(--color-green-700);
  --text-color-link: var(--color-green-600);
  --text-color-magic-large: var(--color-purple-500);
  --text-color-magic-on-bg-fill: var(--color-white);
  --text-color-magic: var(--color-purple-600);
  --text-color-primary: var(--color-gray-950);
  --text-color-secondary: var(--color-gray-700);
  --text-color-success-large: var(--color-green-400);
  --text-color-success-on-bg-fill: var(--color-white);
  --text-color-success: var(--color-green-600);
  --text-color-tertiary: var(--color-gray-500);
  --text-color-warning-large: var(--color-yellow-400);
  --text-color-warning-on-bg-fill: var(--color-yellow-975);
  --text-color-warning: var(--color-yellow-600);
  --border-color-beta: var(--color-teal-500);
  --border-color-brand: var(--color-green-400);
  --border-color-danger: var(--color-red-400);
  --border-color-focus: var(--color-green-300);
  --border-color-info: var(--color-blue-400);
  --border-color-inverse-secondary: var(--color-gray-600);
  --border-color-inverse: var(--color-gray-900);
  --border-color-magic: var(--color-purple-500);
  --border-color-primary: var(--color-gray-100);
  --border-color-secondary: var(--color-gray-50);
  --border-color-success: var(--color-green-400);
  --border-color-tertiary: var(--color-gray-25);
  --border-color-warning: var(--color-yellow-300);
  --container-xs: 320px;
  --container-sm: 384px;
  --container-md: 448px;
  --container-lg: 512px;
  --container-xl: 576px;
  --container-2xl: 672px;
  --container-3xl: 768px;
  --container-4xl: 896px;
  --container-5xl: 1024px;
  --container-6xl: 1152px;
  --container-7xl: 1280px;
  --container-8xl: 1440px;
  --font-sans: "inter", system-ui, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: Menlo, Monaco, Roboto Mono, Consolas, "Andale Mono WT", "Andale Mono", monospace;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: normal;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --leading-3: 12px;
  --leading-4: 16px;
  --leading-5: 20px;
  --leading-6: 24px;
  --leading-7: 28px;
  --leading-8: 32px;
  --shadow: 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;
  --shadow-menu: 0 12px 24px 0px #0003, 0 2px 4px 0px #0000000d, 0 0 1px #0000004d;
  --shadow-menu-dark: 0 1px 12px 0px #0006, 0px 0px 2px 0px #0003, 0 0 0 1px var(--color-gray-700);
  --spacing-none: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 48px;
  --spacing-10: 64px;
  --text-xs: 10px;
  --text-xs--line-height: 1.2;
  --text-sm: 12px;
  --text-sm--line-height: calc(4/3);
  --text-md: 13px;
  --text-md--line-height: calc(20/13);
  --text-default: 14px;
  --text: 14px;
  --text--line-height: calc(20/13);
  --text-lg: 16px;
  --text-lg--line-height: 1.5;
  --text-xl: 18px;
  --text-xl--line-height: calc(14/9);
  --text-2xl: 24px;
  --text-2xl--line-height: calc(4/3);
  --text-3xl: 32px;
  --text-3xl--line-height: 1.25;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c6;
  --color-amber-200: #fee685;
  --color-amber-300: #ffd236;
  --color-amber-400: #fcbb00;
  --color-amber-700: #b75000;
  --color-amber-800: #953d00;
  --color-emerald-50: #ecfdf5;
  --color-sky-50: #f0f9ff;
  --color-sky-100: #dff2fe;
  --color-sky-200: #b8e6fe;
  --color-sky-400: #00bcfe;
  --color-sky-500: #00a5ef;
  --color-sky-600: #0084cc;
  --color-sky-700: #0069a4;
  --color-slate-300: #cad5e2;
  --spacing: .25rem;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --radius-xs: .125rem;
  --drop-shadow-md: 0 3px 3px #0000001f;
  --drop-shadow-lg: 0 4px 4px #00000026;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-xl: 24px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
}

/* ══ root-level primitives ══ */
:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray-25: #f5f5f5;
  --color-gray-50: #e7e7e7;
  --color-gray-100: #d4d4d4;
  --color-gray-200: silver;
  --color-gray-300: #a9a9a9;
  --color-gray-400: #8d8d8d;
  --color-gray-500: #767676;
  --color-gray-600: #686868;
  --color-gray-700: #595959;
  --color-gray-800: #464747;
  --color-gray-900: #323333;
  --color-gray-950: #222323;
  --color-gray-975: #171818;
  --color-green-25: #e7faec;
  --color-green-50: #c7f1d5;
  --color-green-100: #9ee3b8;
  --color-green-200: #77d29c;
  --color-green-300: #4fbd81;
  --color-green-400: #28a466;
  --color-green-500: #00884b;
  --color-green-600: #067748;
  --color-green-700: #0c6643;
  --color-green-800: #11513a;
  --color-green-900: #103a2d;
  --color-green-950: #092821;
  --color-green-975: #051b19;
  --color-teal-25: #e3faf8;
  --color-teal-50: #c1f0ee;
  --color-teal-100: #a2dfdc;
  --color-teal-200: #7bceca;
  --color-teal-300: #53b9b4;
  --color-teal-400: #2ba09a;
  --color-teal-500: #00847e;
  --color-teal-600: #00746f;
  --color-teal-700: #00645f;
  --color-teal-800: #00504c;
  --color-teal-900: #003a37;
  --color-teal-950: #002826;
  --color-teal-975: #001c1b;
  --color-blue-25: #ecf7fe;
  --color-blue-50: #d0ebfc;
  --color-blue-100: #acdaf8;
  --color-blue-200: #81c8f5;
  --color-blue-300: #48b2f0;
  --color-blue-400: #2c97da;
  --color-blue-500: #007bc4;
  --color-blue-600: #006bb0;
  --color-blue-700: #005b9d;
  --color-blue-800: #004880;
  --color-blue-900: #00345e;
  --color-blue-950: #002441;
  --color-blue-975: #001930;
  --color-purple-25: #f4f4fc;
  --color-purple-50: #e6e6fa;
  --color-purple-100: #d3d0f6;
  --color-purple-200: #bebaf2;
  --color-purple-300: #a7a1ec;
  --color-purple-400: #8d85e2;
  --color-purple-500: #7268d3;
  --color-purple-600: #615ac1;
  --color-purple-700: #524dab;
  --color-purple-800: #3f3c8d;
  --color-purple-900: #2c2b67;
  --color-purple-950: #1d1d4b;
  --color-purple-975: #141436;
  --color-red-25: #fff2f2;
  --color-red-50: #ffe0de;
  --color-red-100: #fdc7c3;
  --color-red-200: #fbaca7;
  --color-red-300: #f98982;
  --color-red-400: #f65c50;
  --color-red-500: #dd3628;
  --color-red-600: #c62a21;
  --color-red-700: #ae1e18;
  --color-red-800: #8f110e;
  --color-red-900: #6b0606;
  --color-red-950: #4e0203;
  --color-red-975: #390202;
  --color-yellow-25: #fff5da;
  --color-yellow-50: #ffe5a2;
  --color-yellow-100: #fece57;
  --color-yellow-200: #f7b433;
  --color-yellow-300: #ea962f;
  --color-yellow-400: #d9721e;
  --color-yellow-500: #c95f14;
  --color-yellow-600: #ba510b;
  --color-yellow-700: #9c3900;
  --color-yellow-800: #802b00;
  --color-yellow-900: #5f1d00;
  --color-yellow-950: #451100;
  --color-yellow-975: #320b00;
  --color-black-alpha-0: #0000;
  --color-black-alpha-25: #0000000a;
  --color-black-alpha-50: #00000017;
  --color-black-alpha-100: #0000002b;
  --color-black-alpha-200: #00000040;
  --color-black-alpha-300: #00000057;
  --color-black-alpha-400: #00000070;
  --color-black-alpha-500: #0000008a;
  --color-black-alpha-600: #00000096;
  --color-black-alpha-700: #000000a6;
  --color-black-alpha-800: #000000b8;
  --color-black-alpha-900: #000c;
  --color-black-alpha-950: #000000db;
  --color-black-alpha-975: #000000e8;
  --color-black-alpha-1000: #000;
  --color-white-alpha-0: #fff;
  --color-white-alpha-25: #ffffffe8;
  --color-white-alpha-50: #ffffffdb;
  --color-white-alpha-100: #fffc;
  --color-white-alpha-200: #ffffffb8;
  --color-white-alpha-300: #ffffffa6;
  --color-white-alpha-400: #ffffff96;
  --color-white-alpha-500: #ffffff8a;
  --color-white-alpha-600: #ffffff70;
  --color-white-alpha-700: #ffffff57;
  --color-white-alpha-800: #ffffff40;
  --color-white-alpha-900: #ffffff2b;
  --color-white-alpha-950: #ffffff17;
  --color-white-alpha-975: #ffffff0a;
  --color-white-alpha-1000: #fff0;
  --radius-none: 0px;
  --radius-sm: 3px;
  --border-radius-rounded: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-full: 9999px;
  --border-width-border-0: 0px;
  --border-width-border: 1px;
  --border-width-border-2: 2px;
  --border-width-border-3: 3px;
  --border-width-border-4: 4px;
  --spacing-none: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 48px;
  --spacing-10: 64px;
  --width-none: 0px;
  --width-1: 1px;
  --width-2: 2px;
  --width-3: 4px;
  --width-4: 8px;
  --width-5: 12px;
  --width-6: 16px;
  --width-7: 24px;
  --width-8: 32px;
  --width-9: 48px;
  --width-10: 64px;
  --height-0: 0px;
  --height-1: 1px;
  --height-2: 2px;
  --height-3: 4px;
  --height-4: 8px;
  --height-5: 12px;
  --height-6: 16px;
  --height-7: 24px;
  --height-8: 32px;
  --height-9: 48px;
  --height-10: 64px;
  --font-family-sans: Inter;
  --font-family-mono: Menlo;
  --font-family-stat: Space Grotesk;
  --font-size-2xs: 8px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 44px;
  --font-size-5xl: 52px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 80px;
  --font-line-height-3: 12px;
  --font-line-height-4: 16px;
  --font-line-height-5: 20px;
  --font-line-height-6: 24px;
  --font-line-height-7: 28px;
  --font-line-height-8: 32px;
  --font-line-height-9: 36px;
  --font-line-height-10: 40px;
  --font-line-height-11: 56px;
  --font-line-height-12: 64px;
  --font-line-height-13: 72px;
  --font-line-height-14: 88px;
  --font-line-height-15: 96px;
  --font-weight-hairline: 100;
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --font-letter-spacing-tighter: -.5px;
  --font-letter-spacing-tight: -.25px;
  --font-letter-spacing-normal: 0px;
  --font-letter-spacing-wide: .25px;
  --font-letter-spacing-wider: .5px;
}

/* ══ SEMANTIC · LIGHT ══ */
:root,.theme-preview-light {
  --background-color-fill-beta: var(--color-teal-500);
  --background-color-fill-beta-active: var(--color-teal-700);
  --background-color-fill-beta-hover: var(--color-teal-600);
  --background-color-fill-beta-secondary: var(--color-teal-50);
  --background-color-fill-beta-secondary-active: var(--color-teal-200);
  --background-color-fill-beta-secondary-hover: var(--color-teal-100);
  --background-color-fill-brand: var(--color-green-500);
  --background-color-fill-brand-active: var(--color-green-700);
  --background-color-fill-brand-hover: var(--color-green-600);
  --background-color-fill-brand-secondary: var(--color-green-50);
  --background-color-fill-brand-secondary-active: var(--color-green-200);
  --background-color-fill-brand-secondary-hover: var(--color-green-100);
  --background-color-fill-brand-tertiary: var(--color-green-25);
  --background-color-fill-brand-tertiary-active: var(--color-green-100);
  --background-color-fill-brand-tertiary-hover: var(--color-green-50);
  --background-color-fill-danger: var(--color-red-500);
  --background-color-fill-danger-active: var(--color-red-700);
  --background-color-fill-danger-hover: var(--color-red-600);
  --background-color-fill-danger-secondary: var(--color-red-50);
  --background-color-fill-danger-secondary-active: var(--color-red-200);
  --background-color-fill-danger-secondary-hover: var(--color-red-100);
  --background-color-fill-info: var(--color-blue-500);
  --background-color-fill-info-active: var(--color-blue-700);
  --background-color-fill-info-hover: var(--color-blue-600);
  --background-color-fill-info-secondary: var(--color-blue-50);
  --background-color-fill-info-secondary-active: var(--color-blue-200);
  --background-color-fill-info-secondary-hover: var(--color-blue-100);
  --background-color-fill-inverse: var(--color-gray-900);
  --background-color-fill-inverse-active: var(--color-gray-700);
  --background-color-fill-inverse-hover: var(--color-gray-800);
  --background-color-fill-inverse-secondary: var(--color-gray-600);
  --background-color-fill-inverse-secondary-active: var(--color-gray-400);
  --background-color-fill-inverse-secondary-hover: var(--color-gray-500);
  --background-color-fill-magic: var(--color-purple-500);
  --background-color-fill-magic-active: var(--color-purple-700);
  --background-color-fill-magic-hover: var(--color-purple-600);
  --background-color-fill-magic-secondary: var(--color-purple-50);
  --background-color-fill-magic-secondary-active: var(--color-purple-200);
  --background-color-fill-magic-secondary-hover: var(--color-purple-100);
  --background-color-fill-primary: var(--color-white);
  --background-color-fill-primary-active: var(--color-gray-50);
  --background-color-fill-primary-hover: var(--color-gray-25);
  --background-color-fill-secondary: var(--color-gray-25);
  --background-color-fill-secondary-active: var(--color-gray-100);
  --background-color-fill-secondary-hover: var(--color-gray-50);
  --background-color-fill-success: var(--color-green-500);
  --background-color-fill-success-active: var(--color-green-700);
  --background-color-fill-success-hover: var(--color-green-600);
  --background-color-fill-success-secondary: var(--color-green-50);
  --background-color-fill-success-secondary-active: var(--color-green-200);
  --background-color-fill-success-secondary-hover: var(--color-green-100);
  --background-color-fill-tertiary: var(--color-gray-50);
  --background-color-fill-tertiary-active: var(--color-gray-200);
  --background-color-fill-tertiary-hover: var(--color-gray-100);
  --background-color-fill-transparent: var(--color-black-alpha-0);
  --background-color-fill-transparent-active: var(--color-black-alpha-50);
  --background-color-fill-transparent-hover: var(--color-black-alpha-25);
  --background-color-fill-transparent-secondary: var(--color-black-alpha-50);
  --background-color-fill-transparent-secondary-active: var(--color-black-alpha-200);
  --background-color-fill-transparent-secondary-hover: var(--color-black-alpha-100);
  --background-color-fill-warning: var(--color-yellow-200);
  --background-color-fill-warning-active: var(--color-yellow-400);
  --background-color-fill-warning-hover: var(--color-yellow-300);
  --background-color-fill-warning-secondary: var(--color-yellow-50);
  --background-color-fill-warning-secondary-active: var(--color-yellow-200);
  --background-color-fill-warning-secondary-hover: var(--color-yellow-100);
  --background-color-primary: var(--color-gray-25);
  --background-color-surface-beta: var(--color-teal-25);
  --background-color-surface-brand: var(--color-green-25);
  --background-color-surface-danger: var(--color-red-25);
  --background-color-surface-elevated: var(--color-white);
  --background-color-surface-info: var(--color-blue-25);
  --background-color-surface-magic: var(--color-purple-25);
  --background-color-surface-primary: var(--color-white);
  --background-color-surface-secondary: var(--color-gray-25);
  --background-color-surface-success: var(--color-green-25);
  --background-color-surface-tertiary: var(--color-gray-50);
  --background-color-surface-warning: var(--color-yellow-25);
  --text-color-beta: var(--color-teal-600);
  --text-color-beta-large: var(--color-teal-500);
  --text-color-beta-on-bg-fill: var(--color-white);
  --text-color-brand: var(--color-green-600);
  --text-color-brand-large: var(--color-green-400);
  --text-color-brand-on-bg-fill: var(--color-white);
  --text-color-danger: var(--color-red-600);
  --text-color-danger-large: var(--color-red-500);
  --text-color-danger-on-bg-fill: var(--color-white);
  --text-color-disabled: var(--color-gray-200);
  --text-color-info: var(--color-blue-600);
  --text-color-info-large: var(--color-blue-500);
  --text-color-info-on-bg-fill: var(--color-white);
  --text-color-inverse: var(--color-white);
  --text-color-link: var(--color-green-600);
  --text-color-link-active: var(--color-green-800);
  --text-color-link-hover: var(--color-green-700);
  --text-color-magic: var(--color-purple-600);
  --text-color-magic-large: var(--color-purple-500);
  --text-color-magic-on-bg-fill: var(--color-white);
  --text-color-primary: var(--color-gray-950);
  --text-color-secondary: var(--color-gray-700);
  --text-color-success: var(--color-green-600);
  --text-color-success-large: var(--color-green-400);
  --text-color-success-on-bg-fill: var(--color-white);
  --text-color-tertiary: var(--color-gray-500);
  --text-color-warning: var(--color-yellow-600);
  --text-color-warning-large: var(--color-yellow-400);
  --text-color-warning-on-bg-fill: var(--color-yellow-975);
  --color-icon-beta: var(--color-teal-500);
  --color-icon-beta-on-bg-fill: var(--color-white);
  --color-icon-brand: var(--color-green-500);
  --color-icon-brand-on-bg-fill: var(--color-white);
  --color-icon-brand-secondary: var(--color-green-950);
  --color-icon-brand-tertiary: var(--color-green-200);
  --color-icon-danger: var(--color-red-500);
  --color-icon-danger-on-bg-fill: var(--color-white);
  --color-icon-disabled: var(--color-gray-200);
  --color-icon-info: var(--color-blue-500);
  --color-icon-info-on-bg-fill: var(--color-white);
  --color-icon-inverse: var(--color-white);
  --color-icon-link: var(--color-green-500);
  --color-icon-magic: var(--color-purple-500);
  --color-icon-magic-on-bg-fill: var(--color-white);
  --color-icon-primary: var(--color-gray-950);
  --color-icon-secondary: var(--color-gray-600);
  --color-icon-success: var(--color-green-500);
  --color-icon-success-on-bg-fill: var(--color-white);
  --color-icon-tertiary: var(--color-gray-400);
  --color-icon-warning: var(--color-yellow-400);
  --color-icon-warning-on-bg-fill: var(--color-yellow-900);
  --icon-color-beta: var(--color-teal-500);
  --icon-color-beta-on-bg-fill: var(--color-white);
  --icon-color-brand: var(--color-green-500);
  --icon-color-brand-on-bg-fill: var(--color-white);
  --icon-color-brand-secondary: var(--color-green-950);
  --icon-color-brand-tertiary: var(--color-green-200);
  --icon-color-danger: var(--color-red-500);
  --icon-color-danger-on-bg-fill: var(--color-white);
  --icon-color-disabled: var(--color-gray-200);
  --icon-color-info: var(--color-blue-500);
  --icon-color-info-on-bg-fill: var(--color-white);
  --icon-color-inverse: var(--color-white);
  --icon-color-link: var(--color-green-500);
  --icon-color-magic: var(--color-purple-500);
  --icon-color-magic-on-bg-fill: var(--color-white);
  --icon-color-primary: var(--color-gray-950);
  --icon-color-secondary: var(--color-gray-600);
  --icon-color-success: var(--color-green-500);
  --icon-color-success-on-bg-fill: var(--color-white);
  --icon-color-tertiary: var(--color-gray-400);
  --icon-color-warning: var(--color-yellow-400);
  --icon-color-warning-on-bg-fill: var(--color-yellow-900);
  --border-color-beta: var(--color-teal-500);
  --border-color-brand: var(--color-green-400);
  --border-color-danger: var(--color-red-400);
  --border-color-focus: var(--color-green-300);
  --border-color-info: var(--color-blue-400);
  --border-color-inverse: var(--color-gray-900);
  --border-color-inverse-secondary: var(--color-gray-600);
  --border-color-magic: var(--color-purple-500);
  --border-color-primary: var(--color-gray-100);
  --border-color-secondary: var(--color-gray-50);
  --border-color-success: var(--color-green-400);
  --border-color-tertiary: var(--color-gray-25);
}

/* ══ SEMANTIC · DARK — note: scoped to BODY, not html ══ */
body:where(.dark,.dark *) {
  --background-color-fill-beta: var(--color-teal-400);
  --background-color-fill-beta-active: var(--color-teal-600);
  --background-color-fill-beta-hover: var(--color-teal-500);
  --background-color-fill-beta-secondary: var(--color-teal-800);
  --background-color-fill-beta-secondary-active: var(--color-teal-600);
  --background-color-fill-beta-secondary-hover: var(--color-teal-700);
  --background-color-fill-brand: var(--color-green-400);
  --background-color-fill-brand-active: var(--color-green-600);
  --background-color-fill-brand-hover: var(--color-green-500);
  --background-color-fill-brand-secondary: var(--color-green-800);
  --background-color-fill-brand-secondary-active: var(--color-green-600);
  --background-color-fill-brand-secondary-hover: var(--color-green-700);
  --background-color-fill-brand-tertiary: var(--color-green-900);
  --background-color-fill-brand-tertiary-active: var(--color-green-700);
  --background-color-fill-brand-tertiary-hover: var(--color-green-800);
  --background-color-fill-danger: var(--color-red-400);
  --background-color-fill-danger-active: var(--color-red-600);
  --background-color-fill-danger-hover: var(--color-red-500);
  --background-color-fill-danger-secondary: var(--color-red-800);
  --background-color-fill-danger-secondary-active: var(--color-red-600);
  --background-color-fill-danger-secondary-hover: var(--color-red-700);
  --background-color-fill-info: var(--color-blue-400);
  --background-color-fill-info-active: var(--color-blue-600);
  --background-color-fill-info-hover: var(--color-blue-500);
  --background-color-fill-info-secondary: var(--color-blue-800);
  --background-color-fill-info-secondary-active: var(--color-blue-600);
  --background-color-fill-info-secondary-hover: var(--color-blue-700);
  --background-color-fill-inverse: var(--color-gray-25);
  --background-color-fill-inverse-active: var(--color-gray-100);
  --background-color-fill-inverse-hover: var(--color-gray-50);
  --background-color-fill-inverse-secondary: var(--color-gray-400);
  --background-color-fill-inverse-secondary-active: var(--color-gray-600);
  --background-color-fill-inverse-secondary-hover: var(--color-gray-500);
  --background-color-fill-magic: var(--color-purple-400);
  --background-color-fill-magic-active: var(--color-purple-600);
  --background-color-fill-magic-hover: var(--color-purple-500);
  --background-color-fill-magic-secondary: var(--color-purple-800);
  --background-color-fill-magic-secondary-active: var(--color-purple-600);
  --background-color-fill-magic-secondary-hover: var(--color-purple-700);
  --background-color-fill-primary: var(--color-gray-900);
  --background-color-fill-primary-active: var(--color-gray-700);
  --background-color-fill-primary-hover: var(--color-gray-800);
  --background-color-fill-secondary: var(--color-gray-900);
  --background-color-fill-secondary-active: var(--color-gray-700);
  --background-color-fill-secondary-hover: var(--color-gray-800);
  --background-color-fill-success: var(--color-green-400);
  --background-color-fill-success-active: var(--color-green-600);
  --background-color-fill-success-hover: var(--color-green-500);
  --background-color-fill-success-secondary: var(--color-green-800);
  --background-color-fill-success-secondary-active: var(--color-green-600);
  --background-color-fill-success-secondary-hover: var(--color-green-700);
  --background-color-fill-tertiary: var(--color-gray-800);
  --background-color-fill-tertiary-active: var(--color-gray-600);
  --background-color-fill-tertiary-hover: var(--color-gray-700);
  --background-color-fill-transparent: var(--color-white-alpha-1000);
  --background-color-fill-transparent-active: var(--color-white-alpha-950);
  --background-color-fill-transparent-hover: var(--color-white-alpha-975);
  --background-color-fill-transparent-secondary: var(--color-white-alpha-950);
  --background-color-fill-transparent-secondary-active: var(--color-white-alpha-800);
  --background-color-fill-transparent-secondary-hover: var(--color-white-alpha-900);
  --background-color-fill-warning: var(--color-yellow-300);
  --background-color-fill-warning-active: var(--color-yellow-500);
  --background-color-fill-warning-hover: var(--color-yellow-400);
  --background-color-fill-warning-secondary: var(--color-yellow-800);
  --background-color-fill-warning-secondary-active: var(--color-yellow-600);
  --background-color-fill-warning-secondary-hover: var(--color-yellow-700);
  --background-color-primary: var(--color-gray-975);
  --background-color-surface-beta: var(--color-teal-950);
  --background-color-surface-brand: var(--color-green-950);
  --background-color-surface-danger: var(--color-red-950);
  --background-color-surface-elevated: var(--color-gray-900);
  --background-color-surface-info: var(--color-blue-950);
  --background-color-surface-magic: var(--color-purple-950);
  --background-color-surface-primary: var(--color-gray-950);
  --background-color-surface-secondary: var(--color-gray-900);
  --background-color-surface-success: var(--color-green-950);
  --background-color-surface-tertiary: var(--color-gray-800);
  --background-color-surface-warning: var(--color-yellow-950);
  --text-color-beta: var(--color-teal-300);
  --text-color-beta-large: var(--color-teal-400);
  --text-color-beta-on-bg-fill: var(--color-teal-975);
  --text-color-brand: var(--color-green-300);
  --text-color-brand-large: var(--color-green-300);
  --text-color-brand-on-bg-fill: var(--color-green-975);
  --text-color-danger: var(--color-red-300);
  --text-color-danger-large: var(--color-red-400);
  --text-color-danger-on-bg-fill: var(--color-red-975);
  --text-color-disabled: var(--color-gray-800);
  --text-color-info: var(--color-blue-300);
  --text-color-info-large: var(--color-blue-300);
  --text-color-info-on-bg-fill: var(--color-blue-975);
  --text-color-inverse: var(--color-gray-950);
  --text-color-link: var(--color-green-300);
  --text-color-link-active: var(--color-green-500);
  --text-color-link-hover: var(--color-green-400);
  --text-color-magic: var(--color-purple-300);
  --text-color-magic-large: var(--color-purple-400);
  --text-color-magic-on-bg-fill: var(--color-purple-975);
  --text-color-primary: var(--color-gray-25);
  --text-color-secondary: var(--color-gray-300);
  --text-color-success: var(--color-green-300);
  --text-color-success-large: var(--color-green-300);
  --text-color-success-on-bg-fill: var(--color-green-975);
  --text-color-tertiary: var(--color-gray-500);
  --text-color-warning: var(--color-yellow-300);
  --text-color-warning-large: var(--color-yellow-300);
  --text-color-warning-on-bg-fill: var(--color-yellow-975);
  --color-icon-beta: var(--color-teal-400);
  --color-icon-beta-on-bg-fill: var(--color-teal-975);
  --color-icon-brand: var(--color-green-300);
  --color-icon-brand-on-bg-fill: var(--color-green-975);
  --color-icon-brand-secondary: var(--color-green-25);
  --color-icon-brand-tertiary: var(--color-green-200);
  --color-icon-danger: var(--color-red-400);
  --color-icon-danger-on-bg-fill: var(--color-red-975);
  --color-icon-disabled: var(--color-gray-700);
  --color-icon-info: var(--color-blue-400);
  --color-icon-info-on-bg-fill: var(--color-blue-975);
  --color-icon-inverse: var(--color-gray-950);
  --color-icon-link: var(--color-green-300);
  --color-icon-magic: var(--color-purple-400);
  --color-icon-magic-on-bg-fill: var(--color-purple-975);
  --color-icon-primary: var(--color-gray-25);
  --color-icon-secondary: var(--color-gray-300);
  --color-icon-success: var(--color-green-300);
  --color-icon-success-on-bg-fill: var(--color-green-975);
  --color-icon-tertiary: var(--color-gray-500);
  --color-icon-warning: var(--color-yellow-300);
  --color-icon-warning-on-bg-fill: var(--color-yellow-975);
  --icon-color-beta: var(--color-teal-400);
  --icon-color-beta-on-bg-fill: var(--color-teal-975);
  --icon-color-brand: var(--color-green-300);
  --icon-color-brand-on-bg-fill: var(--color-green-975);
  --icon-color-brand-secondary: var(--color-green-25);
  --icon-color-brand-tertiary: var(--color-green-200);
  --icon-color-danger: var(--color-red-400);
  --icon-color-danger-on-bg-fill: var(--color-red-975);
  --icon-color-disabled: var(--color-gray-700);
  --icon-color-info: var(--color-blue-400);
  --icon-color-info-on-bg-fill: var(--color-blue-975);
  --icon-color-inverse: var(--color-gray-950);
  --icon-color-link: var(--color-green-300);
  --icon-color-magic: var(--color-purple-400);
  --icon-color-magic-on-bg-fill: var(--color-purple-975);
  --icon-color-primary: var(--color-gray-25);
  --icon-color-secondary: var(--color-gray-300);
  --icon-color-success: var(--color-green-300);
  --icon-color-success-on-bg-fill: var(--color-green-975);
  --icon-color-tertiary: var(--color-gray-500);
  --icon-color-warning: var(--color-yellow-300);
  --icon-color-warning-on-bg-fill: var(--color-yellow-975);
  --border-color-beta: var(--color-teal-400);
  --border-color-brand: var(--color-green-400);
  --border-color-danger: var(--color-red-400);
  --border-color-focus: var(--color-green-400);
  --border-color-info: var(--color-blue-400);
  --border-color-inverse: var(--color-gray-100);
  --border-color-inverse-secondary: var(--color-gray-400);
  --border-color-magic: var(--color-purple-400);
  --border-color-primary: var(--color-gray-800);
  --border-color-secondary: var(--color-gray-900);
  --border-color-success: var(--color-green-400);
  --border-color-tertiary: var(--color-gray-950);
  --border-color-warning: var(--color-yellow-300)--background-color-fill-beta-active:var(--color-teal-600);
}

/* ══ settings-page preview swatches only — NOT the app switch ══ */
.theme-preview-dark {
  --background-color-fill-beta: var(--color-teal-400);
  --background-color-fill-beta-active: var(--color-teal-600);
  --background-color-fill-beta-hover: var(--color-teal-500);
  --background-color-fill-beta-secondary: var(--color-teal-800);
  --background-color-fill-beta-secondary-active: var(--color-teal-600);
  --background-color-fill-beta-secondary-hover: var(--color-teal-700);
  --background-color-fill-brand: var(--color-green-400);
  --background-color-fill-brand-active: var(--color-green-600);
  --background-color-fill-brand-hover: var(--color-green-500);
  --background-color-fill-brand-secondary: var(--color-green-800);
  --background-color-fill-brand-secondary-active: var(--color-green-600);
  --background-color-fill-brand-secondary-hover: var(--color-green-700);
  --background-color-fill-brand-tertiary: var(--color-green-900);
  --background-color-fill-brand-tertiary-active: var(--color-green-700);
  --background-color-fill-brand-tertiary-hover: var(--color-green-800);
  --background-color-fill-danger: var(--color-red-400);
  --background-color-fill-danger-active: var(--color-red-600);
  --background-color-fill-danger-hover: var(--color-red-500);
  --background-color-fill-danger-secondary: var(--color-red-800);
  --background-color-fill-danger-secondary-active: var(--color-red-600);
  --background-color-fill-danger-secondary-hover: var(--color-red-700);
  --background-color-fill-info: var(--color-blue-400);
  --background-color-fill-info-active: var(--color-blue-600);
  --background-color-fill-info-hover: var(--color-blue-500);
  --background-color-fill-info-secondary: var(--color-blue-800);
  --background-color-fill-info-secondary-active: var(--color-blue-600);
  --background-color-fill-info-secondary-hover: var(--color-blue-700);
  --background-color-fill-inverse: var(--color-gray-25);
  --background-color-fill-inverse-active: var(--color-gray-100);
  --background-color-fill-inverse-hover: var(--color-gray-50);
  --background-color-fill-inverse-secondary: var(--color-gray-400);
  --background-color-fill-inverse-secondary-active: var(--color-gray-600);
  --background-color-fill-inverse-secondary-hover: var(--color-gray-500);
  --background-color-fill-magic: var(--color-purple-400);
  --background-color-fill-magic-active: var(--color-purple-600);
  --background-color-fill-magic-hover: var(--color-purple-500);
  --background-color-fill-magic-secondary: var(--color-purple-800);
  --background-color-fill-magic-secondary-active: var(--color-purple-600);
  --background-color-fill-magic-secondary-hover: var(--color-purple-700);
  --background-color-fill-primary: var(--color-gray-900);
  --background-color-fill-primary-active: var(--color-gray-700);
  --background-color-fill-primary-hover: var(--color-gray-800);
  --background-color-fill-secondary: var(--color-gray-900);
  --background-color-fill-secondary-active: var(--color-gray-700);
  --background-color-fill-secondary-hover: var(--color-gray-800);
  --background-color-fill-success: var(--color-green-400);
  --background-color-fill-success-active: var(--color-green-600);
  --background-color-fill-success-hover: var(--color-green-500);
  --background-color-fill-success-secondary: var(--color-green-800);
  --background-color-fill-success-secondary-active: var(--color-green-600);
  --background-color-fill-success-secondary-hover: var(--color-green-700);
  --background-color-fill-tertiary: var(--color-gray-800);
  --background-color-fill-tertiary-active: var(--color-gray-600);
  --background-color-fill-tertiary-hover: var(--color-gray-700);
  --background-color-fill-transparent: var(--color-white-alpha-1000);
  --background-color-fill-transparent-active: var(--color-white-alpha-950);
  --background-color-fill-transparent-hover: var(--color-white-alpha-975);
  --background-color-fill-transparent-secondary: var(--color-white-alpha-950);
  --background-color-fill-transparent-secondary-active: var(--color-white-alpha-800);
  --background-color-fill-transparent-secondary-hover: var(--color-white-alpha-900);
  --background-color-fill-warning: var(--color-yellow-300);
  --background-color-fill-warning-active: var(--color-yellow-500);
  --background-color-fill-warning-hover: var(--color-yellow-400);
  --background-color-fill-warning-secondary: var(--color-yellow-800);
  --background-color-fill-warning-secondary-active: var(--color-yellow-600);
  --background-color-fill-warning-secondary-hover: var(--color-yellow-700);
  --background-color-primary: var(--color-gray-975);
  --background-color-surface-beta: var(--color-teal-950);
  --background-color-surface-brand: var(--color-green-950);
  --background-color-surface-danger: var(--color-red-950);
  --background-color-surface-elevated: var(--color-gray-900);
  --background-color-surface-info: var(--color-blue-950);
  --background-color-surface-magic: var(--color-purple-950);
  --background-color-surface-primary: var(--color-gray-950);
  --background-color-surface-secondary: var(--color-gray-900);
  --background-color-surface-success: var(--color-green-950);
  --background-color-surface-tertiary: var(--color-gray-800);
  --background-color-surface-warning: var(--color-yellow-950);
  --text-color-beta: var(--color-teal-300);
  --text-color-beta-large: var(--color-teal-400);
  --text-color-beta-on-bg-fill: var(--color-teal-975);
  --text-color-brand: var(--color-green-300);
  --text-color-brand-large: var(--color-green-300);
  --text-color-brand-on-bg-fill: var(--color-green-975);
  --text-color-danger: var(--color-red-300);
  --text-color-danger-large: var(--color-red-400);
  --text-color-danger-on-bg-fill: var(--color-red-975);
  --text-color-disabled: var(--color-gray-800);
  --text-color-info: var(--color-blue-300);
  --text-color-info-large: var(--color-blue-300);
  --text-color-info-on-bg-fill: var(--color-blue-975);
  --text-color-inverse: var(--color-gray-950);
  --text-color-link: var(--color-green-300);
  --text-color-link-active: var(--color-green-500);
  --text-color-link-hover: var(--color-green-400);
  --text-color-magic: var(--color-purple-300);
  --text-color-magic-large: var(--color-purple-400);
  --text-color-magic-on-bg-fill: var(--color-purple-975);
  --text-color-primary: var(--color-gray-25);
  --text-color-secondary: var(--color-gray-300);
  --text-color-success: var(--color-green-300);
  --text-color-success-large: var(--color-green-300);
  --text-color-success-on-bg-fill: var(--color-green-975);
  --text-color-tertiary: var(--color-gray-500);
  --text-color-warning: var(--color-yellow-300);
  --text-color-warning-large: var(--color-yellow-300);
  --text-color-warning-on-bg-fill: var(--color-yellow-975);
  --color-icon-beta: var(--color-teal-400);
  --color-icon-beta-on-bg-fill: var(--color-teal-975);
  --color-icon-brand: var(--color-green-300);
  --color-icon-brand-on-bg-fill: var(--color-green-975);
  --color-icon-brand-secondary: var(--color-green-25);
  --color-icon-brand-tertiary: var(--color-green-200);
  --color-icon-danger: var(--color-red-400);
  --color-icon-danger-on-bg-fill: var(--color-red-975);
  --color-icon-disabled: var(--color-gray-700);
  --color-icon-info: var(--color-blue-400);
  --color-icon-info-on-bg-fill: var(--color-blue-975);
  --color-icon-inverse: var(--color-gray-950);
  --color-icon-link: var(--color-green-300);
  --color-icon-magic: var(--color-purple-400);
  --color-icon-magic-on-bg-fill: var(--color-purple-975);
  --color-icon-primary: var(--color-gray-25);
  --color-icon-secondary: var(--color-gray-300);
  --color-icon-success: var(--color-green-300);
  --color-icon-success-on-bg-fill: var(--color-green-975);
  --color-icon-tertiary: var(--color-gray-500);
  --color-icon-warning: var(--color-yellow-300);
  --color-icon-warning-on-bg-fill: var(--color-yellow-975);
  --icon-color-beta: var(--color-teal-400);
  --icon-color-beta-on-bg-fill: var(--color-teal-975);
  --icon-color-brand: var(--color-green-300);
  --icon-color-brand-on-bg-fill: var(--color-green-975);
  --icon-color-brand-secondary: var(--color-green-25);
  --icon-color-brand-tertiary: var(--color-green-200);
  --icon-color-danger: var(--color-red-400);
  --icon-color-danger-on-bg-fill: var(--color-red-975);
  --icon-color-disabled: var(--color-gray-700);
  --icon-color-info: var(--color-blue-400);
  --icon-color-info-on-bg-fill: var(--color-blue-975);
  --icon-color-inverse: var(--color-gray-950);
  --icon-color-link: var(--color-green-300);
  --icon-color-magic: var(--color-purple-400);
  --icon-color-magic-on-bg-fill: var(--color-purple-975);
  --icon-color-primary: var(--color-gray-25);
  --icon-color-secondary: var(--color-gray-300);
  --icon-color-success: var(--color-green-300);
  --icon-color-success-on-bg-fill: var(--color-green-975);
  --icon-color-tertiary: var(--color-gray-500);
  --icon-color-warning: var(--color-yellow-300);
  --icon-color-warning-on-bg-fill: var(--color-yellow-975);
  --border-color-beta: var(--color-teal-400);
  --border-color-brand: var(--color-green-400);
  --border-color-danger: var(--color-red-400);
  --border-color-focus: var(--color-green-400);
  --border-color-info: var(--color-blue-400);
  --border-color-inverse: var(--color-gray-100);
  --border-color-inverse-secondary: var(--color-gray-400);
  --border-color-magic: var(--color-purple-400);
  --border-color-primary: var(--color-gray-800);
  --border-color-secondary: var(--color-gray-900);
  --border-color-success: var(--color-green-400);
  --border-color-tertiary: var(--color-gray-950);
}

/* ── vendor/theme-drivara.css ─────────────────────────── */
/**
 * Drivara — the re-skin.
 *
 * The Fleetio replica resolves everything through one token layer, so changing
 * the brand is this file and nothing else: no markup, no component CSS, no
 * per-screen edits. Load it AFTER tokens.css.
 *
 * The ramp is derived, not picked. Each of Fleetio's twelve green steps was
 * converted to OKLCH, its LIGHTNESS held exactly, its hue set to Drivara's, and
 * its chroma scaled by one factor so step 500 lands on #006DF0. Their tonal
 * rhythm survives intact — which is why brand-400 comes out #2384ff, almost
 * exactly the Drivara mark #1D84FF, mirroring the relationship their own mark
 * has to their action colour.
 *
 * ONE DELIBERATE DIVERGENCE. In Fleetio, brand and success are the SAME green:
 * --background-color-fill-brand and --background-color-fill-success both
 * resolve to green-500. Drivara separates them — blue is identity, green means
 * settled — so the brand-role tokens below are repointed at the blue ramp while
 * every success-role token is left on green.
 */

:root {
  --color-brand-25: #e3f6ff;
  --color-brand-50: #c1e7ff;
  --color-brand-100: #96d2ff;
  --color-brand-200: #6ebaff;
  --color-brand-300: #47a0ff;
  --color-brand-400: #2384ff;
  --color-brand-500: #0068eb;
  --color-brand-600: #0c5dc9;
  --color-brand-700: #1552a8;
  --color-brand-800: #184381;
  --color-brand-900: #16315a;
  --color-brand-950: #0f223e;
  --color-brand-975: #09172b;
}

/* brand-role semantics move to blue; success stays green */
:root, :root,.theme-preview-light {
  --background-color-fill-brand: var(--color-brand-500);
  --background-color-fill-brand-active: var(--color-brand-700);
  --background-color-fill-brand-hover: var(--color-brand-600);
  --background-color-fill-brand-secondary: var(--color-brand-50);
  --background-color-fill-brand-secondary-active: var(--color-brand-200);
  --background-color-fill-brand-secondary-hover: var(--color-brand-100);
  --background-color-fill-brand-tertiary: var(--color-brand-25);
  --background-color-fill-brand-tertiary-active: var(--color-brand-100);
  --background-color-fill-brand-tertiary-hover: var(--color-brand-50);
  --background-color-surface-brand: var(--color-brand-25);
  --border-color-brand: var(--color-brand-400);
  --color-icon-brand: var(--color-brand-500);
  --color-icon-brand-on-bg-fill: var(--color-brand-975);
  --color-icon-brand-secondary: var(--color-brand-950);
  --color-icon-brand-tertiary: var(--color-brand-200);
  --icon-color-brand: var(--color-brand-500);
  --icon-color-brand-on-bg-fill: var(--color-brand-975);
  --icon-color-brand-secondary: var(--color-brand-950);
  --icon-color-brand-tertiary: var(--color-brand-200);
  --text-color-brand: var(--color-brand-600);
  --text-color-brand-large: var(--color-brand-400);
  --text-color-brand-on-bg-fill: var(--color-brand-975);
}

body:where(.dark,.dark *) {
  --background-color-fill-brand: var(--color-brand-400);
  --background-color-fill-brand-active: var(--color-brand-600);
  --background-color-fill-brand-hover: var(--color-brand-500);
  --background-color-fill-brand-secondary: var(--color-brand-800);
  --background-color-fill-brand-secondary-active: var(--color-brand-600);
  --background-color-fill-brand-secondary-hover: var(--color-brand-700);
  --background-color-fill-brand-tertiary: var(--color-brand-900);
  --background-color-fill-brand-tertiary-active: var(--color-brand-700);
  --background-color-fill-brand-tertiary-hover: var(--color-brand-800);
  --background-color-surface-brand: var(--color-brand-950);
  --border-color-brand: var(--color-brand-400);
  --color-icon-brand: var(--color-brand-300);
  --color-icon-brand-on-bg-fill: var(--color-brand-975);
  --color-icon-brand-secondary: var(--color-brand-25);
  --color-icon-brand-tertiary: var(--color-brand-200);
  --icon-color-brand: var(--color-brand-300);
  --icon-color-brand-on-bg-fill: var(--color-brand-975);
  --icon-color-brand-secondary: var(--color-brand-25);
  --icon-color-brand-tertiary: var(--color-brand-200);
  --text-color-brand: var(--color-brand-300);
  --text-color-brand-large: var(--color-brand-300);
  --text-color-brand-on-bg-fill: var(--color-brand-975);
}

/* ── vendor/tokens-ext.css ─────────────────────────── */
/**
 * Tokens WE add, following their pattern exactly.
 *
 * Fleetio's semantic tokens are defined once per theme context, so a component
 * never names a palette colour directly and every value flips with the theme.
 * Anything the replica adds must do the same: a literal — or a palette value
 * like --color-gray-800 used straight — cannot follow a re-skin and does not
 * flip in dark mode, which is how help text ends up invisible on a dark ground.
 *
 * Loaded straight after tokens.css so their four selector contexts are already
 * established and these simply extend the set.
 */

/* Form and record help text: DARKER than the list grey (--text-color-secondary)
 * because a form asks you to read its help and an index does not.
 * Measured at #464747 = --color-gray-800 in 04-new-work-order-form. */
:root, :host                     { --text-color-body: var(--color-gray-800); }
:root, .theme-preview-light      { --text-color-body: var(--color-gray-800); }
body:where(.dark, .dark *)       { --text-color-body: var(--color-gray-200); }
.theme-preview-dark              { --text-color-body: var(--color-gray-200); }

/* ── vendor/fds.css ─────────────────────────── */
/* Fleetio Design System — every .fds-* rule, extracted from application_react_styles */

.fds-button {
  --fds-button-background:var(--background-color-fill-primary);
  --fds-button-background-hover:var(--background-color-fill-primary-hover);
  --fds-button-background-active:var(--background-color-fill-primary-active);
  --fds-button-border-color:var(--border-color-primary);
  --fds-button-border-color-hover:var(--border-color-primary);
  --fds-button-border-color-active:var(--border-color-primary);
  --fds-button-color:var(--text-color-primary);
  --fds-button-color-hover:var(--text-color-primary);
  --fds-button-color-active:var(--text-color-primary);
  --fds-button-radius:var(--radius-md);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:#fff;
  background-color:var(--fds-button-background);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--fds-button-border-color);
  border-radius:6px;
  border-radius:var(--fds-button-radius);
  color:var(--fds-button-color);
  cursor:pointer;
  font-weight:500;
  font-weight:var(--font-weight-medium);
  vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  justify-content:center;
  align-items:center;
  max-width:100%;
  text-decoration:none;
  transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,color .15s ease-in-out;
  display:inline-flex
}

.fds-button:hover {
  background-color:var(--fds-button-background-hover);
  border-color:var(--fds-button-border-color-hover);
  color:var(--fds-button-color-hover)
}

.fds-button:active {
  background-color:var(--fds-button-background-active);
  border-color:var(--fds-button-border-color-active);
  color:var(--fds-button-color-active)
}

.fds-button:focus-visible {
  outline:2px solid #4fbd81;
  outline:var(--border-width-border-2,2px) solid var(--border-color-focus);
  outline-offset:2px
}

.fds-button--skip-focus:focus {
  box-shadow:none!important;
  outline:none!important
}

.fds-button--skip-focus:focus-visible {
  box-shadow:none!important;
  outline:none!important
}

.fds-button--xs {
  font-size:10px;
  font-size:var(--font-size-xs);
  height:1.5rem;
  line-height:12px;
  line-height:var(--font-line-height-3);
  padding-inline-start:4px;
  padding-inline-end:4px;
  padding-inline:var(--spacing-3)
}

.fds-button--sm {
  font-size:12px;
  font-size:var(--font-size-sm);
  height:1.75rem;
  line-height:16px;
  line-height:var(--font-line-height-4);
  padding-inline-start:8px;
  padding-inline-end:8px;
  padding-inline:var(--spacing-4)
}

.fds-button--md {
  font-size:13px;
  font-size:var(--font-size-md);
  height:2rem;
  line-height:20px;
  line-height:var(--font-line-height-5);
  padding-inline-start:8px;
  padding-inline-end:8px;
  padding-inline:var(--spacing-4)
}

.fds-button--lg {
  font-size:var(--font-size-default);
  height:2.25rem;
  line-height:20px;
  line-height:var(--font-line-height-5);
  padding-inline-start:16px;
  padding-inline-end:16px;
  padding-inline:var(--spacing-6)
}

.fds-button--icon-only.fds-button--sm {
  padding-inline-start:4px;
  padding-inline-end:4px;
  padding-inline:var(--spacing-3)
}

.fds-button--full-width {
  width:100%
}

.fds-button--start {
  justify-content:flex-start
}

.fds-button--center {
  justify-content:center
}

.fds-button--end {
  justify-content:flex-end
}

.fds-button--floating {
  box-shadow:0 12px 24px #0003,0 2px 4px #0000000d,0 0 1px #0000004d;
  box-shadow:var(--shadow-menu)
}

.fds-button--no-wrap {
  white-space:nowrap
}

.fds-button--grouped {
  border-radius:0
}

.fds-button--grouped:not(.fds-button--vertical) {
  margin-left:-1px;
  margin-left:calc(var(--spacing-1) * -1)
}

.fds-button--grouped:not(.fds-button--vertical):first-child {
  border-bottom-left-radius:6px;
  border-bottom-left-radius:var(--radius-md);
  border-top-left-radius:6px;
  border-top-left-radius:var(--radius-md);
  margin-left:0
}

.fds-button--grouped:not(.fds-button--vertical):last-child {
  border-bottom-right-radius:6px;
  border-bottom-right-radius:var(--radius-md);
  border-top-right-radius:6px;
  border-top-right-radius:var(--radius-md)
}

.fds-button--grouped.fds-button--vertical {
  margin-top:-1px;
  margin-top:calc(var(--spacing-1) * -1)
}

.fds-button--grouped.fds-button--vertical:first-child {
  border-top-left-radius:6px;
  border-top-left-radius:var(--radius-md);
  border-top-right-radius:6px;
  border-top-right-radius:var(--radius-md);
  margin-top:0
}

.fds-button--grouped.fds-button--vertical:last-child {
  border-bottom-left-radius:6px;
  border-bottom-left-radius:var(--radius-md);
  border-bottom-right-radius:6px;
  border-bottom-right-radius:var(--radius-md)
}

.fds-button--disabled {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
  border-color:#e7e7e7;
  border-color:var(--border-color-secondary);
  color:var(--text-color-tertiary);
  opacity:.75
}

.fds-button--disabled:not(.fds-button--has-tooltips) {
  cursor:not-allowed;
  pointer-events:none
}

.fds-button--has-tooltips {
  cursor:auto
}

.fds-button--nav {
  border-radius:0
}

.fds-button--disabled:hover,.fds-button--disabled:active {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
  border-color:#e7e7e7;
  border-color:var(--border-color-secondary);
  color:var(--text-color-tertiary)
}

.fds-button__content {
  align-items:center;
  justify-content:inherit;
  width:100%;
  min-width:0;
  display:inline-flex
}

.fds-button__label {
  text-overflow:ellipsis;
  min-width:0;
  overflow:hidden
}

.fds-button__icon {
  flex-shrink:0;
  align-items:center;
  display:inline-flex
}

.fds-button__icon--start {
  margin-inline-end:4px;
  margin-inline-end:var(--spacing-3)
}

.fds-button__icon--end {
  margin-inline-start:4px;
  margin-inline-start:var(--spacing-3)
}

.fds-button svg.spark-icon:not(.custom-color) {
  color:var(--fds-button-icon-color,currentColor)
}

.fds-button__label--responsive {
  visibility:hidden;
  width:0
}

.fds-button__icon--responsive-start {
  margin-inline-end:0
}

.fds-button__icon--responsive-end {
  margin-inline-start:0
}

.fds-button__label--responsive {
  visibility:visible;
  width:auto
}

.fds-button--role-default {
  --fds-button-background:var(--background-color-fill-primary);
  --fds-button-background-hover:var(--background-color-fill-primary-hover);
  --fds-button-background-active:var(--background-color-fill-primary-active);
  --fds-button-border-color:var(--border-color-primary);
  --fds-button-border-color-hover:var(--border-color-primary);
  --fds-button-border-color-active:var(--border-color-primary);
  --fds-button-color:var(--text-color-primary);
  --fds-button-color-hover:var(--text-color-primary);
  --fds-button-color-active:var(--text-color-primary)
}

.fds-button--role-brand {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-brand);
  --fds-button-border-color-hover:var(--border-color-brand);
  --fds-button-border-color-active:var(--border-color-brand);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-link-hover);
  --fds-button-color-active:var(--text-color-link-active)
}

.fds-button--role-info {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-info);
  --fds-button-border-color-hover:var(--border-color-info);
  --fds-button-border-color-active:var(--border-color-info);
  --fds-button-color:var(--text-color-info);
  --fds-button-color-hover:var(--text-color-info);
  --fds-button-color-active:var(--text-color-info)
}

.fds-button--role-success {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-success);
  --fds-button-border-color-hover:var(--border-color-success);
  --fds-button-border-color-active:var(--border-color-success);
  --fds-button-color:var(--text-color-success);
  --fds-button-color-hover:var(--text-color-success);
  --fds-button-color-active:var(--text-color-success)
}

.fds-button--role-warning {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-warning);
  --fds-button-border-color-hover:var(--border-color-warning);
  --fds-button-border-color-active:var(--border-color-warning);
  --fds-button-color:var(--text-color-warning);
  --fds-button-color-hover:var(--text-color-warning);
  --fds-button-color-active:var(--text-color-warning)
}

.fds-button--role-danger {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-danger);
  --fds-button-border-color-hover:var(--border-color-danger);
  --fds-button-border-color-active:var(--border-color-danger);
  --fds-button-color:var(--text-color-danger);
  --fds-button-color-hover:var(--text-color-danger);
  --fds-button-color-active:var(--text-color-danger)
}

.fds-button--role-magic {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-magic);
  --fds-button-border-color-hover:var(--border-color-magic);
  --fds-button-border-color-active:var(--border-color-magic);
  --fds-button-color:var(--text-color-magic);
  --fds-button-color-hover:var(--text-color-magic);
  --fds-button-color-active:var(--text-color-magic)
}

.fds-button--variant-primary.fds-button--role-default {
  --fds-button-background:var(--background-color-fill-inverse);
  --fds-button-background-hover:var(--background-color-fill-inverse-hover);
  --fds-button-background-active:var(--background-color-fill-inverse-active);
  --fds-button-border-color:var(--background-color-fill-inverse);
  --fds-button-border-color-hover:var(--background-color-fill-inverse-hover);
  --fds-button-border-color-active:var(--background-color-fill-inverse-active);
  --fds-button-color:var(--text-color-inverse);
  --fds-button-color-hover:var(--text-color-inverse);
  --fds-button-color-active:var(--text-color-inverse);
  --fds-button-icon-color:var(--icon-color-inverse)
}

.fds-button--variant-primary.fds-button--role-brand {
  --fds-button-background:var(--background-color-fill-brand);
  --fds-button-background-hover:var(--background-color-fill-brand-hover);
  --fds-button-background-active:var(--background-color-fill-brand-active);
  --fds-button-border-color:var(--background-color-fill-brand);
  --fds-button-border-color-hover:var(--background-color-fill-brand-hover);
  --fds-button-border-color-active:var(--background-color-fill-brand-active);
  --fds-button-color:var(--text-color-brand-on-bg-fill);
  --fds-button-color-hover:var(--text-color-brand-on-bg-fill);
  --fds-button-color-active:var(--text-color-brand-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-brand-on-bg-fill)
}

.fds-button--variant-primary.fds-button--role-info {
  --fds-button-background:var(--background-color-fill-info);
  --fds-button-background-hover:var(--background-color-fill-info-hover);
  --fds-button-background-active:var(--background-color-fill-info-active);
  --fds-button-border-color:var(--background-color-fill-info);
  --fds-button-border-color-hover:var(--background-color-fill-info-hover);
  --fds-button-border-color-active:var(--background-color-fill-info-active);
  --fds-button-color:var(--text-color-info-on-bg-fill);
  --fds-button-color-hover:var(--text-color-info-on-bg-fill);
  --fds-button-color-active:var(--text-color-info-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-info-on-bg-fill)
}

.fds-button--variant-primary.fds-button--role-success {
  --fds-button-background:var(--background-color-fill-success);
  --fds-button-background-hover:var(--background-color-fill-success-hover);
  --fds-button-background-active:var(--background-color-fill-success-active);
  --fds-button-border-color:var(--background-color-fill-success);
  --fds-button-border-color-hover:var(--background-color-fill-success-hover);
  --fds-button-border-color-active:var(--background-color-fill-success-active);
  --fds-button-color:var(--text-color-success-on-bg-fill);
  --fds-button-color-hover:var(--text-color-success-on-bg-fill);
  --fds-button-color-active:var(--text-color-success-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-success-on-bg-fill)
}

.fds-button--variant-primary.fds-button--role-warning {
  --fds-button-background:var(--background-color-fill-warning);
  --fds-button-background-hover:var(--background-color-fill-warning-hover);
  --fds-button-background-active:var(--background-color-fill-warning-active);
  --fds-button-border-color:var(--background-color-fill-warning);
  --fds-button-border-color-hover:var(--background-color-fill-warning-hover);
  --fds-button-border-color-active:var(--background-color-fill-warning-active);
  --fds-button-color:var(--text-color-warning-on-bg-fill);
  --fds-button-color-hover:var(--text-color-warning-on-bg-fill);
  --fds-button-color-active:var(--text-color-warning-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-warning-on-bg-fill)
}

.fds-button--variant-primary.fds-button--role-danger {
  --fds-button-background:var(--background-color-fill-danger);
  --fds-button-background-hover:var(--background-color-fill-danger-hover);
  --fds-button-background-active:var(--background-color-fill-danger-active);
  --fds-button-border-color:var(--background-color-fill-danger);
  --fds-button-border-color-hover:var(--background-color-fill-danger-hover);
  --fds-button-border-color-active:var(--background-color-fill-danger-active);
  --fds-button-color:var(--text-color-danger-on-bg-fill);
  --fds-button-color-hover:var(--text-color-danger-on-bg-fill);
  --fds-button-color-active:var(--text-color-danger-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-danger-on-bg-fill)
}

.fds-button--variant-primary.fds-button--role-magic {
  --fds-button-background:var(--background-color-fill-magic);
  --fds-button-background-hover:var(--background-color-fill-magic-hover);
  --fds-button-background-active:var(--background-color-fill-magic-active);
  --fds-button-border-color:var(--background-color-fill-magic);
  --fds-button-border-color-hover:var(--background-color-fill-magic-hover);
  --fds-button-border-color-active:var(--background-color-fill-magic-active);
  --fds-button-color:var(--text-color-magic-on-bg-fill);
  --fds-button-color-hover:var(--text-color-magic-on-bg-fill);
  --fds-button-color-active:var(--text-color-magic-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-magic-on-bg-fill)
}

.fds-button--variant-link {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent
}

.fds-button--role-default.fds-button--variant-default.fds-button--toggled {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand)
}

.fds-button--variant-link.fds-button--toggled:-webkit-any(.fds-button--role-default,.fds-button--role-brand) {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand)
}

.fds-button--variant-link.fds-button--toggled:-moz-any(.fds-button--role-default,.fds-button--role-brand) {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand)
}

.fds-button--variant-link.fds-button--toggled:is(.fds-button--role-default,.fds-button--role-brand) {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand)
}

.fds-button--legacy-default-no-border-darker {
  --fds-button-background:var(--background-color-fill-transparent-secondary);
  --fds-button-background-hover:var(--background-color-fill-transparent-secondary-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-secondary-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-primary);
  --fds-button-color-hover:var(--text-color-primary);
  --fds-button-color-active:var(--text-color-primary)
}

.fds-button--legacy-default-no-border-lighter {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-tertiary);
  --fds-button-color-hover:var(--text-color-tertiary);
  --fds-button-color-active:var(--text-color-tertiary)
}

.fds-button--legacy-default-no-border-no-bg {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent);
  --fds-button-background-active:var(--background-color-fill-transparent);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-primary);
  --fds-button-color-hover:var(--text-color-primary);
  --fds-button-color-active:var(--text-color-primary)
}

.fds-button--legacy-filter {
  --fds-button-background:var(--background-color-fill-secondary);
  --fds-button-background-hover:var(--background-color-fill-secondary-hover);
  --fds-button-background-active:var(--background-color-fill-secondary-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-primary);
  --fds-button-color-hover:var(--text-color-primary);
  --fds-button-color-active:var(--text-color-primary);
  --fds-button-radius:var(--radius-full);
  padding-inline-start:12px;
  padding-inline-end:12px;
  padding-inline:var(--spacing-5)
}

.fds-button--legacy-filter.fds-button--toggled {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand)
}

.fds-button--legacy-input {
  --fds-button-background:var(--background-color-fill-brand-secondary);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-brand-secondary);
  --fds-button-border-color:var(--border-color-brand);
  --fds-button-border-color-hover:var(--border-color-brand);
  --fds-button-border-color-active:var(--border-color-brand);
  --fds-button-color:var(--text-color-brand);
  --fds-button-color-hover:var(--text-color-brand);
  --fds-button-color-active:var(--text-color-brand);
  margin-inline-start:2px;
  margin-inline-end:2px;
  margin-inline:var(--spacing-2);
  padding-inline-start:12px;
  padding-inline-end:12px;
  padding-inline:var(--spacing-5);
  --fds-button-radius:var(--radius-full)
}

.fds-button--legacy-link-background-with-hover {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent-hover);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-link);
  --fds-button-color-hover:var(--text-color-link-hover);
  --fds-button-color-active:var(--text-color-link-active)
}

.fds-button--legacy-link-brand-hover {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-brand-secondary);
  --fds-button-background-active:var(--background-color-fill-transparent-active);
  --fds-button-border-color:var(--border-color-primary);
  --fds-button-border-color-hover:var(--border-color-primary);
  --fds-button-border-color-active:var(--border-color-primary);
  --fds-button-color:var(--text-color-link);
  --fds-button-color-hover:var(--text-color-link-hover);
  --fds-button-color-active:var(--text-color-link-active)
}

.fds-button--legacy-back-link {
  --fds-button-background:var(--background-color-fill-transparent);
  --fds-button-background-hover:var(--background-color-fill-transparent);
  --fds-button-background-active:var(--background-color-fill-transparent);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-link);
  --fds-button-color-hover:var(--text-color-link-hover);
  --fds-button-color-active:var(--text-color-link-active);
  border-radius:3px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-size:var(--font-size-md);
  line-height:20px;
  line-height:var(--font-line-height-5);
  padding-inline-start:0;
  padding-inline-end:0
}

.fds-button--legacy-teal {
  --fds-button-background:var(--background-color-fill-beta);
  --fds-button-background-hover:var(--background-color-fill-beta-hover);
  --fds-button-background-active:var(--background-color-fill-beta-active);
  --fds-button-border-color:transparent;
  --fds-button-border-color-hover:transparent;
  --fds-button-border-color-active:transparent;
  --fds-button-color:var(--text-color-beta-on-bg-fill);
  --fds-button-color-hover:var(--text-color-beta-on-bg-fill);
  --fds-button-color-active:var(--text-color-beta-on-bg-fill);
  --fds-button-icon-color:var(--icon-color-beta-on-bg-fill)
}

.fds-button.fds-button--disabled {
  --fds-button-icon-color:var(--icon-color-tertiary)
}

.fds-divider {
  --fds-divider-color:var(--background-color-fill-transparent-secondary);
  --fds-divider-height:100%;
  --fds-divider-spacing:var(--spacing-3);
  --fds-divider-thickness:1px;
  background-color:#00000017;
  background-color:var(--fds-divider-color);
  flex-shrink:0
}

.fds-divider--dark {
  --fds-divider-color:var(--background-color-fill-transparent-secondary-active)
}

.fds-divider--horizontal {
  height:var(--fds-divider-thickness);
  margin-block:var(--fds-divider-spacing);
  width:100%
}

.fds-divider--vertical {
  height:var(--fds-divider-height);
  margin-inline:var(--fds-divider-spacing);
  width:var(--fds-divider-thickness)
}

.fds-feature-callout-popper {
  z-index:1100;
  animation:.1s ease-out .25s both fds-feature-callout-popper-in;
  position:relative
}

.fds-feature-callout-popper__bubble {
  border-radius:8px;
  border-radius:var(--radius-lg);
  box-shadow:0 12px 24px #0003,0 2px 4px #0000000d,0 0 1px #0000004d;
  box-shadow:var(--shadow-menu);
  padding:16px;
  position:relative
}

.fds-feature-callout-popper--info .fds-feature-callout-popper__bubble {
  background:#007bc4;
  background:var(--background-color-fill-info)
}

.fds-feature-callout-popper--default .fds-feature-callout-popper__bubble {
  background:#fff;
  background:var(--background-color-fill-primary);
  border:1px solid #e7e7e7;
  border:1px solid var(--border-color-secondary)
}

.fds-feature-callout-popper--magic .fds-feature-callout-popper__bubble {
  background:#7268d3;
  background:var(--background-color-fill-magic)
}

.fds-feature-callout-popper--brand .fds-feature-callout-popper__bubble {
  background:#e7faec;
  background:var(--background-color-fill-brand-tertiary);
  border:1px solid #28a466;
  border:1px solid var(--border-color-brand)
}

.fds-feature-callout-popper--dark .fds-feature-callout-popper__bubble {
  background:#323333;
  background:var(--background-color-fill-inverse)
}

.fds-feature-callout-popper__header {
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
  display:flex
}

.fds-feature-callout-popper__title-row {
  flex-wrap:wrap;
  flex:1;
  align-items:center;
  gap:8px;
  min-width:0;
  display:flex
}

.fds-feature-callout-popper__icon {
  flex-shrink:0
}

.fds-feature-callout-popper__title {
  min-width:0
}

.fds-feature-callout-popper__close {
  border-radius:6px;
  border-radius:var(--radius-md);
  cursor:pointer;
  opacity:.85;
  background:0 0;
  border:none;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  width:22px;
  height:22px;
  margin:-1px -4px 0 0;
  padding:0;
  display:flex
}

.fds-feature-callout-popper__close:hover {
  opacity:1
}

.fds-feature-callout-popper__close:focus-visible {
  opacity:1
}

.fds-feature-callout-popper--info .fds-feature-callout-popper__close:hover {
  background:#006bb0;
  background:var(--background-color-fill-info-hover)
}

.fds-feature-callout-popper--info .fds-feature-callout-popper__close:focus-visible {
  background:#006bb0;
  background:var(--background-color-fill-info-hover)
}

.fds-feature-callout-popper--default .fds-feature-callout-popper__close:hover {
  background:#f5f5f5;
  background:var(--background-color-fill-secondary)
}

.fds-feature-callout-popper--default .fds-feature-callout-popper__close:focus-visible {
  background:#f5f5f5;
  background:var(--background-color-fill-secondary)
}

.fds-feature-callout-popper--brand .fds-feature-callout-popper__close:hover {
  background:#c7f1d5;
  background:var(--background-color-fill-brand-tertiary-hover)
}

.fds-feature-callout-popper--brand .fds-feature-callout-popper__close:focus-visible {
  background:#c7f1d5;
  background:var(--background-color-fill-brand-tertiary-hover)
}

.fds-feature-callout-popper--magic .fds-feature-callout-popper__close:hover {
  background:#615ac1;
  background:var(--background-color-fill-magic-hover)
}

.fds-feature-callout-popper--magic .fds-feature-callout-popper__close:focus-visible {
  background:#615ac1;
  background:var(--background-color-fill-magic-hover)
}

.fds-feature-callout-popper--dark .fds-feature-callout-popper__close:hover {
  background:#464747;
  background:var(--background-color-fill-inverse-hover)
}

.fds-feature-callout-popper--dark .fds-feature-callout-popper__close:focus-visible {
  background:#464747;
  background:var(--background-color-fill-inverse-hover)
}

.fds-feature-callout-popper__body {
  margin:0
}

.fds-feature-callout-popper--info .fds-feature-callout-popper__body,.fds-feature-callout-popper--magic .fds-feature-callout-popper__body,.fds-feature-callout-popper--dark .fds-feature-callout-popper__body {
  opacity:.92
}

.fds-feature-callout-popper__arrow {
  border-radius:2px;
  width:16px;
  height:16px;
  position:absolute;
  transform:rotate(45deg)
}

.fds-feature-callout-popper--info .fds-feature-callout-popper__arrow {
  background:#007bc4;
  background:var(--background-color-fill-info)
}

.fds-feature-callout-popper--default .fds-feature-callout-popper__arrow {
  background:#fff;
  background:var(--background-color-fill-primary);
  border:0 solid #e7e7e7;
  border:0 solid var(--border-color-secondary)
}

.fds-feature-callout-popper--brand .fds-feature-callout-popper__arrow {
  background:#e7faec;
  background:var(--background-color-fill-brand-tertiary);
  border:0 solid #28a466;
  border:0 solid var(--border-color-brand)
}

.fds-feature-callout-popper--magic .fds-feature-callout-popper__arrow {
  background:#7268d3;
  background:var(--background-color-fill-magic)
}

.fds-feature-callout-popper--dark .fds-feature-callout-popper__arrow {
  background:#323333;
  background:var(--background-color-fill-inverse)
}

.fds-feature-callout-popper--dark .fds-tag--magic.fds-tag--secondary {
  --color-tag-background-secondary:var(--background-color-fill-magic);
  --color-tag-text-secondary:var(--text-color-magic-on-bg-fill)
}

body.dark .fds-feature-callout-popper--dark .fds-tag--magic.fds-tag--secondary {
  --color-tag-background-secondary:var(--color-purple-50);
  --color-tag-text-secondary:var(--color-purple-600)
}

.fds-feature-callout-popper[data-side=left] .fds-feature-callout-popper__arrow {
  margin-top:-8px;
  top:50%;
  right:-6px
}

.fds-feature-callout-popper[data-side=right] .fds-feature-callout-popper__arrow {
  margin-top:-8px;
  top:50%;
  left:-6px
}

.fds-feature-callout-popper[data-side=top] .fds-feature-callout-popper__arrow {
  margin-left:-8px;
  bottom:-6px;
  left:50%
}

.fds-feature-callout-popper[data-side=bottom] .fds-feature-callout-popper__arrow {
  margin-left:-8px;
  top:-6px;
  left:50%
}

.fds-feature-callout-popper--default[data-side=left] .fds-feature-callout-popper__arrow,.fds-feature-callout-popper--brand[data-side=left] .fds-feature-callout-popper__arrow {
  border-top-width:1px;
  border-right-width:1px
}

.fds-feature-callout-popper--default[data-side=right] .fds-feature-callout-popper__arrow,.fds-feature-callout-popper--brand[data-side=right] .fds-feature-callout-popper__arrow {
  border-bottom-width:1px;
  border-left-width:1px
}

.fds-feature-callout-popper--default[data-side=top] .fds-feature-callout-popper__arrow,.fds-feature-callout-popper--brand[data-side=top] .fds-feature-callout-popper__arrow {
  border-bottom-width:1px;
  border-right-width:1px
}

.fds-feature-callout-popper--default[data-side=bottom] .fds-feature-callout-popper__arrow,.fds-feature-callout-popper--brand[data-side=bottom] .fds-feature-callout-popper__arrow {
  border-top-width:1px;
  border-left-width:1px
}

.fds-feature-callout-popper {
  animation-duration:0s;
  animation-delay:0s
}

.fds-flash {
  --color-flash-border:var(--border-color-primary);
  box-shadow:inset 0 0 0 1px #d4d4d4;
  box-shadow:inset 0 0 0 1px var(--color-flash-border);
  border-radius:6px;
  border-radius:var(--radius-md);
  color:var(--text-color-primary);
  padding:16px;
  padding:var(--spacing-6);
  width:100%
}

.fds-flash__container {
  align-items:flex-start;
  gap:16px;
  gap:var(--spacing-6);
  display:flex
}

.fds-flash__icon {
  flex-shrink:0
}

.fds-flash__content {
  font-size:13px;
  font-size:var(--font-size-md);
  line-height:20px;
  line-height:var(--font-line-height-5);
  flex:1;
  width:100%
}

.fds-flash__title {
  font-weight:600;
  font-weight:var(--font-weight-semibold);
  margin-bottom:4px;
  margin-bottom:var(--spacing-3)
}

.fds-flash__dismiss {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding:2px;
  padding:var(--spacing-2);
  border-radius:3px;
  border-radius:var(--radius-sm);
  color:inherit;
  cursor:pointer;
  background-color:#0000;
  border:0;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  transition:background-color .15s ease-in-out,color .15s ease-in-out;
  display:inline-flex
}

.fds-flash__dismiss:hover {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-secondary-hover)
}

.fds-flash__dismiss:focus-visible {
  outline:2px solid #4fbd81;
  outline:var(--border-width-border-2,2px) solid var(--border-color-focus);
  outline-offset:2px
}

.fds-flash--default {
  --color-flash-border:var(--border-color-primary);
  background-color:#f5f5f5;
  background-color:var(--background-color-surface-secondary)
}

.fds-flash--info {
  --color-flash-border:var(--border-color-info);
  --text-color-link:var(--text-color-info);
  --text-color-link-hover:var(--text-color-info);
  background-color:#ecf7fe;
  background-color:var(--background-color-surface-info)
}

.fds-flash--success {
  --color-flash-border:var(--border-color-success);
  --text-color-link:var(--text-color-success);
  --text-color-link-hover:var(--text-color-success);
  background-color:#e7faec;
  background-color:var(--background-color-surface-success)
}

.fds-flash--warning {
  --color-flash-border:var(--border-color-warning);
  --text-color-link:var(--text-color-warning);
  --text-color-link-hover:var(--text-color-warning);
  background-color:#fff5da;
  background-color:var(--background-color-surface-warning)
}

.fds-flash--danger {
  --color-flash-border:var(--border-color-danger);
  --text-color-link:var(--text-color-danger);
  --text-color-link-hover:var(--text-color-danger);
  background-color:#fff2f2;
  background-color:var(--background-color-surface-danger)
}

.fds-flash--magic {
  --color-flash-border:var(--border-color-magic);
  --text-color-link:var(--text-color-magic);
  --text-color-link-hover:var(--text-color-magic);
  background-color:#f4f4fc;
  background-color:var(--background-color-surface-magic)
}

.fds-flash--beta {
  --color-flash-border:var(--border-color-beta);
  --text-color-link:var(--text-color-beta);
  --text-color-link-hover:var(--text-color-beta);
  background-color:#e3faf8;
  background-color:var(--background-color-surface-beta)
}

.fds-tag {
  --color-tag-background-primary:var(--background-color-fill-inverse-secondary);
  --color-tag-background-secondary:var(--background-color-fill-transparent-secondary);
  --color-tag-background-outline:var(--background-color-fill-transparent);
  --color-tag-text-primary:var(--text-color-inverse);
  --color-tag-text-secondary:var(--text-color-secondary);
  --color-tag-text-outline:var(--text-color-secondary);
  --color-tag-border-outline:var(--border-color-inverse-secondary);
  border-radius:9999px;
  border-radius:var(--radius-full);
  -moz-column-gap:4px;
  -moz-column-gap:var(--spacing-3);
  column-gap:4px;
  column-gap:var(--spacing-3);
  font-weight:500;
  font-weight:var(--font-weight-medium);
  cursor:default;
  flex-direction:row;
  align-items:center;
  display:inline-flex
}

.fds-tag--primary {
  background-color:var(--color-tag-background-primary);
  color:var(--color-tag-text-primary)
}

.fds-tag--secondary {
  background-color:var(--color-tag-background-secondary);
  color:var(--color-tag-text-secondary)
}

.fds-tag--outline {
  background-color:var(--color-tag-background-outline);
  box-shadow:inset 0 0 0 1px var(--color-tag-border-outline);
  color:var(--color-tag-text-outline)
}

.fds-tag--xs {
  font-size:10px;
  font-size:var(--font-size-xs);
  line-height:12px;
  line-height:var(--font-line-height-3);
  padding:1px 4px;
  padding:var(--spacing-1) var(--spacing-3)
}

.fds-tag--sm {
  font-size:12px;
  font-size:var(--font-size-sm);
  line-height:16px;
  line-height:var(--font-line-height-4);
  padding:0 8px;
  padding:0 var(--spacing-4)
}

.fds-tag--md {
  font-size:13px;
  font-size:var(--font-size-md);
  line-height:20px;
  line-height:var(--font-line-height-5);
  padding:0 8px;
  padding:0 var(--spacing-4)
}

.fds-tag--brand {
  --color-tag-background-primary:var(--background-color-fill-brand);
  --color-tag-background-secondary:var(--background-color-fill-brand-secondary);
  --color-tag-text-primary:var(--text-color-brand-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-brand);
  --color-tag-text-outline:var(--text-color-brand);
  --color-tag-border-outline:var(--border-color-brand)
}

.fds-tag--danger {
  --color-tag-background-primary:var(--background-color-fill-danger);
  --color-tag-background-secondary:var(--background-color-fill-danger-secondary);
  --color-tag-text-primary:var(--text-color-danger-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-danger);
  --color-tag-text-outline:var(--text-color-danger);
  --color-tag-border-outline:var(--border-color-danger)
}

.fds-tag--info {
  --color-tag-background-primary:var(--background-color-fill-info);
  --color-tag-background-secondary:var(--background-color-fill-info-secondary);
  --color-tag-text-primary:var(--text-color-info-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-info);
  --color-tag-text-outline:var(--text-color-info);
  --color-tag-border-outline:var(--border-color-info)
}

.fds-tag--magic {
  --color-tag-background-primary:var(--background-color-fill-magic);
  --color-tag-background-secondary:var(--background-color-fill-magic-secondary);
  --color-tag-text-primary:var(--text-color-magic-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-magic);
  --color-tag-text-outline:var(--text-color-magic);
  --color-tag-border-outline:var(--border-color-magic)
}

.fds-tag--new {
  --color-tag-background-primary:var(--background-color-fill-warning);
  --color-tag-background-secondary:var(--background-color-fill-warning-secondary);
  --color-tag-text-primary:var(--text-color-warning-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-warning);
  --color-tag-text-outline:var(--text-color-warning);
  --color-tag-border-outline:var(--border-color-warning)
}

.fds-tag--success {
  --color-tag-background-primary:var(--background-color-fill-success);
  --color-tag-background-secondary:var(--background-color-fill-success-secondary);
  --color-tag-text-primary:var(--text-color-success-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-success);
  --color-tag-text-outline:var(--text-color-success);
  --color-tag-border-outline:var(--border-color-success)
}

.fds-tag--warning {
  --color-tag-background-primary:var(--background-color-fill-warning);
  --color-tag-background-secondary:var(--background-color-fill-warning-secondary);
  --color-tag-text-primary:var(--text-color-warning-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-warning);
  --color-tag-text-outline:var(--text-color-warning);
  --color-tag-border-outline:var(--border-color-warning)
}

.fds-tag--beta {
  --color-tag-background-primary:var(--background-color-fill-beta);
  --color-tag-background-secondary:var(--background-color-fill-beta-secondary);
  --color-tag-text-primary:var(--text-color-beta-on-bg-fill);
  --color-tag-text-secondary:var(--text-color-beta);
  --color-tag-text-outline:var(--text-color-beta);
  --color-tag-border-outline:var(--border-color-beta)
}

.fds-text {
  color:var(--fds-text-color,var(--text-color-primary));
  font-family:inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  font-family:var(--font-sans,var(--font-family-sans,"inter", system-ui, "Segoe UI", Arial, sans-serif));
  font-size:13px;
  font-size:var(--fds-text-font-size,var(--font-size-md));
  font-weight:400;
  font-weight:var(--fds-text-font-weight,var(--font-weight-regular));
  line-height:20px;
  line-height:var(--fds-text-line-height,var(--font-line-height-5))
}

.fds-text--wrap {
  overflow-wrap:break-word;
  max-width:100%
}

.fds-text--truncate {
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden
}

.fds-text--variant-body-xs {
  --fds-text-font-size:var(--font-size-xs);
  --fds-text-line-height:var(--font-line-height-3)
}

.fds-text--variant-body-sm,.fds-text--variant-heading-xs {
  --fds-text-font-size:var(--font-size-sm);
  --fds-text-line-height:var(--font-line-height-4)
}

.fds-text--variant-body-md,.fds-text--variant-heading-sm {
  --fds-text-font-size:var(--font-size-md);
  --fds-text-line-height:var(--font-line-height-5)
}

.fds-text--variant-body-lg,.fds-text--variant-heading-md {
  --fds-text-font-size:var(--font-size-lg);
  --fds-text-line-height:var(--font-line-height-6)
}

.fds-text--variant-display-xl,.fds-text--variant-heading-lg {
  --fds-text-font-size:var(--font-size-xl);
  --fds-text-line-height:var(--font-line-height-7)
}

.fds-text--variant-display-2xl,.fds-text--variant-heading-xl {
  --fds-text-font-size:var(--font-size-2xl);
  --fds-text-line-height:var(--font-line-height-8)
}

.fds-text--variant-display-3xl,.fds-text--variant-heading-2xl {
  --fds-text-font-size:var(--font-size-3xl);
  --fds-text-line-height:var(--font-line-height-10)
}

.fds-text--variant-display-4xl {
  --fds-text-font-size:var(--font-size-4xl);
  --fds-text-line-height:var(--font-line-height-11)
}

.fds-text--variant-display-5xl {
  --fds-text-font-size:var(--font-size-5xl);
  --fds-text-line-height:var(--font-line-height-12)
}

.fds-text--variant-display-6xl {
  --fds-text-font-size:var(--font-size-6xl);
  --fds-text-line-height:var(--font-line-height-13)
}

.fds-text--variant-display-7xl {
  --fds-text-font-size:var(--font-size-7xl);
  --fds-text-line-height:var(--font-line-height-14)
}

.fds-text--variant-display-8xl {
  --fds-text-font-size:var(--font-size-8xl);
  --fds-text-line-height:var(--font-line-height-15)
}

.fds-text--theme-primary {
  --fds-text-color:var(--text-color-primary);
  color:var(--fds-text-color)
}

.fds-text--theme-secondary {
  --fds-text-color:var(--text-color-secondary);
  color:var(--fds-text-color)
}

.fds-text--theme-tertiary {
  --fds-text-color:var(--text-color-tertiary);
  color:var(--fds-text-color)
}

.fds-text--theme-link {
  --fds-text-color:var(--text-color-link);
  color:var(--fds-text-color)
}

.fds-text--theme-magic {
  --fds-text-color:var(--text-color-magic);
  color:var(--fds-text-color)
}

.fds-text--theme-beta {
  --fds-text-color:var(--text-color-beta);
  color:var(--fds-text-color)
}

.fds-text--theme-brand {
  --fds-text-color:var(--text-color-brand);
  color:var(--fds-text-color)
}

.fds-text--theme-info {
  --fds-text-color:var(--text-color-info);
  color:var(--fds-text-color)
}

.fds-text--theme-success {
  --fds-text-color:var(--text-color-success);
  color:var(--fds-text-color)
}

.fds-text--theme-warning {
  --fds-text-color:var(--text-color-warning);
  color:var(--fds-text-color)
}

.fds-text--theme-danger {
  --fds-text-color:var(--text-color-danger);
  color:var(--fds-text-color)
}

.fds-text--theme-inverse {
  --fds-text-color:var(--text-color-inverse);
  color:var(--fds-text-color)
}

.fds-text--theme-inherit {
  --fds-text-color:inherit;
  color:inherit
}

.fds-text--theme-brand-large {
  --fds-text-color:var(--text-color-brand-large);
  color:var(--fds-text-color)
}

.fds-text--theme-info-large {
  --fds-text-color:var(--text-color-info-large);
  color:var(--fds-text-color)
}

.fds-text--theme-success-large {
  --fds-text-color:var(--text-color-success-large);
  color:var(--fds-text-color)
}

.fds-text--theme-warning-large {
  --fds-text-color:var(--text-color-warning-large);
  color:var(--fds-text-color)
}

.fds-text--theme-danger-large {
  --fds-text-color:var(--text-color-danger-large);
  color:var(--fds-text-color)
}

.fds-text--theme-magic-large {
  --fds-text-color:var(--text-color-magic-large);
  color:var(--fds-text-color)
}

.fds-text--theme-beta-large {
  --fds-text-color:var(--text-color-beta-large);
  color:var(--fds-text-color)
}

.fds-text--weight-light {
  --fds-text-font-weight:var(--font-weight-light)
}

.fds-text--weight-normal {
  --fds-text-font-weight:var(--font-weight-regular)
}

.fds-text--weight-medium {
  --fds-text-font-weight:var(--font-weight-medium)
}

.fds-text--weight-semibold {
  --fds-text-font-weight:var(--font-weight-semibold)
}

.fds-text--weight-bold {
  --fds-text-font-weight:var(--font-weight-bold)
}

.fds-text--weight-inherit {
  --fds-text-font-weight:inherit
}

.fds-text--align-left {
  text-align:left
}

.fds-text--align-center {
  text-align:center
}

.fds-text--align-right {
  text-align:right
}

.fds-text--align-justify {
  text-align:justify
}

.fds-text--transform-normal {
  text-transform:none
}

.fds-text--transform-uppercase {
  text-transform:uppercase
}

.fds-text--transform-lowercase {
  text-transform:lowercase
}

.fds-text--transform-capitalize {
  text-transform:capitalize
}

.fds-text--transform-strikethrough {
  text-decoration-line:line-through
}

.fds-text--animation-gradient {
  background-image:linear-gradient(100deg,#615ac1 0%,#7268d3 45%,#8d85e2 75%,#a7a1ec 100%);
  background-image:linear-gradient(100deg, var(--color-purple-600) 0%, var(--color-purple-500) 45%, var(--color-purple-400) 75%, var(--color-purple-300) 100%);
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:2.6s linear infinite fds-text-animation-shine
}

.fds-text--animation-shimmer {
  background-image:linear-gradient(100deg,#615ac1 0%,#7268d3 26%,#bebaf2 50%,#7268d3 74%,#8d85e2 100%);
  background-image:linear-gradient(100deg, var(--color-purple-600) 0%, var(--color-purple-500) 26%, var(--color-purple-200) 50%, var(--color-purple-500) 74%, var(--color-purple-400) 100%);
  -webkit-text-fill-color:transparent;
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:1.3s linear infinite fds-text-animation-shine
}

.fds-text--animation-shimmer-muted {
  background-image:linear-gradient(100deg,#767676 0%,#8d8d8d 26%,silver 50%,#8d8d8d 74%,#767676 100%);
  background-image:linear-gradient(100deg, var(--color-gray-500) 0%, var(--color-gray-400) 26%, var(--color-gray-200) 50%, var(--color-gray-400) 74%, var(--color-gray-500) 100%);
  -webkit-text-fill-color:transparent;
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  animation:4s linear infinite fds-text-animation-shine
}

.fds-magic-pulse {
  animation:1.4s ease-in-out infinite fds-magic-pulse;
  display:inline-flex
}

.fds-text--animation-gradient,.fds-text--animation-shimmer,.fds-text--animation-shimmer-muted,.fds-magic-pulse {
  animation:none
}

.fds-text--animation-gradient,.fds-text--animation-shimmer,.fds-text--animation-shimmer-muted {
  -webkit-text-fill-color:inherit;
  background-image:none;
  animation:none
}

.fds-color-picker-root {
  --fds-color-picker-hue:0;
  --fds-color-picker-chroma-max:.4;
  --fds-color-picker-visual-lightness:60%;
  --fds-color-picker-gap:var(--spacing-6);
  --fds-color-picker-gap-sm:var(--spacing-3);
  --fds-color-picker-selection-min-height:12rem;
  --fds-color-picker-slider-height:var(--spacing-5);
  --fds-color-picker-output-width:7rem;
  --fds-color-picker-thumb-size:var(--spacing-6);
  --fds-color-picker-border-radius:var(--radius-md);
  --fds-color-picker-checkerboard:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==);
  gap:16px;
  gap:var(--fds-color-picker-gap);
  flex-direction:column;
  width:100%;
  height:100%;
  display:flex
}

.fds-color-picker-root .form-input:focus,.fds-color-picker-root .form-select:focus {
  box-shadow:none!important;
  border-color:#4fbd81!important;
  border-color:var(--border-color-focus)!important;
  outline:none!important
}

.fds-color-picker-root .fds-color-picker-segmented-row,.fds-color-picker-root .alpha-field {
  transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)
}

.fds-color-picker-root .fds-color-picker-segmented-row:focus-within,.fds-color-picker-root .alpha-field:focus-within {
  box-shadow:0 0 0 2px #c7f1d5;
  box-shadow:0 0 0 var(--border-width-border-2) var(--background-color-fill-brand-secondary);
  border-color:#4fbd81!important;
  border-color:var(--border-color-focus)!important
}

.fds-color-picker-root :focus-visible {
  outline-offset:2px;
  outline-offset:var(--spacing-2);
  box-shadow:0 0 0 1px #4fbd81;
  box-shadow:0 0 0 var(--border-width-border) var(--border-color-focus);
  outline:none
}

.fds-color-picker-panel {
  gap:var(--fds-color-picker-gap);
  flex-direction:column;
  display:flex
}

.fds-color-picker-panel--bordered {
  padding:16px;
  padding:var(--spacing-6);
  border-radius:var(--fds-color-picker-border-radius);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary);
  background:#fff;
  background:var(--background-color-surface-primary);
  box-shadow:0 1px 2px #0000000d
}

.fds-color-picker-selection {
  width:100%;
  height:100%;
  min-height:var(--fds-color-picker-selection-min-height);
  cursor:crosshair;
  border-radius:var(--fds-color-picker-border-radius);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary);
  background:linear-gradient(0deg, oklch(0% 0 var(--fds-color-picker-hue) / 1), oklch(0% 0 var(--fds-color-picker-hue) / 0)), linear-gradient(90deg, oklch(100% 0 var(--fds-color-picker-hue) / 1), oklch(100% 0 var(--fds-color-picker-hue) / 0)), oklch(var(--fds-color-picker-visual-lightness) var(--fds-color-picker-chroma-max) var(--fds-color-picker-hue));
  transition:border-color .15s cubic-bezier(.4,0,.2,1);
  position:relative
}

.fds-color-picker-selection:hover {
  border-color:#e7e7e7;
  border-color:var(--border-color-secondary)
}

.fds-color-picker-selection:active {
  border-color:#28a466;
  border-color:var(--border-color-brand)
}

.fds-color-picker-selection-border {
  border-radius:var(--fds-color-picker-border-radius);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary)
}

.fds-color-picker-slider {
  width:100%;
  height:calc(var(--fds-color-picker-slider-height) + 8px);
  height:calc(var(--fds-color-picker-slider-height) + var(--spacing-4));
  touch-action:none;
  align-items:center;
  display:flex;
  position:relative
}

.fds-color-picker-slider-track {
  width:100%;
  height:var(--fds-color-picker-slider-height);
  border-radius:9999px;
  border-radius:var(--radius-full);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary);
  flex-grow:1;
  align-items:center;
  transition:border-color .15s cubic-bezier(.4,0,.2,1);
  display:flex;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 2px #0000000d
}

.fds-color-picker-slider:hover .fds-color-picker-slider-track {
  border-color:#e7e7e7;
  border-color:var(--border-color-secondary)
}

.fds-color-picker-hue-track {
  background:linear-gradient(90deg,#d7397b,#bf6600,#768c00,#009883,#0089d0,#955be3,#d7397b);
  background:linear-gradient(90deg,lab(51.0823% 64.654 .956917),lab(52.5211% 45.8303 127.618),lab(55.0385% -25.0005 114.453),lab(56.1073% -73.2216 -.405049),lab(52.9692% -12.3644 -61.5214),lab(50.3845% 45.1614 -61.7514),lab(51.0823% 64.654 .956929))
}

.fds-color-picker-alpha-track {
  background:var(--fds-color-picker-checkerboard) left center;
  background-size:16px 16px
}

.fds-color-picker-thumb {
  width:var(--fds-color-picker-thumb-size);
  height:var(--fds-color-picker-thumb-size);
  border-radius:9999px;
  border-radius:var(--radius-full);
  border:2px solid #fff;
  border:var(--border-width-border-2) solid var(--background-color-surface-primary);
  background:#fff;
  background:var(--background-color-surface-primary);
  box-shadow:0 0 0 1px #d4d4d4,0 2px 4px #0000001a;
  box-shadow:0 0 0 var(--border-width-border) var(--border-color-primary), 0 2px 4px 0 #0000001a;
  cursor:grab;
  transition:all .15s cubic-bezier(.4,0,.2,1);
  display:block
}

.fds-color-picker-thumb:hover {
  box-shadow:0 0 0 1px #28a466,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;
  box-shadow:0 0 0 var(--border-width-border) var(--border-color-brand), 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
  transform:scale(1.1)
}

.fds-color-picker-thumb:active {
  cursor:grabbing;
  box-shadow:0 0 0 2px #28a466,0 1px 2px #0000001a;
  box-shadow:0 0 0 var(--border-width-border-2) var(--border-color-brand), 0 1px 2px 0 #0000001a;
  transform:scale(1.05)
}

.fds-color-picker-thumb:focus-visible {
  box-shadow:0 0 0 1px #28a466,0 0 0 3px #c7f1d5,0 4px 6px -1px #0000001a;
  box-shadow:0 0 0 var(--border-width-border) var(--border-color-brand), 0 0 0 var(--border-width-border-3) var(--background-color-fill-brand-secondary), 0 4px 6px -1px #0000001a
}

.fds-color-picker-thumb:disabled {
  pointer-events:none;
  opacity:.5;
  cursor:not-allowed
}

.fds-color-picker-output {
  width:var(--fds-color-picker-output-width);
  font-size:12px;
  font-size:var(--font-size-sm);
  line-height:20px;
  line-height:var(--font-line-height-5)
}

.fds-color-picker-sliders-container {
  gap:var(--fds-color-picker-gap-sm);
  flex-direction:column;
  width:100%;
  display:flex
}

.fds-color-picker-format-container {
  grid-gap:var(--fds-color-picker-gap-sm);
  gap:var(--fds-color-picker-gap-sm);
  align-items:start;
  display:grid
}

.fds-color-picker-format-container {
  grid-template-columns:auto 1fr;
  align-items:center
}

.fds-color-picker-root *,.fds-color-picker-selection,.fds-color-picker-slider-track,.fds-color-picker-thumb {
  transition:none!important;
  animation:none!important
}

.fds-color-picker-selection,.fds-color-picker-slider-track {
  border-width:2px;
  border-width:var(--border-width-border-2)
}

.fds-color-picker-thumb {
  border-width:3px;
  border-width:var(--border-width-border-3)
}

.fds-color-picker-alpha-gradient {
  pointer-events:none;
  border-radius:9999px;
  border-radius:var(--radius-full);
  background:linear-gradient(90deg,#0000,#00000080);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0
}

.fds-color-picker-slider-range {
  border-radius:9999px;
  border-radius:var(--radius-full);
  background:0 0;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0
}

.fds-color-picker-indicator {
  width:16px;
  width:var(--spacing-6);
  height:16px;
  height:var(--spacing-6);
  border-radius:9999px;
  border-radius:var(--radius-full);
  border:2px solid #fff;
  border:var(--border-width-border-2) solid var(--background-color-surface-primary);
  box-shadow:0 0 0 1px #00000080;
  box-shadow:0 0 0 var(--border-width-border) #00000080;
  pointer-events:none;
  position:absolute;
  transform:translate(-50%,-50%)
}

.fds-color-picker-segmented-row {
  border-radius:var(--fds-color-picker-border-radius);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary);
  background:#f5f5f5;
  background:var(--background-color-fill-secondary);
  width:100%;
  transition:box-shadow .15s cubic-bezier(.4,0,.2,1);
  display:flex;
  overflow:hidden
}

.fds-color-picker-segmented-row:focus-within {
  border-color:#4fbd81;
  border-color:var(--border-color-focus);
  outline:none
}

.fds-color-picker-segmented-field {
  border-left:1px solid #0000001a;
  border-left:var(--border-width-border) solid #0000001a;
  display:flex
}

.fds-color-picker-segmented-field:first-child {
  border-left:none
}

.fds-color-picker-segmented-field-grow {
  flex:1
}

.fds-color-picker-segmented-field-fixed {
  flex:none
}

.fds-color-picker-oklch-row .fds-color-picker-segmented-field-grow {
  flex:auto
}

.fds-color-picker-input {
  height:32px;
  height:var(--spacing-8);
  width:100%;
  min-width:0;
  padding-left:4px;
  padding-left:var(--spacing-3);
  padding-right:4px;
  padding-right:var(--spacing-3);
  font-size:16px;
  font-size:var(--font-size-lg);
  box-shadow:none;
  background:0 0;
  border:none;
  border-radius:0;
  line-height:1.25
}

.fds-color-picker-oklch-row .fds-color-picker-input {
  padding-left:2px;
  padding-left:var(--spacing-2);
  padding-right:2px;
  padding-right:var(--spacing-2)
}

.fds-color-picker-input:focus {
  box-shadow:none;
  outline:none
}

.fds-color-picker-percentage-container {
  height:32px;
  height:var(--spacing-8);
  width:5rem;
  padding-left:1px;
  padding-left:var(--spacing-1);
  background:0 0;
  flex-shrink:0;
  align-items:center;
  padding-right:0;
  display:flex
}

.fds-color-picker-percentage-input {
  height:32px;
  height:var(--spacing-8);
  width:3rem;
  font-size:16px;
  font-size:var(--font-size-lg);
  box-shadow:none;
  text-align:right;
  background:0 0;
  border:none;
  border-radius:0;
  line-height:1.25
}

.fds-color-picker-percentage-symbol {
  height:32px;
  height:var(--spacing-8);
  padding-right:4px;
  padding-right:var(--spacing-3);
  font-size:16px;
  font-size:var(--font-size-lg);
  color:var(--text-color-tertiary);
  opacity:.8;
  align-items:center;
  margin-left:.25rem;
  display:flex
}

.fds-color-picker-format-select {
  width:5.5rem;
  font-size:16px;
  font-size:var(--font-size-lg);
  flex-shrink:0;
  height:32px!important;
  height:var(--spacing-8)!important;
  padding-top:1px!important;
  padding-left:.625rem!important;
  padding-right:.625rem!important;
  padding-top:var(--spacing-1)!important;
  padding-bottom:1px!important;
  padding-bottom:var(--spacing-1)!important
}

.fds-color-picker-popover-content {
  width:22rem;
  padding:8px;
  padding:var(--spacing-4)
}

.fds-color-picker-trigger {
  justify-content:space-between;
  align-items:center;
  gap:2px;
  gap:var(--spacing-2);
  transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1);
  display:flex;
  cursor:pointer!important
}

.fds-color-picker-trigger-content {
  align-items:center;
  gap:2px;
  gap:var(--spacing-2);
  min-width:0;
  display:flex
}

.fds-color-picker-trigger-swatch {
  width:24px;
  width:var(--spacing-7);
  height:24px;
  height:var(--spacing-7);
  border-radius:3px;
  border-radius:var(--radius-sm);
  border:1px solid #d4d4d4;
  border:var(--border-width-border) solid var(--border-color-primary);
  flex-shrink:0;
  display:block;
  box-shadow:inset 0 1px 2px #0000000d
}

.fds-color-picker-trigger-value {
  color:var(--text-color-secondary);
  font-size:12px;
  font-size:var(--font-size-sm);
  white-space:nowrap;
  text-overflow:ellipsis;
  transition:color .15s cubic-bezier(.4,0,.2,1);
  overflow:hidden
}

.fds-color-picker-trigger:hover .fds-color-picker-trigger-value {
  color:var(--text-color-primary)
}

.fds-color-picker-trigger,.fds-color-picker-trigger-value {
  transition:none!important
}

.fds-color-scale-root {
  gap:8px;
  gap:var(--spacing-4);
  flex-direction:column;
  display:flex
}

.fds-color-scale-root.is-disabled {
  opacity:.8
}

.fds-color-scale-swatches {
  padding:8px;
  padding:var(--spacing-4);
  border-radius:8px;
  border-radius:var(--radius-lg);
  border:1px solid #e7e7e7;
  border:var(--border-width-border) solid var(--border-color-secondary);
  background-color:#f5f5f5;
  background-color:var(--background-color-surface-secondary)
}

.fds-color-scale-header {
  margin-bottom:4px;
  margin-bottom:var(--spacing-3);
  justify-content:space-between;
  align-items:center;
  display:flex
}

.fds-color-scale-title {
  font-size:10px;
  font-size:var(--font-size-xs);
  font-weight:500;
  font-weight:var(--font-weight-medium);
  color:var(--text-color-secondary);
  text-transform:uppercase;
  letter-spacing:.025em
}

.fds-color-scale-reset {
  font-size:10px;
  font-size:var(--font-size-xs);
  font-weight:500;
  font-weight:var(--font-weight-medium);
  color:var(--text-color-brand);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:0;
  transition:color .15s cubic-bezier(.4,0,.2,1)
}

.fds-color-scale-reset:hover {
  color:var(--text-color-brand))
}

.fds-color-scale-reset:disabled {
  cursor:not-allowed;
  opacity:.6
}

.fds-color-scale-row {
  gap:1px;
  gap:var(--spacing-1);
  flex-wrap:nowrap;
  display:flex
}

.fds-color-scale-item {
  align-items:center;
  gap:1px;
  gap:var(--spacing-1);
  flex-direction:column;
  flex:1;
  min-width:0;
  display:flex
}

.fds-color-scale-swatch-wrapper {
  width:100%;
  min-width:0;
  position:relative
}

.fds-color-scale-swatch-button {
  aspect-ratio:1;
  border-radius:6px;
  border-radius:var(--radius-md);
  border:1px solid #e7e7e7;
  border:var(--border-width-border) solid var(--border-color-secondary);
  cursor:pointer;
  width:100%;
  transition:transform .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 2px #0000000d
}

.fds-color-scale-swatch-button.is-disabled {
  cursor:not-allowed;
  box-shadow:none
}

.fds-color-scale-swatch-button.is-disabled:hover {
  transform:none
}

.fds-color-scale-swatch-button:not([data-state=open]):hover,.fds-color-scale-swatch-button[data-state=open] {
  transform:scale(1.04);
  box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f
}

.fds-color-scale-swatch-button:focus-visible {
  box-shadow:0 0 0 2px #4fbd81,0 1px 2px #00000014;
  box-shadow:0 0 0 var(--border-width-border-2) var(--border-color-focus), 0 1px 2px 0 #00000014;
  outline:none
}

.fds-color-scale-reset-button {
  top:-1px;
  top:calc(var(--spacing-1) * -1);
  right:-1px;
  right:calc(var(--spacing-1) * -1);
  border-radius:9999px;
  border-radius:var(--radius-full);
  background-color:#fff;
  background-color:var(--background-color-surface-primary);
  border:1px solid #e7e7e7;
  border:var(--border-width-border) solid var(--border-color-secondary);
  position:absolute;
  box-shadow:0 1px 2px #0000001a
}

.fds-color-scale-reset-button:hover {
  background-color:#f5f5f5;
  background-color:var(--background-color-fill-secondary);
  border-color:#d4d4d4;
  border-color:var(--border-color-primary)
}

.fds-color-scale-shade-label {
  font-size:10px;
  font-size:var(--font-size-xs);
  font-weight:500;
  font-weight:var(--font-weight-medium);
  white-space:nowrap;
  color:var(--text-color-secondary)
}

.fds-color-scale-shade-label.is-customized {
  color:var(--text-color-brand)
}

.fds-color-scale-footer {
  margin-top:4px;
  margin-top:var(--spacing-3);
  font-size:10px;
  font-size:var(--font-size-xs);
  color:var(--text-color-tertiary)
}

.fds-color-scale-popover {
  width:20rem;
  padding:2px;
  padding:var(--spacing-2)
}

.fds-color-scale-reset,.fds-color-scale-swatch-button {
  transition:none!important
}

.\[\&_\.fds-toggle-group-item\]\:w-full .fds-toggle-group-item {
  width:100%
}

.\[\&_\.fds-toggle-group-item-wrapper\]\:flex-1 .fds-toggle-group-item-wrapper {
  flex:1
}
/* ── vendor/recovered.css ─────────────────────────── */
/* REMOVED, same reason as the .fds-button rule above: these four selectors
 * were byte-identical duplicates of rules components.css already carries, and
 * components.css loads after this file. Identical duplicates are harmless
 * TODAY — nothing sits between them — but they are the same trap that killed
 * --variant-link: any modifier declared between the two copies dies silently.
 * The rule this project follows: recovered.css yields to whichever file
 * already owned the selector. Gate G18 enforces it. */
/**
 * Rules recovered from production that the first extraction lost.
 *
 * Generated by tools-extract.py — do not hand-edit. Loaded AFTER
 * components.css so it fills gaps without overriding deliberate work;
 * anything here is verbatim from their stylesheet.
 */
.form-input { border-width:1px }
.form-textarea::-moz-placeholder { color:var(--color-gray-500);opacity:1 }
.form-input::-webkit-datetime-edit-fields-wrapper { padding:0 }
.form-input::-webkit-datetime-edit-year-field { padding-top:0;padding-bottom:0 }
.form-input::-webkit-datetime-edit-day-field { padding-top:0;padding-bottom:0 }
.form-input::-webkit-datetime-edit-minute-field { padding-top:0;padding-bottom:0 }
.form-input::-webkit-datetime-edit-millisecond-field { padding-top:0;padding-bottom:0 }
.form-select { background-position:right 2px center;background-position:right var(--spacing-2) center;padding-right:64px;padding-right:var(--spacing-10);-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;print-color-adjust:exact;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-size:1.5em 1.5em;border-width:1px }
.form-checkbox,.form-radio { -webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;-moz-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;height:8px;height:var(--spacing-4);width:8px;width:var(--spacing-4);color:var(--color-blue-600);border-color:#767676;border-color:var(--color-gray-500);--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;flex-shrink:0;padding:0;display:inline-block }
.form-checkbox:focus,.form-radio:focus { outline-offset:2px;--tw-ring-inset:var(--tw-empty);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:var(--color-blue-600);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:2px solid #0000 }
.form-checkbox:checked { background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") }
.app-wrapper,.app-main,.app-content { width:100% }
.app-content { -webkit-overflow-scrolling:touch;flex-direction:column;flex:1 0 auto;min-height:0;padding:0;display:flex;overflow-x:hidden }
.chargify-form-iframe iframe { width:100%!important;height:55px!important }
.chargify-form-iframe { margin-bottom:-26px }
.chargify-form-iframe-error { margin-bottom:0 }
.work-order-line-items.spark-table-wrapper { overflow:hidden!important }
/* REMOVED: the base `.fds-button` rule.
 *
 * It was declaration-for-declaration IDENTICAL to the one fds.css already
 * carries at line 3 — but this file loads after fds.css, so at equal
 * specificity the duplicate re-asserted --fds-button-border-color and friends
 * AFTER every .fds-button--variant-* modifier had set them. The link variant
 * was dead product-wide as a result: "Clear selection" on every index rendered
 * as a bordered white button instead of plain text, and only --variant-primary
 * survived because its colour arrives via --role-brand.
 *
 * Tier A is copied, not interpreted — so nothing here is edited, only the
 * duplicate is dropped. Gate G18 now fails if any selector is defined by two
 * Tier A stylesheets at once. */

.form-field-input-container-errors .form-input,.form-field-input-container-errors .form-select,.form-field-input-container-errors .form-textarea,.form-field-input-container-errors .form-checkbox,.form-field-input-container-errors .form-radio,.form-field-input-container-errors .select-async__control { border-color:#f65c50!important;border-color:var(--border-color-danger)!important }
.form-checkbox:disabled { opacity:.5;box-shadow:none;outline:none;border-color:#d4d4d4!important;border-color:var(--border-color-primary)!important;cursor:not-allowed!important }
:-webkit-any(.form-checkbox:checked,.form-radio:checked):focus { background-color:#00884b;background-color:var(--background-color-fill-brand) }
:is(.form-checkbox:checked,.form-radio:checked):focus { background-color:#00884b;background-color:var(--background-color-fill-brand) }
:-moz-any(.form-checkbox:checked,.form-radio:checked):hover { background-color:#00884b;background-color:var(--background-color-fill-brand) }
.form-checkbox:indeterminate:focus,.form-checkbox:indeterminate:hover { background-color:#00884b;background-color:var(--background-color-fill-brand) }
.form-radio:disabled { opacity:.5;box-shadow:none;outline:none;border-color:#d4d4d4!important;border-color:var(--border-color-primary)!important;cursor:not-allowed!important }
:-moz-any(.form-checkbox,.form-select,.form-input,.form-textarea,.form-multiselect,.form-radio):focus { outline-offset:0;box-shadow:0 0 0 3px #c7f1d5;box-shadow:0 0 0 3px var(--background-color-fill-brand-secondary);border-color:#4fbd81!important;border-color:var(--border-color-focus)!important;outline:none!important }
.form-input,.form-multiselect,.form-select,.form-textarea { padding:.5rem .75rem }
:-webkit-any(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder { color:var(--color-gray-400) }
:is(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder { color:var(--color-gray-400) }
:-webkit-any(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder:where() { color:var(--color-gray-700) }
:is(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder:where() { color:var(--color-gray-700) }
.form-input:read-only { cursor:default;box-shadow:none;outline:none;border-color:#d4d4d4!important;border-color:var(--border-color-primary)!important }
.form-multiselect,.form-select { border-radius:6px;border-radius:var(--radius-md);border-style:var(--tw-border-style);background-color:#fff;background-color:var(--background-color-fill-primary);border-width:1px;border-color:#d4d4d4;border-color:var(--border-color-primary) }
:-moz-any(.form-multiselect,.form-select):disabled { background-color:#00000017;background-color:var(--background-color-fill-transparent-secondary);opacity:.5;box-shadow:none;outline:none;border-color:#d4d4d4!important;border-color:var(--border-color-primary)!important;cursor:not-allowed!important }
.form-textarea { border-radius:6px;border-radius:var(--radius-md);border-style:var(--tw-border-style);background-color:#fff;background-color:var(--background-color-fill-primary);border-width:1px;border-color:#d4d4d4;border-color:var(--border-color-primary);line-height:1.5!important }
.form-textarea p[data-slate-node=element] { position:relative }
.spark-menu__content { background-color:#fff;background-color:var(--background-color-fill-primary);border-radius:8px;border-radius:var(--radius-lg);box-shadow:0 12px 24px #0003,0 2px 4px #0000000d,0 0 1px #0000004d;box-shadow:var(--shadow-menu);margin-bottom:4px;margin-bottom:var(--spacing-3);max-height:calc(var(--radix-dropdown-menu-content-available-height) - 10px);padding:4px;padding:var(--spacing-3);z-index:1003;overflow:auto }
.spark-menu__content [data-radix-collection-item] { border-radius:6px;border-radius:var(--radius-md);color:var(--text-color-primary);cursor:pointer;min-width:175px;padding:8px 12px;padding:var(--spacing-4) var(--spacing-5);display:block;overflow:hidden }
.spark-menu__content [data-radix-collection-item]:-moz-any([data-highlighted],:hover):not([aria-disabled]) { background-color:#f5f5f5;background-color:var(--background-color-fill-primary-hover) }
.spark-menu__content [data-radix-collection-item]:-webkit-any([aria-disabled],[disabled],[data-display-as-disabled]) { color:var(--text-color-tertiary);cursor:not-allowed;pointer-events:none;background-color:#0000 }
.spark-menu__content [data-radix-collection-item]:is([aria-disabled],[disabled],[data-display-as-disabled]) { color:var(--text-color-tertiary);cursor:not-allowed;pointer-events:none;background-color:#0000 }
.spark-menu__content [data-radix-collection-item] svg:not(.custom-color) { color:var(--text-color-secondary) }
.spark-menu__item { border-radius:6px;border-radius:var(--radius-md) }
.spark-menu__selection-indicator { justify-content:center;align-items:center;width:24px;display:inline-flex }
.spark-menu__divider { border:0;border-top:1px solid #e7e7e7;border-top:1px solid var(--border-color-secondary);margin:4px 8px;margin:var(--spacing-3) var(--spacing-4) }
.spark-menu__container { padding:8px 12px;padding:var(--spacing-4) var(--spacing-5) }
.spark-menu__content:focus-visible { outline:2px solid #4fbd81;outline:2px solid var(--border-color-focus);outline-offset:2px }
.spark-menu__content a.spark-menu__item:focus-visible { color:var(--text-color-primary) }
.rdp-root select.form-select { background-position:right 2px center;background-size:16px 16px }
.spark-table thead { border-bottom-style:solid;border-bottom-style:var(--tw-border-style);--tw-border-style:solid;border-style:solid;border-color:#e7e7e7;border-bottom-width:1px;border-color:var(--border-color-secondary) }
:is(.spark-table th,.spark-table td):where(.dark,.dark *) { border-color:#323333;border-color:var(--color-gray-900) }
.spark-table thead tr:first-child th,.spark-table thead tr:first-child td,.spark-table tbody tr:first-child th,.spark-table tbody tr:first-child td { border-top:none }
.spark-table-wrapper th.sticky-right { z-index:2;top:0 }
.spark-table thead tr th:where(.dark,.dark *) { background-color:#222323;background-color:var(--color-gray-950) }
.spark-table-wrapper tr.disabled { background-color:#0000000a;background-color:var(--background-color-fill-transparent-hover) }
.spark-table-wrapper td.sticky-right { background-color:#0000 }
.spark-table-wrapper tbody tr[data-hovered=true] .sticky-right { background-color:#f5f5f5e6 }
.dark .spark-table-wrapper tbody tr[data-hovered=true] .sticky-right { background-color:#323333e6 }
.spark-table-wrapper tbody tr.highlight[data-hovered=true] .sticky-right { background-color:#e7faece6 }
.dark .spark-table-wrapper tbody tr.highlight[data-hovered=true] .sticky-right { background-color:#464747;background-color:var(--color-gray-800) }
.spark-table-wrapper tbody tr:hover .sticky-right>* { opacity:1 }
.spark-table-wrapper .sticky-right:has([data-row-pending])>* { opacity:1!important }
.spark-table-wrapper tbody .sticky-right button[aria-expanded=true]:where(.dark,.dark *) { background-color:#323333;background-color:var(--color-gray-900) }
.dark .spark-table-container .table-overlay { background-color:#151514cc }
.spark-table-wrapper table th,.spark-table-wrapper table td { white-space:nowrap;vertical-align:middle!important }
.spark-table-wrapper.allow-wrap table th,.spark-table-wrapper.allow-wrap table td { white-space:normal }
.spark-table-wrapper tbody tr:where(.dark,.dark *) { background-color:#222323;background-color:var(--color-gray-950) }
.spark-table-wrapper tbody tr.warn td:first-child:before { background-color:#ea962f;background-color:var(--accent-color,var(--border-color-warning));content:" ";border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;left:6px }
.spark-table-wrapper tbody tr.info td:first-child:before { background-color:#81c8f5;background-color:var(--background-color-fill-info-secondary-active);content:" ";border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;left:6px }
.spark-table-wrapper tbody tr.success td:first-child:before { background-color:#28a466;background-color:var(--accent-color,var(--border-color-success));content:" ";border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;left:6px }
.spark-table-wrapper tbody tr.error td:first-child:before { background-color:#f65c50;background-color:var(--accent-color,var(--border-color-danger));content:" ";border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;left:6px }
.spark-table-wrapper tbody tr.mute td:first-child:before { background-color:#d4d4d4;background-color:var(--accent-color,var(--border-color-primary));content:" ";border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;left:6px }
.spark-table-wrapper tbody tr.highlight,.spark-table-wrapper tbody tr.highlight[data-hovered=true] { background-color:#e7faec;background-color:var(--background-color-surface-brand) }
.spark-table-wrapper tbody tr[data-hovered=true] { background-color:#f5f5f5;background-color:var(--color-gray-25) }
.spark-table th[data-is-sorted] svg { transition:opacity .25s ease-out;transform:translate(0) }
.spark-table th[data-is-sorted=false]:hover svg,.spark-table th[data-is-sorted=true] svg { opacity:1 }
.spark-table-wrapper[data-density=compact] .spark-table tbody tr:not(.spark-table-group-header-row)>th,.spark-table-wrapper[data-density=compact] .spark-table tbody tr:not(.spark-table-group-header-row)>td:not(.spark-table-group-header) { padding-block-start:2px;padding-block-end:2px;padding-block:var(--spacing-2) }
.spark-table td.value-cell:empty:after,.spark-table td.value-cell>:first-child:empty:after,.spark-table td.value-cell>:first-child>:first-child:empty:after,.spark-table td.value-cell>:first-child>:first-child>:first-child:empty:after,.spark-table td.value-cell>:first-child>:first-child>:first-child>:first-child:empty:after,.spark-table td.value-cell>:first-child>:first-child>:first-child>:first-child>:first-child:empty:after { color:var(--color-gray-100) }
.spark-table td.value-cell.header-right:empty:after:where() { color:var(--color-gray-700) }
.spark-table td[data-size=no-wrap]>* { min-width:max-content }
.spark-table-wrapper .spark-table-group-header-row:where(.dark,.dark *) { background-image:linear-gradient(#0000,#222323 25%);background-image:linear-gradient(to bottom,transparent,var(--color-gray-950) 25%) }
.spark-table-wrapper .spark-table tbody tr td.spark-table-group-header { border-top-style:var(--tw-border-style);padding-top:24px;padding-top:var(--spacing-7);padding-bottom:8px;padding-bottom:var(--spacing-4);border-top-width:0 }
#app-main-dashboard .grid-stack>.grid-stack-item>.grid-stack-item-content { border-radius:8px;border-radius:var(--radius-lg);border-style:solid;border-style:var(--tw-border-style);--tw-border-style:solid;background-color:#fff;background-color:var(--color-white);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px 0 var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 1px 3px 0 #0000001a, 0 1px 2px 0 #0000000f;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:.1s;transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.1s;--tw-ease:var(--ease-in-out);transition-duration:.1s;transition-timing-function:var(--ease-in-out);border:1px solid #0000 }
#app-main-dashboard .grid-stack>.grid-stack-item>.grid-stack-item-content:hover { --tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -1px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) }
#app-main-dashboard .grid-stack>.grid-stack-item>.grid-stack-item-content:where(.dark,.dark *) { border-color:#323333;border-color:var(--color-gray-900);background-color:#222323;background-color:var(--color-gray-950) }

/* ── vendor/components.css ─────────────────────────── */
/**
 * Fleetio components — their production CSS, verbatim.
 *
 * This is the layer between the tokens and the screens, and it is the part a
 * "nine BEM families" reading of FDS misses entirely: the real table, the real
 * menu, the real form controls, the shell primitives, and — most importantly —
 * the SEMANTIC UTILITY VOCABULARY (bg-fill-{role}, text-{role}-large,
 * text-{role}-on-bg-fill, border-{role}), which is the design system's actual
 * public API.
 *
 * Also here: the seven named shadows. Note shadow-bottom-border is an INSET
 * shadow, not a border — which is why hairlines in this product measure as
 * borders that aren't there.
 *
 * Extracted from application_react_styles-e1f53f20.css. Unedited.
 * Load AFTER tokens.css.
 */

/* Component-scoped tokens the capture references but never declares at :root,
   plus Tailwind v4 gradient initials. Values are theirs where the capture had
   them; the gradient positions are Tailwind's own defaults. Without these,
   the file input collapses and every gradient renders as a flat first stop. */
:root {
  --file-input-border-radius: 3px;
  --file-input-border-width: 2px;
  --file-input-gap: .5rem;
  --file-input-min-height: 60px;
  --file-input-padding: .5rem;
  --file-input-skeleton-icon-size: 1.75rem;
  --file-input-skeleton-text-secondary-height: .75rem;
  --file-input-skeleton-text-secondary-width: 2rem;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
}

/**
 * Tailwind v4 internal defaults.
 *
 * Their production CSS consumes these and relies on Tailwind's @property
 * declarations to initialise them. Those did not survive the capture, and an
 * undefined var poisons the whole shorthand: every named shadow and every
 * spark-table hairline silently computes to `none` without this block.
 * Values are Tailwind v4's own initials.
 */
:root {
  --tw-border-style: solid;
  --tw-shadow: 0 0 #0000;
  /* Three more that exist only at runtime in their app: two Tailwind internals
     and one Radix writes from JS when it measures the viewport. Undefined,
     they poison the declarations that consume them. */
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --radix-dropdown-menu-content-available-height: 100vh;
  --tw-empty: ;
  --tw-shadow-color: initial;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-shadow-color: initial;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 #0000;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 #0000;
}


/* ══ app shell · 2 rules ══ */
.app-wrapper {
  flex:1px;
  min-height:0;
  display:flex;
  transform:translateZ(0);
}
.app-main {
  flex:auto;
  display:flex;
}

/* ══ spark-table · 44 rules ══ */
.spark-table {
  border-spacing:0;
  border-collapse:collapse;
  will-change:transform;
  width:100%;
  max-width:100%;
  font-size:13px;
}
.spark-table th,.spark-table td {
  text-align:left;
  vertical-align:top;
  border-top-style:var(--tw-border-style);
  border-color:#f5f5f5;
  border-top-width:1px;
  border-color:var(--color-gray-25);
}
.spark-table th {
  font-weight:500;
}
.spark-table-wrapper tbody td {
  white-space:nowrap;
}
.spark-table-wrapper .sticky-right {
  padding-inline-start:8px;
  padding-inline-end:8px;
  padding-inline:var(--spacing-4);
  background-color:inherit;
  z-index:1;
  background:0 0;
  width:48px;
  min-width:48px;
  position:sticky;
  top:auto;
  right:0;
}
.spark-table th:not(:last-child),.spark-table td:not(:last-child) {
  padding-right:6px!important;
}
.spark-table th:not(:first-child),.spark-table td:not(:first-child) {
  padding-left:6px!important;
}
/* Their `.spark-table { font-size: 13px }` is the table DEFAULT; every cell's
   content is wrapped in a Text component at `body-sm`, so what actually renders
   is 12px. Measured two independent ways against 02-work-orders-index.jpg:
   "AC101" is 33px there vs 36px at 13px here, and "Engine Oil & Filter
   Replacement" 172px vs 191px — the same 1.09-1.11 ratio, which is 13/12.
   The reference is 1:1 (its rail measures exactly 220px), so this is not scale. */
.spark-table th, .spark-table td { font-size: var(--font-size-sm); }
.spark-table thead tr th {
  z-index:3;
  border-color:#e7e7e7;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-color:var(--border-color-secondary);
  background-color:#fff;
  background-color:var(--color-white);
  position:sticky;
  top:0;
}
.spark-table td.safari-sticky-right-fix {
  width:1px;
  padding:0;
  padding-left:1px!important;
}
.spark-table-wrapper tr.active {
  background-color:#e7faec;
  background-color:var(--background-color-fill-brand-tertiary);
}
.spark-table-wrapper[data-stuck=true] .sticky-right {
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.dark .spark-table-wrapper[data-stuck=true] .sticky-right {
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.spark-table-wrapper tbody tr .sticky-right:before {
  content:"";
  pointer-events:none;
  width:32px;
  position:absolute;
  top:0;
  bottom:0;
  left:-32px;
}
.spark-table-wrapper tbody tr[data-hovered=true] .sticky-right:before {
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.dark .spark-table-wrapper tbody tr[data-hovered=true] .sticky-right:before {
  --tw-gradient-position:to right in oklab;
  background-image:linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from:transparent;
  --tw-gradient-to:#323333e6;
}
.dark .spark-table-wrapper tbody tr[data-hovered=true] .sticky-right:before {
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.spark-table-wrapper tbody tr.highlight[data-hovered=true] .sticky-right:before {
  --tw-gradient-position:to right in oklab;
  background-image:linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from:transparent;
  --tw-gradient-to:#e7faece6;
}
.spark-table-wrapper tbody tr.highlight[data-hovered=true] .sticky-right:before {
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.dark .spark-table-wrapper tbody tr.highlight[data-hovered=true] .sticky-right:before {
  --tw-gradient-position:to right in oklab;
  background-image:linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from:transparent;
  --tw-gradient-to:var(--color-gray-800);
  --tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.spark-table-wrapper tbody tr .sticky-right>:not(:has(button[aria-expanded=true])) {
  opacity:0;
}
.spark-table-wrapper .sticky-right:focus-within>*,.spark-table-wrapper tbody tr[data-hovered=true] .sticky-right>* {
  opacity:1!important;
}
.spark-table-wrapper tbody .sticky-right button[aria-expanded=true] {
  background-color:#f5f5f5;
  background-color:var(--color-gray-25);
}
.spark-table-wrapper tbody .sticky-right button[aria-expanded=true] {
  opacity:1!important;
}
.spark-table-container {
  height:100%;
  position:relative;
}
.spark-table-container .table-overlay {
  padding:32px;
  padding:var(--spacing-8);
}
.spark-table-wrapper {
  min-width:100%;
  height:100%;
  position:relative;
  overflow:auto!important;
}
.spark-table-wrapper.content-align-top table th,.spark-table-wrapper.content-align-top table td {
  vertical-align:top!important;
}
.spark-table-wrapper tbody tr {
  background-color:#fff;
  background-color:var(--color-white);
}
.spark-table-wrapper tbody tr.warn td:first-child {
  border-left:0;
  position:relative;
}
.spark-table-wrapper tbody tr.info td:first-child {
  border-left-style:var(--tw-border-style);
  border-left-width:0;
  position:relative;
}
.spark-table-wrapper tbody tr.success td:first-child {
  border-left:0;
  position:relative;
}
.spark-table-wrapper tbody tr.error td:first-child {
  border-left:0;
  position:relative;
}
.spark-table-wrapper tbody tr.mute td:first-child {
  border-left:0;
  position:relative;
}
.spark-table-wrapper tbody tr.error:last-child td:first-child:before,.spark-table-wrapper tbody tr.info:last-child td:first-child:before,.spark-table-wrapper tbody tr.warn:last-child td:first-child:before,.spark-table-wrapper tbody tr.success:last-child td:first-child:before,.spark-table-wrapper tbody tr.mute:last-child td:first-child:before {
  bottom:0;
}
:is(.spark-table-wrapper tbody tr.highlight,.spark-table-wrapper tbody tr.highlight[data-hovered=true]):where(.dark,.dark *) {
  background-color:#464747;
  background-color:var(--color-gray-800);
}
.spark-table-wrapper tbody tr[data-hovered=true]:where(.dark,.dark *) {
  background-color:#323333;
  background-color:var(--color-gray-900);
}
.spark-table th[data-size=fit],.spark-table td[data-size=fit] {
  width:1%;
}
.spark-table th[data-is-sorted=false] svg {
  opacity:0;
}
.spark-table th,.spark-table td {
  padding-inline-start:16px;
  padding-inline-end:16px;
  padding-inline:var(--spacing-6);
  padding-block-start:8px;
  padding-block-end:8px;
  padding-block:var(--spacing-4);
}
.spark-table td.value-cell {
  position:relative;
}
.spark-table td.value-cell.header-right:empty:after {
  color:var(--color-gray-100);
}
.spark-table td.value-cell.header-right:empty:after {
  content:"—";
  margin-top:-10px;
  position:absolute;
  top:50%;
  right:6px;
}
.spark-table-wrapper .spark-table-group-header-row {
  z-index:2;
  background-color:#0000;
  background-image:linear-gradient(#0000,#fff 25%);
  background-image:linear-gradient(to bottom,transparent,var(--color-white) 25%);
  position:sticky;
  top:20px;
}
.spark-table-wrapper .spark-table-group-header-row td {
  border-right-style:solid;
  border-right-style:var(--tw-border-style);
  border-bottom-style:solid;
  border-right-width:0;
  border-bottom-style:var(--tw-border-style);
  border-bottom-width:2px;
  border-left-style:solid;
  border-left-style:var(--tw-border-style);
  --tw-border-style:solid;
  border-style:solid;
  border-color:#e7e7e7;
  border-left-width:0;
  border-color:var(--border-color-secondary);
}
.spark-table-wrapper .spark-table-group-header-row+tr td {
  border-top-style:var(--tw-border-style);
  border-top-width:0;
}

/* ══ spark-menu · 12 rules ══ */
.dark .spark-menu__content {
  box-shadow:0 1px 12px #0006,0 0 2px #0003,0 0 0 1px #595959;
  box-shadow:var(--shadow-menu-dark);
}
.spark-menu__content [data-radix-collection-item]:-webkit-any([data-highlighted],:hover):not([aria-disabled]) {
  background-color:#f5f5f5;
  background-color:var(--background-color-fill-primary-hover);
}
.spark-menu__content [data-radix-collection-item]:is([data-highlighted],:hover):not([aria-disabled]) {
  background-color:#f5f5f5;
  background-color:var(--background-color-fill-primary-hover);
}
.spark-menu__content [data-radix-collection-item]:-moz-any([aria-disabled],[disabled],[data-display-as-disabled]) {
  color:var(--text-color-tertiary);
  cursor:not-allowed;
  pointer-events:none;
  background-color:#0000;
}
.spark-menu__content [data-radix-collection-item]>[data-columns] {
  pointer-events:none;
}
.spark-menu__content [data-radix-collection-item][aria-disabled] svg:not(.custom-color) {
  color:var(--text-color-tertiary);
}
.spark-menu__item-main {
  align-items:center;
  min-width:0;
  display:flex;
}
.spark-menu__slot {
  border-radius:6px;
  border-radius:var(--radius-md);
}
.spark-menu__header {
  color:var(--text-color-tertiary);
  font-size:10px;
  font-size:var(--font-size-xs);
  font-weight:500;
  font-weight:var(--font-weight-medium);
  line-height:16px;
  line-height:var(--font-line-height-4);
  padding:8px 12px;
  padding:var(--spacing-4) var(--spacing-5);
  text-transform:uppercase;
}
.spark-menu__item-description {
  flex-direction:column;
  gap:0;
  display:flex;
}
.spark-menu__content [data-radix-collection-item]:focus-visible {
  outline:none;
}
.spark-menu__mouse-trigger {
  pointer-events:auto;
}

/* ══ spark (other) · 9 rules ══ */
.spark-icon--primary {
  color:var(--icon-color-primary);
}
.spark-icon--tertiary {
  color:var(--icon-color-tertiary);
}
.spark-icon--link {
  color:var(--icon-color-link);
}
.spark-icon--info {
  color:var(--icon-color-info);
}
.spark-icon--danger {
  color:var(--icon-color-danger);
}
.spark-icon--magic {
  color:var(--icon-color-magic);
}
.spark-icon--inverse {
  color:var(--icon-color-inverse);
}
.spark-stack-item:empty,.spark-column:empty {
  display:none;
}
.spark-button-focus {
  transition-duration:.15s;
  transition-timing-function:ease-in-out;
}

/* ══ form controls · 33 rules ══ */
.form-input::-moz-placeholder {
  color:var(--color-gray-500);
  opacity:1;
}
.form-input::placeholder,.form-textarea::placeholder {
  color:var(--color-gray-500);
  opacity:1;
}
.form-input::-webkit-date-and-time-value {
  min-height:1.5em;
  text-align:inherit;
}
.form-input::-webkit-datetime-edit {
  padding-top:0;
  padding-bottom:0;
}
.form-input::-webkit-datetime-edit-month-field {
  padding-top:0;
  padding-bottom:0;
}
.form-input::-webkit-datetime-edit-hour-field {
  padding-top:0;
  padding-bottom:0;
}
.form-input::-webkit-datetime-edit-second-field {
  padding-top:0;
  padding-bottom:0;
}
.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top:0;
  padding-bottom:0;
}
.form-select:where([size]:not([size="1"])) {
  background-image:none;
  background-image:initial;
  background-position:0 0;
  background-position:initial;
  background-repeat:repeat;
  background-repeat:initial;
  background-size:auto;
  background-size:initial;
  padding-right:4px;
  padding-right:var(--spacing-3);
  -webkit-print-color-adjust:inherit;
  print-color-adjust:inherit;
}
.form-radio {
  border-radius:100%;
}
.form-checkbox:checked,.form-radio:checked {
  background-color:currentColor;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-color:#0000;
}
.form-radio:checked {
  background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.form-checkbox:checked:hover,.form-checkbox:checked:focus,.form-radio:checked:hover,.form-radio:checked:focus {
  background-color:currentColor;
  border-color:#0000;
}
.form-checkbox:indeterminate:hover,.form-checkbox:indeterminate:focus {
  background-color:currentColor;
  border-color:#0000;
}
.form-checkbox {
  border-radius:4px;
  border-radius:var(--radius);
  border-style:var(--tw-border-style);
  background-color:#fff;
  background-color:var(--background-color-fill-primary);
  border-color:#d4d4d4;
  border-color:var(--border-color-primary);
  border-width:1px;
  box-shadow:0 1px 1px #00000014;
}
.form-checkbox:checked,.form-radio:checked {
  background-color:#00884b;
  background-color:var(--background-color-fill-brand);
}
:-moz-any(.form-checkbox:checked,.form-radio:checked):focus {
  background-color:#00884b;
  background-color:var(--background-color-fill-brand);
}
:-webkit-any(.form-checkbox:checked,.form-radio:checked):hover {
  background-color:#00884b;
  background-color:var(--background-color-fill-brand);
}
:is(.form-checkbox:checked,.form-radio:checked):hover {
  background-color:#00884b;
  background-color:var(--background-color-fill-brand);
}
.form-checkbox:indeterminate {
  background:#00884b url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='9' height='3' x='3.5' y='6' /%3E%3C/svg%3E") 50%/100% 100% no-repeat;
  background-color:var(--background-color-fill-brand);
  border-color:#0000;
  box-shadow:0 1px 1px #00000014;
}
.form-radio {
  border-style:var(--tw-border-style);
  background-color:#fff;
  background-color:var(--background-color-fill-primary);
  border-width:1px;
  border-color:#d4d4d4;
  border-color:var(--border-color-primary);
}
:-webkit-any(.form-checkbox,.form-select,.form-input,.form-textarea,.form-multiselect,.form-radio):focus {
  outline-offset:0;
  box-shadow:0 0 0 3px #c7f1d5;
  box-shadow:0 0 0 3px var(--background-color-fill-brand-secondary);
  border-color:#4fbd81!important;
  border-color:var(--border-color-focus)!important;
  outline:none!important;
}
:is(.form-checkbox,.form-select,.form-input,.form-textarea,.form-multiselect,.form-radio):focus {
  outline-offset:0;
  box-shadow:0 0 0 3px #c7f1d5;
  box-shadow:0 0 0 3px var(--background-color-fill-brand-secondary);
  border-color:#4fbd81!important;
  border-color:var(--border-color-focus)!important;
  outline:none!important;
}
:is(.form-input,.form-multiselect,.form-select,.form-textarea)::-moz-placeholder {
  color:var(--color-gray-400);
}
:-moz-any(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder {
  color:var(--color-gray-400);
}
:is(.form-input,.form-multiselect,.form-select,.form-textarea)::-moz-placeholder:where() {
  color:var(--color-gray-700);
}
:-moz-any(.form-input,.form-multiselect,.form-select,.form-textarea)::placeholder:where() {
  color:var(--color-gray-700);
}
select.form-select {
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L7.29289 8.29289C6.90237 8.68342 6.90237 9.31658 7.29289 9.70711C7.68342 10.0976 8.31658 10.0976 8.70711 9.70711L12 6.41421L15.2929 9.70711C15.6834 10.0976 16.3166 10.0976 16.7071 9.70711C17.0976 9.31658 17.0976 8.68342 16.7071 8.29289L12.7071 4.29289Z' fill='%23C2C1C0'/%3e%3cpath d='M8.70711 14.2929C8.31658 13.9024 7.68342 13.9024 7.29289 14.2929C6.90237 14.6834 6.90237 15.3166 7.29289 15.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071L16.7071 15.7071C17.0976 15.3166 17.0976 14.6834 16.7071 14.2929C16.3166 13.9024 15.6834 13.9024 15.2929 14.2929L12 17.5858L8.70711 14.2929Z' fill='%23C2C1C0'/%3e%3c/svg%3e ");
  background-position:right 8px center;
  background-repeat:no-repeat;
  background-size:18px 18px;
}
.form-input:-moz-read-only {
  cursor:default;
  box-shadow:none;
  outline:none;
  border-color:#d4d4d4!important;
  border-color:var(--border-color-primary)!important;
}
.form-input:disabled {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-secondary);
  opacity:.5;
  box-shadow:none;
  outline:none;
  border-color:#d4d4d4!important;
  border-color:var(--border-color-primary)!important;
  cursor:not-allowed!important;
}
:-webkit-any(.form-multiselect,.form-select):disabled {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-secondary);
  opacity:.5;
  box-shadow:none;
  outline:none;
  border-color:#d4d4d4!important;
  border-color:var(--border-color-primary)!important;
  cursor:not-allowed!important;
}
:is(.form-multiselect,.form-select):disabled {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-secondary);
  opacity:.5;
  box-shadow:none;
  outline:none;
  border-color:#d4d4d4!important;
  border-color:var(--border-color-primary)!important;
  cursor:not-allowed!important;
}
.form-textarea:disabled {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-secondary);
  opacity:.5;
  box-shadow:none;
  outline:none;
  border-color:#d4d4d4!important;
  border-color:var(--border-color-primary)!important;
  cursor:not-allowed!important;
}

/* ══ file input · 13 rules ══ */
.file-input-container {
  width:100%;
  min-height:60px;
  min-height:var(--file-input-min-height);
  border-width:2px;
  border-width:var(--file-input-border-width);
  border-radius:3px;
  border-radius:var(--file-input-border-radius);
  padding:.5rem;
  padding:var(--file-input-padding);
  border-style:dashed;
  align-items:center;
  display:flex;
}
.file-input-dropzone {
  justify-content:flex-start;
  transition-property:color,background-color,border-color;
  transition-duration:.15s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.file-input-dropzone:not(.file-input-disabled):not(.file-input-dragging):hover {
  border-color:#e7e7e7;
  border-color:var(--border-color-secondary);
}
.file-input-dropzone.file-input-dragging {
  background-color:#e7faec;
  background-color:var(--background-color-fill-brand-tertiary);
  border-color:#28a466;
  border-color:var(--border-color-brand);
}
.file-input-file-item {
  justify-content:space-between;
}
.file-input-skeleton {
  justify-content:flex-start;
  animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;
}
.file-input-disabled-wrapper {
  opacity:.5;
  pointer-events:none;
}
.file-input-skeleton-icon {
  height:1.75rem;
  height:var(--file-input-skeleton-icon-size);
  width:1.75rem;
  width:var(--file-input-skeleton-icon-size);
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
  border-radius:3px;
  border-radius:var(--file-input-border-radius);
}
.file-input-skeleton-text-secondary {
  height:.75rem;
  height:var(--file-input-skeleton-text-secondary-height);
  width:2rem;
  width:var(--file-input-skeleton-text-secondary-width);
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
  border-radius:3px;
  border-radius:var(--file-input-border-radius);
}
.file-input-preview-link:hover {
  color:var(--text-color-brand);
}
.file-input-file-list {
  gap:.5rem;
  gap:var(--file-input-gap);
  flex-direction:column;
  width:100%;
  display:flex;
}
.file-input-thumbnail-placeholder {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
  border:1px solid #d4d4d4;
  border:1px solid var(--border-color-primary);
  border-radius:4px;
  flex-shrink:0;
  justify-content:center;
  align-items:center;
  display:flex;
}
.file-input-full-preview-image {
  -o-object-fit:contain;
  object-fit:contain;
  width:100%;
  height:auto;
  display:block;
}

/* ══ semantic utils · 61 rules ══ */
.border-brand {
  border-color:#28a466;
  border-color:var(--border-color-brand);
}
.border-info {
  border-color:#2c97da;
  border-color:var(--border-color-info);
}
.border-primary {
  border-color:#d4d4d4;
  border-color:var(--border-color-primary);
}
.border-warning {
  border-color:#ea962f;
  border-color:var(--border-color-warning);
}
.bg-fill-beta {
  background-color:#00847e;
  background-color:var(--background-color-fill-beta);
}
.bg-fill-beta-hover {
  background-color:#00746f;
  background-color:var(--background-color-fill-beta-hover);
}
.bg-fill-beta-secondary-active {
  background-color:#7bceca;
  background-color:var(--background-color-fill-beta-secondary-active);
}
.bg-fill-brand {
  background-color:#00884b;
  background-color:var(--background-color-fill-brand);
}
.bg-fill-brand-active {
  background-color:#0c6643;
  background-color:var(--background-color-fill-brand-active);
}
.bg-fill-brand-secondary {
  background-color:#c7f1d5;
  background-color:var(--background-color-fill-brand-secondary);
}
.bg-fill-brand-secondary-active {
  background-color:#77d29c;
  background-color:var(--background-color-fill-brand-secondary-active);
}
.bg-fill-brand-tertiary {
  background-color:#e7faec;
  background-color:var(--background-color-fill-brand-tertiary);
}
.bg-fill-brand-tertiary-active {
  background-color:#9ee3b8;
  background-color:var(--background-color-fill-brand-tertiary-active);
}
.bg-fill-danger {
  background-color:#dd3628;
  background-color:var(--background-color-fill-danger);
}
.bg-fill-danger-hover {
  background-color:#c62a21;
  background-color:var(--background-color-fill-danger-hover);
}
.bg-fill-danger-secondary-active {
  background-color:#fbaca7;
  background-color:var(--background-color-fill-danger-secondary-active);
}
.bg-fill-info {
  background-color:#007bc4;
  background-color:var(--background-color-fill-info);
}
.bg-fill-info-hover {
  background-color:#006bb0;
  background-color:var(--background-color-fill-info-hover);
}
.bg-fill-info-secondary-active {
  background-color:#81c8f5;
  background-color:var(--background-color-fill-info-secondary-active);
}
.bg-fill-inverse {
  background-color:#323333;
  background-color:var(--background-color-fill-inverse);
}
.bg-fill-inverse-active {
  background-color:#595959;
  background-color:var(--background-color-fill-inverse-active);
}
.bg-fill-inverse-secondary {
  background-color:#686868;
  background-color:var(--background-color-fill-inverse-secondary);
}
.bg-fill-inverse-secondary-hover {
  background-color:#767676;
  background-color:var(--background-color-fill-inverse-secondary-hover);
}
.bg-fill-magic-active {
  background-color:#524dab;
  background-color:var(--background-color-fill-magic-active);
}
.bg-fill-magic-secondary {
  background-color:#e6e6fa;
  background-color:var(--background-color-fill-magic-secondary);
}
.bg-fill-magic-secondary-hover {
  background-color:#d3d0f6;
  background-color:var(--background-color-fill-magic-secondary-hover);
}
.bg-fill-primary-active {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-primary-active);
}
.bg-fill-secondary {
  background-color:#f5f5f5;
  background-color:var(--background-color-fill-secondary);
}
.bg-fill-secondary-active {
  background-color:#d4d4d4;
  background-color:var(--background-color-fill-secondary-active);
}
.bg-fill-success {
  background-color:#00884b;
  background-color:var(--background-color-fill-success);
}
.bg-fill-success-hover {
  background-color:#067748;
  background-color:var(--background-color-fill-success-hover);
}
.bg-fill-success-secondary-active {
  background-color:#77d29c;
  background-color:var(--background-color-fill-success-secondary-active);
}
.bg-fill-tertiary {
  background-color:#e7e7e7;
  background-color:var(--background-color-fill-tertiary);
}
.bg-fill-tertiary-hover {
  background-color:#d4d4d4;
  background-color:var(--background-color-fill-tertiary-hover);
}
.bg-fill-transparent-active {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-active);
}
.bg-fill-transparent-secondary {
  background-color:#00000017;
  background-color:var(--background-color-fill-transparent-secondary);
}
.bg-fill-transparent-secondary-hover {
  background-color:#0000002b;
  background-color:var(--background-color-fill-transparent-secondary-hover);
}
.bg-fill-warning-active {
  background-color:#d9721e;
  background-color:var(--background-color-fill-warning-active);
}
.bg-fill-warning-secondary {
  background-color:#ffe5a2;
  background-color:var(--background-color-fill-warning-secondary);
}
.bg-fill-warning-secondary-hover {
  background-color:#fece57;
  background-color:var(--background-color-fill-warning-secondary-hover);
}
.bg-surface-beta {
  background-color:#e3faf8;
  background-color:var(--background-color-surface-beta);
}
.bg-surface-danger {
  background-color:#fff2f2;
  background-color:var(--background-color-surface-danger);
}
.bg-surface-info {
  background-color:#ecf7fe;
  background-color:var(--background-color-surface-info);
}
.bg-surface-primary {
  background-color:#fff;
  background-color:var(--background-color-surface-primary);
}
.bg-surface-success {
  background-color:#e7faec;
  background-color:var(--background-color-surface-success);
}
.bg-surface-warning {
  background-color:#fff5da;
  background-color:var(--background-color-surface-warning);
}
.text-beta {
  color:var(--text-color-beta);
}
.text-beta-on-bg-fill {
  color:var(--text-color-beta-on-bg-fill);
}
.text-brand {
  color:var(--text-color-brand);
}
.text-brand-large {
  color:var(--text-color-brand-large);
}
.text-danger {
  color:var(--text-color-danger);
}
.text-danger-on-bg-fill {
  color:var(--text-color-danger-on-bg-fill);
}
.text-info {
  color:var(--text-color-info);
}
.text-info-on-bg-fill {
  color:var(--text-color-info-on-bg-fill);
}
.text-magic {
  color:var(--text-color-magic);
}
.text-magic-on-bg-fill {
  color:var(--text-color-magic-on-bg-fill);
}
.text-secondary {
  color:var(--text-color-secondary);
}
.text-success-large {
  color:var(--text-color-success-large);
}
.text-success\/70 {
  color:#067748b3;
}
.text-warning\! {
  color:var(--text-color-warning)!important;
}
.text-warning-on-bg-fill {
  color:var(--text-color-warning-on-bg-fill);
}

/* ══ named shadows · 5 rules ══ */
.shadow-bottom-border {
  --tw-shadow:inset 0 -1px 0 0 var(--tw-shadow-color,var(--color-gray-50));
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), inset 0 -1px 0 0 #e7e7e7;
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-menu\! {
  --tw-shadow:0 12px 24px 0px var(--tw-shadow-color,#0003), 0 2px 4px 0px var(--tw-shadow-color,#0000000d), 0 0 1px var(--tw-shadow-color,#0000004d)!important;
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 12px 24px 0px #0003, 0 2px 4px 0px #0000000d, 0 0 1px #0000004d!important;
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important;
}
.shadow-outline {
  --tw-shadow:0 0 0 3px var(--tw-shadow-color,var(--background-color-fill-brand-secondary));
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 0 3px #c7f1d5;
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sticky {
  --tw-shadow:0 0 16px var(--tw-shadow-color,#0003);
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 16px #0003;
  box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.\[\&_\.shadow-select-menu\]\:z-\[21\] .shadow-select-menu {
  z-index:21;
}

/* ══ keyframes · 11 ══ */
@keyframes fds-feature-callout-popper-in{0%{opacity:0}to{opacity:1}}
@keyframes fds-text-animation-shine{0%{background-position:0%}to{background-position:200%}}
@keyframes fds-magic-pulse{0%,to{opacity:1}50%{opacity:.35}}
@keyframes spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
@keyframes fade{0%{opacity:0}to{opacity:1}}
@keyframes slide-and-fade{0%{opacity:0;transform:translate(1.5rem)}to{opacity:1;transform:translate(0)}}
@keyframes spin-pause{0%{transform:rotate(0)}75%{transform:rotate(360deg)}to{transform:rotate(360deg)}}
@keyframes ellipsis{0%{opacity:.2}30%{opacity:1}60%{opacity:.2}to{opacity:.2}}
@keyframes ping{75%,to{opacity:0;transform:scale(2)}}
@keyframes pulse{50%{opacity:.5}}

/* ── vendor/index-page.css ─────────────────────────── */
/**
 * The Index archetype — page header, saved-view tabs, toolbar, table, pagination.
 *
 * Extracted verbatim from work-orders.html, which is the screen three rounds of
 * measurement were spent tuning: the 12px header and cell type, the joined
 * pager, the brand-tinted segmented view control, the folder-tab strip. Writing
 * this fresh would have thrown that away — every index page now inherits it.
 *
 * Shared, not inlined per page, so gate G5's rule count and G9's invariant scan
 * still mean something.
 */
/* ════════════════════════════════════════════════════════════════════════════
   Work Orders index — the table archetype.

   Layout is grid + flex only. Absolute/fixed positioning appears exclusively
   for genuinely floating UI: menu panels, the Learn popover, toasts.
   Every colour resolves through tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter Variable';
  src:url('../fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

/* Tailwind-v4 plumbing the extracted production CSS consumes but never declares.
   Without it every spark-table hairline and all seven named shadows compute to none. */
:root{
  --tw-border-style:solid;
  --tw-shadow:0 0 #0000;
  --tw-inset-shadow:0 0 #0000;
  --tw-inset-ring-shadow:0 0 #0000;
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --font-size-default:13px;      /* fds-button--lg consumes this */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter Variable',Inter,system-ui,'Segoe UI',Arial,sans-serif;
  font-size:var(--font-size-md);            /* 13px */
  line-height:var(--font-line-height-5);    /* 20px */
  color:var(--text-color-primary);
  background:var(--background-color-surface-primary);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
svg{display:block;flex:none}
a{color:inherit}

/* app.js scales fixed-size artboards to the window; this screen is fluid, so
   an inline transform must never land on the shell frame. Inline styles lose
   to !important. */
.fx{transform:none!important}

/* ── shared type helpers ─────────────────────────────────────────────────── */
.t-secondary{font-size:var(--font-size-sm);color:var(--text-color-secondary)}
.t-micro{
  font-size:var(--font-size-xs);line-height:var(--font-line-height-4);
  font-weight:var(--font-weight-semibold);text-transform:uppercase;
  letter-spacing:var(--font-letter-spacing-wide);color:var(--text-color-tertiary);
}
.link{
  color:var(--text-color-link);text-decoration:underline;
  text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:2px;
  cursor:pointer;
}
.link:hover{color:var(--text-color-link-hover)}
.dot{width:7px;height:7px;border-radius:var(--radius-full);flex:none}
.dot--success{background:var(--background-color-fill-success)}
.dot--brand{background:var(--background-color-fill-brand)}
.dot--open{background:var(--color-green-300)}
.dot--warning{background:var(--background-color-fill-warning-active)}
.dot--danger{background:var(--background-color-fill-danger)}
.dot--info{background:var(--background-color-fill-info)}
.dot--muted{background:var(--color-gray-300)}
.status-cell{display:flex;align-items:center;gap:var(--spacing-4)}
.emdash{color:var(--color-gray-200)}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:0;border-radius:var(--radius-md);
  background:var(--background-color-fill-transparent);color:var(--icon-color-primary);
  cursor:pointer;padding:0;
}
.icon-btn:hover{background:var(--background-color-fill-transparent-hover)}
.icon-btn[aria-expanded="true"]{background:var(--background-color-fill-transparent-secondary)}
.icon-btn--sm{width:24px;height:24px}

/* ── this screen's region inside the shell ───────────────────────────────── */
/* The shell's body is the scroll region; the page fills it and the table keeps
   its own, so the header row stays put while rows scroll under it. */
[data-page]{
  height:100%;min-height:0;display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  background:var(--background-color-surface-primary);
}

/* page header */
.pagehead{display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-5) var(--spacing-6) var(--spacing-4)}
.pagehead h1{
  margin:0;font-size:var(--font-size-2xl);line-height:var(--font-line-height-8);
  font-weight:var(--font-weight-bold);letter-spacing:var(--font-letter-spacing-tight);
}
.pagehead__right{margin-left:auto;display:flex;align-items:center;gap:var(--spacing-4)}
.learnchip{
  display:inline-flex;align-items:center;gap:var(--spacing-3);height:24px;
  padding:0 var(--spacing-4);border-radius:var(--radius-full);border:0;cursor:pointer;
  background:var(--background-color-fill-magic-secondary);color:var(--text-color-magic);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);
}
.learnchip:hover{background:var(--background-color-fill-brand-secondary)}

/* saved-view tab strip — the active tab is a folder that breaks the hairline */
.tabstrip{
  display:flex;align-items:flex-end;gap:var(--spacing-3);
  padding:0 var(--spacing-6) 0 var(--spacing-2);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
}
.tab{
  position:relative;top:1px;display:inline-flex;align-items:center;gap:var(--spacing-3);
  height:37px;padding:0 var(--spacing-6);border:var(--border-width-border) solid transparent;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:none;cursor:pointer;
  color:var(--text-color-secondary);font-size:var(--font-size-md);white-space:nowrap;
}
.tab:hover{color:var(--text-color-primary)}
.tab[aria-selected="true"]{
  background:var(--background-color-surface-primary);
  border-color:var(--border-color-secondary);
  border-bottom-color:var(--background-color-surface-primary);
  color:var(--text-color-primary);font-weight:var(--font-weight-medium);
}
.tab__more{
  display:none;width:18px;height:18px;border:0;border-radius:var(--radius-sm);
  background:none;cursor:pointer;place-items:center;color:var(--icon-color-tertiary);
}
.tab[aria-selected="true"] .tab__more{display:grid}
.tab__more:hover{background:var(--background-color-fill-transparent-secondary)}
.tab--add{color:var(--text-color-secondary)}

/* toolbar */
.toolbar{
  display:flex;align-items:center;gap:var(--spacing-4);flex-wrap:wrap;
  padding:10px var(--spacing-6) 11px;
}
.psearch{
  display:flex;align-items:center;gap:var(--spacing-4);height:28px;width:203px;
  padding:0 var(--spacing-5);border-radius:var(--radius-full);
  border:var(--border-width-border) solid var(--border-color-primary);
  background:var(--background-color-fill-primary);
}
.psearch:focus-within{
  border-color:var(--border-color-focus);
  box-shadow:0 0 0 3px var(--background-color-fill-brand-secondary);
}
.psearch input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:var(--font-size-md)}
.psearch input::placeholder{color:var(--color-gray-500)}
.chips{display:flex;align-items:center;gap:var(--spacing-3);flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:var(--spacing-3);height:24px;
  padding:0 var(--spacing-3) 0 var(--spacing-4);border-radius:var(--radius-full);
  background:var(--background-color-fill-brand-secondary);color:var(--text-color-brand);
  font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);
  border:var(--border-width-border) solid transparent;
}
.chip b{font-weight:var(--font-weight-semibold)}
.chip button{
  border:0;background:none;padding:0;cursor:pointer;color:inherit;
  display:grid;place-items:center;width:14px;height:14px;border-radius:var(--radius-full);
}
.chip button:hover{background:var(--background-color-fill-brand-secondary-active)}
.toolbar__right{margin-left:auto;display:flex;align-items:center;gap:var(--spacing-4)}
.count{color:var(--text-color-secondary);white-space:nowrap}
.pager{display:flex;align-items:center}
.pager .fds-button{
  padding-inline:var(--spacing-3);border-radius:0;
  border-left-width:0;box-shadow:none;
}
.pager .fds-button:first-child{
  border-left-width:1px;
  border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);
}
.pager .fds-button:last-child{
  border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);
}
.pager .fds-button--disabled,.pager .fds-button[disabled]{
  background:var(--background-color-fill-tertiary);
  color:var(--icon-color-tertiary);cursor:default;
}
.viewgroup{
  display:flex;align-items:center;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border-color-primary);
  background:var(--background-color-surface-primary);
}
.viewgroup button{
  width:31px;height:28px;border:0;border-left:1px solid var(--border-color-primary);
  border-radius:0;cursor:pointer;background:none;
  color:var(--icon-color-primary);display:grid;place-items:center;
}
.viewgroup button:first-child{border-left:0}
.viewgroup button[aria-pressed="true"]{
  background:var(--background-color-fill-brand-secondary);color:var(--icon-color-brand);
}

/* selection bar */
.selbar{
  display:none;align-items:center;gap:var(--spacing-4);
  padding:var(--spacing-3) var(--spacing-6);
  background:var(--background-color-fill-brand-tertiary);
  border-top:var(--border-width-border) solid var(--border-color-secondary);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
}
.selbar[data-on="true"]{display:flex}
.selbar b{font-weight:var(--font-weight-semibold)}

/* ── the table — bare white, no card, no border, no radius ───────────────── */
.tablearea{min-height:0;min-width:0;position:relative;background:var(--background-color-surface-primary)}
.spark-table-wrapper{height:100%}
.spark-table{min-width:1480px;max-width:none;table-layout:auto}
.spark-table th,.spark-table td{
  padding:var(--spacing-3) 6px!important;
  vertical-align:middle;
  white-space:nowrap;
}
.spark-table thead tr th{
  /* their header labels are body-sm (12px) — measured: every one of our nine
     labels came out 1.09x too wide, which is exactly 13/12 */
  height:33px;font-size:var(--font-size-sm);padding-block:0!important;
  background:var(--background-color-surface-primary);
  color:var(--text-color-primary);font-weight:var(--font-weight-medium);
  border-bottom-color:var(--color-gray-50);
  box-shadow:none;user-select:none;
}
.spark-table thead th[data-sortable]{cursor:pointer}
.spark-table thead th[data-sortable]:hover{background:var(--background-color-fill-primary-hover)}
.th-inner{display:inline-flex;align-items:center;gap:var(--spacing-3)}
.th-inner svg{opacity:0;color:var(--icon-color-tertiary);transition:opacity .1s}
th[data-sortable]:hover .th-inner svg{opacity:.45}
th[data-is-sorted="true"] .th-inner svg{opacity:1;color:var(--text-color-brand)}
th[data-is-sorted="true"] .th-inner{color:var(--text-color-brand)}
/* their sheet paints rows with --color-white, which is #fff in BOTH themes —
   the semantic surface token is the one that actually flips. */
.spark-table-wrapper tbody tr{background-color:var(--background-color-surface-primary)}
.spark-table tbody td{height:45px;border-top-color:var(--color-gray-25)}
.spark-table tbody tr:hover{background:var(--background-color-fill-primary-hover)}
.spark-table tbody tr.is-selected{background:var(--background-color-fill-brand-tertiary)}
.col-select{width:36px;padding-left:var(--spacing-5)!important}
.cell-vehicle{display:flex;align-items:center;gap:var(--spacing-4)}
.thumb{
  position:relative;width:26px;height:22px;border-radius:var(--radius);flex:none;
  background:var(--background-color-fill-tertiary);color:var(--icon-color-secondary);
  display:grid;place-items:center;
}
.thumb__dot{
  position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:var(--radius-full);
  background:var(--background-color-fill-success);
  outline:1.5px solid var(--background-color-surface-primary);
}
.tasks{display:flex;flex-direction:column;gap:1px;padding-block:var(--spacing-3)}
.tasks .more{color:var(--text-color-secondary);font-size:var(--font-size-sm)}
.num{display:flex;align-items:center;gap:var(--spacing-4)}
.money{font-variant-numeric:tabular-nums}
/* the sticky column must carry the row's own fill, or wide scrolling smears
   content beneath it — and their sheet resets it to transparent */
.spark-table-wrapper tbody .sticky-right{background-color:inherit!important}
.spark-table-wrapper .sticky-right{text-align:right}
.spark-table thead tr th.sticky-right{background:var(--background-color-surface-primary)}
.rowmenu-btn{opacity:.5}
tr:hover .rowmenu-btn,.rowmenu-btn[aria-expanded="true"]{opacity:1}
.emptyrow td{height:120px;text-align:center;color:var(--text-color-secondary)}

/* ── calendar view ───────────────────────────────────────────────────────── */
.viewpane{height:100%;overflow:auto;padding:var(--spacing-6)}
.calhead{display:flex;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-5)}
.calhead h2{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.calgrid{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border:var(--border-width-border) solid var(--border-color-secondary);
  border-radius:var(--radius-lg);overflow:hidden;
}
.calgrid__dow{
  padding:var(--spacing-3) var(--spacing-4);background:var(--background-color-fill-tertiary);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
}
.calcell{
  min-height:96px;padding:var(--spacing-3);
  border-right:var(--border-width-border) solid var(--border-color-secondary);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
  display:flex;flex-direction:column;gap:2px;overflow:hidden;
}
.calcell:nth-child(7n+7){border-right:0}
.calcell--out{background:var(--background-color-fill-secondary);color:var(--text-color-tertiary)}
.calcell__n{font-size:var(--font-size-sm);color:var(--text-color-secondary);margin-bottom:2px}
.calwo{
  display:flex;align-items:center;gap:var(--spacing-3);border-radius:var(--radius);
  padding:1px var(--spacing-3);background:var(--background-color-fill-brand-tertiary);
  font-size:var(--font-size-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-decoration:none;color:var(--text-color-primary);
}
.calwo:hover{background:var(--background-color-fill-brand-secondary)}

/* ── schedule view ───────────────────────────────────────────────────────── */
.week{margin-bottom:var(--spacing-7)}
.week__h{
  display:flex;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-4);
  padding-bottom:var(--spacing-3);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
}
.week__h b{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
.wocards{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--spacing-4)}
.wocard{
  border:var(--border-width-border) solid var(--border-color-secondary);
  border-radius:var(--radius-lg);padding:var(--spacing-5);text-decoration:none;
  display:flex;flex-direction:column;gap:var(--spacing-3);background:var(--background-color-surface-primary);
}
.wocard:hover{border-color:var(--border-color-primary)}
.wocard__top{display:flex;align-items:center;gap:var(--spacing-4)}
.wocard__top b{font-weight:var(--font-weight-semibold)}

/* ── menus (floating) ────────────────────────────────────────────────────── */
.pop-wrap{position:relative;display:inline-flex}
.spark-menu__content{
  position:absolute;z-index:70;top:calc(100% + 4px);right:0;min-width:212px;
  background:var(--background-color-surface-elevated);
  border-radius:var(--radius-md);box-shadow:var(--shadow-menu);
  padding:var(--spacing-3);
}
.spark-menu__content[data-align="left"]{right:auto;left:0}
.spark-menu__content[hidden]{display:none}
.spark-menu__content [data-radix-collection-item]{
  display:flex;align-items:center;gap:var(--spacing-4);width:100%;
  min-height:30px;padding:var(--spacing-2) var(--spacing-4);
  border:0;border-radius:var(--radius);background:none;cursor:pointer;
  color:var(--text-color-primary);font-size:var(--font-size-md);text-align:left;text-decoration:none;
}
.spark-menu__content [data-radix-collection-item][aria-disabled]{
  color:var(--text-color-tertiary);cursor:not-allowed;
}
.spark-menu__content [data-radix-collection-item].is-danger{color:var(--text-color-danger)}
.spark-menu__content .fds-divider{margin:var(--spacing-3) 0}
.menu-check{width:16px;flex:none;color:var(--icon-color-link)}
.menu-note{margin-left:auto;color:var(--text-color-tertiary);font-size:var(--font-size-sm)}

/* filter panel */
.filterpanel{width:300px;padding:var(--spacing-5)}
.filterpanel h3{margin:0 0 var(--spacing-4);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
.fgroup{margin-bottom:var(--spacing-5)}
.fgroup > .t-micro{margin-bottom:var(--spacing-3);display:block}
.fopt{display:flex;align-items:center;gap:var(--spacing-4);min-height:26px;cursor:pointer}
.filterpanel .form-input,.filterpanel .form-select{
  width:100%;height:32px;border-radius:var(--radius);
  border:var(--border-width-border) solid var(--border-color-primary);
  padding:0 var(--spacing-4);background:var(--background-color-fill-primary);
}
.filterpanel__foot{display:flex;gap:var(--spacing-4);justify-content:flex-end;margin-top:var(--spacing-5)}

/* real checkboxes — the extracted preflight neither sizes them nor draws the
   checked tick (their sheet only carries the indeterminate bar), so both are
   drawn here in CSS rather than as an image. */
.form-checkbox{
  appearance:none;-webkit-appearance:none;width:16px;height:16px;flex:none;position:relative;
  margin:0;cursor:pointer;display:inline-block;vertical-align:middle;color:var(--background-color-fill-brand);
}
.form-checkbox:checked:not(:indeterminate)::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:8px;
  border:solid var(--color-white);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ── Learn popover (floating) ────────────────────────────────────────────── */
.learnpop{
  position:absolute;left:50%;transform:translateX(-50%);bottom:var(--spacing-6);z-index:60;
  width:min(640px,calc(100% - 32px));
  background:var(--background-color-surface-elevated);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-menu);
  padding:var(--spacing-7);
  display:grid;grid-template-columns:minmax(0,1fr) 228px;gap:var(--spacing-6);
}
.learnpop[hidden]{display:none}
.learnpop__x{position:absolute;top:var(--spacing-5);right:var(--spacing-5)}
.learnpop h2{margin:var(--spacing-5) 0 var(--spacing-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}
.learnpop p{margin:0 0 var(--spacing-5);font-size:var(--font-size-sm);
  line-height:20px;color:var(--text-color-primary)}
/* the popover's own links are PLAIN green — the dotted underline is an
   opt-in affordance for cross-references in data, not for chrome links */
.learnpop a{text-decoration:none}
.learnpop .fds-button--md{height:30px}
.learnpop__links{display:flex;align-items:center;gap:var(--spacing-7)}
.learncard{
  border:var(--border-width-border) solid var(--border-color-secondary);
  border-radius:var(--radius-lg);padding:var(--spacing-5);
}
.learncard h3{margin:0 0 var(--spacing-4);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}
.learncard__veh{display:flex;align-items:center;gap:var(--spacing-4);margin-bottom:var(--spacing-5)}
.learncard__thumb{
  width:56px;height:42px;border-radius:var(--radius);flex:none;
  background:var(--background-color-fill-tertiary);color:var(--icon-color-secondary);
  display:grid;place-items:center;
}
.learncard__issue{
  display:flex;gap:var(--spacing-4);align-items:flex-start;
  border:var(--border-width-border) solid var(--border-color-secondary);
  border-radius:var(--radius-md);padding:var(--spacing-4);margin-bottom:var(--spacing-5);
}

/* ── toast ───────────────────────────────────────────────────────────────── */
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:200;display:grid;gap:var(--spacing-4)}
.toast{
  background:var(--background-color-fill-inverse);color:var(--text-color-inverse);
  border-radius:var(--radius-md);padding:var(--spacing-4) var(--spacing-6);
  box-shadow:var(--shadow-menu);font-size:var(--font-size-md);
}

/* ── the filter drawer · Overlay archetype ─────────────────────────────────
   Measured from 14-filters-drawer-and-more-menu.jpg and their production CSS.
   It is NOT a floating overlay: their class is
     `page-content-aside bg-surface-primary border-l border-secondary flex flex-col`
   and a JS-sized spacer shrinks the table's track, so the drawer SQUEEZES the
   table rather than covering it — confirmed by measurement, the table's right
   extent moves 1383 -> 972 when it opens. Square corners, no drop shadow; the
   only softening is a 30px pseudo-element to its left carrying a barely-there
   inset shadow at 5% alpha. */
.tablewrap{display:flex;min-height:0;min-width:0}
.tablewrap .tablearea{flex:1 1 auto;min-width:0;min-height:0}
.aside{
  flex:0 0 411px;width:411px;position:relative;display:flex;flex-direction:column;
  background:var(--background-color-surface-primary);
  border-left:var(--border-width-border) solid var(--border-color-secondary);
}
.aside[hidden]{display:none}
.aside::after{
  content:"";pointer-events:none;width:30px;position:absolute;top:0;bottom:0;left:0;
  transform:translate(-100%);box-shadow:inset -12px 0 10px -10px #0000000d;
}
.aside__hd{
  display:flex;align-items:center;height:52px;flex:none;
  padding:0 var(--spacing-6);
  border-bottom:var(--border-width-border) solid var(--border-color-secondary);
}
.aside__hd h3{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
.aside__x{margin-left:auto;border:0;background:none;cursor:pointer;padding:var(--spacing-3);
  color:var(--icon-color-secondary);display:flex}
.aside__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--spacing-6)}
.aside__none{margin:0 0 var(--spacing-6);font-size:var(--font-size-sm);
  color:var(--text-color-secondary)}
/* their Add Filter button spans the drawer's full inner width, 30px tall */
.aside__add{
  display:flex;align-items:center;justify-content:center;gap:var(--spacing-4);
  width:100%;height:30px;border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--background-color-fill-brand);color:var(--text-color-brand-on-bg-fill);
  font:var(--font-weight-semibold) var(--font-size-md)/30px inherit;
}
.aside__lbl{margin:var(--spacing-7) 0 var(--spacing-5);font-size:var(--font-size-sm);
  color:var(--text-color-secondary)}
.aside__pop{display:flex;flex-direction:column;gap:var(--spacing-5);align-items:flex-start}
.aside__pop button{border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:var(--font-size-md);color:var(--text-color-brand);text-align:left}

/* ── filter pills ──────────────────────────────────────────────────────────
   Their CSS has NO chip/facet/token component — these are buttons carrying
   `.fds-button--legacy-filter`: full radius, filled fill-secondary, NO border,
   12px inline padding, and `--toggled` swaps the fill to brand-secondary. */
.filterbar{display:flex;align-items:center;gap:var(--spacing-4);flex-wrap:wrap}

/* An annotated value — a meter reading — carries the dotted underline but stays
   near-black; only a cross-reference to another record is brand-coloured.
   Measured: 2px below the baseline, 1px thick, dash pitch ~2.8px. */
.link--plain{color:var(--text-color-primary)}

/* ── vendor/shell.css ─────────────────────────── */
/**
 * The Fleetio shell — one canonical implementation.
 *
 * Five screens were built independently and each grew its own rail and top bar
 * with its own class names (rail / wod-rail, nav-row / wod-nav-row, topbar /
 * wod-topbar). The chrome that should be identical on every screen was five
 * separate implementations, so a correction landed on one screen and missed the
 * rest. This file, plus shell.js, is the single source.
 *
 * Every value is measured from production. Everything resolves through
 * tokens.css — no literal colours.
 */

/* ── frame ─────────────────────────────────────────────────────────────── */
.fx           { display: flex; flex-direction: column;
                height: 100vh; width: 100vw; overflow: hidden; }
/* the rail + content row, BELOW the full-width system banners */
.fx-split     { flex: 1 1 auto; min-height: 0; display: flex; }
.fx-main      { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fx-body      { flex: 1 1 auto; min-height: 0; overflow: auto;
                background: var(--background-color-primary); }

/* ── rail · 220px, brand gradient, no edge border ──────────────────────── */
.fx-rail      { flex: 0 0 220px; width: 220px; display: flex; flex-direction: column;
                min-height: 0; color: var(--color-green-100);
                background: linear-gradient(180deg,
                            var(--color-green-800) 0%, var(--color-green-950) 100%); }
/* ── collapsed rail ────────────────────────────────────────────────────────
   Measured off the owner's capture of the real collapsed state. It is not the
   expanded rail at a smaller width — the composition changes:
     · the org block goes entirely; only the toggle remains, in its own band
     · "Get Started" becomes the rocket glyph alone
     · labels, sub-items and the plan card are gone; the plan becomes a circled
       up-arrow in the footer group
     · a group still shows it has children — a small caret at the right edge
     · the active row is a filled rounded square PLUS a tab on the rail's left
       edge, which is how you can still tell where you are with no label
   Only setting the width, as this did, left every label wrapping to 3 lines. */
.fx-rail--narrow { flex-basis: 64px; width: 64px; }

/* the toggle sits alone in a band at the top */
.fx-rail--narrow .fx-org       { justify-content: center; padding: var(--spacing-5) 0;
                                 border-bottom: 1px solid var(--color-green-800); }
.fx-rail--narrow .fx-org > div { display: none; }
.fx-rail--narrow .fx-org__tog  { margin: 0; }

/* Get Started collapses to its glyph */
.fx-rail--narrow .fx-start     { width: 40px; height: 36px; margin: var(--spacing-5) auto;
                                 padding: 0; border: 0; justify-content: center; gap: 0; }
.fx-rail--narrow .fx-start > span,
.fx-rail--narrow .fx-start > svg:not(.fx-only-narrow) { display: none; }
/* shown only in the collapsed rail */
.fx-only-narrow { display: none !important; }
.fx-rail--narrow .fx-only-narrow { display: block !important; }

.fx-rail--narrow .fx-row       { width: 40px; margin: 0 auto; padding: 0;
                                 justify-content: center; height: 35px; position: relative;
                                 border-radius: var(--radius-md); }
.fx-rail--narrow .fx-row__lbl,
.fx-rail--narrow .fx-row__badge { display: none; }
.fx-rail--narrow .fx-row__ico  { width: 20px; height: 20px; }

/* a group still declares it has children */
.fx-rail--narrow .fx-row__car  { position: absolute; right: -9px; margin: 0;
                                 width: 7px; height: 7px; transform: none; }
.fx-rail--narrow .fx-row[aria-expanded="true"] .fx-row__car { transform: none; }

/* the active row: filled square + a tab on the rail's outer edge */
.fx-rail--narrow .fx-row[aria-current="page"],
.fx-rail--narrow .fx-row.is-active { background: var(--color-green-700); }
.fx-rail--narrow .fx-row[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 20px; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-green-300);
}

/* sub-items and the plan card have no collapsed form */
.fx-rail--narrow .fx-sub       { display: none !important; }
.fx-rail--narrow .fx-plan      { margin: 0 auto var(--spacing-5); padding: 0; width: 40px;
                                 height: 36px; background: none;
                                 display: flex; align-items: center; justify-content: center; }
.fx-rail--narrow .fx-plan__top,
.fx-rail--narrow .fx-plan__cta { display: none; }
/* the plan card becomes the circled up-arrow their capture shows */
.fx-rail--narrow .fx-plan__ico { display: block; }
.fx-rail--narrow .fx-plan      { border-top: 1px solid var(--color-green-800);
                                 padding-top: var(--spacing-5); margin-top: var(--spacing-4);
                                 height: auto; }
.fx-rail--narrow .fx-foot      { padding-top: 0; }
/* tighter pitch so all 17 destinations fit without scrolling, as in theirs */
.fx-rail--narrow .fx-row       { height: 33px; }

.fx-org       { display: flex; align-items: flex-start; gap: var(--spacing-4);
                padding: 7px var(--spacing-5) var(--spacing-4); }
.fx-org__name { font-size: 13px; font-weight: 600; color: var(--color-white);
                display: flex; align-items: center; gap: var(--spacing-3);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-org__user { font-size: 12px; color: var(--color-green-200); margin-top: var(--spacing-3); }

.fx-start     { margin: 10px var(--spacing-4) 8px; height: 30px;
                border-radius: var(--radius-full); border: 1px solid var(--color-green-700);
                display: flex; align-items: center; gap: var(--spacing-4);
                padding: 0 var(--spacing-5); font-size: 13px; font-weight: 700;
                color: var(--color-white); background: none; cursor: pointer; }

.fx-nav       { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
                scrollbar-width: thin; scrollbar-color: var(--color-green-600) transparent; }
.fx-nav::-webkit-scrollbar       { width: 5px; }
.fx-nav::-webkit-scrollbar-thumb { background: var(--color-green-600); border-radius: var(--radius-full); }

/* a nav row: 33px, icon at 16px, label, then the caret HUGGING the label.
   Right alignment inside a row is reserved for badges alone. */
.fx-row       { display: flex; align-items: center; gap: var(--spacing-5);
                height: 33px; margin: 0 var(--spacing-4); padding: 0 var(--spacing-5);
                border-radius: var(--radius-md); font-size: 13px;
                color: var(--color-green-100); text-decoration: none;
                border: 0; background: none; width: calc(100% - var(--spacing-6));
                cursor: pointer; text-align: left; }
.fx-row:hover { background: var(--color-green-800); color: var(--color-white); }
.fx-row[aria-current="page"],
.fx-row.is-active { background: var(--color-green-700); color: var(--color-white); }
.fx-row__ico  { width: 16px; height: 16px; flex: none; }
.fx-row__lbl  { flex: 0 1 auto; min-width: 0; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.fx-row__car  { width: 9px; height: 9px; flex: none; margin-left: 2px;
                color: var(--color-green-300); transition: transform .12s ease; }
.fx-row[aria-expanded="true"] .fx-row__car { transform: rotate(90deg); }
.fx-row__badge{ margin-left: auto; flex: none; border-radius: var(--radius-full);
                font-size: 10px; font-weight: 600; padding: 0 8px; line-height: 16px;
                background: var(--color-green-600); color: var(--color-white); }
.fx-row__badge--danger { background: var(--background-color-fill-danger);
                         color: var(--text-color-danger-on-bg-fill); }

/* an open group draws a guide line beside its children */
.fx-sub       { position: relative; padding-bottom: 7px; }
.fx-sub::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0;
                  width: 1px; background: var(--color-green-700); }
.fx-sub .fx-row { height: 26px; margin-left: 34px; padding-left: 20px;
                  width: calc(100% - 52px); color: var(--color-green-200); }

.fx-plan      { margin: 0 var(--spacing-4) var(--spacing-5);
                border-radius: var(--radius-lg); background: var(--color-green-700);
                padding: var(--spacing-5); }
.fx-plan__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.fx-plan__ttl { font-size: 12px; font-weight: 700; color: var(--color-white);
                white-space: nowrap; }   /* one line + badge, as in 01-dashboard.jpg */
.fx-plan__day { font-size: 10px; color: var(--color-white);
                background: var(--color-green-600); border-radius: var(--radius-full);
                padding: 0 8px; line-height: 16px; white-space: nowrap; }
.fx-plan__cta { display: block; width: 100%; height: 28px; margin-top: var(--spacing-4);
                border: 0; border-radius: var(--radius-md);
                background: var(--background-color-fill-brand);
                color: var(--text-color-brand-on-bg-fill);
                font: 600 13px/28px inherit; text-align: center;
                text-decoration: none; cursor: pointer; }

.fx-foot      { padding-bottom: var(--spacing-4); flex: none; }

/* ── top bar · 52px, NO shadow — a hairline is the separation ──────────── */
.fx-top       { flex: none; height: 52px; display: flex; align-items: center;
                gap: var(--spacing-6); padding: 0 var(--spacing-6);
                background: var(--background-color-surface-primary);
                border-bottom: 1px solid var(--border-color-secondary);
                box-shadow: none; }
.fx-brand     { display: flex; align-items: center; gap: var(--spacing-4); flex: none; }
.fx-brand__wd { font-size: 18px; font-weight: 700; letter-spacing: -.045em;
                color: var(--text-color-primary); }

/* The brand mark inverts with the theme — green on white, light on the dark
   ground (see screenshots/10-dark-body-class.jpg). Hard-coding the green
   literals left it nearly invisible in dark. The wheels stay dark either way.
   NOTE: the two system BANNERS deliberately do NOT flip — Fleetio's own dark
   mode keeps them light, and the replica reproduces that. */
.fx-mark     { overflow: visible; flex: none; }
.fx-mark__a  { fill: none; stroke: var(--color-gray-950); stroke-width: 1.9;
               stroke-linecap: round; stroke-linejoin: round; }
.fx-mark__a2 { fill: var(--color-gray-950); }
.fx-mark__b  { fill: var(--color-green-500); opacity: .82; }
body.dark .fx-mark__a  { stroke: var(--color-white); }
body.dark .fx-mark__a2 { fill: var(--color-white); }

/* the one control allowed to break the height ladder */
.fx-search    { display: flex; align-items: center; gap: var(--spacing-5);
                margin: 0 auto;
                height: 36px; width: 413px; max-width: 38vw; padding: 0 var(--spacing-5);
                border-radius: var(--radius-full);
                border: 1px solid var(--border-color-secondary);
                background: var(--background-color-surface-primary); }
.fx-search input { all: unset; flex: 1 1 auto; min-width: 0; font: inherit;
                   font-size: 13px; color: var(--text-color-primary); }
.fx-search input::placeholder { color: var(--text-color-tertiary); opacity: 1; }

.fx-top__end  { display: flex; align-items: center; gap: var(--spacing-4); }
.fx-icobtn    { width: 30px; height: 30px; display: flex; align-items: center;
                justify-content: center; border: 0; background: none;
                border-radius: var(--radius-md); color: var(--text-color-secondary);
                cursor: pointer; position: relative; }
.fx-icobtn:hover { background: var(--background-color-surface-secondary); }
/* the help control carries an unread count — a filled amber disc clipped to
   the button's top-right corner (from the owner's capture) */
.fx-icobtn__n { position: absolute; top: -1px; right: -1px; min-width: 15px; height: 15px;
                border-radius: var(--radius-full); background: var(--color-yellow-200);
                color: var(--color-yellow-900); font-size: 10px; font-weight: 600;
                line-height: 16px; text-align: center; padding: 0 var(--spacing-3);
                border: 2px solid var(--background-color-surface-primary); }

.fx-avatar    { width: 28px; height: 28px; border-radius: var(--radius-full);
                display: flex; align-items: center; justify-content: center;
                font-size: 12px; font-weight: 600; color: var(--color-white);
                background: var(--color-yellow-200); flex: none; }

/* ── system banners · tonal actions, never white or brand ──────────────── */
.fx-band      { flex: none; display: flex; align-items: center; justify-content: center;
                gap: var(--spacing-4); font-size: 13px; padding: 0 var(--spacing-6);
                position: relative; }
.fx-band--ok  { height: 40px; color: var(--color-green-900);
                background: linear-gradient(90deg,
                            var(--color-green-100), var(--color-green-50)); }
.fx-band--warn{ height: 30px; color: var(--color-yellow-800);
                background: var(--color-yellow-50); }
.fx-band__act { height: 24px; padding: 0 var(--spacing-5); border: 0;
                border-radius: var(--radius); font-size: 12px; font-weight: 600;
                background: var(--color-yellow-200); color: var(--color-yellow-900);
                cursor: pointer; }
.fx-band__x   { position: absolute; right: var(--spacing-6); border: 0;
                background: none; color: inherit; cursor: pointer;
                display: flex; align-items: center; }

/* ── menus ─────────────────────────────────────────────────────────────── */
.fx-menu      { position: absolute; z-index: 100; min-width: 175px;
                background: var(--background-color-surface-primary);
                border-radius: var(--radius-lg); padding: var(--spacing-3);
                box-shadow: var(--shadow-menu, 0 12px 24px #0003, 0 2px 4px #0000000d, 0 0 1px #0000004d); }
.fx-menu[hidden] { display: none; }
.fx-menu a:not(.fds-button), .fx-menu button:not(.fds-button) {
                display: flex; align-items: center; gap: var(--spacing-4); width: 100%;
                padding: var(--spacing-4) var(--spacing-5); border: 0; background: none;
                border-radius: var(--radius-md); font: inherit; font-size: 13px;
                color: var(--text-color-primary); text-decoration: none;
                text-align: left; cursor: pointer; }
.fx-menu a:not(.fds-button):hover,
.fx-menu button:not(.fds-button):hover { background: var(--background-color-surface-secondary); }
.fx-menu hr   { border: 0; border-top: 1px solid var(--border-color-secondary);
                margin: var(--spacing-3) 0; }

/* ── icons · one <use> against the injected sprite (icons.js) ───────────────
   Their set is drawn as SOLID glyphs taking currentColor on a 24px grid — not
   stroked outlines. An inline <path> anywhere outside .fx-brand is a
   hand-drawn glyph and fails gate G11. */
.i           { display: block; flex: none; fill: currentColor; }
.i * { fill: currentColor; }

/* ── top-bar menus and the shell's own toast layer ─────────────────────────
   Their menus put the LABEL left and the GLYPH right (07-quick-add-menu.jpg),
   with a 10px uppercase section header and hairline separators. */
.fx-pop        { position: relative; display: inline-flex; }
.fx-menu__hd   { font-size: 10px; font-weight: 600; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--text-color-tertiary);
                 padding: var(--spacing-4) var(--spacing-5) var(--spacing-3); }
.fx-menu__g    { margin-left: auto; display: flex; color: var(--icon-color-secondary); }
.fx-menu a:not(.fds-button), .fx-menu button:not(.fds-button) { justify-content: flex-start; }

.fx-toasts     { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px;
                 z-index: 300; display: grid; gap: var(--spacing-4); }
.fx-toast      { background: var(--color-gray-950); color: var(--color-white);
                 font-size: 13px; padding: var(--spacing-5) var(--spacing-6);
                 border-radius: var(--radius-md); box-shadow: var(--shadow-menu);
                 opacity: 1; transition: opacity .3s ease; }
.fx-toast.is-out { opacity: 0; }

/* ── org wallet ────────────────────────────────────────────────────────────
   Chrome register: a full pill, 30px to match the other top-bar controls, zero
   elevation. The value is near-black and tabular so digits do not jitter as the
   balance changes; only the glyph carries colour. Brand green is deliberately
   not used — it is rationed to six jobs and money is not one of them. */
.fx-wallet      { display: inline-flex; align-items: center; gap: var(--spacing-4);
                  height: 30px; padding: 0 var(--spacing-5); cursor: pointer;
                  border: 1px solid var(--border-color-secondary);
                  border-radius: var(--radius-full);
                  background: var(--background-color-surface-primary);
                  font: inherit; font-size: 13px; color: var(--text-color-primary); }
.fx-wallet:hover { background: var(--background-color-fill-primary-hover); }
.fx-wallet__i   { color: var(--icon-color-secondary); }
.fx-wallet__v   { font-variant-numeric: tabular-nums; font-weight: 500; }
/* a balance that cannot cover committed spend is a WARNING, not a brand state */
.fx-wallet--low .fx-wallet__v { color: var(--text-color-warning); }
.fx-wallet--low .fx-wallet__i { color: var(--icon-color-warning, var(--color-yellow-400)); }

.fx-wal         { padding: var(--spacing-5); }
.fx-wal__lbl    { font-size: 12px; color: var(--text-color-secondary); }
.fx-wal__big    { font-size: 24px; line-height: 32px; font-weight: 500;
                  font-variant-numeric: tabular-nums; color: var(--text-color-primary);
                  margin: 2px 0 1px; }
.fx-wal__sub    { font-size: 12px; color: var(--text-color-tertiary); }
/* two equal actions, side by side, at the panel's inner width */
.fx-wal__act    { display: grid; grid-template-columns: 1fr 1fr;
                  gap: var(--spacing-4); margin-top: var(--spacing-5); }
.fx-wal__act .fds-button { width: 100%; }

.fx-wal__row    { display: flex; align-items: center; gap: var(--spacing-5); width: 100%; }
.fx-wal__row b  { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.fx-wal__out    { color: var(--text-color-primary); }
.fx-wal__in     { color: var(--text-color-success, var(--color-green-600)); }

/* the balance is the first thing to go when the bar is tight — the glyph stays */
@media (max-width: 1180px) { .fx-wallet__v { display: none; } }

/* ── console.css ─────────────────────────── */
/* ============================================================================
   The console's OWN layer — and it is deliberately small.

   Everything above this file in the cascade is vendored verbatim from
   ~/Desktop/fleetio-replica/css: Fleetio's own production tokens and design
   system, plus the Drivara re-skin that was already derived from them. This
   file exists only for the three jobs that extraction genuinely does not
   cover, and it must never grow into a second design system beside the first.

     1. The @font-face declarations, because the replica loads its fonts from a
        relative path and this console serves them from /static.
     2. The RAIL'S HUE. shell.css paints the rail from --color-green-*, which
        theme-drivara.css deliberately does NOT repoint (in Drivara green means
        settled, blue means identity — that divergence is the whole point of
        the re-skin). So each green step the rail uses is mirrored here onto
        the derived blue ramp, and nowhere else: redefining --color-green-*
        globally would turn every success dot in the product blue.
     3. A compatibility shim: the `--fl-*` names the React components were
        written against, re-pointed at the vendored SEMANTIC tokens. This is
        what puts every panel that has not yet been converted to `fds-button`
        and `spark-table` on the real ramp immediately, instead of leaving half
        the console on a hand-derived approximation of it.

   Where this file and the vendored CSS disagree, the vendored CSS is right.
   ========================================================================== */

/* ── 1. The three families (§8.5, and tokens.css names all three) ──────────
   tokens.css declares `--font-family-stat: Space Grotesk` and
   `--font-family-mono: Menlo`, so the stat face is part of THEIR token set,
   not an invention of ours. The replica ships only InterVariable.woff2 in
   fonts/, so the Space Grotesk file was fetched separately (SIL OFL, latin
   subset) and is served from this console's own origin. Both are same-origin:
   the CSP gains `font-src 'self'` and no font host, so the console still
   renders completely with no network beyond the pod serving it.

   `Inter Variable` is declared as well as `Inter` because index-page.css asks
   for that family name FIRST, and a face it cannot find falls through to the
   platform UI font — which is very nearly right and therefore very hard to
   notice. */
@font-face {
  font-family: "Inter Variable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/SpaceGrotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ── 2. The rail, repointed from green to the derived blue ─────────────────
   One mirror per green step shell.css actually consumes, scoped to the rail
   subtree so nothing else in the product changes hue. The steps map 1:1 —
   green-800 stays 800, green-700 stays 700 — because theme-drivara.css held
   each step's OKLCH lightness exactly when it derived the blue ramp, so the
   rail's internal contrast relationships survive the swap unaltered. */
.fx-rail {
  --color-green-25: var(--color-brand-25);
  --color-green-50: var(--color-brand-50);
  --color-green-100: var(--color-brand-100);
  --color-green-200: var(--color-brand-200);
  --color-green-300: var(--color-brand-300);
  --color-green-500: var(--color-brand-500);
  --color-green-600: var(--color-brand-600);
  --color-green-700: var(--color-brand-700);
  --color-green-800: var(--color-brand-800);
  --color-green-900: var(--color-brand-900);
  --color-green-950: var(--color-brand-950);
}

/* ── 3. The `--fl-*` compatibility shim ────────────────────────────────────
   Read these as a translation table, not as a palette. Every name on the left
   is one the console's React components already say; every value on the right
   is a vendored semantic token that flips with the theme on its own. Nothing
   here is a colour choice — the choices were all made upstream — and there is
   not one hex literal below, which is what lets a re-skin land here without
   touching a component.

   NOTE the units: these are now whole `var()` colours, not the space-separated
   RGB triplets the old hand-written ramp used, so tailwind.config.js emits
   `var(--fl-x)` rather than `rgb(var(--fl-x) / <alpha-value>)`. Leaving the
   triplet form would have produced `rgb(#0068eb / 1)` — invalid, silently
   dropped by every browser, and the whole console unpainted. */
/* Two tokens THIS console adds, following tokens-ext.css's own pattern —
   declared once per theme context so they flip on their own, never a literal.
   They exist because of a real defect class (§8.4) rather than a preference.

   §5.2 grades the hairlines: a row separator is a whisper, a structural rule
   is visibly one step stronger, and that grading is most of why a dense table
   scans. In LIGHT the semantic tokens already give it — gray-25 under a row,
   gray-50 under a header. In DARK the grey PRIMITIVES do not flip (only the
   semantics do), so `var(--color-gray-25)` — which index-page.css uses for the
   row rule — stays #f5f5f5 and paints a near-white line across a #222323
   table. Graded in both themes, or the table stops scanning in one of them. */
:root, :host                    { --border-color-row: var(--color-gray-25);
                                  --border-color-structural: var(--color-gray-50);
                                  --text-color-empty: var(--color-gray-200); }
:root, .theme-preview-light     { --border-color-row: var(--color-gray-25);
                                  --border-color-structural: var(--color-gray-50);
                                  --text-color-empty: var(--color-gray-200); }
body:where(.dark, .dark *)      { --border-color-row: var(--color-gray-900);
                                  --border-color-structural: var(--color-gray-800);
                                  --text-color-empty: var(--color-gray-700); }
.theme-preview-dark             { --border-color-row: var(--color-gray-900);
                                  --border-color-structural: var(--color-gray-800);
                                  --text-color-empty: var(--color-gray-700); }

/* The same defect, at its source: index-page.css hard-points the row rule and
   the em dash at grey primitives. That is correct in the replica, which is a
   light-only artefact, and wrong here, where dark mode auto-activates from the
   OS. Corrected through the graded tokens above rather than by editing the
   vendored file, which stays byte-identical to its source. */
.spark-table tbody td { border-top-color: var(--border-color-row); }
.emdash               { color: var(--text-color-empty); }

/* 🚨 DECLARED ON `body`, NOT ON `:root`, AND THAT ONE WORD IS THE WHOLE DARK MODE.

   Every name below is an ALIAS: it resolves `var(--background-color-…)` at the
   element it is declared on. tokens.css carries the dark values under
   `body:where(.dark, .dark *)` — so they apply to BODY and its descendants.
   `:root` is `<html>`, which is body's PARENT and therefore never matches that
   selector. Declared at `:root`, every alias resolved against the LIGHT value
   and then inherited that frozen value down through the entire app.
   
   Measured before the fix, with prefers-color-scheme: dark and `.dark` present
   on both html and body: `body` painted `rgb(23,24,24)` correctly — the
   vendored layer was working — while `--fl-canvas` read `#f5f5f5`,
   `--fl-surface` read `#fff` and `--fl-ink` read `#222323`. So every
   `bg-fl-surface`, `text-fl-ink` and `border-fl-rule` in every panel — which is
   nearly all of this console's colour — painted a complete LIGHT-MODE UI on a
   dark canvas. The one thing that looked right was the one thing not using the
   alias layer.
   
   🪤 Do not "fix" this by adding a `.dark` override block that re-points the
   aliases: that duplicates the whole map and the copies drift. Resolving them
   one element lower is the entire correction, and it keeps each alias a pure
   pointer at the semantic token, which is what §8.1 requires. */
body {
  --fl-canvas:        var(--background-color-primary);
  --fl-surface:       var(--background-color-surface-primary);
  --fl-control:       var(--background-color-fill-secondary);
  --fl-hover:         var(--background-color-fill-secondary-hover);
  --fl-pressed:       var(--background-color-fill-tertiary);
  /* What `fds-button--disabled` actually fills with. There is no
     `fill-disabled` token; disabled is fill-tertiary plus a border change. */
  --fl-disabled:      var(--background-color-fill-tertiary);

  --fl-line:          var(--border-color-row);
  --fl-rule:          var(--border-color-structural);
  --fl-field:         var(--border-color-primary);

  --fl-ink:           var(--text-color-primary);
  --fl-ink-2:         var(--text-color-body);
  --fl-ink-3:         var(--text-color-secondary);
  --fl-ink-4:         var(--text-color-tertiary);
  --fl-ink-disabled:  var(--text-color-disabled);
  --fl-empty:         var(--text-color-empty);

  --fl-brand:         var(--background-color-fill-brand);
  --fl-brand-ink:     var(--text-color-brand);
  --fl-brand-strong:  var(--background-color-fill-brand-active);
  --fl-brand-tint:    var(--background-color-fill-brand-tertiary);
  --fl-brand-tint-2:  var(--background-color-fill-brand-secondary);
  --fl-on-brand:      var(--text-color-brand-on-bg-fill);

  /* Success stays GREEN. That is theme-drivara.css's one deliberate
     divergence from Fleetio, where brand and success are the same green:
     here blue is identity and green means settled. */
  --fl-success:       var(--background-color-fill-success);
  --fl-success-ink:   var(--text-color-success);
  --fl-success-dot:   var(--background-color-fill-success);
  --fl-success-tint:  var(--background-color-surface-success);
  --fl-on-success:    var(--text-color-success-on-bg-fill);

  --fl-danger:        var(--background-color-fill-danger);
  --fl-danger-ink:    var(--text-color-danger);
  --fl-danger-tint:   var(--background-color-surface-danger);
  --fl-on-danger:     var(--text-color-danger-on-bg-fill);

  /* `fill-warning` is the amber PILL fill (yellow-200); `-active` is the
     deeper step their own `.dot--warning` uses. Amber takes near-black ink in
     both themes — the one on-fill pairing in the system that does not flip. */
  --fl-warning:       var(--background-color-fill-warning);
  --fl-warning-dot:   var(--background-color-fill-warning-active);
  --fl-warning-ink:   var(--text-color-warning);
  --fl-warning-tint:  var(--background-color-surface-warning);
  --fl-on-warning:    var(--text-color-warning-on-bg-fill);
}

/* ── The two things this console has that the extraction has no screen for ──
   A log line, and a trace waterfall. Both are console-native and neither has
   a Fleetio analogue to copy, so they are built out of their primitives:
   their mono family, their spacing scale, their semantic surfaces. */

/* A log line wraps rather than truncates — tell #10 applied to the one place
   in this product where the value IS the whole sentence. */
.log-line {
  font-family: var(--font-family-mono), ui-monospace, monospace;
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-4);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* THE LARGE STATISTIC VALUE, and the one place in the console not set in
   Inter. tokens.css names `--font-family-stat: Space Grotesk`; the extraction
   never uses it because none of the eighteen captured screens is a stat page,
   and this console's landing page is nothing but stat tiles. */
.stat-value {
  font-family: var(--font-family-stat), Inter, system-ui, sans-serif;
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-7);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-color-primary);
  letter-spacing: var(--font-letter-spacing-tight);
}

/* §5.6: scrollbars are visible and real, never auto-hidden. A pane that can
   scroll and does not say so is a pane whose bottom half nobody finds. */
* { scrollbar-color: var(--color-gray-100) transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { background: var(--color-gray-100); border-radius: var(--radius-full); }
*::-webkit-scrollbar-track { background: transparent; }

/* One focus ring, from their focus border token, so it follows the re-skin. */
:focus-visible { outline: 2px solid var(--border-color-focus); outline-offset: 1px; }

/* The console's canvas is the grey page ground, not the white table surface —
   index-page.css sets `body` to surface-primary because every one of its
   screens IS a full-bleed table. Half of this console's screens are panel
   pages on the grey. */
body { background: var(--background-color-primary); }

/* The one piece of preflight this console still needs.

   `@tailwind base` is off (see styles.css) because index-page.css carries the
   reset — but index-page.css's reset is `*{box-sizing}` and `html,body{margin}`
   and nothing else. It never needed a list reset: the replica is a set of table
   screens and has no bare `<ul>` in it. This console has seven — the people
   list, the three infrastructure lists, service detail, the error log and the
   alerts list — all of them cards and rows that Tailwind's preflight used to
   flatten for free. Without it every one of them grew a disc marker and a 40px
   indent, hanging bullets in the gutter beside each card.

   Scoped to the app subtree, not `*`, so a marker stays available to anything
   that genuinely wants a list — prose in an empty state, say.

   `:where(#app …)` rather than `#app :where(…)`: the former has ZERO
   specificity, so any component class or utility still overrides it, which is
   what a reset should do. The latter would carry an id's weight and quietly
   beat every class in the stylesheet. */
:where(#app ul, #app ol) { list-style: none; margin: 0; padding: 0; }

/* The same wound, and a more visible one: NOTHING RESETS A BARE <button>.
   index-page.css sets only `button{font:inherit;color:inherit}` and scopes its
   real resets to the replica's own components (`.chip button`, `.viewgroup
   button`), because every button in the replica belongs to one of those. This
   console has 22 bare ones, and each was rendering with the user-agent's grey
   fill, border and centred text.

   It is most obvious on the dashboard, where Alerts and Services are wrapped in
   a button — they are the two tiles you can click through to — and so those two
   alone sat in a grey box while the six tiles beside them did not. That reads as
   a design that cannot make its mind up. It was a missing reset.

   Zero specificity again, so `fds-button` and every Tailwind utility still win. */
:where(#app button) {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ── The environment switch ────────────────────────────────────────────────
   Scope pills, in the top bar. §3.4(c): a scope filter is pill tabs, and this
   one scopes the DATA on every surface rather than switching a view, so it is
   pills rather than folder tabs or an underline. Built out of their filter
   button (`fds-button--legacy-filter`) so the rest state, hover, pressed and
   toggled states all come from their component and not from a guess. */
.envswitch { display: flex; align-items: center; gap: var(--spacing-3); }
.envswitch__lbl { font-size: var(--font-size-sm); color: var(--text-color-secondary); }

/* 🚨 Ink on the brand fill, corrected. MEASURED, not judged by eye.

   theme-drivara.css sets `--text-color-brand-on-bg-fill: var(--color-brand-975)`
   — #09172b. That is Fleetio's convention and it is right for THEM: their brand
   fill is a light green, so a near-black green sits on it comfortably. The
   re-skin repointed the FILL to a saturated blue (#0068eb) and kept the dark
   ink, which lands at 3.58:1. Anything at 15px semibold needs 4.5:1. White is
   5.02:1.

   Nothing in the console had hit it yet, because the surfaces that use the
   brand today take the SECONDARY fill (a pale tint with brand-coloured ink) —
   the pills and the rail's own button. The sign-in screen's primary button was
   the first thing to ask for the real combination, and it came out unreadable.
   Fixed here so the next component to reach for it inherits a legible pair
   rather than rediscovering this.

   Belongs in console.css, not vendor/: that directory stays byte-identical to
   the replica so it can be re-vendored. Worth pushing upstream to the replica's
   theme too. */
:root, :host,
:root, .theme-preview-light,
body:where(.dark, .dark *),
.theme-preview-dark { --text-color-brand-on-bg-fill: var(--color-white); }

/* THE THIRD MISSING PREFLIGHT DECLARATION, AND THE MOST EXPENSIVE ONE.

   🚨 EVERY TAILWIND BORDER IN THIS CONSOLE WAS RENDERING NOTHING. Measured in
   the browser before this rule existed: of the elements carrying a border
   utility, SEVEN OF EIGHT computed to `border-style: none, width: 0px` — the
   card hairlines, the table header rules, the legend's top rule, the section
   dividers, the notice strips' left bars. All of them absent.

   The mechanism is the same missing preflight that cost this file the list and
   button resets above, but its blast radius is the whole design language rather
   than seven lists or 22 buttons. Tailwind v3's border utilities emit a WIDTH
   AND NOTHING ELSE — `.border { border-width: 1px }` — because preflight is
   expected to have already set `border-style: solid` on every element. With
   `corePlugins: { preflight: false }` nothing supplies it, and the CSS initial
   value of `border-style` is `none`, so a width of 1px draws zero pixels.

   That is why so much of this console read as flat and unfinished: §4.2 says a
   card is a 1px hairline plus an 8px radius, and the hairline was never there.
   CARD_BASE's `shadow-[0_1px_0_0_var(--fl-rule)]` was left carrying the entire
   edge on its own — which also made it look like a shadow in the chrome, the
   thing tell #25 forbids, when it was only ever meant to be the bottom lift
   UNDER a border that was silently missing.

   🪤 It MUST be the `border: 0 solid` shorthand. `border-style: solid` alone
   would resolve width to the initial `medium` and put a 3px border on every
   element in the app. Zero width means nothing renders until a utility asks.

   Zero specificity, like its two neighbours, so `.border`, `.border-2`,
   `.divide-y`, every `border-fl-*` colour and every vendored component rule
   still win. The default colour is the design system's own rule ink, so a
   utility that sets a width and forgets a colour still lands on-system rather
   than on the CSS initial `currentColor`. */
:where(#app *),
:where(#app *)::before,
:where(#app *)::after {
  border: 0 solid var(--fl-rule);
}

/* THE IDENTITY MARK IS THE SHIPPED ASSET NOW, SO THE FILL OVERRIDE IS GONE.

   It existed because the DRAWN glyph's `.fx-mark__b` resolved to
   `--color-green-500` — the green-to-blue remap in section 2 is scoped to
   `.fx-rail`, and the lockup lives in `.fx-top` — so the console's one identity
   element rendered in the source product's brand while everything around it was
   Drivara blue. ConsoleShell now renders `img/drivara-mark.png`, which cannot
   inherit a token from a stylesheet at all, so the whole class of bug is gone
   rather than the instance. Keeping a dead `fill` rule would only invite someone
   to reintroduce the glyph it was propping up.

   Sizing still comes from `.fx-mark` in shell.css (`flex: none`), which applies
   to an <img> exactly as it did to the <svg>. */

/* ── LINKS AND FOCUS RINGS WERE STILL FLEETIO GREEN ────────────────────────
   🚨 EVERY LINK AND EVERY FOCUS RING IN THIS CONSOLE PAINTED #067748 / #4fbd81.

   theme-drivara.css repoints tokens by NAME: anything called `*brand*` follows
   the blue ramp. But `--text-color-link` and `--border-color-focus` are
   brand-ROLE tokens with no "brand" in their names — tokens.css points them
   straight at `--color-green-600` and `--color-green-300`. And the wholesale
   green→blue primitive remap in section 2 above is scoped to `.fx-rail`, so it
   never reaches them anywhere else on the page. Two spellings of the same idea,
   and the re-skin only caught one.

   Measured before this rule, in both schemes:
     --text-color-link      #067748 (light) / #4fbd81 (dark)   ← Fleetio green
     --border-color-focus   #4fbd81 (light) / #28a466 (dark)   ← Fleetio green
   The focus ring is the one that matters most: it is the console's entire
   keyboard-navigation affordance, and it was drawing the wrong product's brand
   around every control an operator tabs to.

   Steps are taken from §8.1's own role column rather than chosen here —
   600 "link and plain-text action ink", 300 "dark-mode link/text · light-mode
   focus ring", 400 "dark-mode focus ring" — so this repoints and invents
   nothing. Hover and active follow the same ladder the green ones did (700/800),
   which keeps the interaction states graded exactly as the source had them. */
:root {
  --text-color-link:        var(--color-brand-600);
  --text-color-link-hover:  var(--color-brand-700);
  --text-color-link-active: var(--color-brand-800);
  --border-color-focus:     var(--color-brand-300);
}

body:where(.dark, .dark *) {
  --text-color-link:        var(--color-brand-300);
  --text-color-link-hover:  var(--color-brand-200);
  --text-color-link-active: var(--color-brand-100);
  --border-color-focus:     var(--color-brand-400);
}

/* ── THE BRAND RAMP IS THE PLATFORM'S, NOT A SECOND DRIVARA BLUE ───────────
   🚨 THIS CONSOLE SHIPPED A DIFFERENT BLUE FROM THE PRODUCT IT MONITORS.

   theme-drivara.css derives its ramp from Fleetio's green by holding each
   step's OKLCH lightness — a defensible method, and it produced `#0068eb`.
   But Drivara's blue is not a value to be derived: it is already chosen, and it
   is in the platform's own token file.

       drivara-platform/apps/web/src/styles/tokens.css:140
         --fl-brand:  0 109 240;      (annotated in-file as #006DF0, filled primary)
       :181
         --fl-brand: 29 132 255;      (annotated in-file as #1D84FF, dark-mode fill)

   The design corpus's §8.1 table is a TRANSCRIPTION of that file, not an
   opinion about it — which is why the two agree step for step. So this was
   never "the corpus versus our derivation"; it was the console versus the
   product, with both declaring the SAME token names (`--fl-brand`,
   `--fl-brand-ink`, `--fl-brand-strong`, `--fl-brand-tint`) and filling them
   with different colours.

   🪤 CONTRAST DOES NOT DECIDE THIS, and it is worth saying so because it is the
   obvious place to look. Both ramps clear every bar: white on `#0068eb` is
   5.02:1 against `#006DF0`'s 4.72:1, so the derived ramp was in fact slightly
   SAFER on the most-used pair. Identity decides it. Two products in one estate
   cannot each have their own blue.

   Measured divergence in OKLCH ΔE, shipped vs platform: 400 is 0.0023 — the
   mark step is indistinguishable and was never the problem — but 700/800/900
   run 0.032/0.040/0.026, and shell.css paints the rail
   `linear-gradient(180deg, green-800, green-950)`. So the single largest brand
   surface in this console sat exactly where the two ramps disagreed most.

   Overridden here rather than in theme-drivara.css so `vendor/` stays
   byte-identical to the replica and re-vendorable. 200 and 950 have no role in
   §8.1 and keep their derived values — nothing points at them. */
:root {
  --color-brand-25:  #EDF4FE;
  --color-brand-50:  #D6E7FD;
  --color-brand-100: #AECEFB;
  --color-brand-300: #4E97F7;
  --color-brand-400: #1D84FF;
  --color-brand-500: #006DF0;
  --color-brand-600: #0059C7;
  --color-brand-700: #0A489E;
  --color-brand-800: #0E3873;
  --color-brand-900: #0C2A55;
  --color-brand-975: #051227;
}

/* ── tailwind utilities ──────────────────── */
.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.left-3{left:.75rem}.left-\[2px\]{left:2px}.top-0{top:0}.top-1\/2{top:50%}.top-\[3px\]{top:3px}.isolate{isolation:isolate}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-\[26px\]{margin-left:26px}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-\[7px\]{margin-top:7px}.mt-auto{margin-top:auto}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-3{-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-0{height:0}.h-1\.5{height:.375rem}.h-16{height:4rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[120px\]{height:120px}.h-\[18px\]{height:18px}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[33px\]{height:33px}.h-\[3px\]{height:3px}.h-\[48px\]{height:48px}.h-\[5px\]{height:5px}.h-\[7px\]{height:7px}.h-full{height:100%}.min-h-0{min-height:0}.min-h-\[186px\]{min-height:186px}.min-h-\[252px\]{min-height:252px}.min-h-\[380px\]{min-height:380px}.min-h-\[80px\]{min-height:80px}.min-h-\[92px\]{min-height:92px}.w-1\.5{width:.375rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-4{width:1rem}.w-40{width:10rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-8{width:2rem}.w-\[112px\]{width:112px}.w-\[130px\]{width:130px}.w-\[150px\]{width:150px}.w-\[168px\]{width:168px}.w-\[180px\]{width:180px}.w-\[190px\]{width:190px}.w-\[205px\]{width:205px}.w-\[220px\]{width:220px}.w-\[42px\]{width:42px}.w-\[52px\]{width:52px}.w-\[7px\]{width:7px}.w-\[96px\]{width:96px}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[8rem\]{min-width:8rem}.min-w-full{min-width:100%}.max-w-0{max-width:0}.max-w-\[160px\]{max-width:160px}.max-w-\[16rem\]{max-width:16rem}.max-w-\[18rem\]{max-width:18rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-\[1\.4\]{flex:1.4}.flex-none{flex:none}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-\[2px\]{gap:2px}.gap-\[3px\]{gap:3px}.gap-px{gap:1px}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.gap-y-4{row-gap:1rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-fl-line>:not([hidden])~:not([hidden]){border-color:var(--fl-line)}.divide-fl-rule>:not([hidden])~:not([hidden]){border-color:var(--fl-rule)}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-\[3px\]{border-bottom-width:3px}.border-l{border-left-width:1px}.border-l-\[3px\]{border-left-width:3px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-fl-brand{border-color:var(--fl-brand)}.border-fl-danger{border-color:var(--fl-danger)}.border-fl-empty{border-color:var(--fl-empty)}.border-fl-field{border-color:var(--fl-field)}.border-fl-line{border-color:var(--fl-line)}.border-fl-rule{border-color:var(--fl-rule)}.border-fl-warning{border-color:var(--fl-warning)}.border-transparent{border-color:transparent}.border-t-fl-brand{border-top-color:var(--fl-brand)}.bg-fl-brand{background-color:var(--fl-brand)}.bg-fl-brand-tint{background-color:var(--fl-brand-tint)}.bg-fl-brand-tint-2{background-color:var(--fl-brand-tint-2)}.bg-fl-canvas{background-color:var(--fl-canvas)}.bg-fl-control{background-color:var(--fl-control)}.bg-fl-danger{background-color:var(--fl-danger)}.bg-fl-danger-tint{background-color:var(--fl-danger-tint)}.bg-fl-disabled{background-color:var(--fl-disabled)}.bg-fl-empty{background-color:var(--fl-empty)}.bg-fl-field{background-color:var(--fl-field)}.bg-fl-hover{background-color:var(--fl-hover)}.bg-fl-ink-4{background-color:var(--fl-ink-4)}.bg-fl-rule{background-color:var(--fl-rule)}.bg-fl-success{background-color:var(--fl-success)}.bg-fl-success-dot{background-color:var(--fl-success-dot)}.bg-fl-surface{background-color:var(--fl-surface)}.bg-fl-warning{background-color:var(--fl-warning)}.bg-fl-warning-dot{background-color:var(--fl-warning-dot)}.bg-fl-warning-tint{background-color:var(--fl-warning-tint)}.fill-fl-brand{fill:var(--fl-brand)}.fill-fl-control{fill:var(--fl-control)}.fill-fl-danger{fill:var(--fl-danger)}.fill-fl-danger-ink{fill:var(--fl-danger-ink)}.fill-fl-empty{fill:var(--fl-empty)}.fill-fl-field{fill:var(--fl-field)}.fill-fl-ink{fill:var(--fl-ink)}.fill-fl-ink-3{fill:var(--fl-ink-3)}.fill-fl-ink-4{fill:var(--fl-ink-4)}.fill-fl-success{fill:var(--fl-success)}.fill-fl-surface{fill:var(--fl-surface)}.fill-fl-warning{fill:var(--fl-warning)}.fill-fl-warning-dot{fill:var(--fl-warning-dot)}.fill-fl-warning-ink{fill:var(--fl-warning-ink)}.stroke-fl-brand{stroke:var(--fl-brand)}.stroke-fl-danger{stroke:var(--fl-danger)}.stroke-fl-empty{stroke:var(--fl-empty)}.stroke-fl-field{stroke:var(--fl-field)}.stroke-fl-ink-4{stroke:var(--fl-ink-4)}.stroke-fl-line{stroke:var(--fl-line)}.stroke-fl-rule{stroke:var(--fl-rule)}.stroke-fl-success{stroke:var(--fl-success)}.stroke-fl-warning{stroke:var(--fl-warning)}.p-3{padding:.75rem}.p-4{padding:1rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-3{padding-left:.75rem}.pl-6{padding-left:1.5rem}.pl-9{padding-left:2.25rem}.pr-3{padding-right:.75rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.pt-3{padding-top:.75rem}.pt-\[6px\]{padding-top:6px}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-family-mono),ui-monospace,SFMono-Regular,Consolas,monospace}.font-stat{font-family:var(--font-family-stat),Inter,ui-sans-serif,system-ui,sans-serif}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[16px\]{font-size:16px}.text-\[24px\]{font-size:24px}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.leading-\[26px\]{line-height:26px}.tracking-wide{letter-spacing:.025em}.text-fl-brand-ink{color:var(--fl-brand-ink)}.text-fl-danger-ink{color:var(--fl-danger-ink)}.text-fl-empty{color:var(--fl-empty)}.text-fl-ink{color:var(--fl-ink)}.text-fl-ink-2{color:var(--fl-ink-2)}.text-fl-ink-3{color:var(--fl-ink-3)}.text-fl-ink-4{color:var(--fl-ink-4)}.text-fl-ink-disabled{color:var(--fl-ink-disabled)}.text-fl-on-danger{color:var(--fl-on-danger)}.text-fl-on-success{color:var(--fl-on-success)}.text-fl-on-warning{color:var(--fl-on-warning)}.text-fl-success-ink{color:var(--fl-success-ink)}.text-fl-warning-ink{color:var(--fl-warning-ink)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.decoration-dotted{text-decoration-style:dotted}.decoration-1{text-decoration-thickness:1px}.underline-offset-2{text-underline-offset:2px}.underline-offset-\[3px\]{text-underline-offset:3px}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_1px_0_0_var\(--fl-rule\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_1px_0_0_var\(--fl-rule\)\]{--tw-shadow:0 1px 0 0 var(--fl-rule);--tw-shadow-colored:0 1px 0 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.placeholder\:text-fl-ink-4::-moz-placeholder{color:var(--fl-ink-4)}.placeholder\:text-fl-ink-4::placeholder{color:var(--fl-ink-4)}.first\:pt-0:first-child{padding-top:0}.last\:border-b-0:last-child{border-bottom-width:0}.last\:pb-0:last-child{padding-bottom:0}.hover\:bg-fl-canvas:hover{background-color:var(--fl-canvas)}.hover\:bg-fl-control:hover{background-color:var(--fl-control)}.hover\:bg-fl-hover:hover{background-color:var(--fl-hover)}.hover\:text-fl-brand-ink:hover{color:var(--fl-brand-ink)}.hover\:text-fl-ink:hover{color:var(--fl-ink)}.focus\:border-fl-brand:focus{border-color:var(--fl-brand)}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:items-center{align-items:center}.sm\:gap-4{gap:1rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[300px_minmax\(0\2c 1fr\)\]{grid-template-columns:300px minmax(0,1fr)}}@media (min-width:1280px){.xl\:col-span-2{grid-column:span 2/span 2}.xl\:col-span-4{grid-column:span 4/span 4}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}