/* Mobile-first. Desktop is a later enhancement pass, not the design target. */

:root {
   /* Commit actions ("Hit the road") share ONE reserved color app-wide, so
      the go-button is unmistakable. Defaults to the brand green (its white
      text is contrast-tested in every theme); themes may override. */
   --hwy-commit: var(--hwy-green);
   --hwy-green: #0b3d2e;        /* button/badge background (white text on it) */
   --hwy-green-light: #12694f;
   --hwy-accent: #0b3d2e;       /* accent TEXT — diverges from --hwy-green in dark */
   --hwy-sand: #f4f1ea;         /* page background */
   --hwy-ink: #1b1b1b;
   --hwy-muted: #4b5563;
   --hwy-card: #ffffff;         /* cards, inputs, chips */
   /* Panels/menus/inputs alias the card + subtle tokens, so they follow every
      theme x mode override of those tokens (var() resolves at use time). */
   --hwy-surface: var(--hwy-card);
   --hwy-surface-2: var(--hwy-subtle);
   --hwy-line: #e3e0d8;
   --hwy-warn-bg: #fff4e5;
   --hwy-warn-ink: #8a5300;
   --hwy-error: #8a1c1c;        /* error text on cards */
   --hwy-header-bg: #0b3d2e; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: rgba(244, 241, 234, 0.97);
   --hwy-map-bg: #dfe6e2;
   --hwy-subtle: #eef3f0;
   --hwy-loud-bg: #fff7ec;
}

/* Dark palette — applied automatically for system dark (unless the user forced
   light) and when the user explicitly selects dark. Values keep text contrast
   >= 4.5:1 on the dark surfaces. */
@media (prefers-color-scheme: dark) {
   :root:not([data-mode]) {
      --hwy-green: #12694f;
      --hwy-green-light: #5cc9a0;
      --hwy-accent: #5cc9a0;
      --hwy-sand: #0f1419;
      --hwy-ink: #e7ebee;
      --hwy-muted: #a3adb9;
      --hwy-card: #1a2027;
      --hwy-line: #2c343d;
      --hwy-warn-bg: #3a2e15;
      --hwy-warn-ink: #f0c674;
      --hwy-error: #ff9a9a;
      --hwy-header-bg: #0c1115; --hwy-header-ink: #ffffff;
      --hwy-nav-bg: rgba(15, 20, 25, 0.97);
      --hwy-map-bg: #232b33;
      --hwy-subtle: #262f38;
      --hwy-loud-bg: #2b2013;
      color-scheme: dark;
   }
}
:root[data-mode="dark"] {
   --hwy-green: #12694f;
   --hwy-green-light: #5cc9a0;
   --hwy-accent: #5cc9a0;
   --hwy-sand: #0f1419;
   --hwy-ink: #e7ebee;
   --hwy-muted: #a3adb9;
   --hwy-card: #1a2027;
   --hwy-line: #2c343d;
   --hwy-warn-bg: #3a2e15;
   --hwy-warn-ink: #f0c674;
   --hwy-error: #ff9a9a;
   --hwy-header-bg: #0c1115; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: rgba(15, 20, 25, 0.97);
   --hwy-map-bg: #232b33;
   --hwy-subtle: #262f38;
   --hwy-loud-bg: #2b2013;
   color-scheme: dark;
}

* {
   box-sizing: border-box;
}

/* The hidden attribute must win over element display rules below. */
[hidden] {
   display: none !important;
}

/* Custom map markers (OverlayView DOM badges) — shared by both surfaces and
   theme-aware: hardcoded white broke every dark look, and the mobile page
   never had these styles at all. */

/* OverlayView positions .hwy-map-marker's top-left at the projected point via
   inline left/top — position:absolute is what makes those coordinates count.
   Without it (as on mobile before this lived here) every marker falls into
   static flow and stacks in a vertical line at the pane origin. */
.hwy-map-marker {
   position: absolute;
   pointer-events: none;
}

.hwy-map-marker-badge,
.hwy-map-marker-ring {
   transform: translate(-50%, -50%);
}

.hwy-map-marker-image {
   transform: translate(-26%, -90%);
}

.hwy-map-hit {
   pointer-events: auto;
}

.hwy-map-marker-image img {
   display: block;
}

.hwy-map-marker-ring {
   border-style: solid;
   border-radius: 50%;
   box-sizing: border-box;
}

.hwy-map-badge {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   border-style: solid;
   border-radius: 50%;
   background: var(--hwy-card, #fff);
   color: var(--hwy-ink, #1b1b1b);
   line-height: 1;
   cursor: pointer;
   user-select: none;
}

html, body {
   margin: 0;
   padding: 0;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   background: var(--hwy-sand);
   color: var(--hwy-ink);
   -webkit-text-size-adjust: 100%;
}

/* Buttons default (via the UA stylesheet) to black text, which fails on the dark
   themes' card backgrounds. Inherit the theme ink instead; buttons that need a
   specific colour (e.g. white on green) set it explicitly and still win. */
button {
   color: inherit;
}

/* Native <select> dropdown POPUPS don't inherit the control's styling: on
   several platforms the popup keeps its default white background while the
   options inherit the control's text colour — e.g. the toolbar's white-text
   route picker rendered white-on-white (invisible until hover). Lighthouse
   can't catch this: the popup is OS chrome, not DOM. Options must be styled
   explicitly, and card/ink is a guaranteed-AA pair in every theme. */
select option {
   background-color: var(--hwy-card, #ffffff);
   color: var(--hwy-ink, #16202a);
}

.api-counter {
   position: fixed;
   top: calc(env(safe-area-inset-top) + 8px);
   left: 8px;
   z-index: 1000;
   background: rgba(20, 20, 20, 0.82);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   padding: 5px 9px;
   border-radius: 8px;
   cursor: pointer;
   user-select: none;
}

.api-counter-breakdown {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   min-width: 210px;
   background: rgba(20, 20, 20, 0.94);
   border-radius: 8px;
   padding: 8px;
   font-weight: 400;
}

.api-counter-breakdown .api-row {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   padding: 3px 2px;
   font-size: 11px;
}

.api-counter-breakdown .api-total {
   border-top: 1px solid rgba(255, 255, 255, 0.25);
   margin-top: 4px;
   padding-top: 5px;
   font-weight: 700;
}

.api-refresh {
   margin-top: 8px;
   width: 100%;
   background: rgba(255, 255, 255, 0.12);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 6px;
   padding: 6px;
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
}

.cache-panel {
   position: fixed;
   top: calc(env(safe-area-inset-top) + 44px);
   left: 8px;
   z-index: 1001;
   width: min(340px, calc(100vw - 16px));
   max-height: 60vh;
   overflow-y: auto;
   background: rgba(20, 20, 20, 0.96);
   color: #fff;
   border-radius: 8px;
   padding: 10px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 11px;
}

.cache-title {
   font-weight: 700;
   margin-bottom: 8px;
   line-height: 1.3;
}

.cache-diff {
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   padding: 5px 0;
}

.cache-diff.is-changed {
   background: rgba(230, 162, 60, 0.18);
   border-radius: 4px;
   padding: 5px 6px;
}

.cd-ns {
   font-weight: 700;
   color: #9ecbff;
   margin-bottom: 2px;
}

.cache-diff.is-changed .cd-ns {
   color: #e6a23c;
}

.cd-val {
   word-break: break-word;
   opacity: 0.9;
}

.auth-overlay {
   position: fixed;
   inset: 0;
   z-index: 2000;
   background: var(--hwy-header-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.auth-card {
   background: var(--hwy-card);
   border-radius: 16px;
   padding: 28px 24px;
   width: min(360px, 100%);
   text-align: center;
}

.auth-title {
   margin: 0;
   font-size: 26px;
   color: var(--hwy-accent);
}

.auth-sub {
   color: var(--hwy-muted);
   font-size: 14px;
   margin: 6px 0 18px;
}

.auth-form {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.auth-form input {
   font-size: 16px;
   padding: 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
}

.auth-submit {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   background: var(--hwy-green);
   border: none;
   border-radius: 10px;
   padding: 13px;
   cursor: pointer;
}

.auth-error {
   color: var(--hwy-error);
   font-size: 13px;
   margin-top: 10px;
   min-height: 16px;
}

.app-header {
   background: var(--hwy-header-bg);
   color: var(--hwy-header-ink, #fff);
   padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.settings-button {
   background: rgba(255, 255, 255, 0.14);
   border: none;
   border-radius: 10px;
   color: var(--hwy-header-ink, #fff);
   font-size: 20px;
   line-height: 1;
   min-width: 44px;
   min-height: 44px;
   cursor: pointer;
   flex: 0 0 auto;
   /* Buttons center their content; anchors don't — the 🖥️ cockpit LINK sat
      top-left of its square while the ⚙️ button was centered. Center both. */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.link-inline {
   background: none;
   border: none;
   padding: 0;
   color: var(--hwy-accent);
   font: inherit;
   font-weight: 700;
   cursor: pointer;
   text-decoration: underline;
}

.settings-modal {
   position: fixed;
   inset: 0;
   z-index: 1500;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 20px 12px;
   overflow-y: auto;
}

.settings-panel {
   background: var(--hwy-sand);
   color: var(--hwy-ink);
   border-radius: 16px;
   width: min(480px, 100%);
   max-height: calc(100vh - 40px);
   overflow-y: auto;
   border: 1px solid var(--hwy-line);
}

.settings-topbar {
   position: sticky;
   top: 0;
   background: var(--hwy-header-bg);
   color: var(--hwy-header-ink, #fff);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px;
}

.settings-title {
   margin: 0;
   font-size: 18px;
}
/* The topbar keeps its --hwy-header-bg in every look, so the title must keep
   the matching header ink; !important + the double selector because several
   themes restyle every h2 with `[data-theme=…] h2 { color: … !important }`
   (0-1-1) and would stamp page ink onto the dark bar. */
.settings-topbar .settings-title { color: var(--hwy-header-ink, #fff) !important; }

.settings-close {
   background: rgba(255, 255, 255, 0.16);
   border: none;
   color: #fff;
   border-radius: 8px;
   min-width: 40px;
   min-height: 40px;
   font-size: 16px;
   cursor: pointer;
}

.settings-modal-body {
   padding: 16px;
   overflow-x: hidden;   /* the settings modal never scrolls horizontally */
}

/* Sections are collapsible <details> accordions. */
details.settings-section {
   margin-bottom: 10px;
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   padding: 0 14px;
}
details.settings-section > summary.settings-heading {
   cursor: pointer;
   list-style: none;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 0;
   margin: 0;
}
details.settings-section > summary.settings-heading::-webkit-details-marker { display: none; }
details.settings-section > summary.settings-heading::before {
   content: "\25B8";           /* ▸ */
   font-size: 11px;
   transition: transform 0.15s ease;
}
details.settings-section[open] > summary.settings-heading::before { transform: rotate(90deg); }
details.settings-section[open] { padding-bottom: 14px; }

.settings-heading {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--hwy-muted);
   margin: 0 0 10px;
}

.settings-select {
   width: 100%;
   box-sizing: border-box;
   padding: 10px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
}

.settings-theme {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;   /* pills wrap instead of scrolling sideways */
}
.chip-multi { flex-wrap: wrap; }

.theme-option {
   flex: 1;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   background: var(--hwy-card);
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
}

.theme-option input {
   position: absolute;
   opacity: 0;
   width: 1px;
   height: 1px;
}

.theme-option.is-selected {
   border-color: var(--hwy-green);
   background: var(--hwy-green);
   color: #fff;
}

.theme-option:focus-within {
   outline: 3px solid var(--hwy-accent);
   outline-offset: 2px;
}

.settings-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.settings-field {
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: 13px;
   font-weight: 600;
   color: var(--hwy-muted);
   margin-bottom: 10px;
}

.settings-field input,
.settings-row input,
.settings-add input {
   font-size: 16px;
   padding: 10px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 9px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
   font-weight: 400;
   width: 100%;
}

.settings-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 8px;
}

/* Trip-preferences survey controls. */
.settings-field-caption { font-size: 13px; font-weight: 600; color: var(--hwy-muted); margin-bottom: 6px; }
.trip-style-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--hwy-muted); }
.trip-style-slider { width: 100%; margin-top: 4px; accent-color: var(--hwy-green); }
.chip-multi { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-multi-btn {
   font: inherit;
   font-size: 13px;
   font-weight: 600;
   padding: 6px 12px;
   border-radius: 999px;
   border: 1px solid var(--hwy-line);
   background: var(--hwy-card);
   color: var(--hwy-ink);
   cursor: pointer;
   transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.chip-multi-btn:hover { border-color: color-mix(in srgb, var(--hwy-green) 45%, var(--hwy-line)); }
.chip-multi-btn.is-selected { background: var(--hwy-green); color: #fff; border-color: var(--hwy-green); }
.chip-multi-btn:focus-visible { outline: 3px solid var(--hwy-green-light); outline-offset: 2px; }

.settings-row {
   display: flex;
   gap: 8px;
   align-items: center;
}

.settings-remove {
   flex: 0 0 auto;
   min-width: 40px;
   min-height: 40px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   background: var(--hwy-card);
   color: var(--hwy-error);
   font-size: 14px;
   cursor: pointer;
}

.settings-add {
   display: flex;
   gap: 8px;
}

.settings-add-btn {
   flex: 0 0 auto;
   padding: 0 16px;
   min-height: 40px;
   background: var(--hwy-green);
   color: #fff;
   border: none;
   border-radius: 9px;
   font-weight: 700;
   cursor: pointer;
}

.settings-hint {
   font-size: 12px;
   color: var(--hwy-muted);
   margin: 8px 0 0;
}

.comfort-row {
   display: flex;
   gap: 8px;
}

.comfort-row input {
   flex: 1;
   min-width: 0;
}

.comfort-row select {
   flex: 0 0 auto;
   font-size: 15px;
   padding: 10px 8px;
   border: 1px solid var(--hwy-line);
   border-radius: 9px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
}

.app-title {
   margin: 0;
   font-size: 22px;
   letter-spacing: 0.5px;
}

.app-tagline {
   margin: 4px 0 0;
   font-size: 13px;
   opacity: 0.85;
}

.feature-nav {
   position: sticky;
   top: 0;
   z-index: 500;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding: 8px 10px;
   background: var(--hwy-nav-bg);
   border-bottom: 1px solid var(--hwy-line);
}

.feature-nav::-webkit-scrollbar {
   display: none;
}

.nav-chip {
   flex: 0 0 auto;
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   padding: 7px 13px;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   cursor: pointer;
   color: var(--hwy-ink);
}

.nav-chip:active,
.nav-chip.is-active {
   background: var(--hwy-green);
   color: #fff;
   border-color: var(--hwy-accent);
}

.app-main {
   padding: 16px;
   max-width: 720px;
   margin: 0 auto;
}

.trip-form {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 14px;
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.field {
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: relative;
}

.field label {
   font-size: 12px;
   font-weight: 600;
   color: var(--hwy-muted);
   text-transform: uppercase;
   letter-spacing: 0.4px;
}

.field input {
   font-size: 16px; /* >=16px avoids iOS zoom-on-focus */
   padding: 11px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   background: var(--hwy-card);
   width: 100%;
}

.link-button {
   position: absolute;
   right: 0;
   top: 0;
   background: none;
   border: none;
   color: var(--hwy-accent);
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   padding: 6px 10px;
   min-height: 24px;
   min-width: 44px;
}

.plan-button {
   font-size: 16px;
   font-weight: 700;
   color: #fff;
   background: var(--hwy-green);
   border: none;
   border-radius: 10px;
   padding: 13px;
   cursor: pointer;
}

.plan-button:disabled {
   opacity: 0.6;
   cursor: default;
}

.status-banner {
   margin-top: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   font-size: 13px;
   background: var(--hwy-warn-bg);
   color: var(--hwy-warn-ink);
   border: 1px solid #f0dcae;
}

.status-banner.is-error {
   background: #fde8e8;
   color: #8a1c1c;
   border-color: #f3c2c2;
}

.status-banner.is-info {
   background: #e8f1fd;
   color: #1c4f8a;
   border-color: #c2d8f3;
}

.trip-summary {
   margin-top: 14px;
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px 14px;
   font-size: 14px;
}

.trip-summary .summary-route {
   font-weight: 700;
   font-size: 15px;
}

.trip-summary .summary-meta {
   color: var(--hwy-muted);
   margin-top: 4px;
}

.trip-summary .summary-fetched {
   color: var(--hwy-muted);
   font-size: 12px;
   margin-top: 6px;
}

/* "Hit the road" — a plan becomes a trip. */
.hit-road-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.hit-road-button {
   border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer;
   font-weight: 800; font-size: 14px; color: #fff; background: var(--hwy-green, #0b3d2e);
}
.hit-road-button:hover { filter: brightness(1.12); }
.hit-road-on { font-weight: 800; color: var(--hwy-accent, #0b3d2e); }
.hit-road-end {
   border: 1px solid var(--hwy-muted, #888); background: none; border-radius: 999px;
   padding: 4px 12px; cursor: pointer; font-size: 12px; color: var(--hwy-muted, #666);
}

/* Friendly location pre-prompt (shown once, before the browser's own dialog). */
.hr-overlay {
   position: fixed; inset: 0; z-index: 4100; background: rgba(0, 0, 0, 0.5);
   display: flex; align-items: center; justify-content: center; padding: 16px;
}
.hr-modal {
   width: 400px; max-width: 100%; background: #fff; color: #1b1b1b;
   border-radius: 14px; padding: 20px; font: 14px system-ui, sans-serif;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.hr-modal h3 { margin: 0 0 8px; }
.hr-modal p { margin: 0 0 10px; line-height: 1.45; }
.hr-fine { font-size: 12px; color: #667; }
.hr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.hr-go {
   border: none; border-radius: 8px; padding: 9px 16px; cursor: pointer;
   font-weight: 700; color: #fff; background: var(--hwy-green, #0b3d2e);
}
.hr-skip { border: none; background: none; cursor: pointer; color: #667; padding: 9px 6px; }

.map-section {
   margin-top: 14px;
}

.map-container {
   position: relative;
   width: 100%;
   height: 260px;
   border-radius: 12px;
   overflow: hidden;
   border: 1px solid var(--hwy-line);
   background: var(--hwy-map-bg);
}

.google-map {
   position: absolute;
   inset: 0;
   z-index: 1;
}

.route-fallback {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   z-index: 2;
}

.map-placeholder {
   z-index: 3;
}

.map-placeholder {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--hwy-muted);
   font-size: 14px;
   text-align: center;
   padding: 20px;
}

/* The text floats on the map surface, whose tint is decorative and outside
   the text-contrast contract — read it off a card chip instead. */
.map-placeholder span {
   background: var(--hwy-card);
   color: var(--hwy-muted);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   padding: 8px 16px;
}

.section-heading {
   font-size: 15px;
   margin: 20px 0 10px;
}

.timeline-strip {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.timeline-item {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px 14px;
   display: grid;
   grid-template-columns: 44px 1fr auto;
   gap: 12px;
   align-items: center;
}

.timeline-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 22px;
   background: var(--hwy-subtle);
}

.timeline-body .timeline-label {
   font-weight: 700;
   font-size: 14px;
}

.timeline-body .timeline-eta {
   color: var(--hwy-muted);
   font-size: 12px;
   margin-top: 2px;
}

.timeline-body .timeline-conditions {
   font-size: 13px;
   margin-top: 3px;
}

.timeline-temp {
   text-align: right;
}

.timeline-temp .temp-value {
   font-size: 20px;
   font-weight: 800;
}

.timeline-temp .temp-detail {
   font-size: 11px;
   color: var(--hwy-muted);
   margin-top: 2px;
   white-space: nowrap;
}

.timeline-temp .temp-detail.is-alert {
   color: var(--hwy-error);
   font-weight: 700;
}

.blocked-note {
   font-size: 12px;
   color: var(--hwy-error);
}

.stops-section {
   margin-top: 20px;
}

.stops-hint {
   font-size: 12px;
   color: var(--hwy-muted);
   margin: 0 0 10px;
}

.stops-prefs {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 8px;
}

.stops-toggle {
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 5px;
}

.learning-note {
   font-size: 12px;
   color: var(--hwy-accent);
   font-weight: 600;
   min-height: 14px;
   margin-bottom: 8px;
}

.stops-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.stops-note {
   font-size: 12px;
   color: var(--hwy-muted);
   font-style: italic;
   list-style: none;
}

.stop-card {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px 14px;
}

.stop-card.is-combined {
   border-color: var(--hwy-accent);
   border-left-width: 4px;
}

.stop-head {
   display: flex;
   align-items: center;
   gap: 8px;
}

.stop-index {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: var(--hwy-green);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
}

.stop-headline {
   font-weight: 800;
   font-size: 14px;
   flex: 1;
}

.stop-eta {
   font-size: 12px;
   color: var(--hwy-muted);
   white-space: nowrap;
}

.stop-near {
   font-size: 12px;
   color: var(--hwy-muted);
   margin: 4px 0 6px 30px;
}

.stop-reasons {
   margin: 0 0 0 30px;
   padding-left: 16px;
   font-size: 13px;
}

.stop-reasons li {
   margin: 2px 0;
}

.stop-offer {
   margin: 8px 0 0 30px;
   font-size: 12px;
   background: #f6f2ff;
   border: 1px dashed #c9b8ee;
   border-radius: 8px;
   padding: 7px 10px;
   color: #4a3a7a;
}

.offer-tag {
   font-size: 10px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.4px;
   background: #6b4fd6;
   color: #fff;
   border-radius: 4px;
   padding: 1px 5px;
   margin-right: 4px;
}

.stop-done {
   margin: 10px 0 0 30px;
   background: var(--hwy-subtle);
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   padding: 6px 12px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
   color: var(--hwy-ink);
}

.stop-done:disabled {
   opacity: 0.6;
   cursor: default;
}

.poi-section {
   margin-top: 20px;
}

.poi-heading {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 0.4px;
   color: var(--hwy-muted);
   margin: 14px 0 8px;
}

.poi-event {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px 14px;
   margin-bottom: 8px;
}

/* Weather hazard warnings — red, prominent (safety first). */
.poi-hazards {
   border: 1px solid color-mix(in srgb, #dc2626 55%, var(--hwy-line));
   background: color-mix(in srgb, #dc2626 12%, transparent);
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 12px;
}
.poi-hazards-head { font-size: 14px; font-weight: 800; color: var(--hwy-error); margin-bottom: 8px; }
.poi-hazard { display: flex; gap: 10px; align-items: baseline; padding: 6px 4px; border-radius: 8px; }
.poi-hazard:hover { background: color-mix(in srgb, #dc2626 10%, transparent); }
.poi-hazard-icon { font-size: 18px; flex: 0 0 auto; }
.poi-hazard-body { display: flex; flex-direction: column; }
.poi-hazard-title { font-size: 13.5px; font-weight: 800; color: var(--hwy-ink); }
.poi-hazard-meta { font-size: 11.5px; color: var(--hwy-muted); margin-top: 1px; }

/* Event-driven traffic alerts — our special angle, shown prominently (amber). */
.poi-traffic {
   border: 1px solid color-mix(in srgb, #e67e22 60%, var(--hwy-line));
   background: color-mix(in srgb, #e67e22 12%, transparent);
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 12px;
}
.poi-traffic-head { font-size: 14px; font-weight: 800; color: #c15b0f; margin-bottom: 8px; }
.poi-traffic-row { padding: 7px 4px; border-top: 1px solid color-mix(in srgb, #e67e22 22%, var(--hwy-line)); }
.poi-traffic-row:first-of-type { border-top: none; }
.poi-traffic-title { font-size: 13.5px; font-weight: 800; color: var(--hwy-ink); }
.poi-traffic-reason { font-size: 12.5px; color: var(--hwy-ink); margin-top: 2px; }
.poi-traffic-meta { font-size: 11.5px; color: var(--hwy-muted); margin-top: 2px; }

/* LIVE NWS weather alerts — the most urgent block; red, active-now framing. */
.poi-live-alerts {
   border: 1.5px solid color-mix(in srgb, #c0392b 65%, var(--hwy-line));
   background: color-mix(in srgb, #c0392b 12%, transparent);
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 12px;
}
.poi-live-head { font-size: 14px; font-weight: 800; color: var(--hwy-error); margin-bottom: 8px; }
.weather-live-alerts { margin: 0 0 10px; }
.weather-live-alerts > summary { font-size: 14px; font-weight: 800; color: var(--hwy-error); cursor: pointer; list-style: revert; }
.weather-live-alerts[open] > summary { margin-bottom: 6px; }
.poi-live-row { padding: 7px 4px; border-top: 1px solid color-mix(in srgb, #c0392b 22%, var(--hwy-line)); }
.poi-live-row:first-of-type { border-top: none; }
.poi-live-row.sev-extreme, .poi-live-row.sev-severe { border-left: 3px solid #c0392b; padding-left: 8px; }
.poi-live-title { font-size: 13.5px; font-weight: 800; color: var(--hwy-ink); }
.poi-live-sev { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: #c0392b; color: #fff; border-radius: 4px; padding: 1px 5px; }
.poi-live-area { font-size: 12px; color: var(--hwy-ink); margin-top: 2px; }
.poi-live-meta { font-size: 11.5px; color: var(--hwy-muted); margin-top: 2px; }

/* Overnight stops for multi-day drives. */
.poi-overnight {
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 9px 10px;
   border-radius: 10px;
   border: 1px solid var(--hwy-line);
   background: var(--hwy-card);
   margin-bottom: 7px;
}
.poi-overnight-day {
   flex: 0 0 auto;
   font-size: 11px;
   font-weight: 800;
   color: #fff;
   /* Green, not accent: accent is a TEXT token and goes light in dark modes —
      white pills need the white-guaranteed background token. */
   background: var(--hwy-green);
   border-radius: 999px;
   padding: 3px 9px;
}
.poi-overnight-body { flex: 1; display: flex; flex-direction: column; }
.poi-overnight-name { font-size: 13.5px; font-weight: 700; color: var(--hwy-ink); }
.poi-overnight-meta { font-size: 11.5px; color: var(--hwy-muted); margin-top: 1px; }
.poi-overnight-hotels {
   flex: 0 0 auto;
   font-size: 12px;
   font-weight: 700;
   color: var(--hwy-accent);
   text-decoration: none;
   white-space: nowrap;
}
.poi-overnight-hotels:hover { text-decoration: underline; }

/* Real attractions list (Wikidata) — compact rows in journey order. */
.poi-attraction {
   display: flex;
   gap: 10px;
   align-items: baseline;
   padding: 7px 8px;
   border-radius: 8px;
}
.poi-attraction:hover { background: color-mix(in srgb, var(--hwy-accent) 8%, transparent); }
.poi-attraction-icon { font-size: 17px; flex: 0 0 auto; }
.poi-attraction-body { display: flex; flex-direction: column; }
.poi-attraction-name { font-size: 13.5px; font-weight: 700; color: var(--hwy-ink); }
.poi-attraction-meta { font-size: 11.5px; color: var(--hwy-muted); margin-top: 1px; }

.poi-event.is-loud {
   border: 2px solid #d98324;
   background: var(--hwy-loud-bg);
}

.poi-event-head {
   font-weight: 800;
   font-size: 15px;
}

/* "In your plan" tag — only shown when the card is rated definitely/probably. */
.poi-in-plan-tag {
   display: none;
   margin-left: 8px;
   font-size: 11px;
   font-weight: 700;
   color: var(--hwy-accent);
   white-space: nowrap;
}
.poi-event.is-in-plan { border-color: color-mix(in srgb, var(--hwy-green) 55%, var(--hwy-line)); }
.poi-event.is-in-plan .poi-in-plan-tag { display: inline; }

/* 5-level interest control. */
.poi-interest {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 10px;
}
.poi-interest-btn {
   font: inherit;
   font-size: 12px;
   font-weight: 700;
   padding: 5px 10px;
   border-radius: 999px;
   border: 1px solid var(--hwy-line);
   background: var(--hwy-subtle);
   color: var(--hwy-ink);
   cursor: pointer;
   transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.poi-interest-btn:hover { border-color: color-mix(in srgb, var(--hwy-green) 45%, var(--hwy-line)); }
.poi-interest-btn.is-selected.is-yes { background: var(--hwy-green); color: #fff; border-color: var(--hwy-green); }
.poi-interest-btn.is-selected:not(.is-yes) { background: color-mix(in srgb, var(--hwy-ink) 16%, transparent); border-color: color-mix(in srgb, var(--hwy-ink) 30%, transparent); }
.poi-interest-btn:focus-visible { outline: 3px solid var(--hwy-green-light); outline-offset: 2px; }

.poi-event-blurb {
   font-size: 13px;
   margin-top: 3px;
}

.poi-event-meta {
   font-size: 12px;
   color: var(--hwy-muted);
   margin-top: 6px;
}

.poi-weather {
   background: var(--hwy-warn-bg);
   border: 1px solid #f0dcae;
   border-radius: 12px;
   padding: 10px 14px;
   margin-bottom: 8px;
}

.poi-weather-head {
   font-weight: 700;
   font-size: 13px;
   color: var(--hwy-warn-ink);
}

.poi-weather-advice {
   font-size: 13px;
   margin-top: 3px;
}

.poi-stop {
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   padding: 10px 12px;
   margin-bottom: 6px;
}

.poi-stop.is-important {
   border-color: var(--hwy-accent);
   background: var(--hwy-subtle);
}

.poi-stop-hours {
   font-size: 16px;
   font-weight: 800;
   color: var(--hwy-accent);
   min-width: 34px;
}

/* POI filter chips lived only in desktop.css — the mobile page rendered them
   unstyled (default button chrome, broken in dark themes). Shared base here;
   desktop.css still refines on the cockpit. */
.poi-filter-chip {
   border: 1px solid var(--hwy-line);
   background: none;
   color: var(--hwy-muted);
   border-radius: 999px;
   padding: 4px 10px;
   font-size: 12px;
   cursor: pointer;
   opacity: 0.55;
}

.poi-filter-chip.is-on {
   opacity: 1;
   color: var(--hwy-ink);
   border-color: var(--hwy-accent);
   background: color-mix(in srgb, var(--hwy-accent) 14%, transparent);
}

.poi-stop-body {
   display: flex;
   flex-direction: column;
}

.poi-stop-near {
   font-weight: 700;
   font-size: 13px;
}

.poi-stop-msg {
   font-size: 12px;
   color: var(--hwy-muted);
}

.poi-note {
   font-size: 11px;
   color: var(--hwy-muted);
   font-style: italic;
   margin: 6px 0;
}

.gas-section {
   margin-top: 20px;
}

.gas-form {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

/* Inline car editor in the gas panel: one-line summary that expands to the
   shared EPA picker + MPG/tank — no more detour to Settings. */
.gas-car-editor {
   margin-bottom: 10px;
}

.car-editor-details {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
}

.car-editor-summary {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 11px 12px;
   min-height: 44px;
   font-size: 13.5px;
   cursor: pointer;
   list-style: none;
   color: var(--hwy-ink);
}

.car-editor-summary::-webkit-details-marker {
   display: none;
}

.car-editor-summary b {
   font-weight: 700;
}

.car-editor-edit {
   margin-left: auto;
   font-size: 12px;
   font-weight: 700;
   color: var(--hwy-accent);
   white-space: nowrap;
}

.car-editor-body {
   padding: 0 12px 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.gas-fields {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.gas-fields label,
.gas-vehicle {
   display: flex;
   flex-direction: column;
   gap: 3px;
   font-size: 12px;
   font-weight: 600;
   color: var(--hwy-muted);
}

.gas-fields input,
.gas-vehicle input {
   font-size: 16px;
   padding: 9px 10px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   font-weight: 400;
   color: var(--hwy-ink);
}

.gas-result {
   margin-top: 12px;
}

.gas-note {
   font-size: 13px;
   color: var(--hwy-muted);
   margin: 6px 0;
}

.gas-headline {
   font-size: 17px;
   font-weight: 800;
   color: var(--hwy-accent);
   margin-top: 6px;
}
/* Live streaming status + the savings range + per-stop live-vs-estimate note. */
.gas-live-status {
   font-weight: 700;
   color: var(--hwy-ink);
   display: flex;
   align-items: center;
   gap: 6px;
}
.gas-savings { margin-bottom: 6px; }
.gas-stop-reconcile {
   font-size: 12.5px;
   font-weight: 700;
   color: var(--hwy-green, #1f8a5b);
   margin: 4px 0 0;
}
/* A pulse that lives only while work is happening — added when the stream
   starts, removed on "done" or an interruption. Not a canned animation that
   keeps playing after the server has gone quiet. */
.gas-live-status.is-working::after {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--hwy-accent);
   animation: gas-live-pulse 1s ease-in-out infinite;
}
@keyframes gas-live-pulse {
   0%, 100% { opacity: 0.25; transform: scale(0.7); }
   50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
   .gas-live-status.is-working::after { animation: none; opacity: 0.85; }
}
/* The stream dropped before it finished (usually a restart): honest, and it
   offers a retry instead of a spinner that never ends. */
.gas-live-interrupted {
   font-weight: 700;
   color: var(--hwy-warn, #b45309);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin: 6px 0;
}
.gas-retry-btn {
   font: inherit;
   font-size: 12.5px;
   font-weight: 700;
   cursor: pointer;
   padding: 4px 10px;
   border-radius: 8px;
   border: 1px solid var(--hwy-line);
   background: var(--hwy-surface, #fff);
   color: var(--hwy-ink);
}
.gas-retry-btn:hover { background: var(--hwy-surface-2, #f3f4f6); }

/* ---- Meetups ------------------------------------------------------------- */
.meetup-hint { color: var(--hwy-ink-soft, #555); font-size: 14px; margin: 0 0 12px; }
.meetup-form .field { margin-bottom: 10px; }
.meetup-slider { width: 100%; }
.meetup-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 0; cursor: pointer; }
.meetup-amenities-label { font-size: 13px; font-weight: 700; color: var(--hwy-ink); margin: 8px 0 6px; }
.meetup-amenities { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.meetup-chip {
   font: inherit; font-size: 13px; cursor: pointer;
   padding: 6px 12px; border-radius: 999px;
   border: 1px solid var(--hwy-line); background: var(--hwy-surface, #fff); color: var(--hwy-ink);
}
.meetup-chip.is-selected { background: var(--hwy-accent); border-color: var(--hwy-accent); color: #fff; font-weight: 700; }
.meetup-note { font-size: 14px; margin: 8px 0; }
.meetup-note.is-working { font-weight: 700; color: var(--hwy-ink); }
.meetup-note.is-error { color: var(--hwy-warn, #b45309); font-weight: 600; }
.meetup-card {
   border: 1px solid var(--hwy-line); border-radius: 12px; padding: 14px;
   background: var(--hwy-surface, #fff); margin-top: 10px;
}
.meetup-headline { font-size: 17px; font-weight: 800; color: var(--hwy-ink); }
.meetup-sub { font-size: 13px; color: var(--hwy-ink-soft, #666); margin: 2px 0 0; }
.meetup-split { font-size: 14px; margin: 8px 0; color: var(--hwy-ink); }
.meetup-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.meetup-badge {
   font-size: 12px; padding: 3px 9px; border-radius: 999px;
   background: color-mix(in srgb, var(--hwy-green-light, #1f8a5b) 16%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-green-light, #1f8a5b) 40%, var(--hwy-line));
   color: var(--hwy-ink);
}
.meetup-gas { font-size: 13px; font-weight: 700; color: var(--hwy-green, #1f8a5b); margin: 6px 0; }
.meetup-shift { font-size: 12.5px; color: var(--hwy-ink-soft, #666); margin: 6px 0; }

/* ---- Share sheet -------------------------------------------------------- */
.share-overlay {
   position: fixed; inset: 0; z-index: 1000;
   background: rgba(0, 0, 0, 0.5);
   display: flex; align-items: center; justify-content: center;
   padding: 16px;
}
.share-sheet {
   background: var(--hwy-surface, #fff); color: var(--hwy-ink);
   border-radius: 16px; padding: 20px; max-width: 360px; width: 100%;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); text-align: center;
}
.share-title { font-size: 18px; font-weight: 800; }
.share-sub { font-size: 13px; color: var(--hwy-ink-soft, #666); margin: 4px 0 14px; }
.share-qr {
   display: inline-block; padding: 10px; background: #fff; border-radius: 12px;
   border: 1px solid var(--hwy-line); line-height: 0;
}
.share-qr svg { width: 180px; height: 180px; }
.share-link-row { margin: 14px 0 12px; }
.share-link {
   width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--hwy-line);
   font: inherit; font-size: 13px; text-align: center; background: var(--hwy-surface-2, #f7f7f8); color: var(--hwy-ink);
}
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.share-btn {
   font: inherit; font-weight: 700; cursor: pointer; padding: 9px 16px; border-radius: 9px;
   border: 1px solid var(--hwy-line); background: var(--hwy-surface, #fff); color: var(--hwy-ink); flex: 1 1 auto;
}
.share-btn.is-primary { background: var(--hwy-accent); border-color: var(--hwy-accent); color: #fff; }
.share-btn.is-quiet { flex: 0 0 auto; background: transparent; border-color: transparent; color: var(--hwy-ink-soft, #666); }

/* ---- Identity (name + avatar) ------------------------------------------- */
.identity-avatar {
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 50%; overflow: hidden; vertical-align: middle;
   background: var(--hwy-surface-2, #eef0f2); line-height: 1;
}
.identity-avatar.is-image { object-fit: cover; }
.identity-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.identity-name {
   flex: 1 1 auto; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hwy-line);
   font: inherit; background: var(--hwy-surface, #fff); color: var(--hwy-ink);
}
.identity-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.identity-choice {
   font-size: 20px; line-height: 1; cursor: pointer; width: 40px; height: 40px;
   border-radius: 10px; border: 1px solid var(--hwy-line); background: var(--hwy-surface, #fff);
}
.identity-choice:hover { border-color: var(--hwy-accent); }
.identity-choice.is-chosen { border: 2px solid var(--hwy-accent); box-shadow: 0 0 0 2px var(--hwy-surface, #fff) inset; }
.identity-choice.is-image { padding: 3px; display: inline-flex; align-items: center; justify-content: center; }
.identity-choice.is-image img { width: 32px; height: 32px; object-fit: contain; display: block; }
.identity-packs:empty { display: none; }
.identity-pack-title { font-size: 12.5px; font-weight: 700; color: var(--hwy-ink-soft, #555); margin: 4px 0 6px; }
.identity-upload {
   display: inline-block; cursor: pointer; font-size: 13px; font-weight: 700;
   color: var(--hwy-accent); text-decoration: underline;
}
.identity-error { color: var(--hwy-warn, #b45309); font-size: 12.5px; margin: 6px 0 0; }

/* ---- Caravan ------------------------------------------------------------ */
.caravan-hint { color: var(--hwy-ink-soft, #555); font-size: 14px; margin: 0 0 12px; }
.caravan-status { font-size: 13px; font-weight: 700; color: var(--hwy-ink); margin: 0 0 8px; min-height: 0; }
.caravan-status.is-error { color: var(--hwy-warn, #b45309); }
.caravan-status:empty { display: none; }
.caravan-identity { margin-bottom: 12px; }
.caravan-join { display: flex; gap: 8px; margin-top: 10px; }
.caravan-join input { flex: 1 1 auto; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); font: inherit; text-transform: uppercase; background: var(--hwy-surface, #fff); color: var(--hwy-ink); }
.caravan-join .plan-button { flex: 0 0 auto; }
.caravan-room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 14px; }
.caravan-room-code strong { letter-spacing: 1px; font-size: 16px; }
.caravan-room-head .link-button { margin-left: auto; }
.caravan-room-head .link-button + .link-button { margin-left: 0; }
.plan-button.is-sharing { background: var(--hwy-warn, #b45309); border-color: var(--hwy-warn, #b45309); }
.caravan-roster { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* Convoy: everyone's leg to the shared destination. */
.caravan-convoy { margin-top: 14px; }
.convoy-board { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.convoy-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 7px 10px; background: var(--hwy-card); border: 1px solid var(--hwy-line); border-radius: 10px; font-size: 13px; }
.convoy-row.is-me { border-color: var(--hwy-accent); }
.convoy-name { font-weight: 800; color: var(--hwy-ink); }
.convoy-leg { color: var(--hwy-muted); }
.convoy-slack { color: var(--hwy-accent); font-weight: 700; }
.convoy-spread { font-size: 13px; color: var(--hwy-muted); margin: 2px 0 0; }
.convoy-spread.is-together { color: var(--hwy-accent); font-weight: 700; }
.convoy-form { display: flex; flex-wrap: wrap; gap: 8px; }
.convoy-form input[type="text"] { flex: 1 1 160px; min-width: 0; }
.convoy-form input, .convoy-form button { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); font-size: 13px; }
.convoy-form .plan-button { flex: 0 0 auto; width: auto; }
.caravan-member { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--hwy-line); border-radius: 10px; background: var(--hwy-surface, #fff); }
.caravan-member .identity-avatar { border-radius: 50%; flex: 0 0 auto; }
.caravan-member-info { flex: 1 1 auto; min-width: 0; }
.caravan-member-name { font-weight: 700; font-size: 14px; color: var(--hwy-ink); }
.caravan-member-meta { font-size: 12.5px; color: var(--hwy-ink-soft, #666); }
.caravan-locate { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); background: var(--hwy-surface, #fff); color: var(--hwy-accent); flex: 0 0 auto; }
.caravan-note { font-size: 13px; color: var(--hwy-ink-soft, #666); }

/* Reverse map->list hover: the drawer item nearest the hovered route point
   lights up, in every open panel (gas, weather, poi…). Mirrors the list->map
   spotlight so the link reads both ways. */
.route-hover-highlight {
   background: color-mix(in srgb, var(--hwy-accent) 15%, transparent) !important;
   outline: 2px solid var(--hwy-accent);
   outline-offset: -2px;
   border-radius: 6px;
}
/* Live caravan pin on the free (Leaflet) map — a colored ring around the avatar. */
/* ---- Hidden Features discovery menu ------------------------------------ */
.hidden-features-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; overflow-y: auto; }
.hidden-features-panel { width: 100%; max-width: 560px; background: var(--hwy-surface, #fff); color: var(--hwy-ink); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; }
.hidden-features-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hwy-line); position: sticky; top: 0; background: var(--hwy-surface, #fff); }
.hidden-features-title { font-size: 18px; font-weight: 800; margin: 0; }
.hidden-features-sub { font-size: 12px; color: var(--hwy-muted, #666); margin: 3px 0 0; }
.hidden-features-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--hwy-line); background: var(--hwy-subtle, #f2f2f2); color: var(--hwy-ink); cursor: pointer; font-size: 15px; }
.hidden-features-body { padding: 8px 12px 16px; }
.hf-category { margin-top: 12px; }
.hf-category-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-accent); margin: 0 0 4px; }
.hf-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; border-radius: 9px; }
.hf-item.is-child { margin-left: 16px; }
.hf-item.is-dimmed .hf-item-name { color: var(--hwy-muted, #888); }
.hf-item-main { grid-column: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.hf-item-main:hover { background: color-mix(in srgb, var(--hwy-accent) 8%, transparent); }
.hf-item-name { font-size: 14px; font-weight: 600; }
.hf-badge { font-size: 10.5px; color: var(--hwy-muted, #666); }
.hf-badge.is-lock { border: 1px solid var(--hwy-line); border-radius: 20px; padding: 1px 7px; }
.hf-item-help { grid-column: 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hwy-line); background: var(--hwy-subtle, #f2f2f2); color: var(--hwy-ink); cursor: pointer; font-weight: 800; font-size: 12px; }
.hf-item-play { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--hwy-accent); background: var(--hwy-subtle, #f2f2f2); color: var(--hwy-accent); cursor: pointer; font-weight: 800; font-size: 11px; margin-right: 4px; }
.hf-item-play:hover { background: var(--hwy-accent); color: #fff; }
.hf-item-help.is-on { background: var(--hwy-accent); color: #fff; border-color: var(--hwy-accent); }
.hf-detail { grid-column: 1 / -1; display: none; padding: 2px 10px 8px; }
.hf-detail.is-open { display: block; }
.hf-detail-summary { font-size: 12.5px; color: var(--hwy-ink); }
.hf-detail-reach, .hf-detail-platform, .hf-detail-prereq { font-size: 11.5px; color: var(--hwy-muted, #666); margin-top: 2px; }
.hf-step { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--hwy-accent); cursor: pointer; text-decoration: underline dotted; }
/* The "show me" pulse: amber ring + dark halo so it reads on any surface. */
@keyframes hwyFlashPulse {
   0%, 100% { outline-color: transparent; box-shadow: 0 0 0 0 rgba(11, 61, 46, 0); }
   15%, 70% { outline-color: #f4b740; box-shadow: 0 0 0 6px rgba(11, 61, 46, 0.35); }
}
.hwy-flash { outline: 3px solid #f4b740; outline-offset: 2px; border-radius: 8px; animation: hwyFlashPulse 1.6s ease; }
.hf-detail-prereq { color: var(--hwy-warn-ink, #8a5300); }
.hf-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); z-index: 4100; max-width: 88%; background: #1f2233; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 26px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
.hf-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---- Badges ------------------------------------------------------------ */
/* Badges = a collection of enamel road patches you earn on the drive. The modal
   wears the cockpit's guide-sign green; earned badges are minted (a coin behind
   the icon + a collected star), locked ones sit quiet, secrets stay dashed. */
.badges-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(11, 30, 24, 0.55); display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; overflow-y: auto; }
.badges-panel { width: 100%; max-width: 640px; background: var(--hwy-surface, #fff); color: var(--hwy-ink); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); overflow: hidden; }
.badges-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; position: sticky; top: 0; z-index: 1;
   /* Fixed guide-sign green (not the theme tokens): the title/sub are fixed
      white, and several looks turn --hwy-green-light pastel. Same pinning as
      the other guide-sign panels. */
   background: linear-gradient(178deg, #12694f, #0b3d2e);
   box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14), 0 2px 12px rgba(0,0,0,0.18); }
/* !important: the sign is pinned dark green and several themes restyle every
   h2 with `[data-theme=…] h2 { color: … !important }`. */
.badges-head .badges-title { font-size: 19px; font-weight: 800; margin: 0; color: #fff !important; }
.badges-sub { font-size: 12px; color: rgba(255,255,255,0.84); margin: 3px 0 0; }
.badges-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.32); background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; font-size: 15px; }
.badges-close:hover { background: rgba(255,255,255,0.26); }
.badges-body { padding: 8px 16px 20px; }
.badges-category { margin-top: 18px; }
.badges-category-title { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--hwy-accent); margin: 0 0 10px; }
.badges-category-title::before { content: ""; width: 15px; height: 3px; border-radius: 2px; background: #f4b740; flex: 0 0 auto; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 11px; }
.badge-cell { position: relative; text-align: center; padding: 13px 7px 11px; border-radius: 14px; border: 1px solid var(--hwy-line);
   background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-subtle) 55%, #fff), var(--hwy-subtle, #f7f7f9)); }
.badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 7px; font-size: 25px; line-height: 1;
   background: color-mix(in srgb, var(--hwy-subtle) 40%, #fff); border: 1px solid var(--hwy-line); }
.badge-name { font-size: 12px; font-weight: 700; margin-top: 2px; }
.badge-sub { font-size: 10.5px; color: var(--hwy-muted, #666); margin-top: 3px; line-height: 1.32; }
/* Earned: a minted enamel patch. */
.badge-cell.is-earned { border-color: color-mix(in srgb, var(--hwy-green) 40%, var(--hwy-line));
   background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-green) 7%, #fff), color-mix(in srgb, var(--hwy-green) 13%, #fff));
   box-shadow: 0 5px 16px -7px color-mix(in srgb, var(--hwy-green) 55%, transparent); }
.badge-cell.is-earned .badge-icon {
   background: radial-gradient(circle at 50% 38%, #fff, color-mix(in srgb, var(--hwy-green) 13%, #fff));
   border: 2px solid color-mix(in srgb, var(--hwy-green) 38%, #fff);
   box-shadow: 0 2px 9px -3px color-mix(in srgb, var(--hwy-green) 55%, transparent), inset 0 1px 2px rgba(255,255,255,0.85); }
.badge-cell.is-earned::after { content: "★"; position: absolute; top: 7px; right: 9px; font-size: 11px; color: #f4b740; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
/* Locked: quiet, waiting. Secret: a dashed mystery. */
.badge-cell.is-locked { opacity: 0.66; }
.badge-cell.is-locked .badge-icon { filter: grayscale(0.6); opacity: 0.85; }
.badge-cell.is-secret { border-style: dashed; border-color: color-mix(in srgb, var(--hwy-accent) 32%, var(--hwy-line)); }
.badge-cell.is-secret .badge-icon { filter: grayscale(1); opacity: 0.55; }
.badge-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); z-index: 4200; max-width: 88%; background: linear-gradient(135deg, var(--hwy-accent, #6d3bd6), var(--hwy-green, #2e8b57)); color: #fff; padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.badge-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.badges-merch-cta { padding: 6px 16px 18px; text-align: center; }
.badges-merch-btn { width: 100%; padding: 11px 14px; border: 1px dashed color-mix(in srgb, var(--hwy-accent, #6d3bd6) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--hwy-accent, #6d3bd6) 8%, transparent); color: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.badges-merch-btn:hover { background: color-mix(in srgb, var(--hwy-accent, #6d3bd6) 15%, transparent); }


/* ---- City enrichment "What's here" card (shared by the desktop right rail + mobile timeline) ---- */
/* Mobile timeline toggle (desktop has its own .wc-explore); the card below reuses the shared .wc-enrich* rules. */
.tl-whatshere { margin-top: 6px; }
.tl-whatshere-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--hwy-green, #2e8b57); background: none; border: none; padding: 2px 0; cursor: pointer; }
.tl-whatshere-toggle[aria-expanded="true"] { opacity: 0.8; }
.tl-whatshere .wc-enrich { margin-left: 0; }
.wc-enrich {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 6px 0 2px 4px;
   padding: 10px 12px;
   border-radius: 12px;
   background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent);
   border: 1px solid var(--glass-border);
}
.wc-enrich-group { display: flex; flex-direction: column; gap: 3px; }
.wc-enrich-title {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 800;
   color: var(--hwy-muted);
}
.wc-enrich-item { font-size: 12px; color: var(--hwy-ink); text-decoration: none; display: block; }
a.wc-enrich-item:hover .wc-enrich-name { text-decoration: underline; }
.wc-enrich-name { font-weight: 700; }
.wc-enrich-sub { color: var(--hwy-muted); font-weight: 500; }
.wc-enrich-golden { font-size: 11.5px; font-weight: 700; color: var(--hwy-green); margin-top: 2px; }
.wc-enrich-empty { font-size: 11.5px; color: var(--hwy-muted); font-style: italic; margin: 0; }
.wc-enrich-blurb {
   display: block;
   font-size: 11.5px;
   line-height: 1.45;
   color: var(--hwy-muted);
   text-decoration: none;
   margin-top: 4px;
   padding-top: 8px;
   border-top: 1px dashed var(--glass-border);
}
.wc-enrich-blurb:hover { color: var(--hwy-ink); }
.wc-enrich-guide { display: inline-block; font-size: 11px; font-weight: 700; color: var(--hwy-green); text-decoration: none; margin-top: 2px; }
.wc-enrich-guide:hover { text-decoration: underline; }

/* ---- Merch "painted door" (Coming Soon + waitlist) --------------------- */
.merch-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.45); display: flex; justify-content: center; align-items: flex-start; padding: 24px 12px; overflow-y: auto; }
.merch-panel { width: 100%; max-width: 560px; background: var(--hwy-surface, #fff); color: var(--hwy-ink); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); overflow: hidden; }
.merch-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 10px; }
.merch-title { margin: 0; font-size: 19px; }
.merch-sub { margin: 4px 0 0; font-size: 13px; opacity: 0.85; line-height: 1.4; }
.merch-soon { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; color: #3a2a00; background: linear-gradient(135deg, #d9822b, #e0a800); vertical-align: middle; }
.merch-close { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; opacity: 0.6; padding: 2px 6px; }
.merch-close:hover { opacity: 1; }
.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 18px 14px; }
.merch-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--hwy-ink) 12%, transparent); border-radius: 12px; cursor: pointer; }
.merch-card:has(.merch-pick:checked) { border-color: var(--hwy-accent, #6d3bd6); background: color-mix(in srgb, var(--hwy-accent, #6d3bd6) 8%, transparent); }
.merch-pick { grid-row: 1 / 3; margin: 0; }
.merch-icon { grid-column: 2; font-size: 22px; line-height: 1; }
.merch-name { grid-column: 2; font-weight: 700; font-size: 13.5px; }
.merch-blurb { grid-column: 2; font-size: 11.5px; opacity: 0.75; line-height: 1.35; }
.merch-waitlist { padding: 4px 18px 20px; }
.merch-wl-label { display: block; font-size: 12.5px; opacity: 0.85; margin-bottom: 6px; }
.merch-wl-row { display: flex; gap: 8px; }
.merch-wl-email { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--hwy-ink) 22%, transparent); background: var(--hwy-surface-2, #fff); color: inherit; font-size: 14px; }
/* Commit action → the reserved app-wide commit color (white text on it is the
   one pair every theme guarantees); the old accent→green sweep went pastel in
   several dark looks. */
.merch-wl-btn { flex: none; padding: 10px 16px; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; color: #fff; background: var(--hwy-commit, #0b3d2e); }
.merch-wl-btn:disabled { opacity: 0.7; cursor: default; }
.merch-wl-status { margin: 8px 0 0; font-size: 12.5px; min-height: 1em; }
.merch-wl-status.is-ok { color: var(--hwy-green, #2e8b57); font-weight: 700; }
.merch-wl-status.is-error { color: #c0392b; }
@media (max-width: 460px) { .merch-grid { grid-template-columns: 1fr; } }

/* Hover info bubbles on the Google map must be click-through: when the bubble
   or its little tail catches the pointer, the marker underneath fires
   mouseleave, the bubble closes, the pointer lands back on the marker, it
   reopens — a visible flicker loop while hovering the tail. Only bubbles
   carrying .hwy-hover-popup (hover-driven) go inert; the pop-all pinned
   popups keep their close buttons clickable. */
.gm-style-iw-a:has(.hwy-hover-popup) { pointer-events: none; }
.gm-style-iw:has(.hwy-hover-popup) button.gm-ui-hover-effect { display: none !important; }

/* Trailer-friendly filter (gas panel) + stop-card verdict line */
.gas-trailer-toggle { display: flex; align-items: center; gap: 7px; margin: 6px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--hwy-ink); cursor: pointer; }
.gas-trailer-toggle input { accent-color: var(--hwy-accent); }
.stop-trailer { font-size: 12px; font-weight: 700; color: var(--hwy-accent); margin-top: 2px; }
.stop-trailer.is-warn { color: var(--hwy-warn-ink, #8a5300); }

/* ---- Route mixtape (local artists along the way) ----------------------- */
.mixtape { margin-top: 6px; }
.mixtape-toggle {
   display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px;
   background: none; border: none; cursor: pointer; border-radius: 7px;
   font-size: 12px; font-weight: 700; color: var(--hwy-accent);
}
.mixtape-toggle:hover { background: color-mix(in srgb, var(--hwy-accent) 12%, transparent); }
.mixtape-caret { font-size: 9px; }
.mixtape-panel {
   display: flex; flex-direction: column; gap: 8px;
   margin-top: 4px; padding: 10px 12px; border-radius: 12px;
   background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent);
}
.mixtape-city-name {
   font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
   font-weight: 800; color: var(--hwy-muted); margin-bottom: 3px;
}
.mixtape-artists { display: flex; flex-wrap: wrap; gap: 6px; }
.mixtape-artist {
   font-size: 11.5px; font-weight: 700; color: var(--hwy-accent);
   text-decoration: none; padding: 2px 8px; border-radius: 999px;
   border: 1px solid var(--hwy-line); background: var(--hwy-card);
}
.mixtape-artist:hover { border-color: var(--hwy-accent); }
.mixtape-hint, .mixtape-empty { font-size: 11.5px; color: var(--hwy-muted); font-style: italic; margin: 0; }

/* ---- Departure-time slider --------------------------------------------- */
/* Toolbar popover home (cockpit Leave box): a solid card so the slider reads
   over the map; the map stays fully visible beside/below it. */
.departure-pop-exact {
   display: inline-block; margin: 6px 12px 10px; padding: 0;
   background: none; border: none; cursor: pointer;
   color: var(--hwy-accent); font-size: 12px; font-weight: 700; text-decoration: underline;
}
.departure-pop {
   position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
   min-width: 320px;
   background: var(--hwy-card, #fff); color: var(--hwy-ink, #1b1b1b);
   border: 1px solid var(--hwy-line, rgba(0, 0, 0, 0.15)); border-radius: 12px;
   padding: 4px 10px 8px;
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.departure-slider { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent); }
.departure-slider-label { font-size: 13px; font-weight: 700; color: var(--hwy-ink); }
.departure-slider-label.is-preview { color: var(--hwy-accent); }
.departure-slider-range { width: 100%; margin: 6px 0 2px; accent-color: var(--hwy-accent); }
.departure-slider-hint { font-size: 11px; color: var(--hwy-muted, #666); }

/* ---- Waypoints editor + arrival cards ---------------------------------- */
.waypoints-editor { display: flex; flex-direction: column; gap: 8px; }
.waypoints-editor.has-rows { margin-top: 6px; }
.waypoints-heading { font-size: 12px; font-weight: 800; color: var(--hwy-ink-soft, #555); }
.waypoints-row { border: 1px solid var(--hwy-line); border-radius: 10px; padding: 8px; background: var(--hwy-surface, #fff); }
.waypoints-row-top { display: flex; align-items: center; gap: 6px; }
.waypoints-place { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); font: inherit; background: var(--hwy-surface, #fff); color: var(--hwy-ink); }
.waypoints-icon-btn { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hwy-line); background: var(--hwy-subtle, #f2f2f2); color: var(--hwy-ink); cursor: pointer; font-size: 13px; line-height: 1; }
.waypoints-icon-btn:hover { border-color: var(--hwy-accent); }
.waypoints-icon-btn.is-on { background: color-mix(in srgb, var(--hwy-accent) 18%, transparent); border-color: var(--hwy-accent); }
.waypoints-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.waypoints-time-field { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--hwy-ink-soft, #666); }
.waypoints-time-field input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hwy-line); font: inherit; background: var(--hwy-surface, #fff); color: var(--hwy-ink); }
.waypoints-dwell { width: 84px; }
.waypoints-add { align-self: flex-start; font-weight: 700; }
.cockpit-waypoints > summary { cursor: pointer; font-size: 13px; white-space: nowrap; }
.cockpit-waypoints[open] { min-width: 260px; }

.waypoints-cards { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent); }
.waypoints-cards-title { font-size: 12px; font-weight: 800; color: var(--hwy-ink); margin-bottom: 4px; }
.waypoints-card { padding: 5px 0; border-top: 1px solid var(--hwy-line); }
.waypoints-card:first-of-type { border-top: none; }
.waypoints-card-head { font-size: 12.5px; font-weight: 700; color: var(--hwy-ink); }
.waypoints-card-when { font-size: 11.5px; color: var(--hwy-muted, #666); }
.waypoints-card-advisory { margin-top: 2px; }
.waypoints-advisory-line { font-size: 11.5px; line-height: 1.35; }
.waypoints-advisory-line.is-ok { color: var(--hwy-green, #1f8a5b); }
.waypoints-advisory-line.is-miss { color: var(--hwy-warn, #b45309); font-weight: 700; }
.waypoints-advisory-line.is-wait { color: var(--hwy-ink-soft, #555); }

.free-map-caravan { background: transparent; border: none; }
.free-map-meetup { background: transparent; border: none; }
.meetup-map-pin { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.caravan-pin {
   display: flex; align-items: center; justify-content: center;
   width: 30px; height: 30px; border-radius: 50%;
   background: #fff; border: 3px solid #3182bd; font-size: 16px; line-height: 1;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
   overflow: hidden;
}
/* A photo or team-pack avatar fills the pin on either map engine. */
.caravan-pin-image, .hwy-map-badge-image {
   width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; pointer-events: none;
}
.caravan-propose { display: flex; gap: 8px; margin-top: 14px; }
.caravan-propose input { flex: 1 1 auto; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); font: inherit; background: var(--hwy-surface, #fff); color: var(--hwy-ink); }
.caravan-propose .plan-button { flex: 0 0 auto; }
.caravan-subhead { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--hwy-ink-soft, #777); margin: 12px 0 6px; }
.caravan-proposal { border: 1px solid var(--hwy-line); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: var(--hwy-surface, #fff); }
.caravan-proposal-title { font-weight: 700; font-size: 14px; color: var(--hwy-ink); }
.caravan-proposal-by { font-size: 12.5px; color: var(--hwy-ink-soft, #666); margin: 2px 0 8px; }
.caravan-vote-actions { display: flex; gap: 8px; }
.caravan-vote { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--hwy-line); background: var(--hwy-surface, #fff); color: var(--hwy-ink); flex: 1 1 auto; }
.caravan-vote.is-active { background: var(--hwy-accent); border-color: var(--hwy-accent); color: #fff; }
.caravan-stop-item { font-size: 14px; color: var(--hwy-ink); margin: 3px 0; }
.caravan-eta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hwy-line); }
.caravan-eta-row { font-size: 13px; color: var(--hwy-ink-soft, #555); margin: 2px 0; }

/* ---- Join with a code (home / hero) ------------------------------------- */
.join-code { margin-top: 16px; text-align: center; }
.join-code-label { display: block; font-size: 13px; color: var(--hwy-ink-soft, #666); margin-bottom: 6px; }
.join-code-row { display: flex; gap: 8px; justify-content: center; max-width: 320px; margin: 0 auto; }
.join-code-row input {
   flex: 1 1 auto; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--hwy-line);
   font: inherit; text-align: center; text-transform: uppercase; letter-spacing: 1px;
   background: var(--hwy-surface, #fff); color: var(--hwy-ink);
}
.join-code-btn {
   /* --hwy-green (like .plan-button) not --hwy-accent: accent goes light in dark
      mode and white text fails AA there; green stays dark enough in every theme. */
   font: inherit; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: 8px;
   border: 1px solid var(--hwy-green); background: var(--hwy-green); color: #fff; flex: 0 0 auto;
}
.meetup-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.meetup-dirlink { font-weight: 700; color: var(--hwy-accent); text-decoration: none; }
.meetup-dirlink:hover { text-decoration: underline; }
.meetup-email { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hwy-line); }
.meetup-email-head { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.meetup-email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.meetup-email-input { flex: 1 1 200px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hwy-line); font: inherit; }
.meetup-email-send {
   font: inherit; font-weight: 700; cursor: pointer; padding: 8px 14px; border-radius: 8px;
   border: none; background: var(--hwy-accent); color: #fff;
}
.meetup-email-status { font-size: 13px; margin: 8px 0 0; }
.meetup-email-status.is-ok { color: var(--hwy-green, #1f8a5b); font-weight: 700; }
.meetup-email-status.is-error { color: var(--hwy-warn, #b45309); }
.meetup-email-status.is-working { color: var(--hwy-ink-soft, #666); }
.gas-ev-adjust {
   font-size: 13px;
   color: var(--hwy-ink);
   background: color-mix(in srgb, var(--hwy-green-light) 14%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-green-light) 40%, var(--hwy-line));
   border-radius: 10px;
   padding: 8px 10px;
   margin: 8px 0;
}

/* EV per-stop price badge: typical (default), listed (posted), or free. */
.gas-ev-price {
   display: inline-block;
   font-size: 11.5px;
   font-weight: 700;
   line-height: 1;
   padding: 3px 6px;
   margin-left: 6px;
   border-radius: 999px;
   vertical-align: middle;
   color: var(--hwy-ink);
   background: color-mix(in srgb, var(--hwy-green-light) 16%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-green-light) 45%, var(--hwy-line));
}
.gas-ev-price.is-listed {
   background: color-mix(in srgb, var(--hwy-green) 22%, transparent);
   border-color: color-mix(in srgb, var(--hwy-green) 55%, var(--hwy-line));
}
.gas-ev-price.is-free {
   background: color-mix(in srgb, #16a34a 22%, transparent);
   border-color: #16a34a;
}
.gas-ev-price-note { font-style: italic; }
.gas-ev-crosslink { opacity: 0.85; }

/* Fuel-gap warnings: long stretches with no gas, last-chance stations, night. */
.gas-gaps {
   margin: 12px 0 4px;
   border-radius: 12px;
   padding: 10px 12px;
   background: var(--hwy-warn-bg, color-mix(in srgb, #d08700 12%, transparent));
   border: 1px solid color-mix(in srgb, #d08700 45%, var(--hwy-line));
}
.gas-gaps-head {
   font-size: 14px;
   font-weight: 800;
   color: var(--hwy-ink);
   margin-bottom: 8px;
}
.gas-gap {
   padding: 8px 0;
   border-top: 1px solid color-mix(in srgb, #d08700 25%, var(--hwy-line));
}
.gas-gap:first-of-type { border-top: none; }
.gas-gap-title { font-size: 13.5px; font-weight: 800; color: var(--hwy-ink); }
.gas-gap.is-critical .gas-gap-title { color: #dc2626; }
.gas-gap-note { font-size: 12px; color: var(--hwy-muted); margin: 3px 0 0; line-height: 1.35; }
.gas-gap-lastchance { font-size: 12.5px; color: var(--hwy-ink); margin-top: 4px; line-height: 1.4; }

.gas-stops {
   list-style: none;
   margin: 10px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.gas-stop {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 10px 12px;
}

.gas-stop-head {
   font-weight: 700;
   font-size: 14px;
   margin-bottom: 6px;
}

/* Drawer-list rows that drive the map on hover/click (stops, timeline, events,
   search results, radio stations, fuel stops). */
.map-linked {
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.12s, box-shadow 0.12s;
}
.map-linked:hover {
   background: color-mix(in srgb, var(--hwy-green) 10%, transparent);
}
.map-linked:focus-visible {
   outline: 3px solid var(--hwy-green-light);
   outline-offset: 2px;
}

/* Ballpark fuel cost shown before a plan is run. */
.gas-estimate {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 14px 16px;
   text-align: center;
}
.gas-estimate-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hwy-muted); font-weight: 700; }
.gas-estimate-range { font-size: 30px; font-weight: 800; color: var(--hwy-ink); line-height: 1.15; margin: 2px 0 4px; }
.gas-estimate-note { font-size: 12.5px; color: var(--hwy-muted); }

/* Pre-plan preview: estimated fill stops + prices, rendered under the ballpark
   before any live plan is requested. Visually quieter than the real plan —
   everything here is an ≈estimate and must read as one. */
.gas-preview { margin-top: 10px; }
.gas-preview-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hwy-muted); font-weight: 700; margin-bottom: 4px; }
.gas-preview-stops { margin: 0 0 6px; }
.gas-preview-stop { padding: 8px 10px; }
.gas-preview-mile { font-size: 11.5px; font-weight: 600; color: var(--hwy-muted); margin-left: 4px; }
.gas-preview-price { font-size: 14px; font-weight: 700; color: var(--hwy-ink); margin-top: 2px; }
.gas-preview-station { font-size: 12.5px; color: var(--hwy-muted); margin-top: 2px; }
.gas-preview-note { font-style: italic; }

/* Exact (estimated) total after a plan is run. */
.gas-total {
   font-size: 14px;
   font-weight: 700;
   color: var(--hwy-accent);
   margin: 2px 0 8px;
}

/* Plain-language "why here / why this amount" coaching under each fill stop. */
.gas-stop-why {
   font-size: 12.5px;
   line-height: 1.45;
   color: var(--hwy-muted);
   margin: 0 0 8px;
   padding-left: 10px;
   border-left: 3px solid color-mix(in srgb, var(--hwy-green) 45%, transparent);
}

.gas-station {
   display: flex;
   flex-direction: column;
   padding: 6px 0;
   border-top: 1px solid var(--hwy-line);
}

.gas-station.is-outlier {
   background: var(--hwy-loud-bg);
   margin: 0 -12px;
   padding: 6px 12px;
}

.station-name {
   font-size: 13px;
   font-weight: 600;
}

.station-reasons {
   font-size: 11px;
   color: var(--hwy-muted);
   margin-top: 2px;
}

.search-section {
   margin-top: 20px;
}

.search-form {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.search-row {
   display: flex;
   gap: 8px;
}

.search-row input {
   flex: 1;
   font-size: 16px;
   padding: 10px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
}

.search-go {
   flex: 0 0 auto;
   padding: 10px 18px;
}

.search-progress {
   font-size: 12px;
   font-weight: 600;
   color: var(--hwy-muted);
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.search-progress input[type="range"] {
   width: 100%;
}

.search-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.chip {
   background: var(--hwy-subtle);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   padding: 6px 12px;
   font-size: 13px;
   cursor: pointer;
   color: var(--hwy-ink);
}

.search-results {
   list-style: none;
   margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.search-result {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 10px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.result-name {
   font-weight: 700;
   font-size: 14px;
}

.result-meta {
   font-size: 12px;
   color: var(--hwy-muted);
   margin-top: 2px;
}

.result-ahead {
   font-size: 14px;
   font-weight: 800;
   color: var(--hwy-accent);
   white-space: nowrap;
}

.search-note {
   font-size: 13px;
   color: var(--hwy-muted);
   list-style: none;
}

.linedrive-section {
   margin-top: 20px;
}

.linedrive-hint {
   font-size: 12px;
   color: var(--hwy-muted);
   margin: 0 0 12px;
}

.linedrive {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding-left: 6px;
}

.ld-endpoint {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   font-size: 15px;
   padding: 8px 10px;
   background: var(--hwy-green);
   color: #fff;
   border-radius: 10px;
}

.ld-origin {
   background: #253442; /* fixed dark chip ("you") — white text passes in both themes */
   color: #fff;
}

.ld-endpoint-icon {
   font-size: 18px;
}

.ld-leg {
   display: grid;
   grid-template-columns: 22px auto 1fr;
   align-items: center;
   gap: 10px;
   width: 100%;
}

.ld-spine {
   grid-column: 1;
   width: 6px;
   margin-left: 8px;
   background: linear-gradient(var(--hwy-green-light), var(--hwy-green-light));
   border-radius: 3px;
   justify-self: center;
}

.ld-shield {
   grid-column: 2;
   font-weight: 800;
   font-size: 12px;
   padding: 5px 9px;
   border-radius: 6px;
   white-space: nowrap;
   align-self: center;
}

.ld-shield.is-highway {
   background: #14477a;
   color: #fff;
}

.ld-shield.is-local {
   background: var(--hwy-subtle);
   color: var(--hwy-muted);
}

.ld-body {
   grid-column: 3;
}

.ld-road {
   font-size: 14px;
   font-weight: 700;
}

.ld-detail {
   font-size: 12px;
   color: var(--hwy-muted);
   margin-top: 1px;
}

.radio-section {
   margin-top: 20px;
}

.radio-genres {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 10px;
}

.radio-chip.is-active {
   background: var(--hwy-green);
   color: #fff;
   border-color: var(--hwy-accent);
}

/* Blocked genre (second click): struck through in a warning red so "hidden"
   reads at a glance. Wins over the dimmed empty style. */
.radio-chip.is-blocked {
   background: color-mix(in srgb, #dc2626 22%, transparent);
   border-color: #dc2626;
   color: var(--hwy-ink);
   text-decoration: line-through;
   text-decoration-color: #dc2626;
   opacity: 1;
}
.radio-chip.is-blocked::before {
   content: "\2298\00a0"; /* ⊘ */
   text-decoration: none;
   font-weight: 800;
}

/* A genre with no stations on this route — dimmed so it's clearly "none here",
   but still clickable (shows the helpful empty-state message). */
.radio-chip.is-empty:not(.is-active):not(.is-blocked) {
   opacity: 0.45;
}

/* "Who carries…" team/show broadcast lookup. */
.radio-program-form { display: flex; gap: 8px; margin-bottom: 10px; }
.radio-program-form input {
   flex: 1;
   min-width: 0; /* flex items refuse to shrink below content width; without this the row overflows narrow phones and widens the whole layout viewport */
   font-size: 15px;
   padding: 9px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 9px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
}
.radio-program-form input:focus-visible { outline: 3px solid var(--hwy-green-light); outline-offset: 1px; }
.radio-program-form .plan-button { flex: 0 0 auto; white-space: nowrap; }
.radio-program-result:not(:empty) { margin-bottom: 12px; }

/* Small caption above each search box so the two inputs (find-a-broadcast vs
   filter-the-list) read as clearly different tools. */
.radio-box-label {
   font-size: 12.5px;
   font-weight: 800;
   color: var(--hwy-muted);
   margin: 0 0 5px;
   letter-spacing: 0.01em;
}

/* Loud match/no-match banner so a search ALWAYS visibly reports its result. */
.radio-match-banner {
   font-weight: 800;
   font-size: 13.5px;
   border-radius: 10px;
   padding: 9px 12px;
   margin: 0 0 10px;
   line-height: 1.35;
}
.radio-match-banner.is-hit {
   color: var(--hwy-ink);
   background: color-mix(in srgb, var(--hwy-green) 20%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-green) 55%, var(--hwy-line));
}
.radio-match-banner.is-miss {
   color: var(--hwy-ink);
   background: color-mix(in srgb, var(--hwy-amber, #d08700) 16%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-amber, #d08700) 45%, var(--hwy-line));
}
.radio-program {
   border: 1px solid color-mix(in srgb, var(--hwy-green) 40%, var(--hwy-line));
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 10px;
   background: color-mix(in srgb, var(--hwy-green) 6%, transparent);
}
.radio-program-head { font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.radio-next-game { font-size: 13px; font-weight: 700; color: var(--hwy-green); margin: 0 0 8px; }
.radio-show-meta { font-size: 12.5px; font-weight: 700; color: var(--hwy-muted); margin: 0 0 4px; }
.radio-show-genre { margin-top: 8px; font-size: 13px; padding: 7px 14px; }

/* Inline "show it on the map" location links (dead zones, switch points). */
.radio-loc {
   text-decoration: underline dotted;
   text-underline-offset: 2px;
   padding: 0 1px;
   white-space: nowrap;
}

.radio-search { margin: 0 0 10px; }
.radio-search input {
   width: 100%;
   font-size: 15px;
   padding: 9px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 9px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
}
.radio-search input:focus-visible { outline: 3px solid var(--hwy-green-light); outline-offset: 1px; }

.radio-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.radio-station-row {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
}

.radio-freq {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 2px;
   font-size: 18px;
   font-weight: 800;
   color: var(--hwy-accent);
   min-width: 52px;
}

/* AM/FM token under each station's frequency — AM tinted differently so the
   long-range band stands out. */
.radio-band-token {
   font-size: 9.5px;
   font-weight: 800;
   letter-spacing: 0.06em;
   padding: 1px 5px;
   border-radius: 4px;
   color: #fff;
}
.radio-band-token.is-fm { background: var(--hwy-green); }
.radio-band-token.is-am { background: #b45309; }

/* FM / AM band toggle above the genre chips. */
.radio-band-toggle {
   display: flex;
   gap: 6px;
   margin-bottom: 8px;
}
.radio-band-chip.is-active {
   background: var(--hwy-green);
   color: #fff;
   border-color: var(--hwy-accent);
}

/* Dead-zone mile links read as a warning (they map to a red highlight). */
.radio-deadzone-loc {
   color: #dc2626;
   text-decoration-color: #dc2626;
}

.radio-body {
   display: flex;
   flex-direction: column;
}

.radio-call {
   font-size: 14px;
   font-weight: 800;
}

/* Quieter call-sign + genre line under the station's branding name. */
.radio-sub {
   font-size: 11.5px;
   font-weight: 600;
   color: var(--hwy-muted);
   margin-top: 1px;
}

/* "NPR" (and future network) badge next to the branding. */
.radio-net {
   display: inline-block;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.03em;
   vertical-align: middle;
   padding: 1px 6px;
   margin-left: 4px;
   border-radius: 999px;
   color: #fff;
   background: var(--hwy-green);
}

.radio-span {
   font-size: 11px;
   color: var(--hwy-muted);
   margin-top: 1px;
}

.radio-deadzones {
   margin-top: 10px;
   font-size: 12px;
   background: var(--hwy-warn-bg);
   color: var(--hwy-warn-ink);
   border: 1px solid #f0dcae;
   border-radius: 8px;
   padding: 8px 10px;
}

.radio-note {
   font-size: 12px;
   color: var(--hwy-muted);
   margin-top: 8px;
}

.games-section {
   margin-top: 24px;
   border-top: 2px solid var(--hwy-line);
   padding-top: 16px;
}

.games-secondary {
   background: var(--hwy-subtle);
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--hwy-ink);
   cursor: pointer;
}

.games-note {
   font-size: 12px;
   color: var(--hwy-muted);
   margin: 8px 0;
}

.room-controls {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   align-items: center;
}

.join-room {
   display: flex;
   gap: 6px;
}

.join-room input {
   width: 76px;
   text-transform: uppercase;
   font-size: 15px;
   padding: 7px 8px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   letter-spacing: 2px;
}

.room-status {
   font-size: 12px;
   color: var(--hwy-accent);
   font-weight: 700;
   margin-top: 6px;
   min-height: 16px;
}

.roster-form {
   display: flex;
   gap: 8px;
   margin-top: 12px;
}

.roster-form input {
   flex: 1;
   font-size: 16px;
   padding: 10px 12px;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
}

.roster-add {
   flex: 0 0 auto;
   padding: 10px 18px;
}

.scoreboard {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 12px;
}

.score-chip {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   padding: 6px 12px;
   cursor: pointer;
   font: inherit;
   color: var(--hwy-ink);
}

.roster-hint {
   font-size: 11px;
   color: var(--hwy-muted);
   align-self: center;
   font-style: italic;
}

.score-chip.is-leader {
   background: var(--hwy-loud-bg);
   border-color: #f0dcae;
}

.score-name {
   font-weight: 700;
   font-size: 13px;
}

.score-value {
   font-weight: 800;
   font-size: 15px;
   color: var(--hwy-accent);
}

.activity-feed {
   margin-top: 8px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.activity-line {
   font-size: 12px;
   color: var(--hwy-muted);
}

.game-picker {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 8px;
   margin-top: 16px;
}

.game-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   background: var(--hwy-card);
   color: var(--hwy-ink);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 10px 6px;
   cursor: pointer;
   text-align: center;
}

.game-tile.is-active {
   border-color: var(--hwy-accent);
   background: var(--hwy-subtle);
}

.game-emoji {
   font-size: 22px;
}

.game-name {
   font-size: 11px;
   font-weight: 700;
   line-height: 1.2;
}

.game-area {
   margin-top: 14px;
}

.game-blurb {
   font-size: 13px;
   color: var(--hwy-muted);
   margin: 0 0 12px;
}

.player-pick {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin: 8px 0;
}

.player-pick.compact {
   margin: 6px 0 0;
}

.pick-button {
   background: var(--hwy-green);
   color: #fff;
   border: none;
   border-radius: 999px;
   padding: 7px 14px;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
}

.bingo-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 5px;
}

.bingo-cell {
   position: relative;
   aspect-ratio: 1;
   padding: 0;
   border: 1px solid var(--hwy-line);
   border-radius: 8px;
   background: var(--hwy-card);
   cursor: pointer;
   text-align: center;
   overflow: hidden;
}

/* The item icon fills the whole square like a background. */
.bingo-icon {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-size: clamp(38px, 14vw, 68px);
   line-height: 1;
   z-index: 0;
}

/* The label sits on top, along the bottom, on a soft strip so it stays readable
   over the icon (drop shadow does the rest). */
.bingo-text {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   font-size: 9px;
   font-weight: 700;
   line-height: 1.1;
   padding: 2px 2px 3px;
   color: var(--hwy-ink);
   background: color-mix(in srgb, var(--hwy-card) 78%, transparent);
   text-shadow: 0 1px 2px var(--hwy-card);
}

.bingo-cell.is-marked {
   background: var(--hwy-green);
   border-color: var(--hwy-accent);
}
.bingo-cell.is-marked .bingo-text {
   color: #fff;
   background: color-mix(in srgb, var(--hwy-green) 62%, transparent);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* A check overlay on marked cells so the mark reads over the big icon. */
.bingo-cell.is-marked::after {
   content: "✓";
   position: absolute;
   top: 2px;
   right: 4px;
   z-index: 2;
   font-size: 13px;
   font-weight: 800;
   color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bingo-win {
   margin-top: 12px;
   font-weight: 800;
   color: var(--hwy-accent);
   font-size: 15px;
}

.scavenger-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.scavenger-item {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 10px;
   padding: 10px 12px;
   font-size: 13px;
}

.scavenger-item em {
   color: var(--hwy-accent);
   font-style: normal;
   font-weight: 700;
}

.scavenger-item.is-found {
   opacity: 0.55;
}

.plate-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
   gap: 5px;
}

.plate-cell {
   padding: 8px 0;
   font-size: 12px;
   font-weight: 700;
   border: 1px solid var(--hwy-line);
   border-radius: 6px;
   background: var(--hwy-card);
   cursor: pointer;
}

.plate-cell.is-route {
   border-color: var(--hwy-accent);
   border-width: 2px;
}

.plate-cell.is-found {
   background: var(--hwy-green);
   color: #fff;
}

.alphabet-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
   gap: 5px;
   margin-bottom: 10px;
}

.alpha-cell {
   padding: 10px 0;
   font-size: 15px;
   font-weight: 800;
   border: 1px solid var(--hwy-line);
   border-radius: 6px;
   background: var(--hwy-card);
   cursor: pointer;
}

.alpha-cell.is-found {
   background: var(--hwy-green);
   color: #fff;
}

.twentyq-counter,
.quiet-timer {
   font-size: 28px;
   font-weight: 800;
   color: var(--hwy-accent);
   margin: 8px 0;
}

.wyr-prompt {
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 12px;
   padding: 16px;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 10px;
}

@media (min-width: 640px) {
   .map-container {
      height: 340px;
   }
   .gas-fields {
      grid-template-columns: repeat(4, 1fr);
   }
   .bingo-icon {
      font-size: clamp(40px, 7vw, 64px);
   }
   .bingo-text {
      font-size: 10px;
   }
}

/* "info ↗" links on events/traffic. */
.poi-more {
   font-size: 11px;
   font-weight: 700;
   color: var(--hwy-accent);
   text-decoration: none;
   margin-left: 6px;
   white-space: nowrap;
}
.poi-more:hover { text-decoration: underline; }

/* Reverse-route button (mobile trip form). */
.reverse-route {
   align-self: flex-start;
   margin: -2px 0 2px;
   background: var(--hwy-subtle);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   color: var(--hwy-accent);
   font-size: 12px;
   font-weight: 700;
   padding: 5px 12px;
   cursor: pointer;
}
.reverse-route:hover { background: color-mix(in srgb, var(--hwy-accent) 10%, var(--hwy-subtle)); }

/* Round trip: the checkbox next to Leave, and the flip chip on the summary. */
.field-roundtrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.roundtrip-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: var(--hwy-ink); cursor: pointer; }
.summary-return-flip {
   display: inline-block;
   background: var(--hwy-subtle);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   color: var(--hwy-accent);
   font-size: 13px;
   font-weight: 700;
   padding: 7px 13px;
   cursor: pointer;
   margin: 4px 6px 4px 0;
}
.summary-return-flip:hover { background: color-mix(in srgb, var(--hwy-accent) 10%, var(--hwy-subtle)); }

/* A promo banner has no business photobombing the show. */
body.demo-running .hwy-banner { display: none !important; }

/* Demo tour: dimmed stage, spotlight ring, callout bubble, control bar. The
   layer never eats clicks — the demo drives the real app underneath it. */
#demoLayer { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
#demoSpotlight {
   position: fixed;
   border: 3px solid var(--hwy-accent);
   border-radius: 12px;
   box-shadow: 0 0 0 6000px rgba(10, 16, 22, 0.45);
   transition: all 0.45s ease;
}
#demoBubble {
   position: fixed;
   background: var(--hwy-card);
   color: var(--hwy-ink);
   border: 2px solid var(--hwy-accent);
   border-radius: 14px;
   padding: 14px 18px;
   font-size: 16px;
   line-height: 1.45;
   font-weight: 600;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
   max-width: 340px;
   transition: left 0.45s ease, top 0.45s ease;
}
.demo-bubble-pop { animation: demoPop 0.3s ease; }
@keyframes demoPop { from { transform: scale(0.92); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
#demoBar {
   position: fixed;
   right: 18px;
   bottom: 18px;
   display: flex;
   align-items: center;
   gap: 12px;
   background: var(--hwy-card);
   border: 1px solid var(--hwy-line);
   border-radius: 999px;
   padding: 8px 10px 8px 18px;
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
   pointer-events: auto;
}
.demo-bar-label { font-weight: 800; font-size: 13px; color: var(--hwy-ink); }
#demoNext { background: var(--hwy-accent); border: 1px solid var(--hwy-accent); border-radius: 999px; padding: 6px 16px; font-size: 13px; font-weight: 800; color: #fff; cursor: pointer; }

/* The big cursor: a white arrow with a dark edge, gliding between targets. */
#demoCursor {
   position: fixed;
   width: 30px;
   height: 30px;
   pointer-events: none;
   z-index: 4002;
   transition-property: left, top;
   transition-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1);
   filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
#demoCursor::before {
   content: "";
   position: absolute;
   inset: 0;
   background: #fff;
   clip-path: polygon(0 0, 0 82%, 22% 64%, 38% 96%, 52% 89%, 37% 58%, 62% 55%);
   outline: 2px solid #1a1a1a;
}
.demo-cursor-press { animation: demoPress 0.28s ease; }
@keyframes demoPress { 30% { transform: scale(0.72); } 100% { transform: scale(1); } }

/* The attention flash on the exact control the demo is about to use. */
.demo-flash {
   outline: 3px solid var(--hwy-accent) !important;
   outline-offset: 2px;
   box-shadow: 0 0 0 6px color-mix(in srgb, var(--hwy-accent) 35%, transparent) !important;
   border-radius: 6px;
}

/* A <select> rendered open (via a temporary size) while the demo walks it. */
.demo-select-open { position: relative; z-index: 4001; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
.demo-option-hover { background: var(--hwy-accent) !important; color: #fff !important; }
#demoStop, #demoPause, #demoBack, #demoFwd { background: var(--hwy-subtle); border: 1px solid var(--hwy-line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--hwy-ink); cursor: pointer; }
#demoStop:hover, #demoPause:hover, #demoBack:hover, #demoFwd:hover { color: var(--hwy-accent); }
#demoBack, #demoFwd { padding: 6px 10px; }
#demoLayer.demo-paused #demoBubble { opacity: 0.75; }
#demoLayer.demo-paused .demo-bar-label::after { content: " · paused"; color: var(--hwy-accent); }

/* Total trip cost rollup. */
.gas-tripcost {
   margin: 10px 0;
   padding: 10px 12px;
   border-radius: 12px;
   background: color-mix(in srgb, var(--hwy-green) 10%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-green) 40%, var(--hwy-line));
}
.gas-tripcost-total { font-size: 16px; font-weight: 800; color: var(--hwy-accent); }
.gas-tripcost-note { font-size: 11.5px; color: var(--hwy-muted); margin-top: 2px; }

/* Data-trust freshness chip */
.fresh-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--hwy-muted); background: color-mix(in srgb, var(--hwy-ink) 6%, transparent); border-radius: 999px; padding: 4px 10px; margin: 2px 0 10px; }
.fresh-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.fresh-live { background: #34c98a; box-shadow: 0 0 6px 1px rgba(52, 201, 138, 0.5); }
.fresh-cached { background: #e0a53a; }

.poi-clearance { border-color: color-mix(in srgb, #e67e22 70%, var(--hwy-line)) !important; background: color-mix(in srgb, #e67e22 12%, transparent) !important; }
.poi-clearance .poi-live-head { color: var(--hwy-warn-ink) !important; }

/* ── Crowdsourced community reports (fuel + hazards) ───────────────────── */
.cm-block { margin: 12px 0; }
.cm-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cm-block-head h4 { margin: 0; font-size: 14px; }
.cm-report-btn { background: var(--hwy-green); color: #fff; border: none; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; text-decoration: none; }
.cm-driving { font-size: 12px; color: var(--hwy-warn-ink); background: var(--hwy-warn-bg); border-radius: 999px; padding: 4px 10px; }
.cm-empty { font-size: 13px; color: var(--hwy-muted); margin: 4px 0; }
.cm-card { border: 1px solid var(--hwy-line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--hwy-card); }
.cm-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cm-ico { font-size: 17px; }
.cm-meta { color: var(--hwy-muted); font-size: 12px; font-weight: 400; }
.cm-comment { font-size: 13.5px; margin: 6px 0; }
.cm-photo { max-width: 100%; border-radius: 10px; margin-top: 6px; display: block; }
.cm-accident, .cm-police { border-left: 3px solid #c0392b; }
.cm-construction { border-left: 3px solid #e67e22; }
.cm-fuel-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-fuel-price { font-size: 20px; font-weight: 800; color: var(--hwy-green); }
.cm-fuel-price span { font-size: 12px; color: var(--hwy-muted); font-weight: 600; }
.cm-fuel-where { display: flex; flex-direction: column; flex: 1; min-width: 120px; font-size: 13.5px; }
.cm-thumbs { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cm-thumb { background: var(--hwy-subtle); border: 1px solid var(--hwy-line); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: inherit; }
.cm-thumb.is-on { background: color-mix(in srgb, var(--hwy-green) 18%, transparent); border-color: var(--hwy-green); color: var(--hwy-green); font-weight: 800; }
.cm-thumb-names { font-size: 11.5px; color: var(--hwy-muted); }

.cm-overlay { position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cm-modal { background: var(--hwy-card); color: var(--hwy-ink); border-radius: 16px; width: min(420px, 100%); padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.cm-r-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cm-r-x { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--hwy-muted); }
.cm-r-row { display: flex; gap: 8px; margin-bottom: 8px; }
.cm-modal input, .cm-modal select, .cm-modal textarea { font: inherit; font-size: 15px; padding: 9px; border: 1px solid var(--hwy-line); border-radius: 9px; background: var(--hwy-sand); color: var(--hwy-ink); width: 100%; box-sizing: border-box; }
.cm-modal textarea { resize: vertical; margin: 8px 0; }
.cm-r-photo-btn { display: inline-block; background: var(--hwy-subtle); border-radius: 9px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cm-r-preview img { max-width: 100%; border-radius: 10px; margin-top: 8px; }
.cm-r-error { color: var(--hwy-error); font-size: 13px; min-height: 16px; }
.cm-r-submit { width: 100%; background: var(--hwy-green); color: #fff; border: none; border-radius: 10px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer; margin-top: 6px; }
.cm-flash { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; background: #0d3b2e; color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); font-size: 14px; font-weight: 700; transition: opacity 0.4s, transform 0.4s; }
.cm-flash.is-out { opacity: 0; transform: translateX(-50%) translateY(10px); }

/* ── App menu (hamburger) ─────────────────────────────────────────────────────
   Shared across every page (they all load app.css, which defines the tokens).
   Colors ride --hwy-card/--hwy-ink so the popup follows the RESOLVED mode —
   data-mode where the settings shell runs, OS scheme elsewhere — never a bare
   prefers-color-scheme query, which disagrees with a forced light/dark theme.
   The cockpit embeds it inline (.app-menu-wrap); other pages get a floating
   variant (.app-menu-fab) injected by appMenu.js. */
.app-menu-wrap { position: relative; }
.app-menu-fab { position: fixed; top: 10px; right: 12px; z-index: 3100; }
.app-menu-toggle-fab {
   width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
   border: 1px solid var(--hwy-line, rgba(0, 0, 0, 0.15));
   background: color-mix(in srgb, var(--hwy-card, #ffffff) 94%, transparent); color: var(--hwy-ink, #1d1d1f);
   font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.app-menu {
   position: absolute; top: calc(100% + 8px); right: 0; z-index: 3100;
   min-width: 216px; padding: 6px;
   background: var(--hwy-card, #ffffff); color: var(--hwy-ink, #1d1d1f);
   border: 1px solid var(--hwy-line, rgba(0, 0, 0, 0.12)); border-radius: 12px;
   box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}
/* The dropdown is injected inside each page's own nav, so page rules like
   `.admin-nav a` or `.admin-nav button` (0-1-1) would out-specify a bare
   `.app-menu-item` (0-1-0) and restyle just those items against a menu surface
   they were never tested on. Scope through .app-menu to stay above them. */
.app-menu .app-menu-item {
   display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
   padding: 9px 12px; border: none; background: transparent; color: inherit;
   font: inherit; font-size: 14px; font-weight: 600; text-align: left;
   text-decoration: none; border-radius: 8px; cursor: pointer;
}
.app-menu .app-menu-item:hover { background: color-mix(in srgb, var(--hwy-ink, #000) 8%, transparent); }
.app-menu .app-menu-item[aria-pressed="true"] { background: rgba(109, 59, 214, 0.14); }
.app-menu-item .ami-ico, .app-menu-you .ami-ico { font-size: 16px; width: 20px; flex: 0 0 20px; text-align: center; }
.app-menu-sep { height: 1px; margin: 6px 4px; background: var(--hwy-line, rgba(0, 0, 0, 0.1)); }
.app-menu-you { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; font-size: 12.5px; color: var(--hwy-muted, #6b7280); }
.app-menu-you span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-menu-toggle-inline {
   background: transparent; border: none; color: inherit; cursor: pointer;
   font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.app-menu-toggle-inline:hover { background: rgba(128, 128, 128, 0.18); }

/* Star ratings: 5★ = MUST STOP … 1★ = windows up, doors locked, drive faster. */
.poi-interest { display: inline-flex; gap: 2px; }
.poi-interest .poi-star { border: none; background: none; cursor: pointer; padding: 1px 2px; font-size: 17px; line-height: 1; color: var(--hwy-muted, #8a97a5); }
.poi-interest .poi-star.is-filled { color: #f0b429; }
.poi-interest .poi-star.is-filled.is-skip { color: #e0563a; }
.poi-interest .poi-star:hover { transform: scale(1.15); }

/* Meetup "why here" — the places that won the ranking, linked. */
.meetup-why { margin-top: 6px; }
.meetup-why-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-muted); }
.meetup-why-item { display: block; font-size: 12.5px; font-weight: 600; color: var(--hwy-accent); text-decoration: none; padding: 1px 0; }
.meetup-why-item:hover { text-decoration: underline; }