/* Stili locali di m3t30. Si appoggiano ai token di str4tum-ds (tokens.css);
   l'unica variabile nuova è --m-rain (blu pioggia), assente dalla palette DS. */

:root            { --m-rain: #2f6db0; --m-day: rgba(245, 200, 110, 0.13); --m-night: rgba(96, 125, 210, 0.15); }
[data-theme="light"] { --m-rain: #2f6db0; --m-day: rgba(240, 190, 90, 0.16); --m-night: rgba(70, 100, 190, 0.10); }
[data-theme="dark"]  { --m-rain: #5b9bd5; --m-day: rgba(245, 205, 120, 0.10); --m-night: rgba(110, 140, 225, 0.16); }
@media (prefers-color-scheme: dark) { :root { --m-rain: #5b9bd5; --m-day: rgba(245, 205, 120, 0.10); --m-night: rgba(110, 140, 225, 0.16); } }

/* Accessibilità: link "salta al contenuto" visibile solo al focus da tastiera. */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--bg-panel); color: var(--text-primary);
  padding: var(--space-2) var(--space-4); z-index: 10;
}
.skip-link:focus { left: var(--space-3); }

/* Toolbar: selettore località inline + bottone tema. */
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.field-inline { display: inline-flex; align-items: center; gap: var(--space-2); }
.field-inline .field-label { margin: 0; }

/* Tab di navigazione (bottoni, per accessibilità da tastiera). */
.nav-tabs {
  display: flex; align-items: center; gap: var(--space-5);
  border-bottom: var(--hairline-w) solid var(--hairline);
  margin-bottom: var(--space-6);
}
.nav-tab {
  background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--text-muted); padding: var(--space-3) 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav-tab[data-active="true"] { color: var(--text-primary); border-bottom-color: var(--accent-link); }
.nav-tab:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; }
.nav-models { margin-left: auto; }
.nav-models[data-active="true"] { border-color: var(--hairline-strong); color: var(--text-primary); }

/* KPI "Adesso". */
.kpi-unit { font-size: var(--fs-sm); color: var(--text-muted); }
.kpi-grid { margin-bottom: var(--space-6); }

/* Grafico SVG 24h. */
.chart-wrap {
  border: var(--hairline-w) solid var(--hairline); border-radius: var(--r-md);
  padding: var(--space-3); margin-bottom: var(--space-6);
}
.chart { display: block; width: 100%; height: 200px; }
.wind-arrow { display: inline-block; }

/* Tabella oraria (scroll orizzontale su mobile). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Allineamento: celle E intestazioni numeriche a destra (fix disallineamento). */
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.col-hour { white-space: nowrap; }
.col-wind { white-space: nowrap; }
/* Righe giorno/notte (in base ad alba/tramonto stagionali). */
.table tr.is-day  td { background: var(--m-day); }
.table tr.is-night td { background: var(--m-night); }
/* Incertezza: bordo a sinistra (si compone col colore giorno/notte). */
.table tr[data-uncertain="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent-warn); }

/* Nota di vista (es. "intervallo 30 min") e legenda. */
.view-note { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.legend { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-3); }
.sw { display: inline-block; width: 12px; height: 12px; border: var(--hairline-w) solid var(--hairline); vertical-align: middle; }
.sw-day { background: var(--m-day); }
.sw-night { background: var(--m-night); }

/* Card "Domani" cliccabile + intestazione del dettaglio. */
.entity-card.clickable { cursor: pointer; }
.entity-card.clickable:hover { border-color: var(--hairline-strong); }
.entity-card.clickable:focus-visible { outline: 2px solid var(--accent-link); outline-offset: 2px; }
.day-link { font-size: var(--fs-xs); color: var(--accent-link); margin-top: var(--space-2); }
.detail-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.detail-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

/* Card giornaliere. */
.day-icon { font-size: 1.8rem; line-height: 1; }
.day-temps { display: flex; align-items: baseline; gap: var(--space-2); }
.t-max { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.t-min { font-size: var(--fs-lg); color: var(--text-muted); }
.day-meta { font-size: var(--fs-sm); margin-top: var(--space-1); }
.day-unc { margin-top: var(--space-2); }
.card-comparator { margin-top: var(--space-3); border-top: var(--hairline-w) solid var(--hairline); padding-top: var(--space-2); }
.card-comparator .table { font-size: var(--fs-xs); }
.card-comparator .table td.num, .card-comparator .num { text-align: right; }

/* Footer attribuzioni. */
.foot { margin-top: var(--space-10); padding-top: var(--space-4); border-top: var(--hairline-w) solid var(--hairline); }
.foot-meta { font-size: var(--fs-sm); }
.foot-att { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Mobile: grafico un po' più basso. */
@media (max-width: 560px) {
  .chart { height: 170px; }
  .nav-tabs { gap: var(--space-4); }
}