/*
 * Skillstone — foglio di stile del sito.
 *
 * L'idea di disegno, in una riga: un quaderno di lavoro, non un cruscotto.
 * Chi entra qui è un dipendente che deve fare due ore di formazione obbligatoria, spesso
 * dal telefono, spesso senza aver mai usato un'AI. Serve un posto dove si legge: carta
 * calda, una colonna di testo sola, un carattere da lettura vero, e il minimo di cromature.
 *
 * Tre scelte da cui deriva tutto il resto:
 *
 * 1. UNA COLONNA. Il contenuto sta in --colonna (40rem) centrata, non in una fascia larga
 *    1080px con il testo appoggiato a sinistra. Le pagine che hanno bisogno di più spazio
 *    escono dalla colonna di proposito, con .larga.
 * 2. DUE CARATTERI, DUE MESTIERI. Literata per quello che si legge (prosa, titoli delle
 *    cose), Instrument Sans per quello che si usa (etichette, stati, pulsanti, numeri).
 *    Sono autoospitati: la CSP ammette i caratteri solo da 'self', quindi un @import da un
 *    CDN verrebbe bloccato in silenzio e resterebbe il ripiego di sistema.
 * 3. UNA TAVOLOZZA SOLA, in token. Tutti i colori stanno qui sotto in :root e sono
 *    ridefiniti una volta per il tema scuro. Nelle regole non ci sono colori letterali:
 *    così il tema scuro non è una seconda pelle da tenere d'accordo a mano.
 *    L'accento è il blu di AdCapital. Il verde è rimasto, ma come colore semantico del
 *    «completato» (--fatto), che è un'altra cosa dall'accento: vedi i token.
 *
 * Contrasti verificati a mano su tutte le coppie che portano testo: il minimo è 4.5:1 per
 * il testo (--ink-faint compreso, che porta i metadati piccoli) e 3:1 per i bordi che
 * dicono qualcosa (--line-forte: campi, traccia dell'avanzamento).
 *
 * Nomi lasciati liberi di proposito, perché li usa l'informativa privacy che sta arrivando:
 * `informativa` e `avviso-cookie`. Qui non sono definiti.
 */

/* --- caratteri autoospitati ------------------------------------------------------------
 * Sono i file variabili di Google Fonts, sottoinsieme latino: un file per famiglia copre
 * tutti i pesi che usiamo, quindi i pesi non si pagano uno per uno. Solo il latino, perché
 * il materiale è in italiano; per un glifo fuori sottoinsieme il browser ripiega da sé.
 * Literata è disegnata per leggere a schermo, Instrument Sans per le parti di interfaccia.
 * Entrambe con licenza aperta (SIL OFL 1.1).
 */
@font-face {
  font-family: "Literata";
  src: url("font/literata-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("font/literata-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("font/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* **Bianco, non carta.** Fino al 28 settembre 2026 il fondo era un crema caldo, scelto per far
     sembrare il sito un foglio invece di un pannello. Su una pagina di lettura funzionava; su un
     sito che vende formazione a delle aziende no, e Francesco l'ha detto senza giri di parole:
     sembra un blog, non un fornitore. Chi compra per duecento dipendenti guarda anche se il
     fornitore ha l'aria di uno che consegna.

     Quindi bianco per il foglio, e il grigio appena azzurrato per le fasce e gli incassi. Il
     calore se ne va e non manca a nessuno: a tenere in piedi la pagina ci sono il blu, il nero e
     lo spazio, che e quello che fa un'aria professionale — non la tinta del fondo. */
  --ground: #ffffff;
  --ground-2: #f2f5f9;      /* fasce alternate, pedana, fondi incassati */
  --surface: #ffffff;       /* le schede: bianche, staccate dal bordo e non dal colore */
  --surface-2: #eaeff5;     /* incassi: codice, intestazioni di tabella, traccia */
  --ink: #11141a;
  --ink-soft: #444b57;
  --ink-faint: #5a6371;     /* metadati piccoli: 5.6:1 sul bianco, non un grigio finto */
  --line: #dde3ea;          /* filetti decorativi */
  --line-forte: #79838f;    /* bordi che contano: campi, traccia, opzioni (>=3.4:1 su
                               bianco, superficie e incassi: misurati tutti e tre) */

  /* L'accento è il blu di AdCapital, la società che realizza Skillstone.
     Due trappole evitate di proposito:
     — non è il blu dei collegamenti di sistema (#0d6efd, #1a73e8): quello, accanto a della
       prosa, fa sembrare ogni cosa cliccabile e la pagina un modulo da compilare;
     — non è il blu chiaro «pannello amministrativo»: è un blu inchiostro, scuro e un po'
       spento, di quelli che stanno sulla tela di una copertina. Su carta tiene 8:1. */
  --accent: #1d4a77;
  --accent-forte: #143a5e;
  --accent-soft: #dde6ef;

  /* Il verde non è più l'accento: è il colore semantico di «completato», e basta. Tenerli
     separati serve a una cosa pratica — un capitolo fatto e un collegamento non devono
     avere lo stesso colore, altrimenti il verde non significa più niente. */
  --fatto: #2f6b4f;
  --fatto-soft: #dbe8de;

  --warn: #7d5310;
  --warn-soft: #f4e7cd;
  --errore: #8c2f20;
  --errore-soft: #f7e1db;

  /* Ombre in token, così il tema scuro non si porta dietro ombre nere inutili. */
  --ombra-posa: 0 1px 1px rgba(26, 30, 40, 0.05), 0 8px 20px -14px rgba(26, 30, 40, 0.3);
  --ombra-alta: 0 1px 2px rgba(26, 30, 40, 0.06), 0 18px 36px -22px rgba(26, 30, 40, 0.36);

  /* Misure. Una colonna sola, e la prosa la riempie invece di stare in un angolo. */
  --colonna: 40rem;
  --colonna-larga: 62rem;
  --misura: 66ch;
  --margine: 20px;          /* mai sotto i 16px richiesti, nemmeno a 320px */
  --raggio: 4px;
  --raggio-grande: 8px;

  --lettura: "Literata", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --interfaccia: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #15171b;
    --ground-2: #0f1114;
    --surface: #1d2025;
    --surface-2: #262a30;
    --ink: #e8eaee;
    --ink-soft: #a6abb4;
    --ink-faint: #979ca5;
    --line: #2e3238;
    --line-forte: #80838b;

    /* Lo stesso blu non si può usare al buio: a 8:1 su carta corrisponde a un blu chiaro
       su fondo scuro, non allo stesso esadecimale. */
    --accent: #7fb1e0;
    --accent-forte: #a6cbee;
    --accent-soft: #16283a;

    --fatto: #6fbf95;
    --fatto-soft: #16291f;

    --warn: #d9a55f;
    --warn-soft: #322516;
    --errore: #e58f7f;
    --errore-soft: #331b16;

    --ombra-posa: 0 1px 1px rgba(0, 0, 0, 0.4), 0 8px 20px -14px rgba(0, 0, 0, 0.7);
    --ombra-alta: 0 1px 2px rgba(0, 0, 0, 0.45), 0 18px 36px -22px rgba(0, 0, 0, 0.8);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* La pagina finiva con un vuoto grande sopra la pedana: la colonna non arrivava in fondo
   e la pedana galleggiava a metà schermo. Con la colonna a tutta altezza la pedana sta
   dove uno se l'aspetta, in fondo. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--lettura);
  font-size: 1.0625rem;   /* 17px con le impostazioni di serie, ma segue il browser:
                             in px assoluti la prosa non cresceva e finiva piu piccola
                             dell'interfaccia, che e tutta in rem */
  line-height: 1.62;
  font-optical-sizing: auto;
  text-underline-offset: 0.16em;
}

@media (min-width: 46rem) {
  body { font-size: 1.109rem; }
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--colonna);
  margin: 0 auto;
  padding-inline: var(--margine);
  padding-block: 40px 56px;
}

/* Le pagine pubbliche hanno il catalogo e i documenti con l'indice: lì la colonna sola sta
   stretta, e la larghezza serve davvero. */
body.pubblico main { max-width: var(--colonna-larga); }

/* Esce dalla colonna di proposito, restando centrato: il confronto traccia/esempio e le
   tabelle larghe. Sotto la soglia non fa niente, quindi non c'è scorrimento orizzontale. */
@media (min-width: 68rem) {
  .larga {
    width: var(--colonna-larga);
    margin-inline: calc((var(--colonna) - var(--colonna-larga)) / 2);
  }
}

/* --- tipografia ------------------------------------------------------------------------
 * Titoli col carattere da lettura: è la scelta che fa sembrare l'area un libretto invece
 * di un pannello. I sottotitoli interni (h3) passano al sans, così si distinguono dal
 * corpo per registro e non solo per un paio di punti di corpo.
 */
h1, h2, .titolo-serif {
  font-family: var(--lettura);
  font-weight: 600;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.58rem, 1.12rem + 2vw, 2.05rem);
  line-height: 1.14;
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(1.2rem, 1.04rem + 0.7vw, 1.42rem);
  line-height: 1.22;
  margin: 38px 0 12px;
}

h3, h4, h5, h6 {
  font-family: var(--interfaccia);
  font-weight: 600;
  letter-spacing: 0.002em;
}
h3 { font-size: 1.02rem; line-height: 1.34; margin: 28px 0 8px; }
h4 { font-size: 0.9rem; margin: 22px 0 6px; }

.soprattitolo {
  font-family: var(--interfaccia);
  font-size: 0.71rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  margin: 0 0 10px;
}
/* Il quadrello: la sola cromatura del disegno, e serve a far cominciare la riga da
   qualche parte invece di lasciarla galleggiare. */
.soprattitolo::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.6em;
  vertical-align: 0.06em;
  background: currentColor;
}

.sommario {
  font-size: 1.06rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

p { margin: 0 0 15px; }
ul, ol { margin: 0 0 16px; padding-left: 1.4em; }
li { margin-bottom: 6px; }
li::marker { color: var(--ink-faint); }
ol li::marker { font-family: var(--interfaccia); font-size: 0.86em; }

a { color: var(--accent); text-decoration-thickness: 1px; }
a:hover { color: var(--accent-forte); }

hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

strong, b { font-weight: 600; }

blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink-soft);
  font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

code, pre, kbd {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}
code {
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 0 0 20px;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* --- fascia di costruzione --- */
.fascia-costruzione {
  background: var(--warn-soft);
  color: var(--warn);
  font-family: var(--interfaccia);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 7px var(--margine);
}

/* --- testata --- */
.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  width: 100%;
  max-width: var(--colonna-larga);
  margin: 0 auto;
  padding: 16px var(--margine);
}
.marchio {
  font-family: var(--interfaccia);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.marchio span { color: var(--accent); }

.testata nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  font-family: var(--interfaccia);
  font-size: 0.86rem;
}
.testata nav a {
  display: inline-block;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 10px 0;
}
.testata nav a:hover { color: var(--accent); text-decoration: underline; }

/* L'uscita è un form POST con token, ma nella testata deve leggersi come le altre voci. */
.testata .uscita { margin: 0; display: inline; }
.testata .uscita button {
  font-family: var(--interfaccia);
  font-size: 0.86rem;
  background: none;
  border: none;
  padding: 10px 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.testata .uscita button:hover { color: var(--accent); text-decoration: underline; }

/* --- bottoni --------------------------------------------------------------------------
 * Sul telefono l'azione primaria va a tutta larghezza: è il bersaglio più facile da
 * prendere col pollice, e toglie il dubbio su dove si clicca.
 */
.bottone,
.bottone-grande,
.bottone-secondario,
.bottone-pericolo {
  font-family: var(--interfaccia);
  font-weight: 600;
  letter-spacing: 0.004em;
  border-radius: var(--raggio);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* `min-height` piu `inline-flex`: 44px veri anche quando il testo e una parola corta.
   Con il solo padding stavano a 42,8px, cioe sotto il bersaglio comodo per un pollice. */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--accent);
  color: var(--ground);
  border: 1px solid var(--accent);
  font-size: 0.88rem;
  padding: 9px 18px;
}
.bottone:hover { background: var(--accent-forte); border-color: var(--accent-forte); color: var(--ground); }

.bottone-grande {
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: 14px 24px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ground);
}
@media (min-width: 30rem) {
  .bottone-grande { display: inline-block; width: auto; min-width: 16rem; }
}

.bottone-secondario,
.bottone-pericolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  font-size: 0.86rem;
  padding: 9px 18px;
}
.bottone-secondario { border: 1px solid var(--line-forte); color: var(--ink); }
.bottone-secondario:hover { border-color: var(--accent); color: var(--accent); }
.bottone-pericolo { border: 1px solid var(--errore); color: var(--errore); }
.bottone-pericolo:hover { background: var(--errore-soft); }

/* Un pulsante spento deve sembrare spento.
 *
 * Tre pulsanti dell'area prendono `disabled` quando l'azienda è archiviata, e senza questa regola
 * restavano blu pieni, col dito che cambia forma sopra: identici a quelli che funzionano. Chi
 * gestisce un cliente archiviato ci cliccava sopra e non succedeva niente, che è il modo peggiore
 * di dire «no». Il contrasto resta leggibile: un pulsante spento va letto, non nascosto. */
.bottone:disabled,
.bottone-grande:disabled,
.bottone-secondario:disabled,
.bottone-pericolo:disabled {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-faint);
  cursor: not-allowed;
}
.bottone:disabled:hover,
.bottone-grande:disabled:hover,
.bottone-secondario:disabled:hover,
.bottone-pericolo:disabled:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-faint);
}

/* --- tabelle --- */
.scorrevole {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  background: var(--surface);
  margin: 0 0 22px;
}
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
th {
  font-family: var(--interfaccia);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  background: var(--surface-2);
  /* Era nowrap: su un telefono bastavano tre colonne per mandare la tabella fuori
     schermo. Le intestazioni vanno a capo, e il contenitore scorrevole resta la rete. */
  white-space: normal;
}
tbody tr:last-child td { border-bottom: none; }

/* L'apertura e le schede del catalogo stanno in fondo al foglio, nella sezione «la vetrina»:
   sono state rifatte il 28 settembre 2026 insieme al resto della home. Qui resta solo la scheda
   com'era, perche la usano anche pagine che non sono la home. */

/* --- documento con indice --- */
.con-indice { display: grid; gap: 34px; }
@media (min-width: 60rem) {
  .con-indice { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .indice { position: sticky; top: 24px; align-self: start; max-height: 88vh; overflow-y: auto; }
}
.indice { font-family: var(--interfaccia); font-size: 0.83rem; }
.indice-titolo {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.indice ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.indice li { margin: 0; }
.indice a {
  display: block;
  padding: 6px 14px;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.34;
}
.indice a:hover { color: var(--accent); background: var(--surface); }

.documento { min-width: 0; }
.documento > h1:first-child, .documento > .avviso + h1 { margin-top: 0; }
.documento h2:first-of-type { margin-top: 18px; }
.documento p, .documento ul, .documento ol { max-width: var(--misura); }

/* --- il disegno fa parte del contenuto ------------------------------------------------
 * DECISIONI.md, sezione 4-bis, criterio 5: «uno schema che spiega il meccanismo, un
 * prima-e-dopo affiancati, un riquadro che isola la regola da ricordare. Una pagina di soli
 * paragrafi grigi non rispetta questa sezione».
 *
 * Le lezioni però sono Markdown, e il Markdown produce sempre le stesse poche cose. Invece
 * di chiedere a chi scrive una marcatura nuova, si dà una forma a quelle che già escono:
 *
 *   > citazione      il riquadro della regola da ricordare
 *   | tabella |      lo schema: una situazione per riga, cosa fare accanto
 *   1. elenco        i passi, numerati e distanziati come passi
 *   - **termine**    termine e spiegazione, non un elenco di frasi
 *   ---              lo stacco fra due momenti del capitolo
 *
 * Così un capitolo scritto normalmente esce già con dentro tre forme diverse, e la pagina
 * non è un muro di paragrafi.
 */

/* La regola da ricordare. Era una citazione in corsivo grigio, cioè la cosa meno
   memorabile della pagina: adesso è l'unico blocco della prosa con un fondo. */
.documento blockquote {
  margin: 28px 0;
  padding: 18px 20px;
  max-width: var(--misura);
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 0 var(--raggio) var(--raggio) 0;
  background: var(--accent-soft);
  color: var(--ink);
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.56;
}
.documento blockquote p { max-width: none; }

/* Lo schema. La prima colonna è la situazione da riconoscere, quindi porta il peso; le
   righe alterne servono a seguire la riga fino in fondo su uno schermo stretto. */
.documento .scorrevole { background: var(--surface); }
/* Era `--ground`, che staccava dal bianco della scheda. Adesso il foglio e bianco anche lui:
   senza questo cambio le righe alterne sparivano. */
.documento tbody tr:nth-child(even) td { background: var(--ground-2); }
.documento td:first-child { font-weight: 600; color: var(--ink); }

/* I passi. Il numero resta un ::marker vero, così l'elenco non perde le sue semantiche:
   un cerchietto disegnato costerebbe `list-style: none`, e con quello Safari smette di
   annunciare «elenco di tre elementi». Il numero si colora e si mette nel sans. */
.documento ol { padding-left: 1.7em; }
.documento ol > li {
  margin-bottom: 12px;
  padding-left: 0.2em;
}
.documento ol > li::marker {
  color: var(--accent);
  font-family: var(--interfaccia);
  font-weight: 600;
  font-size: 0.92em;
}

/* Termine e spiegazione: «**Risposta inventata.** Il testo è credibile e la fonte non
   esiste» diventa una voce di glossario, non una frase lunga con del grassetto dentro. */
.documento li > strong:first-child {
  font-family: var(--interfaccia);
  font-size: 0.96em;
  font-weight: 600;
  letter-spacing: -0.004em;
  color: var(--ink);
}

/* Lo stacco. Una riga di confine larga tutta la colonna divide due capitoli, non due
   momenti dello stesso: qui basta un segno piccolo in mezzo. */
.documento hr {
  border: none;
  height: 0;
  margin: 36px 0;
  overflow: visible;
}
.documento hr::after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 auto;
  background: var(--line-forte);
  transform: rotate(45deg);
}

/* --- avvisi -------------------------------------------------------------------------- */
.avviso, .errore {
  border-radius: var(--raggio);
  padding: 13px 16px;
  font-family: var(--interfaccia);
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 3px solid currentColor;
}
.avviso { background: var(--warn-soft); color: var(--warn); margin: 0 0 24px; }
.errore { background: var(--errore-soft); color: var(--errore); margin: 0 0 20px; }
.avviso a, .errore a { color: inherit; }

/* La nota non è un riquadro: è una riga di servizio sotto qualcosa. Prima aveva un fondo
   grigio, e due note di fila diventavano una macchia senza significato. */
.nota {
  background: none;
  padding: 0;
  margin: 10px 0 0;
  font-family: var(--interfaccia);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.origine {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--interfaccia);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* --- elenco documenti dell'area riservata --- */
.documenti { list-style: none; padding: 0; margin: 0 0 12px; }
.documenti li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.documenti a { text-decoration: none; font-weight: 600; font-size: 0.96rem; }
.documenti a:hover { text-decoration: underline; }
.percorso {
  font-family: var(--interfaccia);
  font-size: 0.75rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

/* --- campi --------------------------------------------------------------------------- */
.modulo { display: grid; gap: 6px; margin-top: 22px; }
.modulo label {
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.modulo label + input { margin-bottom: 12px; }
.modulo input,
.campo input,
.campo textarea,
.campo select {
  font: inherit;
  font-family: var(--interfaccia);
  font-size: 1rem;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-forte);
  border-radius: var(--raggio);
  background: var(--surface);
  color: var(--ink);
}
.modulo input:focus,
.campo input:focus,
.campo textarea:focus {
  border-color: var(--accent);
}
.modulo button { margin-top: 4px; }

/* Le caselle e i radio: il bersaglio deve essere grande anche col pollice. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 1.5rem;
  height: 1.5rem;
}

/* --- caselle di controllo nelle checklist --- */
.casella { color: var(--ink-faint); font-family: var(--interfaccia); }
.casella.fatta { color: var(--accent); }

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

.vuoto { color: var(--ink-faint); }

/* La riga di aiuto sotto un campo, e il blocco che tiene l'unica azione di una pagina.
   Stanno qui e non in area.css perché le usano anche l'accesso e la pagina 404. */
.aiuto {
  font-family: var(--interfaccia);
  font-size: 0.79rem;
  color: var(--ink-faint);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.azione-sola { margin: 24px 0 34px; }

/* --- il cancello: accesso, password, pagine senza sessione -----------------------------
 * Erano nude: un titolo e due campi appoggiati in alto a sinistra di una pagina vuota.
 * Sono le prime tre schermate che un dipendente vede di Skillstone, quindi devono essere
 * della stessa famiglia delle altre: una scheda sola, centrata, su carta.
 */
body.cancello main {
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 28px 44px;
}
.cancello-scheda {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra-alta);
  padding: 30px 26px 28px;
  margin: 0;
}
.cancello-scheda h1 { font-size: 1.5rem; margin-bottom: 10px; }
.cancello-scheda .sommario { font-size: 1rem; margin-bottom: 4px; }
.cancello-scheda .modulo { margin-top: 24px; }
.cancello-scheda .modulo .bottone-grande {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}
.cancello-scheda .aiuto { margin: -6px 0 12px; }
.cancello-azione { margin: 22px 0 0; }
@media (min-width: 30rem) {
  .cancello-scheda { padding: 34px 32px 30px; }
}
.cancello-piede {
  margin: 20px 2px 0;
  font-family: var(--interfaccia);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cancello-piede a { display: inline-block; padding-block: 5px; font-weight: 600; }
.cancello-piede p { margin: 0 0 6px; }
.cancello-piede p:last-child { margin: 0; }

/* --- pedana --------------------------------------------------------------------------
 * Su una fascia più scura del foglio, così la pagina ha una fine visibile invece di
 * sfumare nel vuoto.
 */
.pedana {
  flex: 0 0 auto;
  background: var(--ground-2);
  border-top: 1px solid var(--line);
  font-family: var(--interfaccia);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
/* `.pedana > *` incolonnava e spaziava ogni figlio: con le colonne del 28 settembre 2026 lo
   fanno `.pedana-colonne` e `.pedana-fondo`, ognuna con la sua misura. Qui resta solo il respiro
   sopra e sotto. */
.pedana { padding-block: 40px 30px; }
.pedana p { margin: 0; }

/* **Il pie di pagina dell'area era finito contro il bordo sinistro.** Le colonne nuove del sito
   pubblico si impaginano da se, quindi avevo tolto il `.pedana > *` che centrava e distanziava
   ogni figlio — ma l'area ha il suo pie di pagina, fatto di paragrafi, che su quel `> *` si
   reggeva. Qui torna, per il solo pie di pagina dell'area. */
.area-pedana > * {
  max-width: var(--colonna-larga);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.area-pedana > p { padding-block: 6px; }
.pedana a { display: inline-block; padding-block: 5px; color: var(--ink-soft); }
/* Informativa e cookie esistevano e si raggiungevano solo scrivendo l'indirizzo. */
.pedana-legale { padding-block: 0 18px; }
.pedana > p:first-child + .pedana-legale { padding-top: 0; }
.pedana > p:not(:last-child) { padding-bottom: 6px; }

/* --- messa a fuoco -------------------------------------------------------------------
 * Spesso a spiegarlo nessuno c'è: chi si muove con la tastiera deve vedere dov'è senza
 * cercarlo. Anello spesso, staccato, nel colore del marchio.
 */
/* --- salto al contenuto: visibile solo col focus da tastiera --- */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--interfaccia);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 11px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-alta);
}
.salta:focus { left: 8px; top: 8px; }

/* --- avviso sui cookie ---------------------------------------------------------------
 * Informa, non chiede: il sito usa un solo cookie tecnico. Sta in fondo al documento e non
 * e una fascia fissa di proposito — una barra incollata in basso coprirebbe la colonna di
 * lettura, e questo avviso non deve sbarrare la strada a niente. «Ho capito» e un
 * collegamento vero (la chiusura e una rotta che mette un cookie), quindi ha bisogno del
 * suo riquadro per arrivare a 44px: come collegamento in linea era alto una riga di testo.
 */
.avviso-cookie {
  flex: 0 0 auto;
  background: var(--ground-2);
  border-top: 1px solid var(--line-forte);
  padding: 16px var(--margine);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.avviso-cookie-testo {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.avviso-cookie-testo strong { color: var(--ink); font-weight: 600; }
.avviso-cookie-chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid var(--line-forte);
  border-radius: var(--raggio);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--interfaccia);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}
.avviso-cookie-chiudi:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 46rem) {
  .avviso-cookie {
    justify-content: space-between;
    padding-inline: calc((100vw - var(--colonna-larga)) / 2 + var(--margine));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* --- fascia «stai guardando l'area di un altro» ---------------------------------------
 * Sta in questo foglio e non in area.css perché deve comparire anche sulle pagine
 * pubbliche: chi amministra esce dall'area, apre il catalogo, e non deve perdere di vista
 * in che panni si trova.
 *
 * È l'unico posto del sito che usa --errore come fondo pieno. È voluto: un colore che non
 * si vede da nessun'altra parte non si confonde con niente. Chi si dimentica di essere in
 * questa modalità combina guai, quindi la fascia non è un'etichetta discreta.
 *
 * `sticky` e non `fixed`: fixed toglie spazio al contenuto e lo copre quando la tastiera
 * del telefono si apre. Sticky resta in alto scorrendo e non ruba niente a nessuno.
 *
 * I due token si invertono da soli nel tema scuro (--errore diventa chiaro, --surface
 * scuro): il contrasto resta sopra 6:1 in tutti e due i casi, senza una seconda tavolozza.
 */
.fascia-impersona {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--errore);
  color: var(--surface);
  border-bottom: 2px solid var(--ink);
}
.fascia-impersona-dentro {
  max-width: var(--colonna-larga);
  margin: 0 auto;
  padding: 9px var(--margine);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
}
.fascia-impersona-chi {
  margin: 0;
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  line-height: 1.4;
}
.fascia-impersona-chi b { display: block; font-size: 0.92rem; }
.fascia-impersona-chi span { opacity: 0.92; }
.fascia-impersona-fine { margin: 0; }
.fascia-impersona-fine button {
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  min-height: 38px;
  border: 2px solid var(--surface);
  border-radius: var(--raggio);
  background: var(--surface);
  color: var(--errore);
  cursor: pointer;
}
.fascia-impersona-fine button:hover { background: transparent; color: var(--surface); }
.fascia-impersona-fine button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* --- acquisto: i due moduli con cui si compra ------------------------------------------
 * Un modulo lungo su un telefono è il punto in cui si perde un ordine. Tre regole:
 *
 * 1. UNA COSA PER RIGA, e il campo sempre sotto la sua etichetta. Niente colonne affiancate:
 *    a 320px si accavallano, e con due campi per riga il pollice sbaglia sempre bersaglio.
 * 2. L'ERRORE STA SOTTO IL SUO CAMPO, in rosso e a parole. Un elenco di errori in cima alla
 *    pagina costringe a cercare quale campo intendeva.
 * 3. IL PREZZO È GRANDE E IL CORSO SI TOCCA TUTTO. La riga del corso è una sola etichetta:
 *    si spunta toccando il titolo o il prezzo, non solo il quadratino.
 *
 * Le pagine funzionano identiche senza JavaScript: la scelta del formato è fatta di
 * collegamenti, il totale lo scrive il server dopo l'invio.
 */
.acquisto-modulo { display: grid; gap: 4px; margin: 26px 0 30px; max-width: var(--colonna); }
.acquisto-modulo > .bottone-grande { justify-self: start; margin-top: 10px; }

.campo { display: grid; gap: 5px; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.campo > label,
.campo > legend {
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0;
}
.campo > legend { margin-bottom: 4px; }
.campo select { appearance: none; background-image: none; }
.facoltativo {
  font-weight: 400;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: 0;
}
.campo-errore {
  font-family: var(--interfaccia);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--errore);
  line-height: 1.45;
}
.campo input[aria-invalid="true"] { border-color: var(--errore); }

/* Il formato: due schede, che sono collegamenti veri e non pulsanti finti. */
.acquisto-formati {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}
.acquisto-formato {
  font-family: var(--interfaccia);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-forte);
  border-radius: var(--raggio);
  color: var(--ink-soft);
}
.acquisto-formato:hover { border-color: var(--accent); color: var(--accent); }
.acquisto-formato.attivo {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* L'elenco dei corsi: una riga per corso, tutta cliccabile. */
.acquisto-corsi { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.acquisto-corso {
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  background: var(--surface);
  margin: 0;
}
.acquisto-corso > label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 13px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
}
.acquisto-corso.senza-prezzo { padding: 13px 14px; display: grid; gap: 4px; background: var(--ground-2); }
.acquisto-corso-titolo { flex: 1 1 12rem; font-weight: 600; }
.acquisto-prezzo {
  font-family: var(--interfaccia);
  font-size: 1.02rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.acquisto-prezzo small {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--ink-faint);
  white-space: normal;
}
/* La casella dei posti, sulla riga del corso: stretta, perché ci vanno tre cifre. */
.acquisto-corso .acquisto-quantita { width: 5.5rem; flex: 0 0 auto; }

/* **La riga del preventivo aziendale: titolo a sinistra, numero a destra.** Prima il titolo
   stava su una riga e la casella sotto, larga quasi quanto la scheda: un campo numerico che
   sembra un campo di testo, e nessuno capisce che ci va un numero. Francesco, 28 settembre
   2026: «sistema il campo, si vede male». */
.acquisto-posti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 14px;
}
.acquisto-posti > .acquisto-corso-titolo { display: block; padding: 0; flex: 1 1 14rem; }
.acquisto-posti > input[type="number"] {
  margin: 0;
  width: 5.5rem;
  flex: 0 0 auto;
  text-align: center;
  font-family: var(--interfaccia);
  font-size: 1.05rem;
}

/* Radio e caselle in elenco, e il consenso. Il bersaglio è tutta la riga. */
.acquisto-scelte { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 6px; }
.acquisto-scelte li { margin: 0; }
.acquisto-scelte label,
.consenso label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.5;
}
.consenso { margin-top: 6px; }
.consenso label { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--raggio); }
.acquisto-scelte input, .consenso input { flex: 0 0 auto; margin-top: 0.15em; }

/* I blocchi di testo: listino vuoto, database muto, «cosa succede adesso». */
.acquisto-blocco {
  max-width: var(--colonna);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  padding: 22px 20px;
  margin: 0 0 24px;
}
.acquisto-blocco > h2:first-child, .acquisto-blocco > h3:first-child { margin-top: 0; }
.acquisto-blocco p:last-child { margin-bottom: 0; }
.acquisto-elenco { margin: 0; padding-left: 1.2em; }
.acquisto-passi { margin: 0; padding-left: 1.4em; }
.acquisto-passi li { margin-bottom: 9px; }
.acquisto-totale {
  font-family: var(--interfaccia);
  font-size: 0.94rem;
  margin: 14px 0 0;
  color: var(--ink-soft);
}
.acquisto-totale strong { color: var(--ink); }

/* =======================================================================================
 * LA VETRINA: la home e la pagina di un corso
 * =======================================================================================
 *
 * Rifatte il 28 settembre 2026, dopo che Francesco ha detto che il sito «non si può guardare».
 * Aveva ragione, e il difetto non era il colore: la home finiva dopo seicento pixel e poi c'era
 * mezzo schermo di niente. Chi arrivava non sapeva come funziona un corso, non sapeva che esiste
 * una versione per le aziende, non sapeva se c'è un attestato, e le schede non dicevano nessuna
 * delle tre cose che servono a scegliere — livello, impegno, a chi è rivolto.
 *
 * L'organizzazione è quella che usa chi vende corsi online, ed è stata presa guardando il sito di
 * Data Masters, che nella sezione 1 di DECISIONI.md è il nostro riferimento di mercato. Presa
 * l'architettura: promessa, come funziona, catalogo, aziende, formati, obiezioni, pie di pagina
 * vero. **Non presi il loro CSS né i loro colori**: un marchio nuovo che è il clone di un
 * concorrente parte perdendo, e le verifiche di anteriorità sono ancora da fare.
 *
 * Due regole che valgono qui come altrove: niente JavaScript — le parti che si aprono sono
 * `details`, che è HTML — e tutto deve reggere a 320px di larghezza.
 */

/* --- i due blu -------------------------------------------------------------------------
 * `--accent` resta il blu inchiostro, e il motivo per cui è spento sta scritto sopra, accanto
 * alla sua definizione: dentro la prosa un blu da collegamento di sistema fa sembrare ogni cosa
 * cliccabile. Ma una pagina di vendita senza un colore acceso da nessuna parte sembra un
 * documento, ed è il difetto che si stava correggendo. Quindi il vivo esiste e ha un mestiere
 * preciso: **solo le aree grandi e i pulsanti principali** — la parola in evidenza del titolo, la
 * fascia delle aziende, la chiamata all'azione. Mai dentro un paragrafo. */
:root {
  --vivo: #2450e6;
  --vivo-forte: #1a3cbd;
  --vivo-soft: #e7ecfd;
  /* Il colore del testo **sopra** il vivo. Esiste perche nel tema scuro il vivo diventa un
     azzurro chiaro, e il bianco sopra non si legge: due su uno di contrasto, cioe niente.
     Visto solo fotografando la home a tema scuro, che non avevo mai fatto. */
  --su-vivo: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vivo: #7d9bff;
    --vivo-forte: #a3b8ff;
    --vivo-soft: #151d3d;
    --su-vivo: #0d1017;
  }
}

/* --- il registro della vetrina ---------------------------------------------------------
 * Titoli in sans pesante invece che in serif. Non è una moda: il serif è la voce con cui si
 * **legge** una lezione, e nelle pagine di lettura resta. Una pagina che vende ha la voce di
 * un'insegna, e con il serif sembrava la prefazione di un manuale. */
body.vetrina h1,
body.vetrina h2 {
  font-family: var(--interfaccia);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body.vetrina h1 {
  font-size: clamp(2.05rem, 1.25rem + 3.6vw, 3.35rem);
  line-height: 1.06;
  margin: 0 0 18px;
}
/* La seconda riga del titolo in colore: è il modo più corto di dire dove finisce la premessa e
   comincia la promessa, e si legge anche a colpo d'occhio. */
body.vetrina h1 span { color: var(--vivo); }

body.vetrina h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
  line-height: 1.16;
  margin: 0 0 14px;
}

body.vetrina h3 {
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
}

/* --- la home respira: le fasce escono dalla colonna ------------------------------------
 * Solo la home. `main` ha una colonna e dei margini, e con quelli una fascia colorata a tutta
 * larghezza non si può fare: qui la colonna si sposta dentro ogni sezione. Le altre pagine
 * pubbliche — i documenti legali, l'acquisto, l'accesso — restano come stanno, perché lì la
 * colonna unica è giusta. */
body.home main {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}

.sezione,
.fascia-dentro {
  width: 100%;
  max-width: var(--colonna-larga);
  margin-inline: auto;
  padding-inline: var(--margine);
}

.sezione { padding-block: clamp(46px, 7vw, 82px); }
.sezione-stretta { max-width: calc(var(--colonna) + 6rem); }
.fascia-dentro { padding-block: clamp(46px, 7vw, 82px); }

.fascia { background: var(--ground-2); border-block: 1px solid var(--line); }

/* Il sommario di una sezione: una riga sotto il titolo che dice perché la sezione esiste.
   Larghezza limitata, perché una frase lunga su 62rem si legge male. */
.sezione-sommario {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 30px;
}

/* --- l'apertura ------------------------------------------------------------------------ */
.apertura { margin-bottom: 36px; }
.apertura.stretta { max-width: var(--colonna); }

body.home .apertura {
  max-width: var(--colonna-larga);
  margin-inline: auto;
  padding: clamp(48px, 8vw, 96px) var(--margine) clamp(40px, 6vw, 72px);
  margin-bottom: 0;
}
body.home .apertura .sommario {
  font-size: clamp(1.06rem, 1rem + 0.4vw, 1.22rem);
  max-width: 54ch;
  margin-bottom: 28px;
}

/* I pulsanti dell'apertura stanno in fila su schermo largo e uno sotto l'altro sul telefono.
   `.bottone-grande` è a larghezza piena sotto i 30rem, quindi qui si lascia fare a lui. */
.apertura-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
@media (min-width: 30rem) {
  .apertura-azioni .bottone-grande { min-width: 0; }
}

/* La riga sotto i pulsanti: le tre cose che tolgono l'ansia prima ancora di cliccare. */
.apertura-nota {
  font-family: var(--interfaccia);
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
}

/* --- griglie ---------------------------------------------------------------------------
 * `auto-fit` con un minimo: a 320px è una colonna, poi due, poi quattro, senza scrivere tre
 * media query. Il minimo è 13rem perché sotto quella misura il titolo di una voce va a capo
 * dopo una parola e la griglia sembra rotta. */
.griglia-quattro,
.griglia-tre,
.griglia-due {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.griglia-quattro { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.griglia-tre { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* Due riquadri: «per te» e «per la tua azienda». Il minimo e piu alto degli altri perche qui
   dentro c'e un paragrafo intero, non una riga, e a 15rem andava a capo ogni tre parole. */
.griglia-due { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

.griglia-quattro li { margin: 0; }
.griglia-quattro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Le icone sono disegnate qui e non caricate da fuori: un'icona è contenuto, e dipendere da un
   servizio esterno per quattro tratti vorrebbe dire un dominio in più nella CSP. */
.icona {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
  fill: none;
  stroke: var(--vivo);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- le schede del catalogo ------------------------------------------------------------ */
.schede { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 45rem) { .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.scheda {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  padding: 24px 22px;
  margin: 0;
  box-shadow: var(--ombra-posa);
}
.scheda h3 {
  margin: 0;
  font-family: var(--interfaccia);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.22;
}
.scheda p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }
.scheda .bottone { margin-top: auto; align-self: start; }

.scheda-etichette { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* I dati che servono a scegliere. In `dl` e non in un paragrafo perché sono coppie
   etichetta-valore, e uno screen reader le legge come tali. */
.scheda-dati {
  margin: 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.scheda-dati div { display: flex; gap: 10px; align-items: baseline; }
.scheda-dati dt {
  font-family: var(--interfaccia);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  flex: 0 0 5.4rem;
}
.scheda-dati dd {
  margin: 0;
  font-family: var(--interfaccia);
  font-size: 0.88rem;
  color: var(--ink);
}

/* --- pillole --------------------------------------------------------------------------- */
.pillola {
  display: inline-block;
  font-family: var(--interfaccia);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* Interlinea sua: eredita 1.6 dal corpo del testo, e dentro una pillola alta ventisei pixel
     il testo tocca i bordi e sembra tagliato. */
  line-height: 1.5;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--vivo-soft);
  color: var(--vivo-forte);
  margin: 0;
}
.pillola-attesa { background: var(--warn-soft); color: var(--warn); }

/* --- la fascia delle aziende -----------------------------------------------------------
 * È l'unica area grande di colore pieno della pagina, ed è voluto: le aziende sono il canale
 * principale (sezione 2 di DECISIONI.md) e prima non erano nominate da nessuna parte. Una
 * fascia piena dice «qui si parla a qualcun altro» senza doverlo scrivere. */
.fascia-scura {
  background: var(--vivo-forte);
  border-block: 0;
  color: #f2f5ff;
}
.fascia-scura h2 { color: #fff; }
.fascia-scura .soprattitolo { color: #b9c8ff; }
.fascia-scura p { color: #dbe3ff; }
.fascia-scura strong { color: #fff; }
.fascia-scura .bottone {
  background: #fff;
  border-color: #fff;
  color: var(--vivo-forte);
}
.fascia-scura .bottone:hover {
  background: #e7ecfd;
  border-color: #e7ecfd;
  color: var(--vivo-forte);
}

.fascia-due { display: grid; gap: 34px; }
@media (min-width: 52rem) {
  .fascia-due { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
}

/* L'elenco con la spunta: il segno è disegnato col bordo, non con un carattere, così non
   dipende dal set di emoji del sistema e resta allineato a qualsiasi corpo. */
.elenco-spuntato { list-style: none; margin: 0; padding: 0; }
.elenco-spuntato li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 15px;
  font-size: 0.99rem;
}
.elenco-spuntato li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 8px;
  height: 14px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0.85;
}

/* --- i riquadri dei formati ------------------------------------------------------------ */
.riquadro {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.riquadro p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
/* Quello consigliato si distingue col bordo, non con un'etichetta più grande: chi guarda tre
   riquadri uguali non sa da dove cominciare. */
.riquadro-scelto {
  border-color: var(--vivo);
  box-shadow: 0 0 0 1px var(--vivo), var(--ombra-posa);
}
.riquadro-prezzo {
  margin-top: auto;
  font-family: var(--interfaccia);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-faint);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.nota-sotto {
  font-family: var(--interfaccia);
  font-size: 0.88rem;
  color: var(--ink-faint);
  max-width: 62ch;
  margin: 26px 0 0;
}

/* --- le domande ------------------------------------------------------------------------ */
.domande { border-top: 1px solid var(--line); }
.domande details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.domande summary {
  font-family: var(--interfaccia);
  font-weight: 600;
  font-size: 1.02rem;
  padding: 18px 34px 18px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.domande summary::-webkit-details-marker { display: none; }
/* Il più che diventa meno: due tratti, e quello verticale sparisce quando è aperto. */
.domande summary::after,
.domande summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--vivo);
  transition: opacity 120ms ease;
}
.domande summary::before { width: 13px; height: 2px; margin-top: -1px; }
.domande summary::after { width: 2px; height: 13px; margin-top: -6.5px; right: 11px; }
.domande details[open] summary::after { opacity: 0; }
.domande details p {
  margin: 0 0 18px;
  color: var(--ink-soft);
  max-width: 68ch;
}
.domande summary:focus-visible {
  outline: 2px solid var(--vivo);
  outline-offset: 2px;
  border-radius: var(--raggio);
}

/* --- la fascia di chiusura -------------------------------------------------------------- */
.fascia-chiusura { background: var(--ground-2); }
.fascia-chiusura .sezione-sommario { margin-bottom: 24px; }

/* --- la testata ------------------------------------------------------------------------
 * «Accedi» diventa un pulsante e non un collegamento come gli altri: è l'unica voce che porta
 * da un'altra parte invece che più in basso nella stessa pagina, e chi ha già comprato cerca
 * quella e basta. */
.voce-accesso {
  font-family: var(--interfaccia);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-forte);
  text-decoration: none;
}
.testata nav a.voce-accesso:hover {
  background: var(--vivo);
  border-color: var(--vivo);
  color: #fff;
  text-decoration: none;
}

/* --- il piè di pagina -------------------------------------------------------------------
 * Prima erano tre collegamenti legali e una riga, e la società non compariva da nessuna parte.
 * Per un'azienda che non ci conosce il piè di pagina è il posto dove si guarda chi c'è dietro:
 * lasciarlo vuoto è la cosa che fa chiudere la scheda. */
.pedana-colonne {
  width: 100%;
  max-width: var(--colonna-larga);
  margin-inline: auto;
  padding-inline: var(--margine);
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
@media (min-width: 58rem) {
  .pedana-colonne { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
}
.pedana-marchio p:last-child {
  color: var(--ink-faint);
  font-size: 0.9rem;
  max-width: 34ch;
  margin: 0;
}
.pedana-marchio .marchio { font-size: 1.16rem; margin: 0 0 10px; }
.pedana-titolo {
  font-family: var(--interfaccia);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  margin: 0 0 12px;
}
.pedana-colonne ul { list-style: none; margin: 0; padding: 0; }
.pedana-colonne li { margin: 0 0 9px; }
.pedana-colonne a {
  font-family: var(--interfaccia);
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.pedana-colonne a:hover { color: var(--accent); text-decoration: underline; }

.pedana-fondo {
  width: 100%;
  max-width: var(--colonna-larga);
  margin: 28px auto 0;
  padding: 20px var(--margine) 0;
  border-top: 1px solid var(--line);
}
.pedana-fondo p {
  margin: 0;
  font-family: var(--interfaccia);
  font-size: 0.83rem;
  color: var(--ink-faint);
}
.pedana-nota { margin-top: 8px !important; }

/* --- correzioni viste guardando la pagina renderizzata ---------------------------------
 * Tre cose che si sono viste solo aprendo la pagina, e nessuna si vedeva leggendo il foglio.
 */

/* 1. Il corpo del testo. I titoli erano passati al sans e i paragrafi erano rimasti serif: due
 *    voci nella stessa pagina, e si sentiva. Il serif resta dov'è la voce giusta — le lezioni,
 *    l'informativa, le condizioni — e queste due pagine vendono, non si leggono in poltrona. */
body.vetrina {
  font-family: var(--interfaccia);
  font-size: 1.02rem;
  line-height: 1.6;
}
@media (min-width: 46rem) {
  body.vetrina { font-size: 1.05rem; }
}

/* 2. I pulsanti erano rimasti nel blu inchiostro mentre la parola in evidenza del titolo era nel
 *    vivo: due blu diversi a mezzo schermo di distanza sembravano un errore di stampa. Sulla
 *    vetrina comanda il vivo, e la forma diventa a pillola: è la differenza fra «pulsante di un
 *    modulo» e «chiamata all'azione», e qui servono le seconde. */
body.vetrina .bottone,
body.vetrina .bottone-grande {
  background: var(--vivo);
  border-color: var(--vivo);
  border-radius: 999px;
  color: var(--su-vivo);
}
body.vetrina .bottone:hover,
body.vetrina .bottone-grande:hover {
  background: var(--vivo-forte);
  border-color: var(--vivo-forte);
  color: var(--su-vivo);
}
body.vetrina .bottone-secondario { border-radius: 999px; }
body.vetrina .bottone-secondario:hover { border-color: var(--vivo); color: var(--vivo); }

/* Dentro la fascia piena il pulsante torna bianco: un pulsante blu su fondo blu non si vede.
   Serve la specificità in più, altrimenti vince la regola qui sopra. */
body.vetrina .fascia-scura .bottone {
  background: #fff;
  border-color: #fff;
  color: var(--vivo-forte);
}
body.vetrina .fascia-scura .bottone:hover {
  background: var(--vivo-soft);
  border-color: var(--vivo-soft);
  color: var(--vivo-forte);
}

/* 3. «Accedi» sembrava un cerchio schiacciato: `.testata nav a` è più specifico di
 *    `.voce-accesso` e vinceva lui col suo `padding: 10px 0`, quindi la pillola era alta e senza
 *    fianchi. Non è un problema d'ordine nel foglio — la specificità non guarda l'ordine. */
.testata nav a.voce-accesso {
  padding: 9px 18px;
  color: var(--ink);
}

/* Il marchio prende il vivo come la parola in evidenza del titolo: sono la stessa cosa detta due
   volte, e con due blu diversi sembravano due marchi. */
body.vetrina .marchio span { color: var(--vivo); }

/* La pillola dentro un riquadro: `.riquadro` e una colonna flex, e i figli si allungano per
   difetto, quindi «Il caso normale» prendeva tutta la larghezza della scheda e sembrava una
   barra. Vale solo li: nelle schede del catalogo le pillole stanno in un paragrafo loro. */
.riquadro > .pillola { align-self: flex-start; }

/* --- la scheda della pagina di un corso -------------------------------------------------
 * Il contenuto a sinistra e la scheda a destra, che resta in vista mentre si scorre. Sotto i
 * 60rem la scheda va sopra il testo: su un telefono, la prima cosa che serve e sapere quanto
 * dura e cosa comprende, non leggere cinquemila parole per arrivarci.
 */
.con-scheda { display: grid; gap: 30px; }
@media (min-width: 60rem) {
  .con-scheda { grid-template-columns: minmax(0, 1fr) 20rem; gap: 48px; align-items: start; }
  .con-scheda .documento { order: 1; }
  .con-scheda .scheda-corso { order: 2; position: sticky; top: 24px; }
}

.scheda-corso-dentro {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  box-shadow: var(--ombra-posa);
  padding: 22px 20px;
}
.scheda-corso-titolo {
  font-family: var(--interfaccia);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.scheda-corso .scheda-dati { border-top: 0; padding-top: 0; margin-bottom: 22px; }
.scheda-corso .scheda-dati dt { flex-basis: 4.6rem; }

.elenco-compatto li { margin-bottom: 10px; font-size: 0.93rem; padding-left: 26px; }
.elenco-compatto li::before { width: 6px; height: 11px; border-width: 0 2px 2px 0; color: var(--fatto); }

.scheda-corso-prezzo {
  font-family: var(--interfaccia);
  font-size: 0.95rem;
  color: var(--ink-faint);
  margin: 20px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.scheda-corso-prezzo strong { font-size: 1.3rem; color: var(--ink); }

.scheda-corso-azioni { display: grid; gap: 9px; margin: 0 0 14px; }
.scheda-corso-azioni .bottone-grande { min-width: 0; width: 100%; }
.scheda-corso-azioni .bottone-secondario { width: 100%; }

.scheda-corso-nota {
  font-family: var(--interfaccia);
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin: 0;
}

/* `main` e un elemento flex di `body`, e per difetto un elemento flex **non si stringe sotto la
   larghezza del suo contenuto** (`min-width: auto`): basta una griglia dentro che chieda piu
   spazio e la pagina diventa piu larga dello schermo. E una precauzione, non la correzione di un
   guasto visto.

   Vale la pena scrivere come e andata, perche la prossima volta risparmia un'ora. Avevo
   fotografato la home a 360px e l'avevo vista sfondare: titolo tagliato, due colonne dove ne
   entrava una. Era falso. **Chrome headless su questa macchina non disegna sotto i 526px di
   viewport**, qualunque cosa gli si dica con `--window-size`: stavo guardando il ritaglio a 360
   di una pagina impaginata a 526. Misurato con una paginetta che stampa `clientWidth`, e poi
   rifatta la prova mettendo una copia della pagina dentro un iframe largo 360, che un viewport
   vero ce l'ha. A 360 la pagina sta in una colonna e non sfonda. */
main { min-width: 0; }
.griglia-quattro > li,
.griglia-tre > li,
.griglia-due > li,
.schede > li,
.fascia-due > * { min-width: 0; }

/* --- il resto del catalogo, in preparazione --------------------------------------------
 * Ventinove corsi e due apribili. Le schede intere stanno sui due che si possono aprire; gli
 * altri sono un elenco fitto, per area. La differenza di peso e voluta: un elenco dice «ci
 * stiamo arrivando», una scheda intera prometterebbe un corso che non c'e.
 */
.in-arrivo { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 34px; }
.in-arrivo-titolo {
  font-family: var(--interfaccia);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.in-arrivo .nota-sotto { margin: 0 0 26px; }

.materia { margin-bottom: 30px; }
.materia-titolo {
  font-family: var(--interfaccia);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
/* Il conto accanto al nome dell'area: dice quanto e grande il catalogo senza scriverlo. */
.materia-titolo span {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--vivo-soft);
  color: var(--vivo-forte);
  letter-spacing: 0;
}

.catalogo-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px 26px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.catalogo-elenco li { margin: 0; min-width: 0; }
.corso-nome {
  display: block;
  font-family: var(--interfaccia);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.3;
}
.corso-promessa {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-faint);
  line-height: 1.45;
  margin-top: 2px;
}

.scheda-a-chi { font-size: 0.93rem; }
.scheda-a-chi strong { color: var(--ink); }

/* --- il corso in evidenza ---------------------------------------------------------------
 * Subito sotto l'apertura, prima ancora di «come funziona»: e il corso con cui si entra dalle
 * aziende, ed e l'unico finito. La fascia e chiara e non blu perche la fascia blu, piu in basso,
 * e quella delle aziende: due fasce piene di seguito si annullano a vicenda.
 */
.fascia-evidenza { background: var(--ground-2); }

/* «Come funziona» sta su fondo bianco: e la sezione in mezzo a due fasce tinte, e tre fondi
   colorati di fila appiattiscono la pagina. Stessa misura e stesso respiro di una fascia. */
.sezione-fascia { background: var(--ground); }
.sezione-dentro {
  width: 100%;
  max-width: var(--colonna-larga);
  margin-inline: auto;
  padding-inline: var(--margine);
  padding-block: clamp(46px, 7vw, 82px);
}
.evidenza { display: grid; gap: 30px; }
@media (min-width: 56rem) {
  .evidenza { grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; }
}
.evidenza h2 { margin-bottom: 10px; }
.evidenza-promessa {
  font-size: 1.12rem;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 14px;
  max-width: 44ch;
}
/* **`:not(.pillola)` non e un vezzo: senza, la pillola era illeggibile.** `.evidenza-testo p`
   vale 0,1,1 e `.pillola-evidenza` vale 0,1,0, quindi il grigio del paragrafo vinceva sul bianco
   della pillola e «Il più richiesto adesso» finiva grigio su fondo blu, cioe invisibile. La
   specificita non guarda l'ordine nel foglio, e guardando il codice sembrava giusto. */
.evidenza-testo p:not(.pillola) { color: var(--ink-soft); max-width: 58ch; }
.pillola-evidenza { background: var(--vivo); color: var(--su-vivo); margin-bottom: 14px; }

/* I dati in colonna, con un filetto: si leggono senza entrare nella pagina del corso. */
.evidenza-dati {
  margin: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--raggio-grande);
  padding: 4px 18px;
  background: var(--ground);
}
.evidenza-dati div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.evidenza-dati div:last-child { border-bottom: 0; }
.evidenza-dati dt {
  font-family: var(--interfaccia);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  flex: 0 0 6.6rem;
}
.evidenza-dati dd { margin: 0; font-family: var(--interfaccia); font-size: 0.9rem; min-width: 0; }

/* Il livello accanto al nome, nell'elenco dei corsi in preparazione: con cinquanta corsi la
   materia da sola non basta a capire se un corso e per me. */
.corso-livello {
  display: inline-block;
  font-family: var(--interfaccia);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  margin-top: 3px;
}

/* --- la verifica pubblica di un attestato ----------------------------------------------
 * La legge chi ha in mano un PDF e vuole sapere se e vero: deve capire l'esito in un secondo,
 * quindi il riquadro e colorato dal bordo sinistro e il titolo dice gia tutto.
 */
/* La casella in cui si incolla il codice di un attestato. Il campo e il pulsante stanno sulla
   stessa riga e vanno a capo insieme sotto i 24rem; il codice si scrive col carattere
   dell'interfaccia e spaziato, perche si ricopia a mano da un foglio e le cifre vanno distinte. */
.verifica-modulo { margin: 22px 0 8px; display: grid; gap: 6px; max-width: var(--colonna); }
.verifica-modulo > label { font-weight: 600; }
.verifica-riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.verifica-riga > input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--interfaccia);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.verifica-riga > .bottone { flex: 0 0 auto; }

.riquadro-verifica {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-forte);
  border-radius: var(--raggio-grande);
  padding: 20px 22px;
  margin: 0 0 22px;
}
.riquadro-verifica h2 { margin-top: 0; font-size: 1.06rem; }
.riquadro-verifica p:last-child { margin-bottom: 0; }
.riquadro-ok { border-left-color: var(--fatto); background: var(--fatto-soft); }
.riquadro-no { border-left-color: var(--errore); background: var(--errore-soft); }
.riquadro-verifica .scheda-dati { border-top: 0; padding-top: 0; }
.riquadro-verifica .scheda-dati dt { flex-basis: 6.4rem; }
.riquadro-verifica code { font-size: 0.95em; }

/* --- il test pubblico ------------------------------------------------------------------
 * `/test`: quindici domande in una pagina sola, e il risultato sotto la stessa forma. Niente
 * JavaScript, quindi niente di tutto questo dipende da uno stato che il browser deve tenere.
 *
 * La regola che tiene insieme il blocco: **il colore non e l'unico segnale.** Giusta e sbagliata
 * si distinguono anche dall'etichetta scritta accanto («risposta giusta», «la tua») e dal bordo
 * a sinistra, perche un daltonico legge questa pagina come tutti gli altri. */
.test-modulo { display: grid; gap: 18px; margin: 26px 0 32px; max-width: var(--colonna); }
.test-modulo > .bottone-grande { justify-self: start; margin-top: 8px; }

.test-area {
  font-size: 0.82rem;
  font-family: var(--interfaccia);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 22px 0 -4px;
}
.test-area:first-of-type { margin-top: 0; }

.test-domanda {
  border: 1px solid var(--line);
  border-radius: var(--raggio);
  background: var(--surface);
  padding: 16px 18px;
  margin: 0;
}
.test-domanda > legend { font-weight: 600; padding: 0 0 10px; }

/* Il numero della domanda: un pallino davanti al testo, che regge anche quando il titolo va
   su tre righe perche e `inline-block` e non un elemento posizionato. */
.test-numero {
  display: inline-block;
  min-width: 1.6rem;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--interfaccia);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

/* --- il risultato --- */
.test-punteggio { font-size: 1.15rem; margin: 10px 0 4px; }
.test-punteggio strong { font-size: 1.5rem; font-family: var(--interfaccia); }
.test-percento { color: var(--ink-faint); }

.test-aree { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.test-aree > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
}
.test-area-nome { font-weight: 600; }
.test-aree .barra { grid-column: 1 / -1; }
.test-area-conto { font-family: var(--interfaccia); font-weight: 600; white-space: nowrap; }

.test-esito {
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-forte);
  border-radius: var(--raggio);
  background: var(--surface);
  padding: 16px 18px;
  margin: 0 0 14px;
}
.test-esito.test-ok { border-left-color: #1f7a4d; }
.test-esito.test-no { border-left-color: #b4341f; }
.test-esito-testo { font-weight: 600; margin: 0 0 10px; }

.test-opzioni { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.test-opzioni > li {
  margin: 0;
  padding: 7px 11px;
  border-radius: var(--raggio);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.test-opzioni > li.test-giusta { background: #e6f4ec; color: var(--ink); font-weight: 600; }
.test-opzioni > li.test-sbagliata { background: #fae9e6; color: var(--ink); }

/* L'etichetta e il segnale che non dipende dal colore. */
.test-etichetta {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ground-2);
  color: var(--ink-soft);
  font-family: var(--interfaccia);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.test-saltata { color: var(--ink-faint); margin: 0 0 8px; }
.test-spiegazione { margin: 0; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .test-opzioni > li.test-giusta { background: #16351f; }
  :root:not([data-theme="light"]) .test-opzioni > li.test-sbagliata { background: #3a1c18; }
}
:root[data-theme="dark"] .test-opzioni > li.test-giusta { background: #16351f; }
:root[data-theme="dark"] .test-opzioni > li.test-sbagliata { background: #3a1c18; }