/* Verificando — foglio di stile unico. Nessuna dipendenza esterna. */

:root {
	--sfondo: #f6f7fb;
	--sfondo-alt: #ffffff;
	--testo: #16181d;
	--testo-tenue: #5b6270;
	--bordo: #e2e5ee;
	--accento: #4338ca;
	--accento-tenue: #eef0ff;
	--giusto: #157f4b;
	--giusto-tenue: #e4f7ec;
	--sbagliato: #c0344a;
	--sbagliato-tenue: #fdeaed;
	--ombra: 0 1px 2px rgba(16, 18, 30, .06), 0 8px 24px rgba(16, 18, 30, .06);
	--raggio: 14px;
	--larghezza: 1080px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--sfondo: #101218;
		--sfondo-alt: #191c25;
		--testo: #eceef5;
		--testo-tenue: #a0a7ba;
		--bordo: #2b3040;
		--accento: #a3a9ff;
		--accento-tenue: #22263a;
		--giusto: #5fd39b;
		--giusto-tenue: #163024;
		--sbagliato: #ff8b9e;
		--sbagliato-tenue: #351b22;
		--ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--sfondo);
	color: var(--testo);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.55;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0; }

a { color: inherit; }

.salta {
	position: absolute;
	left: -9999px;
}
.salta:focus {
	left: 12px; top: 12px;
	z-index: 10;
	background: var(--sfondo-alt);
	padding: 10px 16px;
	border-radius: 10px;
	box-shadow: var(--ombra);
}

/* --- intestazione --- */

.intestazione {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	max-width: var(--larghezza);
	margin: 0 auto;
	padding: 22px 24px 10px;
}

.marchio {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -.03em;
}

.marchio-segno {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 10px;
	background: var(--accento);
	color: #fff;
	font-size: 1rem;
}

@media (prefers-color-scheme: dark) {
	.marchio-segno { color: #12141c; }
}

.marchio-motto {
	margin: 0;
	color: var(--testo-tenue);
	font-size: .95rem;
}

/* Visibile solo a chi legge la pagina con la voce. */
.solo-lettori {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- ricerca --- */

.cerca {
	position: relative;
	flex: 1 1 240px;
	min-width: 200px;
	max-width: 420px;
	margin-left: auto;
	align-self: center;
}

/* Dentro il campo, a sinistra: dice che cosa è quella riga prima che ci si
   legga il segnaposto. Decorativa, quindi fuori dall'albero accessibile — il
   campo ha già la sua etichetta. */
.cerca-lente {
	position: absolute;
	left: 13px;
	top: 50%;
	width: 17px; height: 17px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--testo-tenue);
	stroke-width: 1.8;
	stroke-linecap: round;
	pointer-events: none;
}

/* La lente sta prima del campo nel documento, quindi il fuoco lo si guarda
   dal contenitore — quello della testata e quello della pagina. */
.cerca:focus-within .cerca-lente,
.ricerca-campo:focus-within .cerca-lente { stroke: var(--accento); }

.cerca-campo {
	width: 100%;
	padding: 9px 14px 9px 38px;
	border: 1px solid var(--bordo);
	border-radius: 999px;
	background: var(--sfondo-alt);
	color: inherit;
	font: inherit;
	font-size: .95rem;
	-webkit-appearance: none;
	appearance: none;
}

.cerca-campo::placeholder { color: var(--testo-tenue); }

.cerca-campo:focus {
	outline: 2px solid var(--accento);
	outline-offset: 1px;
}

.cerca-esiti {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0; right: 0;
	max-height: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--sfondo-alt);
	box-shadow: var(--ombra);
}

.cerca-esito {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"miniatura nome"
		"miniatura sommario"
		"miniatura etichette";
	align-items: baseline;
	gap: 2px 10px;
	padding: 8px 10px;
	border-radius: 10px;
	text-decoration: none;
}

.cerca-esito.attivo,
.cerca-esito:hover {
	background: var(--accento-tenue);
}

/* La miniatura sta dove stava la targhetta del tipo: la riga e' stretta e due
   colonne davanti al titolo non ci stavano. Il tipo e' passato in testa alla
   riga dei dati, che lo dice a parole. Piu' piccola della miniatura di una
   scheda - 40px contro 72 - perche' qui ce ne sono sei una sotto l'altra. */
.cerca-miniatura {
	grid-area: miniatura;
	align-self: center;
	display: block;
	width: 40px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sfondo);
}

.cerca-miniatura img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.cerca-nome {
	grid-area: nome;
	font-weight: 600;
	font-size: .95rem;
}

.cerca-sommario {
	grid-area: sommario;
	color: var(--testo-tenue);
	font-size: .82rem;
}

/* Le etichette nella tendina: piu' strette che sulla pagina, perche' qui la
   riga ne ha otto sopra e sotto e a stare larghe la tendina non si leggerebbe
   piu'. */
.cerca-etichette {
	grid-area: etichette;
	margin-top: 5px;
	gap: 4px;
}

.cerca-etichette .etichetta {
	font-size: .7rem;
	padding: 1px 7px;
	background: var(--sfondo);
}

.cerca-etichette .etichetta-spicca {
	background: var(--accento);
	color: var(--sfondo-alt);
}

.cerca-tutti {
	justify-content: center;
	margin-top: 4px;
	border-top: 1px solid var(--bordo);
	border-radius: 0 0 10px 10px;
	grid-template-columns: 1fr;
	grid-template-areas: "nome";
	padding-top: 10px;
	text-align: center;
}

.cerca-tutti .cerca-nome {
	color: var(--accento);
	font-size: .88rem;
}

.cerca-niente {
	padding: 10px 12px;
	color: var(--testo-tenue);
	font-size: .9rem;
}

/* --- la pagina dei risultati --- */

.ricerca-form {
	display: flex;
	gap: 10px;
	margin: 18px 0 8px;
}

.ricerca-campo {
	position: relative;
	flex: 1 1 auto;
}

/* Sotto il telefono la testata sta su una riga sola: il motto, che è
   decorazione, lascia il posto e il campo si stringe fino al tondo della
   lente, accanto al marchio. Toccarlo lo mette a fuoco e, col fuoco dentro,
   torna lungo quanto la riga. Resta aperto anche mentre la tendina è fuori,
   se no il dito che va sul risultato se lo vedrebbe scappare via. */
@media (max-width: 640px) {
	.intestazione {
		align-items: center;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.marchio-motto { display: none; }

	.cerca {
		flex: 0 1 auto;
		width: 38px;
		min-width: 0;
		max-width: none;
		margin-left: auto;
		transition: width .18s ease;
	}

	.cerca:focus-within,
	.cerca:has(.cerca-esiti:not([hidden])) { width: 100%; }

	/* Col campo aperto il nome del marchio si fa da parte: resta il segno, che
	   basta a riportare a casa, e la riga è tutta del campo. */
	.intestazione:has(.cerca:focus-within) .marchio-nome,
	.intestazione:has(.cerca-esiti:not([hidden])) .marchio-nome { display: none; }

	.cerca .cerca-lente { left: 10px; }

	.cerca .cerca-campo { padding: 9px 4px 9px 34px; }

	.cerca:focus-within .cerca-campo,
	.cerca:has(.cerca-esiti:not([hidden])) .cerca-campo { padding-right: 14px; }
}

.contenuto {
	max-width: var(--larghezza);
	margin: 0 auto;
	padding: 12px 24px 64px;
}

.pie {
	max-width: var(--larghezza);
	margin: 0 auto;
	padding: 0 24px 40px;
	color: var(--testo-tenue);
	font-size: .85rem;
}

.pie .copyright {
	margin-top: 4px;
}

.pie-scelte {
	margin-top: 10px;
	display: flex;
	gap: 16px;
}

.pie-scelte a,
.come-link {
	color: var(--testo-tenue);
	text-decoration: underline;
}

/* Il «Cookie» del piè di pagina è un bottone — cancella una scelta salvata,
   non porta da nessuna parte — ma deve leggersi come gli altri link. */
.come-link {
	font: inherit;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.pie-scelte a:hover,
.come-link:hover { color: var(--testo); }

/* --- pagina iniziale --- */

.eroe {
	padding: 28px 0 10px;
	max-width: 62ch;
}

.eroe h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 12px;
}

.eroe p {
	color: var(--testo-tenue);
	font-size: 1.1rem;
	margin: 0;
}

.titolo-sezione {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 40px 0 16px;
}

.titolo-sezione h2 { font-size: 1.15rem; }
.titolo-sezione span { color: var(--testo-tenue); font-size: .9rem; }

.griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 16px;
}

.scheda {
	display: block;
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 20px;
	text-decoration: none;
	box-shadow: var(--ombra);
	transition: transform .12s ease, border-color .12s ease;
}

.scheda:hover, .scheda:focus-visible {
	transform: translateY(-2px);
	border-color: var(--materia, var(--accento));
}

.scheda-materia { border-top: 4px solid var(--materia, var(--accento)); }

/* La scheda dei risultati non e' un collegamento: dentro ci sono le etichette,
   che portano alla loro pagina. Il collegamento sta sul titolo e si stira su
   tutta la scheda con un `::after` trasparente, cosi' resta cliccabile
   dappertutto; le etichette, che vengono dopo nel documento e sono a loro
   volta posizionate, gli restano sopra. */
.scheda-cerca { position: relative; }

.scheda-cerca .scheda-titolo { text-decoration: none; }

.scheda-cerca .scheda-titolo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.scheda-cerca .etichette { position: relative; }

/* Il fuoco arriva sul titolo, non piu' sulla scheda: e' lei che deve
   rispondere, come faceva quando il collegamento era tutt'uno con la scheda. */
.scheda-cerca:has(.scheda-titolo:focus-visible) {
	transform: translateY(-2px);
	border-color: var(--materia, var(--accento));
}

/* L'immagine della materia annulla il padding della scheda e la riempie tutta.
   I file sono gia quadrati (vedi misc/lab/imgs/quadra.py nel progetto banco):
   `cover` qui non ritaglia niente, serve solo a non deformare se la colonna
   della griglia non viene esattamente quadrata. */
.scheda-figura {
	position: relative;
	margin: -20px;
	border-radius: calc(var(--raggio) - 1px);
	overflow: hidden;
	background: var(--accento-tenue);
}

.scheda-figura img {
	display: block;
	width: 100%;
	/* Gli attributi width/height sull'`img` servono a riservare lo spazio
	   prima che l'immagine arrivi, ma valgono anche come altezza: senza
	   `height: auto` la scheda si allungherebbe a 720px e `aspect-ratio`
	   verrebbe ignorato. */
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Nome e conteggi stanno sopra l'immagine, non sotto: la scheda e alta quanto
   la figura. Sotto il testo c'e una fascia vera, scura e sfocata, non una
   sfumatura: su un quadro chiaro e affollato la sfumatura da sola lasciava
   il nome a contendersi il fondo con il dipinto. */
.scheda-didascalia {
	position: absolute;
	inset: auto 0 0 0;
	padding: 12px 16px 13px;
	background: rgba(11, 13, 19, .64);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	color: #fff;
}

/* Senza sfocatura la sola velatura non basta: si scurisce. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.scheda-didascalia { background: rgba(11, 13, 19, .84); }
}

.scheda-didascalia h3 {
	margin: 0 0 2px;
	color: #fff;
}

.scheda-didascalia .meta {
	color: rgba(255, 255, 255, .86);
}

/* La scheda di un argomento: miniatura a sinistra, titolo e dati a destra,
   etichette sotto a tutta larghezza. La miniatura resta piccola apposta —
   qui a contare e il titolo, l'immagine serve a dare un appiglio all'occhio
   mentre si scorre una griglia di trenta schede quasi uguali. */
.scheda-argomento {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 14px;
	align-items: start;
	/* Le schede della griglia sono tutte alte uguale. Senza questo, lo spazio
	   che avanza nella scheda piu corta finirebbe tra i dati e le etichette
	   invece che sotto, e le etichette ballerebbero da una scheda all'altra. */
	align-content: start;
}

/* Titolo e dati stanno in una cella sola. Se fossero due righe della griglia,
   la miniatura — che e piu alta di loro quando il titolo e corto — le
   allargherebbe, e i dati finirebbero a mezz'aria sotto al titolo. */
.scheda-testo { min-width: 0; }

.scheda-miniatura {
	display: block;
	width: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--sfondo);
}

/* L'argomento senza immagine: una piastrella tinta del colore della materia.
   Non e un'immagine mancante, e il posto dell'immagine — quando arrivera,
   prendera esattamente questo spazio. La prima riga e per chi non conosce
   `color-mix`: la cascata tiene l'ultima che sa leggere. */
.scheda-segnaposto {
	aspect-ratio: 1;
	background: var(--accento-tenue);
	background: color-mix(in srgb, var(--materia, var(--accento)) 15%, var(--sfondo));
	border: 1px solid var(--bordo);
}

.scheda-miniatura img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Le etichette passano sotto a tutto: sono l'ultima cosa che si legge e
   starebbero strette nella sola colonna del testo. */
.scheda-argomento .etichette { grid-column: 1 / -1; margin-top: 10px; }

.scheda h3 { font-size: 1.12rem; margin-bottom: 6px; }

.meta {
	color: var(--testo-tenue);
	font-size: .88rem;
	margin: 0;
}

/* --- crediti delle immagini --- */

.crediti {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.crediti li {
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 12px 16px;
}

.credito-opera {
	display: block;
	margin-bottom: 2px;
}

.crediti .meta a {
	color: inherit;
}

/* --- pagina materia --- */

.briciole {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--testo-tenue);
	font-size: .9rem;
	margin: 8px 0 18px;
}
.briciole a {
	color: var(--testo-tenue);
	text-decoration: none;
}
.briciole a:hover { color: var(--testo); }
.briciole [aria-current] {
	color: var(--testo);
	/* Il titolo di un argomento può essere lungo: qui vale la sua fine. */
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.briciola-separatore { color: var(--bordo); }

.testata-materia {
	display: flex;
	align-items: center;
	gap: 18px;
	border-left: 5px solid var(--materia, var(--accento));
	padding-left: 18px;
	margin-bottom: 8px;
}
.testata-materia h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.testata-materia p { color: var(--testo-tenue); margin: 6px 0 0; }

/* Il quadrato della materia accanto al titolo: e la stessa immagine delle
   schede della home, qui piccola. Serve a riconoscere la pagina, non a
   riempirla, quindi non cresce oltre i 128px. */
.testata-immagine {
	display: block;
	flex: none;
	width: clamp(84px, 18vw, 128px);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--ombra);
}

.testata-immagine img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Mentre si risponde, sul telefono la testata è titolo e immagine e basta: il
   sommario e le etichette dicono di che quiz si tratta a chi ci arriva, non a
   chi ci sta già dentro, e senza quelle righe la domanda comincia più in alto.
   Sul riepilogo tornano: lì non c'è niente a cui rispondere, e la pagina
   ridiventa quella di un argomento. */
@media (max-width: 640px) {
	#quiz:not([data-apertura="riepilogo"]) .testata-materia p,
	#quiz:not([data-apertura="riepilogo"]) .testata-materia .etichette {
		display: none;
	}
}

.anno-titolo {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--testo-tenue);
	margin: 36px 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--bordo);
}

/* C'e' per la voce che legge lo schermo, non per l'occhio: resta nel flusso e
   nell'albero di accessibilita', ma non si vede e non sposta niente. */
.solo-voce {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.etichette {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.etichetta {
	/* `inline-block` perche' l'etichetta non e' sempre un `li`: sulla pagina
	   dei risultati e' un `a` o uno `span` dentro al `li`, e su un elemento in
	   linea il padding verticale non farebbe spazio. */
	display: inline-block;
	font-size: .74rem;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accento-tenue);
	color: var(--testo-tenue);
	text-decoration: none;
}

/* L'etichetta che ha una pagina dietro: si comporta da collegamento, le altre
   restano parole. Chi guarda non deve provare a cliccare per scoprirlo, per
   questo il colore le distingue. */
.etichetta-pagina {
	color: var(--accento);
}

.etichetta-pagina:hover,
.etichetta-pagina:focus-visible {
	background: var(--accento);
	color: var(--sfondo-alt);
}

/* Quella che la parola cercata tocca: e' lei che spiega perche' il risultato
   sta li' quando nel titolo la parola non c'e'. */
.etichetta-spicca {
	background: var(--accento);
	color: var(--sfondo-alt);
	font-weight: 600;
}

.etichetta-spicca.etichetta-pagina:hover,
.etichetta-spicca.etichetta-pagina:focus-visible {
	background: var(--accento-tenue);
	color: var(--accento);
}

/* --- filtri delle pagine /argomenti/… --------------------------------------
 *
 * Un form GET, non delle caselle che nascondono domande: spuntare cambia da
 * dove il server pesca, e le venti domande restano venti. Per questo c'e' un
 * bottone e non un aggiornamento a ogni click - e per questo funziona anche
 * senza JavaScript, come tutto il resto del sito.
 */

.filtri {
	display: grid;
	gap: 14px;
	margin: 20px 0 28px;
}

.filtro {
	min-width: 0;
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 14px 18px 16px;
	margin: 0;
}

/* Una riga che dice cosa fanno le etichette qui sotto. Senza, sembrano le
   etichette non cliccabili delle altre pagine e nessuno ci prova - ed e' lei
   il titolo del riquadro, che «MATERIE» sopra due parole che le materie le
   dicono da sole non aggiungeva niente. */
.filtro-nota {
	margin: 0;
	font-size: .8rem;
	color: var(--testo-tenue);
}

/* Le materie restano le etichette che erano, ma si nascondono e si mostrano.
   La casella c'e' ancora - senza, niente form e niente tastiera - solo che a
   disegnarne lo stato e' l'etichetta, non un quadratino accanto. */
.etichette-scelta { gap: 6px; margin-top: 8px; }

.etichette-scelta .etichetta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .76rem;
	padding: 5px 11px;
	border: 1px solid transparent;
	cursor: pointer;
	user-select: none;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Il segno dice cosa fa il click prima che lo si provi: mostrata porta una
   spunta da togliere, nascosta un piu' da rimettere. Lo stato vero e' quello
   della casella sotto - questo e' solo il disegno, e infatti sparisce alla
   voce di chi legge lo schermo. */
.etichette-scelta .etichetta::before {
	content: "+";
	font-weight: 700;
	line-height: 1;
	opacity: .7;
}

.etichette-scelta .etichetta:has(input:checked)::before {
	content: "\2713";
	opacity: 1;
}

.etichette-scelta input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.etichette-scelta .etichetta:has(input:checked) {
	background: var(--accento);
	border-color: var(--accento);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	.etichette-scelta .etichetta:has(input:checked) { color: #12141c; }
}

/* Nascosta, ma leggibile: e' l'unico modo per rimostrarla. */
.etichette-scelta .etichetta:has(input:not(:checked)) {
	background: transparent;
	border-color: var(--bordo);
	color: var(--testo-tenue);
}

/* Col mouse sopra si vede dove va a finire il click. Solo dove un puntatore
   c'e' davvero: sul telefono :hover resta attaccato dopo il tocco. */
@media (hover: hover) {
	.etichette-scelta .etichetta:has(input:not(:checked)):hover {
		background: var(--accento-tenue);
		border-color: var(--accento);
		color: var(--testo);
	}

	.etichette-scelta .etichetta:has(input:checked):hover {
		background: color-mix(in srgb, var(--accento) 82%, var(--sfondo));
		border-color: color-mix(in srgb, var(--accento) 82%, var(--sfondo));
	}
}

.etichette-scelta .etichetta:has(input:focus-visible) {
	outline: 2px solid var(--accento);
	outline-offset: 2px;
}

.filtri-azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.vuoto {
	background: var(--sfondo-alt);
	border: 1px dashed var(--bordo);
	border-radius: var(--raggio);
	color: var(--testo-tenue);
	padding: 32px 24px;
	text-align: center;
	margin: 0 0 24px;
}

/* --- quiz --- */

.barra {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: color-mix(in srgb, var(--sfondo) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--bordo);
	padding: 12px 0;
	margin-bottom: 20px;
	font-size: .9rem;
}

.avanzamento {
	flex: 1 1 180px;
	height: 8px;
	border-radius: 999px;
	background: var(--bordo);
	overflow: hidden;
}

.avanzamento > div {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--materia, var(--accento));
	transition: width .3s ease;
}

.punteggio { display: flex; gap: 14px; color: var(--testo-tenue); }
.punteggio b { color: var(--testo); }
.punteggio .p-giuste b { color: var(--giusto); }
.punteggio .p-sbagliate b { color: var(--sbagliato); }

.domanda {
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 22px;
	margin-bottom: 16px;
	box-shadow: var(--ombra);
}

/* Una domanda alla volta: le altre restano nel documento — il crawler le vede
   tutte, e senza JavaScript la pagina è quella di sempre — ma fuori dalla
   vista. A nascondere e mostrare è `app.js`. */
.domanda[hidden] { display: none; }

/* Il fuoco ci arriva da `app.js` dopo un passaggio, non con il tabulatore:
   il contorno direbbe «sei qui» a chi non l'ha chiesto. */
.domanda:focus, #riepilogo:focus { outline: none; }

.navigazione {
	display: flex;
	justify-content: flex-end;
	margin: 16px 0 8px;
}

.navigazione[hidden] { display: none; }

/* Lo spazio pubblicitario: uno per pagina, sotto il bottone e staccato da
   quello che si tocca — un tocco per sbaglio è un click non valido. L'altezza
   è riservata prima che l'annuncio arrivi, se no la pagina salta sotto il dito
   di chi sta leggendo. Senza ADSENSE_CLIENT non c'è niente da mostrare e
   questo blocco non compare nemmeno. */
.annuncio {
	display: block;
	margin: 32px 0 8px;
	padding-top: 20px;
	border-top: 1px solid var(--bordo);
	min-height: 280px;
	text-align: center;
}

.annuncio-etichetta {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--testo-tenue);
	margin-bottom: 10px;
}

.domanda-numero {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--testo-tenue);
}

.domanda h3 {
	font-size: 1.1rem;
	margin: 6px 0 16px;
	font-weight: 600;
}

/* Da dove arriva la domanda. C'è solo sulle pagine che mescolano argomenti di
   materie diverse (/argomenti/…), dove sapere il contesto è metà della
   risposta — e il link porta al quiz completo di quell'argomento. */
.domanda-fonte {
	font-size: .82rem;
	color: var(--testo-tenue);
	margin: -8px 0 16px;
}

.domanda-fonte a { text-decoration-color: var(--bordo); }
.domanda-fonte a:hover { color: var(--testo); }

.opzioni { display: grid; gap: 8px; }

.opzione {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	font: inherit;
	color: inherit;
	background: var(--sfondo);
	border: 1px solid var(--bordo);
	border-radius: 10px;
	padding: 12px 14px;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

.opzione:hover:not(:disabled) {
	border-color: var(--materia, var(--accento));
	background: var(--accento-tenue);
}

.opzione:disabled { cursor: default; }

.opzione .lettera {
	display: grid;
	place-items: center;
	flex: 0 0 26px;
	height: 26px;
	border-radius: 8px;
	border: 1px solid var(--bordo);
	font-size: .8rem;
	font-weight: 700;
	color: var(--testo-tenue);
}

.opzione.giusta {
	border-color: var(--giusto);
	background: var(--giusto-tenue);
}
.opzione.giusta .lettera { border-color: var(--giusto); color: var(--giusto); }

.opzione.sbagliata {
	border-color: var(--sbagliato);
	background: var(--sbagliato-tenue);
}
.opzione.sbagliata .lettera { border-color: var(--sbagliato); color: var(--sbagliato); }

.opzione.spenta { opacity: .55; }

.esito {
	margin: 14px 0 0;
	font-size: .92rem;
	font-weight: 600;
}
.esito.giusta { color: var(--giusto); }
.esito.sbagliata { color: var(--sbagliato); }

.riepilogo {
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
	padding: 28px;
	text-align: center;
	margin-top: 24px;
}

.riepilogo .voto {
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -.04em;
}

.riepilogo p { color: var(--testo-tenue); margin: 4px 0 20px; }

.azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.bottone {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	padding: 11px 20px;
	border-radius: 10px;
	border: 1px solid var(--bordo);
	background: var(--sfondo-alt);
	color: inherit;
	cursor: pointer;
}

.bottone.principale {
	background: var(--accento);
	border-color: var(--accento);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	.bottone.principale { color: #12141c; }
}

.stato {
	color: var(--testo-tenue);
	padding: 48px 0;
	text-align: center;
}

.errore {
	background: var(--sbagliato-tenue);
	border: 1px solid var(--sbagliato);
	color: var(--sbagliato);
	border-radius: var(--raggio);
	padding: 18px 20px;
}

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

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

/* --- argomenti correlati --- */

.correlati {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--bordo);
}

.correlati h2 {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--testo-tenue);
	margin: 0 0 14px;
}

/* --- l'argomento prima e quello dopo -----------------------------------------
 *
 * Stesso trattamento discreto dei correlati, ma due schede sole e piu grandi:
 * qui non si sceglie fra sei, si va avanti o si torna indietro lungo l'indice.
 */

.vicini {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--bordo);
}

.vicini h2 {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--testo-tenue);
	margin: 0 0 14px;
}

.vicini-griglia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* Sul primo argomento c'e solo il successivo: resta nella sua colonna, quella
   di destra, cosi il verso della pagina non cambia da un argomento all'altro. */
.vicino-a-destra { grid-column: 2; }

/* L'etichetta del verso sta sopra a tutto, come le etichette stanno sotto. */
.vicino-verso {
	grid-column: 1 / -1;
	margin-bottom: 8px;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--testo-tenue);
}

/* Sul telefono le due schede si incolonnano, e quella del successivo torna
   nella prima colonna: di colonne ce n'e una sola. */
@media (max-width: 560px) {
	.vicini-griglia { grid-template-columns: 1fr; }
	.vicino-a-destra { grid-column: 1; }
}

/* --- consenso ai cookie ---------------------------------------------------
 *
 * Fisso in fondo, e mai un velo sopra la pagina: chi vuole solo fare il quiz
 * deve poterlo fare. Rifiutare costa esattamente quanto accettare — stesso
 * bottone, stessa dimensione, stesso peso — e non c'è una X, perché chiudere
 * senza scegliere non è un consenso.
 */

.cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	max-width: var(--larghezza);
	margin: 0 auto 12px;
	padding: 16px 20px;
	background: var(--sfondo-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
}

/* `display: flex` batte il `[hidden] { display: none }` del browser: senza
   questa riga il banner resta a vista anche dopo aver scelto. */
.cookie[hidden] { display: none; }

.cookie p {
	margin: 0;
	max-width: 62ch;
	font-size: .92rem;
	color: var(--testo-tenue);
}

.cookie-scelte {
	display: flex;
	gap: 10px;
}

/* I bottoni del quiz stanno in fondo alla pagina: senza questo il banner ci
   finirebbe sopra proprio mentre si risponde all'ultima domanda. */
body:has(.cookie:not([hidden])) .contenuto {
	padding-bottom: 200px;
}

@media (max-width: 640px) {
	.cookie {
		margin: 0 8px 8px;
		padding: 14px 16px;
	}

	.cookie-scelte { width: 100%; }
	.cookie-scelte .bottone { flex: 1; text-align: center; }

	body:has(.cookie:not([hidden])) .contenuto {
		padding-bottom: 260px;
	}
}

/* --- pagine di testo (privacy) --- */

.prosa {
	max-width: 70ch;
}

.prosa h2 {
	font-size: 1.05rem;
	margin: 32px 0 8px;
}

.prosa p { margin: 0 0 12px; }

.prosa code {
	font-size: .88em;
	background: var(--accento-tenue);
	border-radius: 6px;
	padding: 1px 5px;
}

.tabella {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 16px;
	font-size: .92rem;
}

.tabella th,
.tabella td {
	text-align: left;
	vertical-align: top;
	padding: 8px 10px;
	border-bottom: 1px solid var(--bordo);
}

.tabella th { color: var(--testo-tenue); font-size: .82rem; }

/* --- testi «a cosa serve» --------------------------------------------------
 *
 * I blocchi di prosa in fondo alle pagine: dicono a chi arriva da un motore di
 * ricerca cos'è il sito e a cosa serve. Stesso trattamento discreto degli
 * argomenti correlati, così non rubano la scena alle domande.
 */

.usi {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--bordo);
}

.usi h2 {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--testo-tenue);
	margin: 0 0 14px;
}

.usi h3 {
	font-size: 1rem;
	margin: 24px 0 6px;
}

.usi p {
	color: var(--testo-tenue);
	font-size: .95rem;
	margin: 0 0 12px;
}