*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

script {
  display: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

body {
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.45;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.025em;
}

h1 {
  margin: 0;
  font-size: var(--type-page-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

@media (width < 768px) {
  h1 {
    font-size: var(--type-title);
  }
}
:root[data-design=cobalt] body * {
  text-transform: none;
  letter-spacing: normal;
}

:root[data-design=cobalt] h1,
:root[data-design=cobalt] h2,
:root[data-design=cobalt] h3 {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-weight: 800;
  letter-spacing: -0.01em;
}

:root {
  --fs-50: 0.6497626986rem;
  --fs-100: 0.7501875469rem;
  --fs-150: 0.8661336773rem;
  --fs-200: 1rem;
  --fs-250: 1.1545561918rem;
  --fs-300: 1.333rem;
  --fs-350: 1.5390234037rem;
  --fs-400: 1.776889rem;
  --fs-450: 2.0515181971rem;
  --fs-500: 2.368593037rem;
  --fs-550: 2.7346737567rem;
  --fs-600: 3.1573345183rem;
  --fs-650: 3.6453201177rem;
  --fs-700: 4.2087269129rem;
  --fs-750: 4.8592117169rem;
  --fs-800: 5.6102329749rem;
  --fs-850: 6.4773292186rem;
  --fs-900: 7.4784405556rem;
  --clr-neutral-0: #ffffff;
  --clr-neutral-0-rgb:
    255, 255,
    255;
  --clr-neutral-50: #f5f7fb;
  --clr-neutral-50-rgb:
    245, 247,
    251;
  --clr-neutral-100: #eef2f7;
  --clr-neutral-100-rgb:
    238, 242,
    247;
  --clr-neutral-200: #e2e8f0;
  --clr-neutral-200-rgb:
    226, 232,
    240;
  --clr-neutral-300: #cbd5e1;
  --clr-neutral-300-rgb:
    203, 213,
    225;
  --clr-neutral-400: #ced4da;
  --clr-neutral-400-rgb:
    206, 212,
    218;
  --clr-neutral-500: #8090a5;
  --clr-neutral-500-rgb:
    128, 144,
    165;
  --clr-neutral-600: #627187;
  --clr-neutral-600-rgb:
    98, 113,
    135;
  --clr-neutral-700: #475569;
  --clr-neutral-700-rgb:
    71, 85,
    105;
  --clr-neutral-800: #263449;
  --clr-neutral-800-rgb:
    38, 52,
    73;
  --clr-neutral-900: #172438;
  --clr-neutral-900-rgb:
    23, 36,
    56;
  --clr-neutral-1000: #000000;
  --clr-neutral-1000-rgb:
    0, 0,
    0;
  --clr-primary-50: #eef4ff;
  --clr-primary-50-rgb:
    238, 244,
    255;
  --clr-primary-100: #dbe7ff;
  --clr-primary-100-rgb:
    219, 231,
    255;
  --clr-primary-200: #bfd3ff;
  --clr-primary-200-rgb:
    191, 211,
    255;
  --clr-primary-300: #93b4ff;
  --clr-primary-300-rgb:
    147, 180,
    255;
  --clr-primary-400: #608cff;
  --clr-primary-400-rgb:
    96, 140,
    255;
  --clr-primary-500: #3b68f5;
  --clr-primary-500-rgb:
    59, 104,
    245;
  --clr-primary-600: #2850d9;
  --clr-primary-600-rgb:
    40, 80,
    217;
  --clr-primary-700: #2341b0;
  --clr-primary-700-rgb:
    35, 65,
    176;
  --clr-primary-800: #23398b;
  --clr-primary-800-rgb:
    35, 57,
    139;
  --clr-primary-900: #21346e;
  --clr-primary-900-rgb:
    33, 52,
    110;
  --clr-success-500: #22c55e;
  --clr-success-500-rgb:
    34, 197,
    94;
  --clr-success-600: #16a34a;
  --clr-success-600-rgb:
    22, 163,
    74;
  --clr-success-700: #15803d;
  --clr-success-700-rgb:
    21, 128,
    61;
  --clr-success-800: #166534;
  --clr-success-800-rgb:
    22, 101,
    52;
  --clr-success-900: #14532d;
  --clr-success-900-rgb:
    20, 83,
    45;
  --clr-warning-500: #f59e0b;
  --clr-warning-500-rgb:
    245, 158,
    11;
  --clr-warning-600: #d97706;
  --clr-warning-600-rgb:
    217, 119,
    6;
  --clr-warning-700: #b45309;
  --clr-warning-700-rgb:
    180, 83,
    9;
  --clr-warning-800: #92400e;
  --clr-warning-800-rgb:
    146, 64,
    14;
  --clr-warning-900: #78350f;
  --clr-warning-900-rgb:
    120, 53,
    15;
  --clr-danger-500: #ef4444;
  --clr-danger-500-rgb:
    239, 68,
    68;
  --clr-danger-600: #dc2626;
  --clr-danger-600-rgb:
    220, 38,
    38;
  --clr-danger-700: #b91c1c;
  --clr-danger-700-rgb:
    185, 28,
    28;
  --clr-danger-800: #991b1b;
  --clr-danger-800-rgb:
    153, 27,
    27;
  --clr-danger-900: #7f1d1d;
  --clr-danger-900-rgb:
    127, 29,
    29;
  --clr-blue-gray-50: #e5edff;
  --clr-blue-gray-50-rgb:
    229, 237,
    255;
  --clr-blue-gray-100: #e6edf8;
  --clr-blue-gray-100-rgb:
    230, 237,
    248;
  --clr-blue-gray-200: #b6c4da;
  --clr-blue-gray-200-rgb:
    182, 196,
    218;
  --clr-blue-gray-300: #9aaecb;
  --clr-blue-gray-300-rgb:
    154, 174,
    203;
  --clr-blue-gray-400: #a8b7cb;
  --clr-blue-gray-400-rgb:
    168, 183,
    203;
  --clr-blue-gray-500: #5f6e84;
  --clr-blue-gray-500-rgb:
    95, 110,
    132;
  --clr-blue-gray-600: #43536d;
  --clr-blue-gray-600-rgb:
    67, 83,
    109;
  --clr-blue-gray-700: #294c9c;
  --clr-blue-gray-700-rgb:
    41, 76,
    156;
  --clr-blue-gray-800: #2a3950;
  --clr-blue-gray-800-rgb:
    42, 57,
    80;
  --clr-blue-gray-850: #334155;
  --clr-blue-gray-850-rgb:
    51, 65,
    85;
  --clr-blue-gray-900: #1e304c;
  --clr-blue-gray-900-rgb:
    30, 48,
    76;
  --clr-blue-gray-950: #111e33;
  --clr-blue-gray-950-rgb:
    17, 30,
    51;
  --clr-blue-gray-1000: #101827;
  --clr-blue-gray-1000-rgb:
    16, 24,
    39;
  --clr-pulse-400: #ff6371;
  --clr-pulse-400-rgb:
    255, 99,
    113;
  --clr-pulse-500: #ec354b;
  --clr-pulse-500-rgb:
    236, 53,
    75;
  --clr-mark-400: #3a9dff;
  --clr-mark-400-rgb:
    58, 157,
    255;
  --clr-mark-500: #1b74e4;
  --clr-mark-500-rgb:
    27, 116,
    228;
  --clr-brand-300: #81a7ff;
  --clr-brand-300-rgb:
    129, 167,
    255;
  --clr-brand-500: #3564ed;
  --clr-brand-500-rgb:
    53, 100,
    237;
  --clr-brand-600: #345ec1;
  --clr-brand-600-rgb:
    52, 94,
    193;
  --clr-brand-650: #284cdc;
  --clr-brand-650-rgb:
    40, 76,
    220;
  --clr-brand-700: #2e50e7;
  --clr-brand-700-rgb:
    46, 80,
    231;
  --clr-green-50: #eaf7ed;
  --clr-green-50-rgb:
    234, 247,
    237;
  --clr-green-200: #86efac;
  --clr-green-200-rgb:
    134, 239,
    172;
  --clr-green-500: #22c55e;
  --clr-green-500-rgb:
    34, 197,
    94;
  --clr-green-600: #16a34a;
  --clr-green-600-rgb:
    22, 163,
    74;
  --clr-green-700: #147d3b;
  --clr-green-700-rgb:
    20, 125,
    59;
  --clr-green-950: #153323;
  --clr-green-950-rgb:
    21, 51,
    35;
  --clr-amber-50: #fff3dc;
  --clr-amber-50-rgb:
    255, 243,
    220;
  --clr-amber-300: #fbbf24;
  --clr-amber-300-rgb:
    251, 191,
    36;
  --clr-amber-700: #b05009;
  --clr-amber-700-rgb:
    176, 80,
    9;
  --clr-amber-950: #3d2b14;
  --clr-amber-950-rgb:
    61, 43,
    20;
  --clr-orange-400: #fb923c;
  --clr-orange-400-rgb:
    251, 146,
    60;
  --clr-orange-500: #f58c1e;
  --clr-orange-500-rgb:
    245, 140,
    30;
  --clr-orange-600: #ea580c;
  --clr-orange-600-rgb:
    234, 88,
    12;
  --clr-rose-50: #fff1f2;
  --clr-rose-50-rgb:
    255, 241,
    242;
  --clr-rose-200: #fecdd3;
  --clr-rose-200-rgb:
    254, 205,
    211;
  --clr-rose-300: #fca5a5;
  --clr-rose-300-rgb:
    252, 165,
    165;
  --clr-rose-700: #9f3450;
  --clr-rose-700-rgb:
    159, 52,
    80;
  --clr-rose-950: #451b24;
  --clr-rose-950-rgb:
    69, 27,
    36;
  --clr-brown-300: #d6b77e;
  --clr-brown-300-rgb:
    214, 183,
    126;
  --clr-brown-700: #806032;
  --clr-brown-700-rgb:
    128, 96,
    50;
  --clr-teal-300: #7fdbbc;
  --clr-teal-300-rgb:
    127, 219,
    188;
  --clr-teal-700: #207a63;
  --clr-teal-700-rgb:
    32, 122,
    99;
  --clr-violet-50: #f5f0ff;
  --clr-violet-50-rgb:
    245, 240,
    255;
  --clr-violet-300: #c4a7f5;
  --clr-violet-300-rgb:
    196, 167,
    245;
  --clr-violet-700: #7c3aed;
  --clr-violet-700-rgb:
    124, 58,
    237;
  --clr-violet-950: #2e1654;
  --clr-violet-950-rgb:
    46, 22,
    84;
  --clr-graphite-50: #f6f7f9;
  --clr-graphite-50-rgb:
    246, 247,
    249;
  --clr-graphite-100: #eef1f4;
  --clr-graphite-100-rgb:
    238, 241,
    244;
  --clr-graphite-200: #e3e7ec;
  --clr-graphite-200-rgb:
    227, 231,
    236;
  --clr-graphite-300: #d3d9e0;
  --clr-graphite-300-rgb:
    211, 217,
    224;
  --clr-graphite-500: #66717e;
  --clr-graphite-500-rgb:
    102, 113,
    126;
  --clr-graphite-600: #626d7a;
  --clr-graphite-600-rgb:
    98, 109,
    122;
  --clr-graphite-700: #3f4a57;
  --clr-graphite-700-rgb:
    63, 74,
    87;
  --clr-graphite-900: #1d2530;
  --clr-graphite-900-rgb:
    29, 37,
    48;
  --clr-cyan-50: #e3f6fc;
  --clr-cyan-50-rgb:
    227, 246,
    252;
  --clr-cyan-100: #cdeaf3;
  --clr-cyan-100-rgb:
    205, 234,
    243;
  --clr-cyan-200: #8fdcf0;
  --clr-cyan-200-rgb:
    143, 220,
    240;
  --clr-cyan-300: #67e8f9;
  --clr-cyan-300-rgb:
    103, 232,
    249;
  --clr-cyan-400: #3fd3f7;
  --clr-cyan-400-rgb:
    63, 211,
    247;
  --clr-cyan-500: #06b6d4;
  --clr-cyan-500-rgb:
    6, 182,
    212;
  --clr-cyan-600: #16779a;
  --clr-cyan-600-rgb:
    22, 119,
    154;
  --clr-cyan-700: #0e7490;
  --clr-cyan-700-rgb:
    14, 116,
    144;
  --clr-cyan-800: #155e75;
  --clr-cyan-800-rgb:
    21, 94,
    117;
  --clr-cyan-900: #0b3a4f;
  --clr-cyan-900-rgb:
    11, 58,
    79;
  --clr-cyan-950: #0a2a3d;
  --clr-cyan-950-rgb:
    10, 42,
    61;
  --clr-ice-0: #ffffff;
  --clr-ice-0-rgb:
    255, 255,
    255;
  --clr-ice-50: #f4f8fc;
  --clr-ice-50-rgb:
    244, 248,
    252;
  --clr-ice-100: #eef3f9;
  --clr-ice-100-rgb:
    238, 243,
    249;
  --clr-ice-150: #ebf1f8;
  --clr-ice-150-rgb:
    235, 241,
    248;
  --clr-ice-200: #dfe8f2;
  --clr-ice-200-rgb:
    223, 232,
    242;
  --clr-ice-300: #cfdbe8;
  --clr-ice-300-rgb:
    207, 219,
    232;
  --clr-ice-500: #52637a;
  --clr-ice-500-rgb:
    82, 99,
    122;
  --clr-ice-700: #3a4c63;
  --clr-ice-700-rgb:
    58, 76,
    99;
  --clr-ice-900: #0e1c30;
  --clr-ice-900-rgb:
    14, 28,
    48;
  --clr-night-100: #e7f2ff;
  --clr-night-100-rgb:
    231, 242,
    255;
  --clr-night-300: #a9bed8;
  --clr-night-300-rgb:
    169, 190,
    216;
  --clr-night-400: #8aa1bf;
  --clr-night-400-rgb:
    138, 161,
    191;
  --clr-night-700: #1f3350;
  --clr-night-700-rgb:
    31, 51,
    80;
  --clr-night-800: #16263d;
  --clr-night-800-rgb:
    22, 38,
    61;
  --clr-night-850: #102039;
  --clr-night-850-rgb:
    16, 32,
    57;
  --clr-night-900: #0a1628;
  --clr-night-900-rgb:
    10, 22,
    40;
  --clr-night-950: #081221;
  --clr-night-950-rgb:
    8, 18,
    33;
  --clr-night-1000: #040a14;
  --clr-night-1000-rgb:
    4, 10,
    20;
  --clr-cobalt-50: #e3ecff;
  --clr-cobalt-50-rgb:
    227, 236,
    255;
  --clr-cobalt-100: #cddcff;
  --clr-cobalt-100-rgb:
    205, 220,
    255;
  --clr-cobalt-300: #8fb0ff;
  --clr-cobalt-300-rgb:
    143, 176,
    255;
  --clr-cobalt-400: #5487ff;
  --clr-cobalt-400-rgb:
    84, 135,
    255;
  --clr-cobalt-450: #4d82ff;
  --clr-cobalt-450-rgb:
    77, 130,
    255;
  --clr-cobalt-500: #2f6bff;
  --clr-cobalt-500-rgb:
    47, 107,
    255;
  --clr-cobalt-600: #0b5cff;
  --clr-cobalt-600-rgb:
    11, 92,
    255;
  --clr-cobalt-700: #0047d9;
  --clr-cobalt-700-rgb:
    0, 71,
    217;
  --clr-cobalt-800: #0039ad;
  --clr-cobalt-800-rgb:
    0, 57,
    173;
  --clr-cobalt-900: #1d2840;
  --clr-cobalt-900-rgb:
    29, 40,
    64;
  --clr-cobalt-950: #14244a;
  --clr-cobalt-950-rgb:
    20, 36,
    74;
  --clr-carbon-0: #ffffff;
  --clr-carbon-0-rgb:
    255, 255,
    255;
  --clr-carbon-25: #f6f6f4;
  --clr-carbon-25-rgb:
    246, 246,
    244;
  --clr-carbon-50: #eef0f3;
  --clr-carbon-50-rgb:
    238, 240,
    243;
  --clr-carbon-100: #e6e8ec;
  --clr-carbon-100-rgb:
    230, 232,
    236;
  --clr-carbon-200: #d9dce2;
  --clr-carbon-200-rgb:
    217, 220,
    226;
  --clr-carbon-300: #c3c9d3;
  --clr-carbon-300-rgb:
    195, 201,
    211;
  --clr-carbon-350: #d4d8df;
  --clr-carbon-350-rgb:
    212, 216,
    223;
  --clr-carbon-600: #626873;
  --clr-carbon-600-rgb:
    98, 104,
    115;
  --clr-carbon-700: #474d58;
  --clr-carbon-700-rgb:
    71, 77,
    88;
  --clr-carbon-800: #2c313a;
  --clr-carbon-800-rgb:
    44, 49,
    58;
  --clr-carbon-850: #22262e;
  --clr-carbon-850-rgb:
    34, 38,
    46;
  --clr-carbon-900: #171a20;
  --clr-carbon-900-rgb:
    23, 26,
    32;
  --clr-carbon-950: #0b0d12;
  --clr-carbon-950-rgb:
    11, 13,
    18;
  --clr-carbon-975: #0f1217;
  --clr-carbon-975-rgb:
    15, 18,
    23;
  --clr-ink-100: #eef1f7;
  --clr-ink-100-rgb:
    238, 241,
    247;
  --clr-ink-300: #b3bac7;
  --clr-ink-300-rgb:
    179, 186,
    199;
  --clr-ink-400: #8a93a3;
  --clr-ink-400-rgb:
    138, 147,
    163;
  --clr-ink-700: #2a3242;
  --clr-ink-700-rgb:
    42, 50,
    66;
  --clr-ink-800: #1f2634;
  --clr-ink-800-rgb:
    31, 38,
    52;
  --clr-ink-850: #171e2b;
  --clr-ink-850-rgb:
    23, 30,
    43;
  --clr-ink-900: #10151f;
  --clr-ink-900-rgb:
    16, 21,
    31;
  --clr-ink-1000: #0a0d14;
  --clr-ink-1000-rgb:
    10, 13,
    20;
  --ui-link: #155e75;
  --ui-success-text: #147d3b;
  --ui-warning-text: #b05009;
  --ui-danger-text: #b91c1c;
  --ui-success-surface: #eaf7ed;
  --ui-warning-surface: #fff3dc;
  --ui-telemetry-warning-icon: #f59e0b;
  --ui-telemetry-critical-icon: #b05009;
  --ui-action: #0e7490;
  --ui-action-hover: #155e75;
  --ui-danger-action: #dc2626;
  --ui-danger-action-hover: #b91c1c;
  --ui-navigation: #ffffff;
  --ui-navigation-text: #1d2530;
  --ui-navigation-muted: #66717e;
  --ui-navigation-link: #3f4a57;
  --ui-navigation-hover: #e3f6fc;
  --ui-navigation-active: #16779a;
  --ui-navigation-indicator: #16779a;
  --ui-navigation-border: #e3e7ec;
  --ui-navigation-control: #66717e;
  --ui-brand: #3564ed;
  --ui-pulse-red: #ec354b;
  --ui-pulse-coral: #ff6371;
  --ui-brand-mark: #3a9dff;
  --ui-brand-mark-deep: #1b74e4;
  --ui-focus: #0e7490;
  --ui-glow: #e3f6fc;
  --ui-pickup: #806032;
  --ui-delivery: #207a63;
  --ui-pickup-mark: #806032;
  --ui-delivery-mark: #207a63;
  --ui-transit: #345ec1;
  --ui-route-next: #7c3aed;
  --ui-route-next-surface: #f5f0ff;
  --ui-map-price-low: #15803d;
  --ui-map-price-middle: #f59e0b;
  --ui-map-price-high: #b91c1c;
  --ui-map-price-unavailable: #8090a5;
  --ui-map-route-current: #284cdc;
  --ui-map-route-empty: #f58c1e;
  --ui-map-route-future: #7c3aed;
  --ui-map-route-option-one: #7c3aed;
  --ui-map-route-option-two: #207a63;
  --ui-map-route-option-three: #9f3450;
  --ui-canvas: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f6f7f9;
  --ui-surface-muted: #eef1f4;
  --ui-text: #1d2530;
  --ui-text-secondary: #3f4a57;
  --ui-text-muted: #626d7a;
  --ui-border: #d3d9e0;
  --ui-border-subtle: #e3e7ec;
  --ui-accent: #16779a;
  --ui-hud-glow: #16779a;
  --ui-hud-line: #16779a;
  --ui-route-series-0: #7c3aed;
  --ui-route-series-1: #207a63;
  --ui-route-series-2: #9f3450;
  --ui-route-series-3: #b05009;
  --ui-route-series-4: #806032;
  --ui-on-accent: #ffffff;
  --ui-selected: #e3f6fc;
  --ui-arrival-surface: #e3f6fc;
  --ui-selection-border: #cdeaf3;
  --ui-danger-surface: #fff1f2;
  --ui-danger-border: #fecdd3;
  --ui-shadow: #000000;
  --ui-overlay: #000000;
  --ui-avatar-1: #0b5cff;
  --ui-avatar-2: #147d3b;
  --ui-avatar-3: #806032;
  --ui-avatar-4: #7c3aed;
  --ui-avatar-5: #9f3450;
  --ui-avatar-6: #0e7490;
  --space-hair: 0.0625rem;
  --space-micro: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-xxl: 1.5rem;
  --space-section: 2rem;
  --type-caption: 0.6875rem;
  --type-small: 0.75rem;
  --type-label: 0.8125rem;
  --type-body: 0.875rem;
  --type-lead: 1rem;
  --type-subtitle: 1.125rem;
  --type-heading: 1.25rem;
  --type-title: 1.5rem;
  --type-page-title: 2rem;
  --type-emoji: 3rem;
  --type-emoji-few: 2.25rem;
  --type-micro: 0.6875rem;
  --size-control: 2.5rem;
  --size-control-compact: 2rem;
  --size-control-touch: 2.75rem;
  --size-checkbox: 1.25rem;
  --size-route-handle: 1.125rem;
  --size-pane-tab: 6rem;
  --size-scrollbar: 0.625rem;
  --size-content-form: 65rem;
  --size-content-account: 36rem;
  --size-content-login: 25rem;
  --size-content-load-dialog: 56rem;
  --size-pay-list: 20rem;
  --size-pay-rail: 14rem;
  --size-pay-tile: 12rem;
  --size-form-field: 15rem;
  --size-filter-search: 10rem;
  --size-address-suggestions: 20rem;
  --size-map-compact-inspector: 56rem;
  --size-map-stop-inspector: 46rem;
  --size-map-details-card: 37.5rem;
  --size-map-fuel-card: 32rem;
  --size-map-google-logo: 4.5rem;
  --size-map-google-footer: 1.75rem;
  --size-telemetry-reading: 9rem;
  --size-map-telemetry-reading: 6rem;
  --size-route-metric: 5.5rem;
  --size-dispatch-metric: 8rem;
  --size-dispatch-dialog-metric: 10rem;
  --size-dispatch-load-card: 22.5rem;
  --size-dispatch-orders-min: 17rem;
  --size-dispatch-orders-max: 22rem;
  --size-dispatch-orders-wide: 32rem;
  --size-dispatch-papers-offset: 15rem;
  --size-dispatch-stop-marker: 1.5rem;
  --size-dispatch-broker-label: 10.5rem;
  --size-card-order-ids: 12rem;
  --size-dispatch-stop-state: 6.5rem;
  --size-dispatch-stop-state-face: 1.625rem;
  --size-dispatch-stop-map: 20rem;
  --size-dispatch-save-state: 8.5rem;
  --size-dispatch-head-actions: 12rem;
  --size-dispatch-phone-bar: 4rem;
  --size-dispatch-stop-list: 25rem;
  --size-dispatch-stop-list-min: 18rem;
  --size-dispatch-workspace-side: 21rem;
  --size-dispatch-workspace-side-min: 17rem;
  --size-dispatch-stop-map-pin: 1.375rem;
  --size-fuel-editor-card: 26rem;
  --size-fuel-editor-action: 6rem;
  --size-fuel-visit: 14rem;
  --size-fuel-visit-number: 1.375rem;
  --size-popup-stop-badge: 1.625rem;
  --size-rail: 5.25rem;
  --size-rail-wide: 12.5rem;
  --size-rail-icon: 1.25rem;
  --size-action-icon: 1.25rem;
  --size-bol-preview: 30rem;
  --size-bol-description: 12rem;
  --size-inline-icon: 0.875rem;
  --size-rail-logo: 1.6rem;
  --size-job-mark: 0.7rem;
  --size-ledger-row: 2.6rem;
  --size-status-badge: 5.75rem;
  --size-topbar: 3.5rem;
  --size-fleet-list: 18.75rem;
  --size-fleet-panel: 25rem;
  --size-fleet-map-bar: 3.5rem;
  --size-fleet-card-max: 41rem;
  --size-fleet-stage-short: 28rem;
  --size-trip-card-min: 14rem;
  --size-table-head: 2.5rem;
  --size-card-order: 21rem;
  --size-card-identity: 26rem;
  --size-card-next-stop: 18rem;
  --size-table-load: 13.5rem;
  --size-table-load-wide: 21rem;
  --size-table-route: 10rem;
  --size-table-miles: 11rem;
  --size-table-miles-wide: 15rem;
  --size-table-money: 10rem;
  --size-table-money-wide: 12.5rem;
  --size-table-figure-line: 1.25rem;
  --size-trip-chain: 7.5rem;
  --size-trip-fuel-gauge: 4.5rem;
  --size-trip-chain-phone: 8rem;
  --size-hos-dial: 3.625rem;
  --size-hos-dial-compact: 3.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-panel: 1rem;
  --radius-pill: 999rem;
  --radius-bubble: 1.125rem;
  --shadow-bubble: 0 1px 1.5px color-mix(in srgb, var(--ui-shadow) 9%, transparent);
  --shadow-card: 0 2px 6px color-mix(in srgb, var(--ui-shadow) 8%, transparent);
  --shadow-popup: 0 4px 16px color-mix(in srgb, var(--ui-shadow) 12%, transparent);
  --shadow-modal: 0 12px 40px color-mix(in srgb, var(--ui-shadow) 16%, transparent);
  --shadow-panel: 0 1px 2px color-mix(in srgb, var(--ui-shadow) 6%, transparent), 0 8px 28px color-mix(in srgb, var(--ui-shadow) 7%, transparent);
  color-scheme: light;
  font-size: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
:root[data-theme=light] {
  --shadow-card: none;
  --shadow-panel: none;
  --shadow-popup: 0 2px 8px color-mix(in srgb, var(--ui-shadow) 8%, transparent);
  --shadow-modal: 0 8px 24px color-mix(in srgb, var(--ui-shadow) 12%, transparent);
}

[data-theme=dark] {
  color-scheme: dark;
  --ui-link: #67e8f9;
  --ui-success-text: #86efac;
  --ui-warning-text: #fbbf24;
  --ui-danger-text: #fca5a5;
  --ui-success-surface: #153323;
  --ui-warning-surface: #3d2b14;
  --ui-telemetry-warning-icon: #f59e0b;
  --ui-telemetry-critical-icon: #fbbf24;
  --ui-action: #0e7490;
  --ui-action-hover: #155e75;
  --ui-danger-action: #dc2626;
  --ui-danger-action-hover: #b91c1c;
  --ui-navigation: #081221;
  --ui-navigation-text: #e7f2ff;
  --ui-navigation-muted: #8aa1bf;
  --ui-navigation-link: #a9bed8;
  --ui-navigation-hover: #102039;
  --ui-navigation-active: #0e7490;
  --ui-navigation-indicator: #3fd3f7;
  --ui-navigation-border: #1f3350;
  --ui-navigation-control: #8aa1bf;
  --ui-brand: #3564ed;
  --ui-pulse-red: #ec354b;
  --ui-pulse-coral: #ff6371;
  --ui-brand-mark: #3a9dff;
  --ui-brand-mark-deep: #1b74e4;
  --ui-focus: #67e8f9;
  --ui-glow: #0b3a4f;
  --ui-pickup: #d6b77e;
  --ui-delivery: #7fdbbc;
  --ui-pickup-mark: #d6b77e;
  --ui-delivery-mark: #7fdbbc;
  --ui-transit: #93b4ff;
  --ui-route-next: #c4a7f5;
  --ui-route-next-surface: #2e1654;
  --ui-map-price-low: #15803d;
  --ui-map-price-middle: #f59e0b;
  --ui-map-price-high: #b91c1c;
  --ui-map-price-unavailable: #8090a5;
  --ui-map-route-current: #284cdc;
  --ui-map-route-empty: #fb923c;
  --ui-map-route-future: #7c3aed;
  --ui-map-route-option-one: #7c3aed;
  --ui-map-route-option-two: #207a63;
  --ui-map-route-option-three: #9f3450;
  --ui-canvas: #040a14;
  --ui-surface: #0a1628;
  --ui-surface-soft: #081221;
  --ui-surface-muted: #102039;
  --ui-text: #e7f2ff;
  --ui-text-secondary: #a9bed8;
  --ui-text-muted: #8aa1bf;
  --ui-border: #1f3350;
  --ui-border-subtle: #16263d;
  --ui-accent: #3fd3f7;
  --ui-hud-glow: #3fd3f7;
  --ui-hud-line: #3fd3f7;
  --ui-route-series-0: #c4a7f5;
  --ui-route-series-1: #7fdbbc;
  --ui-route-series-2: #fca5a5;
  --ui-route-series-3: #fbbf24;
  --ui-route-series-4: #d6b77e;
  --ui-on-accent: #ffffff;
  --ui-selected: #0a2a3d;
  --ui-arrival-surface: #0a2a3d;
  --ui-selection-border: #0e7490;
  --ui-danger-surface: #451b24;
  --ui-danger-border: #9f3450;
  --ui-shadow: #000000;
  --ui-overlay: #000000;
  --ui-avatar-1: #0b5cff;
  --ui-avatar-2: #147d3b;
  --ui-avatar-3: #806032;
  --ui-avatar-4: #7c3aed;
  --ui-avatar-5: #9f3450;
  --ui-avatar-6: #0e7490;
}

[data-theme=light] {
  color-scheme: light;
  --ui-link: #155e75;
  --ui-success-text: #147d3b;
  --ui-warning-text: #b05009;
  --ui-danger-text: #b91c1c;
  --ui-success-surface: #eaf7ed;
  --ui-warning-surface: #fff3dc;
  --ui-telemetry-warning-icon: #f59e0b;
  --ui-telemetry-critical-icon: #b05009;
  --ui-action: #0e7490;
  --ui-action-hover: #155e75;
  --ui-danger-action: #dc2626;
  --ui-danger-action-hover: #b91c1c;
  --ui-navigation: #ffffff;
  --ui-navigation-text: #1d2530;
  --ui-navigation-muted: #66717e;
  --ui-navigation-link: #3f4a57;
  --ui-navigation-hover: #e3f6fc;
  --ui-navigation-active: #16779a;
  --ui-navigation-indicator: #16779a;
  --ui-navigation-border: #e3e7ec;
  --ui-navigation-control: #66717e;
  --ui-brand: #3564ed;
  --ui-pulse-red: #ec354b;
  --ui-pulse-coral: #ff6371;
  --ui-brand-mark: #3a9dff;
  --ui-brand-mark-deep: #1b74e4;
  --ui-focus: #0e7490;
  --ui-glow: #e3f6fc;
  --ui-pickup: #806032;
  --ui-delivery: #207a63;
  --ui-pickup-mark: #806032;
  --ui-delivery-mark: #207a63;
  --ui-transit: #345ec1;
  --ui-route-next: #7c3aed;
  --ui-route-next-surface: #f5f0ff;
  --ui-map-price-low: #15803d;
  --ui-map-price-middle: #f59e0b;
  --ui-map-price-high: #b91c1c;
  --ui-map-price-unavailable: #8090a5;
  --ui-map-route-current: #284cdc;
  --ui-map-route-empty: #f58c1e;
  --ui-map-route-future: #7c3aed;
  --ui-map-route-option-one: #7c3aed;
  --ui-map-route-option-two: #207a63;
  --ui-map-route-option-three: #9f3450;
  --ui-canvas: #f6f7f9;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f6f7f9;
  --ui-surface-muted: #eef1f4;
  --ui-text: #1d2530;
  --ui-text-secondary: #3f4a57;
  --ui-text-muted: #626d7a;
  --ui-border: #d3d9e0;
  --ui-border-subtle: #e3e7ec;
  --ui-accent: #16779a;
  --ui-hud-glow: #16779a;
  --ui-hud-line: #16779a;
  --ui-route-series-0: #7c3aed;
  --ui-route-series-1: #207a63;
  --ui-route-series-2: #9f3450;
  --ui-route-series-3: #b05009;
  --ui-route-series-4: #806032;
  --ui-on-accent: #ffffff;
  --ui-selected: #e3f6fc;
  --ui-arrival-surface: #e3f6fc;
  --ui-selection-border: #cdeaf3;
  --ui-danger-surface: #fff1f2;
  --ui-danger-border: #fecdd3;
  --ui-shadow: #000000;
  --ui-overlay: #000000;
  --ui-avatar-1: #0b5cff;
  --ui-avatar-2: #147d3b;
  --ui-avatar-3: #806032;
  --ui-avatar-4: #7c3aed;
  --ui-avatar-5: #9f3450;
  --ui-avatar-6: #0e7490;
}

:root[data-design=cobalt] {
  --ui-link: #0047d9;
  --ui-success-text: #147d3b;
  --ui-warning-text: #b05009;
  --ui-danger-text: #b91c1c;
  --ui-success-surface: #eaf7ed;
  --ui-warning-surface: #fff3dc;
  --ui-telemetry-warning-icon: #f59e0b;
  --ui-telemetry-critical-icon: #b05009;
  --ui-action: #0b5cff;
  --ui-action-hover: #0047d9;
  --ui-danger-action: #dc2626;
  --ui-danger-action-hover: #b91c1c;
  --ui-navigation: #171a20;
  --ui-navigation-text: #ffffff;
  --ui-navigation-muted: #c3c9d3;
  --ui-navigation-link: #d4d8df;
  --ui-navigation-hover: #22262e;
  --ui-navigation-active: #1d2840;
  --ui-navigation-indicator: #4d82ff;
  --ui-navigation-border: #2c313a;
  --ui-navigation-control: #c3c9d3;
  --ui-brand: #3564ed;
  --ui-pulse-red: #ec354b;
  --ui-pulse-coral: #ff6371;
  --ui-brand-mark: #3a9dff;
  --ui-brand-mark-deep: #1b74e4;
  --ui-focus: #0b5cff;
  --ui-glow: #e3ecff;
  --ui-pickup: #806032;
  --ui-delivery: #207a63;
  --ui-pickup-mark: #ea580c;
  --ui-delivery-mark: #16a34a;
  --ui-transit: #345ec1;
  --ui-route-next: #7c3aed;
  --ui-route-next-surface: #f5f0ff;
  --ui-map-price-low: #15803d;
  --ui-map-price-middle: #f59e0b;
  --ui-map-price-high: #b91c1c;
  --ui-map-price-unavailable: #8090a5;
  --ui-map-route-current: #284cdc;
  --ui-map-route-empty: #f58c1e;
  --ui-map-route-future: #7c3aed;
  --ui-map-route-option-one: #7c3aed;
  --ui-map-route-option-two: #207a63;
  --ui-map-route-option-three: #9f3450;
  --ui-canvas: #f6f6f4;
  --ui-surface: #ffffff;
  --ui-surface-soft: #eef0f3;
  --ui-surface-muted: #e6e8ec;
  --ui-text: #0b0d12;
  --ui-text-secondary: #474d58;
  --ui-text-muted: #626873;
  --ui-border: #d9dce2;
  --ui-border-subtle: #e6e8ec;
  --ui-accent: #0b5cff;
  --ui-hud-glow: #0b5cff;
  --ui-hud-line: #0b5cff;
  --ui-route-series-0: #7c3aed;
  --ui-route-series-1: #207a63;
  --ui-route-series-2: #9f3450;
  --ui-route-series-3: #b05009;
  --ui-route-series-4: #806032;
  --ui-on-accent: #ffffff;
  --ui-selected: #e3ecff;
  --ui-arrival-surface: #e3ecff;
  --ui-selection-border: #0b5cff;
  --ui-danger-surface: #fff1f2;
  --ui-danger-border: #fecdd3;
  --ui-shadow: #000000;
  --ui-overlay: #000000;
  --ui-avatar-1: #0b5cff;
  --ui-avatar-2: #147d3b;
  --ui-avatar-3: #806032;
  --ui-avatar-4: #7c3aed;
  --ui-avatar-5: #9f3450;
  --ui-avatar-6: #0e7490;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-panel: 0.25rem;
  --radius-pill: 999rem;
  --radius-bubble: 1.125rem;
  --shadow-card: none;
  --shadow-panel: none;
  --panel-blur: none;
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

:root[data-design=cobalt][data-theme=dark] {
  --ui-link: #8fb0ff;
  --ui-success-text: #86efac;
  --ui-warning-text: #fbbf24;
  --ui-danger-text: #fca5a5;
  --ui-success-surface: #153323;
  --ui-warning-surface: #3d2b14;
  --ui-telemetry-warning-icon: #f59e0b;
  --ui-telemetry-critical-icon: #fbbf24;
  --ui-action: #0b5cff;
  --ui-action-hover: #2f6bff;
  --ui-danger-action: #dc2626;
  --ui-danger-action-hover: #b91c1c;
  --ui-navigation: #0f1217;
  --ui-navigation-text: #ffffff;
  --ui-navigation-muted: #c3c9d3;
  --ui-navigation-link: #d4d8df;
  --ui-navigation-hover: #22262e;
  --ui-navigation-active: #1d2840;
  --ui-navigation-indicator: #4d82ff;
  --ui-navigation-border: #2c313a;
  --ui-navigation-control: #c3c9d3;
  --ui-brand: #3564ed;
  --ui-pulse-red: #ec354b;
  --ui-pulse-coral: #ff6371;
  --ui-brand-mark: #3a9dff;
  --ui-brand-mark-deep: #1b74e4;
  --ui-focus: #5487ff;
  --ui-glow: #14244a;
  --ui-pickup: #d6b77e;
  --ui-delivery: #7fdbbc;
  --ui-pickup-mark: #fb923c;
  --ui-delivery-mark: #22c55e;
  --ui-transit: #93b4ff;
  --ui-route-next: #c4a7f5;
  --ui-route-next-surface: #2e1654;
  --ui-map-price-low: #15803d;
  --ui-map-price-middle: #f59e0b;
  --ui-map-price-high: #b91c1c;
  --ui-map-price-unavailable: #8090a5;
  --ui-map-route-current: #284cdc;
  --ui-map-route-empty: #fb923c;
  --ui-map-route-future: #7c3aed;
  --ui-map-route-option-one: #7c3aed;
  --ui-map-route-option-two: #207a63;
  --ui-map-route-option-three: #9f3450;
  --ui-canvas: #0a0d14;
  --ui-surface: #10151f;
  --ui-surface-soft: #171e2b;
  --ui-surface-muted: #1f2634;
  --ui-text: #eef1f7;
  --ui-text-secondary: #b3bac7;
  --ui-text-muted: #8a93a3;
  --ui-border: #2a3242;
  --ui-border-subtle: #1f2634;
  --ui-accent: #5487ff;
  --ui-hud-glow: #5487ff;
  --ui-hud-line: #5487ff;
  --ui-route-series-0: #c4a7f5;
  --ui-route-series-1: #7fdbbc;
  --ui-route-series-2: #fca5a5;
  --ui-route-series-3: #fbbf24;
  --ui-route-series-4: #d6b77e;
  --ui-on-accent: #ffffff;
  --ui-selected: #14244a;
  --ui-arrival-surface: #14244a;
  --ui-selection-border: #2f6bff;
  --ui-danger-surface: #451b24;
  --ui-danger-border: #9f3450;
  --ui-shadow: #000000;
  --ui-overlay: #000000;
  --ui-avatar-1: #0b5cff;
  --ui-avatar-2: #147d3b;
  --ui-avatar-3: #806032;
  --ui-avatar-4: #7c3aed;
  --ui-avatar-5: #9f3450;
  --ui-avatar-6: #0e7490;
  color-scheme: dark;
}

html,
body {
  overscroll-behavior: none;
}

body {
  min-width: min(320px, 100%);
  background: var(--ui-canvas);
  color: var(--ui-text);
}

#app {
  min-height: 100vh;
  min-height: 100dvh;
}

:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:root[data-design=cobalt] h1.is-repeated {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
@media (width < 768px), (pointer: coarse) {
  :root {
    --panel-blur: none;
  }
}
*,
*::before,
*::after {
  transition: none !important;
}

@media not (forced-colors: active) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ui-accent) 45%, transparent) color-mix(in srgb, var(--ui-accent) 6%, transparent);
  }
  ::-webkit-scrollbar {
    width: var(--size-scrollbar);
    height: var(--size-scrollbar);
  }
  ::-webkit-scrollbar-track {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ui-accent) 6%, transparent);
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ui-accent) 45%, transparent) padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--ui-accent) 65%, transparent);
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: color-mix(in srgb, var(--ui-accent) 80%, transparent);
  }
}
.auth-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--ui-canvas);
}

.main-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: var(--ui-canvas);
}
.main-layout__content {
  min-width: 0;
  padding: var(--space-md);
}
@media (width >= 800px) {
  .main-layout {
    grid-template-columns: var(--size-rail) minmax(0, 1fr);
    grid-template-rows: var(--size-topbar) minmax(0, 1fr);
    grid-template-areas: "top top" "rail main";
    gap: var(--space-md);
    padding: var(--space-md);
    background: radial-gradient(75rem 37.5rem at 20% -10%, color-mix(in srgb, var(--ui-accent) 12%, transparent), transparent 60%), radial-gradient(56rem 31rem at 110% 110%, color-mix(in srgb, var(--ui-route-next) 8%, transparent), transparent 60%), var(--ui-canvas);
    background-attachment: fixed;
  }
  :root[data-theme=light] .main-layout {
    background: var(--ui-canvas);
  }
  .main-layout__content {
    grid-area: main;
    padding: 0;
  }
}

@media (width >= 800px) {
  :root[data-design=cobalt] .main-layout {
    grid-template-columns: var(--size-rail-wide) minmax(0, 1fr);
    grid-template-rows: var(--size-topbar) minmax(0, 1fr);
    grid-template-areas: "rail top" "rail main";
    gap: 0;
    padding: 0;
    background: var(--ui-canvas);
  }
  :root[data-design=cobalt] .main-layout__content {
    padding: var(--space-md) var(--space-xl) var(--space-xl);
  }
}
.sidebar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--ui-navigation);
  color: var(--ui-navigation-text);
  border-right: 1px solid var(--ui-navigation-border);
}
.sidebar__header {
  display: contents;
}
.sidebar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--space-xs) 0;
}
.sidebar__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  flex: 1;
}
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--size-control-touch);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--ui-navigation-link);
  font-size: var(--type-body);
  font-weight: 500;
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.sidebar__nav a:hover {
  background: var(--ui-navigation-hover);
  color: var(--ui-on-accent);
}
.sidebar__nav a.active {
  background: var(--ui-action);
  color: var(--ui-on-accent);
  font-weight: 600;
}
.sidebar__nav a {
  position: relative;
}
.sidebar__badge {
  position: absolute;
  top: var(--space-micro);
  left: calc(var(--space-md) + var(--size-checkbox) - var(--space-xs));
  min-width: 1.4em;
  padding: 0 var(--space-micro);
  border-radius: var(--radius-pill);
  background: var(--ui-action);
  color: var(--ui-on-accent);
  font-size: var(--type-small);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}
.sidebar svg:not(.brand-logo) {
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  flex: 0 0 var(--size-checkbox);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar__footer {
  margin-left: auto;
}
.sidebar__footer .btn {
  font-size: var(--type-small);
  gap: var(--space-md);
  color: var(--ui-navigation-link);
}
.sidebar__account {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  text-align: left;
}
.sidebar__account-chevron {
  margin-left: auto;
}
.sidebar__account[aria-expanded=true] .sidebar__account-chevron {
  transform: rotate(180deg);
}
.sidebar__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 var(--size-control);
  height: var(--size-control);
  border: 1px solid var(--ui-navigation-control);
  border-radius: var(--radius-pill);
  background: var(--ui-navigation-hover);
  color: var(--ui-navigation-text);
  font-weight: 600;
}
.sidebar__account-text {
  display: grid;
  gap: var(--space-micro);
  min-width: 0;
}
.sidebar__account-text strong {
  font-size: var(--type-body);
  overflow-wrap: anywhere;
}
.sidebar__account-text span {
  font-size: var(--type-small);
  color: var(--ui-navigation-muted);
}
.sidebar__panel {
  display: contents;
}
.sidebar__toggle, .sidebar__backdrop {
  display: none;
}
@media (width < 800px) {
  .sidebar {
    position: relative;
    z-index: 1000;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ui-navigation-border);
  }
  .sidebar__header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    position: relative;
    z-index: 2;
    background: inherit;
  }
  .sidebar__brand {
    flex: 1;
  }
  .sidebar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: var(--size-control-touch);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--ui-navigation-control);
    border-radius: var(--radius-sm);
    color: var(--ui-on-accent);
    background: var(--ui-navigation-hover);
    cursor: pointer;
    font-size: var(--type-body);
  }
  .sidebar__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: var(--space-md);
    background: var(--ui-navigation);
    border-top: 1px solid var(--ui-navigation-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-popup);
  }
  .sidebar--open .sidebar__panel {
    display: grid;
    gap: var(--space-md);
  }
  .sidebar__nav {
    display: grid;
    gap: var(--space-sm);
  }
  .sidebar__nav a {
    min-height: var(--size-control-touch);
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }
  .sidebar__nav svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }
  .sidebar__footer {
    margin: 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--ui-navigation-border);
  }
  .sidebar__footer .btn {
    min-height: var(--size-control-touch);
    justify-content: flex-start;
    padding: var(--space-md) var(--space-md);
    font-size: var(--type-body);
  }
  .sidebar__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    background: color-mix(in srgb, var(--ui-overlay) 35%, transparent);
    cursor: default;
  }
}
@media (width < 500px) {
  .sidebar__toggle {
    min-width: var(--size-control-touch);
    padding: var(--space-sm);
  }
  .sidebar__toggle > span {
    display: none;
  }
}

.sidebar__divider {
  display: none;
}

.sidebar {
  border-right-color: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  box-shadow: 1px 0 0 color-mix(in srgb, var(--ui-accent) 8%, transparent);
}

.sidebar .brand-logo--reversed {
  color: var(--ui-navigation-text);
}

.sidebar__nav a:hover,
.sidebar__toggle {
  color: var(--ui-navigation-text);
}

.sidebar__nav a.active {
  box-shadow: inset 3px 0 0 var(--ui-navigation-indicator);
}

:root[data-theme=dark] .sidebar__nav a.active {
  box-shadow: inset 3px 0 0 var(--ui-navigation-indicator), 0 0 14px color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

.filter-toolbar {
  border-color: color-mix(in srgb, var(--ui-accent) 22%, transparent);
}

@media (width >= 800px) {
  .sidebar {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--ui-surface) 86%, transparent);
    backdrop-filter: var(--panel-blur, blur(16px) saturate(1.2));
    box-shadow: var(--shadow-panel);
    grid-area: rail;
    position: sticky;
    top: calc(var(--size-topbar) + var(--space-md) * 2);
    align-self: start;
    height: calc(100dvh - var(--size-topbar) - var(--space-md) * 3);
    overflow-y: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
  }
  .sidebar::before, .sidebar::after {
    content: "";
    position: absolute;
    width: var(--space-md);
    height: var(--space-md);
    border: 0 solid color-mix(in srgb, var(--ui-accent) 38%, transparent);
    pointer-events: none;
  }
  .sidebar::before {
    top: var(--space-sm);
    left: var(--space-sm);
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-left-radius: var(--radius-sm);
  }
  .sidebar::after {
    right: var(--space-sm);
    bottom: var(--space-sm);
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-bottom-right-radius: var(--radius-sm);
  }
  :root[data-theme=light] .sidebar {
    background-image: none;
    animation: none;
    border-color: var(--ui-border-subtle);
    background-color: color-mix(in srgb, var(--ui-surface) 97%, transparent);
    backdrop-filter: var(--panel-blur, blur(8px));
    box-shadow: none;
  }
  :root[data-theme=light] .sidebar::before, :root[data-theme=light] .sidebar::after {
    content: none;
  }
  :root[data-design=cobalt] .sidebar {
    border-color: var(--ui-border-subtle);
    background: var(--ui-surface);
    backdrop-filter: none;
    box-shadow: none;
    animation: none;
  }
  :root[data-design=cobalt] .sidebar::before, :root[data-design=cobalt] .sidebar::after {
    content: none;
  }
  .sidebar__header,
  .sidebar__footer {
    display: none;
  }
  .sidebar__nav {
    flex: 0;
    display: grid;
    gap: var(--space-xs);
  }
  .sidebar__nav a {
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 0;
    margin: 0 var(--space-xs);
    padding: var(--space-sm) var(--space-micro);
    border-radius: var(--radius-sm);
    color: var(--ui-text-secondary);
    font-size: var(--type-caption);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: normal;
  }
  .sidebar__nav a:hover {
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
  }
  .sidebar__nav a.active {
    color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 42%, transparent);
  }
  :root[data-theme=light] .sidebar__nav a.active {
    background: var(--ui-selected);
    box-shadow: inset 0 0 0 1px var(--ui-selection-border);
  }
  .sidebar__nav a.active::before {
    content: "";
    position: absolute;
    top: var(--space-sm);
    bottom: var(--space-sm);
    left: calc(-1 * var(--space-xs) - 1px);
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--ui-accent);
  }
  :root[data-theme=dark] .sidebar__nav a.active::before {
    box-shadow: 0 0 10px var(--ui-accent);
  }
  .sidebar__badge {
    left: calc(50% + var(--space-xs));
  }
}
@media (width >= 800px) {
  :root[data-design=cobalt] .sidebar {
    grid-row: 1/-1;
    position: sticky;
    top: 0;
    align-self: stretch;
    height: 100dvh;
    gap: 0;
    padding: 0 0 var(--space-md);
    border: 0;
    border-radius: 0;
    background: var(--ui-navigation);
    box-shadow: none;
  }
  :root[data-design=cobalt] .sidebar__header {
    display: flex;
    align-items: center;
    min-height: var(--size-topbar);
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-xl);
    border-bottom: 1px solid var(--ui-navigation-border);
  }
  :root[data-design=cobalt] .sidebar__brand .brand-logo--compact,
  :root[data-design=cobalt] .sidebar__toggle {
    display: none;
  }
  :root[data-design=cobalt] .sidebar__brand .brand-logo--reversed {
    --brand-logo-size: var(--size-rail-logo);
    color: var(--ui-navigation-text);
  }
  :root[data-design=cobalt] .sidebar__nav {
    gap: var(--space-hair);
  }
  :root[data-design=cobalt] .sidebar__nav a {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-md);
    min-height: var(--size-control);
    margin: 0;
    padding: var(--space-sm) var(--space-xl);
    border-radius: 0;
    color: var(--ui-navigation-link);
    font-size: var(--type-body);
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    background: transparent;
    box-shadow: none;
  }
  :root[data-design=cobalt] .sidebar__nav a:hover {
    background: var(--ui-navigation-hover);
    color: var(--ui-navigation-text);
  }
  :root[data-design=cobalt] .sidebar__nav a.active {
    background: var(--ui-navigation-active);
    color: var(--ui-navigation-text);
    box-shadow: inset 3px 0 0 var(--ui-navigation-indicator);
  }
  :root[data-design=cobalt] .sidebar__nav a.active::before {
    content: none;
  }
  :root[data-design=cobalt] .sidebar__nav a:focus-visible {
    outline-offset: -2px;
  }
  :root[data-design=cobalt] .sidebar svg:not(.brand-logo) {
    width: var(--size-rail-icon);
    height: var(--size-rail-icon);
    flex-basis: var(--size-rail-icon);
    stroke-width: 2;
  }
  :root[data-design=cobalt] .sidebar__badge {
    left: calc(var(--space-xl) + var(--size-rail-icon) - var(--space-xs));
  }
  :root[data-design=cobalt] .sidebar__divider {
    display: block;
    height: 1px;
    margin: var(--space-sm) var(--space-xl);
    background: var(--ui-navigation-border);
  }
}
.topbar {
  display: none;
}

@media (width >= 800px) {
  .topbar {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
    border-radius: var(--radius-panel);
    background: color-mix(in srgb, var(--ui-surface) 86%, transparent);
    backdrop-filter: var(--panel-blur, blur(16px) saturate(1.2));
    box-shadow: var(--shadow-panel);
    z-index: 100;
    grid-area: top;
    position: sticky;
    top: var(--space-md);
    outline: var(--space-md) solid var(--ui-canvas);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-width: 0;
    padding: 0 var(--space-lg);
  }
  .topbar::before, .topbar::after {
    content: "";
    position: absolute;
    width: var(--space-md);
    height: var(--space-md);
    border: 0 solid color-mix(in srgb, var(--ui-accent) 38%, transparent);
    pointer-events: none;
  }
  .topbar::before {
    top: var(--space-sm);
    left: var(--space-sm);
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-left-radius: var(--radius-sm);
  }
  .topbar::after {
    right: var(--space-sm);
    bottom: var(--space-sm);
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-bottom-right-radius: var(--radius-sm);
  }
  :root[data-theme=light] .topbar {
    background-image: none;
    animation: none;
    border-color: var(--ui-border-subtle);
    background-color: color-mix(in srgb, var(--ui-surface) 97%, transparent);
    backdrop-filter: var(--panel-blur, blur(8px));
    box-shadow: none;
  }
  :root[data-theme=light] .topbar::before, :root[data-theme=light] .topbar::after {
    content: none;
  }
  :root[data-design=cobalt] .topbar {
    border-color: var(--ui-border-subtle);
    background: var(--ui-surface);
    backdrop-filter: none;
    box-shadow: none;
    animation: none;
  }
  :root[data-design=cobalt] .topbar::before, :root[data-design=cobalt] .topbar::after {
    content: none;
  }
  .topbar::after {
    top: auto;
    left: var(--space-xxl);
    right: var(--space-xxl);
    bottom: -1px;
    width: auto;
    height: 1px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-accent) 42%, transparent), transparent);
  }
  .topbar__brand {
    display: flex;
    flex: none;
    color: var(--ui-text);
  }
  .topbar__brand .brand-logo {
    --brand-logo-size: 1.5rem;
  }
  .topbar__crumbs {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    padding-left: var(--space-lg);
    border-left: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
  }
  .topbar__crumbs b {
    color: var(--ui-text-secondary);
  }
  .topbar__theme-icon {
    display: inline-grid;
  }
  .topbar__spacer {
    flex: 1;
  }
  .topbar__search {
    flex: 0 1000 22rem;
    width: auto;
    min-width: 0;
  }
  .topbar__icon-button {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--size-control);
    height: var(--size-control);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-sm);
    background: var(--ui-surface-soft);
    color: var(--ui-text-secondary);
    cursor: pointer;
  }
  .topbar__icon-button:hover {
    color: var(--ui-accent);
    border-color: color-mix(in srgb, var(--ui-accent) 42%, transparent);
  }
  .topbar__clock {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-left: var(--space-lg);
    border-left: 1px solid var(--ui-border);
    color: var(--ui-text-muted);
    white-space: nowrap;
  }
  .topbar__date {
    font-size: var(--type-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .topbar__time {
    color: var(--ui-text);
    font-size: var(--type-lead);
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .topbar__account-menu {
    position: relative;
    flex: none;
  }
  .topbar__account {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    max-width: 14rem;
    min-height: 0;
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-pill);
    background: var(--ui-surface-soft);
    color: var(--ui-text);
  }
  .topbar__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--size-control-compact);
    height: var(--size-control-compact);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 42%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    color: var(--ui-accent);
    font-size: var(--type-caption);
    font-weight: 700;
  }
  .topbar__account-text {
    display: grid;
    min-width: 0;
    text-align: left;
    line-height: 1.2;
  }
  .topbar__account-text strong,
  .topbar__account-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__account-text strong {
    font-size: var(--type-small);
  }
  .topbar__account-text span {
    color: var(--ui-text-muted);
    font-size: var(--type-caption);
  }
  .topbar__account-chevron {
    width: var(--space-lg);
    height: var(--space-lg);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    transform: rotate(180deg);
  }
  .topbar__account[aria-expanded=true] .topbar__account-chevron {
    transform: none;
  }
  #topbar-account-actions {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    z-index: 100;
    display: grid;
    gap: var(--space-xs);
    min-width: var(--size-form-field);
    padding: var(--space-sm);
    border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent);
    border-radius: var(--radius-md);
    background: var(--ui-surface);
    box-shadow: var(--shadow-popup);
  }
  #topbar-account-actions .btn {
    justify-content: flex-start;
    gap: var(--space-sm);
  }
  #topbar-account-actions .btn svg {
    width: var(--space-lg);
    height: var(--space-lg);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }
}
@media (width >= 800px) {
  :root[data-design=cobalt] .topbar {
    top: 0;
    outline: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    border-radius: 0;
    background: var(--ui-surface);
    padding: 0 var(--space-xl);
  }
  :root[data-design=cobalt] .topbar__brand {
    display: none;
  }
  :root[data-design=cobalt] .topbar__crumbs,
  :root[data-design=cobalt] .topbar__date {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--type-label);
  }
  :root[data-design=cobalt] .topbar__crumbs {
    padding-left: 0;
    border-left: 0;
  }
}
.btn.map-action-icon {
  min-width: var(--size-control-touch);
  min-height: var(--size-control-touch);
}

.btn {
  --button-bg: var(--ui-surface);
  --button-text: var(--ui-text-secondary);
  --button-border: var(--ui-border);
  --button-hover-bg: var(--ui-surface-muted);
  --button-hover-text: var(--ui-text);
  --button-hover-border: var(--ui-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-control);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--button-border, var(--ui-border));
  border-radius: var(--radius-sm);
  background: var(--button-bg, var(--ui-surface));
  color: var(--button-text, var(--ui-text-secondary));
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn:hover:not(:disabled) {
  background: var(--button-hover-bg, var(--ui-surface-muted));
  color: var(--button-hover-text, var(--ui-text));
  border-color: var(--button-hover-border, var(--ui-border));
}
.btn:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.btn:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}
@media (width < 800px) {
  .btn {
    min-height: var(--size-control-touch);
  }
}
.btn--small, .btn--table {
  min-height: var(--size-control-compact);
  padding: var(--space-xs) var(--space-md);
}
@media (width < 800px) {
  .btn--small, .btn--table {
    min-height: var(--size-control-touch);
  }
}
.btn--table {
  --button-bg: transparent;
  --button-border: transparent;
}
.btn--primary {
  font-weight: 600;
  --button-bg: var(--ui-action);
  --button-text: var(--ui-on-accent);
  --button-border: var(--ui-action);
  --button-hover-bg: var(--ui-action-hover);
  --button-hover-text: var(--ui-on-accent);
  --button-hover-border: var(--ui-action-hover);
}
.btn--danger {
  font-weight: 600;
  --button-bg: var(--ui-danger-action);
  --button-text: var(--ui-on-accent);
  --button-border: var(--ui-danger-action);
  --button-hover-bg: var(--ui-danger-action-hover);
  --button-hover-text: var(--ui-on-accent);
  --button-hover-border: var(--ui-danger-action-hover);
}
.btn--text {
  --button-bg: transparent;
  --button-border: transparent;
  --button-hover-border: transparent;
}
.btn--table-danger {
  --button-text: var(--ui-danger-text);
  --button-hover-bg: var(--ui-danger-surface);
  --button-hover-text: var(--ui-danger-text);
  --button-hover-border: var(--ui-danger-border);
}
.btn--sidebar {
  width: 100%;
  font-weight: 400;
  --button-bg: transparent;
  --button-text: var(--ui-navigation-link);
  --button-border: transparent;
  --button-hover-bg: var(--ui-navigation-hover);
  --button-hover-text: var(--ui-on-accent);
  --button-hover-border: transparent;
}

.form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--form-actions-space, var(--space-md));
  padding-top: var(--space-lg);
  border-top: 1px solid var(--ui-border-subtle);
}
@media (width < 800px) {
  .form__actions > .btn {
    flex: 1 1 auto;
  }
}
.form__errors {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--ui-danger-surface);
  border: 1px solid var(--ui-danger-border);
  border-radius: var(--radius-sm);
  color: var(--ui-danger-text);
  font-size: var(--type-label);
}

.form-field {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.form-field label {
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 600;
}
.form-field__control input,
.form-field__control textarea,
.form-field__control select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--size-control);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.4;
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form-field__control input::placeholder,
.form-field__control textarea::placeholder,
.form-field__control select::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}
.form-field__control input:where(:hover:not(:disabled):not(:focus)),
.form-field__control textarea:where(:hover:not(:disabled):not(:focus)),
.form-field__control select:where(:hover:not(:disabled):not(:focus)) {
  border-color: var(--ui-text-muted);
}
.form-field__control input:focus,
.form-field__control textarea:focus,
.form-field__control select:focus {
  border-color: var(--ui-focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 12%, transparent);
}
.form-field__control input:disabled,
.form-field__control textarea:disabled,
.form-field__control select:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}
.form-field__control input.invalid, .form-field__control input[aria-invalid=true],
.form-field__control textarea.invalid,
.form-field__control textarea[aria-invalid=true],
.form-field__control select.invalid,
.form-field__control select[aria-invalid=true] {
  border-color: var(--ui-danger-text);
}
.form-field__control input.invalid:focus, .form-field__control input[aria-invalid=true]:focus,
.form-field__control textarea.invalid:focus,
.form-field__control textarea[aria-invalid=true]:focus,
.form-field__control select.invalid:focus,
.form-field__control select[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger-text) 12%, transparent);
}
@media (width < 800px) {
  .form-field__control input,
  .form-field__control textarea,
  .form-field__control select {
    min-height: var(--size-control-touch);
    font-size: var(--type-lead);
  }
}
.form-field__control textarea {
  min-height: 96px;
  resize: vertical;
}
.form-field__control--error input,
.form-field__control--error textarea,
.form-field__control--error select {
  border-color: var(--ui-danger-text);
}
.form-field__control--error input:focus,
.form-field__control--error textarea:focus,
.form-field__control--error select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger-text) 12%, transparent);
}

.form-field__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--size-control-touch);
}
.form-field__checkbox input {
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  flex: 0 0 auto;
  accent-color: var(--ui-link);
  cursor: pointer;
}
.form-field__checkbox input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

html.popup-open {
  overflow: hidden;
}

@media (width < 800px) {
  body.popup-open {
    position: fixed;
    inset-inline: 0;
    top: var(--popup-scroll-offset, 0);
    width: 100%;
    overflow: hidden;
  }
}
.popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}
.popup__overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ui-overlay) 35%, transparent);
}
.popup__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--popup-max-width, 420px);
  max-height: var(--popup-max-height, none);
  overflow-y: var(--popup-overflow-y, visible);
  padding: var(--space-lg);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}
.popup__title {
  color: var(--ui-text);
  font-size: var(--type-lead);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-md);
}
.popup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.popup__head .popup__title {
  margin-bottom: 0;
}
.popup__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-control);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--button-border, var(--ui-border));
  border-radius: var(--radius-sm);
  background: var(--button-bg, var(--ui-surface));
  color: var(--button-text, var(--ui-text-secondary));
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.popup__close:hover:not(:disabled) {
  background: var(--button-hover-bg, var(--ui-surface-muted));
  color: var(--button-hover-text, var(--ui-text));
  border-color: var(--button-hover-border, var(--ui-border));
}
.popup__close:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.popup__close:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}
@media (width < 800px) {
  .popup__close {
    min-height: var(--size-control-touch);
  }
}
.popup__close {
  min-height: var(--size-control-compact);
  padding: var(--space-xs) var(--space-md);
}
@media (width < 800px) {
  .popup__close {
    min-height: var(--size-control-touch);
  }
}
.popup__close {
  width: var(--size-control-compact);
  min-width: var(--size-control-compact);
  padding: 0;
  flex-shrink: 0;
}
@media (width < 800px) {
  .popup__close {
    width: var(--size-control-touch);
    min-width: var(--size-control-touch);
  }
}
.popup__body {
  color: var(--ui-text-secondary);
}
.popup__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ui-border-subtle);
}

.data-table {
  width: 100%;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.data-table__header, .data-table__row {
  display: grid;
  grid-template-columns: var(--data-table-columns);
  align-items: center;
}
.data-table__header {
  background: var(--ui-surface-soft);
  color: var(--ui-text-secondary);
  font-size: var(--type-label);
  font-weight: 600;
  border-bottom: 1px solid var(--ui-border-subtle);
}
.data-table__row {
  background: var(--ui-surface);
  color: var(--ui-text);
  transition: background 120ms ease;
}
.data-table__row:not(:last-child) {
  border-bottom: 1px solid var(--ui-border-subtle);
}
.data-table__row:hover {
  background: var(--ui-surface-soft);
}
.data-table__row:focus-within {
  background: var(--ui-selected);
}
.data-table__header > div {
  padding: var(--space-md) var(--space-md);
}
.data-table__row > div {
  padding: var(--space-md) var(--space-md);
}
.data-table__header > div, .data-table__row > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-table__header > div:last-child {
  text-align: center;
}
.data-table__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

@media (width < 800px) {
  .data-table--cards {
    display: grid;
    gap: var(--space-md);
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .data-table--cards .data-table__header {
    display: none;
  }
  .data-table--cards .data-table__body {
    display: grid;
    gap: var(--space-md);
  }
  .data-table--cards .data-table__row {
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    gap: var(--space-md);
    background: var(--ui-surface);
  }
  .data-table--cards .data-table__row:hover {
    background: var(--ui-surface);
  }
  .data-table--cards .data-table__row > div {
    padding: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .data-table--cards .data-table__row > .data-table__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-top: var(--space-xs);
    padding-top: var(--space-md);
    border-top: 1px solid var(--ui-border-subtle);
  }
}

@media (width < 800px) {
  .data-table--stacked .data-table__header {
    display: none;
  }
  .data-table--stacked .data-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
  }
}

.data-table-pagination {
  width: 100%;
}
.data-table-pagination__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
}
.data-table-pagination__button, .data-table-pagination__info {
  min-height: var(--size-control);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}
.data-table-pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-control);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--button-border, var(--ui-border));
  border-radius: var(--radius-sm);
  background: var(--button-bg, var(--ui-surface));
  color: var(--button-text, var(--ui-text-secondary));
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.data-table-pagination__button:hover:not(:disabled) {
  background: var(--button-hover-bg, var(--ui-surface-muted));
  color: var(--button-hover-text, var(--ui-text));
  border-color: var(--button-hover-border, var(--ui-border));
}
.data-table-pagination__button:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.data-table-pagination__button:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}
@media (width < 800px) {
  .data-table-pagination__button {
    min-height: var(--size-control-touch);
  }
}
.data-table-pagination__button {
  width: var(--size-control);
  padding: 0;
}
@media (width < 800px) {
  .data-table-pagination__button {
    width: var(--size-control-touch);
  }
}
.data-table-pagination__info {
  min-width: 80px;
  gap: var(--space-md);
  padding: 0 var(--space-md);
  border: 0;
  background: transparent;
  color: var(--ui-text-secondary);
  font-size: var(--type-label);
  font-variant-numeric: tabular-nums;
}
.data-table-pagination__current {
  color: var(--ui-text);
  font-weight: 600;
}
.data-table-pagination__separator {
  color: var(--ui-border);
}

@media (width < 800px) {
  .data-table-pagination--cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .data-table-pagination--cards .data-table-pagination__navigation {
    order: 1;
    margin-bottom: 0;
    flex-wrap: wrap;
  }
}

.filter-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--ui-surface);
}
.filter-toolbar__views {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-soft);
}
.filter-toolbar__views svg {
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.filter-toolbar__views button {
  --button-bg: transparent;
  --button-border: transparent;
  --button-hover-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-control);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--button-border, var(--ui-border));
  border-radius: var(--radius-sm);
  background: var(--button-bg, var(--ui-surface));
  color: var(--button-text, var(--ui-text-secondary));
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.filter-toolbar__views button:hover:not(:disabled) {
  background: var(--button-hover-bg, var(--ui-surface-muted));
  color: var(--button-hover-text, var(--ui-text));
  border-color: var(--button-hover-border, var(--ui-border));
}
.filter-toolbar__views button:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.filter-toolbar__views button:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}
@media (width < 800px) {
  .filter-toolbar__views button {
    min-height: var(--size-control-touch);
  }
}
.filter-toolbar__views button[aria-pressed=true] {
  --button-bg: var(--ui-action);
  --button-hover-bg: var(--ui-action-hover);
  --button-text: var(--ui-on-accent);
  --button-hover-text: var(--ui-on-accent);
  --button-hover-border: var(--ui-action-hover);
  background: var(--ui-action);
  border-color: var(--ui-action);
  color: var(--ui-on-accent);
  font-weight: 600;
}
.filter-toolbar__toggle {
  --button-bg: transparent;
  --button-border: transparent;
  --button-hover-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-control);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--button-border, var(--ui-border));
  border-radius: var(--radius-sm);
  background: var(--button-bg, var(--ui-surface));
  color: var(--button-text, var(--ui-text-secondary));
  font: inherit;
  font-size: var(--type-body);
  line-height: 1.4;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.filter-toolbar__toggle:hover:not(:disabled) {
  background: var(--button-hover-bg, var(--ui-surface-muted));
  color: var(--button-hover-text, var(--ui-text));
  border-color: var(--button-hover-border, var(--ui-border));
}
.filter-toolbar__toggle:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.filter-toolbar__toggle:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  border-color: var(--ui-border-subtle);
  opacity: 0.5;
  cursor: not-allowed;
}
@media (width < 800px) {
  .filter-toolbar__toggle {
    min-height: var(--size-control-touch);
  }
}
.filter-toolbar__toggle {
  justify-content: flex-start;
  font-weight: 400;
  white-space: nowrap;
}
.filter-toolbar__toggle:has(input:checked) {
  color: var(--ui-text);
}
.filter-toolbar__toggle:has(input:focus-visible) {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}
.filter-toolbar__toggle input {
  width: var(--size-checkbox);
  height: var(--size-checkbox);
  flex: 0 0 auto;
  accent-color: var(--ui-link);
  cursor: pointer;
}
.filter-toolbar__toggle input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.filter-toolbar__drawer-toggle {
  display: none;
}

.filter-toolbar__drawer {
  display: contents;
}

@media (width < 768px) {
  .filter-toolbar:has(> .filter-toolbar__drawer) {
    position: relative;
  }
  .filter-toolbar__drawer-toggle {
    display: inline-flex;
    order: 1;
    flex-shrink: 0;
  }
  .filter-toolbar__drawer-toggle svg {
    width: var(--size-checkbox);
    height: var(--size-checkbox);
    flex-shrink: 0;
  }
  .filter-toolbar__drawer {
    display: none;
  }
  .filter-toolbar__drawer.is-open {
    display: grid;
    gap: var(--space-sm);
    position: absolute;
    z-index: 100;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    max-height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-md);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-popup);
  }
}
.appearance-loader {
  display: grid;
  place-items: center;
  padding: var(--space-section);
  color: var(--ui-brand);
}
.appearance-loader--inline {
  display: inline-grid;
  vertical-align: middle;
  padding: 0;
  block-size: 1lh;
}
.appearance-loader__dots {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}
.appearance-loader__dots > span {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: 0.6;
}

.loading-slot {
  display: inline-flex;
  flex: 0 0 auto;
  visibility: hidden;
}
.loading-slot.is-loading {
  visibility: visible;
}

.brand-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  flex-shrink: 0;
  color: var(--ui-text);
  font-size: var(--brand-logo-size, 1.75rem);
  line-height: 1;
  white-space: nowrap;
}
.brand-logo__name {
  font-family: var(--font-display);
  font-size: 1em;
  font-style: italic;
  font-weight: 800;
  font-stretch: 110%;
}
.brand-logo__descriptor {
  font-family: var(--font-text);
  font-size: 0.38em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.brand-logo--reversed {
  color: var(--ui-on-accent);
}
.brand-logo--compact {
  display: none;
  width: var(--size-control-touch);
  height: auto;
  aspect-ratio: 1;
}
.brand-logo--prominent {
  --brand-logo-size: 2.75rem;
}

.page-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  min-width: 0;
  min-height: var(--size-control);
}
.page-header__title {
  min-width: 0;
}
.page-header h1 {
  display: flex;
  align-items: center;
  min-height: var(--size-control);
  margin: 0;
  overflow-wrap: anywhere;
}
.page-header p {
  margin-top: var(--space-xs);
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.5;
}
.page-header__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.page-header__actions.is-wide {
  flex: 1 1 auto;
  justify-content: space-between;
}
.page-header:has(.page-header__actions.is-wide) h1 {
  font-size: var(--type-title);
}
@media (width < 800px) {
  .page-header {
    min-height: var(--size-control-touch);
  }
  .page-header h1 {
    min-height: var(--size-control-touch);
  }
}

:root[data-design=cobalt] .page-header:has(h1.is-repeated) {
  min-height: 0;
}

.login-page {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  background: var(--ui-canvas);
}
.login-page .container {
  width: 100%;
  min-width: 0;
  max-width: var(--size-content-login);
  padding: var(--space-xxl);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.login-page__brand {
  padding: var(--space-sm) 0;
  margin-bottom: var(--space-section);
}
.login-page h1 {
  margin-bottom: var(--space-sm);
  font-size: var(--type-title);
  overflow-wrap: anywhere;
}
.login-page__intro {
  color: var(--ui-text-muted);
  margin-bottom: var(--space-xl);
  font-size: var(--type-body);
  line-height: 1.5;
}
.login-page form {
  display: grid;
  gap: var(--space-lg);
}
.login-page__error {
  color: var(--ui-danger-text);
  font-size: var(--type-body);
  line-height: 1.5;
}
@media (width < 500px) {
  .login-page {
    padding: var(--space-md);
  }
  .login-page .container {
    padding: var(--space-lg);
  }
}

.admin-page {
  display: grid;
  align-content: start;
  gap: var(--space-lg);
  max-width: 84rem;
}

.admin-page__loading {
  color: var(--ui-text-muted);
}

.admin-page__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  color: var(--ui-danger-text);
}

.admin-status {
  justify-self: start;
  box-sizing: border-box;
  min-width: var(--size-status-badge);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ui-surface-muted);
  color: var(--ui-text-secondary);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-micro) var(--space-sm);
  font-size: var(--type-small);
  line-height: 1.3;
}
.admin-status.is-moving {
  background: var(--ui-selected);
  color: var(--ui-link);
}
.admin-status.is-completed {
  background: var(--ui-success-surface);
  color: var(--ui-success-text);
}
.admin-status.is-conflict, .admin-status.is-attention {
  background: var(--ui-warning-surface);
  color: var(--ui-warning-text);
}
.admin-status.is-on {
  background: var(--ui-success-surface);
  color: var(--ui-success-text);
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-md);
  margin: 0;
}
.admin-metrics__item {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
}
@media (width < 800px) {
  .admin-metrics__item {
    padding: var(--space-md);
  }
}
.admin-metrics dt {
  margin: 0;
  color: var(--ui-text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-stretch: 85%;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
}
.admin-metrics dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin: 0;
  color: var(--ui-text);
  font-family: var(--font-display);
  font-size: var(--type-page-title);
  font-stretch: 88%;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.admin-metrics small {
  color: var(--ui-text-muted);
  font-family: inherit;
  font-size: var(--type-label);
  font-stretch: 100%;
  font-weight: 600;
}

.admin-account__form {
  display: grid;
  gap: var(--space-md);
  max-width: var(--size-content-login);
  padding: var(--space-lg);
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
}

.admin-account__done {
  margin: 0;
  color: var(--ui-success-text);
}

.admin-companies .is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-companies__name {
  display: grid;
  gap: var(--space-hair);
}
.admin-companies__name strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.admin-companies__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-text-muted);
  font-size: var(--type-small);
}
.admin-companies__since {
  color: var(--ui-text-secondary);
  font-variant-numeric: tabular-nums;
}
.admin-companies__label {
  display: none;
}
.admin-companies__row.is-inactive .admin-companies__name strong {
  color: var(--ui-text-muted);
}
@media (width < 800px) {
  .admin-companies .data-table__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-companies__name,
  .admin-companies .data-table__actions {
    grid-column: 1/-1;
  }
  .admin-companies .data-table__row > .is-number {
    text-align: left;
  }
  .admin-companies__label {
    display: block;
    color: var(--ui-text-muted);
    font-size: var(--type-small);
    font-weight: 600;
  }
  .admin-companies .data-table__row > .data-table__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-keys {
  display: grid;
  gap: var(--space-xl);
}
.admin-keys__group {
  display: grid;
  gap: var(--space-sm);
}
.admin-keys__group h2 {
  margin: 0;
  color: var(--ui-text-secondary);
  font-family: var(--font-display);
  font-size: var(--type-small);
  font-stretch: 85%;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--type-label);
}
.admin-keys__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
}

.admin-key {
  display: grid;
  grid-template-columns: minmax(14rem, 1.3fr) minmax(14rem, 1fr) minmax(6.5rem, auto);
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}
.admin-key:not(:last-child) {
  border-bottom: 1px solid var(--ui-border-subtle);
}
.admin-key.is-editing {
  background: var(--ui-surface-soft);
}
.admin-key__identity {
  display: grid;
  gap: var(--space-hair);
  min-width: 0;
}
.admin-key__identity strong {
  font-weight: 700;
}
.admin-key__identity span {
  color: var(--ui-text-muted);
  font-size: var(--type-small);
}
.admin-key__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.admin-key__when {
  color: var(--ui-text-secondary);
  font-size: var(--type-small);
  font-variant-numeric: tabular-nums;
}
.admin-key__actions {
  justify-self: end;
}
.admin-key__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  grid-column: 1/-1;
}
.admin-key__form input {
  flex: 1 1 18rem;
  box-sizing: border-box;
  min-height: var(--size-control);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.4;
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.admin-key__form input::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}
.admin-key__form input:where(:hover:not(:disabled):not(:focus)) {
  border-color: var(--ui-text-muted);
}
.admin-key__form input:focus {
  border-color: var(--ui-focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 12%, transparent);
}
.admin-key__form input:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}
.admin-key__form input.invalid, .admin-key__form input[aria-invalid=true] {
  border-color: var(--ui-danger-text);
}
.admin-key__form input.invalid:focus, .admin-key__form input[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger-text) 12%, transparent);
}
@media (width < 800px) {
  .admin-key__form input {
    min-height: var(--size-control-touch);
    font-size: var(--type-lead);
  }
}
.admin-key__form input {
  max-width: 36rem;
}
.admin-key__state select {
  box-sizing: border-box;
  min-height: var(--size-control);
  min-width: 0;
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.4;
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.admin-key__state select::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}
.admin-key__state select:where(:hover:not(:disabled):not(:focus)) {
  border-color: var(--ui-text-muted);
}
.admin-key__state select:focus {
  border-color: var(--ui-focus);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 12%, transparent);
}
.admin-key__state select:disabled {
  background: var(--ui-surface-muted);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}
.admin-key__state select.invalid, .admin-key__state select[aria-invalid=true] {
  border-color: var(--ui-danger-text);
}
.admin-key__state select.invalid:focus, .admin-key__state select[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-danger-text) 12%, transparent);
}
@media (width < 800px) {
  .admin-key__state select {
    min-height: var(--size-control-touch);
    font-size: var(--type-lead);
  }
}
.admin-key__error {
  flex-basis: 100%;
  margin: 0;
  color: var(--ui-danger-text);
}
@media (width < 800px) {
  .admin-key {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .admin-key__state {
    grid-row: 2;
  }
  .admin-key__actions {
    grid-row: 1/span 2;
    grid-column: 2;
  }
}

/*# sourceMappingURL=admin.css.map */