/* ═══════════════════════════════════════════════════════
   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);
}
.btn-help svg { flex-shrink: 0; opacity: 0.7; }
.btn-help:hover svg { opacity: 1; }

/* ══════════════════════════════════════
   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;
}

/* ══════════════════════════════════════
   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; }
#legend.pushed { right: calc(var(--sp-w) + 14px); }

/* ══════════════════════════════════════
   FLOATING SIDE-TOLLS TOGGLE
   Standalone pill on the bottom-right of the map, above the bottom bar.
   Independent of legend visibility — always reachable when the map is shown.
   Shows/hides yellow side-toll markers.
   ══════════════════════════════════════ */
.map-floating-toggle {
  position: fixed;
  bottom: calc(var(--bar-actual-h, var(--bar-h)) + 14px);
  right: 12px;
  z-index: 850;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  transition: all 0.18s var(--ease), right 0.3s var(--ease);
  user-select: none;
}
.map-floating-toggle:hover {
  border-color: #c89e1a;
  color: var(--ink);
  transform: translateY(-1px);
}
.map-floating-toggle.active {
  background: #fef6d8;          /* very light yellow */
  border-color: #c89e1a;
  color: #4a3500;               /* dark brown for contrast on yellow */
  font-weight: 600;
}
.map-floating-toggle-label { white-space: nowrap; }
.map-floating-toggle-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);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.map-floating-toggle.active .map-floating-toggle-state {
  background: var(--paper);
  border-color: #c89e1a;
  color: #4a3500;
}
/* When the side panel pushes content, the toggle slides left along with the legend. */
#legend.pushed ~ .map-floating-toggle {
  right: calc(var(--sp-w) + 14px);
}
/* When the analyze-route results panel is open, lift the toggle above it
   so it stays visible/clickable. Uses :has() (modern browsers, 2022+). */
body:has(#results-panel.open) .map-floating-toggle {
  bottom: calc(var(--bar-actual-h, var(--bar-h)) + var(--panel-h) + 14px);
}

.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. */
.sp-prices {
  padding: 6px 26px 14px;
}
.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 MODAL
   ══════════════════════════════════════ */
#help-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(26,31,46,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s var(--ease);
  padding: 18px;
}
#help-modal.open { opacity: 1; pointer-events: all; }
.help-box {
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 540px; width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 32px 26px;
  position: relative;
  transform: scale(0.96);
  transition: transform 0.22s var(--ease);
}
#help-modal.open .help-box { transform: scale(1); }
.help-box::-webkit-scrollbar { width: 5px; }
.help-box::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-sm); }
.help-close {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 5px 10px;
  border-radius: var(--radius);
  transition: all 0.18s var(--ease);
}
.help-close:hover { color: var(--stop); border-color: var(--stop); background: var(--stop-bg); }

.help-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 2px;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.help-logo-text {
  /* "my" base color (muted) */
  color: var(--muted);
  font-weight: 500;
}
.help-logo-text .logo-mid {
  /* "dio" mid: bold ink */
  color: var(--ink);
  font-weight: 700;
}
.help-logo em { font-style: italic; color: var(--aegean); font-variation-settings: "opsz" 144, "SOFT" 80; font-weight: 500; }
.help-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.help-section { display: flex; gap: 16px; margin-bottom: 20px; }
.help-section-icon {
  font-size: 1.3rem;
  color: var(--aegean);
  flex-shrink: 0;
  width: 28px; text-align: center;
  margin-top: 2px;
}
.help-section-content { flex: 1; }
.help-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 144;
}
.help-section-body {
  font-size: 0.86rem;
  color: var(--ink-2);
  line-height: 1.55;
  font-family: var(--font-body);
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-section-body strong { color: var(--ink); font-weight: 600; }
.help-legend-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.84rem;
}
.help-divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }
.help-tip {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.5;
  background: var(--aegean-lt);
  border-left: 3px solid var(--aegean);
  padding: 10px 14px;
  margin: 14px 0 16px;
  border-radius: var(--radius);
}
.help-tip strong { font-style: normal; color: var(--aegean-dark); font-weight: 600; }
.help-cta {
  width: 100%;
  background: var(--aegean);
  border: none;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.015em;
  padding: 13px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.18s var(--ease), transform 0.1s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(42,107,158,0.25);
}
.help-cta:hover {
  background: var(--aegean-dark);
  box-shadow: 0 4px 14px rgba(42,107,158,0.35);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════
   FEEDBACK LINK IN TOPBAR
   ══════════════════════════════════════ */
.btn-feedback-top {
  text-decoration: none;
}
.btn-feedback-top:hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
  background: rgba(196,97,61,0.08);
}
.btn-feedback-top svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.btn-feedback-top:hover svg { opacity: 1; }

/* ══════════════════════════════════════
   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) .map-floating-toggle,
#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 ── */
.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);
}

/* ── Tolls table ── */
.tolls-table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tolls-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.88rem;
}
.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; }
.tolls-table .tolls-name-gr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 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);
}

/* ── 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; }

  #legend {
    right: 6px;
    min-width: 175px;
    max-width: calc(100vw - 12px);
  }
  #legend.pushed { right: 6px; top: auto; bottom: calc(var(--bar-h) + 220px); }

  /* 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; }
  body.panel-open .map-floating-toggle { display: none; }

  /* On mobile, side panel is a bottom sheet (not a side push) — reset the
     desktop "slide-left when panel open" offset so the pill doesn't drift. */
  #legend.pushed ~ .map-floating-toggle {
    right: 12px;
  }

  /* Tighter side panel content on mobile so more fits in the smaller sheet */
  .sp-header { padding: 9px 14px; padding-top: 14px; }
  .sp-header-inner { padding: 14px 16px 12px; }
  .sp-name { font-size: 1.4rem; margin-bottom: 2px; line-height: 1.1; }
  .sp-name-gr { font-size: 0.82rem; margin-bottom: 6px; }
  .sp-section-title { padding: 8px 16px 4px; font-size: 0.66rem; }
  .sp-prices {
    padding: 6px 16px 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  /* Compact price cells: emoji on top, price below; hide the text label */
  .sp-price-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    background: var(--paper-2);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius);
    gap: 3px;
  }
  .sp-price-row span { display: flex; align-items: center; gap: 4px; line-height: 1; }
  .sp-price-row .sp-emoji { font-size: 1.25rem; }
  .sp-price-row .sp-vlabel { display: none; }   /* hide text label on mobile */
  .sp-price-row strong { font-size: 0.9rem; 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, the .tv-control becomes a
     full-width row containing the pill button. Tapping the pill expands
     the popover *inline below the bar* instead of floating above it. */
  .tv-control {
    width: 100%;
    order: 9;
    flex-direction: column;
    align-items: stretch;
  }
  .tv-control.is-pill-mode {
    /* Pill alone is small; center it in its own row so it doesn't look
       lonely against the full-width inputs above. */
    align-items: center;
  }
  .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 */
  .btn-feedback-top span { display: none; }
  .btn-feedback-top { padding: 6px 9px; }
  #legend-toggle { display: none; } /* legend has its own scrolling, hide button on mobile */
  .btn-help span { display: none; }
  .btn-help { padding: 6px 9px; }

  /* 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/feedback/help (they go in drawer) */
  .hamburger-btn { display: inline-flex; }
  .topbar-nav,
  .btn-feedback-top,
  .btn-help { 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;
}