/*
 * FlowInteract quiz block styles (com_flowinteract.quiz style asset).
 *
 * Phase 1 is functional and token-only: every colour, radius, font and spacing value is a `--fi-*` token (ADR-0009 section 4: block CSS never
 * carries a literal colour); the only derived colours are computed with color-mix() from the tokens. The outer card frame is the shared
 * `.fi-block` (flowinteract.css). Layout follows a CONTAINER query on `.fi-quiz` itself, never the viewport. Prism's visual pass (answer
 * pictures, result card hero, share cards) lands on top of these class names; nothing here depends on JavaScript to be readable.
 * Targets: 48px minimum tap size, a visible focus ring, nothing conveyed by colour alone (marks and words are added by the script), and
 * reduced motion respected.
 */

.fi-quiz {
    container-type: inline-size;
    container-name: fiquiz;
    --fiq-tint: color-mix(in srgb, var(--fi-accent) 10%, var(--fi-surface));
    --fiq-right: color-mix(in srgb, var(--fi-success) 14%, var(--fi-surface));
    --fiq-wrong: color-mix(in srgb, var(--fi-error) 12%, var(--fi-surface));
    color: var(--fi-text);
    font-family: var(--fi-font);
}

.fi-quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fi-quiz legend { padding: 0; margin: 0; float: left; width: 100%; }
.fi-quiz legend + * { clear: both; }

.fi-quiz__kicker {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fi-text-muted);
}

.fi-quiz__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.28;
    text-wrap: balance;
}

.fi-quiz__meta { margin: 0.3rem 0 1rem; font-size: 0.9rem; color: var(--fi-text-muted); }

.fi-quiz__progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--fi-border);
    overflow: hidden;
}

.fi-quiz__bar {
    display: block;
    height: 100%;
    background: var(--fi-accent);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.fi-quiz__count { margin: 0.4rem 0 0.9rem; font-size: 0.85rem; color: var(--fi-text-muted); }

.fi-quiz__questions { list-style: none; margin: 0; padding: 0; }
.fi-quiz__q[hidden] { display: none; }

.fi-quiz legend.fi-quiz__prompt {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.8rem;
    text-wrap: balance;
}

.fi-quiz__options { display: grid; gap: 0.6rem; }

.fi-quiz__opt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--fi-surface);
    border: 2px solid var(--fi-border);
    border-radius: var(--fi-radius);
    cursor: pointer;
}

.fi-quiz__opt:hover:not(:disabled) { border-color: var(--fi-accent); background: var(--fiq-tint); }
.fi-quiz__opt:focus-visible,
.fi-quiz__next:focus-visible,
.fi-quiz__btn:focus-visible,
.fi-quiz__again:focus-visible,
.fi-quiz__cta:focus-visible,
.fi-quiz__input:focus-visible { outline: 3px solid var(--fi-accent); outline-offset: 2px; }

.fi-quiz__opt:disabled { cursor: default; opacity: 1; }

.fi-quiz__optmark {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fi-border);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

.fi-quiz__opttext { flex: 1 1 auto; min-width: 0; }

.fi-quiz__optnote {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--fi-text-muted);
}

.fi-quiz__opt.is-chosen { border-color: var(--fi-text); }
.fi-quiz__nav { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.fi-quiz__back { padding: 0.5rem 0.9rem; border: 1px solid currentColor; border-radius: var(--fi-radius); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.fi-quiz__subhead { margin: 0.9rem 0 0.3rem; font-weight: 700; }
.fi-quiz__why-list { margin: 0; padding-left: 1.2rem; }
.fi-quiz__runner-link { font-weight: 600; }
.fi-quiz__ladder-list { margin: 0; padding: 0; list-style: none; }
.fi-quiz__ladder-item { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.35rem 0; border-top: 1px solid rgba(128, 128, 128, 0.3); }
.fi-quiz__ladder-item.is-you { font-weight: 700; }
.fi-quiz__ladder-range { opacity: 0.75; }
.fi-quiz__opt.is-right { border-color: var(--fi-success); background: var(--fiq-right); }
.fi-quiz__opt.is-right .fi-quiz__optmark { border-color: var(--fi-success); color: var(--fi-success); }
.fi-quiz__opt.is-wrong { border-color: var(--fi-error); background: var(--fiq-wrong); border-style: dashed; }
.fi-quiz__opt.is-wrong .fi-quiz__optmark { border-color: var(--fi-error); color: var(--fi-error); }

.fi-quiz__feedback {
    margin: 0.8rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--fi-radius);
    background: var(--fi-surface-alt);
    border-left: 4px solid var(--fi-border);
}

.fi-quiz__feedback.is-correct { border-left-color: var(--fi-success); }
.fi-quiz__feedback.is-wrong { border-left-color: var(--fi-error); }
.fi-quiz__feedback.is-error { border-left-color: var(--fi-error); color: var(--fi-error); }
.fi-quiz__feedback[hidden] { display: none; }

.fi-quiz__next,
.fi-quiz__btn,
.fi-quiz__again,
.fi-quiz__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.6rem 1.2rem;
    font: inherit;
    font-weight: 700;
    border-radius: var(--fi-radius);
    cursor: pointer;
    text-decoration: none;
}

.fi-quiz__next,
.fi-quiz__cta,
.fi-quiz__btn--primary {
    margin-top: 0.8rem;
    color: var(--fi-accent-contrast);
    background: var(--fi-accent);
    border: 2px solid var(--fi-accent);
}

.fi-quiz__next[hidden] { display: none; }

.fi-quiz__btn,
.fi-quiz__again {
    color: var(--fi-text);
    background: var(--fi-surface);
    border: 2px solid var(--fi-border);
}

.fi-quiz__btn:hover,
.fi-quiz__again:hover { border-color: var(--fi-accent); }

/* the primary button must win over the plain .fi-quiz__btn above (same weight, later in the file would have made Send white on white) */
.fi-quiz .fi-quiz__btn.fi-quiz__btn--primary {
    color: var(--fi-accent-contrast);
    background: var(--fi-accent);
    border-color: var(--fi-accent);
}

/* ---- the result ---- */
.fi-quiz__result { margin-top: 0.5rem; }
.fi-quiz__result[hidden] { display: none; }
.fi-quiz__score { margin: 0; font-size: 0.95rem; color: var(--fi-text-muted); }
.fi-quiz__outcome { margin: 0.2rem 0 0.5rem; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.fi-quiz__outcome:focus { outline: none; }
.fi-quiz__outcome-img { display: block; max-width: 100%; height: auto; margin: 0.6rem 0; border-radius: var(--fi-radius); }
.fi-quiz__verdict-text { margin: 0 0 0.6rem; font-size: 1.05rem; }
.fi-quiz__actions { margin: 0.4rem 0 1rem; }
.fi-quiz__share,
.fi-quiz__mail { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.8rem; }
.fi-quiz__share-text { flex: 1 1 100%; margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--fi-radius); background: var(--fiq-tint); }
.fi-quiz__again { margin-top: 0.4rem; }

.fi-quiz__mailform { flex: 1 1 100%; display: grid; gap: 0.6rem; padding: 0.8rem; border: 1px solid var(--fi-border); border-radius: var(--fi-radius); background: var(--fi-surface-alt); }
.fi-quiz__mailform[hidden] { display: none; }
.fi-quiz__label { display: grid; gap: 0.2rem; font-size: 0.9rem; }
.fi-quiz__input { min-height: 3rem; padding: 0.5rem 0.7rem; font: inherit; color: inherit; background: var(--fi-surface); border: 2px solid var(--fi-border); border-radius: var(--fi-radius); }
.fi-quiz__check { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; min-height: 2.5rem; }
.fi-quiz__check input { width: 1.25rem; height: 1.25rem; }
.fi-quiz__mailstatus { margin: 0; font-size: 0.9rem; color: var(--fi-text-muted); min-height: 1.2em; }

.fi-quiz.is-busy .fi-quiz__opt { cursor: progress; }
.fi-quiz__nojs { padding: 0.7rem 0.9rem; background: var(--fi-surface-alt); border-radius: var(--fi-radius); }

@container fiquiz (max-width: 360px) {
    .fi-quiz__title { font-size: 1.15rem; }
    .fi-quiz__prompt { font-size: 1.05rem; }
    .fi-quiz__optnote { display: none; }
    .fi-quiz__next, .fi-quiz__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-quiz__bar { transition: none; }
}

/* ================================================================================================================================
 * The visual pass (0.13.0): Prism's design (docs/design/quiz-2026-10, PR #52), folded in. It sits on the class names above and adds the
 * NEW ones; where it repeats a rule it wins by coming later. Additions of ours are marked "ours".
 * ================================================================================================================================ */

/*
 * FlowInteract quiz: Prism's visual pass (2026-10-29), for Builder A to fold into quiz.css.
 *
 * It sits on the P1 class names (PR #51) and adds the ones marked NEW. Like quiz.css it holds no literal colour: every colour is a
 * --fi-* token or a color-mix() of tokens, so the five sites and dark mode are token files, not CSS forks. Layout follows the
 * fiquiz container, never the viewport. Sections:
 *   1 frame and type   2 start card (NEW, fixed height)   3 question screen   4 answer states   5 answer pictures (NEW)
 *   6 knowledge result   7 match result (NEW, P2)   8 share and email   9 loading, error, shared result page (NEW)   10 motion
 */

/* ---------- 1. frame and type ---------- */
.fi-quiz {
    --fiq-tint: color-mix(in srgb, var(--fi-accent) 8%, var(--fi-surface));
    --fiq-line: color-mix(in srgb, var(--fi-text) 18%, var(--fi-surface));
    --fiq-ink: var(--fi-text);               /* headings and the label tab; a separate ink token would need a token-contract change */
}
.fi-block:has(> .fi-quiz) { padding: 0; overflow: hidden; }
.fi-quiz__stage, .fi-quiz__result { padding: 1rem 1rem 1.1rem; }
@container fiquiz (min-width: 560px) { .fi-quiz__stage, .fi-quiz__result { padding: 1.4rem 1.6rem 1.5rem; } }

/* the block's own heading strip: the MT sidebar's label style (a filled tab on a rule) */
.fi-quiz__head { display: flex; align-items: flex-end; gap: 0.75rem; margin: 0 0 1rem; border-bottom: 2px solid var(--fiq-ink); }
.fi-quiz__kicker {
    display: inline-block; margin: 0; padding: 0.3rem 0.6rem 0.25rem;
    font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fi-surface); background: var(--fiq-ink);
}
.fi-quiz__head .fi-quiz__count { margin: 0 0 0.3rem auto; }
.fi-quiz__title { color: var(--fiq-ink); }

/* ---------- 2. start card (NEW): server-rendered, a fixed height so the article never shifts ---------- */
.fi-quiz__start {
    display: grid;
    grid-template-rows: auto 13.75rem;          /* picture (aspect ratio) + a fixed text box: the card's height is known before any script */
}
.fi-quiz__start-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fi-surface-alt); }
.fi-quiz__start-body { display: flex; flex-direction: column; padding: 0.9rem 1rem 1rem; min-height: 0; overflow: hidden; }
.fi-quiz__start .fi-quiz__kicker { align-self: flex-start; margin-bottom: 0.55rem; }
.fi-quiz__start .fi-quiz__title { font-size: 1.25rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fi-quiz__start-dek { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.4; color: var(--fi-text-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fi-quiz__start-row { display: flex; align-items: center; gap: 0.9rem; margin-top: auto; }
.fi-quiz__start-btn { margin: 0; }
.fi-quiz__start-meta { margin: 0; font-size: 0.85rem; color: var(--fi-text-muted); }
@container fiquiz (min-width: 560px) {
    .fi-quiz__start { grid-template-rows: none; grid-template-columns: 42% 1fr; height: 15rem; }
    .fi-quiz__start-pic { aspect-ratio: auto; height: 15rem; }
    .fi-quiz__start-body { padding: 1.2rem 1.4rem 1.3rem; }
    .fi-quiz__start .fi-quiz__title { font-size: 1.45rem; -webkit-line-clamp: 3; }
}
@container fiquiz (max-width: 360px) { .fi-quiz__start-meta { display: none; } .fi-quiz__start-btn { width: 100%; } }
.fi-quiz__start[hidden] { display: none; }
/* text-only start card (no picture): the same fixed heights, one column */
.fi-quiz__start:not(:has(.fi-quiz__start-pic)) { grid-template-rows: 13.75rem; grid-template-columns: none; }

/* the one filled button per screen (P1's .fi-quiz__btn rule comes later in quiz.css and would otherwise win) */
.fi-quiz__btn.fi-quiz__btn--primary { color: var(--fi-accent-contrast); background: var(--fi-accent); border-color: var(--fi-accent); }
.fi-quiz__btn.fi-quiz__btn--primary:hover { background: color-mix(in srgb, var(--fi-accent) 86%, var(--fi-text)); }

/* ---------- 3. question screen ---------- */
.fi-quiz__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.45rem; }
.fi-quiz__count { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fi-text-muted); }
.fi-quiz__progress { height: 4px; border-radius: 0; background: var(--fi-border); margin: 0 0 1.1rem; }
.fi-quiz__bar { border-radius: 0; }
.fi-quiz__back {                                /* NEW, match quizzes only */
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.25rem; margin: -0.5rem 0 -0.5rem -0.25rem;
    font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--fi-text); background: none; border: 0; cursor: pointer;
}
.fi-quiz__back::before { content: "\2039"; font-size: 1.3em; line-height: 1; }
.fi-quiz__back:hover { color: var(--fi-accent); text-decoration: underline; }
.fi-quiz__prompt { font-size: 1.2rem; color: var(--fiq-ink); margin-bottom: 0.9rem; }
@container fiquiz (min-width: 560px) { .fi-quiz__prompt { font-size: 1.4rem; } }
.fi-quiz__options { counter-reset: fiq-opt; gap: 0.5rem; }
@container fiquiz (min-width: 560px) { .fi-quiz__options:not(.fi-quiz__options--pics) { grid-template-columns: 1fr 1fr; gap: 0.6rem; } }

/* ---------- 4. answer states: each one differs by a mark and a word as well as colour ---------- */
.fi-quiz__opt { white-space: normal; counter-increment: fiq-opt; min-height: 3.5rem; border-width: 1px; font-weight: 500; transition: border-color 0.12s, background-color 0.12s, transform 0.08s; }
.fi-quiz__optmark { flex-basis: 1.75rem; width: 1.75rem; height: 1.75rem; border-width: 1px; border-color: var(--fiq-line); border-radius: var(--fi-radius); font-size: 0.85rem; color: var(--fi-text-muted); }
.fi-quiz__optmark:empty::before { content: counter(fiq-opt, upper-alpha); }      /* A B C D until answered: a name for every answer without colour */
.fi-quiz__opt:hover:not(:disabled) { border-color: var(--fi-accent); background: var(--fiq-tint); }
.fi-quiz__opt:active:not(:disabled), .fi-quiz__opt.is-pressed { transform: scale(0.985); border-color: var(--fi-accent); background: var(--fiq-tint); }
/* selected (match: the reader's pick before it advances; knowledge: the instant before the server answers) */
.fi-quiz__opt[aria-pressed="true"]:not(.is-right):not(.is-wrong) { border: 2px solid var(--fi-accent); padding: calc(0.7rem - 1px) calc(0.9rem - 1px); background: var(--fiq-tint); }
.fi-quiz__opt[aria-pressed="true"]:not(.is-right):not(.is-wrong) .fi-quiz__optmark { background: var(--fi-accent); border-color: var(--fi-accent); color: var(--fi-accent-contrast); }
.fi-quiz__opt[aria-pressed="true"]:not(.is-right):not(.is-wrong) .fi-quiz__optmark:empty::before { content: "\2713"; }
/* answered, knowledge: right is solid green with a tick, wrong is a dashed red border with a cross, the rest fade back */
.fi-quiz__q.is-answered .fi-quiz__opt:not(.is-right):not(.is-wrong) { opacity: 0.6; }
.fi-quiz__opt.is-right { border: 2px solid var(--fi-success); padding: calc(0.7rem - 1px) calc(0.9rem - 1px); }
.fi-quiz__opt.is-right .fi-quiz__optmark { background: var(--fi-success); border-color: var(--fi-success); color: var(--fi-surface); }
.fi-quiz__opt.is-wrong { border: 2px dashed var(--fi-error); padding: calc(0.7rem - 1px) calc(0.9rem - 1px); }
.fi-quiz__opt.is-wrong .fi-quiz__optmark { background: var(--fi-surface); border: 2px solid var(--fi-error); color: var(--fi-error); }
.fi-quiz__optnote { font-size: 0.72rem; }
.fi-quiz__opt.is-right .fi-quiz__optnote { color: var(--fi-success); }
.fi-quiz__opt.is-wrong .fi-quiz__optnote { color: var(--fi-error); }
.fi-quiz__feedback { margin-top: 0.9rem; border-radius: 0; font-size: 0.95rem; line-height: 1.45; }
.fi-quiz__feedback .fi-quiz__verdict { display: block; margin-bottom: 0.15rem; font-size: 1rem; color: var(--fiq-ink); }
.fi-quiz__next { min-width: 11rem; }
@container fiquiz (max-width: 559px) { .fi-quiz__next { width: 100%; } }
@container fiquiz (min-width: 560px) { .fi-quiz__q { display: grid; } .fi-quiz__next { justify-self: end; } }
.fi-quiz__q[hidden] { display: none; }

/* ---------- 5. answer pictures (NEW): a 2 x 2 grid of square pictures, the label under each ---------- */
.fi-quiz__options--pics { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
@container fiquiz (min-width: 560px) { .fi-quiz__options--pics { grid-template-columns: repeat(4, 1fr); } }
.fi-quiz__opt--pic { position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; min-height: 0; }
.fi-quiz__opt--pic[aria-pressed="true"]:not(.is-right):not(.is-wrong) { padding: 0; }
.fi-quiz__optpic { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.fi-quiz__opt--pic .fi-quiz__opttext { display: flex; align-items: center; min-height: 3rem; padding: 0.45rem 0.6rem; font-size: 0.92rem; line-height: 1.25; }
.fi-quiz__opt--pic .fi-quiz__optmark { position: absolute; top: 0.45rem; left: 0.45rem; background: var(--fi-surface); }

/* ---------- 6. knowledge result ---------- */
.fi-quiz__result { margin-top: 0; }
.fi-quiz__result .fi-quiz__head { margin-bottom: 1.1rem; }
.fi-quiz__verdictbox { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem; align-items: center; }   /* NEW wrapper */
.fi-quiz__scorebig {                            /* NEW: the score as the hero, "10/10" */
    display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin: 0;
    font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--fi-accent-contrast); background: var(--fi-accent); border-radius: var(--fi-radius);
}
.fi-quiz__scorebig small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.3rem; }
.fi-quiz__outcome { margin: 0; font-size: 1.55rem; color: var(--fiq-ink); }
.fi-quiz__score { margin: 0 0 0.15rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.fi-quiz__verdict-text { grid-column: 1 / -1; margin: 0; font-size: 1.08rem; line-height: 1.5; }
@container fiquiz (min-width: 560px) { .fi-quiz__scorebig { width: 6.5rem; height: 6.5rem; font-size: 2.3rem; } .fi-quiz__outcome { font-size: 1.85rem; } }
/* the band ladder (NEW): where the score sits among the quiz's bands; the reader's band is filled AND labelled "You" */
.fi-quiz__bands { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 1rem 0 0; padding: 0; list-style: none; }
.fi-quiz__band { padding: 0.4rem 0.3rem 0.35rem; font-size: 0.72rem; font-weight: 700; text-align: center; color: var(--fi-text-muted); background: var(--fi-surface-alt); border-top: 3px solid var(--fi-border); }
.fi-quiz__band.is-you { color: var(--fiq-ink); border-top-color: var(--fi-accent); background: var(--fiq-tint); }
.fi-quiz__band-you { display: block; margin-top: 0.1rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fi-accent); }   /* a real word, so it translates (Prism used ::after) */
.fi-quiz__band span { display: block; font-weight: 400; }
.fi-quiz__band .fi-quiz__band-you { font-weight: 700; }

/* the next step: the headline conversion, so it is the one filled button */
.fi-quiz__actions { margin: 1.2rem 0 0; }
.fi-quiz__cta { margin: 0; gap: 0.5rem; }
.fi-quiz__cta::after { content: "\203A"; font-size: 1.35em; line-height: 0.8; }
.fi-quiz__cta-note { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--fi-text-muted); }     /* NEW: what the link is, in one line */
@container fiquiz (max-width: 559px) { .fi-quiz__cta { width: 100%; } }

/* ---------- 7. match result (NEW, P2) ---------- */
.fi-quiz__hero { position: relative; margin: -1rem -1rem 1rem; }
@container fiquiz (min-width: 560px) { .fi-quiz__hero { margin: -1.4rem -1.6rem 1.2rem; } }
.fi-quiz__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@container fiquiz (min-width: 560px) { .fi-quiz__hero img { aspect-ratio: 21 / 9; } }
.fi-quiz__hero .fi-quiz__kicker { position: absolute; left: 1rem; top: 1rem; background: var(--fi-accent); color: var(--fi-accent-contrast); }
.fi-quiz__matchline ~ .fi-quiz__verdict-text { margin-top: 0.55rem; }
.fi-quiz__matchline { margin: 0 0 0.2rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fi-text-muted); }
.fi-quiz__fits { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
.fi-quiz__fits li { padding: 0.25rem 0.55rem; font-size: 0.85rem; border: 1px solid var(--fiq-line); border-radius: var(--fi-radius); }
.fi-quiz__fits li::before { content: "\2713  "; color: var(--fi-success); font-weight: 700; }
.fi-quiz__runner { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; align-items: center; margin: 1.1rem 0 0; padding: 0.7rem; background: var(--fi-surface-alt); border-left: 3px solid var(--fiq-line); }
.fi-quiz__runner img { width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; }
/* 0.21.0: a finder's "Also for you": two results, each with its picture and guide link. */
.fi-quiz__also { margin: 1.1rem 0 0; padding: 0.7rem; background: var(--fi-surface-alt); border-left: 3px solid var(--fiq-line); }
.fi-quiz__also-heading { margin: 0 0 0.5rem; font-weight: 700; }
.fi-quiz__also-item { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; margin: 0 0 0.6rem; }
.fi-quiz__also-item:last-child { margin-bottom: 0; }
.fi-quiz__also-item img { grid-row: span 2; width: 4.5rem; height: 4.5rem; object-fit: cover; display: block; }
.fi-quiz__also-title { font-weight: 600; }
.fi-quiz__also-link { font-weight: 600; }
.fi-quiz__runner p { margin: 0; font-size: 0.92rem; line-height: 1.4; }
.fi-quiz__runner b { display: block; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fi-text-muted); }
.fi-quiz__runner a { font-weight: 700; color: var(--fiq-ink); }

/* ---------- 8. share and email ---------- */
.fi-quiz__share { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--fi-border); gap: 0.5rem; }
.fi-quiz__share-text { margin-bottom: 0.3rem; padding: 0; background: none; font-size: 0.98rem; font-weight: 700; color: var(--fiq-ink); }
.fi-quiz__share .fi-quiz__btn { min-height: 2.75rem; padding: 0.4rem 0.95rem; font-size: 0.92rem; border-width: 1px; gap: 0.45rem; }
.fi-quiz__share .fi-quiz__btn svg { width: 1rem; height: 1rem; fill: currentColor; }
/* email: quiet text links, never a second button row; each opens its small form in place */
.fi-quiz__mail { margin: 0.9rem 0 0; gap: 0.25rem 1.1rem; font-size: 0.88rem; color: var(--fi-text-muted); }
.fi-quiz__mail > .fi-quiz__btn {
    min-height: 2.75rem; padding: 0; border: 0; background: none; font-weight: 500; font-size: 0.88rem;
    color: var(--fi-text-muted); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--fiq-line); gap: 0.4rem;
}
.fi-quiz__mail > .fi-quiz__btn:hover { color: var(--fi-text); text-decoration-color: currentColor; }
.fi-quiz__mail > .fi-quiz__btn svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.fi-quiz__mailform { margin-top: 0.2rem; padding: 0.9rem; gap: 0.7rem; border-radius: 0; color: var(--fi-text); }
.fi-quiz__mailform .fi-quiz__input { border-width: 1px; }
.fi-quiz__mailform .fi-quiz__btn--primary { margin-top: 0; justify-self: start; }
.fi-quiz__check { font-size: 0.85rem; color: var(--fi-text-muted); }
.fi-quiz__fine { margin: 0; font-size: 0.78rem; color: var(--fi-text-muted); }     /* NEW: one line, "We only send what you ask for." */
@container fiquiz (min-width: 560px) { .fi-quiz__mailform { grid-template-columns: 1fr 1fr; } .fi-quiz__mailform > :not(.fi-quiz__label) { grid-column: 1 / -1; } }
.fi-quiz__again { min-height: 2.75rem; margin-top: 0.6rem; padding: 0; border: 0; background: none; font-size: 0.9rem; color: var(--fi-text); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 9. loading, error, and the shared result page (NEW) ---------- */
.fi-quiz__skel { display: grid; gap: 0.5rem; }
.fi-quiz__skel i { display: block; height: 3.5rem; background: linear-gradient(90deg, var(--fi-surface-alt) 0 40%, var(--fi-border) 50%, var(--fi-surface-alt) 60% 100%); background-size: 300% 100%; animation: fiq-shimmer 1.4s linear infinite; }
.fi-quiz__skel i:first-child { height: 1.6rem; width: 70%; }
@keyframes fiq-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fi-quiz__error { display: grid; justify-items: start; gap: 0.6rem; padding: 1rem; border-left: 4px solid var(--fi-error); background: var(--fi-surface-alt); }
.fi-quiz__error p { margin: 0; }
.fi-quiz__error .fi-quiz__btn { min-height: 2.75rem; }
.fi-quiz__invite { margin: 1.3rem 0 0; padding: 1rem; display: grid; gap: 0.6rem; justify-items: start; background: var(--fiq-tint); border-left: 3px solid var(--fi-accent); }
.fi-quiz__invite p { margin: 0; font-weight: 700; color: var(--fiq-ink); }
.fi-quiz__invite .fi-quiz__btn--primary { margin: 0; }

/* ---------- 10. motion: three things move, and only with motion allowed ---------- */
.fi-quiz__q:not([hidden]), .fi-quiz__result.is-in { animation: fiq-in 0.22s ease-out both; }
@keyframes fiq-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fi-quiz__result.is-in .fi-quiz__scorebig { animation: fiq-pop 0.32s 0.08s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
@keyframes fiq-pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fi-quiz__q:not([hidden]), .fi-quiz__result.is-in, .fi-quiz__result.is-in .fi-quiz__scorebig { animation: none; }
    .fi-quiz__opt { transition: none; }
    .fi-quiz__opt:active:not(:disabled), .fi-quiz__opt.is-pressed { transform: none; }
    .fi-quiz__skel i { animation: none; }
}

/* the prompt is a floated legend (P1), so its bottom margin is lost to the clear: space it with padding instead */
.fi-quiz__prompt { margin-bottom: 0; padding-bottom: 0.9rem; }

/* ours: text for screen readers only (the "why this fits" heading above the chips) */
.fi-quiz__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ours: a runner-up with no picture is one column */
.fi-quiz__runner--plain { grid-template-columns: 1fr; }
.fi-quiz__runner-title { margin: 0 0.35rem 0 0.4rem; font-weight: 700; }
.fi-quiz__runner b + .fi-quiz__runner-title { display: block; margin-left: 0; }
.fi-quiz__stage[hidden], .fi-quiz__result[hidden] { display: none; }

/* 0.14.0: a result's longer text (quiz.js richText): paragraphs, line breaks and a bulleted list, built from plain text. */
.fi-quiz__body p { margin: 0 0 .75em; }
.fi-quiz__body p:last-child { margin-bottom: 0; }
.fi-quiz__list { margin: 0 0 .75em; padding-left: 1.25em; }
.fi-quiz__list li { margin: .2em 0; }

/* 0.16.0 (Release B part 1): the result picture comes first for every quiz, the label tab on it. Fill keeps the 16:9 / 21:9 crop above
   (section 7), so a quiz with wide pictures looks as it did. Whole lifts that forced ratio, and only here: the photo at its own ratio,
   capped in height (70vh on a phone), a blurred copy of the same photo filling the sides instead of a grey slab. */
.fi-quiz__hero { overflow: hidden; background: var(--fi-surface-alt); }
.fi-quiz__hero img { position: relative; z-index: 1; }
.fi-quiz__hero .fi-quiz__kicker { z-index: 2; }
.fi-quiz__hero-blur { position: absolute; inset: -24px; z-index: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.6); }
.fi-quiz__hero--fill .fi-quiz__hero-blur { display: none; }
.fi-quiz__hero.fi-quiz__hero--whole img { width: auto; max-width: 100%; height: auto; max-height: min(70vh, 34rem); margin: 0 auto; aspect-ratio: auto; object-fit: contain; }
@container fiquiz (min-width: 560px) { .fi-quiz__hero.fi-quiz__hero--whole img { aspect-ratio: auto; } }

/* 0.16.0: the light strip ("Make it:" in the result text, quiz.js richText): a line or two of what and how, on the tint. */
.fi-quiz__make { margin: 0 0 0.75em; padding: 0.85rem 1rem; background: var(--fiq-tint); border-radius: var(--fi-radius); }
.fi-quiz__make:last-child { margin-bottom: 0; }
.fi-quiz__make-head { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fiq-ink); }
.fi-quiz__body .fi-quiz__make p { margin: 0; }
.fi-quiz__body .fi-quiz__make .fi-quiz__list { margin: 0.2em 0 0; }
.fi-quiz__body .fi-quiz__make .fi-quiz__make-head { margin: 0 0 0.25rem; }
/* 0.16.0: the result text keeps its distance from what sits above it (the verdict or, in a knowledge quiz, the band ladder). */
.fi-quiz__result .fi-quiz__body { margin-top: 1rem; }

/* 0.17.0: a shared-result link (?fiq=) opens on the start card with a small "A friend got" strip above it: the friend's result name and a
   thumbnail, nothing else. It must not look like the reader's own result, and Start stays the one dominant action. */
.fi-quiz__teaser { display: flex; gap: 0.85rem; align-items: center; padding: 0.75rem 1rem; background: var(--fiq-tint); border-bottom: 1px solid var(--fi-border); }
.fi-quiz__teaser-pic { flex: none; width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--fi-radius); }
.fi-quiz__teaser p { margin: 0; line-height: 1.25; }
.fi-quiz__teaser small { display: block; font-size: 0.8rem; color: var(--fi-text-muted); }
.fi-quiz__teaser strong { display: block; font-size: 1.1rem; color: var(--fiq-ink); }
.fi-quiz__teaser:has(+ .fi-quiz__start[hidden]) { display: none; }   /* gone once the reader starts */

/* 0.20.0 (G1): where the reader stands among everyone, inside the verdict line. */
.fi-quiz__readers { display: block; margin-top: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--fi-text-muted); }