/* ─── App design tokens ───────────────────────────────────────────────────── */
:root {
  --app-teal:   #00887A;
  --app-orange: #F56437;
  --app-black:  #0D0D0D;
  --app-surf:   #181818;
  --app-surf2:  #242424;
  --app-text:   #EDEBE8;
  /* muted bumped 8A8680 → A39E97 (2026-05-23) for stronger secondary-text
     contrast on dark theme — old value rendered as near-illegible gray on
     the warm surface for accessibility-sensitive users. */
  --app-muted:  #A39E97;
  /* border bumped 2D2A27 → 3D3833 (2026-05-23) so input + card edges read
     as distinct against the warm-dark surface instead of dissolving in. */
  --app-border: #3D3833;
  --app-header: #111111;
}

/* ─── Interactive section ─────────────────────────────────────────────────── */
.app-section {
  position: relative;
  /* Nav is 80px + 5px teal border = 85px sticky header height. Subtract an
     extra 50px so the .post-app-strip marketing panel underneath peeks into
     view at the bottom — hints there's more page below without dumping the
     user straight into the black footer. */
  height: calc(100vh - 85px - 50px);
  min-height: 580px;
  overflow: hidden;
  background: #0a0a0a;
}

/* ─── Post-app marketing strip ────────────────────────────────────────────
   The 50px strip that peeks below .app-section. Cream tan to match the
   modal + panel light theme — keeps the warm-light color block continuous
   in the visual flow from header to where the dark footer eventually picks up. */
.post-app-strip {
  background: #F5F1EB;
  height: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
  color: #1C1917;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  border-top: 1px solid #E2D9CE;
  text-align: center;
}
.post-app-strip a { color: #00897b; font-weight: 700; text-decoration: none; }
.post-app-strip a:hover { color: #006B61; text-decoration: underline; }

/* ─── App panel ───────────────────────────────────────────────────────────── */
/* Left-pinned column showing whichever app screen is active. Sized close to a
   real phone screen's natural width so the inside-screen UI looks like the
   real app, without the phone-frame's scaling penalty or sliding behavior.
   The Google Map fills the section behind it, always visible on the right. */
.app-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(440px, 40vw);
  min-width: 360px;
  background: var(--app-black);
  border-right: 1px solid var(--app-border);
  box-shadow: 8px 0 32px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.app-panel.hidden { display: none; }
@media (max-width: 880px) {
  .app-panel { width: 100%; min-width: 0; border-right: none; box-shadow: none; }
}

/* Hamburger menu button — overlay at top-right of the map area.
   Lives at .app-section level (sibling of .app-panel), not inside the panel.
   Darker teal than the brand teal so it reads as an actionable control
   floating on the map. */
.app-hamburger {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 30;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: #006B60;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.app-hamburger:hover  { background: #00554C; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); }
.app-hamburger:active { transform: scale(0.96); }
.app-hamburger.hidden { display: none; }
.app-hamburger.open   { background: #004A42; }

/* ─── Map-area dim overlay ─────────────────────────────────────────────────
   Shown on Simple Calculator + Time Away screens — those tools don't use the
   map, so we dim it and explain that the inputs/outputs live in the panel on
   the left. */
.map-dim-overlay {
  position: absolute;
  top: 0; left: min(440px, 40vw); right: 0; bottom: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.map-dim-overlay[hidden] { display: none; }
@media (max-width: 880px) { .map-dim-overlay { display: none !important; } }
.map-dim-overlay__inner {
  max-width: 460px;
  text-align: center;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.map-dim-overlay__arrow {
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  margin-right: 8px;
  vertical-align: -3px;
  animation: dim-arrow-nudge 1.6s ease-in-out infinite;
}
@keyframes dim-arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}

/* Simple Calculator results — centered floating modal on the map area.
   Replaces the dim note while it's visible. Cream surface matches the
   onboarding modal so the look is consistent across in-map cards.
   The in-panel #calc-results stays as the mobile fallback (hidden via
   the desktop media query below). */
.calc-results-modal {
  background: #F5F1EB;
  border: 1px solid #E2D9CE;
  border-radius: 20px;
  box-shadow: 0 28px 72px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.3);
  padding: 24px 28px 18px;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  color: #1C1917;
}
.calc-results-modal[hidden] { display: none; }
.calc-results-modal__title {
  font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #78716C;
  text-align: center; margin-bottom: 14px;
}
/* Inside the light modal, the existing .result-* rules use teal/dark
   colors that already work on cream — no overrides needed. */

/* On desktop, suppress the in-panel results card — the floating modal
   on the map is the canonical surface for results there. */
@media (min-width: 881px) {
  #calc-results { display: none !important; }
}

/* ─── App menu drawer (hamburger menu inside phone) ─────────────────────── */
.app-menu-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 60;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.app-menu-backdrop.open { opacity: 1; pointer-events: auto; }
.app-menu {
  position: absolute; top: 70px; right: 20px;
  width: 220px;
  background: var(--app-surf);
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 61;
  overflow: hidden;
  transform: translateY(-6px) scale(.98);
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.app-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.app-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-size: 12px; font-weight: 600; color: var(--app-text);
  cursor: pointer;
  border-bottom: 1px solid var(--app-border);
  background: transparent; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: left; font-family: inherit;
  transition: background .12s;
}
.app-menu-item:last-child { border-bottom: none; }
.app-menu-item:hover { background: var(--app-surf2); }
.app-menu-item-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.app-menu-item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.app-menu-item-sub {
  font-size: 8px; font-weight: 600; color: var(--app-muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* Scrollable screen content — narrow teal-tinted scrollbar so users on
   longer screens can see how far they've scrolled. */
.app-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 136, 122, 0.55) transparent;
  min-width: 0;
}
.app-content::-webkit-scrollbar { width: 6px; }
.app-content::-webkit-scrollbar-track { background: transparent; }
.app-content::-webkit-scrollbar-thumb {
  background: rgba(0, 136, 122, 0.55);
  border-radius: 3px;
}
.app-content::-webkit-scrollbar-thumb:hover { background: rgba(0, 136, 122, 0.85); }

/* ─── Panel top strip — "New plan" text link (replaces the bottom tab bar) ── */
.panel-top {
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--app-border);
}
.panel-newplan {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--app-teal); text-decoration: none;
  cursor: pointer; transition: opacity .15s;
}
.panel-newplan:hover { opacity: .65; }
.panel-newplan__plus { font-size: 15px; font-weight: 800; line-height: 1; }

/* ─── Panel bottom strip — always-available Preferences entry point ─────────
   The web version has no hamburger menu, so this pinned link is how users
   reach (and leave) the Preferences screen. The label/icon flip to a Back
   affordance while the Preferences screen is showing (see showScreen). */
.panel-bottom {
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--app-border);
}
.panel-prefs {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px;
  color: var(--app-muted); text-decoration: none;
  cursor: pointer; transition: color .15s; font-family: inherit;
  background: none; border: none; padding: 0;
}
.panel-prefs:hover { color: var(--app-teal); }
.panel-prefs svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ─── Tab bar ─────────────────────────────────────────────────────────────── */
.tab-bar {
  height: 64px; flex-shrink: 0;
  background: var(--app-header); border-top: 1px solid var(--app-border);
  display: flex;
}
.tab {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; opacity: .35; transition: opacity .2s;
}
.tab.active { opacity: 1; }
.tab-ic { width: 22px; height: 22px; }
.tab-ic svg { width: 22px; height: 22px; color: var(--app-muted); transition: color .15s; }
.tab.active .tab-ic svg { color: var(--app-teal); }
.tab-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--app-muted); transition: color .15s;
}
.tab.active .tab-lbl { color: var(--app-teal); }

/* ─── Form screen ─────────────────────────────────────────────────────────── */
.form-scroll { padding: 4px 0 14px; }

/* Form cards — each section is a card matching the app */
.form-card {
  margin: 10px 12px 0;
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 14px; padding: 14px;
  min-width: 0; overflow: hidden;
}
.form-card-title {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  /* Brand teal — matches the real app's cardTitle (t.primary). Pulls
     section headers (ROUTE / DETOURS / DEPARTURE / DAILY SETTINGS)
     out of the muted-gray noise and gives the form clear scannability. */
  color: var(--app-teal); text-transform: uppercase; margin-bottom: 12px;
}

/* Attention-grabbing flash when Plan My Trip is clicked with empty
   origin/destination — light-orange wash on the route card + orange
   borders on the missing input rows, both fading back to default over
   2 s. Triggered by JS adding .warn-flash; restart on rapid re-clicks
   is handled by removing + re-adding the class with a forced reflow. */
@keyframes routeCardWarnFlash {
  0%   { background: rgba(237,125,50,0.20); }
  100% { background: var(--app-surf); }
}
.form-card.warn-flash { animation: routeCardWarnFlash 2s ease-out; }

@keyframes inputCardWarnFlash {
  0%   { box-shadow: inset 0 0 0 2px #F56437; }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
/* Applied to the .input-card (not the inner .input-row) so the inset
   shadow follows the card's 14px border-radius instead of getting
   clipped square by the row's right-angle edges. */
.input-card.warn-flash { animation: inputCardWarnFlash 2s ease-out; }

/* Collapsible form-card. The title row becomes a button (header + chevron),
   and the body height transitions via max-height — keeps the panel
   compact by default and surfaces content on click or when the page
   programmatically expands it (e.g., when destination is set so the
   Suggest by Interest list becomes meaningful). */
.form-card--collapsible .form-card-toggle {
  width: 100%;
  background: none; border: none; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: pointer; font-family: inherit; text-align: left;
  color: inherit;
}
.form-card--collapsible .form-card-title { margin-bottom: 0; }
.form-card-chevron {
  width: 16px; height: 16px;
  color: var(--app-orange);
  flex-shrink: 0;
  transition: transform .2s ease;
  /* SVG stroke-width is set inline (3); bumped from 2.4 so the chevron
     reads as deliberate brand chrome instead of a faint hint. */
}
.form-card--collapsible.is-expanded .form-card-chevron { transform: rotate(180deg); }
.form-card--collapsible .form-card__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .2s ease, margin-top .2s ease;
  margin-top: 0;
}
.form-card--collapsible.is-expanded .form-card__body {
  max-height: 2000px;
  opacity: 1;
  margin-top: 12px;
}

/* PlaceSearch label + current location button */
.ps-label-row { font-size: 12px; font-weight: 600; color: var(--app-text); margin-bottom: 6px; }
.ps-wrap { margin-bottom: 4px; }
/* Crosshair icon button inside the origin input — Google-Maps-style
   "use my current location" affordance. Sits flush at the right edge
   of the input-card, square 36×36 tap target with a 20px icon inside.
   Teal so it reads as a brand action; subtle hover background. */
.current-loc-icon-btn {
  appearance: none;
  background: transparent;
  border: none;
  width: 36px; height: 36px;
  margin-right: 4px;
  border-radius: 50%;
  color: var(--app-teal);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s, transform .12s;
}
.current-loc-icon-btn:hover { background: rgba(0,136,122,.10); }
.current-loc-icon-btn:active { transform: scale(0.94); }
.current-loc-icon-btn svg { width: 20px; height: 20px; }

/* Legacy text-link version — no longer rendered, kept in case any other
   form path still references the class. Removed from the ROUTE card on
   2026-05-23 in favor of the icon button above. */
.current-loc-btn {
  background: none; border: none; outline: none; display: block;
  color: var(--app-teal); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; padding: 7px 0 2px;
  transition: opacity .15s;
}
.current-loc-btn:hover { opacity: .75; }

/* Route divider — just a bold teal ↓ arrow between the Start From
   and Destination input cards. The flanking horizontal lines were
   dropped 2026-05-23 — they read as section breaks rather than as
   a relationship between the two fields above and below. */
.route-divider { display: flex; align-items: center; justify-content: center; padding: 4px 0; margin: 2px 0; }
.route-arrow-down { width: 16px; height: 16px; color: var(--app-teal); }
/* Legacy classes — kept so any other route layout that still emits
   .route-line / .route-arrow renders without breaking. */
.route-line  { flex: 1; height: 1px; background: var(--app-border); }
.route-arrow { font-size: 15px; color: var(--app-muted); flex-shrink: 0; }

/* Destination hint */
.dest-hint { font-size: 11px; color: var(--app-muted); line-height: 1.5; margin-top: 10px; }

/* Field rows inside a form-card (no extra wrapper needed) */
.form-card .field-row { padding: 0; min-height: 44px; }
.form-card .field-label-col { padding: 12px 0; }

/* Value pill (date / time) */
.value-pill {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--app-surf2); border: 1px solid var(--app-border);
  border-radius: 10px; padding: 6px 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--app-text);
  min-width: 88px; user-select: none;
}
.value-pill input[type=date],
.value-pill input[type=time] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* Param grid (Daily Settings) */
.param-grid { display: flex; gap: 8px; margin-bottom: 12px; }
.param-cell {
  flex: 1; background: var(--app-black); border: 1.5px solid var(--app-border);
  border-radius: 14px; padding: 10px 4px 8px;
  display: flex; flex-direction: column; align-items: center;
}
.param-cell-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: .8px;
  color: var(--app-muted); text-transform: uppercase;
  text-align: center; line-height: 13px; margin-bottom: 4px;
}
.param-cell-value {
  font-size: 22px; font-weight: 800; color: var(--app-teal);
  background: transparent; border: none; outline: none;
  text-align: center; width: 100%; font-family: inherit;
  padding: 0; -moz-appearance: textfield;
}
.param-cell-value::-webkit-inner-spin-button,
.param-cell-value::-webkit-outer-spin-button { -webkit-appearance: none; }
.param-cell-unit {
  font-size: 8.5px; font-weight: 600; color: var(--app-muted);
  letter-spacing: .4px; margin-top: 3px; text-align: center;
}
.range-tank-hint {
  font-size: 10.5px; color: var(--app-muted); line-height: 1.5; margin-bottom: 4px;
}

/* Gas station toggle row */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 11px; margin-top: 10px;
  border-top: 1px solid var(--app-border); cursor: pointer;
}
.toggle-row-left { flex: 1; margin-right: 12px; }
.toggle-pill {
  padding: 4px 12px; border-radius: 12px; flex-shrink: 0;
  background: var(--app-border);
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6);
  user-select: none; transition: background .15s;
}
.toggle-pill.on { background: var(--app-teal); color: #fff; }

/* Detour intro text */
.detour-intro { font-size: 11px; color: var(--app-muted); line-height: 1.5; margin-bottom: 10px; }

/* Suggest-by-interest section */
.suggest-section-header {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--app-muted); text-transform: uppercase; margin: 10px 0 8px;
}
.detour-cat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.detour-cat-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  border: 1.5px solid var(--app-border); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.detour-cat-chip.active { border-color: var(--app-teal); border-width: 2px; background: rgba(0,137,123,.12); }
.detour-cat-text { font-size: 11px; font-weight: 600; color: var(--app-muted); transition: color .15s; }
.detour-cat-chip.active .detour-cat-text { color: var(--app-teal); }
.detour-cat-ic { display: inline-flex; color: var(--app-muted); transition: color .15s; }
.detour-cat-ic svg { display: block; width: 14px; height: 14px; }
.detour-cat-chip.active .detour-cat-ic { color: var(--app-teal); }
.find-suggestions-btn {
  display: inline-flex; align-items: center; margin-top: 10px;
  background: var(--app-teal); border: none; border-radius: 20px;
  padding: 7px 16px; color: #fff; font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.find-suggestions-btn:hover { opacity: .85; }
.find-route-note {
  font-size: 11px; color: var(--app-muted); line-height: 1.5;
  margin-top: 8px; padding: 9px 12px;
  background: rgba(0,136,122,.07); border-radius: 10px;
  border-left: 2px solid var(--app-teal);
}

/* Suggestion results */
#suggestion-results { min-width: 0; overflow: hidden; width: 100%; }
.suggestions-header {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--app-muted); text-transform: uppercase; margin: 12px 0 8px;
}
.suggestion-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-top: 1px solid var(--app-border);
  min-width: 0; overflow: hidden;
}
.suggestion-info { flex: 1; min-width: 0; }
.suggestion-name {
  font-size: 12px; font-weight: 700; color: var(--app-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-addr {
  font-size: 10px; color: var(--app-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.suggestion-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.suggestion-cat  { font-size: 10px; color: var(--app-muted); }
/* The category icon is an inline 24x24-viewBox SVG with no intrinsic size — pin
   it small (like the detour chips) so it doesn't render at the default huge size. */
.suggestion-cat svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.suggestion-rating { font-size: 10px; color: #F5C842; }
.suggestion-dist { font-size: 10px; color: var(--app-muted); word-break: break-word; }
.suggestion-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.suggestion-add-btn {
  width: 28px; height: 28px; border-radius: 14px;
  border: 1.5px solid var(--app-teal); background: transparent;
  color: var(--app-teal); font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: background .15s;
}
.suggestion-add-btn.added { background: var(--app-teal); color: #fff; font-size: 13px; cursor: default; }
/* Secondary "Details" icon button beside the add (+) — opens the place modal so
   users can vet a spot before adding it. Subtler than the teal-bordered + btn. */
.suggestion-detail-btn {
  width: 28px; height: 28px; border-radius: 14px; padding: 0;
  border: 1.5px solid var(--app-border); background: transparent; color: var(--app-teal);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s;
}
.suggestion-detail-btn:hover { background: rgba(0,136,122,.12); border-color: var(--app-teal); }
.suggestion-detail-btn svg { display: block; }
.suggestion-pagination { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 2px; }
.suggestion-page-btn { background: none; border: none; color: var(--app-teal); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.suggestion-page-btn:disabled { color: var(--app-muted); opacity: 0.3; cursor: default; }
.suggestion-page-info { font-size: 11px; color: var(--app-muted); }
.suggestions-loading {
  font-size: 12px; color: var(--app-muted); padding: 10px 0;
  text-align: center; display: flex; flex-direction: column; align-items: center;
}

/* Add Manually button (teal outline, matches app's addDetourBtn) */
.add-detour-btn-new {
  display: inline-flex; align-items: center; margin-top: 10px;
  background: transparent; border: 1.5px solid var(--app-teal);
  border-radius: 20px; padding: 6px 16px;
  color: var(--app-teal); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.add-detour-btn-new:hover { opacity: .75; }
#detour-input-wrap.below-btn { margin-top: 8px; }

/* Meal-section search (Choose Restaurants → "+ Search" by name) */
.meal-search-wrap {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.rest-search-input {
  width: 100%; box-sizing: border-box;
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 10px; padding: 10px 12px;
  color: var(--app-text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s;
}
.rest-search-input:focus { border-color: rgba(0,136,122,.65); }
.rest-search-input::placeholder { color: var(--app-muted); }
.meal-search-cancel {
  align-self: flex-start;
  background: none; border: none; color: var(--app-muted);
  font-size: 12px; font-weight: 600; padding: 2px 4px;
  cursor: pointer; font-family: inherit;
}
.meal-search-cancel:hover { color: var(--app-text); }
.input-card {
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 14px; overflow: hidden;
}
.input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 48px;
  transition: background .15s;
}
.input-row + .input-row { border-top: 1px solid var(--app-border); }
.input-row.confirmed { background: rgba(0,136,122,.06); }
.input-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; transition: box-shadow .2s; }
.input-row.confirmed .input-dot { box-shadow: 0 0 0 4px rgba(0,136,122,.18); }
.dot-start { background: var(--app-teal); }
.dot-end   { background: #ef5350; }
.input-row input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--app-text); font-size: 14px; font-family: inherit;
}
.input-row input::placeholder { color: var(--app-muted); }

/* Start-location: compact one-line indicator (detecting + resolved summary)
   so the form keeps the destination as its single open field. Tight footprint
   — sits just above the destination card, no boxed row, no divider. */
.origin-compact {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 4px 8px; min-width: 0;
}
/* `display:flex` (author, class) outranks the UA `[hidden]{display:none}` rule,
   so the bare `hidden` attr can't hide these — force it (same gotcha as
   .nav__login[hidden] sitewide). */
.origin-compact[hidden] { display: none !important; }
.origin-compact-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app-teal); flex-shrink: 0; }
.origin-compact-text {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--app-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.origin-compact-text strong { font-weight: 700; color: var(--app-text); }
.origin-change-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--app-teal); font-size: 12.5px; font-weight: 600; padding: 2px 2px; flex-shrink: 0;
}
.origin-change-btn:hover { text-decoration: underline; }
.origin-spinner {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(0,136,122,.25); border-top-color: var(--app-teal);
  animation: originSpin .7s linear infinite;
}
@keyframes originSpin { to { transform: rotate(360deg); } }

/* Departure pill buttons */
.depart-pills { display: flex; gap: 8px; }
.depart-pill {
  flex: 1;
  position: relative;
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; transition: border-color .15s; overflow: hidden;
}
.depart-pill:hover { border-color: rgba(0,136,122,.5); }
.depart-pill.confirmed { border-color: rgba(0,136,122,.55); }
.depart-pill-label {
  font-size: 9px; font-weight: 700; color: var(--app-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.depart-pill-val { font-size: 13px; font-weight: 700; color: var(--app-text); }
.depart-pill input[type=date],
.depart-pill input[type=time] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}

/* ─── Field rows (replaces sliders) ─────────────────────────────────────────*/
.field-card {
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 14px; overflow: hidden;
}
.field-row {
  display: flex; align-items: center;
  padding: 0 14px; min-height: 52px;
  border-bottom: 1px solid var(--app-border);
}
.field-row:last-child { border-bottom: none; }
.field-label-col { flex: 1; padding: 10px 0; }
.field-label { font-size: 13px; font-weight: 600; color: var(--app-text); }
.field-hint { font-size: 10px; color: var(--app-muted); margin-top: 2px; }
.field-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.field-input {
  width: 68px; background: var(--app-surf2);
  border: 1.5px solid var(--app-border); border-radius: 9px;
  color: var(--app-text); font-size: 15px; font-weight: 700;
  font-family: inherit; text-align: right; padding: 6px 10px;
  outline: none; transition: border-color .15s;
  -moz-appearance: textfield;
}
.field-input::-webkit-inner-spin-button,
.field-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field-input:focus { border-color: rgba(0,136,122,.65); }
.field-unit { font-size: 11px; font-weight: 600; color: var(--app-muted); }
.field-calc { font-size: 13px; font-weight: 700; color: var(--app-teal); }

/* ─── Detour stops ───────────────────────────────────────────────────────── */
.detour-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-width: 0; }
.detour-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--app-surf); border: 1px solid var(--app-border);
  border-radius: 10px; padding: 9px 12px;
  min-width: 0; overflow: hidden;
}
.detour-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #7C4DFF; flex-shrink: 0;
}
.detour-chip-name {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--app-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detour-chip-remove {
  background: none; border: none; color: var(--app-muted); font-size: 17px;
  cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0;
  transition: color .15s;
}
.detour-chip-remove:hover { color: #ef5350; }
#detour-input-wrap { margin-bottom: 8px; }
.add-detour-btn {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 10px 12px;
  background: transparent; border: 1.5px dashed rgba(124,77,255,.35);
  border-radius: 10px; color: rgba(124,77,255,.7);
  font-size: 12px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.add-detour-btn:hover { border-color: rgba(124,77,255,.65); color: #7C4DFF; }

/* Plan button */
.plan-btn {
  display: block; width: calc(100% - 28px); margin: 2px 14px 14px;
  height: 52px; background: var(--app-orange); color: #fff;
  font-size: 15px; font-weight: 700; border: none; border-radius: 14px;
  cursor: pointer; letter-spacing: .1px; transition: opacity .15s; font-family: inherit;
}
.plan-btn:hover  { opacity: .9; }
.plan-btn:active { opacity: .75; }
.plan-btn:disabled { opacity: .35; cursor: default; }

/* ─── Planning screen ─────────────────────────────────────────────────────── */
#screen-planning {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 28px; gap: 18px; overflow: hidden;
}
/* ─── Wave loader ────────────────────────────────────────────────────────── */
.wave-loader {
  overflow: hidden; width: 150px; height: 16px;
  display: flex; align-items: center;
}
.wave-loader svg { flex-shrink: 0; animation: wave-flow 1.12s linear infinite; }
/* Translate by exactly 2 full peak-valley periods (60 × 2 = 120) per cycle so
   the snap-back lands on the same phase of the wave — seamless, no jump. */
@keyframes wave-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-120px); }
}
.plan-route-lbl {
  font-size: 12px; font-weight: 700; color: var(--app-teal);
  padding: 5px 14px; background: rgba(0,136,122,.12); border-radius: 20px;
}
.plan-heading { font-size: 20px; font-weight: 700; color: var(--app-text); }
.plan-status  { font-size: 15px; color: var(--app-teal); text-align: center; padding: 0 18px; max-width: 320px; white-space: pre-wrap; }
.plan-note    { font-size: 12px; color: var(--app-muted); text-align: center; }

.plan-error-actions { display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
#screen-planning.has-error .wave-loader,
#screen-planning.has-error .plan-heading,
#screen-planning.has-error .plan-note { display: none; }
#screen-planning.has-error .plan-status { color: var(--app-text); font-size: 14px; line-height: 1.55; }
#screen-planning.has-error .plan-error-actions { display: flex; }
.plan-error-back {
  padding: 10px 22px; border-radius: 999px;
  background: var(--app-teal); color: #fff; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.plan-error-back:hover { opacity: .92; }

/* ─── Results screen ─────────────────────────────────────────────────────── */
/* (Stats strip moved out of the panel — see .trip-stats-bar floating overlay.) */

/* Trip header (top of the results scroll area) */
.trip-header {
  padding: 14px 14px 6px;
}
.trip-name-display {
  font-size: 20px; font-weight: 800; color: var(--app-text);
  line-height: 1.2; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trip-route-line {
  font-size: 11px; color: var(--app-muted);
  margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Bottom action buttons (matches real app backToFormBtn + newRideBtn) */
.edit-plan-btn, .new-ride-btn {
  display: block;
  padding: 11px 20px; background: transparent;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; text-align: center;
  width: calc(100% - 28px);
  transition: opacity .15s;
}
.edit-plan-btn {
  margin: 6px 14px 6px;
  border: 1px solid var(--app-border);
  color: var(--app-muted);
}
.edit-plan-btn:hover { border-color: var(--app-teal); color: var(--app-teal); }
.new-ride-btn {
  margin: 0 14px 18px;
  border: 1.5px solid var(--app-teal);
  color: var(--app-teal);
}
.new-ride-btn:hover { opacity: .8; }

/* ─── Trip stats bar (floats over the map once a plan exists) ─────────────── */
/* Lives at .app-section level (sibling of #map, #map-panel). Four standalone
   pill-cards spaced evenly across the top of the map area, offset from the
   .app-panel's right edge. Hidden until a plan is rendered (showScreen toggles
   [hidden]). Hidden entirely on mobile — the panel is full-width and the
   trip-header's "N days · X miles" line already carries the headline numbers. */
.trip-stats-bar {
  position: absolute;
  /* Bottom-aligned with the #map-panel "Route Overview" card (bottom: 24px)
     so the stats cards and the legend card share a baseline along the
     bottom of the map area. */
  bottom: 24px;
  left: calc(min(440px, 40vw) + 20px);
  right: 20px;
  max-width: 540px;
  z-index: 21;
  display: flex; align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none; /* cards re-enable for hover */
}
.trip-stats-bar[hidden] { display: none; }
@media (max-width: 880px) { .trip-stats-bar { display: none !important; } }

.trip-stats-cell {
  pointer-events: auto;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px 5px;
  background: linear-gradient(180deg, rgba(0,136,122,.97) 0%, rgba(0,109,99,.97) 100%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
}
.trip-stats-label {
  font-size: 7.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: rgba(255,255,255,.7);
  margin-bottom: 2px;
}
.trip-stats-value {
  font-size: 15px; font-weight: 800; color: #fff;
  line-height: 1.05; letter-spacing: -.02em;
}
.trip-stats-value--sm { font-size: 12px; }
.trip-stats-unit {
  font-size: 7.5px; font-weight: 600; color: rgba(255,255,255,.55);
  margin-top: 1px; text-transform: uppercase; letter-spacing: .4px;
}

/* Day cards list */
.days-list { padding: 10px; display: flex; flex-direction: column; gap: 10px; }

/* ─── Day card ───────────────────────────────────────────────────────────── */
.day-card {
  background: var(--app-surf);
  border: 1.5px solid rgba(0,136,122,.33);
  border-radius: 12px; overflow: hidden;
  transition: border-color .2s, opacity .2s;
  margin-bottom: 0;
}
.day-card.done { border-color: rgba(0,136,122,.15); opacity: .72; }

/* Day card header */
.day-header {
  padding: 12px 14px 10px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.day-header-left { flex: 1; min-width: 0; }
.day-title { font-size: 13px; font-weight: 800; color: var(--app-text); line-height: 1.2; }
.day-of { font-weight: 500; color: var(--app-muted); }
.day-date { font-size: 10.5px; color: var(--app-muted); margin-top: 2px; }
.day-done-badge {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--app-teal); color: #fff;
  font-size: 11px; font-weight: 900; display: none;
  align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.day-card.done .day-done-badge { display: flex; }
.day-miles-badge { text-align: right; flex-shrink: 0; }
.day-miles-num { font-size: 20px; font-weight: 800; color: var(--app-text); line-height: 1; }
.day-miles-unit {
  font-size: 9px; font-weight: 700; color: var(--app-muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* Day route — two "From" / "To" rows, mirrors TripPlannerScreen.js:1430-1440
   (routeRow/routeLabel/routeValue in the real app). "To" falls back to
   selectedOvernight name when an overnight is chosen for the day. */
.day-route-block {
  padding: 0 14px 10px;
}
.route-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 3px;
}
.route-row:last-child { margin-bottom: 0; }
.route-label {
  color: var(--app-muted); font-size: 11px; font-weight: 600;
  width: 30px; flex-shrink: 0;
}
.route-value {
  color: var(--app-text); font-size: 12px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Collapsible body */
.day-card-body { }
.day-card.done .day-card-body { display: none; }

/* Times row */
.day-times-row {
  margin: 10px 10px 0;
  background: var(--app-surf2); border-radius: 11px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.time-box { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.time-box-label {
  font-size: 8px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--app-muted);
}
.time-box-val { font-size: 13px; font-weight: 700; color: var(--app-text); }
.times-arrow { font-size: 14px; color: var(--app-muted); flex-shrink: 0; }

/* Stops section — label above the rows mirrors TripPlannerScreen.js:1458
   (sectionLabel: color muted, fontSize 10, fontWeight 700, letterSpacing 1.5,
   marginBottom 8). Hidden when there are no stops to render. */
.day-stops-section { /* outer wrapper, only positioning */ }
.day-stops-label {
  color: var(--app-muted); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; margin: 10px 14px 4px;
}
.day-stops-label:empty { display: none; }

/* Stop rows */
.stop-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--app-border);
  cursor: pointer; transition: background .1s;
}
.stop-row:hover { background: var(--app-surf2); }
.stop-row { align-items: flex-start; }
.stop-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; padding-top: 1px; }
.stop-info { flex: 1; min-width: 0; }
.stop-name { font-size: 12px; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-addr { font-size: 10px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
/* "Starting point · fill up here" badge — mirrors the real app's startStopBadge
   (TripPlannerScreen.js): teal, 11px, 600, marginTop 2. */
.start-stop-badge { font-size: 11px; font-weight: 600; color: var(--app-teal); margin-top: 2px; }
.stop-meta { font-size: 10px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.phantom-stop .stop-name { color: #ef5350; }

/* Stop-row actions (Details / Change / Delete) — revealed on hover (desktop)
   or swipe-left (touch). The track clips; the .stop-row slides over the
   absolutely-positioned action cluster. */
.stop-row-track { position: relative; overflow: hidden; }
.stop-row-track .stop-row {
  position: relative; z-index: 1; background: var(--app-surf);
  transition: transform .18s ease; will-change: transform; touch-action: pan-y;
}
.stop-actions {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: stretch;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.stop-row-track.swiped .stop-actions { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .stop-row-track:hover .stop-actions { opacity: 1; pointer-events: auto; }
}
.stop-act {
  width: 42px; flex-shrink: 0; border: none; border-left: 1px solid var(--app-border);
  background: var(--app-surf2); color: var(--app-text);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.stop-act:hover { filter: brightness(1.06); }
.stop-act svg { display: block; }
.stop-act--details { color: var(--app-teal); }
.stop-act--details:hover { background: rgba(0,136,122,.16); color: #006B61; filter: none; }
.stop-act--change { color: var(--app-teal); }
.stop-act--change:hover { background: rgba(0,136,122,.16); filter: none; }
.stop-act--del { background: #b3261e; color: #fff; border-left-color: #b3261e; }
.stop-act--del:hover { background: #9a201a; filter: none; }

/* Stop Details modal — centered, white, styled to match the onboarding cards
   (the web planner is always light; this modal lives on <body>, outside the
   .light-theme scope, so the palette is set explicitly here). */
.detail-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(28,25,23,.5); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

/* Anonymous free-plan sign-up wall (prelaunch checklist 1A). Reuses the
   .detail-overlay scrim + .detail-close button; this is the inner card. */
.anon-wall {
  position: relative; width: min(440px, 100%);
  background: #FFFFFF; border: 1px solid #E2D9CE; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
  padding: 32px 28px 26px; text-align: center; color: #1C1917;
}
.anon-wall__eyebrow {
  color: #f56437; font-weight: 800; font-size: .76rem;
  letter-spacing: .07em; text-transform: uppercase;
}
.anon-wall__title { font-size: 1.5rem; font-weight: 900; line-height: 1.2; margin: 8px 0 6px; }
.anon-wall__sub { color: #78716C; font-size: .95rem; margin: 0 0 20px; }
.anon-wall__perks {
  list-style: none; margin: 0 auto 24px; padding: 0; max-width: 280px;
  display: flex; flex-direction: column; gap: 11px; text-align: left;
}
.anon-wall__perks li { position: relative; padding-left: 28px; font-size: .95rem; }
.anon-wall__perks li::before {
  content: '\2713'; position: absolute; left: 0; top: -1px;
  color: #00887A; font-weight: 900;
}
.anon-wall__cta { width: 100%; }
.anon-wall__signin {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: #00887A; font-weight: 700; font-size: .9rem;
}
.anon-wall__signin:hover { text-decoration: underline; }
.detail-modal {
  position: relative; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: #FFFFFF; border: 1px solid #E2D9CE; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); color: #1C1917;
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .18s, transform .18s;
}
.detail-modal.open { opacity: 1; transform: none; }
/* Slim, rounded, inset scrollbar so the right edge doesn't square off the
   modal's rounded corners. */
.detail-modal { scrollbar-width: thin; scrollbar-color: rgba(0,136,122,.45) transparent; }
.detail-modal::-webkit-scrollbar { width: 11px; }
.detail-modal::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.detail-modal::-webkit-scrollbar-thumb {
  background: rgba(0,136,122,.42); border-radius: 10px;
  border: 3px solid transparent; background-clip: padding-box;
}
.detail-modal::-webkit-scrollbar-thumb:hover { background: rgba(0,136,122,.7); background-clip: padding-box; }
.detail-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(28,25,23,.5); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.detail-loading { padding: 40px 20px; text-align: center; color: #78716C; font-size: 13px; }
.detail-map { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 14px 14px 0 0; background: #EDE8DF; }
.detail-pad { padding: 14px 16px 18px; }
.detail-title { font-size: 18px; font-weight: 800; color: #1C1917; }
.detail-metarow { margin-top: 4px; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.detail-stars { color: #E8920C; font-weight: 700; }
.detail-rcount { color: #78716C; }
.detail-price b { color: #1C1917; }
.detail-addr { margin-top: 8px; font-size: 13px; color: #78716C; line-height: 1.4; }
.detail-hours { margin-top: 8px; font-size: 13px; color: #1C1917; }
.detail-open { color: #00887A; font-weight: 700; }
.detail-closed { color: #C0392B; font-weight: 700; }
.detail-hours-toggle { background: none; border: none; color: #00887A; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }
.detail-hours-all { display: none; margin-top: 6px; font-size: 12px; color: #78716C; line-height: 1.7; }
.detail-hours-all.show { display: block; }
.detail-photos { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.detail-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; background: #EDE8DF; }
.detail-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.detail-btn {
  flex: 1; min-width: 120px; text-align: center; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 700;
  border: 1.5px solid #00887A; color: #00887A; background: transparent;
}
.detail-btn--primary { background: #00887A; color: #fff; }
.detail-section-h { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #78716C; text-transform: uppercase; }
.detail-review { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E2D9CE; }
.detail-review-head { font-size: 12px; font-weight: 700; color: #1C1917; }
.detail-review-time { color: #78716C; font-weight: 400; }
.detail-review-text { margin-top: 3px; font-size: 12px; color: #78716C; line-height: 1.45; }

.dest-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--app-border);
  background: rgba(0,136,122,.06);
}
.dest-icon { font-size: 13px; width: 18px; text-align: center; }
.dest-name {
  font-size: 12px; font-weight: 700; color: var(--app-teal);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Addon row */
.addon-row { display: flex; gap: 8px; padding: 8px 10px 4px; }
.addon-btn {
  flex: 1; display: flex; align-items: center; gap: 7px;
  padding: 9px 10px; background: transparent;
  border: 1.5px solid var(--app-teal); border-radius: 8px;
  cursor: pointer; transition: background .15s; font-family: inherit;
}
.addon-btn:hover { background: rgba(0,136,122,.05); }
.addon-btn.checked { background: rgba(0,136,122,.1); }
.addon-checkbox {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid var(--app-teal);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.addon-btn.checked .addon-checkbox { background: var(--app-teal); }
.addon-checkmark { font-size: 9px; color: #fff; display: none; line-height: 1; }
.addon-btn.checked .addon-checkmark { display: block; }
.addon-label { font-size: 12px; font-weight: 600; color: var(--app-teal); flex: 1; text-align: left; }

/* ─── Results header pill row (matches real app pillCompact) ─────────────── */
.results-pills-row {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.results-pill {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 6px 4px; background: transparent;
  border: 1.5px solid var(--app-teal); border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--app-teal);
  cursor: pointer; font-family: inherit;
  transition: opacity .15s;
  white-space: nowrap;
}
.results-pill:hover { opacity: .75; }

/* ─── Start day with fill-up (dashed, full-width, centered) ──────────────── */
.fillup-wrap { padding: 2px 10px 8px; }
.fillup-btn {
  display: flex; width: 100%; box-sizing: border-box;
  align-items: center; justify-content: center;
  gap: 6px; padding: 10px;
  background: transparent; border: 1px dashed var(--app-border);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  color: var(--app-muted); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.fillup-btn:hover { border-color: var(--app-teal); color: var(--app-teal); }
.fillup-btn:disabled { opacity: .6; cursor: default; }
.fillup-btn .fillup-spin {
  width: 12px; height: 12px; border: 2px solid var(--app-border);
  border-top-color: var(--app-teal); border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ─── Trip-level bottom elements (safety note + disclaimer) ──────────────── */
.trip-safety {
  display: flex; gap: 8px; margin: 14px 12px 6px;
  padding: 10px 12px;
  background: rgba(239,83,80,.08);
  border: 1px solid rgba(239,83,80,.25);
  border-radius: 10px;
}
.ferry-note {
  margin: 8px 12px 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  font-size: 10.5px;
  color: var(--app-muted, #999);
  font-style: italic;
  line-height: 1.5;
}
.trip-safety-icon { font-size: 15px; flex-shrink: 0; line-height: 1.3; }
.trip-safety-text { font-size: 10px; color: var(--app-text); line-height: 1.5; }
.trip-disclaimer {
  margin: 6px 14px 18px;
  font-size: 9px; color: var(--app-muted); line-height: 1.55;
  font-style: italic;
}
.trip-disclaimer p { margin: 0 0 5px; }
.trip-disclaimer p:last-child { margin-bottom: 0; }

/* ─── Checklist sheet ─────────────────────────────────────────────────────── */
.checklist-intro, .checklist-footer {
  font-size: 10px; color: var(--app-muted); line-height: 1.55;
  padding: 6px 4px 10px;
}
.checklist-footer { padding-top: 12px; font-style: italic; }
.checklist-day {
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--app-border);
}
.checklist-day:last-of-type { border-bottom: none; }
.checklist-day-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  color: var(--app-teal); text-transform: uppercase; margin-bottom: 7px;
}
.checklist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
}
.checklist-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--app-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.checklist-box.done {
  background: var(--app-teal); border-color: var(--app-teal);
}
.checklist-tick { font-size: 10px; color: #fff; display: none; line-height: 1; }
.checklist-box.done .checklist-tick { display: block; }
.checklist-item-text {
  font-size: 12px; color: var(--app-text); font-weight: 600;
  flex-shrink: 0;
}
.checklist-item-text.done { color: var(--app-teal); }
.checklist-skip-note {
  font-size: 9px; color: var(--app-muted); font-style: italic;
  margin-left: auto;
}

/* ─── Generic info sheet (Photos / Photo Map stubs) ──────────────────────── */
.info-sheet-content {
  padding: 14px 18px 10px;
  text-align: center;
}
.info-sheet-icon { font-size: 40px; margin: 6px 0 10px; }
.info-sheet-title {
  font-size: 15px; font-weight: 800; color: var(--app-text);
  margin-bottom: 8px;
}
.info-sheet-body {
  font-size: 12px; color: var(--app-muted); line-height: 1.6;
}

/* ─── Sheet overlay ──────────────────────────────────────────────────────────── */
.sheet-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 50;
  display: flex; align-items: flex-end;
}
.sheet {
  width: 100%; max-height: 92%;
  background: var(--app-surf);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.sheet.open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--app-border); border-radius: 2px; margin: 10px auto 4px; flex-shrink: 0; }
.sheet-title { font-size: 15px; font-weight: 700; color: var(--app-text); text-align: center; padding: 4px 16px 10px; flex-shrink: 0; }
.sheet-scroll { flex: 1; overflow-y: auto; padding: 0 12px 8px; }

/* Meal section */
.meal-section { border-bottom: 1px solid var(--app-border); padding: 10px 0; }
.meal-section:last-child { border-bottom: none; }
.meal-toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0; }
.meal-toggle-icon { font-size: 16px; flex-shrink: 0; }
.meal-toggle-label { font-size: 13px; font-weight: 600; color: var(--app-text); flex: 1; }
.toggle-pill { padding: 3px 8px; border-radius: 999px; background: var(--app-surf2); border: 1px solid var(--app-border); }
.toggle-pill.on { background: var(--app-teal); border-color: var(--app-teal); }
.toggle-pill-text { font-size: 10px; font-weight: 700; color: var(--app-muted); }
.toggle-pill.on .toggle-pill-text { color: #fff; }

/* Anchor slider */
.meal-sub-label { font-size: 10px; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .3px; margin: 8px 0 4px; }
.slider-wrap { margin: 4px 0 8px; padding: 0 10px; }
.slider-hit { position: relative; height: 32px; cursor: pointer; user-select: none; touch-action: none; }
.slider-track-line { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: var(--app-border); border-radius: 2px; }
.slider-tick { position: absolute; top: 50%; width: 2px; height: 12px; margin-left: -1px; margin-top: -6px; background: var(--app-muted); border-radius: 1px; pointer-events: none; }
.slider-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 14px; line-height: 1; pointer-events: none; user-select: none; }
.slider-thumb { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; background: var(--app-teal); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); pointer-events: none; }
.slider-readout { font-size: 10px; font-weight: 600; color: var(--app-muted); margin-top: 4px; }

/* Position / timing row */
.pos-row { display: flex; gap: 6px; margin: 6px 0; align-items: center; flex-wrap: wrap; }
.pos-label { font-size: 10px; font-weight: 600; color: var(--app-muted); text-transform: uppercase; letter-spacing: .3px; }
.pos-btn { padding: 4px 10px; border-radius: 999px; background: var(--app-surf2); border: 1px solid var(--app-border); cursor: pointer; font-family: inherit; }
.pos-btn.on { background: var(--app-teal); border-color: var(--app-teal); }
.pos-btn-text { font-size: 11px; font-weight: 600; color: var(--app-muted); }
.pos-btn.on .pos-btn-text { color: #fff; }

/* Restaurant option row */
.rest-option-row { display: flex; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--app-border); cursor: pointer; gap: 8px; border-radius: 6px; }
.rest-option-row:hover { background: var(--app-surf2); }
.rest-info { flex: 1; min-width: 0; }
.rest-name { font-size: 12px; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-addr { font-size: 10px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.rest-rating { font-size: 10px; color: #FFB300; }
.rest-dist-med { font-size: 10px; color: var(--app-muted); }
.rest-dist-far { font-size: 10px; color: #FF6B35; }

/* Picked row */
.rest-picked-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--app-surf2); border-radius: 8px; margin: 6px 0; }
.rest-picked-icon { font-size: 18px; flex-shrink: 0; }
.rest-picked-info { flex: 1; min-width: 0; }
.rest-picked-name { font-size: 12px; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-picked-stars { font-size: 10px; color: #FFB300; }
.rest-change-btn { padding: 4px 10px; border-radius: 6px; background: transparent; border: 1px solid var(--app-border); cursor: pointer; font-family: inherit; flex-shrink: 0; }
.rest-change-text { font-size: 11px; font-weight: 600; color: var(--app-teal); }

/* Sheet loading / empty */
.sheet-loading { display: flex; align-items: center; gap: 8px; padding: 12px 4px; }
.sheet-loading-text { font-size: 12px; color: var(--app-muted); }
.sheet-spinner { width: 14px; height: 14px; border: 2px solid var(--app-border); border-top-color: var(--app-teal); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
.sheet-empty { font-size: 12px; color: var(--app-muted); padding: 10px 4px; }

/* Sheet pagination */
.sheet-page-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.sheet-page-btn { background: none; border: none; color: var(--app-teal); padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.sheet-page-btn:disabled { color: var(--app-muted); opacity: 0.3; cursor: default; }
.sheet-page-info { font-size: 11px; color: var(--app-muted); }

/* Accommodation row */
.accom-row { display: flex; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--app-border); cursor: pointer; gap: 8px; border-radius: 6px; }
.accom-row:hover { background: var(--app-surf2); }
.accom-row.selected { background: rgba(0,136,122,.12); }
.accom-icon { font-size: 18px; flex-shrink: 0; }
.accom-info { flex: 1; min-width: 0; }
.accom-name { font-size: 12px; font-weight: 600; color: var(--app-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accom-type-lbl { font-size: 10px; color: var(--app-teal); font-weight: 600; }
.accom-rating { font-size: 10px; color: #FFB300; }

/* Sheet confirm / cancel buttons */
.sheet-confirm-btn { margin: 12px 12px 6px; padding: 11px; border-radius: 10px; background: var(--app-teal); border: none; cursor: pointer; font-family: inherit; display: block; width: calc(100% - 24px); flex-shrink: 0; }
.sheet-confirm-text { font-size: 13px; font-weight: 700; color: #fff; }
.sheet-cancel-btn  { margin: 0 12px 12px; padding: 8px; background: transparent; border: none; cursor: pointer; font-family: inherit; display: block; width: calc(100% - 24px); flex-shrink: 0; }
.sheet-cancel-text  { font-size: 13px; font-weight: 600; color: var(--app-muted); }

/* Selected meals/overnight in day card */
.day-meal-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--app-border); font-size: 11px; color: var(--app-muted); }
.day-meal-icon { flex-shrink: 0; }
.day-meal-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-text); }
.day-overnight-row { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 11px; color: var(--app-muted); border-bottom: 1px solid var(--app-border); }
.day-overnight-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--app-text); }

/* Day actions row */
.day-actions-row {
  display: flex; gap: 8px;
  padding: 10px 10px 10px;
}
.nav-day-btn {
  flex: 2; height: 42px;
  background: var(--app-orange); color: #fff;
  font-size: 12px; font-weight: 700; border: none; border-radius: 10px;
  cursor: pointer; font-family: inherit; letter-spacing: .1px; transition: opacity .15s;
}
.nav-day-btn:hover  { opacity: .9; }
.nav-day-btn:active { opacity: .75; }
.mark-done-btn {
  flex: 1; height: 42px;
  background: transparent; color: var(--app-muted);
  font-size: 12px; font-weight: 700; border: 1.5px solid var(--app-border); border-radius: 10px;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.mark-done-btn:hover { border-color: var(--app-teal); color: var(--app-teal); }
.day-card.done .mark-done-btn { border-color: var(--app-teal); color: var(--app-teal); }

/* Depart time box — clickable in the real app (opens a time picker).
   In the mock it stubs to an alert pointing at the mobile app. */
.time-box--editable {
  flex: 1; display: flex; flex-direction: column; gap: 3px;
  background: transparent; border: none; padding: 0;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: opacity .15s;
}
.time-box--editable:hover { opacity: .8; }
.time-edit-icon {
  display: inline-block; margin-left: 4px;
  color: var(--app-teal); font-size: 9px; font-weight: 700;
}

/* Avoid interstates & freeways toggle — per-day preference. Shares
   the fillup-btn baseline visual on purpose (the real app reuses
   s.fillupBtn for both — TripPlannerScreen.js:1496). Active state
   flips border to solid teal + teal text on a faint teal wash. */
.avoid-freeways-btn {
  display: flex; width: calc(100% - 20px); box-sizing: border-box;
  margin: 0 10px 8px;
  align-items: center; justify-content: center;
  gap: 6px; padding: 10px;
  background: transparent; border: 1px dashed var(--app-border);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  color: var(--app-muted); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.avoid-freeways-btn:hover { border-color: var(--app-teal); color: var(--app-teal); }
.avoid-freeways-btn.active {
  background: rgba(0,136,122,.10);
  border-style: solid; border-color: var(--app-teal);
  color: var(--app-teal);
}
/* Checkbox tick mirrors the Restaurants / Overnight addon buttons. */
.avoid-freeways-btn.active .addon-checkbox { background: var(--app-teal); }
.avoid-freeways-btn.active .addon-checkmark { display: block; }

/* GPX export — a simple text link (cosmetic stub) rather than a bordered button */
.gpx-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 2px 14px 12px;
  padding: 2px 0;
  background: none; border: none;
  color: var(--app-teal);
  font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  transition: opacity .15s;
}
.gpx-btn:hover { opacity: .65; }
.gpx-ic { font-size: 12px; }

/* ─── Preferences screen ─────────────────────────────────────────────────── */
.prefs-scroll { padding: 14px 0 20px; }
.prefs-section { padding: 0 14px 14px; }
.prefs-section-label {
  font-size: 12px; font-weight: 700; color: var(--app-teal);
  text-transform: uppercase; letter-spacing: .8px; padding: 0 2px 8px;
}

/* Theme pill toggle */
.theme-pill-group {
  display: flex; background: var(--app-surf2); border-radius: 9px; padding: 3px; gap: 3px;
}
.theme-pill {
  flex: 1; padding: 8px 6px; border: none; border-radius: 7px;
  background: transparent; color: var(--app-muted);
  font-size: 11px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .18s; letter-spacing: .1px;
}
.theme-pill.active { background: var(--app-surf); color: var(--app-text); box-shadow: 0 1px 4px rgba(0,0,0,.3); }

.prefs-version {
  text-align: center; font-size: 10px; color: var(--app-muted);
  padding: 4px 0;
}
.prefs-hint {
  font-size: 12px; color: var(--app-muted); line-height: 1.5;
  margin-top: 8px; padding: 0 2px;
}
.prefs-sub-label {
  font-size: 11px; font-weight: 700; color: var(--app-text);
  text-transform: uppercase; letter-spacing: .7px;
  margin-top: 14px; margin-bottom: 4px; padding: 0 2px;
}
.prefs-sub-hint {
  font-size: 12px; color: var(--app-muted); line-height: 1.5;
  margin-top: 2px; margin-bottom: 8px; padding: 0 2px;
}
.prefs-calc-note {
  font-size: 12px; color: var(--app-teal); line-height: 1.5;
  padding: 6px 2px 2px;
}
.prefs-note-sm {
  font-size: 11px; font-style: italic; color: var(--app-muted);
  line-height: 1.4; padding: 6px 2px 0;
}

/* Gas Stop Timing pills */
.threshold-row {
  display: flex; gap: 5px; padding: 2px 0;
}
.threshold-btn {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 3px; background: var(--app-surf2);
  border: 1px solid var(--app-border); border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.threshold-btn.active { background: var(--app-teal); border-color: var(--app-teal); }
/* Subtle teal hover on the "what are you driving" vehicle selector only
   (not the other threshold rows). */
#pref-vehicle-row .threshold-btn:hover:not(.active) {
  border-color: rgba(0,136,122,.5); background: rgba(0,136,122,.06);
}
.threshold-val { font-size: 13px; font-weight: 700; color: var(--app-text); }
.threshold-sub { font-size: 10px; color: var(--app-muted); }
.threshold-btn.active .threshold-val,
.threshold-btn.active .threshold-sub { color: #fff; }

/* Station type / accommodation rows with checkboxes */
.station-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--app-border);
  cursor: pointer;
}
.station-row:last-child { border-bottom: none; }
.station-check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--app-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  transition: all .15s;
}
.station-row.on .station-check {
  background: var(--app-teal); border-color: var(--app-teal);
}
.station-check-mark { font-size: 10px; color: #fff; display: none; line-height: 1; }
.station-row.on .station-check-mark { display: block; }
.station-text { flex: 1; min-width: 0; }
.station-label { font-size: 12px; font-weight: 600; color: var(--app-text); }
.station-row.on .station-label { color: var(--app-teal); }
.station-examples { font-size: 10px; color: var(--app-muted); margin-top: 1px; line-height: 1.4; }

/* Rating pills */
.rating-row {
  display: flex; gap: 6px; padding: 2px 0;
}
.rating-pill {
  flex: 1; padding: 8px; background: var(--app-surf2);
  border: 1px solid var(--app-border); border-radius: 999px;
  font-size: 11px; font-weight: 700; color: var(--app-muted);
  cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.rating-pill.active { background: var(--app-teal); border-color: var(--app-teal); color: #fff; }

/* Legal rows */
.legal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--app-border);
  text-decoration: none; color: var(--app-text);
  cursor: pointer;
}
.legal-row:last-child { border-bottom: none; }
.legal-row:hover { background: var(--app-surf2); }
.legal-label { font-size: 13px; font-weight: 600; }
.legal-arrow { font-size: 18px; color: var(--app-muted); }

/* Save + Reset buttons */
.save-btn {
  display: block; width: 100%;
  margin: 4px 0 10px;
  padding: 13px; background: var(--app-teal); color: #fff;
  border: none; border-radius: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 2px;
  font-family: inherit; cursor: pointer;
  transition: opacity .15s;
}
.save-btn:hover { opacity: .9; }
.reset-btn {
  display: block; width: 100%;
  margin: 4px 0;
  padding: 10px; background: transparent; color: var(--app-muted);
  border: 1px solid var(--app-border); border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  font-family: inherit; cursor: pointer;
}
.reset-btn--warn { color: #ef5350; border-color: rgba(239,83,80,.35); }
.reset-btn:hover { background: var(--app-surf2); }

/* Reuse toggle-row for the "Start at nearby gas station" toggle in prefs */
.prefs-section .toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0;
}
.prefs-section .toggle-row-left { flex: 1; min-width: 0; }

/* ─── Calculator screens (Simple Calc + Time Away) ──────────────────────── */
.calc-page-title {
  font-size: 16px; font-weight: 800; color: var(--app-text);
  padding: 14px 14px 2px;
}
.calc-btn {
  display: block; margin: 12px 12px 4px;
  width: calc(100% - 24px);
  background: var(--app-teal); color: #fff;
  border: none; border-radius: 12px;
  padding: 13px; font-size: 12px; font-weight: 800; letter-spacing: 2px;
  font-family: inherit; cursor: pointer;
  transition: opacity .15s;
}
.calc-btn:hover { opacity: .9; }

.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--app-border);
}
.result-row:last-child { border-bottom: none; }
.result-lbl {
  font-size: 12px; color: var(--app-muted);
  display: flex; flex-direction: column; gap: 1px;
}
.result-sub { font-size: 9px; color: var(--app-muted); opacity: .75; }
.result-val { font-size: 13px; font-weight: 700; color: var(--app-teal); }
.result-row--hi .result-lbl { color: var(--app-text); font-weight: 600; }
.result-row--hi .result-val { font-size: 15px; font-weight: 800; }
.result-row--lg { padding: 12px 0; }
.result-row--lg .result-lbl { color: var(--app-text); font-weight: 600; font-size: 13px; }
.result-row--lg .result-val { font-size: 18px; font-weight: 800; }

.result-breakdown {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(0,136,122,.07);
  border-radius: 8px; border-left: 2px solid var(--app-teal);
}
.result-breakdown-title {
  font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--app-muted); text-transform: uppercase; margin-bottom: 6px;
}
.result-breakdown-item {
  font-size: 11px; color: var(--app-text);
  padding: 3px 0;
}
.result-disclaimer {
  font-size: 9px; font-style: italic; color: var(--app-muted);
  line-height: 1.5; text-align: center; margin-top: 10px; padding: 0 4px;
}
.budget-tip {
  margin-top: 10px; padding: 9px 11px;
  background: var(--app-black); border-radius: 8px;
  border-left: 2px solid var(--app-teal);
  font-size: 10px; color: var(--app-muted); line-height: 1.5;
}

/* ─── Placeholder screen ─────────────────────────────────────────────────── */
#screen-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 32px; text-align: center;
}
.placeholder-icon { font-size: 48px; }
.placeholder-title { font-size: 18px; font-weight: 800; color: var(--app-text); }
.placeholder-sub { font-size: 14px; color: var(--app-muted); line-height: 1.55; max-width: 280px; }

/* ─── Light theme override ───────────────────────────────────────────────── */
.app-panel.light-theme {
  --app-black:  #F5F1EB;
  --app-surf:   #FDFCF9;
  --app-surf2:  #EDE8DF;
  --app-text:   #1C1917;
  /* muted bumped 78716C → 57534E (2026-05-23) for stronger secondary-text
     contrast on the cream surface (~7:1 vs white, well within AAA). */
  --app-muted:  #57534E;
  /* border bumped E2D9CE → B5A892 (2026-05-23). Old value at ~1.4:1 vs the
     cream surface was almost invisible — Lee reported field edges felt
     missing. New tone reads as a defined edge while staying warm. */
  --app-border: #B5A892;
  --app-header: #FDFCF9;
}
.flag-img { width: 1.25em; height: .85em; border-radius: 1px; flex-shrink: 0; }

/* ─── Map ─────────────────────────────────────────────────────────────────── */
#map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── Account signup CTA (shown after Plan My Trip lands on results) ────
   Light-theme floating card pinned top-right of the app section. Matches
   the .app-panel's cream surface so it reads as part of the planner UX
   rather than a competing dark overlay. Triggered once per plan after
   the results screen renders; hidden for signed-in visitors.

   Two visual states, both anchored to the same top-right corner:
     .show                     → full card visible
     .show.is-minimized        → small chip visible; full card hidden
   The chip persists for signed-out visitors so dismissing the card
   doesn't lock them out of signing up later. Re-click expands. */
.account-cta {
  position: absolute;
  top: 40px; right: max(24px, 4vw);
  z-index: 22;
  width: min(360px, calc(100vw - 460px));
  padding: 24px 26px 22px;
  background: #F5F1EB;
  border: 1px solid #E2D9CE;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.10);
  color: #1C1917;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  pointer-events: none;
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1),
              width .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1);
}
.account-cta.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Default: full card visible, chip hidden. */
.account-cta__full { display: block; }
.account-cta__chip { display: none; }

/* Minimized: collapse the card to a pill-sized chip with just the icon
   + label. Dark charcoal (not brand orange) so the pill stays legible
   over the map instead of blending into it. */
.account-cta.is-minimized {
  width: auto;
  padding: 0;
  background: #1C1917;
  border-color: #1C1917;
  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.16);
}
.account-cta.is-minimized .account-cta__full { display: none; }
.account-cta.is-minimized .account-cta__chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  letter-spacing: -.01em;
  cursor: pointer;
  border-radius: 18px;
  transition: background .15s;
  text-align: left;
}
.account-cta.is-minimized .account-cta__chip:hover { background: rgba(255,255,255,.10); }
.account-cta.is-minimized .account-cta__chip svg { flex-shrink: 0; }
.account-cta__chip-text { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.1; }
.account-cta__chip-main { font-size: 15px; font-weight: 800; }
.account-cta__chip-sub  { font-size: 11.5px; font-weight: 500; opacity: .85; }
@media (max-width: 1024px) {
  .account-cta { display: none; }
}
/* Suppress entirely once the visitor is authenticated — no need to nag a
   signed-in user. body.is-signed-in is set by auth.js from the synchronous
   localStorage session probe at boot, and refreshed on every auth change. */
body.is-signed-in .account-cta { display: none !important; }

/* ─── Save Trip floating button (signed-in twin of account-cta) ─────────
   Same corner of the map, orange pill so it pops over whatever terrain
   is underneath. Display gating is driven by JS (refreshSaveTripFloatingVisibility)
   rather than CSS body.is-signed-in alone, because we also need to gate
   on screen === 'results' and currentPlan being set. */
.save-trip-floating {
  position: absolute;
  top: 40px; right: max(24px, 4vw);
  z-index: 22;
  display: none;
  align-items: center; gap: 10px;
  padding: 14px 22px;
  background: #F56437;
  color: #fff;
  border: 1px solid #d66918;
  border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(237,125,50,.30), 0 2px 6px rgba(0,0,0,.12);
  transition: background .15s, box-shadow .15s, transform .15s, opacity .25s;
}
.save-trip-floating.show { display: inline-flex; }
.save-trip-floating:hover {
  background: #d66918;
  box-shadow: 0 12px 28px rgba(237,125,50,.40), 0 2px 6px rgba(0,0,0,.14);
}
.save-trip-floating:active { transform: scale(.97); }
.save-trip-floating:disabled { opacity: .65; cursor: wait; }
.save-trip-floating svg { flex-shrink: 0; }
@media (max-width: 1024px) { .save-trip-floating { display: none !important; } }

.account-cta__close {
  position: absolute; top: 10px; right: 12px;
  width: 28px; height: 28px;
  background: none; border: none; cursor: pointer;
  color: #A8A29E; font-size: 22px; line-height: 1;
  font-family: inherit; transition: color .15s;
}
.account-cta__close:hover { color: #1C1917; }

.account-cta__eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: #F56437;
  margin-bottom: 8px;
  padding: 4px 12px; border: 1.5px solid #F56437; border-radius: 999px;
}
.account-cta__headline {
  font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #161311; margin-bottom: 7px;
  letter-spacing: -.02em;
}
.account-cta__sub {
  font-size: 14px; line-height: 1.5;
  color: #403B37;
  margin: 0 0 16px;
}
.account-cta__benefits {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 6px;
}
.account-cta__benefits li {
  font-size: 13.5px; color: #2A2520;
  padding-left: 20px; position: relative; line-height: 1.45;
}
.account-cta__benefits li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: #00887A; font-weight: 800; font-size: 13px;
}

/* Primary Google button — full-width, white with subtle border, matches
   the auth modal's button so the visual brand stays consistent across
   surfaces. */
.account-cta__google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 10px;
  color: #1f1f1f;
  font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, box-shadow .15s;
  margin-bottom: 10px;
}
.account-cta__google:hover {
  background: #f8f9fa;
  border-color: #c9cdd2;
  box-shadow: 0 1px 3px rgba(60,64,67,.12);
}
.account-cta__google:disabled { opacity: .55; cursor: wait; }

/* Email sign-up — full-width orange button, sized to match the Google
   button above so the two stack as a clean pair of equal CTAs. Brand
   orange so it carries the TrippApps voice (Google's button has to
   stay white per Google's brand guidelines). */
.account-cta__email-btn {
  display: block; width: 100%;
  padding: 12px 14px;
  background: #F56437;
  color: #fff;
  border: 1px solid #F56437;
  border-radius: 10px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.account-cta__email-btn:hover {
  background: #d66918;
  border-color: #d66918;
  box-shadow: 0 4px 10px rgba(237,125,50,.30);
}
.account-cta__email-btn:active { transform: scale(.99); }

/* ─── Map legend panel ────────────────────────────────────────────────────── */
#map-panel {
  position: absolute; bottom: 24px; right: max(24px, 4vw);
  background: rgba(18,18,18,.94); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 14px 18px;
  /* Match the .account-cta card's width so the two right-side boxes align
     (same right offset + same width = flush edges). box-sizing:border-box is
     set globally in style.css, so equal width = equal visible width despite
     the differing padding. min-width is the narrow-viewport floor (where the
     account card is hidden anyway). */
  z-index: 20; width: min(360px, calc(100vw - 460px)); min-width: 264px; display: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.6); color: #fff;
  transition: opacity .3s;
}
#map-panel.show { display: block; }
#map-panel.nav-hide { opacity: 0; pointer-events: none; }
/* On mobile the .app-panel goes full-width and covers the map, so this legend
   floats over the results (and its day-color legend is for a hidden map). Hide
   it — matches .trip-stats-bar's mobile rule above. */
@media (max-width: 880px) { #map-panel { display: none !important; } }

/* Trip metrics row, merged on top of the legend so the stats and the route
   overview read as one panel (replaces the old standalone .trip-stats-bar). */
.map-panel__stats {
  display: flex;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mp-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.mp-stat:last-child { border-right: none; }
.mp-stat__v { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
.mp-stat__v--sm { font-size: 12px; }
.mp-stat__l { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.5); white-space: nowrap; }

.panel-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 10px;
}
.panel-legend { display: flex; flex-direction: column; gap: 5px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.55); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ─── Navigate Day overlay (Phase 3) ──────────────────────────────────────── */
.nav-cta {
  position: absolute; bottom: 24px; right: max(24px, 4vw);
  z-index: 25; display: none; flex-direction: column; align-items: flex-end; gap: 10px;
}
.app-section.nav-active .nav-cta { display: flex; }

.open-maps-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--app-orange); color: #fff;
  font-size: 14px; font-weight: 800;
  border: none; border-radius: 12px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  text-decoration: none; letter-spacing: -.01em;
  transition: opacity .15s;
}
.open-maps-btn:hover { opacity: .9; color: #fff; }
.open-maps-btn svg { flex-shrink: 0; }

/* ─── Phone Home Screen ───────────────────────────────────────────────────── */
/* ─── Home overlay — app picker grid over the map background ──────────────── */
/* The icon grid sits centered over the full section (the .app-panel is
   hidden whenever the home screen is showing). Soft frosted backdrop keeps
   the icons readable regardless of what map terrain is underneath. */
.home-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.home-overlay.hidden { display: none; }
@media (max-width: 880px) {
  .home-overlay { padding: 16px; }
}

/* Slide-left exit transition — runs when onboarding completes. The overlay
   fades while its inner card translates west, leading the user's eye toward
   where the .app-panel is about to appear. */
#screen-home {
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#picker-card,
#screen-onboarding {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#screen-home.exiting {
  opacity: 0;
  pointer-events: none;
}
#screen-home.exiting #picker-card,
#screen-home.exiting #screen-onboarding {
  transform: translateX(-35vw);
}

/* Panel slide-in animation — paired with the overlay exit so the eye follows
   the modal leftward and lands on the panel. Only runs on first reveal; once
   the user is past onboarding, normal showScreen toggling skips this. */
.app-panel.entering {
  animation: panel-slide-in 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes panel-slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
/* Both modal cards share the same width + surface so the picker → onboarding
   handoff lands on a matching size and color. Onboarding holds a fixed height
   so its 9 steps don't resize the card step-to-step; the picker hugs its own
   content instead, so there's no dead space below the app grid.
   Background is the warm-cream tan (#F5F1EB) — same as the .app-panel's
   light-theme surface, so the slide-left handoff lands on a matching color.
   Only the site nav is white on this page; everything else uses the tan.
   Width is 560px to give the copy comfortable line length. */
.home-overlay-inner,
#screen-onboarding {
  width: min(560px, calc(100vw - 32px));
  border-radius: 20px;
  background: #F5F1EB;
  border: 1px solid #E2D9CE;
  box-shadow: 0 28px 72px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.3);
}
/* Onboarding keeps a fixed height so its 9 steps don't resize the card
   step-to-step. The picker hugs its own content instead — no dead space
   below the app grid. */
#screen-onboarding {
  height: min(620px, calc(100vh - 60px));
}
.home-overlay-inner {
  height: auto;
  max-height: calc(100vh - 60px);
  padding: 28px 36px 24px;
  display: flex; flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.home-pick-hero {
  text-align: center;
  margin-bottom: 16px;
}
.home-pick-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: #f56437;
  margin-bottom: 10px;
}
.home-pick-title {
  margin: 0 0 10px;
  font-size: 26px; font-weight: 900; letter-spacing: -.025em;
  color: #1C1917;
  line-height: 1.12;
}
.home-pick-sub {
  margin: 0 auto;
  max-width: 420px;
  font-size: 13.5px; line-height: 1.5;
  color: #57534E;
}
.home-pick-divider {
  position: relative;
  text-align: center;
  margin: 2px 0 16px;
}
.home-pick-divider::before {
  content: '';
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: #E2D9CE;
}
.home-pick-divider span {
  position: relative; display: inline-block;
  padding: 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: #78716C;
  background: #F5F1EB;
}
.home-icon-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 18px;
  margin-bottom: 16px;
}
.home-pick-foot {
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid #E2D9CE;
  font-size: 12px; line-height: 1.5;
  color: #78716C;
  text-align: center;
}
.home-icon {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.home-icon.disabled { opacity: .35; cursor: default; pointer-events: none; }
.home-icon-img {
  width: 88px; height: 88px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  transition: transform .12s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.15);
}
.home-icon-img img { width: 100%; height: 100%; object-fit: cover; }
.home-icon:not(.disabled):hover .home-icon-img { transform: translateY(-2px) scale(1.03); }
.home-icon:not(.disabled):active .home-icon-img { transform: scale(0.94); }
.home-icon-label {
  font-size: 13px; font-weight: 700; color: #1C1917;
  text-align: center; line-height: 1.25; letter-spacing: -.01em;
}
@media (max-width: 480px) {
  .home-icon-img { width: 64px; height: 64px; border-radius: 16px; }
  .home-icon-label { font-size: 12px; }
  .home-icon-grid { gap: 18px 12px; margin-bottom: 16px; }
  .home-overlay-inner { padding: 24px 20px 20px; }
  .home-pick-title { font-size: 22px; }
  .home-pick-sub { font-size: 13px; }
  .home-pick-hero { margin-bottom: 16px; }
  .home-pick-divider { margin: 4px 0 16px; }
}

/* ─── Marketing sections ──────────────────────────────────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); padding: 28px 24px;
}
.feature-card__icon {
  width: 48px; height: 48px; background: rgba(0,137,123,.1); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.feature-card__icon--orange { background: rgba(237,125,50,.1); }
.feature-card__title { font-size: .95rem; font-weight: 800; color: var(--black); margin-bottom: 8px; letter-spacing: -.01em; }
.feature-card__desc  { font-size: .85rem; color: var(--gray-500); line-height: 1.65; }

.hiw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.hiw-steps::before {
  content: ''; position: absolute;
  top: 22px; left: calc(12.5% + 12px); right: calc(12.5% + 12px);
  height: 2px; background: var(--gray-200);
}
.hiw-step { text-align: center; }
.hiw-step__num {
  width: 44px; height: 44px; background: var(--teal); color: #fff; border-radius: 50%;
  font-size: .9rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; position: relative; z-index: 1;
}
.hiw-step__title { font-size: .9rem; font-weight: 800; color: var(--black); margin-bottom: 8px; letter-spacing: -.01em; }
.hiw-step__desc  { font-size: .82rem; color: var(--gray-500); line-height: 1.65; }

.stat-band { background: var(--black); padding: 0; }
.stat-band__inner { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.08); }
.stat-band__item { padding: 40px 32px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.stat-band__item:last-child { border-right: none; }
.stat-band__num { font-size: 3rem; font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; }
.stat-band__num span { color: var(--teal); }
.stat-band__label { font-size: .82rem; color: rgba(255,255,255,.45); font-weight: 500; }

.notify-form-moto { display: flex; gap: 10px; max-width: 400px; margin: 0 auto; }
.notify-form-moto input[type=email] {
  flex: 1; padding: 13px 16px; border-radius: var(--r);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: .88rem; font-family: inherit; outline: none;
}
.notify-form-moto input[type=email]::placeholder { color: rgba(255,255,255,.35); }
.notify-form-moto input[type=email]:focus { border-color: rgba(0,137,123,.6); }
.notify-success-moto { color: var(--teal); font-size: .88rem; font-weight: 600; margin-top: 12px; display: none; }

.footer {
  background: var(--black); color: rgba(255,255,255,.35);
  padding: 40px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__logo  { height: 28px; width: auto; opacity: .6; }
.footer__copy  { font-size: .78rem; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { font-size: .78rem; color: rgba(255,255,255,.35); transition: color .15s; }
.footer__links a:hover { color: rgba(255,255,255,.7); }

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── Onboarding screen ───────────────────────────────────────────────────── */
/* Centered modal card. Outer dimensions (width, height, background, border,
   shadow, radius) live on the shared .home-overlay-inner, #screen-onboarding
   selector earlier — picker and onboarding share one size so transitions
   between them don't resize. Internal layout (header, scrolling content,
   nav row) lives here. */
#screen-onboarding {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 18px 0 12px;
  z-index: 7;
}
#screen-onboarding.hidden { display: none !important; }
.ob-header {
  padding: 6px 20px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 7px; flex-shrink: 0;
}
.ob-step-label { font-size: 10px; color: #8A8680; letter-spacing: .5px; }
.ob-dots { display: flex; gap: 5px; align-items: center; }
.ob-dot { height: 6px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.14); transition: all .25s; }
.ob-dot.active { background: #00887A; width: 18px; }
.ob-content { flex: 1; overflow-y: auto; padding: 0 13px 6px; -webkit-overflow-scrolling: touch; }
.ob-content::-webkit-scrollbar { display: none; }
.ob-card { background: #181818; border: 1px solid #2D2A27; border-radius: 12px; padding: 11px 12px; margin-bottom: 9px; }
.ob-section-header { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #00887A; margin-bottom: 9px; }
.ob-section-header--tos { margin-top: 4px; }

/* Fast-flow single screen: side-by-side vehicle buttons + a terms checkbox. */
.ob-fast-modes { display: flex; gap: 8px; margin: 2px 0 14px; }
.ob-fast-mode {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px; border: 1.5px solid #2D2A27; border-radius: 10px;
  background: #181818; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s;
}
/* Homepage line-drawing icons — small, height-fixed so each vehicle's natural
   proportions are kept (motorcycle vs SUV vs EV have different aspect ratios). */
.ob-fast-mode__icon { height: 26px; width: auto; max-width: 100%; object-fit: contain; }
.ob-fast-mode__label { font-size: 11px; font-weight: 700; color: #EDEBE8; text-align: center; line-height: 1.25; }
.ob-fast-mode.selected { border-color: #00887A; background: rgba(0,136,122,.14); }
/* Compact ToS preview for the fast screen (the full flow uses the taller 145px). */
.ob-tos-scroll--mini { max-height: 92px; }
/* Light theme (the web planner is always light). */
.light-theme .ob-fast-mode { background: #FDFCF9; border-color: #E2D9CE; }
.light-theme .ob-fast-mode__label { color: #1C1917; }
.light-theme .ob-fast-mode.selected { border-color: #00887A; background: rgba(0,136,122,.08); }
/* Subtle teal hover (onboarding "what are you driving" — fast flow). */
.ob-fast-mode:hover:not(.selected) { border-color: rgba(0,136,122,.55); background: rgba(0,136,122,.07); }
.ob-sub-header { font-size: 10.5px; color: #8A8680; letter-spacing: .8px; text-transform: uppercase; margin: 12px 0 5px; }
.ob-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 6px; gap: 13px; }
.ob-welcome-icon { width: 66px; height: 66px; background: #00887A; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-size: 29px; }
.ob-welcome-title { font-size: 20px; font-weight: 800; color: #EDEBE8; letter-spacing: -.5px; }
.ob-welcome-msg { font-size: 13px; color: #8A8680; line-height: 1.6; }
/* Mode-selection step (radio-card style) */
.ob-mode-sub { font-size: 13px; color: #8A8680; margin: 0 0 12px; line-height: 1.55; }
.ob-mode-list { display: flex; flex-direction: column; gap: 9px; }
.ob-mode-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  text-align: left; background: #181818; border: 2px solid #2D2A27; border-radius: 12px;
  padding: 11px 13px; cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s;
}
.ob-mode-opt:hover { border-color: #3D3A36; }
.ob-mode-opt.selected { border-color: #00887A; background: rgba(0,136,122,.12); }
.ob-mode-opt__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ob-mode-opt__label { font-size: 15px; font-weight: 800; color: #EDEBE8; }
.ob-mode-opt__desc { font-size: 11.5px; color: #8A8680; margin-top: 2px; }
.ob-mode-opt__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4A463F; flex: none; position: relative; }
.ob-mode-opt.selected .ob-mode-opt__radio { border-color: #00887A; }
.ob-mode-opt.selected .ob-mode-opt__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #00887A; }
.light-theme .ob-mode-sub { color: #78716C; }
.light-theme .ob-mode-opt { background: #FDFCF9; border-color: #E2D9CE; }
.light-theme .ob-mode-opt:hover { border-color: #C9BDAE; }
.light-theme .ob-mode-opt.selected { border-color: #00887A; background: rgba(0,136,122,.07); }
/* Subtle teal hover (onboarding "what are you driving" — full flow), overriding
   the neutral border-only hover above. */
.ob-mode-opt:hover:not(.selected),
.light-theme .ob-mode-opt:hover:not(.selected) {
  border-color: rgba(0,136,122,.45); background: rgba(0,136,122,.06);
}
.light-theme .ob-mode-opt__label { color: #1C1917; }
.light-theme .ob-mode-opt__desc { color: #78716C; }
.light-theme .ob-mode-opt__radio { border-color: #C9BDAE; }
.ob-field-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #2D2A27; gap: 6px; }
.ob-field-row.no-border { border-bottom: none; }
.ob-field-label { font-size: 12px; color: #EDEBE8; flex-shrink: 0; }
.ob-field-right { display: flex; align-items: center; gap: 3px; }
/* Web entry-field look (the real app keeps its borderless inline style). */
.ob-input {
  background: #1F1F1F; border: 1.5px solid #3A3631; border-radius: 8px; outline: none;
  color: #EDEBE8; font-size: 12px; font-weight: 600; text-align: right; width: 74px;
  padding: 7px 9px; font-family: inherit; transition: border-color .12s, box-shadow .12s;
}
.ob-input.wide { width: 104px; }
.ob-input:focus { border-color: #00887A; box-shadow: 0 0 0 3px rgba(0,136,122,.15); }
.ob-input::placeholder { color: rgba(255,255,255,.30); font-weight: 500; }
.ob-unit { font-size: 10px; color: #8A8680; min-width: 20px; }
/* Light theme (the web try page is always light) */
.light-theme .ob-input { background: #FFFFFF; border-color: #D9CFC2; color: #1C1917; }
.light-theme .ob-input:focus { border-color: #00887A; box-shadow: 0 0 0 3px rgba(0,136,122,.13); }
.light-theme .ob-input::placeholder { color: #B8AEA2; }
.ob-hint { font-size: 12px; color: #8A8680; font-style: italic; margin-top: 4px; line-height: 1.5; }
.ob-threshold-btns { display: flex; gap: 3px; margin-top: 7px; }
.ob-threshold-btn, .ob-cadence-btn {
  flex: 1; padding: 5px 1px; border-radius: 7px; border: 1px solid #2D2A27;
  background: transparent; color: #8A8680; font-size: 11px; font-weight: 600;
  text-align: center; cursor: pointer; font-family: inherit; transition: all .15s; line-height: 1.4;
}
.ob-threshold-btn.active, .ob-cadence-btn.active { background: #00887A; border-color: #00887A; color: white; }
.ob-check-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid #2D2A27; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ob-check-item:last-child { border-bottom: none; }
.ob-checkbox {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #2D2A27;
  background: #0D0D0D; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; margin-top: 1px; transition: all .15s; font-size: 10px; color: white;
}
.ob-checkbox.checked { background: #00887A; border-color: #00887A; }
.ob-check-label { font-size: 12.5px; color: #EDEBE8; font-weight: 500; }
.ob-check-examples { font-size: 10.5px; color: #8A8680; margin-top: 2px; line-height: 1.4; }
.ob-rating-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.ob-rating-pill {
  padding: 4px 9px; border-radius: 20px; border: 1px solid #2D2A27;
  background: transparent; color: #8A8680; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.ob-rating-pill.active { background: #00887A; border-color: #00887A; color: white; }
.ob-matrix { margin-top: 7px; }
.ob-matrix-header { display: flex; margin-bottom: 3px; }
.ob-matrix-meal-col { width: 44px; flex-shrink: 0; }
.ob-matrix-headers { flex: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
.ob-matrix-col-lbl { font-size: 8px; color: #8A8680; text-align: center; line-height: 1.3; }
.ob-matrix-row { display: flex; align-items: center; margin-bottom: 3px; }
.ob-matrix-meal-lbl { width: 44px; font-size: 10px; color: #8A8680; flex-shrink: 0; }
.ob-matrix-cells { flex: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 3px; }
.ob-matrix-cell {
  aspect-ratio: 1; border-radius: 5px; border: 1px solid #2D2A27; background: #0D0D0D;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 10px; font-weight: 700; color: white; transition: all .12s;
  -webkit-tap-highlight-color: transparent;
}
.ob-matrix-cell.state-include   { background: #00887A; border-color: #00887A; }
.ob-matrix-cell.state-preferred { background: #FFB300; border-color: #FFB300; }
.ob-matrix-cell.state-disabled  { opacity: .15; cursor: default; }
.ob-option-btns { display: flex; gap: 6px; margin-top: 6px; }
.ob-option-btn {
  flex: 1; padding: 10px 5px; border-radius: 10px; border: 1.5px solid #2D2A27;
  background: transparent; color: #8A8680; font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.ob-option-btn.active { border-color: #00887A; color: #EDEBE8; background: rgba(0,136,122,.12); }
.ob-summary-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #2D2A27; gap: 10px; }
.ob-summary-row:last-child { border-bottom: none; }
.ob-summary-label { font-size: 10px; color: #8A8680; flex-shrink: 0; }
.ob-summary-value { font-size: 10px; color: #EDEBE8; font-weight: 600; text-align: right; }
.ob-tos-scroll {
  max-height: 145px; overflow-y: auto; background: #0D0D0D; border: 1px solid #2D2A27;
  border-radius: 8px; padding: 9px 10px; margin-bottom: 9px; font-size: 10px; color: #8A8680; line-height: 1.6;
}
.ob-tos-scroll::-webkit-scrollbar { width: 3px; }
.ob-tos-scroll::-webkit-scrollbar-thumb { background: #2D2A27; border-radius: 2px; }
.ob-tos-agree {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 9px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ob-tos-agree-text { font-size: 11px; color: #EDEBE8; line-height: 1.5; }
.ob-tos-footer { font-size: 10px; color: #8A8680; text-align: center; line-height: 1.6; }
.ob-tos-footer a { color: #00887A; text-decoration: none; }
.ob-nav-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 13px 16px; flex-shrink: 0; border-top: 1px solid #2D2A27;
}
.ob-back-btn { background: transparent; border: none; color: #8A8680; font-size: 13px; font-family: inherit; cursor: pointer; padding: 0; }
.ob-next-btn { background: #F56437; border: none; color: white; font-size: 13px; font-weight: 700; font-family: inherit; padding: 9px 18px; border-radius: 10px; cursor: pointer; transition: opacity .15s; }
.ob-next-btn:disabled { opacity: .35; cursor: default; }

/* Light theme overrides for onboarding */
.light-theme #screen-onboarding { background: #F5F1EB; }
.light-theme .ob-card { background: #FDFCF9; border-color: #E2D9CE; }
.light-theme .ob-welcome-title,.light-theme .ob-field-label,.light-theme .ob-check-label,.light-theme .ob-tos-agree-text,.light-theme .ob-summary-value { color: #1C1917; }
.light-theme .ob-step-label,.light-theme .ob-welcome-msg,.light-theme .ob-hint,.light-theme .ob-check-examples,.light-theme .ob-matrix-col-lbl,.light-theme .ob-matrix-meal-lbl,.light-theme .ob-summary-label,.light-theme .ob-tos-footer,.light-theme .ob-back-btn,.light-theme .ob-unit,.light-theme .ob-sub-header { color: #78716C; }
.light-theme .ob-field-row,.light-theme .ob-check-item,.light-theme .ob-summary-row { border-color: #E2D9CE; }
.light-theme .ob-checkbox { background: #F5F1EB; border-color: #E2D9CE; }
.light-theme .ob-checkbox.checked { background: #00887A; border-color: #00887A; }
.light-theme .ob-matrix-cell:not(.state-include):not(.state-preferred) { border-color: #E2D9CE; background: #EDE8DF; }
.light-theme .ob-threshold-btn:not(.active),.light-theme .ob-cadence-btn:not(.active),.light-theme .ob-rating-pill:not(.active),.light-theme .ob-option-btn:not(.active) { border-color: #E2D9CE; color: #78716C; }
.light-theme .ob-option-btn.active { color: #1C1917; background: rgba(0,136,122,.08); }
.light-theme .ob-tos-scroll { background: #EDE8DF; border-color: #E2D9CE; color: #78716C; }
.light-theme .ob-nav-row { border-color: #E2D9CE; }
.light-theme .ob-dot { background: rgba(0,0,0,.1); }

/* ─── Header logo (actual app images) ────────────────────────────────────── */
.header-logo-wrap { display: flex; align-items: center; gap: 8px; }
.header-app-icon  { width: 27px; height: 27px; border-radius: 6px; flex-shrink: 0; }
.header-text-logo { height: 24px; width: 111px; object-fit: contain; flex-shrink: 0; }
.header-text-logo--light { display: none; }
.app-panel.light-theme .header-text-logo--dark  { display: none; }
.app-panel.light-theme .header-text-logo--light { display: block; }

/* ─── Onboarding welcome logo ─────────────────────────────────────────────── */
/* Compact so the full chooser (incl. "Set up without an account") fits the
   step-0 modal without scrolling. */
.ob-app-icon  { width: 50px; height: 50px; border-radius: 13px; }
.ob-text-logo { height: 32px; width: auto; max-width: 180px; object-fit: contain; }

/* ─── Onboarding welcome+auth CTAs (step 0) ───────────────────────────────── */
.ob-welcome--auth { gap: 10px; padding: 14px 4px 6px; }
.ob-auth-cta {
  width: 100%; box-sizing: border-box;
  border-radius: 10px; padding: 11px 12px;
  font-family: inherit; font-size: 12px; font-weight: 800;
  letter-spacing: 0.6px; cursor: pointer;
  border: 2px solid transparent; margin-top: 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 40px;
}
.ob-auth-cta--primary   { background: #00887A; color: #fff; }
.ob-auth-cta--primary:hover   { background: #006B61; }
.ob-auth-cta--secondary { background: transparent; color: #00887A; border-color: #00887A; }
.ob-auth-cta--secondary:hover { background: rgba(0,136,122,.12); }
/* Sign In + Create Account side by side (step-0 chooser) to save vertical space.
   width:100% so the row spans the modal (the .ob-welcome column centers its
   children, which would otherwise shrink the row to content width); each button
   flex:1 → a true 50/50 split, wide enough for "Create Account" on one line. */
.ob-auth-row { display: flex; gap: 8px; width: 100%; }
.ob-auth-row .ob-auth-cta { flex: 1; min-width: 0; }
/* Continue with Google — white-bg / dark-text / gray-border per Google brand
   guidelines, same shape as the modal's .ta-btn--google. Multi-color G icon
   sits to the left of the label. */
.ob-auth-cta--google {
  background: #fff; color: #1f1f1f;
  border-color: #dadce0;
  gap: 10px;
}
.ob-auth-cta--google:hover { background: #f8f9fa; border-color: #c4c7cb; }
.light-theme .ob-auth-cta--google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
/* OR divider used between the Google button and the email/password form */
.ob-auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 4px 8px;
  color: #8A8680; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.ob-auth-divider::before,
.ob-auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.08);
}
.light-theme .ob-auth-divider { color: #78716C; }
.light-theme .ob-auth-divider::before,
.light-theme .ob-auth-divider::after { background: #E2D9CE; }
.ob-guest-card {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  background: rgba(245,100,55,.10); border: 2px solid #F56437; border-radius: 12px;
  padding: 11px 13px; margin-top: 12px; cursor: pointer;
  font-family: inherit;
}
.ob-guest-card:hover { background: rgba(245,100,55,.18); }
.ob-guest-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px; color: #F56437; font-size: 12px; font-weight: 800;
  letter-spacing: 0.4px;
}
.ob-guest-card__arrow { font-size: 16px; }
.ob-guest-card__list  { margin: 0; padding-left: 18px; color: #8A8680; font-size: 11px; line-height: 1.5; }
.ob-guest-card__list li { margin: 1px 0; }
.light-theme .ob-guest-card__list { color: #78716C; }

/* In-phone auth form (step 0 sub-modes: signin / signup) */
.ob-auth-form  { width: 100%; padding: 0 4px; }
.ob-auth-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid #2D2A27;
  border-radius: 8px;
  background: transparent;
  color: #EDEBE8;
  font-size: 12px; font-family: inherit;
  margin-bottom: 7px; outline: none;
}
.ob-auth-input:focus { border-color: #00887A; }
.ob-auth-input::placeholder { color: #8A8680; opacity: 0.7; }
.ob-auth-input:disabled { opacity: 0.5; }
.light-theme .ob-auth-input { color: #1C1917; border-color: #E2D9CE; }
.light-theme .ob-auth-input::placeholder { color: #78716C; }

.ob-auth-error  { color: #E04E4E; font-size: 11px; padding: 2px 4px 4px; line-height: 1.4; }
.ob-auth-notice { color: #00887A; font-size: 11px; padding: 2px 4px 4px; line-height: 1.4; }

.ob-auth-link {
  background: none; border: none;
  color: #00887A; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  padding: 9px 4px 4px; text-align: center; width: 100%;
}
.ob-auth-link:hover { text-decoration: underline; }

.ob-auth-toggle {
  font-size: 11px; color: #8A8680;
  text-align: center; margin-top: 10px;
  font-family: inherit;
}
.ob-auth-toggle button {
  background: none; border: none;
  color: #00887A; font-weight: 600;
  font-size: inherit; font-family: inherit;
  cursor: pointer; padding: 0 0 0 4px;
}
.ob-auth-toggle button:hover { text-decoration: underline; }
.light-theme .ob-auth-toggle { color: #78716C; }

.ob-auth-back {
  background: none; border: none;
  color: #8A8680; font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  padding: 8px 4px; text-align: center; width: 100%;
  margin-top: 10px;
}
.light-theme .ob-auth-back { color: #78716C; }

.ob-auth-spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid #fff; border-top-color: transparent;
  border-radius: 50%; animation: ob-auth-spin .7s linear infinite;
}
@keyframes ob-auth-spin { to { transform: rotate(360deg); } }

/* ─── Onboarding dropdown ─────────────────────────────────────────────────── */
.ob-dropdown {
  -webkit-appearance: none; appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A8680'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: none; outline: none; color: #00887A;
  font-size: 12px; font-weight: 600;
  width: 120px; padding-right: 22px; font-family: inherit; cursor: pointer;
}
.ob-dropdown.empty { color: rgba(0,136,122,.35); }
.ob-dropdown:disabled { opacity: .35; cursor: default; }
.ob-dropdown option { background: #181818; color: #EDEBE8; }
.light-theme .ob-dropdown option { background: #FDFCF9; color: #1C1917; }
.light-theme .ob-dropdown.empty { color: rgba(0,136,122,.45); }

/* ─── Light theme — new form elements ───────────────────────────────────── */
.light-theme .form-card { background: var(--app-surf); border-color: var(--app-border); }
/* form-card-title stays teal in both themes (was overridden to muted in
   light theme before 2026-05-23 — removed for parity with the real app). */
.light-theme .ps-label-row { color: var(--app-text); }
.light-theme .dest-hint,.light-theme .detour-intro,.light-theme .range-tank-hint { color: var(--app-muted); }
.light-theme .param-cell { background: var(--app-black); border-color: var(--app-border); }
.light-theme .param-cell-label,.light-theme .param-cell-unit { color: var(--app-muted); }
.light-theme .toggle-pill { background: var(--app-border); color: #78716C; }
.light-theme .toggle-pill.on { background: var(--app-teal); color: #fff; }
.light-theme .detour-cat-chip { border-color: var(--app-border); }
/* Keep the selected pill clearly teal on the (forced-light) try page — the rule
   above would otherwise override the active border back to gray. */
.light-theme .detour-cat-chip.active { border-color: var(--app-teal); background: rgba(0,137,123,.12); }
.light-theme .detour-cat-text { color: var(--app-muted); }
.light-theme .value-pill { background: var(--app-surf2); border-color: var(--app-border); color: var(--app-text); }
.light-theme .suggest-section-header { color: var(--app-muted); }
.light-theme .find-route-note { background: rgba(0,136,122,.08); }

/* Google autocomplete dark override */
.pac-container {
  background: #222; border: 1px solid #333; border-radius: 10px;
  margin-top: 3px; box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; z-index: 9999;
}
.pac-item { padding: 10px 14px; color: #ccc; font-size: 13px; border-top: 1px solid #2a2a2a; cursor: pointer; background: transparent; }
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item.pac-item-selected { background: #2a2a2a; }
.pac-icon { display: none; }
.pac-item-query { color: #edebe8; font-size: 13px; }
.pac-matched { font-weight: 700; color: #00887a; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-steps { grid-template-columns: repeat(2, 1fr); }
  .hiw-steps::before { display: none; }
}
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr; }
  .hiw-steps { grid-template-columns: 1fr; }
  .stat-band__inner { grid-template-columns: 1fr; }
  .stat-band__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .app-section { height: auto; min-height: 100vh; min-height: 100dvh; padding: 20px 0; }
  .notify-form-moto { flex-direction: column; }
  .nav-cta { right: 14px; bottom: 20px; }
  .selector-modal { padding: 28px 20px 24px; border-radius: 16px; }
  .selector-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Web readability bump ─────────────────────────────────────────────────
   The planner UI (everything after the app-picker modal) reads larger on
   desktop than the original phone-mimicking sizes. Deliberately left as-is:
   the trip-name display (already the biggest), the "New plan" / "Preferences"
   strip links, and button text. Appended last so it wins at equal specificity.
   Web-only — the real apps don't get this. */

/* Form + Preferences (shared field classes) */
.field-label       { font-size: 15px; }
.field-hint        { font-size: 12px; }
.field-input       { font-size: 16px; }
.field-unit        { font-size: 12px; }
.field-calc        { font-size: 15px; }
.ps-label-row      { font-size: 14px; }
.dest-hint         { font-size: 13px; }
.detour-intro      { font-size: 13px; }
.detour-cat-text   { font-size: 13px; }
.range-tank-hint   { font-size: 12.5px; }
.param-cell-label  { font-size: 10px; }
.param-cell-unit   { font-size: 10px; }
.depart-pill-label { font-size: 10.5px; }
.depart-pill-val   { font-size: 15px; }
.input-row input   { font-size: 16px; }
.rest-search-input { font-size: 16px; }
.suggestion-name   { font-size: 14px; }
.suggestion-addr, .suggestion-cat, .suggestion-rating, .suggestion-dist { font-size: 12px; }

/* Day cards / stops / results */
.route-label       { font-size: 13px; }
.route-value       { font-size: 14px; }
.day-title         { font-size: 15px; }
.day-date          { font-size: 12.5px; }
.day-miles-label   { font-size: 10.5px; }
.stop-name         { font-size: 14px; }
.stop-addr         { font-size: 12px; }
.stop-meta         { font-size: 12px; }
.start-stop-badge  { font-size: 13px; }
.time-box-label    { font-size: 9.5px; }
.time-box-val      { font-size: 15px; }
.addon-label       { font-size: 14px; }
.trip-safety-text  { font-size: 12px; }
/* Checklist sheet — match the bumped day-card sizes (was left at the small
   mobile base, so it read much smaller than the rest of the planner). */
.checklist-item-text { font-size: 14px; }
.checklist-day-lbl   { font-size: 11.5px; }
.checklist-intro, .checklist-footer { font-size: 12px; }
.checklist-skip-note { font-size: 11px; }
.checklist-tick      { font-size: 11px; }

/* Restaurant / accommodation / overnight pickers */
.rest-name, .accom-name, .rest-picked-name, .meal-toggle-label { font-size: 14px; }
.rest-addr, .rest-rating, .rest-dist-med, .rest-dist-far, .rest-picked-stars,
.accom-type-lbl, .accom-rating, .sheet-empty, .sheet-loading-text { font-size: 12px; }

/* Calculators (Simple + Time Away) */
.result-lbl        { font-size: 14px; }
.result-val        { font-size: 15px; }
.result-sub        { font-size: 10.5px; }
.result-row--hi .result-val { font-size: 17px; }
.result-row--lg .result-lbl { font-size: 15px; }
.result-breakdown-item      { font-size: 12.5px; }

/* Map route-overview panel */
.mp-stat__l        { font-size: 9.5px; }
.legend-row        { font-size: 12.5px; }
.panel-lbl         { font-size: 12px; }

/* Preferences extras */
.prefs-section-label { font-size: 13px; }
.form-card-title   { font-size: 13px; }
.prefs-sub-label   { font-size: 12.5px; }
.prefs-sub-hint    { font-size: 13px; }
.prefs-hint        { font-size: 13px; }
.prefs-calc-note   { font-size: 13px; }
.threshold-val     { font-size: 14px; }
.threshold-sub     { font-size: 11px; }
.station-label     { font-size: 14px; }
.station-examples  { font-size: 12px; }
.legal-label       { font-size: 14px; }

/* Onboarding (after the app is picked) */
.ob-step-label     { font-size: 11px; }
.ob-section-header { font-size: 13px; }
.ob-sub-header     { font-size: 12px; }
.ob-welcome-msg    { font-size: 14.5px; }
.ob-field-label    { font-size: 14px; }
.ob-input          { font-size: 14px; }
.ob-unit           { font-size: 11px; }
.ob-hint           { font-size: 13.5px; }
.ob-check-label    { font-size: 14px; }
.ob-check-examples { font-size: 12px; }
.ob-threshold-btn, .ob-cadence-btn { font-size: 12px; }
.ob-summary-label, .ob-summary-value { font-size: 12px; }
.ob-tos-scroll     { font-size: 11.5px; }
.ob-tos-agree-text { font-size: 12.5px; }
.ob-tos-footer     { font-size: 11px; }
.ob-guest-card__list { font-size: 12.5px; }
.ob-auth-error, .ob-auth-notice { font-size: 12px; }