/* ──────────────────────────────────────────────────────────────────────────
 * codriver.io — design tokens
 * Concrete & Cobalt scheme · light + dark
 * Drop-in: link this file FIRST, then components.css.
 * ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Saira+Condensed:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Type ── */
  --cd-font-ui:    'Geist', system-ui, -apple-system, sans-serif;
  --cd-font-note:  'Saira Condensed', 'Barlow Condensed', sans-serif;
  --cd-font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --cd-fs-xs:   0.6875rem;                                  /* 11px */
  --cd-fs-sm:   0.8125rem;                                  /* 13px */
  --cd-fs-md:   0.9375rem;                                  /* 15px */
  --cd-fs-lg:   1.125rem;                                   /* 18px */
  --cd-fs-xl:   1.375rem;                                   /* 22px */
  --cd-fs-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);        /* 24-32px */
  --cd-fs-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);          /* 32-48px */
  --cd-fs-4xl:  clamp(2.75rem, 2rem + 3.75vw, 4.5rem);      /* 44-72px */
  --cd-fs-5xl:  clamp(3.5rem, 2.5rem + 5vw, 6.25rem);       /* 56-100px */

  --cd-lh-tight:  0.96;
  --cd-lh-snug:   1.15;
  --cd-lh-normal: 1.5;
  --cd-lh-loose:  1.65;

  --cd-ls-tight:  -0.035em;
  --cd-ls-snug:   -0.02em;
  --cd-ls-normal: 0;
  --cd-ls-wide:   0.08em;
  --cd-ls-mono:   0.04em;
  --cd-ls-caps:   0.14em;

  --cd-fw-regular: 400;
  --cd-fw-medium:  500;
  --cd-fw-semi:    600;
  --cd-fw-bold:    700;

  /* ── Space (4-pt grid) ── */
  --cd-s-0: 0;
  --cd-s-1: 0.25rem;   /* 4 */
  --cd-s-2: 0.5rem;    /* 8 */
  --cd-s-3: 0.75rem;   /* 12 */
  --cd-s-4: 1rem;      /* 16 */
  --cd-s-5: 1.5rem;    /* 24 */
  --cd-s-6: 2rem;      /* 32 */
  --cd-s-7: 3rem;      /* 48 */
  --cd-s-8: 4rem;      /* 64 */
  --cd-s-9: 6rem;      /* 96 */
  --cd-s-10: 8rem;     /* 128 */

  /* ── Radius (mostly rectangular — keep small) ── */
  --cd-r-0:  0;
  --cd-r-sm: 2px;
  --cd-r-md: 4px;
  --cd-r-pill: 999px;

  /* ── Sizes ── */
  --cd-control-sm: 32px;
  --cd-control-md: 40px;
  --cd-control-lg: 48px;
  --cd-control-xl: 52px;     /* tap target on Tesla 17" */

  --cd-container: 1280px;
  --cd-container-narrow: 880px;

  /* ── Motion ── */
  --cd-ease:        cubic-bezier(.4, 0, .2, 1);
  --cd-ease-out:    cubic-bezier(0, 0, .2, 1);
  --cd-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --cd-dur-fast:    120ms;
  --cd-dur-med:     220ms;
  --cd-dur-slow:    400ms;

  /* ── Z scale ── */
  --cd-z-base:    0;
  --cd-z-raised:  10;
  --cd-z-overlay: 50;
  --cd-z-modal:   100;
  --cd-z-toast:   200;

  /* ── Semantic colors (state, not theme) ── */
  --cd-c-danger: #FF4B3E;
  --cd-c-warn:   #FF8C00;
  --cd-c-ok:     #3DAD6E;
  --cd-c-info:   #3D8BFF;

  /* Alert categories — same in both themes for recognizability */
  --cd-alert-police:       #3B82F6;
  --cd-alert-hazard:       #F59E0B;
  --cd-alert-accident:     #EF4444;
  --cd-alert-jam:          #DC2626;
  --cd-alert-construction: #F97316;
  --cd-alert-closure:      #6B7280;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Light theme (default)
 * ───────────────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  --cd-bg:        #F2F4F7;
  --cd-bg-alt:    #E8EBF0;
  --cd-surface:   #FFFFFF;
  --cd-surface-2: #F8FAFC;
  --cd-surface-3: #E8EBF0;

  --cd-text:      #0F1419;
  --cd-text-dim:  rgba(15, 20, 25, 0.62);
  --cd-text-mute: rgba(15, 20, 25, 0.40);
  --cd-text-on-accent: #FFFFFF;

  --cd-line:        rgba(15, 20, 25, 0.09);
  --cd-line-strong: rgba(15, 20, 25, 0.17);

  --cd-accent:      #0052CC;
  --cd-accent-hov:  #003D99;
  --cd-accent-soft: rgba(0, 82, 204, 0.11);
  --cd-accent-glow: rgba(0, 82, 204, 0.28);

  --cd-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06);
  --cd-shadow-md: 0 4px 12px rgba(15, 20, 25, 0.08);
  --cd-shadow-lg: 0 12px 32px rgba(15, 20, 25, 0.10);
  --cd-shadow-accent: 0 8px 24px rgba(0, 82, 204, 0.28);

  /* Glass surfaces */
  --cd-glass:     rgba(245, 247, 250, 0.92);
  --cd-glass-blur: blur(10px);

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Dark theme — opt-in via [data-theme="dark"] OR prefers-color-scheme
 * ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --cd-bg:        #0E1218;
  --cd-bg-alt:    #161B23;
  --cd-surface:   #181E27;
  --cd-surface-2: #222A36;
  --cd-surface-3: #2C3543;

  --cd-text:      #F2F4F7;
  --cd-text-dim:  rgba(242, 244, 247, 0.62);
  --cd-text-mute: rgba(242, 244, 247, 0.38);
  --cd-text-on-accent: #0E1218;

  --cd-line:        rgba(255, 255, 255, 0.07);
  --cd-line-strong: rgba(255, 255, 255, 0.14);

  --cd-accent:      #3D8BFF;
  --cd-accent-hov:  #5FA0FF;
  --cd-accent-soft: rgba(61, 139, 255, 0.16);
  --cd-accent-glow: rgba(61, 139, 255, 0.35);

  --cd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --cd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --cd-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --cd-shadow-accent: 0 8px 24px rgba(61, 139, 255, 0.32);

  --cd-glass:     rgba(14, 18, 24, 0.90);
  --cd-glass-blur: blur(10px);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-bg:        #0E1218;
    --cd-bg-alt:    #161B23;
    --cd-surface:   #181E27;
    --cd-surface-2: #222A36;
    --cd-surface-3: #2C3543;
    --cd-text:      #F2F4F7;
    --cd-text-dim:  rgba(242, 244, 247, 0.62);
    --cd-text-mute: rgba(242, 244, 247, 0.38);
    --cd-text-on-accent: #0E1218;
    --cd-line:        rgba(255, 255, 255, 0.07);
    --cd-line-strong: rgba(255, 255, 255, 0.14);
    --cd-accent:      #3D8BFF;
    --cd-accent-hov:  #5FA0FF;
    --cd-accent-soft: rgba(61, 139, 255, 0.16);
    --cd-accent-glow: rgba(61, 139, 255, 0.35);
    --cd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --cd-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --cd-shadow-accent: 0 8px 24px rgba(61, 139, 255, 0.32);
    --cd-glass:     rgba(14, 18, 24, 0.90);
    color-scheme: dark;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Base reset + html/body
 * ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background: var(--cd-bg);
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
  font-size: var(--cd-fs-md);
  line-height: var(--cd-lh-normal);
  font-weight: var(--cd-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* Selection */
::selection { background: var(--cd-accent); color: var(--cd-text-on-accent); }

/* Focus — visible only when keyboard nav */
:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
}

/* Utility: hide visually but keep for screen readers */
.cd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Container */
.cd-container {
  width: 100%;
  max-width: var(--cd-container);
  margin: 0 auto;
  padding-left: var(--cd-s-5);
  padding-right: var(--cd-s-5);
}
@media (min-width: 768px) {
  .cd-container { padding-left: var(--cd-s-6); padding-right: var(--cd-s-6); }
}
.cd-container--narrow { max-width: var(--cd-container-narrow); }
/* Marketing token supplement — two tokens the marketing components.css needs
 * that the app's tokens.css doesn't define. --cd-shadow-card-hover is copied
 * verbatim from codriver-marketing/styles/tokens.css. --cd-c-accent is
 * referenced throughout the marketing repo but NEVER defined there (latent
 * upstream bug — falls back to inherited color); aliased to --cd-accent per
 * the evident intent. See .design-sync/NOTES.md. */
:root {
  --cd-shadow-card-hover: 0 6px 18px rgba(15, 20, 25, 0.10);
  --cd-c-accent: var(--cd-accent);
}
:root[data-theme="dark"] {
  --cd-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cd-shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
}
/* ──────────────────────────────────────────────────────────────────────────
 * codriver.io — components
 * Each class is prefixed `cd-`. Pair with tokens.css. Mobile-first.
 * ───────────────────────────────────────────────────────────────────────── */

/* ============================================================
 * 0 · LAYOUT
 * ============================================================ */
.cd-stack         { display: flex; flex-direction: column; }
.cd-row           { display: flex; flex-direction: row; align-items: center; }
.cd-row-baseline  { display: flex; flex-direction: row; align-items: baseline; }
.cd-gap-1 { gap: var(--cd-s-1); }
.cd-gap-2 { gap: var(--cd-s-2); }
.cd-gap-3 { gap: var(--cd-s-3); }
.cd-gap-4 { gap: var(--cd-s-4); }
.cd-gap-5 { gap: var(--cd-s-5); }
.cd-gap-6 { gap: var(--cd-s-6); }
.cd-gap-7 { gap: var(--cd-s-7); }
.cd-flex-1 { flex: 1 1 auto; min-width: 0; }
.cd-center { display: flex; align-items: center; justify-content: center; }
.cd-grid { display: grid; }

.cd-section {
  padding-top: var(--cd-s-8);
  padding-bottom: var(--cd-s-8);
}
@media (min-width: 768px) {
  .cd-section { padding-top: var(--cd-s-9); padding-bottom: var(--cd-s-9); }
}
.cd-section--alt { background: var(--cd-bg-alt); }

/* Divider */
.cd-hr {
  border: 0;
  border-top: 1px solid var(--cd-line);
  margin: 0;
}
.cd-hr--strong { border-top-color: var(--cd-line-strong); }

/* ============================================================
 * 1 · TYPOGRAPHY
 * ============================================================ */
.cd-display {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-bold);
  font-size: var(--cd-fs-5xl);
  line-height: var(--cd-lh-tight);
  letter-spacing: var(--cd-ls-tight);
  margin: 0;
  text-wrap: balance;
}
.cd-h1 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-bold);
  font-size: var(--cd-fs-4xl);
  line-height: var(--cd-lh-snug);
  letter-spacing: var(--cd-ls-tight);
  margin: 0;
  text-wrap: balance;
}
.cd-h2 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-3xl);
  line-height: var(--cd-lh-snug);
  letter-spacing: var(--cd-ls-snug);
  margin: 0;
  text-wrap: balance;
}
.cd-h3 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-2xl);
  line-height: var(--cd-lh-snug);
  letter-spacing: var(--cd-ls-snug);
  margin: 0;
}
.cd-h4 {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-xl);
  line-height: var(--cd-lh-snug);
  margin: 0;
}
.cd-lead {
  font-size: var(--cd-fs-lg);
  line-height: var(--cd-lh-normal);
  color: var(--cd-text-dim);
}
.cd-body {
  font-size: var(--cd-fs-md);
  line-height: var(--cd-lh-normal);
  color: var(--cd-text-dim);
}
.cd-small { font-size: var(--cd-fs-sm); line-height: var(--cd-lh-normal); color: var(--cd-text-dim); }
.cd-mono  { font-family: var(--cd-font-mono); font-variant-numeric: tabular-nums; }
/* Inline code must be able to break on narrow viewports — long selectors and
   endpoint paths otherwise push the page wider than the screen. Block code
   (pre > code) keeps its own horizontal scroll. */
:not(pre) > code { overflow-wrap: anywhere; }
.cd-note  { font-family: var(--cd-font-note); letter-spacing: 0.03em; }
.cd-eyebrow {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-accent);
  text-transform: uppercase;
}
.cd-caps {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
}
.cd-text-dim  { color: var(--cd-text-dim); }
.cd-text-mute { color: var(--cd-text-mute); }
.cd-text-accent { color: var(--cd-accent); }

/* ============================================================
 * 2 · LOGO LOCKUP
 * ============================================================ */
.cd-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-2);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-lg);
  letter-spacing: var(--cd-ls-snug);
  color: var(--cd-text);
  line-height: 1;
}
.cd-logo__mark {
  width: 1.2em; height: 1.2em;
  color: currentColor;
  flex: 0 0 auto;
}
.cd-logo__suffix {
  color: var(--cd-text-mute);
  font-weight: var(--cd-fw-medium);
}
.cd-logo--accent .cd-logo__mark { color: var(--cd-accent); }
.cd-logo--sm { font-size: var(--cd-fs-md); }
.cd-logo--lg { font-size: var(--cd-fs-xl); }

/* ============================================================
 * 3 · BUTTONS
 * ============================================================ */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-s-2);
  height: var(--cd-control-md);
  padding: 0 var(--cd-s-4);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-sm);
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--cd-r-sm);
  white-space: nowrap;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease),
              box-shadow var(--cd-dur-fast) var(--cd-ease),
              transform var(--cd-dur-fast) var(--cd-ease);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cd-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cd-btn:not(:disabled):active { transform: translateY(1px); }

/* Sizes */
.cd-btn--sm { height: var(--cd-control-sm); font-size: var(--cd-fs-xs); padding: 0 var(--cd-s-3); }
.cd-btn--lg { height: var(--cd-control-lg); font-size: var(--cd-fs-md); padding: 0 var(--cd-s-5); }
.cd-btn--xl { height: var(--cd-control-xl); font-size: var(--cd-fs-md); padding: 0 var(--cd-s-6); }
.cd-btn--block { display: flex; width: 100%; }
/* Keep icon buttons square at every size */
.cd-btn--sm.cd-btn--icon { width: var(--cd-control-sm); }
.cd-btn--lg.cd-btn--icon { width: var(--cd-control-lg); }
.cd-btn--xl.cd-btn--icon { width: var(--cd-control-xl); }

/* Primary — filled accent */
.cd-btn--primary {
  background: var(--cd-accent);
  /* Force white text on the primary CTA in every theme. The dark theme's
   * generic --cd-text-on-accent is dark (#0E1218) for use on tinted soft
   * surfaces, but on the bold accent fill it reads as low-contrast
   * "black on blue" — exactly what the CTA shouldn't be. White is high
   * contrast on both #0052CC (light) and #3D8BFF (dark). */
  color: #FFFFFF;
  box-shadow: var(--cd-shadow-accent);
}
.cd-btn--primary:hover { background: var(--cd-accent-hov); }

/* Secondary — outlined */
.cd-btn--secondary {
  background: var(--cd-surface);
  color: var(--cd-text);
  border-color: var(--cd-line-strong);
}
.cd-btn--secondary:hover { border-color: var(--cd-text); background: var(--cd-surface-2); }

/* Ghost — no background */
.cd-btn--ghost {
  background: transparent;
  color: var(--cd-text-dim);
}
.cd-btn--ghost:hover { background: var(--cd-surface-2); color: var(--cd-text); }

/* Outline accent — for ★ Save etc */
.cd-btn--outline-accent {
  background: transparent;
  color: var(--cd-accent);
  border-color: var(--cd-accent);
}
.cd-btn--outline-accent:hover { background: var(--cd-accent-soft); }

/* Icon only — square */
.cd-btn--icon { padding: 0; width: var(--cd-control-md); }

/* Danger */
.cd-btn--danger {
  background: var(--cd-c-danger); color: #FFFFFF;
}

/* ============================================================
 * 4 · FORM ELEMENTS
 * ============================================================ */
.cd-input,
.cd-select,
.cd-textarea {
  display: block;
  width: 100%;
  min-height: var(--cd-control-md);
  padding: 0 var(--cd-s-3);
  background: var(--cd-surface);
  color: var(--cd-text);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-sm);
  font-family: var(--cd-font-ui);
  font-size: var(--cd-fs-md);
  line-height: var(--cd-lh-normal);
  outline: none;
  transition: border-color var(--cd-dur-fast) var(--cd-ease),
              box-shadow var(--cd-dur-fast) var(--cd-ease);
}
.cd-input::placeholder,
.cd-textarea::placeholder {
  color: var(--cd-text-mute);
}
.cd-input:focus,
.cd-select:focus,
.cd-textarea:focus {
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
}
.cd-textarea { padding: var(--cd-s-3); min-height: 96px; resize: vertical; }
.cd-input--lg { min-height: var(--cd-control-lg); padding: 0 var(--cd-s-4); }

/* Search input with leading icon — wrap input in .cd-search */
.cd-search { position: relative; }
.cd-search .cd-search__icon {
  position: absolute; left: var(--cd-s-3); top: 50%;
  transform: translateY(-50%);
  color: var(--cd-text-mute);
  pointer-events: none;
  width: 16px; height: 16px;
}
.cd-search .cd-input { padding-left: calc(var(--cd-s-3) * 2 + 16px); }

/* Switch */
.cd-switch {
  --w: 38px; --h: 22px;
  position: relative; display: inline-block;
  width: var(--w); height: var(--h);
  flex-shrink: 0;
}
.cd-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cd-switch__slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--cd-surface-3);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-pill);
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.cd-switch__slider::before {
  content: ''; position: absolute;
  height: calc(var(--h) - 8px); width: calc(var(--h) - 8px);
  left: 3px; bottom: 3px;
  background: var(--cd-text);
  border-radius: 50%;
  transition: transform var(--cd-dur-fast) var(--cd-ease),
              background var(--cd-dur-fast) var(--cd-ease);
}
.cd-switch input:checked + .cd-switch__slider {
  background: var(--cd-accent);
  border-color: var(--cd-accent);
}
.cd-switch input:checked + .cd-switch__slider::before {
  transform: translateX(calc(var(--w) - var(--h)));
  background: var(--cd-text-on-accent);
}

/* Checkbox */
.cd-check {
  --sz: 18px;
  display: inline-flex; align-items: center; gap: var(--cd-s-2);
  cursor: pointer; user-select: none;
  font-size: var(--cd-fs-sm);
}
.cd-check input { position: absolute; opacity: 0; pointer-events: none; }
.cd-check__box {
  width: var(--sz); height: var(--sz);
  border: 1px solid var(--cd-line-strong);
  background: var(--cd-surface);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--cd-dur-fast), border-color var(--cd-dur-fast);
}
.cd-check input:checked + .cd-check__box {
  background: var(--cd-accent);
  border-color: var(--cd-accent);
}
.cd-check__box::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid var(--cd-text-on-accent);
  border-bottom: 2px solid var(--cd-text-on-accent);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform var(--cd-dur-fast) var(--cd-ease-spring);
}
.cd-check input:checked + .cd-check__box::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

/* ============================================================
 * 5 · PANELS, CARDS, CORNER BRACKETS
 * ============================================================ */

/* Corner brackets — wrap any container with .cd-brackets to get them.
   Use --cd-bracket-color and --cd-bracket-size to customize. */
.cd-brackets {
  position: relative;
  --cd-bracket-color: var(--cd-accent);
  --cd-bracket-size: 12px;
  --cd-bracket-thick: 1.4px;
  --cd-bracket-inset: 0px;
}
.cd-brackets::before,
.cd-brackets::after,
.cd-brackets > .cd-bracket-bl,
.cd-brackets > .cd-bracket-br {
  content: '';
  position: absolute;
  width: var(--cd-bracket-size);
  height: var(--cd-bracket-size);
  pointer-events: none;
  z-index: 1;
}
.cd-brackets::before {
  top: var(--cd-bracket-inset); left: var(--cd-bracket-inset);
  border-top: var(--cd-bracket-thick) solid var(--cd-bracket-color);
  border-left: var(--cd-bracket-thick) solid var(--cd-bracket-color);
}
.cd-brackets::after {
  top: var(--cd-bracket-inset); right: var(--cd-bracket-inset);
  border-top: var(--cd-bracket-thick) solid var(--cd-bracket-color);
  border-right: var(--cd-bracket-thick) solid var(--cd-bracket-color);
}
.cd-brackets > .cd-bracket-bl {
  bottom: var(--cd-bracket-inset); left: var(--cd-bracket-inset);
  border-bottom: var(--cd-bracket-thick) solid var(--cd-bracket-color);
  border-left: var(--cd-bracket-thick) solid var(--cd-bracket-color);
}
.cd-brackets > .cd-bracket-br {
  bottom: var(--cd-bracket-inset); right: var(--cd-bracket-inset);
  border-bottom: var(--cd-bracket-thick) solid var(--cd-bracket-color);
  border-right: var(--cd-bracket-thick) solid var(--cd-bracket-color);
}

/* Panel — generic surface container */
.cd-panel {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  padding: var(--cd-s-4);
}
.cd-panel--ghost { background: transparent; }
.cd-panel--inset { background: var(--cd-bg-alt); }
.cd-panel--dark {
  background: #0E1218;
  color: #F2F4F7;
  border-color: rgba(61, 139, 255, 0.35);
}

/* Card — like panel, but inner padding more generous */
.cd-card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  padding: var(--cd-s-5);
  box-shadow: var(--cd-shadow-sm);
}
.cd-card--bracketed {
  border-color: var(--cd-accent-soft);
}

/* Glass — frosted overlay style used in the app */
.cd-glass-panel {
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
}

/* ============================================================
 * 6 · BADGES, PILLS, CHIPS
 * ============================================================ */
.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-1);
  padding: 4px var(--cd-s-2);
  background: var(--cd-surface-2);
  color: var(--cd-text);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-mono);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.cd-badge--accent {
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
  border-color: transparent;
}
.cd-badge--solid {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  border-color: transparent;
}
.cd-badge--success { background: rgba(61, 173, 110, 0.15); color: var(--cd-c-ok); border-color: transparent; }
.cd-badge--warn    { background: rgba(255, 140, 0, 0.15);  color: var(--cd-c-warn); border-color: transparent; }
.cd-badge--danger  { background: rgba(255, 75, 62, 0.15);  color: var(--cd-c-danger); border-color: transparent; }
.cd-badge--outline { background: transparent; color: var(--cd-accent); border-color: var(--cd-accent); }
.cd-badge--dim     { background: transparent; color: var(--cd-text-mute); border-color: var(--cd-line-strong); }

/* Status pill — with leading dot */
.cd-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-2);
  height: 32px;
  padding: 0 var(--cd-s-3);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-pill);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.cd-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cd-c-ok);
  box-shadow: 0 0 6px currentColor;
  color: var(--cd-c-ok);
  flex: 0 0 auto;
}
.cd-pill--warn .cd-pill__dot   { background: var(--cd-c-warn); color: var(--cd-c-warn); }
.cd-pill--danger .cd-pill__dot { background: var(--cd-c-danger); color: var(--cd-c-danger); }

/* Data chip — small mono number */
.cd-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px var(--cd-s-2);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
}
.cd-chip__value {
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-md);
  color: var(--cd-accent);
  font-variant-numeric: tabular-nums;
}
.cd-chip__unit {
  font-family: var(--cd-font-mono);
  font-size: 9px;
  color: var(--cd-text-mute);
  letterSpacing: var(--cd-ls-mono);
}

/* ============================================================
 * 7 · APP HUD COMPONENTS
 * ============================================================ */
/* HUD circular button */
.cd-hud-btn {
  width: var(--cd-control-xl);
  height: var(--cd-control-xl);
  display: inline-grid;
  place-items: center;
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  cursor: pointer;
  position: relative;
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.cd-hud-btn:hover { background: var(--cd-surface-2); }
.cd-hud-btn.is-active {
  color: var(--cd-accent);
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 2px var(--cd-accent-soft);
}
.cd-hud-btn--round { border-radius: 50%; }

/* HUD speed chip (large readout) */
.cd-speed-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--cd-s-2);
  height: var(--cd-control-xl);
  padding: 0 var(--cd-s-5);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  position: relative;
}
.cd-speed-chip__value {
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-fw-semi);
  font-size: 24px;
  line-height: 1;
  color: var(--cd-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.cd-speed-chip__unit {
  font-size: var(--cd-fs-xs);
  color: var(--cd-text-dim);
  letter-spacing: var(--cd-ls-wide);
}

/* Pace row (route step) */
.cd-pace-row {
  display: grid;
  grid-template-columns: 24px 52px 34px 1fr auto;
  align-items: center;
  gap: var(--cd-s-3);
  padding: var(--cd-s-3) var(--cd-s-4);
  border-bottom: 1px solid var(--cd-line);
  border-left: 2px solid transparent;
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.cd-pace-row:last-child { border-bottom: none; }
.cd-pace-row.is-active {
  background: var(--cd-accent-soft);
  border-left-color: var(--cd-accent);
}
.cd-pace-row__idx  { font-family: var(--cd-font-mono); font-size: 10px; color: var(--cd-text-mute); letter-spacing: 0.08em; }
.cd-pace-row__time { font-family: var(--cd-font-mono); font-size: 11px; color: var(--cd-text-dim); font-variant-numeric: tabular-nums; }
.cd-pace-row__cmd {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--cd-surface-2);
  color: var(--cd-text);
  font-weight: var(--cd-fw-semi);
  font-size: 16px;
  border-radius: var(--cd-r-sm);
}
.cd-pace-row.is-active .cd-pace-row__cmd {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
}
.cd-pace-row__title { font-family: var(--cd-font-note); font-size: 15px; letter-spacing: 0.03em; color: var(--cd-text); }
.cd-pace-row__dist  { font-family: var(--cd-font-mono); font-size: 11px; color: var(--cd-text-mute); letter-spacing: 0.05em; }

/* Turn-by-turn banner */
.cd-tt-banner {
  display: flex;
  align-items: center;
  gap: var(--cd-s-4);
  padding: var(--cd-s-3) var(--cd-s-5) var(--cd-s-3) var(--cd-s-4);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-accent);
  box-shadow: 0 0 0 1px var(--cd-accent-soft), var(--cd-shadow-lg);
  position: relative;
}
.cd-tt-banner__index {
  font-family: var(--cd-font-mono); font-size: 10px;
  color: var(--cd-accent); letter-spacing: 0.18em;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.cd-tt-banner__glyph {
  width: 48px; height: 48px;
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  display: grid; place-items: center;
  font-weight: var(--cd-fw-bold); font-size: 28px;
}
.cd-tt-banner__title {
  font-family: var(--cd-font-note);
  font-size: var(--cd-fs-xl);
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cd-text);
  line-height: 1.15;
}
.cd-tt-banner__sub {
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-accent);
  letter-spacing: 0.1em;
  margin-top: var(--cd-s-1);
}

/* ETA strip */
.cd-eta-strip {
  display: inline-flex;
  align-items: stretch;
  padding: var(--cd-s-2) var(--cd-s-1);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  position: relative;
}
.cd-eta-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 var(--cd-s-5);
  min-width: 90px;
}
.cd-eta-cell__value {
  font-family: var(--cd-font-mono);
  font-size: 22px;
  font-weight: var(--cd-fw-semi);
  line-height: 1;
  color: var(--cd-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cd-eta-cell__label {
  margin-top: var(--cd-s-2);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--cd-accent);
  text-transform: uppercase;
}
.cd-eta-strip__sep {
  width: 1px; background: var(--cd-line);
  margin: var(--cd-s-1) 0;
}

/* ============================================================
 * 8 · ALERT PINS (recognizable, theme-stable)
 * ============================================================ */
.cd-alert-pin {
  display: inline-grid; place-items: center;
  width: 34px; height: 44px;
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.cd-alert-pin svg { width: 100%; height: 100%; display: block; }

/* ============================================================
 * 9 · UTILITY STRIP + NAV (marketing chrome)
 * ============================================================ */
.cd-util-strip {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--cd-s-2) var(--cd-s-5);
  border-bottom: 1px solid var(--cd-line);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  color: var(--cd-text-mute);
  letter-spacing: var(--cd-ls-caps);
  background: var(--cd-bg);
  flex-wrap: wrap; gap: var(--cd-s-2);
}
.cd-util-strip__live {
  display: inline-flex; align-items: center; gap: var(--cd-s-2);
}
.cd-util-strip__live::before {
  content: ''; width: 6px; height: 6px; background: var(--cd-c-ok);
}
/* Mobile: stack the two spans on their own centered lines and tighten
 * tracking/padding so the live line stays on a single line (2 lines total
 * instead of 3). Desktop keeps the space-between row layout below. */
@media (max-width: 767px) {
  .cd-util-strip {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cd-s-1);
    padding: var(--cd-s-2) var(--cd-s-4);
    /* Scale with viewport + tighten tracking so the longer "live" line
     * always fits on a single line, from small phones up to 767px. */
    font-size: clamp(0.5rem, 2.4vw, var(--cd-fs-xs));
    letter-spacing: 0.02em;
  }
}

.cd-nav {
  position: sticky; top: 0; z-index: var(--cd-z-overlay);
  background: color-mix(in srgb, var(--cd-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cd-line);
}
.cd-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--cd-s-3) var(--cd-s-5);
  gap: var(--cd-s-4);
  /* Force the toolbar (logo + hamburger/close) above the drawer below it,
   * so the close-button is always reachable while the drawer is open. */
  position: relative;
  z-index: 2;
  /* Solid background so the drawer behind it doesn't bleed through. */
  background: var(--cd-bg);
}
.cd-nav__links {
  display: none;
  gap: var(--cd-s-6);
  font-size: var(--cd-fs-sm);
  color: var(--cd-text-dim);
  font-weight: var(--cd-fw-medium);
}
.cd-nav__links a:hover { color: var(--cd-text); }
.cd-nav__actions {
  display: flex; align-items: center; gap: var(--cd-s-3);
}
.cd-nav__signin { display: none; font-size: var(--cd-fs-sm); color: var(--cd-text-dim); font-weight: var(--cd-fw-medium); }
.cd-nav__menu {
  display: inline-grid; place-items: center;
  width: var(--cd-control-md); height: var(--cd-control-md);
  background: transparent; border: 0; color: var(--cd-text);
  cursor: pointer;
}
/* Primary CTA in the header is desktop-only — on mobile the hamburger
 * drawer provides its own block-level CTA, so showing both crowds the
 * header AND duplicates the action when the drawer is open. */
.cd-nav__actions > .cd-btn { display: none; }

/* "Open codriver" in-car explainer — the signed-in CTA opens this instead of
 * deep-linking to the driving app (the app lives in the car; the direct URL
 * is demoted to a preview link inside). Desktop: card anchored under the
 * right edge of the sticky bar. Drawer: inline block under the CTA. */
.cd-nav__incar {
  position: absolute;
  top: 100%;
  right: max(var(--cd-s-4), calc((100% - var(--cd-container)) / 2));
  width: min(340px, calc(100vw - 2 * var(--cd-s-4)));
  padding: var(--cd-s-4);
  display: grid;
  gap: var(--cd-s-3);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
  z-index: 2; /* above the drawer's z-index: 1 */
}
.cd-nav__incar--drawer {
  position: static;
  width: auto;
  box-shadow: none;
  border: 1px solid var(--cd-line);
  margin-top: var(--cd-s-2);
}
/* Undo the drawer's generic nav-item link styling on the preview link. */
.cd-nav__incar a { padding: 0 !important; display: inline; }
@media (min-width: 768px) {
  .cd-nav__links { display: flex; }
  .cd-nav__signin { display: inline; }
  .cd-nav__menu { display: none; }
  .cd-nav__actions > .cd-btn { display: inline-flex; }
}

/* Mobile drawer — toggled by .cd-nav__menu button on <768px. Slides in
 * directly below the sticky nav as a full-width vertical link stack. */
.nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cd-bg);
  border-top: 1px solid var(--cd-line);
  border-bottom: 1px solid var(--cd-line);
  /* Match the nav header's horizontal padding so drawer items align with
   * the logo above them. Vertical padding gets a touch more breathing
   * room than the s-3 default the items would otherwise sit flush to. */
  padding: var(--cd-s-4) var(--cd-s-5);
  flex-direction: column;
  gap: var(--cd-s-1);
  /* One below .cd-nav__inner so the toolbar (with the close button) always
   * sits on top. The drawer itself stays above page content via the
   * .cd-nav's overlay z-index. */
  z-index: 1;
  box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.4);
}
.nav-drawer.is-open { display: flex; }
/* Drawer nav links — excludes .cd-btn anchors so the primary CTA's own
 * color/background isn't clobbered by this (more-specific) link rule.
 * Explicit values + !important on padding override any stale cache or
 * higher-specificity rule that previously zeroed the horizontal inset. */
.nav-drawer a:not(.cd-btn) {
  display: block;
  padding: 12px 14px !important;
  color: var(--cd-text);
  text-decoration: none;
  font-size: 1rem;          /* 16px — readable mobile tap target */
  line-height: 1.4;
  border-radius: 6px;
}
.nav-drawer a:not(.cd-btn):hover,
.nav-drawer a:not(.cd-btn):focus-visible { background: var(--cd-surface); }
/* Visually separate the account/signed-in row from the section nav
 * above it. Falls back gracefully when there's no account row. */
.nav-drawer a:not(.cd-btn) + .cd-btn,
.nav-drawer a:not(.cd-btn):last-of-type {
  margin-top: var(--cd-s-2);
}
.nav-drawer .cd-btn {
  margin-top: var(--cd-s-3);
}
@media (min-width: 768px) {
  .nav-drawer,
  .nav-drawer.is-open { display: none; }
}

/* ============================================================
 * 10 · MARKETING HERO + LAYOUT BITS
 * ============================================================ */
.cd-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-7);
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .cd-hero { grid-template-columns: 1.05fr 0.95fr; gap: var(--cd-s-7); }
}
.cd-hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--cd-s-3); align-items: center;
}
.cd-hero__sub {
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xs);
  color: var(--cd-text-mute); letter-spacing: var(--cd-ls-caps);
}

/* Metric grid (in hero + features) */
.cd-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-5);
  padding-top: var(--cd-s-5);
  border-top: 1px solid var(--cd-line-strong);
  margin-top: var(--cd-s-7);
}
@media (min-width: 640px) {
  .cd-metric-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
}
.cd-metric { padding: 0; }
@media (min-width: 640px) {
  .cd-metric + .cd-metric { padding-left: var(--cd-s-5); border-left: 1px solid var(--cd-line); }
}
.cd-metric__value {
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xl);
  font-weight: var(--cd-fw-semi); color: var(--cd-accent);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.cd-metric__label { font-weight: var(--cd-fw-semi); font-size: var(--cd-fs-sm); margin-top: var(--cd-s-1); }
.cd-metric__sub   { font-size: var(--cd-fs-xs); color: var(--cd-text-mute); margin-top: 2px; }

/* Feature grid (3-up cards) */
.cd-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-5);
}
@media (min-width: 768px) {
  .cd-feature-grid { grid-template-columns: repeat(3, 1fr); gap: var(--cd-s-5); }
  /* 4-card variant — 2×2 instead of 3+orphan */
  .cd-feature-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}
.cd-feature {
  position: relative;
  padding: var(--cd-s-5);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
}
.cd-feature__icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
  margin-bottom: var(--cd-s-3);
}
.cd-feature__title { font-size: var(--cd-fs-lg); font-weight: var(--cd-fw-semi); letter-spacing: var(--cd-ls-snug); }
.cd-feature__body  { font-size: var(--cd-fs-sm); color: var(--cd-text-dim); margin-top: var(--cd-s-2); line-height: var(--cd-lh-normal); }

/* Pull quote — voice section */
.cd-quote {
  font-family: var(--cd-font-ui);
  font-style: italic;
  font-weight: var(--cd-fw-medium);
  font-size: var(--cd-fs-2xl);
  line-height: var(--cd-lh-snug);
  color: var(--cd-text);
  max-width: 720px;
  margin: 0;
  text-wrap: balance;
}
.cd-quote-rule {
  display: inline-block;
  width: 48px; height: 1px;
  background: var(--cd-text);
  margin-bottom: var(--cd-s-4);
}
.cd-quote-attr {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
  margin-top: var(--cd-s-4);
}

/* ============================================================
 * 11 · PRICING
 * ============================================================ */
.cd-pricing-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--cd-s-3);
  padding: var(--cd-s-4) var(--cd-s-5);
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  position: relative;
}
.cd-pricing-banner__title {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-bold);
  font-size: var(--cd-fs-lg);
  letter-spacing: var(--cd-ls-snug);
}
.cd-pricing-banner__sub {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  opacity: 0.88;
}

.cd-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-4);
  margin-top: var(--cd-s-6);
}
@media (min-width: 768px) {
  /* minmax(0, …) lets the cards shrink below their content's min-width —
     bare 1fr floors at min-content and overflows the viewport at 768px. */
  .cd-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Beta variant: Free + Founder only (Premium · monthly hidden until
     monthly billing opens). Centered pair instead of a lopsided 3-track. */
  .cd-pricing-grid--duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
  }
}

.cd-price-card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  padding: var(--cd-s-6) var(--cd-s-5) var(--cd-s-5);
  display: flex; flex-direction: column;
  gap: var(--cd-s-4);
  transition: border-color var(--cd-dur-fast) var(--cd-ease),
              transform var(--cd-dur-fast) var(--cd-ease);
}
.cd-price-card:hover { border-color: var(--cd-accent); transform: translateY(-2px); }
.cd-price-card--featured {
  border-color: var(--cd-accent);
  box-shadow: var(--cd-shadow-md), 0 0 0 1px var(--cd-accent);
}
.cd-price-card__tag {
  position: absolute; top: -10px; left: var(--cd-s-5);
  padding: 2px var(--cd-s-2);
  background: var(--cd-accent); color: var(--cd-text-on-accent);
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps); text-transform: uppercase;
}
.cd-price-card__name {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-text-mute);
  text-transform: uppercase;
}
.cd-price-card__price {
  display: flex; align-items: baseline; gap: var(--cd-s-2);
}
.cd-price-card__amount {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-bold);
  font-size: var(--cd-fs-4xl);
  line-height: 1; letter-spacing: -0.04em;
  color: var(--cd-text);
  font-variant-numeric: tabular-nums;
}
.cd-price-card__period {
  font-size: var(--cd-fs-sm);
  color: var(--cd-text-mute);
}
.cd-price-card__sub {
  font-size: var(--cd-fs-sm);
  color: var(--cd-text-dim);
}
.cd-price-list { list-style: none; padding: 0; margin: 0; }
.cd-price-list li {
  display: flex; align-items: flex-start; gap: var(--cd-s-2);
  padding: var(--cd-s-2) 0;
  font-size: var(--cd-fs-sm);
  border-bottom: 1px solid var(--cd-line);
}
.cd-price-list li:last-child { border-bottom: none; }
.cd-price-list li::before {
  content: '+'; color: var(--cd-accent);
  font-weight: var(--cd-fw-bold); font-family: var(--cd-font-mono);
  flex-shrink: 0;
}

/* Referral block */
.cd-referral {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-5);
  align-items: center;
  padding: var(--cd-s-6);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  position: relative;
  margin-top: var(--cd-s-5);
}
@media (min-width: 768px) {
  .cd-referral { grid-template-columns: 1fr auto; }
}
.cd-referral__hd { font-family: var(--cd-font-ui); font-weight: var(--cd-fw-bold); font-size: var(--cd-fs-xl); letter-spacing: var(--cd-ls-snug); }
.cd-referral__sub { color: var(--cd-text-dim); font-size: var(--cd-fs-sm); margin-top: var(--cd-s-1); }
/* Slim copy/share pill — URL on the left, icon-only buttons on the right.
 * Reads more like a GitHub "copy this command" chip than a marketing CTA,
 * which is what we want once the user has already converted. */
.cd-referral__cta {
  display: inline-flex;
  align-items: stretch;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-sm);
  max-width: 100%;
  overflow: hidden;
}
.cd-referral__url {
  border: 0;
  background: transparent;
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 var(--cd-s-3);
  height: var(--cd-control-md);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-sm);
  color: var(--cd-text);
  text-overflow: ellipsis;
}
.cd-referral__url:focus { outline: 0; }
.cd-referral__icon {
  display: inline-grid;
  place-items: center;
  width: var(--cd-control-md);
  height: var(--cd-control-md);
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--cd-line);
  color: var(--cd-text-dim);
  cursor: pointer;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
.cd-referral__icon:hover { background: var(--cd-surface-3); color: var(--cd-text); }
.cd-referral__icon:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: -2px; }

/* Compact variant — same shape, smaller controls. */
.cd-referral__cta--compact .cd-referral__url,
.cd-referral__cta--compact .cd-referral__icon {
  height: var(--cd-control-sm);
  width: auto;
}
.cd-referral__cta--compact .cd-referral__icon { width: var(--cd-control-sm); }
.cd-referral__cta--compact .cd-referral__url { font-size: var(--cd-fs-xs); padding: 0 var(--cd-s-2); }

/* ============================================================
 * 12 · FAQ accordion
 * ============================================================ */
.cd-faq { border-top: 1px solid var(--cd-line-strong); }
.cd-faq__item { border-bottom: 1px solid var(--cd-line-strong); }
.cd-faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: transparent; color: var(--cd-text); border: 0;
  padding: var(--cd-s-4) 0;
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-lg);
  letter-spacing: var(--cd-ls-snug);
  text-align: left;
  cursor: pointer;
  gap: var(--cd-s-4);
}
.cd-faq__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--cd-accent);
  transition: transform var(--cd-dur-med) var(--cd-ease);
}
.cd-faq__item[open] .cd-faq__icon { transform: rotate(45deg); }
.cd-faq__a {
  padding: 0 0 var(--cd-s-4) 0;
  color: var(--cd-text-dim);
  font-size: var(--cd-fs-md);
  line-height: var(--cd-lh-normal);
  max-width: 720px;
}

/* ============================================================
 * 13 · TRUST STRIP
 * ============================================================ */
.cd-trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--cd-s-5);
  padding: var(--cd-s-5) 0;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-text-mute);
  text-transform: uppercase;
  justify-content: space-between;
  border-top: 1px solid var(--cd-line);
  border-bottom: 1px solid var(--cd-line);
}

/* ============================================================
 * 14 · FOOTER
 * ============================================================ */
.cd-footer {
  background: var(--cd-bg-alt);
  border-top: 1px solid var(--cd-line);
  padding: var(--cd-s-8) 0 var(--cd-s-5);
}
.cd-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-6);
}
@media (min-width: 768px) {
  .cd-footer__grid { grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--cd-s-5); }
}
.cd-footer__col h3 {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
  margin: 0 0 var(--cd-s-3);
  font-weight: var(--cd-fw-medium);
}
.cd-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cd-s-2); }
.cd-footer__col a { color: var(--cd-text-dim); font-size: var(--cd-fs-sm); }
.cd-footer__col a:hover { color: var(--cd-text); }

/* Status pill in the footer — UptimeRobot-backed pulsing dot + link.
 * Color is injected by StatusDot.tsx via --cd-status-color so the same
 * dot styles drive ok / degraded / down / unknown. */
.cd-status-link { display: inline-flex; align-items: center; gap: 8px; }
.cd-status-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cd-status-color, var(--cd-text-mute));
  flex-shrink: 0;
}
.cd-status-dot--pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cd-status-color, var(--cd-text-mute));
  animation: cd-status-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes cd-status-pulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(2.8); opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .cd-status-dot--pulse::after { animation: none; }
}
.cd-footer__legal {
  margin-top: var(--cd-s-6);
  padding-top: var(--cd-s-4);
  border-top: 1px solid var(--cd-line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--cd-s-2);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  color: var(--cd-text-mute);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
}

/* Theme toggle — system / light / dark segmented pill (footer) */
.cd-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-pill);
  background: var(--cd-surface);
}
.cd-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cd-text-dim);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}
.cd-theme-toggle__btn:hover { color: var(--cd-text); }
.cd-theme-toggle__btn[aria-pressed="true"] {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  cursor: default;
}

/* ============================================================
 * 15 · DESIGN-SYSTEM PAGE HELPERS
 * ============================================================ */
.cd-swatch {
  display: flex; align-items: center; gap: var(--cd-s-3);
  padding: var(--cd-s-3);
  border: 1px solid var(--cd-line);
  background: var(--cd-surface);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
}
.cd-swatch__chip {
  width: 48px; height: 48px;
  border: 1px solid var(--cd-line);
  flex-shrink: 0;
}
.cd-swatch__name { font-weight: var(--cd-fw-semi); color: var(--cd-text); letter-spacing: var(--cd-ls-mono); text-transform: uppercase; }
.cd-swatch__val  { color: var(--cd-text-mute); }

.cd-ds-section { margin-bottom: var(--cd-s-9); }
.cd-ds-section h2 {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
  margin: 0 0 var(--cd-s-4);
  padding-bottom: var(--cd-s-3);
  border-bottom: 1px solid var(--cd-line-strong);
  font-weight: var(--cd-fw-medium);
}
.cd-ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--cd-s-3);
}
.cd-ds-block {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  padding: var(--cd-s-5);
}
.cd-ds-label {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
  margin-bottom: var(--cd-s-3);
}

/* ============================================================
 * Comparison table — used by /compare/* SEO pages.
 * ============================================================ */
.cd-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cd-line);
  background: var(--cd-surface);
  margin: var(--cd-s-5) 0;
}
.cd-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cd-fs-md);
  min-width: 560px;
}
.cd-compare-table th,
.cd-compare-table td {
  text-align: left;
  padding: var(--cd-s-3) var(--cd-s-4);
  border-bottom: 1px solid var(--cd-line);
  vertical-align: top;
}
.cd-compare-table tbody tr:last-child th,
.cd-compare-table tbody tr:last-child td {
  border-bottom: 0;
}
.cd-compare-table thead th {
  background: var(--cd-panel-2, var(--cd-bg));
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  font-weight: var(--cd-fw-medium, 500);
  border-bottom: 1px solid var(--cd-line-strong, var(--cd-line));
}
.cd-compare-table__col-name {
  display: block;
  font-family: var(--cd-font-note, var(--cd-font-sans));
  font-size: var(--cd-fs-md);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cd-text);
  font-weight: var(--cd-fw-semibold, 600);
}
.cd-compare-table__col-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: 0.1em;
  color: var(--cd-text-mute);
  text-transform: uppercase;
}
.cd-compare-table__rowlabel {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-sm);
  font-weight: var(--cd-fw-medium, 500);
  color: var(--cd-text);
  letter-spacing: 0.02em;
  width: 30%;
}
.cd-compare-table__them {
  color: var(--cd-text-dim, var(--cd-text-mute));
  width: 35%;
}
.cd-compare-table__us {
  color: var(--cd-text);
  background: color-mix(in srgb, var(--cd-c-accent) 6%, transparent);
  width: 35%;
}
.cd-compare-table__glyph {
  display: inline-block;
  width: 1.3em;
  font-family: var(--cd-font-mono);
  font-weight: 700;
  margin-right: var(--cd-s-1);
}
.cd-compare-table__glyph--yes { color: var(--cd-c-accent); }
.cd-compare-table__glyph--no  { color: var(--cd-text-mute); }
.cd-compare-table__glyph--neutral { color: var(--cd-text-mute); }
@media (max-width: 640px) {
  .cd-compare-table { font-size: var(--cd-fs-sm); min-width: 480px; }
  .cd-compare-table th,
  .cd-compare-table td { padding: var(--cd-s-2) var(--cd-s-3); }
}

/* ============================================================
 * Card modifiers — composition with .cd-card
 * ============================================================ */

/* Accent / hero card: subtle accent border, exactly one per page. */
.cd-card--accent {
  border-color: var(--cd-accent-soft);
  box-shadow: var(--cd-shadow-md);
}
.cd-card--accent .cd-eyebrow,
.cd-card--accent .cd-card__eyebrow {
  color: var(--cd-accent);
}

/* Interactive card: hover lift + focus ring. Use on cards that are
 * themselves click/tap targets. Pair with <a> or <button> semantics. */
.cd-card--interactive {
  cursor: pointer;
  transition:
    box-shadow var(--cd-dur-fast) var(--cd-ease-out),
    border-color var(--cd-dur-fast) var(--cd-ease-out),
    transform var(--cd-dur-fast) var(--cd-ease-out);
}
.cd-card--interactive:hover,
.cd-card--interactive:focus-within {
  box-shadow: var(--cd-shadow-card-hover);
  border-color: var(--cd-line-strong);
}
.cd-card--interactive:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 2px;
}

/* Card header row — eyebrow on the left, optional count badge on the right. */
.cd-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-s-3);
  margin-bottom: var(--cd-s-3);
}
.cd-card__count {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-c-accent);
}

/* ============================================================
 * Stat — number + label cluster
 * ============================================================ */
.cd-stat {
  display: inline-flex;
  flex-direction: column;
  gap: var(--cd-s-1);
}
.cd-stat__value {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-2xl);
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  line-height: 1;
}
.cd-stat__value--accent { color: var(--cd-accent); }
.cd-stat__value--mute   { color: var(--cd-text-mute); }
.cd-stat__label {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
}
.cd-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cd-s-5);
  align-items: flex-start;
}
.cd-stat--inline {
  /* Compact horizontal form: VALUE LABEL on one line. */
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--cd-s-1);
}
.cd-stat--inline .cd-stat__value { font-size: var(--cd-fs-md); }

/* ============================================================
 * Field — form field wrapper: label + control + help/error
 * ============================================================ */
.cd-field {
  display: grid;
  gap: var(--cd-s-1);
}
.cd-field__label {
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
}
.cd-field__help {
  font-size: var(--cd-fs-xs);
  color: var(--cd-text-mute);
  line-height: 1.5;
}
.cd-field__error {
  font-size: var(--cd-fs-sm);
  color: var(--cd-c-danger);
}
.cd-field--inline {
  /* Checkbox-style: control + label + help in a row */
  display: flex;
  align-items: flex-start;
  gap: var(--cd-s-2);
  cursor: pointer;
}
.cd-field--inline .cd-field__label { font-weight: var(--cd-fw-semi); }
.cd-field--inline > input[type="checkbox"] { margin-top: 4px; }

/* ============================================================
 * Disclosure — styled <details>/<summary>
 * ============================================================
 * Usage:
 *   <details class="cd-disclosure">
 *     <summary>
 *       <span class="cd-disclosure__title">Section title</span>
 *       <span class="cd-disclosure__cue" data-open="↑ COLLAPSE" data-closed="↓ MANAGE">
 *         ↓ MANAGE
 *       </span>
 *     </summary>
 *     <div class="cd-disclosure__body">…</div>
 *   </details>
 */
.cd-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-s-3);
  padding: var(--cd-s-2) 0;
}
.cd-disclosure > summary::-webkit-details-marker { display: none; }
.cd-disclosure > summary::marker { display: none; content: ""; }

.cd-disclosure__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-1);
  padding: var(--cd-s-1) var(--cd-s-2);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-sm);
  background: var(--cd-surface-2);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text);
  white-space: nowrap;
  transition:
    color var(--cd-dur-fast) var(--cd-ease-out),
    background var(--cd-dur-fast) var(--cd-ease-out),
    border-color var(--cd-dur-fast) var(--cd-ease-out);
}
.cd-disclosure[open] > summary .cd-disclosure__cue {
  color: var(--cd-text-on-accent);
  background: var(--cd-accent);
  border-color: var(--cd-accent);
}

/* Swap cue text on open via data-attrs. Falls back to the literal text
 * if the data-* attrs are absent. */
.cd-disclosure[open] > summary .cd-disclosure__cue[data-open]::before {
  content: attr(data-open);
}
.cd-disclosure[open] > summary .cd-disclosure__cue[data-open] {
  font-size: 0;       /* hide the static label text */
  letter-spacing: 0;
}
.cd-disclosure[open] > summary .cd-disclosure__cue[data-open]::before {
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
}

.cd-disclosure__body {
  padding-top: var(--cd-s-3);
  margin-top: var(--cd-s-3);
  border-top: 1px solid var(--cd-line);
}

/* Hover state on the summary row — invites the click. */
.cd-disclosure > summary:hover .cd-disclosure__cue {
  border-color: var(--cd-accent);
  color: var(--cd-accent);
}
.cd-disclosure[open] > summary:hover .cd-disclosure__cue {
  background: var(--cd-accent-hov);
  border-color: var(--cd-accent-hov);
  color: var(--cd-text-on-accent);
}

/* Native fallback marker for one-off <details> outside the disclosure
 * primitive (e.g. ad-hoc "show more" toggles). */
details:not(.cd-disclosure) > summary { cursor: pointer; }

/* The nav banner row that hosts the waitlist strip. Styling lives here (not
 * inline) so :empty can hide the whole row when RaceWidget renders nothing on
 * an empty queue — an inline display:flex would otherwise win over :empty. */
.cd-nav__waitlist {
  border-top: 1px solid var(--cd-line);
  padding: var(--cd-s-2) var(--cd-s-3);
  display: flex;
  justify-content: center;
  background: var(--cd-surface);
}
.cd-nav__waitlist:empty { display: none; }

/* ── Live-waitlist banner (RaceWidget) ───────────────────────────────────────
 * Rides inside the sticky nav. Mobile-first: a compact vertical stack; at the
 * 768px breakpoint it becomes a slim single-line horizontal strip with
 * vertical separators. Numbers are short so the row holds up without wrapping. */
.cd-waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cd-s-2);
  width: 100%;
  text-align: center;
  font-size: var(--cd-fs-sm);
  color: var(--cd-text-dim);
}
.cd-waitlist__brand { display: inline-flex; align-items: center; gap: var(--cd-s-2); }
.cd-waitlist__chip {
  font-size: var(--cd-fs-xs);
  font-weight: var(--cd-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--cd-ls-wide);
  padding: 2px var(--cd-s-2);
  border-radius: var(--cd-r-pill);
  border: 1px solid var(--cd-line);
  background: var(--cd-surface-2);
  color: var(--cd-text-mute);
  white-space: nowrap;
}
.cd-waitlist__hero { display: inline-flex; align-items: baseline; gap: var(--cd-s-1); white-space: nowrap; }
.cd-waitlist__hero--text { font-weight: var(--cd-fw-semi); color: var(--cd-text); white-space: normal; }
.cd-waitlist__spot {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-lg);
  font-weight: var(--cd-fw-bold);
  color: var(--cd-accent);
  font-variant-numeric: tabular-nums;
}
.cd-waitlist__spotlabel { font-weight: var(--cd-fw-semi); color: var(--cd-text); }
.cd-waitlist__sub { color: var(--cd-text-mute); }
.cd-waitlist__metrics { display: inline-flex; align-items: center; gap: var(--cd-s-4); flex-wrap: wrap; justify-content: center; }
.cd-waitlist__metric { display: inline-flex; align-items: baseline; gap: var(--cd-s-1); white-space: nowrap; }
.cd-waitlist__num {
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  font-variant-numeric: tabular-nums;
}
.cd-waitlist__num--accent { color: var(--cd-accent); }
.cd-waitlist__sep { display: none; }
@media (min-width: 768px) {
  .cd-waitlist {
    flex-direction: row;
    gap: var(--cd-s-5);
    flex-wrap: nowrap;
  }
  .cd-waitlist__metrics { flex-wrap: nowrap; }
  .cd-waitlist__sep {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--cd-line);
  }
}

/* ============================================================
 * 16 · FEATURE / GUIDE PAGE GARNISHES
 *
 * Small presentational bits used by /features/* and /guides/*:
 * a split hero (copy + a real product screenshot in a Tesla
 * bezel), scroll-reveal on sections, and diagrammatic UI chips
 * that sit beside feature/filter/step copy. These are stylized
 * LABELS, not screenshots — the real screenshots live in the
 * bezels (public/screens/app-*.png). Server-component friendly.
 * ============================================================ */

/* ── Split hero — copy left, real screenshot right. ──────────── */
.cd-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-6);
  align-items: center;
}
@media (min-width: 980px) {
  .cd-hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: var(--cd-s-7);
  }
}

/* Bare vignette row — pins / mini-controls sitting directly on the card or
   page surface (feature hub, guides hub). No background, no border: the
   components themselves are the visual. */
.cd-cardviz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cd-s-3);
  min-height: 44px;
}
.cd-cardviz--center { justify-content: center; min-height: 52px; }

/* Row of real alert-pin assets (the /pins/v4 set). */
.cd-pinrow { display: flex; align-items: flex-end; gap: 10px; }
.cd-pinrow img {
  width: 30px;
  height: 35px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Voice EQ bars — pace-note card garnish. */
.cd-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}
.cd-eq span {
  width: 3px;
  border-radius: 2px;
  background: var(--cd-accent);
  height: 30%;
  transform-origin: bottom;
}
.cd-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.cd-eq span:nth-child(2) { height: 85%; animation-delay: 0.15s; }
.cd-eq span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
.cd-eq span:nth-child(4) { height: 95%; animation-delay: 0.45s; }
.cd-eq span:nth-child(5) { height: 50%; animation-delay: 0.6s; }
.cd-eq--live span { animation: cd-eq 1.1s ease-in-out infinite alternate; }
@keyframes cd-eq {
  from { transform: scaleY(0.45); }
  to   { transform: scaleY(1.05); }
}

/* Card screenshot thumb — square product capture beside listicle copy.
 * Hidden on narrow screens where it would crush the text column. */
.cd-card__shot { flex: 0 0 auto; display: block; }
@media (max-width: 640px) { .cd-card__shot { display: none; } }

/* ── Scroll reveal — fade-up as sections enter the viewport.
 *    Scroll-driven; progressive enhancement, no JS. ──────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cd-reveal {
      animation: cd-reveal-up 0.7s ease-out both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
    }
  }
}
@keyframes cd-reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-eq--live span { animation: none; }
}

/* ============================================================
 * 17 · APP-SHEET REPRODUCTIONS (native, not screenshots)
 *
 * Design-system reproductions of two in-car controls, so /features
 * and /guides show the real UI crisply and theme-aware instead of a
 * raster screenshot: the one-tap Report picker (ReportKindGrid) and
 * the charger-network layer (ChargerNetworks). Both use the REAL
 * flat-v4 pin icons / charger-pin generator.
 * ============================================================ */

/* Shared app-sheet chrome — a titled panel that reads as an in-car sheet. */
.cd-appsheet {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-md);
  box-shadow: var(--cd-shadow-lg);
  overflow: hidden;
}
.cd-appsheet__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cd-s-3);
  padding: var(--cd-s-3) var(--cd-s-4);
  background: var(--cd-surface-2);
  border-bottom: 1px solid var(--cd-line);
}
.cd-appsheet__title {
  font-weight: var(--cd-fw-semi);
  font-size: var(--cd-fs-md);
  color: var(--cd-text);
}
.cd-appsheet__hint {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-mute);
}
.cd-appsheet__body { padding: var(--cd-s-4); }

/* ── Report picker — 8 kind tiles ──────────────────────────────── */
.cd-reportgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cd-s-3);
}
@media (max-width: 560px) {
  .cd-reportgrid { grid-template-columns: repeat(2, 1fr); }
}
.cd-reporttile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cd-s-2);
  padding: var(--cd-s-3) var(--cd-s-2);
  text-align: center;
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-md);
}
.cd-reporttile.is-selected {
  border-color: var(--cd-accent);
  background: var(--cd-accent-soft);
  box-shadow: inset 0 0 0 1px var(--cd-accent);
}
.cd-reporttile__icon { width: 40px; height: 46px; }
.cd-reporttile__icon img { width: 100%; height: 100%; display: block; }
.cd-reporttile__label {
  font-size: var(--cd-fs-sm);
  font-weight: var(--cd-fw-medium);
  color: var(--cd-text);
  line-height: var(--cd-lh-snug);
}

/* ── Charger pin cluster — "every network, one map" ────────────── */
.cd-pincluster {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--cd-s-3) var(--cd-s-2);
  padding: var(--cd-s-3) var(--cd-s-2) var(--cd-s-2);
}
.cd-pincluster__pin { display: block; }
.cd-pincluster__legend {
  margin-top: var(--cd-s-3);
  text-align: center;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: 0.04em;
  color: var(--cd-text-mute);
}

/* ── Market-grouped network board ──────────────────────────────── */
.cd-netboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-5);
}
@media (min-width: 720px) {
  .cd-netboard { grid-template-columns: repeat(3, 1fr); }
}
.cd-netboard__market {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-md);
  padding: var(--cd-s-4);
}
.cd-netboard__head { margin-bottom: var(--cd-s-3); }
.cd-netboard__region {
  margin: 0;
  font-size: var(--cd-fs-lg);
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
}
.cd-netboard__connector {
  display: block;
  margin-top: 2px;
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: 0.04em;
  color: var(--cd-text-mute);
}
.cd-netboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cd-s-2);
}
.cd-netchip {
  display: flex;
  align-items: center;
  gap: var(--cd-s-3);
  padding: 5px var(--cd-s-2);
  background: var(--cd-surface-2);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-r-sm);
}
.cd-netchip__name {
  font-size: var(--cd-fs-sm);
  color: var(--cd-text);
  line-height: 1.2;
}

/* ============================================================
 * 18 · IN-APP FILTER CONTROLS (ported from the driver app)
 *
 * Marketing reproductions of the car's real charger-filter controls
 * so /features + /guides illustrate filtering with the actual UI,
 * not generic pills. Ports of public/styles.css .setting-segmented
 * and .chf-net from the driver app. See app/components/AppControls.tsx.
 * ============================================================ */

/* Segmented control — flush buttons, active = solid accent. */
.cd-seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  border: 1px solid var(--cd-line-strong);
  background: var(--cd-surface);
  vertical-align: middle;
  max-width: 100%;
}
.cd-seg__btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
  padding: 6px 12px;
  background: transparent;
  color: var(--cd-text-dim);
  border-left: 1px solid var(--cd-line);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 13px;
  letter-spacing: -0.005em;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
}
.cd-seg__btn:first-child { border-left: 0; }
.cd-seg__btn.is-active {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
}
.cd-seg__sub {
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Network toggle rows — swatch + name + state; on = accent wash. */
.cd-netrows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cd-netrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
}
.cd-netrow.is-on {
  background: var(--cd-accent-soft);
  border-color: var(--cd-accent);
}
.cd-netrow__swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex: none;
}
.cd-netrow__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--cd-fw-medium);
  letter-spacing: -0.005em;
  color: var(--cd-text);
}
.cd-netrow__state {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  white-space: nowrap;
}
.cd-netrow.is-on .cd-netrow__state { color: var(--cd-accent); }

/* App toast + browser-bar — small in-car UI bits for the report how-to. */
.cd-apptoast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-accent);
  font-family: var(--cd-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-text);
}
.cd-apptoast--ok { border-color: var(--cd-c-ok); color: var(--cd-c-ok); }
.cd-browserbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-pill);
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-text-dim);
}
.cd-browserbar__paired { color: var(--cd-accent); }
.cd-fab {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  font-size: 20px;
  font-weight: var(--cd-fw-semi);
  line-height: 1;
  box-shadow: 0 3px 10px var(--cd-accent-glow);
}

/* ============================================================
 * 19 · DESTINATIONS + TURN-BY-TURN (native app reproductions)
 *
 * Design-system reproductions used by /features/saved-destinations
 * and /features/turn-by-turn: destination rows (local vs synced),
 * the pace-note nav banner + ETA strip, and the maneuver list —
 * with the app's real maneuver glyphs. See app/components/
 * Destinations.tsx + Maneuver.tsx.
 * ============================================================ */

/* ── Destination rows (saved + recent) ─────────────────────────── */
.cd-destlist { display: flex; flex-direction: column; gap: 6px; }
.cd-destrow {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
}
.cd-destrow__icon { flex: none; color: var(--cd-accent); }
.cd-destrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cd-destrow__name {
  font-size: 14px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.005em;
  color: var(--cd-text);
}
.cd-destrow__sub {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
}
.cd-destrow__tier {
  flex: none;
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cd-destrow__tier--synced { color: var(--cd-accent); border-color: var(--cd-accent); }
.cd-destrow__tier--local {
  color: var(--cd-text-mute);
  border-color: var(--cd-line-strong);
}
.cd-destrow__x {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--cd-text-mute);
  font-size: 18px;
  line-height: 1;
}

/* ── Turn-by-turn: pace-note banner + ETA strip ────────────────── */
.cd-navbanner-wrap { display: flex; flex-direction: column; gap: 10px; }
.cd-navbanner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  background: var(--cd-glass);
  border: 1px solid var(--cd-accent);
  box-shadow: 0 0 0 1px var(--cd-accent-soft), var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
}
/* Corner brackets — same accent ticks the in-car banner draws. */
.cd-navbanner::before,
.cd-navbanner::after {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-top: 1.2px solid var(--cd-accent);
  pointer-events: none;
}
.cd-navbanner::before { left: 0; border-left: 1.2px solid var(--cd-accent); }
.cd-navbanner::after { right: 0; border-right: 1.2px solid var(--cd-accent); }
.cd-navbanner__rail {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  color: var(--cd-accent);
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.cd-navbanner__glyph { flex: none; color: var(--cd-accent); display: block; }
.cd-navbanner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-navbanner__text {
  font-family: var(--cd-font-ui);
  font-size: 18px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.01em;
  color: var(--cd-text);
}
.cd-navbanner__dist {
  font-family: var(--cd-font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--cd-accent);
}
.cd-naveta {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  align-self: flex-start;
  background: var(--cd-glass);
  border: 1px solid var(--cd-line-strong);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
}
.cd-naveta__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
}
.cd-naveta__value {
  font-family: var(--cd-font-mono);
  font-weight: var(--cd-fw-semi);
  font-size: 15px;
  color: var(--cd-text);
  font-variant-numeric: tabular-nums;
}
.cd-naveta__label {
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--cd-text-mute);
}
.cd-naveta__sep { width: 1px; background: var(--cd-line); align-self: stretch; }

/* ── Maneuver list ─────────────────────────────────────────────── */
.cd-maneuverlist { display: flex; flex-direction: column; }
.cd-maneuverrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--cd-line);
}
.cd-maneuverrow:last-child { border-bottom: 0; }
.cd-maneuverrow__glyph { flex: none; color: var(--cd-accent); display: block; }
.cd-maneuverrow__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--cd-text);
  letter-spacing: -0.005em;
}
.cd-maneuverrow__dist {
  flex: none;
  font-family: var(--cd-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cd-text-mute);
  font-variant-numeric: tabular-nums;
}
/* Page-local styles. */

/* ─── HERO (centered, mapbox-style) ──────────────────────────────────── */
.hero {
  padding: var(--cd-s-7) 0 var(--cd-s-8);
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(61,139,255,0.10), transparent 60%),
    var(--cd-bg);
  position: relative;
  overflow: hidden;
}
.hero-stack {
  /* Glass-card backdrop so the hero copy stays readable as the Tesla
     bezel slides up underneath it from the hero-stage below. The bezel
     is full-bleed; this stack sits ON TOP at z-index 2, taking just the
     centre column.
     Glass colors are theme-scoped (dark overrides below, same dual
     selector pattern as tokens.css). */
  --hero-glass-bg: rgba(242, 244, 247, 0.62);
  --hero-glass-line: rgba(255, 255, 255, 0.55);
  --hero-glass-shadow: 0 8px 32px rgba(15, 20, 25, 0.08),
                       0 1px 0 rgba(255, 255, 255, 0.5) inset;
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto var(--cd-s-7);
  padding: var(--cd-s-6) var(--cd-s-5);
  text-align: center;
  display: grid;
  gap: var(--cd-s-4);
  justify-items: center;
  background: var(--hero-glass-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--hero-glass-line);
  border-radius: 16px;
  box-shadow: var(--hero-glass-shadow);
}
:root[data-theme="dark"] .hero-stack {
  --hero-glass-bg: rgba(14, 18, 24, 0.62);
  --hero-glass-line: rgba(255, 255, 255, 0.10);
  --hero-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                       0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-stack {
    --hero-glass-bg: rgba(14, 18, 24, 0.62);
    --hero-glass-line: rgba(255, 255, 255, 0.10);
    --hero-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                         0 1px 0 rgba(255, 255, 255, 0.06) inset;
  }
}
.hero-stack .cd-eyebrow { color: var(--cd-text-mute); }
.hero__headline {
  /* Sized for the longer "what it is" headline (2 lines at desktop,
     3 on mobile) — the old 5rem cap fit the four-word brand line only. */
  font-size: clamp(2.25rem, 1.2rem + 3.5vw, 3.75rem);
  letter-spacing: -0.035em;
}
.hero__lead { max-width: 640px; }
.cd-hero__cta {
  display: inline-flex;
  gap: var(--cd-s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.cd-hero__sub {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  color: var(--cd-text-mute);
  text-transform: uppercase;
}

.hero-stage {
  /* Tucks just behind the hero-stack so the bezel chrome peeks past
     the glass card's edges. Trim 150 px off the bottom by sizing the
     box shorter than the bezel's natural height (100vw / 1.445) and
     letting overflow clip the dashboard stand we don't need. */
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -60px;
  margin-bottom: var(--cd-s-7);
  height: calc(100vw / 1.445 - 150px);
  overflow: hidden;
  /* Soft top fade so the bezel emerges from the page bg instead of
     showing a hard horizontal cut where it meets the glass card.
     Same idea at the bottom to ease into the metrics grid. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 120px,
    black calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 120px,
    black calc(100% - 24px),
    transparent 100%
  );
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cd-s-5);
  max-width: 980px;
  margin: 0 auto;
}
.cd-metric { text-align: left; }
.cd-metric__value {
  font-family: var(--cd-font-ui);
  font-weight: 700;
  font-size: var(--cd-fs-3xl);
  letter-spacing: -0.03em;
  color: var(--cd-text);
}
.cd-metric__label {
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  text-transform: uppercase;
  color: var(--cd-text-dim);
  margin-top: 4px;
}
.cd-metric__sub {
  font-size: var(--cd-fs-sm);
  color: var(--cd-text-mute);
  margin-top: 2px;
}

/* ─── COCKPIT (interior + nav) ─────────────────────────────────── */
.cockpit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-7);
  align-items: center;
}
@media (min-width: 980px) {
  .cockpit__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--cd-s-8);
  }
}
.cockpit__stage img,
.cockpit__stage > div { width: 100%; }
.cockpit__pts {
  list-style: none;
  padding: 0;
  margin: var(--cd-s-5) 0 var(--cd-s-5);
  display: grid;
  gap: var(--cd-s-3);
}
.cockpit__pts li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--cd-s-3);
  color: var(--cd-text-dim);
  font-size: var(--cd-fs-md);
  line-height: 1.5;
}
.cockpit__pts-key {
  color: var(--cd-accent);
  font-family: var(--cd-font-mono);
  font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps);
  line-height: 1.5;
}
.cockpit__cta {
  display: inline-flex;
  gap: var(--cd-s-3);
  flex-wrap: wrap;
}

/* ─── VEHICLE MOMENT ──────────────────────────────────────────── */
.vehicle-moment {
  background:
    radial-gradient(700px 500px at 80% 30%, rgba(61,139,255,0.10), transparent 60%),
    var(--cd-bg);
  overflow: hidden;
}
.vehicle-moment__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cd-s-7);
  align-items: center;
}
@media (min-width: 980px) {
  .vehicle-moment__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--cd-s-8);
  }
}
.vehicle-moment__car { order: -1; }
@media (min-width: 980px) {
  .vehicle-moment__car { order: 0; }
}
.vehicle-moment__pillars {
  display: grid;
  gap: var(--cd-s-5);
  margin-top: var(--cd-s-6);
}
.vehicle-moment__pillar {
  padding-left: var(--cd-s-4);
  border-left: 2px solid var(--cd-line-strong);
}

/* Map showcase */
.map-stage {
  position: relative;
  background: #06091A; color: #F2F4F7;
  border: 1px solid var(--cd-line-strong);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  width: 100%;
}
.map-stage__pins {
  position: absolute; inset: 0; pointer-events: none;
}
.map-pin { position: absolute; transform: translate(-50%, -100%); }
.map-pin__cap {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px;
  background: rgba(14,18,24,0.92);
  border: 1px solid var(--cd-accent);
  font-family: var(--cd-font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: #F2F4F7;
  white-space: nowrap;
}
.map-veh {
  position: absolute; left: 47.5%; bottom: 6%;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(61,139,255,0.25), transparent 70%);
  display: grid; place-items: center;
  transform: translateX(-50%);
}
.map-veh svg { filter: drop-shadow(0 0 6px #3D8BFF); }
.map-stage__mock { position: absolute; inset: 0; }
.map-stage[data-mode="live"] .map-stage__mock,
.map-stage[data-mode="live"] .map-stage__load { display: none; }
.map-stage__live {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
  background: #06091A;
}
.map-stage__load {
  position: absolute; bottom: 16px; right: 16px; z-index: 5;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(14,18,24,0.92);
  border: 1px solid #3D8BFF;
  color: #F2F4F7; cursor: pointer;
  font-family: var(--cd-font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 120ms ease, border-color 120ms ease;
}
.map-stage__load:hover { background: rgba(61,139,255,0.18); border-color: #5CA3FF; }
.map-stage__load:focus-visible { outline: 2px solid #5CA3FF; outline-offset: 2px; }
.map-stage__load-icon { color: #3D8BFF; font-size: 10px; }
.map-stage__load-text { display: grid; gap: 1px; line-height: 1.2; text-align: left; }
.map-stage__load-text small { font-size: 9px; color: rgba(242,244,247,0.5); letter-spacing: 0.14em; }
.map-stage__loading {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center;
  background: rgba(6,9,26,0.85);
  color: #F2F4F7;
  font-family: var(--cd-font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.map-stage[data-mode="live"][data-loaded="true"] .map-stage__loading { display: none; }

/* Sample voice transcript */
.voice {
  display: grid; gap: var(--cd-s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .voice { grid-template-columns: 1fr 1fr; } }
.voice-card {
  padding: var(--cd-s-5);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
}
.voice-card--bad { border-color: rgba(255,75,62,0.4); }
.voice-card--bad .voice-tag { background: rgba(255,75,62,0.12); color: var(--cd-c-danger); }
.voice-card--good { border-color: var(--cd-accent); box-shadow: 0 0 0 1px var(--cd-accent); }
.voice-card--good .voice-tag { background: var(--cd-accent-soft); color: var(--cd-accent); }
.voice-tag {
  display: inline-block; padding: 2px 8px;
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: var(--cd-s-3);
}
.voice-quote {
  font-family: var(--cd-font-note);
  font-size: var(--cd-fs-2xl);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cd-text);
  line-height: 1.25;
  text-wrap: balance;
}
.voice-card--bad .voice-quote { opacity: 0.7; }
.voice-meta {
  margin-top: var(--cd-s-3); padding-top: var(--cd-s-3);
  border-top: 1px solid var(--cd-line);
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xs);
  color: var(--cd-text-mute); letter-spacing: 0.08em;
}

/* Pricing */
.pricing-wrap { position: relative; }
.pricing-foot {
  display: inline-flex; align-items: center; gap: var(--cd-s-2);
  padding: 6px var(--cd-s-3);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  font-family: var(--cd-font-mono); font-size: var(--cd-fs-xs);
  letter-spacing: var(--cd-ls-caps); text-transform: uppercase;
  color: var(--cd-text-dim); margin-top: var(--cd-s-5);
}
.pricing-foot::before {
  content: ''; width: 6px; height: 6px; background: var(--cd-c-ok);
}

/* Final CTA */
.final-cta {
  padding: var(--cd-s-9) var(--cd-s-5);
  background: var(--cd-bg-alt);
  text-align: center;
  border-top: 1px solid var(--cd-line);
}
.final-cta h2 { font-size: var(--cd-fs-4xl); margin-bottom: var(--cd-s-3); }
.final-cta .cd-btn { margin-top: var(--cd-s-5); }

/* Section heading shortcut */
.section-head { display: grid; gap: var(--cd-s-3); max-width: 760px; margin: 0 auto var(--cd-s-7); text-align: center; }
@media (min-width: 768px) { .section-head--left { margin-left: 0; text-align: left; } }

code { font-family: var(--cd-font-mono); font-size: 0.9em; background: var(--cd-surface-2); padding: 1px 6px; }
/* ──────────────────────────────────────────────────────────────────────────
 * codriver.io — production app styles
 *
 * Themed entirely from /styles/tokens.css (Concrete & Cobalt). This file
 * binds the design system to the live DOM in index.html — same IDs, new
 * visual language: square edges, corner-bracket accents, lateral-rail
 * drawer, cobalt accent.
 * ───────────────────────────────────────────────────────────────────────── */

/* Low-end GPU profile (Tesla MCU2 / Intel HD 505). app.js detects the GPU
 * from the unmasked WebGL renderer at boot and sets <html class="cd-no-motion">.
 * On that hardware the 3D map runs near 1fps, so we kill ALL CSS motion — the
 * drawer slide, toast fade, recenter pulse, button hover transitions, and any
 * future ones — so the compositor isn't animating on top of a starved GPU.
 * Map camera eases and speed-driven zoom are disabled separately in app.js. */
html.cd-no-motion *,
html.cd-no-motion *::before,
html.cd-no-motion *::after {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: var(--cd-bg);
  font-family: var(--cd-font-ui);
  color: var(--cd-text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#map { position: absolute; inset: 0; }

/* Mapbox built-in controls — bumped to 48 px for arm-length taps and themed
   to match the codriver glass aesthetic (square corners, mute brackets,
   cobalt-on-hover). The `!important`s here are the only way to outrank
   Mapbox's own opinionated defaults without forking the stylesheet. */
.mapboxgl-ctrl-group {
  border-radius: 0 !important;
  background: var(--cd-glass) !important;
  border: 1px solid var(--cd-line-strong) !important;
  box-shadow: var(--cd-shadow-md) !important;
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  overflow: hidden;
}
.mapboxgl-ctrl-group button {
  width: 48px !important;
  height: 48px !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
.mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  background-size: 28px 28px !important;
  filter: invert(var(--cd-mapbox-ctrl-invert, 0));
}
:root[data-theme="dark"] { --cd-mapbox-ctrl-invert: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cd-mapbox-ctrl-invert: 1; }
}
.mapboxgl-ctrl-group button:hover {
  background: var(--cd-accent-soft) !important;
}
.mapboxgl-ctrl-group button:focus,
.mapboxgl-ctrl-group button:active {
  background: var(--cd-accent-soft) !important;
}
.mapboxgl-ctrl-group button + button {
  border-top: 1px solid var(--cd-line) !important;
}

/* ============================================================
   Lateral nav drawer — flush to left edge, full height, helmet
   mark visible in both collapsed (72px rail) and expanded (380px)
   states.
   ============================================================ */

#nav-drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  z-index: 6;
  width: 380px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border-right: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
  overflow: hidden;
  transition: width var(--cd-dur-med) var(--cd-ease);
}
#nav-drawer.collapsed { width: 72px; }

/* Right-edge corner brackets — the only visible corners of the drawer.
   They mark the panel start/end without needing a heavy border. */
#nav-drawer::before,
#nav-drawer::after {
  content: '';
  position: absolute;
  right: 0;
  width: 10px; height: 10px;
  pointer-events: none;
}
#nav-drawer::before {
  top: 0;
  border-top: 1.2px solid var(--cd-accent);
  border-right: 1.2px solid var(--cd-accent);
}
#nav-drawer::after {
  bottom: 0;
  border-bottom: 1.2px solid var(--cd-accent);
  border-right: 1.2px solid var(--cd-accent);
}

/* The browser's default [hidden] is display: none, but some descendants
   set display: flex which wins on specificity. Re-assert it globally. */
[hidden] { display: none !important; }

/* Header strip: helmet + lockup + menu toggle. Always present. */
.nav-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cd-line-strong);
  min-height: 72px;
}
.nav-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-s-2);
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 18px;
  letter-spacing: var(--cd-ls-snug);
  line-height: 1;
  min-width: 0;
}
.nav-lockup .cd-logo__mark {
  width: 28px; height: 28px;
  color: var(--cd-accent);
  flex: 0 0 auto;
}
.nav-lockup__text { display: inline-flex; align-items: baseline; gap: 0; min-width: 0; }
.nav-lockup__text > span:first-child { white-space: nowrap; }
.cd-logo__suffix { color: var(--cd-text-mute); font-weight: var(--cd-fw-medium); }
/* In collapsed rail, hide the "codriver.io" text — only the helmet shows */
/* Collapsed rail: stack the helmet over a compact wordmark so the brand
   is still legible. Mark sits a tick larger here than in the expanded
   horizontal lockup. */
#nav-drawer.collapsed .nav-lockup {
  margin: 0 auto;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  letter-spacing: -0.02em;
  line-height: 1;
}
#nav-drawer.collapsed .nav-lockup .cd-logo__mark {
  width: 34px;
  height: 34px;
}
#nav-drawer.collapsed .nav-lockup__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
#nav-drawer.collapsed .nav-header {
  justify-content: center;
  padding: 12px 0;
  min-height: auto;
}
#nav-drawer.collapsed .nav-toggle { display: none; }

.nav-toggle {
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--cd-text-dim);
  border: 0;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--cd-text); background: var(--cd-accent-soft); }
.nav-toggle .icon-close { display: none; }
#nav-drawer:not(.collapsed) .nav-toggle .icon-menu { display: none; }
#nav-drawer:not(.collapsed) .nav-toggle .icon-close { display: inline-block; }

/* Rail icons — vertical stack visible only when collapsed. Each icon opens
   the drawer (Settings jumps to the sub-view). flex:1 so the bottom-pinned
   Settings button has room to sit at the column's end. */
.nav-rail {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 8px;
  gap: 4px;
}
#nav-drawer.collapsed .nav-rail { display: flex; }
.nav-rail__btn--bottom {
  margin-top: auto;
  border-top: 1px solid var(--cd-line);
  padding-top: 4px;
}
.nav-rail__btn {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  color: var(--cd-text-dim);
  cursor: pointer;
  font-family: var(--cd-font-mono);
  font-size: 8px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-rail__btn:hover { color: var(--cd-text); background: var(--cd-accent-soft); }
.nav-rail__btn.is-active {
  color: var(--cd-accent);
  background: var(--cd-accent-soft);
  border-left-color: var(--cd-accent);
}

/* Drawer body — hidden in rail mode, fills the column when expanded */
#nav-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#nav-drawer.collapsed #nav-body { display: none; }

/* Drawer footer — online indicator + version. Only when expanded. */
.nav-footer {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-top: 1px solid var(--cd-line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--cd-text-mute);
  text-transform: uppercase;
  background: var(--cd-bg-alt);
}
#nav-drawer.collapsed .nav-footer { display: none; }
.nav-footer__status { display: inline-flex; align-items: center; gap: 6px; }
.nav-footer__dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--cd-c-ok);
  box-shadow: 0 0 6px var(--cd-c-ok);
}

/* Custom POI autocomplete */
#nav-search-mount {
  padding: 12px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--cd-line);
}
.poi-search { position: relative; width: 100%; }
.poi-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--cd-text-mute);
  display: inline-flex;
  align-items: center;
}
.poi-search-input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 40px 0 40px;
  background: var(--cd-surface);
  color: var(--cd-text);
  border: 1px solid var(--cd-line-strong);
  border-radius: var(--cd-r-sm);
  font: inherit;
  font-size: 15px;
  caret-color: var(--cd-accent);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--cd-dur-fast) var(--cd-ease),
              box-shadow var(--cd-dur-fast) var(--cd-ease);
}
.poi-search-input::placeholder { color: var(--cd-text-mute); }
.poi-search-input::selection { background: var(--cd-accent); color: var(--cd-text-on-accent); }
.poi-search-input:focus {
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
}
.poi-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}
.poi-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--cd-text-dim);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.poi-search-clear:hover { background: var(--cd-accent-soft); color: var(--cd-text); }

.poi-search-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 30;
}
.poi-search-list:empty { display: none; }
.poi-suggestion {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--cd-text);
  font-size: 15px;
  user-select: none;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--cd-line);
}
.poi-suggestion:last-child { border-bottom: 0; }
.poi-suggestion:hover,
.poi-suggestion[aria-selected="true"] {
  background: var(--cd-accent-soft);
  border-left-color: var(--cd-accent);
}
.poi-suggestion-icon {
  color: var(--cd-text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.poi-suggestion[aria-selected="true"] .poi-suggestion-icon { color: var(--cd-accent); }
.poi-suggestion-body { min-width: 0; }
.poi-suggestion-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--cd-fw-medium);
}
.poi-suggestion-meta {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.poi-suggestion-distance {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.poi-suggestion[aria-selected="true"] .poi-suggestion-distance { color: var(--cd-accent); }
.poi-search-empty {
  padding: 12px 16px;
  color: var(--cd-text-mute);
  font-size: 13px;
}

/* Route summary + steps inside the drawer */
#nav-route {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.route-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: var(--cd-accent-soft);
  border-bottom: 1px solid var(--cd-line);
  border-left: 2px solid var(--cd-accent);
}
.route-eta {
  font-family: var(--cd-font-mono);
  font-size: 26px;
  font-weight: var(--cd-fw-semi);
  color: var(--cd-accent);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.route-dist {
  font-size: 13px;
  color: var(--cd-text-dim);
}
.route-icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--cd-text-dim);
  border: 1px solid var(--cd-line-strong);
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
.route-icon-btn:hover { background: var(--cd-accent-soft); border-color: var(--cd-accent); color: var(--cd-accent); }
#route-save { margin-left: auto; }
#route-save.saved {
  color: var(--cd-accent);
  border-color: var(--cd-accent);
  background: var(--cd-accent-soft);
}
#route-save.saved svg path { fill: var(--cd-accent); stroke: var(--cd-accent); }
#route-clear:hover { background: rgba(255, 75, 62, 0.14); border-color: var(--cd-c-danger); color: var(--cd-c-danger); }

.route-dest {
  padding: 8px 16px 10px;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-dim);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cd-line);
  word-break: break-word;
}

.route-steps {
  list-style: none;
  padding: 0; margin: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.route-steps li {
  padding: 12px 16px 12px 48px;
  border-bottom: 1px solid var(--cd-line);
  border-left: 2px solid transparent;
  position: relative;
  font-family: var(--cd-font-note);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: var(--cd-text);
}
.route-steps li:last-child { border-bottom: none; }
.route-steps .step-icon {
  position: absolute;
  left: 14px; top: 12px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cd-text);
}
.route-steps .step-icon svg { width: 100%; height: 100%; display: block; }
.route-steps .step-distance {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  margin-top: 4px;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Favorites section */
#nav-route:not([hidden]) ~ #nav-favorites { display: none; }
#nav-favorites {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.favs-header {
  padding: 12px 16px 8px;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cd-line);
  background: var(--cd-bg-alt);
}
.favs-header svg { color: var(--cd-accent); }
#nav-favorites-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.fav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 16px;
  border-bottom: 1px solid var(--cd-line);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.fav-item:last-child { border-bottom: none; }
.fav-item:hover { background: var(--cd-accent-soft); border-left-color: var(--cd-accent); }
.fav-item .fav-body { flex: 1 1 auto; min-width: 0; }
.fav-item .fav-name {
  display: block;
  font-family: var(--cd-font-note);
  font-size: 15px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.02em;
  color: var(--cd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-item .fav-meta {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cd-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.fav-item .fav-edit,
.fav-item .fav-delete {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--cd-text-mute);
  border: 0;
  cursor: pointer;
  font-size: 14px;
  flex: 0 0 auto;
}
.fav-item .fav-edit:hover { background: var(--cd-accent-soft); color: var(--cd-accent); }
.fav-item .fav-delete:hover { background: rgba(255, 75, 62, 0.14); color: var(--cd-c-danger); }
.fav-name-input {
  display: block;
  width: 100%;
  background: var(--cd-surface);
  color: var(--cd-text);
  border: 1px solid var(--cd-accent);
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
  padding: 5px 8px;
  font-family: var(--cd-font-note);
  font-size: 15px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.02em;
  outline: none;
  box-sizing: border-box;
}
.fav-item[data-editing="true"] { cursor: text; background: var(--cd-accent-soft); border-left-color: var(--cd-accent); }
.favs-empty {
  padding: 16px;
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-text-mute);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Recent destinations — sits below favorites, reuses .fav-item row styling.
   Hidden entirely when empty (set via [hidden]) and while a route is active. */
#nav-route:not([hidden]) ~ #nav-recents { display: none; }
#nav-recents {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  border-top: 1px solid var(--cd-line);
}
#nav-recents[hidden] { display: none; }
.recents-header { justify-content: space-between; }
.recents-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--cd-text-mute);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 4px;
}
.recents-clear:hover { color: var(--cd-c-danger); }
#nav-recents-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 0 1 auto;
  max-height: 40vh;
  min-height: 0;
}

/* ============================================================
   HUD — top-right status, speed pill next to rail, bottom-right strip
   ============================================================ */

/* Founder pill — sits below #hud-status (status pill width is variable,
   so stacking is cleaner than side-by-side). Same height + accent fill;
   no glass treatment because the solid accent is the "earned status"
   weight. Visibility toggled by cdApplyFounderPill() in app.js — hidden
   until cdEntitlement.isFounder is true. */
.hud-founder-pill {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 6;
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--cd-accent);
  color: #fff;
  border: 1px solid var(--cd-accent);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Top-right status pill — now interactive: click toggles the alerts legend */
#hud-status {
  appearance: none; -webkit-appearance: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 6;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 32px;
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  border-radius: 0;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease),
              box-shadow var(--cd-dur-fast) var(--cd-ease);
}
#hud-status:hover { background: var(--cd-surface-2); }
#hud-status[aria-expanded="true"] {
  border-color: var(--cd-accent);
  box-shadow: 0 0 0 1px var(--cd-accent-soft);
}
.hud-status__chev {
  display: inline-flex;
  margin-left: 2px;
  color: var(--cd-text-mute);
  transition: transform var(--cd-dur-med) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
#hud-status[aria-expanded="true"] .hud-status__chev {
  color: var(--cd-accent);
  transform: rotate(180deg);
}
#hud-status .dot {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--cd-c-warn);
  box-shadow: 0 0 6px currentColor;
  color: var(--cd-c-warn);
}
#hud-status .dot.ok   { background: var(--cd-c-ok);     color: var(--cd-c-ok); }
#hud-status .dot.err  { background: var(--cd-c-danger); color: var(--cd-c-danger); }
#hud-status .dot.warn { background: #f1c40f;            color: #f1c40f; }

/* Speed pill — flush right of the collapsed rail. align-items:center so the
   small km/h unit sits vertically centered with the big number instead of
   on the number's baseline (which dropped it low against the 52px chassis). */
#speed-pill {
  position: fixed;
  top: 16px;
  left: calc(72px + 16px);
  z-index: 5;
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  font-variant-numeric: tabular-nums;
  transition: left var(--cd-dur-med) var(--cd-ease);
}
/* Speed pill corner brackets (cobalt) */
#speed-pill::before,
#speed-pill::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
}
#speed-pill::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#speed-pill::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}
#speed-pill #speed-value {
  font-family: var(--cd-font-mono);
  font-size: 24px;
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  line-height: 1;
  letter-spacing: -0.01em;
}
#speed-pill .unit {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-dim);
  letter-spacing: 0.08em;
}
/* When drawer is expanded, push the speed pill right by the wider rail */
#nav-drawer:not(.collapsed) ~ #speed-pill,
body:has(#nav-drawer:not(.collapsed)) #speed-pill { display: none; }

/* Bottom-right HUD strip */
#hud {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  z-index: 5;
  pointer-events: none;
}
#hud > * { pointer-events: auto; }
/* When the ETA strip is visible (active route + collapsed drawer),
   shift the HUD column up so it sits directly above the ETA instead
   of overlapping it. ETA strip is ~76 px tall + 10 px gap. */
body:has(#nav-eta:not([hidden])) #hud {
  bottom: calc(16px + 86px);
}

.hud-btn {
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cd-glass);
  color: var(--cd-text);
  border: 1px solid var(--cd-line-strong);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
/* HUD button corner brackets — system signature */
.hud-btn::before,
.hud-btn::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  pointer-events: none;
  transition: border-color var(--cd-dur-fast) var(--cd-ease);
}
.hud-btn::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-text-mute);
  border-left: 1px solid var(--cd-text-mute);
}
.hud-btn::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-text-mute);
  border-right: 1px solid var(--cd-text-mute);
}
.hud-btn:hover { background: var(--cd-surface-2); }
.hud-btn:active { transform: translateY(1px); }
.hud-btn.active,
.hud-btn.needs-recenter {
  color: var(--cd-accent);
  border-color: var(--cd-accent);
}
.hud-btn.active::before,
.hud-btn.active::after,
.hud-btn.needs-recenter::before,
.hud-btn.needs-recenter::after {
  border-color: var(--cd-accent);
}

/* Recenter button — keeps a round chassis as the design's exception */
.hud-btn--round { border-radius: 50%; }
.hud-btn--round::before,
.hud-btn--round::after { display: none; }

#compass {
  --bearing: 0deg;
  color: var(--cd-text-dim);
}
#compass svg { transform: rotate(var(--bearing)); transition: transform 0.2s linear; }
#compass.active {
  color: var(--cd-accent);
  background: var(--cd-accent-soft);
  border-color: var(--cd-accent);
}
#compass.north-up {
  color: var(--cd-c-warn);
  background: rgba(255, 140, 0, 0.14);
  border-color: var(--cd-c-warn);
}
#compass.north-up::before,
#compass.north-up::after { border-color: var(--cd-c-warn); }

#recenter { color: var(--cd-text-dim); }
#recenter.needs-recenter {
  color: var(--cd-accent);
  background: var(--cd-accent-soft);
  border-color: var(--cd-accent);
  animation: recenter-pulse 1.6s ease-in-out infinite;
}
@keyframes recenter-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--cd-accent-soft); }
  50%      { box-shadow: 0 0 0 6px var(--cd-accent-soft); }
}

#lite-toggle.active { color: var(--cd-c-warn); border-color: var(--cd-c-warn); }
#lite-toggle.active::before,
#lite-toggle.active::after { border-color: var(--cd-c-warn); }

#theme-toggle[data-mode="dark"]  { color: var(--cd-accent); }
#theme-toggle[data-mode="light"] { color: var(--cd-c-warn); }
#theme-toggle[data-mode="auto"]  { color: var(--cd-text-dim); }

#rechoose-route { color: var(--cd-accent); border-color: var(--cd-accent); }
#rechoose-route::before,
#rechoose-route::after { border-color: var(--cd-accent); }
#rechoose-route:hover { background: var(--cd-accent-soft); }
#route-rechoose:hover { background: var(--cd-accent-soft); border-color: var(--cd-accent); color: var(--cd-accent); }

/* ============================================================
   Turn-by-turn banner + ETA strip — driving mode HUD
   ============================================================ */
#nav-overlay { display: contents; }

#nav-banner {
  position: fixed;
  bottom: 16px;
  left: calc(72px + 16px);
  z-index: 6;
  max-width: min(640px, calc(50% - 220px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  background: var(--cd-glass);
  border: 1px solid var(--cd-accent);
  box-shadow: 0 0 0 1px var(--cd-accent-soft), var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border-radius: 0;
  transition: left var(--cd-dur-med) var(--cd-ease);
}
/* Banner corner brackets */
#nav-banner::before,
#nav-banner::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#nav-banner::before {
  top: 0; left: 0;
  border-top: 1.2px solid var(--cd-accent);
  border-left: 1.2px solid var(--cd-accent);
}
#nav-banner::after {
  top: 0; right: 0;
  border-top: 1.2px solid var(--cd-accent);
  border-right: 1.2px solid var(--cd-accent);
}
.nav-banner-rail {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  color: var(--cd-accent);
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex: 0 0 auto;
}
.nav-banner-glyph {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-bold);
  font-size: 28px;
  line-height: 1;
}
.nav-banner-glyph svg { width: 100%; height: 100%; display: block; }
.nav-banner-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-banner-text {
  font-family: var(--cd-font-note);
  font-size: 20px;
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.nav-banner-dist {
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-accent);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

#nav-eta {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 6;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 10px 4px;
  background: var(--cd-glass);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-md);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border-radius: 0;
}
#nav-eta::before,
#nav-eta::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#nav-eta::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#nav-eta::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}
.nav-eta-cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  min-width: 90px;
}
.nav-eta-value {
  font-family: var(--cd-font-mono);
  font-size: 22px;
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nav-eta-label {
  margin-top: 6px;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-accent);
}
.nav-eta-sep {
  flex: 0 0 1px;
  background: var(--cd-line);
  margin: 4px 0;
}

/* Top-center transient toast */
#nav-toast {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 7;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px 12px 14px;
  background: var(--cd-glass);
  border: 1px solid var(--cd-accent);
  border-left: 3px solid var(--cd-accent);
  box-shadow: var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  color: var(--cd-text);
  font-family: var(--cd-font-note);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cd-dur-med) var(--cd-ease),
              transform var(--cd-dur-med) var(--cd-ease);
}
#nav-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Drive-by confirm/dispute prompt. Bottom-centre so the driver's thumb path
   from the wheel is shortest. Two large buttons sized for at-speed tapping.
   Auto-dismisses after 8 s; only one shown at a time. */
#drive-by-prompt {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 16px;
  min-width: 320px;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--cd-glass);
  border: 1px solid var(--cd-accent);
  box-shadow: var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  color: var(--cd-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cd-dur-med) var(--cd-ease),
              transform var(--cd-dur-med) var(--cd-ease);
}
#drive-by-prompt.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#drive-by-prompt .drive-by-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
#drive-by-prompt .drive-by-kind {
  font-family: var(--cd-font-note);
  font-size: 17px;
  font-weight: var(--cd-fw-semi);
}
#drive-by-prompt .drive-by-distance {
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-text-mute);
  letter-spacing: 0.04em;
}
#drive-by-prompt .drive-by-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.drive-by-btn {
  font-family: var(--cd-font-note);
  font-size: 18px;
  font-weight: var(--cd-fw-semi);
  padding: 14px 12px;
  background: transparent;
  border: 1px solid var(--cd-accent);
  color: var(--cd-text);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.drive-by-btn--up:hover    { background: rgba(0, 200, 120, 0.15); }
.drive-by-btn--down:hover  { background: rgba(220, 60, 60, 0.15); }
.drive-by-btn:active       { transform: scale(0.97); }
.drive-by-btn[disabled]    { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   Settings — entry row + sub-view inside the drawer
   ============================================================ */
.nav-settings-row {
  appearance: none; -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  flex: 0 0 auto;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--cd-line);
  background: var(--cd-bg-alt);
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 14px;
  letter-spacing: -0.005em;
  text-align: left;
  cursor: pointer;
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.nav-settings-row svg { color: var(--cd-accent); flex: 0 0 auto; }
.nav-settings-row span:nth-of-type(1) { flex: 1; }
.nav-settings-row__chev {
  font-family: var(--cd-font-mono);
  color: var(--cd-text-mute);
  font-size: 18px;
  line-height: 1;
}
.nav-settings-row:hover { background: var(--cd-accent-soft); }

#nav-settings {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#nav-drawer.collapsed #nav-settings { display: none; }
.settings-header {
  flex: 0 0 auto;
  padding: 12px 12px 12px 8px;
  border-bottom: 1px solid var(--cd-line-strong);
  background: var(--cd-bg-alt);
}
.settings-back {
  appearance: none; -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--cd-text);
  border: 0;
  padding: 8px 10px;
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 14px;
  cursor: pointer;
}
.settings-back svg { color: var(--cd-accent); }
.settings-back:hover { background: var(--cd-accent-soft); }
.settings-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.setting-group { display: flex; flex-direction: column; gap: 14px; }
.setting-group__title {
  font-family: var(--cd-font-mono);
  font-size: 12px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cd-accent-soft);
}
.setting-group__subtitle {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  margin-top: 4px;
}
.setting-row { display: flex; flex-direction: column; gap: 10px; }
.setting-row__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.setting-row .setting-name {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text);
}
.setting-row .setting-meta {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-accent);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.founder-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-left: 6px;
  background: var(--cd-accent);
  color: #fff;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.setting-row__hint {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  color: var(--cd-text-mute);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.setting-row__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--cd-text-mute);
  padding: 0 2px;
}

.setting-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 32px;
  background: transparent;
  cursor: pointer;
}
.setting-slider:focus { outline: none; }
.setting-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--cd-line-strong);
  border: 0;
}
.setting-slider::-moz-range-track {
  height: 4px;
  background: var(--cd-line-strong);
  border: 0;
}
.setting-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--cd-accent);
  border: 0;
  margin-top: -7px;
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
}
.setting-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--cd-accent);
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
}

.setting-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--cd-line-strong);
}
.setting-segmented button {
  appearance: none; -webkit-appearance: none;
  min-height: 44px;
  background: transparent;
  color: var(--cd-text-dim);
  border: 0;
  border-left: 1px solid var(--cd-line);
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 13px;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 0 8px;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              color var(--cd-dur-fast) var(--cd-ease);
}
.setting-segmented button:first-child { border-left: 0; }
.setting-segmented button:hover { background: var(--cd-accent-soft); color: var(--cd-text); }
.setting-segmented button.is-active {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
}

/* Per-button lock for the view-mode picker (Free tier disables 3 of 4
   tiles). Distinct from .setting-segmented.is-locked which is a blanket
   container-level lock used by other binary settings. */
.setting-segmented button.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.setting-segmented button.is-locked::after {
  content: '★';
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 8px;
  color: var(--cd-accent);
}

/* View-mode picker — four buttons with stacked label + sub-label. The
   default segmented control assumes single-line labels; we override
   padding + flex direction here so the two-line content fits cleanly. */
.setting-segmented--4 button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 56px;
  font-size: 12px;
}
.setting-view__name {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 12.5px;
  line-height: 1.1;
}
.setting-view__sub {
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--cd-text-mute);
  text-transform: uppercase;
}
.setting-segmented--4 button.is-active .setting-view__sub {
  color: var(--cd-text-on-accent);
  opacity: 0.85;
}

/* ============================================================
   Map context menu (long-press / right-click)
   ============================================================ */
#map-context-menu {
  position: absolute;
  z-index: 8;
  min-width: 240px;
  background: var(--cd-glass);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  padding: 0;
  overflow: hidden;
}
#map-context-menu .ctx-coords {
  padding: 10px 16px 8px;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  border-bottom: 1px solid var(--cd-line);
  font-variant-numeric: tabular-nums;
}
#map-context-menu .ctx-item {
  appearance: none; -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  color: var(--cd-text);
  border: 0;
  font-family: var(--cd-font-ui);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
#map-context-menu .ctx-item:hover,
#map-context-menu .ctx-item:active {
  background: var(--cd-accent-soft);
}
#map-context-menu .ctx-item svg { color: var(--cd-accent); flex: 0 0 auto; }
#map-context-menu .ctx-cancel {
  border-top: 1px solid var(--cd-line);
  color: var(--cd-text-mute);
  font-family: var(--cd-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  justify-content: center;
}

/* ============================================================
   Alert popup (mapbox)
   ============================================================ */
.alert-popup .mapboxgl-popup-content {
  background: var(--cd-glass);
  color: var(--cd-text);
  border: 1px solid var(--cd-line-strong);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--cd-shadow-lg);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
}
.alert-popup .mapboxgl-popup-tip { display: none; }
.alert-popup .title {
  font-family: var(--cd-font-note);
  font-weight: var(--cd-fw-semi);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.alert-popup .meta {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  letter-spacing: 0.04em;
}

/* ============================================================
   Bird's-eye route picker (in-drawer panel)
   ============================================================ */
#route-picker {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: transparent;
  color: var(--cd-text);
}
.picker-header {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--cd-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.picker-title {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--cd-text);
}
.picker-subtitle {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.picker-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cd-line);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background var(--cd-dur-fast) var(--cd-ease);
}
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--cd-accent-soft); }
.picker-row.active {
  background: var(--cd-accent-soft);
  border-left-color: var(--cd-accent);
}
.picker-row .picker-eta {
  font-family: var(--cd-font-mono);
  font-size: 20px;
  font-weight: var(--cd-fw-semi);
  color: var(--cd-text);
  letter-spacing: -0.01em;
  line-height: 1;
  flex: 0 0 auto;
  min-width: 72px;
  font-variant-numeric: tabular-nums;
}
.picker-row.active .picker-eta { color: var(--cd-accent); }
.picker-row .picker-eta-free {
  display: block;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  font-weight: var(--cd-fw-medium);
  color: var(--cd-text-mute);
  margin-top: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.picker-row.active .picker-eta-free { color: var(--cd-c-ok); }
.picker-row .picker-body { flex: 1 1 auto; min-width: 0; }
.picker-row .picker-name {
  font-family: var(--cd-font-note);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--cd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.picker-row .picker-meta {
  margin-top: 4px;
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  letter-spacing: 0.05em;
}
.picker-row .picker-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.picker-chip {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  padding: 3px 7px;
  border: 1px solid var(--cd-line);
  background: transparent;
  color: var(--cd-text-dim);
  white-space: nowrap;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
}
.picker-chip.best {
  border-color: transparent;
  background: rgba(61, 173, 110, 0.14);
  color: var(--cd-c-ok);
  font-weight: var(--cd-fw-semi);
}
.picker-chip.toll {
  border-color: transparent;
  background: rgba(245, 158, 11, 0.14);
  color: var(--cd-c-warn);
}
.picker-chip.ferry {
  border-color: transparent;
  background: var(--cd-accent-soft);
  color: var(--cd-accent);
}
.picker-chip.hov {
  border-color: var(--cd-line);
  color: var(--cd-text-dim);
}
.picker-chip.alerts {
  border-color: transparent;
  background: rgba(255, 75, 62, 0.14);
  color: var(--cd-c-danger);
}
.picker-chip.alerts.zero {
  border-color: transparent;
  background: rgba(61, 173, 110, 0.14);
  color: var(--cd-c-ok);
}
.picker-chip.warn {
  border-color: transparent;
  background: rgba(245, 158, 11, 0.14);
  color: var(--cd-c-warn);
}
.picker-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cd-line);
  background: var(--cd-bg-alt);
}
.picker-btn {
  appearance: none;
  -webkit-appearance: none;
  height: 48px;
  font-family: var(--cd-font-ui);
  font-size: 15px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius: 0;
  border: 1px solid transparent;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease);
}
.picker-btn-secondary {
  background: transparent;
  border-color: var(--cd-line-strong);
  color: var(--cd-text-dim);
}
.picker-btn-secondary:hover { background: var(--cd-surface-2); border-color: var(--cd-text); color: var(--cd-text); }
.picker-btn-primary {
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  box-shadow: var(--cd-shadow-accent);
}
.picker-btn-primary:hover { background: var(--cd-accent-hov); }

/* ============================================================
   Save-favorite sheet — modal overlay for picking the save target
   (local / home / work / synced).
   ============================================================ */
#save-fav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 18, 24, 0.72);
  display: flex;
  /* Anchor the sheet to the TOP so the Tesla touchscreen keyboard (which
     occupies the bottom half of the screen as soon as the NAME field
     gains focus) never covers the dialog. A small top inset keeps it
     from butting against the chrome. */
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
}
#save-fav-sheet {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--cd-bg-alt);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  display: flex;
  flex-direction: column;
  /* Cap to the upper half of the viewport so the sheet body scrolls
     instead of getting hidden behind the on-screen keyboard. */
  max-height: calc(50vh - 24px);
}
.ssheet-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cd-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ssheet-title {
  font-family: var(--cd-font-ui);
  font-weight: var(--cd-fw-semi);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.ssheet-subtitle {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  color: var(--cd-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ssheet-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ssheet-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ssheet-field-label {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
}
#ssheet-name {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  font-family: var(--cd-font-ui);
  font-size: 15px;
  border-radius: 0;
}
#ssheet-name:focus { outline: 2px solid var(--cd-accent); outline-offset: -1px; }
/* Storage tier (2-up) and slot (3-up) tile rows. */
.ssheet-storage,
.ssheet-slots {
  display: grid;
  gap: 8px;
}
.ssheet-storage { grid-template-columns: 1fr 1fr; }
.ssheet-slots { grid-template-columns: repeat(3, 1fr); }
.ssheet-tile {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  min-height: 88px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  color: var(--cd-text);
  cursor: pointer;
  text-align: center;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease);
}
.ssheet-tile:hover { background: var(--cd-surface-2); }
.ssheet-tile.is-selected {
  border-color: var(--cd-accent);
  background: var(--cd-accent-soft);
  box-shadow: inset 0 0 0 1px var(--cd-accent);
}
.ssheet-tile.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ssheet-tile.is-disabled:hover { background: var(--cd-surface); }
.ssheet-tile__icon {
  font-size: 22px;
  line-height: 1;
}
.ssheet-tile__label {
  font-family: var(--cd-font-ui);
  font-size: 13px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.005em;
}
.ssheet-tile__sub {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cd-text-mute);
  text-transform: uppercase;
}
.ssheet-tile.is-selected .ssheet-tile__sub { color: var(--cd-accent); }
.ssheet-tile__check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cd-accent);
  color: var(--cd-text-on-accent);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}
.ssheet-tile.is-selected .ssheet-tile__check { display: flex; }
.ssheet-tile__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: var(--cd-font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 5px;
  border: 1px solid var(--cd-accent);
  color: var(--cd-accent);
  background: var(--cd-bg);
}
.ssheet-tile.is-disabled .ssheet-tile__badge {
  border-color: var(--cd-line);
  color: var(--cd-text-mute);
}

/* SLOT row hides entirely when STORAGE=local */
#ssheet-slot-field.is-hidden { display: none; }

/* Delete on the left, Cancel + Save on the right. */
.ssheet-cta {
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
}
.ssheet-btn-delete {
  background: transparent;
  border-color: var(--cd-c-danger);
  color: var(--cd-c-danger);
}
.ssheet-btn-delete:hover {
  background: rgba(255, 75, 62, 0.08);
  border-color: var(--cd-c-danger);
}
.ssheet-cta > #ssheet-cancel { grid-column: 3; }
.ssheet-cta > #ssheet-save   { grid-column: 4; }
.ssheet-error {
  font-family: var(--cd-font-mono);
  font-size: 12px;
  color: var(--cd-c-danger);
  padding: 8px 12px;
  border: 1px solid var(--cd-c-danger);
  background: rgba(255, 75, 62, 0.08);
}

/* Inline beta-perk upgrade banner — shown when user is Free + Synced
   storage is selected. Lets them flip to Premium without leaving the
   driving app. */
.ssheet-upgrade {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--cd-accent);
  background: var(--cd-accent-soft);
  flex-wrap: wrap;
}
.ssheet-upgrade__text {
  flex: 1 1 220px;
  font-family: var(--cd-font-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cd-text);
}
.ssheet-upgrade .picker-btn {
  height: 38px;
  font-size: 13px;
  padding: 0 14px;
  flex: 0 0 auto;
}

/* Report-a-pin sheet — opened from the HUD "+" button. Reuses the
   #save-fav-overlay backdrop chrome; the body is a 4×2 grid of kind
   tiles instead of the favorite-picker form. */
#report-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 18, 24, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#report-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--cd-bg-alt);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.report-header {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.report-close {
  appearance: none;
  -webkit-appearance: none;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--cd-line);
  color: var(--cd-text-mute);
  cursor: pointer;
  border-radius: 0;
}
.report-close:hover { color: var(--cd-text); border-color: var(--cd-line-strong); }
.report-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.report-tile {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 6px;
  min-height: 108px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  color: var(--cd-text);
  cursor: pointer;
  text-align: center;
  transition: background var(--cd-dur-fast) var(--cd-ease),
              border-color var(--cd-dur-fast) var(--cd-ease);
}
.report-tile:hover { background: var(--cd-surface-2); border-color: var(--cd-line-strong); }
.report-tile:active { transform: translateY(1px); }
.report-tile__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.report-tile__icon svg { width: 100%; height: 100%; display: block; }
.report-tile__label {
  font-family: var(--cd-font-ui);
  font-size: 12.5px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
@media (max-width: 480px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
}

/* HUD "+" report button — cooldown progress ring overlays the chassis
   for 60 s after a successful submit. The ring's stroke-dashoffset is
   animated from 0 → 100 via a CSS transition kicked off by toggling
   the .is-cooldown class. */
.hud-btn--report { color: var(--cd-text); }
.hud-btn--report .hud-btn__ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--cd-accent);
  opacity: 0;
  transition: opacity var(--cd-dur-fast) var(--cd-ease);
}
.hud-btn--report.is-cooldown {
  color: var(--cd-text-mute);
  cursor: not-allowed;
}
.hud-btn--report.is-cooldown .hud-btn__ring { opacity: 1; }
.hud-btn--report.is-cooldown .hud-btn__ring circle {
  transition: stroke-dashoffset 60s linear;
  stroke-dashoffset: 0;
}
.hud-btn--report[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.hud-btn--report[disabled]:hover { background: var(--cd-glass); }

/* View-mode gating: locked compass button + locked Lite-mode toggle for
   Free users. Locked controls show a subtle reduced-opacity state and
   the title attribute carries the upgrade hint. */
#compass.is-locked,
.setting-segmented.is-locked button {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
#compass.is-locked { position: relative; }
#compass.is-locked::after {
  content: '★';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 8px;
  color: var(--cd-accent);
  letter-spacing: 0;
}
.setting-row__locked {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cd-accent);
  margin-top: 4px;
}
.ssheet-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--cd-line);
  background: var(--cd-bg);
}

/* Favorite list — slot badge prefix (server-synced rows get a tag,
   local rows have none). */
.fav-item__slot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 6px;
  margin-right: 8px;
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text-mute);
}
.fav-item__slot.home { color: var(--cd-accent); border-color: var(--cd-accent); }
.fav-item__slot.work { color: var(--cd-c-ok); border-color: var(--cd-c-ok); }
.fav-item__slot.synced { color: var(--cd-text); border-color: var(--cd-text-mute); }

/* ============================================================
   Bottom-corner brackets — span partners to the ::before / ::after
   top corners already declared above. The combination gives every
   glass panel + HUD button the full 4-corner system mark.
   ============================================================ */
.hud-btn > .bk-bl,
.hud-btn > .bk-br {
  position: absolute;
  width: 5px; height: 5px;
  pointer-events: none;
  transition: border-color var(--cd-dur-fast) var(--cd-ease);
}
.hud-btn > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-text-mute);
  border-left: 1px solid var(--cd-text-mute);
}
.hud-btn > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-text-mute);
  border-right: 1px solid var(--cd-text-mute);
}
.hud-btn.active > .bk-bl,
.hud-btn.active > .bk-br,
.hud-btn.needs-recenter > .bk-bl,
.hud-btn.needs-recenter > .bk-br { border-color: var(--cd-accent); }
.hud-btn--round > .bk-bl,
.hud-btn--round > .bk-br { display: none; }
#compass.north-up > .bk-bl,
#compass.north-up > .bk-br { border-color: var(--cd-c-warn); }
#lite-toggle.active > .bk-bl,
#lite-toggle.active > .bk-br { border-color: var(--cd-c-warn); }
#rechoose-route > .bk-bl,
#rechoose-route > .bk-br { border-color: var(--cd-accent); }

#hud-status > .bk-bl,
#hud-status > .bk-br {
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
  transition: border-color var(--cd-dur-fast) var(--cd-ease);
}
#hud-status > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-text-mute);
  border-left: 1px solid var(--cd-text-mute);
}
#hud-status > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-text-mute);
  border-right: 1px solid var(--cd-text-mute);
}
#hud-status::before,
#hud-status::after {
  border-color: var(--cd-text-mute);
}
#hud-status[aria-expanded="true"]::before,
#hud-status[aria-expanded="true"]::after,
#hud-status[aria-expanded="true"] > .bk-bl,
#hud-status[aria-expanded="true"] > .bk-br {
  border-color: var(--cd-accent);
}

/* ============================================================
   Alerts legend · live-feed breakdown
   ============================================================ */
#sources-panel {
  position: fixed;
  top: 70px;     /* directly under #hud-status (top:16 + height:44 + 10 gap) */
  right: 16px;
  z-index: 7;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--cd-glass);
  backdrop-filter: var(--cd-glass-blur);
  -webkit-backdrop-filter: var(--cd-glass-blur);
  border: 1px solid var(--cd-line-strong);
  box-shadow: var(--cd-shadow-lg);
}
#sources-panel::before,
#sources-panel::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#sources-panel::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#sources-panel::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}
#sources-panel > .bk-bl,
#sources-panel > .bk-br {
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#sources-panel > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#sources-panel > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}

.sources-panel__head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--cd-line);
}
.sources-panel__eyebrow {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-accent);
}
.sources-panel__summary {
  margin-top: 4px;
  font-family: var(--cd-font-ui);
  font-size: 14px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.01em;
  color: var(--cd-text);
}

.sources-panel__rows {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sources-panel__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cd-line);
}
.sources-panel__row:last-child { border-bottom: 0; }
.sources-panel__row > .sources-panel__body { min-width: 0; }
.sources-panel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cd-text-mute);
  /* status colour set inline by JS */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.sources-panel__name {
  display: block;
  font-family: var(--cd-font-ui);
  font-size: 13px;
  font-weight: var(--cd-fw-semi);
  letter-spacing: -0.01em;
  color: var(--cd-text);
}
.sources-panel__sub {
  display: block;
  margin-top: 1px;
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--cd-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sources-panel__count {
  font-family: var(--cd-font-mono);
  font-size: 11px;
  font-weight: var(--cd-fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--cd-text);
}
.sources-panel__count[data-status="degraded"]        { color: #f1c40f; }
.sources-panel__count[data-status="highly_degraded"] { color: #e67e22; }
.sources-panel__count[data-status="offline"]         { color: #e74c3c; }
.sources-panel__count[data-status="online"]          { color: var(--cd-text-mute); }
.sources-panel__foot a {
  color: var(--cd-accent);
  text-decoration: none;
}
.sources-panel__foot a:hover { text-decoration: underline; }

.sources-panel__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  background: var(--cd-bg-alt);
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
}

#speed-pill > .bk-bl,
#speed-pill > .bk-br {
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
}
#speed-pill > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#speed-pill > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}

#nav-banner > .bk-bl,
#nav-banner > .bk-br {
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#nav-banner > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1.2px solid var(--cd-accent);
  border-left: 1.2px solid var(--cd-accent);
}
#nav-banner > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1.2px solid var(--cd-accent);
  border-right: 1.2px solid var(--cd-accent);
}

#nav-eta > .bk-bl,
#nav-eta > .bk-br {
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
}
#nav-eta > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#nav-eta > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}

/* Toast — accent-toned, all four corners */
#nav-toast::before,
#nav-toast::after,
#nav-toast > .bk-bl,
#nav-toast > .bk-br {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
}
#nav-toast::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#nav-toast::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}
#nav-toast > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#nav-toast > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}

/* Map context menu — mute color (subtle, not accent) */
#map-context-menu::before,
#map-context-menu::after,
#map-context-menu > .bk-bl,
#map-context-menu > .bk-br {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
}
#map-context-menu::before {
  top: 0; left: 0;
  border-top: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#map-context-menu::after {
  top: 0; right: 0;
  border-top: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}
#map-context-menu > .bk-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-left: 1px solid var(--cd-accent);
}
#map-context-menu > .bk-br {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--cd-accent);
  border-right: 1px solid var(--cd-accent);
}

/* ── ALL-5 charger filters ──────────────────────────────────────────────────
   Filter sheet + paywall reuse the ssheet vocabulary (header/body/field/tile/
   cta). Only the charger-specific pieces live here: the sheet frames, the
   tile grids, the network rows and the paywall swatch strip. */

#charger-filter-overlay,
#charger-paywall-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(14, 18, 24, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#charger-filter-sheet {
  position: relative;
  width: 100%;
  max-width: 680px;
  /* No text input in this sheet — the Tesla keyboard never opens, so it can
     use the full viewport height (unlike #save-fav-sheet's 50vh cap). */
  max-height: calc(100vh - 32px);
  background: var(--cd-bg-alt);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  display: flex;
  flex-direction: column;
}
#charger-filter-sheet .ssheet-body { overflow-y: auto; }
#charger-paywall-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--cd-bg-alt);
  border: 1px solid var(--cd-line-strong);
  color: var(--cd-text);
  display: flex;
  flex-direction: column;
}

/* Tile grids per axis. Tiles themselves are .ssheet-tile. */
.chf-grid { display: grid; gap: 8px; }
.chf-grid--4 { grid-template-columns: repeat(4, 1fr); }
.chf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.chf-grid--2 { grid-template-columns: 1fr 1fr; }
.chf-bolts { display: flex; gap: 2px; color: var(--cd-text-dim); }
.ssheet-tile.is-selected .chf-bolts { color: var(--cd-accent); }

/* Network rows — swatch + name + connector sub + state tag. */
.chf-nets { display: flex; flex-direction: column; gap: 6px; }
.chf-net {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  color: var(--cd-text);
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.chf-net.is-on {
  background: var(--cd-accent-soft);
  border-color: var(--cd-accent);
}
.chf-net__swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex: none;
}
.chf-net__name {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  min-width: 0;
}
.chf-net__sub,
.chf-net__state {
  font-family: var(--cd-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cd-text-mute);
  white-space: nowrap;
}
.chf-net.is-on .chf-net__state { color: var(--cd-accent); }
.chf-net.is-locked .chf-net__state {
  color: var(--cd-c-warn);
  border: 1px solid var(--cd-c-warn);
  padding: 4px 8px;
}

/* Paywall swatch strip — one square per network in the current market. */
.chp-swatches { display: flex; gap: 4px; }
.chp-swatches > span {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.chp-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cd-text);
}

/* Settings row: full-width Edit-filters button. */
.setting-wide-btn { width: 100%; }

/* Charger detail popup bits (rendered inside .alert-popup). */
.chpopup-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  vertical-align: baseline;
}
.chpopup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.chpopup-chip {
  font-family: var(--cd-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 7px;
  border: 1px solid var(--cd-line);
  color: var(--cd-text-mute);
  white-space: nowrap;
}
.chpopup-chip.is-ok {
  border-color: var(--cd-accent);
  color: var(--cd-accent);
}
.chpopup-nav {
  width: 100%;
  margin-top: 10px;
}