/* ═══════════════════════════════════════════════════════
   mydiodia — Aegean Blueprint sibling, polished v2
   Warm editorial · refined typography · subtle motion
   ═══════════════════════════════════════════════════════ */

:root {
  /* Warm paper base */
  --paper:       #faf7f0;
  --paper-2:     #f3eedf;
  --paper-3:     #e8e0c8;
  --line:        #ddd5bf;
  --line-strong: #b8ad8e;

  /* Ink scale */
  --ink:         #1a1f2e;
  --ink-2:       #3a4050;
  --ink-3:       #5e6578;
  --muted:       #8a8f9e;

  /* Aegean accent — the hero blue */
  --aegean:      #2a6b9e;
  --aegean-dark: #1e4f78;
  --aegean-lt:   #d6e5ef;

  /* Verdict scale */
  --go:          #2e7a4a;
  --go-bg:       #e6f0e9;
  --go-soft:     #5a9970;
  --go-soft-bg:  #eaf3ed;
  --stop:        #b8502d;
  --stop-bg:     #f5e2d5;
  --stop-soft:   #c4805f;
  --stop-soft-bg:#f3e2d6;

  --terracotta:  #c4613d;

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-serif:   'DM Serif Display', 'Georgia', serif; /* reserved for hero text only */

  /* Layout */
  --topbar-h:   54px;
  --bar-h:      72px;
  --panel-h:    320px;
  --sp-w:       460px;
  --radius-sm:  3px;   /* scrollbars, tiny chips, internal corners */
  --radius:     5px;   /* default control & card corner */
  --radius-lg:  10px;  /* prominent panels, modals */
  --radius-pill: 999px;

  /* Motion */
  --ease:       cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(26,31,46,0.06);
  --shadow:    0 2px 10px rgba(26,31,46,0.07), 0 1px 3px rgba(26,31,46,0.05);
  --shadow-md: 0 6px 20px rgba(26,31,46,0.09), 0 2px 5px rgba(26,31,46,0.06);
  --shadow-lg: 0 14px 40px rgba(26,31,46,0.13), 0 4px 10px rgba(26,31,46,0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15.5px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  height: 100vh;
  overflow: hidden;
  line-height: 1.5;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* ══════════════════════════════════════
   TOPBAR — refined
   ══════════════════════════════════════ */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000; height: var(--topbar-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 18px; gap: 14px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform 0.25s var(--ease), color 0.18s var(--ease);
}
.logo:hover { transform: translateY(-1px); }
.logo:hover .logo-glyph { transform: scale(1.05); }
.logo:active { transform: translateY(0); }
.logo-glyph {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.logo-text {
  /* "my" prefix: muted gray, less weight */
  color: var(--muted);
  font-weight: 500;
}
.logo-text .logo-mid {
  /* "dio" middle: bold dark ink — the main reading anchor */
  color: var(--ink);
  font-weight: 700;
}
.logo em,
.logo-text em {
  /* "dia" suffix: italic aegean blue — the brand flourish */
  font-style: italic;
  font-weight: 500;
  color: var(--aegean);
  font-variation-settings: "opsz" 144, "SOFT" 80;
}
.topbar-sep { width: 1px; height: 22px; background: var(--line); flex-shrink: 0; }
.topbar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 7px;
  flex-shrink: 0;
}
.btn-ghost {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.btn-ghost:hover {
  border-color: var(--aegean);
  color: var(--aegean-dark);
  background: var(--aegean-lt);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════
   LANGUAGE FLAG TOGGLE
   ══════════════════════════════════════ */
.btn-lang-flag {
  display: inline-flex;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 1px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-lang-flag:hover {
  border-color: var(--aegean);
  box-shadow: 0 0 0 3px var(--aegean-lt);
}
.flag-option {
  padding: 4px 8px 3px;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: var(--radius-pill);
  transition: all 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  filter: grayscale(0.6) opacity(0.55);
}
.flag-option:hover { filter: grayscale(0) opacity(1); }
.flag-option.active {
  background: var(--aegean-lt);
  filter: grayscale(0) opacity(1);
  box-shadow: 0 1px 4px rgba(42,107,158,0.18);
  transform: scale(1.05);
}

/* ══════════════════════════════════════
   VEHICLE DROPDOWN — top-right global mode
   Sits next to the language flag. The trigger button shows the
   currently-selected vehicle (emoji + full name + caret); clicking it
   reveals a menu with the four options. The selected vehicle drives
   every price display on the site.
   ══════════════════════════════════════ */
.veh-toggle {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
}
.veh-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 10px 5px 12px;
  font-size: 0.86rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.veh-current:hover,
.veh-current[aria-expanded="true"] {
  border-color: var(--aegean);
  box-shadow: 0 0 0 3px var(--aegean-lt);
}
.veh-current .veh-emoji {
  font-size: 1rem;
  line-height: 1;
}
.veh-current .veh-label {
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.veh-caret {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 2px;
  transform: translateY(-1px);
  transition: transform 0.18s var(--ease);
}
.veh-current[aria-expanded="true"] .veh-caret {
  transform: translateY(-1px) rotate(180deg);
}

/* Menu panel — anchored below the trigger, right-aligned so it doesn't
   overflow the topbar on narrow viewports. */
.veh-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(26,31,46,0.12), 0 2px 6px rgba(26,31,46,0.06);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* The HTML `hidden` attribute applies `display: none` via the UA stylesheet,
   but our `.veh-menu { display: flex }` overrides that. Force hidden to win
   when it's set on this element (open/close is toggled via menu.hidden). */
.veh-menu[hidden] { display: none; }
.veh-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.veh-option:hover {
  background: var(--aegean-lt);
}
.veh-option.active {
  background: var(--aegean-lt);
  font-weight: 600;
}
.veh-option .veh-emoji {
  font-size: 1.05rem;
  line-height: 1;
}
.veh-option .veh-label {
  line-height: 1.2;
}

/* ── Inline page-header vehicle picker ──────────────────────────────────
   Used on the Routes and Tolls pages: a "Prices for: [pill]" line under
   the page title. Identical component as the topbar one (same .veh-toggle
   markup, same .veh-menu, same JS), with a slightly smaller pill so it
   reads as in-flow content rather than as a chrome control. */
.page-vehicle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: var(--font-body);
}
.page-vehicle-prefix {
  font-size: 0.86rem;
  color: var(--ink-3);
  font-weight: 500;
}
/* Inline modifier: shorter, smaller text. Same hover/open affordance. */
.veh-toggle--inline .veh-current {
  padding: 4px 8px 4px 10px;
  font-size: 0.86rem;
}
.veh-toggle--inline .veh-current .veh-emoji {
  font-size: 0.95rem;
}
/* Anchor the inline menu to the LEFT of its trigger so it expands toward
   the page content instead of overflowing the right edge. The topbar
   variant keeps `right: 0` (its default) so it doesn't run off the page
   on narrow viewports — this only adjusts the inline instances. */
.veh-toggle--inline .veh-menu {
  right: auto;
  left: 0;
  min-width: 170px;
}

/* ══════════════════════════════════════
   MAP
   ══════════════════════════════════════ */
#map-container {
  position: fixed; top: var(--topbar-h); left: 0; right: 0;
  bottom: var(--bar-h); z-index: 1;
}
#map { width: 100%; height: 100%; }
.leaflet-container { background: #ece9e3 !important; }
.leaflet-control-attribution {
  background: rgba(250,247,240,0.9) !important;
  color: var(--muted) !important;
  font-size: 0.6rem !important;
  font-family: var(--font-body) !important;
  backdrop-filter: blur(6px);
  border-top-left-radius: var(--radius);
}
.leaflet-control-attribution a { color: var(--ink-2) !important; }
.leaflet-control-zoom {
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  margin-top: 12px !important;
  margin-left: 12px !important;
}
.leaflet-control-zoom a {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  font-size: 1.05rem !important;
  line-height: 28px !important;
  width: 28px !important; height: 28px !important;
  font-family: var(--font-body) !important;
  transition: all 0.15s var(--ease) !important;
}
.leaflet-control-zoom a:hover {
  background: var(--aegean-lt) !important;
  color: var(--aegean) !important;
}

/* ══════════════════════════════════════
   TOLL MARKERS
   ══════════════════════════════════════ */
.toll-marker {
  width: 12px; height: 12px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  box-shadow: 0 1px 3px rgba(26,31,46,0.3);
}
.toll-marker:hover {
  transform: scale(1.7);
  box-shadow: 0 0 0 3px rgba(250,247,240,0.85), 0 4px 12px rgba(26,31,46,0.35);
  z-index: 9999 !important;
}
/* Active toll dot — bigger, green, glowing ring */
.toll-marker.active {
  width: 14px; height: 14px;
  border: 2.5px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(31,88,40,0.25),
    0 0 0 6px rgba(31,88,40,0.12),
    0 2px 6px rgba(0,0,0,0.35);
  z-index: 9999 !important;
}

/* Small side-toll dot — used at low zoom (< ZOOM_THRESHOLD_FRONTAL_PILL).
   At country-level zoom the regular 11px side dots create visual noise
   against the 48 frontal markers; this 6px variant fades them back so
   the user can read the trunk-route structure. As they zoom in to plan
   a specific section, the dots grow to the regular size at the same
   threshold where frontals grow into pills. */
.toll-marker-side-small {
  width: 6px;
  height: 6px;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(26,31,46,0.25);
}
.toll-marker-side-small:hover {
  transform: scale(2);
}

/* ══════════════════════════════════════
   FRONTAL TOLL PILLS — perpendicular to the highway

   Frontal tolls are main-line plazas that block ALL traffic on the
   highway. The pill shape (rounded rectangle, oriented perpendicular
   to the road) reads as a "barrier across the road" — matching how a
   real toll plaza looks from above.

   Each frontal toll has a `bearing` field (compass degrees) computed
   from its bypass pre_exit→post_merge geometry. JS sets the rotation
   inline as `transform: translate(-50%,-50%) rotate(<bearing>deg)`.
   The Leaflet icon container is sized as a square ≥ the pill long
   side so the rotated bounding box never clips.

   Pills only appear at zoom ≥ ZOOM_THRESHOLD_FRONTAL_PILL (currently
   11). Below that, frontals revert to the same circle as bridges.
   ══════════════════════════════════════ */
.toll-marker-frontal {
  /* Size is set inline in JS (longSide × shortSide); the inner div is
     absolutely positioned at center of the icon container so rotation
     happens around the toll's geographic point. */
  position: absolute;
  border-radius: var(--radius);
  border: 1.5px solid var(--paper);
  box-shadow: 0 1px 3px rgba(26,31,46,0.35), 0 0 0 0.5px rgba(0,0,0,0.06);
  transition: filter 0.18s var(--ease);
}
.toll-marker-frontal:hover {
  /* Subtle brightening on hover (we can't apply scale because rotation
     is already on transform; scale would compound and look weird). */
  filter: brightness(1.12) drop-shadow(0 2px 4px rgba(26,31,46,0.4));
  z-index: 9999 !important;
}
.toll-marker-frontal.active {
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(31,88,40,0.28),
    0 0 0 6px rgba(31,88,40,0.14),
    0 2px 6px rgba(0,0,0,0.35);
}

/* ══════════════════════════════════════
   TOLL NAME LABELS — refined
   Soft mint pill in resting state, deep motorway-sign green when active.
   Echoes the Greek motorway signage in both states; default is muted so
   ~50 labels don't dominate the map, active is bold so it pops.
   ══════════════════════════════════════ */
.toll-name-label {
  display: inline-block;
  background: rgba(214,233,218,0.95);
  border: 1px solid rgba(85,140,100,0.35);
  color: #1f5828;
  font-family: var(--font-body);
  font-weight: 600;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  padding: 2px 10px 3px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(31,88,40,0.10),
    0 3px 8px rgba(31,88,40,0.06);
  cursor: pointer;
  transform: translateX(-50%) translateY(-7px);
  text-rendering: optimizeLegibility;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.toll-name-label:hover {
  transform: translateX(-50%) translateY(-9px);
  box-shadow:
    0 2px 4px rgba(31,88,40,0.16),
    0 6px 16px rgba(31,88,40,0.14);
  background: rgba(197,224,203,0.98);
  border-color: rgba(85,140,100,0.55);
}
/* Active state: deep motorway-sign green */
.toll-name-label.active {
  background: linear-gradient(180deg, #2a6e35 0%, #1f5828 100%);
  border-color: rgba(255,255,255,0.95);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 2px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.18);
}

/* ══════════════════════════════════════
   RAMP SIGNS (EXIT / ENTER on map)
   Auto-size to content so any language label fits.
   Two-tone: colored label + lighter place-name section.
   ══════════════════════════════════════ */
.ramp-icon-wrap {
  width: auto !important;
  height: auto !important;
}
.ramp-sign {
  display: inline-flex;
  align-items: stretch;
  color: #ffffff;
  font-family: 'Arial Black', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 900;
  border-radius: var(--radius-sm);
  border: 1.5px solid white;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  letter-spacing: 0.5px;
  line-height: 1.1;
  transform: translateX(-50%);
  pointer-events: auto;
  overflow: hidden;
  padding: 3px 7px 3px;
  gap: 6px;
}
.ramp-sign-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,0.5);
  text-transform: uppercase;
  font-size: 8px;
  align-self: center;
}
.ramp-sign-exit  { background: #2a6b9e; }   /* Aegean blue for EXIT */
.ramp-sign-entry { background: #2e7a4a; }   /* go green for RE-ENTER */

/* ══════════════════════════════════════
   DIRECTION-OF-TRAVEL ARROWS ON BYPASS / HIGHWAY LINES
   Dropped at the midpoint of each route line, rotated to match the bearing
   of travel. Colors match the line they sit on so the user can tell at a
   glance which arrow belongs to which route.
   ══════════════════════════════════════ */
.dir-arrow-wrap {
  background: transparent;
  border: none;
  pointer-events: none;
}
.dir-arrow {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
  transform-origin: center center;
}
.dir-arrow svg { display: block; }
.dir-arrow-bypass  { color: #2a6b9e; }   /* match the blue bypass line (local road) */
.dir-arrow-highway { color: #2e7a4a; }   /* match the green highway line (motorway) */

/* ══════════════════════════════════════
   RAMPS TOGGLE INSIDE LEGEND
   ══════════════════════════════════════ */
.legend-divider {
  height: 1px;
  background: var(--line);
  margin: 6px 12px;
}
.legend-ramps-btn {
  display: flex;
  width: calc(100% - 12px);
  margin: 4px 6px 8px;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 7px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  text-align: left;
}
.legend-ramps-btn:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.legend-ramps-btn.active {
  background: var(--aegean-lt);
  color: var(--aegean-dark);
  border-color: var(--aegean);
  font-weight: 600;
}
.legend-ramps-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.legend-ramps-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 14px;
  font-family: 'Arial Black', sans-serif;
  font-size: 7px;
  font-weight: 900;
  color: white;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 2px rgba(26,31,46,0.25);
}
.legend-ramps-badge-exit  { background: var(--aegean); }
.legend-ramps-badge-entry { background: var(--go); }

/* Side-toll dot — yellow indicator on the side-tolls toggle button */
.legend-side-dot {
  display: inline-block;
  width: 11px; height: 11px;
  background: #f4c430;  /* light yellow */
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(26,31,46,0.25), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.legend-ramps-label { flex: 1; }
.legend-ramps-state {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legend-ramps-btn.active .legend-ramps-state {
  background: var(--paper);
  border-color: var(--aegean);
  color: var(--aegean-dark);
}

/* ══════════════════════════════════════
   HOVER TOOLTIP — refined
   ══════════════════════════════════════ */
.toll-tooltip {
  position: fixed; z-index: 9999;
  display: none; pointer-events: none;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 270px;
  font-family: var(--font-body);
  overflow: hidden;
  animation: tooltipIn 0.18s var(--ease-out);
}
@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tt-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.tt-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.tt-name-gr {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.tt-sub {
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.005em;
}
.tt-sub em { font-style: italic; color: var(--aegean); }
.tt-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  white-space: nowrap; flex-shrink: 0;
}
.tt-direction {
  padding: 5px 14px;
  font-size: 0.7rem;
  color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}
.tt-prices {
  padding: 8px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.price-cell {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 5px;
  padding: 5px 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform 0.15s var(--ease);
}
.price-cell .vehicle-icon { font-size: 0.95rem; line-height: 1; }
.price-cell .vehicle-label {
  display: none;  /* icon alone is enough; label was redundant and ate vertical space */
}
.price-cell .price-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.price-cell .price-val .eur {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--muted);
  margin-right: 1px;
  vertical-align: 1px;
}
.tt-notes {
  padding: 6px 14px 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--ink-3);
  line-height: 1.45;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

/* ══════════════════════════════════════
   LEGEND — refined
   ══════════════════════════════════════ */
#legend {
  position: fixed; top: calc(var(--topbar-h) + 12px); right: 12px;
  z-index: 900;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  min-width: 220px;
  transition: right 0.3s var(--ease), opacity 0.2s, transform 0.2s;
  max-height: calc(100vh - var(--topbar-h) - var(--bar-h) - 24px);
  overflow-y: auto;
  overflow-x: hidden;
}
#legend::-webkit-scrollbar { width: 4px; }
#legend::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-sm); }
#legend.hidden { opacity: 0; transform: translateY(-8px); pointer-events: none; }

/* ══════════════════════════════════════
   MAP CONTROLS STACK (top-right of map)

   Three vertically-stacked icon buttons grouped in a single rounded card:
   basemap, legend, side-tolls. Replaces the previous topbar buttons
   (#legend-toggle, #basemap-toggle) and the bottom-right floating pill
   (#side-tolls-toggle), consolidating map-specific controls inside the
   map itself — Google Maps convention.

   The card uses hairline separators between buttons and a single shared
   border/shadow so the group reads as one control rather than three
   floating buttons.
   ══════════════════════════════════════ */
.map-controls {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  right: 12px;
  z-index: 850;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* Hide on routes/tolls pages — these controls are map-specific.
   Mirrors the existing `#page-map:not(.page-active) #legend` pattern. */
#page-map:not(.page-active) #map-controls,
#page-map:not(.page-active) #mc-basemap-popover { display: none; }
/* Hide controls + open popover whenever the toll side-panel is open.
   The user is examining a specific toll — they're not changing basemap
   or filtering side tolls in that moment. When the panel closes the
   controls reappear. Matches the same hide-on-panel-open pattern that
   already applies to #bottom-bar and #legend on mobile. */
body.panel-open #map-controls,
body.panel-open #mc-basemap-popover { display: none; }

.mc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.mc-btn:hover { background: var(--paper-2); color: var(--ink); }
.mc-btn:not(:last-child) { border-bottom: 1px solid var(--line); }
.mc-btn[aria-expanded="true"],
.mc-btn[aria-pressed="true"] { background: var(--aegean-lt); color: var(--aegean-dark); }

/* Side-tolls button — special-cased so the on-state uses YELLOW (matching
   the actual side-toll markers on the map) instead of the generic aegean
   tint other pressed buttons get. The visual rhyme — yellow button
   controls yellow dots — makes the button's purpose obvious without a
   text label. The toll dot inside the SVG (the small filled circle at
   the end of the off-ramp branch) is the most prominent on/off signal:
   bright yellow when active, washed-out grey when not. */
#mc-side-btn[aria-pressed="true"] {
  background: #fef6d8;          /* very light yellow */
  color: #4a3500;               /* dark brown — readable on yellow */
}
#mc-side-btn[aria-pressed="true"] .mc-side-toll-dot {
  fill: #c89e1a;                /* same yellow used for actual side-toll markers */
}
#mc-side-btn[aria-pressed="false"] {
  /* Off-state: mute the entire icon so it reads as inactive. The strokes
     stay; the toll-dot fades. */
  color: var(--ink-3);
}
#mc-side-btn[aria-pressed="false"] .mc-side-toll-dot {
  fill: var(--ink-3);
  opacity: 0.45;
}

/* Basemap popover: anchored to the right under the basemap button. Same
   visual language as the .veh-menu / .overflow-menu — small dropdown card
   with simple option buttons. */
.mc-popover {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);   /* aligned with top of controls stack */
  right: calc(12px + 36px + 6px);      /* sit to the LEFT of the stack */
  z-index: 860;
  min-width: 150px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(26,31,46,0.12), 0 2px 6px rgba(26,31,46,0.06);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-body);
}
.mc-popover[hidden] { display: none; }
.mc-popover-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 0.86rem;
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s var(--ease);
}
.mc-popover-option:hover { background: var(--aegean-lt); }
.mc-popover-option.active {
  background: var(--aegean-lt);
  font-weight: 600;
  color: var(--aegean-dark);
}
.mc-popover-option.active::before {
  content: '✓';
  font-size: 0.85em;
  color: var(--aegean);
  margin-right: -2px;
}
/* Reserve space for the checkmark on inactive options so they align. */
.mc-popover-option:not(.active)::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  margin-right: -2px;
}

/* Adjust legend panel position so it doesn't collide with the controls
   stack. Legend now sits to the LEFT of the stack. */
#legend { right: calc(12px + 36px + 8px); }

.legend-title {
  padding: 11px 14px 9px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
#legend-list { padding: 5px 5px; }
.legend-item {
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius);
  transition: background 0.15s var(--ease), opacity 0.18s var(--ease);
  user-select: none;
  margin-bottom: 1px;
}
.legend-item:hover { background: var(--paper-2); }
.legend-item.active-filter {
  background: var(--aegean-lt);
  box-shadow: 0 0 0 1px var(--aegean) inset;
}
.legend-item.dimmed-filter { opacity: 0.32; }
.legend-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(26,31,46,0.22);
}
.legend-text { flex: 1; min-width: 0; }
.legend-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.legend-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 1px;
}
.legend-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  padding: 2px 6px;
  background: var(--paper-2);
  border-radius: var(--radius);
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.active-filter .legend-count {
  background: var(--paper);
  color: var(--aegean-dark);
  border-color: var(--aegean);
}

/* ══════════════════════════════════════
   TOLL SIDE PANEL — refined editorial
   ══════════════════════════════════════ */
#toll-side-panel {
  position: fixed; top: var(--topbar-h); right: 0;
  width: var(--sp-w); bottom: var(--bar-h);
  z-index: 800;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 48px rgba(26,31,46,0.12), -2px 0 8px rgba(26,31,46,0.04);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.34s var(--ease);
}
#toll-side-panel.open { transform: translateX(0); }

/* Top control bar — minimal */
.sp-header {
  padding: 13px 22px 11px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: var(--paper);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sp-header-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.sp-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: all 0.18s var(--ease);
  letter-spacing: 0.005em;
}
.sp-close:hover {
  background: var(--stop-bg);
  border-color: var(--stop);
  color: var(--stop);
}

.sp-scroll { flex: 1; overflow-y: auto; }
.sp-scroll::-webkit-scrollbar { width: 5px; }
.sp-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-sm); }
.sp-scroll::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* Hero block — toll identity */
.sp-header-inner {
  padding: 28px 26px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%),
    var(--paper);
  position: relative;
}
.sp-header-inner::after {
  /* Soft separator at the bottom of the hero */
  content: '';
  position: absolute;
  left: 26px; right: 26px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 30%, var(--line) 70%, transparent 100%);
}
.sp-hwy-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.005em;
  color: var(--ink) !important;
  margin-bottom: 14px;
  padding: 0;
  background: none !important;
  box-shadow: none;
  border-radius: 0;
}
.sp-hwy-badge::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* The inline style sets the var --hwy-color; we use it here for the dot */
  background: var(--hwy-color, var(--aegean));
  box-shadow: 0 1px 3px rgba(26,31,46,0.25);
  flex-shrink: 0;
}
.sp-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.02;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.sp-name-gr {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 16px;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  letter-spacing: -0.005em;
}
.sp-operator {
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--font-body);
  letter-spacing: 0.005em;
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,0.08);
}
.sp-operator strong { color: var(--ink); font-weight: 500; }

/* Editorial section labels */
.sp-section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.74rem;
  color: var(--aegean);
  padding: 14px 26px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  border-bottom: none;
}
.sp-section-title::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Prices — single-vehicle headline. This is the main number on the panel,
   so make it visually prominent. The vehicle emoji is large (matches the
   visual weight of the price), and the price itself uses display font.
   The price-row sits inside the header (.sp-header-inner) so it stays
   visually grouped with the toll name; on desktop it's a full-width row
   below the name; on mobile (see media query) it's grid-positioned next
   to the name to save vertical space. */
.sp-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  font-size: 1.05rem;
}
.sp-price-row > span {
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.sp-emoji { font-size: 2.4rem; line-height: 1; }
.sp-vlabel { display: inline; font-size: 1rem; }
.sp-price-row strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 2.1rem;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144;
}

.sp-direction {
  padding: 11px 22px 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.sp-direction em { font-style: italic; color: var(--aegean); }

.sp-notes {
  padding: 12px 22px 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--ink-3);
  line-height: 1.55;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.sp-no-bypass {
  padding: 16px 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--stop);
}

.sp-bypass-title { display: none; }

/* Direction filter pills */
.sp-dir-filter {
  display: flex;
  gap: 5px;
  padding: 10px 22px 6px;
  flex-wrap: wrap;
}
.sp-filter-btn {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.sp-filter-btn:hover {
  border-color: var(--aegean);
  color: var(--aegean-dark);
  background: var(--paper);
}
.sp-filter-btn.active {
  background: var(--aegean);
  border-color: var(--aegean-dark);
  color: var(--paper);
  box-shadow: 0 1px 4px rgba(42,107,158,0.3);
}
/* Side-toll panels — direction pills go yellow instead of blue.
   Color matches the yellow toll markers (#f4c430).
   Darker text on yellow for legibility. */
#toll-side-panel.side-toll .sp-filter-btn:hover {
  border-color: #c89e1a;
  color: #6e4f00;
}
#toll-side-panel.side-toll .sp-filter-btn.active {
  background: #f4c430;
  border-color: #c89e1a;
  color: #4a3500;
  box-shadow: 0 1px 4px rgba(244,196,48,0.45);
}
#toll-side-panel.side-toll .sp-filter-btn.sp-filter-both.active {
  background: #f4c430;
  border-style: solid;
}
/* "Both directions" pill is visually secondary, separated by a thin gap */
.sp-filter-btn.sp-filter-both {
  margin-left: 6px;
  background: transparent;
  border-style: dashed;
  font-weight: 500;
}
.sp-filter-btn.sp-filter-both.active {
  background: var(--aegean);
  border-style: solid;
  font-weight: 600;
}

/* Direction blocks — refined */
.sp-dir { transition: opacity 0.22s var(--ease), border-color 0.22s var(--ease), background 0.22s var(--ease); }
.sp-dir {
  padding: 14px 22px 16px 19px; /* slim left padding to compensate the 5px active border */
  border-bottom: 1px solid var(--line);
  border-left: 5px solid var(--line);
  background: var(--paper);
  opacity: 0.45;
  cursor: pointer; /* whole block is clickable to select this direction */
}
.sp-dir:hover:not(.active) {
  background: rgba(46,122,74,0.04);
  border-left-color: rgba(46,122,74,0.5);
  opacity: 0.7;
}
.sp-dir.active {
  border-left: 5px solid var(--go);
  /* Richer left-to-right tint so the selected direction reads at a glance —
     the previous gradient stopped at 30%, this one extends further with a
     slightly more saturated start color. */
  background: linear-gradient(to right, rgba(46,122,74,0.13) 0%, rgba(46,122,74,0.04) 50%, var(--paper) 100%);
  opacity: 1;
  cursor: default;
}
.sp-dir.dimmed { opacity: 0.32; }
.sp-dir:last-child { border-bottom: none; }
.sp-dir-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.sp-dir-exits {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 6px;
}
.sp-exit-tag, .sp-entry-tag {
  font-size: 0.76rem;
  padding: 5px 11px;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  background: var(--paper);
}
.sp-tag-icon {
  flex-shrink: 0;
  /* Stroke inherits each tag's text color via currentColor on the SVG */
}
.sp-tag-text {
  /* Flex item that wraps cleanly when ramp names are long */
  min-width: 0;
}
.sp-exit-tag {
  color: var(--aegean-dark);
  border: 1px solid var(--aegean);
  box-shadow: inset 0 0 0 1px rgba(42,107,158,0.06);
}
.sp-entry-tag {
  color: #1f5a35;
  border: 1px solid var(--go);
  box-shadow: inset 0 0 0 1px rgba(46,122,74,0.06);
}

/* Confidence indicator — between exit/entry tags and the comparison block.
   `verified` directions render no badge (clean state). `auto` shows a quiet
   provenance line. `approximate` shows a visible amber warning so the user
   knows to verify before relying on the bypass. */
.sp-confidence {
  font-size: 0.74rem;
  padding: 6px 10px;
  border-radius: var(--radius);
  margin-top: 6px;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  line-height: 1.35;
  cursor: help;
}
.sp-conf-auto {
  color: #5a6678;
  background: rgba(42,107,158,0.05);
  border: 1px dashed rgba(42,107,158,0.25);
}
.sp-conf-approximate {
  color: #8a5a1a;
  background: #fef3df;
  border: 1px solid #e8c178;
  font-weight: 500;
}

/* Bypass vs highway comparison block — refined */
.sp-dir-compare {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  /* Define the column structure once at the container level so all rows
     share the same column tracks (€s, χλμ, λεπ all line up vertically). */
  display: grid;
  grid-template-columns: 9px 1fr auto auto auto;
  row-gap: 0;
}
/* Compare table rows: each row is a subgrid that inherits the parent's
   5 column tracks, so values in column 3 (money), 4 (distance), and 5
   (time) align cleanly across rows regardless of content width. */
.sp-cmp-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;          /* span all 5 of the parent's columns */
  align-items: center;
  column-gap: 11px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 6px 0;
}
.sp-cmp-row + .sp-cmp-row { border-top: 1px dashed var(--line); }
.sp-cmp-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(26,31,46,0.22);
}
.sp-cmp-label {
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.005em;
}
/* The .sp-cmp-vals wrapper from the HTML still exists for semantic grouping,
   but visually we want its three children to participate in the row's grid
   directly. `display: contents` makes the wrapper invisible to layout so
   .sp-cmp-money/dist/time become grid items of the parent .sp-cmp-row. */
.sp-cmp-vals {
  display: contents;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sp-cmp-money {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: -0.015em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sp-cmp-dist, .sp-cmp-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink);
}

/* Διαφορά row — no dot, so the label spans the first two grid columns. */
/* Διαφορά row — sits at the bottom of the same table as a third row.
   Soft horizontal-gradient tint (transparent at edges → tinted in center)
   so the row feels like an integrated summary, not a hard-edged stripe. */
.sp-cmp-row.sp-cmp-diff {
  margin-top: 4px;
  padding: 8px 0;       /* keep horizontal at 0 so column alignment is preserved */
  border-top: 1px solid var(--line);
  background: transparent;
  transition: background 0.18s var(--ease);
}
.sp-cmp-row.sp-cmp-diff.savings {
  background: linear-gradient(
    to right,
    rgba(46, 122, 74, 0.0)  0%,
    rgba(46, 122, 74, 0.08) 20%,
    rgba(46, 122, 74, 0.08) 80%,
    rgba(46, 122, 74, 0.0)  100%
  );
}
.sp-cmp-row.sp-cmp-diff.cost {
  background: linear-gradient(
    to right,
    rgba(184, 80, 45, 0.0)  0%,
    rgba(184, 80, 45, 0.08) 20%,
    rgba(184, 80, 45, 0.08) 80%,
    rgba(184, 80, 45, 0.0)  100%
  );
}
.sp-cmp-diff-label {
  font-weight: 600;
  color: var(--ink);
  grid-column: 1 / span 2;   /* fill the dot + label area */
}
/* Color-coded diff values: savings → green, cost → amber-red, zero → muted. */
.sp-cmp-money.savings, .sp-cmp-dist.savings, .sp-cmp-time.savings { color: #2d7a3a; }
.sp-cmp-money.cost,    .sp-cmp-dist.cost,    .sp-cmp-time.cost    { color: #a45533; }
.sp-cmp-money.zero,    .sp-cmp-dist.zero,    .sp-cmp-time.zero    { color: var(--ink-3); }

/* ══════════════════════════════════════
   BOTTOM BAR
   ══════════════════════════════════════ */
#bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--bar-h);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-top: 1px solid var(--line-strong);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px;
  box-shadow: 0 -6px 24px rgba(26,31,46,0.06);
}
.bar-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bar-input {
  height: 44px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0 14px;
  outline: none;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
  min-width: 0;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.bar-input::placeholder { color: var(--muted); }
.bar-input:focus {
  border-color: var(--aegean);
  background: var(--paper);
  box-shadow: 0 0 0 3px var(--aegean-lt), 0 1px 2px rgba(0,0,0,0.03);
}
.swap-btn {
  height: 44px; width: 40px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink-2);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.swap-btn:hover {
  background: var(--aegean-lt);
  border-color: var(--aegean);
  color: var(--aegean);
  transform: rotate(180deg);
}
.bar-select {
  height: 44px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  padding: 0 14px;
  outline: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-appearance: none;
  transition: border-color 0.18s var(--ease);
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.bar-select:focus { border-color: var(--aegean); }
.bar-sep { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; }

.tv-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 1;
  min-width: 0;
  padding: 0 4px;
}
.tv-compact-sentence {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  flex-shrink: 1;
  min-width: 0;
}
.tv-compact .lbl {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tv-compact .lbl-suffix {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: normal;
  flex-shrink: 1;
  min-width: 0;
  max-width: 220px;
  line-height: 1.25;
}
.tv-compact .val {
  font-family: var(--font-body);
  color: var(--paper);
  /* Background tracks the slider's --fill-color so the value pill shifts
     green→amber→red in sync. Falls back to aegean blue before JS runs. */
  background: var(--fill-color, var(--aegean));
  width: 88px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4px 8px 5px;
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  line-height: 1;
  transition: background 0.15s var(--ease);
}
.tv-compact .val-num {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.tv-compact .val-tier {
  font-style: italic;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  text-align: center;
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tv-compact input[type="range"] {
  width: 110px;
  flex-shrink: 0;
}
/* Desktop shows long phrase, mobile uses short phrase (toggled in media query) */
.tv-compact .tv-mobile { display: none; }
.tv-compact .tv-desktop { display: inline; }
/* Range slider — visible track with "filled" left portion driven by --fill
   (set in JS on input). Fill color shifts green→amber→red as the user
   slides right (--fill-color, also set in JS) to visually communicate
   "tolerating more delay." Thumb is large enough to read as draggable. */
input[type="range"] {
  width: 110px;
  -webkit-appearance: none;
  height: 8px;
  background: linear-gradient(
    to right,
    var(--fill-color, var(--aegean)) 0%,
    var(--fill-color, var(--aegean)) var(--fill, 50%),
    rgba(42,107,158,0.18) var(--fill, 50%),
    rgba(42,107,158,0.18) 100%
  );
  outline: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--paper);
  border: 3px solid var(--fill-color, var(--aegean));
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.6) inset;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--paper);
  border: 3px solid var(--fill-color, var(--aegean));
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
input[type="range"]::-moz-range-progress {
  background: var(--fill-color, var(--aegean));
  border-radius: var(--radius);
  height: 8px;
}
input[type="range"]::-moz-range-track {
  background: rgba(42,107,158,0.18);
  border-radius: var(--radius);
  height: 8px;
}

/* ─── Tolerance control: prose ⇄ pill modes ──────────────────────────────
   The tolerance control has two visual modes, toggled by .is-pill-mode on
   .tv-control. Prose mode (default for first-time visitors) shows the full
   sentence + slider inline. Pill mode (default for returning visitors)
   shows a compact button with a stopwatch icon + number, opening a popover
   on click. Switch happens via JS on first slider interaction.

   The slider element is moved (via appendChild) between .tv-compact (prose)
   and .tv-popover-slot (pill). Single source of truth, single set of
   listeners — see calculator.js for the move logic. */

.tv-control {
  position: relative;       /* anchor for absolutely-positioned popover */
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
}
.tv-control:not(.is-pill-mode) .tv-mode-pill { display: none; }
.tv-control.is-pill-mode      .tv-mode-prose { display: none; }

/* Pill button: icon + number + caret. Mirrors the size/spacing of the
   topbar btn-ghost so it visually rhymes with the rest of the bar. */
.tv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 36px;
  border: 1px solid var(--paper-3);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.tv-pill:hover {
  border-color: var(--aegean);
  background: var(--paper-2);
}
.tv-pill[aria-expanded="true"] {
  border-color: var(--aegean);
  background: var(--aegean-lt);
  color: var(--aegean-dark);
  box-shadow: inset 0 1px 2px rgba(26,31,46,0.06);
}
.tv-pill-icon {
  flex-shrink: 0;
  color: var(--aegean);
  /* The icon color tracks the slider's current --fill-color, set on
     #tv-control by JS. Falls back to aegean if JS hasn't run yet. */
  color: var(--fill-color, var(--aegean));
  transition: color 0.15s var(--ease);
}
.tv-pill-num {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  text-align: center;
}
.tv-pill-caret {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: -2px;
}

/* Popover: floats above the bar. The arrow points down at the pill. */
.tv-popover {
  position: absolute;
  bottom: calc(100% + 12px);    /* sit above the bar with breathing room */
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 300;                  /* above bottom-bar (which is ~200) */
  animation: tv-popover-in 0.18s var(--ease-out) backwards;
}
.tv-popover[hidden] { display: none; }
@keyframes tv-popover-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.tv-popover-arrow {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-right: 1px solid var(--paper-3);
  border-bottom: 1px solid var(--paper-3);
}
.tv-popover-question {
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.35;
  margin-bottom: 14px;
}
.tv-popover-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tv-popover-slot {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* When the slider is mounted inside the popover slot, stretch it. */
.tv-popover-slot input[type="range"] {
  width: 100%;
}
.tv-popover-val {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--paper);
  background: var(--fill-color, var(--aegean));
  min-width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s var(--ease);
}
.tv-popover-tier {
  margin-top: 8px;
  text-align: center;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  min-height: 1em;
  font-variant: italic;
}

.analyse-btn {
  height: 48px;
  background: linear-gradient(180deg, var(--aegean) 0%, var(--aegean-dark) 100%);
  border: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding: 0 28px;
  cursor: pointer;
  border-radius: var(--radius);
  display: flex; align-items: center; gap: 8px;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 2px 8px rgba(42,107,158,0.35),
    0 4px 16px rgba(42,107,158,0.18);
  position: relative;
}
.analyse-btn::before {
  content: '→';
  font-size: 1.1rem;
  font-weight: 700;
  margin-right: 4px;
  transition: transform 0.18s var(--ease);
}
.analyse-btn:hover {
  background: linear-gradient(180deg, var(--aegean-dark) 0%, #1a4f78 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 14px rgba(42,107,158,0.45),
    0 8px 24px rgba(42,107,158,0.25);
  transform: translateY(-1px);
}
.analyse-btn:hover::before { transform: translateX(3px); }
.analyse-btn:active { transform: translateY(0) scale(0.98); }
.analyse-btn:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
  box-shadow: none;
}
.analyse-btn:disabled::before { display: none; }
.btn-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(250,247,240,0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}
.loading .btn-spinner { display: block; }
.loading.analyse-btn::before { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.error-pill {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: var(--stop);
  background: var(--stop-bg);
  border: 1px solid var(--stop);
  padding: 5px 12px;
  border-radius: var(--radius);
  display: none;
  white-space: nowrap;
}
.error-pill.visible { display: block; }

/* ══════════════════════════════════════
   RESULTS PANEL
   ══════════════════════════════════════ */
#results-panel {
  position: fixed;
  bottom: var(--bar-h); left: 0; right: 0;
  z-index: 400;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -8px 32px rgba(26,31,46,0.12);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease);
  max-height: var(--panel-h);
  display: flex; flex-direction: column;
}
#results-panel.open { transform: translateY(0); }

.rp-head {
  display: flex; align-items: center;
  padding: 14px 22px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  gap: 16px;
  flex-shrink: 0;
}
.rp-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}
.rp-stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  flex-wrap: wrap;
}
.rp-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.rp-stat-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.rp-stat strong {
  color: var(--ink);
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.rp-stat.sm strong { font-size: 0.92rem; }
.rp-stat.green strong { color: var(--go); }
.rp-stat.red strong   { color: var(--terracotta); }
.rp-stat-divider {
  width: 1px;
  height: 30px;
  background: var(--line);
  align-self: center;
}
/* New analyze-stats layout — 3-row money/dist/time table mirroring the
   per-toll side-panel comparison so the visual pattern is consistent.
   The 5th column holds tag info (total frontals on row 1, paid+avoided
   on row 2, empty on diff row) so tags align to the rows they describe. */
.rp-cmp {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.rp-cmp-row { display: contents; }
.rp-cmp-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.rp-cmp-money {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.rp-cmp-dist, .rp-cmp-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
/* Sub-caption rendered under the km cell for the bypass row,
   e.g. "από τα οποία 462 χλμ σε αυτοκινητόδρομο". Smaller, muted,
   right-aligned, breaks out of nowrap to allow wrapping if very long. */
.rp-cmp-dist-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 1px;
  white-space: normal;
  text-align: right;
  letter-spacing: 0;
  line-height: 1.2;
}
/* Διαφορά row: subtle separator above + bold label + soft horizontal-gradient
   tint (transparent edges → green/amber center) so it reads as "summary" not
   "second card." Matches the side-panel diff-row treatment. */
.rp-cmp-row.diff .rp-cmp-label {
  font-weight: 600;
  color: var(--ink);
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  margin-top: 3px;
}
.rp-cmp-row.diff .rp-cmp-money,
.rp-cmp-row.diff .rp-cmp-dist,
.rp-cmp-row.diff .rp-cmp-time,
.rp-cmp-row.diff .rp-cmp-tag {
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  margin-top: 3px;
}
.rp-cmp-row.diff .savings { color: #2d7a3a; }
.rp-cmp-row.diff .cost    { color: #a45533; }

/* 5th column: tag info aligned vertically with the row it describes.
   Total-frontals tag for the highway row (top), pay/avoid split for
   the bypass row (middle), nothing for the diff row.
   Both rows use flex-start so the lead numbers (12, 8) align at the
   same x-position regardless of the second item's presence. */
.rp-cmp-tag {
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  min-width: 160px;
}
.rp-cmp-tag strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  font-family: var(--font-body);
  margin-right: 4px;
}
/* The diff row's empty tag cell still needs the left border to extend cleanly,
   so let it inherit the border-left without content. */
.rp-cmp-row.diff .rp-cmp-tag { padding-top: 4px; }

@media (max-width: 720px) {
  /* On narrow screens, drop the 5th column and stack tags below */
  .rp-cmp { grid-template-columns: 1fr auto auto auto; }
  .rp-cmp-tag {
    grid-column: 1 / -1;
    padding-left: 0; margin-left: 0; border-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 8px; min-width: 0;
    justify-content: space-around;
  }
}
.rp-close {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
  transition: all 0.15s var(--ease);
  flex-shrink: 0;
}
.rp-close:hover { background: var(--stop-bg); border-color: var(--stop); color: var(--stop); }

.rp-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.rp-body::-webkit-scrollbar { width: 6px; }
.rp-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-sm); }

/* AI advice — prominent at top */
.rp-advice {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  background: linear-gradient(135deg, var(--aegean-lt) 0%, rgba(196,151,32,0.08) 100%);
  border-left: 3px solid var(--aegean);
  padding: 14px 22px;
  margin: 0;
  letter-spacing: -0.005em;
}

/* Toll chips section */
.rp-chips {
  padding: 14px 22px 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* TOLL CHIPS */
.toll-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: var(--radius);
  border-left: 3px solid;
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  cursor: pointer;
  transition: box-shadow 0.18s var(--ease), transform 0.1s;
  flex-wrap: wrap;
  /* Expanded chips share a consistent width so multiple tile cleanly per
     row. Narrow enough to fit 3 across at desktop; wraps gracefully on
     mobile via the parent's flex-wrap. */
  flex: 0 1 320px;
  max-width: 360px;
  min-width: 260px;
}
.toll-chip:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.toll-chip.verdict-PAY            { border-left-color: var(--stop); }
.toll-chip.verdict-AVOID          { border-left-color: var(--go); }
.toll-chip.verdict-MARGINAL_AVOID { border-left-color: var(--go-soft); }
.toll-chip.verdict-MARGINAL_PAY   { border-left-color: var(--stop-soft); }

.chip-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.chip-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.chip-verdict {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}
.verdict-PAY            .chip-verdict { background: var(--stop-bg);  color: var(--stop); }
.verdict-AVOID          .chip-verdict { background: var(--go-bg);    color: var(--go); }
.verdict-MARGINAL_AVOID .chip-verdict { background: var(--go-soft-bg);   color: var(--go-soft); }
.verdict-MARGINAL_PAY   .chip-verdict { background: var(--stop-soft-bg); color: var(--stop-soft); }
.chip-reason {
  display: none;
  width: 100%;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}
/* Compact 3-row money/dist/time comparison inside each chip when expanded.
   Same conceptual layout as the side panel and the analyze stats header,
   but smaller and tighter to fit inline within a chip.
   First row is the column-headers strip (€ · χλμ · λεπ) which lets data
   cells drop unit suffixes for tighter columns. */
.chip-cmp {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: 7px;
  row-gap: 2px;
  align-items: center;
  font-family: var(--font-body);
  width: 100%;
}
.chip-cmp-row { display: contents; }
.chip-cmp-row.chip-cmp-head > * {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 3px;
  text-align: right;
}
.chip-cmp-h-blank { /* corner cell — keeps grid alignment without text */ }
.chip-cmp-label {
  font-size: 0.72rem;
  color: var(--ink-2);
  font-weight: 500;
}
/* Inline exit→entry text appended to the Παράκαμψη label.
   Smaller and muted so the row's main weight stays on the label/numbers. */
.chip-cmp-route {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0;
}
.chip-cmp-money {
  font-weight: 600;
  font-size: 0.78rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.chip-cmp-dist, .chip-cmp-time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.chip-cmp-row.diff > * {
  padding-top: 4px;
  border-top: 1px dashed var(--line);
  margin-top: 3px;
}
.chip-cmp-row.diff .chip-cmp-label { font-weight: 600; color: var(--ink); }
.chip-cmp .savings { color: #2d7a3a; }
.chip-cmp .cost    { color: #a45533; }
.chip-cmp .zero    { color: var(--muted); }
.chip-tags {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  letter-spacing: 0;
  width: 100%;
}
.chip-tags-noby {
  font-style: italic;
  font-family: var(--font-display);
}

/* LEAFLET POPUPS */
.leaflet-popup-content-wrapper {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 0 !important;
}
.leaflet-popup-content { margin: 0 !important; font-family: var(--font-body) !important; }
.leaflet-popup-tip { background: var(--paper) !important; }
.leaflet-popup-close-button {
  color: var(--muted) !important;
  font-size: 1rem !important;
  padding: 5px 7px !important;
  top: 2px !important; right: 2px !important;
}
.map-popup { padding: 11px 13px; min-width: 170px; }
.map-popup-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.015em;
}
.map-popup-verdict {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.map-popup-verdict.PAY            { color: var(--stop); }
.map-popup-verdict.AVOID          { color: var(--go); }
.map-popup-verdict.MARGINAL_AVOID { color: var(--go-soft); }
.map-popup-verdict.MARGINAL_PAY   { color: var(--stop-soft); }
.map-popup-reason {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.74rem;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Tooltips on bypass routes */
.bypass-tooltip {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 6px 10px !important;
}
.bypass-tooltip::before { display: none !important; }
.ramp-tooltip {
  background: var(--paper) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 0.74rem !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 6px 10px !important;
}
.ramp-tooltip::before { display: none !important; }

/* ══════════════════════════════════════
   HELP POPOVER + OVERFLOW MENU
   ══════════════════════════════════════ */

/* Overflow menu (··· in topbar) — folds rare actions (help, feedback) into
   a single dropdown so they stop competing with primary nav. Mirrors the
   .veh-toggle/.veh-menu pattern for visual consistency. */
.overflow-toggle {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
}
.overflow-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  cursor: pointer;
}
.overflow-trigger[aria-expanded="true"] {
  background: var(--paper-2);
  border-color: var(--ink-3);
  color: var(--ink);
}
.overflow-trigger svg {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s var(--ease);
}
.overflow-trigger:hover svg,
.overflow-trigger[aria-expanded="true"] svg { opacity: 1; }

.overflow-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(26,31,46,0.12), 0 2px 6px rgba(26,31,46,0.06);
  padding: 4px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.overflow-menu[hidden] { display: none; }
.overflow-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-family: var(--font-body);
  color: var(--ink);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s var(--ease);
}
.overflow-option:hover { background: var(--aegean-lt); }
.overflow-option svg {
  flex-shrink: 0;
  opacity: 0.7;
  color: var(--ink-2);
}
.overflow-option:hover svg { opacity: 1; }

/* Help popover — replaces the previous full-screen help-modal. Anchored
   below the overflow trigger (positioned by JS via getBoundingClientRect
   so it works even though help-popover sits at <body> level rather than
   inside .overflow-toggle). Sections are <details> for native disclosure. */
.help-popover {
  position: fixed;
  width: 320px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(26,31,46,0.18), 0 4px 10px rgba(26,31,46,0.08);
  padding: 14px 16px 16px;
  z-index: 1500;
  font-family: var(--font-body);
  animation: help-popover-in 0.18s var(--ease-out) backwards;
}
.help-popover[hidden] { display: none; }
@keyframes help-popover-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-popover-arrow {
  position: absolute;
  top: -7px;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
  /* Horizontal position set inline by JS to point at the trigger center. */
}
.help-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.help-popover-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.help-popover-close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.help-popover-close:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.help-section-d {
  margin: 8px 0;
  padding: 0;
}
.help-section-d + .help-section-d {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 10px;
}
.help-section-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 4px 0;
}
.help-section-summary::-webkit-details-marker { display: none; }
.help-section-summary::marker { content: ''; }
.help-section-summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.18s var(--ease);
}
.help-section-d[open] .help-section-summary::after {
  transform: rotate(180deg);
}
.help-section-icon {
  font-size: 1.05rem;
  color: var(--aegean);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.help-section-d-body {
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.55;
  padding: 8px 0 4px 32px;   /* indented under the summary icon */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Color-key chips inside section 2 — readable but not loud. The colors
   are taken from the verdict palette (avoid=green, pay=amber-red, marginal=
   amber). Pulled out of inline styles for cleaner markup. */
.help-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
}
.help-color-avoid    { color: #2d7a3a; }
.help-color-pay      { color: #b8502d; }
.help-color-marginal { color: #b8860b; }

/* ══════════════════════════════════════
   PAGE NAVIGATION (multi-page hash routing)
   ══════════════════════════════════════ */
.topbar-nav {
  display: flex;
  gap: 2px;
  margin-right: 16px;
  flex: 1;
  min-width: 0;
}
.nav-link {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  color: var(--muted);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.nav-link:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.nav-link.active {
  background: var(--aegean-lt);
  color: var(--aegean-dark);
  font-weight: 600;
}

.page {
  display: none;
}
.page.page-active {
  display: block;
}

/* When the map page is inactive, hide its fixed-position descendants */
#page-map:not(.page-active) #legend,
#page-map:not(.page-active) #toll-side-panel,
#page-map:not(.page-active) #results-panel,
#page-map:not(.page-active) #bottom-bar,
#page-map:not(.page-active) #first-tip,
#page-map:not(.page-active) #map-container { display: none; }
#page-routes,
#page-tolls {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  background: var(--paper);
}
#page-routes::-webkit-scrollbar,
#page-tolls::-webkit-scrollbar { width: 8px; }
#page-routes::-webkit-scrollbar-thumb,
#page-tolls::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius); }

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 32px 60px;
}
.page-header { margin-bottom: 28px; }
.page-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 6px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.page-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  color: var(--muted);
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 144, "SOFT" 80;
}

.page-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.page-toolbar-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.page-toolbar .bar-input { flex: 1; min-width: 200px; }
.page-toolbar .bar-select { min-width: 180px; }

/* ── Routes matrix ── */

/* Filter bar above the matrix: native selects + swap + clear. Sits in
   the warm paper aesthetic, mirrors the bottom-bar control rhythm. */
.routes-filter {
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rfilter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rfilter-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.rfilter-select {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 6px 28px 6px 10px;
  min-width: 140px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23555' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.rfilter-select:focus {
  outline: none;
  border-color: var(--aegean);
  box-shadow: 0 0 0 3px var(--aegean-lt);
}
.rfilter-swap {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.rfilter-swap:hover { background: var(--paper-2); border-color: var(--aegean); }
.rfilter-clear {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.12s, background 0.12s;
}
.rfilter-clear:hover { color: var(--ink); background: var(--paper-2); }

/* Summary card shown when both From and To are selected. Compact, single
   row on desktop, stacks on mobile. The colored dot mirrors the cell tier
   so the connection between the filter answer and the grid is obvious. */
.routes-filter-summary {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.routes-filter-summary .rfs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.routes-filter-summary .rfs-pair {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.routes-filter-summary .rfs-arrow {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9rem;
}
.routes-filter-summary .rfs-tier {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.routes-filter-summary .rfs-price {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.routes-filter-summary .rfs-price-sub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--aegean);
  margin-left: 4px;
}
.routes-filter-summary .rfs-price-na {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--muted);
}
.routes-filter-summary .rfs-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-3);
}
.routes-filter-summary .rfs-cta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--aegean);
  border: 1px solid var(--aegean-dark);
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.routes-filter-summary .rfs-cta:hover { background: var(--aegean-dark); }

.routes-grid {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: visible;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.routes-grid::-webkit-scrollbar { height: 8px; }
.routes-grid::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius); }
.routes-grid-table {
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.84rem;
  /* No fixed width - let columns size naturally */
}
.routes-grid-table th,
.routes-grid-table td {
  padding: 6px 9px;
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  vertical-align: middle;
}
.routes-grid-table thead th {
  position: sticky; top: 0;
  background: var(--paper-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
  height: 44px;
}
.routes-grid-table thead th.routes-corner {
  background: var(--paper-2);
  z-index: 6;
}
.routes-grid-table tbody th {
  position: sticky; left: 0;
  background: var(--paper-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--ink);
  text-align: left;
  padding-left: 12px;
  white-space: nowrap;
  border-right: 1px solid var(--line);
  z-index: 4;
}
.routes-cell {
  cursor: pointer;
  transition: background 0.12s;
  min-width: 92px;
}
.routes-cell:hover { background: var(--aegean-lt); }
.routes-cell-empty {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,0.02) 8px, rgba(0,0,0,0.02) 12px);
  cursor: default;
  pointer-events: none;
}
.routes-cell-self {
  background: rgba(0,0,0,0.04);
  cursor: default;
  pointer-events: none;
}
.routes-cell .rc-price {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.routes-cell .rc-meta {
  font-family: var(--font-body);
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  letter-spacing: 0;
}
.routes-cell .rc-perkm {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--aegean);
  margin-top: 1px;
  white-space: nowrap;
  font-weight: 500;
}
.routes-cell-na {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--muted);
}

/* Heatmap by cost-per-km. The hue ramp goes through the existing palette:
   the green --go is already on the page (verdict pills), and --stop is the
   warm terracotta-orange used for "ΑΠΟΦΥΓΕ". Mid stops are tinted between
   them. All tints use translucent overlays on the warm paper bg so cells
   stay readable and the row/column headers remain dominant.
   Per-km tiers (cat2 reference, see pages.js for thresholds):
     tier-free   €0/km           — cool slate, distinct from heatmap
     tier-low    ≤ €0.03/km      — soft go-green
     tier-mid    ≤ €0.06/km      — yellow-green
     tier-high   ≤ €0.09/km      — amber/peach
     tier-peak   > €0.09/km      — terracotta-red
   Hover override: the existing .routes-cell:hover rule used --aegean-lt;
   to keep tiers visible on hover, we make hover slightly darken the tier
   instead of replacing it. Implemented via per-tier hover colors below. */
.routes-cell.tier-free  { background: #eef0f2; }
.routes-cell.tier-low   { background: #e3eedc; }
.routes-cell.tier-mid   { background: #f1ecc6; }
.routes-cell.tier-high  { background: #f5dcc1; }
.routes-cell.tier-peak  { background: #efc6b1; }

.routes-cell.tier-free:hover  { background: #e2e6ea; }
.routes-cell.tier-low:hover   { background: #d3e2c7; }
.routes-cell.tier-mid:hover   { background: #e8e0a8; }
.routes-cell.tier-high:hover  { background: #efcaa6; }
.routes-cell.tier-peak:hover  { background: #e7b094; }

/* Per-km value pill stays mono and readable across all tiers — the original
   --aegean color is fine on the lighter tiers but disappears against the
   peak band, so we shift to a darker ink for tier-high and tier-peak. */
.routes-cell.tier-high .rc-perkm,
.routes-cell.tier-peak .rc-perkm {
  color: var(--ink-2);
}

/* Filter focus state: when both From and To are picked, the matching cell
   gets a strong outline and lift; the rest of the matrix dims so the
   answer is unmissable. */
.routes-grid.is-filtered .routes-cell { opacity: 0.35; }
.routes-grid.is-filtered .routes-cell.is-focus {
  opacity: 1;
  outline: 2px solid var(--aegean);
  outline-offset: -2px;
  box-shadow: 0 2px 8px rgba(42, 107, 158, 0.25);
  z-index: 2;
  position: relative;
}

/* Heatmap legend — sits below the matrix, mobile-friendly inline row.
   Each stop uses the same tier background as its cells so the mapping
   is visually obvious. */
.routes-legend {
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.routes-legend .rl-title {
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.routes-legend .rl-scale {
  display: inline-flex;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.routes-legend .rl-stop {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  white-space: nowrap;
  border-right: 1px solid rgba(0,0,0,0.05);
}
.routes-legend .rl-stop:last-child { border-right: none; }
.routes-legend .rl-stop.tier-free  { background: #eef0f2; color: var(--ink-2); }
.routes-legend .rl-stop.tier-low   { background: #e3eedc; }
.routes-legend .rl-stop.tier-mid   { background: #f1ecc6; }
.routes-legend .rl-stop.tier-high  { background: #f5dcc1; color: var(--ink-2); }
.routes-legend .rl-stop.tier-peak  { background: #efc6b1; color: var(--ink-2); }

/* Summary-card colored dot mirrors the cell tier exactly. Reuses the
   same tints so users see "the dot in my answer card matches the cell
   color in the grid". */
.routes-filter-summary .rfs-tier.tier-free { background: #d8dee2; }
.routes-filter-summary .rfs-tier.tier-low  { background: #97c459; }
.routes-filter-summary .rfs-tier.tier-mid  { background: #d4c84b; }
.routes-filter-summary .rfs-tier.tier-high { background: #d89657; }
.routes-filter-summary .rfs-tier.tier-peak { background: #c4613d; }

/* ── Tolls table ── */
.tolls-table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* Horizontal scroll on narrow viewports — the table has 8 columns of
     data-dense content and tries hard to maintain readable widths;
     allow scroll rather than squish columns into illegibility on
     mobile. Vertical overflow stays clipped. */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-sm);
}
/* Mobile horizontal-scroll affordance: layered backgrounds reveal a soft
   gradient on the right edge when the table overflows offscreen. Uses
   the well-known "scrolling shadows" technique (Roman Komarov):
     • Two background layers per side (outer = "shadow cover", inner =
       gradient itself). The cover hides the gradient when there's no
       content beyond that edge.
     • background-attachment: local on the cover (scrolls with content),
       scroll on the gradient (stays at viewport edge).
     • At scroll-start the right-side cover moves left out of view,
       revealing the right-edge gradient → user sees "more →".
   Only the right side is shown (we don't need a left fade because the
   table starts at scroll-position 0 by default). */
@media (max-width: 640px) {
  .tolls-table-wrap {
    background:
      linear-gradient(to left, var(--paper), var(--paper) 70%, transparent) right center / 32px 100% no-repeat local,
      linear-gradient(to left, transparent, var(--paper-3) 0%, transparent 32px) right center / 32px 100% no-repeat scroll,
      var(--paper);
  }
}
.tolls-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.88rem;
  /* Fixed layout so per-column widths are honored exactly — needed for
     the four equal-width vehicle-price columns. With `auto`, longer
     prices like €33.70 expand individual cat columns and they stop
     looking aligned. */
  table-layout: fixed;
  /* Below this width, columns become unreadable. Triggers horizontal
     scroll in .tolls-table-wrap on mobile. */
  min-width: 760px;
}
.tolls-table thead th {
  background: var(--paper-2);
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tolls-table thead th[data-sort]::after {
  content: ' ⇅';
  font-size: 0.85em;
  color: var(--ink-3);
  opacity: 0.45;
  margin-left: 4px;
  transition: opacity 0.15s var(--ease), color 0.15s var(--ease);
  letter-spacing: 0;
}
.tolls-table thead th[data-sort]:hover {
  background: var(--paper);
  color: var(--aegean-dark);
}
.tolls-table thead th[data-sort]:hover::after { opacity: 1; color: var(--aegean); }
.tolls-table thead th.sorted-asc {
  color: var(--aegean-dark);
  background: var(--aegean-lt);
}
.tolls-table thead th.sorted-asc::after  {
  content: ' ↑';
  color: var(--aegean);
  opacity: 1;
  font-weight: 700;
}
.tolls-table thead th.sorted-desc {
  color: var(--aegean-dark);
  background: var(--aegean-lt);
}
.tolls-table thead th.sorted-desc::after {
  content: ' ↓';
  color: var(--aegean);
  opacity: 1;
  font-weight: 700;
}
.tolls-table tbody tr {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: background 0.12s;
}
.tolls-table tbody tr:hover { background: var(--paper-2); }
.tolls-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
}
.tolls-table .tolls-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.015em;
  cursor: pointer;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.tolls-table .tolls-name:hover { color: var(--aegean); text-decoration: underline; }

/* Per-column widths for table-layout: fixed. The four cat columns
   (3-6) are equal at 90px; the others get hand-tuned widths so their
   content (name, highway chip, bypass directions, verdict pill) fits
   without overflow. Total ≈ 1100px on a 1280px viewport. */
.tolls-table thead th:nth-child(1),
.tolls-table tbody td:nth-child(1) { width: 22%; }    /* Name */
.tolls-table thead th:nth-child(2),
.tolls-table tbody td:nth-child(2) { width: 13%; }    /* Highway */
.tolls-table thead th:nth-child(7),
.tolls-table tbody td:nth-child(7) { width: 14%; }    /* Bypass */
.tolls-table thead th:nth-child(8),
.tolls-table tbody td:nth-child(8) { width: 23%; }    /* Verdict */

/* Vehicle-price columns (cat1..cat4 = 3rd..6th columns). Equal width
   so the four prices align in a clean money-table grid; right-align
   the numbers since prices read better stacked on the right. */
.tolls-table thead th:nth-child(3),
.tolls-table thead th:nth-child(4),
.tolls-table thead th:nth-child(5),
.tolls-table thead th:nth-child(6),
.tolls-table tbody td:nth-child(3),
.tolls-table tbody td:nth-child(4),
.tolls-table tbody td:nth-child(5),
.tolls-table tbody td:nth-child(6) {
  width: 7%;
  padding-left: 6px;
  padding-right: 10px;
  text-align: right;
}
/* The sort-indicator pseudo-element sits on the right of the header
   text — pull it inline when right-aligned so it reads as part of the
   label rather than floating in trailing whitespace. */
.tolls-table thead th:nth-child(3)::after,
.tolls-table thead th:nth-child(4)::after,
.tolls-table thead th:nth-child(5)::after,
.tolls-table thead th:nth-child(6)::after {
  margin-left: 2px;
}
.tolls-table .tolls-hwy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.tolls-table .tolls-hwy-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(26,31,46,0.2);
}
.tolls-table .tolls-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  white-space: nowrap;
}
.tolls-table .tolls-bypass {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  white-space: nowrap;
}
.tolls-table .tolls-bypass-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}
.tolls-table .tolls-bypass-line {
  white-space: nowrap;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Confidence indicator inline with each bypass-direction line in the table.
   tbc-auto    = small subtle blue dot (data is reliable)
   tbc-approx  = amber warning glyph (verify before relying on this) */
.tolls-bypass-conf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  cursor: help;
}
.tolls-bypass-conf.tbc-auto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(42,107,158,0.5);
}
.tolls-bypass-conf.tbc-approx {
  color: #b8761a;
  font-weight: 600;
}
.tolls-table .tolls-bypass-na {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Tolls page advisor toolbar additions ── */
.tolls-toolbar {
  flex-wrap: wrap;
  gap: 10px 14px;
}
.tolls-toolbar .toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--line);
  flex-shrink: 0;
}
.tolls-toolbar .bar-input { min-width: 180px; flex: 1 1 200px; }
.tolls-toolbar .bar-select { min-width: 140px; }
.tolls-toolbar #tolls-vehicle { min-width: 130px; }

.tolls-time-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.tolls-time-control:hover,
.tolls-time-control:focus-within {
  border-color: var(--aegean);
  box-shadow: 0 0 0 3px rgba(42,107,158,0.08);
}
.tolls-time-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--muted);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.tolls-time-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  background: var(--aegean);
  color: var(--paper);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(42,107,158,0.3);
  white-space: nowrap;
  font-family: var(--font-body);
}
.tolls-time-pill .tolls-time-num {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.025em;
  min-width: 14px;
  text-align: center;
}
.tolls-time-pill .tolls-time-suffix {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.005em;
}
.tolls-time-slider {
  width: 150px;
  height: 8px;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    to right,
    var(--aegean) 0%,
    var(--aegean) var(--fill, 50%),
    rgba(42,107,158,0.18) var(--fill, 50%),
    rgba(42,107,158,0.18) 100%
  );
  border-radius: var(--radius);
  cursor: grab;
  outline: none;
  border: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.10);
}
.tolls-time-slider:active { cursor: grabbing; }
.tolls-time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--paper);
  border: 3px solid var(--aegean);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(42,107,158,0.45), 0 0 0 1px rgba(255,255,255,0.6) inset;
  transition: transform 0.12s var(--ease);
}
.tolls-time-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tolls-time-slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
.tolls-time-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--paper);
  border: 3px solid var(--aegean);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(42,107,158,0.45);
}
.tolls-time-slider::-moz-range-progress {
  background: var(--aegean);
  border-radius: var(--radius);
  height: 8px;
}
.tolls-time-slider::-moz-range-track {
  background: rgba(42,107,158,0.18);
  border-radius: var(--radius);
  height: 8px;
}

.tolls-avoid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tolls-avoid-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #2e7a4a;
}
.tolls-avoid-toggle:hover { color: var(--ink); }

.tolls-count {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.84rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.005em;
}

/* Active vehicle column gets a subtle highlight in the price cells.
   Quiet — the verdict column does the loud signaling. */
.tolls-table .tolls-price.active {
  color: var(--aegean-dark);
  text-shadow: 0 0 0.5px rgba(42,107,158,0.25);
}
/* Stronger active-column treatment: tint the whole cell background +
   left border so the column visually stands out from its neighbors.
   Header gets the same treatment so the column-strip reads as a unit
   from top to bottom. Uses :has() (Chrome/Safari/Edge/Firefox 2022+);
   gracefully degrades to just the text-color rule above. */
.tolls-table tbody td:has(.tolls-price.active) {
  background: rgba(42, 107, 158, 0.06);
  box-shadow: inset 1px 0 0 rgba(42, 107, 158, 0.18);
}
/* Data-driven header highlight: the renderer sets data-active="true" on
   the header that matches the active vehicle (set in pages.js). */
.tolls-table thead th[data-active="true"] {
  background: rgba(42, 107, 158, 0.10);
  color: var(--aegean-dark);
  box-shadow: inset 1px 0 0 rgba(42, 107, 158, 0.25);
}
.tolls-table thead th[data-active="true"]::after {
  color: var(--aegean);
  opacity: 0.85;
}

/* ── Verdict pill in tolls table ── */
.tolls-verdict-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tolls-verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tolls-verdict .tv-arrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.7;
  margin-right: -1px;
}
.tolls-verdict .tv-icon {
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1;
}
.tolls-verdict .tv-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
}
.tolls-verdict .tv-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  opacity: 0.78;
  margin-left: 2px;
}
.tolls-verdict-AVOID {
  background: rgba(46,122,74,0.12);
  color: #1f5828;
  border-color: rgba(46,122,74,0.3);
}
.tolls-verdict-MARGINAL_AVOID {
  background: rgba(90,153,112,0.12);
  color: #3d6e54;
  border-color: rgba(90,153,112,0.3);
}
.tolls-verdict-MARGINAL_PAY {
  background: rgba(196,128,95,0.10);
  color: #8a4d33;
  border-color: rgba(196,128,95,0.28);
}
.tolls-verdict-PAY {
  background: rgba(184,80,45,0.10);
  color: #8c3d22;
  border-color: rgba(184,80,45,0.28);
}
.tolls-verdict-none {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
}

/* Mobile adjustments for the new pages */
@media (max-width: 740px) {
  .topbar-nav { gap: 0; margin-right: 8px; }
  .nav-link { padding: 5px 9px; font-size: 0.82rem; }
  .page-content { padding: 22px 16px 40px; }
  .page-title { font-size: 1.7rem; }
  .page-subtitle { font-size: 0.88rem; }
  .page-toolbar { flex-wrap: wrap; padding: 10px 12px; }
  .page-toolbar .bar-input,
  .page-toolbar .bar-select { width: 100%; min-width: auto; }
  /* Tolls advisor controls stay compact even on mobile — they're small enough
     to share a row, and stretching them full-width feels off for short labels. */
  .tolls-toolbar #tolls-vehicle { width: auto; min-width: 110px; flex: 0 0 auto; }
  .tolls-toolbar .toolbar-divider { display: none; }
  .tolls-toolbar .tolls-time-control { flex: 1 1 100%; justify-content: space-between; }
  .tolls-toolbar .tolls-time-slider { flex: 1; max-width: 200px; min-width: 100px; }
  .tolls-toolbar .tolls-time-slider::-webkit-slider-thumb { width: 22px; height: 22px; }
  .tolls-toolbar .tolls-time-slider::-moz-range-thumb { width: 22px; height: 22px; }
  .tolls-toolbar .tolls-avoid-toggle { flex: 1 1 100%; }
  .tolls-toolbar .tolls-count { margin-left: 0; flex: 1 1 100%; text-align: right; }
  .routes-grid-table { font-size: 0.72rem; }
  .routes-grid-table th, .routes-grid-table td { padding: 6px 8px; }
  .routes-grid-table tbody th { font-size: 0.74rem; padding-left: 10px; }
  .routes-cell .rc-price { font-size: 0.85rem; }
  .routes-cell .rc-meta { font-size: 0.6rem; }
  .tolls-table { font-size: 0.78rem; }
  .tolls-table thead th, .tolls-table tbody td { padding: 8px 10px; }
  .tolls-verdict { padding: 3px 7px; font-size: 0.7rem; }
  .tolls-verdict .tv-label { font-size: 0.62rem; }
}
/* Below 640px: collapse the routes matrix to price-only cells.
   The km/tolls/€-per-km detail makes cells unreadable when forced into a
   16-wide horizontally scrolling table on phones. Tap a cell to jump to
   the map view where the full breakdown is shown. */
@media (max-width: 640px) {
  .routes-cell { min-width: 64px; padding: 8px 6px; }
  .routes-cell .rc-meta,
  .routes-cell .rc-perkm { display: none; }
  .routes-cell .rc-price { font-size: 0.82rem; }
  .routes-grid-table th, .routes-grid-table td { padding: 5px 6px; }
  .routes-grid-table tbody th { font-size: 0.7rem; padding-left: 8px; padding-right: 8px; }
  .routes-grid-table thead th { font-size: 0.62rem; }
}
@media (max-width: 640px) {
  .topbar-sep     { display: none; }

  /* Hide Leaflet's +/- zoom controls on mobile. Pinch-to-zoom and
     double-tap-to-zoom are universally familiar mobile gestures, and the
     buttons add no functionality while occupying valuable top-left
     real estate near the topbar. Standard map-app convention (Google
     Maps, Apple Maps) hides them on mobile. */
  .leaflet-control-zoom { display: none; }

  #legend {
    right: 6px;
    min-width: 175px;
    max-width: calc(100vw - 12px);
  }

  /* Side panel as bottom sheet — leaves 50% of screen for the map above */
  #toll-side-panel {
    width: 100%;
    top: auto;
    bottom: 0;
    height: 50vh;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 32px rgba(26,31,46,0.14);
    transform: translateY(100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  #toll-side-panel.open { transform: translateY(0); }

  /* When panel open on mobile, hide bottom bar and resize map */
  body.panel-open #bottom-bar { display: none; }
  body.panel-open #map-container { bottom: 50vh !important; }
  body.panel-open #results-panel { display: none; }
  body.panel-open #legend { display: none; }

  /* Tighter side panel content on mobile so more fits in the smaller sheet */
  .sp-header { padding: 9px 14px; padding-top: 14px; }
  /* Mobile header is a 2-column grid: badge spans full width on top,
     then toll name on the left + price on the right of the second row.
     This keeps the price visible without burning a separate row of
     vertical real estate — important on small viewports where the
     side panel is a bottom sheet competing with the map. */
  .sp-header-inner {
    padding: 14px 16px 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "badge   badge"
      "name    price"
      "namegr  price";
    column-gap: 10px;
    align-items: center;
  }
  .sp-header-inner .sp-hwy-badge { grid-area: badge; }
  .sp-header-inner .sp-name      { grid-area: name; align-self: end; }
  .sp-header-inner .sp-name-gr   { grid-area: namegr; align-self: start; }
  .sp-header-inner .sp-price-row { grid-area: price; align-self: center; }
  .sp-name { font-size: 1.4rem; margin-bottom: 2px; line-height: 1.1; }
  .sp-name-gr { font-size: 0.82rem; margin-bottom: 0; }
  .sp-section-title { padding: 8px 16px 4px; font-size: 0.66rem; }
  /* Compact price chip on mobile: emoji left, big price right.
     Previously this was a 4-column grid of cells; now it's a single
     inline pill that lives in the header grid. */
  .sp-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--paper-2);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius);
  }
  .sp-price-row > span { display: inline-flex; align-items: center; gap: 0; line-height: 1; }
  .sp-price-row .sp-emoji { font-size: 1.4rem; }
  .sp-price-row .sp-vlabel { display: none; }   /* hide text label on mobile */
  .sp-price-row strong { font-size: 1rem; letter-spacing: -0.02em; }

  .sp-direction { padding: 9px 16px 12px; font-size: 0.86rem; }
  .sp-dir { padding: 11px 16px 13px; }
  .sp-dir-label { font-size: 0.92rem; margin-bottom: 6px; }
  .sp-dir-compare { padding: 8px 10px; }
  .sp-dir-filter { padding: 8px 16px 5px; gap: 4px; }
  .sp-filter-btn { padding: 4px 9px; font-size: 0.7rem; }

  /* Visual handle bar at the top of the sheet for affordance */
  #toll-side-panel.open::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--line-strong);
    border-radius: var(--radius-sm);
    z-index: 10;
  }

  #bottom-bar {
    height: auto;
    min-height: var(--bar-h);
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 6px;
    row-gap: 8px;
  }
  .bar-input { flex: 1; min-width: 80px; height: 40px; font-size: 0.9rem; }
  .swap-btn  { height: 40px; }
  .bar-label { display: none; }
  .bar-sep { display: none; }
  .bar-select { height: 40px; font-size: 0.84rem; flex: 1; }

  /* Slider control on mobile: short phrase, sentence + slider on its own row */
  .tv-compact {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    order: 9;
    padding: 8px 4px 14px;
    background: var(--paper-2);
    border-radius: var(--radius);
    margin-top: 4px;
  }
  .tv-compact .tv-desktop { display: none; }
  .tv-compact .tv-mobile  { display: inline; }
  .tv-compact-sentence {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
  }
  .tv-compact .lbl,
  .tv-compact .lbl-suffix {
    font-size: 0.86rem;
    white-space: nowrap;
  }
  .tv-compact .val {
    width: 96px;
    padding: 5px 8px 6px;
  }
  .tv-compact .val-num {
    font-size: 1.05rem;
  }
  .tv-compact .val-tier {
    font-size: 0.62rem;
  }
  .tv-compact input[type="range"] {
    width: calc(100% - 16px);
    margin: 0 8px;
    height: 6px;
  }
  .tv-compact input[type="range"]::-webkit-slider-thumb {
    width: 24px; height: 24px;
    border-width: 2.5px;
  }
  .tv-compact input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px;
    border-width: 2.5px;
  }

  /* ── Tolerance control on mobile ──────────────────────────────────────
     In prose mode (first visit), the existing .tv-compact column-flex
     layout above does the work. In pill mode, dissolve .tv-control with
     display:contents so the pill sits inline with the From/To inputs
     instead of consuming a full row below them. The popover (when
     opened) gets order:9 to wrap to its own row below the inputs while
     staying above the order:10 analyse button. */
  .tv-control {
    width: 100%;
    order: 9;
    flex-direction: column;
    align-items: stretch;
  }
  .tv-control.is-pill-mode {
    display: contents;
  }
  .tv-control.is-pill-mode .tv-pill {
    /* Inline pill — slot it after the To input. flex-shrink:0 prevents
       the bar's wrap behaviour from making it disappear when squeezed. */
    height: 40px;
    padding: 0 12px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  .tv-control.is-pill-mode .tv-pill-icon { width: 16px; height: 16px; }
  .tv-control.is-pill-mode .tv-popover {
    /* Popover wraps to its own row below the inputs (order 9) but still
       above the analyse button (order 10). */
    order: 9;
    width: 100%;
  }
  .tv-pill {
    height: 40px;
    padding: 0 14px;
    font-size: 0.95rem;
  }
  .tv-pill-icon { width: 16px; height: 16px; }
  /* On mobile, popover stretches to bar width and renders below the bar
     (the bar lives at the top of the bottom-bar's column layout, so the
     popover ends up just under the pill — no need to fight viewport edges). */
  .tv-popover {
    position: static;
    transform: none;
    width: 100%;
    margin-top: 8px;
    animation-name: tv-popover-in-mobile;
  }
  @keyframes tv-popover-in-mobile {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tv-popover-arrow { display: none; }   /* no arrow needed in flow layout */
  .tv-popover-question { font-size: 0.88rem; }
  /* Bigger slider thumb inside the popover on mobile, matching the
     prose-mode .tv-compact slider thumb size. */
  .tv-popover-slot input[type="range"] {
    height: 6px;
  }
  .tv-popover-slot input[type="range"]::-webkit-slider-thumb {
    width: 24px; height: 24px;
    border-width: 2.5px;
  }
  .tv-popover-slot input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px;
    border-width: 2.5px;
  }

  .analyse-btn {
    width: 100%;
    height: 48px;
    font-size: 0.98rem;
    font-weight: 600;
    justify-content: center;
    order: 10;
    margin-top: 4px;
  }
  .error-pill { width: 100%; order: 11; }

  #map-container { bottom: var(--bar-actual-h, 116px); }
  #results-panel { bottom: var(--bar-actual-h, 116px); max-height: 60vh; }

  /* Compact topbar buttons on mobile */
  #legend-toggle,
  #basemap-toggle { display: none; } /* both have drawer equivalents on mobile */

  /* Vehicle dropdown: tighter padding on mobile. The full label stays */
  /* visible — vehicle selection is essential, not optional like feedback. */
  .veh-current { padding: 4px 8px 4px 10px; font-size: 0.82rem; }
  .veh-current .veh-label { display: none; } /* show emoji only on mobile */
  .veh-menu { min-width: 150px; }
  /* Inline page-header pill has more space (it's in document flow, not in
     the cramped topbar), so keep its label visible on mobile too. */
  .veh-toggle--inline .veh-current .veh-label { display: inline; }
  .toll-tooltip { min-width: 220px; max-width: calc(100vw - 20px); }
}

@media (max-width: 400px) {
  .bar-input { font-size: 0.82rem; }
  .bar-select { font-size: 0.77rem; }
}

/* ══════════════════════════════════════
   READABILITY OVERRIDES (after font swap to Inter)
   Inter doesn't have italic styles that flatter UI text the way Fraunces did,
   so we drop italics from functional UI elements while keeping them in genuinely
   typographic content (notes, taglines).
   ══════════════════════════════════════ */
.legend-title,
.legend-sub,
.sp-section-title,
.sp-header-title,
.sp-direction,
.bar-label,
.tv-compact .lbl,
.page-subtitle,
.page-toolbar-label,
.routes-grid-table thead th,
.routes-grid-table tbody th,
.tt-sub em,
.sp-direction em,
.sp-cmp-diff,
.sp-name-gr,
.tt-name-gr,
.help-subtitle,
.legend-ramps-state,
.flag-option {
  font-style: normal !important;
}

/* Restore italics for genuinely typographic flourishes */
.sp-notes,
.help-tip,
.tt-notes {
  font-style: italic;
}

/* Inter looks better at slightly heavier weights for display text */
.page-title,
.sp-name,
.help-logo,
.logo {
  letter-spacing: -0.025em;
}
/* Logo's middle "dio" stays bold; the "my" prefix and italic "dia" keep their lighter weights. */
.logo-text .logo-mid,
.help-logo-text .logo-mid,
.mobile-drawer-logo .logo-mid {
  font-weight: 700;
}

/* Section labels — small, uppercase, looks better in sans-serif */
.sp-section-title,
.legend-title {
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ══════════════════════════════════════
   HAMBURGER BUTTON + MOBILE DRAWER
   ══════════════════════════════════════ */
.hamburger-btn {
  display: none;   /* shown only on mobile via media query below */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  flex-shrink: 0;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
  padding: 0;
}
.hamburger-btn:hover {
  background: var(--paper-2);
  border-color: var(--aegean);
}

.mobile-drawer {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
  visibility: hidden;
}
.mobile-drawer.open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(26,31,46,0.45);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-drawer.open .mobile-drawer-overlay { opacity: 1; }

.mobile-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 84%;
  max-width: 320px;
  background: var(--paper);
  box-shadow: -16px 0 48px rgba(26,31,46,0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  padding: 16px 0;
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }

.mobile-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 22px 18px;
  border-bottom: 1px solid var(--line);
}
.mobile-drawer-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  color: var(--muted);
}
.mobile-drawer-logo .logo-mid {
  color: var(--ink);
  font-weight: 700;
}
.mobile-drawer-logo em {
  font-style: italic;
  font-weight: 500;
  color: var(--aegean);
}
.mobile-drawer-close {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  width: 36px; height: 36px;
  font-size: 0.95rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.mobile-drawer-close:hover {
  background: var(--stop-bg);
  border-color: var(--stop);
  color: var(--stop);
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  gap: 2px;
}
.mobile-nav-link {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 14px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.mobile-nav-link:hover { background: var(--paper-2); }
.mobile-nav-link.active {
  background: var(--aegean-lt);
  color: var(--aegean-dark);
}

.mobile-drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 22px;
}

.mobile-drawer-actions {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 2px;
}
.mobile-drawer-action {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-2);
  padding: 12px 18px;
  border-radius: var(--radius);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.15s var(--ease);
}
.mobile-drawer-action:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.mobile-drawer-action svg { flex-shrink: 0; opacity: 0.7; }
.mobile-drawer-action:hover svg { opacity: 1; }

@media (max-width: 640px) {
  /* On mobile: show hamburger, hide nav + overflow menu (their items go in
     the drawer instead). */
  .hamburger-btn { display: inline-flex; }
  .topbar-nav,
  .overflow-toggle { display: none !important; }
  /* Logo stays visible, language toggle stays visible */
}

/* ── Site footer (legal/credits) ──────────────────────────────────────────
   Lives inside the routes and tolls page wrappers. Map page has no footer
   (the canvas is the whole page; credits live in the help drawer instead). */
.site-footer {
  margin-top: 32px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}
.site-footer-inner {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.005em;
}
.site-footer .footer-sep {
  opacity: 0.4;
}
.site-footer .footer-link {
  color: var(--aegean);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.site-footer .footer-link:hover {
  border-bottom-color: var(--aegean);
}
@media (max-width: 640px) {
  .site-footer { padding: 14px 16px; font-size: 0.68rem; }
  .site-footer-inner { flex-direction: column; gap: 3px; }
  .site-footer .footer-sep { display: none; }
}

/* ══════════════════════════════════════
   FIRST-VISIT TIP
   Floating card centered near the top of the map page that tells new
   visitors the site's primary action: tap a toll to see if it's worth
   paying or bypassing. Auto-dismisses on first toll click. Persists
   dismissed state in localStorage as `mydiodia.tip.bypass.v1`.
   Wired up by map.js. Toggled via [hidden] attribute, so anything
   that needs to hide it can do so without removing it from the DOM.
   ══════════════════════════════════════ */
.first-tip {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 920;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(540px, calc(100vw - 24px));
  padding: 10px 12px 10px 16px;
  background: var(--paper);
  border: 1px solid var(--aegean-lt);
  border-left: 3px solid var(--aegean);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink);
  /* Fade in slightly delayed so it doesn't compete with map tile loading */
  animation: first-tip-in 0.4s var(--ease-out) 0.4s backwards;
}
.first-tip[hidden] { display: none; }
.first-tip.is-leaving {
  animation: first-tip-out 0.25s var(--ease) forwards;
}
.first-tip-body {
  flex: 1;
  /* Keep emoji baseline aligned with text */
  display: inline-block;
}
.first-tip-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.first-tip-close:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.first-tip-close:focus-visible {
  outline: 2px solid var(--aegean);
  outline-offset: 1px;
}
@keyframes first-tip-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes first-tip-out {
  to { opacity: 0; transform: translate(-50%, -8px); }
}
/* Mobile: tighten padding/font, allow it to span the screen with margin */
@media (max-width: 640px) {
  .first-tip {
    top: calc(var(--topbar-h) + 8px);
    padding: 9px 10px 9px 13px;
    font-size: 0.8rem;
    gap: 8px;
    max-width: calc(100vw - 16px);
  }
}

/* ══════════════════════════════════════
   CITY AUTOCOMPLETE DROPDOWN
   Floats above the bottom-bar inputs (#origin / #dest). Positioned via
   JS using the input's bounding rect, so it follows on resize. Opens
   upward because the inputs are pinned to the screen bottom.
   ══════════════════════════════════════ */
.city-ac-dropdown {
  position: fixed;
  z-index: 2000;            /* above bottom-bar (z-500) and side panel */
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 0;
  /* Don't let it become absurdly wide on big screens */
  max-width: 320px;
  animation: city-ac-in 0.12s var(--ease-out);
}
.city-ac-dropdown[hidden] { display: none; }
@keyframes city-ac-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.city-ac-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  user-select: none;
  /* Faster than transitioning bg on hover — feels snappier on a list */
}
.city-ac-row.is-active {
  background: var(--aegean-lt);
}
.city-ac-row:hover {
  background: var(--aegean-lt);
}
.city-ac-primary {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.city-ac-secondary {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-weight: 400;
}
@media (max-width: 640px) {
  .city-ac-dropdown {
    font-size: 0.92rem;
    max-height: 240px;
    max-width: calc(100vw - 20px);
  }
  .city-ac-row {
    padding: 11px 14px;  /* slightly larger tap target on mobile */
  }
}

/* ══════════════════════════════════════
   BYPASS-CONTEXT SIDE-TOLL MARKERS
   Yellow side-toll dots that appear specifically when a toll's side panel
   is open AND that toll's bypass passes through one or more side tolls.
   They're tied to the inspectLayers lifecycle: cleared when the panel
   closes. Slightly larger + ring of yellow glow so they pop.
   Only added when global side-tolls toggle is OFF (see map.js).
   ══════════════════════════════════════ */
.toll-marker-bypass-side {
  width: 13px; height: 13px;
  border: 2.5px solid var(--paper);
  box-shadow:
    0 0 0 2px rgba(244,196,48,0.45),
    0 0 0 5px rgba(244,196,48,0.18),
    0 2px 6px rgba(0,0,0,0.35);
}
.toll-marker-bypass-side:hover {
  transform: scale(1.5);
}

/* ══════════════════════════════════════
   BYPASS SIDE-TOLL CALLOUT (in side panel)
   Two states:
   - .sp-bypass-sidetolls-some  → amber-ish "you'll still pay X side tolls"
   - .sp-bypass-sidetolls-free  → green "no tolls — fully free"
   Sits between the confidence indicator and the comparison block.
   ══════════════════════════════════════ */
.sp-bypass-sidetolls {
  margin: 6px 0 8px;
  padding: 8px 11px;
  border-radius: var(--radius);
  font-size: 0.78rem;
  line-height: 1.4;
}
.sp-bypass-sidetolls-some {
  background: rgba(244,196,48,0.12);   /* faint yellow, semantic "side toll" */
  border: 1px solid rgba(200,158,26,0.55);
  color: #5a4500;                       /* dark yellow-brown for legibility */
}
.sp-bypass-sidetolls-free {
  background: var(--go-bg);
  border: 1px solid var(--go);
  color: #1f5a35;
  font-weight: 500;
}
.sp-bypass-sidetolls-title {
  font-weight: 500;
  margin-bottom: 5px;
}
.sp-bypass-sidetolls-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sp-bypass-sidetoll-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 1px 0;
}
.sp-bypass-sidetoll-dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #c89e1a;          /* darker yellow than the toll-marker fill */
  border: 1px solid #6e5612;
}
.sp-bypass-sidetoll-name {
  font-weight: 500;
  color: #4a3500;
}
.sp-bypass-sidetoll-role {
  font-size: 0.72rem;
  color: #6e5612;
  font-style: italic;
}

/* ══════════════════════════════════════
   FERRY-MODE BYPASS (Rio-Antirrio bridge)
   When the bypass for a bridge crossing is a ferry, render the schedule
   + fare table here instead of the road-style "you'll still pay X side
   tolls" callout. Visual style: cool aegean-blue accent (it IS the sea)
   to distinguish from the amber side-toll callout and the green
   "fully free" confirmation.
   ══════════════════════════════════════ */
.sp-bypass-ferry {
  background: var(--aegean-lt);
  border: 1px solid #a8cae0;
  border-left: 3px solid var(--aegean);
  color: var(--aegean-dark);
}
.sp-bypass-ferry-title {
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--aegean-dark);
}
.sp-bypass-ferry-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.72rem;
  margin-bottom: 8px;
}
.sp-bypass-ferry-stat {
  background: var(--paper);
  border: 1px solid #c7d8e3;
  border-radius: var(--radius);
  padding: 3px 8px;
  color: var(--aegean-dark);
  font-weight: 500;
}
.sp-bypass-ferry-fare-label {
  font-size: 0.7rem;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: 4px;
}
.sp-ferry-fare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
}
.sp-ferry-fare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
}
.sp-ferry-fare-veh {
  display: flex; align-items: center; gap: 4px;
  color: var(--ink-2);
}
.sp-ferry-fare-emoji { font-size: 0.95rem; }
.sp-ferry-fare-val {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--aegean-dark);
}
@media (max-width: 480px) {
  .sp-ferry-fare-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   FERRY PIER MARKERS (Rio-Antirrio)
   Synthetic yellow markers at the two ferry piers, shown when the
   global "Πλευρικά διόδια" toggle is on. Visual hint that they're
   sea crossings rather than road tolls: thin aegean-blue ring over
   the yellow base.
   ══════════════════════════════════════ */
.toll-marker-ferry-pier {
  border: 1.5px solid var(--aegean);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,0.3);
}
.toll-marker-ferry-pier:hover {
  transform: scale(1.5);
}

/* ══════════════════════════════════════
   BUMPED SIDE-TOLL MARKER
   When a toll's side panel is open AND its bypass bills a side toll
   that's at the same lat/lng as a ramp pillar, we swap the small 11px
   side-toll dot for this 16px ringed marker, visually offset up-and-left
   so it pops out from behind the green RE-ENTER / blue EXIT pillar.
   The icon's geo anchor still points at the actual toll coord; only the
   visual is shifted. Reverted to the regular dot on panel close.
   ══════════════════════════════════════ */
.toll-marker-bumped {
  width: 16px; height: 16px;
}