/* Porcini Radar V2 Lazio — strumento da campo.
   Design read: utility per un solo utente nel bosco (sole, guanti, rete zero).
   VARIANZA 3 · MOVIMENTO 1 · DENSITÀ 4. Un accento (petrolio), un raggio (10px),
   font di sistema (rete scarsa: zero webfont da scaricare, scelta deliberata).
   Il gradiente dati giallo→rosso appartiene alla mappa: la UI non lo usa mai. */
:root {
  --fondo: #101314;
  --carta: #1a2022;
  --bordo: #2a3235;
  --testo: #f2efe9;
  --muto: #9aa8ab;
  --accento: #1fa294;
  --accento-scuro: #0c1112;
  --allerta: #e05252;
  --raggio: 10px;
  --tocco: 48px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--testo);
  -webkit-tap-highlight-color: transparent;
}
#mappa { position: fixed; inset: 0; }
#cv-indice { position: fixed; left: -99999px; top: 0; }

/* ---- barra alta: solo il selettore specie ---- */
#alto {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 10px; right: 10px;
  z-index: 20;
  display: flex; gap: 8px; align-items: flex-start;
}
#specie {
  flex: 1;
  display: flex;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
  max-width: 420px;
}
#specie button {
  flex: 1; min-height: var(--tocco);
  border: 0; background: transparent;
  color: var(--muto);
  font: 700 15px/1 system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}
#specie button.attivo { background: var(--accento); color: var(--accento-scuro); }
#btn-menu {
  min-width: var(--tocco); min-height: var(--tocco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--testo);
  font-size: 20px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---- errori: urlati, mai silenzio ---- */
#errore {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 10px; right: 10px;
  z-index: 40;
  background: var(--allerta); color: #fff;
  font: 600 14px/1.35 system-ui, sans-serif;
  padding: 12px 14px;
  border-radius: var(--raggio);
}
/* con la traccia viva, banner ed errori scendono SOTTO la barra: mai sopra
   i comandi pausa/tasca (rilievo collaudatore 31/08: tap che morivano
   sullo stantio proprio quando i dati sono vecchi e sei nel bosco) */
body.con-traccia #errore, body.con-traccia #stantio {
  top: calc(126px + env(safe-area-inset-top));
}
#errore[hidden] { display: none; }

/* dati non aggiornati: dichiarato, mai in silenzio */
#stantio {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 10px; right: 10px;
  z-index: 25;
  background: #7a5a12; color: #fff7e0;
  font: 600 13px/1.4 system-ui, sans-serif;
  padding: 10px 14px;
  border-radius: var(--raggio);
}
#stantio[hidden] { display: none; }

#carico {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 50; background: var(--accento);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s;
}
#carico.attivo { animation: carico 1s ease-in-out infinite alternate; }
@keyframes carico { from { transform: scaleX(0.15); } to { transform: scaleX(0.9); } }

/* ---- basso: giorni + legenda ---- */
#basso {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 20;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(10, 13, 14, 0.82) 34%);
  pointer-events: none;
}
#giorni {
  display: flex; gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  pointer-events: auto;
  padding-bottom: 8px;
}
#giorni::-webkit-scrollbar { display: none; }
#giorni button {
  min-width: 62px; min-height: var(--tocco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  color: var(--muto);
  font: 600 13px/1.2 system-ui, sans-serif;
  cursor: pointer;
  flex: 0 0 auto;
}
#giorni button .gg { display: block; font-size: 11px; font-weight: 500; }
#giorni button.attivo { background: var(--accento); border-color: var(--accento); color: var(--accento-scuro); }
#legenda {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  pointer-events: auto;
  color: var(--muto);
  font: 500 11px/1.3 system-ui, sans-serif;
}
#legenda-nota { flex-basis: 100%; }
#legenda .scala {
  width: 110px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255, 246, 190, 0.2), #fde047, #f99220, #e03131, #7a0a22);
}

/* ---- scheda cella ---- */
#scheda {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  max-height: 72vh;
  background: var(--carta);
  border-top: 1px solid var(--bordo);
  border-radius: var(--raggio) var(--raggio) 0 0;
  transform: translateY(102%);
  transition: transform 0.22s ease-out;
  display: flex; flex-direction: column;
}
#scheda.aperta { transform: translateY(0); }
#scheda-testa {
  display: flex; align-items: center;
  padding: 10px 14px 8px;
  gap: 10px;
  border-bottom: 1px solid var(--bordo);
}
#scheda-testa .indice-grande {
  font: 800 40px/1 system-ui, sans-serif;
  min-width: 74px;
}
#scheda-testa .contesto { flex: 1; min-width: 0; }
#scheda-testa .contesto b { font-size: 15px; display: block; }
#scheda-testa .contesto span { font-size: 12px; color: var(--muto); display: block; margin-top: 2px; }
#scheda-chiudi {
  min-width: var(--tocco); min-height: var(--tocco);
  border: 0; border-radius: var(--raggio);
  background: transparent; color: var(--muto);
  font-size: 26px; cursor: pointer;
}
#scheda-corpo { overflow-y: auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }

.blocco { margin-bottom: 14px; }
.blocco h3 {
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muto); margin-bottom: 8px;
}
.fattore { display: grid; grid-template-columns: 108px 1fr auto; gap: 8px; align-items: center; padding: 5px 0; font-size: 13px; }
.fattore .nome { color: var(--testo); }
.fattore .barra { height: 8px; border-radius: 4px; background: var(--bordo); overflow: hidden; }
.fattore .barra i { display: block; height: 100%; background: var(--accento); border-radius: 4px; }
.fattore .valore { color: var(--muto); font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }
.nota-fattore { font-size: 12px; color: var(--muto); margin: 2px 0 6px; }
.specie-riga {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 14px;
}
.specie-riga:last-child { border-bottom: 0; }
.specie-riga .punto { font: 800 18px/1 system-ui, sans-serif; min-width: 34px; text-align: right; }
.specie-riga .lat { color: var(--muto); font-size: 12px; }
/* RF-10: storico pioggia — barre giornaliere, osservato pieno, modello chiaro */
.pioggia-barre {
  display: flex; align-items: flex-end; gap: 2px;
  height: 56px;
  padding: 4px 0 0;
}
.pioggia-barre i {
  flex: 1 1 0; min-width: 0;
  border-radius: 2px 2px 0 0;
  background: var(--accento);
}
.pioggia-barre i.mod { background: var(--bordo); }
.pioggia-piede {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muto);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.avviso {
  background: rgba(224, 82, 82, 0.14);
  border: 1px solid rgba(224, 82, 82, 0.5);
  border-radius: var(--raggio);
  padding: 10px 12px;
  font-size: 13px; line-height: 1.45;
  margin-bottom: 12px;
}
.avviso.tenue { background: rgba(31, 162, 148, 0.1); border-color: rgba(31, 162, 148, 0.45); }
.piede-scheda { color: var(--muto); font-size: 11px; line-height: 1.5; margin-top: 6px; }

/* ---- pannello menu (normativa, fonti) — stessa grammatica della scheda ---- */
#pannello {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 32;
  max-height: 78vh;
  background: var(--carta);
  border-top: 1px solid var(--bordo);
  border-radius: var(--raggio) var(--raggio) 0 0;
  transform: translateY(102%);
  transition: transform 0.22s ease-out;
  display: flex; flex-direction: column;
}
#pannello.aperto { transform: translateY(0); }
#pannello-testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--bordo);
  font-size: 16px;
}
#pannello-chiudi {
  min-width: var(--tocco); min-height: var(--tocco);
  border: 0; border-radius: var(--raggio);
  background: transparent; color: var(--muto);
  font-size: 26px; cursor: pointer;
}
#pannello-corpo {
  overflow-y: auto;
  padding: 12px 14px calc(16px + env(safe-area-inset-bottom));
  font-size: 14px; line-height: 1.55;
}
#pannello-corpo h3 {
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muto);
  margin: 16px 0 8px;
}
#pannello-corpo h3:first-child { margin-top: 0; }
#pannello-corpo ul { padding-left: 18px; margin: 6px 0; }
#pannello-corpo li { margin: 4px 0; }
#pannello-corpo a { color: var(--accento); }
#pannello-corpo .micro { color: var(--muto); font-size: 12px; }

/* l'attribution (obbligo CC-BY-SA) sta sotto la barra specie, mai coperta */
.maplibregl-ctrl-top-right { top: calc(60px + env(safe-area-inset-top)); }
.maplibregl-ctrl-attrib { font-size: 10px; }
/* guanti: i controlli mappa salgono a 44px */
.maplibregl-ctrl-group button { width: 44px; height: 44px; }

/* bottone sentieri (controllo mappa) */
.maplibregl-ctrl-group button.btn-sentieri { font-size: 19px; }
.maplibregl-ctrl-group button.btn-sentieri.attivo { background: var(--accento); }
.maplibregl-ctrl-group button.btn-livelli,
.maplibregl-ctrl-group button.btn-consiglio { font-size: 19px; }
.maplibregl-ctrl-group button.btn-livelli.attivo { background: var(--accento); }

/* avviso zoom sentieri: NON è un errore, quindi non è rosso. Resta finché
   serve (prima spariva dopo 3,5 s e non tornava: sembrava un guasto). */
#avviso-sentieri {
  position: fixed;
  /* posizione di riposo: sotto la riga di attribuzione della mappa (a 66px la
     copriva). Quando in testa c'e' gia' un banner — traccia, dati vecchi,
     errore — la scende posizionaAvvisoSentieri() in app.js misurando quello
     che c'e' davvero: un `top` fisso finiva SOTTO al banner dati-vecchi e
     lasciava leggibile solo la fine della frase (Major collaudatore 01/09). */
  top: calc(96px + env(safe-area-inset-top));
  left: 10px;
  max-width: 62vw;
  z-index: 19;
  padding: 9px 12px;
  border: 1px solid var(--accento);
  border-radius: var(--raggio);
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  color: var(--testo);
  font: inherit; font-size: 13px; text-align: left;
  cursor: pointer;
}
#avviso-sentieri b { color: var(--accento); }

/* Livelli: il fondo scelto si vede a colpo d'occhio */
.voce-azione.scelto { border-color: var(--accento); }
.voce-azione.scelto > span:first-child::before { content: "● "; color: var(--accento); }

/* popup sentiero: stessa carta del resto */
.maplibregl-popup-content {
  background: var(--carta); color: var(--testo);
  border-radius: var(--raggio);
  font: 500 13px/1.5 system-ui, sans-serif;
  padding: 10px 26px 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.maplibregl-popup-content .micro { color: var(--muto); font-size: 11px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--carta); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--carta); }
.maplibregl-popup-close-button { color: var(--muto); font-size: 18px; width: 26px; height: 26px; }

/* ---- pannello: voci-azione in testa (sentieri, offline, traccia, consiglio) */
.voce-azione {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: var(--tocco);
  margin: 6px 0;
  padding: 8px 12px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--accento-scuro);
  color: var(--testo);
  font: 600 14px/1.3 system-ui, sans-serif;
  cursor: pointer;
  text-align: left;
}
.voce-azione .stato { color: var(--muto); font-weight: 500; font-size: 12px; }
.voce-azione:disabled { opacity: 0.55; cursor: default; }

/* ---- traccia: barra viva a UNA riga (lezione V1: 52px, non due righe) ---- */
#tr-barra {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  left: 10px; right: 10px;
  z-index: 22;
  display: none;
  align-items: center; gap: 10px;
  min-height: 52px;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font: 700 15px/1.2 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
#tr-barra.viva { display: flex; }
#tr-barra .num { flex: 1 0 auto; display: flex; gap: 12px; }
#tr-barra .pausa-tag { color: #fcd34d; font-size: 12px; }
#tr-barra .gps-ko { color: var(--allerta); font-size: 12px; }
#tr-barra button {
  min-width: 44px; min-height: 40px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: transparent; color: var(--testo);
  font-size: 17px; cursor: pointer;
  flex: 0 0 auto;
}

/* modalità tasca: overlay pieno; errori e toast stanno SOPRA (lezione V1) */
#tasca {
  position: fixed; inset: 0;
  z-index: 60;
  display: none;
  background: #000;
  color: #3f4a4d;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  font: 600 16px/1.5 system-ui, sans-serif;
  text-align: center;
  touch-action: none;
}
#tasca.attiva { display: flex; }
#tasca .grande { font-size: 30px; color: #5a686c; font-variant-numeric: tabular-nums; }
#tasca .esci { font-size: 13px; margin-top: 24px; }
#errore { z-index: 70; }

/* lista uscite salvate */
.uscita-riga {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--tocco);
  padding: 6px 0;
  border-bottom: 1px solid var(--bordo);
  font-size: 13px;
}
.uscita-riga:last-child { border-bottom: 0; }
.uscita-riga .quando { flex: 1; min-width: 0; }
.uscita-riga .quando .micro { display: block; color: var(--muto); font-size: 11px; }
.uscita-riga button {
  min-width: 44px; min-height: 40px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: transparent; color: var(--testo);
  font-size: 15px; cursor: pointer;
}
.uscita-riga button.pericolo { color: var(--allerta); border-color: rgba(224, 82, 82, 0.5); }

/* consiglio AI: chat dentro il pannello */
#ai-chat { display: flex; flex-direction: column; gap: 8px; }
#ai-msg { display: flex; flex-direction: column; gap: 8px; }
#ai-msg .tu, #ai-msg .ai {
  padding: 9px 12px; border-radius: var(--raggio);
  font-size: 13px; line-height: 1.5;
  white-space: pre-wrap;
}
#ai-msg .tu { background: var(--accento-scuro); border: 1px solid var(--bordo); align-self: flex-end; max-width: 88%; }
#ai-msg .ai { background: rgba(31, 162, 148, 0.1); border: 1px solid rgba(31, 162, 148, 0.35); }
#ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ai-chips button {
  border: 1px solid var(--bordo); border-radius: 999px;
  background: transparent; color: var(--muto);
  font: 500 12px/1 system-ui, sans-serif;
  padding: 10px 12px; cursor: pointer;
}
#ai-riga { display: flex; gap: 8px; }
#ai-riga input {
  flex: 1; min-height: var(--tocco);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--accento-scuro); color: var(--testo);
  font: 500 14px/1.3 system-ui, sans-serif;
  padding: 0 12px;
}
#ai-riga button {
  min-width: 64px; min-height: var(--tocco);
  border: 0; border-radius: var(--raggio);
  background: var(--accento); color: var(--accento-scuro);
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
#ai-riga button:disabled { opacity: 0.55; }

/* ---- filtro di punteggio (richiesta dal campo, 02/09): «poter scegliere se
   vedere solo quelle dal 70 in su». Sta in basso accanto alla legenda perche'
   e' li' che si legge la scala, e i tocchi restano da 48px per i guanti.
   pointer-events: auto NON e' facoltativo: #basso e' a `none` per lasciar
   passare i tap sulla mappa sotto, e ogni figlio interattivo se lo deve
   riaccendere (come #giorni e #legenda). Senza, i bottoni si vedono e sono
   MORTI — successo davvero il 02/09, e il collaudo non l'ha visto perche'
   cliccava con .click() da JS, che salta l'hit-test del renderer. */
#soglie {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; overflow-x: auto; scrollbar-width: none;
  pointer-events: auto;
}
#soglie::-webkit-scrollbar { display: none; }
#soglie .etichetta {
  color: var(--muto); font-size: 12px; white-space: nowrap; padding-right: 2px;
}
#soglie button {
  flex: 0 0 auto;
  min-width: var(--tocco); min-height: var(--tocco); padding: 0 10px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  color: var(--testo); font: 600 13px/1 system-ui, sans-serif;
}
#soglie button.attivo {
  background: var(--accento); border-color: var(--accento); color: var(--accento-scuro);
}
/* quando un filtro e' acceso la legenda lo dice, sennO' la mappa mezza vuota
   si legge come «non ci sono funghi» invece che «li stai nascondendo tu» */
#legenda-nota.filtrato { color: var(--accento); }

/* barre del vento: stessa forma di quelle della pioggia, colori diversi —
   le giornate sopra i 40 km/h in evidenza, perche' e' li' che l'asciugatura
   si concentra e la domanda dal campo era proprio «quanto ha tirato» */
.pioggia-barre.vento i.mod { background: #4a6b74; }
.pioggia-barre.vento i.forte { background: var(--accento); }