:root {
  --sfondo: #10151c;
  --pannello: #182029;
  --testo: #eef2f6;
  --tenue: #9aa7b4;
  --giallo: #d4a017;
  --rosso: #c0392b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--sfondo);
  color: var(--testo);
}

/* Colore di fondo esplicito, non solo la trasparenza di default: se lo
   sfondo stradale non si carica (file .pmtiles assente o irraggiungibile,
   si veda avviaStratoStradale() in app.js), la mappa non deve diventare
   un rettangolo bianco che sembra rotto - resta scura, coerente col resto
   dell'interfaccia, mentre il radar e l'allarme continuano a funzionare
   sopra di essa. */
#mappa { position: fixed; inset: 0; background: var(--sfondo); }

.pannello {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--pannello) 94%, transparent);
  border-top: 1px solid #2a3542;
}

@media (min-width: 720px) {
  .pannello {
    right: auto;
    bottom: 16px;
    left: 16px;
    width: 380px;
    max-height: calc(100vh - 32px);
    border: 1px solid #2a3542;
    border-radius: 12px;
  }
}

.riga { display: flex; gap: 8px; }

input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: #0e1319;
  border: 1px solid #2a3542;
  border-radius: 8px;
}

button {
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: #24303c;
  border: 1px solid #35424f;
  border-radius: 8px;
  cursor: pointer;
}

button:hover { background: #2c3a48; }

.risultati { margin: 8px 0 0; padding: 0; list-style: none; }

.risultati li {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.risultati li:hover, .risultati li[aria-selected="true"] { background: #24303c; }

.risultati .provincia { color: var(--tenue); font-size: 0.86em; }

details { margin-top: 12px; }
summary { cursor: pointer; padding: 6px 0; }
details label { display: block; margin: 12px 0; font-size: 0.92em; }
input[type="range"] { width: 100%; margin-top: 6px; }
output { font-weight: 600; }

.esito { margin: 12px 0 8px; font-size: 0.92em; color: var(--tenue); }

.banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  /* La scorciatoia a tre valori e' top | destra-sinistra | basso: qui
     serve l'inset del notch in ALTO (il banner e' ancorato in cima, con
     viewport-fit=cover), non in basso. .pannello (ancorato in basso) fa
     la cosa giusta col suo inset-bottom: e' lo stesso pattern, con
     l'inset sul lato giusto per la sua posizione. */
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  font-weight: 600;
  text-align: center;
}

.banner.nascosto { display: none; }
.banner.preavviso { background: var(--giallo); color: #1a1200; }
.banner.allarme { background: var(--rosso); color: #fff; }
/* Ne' verde (nascosto) ne' rosso/giallo: un dato vecchio non e' una
   valutazione, e' l'assenza di una. Un colore neutro, distinto da
   entrambi, per non far credere che sia comunque un giudizio. */
.banner.vecchio { background: #3a4552; color: var(--testo); }

/* Il banner e' largo quanto la pagina e ancorato in alto: senza questo,
   copre i controlli di zoom di Leaflet (anch'essi in alto a sinistra di
   default) mentre un allarme e' attivo. body.banner-attivo e' impostata
   da app.js in valutaEMostra(), assieme alle classi del banner stesso.

   L'altezza del banner NON e' un numero fisso: cambia con l'inset del
   notch (env(safe-area-inset-top), variabile da dispositivo a
   dispositivo) e con quante righe occupa il testo ("dato non aggiornato"
   va spesso su due righe su uno schermo stretto). Un valore cablato è
   stato provato e ha fallito su piu' di una combinazione delle due (si
   veda residui-finali.md, R2): un notch da 47px con l'allarme "dato non
   aggiornato" porta il banner a 121px, ben oltre qualunque costante
   ragionevole. --banner-altezza e' scritta da app.js con un
   ResizeObserver su #banner, che ne misura l'altezza VERA (offsetHeight:
   contenuto + padding, incluso l'inset) ad ogni cambiamento - non c'e'
   quindi un numero da indovinare qui. 84px resta solo come stima per il
   primissimo istante, prima che l'osservatore giri la prima volta (o su
   un browser senza ResizeObserver, si veda app.js). */
body.banner-attivo .leaflet-top { margin-top: var(--banner-altezza, 84px); }

.stato-dati { margin: 10px 0 0; font-size: 0.84em; color: var(--tenue); }
.stato-dati.vecchio { color: var(--giallo); }

.opacita { display: block; margin-top: 12px; font-size: 0.92em; color: var(--tenue); }

.avviso {
  margin: 10px 0 0;
  padding: 9px 11px;
  font-size: 0.88em;
  color: #1a1200;
  background: var(--giallo);
  border-radius: 8px;
}

.avviso.nascosto { display: none; }

.crediti { margin: 8px 0 0; font-size: 0.75em; line-height: 1.4; color: var(--tenue); }

/* Senza JavaScript la pagina non fa nulla: si spiega perche', invece di
   lasciare uno sfondo scuro vuoto che sembra un guasto. */
.noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 1.1em;
}

/* Sopra qualunque altra cosa in pagina, banner d'allarme compreso: un
   guasto all'avvio (mappa non caricata, avvia() sollevata) non deve
   passare inosservato sotto contenuto che magari e' rimasto a meta'. */
.errore-fatale {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1300;
  /* Come per .banner qui sopra: la scorciatoia a tre valori e'
     top | destra-sinistra | basso. Questo elemento e' ancorato in ALTO
     (viewport-fit=cover), quindi l'inset del notch va nel primo valore,
     non nel terzo - il terzo valore e' quello che un'ondata precedente
     aveva gia' corretto una volta su .banner (si veda il commento li'
     sopra) e che qui, sull'errore-fatale, era tornato sbagliato: proprio
     il messaggio che spiega perche' la pagina non funziona finiva col
     notch nel posto sbagliato. */
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px;
  background: var(--rosso);
  color: #fff;
  font-weight: 600;
  text-align: center;
}