:root {
  --sfondo: #fbfaf7;
  --testo: #1f1d1a;
  --tenue: #6b665e;
  --bordo: #e2ddd4;
  --accento: #8a4f2d;
  --negativo: #9a3b2f;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sfondo);
  color: var(--testo);
}
.intestazione {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.5rem; border-bottom: 1px solid var(--bordo); background: #fff;
}
.marchio { font-weight: 600; text-decoration: none; color: var(--testo); }
.intestazione nav { display: flex; gap: 1rem; }
.intestazione a { color: var(--accento); text-decoration: none; }
.uscita { margin-left: auto; display: flex; align-items: center; gap: .6rem; color: var(--tenue); }
main { max-width: 980px; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
.periodo { color: var(--tenue); margin: 0 0 1.5rem; }
/* la base di un importo grande, accanto al numero: dice a quale dei due si guarda */
.unita { color: var(--tenue); font-size: .8rem; font-weight: 400; }
/* Fette della torta. Le quattro tinte non sono scelte a occhio: passano i
   controlli di separazione su tutte le coppie, anche simulando protanopia,
   deuteranopia e tritanopia. Oltre le quattro nessuna combinazione regge, ed e'
   il motivo per cui la coda finisce in una fetta neutra sola. Lo stroke del
   colore di fondo tiene separate le fette adiacenti. */
.fetta { stroke: var(--sfondo); stroke-width: 2; }
.fetta-1 { fill: #2a78d6; }
.fetta-2 { fill: #eb6834; }
.fetta-3 { fill: #1baf7a; }
.fetta-4 { fill: #4a3aa7; }
.fetta-resto { fill: var(--tenue); }
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { padding: .4rem .6rem; border-bottom: 1px solid var(--bordo); text-align: left; }
th { font-weight: 600; color: var(--tenue); font-size: .85rem; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td a { color: var(--accento); }
.grafico { width: 100%; height: auto; background: #fff; border: 1px solid var(--bordo); }
.asse { stroke: var(--bordo); stroke-width: 1; }
.barra { fill: var(--accento); }
.barra.negativa { fill: var(--negativo); }
.linea { fill: none; stroke: var(--accento); stroke-width: 2; }
.punto { fill: var(--accento); }
.etichetta, .tacca { font-size: 10px; fill: var(--tenue); }
.grafico-vuoto { font-size: 13px; fill: var(--tenue); }
.accesso { max-width: 320px; margin: 3rem auto; display: flex; flex-direction: column; gap: .8rem; }
.accesso label { display: flex; flex-direction: column; gap: .25rem; }
input, button, textarea {
  font: inherit; padding: .5rem; border: 1px solid var(--bordo); border-radius: 3px;
}
button { background: var(--accento); color: #fff; border: none; cursor: pointer; }
.errore { color: var(--negativo); }
.avviso {
  border-left: 3px solid var(--negativo); background: #fdf3f1;
  padding: .6rem .8rem; margin-bottom: 1rem;
}
.verificata { border-left-color: var(--accento); background: #f7f2ee; }
.risposta { white-space: pre-wrap; background: #fff; border: 1px solid var(--bordo); padding: 1rem; }
.domanda-form { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }