/* bus-buster.it — stili della SPA (mappa.html).
   Estratto dal blocco <style> inline di mappa.html il 2026-07-10
   (ANALISI_DEBOLEZZE §3.1): servito hashato da WhiteNoise, precachato dal SW.
   tb.css resta separato: serve solo le pagine SEO (base_public.html). */
/* V05-bis: fallback metric-matched (size-adjust calcolato dai woff2 con
   fontTools vs Arial/Georgia di sistema). Con fonts.css async, il primo paint
   usa questi fallback con le STESSE metriche dei webfont → lo swap non
   sposta il layout (CLS da "Web font loaded" era 0.31 sul .hero-form). */
@font-face { font-family:'DM Sans Fallback'; src:local('Arial');
  size-adjust:103.53%; ascent-override:95.82%; descent-override:29.94%; line-gap-override:0%; }
@font-face { font-family:'Fredoka Fallback'; src:local('Arial');
  size-adjust:101.75%; ascent-override:95.73%; descent-override:23.20%; line-gap-override:0%; }
@font-face { font-family:'DM Serif Display Fallback'; src:local('Georgia');
  size-adjust:100.47%; ascent-override:103.11%; descent-override:33.34%; line-gap-override:0%; }
:root {
  --sea: #0a4f6e; --sea-light: #1a7fa0; --sea-pale: #e8f4f8;
  --sand: #f5efe6; --sand-dark: #d4b896; --text: #1a1a2e;
  --text-muted: #5b6370; --white: #ffffff; --accent: #e8622a;
  /* A11y: --accent (3.38:1 su bianco) solo per sfondi/decorazioni;
     per TESTO accent usare --accent-text (4.66:1 su bianco, 4.18:1 su --accent-light). */
  --accent-text: #c4501a;
  --accent-light: #fdf0eb; --green: #2d7a4f; --green-light: #e8f5ee;
  --border: rgba(10,79,110,0.15);
  /* A11y (WCAG 1.4.11): bordo dei CONTROLLI interattivi ≥3:1 su bianco */
  --border-input: rgba(10,79,110,0.62);
  --shadow: 0 4px 24px rgba(10,79,110,0.12); --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans','DM Sans Fallback',sans-serif; background:var(--sand); color:var(--text); height:100vh; display:flex; flex-direction:column; overflow:hidden; }
header { background:var(--sea); color:white; padding:0 24px; height:132px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; z-index:1000; }
.logo { display:flex; align-items:center; }
.logo img { height:144px; width:auto; display:block; }
.header-badge { background:rgba(255,255,255,0.15); padding:6px 16px; border-radius:28px; font-size:14px; }
.app { flex:1; display:flex; overflow:hidden; }
.sidebar { width:380px; flex-shrink:0; background:var(--white); display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); z-index:100; }
.search-form { padding:16px; border-bottom:1px solid var(--border); background:var(--sea-pale); }
.search-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--sea); margin-bottom:8px; }
/* ── cascade selettore ── */
.cascade-wrap { position:relative; margin-bottom:8px; }
.cascade-field { display:flex; align-items:center; padding:0 36px 0 32px; border:1.5px solid var(--border-input); border-radius:8px; background:white; transition:border-color 0.2s; position:relative; min-height:42px; }
#cascade-from .cascade-field { padding-right:62px; }
.cascade-field:focus-within { border-color:var(--sea-light); }
.cascade-field.filled { border-color:var(--sea); background:var(--sea-pale); }
.cascade-input { flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:'DM Sans','DM Sans Fallback',sans-serif; color:var(--text); padding:10px 0; min-width:0; }
.cascade-input::placeholder { color:var(--text-muted); }
.cascade-field.filled .cascade-input { color:var(--sea); font-weight:500; }
.autocomplete-dot { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; border:2px solid var(--sea); z-index:1; pointer-events:none; }
.autocomplete-dot.end { background:var(--accent); border-color:var(--accent); }
.autocomplete-clear { display:none; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:50%; background:var(--text-muted); color:white; font-size:12px; line-height:18px; text-align:center; cursor:pointer; z-index:2; user-select:none; border:none; }
.autocomplete-clear:hover { background:var(--accent); }
.autocomplete-clear.visible { display:block; }
/* A11y: hit-area 44x44 senza cambiare il layout (il pallino resta 18px) */
.autocomplete-clear::after { content:''; position:absolute; inset:-13px; border-radius:50%; }
.cascade-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:white; border:1.5px solid var(--border); border-radius:8px; box-shadow:var(--shadow); z-index:1000; max-height:260px; overflow-y:auto; display:none; }
.cascade-dropdown.open { display:block; }
.cascade-section { padding:5px 14px 3px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); }
.cascade-fermata { padding:9px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:8px; transition:background 0.1s; }
.cascade-fermata:hover { background:var(--sea-pale); }
.cascade-fermata-nome { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cascade-prov { padding:11px 14px; cursor:pointer; font-size:14px; font-weight:600; color:var(--sea); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; transition:background 0.1s; }
.cascade-prov:hover { background:var(--sea-pale); }
.cascade-prov-badge { font-size:11px; font-weight:400; color:var(--text-muted); }
.cascade-back { padding:8px 14px; font-size:12px; color:var(--sea-light); cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; background:var(--sea-pale); font-weight:500; }
.cascade-back:hover { background:var(--sea-pale); filter:brightness(0.95); }
.cascade-comune { padding:10px 14px 10px 20px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); transition:background 0.1s; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cascade-comune:hover { background:var(--sea-pale); }
.cascade-comune:last-child { border-bottom:none; }
.cascade-comune-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cascade-badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.cascade-badge-diretto { background:var(--green-light); color:var(--green); }
.cascade-badge-cambio { background:var(--sand); color:var(--text-muted); }
.cascade-escape { padding:9px 14px; font-size:12px; color:var(--sea-light); cursor:pointer; border-top:1px solid var(--border); text-align:center; background:var(--sea-pale); }
.cascade-escape:hover { filter:brightness(0.95); }
.search-connector { width:2px; height:8px; background:var(--sea); opacity:0.3; margin:0 0 8px 16px; }
.ora-row { margin-bottom:10px; min-width:0; overflow:hidden; }
.ora-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:6px; }
.ora-chips-wrap { position:relative; min-width:0; flex:1; }
.ora-chips-wrap::before, .ora-chips-wrap::after {
  content:''; position:absolute; top:0; bottom:6px; width:24px; pointer-events:none;
  opacity:0; transition:opacity 0.15s;
}
.ora-chips-wrap::before { left:0; background:linear-gradient(to right, var(--sea-pale), transparent); }
.ora-chips-wrap::after { right:0; background:linear-gradient(to left, var(--sea-pale), transparent); }
.ora-chips-wrap.can-scroll-left::before { opacity:1; }
.ora-chips-wrap.can-scroll-right::after { opacity:1; }
.ora-chips { display:flex; gap:5px; overflow-x:auto; padding-bottom:6px; padding-right:16px; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; }
.ora-chips::-webkit-scrollbar { display:none; }
.ora-chips.dragging { cursor:grabbing; }
.ora-chip { flex-shrink:0; padding:6px 12px; border-radius:20px; font-size:13px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:500; border:1.5px solid var(--border-input); cursor:pointer; background:white; color:var(--text-muted); transition:all 0.15s; user-select:none; }
.ora-chip:hover { border-color:var(--sea-light); color:var(--sea); }
.ora-chip.active { background:var(--sea); color:white; border-color:var(--sea); }
.diretti-row { margin-bottom:10px; }
.diretti-toggle { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); cursor:pointer; user-select:none; }
.diretti-toggle input { width:16px; height:16px; accent-color:var(--sea); cursor:pointer; }
.btn-search { width:100%; padding:11px; background:var(--sea); color:white; border:none; border-radius:8px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:background 0.2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-search:hover { background:var(--sea-light); }
.btn-search:disabled { background:var(--text-muted); cursor:not-allowed; }

/* ── Form "Quando" v2: campi gemelli + preset + toggle ─────────────── */
.when-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.when-field { display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
.when-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); }
.when-pill { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid var(--border-input); border-radius:8px; background:white; color:var(--text); font:500 14px 'DM Sans','DM Sans Fallback',sans-serif; cursor:pointer; min-width:0; min-height:44px; text-align:left; }
.when-pill:hover, .when-pill:focus-visible { border-color:var(--sea-light); outline:none; }
.when-pill.filled { color:var(--sea); border-color:var(--sea); background:var(--sea-pale); }
.when-pill > span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.when-pill > svg:first-child { opacity:0.7; flex-shrink:0; }
.when-pill > svg:last-child { opacity:0.5; flex-shrink:0; }
.hidden-native { position:absolute; opacity:0; pointer-events:none; height:1px; width:1px; padding:0; border:0; left:0; bottom:0; }
/* Overlay nativo: l'input date/time sta SOPRA il pill, trasparente ma
   tappabile. Cosi' un tap apre il picker nativo su TUTTI i dispositivi
   (iOS/Android/desktop) senza dipendere solo da showPicker(), che su diversi
   mobile non apriva nulla (bug "tasti Quando / Parti dopo le"). */
.when-pill-wrap { position:relative; width:100%; }
.when-pill-wrap .when-pill { width:100%; }
.when-native-overlay {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent;
  opacity:0; cursor:pointer; z-index:2;
  font-size:16px; /* evita lo zoom automatico iOS al focus */
  -webkit-appearance:none; appearance:none;
}

.ora-presets { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.ora-preset { padding:7px 13px; border-radius:20px; font-size:13px; font-weight:500; border:1.5px solid var(--border-input); cursor:pointer; background:white; color:var(--text-muted); font-family:'DM Sans','DM Sans Fallback',sans-serif; transition:all 0.15s; min-height:34px; }
.ora-preset:hover, .ora-preset:focus-visible { border-color:var(--sea-light); color:var(--sea); outline:none; }
.ora-preset.active { background:var(--sea); color:white; border-color:var(--sea); }

.diretti-switch { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 2px; cursor:pointer; user-select:none; font-size:14px; color:var(--text); font-weight:500; }
.diretti-switch input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }
.switch-track { width:42px; height:24px; background:rgba(10,79,110,0.15); border:1.5px solid var(--border-input); box-sizing:border-box; border-radius:14px; position:relative; transition:background 0.2s; flex-shrink:0; display:block; }
.switch-thumb { position:absolute; top:2px; left:2px; width:20px; height:20px; background:white; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform 0.2s; }
.diretti-switch input:checked ~ .switch-track { background:var(--sea); }
.diretti-switch input:checked ~ .switch-track .switch-thumb { transform:translateX(18px); }
.diretti-switch input:focus-visible ~ .switch-track { box-shadow:0 0 0 3px rgba(10,79,110,0.25); }

.form-error { color:#9a3e12; font-size:13px; padding:8px 12px; background:var(--accent-light); border-radius:8px; margin-bottom:10px; border-left:3px solid var(--accent); }
.cascade-field.error { border-color:var(--accent); background:var(--accent-light); }
.cascade-field.error .cascade-input { color:#9a3e12; }
.lines-panel { border-bottom:1px solid var(--border); }
.lines-toggle { display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); padding:12px 16px; user-select:none; transition:background 0.15s; }
.lines-toggle:hover { background:var(--sea-pale); }
.lines-toggle svg { transition:transform 0.2s; flex-shrink:0; }
.lines-grid { display:none; flex-wrap:wrap; gap:5px; padding:0 16px 12px; }
.lines-grid.open { display:flex; }
.line-chip { display:flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:500; cursor:pointer; border:1.5px solid transparent; transition:all 0.15s; }
.line-chip:hover { transform:translateY(-1px); }
.line-chip.active { border-color:currentColor; }
.results-area { flex:1; overflow-y:auto; padding:14px 16px; }
.results-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.results-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); }
.results-count { font-size:11px; color:var(--text-muted); background:var(--sea-pale); padding:2px 8px; border-radius:10px; }
.route-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius); padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:all 0.2s; position:relative; overflow:visible; }
.route-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sea); border-radius:var(--radius) 0 0 var(--radius); }
.route-card.diretto::before { background:var(--card-accent, var(--green)); }
.route-card.con_cambio::before { background:var(--accent); }
.route-card:hover { border-color:var(--sea-light); transform:translateX(2px); box-shadow:var(--shadow); }
.route-card.active { border-color:var(--sea); background:var(--sea-pale); }
.route-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:10px; min-height:22px; }
.route-tag { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.route-tag.diretto { background:var(--green-light); color:var(--green); }
.route-tag.cambio { background:var(--accent-light); color:#9a3e12; }
.route-tag.oggi { background:#dcfce7; color:#15803d; }
.route-stimato { display:inline-flex; align-items:center; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; background:#fbe8d3; color:#92400e; }
.route-header-right { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.route-times { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.time { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:28px; font-weight:500; color:var(--text); line-height:1; letter-spacing:-0.01em; }
.time-arrow { flex:1; position:relative; display:flex; align-items:center; justify-content:center; min-height:22px; }
.time-arrow::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--border); }
.time-duration-pill { position:relative; background:white; border:1px solid var(--border); border-radius:20px; padding:2px 10px; font-size:11px; color:var(--text-muted); white-space:nowrap; z-index:1; }
.route-tratto { font-size:13px; color:var(--text); margin-bottom:8px; line-height:1.45; display:flex; flex-direction:column; gap:4px; }
.route-tratto .lbl { font-weight:600; }
.tratto-row { display:block; }
.route-opts { display:inline-block; margin-left:4px; padding:1px 6px; border-radius:10px; background:var(--border); color:var(--text); font-size:11px; font-weight:600; vertical-align:middle; }
.route-opts-list { display:block; font-size:11px; color:var(--text-muted); margin-top:1px; }
/* ── Selettore fermata con più opzioni (dropdown inline) ── */
.opt-sel-wrap { position:relative; display:inline-block; vertical-align:middle; }
.opt-trigger { display:inline-flex; align-items:center; gap:3px; background:none; border:1px solid var(--border); border-radius:12px; padding:1px 7px; font:inherit; font-size:inherit; cursor:pointer; color:var(--text); transition:border-color .15s,background .15s; white-space:nowrap; line-height:1.5; }
.opt-trigger:hover,.opt-trigger:focus-visible { border-color:var(--sea); background:var(--sea-pale); outline:none; }
.opt-trigger .opt-ora { font-size:11px; color:var(--text-muted); margin-left:2px; }
.opt-comune { font-weight:600; }
.opt-dropdown { display:none; position:absolute; z-index:910; top:calc(100% + 4px); left:0; min-width:175px; background:white; border:1px solid var(--border); border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.13); overflow-y:auto; max-height:min(260px,45vh); }
.opt-dropdown.open { display:block; }
.opt-dropdown.up { top:auto; bottom:calc(100% + 4px); }
.opt-item { display:block; width:100%; text-align:left; padding:9px 14px; background:none; border:none; border-bottom:1px solid var(--border); font:inherit; font-size:13px; color:var(--text); cursor:pointer; }
.opt-item:last-child { border-bottom:none; }
.opt-item:hover,.opt-item:focus-visible { background:var(--sea-pale); outline:none; }
.opt-item.active { color:var(--sea); font-weight:600; }
.route-meta { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--text-muted); }
/* A11y (Lighthouse color-contrast): opacity sopra un colore gia' "muted"
   dimezzava ulteriormente il contrasto reale (~2.15:1 su bianco, sotto il
   minimo 4.5:1 AA). --text-muted da solo e' gia' leggibile (~6:1), l'opacity
   era superflua e dannosa. */
.route-meta .meta-sep { color:var(--text-muted); }
.route-meta .meta-prezzo { color:var(--text); font-weight:500; }
.route-meta .meta-verifica { background:none; border:none; padding:0; cursor:pointer; color:#92400e; font:inherit; display:inline-flex; align-items:center; gap:4px; }
.route-meta .meta-verifica:hover { text-decoration:underline; }
.route-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.route-actions:empty { display:none; }
.cambio-info { margin-top:10px; padding:12px 14px; background:var(--sea-pale); border:1px solid rgba(10,79,110,0.15); border-radius:10px; font-size:13px; color:var(--text); display:none; }
.route-card.active .cambio-info { display:block; }
.cambio-info + .cambio-info { margin-top:8px; }

.cambio-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cambio-header-icon { width:32px; height:32px; border-radius:50%; background:#0a4f6e; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 1px 4px rgba(10,79,110,0.3); }
.cambio-header-title { font-size:14px; font-weight:500; color:var(--sea); line-height:1.2; }

.cambio-strip { display:flex; align-items:stretch; gap:6px; margin-bottom:10px; }
.cambio-pill { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 6px; border-radius:8px; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
.cambio-pill .lbl { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; opacity:0.85; }
.cambio-pill .val { font-size:14px; font-weight:600; line-height:1; }
.cambio-pill svg { opacity:0.9; flex-shrink:0; }

.cambio-pill-scendi { background:#fee2e2; color:#b91c1c; }
.cambio-pill-sali   { background:#dcfce7; color:#15803d; }
.cambio-pill-attesa { background:#fef3c7; color:#92400e; }
.cambio-pill-attesa-long { background:#fef3c7; color:#b91c1c; border:1.5px solid #dc2626; }

.cambio-walk-info { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); padding:6px 8px; background:rgba(245,158,11,0.08); border-left:3px solid #f59e0b; border-radius:0 6px 6px 0; margin-bottom:10px; line-height:1.4; }
.cambio-walk-info svg { flex-shrink:0; color:#92400e; }
.cambio-walk-info strong { color:var(--text); }
.cambio-altri { display:flex; align-items:flex-start; gap:7px; font-size:12px; color:var(--text-muted); padding:7px 9px; background:var(--sea-pale); border-radius:7px; margin-bottom:10px; line-height:1.45; }
.cambio-altri svg { flex-shrink:0; margin-top:1px; color:var(--sea); }
.cambio-altri strong { color:var(--text); font-weight:600; }

.cambio-next-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:7px 10px; background:none; border:1px solid rgba(10,79,110,0.15); border-radius:6px; font-family:inherit; font-size:12px; color:var(--text-muted); cursor:pointer; opacity:0.85; }
.cambio-next-toggle:hover, .cambio-next-toggle:focus-visible { background:white; color:var(--sea); opacity:1; outline:none; }
.cambio-next-toggle svg { transition:transform 0.2s; flex-shrink:0; }
.cambio-next-toggle.open svg { transform:rotate(180deg); }
.cambio-next-list { display:none; margin-top:8px; padding:8px 10px; background:white; border-radius:6px; font-size:11px; color:var(--text-muted); }
.cambio-next-list.open { display:block; }

/* ── Dettaglio viaggio (timeline a gambe) ── */
.dettaglio-toggle { display:flex; align-items:center; gap:8px; width:100%; margin-top:10px; padding:9px 12px; background:none; border:1px solid rgba(10,79,110,0.2); border-radius:8px; font-family:inherit; font-size:13px; font-weight:600; color:var(--sea); cursor:pointer; transition:background 0.15s; }
.dettaglio-toggle:hover, .dettaglio-toggle:focus-visible { background:var(--sea-pale); outline:none; }
.dettaglio-toggle .chev { margin-left:auto; transition:transform 0.2s; flex-shrink:0; }
.dettaglio-toggle.open .chev { transform:rotate(180deg); }
.viaggio-dettaglio { display:none; margin-top:10px; padding:14px; background:var(--sea-pale); border:1px solid rgba(10,79,110,0.15); border-radius:10px; }
.viaggio-dettaglio.open { display:block; }
.vd-leg-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.vd-leg-head:not(:first-child) { margin-top:12px; }
.vd-line-badge { font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; font-family:'DM Sans','DM Sans Fallback',sans-serif; white-space:nowrap; flex-shrink:0; }
.vd-leg-sub { font-size:11px; color:var(--text-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-line { position:relative; }
.vd-line::before { content:''; position:absolute; left:7px; top:11px; bottom:11px; width:2px; background:var(--leg,#0a4f6e); opacity:0.35; }
.vd-stop { display:flex; align-items:center; gap:10px; padding:4px 0; }
.vd-stop[role=button] { cursor:pointer; border-radius:7px; margin:0 -6px; padding:4px 6px; transition:background 0.12s; }
.vd-stop[role=button]:hover { background:var(--sea-pale); }
.vd-dotcol { flex:0 0 16px; display:flex; justify-content:center; align-items:center; }
.vd-dot { width:7px; height:7px; border-radius:50%; opacity:0.6; }
.vd-dot-end { width:13px; height:13px; border:2px solid var(--sea-pale); opacity:1; }
.vd-name { flex:1; min-width:0; font-size:13px; color:var(--text-muted); line-height:1.3; word-break:break-word; }
.vd-stop-end .vd-name { font-weight:500; color:var(--text); }
.vd-comune { flex-shrink:0; font-size:11px; color:var(--text-muted); margin-left:auto; padding-left:8px; white-space:nowrap; }
.vd-time { flex-shrink:0; font-size:12px; color:var(--text-muted); font-family:'DM Sans','DM Sans Fallback',sans-serif; }
.vd-stop-opt .vd-name { font-weight:500; color:var(--text); }
.vd-stop-salta .vd-name, .vd-stop-salta .vd-comune { color:var(--text-muted); opacity:.65; }
.vd-nonferma { font-size:11px; font-style:italic; color:var(--text-muted); opacity:.8; }
.vd-opt-badge { display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px; font-size:10px; font-weight:600; vertical-align:middle; }
.vd-opt-discesa { background:#fde6da; color:#b8431a; }
.vd-opt-salita { background:#dcefe2; color:#1d6b3f; }
.vd-stop-end .vd-time { color:var(--text); }
.vd-more { display:flex; align-items:center; gap:10px; padding:2px 0; }
.vd-more-btn { flex:1; text-align:left; background:none; border:none; font-family:inherit; font-size:12px; color:var(--leg,var(--sea)); font-weight:500; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; }
.vd-more-btn:hover, .vd-more-btn:focus-visible { text-decoration:underline; outline:none; }
.vd-more-btn svg { transition:transform 0.2s; flex-shrink:0; }
.vd-more-btn.open svg { transform:rotate(180deg); }
.vd-mid { display:none; }
.vd-mid.open { display:block; }
/* Sub-gruppo collassabile "altri punti di salita/discesa" nel dettaglio */
.vd-altri-btn { flex:1; text-align:left; background:none; border:none; font-family:inherit; font-size:12px; color:var(--text-muted); font-weight:500; cursor:pointer; display:flex; align-items:center; gap:5px; padding:0; }
.vd-altri-btn:hover,.vd-altri-btn:focus-visible { text-decoration:underline; outline:none; }
.vd-altri-btn svg { transition:transform .2s; flex-shrink:0; }
.vd-altri-btn.open svg { transform:rotate(180deg); }
.vd-altri-mid { display:none; }
.vd-altri-mid.open { display:block; }
/* fascia cambio compatta (Opzione 1: scendi · attesa · sali in linea) */
.vd-cambio { display:flex; align-items:flex-start; gap:8px; background:#fef3c7; border:1px solid #f0b429; border-radius:8px; padding:8px 10px; margin:8px 0 4px; }
.vd-cambio.long { border-color:#dc2626; }
.vd-cambio-ico { color:#92400e; flex-shrink:0; display:flex; margin-top:1px; }
.vd-cambio-body { flex:1; min-width:0; }
.vd-cambio-title { font-size:13px; font-weight:500; color:#633806; }
.vd-cambio-times { font-size:12px; color:#854f0b; margin-top:1px; }
.vd-cambio-times .sc { color:#b91c1c; font-weight:500; }
.vd-cambio-times .sa { color:#15803d; font-weight:500; }
.vd-cambio-times .at.long { color:#b91c1c; font-weight:600; }
.vd-cambio-walk { font-size:11px; color:#854f0b; margin-top:5px; line-height:1.4; }
.vd-cambio-walk strong { color:var(--text); }
.viaggio-dettaglio .cambio-next-toggle { margin-bottom:8px; }
.modal-stop-num { font-size:11px; font-weight:700; color:var(--text-muted); min-width:22px; text-align:center; flex-shrink:0; }
.modal-stop.entry .modal-stop-num { color:var(--sea); }
.modal-stop.exit  .modal-stop-num { color:var(--green); }
.swap-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border); background:white; cursor:pointer; color:var(--sea); transition:all 0.15s; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; box-shadow:var(--shadow); flex-shrink:0; }
.swap-btn:hover { background:var(--sea-pale); border-color:var(--sea); }
.andata-ritorno-tabs { display:none; gap:0; border-bottom:2px solid var(--border); background:white; }
.andata-ritorno-tabs.visible { display:flex; }
.ar-tab { flex:1; padding:10px 0; border:none; background:transparent; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.ar-tab.active { color:var(--sea); border-bottom-color:var(--sea); }
.ritorno-ora-row { padding:10px 16px; background:var(--sea-pale); border-bottom:1px solid var(--border); display:none; gap:8px; align-items:center; flex-wrap:wrap; }
.ritorno-ora-row.visible { display:flex; }
.no-results { text-align:center; padding:40px 20px; color:var(--text-muted); }
.no-results-icon { font-size:32px; margin-bottom:12px; }
.no-results h3 { font-size:15px; margin-bottom:4px; color:var(--text); }
.no-results p { font-size:13px; }

/* No-results v2: azioni contestuali */
.no-results-v2 { padding:28px 14px 24px; text-align:center; }
.no-results-icon-v2 {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:var(--sea-pale); color:var(--sea);
  margin-bottom:14px;
}
.no-results-v2 h3 { font-size:16px; color:var(--text); margin-bottom:4px; font-weight:600; }
.no-results-v2 p { font-size:13px; color:var(--text-muted); margin-bottom:16px; }
.no-results-actions { display:flex; flex-direction:column; gap:8px; max-width:300px; margin:0 auto; }
.no-results-btn {
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border:1.5px solid var(--border); border-radius:8px;
  background:white; color:var(--sea);
  font:500 14px 'DM Sans','DM Sans Fallback',sans-serif;
  cursor:pointer; text-align:left; min-height:44px; width:100%;
}
.no-results-btn:hover { background:var(--sea-pale); border-color:var(--sea); }
.no-results-btn svg { flex-shrink:0; opacity:0.7; }
.no-results-btn .lbl { flex:1; }
.nr-sugg { max-width:320px; margin:18px auto 0; padding-top:16px; border-top:1px solid var(--border); text-align:center; }
.nr-sugg-line { font-size:13px; color:var(--text-muted); margin-bottom:12px; }
.nr-sugg-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:10px; }
.nr-date-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.nr-date-chip {
  padding:8px 12px; border:1.5px solid var(--sea); border-radius:20px;
  background:var(--sea-pale); color:var(--sea);
  font:600 13px 'DM Sans','DM Sans Fallback',sans-serif; cursor:pointer; min-height:36px;
}
.nr-date-chip:hover { background:var(--sea); color:white; }

/* #7: tasti "Corse precedenti / successive" */
.load-more-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin:8px 0; padding:11px 14px;
  border:1.5px dashed var(--border); border-radius:12px;
  background:white; color:var(--sea); font-family:'DM Sans','DM Sans Fallback',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.15s;
}
.load-more-btn:hover { background:var(--sea-pale); border-color:var(--sea); }
.load-more-btn:disabled { opacity:0.55; cursor:default; color:var(--text-muted); border-style:solid; }
.load-more-btn svg { flex-shrink:0; opacity:0.8; }
.load-more-btn.loading { opacity:0.7; cursor:progress; }

/* Banner alternative (no emoji) */
.alt-banner {
  display:flex; align-items:flex-start; gap:10px;
  background:var(--green-light); border:1.5px solid var(--green);
  border-radius:8px; padding:10px 14px; margin-bottom:10px;
  font-size:13px; color:var(--green); line-height:1.45;
}
.alt-banner svg { flex-shrink:0; margin-top:2px; opacity:0.85; }
.alt-banner a { color:var(--green); text-decoration:underline; cursor:pointer; font-weight:600; }
.alt-banner a:hover { text-decoration:none; }

/* Endpoints overlay su mappa quando results vuoti (desktop) */
@media (min-width:769px) {
  body.s-results.empty-results .map-area { display:flex !important; flex:1; }
}

/* Skeleton card (loading) */
.skeleton-card {
  background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:8px; position:relative; overflow:hidden;
}
.skeleton-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--border);
}
.sk-line {
  background:var(--sea-pale); border-radius:6px; height:14px; margin-bottom:8px;
  position:relative; overflow:hidden;
}
.sk-line::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation:sk-shimmer 1.4s linear infinite;
}
@keyframes sk-shimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
.sk-tag { width:70px; height:20px; border-radius:20px; margin-bottom:12px; }
.sk-times { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sk-time { width:78px; height:26px; flex:none; }
.sk-pill { flex:1; height:10px; }
.sk-tratto { width:80%; margin-bottom:8px; }
.sk-meta { width:62%; height:11px; margin-bottom:0; }
.sk-actions { display:flex; gap:6px; margin-top:10px; }
.sk-actions .sk-line { width:78px; height:28px; border-radius:20px; margin-bottom:0; }

/* ── A11y: focus-visible globale per tasti, link, card interattive ── */
button:focus { outline:none; }
a:focus { outline:none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.route-card:focus-visible,
.modal-stop:focus-visible,
.popup-fermata-item:focus-visible {
  outline:2px solid var(--sea-light);
  outline-offset:2px;
  border-radius:4px;
}
.cascade-fermata:focus-visible,
.cascade-comune:focus-visible,
.cascade-prov:focus-visible,
.cascade-back:focus-visible,
.cascade-geolocate:focus-visible {
  outline:2px solid var(--sea-light);
  outline-offset:-2px;
}
.recent-search-item:focus-visible {
  outline:2px solid var(--sea-light);
  outline-offset:0;
}
/* Voce evidenziata da tastiera nell'autocomplete (aria-activedescendant) */
.cascade-dropdown .kb-active {
  background:var(--sea-pale);
  outline:2px solid var(--sea-light);
  outline-offset:-2px;
}
/* Screen-reader only utility */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Skip-link (WCAG 2.4.1): invisibile finché non riceve focus da tastiera */
.skip-link { position:absolute; left:-9999px; top:0; z-index:2000; background:var(--sea); color:#fff; padding:10px 18px; border-radius:0 0 10px 0; font-weight:600; font-size:14px; text-decoration:none; }
.skip-link:focus { left:0; }
/* A11y: touch target ≥44px sui dispositivi touch (persona anziana) */
@media (pointer:coarse) {
  .ora-chip, .ora-preset, .corr-chip, .nr-date-chip, .line-chip { min-height:44px; }
  .modal-close { min-width:44px; min-height:44px; }
  .swap-btn { width:44px; height:44px; }
  .opt-trigger { padding:6px 10px; min-height:36px; }
}
.map-area { flex:1; position:relative; }
#map { width:100%; height:100%; }
/* #2: skeleton LCP-friendly. Un DIV con solo background-color/testo NON e'
   un candidato LCP valido, e in pratica nemmeno un background-image CSS lo
   e' in modo affidabile (verificato via trace Chrome: mai comparso tra i
   candidati anche con file same-origin precaricato). Un <img> vero invece
   e' un candidato LCP legittimo MA solo a dimensione fissa in px: sopra
   ~350x350px (soglia verificata via trace Chrome tra 122500px² funzionante
   e 160000px² che fallisce) un <img> position:absolute smette di essere
   preso in considerazione, indipendentemente da object-fit/inset/%/vw — un
   limite pratico di questa versione di Chrome, non risolvibile lato CSS.
   L'immagine resta quindi sotto soglia (vedi .map-skeleton-img) e il resto
   dell'area e' coperto dal solo background-color di .map-skeleton (non
   LCP-eligible da solo, ma comunque un colore pieno coerente col brand
   invece di uno sfondo bianco). Rimosso al primo tileload (initMap in
   02-mappa.js). */
.map-skeleton {
  position:absolute; inset:0; z-index:400; overflow:hidden;
  background:var(--sea-pale);
  display:flex; align-items:center; justify-content:center;
}
.map-skeleton-img { position:absolute; top:0; left:0; width:340px; height:340px; }
.map-skeleton.hidden { display:none; }
.popup-comune-title { font-weight:700; font-size:14px; color:var(--sea); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.popup-fermata-item { padding:7px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text); transition:background 0.15s; margin-bottom:3px; }
.popup-fermata-item:last-child { margin-bottom:0; }
.popup-fermata-item:hover { background:var(--sea-pale); color:var(--sea); }
.popup-ruolo-row { display:flex; gap:6px; margin-top:8px; }
.popup-ruolo-btn { flex:1; padding:7px 0; border:none; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; transition:opacity 0.15s; }
.popup-ruolo-btn:hover { opacity:0.85; }
.btn-torna-linea { position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:601; display:none; align-items:center; gap:7px; background:white; color:var(--sea); border:none; border-radius:22px; padding:9px 15px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(10,79,110,0.22); transition:background 0.15s; white-space:nowrap; }
.btn-torna-linea.visible { display:flex; }
.btn-torna-linea:hover { background:var(--sea-pale); }
.btn-torna-linea svg { flex-shrink:0; }
.map-legend { position:absolute; bottom:24px; right:16px; background:white; border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); z-index:500; font-size:12px; display:none; }
.legend-title { font-weight:600; color:var(--sea); margin-bottom:8px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
.legend-item { display:flex; align-items:center; gap:8px; margin-bottom:5px; color:var(--text-muted); }
.legend-line { width:24px; height:3px; border-radius:2px; }
.legend-marker { width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,0.25); }
.legend-marker-lg { width:18px; height:18px; }
.legend-note { margin-top:6px; padding-top:6px; border-top:1px solid var(--border); font-size:10.5px; color:var(--text-muted); line-height:1.35; max-width:160px; }
.legend-dot { width:10px; height:10px; border-radius:50%; border:2px solid; }

/* ── Fase 3: tasto Dettagli e pannello comuni ───────────────────────────── */
#btn-dettagli { position:absolute; bottom:24px; left:16px; z-index:501; display:none; align-items:center; gap:6px; background:white; color:var(--sea); border:1.5px solid var(--border); border-radius:20px; padding:8px 14px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:13px; font-weight:500; cursor:pointer; box-shadow:var(--shadow); white-space:nowrap; transition:background .15s,border-color .15s,color .15s; }
#btn-dettagli.visible { display:flex; }
#btn-dettagli.active { background:var(--sea); color:white; border-color:var(--sea); }
#btn-dettagli:hover:not(.active) { background:var(--sea-pale); border-color:var(--sea-light); }
/* Etichette-comune overlay sulla mappa (fase 3 blocco 4) */
.det-overlay-label { background:rgba(255,255,255,0.92); border:1.5px solid rgba(10,79,110,0.25); border-radius:8px; padding:4px 9px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:12px; font-weight:600; color:var(--sea); white-space:nowrap; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.14); transform:translateX(-50%); display:inline-block; text-align:center; line-height:1.3; transition:background .15s,border-color .15s; }
.det-overlay-label:hover { background:var(--sea-pale); border-color:var(--sea-light); }
.det-overlay-label.sel { background:var(--sea); color:white; border-color:var(--sea); }
.det-overlay-count { font-size:10px; font-weight:400; opacity:0.8; display:block; }
/* Anello pulsante sulle fermate del comune selezionato (F1) */
@keyframes pulsaAnello {
  0%   { transform:translate(-50%,-50%) scale(0.7); opacity:0.85; }
  75%  { transform:translate(-50%,-50%) scale(1.8); opacity:0; }
  100% { transform:translate(-50%,-50%) scale(0.7); opacity:0; }
}
.leaflet-marker-icon.marker-pulse::after { content:''; position:absolute; top:50%; left:50%; width:100%; height:100%; border-radius:50%; border:2.5px solid var(--sea); animation:pulsaAnello 1.5s ease-out infinite; pointer-events:none; }
/* Targhette "Sali qui" / "Scendi qui" (tooltip permanenti Leaflet) */
.tag-sali,.tag-scendi { background:var(--sea)!important; color:white!important; border:none!important; border-radius:10px!important; padding:2px 8px!important; font:600 11px 'DM Sans','DM Sans Fallback',sans-serif!important; box-shadow:0 1px 4px rgba(0,0,0,.22)!important; white-space:nowrap!important; }
.tag-sali::before,.tag-scendi::before { display:none!important; }
.leaflet-marker-icon.marker-dim { opacity:0.18 !important; transition:opacity .25s; }
@media (max-width:768px) {
  /* #5 (TODO_MOBILE_PWA): prima stava in top:64px;left:10px — l'angolo
     peggiore per il pollice su schermi 6"+. Spostato in basso, coerente col
     posizionamento desktop (bottom:24px;left:16px), ma piu' in alto per non
     sovrapporsi al grabber dello sheet risultati quando e' a "peek" (collassa
     all'altezza del solo .m-sheet-grabber, ~36px: vedi collapsed in
     01-core.js). .map-legend resta sulla destra (bottom:24px;right:16px,
     entrambi visibili insieme quando c'e' un percorso disegnato), quindi
     #btn-dettagli resta a sinistra per non sovrapporsi neanche a quella. */
  #btn-dettagli { bottom:52px; left:10px; padding:7px 11px; font-size:12px; }
}
.leaflet-popup-content-wrapper { border-radius:10px!important; box-shadow:0 4px 20px rgba(0,0,0,0.15)!important; }
.leaflet-popup-content { margin:12px 14px!important; font-family:'DM Sans','DM Sans Fallback',sans-serif!important; }
.popup-name { font-weight:600; font-size:15px; color:var(--sea); margin-bottom:3px; line-height:1.2; }
.popup-sub { font-size:12px; color:var(--text-muted); margin-bottom:0; display:flex; align-items:center; gap:5px; }
.popup-sub svg { color:var(--sea-light); flex-shrink:0; }
.popup-tags { display:flex; gap:4px; flex-wrap:wrap; }
.popup-tag { font-size:11px; padding:2px 7px; border-radius:10px; background:var(--sea-pale); color:var(--sea); }
.popup-chip { display:inline-flex; align-items:center; gap:5px; background:var(--sea-pale); color:var(--sea); font-size:11px; font-weight:500; padding:3px 10px; border-radius:20px; }
.popup-chip svg { flex-shrink:0; }
/* Stato verifica coordinate — box colorato coerente coi badge salita/discesa */
.coord-status { display:flex; align-items:center; gap:7px; margin-top:9px; padding:7px 10px; border-radius:8px; font-size:11.5px; font-weight:500; line-height:1.3; text-decoration:none; }
.coord-status svg { flex-shrink:0; }
.coord-ok { background:#e8f5ee; border:1px solid rgba(45,122,79,0.25); color:#1f5536; }
.coord-no { background:#fffbeb; border:1px solid rgba(245,158,11,0.35); color:#92400e; cursor:pointer; }
.coord-no:hover { background:#fef3c7; }
/* Popup fermata: orario passaggio + linee */
.popup-orario-passaggio { display:flex; align-items:center; gap:6px; margin-top:9px; padding:7px 10px; background:var(--sea-pale); border-radius:8px; font-size:13px; font-weight:600; color:var(--sea); }
.popup-orario-stimato { font-size:11px; font-weight:400; color:var(--text-muted); margin-left:2px; }
.popup-linee { margin-top:9px; }
.popup-linee-label { font-size:10px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:5px; }
.popup-linee-chips { display:flex; flex-wrap:wrap; gap:4px; }
.popup-linea-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; background:#e5f0f6; border:1px solid #b8d4e4; color:#0a4f6e; white-space:nowrap; }
/* CTA fumetto fermata: maps e confirma entrambe secondarie (outline) */
.popup-cta-primary { width:100%; margin-top:11px; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--sea); color:#fff; border:none; border-radius:9px; padding:11px; font-size:13.5px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; cursor:pointer; transition:background 0.15s; }
.popup-cta-primary:hover { background:#0c5f86; }
.popup-cta-secondary { width:100%; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:7px; background:#fff; color:var(--text-muted); border:1.5px solid var(--border); border-radius:9px; padding:9px; font-size:12.5px; font-weight:500; font-family:'DM Sans','DM Sans Fallback',sans-serif; cursor:pointer; transition:all 0.15s; }
.popup-cta-secondary:hover { background:var(--sea-pale); border-color:var(--sea); color:var(--sea); }
.popup-actions { display:flex; gap:6px; margin-top:8px; }
.popup-action-btn { flex:1; padding:5px 0; border:1.5px solid var(--border); background:white; border-radius:7px; cursor:pointer; font-size:11px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; color:var(--text-muted); transition:all 0.15s; white-space:nowrap; }
.popup-action-btn:hover { background:var(--sea-pale); border-color:var(--sea); color:var(--sea); }
.popup-corr-form { margin-top:8px; }
.popup-corr-select { width:100%; padding:5px 7px; border:1.5px solid var(--border); border-radius:7px; font-size:12px; font-family:'DM Sans','DM Sans Fallback',sans-serif; color:var(--text); background:white; margin-bottom:6px; }
.popup-corr-textarea { width:100%; box-sizing:border-box; padding:6px 8px; border:1.5px solid var(--border); border-radius:7px; font-size:12px; font-family:'DM Sans','DM Sans Fallback',sans-serif; color:var(--text); resize:vertical; min-height:60px; }
.popup-corr-email { width:100%; box-sizing:border-box; padding:5px 8px; border:1.5px solid var(--border); border-radius:7px; font-size:12px; font-family:'DM Sans','DM Sans Fallback',sans-serif; color:var(--text); margin-top:5px; }
.popup-corr-submit { width:100%; margin-top:6px; padding:6px 0; background:var(--sea); color:white; border:none; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
.popup-corr-submit:disabled { opacity:0.5; cursor:default; }

/* ── #2: form "Segnala un problema" (modale/bottom-sheet) ── */
.corr-body { display:flex; flex-direction:column; overflow-y:auto; flex:1; min-height:0; }
.corr-label { display:block; font-size:12px; font-weight:600; color:var(--text); margin:12px 0 6px; }
.corr-opt { font-weight:400; color:var(--text-muted); }
.corr-chips { display:flex; flex-wrap:wrap; gap:6px; }
.corr-chip {
  padding:7px 13px; border-radius:20px; border:1.5px solid var(--border-input);
  background:white; color:var(--text-muted); cursor:pointer; transition:all 0.15s;
  font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:13px; font-weight:500;
}
.corr-chip:hover { border-color:var(--sea-light); color:var(--sea); }
.corr-chip.active { background:var(--sea); color:white; border-color:var(--sea); }
.corr-input {
  width:100%; box-sizing:border-box; padding:10px 12px;
  border:1.5px solid var(--border-input); border-radius:10px;
  font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:14px; color:var(--text);
  background:white; transition:border-color 0.15s;
}
.corr-input:focus { outline:none; border-color:var(--sea); }
.corr-textarea { resize:vertical; min-height:76px; }
.corr-hint { font-size:11.5px; color:var(--text-muted); margin-top:5px; line-height:1.4; }
.corr-recaptcha { margin-top:16px; }
.corr-error { display:none; font-size:12px; color:#dc2626; margin-top:5px; }
.corr-error.visible { display:block; }
#corr-coords-wrap { border-radius:12px; transition:background 0.2s, box-shadow 0.2s; }
#corr-coords-wrap.corr-highlight {
  background:var(--sea-pale); box-shadow:0 0 0 8px var(--sea-pale);
}
.corr-submit {
  width:100%; margin-top:18px; padding:13px 0;
  background:var(--sea); color:white; border:none; border-radius:12px;
  cursor:pointer; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:15px; font-weight:600;
  transition:opacity 0.15s, background 0.15s;
}
.corr-submit:hover { background:var(--sea-dark, #083a52); }
.corr-submit:disabled { opacity:0.55; cursor:default; }
.corr-success { text-align:center; padding:24px 8px 8px; }
.corr-success-icon {
  width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#e8f5ee; color:#2d7a4f;
}
.corr-success h3 { font-size:18px; color:var(--text); margin-bottom:6px; }
.corr-success p { font-size:13.5px; color:var(--text-muted); line-height:1.5; max-width:280px; margin:0 auto; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(10,79,110,0.20); border-radius:2px; }
.btn-edit-mode { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; border:1.5px solid rgba(255,255,255,0.4); background:transparent; color:white; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:12px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.btn-edit-mode:hover { background:rgba(255,255,255,0.15); }
.btn-edit-mode.active { background:var(--accent); border-color:var(--accent); }
.edit-toast { position:absolute; bottom:80px; left:50%; transform:translateX(-50%); background:var(--sea); color:white; padding:8px 16px; border-radius:20px; font-size:13px; z-index:600; pointer-events:none; box-shadow:var(--shadow); white-space:nowrap; }
.edit-banner { position:absolute; top:16px; right:16px; background:var(--accent); color:white; padding:8px 14px; border-radius:var(--radius); font-size:12px; font-weight:500; z-index:600; box-shadow:var(--shadow); display:none; }
.tratta-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:none; font-family:'DM Sans','DM Sans Fallback',sans-serif; transition:filter 0.15s, transform 0.15s; }
.tratta-badge:hover { filter:brightness(0.88); transform:translateY(-1px); }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9000; display:flex; align-items:center; justify-content:center; }
.modal-box { background:white; border-radius:var(--radius); padding:20px; width:340px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,0.25); }
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.modal-title { font-size:16px; font-weight:700; color:var(--sea); }
.modal-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.modal-close { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:20px; line-height:1; padding:0 0 0 8px; flex-shrink:0; }
.modal-pdf-link { display:inline-block; margin-top:4px; font-size:11px; font-weight:600; color:var(--sea); text-decoration:none; opacity:0.8; }
.modal-pdf-link:hover { opacity:1; text-decoration:underline; }
.modal-ext-links { display:flex; flex-wrap:wrap; gap:12px; }
.modal-nota-orario { margin-top:6px; font-size:11px; color:#92400e; background:#fffbeb; border:1px solid #f59e0b; border-radius:6px; padding:6px 8px; line-height:1.4; }
.badge-verifica { background:#fffbeb; color:#92400e; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; border:1px solid #f59e0b; cursor:pointer; }
.modal-close:hover { color:var(--text); }
.modal-header-info { flex:1; min-width:0; }
.modal-fermate { overflow-y:auto; flex:1; }
.modal-stop { display:flex; align-items:center; gap:10px; padding:8px 6px; font-size:13px; color:var(--text); border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.1s; }
.modal-stop:hover { background:var(--sea-pale); }
.modal-stop:last-child { border-bottom:none; }
.modal-stop-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 0 2px white; position:relative; z-index:1; }
.modal-stop-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-stop-comune { font-size:11px; color:var(--text-muted); margin-left:auto; padding-left:8px; flex-shrink:0; white-space:nowrap; }
.modal-stop-tag { font-size:9px; font-weight:700; letter-spacing:0.06em; padding:2px 7px; border-radius:10px; color:white; flex-shrink:0; }
.modal-stop.entry { background:rgba(10,79,110,0.06); }
.modal-stop.entry .modal-stop-tag { background:var(--sea); }
.modal-stop.entry .modal-stop-name strong { color:var(--sea); font-weight:700; }
.modal-stop.exit { background:rgba(45,122,79,0.08); }
.modal-stop.exit .modal-stop-tag { background:var(--green); }
.modal-stop.exit .modal-stop-name strong { color:var(--green); font-weight:700; }
.modal-stop-time { font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:600; font-size:13px; color:var(--text); white-space:nowrap; flex-shrink:0; }
.modal-stop-time.stimato { color:#92400e; font-weight:500; }
.modal-stop-time.stimato::before { content:'~' / 'orario stimato '; margin-right:2px; }
.modal-corsa-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding:8px 12px; background:var(--sea-pale); border-radius:8px; font-size:13px; color:var(--text); }
.modal-corsa-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--sea); }
.modal-corsa-strip strong { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:19px; font-weight:500; letter-spacing:-0.01em; }
.modal-corsa-strip .route-stimato { font-size:11px; color:#92400e; }
.modal-segment-active { position:relative; padding:2px 0; }
.modal-segment-active::before { content:''; position:absolute; left:10px; top:18px; bottom:18px; width:2px; background:var(--seg-color,var(--sea)); border-radius:1px; opacity:0.35; }
.modal-segment-extra { padding-left:8px; border-left:2px dotted var(--border); margin-left:6px; }
.modal-segment-extra .modal-stop { color:var(--text-muted); }
.modal-segment-extra .modal-stop-dot { opacity:0.5; }
.modal-segment-extra .modal-stop-time { opacity:0.6; }
/* ── STATI APP ── */
body { --header-h:80px; }
#hero { flex:1; display:flex; flex-direction:column; justify-content:safe center; align-items:center; padding:40px 16px; background:var(--sand); overflow-y:auto; }
.hero-inner { width:100%; max-width:480px; }
.hero-title { font-family:'Fredoka','Fredoka Fallback','DM Sans','DM Sans Fallback',sans-serif; font-weight:600; font-size:30px; color:var(--sea); margin-bottom:44px; }
.hero-sub { font-size:14px; color:var(--text-muted); margin-bottom:28px; }
.hero-form { background:white; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; }
.hero-form .search-label { display:none; }
.app { flex:1; display:none; }
/* Stato search: hero visibile, app nascosto */
body.s-search #hero { display:flex; }
body.s-search .app  { display:none; }
/* Stato results: app visibile, mappa nascosta */
body.s-results #hero     { display:none; }
body.s-results .app      { display:flex; }
body.s-results .map-area { display:none!important; }
/* Stato map: app visibile, mappa visibile */
body.s-map #hero     { display:none; }
body.s-map .app      { display:flex; }
body.s-map .map-area { display:flex!important; flex:1; }
/* Mobile stato map: nascondi sidebar */
@media (max-width:768px) {
  body.s-map .sidebar { display:none; }
  #hero { justify-content:flex-start; padding-top:24px; }

  /* ── Bottom sheet: sidebar trascinabile sopra la mappa ──────────── */
  body.s-results .map-area { display:flex !important; flex:1; }
  /* Sheet guidato in ALTEZZA (bordo basso fisso): la lista interna resta
     sempre scrollabile fino in fondo a qualsiasi altezza, e la posizione è
     libera (nessuno snap a 3 posizioni). */
  body.s-results .sidebar {
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100% !important; height:var(--sheet-h, 55vh); max-height:92vh;
    border-right:none;
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 24px rgba(10,79,110,0.18);
    transition:height 0.3s cubic-bezier(.4,0,.2,1);
    z-index:1500;
    touch-action:pan-y;
  }
  body.s-results .sidebar.dragging { transition:none; }

  /* Selettore con specificità maggiore per battere il `.m-sheet-grabber{display:none}`
     globale che, comparendo dopo nel sorgente, altrimenti vince anche su mobile. */
  /* Barra di trascinamento bianca con trattino grigio centrale; la freccetta
     su sta a destra, allineata alla freccia giù della topbar. */
  body.s-results .m-sheet-grabber {
    display:flex; align-items:center; justify-content:center; position:relative;
    width:100%; min-height:24px; cursor:grab; touch-action:none;
    flex-shrink:0; padding:6px 0;
    background:#e4e8eb;
    user-select:none; -webkit-user-select:none;
  }
  /* Trattino grigio scuro centrale come indicatore di trascinamento. */
  .m-sheet-grabber::before {
    content:''; width:36px; height:5px; border-radius:3px;
    background:rgba(90,100,108,0.75);
  }
  body.s-results .sheet-up-btn {
    position:absolute; top:50%; right:12px; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center;
    width:32px; height:24px; padding:0;
    background:none; border:none; color:var(--sea);
    cursor:pointer; line-height:0; touch-action:none;
  }
  body.s-results .sheet-up-btn:active { opacity:0.6; }
  .m-sheet-grabber:active { cursor:grabbing; }
  /* Topbar come superficie di drag estesa per lo sheet su mobile */
  body.s-results .results-topbar { touch-action:none; cursor:grab; }
  body.s-results .results-topbar:active { cursor:grabbing; }
  body.s-results .results-topbar button { cursor:pointer; }

  .m-scrim {
    position:absolute; inset:0; pointer-events:none;
    background:rgba(0,0,0,0); transition:background 0.25s; z-index:600;
  }
  body.s-results.s-sheet-full .m-scrim { background:rgba(0,0,0,0.18); }

  /* R4: bottone "Risultati" su mobile in s-results visibile SOLO quando lo
     sheet è a peek (utente ha trascinato giù): permette di riaprirlo a half
     senza dover toccare il grabber. Nascosto a half/full (la lista è già visibile). */
  /* In s-results il bottone "Risultati" resta sempre nascosto: quando lo sheet
     è abbassato si riapre toccando la barra di trascinamento (vedi sotto). */
  body.s-results .btn-back-map { display:none; }

  /* Toggle comprimi/espandi visibile solo su mobile in stato risultati */
  body.s-results .btn-sheet-toggle { display:flex; }
}

/* Grabber visibile solo su mobile ≤768px */
.m-sheet-grabber { display:none; }
/* Grabber modale visibile solo su mobile ≤600px (default desktop nascosto) */
.modal-grabber { display:none; }
/* Topbar risultati */
.results-topbar { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); background:white; flex-shrink:0; }
.btn-modifica { background:none; border:1.5px solid var(--border); border-radius:20px; padding:5px 12px; font-size:12px; font-weight:500; color:var(--sea); cursor:pointer; font-family:'DM Sans','DM Sans Fallback',sans-serif; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.btn-modifica:hover { background:var(--sea-pale); }
.topbar-riepilogo { flex:1; font-size:12px; color:var(--text-muted); min-width:0; line-height:1.35; word-break:break-word; }
.topbar-riepilogo strong { color:var(--sea); }
/* Back button mappa */
.btn-back-map { position:absolute; top:14px; left:14px; z-index:600; background:white; border:1.5px solid var(--border); border-radius:20px; padding:8px 14px; cursor:pointer; font-size:13px; font-weight:500; font-family:'DM Sans','DM Sans Fallback',sans-serif; display:flex; align-items:center; gap:6px; box-shadow:var(--shadow); color:var(--text); }
.btn-back-map:hover { background:var(--sea-pale); }
#field-from.filled { padding-right:36px; }
.recent-searches { margin-top:14px; }
.recent-searches-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.recent-searches-title { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.recent-clear-all { background:none; border:none; padding:2px 6px; font-size:12px; color:var(--sea); cursor:pointer; font-family:inherit; border-radius:6px; }
.recent-clear-all:hover { background:var(--sea-pale); text-decoration:underline; }
.recent-chips { display:flex; flex-wrap:wrap; gap:10px; }
.recent-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 4px 6px 11px; border-radius:20px; font-size:13px; font-weight:500; border:1.5px solid var(--border); background:white; color:var(--text); cursor:pointer; font-family:'DM Sans','DM Sans Fallback',sans-serif; min-height:34px; max-width:100%; transition:all 0.12s; }
.recent-chip:hover, .recent-chip:focus-visible { background:var(--sea-pale); border-color:var(--sea-light); color:var(--sea); outline:none; }
.recent-chip-icon { flex-shrink:0; opacity:0.65; }
.recent-chip-label { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 28px); }
/* A11y (Lighthouse color-contrast): opacity:0.55 sul testo " → " ereditato
   da --text scendeva a ~3.86:1 su sfondo bianco (sotto 4.5:1 AA). Colore
   diretto invece di opacity: stesso effetto "attenuato" visivamente, ma
   resta a ~6:1, conforme. */
.recent-chip-arrow { color:var(--text-muted); margin:0 1px; }
/* A11y (Lighthouse target-size): 20x20 era sotto il minimo WCAG 2.5.8 (24x24
   CSS px) — ora 24x24 col padding attorno, e gap fra chip alzato a 10px cosi'
   il target vicino (la chip stessa, cliccabile a sua volta) ha piu' respiro. */
.recent-chip-remove { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:transparent; border:none; cursor:pointer; color:var(--text-muted); padding:0; flex-shrink:0; transition:background 0.12s, color 0.12s; }
.recent-chip-remove:hover, .recent-chip-remove:focus-visible { background:rgba(10,79,110,0.1); color:var(--accent); outline:none; }
/* Stato vuoto storico non mostrato */
.recent-searches:empty { display:none; }
.cascade-geolocate { padding:10px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; color:var(--sea); font-weight:500; }
.cascade-geolocate:hover { background:var(--sea-pale); }
.cascade-geolocate.loading { animation:geo-spin 1s linear infinite; }
@keyframes geo-spin { to { transform:rotate(360deg); } }
.cascade-fermata-sub { padding-left:28px; font-size:12px; color:var(--text-muted); }

/* ── Navigazione header ─────────────────────────────────────────────────── */
.m-header-right { display:flex; align-items:center; gap:20px; font-size:14px; }
.m-nav { display:flex; align-items:center; gap:20px; }
.m-nav a { color:rgba(255,255,255,.82); text-decoration:none; font-size:14px; padding:4px 0; position:relative; font-weight:600; transition:color .15s; }
.m-nav a:hover { color:#fff; }
.m-nav a[aria-current] { color:#fff; }
.m-nav a[aria-current]::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2.5px; background:repeating-linear-gradient(90deg,#e8622a 0 5px,transparent 5px 9px); }
/* Hamburger */
.m-hamburger { display:none; background:none; border:none; cursor:pointer; color:#fff; padding:6px; min-height:40px; min-width:40px; align-items:center; justify-content:center; border-radius:8px; flex-shrink:0; }
.m-hamburger:hover { background:rgba(255,255,255,.12); }
/* Nav drawer */
.m-nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:2001; }
.m-nav-overlay.open { opacity:1; pointer-events:auto; }
.m-nav-drawer { position:fixed; top:0; right:0; bottom:0; width:260px; background:#08405a; transform:translateX(100%); transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:2002; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.3); }
.m-nav-drawer.open { transform:translateX(0); }
.m-nav-drawer-top { display:flex; align-items:center; justify-content:space-between; padding:0 16px; height:72px; border-bottom:1px solid rgba(255,255,255,.12); flex-shrink:0; }
.m-drawer-close { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; padding:8px; display:flex; align-items:center; justify-content:center; border-radius:8px; min-height:44px; min-width:44px; }
.m-drawer-close:hover { color:#fff; background:rgba(255,255,255,.1); }
.m-nav-drawer nav a { display:flex; align-items:center; padding:16px 20px; color:rgba(255,255,255,.82); text-decoration:none; font-size:16px; font-weight:600; border-bottom:1px solid rgba(255,255,255,.08); position:relative; }
.m-nav-drawer nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.m-nav-drawer nav a[aria-current] { color:#fff; background:rgba(255,255,255,.06); }
.m-nav-drawer nav a[aria-current]::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#e8622a; border-radius:0 2px 2px 0; }
.m-drawer-stats { margin-top:auto; padding:16px 20px; border-top:1px solid rgba(255,255,255,.12); font-size:13px; color:#fff; letter-spacing:0.01em; }

/* ── HEADER COMPATTO ≤ 768px (tablet portrait + telefoni) ─────────────── */
@media (max-width:768px) {
  .m-nav { display:none; }
  .m-hamburger { display:flex; }
  .header-badge { display:none; }
  #btn-edit-mode { display:none; }
}

/* ── MOBILE-FIRST ≤ 600px ─────────────────────────────────────────────── */
@media (max-width:600px) {
  /* Previene zoom automatico iOS sul focus degli input */
  .cascade-input { font-size:16px!important; }

  /* Header semplificato */
  header { padding:0 12px; height:108px; }
  .logo img { height:115px; }

  /* Hero form */
  #hero { padding:16px 12px; }
  .hero-inner { max-width:100%; }
  .hero-title { font-size:26px; margin-bottom:20px; }
  .hero-form { padding:16px; }

  /* Cascade: touch target ≥ 48px */
  .cascade-field { min-height:48px; }
  .cascade-fermata { padding:13px 14px; font-size:14px; }
  .cascade-fermata-nome { white-space:normal; }
  .cascade-comune { padding:14px 14px 14px 20px; font-size:14px; }
  .cascade-prov { padding:14px; font-size:15px; }
  .cascade-back { padding:11px 14px; font-size:13px; }
  .cascade-dropdown { max-height:55vh; overscroll-behavior:contain; }

  /* Ora chips (ritorno) */
  .ora-chip { padding:8px 14px; font-size:14px; }

  /* Form "quando" v2 */
  .when-pill { min-height:48px; font-size:15px; padding:11px 14px; }
  .ora-preset { padding:9px 14px; font-size:14px; min-height:40px; }
  .diretti-switch { font-size:15px; padding:12px 2px; }

  /* Search button */
  .btn-search { padding:14px; font-size:15px; min-height:48px; }

  /* Results topbar */
  .results-topbar { padding:8px 12px; }
  .topbar-riepilogo { font-size:13px; }

  /* Route cards */
  .results-area { padding:10px 12px; }
  .route-card { padding:14px 16px; margin-bottom:10px; }
  .route-tag { font-size:13px; }
  .time { font-size:26px; }
  .time-duration-pill { font-size:12px; }
  .route-tratto { font-size:14px; }
  .route-meta { font-size:13px; gap:4px 12px; }

  /* Tratta badge: touch target ≥ 36px */
  .tratta-badge { padding:8px 14px; font-size:13px; min-height:36px; }

  /* Modal → bottom sheet trascinabile */
  .modal-overlay { align-items:flex-end; }
  .modal-box {
    width:100%; max-width:100%; height:88vh; max-height:88vh;
    border-radius:16px 16px 0 0; padding:0 20px 40px;
    transform:translateY(0); transition:transform 0.3s cubic-bezier(.4,0,.2,1);
    touch-action:pan-y;
  }
  .modal-box.dragging { transition:none; }
  .modal-box.snap-peek { transform:translateY(calc(88vh - 200px)); }
  .modal-box.snap-half { transform:translateY(calc(88vh - 55vh)); }
  .modal-box.snap-full { transform:translateY(0); }
  .modal-box::before { display:none; }
  .modal-grabber {
    width:100%; min-height:44px; display:flex; align-items:center; justify-content:center;
    cursor:grab; touch-action:none; user-select:none; padding:10px 0 4px;
    margin-bottom:6px;
  }
  .modal-grabber::before {
    content:''; width:44px; height:5px;
    background:rgba(10,79,110,0.25); border-radius:3px;
  }
  .modal-grabber:active { cursor:grabbing; }
  .modal-title { font-size:17px; }
  .modal-stop { padding:10px 6px; font-size:14px; }
  .modal-corsa-strip strong { font-size:20px; }

  /* Map legend compatta */
  .map-legend { bottom:12px; right:8px; padding:8px 10px; font-size:11px; }
  .legend-title { font-size:10px; }
}

/* ── MOBILE ≤ 380px (telefoni molto piccoli) ─────────────────────────── */
@media (max-width:380px) {
  .hero-title { font-size:22px; }
  .route-times { gap:8px; }
  .time { font-size:22px; }
  .route-tratto { font-size:13px; }
  .route-meta { font-size:12px; }
  .tratta-badge { padding:8px 12px; font-size:12px; }
}

/* ── Data chips ── */
.data-row { margin-bottom:10px; }
.data-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:6px; }
.data-chip { padding:6px 14px; border-radius:20px; font-size:13px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:500; border:1.5px solid var(--border); cursor:pointer; background:white; color:var(--text-muted); transition:all 0.15s; }
.data-chip:hover { border-color:var(--sea-light); color:var(--sea); }
.data-chip.active { background:var(--sea); color:white; border-color:var(--sea); }
.data-custom-input { border:1.5px solid var(--border); border-radius:20px; padding:5px 12px; font-size:13px; font-family:'DM Sans','DM Sans Fallback',sans-serif; background:white; color:var(--text); outline:none; margin-top:6px; display:none; width:100%; }
.data-custom-input.visible { display:block; }

/* ── Filter tabs ── */
.filter-tabs { display:none; border-bottom:1px solid var(--border); background:var(--sea-pale); flex-shrink:0; }
.filter-tabs.visible { display:flex; }
.filter-tab { flex:1; padding:9px 0; text-align:center; font-size:12px; font-weight:600; color:var(--text-muted); cursor:pointer; border-bottom:2.5px solid transparent; background:none; border-top:none; border-left:none; border-right:none; font-family:'DM Sans','DM Sans Fallback',sans-serif; transition:color 0.15s,border-color 0.15s; }
.filter-tab:hover { color:var(--sea); }
.filter-tab.active { color:var(--sea); border-bottom-color:var(--sea); }
.filter-tab:disabled { opacity:0.4; cursor:default; }
.tab-count { font-size:10px; opacity:0.65; margin-left:3px; }

/* ── Share button ── */
.btn-share { background:none; border:1.5px solid var(--border); border-radius:20px; padding:5px 10px; font-size:12px; color:var(--sea); cursor:pointer; font-family:'DM Sans','DM Sans Fallback',sans-serif; display:none; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0; }
.btn-share.visible { display:flex; }
.btn-share:hover { background:var(--sea-pale); }
/* Toggle comprimi/espandi sheet risultati (mobile only) */
.btn-sheet-toggle {
  display:none; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0; padding:0;
  background:none; border:1.5px solid var(--border); border-radius:50%;
  color:var(--sea); cursor:pointer;
}
.btn-sheet-toggle:hover { background:var(--sea-pale); }
.btn-sheet-toggle svg { transition:transform 0.2s; }
body.s-sheet-peek #btn-sheet-toggle svg { transform:rotate(180deg); }

/* ── Oggi attivo badge ── */
.badge-oggi { background:#e8f5ee; color:#2d7a4f; }
.badge-oggi-no { background:#fdf0eb; color:#e8622a; }

/* ── Orario stimato badge ── */
.badge-stimato { background:#fff8e1; color:#92400e; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; border:1px solid #f59e0b; }
.badge-coord-ok { background:#e8f5ee; color:#2d7a4f; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; border:1px solid #86efac; }
.badge-coord-no { background:#fff8e1; color:#92400e; font-size:10px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap; border:1px solid #f59e0b; text-decoration:none; display:inline-block; }
/* ── Pannello ologramma proposta posizione ── */
#pp-panel { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:10000; background:white; border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,0.18); padding:14px 18px; width:300px; max-width:calc(100vw - 32px); display:none; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
#pp-panel .pp-title { font-weight:700; font-size:13px; color:var(--sea); margin-bottom:4px; }
#pp-panel .pp-hint  { font-size:11px; color:var(--text-muted); margin-bottom:10px; }
#pp-panel input[type=email] { width:100%; box-sizing:border-box; padding:6px 9px; border:1.5px solid var(--border); border-radius:7px; font-size:12px; font-family:'DM Sans','DM Sans Fallback',sans-serif; margin-bottom:6px; }
#pp-panel input[type=email]:focus { outline:none; border-color:var(--sea); }
#pp-panel .pp-actions { display:flex; gap:8px; margin-top:4px; }
#pp-panel .pp-btn-ok  { flex:1; padding:7px 0; background:var(--sea); color:white; border:none; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
#pp-panel .pp-btn-ok:disabled { opacity:0.5; cursor:default; }
#pp-panel .pp-btn-no  { flex:1; padding:7px 0; background:white; color:var(--text-muted); border:1.5px solid var(--border); border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
#pp-panel .pp-err     { font-size:11px; color:#dc2626; margin-top:2px; display:none; }
#pp-panel .pp-privacy { font-size:10px; color:var(--text-muted); margin-bottom:6px; }
#pp-panel .pp-privacy a { color:var(--text-muted); text-decoration:underline; }

/* ── Attesa lunga al cambio ── */
.route-attesa-lunga { font-size:11px; color:#92400e; white-space:nowrap; }
.route-attesa-lunga::before { content:'⏱ '; }

/* ── Chip meta card (Viaggia / Effettuato da / Prezzo) ── */
.meta-row-viaggia { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.meta-chip-viaggia { display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; }
.meta-link-orario { font-weight:600; color:var(--sea); text-decoration:none; white-space:nowrap; flex-shrink:0; }
.meta-link-orario:hover { text-decoration:underline; }
.meta-chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.meta-chip-vettore { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:8px; box-sizing:border-box; }
.meta-chip-prezzo { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box; }
.meta-chip-prezzo strong { font-weight:600; color:var(--text); }

/* ── Mobile: bottom bar "Risultati" fissa ── */
@media (max-width:768px) {
  .btn-back-map {
    position:fixed;
    bottom:0; left:0; right:0; top:auto;
    width:100%;
    border-radius:0;
    border-top:1.5px solid var(--border);
    border-left:none; border-right:none; border-bottom:none;
    padding:14px 20px;
    font-size:15px;
    font-weight:600;
    justify-content:center;
    box-shadow:0 -4px 16px rgba(0,0,0,0.1);
    background:white;
    z-index:700;
    min-height:52px;
  }
  /* Compensate for fixed bottom bar in map state */
  body.s-map #map { padding-bottom:52px; }
  /* Hide share label on very small screens */
  .btn-share .share-label { display:none; }
}
/* Bottone "Risultati" ridondante su desktop: la sidebar è sempre visibile */
@media (min-width:769px) { .btn-back-map { display:none; } }