/* Quiz Practice */
.quiz-shell {
    width: min(100%, 920px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: fadeIn 0.3s ease;
}

.quiz-gate,
.quiz-card,
.quiz-status-card,
.quiz-sync-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
}

/* The lock screen: a white panel with a pastel lock tile, like the rest of the app */
.quiz-gate {
    width: min(100%, 460px);
    margin: clamp(8px, 3vh, 32px) auto 0;
    padding: 22px;
    border-radius: var(--radius-panel);
}

.quiz-gate-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin-bottom: 18px;
}

.quiz-gate-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: var(--tile-bg);
    color: var(--tile-fg);
}

.quiz-gate-mark svg {
    width: 22px;
    height: 22px;
}

.quiz-eyebrow {
    color: var(--accent-blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.quiz-gate h2 {
    margin-top: 1px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.quiz-gate-copy {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

.quiz-password-form {
    display: grid;
    gap: 10px;
}

/* Pill input and button, like the app's other controls */
.quiz-gate .quiz-input {
    min-height: 48px;
    padding: 0 18px;
    border-color: transparent;
    border-radius: 999px;
    background: var(--track);
}

.quiz-gate .quiz-input:focus {
    border-color: var(--border-subtle);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--search-highlight);
}

.quiz-gate .quiz-btn-primary {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
}

.quiz-gate .quiz-form-error {
    min-height: 18px;
    padding-left: 6px;
}

.quiz-input,
.quiz-textarea,
.quiz-select {
    width: 100%;
    min-height: 48px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 16px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.quiz-input {
    padding: 0 15px;
}

.quiz-textarea {
    min-height: 132px;
    padding: 14px 15px;
    line-height: 1.55;
    resize: vertical;
}

.quiz-select {
    padding: 0 38px 0 12px;
}

.quiz-input:focus,
.quiz-textarea:focus,
.quiz-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--border-active);
}

.quiz-form-error {
    min-height: 20px;
    color: var(--accent-rose);
    font-size: 0.85rem;
    font-weight: 650;
}

.quiz-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    color: var(--text-primary);
    background: var(--track);
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

.quiz-btn:hover {
    filter: brightness(0.96);
}

.quiz-btn:active {
    transform: scale(0.98);
}

.quiz-btn:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

.quiz-btn-primary {
    color: var(--on-primary);
    background: var(--primary);
    border-color: transparent;
}

.quiz-btn-primary:hover {
    filter: none;
    opacity: 0.88;
}

.quiz-btn-success {
    color: var(--on-primary);
    background: var(--accent-emerald);
    border-color: transparent;
}

.quiz-btn-danger {
    color: var(--accent-rose);
}

.quiz-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.quiz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.quiz-topbar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-title-wrap {
    min-width: 0;
}

/* The page head names the page; full screen hides that head, so the title returns (and
   phones use this title row instead of the head, see the phone block). */
html:not(.quiz-focus-mode) .quiz-title-wrap {
    display: none;
}

html:not(.quiz-focus-mode) .quiz-topbar {
    justify-content: flex-end;
}

.quiz-page-title {
    margin-top: 3px;
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    line-height: 1.18;
}

.quiz-sync-button {
    flex: 0 0 auto;
}

.quiz-focus-button {
    flex: 0 0 auto;
}

.quiz-focus-button.is-active {
    color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 9%, var(--bg-card));
    border-color: var(--border-active);
}

.quiz-sync-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted) 15%, transparent);
}

.quiz-sync-dot.is-synced {
    background: var(--accent-emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-emerald) 16%, transparent);
}

.quiz-sync-dot.is-saving,
.quiz-sync-dot.is-connecting {
    background: var(--accent-amber);
    animation: quizPulse 1s ease-in-out infinite;
}

.quiz-sync-dot.is-error,
.quiz-sync-dot.is-offline {
    background: var(--accent-rose);
}

@keyframes quizPulse {
    50% { opacity: 0.45; transform: scale(0.8); }
}

.quiz-status-card {
    padding: 16px 18px;
    border-radius: 20px;
}

.quiz-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
}

.quiz-progress-track {
    height: 7px;
    overflow: hidden;
    background: var(--track);
    border-radius: 999px;
}

.quiz-progress-fill {
    width: var(--quiz-progress, 0%);
    height: 100%;
    background: var(--accent-blue);
    border-radius: inherit;
    transition: width var(--transition-med);
}

.quiz-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 13px;
}

.quiz-stat {
    min-width: 0;
    padding: 10px 12px;
    background: var(--bg-surface);
    border-radius: 12px;
}

.quiz-stat-value {
    display: block;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.quiz-stat-label {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-card {
    padding: clamp(20px, 4vw, 34px);
    border-radius: var(--radius-panel);
}

.quiz-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 19px;
}

.quiz-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    color: var(--text-secondary);
    background: var(--track);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

/* The topic's pastel hue (topicHue() in index.html) */
.quiz-pill-topic {
    color: var(--tile-fg, var(--accent-blue));
    background: var(--tile-bg, var(--bg-surface));
}

.quiz-vignette {
    margin-bottom: 22px;
    overflow: hidden;
    background: color-mix(in srgb, var(--accent-purple) 6%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-purple) 18%, transparent);
    border-radius: var(--radius-md);
}

.quiz-vignette summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    color: var(--accent-purple);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.quiz-vignette summary::-webkit-details-marker {
    display: none;
}

.quiz-vignette summary::after {
    content: "›";
    font-size: 1.35rem;
    transform: rotate(90deg);
    transition: transform var(--transition-fast);
}

.quiz-vignette:not([open]) summary::after {
    transform: rotate(0deg);
}

.quiz-vignette-body {
    padding: 0 15px 16px;
    border-top: 1px solid color-mix(in srgb, var(--accent-purple) 14%, transparent);
}

.quiz-question-label {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.quiz-prompt {
    margin-bottom: 24px;
    color: var(--text-primary);
    font-size: clamp(1.04rem, 2.7vw, 1.2rem);
    font-weight: 570;
    line-height: 1.72;
}

.quiz-prompt:focus {
    outline: none;
}

.quiz-rich-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    font-variant-numeric: tabular-nums;
}

.quiz-formula-text {
    font-family: "Cambria Math", Cambria, "Times New Roman", serif;
    letter-spacing: 0.01em;
}

/* Tables reconstructed from flattened source text. */
.quiz-table-wrap {
    margin: 14px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.quiz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quiz-table th,
.quiz-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.quiz-table tbody tr:last-child td {
    border-bottom: 0;
}

.quiz-table thead th {
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-active);
}

.quiz-table .quiz-th-caption {
    white-space: normal;
    font-weight: 700;
}

.quiz-table .quiz-th-num,
.quiz-table .quiz-td-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.quiz-table .quiz-td-label {
    color: var(--text-secondary);
}

.quiz-choices {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.quiz-choices legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.quiz-choice {
    position: relative;
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.quiz-choice:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-active);
}

.quiz-choice:active {
    transform: scale(0.992);
}

/* Native radio is visually hidden but kept fully functional and focusable;
   the circular marker below is the visible control with the letter inside it. */
.quiz-choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.quiz-choice-marker {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--border-active);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.quiz-choice-input:checked + .quiz-choice-marker {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff;
}

.quiz-choice-content {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.55;
}

.quiz-choice.is-correct {
    background: color-mix(in srgb, var(--accent-emerald) 9%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-emerald) 58%, transparent);
}

.quiz-choice.is-correct .quiz-choice-marker {
    background: var(--accent-emerald);
    border-color: var(--accent-emerald);
    color: #fff;
}

.quiz-choice.is-wrong {
    background: color-mix(in srgb, var(--accent-rose) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-rose) 58%, transparent);
}

.quiz-choice.is-wrong .quiz-choice-marker {
    background: var(--accent-rose);
    border-color: var(--accent-rose);
    color: #fff;
}

.quiz-choice.is-answered {
    cursor: default;
}

.quiz-choice.is-answered:active {
    transform: none;
}

.quiz-feedback {
    margin-top: 18px;
    padding: 17px 18px;
    border: 0;
    border-radius: var(--radius-md);
    scroll-margin-top: 130px;
}

.quiz-feedback.is-correct {
    background: color-mix(in srgb, var(--accent-emerald) 7%, var(--bg-card));
    border-left-color: var(--accent-emerald);
}

.quiz-feedback.is-wrong {
    background: color-mix(in srgb, var(--accent-rose) 6%, var(--bg-card));
    border-left-color: var(--accent-rose);
}

.quiz-feedback-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    font-weight: 850;
}

.quiz-feedback.is-correct .quiz-feedback-title {
    color: var(--accent-emerald);
}

.quiz-feedback.is-wrong .quiz-feedback-title {
    color: var(--accent-rose);
}

.quiz-feedback-copy {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

.quiz-correct-answer {
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: 750;
}

.quiz-written {
    display: grid;
    gap: 13px;
}

.quiz-written-help {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.quiz-model-answer {
    margin-top: 16px;
    padding: 18px;
    background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, transparent);
    border-radius: var(--radius-md);
}

.quiz-model-answer h3 {
    margin-bottom: 10px;
    color: var(--accent-blue);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quiz-self-grade {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.quiz-matching {
    display: grid;
    gap: 11px;
}

.quiz-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.quiz-match-left {
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.45;
}

.quiz-match-arrow {
    color: var(--text-muted);
    text-align: center;
}

.quiz-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quiz-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quiz-sync-panel {
    padding: clamp(19px, 4vw, 27px);
    border-radius: var(--radius-lg);
}

.quiz-sync-panel[hidden] {
    display: none;
}

.quiz-sync-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quiz-sync-head h3 {
    font-size: 1.05rem;
}

.quiz-sync-copy {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.55;
}

.quiz-token-form {
    display: grid;
    gap: 11px;
    margin-top: 17px;
}

.quiz-token-link {
    color: var(--accent-blue);
    font-size: 0.84rem;
    font-weight: 750;
    text-underline-offset: 3px;
}

.quiz-sync-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    padding: 14px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
}

.quiz-sync-account strong,
.quiz-sync-account span {
    display: block;
}

.quiz-sync-account span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.quiz-sync-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.quiz-sync-message {
    min-height: 20px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.quiz-sync-message.is-error {
    color: var(--accent-rose);
    font-weight: 650;
}

.quiz-empty,
.quiz-loading {
    min-height: 280px;
    display: grid;
    place-items: center;
    padding: 32px;
    color: var(--text-secondary);
    text-align: center;
}

.quiz-loading-inner {
    display: grid;
    justify-items: center;
    gap: 14px;
}

.quiz-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: quizSpin 0.75s linear infinite;
}

@keyframes quizSpin {
    to { transform: rotate(360deg); }
}

.quiz-complete {
    padding: clamp(28px, 7vw, 52px);
    text-align: center;
}

.quiz-complete-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    color: #fff;
    background: var(--gradient-2);
    border-radius: 50%;
    font-size: 1.8rem;
}

.quiz-complete h2 {
    font-size: clamp(1.55rem, 5vw, 2.1rem);
}

.quiz-complete p {
    margin: 10px auto 22px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.quiz-btn:focus-visible,
.quiz-choice:has(input:focus-visible),
.quiz-vignette summary:focus-visible,
.quiz-token-link:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
}

html.quiz-focus-mode .header,
html.quiz-focus-mode .content-tabs,
html.quiz-focus-mode .tab-bar,
html.quiz-focus-mode #searchSection,
html.quiz-focus-mode #sheetHead {
    display: none !important;
}

html.quiz-focus-mode .page-watermark,
html.quiz-focus-mode .app-container::after {
    display: none !important;
}

html.quiz-focus-mode .app-container {
    max-width: 1100px;
    padding-top: max(14px, env(safe-area-inset-top)) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 720px) {
    .quiz-shell {
        gap: 14px;
    }

    .quiz-gate {
        margin-top: 0;
        padding: 18px;
    }

    .quiz-topbar {
        align-items: flex-start;
    }

    .quiz-sync-button {
        min-height: 46px;
        padding: 0 12px;
    }

    .quiz-focus-button {
        min-width: 46px;
        min-height: 46px;
        padding: 0 12px;
    }

    .quiz-status-card {
        padding: 14px;
    }

    .quiz-stat {
        padding: 9px 8px;
    }

    .quiz-stat-value {
        font-size: 0.95rem;
    }

    .quiz-card {
        border-radius: var(--radius-lg);
    }

    .quiz-choice {
        padding: 12px 13px;
    }

    .quiz-match-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .quiz-match-arrow {
        display: none;
    }

    .quiz-actions {
        align-items: stretch;
    }

    .quiz-actions-right {
        flex: 1;
    }

    .quiz-actions-right .quiz-btn {
        flex: 1;
    }

    .quiz-sync-account {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .quiz-focus-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .quiz-btn {
        padding-right: 13px;
        padding-left: 13px;
    }

    .quiz-actions {
        display: flex;
    }

    .quiz-actions > .quiz-btn,
    .quiz-actions-right {
        width: auto;
        flex: 1 1 0;
    }

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

    .quiz-self-grade .quiz-btn,
    .quiz-sync-actions .quiz-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-shell,
    .quiz-spinner,
    .quiz-sync-dot,
    .quiz-progress-fill {
        animation: none !important;
        transition: none !important;
    }
}

/* ═══ Level II case practice ═══
   Wide screens (1000px+): the case (vignette and exhibits) sits in a sticky, scrollable
   pane beside all of the case's questions. Narrower screens: the whole case sits above
   the questions (edge to edge on phones), with a floating arrow to jump between the two.
   Keep the 1000px breakpoint in sync with quiz.js. */

.app-container:has(.quiz-shell.is-case-layout) {
    max-width: 1440px;
}

/* body's overflow-x: hidden makes it a scroll container, and position: sticky never
   engages inside one. clip still cuts off sideways overflow without that, so the case
   pane can stick. The header keeps scrolling away, as it does on every other page. */
body:has(.quiz-shell.is-case-layout) {
    overflow-x: clip;
}

body:has(.quiz-shell.is-case-layout) .header {
    position: relative;
}

/* The header's row lines up with the wider page (1440px less the side padding). */
body:has(.quiz-shell.is-case-layout) .header-inner {
    max-width: 1392px;
}

/* The case page has its own floating arrow (case / questions) on narrow screens, and
   the back-to-top button would sit on top of it or of Next. */
body:has(.quiz-shell.is-case-layout) .back-to-top {
    display: none;
}

.quiz-shell.is-case-layout {
    width: 100%;
}

/* Room below the Back / Next buttons, so the floating back-to-top button never covers
   Next when the page is scrolled to the bottom. */
.quiz-shell:has(.quiz-actions, .qx-actions) {
    padding-bottom: 36px;
}

.qx-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.qx-question-pane {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-content: start;
}

/* Grid items and fieldsets otherwise grow to fit a wide table instead of letting it
   scroll inside its own box. */
.quiz-shell.is-case-layout > *,
.qx-stage > *,
.qx-question-pane > *,
.qx-choices {
    min-width: 0;
}

.qx-stage.is-standalone .qx-question-pane {
    width: min(100%, 920px);
    margin: 0 auto;
}

/* Content blocks */
.qx-p {
    margin: 0;
}

.qx-h {
    margin: 4px 0 0;
    color: var(--accent-purple);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.qx-list {
    margin: 0;
    padding-left: 1.45em;
    display: grid;
    gap: 7px;
}

.qx-list li {
    padding-left: 0.2em;
}

.qx-list li::marker {
    color: var(--text-muted);
    font-weight: 700;
}

.qx-case-body > * + *,
.qx-prompt > * + *,
.qx-explanation > * + *,
.qx-choice-note > * + * {
    margin-top: 0.85em;
}

.qx-case-body > .qx-table-block,
.qx-case-body > .qx-table-block + * {
    margin-top: 1.25em;
}

.qx-exhibit-link {
    -webkit-appearance: none;
    appearance: none;
    display: inline;
    margin: 0;
    padding: 0;
    color: var(--accent-blue);
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    touch-action: manipulation;
}

.qx-exhibit-link:hover {
    text-decoration-style: solid;
}

/* Tables */
.qx-table-block {
    width: fit-content;
    min-width: min(100%, 300px);
    max-width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-weight: 450;
}

.qx-table-block:has(.qx-table.is-stacked) {
    width: 100%;
}

.qx-table-caption {
    display: grid;
    gap: 3px;
    padding: 12px 16px 11px;
    background: color-mix(in srgb, var(--accent-blue) 5%, var(--bg-card));
    border-bottom: 1px solid var(--border-subtle);
}

.qx-exhibit-label {
    color: var(--accent-blue);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.qx-table-title {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.38;
}

.qx-table-units {
    color: var(--text-muted);
    font-weight: 650;
    white-space: nowrap;
}

.qx-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Edge shadows appear only while there is more table to scroll to. */
    background:
        linear-gradient(to right, var(--bg-card) 30%, transparent) 0 0 / 40px 100% no-repeat local,
        linear-gradient(to left, var(--bg-card) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), transparent) 0 0 / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), transparent) 100% 0 / 14px 100% no-repeat scroll;
}

.qx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.86rem;
    line-height: 1.42;
}

.qx-table th,
.qx-table td {
    padding: 9px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 450;
    text-align: left;
    vertical-align: top;
}

.qx-table tbody tr:last-child > * {
    border-bottom: 0;
}

.qx-table thead th,
.qx-table .qx-row-head > * {
    color: var(--text-secondary);
    background: var(--bg-surface);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.32;
    vertical-align: bottom;
}

.qx-table thead tr:last-child > th {
    border-bottom-color: color-mix(in srgb, var(--text-muted) 38%, transparent);
}

/* Column headings may wrap, even over number columns, and keep normal figures (tabular
   figures widen the hyphen in a heading like "Grant-Date"). */
.qx-table thead th.qx-c-n,
.qx-table .qx-row-head > .qx-c-n {
    white-space: normal;
    font-variant-numeric: normal;
}

.qx-table .qx-c-l {
    min-width: 8.5em;
    font-weight: 650;
}

.qx-table thead .qx-c-l,
.qx-table .qx-row-head > .qx-c-l {
    font-weight: 800;
}

.qx-table .qx-c-n {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.qx-table .qx-c-c {
    text-align: center;
}

.qx-table .qx-c-t {
    min-width: 10em;
}

.qx-table th.is-span {
    text-align: center;
}

.qx-table th.qx-c-l.is-span,
.qx-table td.is-span {
    text-align: left;
}

.qx-table tr > .qx-indent {
    padding-left: 30px;
}

.qx-table .qx-row-sum > .qx-c-n {
    box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--text-primary) 55%, transparent);
}

.qx-table .qx-row-bold > * {
    font-weight: 800;
}

.qx-table .qx-row-gap > td {
    padding: 3px;
}

.qx-table sup {
    font-size: 0.7em;
    line-height: 0;
}

@media (hover: hover) {
    .qx-table:not(.is-stacked) tbody tr:not(.qx-row-head):not(.qx-row-gap):hover > * {
        background: color-mix(in srgb, var(--accent-blue) 5%, transparent);
    }
}

.qx-table-notes {
    padding: 10px 16px 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
    font-size: 0.78rem;
    line-height: 1.55;
}

.qx-table-notes p + p {
    margin-top: 4px;
}

.qx-table-block[data-qx-exhibit-target] {
    scroll-margin-top: 12px;
}

.qx-table-block.is-flash {
    animation: qxFlash 1.6s ease;
}

@keyframes qxFlash {
    0%, 100% { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
    18% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 42%, transparent); }
}

/* Case pane: beside the questions on wide screens, above them on narrow ones */
.qx-case-pane {
    --qx-sticky-top: calc(16px + env(safe-area-inset-top));
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    scroll-margin-top: 12px;
}

.qx-case-pane:focus {
    outline: none;
}

.qx-case-head {
    display: grid;
    gap: 12px;
    padding: 18px 22px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.qx-case-heading {
    min-width: 0;
}

.qx-case-kicker {
    color: var(--accent-purple);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
}

.qx-case-title {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 1.12rem;
    line-height: 1.28;
}

.qx-case-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
}

.qx-case-body {
    padding: 20px 22px 26px;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.72;
}

/* Questions-in-case stepper and exhibit chips */
.qx-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qx-step {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1.5px solid var(--border-active);
    border-radius: 50%;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.qx-step:hover {
    transform: translateY(-1px);
}

.qx-step.is-picked {
    color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-card));
    border-color: var(--accent-blue);
}

.qx-step.is-correct {
    color: #fff;
    background: var(--accent-emerald);
    border-color: var(--accent-emerald);
}

.qx-step.is-wrong {
    color: #fff;
    background: var(--accent-rose);
    border-color: var(--accent-rose);
}

.qx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qx-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.qx-chip svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--accent-blue);
}

.qx-chip:hover {
    color: var(--accent-blue);
    border-color: var(--border-active);
}

/* Question, choices and per-choice explanations */
.qx-prompt .qx-table-block {
    font-size: 1rem;
}

.qx-choices {
    gap: 10px;
}

.qx-choice {
    min-width: 0;
    display: grid;
}

.qx-choices .quiz-choice.is-answered {
    pointer-events: none;
}

.qx-choice.has-note > .quiz-choice {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.qx-choice-note {
    min-width: 0;
    padding: 11px 16px 13px 54px;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 0.86rem;
    line-height: 1.62;
}

.qx-choice.is-correct > .qx-choice-note {
    background: color-mix(in srgb, var(--accent-emerald) 5%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-emerald) 58%, transparent);
}

.qx-choice.is-wrong > .qx-choice-note {
    background: color-mix(in srgb, var(--accent-rose) 4%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-rose) 58%, transparent);
}

.qx-explanation {
    color: var(--text-secondary);
}

.qx-original {
    margin-top: 12px;
    padding-top: 10px;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.76rem;
    font-weight: 650;
}

/* All of a case's questions, one card each, checked together */
.qx-list-head {
    margin: 0;
}

.qx-question-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.qx-question-list > * {
    min-width: 0;
}

.qx-question-card {
    padding: clamp(18px, 3.4vw, 28px);
    scroll-margin-top: 16px;
}

.qx-question-card.is-flash {
    animation: qxCardFlash 1.6s ease;
}

@keyframes qxCardFlash {
    0%, 100% { box-shadow: var(--shadow-card); }
    18% { box-shadow: var(--shadow-card), 0 0 0 4px color-mix(in srgb, var(--accent-blue) 42%, transparent); }
}

.qx-q-head {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.qx-q-label {
    margin: 0;
    color: var(--accent-blue);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
}

.qx-q-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.qx-q-state {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.qx-q-state.is-correct {
    color: var(--accent-emerald);
    background: color-mix(in srgb, var(--accent-emerald) 10%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-emerald) 34%, transparent);
}

.qx-q-state.is-wrong {
    color: var(--accent-rose);
    background: color-mix(in srgb, var(--accent-rose) 9%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-rose) 34%, transparent);
}

/* Narrow screens: jumps between the case above and the questions below. */
.qx-jump {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right));
    bottom: calc(20px + var(--tab-bar-h, 0px) + env(safe-area-inset-bottom));
    z-index: 99;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--on-primary);
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.qx-jump svg {
    width: 22px;
    height: 22px;
    transition: transform 0.22s ease;
}

.qx-jump[data-dir="up"] svg {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .qx-jump:hover {
        transform: translateY(-2px);
    }
}

/* A pick waiting for Check answers */
.qx-choices .quiz-choice:not(.is-answered):has(.quiz-choice-input:checked) {
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-card));
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 0 1px var(--accent-blue);
}

.qx-result {
    display: grid;
    gap: 3px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent-blue) 24%, transparent);
    border-radius: var(--radius-lg);
    scroll-margin-top: 16px;
}

.qx-result.is-perfect {
    background: color-mix(in srgb, var(--accent-emerald) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--accent-emerald) 30%, transparent);
}

.qx-result:focus {
    outline: none;
}

.qx-result-score {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 850;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.qx-result-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* Back, the answered count and Check answers (Next once checked) */
.qx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}

.qx-actions-note {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.qx-chip:focus-visible,
.qx-jump:focus-visible,
.qx-step:focus-visible,
.qx-exhibit-link:focus-visible,
.qx-table-scroll:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
}

@media (min-width: 1000px) {
    .is-case-layout .quiz-status-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "row stats" "track stats";
        align-items: center;
        column-gap: 24px;
        padding: 14px 18px;
    }

    .is-case-layout .quiz-status-row {
        grid-area: row;
        margin-bottom: 9px;
    }

    .is-case-layout .quiz-progress-track {
        grid-area: track;
    }

    .is-case-layout .quiz-stats {
        grid-area: stats;
        grid-template-columns: repeat(3, minmax(88px, auto));
        margin-top: 0;
    }

    .qx-stage.has-case {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
        gap: 22px;
    }

    .qx-case-pane {
        position: sticky;
        top: var(--qx-sticky-top);
        /* Leaves room for the page's bottom padding, so the pane's top stays on
           screen when the page is scrolled all the way down. */
        max-height: calc(100vh - var(--qx-sticky-top) - 64px);
        max-height: calc(100dvh - var(--qx-sticky-top) - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--border-active) transparent;
    }

    .qx-case-head {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .qx-jump {
        display: none;
    }
}

@media (min-width: 1280px) {
    .qx-stage.has-case {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 26px;
    }

    .qx-case-body {
        padding: 22px 26px 28px;
        font-size: 0.97rem;
    }

    .qx-case-head {
        padding: 20px 26px 15px;
    }
}

/* The question column beside the case is narrow at these widths, so its card pads less. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
    .qx-stage.has-case .qx-question-card {
        padding: 22px;
    }
}

/* Phones: the case runs edge to edge, so its text and exhibits get the whole width. */
@media (max-width: 600px) {
    .qx-case-pane {
        margin-right: calc(-12px - env(safe-area-inset-right));
        margin-left: calc(-12px - env(safe-area-inset-left));
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .qx-case-head {
        padding: 16px calc(16px + env(safe-area-inset-right)) 13px calc(16px + env(safe-area-inset-left));
        border-radius: 0;
    }

    .qx-case-body {
        padding: 18px calc(16px + env(safe-area-inset-right)) 22px calc(16px + env(safe-area-inset-left));
    }
}

@media (max-width: 720px) {
    .qx-case-body {
        font-size: 0.93rem;
        line-height: 1.68;
    }

    .qx-case-title {
        font-size: 1.04rem;
    }

    .qx-question-list {
        gap: 14px;
    }

    .qx-result {
        padding: 14px 16px;
    }
}

@media (max-width: 520px) {
    .qx-actions {
        padding: 12px;
    }

    .qx-actions-note {
        order: -1;
        flex-basis: 100%;
        text-align: center;
    }

    .qx-actions > .quiz-btn {
        flex: 1 1 0;
    }

    .qx-actions > .quiz-btn-primary {
        flex-grow: 2;
    }
}

/* Tables fit the room they actually get (a phone screen, the column beside the case,
   an answer's explanation), not the screen width, so each block that holds tables is
   a size container. */
.qx-case-body,
.qx-prompt,
.qx-explanation,
.qx-choice-note {
    container-type: inline-size;
}

.qx-question-card {
    container: qx-card / inline-size;
}

/* In a narrow question card, explanations under answers drop the indent that lines
   them up with the answer text. */
@container qx-card (max-width: 539.98px) {
    .qx-choice-note {
        padding: 10px 13px 12px 14px;
    }
}

@container (max-width: 479.98px) {
    .qx-table {
        font-size: 0.8rem;
    }

    .qx-table th,
    .qx-table td {
        padding: 8px 9px;
    }

    .qx-table tr > :first-child {
        padding-left: 12px;
    }

    .qx-table tr > :last-child {
        padding-right: 12px;
    }

    .qx-table tr > .qx-indent {
        padding-left: 24px;
    }

    .qx-table .qx-c-l {
        min-width: 6.5em;
    }

    .qx-table .qx-c-t {
        min-width: 6em;
    }

    .qx-table-caption {
        padding: 10px 12px 9px;
    }

    .qx-table-title {
        font-size: 0.86rem;
    }

    .qx-table-notes {
        padding: 9px 12px 11px;
    }
}

/* Wide tables (and three-column ones under an answer, which has less room) get tighter
   type and padding so they fit without sideways scrolling. */
@container (max-width: 399.98px) {
    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) {
        font-size: 0.76rem;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) :is(th, td) {
        padding-right: 7px;
        padding-left: 7px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > :first-child {
        padding-left: 11px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > :last-child {
        padding-right: 11px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > .qx-indent {
        padding-left: 20px;
    }
}

@container (max-width: 344.98px) {
    .qx-table .qx-c-l {
        min-width: 5.5em;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) {
        font-size: 0.72rem;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) :is(th, td) {
        padding-right: 6px;
        padding-left: 6px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > :first-child {
        padding-left: 9px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > :last-child {
        padding-right: 9px;
    }

    .qx-table:where(.qx-cols-4, .qx-cols-5, .qx-cols-6, .qx-choice-note .qx-cols-3) tr > .qx-indent {
        padding-left: 18px;
    }
}

/* Tables of running text become one card per row; each cell shows its column heading. */
@container (max-width: 559.98px) {
    .qx-table.is-stacked thead {
        display: none;
    }

    .qx-table.is-stacked,
    .qx-table.is-stacked tbody,
    .qx-table.is-stacked tr,
    .qx-table.is-stacked th,
    .qx-table.is-stacked td {
        display: block;
        width: 100%;
    }

    .qx-table.is-stacked tr {
        padding: 11px 13px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .qx-table.is-stacked tbody tr:last-child {
        border-bottom: 0;
    }

    .qx-table.is-stacked tr > th,
    .qx-table.is-stacked tr > td {
        min-width: 0;
        padding: 3px 0;
        border: 0;
        text-align: left;
    }

    .qx-table.is-stacked th[scope="row"] {
        padding-bottom: 5px;
        font-size: 0.88rem;
        font-weight: 800;
    }

    .qx-table.is-stacked td:empty {
        display: none;
    }

    .qx-table.is-stacked td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--text-muted);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qx-table-block.is-flash,
    .qx-question-card.is-flash,
    .qx-jump,
    .qx-jump svg,
    .qx-step {
        animation: none !important;
        transition: none !important;
    }
}

/* Phones: a tighter question card, so a whole question and its answers fit on screen. */
@media (max-width: 720px) {
    .quiz-shell {
        gap: 10px;
    }

    /* The quiz's own title, beside its buttons, stands in for the page head: one row
       instead of two. */
    body[data-page="quiz"]:has(.quiz-topbar) #sheetHead {
        display: none !important;
    }

    html:not(.quiz-focus-mode) .quiz-title-wrap {
        display: block;
    }

    html:not(.quiz-focus-mode) .quiz-topbar {
        justify-content: space-between;
        align-items: center;
    }

    .quiz-topbar-actions {
        gap: 6px;
    }

    .quiz-topbar .quiz-btn {
        min-height: 38px;
        min-width: 38px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    .quiz-status-card {
        padding: 10px 14px 12px;
        border-radius: 18px;
    }

    .quiz-status-row {
        margin-bottom: 8px;
        font-size: 0.78rem;
    }

    .quiz-stats {
        grid-template-columns: repeat(3, auto);
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
    }

    .quiz-stat {
        display: flex;
        align-items: baseline;
        gap: 5px;
        padding: 0;
        background: none;
    }

    .quiz-stat-value {
        font-size: 1rem;
    }

    .quiz-stat-label {
        margin-top: 0;
        font-size: 0.64rem;
    }

    .quiz-card {
        padding: 14px;
        border-radius: 20px;
    }

    .quiz-meta {
        flex-wrap: nowrap;
        overflow: hidden;
        gap: 5px;
        margin-bottom: 10px;
    }

    /* One line of pills; a long module name ends in an ellipsis instead of running off
       the card. */
    .quiz-pill {
        display: block;
        min-width: 0;
        min-height: 22px;
        padding: 3px 8px;
        overflow: hidden;
        font-size: 0.68rem;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .quiz-pill-topic {
        flex-shrink: 0;
    }

    .quiz-question-label {
        margin-bottom: 6px;
        font-size: 0.68rem;
    }

    .quiz-prompt {
        margin-bottom: 14px;
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .quiz-choices,
    .qx-choices {
        gap: 6px;
    }

    .quiz-choice {
        min-height: 44px;
        padding: 9px 11px;
        gap: 10px;
        border-radius: 12px;
    }

    .quiz-choice-marker {
        width: 24px;
        height: 24px;
    }

    .quiz-choice-content {
        font-size: 0.92rem;
        line-height: 1.42;
    }

    .quiz-feedback {
        margin-top: 12px;
        padding: 12px 13px;
    }

    .quiz-feedback-copy {
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .quiz-shell:has(.quiz-actions, .qx-actions) {
        padding-bottom: 12px;
    }

    /* Back / Next sit at the end of the question; the back-to-top button would cover Next. */
    body:has(.quiz-shell) .back-to-top {
        display: none;
    }
}