/* ---------------------------------------------------------------
   2025 KS2 Paper 1 — arithmetic
   Visual language borrowed from the printed test booklet:
   STA blue, squared working grid, outlined answer boxes.
   --------------------------------------------------------------- */

/* The light palette is the paper's, and the paper keeps it whatever the rest
   of the page is doing (docs/adr/0009): the question card is where it is set
   again, so dark mode can change everything around a question and nothing in
   it. `color` is set with it because it is inherited as a value, not a name —
   left alone, the card would inherit the page's pale ink onto its white. */
:root, .qcard {
  --blue:        #0069b4;
  --blue-dark:   #00457c;
  --blue-tint:   #cfd9ec;
  --blue-pale:   #eef3fa;
  --ink:         #1b1f23;
  --ink-soft:    #5a6673;
  --line:        #c9d1d9;
  --grid:        #dfe4ea;
  --page:        #f4f6f9;
  --card:        #ffffff;
  /* What a button or a field is filled with, which is not always a card. */
  --field:       #ffffff;
  --rule:        #eef1f4;
  --good:        #17803d;
  --good-pale:   #e8f5ec;
  --bad:         #c0362c;
  --bad-pale:    #fdeceb;
  --warn:        #b45309;
  --warn-pale:   #fff4e5;
  --warn-line:   #f59e0b;
  --focus:       #8ab4e8;
  /* Text set on a blue fill: white on the light blue, dark on the dark one. */
  --on-blue:     #ffffff;
  --row-wrong:   #fffafa;
  --row-part:    #fffdf5;
  --backdrop:    rgba(16, 24, 40, .45);
  --radius:      10px;
  --shadow:      0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  color-scheme: light;
}
.qcard { color: var(--ink); }

/* Dark, around the paper. Chosen on the page, or taken from the device when
   nothing has been chosen — the same values either way, so they are written
   once and applied from two places. */
:root[data-theme="dark"] {
  --blue:        #3d8fd8;
  --blue-dark:   #8cc2f0;
  --blue-tint:   #2b4a66;
  --blue-pale:   #152230;
  --ink:         #e6e9ed;
  --ink-soft:    #9fabb7;
  --line:        #36424f;
  --grid:        #2a3540;
  --page:        #0f1419;
  --card:        #182029;
  --field:       #1f2933;
  --rule:        #26313c;
  --good:        #5ccb87;
  --good-pale:   #16301f;
  --bad:         #f2877c;
  --bad-pale:    #3a1f1d;
  --warn:        #f2aa55;
  --warn-pale:   #36280f;
  --warn-line:   #b9771f;
  --focus:       #4f8fd0;
  --on-blue:     #0b1016;
  --row-wrong:   #251b1c;
  --row-part:    #25221a;
  --backdrop:    rgba(0, 0, 0, .6);
  --shadow:      0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `display: grid` on #test-view would otherwise beat the UA rule for [hidden] */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- top bar ---------------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
  padding: 14px 28px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.brand .sep { color: var(--line); font-weight: 400; }
/* The key stage badge in the top-left of every page. Named for what it is, not
   for key stage 2, which is all it used to be. */
.keystage {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-blue); background: var(--blue); padding: 4px 9px; border-radius: 999px;
}
.year { font-size: 13px; color: var(--ink-soft); }

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

.timer {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--blue-pale);
}
.timer-value { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.timer.is-low   .timer-value { color: var(--warn); }
.timer.is-out   .timer-value { color: var(--bad); }
.timer-btn {
  border: 1px solid var(--line); background: var(--field); border-radius: 999px;
  font-size: 12px; padding: 3px 11px; cursor: pointer; color: var(--ink-soft);
}
.timer-btn:hover { border-color: var(--blue); color: var(--blue); }

.btn {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--blue); color: var(--on-blue); }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: var(--field); color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { color: var(--blue); border-color: var(--blue); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.progressbar { height: 3px; background: var(--blue-tint); }
.progressbar-fill { height: 100%; width: 0; background: var(--blue); transition: width .25s ease; }

/* ---------------- layout ---------------- */

main { max-width: 1180px; margin: 0 auto; padding: 28px; }

#test-view { display: grid; grid-template-columns: minmax(0,1fr) 232px; gap: 28px; align-items: start; }

.stage-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; font-size: 13px; color: var(--ink-soft);
}
.counter b { color: var(--ink); font-size: 15px; }

/* ---------------- question card ---------------- */

.qcard {
  display: grid; grid-template-columns: 62px minmax(0,1fr) 74px;
  background: var(--card); border: 2px solid var(--blue-dark); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; min-height: 300px;
}

.qcard-number {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 26px; font-size: 26px; font-weight: 700; color: var(--blue);
  border-right: 2px solid var(--blue-dark);
}

.qcard-body { position: relative; padding: 26px 26px 0; display: flex; flex-direction: column; }

.qcard-prompt {
  font-size: 30px; line-height: 1.35; min-height: 52px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
}

/* squared working area, like the booklet */
:root {
  /* One square, and the type that sits in it. Both are read by app.js, which
     measures the character advance and spaces to the grid. */
  --cell: 34px;
  /* The squares do the spacing, so the digits do not need a font that does it
     too - and every system monospace draws a zero with a slash through it,
     which is not what the paper prints. This is the paper's own type. */
  --working-font: 21px/34px "Helvetica Neue", Arial, system-ui, sans-serif;
}

.qcard-grid {
  position: absolute; inset: 78px 0 0 0; z-index: 0;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  pointer-events: none;
}

/* Somewhere to work the answer out, on the squares the paper prints.
   A grid of cells rather than a text box: a character belongs to a square, and
   the cursor has to be able to go to a square nobody has written in yet. */
.working {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  /* Clear of the question. A stacked fraction hangs lower than a line of text,
     and its half sat on the top row of squares. */
  margin-top: 10px;
}

.squares {
  position: relative;
  flex: 1; box-sizing: border-box; width: 100%;
  min-height: calc(var(--cell) * 5);
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), var(--cell));
  grid-auto-rows: var(--cell);
  align-content: start;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  outline: 0;
  cursor: text;
}
.squares .cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font: var(--working-font);
  color: var(--ink);
  user-select: none;
}
/* The ten you carried, written where a pencil would put it: small, tucked into
   the corner of the square, clear of the digit it belongs to. */
.squares .cell .little {
  position: absolute; top: 1px; left: 3px;
  font-size: 12px; line-height: 13px; font-weight: 700;
  color: var(--blue-dark);
}
/* A stroke through the digit, drawn the way a pencil draws it: one slanted
   line across the middle of the square, not a gradient band whose angle is at
   the mercy of how tall the square happens to be. */
.squares .cell .cross {
  position: absolute; left: 4px; right: 4px; top: calc(50% - 1px);
  height: 2px; border-radius: 1px;
  background: var(--ink-soft);
  transform: rotate(-28deg);
  pointer-events: none;
}
.squares .cell .digit { position: relative; }
/* The cursor is a square, because that is what you are about to write in —
   and the corner of one when a little number is what will land there. */
.squares .cell.is-cursor { box-shadow: inset 0 0 0 2px var(--blue); border-radius: 2px; }
.squares:focus .cell.is-cursor { background: rgba(0, 105, 180, .10); }
.squares .cell.is-cursor.is-small { box-shadow: none; }
.squares .cell.is-cursor.is-small::before {
  content: ''; position: absolute; left: 1px; top: 0; width: 15px; height: 15px;
  border: 2px solid var(--blue); border-radius: 2px;
}
.squares:focus .cell.is-cursor.is-small { background: none; }
.squares:focus .cell.is-cursor.is-small::before { background: rgba(0, 105, 180, .12); }
.squares[aria-readonly='true'] .cell { color: var(--ink-soft); }

/* The strip under the squares. Its height is fixed whatever is in it, so the
   squares do not jump when the reminder appears or the Clear button arrives. */
.squares-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  margin: 3px 0 0; min-height: 22px;
}
/* The reminder is only wanted while somebody is writing. */
.squares-hint {
  flex: 1; margin: 0;
  font-size: 11px; color: var(--ink-soft);
  visibility: hidden;
}
.working:focus-within .squares-hint { visibility: visible; }
/* Freehand, over the squares and under the cursor: a bus-stop bracket, a number
   line, an arrow from one column to the next. It belongs to no square, so it is
   kept in pixels down the grid, and a square is always --cell wide. */
.squares .ink {
  position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible;
}
.squares .ink polyline {
  fill: none; stroke: var(--ink); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.squares.is-pen { cursor: crosshair; touch-action: none; }
/* With the pen down nothing is being written in a square, so nothing in one
   should be answering the mouse. */
.squares.is-pen .cell { pointer-events: none; }
.squares-tool:disabled { opacity: .45; cursor: default; }
.squares-tool:disabled:hover { border-color: var(--line); color: var(--ink-soft); }

/* The two marks exchanging needs, offered as things you can see and press. */
.squares-tool {
  flex: 0 0 auto;
  font: inherit; font-size: 11px; line-height: 1;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.squares-tool:hover { border-color: var(--blue); color: var(--blue-dark); }
/* A ring set off from the button, not a second border: the browser's own focus
   style is a blue edge, which is exactly what "on" looks like. */
.squares-tool:focus-visible, .squares-clear:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.squares-tool.is-on {
  border-color: var(--blue); background: var(--blue-pale);
  color: var(--blue-dark); font-weight: 700;
}
.squares-clear {
  flex: 0 0 auto;
  font: inherit; font-size: 11px; line-height: 1;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.squares-clear:hover { border-color: var(--ink-soft); color: var(--ink); }
/* Asked, not done: the second click is the one that clears. */
.squares-clear.is-armed {
  border-color: var(--bad); background: var(--bad-pale); color: var(--bad); font-weight: 700;
}
.squares-hint kbd {
  font: inherit; font-weight: 700;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; background: var(--card); color: var(--ink);
}

/* Where the paper prints a method box, the label sits in the margin as it does
   on the page; the squares are the same squares. */
.working.is-method { padding-left: 74px; }
.working-label {
  position: absolute; left: 0; top: 6px; width: 66px;
  font-size: 12px; font-weight: 700; line-height: 1.3; text-align: right;
  color: var(--blue-dark); text-transform: uppercase; letter-spacing: .04em;
}

.qcard-answer {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; align-items: flex-end;
  padding: 14px 0 26px;
}

/* A number sentence with boxes in it, set the size the paper sets it: the
   sentence is the question, so it is read at the question's size and the boxes
   sit in the line rather than under it. */
.sentence { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* One statement of it. The paper sets each on its own line, and so does this. */
.sentence-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 10px; font-size: 30px; line-height: 1.2;
}
.sentence-said { color: var(--ink); }
.sentence-box {
  /* The width is set per question, from the answer the box has to hold; this is
     the floor, which is the square box a single digit has always had. */
  width: 68px; min-width: 68px; height: 58px; box-sizing: border-box;
  font: inherit; font-size: 30px; text-align: center;
  border: 3px solid var(--blue); border-radius: 4px;
  background: #fff; color: var(--ink);
}
.sentence-box:focus { outline: 3px solid var(--blue-tint); outline-offset: 1px; }
/* A box the paper offers symbols for. They sit together as one box, so the
   sentence still reads as a sentence with a space in it. */
/* A box the paper fills with tally marks: the marks are drawn, and the two
   buttons count them up and down, so the answer is still a number. */
.sentence-tally {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 58px; padding: 4px 10px; box-sizing: border-box;
  border: 3px solid var(--blue); border-radius: 4px; background: #fff;
}
.tally-marks { display: inline-flex; gap: 10px; min-width: 40px; }
.tally-five { position: relative; display: inline-flex; gap: 5px; }
.tally-mark { display: block; width: 3px; height: 30px; background: var(--ink); }
.tally-mark.is-across {
  position: absolute; left: -2px; top: 13px; width: 34px; height: 3px;
  transform: rotate(-20deg); transform-origin: left center;
}
.tally-step {
  width: 34px; height: 34px; font: inherit; font-size: 22px; line-height: 1;
  border: 2px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink);
  cursor: pointer;
}
.tally-step:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-dark); }
.tally-step:disabled { opacity: 0.4; cursor: default; }
.sentence-tally.is-correct { border-color: var(--good); background: var(--good-pale); }
.sentence-tally.is-wrong { border-color: var(--bad); background: var(--bad-pale); }
.sentence-pick { display: flex; flex-wrap: wrap; gap: 3px; }
.sentence-symbol {
  width: 44px; height: 58px; box-sizing: border-box;
  font: inherit; font-size: 26px; line-height: 1;
  border: 3px solid var(--line); border-radius: 4px;
  background: #fff; color: var(--ink-soft); cursor: pointer;
}
/* A box the paper offers words for rather than symbols: "during which month?"
   is answered from the nine the graph names, and a button sized for a < has
   room for "Jan" and clips "September". A word sizes to the word. */
.sentence-symbol.is-word { width: auto; min-width: 44px; padding: 0 12px; font-size: 18px; height: 46px; }
.sentence-symbol:hover:not(:disabled):not(.is-on) { border-color: var(--blue); color: var(--blue-dark); }
.sentence-symbol.is-on { border-color: var(--blue); background: var(--blue-pale); color: var(--ink); font-weight: 700; }
.sentence-symbol:disabled { cursor: default; }
.sentence-symbol:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.sentence-symbol.is-on.is-correct { border-color: var(--good); background: var(--good-pale); }
.sentence-symbol.is-on.is-wrong { border-color: var(--bad); background: var(--bad-pale); }
@media (max-width: 900px) {
  .sentence-symbol { width: 38px; height: 48px; font-size: 22px; }
  .sentence-symbol.is-word { width: auto; padding: 0 9px; font-size: 16px; height: 42px; }
}
.sentence-box.is-correct { border-color: var(--good); background: var(--good-pale); }
.sentence-box.is-wrong { border-color: var(--bad); background: var(--bad-pale); }

@media (max-width: 900px) {
  .sentence { font-size: 24px; }
  .sentence-box { width: 56px; height: 48px; font-size: 24px; }
}

/* A block graph, drawn from its columns rather than laid over a picture of one.
   Every cell is a button, so it can be reached with a keyboard and says what it
   is when read aloud. */
.blocks { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.blocks-grid {
  display: grid;
  grid-template-columns: 28px repeat(var(--cols, 4), 62px);
  gap: 1px;
  align-items: stretch;
}
.blocks-tick {
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; font-size: 15px; color: var(--ink-soft);
}
.blocks-cell {
  height: 30px; padding: 0;
  border: 1px solid var(--line); background: #fff;
  cursor: pointer;
}
.blocks-cell:hover:not(:disabled):not(.is-on) { background: var(--blue-pale); }
.blocks-cell.is-on { background: var(--blue); border-color: var(--blue-dark); }
/* A column the paper drew for the child is shown in a paler ink, and only as
   high as it was drawn — colouring the whole column would say the graph is
   already at nine. */
.blocks-cell.is-given.is-on { background: var(--blue-tint); border-color: var(--blue-tint); }
.blocks-cell:disabled { cursor: default; }
.blocks-cell:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -2px; }
.blocks-name {
  font-size: 14px; text-align: center; padding-top: 6px;
  overflow-wrap: anywhere;
}
/* Lying down: the label sits beside its line rather than under its column. */
.blocks.is-across .blocks-grid { grid-template-columns: auto repeat(var(--cols, 4), 42px); }
.blocks-name.is-side {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px 0 0; font-weight: 700; white-space: nowrap;
}
.blocks.is-across .blocks-cell { height: 42px; }
.blocks-unit { margin: 2px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.blocks.is-correct .blocks-cell.is-on:not(.is-given) { background: var(--good); border-color: var(--good); }
.blocks.is-wrong   .blocks-cell.is-on:not(.is-given) { background: var(--bad); border-color: var(--bad); }

/* A shape cut by lines drawn between dots. The dots are the only places a line
   can start or end, which is narrower than a pencil and is what makes every line
   a child can draw one that can be marked. */
.divide { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.divide-art { width: 260px; height: auto; overflow: visible; }
.divide-shape { fill: #fff; stroke: var(--ink); stroke-width: .06; }
.divide-line { stroke: var(--blue); stroke-width: .07; stroke-linecap: round; }
.divide-dot { fill: var(--ink-soft); cursor: pointer; }
.divide-dot:hover { fill: var(--blue); r: .22; }
.divide-dot.is-picked { fill: var(--blue); r: .26; }
.divide-dot:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.divide-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.divide.is-correct .divide-line { stroke: var(--good); }
.divide.is-wrong .divide-line { stroke: var(--bad); }

/* A rectangle drawn by pressing the square its far corner is in. */
.rect { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rect-grid { display: grid; grid-template-columns: repeat(var(--cols, 10), 30px); gap: 0; }
.rect-cell {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.rect-cell:hover:not(:disabled):not(.is-on) { background: var(--blue-pale); }
.rect-cell.is-on { background: var(--blue-tint); border-color: var(--blue); }
.rect-cell:disabled { cursor: default; }
.rect-cell:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -2px; }
.rect-said { margin: 0; font-size: 14px; color: var(--ink-soft); }
.rect.is-correct .rect-cell.is-on { background: var(--good-pale); border-color: var(--good); }
.rect.is-wrong .rect-cell.is-on { background: var(--bad-pale); border-color: var(--bad); }

/* Shapes already divided into equal parts. The parts are equal, so the row says
   how many there are and how many are shaded, which is the whole question. */
.parts { display: flex; flex-direction: column; gap: 10px; }
.parts-row { display: flex; align-items: center; gap: 12px; }
.parts-label { min-width: 110px; font-size: 15px; font-weight: 700; }
.parts-strip { display: flex; gap: 2px; }
.parts-cell {
  width: 46px; height: 46px; padding: 0;
  border: 2px solid var(--ink); background: #fff; cursor: pointer;
}
.parts-cell:hover:not(:disabled):not(.is-on) { background: var(--blue-pale); }
.parts-cell.is-on { background: var(--ink-soft); }
.parts-cell.is-given { background: var(--blue-tint); border-color: var(--blue-tint); }
.parts-cell:disabled { cursor: default; }
.parts-cell:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.parts-count { font-size: 14px; color: var(--ink-soft); }
.parts.is-correct .parts-cell.is-on:not(.is-given) { background: var(--good); border-color: var(--good); }
.parts.is-wrong   .parts-cell.is-on:not(.is-given) { background: var(--bad); border-color: var(--bad); }

/* A shape pattern continued by shading a half. The halves are buttons, so the
   pattern is continued by choosing rather than by drawing. */
.shade { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.shade-shape {
  position: relative; width: 54px; height: 54px;
  border: 2px solid var(--ink); background: #fff;
}
.shade-shape.is-blank { border-color: var(--blue); }
.shade-half {
  position: absolute; inset: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.shade-half:disabled { cursor: default; }
/* The square is split corner to corner, so each half is a triangle. */
.shade-half.is-upper { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.shade-half.is-lower { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.shade-half.is-on { background: var(--ink-soft); }
.shade-half:hover:not(:disabled):not(.is-on) { background: var(--blue-pale); }
.shade-half:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: -2px; }
.shade-shape::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom left, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
}
.shade.is-correct .shade-half.is-on { background: var(--good); }
.shade.is-wrong   .shade-half.is-on { background: var(--bad); }

/* Waiting on the pupil's own marking. Not right, not wrong, and it must not
   look like either: the answer in the box has not been looked at yet. */
.is-unmarked {
  border-color: var(--blue) !important;
  background: var(--blue-pale) !important;
  color: var(--ink) !important;
}
.pip.is-unmarked {
  border-color: var(--blue); background: var(--blue-pale); color: var(--blue-dark);
  font-weight: 700;
}

.qcard-marks {
  border-left: 2px solid var(--blue-dark); background: var(--blue-tint);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 6px; padding-bottom: 26px; font-size: 12px; font-weight: 700; color: var(--blue-dark);
}
.marks-box { width: 38px; height: 38px; background: #fff; border: 2px solid var(--blue-dark); }

/* the answer input, drawn like the printed answer box */
.answer-box {
  font: inherit; font-size: 30px; text-align: center;
  width: 220px; height: 62px; padding: 0 10px;
  border: 3px solid var(--blue); border-radius: 4px; background: #fff; color: var(--ink);
}
.answer-box:focus { outline: none; border-color: var(--blue-dark); box-shadow: 0 0 0 4px #cfe3f7; }
.answer-box.inline { width: 175px; height: 54px; font-size: 27px; margin: 0 8px; vertical-align: middle; }
.answer-box.is-correct { border-color: var(--good); background: var(--good-pale); }
.answer-box.is-wrong   { border-color: var(--bad);  background: var(--bad-pale); }

/* fractions and mixed numbers */
.frac {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; margin: 0 .18em; font-size: .74em; line-height: 1.08;
}
.frac .n { border-bottom: 2px solid currentColor; padding: 0 .25em; }
.frac .d { padding: 0 .25em; }
.mixed { display: inline-flex; align-items: center; }
.mixed .frac { margin-left: .1em; }

/* formal written methods (long multiplication / division) */
.formal { font-size: 30px; letter-spacing: .32em; font-variant-numeric: tabular-nums; }

.longmult { display: inline-block; }
.longmult .row { display: flex; justify-content: flex-end; padding-right: .1em; }
.longmult .op { margin-right: auto; padding-right: .6em; letter-spacing: 0; }
.longmult .rule { border-bottom: 2px solid var(--ink); margin-top: 4px; }

.longdiv { display: inline-flex; align-items: stretch; }
.longdiv .dividend { border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); padding: 4px 0 0 .38em; }

.method {
  position: relative; z-index: 1; margin-top: 4px;
  display: flex; align-items: flex-start; gap: 12px;
}
.method label { font-size: 12px; font-weight: 700; color: var(--blue-dark); text-transform: uppercase; letter-spacing: .04em; padding-top: 8px; }
/* The method box is the same squared area, framed and labelled as the paper
   frames it. Its type comes from .squares, so nothing here may set a font. */
.method textarea:focus { outline: none; border-color: var(--blue); }

.hint { min-height: 22px; margin: 12px 2px 0; font-size: 14px; color: var(--ink-soft); }
.hint.is-error { color: var(--bad); }

.qnav { display: flex; justify-content: space-between; margin-top: 18px; }
.btn-nav { background: var(--field); border-color: var(--line); color: var(--ink); }
.btn-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.btn-nav:disabled { opacity: .4; cursor: default; }
.btn-next { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.btn-next:hover:not(:disabled) { background: var(--blue-dark); color: var(--on-blue); }

/* ---------------- question palette ---------------- */

.palette {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); position: sticky; top: 20px;
}
.palette h2 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

.pip {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: var(--field);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.pip:hover { border-color: var(--blue); color: var(--blue); }
.pip.is-answered { background: var(--blue-pale); border-color: var(--blue); color: var(--blue-dark); }
.pip.is-current  { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.pip.is-correct  { background: var(--good-pale); border-color: var(--good); color: var(--good); }
.pip.is-wrong    { background: var(--bad-pale);  border-color: var(--bad);  color: var(--bad); }
.pip .two { font-size: 9px; position: absolute; }

.legend { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); display: grid; gap: 6px; }
.legend > div { display: flex; align-items: center; gap: 8px; }
.legend dd { margin: 0; }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.swatch-done { background: var(--blue-pale); border-color: var(--blue); }
.swatch-todo { background: var(--field); }
.swatch-current { background: var(--blue); border-color: var(--blue); }
.note { font-size: 12px; color: var(--ink-soft); margin: 14px 0 0; }

/* ---------------- results ---------------- */

.score-hero {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; box-shadow: var(--shadow); margin-bottom: 22px;
}
.score-ring {
  width: 132px; height: 132px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--blue) var(--pct, 0%), var(--blue-tint) 0);
  position: relative;
}
.score-ring::before { content: ""; position: absolute; inset: 11px; background: var(--card); border-radius: 50%; }
.score-num { position: relative; font-size: 38px; font-weight: 700; line-height: 1; color: var(--blue-dark); }
.score-den { position: relative; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.score-meta h2 { margin: 0 0 6px; font-size: 22px; }
.score-meta p  { margin: 0 0 16px; color: var(--ink-soft); }
.score-actions { display: flex; gap: 10px; }

.marksheet {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); font-size: 15px;
}
.marksheet th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); padding: 11px 16px; background: var(--blue-pale);
  border-bottom: 1px solid var(--line);
}
.marksheet td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.marksheet tr:last-child td { border-bottom: 0; }
.marksheet tr.row-wrong { background: var(--row-wrong); }
.marksheet .q-col { font-weight: 700; color: var(--blue); width: 46px; }
.marksheet .prompt-col { font-size: 19px; }
.marksheet .prompt-col .frac { font-size: .68em; }
.ta-r { text-align: right; }
.given { font-weight: 600; font-variant-numeric: tabular-nums; }
.given.ok   { color: var(--good); }
.given.no   { color: var(--bad); }
.given.blank { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.mark-pill {
  display: inline-block; min-width: 44px; text-align: center;
  font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.mark-pill.ok { background: var(--good-pale); color: var(--good); }
.mark-pill.no { background: var(--bad-pale);  color: var(--bad); }

/* ---------------- footer ---------------- */

.sitefoot {
  max-width: 1180px; margin: 0 auto; padding: 8px 28px 40px;
  font-size: 12px; color: var(--ink-soft);
}
/* The printed original, offered at the foot of every page. */
.sources { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.sitting-row-sources { margin: 10px 2px 0; font-size: 13px; color: var(--ink-soft); }
.sitting-row-sources a { color: var(--blue-dark); }
.sources a { color: var(--blue-dark); }

.sitefoot p { margin: 4px 0; }
.sitefoot a { color: var(--blue); }

/* Light, dark, or whatever the device says. Quiet, because it is a setting. */
.theme-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 10px !important; }
.theme-switch-label { margin-right: 4px; }
.theme-switch button {
  font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  color: var(--ink-soft); background: var(--field); border: 1px solid var(--line); border-radius: 999px;
}
.theme-switch button:hover { color: var(--blue); border-color: var(--blue); }
.theme-switch button[aria-pressed="true"] { color: var(--ink); border-color: var(--blue); background: var(--blue-pale); font-weight: 600; }
.theme-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------- feedback ---------------- */

/* Links in look, buttons in behaviour: they open something rather than go somewhere. */
.feedback-foot, .feedback-part {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px;
}
.feedback-foot { font-size: 13px; }
.feedback-part { display: block; margin: 8px 2px 0; font-size: 13px; color: var(--ink-soft); }
.feedback-part:hover, .feedback-foot:hover { color: var(--blue); }
.feedback-foot:focus-visible, .feedback-part:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.marksheet .feedback-part { margin: 4px 0 0; font-size: 12px; }

.feedback {
  width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  border: 0; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  color: var(--ink);
}
.feedback::backdrop { background: var(--backdrop); }
.feedback h2 { margin: 0 0 6px; font-size: 20px; }
.feedback-about { margin: 0 0 14px; font-size: 14px; color: var(--ink-soft); }
.feedback-kinds { border: 0; margin: 0 0 14px; padding: 0; }
.feedback-kinds legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.feedback-kind { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 15px; cursor: pointer; }
.feedback-field { display: grid; gap: 4px; margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.feedback-field small { font-weight: 400; color: var(--ink-soft); }
.feedback-message, .feedback-email {
  font: inherit; font-weight: 400; width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink);
}
.feedback-message { resize: vertical; min-height: 110px; }
.feedback-message:focus, .feedback-email:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue); }
/* Off the screen rather than hidden, which a script can see through. */
.feedback-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-status { min-height: 20px; margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.feedback-status.is-error { color: var(--bad); }
.feedback-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
kbd {
  font: inherit; font-size: 11px; background: var(--field); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px;
}

@media (max-width: 900px) {
  #test-view { grid-template-columns: 1fr; }
  .palette { position: static; }
  .qcard { grid-template-columns: 48px minmax(0,1fr) 62px; }
  .qcard-prompt { font-size: 24px; }
  .answer-box { width: 170px; font-size: 24px; }
  main, .sitefoot { padding-left: 16px; padding-right: 16px; }
}

.blank { display: inline-block; color: var(--blue); }

/* ===============================================================
   Home page
   =============================================================== */

.home .topbar { justify-content: flex-start; }
.homemain { max-width: 900px; margin: 0 auto; padding: 40px 28px 8px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; max-width: 60ch; }

/* What the site is for, in six short things. Soft: a list, not a sales pitch. */
.about { margin: 0 0 28px; }
.about-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 10px 22px;
  margin: 0; padding: 0; list-style: none;
}
.about-list li { font-size: 14px; line-height: 1.5; color: var(--ink-soft); padding-left: 14px; border-left: 3px solid var(--blue-tint); }
.about-list b { display: block; font-size: 15px; color: var(--ink); }

.papercards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.papercard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--blue);
  border-radius: var(--radius); padding: 22px 24px 20px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.papercard:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(16,24,40,.07), 0 16px 32px rgba(16,24,40,.09); }
.papercard-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue);
}
.papercard h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.papercard > p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; flex: 1; }
.papercard-facts { display: flex; gap: 26px; margin: 6px 0 0; }
.papercard-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.papercard-facts dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.papercard-go { margin-top: 6px; font-weight: 600; color: var(--blue); font-size: 15px; }

.homenotes { margin: 40px 0 0; }
.homenotes h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin: 0 0 10px; }
.homenotes ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 70ch; }
.homenotes b { color: var(--ink); }
/* On the home page the notes fold away with everything else. */
details.homenotes { margin-top: 24px; }
details.homenotes summary {
  cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-soft); padding: 6px 0;
}
details.homenotes summary:hover { color: var(--blue); }
details.homenotes[open] summary { margin-bottom: 10px; }

a.keystage { text-decoration: none; }
a.keystage:hover { background: var(--blue-dark); }

/* ===============================================================
   Reasoning card (Paper 2)
   =============================================================== */

.qcard.reasoning { grid-template-columns: 62px minmax(0, 1fr); min-height: 0; }
.qcard.reasoning .qcard-body { padding: 26px 30px 28px; }

.stem { font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.stem.note { color: var(--ink); }
.stem .frac { font-size: .8em; }

.ask {
  display: inline-block; background: var(--blue-tint); color: var(--ink);
  font-size: 17px; line-height: 1.5; padding: 9px 20px; border-radius: 999px; margin: 4px 0 16px;
}
.ask .frac { font-size: .78em; vertical-align: -.35em; }

.part + .part { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--line); }
.part-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.part-marks {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--blue-dark);
}
.answer-slot { flex: 1; display: flex; justify-content: flex-end; }
.answer-slot.muted { justify-content: flex-start; color: var(--ink-soft); font-size: 14px; font-style: italic; }

/* figures */
.figure { margin: 4px 0 20px; }
.figure-scroll { overflow-x: auto; }
.figure-img { position: relative; }
.figure-img img { display: block; width: 100%; height: auto; }
/* A diagram redrawn from the paper's own line work rather than cropped from it. */
.figure-svg svg { display: block; width: 100%; height: auto; max-width: 100%; }
.figure-svg { max-width: 100%; }

/* A drawing offered as an option rather than shown above the question. */
.optionsvg svg { display: block; width: 100%; height: auto; max-width: 100%; }
.optionsvg { max-width: 100%; }

.numcard {
  display: inline-block; border: 2px solid var(--ink); padding: 10px 26px;
  font-size: 30px; letter-spacing: .01em;
}

.datatable { border-collapse: collapse; font-size: 15px; }
.datatable th, .datatable td { border: 1px solid var(--ink); padding: 8px 12px; text-align: center; }
.datatable thead th { background: var(--blue-tint); font-weight: 700; line-height: 1.3; }
.datatable tbody th { text-align: left; font-weight: 400; }

.overlay-box {
  position: absolute; font-size: 20px; text-align: center; padding: 0;
  border-width: 2px; border-radius: 2px; background: rgba(255,255,255,.96);
}
/* A box ruled into a table fills its cell rather than floating on a drawing, so
   a row of them is as wide as its column rather than as wide as an answer box. */
.answer-box.overlay-box-cell { position: static; width: 100%; min-width: 56px; height: 38px; }
/* A grid of cells the paper rules without heading. */
.datatable-plain td { font-size: 17px; }

/* answer box with a unit printed inside, as on the paper */
.answer-wrap {
  display: inline-flex; align-items: center; gap: 0;
  border: 3px solid var(--blue); border-radius: 4px; background: #fff; overflow: hidden;
}
.answer-wrap:focus-within { border-color: var(--blue-dark); box-shadow: 0 0 0 4px #cfe3f7; }
.answer-wrap .answer-box { border: 0; border-radius: 0; height: 54px; }
.answer-wrap .answer-box:focus { box-shadow: none; }
.answer-wrap .unit { font-size: 18px; font-weight: 700; padding: 0 14px 0 4px; color: var(--ink); }
.answer-wrap .unit.prefix { padding: 0 4px 0 14px; order: -1; }
.answer-box.narrow { width: 110px; height: 50px; font-size: 22px; }
.answer-box.wide { width: 280px; }

/* tick lists */
.ticklist { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tickrow {
  display: flex; align-items: center; gap: 14px; padding: 7px 10px; border-radius: 8px;
  cursor: pointer; font-size: 21px;
}
.tickrow:hover { background: var(--blue-pale); }
.tickrow.is-given { cursor: default; color: var(--ink-soft); }
.tickrow-label { min-width: 190px; }
/* An option that is a drawing rather than words — one of four nets to tick. */
.tickrow-label.is-img { min-width: 0; flex: 1; }
.tickrow-label.is-img .optionsvg { max-width: 280px; }
.tickrow .frac { font-size: .72em; }
.tickbox {
  appearance: none; width: 26px; height: 26px; flex: none; margin: 0;
  border: 2px solid var(--blue-dark); background: #fff; cursor: pointer;
}
.tickbox:checked { background: var(--blue); border-color: var(--blue); }
.tickbox:checked::after { content: "✓"; color: #fff; display: block; text-align: center; font-size: 18px; line-height: 22px; }
.tickbox:disabled { cursor: default; opacity: .85; }
.flag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.flag.ok    { background: var(--good-pale); color: var(--good); }
.flag.no    { background: var(--bad-pale);  color: var(--bad); }
.flag.miss  { background: #fff4e5; color: #b45309; }
.flag.given { background: var(--blue-pale); color: var(--blue-dark); font-weight: 400; }

/* matching */
.matchlist { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.matchrow { display: flex; align-items: center; gap: 14px; font-size: 17px; color: var(--ink-soft); }
.matchitem {
  display: inline-flex; align-items: center; justify-content: center;
  /* A single letter keeps the square it had; a phrase like "1 hour" grows. */
  min-width: 46px; height: 40px; padding: 0 10px; white-space: nowrap;
  border: 2px solid var(--ink); font-weight: 700; font-size: 19px; color: var(--ink);
}
.matchselect {
  font: inherit; font-size: 18px; padding: 8px 12px; min-width: 160px;
  border: 3px solid var(--blue); border-radius: 4px; background: #fff; color: var(--ink);
}
.matchselect.is-correct { border-color: var(--good); background: var(--good-pale); }
.matchselect.is-wrong   { border-color: var(--bad);  background: var(--bad-pale); }

/* prime pairs */
.pairslist { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pairsrow { display: flex; align-items: center; gap: 14px; }
.pairsand { font-size: 20px; }

/* pick-a-picture */
.choicegrid { display: flex; flex-wrap: wrap; gap: 14px; flex: 1; }
.choice {
  background: #fff; border: 2px solid var(--line); border-radius: 10px; cursor: pointer;
  padding: 14px; display: flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 130px; transition: border-color .12s, box-shadow .12s;
}
.choice img { max-width: 160px; height: auto; }
.choice:not(.is-picked):not(.is-answer):hover:not(:disabled) { border-color: var(--blue); }
.choice.is-picked { border-color: var(--blue); border-width: 3px; box-shadow: 0 0 0 4px #dbeafe; }
.choice.is-answer { border-color: var(--good); border-width: 3px; box-shadow: 0 0 0 4px var(--good-pale); }
.choice.is-wrong  { border-color: var(--bad);  border-width: 3px; box-shadow: 0 0 0 4px var(--bad-pale); }

/* written explanation and drawings */
.explainbox {
  flex: 1; font: inherit; font-size: 16px; line-height: 1.6; padding: 12px 14px;
  border: 3px solid var(--blue); border-radius: 8px; background: #fff; resize: vertical;
}
.explainbox:focus { outline: none; border-color: var(--blue-dark); box-shadow: 0 0 0 4px #cfe3f7; }
.selfnote { flex: 1; }
.selfnote p { margin: 4px 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.selfnote .tickrow { font-size: 17px; }
.selfnote .tickrow-label { min-width: 0; }

.hint.is-ok    { color: var(--good); }
.hint.is-self  { color: var(--blue-dark); }
.hint .muted   { color: var(--ink-soft); font-weight: 400; }
.part .hint { margin: 12px 0 0; }

/* ===============================================================
   Results additions
   =============================================================== */

.marksheet tr.row-part { background: var(--row-part); }
.mark-pill.part { background: var(--warn-pale); color: var(--warn); }
.prompt-col { max-width: 340px; }

.selfmark { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.selfbtn {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); border-radius: 999px; color: var(--ink-soft);
}
.selfbtn:hover { border-color: var(--blue); color: var(--blue); }
.selfbtn.on-ok { background: var(--good-pale); border-color: var(--good); color: var(--good); }
.selfbtn.on-no { background: var(--bad-pale);  border-color: var(--bad);  color: var(--bad); }
.selfguide {
  font-size: 12px; color: var(--ink-soft); text-align: left; max-width: 260px; line-height: 1.45; font-weight: 400;
}

.pip.is-part { background: var(--warn-pale); border-color: var(--warn-line); color: var(--warn); }

@media (max-width: 900px) {
  .qcard.reasoning { grid-template-columns: 44px minmax(0, 1fr); }
  .qcard.reasoning .qcard-body { padding: 20px 16px 22px; }
  .part-row { flex-direction: column; align-items: stretch; }
  .part-marks { flex-direction: row; align-self: flex-end; }
}

/* an <a> used as a button needs the same box as a real one */
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.prompt-col em { color: var(--ink-soft); font-style: italic; }

/* ===============================================================
   Drawing widgets — reflection (Q8) and cube net (Q10)
   =============================================================== */

.drawwrap { flex: 1; }
.drawsvg {
  display: block; width: 100%; max-width: 620px; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.drawsvg.net { max-width: 380px; }
.drawsvg.is-live { cursor: crosshair; }

.drawsvg .guide { fill: none; stroke: #b9c0c8; stroke-width: .6; }
.drawsvg .shape-given { fill: #d9dadb; stroke: var(--ink); stroke-width: 1.4; }
.drawsvg .mirror { stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 6 7; }
.drawsvg .mirror-label {
  font: 700 9px "Helvetica Neue", Arial, sans-serif; fill: var(--ink); text-anchor: middle;
}
.drawsvg .snapdot { fill: none; stroke: var(--blue); stroke-width: .8; opacity: .45; }

.drawsvg .shape-drawn { fill: rgba(0,105,180,.13); stroke: var(--blue); stroke-width: 2.2; stroke-linejoin: round; }
.drawsvg .shape-drawn.is-correct { fill: rgba(23,128,61,.13); stroke: var(--good); }
.drawsvg .shape-drawn.is-wrong   { fill: rgba(192,54,44,.10); stroke: var(--bad); }
.drawsvg .shape-answer { fill: none; stroke: var(--good); stroke-width: 1.6; stroke-dasharray: 5 4; }
.drawsvg .vertex { fill: var(--blue); }
.drawsvg .vertex-label { font: 700 9px "Helvetica Neue", Arial, sans-serif; fill: var(--blue-dark); }

.drawsvg .netface { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.drawsvg .netface.is-live { cursor: pointer; }
.drawsvg .netface.is-live:not(.is-picked):hover { fill: var(--blue-pale); }
.drawsvg .netface.is-picked { fill: #e4f0fb; stroke: var(--blue); stroke-width: 2.4; }
.drawsvg .netface.is-answer { stroke: var(--good); stroke-width: 2.6; }
.drawsvg .net-circle { fill: none; stroke-width: 2.4; }
.drawsvg .net-circle.given { stroke: var(--ink); }
.drawsvg .net-circle.drawn { stroke: var(--blue); }

/* The pie chart the paper has started. Without these the circle is a filled
   black disc: an SVG circle with no fill named is painted black. */
.piesvg { max-width: 340px; }
.piesvg .pie-edge { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.piesvg .pie-tick { stroke: #9aa4ae; stroke-width: 1; }
.piesvg .pie-radius { stroke: var(--ink); stroke-width: 1.6; }
.piesvg .pie-radius.is-drawn { stroke: var(--blue); stroke-width: 2.6; }
.piesvg .pie-radius.is-drawn.is-correct { stroke: var(--good); }
.piesvg .pie-radius.is-drawn.is-wrong { stroke: var(--bad); }
.piesvg .pie-label {
  font: 700 13px "Helvetica Neue", Arial, sans-serif; fill: var(--ink); text-anchor: middle;
}
.piesvg .pie-label.is-drawn { fill: var(--blue-dark); }
.piesvg .pie-label.is-drawn.is-correct { fill: var(--good); }
.piesvg .pie-label.is-drawn.is-wrong { fill: var(--bad); }
.pielabels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.pielabel-row { display: flex; align-items: center; gap: 8px; }
.pielabel-n { font-size: 14px; color: var(--ink-soft); }

.drawtools { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.drawbtn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; border-radius: 999px; color: var(--ink-soft);
}
.drawbtn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.drawbtn:disabled { opacity: .4; cursor: default; }
.drawcount { font-size: 13px; color: var(--ink-soft); }

/* ===============================================================
   Paper 3 answer types
   =============================================================== */

/* Q1 — circle the numbers */
.circlelist { display: flex; flex-wrap: wrap; gap: 12px 22px; flex: 1; }
.circleopt {
  font: inherit; font-size: 22px; padding: 10px 22px; cursor: pointer;
  background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 999px;
}
/* A ring at rest, so a child can see there is something to press: with nothing
   drawn until it is picked, four calculations read as four numbers. */
.circleopt:not(.is-picked):not(.is-answer):not(.is-wrong):hover:not(:disabled) { border-color: var(--blue); }
.circleopt.is-picked { border-color: var(--blue); border-width: 3px; padding: 9px 21px; }
.circleopt.is-answer { border-color: var(--good); border-width: 3px; padding: 9px 21px; background: var(--good-pale); }
.circleopt.is-wrong  { border-color: var(--bad);  border-width: 3px; padding: 9px 21px; background: var(--bad-pale); }
/* An option that is a drawing rather than a number: the ring goes round the
   picture, so it is padded like a picture rather than like a word. */
.circleopt.has-img { padding: 10px; border-radius: 18px; }
.circleopt.has-img.is-picked,
.circleopt.has-img.is-answer,
.circleopt.has-img.is-wrong { padding: 9px; }

/* radios where the paper says "tick one" */
.tickbox.is-radio { border-radius: 50%; }
.tickbox.is-radio:checked::after { content: ""; display: block; width: 10px; height: 10px; margin: 6px; border-radius: 50%; background: #fff; }
.ticklist.is-single .tickrow-label { min-width: 260px; }

/* Q5 — an ordered pair */
.coordsbox { display: inline-flex; align-items: center; gap: 8px; font-size: 30px; }
.coordsbox .bracket { color: var(--ink); }
.coordsbox .comma { margin: 0 2px; }

/* Q13 — put the values in order */
.orderwrap { flex: 1; }
.orderpool { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.orderopt {
  font: inherit; font-size: 22px; min-width: 92px; padding: 12px 18px; cursor: pointer;
  background: #fff; border: 2px solid var(--blue); border-radius: 8px; color: var(--ink);
}
.orderopt:hover:not(:disabled) { background: var(--blue-pale); }
.orderopt.is-used { opacity: .3; cursor: default; border-style: dashed; }
.orderopt .frac { font-size: .72em; }

.orderslots { display: flex; gap: 16px; flex-wrap: wrap; }
.orderslot-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.orderslot {
  width: 96px; height: 76px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: #fff; font-size: 22px;
}
.orderslot.is-empty { border-style: dashed; border-color: var(--line); }
.orderslot.is-correct { border-color: var(--good); background: var(--good-pale); }
.orderslot.is-wrong { border-color: var(--bad); background: var(--bad-pale); }
.orderslot .frac { font-size: .72em; }
.orderslot-label { font-size: 13px; font-weight: 700; }

/* Q21 — several answers on one line */
.answer-slot.wide { display: block; }
.answer-box.line {
  width: 100%; max-width: 520px; height: 56px; font-size: 24px; text-align: left; padding: 0 16px;
}
.answer-box.is-part { border-color: #f59e0b; background: #fff4e5; }

/* Q12 — the worked example above the matching */
.doneforyou { display: flex; align-items: center; gap: 18px; font-size: 20px; }
.doneforyou img { width: 96px; height: auto; }
.doneforyou .muted { font-size: 13px; color: var(--ink-soft); }

.matchitem.is-img { width: auto; height: auto; border: 0; flex-direction: column; gap: 2px; padding: 0; }
.matchitem.is-img img { width: 92px; height: auto; }
.matchcaption { font-size: 14px; font-weight: 700; }
.matchrow { align-items: center; }

.bullets { margin: 0 0 4px; padding-left: 22px; font-size: 17px; line-height: 1.9; }

/* ---------------- the home page's key stages ----------------
   The outer accordion. Two rows closed, so the whole site is one screen; a
   key stage opens onto its years, which are the inner one. */

#sittings { display: grid; gap: 12px; }

.stage-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.stage-row[open] { border-color: var(--blue-tint); }
.stage-row-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; cursor: pointer;
  padding: 18px 20px 18px 46px; list-style: none; position: relative;
  border-radius: var(--radius);
}
.stage-row-head::-webkit-details-marker { display: none; }
.stage-row-head:hover { background: var(--blue-pale); }
.stage-row-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.stage-row-head::before {
  content: ''; position: absolute; left: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.stage-row[open] > .stage-row-head::before { transform: rotate(45deg); margin-top: -4px; }
.stage-row-name { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.stage-row-facts { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stage-row-state { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--good); }
.stage-row > .sittinglist { padding: 0 12px 12px; }

/* ---------------- the home page's list of sittings ----------------
   One <details> per year: closed, the row is the year and what is in it;
   open, it is the papers themselves. */

.sittinglist { display: grid; gap: 8px; }

.sitting-row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.sitting-row[open] { border-color: var(--blue-tint); box-shadow: var(--shadow); }

.sitting-row-head {
  display: grid; align-items: baseline; gap: 4px 16px; cursor: pointer;
  grid-template-columns: auto auto 1fr auto;
  padding: 14px 18px 14px 42px; list-style: none; position: relative;
}
.sitting-row-head::-webkit-details-marker { display: none; }
.sitting-row-head:hover { background: var(--blue-pale); }
.sitting-row-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* The chevron, drawn rather than fetched, turning as the row opens. */
.sitting-row-head::before {
  content: ''; position: absolute; left: 18px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.sitting-row[open] > .sitting-row-head::before { transform: rotate(45deg); margin-top: -3px; }

.sitting-row-year { font-size: 20px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sitting-row-holds {
  justify-self: start;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue); background: var(--blue-pale); padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.sitting-row-facts { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sitting-row-state {
  font-size: 13px; color: var(--ink-soft); white-space: nowrap;
}
.sitting-row-state.is-begun { color: var(--good); font-weight: 700; }

.sitting-row-body { padding: 0 18px 16px; display: grid; gap: 8px; }
.sitting-row-body .sitting-paper { background: var(--page); }
.sitting-row-whole {
  justify-self: start; font-size: 13px; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.sitting-row-whole:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .sitting-row-head { grid-template-columns: auto 1fr; }
  .sitting-row-facts, .sitting-row-state { grid-column: 1 / -1; }
  /* The head is several lines now, so the chevron marks the first one rather
     than the middle of the stack. */
  .sitting-row-head::before { top: 21px; margin-top: 0; }
  .sitting-row[open] > .sitting-row-head::before { top: 19px; margin-top: 0; }
}

/* ---------------- where the marks went ---------------- */

.breakdown { margin: 28px 0 8px; }
.breakdown h2 { margin: 0 0 4px; font-size: 17px; }
.breakdown-lede { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); }

.area { padding: 14px 0; border-top: 1px solid var(--grid); }
.area:first-child { border-top: 0; }

.area-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.area-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.area-strand {
  margin-left: 8px; font-weight: 400; color: var(--ink-soft);
}
.area-score { font-size: 13px; font-weight: 700; white-space: nowrap; }
.area-pending {
  margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--ink-soft);
}

.area-bar {
  display: flex; height: 6px; margin: 8px 0 10px;
  background: var(--grid); border-radius: 3px; overflow: hidden;
}
.area-bar-got { background: var(--good); }
.area-bar-pending { background: var(--blue-tint); }

.area-objectives { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.area-objectives li { margin: 2px 0; }
.area-clipped { color: var(--ink-soft); }

@media (max-width: 900px) {
  .area-head { flex-direction: column; gap: 2px; }
}

/* ---------------- a sitting ---------------- */

.sitting { max-width: 860px; margin: 0 auto; padding: 8px 0 24px; }

.sitting-score {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 22px 26px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.sitting-figure { display: flex; flex-direction: column; align-items: flex-start; }
.sitting-num { font-size: 40px; font-weight: 700; line-height: 1; color: var(--blue-dark); }
.sitting-figure-scaled .sitting-num { color: var(--blue); }
.sitting-den { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.sitting-label {
  margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sitting-meta { flex: 1; min-width: 240px; }
.sitting-meta p { margin: 0; font-size: 14px; }
.sitting-notes { margin-top: 8px !important; font-size: 13px; color: var(--ink-soft); }

.sitting-papers { margin-top: 18px; display: grid; gap: 10px; }
.sitting-paper {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 16px;
  padding: 14px 18px; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.sitting-paper:hover { border-color: var(--blue); }
.sitting-paper-name { font-weight: 700; }
.sitting-paper-state { font-size: 13px; color: var(--ink-soft); }
.sitting-paper-marks { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sitting-paper-about { grid-column: 1 / -1; margin-top: 2px; font-size: 13px; line-height: 1.5; }
.sitting-paper-summary { display: block; color: var(--ink-soft); }
.sitting-paper-facts { display: block; margin-top: 2px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .sitting-paper { grid-template-columns: 1fr auto; }
  .sitting-paper-state { grid-column: 1 / -1; }
}

.yearlink {
  margin-left: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--blue); text-decoration: none;
}
.yearlink:hover { text-decoration: underline; }

/* ---------------- earlier attempts ---------------- */

.history { margin: 26px 0 8px; }
.history h2 { margin: 0 0 12px; font-size: 17px; }
.history-list { margin: 0; padding: 0; list-style: none; }

.attempt {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--grid); font-size: 14px;
}
.attempt:first-child { border-top: 0; }
.attempt-when { flex: 1; color: var(--ink-soft); }
.attempt-score { font-weight: 700; }
.attempt-pending { font-size: 12px; color: var(--ink-soft); }

/* ---------------- keeping progress ---------------- */

/* ---------------- whose paper this is ----------------
   On the marksheet, where a wrong name is noticed. Quiet: it is a correction
   nobody usually needs, and it should not read as a question being asked. */

.whose {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.whose-line { margin: 0; font-size: 14px; color: var(--ink-soft); }
.whose-line b { color: var(--ink); }
.whose-others { display: flex; gap: 8px; flex-wrap: wrap; }
.whose-others .btn { padding: 5px 11px; font-size: 13px; }

/* ---------------- the parent report ----------------
   The one screen a child is not meant to be reading, so it is the one place a
   comparison between children is allowed to exist (docs/adr/0009). It is a
   grown-up's screen and reads like one: dense, plain, no encouragement. */

.report-heading { margin-top: 26px; }
.report-child { margin: 0 0 20px; }
.report-child h4 {
  margin: 0 0 8px; font-size: 15px;
  display: flex; align-items: baseline; gap: 8px;
}
.report-hidden, .report-thisone {
  padding: 1px 7px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink-soft); background: var(--page); border-radius: 999px;
}
.report-attempts { margin: 0; padding: 0; list-style: none; }
.report-attempt {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.report-attempt:last-child { border-bottom: 0; }
.report-paper { flex: 1 1 14rem; }
.report-when { font-size: 13px; color: var(--ink-soft); }
.report-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.report-pending { font-size: 12px; color: var(--bad); }
.report-move {
  padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink-soft);
  background: var(--field); border: 1px solid var(--line); border-radius: 6px;
}

/* ---------------- the household ----------------
   Signing in sits beside the progress card and is built like it. Warmth and
   chrome belong out here rather than inside a paper (docs/adr/0009), but this
   is still not the part of the site anybody came for, so it stays quiet. */

.household {
  margin: 0 0 24px; padding: 20px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Folded to a line: who is working, whose account, and one thing to press. */
.household.is-bar { padding: 12px 18px; }
.household-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.household-bar-lead { margin: 0; font-size: 15px; }
.household-bar-quiet { color: var(--ink-soft); }
.household-bar-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.household-signedin { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); }
.household:not(.is-bar) .household-signedin { margin: -2px 0 14px; }
.household-signedin b { color: var(--ink); font-weight: 600; }
.household-signedin a { color: var(--blue-dark); }
.household-link {
  font: inherit; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--blue-dark); text-decoration: underline;
}
.household-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.household h3 { margin: 0 0 8px; font-size: 15px; }
.household-note { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); max-width: 60ch; }
.household-label {
  display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.household-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.household-end { margin-top: 14px; }
.household-email {
  flex: 1 1 16rem; max-width: 22rem; padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--field);
  border: 1px solid var(--line); border-radius: 7px;
}
.household-email:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.household-form { margin: 0 0 4px; }
.household-form + .household-form { margin-top: 16px; }

.household-children { margin: 0 0 16px; padding: 0; list-style: none; }
.household-child {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.household-child:last-child { border-bottom: 0; }
.household-pick { width: 17px; height: 17px; accent-color: var(--blue); }
.household-childname { flex: 1; font-size: 15px; cursor: pointer; }
.household-remove {
  padding: 3px 8px; font: inherit; font-size: 12px; color: var(--ink-soft);
  background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
}
.household-remove:hover { color: var(--bad); border-color: var(--line); }

.household-status { margin: 12px 0 0; font-size: 13px; color: var(--ink-soft); min-height: 1.2em; }
.household-status.good { color: var(--good); }
.household-status.bad { color: var(--bad); }

/* ---------------- questions that are heard ---------------- */

.aural {
  margin-bottom: 18px; padding: 16px 18px;
  background: var(--blue-pale); border: 1px solid var(--blue-tint); border-radius: var(--radius);
}
.aural-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aural-status { font-size: 13px; color: var(--ink-soft); }
.aural-words {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--blue-tint);
  font-size: 17px; line-height: 1.5;
}

/* ---------------- axes a pupil points at ----------------
   A bar drawn to a height, an arrow drawn to a mark. Both are answered by
   clicking the drawing, so both follow the booklet's line work rather than
   introducing a control of their own. */

.figure-scale { max-width: 460px; }
.chartsvg, .linesvg { width: 100%; height: auto; }
.chartsvg.is-live, .linesvg.is-live { cursor: crosshair; }

.axis { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.axis-tick { stroke: var(--ink); stroke-width: 1.2; }
.guide-grid { stroke: var(--grid); stroke-width: 1; }
.axis-label { font-size: 11px; fill: var(--ink-soft); }
.axis-unit { font-size: 11px; font-weight: 700; fill: var(--ink); }
.ta-mid { text-anchor: middle; }
.ta-end { text-anchor: end; }

.chartbar { fill: #d7dde5; stroke: var(--ink); stroke-width: 1.2; }
.chartbar.is-drawn { fill: var(--blue-tint); stroke: var(--blue); }
.chartbar.is-drawn.is-correct { fill: var(--good-pale); stroke: var(--good); }
.chartbar.is-drawn.is-wrong { fill: var(--bad-pale); stroke: var(--bad); }
/* On review, the band the mark scheme accepts. */
.chartband { fill: none; stroke: var(--good); stroke-width: 1.4; stroke-dasharray: 4 3; }

.arrowhead { fill: var(--blue); }
.arrowstem { stroke: var(--blue); stroke-width: 2; }
.arrowhead.is-correct { fill: var(--good); }
.arrowstem.is-correct { stroke: var(--good); }
.arrowhead.is-wrong { fill: var(--bad); }
.arrowstem.is-wrong { stroke: var(--bad); }