/* Free worksheets: one stylesheet for the web page, the PDF and the list.
   Ink and gold, the product's own palette. Navy carries structure, gold is
   used only for the one action on the page. The PDF is printed from the
   print document by Chromium at build time (build-tools/buildWorksheets.mjs). */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/inter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  --ink: #14203a;
  --muted: #55607a;
  --line: #c9d0dc;
  --soft: #eef1f6;
  --ground: #f8fafc;
  --paper: #ffffff;
  --gold: #f0b429;
  --gold-text: #875e05;
  --wash: #fdf6e3;
  --body: "Inter", "DejaVu Sans", Arial, sans-serif;
  --display: "Space Grotesk", "Inter", Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); line-height: 1.45; }
p { margin: 0; }
p + p { margin-top: .5em; }
.katex { font-size: 1.08em; white-space: nowrap; }
.dm { display: block; margin: .4em 0; }
.dm .katex-display { margin: 0; }

/* ---------- the sheet (shared) ---------- */
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.kicker { font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }
.ws-head h1 { font-family: var(--display); font-size: 2em; line-height: 1.1; margin: .15em 0 .25em; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86em; color: var(--muted); }
.ws-qr { display: flex; gap: 8px; align-items: center; font-size: .72em; color: var(--muted); flex: none; }
.qr { width: 19mm; height: 19mm; flex: none; }
.who { display: flex; gap: 18px; margin: 10px 0 2px; font-size: .86em; color: var(--muted); }
.who span { flex: 1; border-bottom: 1px solid var(--line); padding-bottom: 14px; }

.sec { margin-top: 16px; }
.sec-h { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; break-after: avoid; page-break-after: avoid; }
.sec-k { background: var(--ink); color: #fff; font-weight: 700; border-radius: 3px; padding: 0 7px; font-size: .9em; }
.sec-h h2 { font-family: var(--display); font-size: 1.25em; margin: 0; }
.band { margin-left: auto; font-size: .82em; color: var(--muted); white-space: nowrap; }
.lead { color: var(--muted); font-size: .9em; margin: 0 0 10px; }

.qs { list-style: none; margin: 0; padding: 0; }
.keep { break-inside: avoid; page-break-inside: avoid; }
.q { padding: 6px 0 10px; border-bottom: 1px solid var(--soft); break-inside: avoid; page-break-inside: avoid; }
.q.has-parts { break-inside: auto; page-break-inside: auto; }
.q-head { display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; break-after: avoid; page-break-after: avoid; }
.qn { font-weight: 700; }
.pl { font-weight: 600; }
.q-text { min-width: 0; }
.mk { font-size: .82em; color: var(--muted); white-space: nowrap; padding-top: .1em; font-variant-numeric: tabular-nums; }
.part { margin: 8px 0 0 2.4em; break-inside: avoid; page-break-inside: avoid; }
.part .q-head { grid-template-columns: 2em minmax(0, 1fr) auto; }
.q-total { text-align: right; font-size: .8em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.claim { background: var(--wash); border-left: 3px solid var(--gold); padding: 6px 10px; margin-bottom: 6px; }

.fig { margin: 8px 0 4px 2.4em; max-width: calc(100% - 2.4em); }
.part .fig { margin-left: 2em; }
.fig svg { display: block; width: 100%; height: auto; }
.fig svg text { font-family: var(--body) !important; }
.fig figcaption { font-size: .78em; color: var(--muted); margin-top: 2px; }

.room { height: var(--room); }
.ans { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; margin-top: 2px; font-size: .9em; }
.ans-l { color: var(--muted); }
.ans-dots { display: inline-block; width: 45mm; border-bottom: 1px dotted var(--ink); height: 1em; }

/* Examples: the teacher works one, the student does the twin beside it. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; break-inside: avoid; page-break-inside: avoid; }
.ex { border: 1.5px solid var(--ink); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.tag { font-size: .74em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-hint { font-size: .84em; color: var(--muted); background: var(--soft); border-radius: 4px; padding: 4px 8px; }
.ex-hint b { color: var(--ink); }
.ex .room { flex: 1 0 auto; }
.turn .q { border: 1px dashed var(--line); border-radius: 6px; padding: 8px 10px; height: 100%; }
.turn .q-head { grid-template-columns: 2.2em minmax(0, 1fr) auto; }

/* Extension */
.sec-E .q { background: #fbfcfe; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }

/* How did it go */
.cando { width: 100%; border-collapse: collapse; font-size: .9em; }
.cando th { font-size: .78em; color: var(--muted); font-weight: 600; text-align: center; padding: 0 6px 4px; }
.cando td { padding: 6px 4px; border-top: 1px solid var(--soft); }
.cando td + td { text-align: center; width: 4.4em; }
.dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid; }
.dot.r { border-color: #b3301f; } .dot.a { border-color: #b8860b; } .dot.g { border-color: #17794a; }

/* Hints page and mark scheme */
.hintpage h2, .answers h2 { font-family: var(--display); font-size: 1.4em; margin: 0 0 4px; }
.hp { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--line); padding: 8px 0; break-inside: avoid; page-break-inside: avoid; }
.hp-id { font-weight: 700; }
.hp-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.hp-n { font-size: .82em; font-weight: 700; color: var(--gold-text); }
.answers h3 { font-size: 1em; margin: 14px 0 4px; }
.ms { width: 100%; border-collapse: collapse; font-size: .88em; }
.ms td { border-top: 1px solid var(--soft); padding: 5px 6px; vertical-align: top; }
.ms tr { break-inside: avoid; page-break-inside: avoid; }
.ms-id { font-weight: 700; width: 4.2em; white-space: nowrap; }
.ms-mk { width: 2.4em; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-ans { font-weight: 600; }
.ms-row { color: var(--muted); }
.code { display: inline-block; min-width: 2em; font-weight: 700; color: var(--gold-text); }

/* ---------- print (the PDF) ---------- */
@page { size: A4; margin: 14mm 14mm 16mm; }
body.print { background: #fff; font-size: 10.5pt; }
body.print .sheet { width: 100%; }
body.print .hintpage, body.print .answers { break-before: page; page-break-before: always; }
body.print .ms-row { color: #3d4760; }

/* ---------- web page ---------- */
body.web { font-size: 16px; }
.site { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.site a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95em; }
.site .brand { font-family: var(--display); font-size: 1.2em; margin-right: auto; }
.site .cta { border: 1.5px solid var(--ink); border-radius: 8px; padding: 7px 12px; }
.bar { max-width: 900px; margin: 18px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.back { color: var(--ink); font-weight: 600; text-decoration: none; }
.dl { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 9px; border: 1.5px solid var(--ink); color: var(--ink); background: var(--paper); text-decoration: none; font-weight: 700; font-size: .95em; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn:focus-visible, .site a:focus-visible, summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
body.web .sheet { max-width: 900px; margin: 14px auto 0; background: var(--paper); border-radius: 6px; box-shadow: 0 1px 2px rgba(20,32,58,.08), 0 14px 34px -22px rgba(20,32,58,.4); padding: 32px clamp(16px, 4vw, 48px) 36px; }
body.web .room { height: calc(var(--room) * 0.42); }
body.web .ex .room { min-height: 18mm; }
body.web .ans-dots { width: 30mm; }
.hints { margin: 8px 0 0 2.4em; display: flex; flex-direction: column; gap: 4px; }
details.hint summary { cursor: pointer; color: var(--gold-text); font-weight: 700; font-size: .92em; min-height: 32px; display: flex; align-items: center; }
details.hint > div { padding: 2px 0 6px 14px; }
.answers-cta { margin-top: 26px; border: 1.5px solid var(--ink); border-radius: 8px; padding: 14px 16px; }
.answers-cta h2 { font-family: var(--display); font-size: 1.2em; margin: 0 0 6px; }
.answers-cta p { margin: 0 0 12px; color: var(--muted); }
.site-foot { text-align: center; color: var(--muted); font-size: .88em; padding: 28px 16px 40px; }
.site-foot a { color: var(--ink); }

@media (max-width: 640px) {
  .ws-head { flex-direction: column; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .fig, .hints { margin-left: 0; max-width: 100%; }
  .part { margin-left: .6em; }
  .part .fig { margin-left: 0; }
  .band { display: none; }
  .who { flex-direction: column; gap: 6px; }
}
@media (pointer: coarse) {
  details.hint summary { min-height: 44px; }
  .site a, .back, .site-foot a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
  .site .cta { padding-inline: 12px; }
}

/* ---------- the list page ---------- */
.list { max-width: 900px; margin: 0 auto; padding: 28px 16px 10px; }
.list h1 { font-family: var(--display); font-size: clamp(1.7em, 4vw, 2.3em); line-height: 1.1; margin: 0 0 10px; text-wrap: balance; }
.list .lead { font-size: 1em; max-width: 62ch; }
.ch h2 { font-size: 1.05em; margin: 26px 0 8px; }
.ch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch a { display: grid; gap: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.ch a:hover { border-color: var(--ink); }
.ch a span { color: var(--muted); font-size: .94em; }
.ch a em { font-style: normal; font-size: .84em; color: var(--gold-text); font-weight: 600; }
.more { color: var(--muted); margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }