/* ============================================================
   OneDayStories — quiz finale, glossario, strumenti di lettura
   Si carica DOPO storia.css / story-player.css e li completa.

   Struttura:
     1. Palette (--x-*) per i tre sfondi di lettura
     2. Sfondi di lettura applicati ai capitoli e alle interattive
     3. Carattere facile
     4. Modalità concentrazione
     5. Pannello strumenti (righe aggiunte alla linguetta)
     6. Glossario: parola, popover, elenco
     7. Quiz

   ⚠️ Ogni <button> eredita da reset.css del tema `:focus {background:#c36}`.
   Per questo i pulsanti qui sotto hanno una regola `:focus` esplicita che
   rimette l'aspetto di riposo, con specificità >= (0,3,0).
   ============================================================ */

/* ------------------------------------------------------------
   1. Palette
   Default per tipo di pagina: i capitoli sono chiari, le interattive scure.
   ------------------------------------------------------------ */
.ods-reader {
    --x-bg: transparent;
    --x-fg: var(--ods-body, #2b2840);
    --x-muted: var(--ods-muted, #6a6680);
    --x-line: rgba(27, 24, 48, 0.16);
    --x-accent: #5b21b6;
    --x-surface: #f4f0fc;
    --x-opt: #ffffff;
    --x-ok: #14632f;      --x-ok-bg: #dcf3e5;
    --x-ko: #9b1c24;      --x-ko-bg: #fbe4e5;
    --x-btn-bg: #5b21b6;  --x-btn-fg: #ffffff;
}
body.ods-story-page {
    --x-bg: transparent;
    --x-fg: #e8e0d0;
    --x-muted: rgba(240, 235, 224, 0.72);
    --x-line: rgba(255, 255, 255, 0.2);
    --x-accent: #f2d9a0;
    --x-surface: rgba(255, 255, 255, 0.06);
    --x-opt: rgba(255, 255, 255, 0.06);
    --x-ok: #86efac;      --x-ok-bg: rgba(74, 222, 128, 0.16);
    --x-ko: #fca5a5;      --x-ko-bg: rgba(248, 113, 113, 0.16);
    --x-btn-bg: #d9a441;  --x-btn-fg: #2a1c02;
}

/* I tre sfondi scelti dal lettore. Le variabili sono scritte sulla radice
   dell'area di lettura E sul <html>, perché il popover del glossario sta
   fuori da entrambe (è figlio di <body>). */
html[data-ods-tema="chiaro"],
html[data-ods-tema="chiaro"] .ods-reader,
html[data-ods-tema="chiaro"] body.ods-story-page {
    --x-bg: #fbfaf7;
    --x-fg: #1f1b2e;
    --x-muted: #55516a;
    --x-line: rgba(31, 27, 46, 0.2);
    --x-accent: #5b21b6;
    --x-surface: #f1edfa;
    --x-opt: #ffffff;
    --x-ok: #14632f;      --x-ok-bg: #dcf3e5;
    --x-ko: #9b1c24;      --x-ko-bg: #fbe4e5;
    --x-btn-bg: #d9a441;  --x-btn-fg: #2a1c02;
    --x-pop-bg: #ffffff;  --x-pop-fg: #1f1b2e;
}
html[data-ods-tema="seppia"],
html[data-ods-tema="seppia"] .ods-reader,
html[data-ods-tema="seppia"] body.ods-story-page {
    --x-bg: #f4ecd8;
    --x-fg: #3b2f1e;
    --x-muted: #66543a;
    --x-line: rgba(59, 47, 30, 0.26);
    --x-accent: #7a3a12;
    --x-surface: #ebe0c6;
    --x-opt: #faf4e4;
    --x-ok: #1d5f35;      --x-ok-bg: #d8ecd5;
    --x-ko: #8e2a1c;      --x-ko-bg: #f3d9cf;
    --x-btn-bg: #8a4a1c;  --x-btn-fg: #fff8ea;
    --x-pop-bg: #faf4e4;  --x-pop-fg: #3b2f1e;
}
html[data-ods-tema="scuro"],
html[data-ods-tema="scuro"] .ods-reader,
html[data-ods-tema="scuro"] body.ods-story-page {
    --x-bg: #14141f;
    --x-fg: #e6e1d3;
    --x-muted: #b9b2a2;
    --x-line: rgba(255, 255, 255, 0.2);
    --x-accent: #d2c0ff;
    --x-surface: #1f1f31;
    --x-opt: #1a1a2a;
    --x-ok: #86efac;      --x-ok-bg: rgba(74, 222, 128, 0.16);
    --x-ko: #fca5a5;      --x-ko-bg: rgba(248, 113, 113, 0.16);
    --x-btn-bg: #d9a441;  --x-btn-fg: #2a1c02;
    --x-pop-bg: #23233a;  --x-pop-fg: #ece7da;
}

/* ------------------------------------------------------------
   2. Sfondi di lettura
   ------------------------------------------------------------ */

/* ---- Capitoli: l'articolo diventa un riquadro del colore scelto. Il tema
        (header, footer) non si tocca: ha i suoi colori. ---- */
html[data-ods-tema] .ods-reader {
    background: var(--x-bg);
    color: var(--x-fg);
    border-radius: 16px;
    padding: clamp(1rem, 3.5vw, 2rem);
    --ods-ink: var(--x-fg);
    --ods-body: var(--x-fg);
    --ods-muted: var(--x-muted);
    --ods-line: var(--x-line);
    --ods-purple: var(--x-accent);
    --ods-purple-600: var(--x-accent);
    --ods-purple-050: var(--x-surface);
}
html[data-ods-tema] .ods-reader .ods-prose,
html[data-ods-tema] .ods-reader .ods-reader__title,
html[data-ods-tema] .ods-reader .ods-finale__title,
html[data-ods-tema] .ods-reader .ods-finale__text { color: var(--x-fg); }
html[data-ods-tema] .ods-reader .ods-finale,
html[data-ods-tema] .ods-reader .ods-next {
    background: var(--x-surface);
    border-color: var(--x-line);
    color: var(--x-fg);
}
html[data-ods-tema] .ods-reader .ods-next__label,
html[data-ods-tema] .ods-reader .ods-next__title,
html[data-ods-tema] .ods-reader .ods-textlink,
html[data-ods-tema] .ods-reader .ods-textlink:visited,
html[data-ods-tema] .ods-reader .ods-reader__eyebrow,
html[data-ods-tema] .ods-reader .ods-progress__label,
html[data-ods-tema] .ods-reader .ods-breadcrumb,
html[data-ods-tema] .ods-reader .ods-breadcrumb a,
html[data-ods-tema] .ods-reader .ods-breadcrumb-current { color: var(--x-fg); }

/* ---- Interattive: la card si fa opaca nel colore scelto ---- */
html[data-ods-tema] .ods-story-card {
    background: var(--x-bg);
    border-color: var(--x-line);
    color: var(--x-fg);
}
html[data-ods-tema="chiaro"] .ods-story-card,
html[data-ods-tema="seppia"] .ods-story-card {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
html[data-ods-tema] .ods-story-card .ods-story-title,
html[data-ods-tema] .ods-story-card .ods-node-text { color: var(--x-fg); }
html[data-ods-tema] .ods-story-card .ods-story-intro,
html[data-ods-tema] .ods-story-card .ods-story-labels-hint,
html[data-ods-tema] .ods-story-card .ods-views { color: var(--x-muted); border-color: var(--x-line); }
html[data-ods-tema] .ods-story-card .ods-story-labels-hint strong,
html[data-ods-tema] .ods-story-card .ods-views strong { color: var(--x-fg); }
html[data-ods-tema] .ods-story-page .ods-node-text th,
html[data-ods-tema] .ods-story-page .ods-node-text td { border-bottom-color: var(--x-line) !important; }
html[data-ods-tema] .ods-story-card .ods-node-text .ods-item-broken { color: var(--x-muted); border-left-color: var(--x-line); }

/* Scelte: oro su scuro; su chiaro/seppia testo scuro su fondo caldo. */
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn {
    background: rgba(217, 164, 65, 0.16);
    border-color: #a9751a;
    color: #3d2900;
}
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn:hover,
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn:focus,
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn:focus-visible,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn:hover,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn:focus,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn:focus-visible {
    background: rgba(217, 164, 65, 0.34);
    border-color: #8a5a0c;
    color: #2a1c02;
}
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn--locked,
html[data-ods-tema="chiaro"] .ods-story-page .ods-choice-btn:disabled,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn--locked,
html[data-ods-tema="seppia"] .ods-story-page .ods-choice-btn:disabled { color: #5c5546; }

/* Pulsanti del finale e riga del cuoricino */
html[data-ods-tema="chiaro"] .ods-story-page .ods-btn-secondary,
html[data-ods-tema="seppia"] .ods-story-page .ods-btn-secondary {
    color: var(--x-fg);
    border-color: var(--x-line);
}
html[data-ods-tema="chiaro"] .ods-story-page .ods-btn-secondary:hover,
html[data-ods-tema="chiaro"] .ods-story-page .ods-btn-secondary:focus,
html[data-ods-tema="seppia"] .ods-story-page .ods-btn-secondary:hover,
html[data-ods-tema="seppia"] .ods-story-page .ods-btn-secondary:focus {
    color: var(--x-fg);
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--x-muted);
}
html[data-ods-tema="chiaro"] .ods-ending-actions .ods-like,
html[data-ods-tema="chiaro"] .ods-ending-actions .ods-like:focus,
html[data-ods-tema="seppia"] .ods-ending-actions .ods-like,
html[data-ods-tema="seppia"] .ods-ending-actions .ods-like:focus {
    color: var(--x-fg);
    border-color: var(--x-line);
    background: rgba(0, 0, 0, 0.04);
}
html[data-ods-tema="chiaro"] #ods-resume-banner,
html[data-ods-tema="seppia"] #ods-resume-banner { background: rgba(37, 99, 235, 0.1); border-color: rgba(37, 99, 235, 0.35); }
html[data-ods-tema="chiaro"] .ods-resume-text,
html[data-ods-tema="seppia"] .ods-resume-text { color: #1e3a8a; }
html[data-ods-tema="chiaro"] #ods-guest-cta,
html[data-ods-tema="seppia"] #ods-guest-cta { color: #5b3d00; background: rgba(217, 164, 65, 0.16); border-color: rgba(138, 90, 12, 0.4); }
html[data-ods-tema="chiaro"] #ods-guest-cta a,
html[data-ods-tema="seppia"] #ods-guest-cta a { color: #7a4a00; }

/* Badge delle caratteristiche: restano leggibili sul chiaro */
html[data-ods-tema="chiaro"] .ods-story-page .ods-badge,
html[data-ods-tema="seppia"] .ods-story-page .ods-badge {
    color: var(--x-fg);
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--x-line);
}

/* HUD e scheda personaggio: strumenti con i loro colori, restano scuri. */
html[data-ods-tema="chiaro"] .ods-hud,
html[data-ods-tema="chiaro"] .ods-stats-hud,
html[data-ods-tema="seppia"] .ods-hud,
html[data-ods-tema="seppia"] .ods-stats-hud { background: #1d1b2e; color: #f0ebe0; }

/* ------------------------------------------------------------
   3. Carattere facile (Atkinson Hyperlegible, self-hosted)
   Se i file non ci sono si ripiega su Verdana, che è disegnata per essere
   letta anche a corpo piccolo.
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('../fonts/AtkinsonHyperlegible-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
html[data-ods-font] .ods-prose,
html[data-ods-font] .ods-prose p,
html[data-ods-font] .ods-node-text,
html[data-ods-font] .ods-node-text p,
html[data-ods-font] .ods-reader__title,
html[data-ods-font] .ods-story-intro,
html[data-ods-font] .ods-story-page .ods-choice-btn,
html[data-ods-font] .ods-quiz,
html[data-ods-font] .ods-quiz button,
html[data-ods-font] .ods-parole,
html[data-ods-font] .ods-parole--pagina,
html[data-ods-font] .ods-glossa-pop {
    font-family: 'Atkinson Hyperlegible', Verdana, 'DejaVu Sans', sans-serif;
    letter-spacing: 0.012em;
    word-spacing: 0.04em;
}
html[data-ods-font] .ods-prose,
html[data-ods-font] .ods-node-text { line-height: 1.95; }

/* ------------------------------------------------------------
   4. Concentrazione: via quello che è nostro e non serve a leggere.
   Gli annunci non si toccano.
   ------------------------------------------------------------ */
html[data-ods-focus] .ods-breadcrumb,
html[data-ods-focus] .ods-share,
html[data-ods-focus] .ods-related,
html[data-ods-focus] .ods-finale__more,
html[data-ods-focus] .ods-reader__foot,
html[data-ods-focus] .ods-story-altversione,
html[data-ods-focus] .ods-story-labels-hint,
html[data-ods-focus] .ods-story-features,
html[data-ods-focus] .ods-reading-tools .ods-views,
html[data-ods-focus] .ods-views,
html[data-ods-focus] .ods-site-header,
html[data-ods-focus] .ods-site-footer,
html[data-ods-focus] .ods-parole--pagina,
html[data-ods-focus] body.single-ods_capitolo .odq-site-header,
html[data-ods-focus] body.single-ods_capitolo .odq-site-footer { display: none !important; }

/* ------------------------------------------------------------
   5. Pannello strumenti: tre righe invece di una pillola
   ------------------------------------------------------------ */
.ods-textsize .ods-textsize__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    border-radius: 16px;
    padding: 0.7rem 0.8rem;
    max-width: calc(100vw - 70px);
}
.ods-textsize__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.ods-textsize__row--switches { flex-direction: column; align-items: stretch; gap: 0.35rem; }
.ods-textsize__label { min-width: 3.4rem; }
.ods-textsize .ods-textsize__btn--tema {
    font-size: 0.78rem;
    min-width: 0;
    padding: 0 0.7rem;
    white-space: nowrap;
}
.ods-textsize .ods-textsize__btn--tema::before {
    content: '';
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    margin-right: 0.4em;
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.ods-textsize .ods-tema-chiaro::before { background: #fbfaf7; }
.ods-textsize .ods-tema-seppia::before { background: #f4ecd8; }
.ods-textsize .ods-tema-scuro::before  { background: #14141f; }
.ods-textsize .ods-textsize__btn[aria-pressed="true"].ods-textsize__btn--tema { background: rgba(255, 255, 255, 0.24); }

.ods-textsize .ods-textsize__switch,
.ods-textsize .ods-textsize__switch:focus {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 40px;
    padding: 0 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: transparent;
    color: #e8e0d0;
    font-family: system-ui, sans-serif;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}
.ods-textsize .ods-textsize__switch:hover,
.ods-textsize .ods-textsize__switch:focus-visible { background: rgba(255, 255, 255, 0.12); }
.ods-textsize__switch-mark {
    flex: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 2px solid currentColor;
    border-radius: 4px;
    position: relative;
}
.ods-textsize__switch[aria-pressed="true"] .ods-textsize__switch-mark::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
@media (max-width: 600px) {
    .ods-textsize .ods-textsize__panel { padding: 0.55rem; }
    .ods-textsize__label { display: block; min-width: 0; font-size: 0.65rem; }
    .ods-textsize__row { flex-wrap: wrap; justify-content: flex-start; }
}

/* ------------------------------------------------------------
   6. Glossario
   ------------------------------------------------------------ */

/* La parola: sottolineatura punteggiata, come un link che non è un link. */
.ods-reader .ods-glossa,
.ods-story-page .ods-glossa,
.ods-glossa {
    appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 2px dotted currentColor;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    white-space: normal;
    cursor: help;
    /* Area di tocco: la riga è bassa, il dito no. */
    padding-block: 0.1em;
}
.ods-reader .ods-glossa:focus,
.ods-story-page .ods-glossa:focus,
.ods-glossa:focus {
    background: transparent;
    color: inherit;
    outline: none;
}
.ods-reader .ods-glossa:hover,
.ods-story-page .ods-glossa:hover,
.ods-glossa:hover,
.ods-glossa[aria-expanded="true"] {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: inherit;
}
.ods-glossa:focus-visible { outline: 2px solid var(--x-accent, #5b21b6); outline-offset: 2px; }

.ods-glossa-pop {
    position: absolute;
    z-index: 300;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: var(--x-pop-bg, #ffffff);
    color: var(--x-pop-fg, #1f1b2e);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-family: system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
}
.ods-glossa-pop[hidden] { display: none; }
.ods-glossa-pop__term { display: block; margin-bottom: 0.2rem; font-size: 1rem; }
.ods-glossa-pop__def  { display: block; }

/* Elenco «Parole della storia» (dentro il player e in fondo all'ultimo capitolo) */
.ods-parole {
    margin: 0 0 1.25rem;
    border: 1px solid var(--x-line);
    border-radius: 12px;
    background: var(--x-surface);
    color: var(--x-fg);
    font-family: system-ui, sans-serif;
    font-size: 0.92rem;
}
.ods-parole summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-weight: 600;
    min-height: 44px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.ods-parole summary {
    list-style: none;
    justify-content: space-between;
    gap: 0.75rem;
}
.ods-parole summary::-webkit-details-marker { display: none; }
/* Il segno che si apre: una freccia che gira. */
.ods-parole summary::after {
    content: '';
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.15rem;
    border: solid currentColor;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}
.ods-parole[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.ods-parole summary:hover { background: color-mix(in srgb, var(--x-accent) 8%, transparent); border-radius: 12px; }
.ods-parole summary:focus-visible { outline: 2px solid var(--x-accent); outline-offset: 2px; }
.ods-parole__list { margin: 0; padding: 0 1rem 0.9rem; }
.ods-parole__list > div { padding: 0.4rem 0; border-top: 1px solid var(--x-line); }
.ods-parole__list dt { font-weight: 700; }
.ods-parole__list dfn { font-style: normal; }
.ods-parole__list dd { margin: 0.1rem 0 0; color: var(--x-muted); }
.ods-reader .ods-parole { margin-top: 2rem; }

/* Tendina «Parole che incontrerai» nella pagina della storia: le definizioni
   stanno nell'HTML (indicizzabili) ma la tendina nasce chiusa. In due colonne
   quando c'è spazio. */
.ods-parole--pagina .ods-parole__list {
    display: grid;
    gap: 0 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ods-parole--pagina { margin: 0 0 1.5rem; }

/* ------------------------------------------------------------
   7. Quiz
   ------------------------------------------------------------ */
.ods-quiz-slot[hidden] { display: none; }
.ods-quiz { margin: 2rem 0 1.5rem; }
.ods-quiz__box {
    padding: 1.25rem 1.25rem 1.4rem;
    border: 1px solid var(--x-line);
    border-radius: 16px;
    background: var(--x-surface);
    color: var(--x-fg);
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}
.ods-quiz__title { margin: 0 0 0.35rem; font-size: 1.3rem; line-height: 1.25; color: inherit; }
.ods-quiz__lead  { margin: 0 0 1rem; color: var(--x-muted); }
.ods-quiz__progress { margin: 0 0 0.5rem; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--x-muted); }
.ods-quiz__q { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.35; color: inherit; }
.ods-quiz__q:focus,
.ods-quiz__title:focus,
.ods-quiz__score:focus { outline: none; }
.ods-quiz__score { margin: 0 0 0.3rem; font-size: 2rem; line-height: 1.1; color: inherit; }

.ods-quiz__opts { display: grid; gap: 0.6rem; margin: 0 0 1rem; }

.ods-quiz .ods-quiz__opt,
.ods-quiz .ods-quiz__opt:focus {
    appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--x-line);
    border-radius: 12px;
    background: var(--x-opt);
    color: var(--x-fg);
    font: inherit;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.ods-quiz .ods-quiz__opt:hover:not(:disabled),
.ods-quiz .ods-quiz__opt:focus-visible {
    border-color: var(--x-accent);
    background: var(--x-opt);
    color: var(--x-fg);
    outline: none;
}
.ods-quiz .ods-quiz__opt:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-accent) 40%, transparent); }
.ods-quiz .ods-quiz__opt:disabled { cursor: default; opacity: 1; color: var(--x-fg); }
.ods-quiz .ods-quiz__opt.is-giusta,
.ods-quiz .ods-quiz__opt.is-giusta:disabled {
    border-color: var(--x-ok);
    background: var(--x-ok-bg);
    color: var(--x-fg);
}
.ods-quiz .ods-quiz__opt.is-sbagliata,
.ods-quiz .ods-quiz__opt.is-sbagliata:disabled {
    border-color: var(--x-ko);
    background: var(--x-ko-bg);
    color: var(--x-fg);
}
/* Giusto/sbagliato non si dice solo col colore. */
.ods-quiz .ods-quiz__opt.is-giusta::after  { content: ' ✓'; font-weight: 700; color: var(--x-ok); }
.ods-quiz .ods-quiz__opt.is-sbagliata::after { content: ' ✗'; font-weight: 700; color: var(--x-ko); }

.ods-quiz__fb { margin: 0 0 1rem; min-height: 1.5rem; }
.ods-quiz__fb strong { color: inherit; }

.ods-quiz__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 0; }
.ods-quiz .ods-quiz__btn,
.ods-quiz .ods-quiz__btn:focus {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.65rem 1.3rem;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    white-space: normal;
    border: 2px solid transparent;
}
.ods-quiz .ods-quiz__btn--primary,
.ods-quiz .ods-quiz__btn--primary:focus {
    background: var(--x-btn-bg);
    color: var(--x-btn-fg);
    border-color: var(--x-btn-bg);
}
.ods-quiz .ods-quiz__btn--secondary,
.ods-quiz .ods-quiz__btn--secondary:focus {
    background: transparent;
    color: var(--x-fg);
    border-color: var(--x-line);
}
.ods-quiz .ods-quiz__btn:hover,
.ods-quiz .ods-quiz__btn:focus-visible {
    filter: brightness(1.12);
    outline: none;
}
/* ⚠️ reset.css del tema: `button:hover {background:#c36}`. Lo stato hover va
   riscritto per ogni variante, o il pulsante diventa magenta. */
.ods-quiz .ods-quiz__btn--primary:hover,
.ods-quiz .ods-quiz__btn--primary:focus-visible {
    background: var(--x-btn-bg);
    color: var(--x-btn-fg);
    border-color: var(--x-btn-bg);
}
.ods-quiz .ods-quiz__btn--secondary:hover,
.ods-quiz .ods-quiz__btn--secondary:focus-visible { border-color: var(--x-muted); background: transparent; color: var(--x-fg); }
.ods-quiz .ods-quiz__btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-accent) 45%, transparent); }

.ods-quiz__more { margin: 1.1rem 0 0; font-size: 0.95rem; }
.ods-quiz__more a,
.ods-quiz__more a:visited { color: var(--x-accent); font-weight: 600; text-decoration: underline; }

@media (max-width: 480px) {
    .ods-quiz__box { padding: 1rem 0.9rem 1.2rem; }
    .ods-quiz__actions .ods-quiz__btn { width: 100%; }
}

/* Riquadro chiuso: una riga sola, alto quanto l'elenco delle parole. */
.ods-quiz__box--intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
    padding: 0.7rem 0.7rem 0.7rem 1rem;
    border-radius: 12px;
}
.ods-quiz__intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.75rem; min-width: 0; }
.ods-quiz__box--intro .ods-quiz__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.ods-quiz__box--intro .ods-quiz__lead { margin: 0; font-size: 0.88rem; }
.ods-quiz__box--intro .ods-quiz__btn { min-height: 40px; padding: 0.4rem 1.1rem; }

@media (prefers-reduced-motion: reduce) {
    .ods-quiz .ods-quiz__opt { transition: none; }
    .ods-parole summary::after { transition: none; }
}