:root {
  --fondo: #faf9fc;
  --foglio: #ffffff;
  --inchiostro: #221d2e;
  --grigio: #625b70;
  --viola: #5b4a9b;
  --viola-scuro: #3f3273;
  --viola-tenue: #eeeaf8;
  --viola-bordo: #cfc6ec;
  --ambra: #d9913a;
  --riga: #e3dfeb;
  --su-viola: #ffffff;
  --wykres: var(--viola);
  --wykres-tlo: var(--riga);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141219;
    --foglio: #1c1924;
    --inchiostro: #ebe7f3;
    --grigio: #aaa2ba;
    --viola: #a896e6;
    --viola-scuro: #2b2346;
    --viola-tenue: #262038;
    --viola-bordo: #4a3f72;
    --ambra: #e8a95c;
    --riga: #302b3c;
    --su-viola: #17131f;
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font: 1rem/1.68 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  overflow-wrap: break-word;
}
.gabbia { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
a { color: var(--viola); text-underline-offset: 0.15em; }
a:hover { color: var(--ambra); }

/* intestazione: logo a sinistra con marchio in pillola, indice a schede */
.intestazione { background: var(--foglio); border-top: 5px solid var(--viola); }
.intestazione-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; padding-top: 0.9rem; padding-bottom: 0.7rem; }
.logo { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--inchiostro); text-decoration: none; min-width: 0; }
.logo-segno { flex: none; background: var(--viola); color: var(--su-viola); font: 700 0.72rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 0.35rem 0.45rem; border-radius: 999px; letter-spacing: 0.02em; }
.logo-nome { font: 600 1.12rem/1.2 Georgia, "Iowan Old Style", "Palatino Linotype", serif; overflow-wrap: anywhere; }
.logo-nome em { font-style: italic; color: var(--viola); padding: 0 0.05em; }
.sottotitolo { margin: 0; font-size: 0.8rem; color: var(--grigio); }
.indice { border-top: 1px solid var(--riga); border-bottom: 1px solid var(--riga); background: var(--foglio); }
.indice ul { list-style: none; margin: 0 auto; padding-top: 0.55rem; padding-bottom: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.indice a { display: inline-block; font-size: 0.82rem; line-height: 1.3; padding: 0.28rem 0.7rem; border: 1px solid var(--viola-bordo); border-radius: 999px; color: var(--inchiostro); text-decoration: none; background: var(--fondo); }
.indice a:hover { border-color: var(--viola); color: var(--viola); }

/* pagina */
.pagina { padding-top: 1.4rem; padding-bottom: 1rem; }
.okruszki { font-size: 0.78rem; color: var(--grigio); margin-bottom: 0.9rem; }
.okruszki a { color: var(--grigio); }
.okruszki span { margin: 0 0.25rem; }
.etichetta-domanda { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambra); }
h1 { font: 700 clamp(1.45rem, 5vw, 2.05rem)/1.22 Georgia, "Iowan Old Style", "Palatino Linotype", serif; margin: 0.25rem 0 0.4rem; }
.verifica { margin: 0 0 1.4rem; font-size: 0.78rem; color: var(--grigio); }

/* risposte: la prima risposta in riquadro, le H2 numerate */
.risposte { counter-reset: domanda; }
.risposte > p:first-child:not(:only-child) {
  position: relative;
  margin: 0 0 1.8rem;
  padding: 1.6rem 1.2rem 1.1rem;
  background: var(--viola-tenue);
  border: 1px solid var(--viola-bordo);
  border-left: 6px solid var(--viola);
  border-radius: 4px 14px 14px 4px;
  font-size: 1.04rem;
}
.risposte > p:first-child:not(:only-child)::before {
  content: "Risposta breve";
  position: absolute;
  top: -0.7rem;
  left: 0.9rem;
  background: var(--viola);
  color: var(--su-viola);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
}
.risposte h2 {
  counter-increment: domanda;
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  font: 700 1.24rem/1.32 Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  margin: 2.4rem 0 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--riga);
}
.risposte h2::before {
  content: counter(domanda, decimal-leading-zero);
  flex: none;
  font: 700 0.8rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--su-viola);
  background: var(--viola);
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  position: relative;
  top: -0.1rem;
}
.risposte h2#domande-frequenti::before { content: "?"; background: var(--ambra); padding: 0.3rem 0.55rem; }
.risposte h3 { font-size: 1rem; line-height: 1.4; margin: 1.3rem 0 0.35rem; padding-left: 0.8rem; border-left: 3px solid var(--ambra); }
.risposte p, .risposte ul, .risposte ol { margin: 0 0 1rem; }
.risposte ul, .risposte ol { padding-left: 1.3rem; }
.risposte li { margin-bottom: 0.3rem; }
.risposte li::marker { color: var(--viola); }

/* tabelle: scorrono in orizzontale dentro il riquadro, mai la pagina */
.tabela { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.1rem 0 1.4rem; border: 1px solid var(--riga); border-radius: 8px; background: var(--foglio); }
.tabela table { border-collapse: collapse; width: 100%; font-size: 0.85rem; line-height: 1.45; }
.tabela th { text-align: left; padding: 0.55rem 0.7rem; background: var(--viola-scuro); color: #ffffff; font-weight: 600; white-space: nowrap; }
.tabela td { padding: 0.48rem 0.7rem; border-top: 1px solid var(--riga); vertical-align: top; }
.tabela tbody tr:nth-child(even) td { background: var(--fondo); }

/* chiusura: due colonne su schermo largo, una su mobile */
.chiusura { margin-top: 3rem; background: var(--viola-scuro); color: #e9e4f7; padding: 1.8rem 0 1.4rem; font-size: 0.86rem; }
.chiusura a { color: #ffffff; }
.chiusura a:hover { color: var(--ambra); }
.chiusura-griglia { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 40rem) { .chiusura-griglia { grid-template-columns: 3fr 2fr; } }
.chiusura-nome { margin: 0 0 0.4rem; font: 600 1.05rem/1.3 Georgia, "Iowan Old Style", "Palatino Linotype", serif; color: #ffffff; overflow-wrap: anywhere; }
.chiusura-chi p { margin-top: 0; }
.chiusura-titolo { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambra); }
.chiusura-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.avvertenza { margin: 1.4rem 0 0.4rem; padding: 0.8rem 1rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; font-size: 0.8rem; }
.copyright { margin: 0; font-size: 0.74rem; opacity: 0.8; }

/* dopisane przez build.py: obraz pod pierwszym akapitem i wykresy slupkowe */
.obraz { margin: 1.4rem 0 1.6rem; }
.obraz img { display: block; width: 100%; height: auto; border-radius: 10px; }
.wykres { margin: 1.3rem 0 1.5rem; }
.wykres figcaption { font-weight: 600; margin-bottom: .6rem; }
.wykres-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; margin: 0 0 .55rem; font-size: .9rem; }
.wykres-etykieta { grid-column: 1 / -1; line-height: 1.35; }
.wykres-pasek { display: block; height: .7rem; margin-top: .25rem; border-radius: 99px; background: var(--wykres-tlo, rgba(127, 127, 127, .18)); overflow: hidden; align-self: center; }
.wykres-pasek span { display: block; height: 100%; border-radius: 99px; background: var(--wykres, #5b4a9b); }
.wykres-wartosc { font-variant-numeric: tabular-nums; font-weight: 600; align-self: center; margin-top: .25rem; }
.wykres-nota { font-size: .8rem; opacity: .8; margin: .5rem 0 0; }