/* Openday Scuole · test di orientamento per ragazzi e genitori.
   La carta a quadretti con i colori del kit approvato: forest, bosco, salvia, menta, avorio.
   Colori e misure vengono da brand/tokens.css. Testo a 18-20 px, un'azione chiara per schermata,
   bersagli da toccare di almeno 48 px, movimento solo se chi legge non ha chiesto di ridurlo. */
@import url("/brand/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
	margin: 0; min-height: 100vh; background-color: var(--carta); color: var(--inchiostro);
	font-family: var(--f-testo); font-size: var(--t-corpo); line-height: var(--interlinea);
	-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
	background-image: linear-gradient(var(--quad) 1px, transparent 1px), linear-gradient(90deg, var(--quad) 1px, transparent 1px);
	background-size: 28px 28px;
}
h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul, ol { padding-left: 1.2em; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blu); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { color: var(--blu-scuro); text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--giallo); color: var(--su-giallo); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -80px; background: var(--inchiostro); color: var(--carta); padding: 12px 16px; z-index: 20; font-weight: 700; border-radius: 8px; }
.salta:focus { top: 12px; color: var(--carta); }
.no-js .solo-js { display: none !important; }
.solo-stampa { display: none; }

/* Pagina e margine rosso del quaderno */
.contenitore { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--margine-pagina); }
.largo { max-width: 60rem; }
main { position: relative; padding-bottom: 40px; }
main::before {
	content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--margine); pointer-events: none;
	left: max(6px, calc(50% - 30rem - 8px));
}
@media (max-width: 62rem) { main::before { left: 6px; } }

/* Testata e piede */
.testata { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-block: 14px; }
.logo { display: inline-flex; align-items: center; min-height: 48px; }
.logo img { width: 210px; height: auto; }
@media (max-width: 420px) { .logo img { width: 172px; } }
.testata nav { display: flex; gap: 4px 18px; flex-wrap: wrap; font-weight: 700; }
.testata nav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--inchiostro); }
.testata nav a:hover { color: var(--blu); text-decoration: underline; }
.piede { border-top: 2px solid var(--linea); background: var(--carta); padding-block: 28px 40px; color: var(--inchiostro-2); }
.piede > * + * { margin-top: 14px; }
.piede a { color: var(--blu); }

/* Tipografia */
.titolo-pagina { font-size: var(--t-grande); line-height: 1.12; letter-spacing: -.012em; font-weight: 800; text-wrap: balance; max-width: 20ch; }
.titolo-sezione { font-size: var(--t-medio); line-height: 1.25; font-weight: 800; text-wrap: balance; }
.attacco { font-size: var(--t-medio); line-height: 1.4; max-width: 34ch; }
.tenue { color: var(--inchiostro-2); }
.piccolo { font-size: var(--t-piccolo); }
.pila > * + * { margin-top: 18px; }
.pila-stretta > * + * { margin-top: 10px; }
.testo { max-width: var(--misura); }
.sottolinea-rosso { text-decoration-line: underline; text-decoration-color: var(--accento); text-decoration-thickness: .08em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
.evidenzia { background: var(--giallo); color: var(--su-giallo); padding: .02em .22em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Pulsanti */
.bottone {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 10px 22px;
	border: 2px solid var(--blu); border-radius: var(--raggio); background: var(--blu); color: var(--su-blu);
	font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
}
.bottone:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: var(--su-blu); }
.bottone.secondario { background: transparent; color: var(--blu); }
.bottone.secondario:hover { background: var(--blu-tenue); color: var(--blu-scuro); }
.bottone.pieno { width: 100%; }
.bottone svg { width: 22px; height: 22px; flex: none; }
.bottone-testo {
	display: inline-flex; align-items: center; min-height: 48px; padding: 6px 4px; border: 0; background: none; cursor: pointer;
	color: var(--blu); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em;
}
.bottone-testo.tenue { color: var(--inchiostro-2); }
.riga-bottoni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Riquadri */
.foglio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio); padding: clamp(18px, 4vw, 28px); }
.informativa { background: var(--superficie); border-left: 5px solid var(--blu); border-radius: 0 var(--raggio) var(--raggio) 0; padding: 14px 18px; max-width: var(--misura); }
.avviso { background: var(--giallo-tenue); border-radius: var(--raggio); padding: 14px 18px; color: var(--inchiostro); }
.avviso-rosso { border-left: 5px solid var(--rosso); background: var(--superficie); padding: 14px 18px; border-radius: 0 var(--raggio) var(--raggio) 0; }
.nojs { margin-top: 24px; }
.tre-cose { list-style: none; padding: 0; display: grid; gap: 10px; }
.tre-cose li { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--accento); border-radius: 12px; padding: 12px 16px; max-width: 60ch; }
.tre-cose strong { display: block; }
.cosa-ottieni { list-style: none; padding: 0; display: grid; gap: 12px; }
.cosa-ottieni li { display: flex; gap: 14px; align-items: flex-start; }
.cosa-ottieni svg { width: 30px; height: 30px; flex: none; color: var(--blu); margin-top: 2px; }

/* Schermata iniziale */
.inizio { padding-top: clamp(20px, 5vw, 48px); }

/* Stato del gioco: livello, punti, timbri */
.stato-gioco { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; padding-block: 8px 4px; font-weight: 700; font-size: 1rem; }
.stato-gioco .livello { display: inline-flex; align-items: center; gap: 8px; }
.stato-gioco svg { width: 22px; height: 22px; color: var(--blu); }
.gettone { display: inline-flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: 4px 12px; }

/* Avanzamento a tappe */
.avanzamento { margin-top: 10px; }
.avanzamento-testo { font-weight: 700; color: var(--inchiostro-2); font-size: 1.0625rem; }
.tappe { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin-top: 8px; }
.tappa { display: grid; gap: 6px; }
.tappa .barra { position: relative; height: 12px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea); overflow: hidden; }
.tappa .barra span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--blu); border-radius: 999px; }
.tappa .etichetta { display: flex; gap: 6px; align-items: center; font-size: 1rem; line-height: 1.25; color: var(--inchiostro-2); }
.tappa .etichetta svg { width: 20px; height: 20px; flex: none; }
.tappa.attuale .etichetta { color: var(--inchiostro); font-weight: 700; }
.tappa.fatta .etichetta svg { color: var(--blu); }
@media (max-width: 40rem) { .tappe:not(.poche) .nome-tappa { display: none; } .tappe:not(.poche) .etichetta { justify-content: center; } }

/* Domanda e risposte */
.domanda { margin-top: 22px; }
.domanda-titolo { font-size: var(--t-medio); line-height: 1.25; font-weight: 800; text-wrap: balance; }
.domanda .aiuto { margin-top: 8px; color: var(--inchiostro-2); max-width: var(--misura); }
.risposte { display: grid; gap: 10px; margin-top: 18px; }
.risposta {
	position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 16px;
	background: var(--superficie); border: 2px solid var(--linea); border-radius: var(--raggio); cursor: pointer;
}
.risposta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.risposta .segno { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--inchiostro-2); display: grid; place-items: center; background: var(--superficie); }
.risposta .segno svg { width: 18px; height: 18px; color: var(--su-blu); opacity: 0; }
.risposta:hover { border-color: var(--blu); }
.risposta:focus-within { outline: 3px solid var(--fuoco); outline-offset: 2px; }
.risposta.scelta { border-color: var(--blu); background: var(--blu-tenue); box-shadow: inset 0 0 0 1px var(--blu); }
.risposta.scelta .segno { background: var(--blu); border-color: var(--blu); }
.risposta.scelta .segno svg { opacity: 1; }

/* Barra delle azioni: resta in basso sul telefono */
.barra-azioni {
	position: sticky; bottom: 0; z-index: 5; margin-top: 22px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
	background: var(--carta); border-top: 2px solid var(--linea);
}
.riscontro { min-height: 1.6em; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font-weight: 700; }
.riscontro:empty { display: none; }
.punti-guadagnati { display: inline-flex; align-items: center; gap: 4px; background: var(--giallo); color: var(--su-giallo); border-radius: 999px; padding: 2px 10px; font-weight: 800; }
.riscontro .avviso-testo { color: var(--rosso); }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.azioni .destra { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-left: auto; }
@media (max-width: 26rem) { .azioni .bottone { padding-inline: 16px; } }

/* Fine tappa */
.fine-tappa { text-align: center; padding-top: clamp(28px, 7vw, 64px); }
.fine-tappa .timbro-grande { margin: 0 auto 18px; }
.fine-tappa p { margin-inline: auto; max-width: 34ch; }

/* Timbri (badge) */
.timbro { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--blu-tenue); color: var(--blu); border: 3px solid var(--blu); flex: none; }
.timbro svg { width: 34px; height: 34px; }
.timbro-grande { width: 112px; height: 112px; border-width: 4px; }
.timbro-grande svg { width: 60px; height: 60px; }
.timbro.spento { background: transparent; color: var(--inchiostro-2); border: 3px dashed var(--inchiostro-2); }
.griglia-timbri { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 8px; }
.griglia-timbri li { display: grid; justify-items: center; text-align: center; gap: 6px; font-size: 1rem; line-height: 1.3; }
.griglia-timbri .nome-timbro { font-weight: 700; }

/* Risultato */
.risultato > section { margin-top: clamp(36px, 7vw, 56px); }
.risultato h2 { font-size: var(--t-medio); line-height: 1.25; font-weight: 800; text-wrap: balance; }
.indice-risultato { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 18px; }
.indice-risultato a { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linea); text-decoration: none; font-weight: 700; }
.profilo { position: relative; }
.profilo .etichetta-profilo { color: var(--inchiostro-2); font-weight: 700; }
.profilo .nome-profilo { font-size: var(--t-grande); line-height: 1.15; font-weight: 800; margin-top: 6px; }
.profilo .lato { font-size: var(--t-medio); line-height: 1.3; margin-top: 6px; }
.punti-forti { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.punti-forti li { background: var(--blu-tenue); color: var(--inchiostro); border-radius: 999px; padding: 4px 14px; font-weight: 700; }
/* Il superpotere e i punti forti con le prove: prima quello che il ragazzo sa fare, poi le scuole */
.superpotere { border-left: 4px solid var(--accento); padding-left: 14px; }
.testo-superpotere { font-size: var(--t-medio); line-height: 1.35; font-weight: 700; max-width: 40ch; }
.prove { list-style: none; padding: 0; display: grid; gap: 10px; }
.prove li { background: var(--blu-tenue); border-radius: 12px; padding: 10px 14px; max-width: 60ch; }
.talenti { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.talenti li { background: var(--superficie); border: 1px solid var(--linea); border-radius: 999px; padding: 6px 14px; font-weight: 700; }
.prossimo-passo h3, .sorpresa h3 { font-size: 1.0625em; font-weight: 800; }
.prossimo-passo h3 + p { margin-top: 2px; }
.prossimo-passo p + h3 { margin-top: 12px; }
.sorpresa h3 { font-size: var(--t-medio); line-height: 1.25; }
.senza-etichette { font-weight: 700; border-left: 4px solid var(--blu); padding-left: 14px; max-width: 60ch; }
.ricorda { background: var(--verde-tenue); border-color: transparent; font-size: var(--t-medio); line-height: 1.4; }
/* A fine tappa: cosa emerge finora e una curiosità */
.finora { margin-inline: auto; max-width: 30rem; }
.nome-finora { font-size: var(--t-medio); font-weight: 800; }
.lo-sapevi { background: var(--giallo-tenue); border-radius: 12px; padding: 10px 14px; }
.riepilogo-gioco { display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 700; }
.lista-indirizzi { list-style: none; padding: 0; display: grid; gap: 18px; margin-top: 18px; counter-reset: indirizzo; }
.indirizzo { counter-increment: indirizzo; }
.indirizzo h3 { font-size: var(--t-medio); line-height: 1.25; font-weight: 800; display: flex; gap: 12px; align-items: baseline; }
.indirizzo h3::before { content: counter(indirizzo); flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--giallo); color: var(--su-giallo); font-size: 1.25rem; transform: translateY(-2px); }
.tipo-scuola { display: inline-block; font-size: 1rem; font-weight: 700; color: var(--inchiostro-2); border: 1px solid var(--linea); border-radius: 999px; padding: 2px 12px; }
.perche { border-left: 4px solid var(--giallo); padding-left: 14px; }
.indirizzo h4 { font-size: 1.0625em; font-weight: 800; margin-top: 18px; }
.tabella-ore { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabella-ore caption { text-align: left; color: var(--inchiostro-2); padding-bottom: 6px; }
.tabella-ore th, .tabella-ore td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella-ore thead th { font-size: 1rem; color: var(--inchiostro-2); }
.tabella-ore td.ore, .tabella-ore th.ore { text-align: right; white-space: nowrap; width: 4.5em; }
.lista-dopo { margin-top: 8px; }
.lista-dopo li + li { margin-top: 6px; }
.nota-fonte { margin-top: 10px; color: var(--inchiostro-2); }
.link-azione { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }
details.foglio > summary, details.altro > summary { cursor: pointer; font-weight: 700; min-height: 48px; display: flex; align-items: center; }
details > summary { color: var(--blu); }

/* Comune */
.scegli-comune label { font-weight: 800; display: block; }
.campo-riga { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.campo { flex: 1 1 14rem; min-height: 56px; padding: 10px 16px; border: 2px solid var(--inchiostro-2); border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro); }
.campo:focus { border-color: var(--blu); }
.campo::placeholder { color: var(--inchiostro-2); opacity: 1; }
.lista-link { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 8px; }
.lista-link a { display: flex; align-items: center; min-height: 48px; padding: 6px 0; font-weight: 700; }
.blocco-comune + .blocco-comune { margin-top: 18px; }
.scelta-comuni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Missioni */
.lista-missioni { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 18px; }
.missione { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: start; }
.missione h3 { font-size: 1.125em; font-weight: 800; }
.missione .passi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.passo[aria-pressed="true"] { background: var(--verde-tenue); color: var(--inchiostro); border-color: var(--verde); }
.passo[aria-pressed="true"]:hover { background: var(--verde-tenue); color: var(--inchiostro); }
.passo .spunta { display: none; }
.passo[aria-pressed="true"] .spunta { display: block; color: var(--verde); }
@media (max-width: 30rem) { .missione { grid-template-columns: 1fr; } }

/* Premi */
.griglia-premi { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 18px; }
.premio { display: grid; gap: 12px; align-content: start; }
.premio h3 { font-size: 1.125em; font-weight: 800; }
.anteprima { border: 1px solid var(--linea); border-radius: 10px; background: var(--carta); width: 100%; height: auto; }
.anteprima.verticale { max-width: 180px; }

/* Codice di confronto */
.codice { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 800; letter-spacing: .06em; background: var(--superficie); border: 2px dashed var(--blu); border-radius: var(--raggio); padding: 10px 16px; display: inline-block; word-break: break-all; }
.campo.codice-campo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em; }
.esito-confronto { display: grid; gap: 18px; margin-top: 18px; }
.esito-confronto h3 { font-size: 1.125em; font-weight: 800; display: flex; gap: 10px; align-items: center; }
.esito-confronto h3 svg { width: 26px; height: 26px; flex: none; }
.lista-confronto { margin-top: 8px; }
.lista-confronto li + li { margin-top: 12px; }
.lista-confronto .spunto { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; color: var(--inchiostro-2); font-style: italic; }
.lista-confronto .spunto svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--blu); }
.accordo h3 svg { color: var(--verde); }
.da-parlare h3 svg { color: var(--blu); }

/* Genitori: criteri e domande */
.lista-criteri { padding-left: 1.6em; margin-top: 14px; }
.lista-criteri li + li { margin-top: 12px; }
.lista-criteri .importanza { display: inline-block; font-size: 1rem; font-weight: 700; border-radius: 999px; padding: 1px 10px; margin-left: 6px; vertical-align: 2px; }
.importanza.i3 { background: var(--giallo); color: var(--su-giallo); }
.importanza.i2 { background: var(--blu-tenue); color: var(--inchiostro); }
.importanza.i1 { border: 1px solid var(--linea); color: var(--inchiostro-2); }
.gruppo-domande + .gruppo-domande { margin-top: 18px; }
.gruppo-domande h3 { font-size: 1.0625em; font-weight: 800; }
.lista-spunta { list-style: none; padding: 0; margin-top: 8px; }
.lista-spunta li { position: relative; padding-left: 34px; }
.lista-spunta li + li { margin-top: 8px; }
.lista-spunta li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border: 2px solid var(--inchiostro-2); border-radius: 4px; }

/* Conferma della cancellazione */
.conferma { margin-top: 12px; }

/* Movimento: solo se chi legge non ha chiesto di ridurlo */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
	.entra { animation: entra .28s ease-out; }
	.punti-guadagnati { animation: salta .5s ease-out; }
	.timbro-grande { animation: timbro .5s cubic-bezier(.2, 1.6, .4, 1); transform: rotate(-4deg); }
	.risposta { transition: border-color .15s, background-color .15s; }
	.tappa .barra span { transition: width .35s ease-out; }
}
@keyframes entra { from { transform: translateY(12px); } to { transform: none; } }
@keyframes salta { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes timbro { 0% { transform: scale(1.5) rotate(-14deg); } 100% { transform: scale(1) rotate(-4deg); } }

/* Contrasto forzato (Windows) */
@media (forced-colors: active) {
	.risposta.scelta { border: 3px solid Highlight; }
	.risposta.scelta .segno { background: Highlight; }
	.tappa .barra span { background: Highlight; }
}

/* Stampa: solo la guida personale */
@media print {
	@page { margin: 16mm; }
	body { background: #fff !important; color: #000; font-size: 11.5pt; line-height: 1.45; }
	body > *:not(#guida-stampa) { display: none !important; }
	#guida-stampa { display: block !important; }
	#guida-stampa h1 { font-size: 20pt; line-height: 1.2; margin: 6pt 0 4pt; }
	#guida-stampa h2 { font-size: 14pt; margin: 14pt 0 4pt; border-bottom: 1.5pt solid #063C35; padding-bottom: 2pt; break-after: avoid; }
	#guida-stampa h3 { font-size: 12pt; margin: 8pt 0 2pt; break-after: avoid; }
	#guida-stampa p, #guida-stampa li { margin: 2pt 0; }
	#guida-stampa .blocco { break-inside: avoid; }
	#guida-stampa .logo-stampa { height: 28pt; width: auto; }
	#guida-stampa table { width: 100%; border-collapse: collapse; margin-top: 4pt; }
	#guida-stampa th, #guida-stampa td { border: .75pt solid #888; padding: 4pt 6pt; text-align: left; vertical-align: top; }
	#guida-stampa td.vuota { height: 26pt; }
	#guida-stampa .casella { display: inline-block; width: 10pt; height: 10pt; border: 1pt solid #000; margin-right: 6pt; vertical-align: -1pt; }
	#guida-stampa .evidenzia { background: #B4DECA; color: #052E29; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	#guida-stampa a { color: #000; text-decoration: none; }
	#guida-stampa .indirizzo-url { font-family: ui-monospace, Menlo, monospace; font-size: 9.5pt; }
}