/* Stile unico del sito — derivato dalle linee grafiche di anteprima.html */
html { background: #e5e5e5; }
body {
  max-width: 26em;
  margin: 2em auto;
  padding: 1.5em;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  line-height: 1.45;
}
p { margin: 0 0 0.8em 0; }
h1 { font-size: 1.4em; text-align: left; margin: 1em 0 0.8em 0; }
h2 { font-size: 1.1em; border-top: 1px solid #cccccc; padding-top: 1.2em; margin-top: 1.6em; }
a { color: inherit; }
.smallcaps { font-variant: small-caps; }

.riquadro { border: 1px solid #bfbfbf; background-color: #f6f6f6; padding: 0.5em 3%; margin: 1em 0; }
.passo { background-color: #ffffff; border-left: 4px solid #666666; }
.nota { background-color: #ffffff; border: 1px dashed #999999; }
.fonte { border-top: 1px solid #bfbfbf; padding-top: 0.4em; margin-top: 0.6em; font-size: 0.85em; }
.nota-piccola { font-size: 0.85em; }

table { border-collapse: collapse; width: 100%; margin: 0.3em 0 0.8em 0; display: block; overflow-x: auto; }
td, th { border-bottom: 1px solid #dddddd; padding: 0.3em 2%; vertical-align: top; text-align: left; }
th { font-weight: bold; border-bottom: 1px solid #999999; }
.tabella-elenco td:first-child { width: 35%; color: #666666; }

ul, ol { margin: 0.5em 0; padding-left: 6%; }
li { margin-bottom: 0.3em; }

.figura { margin: 1em 0; text-align: center; }
.figura p { text-align: center; font-size: 0.9em; margin-bottom: 0.4em; }
.figura svg { max-width: 100%; height: auto; }

.copyright { font-size: 0.85em; margin-top: 2em; color: #444444; }
.etichetta { font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: #666666; margin: 1.6em 0 0.2em 0; }

nav.lezioni { font-size: 0.9em; margin: 0.5em 0 1em 0; }
nav.lezioni a { margin-right: 1em; }

details.flash { border: 1px solid #bfbfbf; background: #f6f6f6; margin: 0.5em 0; padding: 0.4em 3%; }
details.flash summary { cursor: pointer; font-weight: bold; }
details.flash p { margin: 0.5em 0 0.2em 0; }

.comandi { margin: 0.5em 0 0.8em 0; }
button { font: inherit; padding: 0.3em 0.8em; background: #f6f6f6; border: 1px solid #999999; cursor: pointer; }
button:hover, button:focus { background: #e9e9e9; }

/* modalità Ripasso: contenuto velato finché non cliccato */
.velato > .contenuto { display: none; }
button.rivela { display: none; font-size: 0.85em; }
.velato > button.rivela { display: inline-block; }
.studio .velato > .contenuto { display: inline; }
.studio .velato > button.rivela { display: none; }
.svelato > .contenuto { display: inline !important; }
.svelato > button.rivela { display: none !important; }

/* quiz */
.domanda { border: 1px solid #bfbfbf; background: #f6f6f6; padding: 0.6em 3%; margin: 0.8em 0; }
.domanda p.testo { font-weight: bold; margin-bottom: 0.5em; }
.opzioni { list-style: none; padding-left: 0; margin: 0; }
.opzioni li { margin-bottom: 0.4em; }
.opzioni button { display: block; width: 100%; text-align: left; background: #ffffff; }
.opzioni button[disabled] { cursor: default; }
.opzioni button.giusta { border: 2px solid #1a7a1a; background: #eef7ee; }
.opzioni button.errata { border: 2px solid #a33030; background: #f9eeee; }
.esito { margin-top: 0.5em; font-size: 0.9em; display: none; }
.esito .verdetto { font-weight: bold; }
.punteggio { border: 1px solid #666666; background: #ffffff; padding: 0.6em 3%; margin: 1em 0; display: none; }

/* Tabellone comparativo delle distribuzioni (indice) */
.tabellone th,.tabellone td{white-space:nowrap;padding:.3em .6em}

/* ===== Stile ispirato a primatraccia.com (dagli screenshot del 12/11/2026) =====
   Sans (Roboto) per testata, titoli, etichette, tabelle e comandi; serif per il testo. */
:root { --rosso: #d7141a; --grigio-bordo: #d4d4d4; --grigio-scuro: #4a4a4a; --sans: "Roboto", "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Times New Roman", serif; }
html { background: #f2f2f2; }
body { max-width: 760px; margin: 0 auto; padding: 1.6em 48px 2em 48px; background: #ffffff; box-shadow: none;
       font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; color: #1a1a1a; }
a { color: inherit; text-decoration-color: #9a9a9a; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { text-decoration-color: var(--rosso); }
.rosso { color: var(--rosso); }

/* Testata */
.testata { margin-bottom: 1.2em; }
.marchio { margin: 0; font-family: var(--sans); font-weight: 900; font-size: 2.6em; letter-spacing: -0.045em; line-height: 1.1; }
.marchio a { text-decoration: none; color: #111111; }
.punto { color: var(--rosso); }
.motto { margin: 0.3em 0 1em 0; font-family: var(--sans); font-weight: 700; font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: #333333; }
nav.menu { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3em 1.4em; margin: 0; padding: 0.7em 0;
           border-top: 1px solid var(--grigio-bordo); border-bottom: 1px solid var(--grigio-bordo); font-family: var(--sans); font-size: 0.95em; }
nav.menu a { margin: 0; text-decoration: none; }
nav.menu a:hover, nav.menu a:focus { text-decoration: underline; text-decoration-color: var(--rosso); }
nav.menu .lente { margin-left: auto; display: inline-flex; padding: 0.15em; }
.banner { margin: 1.1em 0 0 0; }
.banner a { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4em 1em;
            border: 1px solid var(--rosso); background: #f4f4f4; padding: 0.6em 1.3em; text-decoration: none; font-family: var(--sans); }
.banner-titolo { font-weight: 700; font-size: 1.4em; letter-spacing: -0.01em; }
.banner-azione { font-weight: 700; font-size: 0.9em; border-bottom: 2px solid var(--rosso); }

/* Occhiello: "data | categoria" */
.occhiello { font-family: var(--sans); font-weight: 700; font-size: 0.82em; color: #222222; margin: 1.4em 0 0.5em 0; }
.occhiello .data { margin: 0; }
.occhiello .data + .categoria { border-left: 1px solid var(--grigio-bordo); margin-left: 0.7em; padding-left: 0.7em; }
.occhiello .categoria { text-transform: none; letter-spacing: 0; }

/* Titoli */
h1 { font-family: var(--sans); font-weight: 700; font-size: 2.35em; line-height: 1.15; letter-spacing: -0.02em; margin: 0.2em 0 0.6em 0; }
h2 { font-family: var(--sans); font-weight: 700; font-size: 1.35em; line-height: 1.25; border-top: 1px solid var(--grigio-bordo); padding-top: 1em; margin-top: 1.6em; }
h3 { font-family: var(--sans); }
.etichetta { font-family: var(--sans); font-weight: 700; letter-spacing: 0.1em; color: #333333; }
nav.lezioni { font-family: var(--sans); font-size: 0.9em; }
.nota-piccola, .fonte { font-family: var(--sans); font-size: 0.82em; color: #333333; }

/* Riquadri come i blocchi-citazione di primatraccia */
.riquadro, details.flash, .domanda { background: #ffffff; border: 1px solid var(--grigio-bordo); border-left: 5px solid var(--grigio-scuro); padding: 0.8em 1.3em; }
.nota { border-left: 5px solid var(--rosso); border-style: solid; }
details.flash summary { font-family: var(--sans); font-weight: 700; }

/* Tabelle: intestazione scura, testo sans */
table { font-family: var(--sans); font-size: 0.85em; }
th { background: #2f3133; color: #ffffff; border-bottom: 0; font-weight: 700; }
td, th { padding: 0.35em 0.6em; }
.tabella-elenco td:first-child { font-weight: 500; color: #555555; }
.tabella-elenco th { background: none; color: inherit; }

/* Comandi e quiz */
button { font-family: var(--sans); font-weight: 500; font-size: 0.85em; background: #f4f4f4; border: 1px solid #9a9a9a; border-radius: 2px; }
.domanda p.testo { font-family: var(--sans); font-weight: 700; }
.opzioni button { font-weight: 400; font-size: 0.9em; padding: 0.45em 0.7em; }
.esito { font-size: 0.95em; }
.punteggio { font-family: var(--sans); border: 1px solid var(--rosso); background: #f4f4f4; }
form.cerca { display: flex; gap: 0.4em; margin: 0.6em 0 0.8em 0; }
form.cerca input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 16px; padding: 0.4em 0.6em; border: 1px solid #9a9a9a; }

/* Anteprime nell'indice e nella ricerca */
.elenco-anteprime { margin: 0.6em 0 1em 0; }
.anteprima { border: 1px solid #bdbdbd; padding: 0.2em 1.3em 0.9em 1.3em; margin: 0 0 1.1em 0; }
.anteprima .occhiello { margin-top: 0.8em; }
.anteprima h3 { font-weight: 700; font-size: 1.3em; line-height: 1.25; letter-spacing: -0.01em; margin: 0.1em 0 0.4em 0; }
.anteprima p:last-child { margin: 0; font-size: 0.95em; }

/* Piede */
.piede { border-top: 1px solid var(--grigio-bordo); margin-top: 2.5em; padding-top: 1em; }
.piede .marchio { font-size: 1.8em; margin-top: 0.8em; }
.ritorno { font-family: var(--sans); font-size: 0.9em; display: flex; gap: 1.4em; flex-wrap: wrap; }

/* ===== Adattamento al dispositivo ===== */
/* Tablet e finestre strette */
@media (max-width: 860px) {
  body { padding: 1.4em 32px 2em 32px; }
}
/* Telefono: margini di 16 px, titoli più piccoli, banner su due righe */
@media (max-width: 600px) {
  html { background: #ffffff; }
  body { padding: 1em 16px 1.5em 16px; font-size: 1.0625rem; }
  .marchio { font-size: 2.1em; }
  .motto { font-size: 0.72em; }
  h1 { font-size: 1.75em; }
  h2 { font-size: 1.2em; }
  .banner a { padding: 0.5em 0.9em; }
  .banner-titolo { font-size: 1.15em; }
  .anteprima { padding: 0.1em 0.9em 0.8em 0.9em; }
  .anteprima h3 { font-size: 1.15em; }
  .riquadro, details.flash, .domanda { padding: 0.7em 0.9em; }
}

/* Sommario "In questa lezione" */
ol.sommario li { margin-bottom: 0.25em; }
ol.sommario a { text-decoration: none; }
ol.sommario a:hover, ol.sommario a:focus { text-decoration: underline; text-decoration-color: var(--rosso); }

/* ===== Modello a domande (lezione 1, in prova) — ottimizzazione dalla ricerca del 13/11/2026 =====
   Fonti: dimensione e contrasto contano più del disegno del font (Legge & Bigelow 2011; Legge et al. 2026);
   x-height ampia aiuta a schermo; testo scuro su chiaro (Piepenbrock et al. 2014);
   segnali di struttura (Schneider et al. 2018); niente elementi superflui (Mayer 2020; Sundararajan & Adesope 2020);
   WCAG 2.2: contrasto >= 4,5:1, spaziature 1.4.12, bersagli di tocco >= 24 px (2.5.8). */
.modello-domande { --testo: #1a1a1a; --secondario: #4d4d4d; --riga: #e3e3e3; --fondo-tenue: #f6f6f6;
  font-family: var(--sans); font-size: 1.1875rem; line-height: 1.65; color: var(--testo); }

/* Testata più compatta: il contenuto arriva prima sullo schermo */
.modello-domande .testata { margin-bottom: 0.4em; }
.modello-domande .marchio { font-size: 1.9em; }
.modello-domande .motto { margin: 0.2em 0 0.7em 0; }
.modello-domande nav.menu { padding: 0.5em 0; }
.modello-domande .occhiello { margin-top: 1.2em; color: var(--secondario); }
.modello-domande h1 { font-size: 2.2em; margin-bottom: 0.4em; }

/* Titoli-domanda: numero in rosso come unico segnale di colore */
.modello-domande h2 { font-size: 1.35em; line-height: 1.3; border-top: 0; padding-top: 0; margin: 2.4em 0 0.7em 0; }
.modello-domande h2 .num { color: var(--rosso); margin-right: 0.15em; }

/* Riga di testo di circa 65-70 caratteri; spazio fra i paragrafi */
.modello-domande > p, .modello-domande > ul, .modello-domande ol.sommario { max-width: 34em; }
.modello-domande p { margin: 0 0 1em 0; }
.modello-domande strong { font-weight: 700; }
.modello-domande ul li { margin-bottom: 0.6em; }

/* Sommario: numeri in rosso, voci cliccabili ben distanziate */
.modello-domande ol.sommario { padding-left: 1.6em; margin: 0.4em 0 0 0; }
.modello-domande ol.sommario li { margin-bottom: 0.45em; padding-left: 0.2em; }
.modello-domande ol.sommario li::marker { color: var(--rosso); font-weight: 700; }
.modello-domande ol.sommario a { text-decoration: none; }

/* Tabelle: polarità positiva (niente intestazione nera), testo a 16 px, righe sottili, prima colonna in grassetto */
.modello-domande table { font-family: var(--sans); font-size: 1rem; line-height: 1.5; width: 100%; display: table; border-collapse: collapse; margin: 0.4em 0 1.4em 0; }
.modello-domande th { background: none; color: var(--secondario); font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 2px solid var(--testo); padding: 0.4em 0.8em 0.4em 0; text-align: left; }
.modello-domande td { border-bottom: 1px solid var(--riga); padding: 0.65em 0.8em 0.65em 0; vertical-align: top; }
.modello-domande td:first-child { font-weight: 700; color: var(--testo); width: auto; }
.modello-domande .tabella-elenco td:first-child { width: 30%; }
.modello-domande .tabella-elenco table { border-top: 2px solid var(--testo); }

/* Quiz: carattere 16-17 px, bersagli di tocco alti almeno 44 px, esito con testo e colore */
.modello-domande .domanda { border: 1px solid var(--riga); border-left: 4px solid var(--testo); background: #ffffff; padding: 1em 1.2em; margin: 1.2em 0; }
.modello-domande .domanda p.testo { font-size: 1.05em; line-height: 1.45; }
.modello-domande .opzioni button { font-family: var(--sans); font-size: 1rem; line-height: 1.4; min-height: 44px; padding: 0.55em 0.8em; border: 1px solid #b5b5b5; }
.modello-domande .opzioni button:hover:not([disabled]) { border-color: var(--testo); background: var(--fondo-tenue); }
.modello-domande .opzioni button.giusta { border: 2px solid #1a7a1a; background: #eef7ee; }
.modello-domande .opzioni button.errata { border: 2px solid #b02a2a; background: #fbefef; }
.modello-domande .esito { font-size: 1rem; }
.modello-domande .punteggio { font-size: 1.05em; }

/* Navigazione tra lezioni in fondo, dopo il quiz */
.lezioni-fondo { display: flex; justify-content: space-between; gap: 1em; font-family: var(--sans); font-weight: 700; margin: 2em 0 0 0; padding-top: 1em; border-top: 1px solid var(--riga); }
.lezioni-fondo a { text-decoration: none; }
.lezioni-fondo a:hover, .lezioni-fondo a:focus { text-decoration: underline; text-decoration-color: var(--rosso); }

/* Telefono: tabelle a schede (una riga = un blocco), niente scorrimento laterale */
@media (max-width: 600px) {
  .modello-domande { font-size: 1.0625rem; }
  .modello-domande h1 { font-size: 1.65em; }
  .modello-domande h2 { font-size: 1.2em; margin-top: 2em; }
  .modello-domande .marchio { font-size: 1.6em; }
  .modello-domande table, .modello-domande tbody, .modello-domande tr, .modello-domande td { display: block; width: 100%; }
  .modello-domande tr:first-child:has(th) { display: none; }
  .modello-domande tr { border-bottom: 1px solid var(--riga); padding: 0.5em 0; }
  .modello-domande td { border: 0; padding: 0.15em 0; }
  .modello-domande td[data-etichetta]:not(:first-child)::before { content: attr(data-etichetta) ": "; font-weight: 700; color: var(--secondario); font-size: 0.85em; }
  .modello-domande td:first-child { font-size: 1.05em; }
  .modello-domande .tabella-elenco td:first-child { width: 100%; }
  .modello-domande .domanda { padding: 0.8em 0.9em; }
}

/* ===== Lettura senza fatica per presbiti (lezione 1, in prova) =====
   Calabrèse et al. 2016 (IOVS, N = 645): la dimensione critica del testo cresce con l'età
   (da 0,08 a 0,21 logMAR a 68 anni: circa +35%) -> testo più grande.
   Piepenbrock et al. 2013 (Ergonomics): testo scuro su chiaro conviene anche agli adulti più anziani.
   Con l'età cala la sensibilità al contrasto -> niente grigi chiari, niente testo minuscolo o maiuscoletto spaziato. */
.modello-domande { --secondario: #2e2e2e; --riga: #cfcfcf; font-size: 1.3125rem; line-height: 1.7; }
.modello-domande .occhiello { font-size: 0.9em; color: #2e2e2e; }
.modello-domande .motto { color: #2e2e2e; }
.modello-domande .nota-piccola { font-size: 0.9em; color: #2e2e2e; }
.modello-domande h1 { font-size: 2em; line-height: 1.2; }
.modello-domande h2 { font-size: 1.3em; }
.modello-domande table { font-size: 0.875em; line-height: 1.6; }
.modello-domande th { font-size: 0.95em; text-transform: none; letter-spacing: 0; color: #1a1a1a; }
.modello-domande .opzioni button { font-size: 0.9em; min-height: 48px; }
.modello-domande .esito { font-size: 0.9em; }
/* Comando per ingrandire il testo */
.dimensione { display: inline-flex; gap: 0.3em; margin-left: auto; }
.dimensione button { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; min-width: 44px; min-height: 40px; padding: 0 0.5em; background: #ffffff; border: 1px solid #8a8a8a; }
.dimensione + .lente { margin-left: 0.6em !important; }
@media (max-width: 600px) {
  .modello-domande { font-size: 1.1875rem; }
  .modello-domande h1 { font-size: 1.55em; }
  .modello-domande table { font-size: 0.95em; }
  .modello-domande .opzioni button { font-size: 0.95em; }
}
.modello-domande .motto { text-transform: none; letter-spacing: 0.02em; font-size: 0.85em; }
@media (max-width: 600px) {
  .modello-domande nav.menu { flex-wrap: wrap; gap: 0.4em 0.9em; }
  .modello-domande .dimensione button { min-width: 40px; }
  .modello-domande td[data-etichetta]:not(:first-child)::before { font-size: 0.95em; color: #1a1a1a; }
}
.modello-domande nav.menu a { white-space: nowrap; }
@media (max-width: 360px) { .modello-domande nav.menu { gap: 0.55em; } .modello-domande .dimensione { gap: 0.2em; } }
@media (max-width: 360px) { .modello-domande nav.menu { font-size: 0.85em; } .modello-domande .dimensione button { min-width: 36px; padding: 0 0.3em; } }
@media (max-width: 360px) { .modello-domande nav.menu { flex-wrap: wrap; } }
/* Bersagli di tocco sul telefono: lente e voci del sommario alte almeno 44 px */
.modello-domande nav.menu .lente { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0; }
.modello-domande ol.sommario li { margin-bottom: 0.1em; }
.modello-domande ol.sommario a { display: block; padding: 0.35em 0; min-height: 44px; box-sizing: border-box; }
.modello-domande .tabellone th, .modello-domande .tabellone td { white-space: normal; padding-right: 0.6em; }

/* Tabellone delle distribuzioni: scorre in orizzontale solo se non entra (tabella di dati, ammessa da WCAG 1.4.10) */
.scorri { overflow-x: auto; }
.modello-domande .scorri table { min-width: 36em; }
@media (max-width: 600px) { .modello-domande .scorri table { min-width: 0; } }
/* Opzioni del quiz dopo la risposta: testo sempre scuro (il grigio di sistema ha contrasto basso) */
.opzioni button[disabled] { color: #1a1a1a; opacity: 1; -webkit-text-fill-color: #1a1a1a; }

/* ===== Aggiunte per il sito di Statistica: formule, grafici, codice, avvisi ===== */
.modello-domande .katex { font-size: 1.08em; }
.modello-domande .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2em 0; margin: 0.6em 0 1em 0; }
.modello-domande td .katex-display { margin: 0.2em 0; }
figure.grafico { margin: 0.6em 0 1.4em 0; max-width: 34em; }
figure.grafico svg { width: 100%; height: auto; display: block; font-family: var(--sans); font-size: 17px; fill: #1a1a1a; }
figure.grafico .griglia { stroke: #dcdcdc; stroke-width: 1; }
figure.grafico .asse { stroke: #1a1a1a; stroke-width: 1.5; }
figure.grafico .bar { fill: #5b5b5b; }
figure.grafico .bar.bordo { stroke: #ffffff; stroke-width: 1.5; }
figure.grafico .acc { fill: #d7141a; }
figure.grafico .linea, figure.grafico .mediana { stroke: #1a1a1a; stroke-width: 2; }
figure.grafico .mediana { stroke: #d7141a; stroke-width: 3; }
figure.grafico .scatola { fill: #e9e9e9; stroke: #1a1a1a; stroke-width: 2; }
figure.grafico .serie { fill: none; stroke: #5b5b5b; stroke-width: 2.5; }
figure.grafico .punto-g { fill: #1a1a1a; }
figure.grafico .retta { stroke: #d7141a; stroke-width: 3; }
figure.grafico figcaption { font-family: var(--sans); font-size: 0.85em; color: #2e2e2e; margin-top: 0.3em; }
.modello-domande pre { font-family: "Roboto Mono", Consolas, "Courier New", monospace; font-size: 0.85em; line-height: 1.5; background: #f4f4f4; border-left: 4px solid #1a1a1a; padding: 0.7em 0.9em; overflow-x: auto; max-width: 100%; }
.modello-domande code { font-family: "Roboto Mono", Consolas, "Courier New", monospace; font-size: 0.9em; }
.avviso { font-family: var(--sans); border-left: 4px solid #d7141a; padding: 0.4em 0 0.4em 0.9em; max-width: 34em; }

/* contenitore posizionato: la parte MathML nascosta non esce dalla pagina */
.katex, .katex-display { position: relative; }