/* ═══════════════════════════════════════════════════════════════════════════
   RoadAssist — design system
   ───────────────────────────────────────────────────────────────────────────
   One token layer shared by every web surface (citizen app, authority
   dashboard, showcase, map). Ships light AND dark: `:root` carries the light
   palette, the dark palette is redefined under `prefers-color-scheme` (guarded
   so an explicit light choice wins) and again under [data-theme="dark"] so the
   in-app toggle overrides the system in both directions.

   Nothing here is page-specific. Page files add layout on top of these tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--text); }

/* ── tokens · light (default) ────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg:            #f6f5f2;
  --bg-tint-a:     rgba(227, 185, 106, 0.14);
  --bg-tint-b:     rgba(42, 107, 212, 0.10);
  --bg-tint-c:     rgba(217, 45, 60, 0.07);

  --surface:       #ffffff;
  --surface-2:     #f2f0ea;
  --surface-3:     #e7e4dc;
  --glass:         rgba(255, 255, 255, 0.74);
  --glass-strong:  rgba(255, 255, 255, 0.92);

  --line:          rgba(20, 21, 26, 0.10);
  --line-2:        rgba(20, 21, 26, 0.16);
  --line-brand:    rgba(168, 122, 34, 0.30);

  --text:          #14151a;
  --text-2:        #4c4e58;
  --text-3:        #80838e;

  /* Primary action: high-contrast ink, not the brand gold. Gold stays the
     accent so it keeps its meaning instead of becoming the button colour. */
  --ink:           #16171c;
  --ink-on:        #ffffff;
  --ink-hover:     #2a2c34;

  --brand:         #a87a22;   /* gold, darkened to hold contrast on paper */
  --brand-fill:    #e3b96a;   /* decorative gold — always paired with dark ink */
  --brand-ink:     #1a1408;   /* text on --brand-fill */
  --brand-soft:    rgba(168, 122, 34, 0.11);

  --red:           #d42233;   --red-soft:   rgba(212, 34, 51, 0.10);
  --green:         #0f7a52;   --green-soft: rgba(15, 122, 82, 0.10);
  --amber:         #a86a08;   --amber-soft: rgba(168, 106, 8, 0.12);
  --blue:          #2560c9;   --blue-soft:  rgba(37, 96, 201, 0.10);

  --focus:         #2560c9;
  --sheet-scrim:   rgba(14, 15, 20, 0.42);

  --shadow-1: 0 1px 2px rgba(16,18,24,.05), 0 2px 6px rgba(16,18,24,.05);
  --shadow-2: 0 2px 4px rgba(16,18,24,.05), 0 10px 26px rgba(16,18,24,.08);
  --shadow-3: 0 6px 16px rgba(16,18,24,.08), 0 28px 64px rgba(16,18,24,.14);
  --shadow-brand: 0 8px 26px rgba(168,122,34,.26);

  /* type */
  --display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;

  /* spacing — a 4px base, the only ladder any surface should climb.
     Every page had been inventing its own padding, which is why a card on
     raksha.html and the same card on app.html did not line up. Use these
     rather than a fresh px value; if a gap needs something not on the ladder,
     the ladder is probably the wrong answer. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px; --s-9: 80px;

  /* motion — one expo-out curve for travel, one spring for press */
  --ease:    cubic-bezier(0.16, 1, 0.30, 1);
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-1: 140ms; --t-2: 240ms; --t-3: 420ms; --t-4: 680ms;
}

/* ── tokens · dark ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #08090c;
    --bg-tint-a:     rgba(227, 185, 106, 0.16);
    --bg-tint-b:     rgba(91, 157, 255, 0.13);
    --bg-tint-c:     rgba(255, 90, 102, 0.09);

    --surface:       #101218;
    --surface-2:     #171a22;
    --surface-3:     #1f232d;
    --glass:         rgba(14, 16, 22, 0.72);
    --glass-strong:  rgba(10, 12, 17, 0.92);

    --line:          rgba(240, 238, 232, 0.10);
    --line-2:        rgba(240, 238, 232, 0.17);
    --line-brand:    rgba(227, 185, 106, 0.30);

    --text:          #f2f0ea;
    --text-2:        #b2b5bf;
    --text-3:        #7c8090;

    --ink:           #f2f0ea;
    --ink-on:        #0b0c10;
    --ink-hover:     #ffffff;

    --brand:         #e3b96a;
    --brand-fill:    #e3b96a;
    --brand-ink:     #14110a;
    --brand-soft:    rgba(227, 185, 106, 0.13);

    --red:           #ff5a66;   --red-soft:   rgba(255, 90, 102, 0.13);
    --green:         #35d08a;   --green-soft: rgba(53, 208, 138, 0.13);
    --amber:         #ffb454;   --amber-soft: rgba(255, 180, 84, 0.14);
    --blue:          #5b9dff;   --blue-soft:  rgba(91, 157, 255, 0.13);

    --focus:         #7fb2ff;
    --sheet-scrim:   rgba(0, 0, 0, 0.62);

    --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.34);
    --shadow-2: 0 2px 6px rgba(0,0,0,.44), 0 14px 34px rgba(0,0,0,.46);
    --shadow-3: 0 10px 30px rgba(0,0,0,.52), 0 34px 80px rgba(0,0,0,.62);
    --shadow-brand: 0 10px 34px rgba(227,185,106,.24);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #08090c;
  --bg-tint-a:     rgba(227, 185, 106, 0.16);
  --bg-tint-b:     rgba(91, 157, 255, 0.13);
  --bg-tint-c:     rgba(255, 90, 102, 0.09);

  --surface:       #101218;
  --surface-2:     #171a22;
  --surface-3:     #1f232d;
  --glass:         rgba(14, 16, 22, 0.72);
  --glass-strong:  rgba(10, 12, 17, 0.92);

  --line:          rgba(240, 238, 232, 0.10);
  --line-2:        rgba(240, 238, 232, 0.17);
  --line-brand:    rgba(227, 185, 106, 0.30);

  --text:          #f2f0ea;
  --text-2:        #b2b5bf;
  --text-3:        #7c8090;

  --ink:           #f2f0ea;
  --ink-on:        #0b0c10;
  --ink-hover:     #ffffff;

  --brand:         #e3b96a;
  --brand-fill:    #e3b96a;
  --brand-ink:     #14110a;
  --brand-soft:    rgba(227, 185, 106, 0.13);

  --red:           #ff5a66;   --red-soft:   rgba(255, 90, 102, 0.13);
  --green:         #35d08a;   --green-soft: rgba(53, 208, 138, 0.13);
  --amber:         #ffb454;   --amber-soft: rgba(255, 180, 84, 0.14);
  --blue:          #5b9dff;   --blue-soft:  rgba(91, 157, 255, 0.13);

  --focus:         #7fb2ff;
  --sheet-scrim:   rgba(0, 0, 0, 0.62);

  --shadow-1: 0 1px 2px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.34);
  --shadow-2: 0 2px 6px rgba(0,0,0,.44), 0 14px 34px rgba(0,0,0,.46);
  --shadow-3: 0 10px 30px rgba(0,0,0,.52), 0 34px 80px rgba(0,0,0,.62);
  --shadow-brand: 0 10px 34px rgba(227,185,106,.24);
}

/* ── page ground ─────────────────────────────────────────────────────────── */
html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--sans); font-weight: 450; line-height: 1.55; }

/* Ambient aurora. One fixed, non-interactive layer — cheaper than gradients on
   scrolling elements and it never repaints during a scroll. */
.aurora {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58vw 44vh at 12% -8%,  var(--bg-tint-a), transparent 62%),
    radial-gradient(52vw 42vh at 92% 6%,   var(--bg-tint-b), transparent 60%),
    radial-gradient(64vw 48vh at 50% 108%, var(--bg-tint-c), transparent 66%);
  transition: background var(--t-4) var(--ease);
}

/* ── brand mark ──────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand .mark { width: 26px; height: 26px; flex: none; }
.brand .wordmark {
  font-family: var(--display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
}
.brand .wordmark i { font-style: normal; color: var(--brand); }

/* ── type ────────────────────────────────────────────────────────────────── */
.display {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.06; font-size: clamp(28px, 3.4vw, 40px);
}
/* Space Grotesk ships upright only, so emphasis is colour, not a faked slant. */
.display em { font-style: normal; color: var(--brand); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.title  { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.sub    { color: var(--text-2); font-size: 13.5px; line-height: 1.68; }
.hint   { color: var(--text-3); font-size: 12px; line-height: 1.6; }
.meta   { color: var(--text-2); font-size: 12.5px; line-height: 1.6; }
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--ink-on); --btn-bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; padding: 14px 20px; border-radius: var(--r-full);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-size: 14px; font-weight: 650; letter-spacing: -0.005em;
  transition: transform var(--t-2) var(--spring), box-shadow var(--t-2) var(--ease),
              background var(--t-1) linear, opacity var(--t-2) var(--ease), filter var(--t-1) linear;
  box-shadow: var(--shadow-1); overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.btn:hover  { box-shadow: var(--shadow-2); filter: brightness(1.07); }
.btn:active { transform: scale(0.972); box-shadow: var(--shadow-1); }
.btn:disabled { opacity: 0.45; pointer-events: none; box-shadow: none; }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn.ghost  { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); box-shadow: none; filter: none; }
.btn.soft   { --btn-bg: var(--surface-2); --btn-fg: var(--text); --btn-bd: var(--line); box-shadow: none; }
.btn.gold   { --btn-bg: var(--brand-fill); --btn-fg: var(--brand-ink); box-shadow: var(--shadow-brand); }
.btn.danger { --btn-bg: var(--red); --btn-fg: #fff; }
.btn.sm     { padding: 9px 15px; font-size: 12.5px; width: auto; }
.btn.auto   { width: auto; }

/* Loading state — the label stays put and a ring spins over it, so the button
   never changes size mid-press. */
.btn.is-busy { color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--btn-fg); animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; gap: 9px; }
.btn-row .btn { flex: 1; }

/* chips (inline command / filter pills) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; font-weight: 550; color: var(--text-2);
  transition: all var(--t-2) var(--ease), transform var(--t-2) var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover  { border-color: var(--line-brand); color: var(--text); background: var(--surface-2); }
.chip:active { transform: scale(0.94); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--ink); color: var(--ink-on); border-color: transparent;
}
.chip.warn:hover { border-color: var(--red); color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── surfaces ────────────────────────────────────────────────────────────── */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 17px; box-shadow: var(--shadow-1);
  transition: transform var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease),
              border-color var(--t-2) var(--ease);
}
.card + .card, .stack > * + * { margin-top: 13px; }
.card.lift:hover  { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card.lift:active { transform: translateY(-1px) scale(0.994); }
.card.tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.card.flush { padding: 0; overflow: hidden; }

/* A card that carries the brand — used once per screen, for the thing that
   matters most. */
.card.feature {
  background:
    linear-gradient(150deg, var(--brand-soft), transparent 58%),
    var(--surface);
  border-color: var(--line-brand);
}

.row {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  transition: background var(--t-1) linear;
}
.row:last-child { border-bottom: 0; }
.row.tap { cursor: pointer; }
.row.tap:hover  { background: var(--surface-2); }
.row.tap:active { background: var(--surface-3); }
.row .grow { flex: 1; min-width: 0; }
.row .grow b { display: block; font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.row .grow small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #f7e4bb, var(--brand-fill) 58%, #9a7128);
  color: var(--brand-ink); font-family: var(--display); font-size: 17px; font-weight: 600;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), var(--shadow-1);
}
.avatar.blue { background: radial-gradient(circle at 34% 28%, #cfe1ff, #5b9dff 58%, #2b5fb8); color: #071224; }

/* ── status pills ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.bare::before { display: none; }
.pill.ok   { background: var(--green-soft); color: var(--green); border-color: transparent; }
.pill.warn { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill.bad  { background: var(--red-soft);   color: var(--red);   border-color: transparent; }
.pill.info { background: var(--blue-soft);  color: var(--blue);  border-color: transparent; }
.pill.gold { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ── form fields ─────────────────────────────────────────────────────────── */
.field { display: block; margin-top: 14px; }
.field > span {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; outline: none;
  transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease),
              box-shadow var(--t-2) var(--ease);
}
.field textarea { resize: vertical; min-height: 78px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.field select {
  appearance: none; cursor: pointer; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }

/* segmented control */
.seg {
  display: flex; gap: 3px; padding: 3px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
}
.seg button {
  flex: 1; padding: 9px 10px; border-radius: var(--r-full);
  font-size: 12.5px; font-weight: 600; color: var(--text-3);
  transition: color var(--t-2) var(--ease), background var(--t-2) var(--ease),
              transform var(--t-2) var(--spring);
}
.seg button:active { transform: scale(0.96); }
.seg button[aria-selected="true"] {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
}

/* ── skeletons ───────────────────────────────────────────────────────────── */
.sk { border-radius: var(--r-xs); background: var(--surface-2); position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  animation: shimmer 1.35s var(--ease) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk.line { height: 11px; margin-top: 9px; }
.sk.line.w70 { width: 70%; } .sk.line.w45 { width: 45%; }

/* ── empty state ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: 40px 22px; color: var(--text-3); }
.empty svg { width: 34px; height: 34px; margin: 0 auto 12px; opacity: 0.4; }
.empty b { display: block; color: var(--text-2); font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; z-index: 90; max-width: min(88vw, 380px);
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translate(-50%, 18px) scale(0.96);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 17px; border-radius: var(--r-full);
  background: var(--glass-strong); border: 1px solid var(--line-2);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: var(--text); font-size: 13.5px; font-weight: 550; line-height: 1.45;
  box-shadow: var(--shadow-3); opacity: 0; pointer-events: none;
  transition: opacity var(--t-2) var(--ease), transform var(--t-3) var(--spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft);
}
.toast.bad::before  { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft); }
.toast.ok::before   { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

/* ── bottom sheet ────────────────────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: var(--sheet-scrim);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity var(--t-2) var(--ease);
}
.scrim.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 70; left: 50%; bottom: 0; width: min(100%, 430px);
  transform: translate(-50%, 102%);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3);
  padding: 10px 20px calc(26px + env(safe-area-inset-bottom));
  max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
  transition: transform var(--t-3) var(--ease);
}
.sheet.show { transform: translate(-50%, 0); }
.sheet::before {
  content: ""; display: block; width: 38px; height: 4px; border-radius: 2px;
  background: var(--line-2); margin: 4px auto 16px;
}

/* ── theme toggle ────────────────────────────────────────────────────────── */
.theme-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  transition: transform var(--t-3) var(--spring), color var(--t-2) var(--ease),
              border-color var(--t-2) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-btn:hover  { color: var(--brand); border-color: var(--line-brand); }
.theme-btn:active { transform: scale(0.9) rotate(-18deg); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .sun { display: none; }
.theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun  { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}
:root[data-theme="dark"] .theme-btn .sun  { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }

/* ── entrance choreography ───────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--t-3) var(--ease) both; }
/* Staggered children — the screen assembles instead of appearing all at once.
   Six steps is enough; anything past that shares the last delay. */
.stagger > *          { animation: rise var(--t-3) var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 62ms; }
.stagger > *:nth-child(3) { animation-delay: 104ms; }
.stagger > *:nth-child(4) { animation-delay: 146ms; }
.stagger > *:nth-child(5) { animation-delay: 188ms; }
.stagger > *:nth-child(n+6) { animation-delay: 226ms; }

/* ── scrollbars ──────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── utilities ───────────────────────────────────────────────────────────── */
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ── depth ───────────────────────────────────────────────────────────────
   The 3D layer every surface shares: a road that runs toward the viewer under
   the whole page, light that drifts across it, cards that tilt under a mouse,
   and the beacon on each sign-in screen. All of it is CSS and inline SVG —
   nothing is fetched, so it survives off-grid exactly as the rest of this file
   does. It is decoration and nothing else, so the reduced-motion block below
   freezes every animation here, and depth.js only tilts for a real mouse. */
:root {
  --road-grid: rgba(20, 21, 26, 0.09);
  --road-lane: rgba(168, 122, 34, 0.40);
  --beacon:    rgba(15, 122, 82, 0.62);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --road-grid: rgba(150, 172, 214, 0.13);
    --road-lane: rgba(240, 180, 41, 0.38);
    --beacon:    rgba(31, 199, 126, 0.70);
  }
}
:root[data-theme="dark"] {
  --road-grid: rgba(150, 172, 214, 0.13);
  --road-lane: rgba(240, 180, 41, 0.38);
  --beacon:    rgba(31, 199, 126, 0.70);
}

/* The ground colour belongs to the root alone. With body painting it too, the
   body's background covered the fixed .aurora layer and the aurora never
   showed on any page. */
body { background: transparent; }

/* Light that drifts. A transform, so the compositor runs it without repaints. */
.aurora::before {
  content: ""; position: absolute; inset: -18%;
  background:
    radial-gradient(38% 32% at 28% 30%, var(--bg-tint-a), transparent 70%),
    radial-gradient(34% 30% at 76% 58%, var(--bg-tint-b), transparent 70%);
  animation: ra-drift 26s ease-in-out infinite alternate;
}
@keyframes ra-drift { to { transform: translate3d(5%, 4%, 0) rotate(7deg) scale(1.08); } }

/* The road. .road is the plane, tipped back in perspective and faded toward
   the horizon; its <i> carries the grid and the lane and slides one cell per
   loop, which is seamless because every layer repeats on that cell. Sliding
   the child rather than the background keeps it off the paint path. */
/* The eye sits above the road (perspective-origin), so the plane runs from
   the bottom of the screen to a horizon a little above the middle, and the
   cells shrink toward it the way a real road does. */
.aurora { perspective: 340px; perspective-origin: 50% 36%; }
.aurora .road {
  position: absolute; left: -60%; right: -60%; bottom: 0; height: 115vh; overflow: hidden;
  transform: rotateX(72deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 34%, transparent 72%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 34%, transparent 72%);
}
.aurora .road i {
  position: absolute; left: 0; right: 0; top: -160px; bottom: 0;
  background:
    linear-gradient(var(--road-lane) 0 46%, transparent 46%) 50% 0 / 10px 160px repeat-y,
    linear-gradient(90deg, var(--road-grid) 1.5px, transparent 1.5px) 50% 0 / 80px 80px,
    linear-gradient(var(--road-grid) 1.5px, transparent 1.5px) 0 0 / 80px 80px;
  animation: ra-road 3s linear infinite;
}
@keyframes ra-road { to { transform: translate3d(0, 160px, 0); } }

/* Cards that tilt toward the pointer (depth.js sets --rx/--ry/--mx/--my and
   [data-tilting] while a mouse is over one). The glare is the light source the
   aurora implies, reflected off the tilted face. */
[data-tilting] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px) !important;
  transition: transform 90ms linear, box-shadow var(--t-3) var(--ease) !important;
  box-shadow: var(--shadow-3) !important;
}
[data-tilting]:not(.feature) {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.07), transparent 60%);
}

/* Primary buttons get a lit top edge, so they read as raised off the page. */
.btn:not(.ghost):not(.soft) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 rgba(0,0,0,.14), var(--shadow-1);
}
.btn:not(.ghost):not(.soft):hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.14), var(--shadow-2);
}
.btn:not(.ghost):not(.soft):active { transform: translateY(1px) scale(0.985); }
.card { box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-1); }
.btn.gold:not(.ghost):not(.soft) { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), var(--shadow-brand); }
.btn:not(.ghost):not(.soft):disabled { box-shadow: none; }

/* The sign-in beacon: the brand shield hovering over a patch of road, sending
   the same signal the logo draws — help that still gets through. */
.emblem3d { position: relative; width: 150px; height: 138px; margin: 0 0 14px -8px; perspective: 520px; }
.emblem3d .e-floor {
  position: absolute; left: 50%; bottom: 4px; width: 150px; height: 150px; margin-left: -75px;
  transform: rotateX(76deg); transform-style: preserve-3d;
}
.emblem3d .e-floor::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
.emblem3d .e-floor i {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--beacon);
  opacity: 0; animation: ra-ring 3s cubic-bezier(.2,.7,.3,1) infinite;
}
.emblem3d .e-floor i:nth-child(2) { animation-delay: 1s; }
.emblem3d .e-floor i:nth-child(3) { animation-delay: 2s; }
@keyframes ra-ring { 0% { transform: scale(.18); opacity: .95; } 100% { transform: scale(1.2); opacity: 0; } }
.emblem3d .e-mark {
  position: absolute; left: 50%; top: 0; width: 92px; height: 92px; margin-left: -46px;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.34)) drop-shadow(0 0 26px rgba(240,180,41,.28));
  animation: ra-float 6s ease-in-out infinite;
}
@keyframes ra-float {
  0%, 100% { transform: translateY(0) rotateY(-16deg) rotateX(4deg); }
  50%      { transform: translateY(-8px) rotateY(16deg) rotateX(-2deg); }
}
.emblem3d.sm { width: 104px; height: 96px; margin: -4px 0 6px -6px; }
.emblem3d.sm .e-floor { width: 104px; height: 104px; margin-left: -52px; }
.emblem3d.sm .e-mark { width: 62px; height: 62px; margin-left: -31px; }

/* Sign in with email (email-signin.js): a quiet second path under the phone one. */
.em-signin { margin-top: 14px; }
.em-signin .em-note { margin-top: 10px; }

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ── "Near you" card (near.js): nearest help from open map data ─────────── */
.near-card { padding: 16px 18px; }
.near-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.near-src { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.near-addr { margin: 8px 0 0; font-weight: 600; line-height: 1.45; }
.near-demo { margin: 4px 0 0; }
.near-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.near-row { display: grid; grid-template-columns: 7.2em 1fr; gap: 10px; font-size: 13px; line-height: 1.45; }
.near-k { color: var(--text-3); font-weight: 600; }
.near-v small { display: block; }
.near-foot { margin: 12px 0 0; font-size: 11.5px; }
.road-eta { color: var(--text-2); }

/* ── emergency numbers (emergency-numbers.js): tap to call, tap to text ──── */
.em-panel { margin-top: 12px; display: grid; gap: 10px; }
.em-call { font-size: 16px; padding: 16px 20px; }
.em-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.em-list a {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  font-size: 12px; line-height: 1.35; color: var(--text-2);
}
.em-list a b { color: var(--text); font-size: 14px; font-weight: 700; flex: none; }
.em-note { margin: -4px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Premium layer (Oct 2026) — ADDITIVE ONLY
   ───────────────────────────────────────────────────────────────────────────
   New tokens and opt-in classes. Nothing above this line is renamed, removed
   or given a new value, so a page that uses none of the names below renders
   exactly as it did. app.html (via app.css) is the first user; any page may
   opt in by name.

   Motion  --dur-1/2/3 (120/200/320 ms) with --ease-standard, --ease-enter,
           --ease-exit, --ease-sheet (iOS-style sheet curve, no overshoot)
           and --ease-press (a small spring for press-and-release).
   Type    --fs-2xs … --fs-3xl, --lh-*, --tracking-*.
   Depth   --hl (a lit top edge) and --elev-1/2/3 (lit edge + shadow ladder).
   Glass   --glass-blur, --glass-sat, --glass-edge, and the .glass class with
           an opaque fallback where backdrop-filter is missing.
   AA text --aa-text-3, --aa-amber, --aa-red, --aa-brand: the same hues pushed
           to ≥ 4.5:1 for small text on --bg, --surface and their soft tints.
           Opt in per page with e.g. `body { --text-3: var(--aa-text-3); }`.
   Classes .glass .elev-1/2/3 .tnum .balance .pretty .press .reveal .tilt3d
           .tap-target, and [data-depth="hero"] > .card (gyro/pointer tilt
           driven by depth.js). html.ra-lite (set by depth.js on Save-Data,
           low memory or a low battery) switches the costly effects off.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit:     cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-sheet:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-press:    cubic-bezier(0.34, 1.4, 0.64, 1);
  --stagger-step:  45ms;

  --fs-2xs: 10.5px; --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-lg: 17px;
  --fs-xl: 20px;    --fs-2xl: 26px; --fs-3xl: clamp(30px, 8.4vw, 40px);
  --lh-tight: 1.06; --lh-snug: 1.25; --lh-body: 1.55; --lh-relaxed: 1.68;
  --tracking-display: -0.028em; --tracking-title: -0.014em; --tracking-caps: 0.14em;

  --hl:        inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --hl-strong: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  --elev-1: var(--hl), var(--shadow-1);
  --elev-2: var(--hl), var(--shadow-2);
  --elev-3: var(--hl), var(--shadow-3);

  --glass-blur: 20px; --glass-sat: 1.7;
  --glass-edge: rgba(255, 255, 255, 0.6);

  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--focus) 28%, transparent);
  --tap: 44px;
  --r-2xl: 40px;
  --safe-t: env(safe-area-inset-top, 0px);    --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);

  --aa-text-3: #626570;   /* 5.1:1 on --surface-2, 5.3:1 on --bg  (--text-3: 3.3–3.8) */
  --aa-amber:  #8f5a05;   /* 4.9:1 on --amber-soft                 (--amber: 3.8)     */
  --aa-red:    #be1b2b;   /* 5.3:1 on --red-soft, white on it 6.2  (--red: 4.4)       */
  --aa-brand:  #86600f;   /* 4.6:1 on --brand-soft, 5.2:1 on --bg  (--brand: 3.5)     */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl:        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --hl-strong: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --glass-edge: rgba(255, 255, 255, 0.08);
    --aa-text-3: #868a99;  /* 5.1:1 on --surface-2 (--text-3: 4.4) */
    --aa-amber:  #ffb454;
    --aa-red:    #ff5a66;
    --aa-brand:  #e3b96a;
  }
}
:root[data-theme="dark"] {
  --hl:        inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hl-strong: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --aa-text-3: #868a99;
  --aa-amber:  #ffb454;
  --aa-red:    #ff5a66;
  --aa-brand:  #e3b96a;
}

/* Frosted panel. Without backdrop-filter it falls back to the opaque glass. */
.glass {
  background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--elev-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}
.elev-1 { box-shadow: var(--elev-1); }
.elev-2 { box-shadow: var(--elev-2); }
.elev-3 { box-shadow: var(--elev-3); }

.tnum    { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }
.pretty  { text-wrap: pretty; }
.tap-target { min-width: var(--tap); min-height: var(--tap); }

/* Press feedback: a quick press-in, a springy release. */
.press { transition: transform var(--dur-2) var(--ease-press); -webkit-tap-highlight-color: transparent; }
.press:active { transform: scale(0.97); transition-duration: var(--dur-1); transition-timing-function: var(--ease-standard); }

/* Staggered reveal for lists rendered after load. Each child fades up once
   when it is inserted; eight steps, then the rest share the last delay. */
@keyframes ra-reveal { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.reveal > * { animation: ra-reveal var(--dur-3) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger-step)); }
.reveal > :nth-child(2) { --i: 1; } .reveal > :nth-child(3) { --i: 2; } .reveal > :nth-child(4) { --i: 3; }
.reveal > :nth-child(5) { --i: 4; } .reveal > :nth-child(6) { --i: 5; } .reveal > :nth-child(7) { --i: 6; }
.reveal > :nth-child(n+8) { --i: 7; }

/* Depth for a hero surface. depth.js writes --tx/--ty from the device's tilt
   (touch screens, where the browser allows it without a prompt); a mouse uses
   the [data-tilting] rule above instead. Transform only, so it composites. */
.tilt3d, [data-depth="hero"] > .card {
  transform: perspective(1100px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--t-3) var(--ease),
              border-color var(--t-2) var(--ease);
}

/* Low-power mode: no blur, no drifting light, no moving road, no tilt. */
html.ra-lite .glass, html.ra-lite .toast, html.ra-lite .scrim {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.ra-lite .glass { background: var(--glass-strong); }
html.ra-lite .aurora::before, html.ra-lite .aurora .road i { animation: none; }
html.ra-lite .tilt3d, html.ra-lite [data-depth="hero"] > .card { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Volt theme (Oct 2026) — the citizen app's palette, OPT-IN
   ───────────────────────────────────────────────────────────────────────────
   Near-black ground, 1 px hairline borders and ONE chartreuse accent, used as
   a fill behind dark type (active chip, active tab, arrow buttons) and never
   as small text on a light surface. Scoped to <html class="volt">, so every
   other page that loads this file keeps the palette above. Listed last so it
   wins the ties with the blocks above; its dark blocks carry one more class
   than theirs, so an explicit light or dark choice still wins both ways.

   Measured (WCAG 2.x relative luminance), dark / light:
     --text   17.7 / 16.9 on --bg      --text-3  5.4 / 5.5 on --surface-2
     --text-2  8.7 /  7.8 on --surface-2
     --brand  14.9 lime on --bg  /  6.5 olive #4c5f00 on --bg (7.1 on white)
     --brand-ink #10130a on --brand-fill #c8f031: 14.3
     --ink-on on --ink (primary button): 14.3 dark (lime) / 18.5 light (black)
   Red, green, amber and blue keep the values above: the emergency palette
   outranks the theme, and the Call 112 gradient in app.css is fixed.
   ═══════════════════════════════════════════════════════════════════════════ */
:root.volt {
  --bg:            #f4f5ef;
  --bg-tint-a:     rgba(150, 190, 20, 0.10);
  --bg-tint-b:     rgba(120, 140, 90, 0.06);
  --bg-tint-c:     rgba(217, 45, 60, 0.05);

  --surface:       #ffffff;
  --surface-2:     #eef0e7;
  --surface-3:     #e3e6da;
  --glass:         rgba(244, 245, 239, 0.80);
  --glass-strong:  rgba(244, 245, 239, 0.94);

  --line:          #e0e3d7;
  --line-2:        #cfd3c4;
  --line-brand:    rgba(76, 95, 0, 0.32);

  --text:          #12140f;
  --text-2:        #474b40;
  --text-3:        #5d6255;

  --ink:           #12140f;
  --ink-on:        #ffffff;
  --ink-hover:     #262a20;

  --brand:         #4c5f00;   /* olive: the accent as TEXT on a light surface */
  --brand-fill:    #c8f031;   /* chartreuse: the accent as a FILL */
  --brand-ink:     #10130a;   /* text and icons on --brand-fill */
  --brand-soft:    rgba(110, 140, 0, 0.12);
  --brand-edge:    #4c5f00;   /* the outline that keeps a lime fill visible on paper */

  --focus:         #4c5f00;
  --sheet-scrim:   rgba(12, 14, 9, 0.42);

  --shadow-1: 0 1px 2px rgba(18, 20, 15, .05), 0 2px 6px rgba(18, 20, 15, .04);
  --shadow-2: 0 2px 4px rgba(18, 20, 15, .05), 0 10px 26px rgba(18, 20, 15, .07);
  --shadow-3: 0 6px 16px rgba(18, 20, 15, .08), 0 28px 64px rgba(18, 20, 15, .13);
  --shadow-brand: 0 8px 22px rgba(110, 140, 0, .22);

  --road-grid: rgba(18, 20, 15, 0.06);
  --road-lane: rgba(110, 140, 0, 0.26);

  --aa-text-3: #5d6255;
  --aa-brand:  #4c5f00;
  --hl: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@media (prefers-color-scheme: dark) {
  :root.volt:not([data-theme="light"]) {
    --bg:            #0b0c0a;
    --bg-tint-a:     rgba(200, 240, 49, 0.05);
    --bg-tint-b:     rgba(200, 240, 49, 0.025);
    --bg-tint-c:     rgba(255, 90, 102, 0.05);
    --surface:       #151713;
    --surface-2:     #1b1d18;
    --surface-3:     #23261f;
    --glass:         rgba(11, 12, 10, 0.80);
    --glass-strong:  rgba(11, 12, 10, 0.95);
    --line:          #22251f;
    --line-2:        #30342b;
    --line-brand:    rgba(200, 240, 49, 0.30);
    --text:          #f2f4ec;
    --text-2:        #b6bbad;
    --text-3:        #8d9384;
    --ink:           #c8f031;
    --ink-on:        #10130a;
    --ink-hover:     #d4f55a;
    --brand:         #c8f031;
    --brand-fill:    #c8f031;
    --brand-ink:     #10130a;
    --brand-soft:    rgba(200, 240, 49, 0.12);
    --brand-edge:    transparent;
    --focus:         #c8f031;
    --sheet-scrim:   rgba(0, 0, 0, 0.66);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .40), 0 14px 30px rgba(0, 0, 0, .40);
    --shadow-3: 0 10px 30px rgba(0, 0, 0, .50), 0 34px 80px rgba(0, 0, 0, .60);
    --shadow-brand: 0 10px 28px rgba(200, 240, 49, .16);
    --road-grid: rgba(200, 220, 170, 0.05);
    --road-lane: rgba(200, 240, 49, 0.20);
    --aa-text-3: #8d9384;
    --aa-brand:  #c8f031;
    --hl: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }
}
:root.volt[data-theme="dark"] {
  --bg:            #0b0c0a;
  --bg-tint-a:     rgba(200, 240, 49, 0.05);
  --bg-tint-b:     rgba(200, 240, 49, 0.025);
  --bg-tint-c:     rgba(255, 90, 102, 0.05);
  --surface:       #151713;
  --surface-2:     #1b1d18;
  --surface-3:     #23261f;
  --glass:         rgba(11, 12, 10, 0.80);
  --glass-strong:  rgba(11, 12, 10, 0.95);
  --line:          #22251f;
  --line-2:        #30342b;
  --line-brand:    rgba(200, 240, 49, 0.30);
  --text:          #f2f4ec;
  --text-2:        #b6bbad;
  --text-3:        #8d9384;
  --ink:           #c8f031;
  --ink-on:        #10130a;
  --ink-hover:     #d4f55a;
  --brand:         #c8f031;
  --brand-fill:    #c8f031;
  --brand-ink:     #10130a;
  --brand-soft:    rgba(200, 240, 49, 0.12);
  --brand-edge:    transparent;
  --focus:         #c8f031;
  --sheet-scrim:   rgba(0, 0, 0, 0.66);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .40), 0 14px 30px rgba(0, 0, 0, .40);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, .50), 0 34px 80px rgba(0, 0, 0, .60);
  --shadow-brand: 0 10px 28px rgba(200, 240, 49, .16);
  --road-grid: rgba(200, 220, 170, 0.05);
  --road-lane: rgba(200, 240, 49, 0.20);
  --aa-text-3: #8d9384;
  --aa-brand:  #c8f031;
  --hl: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}