/*
 * exam-paper.css — makes the practice-exam pages look like a real NCEA exam paper.
 *
 * Loaded ONLY by the prediction-exam-*.html pages, and every rule is scoped to
 * body.exam-paper, because .question-box is shared with every topic bank on the
 * site. Nothing here changes the page's markup or behaviour except the formula
 * panel, which main.js builds.
 *
 * What it borrows from the real papers: Times New Roman question text, Arial
 * headings / cover / tables, the cover's layout (spaced standard number, big
 * level number, grey title band, criteria table), and the dotted margin strip,
 * which here holds each question's tools so they are always visible (hover
 * does not exist on phones). No NZQA branding.
 *
 * ⚠ Targets the DOM AFTER main.js has run: groupQuestionHeaders() prepends a
 * .question-header (grade tag + empty h4 + time display) to each part, and
 * fetchAndDisplayPredictionExam() adds .mark-scheme-container blocks, the
 * marking-schedule controls and the cut scores. If the API is unreachable the
 * server-rendered questions stay (bare .grade-tag, no header) and still style.
 *
 * Each page sets its own footer line: style="--exam-footer: '...'" on <body>.
 */

body.exam-paper {
    --paper-serif: 'Times New Roman', Tinos, Times, serif;
    --paper-sans: Arial, Arimo, 'Helvetica Neue', Helvetica, sans-serif;
    --paper-rule: #cdd3d9;
    --band: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24'%3E%3Cpath d='M6 0C10 4 10 8 6 12S2 20 6 24' fill='none' stroke='%23a3adb9' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='0.1 2.7'/%3E%3C/svg%3E");
    background-color: #eceff2;
}

body.exam-paper main {
    padding: 1.6rem 1rem 3.2rem;
}

/* ===================== cover ===================== */
body.exam-paper .exam-cover-sheet {
    position: relative;
    background: #fff;
    border: 1px solid var(--paper-rule);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(20, 30, 40, .06);
    max-width: 950px;
    margin: .4rem auto 0;
    padding: 2.2rem 3rem 1.8rem;
}
body.exam-paper .exam-cover-sheet .container { max-width: none; margin: 0; padding: 0; }

/* print corner marks, as on the real cover */
body.exam-paper .exam-cover-sheet .container::before,
body.exam-paper .exam-cover-sheet .container::after {
    content: "";
    position: absolute;
    top: 3.25rem;
    width: 11px;
    height: 11px;
    border-bottom: 1px solid #111;
}
body.exam-paper .exam-cover-sheet .container::before { left: 3rem; border-left: 1px solid #111; }
body.exam-paper .exam-cover-sheet .container::after { right: 9.6rem; border-right: 1px solid #111; }

body.exam-paper .exam-code {
    position: absolute;
    top: 4.35rem;
    left: 3rem;
    float: none;
    font: 700 1.3rem var(--paper-sans);
    letter-spacing: .42em;
    color: #111;
}
body.exam-paper .cover-level {
    position: absolute;
    top: 1.1rem;
    right: 3rem;
    font: 700 7.4rem/1 var(--paper-sans);
    letter-spacing: -.04em;
    color: #111;
}
body.exam-paper .cover-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin: 6.8rem 0 1.7rem;
}
body.exam-paper .cover-brand-name { font: 700 1.75rem 'Poppins', sans-serif; color: #1f2a37; letter-spacing: -.01em; }
body.exam-paper .cover-brand h2 {
    margin: 0;
    padding-left: 1.1rem;
    border-left: 1.5px solid #9aa4ae;
    font: 500 1.08rem/1.25 'Poppins', sans-serif;
    color: #3b4652;
    text-align: left;
}
body.exam-paper .cover-band { background: #d4d6d9; padding: 1.45rem 1rem 1.35rem; text-align: center; }
body.exam-paper .cover-band h1 { font: 700 2.15rem/1.15 var(--paper-sans); color: #151515; margin: 0 0 .55rem; text-align: center; }
body.exam-paper .cover-standard { font: 700 1.5rem/1.2 var(--paper-sans); color: #151515; margin: 0; }
body.exam-paper .exam-credits {
    text-align: center;
    font: 400 1.08rem var(--paper-sans);
    font-style: normal;
    margin: 1.4rem 0 1.2rem;
    color: #151515;
}
body.exam-paper .cover-criteria { width: 100%; border-collapse: collapse; margin: 0 0 1.6rem; }
body.exam-paper .cover-criteria th {
    background: #d4d6d9;
    border: 1px solid #6b6f74;
    font: 700 .98rem var(--paper-sans);
    padding: .45rem .6rem;
    text-align: center;
    color: #151515;
}
body.exam-paper .cover-criteria td {
    border: 1px solid #6b6f74;
    font: 400 .93rem/1.35 var(--paper-sans);
    padding: .4rem .55rem;
    vertical-align: top;
    color: #151515;
    width: 33.33%;
}
body.exam-paper .instructions { border: 0; padding: 0; }
body.exam-paper .instructions h3 { display: none; }
body.exam-paper .instructions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font: 400 1.05rem/1.45 var(--paper-sans);
    color: #151515;
}
/* the real cover's order: the bold "attempt ALL" line first, a bold capital line last */
body.exam-paper .i-attempt { order: 1; font-weight: 700; }
body.exam-paper .i-formula { order: 2; }
body.exam-paper .i-working { order: 3; }
body.exam-paper .i-time { order: 4; }
body.exam-paper .i-calc { order: 5; }
body.exam-paper .i-tools { order: 6; }
body.exam-paper .i-start { order: 7; font-weight: 700; text-transform: uppercase; }
body.exam-paper .band-swatch {
    display: inline-block;
    width: 1.7rem;
    height: 1.05rem;
    vertical-align: -.18rem;
    background: var(--band);
    background-size: 12px 24px;
    border: 1px solid #bfc6ce;
}
body.exam-paper #main-timer-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.2rem;
    background: #f5f6f8;
    border: 1px solid #d6dbe0;
    border-radius: 4px;
    padding: .75rem 1.1rem;
    margin: 1.5rem 0 0;
    text-align: left;
}
body.exam-paper #main-timer-controls h4 {
    margin: 0;
    font: 600 .74rem 'Poppins', sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #56606a;
}
body.exam-paper #main-timer-display {
    font: 700 1.9rem var(--paper-sans);
    color: #111;
    margin: 0 auto 0 0;
    font-variant-numeric: tabular-nums;
}
body.exam-paper #main-timer-controls .timer-buttons { display: flex; gap: .5rem; }
body.exam-paper #main-timer-controls .timer-buttons button { padding: .45rem 1.4rem; font-size: .85rem; margin: 0; }
body.exam-paper .cover-foot { margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid #e1e4e8; text-align: center; }
body.exam-paper .cover-foot p { margin: .15rem 0; font: 400 .8rem var(--paper-sans); color: #56606a; }

/* ===================== question sheets ===================== */
body.exam-paper .exam-container { max-width: 950px; margin: 0 auto; padding: 0; }
body.exam-paper .exam-question-title {
    position: relative;
    font: 700 1.3rem/1.2 var(--paper-sans);
    letter-spacing: .02em;
    text-align: left;
    color: #111;
    background: #fff;
    border: 1px solid var(--paper-rule);
    border-bottom: 0;
    margin: 2.4rem 0 0;
    padding: 1.35rem 6.2rem .75rem 1.6rem;
}
body.exam-paper .exam-question-title::after {
    content: "";
    position: absolute;
    left: 1.6rem;
    right: 6.2rem;
    bottom: 0;
    border-bottom: 2px solid #111;
}
body.exam-paper .exam-question-title:has(+ .prediction-question)::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4.6rem;
    background: var(--band);
    background-size: 12px 24px;
    border-left: 1px solid #d5dae0;
}
body.exam-paper .exam-question-title:not(:has(+ .prediction-question)) { padding-right: 1.6rem; }
body.exam-paper .exam-question-title:not(:has(+ .prediction-question))::after { right: 1.6rem; }

body.exam-paper .prediction-question {
    position: relative;
    overflow: visible;
    background: #fff;
    border: 1px solid var(--paper-rule);
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 1.3rem 6.2rem 1.5rem 3.9rem;
    min-height: 16.5rem; /* room for all three tools (measured ~15.4rem with the Font Awesome icons), so none is ever cut off */
}
body.exam-paper .prediction-question + .prediction-question { border-top: 1px solid #e3e6ea; }
body.exam-paper .question-header { display: flex; align-items: center; gap: .6rem; margin: 0 0 .15rem; }
body.exam-paper .question-header h4:empty { display: none; }
body.exam-paper .recommended-time-display { display: none; }
body.exam-paper .prediction-question .grade-tag {
    display: inline-block;
    font: 600 .68rem 'Poppins', sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #56606a;
    border: 1px solid #c9ced5;
    border-radius: 3px;
    padding: .05rem .45rem;
}
body.exam-paper .prediction-question > h3 {
    position: absolute;
    left: 1.45rem;
    top: 1.22rem;
    margin: 0;
    font: 400 1.18rem/1.5 var(--paper-serif);
    color: #111;
}
body.exam-paper .prediction-question p { font: 400 1.17rem/1.55 var(--paper-serif); color: #111; margin: .5em 0; }
body.exam-paper .prediction-question h4 { font: 700 1rem var(--paper-sans); margin: .9rem 0 .2rem; color: #111; }
body.exam-paper .prediction-question .question-image { border-radius: 3px; margin: 1.2rem auto; }
body.exam-paper .prediction-question table {
    border-collapse: collapse !important;
    margin: 1em auto !important;
    font: 400 1.05rem var(--paper-serif);
    color: #111;
}
body.exam-paper .prediction-question th,
body.exam-paper .prediction-question td { border: 1px solid #111 !important; padding: 6px 14px !important; }
body.exam-paper .prediction-question th { background: #f3f4f6; font-weight: 700; }
body.exam-paper .prediction-question thead tr { border-bottom: 0 !important; }

/* Papers from 2026 carry their diagrams as inline black-on-white SVG, the
   (i)/(ii) parts as a hanging column, and tables in a scrolling wrapper. */
body.exam-paper .exam-figure { clear: both; margin: 1.1rem 0; text-align: center; }
body.exam-paper .exam-figure svg { display: inline-block; max-width: 100%; height: auto; overflow: visible; }
/* two drawings side by side (a 3-D view beside its cross-section); they stack when there's no room */
body.exam-paper .exam-figure-pair { clear: both; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .6rem 3.2rem; margin: 1.1rem 0; }
body.exam-paper .exam-figure-pair .exam-figure { margin: 0; flex: 0 1 auto; min-width: 0; }
body.exam-paper .exam-sub { clear: both; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); margin-top: .9rem; }
body.exam-paper .exam-sub-label { font: 400 1.17rem/1.55 var(--paper-serif); color: #111; margin: .5em 0; }
body.exam-paper .exam-table-wrap { clear: both; overflow-x: auto; }
/* a drawing that would be unreadable shrunk to a phone (a probability tree, a histogram) keeps a
   minimum width and scrolls sideways in its own box */
body.exam-paper .exam-figure-scroll { clear: both; overflow-x: auto; }
/* bullet points in a 2026-on question (NZQA lists written facts this way) and in its worked answer;
   lists with a class of their own (the 2025 probability paper's data cards) keep their own look */
body.exam-paper .prediction-question ul:not([class]) { list-style: disc; padding-left: 1.5rem; margin: .5em 0; }
body.exam-paper .prediction-question ul:not([class]) li { font: 400 1.17rem/1.55 var(--paper-serif); color: #111; margin: .3em 0; }
body.exam-paper .prediction-question .inline-answer ul:not([class]) li { font: 400 1rem/1.6 'Poppins', sans-serif; color: #222; margin: .45em 0; }
body.exam-paper .exam-table th[scope="row"] { text-align: left; }
/* a scene photo beside the opening of the question, as real papers have */
body.exam-paper .exam-photo { float: right; width: min(40%, 300px); margin: .35rem 0 .8rem 1.4rem; }
body.exam-paper .exam-photo picture,
body.exam-paper .exam-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
body.exam-paper .prediction-question .inline-answer { clear: both; }
/* The diagram after a scene photo moves up beside it when there is room, scaled to fit, so a
   short opening doesn't leave a gap under it; with too little room it drops below as before. */
@media (min-width: 601px) {
    body.exam-paper .exam-photo ~ .exam-figure { clear: none; display: flow-root; min-width: 21rem; }
}

/* the real paper's footer line, at the end of each question */
body.exam-paper .prediction-question:has(+ .exam-question-title)::after,
body.exam-paper .prediction-question:has(+ .mark-scheme-container)::after {
    content: var(--exam-footer, "Maths Study Hub practice paper");
    display: block;
    margin-top: 2rem;
    text-align: center;
    font: 400 .72rem var(--paper-sans);
    letter-spacing: .03em;
    color: #6b7480;
}

/* ===================== the margin band: tools always visible ===================== */
body.exam-paper .sidebar-trigger-zone { display: none; }
body.exam-paper .question-sidebar,
body.exam-paper .sidebar-trigger-zone:hover + .question-sidebar,
body.exam-paper .question-sidebar:hover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: 4.6rem;
    opacity: 1;
    transform: none;
    animation: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    padding: 1.05rem 0;
    z-index: 1;
    background: var(--band);
    background-size: 12px 24px;
    border-left: 1px solid #d5dae0;
}
body.exam-paper .sidebar-btn {
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .24rem;
    cursor: pointer;
    color: #3e4954;
    transform: none;
}
body.exam-paper .sidebar-btn > i {
    box-sizing: border-box;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #c3c9d0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: background-color .15s, color .15s, border-color .15s;
}
body.exam-paper .sidebar-btn::after {
    font: 600 .6rem/1.2 'Poppins', sans-serif;
    color: #3e4954;
    background: #fff;
    padding: .05rem .25rem;
    border-radius: 2px;
}
body.exam-paper .timer-btn::after { content: attr(data-time) " min"; }
body.exam-paper .answer-btn::after { content: "Answer"; }
body.exam-paper .formula-btn::after { content: "Formulae"; }
body.exam-paper .sidebar-btn:hover { background: none; transform: none; color: #3e4954; }
body.exam-paper .sidebar-btn:hover > i,
body.exam-paper .sidebar-btn:focus-visible > i { background: #4A90E2; color: #fff; border-color: #4A90E2; }
body.exam-paper .sidebar-btn:focus-visible { outline: none; }
/* while a part's answer is open, its key turns blue and reads "Hide" (main.js sets the inline display) */
body.exam-paper .prediction-question:has(> .inline-answer[style*="block"]) .answer-btn > i { background: #4A90E2; color: #fff; border-color: #4A90E2; }
body.exam-paper .prediction-question:has(> .inline-answer[style*="block"]) .answer-btn::after { content: "Hide"; }

/* ===================== answers, marking schedule, cut scores ===================== */
body.exam-paper .prediction-question .inline-answer {
    margin: 1.4rem 0 .3rem;
    padding: 1rem 1.3rem .9rem;
    background: #f4f8f6;
    border: 1px solid #d3e1da;
    border-left: 4px solid var(--secondary-color, #50E3C2);
    border-radius: 4px;
}
body.exam-paper .prediction-question .inline-answer::before {
    content: "Answer and marking";
    display: block;
    font: 700 .68rem 'Poppins', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1d7a63;
    margin-bottom: .4rem;
}
body.exam-paper .prediction-question .inline-answer p,
body.exam-paper .prediction-question .inline-answer li { font: 400 1rem/1.6 'Poppins', sans-serif; color: #222; margin: .45em 0; }
/* key results and the "common errors" notes in the 2026-on answers */
body.exam-paper .prediction-question .inline-answer .answer-result { background: #fffbe6; border-left: 3px solid #f0d36b; padding: .3rem .7rem; }
body.exam-paper .prediction-question .inline-answer .answer-check { font-size: .92rem; font-style: italic; color: #4a5560; border-left: 3px solid #cfd6dd; padding: .1rem .7rem; }
body.exam-paper .mark-scheme-table .exam-scheme-part { font-weight: 700; text-align: center; white-space: nowrap; }
body.exam-paper .exam-draft-note,
body.exam-paper .exam-load-note {
    margin: 1.6rem 0 0;
    padding: .8rem 1.1rem;
    background: #fff8e1;
    border: 1px solid #f0d36b;
    border-radius: 4px;
    font: 400 .95rem/1.5 'Poppins', sans-serif;
    color: #5c4a00;
}
/* shown when the questions are on the page but the answers/schedule request failed twice */
body.exam-paper .exam-load-retry {
    margin-left: .4rem;
    padding: .25rem .8rem;
    border: 1px solid #c9a400;
    border-radius: 4px;
    background: #fff;
    color: #5c4a00;
    font: 600 .9rem 'Poppins', sans-serif;
    cursor: pointer;
}
body.exam-paper .exam-load-retry:hover { background: #fff3c4; }
body.exam-paper .mark-scheme-container { background: #f6f7f9; border: 1px solid var(--paper-rule); border-top: 0; padding: 1rem 1.6rem 1.2rem; }
body.exam-paper .mark-scheme-container h3 { font: 700 1rem var(--paper-sans) !important; color: #111 !important; text-align: left !important; margin: 0 0 .3rem; }
body.exam-paper .mark-scheme-table { font-family: var(--paper-sans); font-size: .92rem; margin: .6rem 0; }
body.exam-paper .mark-scheme-table th { background: #d4d6d9; border: 1px solid #6b6f74; font-weight: 700; color: #151515; padding: .45rem; }
body.exam-paper .mark-scheme-table td { border: 1px solid #6b6f74; color: #151515; padding: .45rem; }
body.exam-paper #bulk-answer-controls {
    background: #fff;
    border: 1px solid var(--paper-rule);
    border-top: 0;
    padding: 1.1rem 1.6rem 1.4rem;
    margin: 0 !important;
    text-align: left !important;
}
body.exam-paper #bulk-answer-controls .cta-button {
    background: #4A90E2;
    color: #fff;
    font: 600 .92rem 'Poppins', sans-serif;
    padding: .65rem 1.6rem;
    border: 0;
    cursor: pointer;
}
body.exam-paper .exam-container > .question-box:not(.prediction-question) {
    background: #fff;
    border: 1px solid var(--paper-rule);
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: .6rem 1.6rem 1.2rem;
}

/* ===================== formula sheet panel (built by main.js) ===================== */
body.exam-paper .formula-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(390px, 92vw);
    background: #fff;
    border-left: 1px solid var(--paper-rule);
    box-shadow: -10px 0 28px rgba(20, 30, 40, .14);
    z-index: 1000;
    transform: translateX(104%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    color: #151515;
}
body.exam-paper .formula-drawer.open { transform: none; visibility: visible; }
body.exam-paper .fd-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem .7rem; border-bottom: 2px solid #111; }
body.exam-paper .fd-head h2 { margin: 0; font: 700 1.15rem var(--paper-sans); }
body.exam-paper .fd-head span { font: 400 .8rem var(--paper-sans); color: #56606a; margin-right: auto; }
body.exam-paper .fd-close {
    border: 1px solid #c3c9d0;
    background: #fff;
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
}
body.exam-paper .fd-close:hover,
body.exam-paper .fd-close:focus-visible { background: #4A90E2; color: #fff; border-color: #4A90E2; outline: none; }
body.exam-paper .fd-body { overflow: auto; padding: .3rem 1.2rem 1.4rem; }
body.exam-paper .fd-body h3,
body.exam-paper .fd-body h4 { font: 700 .9rem var(--paper-sans); margin: 1rem 0 .4rem; padding: .3rem .55rem; background: #d4d6d9; color: #151515; }
body.exam-paper .fd-body dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .9rem; margin: 0; align-items: baseline; }
body.exam-paper .fd-body dt { font: 400 .92rem var(--paper-sans); color: #333; }
body.exam-paper .fd-body dd { margin: 0; font: 400 1.02rem var(--paper-serif); }
body.exam-paper .fd-body ul { margin: 0; padding-left: 1.2rem; font: 400 1rem/1.7 var(--paper-serif); }
body.exam-paper .fd-body p { font: 400 1rem var(--paper-serif); }
body.exam-paper .fd-body .fd-note { font: 400 .8rem var(--paper-sans); color: #56606a; margin: .9rem 0 0; }

/* ===================== phones ===================== */
@media (max-width: 600px) {
    body.exam-paper main { padding: 1rem .6rem 2rem; }
    body.exam-paper .exam-cover-sheet { padding: 1.2rem 1.1rem 1.4rem; }
    body.exam-paper .exam-cover-sheet .container::before,
    body.exam-paper .exam-cover-sheet .container::after { display: none; }
    body.exam-paper .exam-code { top: 1.45rem; left: 1.1rem; font-size: 1rem; letter-spacing: .3em; }
    body.exam-paper .cover-level { top: .5rem; right: 1.1rem; font-size: 3.9rem; }
    body.exam-paper .cover-brand { margin: 3.6rem 0 1rem; flex-wrap: wrap; gap: .45rem .7rem; }
    body.exam-paper .cover-brand-name { font-size: 1.25rem; }
    body.exam-paper .cover-brand h2 { font-size: .9rem; padding-left: .7rem; }
    body.exam-paper .cover-band { padding: 1rem .7rem; }
    body.exam-paper .cover-band h1 { font-size: 1.45rem; }
    body.exam-paper .cover-standard { font-size: 1.02rem; }
    /* criteria: stack as heading, text, heading, text ... */
    body.exam-paper .cover-criteria { display: grid; grid-template-columns: 1fr; }
    body.exam-paper .cover-criteria thead,
    body.exam-paper .cover-criteria tbody,
    body.exam-paper .cover-criteria tr { display: contents; }
    body.exam-paper .cover-criteria th,
    body.exam-paper .cover-criteria td { display: block; width: auto; text-align: left; }
    body.exam-paper .cover-criteria th:nth-child(1) { order: 1; }
    body.exam-paper .cover-criteria td:nth-child(1) { order: 2; }
    body.exam-paper .cover-criteria th:nth-child(2) { order: 3; }
    body.exam-paper .cover-criteria td:nth-child(2) { order: 4; }
    body.exam-paper .cover-criteria th:nth-child(3) { order: 5; }
    body.exam-paper .cover-criteria td:nth-child(3) { order: 6; }
    body.exam-paper .instructions ul { font-size: .98rem; }
    body.exam-paper .exam-question-title { font-size: 1.12rem; padding: 1.05rem 1rem .6rem; }
    body.exam-paper .exam-question-title::after { left: 1rem; right: 1rem; }
    body.exam-paper .exam-question-title:has(+ .prediction-question)::before { display: none; }
    body.exam-paper .prediction-question { display: flex; flex-direction: column; padding: 1.05rem 1rem 0 2.5rem; min-height: 0; }
    body.exam-paper .prediction-question > * { min-width: 0; }
    body.exam-paper .prediction-question > h3 { left: .85rem; top: 1rem; }
    body.exam-paper .question-header { align-self: flex-start; }
    body.exam-paper .prediction-question p { font-size: 1.07rem; }
    body.exam-paper .exam-photo { float: none; width: 100%; margin: .5rem 0 .8rem; }
    body.exam-paper .exam-sub { grid-template-columns: 2rem minmax(0, 1fr); }
    body.exam-paper .exam-sub-label { font-size: 1.07rem; }
    /* a displayed equation too wide for a phone scrolls inside itself, not the page */
    body.exam-paper .prediction-question mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
    /* the band becomes a strip under each part */
    body.exam-paper .question-sidebar,
    body.exam-paper .sidebar-trigger-zone:hover + .question-sidebar,
    body.exam-paper .question-sidebar:hover {
        order: 98;
        position: static;
        flex-direction: row;
        justify-content: flex-end;
        gap: 1.2rem;
        width: auto;
        margin: 1rem -1rem 0 -2.5rem;
        padding: .55rem 1rem;
        border-left: 0;
        border-top: 1px solid var(--paper-rule);
    }
    body.exam-paper .sidebar-btn { flex-direction: row; gap: .35rem; }
    body.exam-paper .sidebar-btn > i { width: 2.45rem; height: 2.45rem; }
    body.exam-paper .prediction-question .inline-answer { order: 99; margin-bottom: 1rem; }
    body.exam-paper .prediction-question:has(+ .exam-question-title)::after,
    body.exam-paper .prediction-question:has(+ .mark-scheme-container)::after { order: 100; margin: 1.2rem 0 1rem; }
    body.exam-paper .mark-scheme-container,
    body.exam-paper #bulk-answer-controls,
    body.exam-paper .exam-container > .question-box:not(.prediction-question) { padding-inline: 1rem; overflow-x: auto; }
    /* the formula sheet slides up from the bottom */
    body.exam-paper .formula-drawer {
        top: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 66vh;
        border-left: 0;
        border-top: 1px solid var(--paper-rule);
        border-radius: 14px 14px 0 0;
        transform: translateY(104%);
    }
    body.exam-paper .formula-drawer.open { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.exam-paper .formula-drawer { transition: none; }
}

/* ===================== "How we chose these questions" =====================
 * The evidence behind a 2026-on prediction paper, built by build-prediction-exams.mjs from
 * prediction-rationale/<slug>.json: a closed <details> after the paper (styled like the marking
 * schedule panels), a link to it on the cover, and a table that stacks into cards on a phone. */
body.exam-paper .paper-rationale { max-width: 950px; margin: 2.4rem auto 0; }
body.exam-paper .paper-rationale details { background: #fff; border: 1px solid var(--paper-rule); border-radius: 2px; box-shadow: 0 1px 3px rgba(20, 30, 40, .06); }
body.exam-paper .paper-rationale summary { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.6rem; cursor: pointer; }
body.exam-paper .paper-rationale summary::-webkit-details-marker { display: none; }
body.exam-paper .paper-rationale summary:focus-visible { outline: 2px solid #4A90E2; outline-offset: 2px; }
body.exam-paper .pr-icon { flex: 0 0 auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #e3f1ec; color: #1d7a63; font-size: 1.05rem; }
body.exam-paper .pr-head { flex: 1 1 auto; min-width: 0; }
body.exam-paper .pr-title { display: block; font: 700 1.15rem/1.25 var(--paper-sans); color: #111; }
body.exam-paper .pr-teaser { display: block; margin-top: .2rem; font: 400 .9rem/1.45 'Poppins', sans-serif; color: #56606a; }
body.exam-paper .pr-toggle { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; font: 600 .82rem 'Poppins', sans-serif; color: #1d7a63; }
body.exam-paper .pr-toggle .fa-chevron-down { transition: transform .2s ease; }
body.exam-paper .paper-rationale details[open] .pr-toggle .fa-chevron-down { transform: rotate(180deg); }
body.exam-paper .pr-when-open, body.exam-paper .paper-rationale details[open] .pr-when-closed { display: none; }
body.exam-paper .paper-rationale details[open] .pr-when-open { display: inline; }
body.exam-paper .pr-body { border-top: 1px solid #e1e4e8; padding: 1.25rem 1.6rem 1.5rem; font: 400 1rem/1.6 'Poppins', sans-serif; color: #222; }
body.exam-paper .pr-body h3 { font: 700 1rem/1.3 var(--paper-sans); color: #111; margin: 1.5rem 0 .65rem; }
body.exam-paper .pr-intro { margin: 0; }
body.exam-paper .pr-reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
body.exam-paper .pr-reasons li { background: #f6f7f9; border: 1px solid #e1e4e8; border-radius: 4px; padding: .8rem .95rem; font-size: .9rem; line-height: 1.5; color: #333; }
body.exam-paper .pr-reasons i { color: #1d7a63; margin-right: .4rem; }
body.exam-paper .pr-reasons strong { display: inline; font: 700 .92rem var(--paper-sans); color: #111; }
body.exam-paper .pr-reasons strong::after { content: ""; display: block; margin-bottom: .3rem; }
body.exam-paper .pr-table { width: 100%; border-collapse: collapse; font: 400 .92rem/1.45 var(--paper-sans); color: #151515; }
body.exam-paper .pr-table th { text-align: left; font-weight: 700; background: #eef1f4; border-bottom: 2px solid #111; padding: .5rem .6rem; }
body.exam-paper .pr-table td { border-bottom: 1px solid #e1e4e8; padding: .6rem .6rem; vertical-align: top; }
body.exam-paper .pr-table .pr-part { white-space: nowrap; font-weight: 700; }
body.exam-paper .pr-table .pr-topic { width: 32%; }
body.exam-paper .pr-grade { display: inline-block; min-width: 1.35rem; margin-left: .3rem; padding: .05rem .3rem; border-radius: 3px; font: 700 .68rem/1.4 'Poppins', sans-serif; text-align: center; vertical-align: .1em; }
body.exam-paper .pr-grade.pr-a { background: #dcf3e6; color: #1c6b43; }
body.exam-paper .pr-grade.pr-m { background: #dceafb; color: #1f5aa6; }
body.exam-paper .pr-grade.pr-e { background: #ece3fb; color: #5b34a6; }
body.exam-paper .pr-excellence { margin: 1.1rem 0 0; padding: .65rem .9rem; background: #fffbe6; border-left: 3px solid #f0d36b; font-size: .95rem; }
body.exam-paper .pr-sources, body.exam-paper .pr-note { margin: .9rem 0 0; font: 400 .84rem/1.55 var(--paper-sans); color: #56606a; }
body.exam-paper .pr-note { margin-top: .35rem; }
body.exam-paper .pr-sources a { color: #1d7a63; }
body.exam-paper .cover-foot .pr-cover-link { margin-top: .5rem; }
body.exam-paper .cover-foot .pr-cover-link a { font: 600 .82rem 'Poppins', sans-serif; color: #1d7a63; text-decoration: none; }
body.exam-paper .cover-foot .pr-cover-link a:hover, body.exam-paper .cover-foot .pr-cover-link a:focus-visible { text-decoration: underline; }
body.exam-paper .cover-foot .pr-cover-link i { margin-right: .35rem; }
@media (max-width: 600px) {
    body.exam-paper .paper-rationale { margin-top: 1.6rem; }
    body.exam-paper .paper-rationale summary { padding: 1rem; gap: .75rem; }
    body.exam-paper .pr-icon { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
    body.exam-paper .pr-toggle .pr-when-closed, body.exam-paper .pr-toggle .pr-when-open { display: none !important; }
    body.exam-paper .pr-body { padding: 1rem; }
    body.exam-paper .pr-reasons { grid-template-columns: 1fr; }
    body.exam-paper .pr-table thead { display: none; }
    body.exam-paper .pr-table, body.exam-paper .pr-table tbody, body.exam-paper .pr-table tr, body.exam-paper .pr-table td { display: block; width: auto; }
    body.exam-paper .pr-table tr { padding: .7rem 0; border-bottom: 1px solid #e1e4e8; }
    body.exam-paper .pr-table td { border: 0; padding: .1rem 0; }
    body.exam-paper .pr-table .pr-part { display: inline-block; margin-right: .4rem; }
    body.exam-paper .pr-table .pr-topic { display: inline; font-weight: 700; }
    body.exam-paper .pr-table .pr-why { margin-top: .25rem; color: #3b4550; }
}
@media (prefers-reduced-motion: reduce) {
    body.exam-paper .pr-toggle .fa-chevron-down { transition: none; }
}

/* "More practice": one quiet line at the very bottom of a paper (build-prediction-exams.mjs, exam.more). */
body.exam-paper .paper-more { max-width: 950px; margin: 1.6rem auto 0; text-align: center; font: 400 .88rem/1.5 'Poppins', sans-serif; color: #56606a; }
body.exam-paper .paper-more a { color: #1d7a63; font-weight: 600; text-decoration: none; }
body.exam-paper .paper-more a:hover, body.exam-paper .paper-more a:focus-visible { text-decoration: underline; }

/* ===================== the printed booklet (print-pass holders only) =====================
 * Ken, 2026-10-16. Printing stays blocked (css/style.css PRINT PROTECTION) except for a login
 * given a print pass. For them main.js (preparePrintBooklet) adds the .pb-print parts: the cover's
 * instructions, name line and QR code, the formula sheet and two pages of extra space; at print
 * time it sets body.pb-booklet (beforeprint, cleared by afterprint) and fitPrintLines adds ruled
 * working space measured to each page. Laid out after the NZQA 91947 papers: each part on a fresh
 * page, grey ruled lines, Times question text, the page number at the top and the footer line at
 * the bottom (@page margin boxes, also written by main.js).
 * These rules are NOT inside @media print: they also apply on screen while the print dialog is
 * open, which is what lets fitPrintLines measure the printed shape. The width is pinned to A4.
 * Rules and lines are borders, not backgrounds: browsers leave backgrounds off when printing. */
.pb-print { display: none; }

@media print {
    /* about the real paper's margins: as close to the edge as home and school printers reliably print */
    @page { size: A4; margin: 10mm 14mm 12mm; }
}

body.exam-paper.pb-booklet { background: #fff; }
body.exam-paper.pb-booklet main { width: 182mm; max-width: none; margin: 0; padding: 0; }   /* A4 less the @page side margins */
body.exam-paper.pb-booklet .pb-print { display: block; }

/* the site, the answers and the on-screen tools stay off the paper */
body.exam-paper.pb-booklet > :not(main),
body.exam-paper.pb-booklet main > :not(.exam-cover-sheet):not(#exam-content-container),
body.exam-paper.pb-booklet .exam-cover-sheet .instructions > ul:not(.pb-instructions),
body.exam-paper.pb-booklet .pr-cover-link,
body.exam-paper.pb-booklet #main-timer-controls,
body.exam-paper.pb-booklet .exam-container > :not(.exam-question-title):not(.prediction-question):not(.pb-print),
body.exam-paper.pb-booklet .exam-question-title.pb-skip,
body.exam-paper.pb-booklet .question-header,
body.exam-paper.pb-booklet .grade-tag,
body.exam-paper.pb-booklet .prediction-question h4:empty,
body.exam-paper.pb-booklet .question-sidebar,
body.exam-paper.pb-booklet .sidebar-trigger-zone,
body.exam-paper.pb-booklet .inline-answer { display: none !important; }

/* cover: one full page, edge to edge of the printable area like the real one, its small print at the foot */
body.exam-paper.pb-booklet .exam-cover-sheet { max-width: none; margin: 0; border: 0; box-shadow: none; background: none; padding: 0; break-after: page; }
body.exam-paper.pb-booklet .exam-cover-sheet .container { display: flex; flex-direction: column; min-height: 266mm; }
body.exam-paper.pb-booklet .exam-cover-sheet .container::before { left: 0; top: 2.4rem; }
body.exam-paper.pb-booklet .exam-cover-sheet .container::after { right: 5.6rem; top: 2.4rem; }
body.exam-paper.pb-booklet .exam-code { top: 3.5rem; left: 0; }
body.exam-paper.pb-booklet .cover-level { top: 0; right: 0; font-size: 6rem; }
body.exam-paper.pb-booklet .cover-brand { margin: 7.6rem 0 1.4rem; }
/* Ken, 2026-10-23: the printed booklet never says "prediction" (in writing it reads as a promise; the website
   can say it). Only the Maths Study Hub name stays beside the cover; the provenance line goes too. */
body.exam-paper.pb-booklet .cover-brand h2,
body.exam-paper.pb-booklet .exam-provenance { display: none !important; }
body.exam-paper.pb-booklet .cover-band { padding: 1.1rem 1rem 1rem; }
/* the real cover's grey title band and table header, printed even with background graphics off */
body.exam-paper.pb-booklet .cover-band,
body.exam-paper.pb-booklet .cover-criteria th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.exam-paper.pb-booklet .exam-credits { margin: 1rem 0 .9rem; }
body.exam-paper.pb-booklet .cover-criteria { margin: 0 0 1.3rem; }
body.exam-paper.pb-booklet .pb-name { display: flex; align-items: flex-end; gap: .7rem; margin: 0 0 1.2rem; font: 700 1rem var(--paper-sans); color: #111; }
body.exam-paper.pb-booklet .pb-name::after { content: ""; flex: 1; border-bottom: 1px solid #111; }
body.exam-paper.pb-booklet .pb-instructions { list-style: none; margin: 0; padding: 0; font: 400 1rem/1.4 var(--paper-sans); color: #151515; }
body.exam-paper.pb-booklet .pb-instructions li { margin: 0 0 .45rem; }
body.exam-paper.pb-booklet .pb-answers { display: flex; align-items: center; gap: 1.3rem; margin: 1.2rem 0 0; padding: .8rem 1.1rem; border: 1px solid #6b6f74; }
body.exam-paper.pb-booklet .pb-qr { flex: none; width: 26mm; height: 26mm; }
body.exam-paper.pb-booklet .pb-answers p { margin: 0; font: 400 .95rem/1.5 var(--paper-sans); color: #151515; }
body.exam-paper.pb-booklet .pb-answers strong { display: block; font-size: 1.05rem; }
body.exam-paper.pb-booklet .pb-url { display: block; font-weight: 700; }
body.exam-paper.pb-booklet .cover-foot { margin-top: auto; padding-top: .6rem; }

/* question pages: QUESTION ONE starts a page, and so does every part after its first */
body.exam-paper.pb-booklet .exam-container { max-width: none; }
body.exam-paper.pb-booklet .exam-question-title { break-before: page; break-after: avoid; border: 0; background: none; margin: 0 0 .5rem; padding: 0; font: 700 13pt var(--paper-sans); }
body.exam-paper.pb-booklet .exam-question-title::before,
body.exam-paper.pb-booklet .exam-question-title::after { display: none; }
body.exam-paper.pb-booklet .prediction-question { display: flow-root; break-before: page; border: 0; background: none; margin: 0; padding: 0 0 0 2.6rem; min-height: 0; }
body.exam-paper.pb-booklet .exam-question-title + .prediction-question { break-before: auto; }
body.exam-paper.pb-booklet .prediction-question::after { content: none !important; display: none !important; }
body.exam-paper.pb-booklet .prediction-question > h3 { left: 0; top: .5em; font-size: 12pt; }
body.exam-paper.pb-booklet .prediction-question p,
body.exam-paper.pb-booklet .exam-sub-label,
body.exam-paper.pb-booklet .prediction-question ul:not([class]) li { font-size: 12pt; }
/* the paper's own layout whatever the screen. Printing from a phone, its narrow-screen rules are still in force
   while fitPrintLines measures (the print itself is A4 wide), so the photo would measure full width, not beside
   the text, and the pages measured wouldn't be the pages printed. */
body.exam-paper.pb-booklet .exam-photo { float: right; width: min(40%, 300px); margin: .35rem 0 .8rem 1.4rem; }
body.exam-paper.pb-booklet .exam-photo ~ .exam-figure { clear: none; display: flow-root; min-width: 21rem; }
body.exam-paper.pb-booklet .exam-sub { grid-template-columns: 2.4rem minmax(0, 1fr); }
body.exam-paper.pb-booklet .prediction-question mjx-container[display="true"] { overflow: visible; max-width: none; }
/* a question's own colours print even with background graphics off: some older papers draw
   their bar charts as coloured blocks, which would otherwise print as empty axes */
body.exam-paper.pb-booklet .prediction-question,
body.exam-paper.pb-booklet .prediction-question * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* a pair of figures stays side by side on paper, each a little smaller (at the booklet's width they would
   stack, and the pair would then take most of a page and push the working space over) */
body.exam-paper.pb-booklet .exam-figure-pair { flex-wrap: nowrap; column-gap: 1.6rem; }
body.exam-paper.pb-booklet .exam-figure,
body.exam-paper.pb-booklet .exam-figure-pair,
body.exam-paper.pb-booklet .exam-photo,
body.exam-paper.pb-booklet .exam-table-wrap,
body.exam-paper.pb-booklet .question-image { break-inside: avoid; }

/* working space */
/* the older papers space out their sub-parts with <br>s for the screen; on paper the working space does that */
body.exam-paper.pb-booklet .prediction-question > br { display: none; }
body.exam-paper.pb-booklet .pb-lines { clear: both; margin: .8rem 0 0; }
body.exam-paper.pb-booklet .exam-sub + .pb-lines { margin-left: 2.4rem; }
/* fitPrintLines starts a sub-part, or a part's working space, on a fresh page when its lines wouldn't fit */
body.exam-paper.pb-booklet .pb-break { break-before: page; }
body.exam-paper.pb-booklet .pb-lines.pb-break { margin-top: 0; }
body.exam-paper.pb-booklet .pb-line { box-sizing: border-box; height: 9mm; border-bottom: .3mm solid #9aa1a8; break-inside: avoid; }

/* formula sheet */
body.exam-paper.pb-booklet .pb-formulae { break-before: page; }
body.exam-paper.pb-booklet .pb-page-title { margin: 0; font: 700 13pt var(--paper-sans); color: #111; }
body.exam-paper.pb-booklet .pb-page-sub { margin: .2rem 0 .6rem; font: 400 10pt var(--paper-sans); color: #444; }
body.exam-paper.pb-booklet .pb-formulae .fd-body { overflow: visible; padding: 0; }
body.exam-paper.pb-booklet .pb-formulae .fd-body h3,
body.exam-paper.pb-booklet .pb-formulae .fd-body h4 { background: none; padding: 0 0 .2rem; border-bottom: 1px solid #111; font-size: 11pt; break-after: avoid; }
/* a heading and its formulas never split (preparePrintBooklet groups them); a sheet longer than a page goes
   into two columns (fitPrintLines adds .pb-cols), the first heading of each column flush with the top */
body.exam-paper.pb-booklet .pb-fgroup { break-inside: avoid; }
body.exam-paper.pb-booklet .pb-formulae.pb-cols .fd-body { column-count: 2; column-gap: 9mm; }
body.exam-paper.pb-booklet .pb-formulae.pb-cols .pb-fgroup:first-child > :first-child { margin-top: 0; }

/* extra space at the back */
body.exam-paper.pb-booklet .pb-extra { break-before: page; }
body.exam-paper.pb-booklet .pb-extra-head { width: fit-content; margin: 0 auto 2rem; padding: .35rem 1.8rem; border: 1px solid #555; text-align: center; font: 700 10.5pt/1.5 var(--paper-sans); color: #222; }
body.exam-paper.pb-booklet .pb-extra-body { position: relative; }
body.exam-paper.pb-booklet .pb-extra-body::before { content: ""; position: absolute; left: 13mm; top: -1.3rem; bottom: 0; border-left: 1px solid #111; }
body.exam-paper.pb-booklet .pb-qn-label { position: absolute; left: 0; top: -1.3rem; width: 13mm; font: 700 5.5pt/1.1 var(--paper-sans); text-align: center; color: #222; }
body.exam-paper.pb-booklet .pb-extra .pb-lines { margin: 0; }