/* drought.css — monitoraggio siccità TITANO100.
   Usa i token di app.css: la pagina deve stare accanto alle altre, non accanto
   a se stessa. */

.dr-main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 4rem; }

.dr-intro h1 {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: .4rem 0 .3rem;
}
.dr-badge {
  font-family: var(--font-body, inherit);
  font-size: var(--font-size-xs, .75rem);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem;
}
/* La misura del testo resta leggibile senza lasciare mezza pagina vuota:
   il limite vale sul paragrafo, non sul contenitore. */
.dr-lede { max-width: 68ch; color: var(--text-secondary); line-height: 1.55; }

.dr-gate {
  margin-top: 1rem; padding: 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius, 12px); background: var(--bg-secondary);
}
.dr-gate h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.dr-gate p { margin: 0 0 .8rem; color: var(--text-secondary); }
.dr-btn {
  background: var(--primary); color: #fff; border: 0; cursor: pointer;
  border-radius: var(--radius, 10px); padding: .6rem 1.1rem; font-weight: 600;
  font-family: inherit; font-size: 1rem;
}
.dr-btn:hover { background: var(--primary-dark, var(--primary)); }

.dr-panel {
  margin-top: 1.6rem; padding: 1rem; border: 1px solid var(--border);
  border-radius: var(--radius, 12px); background: var(--bg-secondary);
}
.dr-panel h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.dr-panel h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.dr-note { color: var(--text-secondary); font-size: var(--font-size-sm, .875rem);
           margin: .6rem 0 0; max-width: 68ch; line-height: 1.5; }

.dr-cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dr-card {
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: .8rem; background: var(--bg-primary);
}
.dr-card__label { font-size: var(--font-size-xs, .75rem); text-transform: uppercase;
                  letter-spacing: .04em; color: var(--text-secondary); }
.dr-card__value { font-family: var(--font-display, inherit); font-size: 1.9rem;
                  line-height: 1.1; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.dr-card__class { font-size: var(--font-size-sm, .875rem); font-weight: 600; }
.dr-card--dry   .dr-card__class { color: #a6611a; }
.dr-card--severe .dr-card__class { color: #8c2d04; }
.dr-card--wet   .dr-card__class { color: #01665e; }

.dr-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.dr-toolbar label { font-size: var(--font-size-sm, .875rem); color: var(--text-secondary); }
.dr-toolbar select {
  font: inherit; padding: .35rem .5rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-primary);
}
.dr-layer-desc { font-size: var(--font-size-sm, .875rem); color: var(--text-secondary); flex: 1 1 16ch; }

.dr-map { width: 100%; aspect-ratio: 13 / 8; min-height: 260px; max-height: 62vh;
          border-radius: var(--radius, 10px); overflow: hidden; }
.dr-chart { width: 100%; height: 340px; }

/* Legenda: una barra CONTINUA, non una fila di caselle. Due righe di swatch
   separati si leggevano come due legende diverse, e su mobile la scala numerica
   nuda («-2 -1,5 -1 …») chiede di sapere gia' cos'e' lo SPI: sotto la barra
   degli indici vanno le parole, i numeri restano in secondo piano. */
.dr-legend { margin-top: .7rem; }
.dr-legend__bar { display: flex; width: 100%; height: 14px; border-radius: 4px;
                  overflow: hidden; border: 1px solid var(--border); }
.dr-legend__seg { flex: 1 1 0; }
.dr-legend__anchors { display: flex; justify-content: space-between; margin-top: .3rem;
                      font-size: var(--font-size-sm, .8125rem); color: var(--text-secondary); }
.dr-legend__anchors span { display: flex; flex-direction: column; flex: 1 1 0; }
.dr-legend__anchors span.is-mid { text-align: center; align-items: center; }
.dr-legend__anchors span.is-end { text-align: right; align-items: flex-end; }
.dr-legend__anchors small { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.dr-legend__ticks { display: flex; margin-top: .25rem; }
.dr-legend__tick { flex: 1 1 0; text-align: center; font-size: 10px;
                   color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.dr-fc { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dr-fc th, .dr-fc td { text-align: right; padding: .45rem .5rem; border-bottom: 1px solid var(--border-light, var(--border)); }
.dr-fc th:first-child, .dr-fc td:first-child { text-align: left; }
.dr-fc thead th { font-size: var(--font-size-xs, .75rem); text-transform: uppercase;
                  letter-spacing: .03em; color: var(--text-secondary); }
.dr-fc tbody tr:last-child td { border-bottom: 0; }
.dr-fc__name { font-weight: 600; }

.dr-caveats, .dr-method ul { color: var(--text-secondary); font-size: var(--font-size-sm, .875rem);
                             line-height: 1.5; max-width: 72ch; padding-left: 1.1rem; }
.dr-caveats li, .dr-method li { margin: .25rem 0; }
.dr-method dt { font-weight: 600; margin-top: .5rem; }
.dr-method dd { margin: 0 0 .3rem; color: var(--text-secondary);
                font-size: var(--font-size-sm, .875rem); line-height: 1.5; max-width: 72ch; }

@media (max-width: 640px) {
  .dr-main { padding: .6rem .7rem 3rem; }
  .dr-panel { padding: .8rem; }
  .dr-chart { height: 280px; }
}

/* Grafici stagionali: PNG con fondo bianco cotto dentro (matplotlib), quindi la
   cornice bianca è dichiarata invece che subita — in tema scuro un'immagine
   chiara senza cornice sembra un buco nella pagina. */
.dr-fig { margin: 1.2rem 0 0; }
.dr-fig + .dr-fig { margin-top: 1.6rem; }
.dr-fig img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
}
.dr-fig figcaption {
  color: var(--text-secondary); font-size: var(--font-size-sm, .875rem);
  margin: .5rem 0 0; max-width: 66ch; line-height: 1.55;
}
.dr-fig figcaption strong { color: var(--text-primary); }

/* Sopra i 900 px la didascalia va ACCANTO al grafico invece che sotto.
   Il vuoto a destra di un blocco di testo non si toglie allungando la riga —
   qui la riga era gia' di 79-84 caratteri, cioe' sopra il limite di leggibilita'
   (⚠️ `66ch` NON sono 66 caratteri: `ch` e' la larghezza dello zero, 7,55 px,
   mentre il carattere medio di questo testo ne misura 5,7 → un terzo in piu' di
   caratteri per riga). Si toglie mettendoci dentro qualcosa, e la cosa giusta
   e' il grafico stesso: il testo scende a ~60 caratteri e la larghezza e' piena. */
@media (min-width: 900px) {
  .dr-fig {
    display: grid; align-items: center; gap: 1.4rem;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  }
  .dr-fig figcaption { margin: 0; max-width: none; }
}


/* ---------------------------------------------------------------------------
   La misura di lettura e lo spazio che avanza.

   Il testo corrente non deve usare tutta la larghezza (oltre ~78 caratteri per
   riga l'occhio non ritrova il capo di quella dopo), ma limitare la riga e
   lasciare mezza pagina vuota sono due cose diverse: la prima ha una ragione,
   la seconda no. Dove esiste un secondo elemento vero, sopra i 900 px va
   ACCANTO al testo invece che sopra — il grafico del punto, la tabella del
   ventaglio, l'elenco dei limiti. Dove non esiste (il sommario sotto il titolo,
   la nota di due righe sotto le card) il vuoto resta, ed e' normale
   impaginazione: non ci si mette del riempitivo per coprirlo.

   ⚠️ `ch` NON e' un carattere: e' la larghezza dello zero, 1,24 volte il
   carattere medio di questa prosa. `66ch` sono ~82 caratteri veri.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  /* la storia del punto: grafico a sinistra, nota accanto */
  #dr-chartwrap {
    display: grid; gap: 1.2rem 1.4rem; align-items: center;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  }
  #dr-chartwrap h2 { grid-column: 1 / -1; }
  #dr-chart { grid-column: 1; grid-row: 2; }
  #dr-chart-note { grid-column: 2; grid-row: 2; margin: 0; max-width: none; }

  /* il ventaglio di fine mese: tabella a sinistra, testo e avvertenze accanto */
  #dr-fcwrap {
    display: grid; gap: .9rem 1.4rem; align-content: start;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  }
  #dr-fcwrap h2 { grid-column: 1 / -1; }
  #dr-fc { grid-column: 1; grid-row: 2; align-self: start; }
  #dr-fc-intro { grid-column: 2; grid-row: 2; margin: 0; max-width: none; }
  #dr-fc-caveats { grid-column: 2; grid-row: 3; margin: 0; }

  /* il metodo: le formule a sinistra, quello che non dicono accanto */
  /* 🪤 Qui il titolo e la sua lista devono essere UN elemento (`.dr-aside`), non
     due celle. Con due celle l'elenco delle formule scavalca due righe e la
     griglia gli distribuisce l'altezza in eccesso anche sulla riga del titolo:
     l'h3 diventava alto 127 px invece di 24 e si staccava dalla sua lista di
     mezzo pannello. Dichiarare la riga `min-content` non basta — `min-content`
     e' una taglia INTRINSECA, quindi partecipa comunque alla distribuzione. */
  #dr-methodwrap {
    display: grid; gap: .6rem 1.6rem; align-content: start;
    grid-template-columns: 1fr 1fr;
  }
  #dr-methodwrap h2 { grid-column: 1 / -1; }
  #dr-method { grid-column: 1; grid-row: 2; }
  #dr-methodwrap .dr-aside { grid-column: 2; grid-row: 2; }
  #dr-methodwrap .dr-aside h3 { margin-top: 0; }
  #dr-limits { margin: 0; }
}

/* Il `dl` del metodo non aveva NESSUN limite e correva per tutta la riga: 144
   caratteri, il doppio del leggibile. Sotto i 900 px lo limita questo, sopra
   ci pensa la colonna. */
#dr-method dd { max-width: 66ch; }


/* ------------------------------------------------------------------ *
 * Sintesi in testa: la diagnosi prima degli indici.
 * La domanda umana e' «quanto e' grave», non «quanto valgono gli indici»:
 * qui rispondono due soli numeri grandi (classe e riserva del suolo) e le
 * quattro card tecniche scendono dentro un pannello richiudibile.
 * ------------------------------------------------------------------ */
.dr-verdict { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr); }
.dr-verdict > .dr-more { grid-column: 1 / -1; }
.dr-verdict__state {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.5rem, 5.2vw, 2.1rem); line-height: 1.15; margin: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.dr-verdict__when { font-family: var(--font-body, inherit); font-size: var(--font-size-sm, .875rem);
                    font-weight: 400; color: var(--text-secondary); }
.dr-verdict__say { margin: .5rem 0 0; line-height: 1.5; max-width: 52ch; }
.dr-verdict__soil {
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  background: var(--bg-primary); padding: .9rem;
}
.dr-verdict__pct { display: block; font-family: var(--font-display, inherit);
                   font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1;
                   font-variant-numeric: tabular-nums; }
.dr-verdict__pct--low { color: #8c2d04; }
.dr-verdict__soil-txt { display: block; margin-top: .35rem;
                        font-size: var(--font-size-sm, .875rem);
                        color: var(--text-secondary); line-height: 1.5; }
/* Il tono cromatico dice lo STATO, non decora: stessa scala delle card. */
.dr-verdict__state.dr-card--dry { color: #a6611a; }
.dr-verdict__state.dr-card--severe { color: #8c2d04; }
.dr-verdict__state.dr-card--wet { color: #01665e; }
.dr-card__desc { font-size: var(--font-size-xs, .75rem); color: var(--text-secondary);
                 line-height: 1.4; margin-top: .35rem; }

/* Pannelli richiudibili: metodo, limiti, indici, tabella completa. Nessuna riga
   di trasparenza sparisce, ma smette di stare in mezzo alla lettura normale. */
.dr-more { margin-top: .9rem; }
.dr-more > summary {
  cursor: pointer; font-weight: 600; font-size: var(--font-size-sm, .875rem);
  color: var(--primary); list-style: none; display: flex; align-items: center; gap: .4rem;
  padding: .35rem 0;
}
.dr-more > summary::-webkit-details-marker { display: none; }
.dr-more > summary::before { content: '▸'; font-size: .8em; transition: transform .15s; }
.dr-more[open] > summary::before { transform: rotate(90deg); }
.dr-more > summary:hover { text-decoration: underline; }
.dr-more[open] > summary { margin-bottom: .5rem; }

.dr-coords { margin: -.4rem 0 .4rem; font-size: var(--font-size-sm, .875rem);
             color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.dr-chart-lead { margin: 0 0 .6rem; line-height: 1.5; max-width: 68ch; }

/* Fine mese: tre scenari, non una tabella. Ogni numero porta accanto il suo
   termine di paragone datato, perche' scenari e card in testa NON guardano la
   stessa finestra (fine mese in corso contro ultimo mese chiuso). */
.dr-fc-answer { margin: 0 0 .9rem; line-height: 1.55; max-width: 68ch; font-size: 1.02rem; }
.dr-scen__grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dr-scen__card { border: 1px solid var(--border); border-left-width: 4px;
                 border-radius: var(--radius, 10px); background: var(--bg-primary); padding: .85rem; }
.dr-scen__card--worse { border-left-color: #8c2d04; }
.dr-scen__card--same { border-left-color: var(--text-secondary); }
.dr-scen__card--better { border-left-color: #01665e; }
.dr-scen__name { font-weight: 600; line-height: 1.3; }
.dr-scen__rain { font-family: var(--font-display, inherit); font-size: 1.7rem;
                 line-height: 1.15; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.dr-scen__sub { font-size: var(--font-size-xs, .75rem); color: var(--text-secondary); }
.dr-scen__idx { display: grid; grid-template-columns: 1fr auto; align-items: baseline;
                gap: .4rem; margin-top: .55rem; font-size: var(--font-size-sm, .875rem); }
.dr-scen__idx span { color: var(--text-secondary); }
.dr-scen__idx b { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.dr-scen__idx small { grid-column: 1 / -1; font-size: 10px; color: var(--text-secondary);
                      font-variant-numeric: tabular-nums; }
.dr-scen__esito { margin-top: .6rem; font-weight: 600; font-size: var(--font-size-sm, .875rem); }
.dr-scen__card--worse .dr-scen__esito { color: #8c2d04; }
.dr-scen__card--better .dr-scen__esito { color: #01665e; }
.dr-tablewrap { overflow-x: auto; }
.dr-fc__now td { background: var(--bg-tertiary); }

.dr-sign { margin: 0; font-size: var(--font-size-sm, .875rem); color: var(--text-secondary);
           line-height: 1.5; }

/* Le didascalie lunghe restano per intero, ma la seconda meta' e' a richiesta:
   su mobile erano una parete di testo fra un grafico e l'altro. */
.dr-fig figcaption .dr-more { margin-top: .4rem; }
.dr-fig figcaption .dr-more p { margin: 0; }

/* In tema scuro il bruno della siccita' e' troppo cupo per il testo: stessa
   famiglia, luminosita' alzata quanto basta a leggerlo. */
:root[data-theme="dark"] .dr-card--dry .dr-card__class,
:root[data-theme="dark"] .dr-verdict__state.dr-card--dry { color: #d79b4e; }
:root[data-theme="dark"] .dr-card--severe .dr-card__class,
:root[data-theme="dark"] .dr-verdict__state.dr-card--severe,
:root[data-theme="dark"] .dr-verdict__pct--low,
:root[data-theme="dark"] .dr-scen__card--worse .dr-scen__esito { color: #e08356; }
:root[data-theme="dark"] .dr-card--wet .dr-card__class,
:root[data-theme="dark"] .dr-verdict__state.dr-card--wet,
:root[data-theme="dark"] .dr-scen__card--better .dr-scen__esito { color: #57bfb4; }

@media (max-width: 700px) {
  .dr-verdict { grid-template-columns: 1fr; gap: .8rem; }
  .dr-verdict__soil { padding: .75rem; }
  .dr-panel { margin-top: 1.1rem; }
  .dr-cards { gap: .6rem; grid-template-columns: 1fr 1fr; }
  .dr-card { padding: .6rem; }
  .dr-card__value { font-size: 1.5rem; }
  .dr-card__desc { display: none; }
  .dr-scen__grid { gap: .6rem; }
}