/* Teach Me Maths: the maths exercise book.
   Design tokens first; change a colour or size here and it changes everywhere. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-400.63730b9efc0d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-700.fed09c9882e4.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --paper: #ffffff;        /* page background */
  --grid: #e4eaf2;         /* table rules and borders */
  --ink: #1c2b45;          /* text */
  --ink-soft: #4a5872;     /* secondary text (7:1 on white) */
  --biro: #2b55c9;         /* links and buttons */
  --highlighter: #ffe35a;  /* the one accent: marks the newest series */
  --teal-pale: #e1eded;    /* 13% brand teal on white: the row under the cursor */
  --teal: #137475;         /* brand colour, from the logo */

  /* Type */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-hero: clamp(1.6875rem, 1.2rem + 2.2vw, 2.5rem); /* home page heading */

  /* Space and layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --doodle-size: 640px;    /* one tile of the doodle background (static/img/doodle.svg) */
  --radius: 6px;
  --page-width: 72rem;
  --measure: 68ch;         /* comfortable line length for reading */
  --focus: 3px solid var(--biro);
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
}

p,
ul {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--biro);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* The hidden attribute always wins, even over an element's own display rule. */
[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-12);
}

.prose > * {
  max-width: var(--measure);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  padding: var(--space-2) var(--space-4);
  background: var(--paper);
  z-index: 10;
}

.skip-link:focus {
  top: var(--space-2);
}

/* Header and footer ------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--grid);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap; /* if the name and menu can't share a line, the menu drops below */
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

@media (max-width: 30rem) {
  .site-header__inner {
    column-gap: var(--space-3); /* a little more room for the name on small phones */
  }
}

/* The narrowest phones (under ~370px): slightly smaller menu text so the
   name and "Past Papers" still share one line. */
@media (max-width: 23rem) {
  .site-nav a {
    font-size: var(--text-sm);
  }
}

/* The site name with the infinity mark to its left (one link; the mark is decorative). */
.site-header__name {
  display: flex;
  align-items: center;
  gap: 0.38em; /* scales with the name */
  color: var(--teal);
  font-size: calc(var(--text-hero) * 1.08); /* very slightly bigger than the home heading */
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap; /* always one line */
  padding: var(--space-2) 0;
}

.site-header__mark {
  height: 0.78em; /* about the cap height of the name: as tall as its "T", a touch more */
  width: auto;
  flex: none;
}

.site-header__name:hover {
  text-decoration: underline;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  padding: var(--space-2) 0;
}

.site-nav a:hover {
  color: var(--biro);
  text-decoration: underline;
}

.site-footer {
  border-top: 1px solid var(--grid);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-8);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.site-footer p {
  margin: 0 0 var(--space-2);
}

.site-footer__links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
}

/* Home ------------------------------------------------------------------ */

/* Faint maths doodles (signs, shapes, pi, y = mx + c ...) on white, like the
   WhatsApp chat wallpaper. The tile repeats seamlessly; its colour is set in
   tools/make_doodle.py, which draws it. */
.doodle {
  background-color: var(--paper);
  background-image: url("../img/doodle.8b69417548f4.svg");
  background-size: var(--doodle-size) var(--doodle-size);
}

/* Paper pages: doodles only in the side margins. The content column is a
   white sheet running from the header to the footer. */
.doodle--sides {
  display: flex;
  flex-direction: column;
}

.doodle--sides > .page {
  flex: 1;
  background: var(--paper);
}

.hero {
  padding: var(--space-12) 0;
}

/* The home heading breaks where the meaning breaks:
   wider screens:  Maths past papers and mark schemes / for GCSE, A Level and IGCSE
   phones:         Maths past papers / and mark schemes for / GCSE, A Level and IGCSE */
.hero__title {
  font-size: var(--text-hero); /* 27px minimum so line 3 fits a 360px phone */
  text-wrap: balance; /* if a line still has to wrap, split it evenly */
}

.hero__title .phone-break {
  display: none;
}

@media (max-width: 30rem) {
  .hero__title .phone-break {
    display: inline;
  }

  .hero__title .wide-break {
    display: none;
  }
}

.hero__lead {
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.choose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
  scroll-margin-top: var(--space-4);
}

.choose__card {
  background: var(--paper);
  border: 1px solid var(--grid);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.choose__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-3);
}

.choose__boards {
  list-style: none;
  padding: 0;
  margin: 0;
}

.choose__boards a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.choose__also {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--grid);
}

/* A note under the cards (worksheets chooser). */
.choose__note {
  margin: var(--space-6) 0 0;
  color: var(--ink-soft);
}

/* The "Other qualifications" card on the past papers page: a link and a line of examples. */
.choose__card--other .choose__title a {
  text-decoration: none;
}

.choose__card--other .choose__title a:hover {
  text-decoration: underline;
}

.choose__card--other p {
  margin: 0;
  color: var(--ink-soft);
}

/* The past papers page: a hero that sits closer to the header, with breadcrumbs. */
.hero--inner {
  padding-top: var(--space-6);
}

/* Board page ------------------------------------------------------------ */

.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.spec-code {
  font-weight: 400;
  color: var(--ink-soft);
}

.board-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.board-bar__formulae {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.board-bar__note {
  margin: 0;
  color: var(--ink-soft);
}

/* The "123 worksheets with solutions." line always takes a row of its own, under the tier switch
   and links, so it doesn't jump between Foundation and Higher (whose line is longer). */
.board-bar__count {
  flex-basis: 100%;
}

/* Phones: the second sentence ("Foundation topics are also listed…") starts a new line. */
@media (max-width: 44rem) {
  .board-bar__also {
    display: block;
  }
}

/* Two-way switch (Higher | Foundation, A Level | AS Level). Plain links, no JavaScript. */
.switch {
  display: inline-flex;
  border: 2px solid var(--biro);
  border-radius: var(--radius);
  overflow: hidden;
}

.switch a {
  padding: var(--space-2) var(--space-4);
  font-weight: 700;
  text-decoration: none;
  min-width: 6.5rem;
  text-align: center;
}

.switch a + a {
  border-left: 2px solid var(--biro);
}

.switch a[aria-current="page"] {
  background: var(--biro);
  color: var(--paper);
}

.switch a:not([aria-current]):hover {
  background: var(--grid);
}

.switch a:focus-visible {
  outline-offset: -5px;
  outline-color: var(--highlighter);
}

/* The paper grid: one row per series, one column per paper. */
.paper-grid-scroll {
  overflow-x: auto;
}

.paper-grid {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.paper-grid th,
.paper-grid td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--grid);
}

/* Column headings wrap (long Core Maths paper names) rather than forcing a sideways scroll. */
.paper-grid thead th {
  font-size: var(--text-sm);
  border-bottom: 2px solid var(--ink);
}

.paper-grid tbody th {
  white-space: nowrap;
}

.paper-grid tbody th a {
  color: var(--ink);
  font-weight: 700;
}

/* The row you're looking at… */
.paper-grid tbody tr:hover > *,
.paper-grid tbody tr:focus-within > * {
  background: var(--teal-pale);
}

/* …and the newest series, marked like a highlighter pen across the name. */
.is-newest th a {
  background: var(--highlighter);
  padding: 0 var(--space-1);
  margin: 0 calc(-1 * var(--space-1));
  box-decoration-break: clone;
}

.newest-tag {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-soft);
}

.doc-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.doc-link {
  display: inline-block;
  padding: var(--space-1) 0;
}

/* Phones: each series becomes its own block with its papers listed inside. */
@media (max-width: 44rem) {
  .paper-grid,
  .paper-grid tbody,
  .paper-grid tr,
  .paper-grid th,
  .paper-grid td {
    display: block;
  }

  .paper-grid thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .paper-grid tbody tr {
    border: 1px solid var(--grid);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    overflow: hidden;
  }

  .paper-grid tbody th {
    font-size: var(--text-lg);
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }

  .newest-tag {
    display: inline;
  }

  .paper-grid td {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) 1fr;
    gap: var(--space-4);
  }

  .paper-grid td::before {
    content: attr(data-label);
    font-weight: 700;
  }

  .paper-grid td:last-child {
    border-bottom: 0;
  }

  .paper-grid td.is-empty {
    display: none;
  }
}

/* Specs with many papers (Edexcel and MEI Further Maths): the phone layout at every
   width, with the series blocks two across when there's room. Keep these rules
   the same as the phone rules above. */
.paper-grid--stacked,
.paper-grid--stacked tbody,
.paper-grid--stacked tr,
.paper-grid--stacked th,
.paper-grid--stacked td {
  display: block;
}

.paper-grid--stacked thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.paper-grid--stacked tbody tr {
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.paper-grid--stacked tbody th {
  font-size: var(--text-lg);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.paper-grid--stacked .newest-tag {
  display: inline;
}

.paper-grid--stacked td {
  display: grid;
  grid-template-columns: minmax(6rem, 40%) 1fr;
  gap: var(--space-4);
}

.paper-grid--stacked td::before {
  content: attr(data-label);
  font-weight: 700;
}

.paper-grid--stacked td:last-child {
  border-bottom: 0;
}

.paper-grid--stacked td.is-empty {
  display: none;
}

@media (min-width: 60rem) {
  .paper-grid--stacked tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  .paper-grid--stacked tbody tr {
    margin-bottom: 0;
  }
}

/* Series page ------------------------------------------------------------ */

.series-group h2 {
  margin-top: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
}

.series-papers {
  list-style: none;
  padding: 0;
}

.series-paper {
  display: grid;
  grid-template-columns: minmax(8rem, 16rem) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}

.series-paper:hover {
  background: var(--teal-pale);
}

.series-paper__name {
  font-weight: 700;
}

.series-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-4);
}

.series-nav__newer {
  margin-left: auto;
}

/* Worksheets -------------------------------------------------------------- */

/* Jump links to each strand (Number, Algebra …). */
.strand-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
}

.strand h2 {
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--ink);
  scroll-margin-top: var(--space-4);
}

/* One row per worksheet: name on the left, the two PDF links on the right. */
.sheet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sheet {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}

.sheet:hover,
.sheet:focus-within {
  background: var(--teal-pale);
}

.sheet__name a {
  color: var(--ink);
  font-weight: 700;
}

.sheet__meta {
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* Grade filter, sort and search (shown by static/js/worksheets.js). */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: flex-end;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
}

.controls__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.controls__field--search {
  flex: 1 1 14rem;
}

.controls label {
  font-size: var(--text-sm);
  font-weight: 700;
}

.controls select,
.controls input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  min-height: 2.75rem;
}

.controls input {
  width: 100%;
}

.controls select:focus-visible,
.controls input:focus-visible {
  border-color: var(--biro);
  outline: var(--focus);
  outline-offset: 2px;
}

/* "× Reset filters": grey text under the controls, only while something is applied. */
.controls__reset {
  flex-basis: 100%;
  align-self: flex-start;
  width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  cursor: pointer;
}

.controls__reset:hover {
  color: var(--biro);
  text-decoration: underline;
}

.no-match {
  padding: var(--space-4);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
}

.button--small {
  padding: var(--space-1) var(--space-4);
  margin-left: var(--space-2);
}

/* Small labels beside a title: grade, strand (in the flat views), tier. */
.tag,
.tier-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.4;
  vertical-align: 0.1em;
}

.grade-tag,
.level-tag {
  border-color: var(--teal);
  color: var(--teal);
}

/* The strand label only earns its place when the list isn't grouped by strand. */
.sheets--strand .strand-tag {
  display: none;
}

/* Phones: title, then the tags, then the question count, each on its own line, with the links below. */
@media (max-width: 44rem) {
  .sheet {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .sheet__name a {
    display: inline-block;
  }

  .sheet__tags,
  .sheet__meta {
    display: block;
    margin: var(--space-1) 0 0;
  }

  .sheet__tags .tag,
  .sheet__tags .tier-tag {
    margin: 0 var(--space-2) 0 0;
  }
}

/* One worksheet's page: the two PDF buttons and its details. */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.button {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  border: 2px solid var(--biro);
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
}

.button:first-child {
  background: var(--biro);
  color: var(--paper);
}

.button:hover {
  text-decoration: underline;
}

/* The sheet's facts: course, strand and grade in bold, one per line; then
   "15 questions, 32 marks, 6 pages" in grey underneath. */
.facts {
  max-width: var(--measure);
  margin: 0 0 var(--space-8);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  font-variant-numeric: tabular-nums;
}

.facts__main {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-weight: 700;
  line-height: 1.7;
}

.facts__meta {
  margin: 0;
  color: var(--ink-soft);
}

/* Mock exams -------------------------------------------------------------- */

.disclaimer {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.sheet__title {
  font-weight: 700;
}

/* Indicative grade boundaries under each set: a two-row table, grades across the top. */
.boundaries {
  margin: var(--space-4) 0 0;
}

.boundaries table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.boundaries__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.boundaries th,
.boundaries td {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--grid);
  text-align: center;
}

.boundaries th {
  text-align: left;
  font-weight: 700;
}

.boundaries__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Practice questions ------------------------------------------------------- */

/* The maths is LaTeX until KaTeX has drawn it (static/js/practice.js); keep the raw code out of sight meanwhile. */
.maths-pending .tex {
  visibility: hidden;
}

/* Maths wider than a phone scrolls sideways inside its own box instead of widening the page: maths on a
   line of its own (.katex-display) and any line of text holding wide maths (a row of matrices). A box
   that scrolls sideways also trims whatever pokes out above or below it, and tall maths does poke out of
   its line (a power on top of a fraction lost the top of its 3), so each box is given room above and
   below (--maths-room) and pulled back by the same amount, leaving the spacing as it was.
   ".reading" is in the selector to outrank KaTeX's own stylesheet, which loads after this one. */
.reading {
  --maths-room: 0.6em;
}

.reading .katex-display {
  margin: calc(1em + var(--space-1) - var(--maths-room)) 0;
  padding: var(--maths-room) 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* A topic's page is one column for reading, set in the middle of the white sheet so that the
   questions sit well clear of the doodles on either side (Ben, 5 Oct 2026). */
.reading {
  max-width: var(--measure);
  margin: 0 auto;
}

.question {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
  scroll-margin-top: var(--space-4);
}

.question__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
}

.question__title .tag {
  font-weight: 400;
}

.question__marks,
.part__marks {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.question__marks {
  margin-left: auto;
  padding-left: var(--space-4);
}

.question__text > * {
  margin: 0 0 var(--space-3);
}

.question__text p,
.steps li,
.reveal p {
  padding-block: var(--maths-room);
  overflow-x: auto;
  overflow-y: hidden;
}

.question__text p {
  margin-block: calc(-1 * var(--maths-room)) calc(var(--space-3) - var(--maths-room));
}

/* An equation in a sentence stays on one line where it fits, moving to the next line whole, and is
   only broken (at an = or + sign) when it is wider than the line itself (Ben, 5 Oct 2026: on a phone
   "y = −x" had its "−x" on the next line). The same for a phrase, one of several facts set side by
   side with a gap between them (practice/text.py): the line wraps at the gaps. */
.reading .tex:not(.tex--display),
.phrase {
  display: inline-block;
  max-width: 100%;
}

.phrase--gap {
  margin-right: 1em;
}

.phrase--gap-wide {
  margin-right: 2em;
}

.phrase--indent {
  margin-left: 1em;
}

.phrase--indent-wide {
  margin-left: 2em;
}

.question__diagram {
  margin: var(--space-4) 0;
}

/* Part of a diagram that appears once a part of the question is answered correctly (static/js/practice.js). */
.question__diagram [data-show-after] {
  display: none;
}

.question__diagram [data-show-after].is-shown {
  display: inline;
}

.question__diagram svg {
  display: block;
  width: 100%;
  max-width: 25rem;
  height: auto;
}

/* A graph that values are read from is shown larger (data-size="large" on the pack's SVG). */
.question__diagram svg[data-size="large"] {
  max-width: 36rem;
}

/* A question in parts: the (a), (b), (c) down the left, the wording beside them. */
.part {
  margin-top: var(--space-4);
}

.part--labelled {
  display: grid;
  grid-template-columns: 1.75rem 1fr; /* a fixed width, so (a), (b) and (c) line their wording up */
  gap: var(--space-2);
}

.part__label {
  font-weight: 700;
}

.part__body {
  min-width: 0; /* lets wide maths scroll inside the grid instead of stretching it */
}

.part__marks {
  margin: 0;
}

/* The answer box: a line to type on (or choices to pick from), the Check button and the result.
   Typing boxes and Check need the page's script, so they show only once it is known to be running
   (the "js" class, set in the page's head). */
.answer {
  margin-top: var(--space-4);
}

html:not(.js) .answer__label,
html:not(.js) .answer__row,
html:not(.js) .answer__check,
html:not(.js) .answer__help,
html:not(.js) .keys {
  display: none;
}

.answer__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
}

.answer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.answer__input {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 22rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.answer__input:focus-visible {
  border-color: var(--biro);
  outline: var(--focus);
  outline-offset: 2px;
}

.answer .button {
  background: var(--biro);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.answer .button:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Keys for the symbols a keyboard lacks. */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.key {
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.key:hover {
  background: var(--teal-pale);
}

.answer__help {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.answer__feedback {
  margin: var(--space-3) 0 0;
  font-weight: 700;
}

.answer__feedback:empty {
  display: none;
}

.answer__feedback[data-result="correct"] {
  color: var(--teal);
}

.answer--correct .answer__input {
  border-color: var(--teal);
}

.answer__read {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-soft);
  font-weight: 400;
}

/* "Flag a mistake in this question": a quiet link under the result, after a second wrong answer. */
.answer__flag,
.answer__flagged {
  display: block;
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
}

.answer__flag {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: underline;
  cursor: pointer;
}

.answer__flag:hover {
  color: var(--biro);
}

/* Multiple choice: each choice is a row to press, lettered A, B, C, D. */
.choices {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  counter-reset: choice;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  cursor: pointer;
  counter-increment: choice;
}

.choice:hover,
.choice:has(input:checked) {
  background: var(--teal-pale);
}

.choice:has(input:checked) {
  border-color: var(--teal);
}

.choice input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--teal);
}

.choice__text::before {
  content: counter(choice, upper-alpha) ".";
  margin-right: var(--space-2);
  font-weight: 700;
}

/* Hint and worked solution: closed until asked for. */
.reveal {
  margin-top: var(--space-3);
  border: 1px solid var(--grid);
  border-radius: var(--radius);
}

.question .reveal:first-of-type {
  margin-top: var(--space-6);
}

.reveal summary {
  padding: var(--space-2) var(--space-4);
  color: var(--biro);
  font-weight: 700;
  cursor: pointer;
}

.reveal[open] summary {
  border-bottom: 1px solid var(--grid);
}

.reveal > :not(summary) {
  margin: var(--space-3) var(--space-4);
}

.reveal p {
  margin-block: calc(var(--space-3) - var(--maths-room));
}

.reveal__part {
  font-size: var(--text-base);
}

/* A column of steps. (A flex column, so that the steps' margins add up rather than merge.) */
.steps {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

/* A clear gap between one step and the next (Ben, 5 Oct 2026: the first version was half this). */
.steps li {
  margin-block: calc(var(--space-2) - var(--maths-room));
}

/* "This section is in development…": a quiet box under the heading (Ben, 5 Oct 2026). */
.notice {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--grid);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* "Have a pen and paper handy…": one line under the heading of the list and of each topic. */
.practice-note {
  margin: 0 0 var(--space-4);
  font-style: italic;
}

.practice-foot {
  margin-top: var(--space-12);
}

/* On a topic's page, a clear gap after the last question, so the links don't crowd it. */
.reading .practice-foot {
  margin-top: calc(2 * var(--space-12));
}

/* Revision notes ----------------------------------------------------------- */

/* The topic bar: Notes, Practice questions, Worksheet. A row of plain tabs under the heading of each
   of a topic's pages, the one being read underlined (templates/notes/_topic_bar.html). */
.topic-bar {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  border-bottom: 1px solid var(--grid);
}

.topic-bar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-bar a,
.topic-bar span {
  display: inline-block;
  margin-bottom: -1px; /* its underline sits on the bar's own line */
  padding: var(--space-2) 0;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  text-decoration: none;
}

.topic-bar [aria-current] {
  border-bottom-color: var(--ink);
}

.topic-bar a:hover {
  border-bottom-color: var(--biro);
}

/* Notes are read at length, with maths in most lines, so their lines are set further apart than
   the rest of the site's, and the points of a list are set apart from each other (Ben, 5 Oct 2026:
   the first version looked cramped). */
.notes {
  line-height: 1.85;
}

.notes .question__text li + li {
  margin-top: var(--space-2);
}

.notes-section {
  scroll-margin-top: var(--space-4);
}

/* A worked example: set apart in a box, its question above a line and its steps below. */
.example {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-4) var(--space-6);
  border: 1px solid var(--grid);
  border-top: 2px solid var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
}

.example .notes-section__title {
  margin-top: 0;
  font-size: var(--text-lg);
}

.example__question {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--grid);
}

.example__steps {
  margin: var(--space-4) 0 0;
}

/* One step at a time (static/js/notes.js). The steps are folded away from the start by a class the
   page's head sets, and each shows once it has been asked for. */
.steps-folded .example__steps > .step:not(.is-shown),
.steps-folded .step--your-turn:not(.is-done) .your-turn__after,
.step--your-turn.is-done .your-turn__show,
.step--your-turn.is-told .answer {
  display: none;
}

/* A "your turn" step: the student types the next line. Its box holds an answer form, which must not be
   trimmed, so the room that tall maths needs is given to its lines of text instead of to the step. */
.steps .step--your-turn {
  padding-block: 0;
  overflow: visible;
}

.your-turn {
  margin-block: var(--space-2);
  padding-left: var(--space-4);
  border-left: 4px solid var(--biro);
}

.step--your-turn.is-done .your-turn {
  border-left-color: var(--grid);
}

.your-turn__prompt,
.your-turn__after {
  margin: 0;
  padding-block: var(--maths-room);
  overflow-x: auto;
  overflow-y: hidden;
}

.your-turn .answer {
  margin-top: 0;
}

.example__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-4) 0 0;
}

.example__next {
  background: var(--biro);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* A quiet button that reads as a link: "Show all steps", "Show me". */
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--biro);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.your-turn__show {
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--text-sm);
}

/* An interactive graph (static/js/graph.js): the equation, the plot, then a slider for each letter. */
.graph--live {
  max-width: 26rem;
  margin: var(--space-4) 0 var(--space-6);
}

.graph__equation {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  text-align: center;
}

.graph__plot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--grid);
  border-radius: var(--radius);
  font-size: 13px;
}

.graph__grid {
  stroke: var(--grid);
  stroke-width: 1;
}

.graph__axis {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.graph__numbers {
  fill: var(--ink-soft);
}

.graph__numbers .graph__letter {
  fill: var(--ink);
  font-size: 16px;
}

.graph__guide {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.graph__curve {
  fill: none;
  stroke: var(--biro);
  stroke-width: 3;
}

.graph__point {
  fill: var(--biro);
  stroke: var(--paper);
  stroke-width: 2;
}

/* The turning point's coordinates, with a white edge so they read over the grid. */
.graph__label {
  fill: var(--ink);
  font-size: 16px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
}

.graph__sliders {
  margin-top: var(--space-3);
}

.graph__slider {
  display: grid;
  grid-template-columns: 1.25rem 1fr 2rem;
  align-items: center;
  gap: var(--space-3);
}

.graph__slider input {
  width: 100%;
  height: 2.25rem; /* room for a thumb */
  margin: 0;
  accent-color: var(--biro);
}

.graph__letter {
  font-style: italic;
  font-weight: 700;
}

.graph__value {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.graph__facts {
  margin-top: var(--space-2);
}

.graph__facts p {
  margin: 0;
}

.graph__hint {
  margin: var(--space-2) 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

/* The notes read aloud (static/js/listen.js): a button for the whole page, a quiet one under each
   heading, and the part being read lit up. */
.listen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: 0 0 var(--space-6);
}

/* The choice of voice: a button for each, the chosen one filled in. */
.listen__voices {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.listen__voice {
  padding: var(--space-1) var(--space-3);
  border: 2px solid var(--biro);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--biro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.listen__voice[aria-pressed="true"] {
  background: var(--biro);
  color: var(--paper);
}

.listen__all,
.player__toggle {
  background: var(--biro);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.listen__section {
  display: block;
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--text-sm);
}

/* The same tint in the gap around the words as behind them, so the highlight has a little air without
   anything on the page moving. */
.is-reading {
  border-radius: 2px;
  background: var(--teal-pale);
  box-shadow: 0 0 0 0.4rem var(--teal-pale);
}

/* While something is being read, a bar along the bottom of the window: pause, what is being read, speed, stop. */
.player {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}

.player__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
}

.player__toggle {
  min-width: 5.5rem;
  padding: var(--space-1) var(--space-4);
  text-align: center;
}

.player__toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

.player__title {
  flex: 1;
  min-width: 8rem;
  margin: 0;
  font-size: var(--text-sm);
}

.player__speed {
  font-size: var(--text-sm);
  white-space: nowrap;
}

.player__speed select {
  font: inherit;
}

/* Room at the foot of the page, so that the bar never covers its last lines. */
.is-listening main {
  padding-bottom: 5rem;
}

/* Other pages ------------------------------------------------------------ */

.company {
  font-style: normal;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}