/* ============================================================
   Guida illustrata di MappAI per i docenti — foglio di stile
   Veste «manifesto» dell'app: i token sono quelli di
   public/css/mappai-stile-manifesto.css (verde #41e6aa con testo SCURO,
   viola #ac72fe / #8100f4, nero #404040, card #f1f4f8). Titoli ed
   etichette in Atkinson Hyperlegible Mono, corpo e titoli in Atkinson
   Hyperlegible Next (entrambi variabili 200-800, nati per leggere): il
   PARATESTO (occhielli, etichette, didascalie, tabelle, note) si distingue
   dal testo per PESO e per larghezza — non per famiglia estranea.
   Emoji: Noto Color Emoji (default del progetto), con ripiego di sistema.
   Contrasti misurati: #404040 su bianco 10,4:1 · #5b6069 su bianco 6,9:1 ·
   #8100f4 su bianco 6,6:1 · #404040 su verde #41e6aa 6,5:1.
   ============================================================ */
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:italic; font-weight:200 800; font-display:swap; src:url('fonts/AHMono-italic-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:italic; font-weight:200 800; font-display:swap; src:url('fonts/AHMono-italic-lat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:normal; font-weight:200 800; font-display:swap; src:url('fonts/AHMono-normal-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Atkinson Hyperlegible Mono'; font-style:normal; font-weight:200 800; font-display:swap; src:url('fonts/AHMono-normal-lat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:italic; font-weight:200 800; font-display:swap; src:url('fonts/AHNext-italic-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:italic; font-weight:200 800; font-display:swap; src:url('fonts/AHNext-italic-lat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:200 800; font-display:swap; src:url('fonts/AHNext-normal-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:200 800; font-display:swap; src:url('fonts/AHNext-normal-lat.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --verde:#41e6aa; --verde-scuro:#26c78c; --viola:#ac72fe; --viola-forte:#8100f4;
  --giallo:#f2b705; --giallo-ink:#7a5a00; --rosa:#FF3769; --rosa-ink:#b8123f;
  --bg:#ffffff; --panel:#ffffff; --card:#f1f4f8; --ink:#404040; --muted:#5b6069;
  --line:#d9dee5; --line-weak:#e9edf2; --hover:#f1f4f8;
  --err:#ef4444; --err-ink:#b91c1c;
  --sh:0 8px 24px rgba(64,64,64,.16);
  --emoji-font:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji';
  --font-text:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',"Helvetica Neue",Helvetica,Arial;
  --font-mono:'Atkinson Hyperlegible Mono',ui-monospace,"SF Mono",Menlo,monospace;
  --fs:18px; --lh:1.6; --maxw:920px;
  --topbar-h:60px; --side-w:clamp(260px,21vw,320px);
  --speed:.16s;
}
html[data-theme="scuro"]{
  --bg:#14161a; --panel:#1b1e24; --card:#232730; --ink:#eceef2; --muted:#a9afb9;
  --line:#3a4048; --line-weak:#2a2f37; --hover:#232730; --viola-forte:#c9a4ff; --giallo-ink:#ffd966; --rosa-ink:#ff7a9a;
  --sh:0 8px 24px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="chiaro"]){
    --bg:#14161a; --panel:#1b1e24; --card:#232730; --ink:#eceef2; --muted:#a9afb9;
    --line:#3a4048; --line-weak:#2a2f37; --hover:#232730; --viola-forte:#c9a4ff; --giallo-ink:#ffd966; --rosa-ink:#ff7a9a;
    --sh:0 8px 24px rgba(0,0,0,.55);
  }
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px); }
body{ font-weight:400;
  font-family:var(--font-text),var(--emoji-font),sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:var(--fs); line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
select,button,input{ font-family:var(--font-mono),var(--emoji-font),monospace; color:inherit; }
a{ color:var(--viola-forte); text-decoration-thickness:1px; text-underline-offset:2px; }
:focus-visible{ outline:3px solid var(--viola); outline-offset:2px; }
.skip{ position:absolute; left:-999px; top:0; background:var(--viola-forte); color:#fff; padding:.7em 1.1em; z-index:100; font-family:var(--font-mono); font-size:12px; font-weight:700; }
.skip:focus{ left:0; }

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  display:flex; align-items:center; gap:.6rem; padding:0 1rem;
  background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; text-decoration:none; color:var(--ink); font-family:var(--font-mono); }
.brand img{ height:30px; width:auto; }
.brand b{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.brand span{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-weight:700; border-left:1px solid var(--line); padding-left:.7rem; }
.tbtn{
  height:36px; min-width:36px; padding:0 .7rem; border:0; background:var(--card); cursor:pointer; border-radius:999px;
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}
.tbtn:hover{ background:var(--verde); color:#404040; }
.menubtn{ display:none; }

/* ---------- griglia ---------- */
.wrap{ display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); }
.sidebar{
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow:auto;
  border-right:1px solid var(--line); background:var(--bg);
  padding:1.2rem 0 2rem;
}
.sidebar h2{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); padding:0 1rem .6rem; font-weight:700; }
.toc{ list-style:none; counter-reset:c; }
.toc > li{ border-bottom:1px solid var(--line-weak); }
.toc > li > a{
  counter-increment:c; display:flex; gap:.7rem; align-items:flex-start;
  padding:.6rem 1rem .6rem .9rem; text-decoration:none; color:var(--ink); font-size:15px; line-height:1.35;
  border-left:3px solid transparent;
}
.toc > li > a::before{
  content:counter(c); flex:0 0 26px; height:26px; line-height:26px; text-align:center;
  background:var(--verde); color:#404040; font-family:var(--font-mono); font-size:12px; font-weight:700; border-radius:50%;
}
.toc > li > a:hover{ background:var(--hover); }
.toc > li.attivo > a{ border-left-color:var(--viola-forte); background:var(--hover); font-weight:700; }
.toc ul{ list-style:none; padding:0 0 .5rem 3rem; display:none; }
.toc li.attivo ul{ display:block; }
.toc ul a{ display:block; font-size:13px; color:var(--muted); text-decoration:none; padding:.2rem 0; }
.toc ul a:hover, .toc ul li.attivo > a{ color:var(--ink); }
.toc ul li.attivo > a{ font-weight:700; }
.sidebar-foot{ padding:1.4rem 1rem 0; font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }

main{ padding:2rem clamp(1.3rem,4vw,3.4rem) 6rem; }
article{ max-width:var(--maxw); }
.kicker{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.2em; color:var(--muted); font-weight:700; }
h1{ font-family:var(--font-text); font-weight:800; font-size:clamp(30px,4.2vw,44px); line-height:1.08; letter-spacing:-.02em; margin:.3rem 0 1rem; }
h1 em{ font-style:normal; background:linear-gradient(transparent 55%, var(--verde) 55%); }
.lead{ font-weight:350; font-size:1.24rem; line-height:1.5; color:var(--muted); max-width:62ch; }
section.cap{ margin-top:4rem; padding-top:2rem; border-top:1px solid var(--line); }
section.cap > h2{ font-family:var(--font-text); font-weight:800; font-size:1.65rem; line-height:1.15; margin:.2rem 0 1rem; letter-spacing:-.01em; }
section.cap > h2::before{ content:attr(data-n); font-family:var(--font-mono); font-weight:400; display:inline-block; min-width:2.4rem; color:var(--viola-forte); font-size:1.05rem; vertical-align:.25em; margin-right:.2rem; }
h3{ font-family:var(--font-text); font-weight:750; font-size:1.28rem; margin:2.2rem 0 .7rem; line-height:1.3; }
h4{ font-family:var(--font-mono); font-weight:700; margin:1.6rem 0 .5rem; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--muted); }
p{ margin:.75rem 0; }
ul, ol{ margin:.7rem 0 .7rem 1.4rem; }
li{ margin:.3rem 0; }
li::marker{ color:var(--viola-forte); font-weight:700; }
code, kbd{ font-family:var(--font-mono); font-weight:500; font-size:.9em; }
code{ background:var(--card); padding:.05em .4em; border-radius:4px; }
kbd{ display:inline-block; min-width:1.6em; text-align:center; padding:.1em .45em; border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; background:var(--panel); font-size:.82em; line-height:1.4; }
strong{ font-weight:700; }
hr{ border:0; border-top:1px solid var(--line-weak); margin:2rem 0; }
/* etichette vere a schermo: fra «…», e in Space Mono come nell'app */
.et{ font-family:var(--font-mono); font-size:.88em; font-weight:700; white-space:nowrap; }

/* «passi» numerati */
ol.passi{ list-style:none; margin-left:0; counter-reset:p; }
ol.passi > li{ position:relative; padding:.65rem 0 .65rem 2.9rem; border-bottom:1px solid var(--line-weak); counter-increment:p; }
ol.passi > li::before{ content:counter(p); position:absolute; left:0; top:.6rem; width:2rem; height:2rem; line-height:2rem; text-align:center; background:var(--verde); color:#404040; font-family:var(--font-mono); font-weight:700; font-size:14px; border-radius:50%; }
ol.passi > li:last-child{ border-bottom:0; }

/* callout */
.callout{ margin:1.2rem 0; padding:.95rem 1.15rem; border-left:4px solid var(--verde); background:var(--card); border-radius:0 10px 10px 0; }
.callout .ch{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--ink); margin-bottom:.2rem; }
.callout p:first-of-type{ margin-top:.2rem; }
.callout p:last-child{ margin-bottom:0; }
.callout.attenzione{ border-left-color:var(--giallo); }
.callout.attenzione .ch{ color:var(--giallo-ink); }
.callout.perche{ border-left-color:var(--viola); }
.callout.perche .ch{ color:var(--viola-forte); }
.callout.no{ border-left-color:var(--rosa); }
.callout.no .ch{ color:var(--rosa-ink); }
.callout.domani{ border-left-color:var(--viola-forte); background:color-mix(in srgb, var(--viola) 12%, var(--panel)); }
.callout.domani .ch{ color:var(--viola-forte); }

/* figure e lightbox */
figure{ margin:1.3rem 0 1.7rem; }
figure img{ max-width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:10px; background:var(--panel); cursor:zoom-in; transition:box-shadow var(--speed); }
figure img:hover{ box-shadow:var(--sh); }
figure.stretta img{ max-width:min(100%, 520px); }
figure.media img{ max-width:min(100%, 720px); }
figure.telefono img{ max-width:min(100%, 300px); }
figcaption{ font-family:var(--font-text); font-style:italic; font-weight:350; font-size:15px; color:var(--muted); margin-top:.55rem; line-height:1.45; }
figcaption b{ font-style:normal; font-weight:700; }
figcaption b{ color:var(--ink); }
.griglia2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1rem; align-items:start; }
.griglia2 figure{ margin:.6rem 0; }

/* legende numerate (i numeri gialli degli screenshot) */
ol.legenda{ list-style:none; margin-left:0; columns:2; column-gap:2rem; }
ol.legenda li{ break-inside:avoid; padding-left:2.1rem; position:relative; margin:.4rem 0; font-size:15.5px; }
ol.legenda li::before{ content:attr(data-n); position:absolute; left:0; top:.1rem; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; background:var(--giallo); color:#111; font-family:var(--font-mono); font-weight:700; font-size:12px; border-radius:50%; box-shadow:0 0 0 2px #fff; }
@media (max-width:760px){ ol.legenda{ columns:1; } }

/* tabelle */
.tabwrap{ overflow-x:auto; margin:1rem 0; border:1px solid var(--line); border-radius:10px; }
table{ border-collapse:collapse; width:100%; font-size:15px; min-width:560px; }
th, td{ text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--line-weak); vertical-align:top; }
th{ font-family:var(--font-mono); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); background:var(--card); }
tr:last-child td{ border-bottom:0; }

/* albero su disco */
pre.albero{ font-weight:400; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.9rem 1.1rem; font-family:var(--font-mono); font-size:13.5px; line-height:1.5; overflow-x:auto; }
pre.albero i{ color:var(--muted); font-style:normal; }
pre.albero b{ color:var(--viola-forte); }

/* chip «dove» */
.dove{ display:inline-block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; padding:.15em .55em; border-radius:999px; background:var(--card); color:var(--ink); }
.dove.v{ background:var(--verde); color:#404040; }

/* la striscia «sperimentale» dell'appendice */
.striscia{ margin:1rem 0 1.5rem; padding:.8rem 1rem; border:2px dashed var(--rosa); border-radius:10px; font-family:var(--font-mono); font-size:13px; color:var(--rosa-ink); font-weight:700; }

/* lightbox */
#lb{ position:fixed; inset:0; z-index:100; background:rgba(20,22,26,.88); display:none; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
#lb.aperto{ display:flex; }
#lb img{ max-width:96vw; max-height:88vh; box-shadow:0 10px 40px rgba(0,0,0,.6); background:#fff; cursor:default; border-radius:6px; }
#lb figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.8rem 1.4rem; color:#fff; font-size:14px; background:linear-gradient(transparent, rgba(0,0,0,.6)); text-align:center; }
#lb .lbx, #lb .lbp, #lb .lbn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14); color:#fff; border:0; width:44px; height:44px; font-size:22px; cursor:pointer; border-radius:50%; }
#lb .lbx{ top:1rem; right:1rem; transform:none; }
#lb .lbp{ left:1rem; } #lb .lbn{ right:1rem; }
#lb .lbx:hover, #lb .lbp:hover, #lb .lbn:hover{ background:rgba(255,255,255,.3); }

/* footer */
footer{ margin-top:5rem; padding-top:1.4rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:12px; color:var(--muted); }
footer a{ color:inherit; }

/* mobile */
@media (max-width:900px){
  .wrap{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:var(--topbar-h); width:min(86vw,340px); z-index:45; transform:translateX(-102%); transition:transform var(--speed); border-right:1px solid var(--line); box-shadow:none; }
  html[data-nav="open"] .sidebar{ transform:none; box-shadow:var(--sh); }
  .menubtn{ display:inline-flex; }
  main{ padding:1.4rem 1rem 4rem; }
}
@media print{
  .topbar, .sidebar, #lb{ display:none !important; }
  .wrap{ display:block; }
  figure img{ cursor:default; }
}