/* ======================================================================
 * SIMULATORE DEL SEMESTRE FILTRO — /simulazione-semestre-filtro.html
 *
 * Un'idea sola, spesa bene: il FOGLIO D'ESAME. Le domande stanno su carta (serif, bordo sottile,
 * angoli quasi vivi), il modulo risposte ha le caselle stampate, le X a penna nera come chiede il
 * decreto, e la correzione è la penna rossa di Skoo. Tutto il resto è l'interfaccia di Skooly
 * (token di style.css, Inter, carte da 16px), tenuta quieta perché il foglio si veda.
 * Tre colori di materia: Chimica verde acqua (solfato di rame in soluzione), Fisica blu cobalto,
 * Biologia magenta eosina (i vetrini colorati con ematossilina ed eosina).
 * Prima il telefono (360 px), poi il computer. Tema chiaro e scuro (:root.dark, come il sito).
 *
 * DUE FOGLI (24/9/2026). Questo è quello della PRESENTAZIONE e dei pezzi comuni (token, bottoni,
 * foglio, modulo risposte, striscia dell'app, scheletro, «Scrivici»): è l'unico che blocca il primo
 * disegno, e chi arriva da Google scarica solo lui. Le schermate dell'app (cruscotto, allenamento,
 * prova, correzione, errori, materie, classifiche, profilo, teoria, pop e finestre) stanno in
 * semestre-filtro-app.css, che chiede solo chi ha l'account (sf/tema.js, poi app/main.js prima di
 * montare l'app). Una regola che serve anche alla presentazione va QUI; una solo dell'app va LÀ, che
 * viene dopo questo file: a pari specificità vince lei, come quando stava più in basso nel file unico.
 * ====================================================================== */

@font-face {
  font-family: "SF Serif";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/vendor/source-serif-4/source-serif-4-latin-wght-normal.woff2?v=c1df4596") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "SF Serif";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/vendor/source-serif-4/source-serif-4-latin-ext-wght-normal.woff2?v=41529a5b") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "SF Serif";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/vendor/source-serif-4/source-serif-4-greek-wght-normal.woff2?v=d84b0c5f") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "SF Serif";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/vendor/source-serif-4/source-serif-4-latin-wght-italic.woff2?v=663e7ef3") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- token */
.sf {
  --sf-serif: "SF Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* carta calda e inchiostro morbido (circa 13:1, sempre AAA): 50 minuti di lettura, tre volte di
     fila, senza il bianco-nero a 18:1 che fa vibrare le pagine lunghe */
  --sf-carta: #fbf7ee;
  --sf-carta-bordo: #e6dfcf;
  --sf-riga: #ece5d6;
  --sf-stampa: #4a4591;          /* l'inchiostro del modulo stampato */
  --sf-stampa-tenue: #6c6890;
  --sf-nero: #2a2630;            /* la penna nera del decreto */
  --sf-annulla: #2b2733;         /* la casella annerita: sempre scura, in entrambi i temi */
  --sf-lavagna: var(--text);     /* le lastre scure (finale della presentazione) */
  --sf-lavagna-testo: var(--bg1);
  --sf-rossa: #c8102e;           /* la penna rossa di Skoo */
  --sf-rossa-fondo: rgba(200, 16, 46, 0.07);
  --sf-verde: #13753a;
  --sf-verde-fondo: rgba(19, 117, 58, 0.08);
  --sf-ambra: #a15c07;
  --sf-chimica: #0b7a77;
  --sf-fisica: #3450c4;
  --sf-biologia: #b3316b;
  --sf-m: var(--accent);         /* il colore della materia in corso */
  --sf-ombra-carta: 0 1px 0 rgba(60, 45, 20, 0.04), 0 14px 32px -20px rgba(60, 45, 20, 0.35);
  --sf-r: 16px;
  --sf-tabbar: 0px;
}
:root.dark .sf {
  /* carta di notte: grafite calda, inchiostro color avorio (circa 11:1), niente bianco puro */
  --sf-carta: #1d1b22;
  --sf-carta-bordo: rgba(255, 255, 255, 0.10);
  --sf-riga: rgba(255, 255, 255, 0.07);
  --sf-stampa: #a49fd6;
  --sf-stampa-tenue: #8d88ad;
  --sf-nero: #e6e1d6;
  --sf-annulla: #0c0a12;
  --sf-lavagna: #1d1a2b;
  --sf-lavagna-testo: #f1eef8;
  --sf-rossa: #ff7b8b;
  --sf-rossa-fondo: rgba(255, 123, 139, 0.1);
  --sf-verde: #4ade80;
  --sf-verde-fondo: rgba(74, 222, 128, 0.1);
  --sf-ambra: #fbbf24;
  --sf-chimica: #3cc9c2;
  --sf-fisica: #93a6ff;
  --sf-biologia: #f384b4;
  --sf-ombra-carta: 0 14px 32px -18px rgba(0, 0, 0, 0.7);
}
.sf [data-materia="chimica"], .sf[data-materia="chimica"] { --sf-m: var(--sf-chimica); }
.sf [data-materia="fisica"], .sf[data-materia="fisica"] { --sf-m: var(--sf-fisica); }
.sf [data-materia="biologia"], .sf[data-materia="biologia"] { --sf-m: var(--sf-biologia); }
:root:not(.dark) body:has(.sf-esame[data-carta="seppia"]) { background: #ebe0c7; }

/* ---------------------------------------------------------------- pagina e visibilità */
.sf {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px 56px;
  color: var(--text);
}
html:not(.is-authed) #sf-app { display: none; }
html.is-authed #sf-presentazione { display: none; }
html.is-authed.sf-vedi-info #sf-presentazione { display: block; }
html.is-authed .sf-hero__cta, html.is-authed .sf-invito-mezzo, html.is-authed .sf-finale, html.is-authed .sf-sfida-ricevuta { display: none; }
.sf [hidden] { display: none !important; }
.sf h1, .sf h2, .sf h3 { color: var(--text); letter-spacing: -0.01em; }
.sf p { margin: 0 0 0.6em; }
/* Dentro l'app una sola navigazione: della barra di Skooly restano il logo e l'avatar */
html.sf-app-attiva .navbar__links { display: none; }
/* Una sola misura per linguette e schermate su desktop: i bordi sinistri non saltano cambiando
   schermata. Le colonne di lettura restano comode dentro le schede (misura del testo), non
   stringendo la schermata. La prova d'esame e la presentazione hanno la loro. */
@media (min-width: 761px) {
  html.sf-app-attiva:not(.sf-in-esame):not(.sf-vedi-info) .sf { --sf-colonna: 880px; max-width: calc(var(--sf-colonna) + 32px); }
  /* la barra in alto sulla stessa colonna dell'app: il logo non sporge a sinistra */
  html.sf-app-attiva:not(.sf-in-esame):not(.sf-vedi-info) .navbar .container { max-width: calc(880px + 32px); }
  html.sf-app-attiva:not(.sf-in-esame):not(.sf-vedi-info) :is(.sf-allenamento, .sf-configura, .sf-esito, .sf-classifiche, .sf-sfida, .sf-profilo) { max-width: none; }
}

/* ---------------------------------------------------------------- bottoni, link, piccoli pezzi */
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.sf-btn:active { transform: translateY(1px); }
.sf-btn:disabled, .sf-btn.is-spento { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* un bottone principale che aspetta la risposta: resta toccabile (dice cosa manca) ma non chiama l'occhio */
.sf .sf-btn.sf-btn--primario.is-attesa, .sf .sf-btn.sf-btn--primario.is-attesa:hover,
.sf .sf-btn.sf-btn--primario:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; }
.sf-btn--primario { background: var(--accent); color: #fff; }
@media (hover: hover) { .sf-btn--primario:hover { background: color-mix(in srgb, var(--accent) 86%, #000); } }
:root.dark .sf-btn--primario { color: #151226; }
@media (hover: hover) { :root.dark .sf-btn--primario:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); } }
.sf-btn--quieto { background: var(--surface-1); color: var(--text); border-color: var(--border-strong); }
@media (hover: hover) { .sf-btn--quieto:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } }
.sf-btn--grande { min-height: 54px; padding: 14px 24px; font-size: 17px; border-radius: 14px; }
.sf-link, .sf a.sf-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 600; }
.sf-link:hover { text-decoration-thickness: 2px; }
.sf-link-btn {
  background: none;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sf-nota { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sf-errore-riga { color: var(--sf-rossa); font-weight: 600; font-size: 14px; margin: 10px 0; }
.sf-voce-id {
  display: inline-block;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 4px;
  white-space: nowrap;
}
.sf-etichetta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--sf-m);
}
.sf-etichetta::before, .sf-pallino {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sf-m);
  flex: none;
}
.sf-verde { color: var(--sf-verde); }
.sf-penna-rossa { color: var(--sf-rossa); font-weight: 700; }
.sf-puntini { letter-spacing: 0.1em; color: var(--sf-stampa-tenue); padding: 0 2px; }
.sf-briciole { font-size: 14px; color: var(--muted); margin: 6px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-briciole a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* La pagina arriva ferma. L'ingresso animato del sito (style.css: .page fadeInUp 0,4 s, .navbar
   fadeInDown 0,3 s) parte da opacità 0, e il browser conta il primo disegno con contenuto solo a
   fine animazione: misurato il 24/9, +0,4 s di FCP e LCP su una pagina che si apre quasi sempre da
   Google, da telefono. Questo foglio si carica solo qui: il resto del sito non cambia. */
main.sf.page, .navbar { animation: none; }

/* scheletro prima dell'app */
.sf-scheletro { display: grid; gap: 14px; padding-top: 12px; }
.sf-scheletro > div, .sf-scheletro span { border-radius: var(--sf-r); background: var(--surface-2); }
.sf-scheletro__testa { height: 150px; }
.sf-scheletro__tre, .sf-scheletro__carte { display: grid; gap: 12px; background: none !important; }
.sf-scheletro__tre span { height: 84px; }
.sf-scheletro__carte span { height: 180px; }
/* Con l'account l'app tiene almeno lo schermo: scheletro, «Carico il simulatore…» e schermata hanno
   altezze diverse, e il piè di pagina entrava nello schermo per poi riscendere (spostamento
   cumulativo 0,18 al telefono, misurato il 24/9). Non in #/info, dove sotto viene la presentazione. */
html.is-authed:not(.sf-vedi-info) #sf-app { min-height: 100vh; min-height: 100dvh; }
/* Con l'account «Accedi» e «Registrati» della barra non devono vedersi: la regola del sito
   (style.css, :root.is-authed) guarda l'href esatto, e qui i link portano ?redirect=. Restavano
   finché renderNavAuth non metteva l'avatar. Nascosti ma al loro posto: la barra resta alta
   com'è con l'avatar e la pagina sotto non salta. */
:root.is-authed .navbar__actions > a.btn[href^="/login.html"],
:root.is-authed .navbar__actions > a.btn[href^="/register.html"] { visibility: hidden; }
@media (max-width: 760px) {
  html.sf-app-attiva .sf { --sf-tabbar: calc(64px + env(safe-area-inset-bottom)); padding-bottom: calc(var(--sf-tabbar) + 32px); }
  html.sf-app-attiva .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Le formule degli esempi arrivano già scritte (KaTeX lato server), il loro foglio katex.min.css
   no: si chiede solo quando gli esempi si avvicinano (app/main.js). Fino ad allora questa regola,
   identica alla sua, lascia leggere la formula una volta sola invece di due. */
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- IL FOGLIO (carta d'esame) */
.sf-foglio {
  position: relative;
  background: var(--sf-carta);
  border: 1px solid var(--sf-carta-bordo);
  border-radius: 6px;
  box-shadow: var(--sf-ombra-carta);
  padding: 20px 18px 18px;
  border-top: 3px solid var(--sf-m);
}
.sf-domanda__meta > span:nth-child(2) { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-esempio .sf-domanda__meta > span:nth-child(2) { white-space: normal; }
.sf-domanda__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--sf-stampa-tenue); margin: 0 0 12px; }
.sf-domanda__testo, .sf-plico__testo {
  font-family: var(--sf-serif);
  font-size: 19px;
  line-height: 1.55;
  color: var(--sf-nero);
  font-optical-sizing: auto;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
.sf-plico__testo p { margin: 0 0 0.5em; }
/* le formule alla grandezza del testo intorno (KaTeX di suo le fa del 21% più grandi) */
.sf-domanda__testo .katex, .sf-opzione__testo .katex, .sf-foglio .katex, .sf-rivedi .katex, .sf-correzione .katex, .sf-teoria .katex { font-size: 1.04em; }
/* le frazioni in riga nelle OPZIONI (allenamento, plico, correzione, esempi della presentazione):
   KaTeX le compone in corpo piccolo e «2/9 F» usciva a 9 px proprio dove si decide la risposta.
   Si ingrandisce tutta la frazione (cifre, filetto e distanze insieme, niente sovrapposizioni) */
.sf-opzione__testo .katex .mfrac, .sf-plico__opzioni .katex .mfrac { font-size: 1.4em; }
.sf-opzione__testo .katex .mfrac .mfrac, .sf-plico__opzioni .katex .mfrac .mfrac { font-size: 1em; }
/* nelle spiegazioni il testo è Inter, che ha l'occhio più alto del serif di KaTeX: numeri e formule
   un po' più grandi, così «400 × 3 = 1200» non sembra scritto in un corpo minore */
.sf .sf-spiega .katex, .sf .sf-correzione__perche .katex, .sf .sf-rivedi__spiega .katex, .sf .sf-passaggi .katex, .sf .sf-teoria .katex, .sf .sf-ricco .katex { font-size: 1.1em; }
:root.dark .sf-plico__testo, :root.dark .sf-plico__opzioni, :root.dark .sf-domanda__testo, :root.dark .sf-opzione__testo { font-weight: 370; }
.sf-plico__sezione, .sf-modulo__sezione {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sf-stampa);
  border-bottom: 1px solid var(--sf-riga);
  padding-bottom: 6px;
  margin: 0 0 14px;
}
.sf-plico__n { font-family: var(--sf-serif); font-weight: 700; color: var(--sf-nero); margin: 0 6px 0 0; font-size: 19px; display: inline; }
.sf-plico__opzioni { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; font-family: var(--sf-serif); font-size: 17.5px; line-height: 1.45; color: var(--sf-nero); }
@media (max-width: 560px) { .sf-plico__opzioni { gap: 14px; } }
.sf-plico__opzioni li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; }
.sf-plico__lettera { font-weight: 700; color: var(--sf-stampa); font-variant-numeric: tabular-nums; }
.sf-plico__opzioni--righe { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-plico__opzioni--righe li { grid-template-columns: auto 1fr; gap: 4px; }
.sf-passaggi { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15.5px; }

/* ---------------------------------------------------------------- IL MODULO RISPOSTE */
.sf-riga { display: grid; grid-template-columns: 28px 30px 1fr; gap: 8px; align-items: center; padding: 8px 6px; border-radius: 6px; }
.sf-riga--multipla { align-items: end; }
.sf-riga--multipla .sf-riga__num { line-height: 30px; }
.sf-riga__num { position: relative; font-weight: 800; font-size: 14px; color: var(--sf-stampa); text-align: right; font-variant-numeric: tabular-nums; }
.sf-riga.is-attiva { background: color-mix(in srgb, var(--sf-m) 8%, transparent); box-shadow: inset 3px 0 0 var(--sf-m); }
.sf-cerchio { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--sf-stampa); cursor: pointer; border-radius: 50%; }
.sf-cerchio svg { width: 24px; height: 24px; overflow: visible; }
.sf-cerchio circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.sf-cerchio__barra { stroke: var(--sf-nero); stroke-width: 2.6; stroke-linecap: round; }
.sf-cerchio.is-barrato circle { stroke: var(--sf-nero); }
.sf-cerchio:disabled { cursor: default; opacity: 0.5; }
.sf-cerchio.is-barrato:disabled { opacity: 1; }
.sf-caselle { display: flex; gap: 6px; flex-wrap: nowrap; }
.sf-casella { display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--sf-stampa); font: inherit; min-width: 40px; border-radius: 4px; }
.sf-casella__lettera { font-size: 11px; font-weight: 800; line-height: 1; }
.sf-casella__quadro { position: relative; display: block; width: 34px; height: 34px; border: 1.6px solid var(--sf-stampa); border-radius: 3px; background: var(--sf-carta); transition: background-color 120ms ease; }
@media (hover: hover) { .sf-casella:hover:not(:disabled) .sf-casella__quadro { background: color-mix(in srgb, var(--sf-stampa) 8%, var(--sf-carta)); } }
.sf-casella:disabled { cursor: default; }
.sf-x { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); overflow: visible; }
.sf-x path { fill: none; stroke: var(--sf-nero); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 44; stroke-dashoffset: 0; }
.sf-casella:not(.is-x) .sf-x { display: none; }
/* la casella annerita resta SCURA anche col tema scuro: cancellata, mai scambiata per scelta */
.sf-casella.is-annerita .sf-casella__quadro, .sf-griglia16.is-annerita .sf-g { background: var(--sf-annulla); border-color: var(--sf-annulla); }
/* in scuro l'inchiostro è chiaro: la casella annerita è un tratteggio a metà inchiostro, col bordo
   attenuato. Si distingue dalla carta ma pesa meno della X: l'occhio va sulla risposta data */
:root.dark .sf-casella.is-annerita .sf-casella__quadro, :root.dark .sf-griglia16.is-annerita .sf-g {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--sf-nero) 45%, transparent) 0 3px, transparent 3px 6px);
  border-color: color-mix(in srgb, var(--sf-nero) 60%, transparent);
}
.sf-casella.is-giusta .sf-casella__quadro { outline: 2.5px solid var(--sf-verde); outline-offset: 2px; }
.sf-casella.is-sbagliata .sf-x path { stroke: var(--sf-rossa); }
.sf-casella.is-sbagliata .sf-casella__quadro { border-color: var(--sf-rossa); }
.sf-caselle--mini { gap: 4px; }
.sf-caselle--mini .sf-casella { min-width: 0; }
.sf-caselle--mini .sf-casella__quadro { width: 22px; height: 22px; }
.sf-griglia16 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; max-width: 520px; }
.sf-g {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  min-width: 0;
  border: 1.3px solid var(--sf-stampa);
  border-radius: 2px;
  background: var(--sf-carta);
  font-weight: 650;
  font-size: clamp(12px, 3.6vw, 18px);
  color: var(--sf-nero);
  line-height: 1;
  overflow: hidden;
}
.sf-griglia16.is-annerita .sf-g { color: transparent; }
.sf-griglia16--mini { grid-template-columns: repeat(16, minmax(0, 18px)); max-width: 100%; }
.sf-griglia16--mini .sf-g { font-size: 12px; }
.sf-modulo__nome { margin: 0; font-weight: 800; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-stampa); }
@media (max-width: 560px) {
  .sf-riga { gap: 6px; }
  /* le 16 caselle usano tutta la riga: bordi condivisi invece degli spazi, cifre più grandi */
  .sf-griglia16 { gap: 0; max-width: none; }
  .sf-g { font-size: 15px; font-weight: 700; aspect-ratio: 5 / 7; }
  .sf-g + .sf-g { border-left-width: 0; }
}
.sf kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface-1); font: inherit; font-size: 13px; font-weight: 700; text-align: center; }
.sf fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.sf legend { font-weight: 750; font-size: 16px; margin-bottom: 8px; padding: 0; }
.sf-la-tua { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; vertical-align: 2px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
:root.dark .sf-giorno__img, :root.dark .sf-finale__img { filter: brightness(0.8) saturate(0.9); }

/* ================================================================ LA PRESENTAZIONE (senza account) */
.sf-pres { max-width: 1120px; margin: 0 auto; }
.sf-pres__briciole { margin-bottom: 10px; }
.sf-sfida-ricevuta { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin: 6px 0 18px; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.sf-sfida-ricevuta img { width: 88px; height: 88px; object-fit: contain; }
.sf-sfida-ricevuta h2 { font-size: 19px; margin: 0 0 4px; }
.sf-sfida-ricevuta p { font-size: 15px; line-height: 1.5; margin: 0 0 12px !important; }
/* con l'invito di una sfida l'invito primario è uno, quello della sfida: l'apertura non lo ripete */
html.sf-da-sfida .sf-hero .sf-hero__cta { display: none; }
.sf-hero { display: grid; gap: 28px; align-items: center; padding: 12px 0 28px; overflow-x: clip; overflow-y: visible; }
.sf-hero h1 {
  font-family: var(--sf-serif);
  font-weight: 700;
  font-size: clamp(34px, 8.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  max-width: none;
  font-optical-sizing: auto;
}
@media (max-width: 759px) { .sf-hero h1 { font-size: 32px; } }
@media (min-width: 760px) { .sf-hero h1 { max-width: 13ch; } }
.sf-hero__lead { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--text); max-width: 56ch; margin: 0 0 22px !important; }
.sf-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* la riga sotto il bottone: sta DENTRO l'invito, così sparisce con lui (con l'account, con una
   sfida, dall'app) */
.sf-hero__gratis { flex-basis: 100%; margin: -4px 0 0 !important; font-size: 14px; line-height: 1.45; color: var(--muted); }
.sf-hero__nota { margin-top: 18px !important; font-size: 14px; color: var(--muted); max-width: 56ch; }
.sf-hero__foglio { margin: 0; padding: 22px 20px 18px; max-width: 520px; justify-self: center; width: 100%; }
.sf-hero__skoo { position: absolute; top: -56px; right: -10px; width: 118px; height: 118px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(40, 30, 80, 0.2)); pointer-events: none; }
.sf-hero__domanda { font-family: var(--sf-serif); font-size: 19px; line-height: 1.5; color: var(--sf-nero); margin: 0 0 12px !important; padding-right: 64px; }
.sf-hero__modulo { margin-top: 14px; padding: 12px 8px 8px; border-radius: 4px; outline: 1.5px solid color-mix(in srgb, var(--sf-stampa) 45%, transparent); outline-offset: 0; }
.sf-hero__modulo .sf-modulo__nome { margin: 0 0 6px 8px; }
.sf-hero__invito { font-size: 13px; color: var(--sf-stampa-tenue); margin: 6px 0 0 8px !important; }
.sf-hero__foglio.is-fatto .sf-hero__invito { display: none; }
.sf-hero__esito { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--sf-nero); padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--sf-carta) 60%, var(--surface-2)); }
/* da 760 px Skoo sta dentro il bordo del foglio (la presentazione taglia quel che esce a destra),
   e la domanda gli lascia il posto */
@media (min-width: 760px) { .sf-hero__skoo { right: 8px; } .sf-hero__domanda { padding-right: 118px; } }
@media (min-width: 900px) {
  .sf-hero { grid-template-columns: 1.05fr 0.95fr; gap: 48px; padding: 28px 0 44px; }
  /* il foglio dritto: testo e caselle da toccare non si leggono in obliquo */
  /* affacciato dal bordo alto del foglio: sopra la domanda, non davanti */
  .sf-hero__skoo { width: 150px; height: 150px; top: -108px; right: 8px; }
  .sf-hero__domanda { padding-right: 64px; }
}
/* sul telefono Skoo si affaccia sopra l'intestazione: lo spazio lo lascia solo lei, la domanda usa
   tutta la riga (prima andava a capo a 220 px su tutte le righe) */
@media (max-width: 420px) {
  .sf-hero__foglio .sf-casella { min-width: 36px; }
  .sf-hero__foglio .sf-casella__quadro { width: 32px; height: 32px; }
  .sf-hero__skoo { width: 92px; height: 92px; top: -58px; right: -4px; }
  .sf-hero__domanda { padding-right: 0; }
  .sf-hero__foglio > .sf-plico__sezione { padding-right: 80px; }
}
.sf-sezione, .sf-syl__unita, .sf-esempio { scroll-margin-top: 88px; }
.sf-sezione { padding: 34px 0 6px; border-top: 1px solid var(--border); margin-top: 18px; }
.sf-sezione h2 { font-size: clamp(24px, 4.4vw, 32px); line-height: 1.15; margin: 0 0 16px; max-width: 30ch; }
.sf-sezione > p { font-size: 16.5px; line-height: 1.65; max-width: 72ch; }
.sf-sezione cite { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 4px; }
.sf-regole { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sf-regole__elenco dd, .sf-sezione cite { overflow-wrap: anywhere; }
@media (min-width: 900px) { .sf-regole { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.sf-regole__elenco { margin: 0; display: grid; gap: 2px; }
.sf-regole__elenco div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.sf-regole__elenco dt { font-weight: 800; font-size: 17px; }
.sf-regole__elenco dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
@media (min-width: 640px) { .sf-regole__elenco div { grid-template-columns: 190px 1fr; gap: 16px; } }
.sf-istr-modulo { border-top: 3px solid var(--sf-stampa); }
.sf-istr-modulo h3 { font-size: 17px; margin: 0 0 4px; color: var(--sf-stampa); }
.sf-istr-modulo__casi { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; font-size: 15px; line-height: 1.55; color: var(--sf-nero); }
.sf-istr-modulo__casi li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.sf-istr-modulo__casi { grid-template-columns: minmax(0, 1fr); }
.sf-istr-modulo__casi .sf-cerchio { cursor: default; }
.sf-istr-modulo__casi li.sf-istr-modulo__griglia { grid-template-columns: 1fr; }
.sf-istr-modulo__casi .sf-casella { cursor: default; }
.sf-istr-modulo__casi .sf-casella.is-x .sf-x { display: block; }
.sf-passi { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .sf-passi { grid-template-columns: repeat(3, 1fr); } }
.sf-passi li { counter-increment: passo; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border); }
.sf-passi li::before { content: counter(passo); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sf-lavagna); color: var(--sf-lavagna-testo); font-weight: 850; margin-bottom: 10px; }
.sf-passi h3 { font-size: 18px; margin: 0 0 6px; }
.sf-passi p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.sf-gioco { display: grid; gap: 20px; }
.sf-gioco__testo p { font-size: 16.5px; line-height: 1.65; max-width: 62ch; }
.sf-gioco__livelli { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* i nomi dei livelli sono nomi propri: niente sillabazione («Specializ-zando») */
.sf-gioco__livelli span { overflow-wrap: normal; hyphens: manual; }

.sf-gioco__livelli li { display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 4px; padding: 8px 4px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; text-align: center; }
.sf-gioco__livelli img { width: 100%; max-width: 84px; height: 76px; object-fit: contain; }
/* sul telefono «Specializzando» non entra in un quarto di riga: due colonne, Skoo accanto al nome */
@media (max-width: 480px) {
  .sf-gioco__livelli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sf-gioco__livelli li { grid-template-rows: none; grid-template-columns: 52px minmax(0, 1fr); justify-items: start; gap: 8px; padding: 4px 10px 4px 4px; font-size: 13.5px; text-align: left; }
  .sf-gioco__livelli img { width: 52px; height: 52px; }
}@media (min-width: 900px) { .sf-gioco { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.sf-syl { display: grid; gap: 10px; margin-top: 16px; }
.sf-syl__materia { border-radius: 16px; background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--sf-m); overflow: hidden; }
.sf-syl__materia > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 18px; cursor: pointer; list-style: none; min-height: 56px; }
.sf-syl summary::-webkit-details-marker { display: none; }
.sf-syl__nome { font-weight: 800; font-size: 18px; }
.sf-syl__conta { font-size: 14px; color: var(--muted); grid-column: 1; }
.sf-syl__materia > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.sf-syl__materia > summary::after, .sf-syl__unita > summary::after { content: "+"; font-weight: 700; color: var(--muted); margin-left: auto; }
.sf-syl details[open] > summary::after { content: "−"; }
.sf-syl__unita { border-top: 1px solid var(--border); }
.sf-syl__unita > summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; cursor: pointer; list-style: none; }
.sf-syl__num { font-weight: 850; color: var(--sf-m); min-width: 16px; font-variant-numeric: tabular-nums; }
.sf-syl__titolo { font-weight: 650; line-height: 1.4; }
.sf-syl__cfu { font-size: 13px; color: var(--muted); white-space: nowrap; }
.sf-syl__voci { margin: 0; padding: 0 18px 14px 44px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.55; list-style: none; }
.sf-syl__voci em { color: var(--muted); }
.sf-syl__voci li { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.sf-syl__voci .sf-voce-id { margin: 0; }
.sf-esempi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 12px; }
/* Multiple lunghe e completamenti corti non vanno affiancati (lasciavano buchi di 300 px).
   Da 900 px due colonne che scorrono ognuna per conto suo; da 1100 una colonna per materia,
   le tre multiple sulla prima riga e i tre completamenti sulla seconda. */
@media (min-width: 900px) {
  .sf-esempi { display: block; columns: 2; column-gap: 16px; }
  .sf-esempi > .sf-esempio { break-inside: avoid; margin: 0 0 16px; }
}
@media (min-width: 1100px) {
  .sf-esempi { display: grid; columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .sf-esempi > .sf-esempio { margin: 0; }
  .sf-esempi > .sf-esempio:nth-child(odd) { order: 1; }
  .sf-esempi > .sf-esempio:nth-child(even) { order: 2; }
}
/* l'intestazione degli esempi: materia e tipo sulla prima riga, l'unità sempre sulla sua */
.sf-esempio .sf-domanda__meta > span:nth-child(2) { order: 3; flex-basis: 100%; }
.sf-esempio .sf-domanda__meta > span:nth-child(3) { order: 2; }
.sf-esempio .sf-plico__testo { font-size: 17.5px; }
.sf-esempio .sf-plico__opzioni { font-size: 16.5px; gap: 6px; }
.sf-esempio__invito { font-size: 14px; color: var(--sf-stampa-tenue); margin: 4px 0 8px !important; }
.sf-esempio .sf-plico__opzioni li { position: relative; display: block; border-radius: 6px; }
/* le opzioni degli esempi si vedono toccabili anche senza puntatore: bordo e fondo sempre */
.sf-esempio__opzione { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--sf-carta-bordo); border-radius: 8px; background: color-mix(in srgb, var(--card) 70%, var(--sf-carta)); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sf-esempio.is-risolto .sf-esempio__opzione { border-color: transparent; background: none; }
.sf-esempio__opzione .sf-la-tua { grid-column: 2; justify-self: start; margin: 2px 0 0; }
@media (hover: hover) { .sf-esempio:not(.is-risolto) .sf-esempio__opzione:hover { border-color: color-mix(in srgb, var(--sf-stampa) 55%, transparent); background: color-mix(in srgb, var(--sf-stampa) 6%, var(--card)); } }
.sf-esempio__opzione:disabled { cursor: default; }
.sf-esempio.is-risolto li:not(.is-giusta):not(.is-sbagliata) { opacity: 0.6; }
.sf-esempio li.is-giusta { background: var(--sf-verde-fondo); box-shadow: inset 3px 0 0 var(--sf-verde); }
.sf-esempio li.is-sbagliata { background: var(--sf-rossa-fondo); box-shadow: inset 3px 0 0 var(--sf-rossa); }
.sf-esempio li.is-giusta .sf-plico__lettera { color: var(--sf-verde); }
.sf-esempio li.is-sbagliata .sf-plico__lettera { color: var(--sf-rossa); }
.sf-esempio__soluzione { margin-top: 12px; border-top: 1px dashed var(--sf-carta-bordo); padding-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--sf-nero); }
.sf-esempio__soluzione summary { cursor: pointer; font-weight: 750; color: var(--accent-ink); min-height: 40px; display: flex; align-items: center; gap: 10px; list-style: none; }
.sf-esempio__soluzione summary::-webkit-details-marker { display: none; }
.sf-esempio__soluzione summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; transition: transform 150ms ease; }
.sf-esempio__soluzione[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.sf-esempio__giusta .sf-griglia16 { display: inline-grid; vertical-align: middle; width: min(100%, 300px); margin: 4px 6px 4px 0; }
.sf-esempio__distrattori { padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--muted); margin: 10px 0 0; }
/* le domande frequenti a fisarmonica: si legge la domanda, si apre la risposta che interessa */
.sf-faq { margin: 12px 0 0; max-width: 76ch; border-top: 1px solid var(--border); }
.sf-faq__voce { border-bottom: 1px solid var(--border); }
.sf-faq__voce > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 2px; min-height: 48px; cursor: pointer; list-style: none; font-weight: 750; font-size: 17px; line-height: 1.4; }
.sf-faq__voce > summary::-webkit-details-marker { display: none; }
.sf-faq__voce > summary::after { content: "+"; flex: none; font-weight: 700; color: var(--muted); }
.sf-faq__voce[open] > summary::after { content: "−"; }
.sf-faq__voce > p { margin: 0 0 16px; padding-right: 24px; font-size: 16px; line-height: 1.65; }
/* un invito quieto fra una sezione e l'altra: chi ha letto abbastanza non deve risalire in cima */
.sf-invito-mezzo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 8px 0 28px; padding: 16px 18px; border-radius: 16px; background: var(--surface-1); border: 1px dashed var(--border-strong); }
.sf-invito-mezzo p { margin: 0; font-size: 15.5px; line-height: 1.5; max-width: 52ch; }
.sf-finale { display: grid; gap: 16px; align-items: center; margin-top: 36px; padding: 24px; border-radius: 24px; background: var(--sf-lavagna); color: var(--sf-lavagna-testo); }
:root.dark .sf-finale { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.sf-finale h2 { color: var(--sf-lavagna-testo); font-family: var(--sf-serif); font-size: clamp(26px, 5vw, 38px); margin: 0 0 8px; line-height: 1.1; }
.sf-finale p { color: color-mix(in srgb, var(--sf-lavagna-testo) 82%, transparent); font-size: 16.5px; }
.sf-finale .sf-link, .sf a.sf-finale__link, .sf-finale a.sf-link { color: inherit; }
/* Un solo bottone principale in tutta la pagina: lo stesso accento pieno nella barra in alto, nella
   copertina, fra le sezioni e sulla lastra finale (prima: viola sfumato, pervinca e bianco) */
.sf-finale .sf-btn--primario { background: var(--accent); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, #fff 16%, transparent); }
:root.dark .sf-finale .sf-btn--primario { color: #151226; }
.navbar .btn--primary[data-sf-registrati] { background: var(--accent); background-image: none; border-color: transparent; color: #fff; box-shadow: var(--shadow-s); }
@media (hover: hover) { .navbar .btn--primary[data-sf-registrati]:hover { background: color-mix(in srgb, var(--accent) 86%, #000); } }
:root.dark .navbar .btn--primary[data-sf-registrati] { color: #151226; }
@media (hover: hover) { :root.dark .navbar .btn--primary[data-sf-registrati]:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); } }
.sf-finale__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; }
.sf-finale__img[data-fallback-used="1"] { aspect-ratio: 1; width: 160px; object-fit: contain; justify-self: center; }
@media (min-width: 760px) { .sf-finale { grid-template-columns: minmax(0, 440px) 1fr; gap: 32px; padding: 28px; } }
.sf-fonti { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); }
.sf-fonti a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------- fuoco da tastiera
   Un contorno, non un'ombra: le ombre delle schede (sf-grande, sf-materia, sf-nav__voce…) coprivano
   il box-shadow globale di style.css e il fuoco non si vedeva (WCAG 2.4.7). */
.sf a:focus-visible, .sf button:focus-visible, .sf summary:focus-visible, .sf [tabindex]:not([tabindex="-1"]):focus-visible, .sf select:focus-visible, .sf textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sf .sf-casella:focus-visible { outline-offset: 1px; }
.sf h1[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* style.css disegna il fuoco con un'ombra */

/* ---------------------------------------------------------------- movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  .sf *, .sf *::before, .sf *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- bersagli per il dito
   L'area che risponde al tocco arriva ad almeno 44 px anche dove il disegno resta piccolo (il modulo
   ha le sue misure, fedeli a quello vero): un bordo invisibile attorno, l'impaginazione non cambia. */
.sf-esame__esci, .sf-esame__foglio-btn, .sf-cerchio { position: relative; }
.sf-cerchio::after { content: ""; position: absolute; inset: -7px -3px; }
.sf-voto__altro .sf-link, .sf-briciole a, .sf-classifiche__privacy .sf-link, .sf-lega-mini > .sf-link, .sf-piede-app .sf-link { padding-block: 10px; margin-block: -10px; }

/* ---------------------------------------------------------------- la striscia dell'app
   Due copie, una sola in vista. Nella PRESENTAZIONE (--pres) sotto le domande frequenti, prima del
   finale (dal 25/9; prima sotto l'apertura), mai sopra briciole e titolo: per chi legge senza
   account e, dentro l'app, in #/info. Sul CRUSCOTTO (--app) in cima
   sul computer, in fondo sul telefono (--cruscotto, qui sotto).
   Con l'account solo per i maggiorenni con i «Suggerimenti di Skoo» accesi (sf-striscia-ok, da
   app/app.js: ai minori e all'età sconosciuta niente di scoperta, e l'interruttore spento la toglie
   come promette il Profilo). Mai in prova né in allenamento, mai con l'invito di una sfida
   (sf-da-sfida: lì l'invito è uno, quello della sfida), mai dall'app (?app=1 → dal-app). Un solo store sul
   telefono (sf-ios / sf-android da sf/tema.js, prima del disegno), tutti e due sul computer. */
.sf-striscia { display: none; }
html:not(.is-authed) .sf-striscia--pres,
html.is-authed.sf-striscia-ok.sf-vedi-info .sf-striscia--pres,
html.is-authed.sf-striscia-ok.sf-con-striscia:not(.sf-vedi-info) .sf-striscia--app { display: flex; }
html.dal-app .sf-striscia, html.sf-in-esame .sf-striscia, html.sf-in-sessione .sf-striscia, html.sf-da-sfida .sf-striscia { display: none !important; }
.sf-striscia {
  align-items: center;
  gap: 10px 14px;
  min-height: 52px;
  margin: 2px 0 12px;
  padding: 5px 8px 5px 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
/* nella presentazione: una riga sotto le domande frequenti, larga quanto il testo, staccata dal finale */
.sf-striscia--pres { max-width: 760px; margin: 8px auto 28px; }
.sf-striscia__skoo { width: 42px; height: 42px; flex: none; object-fit: contain; }
.sf .sf-striscia__testo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 650; line-height: 1.3; color: var(--text); }
.sf-striscia__store { display: flex; align-items: center; gap: 8px; flex: none; }
.sf-striscia__badge { display: inline-flex; border-radius: 8px; }
.sf-striscia__badge img { display: block; width: auto; height: 36px; }
/* il PNG di Google Play ha un margine trasparente sopra e sotto (29 px su 250): stessa altezza visibile dell'App Store */
.sf-striscia__badge--play img { height: 47px; margin: -5.5px -2px; }
html.sf-ios .sf-striscia__badge--play, html.sf-android .sf-striscia__badge--apple { display: none; }
/* sul computer, dopo i badge, la stessa voce qui sul sito (lo store da un Mac è un vicolo cieco);
   sul telefono no (un solo badge) e dall'app mai */
.sf-striscia__sito { display: none; }
html:not(.sf-ios):not(.sf-android):not(.dal-app) .sf a.sf-striscia__sito { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 4px; font-size: 14px; font-weight: 650; color: var(--accent-ink, var(--accent)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 560px) {
  .sf-striscia { gap: 8px; padding-right: 6px; }
  .sf-striscia__skoo { width: 36px; height: 36px; }
  .sf .sf-striscia__testo { font-size: 13.5px; }
  .sf-striscia__badge img { height: 32px; }
  .sf-striscia__badge--play img { height: 42px; margin: -5px -2px; }
  /* schermo stretto senza sistema riconosciuto (raro): i due badge vanno a capo, sotto il testo */
  html:not(.sf-ios):not(.sf-android) .sf-striscia { flex-wrap: wrap; row-gap: 6px; padding-bottom: 8px; }
  html:not(.sf-ios):not(.sf-android) .sf .sf-striscia__testo { flex: 1 1 0; }
  html:not(.sf-ios):not(.sf-android) .sf-striscia__store { flex-basis: 100%; flex-wrap: wrap; row-gap: 2px; padding-left: 44px; }
}
@media (min-width: 761px) { html.sf-app-attiva:not(.sf-vedi-info) .sf-striscia--app { margin-top: 6px; } }
/* Sul telefono la striscia del cruscotto non sta in cima: lì spingeva «Inizia l'allenamento» sotto
   la piega. La stessa striscia la disegna cruscotto.js (StrisciaApp) in fondo, dopo conto, lega e
   sfida, con le stesse condizioni; sul computer resta quella in cima. */
.sf-striscia--cruscotto { margin: 28px 0 0; }
@media (max-width: 760px) {
  html.is-authed.sf-striscia-ok.sf-con-striscia:not(.sf-vedi-info) .sf-striscia--app { display: none; }
  .sf-cruscotto > .sf-striscia--cruscotto { display: flex; }
}

/* ---------------------------------------------------------------- «Scrivici» (il supporto)
   In fondo alla presentazione, al cruscotto e alla correzione di ogni prova. Skoo con la lente si
   affaccia sull'angolo della carta; sul computer il testo a sinistra e la casella a destra. */
.sf-supporto { position: relative; margin: 44px 0 8px; padding-top: 6px; }
.sf-supporto__skoo { position: absolute; z-index: 1; top: -12px; left: 10px; width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(40, 30, 80, 0.16)); }
.sf-supporto__carta { background: var(--card); border: 1px solid var(--border); border-radius: var(--sf-r); padding: 18px; box-shadow: var(--shadow-s); }
.sf-supporto__testa { padding-left: 84px; min-height: 58px; }
.sf .sf-supporto__testa h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; }
.sf .sf-supporto__testo { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); max-width: 62ch; }
.sf .sf-supporto__casella { margin: 14px 0 12px; font-size: 15px; color: var(--muted); }
.sf-supporto__casella .sf-link { overflow-wrap: anywhere; }
.sf-supporto__modulo { display: grid; gap: 12px; }
.sf-supporto__campo { display: grid; gap: 6px; font-size: 14px; font-weight: 650; color: var(--text); }
.sf-supporto__campo input, .sf-supporto__campo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* sotto i 16 px Safari su iPhone ingrandisce la pagina al tocco */
  font-weight: 400;
  line-height: 1.45;
}
.sf-supporto__campo textarea { resize: vertical; min-height: 104px; }
.sf-supporto__campo input::placeholder, .sf-supporto__campo textarea::placeholder { color: var(--muted); opacity: 0.85; }
.sf-supporto__campo input:focus-visible, .sf-supporto__campo textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.sf-supporto__campo [aria-invalid="true"] { border-color: var(--sf-rossa); }
.sf-supporto__modulo .sf-errore-riga { margin: 0; }
.sf-supporto__invio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sf-supporto__invio .sf-btn { min-width: 132px; }
.sf-supporto__grazie { padding: 14px 16px; border-radius: 12px; background: var(--sf-verde-fondo); border: 1px solid color-mix(in srgb, var(--sf-verde) 30%, transparent); }
.sf-supporto__grazie:focus, .sf-supporto__grazie:focus-visible { outline: none; box-shadow: none; } /* il fuoco serve al lettore di schermo, non all'occhio */
.sf .sf-supporto__grazie p { margin: 0 0 2px; font-size: 16px; color: var(--text); }
.sf .sf-supporto__grazie .sf-supporto__nota { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.sf .sf-supporto__trasparenza { margin: 10px 4px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 520px) {
  .sf-supporto__skoo { width: 64px; height: 64px; top: -10px; left: 8px; }
  .sf-supporto__carta { padding: 16px 14px; }
  .sf-supporto__testa { padding-left: 68px; }
  .sf .sf-supporto__testo { margin-left: -68px; margin-top: 10px; }
  .sf-supporto__invio .sf-btn { width: 100%; }
}
@media (min-width: 900px) {
  .sf-supporto__carta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; padding: 22px 24px; }
  .sf-supporto__testa, .sf-supporto__casella { grid-column: 1; }
  .sf-supporto__modulo, .sf-supporto__grazie { grid-column: 2; grid-row: 1 / span 2; }
  .sf .sf-supporto__casella { margin-bottom: 0; }
  /* la riga dell'indirizzo parte dalla colonna del testo, non dal bordo della carta */
  .sf-supporto__casella { padding-left: 84px; }
  .sf-supporto--chiuso .sf-supporto__carta { display: block; }
}
/* chiuso (sul cruscotto): il bottone che apre il modulo e l'indirizzo, sotto il testo */
.sf .sf-supporto__apri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 0; }
@media (min-width: 521px) { .sf-supporto--chiuso .sf-supporto__casella { padding-left: 84px; } }

/* ---------------------------------------------------------------- i ponti verso il resto di Skooly
   Piano «ecosistema» (24/9): card e righe firmate da Skoo, sempre FUORI dal testo di una domanda,
   di una spiegazione o della teoria. Le card riusano il riquadro .sf-interroga delle schermate;
   qui ci sono solo i pezzi nuovi. (Regole dell'app: starebbero meglio in semestre-filtro-app.css.) */
.sf-ponte__corpo { min-width: 0; }
.sf .sf-ponte__testo { margin: 0 0 10px; font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--text); }
.sf-ponte__azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* il titolo intero dell'unità (nel testo c'è il nome corto): al più due righe, intero al passaggio */
.sf .sf-ponte__dato { margin: -6px 0 12px; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sf-ponte__dato strong { color: var(--text); font-weight: 650; }
.sf .sf-ponte__guida { margin: 10px 0 0; font-size: 14px; }
.sf .sf-dicitura { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sf .sf-dicitura--riga { display: inline; margin: 0 0 0 8px; }
.sf .sf-ponte-carta { position: relative; grid-template-columns: 72px minmax(0, 1fr); }
.sf-ponte-carta .sf-interroga__skoo { width: 72px; height: 72px; }
/* sul telefono Skoo piccolo accanto al testo, e il dato e i bottoni sotto, a tutta larghezza: la
   carta non si stringe proprio dove chiede il tocco */
@media (max-width: 520px) {
  .sf .sf-ponte-carta { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; }
  .sf .sf-ponte-carta .sf-interroga__skoo { width: 40px; height: 40px; }
  .sf-ponte-carta .sf-interroga__testo { display: contents; }
  .sf-ponte-carta .sf-interroga__testo > * { grid-column: 1 / -1; }
  .sf-ponte-carta .sf-interroga__testo > .sf-interroga__perche { grid-column: 2; }
}
.sf-teoria__voce.sf-ponte { grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
.sf .sf-teoria__ia { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.sf .sf-teoria__gemella { margin: 14px 0 0; }
/* momento 3: una riga quieta sotto le azioni della correzione, separata da un filetto */
.sf-riga-ponte { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 15px; }
/* la sua versione interna (riapre la teoria) è un bottone che si legge come il link */
.sf-riga-ponte .sf-link-btn { font-size: inherit; padding-inline: 0; text-align: start; }
/* momento 5: nel riepilogo, fra i numeri e i bottoni */
.sf-riepilogo__ponte { margin: 0 0 18px; }
/* momento 16: il ritorno dopo l'interrogazione, in cima al cruscotto */
.sf-ritorno { margin: 0 0 14px; }
.sf-ritorno .sf-btn { white-space: normal; }
/* sul telefono il cruscotto riordina i suoi pezzi (order): ritorno e avviso restano in cima */
.sf-cruscotto > .sf-ritorno, .sf-cruscotto > .sf-avviso-classifica { order: 0; }
/* la riga del primo accesso dei maggiorenni: il nome in classifica e dove cambiarlo */
.sf .sf-avviso-classifica { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; color: var(--text); }
.sf .sf-classifiche__atenei-nota { margin: 12px 0 0; font-size: 13px; }
/* momento 8: nella pausa, una riga statica di Skoo (niente link) */
.sf .sf-pausa__skoo-dice { max-width: 46ch; margin: 10px auto 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
/* momento 15: Skooly oltre il simulatore, in fondo al profilo */
.sf-oltre { margin-top: 18px; overflow: hidden; }
/* sotto il titolo (in una schermata d'impostazioni il titolo viene prima): da bordo a bordo sui lati,
   e sul computer una fascia 3:1, che non pesa più delle tessere e dell'interruttore. L'illustrazione
   non si ritaglia (i disegni arrivano quasi ai bordi alti e bassi): sta intera al centro, e il suo
   fondo crema (#fef7ec, uniforme) riempie i lati. Lo stesso per la cartolina del momento 7. */
.sf-oltre__testata { display: block; width: calc(100% + 36px); max-width: none; height: auto; margin: 0 -18px 14px; aspect-ratio: 16 / 9; object-fit: contain; background-color: #fef7ec; }
/* in tema scuro la carta crema da bordo a bordo abbaglia dentro una carta scura: diventa una
   cartolina DENTRO la carta, coi margini, il bordo e un filo più spenta (anche nel momento 7) */
:root.dark .sf-oltre__testata, :root.dark .sf-cartolina-eco__img { width: 100%; margin: 0 0 14px; aspect-ratio: 2 / 1; border-radius: 12px; border: 1px solid var(--border); filter: brightness(0.86); }
@media (min-width: 761px) { .sf-oltre__testata, :root.dark .sf-oltre__testata { aspect-ratio: 3 / 1; } }
.sf-oltre h2 { font-size: 18px; margin: 0 0 12px; }
.sf-oltre__tessere { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf a.sf-oltre__tessera { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); font-weight: 650; font-size: 15px; line-height: 1.35; text-decoration: none; }
@media (hover: hover) { .sf a.sf-oltre__tessera:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--surface-1)); } }
/* la freccia dice che la tessera si tocca, come nelle altre righe-ponte */
.sf a.sf-oltre__tessera { grid-template-columns: 56px minmax(0, 1fr) auto; position: relative; }
.sf-oltre__via { display: inline-flex; color: var(--accent-ink, var(--accent)); }
@media (hover: hover) { .sf a.sf-oltre__tessera:hover .sf-oltre__via { transform: translateX(2px); } }
.sf-oltre__img, .sf-riepilogo__ponte .sf-interroga__skoo { width: 56px; height: 56px; object-fit: contain; border-radius: 12px; }
.sf-oltre .sf-ripiego { width: 48px; height: 48px; border-radius: 50%; }
.sf-oltre__interruttore { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.sf-oltre__interruttore .sf-interruttore { align-items: flex-start; }
.sf-oltre__interruttore .sf-interruttore__pista { margin-top: 1px; }
.sf-oltre__interruttore .sf-nota { margin: 8px 0 0; }
@media (min-width: 761px) { .sf-oltre__tessere { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-oltre__tessere > li { display: grid; } .sf a.sf-oltre__tessera { grid-template-columns: 1fr; justify-items: start; min-height: 132px; padding-right: 30px; } .sf-oltre__via { position: absolute; right: 10px; bottom: 12px; } }

/* momento 1: «Lo sapevi che…» nei caricamenti oltre i 700 ms. Un cartellino quieto sopra lo
   scheletro: compare in dissolvenza (niente salti, niente rimbalzi) e sparisce con l'attesa. */
.sf-attesa-con { display: grid; gap: 4px; }
.sf-sapevi { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; max-width: 560px; margin: 10px 0 2px; padding: 12px 16px 12px 12px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); animation: sf-sapevi-entra 420ms ease-out both; }
.sf-sapevi__skoo { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; }
.sf-sapevi .sf-ripiego { width: 48px; height: 48px; border-radius: 50%; }
.sf .sf-sapevi__testo { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.sf-sapevi__testo strong { font-weight: 700; color: var(--accent-ink, var(--text)); }
@keyframes sf-sapevi-entra { from { opacity: 0; transform: translateY(4px); } }
.sf-modale__corpo .sf-sapevi { margin-top: 4px; }

/* i pop di Skoo con la dicitura sui piani (momenti 4 e 10, per chi ha già usato la prova) */
.sf .sf-pop .sf-dicitura { margin: 8px 0 0; font-size: 12.5px; }

/* momento 7: la cartolina dell'ecosistema, una volta nella vita, dopo la prima prova consegnata.
   L'illustrazione è una carta a fondo pieno: in tema chiaro va da bordo a bordo, in tema scuro sta
   dentro, coi margini (vedi .sf-oltre__testata). */
.sf-cartolina-eco .sf-modale__corpo { padding-top: 0; }
/* 2:1 come in scuro e mai più alta di un terzo dello schermo: su un portatile (circa 790 px di
   finestra) titolo, tessere e «Torno ad allenarmi» stanno in vista senza scorrere dentro la modale */
.sf-cartolina-eco__img { display: block; width: calc(100% + 40px); max-width: none; height: auto; aspect-ratio: 2 / 1; max-height: min(34vh, 280px); object-fit: contain; background-color: #fef7ec; margin: 0 -20px 14px; }
.sf .sf-cartolina-eco__testo { margin: 0 0 12px; font-size: 15.5px; line-height: 1.5; }
/* la tessera della voce: il bordo dei ponti e, con la prova intatta, la riga dei 30 minuti gratis */
.sf a.sf-oltre__tessera--voce { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--surface-1)); }
.sf-oltre__gratis { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--accent-ink, var(--accent)); }
.sf-cartolina-eco .sf-dicitura { margin-top: 12px; }
.sf-cartolina-eco .sf-conferma__azioni { margin-top: 16px; }

/* momento 13: il messaggio della cartolina, da cambiare prima di condividere */
.sf-cartolina__messaggio { margin: 12px 0 4px; }
.sf-cartolina__messaggio textarea { font-size: 15px; }

/* momento 19: l'Approfondimento video, sotto le fonti della teoria. Solo un link e una miniatura
   ospitata su skooly.it: nessun player incorporato. */
.sf .sf-teoria__video { margin: 12px 0 0; }
.sf a.sf-video { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text); font-size: 14.5px; font-weight: 650; line-height: 1.4; text-decoration: none; }
@media (hover: hover) { .sf a.sf-video:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); } }
.sf-video__miniatura { display: block; width: 128px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
@media (max-width: 420px) { .sf a.sf-video { grid-template-columns: 96px minmax(0, 1fr); } .sf-video__miniatura { width: 96px; } }

/* momento 14: dall'app la registrazione web non si propone (App Store 3.1.1): resta l'avviso */
html.dal-app .sf-sfida-ricevuta__invito { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sf-sapevi { animation: none; }
}

/* ---------------------------------------------------------------- aperta DALL'APP (?app=1 → dal-app)
   App Store 3.1.1 e norme sui pagamenti di Google Play: dall'app non si raggiunge nulla che porti a
   un acquisto fuori dall'app. Oltre a navbar, barra e piede (style.css) e alla striscia coi badge:
   registrazione e accesso web, le guide (portano a /scarica e alla prova gratuita), /scarica,
   /pricing e le briciole (portano alla home), e le righe solo per il web (`data-sf-solo-web`: la
   domanda «è gratuito?», che parla della prova gratuita e del piano a pagamento). Puro CSS: la
   classe c'è prima del primo disegno. */
html.dal-app .sf [data-sf-registrati],
html.dal-app .sf [data-sf-solo-web],
html.dal-app .sf a[href^="/register.html"],
html.dal-app .sf a[href^="/login.html"],
html.dal-app .sf a[href^="/guide"],
html.dal-app .sf a[href^="/scarica"],
html.dal-app .sf a[href^="/pricing"],
html.dal-app .sf-fonti__guide,
html.dal-app .sf-pres__briciole,
html.dal-app .sf-hero__cta,
html.dal-app .sf-invito-mezzo,
html.dal-app .sf-finale .sf-btn,
html.dal-app .sf-finale .sf-nota { display: none !important; }