/* =========================================================
   Psicologia Generale — guida allo studio
   Direzione visiva: il taccuino di laboratorio psicofisico.
   Carta millimetrata, inchiostro, una sola tinta di segnale.
   Il tema chiaro/scuro è "figura / sfondo": un dispositivo
   gestaltico, non una decorazione.
   ========================================================= */

:root {
  --carta:      #EDEFEA;
  --carta-alta: #F6F7F3;
  --inchiostro: #161B22;
  --grafite:    #5C6672;
  --linea:      #D6DAD2;
  --linea-fine: #E3E6DF;
  --accento:    #1B5E5A;
  --accento-tenue: #1B5E5A18;
  --segnale:    #A63D2A;
  --ambra:      #B7791F;
  --al-c0: #1B5E5A; --al-c1: #2F5FA8; --al-c2: #6B4FA3; --al-c3: #A65E2A;
  --griglia:    #1B5E5A0D;
  --ombra:      0 1px 2px #161B2208, 0 8px 24px #161B220A;

  --display: "Newsreader", Georgia, serif;
  --testo:   "IBM Plex Sans", system-ui, sans-serif;
  --dati:    "IBM Plex Mono", ui-monospace, monospace;

  --barra-w: 250px;
  --testata-h: 60px;
}

html[data-tema="sfondo"] {
  --carta:      #12161C;
  --carta-alta: #191F27;
  --inchiostro: #E4E7E1;
  --grafite:    #98A2AE;
  --linea:      #2A323C;
  --linea-fine: #222932;
  --accento:    #5CBFB2;
  --accento-tenue: #5CBFB21F;
  --segnale:    #E4785F;
  --ambra:      #E0A84A;
  --al-c0: #5CBFB2; --al-c1: #86B3F0; --al-c2: #BBA3E6; --al-c3: #E9A272;
  --griglia:    #5CBFB20D;
  --ombra:      0 1px 2px #0006, 0 8px 24px #0004;
}

* { box-sizing: border-box; }

/* l'attributo hidden deve vincere su qualsiasi display dichiarato dopo */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.65;
  color: var(--inchiostro);
  background-color: var(--carta);
  background-image:
    linear-gradient(var(--griglia) 1px, transparent 1px),
    linear-gradient(90deg, var(--griglia) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accento); color: #fff; padding: .6rem 1rem;
}
.salta:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* ---------- TESTATA ---------- */
.testata {
  position: sticky; top: 0; z-index: 40;
  height: var(--testata-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--carta) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}

.marchio { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.marchio-sigla {
  font-family: var(--dati); font-size: .7rem; letter-spacing: .12em;
  border: 1px solid var(--accento); color: var(--accento);
  padding: .25rem .45rem; border-radius: 2px;
}
.marchio-nome { font-family: var(--display); font-size: 1.05rem; font-weight: 600; line-height: 1.15; }
.marchio-nome em {
  display: block; font-family: var(--dati); font-style: normal;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--grafite); font-weight: 400;
}

.testata-azioni { display: flex; align-items: center; gap: .5rem; }

.cerca-btn, .tema-btn, .menu-btn {
  font-family: var(--dati); font-size: .72rem;
  background: transparent; color: var(--grafite);
  border: 1px solid var(--linea); border-radius: 3px;
  padding: .42rem .6rem; cursor: pointer;
  display: flex; align-items: center; gap: .45rem;
  transition: border-color .15s, color .15s;
}
.cerca-btn:hover, .tema-btn:hover, .menu-btn:hover { border-color: var(--accento); color: var(--accento); }
.cerca-btn kbd {
  font-family: var(--dati); font-size: .65rem; border: 1px solid var(--linea);
  border-radius: 2px; padding: 0 .25rem; color: var(--grafite);
}
.menu-btn { display: none; font-size: 1rem; padding: .3rem .55rem; }

/* la pastiglia figura/sfondo: metà piena, metà vuota */
.tema-glifo {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--accento);
  background: linear-gradient(90deg, var(--accento) 50%, transparent 50%);
}
.tema-testo { text-transform: uppercase; letter-spacing: .1em; }

/* ---------- IMPIANTO ---------- */
.impianto { display: flex; align-items: flex-start; }

.barra {
  position: sticky; top: var(--testata-h);
  width: var(--barra-w); flex: 0 0 var(--barra-w);
  height: calc(100vh - var(--testata-h));
  overflow-y: auto;
  padding: 1.6rem 1rem 2rem 1.25rem;
  border-right: 1px solid var(--linea);
}
.barra-gruppo { margin-bottom: 1.5rem; }
.barra-titolo {
  font-family: var(--dati); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grafite);
  margin: 0 0 .5rem; padding-left: .55rem;
}
.barra a {
  display: block; text-decoration: none; font-size: .875rem;
  padding: .34rem .55rem; border-radius: 3px;
  border-left: 2px solid transparent; color: var(--inchiostro);
  transition: background .15s, border-color .15s, color .15s;
}
.barra a:hover { background: var(--accento-tenue); }
.barra a.attivo { border-left-color: var(--accento); color: var(--accento); font-weight: 500; background: var(--accento-tenue); }
.barra-piede {
  font-family: var(--dati); font-size: .66rem; color: var(--grafite);
  border-top: 1px solid var(--linea-fine); padding-top: .8rem; margin: 2rem 0 0;
}

main { flex: 1 1 auto; min-width: 0; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 6rem; max-width: 1080px; }
main:focus { outline: none; }

/* ---------- TIPOGRAFIA ---------- */
.occhiello {
  font-family: var(--dati); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accento); margin: 0 0 .6rem;
}
h1 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; line-height: 1.1; margin: 0 0 .5rem; letter-spacing: -.01em; }
h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; margin: 2.6rem 0 .9rem; letter-spacing: -.005em; }
h3 { font-family: var(--testo); font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.sommario { font-size: 1.06rem; color: var(--grafite); max-width: 62ch; margin: 0 0 2rem; }
p { max-width: 68ch; }

/* ---------- COMPONENTI ---------- */
.scheda {
  background: var(--carta-alta); border: 1px solid var(--linea);
  border-radius: 4px; padding: 1.3rem 1.4rem; box-shadow: var(--ombra);
}

.griglia { display: grid; gap: 1rem; }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.dato { border-top: 2px solid var(--accento); padding-top: .7rem; }
.dato-cifra { font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1; display: block; }
.dato-eti { font-family: var(--dati); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grafite); }

/* i sette passaggi: la numerazione è una sequenza reale, quindi è informazione */
.passo { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea-fine); }
.passo-n { font-family: var(--dati); font-size: .8rem; color: var(--accento); padding-top: .15rem; }
.passo h3 { margin: 0 0 .35rem; }
.passo p { margin: 0; }
.passo.formula .passo-corpo { border-left: 2px solid var(--accento); padding-left: .9rem; }

.avviso {
  border-left: 2px solid var(--segnale); background: color-mix(in srgb, var(--segnale) 6%, transparent);
  padding: .7rem .9rem; margin: .8rem 0; font-size: .9rem;
}
.avviso strong { color: var(--segnale); }

.nota { border-left: 2px solid var(--linea); padding-left: .9rem; color: var(--grafite); font-size: .92rem; }

/* ---------- L'ASSE: la linea del tempo delle scuole ---------- */
.asse { position: relative; margin: 2rem 0 0; padding-left: 5.5rem; }
.asse::before {
  content: ""; position: absolute; left: 4.2rem; top: .6rem; bottom: 2rem;
  width: 1px; background: var(--linea);
}
.nodo { position: relative; margin-bottom: 1rem; }
.nodo-anno {
  position: absolute; left: -5.5rem; top: .95rem; width: 4rem; text-align: right;
  font-family: var(--dati); font-size: .68rem; color: var(--grafite); line-height: 1.3;
}
.nodo::before {
  content: ""; position: absolute; left: -1.36rem; top: 1.25rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--carta); border: 1px solid var(--grafite);
}
.nodo.cardine::before { background: var(--accento); border-color: var(--accento); width: 11px; height: 11px; left: -1.55rem; top: 1.1rem; }
.nodo.svolta::before  { background: var(--carta); border-color: var(--accento); border-width: 2px; }
.nodo.futura { opacity: .55; }

.nodo-testa {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 4px;
  padding: .85rem 1.1rem; font: inherit; color: inherit;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  transition: border-color .15s, transform .15s;
}
.nodo-testa:hover { border-color: var(--accento); }
.nodo.aperto .nodo-testa { border-color: var(--accento); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nodo-nome { font-family: var(--display); font-size: 1.15rem; font-weight: 600; }
.nodo-luogo { font-family: var(--dati); font-size: .68rem; color: var(--grafite); margin-left: auto; }
.tag {
  font-family: var(--dati); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--linea); border-radius: 2px; padding: .1rem .35rem; color: var(--grafite);
}
.tag.acc { border-color: var(--accento); color: var(--accento); }

.nodo-corpo {
  border: 1px solid var(--accento); border-top: none;
  border-radius: 0 0 4px 4px; padding: 1.2rem 1.1rem; background: var(--carta-alta);
}
.terna { display: grid; gap: .9rem; margin-bottom: 1.2rem; }
.terna-voce { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: start; }
.terna-eti {
  font-family: var(--dati); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accento); padding-top: .2rem;
}
.terna-voce p { margin: 0; }

.rel { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.rel span {
  font-size: .78rem; border: 1px solid var(--linea-fine); background: var(--carta);
  border-radius: 3px; padding: .2rem .5rem;
}
.rel span b { font-weight: 500; }

/* ---------- TABELLE ---------- */
.tab-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
.tab-scroll table { margin: 0; min-width: 460px; }
.mappa svg { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--linea-fine); vertical-align: top; }
th { font-family: var(--dati); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite); border-bottom-color: var(--linea); }

/* ---------- LEZIONI ---------- */
.lez-riga {
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1rem; align-items: center;
  padding: .85rem .9rem; border: 1px solid var(--linea-fine); border-radius: 4px;
  margin-bottom: .5rem; text-decoration: none; background: var(--carta-alta);
  transition: border-color .15s;
}
.lez-riga:hover { border-color: var(--accento); }
.lez-id { font-family: var(--dati); font-size: .78rem; color: var(--accento); }
.lez-tit { font-weight: 500; }
.lez-sot { font-size: .82rem; color: var(--grafite); }
.lez-riga[data-stato="attesa"] { opacity: .6; }

.schede-nav { display: flex; gap: .3rem; border-bottom: 1px solid var(--linea); margin: 1.5rem 0 1.5rem; flex-wrap: wrap; }
.schede-nav button {
  font: inherit; font-size: .86rem; background: none; border: none; cursor: pointer;
  padding: .55rem .9rem; color: var(--grafite); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.schede-nav button.attivo { color: var(--accento); border-bottom-color: var(--accento); font-weight: 500; }

.prosa { max-width: 72ch; }
.prosa h1 { font-size: 1.8rem; margin-top: 0; }
.prosa h2 { font-size: 1.3rem; }
.prosa h3 { font-size: 1rem; color: var(--accento); }
.prosa blockquote { border-left: 2px solid var(--accento); margin: 1rem 0; padding: .2rem 0 .2rem 1rem; color: var(--grafite); }
.prosa code { font-family: var(--dati); font-size: .85em; background: var(--accento-tenue); padding: .1rem .3rem; border-radius: 2px; }
.prosa pre { background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 4px; padding: 1rem; overflow-x: auto; }
.prosa pre code { background: none; padding: 0; }
.prosa hr { border: none; border-top: 1px solid var(--linea); margin: 2rem 0; }
.prosa table { font-size: .86rem; }

.mappa { background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 4px; padding: 1rem; overflow-x: auto; }

/* ---------- ESAME ---------- */
.timer {
  font-family: var(--dati); font-size: 1.5rem; color: var(--accento);
  border: 1px solid var(--linea); border-radius: 4px; padding: .4rem .8rem;
}
.timer.allarme { color: var(--segnale); border-color: var(--segnale); }

.domanda { border: 1px solid var(--linea); border-radius: 4px; padding: 1.2rem; margin-bottom: 1.2rem; background: var(--carta-alta); }
.domanda-eti { font-family: var(--dati); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accento); margin-bottom: .5rem; }
.domanda-testo { font-family: var(--display); font-size: 1.08rem; line-height: 1.5; margin-bottom: 1rem; }
textarea {
  width: 100%; min-height: 200px; resize: vertical;
  font-family: var(--testo); font-size: .95rem; line-height: 1.6;
  color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--linea); border-radius: 3px; padding: .8rem;
}
.conta { font-family: var(--dati); font-size: .68rem; color: var(--grafite); text-align: right; margin-top: .3rem; }

.bottone {
  font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
  background: var(--accento); color: var(--carta);
  border: 1px solid var(--accento); border-radius: 3px; padding: .6rem 1.1rem;
}
.bottone:hover { filter: brightness(1.12); }
.bottone.vuoto { background: transparent; color: var(--accento); }
.bottone:disabled { opacity: .45; cursor: not-allowed; }
.azioni { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0; }

.attesi { margin-top: 1rem; font-size: .88rem; }
.attesi summary { cursor: pointer; font-family: var(--dati); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafite); }
.attesi ul { margin: .7rem 0 0; padding-left: 1.1rem; color: var(--grafite); }

/* ---------- STATISTICHE ---------- */
.grafico { width: 100%; height: 220px; }
.grafico .linea { fill: none; stroke: var(--accento); stroke-width: 2; }
.grafico .punto { fill: var(--accento); }
.grafico .assi { stroke: var(--linea); stroke-width: 1; }
.grafico .etichetta { font-family: var(--dati); font-size: 10px; fill: var(--grafite); }
.grafico .soglia { stroke: var(--segnale); stroke-dasharray: 3 3; stroke-width: 1; }

.barra-voto { height: 6px; background: var(--linea-fine); border-radius: 3px; overflow: hidden; }
.barra-voto i { display: block; height: 100%; background: var(--accento); }

/* ---------- CERCA ---------- */
.cerca-velo { position: fixed; inset: 0; z-index: 60; background: #0009; display: flex; justify-content: center; padding-top: 12vh; }
.cerca-pannello { width: min(620px, 92vw); background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 5px; box-shadow: 0 20px 60px #0004; height: fit-content; max-height: 70vh; display: flex; flex-direction: column; }
#cercaInput { font: inherit; font-size: 1rem; padding: 1rem 1.1rem; border: none; border-bottom: 1px solid var(--linea); background: transparent; color: var(--inchiostro); }
#cercaInput:focus { outline: none; }
.cerca-esiti { overflow-y: auto; padding: .5rem; }
.cerca-esiti a { display: block; padding: .55rem .7rem; text-decoration: none; border-radius: 3px; font-size: .9rem; }
.cerca-esiti a:hover, .cerca-esiti a.sel { background: var(--accento-tenue); }
.cerca-esiti .ct { font-family: var(--dati); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accento); display: block; }
.cerca-vuoto { padding: 1.2rem; color: var(--grafite); font-size: .9rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .menu-btn { display: flex; }
  .marchio-nome { font-size: .95rem; }
  .barra {
    position: fixed; top: var(--testata-h); left: 0; z-index: 35;
    height: calc(100vh - var(--testata-h)); background: var(--carta-alta);
    transform: translateX(-100%); transition: transform .2s;
  }
  .barra.aperta { transform: translateX(0); }
  main { padding: 1.75rem 1.15rem 5rem; }
  .asse { padding-left: 0; }
  .asse::before { display: none; }
  .nodo::before, .nodo.cardine::before { display: none; }
  .nodo-anno { position: static; text-align: left; width: auto; margin-bottom: .3rem; }
  .terna-voce { grid-template-columns: 1fr; gap: .2rem; }
  .cerca-btn kbd { display: none; }
  .tema-testo { display: none; }

  /* la testata si accorcia per lasciare spazio al contenuto */
  :root { --testata-h: 54px; }
  .testata { padding: 0 .85rem; gap: .6rem; }
  .marchio-nome em { display: none; }

  /* le righe delle lezioni impilano il tag sotto al titolo */
  .lez-riga { grid-template-columns: 2.8rem 1fr; row-gap: .35rem; }
  .lez-riga .tag { grid-column: 2; justify-self: start; }

  /* i sette passaggi: numero sopra, testo sotto */
  .passo { grid-template-columns: 1fr; gap: .25rem; }
  .passo-n { padding-top: 0; }

  /* esame: campo più corto, azioni a piena larghezza */
  textarea { min-height: 150px; font-size: 16px; } /* 16px evita lo zoom automatico su iOS */
  .domanda { padding: 1rem .9rem; }
  .domanda-testo { font-size: 1rem; }
  .azioni .bottone { flex: 1 1 auto; text-align: center; }
  .timer { font-size: 1.25rem; }

  /* statistiche: la barra del voto resta leggibile */
  .barra-voto { min-width: 60px; }

  /* la ricerca occupa quasi tutto lo schermo */
  .cerca-velo { padding-top: 0; }
  .cerca-pannello { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }

  h2 { margin-top: 2rem; }
  .griglia { gap: .75rem; }
}

@media (max-width: 480px) {
  main { padding: 1.4rem .9rem 4rem; }
  h1 { font-size: 1.65rem; }
  .sommario { font-size: 1rem; }
  .nodo-testa { padding: .75rem .85rem; }
  .nodo-luogo { margin-left: 0; flex-basis: 100%; }
  .dato-cifra { font-size: 1.75rem; }
  .schede-nav button { padding: .5rem .6rem; font-size: .8rem; }
}

/* schermi larghi: il contenuto non si allarga all'infinito */
@media (min-width: 1500px) { main { margin: 0 auto; } }

/* =========================================================
   MANUALE E STRUMENTI DI ALLENAMENTO
   ========================================================= */

/* --- barra di avanzamento --- */
.avanz { margin: 1.4rem 0 2rem; }
.avanz-testa { display:flex; justify-content:space-between; font-family:var(--dati); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grafite); margin-bottom:.45rem; }
.avanz-vasca { height:6px; background:var(--linea-fine); border-radius:3px; overflow:hidden; }
.avanz-vasca.sottile { height:3px; margin:.2rem 0 1.2rem; }
.avanz-vasca i { display:block; height:100%; background:var(--accento); transition:width .3s ease; }

.mini-btn { background:none; border:none; padding:0; font:inherit; font-size:.86rem;
  color:var(--accento); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.mini-btn:hover { color:var(--segnale); }

/* --- pannello di avvio degli esercizi --- */
.pannello-avvio { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  padding:1.1rem 1.2rem; background:var(--carta-alta); border:1px solid var(--linea);
  border-radius:3px; margin:1.4rem 0; }
.pannello-avvio label { display:flex; flex-direction:column; gap:.35rem; font-family:var(--dati);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grafite); }
.pannello-avvio select { font-family:var(--testo); font-size:.92rem; color:var(--inchiostro);
  background:var(--carta); border:1px solid var(--linea); border-radius:3px; padding:.5rem .6rem;
  min-width:15rem; text-transform:none; letter-spacing:0; }
.pannello-avvio .bottone { margin-left:auto; }

/* --- indice dei capitoli --- */
.cap-elenco { margin-bottom:2rem; }
.cap-riga { display:grid; grid-template-columns:2.6rem 1fr auto; gap:1rem; align-items:start;
  padding:1rem .8rem; border-bottom:1px solid var(--linea-fine); text-decoration:none;
  color:inherit; transition:background .15s; }
.cap-riga:hover { background:var(--accento-tenue); }
.cap-riga.letto .cap-n::after { content:"✓"; display:block; font-size:.75rem; color:var(--accento); }
.cap-n { font-family:var(--display); font-size:1.5rem; color:var(--accento); line-height:1; padding-top:.1rem; }
.cap-corpo { display:block; min-width:0; }
.cap-tit { display:block; font-family:var(--display); font-size:1.12rem; font-weight:500; margin-bottom:.2rem; }
.cap-som { display:block; font-size:.88rem; color:var(--grafite); margin-bottom:.4rem; }
.cap-tag { display:flex; flex-wrap:wrap; gap:.3rem; }
.cap-tag em { font-family:var(--dati); font-style:normal; font-size:.66rem; color:var(--grafite);
  background:var(--carta-alta); border:1px solid var(--linea-fine); border-radius:2px; padding:.12rem .4rem; }
.cap-meta { font-family:var(--dati); font-size:.72rem; color:var(--grafite); text-align:right; white-space:nowrap; }
.cap-lez { color:var(--accento); }

/* --- lettura del capitolo --- */
.cap-testata { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  border-bottom:1px solid var(--linea); padding-bottom:1.1rem; margin-bottom:1.6rem; }
.cap-testata-meta { font-family:var(--dati); font-size:.72rem; color:var(--grafite); white-space:nowrap; padding-top:.6rem; }
.cap-impianto { display:grid; grid-template-columns:1fr 15rem; gap:2.5rem; align-items:start; }
.cap-impianto .prosa { grid-column:1; grid-row:1; min-width:0; }
.cap-indice { grid-column:2; grid-row:1; position:sticky; top:calc(var(--testata-h) + 1rem);
  max-height:calc(100vh - var(--testata-h) - 3rem); overflow-y:auto;
  border-left:1px solid var(--linea-fine); padding-left:1rem; }
.cap-indice-tit { font-family:var(--dati); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafite); margin:0 0 .7rem; }
.cap-indice a { display:block; font-size:.82rem; line-height:1.35; color:var(--grafite);
  text-decoration:none; padding:.3rem 0; border-left:2px solid transparent; padding-left:.6rem; margin-left:-.6rem; }
.cap-indice a:hover { color:var(--inchiostro); }
.cap-indice a.qui { color:var(--accento); border-left-color:var(--accento); }
.cap-indice a.liv-h3 { padding-left:1.4rem; font-size:.78rem; }
.cap-piede { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--linea); }
.cap-salti { display:flex; gap:.6rem; flex-wrap:wrap; }

/* --- esiti --- */
.esito { text-align:center; }
.esito-cifra { font-family:var(--display); font-size:3.2rem; line-height:1; color:var(--accento); margin:.6rem 0; }
.esito-cifra span { font-size:1.4rem; color:var(--grafite); }
.esito h3 { text-align:left; }
.esito .tab-scroll, .esito .qz-riepilogo { text-align:left; }
.barra-voto.grande { height:8px; max-width:22rem; margin:.6rem auto 1rem; }

/* --- allenamento sui nomi --- */
.nome-scheda { padding:1.6rem; }
.nome-testa { display:flex; justify-content:space-between; font-family:var(--dati); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grafite); margin-bottom:1rem; }
.nome-indizio { font-family:var(--display); font-size:1.28rem; line-height:1.45; margin:0 0 .9rem; }
.nome-rel { margin-bottom:1.2rem; }
#nomeForm { display:flex; gap:.6rem; flex-wrap:wrap; }
#nomeInput { flex:1; min-width:12rem; font-family:var(--display); font-size:1.3rem;
  color:var(--inchiostro); background:var(--carta); border:1px solid var(--linea);
  border-bottom:2px solid var(--accento); border-radius:3px; padding:.6rem .8rem; }
#nomeInput:focus { outline:none; border-color:var(--accento); background:var(--carta-alta); }
#nomeInput:disabled { opacity:.6; }
.nome-aiuto { font-family:var(--dati); font-size:1.1rem; letter-spacing:.25em; color:var(--accento);
  margin-top:1rem; padding:.7rem .9rem; background:var(--accento-tenue); border-radius:3px; }
.nome-esito { margin-top:1.2rem; padding:.9rem 1rem; border-radius:3px; border-left:3px solid; font-size:.95rem; }
.nome-esito.si { background:var(--accento-tenue); border-color:var(--accento); }
.nome-esito.quasi { background:var(--accento-tenue); border-color:var(--grafite); }
.nome-esito.no { background:var(--carta-alta); border-color:var(--segnale); }
.nome-nota { margin-top:.5rem; font-size:.88rem; color:var(--grafite); }
.nome-diff { margin:.9rem 0 .2rem; }
.diff-riga { display:flex; align-items:baseline; gap:.7rem; margin-bottom:.15rem; }
.diff-eti { flex:0 0 5.2rem; font-family:var(--dati); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafite); text-align:right; }
.diff-cel { font-family:var(--dati); font-size:1.3rem; letter-spacing:.1em; white-space:nowrap;
  overflow-x:auto; padding-bottom:.1rem; }
.diff-cel .ok    { color:var(--inchiostro); }
.diff-cel .ex    { color:var(--segnale); text-decoration:line-through; }
.diff-cel .man   { color:var(--accento); background:var(--accento-tenue); border-radius:2px; }
.diff-cel .nulla { color:var(--linea); }
.diff-leg { font-family:var(--dati); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grafite); margin:.5rem 0 0 5.9rem; }
.diff-leg span { margin-right:.9rem; }
.diff-leg .ex  { color:var(--segnale); }
.diff-leg .man { color:var(--accento); }

/* --- flashcard --- */
.fc-guscio { margin:1.4rem 0; }
.fc-testa { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center;
  font-family:var(--dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grafite); margin-bottom:.7rem; }
.fc-eti a { color:var(--accento); }
.fc-liv { padding:.15rem .5rem; border-radius:2px; border:1px solid var(--linea); }
.fc-liv.liv1 { border-color:var(--accento); color:var(--accento); }
.fc-liv.liv2 { background:var(--accento); color:var(--carta); border-color:var(--accento); }
.fc-carta { position:relative; min-height:15rem; display:grid; cursor:pointer;
  background:var(--carta-alta); border:1px solid var(--linea); border-radius:4px; box-shadow:var(--ombra); }
.fc-carta:hover { border-color:var(--accento); }
.fc-faccia { grid-area:1/1; display:flex; flex-direction:column; justify-content:center;
  padding:2.2rem 2rem; font-size:1.12rem; line-height:1.55; }
.fc-fronte { font-family:var(--display); font-size:1.45rem; }
.fc-retro { display:none; }
.fc-carta.girata { cursor:default; }
.fc-carta.girata .fc-fronte { display:none; }
.fc-carta.girata .fc-retro { display:flex; }
.fc-tipo { position:absolute; top:.8rem; left:2rem; font-family:var(--dati); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grafite); }
.fc-carta.girata { background:var(--carta); border-left:3px solid var(--accento); }
.fc-azioni { justify-content:center; margin-top:1rem; }

/* --- quiz --- */
.qz-scheda { padding:1.5rem; }
.qz-testa { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between;
  font-family:var(--dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grafite); margin-bottom:.5rem; }
.qz-eti a { color:var(--accento); }
.qz-domanda { font-family:var(--display); font-size:1.2rem; line-height:1.5; margin:0 0 1.2rem; }
.qz-opzioni { display:flex; flex-direction:column; gap:.55rem; }
.qz-opz { display:grid; grid-template-columns:1.9rem 1fr; gap:.6rem; align-items:start; text-align:left;
  font:inherit; font-size:.95rem; line-height:1.45; color:var(--inchiostro); background:var(--carta);
  border:1px solid var(--linea); border-radius:3px; padding:.75rem .9rem; cursor:pointer; transition:.14s; }
.qz-opz:hover:not(:disabled) { border-color:var(--accento); background:var(--accento-tenue); }
.qz-opz:disabled { cursor:default; }
.qz-lettera { font-family:var(--dati); font-size:.76rem; color:var(--grafite);
  border:1px solid var(--linea); border-radius:2px; text-align:center; padding:.1rem 0; }
.qz-opz.giusta { border-color:var(--accento); background:var(--accento-tenue); }
.qz-opz.giusta .qz-lettera { background:var(--accento); color:var(--carta); border-color:var(--accento); }
.qz-opz.errata { border-color:var(--segnale); opacity:.75; }
.qz-opz.errata .qz-lettera { background:var(--segnale); color:var(--carta); border-color:var(--segnale); }
.qz-spiega { margin-top:1.2rem; padding:.9rem 1rem; border-radius:3px; border-left:3px solid;
  font-size:.93rem; line-height:1.55; background:var(--carta-alta); }
.qz-spiega.si { border-color:var(--accento); }
.qz-spiega.no { border-color:var(--segnale); }
.qz-riepilogo { margin-top:.8rem; }
.qz-err { padding:.9rem 0; border-bottom:1px solid var(--linea-fine); }
.qz-err-q { font-family:var(--display); font-size:1.02rem; margin:0 0 .35rem; }
.qz-err-r { font-size:.9rem; margin:0 0 .3rem; }
.qz-err-s { font-size:.88rem; color:var(--grafite); margin:0; }

@media (max-width: 900px) {
  .cap-impianto { grid-template-columns:1fr; }
  .cap-indice { display:none; }
}
@media (max-width: 640px) {
  .pannello-avvio { flex-direction:column; align-items:stretch; }
  .pannello-avvio select { min-width:0; width:100%; }
  .pannello-avvio .bottone { margin-left:0; }
  .cap-riga { grid-template-columns:2.2rem 1fr; }
  .cap-meta { grid-column:2; text-align:left; }
  .fc-faccia { padding:1.6rem 1.2rem; }
  .fc-fronte { font-size:1.2rem; }
  .cap-piede { flex-direction:column; align-items:stretch; }
  .cap-salti { flex-direction:column; }
}

/* --- excursus: pietre miliari, fasi, filtri --- */
.pietre { margin:1.6rem 0 2.4rem; }
.pietre-tit { font-family:var(--dati); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafite); margin:0 0 .6rem; }
.pietre-riga { display:flex; gap:.5rem; flex-wrap:wrap; }
.pietra { flex:1 1 8rem; display:flex; flex-direction:column; gap:.15rem; text-decoration:none;
  padding:.7rem .8rem; background:var(--carta-alta); border:1px solid var(--linea);
  border-top:2px solid var(--accento); border-radius:0 0 3px 3px; transition:.15s; }
.pietra:hover { background:var(--accento-tenue); border-top-color:var(--segnale); }
.pietra-a { font-family:var(--dati); font-size:1.05rem; color:var(--accento); }
.pietra-t { font-size:.8rem; color:var(--grafite); line-height:1.3; }

.filtri { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.2rem 0 1.6rem; }
.chip { font-family:var(--dati); font-size:.72rem; letter-spacing:.05em; color:var(--grafite);
  background:var(--carta); border:1px solid var(--linea); border-radius:999px;
  padding:.35rem .8rem; cursor:pointer; transition:.14s; }
.chip:hover { border-color:var(--accento); color:var(--inchiostro); }
.chip.attivo { background:var(--accento); border-color:var(--accento); color:var(--carta); }
.chip.vuoto { margin-left:auto; border-style:dashed; }

.fase { margin-bottom:2.4rem; }
.fase-testa { display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  border-bottom:1px solid var(--linea); padding-bottom:.4rem; margin-bottom:.6rem; }
.fase-testa h3 { margin:0; font-size:1.18rem; }
.fase-arco { font-family:var(--dati); font-size:.72rem; color:var(--accento); margin-left:auto; }
.fase-testo { font-size:.92rem; color:var(--grafite); line-height:1.6; margin:0 0 1.2rem; max-width:60ch; }

/* =========================================================
   ARGOMENTI — le esposizioni orali
   ========================================================= */
.cartella { margin-bottom:2.6rem; }
.cartella-testa { display:flex; align-items:baseline; gap:.8rem;
  border-bottom:1px solid var(--linea); padding-bottom:.4rem; margin-bottom:.4rem; }
.cartella-testa h2 { margin:0; }
.cartella-conta { margin-left:auto; font-family:var(--dati); font-size:.72rem; color:var(--accento); }
.cartella-occhiello { font-size:.9rem; color:var(--grafite); margin:0 0 1rem; max-width:62ch; }

.arg-elenco { display:flex; flex-direction:column; }
.arg-riga { display:grid; grid-template-columns:3rem 1fr auto; gap:1rem; align-items:start;
  padding:1rem .8rem; border-bottom:1px solid var(--linea-fine); text-decoration:none;
  color:inherit; transition:background .15s; }
.arg-riga:hover { background:var(--accento-tenue); }
.arg-riga.letto .arg-durata::after { content:"✓"; display:block; font-size:.75rem; color:var(--accento); margin-top:.15rem; }
.arg-durata { font-family:var(--dati); font-size:1.05rem; color:var(--accento); line-height:1.2; padding-top:.15rem; }
.arg-corpo { display:block; min-width:0; }
.arg-tit { display:block; font-family:var(--display); font-size:1.12rem; font-weight:500; margin-bottom:.25rem; }
.arg-dom { display:block; font-size:.85rem; color:var(--grafite); font-style:italic; line-height:1.45; margin-bottom:.45rem; }
.arg-perni { display:flex; flex-wrap:wrap; gap:.3rem; }
.arg-perni em { font-family:var(--dati); font-style:normal; font-size:.65rem; color:var(--grafite);
  background:var(--carta-alta); border:1px solid var(--linea-fine); border-radius:2px; padding:.12rem .4rem; }
.arg-meta { font-family:var(--dati); font-size:.72rem; color:var(--accento); white-space:nowrap; }

.arg-domanda-testata { font-size:.95rem; color:var(--grafite); font-style:italic;
  line-height:1.5; margin:0; max-width:62ch; }
.arg-barra { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  margin:1.2rem 0 1.8rem; padding-bottom:1rem; border-bottom:1px solid var(--linea-fine); }
.arg-perni-testata { display:flex; flex-wrap:wrap; gap:.3rem; max-width:38rem; }
.arg-perni-testata em { font-family:var(--dati); font-style:normal; font-size:.65rem; color:var(--grafite);
  background:var(--carta-alta); border:1px solid var(--linea-fine); border-radius:2px; padding:.15rem .45rem; }
.arg-comandi { display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; }
.arg-comandi .chip { text-decoration:none; }

/* il discorso: misura comoda, respiro fra i paragrafi */
.prosa.discorso { max-width:64ch; }
.prosa.discorso p { font-size:1.04rem; line-height:1.82; margin:0 0 1.15rem; }
.prosa.discorso.grande p { font-size:1.22rem; line-height:1.85; }
.prosa.discorso.grande { max-width:58ch; }
.prosa.discorso h2 { font-size:1.15rem; margin-top:2.6rem; }
.prosa.discorso hr { margin:2.4rem 0; }
.prosa.discorso blockquote { font-size:.94rem; }
.prosa.discorso li { line-height:1.7; margin-bottom:.3rem; }

.prosa.discorso p.regia { font-size:.92rem; line-height:1.65; color:var(--grafite);
  background:var(--carta-alta); border-left:2px solid var(--accento);
  padding:.7rem .95rem; margin:1.3rem 0 1.5rem; border-radius:0 3px 3px 0; }
.prosa.discorso p.regia em { font-style:normal; }
.prosa.discorso.senza-regia p.regia,
.prosa.discorso.senza-regia p.nota-uso { display:none; }
.prosa.discorso p.nota-uso { font-size:.86rem; color:var(--grafite); border-bottom:1px solid var(--linea-fine);
  padding-bottom:1rem; margin-bottom:1.8rem; }

@media (max-width: 640px) {
  .arg-riga { grid-template-columns:2.6rem 1fr; }
  .arg-meta { grid-column:2; }
  .arg-barra { flex-direction:column; align-items:stretch; }
  .arg-comandi { margin-left:0; }
  .prosa.discorso p { font-size:1rem; line-height:1.75; }
}

/* =========================================================
   SCHEDE — fascicoli schematici a video
   ========================================================= */
.fasc-elenco { display:flex; flex-direction:column; gap:1.6rem; margin:1.6rem 0 2.5rem; }
.fasc { border:1px solid var(--linea); border-top:3px solid var(--accento);
  border-radius:0 0 3px 3px; padding:1.4rem 1.5rem; background:var(--carta-alta); }
.fasc-testa { display:flex; gap:1rem; align-items:baseline; margin-bottom:.7rem; }
.fasc-n { font-family:var(--display); font-size:2rem; line-height:1; color:var(--accento); }
.fasc-testa h2 { margin:0 0 .2rem; font-size:1.35rem; border:none; padding:0; }
.fasc-sot { margin:0; font-family:var(--display); font-style:italic; color:var(--grafite); font-size:1rem; }
.fasc-conta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-family:var(--dati); font-size:.72rem;
  color:var(--grafite); padding:.6rem 0; border-top:1px solid var(--linea-fine);
  border-bottom:1px solid var(--linea-fine); margin-bottom:1rem; }
.fasc-conta b { color:var(--accento); font-weight:500; }
.fasc-indice { list-style:none; margin:0 0 1.2rem; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.25rem .9rem; }
.fasc-indice li { font-size:.88rem; }
.fasc-indice em { font-family:var(--dati); font-style:normal; font-size:.72rem; color:var(--accento); margin-right:.4rem; }

.sk-web { margin:2.5rem 0 3rem; scroll-margin-top:calc(var(--testata-h) + 1rem); }
.sk-web-testa { border-top:3px solid var(--accento); padding-top:.7rem; margin-bottom:1.2rem; }
.sk-web-occhiello { display:flex; justify-content:space-between; font-family:var(--dati);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grafite); margin:0 0 .4rem; }
.sk-web-testa h2 { margin:0 0 .4rem; border:none; padding:0; font-size:1.6rem; }
.sk-web-riga { font-size:.95rem; line-height:1.55; color:var(--grafite); margin:0 0 .7rem; max-width:64ch; }
.sk-web-coord { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-family:var(--dati); font-size:.72rem;
  color:var(--grafite); border-top:1px solid var(--linea-fine); border-bottom:1px solid var(--linea-fine);
  padding:.45rem 0; }
.sk-web-coord b { color:var(--accento); font-weight:500; }
.sk-web-coord a { color:var(--accento); }

.sk-blocco { display:grid; grid-template-columns:9.5rem 1fr; gap:1.2rem;
  padding:.9rem 0; border-bottom:1px solid var(--linea-fine); }
.sk-bl-eti { font-family:var(--dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accento); line-height:1.4; padding-top:.15rem; }
.sk-bl-eti span { display:block; color:var(--grafite); font-size:.62rem; letter-spacing:.04em; }
.sk-bl-corpo > *:first-child { margin-top:0; }
.sk-bl-corpo > *:last-child { margin-bottom:0; }
.sk-bl-corpo p { margin:0 0 .55rem; font-size:.93rem; line-height:1.6; }
.sk-bl-corpo ul, .sk-bl-corpo ol { margin:0 0 .6rem; padding-left:1.2rem; }
.sk-bl-corpo li { font-size:.92rem; line-height:1.55; margin-bottom:.3rem; }
.sk-bl-corpo li::marker { color:var(--accento); }
.sk-bl-corpo table { font-size:.88rem; margin:0 0 .5rem; }
.sk-vuoto { color:var(--linea); font-family:var(--dati); }

.sk-formula { font-family:var(--display); font-size:1.08rem; line-height:1.5;
  border-left:2px solid var(--accento); padding:.15rem 0 .15rem .8rem; margin:0 0 .6rem; }
.sk-glossa { font-size:.88rem !important; color:var(--grafite); }
.sk-voce { padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px dotted var(--linea); }
.sk-voce:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.sk-voce-tit { font-family:var(--display); font-size:1.05rem; font-weight:500; margin:0 0 .25rem !important; }
.sk-voce-meta { font-family:var(--dati); font-size:.7rem; color:var(--grafite); margin:0 0 .35rem !important; }

.sk-esp { background:var(--carta); border-left:2px solid var(--accento); border-radius:0 3px 3px 0;
  padding:.8rem 1rem; margin-bottom:.9rem; }
.sk-esp-testa { margin:0 0 .4rem !important; }
.sk-esp-testa strong { font-family:var(--display); font-size:1.06rem; }
.sk-esp-testa em { font-family:var(--dati); font-style:normal; font-size:.72rem; color:var(--grafite); }
.sk-esp-testa span { font-family:var(--dati); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accento); }
.sk-esp-sub { font-family:var(--dati); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafite); margin:.7rem 0 .3rem !important; }
.sk-esp-nota { font-size:.87rem !important; color:var(--grafite);
  border-top:1px solid var(--linea-fine); padding-top:.5rem; margin-top:.6rem !important; }

.sk-terna { display:grid; gap:.5rem; }
.sk-terna > div { display:grid; grid-template-columns:4.5rem 1fr; gap:.8rem; align-items:baseline; }
.sk-terna span { font-family:var(--dati); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accento); }
.sk-terna > div > div { font-size:.93rem; line-height:1.6; }

.sk-err { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-bottom:.5rem;
  margin-bottom:.5rem; border-bottom:1px dotted var(--linea); }
.sk-err:last-child { border-bottom:none; margin-bottom:0; }
.sk-err .no { color:var(--segnale); font-size:.9rem; line-height:1.5; }
.sk-err .si { font-size:.9rem; line-height:1.5; }
.sk-err .no::before { content:"✗ "; font-family:var(--dati); }
.sk-err .si::before { content:"✓ "; font-family:var(--dati); color:var(--accento); }

.sk-chiusura { margin-top:1.2rem; padding:.9rem 1rem; background:var(--accento-tenue);
  border-left:3px solid var(--accento); border-radius:0 3px 3px 0; font-size:.93rem; line-height:1.65; }

@media (max-width: 700px) {
  .sk-blocco { grid-template-columns:1fr; gap:.4rem; }
  .sk-bl-eti span { display:inline; margin-left:.4rem; }
  .sk-err { grid-template-columns:1fr; gap:.3rem; }
  .sk-terna > div { grid-template-columns:1fr; gap:.15rem; }
  .fasc-indice { grid-template-columns:1fr; }
}


/* ================= ALBERO DI STUDIO ================= */
.al-strumenti { margin: 0 0 1.4rem; }
.al-azioni { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.8rem; }
.al-esito { font-family: var(--dati); font-size:.78rem; color: var(--accento); min-height:1.2em; margin:.5rem 0 0; }
.al-blocco { margin-top:.8rem; }
.al-blocco > summary { cursor:pointer; font-family: var(--dati); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--grafite); }
.al-blocco > summary:hover { color: var(--accento); }
.al-importa { margin-top:.8rem; padding:1rem; border:1px solid var(--linea); border-radius:8px; background: var(--carta-alta); }
.al-importa textarea { width:100%; font-family: var(--dati); font-size:.8rem; min-height:110px; }
.al-check { font-size:.85rem; color: var(--grafite); display:flex; gap:.4rem; align-items:center; }

.al-albero { }
/* ogni livello ha un colore: barra e titolo del ramo, filo dei figli, pallino delle foglie */
details.al-p0 { --c: var(--al-c0); }
details.al-p1 { --c: var(--al-c1); }
details.al-p2 { --c: var(--al-c2); }
details.al-p3 { --c: var(--al-c3); }
details.al-nodo { border-bottom: 1px solid var(--linea-fine); }
details.al-p0 { border: 1px solid var(--linea); border-radius: 10px; margin: 0 0 .8rem; overflow:hidden; background: var(--carta-alta); }
details.al-nodo > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.8rem;
  padding:.7rem .6rem .7rem .7rem; position:relative;
  border-left: 4px solid var(--c);
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
details.al-nodo[open] > summary { background: color-mix(in srgb, var(--c) 14%, transparent); }
details.al-nodo > summary:hover { background: color-mix(in srgb, var(--c) 20%, transparent); }
details.al-p0 > summary { padding: 1rem .8rem; }
details.al-nodo > summary::-webkit-details-marker { display:none; }
details.al-nodo > summary::before {
  content:''; width:.45em; height:.45em; border-right:2px solid var(--c); border-bottom:2px solid var(--c);
  transform: rotate(-45deg); transition: transform .15s; flex:none; margin: 0 .3rem 0 .1rem;
}
details.al-nodo[open] > summary::before { transform: rotate(45deg); }
.al-tit { font-family: var(--display); font-size:1.05rem; flex:1; min-width:0; color: var(--c); }
.al-tit em { font-style:normal; font-family: var(--dati); font-size:.7rem; color: var(--grafite); margin-left:.5rem; }
details.al-p0 > summary .al-tit { font-size:1.4rem; }
details.al-p1 > summary .al-tit { font-size:1.18rem; }
details.al-p3 > summary .al-tit { font-size:1rem; }
.al-meta { font-family: var(--dati); font-size:.68rem; color: var(--grafite); white-space:nowrap; letter-spacing:.02em; }
.al-meta b { color: var(--segnale); font-weight:600; }
.al-figli { padding-left: 1.1rem; margin: .3rem 0 .8rem .9rem; border-left: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
details.al-p0 > .al-figli { margin-left: 1rem; margin-right: .6rem; }
.al-occhiello { font-size:.9rem; color: var(--grafite); margin:.5rem .6rem .4rem 1.2rem; max-width:70ch; }
/* la foglia porta il colore del ramo che la contiene */
.al-foglia { position:relative; }
.al-foglia::before { content:''; position:absolute; left:0; top:1.2rem; width:.5rem; height:.5rem; border-radius:50%; background: var(--c, var(--grafite)); }

.al-voto {
  font-family: var(--dati); font-size:.8rem; font-weight:600; min-width:2.6em; text-align:center;
  padding:.18em .45em; border-radius:999px; flex:none; border:1px solid transparent;
}
.al-voto.al-vuoto { color: var(--grafite); border-color: var(--linea); font-weight:400; }
.al-v-basso { background: color-mix(in srgb, var(--segnale) 16%, transparent); color: var(--segnale); border-color: color-mix(in srgb, var(--segnale) 40%, transparent); }
.al-v-medio { background: color-mix(in srgb, var(--ambra) 18%, transparent); color: var(--ambra); border-color: color-mix(in srgb, var(--ambra) 45%, transparent); }
.al-v-buono { background: var(--accento-tenue); color: var(--accento); border-color: color-mix(in srgb, var(--accento) 40%, transparent); }
.al-v-alto  { background: var(--accento); color: var(--carta-alta); border-color: var(--accento); }
.al-media { opacity:.9; }

.al-foglia { padding:.9rem 0 1rem 1rem; border-bottom:1px solid var(--linea-fine); }
.al-foglia.al-corretta::before { background: var(--accento); }
.al-foglia.al-da-correggere::before { background: var(--ambra); }
.al-foglia:last-child { border-bottom:none; }
.al-foglia-testa { display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; }
.al-domanda { margin:0 0 .55rem; font-size:.95rem; line-height:1.45; }
.al-domanda strong { display:block; font-family: var(--display); font-size:1.05rem; margin-bottom:.15rem; }
.al-domanda span { color: var(--grafite); }
.al-voto-col { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex:none; }
.al-storico { font-family: var(--dati); font-size:.68rem; color: var(--grafite); letter-spacing:.03em; }
.al-foglia textarea { width:100%; min-height:5.5em; resize:vertical; font-size:.95rem; line-height:1.5; }
.al-foglia.al-corretta textarea { border-color: color-mix(in srgb, var(--accento) 35%, var(--linea)); }
.al-foglia.al-da-correggere textarea { border-color: color-mix(in srgb, var(--ambra) 45%, var(--linea)); }
.al-piede { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between; margin-top:.35rem; font-family: var(--dati); font-size:.68rem; color: var(--grafite); letter-spacing:.02em; }
.al-fonte a { color: var(--accento); }
.al-nota { margin:.6rem 0 0; padding:.6rem .8rem; border-left:2px solid var(--accento); background: var(--griglia); font-size:.9rem; line-height:1.5; }
.al-nota span { font-family: var(--dati); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color: var(--accento); margin-right:.5rem; }
.al-albero[data-filtro="deboli"] .al-foglia:not([hidden]) .al-domanda strong { color: var(--segnale); }

@media (max-width: 700px) {
  details.al-nodo > summary { flex-wrap:wrap; }
  .al-meta { white-space:normal; width:100%; order:3; padding-left:1.2rem; }
  .al-figli { padding-left:.6rem; margin-left:.4rem; }
  details.al-p0 > .al-figli { margin-left:.4rem; margin-right:.3rem; }
  .al-occhiello { margin-left:.8rem; }
}

/* ---------- Domande d'esame ---------- */
.es-domanda { border: 1px solid var(--linea); border-radius: 6px; background: var(--carta-alta); margin: 0 0 .8rem; }
.es-domanda > summary { cursor: pointer; padding: .85rem 1rem; display: flex; gap: .8rem; align-items: baseline; font-family: var(--display); font-size: 1.08rem; font-weight: 600; list-style: none; }
.es-domanda > summary::-webkit-details-marker { display: none; }
.es-domanda[open] > summary { border-bottom: 1px solid var(--linea); }
.es-eti { font-family: var(--dati); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accento); border: 1px solid currentColor; border-radius: 3px; padding: .1rem .4rem; white-space: nowrap; }
.es-testo { margin: .9rem 1rem .3rem; font-style: italic; color: var(--grafite); }
.es-risposta { padding: 0 1rem 1rem; }
.es-risposta p { margin: .6rem 0; }

/* ---------- Pills: feed a scorrimento ---------- */
main.pl-piena { padding: 0; max-width: none; display: flex; flex-direction: column; height: calc(100dvh - var(--testata-h)); overflow: hidden; position: relative; }
.pl-barra { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-bottom: 1px solid var(--linea); background: var(--carta-alta); flex: 0 0 auto; overflow-x: auto; }
.pl-barra .filtri { display: flex; gap: .35rem; flex-wrap: nowrap; }
.pl-conto { position: absolute; right: .8rem; bottom: .8rem; z-index: 2; font-family: var(--dati); font-size: .7rem; color: var(--grafite); white-space: nowrap; background: var(--carta-alta); border: 1px solid var(--linea); border-radius: 999px; padding: .3rem .7rem; }
.pl-conto b { color: var(--accento); font-size: .9rem; }
.pl-feed { flex: 1 1 auto; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pl-carta { scroll-snap-align: start; scroll-snap-stop: always; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 1.2rem 1.15rem 1.6rem; max-width: 540px; margin: 0 auto; border-bottom: 1px solid var(--linea-fine); position: relative; }
.pl-testa { position: absolute; top: .9rem; left: 1.15rem; right: 1.15rem; display: flex; justify-content: space-between; font-family: var(--dati); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); }
.pl-eti { color: var(--accento); }
.pl-titolo { font-family: var(--display); font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.15; margin: 0; }
.pl-domanda { font-family: var(--display); font-size: clamp(1.25rem, 5vw, 1.6rem); line-height: 1.25; margin: 0; font-weight: 600; }
.pl-aff { font-style: italic; font-weight: 500; }
.pl-sotto { margin: 0; color: var(--grafite); font-size: .92rem; }
.pl-righe { display: flex; flex-direction: column; gap: .5rem; font-size: 1.08rem; line-height: 1.5; }
.pl-riga { margin: 0; opacity: 0; transform: translateY(10px); }
.pl-carta.attiva .pl-riga { animation: plIn .5s ease-out forwards; animation-delay: calc(.4s + var(--i) * 1.4s); }
@keyframes plIn { to { opacity: 1; transform: none; } }
.pl-progresso { height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.pl-progresso i { display: block; height: 100%; width: 0; background: var(--accento); }
.pl-carta.attiva .pl-progresso i { animation: plBarra linear forwards; animation-duration: calc(.4s + var(--n) * 1.4s + .5s); }
@keyframes plBarra { to { width: 100%; } }
.pl-azioni { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.pl-btn { font: inherit; font-size: .9rem; padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--accento); background: var(--accento); color: var(--carta); cursor: pointer; }
.pl-btn.vuoto { background: transparent; color: var(--accento); }
.pl-btn:disabled { opacity: .45; }
.pl-btn.scelto { opacity: 1; box-shadow: 0 0 0 3px var(--accento-tenue); }
.pl-opzioni { display: flex; flex-direction: column; gap: .5rem; }
.pl-vf { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pl-opz { font: inherit; font-size: 1rem; text-align: left; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--linea); background: var(--carta-alta); color: var(--inchiostro); cursor: pointer; display: flex; align-items: center; gap: .6rem; line-height: 1.35; }
.pl-vf .pl-opz { justify-content: center; font-size: 1.15rem; font-weight: 600; }
.pl-opz:disabled { cursor: default; }
.pl-opz.giusta { border-color: var(--accento); background: var(--accento-tenue); }
.pl-opz.sbagliata { border-color: var(--segnale); color: var(--segnale); }
.pl-num { font-family: var(--dati); font-size: .8rem; color: var(--accento); min-width: 1.1em; }
.pl-anno { margin-left: auto; font-family: var(--dati); font-size: .75rem; color: var(--grafite); visibility: hidden; }
.pl-opz.mostra-anno .pl-anno { visibility: visible; }
.pl-esito { padding: .7rem .9rem; border-radius: 8px; font-size: .92rem; line-height: 1.45; border-left: 3px solid var(--accento); background: var(--accento-tenue); }
.pl-esito.no { border-left-color: var(--segnale); background: color-mix(in srgb, var(--segnale) 10%, transparent); }
.pl-deve { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .45rem; font-size: .98rem; }
.pl-punto { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pl-scopri { font: inherit; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; border: 1px dashed var(--accento); background: transparent; color: var(--accento); cursor: pointer; }
.pl-spunta { display: inline-flex; gap: .25rem; margin-left: auto; }
.pl-spunta button { font: inherit; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--linea); background: var(--carta-alta); cursor: pointer; }
.pl-spunta button.scelto { border-color: var(--accento); background: var(--accento-tenue); }
.pl-spunta button:disabled:not(.scelto) { opacity: .35; }
.pl-link { font-size: .85rem; color: var(--accento); }
@media (prefers-reduced-motion: reduce) { .pl-riga { opacity: 1; transform: none; animation: none !important; } }

/* ---------- Tutor vocale ---------- */
.tu-imp { margin-left: auto; }
.tu-chat { flex: 1 1 auto; overflow-y: auto; padding: .9rem .9rem 0; display: flex; flex-direction: column; gap: .55rem; max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.tu-msg { max-width: 88%; padding: .6rem .85rem; border-radius: 14px; line-height: 1.45; font-size: .98rem; }
.tu-msg p { margin: 0; }
.tu-msg p + p { margin-top: .5rem; }
.tu-msg.tutor { align-self: flex-start; background: var(--carta-alta); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.tu-msg.tu { align-self: flex-end; background: var(--accento); color: var(--carta); border-bottom-right-radius: 4px; }
.tu-msg.interim { opacity: .55; }
.tu-sep { align-self: center; font-family: var(--dati); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafite); margin: .6rem 0 .1rem; }
.tu-nota { font-size: .8rem; color: var(--grafite); }
.tu-avviso { font-size: .88rem; color: var(--segnale); }
.tu-punti { display: flex; gap: .35rem; align-items: center; padding: .5rem .9rem; max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.tu-punto { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--linea); display: inline-flex; align-items: center; justify-content: center; font-family: var(--dati); font-size: .72rem; color: var(--grafite); }
.tu-punto.ok { background: var(--accento); border-color: var(--accento); color: var(--carta); }
.tu-punti .pl-link { margin-left: auto; }
.tu-comandi { display: flex; gap: .5rem; align-items: center; padding: .6rem .9rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--carta-alta); max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; flex-wrap: wrap; }
.tu-comandi input { flex: 1 1 140px; font: inherit; font-size: 16px; padding: .55rem .8rem; border-radius: 999px; border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); min-width: 0; }
.tu-mic { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: none; background: var(--accento); cursor: pointer; position: relative; flex: 0 0 auto; }
.tu-mic span { position: absolute; inset: 0; margin: auto; width: .9rem; height: 1.3rem; border-radius: .45rem; background: var(--carta); }
.tu-mic span::after { content: ''; position: absolute; left: 50%; bottom: -.5rem; width: 1.4rem; height: .5rem; transform: translateX(-50%); border: 2px solid var(--carta); border-top: none; border-radius: 0 0 .7rem .7rem; }
.tu-mic.attivo { animation: tuPulsa 1.2s infinite; background: var(--segnale); }
.tu-mic:disabled { opacity: .4; cursor: not-allowed; }
@keyframes tuPulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--segnale) 45%, transparent); } 60% { box-shadow: 0 0 0 14px transparent; } }
.tu-pannello { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--carta-alta); border-top: 1px solid var(--linea); padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .6rem; max-height: 75%; overflow-y: auto; box-shadow: var(--ombra); }
.tu-pannello h3 { margin: 0; }
.tu-pannello label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--grafite); }
.tu-pannello select, .tu-pannello input[type=password] { font: inherit; font-size: 16px; padding: .45rem .6rem; border-radius: 6px; border: 1px solid var(--linea); background: var(--carta); color: var(--inchiostro); }

/* =========================================================
   ATLANTE 3D — portale immersivo (ispirazione Neurotorium)
   Viewport intero, tessuto da studio, titolo flottante,
   toolbar in basso: cerca, etichette, sezioni, esplosione.
   ========================================================= */
body.atl-immersivo { background: #C4C2BC; background-image: none; overflow: hidden; }
html[data-tema="sfondo"] body.atl-immersivo { background: #1A1D21; }
body.atl-immersivo .testata,
body.atl-immersivo .barra { display: none; }
body.atl-immersivo .impianto { display: block; }
body.atl-immersivo #contenuto.pl-piena {
  padding: 0; max-width: none; height: 100dvh; width: 100%;
  overflow: hidden;
}

.atl-portale { position: relative; height: 100%; width: 100%; color: var(--inchiostro); }
.atl-scena { position: absolute; inset: 0; background:
  radial-gradient(80% 70% at 50% 42%, #D2D0CA 0%, #B4B2AC 70%); }
html[data-tema="sfondo"] .atl-scena { background:
  radial-gradient(80% 70% at 50% 42%, #24282E 0%, #15181C 70%); }
.atl-scena canvas { display: block; width: 100%; height: 100%; }
.atl-scena.atl-senza3d { display:grid; place-items:center; }

.atl-carico { position:absolute; inset:0; display:grid; place-items:center; padding:1.5rem;
  pointer-events:none; }
.atl-carico-testo { font-family:var(--dati); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafite); }
.atl-ripiego { pointer-events:auto; max-width:46ch; }
.atl-ripiego p { font-size:.92rem; }
.atl-ripiego code { font-family:var(--dati); font-size:.85em; }

.atl-nome-volante { position:absolute; margin:0; transform:translate(12px, -50%);
  font-family:var(--dati); font-size:.72rem; letter-spacing:.04em;
  background:var(--inchiostro); color:var(--carta); padding:.24rem .5rem;
  border-radius:3px; pointer-events:none; white-space:nowrap; z-index:3; }

.atl-pin-strato { position:absolute; inset:0; pointer-events:none; z-index:2; }
.atl-pin { position:absolute; top:0; left:0; margin-left:6px;
  font-family:var(--dati); font-size:.62rem; letter-spacing:.03em; white-space:nowrap;
  color:var(--inchiostro); background:color-mix(in srgb, var(--carta-alta) 88%, transparent);
  border:1px solid var(--linea-fine); border-radius:2px; padding:.1rem .34rem;
  transition:opacity .2s; will-change:transform; }

.atl-top { position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; gap:1rem; padding:.7rem 1rem;
  pointer-events:none; }
.atl-top > * { pointer-events:auto; }
.atl-via { font-family:var(--dati); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--grafite);
  background:color-mix(in srgb, var(--carta-alta) 88%, transparent);
  border:1px solid var(--linea); border-radius:999px; padding:.35rem .8rem; }
.atl-sezioni { display:flex; gap:.15rem; background:color-mix(in srgb, var(--carta-alta) 90%, transparent);
  border:1px solid var(--linea); border-radius:999px; padding:.18rem; }
.atl-sezioni a { font-family:var(--dati); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--grafite);
  padding:.32rem .75rem; border-radius:999px; }
.atl-sezioni a.attiva { background:var(--inchiostro); color:var(--carta); }
.atl-modi { display:flex; gap:.35rem; align-items:center; margin-left:auto; }
.atl-modo { font-family:var(--dati); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grafite); background:color-mix(in srgb, var(--carta-alta) 88%, transparent);
  border:1px solid var(--linea); border-radius:999px; padding:.35rem .75rem; cursor:pointer; }
.atl-modo.attivo { color:var(--carta); background:var(--accento); border-color:var(--accento); }
.atl-punteggio { font-family:var(--dati); font-size:.7rem; color:var(--grafite); }

.atl-albero { position:absolute; top:3.55rem; left:0; bottom:3.55rem; z-index:5;
  width:15.6rem; display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--carta-alta) 94%, transparent);
  border-right:1px solid var(--linea); backdrop-filter:blur(10px); }
.atl-albero-testa { display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .85rem .45rem; }
.atl-albero-tit { font-family:var(--dati); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grafite); margin:0; }
.atl-albero-chiudi { display:none; background:none; border:none; color:var(--grafite);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:.1rem .3rem; }
.atl-albero-lista { overflow-y:auto; flex:1; padding:.1rem .55rem 1rem; }
.atl-albero-blocco { margin:0 0 .7rem; }
.atl-albero-g { width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--dati); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grafite); padding:.35rem .2rem; }
.atl-albero-g:hover { color:var(--inchiostro); }
.atl-albero-riga { display:flex; align-items:center; gap:.15rem; border-radius:6px; }
.atl-albero-riga.scelta { background:var(--accento-tenue); }
.atl-albero-riga.off .atl-albero-parte { opacity:.38; }
.atl-albero-parte { flex:1; display:flex; align-items:center; gap:.45rem;
  text-align:left; background:none; border:none; cursor:pointer;
  color:var(--inchiostro); font:inherit; font-size:.86rem; padding:.32rem .3rem; }
.atl-albero-tinta { width:.55rem; height:.55rem; border-radius:50%; flex:0 0 auto; }
.atl-albero-occhio { background:none; border:none; cursor:pointer; color:var(--grafite);
  font-size:.7rem; padding:.25rem .4rem; }

.atl-guida { position:absolute; left:16.2rem; right:1rem; bottom:4.15rem; z-index:6;
  max-width:34rem; max-height:min(38vh, 320px); overflow:auto;
  background:color-mix(in srgb, var(--carta-alta) 96%, transparent);
  border:1px solid var(--linea); border-radius:12px; padding:.85rem 1rem 1rem;
  box-shadow:0 16px 36px #161B2224; }
.atl-guida-meta { font-family:var(--dati); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accento); margin:0 0 .3rem; }
.atl-guida-tit { font-family:var(--display); font-size:1.2rem; font-weight:500; margin:0 0 .4rem; }
.atl-guida-testo { font-size:.92rem; line-height:1.55; margin:0; }
.atl-guida-pezzi { font-family:var(--dati); font-size:.68rem; letter-spacing:.03em;
  color:var(--grafite); margin:.55rem 0 0; }
.atl-guida-nav { display:flex; gap:.4rem; margin-top:.75rem; }
.atl-guida-nav button { font-family:var(--dati); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:.4rem .9rem; cursor:pointer; }
.atl-guida-nav button:first-child { background:transparent; border:1px solid var(--linea); color:var(--grafite); }
.atl-guida-nav button:last-child { background:var(--inchiostro); color:var(--carta); border:none; }
.atl-guida-nav button:disabled { opacity:.35; cursor:default; }

.atl-esplodi-dock { position:absolute; left:16.3rem; bottom:4.15rem; z-index:4;
  width:min(268px, 36vw); background:color-mix(in srgb, var(--carta-alta) 93%, transparent);
  border:1px solid var(--linea); border-radius:10px; padding:.5rem .7rem .55rem;
  box-shadow:0 8px 22px #161B2210; }
.atl-esplodi-pre { display:flex; gap:.3rem; margin-top:.15rem; }
.atl-esplodi-pre button { flex:1; font-family:var(--dati); font-size:.58rem;
  letter-spacing:.06em; text-transform:uppercase; padding:.28rem .2rem;
  border:1px solid var(--linea); border-radius:5px; background:transparent;
  color:var(--grafite); cursor:pointer; }
.atl-esplodi-pre button.attivo { background:var(--inchiostro); color:var(--carta);
  border-color:var(--inchiostro); }

.atl-gizmo { position:absolute; top:4.2rem; right:1rem; z-index:4;
  display:flex; flex-direction:column; gap:.25rem; }
.atl-gizmo button { width:auto; min-width:5.6rem; height:auto; border-radius:4px;
  border:1px solid var(--linea); background:color-mix(in srgb, var(--carta-alta) 90%, transparent);
  font-family:var(--dati); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--grafite); cursor:pointer; padding:.32rem .5rem; text-align:left; }
.atl-gizmo button:hover { border-color:var(--inchiostro); color:var(--inchiostro); }

.atl-indietro { position:absolute; top:4.4rem; left:1.2rem; z-index:4;
  font-family:var(--dati); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--inchiostro); background:var(--carta-alta);
  border:none; border-radius:999px; padding:.45rem .85rem; cursor:pointer;
  box-shadow:0 8px 22px #161B2212; }
.atl-titolo { position:absolute; top:4.4rem; left:50%; transform:translateX(-50%);
  z-index:4; min-width:min(440px, 86vw); text-align:left; cursor:pointer;
  color:var(--inchiostro); background:var(--carta-alta); border:none; border-radius:10px;
  padding:.85rem 1.2rem; box-shadow:0 10px 30px #161B2214;
  display:flex; flex-direction:column; gap:.15rem; }
.atl-titolo-gruppo { font-family:var(--dati); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafite); }
.atl-titolo-nome { font-family:var(--display); font-size:1.15rem; font-weight:500; }
.atl-titolo::after { content:'›'; position:absolute; right:1rem; top:50%;
  transform:translateY(-50%); color:var(--grafite); font-size:1.4rem; }

.atl-scheda { position:absolute; left:50%; bottom:5.2rem; transform:translateX(-50%);
  z-index:5; width:min(480px, 92vw); max-height:min(38vh, 340px); overflow-y:auto;
  color:var(--inchiostro); background:var(--carta-alta); border-radius:10px;
  padding:1.1rem 1.25rem 1.3rem; box-shadow:0 18px 40px #161B2220; }
@media (min-width: 900px) {
  .atl-scheda { top:7.2rem; bottom:auto; left:auto; right:1.2rem; transform:none;
    width:min(360px, 28vw); max-height:min(64vh, 560px); }
}
@media (min-width: 640px) {
  body.atl-immersivo .atl-scena { left:15.6rem; }
  body.atl-immersivo .atl-barra { left:15.6rem; }
  body.atl-immersivo .atl-indietro { left:16.6rem; }
  body.atl-immersivo .atl-titolo { left:calc(15.6rem + (100% - 15.6rem) / 2); }
  body.atl-immersivo .atl-cerca-box,
  body.atl-immersivo .atl-pannello { left:calc(15.6rem + (100% - 15.6rem) / 2); }
  .atl-esplodi-dock { left:16.2rem; }
}
.atl-nome { font-size:1.35rem; margin:.15rem 0 .2rem; }
.atl-alias { font-family:var(--dati); font-size:.68rem; letter-spacing:.04em;
  color:var(--grafite); margin:0 0 1rem; }
.atl-blocco { border-top:1px solid var(--linea-fine); padding-top:.55rem; margin-bottom:.85rem; }
.atl-eti { font-family:var(--dati); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafite); margin:0 0 .25rem; }
.atl-testo { font-size:.9rem; line-height:1.55; margin:0; }
.atl-testo.atl-assente { color:var(--linea); }
.atl-rimandi { font-family:var(--dati); font-size:.68rem; letter-spacing:.04em;
  margin:1.1rem 0 0; padding-top:.7rem; border-top:1px solid var(--linea-fine); }
.atl-scheda-azioni { display:flex; align-items:center; gap:1rem; margin-top:.7rem; }
.atl-isola { font-family:var(--dati); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; background:var(--inchiostro); color:var(--carta);
  border:none; border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.atl-isola.attivo { background:var(--accento); }
.atl-chiudi { margin-top:0; font-family:var(--dati); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; background:none; border:none;
  color:var(--grafite); cursor:pointer; padding:0; }

.atl-cerca-box, .atl-pannello { position:absolute; bottom:4.6rem; left:50%;
  transform:translateX(-50%); z-index:5; width:min(420px, 92vw);
  background:#fff; border-radius:10px; padding:.9rem 1rem; box-shadow:0 12px 32px #161B2218; }
html[data-tema="sfondo"] .atl-cerca-box,
html[data-tema="sfondo"] .atl-pannello { background:#232A32; }
.atl-cerca-box input { width:100%; font:inherit; font-size:1rem; padding:.5rem .6rem;
  border:1px solid var(--linea); border-radius:6px; background:var(--carta); color:var(--inchiostro); }
.atl-cerca-esiti { display:flex; flex-direction:column; margin-top:.4rem; }
.atl-cerca-esiti button { text-align:left; background:none; border:none; padding:.45rem .3rem;
  font:inherit; cursor:pointer; color:var(--inchiostro); border-radius:4px; }
.atl-cerca-esiti button:hover { background:var(--accento-tenue); }
.atl-pannello-tit { font-family:var(--dati); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grafite); margin:0 0 .55rem; }
.atl-piani { display:flex; gap:.35rem; margin-bottom:.7rem; }
.atl-piani button { flex:1; font-family:var(--dati); font-size:.68rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.4rem .3rem; border:1px solid var(--linea);
  border-radius:6px; background:transparent; color:var(--grafite); cursor:pointer; }
.atl-piani button.attivo { background:var(--inchiostro); color:var(--carta); border-color:var(--inchiostro); }
.atl-cursore { display:flex; align-items:center; gap:.6rem; margin:.4rem 0; }
.atl-cursore span { font-family:var(--dati); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafite); min-width:4.2rem; }
.atl-cursore input[type=range] { flex:1; accent-color:var(--accento); }
.atl-aiuto-lista { margin:0; padding:0 0 0 1.1rem; font-size:.88rem; line-height:1.55; }
.atl-aiuto-lista li { margin:.2rem 0; }
.atl-aiuto .nota { margin:.7rem 0 0; }

.atl-barra { position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; justify-content:center; gap:.2rem; padding:.45rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--carta-alta) 92%, transparent);
  border-top:1px solid var(--linea); backdrop-filter:blur(8px); }
.atl-barra button { font-family:var(--dati); font-size:.62rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grafite); background:none; border:none;
  padding:.45rem .7rem; cursor:pointer; border-radius:6px; display:flex;
  flex-direction:column; align-items:center; gap:.15rem; }
.atl-barra button span { font-size:.95rem; letter-spacing:0; text-transform:none; }
.atl-barra button.aperto, .atl-barra button.attivo { color:var(--accento); }

.atl-test { position:absolute; left:50%; bottom:5.2rem; transform:translateX(-50%);
  z-index:5; width:min(520px, 92vw); background:#fff; border-radius:10px;
  padding:1rem 1.1rem; box-shadow:0 12px 32px #161B2218; }
html[data-tema="sfondo"] .atl-test { background:#232A32; }
.atl-domanda { font-family:var(--display); font-size:1.15rem; margin:0 0 .9rem; }
.atl-opzioni { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:.5rem; }
.atl-opz { font:inherit; font-size:.9rem; text-align:left; cursor:pointer;
  color:var(--inchiostro); background:var(--carta); border:1px solid var(--linea);
  border-radius:6px; padding:.6rem .8rem; }
.atl-opz:hover:not(:disabled) { border-color:var(--accento); background:var(--accento-tenue); }
.atl-opz.giusta { border-color:var(--accento); background:var(--accento-tenue); font-weight:500; }
.atl-opz.sbagliata { border-color:var(--segnale); color:var(--segnale); }
.atl-forma { display:flex; gap:.5rem; flex-wrap:wrap; }
.atl-forma input { font:inherit; font-size:.95rem; color:var(--inchiostro); background:var(--carta);
  border:1px solid var(--linea); border-radius:6px; padding:.55rem .7rem; flex:1 1 220px; }
.atl-esito { font-size:.95rem; margin:.9rem 0 0; }
.atl-esito.ok { color:var(--accento); }
.atl-esito.no { color:var(--segnale); }
.atl-scritto { margin-top:.9rem; }
.atl-spunta { display:flex; align-items:center; gap:.4rem; font-family:var(--dati);
  font-size:.7rem; letter-spacing:.05em; color:var(--grafite); cursor:pointer; }

@media (max-width: 639px) {
  .atl-guida { left:.6rem; right:.6rem; max-width:none; }
  .atl-albero { top:auto; bottom:3.55rem; width:100%; height:min(58vh, 480px);
    transform:translateY(110%); border-right:none; border-top:1px solid var(--linea);
    border-radius:14px 14px 0 0; transition:transform .22s ease; }
  .atl-albero.aperto { transform:none; }
  .atl-albero-chiudi { display:block; }
  .atl-esplodi-dock { left:.7rem; width:min(260px, calc(100vw - 1.4rem)); }
}
@media (min-width: 640px) and (max-width: 1099px) {
  .atl-esplodi-dock { left:16.2rem; }
}
@media (max-width: 700px) {
  .atl-top { flex-wrap:wrap; gap:.4rem; }
  .atl-modi { margin-left:0; }
  .atl-titolo { top:6.6rem; min-width:min(440px, 92vw); }
  .atl-gizmo { top:6.6rem; }
  .atl-barra button { padding:.4rem .45rem; font-size:.55rem; }
  .atl-esplodi-dock { bottom:3.9rem; }
}

/* =========================================================
   MAPPE CONCETTUALI — albero da esplorare scendendo
   Nodi HTML sopra uno strato SVG di rami; la tela si
   trascina e si ingrandisce. Ogni ramo di primo livello
   ha la sua tinta, e la passa a tutti i discendenti.
   ========================================================= */

/* A differenza di .pl-piena (Pills, Tutor, Atlante), qui il contenuto
   NON è un unico blocco che gestisce da sé lo scroll: è una pagina
   normale — titolo, sommario, filtri, poi la mappa/elenco — che deve
   scorrere come tutte le altre. .pl-piena impone altezza fissa e
   overflow:hidden su <main>: bene per un canvas a schermo intero, ma
   qui taglierebbe via tutto sotto la piega e azzererebbe il respiro
   dei margini. Stessa idea di .pl-piena — via il tetto di larghezza —
   senza l'altezza fissa. */
main.mp-full {
  max-width: none;
  padding: clamp(1.4rem, 3vw, 2.5rem) clamp(1.1rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}

/* I rami non usano né verde né giallo: quelli significano
   «elemento finale» e «superfluo», e non devono confondersi. */
:root {
  --mp-c0: #2F5FA8; --mp-c1: #6B4FA3; --mp-c2: #A65E2A;
  --mp-c3: #A63D2A; --mp-c4: #4A6E8C; --mp-c5: #9C3F7A;
  --mp-verde: #2E7D32; --mp-verde-tenue: #2E7D3217;
  --mp-giallo: #B7791F; --mp-giallo-tenue: #E0A84A26;
}
html[data-tema="sfondo"] {
  --mp-c0: #86B3F0; --mp-c1: #BBA3E6; --mp-c2: #E9A272;
  --mp-c3: #E4785F; --mp-c4: #8FB3CC; --mp-c5: #D98CC0;
  --mp-verde: #6BCB77; --mp-verde-tenue: #6BCB771F;
  --mp-giallo: #E8B84F; --mp-giallo-tenue: #E8B84F1F;
}

/* elemento finale: verde */
.mp-nodo.mp-finale { border-left-color: var(--mp-verde);
  background: color-mix(in srgb, var(--mp-verde) 9%, var(--carta-alta)); }
.mp-nodo.mp-finale:hover { border-color: var(--mp-verde); }
/* superfluo: giallo, e un filo più discreto */
.mp-nodo.mp-superfluo { border-left-color: var(--mp-giallo); border-style: dashed; border-left-style: solid;
  background: color-mix(in srgb, var(--mp-giallo) 11%, var(--carta-alta)); color: var(--grafite); }
.mp-nodo.mp-superfluo .mp-t { font-weight: 400; font-style: italic; }
.mp-nodo.mp-superfluo:hover { border-color: var(--mp-giallo); }
.mp-nodo.mp-scelto.mp-finale { box-shadow: 0 0 0 1px var(--mp-verde), var(--ombra); border-color: var(--mp-verde); }
.mp-nodo.mp-scelto.mp-superfluo { box-shadow: 0 0 0 1px var(--mp-giallo), var(--ombra); border-color: var(--mp-giallo); }

.mp-lista li.mp-finale > .mp-riga .mp-foglia { color: var(--mp-verde); font-size: .56rem; }
.mp-lista li.mp-superfluo > .mp-riga .mp-foglia { color: var(--mp-giallo); font-size: .56rem; }
.mp-lista li.mp-superfluo > .mp-riga .mp-voce { color: var(--grafite); font-style: italic; }
.mp-lista li.mp-superfluo > .mp-riga .mp-freccia { color: var(--mp-giallo); }
.mp-lista li.mp-finale > .mp-d-elenco { border-left-color: var(--mp-verde); }
.mp-lista li.mp-superfluo > .mp-d-elenco { border-left-color: var(--mp-giallo); }

.mp-legenda { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin:-.2rem 0 .9rem;
  font-family:var(--dati); font-size:.66rem; letter-spacing:.03em; color:var(--grafite); }
.mp-leg { display:inline-flex; align-items:center; gap:.4rem; }
.mp-leg::before { content:''; width:.9rem; height:.62rem; border-radius:2px; border-left:3px solid; }
.mp-leg-fin::before { border-color: var(--mp-verde); background: color-mix(in srgb, var(--mp-verde) 18%, transparent); }
.mp-leg-es::before  { border-color: var(--mp-giallo); background: color-mix(in srgb, var(--mp-giallo) 22%, transparent); }
.mp-leg-ramo::before { border-color: var(--mp-c0); background: var(--carta-alta);
  box-shadow: inset 0 0 0 1px var(--linea); }

.mp-cartellino { display:inline-block; font-family:var(--dati); font-size:.64rem; letter-spacing:.04em;
  padding:.22rem .55rem; border-radius:3px; margin:-.2rem 0 .8rem; }
.mp-cart-fin { color: var(--mp-verde); background: var(--mp-verde-tenue); }
.mp-cart-es  { color: color-mix(in srgb, var(--mp-giallo) 70%, var(--inchiostro)); background: var(--mp-giallo-tenue); }
.mp-giu.mp-giu-fin { border-left-color: var(--mp-verde); }
.mp-giu.mp-giu-es  { border-left-color: var(--mp-giallo); font-style: italic; color: var(--grafite); }

.mp-nascosta { display:none !important; }

.mp-attrezzi { display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin:0 0 1rem; }
.mp-attrezzi .bottone { padding:.42rem .8rem; font-size:.82rem; }
.mp-segmenti { display:inline-flex; border:1px solid var(--linea); border-radius:3px; overflow:hidden; }
.mp-segmenti button { font-family:var(--dati); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grafite); background:transparent; border:0; padding:.48rem .85rem; cursor:pointer; }
.mp-segmenti button + button { border-left:1px solid var(--linea); }
.mp-segmenti button.attivo { background:var(--accento); color:var(--carta); }
.mp-cerca { display:flex; align-items:center; gap:.55rem; margin-left:auto; flex:1 1 220px; max-width:340px; }
.mp-cerca input { font:inherit; font-size:.88rem; color:var(--inchiostro); background:var(--carta-alta);
  border:1px solid var(--linea); border-radius:3px; padding:.45rem .65rem; width:100%; }
.mp-cerca input:focus { outline:none; border-color:var(--accento); }
.mp-conta { font-family:var(--dati); font-size:.66rem; color:var(--grafite); white-space:nowrap; }

.mp-banco { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); gap:1.1rem; align-items:start; }

/* --- la mappa --- */
.mp-scena { position:relative; height:clamp(420px, 68vh, 780px); overflow:hidden; cursor:grab;
  border:1px solid var(--linea); border-radius:4px; touch-action:none; user-select:none;
  background:
    linear-gradient(var(--griglia) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg, var(--griglia) 1px, transparent 1px) 0 0/22px 22px,
    var(--carta); }
.mp-scena.mp-trascina { cursor:grabbing; }
.mp-scena:fullscreen { border:0; border-radius:0; }
.mp-zoom button svg { display:block; margin:auto; }
.mp-scena:focus { outline:none; }
.mp-tela { position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; }
.mp-rami { position:absolute; top:0; left:0; overflow:visible; pointer-events:none; }
.mp-rami path { fill:none; stroke-width:1.4; opacity:.5; transition:opacity .15s; }
.mp-rami path.mp-ramo-attivo { stroke-width:2.2; opacity:1; }

/* width:max-content: la tela non ha larghezza, e senza questo i nodi
   si restringerebbero alla parola più lunga */
.mp-nodo { position:absolute; top:0; left:0; box-sizing:border-box; width:max-content; max-width:210px;
  display:flex; flex-direction:column; gap:.2rem; padding:.42rem 1.55rem .42rem .62rem;
  background:var(--carta-alta); color:var(--inchiostro);
  border:1px solid var(--linea); border-left:3px solid var(--tinta); border-radius:3px;
  font-size:.82rem; line-height:1.3; cursor:pointer; box-shadow:0 1px 1px #0000000a;
  transition:border-color .12s, box-shadow .12s, background .12s; }
.mp-nodo:not([class*="mp-radice"]):has(.mp-d) { max-width:270px; }
.mp-nodo:hover { border-color:var(--tinta); }
.mp-nodo:focus-visible { outline:2px solid var(--tinta); outline-offset:2px; }
.mp-nodo.mp-scelto { background:color-mix(in srgb, var(--tinta) 13%, var(--carta-alta));
  border-color:var(--tinta); box-shadow:0 0 0 1px var(--tinta), var(--ombra); }
.mp-nodo.mp-trovato { box-shadow:0 0 0 2px var(--ambra); }
.mp-nodo.mp-radice { font-family:var(--display); font-size:1.02rem; font-weight:600;
  padding:.62rem 1.7rem .62rem .8rem; max-width:230px; }
.mp-nodo.mp-con3d .mp-t::after { content:'3D'; font-family:var(--dati); font-size:.56rem; letter-spacing:.06em;
  margin-left:.4rem; padding:.02rem .26rem; border:1px solid var(--linea); border-radius:2px;
  color:var(--grafite); vertical-align:1px; }
.mp-t { font-weight:500; }
.mp-radice .mp-t { font-weight:600; }
.mp-d { font-size:.74rem; line-height:1.42; color:var(--grafite); }
.mp-d strong { color:var(--inchiostro); font-weight:500; }
.mp-apri { position:absolute; right:.32rem; top:50%; transform:translateY(-50%);
  min-width:1.15rem; height:1.15rem; padding:0 .22rem; border-radius:999px;
  font-family:var(--dati); font-size:.62rem; line-height:1; cursor:pointer;
  color:var(--tinta); background:var(--carta); border:1px solid var(--tinta); }
.mp-apri:hover { background:var(--tinta); color:var(--carta); }

.mp-zoom { position:absolute; right:.6rem; bottom:.6rem; display:flex; flex-direction:column; gap:.3rem; z-index:2; }
.mp-zoom button { width:2rem; height:2rem; font-size:1rem; line-height:1; cursor:pointer;
  color:var(--inchiostro); background:var(--carta-alta); border:1px solid var(--linea); border-radius:3px; }
.mp-zoom button:hover { border-color:var(--accento); color:var(--accento); }

/* --- l'elenco --- */
.mp-elenco { border:1px solid var(--linea); border-radius:4px; background:var(--carta-alta);
  padding:.8rem .9rem; max-height:clamp(420px, 68vh, 780px); overflow:auto; }
.mp-lista, .mp-lista ul { list-style:none; margin:0; padding:0; }
.mp-lista ul { margin-left:.62rem; padding-left:.75rem; border-left:1px solid var(--linea-fine); }
.mp-riga { display:flex; align-items:center; gap:.3rem; padding:.12rem .3rem; border-radius:3px; }
.mp-riga.mp-scelto { background:color-mix(in srgb, var(--tinta) 13%, transparent); }
.mp-riga.mp-trovato .mp-voce { box-shadow:inset 0 -2px 0 var(--ambra); }
.mp-freccia { width:1.3rem; flex:none; text-align:center; font-size:.78rem; color:var(--tinta);
  background:none; border:0; cursor:pointer; padding:.1rem 0; }
.mp-foglia { color:var(--linea); cursor:default; }
.mp-voce { font:inherit; font-size:.9rem; text-align:left; color:var(--inchiostro);
  background:none; border:0; padding:.22rem .1rem; cursor:pointer; }
.mp-voce:hover { color:var(--tinta); }
.mp-lista > li > .mp-riga .mp-voce { font-family:var(--display); font-weight:600; font-size:1.02rem; }
.mp-quanti { font-family:var(--dati); font-size:.62rem; color:var(--grafite); }
.mp-bollino { font-family:var(--dati); font-size:.56rem; letter-spacing:.06em; color:var(--grafite);
  border:1px solid var(--linea); border-radius:2px; padding:.02rem .26rem; }
.mp-d-elenco { font-size:.84rem; line-height:1.5; color:var(--grafite);
  margin:.1rem 0 .45rem 1.62rem; padding-left:.65rem; border-left:2px solid var(--tinta); }
.mp-d-elenco strong { color:var(--inchiostro); font-weight:500; }

/* --- il pannello --- */
.mp-pannello { position:sticky; top:calc(var(--testata-h) + 1rem);
  border:1px solid var(--linea); border-radius:4px; background:var(--carta-alta);
  padding:1.1rem 1.2rem; max-height:clamp(420px, 68vh, 780px); overflow-y:auto; }
.mp-pannello p { font-size:.9rem; }
.mp-briciole { display:flex; flex-wrap:wrap; align-items:center; gap:.18rem .3rem;
  font-family:var(--dati); font-size:.64rem; letter-spacing:.02em; color:var(--grafite); margin:0 0 .9rem; }
.mp-briciola { font:inherit; color:var(--accento); background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.mp-sep { color:var(--linea); }
.mp-titolo { font-size:1.3rem; margin:.1rem 0 .7rem; }
.mp-descr { line-height:1.6; }
.mp-eti { font-family:var(--dati); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grafite); margin:1rem 0 .3rem; }
.mp-eti-atl { margin-top:1.3rem; padding-top:.8rem; border-top:1px solid var(--linea-fine); }
.mp-blocco { border-top:1px solid var(--linea-fine); padding-top:.45rem; margin-bottom:.7rem; }
.mp-blocco .mp-eti { margin:0 0 .2rem; }
.mp-blocco p:last-child { margin:0; line-height:1.55; }
.mp-3d { margin-top:.4rem; padding:.45rem .85rem; font-size:.82rem; text-decoration:none; display:inline-block; }
.mp-scendi { display:flex; flex-wrap:wrap; gap:.35rem; }
.mp-giu { font:inherit; font-size:.8rem; color:var(--inchiostro); cursor:pointer;
  background:var(--carta); border:1px solid var(--linea); border-left:3px solid var(--tinta);
  border-radius:3px; padding:.3rem .6rem; }
.mp-giu:hover { border-color:var(--tinta); }
.mp-giu span { font-family:var(--dati); font-size:.6rem; color:var(--grafite); margin-left:.2rem; }

/* --- avviso che si sta guardando una bozza non pubblicata --- */
.mp-nota-bozza { color:var(--mp-giallo); border-left:2px solid var(--mp-giallo); padding-left:.9rem; }

/* --- la barra di modifica: esporta, scarica, scarta --- */
.mp-modifica-barra { border:1px solid var(--linea); border-left:2px solid var(--accento); border-radius:4px;
  background:var(--carta-alta); padding:1rem 1.1rem; margin:0 0 1.2rem; }
.mp-modifica-barra .nota { margin:0 0 .8rem; }
.mp-esito { font-family:var(--dati); font-size:.78rem; color:var(--accento); min-height:1.2em; margin:.6rem 0 0; }

/* --- il modulo di modifica, in coda al pannello --- */
.mp-editor { margin-top:1.3rem; padding-top:1rem; border-top:1px dashed var(--linea); }
.mp-campo { display:flex; flex-direction:column; gap:.3rem; font-size:.86rem; color:var(--grafite);
  margin-bottom:.8rem; }
.mp-campo .nota { font-size:.82em; }
.mp-campo input[type=text], .mp-campo textarea { font:inherit; font-size:.9rem; color:var(--inchiostro);
  background:var(--carta); border:1px solid var(--linea); border-radius:3px; padding:.5rem .65rem;
  resize:vertical; }
.mp-campo input[type=text]:focus, .mp-campo textarea:focus { outline:none; border-color:var(--accento); }
.mp-check { display:flex; align-items:center; gap:.45rem; font-size:.86rem; color:var(--grafite);
  margin-bottom:.9rem; }
.mp-check input { accent-color:var(--accento); }
.mp-editor-azioni { display:flex; flex-wrap:wrap; gap:.5rem; }
.mp-editor-azioni .bottone, .mp-editor-azioni .bottone.vuoto { padding:.5rem .9rem; font-size:.84rem; }
.mp-elimina.bottone.vuoto { color:var(--segnale); border-color:var(--segnale); }
.mp-elimina.bottone.vuoto:hover { background:color-mix(in srgb, var(--segnale) 10%, transparent); }

@media (max-width: 900px) {
  .mp-banco { grid-template-columns:1fr; }
  .mp-pannello { position:static; max-height:none; }
  .mp-scena { height:min(64vh, 520px); }
  .mp-elenco { max-height:none; }
  .mp-cerca { margin-left:0; max-width:none; }
}