/* Quiz block — the taker's surface, plus the builder's read-only outline of it.

   Colour comes only from the site theme tokens, so a site that changes its accent changes its quizzes
   with it. Pass and fail are the exception: green and red carry meaning a taker expects, so they are
   defined per colour mode below and always paired with words and an icon rather than being the only
   signal. Deliberately shaped like the lesson quiz player, because a member may meet both on the same
   site and they should not feel like two different products. */

html[data-theme="light"],
html:not([data-theme]) {
    --quiz-pass: #1c7a4d;
    --quiz-fail: #b0431d;
    --quiz-mix: #ffffff;
}

html[data-theme="dark"] {
    --quiz-pass: #5ac68b;
    --quiz-fail: #ef8c65;
    --quiz-mix: #000000;
}

.quiz-block {
    /* Surfaces are mixed from theme tokens rather than fixed greys, so panels keep their relationship to
       the page background whatever the site's palette is. */
    --quiz-raised: color-mix(in srgb, var(--text-primary) 4%, var(--surface-bg));
    --quiz-sunken: color-mix(in srgb, var(--text-primary) 9%, var(--surface-bg));
    --quiz-line: var(--border-color);
    --quiz-line-soft: color-mix(in srgb, var(--border-color) 60%, transparent);
    /* Thin borders need more contrast than thick ones to read as deliberate. */
    --quiz-line-strong: var(--border-color-strong, color-mix(in srgb, var(--border-color) 70%, var(--text-primary)));
    --quiz-accent: var(--accent-primary, var(--accent-gold));
    --quiz-accent-soft: color-mix(in srgb, var(--quiz-accent) 12%, var(--surface-bg));
    --quiz-accent-line: color-mix(in srgb, var(--quiz-accent) 55%, var(--border-color));
    --quiz-pass-soft: color-mix(in srgb, var(--quiz-pass) 14%, var(--surface-bg));
    --quiz-fail-soft: color-mix(in srgb, var(--quiz-fail) 14%, var(--surface-bg));
    --quiz-radius: var(--radius-md, 12px);
    --quiz-radius-sm: var(--radius-sm, 8px);
}

.quiz {
    border: 1px solid var(--quiz-line);
    border-radius: var(--quiz-radius);
    background: var(--quiz-raised);
    padding: 1.25rem;
}

/* ----- Notices ------------------------------------------------------------- */

.quiz-note {
    border-radius: var(--quiz-radius-sm);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    border-left: 4px solid var(--quiz-accent);
    background: var(--quiz-raised);
}

.quiz-note:last-child {
    margin-bottom: 0;
}

.quiz-note-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.quiz-note-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.925rem;
}

.quiz-note-text + .quiz-note-text {
    margin-top: 0.35rem;
}

.quiz-note-warn {
    border-left-color: var(--quiz-fail);
    background: var(--quiz-fail-soft);
}

.quiz-note-passed {
    border-left-color: var(--quiz-pass);
    background: var(--quiz-pass-soft);
}

/* The locked notice stands alone on the page, so it carries its own frame rather than sitting inside
   the quiz card the visitor is not getting. */
.quiz-note-locked {
    border: 1px solid var(--quiz-line);
    border-left-width: 4px;
    background: var(--quiz-accent-soft);
    padding: 1.15rem 1.25rem;
}

.quiz-note-locked .btn {
    margin-top: 0.75rem;
}

.quiz-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.75rem 0 0;
}

/* ----- Answering ----------------------------------------------------------- */

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1.25rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--quiz-line-soft);
    font-size: 0.875rem;
    color: var(--text-muted);
}

.quiz-meta-item strong {
    color: var(--text-primary);
}

.quiz-q {
    border: 0;
    padding: 1.15rem 0 0;
    margin: 0;
}

.quiz-q + .quiz-q {
    border-top: 1px solid var(--quiz-line-soft);
}

.quiz-q-legend {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 0.55rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--heading-color, var(--text-primary));
}

.quiz-q-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--quiz-accent-soft);
    color: var(--text-primary);
}

.quiz-q-hint {
    margin: 0 0 0.45rem 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Preserves the whitespace of whatever was pasted, and scrolls rather than wrapping: a folded command
   line misrepresents what the question is asking about. */
.quiz-code {
    margin: 0 0 0.6rem 2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--quiz-line-soft);
    border-radius: var(--quiz-radius-sm);
    background: var(--quiz-sunken);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-left: 2rem;
}

/* Whole-row answer cards. The hit target is the card, not a 13px radio, which matters most on a phone.
   A round marker means one answer, a square marker means several. */
.quiz-answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--quiz-line);
    border-radius: var(--quiz-radius-sm);
    background: var(--surface-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.quiz-answer:hover {
    border-color: var(--quiz-accent-line);
    background: var(--quiz-accent-soft);
}

.quiz-answer[data-selected] {
    border-color: var(--quiz-accent);
    background: var(--quiz-accent-soft);
    box-shadow: inset 0 0 0 1px var(--quiz-accent);
}

/* Visually hidden rather than display:none, so the control still takes keyboard focus and announces
   itself; the focus ring is drawn on the card instead. */
.quiz-answer-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.quiz-answer:has(.quiz-answer-input:focus-visible) {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--quiz-accent) 45%, transparent));
}

.quiz-answer-marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1.5px solid var(--quiz-line-strong);
    border-radius: 50%;
    background: var(--surface-bg);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.quiz-answer[data-multi] .quiz-answer-marker {
    border-radius: 0.35rem;
}

.quiz-answer[data-selected] .quiz-answer-marker {
    border-color: var(--quiz-accent);
    background: var(--quiz-accent);
    color: var(--accent-on-primary, var(--quiz-mix));
}

.quiz-answer-text {
    min-width: 0;
}

.quiz-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--quiz-line-soft);
}

.quiz-progress {
    flex: 1 1 12rem;
    min-width: 0;
}

.quiz-progress-bar {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--quiz-sunken);
    overflow: hidden;
}

.quiz-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--quiz-accent);
    transition: width 0.2s ease;
}

.quiz-progress-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ----- Result -------------------------------------------------------------- */

.quiz-outcome {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--quiz-line-soft);
}

.quiz-outcome-ring {
    flex: 0 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--quiz-ring-color) calc(var(--quiz-ring-pct, 0) * 1%), var(--quiz-sunken) 0);
}

.quiz-outcome-ring[data-outcome="pass"] {
    --quiz-ring-color: var(--quiz-pass);
}

.quiz-outcome-ring[data-outcome="fail"] {
    --quiz-ring-color: var(--quiz-fail);
}

.quiz-outcome-ring::before {
    content: "";
    position: absolute;
    inset: 0.42rem;
    border-radius: 50%;
    background: var(--quiz-raised);
}

.quiz-outcome-pct {
    position: relative;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.quiz-outcome-pct small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quiz-outcome-detail {
    min-width: 0;
}

.quiz-outcome-verdict {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.quiz-outcome-verdict[data-outcome="pass"] {
    color: var(--quiz-pass);
}

.quiz-outcome-verdict[data-outcome="fail"] {
    color: var(--quiz-fail);
}

.quiz-outcome-count,
.quiz-outcome-note,
.quiz-outcome-reward {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.quiz-outcome-message {
    margin: 0.4rem 0 0;
    color: var(--text-primary);
}

.quiz-outcome-sep {
    padding: 0 0.35rem;
    opacity: 0.6;
}

.quiz-review {
    margin-top: 1.25rem;
}

.quiz-review-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.quiz-review-hidden {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-muted);
}

.quiz-review-item {
    padding: 0.85rem 0;
    border-top: 1px solid var(--quiz-line-soft);
}

.quiz-review-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.quiz-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--quiz-mix);
}

.quiz-review-item[data-outcome="correct"] .quiz-review-icon {
    background: var(--quiz-pass);
}

.quiz-review-item[data-outcome="wrong"] .quiz-review-icon {
    background: var(--quiz-fail);
}

.quiz-review-number {
    font-weight: 600;
}

.quiz-review-verdict {
    color: var(--text-muted);
}

.quiz-review-text {
    margin: 0 0 0.5rem;
}

.quiz-review-choices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.quiz-review-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--quiz-line-soft);
    border-radius: var(--quiz-radius-sm);
    background: var(--surface-bg);
    font-size: 0.925rem;
}

.quiz-review-choice[data-correct="True"] {
    border-color: color-mix(in srgb, var(--quiz-pass) 50%, var(--border-color));
    background: var(--quiz-pass-soft);
}

.quiz-review-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.quiz-review-tag.is-correct {
    color: var(--quiz-pass);
}

.quiz-review-explanation {
    margin: 0.55rem 0 0;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid var(--quiz-accent);
    background: var(--quiz-accent-soft);
    border-radius: 0 var(--quiz-radius-sm) var(--quiz-radius-sm) 0;
    font-size: 0.9rem;
}

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--quiz-line-soft);
}

.quiz-actions-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ----- Builder outline ----------------------------------------------------- */

/* What the author sees in the page builder: the shape of the quiz and what is unfinished, never a
   takeable copy. Scoring an attempt against their own draft would pollute the very results the quiz
   exists to produce. */
.quiz-studio-list {
    list-style: none;
    padding: 0;
    margin: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.quiz-studio-item {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--quiz-line-soft);
    border-radius: var(--quiz-radius-sm);
    background: var(--surface-bg);
    font-size: 0.9rem;
}

.quiz-studio-item[data-ready="False"] {
    border-color: color-mix(in srgb, var(--quiz-fail) 45%, var(--border-color));
    background: var(--quiz-fail-soft);
}

.quiz-studio-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--quiz-accent-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.quiz-studio-text {
    flex: 1 1 auto;
    min-width: 0;
}

.quiz-studio-warn {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--quiz-fail);
}

/* ----- Authoring ----------------------------------------------------------- */

/* The question editor in the block settings form. It repeats the token block rather than nesting under
   .quiz-block because the editor is not inside a rendered quiz, and it leans on Bootstrap's form
   controls for the inputs themselves — only the structure around them is styled here. */
.quiz-editor {
    --quiz-raised: color-mix(in srgb, var(--text-primary) 4%, var(--surface-bg));
    --quiz-line: var(--border-color);
    --quiz-line-soft: color-mix(in srgb, var(--border-color) 60%, transparent);
    --quiz-accent: var(--accent-primary, var(--accent-gold));
    --quiz-accent-soft: color-mix(in srgb, var(--quiz-accent) 12%, var(--surface-bg));
    --quiz-fail-soft: color-mix(in srgb, var(--quiz-fail) 14%, var(--surface-bg));
    --quiz-radius-sm: var(--radius-sm, 8px);
}

.quiz-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.quiz-editor-count {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.quiz-editor-empty {
    border: 1px dashed var(--quiz-line);
    border-radius: var(--quiz-radius-sm);
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
}

.quiz-editor-empty-title {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* A chip rather than an alert: an unfinished question is a normal mid-authoring state, and a row of
   warning banners would train the author to ignore them. */
.quiz-warn-chip,
.quiz-info-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.quiz-warn-chip {
    background: var(--quiz-fail-soft);
    color: var(--quiz-fail);
}

.quiz-info-chip {
    background: var(--quiz-accent-soft);
    color: var(--text-primary);
}

.quiz-question {
    border: 1px solid var(--quiz-line);
    border-radius: var(--quiz-radius-sm);
    background: var(--quiz-raised);
    margin-bottom: 0.5rem;
}

.quiz-question[data-ready="False"] {
    border-color: color-mix(in srgb, var(--quiz-fail) 40%, var(--border-color));
}

.quiz-question-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
}

.quiz-question-toggle {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: inherit;
}

.quiz-question-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--quiz-accent-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.quiz-question-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.quiz-question-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-question-summary {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.quiz-question-status,
.quiz-question-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.quiz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--quiz-line-soft);
    border-radius: var(--quiz-radius-sm);
    background: var(--surface-bg);
    color: var(--text-muted);
    line-height: 1;
}

.quiz-icon-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--quiz-line);
}

.quiz-icon-btn:disabled {
    opacity: 0.4;
}

.quiz-icon-btn.is-danger:hover:not(:disabled) {
    color: var(--quiz-fail);
    border-color: color-mix(in srgb, var(--quiz-fail) 50%, var(--border-color));
}

.quiz-question-body {
    padding: 0 0.65rem 0.65rem;
    border-top: 1px solid var(--quiz-line-soft);
    padding-top: 0.65rem;
}

.quiz-question-text {
    margin-bottom: 0.5rem;
}

.quiz-code-edit {
    margin-bottom: 0.5rem;
}

.quiz-code-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.quiz-code-edit-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quiz-code-input {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.82rem;
}

.quiz-code-add {
    padding: 0;
    font-size: 0.82rem;
}

.quiz-choice-guide {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.quiz-choice {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

/* Each marker toggles independently rather than behaving as a radio group: "which of these are right" is
   the author's actual question, and marking a second answer must not silently unmark the first. */
.quiz-choice-mark {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
}

.quiz-choice[data-correct="True"] .quiz-choice-letter {
    background: color-mix(in srgb, var(--quiz-pass) 20%, var(--surface-bg));
    color: var(--quiz-pass);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--quiz-pass) 55%, transparent);
}

.quiz-choice-letter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--quiz-radius-sm);
    background: var(--quiz-accent-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.quiz-add-question {
    margin-top: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {

    .quiz-answer,
    .quiz-answer-marker,
    .quiz-progress-bar > span {
        transition: none;
    }
}

@media (max-width: 640px) {

    .quiz {
        padding: 1rem;
    }

    /* The 2rem indent that aligns answers under a question number costs more than it buys once the
       viewport is this narrow. */
    .quiz-answers,
    .quiz-q-hint,
    .quiz-code {
        margin-left: 0;
    }

    .quiz-submit .btn,
    .quiz-actions .btn {
        width: 100%;
    }

    .quiz-outcome {
        gap: 1rem;
    }
}