/* "The marked script": white sheets on a blue-grey desk, blue-black ink, faint
   booklet ruling. Examiner red (.pen, handwritten Kalam) is only for marks and
   grades. Type: Atkinson Hyperlegible Next, scale 12/14/16/18/21/24/36/48. */

:root {
  --desk: #e9edf2;
  --sheet: #ffffff;
  --ink: #1b2638;
  --pencil: #5e6878;
  --ruling: #cfdae8;
  --ruling-soft: #e3e9f1;
  --pen: #c8312a;
  --wash: #f3f6fa;
  --focus: #2f5fb8;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --hand: 'Kalam', 'Comic Neue', cursive;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius: 6px;
  --lift: 0 1px 0 rgba(27, 38, 56, .06), 0 8px 24px -12px rgba(27, 38, 56, .18);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #10151f;
    --sheet: #182131;
    --ink: #e3e8f0;
    --pencil: #98a3b5;
    --ruling: #2c3a50;
    --ruling-soft: #222d3f;
    --pen: #ff6f61;
    --wash: #1d2738;
    --focus: #8fb2ff;
    --lift: 0 1px 0 rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk); color: var(--ink); font: 400 16px/1.55 var(--sans); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--ruling); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 700; }
h1 { font-size: 36px; letter-spacing: -.015em; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
.pencil { color: var(--pencil); }
.small { font-size: 14px; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre-wrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The examiner's red pen */
.pen { font-family: var(--hand); font-weight: 700; color: var(--pen); line-height: 1; display: inline-block; transform: rotate(-4deg); }

/* ---------------- shell ---------------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px; padding: 28px 20px 20px 28px; }
.wordmark { font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-decoration: none; display: flex; align-items: baseline; gap: 6px; }
.wordmark span { font-weight: 400; color: var(--pencil); font-size: 16px; letter-spacing: 0; }
.wordmark.big { font-size: 36px; margin-bottom: 28px; }
.wordmark.big span { font-size: 18px; }
.candidate { display: grid; gap: 2px; padding: 12px 14px; border: 1.5px solid var(--ruling); border-radius: var(--radius); font-size: 14px; color: var(--pencil); }
.candidate-name { color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.rail nav { display: grid; gap: 2px; }
.rail nav a { text-decoration: none; padding: 7px 12px; border-radius: var(--radius); color: var(--pencil); font-weight: 500; border-left: 3px solid transparent; }
.rail nav a:hover { color: var(--ink); background: var(--wash); }
.rail nav a[aria-current] { color: var(--ink); font-weight: 700; background: var(--sheet); border-left-color: var(--ink); box-shadow: var(--lift); }
.rail-out { margin-top: auto; }

.desk { padding: 40px 40px 96px; max-width: 840px; width: 100%; }
.desk.wide { max-width: 1160px; }
main.bare { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.page-actions form { margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--pencil); margin-bottom: 8px; }
.crumbs > * + *::before { content: '/'; margin-right: 6px; color: var(--ruling); }

/* ---------------- sheets & blocks ---------------- */
.sheet { background: var(--sheet); border-radius: var(--radius); box-shadow: var(--lift); padding: 28px 32px; margin: 0 0 24px; }
.sheet > h2 { margin-bottom: 16px; }
.block { margin: 0 0 32px; }
.block > h2 { font-size: 18px; margin-bottom: 10px; }
.block > h2 a { text-decoration: none; }
.block > h2 a:hover { text-decoration: underline; }
.empty { color: var(--pencil); padding: 24px 0; }

ul.ruled { list-style: none; margin: 0; padding: 0; }
ul.ruled li { padding: 9px 0; border-bottom: 1px solid var(--ruling); }
ul.ruled.cols { columns: 2 280px; column-gap: 40px; }
ul.ruled.cols li { break-inside: avoid; }
ul.ruled .pencil { font-size: 14px; margin-left: 4px; }
.tag { font-size: 12px; font-weight: 700; padding: 1px 7px; border: 1.5px solid var(--ruling); border-radius: 99px; color: var(--pencil); vertical-align: 2px; white-space: nowrap; }

.flash { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 20px; background: var(--sheet); border-left: 4px solid var(--ink); box-shadow: var(--lift); }
.flash.err { border-left-color: var(--pen); color: var(--pen); }

/* ---------------- forms ---------------- */
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 16px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 12px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ruling); border-radius: var(--radius); }
input:hover, select:hover, textarea:hover { border-color: var(--pencil); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--ruling-soft); }
input:disabled { color: var(--pencil); background: var(--wash); }
textarea { resize: vertical; }
textarea.code { font: 14px/1.6 var(--mono); }
/* Ruled answer space, like an exam booklet */
textarea.lined { line-height: 28px; padding: 0 12px; background-image: linear-gradient(transparent 27px, var(--ruling-soft) 27px); background-size: 100% 28px; background-attachment: local; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
label.check { display: flex; gap: 10px; align-items: baseline; font-weight: 400; font-size: 16px; margin: 0 0 8px; cursor: pointer; }
label.check input { width: auto; margin: 0; accent-color: var(--ink); transform: translateY(2px); }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span { grid-column: 1 / -1; }
.form-grid .span2 { grid-column: span 2; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.actions.end { justify-content: flex-end; border-top: 1.5px solid var(--ruling); padding-top: 20px; margin-top: 8px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); border: 1.5px solid var(--ink); background: var(--ink); color: var(--sheet); font: 700 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ruling); }
.btn.ghost:hover { border-color: var(--ink); filter: none; }
button.quiet { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--pencil); cursor: pointer; text-decoration: underline; text-decoration-color: var(--ruling); text-underline-offset: 3px; }
button.quiet:hover { color: var(--ink); }
button.quiet.danger { color: var(--pen); }
.danger-zone { margin: 8px 0 0; }

/* ---------------- tables ---------------- */
.scroll { overflow-x: auto; }
table.ledger, table.statement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ruling); vertical-align: baseline; }
.ledger thead th { font-size: 14px; color: var(--pencil); font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.ledger tbody th { font-weight: 700; }
.ledger td.mark, .ledger th.mark { text-align: right; padding-right: 8px; }
.ledger td.mark .pen { font-size: 24px; }
.ledger .num { text-align: right; }
.ledger tr.editing td { background: var(--wash); }
.row-actions { white-space: nowrap; text-align: right; font-size: 14px; padding-left: 20px !important; }
.row-actions form { display: inline; margin-left: 12px; }

/* Results statement: the IB transcript, graded in red pen */
.statement th, .statement td { padding: 11px 0; border-bottom: 1px solid var(--ruling); text-align: left; vertical-align: middle; }
.statement thead th { font-size: 14px; color: var(--pencil); border-bottom: 1.5px solid var(--ink); padding-top: 0; }
.statement tbody th { font-weight: 700; font-size: 18px; }
.statement .level { width: 56px; font-weight: 700; color: var(--pencil); }
.statement .count { color: var(--pencil); font-size: 14px; }
.statement .mark { width: 64px; text-align: center; }
.statement td.mark .pen { font-size: 32px; }
.statement tfoot th { border: 0; padding-top: 16px; font-size: 16px; }
.statement tfoot th .pencil { display: block; font-weight: 400; font-size: 14px; }
.statement tfoot td { border: 0; padding-top: 12px; }
.statement .pen.total { font-size: 44px; }
.statement.compact tbody th { font-size: 16px; }
.statement.compact td.mark .pen { font-size: 26px; }
.statement.compact .count { display: none; }

/* ---------------- overview ---------------- */
.overview { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-bottom: 8px; }
.results > p.pencil { max-width: 52ch; font-size: 14px; }
.results > p:last-child { margin: 16px 0 0; }
.side .block:first-child > h2 { margin-top: 4px; }
.tests-mini a { display: grid; text-decoration: none; }
.tests-mini a:hover b { text-decoration: underline; text-decoration-color: var(--ruling); }
.tests-mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tests-mini .pencil { margin: 0; }
.tests-mini .result { white-space: nowrap; font-size: 14px; }
.tests-mini .result .pen { font-size: 24px; }
dl.tally { display: flex; gap: 28px; margin: 0 0 14px; }
dl.tally dt { font-size: 14px; color: var(--pencil); }
dl.tally dd { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.1; }
ol.outcomes { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 12px; max-width: 420px; }
ol.outcomes li { position: relative; border: 1.5px solid var(--ruling); border-radius: 4px; height: 44px; display: grid; place-items: end center; padding-bottom: 4px; font-size: 12px; color: var(--pencil); }
ol.outcomes li.met { border-color: var(--pencil); color: var(--ink); }
ol.outcomes .tick { position: absolute; top: 2px; left: 50%; translate: -50% 0; font-size: 22px; }
dl.pairs { margin: 0; }
dl.pairs div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ruling); }
dl.pairs dt { color: var(--pencil); }
dl.pairs dd { margin: 0; font-weight: 700; }

/* ---------------- grades / CAS ---------------- */
.grades-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 32px; align-items: start; }
.by-subject .statement .level { width: 44px; }
.cas-summary { display: grid; grid-template-columns: auto 1fr; gap: 12px 48px; align-items: start; margin-bottom: 28px; }
.cas-summary .cas-facts { grid-column: 1 / -1; margin: 0; }
.cas-ledger td.strand, .cas-ledger th.strand { width: 36px; text-align: center; padding-right: 0; }
.cas-ledger td.strand span { font-weight: 800; }
.cas-ledger tr.done th a, .cas-ledger tr.done td { color: var(--pencil); }
ul.entries { list-style: none; margin: 20px 0 0; padding: 0; }
ul.entries li { border-top: 1px solid var(--ruling); padding: 12px 0; }
.entry-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.entry-head form { margin-left: auto; }
ul.entries p { margin: 6px 0 0; }
fieldset.object { border-top: 1.5px solid var(--ruling); padding-top: 14px; }
.meter { height: 6px; border-radius: 3px; background: var(--ruling-soft); overflow: hidden; margin-top: -6px; }
.meter div { height: 100%; background: var(--ink); }
.meter-label { margin: 6px 0 16px; }

/* ---------------- notes ---------------- */
.toolbar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs { display: flex; gap: 4px; }
.tabs a { text-decoration: none; padding: 8px 14px; border-radius: var(--radius); color: var(--pencil); font-weight: 500; }
.tabs a[aria-current] { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: var(--lift); }
.search { display: flex; gap: 8px; }
.search input { margin: 0; width: 260px; }
.note-group { margin-bottom: 36px; }
.note-group > h2 { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.note-group > h2 .pencil { font-size: 14px; font-weight: 400; }
.note-group h3 { color: var(--pencil); font-weight: 700; font-size: 14px; margin: 18px 0 2px; }

.note-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.note-bar .crumbs { margin: 0; }
.sheet.note { padding: 48px 56px 56px; }
.note > h1 { max-width: 22ch; }
.note-meta { margin: 10px 0 32px; }

.md { font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
.note .md > * { max-width: 68ch; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.6em 0 .5em; }
.md h1 { font-size: 24px; }
.md h2 { font-size: 24px; }
.md h3 { font-size: 21px; }
.md h4 { font-size: 18px; }
.md > :first-child { margin-top: 0; }
.md p, .md ul, .md ol { margin: 0 0 .9em; }
.md li + li { margin-top: .25em; }
.md hr { border: 0; border-top: 1.5px solid var(--ruling); margin: 2em 0; }
.md img.embed { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--ruling); }
.md table { border-collapse: collapse; margin: 0 0 1.2em; font-size: 16px; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--ruling); padding: 8px 16px 8px 0; text-align: left; vertical-align: top; }
.md thead th { border-bottom: 1.5px solid var(--ink); }
.md pre { background: var(--wash); border-radius: var(--radius); padding: 14px 16px; overflow-x: auto; font-size: 14px; }
.md code { font-family: var(--mono); font-size: .85em; }
.md blockquote { margin: 0 0 1em; padding: 2px 0 2px 18px; border-left: 3px solid var(--ruling); color: var(--ink); }
.md blockquote.callout { background: var(--wash); border-left-color: var(--pencil); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; }
.md blockquote.callout > :last-child, .md blockquote.callout details > :last-child { margin-bottom: 0; }
.md .callout-title { display: block; font-weight: 700; margin-bottom: 6px; }
.md details summary { cursor: pointer; list-style: none; }
.md details summary::-webkit-details-marker { display: none; }
.md details summary .callout-title { display: inline; }
.md details summary::after { content: 'Show'; font-size: 14px; color: var(--pencil); margin-left: 10px; text-decoration: underline; text-decoration-color: var(--ruling); }
.md details[open] summary::after { content: 'Hide'; }
.md details[open] summary { margin-bottom: 8px; }
.md .callout-warning, .md .callout-caution, .md .callout-important, .md .callout-danger { border-left-color: var(--pen); }
.md .callout-tip, .md .callout-success, .md .callout-check, .md .callout-summary, .md .callout-abstract { border-left-color: var(--ink); }
.md span.math.display { display: block; overflow-x: auto; margin: .6em 0; }
.md pre.mermaid { background: transparent; text-align: center; }
.md a.wikilink { text-decoration-style: dotted; }
.missing { color: var(--pen); font-size: 14px; }

/* ---------------- practice tests ---------------- */
ul.papers { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 16px; }
.paper-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; gap: 24px; align-items: center; background: var(--sheet); box-shadow: var(--lift); border-radius: var(--radius); padding: 22px 28px; }
.paper-info h2 { margin: 2px 0 6px; }
.paper-info p { margin: 0 0 4px; max-width: 64ch; }
.paper-info > .pencil:first-child { font-size: 14px; font-weight: 700; }
.paper-score { display: grid; justify-items: center; text-align: center; }
.paper-score .pen { font-size: 40px; }

.exam-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 20px; justify-content: flex-end; padding: 10px 0; margin: -10px 0 14px; background: var(--desk); }
.exam-bar #saved { margin-right: auto; }
.clock b { font-size: 24px; font-weight: 800; margin-left: 4px; }
.clock.low b { color: var(--pen); }

.sheet.paper { padding: 0; }
.cover { padding: 36px 56px 28px; border-bottom: 1.5px solid var(--ink); }
.cover > .pencil:first-child { font-weight: 700; margin-bottom: 4px; }
.cover h1 { margin-bottom: 20px; }
dl.cover-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 16px; border: 1.5px solid var(--ruling); border-radius: 4px; width: fit-content; }
dl.cover-facts div { padding: 8px 18px; border-right: 1.5px solid var(--ruling); }
dl.cover-facts div:last-child { border-right: 0; }
dl.cover-facts dt { font-size: 12px; color: var(--pencil); }
dl.cover-facts dd { margin: 0; font-weight: 700; }
.instructions { font-size: 16px; max-width: 68ch; }
.instructions p:last-child { margin: 0; }

ol.questions { list-style: none; margin: 0; padding: 12px 0 8px; }
.question { display: grid; grid-template-columns: 56px minmax(0, 1fr) 72px; padding: 24px 0; border-bottom: 1px solid var(--ruling); }
.question:last-child { border-bottom: 0; }
.qn { font-weight: 800; font-size: 18px; text-align: right; padding-right: 16px; line-height: 1.6; }
.qbody { min-width: 0; }
.qprompt .md { font-size: 17px; }
.qprompt .md p:last-child { margin-bottom: 0; }
.qbody svg { max-width: 100%; height: auto; display: block; margin: 8px 0 12px; }
.qprompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-bottom: 14px; }
.qmarks { font-weight: 700; white-space: nowrap; line-height: 1.6; }
.choices { display: grid; gap: 8px; }
label.choice { display: flex; gap: 14px; align-items: center; font-weight: 400; font-size: 16px; margin: 0; padding: 10px 14px; border: 1.5px solid var(--ruling); border-radius: var(--radius); cursor: pointer; }
label.choice:hover { border-color: var(--pencil); }
label.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.letter { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--pencil); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--pencil); }
label.choice:has(input:checked) { border-color: var(--ink); background: var(--wash); }
label.choice:has(input:checked) .letter { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
label.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
label.answer-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 16px; margin: 0; }
label.answer-line input { width: 220px; margin: 0; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; padding: 6px 4px; font-size: 18px; background: transparent; }
label.answer-line input:focus { box-shadow: none; border-bottom-width: 2.5px; }
.unit { font-weight: 400; }

/* Marked script */
.total-box { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.big-mark { font-size: 56px; padding: 6px 22px 2px; border: 3px solid var(--pen); border-radius: 52% 46% 55% 44% / 50% 56% 44% 50%; transform: rotate(-5deg); }
.big-mark .out { font-size: 30px; margin-left: 4px; }
.margin { display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 2px; }
.margin .pen { font-size: 34px; }
.margin .pen.pending { opacity: .55; }
.margin .of { font-size: 12px; }
dl.answers { display: grid; gap: 8px; margin: 0 0 4px; padding: 12px 16px; background: var(--wash); border-radius: var(--radius); }
dl.answers div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; }
dl.answers dt { font-size: 14px; color: var(--pencil); }
dl.answers dd { margin: 0; }
.question.wrong dl.answers div:first-child dd { text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; }
.written-answer { font-size: 16px; }
.markscheme { margin-top: 14px; padding: 14px 18px; border: 1.5px dashed var(--pen); border-radius: var(--radius); }
.markscheme h3 { color: var(--pen); margin-bottom: 6px; }
.markscheme .md { font-size: 16px; }
.markscheme .md table { font-size: 14px; }
fieldset.selfmark { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
fieldset.selfmark legend { float: left; margin: 0 8px 0 0; }
fieldset.selfmark label { margin: 0; cursor: pointer; }
fieldset.selfmark input { position: absolute; opacity: 0; width: 1px; height: 1px; }
fieldset.selfmark span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ruling); font: 700 20px/1 var(--hand); color: var(--pencil); }
fieldset.selfmark label:hover span { border-color: var(--pen); }
fieldset.selfmark input:checked + span { border: 2.5px solid var(--pen); color: var(--pen); }
fieldset.selfmark input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
details.why { margin-top: 12px; }
details.why summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--pencil); text-decoration: underline; text-decoration-color: var(--ruling); text-underline-offset: 3px; }
details.why .md { font-size: 16px; margin-top: 8px; }
.marked-paper .actions.end { padding: 20px 56px 28px; }
.paper > .actions.end { padding: 20px 56px 28px; }

@media (prefers-reduced-motion: no-preference) {
  /* the one orchestrated moment: the examiner writes the total */
  .big-mark { animation: write .7s .15s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes write { from { opacity: 0; transform: rotate(-12deg) scale(1.25); } to { opacity: 1; transform: rotate(-5deg) scale(1); } }
}

/* ---------------- login / error ---------------- */
.login { width: min(400px, 100%); padding: 40px; margin: 0; }
.login h1 { font-size: 24px; margin-bottom: 20px; }
.login .btn { width: 100%; margin-top: 4px; }
.login .alt { margin: 20px 0 8px; font-size: 14px; }
.sheet.error h1 { font-size: 24px; margin-bottom: 10px; }

/* ---------------- small screens ---------------- */
@media (max-width: 960px) {
  .overview, .grades-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px 0; }
  .candidate { display: none; }
  .rail nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: 4px; padding-bottom: 8px; scrollbar-width: none; }
  .rail nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
  .rail nav a[aria-current] { border-bottom-color: var(--ink); }
  .rail-out { margin: 0 0 0 auto; }
  .desk { padding: 20px 16px 72px; }
  h1 { font-size: 30px; }
  .sheet { padding: 22px 18px; }
  .sheet.note { padding: 28px 20px 32px; }
  .cover { padding: 24px 18px 20px; }
  .question { grid-template-columns: 36px minmax(0, 1fr) 48px; }
  .qn { padding-right: 10px; font-size: 16px; }
  .marked-paper .actions.end, .paper > .actions.end { padding: 18px; }
  .paper-row { grid-template-columns: minmax(0, 1fr) auto; padding: 18px; }
  .paper-score { grid-column: 2; grid-row: 1; }
  .paper-go { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-grid .span2 { grid-column: 1 / -1; }
  .cas-summary { grid-template-columns: minmax(0, 1fr); }
  dl.answers div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .search input { width: 100%; }
  .search { flex: 1; }
  .md { font-size: 17px; }
  .exam-bar { gap: 12px; }
  .exam-bar #saved { display: none; }
}

/* ---------------- calendar: a planner page ---------------- */
.sync-line { margin: -8px 0 20px; }
.tabs + .sync-line { margin-top: 12px; }
ol.agenda { list-style: none; margin: 0; padding: 0; }
.agenda .week h2 { font-size: 18px; margin: 32px 0 8px; padding-bottom: 8px; border-bottom: 1.5px solid var(--ink); }
.agenda .week:first-child h2 { margin-top: 8px; }
.agenda .day { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ruling); }
.agenda .day.today { background: var(--sheet); box-shadow: var(--lift); border-radius: var(--radius); border-bottom-color: transparent; padding: 16px 20px 16px 16px; margin: 6px -20px 6px -16px; }
.date { display: grid; align-content: start; }
.date .dd { font-size: 36px; font-weight: 800; line-height: 1; }
.date .wd { color: var(--pencil); font-size: 14px; margin-top: 4px; }
.date .rel { font-size: 14px; font-weight: 700; margin-top: 2px; }
.nothing { margin: 8px 0 0; }
ul.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.item { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; }
.item .when { font-weight: 700; font-variant-numeric: tabular-nums; padding-top: 1px; }
.item .when span { display: block; color: var(--pencil); font-weight: 400; font-size: 14px; }
.item .when span::before { content: 'to '; }
.item-title { font-weight: 700; }
.item-title a { text-decoration-color: var(--ruling); }
.item.mb .when { color: var(--ink); }
.item.test .item-title { font-size: 18px; }
.item.test .item-title::after { content: 'Test'; margin-left: 8px; vertical-align: 2px; font-size: 12px; font-weight: 800; color: var(--sheet); background: var(--ink); padding: 2px 8px; border-radius: 99px; }
.item.study .item-title { font-weight: 500; }
.item.study.done .item-title { text-decoration: line-through; text-decoration-color: var(--pencil); color: var(--pencil); }
form.tick { margin: 0; }
form.tick button { background: none; border: 0; padding: 2px 0 0; cursor: pointer; }
form.tick .box { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--pencil); border-radius: 4px; font: 700 18px/1 var(--hand); color: var(--pen); }
form.tick button:hover .box { border-color: var(--ink); }
.item.done form.tick .box { border-color: var(--ruling); }
details.plan { margin-top: 4px; }
details.plan summary { cursor: pointer; font-size: 14px; color: var(--pencil); text-decoration: underline; text-decoration-color: var(--ruling); text-underline-offset: 3px; }
details.plan .md { font-size: 16px; margin-top: 8px; max-width: 70ch; }
details.plan .md ul { padding-left: 20px; }
.sheet.overdue { border-left: 4px solid var(--pen); }
.sheet.overdue h2 { color: var(--pen); }
.task .cover-facts { margin-bottom: 20px; }
.task h2 { font-size: 18px; margin: 28px 0 8px; }
.mb-desc { font-size: 17px; }
ul.files li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.soon ul.plain-sub { list-style: none; padding: 0; margin: 4px 0 0; font-size: 15px; }
.soon ul.plain-sub li { padding: 2px 0; }
.soon ul.plain-sub li.strong { font-weight: 700; }
.soon ul.plain-sub li.done { text-decoration: line-through; }
@media (max-width: 820px) {
  .agenda .day { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .agenda .day.today { margin: 6px 0; padding: 14px; }
  .date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .date .dd { font-size: 28px; }
  .item { grid-template-columns: 30px 52px minmax(0, 1fr); gap: 8px; }
}