/* Stile della web app dei lettori — palette e font dal DNA stilistico del libro */
@font-face{font-family:"Oswald";src:url("fonts/Oswald-VF.ttf") format("truetype");font-weight:200 700;font-display:swap}
@font-face{font-family:"Atkinson";src:url("fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --notte:#043260; --giallo:#FCCF3F; --rosso:#CF2938; --blu:#1060C2;
  --testo:#1B2934; --fondo:#FFFFFF; --box:#F8F9FB; --asfalto:#7E7A77; --linea:#DDE3EA;
  --verde:#1E7A46;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:"Atkinson",Verdana,sans-serif;font-size:18px;line-height:1.45}
a{color:var(--blu)}
h1,h2,h3,.titolo{font-family:"Oswald","Arial Narrow",sans-serif;color:var(--notte);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:2rem;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:1.4rem}
.testata{background:var(--notte);color:#fff;padding:14px 16px}
.testata .marchio{font-family:"Oswald",sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase}
.testata .marchio span{color:var(--giallo)}
.fascia{display:inline-block;background:var(--giallo);color:var(--notte);font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;padding:4px 10px;letter-spacing:.03em}
.pagina{max-width:760px;margin:0 auto;padding:20px 16px 48px}
.box{background:var(--box);border-left:4px solid var(--blu);padding:12px 16px;margin:16px 0}
.box.trappola{border-left-color:var(--rosso)}
.btn{display:inline-block;border:0;border-radius:6px;padding:14px 22px;font:600 1.05rem "Oswald",sans-serif;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;text-decoration:none;text-align:center}
.btn.primario{background:var(--notte);color:#fff}
.btn.giallo{background:var(--giallo);color:var(--notte)}
.btn.secondario{background:#fff;color:var(--notte);border:2px solid var(--notte)}
.btn:focus-visible{outline:3px solid var(--blu);outline-offset:2px}
.btn[disabled]{opacity:.45;cursor:default}
.piccolo{font-size:.85rem;color:#4A5763}
footer{border-top:1px solid var(--linea);margin-top:40px;padding-top:16px;font-size:.85rem;color:#4A5763}
.nascosto{display:none!important}

/* Simulatore */
.barra{position:sticky;top:0;z-index:5;background:var(--notte);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-family:"Oswald",sans-serif;font-size:1.1rem}
.barra .tempo{background:var(--giallo);color:var(--notte);padding:2px 10px;border-radius:4px;font-variant-numeric:tabular-nums}
.barra .tempo.poco{background:var(--rosso);color:#fff}
.domanda{min-height:200px}
.domanda .num{font-family:"Oswald",sans-serif;color:var(--blu);font-size:1rem;margin-bottom:6px}
.domanda .arg{font-size:.8rem;color:#4A5763;margin-bottom:10px}
.domanda img{display:block;width:200px;max-width:60vw;height:auto;margin:6px 0 14px;image-rendering:auto}
.domanda .frase{font-size:1.15rem;margin:0 0 18px}
.vf{display:flex;gap:12px}
.vf button{flex:1;padding:16px 0;font:700 1.3rem "Oswald",sans-serif;border:2px solid var(--notte);background:#fff;color:var(--notte);border-radius:6px;cursor:pointer}
.vf button.scelto{background:var(--notte);color:#fff}
.naviga{display:flex;justify-content:space-between;gap:12px;margin:22px 0}
.griglia{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:18px 0}
.griglia button{aspect-ratio:1;border:1px solid var(--linea);background:#fff;border-radius:4px;font:600 .85rem "Oswald",sans-serif;color:var(--testo);cursor:pointer;padding:0}
.griglia button.risposto{background:#E6EEF8;border-color:var(--blu)}
.griglia button.attuale{outline:3px solid var(--giallo)}
.griglia button.ok{background:#E3F2E9;border-color:var(--verde)}
.griglia button.ko{background:#FBE5E7;border-color:var(--rosso)}
.esito{font-family:"Oswald",sans-serif;font-size:1.6rem;padding:14px 16px;border-radius:6px;margin:10px 0 18px}
.esito.ok{background:#E3F2E9;color:var(--verde)}
.esito.ko{background:#FBE5E7;color:var(--rosso)}
.revisione{border-top:1px solid var(--linea);padding:14px 0}
.revisione .lettere{font-family:"Oswald",sans-serif;font-size:1rem}
.revisione .lettere b.ok{color:var(--verde)} .revisione .lettere b.ko{color:var(--rosso)}
.storico{width:100%;border-collapse:collapse;font-size:.9rem}
.storico td,.storico th{border-bottom:1px solid var(--linea);padding:6px 4px;text-align:left}

/* Checklist */
.check{list-style:none;padding:0;margin:0 0 18px}
.check li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--linea)}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--notte);flex:none}
@media print{
  .testata,.noprint,footer .noprint{display:none!important}
  body{font-size:12pt}
  .pagina{padding:0;max-width:none}
  .check li{break-inside:avoid;padding:4px 0}
  h2{break-after:avoid}
}
@media (max-width:420px){ h1{font-size:1.6rem} .griglia{grid-template-columns:repeat(6,1fr)} }
.griglia button.ok::after{content:" ✓";color:var(--verde)}
.griglia button.ko::after{content:" ✗";color:var(--rosso)}