/* Base del kit: un reset sobrio e lo stile dei pezzi del kit (grafici, numeri). Non decide l'aspetto
   del sito: colori, font e impaginazione li sceglie ogni sito nel suo :root. I pezzi del kit leggono
   queste variabili, ognuna con un valore di riserva:
     --colore-fondo, --colore-testo, --colore-tenue, --colore-linee, --colore-accento
     --grafico-1 … --grafico-5, --font-testo, --font-titoli, --font-numeri */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--colore-accento, currentColor); outline-offset: 3px; }

/* Solo per chi usa un lettore di schermo (e per le tabelle dietro i grafici). */
.solo-lettori {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Numeri: cifre della stessa larghezza, così un numero che conta non balla. */
[data-conta], .numeri { font-variant-numeric: tabular-nums; }

/* SplitText: le righe dei titoli che salgono da sotto una maschera. */
.riga-maschera { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ——— Grafici (kit/grafici.js) ——— */
.grafico { position: relative; width: 100%; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico text { font-family: var(--font-numeri, var(--font-testo, inherit)); fill: var(--colore-tenue, currentColor); font-size: 13px; }
.grafico .valore { fill: var(--colore-testo, currentColor); font-weight: 600; }
.grafico .griglia { stroke: var(--colore-linee, rgba(127, 127, 127, 0.25)); stroke-width: 1; }
.grafico .asse { stroke: var(--colore-linee, rgba(127, 127, 127, 0.45)); stroke-width: 1; }
.grafico .serie-1 { fill: var(--grafico-1, #3d5afe); stroke: var(--grafico-1, #3d5afe); }
.grafico .serie-2 { fill: var(--grafico-2, #ff7a45); stroke: var(--grafico-2, #ff7a45); }
.grafico .serie-3 { fill: var(--grafico-3, #18a874); stroke: var(--grafico-3, #18a874); }
.grafico .serie-4 { fill: var(--grafico-4, #b25cff); stroke: var(--grafico-4, #b25cff); }
.grafico .serie-5 { fill: var(--grafico-5, #f2b705); stroke: var(--grafico-5, #f2b705); }
.grafico .linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico .area { stroke: none; opacity: 0.16; }
.grafico .punto { stroke: var(--colore-fondo, #fff); stroke-width: 2; }
.grafico .negativo { fill: var(--grafico-negativo, #e5484d); }
.grafico .positivo { fill: var(--grafico-positivo, #18a874); }
.grafico .totale { fill: var(--grafico-totale, var(--colore-testo, #222)); }
.grafico .connettore { stroke: var(--colore-linee, rgba(127, 127, 127, 0.45)); stroke-dasharray: 3 3; }
.grafico .fetta { stroke: var(--colore-fondo, #fff); stroke-width: 2; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; color: var(--colore-tenue, inherit); list-style: none; padding: 0; }
.grafico-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.grafico-legenda i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}