/* Il motore di survey cosmetiFULL. Tutti i valori di colore arrivano da /brand/tokens.generated.css
   (la fonte unica del marchio): qui si assegnano solo i RUOLI, per tema. Nessun esadecimale scritto
   a mano in questo file. Tema chiaro di partenza; lo scuro solo se la persona lo sceglie.
   Il trattino lungo non compare nei testi; i segni grafici in questo file sono solo bordi. */

:root,
[data-theme='light'] {
  --fondo: var(--cf-fondo);
  --fondo-2: var(--cf-fondo-2);
  --carta: var(--cf-carta);
  --linea: var(--cf-linea);
  --bordo-forte: var(--cf-nero-bordo);
  --testo: var(--cf-testo);
  --forte: var(--cf-nero);
  --muto: var(--cf-testo-muto);
  --accento: var(--cf-lime-testo);
  --segnale: var(--cf-lime-segnale);
  --anello: var(--cf-lime-segnale);
  --velo: var(--cf-lime-velo);
  --velo-2: var(--cf-lime-lieve);
  --cta: var(--cf-lime);
  --cta-testo: var(--cf-nero);
  --cta-bordo: var(--cf-nero);
  --segno: var(--cf-nero);
  --segno-dentro: var(--cf-lime);
  --pezzo-fatto: var(--cf-nero);
  --pezzo-ora: var(--cf-lime-segnale);
  --pezzo-poi: var(--cf-linea);
  --errore: var(--cf-blocco);
  --demo: var(--cf-rivedere);
  --demo-velo: var(--cf-rivedere-velo);
  --demo-linea: var(--cf-rivedere-linea);
  color-scheme: light;
}

[data-theme='dark'] {
  --fondo: var(--cf-scuro-fondo);
  --fondo-2: var(--cf-scuro-fondo-2);
  --carta: var(--cf-scuro-carta);
  --linea: var(--cf-scuro-linea);
  --bordo-forte: var(--cf-scuro-nero-bordo);
  --testo: var(--cf-scuro-testo);
  --forte: var(--cf-scuro-testo);
  --muto: var(--cf-scuro-testo-muto);
  --accento: var(--cf-scuro-lime);
  --segnale: var(--cf-scuro-lime);
  --anello: var(--cf-scuro-lime);
  --velo: var(--cf-scuro-velo);
  --velo-2: var(--cf-scuro-velo-2);
  --cta: var(--cf-lime);
  --cta-testo: var(--cf-nero);
  --cta-bordo: var(--cf-lime);
  --segno: var(--cf-scuro-lime);
  --segno-dentro: var(--cf-nero);
  --pezzo-fatto: var(--cf-scuro-testo);
  --pezzo-ora: var(--cf-lime);
  --pezzo-poi: var(--cf-scuro-linea);
  --errore: var(--cf-scuro-blocco);
  --demo: var(--cf-scuro-rivedere);
  --demo-velo: var(--cf-scuro-rivedere-velo);
  --demo-linea: var(--cf-scuro-rivedere-linea);
  color-scheme: dark;
}

/* ---- Base ------------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

/* Sul telefono la guida resta incollata in fondo: cio' che riceve il fuoco non deve finirci sotto. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: 104px; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Poppins', 'Poppins ripiego', var(--cf-sans);
  font-size: 1rem;
  line-height: var(--cf-interlinea);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--accento); text-underline-offset: 0.18em; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; }
[hidden] { display: none !important; }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--cta); color: var(--cta-testo); padding: 10px 14px; border-radius: 8px; font-weight: 600;
}
.salta:focus { top: 12px; }

/* Il telaio prende la finestra; dentro, la corsia ha il suo tetto (manuale §9.1). */
.corsia {
  width: 100%;
  max-width: var(--cf-larghezza-max);
  margin-inline: auto;
  padding-inline: 16px;
}

.mono { font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); }

/* ---- Testata e piede --------------------------------------------------------- */

.testata { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.testata__corsia { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.marchio { display: block; }
/* Il file del marchio ha molta aria attorno (1640x859): la scatola la ritaglia in alto e in basso,
   cosi' il nome si legge alla misura giusta senza alzare la testata. Il marchio non si ricompone. */
.marchio img { width: 168px; height: 52px; object-fit: cover; }
.marchio__scuro { display: none !important; }
[data-theme='dark'] .marchio__chiaro { display: none !important; }
[data-theme='dark'] .marchio__scuro { display: block !important; }

.comandi { display: flex; align-items: center; gap: 6px; }
.lingue { display: flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.lingua {
  min-width: 44px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  color: var(--muto); cursor: pointer;
}
.lingua[aria-pressed='true'] { background: var(--forte); color: var(--fondo); }
.tema {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 999px;
  background: transparent; color: var(--forte); cursor: pointer;
}
.tema__sole { display: none; }
[data-theme='dark'] .tema__sole { display: block; }
[data-theme='dark'] .tema__luna { display: none; }

.contenuto { flex: 1; padding-block: 24px 40px; outline: none; }
.piede { border-top: 1px solid var(--linea); }
.piede__corsia { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-block: 18px; font-size: 0.875rem; }
.piede__link { color: var(--muto); }

/* ---- Bottoni ------------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none;
  transition: background-color 140ms var(--cf-ease), border-color 140ms var(--cf-ease);
}
.btn--primario { background: var(--cta); color: var(--cta-testo); border-color: var(--cta-bordo); }
.btn--primario:hover { background: var(--cf-lime-lieve); }
[data-theme='dark'] .btn--primario:hover { background: var(--cf-lime-lieve); }
.btn--secondario { background: transparent; color: var(--forte); border-color: var(--bordo-forte); }
.btn--secondario:hover { background: var(--fondo-2); }
.btn--testo { background: transparent; color: var(--forte); padding-inline: 12px; }
.btn--testo:hover { background: var(--fondo-2); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.freccia { font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); }

/* ---- Etichette in Space Mono (dati, numeri, conteggi) ---------------------- */

.etichetta {
  margin: 0;
  font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muto);
}

/* ---- Ingresso ------------------------------------------------------------------ */

/* Sul telefono: titolo e sottotitolo, poi i tre fatti, poi nome, email e bottone (spec-v5 §3). */
.ingresso { display: grid; gap: 28px; padding-top: 8px; grid-template-areas: 'corpo' 'lato' 'azioni'; }
.ingresso__corpo { grid-area: corpo; }
.ingresso__lato { grid-area: lato; display: grid; gap: 10px; }
.ingresso__azioni-blocco { grid-area: azioni; display: grid; gap: 24px; }
.ingresso__titolo {
  margin: 8px 0 0; color: var(--forte); font-weight: 600;
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em;
  max-width: 18em;
}
.ingresso__perche { margin: 16px 0 0; font-size: 1.125rem; max-width: 36em; }
.ingresso__firma { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; line-height: 1.45; color: var(--muto); max-width: 40em; }
.ingresso__firma picture { flex: none; display: block; }
.ingresso__firma img { flex: none; width: 32px; height: 32px; object-fit: cover; object-position: 50% 18%; border-radius: 8px; }
.fatti { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); max-width: 36em; }
/* I fatti: l'etichetta sopra il testo, a tutta larghezza. Sul telefono le righe si dimezzano, e il bottone
   resta nello schermo appena finiti i fatti (390x844, prova nella camminata). */
.fatti li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.fatti .etichetta { padding-top: 0; }
.ingresso__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ingresso__azioni .btn--primario { min-width: 12rem; }
.ripresa {
  display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: var(--velo);
  border: 1px solid var(--segnale); max-width: 36em;
}
.ripresa p { margin: 0; }
.ripresa__azioni { display: flex; flex-wrap: wrap; gap: 10px; }

.firma { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.firma img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 18%; border-radius: 12px; }
.firma__nome { margin: 0; font-weight: 600; color: var(--forte); }
.promotore { margin: 14px 0 0; font-size: 0.875rem; color: var(--muto); }

/* ---- La schermata di domanda --------------------------------------------------- */

.schermata { display: grid; gap: 20px; }

.rotta { display: grid; gap: 10px; }
.rotta__riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rotta__conta { font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.8125rem; color: var(--forte); margin: 0; white-space: nowrap; }

/* I pezzi: uno per ogni schermata del PERCORSO di questa persona. Se una risposta accorcia il
   percorso, i pezzi diminuiscono: il disegno dice il vero sul cammino che resta. */
.pezzi { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pezzo { flex: 1; height: 6px; border-radius: 2px; background: var(--pezzo-poi); }
.pezzo--fatto { background: var(--pezzo-fatto); }
.pezzo--ora { background: var(--pezzo-ora); height: 6px; box-shadow: 0 0 0 1px var(--pezzo-ora); }

.rotta__dopo { margin-top: 6px; }
.rotta__dopo summary { cursor: pointer; color: var(--muto); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.18em; min-height: 44px; display: inline-flex; align-items: center; }
.dopo__corpo { display: grid; gap: 10px; padding: 12px 0 4px; font-size: 0.875rem; }
.dopo__corpo p { margin: 0; }
.dopo__riga { display: flex; gap: 8px; }
.dopo__riga input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--carta); font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.75rem;
}
.dopo__riga .btn { min-height: 44px; padding: 0 14px; font-size: 0.875rem; }

.domanda { display: grid; gap: 18px; }
.domanda fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.domanda__num {
  display: block; font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono);
  font-size: 0.875rem; color: var(--accento); margin-bottom: 6px; letter-spacing: 0.04em;
}
.domanda__testo {
  padding: 0; margin: 0 0 14px; color: var(--forte); font-weight: 600;
  font-size: clamp(1.25rem, 1.08rem + 0.9vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em;
  max-width: 32em;
}
.domanda__aiuto { margin: 0; color: var(--muto); max-width: 38em; }
.domanda__regola { margin: 0; }
.avviso { margin: 0; min-height: 1.65em; color: var(--errore); font-weight: 500; }
.avviso--neutro { color: var(--muto); font-weight: 400; }

.scelte { display: grid; gap: 10px; }
.scelta {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  min-height: 56px; padding: 15px 16px; border-radius: 12px;
  background: var(--carta); border: 1px solid var(--linea); cursor: pointer;
  transition: background-color 120ms var(--cf-ease), border-color 120ms var(--cf-ease);
  -webkit-tap-highlight-color: transparent;
}
.scelta:hover { border-color: var(--bordo-forte); }
.scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.scelta__segno {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--muto); border-radius: 50%;
  display: grid; place-items: center; background: var(--carta);
}
.scelta--multi .scelta__segno { border-radius: 6px; }
.scelta__testo { font-weight: 500; color: var(--forte); line-height: 1.45; }
.scelta--accesa { background: var(--velo); border-color: var(--segnale); box-shadow: inset 0 0 0 1px var(--segnale); }
.scelta--accesa .scelta__segno { background: var(--segno); border-color: var(--segno); }
.scelta--accesa .scelta__segno::after { content: ''; display: block; }
.scelta:not(.scelta--multi).scelta--accesa .scelta__segno::after { width: 8px; height: 8px; border-radius: 50%; background: var(--segno-dentro); }
.scelta--multi.scelta--accesa .scelta__segno::after {
  width: 6px; height: 11px; margin-top: -2px; border: solid var(--segno-dentro); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.scelta:has(input:focus-visible) { outline: 3px solid var(--anello); outline-offset: 2px; }
.scelta--spenta { opacity: 0.55; }
.scelta--spenta:hover { border-color: var(--linea); }



/* La guida in fondo: sul telefono resta sotto il pollice. */
.guida {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--linea);
}
.guida .btn { padding-inline: 16px; }
.guida .btn--primario { flex: 1; max-width: 17rem; margin-left: auto; line-height: 1.25; text-wrap: balance; }

/* ---- Schermata finale ----------------------------------------------------------- */

.finale { display: grid; gap: 28px; }
.finale__modulo { display: grid; gap: 22px; max-width: var(--cf-misura); }
.finale h1, .specchio h1, .pagina h1 {
  margin: 0; color: var(--forte); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15;
}
.campo { display: grid; gap: 8px; }
.campo label, .campo .campo__nome { font-weight: 600; color: var(--forte); }
.campo textarea, .campo input[type='email'], .campo input[type='text'] {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--bordo-forte); background: var(--carta); line-height: 1.5;
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo__aiuto { margin: 0; color: var(--muto); font-size: 0.875rem; }
.campo--errore input { border-color: var(--errore); box-shadow: inset 0 0 0 1px var(--errore); }

/* ---- Lo specchio ------------------------------------------------------------- */

.specchio { display: grid; gap: 28px; }
.specchio__testa { display: grid; gap: 10px; max-width: var(--cf-misura); }
.specchio__testa p { margin: 0; }
.demo {
  margin: 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--demo-linea);
  background: var(--demo-velo); color: var(--demo); font-weight: 600;
  font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.8125rem; letter-spacing: 0.02em;
}
.riflessi { display: grid; gap: 16px; }
.riflesso { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: 14px; background: var(--carta); border: 1px solid var(--linea); }
.riflesso h2 { margin: 0; font-size: 1.0625rem; line-height: 1.4; color: var(--forte); font-weight: 600; }

/* ---- Pagine semplici: chiusura, grazie, informativa, errore ------------------- */

.pagina { display: grid; gap: 18px; max-width: var(--cf-misura); padding-top: 8px; }
.pagina p { margin: 0; }
.pagina p:not(.etichetta):not(.campo__aiuto) { font-size: 1.0625rem; }
.pagina__azioni { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

/* L'informativa (v7): sezioni con un titolo, paragrafi ed elenchi; il testo fino in fondo alla colonna di lettura. */
.informativa { gap: 28px; }
.informativa__data { color: var(--muto); font-size: 0.9375rem; }
.informativa__sezione { display: grid; gap: 10px; }
.informativa__sezione h2 { margin: 0; font-size: 1.125rem; line-height: 1.35; color: var(--forte); font-weight: 600; }
.informativa__elenco { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; font-size: 1.0625rem; }
.informativa__elenco li::marker { color: var(--accento); }
.informativa strong { color: var(--forte); font-weight: 600; }

/* ---- Il contatto: nome, email, una spunta (v4) ------------------------------ */

.contatto { display: grid; gap: 12px; max-width: 36em; }
.contatto__campi { display: grid; gap: 12px; }
.contatto__nota { margin: 0; font-size: 0.875rem; color: var(--muto); max-width: 38em; }
.contatto .avviso:empty { min-height: 0; }

/* ---- «Altro» col suo campo, e il paese scritto ------------------------------- */

.scelta-con-altro { display: grid; gap: 8px; }
.altro__campo, .campo--paese input {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--bordo-forte); background: var(--carta); line-height: 1.5;
}
.campo--paese input { min-height: 54px; font-size: 1.0625rem; }
textarea.altro__campo { min-height: 4.5rem; resize: none; overflow: hidden; }
.scelte--suggerimenti { gap: 8px; }
.scelta--bottone { width: 100%; text-align: left; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.scelta--bottone:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; }

/* ---- Lo specchio in parole ---------------------------------------------------- */

.specchio__tu { margin: 0; color: var(--forte); font-weight: 600; }

/* La scala a tre tratti (v6): il tratto della persona col colore del brand e «Tu» sopra. La frase lunga di
   confronto e' l'etichetta accessibile della scala, non testo a vista. */
.scala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 2px 0 0; }
.scala__tratto { display: grid; gap: 6px; align-content: end; }
.scala__tu { min-height: 1.2em; font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accento); }
.scala__barra { display: block; height: 8px; border-radius: 3px; background: var(--linea); }
.scala__tratto--tu .scala__barra { background: var(--segnale); }
.scala__nome { font-size: 0.8125rem; line-height: 1.3; color: var(--muto); }
.scala__tratto--tu .scala__nome { color: var(--forte); font-weight: 600; }

/* Q7: le voci come etichette compatte, numerate. */
.voci { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: voce; }
.voci li { counter-increment: voce; display: grid; grid-template-columns: 1.6rem 1fr; gap: 8px; align-items: baseline; color: var(--forte); font-weight: 500; line-height: 1.4; }
.voci li::before { content: counter(voce); font-family: 'Space Mono', 'Space Mono ripiego', var(--cf-mono); font-size: 0.875rem; color: var(--accento); }

/* Q14: la voce in evidenza, una riga. */
.evidenza { margin: 0; color: var(--forte); font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

/* QM: tre righe allineate, «Tu» e i due ruoli. */
.ruoli { margin: 0; display: grid; grid-template-columns: minmax(6.5rem, min(38%, 15rem)) 1fr; gap: 8px 16px; }
.ruoli dt { font-weight: 600; color: var(--forte); }
.ruoli dt.ruoli__tu { color: var(--accento); }
.ruoli dd { margin: 0; color: var(--forte); }
.ruoli dd.ruoli__attesa { color: var(--muto); }
.campo__errore { margin: 0; min-height: 0; color: var(--errore); font-size: 0.875rem; font-weight: 500; }
.campo__errore:empty { display: none; }
.campo input[aria-invalid='true'] { border-color: var(--errore); box-shadow: inset 0 0 0 1px var(--errore); }
.ingresso__dopo { margin: 0; color: var(--muto); font-size: 0.9375rem; max-width: 36em; }
.invio-report { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--linea); }
.invio-report h2 { margin: 0; font-size: 1.125rem; color: var(--forte); font-weight: 600; }
.invio-report > p { margin: 0; max-width: 38em; }
.specchio__azioni { align-items: center; }
.specchio__comune, .specchio__attesa { margin: 0; color: var(--muto); font-size: 0.875rem; }
/* La riga grigia sta in fondo alla scheda: nelle schede affiancate le righe si allineano. */
.riflesso .specchio__comune { margin-top: auto; padding-top: 4px; }
/* Sotto soglia (v8): una sola riga d'attesa in cima, ben visibile, e sotto le sole risposte della persona. */
.specchio__attesa-unica { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--fondo-2); border: 1px solid var(--linea); color: var(--forte); font-weight: 500; line-height: 1.5; }
.riflesso .specchio__tu { margin: 0; color: var(--forte); font-weight: 500; }
.ripresa__conferma { margin: 0; color: var(--forte); font-weight: 500; }
/* La verifica anti-bot (v9): il widget di Cloudflare, e sotto il messaggio e Riprova quando serve. */
.verifica { display: grid; gap: 10px; justify-items: start; }
.verifica__widget { min-height: 65px; }
.specchio__base { margin: 0; color: var(--muto); font-size: 0.875rem; }

/* ---- Grazie --------------------------------------------------------------- */

.grazie .firma { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--linea); max-width: 36em; }
.firma__nota { margin: 0 0 2px; color: var(--testo); }
.grazie__video { justify-self: start; }

/* ---- Telefono largo e oltre ------------------------------------------------- */

@media (min-width: 720px) {
  .corsia { padding-inline: 32px; }
  .marchio img { width: 188px; height: 56px; }
  .contenuto { padding-block: 48px 72px; }
  .guida { position: static; margin-inline: 0; padding: 8px 0 0; border-top: 0; background: transparent; }
  .riflessi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fatti li { grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 14px 0; }
  .fatti .etichetta { padding-top: 3px; }
  .contatto__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riflesso--largo { grid-column: 1 / -1; }
  .riflessi { align-items: stretch; }
}

/* A schermo largo la domanda ha la sua colonna di lettura, il percorso un binario a sinistra. */
@media (min-width: 1024px) {
  .schermata--domanda { grid-template-columns: 17rem minmax(0, var(--cf-misura)); gap: 72px; align-items: start; }
  .schermata--domanda .rotta { position: sticky; top: 32px; padding-top: 6px; }
  .rotta__riga { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ingresso { grid-template-columns: minmax(0, 1fr) 20rem; grid-template-areas: 'corpo lato' 'azioni lato'; column-gap: 96px; row-gap: 36px; align-items: start; }
  .ingresso__lato { padding-top: 10px; }
  .fatti li { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .fatti .etichetta { padding-top: 0; }
  .finale { grid-template-columns: 17rem minmax(0, var(--cf-misura)); gap: 72px; align-items: start; }
  .finale__lato { position: sticky; top: 32px; }
}

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

/* Pass ux del 17-10. M9: il fuoco spostato dal codice sul titolo non disegna l'anello col mouse (resta per la
   tastiera). M12: la spiegazione di Q15B a peso normale, su una riga sua. M10: «Torna alla survey» anche in cima
   all'informativa. M7: la pagina del link che non esiste. S3: «Tieni quello che hai scritto» come bottone. */
/* Il fuoco messo dal codice su un titolo (tabindex -1, mai raggiungibile col Tab) non disegna l'anello: Chromium tratta
   il fuoco da script come «visibile» dopo un ricaricamento, quindi :not(:focus-visible) non bastava. */
[tabindex="-1"]:focus { outline: none; }
.campo label .campo__domanda { display: block; }
.campo label .campo__nota { display: block; font-weight: 400; color: var(--muto); margin-top: 4px; }
.informativa__torna { margin: 0; }
.pagina--404 { margin: 0 auto; padding: 48px 16px; gap: 24px; }
.pagina--404 h1 { margin: 0; }
.paese__libero { justify-self: start; text-align: left; }
.verifica .avviso--neutro { margin: 0; }