/* Direction: Tern Express — fleet-livery yellow, navy ink, a red swoosh, a chunky italic-friendly grotesque */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f8f6ee;
  --surface: #fcfbf7;
  --surface-2: #edebe5;
  --border: #d8d7d4;
  --border-strong: #b3b4b5;
  --ink: #131a31;
  --muted: #666973;
  --accent: #ffcc00;
  --accent-hover: #d9ad00;
  --accent-ink: #131a31;
  --accent-text: #8a5a00;
  --accent-strong: #846800;
  --accent-soft: #f9f0cd;
  --accent-border: #fbe383;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dde8d9;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f0e2d3;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f0dcd5;
  --danger-strong: #b91c1c;
  --chart-1: #ab8915;
  --chart-2: #419b5a;
  --chart-3: #158494;
  --chart-4: #6e87da;
  --chart-5: #9c5396;
  --chart-6: #d67161;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --x-band: #101733;
  --x-on-photo: #ffffff;
  --x-red: #d9261c;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #090c16;
  --surface: #22242d;
  --surface-2: #151822;
  --border: #2b2e37;
  --border-strong: #53555c;
  --ink: #f8f6ee;
  --muted: #989898;
  --accent: #ffcc00;
  --accent-hover: #ffd426;
  --accent-ink: #131a31;
  --accent-text: #ffcc00;
  --accent-strong: #ffcc00;
  --accent-soft: #3f3611;
  --accent-border: #78620c;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0c261f;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2f1c13;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #301017;
  --danger-strong: #d16969;
  --chart-1: #ffcc00;
  --chart-2: #56dd7f;
  --chart-3: #31cee6;
  --chart-4: #bab3ff;
  --chart-5: #f488ea;
  --chart-6: #fba394;
}

.route-line {
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 26px);
  height: 4px;
  background-size: 52px 4px;
  animation: route-move 1.4s linear infinite;
}
@keyframes route-move { to { background-position: 52px 0; } }
html.reduced-motion .route-line { animation: none; }
.tl-item { position: relative; padding-left: 1.75rem; padding-bottom: 1.25rem; }
.tl-item::before { content: ""; position: absolute; left: 0.3rem; top: 0.35rem; bottom: -0.35rem; width: 2px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-item::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.8rem; height: 0.8rem; border-radius: 999px; background: var(--border-strong); }
.tl-item:first-child::after { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.choice input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.choice input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* dark button for use on the yellow livery band */
.btn-dark { background: var(--x-band); color: var(--x-on-photo); border-color: var(--x-band); }
.btn-dark:hover { background: color-mix(in srgb, var(--x-band) 82%, var(--x-on-photo)); }
.btn-dark:focus-visible { outline: 3px solid var(--x-on-photo); outline-offset: 2px; }

/* the red swoosh from the Tern livery */
.swoosh { color: var(--x-red); }
.speed-lines { background-image: repeating-linear-gradient(0deg, var(--x-band) 0 3px, transparent 3px 9px); opacity: 0.12; }
.hero-photo { box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.45); }

/* live tracking: map, pins, route lines, history */
.track-map { height: 22rem; width: 100%; position: relative; z-index: 0; isolation: isolate; background: var(--surface-2); }
@media (min-width: 768px) { .track-map { height: 30rem; } }
.leaflet-container { font-family: var(--font-body); }
.pin { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; font: 700 13px/1 var(--font-body); border: 3px solid var(--canvas); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); color: var(--accent-ink); }
.pin-sm { width: 24px; height: 24px; font-size: 11px; border-width: 2px; box-shadow: none; outline: 1px solid var(--border); }
.pin-pickup { background: var(--accent); }
.pin-origin { background: var(--x-band); color: var(--x-on-photo); }
.pin-transit { background: var(--accent-text); color: var(--canvas); }
.pin-current { background: var(--x-red); color: var(--x-on-photo); }
.pin-dest { background: var(--ink); color: var(--canvas); }
.pin-driver { background: var(--canvas); border-color: var(--ink); animation: pin-pulse 1.8s ease-out infinite; }
@keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--x-red) 60%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
html.reduced-motion .pin-driver { animation: none; }
.line-sample { display: inline-block; width: 34px; height: 0; border-top: 4px solid; }
.line-planned { border-top-style: dashed; border-color: var(--muted); }
.line-traveled { border-color: var(--x-red); border-top-width: 5px; }
.live-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--x-red); animation: pin-pulse 1.8s ease-out infinite; }
html.reduced-motion .live-dot { animation: none; }
.ev-item { position: relative; padding-left: 1.75rem; padding-bottom: 1.25rem; }
.ev-item::before { content: ""; position: absolute; left: 0.3rem; top: 0.35rem; bottom: -0.35rem; width: 2px; background: var(--border); }
.ev-item:last-child::before { display: none; }
.ev-item::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.8rem; height: 0.8rem; border-radius: 999px; background: var(--border-strong); }
.ev-now::after { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
dialog.momo.wide { width: min(44rem, calc(100vw - 1rem)); }
#driver-root[data-sharing="1"] [data-gps-open] { display: none; }
#driver-root[data-sharing="0"] [data-gps-stop] { display: none; }

/* mobile money payment window: centred card on desktop, near full width on phones */
dialog.momo { width: min(30rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); overflow-y: auto; padding: 0; }
dialog.momo::backdrop { background: rgba(0, 0, 0, 0.55); }
.momo-sheet { padding: 1.25rem; }
@media (min-width: 640px) { .momo-sheet { padding: 1.75rem; } }
.momo-spin { width: 3.5rem; height: 3.5rem; border-radius: 999px; border: 4px solid var(--border); border-top-color: var(--accent); animation: momo-turn 0.9s linear infinite; }
@keyframes momo-turn { to { transform: rotate(360deg); } }
html.reduced-motion .momo-spin { animation: none; border-top-color: var(--accent-text); }