/* Maths Helper styles. Phone first; wider screens get a centred column. */
:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #5b6670;
  --line: #d9d4ca;
  --accent: #1f6f78;
  --accent-text: #ffffff;
  --accent-soft: #e2f0f1;
  --right-bg: #e7f4ea;
  --right-line: #4f9a62;
  --look-bg: #fdf3e1;
  --look-line: #c08a2b;
  --calc-bg: #ece8f8;
  --calc-text: #4a3d8f;
  --nocalc-bg: #e2f0f1;
  --nocalc-text: #17565d;
  --sq-a: #f4c98b;
  --sq-b: #9fd0d6;
  --sq-c: #c6b8ef;
  --maths: "Cambria Math", Cambria, "STIX Two Math", "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15191d;
    --surface: #1e2429;
    --text: #e8ecef;
    --muted: #a3adb5;
    --line: #36404a;
    --accent: #5fb7c0;
    --accent-text: #0e1a1c;
    --accent-soft: #1d3436;
    --right-bg: #1d3324;
    --right-line: #6dbb82;
    --look-bg: #3a2f1a;
    --look-line: #d9a64a;
    --calc-bg: #2c2747;
    --calc-text: #c9bff5;
    --nocalc-bg: #1d3436;
    --nocalc-text: #9fd6dc;
    --sq-a: #7a5a2a;
    --sq-b: #2d5f66;
    --sq-c: #4f4380;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
#app { max-width: 640px; margin: 0 auto; padding: 0 16px 48px; }
.loading { padding: 40px 16px; text-align: center; color: var(--muted); }
.load-problem { padding: 24px 0; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 18px 0 12px; }
h2 { font-size: 1.25rem; margin: 0 0 8px; }
h3 { font-size: 1.05rem; margin: 18px 0 6px; }
a { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lead { font-size: 1.05rem; color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }
.small { font-size: .95rem; margin: 14px 0; }
.privacy { color: var(--muted); font-size: .9rem; margin-top: 28px; text-align: center; }

/* Top bar and breadcrumbs */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 1.05rem; padding: 8px 0; }
.bar-link { font-size: .95rem; padding: 10px 0; text-align: right; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: .95rem; padding: 10px 0 0; color: var(--muted); }
.crumbs a { padding: 6px 0; }
.crumbs .sep { color: var(--muted); }
.context { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; font-size: .95rem; }

/* Search */
.search input {
  width: 100%; font-size: 1.1rem; padding: 14px 16px; min-height: 56px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text);
}
.search input:focus { outline: none; border-color: var(--accent); }
#results { margin-top: 14px; }

/* Tiles and lists */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  min-height: 110px; padding: 16px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line);
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 1.15rem; text-align: center;
}
.tile:active, .row:active { transform: scale(.98); }
.tile-icon { font-size: 1.6rem; color: var(--accent); font-family: var(--maths); }
.list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 64px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line);
  text-decoration: none; color: var(--text);
}
.row-main { display: flex; flex-direction: column; }
.row-title { font-weight: 600; }
.row-sub { font-size: .9rem; color: var(--muted); }
.chip { font-size: .8rem; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip-done { background: var(--right-bg); }
.chip-look { background: var(--look-bg); }
.chip-started { background: var(--accent-soft); }
.covered { margin-top: 22px; }
/* Area colours: one calm colour per area, shown as a stripe (text stays in the normal colour, so it's always readable). */
.st-number { --st: #3b6fb6; }
.st-algebra { --st: #7a52b3; }
.st-ratio { --st: #b8691d; }
.st-geometry { --st: #2e8b57; }
.st-probability { --st: #b5487a; }
.st-statistics { --st: #6f7d2a; }
.st-basics { --st: #6b7280; }
@media (prefers-color-scheme: dark) {
  .st-number { --st: #8fb4ea; } .st-algebra { --st: #b9a0e6; } .st-ratio { --st: #e6ad6e; } .st-geometry { --st: #7fcf9f; }
  .st-probability { --st: #e895bd; } .st-statistics { --st: #b9c86a; } .st-basics { --st: #a3adb5; }
}
details.strand[class*="st-"] { border-left: 8px solid var(--st); }
.row[class*="st-"] { border-left: 6px solid var(--st); }
.strand-name::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--st); margin-right: 10px; vertical-align: 1px; }
.tile-btn[class*="st-"] { border-top: 6px solid var(--st); }
/* Finished topics: a small tick */
.tick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--right-bg); color: var(--right-line); font-weight: 700; font-size: .95rem; }
/* The Maths tile fills the row while it's the only subject; The basics as a card */
.grid.grid-one { grid-template-columns: 1fr; }
.grid.grid-one .tile { min-height: 96px; flex-direction: row; gap: 14px; }
.basics-card { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line); border-left: 8px solid var(--st); text-decoration: none; color: var(--text); }
.basics-card:active { transform: scale(.98); }
.basics-title { font-weight: 700; font-size: 1.15rem; }
.basics-sub { font-size: .95rem; color: var(--muted); }
.basics-count { font-size: .85rem; color: var(--muted); margin-top: 4px; }
h1 + .basics-card { margin: 0 0 16px; }
/* Find my gaps */
.gaps-cta { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--accent); color: var(--accent-text); text-decoration: none; }
.gaps-title { font-weight: 700; font-size: 1.2rem; }
.gaps-sub { font-size: .95rem; opacity: .9; }
.gaps-how ul { padding-left: 20px; margin: 6px 0 0; }
.gaps-how li { margin-bottom: 6px; }
.tile-btn { font: inherit; font-weight: 600; cursor: pointer; min-height: 72px; }
.idk { margin-top: 12px; }
.gap-ack { background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; }
.chip-g-secure { background: var(--right-bg); }
.chip-g-look { background: var(--look-bg); }
.chip-g-notyet { background: var(--calc-bg); color: var(--calc-text); }
.chip-g-unchecked { border: 1px dashed var(--line); color: var(--muted); }
.chip-g-start { background: var(--accent-soft); font-weight: 600; }
.gap-early { background: var(--accent-soft); }
.gap-next { border-color: var(--accent); }

/* Buttons */
.btn {
  display: flex; align-items: center; justify-content: center; text-align: center; gap: 6px;
  width: 100%; min-height: 56px; padding: 12px 18px; border-radius: 14px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.secondary { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--accent); border: 2px dashed var(--line); margin-top: 10px; }
.btn.big { min-height: 64px; margin-top: 14px; }
.btn .count { font-weight: 400; opacity: .85; }
.btn[hidden] { display: none; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.linkbtn { background: none; border: none; color: var(--accent); font: inherit; text-decoration: underline; padding: 10px 0; cursor: pointer; text-align: left; }

/* Tabs and pills */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 5px; margin-bottom: 16px; }
.tab { font: inherit; font-size: .95rem; min-height: 48px; border: none; border-radius: 10px; background: transparent; color: var(--text); cursor: pointer; }
.tab.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pill { font: inherit; font-size: .95rem; min-height: 48px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.pill.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Cards */
.card, .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.card p:first-child, .qcard p:first-child { margin-top: 0; }
.explain ul { padding-left: 22px; }
.explain li { margin: 6px 0; }
/* The first explanation: a worked example (every step, one to a line), then the key points */
.lead-h { font-size: 1.05rem; color: var(--accent); margin: 0 0 6px; }
.lead-h ~ .lead-h { margin-top: 18px; }
.explain .lead-steps { list-style: none; padding: 0; margin: 8px 0 0; }
.explain .lead-steps li { margin: 0; padding: 7px 0; border-top: 1px solid var(--line); }
.lead-t { display: block; font-size: .9rem; font-weight: 600; color: var(--muted); }
.lead-b { display: block; font-size: 1.1rem; }
.lead-steps li.final .lead-t { color: var(--accent); }
.lead-steps li.final .lead-b { font-weight: 600; }
.explain .kp-bullets { padding-left: 22px; margin: 4px 0 0; }
.explain .kp-bullets li { margin: 8px 0; }
.kp-mline { display: block; margin: 2px 0; font-size: 1.12rem; }
.kp-mline .gridm { margin: 6px 0; }
details.more { margin-top: 14px; border-top: 1px solid var(--line); }
details.more > summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 10px 0; min-height: 44px; }
.split { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0; }
.split .card { background: var(--accent-soft); border: none; }
@media (min-width: 480px) { .split { grid-template-columns: 1fr 1fr; } }
.big { font-size: 1.25rem; margin: 10px 0; }
.finish h2 { margin-bottom: 6px; }

/* Questions */
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.qnum { font-weight: 600; color: var(--muted); font-size: .95rem; }
.badge { font-size: .85rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; }
.badge.calc { background: var(--calc-bg); color: var(--calc-text); }
.badge.nocalc { background: var(--nocalc-bg); color: var(--nocalc-text); }
.prompt { font-size: 1.15rem; margin: 6px 0 10px; }
.answer { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ans-label { font-weight: 600; }
.ans-row { display: flex; align-items: center; gap: 10px; }
.ans-row input {
  flex: 1; min-width: 0; font-size: 1.4rem; padding: 12px 14px; min-height: 60px;
  border: 2px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--text);
}
.ans-row input:focus { outline: none; border-color: var(--accent); }
.ans-row input[readonly] { opacity: .8; }
.unit { font-size: 1.2rem; color: var(--muted); }
.hint { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }

/* Feedback: calm colours, no crosses */
#feedback { scroll-margin-top: 12px; }
.fb { margin-top: 16px; padding: 12px 16px; border-radius: 12px; border-left: 5px solid; }
.fb p { margin: 4px 0; }
.fb-right { background: var(--right-bg); border-color: var(--right-line); }
.fb-wrong { background: var(--look-bg); border-color: var(--look-line); }
.fb-retry { background: var(--accent-soft); border-color: var(--accent); }
.working { margin-top: 12px; }
.working summary { cursor: pointer; color: var(--accent); font-weight: 600; padding: 10px 0; min-height: 44px; }
.working-h { margin-top: 18px; }

/* Worked steps */
.steps { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; scroll-margin-top: 12px; animation: appear .25s ease-out; }
.step-title { font-weight: 600; color: var(--accent); font-size: .95rem; margin-bottom: 4px; }
.step-body { font-size: 1.05rem; }
.step.final { border: 2px solid var(--accent); background: var(--accent-soft); }
.step.focus { border: 2px solid var(--look-line); background: var(--look-bg); }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

/* Maths notation */
/* Expressions never break inside: a piece of maths, or a group of pieces with only spaces between (.mgroup),
   stays on one line and moves to the next line whole if it doesn't fit. */
.m { font-family: var(--maths); font-size: 1.12em; white-space: nowrap; }
.mgroup { white-space: nowrap; }
/* A list of numbers (like 19, 10, 21, …): the maths font, but it may wrap after a comma, since it isn't one expression. */
.mlist { font-family: var(--maths); font-size: 1.12em; }
/* Too wide even on its own line: may break only before = or ≈ (the app makes every other space unbreakable). */
.mfit, .mfit .m, .mfit .mgroup { white-space: normal; }
/* Never the browser's last-resort break inside maths (it cuts anywhere): a piece that's too long shows as too wide instead. */
.m, .mgroup, .mfit { overflow-wrap: normal; word-break: normal; }
.sqrt, .frac, .vec, .m sup { white-space: nowrap; }
/* Safety net: anything still wider than a phone scrolls inside its own box instead of widening the page.
   (The screen check fails any maths that does this, so it shouldn't happen.) */
.explain, .step-body, .fb, .prompt, .hint, details.words dd { overflow-wrap: break-word; overflow-x: auto; }
/* Letters standing for numbers: always italic, always the maths font (inside or outside a line of maths). */
.mv { font-style: italic; font-family: var(--maths); font-size: 1.12em; }
.m .mv { font-size: 1em; }
.m sup, .step-body sup, .explain sup { font-size: .68em; line-height: 0; vertical-align: .55em; }
.sqrt { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.sqrt-sign { font-size: 1.1em; line-height: 1; margin-right: -.02em; }
.sqrt-in { border-top: .075em solid currentColor; padding: .02em .12em 0 .08em; margin-top: .1em; line-height: 1.15; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .9em; }
.frac-top { border-bottom: .075em solid currentColor; padding: 0 .2em; }
.frac-bot { padding: 0 .2em; }
.box { display: inline-block; width: 1.6em; height: 1.1em; border: 2px solid currentColor; border-radius: 4px; vertical-align: -.2em; }

/* Diagrams */
.fig { margin: 12px 0; text-align: center; }
.fig figcaption { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.diagram { width: 100%; max-width: 340px; height: auto; color: var(--text); }
.diagram.grid { max-width: 180px; }
.d-fill { fill: var(--accent-soft); stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.d-fill2 { fill: var(--sq-b); }
.d-missing { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 6 4; }
.d-mark { fill: none; stroke: currentColor; stroke-width: 2; }
.d-label { fill: currentColor; font-size: 17px; font-family: system-ui, sans-serif; }
.d-var { font-family: var(--maths); font-style: italic; font-size: 20px; }
.d-unknown { fill: var(--accent); font-weight: 700; font-family: var(--maths); font-style: italic; font-size: 21px; }
.d-grid line { stroke: currentColor; stroke-opacity: .35; stroke-width: 1; }
.d-edge { fill: none; stroke: currentColor; stroke-width: 2.5; }
.squares .sq-a { fill: var(--sq-a); stroke: currentColor; stroke-width: 2; }
.squares .sq-b { fill: var(--sq-b); stroke: currentColor; stroke-width: 2; }
.squares .sq-c { fill: var(--sq-c); stroke: currentColor; stroke-width: 2; }
.squares .d-tri { fill: var(--surface); stroke: currentColor; stroke-width: 2.5; }
.squares .sq-num { font-weight: 700; font-size: 18px; }
.diagram.squares { max-width: 260px; }

/* Grouped topics (Fractions, Percentages) */
h2.group { font-size: 1.1rem; margin: 22px 0 4px; color: var(--muted); }
.list.grouped .row { border-left: 6px solid var(--accent); }

/* Fraction answer: a top box over a bottom box */
.frac-input { display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; width: 140px; }
.frac-input input {
  font-size: 1.4rem; text-align: center; padding: 8px; min-height: 56px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
}
.frac-input input:focus { outline: none; border-color: var(--accent); }
.frac-line { height: 3px; background: var(--text); border-radius: 2px; }

/* Extra keys for x, x squared, minus and pi */
.keys { display: flex; flex-wrap: wrap; gap: 8px; }
.key {
  min-width: 56px; min-height: 52px; padding: 6px 14px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--maths); font-size: 1.3rem;
}
.key sup { font-size: .65em; }
.preview { margin: 0; color: var(--muted); min-height: 1.5em; }

/* Multiple choice */
.choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.choice {
  min-height: 60px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: 1.15rem; text-align: left; cursor: pointer;
}
.choice:disabled { cursor: default; opacity: .75; }
.choice.is-answer { opacity: 1; border-color: var(--right-line); background: var(--right-bg); }
.choice.is-picked { opacity: 1; border-color: var(--look-line); background: var(--look-bg); }

/* More diagram pieces */
.d-empty { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.d-dot { fill: currentColor; }
.diagram.circle { max-width: 230px; }

/* Grid method for brackets */
.gridm { border-collapse: collapse; margin: 10px auto; font-size: 1.1rem; }
.gridm th, .gridm td { border: 2px solid var(--line); padding: 10px 16px; text-align: center; min-width: 64px; }
.gridm th { background: var(--accent-soft); }
.gridm td { background: var(--surface); }
.d-dot2 { fill: var(--accent); }
/* Strand sections on the year page */
details.strand { margin-top: 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); }
details.strand > summary {
  list-style: none; cursor: pointer; min-height: 60px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 1.1rem;
}
details.strand > summary::-webkit-details-marker { display: none; }
details.strand > summary::after { content: '+'; font-size: 1.5rem; color: var(--accent); margin-left: 10px; }
details.strand[open] > summary::after { content: '\2212'; }
details.strand > summary .count { margin-left: auto; font-weight: 400; font-size: .9rem; color: var(--muted); }
details.strand > .list { padding: 0 10px 12px; margin-top: 0; }
.tile-sub { font-size: .8rem; font-weight: 400; color: var(--muted); }

/* Factor trees and Venn diagrams */
.d-edge2 { stroke: currentColor; stroke-width: 2; }
.d-ring { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.d-venn1 { fill: var(--sq-b); fill-opacity: .45; stroke: currentColor; stroke-width: 2; }
.d-venn2 { fill: var(--sq-a); fill-opacity: .45; stroke: currentColor; stroke-width: 2; }
.d-strong { font-weight: 700; }
.diagram.tree { max-width: 330px; }
.diagram.venn { max-width: 320px; }
.root-index { font-size: .6em; vertical-align: .9em; margin-right: -.35em; }
/* Mixed number and interval answers */
.mixed-input { display: flex; align-items: center; gap: 10px; }
.mixed-input .whole {
  width: 80px; font-size: 1.6rem; text-align: center; padding: 8px; min-height: 64px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
}
.mixed-input .frac-input { width: 110px; }
.interval-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.interval-input input {
  width: 100px; font-size: 1.3rem; text-align: center; padding: 8px; min-height: 56px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
}
.interval-input .m { font-size: 1.3rem; }
.mixed-input input:focus, .interval-input input:focus { outline: none; border-color: var(--accent); }

/* Written methods */
.d-digit { fill: currentColor; font-family: var(--maths); font-size: 22px; }
.d-answer { fill: var(--accent); font-weight: 700; }
.d-carry { fill: var(--accent); font-family: var(--maths); font-size: 14px; }
.diagram.cols { max-width: 240px; }
.diagram.busstop { max-width: 300px; }
.diagram.numline { max-width: 340px; }
.d-band { stroke: var(--accent); stroke-width: 6; stroke-opacity: .55; }
.d-closed { fill: var(--accent); stroke: var(--accent); stroke-width: 2; }
.d-open { fill: var(--surface); stroke: var(--accent); stroke-width: 3; }
.hl { color: var(--accent); background: var(--accent-soft); padding: 0 4px; border-radius: 4px; }
/* A bigger box when it sits in a power */
sup .box { width: 1.5em; height: 1.3em; border-width: 1.5px; vertical-align: -0.1em; }

/* Words in exams box */
details.words { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; background: var(--surface); }
details.words > summary { cursor: pointer; font-weight: 600; color: var(--accent); padding: 12px 0; min-height: 44px; }
details.words dl { margin: 0 0 12px; }
details.words dt { font-weight: 600; margin-top: 8px; }
details.words dd { margin: 2px 0 0; }
.formulae { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); }
.formulae h3 { margin: 0 0 4px; font-size: .95rem; color: var(--accent); }
.formulae p { margin: 6px 0 2px; font-size: .95rem; }
.formulae ul { margin: 0; padding-left: 20px; }
.formulae li { margin: 3px 0; font-size: .95rem; }
.examwords { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--calc-bg); color: var(--text); }
.examwords h3 { margin: 0 0 4px; font-size: .95rem; color: var(--calc-text); }
.examwords ul { margin: 0; padding-left: 20px; }
.examwords li { margin: 2px 0; font-size: .95rem; }

/* Standard form, inequality, coordinates and pairs */
.sf-input, .ineq-input, .pair-input { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-input input, .ineq-input input, .pair-input input {
  width: 92px; font-size: 1.3rem; text-align: center; padding: 8px; min-height: 56px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text);
}
.sf-input input.pow { width: 64px; font-size: 1.05rem; min-height: 44px; align-self: flex-start; }
.sf-input .m, .ineq-input .m { font-size: 1.3rem; }
.big-letter { font-size: 1.6rem !important; }
.signs { display: flex; gap: 6px; }
.sign {
  min-width: 52px; min-height: 52px; font-size: 1.4rem; border-radius: 12px; border: 2px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; font-family: var(--maths);
}
.sign.on { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.pair-box { display: flex; align-items: center; gap: 6px; }
.pair-input input:focus, .sf-input input:focus, .ineq-input input:focus { outline: none; border-color: var(--accent); }

/* Coordinate grids and other new diagrams */
.diagram.coords { max-width: 360px; touch-action: manipulation; }
.tapgrid { cursor: crosshair; }
.d-gridline { stroke: currentColor; stroke-opacity: .16; stroke-width: 1; }
.d-axis { stroke: currentColor; stroke-width: 2; }
.d-axlabel { fill: currentColor; font-family: var(--maths); font-style: italic; font-size: 15px; }
.d-tick { fill: currentColor; font-size: 12px; font-family: system-ui, sans-serif; }
.d-graph { stroke: var(--accent); stroke-width: 3; }
.d-point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.d-tapmark { fill: none; stroke: var(--look-line); stroke-width: 3.5; }
.d-arrow { fill: var(--accent); }
.d-expr { font-family: var(--maths); font-size: 18px; }
.diagram.ineq { max-width: 360px; }
.diagram.rect, .diagram.tri { max-width: 300px; }
.d-var-i { font-style: italic; }
.choice svg { width: 100%; max-width: 340px; display: block; }

/* Table of values: narrow enough for a phone */
.vtable th, .vtable td { min-width: 34px; padding: 8px 5px; font-size: 1rem; }
.vtable { margin: 12px 0; }

/* A pair of equations, with (1) and (2) labels */
.sys { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 8px; display: inline-block; }
.sys div { margin: 4px 0; font-size: 1.1rem; }
.eqlabel { color: var(--muted); font-size: .9rem; margin-left: 10px; }

/* Ratio answers and bar models */
.ratio-input { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ratio-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ratio-name { font-size: .85rem; color: var(--muted); }
.ratio-input input { width: 84px; font-size: 1.4rem; text-align: center; padding: 8px; min-height: 58px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
.ratio-input input:focus { outline: none; border-color: var(--accent); }
.colon { font-size: 1.8rem; padding-bottom: 10px; }
.diagram.ratiobar { max-width: 330px; }
.d-boxval { font-weight: 700; }

.ratiobar rect { stroke: currentColor; stroke-width: 1.5; }

/* Angle diagrams and real-life graphs */
.diagram.geo { max-width: 340px; }
.diagram.lgraph { max-width: 360px; }
.d-arc { stroke: var(--accent); stroke-width: 2; }
.d-ang { font-size: 15px; font-weight: 600; }
.d-ptname { font-size: 14px; font-style: italic; }
.d-pt { fill: currentColor; }

/* Shapes, prisms and cylinders */
.d-dash { stroke-dasharray: 6 5; }
.d-hidden { stroke-dasharray: 5 5; opacity: 0.75; }
.diagram.cyl { max-width: 300px; }
.diagram.prism { max-width: 360px; }

/* Column vectors: two numbers in tall brackets */
.vec { display: inline-flex; vertical-align: middle; border-left: .1em solid currentColor; border-right: .1em solid currentColor; border-radius: .6em / 1.2em; padding: 0 .3em; }
.vec-in { display: inline-flex; flex-direction: column; text-align: center; line-height: 1.2; }
.vec-input { display: inline-flex; flex-direction: column; gap: 6px; padding: 6px 12px; border-left: 3px solid var(--text); border-right: 3px solid var(--text); border-radius: 28px / 70px; }
.vec-input input { width: 92px; font-size: 1.3rem; text-align: center; padding: 8px; min-height: 52px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); }
.vec-input input:focus { outline: none; border-color: var(--accent); }

/* Exact trig values table */
.exact-table { border-collapse: collapse; margin: 10px 0; font-family: var(--maths); font-size: 1.05rem; }
.exact-table th, .exact-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.exact-table th { background: var(--surface); font-weight: 600; }
.vec-input { align-self: flex-start; width: max-content; }

/* Shapes on grids (transformations) */
.d-shape { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.d-obj { fill: var(--accent); fill-opacity: .28; }
.d-img { fill: #d08a2c; fill-opacity: .3; stroke-dasharray: 6 4; }
.d-cand { fill: var(--accent); fill-opacity: .14; }
.d-shapelabel { font-size: 14px; }

/* Spinners, frequency trees and data tables */
.diagram.spinner .d-sector { stroke: currentColor; stroke-width: 2; }
.d-sec0 { fill: var(--accent); fill-opacity: .18; }
.d-sec1 { fill: #d08a2c; fill-opacity: .22; }
.d-sec2 { fill: #7a5fb0; fill-opacity: .18; }
.d-box { fill: var(--bg); stroke: currentColor; stroke-width: 2; }
.d-branch { font-size: 13px; }
.diagram.ftree { max-width: 360px; }
/* Venn diagrams of counts, and probability trees */
.diagram.pvenn { max-width: 340px; }
.d-pframe { fill: none; stroke: currentColor; stroke-width: 2; }
.diagram.ptree { max-width: 380px; }
.d-prob { font-size: 15px; font-weight: 600; }
.d-fracline { stroke: currentColor; stroke-width: 1.5; }
.d-head { font-size: 13px; font-weight: 600; }
.d-out { font-size: 15px; }
/* Statistical charts */
.diagram.catchart, .diagram.scatter { max-width: 340px; }
.diagram.picto { max-width: 360px; }
.diagram.pie { max-width: 360px; }
.d-gridmain { stroke-opacity: .32; }
.d-barc { fill: var(--accent); fill-opacity: .45; stroke: currentColor; stroke-width: 1.5; }
.d-barc.d-vline { fill: currentColor; fill-opacity: 1; stroke: none; }
.d-cat, .d-axlabel { font-size: 13px; }
.d-icon { fill: var(--accent); fill-opacity: .7; stroke: currentColor; stroke-width: 1.5; }
.d-pcat { font-size: 14px; }
.d-pang { font-size: 14px; font-weight: 700; }
.d-pie0 { fill: var(--accent); fill-opacity: .25; }
.d-pie1 { fill: #d08a2c; fill-opacity: .28; }
.d-pie2 { fill: #7a5fb0; fill-opacity: .24; }
.d-pie3 { fill: #3f9a5a; fill-opacity: .26; }
.d-pie4 { fill: #c0504d; fill-opacity: .22; }
.diagram.pie .d-sector { stroke: currentColor; stroke-width: 2; }
.d-cross { stroke: currentColor; stroke-width: 2; fill: none; }
.d-bestfit { stroke: var(--accent); stroke-width: 2.5; }
.stem-leaf { border-collapse: collapse; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stem-leaf td { padding: 4px 12px; }
.stem-leaf .sl-stem { border-right: 2px solid currentColor; text-align: right; font-weight: 700; }
.stem-leaf .sl-leaves { letter-spacing: .25em; text-align: left; }
.sl-key { margin: 6px 0 0; font-size: .95rem; }
.table-wrap { overflow-x: auto; margin: 10px 0; }
.data-table { border-collapse: collapse; font-size: 1rem; }
.data-table th, .data-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; min-width: 44px; }
.data-table th { background: var(--surface); font-weight: 600; }
.data-table td.unknown { background: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------------- For tutors ---------------- */
.tutor-link { text-align: center; font-size: .9rem; margin-top: 4px; }
.tutor-list { padding-left: 1.2em; margin: 0; }
.tutor-list li { margin: 6px 0; }
.tutor-code-input, .share-link { width: 100%; font: inherit; font-size: 1.05rem; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); margin: 6px 0; }
.share-link { font-size: .85rem; word-break: break-all; resize: vertical; }
.share-warn { border-left: 4px solid var(--accent); padding: 8px 12px; margin: 10px 0; background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.tutor-code-input:focus, .share-link:focus { outline: none; border-color: var(--accent); }
.pack-opts h2 { font-size: 1.05rem; margin: 14px 0 4px; }
.pack-opts h2:first-child { margin-top: 0; }
.pack-opts label.tick { display: flex; width: auto; height: auto; border-radius: 0; background: none; color: var(--text); font-weight: 400; font-size: 1rem; justify-content: flex-start; align-items: flex-start; gap: 10px; padding: 6px 0; min-height: 40px; }
.pack-opts label.tick input { width: 22px; height: 22px; flex: none; margin-top: 3px; }
.pack-opts .radios { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 10px 0; }
.pack-opts .radios label.tick { display: inline-flex; }
.seed-in { width: 7.5em; font: inherit; padding: 6px 8px; border: 2px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
.pack-actions { margin: 14px 0 4px; }
.pk-pages { margin: 0 0 14px; font-size: .95rem; color: var(--muted); }
/* An out-of-sight copy of a pack at the printed size, used to count its pages (js/tutor.js). Matches the print rules below. */
.pk-measure { position: absolute; left: -10000px; top: 0; width: 182mm; visibility: hidden; font-size: 11pt; line-height: 1.55; }
.pk-measure .pack { border: none; padding: 0; margin: 0; font-size: 11pt; }
.pk-measure .pk-answers { border-top: none; margin-top: 0; }
.guide h2 { font-size: 1.1rem; margin: 18px 0 6px; }
.guide h2:first-child { margin-top: 0; }

/* A pack looks like a sheet of paper on screen (also in dark mode), and prints in black and white. */
.pack, .tmap {
  --bg: #ffffff; --surface: #ffffff; --text: #111111; --muted: #4a4a4a; --line: #8c8c8c;
  --accent: #333333; --accent-text: #ffffff; --accent-soft: #ededed; --right-bg: #ededed; --right-line: #333333;
  --look-bg: #f4f4f4; --look-line: #555555; --calc-bg: #f4f4f4; --calc-text: #111111; --nocalc-bg: #f4f4f4; --nocalc-text: #111111;
  --sq-a: #e6e6e6; --sq-b: #d0d0d0; --sq-c: #bdbdbd;
  background: #fff; color: #111;
}
.pack { border: 1px solid #c8c8c8; padding: 20px 18px; margin: 16px -4px; font-size: 16px; line-height: 1.5; }
.pk-head { border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 8px; }
.pk-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 8px; }
.pk-name { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.pk-blank { display: inline-block; min-width: 7em; border-bottom: 1px solid #111; height: 1.1em; vertical-align: baseline; }
.pk-blank.pk-wide { min-width: 12em; flex: 1; }
.pk-sub { margin: 0; font-size: .85rem; color: #4a4a4a; }
/* The sheet code at the top of the questions and of the answers, so the two can be matched once separated. */
.pk-code { font-size: .8rem; font-weight: 400; color: #4a4a4a; }
.pk-code-top { float: right; margin: .45em 0 0 12px; }
.pk-code-ans { margin: 2px 0 6px; }
.pk-h2 { font-size: 1.2rem; margin: 22px 0 0; padding-top: 10px; border-top: 1px solid #8c8c8c; }
.pk-role { margin: 0 0 6px; font-size: .85rem; color: #4a4a4a; }
.pk-explain p { margin: 6px 0; }
.pk-formulae { font-size: .9rem; border-left: 3px solid #555; padding: 2px 10px; margin: 8px 0; }
.pk-formulae p { margin: 2px 0; }
.pk-example { border: 1px solid #8c8c8c; border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.pk-example h3, .pk-explain h3, .pk-qhead, .pk-ansblock h3 { font-size: 1rem; margin: 6px 0; }
.pk-steps { margin: 4px 0; padding-left: 1.4em; }
.pk-steps li { margin: 3px 0; }
.pk-qs, .pk-alist { padding-left: 1.6em; margin: 4px 0; }
.pk-q { margin: 10px 0 14px; padding-left: 4px; }
.pk-q .pk-prompt { margin: 0; }
.pk-calc { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #4a4a4a; }
.pk-fig { margin: 6px 0; }
.pk-fig svg, .pk-fig .diagram svg { max-width: 100%; height: auto; max-height: 7.5cm; }
.pk-options { list-style: none; padding: 0; margin: 6px 0; }
.pk-options li { margin: 3px 0; }
/* Space to write (js/pack.js P.spaceOf): about two or three lines for one or two short steps, more for longer working. */
.pk-space-0 { height: .3cm; }
.pk-space-1 { height: 1.5cm; }
.pk-space-2 { height: 2.3cm; }
.pk-space-3 { height: 3.1cm; }
.pk-space-4 { height: 4cm; }
.pk-calc-all { margin: 0 0 4px; }
.pk-explain .pk-lines { line-height: 1.7; }
/* Short explanation: bullets, one idea each, maths on its own line underneath. */
.pk-bullets { margin: 4px 0 6px; padding-left: 1.3em; }
.pk-bullets li { margin: 3px 0; }
.pk-mline { display: block; margin: 1px 0 2px .3em; font-size: 1.08em; }
.pk-mline .gridm { margin: 4px 0; }
/* Grids on paper: compact, so a pack doesn't grow a page */
.pack .gridm { font-size: 1rem; margin: 4px 0; }
.pack .gridm th, .pack .gridm td { padding: 3px 12px; min-width: 40px; border-width: 1px; }
.pk-ansline { margin: 2px 0 0; text-align: right; }
.pk-ansline .pk-blank { min-width: 9em; }
.pk-answers { margin-top: 26px; border-top: 2px solid #111; }
.pk-ansblock { margin-top: 8px; }
.pk-a { margin: 6px 0 10px; }
.pk-answer-m { font-family: var(--maths); font-size: 1.08em; }
/* On paper: the browser's slanted copy of the maths font doesn't survive printing, so letters use a font with real italics. */
.pack .mv, .tmap .mv { font-family: Cambria, "Times New Roman", serif; }
.pk-a p { margin: 0; }
.pk-note { font-style: italic; }
.pk-foot { margin-top: 18px; padding-top: 6px; border-top: 1px solid #8c8c8c; font-size: .75rem; color: #4a4a4a; }

/* Topic maps: columns, earliest on the left. */
.tmap { padding: 12px; margin: 16px 0; border: 1px solid #c8c8c8; }
.tmap h2 { margin-top: 0; }
.tm-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 10px; overflow-x: auto; }
.tm-colhead { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; color: #4a4a4a; }
.tm-box { border: 1.5px solid #333; border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; font-size: .85rem; line-height: 1.3; break-inside: avoid; }
.tm-box span { display: block; font-size: .75rem; color: #4a4a4a; margin-top: 3px; }
.tm-skillbox { border-style: dashed; }
.tm-list li { margin: 4px 0; }
.tm-skill { font-style: normal; color: #4a4a4a; }

/* A shared plan */
.shared-rows { list-style: none; padding: 0; margin: 4px 0 12px; }
.shared-rows li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 0 6px 10px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--st, var(--line)); }
.shared-area h3 { font-size: 1rem; margin: 14px 0 2px; }
.shared-area h3 .count { font-weight: 400; color: var(--muted); font-size: .9rem; }

@page { size: A4; margin: 14mm 14mm 15mm; }
@media print {
  :root { --bg: #fff; --surface: #fff; --text: #111; --muted: #4a4a4a; --line: #8c8c8c; --accent: #333; --accent-soft: #ededed; --accent-text: #fff; }
  body { background: #fff; color: #111; font-size: 11pt; }
  .mv { font-family: Cambria, "Times New Roman", serif; }
  #app { max-width: none; padding: 0; }
  .bar, .crumbs, .no-print, .privacy, .tutor-link, .pack-opts, .actions { display: none !important; }
  .pack { border: none; padding: 0; margin: 0; font-size: 11pt; }
  .pk-answers { break-before: page; border-top: none; margin-top: 0; }
  .pk-q, .pk-a, .pk-example, .pk-fig, .pk-formulae, .tm-box { break-inside: avoid; }
  .pk-h2, .pk-example h3, .pk-explain h3, .pk-qhead, .pk-ansblock h3 { break-after: avoid; }
  .pk-sec + .pk-sec .pk-h2 { break-before: auto; }
  .tmap { border: none; padding: 0; margin: 0; }
  .tmap + .tmap { break-before: page; }
  .tm-cols { overflow: visible; grid-auto-columns: minmax(0, 1fr); }
  /* A shared plan on one page */
  .shared-plan { font-size: 8pt; line-height: 1.2; }
  .shared-plan h1 { font-size: 13pt; margin: 0 0 2px; }
  .shared-plan h2 { font-size: 10pt; margin: 6px 0 2px; }
  .shared-plan .lead, .shared-plan p { font-size: 8pt; margin: 2px 0; }
  .shared-plan .list { display: block; columns: 2; column-gap: 6mm; }
  .shared-plan .list .row { display: flex; min-height: 0; padding: 1px 6px; border-width: 0 0 0 3px; border-radius: 0; margin: 0 0 1px; break-inside: avoid; }
  .shared-plan .row-sub { display: none; }
  .shared-plan .row-title { font-weight: 400; }
  .shared-plan .covered { columns: 3; column-gap: 5mm; }
  .shared-plan .covered h2 { column-span: all; }
  .shared-plan .shared-area h3 { font-size: 8.5pt; margin: 3px 0 0; break-after: avoid; }
  .shared-plan .shared-area h3 .count { display: none; }
  .shared-plan .shared-rows { margin: 0 0 3px; }
  .shared-plan .shared-rows li { padding: 0 0 0 4px; border-bottom: 0; border-left-width: 2px; gap: 4px; break-inside: avoid; }
  .shared-plan .shared-rows .muted { display: none; }
  .shared-plan .chip { font-size: 6.5pt; padding: 0 4px; min-height: 0; line-height: 1.4; white-space: nowrap; }
}