/* GuideMate Mock Exam.
 * The shell, navy control panel and cream reading pane come from
 * learning-center.css. This file adds only what a timed exam needs: the clock,
 * paper-specific layout, topic bars, and marked-paper details. */

.mock-page .brain-content { max-width: 860px; }

/* Actionable save failures must not inherit the tiny, muted "Saved" label. */
.gm-artifact-toolbar .gm-artifact-status.is-error {
    flex-basis: 100%;
    margin: 8px 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: #AA2E25;
}

/* ── The clock (top bar) ────────────────────────────────────────────────── */
/* In the top bar rather than the page so it stays visible at any scroll
   position — a clock you have to scroll to find is not a clock. */
.mock-clock {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(27, 58, 75, 0.06);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 15px; font-variant-numeric: tabular-nums;
    color: #1B3A4B;
}
.mock-clock[data-tone="warn"] { background: rgba(217, 165, 33, 0.16); color: #8A6A12; }
.mock-clock[data-tone="over"] { background: rgba(206, 107, 90, 0.16); color: #A24634; }
.mock-clock strong { font-weight: 600; }

/* ── Intro / brief ──────────────────────────────────────────────────────── */
.mock-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: mock-step; }
.mock-steps li {
    counter-increment: mock-step;
    display: grid; grid-template-columns: 34px 1fr; gap: 4px 14px;
    padding: 14px 0; border-top: 1px solid rgba(27, 58, 75, 0.1);
}
.mock-steps li::before {
    content: "0" counter(mock-step);
    grid-row: 1 / span 2;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13px; font-weight: 600; color: #B08A3A;
    padding-top: 2px;
}
.mock-steps strong { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; color: #1B3A4B; }
.mock-steps span { font-size: 15px; line-height: 1.55; color: #4E6A78; }

.mock-stats { margin-top: 22px; }

.mock-start, .mock-again { margin-top: 26px; }
.mock-callout-wrap { margin-top: 22px; }
.mock-callout-wrap .callout-text > :last-child { margin-bottom: 0; }

/* Indeterminate: generation has no measurable progress, and a fake percentage
   that stalls at 80% reads as a hang. */
.mock-progress {
    margin-top: 26px; height: 4px; border-radius: 999px;
    background: rgba(27, 58, 75, 0.08); overflow: hidden;
}
.mock-progress-fill {
    display: block; width: 34%; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #B08A3A, #D9A521);
    animation: mock-slide 1.6s ease-in-out infinite;
}

.mock-generation-stages {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}
.mock-generation-stage {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #A69D89;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 13px;
}
.mock-generation-dot {
    width: 10px;
    height: 10px;
    flex: none;
    border: 2px solid rgba(27, 58, 75, 0.18);
    border-radius: 50%;
    background: #FBF8F0;
}
.mock-generation-stage[data-state="complete"] { color: #3E8E5A; }
.mock-generation-stage[data-state="complete"] .mock-generation-dot {
    border-color: #3E8E5A;
    background: #3E8E5A;
}
.mock-generation-stage[data-state="current"] {
    color: #1B3A4B;
    font-weight: 600;
}
.mock-generation-stage[data-state="current"] .mock-generation-dot {
    border-color: #D9A521;
    background: #D9A521;
    box-shadow: 0 0 0 5px rgba(217, 165, 33, 0.14);
}
@keyframes mock-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

.mock-submit-bar { padding: 32px 0 60px; }
.mock-submit-note { margin-top: 10px; font-size: 13px; color: #A69D89; }

/* ── Result ─────────────────────────────────────────────────────────────── */
/* Always adjacent to the grade: an estimate presented without its caveat is
   read as a result. */
.mock-estimate-note { font-size: 13px; line-height: 1.55; color: #A69D89; }

.mock-topics { display: flex; flex-direction: column; gap: 9px; }
.mock-topic { display: grid; grid-template-columns: 1fr 160px 62px; gap: 14px; align-items: center; }
.mock-topic-name { font-size: 15px; color: #1B3A4B; }
.mock-topic-bar { height: 7px; border-radius: 999px; background: rgba(27, 58, 75, 0.09); overflow: hidden; }
.mock-topic-fill { display: block; height: 100%; border-radius: 999px; background: #3E8E5A; }
.mock-topic-marks { font-size: 13px; color: #A69D89; text-align: right; font-variant-numeric: tabular-nums; }

.mock-directives li { margin-bottom: 10px; }
.mock-directives li p { margin: 0; }
.mock-debrief { margin-top: 34px; }
.mock-debrief .lc-improve-head p { margin: 0; }

.mock-improved li { padding: 9px 13px; margin-bottom: 7px; border-radius: 8px; font-size: 14px; }
.mock-improved li.is-better { background: rgba(62, 142, 90, 0.09); color: #26543A; }
.mock-improved li.is-same { background: rgba(27, 58, 75, 0.05); color: #4E6A78; }

@media (max-width: 640px) {
    .mock-topic { grid-template-columns: 1fr 70px; }
    .mock-topic-bar { display: none; }
    .mock-generation-stages { grid-template-columns: 1fr; gap: 12px; }
}

/* ── The marked paper ───────────────────────────────────────────────────
 * The card, the meta row, the frozen answer and the feedback block all come
 * from learning-center.css (.lc-qcard and friends), so a marked mock and a
 * marked chapter test are the same object to a student. Only the parts a mock
 * has and a chapter test does not live here. */
.mock-review-note { font-size: 13px; line-height: 1.6; color: #A69D89; margin-bottom: 16px; }
.mock-review { display: flex; flex-direction: column; gap: 14px; }

/* The right option, marked even when it was not the one chosen — that is the
   whole value of reading a paper back. */
.mock-option--correct {
    border-color: #3E8E5A !important;
    background: rgba(62, 142, 90, 0.07);
}
.mock-option--correct .lc-option-text::after {
    content: " ✓";
    color: #3E8E5A;
    font-weight: 600;
}

.mock-scheme { margin: 0 0 4px; padding-left: 20px; }
.mock-scheme li { font-size: 14px; line-height: 1.6; color: #4E6A78; margin-bottom: 5px; }
.mock-scheme li p { display: inline; margin: 0; font-size: 14px; }

.mock-marked-meta { margin: 8px 0 0; font-size: 12px; color: #A69D89; }

.mock-marked-late {
    margin: 12px 0 0; padding: 9px 13px; border-radius: 7px;
    background: rgba(217, 165, 33, 0.1);
    font-size: 13px; color: #6B5410;
}

/* ── The prescription ───────────────────────────────────────────────────
 * Deliberately the most prominent block after the grade. A student who reads
 * only two things on this page should read what they scored and what to do
 * about it. */
.mock-next-step { margin-top: 34px; }
.mock-next-step-copy { flex: 1 1 320px; }
.mock-next-step-body { margin-top: 6px; }
.mock-next-step-body p { margin: 0; }
.mock-next-step-cta { flex: none; text-decoration: none; }

/* ── Punch-list additions (P11 review rehaul + P12/P13) ─────────────────── */

/* P11 — spacing + labeled blocks on the marked paper */
.mock-review { display: flex; flex-direction: column; gap: 26px; }
.mock-review .lc-question--graded { padding: 20px 22px; }
.mock-review .lc-answer-label,
.mock-review .lc-feedback-label {
    margin: 16px 0 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7A7361;
}
.mock-review .lc-feedback {
    border-left: 3px solid #1B3A4B;
    padding: 8px 14px;
    background: rgba(27, 58, 75, 0.05);
    border-radius: 0 8px 8px 0;
}
.mock-review .mock-scheme { margin: 4px 0 0; padding-left: 20px; }
.mock-review .mock-scheme li { margin: 4px 0; line-height: 1.5; }

/* P11 — flashcards read left-aligned as study text, never centered */
.mock-debrief .lc-flashcard, .mock-debrief .lc-flashcard * { text-align: left; }
.mock-debrief .lc-flashcard ul { padding-left: 18px; }

/* P12 — diagnostics */
.mock-wrong-idea {
    margin-top: 10px; font-size: 0.86rem; color: #7C2D12;
    background: #F6E0DA; border-radius: 8px; padding: 8px 12px;
}
.mock-error-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mock-chip--error { background: #F6E0DA; color: #9A4633; }

/* P13 — prediction card + section/component tables + graded stamp */
.mock-graded-at { margin: 2px 0 0; font-size: 0.78rem; color: #9A927E; }
.mock-prediction {
    margin: 12px 0; padding: 10px 14px;
    border: 1px solid rgba(27, 58, 75, 0.18); border-radius: 10px;
    background: rgba(246, 239, 222, 0.6);
}
.mock-prediction-line { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.mock-sections-table { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.mock-section-row {
    display: grid; grid-template-columns: minmax(0, 2fr) auto auto auto;
    gap: 12px; align-items: baseline;
    padding: 6px 4px; border-bottom: 1px dotted rgba(27, 58, 75, 0.14);
    font-size: 0.88rem;
}
.mock-section-name { font-weight: 600; }
.mock-section-marks, .mock-section-pct { white-space: nowrap; color: #514B3B; }
.mock-section-grade {
    white-space: nowrap; font-weight: 700; color: #1B3A4B;
    background: #EAE1CF; border-radius: 999px; padding: 1px 10px; font-size: 0.78rem;
}

/* ── Design 3a — specification sheet review page ─────────────────────────
   Navy structure, gold-ruled label rail, results on one line, navy table
   bands. Space Grotesk display + tabular figures for every numeral. Scoped
   to .mock-result--spec so the sitting screen is untouched. */

.mock-result--spec {
    /* The comp is a 1080px sheet; the page's default result column is much
       narrower and would push the one-line result strip past the sheet edge. */
    max-width: 1080px;
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    overflow-x: hidden;
    --ws-navy: #17262E;
    --ws-gold: #8B6F2E;
    --ws-goldlight: #E4C77A;
    --ws-inkgray: #55666E;
    --ws-hair: rgba(23, 38, 46, 0.14);
    --ws-sheet: #FDFBF4;
    --ws-cream: #F8F3E6;
    background: var(--ws-sheet);
    color: var(--ws-navy);
    padding: 56px 64px 48px;
    border-radius: 2px;
    font-family: "Space Grotesk", "Hanken Grotesk", sans-serif;
}

/* The rail grid: 210px gold-ruled label column + content. */
.mock-spec-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 44px;
    align-items: start;
    padding: 30px 0;
    border-bottom: 1px solid var(--ws-hair);
}
.mock-spec-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ws-navy);
    font-weight: 600;
    border-bottom: 2px solid var(--ws-gold);
    padding-bottom: 6px;
    display: inline-block;
}

/* Masthead */
.mock-spec-masthead { padding: 0 0 22px; align-items: end; }
.mock-spec-brandname { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.mock-spec-brandsub {
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ws-gold); font-weight: 600; margin-top: 4px;
}
.mock-spec-titleblock { border-bottom: 2px solid var(--ws-navy); padding-bottom: 22px; }
.mock-spec-title {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.mock-spec-subline { font-size: 15px; color: var(--ws-inkgray); margin-top: 6px; }

/* Result line */
.mock-spec-resultline {
    display: flex; align-items: baseline; gap: clamp(14px, 1.8vw, 24px);
    flex-wrap: nowrap; white-space: nowrap;
}
.mock-spec-num {
    font-size: clamp(26px, 2.7vw, 38px); line-height: 0.9; font-weight: 500;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    letter-spacing: -0.01em;
}
.mock-spec-figure:first-child .mock-spec-num {
    font-size: clamp(48px, 4.8vw, 68px); font-weight: 700;
}

.mock-spec-num--accent { color: var(--ws-gold); }
.mock-spec-caption {
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ws-inkgray); margin-top: 10px;
    white-space: normal; line-height: 1.35; max-width: 11ch;
}
.mock-spec-divider { width: 1px; align-self: stretch; background: rgba(23,38,46,0.16); }

/* Examiner note — large prose line */
.mock-spec-note { font-size: 22px; line-height: 1.45; max-width: 62ch; }

/* Navy table band */
.mock-spec-table { border-bottom: none; }
.mock-spec-table + .mock-spec-table { margin-top: 18px; }
.mock-spec-tr {
    display: grid;
    grid-template-columns: 1fr 96px 74px 74px;
    gap: 8px;
    padding: 16px;
    align-items: baseline;
    border-bottom: 1px solid var(--ws-hair);
    font-size: 17px;
}
.mock-spec-tr--head {
    background: var(--ws-navy);
    color: #E9E0C8;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 11px 16px; border-bottom: none;
}
.mock-spec-tr--overall {
    background: var(--ws-navy);
    color: var(--ws-cream);
    font-weight: 600;
    border-bottom: none;
}
.mock-spec-td--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.mock-spec-td--dim { color: var(--ws-inkgray); }
.mock-spec-tr--overall .mock-spec-td--dim { color: var(--ws-cream); }
.mock-spec-td--grade { font-weight: 600; }
.mock-spec-td--gradeaccent { color: var(--ws-gold); }
.mock-spec-td--goldgrade { color: var(--ws-goldlight); font-weight: 700; }
.mock-spec-annotation { margin-top: 14px; font-size: 15px; color: var(--ws-inkgray); }

/* Grade-boundary strip */
.mock-spec-boundaries {
    display: flex; align-items: stretch; white-space: nowrap;
    border-top: 1px solid var(--ws-hair); border-bottom: 1px solid var(--ws-hair);
}
.mock-spec-boundary { flex: 1; padding: 12px 0; text-align: center; }
.mock-spec-boundary-grade { font-size: 11px; letter-spacing: 0.14em; color: var(--ws-inkgray); }
.mock-spec-boundary-min {
    font-size: 17px; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.mock-spec-boundary--achieved { background: var(--ws-navy); }
.mock-spec-boundary--achieved .mock-spec-boundary-grade { color: var(--ws-goldlight); }
.mock-spec-boundary--achieved .mock-spec-boundary-min {
    color: var(--ws-cream); font-weight: 600;
}

/* Footer disclaimer */
.mock-spec-disclaimer {
    margin-top: 40px; padding-top: 18px;
    border-top: 2px solid var(--ws-navy);
    font-size: 12px; line-height: 1.6; color: #7D8A90; max-width: 620px;
}

/* ── Carry the language through the rest of the page ── */
.mock-result--spec .lc-rule {
    border: none; margin: 44px 0 18px; padding: 0;
    display: block; text-align: left;
}
.mock-result--spec .lc-rule span {
    background: none; padding: 0 0 6px;
    font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ws-navy); font-weight: 600;
    border-bottom: 2px solid var(--ws-gold);
    display: inline-block;
}
.mock-result--spec .mock-review-note,
.mock-result--spec .mock-topic-marks { color: var(--ws-inkgray); }
.mock-result--spec .mock-topics { border-top: 1px solid var(--ws-hair); }
.mock-result--spec .mock-topic {
    border-bottom: 1px solid var(--ws-hair); padding: 12px 0;
}
.mock-result--spec .mock-topic-fill { background: var(--ws-navy); }
.mock-result--spec .mock-review .lc-question--graded {
    background: transparent;
    border: none;
    border-top: 1px solid var(--ws-hair);
    border-radius: 0;
    padding: 26px 0;
}
.mock-result--spec .mock-review .lc-feedback {
    border-left: 3px solid var(--ws-gold);
    background: rgba(139, 111, 46, 0.06);
}
.mock-result--spec .lc-grade-score--corner {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .mock-result--spec { padding: 32px 22px; }
    .mock-spec-row { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
    .mock-spec-masthead { align-items: start; }
    .mock-spec-resultline { gap: 20px; flex-wrap: wrap; white-space: normal; }
    .mock-spec-figure:first-child .mock-spec-num { font-size: 52px; }
    .mock-spec-num { font-size: 30px; }
}

/* ── Design 4a — marked questions as label-rail dossiers ─────────────────── */

.mock-result--spec .mock-review { gap: 0; }
.mock-q { padding: 44px 0 8px; }
.mock-q + .mock-q { border-top: none; }

/* Header: Qn · topic · command chip | big mono marks — over a navy rule */
.mock-q-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 32px; border-bottom: 2px solid var(--ws-navy); padding-bottom: 16px;
}
.mock-q-identity { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.mock-q-number {
    font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.mock-q-topic { font-size: 17px; }
.mock-q-command {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ws-gold); font-weight: 600;
    border-bottom: 2px solid var(--ws-gold); padding-bottom: 3px;
}
.mock-q-marks { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mock-q-earned {
    font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.mock-q-available {
    font-size: 20px; color: #A8A292; font-variant-numeric: tabular-nums;
}
.mock-q-markslabel {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ws-inkgray); margin-left: 6px;
}

/* Rail rows within a question */
.mock-q-row {
    display: grid; grid-template-columns: 150px 1fr; gap: 32px;
    align-items: start; padding: 32px 0;
    border-bottom: 1px solid var(--ws-hair);
}
.mock-q-row--last { border-bottom: none; }
.mock-q-railsub {
    font-size: 13px; color: #7D8A90; margin-top: 12px; line-height: 1.5;
}

/* Question prose.
 * A sub-part opens further from the one above it than its own lines sit from
 * each other, so the eye finds the part boundaries before it reads a word:
 * 15px between the lines inside a part, 32px above a new one. */
.mock-q-prompt { font-size: 16px; line-height: 1.62; max-width: 72ch; }
.mock-q-prompt p { margin: 0 0 15px; }
.mock-q-prompt p:last-child { margin-bottom: 0; }
.mock-q-prompt p.stem-part-open { margin-top: 32px; }
.mock-q-prompt p.stem-part-open:first-child { margin-top: 0; }

/* The part label owns a column of its own: the letter never touches the
   numeral (the label is spaced "(a) (i)" in mock-format.mjs) and the numeral
   never touches the stem. The paragraph hangs on the same measure, so a
   wrapped line starts under the text and not under the label. min-width, not
   width, so a long "(b) (viii)" grows instead of colliding. */
.stem-part-open { padding-left: 5.7em; text-indent: -5.7em; }
.stem-part-label {
    font-weight: 700;
    display: inline-block;
    /* border-box: min-width INCLUDES the padding, so 5.7em here is exactly
       the hanging indent above and the two lines start on one edge. */
    min-width: 5.7em;
    padding-right: 0.8em;
    white-space: nowrap;
    text-indent: 0;
}
.mock-q-question .exam-stimulus { margin-bottom: 18px; }

/* Answer */
.mock-q-answerprose { font-size: 17px; line-height: 1.7; max-width: 72ch; }
/* The student's own line breaks are part of the answer: working is written one
   step per line, and the markdown paragraph join would run the steps together. */
.mock-q-answerprose :is(p, li) { white-space: pre-line; }
.mock-q-noanswer { font-size: 17px; color: #7D8A90; font-style: italic; }
.mock-q-options { display: flex; flex-direction: column; }
.mock-q-option {
    display: grid; grid-template-columns: 26px 1.1em 1fr auto; gap: 14px;
    align-items: baseline; padding: 7px 0;
    font-size: 17px; line-height: 1.55;
}
.mock-q-optionmark { font-weight: 700; }
.mock-q-option--correct .mock-q-optionmark { color: var(--ws-navy); }
.mock-q-option--chosen:not(.mock-q-option--correct) .mock-q-optionmark { color: var(--ws-bad, #A33B2A); }
.mock-q-option--chosen:not(.mock-q-option--correct) { color: #6B4A42; }
.mock-q-option--correct { font-weight: 500; }
.mock-q-optionkey { font-weight: 600; color: var(--ws-inkgray, #55666E); }
.mock-q-option--unanswered { color: #6B4A42; font-style: italic; }
.mock-q-option--unanswered .mock-q-optiontext { grid-column: 2 / span 2; }
.mock-q-option--unanswered .mock-q-optionmark { color: var(--ws-bad, #A33B2A); font-style: normal; }
.mock-q-optiontag {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ws-gold); white-space: nowrap;
}

/* Marker's report — inner labelled grid */
.mock-q-report { display: flex; flex-direction: column; gap: 20px; }
.mock-q-reportrow {
    display: grid; grid-template-columns: 130px 1fr; gap: 20px;
    align-items: baseline;
}
.mock-q-reportlabel {
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ws-navy); font-weight: 600;
}
.mock-q-reportlabel--gold { color: var(--ws-gold); }
.mock-q-reporttext { font-size: 15px; line-height: 1.65; max-width: 68ch; }
.mock-q-reporttext p { margin: 0 0 12px; }
.mock-q-reporttext p:last-child { margin-bottom: 0; }
.mock-q-reportpart { padding-left: 5.7em; text-indent: -5.7em; }
.mock-q-reportpart + .mock-q-reportpart { margin-top: 18px; }
.mock-q-reporttags {
    font-size: 14px; letter-spacing: 0.04em; color: var(--ws-gold);
    font-variant-numeric: tabular-nums;
}

/* Mark scheme — audited checklist */
.mock-q-scheme {
    font-size: 14.5px; line-height: 1.65; color: var(--ws-navy);
    border-top: 1px solid var(--ws-hair); padding-top: 6px;
    max-width: 72ch;
}
.mock-q-schemerow {
    display: grid; grid-template-columns: 24px 1fr; gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(23, 38, 46, 0.07);
}
.mock-q-schemerow:last-child { border-bottom: none; }
.mock-q-schememark { font-size: 16px; font-weight: 600; }
.mock-q-schemerow--hit .mock-q-schememark { color: var(--ws-navy); }
.mock-q-schemerow--miss .mock-q-schememark { color: var(--ws-bad, #A33B2A); }
.mock-q-schemerow--miss .mock-q-schemetext { color: var(--ws-navy); opacity: 0.82; }
.mock-q-schemerow--partial .mock-q-schememark { color: var(--ws-gold); }
.mock-q-schemetext p { margin: 0 0 7px; }
.mock-q-schemetext p:last-child { margin-bottom: 0; }

/* The part header of a scheme point: label, then its price. Specific enough
   to beat `.mock-q-schemetext p` on its own, without !important. */
.mock-q-schemetext p.mock-q-schemehead {
    display: flex; align-items: baseline; gap: 9px;
    margin: 0 0 10px;
}
.mock-q-schemehead .stem-part-label { min-width: 0; padding-right: 0; }
/* A price, in the sheet's own marks style: the inherited family with lining
   figures, exactly as every other marks readout on the page is set. */
.mock-q-schemetag {
    font-size: 12.5px; letter-spacing: 0.02em;
    color: var(--ws-inkgray); font-variant-numeric: tabular-nums;
}

/* A section inside one part's scheme ("Diagram [2 marks]:"): an eyebrow over
   the points it heads, never a bullet of its own. */
.mock-q-schemetext p.mock-q-schemesub {
    display: flex; align-items: baseline; gap: 9px;
    margin: 14px 0 8px;
}
.mock-q-schemetext p.mock-q-schemesub:first-child { margin-top: 0; }
.mock-q-schemesubname {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--ws-navy, #17262E);
}

/* One bullet per MARK POINT, not one paragraph per part. The price stays at
   the end of the sentence it prices, set in the sheet's marks style. */
.mock-q-schemepoints { list-style: none; margin: 0; padding: 0; }
.mock-q-schemepoint {
    position: relative; padding-left: 18px; margin: 0 0 11px;
}
.mock-q-schemepoint:last-child { margin-bottom: 0; }
.mock-q-schemepoint::before {
    content: "•"; position: absolute; left: 2px; top: 0;
    color: var(--ws-gold); font-size: 13px; line-height: inherit;
}
.mock-q-schemepointtext p { display: inline; margin: 0; }
.mock-q-schemepointmark {
    margin-left: 7px; white-space: nowrap;
    font-size: 12.5px; font-variant-numeric: tabular-nums;
    color: var(--ws-gold);
}
.mock-q-schemerow--miss .mock-q-schemepointmark { color: var(--ws-inkgray); }

/* ── P8: per-part marking disclosures inside the answer rail ─────────────
 * A rule and an eyebrow with a plain text arrow — clickable text, no box,
 * the same language as every other label on the sheet. Closed by default and
 * remembering nothing: the marking is opened when it is wanted. */
.mock-q-disclose {
    margin-top: 14px;
    border-top: 1px solid var(--ws-hair, rgba(23, 38, 46, 0.14));
}
/* R15-2 — a real touch target. The eyebrow itself is 11px and the row was
 * about 32px tall, which is under the 44px minimum a thumb needs, and this
 * control repeats twice per part. The height is bought with symmetric padding
 * and a min-height rather than a box: the treatment stays clickable text plus
 * an arrow, and the focus outline below still traces the same row. */
.mock-q-disclosetoggle {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 0; min-height: 44px; box-sizing: border-box;
    cursor: pointer; list-style: none;
    user-select: none;
}
.mock-q-disclosetoggle::-webkit-details-marker { display: none; }
.mock-q-disclosename {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; color: var(--ws-navy, #17262E);
    border-bottom: 2px solid transparent; padding-bottom: 3px;
}
.mock-q-disclosearrow {
    font-size: 13px; line-height: 1; color: var(--ws-gold, #8B6F2E);
}
.mock-q-disclosearrow::after { content: "\2192"; }
.mock-q-disclose[open] .mock-q-disclosearrow::after { content: "\2193"; }
.mock-q-disclose[open] .mock-q-disclosename,
.mock-q-disclosetoggle:hover .mock-q-disclosename {
    border-bottom-color: var(--ws-gold, #8B6F2E);
}
.mock-q-disclosetoggle:focus-visible {
    outline: 2px solid var(--ws-gold, #8B6F2E); outline-offset: 3px;
}
/* The open gap is measured from the TEXT, not the target: the toggle's own
   11px bottom padding is part of the 44px thumb area, so this pays the
   remainder of the same 14px the body sat at before it existed. */
.mock-q-disclosebody { padding: 4px 0; }
.mock-q-partreport { display: flex; flex-direction: column; gap: 12px; }
/* A holistic ("none") part is answered nowhere: it prices the answer as a
   whole, and says so where the answer text would otherwise sit. The row it
   sits in carries marking and no answer, so its label drops into the same
   muted register as the note rather than standing beside the parts that do
   carry one. */
.mock-q-partnote {
    font-size: 14px; font-style: italic; color: var(--ws-inkgray, #55666E);
}
.mock-q-part--holistic .mock-q-partlabel {
    color: var(--ws-inkgray, #55666E); font-weight: 600;
}
/* Inside a part the scheme has no top rule of its own — the disclosure's
   rule already opened it — and each point drops its own part label, which
   the part header two lines above has already said. */
.mock-q-scheme--part { border-top: none; padding-top: 0; }

/* A printed review carries its marking. A closed <details> prints as nothing
   and there is no click on paper, so print opens every disclosure: the body
   is shown outright, and the newer ::details-content box (Chrome 128+) is
   made visible in its own rule so browsers without it ignore only that one. */
@media print {
    .mock-q-disclosebody { display: block !important; }
    .mock-q-disclosearrow { display: none; }
    .mock-q-disclosetoggle { cursor: default; }
    .mock-q-scheme, .mock-q-part, .mock-q-schemerow { break-inside: avoid; }
}
@media print {
    .mock-q-disclose::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }
}

.mock-result--spec .mock-marked-late {
    margin: 14px 0 0; font-size: 14px; color: #8A5A22;
}

@media (max-width: 900px) {
    .mock-q-row { grid-template-columns: 1fr; gap: 12px; padding: 22px 0; }
    .mock-q-reportrow { grid-template-columns: 1fr; gap: 6px; }
    .mock-q-head { flex-wrap: wrap; }
    /* A narrower hanging column: 5.7em of a 72ch measure is affordable, 5.7em
       of a phone's is not. Box and indent stay equal at 4.8em. */
    .stem-part-open { padding-left: 4.8em; text-indent: -4.8em; }
    .stem-part-label { min-width: 4.8em; padding-right: 0.6em; }
    .mock-q-schemehead .stem-part-label { min-width: 0; padding-right: 0; }
    .mock-q-reportpart { padding-left: 4.8em; text-indent: -4.8em; }
    /* The per-part overrides live with the base rules they override, further
       down: those rules are declared AFTER this block at equal specificity,
       so a copy here would lose the cascade and quietly do nothing. */
}

/* ── Design 5a — closing sections ───────────────────────────────────────── */

.mock-5a .mock-spec-row { border-bottom: 1px solid var(--ws-hair); }
.mock-5a .mock-q-row--last { border-bottom: none; }

/* Ranked revision table */
.mock-5a-prioritytr {
    grid-template-columns: 34px 1fr 108px 96px !important;
}
.mock-5a-rank { color: var(--ws-gold); font-variant-numeric: tabular-nums; }
.mock-5a-topic { font-size: 18px; font-weight: 600; }
.mock-5a-focus { font-size: 15px; color: var(--ws-inkgray); margin-top: 3px; }

/* Ruled strengths / since-last-time */
.mock-5a-ruledlist { display: flex; flex-direction: column; }
.mock-5a-ruledrow {
    display: flex; align-items: baseline; gap: 20px; padding: 8px 0;
}
.mock-5a-ruledrow:first-child { padding-top: 0; }
.mock-5a-ruledname { flex: 1; font-size: 19px; font-weight: 600; }
.mock-5a-ruledvalue { font-size: 19px; font-variant-numeric: tabular-nums; }
.mock-5a-ruledvalue--up { color: var(--ws-gold); font-weight: 600; }
.mock-5a-ruledmeta { font-size: 14px; color: var(--ws-inkgray, #55666E); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
    .mock-5a-ruledrow { flex-wrap: wrap; row-gap: 2px; }
    .mock-5a-ruledmeta { order: 3; flex: 1 1 100%; }
}

/* Flashcards: an index card on the sheet.
 * The report boxes nothing, so the card is the one bounded surface it
 * prints, and it is drawn as the object it names: a cream index card with a
 * ruled head, the rest of the deck peeking out beneath it, and the rest of
 * the deck retreating as it runs out. Elevation is the hairline alone; the
 * edges below are cards, not a shadow. Type sits at reading size, not
 * display size: a front is one prompt, a back is one part's points. */
.mock-5a-deck { max-width: 640px; }
.mock-5a-cardstack { position: relative; margin-bottom: 12px; }
.mock-5a-cardstack::before, .mock-5a-cardstack::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: var(--ws-cream); border: 1px solid var(--ws-hair);
    border-radius: 2px; opacity: 0;
    transform: translateY(5px) scaleX(0.985);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.mock-5a-cardstack::after { transform: translateY(10px) scaleX(0.965); }
.mock-5a-deck[data-behind="1"] .mock-5a-cardstack::before,
.mock-5a-deck[data-behind="2"] .mock-5a-cardstack::before,
.mock-5a-deck[data-behind="2"] .mock-5a-cardstack::after { opacity: 1; }
.mock-5a-card {
    position: relative; z-index: 1;
    background: var(--ws-cream); color: var(--ws-navy);
    border: 1px solid var(--ws-hair); border-radius: 2px;
    padding: 20px 28px 28px; min-height: 236px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 18px;
    cursor: pointer;
    transform-origin: 50% 100%;
}
.mock-5a-card:focus-visible { outline: 2px solid var(--ws-gold); outline-offset: 3px; }
.mock-5a-card--answer { background: var(--ws-sheet); }
.mock-5a-card.is-turning { animation: mock-5a-turn 260ms cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes mock-5a-turn {
    from { opacity: 0; transform: perspective(900px) rotateX(-7deg) translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mock-5a-card.is-turning { animation: none; }
    .mock-5a-cardstack::before, .mock-5a-cardstack::after { transition: none; }
}
/* The ruled head of the card: which face, which part, how many marks. */
.mock-5a-cardhead {
    display: flex; align-items: baseline; gap: 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--ws-gold);
}
.mock-5a-cardface {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ws-inkgray); font-weight: 600;
}
.mock-5a-card--answer .mock-5a-cardface { color: var(--ws-gold); }
.mock-5a-cardpart { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.mock-5a-cardmarks {
    margin-left: auto; font-size: 13px; color: var(--ws-inkgray);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mock-5a-cardbody {
    font-size: 16px; line-height: 1.6; text-align: left;
    overflow-wrap: anywhere;
}
.mock-5a-card--answer .mock-5a-cardbody { font-size: 15px; }
.mock-5a-cardbody p { margin: 0 0 10px; }
.mock-5a-cardbody p:last-child { margin-bottom: 0; }
.mock-5a-cardbody strong { font-weight: 600; }
.mock-5a-cardbody ul { list-style: disc; margin: 0 0 12px; padding-left: 18px; text-align: left; }
.mock-5a-cardbody ul:last-child { margin-bottom: 0; }
.mock-5a-cardbody li { margin: 0 0 6px; padding-left: 2px; }
.mock-5a-cardbody li::marker { color: var(--ws-gold); }
.mock-5a-cardbody ::selection { background: var(--ws-goldlight); color: var(--ws-navy); }
/* Controls stay the report's controls: text and an arrow, no box. Each is a
   44px target bought with height, not a border. */
.mock-5a-deckcontrols { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.mock-5a-deckreveal, .mock-5a-decknavbtn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: none; padding: 0; min-height: 44px;
    cursor: pointer; font-family: inherit; font-size: 14px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-inkgray);
}
.mock-5a-decklabel { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.mock-5a-deckarrow { color: var(--ws-gold); font-size: 15px; line-height: 1; }
.mock-5a-deckreveal { color: var(--ws-navy); font-weight: 600; }
.mock-5a-deckreveal .mock-5a-decklabel { border-bottom-color: var(--ws-gold); }
.mock-5a-decknavbtn--strong { color: var(--ws-navy); font-weight: 600; }
.mock-5a-decknavbtn:hover .mock-5a-decklabel,
.mock-5a-deckreveal:hover .mock-5a-decklabel { border-bottom-color: var(--ws-navy); }
.mock-5a-deckreveal:focus-visible, .mock-5a-decknavbtn:focus-visible {
    outline: 2px solid var(--ws-gold); outline-offset: 3px;
}
.mock-5a-decknav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.mock-5a-deckcount {
    font-size: 14px; color: var(--ws-inkgray); font-variant-numeric: tabular-nums;
    min-width: 4.5ch; text-align: center;
}
@media print {
    .mock-5a-cardstack::before, .mock-5a-cardstack::after { display: none; }
    .mock-5a-card { cursor: default; break-inside: avoid; }
    .mock-5a-deckcontrols { display: none; }
}

/* One clear action */
.mock-5a-action { font-size: 16px; line-height: 1.62; max-width: 72ch; }
.mock-5a-action p { margin: 0 0 12px; }
.mock-5a-actionrow { display: flex; align-items: center; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.mock-5a-cta {
    background: var(--ws-navy); color: var(--ws-cream);
    font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
    padding: 14px 26px; text-decoration: none;
}
.mock-5a-cta:hover { background: #243842; color: var(--ws-cream); }
.mock-5a-secondary {
    background: none; border: none; cursor: pointer; padding: 0 0 2px;
    font-family: inherit; font-size: 15px; color: var(--ws-navy);
    border-bottom: 1px solid rgba(23, 38, 46, 0.35);
}
.mock-5a-secondary::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform 0.15s ease; }
.mock-5a-secondary:hover::after { transform: translateX(3px); }
/* Text buttons keep their drawn size; an invisible pad makes them a 44px target. */
:is(.mock-5a-secondary, .mock-cover-back, .mock-topbar-submit, .mock-stim-close) { position: relative; }
:is(.mock-5a-secondary, .mock-cover-back, .mock-topbar-submit)::before {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%;
    height: 44px; transform: translateY(-50%);
}
:is(.mock-5a-secondary, .mock-cover-back, .mock-topbar-submit):focus-visible {
    outline: 2px solid var(--gm-paper-ink, #13233f); outline-offset: 4px;
}

@media (max-width: 900px) {
    .mock-5a-prioritytr { grid-template-columns: 26px 1fr 84px 70px !important; }
    .mock-5a-card { padding: 16px 18px 22px; min-height: 200px; gap: 14px; }
    .mock-5a-cardhead { gap: 10px; }
    .mock-5a-deckcontrols { gap: 0 16px; }
    /* The nav takes its own full row: the counter sits between its arrows,
       which a phone cannot fit beside the reveal control. */
    .mock-5a-decknav { margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }
}

/* ── "Your papers" grouped by state — collapsible, collapsed by default ── */
.mock-history-group { margin: 0 0 4px; }
.mock-history-grouphead {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 2px; min-height: 44px; cursor: pointer; list-style: none;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--gm-paper-ink, #13233f);
    border-top: 1px solid var(--book-rule, rgba(19, 35, 63, .16));
    user-select: none;
}
.mock-history-group:first-child .mock-history-grouphead { border-top: none; }
.mock-history-grouphead:focus-visible { outline: 2px solid var(--gm-paper-ink, #13233f); outline-offset: 2px; }
.mock-history-grouphead::-webkit-details-marker { display: none; }
.mock-history-grouphead::before { content: "\25B8"; font-size: 10px; color: var(--gm-paper-ink, #13233f); }
.mock-history-group[open] > .mock-history-grouphead::before { content: "\25BE"; }
.mock-history-groupcount {
    margin-left: auto; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; color: var(--gm-paper-ink, #13233f);
}
/* Rows inside a <details> fall outside the list container's flex gap —
 * space them here or the paper cards fuse into one joined block. */
.mock-history-group > .lc-chapter-row { margin: 0 0 10px; }
/* The row's date sits on its own line under the status, so two sittings of the
   same paper can be told apart. */
.mock-history-when { flex: 1 1 100%; font-variant-numeric: tabular-nums; }
.mock-history-group > .lc-chapter-row:first-of-type { margin-top: 4px; }
.mock-history-group > .lc-chapter-row:last-of-type { margin-bottom: 14px; }

/* ── 6a: exam front cover — the start-the-paper screen ──────────────────── */
.mock-cover {
    --ws-navy: #17262E; --ws-gold: #8B6F2E; --ws-goldlight: #E4C77A;
    --ws-inkgray: #55666E; --ws-hair: rgba(23, 38, 46, 0.14);
    --ws-sheet: #FDFBF4; --ws-cream: #F8F3E6;
    max-width: 840px; margin-inline: auto;
    background: var(--ws-sheet); border: none; border-radius: 0;
    box-shadow: 0 1px 2px rgba(15, 29, 48, 0.06);
    padding: 0; overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.mock-cover-mast {
    padding: 26px clamp(24px, 3.5vw, 44px) 14px;
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px 20px; flex-wrap: wrap;
    border-bottom: 1px solid var(--ws-hair);
}
.mock-cover-lockup { display: flex; align-items: baseline; gap: 12px; }
.mock-cover-brand { font-size: 15px; font-weight: 700; color: var(--ws-navy); letter-spacing: -0.01em; }
.mock-cover-kicker { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ws-gold); font-weight: 600; }
.mock-cover-code { font-size: 10px; letter-spacing: 0.08em; color: #7D8A90; }
.mock-cover-body { padding: clamp(22px, 2.8vw, 34px) clamp(24px, 3.5vw, 44px) 34px; }
.mock-cover-title { margin: 0; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; color: var(--ws-navy); font-weight: 600; letter-spacing: -0.01em; }
.mock-cover-sub { margin: 6px 0 0; font-size: 13px; color: var(--ws-inkgray); }
.mock-cover-row {
    display: grid; grid-template-columns: 160px 1fr; gap: 18px 34px;
    align-items: start; margin-top: 22px; padding-top: 20px;
    border-top: 1px solid var(--ws-hair);
}
.mock-cover-row--strong { margin-top: 26px; border-top: 2px solid var(--ws-navy); }
.mock-cover-label {
    justify-self: start;
    font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ws-navy); font-weight: 600;
    border-bottom: 2px solid var(--ws-gold); padding-bottom: 5px;
}
.mock-cover-figs { display: flex; align-items: baseline; gap: clamp(22px, 3vw, 44px); flex-wrap: wrap; }
.mock-cover-fig-num { font-size: clamp(22px, 2vw, 28px); line-height: 0.95; color: var(--ws-navy); font-weight: 500; }
.mock-cover-fig-cap { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ws-inkgray); margin-top: 7px; }
.mock-cover-instr { font-size: 14px; line-height: 1.5; color: var(--ws-navy); }
.mock-cover-instr-row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(23, 38, 46, 0.12); }
.mock-cover-instr-row:first-child { border-top: none; padding-top: 0; }
.mock-cover-instr-num { font-size: 12px; color: var(--ws-gold); }
.mock-cover-notice {
    margin-top: 26px; padding: 15px 0;
    border-top: 2px solid var(--ws-navy); border-bottom: 2px solid var(--ws-navy);
    font-size: 15px; line-height: 1.5; color: var(--ws-navy); max-width: 640px; font-weight: 500;
}
.mock-cover-actions { display: flex; align-items: center; gap: 12px 22px; margin-top: 24px; flex-wrap: wrap; }
.mock-cover-start {
    background: var(--ws-navy); color: var(--ws-cream);
    font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
    padding: 12px 26px; border: none; border-radius: 0; cursor: pointer; font-family: inherit;
}
.mock-cover-start:hover { background: #243842; }
.mock-cover-back {
    background: none; border: none; border-bottom: 1px solid rgba(23, 38, 46, 0.35);
    padding: 0 0 2px; font-size: 13px; color: var(--ws-navy); cursor: pointer; font-family: inherit;
}
.mock-cover-paid { margin-left: auto; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #7D8A90; }
/* Intro (candidate briefing) — titled instruction rows on the cover grammar. */
.mock-cover-instr-title { display: block; font-weight: 600; }
.mock-cover-instr-detail { display: block; color: var(--ws-inkgray); font-size: 13px; margin-top: 2px; }
.mock-cover-paid--bold { color: var(--ws-navy); font-weight: 700; font-size: 12px; }
.mock-cover-notice--center { max-width: none; text-align: center; }

/* Topbar submit — clickable text (never a box), visible with the clock. */
.mock-topbar-submit {
    background: none; border: none; cursor: pointer;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 14px; font-weight: 600; color: var(--gm-ink, #15263B);
    padding: 2px 0 4px; border-bottom: 2px solid var(--gm-gold, #C39A4C);
}
.mock-topbar-submit:hover { color: #243842; border-bottom-color: var(--gm-ink, #15263B); }

/* End-of-paper submit — centered text CTA with arrow, not a boxed button. */
.mock-submit-bar { text-align: center; margin: 34px 0 10px; }
.mock-submit-cta {
    background: none; border: none; cursor: pointer;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: clamp(20px, 2.2vw, 26px); font-weight: 600;
    color: var(--ws-navy, #17262E); letter-spacing: -0.01em;
    padding: 4px 8px; border-bottom: 2px solid var(--ws-gold, #8B6F2E);
}
.mock-submit-cta:hover { color: #243842; border-bottom-color: var(--ws-navy, #17262E); }
.mock-submit-note { margin: 10px 0 0; font-size: 12px; color: #7D8A90; }

/* ── Side-by-side stimulus drawer ───────────────────────────────────────── */
.mock-stim-toggle {
    position: fixed; top: calc(var(--mock-topbar-bottom, var(--lc-topbar-h, 64px)) + 22px); right: 30px; z-index: 40;
    background: none; border: none; cursor: pointer;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 15px; font-weight: 600; color: var(--gm-ink, #15263B);
    padding: 2px 0 4px; border-bottom: 2px solid var(--gm-gold, #C39A4C);
}
.mock-stim-toggle:hover { color: #243842; border-bottom-color: var(--gm-ink, #15263B); }
.mock-stim-drawer {
    position: fixed; top: var(--mock-topbar-bottom, var(--lc-topbar-h, 64px)); right: 0; bottom: 0; z-index: 45;
    width: min(50vw, 94vw);
    padding-inline: clamp(28px, 3vw, 56px);
    background: #FDFBF4;
    border-left: 1px solid rgba(23, 38, 46, 0.14);
    box-shadow: -14px 0 34px rgba(15, 29, 48, 0.10);
    overflow-y: auto;
    padding: 24px 32px 46px;
}
/* The head stays in view while a long stimulus scrolls, so Close is always
   reachable. It covers the drawer's own top and side padding to do that: a
   sticky box is held inside the padding, so top is the padding, negated. */
.mock-stim-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    position: sticky; top: -24px; z-index: 1;
    margin: -24px -32px 18px; padding: 24px 32px 12px;
    background: #FDFBF4;
    border-bottom: 1px solid rgba(23, 38, 46, 0.14);
}
.mock-stim-label {
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: #17262E; border-bottom: 2px solid #8B6F2E; padding-bottom: 5px;
}
.mock-stim-close {
    background: none; border: none; cursor: pointer;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 13px; font-weight: 600; color: #55666E; padding: 0;
}
.mock-stim-close:hover { color: #17262E; }
.mock-stim-section {
    margin: 20px 0 12px;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 15px; font-weight: 600; color: #17262E;
    padding-bottom: 8px; border-bottom: 2px solid #17262E;
}
/* The reading surface itself stays exam serif, tuned for long prose. */
.mock-stim-body {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-size: 15.5px; line-height: 1.72; color: #14181C;
}
.mock-stim-body p { margin: 0 0 14px; }
.mock-stim-body ul, .mock-stim-body ol { margin: 0 0 14px; padding-left: 1.3em; }
/* Push the paper column left while the drawer is open so nothing is covered. */
[data-content] { transition: padding-right 0.22s ease; }
/* The content column is centered with max-width 1080; while the drawer owns
 * the right half, uncap it so the paper truly gets the left half. */
/* Outranks `.lc-shell.is-collapsed .brain-content { max-width: 1080px }`. */
body.mock-stim-open .lc-shell [data-content],
body.mock-stim-open .lc-shell.is-collapsed [data-content] {
    max-width: none;
    padding-right: calc(50vw - clamp(20px, 5vw, 64px));
}
@media (max-width: 1100px) {
    body.mock-stim-open [data-content] { padding-right: 0; }
    .mock-stim-drawer { width: 94vw; }
}
/* On a phone the sheet fills the width, so a control floating at the top right
   would sit on the question text (and, before --mock-topbar-bottom, under the
   wrapped top bar). Dock it to the bottom edge instead: a paper strip with the
   same text-plus-arrow action, a full 48px tap target, clear of the top bar at
   every bar height. The drawer keeps its close control in view while reading. */
@media (max-width: 900px) {
    .mock-stim-toggle {
        top: auto; right: 0; bottom: 0; left: 0; width: 100%;
        min-height: 48px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #FDFBF4; border-bottom: none;
        border-top: 1px solid rgba(23, 38, 46, 0.22);
        box-shadow: 0 -8px 20px rgba(15, 29, 48, 0.08);
        text-align: center;
        text-decoration: underline; text-decoration-color: var(--gm-gold, #C39A4C);
        text-decoration-thickness: 2px; text-underline-offset: 6px;
    }
    .mock-stim-drawer { padding: 0 20px 40px; }
    .mock-stim-head {
        position: sticky; top: 0; z-index: 1; align-items: center;
        margin: 0 -20px 18px; padding: 12px 20px;
        background: #FDFBF4;
    }
    .mock-stim-close { min-height: 44px; min-width: 64px; text-align: right; }
    /* Room for the docked strip so the end-of-paper submit is never covered. */
    .exam-desk--stim { padding-bottom: 64px; }
}
/* Wider reading measure now that the drawer owns half the screen. */
.mock-stim-body { max-width: 640px; }
.exam-stimulus-pointer {
    margin: 0 0 26px; font-size: 13.5px; font-style: italic; color: #4A5560;
}

/* ── Catalog review: per-part answers inside the YOUR ANSWER rail ───────── */
/* One sub-part is a block: the gap BETWEEN parts (26px + a hairline) has to
   beat every gap inside one, or six parts read as one wall of text. */
.mock-q-part { padding: 26px 0; border-top: 1px solid var(--ws-hair, rgba(23, 38, 46, 0.14)); }
.mock-q-part:first-child { padding-top: 0; border-top: none; }
.mock-q-part:last-child { padding-bottom: 0; }
.mock-q-parthead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; margin-bottom: 10px;
}
.mock-q-partlabel {
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 15px; font-weight: 700; color: var(--ws-navy, #17262E);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mock-q-partmarks {
    font-size: 14px; color: var(--ws-inkgray, #55666E);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The drawn answer: the same frozen image the examiner marked. */
.mock-q-artifact { margin: 10px 0 4px; }
.mock-q-artifact img {
    display: block; max-width: min(100%, 560px); height: auto;
    border: 1px solid var(--ws-hair, rgba(23, 38, 46, 0.14));
    background: #FDFBF4;
}
.mock-q-artifact-open {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--gm-paper-ink, #13233f); font-size: 14px; text-underline-offset: .2em;
}
.mock-q-artifact-status { color: var(--gm-paper-ink, #13233f); font-size: 14px; }
.mock-q-artifactmissing {
    margin-top: 8px; font-size: 14px; font-style: italic;
    color: #A4442E;
}

/* R10-3 — the phone spacing for the block above, and it has to sit HERE
   rather than in the (max-width: 900px) block near the top of the file: these
   selectors carry the same specificity as the base rules just above, so an
   earlier copy is overridden by them and the part padding stays at its desktop
   26px on a phone. Source order is the whole fix. */
@media (max-width: 900px) {
    .mock-q-part { padding: 20px 0; }
    .mock-q-parthead { flex-wrap: wrap; gap: 4px 18px; }
}

/* ── Cover tryout: the drawing tools, unclocked and unsaved ─────────────── */
.mock-cover-tryrow { margin-top: 20px; }
.mock-cover-trylink {
    background: none; border: none; cursor: pointer; padding: 0 0 3px;
    font-family: var(--gm-display, "Space Grotesk", sans-serif);
    font-size: 13px; font-weight: 600; color: var(--ws-navy, #17262E);
    border-bottom: 2px solid var(--ws-gold, #8B6F2E);
}
.mock-cover-trylink:hover { color: #243842; border-bottom-color: var(--ws-navy, #17262E); }
.mock-cover-tryout {
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid var(--ws-hair, rgba(23, 38, 46, 0.14));
}
.mock-cover-tryout .gm-artifact-hint { margin: 0 0 4px; }

/* A whole-question working sheet has no invented subpart label/gutter. */
.exam-part.exam-part--working { grid-template-columns: minmax(0, 1fr); }
.exam-part--working > .exam-part-label:empty { display: none; }
@media (max-width: 720px) {
    /* Outrank the later base catalog rule in exam.css. */
    .exam-part.exam-part--catalog { grid-template-columns: minmax(0, 1fr); }
}

/* The picker charges 10 credits, and learning-center.css hides the top-bar
   credit pill at 640px. Putting the pill back cost the sticky bar a third row,
   so on a phone the balance is printed beside the price instead. */
.mock-balance-inline { display: none; }
@media (max-width: 640px) {
    .mock-balance-inline { display: block; }
}

/* Revision timetable: weakest topics of this paper (mock.js weakestTopicsForTimetable). */
.mock-timetable { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--book-rule, rgba(19,35,63,.16)); border-radius: 12px; background: var(--gm-gold-soft, #F1E6CB); }
.mock-timetable-lede { margin: 0 0 8px; font-size: 0.95rem; color: var(--gm-paper-ink, #13233F); }
.mock-timetable-list { margin: 0; padding: 0; list-style: none; }
.mock-timetable-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; padding: 4px 0; border-top: 1px solid var(--book-rule, rgba(19,35,63,.16)); }
.mock-timetable-item:first-child { border-top: 0; }
.mock-timetable-topic { font-weight: 600; color: var(--gm-paper-ink, #13233F); }
.mock-timetable-add { min-height: 44px; text-decoration: none; }