/* QUIZ-1 — the PUBLIC pages of the quizzes (list, one quiz, the game, the report).
 *
 * THE COLOURS AND THE TYPE ARE THE SITE'S. This sheet is loaded AFTER the shell's by who dresses the page, and takes
 * its ink, paper, rule and accent from the shell's own tokens (the newspaper's, the catalogue's), with a neutral
 * fallback for a shell that declares none. The family of the type is inherited, never named here.
 *
 * THE PHONE COMES FIRST (mandate, section «Cellulare»): one question per screen; every alternative as wide as the
 * column and at least 48px tall; no text under 16px; nothing wider than a 360px screen; right and wrong said with a
 * word AND a sign, never with the colour alone.
 *
 * NO JAVASCRIPT: every rule here works on a page that carries none.
 *
 * THE COOKIE BANNER NEVER HIDES THE GESTURE. On a phone the banner is a sheet fixed to the bottom of the screen; while
 * it is open (`:has`, no script) the gestures of the page are fixed to the TOP of the screen, and the page gains
 * room below, so that what the sheet covers can always be scrolled above it.
 */
/* NO ANIMATED SCROLL ON THESE PAGES. After every answer the page comes back at the frame of the question
 * (`#quiz-riquadro`): a shell that animates the scroll (`html { scroll-behavior: smooth }`) would move the frame
 * under the thumb at each step, exactly when the person is about to tap — motion nobody asked for, ten times a
 * game. This sheet is loaded only on the quiz pages, after the shell's. */
html { scroll-behavior: auto; }

.quiz-pub {

  box-sizing: border-box;
  max-width: 44rem;
  margin: 0 auto;
  padding: 24px 0 40px;
  color: var(--tema-quiz-inchiostro);
  font-size: 1rem;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}
.quiz-pub *, .quiz-pub *::before, .quiz-pub *::after { box-sizing: border-box; }
/* THE RESET WEIGHS NOTHING (`:where`). Written as `.quiz-pub p { padding: 0 }` it would weigh more than every
 * component with one class of its own, and the outcome box and the warnings would lose their padding — seen in a
 * screenshot (the sign touching the border), not deduced. */
:where(.quiz-pub) :where(h1, h2, p, ul, ol, fieldset) { margin: 0; padding: 0; }
:where(.quiz-pub) :where(ul, ol) { list-style: none; }
:where(.quiz-pub) fieldset { border: 0; min-width: 0; }
/* `:where` weighs nothing: a component with one class of its own (the button) must be able to win over this. */
:where(.quiz-pub) a { color: var(--tema-quiz-accento); text-decoration: underline; text-underline-offset: 3px; }
/* A link inside a line of text is still a target for a thumb: at least 44 by 44 (the smoke measures every one). */
.quiz-pub p > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.quiz-pub :focus-visible { outline: 3px solid var(--tema-quiz-accento); outline-offset: 2px; }
.quiz-pub-vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.quiz-pub-sopra { color: var(--tema-quiz-tenue); margin-bottom: 8px; }
.quiz-pub-titolo { font-size: 1.75rem; line-height: 1.2; font-weight: 600; margin-bottom: var(--tema-quiz-spazio); }
.quiz-pub-testo { margin-bottom: var(--tema-quiz-spazio); }
.quiz-pub-nota { color: var(--tema-quiz-tenue); }
.quiz-pub-avviso { border: 2px solid var(--tema-quiz-ko); background: var(--tema-quiz-ko-sfondo); color: var(--tema-quiz-ko); border-radius: var(--tema-quiz-raggio); padding: 12px 16px; font-weight: 600; }

/* --- the list ---------------------------------------------------------- */
.quiz-pub-elenco { display: grid; gap: 12px; }
.quiz-pub-scheda { display: block; border: 1px solid var(--tema-quiz-linea); border-radius: var(--tema-quiz-raggio); background: var(--tema-quiz-carta); padding: 16px; min-height: 48px; text-decoration: none; color: var(--tema-quiz-inchiostro); }
.quiz-pub-scheda:hover { border-color: var(--tema-quiz-accento); }
.quiz-pub-scheda-titolo { display: block; font-size: 1.25rem; line-height: 1.25; font-weight: 600; color: var(--tema-quiz-accento); text-decoration: underline; text-underline-offset: 3px; }
.quiz-pub-scheda-testo { display: block; margin-top: 6px; }
.quiz-pub-scheda-nota { display: block; margin-top: 6px; color: var(--tema-quiz-tenue); }

/* --- the frame: one question, or the report ----------------------------- */
.quiz-pub-riquadro { border: 1px solid var(--tema-quiz-linea); border-radius: var(--tema-quiz-raggio); background: var(--tema-quiz-carta); padding: 16px; display: flex; flex-direction: column; gap: var(--tema-quiz-spazio); min-width: 0; scroll-margin-top: 12px; }
.quiz-pub-riquadro:focus { outline: none; }
.quiz-pub-avanzamento { display: flex; flex-direction: column; gap: 6px; color: var(--tema-quiz-tenue); font-weight: 600; }
.quiz-pub-avanzamento progress { width: 100%; height: 8px; accent-color: var(--tema-quiz-accento); }
.quiz-pub-domanda { font-size: 1.375rem; line-height: 1.3; font-weight: 600; }
.quiz-pub-corpo { display: flex; flex-direction: column; gap: var(--tema-quiz-spazio); min-width: 0; }

.quiz-pub-scelte { display: grid; gap: 10px; }
.quiz-pub-scelta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 14px; border: 2px solid var(--tema-quiz-linea); border-radius: var(--tema-quiz-raggio); background: var(--tema-quiz-carta); color: var(--tema-quiz-inchiostro); cursor: pointer; min-width: 0; }
.quiz-pub-scelta input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--tema-quiz-accento); }
.quiz-pub-scelta:has(input:checked) { border-color: var(--tema-quiz-accento); }
.quiz-pub-scelta:has(input:focus-visible) { outline: 3px solid var(--tema-quiz-accento); outline-offset: 2px; }
.quiz-pub-scelta-testo { flex: 1 1 auto; min-width: 0; }
/* QUIZ-2 (case 7) — the multiple choice: the same big target (the whole row, at least 48px), with a BOX instead of a
 * dot, larger than the dot because more than one is ticked and each must be found again at a glance. The rule
 * («all or nothing») is a sentence above the options, at the size of the text: it is part of the question. */
.quiz-pub-scelta--casella input { width: 26px; height: 26px; border-radius: 6px; }
.quiz-pub-scelta--casella:has(input:checked) { background: color-mix(in srgb, var(--tema-quiz-accento) 8%, var(--tema-quiz-carta)); }
.quiz-pub-regola { margin: 0; padding: 10px 14px; border-left: 4px solid var(--tema-quiz-accento); background: color-mix(in srgb, var(--tema-quiz-accento) 6%, var(--tema-quiz-carta)); border-radius: 0 var(--tema-quiz-raggio) var(--tema-quiz-raggio) 0; font-size: 1rem; }
.quiz-pub-scelta--data { cursor: default; }
.quiz-pub-scelta--giusta { border-color: var(--tema-quiz-ok); background: var(--tema-quiz-ok-sfondo); }
.quiz-pub-scelta--sbagliata { border-color: var(--tema-quiz-ko); background: var(--tema-quiz-ko-sfondo); }
.quiz-pub-segno { flex: none; width: 22px; text-align: center; font-weight: 700; }
.quiz-pub-scelta--giusta .quiz-pub-segno { color: var(--tema-quiz-ok); }
.quiz-pub-scelta--sbagliata .quiz-pub-segno { color: var(--tema-quiz-ko); }
.quiz-pub-etichetta { flex: none; font-weight: 600; }
.quiz-pub-scelta--giusta .quiz-pub-etichetta { color: var(--tema-quiz-ok); }
.quiz-pub-scelta--sbagliata .quiz-pub-etichetta { color: var(--tema-quiz-ko); }

.quiz-pub-esito { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--tema-quiz-raggio); font-size: 1.125rem; font-weight: 700; }
.quiz-pub-esito--giusta { background: var(--tema-quiz-ok-sfondo); color: var(--tema-quiz-ok); border: 2px solid var(--tema-quiz-ok); }
.quiz-pub-esito--sbagliata { background: var(--tema-quiz-ko-sfondo); color: var(--tema-quiz-ko); border: 2px solid var(--tema-quiz-ko); }
.quiz-pub-spiegazione { display: grid; gap: 8px; }
.quiz-pub-sottotitolo { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }
/* QUIZ-4 (R12) — the passage a question was made from: a quotation under the explanation, at 16px like the text. */
.quiz-pub-passo { margin: 0; padding: 8px 0 8px 12px; border-left: 3px solid var(--tema-quiz-tenue); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.quiz-pub-spiegazione [data-quiz-riferimenti] a, .quiz-pub-spiegazione [data-quiz-fonte] a { display: inline-block; min-height: 44px; padding: 11px 0; box-sizing: border-box; overflow-wrap: anywhere; }
.quiz-pub-collegamenti { display: grid; gap: 4px; }
.quiz-pub-collegamenti a { display: inline-flex; align-items: center; min-height: 44px; }
/* QUIZ-3 (R4) — the AI's comment on the result: a box of its own under the score, the label on top. */
/* its own box: the same distance from the result's box as the sections below have between them (seen touching
   the box above in the first screenshot) */
.quiz-pub-commento { display: grid; gap: 8px; margin-top: var(--tema-quiz-spazio); }
.quiz-pub-commento-testo { display: grid; gap: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.quiz-pub-commento-testo p { margin: 0; }
/* QUIZ-3 (R1) — «Per approfondire»: the contents suggested at the end. One column on a phone, two from 720px; each
   card is ONE link (the whole card is the touch area, never smaller than 72px), the cover on the left when there
   is one. No fixed colour: the variables of the page, so every shell dresses it. */
.quiz-pub-consigli { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .quiz-pub-consigli { grid-template-columns: 1fr 1fr; } }
.quiz-pub-consiglio { margin: 0; min-width: 0; }
.quiz-pub-consiglio-link { display: flex; gap: 12px; align-items: flex-start; min-height: 72px; padding: 12px; border: 1px solid var(--tema-quiz-linea); border-radius: 12px; background: var(--tema-quiz-carta); color: inherit; text-decoration: none; }
.quiz-pub-consiglio-link:hover .quiz-pub-consiglio-titolo, .quiz-pub-consiglio-link:focus-visible .quiz-pub-consiglio-titolo { text-decoration: underline; }
.quiz-pub-consiglio-foto { flex: none; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.quiz-pub-consiglio-testo { display: grid; gap: 4px; min-width: 0; }
.quiz-pub-consiglio-sopra { font-size: 0.8125rem; opacity: 0.8; }
.quiz-pub-consiglio-titolo { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.quiz-pub-consiglio-sommario { font-size: 0.9375rem; line-height: 1.4; overflow-wrap: anywhere; }

.quiz-pub-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz-pub-bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 12px 24px; border: 2px solid var(--tema-quiz-accento); border-radius: 999px; background: var(--tema-quiz-accento); color: var(--tema-quiz-su-accento); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.quiz-pub-bottone:hover { color: var(--tema-quiz-su-accento); filter: brightness(1.08); }
.quiz-pub-bottone--secondo { background: var(--tema-quiz-carta); color: var(--tema-quiz-accento); }
.quiz-pub-bottone--secondo:hover { color: var(--tema-quiz-accento); }
.quiz-pub-modulo { display: contents; }

/* --- the report ---------------------------------------------------------- */
.quiz-pub-punteggio { font-size: 1.5rem; line-height: 1.25; font-weight: 700; }
.quiz-pub-correzione { border: 1px solid var(--tema-quiz-linea); border-radius: var(--tema-quiz-raggio); background: var(--tema-quiz-carta); }
.quiz-pub-correzione + .quiz-pub-correzione { margin-top: 10px; }
.quiz-pub-correzione summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; cursor: pointer; font-weight: 600; }
.quiz-pub-correzione summary .quiz-pub-segno--giusta { color: var(--tema-quiz-ok); }
.quiz-pub-correzione summary .quiz-pub-segno--sbagliata { color: var(--tema-quiz-ko); }
.quiz-pub-correzione-corpo { display: grid; gap: 8px; padding: 0 14px 14px; }

/* --- the phone ------------------------------------------------------------ */
@media (max-width: 639.98px) {
  .quiz-pub { padding: 16px 0 32px; }
  .quiz-pub-titolo { font-size: 1.5rem; }
  .quiz-pub-domanda { font-size: 1.25rem; }
  .quiz-pub-azioni .quiz-pub-bottone, .quiz-pub-azioni form { flex: 1 1 100%; }
  .quiz-pub-azioni form .quiz-pub-bottone { width: 100%; }

  /* THE COOKIE SHEET IS OPEN (first visit, a sheet fixed to the bottom of the screen): the gestures of the page are
   * FIXED to the top of the screen — where the sheet never is — whatever the scroll, and the page gains room at
   * both ends: above, so that the bar covers nothing of the site's header; below, so that what the sheet covers
   * can be scrolled above it. `:has`, no script. The first version only moved the gestures first and made them
   * sticky: opened without the anchor on a short screen (360 x 640) they started under the sheet — measured by the
   * smoke, not deduced. */
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)):has(.quiz-pub-azioni) { padding-top: 72px; }
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub { padding-bottom: 88vh; padding-bottom: 88dvh; }
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub-riquadro { scroll-margin-top: 84px; }
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub-azioni {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2147482000; flex-wrap: nowrap;
    padding: 8px 16px; background: var(--tema-quiz-carta); border-bottom: 1px solid var(--tema-quiz-linea);
  }
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub-azioni .quiz-pub-bottone,
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub-azioni form { flex: 1 1 0; min-width: 0; }
  body:has(.kasc-pannello:not([hidden]):not(.kasc-anteprima)) .quiz-pub-azioni .quiz-pub-bottone { padding-left: 12px; padding-right: 12px; }
}

@media print {
  .quiz-pub-azioni { display: none; }
  .quiz-pub-correzione { break-inside: avoid; }
}

.quiz-pub-titolo-sezione { margin: 24px 0 12px; }

/* --- the module's own plain shell (a site nobody dresses) ------------------ */
.quiz-guscio { margin: 0; background: var(--tema-colore-bianco-2); color: var(--tema-colore-azzurro-tenue-14-2); font-family: var(--tema-font-system-ui-3); font-size: 16px; }
.quiz-guscio-pagina { padding: 0 16px; }

/* QUIZ-2 (case 8) — «Traduzione automatica»: the discreet line at the bottom of a page whose words a person has
   not confirmed yet. Small, never smaller than what can be read; no colour that is not the shell's. */
:where(.quiz-pub) .quiz-pub-automatica { margin-top: 1.5rem; font-size: 0.875rem; opacity: 0.8; }

/* QUIZ-5 (C1, C2) — beside each answer only its sign; the outcome on one line below, sign and words side by side */
.quiz-pub-scelta--data .quiz-pub-segno { font-size: 1.25rem; }
.quiz-pub-esito { margin-top: 12px; flex-wrap: nowrap; white-space: nowrap; }
.quiz-pub-esito-segno { font-size: 1.25rem; line-height: 1; }
.quiz-pub-segno--giusta { color: var(--tema-quiz-ok); }
.quiz-pub-segno--sbagliata { color: var(--tema-quiz-ko); }
.quiz-pub-correzione-corpo .quiz-pub-segno { display: inline; width: auto; }

/* QUIZ-5 (C5) — the public list as CARDS with a cover, and the page of the quiz with the same data. One column on a
   phone, two from 720px; the image keeps its proportions (16:9, cut to fit) and is never stretched. */
.quiz-pub-elenco--schede { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .quiz-pub-elenco--schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quiz-pub-scheda--copertina { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }
.quiz-pub-scheda-copertina { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tema-quiz-linea); }
.quiz-pub-scheda-corpo { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1 1 auto; }
.quiz-pub-scheda--copertina .quiz-pub-scheda-titolo { text-decoration: none; }
.quiz-pub-scheda--copertina:hover .quiz-pub-scheda-titolo { text-decoration: underline; }
.quiz-pub-scheda--copertina .quiz-pub-scheda-testo { margin-top: 0; color: var(--tema-quiz-inchiostro); }
.quiz-pub-fatti { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.quiz-pub-fatto { display: inline-block; padding: 2px 10px; border: 1px solid var(--tema-quiz-linea); border-radius: 999px; font-size: 1rem; color: var(--tema-quiz-tenue); background: var(--tema-quiz-carta); }
.quiz-pub-scheda-inizia { margin-top: auto; font-weight: 700; color: var(--tema-quiz-accento); }
.quiz-pub-copertina { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tema-quiz-raggio); margin-bottom: 16px; }
.quiz-pub-riquadro--scheda .quiz-pub-fatti { margin: 12px 0; }