/* esercitazioni.it — Swiss/minimal, trust-forward. Vanilla, mobile-first. */
:root{
  /* colore */
  --accent:#4f46e5;--accent-d:#4338ca;--accent-50:#eef2ff;--ring:rgba(79,70,229,.35);
  --ink:#0f172a;--ink-2:#334155;--muted:#64748b;
  --bg:#ffffff;--surface:#f8fafc;--surface-2:#f1f5f9;--line:#e2e8f0;
  --ok:#059669;--ok-bg:#ecfdf5;--ok-line:#a7f3d0;--err:#dc2626;--err-bg:#fef2f2;--err-line:#fecaca;
  /* spazi 4/8 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  /* raggi + ombre */
  --r1:8px;--r2:12px;--r3:16px;--pill:999px;
  --sh1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
  --sh2:0 4px 12px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);
  --sh3:0 -6px 24px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
.btn,.quiz-opt,.tile,.nav-burger,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.65;color:var(--ink-2);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

.wrap{max-width:880px;margin:0 auto;padding:var(--s6) var(--s4) var(--s8)}
.muted{color:var(--muted)}

/* tipografia */
h1,h2,h3{color:var(--ink);line-height:1.18;letter-spacing:-.02em;font-weight:700;margin:0 0 .4em}
h1{font-size:clamp(1.85rem,4.5vw,2.6rem);margin-top:.1em}
h2{font-size:clamp(1.3rem,2.6vw,1.6rem);margin:1.8em 0 .5em}
h3{font-size:1.1rem}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:60ch}
p{margin:0 0 1em}

/* focus visibile (a11y) */
a:focus-visible,button:focus-visible,.quiz-opt:focus-visible,.tile:focus-visible{
  outline:3px solid var(--ring);outline-offset:2px;border-radius:var(--r1)}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--accent);color:#fff;border:0;border-radius:var(--pill);
  padding:.72em 1.4em;font:inherit;font-weight:600;line-height:1;min-height:44px;
  cursor:pointer;transition:background .18s ease,transform .12s ease,box-shadow .18s ease}
.btn:hover{background:var(--accent-d);text-decoration:none;transform:translateY(-1px);box-shadow:var(--sh2)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--surface);color:var(--ink)}
.btn-lg{font-size:1.08rem;padding:.9em 1.8em;min-height:52px}
.mode-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:var(--s4) 0}
.mode-grid .btn{flex-direction:column;align-items:flex-start;gap:.2em;text-align:left;min-height:64px}
.mode-grid .btn small{font-weight:500;opacity:.8;font-size:.82rem}

/* header sticky */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--s4);
  max-width:880px;margin:0 auto;padding:var(--s3) var(--s4);
  background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em}
.brand svg{color:var(--accent)}.brand-dot{color:var(--accent)}
.site-nav{margin-left:auto;display:flex;gap:var(--s5)}
.site-nav a{color:var(--ink-2);font-weight:500}
.site-nav a:hover{color:var(--accent);text-decoration:none}
.nav-burger{display:none;margin-left:auto;background:0;border:0;color:var(--ink);cursor:pointer;padding:6px;min-height:44px}

/* hero */
.hero{padding:var(--s5) 0 var(--s2)}
.crumbs{font-size:.9rem;margin-bottom:var(--s3)}
.crumbs a{color:var(--muted)}

/* card + tiles */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);margin:var(--s4) 0;box-shadow:var(--sh1)}
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:var(--s5) 0}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s5);box-shadow:var(--sh1);transition:transform .15s ease,box-shadow .18s ease,border-color .18s ease}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--accent);text-decoration:none}
.tile h3{margin:0 0 .25em;color:var(--ink)}
.tile p{margin:0}

/* chip / meta */
.meta-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0}
.chip{display:inline-flex;align-items:center;background:var(--accent-50);color:var(--accent-d);
  border:1px solid #e0e7ff;border-radius:var(--pill);padding:.35em .9em;font-size:.88rem;font-weight:600}

/* FAQ */
.faq{margin:var(--s4) 0}
.faq dt{font-weight:600;color:var(--ink);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.faq dt:first-child{border-top:0;padding-top:0;margin-top:0}
.faq dd{margin:.35em 0 0;color:var(--ink-2)}

/* footer */
.site-foot{max-width:880px;margin:var(--s7) auto 0;padding:var(--s5) var(--s4)}
.site-foot{border-top:1px solid var(--line)}
.foot-cols{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:space-between}
.foot-cols p{max-width:46ch}
.foot-links{display:flex;flex-direction:column;gap:var(--s2)}.foot-links a{color:var(--muted)}
.foot-attr{font-size:.85rem;border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s4)}
.foot-copy{font-size:.85rem;margin:var(--s3) 0 0}

/* cookie bar */
.cookiebar[hidden]{display:none}
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:var(--s4);align-items:center;
  flex-wrap:wrap;padding:var(--s4);padding-bottom:max(var(--s4),env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);box-shadow:var(--sh3)}
.cookiebar p{margin:0;flex:1 1 280px;font-size:.92rem}
.cookiebar-actions{display:flex;gap:var(--s3)}

/* ===== PLAYER ===== */
#quiz{margin:var(--s5) 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r3);padding:var(--s5);box-shadow:var(--sh1)}
#quiz>.btn:first-child{margin-top:var(--s1)}
#quiz-fallback{margin:var(--s3) 0 0}

.quiz-progress{margin-bottom:var(--s4)}
.quiz-timer{float:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent-d);
  background:var(--accent-50);border:1px solid #e0e7ff;border-radius:var(--pill);padding:.15em .7em;font-size:.95rem}
.quiz-step{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px;
  font-variant-numeric:tabular-nums}
.quiz-bar{height:8px;border-radius:var(--pill);background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.quiz-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7c6cf0);
  border-radius:var(--pill);transition:width .35s cubic-bezier(.4,0,.2,1)}

.quiz-img{display:block;margin:0 auto var(--s4);max-height:160px;max-width:100%;height:auto;
  padding:var(--s3);background:#fff;border:1px solid var(--line);border-radius:var(--r2)}
.quiz-q{font-size:1.25rem;line-height:1.4;font-weight:600;color:var(--ink);margin:var(--s3) 0 var(--s5)}

.quiz-opts{display:flex;flex-direction:column;gap:var(--s3);counter-reset:opt}
.quiz-opt{display:flex;align-items:center;gap:var(--s3);text-align:left;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r2);
  padding:.85em 1em;min-height:52px;font:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .1s ease}
.quiz-opt::before{counter-increment:opt;content:counter(opt,upper-alpha);
  flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:var(--surface-2);color:var(--muted);font-size:.85rem;font-weight:700}
.quiz-opt:hover{border-color:var(--accent);background:var(--accent-50)}
.quiz-opt:active{transform:scale(.995)}
.quiz-opt.sel{border-color:var(--accent);background:var(--accent-50)}
.quiz-opt.sel::before{background:var(--accent);color:#fff}
.quiz-opt.correct{border-color:var(--ok);background:var(--ok-bg)}
.quiz-opt.correct::before{background:var(--ok);color:#fff}
.quiz-opt.wrong{border-color:var(--err);background:var(--err-bg)}
.quiz-opt.wrong::before{background:var(--err);color:#fff}

.quiz-nav{display:flex;gap:var(--s3);margin-top:var(--s5)}
.quiz-nav #quiz-next{margin-left:auto;flex:1 1 auto;max-width:60%}

/* risultato */
.quiz-result{text-align:center;padding:var(--s5) var(--s3) var(--s3)}
.quiz-banner{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1.1em;border-radius:var(--pill);
  font-weight:700;margin-bottom:var(--s4)}
.quiz-banner.quiz-pass{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line)}
.quiz-banner.quiz-fail{background:var(--err-bg);color:var(--err);border:1px solid var(--err-line)}
.quiz-score{font-size:clamp(2.8rem,9vw,3.6rem);font-weight:800;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.quiz-score span{font-size:.42em;font-weight:600;color:var(--muted)}
.quiz-pass{color:var(--ok)}.quiz-fail{color:var(--err)}
.quiz-pct{color:var(--muted);margin:var(--s2) 0 var(--s5);font-variant-numeric:tabular-nums}

.quiz-review{margin-top:var(--s6)}
.quiz-review .ri{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:var(--r1);padding:.6em .9em;margin:var(--s3) 0;color:var(--ink-2)}
.quiz-review .ri.bad{border-left-color:var(--err)}
.quiz-review .ri.good{border-left-color:var(--ok)}

/* pagine legali / prosa */
.prose{max-width:70ch}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:1.2em;margin:.4em 0 1em}
.prose li{margin:.3em 0}
.prose .small{font-size:.9rem}
.prose table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--line);padding:.5em .7em;text-align:left;vertical-align:top}
.prose th{background:var(--surface);font-weight:600;color:var(--ink)}
.prose code{background:var(--surface-2);padding:.1em .35em;border-radius:4px;font-size:.9em}

/* testo editoriale giustificato (guide, prosa, intro/corpo delle pagine, risposte FAQ),
   con sillabazione it per evitare i "fiumi". Esclude card/footer/player (non figli di .wrap). */
.guide-body p,.guide-body li,.prose p,.prose li,
.lead,.wrap>p,.faq dd{
  text-align:justify;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* AdSense: nessuno slot rotto in preview (helper non stampa nulla) */
ins.adsbygoogle{display:block;margin:var(--s5) 0}

/* box affiliate (manuale consigliato Amazon) */
.aff-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);margin:var(--s4) 0}
.aff-label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 var(--s3)}
.aff-item{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.aff-item+.aff-item{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.aff-info{display:flex;flex-direction:column;gap:2px;flex:1 1 260px}
.aff-info strong{color:var(--ink)}
.aff-cta{flex:0 0 auto;white-space:nowrap}
.aff-disc{font-size:.82rem;margin:var(--s4) 0 0}

/* segnali stradali */
.signs-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin:var(--s4) 0}
.sign-card{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);font-size:.85rem;color:var(--ink)}
.sign-card:hover{border-color:var(--accent);text-decoration:none}
.sign-detail{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;margin:var(--s4) 0}

/* mobile */
@media(max-width:760px){
  .site-nav{display:none}
  .nav-burger{display:block}
  body.nav-open .site-nav{display:flex;flex-direction:column;gap:var(--s4);
    position:absolute;top:58px;right:var(--s4);background:#fff;border:1px solid var(--line);
    border-radius:var(--r2);padding:var(--s4) var(--s5);box-shadow:var(--sh2);min-width:200px}
  .foot-cols{flex-direction:column;gap:var(--s4)}
  .quiz-nav #quiz-next{max-width:none}
}

/* blocco trasparenza redazionale (E-E-A-T) */
.authorship{font-size:.85rem;margin:.5rem 0 1rem;padding-left:.75rem;border-left:2px solid var(--line,#e5e7eb)}
.authorship-src{display:inline-block;margin-top:.15rem}

/* rispetta reduced-motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}