/* Interpelli Online — sistema visivo «Interpelli Sito v3 Petrolio» (Claude Design, 28/09/2026): bianco e
   grigi freddi, un solo accento petrolio #295A66. Tema unico chiaro (scelta di Stefano del 28/09): nessun
   tema scuro, qualunque sia l'impostazione del telefono. I colori vivono SOLO nei token del :root qui sotto
   (il sito pubblico li legge da qui: web/seo/pagina.php prende il primo :root, quindi resta il primo blocco
   del foglio). Il resto del foglio e app.js usano classi e variabili. Raggi minimi: 6 pulsanti, campi e
   voci, 8 card e pannelli, 4 pillole e tag; più tondo solo ciò che è un cerchio vero. I link non cambiano
   al passaggio del mouse: lo fanno i pulsanti. Carattere di sistema: nessun file da scaricare, nitido su
   ogni telefono, funziona offline. */
:root{
  --inchiostro:#102A30;
  --fondo:#F6F8FA; --superficie:#FFFFFF; --superficie-2:#F1F4F8; --filo:#E3E8EE;
  --testo:var(--inchiostro); --testo-debole:#55696E;
  --primary:#295A66; --primary-forte:#295A66; --su-primary:#FFFFFF; --primary-tenue:#E8F0F1;
  --buono:#0E9F6E; --buono-tenue:#E3F5EE; --attenzione:#A35200; --guasto:#DF1B41; --guasto-fondo:#FCE8EC;
  --filo-forte:color-mix(in srgb,var(--testo-debole) 60%,var(--filo));
  --spento:color-mix(in srgb,var(--testo-debole) 40%,var(--filo));
  --velo:rgba(16,42,48,.35);
  --ombra:0 1px 2px rgba(16,42,48,.06);
  --ombra-alta:0 12px 32px rgba(16,42,48,.12);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px;
  --r:8px; --r-min:6px; --r-tag:4px;
  --t-nota:12px; --t-desc:13px; --t-corpo:15px; --t-barra:17px; --t-h2:20px; --t-h1:24px;
  --tocco:44px; --barra:56px; --schede:64px;
  /* «Interpelli App Desktop»: barra a icone (tablet), barra laterale e lista (desktop), barra alta larga */
  --binario:72px; --lato:248px; --lista-t:340px; --lista-d:440px; --alto:64px; --pagina-larga:740px;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --moto:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--testo);overflow-x:hidden;
  font:400 var(--t-corpo)/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
/* link mai sottolineati e fermi al passaggio del mouse: l'effetto hover è solo dei pulsanti (.btn) */
a{color:var(--primary);text-decoration:none}
svg{display:block;flex:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--s1)}
[hidden]{display:none!important}

/* ════════ BARRA ALTA ════════ */
/* solo il titolo della vista: il nome dell'app è già sull'icona e nella scheda del browser */
.barra{position:sticky;top:0;z-index:10;display:flex;align-items:center;
  padding:env(safe-area-inset-top) max(6px,calc(50% - 320px)) 0;
  height:calc(var(--barra) + env(safe-area-inset-top));background:var(--superficie);border-bottom:1px solid var(--filo)}
.testata{flex:1;min-width:0;padding:0 var(--s2) 0 10px}
#indietro:not([hidden]) + .testata{padding-left:0}
.barra h1{margin:0;font-size:var(--t-barra);font-weight:600;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra h1:focus{outline:none}
/* sottotitolo e strumenti della vista esistono solo da 640 px (li riempie app.js) */
.sottotitolo,.strumenti,.lato{display:none}
/* lettura in corso: una linea che scorre sul bordo basso della barra */
.barra.occupata::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:30%;background:var(--primary);
  animation:scorre 1.1s var(--moto) infinite}
@keyframes scorre{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.icona{width:var(--tocco);height:var(--tocco);border-radius:var(--r-min);display:grid;place-items:center;color:var(--testo);flex:none}
.icona:active{background:var(--superficie-2)}
.icona svg{width:20px;height:20px}

/* ════════ MENÙ LATERALE ════════ */
.velo-menu{position:fixed;inset:0;z-index:30;background:var(--velo);animation:appare .2s var(--moto)}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(300px,84vw);overflow:auto;
  background:var(--superficie);border-left:1px solid var(--filo);box-shadow:var(--ombra-alta);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);animation:entra .24s var(--moto)}
@keyframes entra{from{transform:translateX(100%)}}
@keyframes appare{from{opacity:0}}
.menu-testa{display:flex;align-items:center;height:var(--barra);padding:0 6px 0 var(--s4);border-bottom:1px solid var(--filo)}
.menu-marchio{flex:1;min-width:0}
/* logo «Interpelli Online» (tavola «00 · Logo»): simbolo nel quadrato petrolio, nome su una riga sola */
.lato-marchio,.menu-marchio{display:flex;align-items:center;gap:10px;white-space:nowrap;color:var(--testo)}
.marchio{width:30px;height:30px;border-radius:var(--r-min);display:grid;place-items:center;background:var(--primary-forte);color:var(--su-primary);flex:none}
.marchio svg{width:18px;height:18px}
.l-nome{font-size:var(--t-barra);line-height:1;letter-spacing:-.015em}
.l-nome b{font-weight:650}
.l-nome span{font-weight:500;color:var(--primary)}
.menu-testa .icona svg{width:18px;height:18px}
/* due gruppi a divisori: le viste del dispositivo con il loro stato, poi (dopo 24 px) le pagine del sito in secondo piano */
.menu ul{list-style:none;margin:0;padding:0}
.menu li{border-bottom:1px solid var(--filo)}
.menu .menu-sito{margin-top:var(--s6);border-top:1px solid var(--filo)}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:52px;padding:0 var(--s4);
  color:var(--testo);font-size:var(--t-corpo)}
.menu-sito a{min-height:48px;color:var(--testo-debole)}
.menu a[aria-current="page"]{color:var(--primary);font-weight:500}
/* Gratis: «Passa ad Avvisi» sotto Account, nel colore delle azioni */
.menu .m-passa a{color:var(--primary);font-weight:500}
.m-valore{font-size:var(--t-desc);color:var(--testo-debole);font-weight:400}

/* ════════ PALCO ════════ */
/* colonna di 640 centrata; 100svh = l'altezza sempre visibile (con dvh l'ultimo elemento resta sotto le barre) */
#palco{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s3) var(--s4) calc(var(--schede) + env(safe-area-inset-bottom) + var(--s5));
  min-height:calc(100svh - var(--barra) - env(safe-area-inset-top))}
/* viste di lettura (dettaglio, scuola, notifiche, piano…): più aria tra i blocchi */
#palco.largo{padding-top:var(--s5);gap:var(--s4)}
#palco.largo.arioso{gap:var(--s6)}
#palco > *{margin-top:0;margin-bottom:0}

/* ════════ SCHEDE BASSE ════════ */
.schede{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;
  background:var(--superficie);border-top:1px solid var(--filo);padding-bottom:env(safe-area-inset-bottom)}
.schede a{flex:1;max-width:214px;height:var(--schede);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s1);color:var(--testo-debole);font-size:var(--t-nota);font-weight:500}
.schede a svg{width:20px;height:20px}
.schede a[aria-current="page"]{color:var(--primary)}
/* primo avvio: niente schede, il piede con «Continua» prende il loro posto */
.primo-avvio .schede,.senza-schede .schede{display:none}
.senza-schede #palco{padding-bottom:calc(var(--s7) + env(safe-area-inset-bottom))}
.primo-avvio #palco{padding-top:var(--s7);gap:var(--s4);padding-bottom:calc(var(--s7) * 4 + env(safe-area-inset-bottom))}
/* sul telefono il primo avvio non ha barra alta: i puntini stanno a 32 px dal bordo */
@media (max-width:639px){
  .primo-avvio .barra{display:none}
  .primo-avvio #palco{min-height:100svh;padding-top:calc(var(--s7) + env(safe-area-inset-top))}
}

/* ════════ TITOLI E TESTI ════════ */
.titolo-vista{margin:0;font-size:var(--t-h2);font-weight:600;line-height:1.3;text-wrap:balance;overflow-wrap:anywhere}
.intro{display:flex;flex-direction:column;gap:6px}
.intro h2{margin:0;font-size:var(--t-h1);font-weight:600;line-height:1.2;text-wrap:balance}
.intro p{margin:0;color:var(--testo-debole);line-height:1.5}
.intro .titolo-vista{font-size:var(--t-h2);line-height:1.3;text-wrap:balance}
.sezione{display:flex;flex-direction:column;gap:var(--s2)}
.sezione-testa{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.sezione-testa h2{margin:0;font-size:var(--t-desc);font-weight:600;line-height:normal;color:var(--testo-debole)}
.sezione-testa a{font-size:14px;font-weight:500;line-height:normal;padding:var(--s2) 0}
.card .sezione-testa h2{font-size:var(--t-corpo);color:var(--testo)}
.sotto{display:block;font-size:var(--t-desc);font-weight:400;color:var(--testo-debole);margin-top:2px;line-height:1.45}
.nota{font-size:var(--t-desc);color:var(--testo-debole);margin:0;line-height:1.5}
.nota.centro{text-align:center}
.assente{color:var(--testo-debole)}
.testo{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;margin:0;
  padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--superficie);border:1px solid var(--filo);color:var(--testo-debole)}
/* link dentro il testo: area di tocco di 44 px senza spostare le righe */
.nota a{display:inline-block;padding:var(--s3) var(--s1);margin:calc(var(--s3) * -1) calc(var(--s1) * -1)}
/* nelle righe chiave/valore il link resta in linea: su due righe l'etichetta si allinea alla prima (baseline) */
.riga .v a{padding:var(--s3) var(--s1);margin:0 calc(var(--s1) * -1)}

/* ════════ CARD, BLOCCHI A DIVISORI, RIGHE CHIAVE/VALORE ════════ */
.card{background:var(--superficie);border:1px solid var(--filo);border-radius:var(--r);box-shadow:var(--ombra);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.card > *{margin:0}
.card h2{margin:0;font-size:var(--t-corpo);font-weight:600}
.card > p:not([class]){font-size:14px;line-height:1.5;color:var(--testo-debole)}
/* divisori ottenuti con 1 px di spazio sul colore del bordo */
.blocco{border:1px solid var(--filo);border-radius:var(--r);background:var(--filo);box-shadow:var(--ombra);
  display:grid;gap:1px;overflow:hidden;list-style:none;margin:0;padding:0}
.blocco > *{background:var(--superficie);margin:0}
.blocco.piatto{box-shadow:none}
.riga{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4);font-size:var(--t-corpo);line-height:1.4}
/* l'etichetta non va mai a capo: il valore si stringe e va a capo lui («Interpelli Sistema», 28/09) */
.riga .k{flex:none;white-space:nowrap;color:var(--testo-debole)}
.riga .v{min-width:0;text-align:right;overflow-wrap:anywhere}
.riga .v.mono{font:500 14px/1.4 var(--mono)}
.riga .v.forte{font-weight:600}
.riga .v.urgente{color:var(--guasto);font-weight:500}
/* dentro una card le righe non hanno fondo proprio: solo un filo tra l'una e l'altra */
.stato-parola{display:inline-flex;align-items:center;gap:var(--s2)}
.pallino{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.b-buono{background:var(--buono)} .b-attenzione{background:var(--attenzione)}
/* voce semplice di un blocco: link o testo con una nota a destra (allegati, fonti, plessi) */
.voce{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:10px var(--s4)}
.voce > .k{flex:1;min-width:0;overflow-wrap:anywhere}
.voce > a{flex:1;min-width:0;min-height:28px;display:flex;align-items:center;overflow-wrap:anywhere}
.voce > .nota{flex:none;text-align:right;white-space:pre-line}
.voce b{font-weight:500}

/* ════════ PILLOLE E TAG ════════ */
.pillola{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:var(--r-tag);flex:none;
  font-size:var(--t-nota);font-weight:500;white-space:nowrap;background:var(--superficie-2);color:var(--testo-debole)}
/* «Nuovo» pieno di petrolio, per non confondersi con il verde di «Candidatura» */
.pillola.nuovo{background:var(--primary-forte);color:var(--su-primary)}
.pillola.buona{background:var(--buono-tenue);color:var(--buono)}
.pillola.errore{background:var(--guasto-fondo);color:var(--guasto)}
/* tag = classe di concorso: raggio 4, monospazio */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 6px;border-radius:var(--r-tag);flex:none;
  border:1px solid var(--filo);background:var(--superficie-2);color:var(--testo-debole);font:500 var(--t-nota)/1 var(--mono)}

/* ════════ CAMPI ════════ */
.campo{position:relative;display:flex;align-items:center}
.campo input,.campo select{width:100%;height:var(--tocco);padding:0 var(--s3);border-radius:var(--r-min);
  background:var(--superficie);border:1px solid var(--filo);color:var(--testo);font-size:var(--t-corpo);
  transition:border-color .15s,box-shadow .15s}
.campo input::placeholder{color:var(--testo-debole);opacity:1}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tenue)}
.campo input[aria-invalid="true"]{border-color:var(--guasto)}
/* icona della lente dentro il campo di ricerca */
.campo.cerca svg{position:absolute;left:var(--s3);width:16px;height:16px;color:var(--testo-debole);pointer-events:none}
.campo.cerca input{padding-left:36px}
.campo input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
/* select: freccia disegnata, il resto come un pulsante bianco */
.campo.scelta select{appearance:none;-webkit-appearance:none;padding-right:36px;box-shadow:var(--ombra);cursor:pointer}
.campo.scelta select:focus{box-shadow:0 0 0 3px var(--primary-tenue)}
.campo.scelta svg{position:absolute;right:var(--s3);width:16px;height:16px;color:var(--testo-debole);pointer-events:none}
.campo-riga{display:flex;gap:var(--s2);align-items:flex-start}
.campo-riga > .campo{flex:1;min-width:0}
.campo-riga > .btn{width:auto;flex:none;padding:0 var(--s4)}
.etichetta{display:block;font-size:var(--t-desc);font-weight:500;margin:0 0 6px}
.errore-campo{font-size:var(--t-desc);color:var(--guasto);margin:0}
.errore-campo:empty{display:none}

/* ════════ PULSANTI ════════ */
.btn{width:100%;min-height:var(--tocco);padding:var(--s2) var(--s4);border-radius:var(--r-min);
  background:var(--primary-forte);color:var(--su-primary);font-size:var(--t-corpo);font-weight:500;line-height:1.25;
  display:flex;align-items:center;justify-content:center;text-align:center;transition:filter .15s var(--moto),background .15s var(--moto)}
.btn:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}
/* un pulsante bloccato non deve sembrare premibile */
.btn[disabled]{background:var(--superficie-2);color:var(--testo-debole);box-shadow:none;pointer-events:none;filter:none}
.btn-filo{background:var(--superficie);color:var(--testo);border:1px solid var(--filo);box-shadow:var(--ombra)}
.btn-filo:hover{filter:none;background:var(--superficie-2)}
.btn-piccolo{width:auto;min-height:32px;padding:0 var(--s3);font-size:var(--t-desc);box-shadow:none}
/* azione rara o distruttiva: solo testo, rosso se toglie qualcosa */
.btn-testo{align-self:flex-start;min-height:var(--tocco);font-size:14px;font-weight:500;color:var(--primary)}
.btn-testo.pericolo{color:var(--guasto)}
.btn-testo[disabled]{color:var(--testo-debole);pointer-events:none}
/* il principale occupa la riga; i secondari (fonte, salva) stanno affiancati sotto */
.azioni{display:flex;flex-wrap:wrap;gap:var(--s2)}
.azioni > *{flex:1 1 100%;margin:0}
.azioni > .btn-filo{flex:1 1 40%}
.azioni > .nota{margin:0 0 var(--s1)}
.azioni:empty{display:none}   /* azioni che arrivano dopo (Notifiche): vuote non aggiungono spazio */
.pulsanti-piccoli{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ════════ CONTROLLO A SEGMENTI (raggio) ════════ */
.segmenti{display:flex;padding:2px;background:var(--superficie-2);border:1px solid var(--filo);border-radius:var(--r-min)}
.segmento{flex:1;min-width:0;height:38px;border-radius:var(--r-tag);font-size:14px;font-weight:500;color:var(--testo-debole)}
.segmento[aria-pressed="true"]{background:var(--superficie);color:var(--testo);outline:1px solid var(--filo);outline-offset:-1px;box-shadow:var(--ombra)}

/* ════════ INTERRUTTORE E CASELLA ════════ */
/* interruttore 40×24: la posizione del pomello dice lo stato, non solo il colore */
.interruttore{position:relative;width:40px;height:24px;border-radius:999px;background:var(--spento);flex:none;
  transition:background .18s var(--moto)}
.interruttore::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--su-primary);
  box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .18s var(--moto)}
.interruttore[aria-checked="true"]{background:var(--primary-forte)}
.interruttore[aria-checked="true"]::after{transform:translateX(16px)}
/* area di tocco di 44 px attorno al pomello */
.interruttore::before{content:'';position:absolute;inset:-10px -2px}
.riga-interruttore{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s4);font-size:var(--t-corpo)}
/* casella 20×20 con la spunta: accesa è piena di petrolio, spenta ha solo il bordo */
.casella{width:20px;height:20px;border-radius:var(--r-tag);flex:none;border:1px solid var(--filo-forte);background:var(--superficie);
  display:grid;place-items:center;color:var(--su-primary)}
.casella svg{width:12px;height:12px;opacity:0}
[aria-pressed="true"] > .casella,.spunta input:checked + .casella{background:var(--primary-forte);border-color:var(--primary-forte)}
[aria-pressed="true"] > .casella svg,.spunta input:checked + .casella svg{opacity:1}
.spunta{display:flex;align-items:flex-start;gap:var(--s3);min-height:var(--tocco);font-size:14px;line-height:1.45;cursor:pointer}
.spunta input{position:absolute;opacity:0;width:20px;height:20px;margin:0}
.spunta .casella{margin-top:1px}
.spunta input:focus-visible + .casella{outline:2px solid var(--primary);outline-offset:2px}

/* ════════ OPZIONI (province, classi) ════════ */
/* nel Profilo l'elenco scorre nel suo riquadro (sotto ci sono le classi); nel primo avvio scorre la pagina */
.largo .opzioni{max-height:min(52vh,440px);overflow:auto}
.opzione{width:100%;min-height:48px;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4);text-align:left}
.opzione:hover{background:var(--superficie-2)}
/* «Metti prima» accanto a una provincia in ritardo: la riga resta il pulsante che la sceglie */
.opzioni .con-prima{display:flex;align-items:center}
.o-prima{flex:none;min-height:48px;padding:0 var(--s4);font-size:var(--t-desc);font-weight:500;color:var(--primary);white-space:nowrap}
.opzione .o-nome{flex:1;min-width:0}
.opzione .o-destra{flex:none;font-size:var(--t-desc);color:var(--testo-debole);text-align:right}
.opzione .o-codice{flex:none;width:44px;font:500 var(--t-desc)/1 var(--mono)}
.opzione .o-materia{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--testo-debole)}
/* classi («Interpelli App» 02): griglia casella 20 · codice 44 · materia, in alto, righe da 20 px */
.opzione.classe{display:grid;grid-template-columns:20px 44px minmax(0,1fr);align-items:start;gap:var(--s3);padding:var(--s3) var(--s4)}
.opzione.classe .o-codice{width:auto;font:500 var(--t-desc)/20px var(--mono)}
.opzione.classe .o-materia{line-height:20px}
.opzione.aggiungi .o-materia{color:var(--primary);font-weight:500}

/* ════════ ELENCO INTERPELLI ════════ */
.filtri{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:14px;line-height:normal;margin:0}
.filtri span{min-width:0;overflow-wrap:anywhere;color:var(--testo-debole)}
.filtri b{font-weight:500;color:var(--testo)}
.filtri a{flex:none;font-weight:500;padding:var(--s3) 0}
.avviso{display:flex;flex-direction:column;gap:6px;padding:14px var(--s4);color:var(--testo);transition:background .15s var(--moto)}
.a-scuola{font-size:var(--t-desc);line-height:normal;color:var(--testo-debole);overflow-wrap:anywhere}
.a-titolo{font-weight:500;line-height:1.35;overflow-wrap:anywhere}
.a-meta{display:flex;flex-wrap:wrap;gap:2px var(--s3);font-size:var(--t-desc);line-height:normal;color:var(--testo-debole)}
.a-meta .urgente{color:var(--guasto);font-weight:500}
/* scaduto: mai confuso con aperto, in grigio e in fondo alla lista */
.a-meta .scaduto,.d-quando.scaduto{color:var(--testo-debole)}
.titolo-scaduti{margin:var(--s4) 0 var(--s2);font-size:var(--t-desc);font-weight:600;color:var(--testo-debole)}
.mostra-scaduti{align-self:center}
.a-meta .pillola{margin-left:auto}
/* avviso nuovo o aggiornato dall'ultima apertura: un pallino petrolio davanti alla scuola */
.a-scuola .pallino{margin-right:6px;vertical-align:1px}
.b-nuovo{background:var(--primary)}
/* testo solo per chi usa uno screen reader */
.solo-lettori{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* piano gratuito: quando l'ha saputo chi ha Avvisi */
.a-saputo{margin:0;font-size:var(--t-nota);color:var(--primary);font-weight:500}
/* voce compatta (ultimi avvisi di una scuola): tag, titolo, giorno */
.avviso.compatto{flex-direction:row;align-items:center;gap:10px;padding:10px var(--s4)}
.avviso.compatto .a-titolo{flex:1;min-width:0;font-size:14px;font-weight:400}
.avviso.compatto .a-giorno{flex:none;font-size:var(--t-desc);color:var(--testo-debole)}
/* la lista riempie lo spazio: lo stato vuoto si centra in verticale */
.lista{flex:1}
.fine{text-align:center;font-size:var(--t-desc);color:var(--testo-debole);padding:var(--s2) 0;margin:0}
/* riquadro petrolio tenue: offerte, piano gratuito, avvisi di sistema non gravi */
.riquadro{background:var(--primary-tenue);border-radius:var(--r-min);padding:var(--s3);font-size:14px;line-height:1.45;
  display:flex;flex-direction:column;gap:var(--s2)}
.riquadro > *{margin:0}
.riquadro b{font-weight:600;color:var(--primary)}
.riquadro .btn{margin-top:var(--s1)}
.riquadro .nota{color:var(--testo)}

/* ════════ BANNER DI STATO ════════ */
.banner{display:flex;gap:var(--s3);align-items:flex-start;border:1px solid color-mix(in srgb,var(--guasto) 35%,var(--filo));
  background:var(--guasto-fondo);border-radius:var(--r-min);padding:var(--s3)}
.banner .b-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.banner .b-titolo{font-size:14px;font-weight:600;color:var(--guasto)}
.banner .b-testo{font-size:var(--t-desc);line-height:1.45;overflow-wrap:anywhere}
.banner .btn{flex:none}
.banner.buono{border-color:color-mix(in srgb,var(--buono) 35%,var(--filo));background:var(--buono-tenue)}
.banner.buono .b-titolo{color:var(--buono)}
/* esito in una riga sola («Interpelli App» 10): la parola in grassetto e colore, poi la spiegazione */
.banner .b-riga{margin:0;font-size:14px;line-height:1.45}
.banner .b-riga b{font-weight:600;color:var(--buono)}

/* ════════ DETTAGLIO (analisi UX §2): titolo, scadenza, azione; il resto in «Dettagli» ════════ */
.d-testa{display:flex;flex-direction:column;gap:6px;min-width:0}
.d-scuola{align-self:flex-start;max-width:100%;font-size:var(--t-desc);line-height:normal;color:var(--testo-debole);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-quando{margin:0;font-size:14px;color:var(--testo-debole)}
.d-quando.urgente{color:var(--guasto);font-weight:500}
/* «Dettagli» e «Affina»: un riquadro che si apre, con la freccia che gira */
.dettagli > .r-corpo{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s4)}
.dettagli > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:48px;padding:0 var(--s4);
  list-style:none;cursor:pointer;background:var(--superficie);border:1px solid var(--filo);border-radius:var(--r);box-shadow:var(--ombra);font-weight:500}
.dettagli > summary::-webkit-details-marker{display:none}
.dettagli > summary:hover{background:var(--superficie-2)}
.dettagli > summary svg{width:16px;height:16px;color:var(--testo-debole);transition:transform .2s var(--moto)}
.dettagli[open] > summary svg{transform:rotate(180deg)}
.dettagli[open]{padding-bottom:var(--s2)}
.r-corpo > *{margin:0}
.d-colonne,.d-colonna{display:flex;flex-direction:column;gap:var(--s4)}
.d-come{padding:var(--s4);gap:10px}
.card.d-come > p{margin:0;font-size:14px;line-height:1.5;color:var(--testo)}
.d-indirizzo{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px var(--s3);border-radius:var(--r-min);background:var(--superficie-2)}
.d-indirizzo > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--t-desc)/1.2 var(--mono)}
.d-indirizzo > a,.d-copia{flex:none;font-size:var(--t-desc);font-weight:500;line-height:normal;color:var(--primary);padding:0}
.d-mappa{height:180px;border:1px solid var(--filo);border-radius:var(--r);overflow:hidden;background:var(--superficie-2)}
.d-altri{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo);border-radius:var(--r);overflow:hidden}
.d-altro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:baseline;padding:10px 14px;background:var(--superficie);color:var(--testo)}
.d-altro-classe{font:500 11px/1 var(--mono);color:var(--testo-debole)}
.d-altro-titolo{font-size:var(--t-desc);line-height:1.35}
.d-altro-quando{font-size:var(--t-nota);color:var(--testo-debole)}
/* «Affina» nel primo avvio e nel Profilo: il riquadro chiuso, dentro la nota e le classi */
.affina > .r-corpo{gap:var(--s3)}

/* offline (14): sopra l'ultima lista ricevuta solo il banner, filtri e tendina senza rete non servono */
#palco.offline > .filtri,#palco.offline > .segmenti,#palco.offline > .campo.scelta{display:none}

/* ════════ STATI VUOTO E CARICAMENTO ════════ */
.vuoto{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s7) var(--s6);text-align:center;margin:0}
.vuoto h2{margin:0;font-size:var(--t-barra);font-weight:600}
.vuoto p{margin:0;color:var(--testo-debole);line-height:1.5;text-wrap:pretty}
.vuoto .btn{width:auto;margin-top:var(--s1)}
.vuoto.piccolo{padding:var(--s4);flex:none}
.vuoto.piccolo p{font-size:var(--t-desc)}
.scheletro{display:flex;flex-direction:column;gap:10px;padding:var(--s4)}
.scheletro i{display:block;height:10px;width:45%;border-radius:var(--r-tag);background:var(--superficie-2)}
.scheletro i:nth-child(2){height:14px;width:85%}
.scheletro i:nth-child(3){width:60%}
.caricamento{display:flex;flex-direction:column;gap:var(--s3)}
.caricamento .blocco{box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  .scheletro i{animation:respira 1.4s ease-in-out infinite alternate}
}
@keyframes respira{to{opacity:.45}}

/* ════════ PRIMO AVVIO: PIEDE FISSO ════════ */
.piede{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--superficie);border-top:1px solid var(--filo);
  padding:var(--s3) max(var(--s4),calc(50% - 304px)) calc(var(--s5) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--s2)}
.piede .piu-tardi{align-self:center;padding:0 var(--s4)}

/* ════════ PRIMO AVVIO IN TRE DOMANDE (analisi UX §1) ════════ */
/* in cima «Indietro» a sinistra e i tre puntini a destra; «Indietro» ha 44 px di tocco senza alzare la riga */
.avvio-testa{display:flex;align-items:center;justify-content:space-between;min-height:20px}
.avvio-testa .btn-testo{min-height:0;padding:var(--s3) var(--s1);margin:calc(var(--s3) * -1) calc(var(--s1) * -1)}
.puntini{display:flex;gap:6px}
.puntini i{width:8px;height:8px;border-radius:50%;background:var(--filo-forte);transition:background .2s var(--moto),width .2s var(--moto)}
.puntini i.acceso{background:var(--primary)}
/* la domanda di adesso è il puntino acceso più a destra: si allunga */
.puntini i.acceso:not(:has(+ .acceso)){width:20px;border-radius:999px}
/* la domanda: grande, bilanciata, con una sola riga sotto */
.avvio-intro{gap:var(--s2);margin-top:var(--s2)}
.avvio-intro h2{font-size:28px;line-height:1.15;letter-spacing:-.01em}
.avvio-intro h2:focus{outline:none}
.avvio-intro p{font-size:16px}
.avvio-province{gap:var(--s3)}
.avvio-province .campo input{height:52px;font-size:16px;border-radius:var(--r)}
/* province come pulsanti: scelte in petrolio con la spunta, proposte bianche con il più */
.scelte-rapide{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip-scelta{display:inline-flex;align-items:center;gap:6px;min-height:var(--tocco);padding:0 var(--s4) 0 var(--s3);border-radius:var(--r-min);
  background:var(--superficie);border:1px solid var(--filo);box-shadow:var(--ombra);font-size:var(--t-corpo);font-weight:500;color:var(--testo)}
.chip-scelta svg{width:16px;height:16px;color:var(--primary)}
.chip-scelta:hover{background:var(--superficie-2)}
.chip-scelta[aria-pressed="true"]{background:var(--primary-forte);border-color:var(--primary-forte);color:var(--su-primary)}
.chip-scelta[aria-pressed="true"] svg{color:var(--su-primary)}
.copertura{display:flex;flex-direction:column;gap:var(--s1)}
.copertura:empty{display:none}
/* i cinque riquadri del grado: due colonne, Sostegno su tutta la riga */
.gradi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.grado{display:flex;align-items:center;gap:var(--s3);min-height:72px;padding:var(--s3) var(--s4);text-align:left;
  background:var(--superficie);border:1px solid var(--filo);border-radius:var(--r);box-shadow:var(--ombra);
  font-size:16px;font-weight:600;line-height:1.25;color:var(--testo);transition:background .15s var(--moto),border-color .15s var(--moto)}
.grado:hover{background:var(--superficie-2)}
.grado[aria-pressed="true"]{background:var(--primary-tenue);border-color:var(--primary)}
.grado:last-child:nth-child(odd){grid-column:1 / -1}
/* anteprima di una notifica (Esempio): come arriva sul telefono */
.anteprima{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);border-radius:var(--r);
  background:var(--superficie);border:1px solid var(--filo);box-shadow:var(--ombra-alta);font-size:14px;line-height:1.4}
.anteprima b{font-weight:600}
.an-testa{display:flex;align-items:center;gap:var(--s2);margin-bottom:6px;font-size:var(--t-nota);color:var(--testo-debole)}
.an-app{flex:1;font-weight:500;letter-spacing:.02em}
.an-icona{width:20px;height:20px;border-radius:var(--r-tag);display:grid;place-items:center;background:var(--primary-forte);color:var(--su-primary)}
.an-icona svg{width:13px;height:13px}
/* fine: la spunta in un cerchio verde e il riepilogo di una riga */
.avvio-fatto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);margin-top:var(--s6)}
.an-fatto{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--buono-tenue);color:var(--buono)}
.an-fatto svg{width:28px;height:28px}

/* ════════ SCUOLE ════════ */
.tabella-scuole .t-testa,.tabella-scuole .t-riga{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:var(--s2);align-items:center}
.tabella-scuole .t-testa{background:var(--superficie-2);padding:var(--s2) var(--s4);font-size:var(--t-nota);font-weight:500;line-height:normal;color:var(--testo-debole)}
.tabella-scuole .t-testa span + span{text-align:center}
.tabella-scuole .t-riga{padding:10px var(--s4)}
.tabella-scuole .t-riga > a{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--testo)}
.tabella-scuole .t-nome{font-weight:500;line-height:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabella-scuole .t-dove{font-size:var(--t-desc);line-height:normal;color:var(--testo-debole);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.tabella-scuole .t-riga > .interruttore{justify-self:center}
.tabella-scuole .spenta .t-nome{color:var(--testo-debole)}
/* scuola salvata nei preferiti: la stessa riga, senza interruttori */
.scuola-voce{display:flex;flex-direction:column;gap:2px;padding:10px var(--s4);color:var(--testo)}
.scuola-voce b{font-weight:500}
/* pagina scuola: mappa da bordo a bordo sotto la barra */
#palco > .mappa-box{margin:calc(var(--s5) * -1) calc(var(--s4) * -1) 0;height:168px;background:var(--superficie-2);border-bottom:1px solid var(--filo)}
.mappa{display:block;width:100%;height:100%;border:0}
.scheda-scuola{display:flex;flex-direction:column;gap:2px}
.scheda-scuola > *{margin:0;line-height:normal}
.plesso{width:100%;display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:10px var(--s4);text-align:left}
.plesso:hover{background:var(--superficie-2)}
.plesso .p-nome{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;overflow-wrap:anywhere;line-height:normal}
.plesso .sotto{margin:0;line-height:normal}
.plesso .p-nome b{font-weight:500}
.plesso[aria-pressed="true"] b{color:var(--primary)}

/* ════════ PIANO ════════ */
.sezione.stretta{gap:6px}
.separato{border-top:1px solid var(--filo);padding-top:var(--s5);display:flex;flex-direction:column;gap:6px}
/* Account: tre righe (piano, notifiche, profilo) con una sola azione a destra; il resto in «Dettagli» */
.account{display:flex;flex-direction:column;gap:var(--s4)}
.riga-account{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:60px;padding:var(--s3) var(--s4)}
.ra-testo{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--t-corpo);line-height:1.35}
.ra-testo b{font-weight:600}
.ra-testo .sotto{overflow-wrap:anywhere}
.ra-azione{flex:none;font-size:14px;font-weight:500;padding:var(--s3) 0}
.account .dettagli .separato{border-top:0;padding-top:0}
/* pagamento (#/abbonati): tre punti, prezzo in una riga, un solo pulsante */
.punti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);font-size:var(--t-corpo)}
.punti li{display:flex;align-items:center;gap:var(--s3)}
.punti svg{flex:none;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--buono-tenue);color:var(--buono)}
.prezzo-riga{margin:0;font-size:var(--t-corpo);font-weight:600}
/* quante province pagare (#/abbonati, #/province): − numero + su una riga */
.passo-riga{display:flex;align-items:center;gap:var(--s3)}
.passo{min-width:var(--tocco);min-height:var(--tocco);font-size:20px;line-height:1}
.passo-n{min-width:7em;text-align:center;font-size:var(--t-corpo);font-weight:600}
/* il modulo di Stripe (Embedded Checkout) nel suo iframe; vuoto finché non si monta */
.pagamento-stripe:empty{display:none}
.btn-testo.centro{align-self:center}
/* l'invito a pagare si riempie quando il piano è noto: vuoto non occupa spazio */
.invito:empty{display:none}
.separato .etichetta{margin:0;line-height:normal}
.codice-riga{display:flex;align-items:center;gap:var(--s2)}
.codice{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;padding:var(--s1) var(--s2);
  border-radius:var(--r-min);background:var(--superficie-2);border:1px solid var(--filo);
  font:500 18px/1.2 var(--mono);letter-spacing:.06em;overflow-wrap:anywhere;text-align:center;user-select:all}
.codice-riga .btn{width:auto;min-height:48px;flex:none;padding:0 var(--s4)}

/* ════════ PASSI NUMERATI («Interpelli App» 15) ════════ */
#palco.installa{padding-top:var(--s6);gap:var(--s5)}
.installa .intro{gap:var(--s2)}
.passi b{font-weight:600}
/* passi numerati in cerchi petrolio tenue, una riga per passo */
.passi{counter-reset:passo}
.passi li{display:flex;gap:var(--s3);align-items:flex-start;padding:14px var(--s4);counter-increment:passo;line-height:1.45}
.passi li::before{content:counter(passo);flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--primary-tenue);color:var(--primary);font-size:var(--t-desc);font-weight:600;display:grid;place-items:center}

/* ════════ TABLET E DESKTOP («Interpelli App Desktop», 28/09/2026) ════════ */
/* Da 640 px: niente schede in basso, a sinistra la barra (a icone fino a 1023, laterale da 1024); la
   finestra non scorre più, scorrono il palco o le colonne. Sotto i 640 px nulla di qui vale. */
@media (min-width:640px){
  body{display:grid;grid-template-columns:var(--binario) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
    height:100vh;height:100svh;overflow:hidden}
  .schede{display:none}

  /* barra a icone: marchio, tre voci con icona e parola, Account in fondo */
  .lato{grid-column:1;grid-row:1 / -1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-height:0;overflow:auto;
    padding:max(var(--s4),env(safe-area-inset-top)) 0 max(var(--s4),env(safe-area-inset-bottom));background:var(--superficie);border-right:1px solid var(--filo)}
  /* a icone il logo è solo il simbolo */
  .lato-marchio{margin-bottom:var(--s3)}
  .lato .marchio{width:36px;height:36px}
  .lato .marchio svg{width:22px;height:22px}
  .lato .l-nome{display:none}
  .lato-voci{display:flex;flex-direction:column;gap:var(--s2)}
  .lato-voci a{width:56px;height:52px;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--testo-debole);font-size:10px;font-weight:500}
  .l-voce{display:flex;flex-direction:column;align-items:center;gap:3px}
  .lato svg{width:18px;height:18px}
  .lato-voci a[aria-current]{color:var(--primary);background:var(--primary-tenue)}
  .l-conto,.lato-offerta{display:none}

  /* barra alta della colonna: titolo e sottotitolo a sinistra, strumenti della vista a destra */
  .barra{grid-column:2;grid-row:1;position:relative;gap:var(--s4);height:calc(var(--alto) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--s4) 0 var(--s6)}
  .barra:has(#indietro:not([hidden])){padding-left:var(--s3)}
  .testata{display:flex;flex-direction:column;gap:2px;padding:0}
  .barra h1{font-size:18px}
  .sottotitolo{display:block;margin:0;font-size:var(--t-nota);line-height:normal;color:var(--testo-debole);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sottotitolo a{color:inherit}
  .strumenti{display:flex;align-items:center;gap:var(--s3);flex:none}
  .strumenti:empty{display:none}
  .strumenti .campo.cerca{width:clamp(160px,24vw,320px)}
  .strumenti .campo.cerca:has(#cerca-scuole){flex:none;width:260px}   /* D2 */
  .strumenti .campo input{height:36px;background:var(--fondo);font-size:14px}
  .strumenti .campo.cerca svg{width:15px;height:15px;left:10px}
  .strumenti .campo.cerca input{padding-left:33px;padding-right:34px}
  .tasto{position:absolute;right:10px;height:20px;padding:0 6px;border-radius:var(--r-tag);border:1px solid var(--filo);color:var(--testo-debole);
    font:500 11px/18px var(--mono);pointer-events:none}
  .strumenti .pulsanti-piccoli{flex-wrap:nowrap}
  .strumenti .btn-piccolo{min-height:36px;padding:0 var(--s3);font-size:var(--t-desc);white-space:nowrap}
  .senza-barra .barra{display:none}
  .senza-barra #palco{grid-row:1 / -1}

  /* palco: scorre da sé; le pagine di lettura e Account in una colonna centrata (D3: 820 con 40 di margine) */
  #palco,.senza-schede #palco{grid-column:2;grid-row:2;max-width:none;width:100%;margin:0;min-height:0;overflow:auto;
    padding:var(--s6) var(--s6) max(var(--s7),env(safe-area-inset-bottom))}
  #palco.largo,.senza-schede #palco.largo{padding:40px max(var(--s6),calc((100% - var(--pagina-larga)) / 2)) max(40px,env(safe-area-inset-bottom));gap:var(--s6)}
  /* il palco ha l'altezza della finestra e scorre: i blocchi non si schiacciano per starci */
  #palco > *{flex-shrink:0}
  #palco.largo > .mappa-box{margin:0;height:240px;border:1px solid var(--filo);border-radius:var(--r);overflow:hidden}

  /* primo avvio: la colonna del telefono al centro, senza barra laterale */
  body.primo-avvio{grid-template-columns:minmax(0,1fr)}
  .primo-avvio .lato{display:none}
  .primo-avvio .barra,.primo-avvio #palco{grid-column:1}
  .primo-avvio .barra{padding-inline:max(var(--s4),calc((100% - 608px) / 2))}
  .primo-avvio #palco{padding:var(--s7) max(var(--s4),calc((100% - 608px) / 2)) calc(var(--s7) * 4 + env(safe-area-inset-bottom))}

  /* ── Interpelli: lista e dettaglio affiancati (T1: barra a icone, lista 340, dettaglio) ── */
  /* il palco si scioglie nella griglia della pagina: barra e filtri sopra la lista, il dettaglio accanto */
  /* a 640 px la lista cede spazio al dettaglio (42% della finestra), da 810 in su è di 340 come in T1 */
  body.diviso{grid-template-columns:var(--binario) min(var(--lista-t),42vw) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .diviso #palco{display:contents}
  .diviso #apri-menu{display:none}
  .diviso .barra{height:auto;flex-wrap:wrap;align-items:center;gap:10px;padding:calc(20px + env(safe-area-inset-top)) var(--s4) 10px;
    border-bottom:0;border-right:1px solid var(--filo)}
  .diviso .testata{flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--s3)}
  .diviso .barra h1{font-size:var(--t-h2)}
  .diviso .sottotitolo{font-size:var(--t-desc);font-weight:500}
  .diviso .sottotitolo a{color:var(--primary)}
  .diviso .strumenti{flex:1 1 100%}
  .diviso .strumenti .campo.cerca{width:100%}
  .diviso .strumenti .campo input{height:40px}
  .d-filtri{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:10px;padding:0 var(--s4) var(--s3);
    background:var(--superficie);border-bottom:1px solid var(--filo);border-right:1px solid var(--filo)}
  .d-filtri .segmento{height:32px;font-size:var(--t-desc)}
  .d-filtri .campo.scelta select{height:36px;font-size:14px}
  .d-classi,.d-conto{display:none}
  .d-lista{grid-column:2;grid-row:3;min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--superficie);border-right:1px solid var(--filo)}
  .d-lista .lista{flex:1;gap:0}
  .d-lista > .nota{padding:var(--s3) var(--s4) 0}
  .d-lista .riquadro{margin:var(--s3) var(--s4)}
  .d-lista .lista > .btn{width:auto;margin:var(--s3) var(--s4)}
  .d-lista .fine{padding:var(--s3)}
  .d-lista .titolo-scaduti{padding:0 var(--s4)}
  .d-gruppo{padding:10px var(--s4) 6px;font-size:var(--t-nota);font-weight:600;color:var(--testo-debole);background:var(--fondo);border-bottom:1px solid var(--filo)}
  .riga-larga{gap:5px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--filo);background:var(--superficie)}
  .riga-larga[aria-current="true"]{background:var(--primary-tenue);box-shadow:inset 0 0 0 1px var(--primary)}
  .riga-larga .a-testa{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-nota);color:var(--testo-debole)}
  .riga-larga .a-scuola{font-size:var(--t-nota);min-width:0}
  .riga-larga .a-ora{display:none;white-space:nowrap}
  .riga-larga .a-titolo{font-size:14px;font-weight:500;line-height:1.35}
  .riga-larga .a-meta{font-size:var(--t-nota)}
  .riga-larga .pillola{height:20px;font-size:11px}
  .d-tasti{display:none}

  /* il dettaglio si dispone secondo la SUA larghezza (@container sotto): stretto come T1, largo come D1 */
  .d-dettaglio{container:dettaglio / inline-size;grid-column:3;grid-row:1 / -1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:18px;
    padding:calc(var(--s6) + env(safe-area-inset-top)) var(--s6) max(var(--s6),env(safe-area-inset-bottom))}
  .d-dettaglio > *{margin:0;flex:none}
  .d-dettaglio > .vuoto{flex:1}
  /* T1: una colonna con 18 px fra scuola, titolo, pillole, dati e pulsanti; D1 (sotto, @container) la stringe */
  .d-testa .titolo-vista{font-size:21px}
  /* tablet (T1): «Candidati ora» su tutta la riga, «Apri la fonte» e «Salva» affiancati sotto, a parole */
  .d-azioni{gap:18px var(--s2)}
  .d-azioni .salva svg{display:none}
  .d-azioni .salva[aria-pressed="true"]{color:var(--primary)}
  .kv .riga{gap:var(--s3);padding:11px 14px;font-size:14px}
  .kv .v{overflow-wrap:break-word}   /* una data va a capo allo spazio, non a metà */
  .d-dettaglio .voce{min-height:44px;padding:0 14px;font-size:14px}
  .d-dettaglio .voce > a{display:block;min-height:0;line-height:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d-dettaglio .voce > .nota{font-size:var(--t-nota)}

  /* ── Scuole (D2): tabella a colonne, da 1024 la scheda della scuola scelta accanto ── */
  #palco.pieno{padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0}
  #palco.pieno > .segmenti{margin:var(--s3) var(--s6)}
  .s-diviso{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
  .s-tabella{min-height:0;overflow:auto;background:var(--superficie);display:flex;flex-direction:column}
  .s-tabella > .nota{padding:var(--s4) var(--s6) max(var(--s4),env(safe-area-inset-bottom))}
  .s-tabella > .vuoto{flex:1}
  .s-griglia{--colonne:minmax(0,1fr) 150px 70px 80px}
  .s-griglia.con-km{--colonne:minmax(0,1fr) 150px 80px 70px 80px}
  .s-testa,.s-riga{display:grid;grid-template-columns:var(--colonne);gap:var(--s3);align-items:center;padding:0 var(--s6)}
  .s-testa{position:sticky;top:0;z-index:1;padding-block:10px;font-size:var(--t-nota);font-weight:600;line-height:normal;color:var(--testo-debole);background:var(--fondo);border-bottom:1px solid var(--filo)}
  .s-testa .num{font-size:inherit}
  .s-riga{min-height:52px;border-bottom:1px solid var(--filo);background:var(--superficie)}
  .s-riga.scelta{background:var(--primary-tenue);box-shadow:inset 0 0 0 1px var(--primary)}
  .s-nome{min-width:0;text-align:left;font-size:14px;font-weight:500;color:var(--testo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  button.s-nome{align-self:stretch}
  .spenta .s-nome{color:var(--testo-debole)}
  .s-comune{min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;font-size:var(--t-desc);color:var(--testo-debole)}
  .s-comune > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .num{text-align:right;font-size:var(--t-desc)}
  .num.debole{color:var(--testo-debole)}
  .num.forte{font-weight:500}
  .s-testa .centro,.s-riga .centro{display:grid;place-items:center;text-align:center}
  /* interruttore della tabella: 36×22 come in D2 */
  .s-riga .interruttore{width:36px;height:22px}
  .s-riga .interruttore::after{width:18px;height:18px}
  .s-riga .interruttore[aria-checked="true"]::after{transform:translateX(14px)}
  .s-scheda{min-height:0;overflow:auto;display:flex;flex-direction:column;background:var(--superficie);border-left:1px solid var(--filo)}
  .s-mappa{height:260px;flex:none;background:var(--superficie-2);border-bottom:1px solid var(--filo)}
  .s-corpo{flex:1;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
  .s-titolo{display:flex;flex-direction:column;gap:2px}
  .s-titolo h2{margin:0;font-size:16px;font-weight:600;line-height:1.3}
  .s-titolo .sotto{margin:0}
  .s-recenti{display:flex;flex-direction:column;gap:6px;font-size:var(--t-desc)}
  .s-avviso{display:flex;justify-content:space-between;gap:var(--s3);color:var(--testo)}
  .s-avviso > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .s-avviso .debole{flex:none;color:var(--testo-debole)}
  .s-azioni{display:flex;gap:var(--s2);margin-top:auto}
  .s-azioni .btn{flex:1;min-height:36px;font-size:var(--t-desc)}

  /* ── Account (D3): Notifiche, Profilo e Dispositivi affiancati, Piano ── */
  .testa-account{gap:var(--s1)}
  .testa-account h2,.testa-account p{line-height:normal}
  .testa-account p{font-size:14px}
}

/* da 1024 px: barra laterale di 248 con conteggi, account, offerta e profilo; lista di 440 */
@media (min-width:1024px){
  body{grid-template-columns:var(--lato) minmax(0,1fr)}
  .lato{align-items:stretch;gap:var(--s5);padding:var(--s4) var(--s3)}
  .lato-marchio{margin:0;padding:0 var(--s2)}
  .lato .marchio{width:30px;height:30px}
  .lato .marchio svg{width:18px;height:18px}
  .lato .l-nome{display:inline}
  .lato-voci{gap:2px}
  .lato-voci a{width:auto;height:36px;flex-direction:row;justify-content:space-between;padding:0 10px;border-radius:var(--r-min);font-size:14px}
  .l-voce{flex-direction:row;gap:10px}
  .lato-voci a[aria-current]{color:var(--testo);background:var(--superficie-2)}
  .l-conto{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-tag);
    font-size:var(--t-nota);font-weight:500;background:var(--superficie-2);color:var(--testo-debole)}
  .l-conto:empty{display:none}
  .lato-voci a[aria-current] .l-conto{background:var(--primary-forte);color:var(--su-primary)}
  /* il riquadro di Avvisi, solo per chi è Gratis, in fondo alla barra */
  .lato-offerta{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding:14px;border:1px solid var(--filo);border-radius:var(--r);background:var(--primary-tenue)}
  .lato-offerta b{font-size:14px;font-weight:600;line-height:normal;color:var(--primary)}
  .lato-offerta p{margin:0;font-size:var(--t-desc);line-height:1.45}
  .lato-offerta .btn{width:100%}
  /* le pagine del sito e il menù ☰ restano nella barra alta, anche con la lista affiancata */
  .diviso #apri-menu{display:grid}
  .barra{padding-right:var(--s6)}

  /* D1: barra e filtri su lista e dettaglio, lista di 440 */
  body.diviso{grid-template-columns:var(--lato) var(--lista-d) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .diviso .barra{grid-column:2 / -1;flex-wrap:nowrap;align-items:center;gap:var(--s4);height:calc(var(--alto) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) var(--s6) 0;border-right:0;border-bottom:1px solid var(--filo)}
  .diviso .testata{flex:1;flex-direction:column;align-items:stretch;gap:2px}
  .diviso .barra h1{font-size:18px}
  .diviso .sottotitolo{font-size:var(--t-nota);font-weight:400}
  .diviso .sottotitolo a{color:inherit}
  .diviso .strumenti{flex:none}
  .diviso .strumenti .campo.cerca{width:320px}
  .diviso .strumenti .campo input{height:36px}
  .d-filtri{grid-column:2 / -1;flex-direction:row;align-items:center;gap:var(--s3);padding:var(--s3) var(--s6);border-right:0}
  .d-filtri .segmenti{width:300px;flex:none}
  .d-filtri .segmento{height:30px}
  .d-filtri .campo.scelta{flex:none;width:auto}
  .d-filtri .campo.scelta select{height:34px;padding:0 32px 0 10px;font-size:var(--t-desc)}
  .d-filtri .campo.scelta svg{width:14px;height:14px;right:10px}
  .d-classi{display:flex;flex-wrap:wrap;gap:6px}
  .chip{display:inline-flex;align-items:center;gap:var(--s1);height:30px;padding:0 10px;border-radius:var(--r-tag);background:var(--primary-tenue);color:var(--primary);font:500 var(--t-nota)/1 var(--mono)}
  .d-conto{display:block;margin-left:auto;font-size:var(--t-desc);color:var(--testo-debole);white-space:nowrap}
  .d-lista{grid-row:3}
  .d-gruppo{padding-inline:var(--s5)}
  .riga-larga{padding:var(--s3) var(--s5)}
  .riga-larga .a-ora{display:inline}
  .d-tasti{display:flex;gap:var(--s4);position:sticky;bottom:0;margin:auto 0 0;padding:10px var(--s5);font-size:var(--t-nota);
    color:var(--testo-debole);background:var(--fondo);border-top:1px solid var(--filo)}
  .d-dettaglio{grid-row:3;padding:var(--s6) var(--s7) max(var(--s6),env(safe-area-inset-bottom))}
  .d-testa .titolo-vista{font-size:22px;letter-spacing:-.01em}
  /* D2: la scheda della scuola scelta accanto alla tabella */
  .s-diviso:has(> .s-scheda:not([hidden])){grid-template-columns:minmax(0,1fr) 360px}
}


/* dettaglio affiancato largo almeno 500 px (D1 a 1280: 528): azioni in riga con la stella, dati in tre
   colonne, candidatura e allegati accanto a «Dove». Più stretto (tablet, desktop a 1024) resta come T1. */
@container dettaglio (min-width:500px){
  /* azioni in riga da 40, «Salva» è la stella quadrata */
  .d-testa{gap:var(--s2)}
  .d-azioni{flex-wrap:nowrap;margin-top:-4px}
  .d-azioni > *,.d-azioni > .btn-filo{flex:none;width:auto;min-height:40px;padding:0 var(--s4);font-size:14px;white-space:nowrap}
  .d-azioni > .btn-filo{padding:0 14px}
  .d-azioni > .salva{width:40px;padding:0}
  .d-azioni .salva svg{display:block;width:18px;height:18px}
  .d-azioni .salva[aria-pressed="true"] svg{fill:currentColor}
  .d-azioni .salva .b-parola{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* dati in tre colonne: etichetta piccola sopra, valore sotto; l'ultima cella riempie la riga */
  .kv{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kv .riga{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--s1);padding:14px var(--s4)}
  .kv .riga{line-height:normal}
  .kv .k{font-size:var(--t-nota)}
  .kv .v{text-align:left;font-size:var(--t-corpo);font-weight:500}
  .kv .v.urgente{font-weight:600}
  .kv .v.mono{font:500 var(--t-corpo)/normal var(--mono)}
  .kv > :last-child:nth-child(3n+1){grid-column:span 3}
  .kv > :last-child:nth-child(3n+2){grid-column:span 2}
  .d-colonne{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);align-items:start}
  .d-colonne > :only-child{grid-column:1 / -1}
  .d-dettaglio .voce{padding:0 var(--s4)}
  .d-mappa{height:110px}
  .d-altri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-altri > :last-child:nth-child(odd){grid-column:span 2}
}

/* oltre 1440 px il contenuto resta centrato */
@media (min-width:1440px){
  html{background:var(--superficie-2)}
  body{max-width:1440px;margin:0 auto;border-inline:1px solid var(--filo)}
}

@media (prefers-reduced-motion:reduce){
  .barra.occupata::after,.menu,.velo-menu{animation:none}
  .avviso,.btn,.interruttore,.interruttore::after,.campo input,.campo select{transition:none}
}