/* Palette unica per tutta l'interfaccia. Il tema chiaro conserva i valori
   storici; quello scuro non è un'inversione ma una palette a sé, perché ombre
   e bianchi semitrasparenti invertiti danno il classico scuro slavato.
   Il tema attivo è sempre esplicito in data-theme: lo risolve lo script inline
   nell'head, così non c'è lampeggio al caricamento. */
:root {
  /* Dove finisce il pannello su schermo largo: ci si appoggiano il pulsante
     della spiegazione e il fumetto, così restano agganciati alla card invece
     di galleggiare su misure ripetute a mano. */
  --panel-right: calc(18px + min(356px, calc(100vw - 36px)));
  --page-bg: #e7ecef;
  --map-bg: #dce4e8;
  --surface: rgba(251, 252, 253, 0.94);
  --surface-raised: rgba(255, 255, 255, 0.96);
  --surface-solid: #fff;
  --surface-sunken: #eef1f4;
  --text: #152032;
  --text-2: #667384;
  --text-3: #87919d;
  --border: rgba(31, 44, 61, 0.12);
  --border-soft: rgba(27, 42, 60, 0.09);
  --border-hard: #dde2e7;
  --accent: #087ff5;
  --accent-hover: #0872dc;
  --accent-deep: #075fc4;
  --accent-soft: #e7f2ff;
  --accent-ring: rgba(8, 127, 245, 0.18);
  --accent-ring-soft: rgba(8, 127, 245, 0.09);
  --on-accent: #fff;
  --ok: #22a66f;
  --warn: #e4a62b;
  --danger: #e15454;
  --stale: #db754a;
  --neutral-dot: #9ca5af;
  --note-text: #8a5a05;
  --note-bg: rgba(245, 166, 8, 0.1);
  --note-border: rgba(245, 166, 8, 0.55);
  --shadow-lg: 0 18px 48px rgba(31, 44, 61, 0.19);
  --shadow-md: 0 7px 22px rgba(31, 44, 61, 0.15);
  --shadow-sm: 0 5px 16px rgba(31, 44, 61, 0.16);
  --marker-ring: rgba(255, 255, 255, 0.72);
  /* La maniglia del foglio stava a 1,27 di contrasto: praticamente invisibile,
     e a seconda di cosa scorreva sotto al pannello traslucido spariva del
     tutto. A 2,5 si vede sempre senza gridare. */
  --grabber: #97a1ae;
  /* Stessa tinta di --surface ma piena: serve quando un elemento deve coprire
     ciò che gli scorre sotto, e la trasparenza lo renderebbe illeggibile. */
  --surface-opaque: #fbfcfd;
  color-scheme: light;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page-bg);
  font-synthesis: none;
}

:root[data-theme="dark"] {
  /* Grigi neutri, non blu-notte. Il blu-notte e' il fondo che esce di default
     da ogni generatore, ed e' il motivo per cui il tema scuro sembrava "fatto
     dall'AI". Questi sono i grigi di sistema di Apple: chroma vicino a zero
     (#1c1c1e e' 28,28,30, cioe' due punti di blu su duecentocinquanta), cosi'
     il colore resta ai dati — il verde del feed, i rossi delle linee — invece
     di litigare con l'azzurro del fondo. Prima lo scarto blu stava fra 11 e 20,
     ora sta a 2. */
  --page-bg: #070708;
  --map-bg: #050506;
  --surface: rgba(20, 20, 22, 0.96);
  --surface-raised: rgba(38, 38, 40, 0.96);
  --surface-solid: #141416;
  --surface-sunken: #242426;
  --text: #f2f2f5;
  --text-2: #a0a0a6;
  /* Un gradino piu' chiaro del terziario di Apple: qui non regge solo segni di
     contorno (frecce, segnaposto) ma anche il link Privacy e la firma, che a
     #78 stavano a 3,9 su fondo scuro — sotto la soglia leggibile. A #8c salgono
     a 4,7 restando spenti quanto serve. */
  --text-3: #8c8c92;
  --border: rgba(255, 255, 255, 0.11);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-hard: #3a3a3c;
  --accent: #4da3ff;
  --accent-hover: #6db4ff;
  --accent-deep: #a8d2ff;
  --accent-soft: rgba(77, 163, 255, 0.16);
  --accent-ring: rgba(77, 163, 255, 0.26);
  --accent-ring-soft: rgba(77, 163, 255, 0.14);
  --on-accent: #0b1017;
  --ok: #35c98a;
  --warn: #efb646;
  --danger: #f37471;
  --stale: #e08558;
  --neutral-dot: #6a6a70;
  --note-text: #f0c079;
  --note-bg: rgba(240, 180, 60, 0.13);
  --note-border: rgba(240, 180, 60, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 7px 22px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 5px 16px rgba(0, 0, 0, 0.4);
  --marker-ring: rgba(255, 255, 255, 0.5);
  --grabber: #5a5a5f;
  --surface-opaque: #1c1c1e;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body, .app-shell, .map-shell, #map { width: 100%; height: 100%; margin: 0; }
html { overflow: hidden; -webkit-text-size-adjust: 100%; }
body { max-width: 100vw; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { position: relative; }
.map-shell { position: absolute; inset: 0; background: var(--map-bg); }

.control-panel {
  position: fixed;
  z-index: 1000;
  top: 18px;
  bottom: 18px;
  left: 18px;
  width: min(356px, calc(100vw - 36px));
  max-width: calc(100vw - 36px);
  display: flex;
  flex-direction: column;
  /* La fascia in cima e' per il chevron che apre e chiude. Prima non c'era e
     il chevron si appoggiava sull'angolo, finendo sopra il campo di ricerca e
     coprendo il contatore delle linee — si vedeva solo sulla mappa senza
     linea scelta, dove non c'e' il titolo a spingere giu' la ricerca.
     Su telefono il chevron non esiste (c'e' la maniglia) e la fascia sparisce
     con il padding riscritto piu' sotto. */
  padding: 40px 18px 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(22px) saturate(1.2);
  transition: height 180ms ease, bottom 180ms ease, border-radius 180ms ease;
}

/* Nudo, senza la piastrella grigia sotto. Il cerchietto lo faceva sembrare un
   comando importante quanto la ricerca, e nella fascia in cima non ha niente
   da cui staccarsi: e' l'unica cosa che ci abita. Il bersaglio resta di 32px,
   ed e' un mouse a doverlo prendere — su telefono qui non c'e'. */
.panel-toggle {
  position: absolute;
  z-index: 2;
  /* Centrato nella fascia: 40 di fascia meno 28 di bersaglio, sei per parte. */
  top: 6px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--text-3);
  background: none;
  border: 0;
  border-radius: var(--raggio-1);
  outline: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease;
}
@media (hover: hover) {
  .panel-toggle:hover { color: var(--text); }
}
.panel-toggle:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }
/* Il verso dice cosa succede toccando, non com'e' adesso. Il pannello e'
   ancorato in alto: chiudendosi si ritira verso l'alto, quindi da aperto la
   freccia punta in su. Era il contrario, e prometteva il movimento sbagliato. */
.panel-toggle::before { content: ""; width: 8px; height: 8px; margin-top: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(225deg); transition: transform 160ms ease, margin 160ms ease; }
.control-panel.collapsed .panel-toggle::before { margin-top: -4px; transform: rotate(45deg); }
.control-panel.collapsed { bottom: auto; height: auto; }
/* A riposo restano marchio, ricerca e minifooter. I filtri no: filtrare e' il
   raffinamento di una ricerca gia' cominciata, e a riposo una ricerca non e'
   ancora cominciata. L'elenco resta ma ci sta poco, ed e' voluto: si tira su. */
.control-panel.collapsed .promise,
.control-panel.collapsed .quick-filters,
.control-panel.collapsed .active-filter-row,
.control-panel.collapsed .line-row,
/* Anche l'elenco: lasciarne fuori una fetta sembrava un invito a tirare su, ma
   una riga tagliata a meta' si legge come un difetto, non come un indizio. */
.control-panel.collapsed .line-list,
.control-panel.collapsed .direction-legend { display: none; }
.control-panel.collapsed .status-more { display: none; }

h1, h2, p { margin: 0; }
.feed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-dot); }
.feed-dot.ok { background: var(--ok); box-shadow: 0 0 0 5px rgba(34, 166, 111, 0.12); }
.feed-dot.error { background: var(--danger); box-shadow: 0 0 0 5px rgba(225, 84, 84, 0.12); }

/* Niente margine in cima: quei 19px servivano a scansare la freccia quando
   stava appoggiata sull'angolo. Adesso la freccia ha la sua fascia, e il
   titolo comincia dove comincia la ricerca sulla mappa senza linea. */
.promise { display: grid; gap: 3px; margin: 0 1px 14px; }
.promise strong { font-size: 14px; letter-spacing: -0.01em; }
.promise h1 { margin: 0; font-size: 16px; line-height: 1.18; letter-spacing: -0.02em; }
.promise span { color: var(--text-2); font-size: 13px; line-height: 1.35; }

/* Segmentato di sistema — pastiglia che scivola, testo che si accende — perché
   è la forma che tutti riconoscono senza doverla imparare. */
/* Il marchio sta a sinistra della scelta, alto quanto lei: e' l'unico posto
   del pannello dove aggiunge qualcosa, perche' mostra insieme le due cose fra
   cui stai scegliendo. */
/* Il comando del mezzo galleggia sulla mappa, in alto al centro. Sta qui e non
   nel pannello perche' cambia quale rete la mappa mostra — non e' un filtro
   dell'elenco — e perche' nel pannello si prendeva ottanta pixel dei centoventi
   che restavano alle linee. Misurato: l'elenco passava da due righe visibili a
   cinque. */
.mode-row {
  position: absolute;
  z-index: 950;
  top: var(--sp-3);
  /* Al centro della mappa *libera*, non della finestra: il pannello ne copre i
     primi 374 pixel, e centrandosi sulla finestra le pastiglie ci finivano
     sotto. Misurato a 895 di larghezza: 36 pixel di sovrapposizione. Stesso
     conto che fa gia' il fumetto degli avvisi. */
  left: calc((var(--panel-right) + 100vw) / 2);
  transform: translateX(-50%);
  max-width: calc(100vw - var(--panel-right) - 96px);
}
.mode-row[hidden] { display: none; }
/* Una cornice sola. Prima erano due — un riquadro chiaro con dentro un riquadro
   grigio — e due bordi concentrici a tre pixel di distanza si leggono come un
   difetto di allineamento, non come una gerarchia. */
.mode-tabs {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--sp-1);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--raggio-3);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px) saturate(1.2);
}
/* La pastiglia e' inchiostro come i pulsanti delle landing. Prima portava un
   gradiente arancio-blu che scorreva con lei: bello da guardare, ma erano gli
   unici due colori pieni dell'interfaccia e finivano per sembrare un dato,
   accanto ai badge delle linee che il colore ce l'hanno per davvero. */
.mode-thumb {
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: var(--sp-1);
  width: calc(50% - var(--sp-1));
  background: var(--primary);
  border-radius: var(--raggio-2);
  box-shadow: var(--ombra-1);
  transition: transform 340ms cubic-bezier(.32, .72, 0, 1);
}
.mode-tabs[data-active="1"] .mode-thumb { transform: translateX(100%); }
.mode-tab {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 40px;
  padding: 0 var(--sp-5);
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: var(--raggio-2);
  font: inherit;
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  letter-spacing: -.01em;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: color 240ms ease;
}
.mode-tab b { font-weight: inherit; }
/* Il testo si accende in ritardo e si spegne subito. La pastiglia impiega 340ms
   ad arrivare: se la parola cambiasse colore al tocco resterebbe chiara sopra
   il fondo chiaro per un terzo di secondo, illeggibile. Il ritardo la fa
   accendere quando la pastiglia e' ormai sotto. */
.mode-tab[aria-pressed="true"] {
  color: var(--primary-ink);
  transition: color 160ms ease 210ms;
}
.mode-tab:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); }

.line-list-note { margin: 14px 2px; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }

/* Marchio e ricerca sulla stessa riga: e' tutto quello che il pannello mostra
   a riposo. Il marchio e' 44px di tocco, non un'immagine decorativa. */
.search-row { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: center; }
.panel-mark { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--raggio-2); }
.panel-mark img { width: 38px; height: 34px; object-fit: contain; }
.panel-mark:active { transform: scale(.94); }
.panel-mark:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.search-field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 12px;
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: 150ms ease;
  min-width: 0;
  max-width: 100%;
}
.search-field:focus-within { background: var(--surface-solid); border-color: var(--accent-ring); box-shadow: 0 0 0 4px var(--accent-ring-soft); }
.search-field > span { color: var(--text-2); font-size: 23px; line-height: 1; transform: rotate(-15deg); }

/* Sta sotto la ricerca perché è una ricerca anche lui: restringe lo stesso
   elenco, con un criterio che non si può scrivere nella casella. */
.quick-filters { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.quick-filter {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 620;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
/* Il pallino verde è lo stesso che indica il feed vivo in fondo al pannello:
   qui e là vuol dire la stessa cosa, "adesso". */
.quick-filter > i { width: 7px; height: 7px; background: var(--ok); border-radius: 50%; opacity: .55; transition: opacity 140ms ease; }
.quick-filter > b { color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 700; }
.quick-filter:hover { color: var(--text-1); }
.quick-filter[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.quick-filter[aria-pressed="true"] > i { opacity: 1; background: #fff; }
.quick-filter[aria-pressed="true"] > b { color: var(--on-accent); opacity: .8; }
.quick-filter:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring); }
.quick-filter[hidden] { display: none; }
.search-field input { width: 100%; min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 16px; }
.search-field input::placeholder { color: var(--text-3); }
.search-field kbd { min-width: 25px; padding: 3px 6px; color: var(--text-2); background: var(--surface-solid); border: 1px solid var(--border-hard); border-radius: 7px; font-size: 10px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.04); }

/* La riga della linea scelta. E' l'unico blocco del pannello con una superficie
   propria, ed e' voluto: risponde alla domanda "cosa sto guardando adesso", e
   una risposta che ha bisogno di essere trovata in fretta non puo' essere una
   riga di testo come le altre. Sopra il nome e i numeri, sotto le due porte:
   il taglio orizzontale separa cio' che si legge da cio' che si tocca. */
.line-row {
  display: grid;
  margin-top: var(--sp-3);
  background: var(--surface-sunken);
  border-radius: var(--raggio-3);
}
.line-row-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-3);
}
.line-row-text { display: grid; gap: 2px; min-width: 0; }
.line-row-text strong { color: var(--text); font-size: var(--t-3); font-weight: var(--peso-forte); letter-spacing: -.02em; }
.line-row-text small { overflow: hidden; color: var(--text-2); font-size: var(--t-1); text-overflow: ellipsis; white-space: nowrap; }
/* 40px di bersaglio con un segno piccolo dentro, come la × del fumetto: si
   chiude col pollice senza dover mirare. */
.line-row-clear {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-3);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background 140ms ease;
}
.line-row-clear::before,
.line-row-clear::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 13px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.line-row-clear::before { transform: rotate(45deg); }
.line-row-clear::after { transform: rotate(-45deg); }
@media (hover: hover) {
  .line-row-clear:hover { color: var(--text); background: var(--surface-solid); }
}
.line-row-clear:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.line-row-actions { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--border-soft); }
.line-row-action {
  display: flex;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-3);
  align-items: center;
  color: var(--text);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  letter-spacing: -.01em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease;
}
.line-row-action em { color: var(--text-3); font-size: var(--t-3); font-style: normal; line-height: 1; }
.line-row-action:hover, .line-row-action:hover em { color: var(--accent); }
.line-row-action:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); border-radius: var(--raggio-2); }
/* "Condividi" e' l'azione minore delle due e sta a destra, staccata da un filo:
   la porta principale e' quella che porta agli orari. */
#share-line { color: var(--text-2); border-left: 1px solid var(--border-soft); }
#share-line:hover { color: var(--accent); }
/* Aperta la scheda, la porta resta accesa: e' l'unico segno che quel foglio in
   basso e' arrivato da qui. */
.line-row-action.active { color: var(--accent); }
.line-row-action.active em { color: var(--accent); transform: rotate(90deg); }
.line-row-action[hidden] { display: none; }

.active-filter-row { display: flex; gap: 8px; align-items: center; margin-top: 11px; }
.active-filters { display: flex; gap: 6px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.active-filters::-webkit-scrollbar { display: none; }
.active-filters button { flex: 0 0 auto; padding: 7px 9px; color: var(--accent-deep); background: var(--accent-soft); border: 0; border-radius: 9px; font-size: 11px; font-weight: 750; cursor: pointer; }
.active-filters button span { margin-left: 3px; font-size: 14px; }
.text-button { flex: 0 0 auto; padding: 5px 0; color: var(--text-2); background: transparent; border: 0; font-size: 11px; cursor: pointer; }

/* Fermate e direzioni sono contenuto per i motori di ricerca: restano
   nell'HTML servito, ma non occupano il pannello. Si aprono col tasto ⓘ. */
#line-page-static { display: none; }
/* Stessa forma della scheda del mezzo, perche' e' la stessa cosa: un foglio che
   esce quando chiedi il dettaglio di qualcosa. Sta sotto <body> e non dentro il
   pannello — .control-panel ha un backdrop-filter, e chi ha un backdrop-filter
   diventa il riferimento dei position:fixed che contiene: il "right: 18px"
   finiva misurato dal pannello invece che dallo schermo. */
body.line-info-open #line-page-static {
  display: block;
  position: fixed;
  z-index: 1100;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: min(380px, calc(100vw - 36px));
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  /* Aria vera intorno al contenuto: e' un foglio di lettura, non una riga di
     elenco, e puo' permettersi il respiro di una pagina. */
  padding: var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--raggio-3);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(22px) saturate(1.2);
  animation: sheet-in 180ms ease-out;
}

/* Questa scheda era rimasta col disegno vecchio, prima dei token: misure in
   pixel a mano, spazi da sei-sette pixel, etichette da dieci. Accanto al resto
   dell'app - che respira - sembrava un'altra cosa. Ora usa la stessa scala di
   spazi e di testo, e l'aria e' quella delle pagine, non quella di una tabella.
   Niente scorrimento interno: il foglio scorre gia' di suo, e due scorrimenti
   annidati sono il modo piu' rapido per non riuscire a leggere. */
.line-page-content { padding: 0; color: var(--text-2); font-size: var(--t-1); line-height: 1.55; }
/* Il margine destro lascia il posto alla × in alto a destra. */
.line-page-content .line-page-title { margin: 0 var(--sp-6) var(--sp-5) 0; color: var(--text); font-size: var(--t-4); font-weight: var(--peso-forte); letter-spacing: -.02em; }
.line-page-content h2 { margin: var(--sp-4) 0 var(--sp-2); color: var(--text); font-size: var(--t-2); }
.line-page-content p { margin: 0; }
/* Prima e ultima corsa aprono la scheda: sono la domanda per cui la gente
   arriva davvero su una pagina di linea. Riquadri piu' larghi e piu' ariosi. */
.line-page-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-5); }
/* Etichetta e valore centrati, uno sopra l'altro con un gap solo. Il padding
   orizzontale e' stretto apposta: "Ultima corsa" e' larga 82px e a padding
   pieno la cella ne lasciava 80, cosi' andava a capo mentre le altre no, e i
   valori si scalavano. Con il padding stretto ci sta su una riga come le
   altre, e i tre valori tornano in linea da soli. */
.line-page-hours > div { display: flex; flex-direction: column; align-items: center; padding: var(--sp-3) var(--sp-2); background: var(--surface-sunken); border-radius: var(--raggio-2); text-align: center; }
.line-page-hours dt { color: var(--text-3); font-size: var(--t-0); font-weight: var(--peso-medio); letter-spacing: .02em; text-transform: uppercase; }
/* padding-top e' lo spazio minimo sotto l'etichetta; margin-top auto assorbe
   l'altezza in piu' quando su schermi stretti un'etichetta va a capo e le altre
   no, cosi' i tre valori restano su una riga sola invece di scalarsi. A 375,
   dove nessuna va a capo, l'auto e' zero e resta solo il padding. */
.line-page-hours dd { margin-top: auto; padding-top: var(--sp-2); color: var(--text); font-size: var(--t-4); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* Il prefisso .line-page-content non e' vezzo: senza, `.line-page-content p {
   margin: 0 }` piu' in alto - che ha un elemento in piu' nel selettore - vince
   sulla sola classe e azzera il margine sotto, incollando il divisore al testo.
   E' esattamente il difetto che si vedeva: nessuna aria sopra le righe. */
.line-page-content .line-page-route { margin: 0 0 var(--sp-4); color: var(--text); font-size: var(--t-2); font-weight: var(--peso-medio); line-height: 1.4; }
/* Le due direzioni, una per riga, con l'aria di una lista vera: il pallino del
   colore, l'etichetta spenta, la destinazione in evidenza. */
.line-directions { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--border-soft); list-style: none; }
.line-directions li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-3); align-items: baseline; }
.line-directions i { grid-row: span 2; align-self: center; }
.line-directions b { color: var(--text-3); font-size: var(--t-0); font-weight: var(--peso-medio); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.line-directions span { color: var(--text); font-size: var(--t-2); font-weight: var(--peso-medio); }
/* "Tutte le linee" e' una porta, e si comporta come le porte del footer: riga
   alta un dito, la freccia a destra, il filo che la stacca da cio' che sta
   sopra. */
.line-page-content .line-page-up { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.line-page-up a { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--accent); font-size: var(--t-2); font-weight: var(--peso-medio); text-decoration: none; }
.line-page-up a::after { content: "\203A"; color: var(--accent); font-size: var(--t-3); line-height: 1; }

/* L'ultima riga sfuma invece di essere tagliata di netto. E' il bordo dove
   l'elenco incontra il minifooter, e una riga mozzata li' si legge come un
   difetto — mentre una che si dissolve dice "continua, scorri". Ventotto pixel:
   meno di mezza riga, abbastanza da togliere il taglio netto. */
.line-list {
  flex: 1;
  min-height: 80px;
  margin: 10px -7px 0;
  padding: 0 7px;
  overflow-y: auto;
  scrollbar-color: var(--border-hard) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.line-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  background: transparent;
  border: 0;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
/* Come per la riga dello stato: su touch il fondo del :hover resta attaccato
   dopo il tocco, e una riga grigia accanto a una selezionata si legge come
   una seconda selezione. */
@media (hover: hover) {
  .line-option:hover { background: var(--surface-sunken); }
}
.line-option:active { transform: scale(0.985); }
.line-option.active { background: var(--accent-soft); }
.line-badge, .selected-line-badge {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 34px;
  padding: 0 7px;
  color: var(--line-text, #fff);
  background: var(--line-color, #1d4ed8);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 850;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.line-option > span:nth-child(2) { min-width: 0; }
.line-option strong, .line-option small { display: block; }
.line-option strong { font-size: 15px; }
.line-option small { margin-top: 3px; overflow: hidden; color: var(--text-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.line-option small b { color: var(--text-3); font-weight: 700; }
.line-option > i { color: var(--text-3); font-style: normal; font-size: 17px; }
.line-option.active > i { color: var(--accent); font-weight: 800; }

.direction-legend { display: flex; gap: 15px; padding: 10px 3px 5px; color: var(--text-2); font-size: 10px; }
.direction-legend span { display: flex; gap: 5px; align-items: center; }
.direction-legend i, .line-directions i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.direction-zero { background: #087ff5; }
.direction-one { background: #f06b31; }

/* Il minifooter. Due informazioni sole e sempre le stesse: quante cose si
   vedono e se i dati arrivano. Il resto sta dentro e si chiede toccandolo —
   stesso gesto del foglio del mezzo, per la stessa cosa. */
.status-card { position: relative; z-index: 2; margin-top: var(--sp-3); padding-top: var(--sp-1); border-top: 1px solid var(--border-soft); }
/* Alta 44px come tutto il resto che si tocca. A 34 era la riga piu' stretta
   dell'app, ed era anche l'unica sempre presente. */
.status-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-1);
  background: none;
  border: 0;
  border-radius: var(--raggio-2);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.status-line strong { color: var(--text); font-size: var(--t-2); font-weight: var(--peso-medio); letter-spacing: -.01em; }
/* Il fondo acceso solo dove esiste un puntatore. Su un telefono il :hover si
   attacca al tocco e non se ne va piu' finche' non si tocca altrove: la riga
   restava grigia sotto il footer aperto, e sembrava selezionata. */
@media (hover: hover) {
  .status-line:hover { background: var(--surface-sunken); }
}
.status-line:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
/* La freccia dice che c'e' dell'altro sotto, e gira quando e' aperto. Chiusa
   punta in giu': il contenuto compare sotto questa riga, non sopra. Era al
   contrario, e invitava a cercare qualcosa che non c'era da quella parte. */
.status-line > i { width: 7px; height: 7px; margin-right: var(--sp-1); border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg) translate(-1px, -1px); transition: transform 200ms ease; }
.status-line[aria-expanded="true"] > i { transform: rotate(-135deg) translate(-2px, -2px); }

.status-more { display: grid; padding-bottom: var(--sp-1); }
/* Respiro sopra e sotto, uguale. Senza il padding in alto la riga cominciava
   a zero pixel dal bordo del fondo acceso della riga dello stato: attaccata. */
.status-more .updated-line { padding: var(--sp-3) var(--sp-1); color: var(--text-2); font-size: var(--t-1); }
/* Righe alte quanto un dito e separate da un filo, come l'elenco delle linee
   nelle pagine: e' la stessa cosa — un elenco di posti dove andare — e va letta
   allo stesso modo. Prima erano una fila di scritte da dieci pixel e mezzo. */
.footer-links { display: grid; }
.footer-links > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-1);
  border-top: 1px solid var(--border-soft);
  color: var(--text);
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color 140ms ease;
}
.footer-links > a em { color: var(--text-3); font-size: var(--t-3); font-style: normal; line-height: 1; }
.footer-links > a:hover { color: var(--accent); }
.footer-links > a:hover em { color: var(--accent); }
.status-more .disclaimer { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-1) 0; border-top: 1px solid var(--border-soft); color: var(--text-3); font-size: var(--t-0); line-height: 1.55; text-wrap: pretty; }
/* L'ultima riga: privacy in piccolo a sinistra, la firma a destra, ai due capi
   della stessa riga. */
.maker-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-1) 0; }
.maker-privacy { color: var(--text-3); font-size: var(--t-0); text-decoration: none; white-space: nowrap; transition: color 140ms ease; }
.maker-privacy:hover { color: var(--accent); }
.maker-credit { color: var(--text-2); font-size: var(--t-0); font-weight: var(--peso-medio); text-decoration: none; white-space: nowrap; transition: color 140ms ease; }
.maker-credit:hover { color: var(--accent); }
/* Compare solo quando quasi nessun mezzo dichiara la linea — a tarda sera la
   mappa è tutta punti interrogativi, e senza qualcosa che lo spieghi sembra
   rotta. Ha il colore dell'avviso, non quello dell'errore: non è un guasto. */
.map-toast {
  position: absolute;
  z-index: 960;
  top: 18px;
  /* Si centra nella mappa libera, cioè quella che resta dopo il pannello e il
     pulsante della spiegazione: senza contarli finirebbe sopra il pulsante. */
  left: calc((var(--panel-right) + 72px + 100vw) / 2);
  transform: translateX(-50%);
  width: min(430px, calc(100vw - var(--panel-right) - 108px));
  padding: 12px 38px 12px 14px;
  background: var(--surface-raised);
  border-left: 3px solid var(--warn);
  border-radius: 4px 13px 13px 4px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  /* bottom nella transizione perche' su telefono l'avviso segue il pannello:
     quando la card sale o scende, l'avviso ci scivola sopra insieme. */
  transition: transform 220ms ease, opacity 220ms ease, bottom 220ms ease;
}
.map-toast[hidden] { display: none; }
.map-toast p { color: var(--text-1); font-size: 12.5px; line-height: 1.5; text-wrap: pretty; }
.map-toast > a { display: inline-block; margin-top: 6px; color: var(--accent); font-size: 12px; font-weight: 650; text-decoration: none; }
.map-toast > a:hover { text-decoration: underline; }
/* 44px di bersaglio con un segno più piccolo dentro: si chiude col pollice
   senza dover mirare. */
.map-toast-close {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  touch-action: manipulation;
}
.map-toast-close::before,
.map-toast-close::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 13px;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
}
.map-toast-close::before { transform: rotate(45deg); }
.map-toast-close::after { transform: rotate(-45deg); }
.map-toast-close:hover { color: var(--text-1); }
.map-toast-close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-radius: 10px; }
.map-message {
  position: absolute;
  z-index: 900;
  left: calc(50% + 170px);
  bottom: 28px;
  transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 420px));
  padding: 10px 14px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-size: 12px;
  transition: opacity 180ms ease;
  backdrop-filter: blur(12px);
}
.map-message.hidden { opacity: 0; pointer-events: none; }

/* Comandi impilati sopra la mappa. Lo zoom di MapLibre finisce a ~70px: senza
   questo stacco i pulsanti sembrerebbero altri tasti di quel gruppo. */
.map-controls {
  position: absolute;
  z-index: 950;
  top: 104px;
  right: 10px;
  display: grid;
  gap: 8px;
  justify-items: end;
}
.location-control { position: relative; }
/* 44px e non 42: è la misura minima di tocco delle linee guida Apple, e questi
   comandi si usano col pollice mentre si cammina. */
.location-button, .theme-button, .mode-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--accent);
  background: var(--surface-raised);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.theme-button { color: var(--text-2); }
.location-button:hover, .theme-button:hover { color: var(--accent-hover); }
.location-button:active, .theme-button:active { transform: scale(.96); }
.location-button:focus-visible, .theme-button:focus-visible { box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-md); }
.location-button svg, .theme-button svg { width: 20px; height: 20px; fill: currentColor; }
.location-button.active { color: var(--on-accent); background: var(--accent); }
.location-button.loading svg { display: none; }
.location-button.loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--accent-ring); border-top-color: var(--accent); border-radius: 50%; animation: location-spin 700ms linear infinite; }
@keyframes location-spin { to { transform: rotate(360deg); } }

/* Sta a sinistra, da solo, alla stessa altezza della pila di destra: quelli
   comandano la mappa, questo spiega cosa ci vedi sopra. Tenerlo separato lo
   rende leggibile invece di farlo sembrare il quarto tondino di una fila. */
.map-info {
  position: absolute;
  z-index: 950;
  /* Allineato al bordo alto del pannello, non appeso a mezz'aria: il pannello
     parte da 18px e questo parte con lui. Il calcolo a sinistra ripete la
     geometria del pannello per appoggiarsi al primo pezzo di mappa davvero
     visibile invece di finirgli sotto. Su telefono il pannello sta in basso e
     si torna al margine (media query in fondo). */
  top: 18px;
  left: calc(var(--panel-right) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  /* Rosso e non grigio: è l'unico comando che non regola la mappa ma avverte
     che quello che vedi va letto con criterio. Deve farsi notare. */
  color: var(--danger);
  background: var(--surface-raised);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  touch-action: manipulation;
  transition: color 150ms ease, transform 150ms ease;
}
.map-info svg { width: 20px; height: 20px; fill: currentColor; }
.map-info:hover { filter: brightness(1.12); }
.map-info:active { transform: scale(.96); }
.map-info:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-md); }

/* Sotto l'info, stessa colonna e stessa forma, ma grigio invece che rosso:
   l'info avverte, questo invita. Il top somma i 44 dell'info e un gap. */
.map-feedback {
  position: absolute;
  z-index: 950;
  top: calc(18px + 44px + var(--sp-2));
  left: calc(var(--panel-right) + 14px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--text-2);
  background: var(--surface-raised);
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transition: color 150ms ease, transform 150ms ease;
}
.map-feedback svg, .map-info svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
@media (hover: hover) { .map-feedback:hover { color: var(--text); } }
.map-feedback:active { transform: scale(.96); }
.map-feedback:focus-visible { box-shadow: 0 0 0 4px var(--accent-ring), var(--shadow-md); }

/* Il foglio del feedback e' l'unico posto dell'app con uno sfondo scuro dietro:
   scrivere chiede di fermarsi, e lo sfondo lo dice. Centrato su desktop, dal
   basso su telefono (in fondo al file). */
.sheet-backdrop { position: fixed; inset: 0; z-index: 1150; background: rgba(0, 0, 0, .5); animation: backdrop-in 160ms ease; }
.sheet-backdrop[hidden] { display: none; }
@keyframes backdrop-in { from { opacity: 0; } }
.feedback-sheet {
  position: fixed;
  z-index: 1200;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 36px));
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: var(--sp-5);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--raggio-3);
  box-shadow: var(--shadow-lg);
  animation: sheet-in 180ms ease-out;
}
.feedback-sheet[hidden] { display: none; }
/* Il margine destro del titolo lascia il posto alla × in alto a destra. */
.feedback-sheet h2 { margin: 0 var(--sp-6) var(--sp-1) 0; color: var(--text); font-size: var(--t-4); font-weight: var(--peso-forte); letter-spacing: -.02em; }
.feedback-intro { margin: 0 0 var(--sp-4); color: var(--text-2); font-size: var(--t-2); line-height: 1.5; text-wrap: pretty; }
/* Le tre scelte occupano la riga in parti uguali, come un segmentato. La scelta
   accesa prende l'inchiostro, come le pastiglie del mezzo. */
.feedback-cats { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.feedback-cat {
  flex: 1;
  min-height: 40px;
  padding: 0 var(--sp-1);
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--raggio-2);
  font: inherit;
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: -.01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 140ms ease, background 140ms ease;
}
.feedback-cat[aria-checked="true"] { color: var(--primary-ink); background: var(--primary); }
.feedback-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.feedback-text {
  display: block;
  width: 100%;
  min-height: 104px;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--raggio-2);
  font: inherit;
  /* Sedici pixel, non quattordici: sotto questa soglia Safari su iPhone, al
     tocco per scrivere, zumma sul campo e il foglio sembra ingrandirsi da solo.
     A sedici il tocco non fa piu' scattare lo zoom. E' lo stesso motivo per cui
     la casella di ricerca sta a sedici. */
  font-size: var(--t-3);
  line-height: 1.5;
  resize: vertical;
}
.feedback-text::placeholder { color: var(--text-3); }
.feedback-text:focus { outline: none; background: var(--surface-solid); border-color: var(--accent-ring); box-shadow: 0 0 0 4px var(--accent-ring-soft); }
.feedback-send {
  display: block;
  width: 100%;
  min-height: 48px;
  color: var(--primary-ink);
  background: var(--primary);
  border: 0;
  border-radius: var(--raggio-2);
  font: inherit;
  font-size: var(--t-2);
  font-weight: var(--peso-forte);
  letter-spacing: -.01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 140ms ease;
}
.feedback-send:hover { background: var(--primary-hover); }
.feedback-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.feedback-note { margin: var(--sp-3) 0 0; color: var(--text-3); font-size: var(--t-0); line-height: 1.45; text-align: center; text-wrap: pretty; }
/* Quando il ripiego copia il messaggio negli appunti la nota smette di essere
   un sussurro: e' l'unica cosa che dice che il messaggio non e' andato perso. */
.feedback-note-copiato { color: var(--text); font-size: var(--t-1); font-weight: var(--peso-medio); }

.theme-button svg { display: none; }
.theme-button[data-mode="system"] .icon-system,
.theme-button[data-mode="light"] .icon-light,
.theme-button[data-mode="dark"] .icon-dark { display: block; }
/* Il tasto degli orari eredita .theme-button per forma e ombra, ma quella
   nasconde tutti gli svg per mostrare solo l'icona del tema attivo — e cosi'
   restava un quadrato bianco vuoto. Stessa specificita', quindi vale l'ordine:
   questa riga deve stare dopo. */

/* I mezzi della rete precedente escono di scena mentre arriva l'altra: senza
   questa dissolvenza il cambio è uno scatto, con dentro un istante di mappa
   vuota che sembra un errore. */
body.mode-changing .vehicle-wrap { opacity: 0; }

.location-popover {
  position: absolute;
  top: 0;
  right: 54px;
  width: min(292px, calc(100vw - 76px));
  padding: 17px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px) saturate(1.15);
  animation: location-popover-in 160ms ease-out;
}
@keyframes location-popover-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
.location-popover strong { display: block; color: var(--text); font-size: 15px; letter-spacing: -.015em; }
.location-popover p { margin-top: 7px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.location-popover button { border: 0; cursor: pointer; touch-action: manipulation; }
.location-confirm { width: 100%; min-height: 40px; margin-top: 14px; color: var(--on-accent); background: var(--accent); border-radius: 11px; font-size: 12px; font-weight: 780; }
.location-cancel { display: block; margin: 9px auto 0; padding: 3px 8px; color: var(--text-2); background: transparent; font-size: 11px; }

.user-location-marker { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(8, 127, 245, .18); box-shadow: 0 0 0 1px rgba(8, 127, 245, .12); }
.user-location-marker::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(8, 127, 245, .28); border-radius: 50%; animation: user-location-pulse 2.2s ease-out infinite; }
.user-location-marker span { position: relative; width: 15px; height: 15px; background: #087ff5; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(22, 61, 109, .35); }
@keyframes user-location-pulse { 0% { opacity: .9; transform: scale(.5); } 75%, 100% { opacity: 0; transform: scale(1.2); } }

.vehicle-sheet {
  position: fixed;
  z-index: 1100;
  right: 18px;
  bottom: 18px;
  width: min(380px, calc(100vw - 36px));
  padding: 19px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 23px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(22px) saturate(1.2);
  animation: sheet-in 180ms ease-out;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
/* La maniglia esiste solo dove la scheda è ancorata al bordo: su desktop è una
   scheda flottante e una maniglia da trascinare sarebbe un invito falso. */
.sheet-handle { display: none; }
.sheet-close { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--text-2); background: var(--surface-sunken); border: 0; border-radius: 50%; cursor: pointer; }
.sheet-close::before, .sheet-close::after { content: ""; grid-area: 1 / 1; width: 12px; height: 1.5px; background: currentColor; border-radius: 999px; }
.sheet-close::before { transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.vehicle-heading { display: flex; gap: 12px; align-items: center; padding-right: 32px; }
.selected-line-badge { min-width: 53px; height: 48px; color: #fff; background: #1d4ed8; font-size: 19px; }
.vehicle-heading small { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.vehicle-heading h2 { margin-top: 3px; font-size: 17px; letter-spacing: -.02em; }
.selected-route-name { margin-top: 3px; overflow: hidden; color: var(--text-3); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-details { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 17px 0; }
.vehicle-details > div { padding: 11px; background: var(--surface-sunken); border-radius: 12px; }
/* Con un numero dispari di voci l'ultima occupa la riga intera, invece di
   lasciare un mezzo vuoto accanto a sé. */
.vehicle-details > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.vehicle-details dt { color: var(--text-2); font-size: 11.5px; }
.vehicle-details dd { margin: 3px 0 0; color: var(--text); font-size: 13.5px; font-weight: 750; }
.position-note { margin: -7px 2px 13px; color: var(--text-3); font-size: 10.5px; line-height: 1.4; }
/* L'ipotesi va letta come tale: colore d'avviso, non tono neutro da dato certo. */
.guess-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  color: var(--note-text);
  background: var(--note-bg);
  border-left: 3px solid var(--note-border);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.5;
}
.follow-button { width: 100%; min-height: 44px; color: var(--on-accent); background: var(--accent); border: 0; border-radius: 13px; font-size: 13px; font-weight: 750; cursor: pointer; transition: 140ms ease; }
.follow-button:active { transform: scale(.985); }
.follow-button.active { color: var(--accent-deep); background: var(--accent-soft); }

.vehicle-icon { width: 46px; height: 46px; padding: 0; background: transparent; border: 0; outline: 0; cursor: pointer; }
.vehicle-icon:focus-visible .vehicle-circle { box-shadow: 0 0 0 6px var(--accent-ring), 0 7px 18px rgba(23, 35, 48, .38), inset 0 0 0 1px var(--marker-ring); }
.vehicle-wrap { position: relative; width: 46px; height: 46px; display: grid; place-items: center; transition: opacity 180ms ease, filter 180ms ease; }
.vehicle-bearing { position: absolute; inset: 1px; transform: rotate(var(--bearing)); transition: transform 400ms ease; }
.vehicle-bearing::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--direction-color);
  border-left: 5px solid transparent;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(23, 35, 48, .24));
}
.vehicle-circle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 3px;
  color: var(--line-text);
  background: var(--line-color);
  border: 3px solid var(--direction-color);
  border-radius: 50%;
  box-shadow: 0 4px 11px rgba(23, 35, 48, .3), inset 0 0 0 1px var(--marker-ring);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.vehicle-circle.line-small { font-size: 11px; }
.vehicle-circle.line-compact { font-size: 9px; letter-spacing: -.06em; }
.vehicle-icon.is-selected { z-index: 1000 !important; }
.vehicle-icon.is-selected .vehicle-circle { transform: scale(1.15); box-shadow: 0 0 0 6px var(--accent-ring), 0 7px 18px rgba(23, 35, 48, .38), inset 0 0 0 1px var(--marker-ring); }
.freshness-recent { opacity: .82; }
.freshness-stale { opacity: .45; filter: grayscale(.75); }

.maplibregl-popup-content { padding: 7px 9px; color: var(--text); background: var(--surface-raised); border-radius: 9px; box-shadow: var(--shadow-sm); font-size: 11px; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface-raised); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface-raised); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface-raised); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface-raised); }
.maplibregl-ctrl-top-right { margin: 8px 8px 0 0; }
.maplibregl-ctrl-group { border: 0 !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; }
.maplibregl-ctrl-group button { background: var(--surface-raised); }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--border-soft); }
/* Le icone dello zoom sono immagini nere incorporate nel CSS di MapLibre:
   sul tema scuro vanno invertite, non ricolorate. */
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
.maplibregl-ctrl-attrib { font-size: 9px; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib { background: var(--surface-raised) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--text-2); }

@media (max-width: 700px) {
  /* Stesso comportamento della scheda mezzo: foglio ancorato al bordo con
     maniglia. Tre altezze invece di due, come nei fogli di sistema — peek per
     lasciare la mappa libera, media per l'uso normale, estesa per scorrere
     l'elenco senza combattere con una finestrella. */
  /* Stesso meccanismo della scheda del mezzo: il pannello ha un'altezza sola e
     scorre sotto il bordo con transform. Animare height lascia il valore
     bloccato sull'ultimo calcolato; transform no, ed è pure compositato. */
  .control-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: 100vw;
    /* Ripiego alla posizione di riposo, non al massimo: il codice parte dopo
       aver caricato lo stile della mappa, e fino ad allora vale questo. Al 90%
       si vedeva il foglio nascere spalancato e poi scattare a metà.
       dvh e non vh perché su iOS vh ignora le barre di Safari. */
    height: 50dvh;
    /* 12px in cima per ospitare l'area di tocco della maniglia, che overflow
       hidden taglierebbe se sconfinasse sopra il bordo del pannello. */
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }
  /* La barra di stato è una sezione fissa, ancorata al fondo del pannello:
     resta al suo posto per costruzione, senza compensare traslazioni, e non
     scivola mai sopra l'elenco. Lo spazio glielo riserva il padding. */
  .control-panel { padding-bottom: calc(var(--footer-h, 92px) + env(safe-area-inset-bottom)); }
  /* Qui il pannello non e' una colonna a sinistra ma un foglio in basso: la
     mappa libera e' tutta la larghezza, e le pastiglie tornano al centro vero.
     Senza questo il conto di --panel-right le spingerebbe fuori a destra.
     Lasciano 62px per lato: a sinistra ci vuole l'info (8+46) piu' un dito
     d'aria, a destra lo zoom. Sui telefoni normali il contenuto non arriva a
     tanto; sotto i 340px le pastiglie si stringono invece di finire sotto
     l'info. */
  .mode-row { left: 50%; max-width: calc(100% - 124px); }
  .status-card {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--surface-opaque);
  }
  /* Al peek restano intestazione e ricerca: l'elenco sparisce e la barra di
     stato è già scesa sotto il bordo, quindi lo spazio riservato non serve. */
  .control-panel.collapsed { bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* Le schede restano anche al peek: hanno preso il posto del titolo, e sono
     l'unica cosa che dice quale rete stai guardando. Nasconderle lascerebbe il
     pannello alto quanto prima ma con dentro un buco, e in quel buco
     ricomparirebbe la barra di stato che invece deve uscire di scena. */
  /* Identica alla barretta della scheda mezzo: 38x4. È un pulsante vero perché,
     tolto il chevron, senza di esso non resterebbe alcun modo di aprire il
     foglio da tastiera o con VoiceOver. */
  /* La maniglia e' larga quanto il pannello, ma si vede solo la barretta al
     centro: il gesto si prende ovunque sopra l'intestazione, non solo se ci si
     azzecca con il pollice sui 38px centrali. */
  button.panel-handle {
    display: block;
    position: relative;
    /* Il pannello e' un flex in colonna: senza questo la maniglia, alta 5px,
       viene schiacciata a zero da flex-shrink ogni volta che il contenuto non
       ci sta. E' questo il motivo per cui spariva a intermittenza — dipendeva
       da quante linee erano in elenco, non dal caso. */
    flex: 0 0 auto;
    width: 100%;
    height: 5px;
    padding: 0;
    background: transparent;
    border: 0;
    appearance: none;
    touch-action: none;
    cursor: grab;
  }
  button.panel-handle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 42px;
    height: 5px;
    margin-left: -21px;
    background: var(--grabber);
    border-radius: 999px;
  }
  /* Area di tocco 178x44: i 44 punti sono il minimo richiesto dalle linee guida
     Apple. Asimmetrica verso il basso perché sopra c'è il bordo del pannello,
     e sotto si sovrappone all'intestazione, che è comunque zona di gesto. */
  button.panel-handle::before { content: ""; position: absolute; inset: -14px -18px -29px; }
  button.panel-handle:focus-visible { outline: none; }
  button.panel-handle:focus-visible::before { border-radius: 999px; box-shadow: 0 0 0 3px var(--accent-ring); }
  .control-panel .promise { touch-action: none; }
  /* Il chevron non serve più: la maniglia fa lo stesso lavoro, ed è il gesto
     che la gente si aspetta su un foglio. Resta su desktop, dove non c'è. */
  .panel-toggle { display: none; }
  .panel-toggle { top: 14px; right: 8px; width: 40px; height: 40px; }
  /* Niente padding a destra: quei 43px riservavano il posto alla freccia,
     che su telefono non c'e' (c'e' la maniglia). Erano un ottavo della
     larghezza del titolo, tolti a una riga che va gia' stretta. */
  .promise { margin: 0 2px 10px; }
  .promise strong { font-size: 13px; }
  .promise h1 { font-size: 14px; }
  .promise span { font-size: 11px; }
  .search-field { min-height: 44px; }
  /* min-height: 0 e non 80px. Su una pagina di linea l'intestazione e' piu'
     alta e allo spazio rimasto gli 80px non bastavano: il flex non poteva
     stringere l'elenco sotto il minimo, e quello sbordava di una quarantina di
     pixel dentro la fascia riservata al footer. Il footer e' rientrato di 14px
     per lato, e in quei due corridoi si vedevano le righe scorrergli dietro. */
  .line-list { min-height: 0; margin-top: 7px; }
  .line-option { padding: 7px 6px; }
  /* Il margine superiore vale nel flusso; qui la barra e' ancorata al fondo e
     lo spazio glielo fa il padding del pannello. */
  .status-card { margin-top: 0; padding-top: var(--sp-1); }
  .direction-legend { display: none; }
  .map-message { left: 50%; bottom: calc(var(--panel-visible, 390px) + 16px); max-width: calc(100vw - 24px); white-space: normal; text-align: center; }
  .map-controls { top: max(92px, calc(env(safe-area-inset-top) + 92px)); right: 8px; gap: 9px; }
  /* In alto a sinistra, in fila con le pastiglie e lo zoom della mappa, non 80
     pixel piu' in basso da solo. Stesso top delle pastiglie (12px), cosi' i tre
     stanno sulla stessa riga: info a sinistra, scelta del mezzo al centro,
     zoom a destra. */
  .map-info { top: 12px; left: 8px; width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 6px 18px rgba(31, 44, 61, .22); }
  .map-info svg { width: 23px; height: 23px; }
  /* Sotto l'info, nella colonna di sinistra: la fila in alto e' occupata da
     info, pastiglie e zoom, e questo scende di una riga. */
  .map-feedback { top: calc(12px + 46px + var(--sp-2)); left: 8px; width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 6px 18px rgba(31, 44, 61, .22); }
  .map-feedback svg, .map-info svg { width: 23px; height: 23px; }
  /* Appena sopra la card, non in cima alla mappa: cosi' l'avviso sta dove sta
     l'attenzione — sul pannello — e non resta sospeso lontano da tutto. Segue
     la card a ogni detent tramite --panel-visible, la stessa altezza che usa il
     messaggio della mappa, con un dito di stacco. A riposo galleggia in alto
     sulla mappa libera; a meta' sta appena sopra il bordo della card. */
  .map-toast {
    top: auto;
    bottom: calc(var(--panel-visible, 390px) + 12px);
    left: 8px;
    right: 8px;
    width: auto;
    transform: none;
    padding: 11px 36px 11px 12px;
  }
  /* Alzata la card fino in fondo, la mappa non si vede piu' e l'avviso, spinto
     sopra il bordo, sbucherebbe in cima sovrapposto ai comandi. Li' non serve:
     sparisce con la mappa che racconta. */
  body.panel-full .map-toast { display: none; }
  /* Su mobile questi sono gli unici bersagli touch nella mappa: 46px sta sopra
     la soglia dei 44px raccomandata, e l'ombra più marcata li stacca dalle tile. */
  .location-button, .theme-button { width: 46px; height: 46px; border-radius: 14px; box-shadow: 0 6px 18px rgba(31, 44, 61, .22); }
  .location-button svg, .theme-button svg { width: 23px; height: 23px; }
  .location-popover { top: 52px; right: 0; width: min(292px, calc(100vw - 20px)); }
  /* Su telefono le informazioni della linea escono da sotto, come gli altri fogli. */
  /* Sul telefono sale dal basso come il foglio del mezzo, e come quello copre il
     pannello: un foglio alla volta, e si torna indietro chiudendolo. */
  body.line-info-open #line-page-static {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 72dvh;
    /* In cima resta poco spazio per la barretta di trascinamento; ai lati e in
       fondo l'aria e' quella del foglio su desktop. */
    padding: 10px var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    animation: sheet-up 260ms cubic-bezier(.32, .72, 0, 1);
  }
  /* La barretta e' disegnata dal foglio, non scritta nel contenuto: cosi' non
     va aggiunta in due punti, nel render del server e in quello del client. */
  body.line-info-open #line-page-static::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 12px;
    background: var(--grabber);
    border-radius: 999px;
  }
  body.line-info-open #line-page-static {
    touch-action: none;
    transition: transform 220ms cubic-bezier(.32, .72, 0, 1);
  }
  body.line-info-open .control-panel { visibility: hidden; }
  .panel-collapsed .map-message { bottom: 152px; }
  /* Il foglio del feedback sale dal basso come gli altri, a tutta larghezza. */
  .feedback-sheet {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: auto;
    max-height: 90dvh;
    padding: var(--sp-5) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    animation: sheet-up 260ms cubic-bezier(.32, .72, 0, 1);
  }
  /* Ancorata al bordo inferiore come nelle mappe di sistema: raggiungibile col
     pollice, e lo scorrimento verso il basso per chiudere è un gesto noto. */
  .vehicle-sheet {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 10px 17px calc(17px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
    touch-action: none;
    animation: sheet-up 260ms cubic-bezier(.32, .72, 0, 1);
    transition: transform 220ms cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  .sheet-handle {
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 10px;
    background: var(--grabber);
    border-radius: 999px;
  }
  .sheet-close { top: 16px; right: 14px; }
  .vehicle-selected .control-panel { visibility: hidden; }
  .vehicle-details { gap: 7px; }
  .maplibregl-ctrl-top-right { margin: max(2px, env(safe-area-inset-top)) 2px 0 0; }
}

/* Navigazione della mappa --------------------------------------------------
   Su desktop non e' una card in mezzo allo schermo ma la parte stabile
   dell'app: una colonna pulita, senza la cornice da "widget". */
.mobile-map-nav, .mobile-nav-scrim { display: none; }

@media (min-width: 1025px) {
  :root { --panel-right: 336px; }
  .control-panel {
    top: 0;
    bottom: 0;
    left: 0;
    width: 336px;
    max-width: 336px;
    padding: 24px 18px 14px;
    background: var(--surface-opaque);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(1.15);
  }
  .panel-toggle { display: none; }
  .promise { display: none; }
  .search-row { margin-bottom: 8px; }
  .line-list { margin-top: 8px; }
}

@media (max-width: 1024px) {
  /* La rail e' attaccata al bordo e arriva a entrambi i margini: non e' una
     card sopra una mappa, e' la navigazione dell'app che contiene la mappa. */
  .mobile-map-nav {
    position: fixed;
    z-index: 1100;
    top: 0;
    left: 0;
    bottom: 0;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
    color: var(--text);
    background: var(--surface-opaque);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(20px) saturate(1.15);
  }
  .mobile-nav-brand, .mobile-nav-search, .mobile-nav-info, .mobile-nav-feedback, .mobile-nav-status {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mobile-nav-brand img { width: 34px; height: 30px; object-fit: contain; }
  .mobile-nav-search {
    color: var(--text-2);
    background: var(--surface-sunken);
  }
  .mobile-nav-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
  .mobile-line-rail {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 44px;
    min-height: 0;
    padding: 9px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }
  .mobile-line-rail::-webkit-scrollbar { display: none; }
  .mobile-line-chip { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; background: transparent; border: 0; cursor: pointer; touch-action: manipulation; }
  .mobile-line-chip span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0 3px;
    color: var(--line-text, #fff);
    background: var(--line-color, var(--accent));
    border-radius: 10px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .13);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: -.04em;
  }
  .mobile-line-chip.active span { box-shadow: 0 0 0 3px var(--accent-ring), inset 0 -2px 0 rgba(0, 0, 0, .13); transform: scale(1.04); }
  .mobile-nav-feedback { color: var(--text-2); }
  .mobile-nav-feedback svg, .mobile-nav-info svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
  .mobile-nav-info { color: var(--text-2); text-decoration: none; }
  .mobile-nav-status { gap: 4px; margin-top: 4px; padding-top: 10px; color: var(--text); border-top: 1px solid var(--border-soft); border-radius: 0; font-size: 12px; }
  .mobile-nav-status .feed-dot { width: 8px; height: 8px; }
  .mobile-nav-status b { font-size: 12px; font-weight: 780; }
  .mobile-nav-status:focus-visible, .mobile-nav-brand:focus-visible, .mobile-nav-search:focus-visible, .mobile-nav-info:focus-visible, .mobile-nav-feedback:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

  /* Il menu vero e' laterale: lascia intravedere la mappa e puo' contenere
     l'elenco completo senza chiedere di trascinare un foglio verso l'alto. */
  .control-panel {
    z-index: 1300;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(86vw, 360px) !important;
    max-width: min(86vw, 360px) !important;
    height: 100dvh !important;
    padding: calc(62px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom)) !important;
    background: var(--surface-opaque);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 16px 0 42px rgba(20, 32, 50, .22);
    transform: translateX(-100%) !important;
    transition: transform 260ms cubic-bezier(.32, .72, 0, 1) !important;
    visibility: visible !important;
    will-change: transform;
  }
  .control-panel.mobile-nav-open { transform: translateX(0) !important; }
  .control-panel .panel-handle { display: none; }
  /* La chiusura e' sempre visibile. Tocco fuori e swipe restano comodi, ma
     non possono essere l'unico modo per uscire dal menu. */
  .control-panel .panel-toggle {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--text-2);
    background: var(--surface-sunken);
    border-radius: 12px;
  }
  .control-panel .panel-toggle::before {
    width: 16px;
    height: 16px;
    margin: 0;
    border: 0;
    background: linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
    transform: none;
  }
  .control-panel .promise { display: none; }
  .control-panel .status-card {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: var(--sp-3);
    padding-top: var(--sp-1);
    background: transparent;
  }
  .control-panel .line-list { min-height: 0; margin-top: 8px; }
  .control-panel .direction-legend { display: flex; }
  .mobile-nav-scrim {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(16, 25, 37, .26);
    border: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }
  body.mobile-nav-open .mobile-nav-scrim { opacity: 1; pointer-events: auto; }
  body.mobile-nav-open .mobile-map-nav { opacity: 0; pointer-events: none; }

  /* La mini-nav ha gia' guida e feedback: sulla mappa non replichiamo due
     pulsanti. In alto restano soltanto rete e controlli cartografici. */
  .mode-row { top: calc(10px + env(safe-area-inset-top)); max-width: calc(100% - 148px); }
  .map-info, .map-feedback { display: none; }
  .map-controls { top: calc(10px + env(safe-area-inset-top)); }
  .map-message { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}