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

  /* Superfici */
  --glass: rgba(14, 44, 70, .42);
  --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;

  /* 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);
}

header .subtitle {
  color: var(--on-sky-dim);
  font-size: 0.8rem;
  margin-top: 2px;
  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;
  }
}

/* Il link alla pagina del genitore viene aggiunto da nav.js solo per il menu
   mobile: sul desktop la pillola del genitore e' gia' cliccabile. */
@media (min-width: 760px) {
  .nav-dup {
    display: none;
  }
}

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 {
  content: ""; position: absolute; background: #fff;
  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;          /* colori-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; }
.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: #fff;
  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; }

/* 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;
}

/* ---------- 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;
}

/* 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; }
.webcam-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.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); }

/* 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;
}

.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: #ffd08a; }

/* Il riquadro ritaglia, e il video ci scorre dentro ingrandito. transform-origin in alto a
   sinistra perche' tutto il calcolo dello spostamento, in video-zoom.js, parte da li'. */
#video-zona {
  overflow: hidden;
  position: relative;
}

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

/* 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'. */
#video-zona.video-ingrandito {
  touch-action: none;
  cursor: grab;
}
#video-zona.video-ingrandito:active { cursor: grabbing; }

/* I nostri comandi stanno FUORI dall'ingrandimento — sono figli del riquadro, non del video —
   quindi non si spostano ne' si deformano quando si ingrandisce. */
.video-comandi {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  gap: 0.35rem;
  z-index: 2;
}

.video-comando {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  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;
  left: 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-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;
}

.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;
}

/* --- 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,
.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. */
.hero-luogo {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--on-sky);
  margin-bottom: .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); }