/* Quiz paper — the question sheet, the student's working and annotated marking.
 *
 * Loaded last on /app. It restyles the quiz player (#quizSection) and, while a
 * quiz is on screen (body.quiz-active without a tool opened over it), turns the
 * whole page into the paper: header, progress and workspace share one sheet
 * and one grid. Every id and class app.js reads keeps its meaning; the extra
 * structure (.qp-*) comes from static/quiz-annotations.js and is presentation
 * only.
 *
 * Selectors carry `:root body #mainContent #quizSection` because studio.css
 * styles the same cards through an :is() list whose specificity is two ids.
 */

@font-face {
    font-family: 'Source Serif 4';
    src: url('/static/fonts/source-serif-4-latin-roman.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Charcoal study workspace (ATARprepAI palette, Oct 2026): the quiz,
       marking, results and essay pages share the shell's charcoal. */
    --qp-paper: #111113;
    --qp-note: #222226;
    --qp-well: #18181b;
    --qp-rule: #2a2a30;
    --qp-rule-strong: #6b6b75;
    --qp-ink: #f5f5f7;
    --qp-ink-2: #b5b5bf;
    --qp-ink-3: #8e8e99;
    --qp-action: #5940d6;
    --qp-action-hover: #4932b8;
    --qp-action-ink: #ffffff;
    --qp-link: #b6a6ff;
    --qp-selected: #302747;
    --qp-selected-ink: #d8ceff;
    --qp-focus: #b6a6ff;
    --qp-on-fill: #111113;
    --qp-earned: #9ddbb5;
    --qp-earned-tint: #20372a;
    --qp-earned-row: #20372a;
    --qp-partial: #f0c779;
    --qp-partial-tint: #3b301d;
    --qp-missed: #f3aba3;
    --qp-missed-tint: #3e2625;
    --qp-missed-row: #3e2625;
    --qp-info: #a9c8ec;
    --qp-info-tint: #1e2a38;
    --qp-edge-shadow: rgba(0, 0, 0, .55);
    --qp-sheet-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9);
    /* The charcoal shell the paper sits in: navigation and tool menus. */
    --qp-shell: #18181b;
    --qp-shell-ink: #f5f5f7;
    --qp-shell-ink-2: #b5b5bf;
    --qp-shell-line: #38383f;
    --qp-shell-link: #b6a6ff;
    --qp-shell-raised: #222226;
    --qp-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --qp-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    --qp-mono: 'JetBrains Mono', ui-monospace, monospace;
    /* One grid for the header and the sheet: a margin column for numbers,
       then the reading column. */
    --qp-page: min(1180px, calc(100vw - 64px));
    --qp-margin: 152px;
    --qp-rail: 320px;
    --qp-nav-h: 64px;
}

/* ── One page while the quiz is on screen ───────────────────────────── */
html:not(.section-open) body:is(.quiz-active, .qp-results) { background: var(--qp-paper) !important; }
html:not(.section-open) body:is(.quiz-active, .qp-results)::before, html:not(.section-open) body:is(.quiz-active, .qp-results)::after { display: none !important; }
html:not(.section-open) body:is(.quiz-active, .qp-results) :is(#studyRail, #planBanner), body.quiz-active #quizBuddy, body.quiz-active .tutor-launcher, body.quiz-active #tutorLauncher { display: none !important; }

/* Closed drawers wait just off-screen; their shadows would shade the paper edge. */
html:not(.section-open) body:is(.quiz-active, .qp-results) #sideMenu[aria-hidden="true"], html:not(.section-open) body:is(.quiz-active, .qp-results) #tutorPanel:not(.tutor-open) { box-shadow: none !important; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app {
    background: var(--qp-shell) !important; border-bottom: 1px solid var(--qp-shell-line) !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-inner {
    max-width: var(--qp-page); width: var(--qp-page); margin: 0 auto; padding: 0; gap: 0;
    display: flex; align-items: center;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app :is(.nav-left-menu, .nav-usage, .nav-search, .nav-plan-chip, .nav-create,
    .nav-dash-btn, #navStreakPill, #navScorePill, .nav-brand-name) { display: none !important; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-brand { width: var(--qp-margin); flex: 0 0 var(--qp-margin); }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-logo-mark { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
.qp-course, .qp-bar { display: none; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-course {
    display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto;
    font: 500 .875rem/1.3 var(--qp-sans); color: var(--qp-shell-ink-2); white-space: nowrap; overflow: hidden;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-course b { color: var(--qp-shell-ink); font-weight: 650; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-course span { overflow: hidden; text-overflow: ellipsis; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-bar { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; margin-right: 20px; }
.qp-progress { display: flex; align-items: center; gap: 12px; }
/* Steps share a capped track: at 28px each, a 20-question quiz needed ~640px
   and squeezed the course label beside it down to "s ...". */
.qp-steps { display: flex; gap: 4px; width: min(360px, 22vw); }
.qp-step { flex: 1 1 0; min-width: 3px; max-width: 28px; height: 4px; border-radius: 2px; background: var(--qp-shell-line); }
.qp-step[data-done="true"] { background: var(--qp-shell-ink-2); }
.qp-step[data-current="true"] { background: var(--qp-shell-link); }
.qp-leave {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px;
    font: 600 .875rem/1 var(--qp-sans); color: var(--qp-shell-ink-2); text-decoration: underline;
    text-decoration-color: var(--qp-shell-line); text-underline-offset: 5px;
}
.qp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qp-leave:hover { color: var(--qp-shell-ink); text-decoration-color: currentColor; }
.qp-leave:focus-visible { outline: 2px solid var(--qp-shell-link); outline-offset: 3px; border-radius: 2px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #navTutorBtn {
    display: inline-flex !important; align-items: center; gap: 8px; width: auto; height: 40px; padding: 0 14px;
    border: 1px solid var(--qp-shell-line); border-radius: 999px; background: transparent; color: var(--qp-shell-ink);
    white-space: nowrap; flex: none;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #navTutorBtn::after { content: 'Ask Avi'; font: 600 .8125rem/1 var(--qp-sans); }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #navTutorBtn svg { width: 17px; height: 17px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger {
    position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start;
    width: auto; height: 40px; padding: 0 14px 0 38px; gap: 0;
    border: 1px solid var(--qp-shell-line); border-radius: 999px; background: transparent; color: var(--qp-shell-ink);
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger > div {
    position: absolute; left: 14px; width: 15px; height: 1.5px; margin: 0; border-radius: 1px; background: var(--qp-shell-ink) !important; transform: none !important;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger > div:nth-child(1) { top: 14px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger > div:nth-child(2) { top: 19px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger > div:nth-child(3) { top: 24px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger::after { content: 'Menu'; font: 600 .8125rem/1 var(--qp-sans); }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app :is(#navTutorBtn, #menuTrigger):hover { border-color: var(--qp-shell-ink-2); background: var(--qp-shell-raised); }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app :is(#navTutorBtn, #menuTrigger):focus-visible { outline: 2px solid var(--qp-shell-link); outline-offset: 2px; }
html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #navUserPill { display: none !important; }

@media (min-width: 761px) {
    html:not(.section-open) body:is(.quiz-active, .qp-results) .container#mainContent, body.rail-left.quiz-active .container#mainContent {
        max-width: var(--qp-page) !important; width: var(--qp-page); margin-left: auto !important; margin-right: auto !important;
        padding-left: 0 !important; padding-right: 0 !important;
    }
}
#mainContent:focus { outline: none; }

/* The in-page progress strip is folded into the header while quizzing. */
html:not(.section-open) body:is(.quiz-active, .qp-results) #mainContent #quizSection .progress-wrap { display: none !important; }
:root body #mainContent #quizSection { position: relative; color: var(--qp-ink); }
:root body #mainContent #quizSection[style*="block"] { display: flex !important; flex-direction: column; }
:root body #mainContent #quizSection > #questionsContainer { order: 1; }
:root body #mainContent #quizSection > #studyPlayerDiscardControls { order: 2; }
:root body #mainContent #quizSection > :is(#scoreCard, #recapPanel, #reviewPanel) { order: 3; }
:root body #mainContent #quizSection #studyPlayerDiscardControls {
    margin: 8px 0 48px var(--qp-margin); padding: 20px 0 0; border-top: 1px solid var(--qp-rule);
    max-width: 704px;
}
:root body #mainContent #quizSection #studyPlayerDiscardButton {
    background: none; border: 0; padding: 0; min-height: 40px;
    font: 500 .875rem/1 var(--qp-sans); color: var(--qp-ink-3); text-decoration: underline;
    text-decoration-color: var(--qp-rule-strong); text-underline-offset: 4px; cursor: pointer;
}
:root body #mainContent #quizSection #studyPlayerDiscardButton:hover { color: var(--qp-missed); }
:root body #mainContent #quizSection #studyPlayerDiscardButton:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; }
:root body #mainContent #quizSection #studyPlayerDiscardConfirm {
    max-width: 34em; margin-top: 12px; padding: 0; background: none; color: var(--qp-ink); border: 0;
}
:root body #mainContent #quizSection #studyPlayerDiscardConfirm p { margin: 0 0 10px; font: 400 .9375rem/1.55 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection #studyPlayerDiscardConfirm .study-session__change { margin-right: 20px; color: var(--qp-ink); }
:root body #mainContent #quizSection #studyPlayerDiscardConfirm .study-session__change:last-child { color: var(--qp-missed); }
:root body #mainContent #quizSection .quiz-generation-notice:not(#studyPlayerDiscardConfirm) {
    margin: 0 0 16px var(--qp-margin); background: var(--qp-note); color: var(--qp-ink); border: 0; border-radius: 6px;
    padding: 12px 16px; font: 500 .9375rem/1.5 var(--qp-sans);
}

/* ── The sheet ──────────────────────────────────────────────────────── */
:root body #mainContent #quizSection .question-card {
    position: relative; margin: 0; padding: 48px 0 40px var(--qp-margin);
    min-height: calc(100vh - var(--qp-nav-h) - 120px);
    background: var(--qp-paper); color: var(--qp-ink); border: 0; border-radius: 0; box-shadow: none;
    font-family: var(--qp-sans); animation: none;
}
html:not(.section-open) body:is(.quiz-active, .qp-results) #mainContent #quizSection .question-card { background: transparent; }
:root body #mainContent #quizSection .question-card::before, :root body #mainContent #quizSection .question-card::after { display: none; }
:root body #mainContent #quizSection .question-card.q-enter { animation: qp-turn 180ms var(--ease-out); }
@keyframes qp-turn { from { opacity: 0; transform: translateY(var(--motion-shift)); } to { opacity: 1; transform: none; } }

:root body #mainContent #quizSection .qp-num {
    position: absolute; left: 0; top: 44px; width: calc(var(--qp-margin) - 40px);
    display: flex; flex-direction: column; gap: 8px; font-family: var(--qp-serif); color: var(--qp-ink);
}
:root body #mainContent #quizSection .qp-num span { font-size: 3.25rem; line-height: .9; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
:root body #mainContent #quizSection .qp-num small { font: 500 .75rem/1 var(--qp-mono); letter-spacing: .06em; color: var(--qp-ink-3); }

:root body #mainContent #quizSection .question-card .timer-row { display: none !important; }
:root body #mainContent #quizSection .question-card > div:has(> .question-num) {
    gap: 0 !important; margin-bottom: 16px !important; align-items: baseline !important;
    font: 500 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3);
}
:root body #mainContent #quizSection .question-card .question-num { display: none; }
:root body #mainContent #quizSection .question-card :is(.diff-badge, .qtype-badge, .marks-badge) { all: unset; font: inherit; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .question-card :is(.qtype-badge, .marks-badge)::before { content: '·'; content: '·' / ''; margin: 0 .7em; color: var(--qp-rule-strong); }
:root body #mainContent #quizSection .question-card .qtype-badge svg { display: none; }
:root body #mainContent #quizSection .question-card .marks-badge { color: var(--qp-ink); font-weight: 700; }
/* The syllabus point gets its own line above the meta: the proof that the
   question is on the course. A dot point is a sentence, so it is set in
   sentence case and clamped to two lines (the full text is in the title). */
:root body #mainContent #quizSection .question-card .syllabus-badge {
    all: unset; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; flex: 0 0 100%; margin-bottom: 6px;
    font: 500 .875rem/1.45 var(--qp-sans, inherit); letter-spacing: 0; text-transform: none; color: var(--qp-ink-2, var(--qp-ink));
}
:root body #mainContent #quizSection .question-card .syllabus-label {
    font: 500 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3); margin-right: .5em;
}

:root body #mainContent #quizSection .question-card .question-text {
    max-width: 28em; margin: 0 0 28px;
    font: 450 1.875rem/1.32 var(--qp-serif); letter-spacing: -.012em; color: var(--qp-ink);
    font-optical-sizing: auto; text-wrap: pretty;
}
:root body #mainContent #quizSection .question-card[data-stem="medium"] .question-text { font-size: 1.625rem; line-height: 1.38; }
:root body #mainContent #quizSection .question-card[data-stem="long"] .question-text { font-size: 1.375rem; line-height: 1.5; font-weight: 420; max-width: 38em; }
:root body #mainContent #quizSection .question-card .question-text .katex { font-size: 1.04em; }

/* Maths scrolls inside its own frame, never the page; edge shadows appear
   only while part of a formula is off-screen. */
:root body #mainContent #quizSection .question-card :is(.question-formula, .fx-strip) {
    max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 0 28px; padding: 16px 20px; border: 0; border-radius: 4px; color: var(--qp-ink); text-align: left;
    background:
        linear-gradient(90deg, var(--qp-well) 30%, transparent) left / 32px 100% no-repeat local,
        linear-gradient(270deg, var(--qp-well) 30%, transparent) right / 32px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--qp-edge-shadow), transparent) left / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--qp-edge-shadow), transparent) right / 12px 100% no-repeat scroll,
        var(--qp-well);
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
:root body #mainContent #quizSection .question-card .question-formula .katex-display { margin: 0; text-align: left; }
:root body #mainContent #quizSection .question-card .question-formula .katex-display > .katex { text-align: left; }
:root body #mainContent #quizSection .question-card .fx-line { font-family: var(--qp-mono); color: var(--qp-ink); }
:root body #mainContent #quizSection .question-card .question-chart {
    max-width: 640px; margin: 0 0 32px; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; overflow: visible;
}
:root body #mainContent #quizSection .question-card .chart-label {
    font: 500 .75rem/1 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3);
    background: none; padding: 0; margin: 0 0 10px;
}
/* A source the question is answered from: read before the stem, as in the exam. */
:root body #mainContent #quizSection .question-card .question-source { max-width: 44rem; margin: 0 0 20px; padding: 16px 18px;
    border-left: 3px solid var(--qp-rule-strong); border-radius: 0 8px 8px 0; background: var(--qp-well); }
:root body #mainContent #quizSection .question-card .question-source-label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
    font: 600 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .question-card .question-source-kind { padding: 2px 6px; border: 1px solid var(--qp-rule-strong);
    border-radius: 4px; letter-spacing: .04em; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .question-card .question-source-text { margin: 0; font: 400 1.0625rem/1.6 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .question-card .question-source-credit { margin: 10px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) > svg { width: 100%; height: auto; background: transparent !important; }
/* Charts keep the night palette the app draws on dark; series drawn in the
   print colours are lightened so they read on charcoal. */
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#1d4ed8"] { stroke: #7ea6ff; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#1d4ed8"] { fill: #7ea6ff; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#dc2626"] { stroke: #ff8a80; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#dc2626"] { fill: #ff8a80; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#16a34a"] { stroke: #5fd38f; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#16a34a"] { fill: #5fd38f; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#d97706"] { stroke: #f5b94e; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#d97706"] { fill: #f5b94e; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#7c3aed"] { stroke: #b69cff; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#7c3aed"] { fill: #b69cff; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [stroke="#0891b2"] { stroke: #4fd0ea; }
:root body #mainContent #quizSection .question-card :is(.question-chart, .hotspot-chart-wrap) svg [fill="#0891b2"] { fill: #4fd0ea; }
:root body #mainContent #quizSection .question-card .chart-label svg { width: 11px; height: 11px; }
:root body #mainContent #quizSection .question-card .chart-accuracy-note { font: 400 .8125rem/1.5 var(--qp-sans); color: var(--qp-ink-3); margin-top: 8px; padding: 0 !important; border: 0 !important; background: none !important; }

/* ── Multiple choice: an open list; the whole row is the control ────── */
:root body #mainContent #quizSection .qp-choose { margin: -12px 0 14px; font: 500 .875rem/1.5 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-keys { color: var(--qp-ink-3); }
@media (hover: none) { :root body #mainContent #quizSection .qp-keys { display: none; } }
:root body #mainContent #quizSection .question-card .options-list { display: block; max-width: 44rem; margin: 0 0 18px; border-top: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection .question-card .option {
    position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; align-content: center; column-gap: 18px;
    min-height: 64px; margin: 0; padding: 14px 16px 14px 10px;
    background: none; border: 0; border-bottom: 1px solid var(--qp-rule); border-radius: 0; box-shadow: none; row-gap: 0;
    color: var(--qp-ink); cursor: pointer; transform: none; animation: none;
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-press) var(--ease-out);
}
:root body #mainContent #quizSection .question-card .opt-letter {
    grid-row: 1 / span 2; align-self: center;
    position: relative; display: grid; place-items: center; width: 34px; height: 34px;
    border: 1.5px solid var(--qp-ink-3); border-radius: 50%; background: transparent; box-shadow: none; transform: none !important;
    font: 600 .875rem/1 var(--qp-mono); color: var(--qp-ink);
    transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
:root body #mainContent #quizSection .question-card .opt-letter .kbd-hint { display: none; }
/* Without a verdict line there is one row: letter and text share its centre. */
:root body #mainContent #quizSection .question-card .option:not(.correct, .wrong) .opt-letter { grid-row: 1; }
:root body #mainContent #quizSection .question-card .opt-text { grid-column: 2; font: 500 1.0625rem/1.5 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .question-card .opt-text .katex { font-size: 1.22em; }
/* Choosing: the row lightens and its letter fills, so the target is plain. */
:root body #mainContent #quizSection .question-card .option:not(.disabled):hover { background: var(--qp-well); }
:root body #mainContent #quizSection .question-card .option:not(.disabled):hover .opt-letter { background: var(--qp-ink); border-color: var(--qp-ink); color: var(--qp-paper); }
:root body #mainContent #quizSection .question-card .option:not(.disabled):active { background: var(--qp-note); transform: scale(.985); }
:root body #mainContent #quizSection .question-card .option:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: -2px; background: var(--qp-well); }
:root body #mainContent #quizSection .question-card .option:focus-visible .opt-letter { border-color: var(--qp-focus); color: var(--qp-focus); }
/* Answered: every row is locked. The two rows that matter carry a symbol
   and a label under their own text; the rest step back. */
:root body #mainContent #quizSection .question-card .option.disabled { cursor: default; }
:root body #mainContent #quizSection .question-card .option.dimmed { opacity: 1; }
:root body #mainContent #quizSection .question-card .option.dimmed .opt-text { color: var(--qp-ink-3); }
:root body #mainContent #quizSection .question-card .option.dimmed .opt-letter { border-color: var(--qp-rule-strong); color: var(--qp-ink-3); }
:root body #mainContent #quizSection .question-card .option:is(.correct, .wrong) .opt-letter { color: var(--qp-on-fill); }
:root body #mainContent #quizSection .question-card .option.correct { background: var(--qp-earned-row); }
:root body #mainContent #quizSection .question-card .option.correct .opt-letter { background: var(--qp-earned); border-color: var(--qp-earned); }
:root body #mainContent #quizSection .question-card .option.wrong { background: var(--qp-missed-row); }
:root body #mainContent #quizSection .question-card .option.wrong .opt-letter { background: var(--qp-missed); border-color: var(--qp-missed); }
/* The chosen row takes its verdict at once. When it was wrong, the correct
   row follows 120ms later, so the eye moves from the choice to the answer. */
:root body #mainContent #quizSection .question-card .option.wrong { animation: qp-nudge 160ms var(--ease-out); }
:root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct,
:root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct .opt-letter { transition-delay: 120ms; }
:root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct::after { animation: qp-label-in var(--motion-fast) var(--ease-out) 120ms both; }
@keyframes qp-nudge { 0% { transform: translateX(0); } 33% { transform: translateX(-3px); } 66% { transform: translateX(2px); } 100% { transform: translateX(0); } }
@keyframes qp-label-in { from { opacity: 0; } }
:root body #mainContent #quizSection .question-card .option:is(.correct, .wrong)::after {
    margin-top: 6px;
    grid-column: 2; margin-top: 4px; font: 700 .6875rem/1.3 var(--qp-mono); letter-spacing: .05em; text-transform: uppercase;
}
/* The symbol is decoration for sighted readers; the option's own label and
   the quiz announcer already say which answer was right. */
:root body #mainContent #quizSection .question-card .option.correct::after { content: '✓  Correct answer'; content: '✓  Correct answer' / ''; color: var(--qp-earned); }
:root body #mainContent #quizSection .question-card .options-list:not(:has(.wrong)) .option.correct::after { content: '✓  Your answer · correct'; content: '✓  Your answer · correct' / ''; }
:root body #mainContent #quizSection .question-card .option.wrong::after { content: '✕  Your answer · incorrect'; content: '✕  Your answer · incorrect' / ''; color: var(--qp-missed); }
:root body #mainContent #quizSection .question-card .points-float, :root body #mainContent #quizSection .combo-badge, html:not(.section-open) body:is(.quiz-active, .qp-results) .points-float { display: none !important; }
/* The quiz buddy stays on the page but holds still: on the paper nothing
   loops except the marker's reading line. */
html:not(.section-open) body:is(.quiz-active, .qp-results) #quizBuddy :is(.qb-flip, .qb-ring, .qb-flame, .qb-light, .qb-arm-l, .qb-arm-r, .qb-head, .qb-antenna-g, .qb-antenna, .qb-eyes-normal, .qb-sheen) { animation: none; }

:root body #mainContent #quizSection .question-card .hint-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; margin: 0 0 8px;
    background: transparent; border: 1px solid var(--qp-rule); border-radius: 6px; box-shadow: none;
    font: 550 .875rem/1 var(--qp-sans); color: var(--qp-ink-2); cursor: pointer;
}
:root body #mainContent #quizSection .question-card .hint-btn:hover { border-color: var(--qp-ink-2); color: var(--qp-ink); background: var(--qp-well); }
:root body #mainContent #quizSection .question-card .hint-btn:disabled { color: var(--qp-ink-3); cursor: progress; }
:root body #mainContent #quizSection .question-card .hint-box {
    max-width: 44rem; margin: 4px 0 20px; padding: 14px 18px; background: var(--qp-note); color: var(--qp-ink);
    border: 0; border-radius: 6px; font: 400 1rem/1.6 var(--qp-sans);
}

/* The explanation after answering: a note in the same voice as written feedback. */
:root body #mainContent #quizSection .question-card .explanation-box {
    max-width: 44rem; margin: 4px 0 6px; padding: 16px 20px 18px;
    background: var(--qp-note); border: 0; border-radius: 6px; box-shadow: none;
    font: 400 1.0625rem/1.65 var(--qp-sans); color: var(--qp-ink);
}
:root body #mainContent #quizSection .question-card .explanation-box > strong:first-child {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
    font: 700 .8125rem/1.4 var(--qp-sans); letter-spacing: .01em; text-transform: none; color: var(--qp-earned);
}
:root body #mainContent #quizSection .question-card .explanation-box > strong:first-child .qp-icon { width: 14px; height: 14px; }
:root body #mainContent #quizSection .question-card .explanation-box.wrong-exp > strong:first-child { color: var(--qp-missed); }
/* The verdict lands first; the explanation follows it. */
:root body #mainContent #quizSection .question-card .explanation-box { animation: qp-reveal var(--motion-base) var(--ease-out) 160ms both; }
@keyframes qp-reveal { from { opacity: 0; transform: translateY(var(--motion-shift)); } to { opacity: 1; transform: none; } }
:root body #mainContent #quizSection .question-card .qp-exp-answer { color: var(--qp-ink); font-weight: 600; }
:root body #mainContent #quizSection .question-card .qp-exp-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; }
:root body #mainContent #quizSection .question-card .qp-exp-actions > :is(.explain-differently-btn, .tutor-inline-ask-btn) {
    order: 0; display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 14px;
    border: 1px solid var(--qp-rule-strong); border-radius: 999px; background: var(--qp-paper);
    font: 600 .875rem/1 var(--qp-sans); color: var(--qp-ink); text-decoration: none;
}
:root body #mainContent #quizSection .question-card .qp-exp-actions > :is(.explain-differently-btn, .tutor-inline-ask-btn):hover { border-color: var(--qp-ink-2); background: var(--qp-well); }
/* Avi's second explanation, wherever it opens: ink on paper, no accent bar. */
:root body #mainContent #quizSection .explain-alt-box { margin-top: 12px; padding: 14px 0 0; border: 0 !important; border-top: 1px solid var(--qp-rule-strong) !important; background: none !important; border-radius: 0; box-shadow: none !important; color: var(--qp-ink); }
:root body #mainContent #quizSection .explain-alt-box .explain-alt-label { color: var(--qp-info); font: 700 .6875rem/1.4 var(--qp-mono); letter-spacing: .06em; }
:root body #mainContent #quizSection .explain-alt-box :is(.avi-said, .avi-speech, .avi-speech p) { color: var(--qp-ink) !important; font: 400 1rem/1.6 var(--qp-sans); }
/* Under a multiple-choice answer the follow-ups are links, not a menu. */
:root body #mainContent #quizSection .question-card > .study-feedback-actions {
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 24px; max-width: 44rem; margin: 10px 0 0;
}
:root body #mainContent #quizSection .question-card > .study-feedback-actions > :is(.btn-grade, .study-session__change, .tutor-inline-ask-btn) {
    width: auto; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
    font: 600 .9375rem/1.2 var(--qp-sans); color: var(--qp-ink); text-decoration: underline;
    text-decoration-color: var(--qp-rule-strong); text-underline-offset: 5px;
}
:root body #mainContent #quizSection .question-card > .study-feedback-actions > :is(.btn-grade, .study-session__change, .tutor-inline-ask-btn)::after { content: none; }
:root body #mainContent #quizSection .question-card > .study-feedback-actions > .study-session__change:not([id]) { font-size: .8125rem; font-weight: 500; color: var(--qp-ink-3); }

/* ── Writing ────────────────────────────────────────────────────────── */
:root body #mainContent #quizSection .question-card .written-answer-wrap { display: block; margin: 8px 0 0; padding: 0; background: none; border: 0; }
:root body #mainContent #quizSection .question-card .study-response {
    position: relative; top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    max-width: 46em; padding: 0; margin: 0; background: none; border: 0; box-shadow: none;
}
:root body #mainContent #quizSection .question-card .study-response > .field-label {
    order: 0; flex: 1 0 100%; margin: 0;
    font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2);
}
:root body #mainContent #quizSection .question-card .study-response > textarea,
:root body #mainContent #quizSection .question-card .study-revision textarea {
    order: 1; flex: 1 0 100%; box-sizing: border-box; width: 100%;
    min-height: 16em; resize: vertical; margin: 0; padding: 16px 20px 20px 22px;
    background: var(--qp-well); color: var(--qp-ink); caret-color: var(--qp-action);
    border: 1px solid var(--qp-rule-strong); border-radius: 4px;
    box-shadow: none; font: 400 1.0625rem/1.75 var(--qp-sans);
    scroll-margin-bottom: 120px;
}
:root body #mainContent #quizSection .question-card .study-response > textarea.short-textarea { min-height: 8em; }
:root body #mainContent #quizSection .question-card .study-response > textarea::placeholder { color: var(--qp-ink-3); opacity: 1; }
:root body #mainContent #quizSection .question-card .study-response > textarea:focus,
:root body #mainContent #quizSection .question-card .study-revision textarea:focus {
    outline: none; border-color: var(--qp-action); box-shadow: 0 0 0 1px var(--qp-action);
}
:root body #mainContent #quizSection .question-card .study-response > textarea:disabled,
:root body #mainContent #quizSection .question-card .study-response > textarea[readonly] { color: var(--qp-ink); opacity: 1; -webkit-text-fill-color: var(--qp-ink); }
:root body #mainContent #quizSection .qp-writing-status {
    order: 2; flex: 1 0 100%; display: flex; justify-content: space-between; gap: 16px; margin-top: -4px;
    font: 500 .75rem/1.4 var(--qp-mono); color: var(--qp-ink-3);
}
:root body #mainContent #quizSection .qp-saved[data-state="unsaved"] { color: var(--qp-missed); }

:root body #mainContent #quizSection .question-card .btn-grade {
    order: 3; flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 26px; margin: 6px 0 0;
    background: var(--qp-action); color: var(--qp-action-ink); border: 0; border-radius: 4px; box-shadow: none;
    font: 650 .9375rem/1 var(--qp-sans); letter-spacing: .005em; transform: none; cursor: pointer;
}
/* The button rule above sets a display; a hidden button (the handwriting
   flow hides it while reading) must stay hidden. */
:root body #mainContent #quizSection .question-card .btn-grade[hidden] { display: none; }
:root body #mainContent #quizSection .question-card .btn-grade:hover:not(:disabled) { background: var(--qp-action-hover); }
:root body #mainContent #quizSection .question-card .btn-grade:focus-visible { outline: 2px solid var(--qp-ink); outline-offset: 3px; }
:root body #mainContent #quizSection .question-card .btn-grade:disabled { background: var(--qp-note); color: var(--qp-ink-2); cursor: progress; }
:root body #mainContent #quizSection .question-card :is(.study-session__change, .tutor-inline-ask-btn, .explain-differently-btn) {
    order: 4; min-height: 44px; padding: 0; margin: 6px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    font: 550 .9375rem/1.2 var(--qp-sans); color: var(--qp-ink-2); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--qp-rule-strong); text-underline-offset: 5px;
}
:root body #mainContent #quizSection .question-card :is(.study-session__change, .tutor-inline-ask-btn, .explain-differently-btn):hover { color: var(--qp-ink); text-decoration-color: currentColor; }
:root body #mainContent #quizSection .question-card .explain-differently-btn svg { display: none; }
:root body #mainContent #quizSection .question-card :is(.study-session__change, .tutor-inline-ask-btn, .explain-differently-btn, .hint-btn):focus-visible {
    outline: 2px solid var(--qp-focus); outline-offset: 4px; border-radius: 2px;
}

/* Marking in progress: a reader's ruler sweeps the answer field. It moves by
   transform only; the status sentence is real text (quiz-annotations.js), so
   a screen reader hears it. */
:root body #mainContent #quizSection .question-card .study-response:has(> .btn-grade:disabled:not([style*="none"]):not([hidden]))::before {
    content: ''; position: absolute; left: 0; right: 0; top: var(--qp-sweep-top, 0); height: var(--qp-sweep-h, 100%);
    border-bottom: 2px solid color-mix(in srgb, var(--qp-ink-2) 50%, transparent); pointer-events: none;
    transform: translateY(-100%);
    animation: qp-sweep-in 150ms var(--ease-out) both, qp-sweep 2.4s linear infinite;
}
:root body #mainContent #quizSection .question-card .qp-marking-status { order: 5; flex: 1 0 100%; margin: 0; font: 500 .875rem/1.5 var(--qp-sans); color: var(--qp-ink-2); }
/* Idle, the live region stays in the tree and takes no room. */
:root body #mainContent #quizSection .question-card .qp-marking-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes qp-sweep { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes qp-sweep-in { from { opacity: 0; } }

/* Once marked, the annotated copy replaces the field visually. */
:root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working .study-response > :is(textarea, .qp-writing-status, .field-label) { display: none; }
:root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working .study-response { max-width: none; display: block; }
/* Marked after waiting (quiz-annotations.js adds qp-just-marked once): the
   annotated working settles in, and the report follows it. */
:root body #mainContent #quizSection .question-card .written-answer-wrap.qp-just-marked .qp-working { animation: qp-settle var(--motion-slow) var(--ease-out) both; }
:root body #mainContent #quizSection .question-card .written-answer-wrap.qp-just-marked > .grade-result { animation: qp-settle var(--motion-slow) var(--ease-out) 80ms both; }
@keyframes qp-settle { from { opacity: 0; transform: translateY(var(--motion-shift)); } to { opacity: 1; transform: none; } }

/* ── Feedback: the marked answer, and a rail with the mark and next step ─ */
@media (min-width: 1000px) {
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working:not(:has(.study-revision)) {
        display: grid; grid-template-columns: minmax(0, 1fr) var(--qp-rail); column-gap: 56px; align-items: start;
    }
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working:not(:has(.study-revision)) > .grade-result {
        position: sticky; top: calc(var(--qp-nav-h) + 24px); margin-top: 0;
        max-height: calc(100vh - var(--qp-nav-h) - 48px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
    }
}

/* Below 1000px the verdict comes first: the report sits above the marked
   answer, and the mark-scheme rows that repeat the inline notes are left
   out, so the next step is within a screen of the answer. */
@media (max-width: 999.98px) {
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working:not(:has(.study-revision)) { display: flex; flex-direction: column; }
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working:not(:has(.study-revision)) > .grade-result {
        order: -1; margin: 0 0 28px; padding: 0 0 22px; border-bottom: 1px solid var(--qp-rule);
    }
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-has-working:not(:has(.study-revision)) > .grade-result > .examiner-section:has(> .examiner-criteria) { display: none; }
}

:root body #mainContent #quizSection .qp-working { width: 100%; margin: 0 0 8px; }
:root body #mainContent #quizSection .qp-working-label {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
    padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--qp-rule);
    font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2);
}
:root body #mainContent #quizSection .qp-working-mark { font: 400 1.375rem/1 var(--qp-serif); letter-spacing: -.01em; text-transform: none; color: var(--qp-ink-3); }
/* The report (or the revision payoff) already shows this mark in large type. */
:root body #mainContent #quizSection .qp-working[data-kind="live"] .qp-working-mark,
:root body #mainContent #quizSection .study-revision:has(> .qp-payoff) .qp-working-mark { display: none; }
:root body #mainContent #quizSection .qp-working-mark b { font-weight: 500; color: var(--qp-ink); }
:root body #mainContent #quizSection .qp-working-hint { flex: 1 0 100%; font: 400 .8125rem/1.5 var(--qp-sans); letter-spacing: 0; text-transform: none; color: var(--qp-ink-3); }

:root body #mainContent #quizSection .qp-annotated { max-width: 42em; }
:root body #mainContent #quizSection .qp-text {
    margin: 0; padding: 16px 0 4px; font: 400 1.0625rem/1.8 var(--qp-sans); color: var(--qp-ink);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
:root body #mainContent #quizSection .qp-notes { display: grid; gap: 8px; margin: 10px 0 8px; }

/* Marked passages: a quiet underline whose style, not only its colour,
   says earned (solid), partly earned (dashed) or not earned (dotted). */
:root body #mainContent #quizSection .qp-mark {
    color: inherit; background: none; padding: 0 0 1px; border-radius: 2px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;
    transition: background-color var(--motion-fast) var(--ease-out);
}
:root body #mainContent #quizSection .qp-mark[data-status="earned"] { text-decoration-color: color-mix(in srgb, var(--qp-earned) 70%, transparent); text-decoration-style: solid; }
:root body #mainContent #quizSection .qp-mark[data-status="partial"] { text-decoration-color: var(--qp-partial); text-decoration-style: dashed; }
:root body #mainContent #quizSection .qp-mark[data-status="missed"] { text-decoration-color: var(--qp-missed); text-decoration-style: dotted; text-decoration-thickness: 2px; }
:root body #mainContent #quizSection .qp-mark:is(.is-linked, .is-selected) { background: var(--qp-earned-tint); }
:root body #mainContent #quizSection .qp-mark[data-status="partial"]:is(.is-linked, .is-selected) { background: var(--qp-partial-tint); }
:root body #mainContent #quizSection .qp-mark[data-status="missed"]:is(.is-linked, .is-selected) { background: var(--qp-missed-tint); }
:root body #mainContent #quizSection .qp-mark:focus { outline: none; }
:root body #mainContent #quizSection .qp-mark:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 2px; }

/* The reference after a passage: symbol and number, a 44px target. */
:root body #mainContent #quizSection .qp-ref {
    position: relative; display: inline-flex; align-items: center; gap: 2px; margin: 0 2px 0 4px; padding: 1px 6px 1px 4px;
    border-radius: 999px; border: 1px solid currentColor; vertical-align: .15em;
    font: 700 .6875rem/1.2 var(--qp-mono); text-decoration: none; background: var(--qp-paper);
    transition: background-color var(--motion-fast) var(--ease-out);
}
:root body #mainContent #quizSection .qp-ref::before { content: ''; position: absolute; inset: -14px -7px; }
:root body #mainContent #quizSection .qp-ref[data-status="earned"] { color: var(--qp-earned); }
:root body #mainContent #quizSection .qp-ref[data-status="partial"] { color: var(--qp-partial); }
:root body #mainContent #quizSection .qp-ref[data-status="missed"] { color: var(--qp-missed); }
:root body #mainContent #quizSection .qp-ref:is(:hover, .is-linked) { background: var(--qp-well); }
:root body #mainContent #quizSection .qp-ref[data-status="earned"]:is(:hover, .is-linked) { background: var(--qp-earned-tint); }
:root body #mainContent #quizSection .qp-ref[data-status="partial"]:is(:hover, .is-linked) { background: var(--qp-partial-tint); }
:root body #mainContent #quizSection .qp-ref[data-status="missed"]:is(:hover, .is-linked) { background: var(--qp-missed-tint); }
:root body #mainContent #quizSection .qp-ref.is-selected { background: currentColor; }
:root body #mainContent #quizSection .qp-ref.is-selected > * { color: var(--qp-paper); }
:root body #mainContent #quizSection .qp-ref:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 2px; }
:root body #mainContent #quizSection .qp-icon { width: 11px; height: 11px; flex: 0 0 auto; }

:root body #mainContent #quizSection .qp-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 38px; height: 22px; padding: 0 7px;
    border-radius: 999px; border: 1px solid currentColor; font: 700 .6875rem/1 var(--qp-mono);
}
:root body #mainContent #quizSection .qp-badge[data-status="earned"] { color: var(--qp-earned); }
:root body #mainContent #quizSection .qp-badge[data-status="partial"] { color: var(--qp-partial); }
:root body #mainContent #quizSection .qp-badge[data-status="missed"] { color: var(--qp-missed); }

/* A note: a slip of paper under the passage it is about. */
:root body #mainContent #quizSection .qp-note { border-radius: 6px; background: var(--qp-note); scroll-margin: calc(var(--qp-nav-h) + 20px) 0 96px; transition: background-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
:root body #mainContent #quizSection .qp-note[data-status="earned"] { background: var(--qp-note); }
:root body #mainContent #quizSection .qp-note[data-status="earned"].is-linked { background: var(--qp-earned-tint); }
:root body #mainContent #quizSection .qp-note[data-status="partial"].is-linked { background: var(--qp-partial-tint); }
:root body #mainContent #quizSection .qp-note[data-status="missed"].is-linked { background: var(--qp-missed-tint); }
:root body #mainContent #quizSection .qp-note.is-selected { box-shadow: inset 0 0 0 2px var(--qp-ink); }
:root body #mainContent #quizSection .qp-note-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 48px; padding: 8px 14px; list-style: none; cursor: pointer; border-radius: 6px;
}
:root body #mainContent #quizSection .qp-note-head::-webkit-details-marker { display: none; }
:root body #mainContent #quizSection .qp-note-head::marker { content: ''; }
:root body #mainContent #quizSection .qp-note-head:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: -2px; }
:root body #mainContent #quizSection .qp-note-title { font: 650 .9375rem/1.35 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .qp-note-award { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
:root body #mainContent #quizSection .qp-note-status { font: 600 .6875rem/1 var(--qp-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .qp-note-award b { font: 700 .875rem/1 var(--qp-mono); }
:root body #mainContent #quizSection .qp-note[data-status="earned"] .qp-note-award b { color: var(--qp-earned); }
:root body #mainContent #quizSection .qp-note[data-status="partial"] .qp-note-award b { color: var(--qp-partial); }
:root body #mainContent #quizSection .qp-note[data-status="missed"] .qp-note-award b { color: var(--qp-missed); }
:root body #mainContent #quizSection .qp-note-award::after {
    content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid var(--qp-ink-3); border-bottom: 1.5px solid var(--qp-ink-3);
    transform: translateY(-2px) rotate(45deg); transition: transform var(--motion-fast) var(--ease-out);
}
:root body #mainContent #quizSection .qp-note[open] .qp-note-award::after { transform: translateY(1px) rotate(-135deg); }
:root body #mainContent #quizSection .qp-note-body { padding: 0 16px 14px 16px; }
:root body #mainContent #quizSection .qp-note-body > p { max-width: 40em; margin: 0 0 6px; font: 400 .9375rem/1.6 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-note-fix { color: var(--qp-ink) !important; font-weight: 500 !important; }
:root body #mainContent #quizSection .qp-note-fix-label {
    display: inline-block; margin-right: 8px; font: 700 .6875rem/1 var(--qp-mono); letter-spacing: .06em;
    text-transform: uppercase; color: var(--qp-info); vertical-align: .1em;
}
:root body #mainContent #quizSection :is(.qp-note-start, .qp-note-show) { color: var(--qp-link); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
:root body #mainContent #quizSection .qp-note-show { display: inline-flex; align-items: center; min-height: 32px; font: 600 .8125rem/1 var(--qp-sans); }
:root body #mainContent #quizSection :is(.qp-note-start, .qp-note-show):focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 2px; border-radius: 2px; }
:root body #mainContent #quizSection .qp-row--loose { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection .qp-loose-help { margin: 0 0 12px; max-width: 40em; font: 400 .9375rem/1.55 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-loose-label { margin: 0 0 4px; font: 700 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-replaced { display: none !important; }

/* The rail: mark, the first correction, what to do, then the mark scheme. */
:root body #mainContent #quizSection .grade-result {
    max-width: none; margin: 32px 0 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    color: var(--qp-ink); font-family: var(--qp-sans);
}
:root body #mainContent #quizSection .grade-result:focus { outline: none; }
:root body #mainContent #quizSection .examiner-report { display: flex !important; flex-direction: column; gap: 0; }
:root body #mainContent #quizSection .examiner-report > * { order: 2; min-width: 0; }
:root body #mainContent #quizSection .examiner-report > .mark-report-head { order: 0; }
:root body #mainContent #quizSection .examiner-report > :is(.examiner-update, .sm-compare) { order: 1; }
:root body #mainContent #quizSection .examiner-report > .examiner-priority { order: 1; }
:root body #mainContent #quizSection .examiner-report > .study-feedback-actions { order: 2; }
:root body #mainContent #quizSection .examiner-report > .examiner-section { order: 4; }
:root body #mainContent #quizSection .examiner-report > :is(.explain-differently-btn, .explain-alt-box) { order: 5; }
:root body #mainContent #quizSection .examiner-report > .examiner-source { order: 6; }
:root body #mainContent #quizSection .examiner-report > .study-revision { order: 7; }
/* Stacked under the answer (revision open, or a narrow window), the report
   keeps a reading measure; only the revision itself uses the full width. */
:root body #mainContent #quizSection .written-answer-wrap:has(.study-revision) > .grade-result > :not(.study-revision),
:root body #mainContent #quizSection .study-revision > .examiner-report > * { max-width: 40rem; }

:root body #mainContent #quizSection .examiner-report > .mark-report-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    margin: 0 0 18px; padding: 0 0 16px; background: none; border: 0; border-bottom: 2px solid var(--qp-ink);
}
:root body #mainContent #quizSection .mark-report-label { display: block; margin-bottom: 6px; font: 600 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .mark-report-score {
    display: block; font: 400 3.25rem/.95 var(--qp-serif); letter-spacing: -.03em; color: var(--qp-ink);
    font-variant-numeric: lining-nums; background: none; -webkit-text-fill-color: currentColor;
}
:root body #mainContent #quizSection .mark-report-score small { font-size: .45em; letter-spacing: 0; color: var(--qp-ink-3); margin-left: 2px; }
:root body #mainContent #quizSection .examiner-verdict {
    display: inline-flex; padding: 0; border: 0; background: none;
    font: 700 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase;
}
:root body #mainContent #quizSection .examiner-verdict[data-status="earned"] { color: var(--qp-earned); }
:root body #mainContent #quizSection .examiner-verdict[data-status="partial"] { color: var(--qp-partial); }
:root body #mainContent #quizSection .examiner-verdict[data-status="missed"] { color: var(--qp-missed); }

:root body #mainContent #quizSection .grade-result .examiner-priority { margin: 0 0 18px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
:root body #mainContent #quizSection .grade-result .examiner-priority:focus { outline: none; }
:root body #mainContent #quizSection .grade-result .examiner-priority h4 { margin: 0 0 6px; font: 700 .6875rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .grade-result .examiner-priority p { margin: 0; font: 450 1.125rem/1.5 var(--qp-serif); letter-spacing: -.005em; color: var(--qp-ink); text-wrap: pretty; }
:root body #mainContent #quizSection .grade-result .examiner-full { order: 1; font: 450 1.1875rem/1.45 var(--qp-serif); color: var(--qp-earned); margin: 0 0 18px; }

/* After partial or no credit, Improve is the one filled action; the rest
   are a short list of quieter choices. */
:root body #mainContent #quizSection .study-feedback-actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0 0 22px; padding: 0; background: none; border: 0;
}
:root body #mainContent #quizSection .study-feedback-actions > .btn-grade { width: 100%; margin: 0 0 10px; }
:root body #mainContent #quizSection .study-feedback-actions > :is(.study-session__change, .tutor-inline-ask-btn) {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 0;
    padding: 0; border-top: 1px solid var(--qp-rule); text-align: left; text-decoration: none; color: var(--qp-ink);
}
/* Drawn, not typed: generated text would join the button's accessible name. */
:root body #mainContent #quizSection .study-feedback-actions > :is(.study-session__change, .tutor-inline-ask-btn)::after {
    content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-right: 4px;
    border-top: 1.5px solid var(--qp-ink-3); border-right: 1.5px solid var(--qp-ink-3); transform: rotate(45deg);
}
:root body #mainContent #quizSection .study-feedback-actions > :is(.study-session__change, .tutor-inline-ask-btn):hover { color: var(--qp-link); }
:root body #mainContent #quizSection .study-feedback-actions > .btn-grade + :is(.study-session__change, .tutor-inline-ask-btn) { border-top: 0; }
/* Flagging the feedback matters, but it is not a next step. */
:root body #mainContent #quizSection .study-feedback-actions > .study-session__change:not([id]) {
    order: 9; justify-content: flex-start; min-height: 40px; margin-top: 6px; border-top: 0;
    font-size: .8125rem; color: var(--qp-ink-3); text-decoration: underline; text-underline-offset: 4px;
}
:root body #mainContent #quizSection .study-feedback-actions > .study-session__change:not([id])::after { content: none; }
:root body #mainContent #quizSection .grade-result > .explain-differently-btn { align-self: flex-start; margin: 0 0 6px; }

:root body #mainContent #quizSection .grade-result.marking-recovery .examiner-source { color: var(--qp-ink-2); }
:root body #mainContent #quizSection .grade-result .examiner-source, :root body #mainContent #quizSection .grade-result .examiner-update {
    margin: 14px 0 0; font: 400 .8125rem/1.55 var(--qp-sans); color: var(--qp-ink-3); max-width: 60ch;
}

/* The mark scheme: one line per point, each a way to its note. */
:root body #mainContent #quizSection .examiner-report .examiner-section { margin: 0 0 16px; }
:root body #mainContent #quizSection .examiner-report.qp-has-working > .examiner-section:has(.examiner-improvements) { display: none; }
:root body #mainContent #quizSection .examiner-report .examiner-section-title { margin: 0 0 6px; font: 600 .6875rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .examiner-report .examiner-criteria { list-style: none; margin: 0; padding: 0; border: 0; border-top: 1px solid var(--qp-rule); border-radius: 0; background: none; box-shadow: none; }
:root body #mainContent #quizSection .examiner-report .examiner-criterion {
    position: relative; padding: 10px 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--qp-rule);
    border-radius: 0; box-shadow: none; color: var(--qp-ink);
}
:root body #mainContent #quizSection .examiner-report .examiner-criterion::before { display: none; }
:root body #mainContent #quizSection .examiner-report .examiner-criterion-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
:root body #mainContent #quizSection .examiner-report .examiner-criterion-head > .examiner-math { flex: 1; font: 550 .875rem/1.4 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .examiner-report .examiner-award { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
:root body #mainContent #quizSection .examiner-report .examiner-status { display: none; }
:root body #mainContent #quizSection .examiner-report .examiner-fraction { font: 700 .8125rem/1 var(--qp-mono); color: var(--qp-ink); }
:root body #mainContent #quizSection .examiner-report .examiner-criterion[data-status="partial"] .examiner-fraction { color: var(--qp-partial); }
:root body #mainContent #quizSection .examiner-report .examiner-criterion[data-status="missed"] .examiner-fraction { color: var(--qp-missed); }
:root body #mainContent #quizSection .examiner-report .examiner-criterion[data-status="earned"] .examiner-fraction { color: var(--qp-earned); }
:root body #mainContent #quizSection .examiner-report:not(.qp-has-working) .examiner-status { display: inline-flex; font: 600 .6875rem/1 var(--qp-mono); text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .examiner-report.qp-has-working .examiner-section :is(.examiner-evidence, .examiner-criterion > p.examiner-math) { display: none; }
:root body #mainContent #quizSection .examiner-report .examiner-evidence { margin: 8px 0 0; padding: 0 0 0 14px; border-left: 1px solid var(--qp-rule-strong); background: none; font-style: normal; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .examiner-report .examiner-evidence-label { display: block; font: 600 .6875rem/1.4 var(--qp-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection .qp-ledger-link { position: absolute; inset: 0; border-radius: 4px; }
:root body #mainContent #quizSection .qp-ledger-link:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 0; }
:root body #mainContent #quizSection .examiner-criterion { transition: background-color var(--motion-fast) var(--ease-out); }
:root body #mainContent #quizSection .examiner-criterion[data-status="earned"].is-linked { background: var(--qp-earned-tint); }
:root body #mainContent #quizSection .examiner-criterion[data-status="partial"].is-linked { background: var(--qp-partial-tint); }
:root body #mainContent #quizSection .examiner-criterion[data-status="missed"].is-linked { background: var(--qp-missed-tint); }
:root body #mainContent #quizSection .examiner-criterion.is-selected { background: var(--qp-selected); }
:root body #mainContent #quizSection .examiner-criterion.is-selected .examiner-criterion-head > .examiner-math { color: var(--qp-selected-ink); }
:root body #mainContent #quizSection .examiner-criterion.is-selected .examiner-criterion-head > .examiner-math { text-decoration: underline; text-underline-offset: 3px; }

/* Failure: the answer stays; the message and the retry sit under it. */
:root body #mainContent #quizSection .grade-result.marking-recovery {
    display: block; max-width: 46em; margin-top: 20px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--qp-missed) 45%, transparent); border-radius: 6px;
    background: var(--qp-missed-tint); color: var(--qp-ink);
}
:root body #mainContent #quizSection .grade-result.marking-recovery > p:first-child { margin: 0 0 6px; font: 650 1rem/1.5 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .grade-result.marking-recovery { animation: qp-recover 160ms var(--ease-out); }
@keyframes qp-recover { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* While the failure message is on the paper, the toast would cover the last
   lines of the answer. It is hidden from sight only: it stays in the
   accessibility tree, so its announcement is not lost. */
html:not(.section-open) body:is(.quiz-active, .qp-results):has(.grade-result.marking-recovery) #appToast {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:root body #mainContent #quizSection .grade-result.marking-recovery .study-session__change { margin-top: 6px; }

/* Self-marking: the reference answer is printed, not written. */
:root body #mainContent #quizSection .grade-result.self-mark { max-width: 46em; }
:root body #mainContent #quizSection .grade-result .sm-label { font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); margin: 0 0 8px; }
:root body #mainContent #quizSection .grade-result .sm-label::after { content: ' · reference, not your work'; font-weight: 500; color: var(--qp-ink-3); text-transform: none; letter-spacing: .02em; }
:root body #mainContent #quizSection .grade-result .sm-model { padding: 16px 20px; background: var(--qp-note); border: 0; border-radius: 6px; font: 400 1.125rem/1.6 var(--qp-serif); color: var(--qp-ink); }
:root body #mainContent #quizSection .grade-result .sm-ask { margin: 18px 0 10px; font: 600 1rem/1.4 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .grade-result .sm-chips .preset-opt { min-width: 44px; min-height: 44px; border: 1.5px solid var(--qp-ink-2); border-radius: 50%; background: none; color: var(--qp-ink); font: 600 .9375rem/1 var(--qp-mono); }
:root body #mainContent #quizSection .grade-result .sm-chips .preset-opt[aria-checked="true"] { background: var(--qp-ink); color: var(--qp-paper); }
:root body #mainContent #quizSection .grade-result .sm-verdict { font: 600 1rem/1.4 var(--qp-sans); margin-top: 14px; }
:root body #mainContent #quizSection .grade-result .sm-link { background: none; border: 0; padding: 10px 0; color: var(--qp-link); font: 600 .9375rem/1.2 var(--qp-sans); text-decoration: underline; text-underline-offset: 4px; }

/* ── Revision: assisted writing, visibly separate from the first answer ─ */
:root body #mainContent #quizSection .study-revision { margin: 28px 0 0; padding: 26px 0 0; border: 0; border-top: 2px solid var(--qp-ink); background: none; border-radius: 0; }
:root body #mainContent #quizSection .study-revision > .examiner-source:first-child { margin: 0 0 16px; font: 500 .8125rem/1.5 var(--qp-sans); color: var(--qp-ink-3); }
/* With a payoff, the does-not-count line is a quiet footnote under it. */
:root body #mainContent #quizSection .study-revision:has(> .qp-payoff) { display: flex; flex-direction: column; }
:root body #mainContent #quizSection .study-revision > .qp-payoff { order: -2; }
:root body #mainContent #quizSection .study-revision > .examiner-source:first-child { order: -1; margin: 18px 0 18px; font: 400 .8125rem/1.5 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-payoff { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--qp-rule); scroll-margin-top: calc(var(--qp-nav-h, 52px) + 16px); }
:root body #mainContent #quizSection .qp-payoff:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 6px; }
:root body #mainContent #quizSection .qp-payoff-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0; }
:root body #mainContent #quizSection .qp-payoff-part { display: inline-flex; align-items: baseline; gap: 8px; }
:root body #mainContent #quizSection .qp-payoff-k { font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-payoff-fig { font: 400 2.25rem/1 var(--qp-serif); letter-spacing: -.02em; color: var(--qp-ink); font-variant-numeric: lining-nums; }
:root body #mainContent #quizSection .qp-payoff-fig small { font-size: .45em; letter-spacing: 0; color: var(--qp-ink-3); margin-left: 2px; }
:root body #mainContent #quizSection .qp-payoff-arrow { font: 400 1.5rem/1 var(--qp-serif); color: var(--qp-ink-3); }
:root body #mainContent #quizSection .qp-payoff-delta { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--qp-earned); border-radius: 999px;
    background: var(--qp-earned-tint); color: var(--qp-earned); font: 700 .9375rem/1 var(--qp-sans); }
:root body #mainContent #quizSection .qp-payoff-delta[data-direction="down"] { border-color: var(--qp-partial); background: var(--qp-partial-tint); color: var(--qp-partial); }
:root body #mainContent #quizSection .qp-payoff-delta[data-direction="none"] { border: 0; background: none; padding: 0; color: var(--qp-ink-2); font-weight: 600; }
:root body #mainContent #quizSection .qp-payoff-detail { margin: 12px 0 0; font: 400 .9375rem/1.55 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .qp-payoff-k-text { font-weight: 600; }
:root body #mainContent #quizSection .qp-payoff-link { color: var(--qp-link); text-decoration: underline; text-underline-offset: 4px; }
:root body #mainContent #quizSection .qp-payoff-link:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; border-radius: 2px; }
:root body #mainContent #quizSection .qp-payoff[data-new] { animation: qp-settle var(--motion-slow) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { :root body #mainContent #quizSection .qp-payoff[data-new] { animation: none; } }
@media (max-width: 760px) { :root body #mainContent #quizSection .qp-payoff-fig { font-size: 1.875rem; } }
:root body #mainContent #quizSection .study-revision .study-feedback-form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 12px 40px; align-items: start;
    margin: 0; padding: 0; background: none; border: 0;
}
:root body #mainContent #quizSection .study-revision .study-feedback-form > * { grid-column: 1; }
:root body #mainContent #quizSection .study-revision .study-feedback-form > .qp-fix { grid-column: 2; grid-row: 1 / span 6; }
:root body #mainContent #quizSection .study-revision .study-feedback-form > label { font: 700 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-link); }
:root body #mainContent #quizSection .question-card .study-revision textarea { min-height: 18em; border: 1px dashed var(--qp-rule-strong); border-radius: 4px; }
:root body #mainContent #quizSection .study-revision .answer-limit { margin: 0; font: 500 .75rem/1.4 var(--qp-mono); color: var(--qp-ink-3); }
:root body #mainContent #quizSection .study-revision .answer-limit[data-invalid="true"] { color: var(--qp-missed); }
:root body #mainContent #quizSection .study-revision .btn-grade { justify-self: start; }
:root body #mainContent #quizSection .qp-fix { padding: 14px 16px; background: var(--qp-note); border-radius: 6px; }
:root body #mainContent #quizSection .qp-fixlist-label { margin: 0 0 12px; font: 700 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .qp-fixlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
:root body #mainContent #quizSection .qp-fixlist li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font: 450 .9375rem/1.55 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection .study-revision > .examiner-report { margin-top: 26px; }
:root body #mainContent #quizSection .study-revision .qp-working[data-kind="revision"] .qp-annotated {
    padding: 0 20px 12px; background: var(--qp-well); border: 1px dashed var(--qp-rule-strong); border-radius: 4px;
}

/* ── Moving on ──────────────────────────────────────────────────────── */
:root body #mainContent #quizSection .question-card .nav-btns {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px;
    margin: 48px 0 0; padding: 22px 0 0; border-top: 1px solid var(--qp-rule); background: none;
}
:root body #mainContent #quizSection .question-card :is(.btn-prev, .btn-next) {
    flex: 0 1 auto; max-width: 100%; white-space: normal; min-height: 48px; padding: 0 22px; border-radius: 4px; box-shadow: none; transform: none;
    font: 650 .9375rem/1 var(--qp-sans); cursor: pointer;
}
:root body #mainContent #quizSection .question-card .btn-prev { background: none; border: 0; padding-left: 0; color: var(--qp-ink-2); }
:root body #mainContent #quizSection .question-card .btn-prev:hover { color: var(--qp-ink); }
:root body #mainContent #quizSection .question-card .btn-next { margin-left: auto; background: transparent; color: var(--qp-ink); border: 1px solid var(--qp-rule-strong); }
:root body #mainContent #quizSection .question-card .btn-next:hover { background: var(--qp-note); border-color: var(--qp-ink-2); }
:root body #mainContent #quizSection .question-card :is(.btn-prev, .btn-next):focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; }
:root body #mainContent #quizSection .question-card > .study-session__change[id^="studyPrevious"] { display: inline-flex; margin-top: 40px; }
:root body #mainContent #quizSection .question-card .study-scope-details { max-width: 46em; margin: 28px 0 0; color: var(--qp-ink-2); font: 400 .9375rem/1.55 var(--qp-sans); }
:root body #mainContent #quizSection .question-card .study-scope-details summary { cursor: pointer; font-weight: 600; color: var(--qp-ink); min-height: 44px; display: flex; align-items: center; }

/* ── Results: the marked paper, returned ─────────────────────────────── */
:root body #mainContent #quizSection #scoreCard {
    margin: 0; padding: 56px clamp(20px, 5vw, 72px) 48px calc(clamp(20px, 5vw, 72px) + 132px);
    background: var(--qp-paper); color: var(--qp-ink); border: 0; border-radius: 3px; box-shadow: var(--qp-sheet-shadow);
    font-family: var(--qp-sans);
}
:root body #mainContent #quizSection #scoreCard .dbr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .dbr-slug { font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .debrief-stamp { font: 700 .6875rem/1 var(--qp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--qp-ink); border: 1.5px solid var(--qp-ink); border-radius: 2px; padding: 6px 8px; background: none; box-shadow: none; transform: rotate(-2deg); }
:root body #mainContent #quizSection #scoreCard .dbr-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 48px; align-items: end; margin: 34px 0 26px; }
:root body #mainContent #quizSection #scoreCard .dbr-frac { font: 400 5rem/.9 var(--qp-serif); letter-spacing: -.04em; color: var(--qp-ink); font-variant-numeric: lining-nums; }
:root body #mainContent #quizSection #scoreCard .dbr-frac :is(.dbr-of, #scoreTotal) { color: var(--qp-ink-3); font-size: .55em; }
:root body #mainContent #quizSection #scoreCard .dbr-pct, :root body #mainContent #quizSection #scoreCard .score-partial-note { font: 500 .8125rem/1.5 var(--qp-mono); color: var(--qp-ink-2); margin-top: 10px; }
:root body #mainContent #quizSection #scoreCard .debrief-verdict { margin: 0; max-width: 30em; }
:root body #mainContent #quizSection #scoreCard .debrief-verdict-txt { font: 400 1.0625rem/1.6 var(--qp-sans); color: var(--qp-ink-2); background: none; -webkit-text-fill-color: currentColor; }
/* The per-question row below says where the marks went, so the single
   accuracy bar is kept for screen readers only (it holds the % text). */
:root body #mainContent #quizSection #scoreCard .dbr-measure { margin: 0; }
:root body #mainContent #quizSection #scoreCard .dbr-measure .dbr-track { display: none; }
:root body #mainContent #quizSection #scoreCard .qp-qledger {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
    margin: 0 0 36px; padding: 0; list-style: none; border-top: 2px solid var(--qp-ink);
}
:root body #mainContent #quizSection #scoreCard .qp-qledger-item { margin: 0; border-bottom: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item + .qp-qledger-item { border-left: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-body {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 6px 10px;
    width: 100%; min-height: 84px; margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; box-shadow: none;
    text-align: left; color: var(--qp-ink); font: inherit;
}
:root body #mainContent #quizSection #scoreCard button.qp-qledger-body { cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out); }
:root body #mainContent #quizSection #scoreCard button.qp-qledger-body:hover { background: var(--qp-well); }
:root body #mainContent #quizSection #scoreCard button.qp-qledger-body:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: -2px; }
:root body #mainContent #quizSection #scoreCard .qp-qledger-n { grid-column: 1 / -1; font: 600 .75rem/1 var(--qp-mono); letter-spacing: .06em; color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-body > .qp-icon { width: 18px; height: 18px; }
:root body #mainContent #quizSection #scoreCard .qp-qledger-mark { font: 400 1.5rem/1 var(--qp-serif); color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item[data-status="earned"] .qp-icon { color: var(--qp-earned); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item[data-status="partial"] .qp-icon { color: var(--qp-partial); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item[data-status="missed"] .qp-icon { color: var(--qp-missed); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item[data-status="partial"] .qp-qledger-body { color: var(--qp-partial); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item[data-status="missed"] .qp-qledger-body { color: var(--qp-missed); }
:root body #mainContent #quizSection #scoreCard .qp-qledger-item:not([data-status="earned"]) .qp-qledger-mark { color: var(--qp-ink); }
@media (max-width: 760px) {
    :root body #mainContent #quizSection #scoreCard .qp-qledger { grid-template-columns: 1fr; }
    :root body #mainContent #quizSection #scoreCard .qp-qledger-item + .qp-qledger-item { border-left: 0; }
    :root body #mainContent #quizSection #scoreCard .qp-qledger-body { grid-template-columns: 44px 22px 1fr; grid-template-rows: auto; min-height: 56px; padding: 10px 2px; }
    :root body #mainContent #quizSection #scoreCard .qp-qledger-n { grid-column: auto; }
}
:root body #mainContent #quizSection #scoreCard .dbr-track { height: 3px; background: var(--qp-rule); border-radius: 0; }
:root body #mainContent #quizSection #scoreCard .dbr-fill { background: var(--qp-ink); border-radius: 0; box-shadow: none; }
:root body #mainContent #quizSection #scoreCard #subjectHistoryChip { color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .written-marks { margin: 8px 0 32px; }
:root body #mainContent #quizSection #scoreCard .wm-title { font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); margin: 0 0 6px; }
:root body #mainContent #quizSection #scoreCard .wm-row { margin: 0; border: 0; border-bottom: 1px solid var(--qp-rule); border-radius: 0; background: none; }
:root body #mainContent #quizSection #scoreCard .week-dot-label, :root body #mainContent #quizSection #scoreCard .week-dot-circle { font-size: .6875rem; }
:root body #mainContent #quizSection #scoreCard .wm-row:first-of-type { border-top: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection #scoreCard .wm-head { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 18px; min-height: 56px; padding: 0; cursor: pointer; list-style: none; background: none; }
:root body #mainContent #quizSection #scoreCard .wm-head::-webkit-details-marker { display: none; }
:root body #mainContent #quizSection #scoreCard .wm-head::after { content: '+'; content: '+' / ''; font: 400 1.25rem/1 var(--qp-mono); color: var(--qp-ink-3); text-align: right; }
:root body #mainContent #quizSection #scoreCard .wm-row[open] > .wm-head::after { content: '−'; content: '−' / ''; }
:root body #mainContent #quizSection #scoreCard .wm-head:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 2px; }
:root body #mainContent #quizSection #scoreCard .wm-q { font: 600 1rem/1.3 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .wm-mark { font: 400 1.375rem/1 var(--qp-serif); color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .wm-tag { display: none; }
:root body #mainContent #quizSection #scoreCard .wm-question { font: 450 1.125rem/1.5 var(--qp-serif); color: var(--qp-ink); margin: 6px 0 18px; max-width: 40em; }
:root body #mainContent #quizSection #scoreCard .wm-answer-label { display: none; }
:root body #mainContent #quizSection #scoreCard .wm-row > .wm-response:not(.qp-replaced) { font: 400 1rem/1.75 var(--qp-sans); color: var(--qp-ink); white-space: pre-wrap; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report { margin: 20px 0 24px; padding-top: 18px; border-top: 1px solid var(--qp-ink); display: flex !important; flex-direction: column; }
:root body #mainContent #quizSection #scoreCard .examiner-report > * { order: 2; }
:root body #mainContent #quizSection #scoreCard .examiner-report > .mark-report-head { order: 0; border-bottom: 0; margin-bottom: 8px; padding-bottom: 0; }
:root body #mainContent #quizSection #scoreCard .examiner-report > .examiner-priority { order: 1; }
:root body #mainContent #quizSection #scoreCard :is(.study-session__change, .tutor-inline-ask-btn) {
    min-height: 44px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
    font: 550 .9375rem/1.2 var(--qp-sans); color: var(--qp-ink-2); cursor: pointer;
    text-decoration: underline; text-decoration-color: var(--qp-rule-strong); text-underline-offset: 5px;
}
:root body #mainContent #quizSection #scoreCard .study-feedback-actions { flex-direction: row; flex-wrap: wrap; gap: 4px 24px; }
/* Text links wrap like text: at 200% type they must not run off the page. */
:root body #mainContent #quizSection :is(.study-session__change, .tutor-inline-ask-btn, .explain-differently-btn) { white-space: normal; max-width: 100%; text-align: left; }
:root body #mainContent #quizSection #scoreCard .study-feedback-actions > * { width: auto; border-top: 0; }
:root body #mainContent #quizSection #scoreCard .study-feedback-actions > *::after { content: none !important; }
/* Points and the rest are a footnote to the marks: one quiet line. */
:root body #mainContent #quizSection #scoreCard .score-stats { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 0 0 30px; padding: 0; border: 0; background: none; }
:root body #mainContent #quizSection #scoreCard .score-stat.qp-off { display: none; }
:root body #mainContent #quizSection #scoreCard .score-stat { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 8px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
:root body #mainContent #quizSection #scoreCard .score-stat:first-child { border-left: 0; padding-left: 0; }
:root body #mainContent #quizSection #scoreCard .score-stat-label { font: 600 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-3); }
:root body #mainContent #quizSection #scoreCard .score-stat-val { font: 400 1.375rem/1.1 var(--qp-serif); color: var(--qp-ink); background: none; -webkit-text-fill-color: currentColor; margin: 0; }
:root body #mainContent #quizSection #scoreCard .score-stat--wrong .score-stat-val { color: var(--qp-ink); -webkit-text-fill-color: currentColor; }
:root body #mainContent #quizSection #scoreCard .score-recap { color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .score-recap :is(.recap-chip, span) { background: none; border-color: var(--qp-rule); color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .debrief-next { display: grid; gap: 0; margin: 0 0 28px; border-top: 1px solid var(--qp-rule); }
:root body #mainContent #quizSection #scoreCard .debrief-next > div > button { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 16px; text-align: left; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--qp-rule); border-radius: 0; box-shadow: none; font: 600 1rem/1.4 var(--qp-sans); color: var(--qp-ink); cursor: pointer; }
:root body #mainContent #quizSection #scoreCard .debrief-next > div > button:hover { background: var(--qp-well); }
:root body #mainContent #quizSection #scoreCard .debrief-next > div > button:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: -2px; }
:root body #mainContent #quizSection #scoreCard .btn-up-next .un-kicker { font: 700 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); min-width: 72px; }
:root body #mainContent #quizSection #scoreCard .btn-up-next .un-line { display: flex; flex-direction: column; gap: 2px; }
:root body #mainContent #quizSection #scoreCard .btn-up-next .un-title { font: 650 1.0625rem/1.35 var(--qp-sans); color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .btn-up-next .un-reason { font: 400 .875rem/1.45 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .dbr-meta { color: var(--qp-ink-2); border-color: var(--qp-rule); }
:root body #mainContent #quizSection #scoreCard .streak-headline { color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .streak-sub { color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .score-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 32px; align-items: center; margin-top: 28px; padding-top: 24px; border-top: 2px solid var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .score-actions :is(.btn-retry, .btn-share) { flex: 0 0 auto; width: auto; min-height: 48px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; font: 600 .9375rem/1 var(--qp-sans); color: var(--qp-ink-2); text-decoration: underline; text-decoration-color: var(--qp-rule-strong); text-underline-offset: 5px; cursor: pointer; }
:root body #mainContent #quizSection #scoreCard .score-actions .btn-retry--primary { flex: 0 0 auto; width: auto; padding: 0 28px; background: var(--qp-action); color: var(--qp-action-ink); border-radius: 4px; text-decoration: none; }
:root body #mainContent #quizSection #scoreCard .score-actions .btn-retry--primary:hover { background: var(--qp-action-hover); }
:root body #mainContent #quizSection #scoreCard .score-actions :is(.btn-retry, .btn-share):focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; }
:root body #mainContent #quizSection #scoreCard .debrief-nudge { background: var(--qp-note); border: 0; border-radius: 6px; color: var(--qp-ink); }

/* ── Results: the way on, and the achievements ──────────────────────── */
/* body.qp-results (quiz-annotations.js) keeps the quiz chrome on the score
   screen. The way on (next session, more study options) is one quiet row
   above the report. Its DOM order is its visual order, so Tab order matches
   what is seen; an opened "More study options" takes a full line under the
   row. The flex display is !important because index.html's score-screen rule
   sets display:block with more classes than this one. */
html:not(.section-open) body.qp-results #mainContent {
    display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: baseline;
}
html:not(.section-open) body.qp-results #mainContent #quizSection { flex: 1 1 100%; min-width: 0; margin-top: 8px; }
html:not(.section-open) body.qp-results #mainContent #quizSection::before {
    content: ''; display: block; height: 0; margin: 0 0 28px; border-top: 1px solid var(--qp-rule);
}
html:not(.section-open) body.qp-results #mainContent #quizSection #scoreCard { border-radius: 0; box-shadow: none; padding-top: 4px; }
html:not(.section-open) body.qp-results #achievementsPanel {
    background: var(--qp-paper); color: var(--qp-ink); border: 0; border-radius: 0; box-shadow: none;
}
html:not(.section-open) body.qp-results #achievementsPanel .ach-next { color: var(--qp-ink-2); }
/* R3: the section title matches the report's other labels. */
html:not(.section-open) body.qp-results #achievementsPanel :is(h2, h3, .ach-title, .ach2-title, .achievements-title) {
    font: 600 .75rem/1.4 var(--qp-mono) !important; font-style: normal !important; letter-spacing: .06em !important; text-transform: uppercase; color: var(--qp-ink-2) !important;
}
html:not(.section-open) body.qp-results #achievementsPanel .ach2-bar { background: var(--qp-rule); }
html:not(.section-open) body.qp-results #achievementsPanel .ach2-bar span { background: var(--qp-ink-2); }

html:not(.section-open) body.qp-results #backToNextSession {
    color: var(--qp-link) !important; min-height: 44px; margin: 0; padding: 0;
    font: 600 .875rem/1.2 var(--qp-sans); text-decoration: none;
}
html:not(.section-open) body.qp-results #backToNextSession:hover { text-decoration: underline; text-underline-offset: 4px; }
html:not(.section-open) body.qp-results #practiceOptions {
    margin: 0 0 0 24px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
html:not(.section-open) body.qp-results #practiceOptions > summary {
    color: var(--qp-link) !important; min-height: 44px; font: 600 .875rem/1.2 var(--qp-sans); cursor: pointer;
}
html:not(.section-open) body.qp-results #practiceOptions[open] { flex: 1 1 100%; margin-left: 0; }
/* The way on and the achievements sit in the paper column: the quiz box is
   inset 70px each side, and the report's text starts 132px plus the page
   gutter inside it. The rules and the grid stop at the report's right edge. */
@media (min-width: 761px) {
    html:not(.section-open) body.qp-results #mainContent #quizSection::before {
        margin-left: calc(clamp(20px, 5vw, 72px) + 132px); margin-right: clamp(20px, 5vw, 72px);
    }
    html:not(.section-open) body.qp-results #backToNextSession {
        margin-left: calc(70px + clamp(20px, 5vw, 72px) + 132px) !important;
    }
    html:not(.section-open) body.qp-results #practiceOptions[open] {
        margin-left: calc(70px + clamp(20px, 5vw, 72px) + 132px) !important;
        margin-right: calc(70px + clamp(20px, 5vw, 72px)) !important;
    }
    html:not(.section-open) body.qp-results #mainContent > #achievementsPanel {
        box-sizing: border-box; width: calc(100% - 140px) !important; max-width: none !important;
        margin-left: auto !important; margin-right: auto !important;
        padding: 0 clamp(20px, 5vw, 72px) 0 calc(clamp(20px, 5vw, 72px) + 132px);
    }
}

/* ── Phone ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    :root { --qp-margin: 0px; --qp-nav-h: 52px; --qp-page: calc(100vw - 32px); }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-brand { width: 44px; flex: 0 0 44px; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-course { flex-direction: column; gap: 0; font-size: .8125rem; margin-right: 10px; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-course span { display: none; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-bar { gap: 14px; margin-right: 8px; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-steps { display: none; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #navTutorBtn::after, html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger::after { content: none; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app :is(#navTutorBtn, #menuTrigger) { width: 40px; padding: 0; justify-content: center; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app #menuTrigger > div { left: 12px; }
    html:not(.section-open) body:is(.quiz-active, .qp-results) .forge-topnav--app .nav-right { gap: 6px; }
    /* A thin progress line along the bottom of the header. */
    html:not(.section-open) body:is(.quiz-active, .qp-results) .qp-progress::after {
        content: ''; position: fixed; left: 0; right: 0; top: calc(var(--qp-nav-h) - 1px); height: 2px;
        background: linear-gradient(90deg, var(--qp-shell-link) var(--qp-done, 0%), transparent 0);
    }
    :root body #mainContent #quizSection #studyPlayerDiscardControls { margin-left: 0; }
    :root body #mainContent #quizSection .quiz-generation-notice:not(#studyPlayerDiscardConfirm) { margin-left: 0; }
    :root body #mainContent #quizSection .question-card { padding: 24px 0 32px; min-height: calc(100svh - 120px); }
    :root body #mainContent #quizSection .qp-num { position: static; flex-direction: row; align-items: baseline; gap: 10px; width: auto; margin-bottom: 12px; }
    :root body #mainContent #quizSection .qp-num span { font-size: 2.25rem; }
    :root body #mainContent #quizSection .question-card > div:has(> .question-num) { flex-wrap: wrap; row-gap: 4px !important; }
    :root body #mainContent #quizSection .question-card .question-text { font-size: 1.4375rem; line-height: 1.38; }
    :root body #mainContent #quizSection .question-card[data-stem="medium"] .question-text { font-size: 1.3125rem; }
    :root body #mainContent #quizSection .question-card[data-stem="long"] .question-text { font-size: 1.1875rem; line-height: 1.52; }
    :root body #mainContent #quizSection .question-card .option { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; min-height: 60px; padding: 14px 8px 14px 4px; }
    :root body #mainContent #quizSection .question-card .opt-letter { width: 32px; height: 32px; }
    :root body #mainContent #quizSection .question-card .explanation-box { padding: 14px 16px 16px; }
    :root body #mainContent #quizSection .question-card .opt-text { font-size: 1rem; }
    :root body #mainContent #quizSection .question-card .study-response > textarea { min-height: 12em; font-size: 1.0625rem; padding: 12px 14px 16px 16px; }
    :root body #mainContent #quizSection .question-card .btn-grade { flex: 1 0 100%; }
    html:not(.section-open) body.qp-results #mainContent #quizSection::before { margin-bottom: 24px; }
    html:not(.section-open) body.qp-results #mainContent #quizSection #scoreCard { padding-top: 0; }
    :root body #mainContent #quizSection .qp-text { padding: 14px 0 4px; font-size: 1.0625rem; }
    :root body #mainContent #quizSection .qp-note-head { grid-template-columns: auto minmax(0, 1fr); padding: 8px 12px; }
    :root body #mainContent #quizSection .qp-note-award { grid-column: 2; }
    :root body #mainContent #quizSection .qp-note-body { padding: 0 12px 12px; }
    :root body #mainContent #quizSection .grade-result .examiner-priority p { font-size: 1.125rem; }
    :root body #mainContent #quizSection .study-revision .study-feedback-form { display: flex; flex-direction: column; align-items: stretch; }
    :root body #mainContent #quizSection .study-revision .study-feedback-form > .qp-fix { order: -1; margin-bottom: 8px; }
    :root body #mainContent #quizSection .question-card .nav-btns {
        position: sticky; bottom: 0; margin: 32px -16px -32px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--qp-paper); box-shadow: 0 -1px 0 var(--qp-rule); z-index: 5;
    }
    :root body #mainContent #quizSection .question-card .btn-next { flex: 1 1 auto; }
    :root body #mainContent #quizSection #scoreCard { margin: 0 -16px; padding: 28px 20px 32px; border-radius: 0; }
    :root body #mainContent #quizSection #scoreCard .dbr-result { grid-template-columns: 1fr; }
    :root body #mainContent #quizSection #scoreCard .dbr-frac { font-size: 3.75rem; }
    :root body #mainContent #quizSection #scoreCard .score-stat { padding-left: 12px; }
    :root body #mainContent #quizSection #scoreCard .score-stat-val { font-size: 1.5rem; }
    :root body #mainContent #quizSection #scoreCard .wm-head { grid-template-columns: 1fr auto 20px; }
    :root body #mainContent #quizSection #scoreCard .wm-tag { display: none; }
    :root body #mainContent #quizSection #scoreCard .btn-up-next { flex-direction: column; align-items: flex-start; gap: 6px; }
    :root body #mainContent #quizSection #scoreCard .score-actions .btn-retry--primary { flex: 1 0 100%; }
}

/* With the on-screen keyboard open there is little height to spare. */
@media (max-height: 560px) {
    :root body #mainContent #quizSection .question-card .nav-btns { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    :root body #mainContent #quizSection .question-card.q-enter, :root body #mainContent #quizSection .question-card .option.wrong, :root body #mainContent #quizSection .question-card .explanation-box,
    :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-just-marked .qp-working, :root body #mainContent #quizSection .question-card .written-answer-wrap.qp-just-marked > .grade-result,
    :root body #mainContent #quizSection .grade-result.marking-recovery { animation: none; }
    :root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct,
    :root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct .opt-letter { transition-delay: 0s; }
    :root body #mainContent #quizSection .question-card .options-list:has(.wrong) .option.correct::after { animation: none; }
    :root body #mainContent #quizSection .question-card .option:not(.disabled):active { transform: none; }
    :root body #mainContent #quizSection .question-card .study-response:has(> .btn-grade:disabled:not([style*="none"]):not([hidden]))::before { display: none; }
    :root body #mainContent #quizSection :is(.qp-mark, .qp-note) { transition: none; }
    :root body #mainContent #quizSection .qp-note-award::after { transition: none; }
}

@media (forced-colors: active) {
    .qp-mark { text-decoration-color: CanvasText !important; }
    .qp-ref, .qp-badge, .qp-note { border: 1px solid CanvasText; }
}

/* ── Study pages: the quiz sheet, results and the essay tool ───────────
   They use the app's own charcoal tokens; only the active week dot needs
   white text on its purple fill. */
:root[data-dark] body.student-workspace #quizSection #scoreCard .week-dot-circle.active { color: #ffffff; }
/* The result is a focus landmark for screen readers, not a control. */
:root body.student-workspace #essayFeedback #essayResult:focus { outline: none; }
:root body.student-workspace #quizSection #scoreCard .week-dot-circle.active { background: var(--qp-action); border-color: var(--qp-action); }
/* Essay scores and labels drawn for a light page, re-inked for charcoal. */
:root body.student-workspace #essayFeedback .ec-score.good { color: var(--qp-earned); }
:root body.student-workspace #essayFeedback .ec-score.mid { color: var(--qp-partial); }
:root body.student-workspace #essayFeedback .ec-score.low { color: var(--qp-missed); }
:root body.student-workspace #essayFeedback .essay-next-step b { color: var(--qp-link); }

/* ── The desk: the next session, in the shell's charcoal ──────────────
   The front door borrows the paper's typography (serif heading, mono labels,
   hairline rules, the marked-answer symbols) but keeps the shell's colours:
   the paper tokens are re-inked to charcoal inside the card, so every rule
   below reads the same in either surface. */
/* studio.css dresses every card through a selector list that includes two
   ids, which is why the desk rules above name the card's own ancestor id. */
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card {
    --qp-paper: #18181b; --qp-well: #111113; --qp-note: #222226; --qp-rule: #2a2a30; --qp-rule-strong: #6b6b75;
    --qp-ink: #f5f5f7; --qp-ink-2: #b5b5bf; --qp-ink-3: #8e8e99; --qp-focus: #b6a6ff;
    --qp-earned: #9ddbb5; --qp-partial: #f0c779; --qp-specimen-bar: #2e2e35;
    --next-ink: var(--qp-ink); --next-muted: var(--qp-ink-2); --next-line: var(--qp-rule); --next-bg: var(--qp-well); --next-wash: var(--qp-paper);
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 56px;
    padding: 36px 44px 32px; border: 1px solid var(--qp-rule); border-radius: 16px;
    background: var(--qp-paper); color: var(--qp-ink); box-shadow: none;
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card > * { grid-column: 1; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__top { margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--qp-rule-strong); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__top h2 {
    font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--qp-ink-2);
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick { font: 500 .875rem/1.4 var(--qp-sans); color: var(--qp-ink-2); margin: 0 0 8px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) h3.next-session__topic {
    font: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.12 var(--font-display); letter-spacing: -.015em; color: var(--qp-ink);
    max-width: 18em; margin: 0 0 14px; text-wrap: balance;
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__reason { font: 400 1rem/1.6 var(--qp-sans); color: var(--qp-ink-2); max-width: 34em; margin: 0 0 26px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__time legend { font: 600 .75rem/1.4 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments { gap: 0; padding: 0; border: 1px solid var(--qp-rule-strong); border-radius: 4px; background: var(--qp-well); overflow: hidden; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments label + label span { border-left: 1px solid var(--qp-rule); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments span {
    min-width: 84px; padding: 10px 16px; border-radius: 0; box-shadow: none; background: none;
    font: 600 .875rem/22px var(--qp-sans); color: var(--qp-ink-2);
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments label:hover span { background: var(--qp-note); color: var(--qp-ink); }
/* Chosen pace: ink, not purple. Purple stays the one "start" action. */
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments input:checked + span { background: var(--qp-ink); color: var(--qp-paper); box-shadow: none; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__segments input:focus-visible + span { outline: 2px solid var(--qp-focus); outline-offset: -4px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__footer { border-top: 1px solid var(--qp-rule); padding-top: 20px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__summary { font: 600 .9375rem/1.4 var(--qp-sans); color: var(--qp-ink); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__note { font: 400 .8125rem/1.5 var(--qp-sans); color: var(--qp-ink-3); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__status { color: var(--qp-ink); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card button:focus-visible { outline-color: var(--qp-focus); }

/* A specimen of a marked answer: text lines drawn as rules, one passage
   underlined as earned and one as partly earned, with their numbers. It is
   a picture of what comes back, so it is hidden from assistive tech; the
   caption beside it says the same thing in words. */
.qp-specimen { display: none; }
@media (min-width: 1100px) {
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card:has(> .qp-specimen) { grid-template-columns: minmax(0, 1fr) 232px; }
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card > .qp-specimen {
        display: block; grid-column: 2; grid-row: 2 / span 5; align-self: start;
        margin: 6px 0 0; padding: 18px 18px 16px; border: 1px solid var(--qp-rule); border-radius: 10px; background: var(--qp-well);
    }
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--qp-rule); font: 600 .6875rem/1.3 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-head b { font: 400 1.25rem/1 var(--qp-serif); letter-spacing: 0; color: var(--qp-ink); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line { display: flex; align-items: center; gap: 6px; height: 22px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line i { display: block; height: 6px; border-radius: 3px; background: var(--qp-specimen-bar); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line i.is-earned, :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line i.is-partial { height: 6px; background: var(--qp-specimen-bar); box-shadow: 0 5px 0 -3px var(--qp-earned); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line i.is-partial { box-shadow: none; background-image: linear-gradient(90deg, var(--qp-partial) 60%, transparent 0); background-size: 6px 2px; background-repeat: repeat-x; background-position: 0 100%; background-color: var(--qp-specimen-bar); height: 8px; border-radius: 3px 3px 0 0; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line b {
    display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 6px; border: 1px solid currentColor; border-radius: 999px;
    font: 700 .6875rem/1 var(--qp-mono); color: var(--qp-earned);
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-line b.is-partial { color: var(--qp-partial); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .qp-specimen-cap { margin: 14px 0 0; font: 400 .8125rem/1.5 var(--qp-sans); color: var(--qp-ink-2); }

/* The study desk title follows the shared workspace heading role. */
:root body.student-workspace #statsPage .dash-head h2 { font: 600 clamp(2rem, 3.6vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -.015em; color: var(--qp-shell-ink); }
:root body.student-workspace #statsPage .dash-head h2::before { color: var(--qp-shell-ink-2); font: 600 .75rem/1 var(--qp-mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
@media (max-width: 600px) {
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card { padding: 24px 20px 22px; }
}

/* Leaving with an unmarked written answer: a small charcoal dialog. */
.qp-leave-dialog {
    /* The app's global reset zeroes margins; a modal dialog centres on margin: auto. */
    position: fixed; inset: 0; margin: auto; height: fit-content;
    max-width: min(440px, calc(100vw - 32px)); padding: 24px 24px 20px; border: 1px solid #38383f; border-radius: 14px;
    background: #18181b; color: #f5f5f7; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.qp-leave-dialog::backdrop { background: rgba(10, 10, 12, .64); }
.qp-leave-dialog h2 { margin: 0 0 8px; font: 600 1.5rem/1.2 var(--font-display); color: #f5f5f7; }
.qp-leave-dialog p { margin: 0 0 20px; font: 400 .9375rem/1.55 'Plus Jakarta Sans', sans-serif; color: #b5b5bf; }
.qp-leave-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.qp-leave-stay {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: #5940d6; color: #fff;
    font: 600 .9375rem/1 'Plus Jakarta Sans', sans-serif; cursor: pointer;
}
.qp-leave-stay:hover { background: #4932b8; }
.qp-leave-go { display: inline-flex; align-items: center; min-height: 44px; color: #b5b5bf; font: 600 .9375rem/1 'Plus Jakarta Sans', sans-serif; text-decoration: underline; text-underline-offset: 4px; }
.qp-leave-go:hover { color: #f5f5f7; }
.qp-leave-dialog :is(button, a):focus-visible { outline: 2px solid #b6a6ff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .qp-leave-dialog[open] { animation: qp-dialog-in .2s cubic-bezier(.16, 1, .3, 1); }
    @keyframes qp-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
}

/* Results: with a lost mark, reviewing it is the one filled action and
   new questions become a quiet link beside it. */
:root body #mainContent #quizSection #scoreCard .score-actions .qp-review-cta {
    min-height: 48px; padding: 0 28px; border: 0; border-radius: 4px; background: var(--qp-action); color: var(--qp-action-ink);
    font: 650 .9375rem/1 var(--qp-sans); cursor: pointer;
}
:root body #mainContent #quizSection #scoreCard .score-actions .qp-review-cta:hover { background: var(--qp-action-hover); }
:root body #mainContent #quizSection #scoreCard .score-actions .qp-review-cta:focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; }
:root body #mainContent #quizSection #scoreCard .score-actions.has-review .btn-retry--primary {
    padding: 0; background: none; color: var(--qp-ink-2); border-radius: 0;
    text-decoration: underline; text-decoration-color: var(--qp-rule-strong); text-underline-offset: 5px;
}
:root body #mainContent #quizSection #scoreCard .score-actions.has-review .btn-retry--primary:hover { background: none; color: var(--qp-ink); }
@media (max-width: 760px) {
    :root body #mainContent #quizSection #scoreCard .score-actions .qp-review-cta { flex: 1 0 100%; }
    :root body #mainContent #quizSection #scoreCard .score-actions.has-review .btn-retry--primary { flex: 0 0 auto; }
}

/* The start card with no course yet: curriculum and year, then the most
   taken courses, each one tap from a 5-minute session. */
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__quickpick { margin: 0 0 24px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 14px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where label { display: inline-flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--qp-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--qp-ink-2); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where select {
    min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--qp-rule-strong); border-radius: 8px; background-color: var(--qp-well); color: var(--qp-ink);
    font: 500 .875rem/1 var(--qp-sans); letter-spacing: 0; text-transform: none;
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__courses { display: flex; flex-wrap: wrap; gap: 8px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick {
    min-height: 44px; padding: 0 16px; border: 1px solid var(--qp-rule-strong); border-radius: 999px; background: var(--qp-well); color: var(--qp-ink);
    font: 550 .9375rem/1 var(--qp-sans); cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), transform var(--motion-press) var(--ease-out);
}
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick:hover { border-color: #b6a6ff; background: #211d2e; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick:active { transform: scale(.98); }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick:focus-visible { outline: 2px solid #b6a6ff; outline-offset: 2px; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick-note:empty { display: none; }
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__pick-note { margin: 10px 0 0; font: 400 .875rem/1.5 var(--qp-sans); color: var(--qp-ink-2); }
/* "Choose course" opens the full list: an outline, not the purple start. */
:root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__card:has([data-next-quickpick]:not([hidden])) button.next-session__start {
    background: transparent; color: var(--qp-ink); border: 1px solid var(--qp-rule-strong);
}
@media (max-width: 600px) {
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; }
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where label { display: grid; gap: 6px; }
    :root body.student-workspace :is(#mainContent #homeNextSession, #statsPage #dashUpNext) .next-session__where select { width: 100%; }
}

/* A first quiz says it is a starter, and its results say what comes next. */
:root body #mainContent #quizSection .question-card .qp-starter {
    grid-column: 1 / -1; max-width: 704px; margin: 0 0 28px; padding: 12px 16px; border: 1px solid var(--qp-rule); border-radius: 10px;
    background: var(--qp-well); font: 400 .9375rem/1.5 var(--qp-sans); color: var(--qp-ink-2);
}
:root body #mainContent #quizSection .question-card .qp-starter b { font-weight: 650; color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .qp-starter-next { margin: 0 0 28px; padding: 20px; border: 1px solid var(--qp-rule); border-radius: 12px; background: var(--qp-well); }
:root body #mainContent #quizSection #scoreCard .qp-starter-title { margin: 0 0 6px; font: 400 1.375rem/1.25 var(--qp-serif); color: var(--qp-ink); }
:root body #mainContent #quizSection #scoreCard .qp-starter-body { margin: 0 0 16px; max-width: 40em; font: 400 .9375rem/1.55 var(--qp-sans); color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .qp-starter-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
:root body #mainContent #quizSection #scoreCard .qp-starter-go {
    min-height: 44px; padding: 0 18px; border: 1px solid var(--qp-rule-strong); border-radius: 8px; background: transparent; color: var(--qp-ink);
    font: 600 .9375rem/1 var(--qp-sans); cursor: pointer;
}
:root body #mainContent #quizSection #scoreCard .qp-starter-go:hover { background: var(--qp-note); border-color: var(--qp-ink-2); }
:root body #mainContent #quizSection #scoreCard .qp-starter-custom {
    min-height: 44px; padding: 0; border: 0; background: none; color: var(--qp-link);
    font: 600 .9375rem/1 var(--qp-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
:root body #mainContent #quizSection #scoreCard :is(.qp-starter-go, .qp-starter-custom):focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 3px; }

/* Review rows (results page, paper and exam mode alike): once the annotated
   answer is drawn it already carries the mark and every criterion, so the old
   report keeps only the first correction, its links and the disclaimer. The
   live in-quiz feedback (#gradeResult) has its own rail layout and is not
   touched. */
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > :is(.mark-report-head, .examiner-section) { display: none !important; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working { border-top: 0; margin-top: 8px; padding-top: 0; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > .examiner-priority {
    margin: 0 0 14px; padding: 14px 16px; background: #222226; border: 0; border-left: 3px solid #b6a6ff; border-radius: 0 8px 8px 0; box-shadow: none;
}
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > .examiner-priority h4 { margin: 0 0 6px; font: 500 .6875rem/1.4 var(--qp-mono); letter-spacing: .08em; text-transform: uppercase; color: #8e8e99; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > .examiner-priority p { margin: 0; font: 400 1rem/1.5 var(--qp-serif); color: #f5f5f7; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > .study-feedback-actions { order: 2; }
:root body #mainContent #quizSection #scoreCard .wm-row > .examiner-report.qp-has-working > .examiner-source { order: 3; margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: #8e8e99; }