:root {
  /* Cielo */
  --sky-top: #1d6fb0;
  --sky-mid: #3688c4;
  --sky-low: #4798cb;

  /* Superfici */
  --glass: rgba(14, 44, 70, .42);
  /* Lo stesso colore, ma pieno. Serve dove una cosa deve stare SOPRA a un'altra che le scorre
     sotto — oggi la colonna delle etichette nella striscia dei sei giorni. Sta accanto a
     --glass, e non calcolato altrove, perche' se un giorno cambia la tinta della card devono
     cambiare insieme: due azzurri diversi a due centimetri di distanza si notano subito. */
  --glass-fondo: rgba(14, 44, 70, .94);
  --glass-strong: rgba(11, 36, 58, .62);
  --glass-line: rgba(255, 255, 255, .14);

  /* Superficie piena: la stessa tinta del vetro, ma opaca. Dove ci sono voci da
     leggere il vetro non basta -- dietro passa lo sfondo animato, e il sole
     decorativo o una nuvola si mettono proprio sotto una riga di testo. */
  --panel: #0e2c46;

  /* Testo */
  --on-sky: #ffffff;
  --on-sky-dim: #bcd4e6;

  /* Dati */
  --cyan: #5ec8f0;
  --hot: #ef5f77;
  --cold: #5b8ff9;
  --sun: #f7c948;
  --good: #55c98a;

  /* Ambra tenue per una nota che avverte senza allarmare: sta sopra il video, dove --sun
     a piena intensita' griderebbe e --hot direbbe «guasto» invece di «attenzione». */
  --warn: #ffd08a;

  /* Verde smorzato per il testo sopra le allerte di livello verde: --good a piena
     intensita' su quel fondo vibra e si legge peggio. */
  --good-dim: #b9d9c5;

  /* Fondo pieno piu' scuro del pannello: serve dove un livello deve staccarsi da un
     altro gia' scuro. */
  --deep: #05131f;

  /* Stato hover delle voci di menu su desktop: un gradino sopra --sky-top. */
  --sky-hover: #1c527f;

  /* Scala di severita', usata dai terremoti e disponibile per soglie e allerte.
     Sono colori SEMANTICI: dicono quanto e' grave, non che tinta piace. Le quattro
     tinte sono quelle gia' in uso, quindi la conversione non cambia nulla a schermo. */
  --sev-1: #4aa3e0;   /* informativo */
  --sev-2: #ffb300;   /* attenzione  */
  --sev-3: #ff6f61;   /* serio       */
  --sev-4: #ff3b30;   /* grave       */

  /* Gradienti di cielo (parz. nuvoloso/tramonto/coperto/pioggia/notte) */
  --partly-top: #24578a;
  --partly-mid: #5a8bab;
  --partly-low: #7f94a2;
  --dusk-top: #1b3f66;
  --dusk-mid: #4a7ba8;
  --dusk-low: #c28260;
  --cloudy-top: #2f4d68;
  --cloudy-mid: #5b7d97;
  --cloudy-low: #7f94a4;
  --rain-top: #33414d;
  --rain-mid: #4c5f6e;
  --rain-low: #6b7f8c;
  --night-top: #0d1c2e;
  --night-mid: #16304c;
  --night-low: #24486e;

  --card-radius: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--on-sky);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
}

html {
  background: var(--sky-top);
}

body {
  background: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem 0.5rem;
  gap: 0.75rem;
}

header h1 {
  font-size: 1.3rem;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Il sottotitolo e' l'h1 della pagina: e' l'unico posto in cui ogni pagina dice come si
   chiama, e fino al 17/08/2026 era un <div>, quindi il sito non aveva nemmeno un h1 su
   venti pagine. Cambiato il tag, restano da spegnere i due difetti che il browser da'
   agli h1 e che qui sballerebbero la testata: il grassetto e i margini verticali.
   Il corpo lo tiene questa regola (0.8rem batte header h1 per specificita': una classe
   pesa piu' di un secondo tipo). */
header .subtitle {
  color: var(--on-sky-dim);
  font-size: 0.8rem;
  font-weight: 400;
  margin: 2px 0 0 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.logo-link {
  display: inline-flex;
  margin-right: auto;
  line-height: 0;
}

.brand-logo {
  height: 46px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

#updated-at {
  font-size: 0.75rem;
  color: var(--on-sky);
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.menu-btn,
#updated-at {
  position: relative;
  z-index: 1;
}

.menu-btn {
  flex-shrink: 0;
  background: var(--glass);
  border: none;
  color: var(--on-sky);
  font-size: 1.3rem;
  line-height: 1;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 40;
  display: none;
}

.nav-overlay.open {
  display: block;
}

.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 78%;
  max-width: 300px;
  background: var(--panel);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding-top: 3.5rem;
}

.nav-menu.open {
  transform: translateX(0);
}

.nav-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--on-sky);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.nav-menu a {
  padding: 0.9rem 1.25rem;
  color: var(--on-sky);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-menu a.active {
  color: var(--cyan);
  font-weight: 600;
}

/* --- Sottomenu (Previsioni > Radar/Allerte/Stazioni, Webcam > le 4 webcam) ---
   Mobile: restano un elenco verticale piatto, solo con voce genitore in
   evidenza e figli leggermente rientrati. Desktop: dropdown a comparsa
   (vedi media query 760px), qui solo lo stile "genitore" condiviso. */
.nav-parent {
  display: block;
  padding: 0.9rem 1.25rem 0.4rem;
  color: var(--on-sky-dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-decoration: none;
  cursor: default;
}

a.nav-parent {
  cursor: pointer;
}

.nav-parent.active {
  color: var(--cyan);
}

.nav-dropdown-inner {
  display: flex;
  flex-direction: column;
}

.nav-dropdown a {
  padding-left: 2.25rem;
}

/* --- Menu mobile: gruppi richiudibili ---
   Con tutti i sottomenu sempre aperti le 21 voci superano l'altezza dello
   schermo, e siccome .nav-menu e' a posizione fissa senza overflow le ultime
   (Dona e il gruppo App) restavano tagliate fuori e irraggiungibili.
   Tutto confinato qui sotto i 760px: sopra comanda la barra orizzontale con
   i dropdown assoluti, dove un overflow ritaglierebbe i sottomenu. */
@media (max-width: 759px) {
  .nav-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5rem;
  }

  .nav-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
  }

  .nav-parent::after {
    content: '\25B8';
    font-size: 0.85rem;
    opacity: 0.75;
    transition: transform 0.18s ease;
  }

  .nav-item.open > .nav-parent::after {
    transform: rotate(90deg);
  }

  .nav-item .nav-dropdown {
    display: none;
  }

  .nav-item.open .nav-dropdown {
    display: block;
  }
}

main {
  padding: 0.5rem 1rem 6rem;
  max-width: 640px;
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* ---------- componente: card di sezione ---------- */
.card {
  padding: .9rem 1rem 1rem;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--card-radius);
  backdrop-filter: blur(6px);
  /* Le card impilate nel flusso (le 10 pagine senza .grid) si distanziano da
     sole; dentro .grid ci pensa il gap, quindi lì il margine va tolto. I margini
     laterali non servono mai: il respiro dal bordo schermo lo dà il padding di main. */
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0 0 .75rem;
}

.grid > .card { margin: 0; }

/* Card a tutta larghezza: senza questo ogni card larga resta in una colonna sola
   e il suo contenuto minimo sfonda la griglia in orizzontale. */
.card.wide { grid-column: 1 / -1; }

/* Card che e' tutta un link verso la sua pagina (il Mare). Il bersaglio e' la card
   intera invece di una scritta "dettagli" da centrare col dito: sono ~90px di
   altezza contro i 17 di una riga di testo. La freccia dice che si puo' toccare —
   senza, un rettangolo cliccabile non si distingue da uno che non lo e'. */
a.card-vai {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-vai-freccia {
  display: inline-block;
  color: var(--cyan);
  font-size: .9rem;
  line-height: 1;
  transition: transform .15s ease;
}

a.card-vai:hover .card-vai-freccia { transform: translateX(2px); }

/* Card della pioggia in arrivo. Il titolo cambia con la risposta, quindi non e' una
   etichetta fissa: e' l'informazione principale e sta in testa. */
.radar-card .forecast { margin-bottom: .6rem; }

.radar-limite {
  margin-top: .5rem;
  font-size: .72rem;
  line-height: 1.4;
}

/* Card «Dal mare». La croce segna Procida al centro dell'immagine: senza, in un
   riquadro largo 1063 km nessuno sa dove guardare. */
.sat-card[hidden] { display: none; }   /* .card e' display:flex e vincerebbe su [hidden] */

/* FINESTRA CHE SI SCORRE, non immagine che rimpicciolisce. L'immagine sta a 1:1 ovunque
   (1024x384, la misura vera servita da davis/satellite.php) e su schermi stretti se ne
   vede la parte centrata su Procida: il dito la trascina per andare a vedere il Tirreno.
   Le due alternative erano peggiori e sono state provate: rimpicciolire faceva del
   satellite una striscia da 160 px accanto al radar da 384, e ritagliare senza scorrere
   toglieva per sempre il mare a ovest, che e' il contenuto della card.

   overflow-y: hidden NON e' una rifinitura. La finestra e' alta esattamente quanto
   l'immagine, quindi in verticale non c'e' niente da scorrere; ma se restasse `auto`, un
   dito appoggiato qui sopra scorrerebbe la card invece della pagina, e la home avrebbe
   una trappola per lo scroll alta 384 px proprio in mezzo. */
.sat-mappa {
  position: relative;
  max-width: 1024px;
  height: 384px;
  margin: 0 auto;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;   /* arrivati al bordo non si trascina la pagina */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* la barra qui e' rumore: la posizione la da' la croce */
  line-height: 0;
}
.sat-mappa::-webkit-scrollbar { display: none; }

/* La tela ha la misura dell'immagine ed e' lei il riferimento della croce: ancorata alla
   finestra, la croce resterebbe ferma al centro dello schermo mentre l'immagine scorre
   sotto, cioe' indicherebbe un punto diverso da Procida a ogni trascinamento. */
.sat-tela { position: relative; width: 1024px; height: 384px; }
.sat-mappa img { width: 1024px; height: 384px; display: block; }
.sat-croce {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  pointer-events: none;
}
.sat-croce::before, .sat-croce::after {
  /* illustrazione: il mirino sta sopra una fotografia, non sopra la palette. Deve restare
     bianco qualunque cosa succeda ai token, ed e' l'ombra nera qui sotto a garantirgli il
     contrasto su un satellite che puo' essere di qualunque colore. */
  content: ""; position: absolute; background: #fff;  /* illustrazione: vedi sopra */
  box-shadow: 0 0 3px rgba(0, 0, 0, .9);
}
.sat-croce::before { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.sat-croce::after { top: 50%; left: 0; height: 2px; width: 100%; margin-top: -1px; }
.sat-fonte { margin-top: .5rem; }
/* Compare solo se l'immagine sborda davvero, e sparisce al primo trascinamento: uno
   scorrimento orizzontale dentro una pagina che scorre in verticale non lo cerca nessuno
   se non gli viene detto. L'attribuzione a EUMETSAT resta separata perche' e' un obbligo
   di licenza, non un suggerimento d'uso. */
.sat-scorri { opacity: .75; }
.sat-scorri[hidden] { display: none; }

/* La mappina sta a 1:1: niente ingrandimento, quindi niente sgranatura e niente
   giunzioni fra le tile — i due difetti che questa card ha avuto durante la giornata.
   Lo sfondo e' una sola immagine nostra (www/img/radar-sfondo.png, 1024x384, generata
   da scripts/gen-sfondo-radar.ps1): sopra ci vanno solo le tile del radar, che pesano
   poche centinaia di byte l'una. Su telefono si vede la parte centrale, su desktop tutta.
   Perche' non le tile di OpenStreetMap: la loro policy vieta di ri-servirle dal nostro
   server, e prese dal browser erano 8 richieste a ogni apertura della home. */
.radar-mappa {
  position: relative;
  width: 100%;
  max-width: 1024px;
  height: 384px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #0d2438;          /* illustrazione: lo stesso mare dello sfondo */
}

/* IL RIQUADRO. Senza questa regola l'8 agosto sfondo e puntino si sono separati: il
   riquadro tornava statico, le immagini dentro si posizionavano rispetto alla card e la
   mappa si incollava a sinistra mentre il puntino restava al centro. Largo quanto lo
   sfondo e centrato su Procida: e' questo che tiene sfondo e tile nello stesso sistema
   di coordinate. */
.radar-mosaico {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1024px;
  height: 384px;
  margin-left: -512px;
}

.radar-mosaico img {
  position: absolute;
  width: 256px;
  height: 256px;
}

/* Lo sfondo e' un'immagine sola grande quanto il riquadro: sta sotto a tutto. */
.radar-mosaico .radar-fondo {
  left: 0;
  top: 0;
  width: 1024px;
  height: 384px;
}

.radar-mosaico .radar-eco { opacity: .85; }

/* Il cerchio dei 60 km e il puntino di Procida NON stanno piu' qui: sono disegnati
   dentro www/img/radar-sfondo.png da scripts/gen-sfondo-radar.ps1. In CSS erano due
   pseudo-elementi ancorati al 50% del loro contenitore, cioe' due misure separate da
   quella della mappa; l'8 agosto una regola persa li ha fatti finire in mare aperto a
   300 km da Procida. Dentro l'immagine stanno nelle coordinate della mappa, quindi o
   sono giusti tutti e due o e' sbagliata la mappa. */
/* Stato del mare e altezza d'onda stanno su due righe: senza un filo d'aria in mezzo
   sembrerebbero una frase sola andata a capo. */
#sea-card .detail + .detail { margin-top: .15rem; }

/* Card della scossa: il riquadro della magnitudo usa la stessa scala della pagina
   terremoti (--sev-1..4), cosi' il rosso vuol dire la stessa cosa nei due posti. */
/* Regola generale, e non piu' una toppa per una card sola (14/08/2026).
   `a.card-vai { display: block }` batte il `[hidden] { display: none }` del foglio di
   stile del browser, perche' un selettore di classe pesa piu' di quello predefinito.
   Risultato: ogni card-vai che si nasconde da sola con `card.hidden = true` restava
   visibile e vuota. Qui c'era `.quake-card[hidden]`, aggiunta quando il difetto era
   emerso sulla card della scossa e curata solo li'; il radar aveva lo stesso difetto
   senza che nessuno lo vedesse — il suo `catch` promette «card assente, non card che
   dice nessuna pioggia perche' la rete e' caduta», e quella promessa non ha mai
   funzionato. Vale per tutte, comprese quelle che verranno. */
a.card-vai[hidden] { display: none; }
/* Card «Novità · Il time-lapse». Stessa forma del corpo della card della scossa — immagine a
   sinistra, testo a destra — perche' un secondo modo di affiancare una figura a una frase
   sarebbe un secondo posto da tenere allineato.
   La miniatura si ferma a 200px: e' un assaggio, non il contenuto. Il contenuto sta dietro il
   clic. Sotto i 380px va a capo, perche' a quella larghezza 200px di figura lascerebbero alla
   frase una colonna da due parole per riga. */
/* LA PAGINA DELLA VETRINA, che nasce per essere incollata nei social. Il filmato sta per primo
   e occupa tutta la larghezza della card: chi ci arriva da un messaggio deve vedere qualcosa
   muoversi prima di leggere qualunque cosa.
   `aspect-ratio` e non un'altezza: senza, la pagina si assesta quando il filmato ha caricato i
   metadati e tutto quello che sta sotto salta di venti righe — proprio mentre la persona sta
   cominciando a leggere. Con il rapporto dichiarato lo spazio e' gia' suo dal primo istante. */
.vetrina-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--deep);
  object-fit: cover;
}

.vetrina-testo {
  margin: .9rem 0 0;
  font-size: .92rem;
  line-height: 1.55;
}

.vetrina-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
}

/* Il `display: flex` qui sopra BATTE il `display: none` che il browser da' da solo a [hidden]:
   senza questa riga la vetrina mostrerebbe tutte e due le porte insieme — l'invito a abbonarsi
   e i collegamenti per chi e' gia' abbonato. E' la stessa trappola gia' documentata per
   `.webcam-page-tile img[hidden]`, e si ripresenta ogni volta che si nasconde un elemento a cui
   un'altra regola ha dato un display. */
.vetrina-azioni[hidden] { display: none; }

/* Il campo che compare solo quando la copia negli appunti non e' disponibile. */
.condividi-ripiego {
  flex: 1 1 12rem;
  min-width: 0;
  padding: .45rem .6rem;
  border-radius: 8px;
  border: 1px solid var(--glass-line);
  background: var(--glass-fondo);
  color: var(--on-sky);
  font: inherit;
  font-size: .8rem;
}

.novita-corpo { display: flex; align-items: center; gap: .8rem; }
.novita-mini {
  flex: 0 0 40%;
  max-width: 200px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: var(--deep);
}
.novita-testo { margin: 0; font-size: .85rem; line-height: 1.45; }

@media (max-width: 380px) {
  .novita-corpo { flex-direction: column; align-items: stretch; }
  .novita-mini { flex: none; max-width: none; }
}

.quake-card-corpo { display: flex; align-items: center; gap: .7rem; }
.quake-card-mag {
  flex: 0 0 auto;
  min-width: 3.1rem;
  padding: .45rem .5rem;
  border-radius: 10px;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--on-sky);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.quake-card-testo { min-width: 0; }
.quake-card-luogo { font-weight: 600; line-height: 1.25; }
.quake-card-repliche { margin-top: .55rem; }

/* Il numero della card di quiete. Nella card d'allarme il fondo lo dipinge il JS con
   magColor(): li' il colore E' l'informazione. Qui no — la scossa non si e' sentita, e
   ridipingerla di rosso perche' e' l'ultima arrivata direbbe il contrario di quello che
   c'e' scritto sotto. Fondo neutro, quindi, e senza questa regola resterebbe testo bianco
   su niente: --on-sky arriva da .quake-card-mag, il fondo no. */
.quake-mag-quieta {
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  color: var(--on-sky-dim);
  text-shadow: none;
}
.quake-quiete-nota { margin: .55rem 0 0; color: var(--on-sky-dim); }

/* alerts-container e' entrato nella griglia (prima stava fuori, sopra tutto):
   non e' una .card - i suoi figli .alert-card lo sono gia' - ma deve occupare
   comunque tutta la larghezza come le altre card "wide". */
.alerts-container.wide { grid-column: 1 / -1; }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}

.card-head h3 {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--on-sky);
}

.more {
  font-size: .78rem;
  color: var(--on-sky-dim);
  text-decoration: underline;
  white-space: nowrap;
}

.more:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Etichette delle card nel markup non ancora migrato (12 pagine su 19).
   Va rimossa solo quando tutte useranno .card-head. */
.badge-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.instr-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Animazioni strumenti --- */
.instr-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: instr-pulse 2.2s ease-in-out infinite;
}
@keyframes instr-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.instr-needle {
  transform-box: fill-box;
  animation: instr-needle-wobble 3.5s ease-in-out infinite;
}
@keyframes instr-needle-wobble {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.instr-bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: instr-bob 2.6s ease-in-out infinite;
}
@keyframes instr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.instr-sway {
  transform-box: fill-box;
  animation: instr-sway 3s ease-in-out infinite;
}
@keyframes instr-sway {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.instr-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: instr-float 3.2s ease-in-out infinite;
}
@keyframes instr-float {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-3px); }
}

.card .value {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
}

.card .value .unit {
  font-size: 1rem;
  font-weight: 400;
  color: var(--on-sky-dim);
  margin-left: 0.2rem;
}

.card .detail {
  font-size: 0.85rem;
  color: var(--on-sky-dim);
}

.wind-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

/* La presentazione fra l'hero e le metriche. Corpo piccolo e colore attenuato: deve
   spiegare a chi arriva la prima volta, non contendere il colpo d'occhio al numero
   grande, che e' il motivo per cui torna chi c'e' gia' stato. Il margine orizzontale
   e' lo stesso di .metrics, cosi' il testo sta sulla stessa colonna. */
.intro {
  margin: .1rem 1rem .9rem;
  font-size: .88rem;
  line-height: 1.45;
  text-align: center;
  color: var(--on-sky-dim);
}

.intro strong { color: var(--on-sky); font-weight: 500; }

/* ---------- componente: riga metrica ---------- */
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 1rem;
  border-top: 1px solid var(--glass-line);
}

.metrics.cols-3 {
  grid-template-columns: repeat(3, 1fr);
  border-top: 0;
  text-align: center;
  gap: .5rem;
}

.metric {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem .3rem;
  border-bottom: 1px solid var(--glass-line);
}

.metrics:not(.cols-3) .metric:nth-child(odd) {
  border-right: 1px solid var(--glass-line);
  padding-right: .7rem;
}

.metrics:not(.cols-3) .metric:nth-child(even) { padding-left: .9rem; }

.metrics.cols-3 .metric {
  display: block;
  border-bottom: 0;
  padding: .4rem 0;
}

.metric-lab {
  font-size: .82rem;
  font-weight: 400;
  color: var(--on-sky-dim);
}

.metric-val {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.metric svg { flex: 0 0 auto; }

.compass {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
}

.compass .arrow {
  /* rotazione gestita interamente dall'attributo SVG transform (JS) —
     niente transform/transform-origin CSS qui: la combinazione con
     l'attributo SVG rompe lo scaling del viewBox in alcuni browser */
}

.wind-numbers {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.trend-arrow {
  display: inline-block;
  font-size: 1.2rem;
}

.trend-rising { color: var(--good); }
.trend-falling { color: var(--cyan); }
.trend-flat { color: var(--on-sky-dim); }

.forecast {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ---------- componente: striscia oraria ---------- */
.strip {
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  scrollbar-width: thin;
}

.strip-item {
  flex: 0 0 auto;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
}

.strip-item.now {
  background: rgba(255, 255, 255, .13);
  border-radius: 12px;
  padding: .4rem 0;
}

.strip-icon .wi { width: 26px; height: 26px; }

.strip-h {
  font-size: .8rem;
  color: var(--on-sky-dim);
  font-variant-numeric: tabular-nums;
}

.strip-v {
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.strip-p {
  font-size: .72rem;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

/* --- Toast istruzioni installazione (iOS / browser senza prompt nativo) --- */
/* Il messaggio a scomparsa nato per l'installazione serve anche all'avviso prima
   di chiudere l'app: il nome della classe resta per non toccare 21 pagine, ma il
   suo uso non e' piu' solo quello. */
.install-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%) translateY(20px);
  max-width: 90vw;
  width: 340px;
  background: var(--glass);
  color: var(--on-sky);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 25;
  cursor: pointer;
}

.install-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- Voci menu App/Dona: evidenziate come azioni, non pagine (mobile) --- */
.nav-parent--cta {
  color: var(--cyan) !important;
}

.error-banner {
  background: var(--sun);
  color: var(--on-sky);
  border-radius: var(--card-radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  display: none;
}

.error-banner.visible {
  display: block;
}

/* --- Allerte meteo --- */
.alerts-container {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.alerts-container:empty { display: none; }

.alert-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--glass);
  border-left: 5px solid var(--on-sky-dim);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

.alert-icon { font-size: 1.5rem; line-height: 1; }
.alert-title { font-weight: 700; font-size: 0.95rem; }
.alert-valid { font-size: 0.78rem; color: var(--on-sky-dim); margin-top: 1px; }

.alert-none {
  border-left-color: var(--good);
  color: var(--good-dim);
  font-size: 0.85rem;
  font-weight: 500;
}

.alerts-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--glass);
  border: 2px solid var(--badge-color, var(--on-sky-dim));
  border-radius: 999px;
  padding: 0.45rem 1rem;
  color: var(--on-sky);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.alerts-badge .alert-icon {
  font-size: 1.05rem;
}

.alerts-badge-chevron {
  margin-left: 0.1rem;
  font-size: 1rem;
  line-height: 1;
}

.alerts-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* --- Pagina Allerte --- */
.alerts-page-note {
  font-size: 0.85rem;
  color: var(--on-sky-dim);
  line-height: 1.4;
  margin-top: 0.75rem;
}

/* La card dell'allerta si apre: il pulsante prende tutta la riga, cosi' il bersaglio
   e' l'intestazione intera e non una freccia da centrare col dito. */
.alert-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.alert-toggle-testo { display: flex; flex-direction: column; }

.alert-freccia {
  flex: 0 0 auto;
  color: var(--on-sky-dim);
  transition: transform .15s ease;
}

.alert-toggle[aria-expanded="true"] .alert-freccia { transform: rotate(90deg); }

.alert-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

.alert-spiega {
  font-size: 0.85rem;
  color: var(--on-sky-dim);
  line-height: 1.45;
  margin-top: .5rem;
  border-top: 1px solid var(--glass-line);
  padding-top: .5rem;
}

.alert-spiega p { margin: .4rem 0 0; }
.alert-spiega p:first-child { margin-top: 0; }
.alert-spiega strong { color: var(--on-sky); }

.webcam-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.webcam-tile {
  position: relative;
  background: var(--glass);
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.webcam-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--deep);
}

.webcam-tile-iframe {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.webcam-tile-iframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.webcam-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.35rem 0.6rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  font-size: 0.8rem;
  color: var(--on-sky);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.webcam-live-badge {
  background: var(--cyan);
  color: var(--sky-top);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

/* --- Card webcam in home (miniature servite da webcam_thumb.php) ---
   Sta nella griglia tra il Nowcast e i riquadri strumenti, quindi usa il fondo
   card come tutto il resto: niente bianco+ombra, che serve solo agli elementi
   appoggiati direttamente sullo sfondo animato (footer, back-link). */
.webcam-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.webcam-strip-link {
  font-size: 0.78rem;
  color: var(--cyan);
  text-decoration: none;
  white-space: nowrap;
}

.webcam-strip-link:hover {
  text-decoration: underline;
}

.webcam-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Nella striscia i riquadri sono link verso la pagina a piena grandezza */
a.webcam-tile {
  display: block;
  text-decoration: none;
  color: inherit;
}

.webcam-strip .webcam-tile {
  /* Le tre sorgenti sono tutte 16:9: con 4/3 verrebbero tagliate ai lati */
  aspect-ratio: 16 / 9;
}

.webcam-strip .webcam-caption {
  padding: 0.25rem 0.4rem;
  font-size: 0.68rem;
  gap: 0.3rem;
}

.webcam-strip .webcam-live-badge {
  font-size: 0.52rem;
  padding: 1px 4px;
}

/* --- Coccarda "online dal 2013" --- */
.heritage {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, rgba(232, 187, 67, 0.16), rgba(10, 37, 64, 0.55));
  border: 1px solid rgba(232, 187, 67, 0.45);
}

.heritage-seal {
  flex: 0 0 auto;
  width: 58px;
}

.heritage-seal svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.hb-dal {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: #6b4a06;   /* illustrazione: coccarda del patrimonio */
  text-anchor: middle;
}

.hb-anno {
  font-size: 22px;
  font-weight: 800;
  fill: #0a2540;   /* illustrazione: coccarda del patrimonio */
  text-anchor: middle;
}

.hb-luogo {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.6px;
  fill: #6b4a06;   /* illustrazione: coccarda del patrimonio */
  text-anchor: middle;
}

.hb-riflesso {
  animation: hbRiflesso 5s ease-in-out infinite;
}

@keyframes hbRiflesso {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(150px); }
}

.heritage-titolo {
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffe9a8;   /* illustrazione: coccarda del patrimonio */
}

.heritage-sub {
  font-size: 0.78rem;
  color: var(--on-sky);
  opacity: 0.85;
  margin-top: 0.1rem;
}

/* --- Coccarda nell'intestazione (solo home) ---
   Il logo cede il margine automatico alla coccarda: così la coccarda resta
   attaccata al logo e tutto il resto (ora di aggiornamento e hamburger)
   continua a essere spinto a destra. */
.with-heritage .logo-link {
  margin-right: 0.6rem;
}

header .heritage {
  margin: 0 auto 0 0;
  padding: 0.25rem 0.6rem;
  gap: 0.5rem;
  min-width: 0;
}

header .heritage-seal {
  width: 34px;
}

header .heritage-titolo {
  font-size: 0.72rem;
  line-height: 1.15;
}

header .heritage-sub {
  font-size: 0.64rem;
  margin-top: 0;
}

/* Su telefono l'intestazione ha già logo, ora e pulsante menu: resta il solo
   sigillo, senza cornice, per non affollarla. Il "DAL 2013" è dentro il sigillo,
   quindi si capisce lo stesso. */
@media (max-width: 759px) {
  header .heritage {
    background: none;
    border: none;
    padding: 0;
  }

  header .heritage-testo {
    display: none;
  }

  header .heritage-seal {
    width: 30px;
  }
}

/* --- Terremoti: riquadro della scossa più forte ---
   Serve perché durante uno sciame l'elenco cronologico si riempie di repliche
   minori e l'evento principale finisce fuori vista. */
.quake-strong-card {
  border: 1.5px solid color-mix(in srgb, var(--sun) 55%, transparent);
  background: linear-gradient(155deg, var(--glass) 60%, color-mix(in srgb, var(--sun) 14%, transparent) 100%);
}

.quake-strong {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.3rem;
}

.quake-strong-mag {
  flex: 0 0 auto;
  min-width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--on-sky);
}

.quake-strong-body {
  min-width: 0;
}

.quake-strong-place {
  font-size: 1.05rem;
  font-weight: 600;
}

.quake-strong-detail {
  font-size: 0.82rem;
  color: var(--on-sky-dim);
  margin-top: 0.15rem;
}

.quake-strong-after {
  font-size: 0.8rem;
  color: var(--on-sky);
  opacity: 0.85;
  margin-top: 0.35rem;
}

/* Grafico delle scosse nelle ultime 24 ore */
.q-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 0.5rem;
}

.q-axis {
  fill: var(--on-sky-dim);
  font-size: 11px;
}

.q-chart-legenda {
  font-size: 0.72rem;
  color: var(--on-sky-dim);
  margin-top: 0.3rem;
  line-height: 1.35;
}

.quake-troncato {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Il filtro riusa l'aspetto dei preset della pagina Dati */
#quake-filters {
  margin: 0.4rem 0 0.7rem;
}

#quake-filters button.attivo {
  background: var(--cyan);
  color: var(--sky-top);
  font-weight: 600;
}

/* --- Pagina Previsioni ora per ora (corrette) --- */
.fh-quality {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

.fh-q-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--on-sky-dim);
}

.fh-q-nome {
  font-weight: 700;
  min-width: 92px;
  color: var(--on-sky);
}

/* Verde = correzione attiva e misurata; grigio = in attesa di dati */
.fh-q-on::before {
  content: '\25CF';
  color: var(--good);
  margin-right: 0.35rem;
}

.fh-q-off .fh-q-nome::before {
  content: '\25CB';
  color: var(--on-sky-dim);
  margin-right: 0.35rem;
}

.fh-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
  font-size: .74rem;
  color: var(--on-sky-dim);
}

.fh-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: .35rem;
  vertical-align: middle;
}

.fh-swatch-raw { background: var(--on-sky-dim); }
.fh-swatch-corr { background: var(--hot); }

.fh-row {
  display: grid;
  grid-template-columns: 46px 30px 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fh-row:last-child { border-bottom: none; }

.fh-ora {
  font-size: 0.85rem;
  color: var(--on-sky-dim);
}

.fh-icona svg { width: 26px; height: 26px; display: block; }

.fh-temp {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.fh-temp strong { font-size: 1.05rem; }

/* Il valore grezzo resta visibile accanto a quello corretto: il confronto è
   il senso della pagina, non un dettaglio da nascondere. */
.fh-raw {
  font-size: 0.72rem;
  color: var(--on-sky-dim);
}

.fh-vento {
  font-size: 0.8rem;
  color: var(--on-sky-dim);
  white-space: nowrap;
}

.fh-pioggia { min-width: 34px; text-align: right; }

.fh-rain {
  font-size: 0.78rem;
  color: var(--cyan);
  font-weight: 600;
}

/* --- Pagina Effemeridi --- */
.eff-icon-big {
  width: 56px;
  height: 56px;
}

.eff-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 0.8rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}

.eff-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eff-k {
  color: var(--on-sky-dim);
  font-size: 0.84rem;
}

.eff-v {
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
}

.eff-phase-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.eff-phase-row:last-child {
  border-bottom: none;
}

/* Le fasi già trascorse restano leggibili ma in secondo piano */
.eff-phase-past {
  opacity: 0.5;
}

.eff-phase-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.eff-phase-name {
  font-weight: 600;
  font-size: 0.9rem;
}

.eff-phase-when {
  font-size: 0.82rem;
  color: var(--on-sky-dim);
  text-align: right;
}

@media (min-width: 760px) {
  .eff-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.8rem;
  }
}

/* --- Popup di ingrandimento webcam --- */
.wc-modal {
  position: fixed;
  inset: 0;
  z-index: 600;   /* sopra a tutto: nav 30, pulsante installa 50, tooltip 500 */
  background: rgba(3, 12, 20, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.wc-modal[hidden] {
  display: none;
}

.wc-modal-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 96vw;
}

.wc-modal-figure img {
  max-width: 96vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--card-radius);
  background: var(--deep);
}

.wc-modal-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--on-sky);
  font-size: 0.9rem;
}

.wc-modal-link {
  color: var(--cyan);
  text-decoration: none;
  white-space: nowrap;
}

.wc-modal-link:hover {
  text-decoration: underline;
}

.wc-modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  background: none;
  border: 0;
  color: var(--on-sky);
  font-size: 2.2rem;
  line-height: 1;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}

/* Blocca lo scorrimento della pagina mentre il popup e' aperto */
body.wc-modal-open {
  overflow: hidden;
}

/* --- Effemeridi (home) --- */
.ephemeris-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.ephemeris-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.ephemeris-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.ephemeris-icon svg.ei {
  width: 100%;
  height: 100%;
}

.ephemeris-value {
  font-size: 1.05rem;
  font-weight: 600;
}

.ephemeris-sub {
  font-size: 0.72rem;
  color: var(--on-sky-dim);
}

/* --- Pagina webcam singola --- */
.webcam-page-tile {
  background: var(--glass);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-top: 0.75rem;
  position: relative;
}

.webcam-page-tile img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--deep);
}

.webcam-page-tile iframe {
  width: 100%;
  height: 60vh;
  min-height: 320px;
  border: 0;
  display: block;
}

/* Il <video> del time-lapse nasce da JavaScript dentro questo riquadro, che ritaglia. Senza
   questa regola prendeva la sua larghezza naturale di 1280 px e su un telefono se ne vedeva
   l'angolo in alto a sinistra, con i comandi del lettore fuori dallo schermo: non si poteva
   ne' mettere in pausa ne' scorrere. E' la gemella di #video-zona video (piu' sotto), che
   esisteva da sempre sulla pagina video e mancava qui. */
.webcam-page-tile video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--deep);
}

/* `display: block` qui sopra batte il display:none che il browser da' da solo a [hidden]:
   senza queste due righe l'immagine ferma resterebbe sotto il filmato invece di sparire, e il
   filmato si vedrebbe nero mentre scende invece di aspettare il suo turno. */
.webcam-page-tile img[hidden],
.webcam-page-tile video[hidden] { display: none; }

/* --- La pagina che vende (dona) --- */
.confronto { margin: 1rem 0; }
.confronto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.confronto figcaption {
  margin: .5rem auto 0;
  max-width: 40rem;
  text-align: left;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--on-sky-dim);
}
/* La card di questa pagina e' centrata (.donate-card), ma un elenco puntato centrato e' un
   pasticcio: i punti restano a sinistra e le righe ballano. Testo e didascalie tornano a
   sinistra, dove si leggono. */
.donate-elenco {
  margin: .4rem auto 1rem;
  padding-left: 1.2rem;
  max-width: 34rem;
  text-align: left;
  font-size: .92rem;
  line-height: 1.6;
}
.donate-elenco li { margin: .35rem 0; }
.donate-prezzo { font-size: 1.05rem; margin: 1rem 0 .8rem; }
.donate-nota { font-size: .82rem; color: var(--on-sky-dim); max-width: 40rem; margin-left: auto; margin-right: auto; }
.donate-title-2 { margin-top: 2.2rem; }

/* Il richiamo sotto le webcam, per chi non e' ancora abbonato. Discreto apposta: la pagina
   serve prima di tutto a far vedere la webcam a chi passa, e un cartello troppo grosso davanti
   a una cosa gratuita fa scappare invece che vendere. */
.webcam-invito {
  margin-top: .6rem;
  padding: .7rem .9rem;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--card-radius);
  font-size: .84rem;
  line-height: 1.5;
}
.webcam-invito a { color: var(--on-sky); }
.webcam-invito[hidden] { display: none; }
.webcam-invito p { margin: 0 0 .6rem; }

/* Il pulsante dell'invito riusa .video-btn — un secondo modo di disegnare un pulsante sarebbe
   un secondo posto da tenere allineato — e si distingue solo per il riempimento, perche' qui
   e' l'unica azione della scatola e deve leggersi come tale. */
.video-btn-invito { font-weight: 600; }

/* I PULSANTI DELLE PAGINE WEBCAM VOGLIONO UN FONDO PIENO, e il motivo l'ha visto Max il
   21/08/2026 guardando la pagina di mattina: «il fondo del pulsante è lo stesso della pagina».
   Aveva ragione, ed era colpa di come sono fatti. `.video-btn` nasce per la pagina del video,
   dove sta sopra un filmato scuro, quindi gli basta un velo di bianco all'8%. Qui invece sotto
   scorre lo sfondo meteo, che cambia con l'ora e col tempo: la sera è blu scuro e il velo si
   vede, la mattina è azzurro chiaro e il pulsante sparisce.

   Un fondo traslucido non può funzionare sopra qualcosa che cambia colore. Serve una tinta
   piena, ed è precisamente il mestiere di --glass-fondo, che esiste già per «le cose che devono
   stare sopra a un'altra che le scorre sotto». Nessun colore nuovo da inventare: la palette
   aveva già la risposta.

   Il bordo ciano marca l'azione principale. L'invito e il pulsante del 4K non compaiono mai
   insieme — webcam-single.js mostra l'uno o l'altro a seconda del cookie — quindi possono
   permettersi lo stesso risalto senza farsi concorrenza. */
.webcam-extra .video-btn,
.video-btn-invito {
  background: var(--glass-fondo);
  border-color: var(--glass-line);
}
/* Il bordo ciano marca il PRIMO pulsante, che dal 23/08/2026 non e' piu' figlio diretto del
   blocco: ognuno vive dentro la sua «voce» insieme alla riga che lo spiega. `.video-btn
   :first-child` continuerebbe a corrispondere — dentro una voce il pulsante e' sempre il primo
   figlio — e li colorerebbe TUTTI, cioe' il risalto non marcherebbe piu' niente. Si guarda la
   prima voce, non il primo pulsante. */
.webcam-extra-voce:first-child .video-btn,
.video-btn-invito {
  border-color: var(--cyan);
}
.webcam-extra .video-btn:hover,
.video-btn-invito:hover {
  border-color: var(--on-sky);
  background: var(--panel);
}

/* I due pulsanti sotto la webcam, e quello della pagina video. Stessa forma a pastiglia dei
   filtri della pagina Dati, perche' un secondo modo di disegnare un pulsante sarebbe un secondo
   posto da tenere allineato. */
.webcam-extra[hidden] { display: none; }
/* UNA COLONNA, NON PIU' UNA FILA (23/08/2026). La fila a capo automatico funzionava finche' i
   pulsanti erano pastiglie nude; con una riga di spiegazione sotto ciascuno si e' rotta, e Max
   l'ha vista rotta sul suo schermo: due pulsanti sopra, uno sotto, e la spiegazione del secondo
   finita a mezz'aria lontano dal pulsante che spiega. E' il difetto tipico del `wrap`: decide
   lui dove andare a capo, e non sa che quelle due cose vanno insieme.
   In colonna la domanda non si pone — ogni riga sta sotto il suo pulsante a qualunque
   larghezza, e l'elenco si scorre invece di doverlo ricomporre con gli occhi. */
.webcam-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

/* UNA VOCE E' UN PULSANTE PIU' LA RIGA CHE DICE A COSA SERVE.
   `align-items: flex-start` perche' dentro una colonna il pulsante si allargherebbe fino al
   bordo, e una pastiglia larga quanto la sua didascalia non e' piu' una pastiglia.
   `max-width` in `ch` e non in `rem`: quello che si vuole limitare e' la lunghezza della riga
   da leggere, che si misura in caratteri. */
.webcam-extra-voce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  max-width: 34ch;
}

.webcam-extra-nota {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--on-sky-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.video-btn {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--on-sky);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.video-btn:hover { background: rgba(255, 255, 255, 0.16); }
.video-btn:disabled { opacity: 0.6; cursor: default; }
.video-btn-2 { background: rgba(255, 255, 255, 0.04); }

/* L'INTERRUTTORE DEGLI AVVISI DI PIOGGIA (01/09/2026), e le due ragioni per cui ha uno stile
   suo invece di accontentarsi di .video-btn.

   La prima l'ha vista Max guardando la home sul telefono di un amico: «un pulsante poco
   leggibile con una grafica totalmente differente dal sito». Era vero, e la colpa era della
   classe: usava .forecast-link, che e' scritta per un <a> — solo colore ciano, nessuno sfondo,
   nessun bordo. Su un <button> il browser ci mette sopra il PROPRIO vestito predefinito, e
   veniva fuori un riquadro bianco di sistema in mezzo a un sito blu.

   La seconda e' la stessa del 21/08/2026 sui pulsanti delle webcam, e vale identica qui: sotto
   questo bottone scorre lo sfondo meteo, che cambia colore con l'ora e col tempo. Un velo di
   bianco all'8% si vede la sera sul blu scuro e sparisce la mattina sull'azzurro chiaro. Serve
   una tinta piena, ed e' precisamente il mestiere di --glass-fondo. Nessun colore nuovo da
   inventare: la palette aveva gia' la risposta, la seconda volta come la prima. */
/* Un selettore per tutti e due, non due regole gemelle: quelle divergono al primo ritocco, e
   a divergere e' sempre quella che nessuno guarda. Il bottone delle scosse e' arrivato il
   05/09/2026 e ha ereditato tutto da qui, senza che si dovesse ricordare niente. */
#avvisi-pioggia, #avvisi-sisma {
  background: var(--glass-fondo);
  border-color: var(--glass-line);
}

/* E QUESTA E' LA RIGA CHE MANCAVA, ed e' la vera causa di tutto quanto sopra.
   `display: inline-block` — prima da .forecast-link, adesso da .video-btn — BATTE il
   `[hidden] { display: none }` che il browser da' da solo: una regola di classe ha piu'
   specificita' di un selettore d'attributo del foglio predefinito. Quindi il bottone si
   vedeva SEMPRE, a chiunque, qualunque cosa facesse il copione — e siccome il copione era
   commentato di proposito per il pilota, non c'era nessun gestore del clic. Da qui i tre
   sintomi che Max ha riferito il 01/09/2026 in una volta sola: visibile a tutti, vestito da
   pulsante di sistema, e «non succede nulla se ci clicco». Erano lo stesso difetto.
   E' la NONA volta che questo foglio inciampa qui: .sat-card, .sat-scorri, a.card-vai,
   .vetrina-azioni, .webcam-page-tile img, .webcam-invito, .webcam-extra, .eph-proverbio hanno
   tutte la loro riga gemella. Per questo dal 01/09/2026 c'e' un banco che le cerca da solo,
   invece di aspettare la decima. */
#avvisi-pioggia[hidden], #avvisi-sisma[hidden] { display: none; }

/* IL MESSAGGIO DI ESITO. Aveva la classe .condividi-esito, tarata per la card di condivisione:
   0.82rem in --good-dim. La' e' giusta, perche' dice «copiato» accanto a un gesto che si e'
   appena visto riuscire. Qui e' l'UNICA risposta a un tocco che non produce nessun altro
   effetto visibile, e a quella dimensione, su un telefono, non si legge: e' il motivo per cui
   premendo «non succedeva nulla». Succedeva; non lo diceva a voce abbastanza alta. */
.avvisi-esito {
  margin: .5rem 0 0;
  min-height: 1.2rem;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--on-sky);
}
/* L'errore non e' rosso acceso: qui «non ha funzionato» e' quasi sempre un permesso negato,
   cioe' una scelta di chi legge, non un guasto. --sev-2 e' «attenzione» nella scala semantica
   che il sito ha gia' — dice «guarda qui» senza dire «allarme» — e prendere di li' invece di
   inventare una tinta nuova e' la stessa regola che vale per --glass-fondo qui sopra. */
.avvisi-esito.male { color: var(--sev-2); }

/* Sulla pagina video il pulsante e' l'azione principale: sta da solo e va trovato subito. */
#video-avvia {
  margin-top: 0.6rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
}

/* I comandi del time-lapse stanno sopra lo sfondo meteo come i pulsanti delle webcam, quindi
   valgono le stesse regole: fondo pieno, mai traslucido. Vedi il commento di .video-btn-invito. */
.tl-comandi {
  margin-top: .6rem;
  padding: .7rem .9rem;
  background: var(--glass-fondo);
  border: 1px solid var(--glass-line);
  border-radius: var(--card-radius);
}
.tl-comandi input[type="range"] { width: 100%; accent-color: var(--cyan); }
.tl-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .5rem;
  font-size: .84rem;
  color: var(--on-sky);
  /* Da quando i pulsanti sono due (22/08/2026) la riga puo' non starci su un telefono
     stretto: senza questo, il secondo pulsante esce dal riquadro invece di andare a capo. */
  flex-wrap: wrap;
}

.tl-bottoni {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Il menù dei giorni. `max-width` perché «mercoledì 19 agosto 2026» è lungo, e senza limite
   spinge il pulsante Riproduci fuori dallo schermo su un telefono stretto. `min-width: 0` e
   `text-overflow` perché dentro un flex un <select> non si lascia stringere sotto il suo
   contenuto: senza quei due, il max-width da solo non basta e la riga sborda lo stesso. */
.tl-scelta {
  max-width: 62vw;
  min-width: 0;
  text-overflow: ellipsis;
  padding: .45rem .5rem;
  border-radius: 8px;
  border: 1px solid var(--glass-line);
  background: var(--glass-fondo);
  color: var(--on-sky);
  font: inherit;
  font-size: .84rem;
}

.video-nota {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--on-sky-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.video-nota-avviso { color: var(--warn); }

/* Il riquadro ritaglia, e il contenuto ci scorre dentro ingrandito. transform-origin in alto a
   sinistra perche' tutto il calcolo dello spostamento, in video-zoom.js, parte da li'.
   Dal 22/08/2026 vale per QUALUNQUE riquadro .webcam-page-tile e non piu' solo per #video-zona:
   lo zoom e' arrivato sui fotogrammi del time-lapse e sul 4K, che vivono in riquadri gemelli. */
#video-zona {
  overflow: hidden;
  position: relative;
}

.webcam-page-tile img,
.webcam-page-tile video {
  transform-origin: 0 0;
}

#video-zona video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--deep);
}

/* Solo da ingranditi il dito serve a spostare l'immagine: prima deve restare libero di far
   scorrere la pagina, altrimenti la pagina diventa una trappola per chi passa di li'. */
.webcam-page-tile.video-ingrandito {
  touch-action: none;
  cursor: grab;
}
.webcam-page-tile.video-ingrandito:active { cursor: grabbing; }

/* I NOSTRI COMANDI STANNO FUORI DAL RIQUADRO, in una riga sotto. Ci sono arrivati per
   esclusione, e vale la pena avere scritte tutte e tre le tappe.
   19/08/2026 — erano in basso DENTRO il riquadro, sopra la barra del lettore: il cursore del
   volume finiva sotto i nostri + e −, e lo schermo intero sotto il ⟲. Spostati in alto.
   22/08/2026 — in alto ci scrivono le telecamere: a destra la data, a sinistra il nome della
   camera. La foto di Max mostra le tre pastiglie esattamente sopra «22/08/2026 16:36».
   La fascia in alto e' occupata su tutti e due i lati e quella in basso dal lettore: DENTRO il
   riquadro non esiste un posto libero, e cercarne uno rimpicciolendo le pastiglie avrebbe
   disfatto i 44 px del punto 9 della tempesta per litigare comunque con qualcosa.
   Fuori non c'e' niente da contendere — e in piu' non coprono il dettaglio che stai
   guardando proprio nel momento in cui lo guardi. */
.video-comandi {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.4rem;
}

/* La barra di scorrimento del nostro lettore, che compare solo da ingranditi al posto di
   quella del browser. `min-width: 0` non e' decorazione: dentro un flex un input ha una
   larghezza minima sua, e senza questa riga spingerebbe le tre pastiglie fuori dallo schermo
   su un telefono stretto. */
.video-barra {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--cyan);
}
.video-comandi [hidden] { display: none; }

/* 2,75rem = 44 px, la misura sotto la quale il dito comincia a sbagliare bersaglio. Erano
   35 px: e' la seconda meta' del punto 9 del TODO della tempesta. */
.video-comando {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: var(--on-sky);
  font-size: 0.95rem;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.video-comando:hover { background: rgba(0, 0, 0, 0.75); }

.back-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--on-sky);
  font-size: 0.85rem;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* --- Pagina Dati storici --- */
.data-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.data-presets button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--on-sky);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.data-presets button:hover { background: rgba(255, 255, 255, 0.16); }

.data-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.data-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--on-sky-dim);
}

.data-form input[type="date"] {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--on-sky);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
  color-scheme: dark;
}

.data-search-btn {
  background: var(--cyan);
  color: var(--sky-top);
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.data-search-btn:hover { background: color-mix(in srgb, var(--cyan) 80%, black); }

.data-note {
  font-size: 0.75rem;
  color: var(--on-sky-dim);
  line-height: 1.4;
  margin-top: 0.9rem;
}

/* Le note appoggiate direttamente sullo sfondo animato — cioè quelle figlie di
   <main> e non contenute in una card — erano grigio-azzurre senza fondo: sul
   gradiente "sereno", che in basso arriva a un giallo chiaro, risultavano
   illeggibili. Stesso rimedio già adottato per il footer: pannello scuro
   semi-trasparente, leggibile con qualunque cielo.
   Quelle dentro le card restano come sono: lì il fondo è già scuro. */
main > .data-note {
  color: var(--on-sky);
  background: rgba(10, 37, 64, 0.62);
  padding: 0.7rem 0.9rem;
  border-radius: var(--card-radius);
}

main > .data-note a {
  color: var(--cyan);
}

.data-status {
  font-size: 0.85rem;
  color: var(--on-sky-dim);
  margin-top: 0.75rem;
  padding: 0 0.25rem;
}
.data-status.error { color: var(--sun); }

.data-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.data-summary-item {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.75rem;
  text-align: center;
}

.data-summary-value {
  font-size: 1.4rem;
  font-weight: 700;
}
.data-summary-value .unit-small { font-size: 0.85rem; font-weight: 400; margin-left: 0.1rem; }

.data-summary-label {
  font-size: 0.7rem;
  color: var(--on-sky-dim);
  margin-top: 0.2rem;
}

.data-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.data-csv-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--on-sky);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.data-csv-btn:hover { background: rgba(255, 255, 255, 0.18); }

.data-table-scroll {
  overflow-x: auto;
  margin-top: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.65rem;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
}

.data-table th {
  color: var(--on-sky-dim);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* --- Pagina Record --- */
/* La griglia dei record ha margin-top ma non bottom, e la sezione dell'archivio non
   aveva margini: le due si toccavano, zero pixel misurati. Stesso valore del margine
   della griglia, cosi' lo stacco fra i due blocchi e' quello di tutta la pagina. */
#record-archivio {
  margin-top: 0.75rem;
}

/* --- Pagina Terremoti --- */
.quake-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.quake-row:last-child { border-bottom: none; }

.quake-mag {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sky-top);
}

.quake-info { flex: 1; min-width: 0; }
.quake-place { font-weight: 600; font-size: 0.95rem; }
.quake-detail { font-size: 0.78rem; color: var(--on-sky-dim); margin-top: 0.1rem; }

/* --- Onda animata (pagina Mare) --- */
.sea-wave-wrap {
  position: relative;
  /* Alzato da 56px per lasciare spazio sopra alle onde alla barchetta,
     che col mare agitato sale di una decina di pixel */
  height: 104px;
  margin-top: 0.85rem;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(74, 163, 224, 0.08), rgba(74, 163, 224, 0.18));
}

.sea-wave-layer {
  position: absolute;
  left: 0; right: -100px; bottom: 0;
  height: 40px;
  background-repeat: repeat-x;
  background-size: 100px 40px;
}

.sea-wave-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M0 22 Q25 8 50 22 T100 22 V40 H0 Z' fill='%234aa3e0' fill-opacity='0.35'/%3E%3C/svg%3E");
  animation: sea-wave-scroll 7s linear infinite;
  bottom: 4px;
}

.sea-wave-front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cpath d='M0 26 Q25 12 50 26 T100 26 V40 H0 Z' fill='%234aa3e0' fill-opacity='0.6'/%3E%3C/svg%3E");
  animation: sea-wave-scroll 4.5s linear infinite;
}

@keyframes sea-wave-scroll {
  from { background-position-x: 0; }
  to { background-position-x: -100px; }
}

/* Velocità/ampiezza proporzionali all'altezza d'onda reale (impostate via JS) */
.sea-wave-wrap.sea-state-calmo .sea-wave-back,
.sea-wave-wrap.sea-state-calmo .sea-wave-front { animation-duration: 12s; opacity: 0.6; }
.sea-wave-wrap.sea-state-mosso .sea-wave-back { animation-duration: 5s; }
.sea-wave-wrap.sea-state-mosso .sea-wave-front { animation-duration: 3s; }
.sea-wave-wrap.sea-state-agitato .sea-wave-back { animation-duration: 3s; }
.sea-wave-wrap.sea-state-agitato .sea-wave-front { animation-duration: 1.6s; }

/* --- Barchetta sulle onde ---
   Sta fra i due livelli d'onda: quello frontale le copre in parte lo scafo, così
   sembra immersa invece che appoggiata sopra. Beccheggio e rollio sono su due
   elementi annidati perché sono due transform separate: sullo stesso elemento
   la seconda animazione sostituirebbe la prima. */
.sea-boat {
  position: absolute;
  left: 22%;
  bottom: 14px;
  width: 62px;
  z-index: 1;
  --bob: 4px;      /* quanto sale e scende */
  --dur: 4.5s;     /* un ciclo per ogni onda che passa */
  animation: sea-boat-bob var(--dur) ease-in-out infinite;
}

.sea-boat svg {
  width: 100%;
  height: auto;
  display: block;
}

.sea-boat-rock {
  --tilt: 4deg;
  --rock-dur: 6s;  /* leggermente sfasato dal beccheggio: meno meccanico */
  transform-origin: 50% 85%;   /* ruota attorno alla linea di galleggiamento */
  animation: sea-boat-rock var(--rock-dur) ease-in-out infinite;
}

.sea-boat-hull { fill: #e0563f; }   /* illustrazione: barchetta sulle onde */
.sea-boat-sail { fill: #fdfaf3; }   /* illustrazione: barchetta sulle onde */
.sea-boat-jib { fill: #ffe9a8; }   /* illustrazione: barchetta sulle onde */

@keyframes sea-boat-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--bob) * -1)); }
}

@keyframes sea-boat-rock {
  0%, 100% { transform: rotate(calc(var(--tilt) * -1)); }
  50% { transform: rotate(var(--tilt)); }
}

/* Il movimento segue lo stato reale del mare: appena percettibile col mare calmo,
   marcato quando è agitato. Le durate ricalcano quelle dell'onda frontale, così
   la barca sale e scende in tempo con le onde che le passano sotto. */
.sea-wave-wrap.sea-state-calmo .sea-boat { --bob: 1.5px; --dur: 12s; }
.sea-wave-wrap.sea-state-calmo .sea-boat-rock { --tilt: 1.5deg; --rock-dur: 9s; }

.sea-wave-wrap.sea-state-mosso .sea-boat { --bob: 6px; --dur: 3s; }
.sea-wave-wrap.sea-state-mosso .sea-boat-rock { --tilt: 7deg; --rock-dur: 4s; }

.sea-wave-wrap.sea-state-agitato .sea-boat { --bob: 11px; --dur: 1.6s; }
.sea-wave-wrap.sea-state-agitato .sea-boat-rock { --tilt: 15deg; --rock-dur: 2.1s; }

/* --- Pagina Dona --- */
.donate-card { text-align: center; }
.donate-title {
  font-size: 1.4rem;
  color: var(--cyan);
  margin: 0.5rem 0 1rem;
}
.donate-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--on-sky);
  margin: 0 0 0.9rem;
  text-align: left;
}
.donate-btn-link {
  display: inline-block;
  margin-top: 0.5rem;
}
.donate-btn-link img {
  border: 0;
}

/* --- Pagina Roadmap --- */
.roadmap-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.6;
  font-size: 0.92rem;
}
.roadmap-list li { margin-bottom: 0.5rem; }

/* I link dentro il testo delle card erano lasciati al blu di default del browser.
   Misurato: quel blu (0,0,238) sul fondo di una card (--glass sopra il cielo) fa 1.16:1 in alto
   e 1.63:1 in basso — cioe' illeggibile, non "poco elegante". Il --cyan che usiamo
   altrove arriverebbe a 3.02:1 nel punto peggiore, sotto la soglia 4.5 per un testo
   normale. Quindi il testo resta bianco come il resto (5.8-8.1:1) e a fare il link e'
   la sottolineatura ciano: il colore lo porta il segno, non le lettere.
   Solo i link senza classe: quelli con una classe hanno gia' il loro stile. */
.card p a:not([class]),
.card li a:not([class]) {
  color: var(--on-sky);
  text-decoration: underline;
  text-decoration-color: var(--cyan);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.card p a:not([class]):hover,
.card li a:not([class]):hover { text-decoration-color: var(--on-sky); }

/* --- Voci menu speciali: Dona e App (CTA) --- */
.nav-donate-link {
  color: var(--good) !important;
  font-weight: 600;
}

/* --- Mini-grafico al passaggio del mouse (home: pressione/temp/umidità/pioggia) --- */
/* Il grafico si apre al clic: il cursore deve dirlo */
.hoverable-chart-card {
  cursor: pointer;
}

.hover-chart-tooltip {
  position: absolute;
  width: 300px;
  max-width: 90vw;
  background: var(--glass-strong);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  border-radius: 14px;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.hover-chart-box { margin-top: .4rem; }
.hover-chart-box svg { display: block; width: 100%; }

.hover-chart-legend {
  display: flex;
  gap: 0.9rem;
  font-size: 0.72rem;
  color: var(--on-sky-dim);
  margin-bottom: 0.35rem;
}

.hover-chart-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.3rem;
}

.hover-chart-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

.hover-chart-title {
  font-size: 0.78rem;
  color: var(--on-sky-dim);
  margin-bottom: 0.4rem;
}

.hover-chart-empty {
  font-size: 0.8rem;
  color: var(--on-sky-dim);
  padding: 1rem 0;
  text-align: center;
}

/* --- Pagina Marine Traffic --- */
.mt-frame-wrap {
  margin-top: 0.75rem;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--glass);
}

.mt-frame-wrap iframe {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 0;
  display: block;
}

/* --- Pagina Radar --- */
.radar-frame-wrap {
  margin-top: 0.75rem;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--glass);
  position: relative;
}

#radar-map {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  background: var(--glass);
}

.radar-controls {
  position: absolute;
  /* Da angolo a fascia: la barra del tempo ha bisogno di tutta la larghezza per essere
     trascinabile col pollice. Prima era una pastiglia in basso a sinistra con dentro un
     orologio che non si vedeva. */
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 500;
  background: rgba(10, 37, 64, 0.85);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--on-sky);
}

.radar-barra {
  flex: 1;
  min-width: 0;          /* senza questo il cursore sfonda la pastiglia sui telefoni stretti */
  height: 1.5rem;        /* il bersaglio da toccare, non lo spessore della riga disegnata */
  accent-color: var(--cyan);
  cursor: pointer;
}

.radar-ora {
  font-variant-numeric: tabular-nums;   /* se no la riga balla a ogni cambio di minuto */
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

/* L'ora e' la cosa che si legge di corsa, quindi e' la piu' grande della pastiglia. Prima
   era della stessa taglia di tutto il resto, ed era il difetto segnalato: «un orologio che
   nemmeno si vede». */
.radar-ora b {
  font-size: 1.05rem;
  font-weight: 700;
}

.radar-eta {
  font-size: 0.7rem;
  opacity: 0.8;
}

/* La legenda. I colori sono stati LETTI DAI PIXEL delle tile vere (19/08/2026, echi sopra
   la Manica e il nord della Francia, dove pioveva), non presi da una tabella: la tabella
   pubblicata da RainViewer non corrisponde a quello che l'indirizzo serve davvero — dava
   tutto blu, mentre la mappa mostra anche giallo, arancio e rosso. Sono dichiarati come
   eccezione perche' non sono colori del sito: sono un dato. */
.radar-legenda {
  margin-top: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: rgba(10, 37, 64, 0.55);
  border-radius: var(--card-radius);
  color: var(--on-sky);
  font-size: 0.75rem;
}

.radar-legenda-titolo {
  font-weight: 600;
}

/* Sotto le parole, su una riga sua. Era affiancata al titolo con un float, e il float si
   e' mangiato meta' della scala: le cinque bande venivano schiacciate a sinistra e le parole
   non stavano piu' sotto il loro colore. Pubblicato cosi' per una decina di minuti. */
/* Le etichette delle tappe (+30, +60 minuti) sulla mappa: leggibili sopra il mare e sopra
   la terra, quindi fondo scuro e testo chiaro, senza la punta bianca dei fumetti Leaflet. */
.radar-tappa {
  background: rgba(10, 37, 64, 0.85);
  border: 0;
  color: var(--on-sky);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  box-shadow: none;
}
.radar-tappa::before { display: none; }

.radar-legenda-tocca {
  margin: 0.45rem 0 0;
  opacity: 0.75;
  font-size: 0.72rem;
}

.radar-legenda-barra {
  height: 0.55rem;
  margin: 0.35rem 0 0.25rem;
  border-radius: 999px;
  background: linear-gradient(to right, #88ddee 0%, #1baee2 25%, #0088bf 25%, #004768 50%, #ffee00 50%, #ffb700 75%, #ffaa00 75%, #ff3300 100%); /* illustrazione: non sono colori del sito, sono il DATO — letti dai PIXEL delle tile vere. Quattro bande come le quattro parole di classeIntensita(): dentro ogni banda il colore sfuma perche' la scala vera ha venti gradini di blu e dieci di caldo, fra una banda e l'altra lo stacco e' netto perche' li' cambia la parola. */
}

/* Una parola sotto ogni banda, incolonnata con essa: con le parole spinte agli estremi
   «moderata» finiva a cavallo fra due colori e la legenda si leggeva storta. */
.radar-legenda-voci {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  opacity: 0.85;
}

@media (max-width: 380px) {
  /* Sui telefoni piu' stretti le parole si rimpiccioliscono invece di sparire: togliendone
     due, le tre rimaste non starebbero piu' sotto la loro banda. */
  .radar-legenda-voci { font-size: 0.62rem; }
}

.radar-toggle-btn {
  background: var(--cyan);
  color: var(--sky-top);
  border: none;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  text-align: center;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0.75rem 5.5rem;
  font-size: 0.75rem;
  color: var(--on-sky);
  background: rgba(10, 37, 64, 0.55);
  border-radius: var(--card-radius);
}

footer a {
  color: var(--on-sky);
}

/* --- Previsioni --- */
.forecast-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.forecast-summary-icon {
  line-height: 1;
}
.forecast-summary-icon .wi { width: 52px; height: 52px; }

.forecast-summary-label {
  font-weight: 600;
}

.forecast-summary-temps {
  color: var(--on-sky-dim);
  font-size: 0.9rem;
}

.forecast-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

/* Scorrimento unico per grafico e colonne: devono muoversi insieme, altrimenti
   la curva finisce sopra il giorno sbagliato. */
.days-scroll {
  overflow-x: auto;
  margin-top: .75rem;
  padding-bottom: .3rem;
  scrollbar-width: thin;
}

.days-inner { width: max-content; }

.days-chart svg { display: block; }

.strip.strip-days { gap: 0; }

.strip.strip-days .strip-item {
  width: 74px;
  gap: .18rem;
  padding: .2rem 0 .4rem;
}

/* Altezze di riga FISSE nella striscia a sei giorni. Senza, ogni colonna si dava l'altezza
   dal proprio contenuto e la colonna delle etichette — testo piu' piccolo dei numeri — si
   sarebbe disallineata da tutte le altre: «pioggia» non sarebbe stato sulla riga delle
   percentuali. Con le righe fissate, il testo di ogni cella puo' avere la misura che gli
   serve senza spostare niente. */
.strip.strip-days .strip-item > .strip-h  { height: 1.15rem; }
.strip.strip-days .strip-item > .day-icon { height: 34px; }
.strip.strip-days .strip-item > .day-max  { height: 1.35rem; }
.strip.strip-days .strip-item > .day-min  { height: 1.2rem; }
.strip.strip-days .strip-item > .strip-p  { height: 1.05rem; }
.strip.strip-days .strip-item > .day-wind { height: 2.3rem; }
.strip.strip-days .strip-item > span {
  display: flex; align-items: center; justify-content: center; line-height: 1.1;
}

/* La colonna che dice cosa sono quei numeri: allineata a destra, verso i valori che nomina. */
.strip.strip-days .strip-item.strip-etichette {
  width: 58px;
  padding-right: .3rem;
}
.strip-etichette > span {
  justify-content: flex-end !important;
  color: var(--on-sky-dim) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  text-align: right;
}

.day-icon { display: block; }
.day-icon .wi { width: 34px; height: 34px; }

.day-max { color: var(--hot); }
.day-min { color: var(--cold); font-size: .85rem; }

.day-wind {
  font-size: .68rem;
  line-height: 1.25;
  color: var(--on-sky-dim);
  font-variant-numeric: tabular-nums;
}

/* La lista breve della home resta com'era: il markup a colonne arriva col piano 3 */
.forecast-list {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  margin-top: 0.75rem;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.forecast-day-card {
  background: var(--glass);
  border-radius: var(--card-radius);
  padding: 1rem 0.85rem;
  min-width: 140px;
  flex: 0 0 auto;
  text-align: center;
}

.forecast-day-label {
  font-size: 0.8rem;
  color: var(--on-sky-dim);
}

.forecast-day-icon {
  margin: 0.4rem 0;
}
.forecast-day-icon .wi { width: 46px; height: 46px; }

.forecast-day-desc {
  font-size: 0.72rem;
  color: var(--on-sky-dim);
  min-height: 2.2em;
}

.forecast-day-temps {
  font-size: 1.1rem;
  margin-top: 0.4rem;
}

.forecast-day-detail {
  font-size: 0.7rem;
  color: var(--on-sky-dim);
  margin-top: 0.25rem;
}

.forecast-note {
  font-size: 0.78rem;
  color: var(--on-sky-dim);
  line-height: 1.4;
  margin-top: 0.75rem;
}

/* I sei giorni su un telefono: righe, non schede da scorrere.
   ------------------------------------------------------------------------------------------
   Segnalato da Max il 20/08/2026: «in quella card sono visibili, senza scroll, solo due giorni».
   Aveva ragione, ed era peggio di un fastidio. Le schede sono larghe 140 px e stanno in una
   striscia che scorre in orizzontale: su uno schermo da telefono ne entrano DUE, e le altre
   quattro esistono solo per chi indovina che la striscia si trascina. Quattro giorni su sei
   nascosti dietro un gesto che nessuno annuncia — cioe' la previsione a sei giorni, che e' il
   motivo per cui quella card esiste, per la maggior parte di chi guarda non c'era.

   In verticale ci stanno tutti e sei senza chiedere niente: il telefono lo spazio ce l'ha, solo
   nell'altra direzione. Sopra i 980 px resta la griglia a sei colonne, che li mostrava gia'
   tutti e non ha mai avuto il problema. */
@media (max-width: 759px) {
  .forecast-list {
    flex-direction: column;
    gap: 0.35rem;
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Due righe, e la seconda occupa TUTTA la larghezza.
     ----------------------------------------------------------------------------------------
     Il primo tentativo teneva la nota nella colonna centrale insieme alla descrizione, e a
     conti fatti a quella colonna restavano 93 px su 390: «Pioggia 0.0 mm (0%) · Vento max
     14 km/h da SO» ci andava a capo tre volte, e la riga diventava alta 146 px. Sei righe
     cosi' sono 900 px — piu' di uno schermo intero per una card, cioe' lo stesso problema di
     prima con un'altra faccia. Segnalato da Max: «troppo spazio all'interno di ogni riga».

     Sotto, il pieno-larghezza: la riga in alto porta giorno, icona, tempo che fa e
     temperature; la nota si stende sotto tutte e cinque le colonne e ci sta in una riga sola. */
  .forecast-day-card,
  a.forecast-day-card {
    display: grid;
    grid-template-columns: 3.1rem 2rem 1fr auto 0.7rem;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.1rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    text-align: left;
  }

  .forecast-day-label { grid-column: 1; grid-row: 1; font-size: 0.76rem; }
  .forecast-day-icon  { grid-column: 2; grid-row: 1; margin: 0; line-height: 0; }
  .forecast-day-icon .wi { width: 28px; height: 28px; }

  .forecast-day-desc {
    grid-column: 3; grid-row: 1;
    min-height: 0;            /* le due righe riservate servivano ad allineare le schede */
    font-size: 0.78rem;
    line-height: 1.25;
    /* Va a capo, e non si taglia. Il primo tentativo tagliava con i puntini per tenere tutte le
       righe alte uguali, e il risultato erano «Prevalentemente ...» e «Parzialmente nuv...»:
       spariva proprio la parola che dice che tempo fa, e una frase mozzata si legge come un
       difetto del sito, non come una scelta. Due righe costano 15 px su quei giorni; la parola
       «sereno» vale piu' di 15 px. */
  }

  .forecast-day-temps {
    grid-column: 4; grid-row: 1;
    margin: 0;
    font-size: 0.95rem;
    text-align: right;
    white-space: nowrap;      /* «31° / 27°» non si spezza mai a meta' */
  }

  /* Tutta la larghezza: e' la riga che prima faceva esplodere l'altezza.

     Insieme a lei `.forecast-day-detail`, che e' la stessa cosa con un altro nome: la usa solo
     la pagina del mare ("Onda massima attesa"). Fino al 23/08/2026 qui dentro non era nominata,
     quindi la griglia la sistemava dove capitava — nella colonna 2, quella larga 2rem riservata
     all'icona, che sul mare e' vuota perche' le onde non hanno un'icona. Da li' il testo andava
     a capo tre volte e finiva SOPRA la parola "Mosso" della colonna 3. Segnalato da Max con una
     schermata. Vale oltre questo caso: in una griglia con le colonne assegnate a mano, un
     elemento non nominato non resta fuori — si siede nel primo posto libero che trova. */
  .forecast-day-note,
  .forecast-day-detail {
    grid-column: 1 / -1; grid-row: 2;
    margin: 0;
    padding-left: 0.1rem;
  }
}

/* La riga dei dettagli sotto la descrizione: pioggia e vento separati da un punto medio invece
   che su due righe. Su un telefono due righe di sette parole ciascuna fanno una riga alta il
   doppio di quello che dice; affiancate stanno in una sola e si leggono uguale. */
.forecast-day-note {
  font-size: 0.7rem;
  color: var(--on-sky-dim);
  margin-top: 0.25rem;
  line-height: 1.35;
}

/* Le righe dei prossimi giorni portano da qualche parte, e devono dirlo.
   ------------------------------------------------------------------------------------------
   Richiesta di Max il 20/08/2026. Una riga cliccabile che non sembra cliccabile e' peggio di una
   riga ferma: chi la guarda non ci prova, e chi ci prova per caso scopre una cosa che non gli era
   stata offerta. Quindi cursore, freccia e una reazione al tocco. */
a.forecast-day-card {
  /* NIENTE display qui. C'era «display: block», ed e' costato la resa sbagliata vista da Max
     il 20/08/2026: `a.forecast-day-card` pesa piu' di `.forecast-day-card`, quindi vinceva
     anche sulla `display: grid` dentro la media query del telefono — e le righe tornavano una
     pila di elementi alta 146 px invece di una riga da 60. La cascata non guarda le media
     query, guarda la specificita'.
     Non serve nemmeno: dentro un contenitore flex o grid un <a> diventa blocco da solo. */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
a.forecast-day-card:hover,
a.forecast-day-card:focus-visible {
  background: var(--glass-strong, rgba(255, 255, 255, 0.16));
}
a.forecast-day-card:focus-visible {
  outline: 2px solid var(--on-sky);
  outline-offset: 2px;
}
/* Il tocco ha bisogno di una risposta immediata: sul telefono non c'e' il passaggio del mouse
   a dire che quella cosa risponde, e mezzo secondo di dubbio basta a farla premere due volte. */
a.forecast-day-card:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  a.forecast-day-card { transition: none; }
  a.forecast-day-card:active { transform: none; }
}

/* La freccia solo sul telefono, dove le righe sono larghe e c'e' posto in fondo. Nella griglia
   a sei colonne le schede sono strette e una freccia in piu' toglierebbe spazio ai numeri. */
@media (max-width: 759px) {
  a.forecast-day-card::after {
    content: '\203A';                 /* › */
    grid-column: 5;
    grid-row: 1;
    color: var(--on-sky-dim);
    font-size: 1.1rem;
    line-height: 1;
    padding-left: 0.15rem;
  }
}

/* Il giorno su cui si e' atterrati, nella pagina ora per ora: un lampo e poi torna normale.
   Serve a rispondere in un istante alla domanda «perche' sono qui»; se restasse acceso
   diventerebbe una decorazione permanente che non significa piu' niente. */
.fh-giorno-scelto {
  animation: fh-lampo 2.4s ease-out 1;
}
@keyframes fh-lampo {
  0%, 55% { box-shadow: 0 0 0 2px var(--on-sky) inset; }
  100%    { box-shadow: 0 0 0 2px transparent inset; }
}
@media (prefers-reduced-motion: reduce) {
  .fh-giorno-scelto { animation: none; box-shadow: 0 0 0 2px var(--on-sky) inset; }
}

/* Quando il giorno chiesto non c'e'. */
.fh-manca { border-left: 3px solid var(--sun); }


/* La colonna delle etichette sta FUORI dalla zona che scorre.
   ------------------------------------------------------------------------------------------
   Segnalato da Max il 20/08/2026: «i valori mm km scorrono verso sinistra col grafico e non si
   leggono più». Sul telefono la striscia mostra quattro giorni su sei, e trascinando per vedere
   gli altri se ne andava anche «max / min / pioggia / vento km/h»: restavano quattro numeri
   incolonnati senza nome. Cioe' la colonna nata il 19 agosto proprio perche' «chi arriva la
   prima volta deve indovinare cosa siano» spariva nel momento in cui serviva di piu'.

   Il primo rimedio la incollava con `position: sticky`. Funzionava — restava ferma — ma
   copriva: un pannello opaco sopra una card di vetro si legge come una toppa, e i giorni ci
   passavano sotto a meta'. Provata anche traslucida, con sfocatura forte: peggio, i numeri
   dietro si vedevano lo stesso e sembrava un difetto di disegno.
   La soluzione non era coprire meglio: era non avere niente da coprire. */
.days-frame { display: flex; align-items: flex-start; }
/* Lo stesso margine in alto della zona che scorre: senza, le parole stanno dodici pixel piu'
   in alto dei numeri che nominano — e dodici pixel bastano perche' «pioggia» finisca sulla riga
   delle minime. E' il margine di .days-scroll, che qui va ripetuto perche' le due colonne sono
   sorelle e non piu' una dentro l'altra. */
.days-fisso { flex: 0 0 auto; margin-top: .75rem; }
.days-scroll { flex: 1 1 auto; min-width: 0; }

/* Lo spazio che tiene le parole allineate alla riga dei numeri: alto quanto il grafico, e
   l'altezza gliela scrive forecast.js dopo averlo disegnato. */
.days-fisso-spazio { width: 100%; }

/* --- Nowcast fisico 0-2h --- */
.nowcast-signals {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--on-sky);
  line-height: 1.5;
}

/* La riga che spiega da dove viene il conteggio degli analoghi: sta sotto il verdetto e
   deve leggersi come una nota, non come una seconda notizia. `[hidden]` esplicito perche'
   in questo foglio ha gia' perso due volte contro un display piu' specifico. */
.nowcast-perche {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--on-sky-dim);
  line-height: 1.45;
}

.nowcast-perche[hidden] { display: none; }

.nowcast-note {
  font-size: 0.75rem;
  color: var(--on-sky-dim);
  line-height: 1.4;
  margin-top: 0.6rem;
}

.nowcast-note a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: underline;
}

.nowcast-advice-wrap {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

/* Intestazione cliccabile: apre e chiude l'elenco dei consigli */
.nowcast-advice-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cyan);
  font-weight: 700;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0.2rem 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.nowcast-advice-arrow {
  display: inline-block;
  font-size: 0.85em;
  transition: transform 0.18s ease;
}

.nowcast-advice-title[aria-expanded="true"] .nowcast-advice-arrow {
  transform: rotate(90deg);
}

/* Quanti consigli ci sono, cosi' si capisce che vale la pena aprire */
.nowcast-advice-count:not(:empty) {
  background: var(--cyan);
  color: var(--sky-top);
  border-radius: 999px;
  padding: 0 6px;
  font-size: 0.68rem;
  line-height: 1.5;
}

.nowcast-advice-list {
  margin: 0;
}

/* Stessa intestazione cliccabile dei consigli, ma fuori da .nowcast-advice-wrap:
   il separatore tratteggiato va messo qui a mano. */
#nowcast-about-toggle {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

/* --- Card in risalto (Nowcast) --- */
.card-featured {
  border: 1.5px solid var(--sun);
  background: linear-gradient(155deg, var(--glass) 60%, color-mix(in srgb, var(--sun) 12%, transparent) 100%);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--sun) 18%, transparent);
}

.card-featured .card-head h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-featured .forecast {
  font-size: 1.05rem;
  font-weight: 600;
}

.nowcast-badge {
  display: inline-block;
  background: var(--cyan);
  color: var(--sky-top);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* --- Altre temperature (home) --- */
.other-temps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.other-temps-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 0.6rem 0.4rem;
}

.other-temps-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.other-temps-label {
  font-size: 0.68rem;
  color: var(--on-sky-dim);
  margin-top: 0.15rem;
}

/* --- Vento in versione compatta (dentro alla griglia a 4, non più a riga intera) --- */
.wind-card-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.wind-card-compact .compass-small {
  width: 56px;
  height: 56px;
}

.wind-card-compact .wind-numbers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.wind-card-compact .detail {
  font-size: 0.7rem;
}

/* La stazione di provenienza sta sotto e smorzata: e' un'etichetta, non un dato. */
.wind-fonte {
  margin-top: .15rem;
  opacity: .75;
  font-style: italic;
}

/* --- Sfondo animato (home) --- */
.weather-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: background 1.8s ease;
  background: var(--sky-top);
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

/* giorno: cielo sereno */
.weather-bg.cond-sunny {
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 100%);
}

/* parzialmente nuvoloso: intermedio fra giorno e coperto, meno saturo, basso più chiaro */
.weather-bg.cond-partly-cloudy {
  background: linear-gradient(180deg, var(--partly-top) 0%, var(--partly-mid) 55%, var(--partly-low) 100%);
}

/* coperto */
.weather-bg.cond-cloudy {
  background: linear-gradient(180deg, var(--cloudy-top) 0%, var(--cloudy-mid) 60%, var(--cloudy-low) 100%);
}

/* tramonto/crepuscolo (la classe copre sia l'alba che il tramonto: elevazione solare bassa) */
.weather-bg.cond-sunset {
  background: linear-gradient(180deg, var(--dusk-top) 0%, var(--dusk-mid) 55%, var(--dusk-low) 100%);
}

/* pioggia: grigio-azzurro diurno, scuro e desaturato ma chiaramente di giorno (non notte) */
.weather-bg.cond-rain {
  background: linear-gradient(180deg, var(--rain-top) 0%, var(--rain-mid) 60%, var(--rain-low) 100%);
}

/* notte: caricamento condivide la stessa gradazione scura */
.weather-bg.cond-night,
.weather-bg.cond-loading {
  background: linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 60%, var(--night-low) 100%);
}

.bg-sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d0 0%, #ffe37a 55%, rgba(255, 227, 122, 0) 75%);   /* illustrazione: bagliore del sole */
  box-shadow: 0 0 60px 20px rgba(255, 227, 122, 0.5);
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: bg-sun-pulse 6s ease-in-out infinite;
}

.weather-bg.cond-sunny .bg-sun {
  opacity: 1;
}

.weather-bg.cond-partly-cloudy .bg-sun,
.weather-bg.cond-loading .bg-sun {
  opacity: 0.55;
}

/* --- Sole "caldo": raggi rotanti e disco più acceso ---
   Le classi heat-warm / heat-hot le mette weather-bg.js dalla temperatura reale
   della stazione. Di default i raggi sono invisibili: nelle giornate miti lo
   sfondo resta quello di prima.
   I raggi sono figli di .bg-sun, che ha opacity 0 quando è coperto o è notte:
   quindi spariscono da soli, senza bisogno di ripetere le condizioni qui. */
.bg-sun-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 210, 80, 0.5) 0deg 3deg,
    rgba(255, 210, 80, 0) 3deg 22.5deg
  );
  /* i raggi non devono coprire il disco né tagliarsi di netto all'esterno */
  -webkit-mask-image: radial-gradient(circle, transparent 22%, #000 34%, #000 52%, transparent 76%);   /* illustrazione: maschera, il nero e opacita non colore */
  mask-image: radial-gradient(circle, transparent 22%, #000 34%, #000 52%, transparent 76%);   /* illustrazione: maschera, il nero e opacita non colore */
  animation: bg-rays-spin 50s linear infinite;
}

@keyframes bg-rays-spin {
  to { transform: rotate(360deg); }
}

.weather-bg.heat-warm .bg-sun-rays {
  opacity: 0.55;
}

.weather-bg.heat-warm .bg-sun {
  background: radial-gradient(circle, #fff3bc 0%, #ffd257 55%, rgba(255, 210, 87, 0) 75%);   /* illustrazione: bagliore del sole */
  box-shadow: 0 0 70px 26px rgba(255, 200, 70, 0.55);
}

.weather-bg.heat-hot .bg-sun-rays {
  opacity: 0.9;
  animation-duration: 26s;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 170, 45, 0.62) 0deg 3.5deg,
    rgba(255, 170, 45, 0) 3.5deg 20deg
  );
}

.weather-bg.heat-hot .bg-sun {
  background: radial-gradient(circle, #fff0a8 0%, #ffb43c 52%, rgba(255, 150, 45, 0) 76%);   /* illustrazione: bagliore del sole */
  box-shadow: 0 0 90px 34px rgba(255, 150, 45, 0.6);
  animation-duration: 3.5s;   /* pulsazione più rapida: l'aria che vibra */
}

.weather-bg.cond-sunset .bg-sun {
  opacity: 0.9;
  top: 60%;
  background: radial-gradient(circle, #fff0c0 0%, #ff9a4a 55%, rgba(255, 154, 74, 0) 75%);   /* illustrazione: bagliore del sole */
  box-shadow: 0 0 70px 26px rgba(255, 140, 60, 0.55);
}

@keyframes bg-sun-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.bg-moon {
  position: absolute;
  top: 9%;
  right: 13%;
  font-size: 56px;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: drop-shadow(0 0 16px rgba(245, 248, 250, 0.45));
}

.weather-bg.cond-night .bg-moon {
  opacity: 1;
}

.bg-clouds .cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.2s ease, background 1.2s ease;
}

.bg-clouds .cloud::before,
.bg-clouds .cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud-1 { width: 130px; height: 42px; top: 14%; left: -25%; animation: bg-drift 46s linear infinite; }
.cloud-1::before { width: 62px; height: 62px; top: -26px; left: 18px; }
.cloud-1::after { width: 50px; height: 50px; top: -16px; left: 64px; }

.cloud-2 { width: 95px; height: 32px; top: 24%; left: -35%; animation: bg-drift 60s linear infinite; animation-delay: -18s; }
.cloud-2::before { width: 46px; height: 46px; top: -20px; left: 12px; }
.cloud-2::after { width: 38px; height: 38px; top: -12px; left: 48px; }

.cloud-3 { width: 80px; height: 26px; top: 6%; left: -45%; animation: bg-drift 70s linear infinite; animation-delay: -35s; }
.cloud-3::before { width: 38px; height: 38px; top: -16px; left: 10px; }
.cloud-3::after { width: 32px; height: 32px; top: -10px; left: 40px; }

@keyframes bg-drift {
  from { transform: translateX(0); }
  to { transform: translateX(140vw); }
}

/* Le nuvole sono sempre presenti e in movimento (anche in sunny/loading/sunset):
   così c'è sempre un'animazione percepibile sullo sfondo. */
.weather-bg.cond-sunny .cloud,
.weather-bg.cond-loading .cloud,
.weather-bg.cond-sunset .cloud {
  opacity: 0.55;
}

.weather-bg.cond-partly-cloudy .cloud {
  opacity: 0.9;
}

.weather-bg.cond-cloudy .cloud,
.weather-bg.cond-rain .cloud {
  opacity: 0.85;
  background: rgba(205, 216, 226, 0.85);
}

.weather-bg.cond-night .cloud {
  opacity: 0.25;
  background: rgba(160, 175, 190, 0.6);
}

.bg-rain {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.weather-bg.cond-rain .bg-rain {
  opacity: 1;
}

.bg-rain .drop {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 16px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(200, 225, 255, 0.7));
  animation: bg-fall linear infinite;
}

@keyframes bg-fall {
  from { transform: translateY(-10vh); }
  to { transform: translateY(110vh); }
}

.bg-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.weather-bg.cond-night .bg-stars {
  opacity: 1;
}

.bg-stars .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--on-sky);
  border-radius: 50%;
  animation: bg-twinkle 3s ease-in-out infinite;
}

@keyframes bg-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* ---------- hero della home ---------- */
/* La foto di Marina Grande e' uscita di scena col restyling: la spec tiene fuori
   gli sfondi fotografici, il testo sopra la foto diventava rumore. Il fondo e' il
   gradiente di cielo dinamico di weather-bg.js. */
/* Finché c'era la foto, l'hero aveva un fondo suo. Ora il testo sta direttamente
   sul cielo animato, dove il sole decorativo e le nuvole gli passano dietro: senza
   quest'ombra il bianco sul disco giallo non si legge. Sul cielo pulito non si vede. */
.hero,
.intro,
.metrics { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }

/* Niente selezione su gradi, condizione e valori delle card. Non e' una scelta
   estetica: Chrome su Android, quando si tocca del testo selezionabile che non e'
   dentro un elemento interattivo, apre da solo la barra "Tocca per cercare" in
   fondo allo schermo -- una tendina scura che copre il contenuto e che l'utente
   deve chiudere a mano. Toccare i gradi e' il gesto piu' naturale che ci sia su
   questa schermata, e ogni volta partiva quella barra. Il testo qui e' un valore
   letto, non un contenuto da copiare: reso non selezionabile, il browser non ha
   piu' niente su cui offrire la ricerca. Il resto della pagina resta copiabile. */
.hero,
.metrics {
  -webkit-user-select: none;
  user-select: none;
}

.hero { text-align: center; padding: .5rem 1rem 1.1rem; }

/* Il nome dell'isola apre l'hero: l'app misura e prevede solo qui, e chi arriva da
   una ricerca o da un link condiviso non ha nessun altro modo di saperlo -- la pagina
   non lo dice da nessuna parte prima del footer. */
/* Dal 17/08/2026 e' l'h1 della home. Corpo e peso li dichiara gia' la regola; il margine
   superiore no, e il default dell'h1 spingerebbe giu' tutto l'hero: va azzerato a mano. */
.hero-luogo {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--on-sky);
  margin: 0 0 .1rem;
}

.hero-icon { margin: .2rem auto .1rem; }

.hero-icon .wi {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.temp-big {
  font-size: 4.6rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.temp-big sup {
  font-size: .34em;
  font-weight: 300;
  vertical-align: super;
  letter-spacing: 0;
}

/* Freccia di tendenza accanto ai gradi. I colori NON sono quelli della pressione:
   li' salire e' un miglioramento, qui salire vuol dire caldo. Rosso in salita,
   azzurro in discesa, smorzato quando e' stabile. */
.hero-trend {
  font-size: 1.5rem;
  vertical-align: 0.9rem;
  margin-left: 0.35rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.hero-trend.su { color: var(--hot); }
/* Bianco, non azzurro: --cold su un cielo azzurro e' blu su blu, e la freccia
   spariva. Il verso lo porta il glifo; il colore evidenzia la salita, che e'
   l'informazione che d'estate conta di piu'. */
.hero-trend.giu { color: var(--on-sky); }
.hero-trend.stabile { color: var(--on-sky-dim); }

.hero-cond { font-size: 1.35rem; font-weight: 300; margin-top: .3rem; }

/* Il dettaglio della tendenza si scrive qui, in pagina. Un attributo title non
   compare su telefono e su desktop il browser lo rende su una riga sola che esce
   dallo schermo: su un'app che si usa quasi solo da telefono era informazione
   che quasi nessuno avrebbe visto. */
.hero-trend-testo {
  font-size: 0.82rem;
  color: var(--on-sky-dim);
  margin-top: 0.3rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

.hero-stamp { font-size: .8rem; color: var(--on-sky-dim); margin-top: .5rem; }

/* --- Icone meteo SVG animate --- */
.wi { display: block; width: 100%; height: 100%; margin: 0 auto; }

.wi-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: wi-sun-pulse 4s ease-in-out infinite;
}
.wi-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: wi-spin 14s linear infinite;
}
.wi-moon {
  transform-box: fill-box;
  transform-origin: center;
  animation: wi-sun-pulse 5s ease-in-out infinite;
}
@keyframes wi-spin { to { transform: rotate(360deg); } }
@keyframes wi-sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* --- Effemeridi: il sole sale (alba) o scende (tramonto) rispetto all'orizzonte --- */
.ei-sun-rising {
  transform-box: fill-box;
  transform-origin: center;
  animation: ei-rise 4s ease-in-out infinite;
}

.ei-sun-setting {
  transform-box: fill-box;
  transform-origin: center;
  animation: ei-set 4s ease-in-out infinite;
}

@keyframes ei-rise {
  0%, 25% { transform: translateY(9px); }
  70% { transform: translateY(-5px); }
  100% { transform: translateY(9px); }
}

@keyframes ei-set {
  0%, 25% { transform: translateY(-5px); }
  70% { transform: translateY(9px); }
  100% { transform: translateY(-5px); }
}

.wi-drop {
  transform-box: fill-box;
  animation: wi-fall 1s linear infinite;
}
@keyframes wi-fall {
  0% { transform: translateY(-3px); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(7px); opacity: 0; }
}
.wi-flake {
  transform-box: fill-box;
  animation: wi-fall 1.7s ease-in infinite;
}
.wi-bolt {
  animation: wi-flash 2.2s steps(1, end) infinite;
}
@keyframes wi-flash {
  0%, 55%, 100% { opacity: 1; }
  60%, 72% { opacity: 0.15; }
}

/* --- Menu responsive: hamburger su mobile, barra di pulsanti su desktop --- */
@media (min-width: 760px) {
  .menu-btn,
  .nav-close-btn { display: none; }
  .nav-overlay { display: none !important; }

  .nav-menu {
    position: relative;
    z-index: 30;
    top: auto; right: auto; bottom: auto;
    transform: none !important;
    transition: none !important;
    width: 100%;
    max-width: 760px;
    margin: 0.25rem auto 0;
    padding: 0.4rem 1rem 0;
    background: transparent;
    box-shadow: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
  }

  .nav-menu a,
  .nav-parent {
    border-bottom: none;
    background: rgba(18, 58, 94, 0.85);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-menu a:hover,
  .nav-item:hover .nav-parent { background: var(--sky-hover); }
  .nav-menu a.active,
  .nav-parent.active {
    background: var(--cyan);
    color: var(--sky-top);
  }

  /* Voci genitore (Previsioni, Webcam) con sottomenu a comparsa */
  .nav-item { position: relative; }

  .nav-parent {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    color: var(--on-sky);
  }
  .nav-parent::after {
    content: '\25BE';
    font-size: 0.65rem;
    opacity: 0.75;
  }

  .nav-dropdown {
    position: absolute;
    /* niente gap reale tra pillola e sottomenu (margin-top romperebbe
       l'area di :hover facendo sparire il menu a metà strada): lo spazio
       visivo è solo un padding-top, il box tocca subito il genitore così
       il mouse non "esce" mai dall'area attiva */
    top: 100%;
    left: 50%;
    padding-top: 0.5rem;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 200px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .nav-dropdown-inner {
    background: var(--panel);
    border-radius: 14px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  }

  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-dropdown a {
    background: transparent;
    border-radius: 8px;
    padding: 0.55rem 0.9rem;
    text-align: left;
    white-space: nowrap;
  }
  .nav-dropdown a:hover { background: rgba(255, 255, 255, 0.1); }
  .nav-dropdown a.active {
    background: var(--cyan);
    color: var(--sky-top);
  }

  .nav-parent--cta {
    background: var(--cyan) !important;
    color: var(--sky-top) !important;
  }
  .nav-item:hover .nav-parent--cta { background: color-mix(in srgb, var(--cyan) 80%, black) !important; }

  .nav-donate-link {
    background: rgba(111, 208, 140, 0.18) !important;
    border: 1px solid var(--good);
  }
  .nav-donate-link:hover { background: rgba(111, 208, 140, 0.32) !important; }

  main { max-width: 760px; }
}

/* --- Layout desktop: da "app mobile allargata" a sito vero, contenuto più
   largo, navbar coerente, card con profondità, griglie multi-colonna --- */
@media (min-width: 980px) {
  header {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 0.75rem;
  }

  .brand-logo { height: 58px; }
  #updated-at { font-size: 0.85rem; }

  .nav-menu {
    max-width: 1180px;
    padding: 0.5rem 1.5rem 0;
  }

  .nav-menu a {
    padding: 0.55rem 1.15rem;
    font-size: 0.9rem;
  }

  main {
    max-width: 1180px;
    padding: 0.75rem 1.5rem 5rem;
  }

  footer {
    max-width: 1180px;
    margin: 1.5rem auto 3rem;
    padding: 1rem 1.5rem;
  }

  /* Hero più ampio: da desktop il numero e l'icona respirano */
  .hero { padding: 1.25rem 1rem 1.5rem; }
  .hero-icon .wi { width: 112px; height: 112px; }
  .temp-big { font-size: 5.4rem; }
  .hero-cond { font-size: 1.5rem; }

  /* Card con profondità reale (ombra, bordo sottile, hover) invece del
     rettangolo piatto uguale al mobile */
  .card {
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  }
  .card .value { font-size: 2.35rem; }
  .card .card-head h3 { font-size: 0.8rem; }

  .wind-card { padding: 1.35rem 1.65rem; }
  .compass { width: 104px; height: 104px; }

  /* Griglia a 4 colonne: le 4 card numeriche su una riga sola */
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    margin-top: 1.1rem;
  }

  .alerts-container,
  .wind-card {
    margin-top: 1.1rem;
  }

  /* Le 6 giornate di previsione affiancate senza scroll orizzontale */
  .forecast-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow-x: visible;
  }
  .forecast-day-card { min-width: 0; }
}

/* ---------- qualita' dell'aria e pollini (home) ---------- */
.aqi-top { display: flex; align-items: center; gap: 1rem; }
.aqi-label { font-size: 1.3rem; font-weight: 300; }
.aqi-detail { font-size: .8rem; color: var(--on-sky-dim); margin-top: .15rem; }

.aqi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .35rem;
  margin-top: .9rem;
  text-align: center;
}

.aqi-grid .v { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.aqi-grid .bar { height: 3px; border-radius: 2px; margin: .25rem 0; }
.aqi-grid .n { font-size: .62rem; color: var(--on-sky-dim); }

/* La card dei pollini e' larga come quella della qualita' dell'aria e le sta sotto,
   nella stessa colonna: vengono dalla stessa griglia CAMS e si leggono insieme.
   Le quattro voci si dispongono in colonne invece che una sotto l'altra, se no una
   card a tutta larghezza conterrebbe quattro barrette lunghissime e mezze vuote. */
#pollen-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .38rem 1rem;
}

/* Lo spazio fra le voci ora lo mette la griglia: il margine di riga qui darebbe
   un vuoto in piu' sotto la prima fila. */
#pollen-rows .pollen-row { margin-bottom: 0; }

/* Sopra i 980px la griglia della home passa a quattro colonne: la card ne prende
   quattro, e le quattro voci ci stanno in fila. */
@media (min-width: 980px) {
  #pollen-rows { grid-template-columns: repeat(4, 1fr); }
}

/* Dentro la singola voce nome, barra e giudizio non stanno sulla stessa riga:
   nome e giudizio si dividono la prima, la barra prende tutta la larghezza sotto
   — così "fuori stagione" non va a capo. */
.pollen-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .12rem .4rem;
  margin-bottom: .38rem;
}

.pollen-row:last-child { margin-bottom: 0; }
.pollen-row .nome { font-size: .78rem; color: var(--on-sky-dim); }
.pollen-row .giudizio { font-size: .74rem; font-weight: 600; text-align: right; }
.pollen-row .track {
  grid-column: 1 / -1;
  height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .14); overflow: hidden;
}
.pollen-row .track span { display: block; height: 100%; background: var(--good); }
.pollen-row.spento { opacity: .55; }

.card-note { font-size: .75rem; color: var(--on-sky-dim); margin-top: .8rem; }

/* Pastiglia "i" nell'intestazione di una card: apre la spiegazione qui sotto.
   Non e' un tooltip in hover perche' su telefono l'hover non esiste — si tocca,
   e resta aperto finche' non lo si richiude. */
.info-btn {
  flex: 0 0 auto;
  align-self: center;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  background: var(--panel);
  color: var(--cyan);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* L'area toccabile arriva a 44px senza ingrandire il cerchio: un dito centra male
   un bersaglio da 28px, ed e' anche per questo che la pastiglia non veniva toccata.
   Lo pseudo-elemento non si vede, allarga soltanto il bersaglio. */
.info-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.info-btn[aria-expanded="true"] {
  color: var(--sky-top);
  background: var(--cyan);
  border-color: var(--cyan);
}

.info-btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* La spiegazione apre sopra il grafico: il margine sotto la stacca da lui */
/* Chiusa non occupa niente ([hidden] la toglie dal flusso), quindi i margini
   contano solo da aperta: sopra la stacca dall'intestazione, sotto da cio' che
   segue — il grafico su previsioni-orarie, il bordo della card sui pollini. */
.info-note { margin-top: .2rem; margin-bottom: .5rem; line-height: 1.45; }

/* ---------- componente: grafico ---------- */
.pm-chart {
  touch-action: pan-y;
}

.chart-lab {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--on-sky);
  font-variant-numeric: tabular-nums;
}

.chart-dim {
  font-size: 10px;
  fill: var(--on-sky-dim);
}

.chart-cross {
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

/* Le frecce del vento stanno sotto la curva: appena smorzate, così indicano la
   direzione senza competere con la linea della velocità. */
.chart-arrow { opacity: .75; }

/* ---------- Card "Sole e pressione" ----------
   L'arco e' il cammino vero del sole di oggi: ascissa dall'azimut su finestra fissa
   50-310 gradi, ordinata dall'altezza su scala fissa 0-90. Le scale non si riscalano
   sul giorno corrente, altrimenti tutte le stagioni avrebbero la stessa cupola. */

.sun-card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.sun-moon {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--on-sky-dim);
}

.sun-moon svg { width: 22px; height: 22px; }

.sun-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: .2rem;
  overflow: visible;
}

.sun-arco {
  fill: none;
  stroke: var(--sun);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .9;
  /* Tratteggiata come la parte che resta: a distinguere il percorso gia' fatto da
     quello che manca e' il colore, non il tipo di linea. Il tratto qui e' piu' lungo
     e piu' fitto, cosi' le due porzioni non si confondono a colpo d'occhio. */
  stroke-dasharray: 5 3;
}

/* Quel che resta della giornata e' tratteggiato: il pieno dice fin dove il sole
   e' arrivato davvero. */
.sun-arco--resto {
  stroke: var(--on-sky-dim);
  stroke-dasharray: 3 5;
  opacity: .6;
}

.sun-orizzonte {
  stroke: var(--on-sky);
  stroke-width: 1.2;
  opacity: .55;
}

.sun-tacca {
  stroke: var(--on-sky-dim);
  stroke-width: 1;
  opacity: .7;
}

.sun-cardinale {
  fill: var(--on-sky-dim);
  font-size: 10px;
}


.sun-ora {
  fill: var(--on-sky);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.sun-palla { fill: var(--sun); }
.sun-raggio { stroke: var(--sun); stroke-width: 1.6; stroke-linecap: round; }
.sun-disco--notte { opacity: .38; }

.sun-vento {
  fill: var(--on-sky);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sun-eti {
  fill: var(--on-sky-dim);
  font-size: 11px;
}

.sun-pressione {
  fill: var(--on-sky);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.sun-legend {
  margin: .1rem 0 0;
  font-size: .82rem;
  color: var(--on-sky-dim);
}

/* Le pale. Il gruppo esterno posiziona la turbina, questo ruota: una transform CSS
   sostituisce quella dichiarata come attributo SVG invece di comporsi con essa. */
.sun-torre, .sun-pala, .sun-mozzo {
  fill: var(--on-sky);
  opacity: .85;
}

.sun-rotore {
  transform-box: fill-box;
  transform-origin: center;
  animation: sun-gira var(--sun-pala-dur, 3s) linear infinite;
}

@keyframes sun-gira {
  to { transform: rotate(360deg); }
}

/* Calma vera: le pale sono ferme, non lente. */
.sun-svg--calma .sun-rotore { animation: none; }

/* Scheda in background o card fuori schermo. */
.sun-card--pausa .sun-rotore { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sun-rotore { animation: none; }
}

/* ---------- Pagina Fotovoltaico ---------- */
.sol-numeroni {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.sol-valore {
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--on-sky);
  font-variant-numeric: tabular-nums;
}

.sol-valore .unit {
  font-size: .9rem;
  color: var(--on-sky-dim);
  margin-left: .25rem;
}

.sol-eti {
  font-size: .82rem;
  color: var(--on-sky-dim);
}

/* Riassunto del picco, sotto il titolo della card: sta come riga di testo, mai
   ancorato a un punto della curva, cosi' non puo' sovrapporsi a niente qualunque
   sia la stagione o la larghezza dello schermo. */
.sol-picco {
  margin-top: -.3rem;
  margin-bottom: .2rem;
  color: var(--on-sky);
  font-weight: 600;
}

/* Card dell'energia solare. Il fondo prende la stessa sfumatura calda del nowcast e
   di "sole e pressione": e' la card che parla di sole, e il gradiente lo dice prima
   di qualsiasi numero. */
.sol-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--glass) 55%, color-mix(in srgb, var(--sun) 16%, transparent) 100%);
}

/* Numeri a sinistra, illustrazione a destra. Prima l'illustrazione era una filigrana
   in posizione assoluta al 15% di opacita': non si vedeva, e alzarla non bastava —
   a 360px i due numeri arrivano a un dito dal bordo destro, quindi qualunque disegno
   grande ci sarebbe finito sotto. Da colonna della riga, invece, lo spazio se lo
   contendono col layout: i numeri si impilano e il disegno resta intero. */
.sol-corpo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sol-corpo .sol-numeroni { flex: 1 1 auto; min-width: 0; }

.sol-illustrazione {
  flex: 0 0 auto;
  width: 108px;
  height: 100px;
  opacity: .9;
}

@media (min-width: 760px) {
  .sol-illustrazione { width: 150px; height: 138px; }
}

.sol-riferimento {
  stroke: var(--on-sky-dim);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .7;
}

/* Linea dell'ora attuale nel grafico di oggi: sottile, non tratteggiata come
   il riferimento del mese, cosi' i due segni non si confondono a vista. */
.sol-adesso {
  stroke: var(--on-sky-dim);
  stroke-width: 1;
  opacity: .55;
}

.fh-swatch-sun { background: var(--sun); }

/* --- Pagina 404 --- */
/* Nessun colore scritto a mano: l'ombrello prende quelli del sito, cosi' il giorno in cui
   cambia la tavolozza cambia anche lui invece di restare indietro. */
.p404 { text-align: center; }

.p404-disegno {
  display: block;
  width: min(15rem, 60vw);
  height: auto;
  margin: 0.5rem auto 1rem;
}

.p404-cupola { fill: var(--cyan); }
.p404-asta   { fill: none; stroke: var(--on-sky); stroke-width: 5; stroke-linecap: round; }
.p404-numero { fill: var(--on-sky); font: 700 44px/1 system-ui, sans-serif; letter-spacing: 2px; }

.p404-gocce line {
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.75;
  animation: p404-cade 1.4s linear infinite;
}
.p404-gocce line:nth-child(2) { animation-delay: .5s; }
.p404-gocce line:nth-child(3) { animation-delay: .2s; }
.p404-gocce line:nth-child(4) { animation-delay: .8s; }
.p404-gocce line:nth-child(5) { animation-delay: .35s; }
.p404-gocce line:nth-child(6) { animation-delay: .65s; }
.p404-gocce line:nth-child(7) { animation-delay: .1s; }

@keyframes p404-cade {
  0%   { transform: translateY(-12px); opacity: 0; }
  25%  { opacity: .75; }
  100% { transform: translateY(26px); opacity: 0; }
}

/* Chi ha chiesto meno animazioni al sistema operativo lo ha chiesto anche a noi: la pioggia
   si ferma e resta il disegno. */
@media (prefers-reduced-motion: reduce) {
  .p404-gocce line { animation: none; opacity: .6; }
}

.p404-torna { margin: 1.2rem 0 0.6rem; }

.p404-bottone {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--sky-top);
  font-weight: 600;
  text-decoration: none;
}
.p404-bottone:hover { filter: brightness(1.08); }

.p404-altro { font-size: 0.85rem; opacity: 0.85; }

/* La riga che dichiara il disaccordo fra i modelli nelle previsioni a sei giorni. Colore
   d'attenzione e non d'allarme: non e' un guasto, e' un'incertezza — ed e' un'informazione,
   non una scusa. */
.forecast-day-dubbio { color: var(--sun); opacity: .95; }

/* La legenda dell'asterisco, subito sotto la striscia dei sei giorni. */
.forecast-legenda {
  margin: .35rem 0 0;
  font-size: .78rem;
  color: var(--on-sky-dim);
}
.forecast-legenda strong { color: var(--sun); }


/* =========================================================================
   IL PROCIDANO — /dialetto-procidano  (23/08/2026)

   La pagina non contiene il vocabolario: contiene un traduttore che ne chiede una voce alla
   volta, e il modo di dire del giorno. L'archivio resta sul server e non si pubblica — la
   ragione sta in cima a davis/procidano.php. Quindi qui non c'e' niente da impaginare in
   massa: solo un campo, le risposte, e una card.
   ========================================================================= */

.dz-main { padding-bottom: 2rem; }
.dz-h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.dz-intro p, .dz-spiega p { margin: .5rem 0 0; line-height: 1.5; }
.dz-spiega p:first-of-type { margin-top: 0; }

.dz-occhiello {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-sky-dim);
  margin: 0 0 .35rem;
}

.dz-cerca-riga { margin: 1rem 0 .3rem; }
.dz-etichetta {
  display: block;
  margin: 0 .2rem .35rem;
  font-size: .8rem;
  color: var(--on-sky-dim);
}

.dz-cerca {
  width: 100%;
  box-sizing: border-box;
  padding: .75rem .9rem;
  font-size: 1rem;                /* mai sotto 16px: sotto, iOS ingrandisce la pagina da solo */
  color: var(--on-sky);
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--card-radius);
  -webkit-appearance: none;
}
.dz-cerca::placeholder { color: var(--on-sky-dim); opacity: .8; }
.dz-cerca:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

.dz-esito {
  margin: .45rem .2rem 0;
  min-height: 1.1em;              /* riservata sempre: comparendo e sparendo farebbe ballare la
                                     pagina a ogni tasto premuto, che e' CLS puro */
  font-size: .8rem;
  color: var(--on-sky-dim);
}

/* I due sensi, detti nell'introduzione con un esempio per parte invece che con una frase.
   «Funziona anche al contrario» era scritto, e Max non l'ha visto: una capacita' descritta a
   parole non esiste finche' non la si vede in azione. */
.dz-versi { display: grid; gap: .35rem; }
.dz-versi span { line-height: 1.45; }
.dz-versi em { color: var(--sun); font-style: normal; font-weight: 600; }

/* Le parole di prova. Sono bottoni veri e non finti link: fanno una cosa, e chi naviga con la
   tastiera ci arriva col tabulatore come su qualunque comando. */
.dz-prova {
  margin: .5rem .1rem 0;
  font-size: .82rem;
  color: var(--on-sky-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.dz-esempio {
  font: inherit;
  color: var(--on-sky);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  padding: .25rem .6rem;
  min-height: 1.9rem;          /* bersaglio da dito */
  cursor: pointer;
}
.dz-esempio:hover, .dz-esempio:focus-visible { border-color: var(--sun); }
/* Le due parole procidane si distinguono dalle due italiane: e' tutto il messaggio. */
.dz-esempio--pro { color: var(--sun); }

.dz-risultati { display: grid; gap: .6rem; margin-top: .6rem; }
.dz-risultato { padding: .75rem .9rem; }

.dz-riga-testa { margin: 0; }
.dz-lemma { font-weight: 700; font-size: 1.05rem; color: var(--on-sky); }

/* La trascrizione fonetica. Tondo e non corsivo: il corsivo storce i simboli fonetici fino a
   farne un'altra cosa, e qui il simbolo E' l'informazione. */
.dz-pron { font-size: .85rem; color: var(--on-sky-dim); white-space: nowrap; }

.dz-sig { margin: .25rem 0 0; font-size: .95rem; line-height: 1.45; }
.dz-es  { margin: .25rem 0 0; font-size: .87rem; color: var(--on-sky-dim); font-style: italic; line-height: 1.45; }

/* Il modo di dire del giorno. Sta sotto il traduttore e non sopra: chi arriva qui ha una
   parola da cercare, e la card e' il premio di consolazione per chi resta. */
.dz-oggi { margin-top: 1.2rem; border-color: rgba(247, 201, 72, .28); }
.dz-oggi-frase {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sun);
}
.dz-oggi-trad  { margin: .4rem 0 0; font-size: .95rem; line-height: 1.45; }
.dz-oggi-spieg { margin: .4rem 0 0; font-size: .85rem; color: var(--on-sky-dim); line-height: 1.45; }

.dz-spiega { margin-top: 1.2rem; }

/* Le fonti. Non sono una nota a pie' di pagina in corpo otto: sono la ragione per cui a queste
   parole si puo' credere, e i due libri hanno degli autori. Chi ha fatto il lavoro va nominato
   dove si legge, non dove si nasconde. */
.dz-fonti { margin-top: 1.2rem; }
.dz-fonti p { margin: .5rem 0 0; line-height: 1.5; font-size: .9rem; }
.dz-elenco-fonti {
  margin: .6rem 0 0;
  padding-left: 1.1rem;
  font-size: .9rem;
  line-height: 1.5;
}
.dz-elenco-fonti li { margin-bottom: .4rem; }
.dz-fonte-nota { color: var(--on-sky-dim); font-size: .85rem !important; }

/* La card del procidano in home. Sta accanto a quella del time-lapse e ne divide l'aspetto: e'
   una card che porta altrove, non un numero da leggere. La parola in giallo perche' e' la cosa
   per cui ci si ferma — il resto della card e' la spiegazione di quella parola. */
.procidano-voce {
  margin: .5rem 0 0;
  font-size: 1.15rem;
  color: var(--sun);
}
.procidano-pron {
  font-size: .82rem;
  font-weight: 400;
  color: var(--on-sky-dim);
  white-space: nowrap;
}
.procidano-sig { margin: .3rem 0 0; font-size: .95rem; line-height: 1.45; }
.procidano-invito {
  margin: .55rem 0 0;
  font-size: .84rem;
  color: var(--on-sky-dim);
  line-height: 1.45;
}

/* La dedica. Sta in fondo e non in cima, come nei libri: chi arriva cerca una parola, e la
   dedica la trova chi e' rimasto fino alla fine. Centrata e senza riquadro, perche' non e' una
   card fra le altre — e' l'unica riga della pagina in cui parla Max e non il sito. */
.dz-dedica {
  margin: 1.6rem auto .4rem;
  max-width: 26rem;
  text-align: center;
  font-style: italic;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--on-sky-dim);
}

/* ---------- il proverbio di oggi, in fondo alle Effemeridi (24/08/2026) ---------- */
/* La stessa materia della card che lo ospita: le Effemeridi dicono com'e' fatta la giornata,
   e un detto del giorno e' quello. Il filo sopra lo separa dai numeri senza aprire una card
   nuova, che in home vorrebbe dire un blocco in piu' da scorrere.
   Nasce nascosto e lo mostra js/proverbio-home.js: `[hidden]` va dichiarato perche' la regola
   qui sotto dara' un display all'elemento, e senza si vedrebbe un riquadro vuoto ogni volta che
   il server non risponde. */
.eph-proverbio {
  display: block;
  margin-top: .85rem;
  padding-top: .8rem;
  border-top: 1px solid var(--glass-line);
}
.eph-proverbio[hidden] { display: none; }
.eph-prov-occhiello {
  margin: 0 0 .3rem;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-sky-dim);
}
/* Il giallo e' lo stesso della frase sulla pagina del dialetto: chi ha visto l'una riconosce
   l'altra, ed e' l'unico segnale che dice «questa riga e' in procidano, non in italiano». */
.eph-prov-frase { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--sun); }
.eph-prov-trad  { margin: .3rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--on-sky-dim); }

/* ---------- Aiutaci a farci conoscere (24/08/2026) ---------- */
.condividi-perche { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--on-sky-dim); }

/* I tondi. 44 px e' la misura sotto la quale il dito comincia a sbagliare bersaglio, la stessa
   dei comandi dello zoom e dei pulsanti delle pagine webcam: un terzo modo di dimensionare un
   bersaglio sarebbe un terzo posto da tenere allineato.
   Fondo pieno e non traslucido, per la ragione gia' scritta per .video-btn-invito: sotto scorre
   lo sfondo meteo, che di mattina e' azzurro chiaro e si mangerebbe un velo di bianco. */
.condividi-fila { margin-top: .8rem; }
.condividi-tondo {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-line);
  background: var(--glass-fondo);
  color: var(--on-sky);
  cursor: pointer;
  padding: 0;
}
.condividi-tondo svg { width: 1.25rem; height: 1.25rem; display: block; }
.condividi-tondo:hover { border-color: var(--cyan); color: var(--cyan); }
.condividi-tondo:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.condividi-tondo[hidden] { display: none; }

/* «Copiato» ha una riga sua e non finisce dentro il pulsante: con le icone, scrivere nel
   pulsante ne cancellerebbe l'SVG. Occupa spazio anche da vuota (`min-height`), se no la card
   sussulta ogni volta che il messaggio compare e sparisce. */
.condividi-esito {
  margin: .5rem 0 0;
  min-height: 1.1rem;
  font-size: .82rem;
  color: var(--good-dim);
}

/* La card che chiede aiuto ai compaesani. L'ultimo paragrafo e' la ragione, non un riempitivo:
   senza, l'invito suona come «mandami contenuti», e chi legge non capisce perche' dovrebbe. */
.dz-aiuto { margin-top: 1.2rem; }
.dz-aiuto p { margin: 0 0 .7rem; line-height: 1.55; }
.dz-aiuto-perche { color: var(--on-sky-dim); font-size: .92rem; }


/* --- La giornata (/giornata) ------------------------------------------------ */

/* I bottoni delle schede riusano la forma di .data-presets: e' lo stesso gesto in due
   pagine diverse, e due forme diverse per lo stesso gesto si notano. */
.giornata-schede { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .9rem; }
.giornata-schede button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--on-sky);
  border-radius: 999px;
  padding: .45rem .95rem;
  font-size: .8rem;
  cursor: pointer;
}
.giornata-schede button:hover { background: rgba(255, 255, 255, 0.16); }
.giornata-schede button.attiva {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--glass-line);
}

.giornata-legenda { margin: .4rem 0 0; font-size: .78rem; color: var(--on-sky-dim); }
.giornata-legenda .chiave {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: .25rem;
}
.giornata-legenda .chiave.oggi { background: var(--hot); }
.giornata-legenda .chiave.ieri { background: var(--on-sky-dim); }

.giornata-quando { margin: .5rem 0 0; font-size: .78rem; color: var(--on-sky-dim); }

/* La tabella scorre da sola invece di far scorrere la pagina: su un telefono stretto tre
   colonne con l'ora accanto al valore non ci stanno, e il rimedio non puo' essere una
   pagina che balla in orizzontale. */
.giornata-tab-scorre { overflow-x: auto; }
/* Il tetto di larghezza serve al desktop: a tutta card, l'etichetta a sinistra e il
   numero a destra finiscono a mezzo schermo di distanza e l'occhio perde la riga. */
.giornata-tab { width: 100%; max-width: 620px; border-collapse: collapse; font-size: .88rem; }
.giornata-tab th,
.giornata-tab td { padding: .38rem .5rem; text-align: right; white-space: nowrap; }
/* L'etichetta puo' andare a capo, il numero no: su un telefono da 360 px la riga piu'
   lunga chiedeva 416 px e la tabella si portava dietro una barra di scorrimento, mentre
   una cifra spezzata a meta' sarebbe illeggibile. */
.giornata-tab tbody th {
  text-align: left; font-weight: 400; color: var(--on-sky-dim); white-space: normal;
}
.giornata-tab thead th {
  color: var(--on-sky-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}
.giornata-tab tr.gruppo th {
  text-align: left; padding-top: .9rem; color: var(--on-sky);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}
/* L'ora accanto al valore e' informazione di servizio: accompagna il numero, non gli fa
   concorrenza. */
.giornata-tab .ora { color: var(--on-sky-dim); font-size: .78em; margin-left: .35rem; }
.giornata-tab .variabile { color: var(--on-sky-dim); font-style: italic; }

.giornata-rose { display: flex; gap: 1.2rem; justify-content: space-around; }
.giornata-rose figure { margin: 0; flex: 1 1 0; max-width: 200px; text-align: center; }
.giornata-rose figcaption { color: var(--on-sky-dim); font-size: .8rem; margin-top: .3rem; }

/* Sotto i 500 px due rose affiancate diventano due francobolli illeggibili. */
@media (max-width: 500px) {
  .giornata-rose { flex-direction: column; align-items: center; }
  .giornata-rose figure { max-width: 240px; }
  .giornata-tab { font-size: .82rem; }
}

/* ---- Le pagine webcam tradotte (28/08/2026) --------------------------------------
   Dodici pagine in inglese, francese e tedesco, generate da scripts/lingue-build.mjs.
   Hanno un guscio piu' povero delle italiane: niente menu a tendina, niente sfondo
   animato, niente invito a installare l'app. Chi ci arriva viene da una ricerca come
   «procida webcam» e vuole l'immagine, non il sito. */

/* Il selettore sta solo qui: le quattro pagine italiane non lo hanno. */
.lingue {
  display: flex;
  gap: .9rem;
  justify-content: center;
  align-items: center;
  padding: .45rem .8rem;
  font-size: .82rem;
}
.lingue a { color: var(--on-sky-dim); text-decoration: none; }
.lingue a:hover { color: var(--on-sky); text-decoration: underline; }
.lingue .lingua-attiva { color: var(--on-sky); font-weight: 600; }

/* Il menu ridotto alle quattro webcam. Il rimando al sito italiano si stacca dagli
   altri con un separatore: dice «di qua si esce dalla tua lingua», e un turista che
   lo clicca per sbaglio non capirebbe piu' niente della pagina in cui arriva. */
.nav-webcam {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  justify-content: center;
  align-items: center;
  padding: .3rem .8rem .7rem;
  font-size: .95rem;
}
.nav-webcam a {
  color: var(--on-sky-dim);
  text-decoration: none;
  padding: .25rem .55rem;
  border-radius: 999px;
}
.nav-webcam a:hover { background: var(--glass); color: var(--on-sky); }
.nav-webcam a.active {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--on-sky);
  font-weight: 600;
}
.nav-webcam-italiano {
  border-left: 1px solid var(--glass-line);
  padding-left: .9rem !important;
  border-radius: 0 !important;
  font-size: .85rem;
}

/* Sotto i 480 px le quattro webcam su una riga sola diventano illeggibili: vanno a capo
   da sole, ma il rimando all'italiano deve andare su una riga sua, senza il separatore
   verticale che a capo non separa piu' niente. */
@media (max-width: 480px) {
  .nav-webcam-italiano {
    border-left: 0;
    border-top: 1px solid var(--glass-line);
    padding: .5rem 0 0 !important;
    flex-basis: 100%;
    text-align: center;
  }
}

/* La guida illustrata (28/08/2026): una vetrina, quindi le immagini sono grandi e il
   testo e' corto. Sotto ogni immagine c'e' il collegamento alla pagina vera. */

/* Il testo sta su una lastra di vetro, e non e' decorazione (31/08/2026). Nella prima
   versione titolo e frase stavano sul cielo nudo: quando lo sfondo animato ci portava
   sopra una nuvola, bianco su bianco, e la frase spariva. L'ha visto Max guardando la
   pagina — un difetto che nessun banco poteva trovare, perche' compare e passa da solo.
   E' lo stesso rimedio che tutto il resto del sito usa gia' (.card): qui non era stato
   applicato perche' la guida sembrava una vetrina di immagini, e invece e' una pagina
   di testo.
   Si usa --glass-strong e non --glass come le altre card: altrove sul vetro ci stanno
   etichette corte e numeri grandi, qui ci stanno due righe di prosa da leggere davvero,
   e sopra la nuvola piu' chiara il velo leggero lasciava il contrasto al limite. */
.guida-voce {
  margin: 0 0 2.4rem;
  padding: 1rem;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--card-radius);
  backdrop-filter: blur(6px);
}
.guida-voce h2 { font-size: 1.15rem; margin: 0 0 .4rem; }
.guida-voce p { color: var(--on-sky-dim); margin: 0 0 .8rem; }
/* Dal 31/08/2026 le schermate sono catture da TELEFONO (412 punti, densita' doppia), non
   piu' da computer. Cambia come vanno mostrate: `width: 100%` le farebbe larghe quanto la
   pagina, cioe' un telefono gigante alto tremila pixel. Il tetto di 340 px le tiene vicine
   alla grandezza in cui sono state scattate — chi guarda dal telefono le vede quasi 1:1 e
   dentro ci legge davvero, chi guarda dal computer vede una schermata di telefono al centro,
   che e' esattamente quello che e'. */
.guida-voce img {
  width: 100%; max-width: 340px; height: auto; display: block; margin: 0 auto;
  border-radius: 12px; border: 1px solid var(--glass-line);
}
.guida-nota { font-size: .9rem; }
/* Anche la chiusura: e' la frase che chiede di sostenere il sito, ed e' l'ultima cosa
   che si legge. Sul cielo nudo aveva lo stesso difetto delle altre. */
.guida-chiusura {
  margin: 2rem 0 1rem; text-align: center;
  padding: 1rem;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: var(--card-radius);
  backdrop-filter: blur(6px);
}