/* ==========================================================================
   OpenRevise.

   Clean, cool and calm: white pages on a pale blue-grey, a heavy geometric
   sans for headings (Figtree) set tight, and a typeface built to be easy to
   read for the words (Atkinson Hyperlegible Next). Buttons are soft
   rectangles; cards are white with a hairline edge and a gentle shadow;
   small labels above a heading are spaced-out capitals. The brand's teal
   green is the one strong colour on a page, and each study tool has a
   pastel tile of its own (purple, green, orange, teal) for its icon.

   Each subject shifts --accent on its own pages, for its edges, icons and
   links. The highlighter (--mark) is for what a reader should not miss: a
   key term, a search match.

   The old glass tokens (--glass, --glass-strong ...) still exist so every
   component that names them keeps working; they are solid surfaces.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2-variations"), url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next.woff2") format("woff2-variations"), url("../fonts/atkinson-next.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-italic.woff2") format("woff2-variations"), url("../fonts/atkinson-next-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
/* The handwriting beside the picture on the home page, and nowhere else: a
   browser only fetches it for a page that uses it. */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Brand teal green, used wherever no subject is in scope. Dark enough for
     white text on a button (5.2:1) and for a link on white. --brand-ink is
     the deeper shade for a word in a heading ("Go further."). */
  --brand:       #177a64;
  --brand-dark:  #5fd4b5;
  --brand-soft:  #e3f3ef;
  --brand-deep:  #0d5444;
  --brand-ink:   #0f6e57;
  /* The line drawings, where any are left: dark green ink, one flat fill. */
  --draw-ink:    #0c3b31;
  --draw-fill:   #2fae8f;
  --draw-pale:   #c8ece3;

  --accent:      var(--brand);
  --accent-dark: var(--brand-dark);
  --accent-soft: var(--brand-soft);

  /* Ink is a blue-black, and the greys under it lean cool to match. */
  --ink:        #0b1220;
  --ink-soft:   #3e4a5b;
  --ink-faint:  #5f6f86;
  --ink-ghost:  #a3adbb;

  --bg:         #ffffff;
  --surface:    #ffffff;
  --surface-2:  #f4f7f9;
  --line:       #e3e8ee;
  --line-firm:  #cdd6df;
  /* The pale blue-grey behind the top of the home page and every page's
     heading, and the mint of the shape behind the home page's picture. */
  --hero-wash:  #f4f7f9;
  --wash-soft:  #f9fafb;
  --mint:       #d9efea;
  /* Spaced-out capitals above a heading. */
  --eyebrow:    #5f6f86;

  /* Each study tool's tile: a pastel ground and the ink drawn on it. */
  --tile-notes:      #f1e6fb;  --tile-notes-ink:      #7a3fc4;
  --tile-questions:  #e1f2e8;  --tile-questions-ink:  #1d7a4c;
  --tile-cards:      #fcefe2;  --tile-cards-ink:      #b4600f;
  --tile-packs:      #dcf0f1;  --tile-packs-ink:      #137a80;

  /* The highlighter: a key term, a match, the word that matters. */
  --mark:       #fde68a;
  --mark-ink:   #0b1220;

  /* Panels and glass are the same solid sheet. */
  --panel:       var(--surface);
  --panel-line:  var(--line);
  --glass:       var(--surface);
  --glass-strong: var(--surface);
  --glass-line:  var(--line);
  --glass-edge:  transparent;
  --glass-blur:  none;
  --hover:       rgba(11, 18, 32, .045);

  --accent-ink:  var(--accent);
  --accent-wash: var(--accent-soft);

  --ok:   #177a54;
  --warn: #8a5d0a;
  --bad:  #b3341f;
  --ok-soft:  #e3f3ea;
  --bad-soft: #fbe9e5;

  --r-xs: 4px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 16px;
  /* Buttons and the search box are soft rectangles; chips and tags stay
     capsules. */
  --r-btn:  10px;
  --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 14px 34px -14px rgba(15, 23, 42, .18);
  --shadow-lg: 0 4px 10px rgba(15, 23, 42, .05), 0 32px 64px -28px rgba(15, 23, 42, .3);
  --shadow-glass: var(--shadow-md);

  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Figtree", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  /* Quotations from a source keep a book face: the system's own serif. */
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


  --bar-h: 76px;
  --bar-gap: 0px;
  --wrap: 1240px;
  --text: 720px;
}

/* Paper is always the light theme. Both ways of being in dark mode - the
   system's and the reader's own switch - are for the screen only, so a
   printout is dark type on white whatever the reader had chosen: dark mode's
   pale text would otherwise print as near-white on white paper. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-ink:  var(--accent-dark);
    --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent);
    --brand-ink: #5fd4b5;
    --ink:       #eef3f7;
    --ink-soft:  #b7c3cf;
    --ink-faint: #8796a6;
    --ink-ghost: #56636f;
    --bg:        #0b1117;
    --surface:   #111a21;
    --surface-2: #16212a;
    --line:      #23303a;
    --line-firm: #36444f;
    --mark:      rgba(255, 214, 80, .28);
    --mark-ink:  #f6f3e8;
    --hover:     rgba(255, 255, 255, .055);
    --hero-wash: #0f181f;
    --wash-soft: #0d151b;
    --mint:      #12302b;
    --eyebrow:   #8796a6;
    --tile-notes:      #2a2140;  --tile-notes-ink:      #c6a6f5;
    --tile-questions:  #16301f;  --tile-questions-ink:  #7fd9a6;
    --tile-cards:      #36261a;  --tile-cards-ink:      #f2b678;
    --tile-packs:      #132f33;  --tile-packs-ink:      #7fd3d8;
    --draw-ink:  #d6f5ec;
    --draw-fill: #2a9a80;
    --draw-pale: #17403a;
    --ok:   #5fd398;
    --warn: #e2b45c;
    --bad:  #f08f7c;
    --ok-soft:  color-mix(in srgb, #5fd398 14%, transparent);
    --bad-soft: color-mix(in srgb, #f08f7c 14%, transparent);
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, .3);
    --shadow:    0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .8);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .85);
  }
}

@media screen {
  :root[data-theme="dark"] {
    --accent-ink:  var(--accent-dark);
    --accent-wash: color-mix(in srgb, var(--accent-dark) 16%, transparent);
    --brand-ink: #5fd4b5;
    --ink:       #eef3f7;
    --ink-soft:  #b7c3cf;
    --ink-faint: #8796a6;
    --ink-ghost: #56636f;
    --bg:        #0b1117;
    --surface:   #111a21;
    --surface-2: #16212a;
    --line:      #23303a;
    --line-firm: #36444f;
    --mark:      rgba(255, 214, 80, .28);
    --mark-ink:  #f6f3e8;
    --hover:     rgba(255, 255, 255, .055);
    --hero-wash: #0f181f;
    --wash-soft: #0d151b;
    --mint:      #12302b;
    --eyebrow:   #8796a6;
    --tile-notes:      #2a2140;  --tile-notes-ink:      #c6a6f5;
    --tile-questions:  #16301f;  --tile-questions-ink:  #7fd9a6;
    --tile-cards:      #36261a;  --tile-cards-ink:      #f2b678;
    --tile-packs:      #132f33;  --tile-packs-ink:      #7fd3d8;
    --draw-ink:  #d6f5ec;
    --draw-fill: #2a9a80;
    --draw-pale: #17403a;
    --ok:   #5fd398;
    --warn: #e2b45c;
    --bad:  #f08f7c;
    --ok-soft:  color-mix(in srgb, #5fd398 14%, transparent);
    --bad-soft: color-mix(in srgb, #f08f7c 14%, transparent);
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, .3);
    --shadow:    0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .8);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 60px -24px rgba(0, 0, 0, .85);
  }
}

/* The two derived accent tokens have to be resolved on <body>, not on :root.
   A subject's colours arrive as inline custom properties on <body>, and an
   alias written on :root is substituted against :root's own values — so
   --accent-ink and --accent-wash stayed brand green on every subject page and
   nothing but the solid .btn ever took the subject's colour. Declaring them
   here, below where --accent is set, is what makes History read as History.
   The dark variants repeat because a value set on <body> would otherwise beat
   the one :root carries. */
body {
  --accent-ink:  var(--accent);
  --accent-wash: var(--accent-soft);
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    --accent-ink:  var(--accent-dark);
    --accent-wash: color-mix(in srgb, var(--accent-dark) 15%, transparent);
  }
}

@media screen {
  :root[data-theme="dark"] body {
    --accent-ink:  var(--accent-dark);
    --accent-wash: color-mix(in srgb, var(--accent-dark) 15%, transparent);
  }
}

/* -- base ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  margin: 0 0 .45em;
  font-family: var(--display);
  line-height: 1.12;
  letter-spacing: -.018em;
  font-weight: 750;
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); letter-spacing: -.04em; font-weight: 800; line-height: 1.04; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -.03em; font-weight: 800; }
h3 { font-size: 1.18rem; letter-spacing: -.01em; font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; }

p { margin: 0 0 1em; }

a { color: var(--accent-ink); text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* The highlighter: drawn a little lower than the letters, as a pen would. */
mark {
  background: linear-gradient(transparent 12%, var(--mark) 12%, var(--mark) 88%, transparent 88%);
  color: var(--mark-ink); padding: 0 .12em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

::selection { background: var(--mark); color: var(--mark-ink); }

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

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-text { width: min(100% - 2rem, var(--text)); margin-inline: auto; }

.visually-hidden {
  position: absolute; 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: -999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: .6rem 1rem; border-radius: var(--r-sm);
}

/* Small labels inside a page are sentence case and quiet. */
.label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin: 0;
}
.label-accent { color: var(--accent-ink); }

/* The line above a page's or a section's heading is spaced-out capitals in
   a cool grey, small enough that the heading under it still does the
   talking. A page head's .label is the same line. */
.eyebrow, .page-head > .label, .section-eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1.5;
  color: var(--eyebrow);
}

.lede { font-size: 1.12rem; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }

/* -- the page and its surfaces ------------------------------------------------
   The page is paper. What sits on it is either nothing (a heading, a list
   ruled with hairlines) or a sheet: a lighter surface with a hairline edge.
   .glass and .panel-card are both that sheet now; the names are kept so
   every template that uses them still does. */

body.site { background: var(--bg); }

.glass, .glass-strong {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.panel-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* A rule across the page, between one part and the next. */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* -- the bar along the top -------------------------------------------------
   Full width, on the paper, with a hairline under it: the wordmark on the
   left, the menus in the middle, search and the theme switch on the right. */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar { -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); }
}
.topbar-inner {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
  height: var(--bar-h);
  display: flex; align-items: center; gap: .25rem;
}

.brand {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; flex: none;
  margin-right: 1.1rem;
  font-family: var(--display);
  font-size: 1.38rem; font-weight: 800; letter-spacing: -.03em;
  text-decoration: none; color: var(--ink);
}
.logo-mark { display: block; flex: none; }
.brand-name { line-height: 1; }

/* The name as a wordmark: "open" in ink, "revise" in the brand's green. */
.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: 1.95rem; line-height: 1; letter-spacing: -.045em;
  color: var(--ink); white-space: nowrap;
}
.wordmark-2 { color: var(--brand); }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark-2 { color: var(--brand-dark); }
}
@media screen {
  :root[data-theme="dark"] .wordmark-2 { color: var(--brand-dark); }
}

/* The menus sit in the middle of the bar, between the name and the end. */
.topnav { display: flex; align-items: center; gap: .35rem; margin-inline: auto; }
.topnav-item { position: relative; }

.topnav-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 42px; padding: 0 .85rem;
  border-radius: var(--r-btn);
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-size: 1.04rem; font-weight: 550;
  transition: background .15s ease, color .15s ease;
}
.topnav-btn .icon { width: 15px; height: 15px; color: var(--ink-soft); transition: transform .2s ease; }
.topnav-btn:hover { background: var(--hover); }
.topnav-btn[aria-expanded="true"] { background: var(--surface-2); }
.topnav-btn[aria-expanded="true"] .icon { transform: rotate(180deg); color: inherit; }
.topnav-btn[aria-current="page"] { color: var(--brand); }

.topbar-end { display: flex; align-items: center; gap: .3rem; margin-left: auto; flex: none; }
.topnav + .topbar-end { margin-left: 0; }

.icon-btn {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn[aria-expanded="true"] { background: var(--surface-2); }
.icon-btn .icon { width: 21px; height: 21px; }

/* The board being followed, with a cross to stop following it. */
.board-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 32px; padding: 0 .55rem 0 .8rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: .82rem; font-weight: 650; text-decoration: none;
}
.board-chip .icon { width: 13px; height: 13px; color: var(--ink-faint); }
.board-chip:hover { border-color: var(--ink-faint); }

/* -- hamburger (a phone) -------------------------------------------------- */

.nav-toggle { display: none; }
.nav-toggle-bars { display: grid; gap: 4px; width: 18px; }
.nav-toggle-bars span {
  display: block; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- the theme switch ---------------------------------------------------- */

.theme-toggle {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-ink); }
.theme-toggle .icon { display: block; }
.topbar .theme-toggle { width: 42px; height: 42px; border: 0; border-radius: var(--r-btn); background: transparent; color: var(--ink); }
.topbar .theme-toggle:hover { background: var(--hover); color: var(--ink); }

/* Show the scheme you would switch *to*: a moon in light, a sun in dark. */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

/* -- "Study tools", "Resources" and the search ------------------------------ */

.pop {
  position: absolute; top: calc(100% + 12px); left: -.25rem; z-index: 5;
  width: 360px;
  padding: .35rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  animation: pop-in .16s cubic-bezier(.2, .8, .3, 1);
}
.pop[hidden] { display: none; }
.pop-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .65rem .7rem;
  border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none;
  transition: background .14s ease;
}
.pop-item:hover, .pop-item:focus-visible { background: var(--hover); }
.pop-item b { display: block; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: -.005em; }
.pop-item small { display: block; font-size: .82rem; color: var(--ink-faint); line-height: 1.4; }

/* A resource's icon, on a pale tile like the cards on the home page. */
.pop-icon {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand);
}
.pop-icon .icon { width: 20px; height: 20px; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pop-icon { background: var(--surface-2); color: var(--brand-dark); }
}
@media screen {
  :root[data-theme="dark"] .pop-icon { background: var(--surface-2); color: var(--brand-dark); }
}

/* The exam board, along the foot of "Resources". */
.pop-foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem .8rem;
  margin: .35rem -.35rem -.35rem; padding: .75rem 1.05rem .8rem;
  border-top: 1px solid var(--line);
  background: var(--wash-soft); border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.pop-foot-label { font-size: .8rem; font-weight: 650; color: var(--ink-faint); }
.pop-foot .board-switch a { font-size: .8rem; }

/* The search button's panel, under the right-hand end of the bar. Its
   suggestions open inside it rather than hanging off its foot. */
.pop-search { left: auto; right: -.25rem; width: min(440px, calc(100vw - 1.5rem)); padding: .6rem; }
.pop-search .subject-search { margin: 0; max-width: none; flex-wrap: wrap; }
.pop-search .subject-search > .icon { top: 14px; }
.pop-search .subject-search-key { top: 12px; }
.pop-search .suggest {
  position: static; flex-basis: 100%; margin-top: .4rem; padding: .2rem 0 0;
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* A study tool's mark: a small line drawing in ink, no tile behind it. */
.tool-icon {
  --tool-fill: transparent;
  --tool-fill-2: var(--surface-2);
  --tool-mark: var(--mark);
  flex: none;
  display: grid; place-items: center;
  width: calc(var(--tool-size, 36px) + 4px); height: calc(var(--tool-size, 36px) + 4px);
  color: var(--ink);
}
.tool-icon svg { width: var(--tool-size, 36px); height: auto; }

/* -- "Search for a subject" ------------------------------------------------ */

.subject-search {
  position: relative;
  flex: 1 1 300px; max-width: 420px;
  margin-left: .6rem;
  display: flex; align-items: center;
}
.subject-search > .icon {
  position: absolute; left: 1.05rem; z-index: 1;
  width: 18px; height: 18px;
  color: var(--ink-faint); pointer-events: none;
}
.subject-search input {
  width: 100%; height: 46px;
  padding: 0 2.6rem 0 2.75rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--ink);
  font: inherit; font-size: .94rem;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.subject-search input::placeholder { color: var(--ink-faint); }
.subject-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.subject-search input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.subject-search-key {
  position: absolute; right: .95rem;
  min-width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-firm); border-radius: 6px;
  color: var(--ink-faint); font: 600 .72rem var(--mono);
  pointer-events: none;
}
.subject-search input:focus ~ .subject-search-key,
.subject-search input:not(:placeholder-shown) ~ .subject-search-key { display: none; }

.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 6;
  list-style: none; margin: 0; padding: .35rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  max-height: min(60vh, 420px); overflow-y: auto;
}
.suggest[hidden] { display: none; }
.suggest a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: .95rem;
}
.suggest .icon { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.suggest .soon { margin-left: auto; }
.suggest [aria-selected="true"] a, .suggest a:hover { background: var(--hover); }
.suggest .suggest-all { color: var(--accent-ink); font-weight: 600; }
.suggest-empty { padding: .7rem .8rem; color: var(--ink-faint); font-size: .9rem; }

.soon {
  display: inline-block; flex: none;
  padding: 0 .4rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--r-xs);
  color: var(--ink-faint);
  font-size: .74rem; font-weight: 600;
}

/* -- "Start studying" ------------------------------------------------------ */

.mega { position: fixed; inset: 0; z-index: 45; }
.mega[hidden] { display: none; }

.mega-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 24, 17, .4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade-in .2s ease;
}

.mega-panel {
  position: absolute;
  top: calc(var(--bar-h) + 10px);
  left: max(1rem, calc((100vw - var(--wrap)) / 2));
  width: 380px;
  max-height: calc(100vh - var(--bar-h) - 28px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 34px 80px -24px rgba(8, 24, 16, .45), 0 10px 28px -8px rgba(8, 24, 16, .16);
  overflow: hidden;
  animation: pop-in .2s cubic-bezier(.2, .8, .3, 1);
  transition: width .32s cubic-bezier(.2, .8, .3, 1);
}
.mega.has-detail .mega-panel { width: min(100vw - 2rem, var(--wrap)); }

.mega-bar {
  display: none;
  align-items: center; gap: .7rem;
  padding: .7rem .9rem .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mega.has-detail .mega-bar { display: flex; }
.mega-back { background: var(--surface-2); }
.mega-close { margin-left: auto; background: var(--surface-2); }
.mega-crumbs {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
}
.mega-crumbs a { color: var(--ink-faint); text-decoration: none; }
.mega-crumbs a:hover { color: var(--ink); }
.mega-crumbs .mega-crumb-subject a { color: var(--ink); }
.mega-crumbs .icon { width: 16px; height: 16px; color: var(--ink-ghost); }
.mega-crumb-subject { display: none; align-items: center; gap: .4rem; }
.mega.has-detail .mega-crumb-subject { display: inline-flex; }

.mega-body { display: flex; min-height: 0; flex: 1 1 auto; }

.mega-subjects {
  position: relative;
  flex: none; width: 380px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.4rem 1rem 0;
  background: var(--surface);
}
.mega.has-detail .mega-subjects { border-right: 1px solid var(--line); }

.mega-title { margin: 0 .6rem .4rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; }
.mega-group {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.1rem .6rem .45rem;
  font-family: var(--sans); font-size: .76rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}
.mega-count {
  padding: .05rem .5rem; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-soft); font-size: .72rem; letter-spacing: 0;
}
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.mega-subject, .mega-row {
  display: flex; align-items: center; gap: .8rem;
  min-height: 48px;
  padding: .45rem .7rem .45rem .55rem;
  border-radius: 14px;
  color: var(--ink); text-decoration: none;
  font-size: 1rem;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.mega-subject > .icon, .mega-row > .icon:last-child {
  margin-left: auto; width: 18px; height: 18px; flex: none;
  color: var(--ink-faint);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
}
.mega-subject:hover, .mega-row:hover, .mega-subject:focus-visible, .mega-row:focus-visible {
  background: var(--hover); color: var(--ink);
}
.mega-subject:hover { background: color-mix(in srgb, var(--dot, var(--brand)) 9%, var(--surface)); }
.mega-subject:hover > .icon, .mega-row:hover > .icon:last-child,
.mega-subject[aria-current] > .icon { opacity: 1; transform: none; }
.mega-subject[aria-current] {
  background: color-mix(in srgb, var(--dot, var(--brand)) 13%, var(--surface));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--dot, var(--brand)) 45%, transparent);
  color: var(--ink);
}
.mega-subject[aria-current] > .icon { color: var(--dot, var(--brand)); }

/* Each subject's own picture, on a tile of its own colour. */
.mega-subject-icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--dot, var(--brand)) 15%, var(--surface));
}
.mega-subject-icon .subject-icon { width: 28px; height: 28px; }
.mega-subject-text { display: grid; gap: 0; min-width: 0; line-height: 1.2; }
.mega-subject-name { font-family: var(--display); font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; }
.mega-subject-meta { color: var(--ink-faint); font-size: .8rem; font-weight: 500; }
/* A subject still being written: listed, quieter, and plainly on its way. */
.mega-subject.is-soon { min-height: 44px; }
.mega-subject.is-soon .mega-subject-icon { filter: grayscale(.7); opacity: .7; }
.mega-subject.is-soon .mega-subject-name { color: var(--ink-soft); font-weight: 650; }

/* "Scroll for more": a fade at the foot of the list until it is scrolled. */
.mega-more {
  position: sticky; bottom: 0;
  margin: 1rem -1.1rem 0; padding: 2.2rem 0 .8rem;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-size: .92rem; font-weight: 550; color: var(--ink-soft);
  background: linear-gradient(to bottom, transparent, var(--glass-strong) 55%);
  pointer-events: none;
  transition: opacity .2s ease;
}
.mega-more .icon { width: 16px; height: 16px; }
.mega-subjects.is-end .mega-more { opacity: 0; }

.mega-detail {
  display: none;
  flex: 1 1 auto; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem 1.7rem 1.8rem;
  background: var(--surface-2);
}
.mega.has-detail .mega-detail { display: block; }
.mega-pane { animation: fade-in .2s ease; }
.mega-pane[hidden] { display: none; }

.mega-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
.mega-boards.is-single { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.mega-board {
  padding: 1rem .7rem .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-xs);
}
.mega-board h3 {
  margin: 0 .55rem .7rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--accent-ink);
}
.mega-row.is-head {
  background: var(--accent-wash); color: var(--ink); font-weight: 700;
  min-height: 46px; margin-bottom: .3rem; padding-left: .8rem;
}
.mega-row.is-head .code {
  padding: .1rem .5rem; border-radius: var(--r-pill);
  background: var(--surface); font-size: .74rem; font-weight: 700; color: var(--ink-faint);
}
.mega-row .tool-icon { width: 26px; height: 26px; }
.mega-row .tool-icon svg { width: 22px; }

/* The choice a subject with more than one course asks before its boards. */
.mega-pathway { display: grid; gap: 1.3rem; margin: 0 0 1.8rem; max-width: 760px; }
.mega-step h3 { margin: 0 .2rem .65rem; font-size: 1.15rem; font-weight: 720; letter-spacing: -.02em; }
.mega-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mega-choice {
  position: relative;
  display: grid; align-content: start; gap: .25rem; text-align: left;
  padding: .95rem 1.1rem; border-radius: 16px;
  border: 1.5px solid var(--line-firm); background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.mega-choice:hover { border-color: var(--brand);  }
.mega-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); }
.mega-choice[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: .55rem; right: .6rem;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1;
}
.mega-choice b { font-size: 1rem; }
.mega-choice span { font-size: .82rem; line-height: 1.4; color: var(--ink-soft); }
.mega-choice.is-all { border-style: dashed; }
.mega-wait { margin: 0 .2rem; color: var(--ink-soft); font-size: .92rem; }
.mega-wait[hidden], .mega-after[hidden] { display: none; }
/* Both answered: the questions fold into this one line until Change is pressed. */
.mega-picked {
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .8rem .7rem 1.05rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--accent); background: var(--accent-wash);
  color: var(--ink-soft); font-size: .95rem;
}
.mega-picked b { color: var(--ink); }
.mega-change {
  flex: none; padding: .3rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-firm); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer;
}
.mega-change:hover { border-color: var(--brand); color: var(--ink); }
.mega-pathway.is-done .mega-picked { display: flex; }
.mega-pathway.is-done:not(.is-open) .mega-step { display: none; }

.mega-soon { max-width: 560px; padding: .4rem .2rem; }
.mega-soon h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.mega-soon p { color: var(--ink-soft); }
.mega-soon-label { margin: 1.4rem 0 .6rem; font-weight: 700; color: var(--ink) !important; }
.mega-soon-links { display: flex; flex-wrap: wrap; gap: .45rem; }

.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-firm);
  background: var(--surface);
  color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 600;
  transition: border-color .14s ease, background .14s ease;
}
.pill:hover { border-color: var(--accent); background: var(--accent-wash); }

/* What only the phone's panel carries: the search, the tools, the boards. */
.mega-phone { display: none; }

.board-switch { display: flex; flex-wrap: wrap; gap: .35rem; }
.board-switch a {
  padding: .32rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-firm);
  color: var(--ink-soft); text-decoration: none;
  font-size: .82rem; font-weight: 600;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.board-switch a:hover { border-color: var(--ink-faint); color: var(--ink); }
.board-switch a[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }

.mega-legal { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 1.6rem .7rem 0; }
.mega-legal a { color: var(--ink-faint); font-size: .85rem; text-decoration: none; }
.mega-legal a:hover { color: var(--ink); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* While a menu fills the screen, the page behind it stays still. */
body.mega-locked { overflow: hidden; }

/* -- the bar on a phone ---------------------------------------------------- */

@media (max-width: 980px) {
  :root { --bar-h: 64px; }
  .topnav { display: none; }
  .nav-toggle { display: grid; }
  .topbar-inner { position: relative; padding-left: .25rem; }
  .wordmark { font-size: 1.7rem; }
  /* The search drops down the width of the bar. */
  .topbar-end .topnav-item { position: static; }
  .pop-search { left: 0; right: 0; width: auto; top: calc(100% + 6px); }

  .mega { z-index: 60; }
  .mega-scrim { display: none; }
  .mega-panel, .mega.has-detail .mega-panel {
    inset: 0; width: 100%; max-height: none; height: 100%;
    border-radius: 0; border: 0;
    animation: fade-in .18s ease;
  }
  .mega-bar { display: flex; }
  .mega-back { display: none; }
  .mega.has-detail .mega-back { display: grid; }
  .mega-subjects { width: 100%; padding-top: 1rem; }
  .mega.has-detail .mega-subjects { display: none; border: 0; }
  .mega-detail { padding: 1.2rem 1rem 2rem; }
  .mega-boards { grid-template-columns: minmax(0, 1fr); }
  .mega-choices { grid-template-columns: minmax(0, 1fr); }
  .mega-board h3 { font-size: 1.5rem; }
  .mega-title { font-size: 1.6rem; }
  .mega-phone { display: block; }
  .mega-phone .subject-search { margin: 0 0 .4rem; max-width: none; }
  .mega-phone .board-switch { margin: 0 .7rem; }
  .mega-more { display: none; }
  .mega-subjects { padding-bottom: 2.5rem; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 1.05rem; }
  .wordmark { font-size: 1.5rem; }
  .board-chip { display: none; }
}

/* -- breadcrumbs ---------------------------------------------------------- */

.breadcrumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .35rem;
  margin: 0; padding: 1.3rem 0 0; font-size: .88rem; color: var(--ink-faint);
}
.breadcrumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--ink-ghost); }
.breadcrumbs a {
  color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-firm);
  text-underline-offset: 3px;
}
.breadcrumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.breadcrumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* -- page head ------------------------------------------------------------ */

.page-head { padding: 2rem 0 1.8rem; }

/* The band behind a page's heading, as at the top of the home page: the
   breadcrumbs and the heading sit on the pale blue-grey across the whole
   width of the window, and the page itself starts on white under it. The
   heading stays in its column; a shadow the band's colour, clipped to the
   sides, carries the band out to the edges without widening the page.
   Screen only: a printout starts with its heading on white. */
@media screen {
  .tool-head, .subject-head, .study-head, .page-head {
    background: var(--hero-wash);
    box-shadow: 0 0 0 100vmax var(--hero-wash);
    clip-path: inset(0 -100vmax);
  }
  .page-head { padding-bottom: 2.4rem; margin-bottom: 2rem; }
  .study-head { margin-bottom: 1.6rem; }
  body:has(main .tool-head, main .subject-head, main .study-head, main .page-head) .breadcrumbs {
    background: var(--hero-wash);
  }
}
.page-head h1 { margin-bottom: .4rem; }
.page-head .label { margin-bottom: .7rem; }
.page-head .lede { margin-bottom: 0; }

/* -- a topic's banner -----------------------------------------------------
   The uploaded picture carries no lettering: it is the background, and the
   h1 writes the topic's title over it as ordinary text. That keeps the words
   sharp at any size, spelled the way the topic is spelled, and readable when
   the picture has not loaded. The 3:1 box is what stops the page jumping as
   the picture arrives and keeps every topic's banner the same height however
   near the asked-for 1800x600 the file turned out to be — uploads are checked
   against that shape, so the crop is never more than a few per cent — and the
   one thing allowed to break it is a title too long to fit, which makes the
   frame taller rather than being cut off in it. */

.page-head.has-banner .topic-banner { margin-bottom: 1rem; }

.topic-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #1b2420;
  box-shadow: var(--shadow-xs);
  isolation: isolate;
}

/* The picture is laid under the heading rather than sat beside it, so a long
   title on a narrow screen makes the frame taller instead of being cropped:
   the ratio above is the shape it keeps whenever the words leave it free to. */
.topic-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* No aspect-ratio (an older browser): a height in the same proportion as the
   widest the column goes, so the frame is still a strip and not a sliver. */
@supports not (aspect-ratio: 3 / 1) {
  .topic-banner { min-height: 240px; }
}

/* The wash the title sits on. It is laid over the whole picture and is
   heaviest at the foot, so light type reads over a pale photograph as well as
   a dark one without anybody having to check. */
.topic-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 14, 18, .68) 0%,
    rgba(12, 14, 18, .52) 32%,
    rgba(12, 14, 18, .18) 62%,
    rgba(12, 14, 18, .04) 100%
  );
  pointer-events: none;
}

.topic-banner-title {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.3rem;
  color: #fff;
  font-size: clamp(1.35rem, 1.1rem + 2.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}

@media (min-width: 700px) {
  .topic-banner-title { padding: 1.6rem 1.9rem; }
}


.meta-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
  font-size: .82rem; color: var(--ink-faint);
}
.meta-line li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: .2rem .7rem;
}
.meta-line li:has(.tags) { background: none; border: 0; padding: 0; }

.section { padding: 2.4rem 0; }
/* "How this site is paid for": the one advert on the site, set among the
   text like a figure and labelled, never dressed up. Space is held for it
   so the words below do not jump when it arrives; if it never does - none to
   show, or blocked - the box goes and the page reads on without it. */
.paid-for .summary-list { margin-bottom: 1.2rem; }
.paid-for > h2:not(:first-child) { margin-top: 2.2rem; }
.ad-frame {
  margin: 2rem 0; padding: .7rem .9rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.ad-label { margin: 0 0 .6rem; font-size: .78rem; color: var(--ink-faint); letter-spacing: .02em; }
.ad-slot { min-height: 250px; display: grid; align-items: center; }
.ad-slot > ins { width: 100%; }
.ad-slot.is-preview {
  place-items: center; color: var(--ink-faint); font-size: .9rem;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
.ad-frame[data-state="unfilled"], .ad-frame[data-state="blocked"] { display: none; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* On a page of prose, a heading after a paragraph starts a new part. */
.section :is(p, ul, ol, dl, table) + :is(h2, h3) { margin-top: 2rem; }
.section-head { margin-bottom: 1.3rem; }
.section-head h2 { margin-bottom: .2rem; }
.section-head p { color: var(--ink-faint); margin: 0; font-size: .92rem; }

/* -- a subject's exam boards --------------------------------------------- */

.subject-boards { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; }
.subject-board {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 500;
  padding: .3rem .8rem;
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  color: var(--ink-soft); text-decoration: none;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.subject-board:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.subject-board[aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.subject-board .code { color: var(--ink-ghost); font-size: .76rem; }
.subject-board[aria-current] .code { color: rgba(255, 255, 255, .75); }

/* -- index list (topics, chapters, lessons) ------------------------------- */

.index-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.index-row {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.15rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.index-row:hover { border-color: var(--line-firm); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.index-row .n {
  flex: none;
  min-width: 1.8rem;
  color: var(--accent-ink);
  font-family: var(--display); font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.index-row .body { flex: 1; min-width: 0; }
.index-row .body h3 { margin: 0 0 .2rem; font-size: 1.04rem; }
.index-row:hover .body h3 { color: var(--accent-ink); }
.index-row .body p { margin: 0; font-size: .91rem; color: var(--ink-soft); }
.index-row .end {
  flex: none; text-align: right;
  font-size: .78rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; line-height: 1.5;
}
.index-row.is-read .n { color: var(--ok); }
/* The organiser row at the foot of a chapter's lessons: the number's place holds an icon. */
.index-row.is-organiser .n { display: inline-flex; align-items: center; align-self: center; }
.index-row.is-organiser .n .icon { width: 24px; height: 24px; }

/* -- topic cards (a subject's topics) -------------------------------------- */

/* Each card leads with the topic's banner, cropped to its top. A banner is
   made with its lower half kept quiet and dark for the title the topic page
   writes over it; the card has no title on the picture, so that half would
   read as an empty band. So the picture is drawn a third wider than the
   4:1 frame and pinned to its top: the frame shows the upper 56% of the
   banner and its middle three quarters across, which is where the prompt
   puts what is worth looking at. */
.topic-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }

.topic-card {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.topic-card:hover { border-color: var(--line-firm); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.topic-card:active { transform: none; }
.topic-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.topic-card-picture {
  position: relative;
  display: block;
  aspect-ratio: 4 / 1;
  background: #1b2420;
  overflow: hidden;
}
@supports not (aspect-ratio: 4 / 1) {
  .topic-card-picture { height: 0; padding-bottom: 25%; }
}
.topic-card-picture img {
  position: absolute; top: 0; left: 50%;
  width: 134%; height: auto; max-width: none;
  transform: translateX(-50%);
  transform-origin: center top;
  transition: transform .4s ease;
}
.topic-card:hover .topic-card-picture img { transform: translateX(-50%) scale(1.03); }

/* No banner: the subject's colour, with its picture off to the right. */
.topic-card-picture.is-plain {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%),
    var(--accent);
}
.topic-card-picture .subject-icon {
  position: absolute;
  right: 6%; top: 50%;
  width: auto; height: 68%;
  transform: translateY(-50%) rotate(-6deg);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12));
}

.topic-card-n {
  position: absolute; left: .75rem; top: .75rem;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .92); color: #141414;
  font-size: .85rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.topic-card-body {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1;
  padding: 1rem 1.2rem 1.1rem;
}
.topic-card-body h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.topic-card:hover .topic-card-body h3 { color: var(--accent-ink); }
.topic-card-body p { margin: 0; font-size: .91rem; color: var(--ink-soft); }
.topic-card-period {
  font-size: .78rem; font-weight: 650; letter-spacing: .04em;
  color: var(--accent-ink);
}
.topic-card-meta {
  margin-top: auto; padding-top: .45rem;
  font-size: .78rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .topic-card, .topic-card-picture img { transition: none; }
  .topic-card:hover { transform: none; }
  .topic-card:hover .topic-card-picture img { transform: translateX(-50%); }
}

/* -- board tags ----------------------------------------------------------- */

.tags { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; }
.tag {
  font-size: .74rem; font-weight: 600;
  padding: .08rem .45rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-firm);
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag-board { border-color: var(--line-firm); background: transparent; color: var(--ink-soft); }
.tag-shared { border-style: dashed; }
/* Higher tier only. A soft amber rather than the subject colour, so it reads
   as a different kind of label from the board tags beside it, with a small
   up-chevron for the "step up" it marks. */
.tag-higher {
  display: inline-flex; align-items: center; gap: .28rem;
  padding-left: .5rem;
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  letter-spacing: .01em;
}
.tag-higher svg { width: .72em; height: .72em; flex: none; }
/* Separate science only: the subject's own colour in outline, so it reads as
   a different kind of label from Higher's amber and the filled board tags. */
.tag-separate {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: transparent;
  color: var(--accent-ink);
}
/* Which of the chosen board's papers sets the chapter: filled softly in the
   subject's colour, so it reads as information rather than a restriction. */
.tag-paper {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink);
}

/* A calculator beside an exam question: plain when one may be used, crossed
   out when it may not. An icon and nothing else; the words are its tooltip. */
.calc-tag { display: inline-flex; align-items: center; color: var(--ink-faint); }
.calc-tag svg { width: 1.15rem; height: 1.15rem; flex: none; }
.calc-no { color: var(--warn); }

/* -- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px;
  padding: .6rem 1.35rem;
  border: 1px solid var(--accent); border-radius: var(--r-btn);
  background: var(--accent); color: #fff;
  font: inherit; font-family: var(--display); font-size: 1rem; font-weight: 650;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 17px; height: 17px; }
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-lg { min-height: 58px; padding: .8rem 2.3rem; font-size: 1.15rem; }

/* Second to a solid button: the same shape, drawn in the brand's colour. */
.btn-outline {
  background: var(--surface); color: var(--accent-ink);
  border: 2px solid var(--accent); box-shadow: none;
}
.btn-outline:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }

/* Kept for templates that still name them: ink on paper, like the rest. */
.btn-white { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-white:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-glass { background: transparent; border-color: var(--line-firm); color: var(--ink); }
.btn-glass:hover { background: var(--hover); border-color: var(--ink-faint); }

.btn-ghost {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-firm); box-shadow: var(--shadow-xs);
}
.btn-ghost:hover {
  background: var(--hover); border-color: var(--ink-faint); color: var(--ink);
}

/* The quiet variant. app.js swaps the "mark as revised" button between this
   and .btn-ghost; without it here the unrevised state fell back to the solid
   accent .btn, so the button shouted loudest before you had done anything. */
.btn-quiet {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line-firm); box-shadow: none;
}
.btn-quiet:hover {
  background: var(--hover);
  color: var(--ink); border-color: var(--ink-faint);
}

/* A toggle that is on should look on. */
.btn[aria-pressed="true"] {
  background: var(--accent-wash); border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

.empty {
  padding: 2.4rem 1.5rem; text-align: center;
  background: var(--surface); border: 1px dashed var(--line-firm);
  border-radius: var(--r); color: var(--ink-faint); font-size: .93rem;
}

.share-feedback {
  margin: .9rem 0 0; font-size: .83rem; color: var(--accent-ink);
  word-break: break-all;
}
.share-feedback[hidden] { display: none; }

/* -- teacher view --------------------------------------------------------- */

.teacher-panel {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--surface);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-xs);
}
.teacher-panel > h2 { margin-top: 0; }
.teacher-subhead {
  margin: 1.8rem 0 .3rem; font-size: 1rem;
  padding-top: 1.3rem; border-top: 1px solid var(--line);
}
.tag-teacher { border-color: transparent; background: var(--accent); color: #fff; margin-left: .35rem; }

.teacher-qa { display: grid; gap: .9rem; }
.teacher-q {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1.2rem 1.3rem;
}
.teacher-q .qhead { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .7rem; }
.teacher-q .qnum { font-weight: 700; color: var(--accent-ink); }
.teacher-q .qtext { font-size: 1.02rem; font-weight: 600; margin-bottom: .8rem; white-space: pre-line; }
/* A question's diagram. Diagrams are drawn on white, so they keep a white
   mat in dark mode too rather than floating as a bright block. */
.teacher-q .qpicture { margin: 0 0 .9rem; }
.teacher-q .qpicture img {
  display: block; max-width: min(100%, 560px); max-height: 420px; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .4rem;
}
.teacher-q .label { margin: 1.1rem 0 .5rem; }
.teacher-q .guidance {
  font-size: .89rem; color: var(--ink-soft);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: .7rem .9rem; margin-bottom: .6rem;
}
.teacher-why { font-size: .87rem; color: var(--ink-faint); margin: .9rem 0 0; }

.teacher-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.teacher-options li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .8rem; border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .91rem;
}
.teacher-options .key {
  font-weight: 700; color: var(--ink-faint);
  min-width: 1.1rem; font-size: .82rem;
}
.teacher-options .is-answer { background: var(--ok-soft); border-color: transparent; }
.teacher-options .is-answer .key { color: var(--ok); }
.teacher-options .answer-flag {
  margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--ok);
}

/* -- lesson ------------------------------------------------------------------
   The notes are one sheet of paper on the desk: this is where people read
   for an hour, so nothing busy goes behind the words and nothing inside the
   sheet is a box unless it really is one (an exam tip, a case study). Lists
   are ruled, numbers are set in the serif, and a subject's colour is a thin
   edge, never a fill. However many section types a script writes, a page is
   drawn with six kinds of block (partials/block.php): text, points, steps,
   callout, compare and figure. */

.lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 14.5rem;
  justify-content: center;
  gap: 3rem; align-items: start;
  padding: 1.4rem 0 4rem;
}

.lesson-header, .lesson-body {
  background: var(--surface);
  border: 1px solid var(--line);
}
.lesson-header {
  border-radius: var(--r) var(--r) 0 0;
  border-top: 4px solid var(--accent);
  padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.3rem, 4.5vw, 3.2rem) 1.6rem;
  border-bottom: 0;
}
.lesson-body {
  border-radius: 0 0 var(--r) var(--r);
  padding: 1.8rem clamp(1.3rem, 4.5vw, 3.2rem) clamp(1.6rem, 4vw, 2.8rem);
  font-size: 1.05rem;
  line-height: 1.7;
  position: relative;
}
.lesson-body::before {
  content: ""; position: absolute; top: 0; left: clamp(1.3rem, 4.5vw, 3.2rem); right: clamp(1.3rem, 4.5vw, 3.2rem);
  border-top: 1px solid var(--line);
}
.teacher-panel + .lesson-body, .lesson-header + .teacher-panel { border-radius: 0; }

.lesson-header-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .7rem; }
.lesson-header-top .eyebrow { margin: 0; color: var(--accent-ink); }
.lesson-header h1 { margin-bottom: .6rem; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); font-weight: 800; letter-spacing: -.032em; }
.lesson-header .lede { margin-bottom: 0; font-size: 1.14rem; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.lesson-actions .btn { min-height: 36px; padding: .4rem .9rem; font-size: .88rem; }

/* Contents beside the sheet: a plain list down a rule, the section being
   read marked by the rule turning the subject's colour. */
.lesson-toc {
  position: sticky; top: calc(var(--bar-h) + 1.5rem);
  font-size: .9rem;
  max-height: calc(100vh - var(--bar-h) - 3rem); overflow-y: auto; overscroll-behavior: contain;
  padding: .2rem 0 1rem;
}
.lesson-toc .label { margin: 0 0 .7rem; color: var(--ink); font-weight: 650; }
.lesson-toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.lesson-toc a {
  display: block; padding: .32rem 0 .32rem .9rem; margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-faint); text-decoration: none; line-height: 1.35;
}
.lesson-toc a:hover { color: var(--ink); }
.lesson-toc a.is-active { border-left-color: var(--accent); color: var(--ink); font-weight: 650; }
.toc-check {
  display: flex !important; align-items: center; gap: .5rem;
  margin-top: 1rem; padding: .7rem 0 0 !important;
  border-top: 1px solid var(--line); border-left: 0 !important;
  color: var(--ink) !important; font-weight: 650;
}
.toc-check .tool-icon { width: 24px; height: 24px; }

/* -- the blocks ------------------------------------------------------------ */

.block { margin-bottom: 2.6rem; scroll-margin-top: 6.5rem; }
.block:last-child { margin-bottom: 0; }

.block-head { display: flex; align-items: baseline; gap: .6rem; position: relative; }
.block > h2 {
  margin-bottom: .7rem;
  font-size: clamp(1.45rem, 1.25rem + .7vw, 1.85rem);
  font-weight: 750; letter-spacing: -.022em;
}
.block > .block-intro { color: var(--ink-soft); }

/* text */
.bloc-text p { margin: 0 0 1em; }
.bloc-text p:last-child { margin-bottom: 0; }

/* points: a term in bold and what it means, ruled off one from the next */
.keypoints { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.keypoint {
  position: relative;
  padding: .85rem 0 .9rem;
  border-bottom: 1px solid var(--line);
}
.keypoint strong { display: block; margin-bottom: .1rem; font-weight: 700; }
.keypoint p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }

/* steps: one marker style for everything numbered - a serif numeral */
.objectives, .process, .recall-list, .worked-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.objectives, .process { border-top: 1px solid var(--line); }
.objectives li, .process li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.objectives .n, .process .n, .recall-list .n, .worked-steps .n {
  flex: none; min-width: 1.6rem;
  color: var(--accent-ink);
  font-family: var(--display); font-size: 1.3rem; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.process strong { display: block; font-weight: 700; }
.process p { margin: 0; font-size: 1rem; color: var(--ink-soft); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: .8rem; bottom: .8rem;
  width: 1px; background: var(--line-firm);
}
.timeline li { position: relative; padding: .5rem 0 .6rem .2rem; }
.timeline li::before {
  content: ""; position: absolute; left: -1.5rem; top: 1rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
}
.timeline .when {
  display: block; font-family: var(--display); font-size: 1rem; font-weight: 750;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.timeline .what { color: var(--ink-soft); }

.summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.summary-list li { position: relative; padding: .05rem 0 .05rem 1.7rem; color: var(--ink-soft); }
.summary-list li::before {
  content: "✓"; position: absolute; left: .1rem; top: 0;
  color: var(--ok); font-weight: 700;
}

/* callout: what really is a box - an exam tip, a case study, the big idea,
   a quotation - with a thick edge in its colour and a plain label on top */
.bloc-callout > .examfocus, .bloc-callout > .casestudy, .bloc-callout > .statement,
.bloc-callout > .pullquote, .bloc-callout > .sourceset {
  margin: 0;
}
.examfocus, .casestudy, .statement, .pullquote {
  position: relative;
  padding: 1.2rem 1.4rem 1.3rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  border-left: 4px solid var(--callout, var(--accent));
  background: color-mix(in srgb, var(--callout, var(--accent)) 6%, var(--surface-2));
  box-shadow: none;
}
.examfocus { --callout: #b47d0f; }
.casestudy { --callout: var(--accent); }
.statement { --callout: var(--ink); }
.pullquote { --callout: var(--line-firm); }
.examfocus > .label, .casestudy > .label, .statement > .label {
  display: block;
  margin: 0 0 .55rem;
  font-size: .86rem; font-weight: 700;
  color: color-mix(in srgb, var(--callout) 75%, var(--ink));
}

.examfocus .question { font-size: 1.08rem; font-weight: 650; margin-bottom: .55rem; }
.examfocus .marks {
  font-size: .8rem; font-weight: 650; color: var(--ink-soft);
  border: 1px solid var(--line-firm);
  border-radius: var(--r-pill); padding: .05rem .45rem; margin-left: .3rem;
  white-space: nowrap;
}
.examfocus .advice { margin: 0; color: var(--ink-soft); }

.casestudy h3 { margin: 0 0 .5rem; font-size: 1.3rem; }
.casestudy p { color: var(--ink-soft); margin-bottom: 0; }
.casestudy-figures { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.casestudy-figures strong {
  display: block; font-family: var(--display); font-size: 2rem; font-weight: 750;
  letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
}
.casestudy-figures span { display: block; margin-top: .25rem; max-width: 20ch; font-size: .84rem; color: var(--ink-faint); }

.pullquote p { font-family: var(--serif); font-size: 1.3rem; font-style: italic; line-height: 1.45; margin-bottom: .5rem; }
.pullquote footer { font-size: .88rem; color: var(--ink-faint); }

/* compare: two columns, divided by a rule */
.compare { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); border-top: 2px solid var(--line-firm); }
.compare-col { padding: .9rem 1.2rem 1rem 0; }
.compare-col + .compare-col { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.compare-col h3 {
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  color: var(--ink-faint); margin-bottom: .7rem;
}
.compare-col.is-change h3 { color: var(--accent-ink); }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.compare-col li { position: relative; padding-left: 1rem; font-size: 1rem; color: var(--ink-soft); }
.compare-col li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-ghost);
}
.compare-col.is-change li::before { background: var(--accent); }
@media (max-width: 560px) {
  .compare-col + .compare-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* key terms: a glossary, the way the back of a textbook sets one */
.terms { margin: 0; display: grid; border-top: 1px solid var(--line); }
.term {
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem;
}
.term:target { background: var(--mark); }
.term dt { font-family: var(--display); font-size: 1.08rem; font-weight: 750; color: var(--ink); }
.term dd { margin: 0; font-size: .98rem; color: var(--ink-soft); }
@media (max-width: 640px) { .term { grid-template-columns: 1fr; gap: .15rem; } }

/* -- check your understanding -------------------------------------------- */

.check {
  margin-top: 1.4rem;
  padding: clamp(1.4rem, 3.5vw, 2.2rem) clamp(1.3rem, 4.5vw, 3.2rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: 6.5rem;
}
.check .eyebrow { color: var(--ink-faint); }
.check h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: .35rem; }
.check-lede { color: var(--ink-soft); margin-bottom: 1.3rem; }
.check-grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); border-top: 1px solid var(--line); }
.check-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem .2rem 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.check-card + .check-card { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.check-card:hover .check-card-text b { text-decoration: underline; text-underline-offset: 3px; }
.check-card-text { display: grid; min-width: 0; }
.check-card-text b { font-family: var(--display); font-size: 1.3rem; font-weight: 750; }
.check-card-text span { font-size: .9rem; color: var(--ink-faint); }
.check-card-go {
  margin-left: auto; flex: none;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line-firm); color: var(--ink);
}
.check-card:hover .check-card-go { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.check-card-go .icon { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .check-card + .check-card { padding-left: 0; border-left: 0; }
}

/* lesson nav */
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1.4rem; border-top: 1px solid var(--line); }
.lesson-nav a {
  text-decoration: none;
  padding: .9rem 1.2rem .9rem 0;
}
.lesson-nav a.next { grid-column: 2; padding: .9rem 0 .9rem 1.2rem; text-align: right; border-left: 1px solid var(--line); }
.lesson-nav a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.lesson-nav .label { margin-bottom: .15rem; }
.lesson-nav strong { color: var(--ink); font-family: var(--display); font-weight: 750; font-size: 1.15rem; }

/* -- resources ------------------------------------------------------------ */

.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.resource {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.resource:hover { border-color: var(--accent);  }
.resource-ext {
  flex: none; display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; border-radius: var(--r);
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: .66rem; font-weight: 750; letter-spacing: .03em;
}
.resource-body { flex: 1; min-width: 0; }
.resource-body strong { display: block; font-weight: 650; font-size: .97rem; overflow-wrap: anywhere; }
.resource:hover .resource-body strong { color: var(--accent-ink); }
.resource-desc { display: block; font-size: .88rem; color: var(--ink-soft); }
.resource-meta { display: block; font-size: .77rem; color: var(--ink-faint); }
.resource-go {
  flex: none; font-size: .8rem; font-weight: 600; color: var(--ink-faint);
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  padding: .25rem .8rem;
}
.resource:hover .resource-go { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -- one file, viewed on the page ------------------------------------------ */

/* The presenter: a deck the site drew itself (src/Viewer/Slides.php). */
.presenter {
  --bar: #14171c;
  position: relative;
  margin-bottom: .8rem;
  border-radius: var(--r);
  background: #0e1014;
  box-shadow: var(--shadow);
  overflow: hidden;
  color: #e8eaed;
}
.presenter-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--deck-ratio, 16 / 9);
  overflow: hidden;
  outline: none;
  background: #0e1014;
}
.presenter-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.presenter-slide {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(var(--scale, .5));
  transform-origin: center;
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.presenter-slide.is-current {
  opacity: 1; visibility: visible;
  transition: opacity .18s ease;
}
.presenter-slide > .s-stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }

/* Click the left third to go back, anywhere else to go on. */
.presenter-hit {
  position: absolute; top: 0; bottom: 0;
  border: 0; padding: 0; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.presenter-hit-prev { left: 0; width: 33%; cursor: w-resize; }
.presenter-hit-next { right: 0; width: 67%; cursor: e-resize; }

.presenter-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .45rem .6rem;
  background: var(--bar);
  border-top: 1px solid rgba(255, 255, 255, .06);
  transition: opacity .25s ease, transform .25s ease;
}
.presenter-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .55rem;
  border: 0; border-radius: 999px;
  background: transparent; color: inherit;
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.presenter-btn:hover { background: rgba(255, 255, 255, .1); }
.presenter-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.presenter-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
.presenter-btn[disabled] { opacity: .35; cursor: default; background: transparent; }
.presenter-btn svg {
  width: 1.2rem; height: 1.2rem;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.presenter-count {
  min-width: 4.2rem; text-align: center;
  font-size: .85rem; font-variant-numeric: tabular-nums; color: #aeb4bd;
}
.presenter-count b { color: #fff; font-weight: 700; }
.presenter-progress {
  flex: 1; height: 3px; margin: 0 .6rem;
  border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden;
}
.presenter-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent); transition: width .2s ease;
}

/* Every slide at once. */
.presenter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: .9rem;
  max-height: 60vh; overflow: auto;
  padding: 1rem;
  background: var(--bar);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.presenter-grid[hidden] { display: none; }
.presenter-thumb {
  display: grid; gap: .35rem; justify-items: center;
  padding: 0; border: 0; background: none; color: #aeb4bd;
  font: inherit; font-size: .75rem; cursor: pointer;
}
.presenter-thumb-frame {
  display: block; position: relative;
  width: 168px; height: var(--thumb-h, 94.5px);
  overflow: hidden; border-radius: 6px;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color .15s ease;
}
.presenter-thumb:hover .presenter-thumb-frame,
.presenter-thumb:focus-visible .presenter-thumb-frame { outline-color: rgba(255, 255, 255, .5); }
.presenter-thumb.is-current .presenter-thumb-frame { outline-color: var(--accent); }
.presenter-thumb.is-current { color: #fff; }
.presenter-thumb-scale {
  position: absolute; left: 0; top: 0;
  transform: scale(var(--thumb-scale, .13)); transform-origin: 0 0;
  pointer-events: none;
}

/* Presenting: the whole screen, the bar out of the way until the mouse moves. */
.presenter:fullscreen {
  display: flex; flex-direction: column;
  width: 100vw; height: 100vh;
  border-radius: 0; background: #000;
}
.presenter:fullscreen .presenter-stage { flex: 1; aspect-ratio: auto; background: #000; }
.presenter:fullscreen .presenter-bar {
  position: absolute; left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  border: 0; border-radius: 999px;
  background: rgba(20, 23, 28, .88);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  width: min(560px, calc(100vw - 2rem));
}
.presenter:fullscreen.is-idle .presenter-bar { opacity: 0; transform: translate(-50%, 1rem); pointer-events: none; }
.presenter:fullscreen.is-idle .presenter-stage { cursor: none; }
.presenter:fullscreen .presenter-grid {
  position: absolute; inset: 0 0 5rem;
  max-height: none; background: rgba(14, 16, 20, .96);
}

@media (max-width: 560px) {
  .presenter { border-radius: var(--r-sm); margin-left: -4px; margin-right: -4px; }
  .presenter-btn-text span { display: none; }
  .presenter-progress { margin: 0 .3rem; }
  .presenter-grid { grid-template-columns: repeat(2, 1fr); }
  .presenter-thumb-frame { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .presenter-slide, .presenter-slide.is-current, .presenter-bar, .presenter-progress span { transition: none; }
}
.file-view-note kbd {
  display: inline-block; min-width: 1.5em; padding: .05em .4em;
  border: 1px solid var(--line-firm); border-bottom-width: 2px; border-radius: 5px;
  background: var(--surface); font: inherit; font-size: .78rem; text-align: center;
}
.file-view-failed { margin: 1rem 0 2rem; }

/* A Word file, drawn as a page (src/Viewer/Document.php). */
.doc-view {
  margin: 0 0 2rem;
  padding: clamp(.5rem, 3vw, 2rem);
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.doc-page {
  max-width: 820px; margin: 0 auto;
  padding: clamp(1.2rem, 5vw, 3.2rem);
  background: #fff; color: #1b1e22;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 28px rgba(0, 0, 0, .06);
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  font-size: 11pt; line-height: 1.4;
  /* anywhere, not break-word: a gap on a notes-to-complete sheet is one long
     run of underscores, and only this lets a table cell wrap it. */
  overflow-wrap: anywhere;
}
.doc-page p { margin: 0 0 .35em; max-width: none; }
.doc-page img { max-width: 100%; height: auto; border: 0; border-radius: 0; animation: none; }
.doc-page table { width: 100%; border-collapse: collapse; margin: .4em 0 .8em; }
.doc-page td, .doc-page th { vertical-align: top; padding: .35em .55em; }
.doc-page > div > *:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .doc-page { font-size: 10.5pt; }
  .doc-page table { display: block; overflow-x: auto; }
}

.file-view-head .btn-row { margin-top: 1.1rem; }
.file-view {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.file-view iframe {
  display: block;
  width: 100%;
  height: min(80vh, 900px);
  min-height: 420px;
  border: 0;
  background: #fff;
}
.file-view-image { display: grid; place-items: center; padding: 1rem; }
.file-view-image img { display: block; max-width: 100%; height: auto; }
.file-view-note { margin: .8rem 0 2rem; font-size: .85rem; color: var(--ink-faint); }

/* -- mark schemes ----------------------------------------------------------
   Shared with the teacher view's question-and-answer panel (.teacher-q). */

.markscheme { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.markscheme li {
  position: relative; padding: .7rem .9rem .7rem 2.1rem;
  background: var(--ok-soft); border-radius: var(--r-sm);
  font-size: .91rem; color: var(--ink-soft);
}
.markscheme li::before {
  content: "✓"; position: absolute; left: .85rem; top: .7rem;
  color: var(--ok); font-weight: 700;
}
.model-answer {
  background: var(--surface-2); border-radius: var(--r-sm);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.15rem; font-size: .95rem;
}
.model-answer p:last-child { margin-bottom: 0; }

/* -- search --------------------------------------------------------------- */

.search-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.search-form input[type="search"], .search-form select {
  padding: .7rem 1.1rem;
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .94rem;
}
.search-form input[type="search"] { flex: 1 1 300px; }
.search-form input:focus, .search-form select:focus {
  outline: none; border-color: var(--ink-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent);
}

/* Results are a ruled list, like an index: where, the lesson, a line of it. */
.result {
  display: block; padding: .95rem 0 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.result .where { font-size: .82rem; color: var(--ink-faint); margin-bottom: .15rem; }
.result h3 { margin: 0 0 .2rem; font-size: 1.25rem; font-weight: 600; }
.result:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.result p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Search extras: the count, a corrected or suggested spelling, a definition
   card for a search that is exactly a key term, and one heading per subject
   when the lessons found span more than one. */
.search-count { color: var(--ink-faint); font-size: .87rem; margin-bottom: 1.4rem; }
.search-note {
  padding: .75rem 1rem; margin-bottom: 1rem;
  background: var(--surface-2); border-radius: var(--r-sm);
  font-size: .9rem; color: var(--ink-soft);
}
.search-note a, .empty a { color: var(--accent-ink); font-weight: 600; }
.search-define {
  padding: 1.1rem 1.3rem; margin-bottom: 2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--r);
  box-shadow: var(--shadow-xs);
}
.search-define .where { font-size: .76rem; color: var(--ink-faint); margin: 0 0 .2rem; }
.search-define h2 { margin: 0 0 .35rem; font-size: 1.3rem; }
.search-define p { margin: 0 0 .6rem; color: var(--ink-soft); }
.search-define a { font-size: .85rem; color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.search-define a:hover { text-decoration: underline; }
.result-list { border-top: 1px solid var(--line); padding-top: .55rem; margin-bottom: 2.4rem; }
.result-group {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.4rem 0 .6rem; font-size: .95rem;
}
.result-group .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); }
.result-group + .result-list { margin-bottom: 1rem; }
.result-count {
  font-size: .75rem; font-weight: 600; color: var(--ink-faint);
  background: var(--surface-2); border-radius: var(--r-pill); padding: .05rem .5rem;
}

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

.site-footer {
  margin-top: 5rem;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-faint);
}
.footer-inner {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  padding: 2.6rem 0 2.2rem;
}
.footer-about .brand { margin: 0 0 .7rem; }
.footer-about p { margin: 0; max-width: 40ch; line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; gap: .45rem; }
.footer-head { margin: 0 0 .35rem; font-weight: 650; color: var(--ink); font-size: .92rem; }
.site-footer a:not(.brand) { color: var(--ink-soft); text-decoration: none; }
.site-footer a:not(.brand):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0 2rem; border-top: 1px solid var(--line);
}
.site-footer .board-switch a { font-size: .8rem; }
.site-footer .board-switch a[aria-current] { color: #fff; }
.site-footer .board-switch a[aria-current]:hover { text-decoration: none; }
.footer-release { margin: 0; font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 820px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* -- notices, errors, install -------------------------------------------- */

.notice {
  padding: .9rem 1.1rem; border-radius: var(--r-sm);
  border-left: 3px solid var(--accent); background: var(--surface-2);
  margin-bottom: 1.1rem;
}
.notice-ok  { border-left-color: var(--ok); background: var(--ok-soft); }
.notice-bad { border-left-color: var(--bad); background: var(--bad-soft); }

.error-page { padding: clamp(3rem, 8vw, 6rem) 0; }
.error-page .code {
  margin: 0 0 .2rem;
  font-family: var(--display); font-size: clamp(4rem, 3rem + 5vw, 7rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  letter-spacing: -.03em; color: var(--ink-ghost);
}
.error-page h1 { margin-bottom: .6rem; }
.error-search { margin-top: 2rem; }

.install-form { display: grid; gap: 1rem; max-width: 460px; margin-top: 1.4rem; }
.install-form input[type="password"] {
  padding: .65rem .9rem; border: 1px solid var(--line-firm);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit;
}
.install-form label { display: flex; gap: .5rem; align-items: center; font-size: .92rem; }

/* A section heading with one of the line icons in front of it. */
.heading-icon { display: flex; align-items: center; gap: .5rem; }
.heading-icon .icon { flex: none; width: 20px; height: 20px; color: var(--accent-ink); }

/* -- cookie notice -------------------------------------------------------- */
/* A bar along the bottom, not a modal: it never covers the page or traps the
   keyboard, because there is no consent to collect. Sits under the menu
   (z-index 60 on a phone) so opening the menu still buries it. */

.cookie-note {
  position: fixed; z-index: 50;
  left: 1rem; right: 1rem; bottom: 1rem;
  margin-inline: auto; width: min(100% - 2rem, 660px);
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);

  /* The biscuit's own palette. The bite is a hole punched in the mark, so it
     has to be painted in whatever the card behind it is. */
  --biscuit:      #e2ac4d;
  --biscuit-edge: #c08529;
  --chip:         #5b3a1e;
  --cookie-bg:    var(--surface);

  opacity: 0; transform: translateY(1.2rem);
  transition: opacity .28s ease, transform .28s ease;
}
.cookie-note[hidden] { display: none; }
.cookie-note.is-in  { opacity: 1; transform: none; }
.cookie-note.is-out { opacity: 0; transform: translateY(1.2rem); }

.cookie-note-inner {
  display: grid; gap: .5rem 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.cookie-note-text { grid-column: 2; }
.cookie-note h2 { margin: 0 0 .35rem; font-size: 1.02rem; letter-spacing: -.01em; }
.cookie-note p { margin: 0; font-size: .89rem; color: var(--ink-soft); }

.cookie-note-actions {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem;
}

/* -- the biscuit ---------------------------------------------------------- */

.cookie-mark-wrap { display: block; line-height: 0; }
.cookie-mark { display: block; overflow: visible; }

.cookie-body {
  fill: var(--biscuit);
  stroke: var(--biscuit-edge); stroke-width: 1.6;
}
.cookie-chips circle { fill: var(--chip); }
.cookie-chips circle:nth-child(2n) { opacity: .82; }

/* Painted in the card colour and scaled up from nothing, so pressing the
   button takes a bite out of the biscuit rather than redrawing it. */
.cookie-bite circle { fill: var(--cookie-bg); }
.cookie-bite {
  transform: scale(0); transform-origin: 40px 11px; transform-box: view-box;
  transition: transform .34s cubic-bezier(.2, .9, .3, 1.35);
}
.cookie-note.is-eaten .cookie-bite { transform: scale(1); }

.cookie-crumbs circle { fill: var(--biscuit-edge); }
.cookie-crumbs {
  opacity: 0; transform: translateY(-9px);
  transition: opacity .3s ease .12s, transform .4s ease .12s;
}
.cookie-note.is-eaten .cookie-crumbs { opacity: .9; transform: none; }

@media (max-width: 560px) {
  .cookie-note { left: .75rem; right: .75rem; bottom: .75rem; padding: 1rem; }
  .cookie-note-inner { gap: .4rem .7rem; }
  .cookie-mark { width: 38px; height: 38px; }
  .cookie-note h2 { font-size: .98rem; }
  .cookie-note-actions { grid-column: 1 / -1; margin-top: .8rem; }
  .cookie-note-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* -- responsive ----------------------------------------------------------- */

@media (max-width: 920px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .lesson-toc { display: none; }
}

/* A four-level breadcrumb wrapped onto four lines on a phone, which pushed the
   lesson itself below the fold. One scrollable line keeps every ancestor
   reachable and costs one row. */
@media (max-width: 720px) {
  .breadcrumbs ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: .2rem;
  }
  .breadcrumbs ol::-webkit-scrollbar { display: none; }
  .breadcrumbs li { flex: none; white-space: nowrap; }
}

@media (max-width: 620px) {
  .lesson-header { padding: 1.3rem 1.2rem; }
  .practice-bar { position: static; border-radius: var(--r); }
  .index-row { padding: .95rem 1rem; gap: .75rem; }
  .question-card, .exam-q { padding: 1.15rem 1.1rem; }
  .page-head { padding: 1.6rem 0 1.4rem; }
  .teacher-panel { padding: 1.2rem 1.1rem; }
  .teacher-q { padding: 1rem 1rem; }
  .casestudy { padding: 1.2rem 1.1rem; }
  .casestudy-figures { gap: 1.1rem; }
  .card-meter { gap: 1.1rem; }
  .exam-total { padding: 1.3rem 1.2rem; }
}

/* A file row is an icon, a name and a Download pill on one line. At phone
   width the name was left a narrow column between the two and a generated
   filename ran to six lines, so below this the pill moves to its own full
   width row underneath. */
@media (max-width: 560px) {
  .resource {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ext body" "go go";
    align-items: start;
    gap: .7rem .85rem;
    padding: .9rem 1rem;
  }
  .resource-ext { grid-area: ext; width: 2.4rem; height: 2.4rem; }
  .resource-body { grid-area: body; }
  .resource-go {
    grid-area: go; text-align: center;
    padding: .45rem .8rem;
  }
}

@media (max-width: 420px) {
  .wrap, .wrap-text { width: min(100% - 1.5rem, var(--wrap)); }
  .wrap-text { width: min(100% - 1.5rem, var(--text)); }
  .lesson-header { padding: 1.1rem 1rem; }
  .flashcard-inner { min-height: 240px; }
  .flashcard-face { padding: 2.9rem 1.1rem 2.7rem; }
  .btn { padding: .55rem 1rem; font-size: .87rem; }
  .meta-line { gap: .4rem; }
}

/* -- print ---------------------------------------------------------------- */

@media print {
  .topbar, .mega, .site-footer, .breadcrumbs,
  .lesson-toc, .lesson-nav, .btn-row, .skip-link, .cookie-note,
  .share-feedback,
  /* Buttons and links to other pages mean nothing on paper. */
  .lesson-actions, .check, .chapter-card-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .lesson-layout { display: block; padding: 0; }
  .lesson-header { border: 0; box-shadow: none; padding: 0 0 1rem; }
  .lesson-body { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 0; }
  .lesson-body::before { display: none; }
  /* A section may run on to the next sheet: the items inside it (below) keep
     together, and a heading stays with what follows it. Keeping a whole
     section on one sheet left half a page blank whenever one would not fit. */
  .block { margin-bottom: 1.3rem; }
  .block > h2, .block-head, .block-intro { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .keypoint, .objectives li, .process li, .term, .compare-col,
  .casestudy, .examfocus, .teacher-q { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .timeline li, .summary-list li, .recall-item, .pullquote, .gallery-item,
  .picture-split, .worked, .question, .advice, .compare { break-inside: avoid; }
  .teacher-panel { box-shadow: none; border: 1px solid #ccc; padding: 0 0 1rem; }
  a { color: #000; text-decoration: none; }

  /* A topic's banner is decoration: on paper the heading goes back to being
     a line of black type, with no picture and no wash under it. */
  .topic-banner {
    display: block; aspect-ratio: auto; min-height: 0;
    border: 0; box-shadow: none; background: none;
  }
  .topic-banner img, .topic-banner::after { display: none; }
  .topic-card-picture { display: none; }
  .topic-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .topic-banner-title {
    position: static; padding: 0; color: #000; text-shadow: none;
    font-size: 20pt;
  }
}


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

/* A recent-lessons row has no number, so its marker is just the subject dot. */
.index-row .n:empty {
  width: .65rem; height: .65rem; border-radius: 50%;
  background: var(--accent); margin-top: .55rem;
}

/* ==========================================================================
   The newer lesson sections: mind maps, pictures, statements, worked
   examples and source sets.
   ========================================================================== */

/* -- mind map --------------------------------------------------------------
   Not a radial drawing. A ring of branches around a hub reads beautifully at
   1280px and is unusable at 360px, and this site is read on phones. So the
   hub is a banner and the branches are a grid under it, joined by a spine
   that only appears once there is room for it to mean anything. */

.mindmap {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  padding: 1.4rem;
  position: relative;
}

.mindmap-centre {
  margin: 0 auto 1.3rem;
  max-width: 34ch;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  background: var(--accent-ink);
  border-radius: var(--r);
  padding: .85rem 1.2rem;
  position: relative;
  z-index: 1;
}

.mindmap-branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.mindmap-branch {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .85rem 1rem 1rem;
}

.mindmap-branch::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--accent-ink);
  opacity: .75;
}

.mindmap-branch h3 {
  margin: 0 0 .4rem;
  font-size: .97rem;
  line-height: 1.3;
}

.mindmap-branch ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .3rem;
}

.mindmap-branch ul li {
  position: relative;
  padding-left: 1rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.mindmap-branch ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: -.02em;
  color: var(--accent-ink);
  font-size: .8em;
}

/* Above this width the grid is at least two across, so a spine down the
   middle joins the hub to the branches the way the drawing would. */
@media (min-width: 720px) {
  .mindmap-branches::before {
    content: "";
    position: absolute;
    top: 3.4rem;
    bottom: 1.4rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(var(--accent-ink), transparent);
    opacity: .28;
    z-index: 0;
  }
  .mindmap-branch { z-index: 1; }
}

/* -- pictures -------------------------------------------------------------- */

.gallery { margin: 0; }

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

.gallery-2, .gallery-3 {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.gallery-caption {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* Picture-and-text: the words on the left, the picture on the right. On a
   phone the picture drops under the words rather than squeezing them. */
.picture-split {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.picture-split.picture-split-words { grid-template-columns: minmax(0, 1fr); }
.picture-split-words-col > p:first-child { margin-top: 0; }
.picture-split-points {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.picture-split-points li {
  padding: .6rem .85rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  line-height: 1.5;
}
.picture-split-points strong { display: block; }
@media (max-width: 720px) {
  .picture-split { grid-template-columns: minmax(0, 1fr); }
}

/* -- the big statement ----------------------------------------------------- */

.statement-text {
  margin: .5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.statement-support {
  margin: .85rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.55;
}

/* -- worked example -------------------------------------------------------- */

.worked-problem {
  margin: 0 0 1.1rem;
  padding: .9rem 1.1rem;
  background: var(--surface-2);
  border-left: 4px solid var(--accent-ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .97rem;
  line-height: 1.55;
}

.worked-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
  counter-reset: none;
}

.worked-steps li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .2rem .8rem;
  align-items: baseline;
  padding: .6rem .2rem;
  border-bottom: 1px solid var(--line);
}

.worked-steps li:last-child { border-bottom: 0; }

.worked-steps .n {
  grid-row: 1 / span 2;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent-ink);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  align-self: start;
}

.worked-steps .what { font-weight: 600; }

.worked-steps .working {
  font-family: var(--mono);
  font-size: .89rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.worked-answer {
  margin: 1.1rem 0 0;
  padding: .85rem 1.1rem;
  background: var(--accent-ink);
  color: #fff;
  border-radius: var(--r-sm);
  font-weight: 600;
  display: flex;
  gap: .9rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.worked-answer > span:first-child {
  font-size: .78rem;
  opacity: .8;
  font-weight: 700;
}

/* -- source sets ----------------------------------------------------------- */

.sourceset {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.source-card {
  margin: 0;
  padding: 1.1rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-ink);
  border-radius: var(--r-lg);
}

.source-card blockquote {
  margin: .5rem 0 .7rem;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
}

.source-card figcaption {
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--ink-faint);
}

.source-question {
  margin: 1rem 0 0;
  padding: .85rem 1.1rem;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: .95rem;
  line-height: 1.5;
}

@media print {
  .mindmap, .source-card, .statement,
  .worked-answer { break-inside: avoid; box-shadow: none; }
  .mindmap-centre, .worked-answer { background: #eee !important; color: #000 !important; }
  .mindmap-branches::before { display: none; }
  .gallery-item img { max-height: 7cm; width: auto; }
}

/* ==========================================================================
   The loading screen, and the thin bar that replaces it afterwards.

   The overlay is created by script, so none of this applies unless the script
   ran — a browser with JavaScript off never gets a splash it cannot dismiss.
   ========================================================================== */

/* While the splash is up the page behind it must not scroll, or a flick of
   the thumb scrolls a page nobody can see yet. */
html[data-loading], html[data-loading] body { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 1;
  transition: opacity .38s ease, visibility .38s ease;
}

.loader.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding: 2rem;
  animation: loader-rise .5s cubic-bezier(.2, .7, .3, 1) both;
}

.loader-mark svg { display: block; }

/* The mark keeps its own colours in both themes, as the header's does. The
   tick draws itself in once, as the page arrives. */
.loader-tick {
  stroke-dasharray: 64;
  stroke-dashoffset: 64;
  animation: loader-tick .55s .15s cubic-bezier(.3, .7, .3, 1) forwards;
}
@keyframes loader-tick { to { stroke-dashoffset: 0; } }

/* The mark breathes rather than spins. A spinner says "waiting"; this says
   "arriving", and it is the difference between the two that was wanted. */
.loader-mark {
  animation: loader-breathe 1.8s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.loader-word {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.loader-track {
  width: 168px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

/* An indeterminate sweep, because the page has no progress to report: it is
   one request, and it either has arrived or it has not. Pretending to know a
   percentage would be a lie drawn at 60fps. */
.loader-fill {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent-ink);
  animation: loader-sweep 1.15s cubic-bezier(.65, .05, .35, 1) infinite;
}

@keyframes loader-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes loader-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.055); }
}

@keyframes loader-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* -- the navigation bar ----------------------------------------------------
   Every page after the first. It only appears once a navigation has taken
   long enough to be worth acknowledging, so a fast page shows nothing at all
   rather than flashing a bar for 80ms. */

.nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 190;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.nav-progress.is-on { opacity: 1; }

.nav-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-ink);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-ink) 60%, transparent);
  transition: width .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .loader-mark, .loader-fill { animation: none; }
  .loader-tick { animation: none; stroke-dashoffset: 0; }
  .loader-inner { animation: none; }
  .loader-fill { width: 100%; }
}

@media print {
  .loader, .nav-progress { display: none !important; }
}

/* ==========================================================================
   Quality of life: the reading bar, linkable headings, the report form.
   ========================================================================== */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}

.read-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-ink), color-mix(in srgb, var(--accent-ink) 55%, var(--ink-ghost)));
}

/* A heading you can link to. Invisible until the heading is hovered or the
   link itself is focused, so it never competes with the heading. */
.heading-anchor {
  margin-left: .45rem;
  color: var(--ink-ghost);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}

.block > h2:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--accent-ink); }

/* Touch has no hover, so on a phone it would never appear at all. */
@media (hover: none) { .heading-anchor { display: none; } }

/* -- reporting a lesson ---------------------------------------------------- */

.report {
  margin: 2.4rem 0 0;
  border: 1px dashed var(--line-firm);
  border-radius: var(--r);
  background: var(--surface);
}

.report > summary {
  padding: .9rem 1.2rem;
  cursor: pointer;
  font-size: .92rem;
  color: var(--ink-soft);
  list-style: none;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color .15s ease, background .15s ease;
}

.report > summary::-webkit-details-marker { display: none; }

.report > summary::before {
  content: "?";
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-wash);
}

.report > summary:hover { color: var(--ink); background: var(--surface-2); }
.report[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }

.report > .report-body { padding: 1.1rem 1.2rem 1.3rem; }

.report-intro {
  margin: 0 0 1rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.report-form .field { margin-bottom: .9rem; }

.report-form label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  font-weight: 600;
}

.report-form label .hint { font-weight: 400; color: var(--ink-faint); }

.report-form select,
.report-form textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--line-firm);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
}

.report-form textarea { resize: vertical; min-height: 4.5rem; }

.report-form select:focus-visible,
.report-form textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 1px;
  border-color: var(--accent-ink);
}

/* The honeypot. Off-screen rather than display:none, because a bot that reads
   the stylesheet skips anything hidden and fills anything that is not. */
.report-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media print {
  .read-progress, .report, .heading-anchor { display: none !important; }
}

/* ==========================================================================
   Premium polish. Small things, all of them: the difference between a site
   that works and one that feels made.
   ========================================================================== */

/* Selected text takes the subject's colour rather than the browser's blue. */
::selection {
  background: color-mix(in srgb, var(--accent-ink) 22%, transparent);
  color: var(--ink);
}

/* One focus ring everywhere, in the accent, always visible against both
   themes. Keyboard users get it; mouse users never see it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Anchored headings land below the sticky header rather than under it. */
:target { scroll-margin-top: 5.5rem; }

html { scroll-behavior: smooth; }

/* Long words — a German loanword, a chemical name, a URL in a caption — break
   rather than pushing the layout sideways on a phone. */
.lede, .block p, .keypoint p, .term dd, .report-intro { overflow-wrap: break-word; }

/* Headings that wrap should wrap evenly rather than leaving one word alone on
   the last line. Ignored by browsers that do not have it, which is fine. */
h1, h2, h3, .lede { text-wrap: balance; }

/* A row that can be clicked says so with its edge and its title, not by
   floating off the page. */
.index-row, .tile, .keypoint, .source-card {
  transition: border-color .15s ease, background .15s ease;
}

a.index-row:hover { border-color: var(--line-firm); }

/* Images arrive rather than snap in, once they have decoded. */
.gallery-item img {
  animation: fade-in .35s ease both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A number that is being compared should line up in its column. */
.num, td.num, .tile b { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .index-row, .tile, .keypoint, .source-card, .btn { transition: none; }
  a.index-row:hover, .btn:active { transform: none; }
  .gallery-item img { animation: none; }
}

/* The wide shapes are not prose, so the prose measure does not apply to them.
   A mind map squeezed into 680px stops being a diagram and becomes a list; a
   row of pictures at that width is a column of pictures. Their own container
   still bounds them — inside a lesson, the article column. */
.block-mindmap,
.block-gallery,
.block-sources,
.block-statement { max-width: none; }

/* ==========================================================================
   Studying a lesson: a key term marked where the lesson uses it.
   ========================================================================== */

/* -- a key term, in the prose --------------------------------------------- */
/* The first mention of each term the lesson defines. Underlined rather than
   coloured, because a colour would read as a link to another page, and this
   goes nowhere: it opens the definition in place. */

a.gloss {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: help;
}

a.gloss:hover,
a.gloss:focus-visible { background: var(--accent-wash); color: var(--accent-ink); }
a.gloss.is-open { background: var(--accent-wash); color: var(--accent-ink); }

.gloss-pop {
  position: absolute;
  z-index: 70;
  width: min(22rem, calc(100vw - 2rem));
  padding: .85rem 1rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line-firm);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
}
.gloss-pop[hidden] { display: none; }

.gloss-term {
  margin: 0 0 .25rem;
  font-weight: 650; font-size: .95rem; color: var(--accent-ink);
}
.gloss-def { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.gloss-more { font-size: .8rem; color: var(--ink-faint); }
.gloss-more:hover { color: var(--accent-ink); }

/* An underline on paper reads as an underline, not as something to tap. */
@media print {
  .gloss-pop { display: none !important; }
  a.gloss { text-decoration: none; }
}

.block-foot { margin-top: 1rem; color: var(--ink-faint); font-size: .87rem; }

/* ==========================================================================
   Knowledge organisers: a chapter on A4 landscape sheets.

   The sheet is laid out at its real size in millimetres so what is measured
   on screen is what prints; organiser.js sets the type size to fit, sizes
   each picture to its box, and scales the whole sheet down to the column.
   The colours are fixed rather than themed: it is a piece of paper, and it
   stays one in dark mode.
   ========================================================================== */

.ko-frame {
  position: relative;
  width: 100%;
  margin: 0 0 2.5rem;
  overflow: hidden;
}

/* Every sheet of an organiser, one under the other. organiser.js scales the
   whole stack to the column, so the pages keep their gap and their order. */
.ko-pages {
  width: 297mm;
  display: flex;
  flex-direction: column;
  gap: 8mm;
  transform-origin: top left;
}

/* 209mm rather than 210: the height it prints at (see @media print), so the
   type fitted on screen is the type fitted on paper. */
.ko-sheet {
  --ko-columns: 3;
  --ko-rows: 3;
  flex: none;
  width: 297mm;
  height: 209mm;
  box-sizing: border-box;
  padding: 6.5mm 8mm 4.5mm;
  display: flex;
  flex-direction: column;
  gap: 3mm;
  background: #fff;
  color: #16201b;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.34;
  box-shadow: 0 2px 6px rgba(16, 32, 26, .12), 0 18px 40px -24px rgba(16, 32, 26, .45);
  border-radius: 2px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.ko-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 6mm;
  padding-bottom: 2.2mm;
  border-bottom: 1.1mm solid #16201b;
}

.ko-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 2mm;
  margin: 0 0 .8mm;
  font-size: 9pt;
  font-weight: 700;
  letter-spacing: .02em;
  color: #5b6863;
}

/* One dot for each colour on the page, the way a mind map's branches are keyed. */
.ko-dots { display: inline-flex; gap: 1mm; }
.ko-dots i { display: block; width: 2.5mm; height: 2.5mm; border-radius: 50%; }

.ko-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 23pt;
  line-height: 1.05;
  color: #16201b;
  overflow-wrap: break-word;
}

/* The pages after the first carry a smaller heading, to leave the boxes room. */
.ko-head.is-compact { padding-bottom: 1.6mm; border-bottom-width: .8mm; }
.ko-head.is-compact .ko-title { font-size: 15pt; }
.ko-continued {
  margin-left: 1.5mm;
  font-family: var(--sans);
  font-size: 9pt;
  font-style: italic;
  font-weight: 600;
  color: #5b6863;
}

.ko-subtitle {
  margin: 0;
  max-width: 120mm;
  padding: .8mm 3mm;
  border-radius: 99px;
  background: #eef1f0;
  font-size: 9.5pt;
  font-style: italic;
  line-height: 1.25;
  color: #47544e;
  text-align: right;
}

/* The boxes sit in a grid whose rows share the page equally. Each box is as
   many cells as organiser-sheet.php, through Organiser::layout(), gives it:
   what the script asked for, and for the rest whatever its contents earn. */
.ko-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--ko-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ko-rows), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: 2.8mm;
  counter-reset: ko;
}

.ko-box {
  --ko-ink: #4d5a55;
  --ko-wash: #eef1f0;
  counter-increment: ko;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: .45mm solid var(--ko-ink);
  border-radius: 3.2mm;
  background: var(--ko-wash);
  box-shadow: 0 .6mm 0 color-mix(in srgb, var(--ko-ink) 28%, transparent);
  overflow: hidden;
}

.ko-box-title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.8mm;
  margin: 0;
  padding: 1.1mm 2.6mm 1.2mm 1.6mm;
  background: var(--ko-ink);
  color: #fff;
  font-family: var(--sans);
  /* The same on every box, whatever size its words were fitted to, so the
     headings read as one set across the sheet. */
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The order to read the boxes in. */
.ko-box-title::before {
  content: counter(ko);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: #fff;
  color: var(--ko-ink);
  font-size: .78em;
  font-weight: 800;
  line-height: 1;
}

.ko-box-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .7em;
  padding: .75em .95em .85em;
  overflow: hidden;
}

/* The words. organiser.js sets the type size so that they just fit, and
   long words break rather than run out of a narrow box. */
.ko-copy {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4em;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: pretty;
}

.ko-text { margin: 0; }

.ko-list {
  margin: 0;
  padding: 0 0 0 1.05em;
}

.ko-list li + li { margin-top: .22em; }

.ko-list li::marker { color: var(--ko-ink); }
.ko-term { color: var(--ko-ink); }
/* "Term – what it means": the dash keeps the two apart when the line wraps. */
.ko-term::after { content: " \2013"; font-weight: 400; color: #6b7772; }

/* A box of dates is a timeline: a rule down the side with a dot at each date. */
.ko-box.is-dates .ko-list {
  list-style: none;
  padding: 0 0 0 1.25em;
  position: relative;
}
.ko-box.is-dates .ko-list::before {
  content: "";
  position: absolute;
  left: .32em;
  top: .45em;
  bottom: .45em;
  width: .5mm;
  border-radius: 1mm;
  background: color-mix(in srgb, var(--ko-ink) 45%, transparent);
}
.ko-box.is-dates .ko-list li { position: relative; }
.ko-box.is-dates .ko-list li::before {
  content: "";
  position: absolute;
  left: -1.13em;
  top: .42em;
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--ko-ink);
  box-shadow: 0 0 0 .5mm var(--ko-wash);
}
.ko-box.is-dates .ko-term {
  display: inline-block;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
}
.ko-box.is-dates .ko-term::after { content: none; }

/* Pictures. organiser.js puts them beside the words or under them,
   whichever shows them larger, and sizes each one to exactly the room its
   frame has - so a picture is never a postage stamp in a box of space. */
.ko-pictures {
  flex: 0 0 var(--ko-pic, 50%);
  min-height: 0;
  min-width: 0;
  display: flex;
  gap: 1.6mm;
}

.ko-box-body.is-side { flex-direction: row; gap: 1em; }
.is-side .ko-pictures { flex-direction: column; }
.is-stack .ko-pictures { flex-direction: row; }

.is-picture-only .ko-pictures { flex: 1 1 auto; }
.is-picture-only .ko-pictures.is-column { flex-direction: column; }

.ko-picture {
  flex: 1 1 0;
  margin: 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25em;
}

.ko-picture-frame {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

/* Drawn on a white card of its own, so a photograph keeps its colours and a
   diagram drawn on white sits cleanly on the box's wash. Without the script
   it fills its frame; with it, it is given its exact size and centred. */
.ko-picture-frame > img,
.ko-picture-frame > .ko-picture-missing {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.ko-picture-frame > img {
  object-fit: contain;
  background: #fff;
  border-radius: 1.6mm;
  box-shadow: 0 0 0 .3mm color-mix(in srgb, var(--ko-ink) 30%, transparent), 0 .5mm 1.2mm rgba(16, 32, 26, .12);
  cursor: zoom-in;
}

/* A picture pressed on screen, shown large. It is never printed. */
.ko-zoom {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center; gap: .8rem;
  padding: 1.5rem;
  background: rgba(10, 24, 17, .78);
  cursor: zoom-out;
  animation: fade-in .15s ease;
}
.ko-zoom img {
  max-width: min(94vw, 1400px); max-height: 82vh;
  border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.ko-zoom p { margin: 0; color: #fff; font-size: 1rem; text-align: center; }

.ko-picture figcaption {
  flex: 0 0 auto;
  font-size: .84em;
  font-style: italic;
  line-height: 1.25;
  text-align: center;
  color: #47544e;
}

/* In the admin preview, a box that could only be fitted with very small type. */
.ko-maker .ko-box[data-crowded] { outline: .8mm dashed #b3352a; outline-offset: .5mm; }

.ko-picture-missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  border: .4mm dashed var(--ko-ink);
  border-radius: 1.6mm;
  background: rgba(255, 255, 255, .6);
  color: var(--ko-ink);
  font-size: .85em;
  text-align: center;
  padding: 1mm;
  overflow: hidden;
}

.ko-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4mm;
  font-size: 7pt;
  color: #8a8f98;
}

.ko-pageno { font-weight: 700; color: #5b6863; }

.ko-mark { margin-left: auto; text-align: right; }

@media print {
  .ko-zoom { display: none !important; }
  .ko-page { max-width: none; padding: 0; margin: 0; }
  .ko-page .ko-intro { display: none !important; }
  .ko-frame { height: auto !important; margin: 0; overflow: visible; }
  .ko-pages { transform: none !important; gap: 0; }
  /* Each sheet is a page of its own. */
  .ko-sheet + .ko-sheet { break-before: page; }
  .ko-sheet {
    transform: none !important;
    width: 297mm;
    height: 209mm;
    box-shadow: none;
    border-radius: 0;
    break-inside: avoid;
  }
  body:has(.ko-page) main, body:has(.ko-page) #main { padding: 0 !important; margin: 0 !important; }
}

/* ==========================================================================
   The slide presenter: decks drawn by the site (see src/Viewer/Slides.php).
   A slide is a fixed 1280 × 720 stage of absolutely placed boxes; the
   presenter scales the whole stage to fit, so nothing here is responsive.
   ========================================================================== */

.s-stage {
  position: relative;
  overflow: hidden;
  color: #000;
  font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif;
  line-height: 1.2;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.s-stage *, .s-stage *::before, .s-stage *::after { box-sizing: border-box; }
.s-stage p { margin: 0; max-width: none; }
.s-sp, .s-pic, .s-tbl { position: absolute; }
.s-geo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-tx {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: visible; overflow-wrap: break-word;
}
.s-bu { display: inline-block; min-width: 1.15em; padding-right: .35em; text-indent: 0; }
.s-pic { overflow: hidden; }
.s-pic img { display: block; border: 0; border-radius: 0; animation: none; }
.s-tbl table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.s-tbl td { padding: 4.8px 9.6px; vertical-align: top; border: 1px solid rgba(0, 0, 0, .18); }

/* -- revision pack ---------------------------------------------------------- */

/* The picker: a section per subject, a fold per chapter, a tick per lesson,
   and a bar along the foot of the window holding the options and the button. */
.pack-board { margin: .9rem 0 0; font-size: .84rem; color: var(--ink-faint); }
.pack-subject { margin: 0 0 2rem; }
.pack-subject h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.25rem; }
.pack-subject h2 .dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); }
.pack-topic {
  margin: 1.1rem 0 .45rem; font-size: .86rem; font-weight: 700; color: var(--ink-faint);
}
.pack-chapter {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: .5rem;
}
.pack-chapter.has-picked { border-color: var(--accent); }
.pack-chapter summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; cursor: pointer; font-weight: 600;
}
.pack-chapter-count { flex: none; font-size: .8rem; font-weight: 500; color: var(--ink-faint); }
.pack-chapter.has-picked .pack-chapter-count { color: var(--accent-ink); font-weight: 600; }
.pack-all { display: flex; gap: .55rem; align-items: center; padding: 0 1.1rem .55rem; font-size: .88rem; color: var(--ink-soft); }
.pack-all[hidden] { display: none; }
.pack-lessons { list-style: none; margin: 0; padding: 0 .6rem .6rem; }
.pack-lessons label {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .5rem; border-radius: var(--r-xs); cursor: pointer;
}
.pack-lessons label:hover { background: var(--surface-2); }
.pack-lessons label span:nth-of-type(1) { flex: 1; min-width: 0; }
.pack-lessons input, .pack-all input, .pack-options input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; }
.pack-terms { flex: none; font-size: .78rem; color: var(--ink-faint); }

.pack-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.pack-options { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; border: 0; font-size: .9rem; }
.pack-options label { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.pack-total { flex: 1 1 12rem; margin: 0; font-size: .86rem; color: var(--ink-faint); }
.pack-total.is-over { color: var(--warn); }
.pack-bar .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* The pack itself: one lesson after another in a single reading column. */
.pack-page { width: min(100% - 2rem, var(--text)); }
.pack-contents {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 0 0 2.4rem;
}
.pack-contents ol { margin: .4rem 0 0; padding-left: 1.3rem; }
.pack-contents li { margin: .3rem 0; }
.pack-contents a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pack-contents a:hover { color: var(--accent-ink); text-decoration: underline; }
.pack-contents .where { display: block; font-size: .78rem; color: var(--ink-faint); }
.pack-organisers { margin: .9rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.pack-organisers a { font-weight: 600; }
.pack-lesson { padding-top: 2.4rem; margin-top: 2.4rem; border-top: 2px solid var(--line); }
.pack-lesson-title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .45rem; }
.pack-lesson-title a { color: inherit; text-decoration: none; }
.pack-lesson-title a:hover { color: var(--accent-ink); }

/* On paper: the contents on the first sheet, then each lesson on a new one. */
@media print {
  .pack-page { width: auto; }
  .pack-head .search-note { display: none; }
  .pack-contents { border: 0; padding: 0; }
  .pack-contents a { color: #000; }
  .pack-lesson { break-before: page; border-top: 0; padding-top: 0; margin-top: 0; }
}

/* -- maintenance mode, as the signed-in admin sees the site ------------------------------------- */

.maintenance-banner {
  position: sticky; top: 0; z-index: 60;
  padding: .55rem 1rem; text-align: center; font-size: .9rem;
  background: var(--bad-soft); color: var(--ink); border-bottom: 1px solid var(--bad);
}
.maintenance-banner a { color: inherit; font-weight: 650; margin-left: .4rem; }

/* -- "the site has been updated" ---------------------------------------------------------------
   Shown by app.js when the tab's release is no longer the live one. Top
   right, where nothing else lives: the chat button has the bottom left and
   the cookie note the bottom centre. Across the top on a phone. Under the
   menu (60 on a phone), so opening the menu still covers it. */

.release-toast {
  position: fixed; z-index: 55;
  right: 1.25rem; top: 1rem;
  display: flex; align-items: center; gap: .8rem;
  width: min(100% - 2.5rem, 400px);
  padding: .8rem .8rem .8rem 1.1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  font-size: .9rem; line-height: 1.4;
  opacity: 0; transform: translateY(-.6rem);
  transition: opacity .22s ease, transform .22s ease;
}
.release-toast.is-visible { opacity: 1; transform: none; }
.release-toast p { margin: 0; flex: 1; }
.release-toast .release-toast-refresh { flex: none; padding: .45rem .95rem; font-size: .85rem; }
.release-toast-close {
  flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.release-toast-close:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 640px) {
  .release-toast { top: .75rem; left: .75rem; right: .75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .release-toast { transition: none; transform: none; }
}
@media print {
  .release-toast { display: none; }
}

/* -- "closing soon" -------------------------------------------------------------------------------
   Shown by app.js when the admin has scheduled a closure notice - see
   ClosureNotice. Same shape and spot as the release toast above, but with
   the warning colour: this one is telling a reader to wrap up, not just
   offering a refresh. */

.closure-toast {
  position: fixed; z-index: 55;
  right: 1.25rem; top: 1rem;
  display: flex; align-items: center; gap: .8rem;
  width: min(100% - 2.5rem, 400px);
  padding: .8rem .8rem .8rem 1.1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-left: 3px solid var(--bad);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  font-size: .9rem; line-height: 1.4;
  opacity: 0; transform: translateY(-.6rem);
  transition: opacity .22s ease, transform .22s ease;
}
.closure-toast.is-visible { opacity: 1; transform: none; }
.closure-toast p { margin: 0; flex: 1; }
.closure-toast-close {
  flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-faint); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.closure-toast-close:hover { background: var(--surface-2); color: var(--ink); }

@media (max-width: 640px) {
  .closure-toast { top: .75rem; left: .75rem; right: .75rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .closure-toast { transition: none; transform: none; }
}
@media print {
  .closure-toast { display: none; }
}

/* -- answers behind a button --------------------------------------------- */
/* A <details> styled as a button: the answer stays folded away until it is
   asked for. Both labels are in the page and the open state picks one, so
   it works without JavaScript. app.js opens them all for printing. */

.reveal { margin: .9rem 0 0; }
.reveal > summary {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem;
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: .88rem; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::before {
  content: ""; width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
}
.reveal[open] > summary::before { transform: rotate(45deg); }
.reveal > summary:hover { border-color: var(--ink-faint); background: var(--hover); }
.reveal > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reveal .reveal-hide, .reveal[open] .reveal-show { display: none; }
.reveal[open] .reveal-hide { display: inline; }
.reveal[open] > summary { margin-bottom: .9rem; }
.reveal-small > summary { padding: .3rem .8rem; font-size: .8rem; }
.reveal-small[open] > summary { margin-bottom: .5rem; }
.reveal-answer { margin: 0; }
.reveal-why { margin: .4rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.reveal-body .label { margin: .2rem 0 .5rem; }
.reveal-body .label:not(:first-child) { margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .reveal > summary::before { transition: none; }
}

/* -- retrieval questions --------------------------------------------------- */

.recall-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.recall-list > li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .9rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.recall-question { margin: 0; font-weight: 600; }
.recall-item .reveal { margin-top: .5rem; }
.recall-item .reveal-answer {
  padding: .5rem .8rem; border-left: 3px solid var(--ok);
  background: var(--ok-soft);
}

/* -- practice questions ---------------------------------------------------- */

/* Set the way an exam paper sets them: the number in bold, the command
   word beside it, the marks in brackets at the right, a rule between. */
.practice-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.practice-q, .practice-q.panel-card {
  padding: 1.3rem 0 1.4rem; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: none;
}
.practice-q .qhead { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: baseline; margin-bottom: .5rem; }
.practice-q .qnum {
  min-width: 1.6rem;
  font-family: var(--display); font-size: 1.5rem; font-weight: 750; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.practice-q .qmarks { margin-left: auto; font-weight: 650; font-size: .92rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.practice-q .qtext { font-size: 1.08rem; font-weight: 500; line-height: 1.55; margin: 0 0 .85rem; white-space: pre-line; }
.practice-q .qpicture { margin: 0 0 .9rem; }
.practice-q .qpicture img {
  display: block; max-width: min(100%, 560px); max-height: 420px; height: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .4rem;
}
.practice-subhead { margin: 2rem 0 .9rem; font-size: 1.15rem; }
.practice-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.practice-options li {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .6rem .9rem; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-firm); font-size: .97rem;
}
.practice-options .key { font-weight: 750; color: var(--ink-faint); min-width: 1.1rem; font-size: .85rem; }
.practice-q .reveal-answer strong { color: var(--ok); }

/* A quick check that marks itself (app.js): the options are buttons. */
.practice-options button {
  display: flex; align-items: baseline; gap: .7rem; width: 100%;
  margin: -.65rem -.9rem; padding: .65rem .9rem;
  border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.practice-options li:has(button):hover { border-color: var(--ink-faint); background: var(--hover); }
.practice-options li.is-right { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.practice-options li.is-right .key { color: var(--ok); }
.practice-options li.is-wrong { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.practice-options li.is-wrong .key { color: var(--bad); }
.practice-options li .verdict { margin-left: auto; font-size: .88rem; font-weight: 750; }
.practice-options li.is-right .verdict { color: var(--ok); }
.practice-options li.is-wrong .verdict { color: var(--bad); }
[data-quiz].is-answered .practice-options button { cursor: default; }

/* -- typeset maths ----------------------------------------------------------- */
/* KaTeX sets maths a touch larger than the text around it; bring it back to
   the text size, and let a long display equation scroll rather than burst
   out of a narrow column. */

.katex { font-size: 1.08em; }
.katex-display { margin: .7em 0; overflow-x: auto; overflow-y: hidden; padding: .2em 0; }
.worked-steps .working .katex { font-size: 1.12em; }
.worked-answer .katex { color: inherit; }

/* ==========================================================================
   The home page.

   A pale blue-grey opening: spaced capitals, the heading with its second
   line in green, two buttons and three things the site does, beside a real
   picture of the site on a mint shape with a handwritten note pointing at
   it. A strip of four facts under it; the study tools as cards on pastel
   tiles; how it works, with real pictures; the boards; the subjects; what
   changed lately; a green band inviting a start; and why it is free.
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(2.6rem, 6vw, 5rem) 0 clamp(2.8rem, 6vw, 4.6rem);
  background: var(--hero-wash);
}
.hero-inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.9rem, 1.6rem + 4.6vw, 5.4rem);
  font-weight: 800; line-height: 1; letter-spacing: -.05em;
}
.hero-accent { display: block; color: var(--brand-ink); }
.hero-lede { margin: 0 0 2.2rem; max-width: 50ch; font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); line-height: 1.55; color: var(--ink-soft); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* Three things the site does: an icon in green, a name, a quiet line. */
.hero-features {
  list-style: none; margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem;
}
.hero-features li { display: flex; align-items: center; gap: .7rem; }
.hero-features .icon { flex: none; width: 32px; height: 32px; color: var(--brand); stroke-width: 1.6; }
.hero-features b { display: block; font-family: var(--display); font-size: .96rem; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.hero-features span span { display: block; font-size: .86rem; color: var(--ink-faint); line-height: 1.35; white-space: nowrap; }

/* The picture: a real page of the site on a mint shape, with three strokes
   of a pen at its corner and a handwritten note pointing at it. */
.hero-visual { position: relative; padding: clamp(1rem, 3vw, 2.2rem) 0; }
/* On a wide screen the picture leaves room on its right for the note, and
   where the window has a margin to spare, the note reaches into it. */
@media (min-width: 1181px) {
  .hero-visual { padding-right: 8.6rem; }
}
@media (min-width: 1400px) {
  .hero-visual { margin-right: -3rem; }
}
.hero-blob {
  position: absolute; z-index: 0; pointer-events: none;
  top: -4%; right: -9%; width: 92%; height: 112%;
  fill: var(--mint); opacity: .8;
}
.hero-sparks {
  position: absolute; z-index: 1; top: -.2rem; left: -1.6rem; width: 46px; height: 46px;
  fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round;
}
.hero-shot {
  position: relative; z-index: 1; margin: 0;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 820; }
/* The dark picture in the dark theme, when there is one. */
.hero-shot-dark { display: none !important; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-shot.has-dark .hero-shot-light { display: none !important; }
  :root:not([data-theme="light"]) .hero-shot.has-dark .hero-shot-dark { display: block !important; }
}
@media screen {
  :root[data-theme="dark"] .hero-shot.has-dark .hero-shot-light { display: none !important; }
  :root[data-theme="dark"] .hero-shot.has-dark .hero-shot-dark { display: block !important; }
}
.hero-note {
  position: absolute; z-index: 2; right: 0; top: 40%; margin: 0;
  width: 7.6rem;
  font-family: var(--hand); font-weight: 600; font-size: 1.5rem; line-height: 1.12;
  color: var(--ink-soft); transform: rotate(-2deg);
}
.hero-note-arrow {
  position: absolute; left: -.6rem; top: -4.4rem; width: 44px; height: 54px;
  fill: none; stroke: var(--ink-soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* What the site holds, on a white strip under the opening. */
.home-facts { background: var(--bg); border-bottom: 1px solid var(--line); }
.fact-strip {
  list-style: none; margin-block: 0; padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem 2rem;
}
.fact-strip li { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.fact-strip .icon { flex: none; width: 36px; height: 36px; color: var(--ink); stroke-width: 1.5; }
.fact-strip b { display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.fact-strip span span { display: block; color: var(--ink-faint); font-size: .95rem; line-height: 1.35; }

.home-block { padding: clamp(3rem, 6.5vw, 5.4rem) 0; }
.home-block + .home-block { padding-top: clamp(1rem, 3vw, 2rem); }
.home-block-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: .3rem 1.5rem; margin-bottom: 1.5rem;
}
.home-block-head h2 { margin: 0; font-size: clamp(1.8rem, 1.35rem + 1.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; }
.home-block-head p { margin: 0; color: var(--ink-faint); }

/* A section's heading: spaced capitals, the heading, a quiet line, all
   centred; or, split, the heading on the left and the line on the right. */
.home-head { margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 64rem; text-align: center; }
.home-head h2 { margin: 0 0 .6rem; font-size: clamp(2rem, 1.3rem + 2vw, 2.85rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.08; }
.home-head p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); }
.home-head.is-split {
  max-width: none; text-align: left;
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: .6rem 2rem;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.home-head.is-split h2 { margin: 0; }
.home-head.is-split p:not(.eyebrow) { max-width: 44ch; color: var(--ink-faint); font-size: 1rem; }

/* The study tools: four cards, each with its icon on a tile of its colour. */
.home-tools { background: var(--wash-soft); border-bottom: 1px solid var(--line); }
.home-tools + .home-block { padding-top: clamp(3rem, 6.5vw, 5.4rem); }
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tool-card {
  --tile: var(--tile-notes); --tile-ink: var(--tile-notes-ink);
  display: flex; flex-direction: column; gap: .9rem; height: 100%;
  padding: 1.5rem 1.5rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.tool-card[data-tile="questions"] { --tile: var(--tile-questions); --tile-ink: var(--tile-questions-ink); }
.tool-card[data-tile="cards"]     { --tile: var(--tile-cards);     --tile-ink: var(--tile-cards-ink); }
.tool-card[data-tile="packs"]     { --tile: var(--tile-packs);     --tile-ink: var(--tile-packs-ink); }
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-firm); }
.tool-card-head { display: flex; align-items: center; gap: 1rem; }
.tool-card-head b { font-family: var(--display); font-size: 1.24rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.tile-icon {
  flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 12px;
  background: var(--tile); color: var(--tile-ink);
}
.tile-icon .icon { width: 26px; height: 26px; }
.tool-card-text { flex: 1; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; }
.tool-card-go {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 650; font-size: .95rem; color: var(--brand);
}
.tool-card-go .icon { width: 17px; height: 17px; transition: transform .15s ease; }
.tool-card:hover .tool-card-go .icon { transform: translateX(3px); }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool-card-go { color: var(--brand-dark); }
}
@media screen {
  :root[data-theme="dark"] .tool-card-go { color: var(--brand-dark); }
}

/* How it works: a real picture of each step, numbered underneath. */
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.how-step {
  --tile: var(--tile-notes);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow); overflow: hidden;
}
.how-step:nth-child(2) { --tile: var(--tile-cards); }
.how-step:nth-child(3) { --tile: var(--tile-questions); }
.how-shot {
  margin: 0; padding: 1.1rem 1.1rem 0;
  background: var(--tile);
  border-bottom: 1px solid var(--line);
}
.how-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 760 / 520; object-fit: cover; object-position: top left;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0;
  box-shadow: 0 10px 30px -14px rgba(15, 23, 42, .35);
  background: var(--surface);
}
.how-text { display: flex; align-items: flex-start; gap: .9rem; padding: 1.2rem 1.35rem 1.4rem; }
.how-n {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand); color: #fff;
  font-family: var(--display); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.how-text h3 { margin: .1rem 0 .25rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.how-text p { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }

/* The subjects, as cards: the subject's picture on a tile of its colour. */
.subject-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.subject-card {
  display: flex; align-items: center; gap: 1.1rem; height: 100%;
  padding: 1.25rem 1.35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.subject-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--tint) 40%, var(--line)); }
.subject-card-icon {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 14px;
  background: color-mix(in srgb, var(--tint) 14%, var(--surface));
}
.subject-card-icon .subject-icon { width: 40px; height: 40px; }
.subject-card-text { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.subject-card-text b { font-family: var(--display); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.subject-card-boards { color: var(--ink-faint); font-size: .9rem; }
.subject-card-count { margin-top: .3rem; color: var(--ink-soft); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.subject-card > .icon { flex: none; width: 22px; height: 22px; color: var(--ink-faint); transition: transform .15s ease, color .15s ease; }
.subject-card:hover > .icon { transform: translateX(3px); color: var(--tint); }

/* The subjects as a list, on the study tools' pages: each one's colour as
   its edge, its name, its boards, a dotted leader, and how much it holds. */
.subject-index {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-xs);
}
.subject-index li + li { border-top: 1px solid var(--line); }
.subject-index a {
  display: flex; align-items: baseline; gap: .6rem 1.1rem;
  padding: 1.1rem 1.2rem 1.1rem 1.2rem;
  border-left: 5px solid var(--tint);
  color: var(--ink); text-decoration: none;
  transition: background .15s ease;
}
.subject-index a:hover { background: var(--hover); }
.subject-index-name {
  font-family: var(--display); font-size: clamp(1.4rem, 1.15rem + .9vw, 1.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
}
.subject-index-boards { color: var(--ink-faint); font-size: .92rem; white-space: nowrap; }
.subject-index-leader {
  flex: 1 1 2rem; min-width: 2rem; align-self: center; margin-top: .6rem;
  border-bottom: 2px dotted var(--line-firm);
}
.subject-index-count { font-size: .95rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.subject-index a > .icon {
  flex: none; align-self: center; width: 20px; height: 20px; color: var(--ink-faint);
  transition: transform .15s ease, color .15s ease;
}
.subject-index a:hover > .icon { color: var(--ink); transform: translateX(3px); }

.subject-soon { margin: 1.3rem 0 0; color: var(--ink-faint); line-height: 1.9; }
.subject-soon span { color: var(--ink-soft); font-weight: 650; margin-right: .2rem; }
.subject-soon a { color: var(--ink-faint); text-decoration-color: var(--line-firm); text-underline-offset: 3px; }
.subject-soon a:hover { color: var(--ink); text-decoration-color: currentColor; }

.subject-soon { margin: 1.3rem 0 0; color: var(--ink-faint); line-height: 1.9; }
.subject-soon span { color: var(--ink-soft); font-weight: 650; margin-right: .2rem; }
.subject-soon a { color: var(--ink-faint); text-decoration-color: var(--line-firm); text-underline-offset: 3px; }
.subject-soon a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* The exam boards: three tiles that set the board filter. */
.board-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.board-tile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem 1rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease, border-color .18s ease;
}
.board-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-firm); }
.board-tile b { font-family: var(--display); font-size: 1.85rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: var(--brand-ink); }
.board-tile span { grid-column: 1; color: var(--ink-faint); font-size: .92rem; }
.board-tile > .icon { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; transition: transform .15s ease; }
.board-tile:hover > .icon { transform: translateX(3px); }

/* Lately: what changed, in two columns. */
.home-recent .recent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
.recent-card {
  padding: 1.5rem 1.6rem 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow);
}
.recent-card .home-block-head { margin-bottom: .6rem; }
.recent-card .home-block-head h2 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.025em; }
.recent-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.recent-list li::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tint);
}
.recent-list a { flex: 1; min-width: 0; display: grid; color: var(--ink); text-decoration: none; }
.recent-list b { font-weight: 650; font-size: 1.02rem; }
.recent-list a span { color: var(--ink-faint); font-size: .88rem; }
.recent-list a:hover b { color: var(--accent-ink); }
.recent-list time { flex: none; color: var(--ink-faint); font-size: .86rem; font-variant-numeric: tabular-nums; }

/* The invitation, last but one: a band of the brand's green. */
.home-start { padding: clamp(1rem, 3vw, 2rem) 0 clamp(1.2rem, 3vw, 2rem); }
.home-start-inner {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; gap: .3rem; text-align: center;
  padding: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: calc(var(--r-xl) + 4px);
  background: radial-gradient(120% 140% at 100% 0%, #1f8f75 0%, var(--brand) 40%, var(--brand-deep) 100%);
  color: #fff;
}
.home-start .eyebrow { color: rgba(255, 255, 255, .78); margin-bottom: .4rem; }
.home-start h2 { margin: 0; max-width: 26ch; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -.045em; color: #fff; }
.home-start p:not(.eyebrow) { margin: .3rem 0 1.4rem; max-width: 46ch; color: rgba(255, 255, 255, .86); font-size: 1.12rem; line-height: 1.55; }
.home-start .hero-actions { justify-content: center; gap: 1rem 1.6rem; }
.btn-light { background: #fff; border-color: #fff; color: var(--brand-deep); }
.btn-light:hover { background: #eaf6f2; border-color: #eaf6f2; color: var(--brand-deep); }
.home-start-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-weight: 650; color: #fff; text-decoration: none;
}
.home-start-link .icon { width: 18px; height: 18px; transition: transform .15s ease; }
.home-start-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-start-link:hover .icon { transform: translateX(3px); }

/* Why it is free: a pale band, the last thing on the page. */
.home-free { padding: clamp(1rem, 3vw, 2rem) 0 0; }
.home-free-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem 2.5rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--hero-wash); border: 1px solid var(--line); border-radius: calc(var(--r-xl) + 4px);
}
.home-free h2 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.3rem); font-weight: 800; letter-spacing: -.035em; }
.home-free p { margin: 0; max-width: 56ch; color: var(--ink-soft); font-size: 1.05rem; }
.home-free-links { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.4rem; }
.home-free-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; color: var(--ink);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
/* The link to the advert's page: there, findable, and quieter than the rest. */
.home-free-link.is-quiet { font-weight: 500; color: var(--ink-soft); }

@media (max-width: 1180px) {
  .hero-note { display: none; }
}
@media (max-width: 1100px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-strip li { justify-content: flex-start; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 620px; width: 100%; margin: 0 auto; }
  .how-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .home-recent .recent-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tool-grid, .fact-strip { grid-template-columns: minmax(0, 1fr); }
  .fact-strip { gap: 1.1rem; }
  .hero-actions .btn { width: 100%; }
  .hero-features { flex-direction: column; gap: 1rem; }
  .hero-features b, .hero-features span span { white-space: normal; }
  .hero-sparks { left: -.6rem; top: -.8rem; width: 34px; height: 34px; }
  .home-head.is-split { flex-direction: column; align-items: flex-start; }
  .subject-index a { flex-wrap: wrap; padding-left: .9rem; }
  .subject-index-leader { display: none; }
  .subject-index-name { flex: 1 1 auto; }
  .subject-index-boards, .subject-index-count { flex-basis: 100%; order: 3; white-space: normal; }
  .subject-index-count { order: 4; }
  .subject-index a > .icon { order: 2; }
  .subject-card-icon { width: 54px; height: 54px; }
  .subject-card-icon .subject-icon { width: 34px; height: 34px; }
}

/* ==========================================================================
   The study tools: their own pages, a subject's tools, a deck of
   flashcards, a page of exam questions.
   ========================================================================== */

/* -- a tool's own page ------------------------------------------------------ */

.tool-head { padding: 2rem 0 2.6rem; }
.tool-head .eyebrow { display: flex; align-items: center; gap: .45rem; }
.tool-head h1 { margin-bottom: .7rem; font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
.tool-head .lede { margin-bottom: 0; }
.tool-facts {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  color: var(--ink-soft); font-size: .95rem;
}
.tool-facts li { position: relative; padding-left: 1.2rem; }
.tool-facts li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }

.tool-subjects { padding-top: 2.2rem; }
.tool-subjects > h2 { margin-bottom: 1rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.subject-index.is-compact a { padding-top: .85rem; padding-bottom: .85rem; }
.subject-index.is-compact .subject-index-name { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); }

/* -- the top of a subject's pages ------------------------------------------- */

/* The page's band, with the subject's picture on a tile of its colour
   beside its name, and the tools as tabs along its foot. */
.subject-head {
  padding: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
.subject-head-title { display: flex; align-items: center; gap: 1rem; }
.subject-head-icon {
  flex: none; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 14px;
  background: color-mix(in srgb, var(--tint) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tint) 18%, var(--line));
}
.subject-head-icon .subject-icon { width: 40px; height: 40px; }
.subject-head-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.3rem; align-items: end;
  padding-bottom: 1.3rem;
}
.subject-head h1 { margin: 0; font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; }
.subject-head-tool { color: color-mix(in srgb, var(--tint) 80%, var(--ink)); font-weight: 800; }
.subject-head .eyebrow { margin-bottom: .55rem; }
.subject-head-blurb { margin: .6rem 0 0; color: var(--ink-soft); max-width: 60ch; font-size: 1.06rem; }
.subject-head-boards { justify-content: flex-end; max-width: 24rem; }
.subject-head-boards .code { opacity: .7; font-weight: 500; }

/* -- which course: the choice a subject offers before its chapters --------- */

.pathway { margin-top: 1.6rem; padding: 0; border-radius: var(--r-lg); overflow: hidden; }
.pathway-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.3rem; cursor: pointer; list-style: none;
}
.pathway-summary::-webkit-details-marker { display: none; }
.pathway-summary-text { display: grid; gap: .1rem; min-width: 0; }
.pathway-summary-text small { font-size: .82rem; font-weight: 750; color: var(--ink-faint); }
.pathway-summary-text b { font-size: 1.02rem; }
.pathway-change {
  flex: none; padding: .35rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-firm); font-size: .84rem; font-weight: 650; color: var(--ink-soft);
}
.pathway-summary:hover .pathway-change { border-color: var(--brand); color: var(--ink); }
.pathway-details[open] > .pathway-summary { border-bottom: 1px solid var(--panel-line); }
.pathway-body { display: grid; gap: 1.3rem; padding: 1.2rem 1.3rem 1.4rem; }
.pathway-group h2 { margin: 0 0 .65rem; font-size: 1.1rem; }
.pathway-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .65rem; }
.pathway-option {
  display: grid; align-content: start; gap: .3rem;
  padding: .95rem 1.05rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-firm); background: var(--surface);
  color: var(--ink); text-decoration: none;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.pathway-option:hover { border-color: var(--brand);  }
.pathway-option[aria-current] { border-color: var(--accent); background: var(--accent-wash); }
.pathway-option b { font-size: 1.02rem; }
.pathway-option span { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.pathway-option.is-all { border-style: dashed; }
.pathway-note { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.pathway-note a { color: var(--accent-ink); font-weight: 650; }

/* A tab per study tool, on the rule under the subject's name. */
.tool-tabs {
  display: flex; gap: 1.8rem; overflow-x: auto;
  border-top: 1px solid var(--line);
  scrollbar-width: none;
}
.tool-tabs::-webkit-scrollbar { display: none; }
.tool-tab {
  flex: none;
  display: inline-flex; align-items: center;
  padding: .8rem 0 .85rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  color: var(--ink-faint); text-decoration: none;
  font-family: var(--display); font-weight: 650; font-size: 1.02rem;
  transition: color .14s ease, border-color .14s ease;
}
.tool-tab:hover { color: var(--ink); border-bottom-color: var(--line-firm); }
.tool-tab[aria-current] { color: var(--ink); border-bottom-color: var(--tint, var(--ink)); }

@media (max-width: 760px) {
  .subject-head-main { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .subject-head-boards { justify-content: flex-start; max-width: none; }
  .subject-head-icon { width: 52px; height: 52px; border-radius: 12px; }
  .subject-head-icon .subject-icon { width: 32px; height: 32px; }
  .tool-tabs { gap: 1.2rem; }
}

/* -- a subject's chapters, for one tool ---------------------------------- */

/* A subject's chapters as the contents page of a revision guide: each
   chapter under a short rule, its lessons numbered beneath it. */
.topic-block { margin-top: 2.8rem; scroll-margin-top: 6rem; }
.topic-block-title { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); margin-bottom: .2rem; }
.topic-block-title a { color: inherit; text-decoration: none; }
.topic-block-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.topic-block-meta { margin: 0 0 1.2rem; color: var(--ink-faint); font-size: .92rem; }
.chapter-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.chapter-card, .chapter-card.panel-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  border-top: 4px solid var(--tint, var(--accent));
  box-shadow: var(--shadow-xs);
  padding: 0 1.2rem .6rem;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.chapter-card:hover { box-shadow: var(--shadow-md); }
.chapter-card-head {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: 1rem 0 .7rem;
  color: var(--ink); text-decoration: none;
}
a.chapter-card-head:hover b { text-decoration: underline; text-underline-offset: 3px; }
.chapter-card-head > .icon { flex: none; margin-top: .3rem; width: 16px; height: 16px; color: var(--ink-ghost); }
.chapter-card-text { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.chapter-card-text b { font-family: var(--display); font-size: 1.22rem; font-weight: 750; line-height: 1.2; letter-spacing: -.015em; }
.chapter-card-text span { font-size: .84rem; color: var(--ink-faint); }
.count-pill {
  flex: none; margin-top: .25rem;
  padding: .1rem .5rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-firm); color: var(--ink-soft);
  font-size: .78rem; font-weight: 650; white-space: nowrap;
}
.chapter-card.is-empty { opacity: .65; }
.chapter-card.is-empty .count-pill { color: var(--ink-faint); }
.chapter-card-lessons {
  list-style: none; margin: 0; padding: 0;
  display: grid;
}
.chapter-card-lessons a {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .4rem 0; border-top: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none; font-size: .94rem;
}
.chapter-card-lessons a:hover { color: var(--ink); }
.chapter-card-lessons span { margin-left: auto; font-size: .8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* -- the top of a deck or a page of questions ----------------------------- */

.study-page { max-width: 880px; }
.study-head { padding: 1.6rem 0 1.4rem; }
.study-head .eyebrow { display: flex; align-items: center; gap: .55rem; }
.study-head .eyebrow .tool-icon { width: 30px; height: 30px; border-radius: 9px; }
.study-head h1 { margin: 0; }
.study-meta { margin: .5rem 0 0; color: var(--ink-faint); font-weight: 600; }
.study-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: 0; }
.study-stats li {
  padding: .3rem .8rem; border-radius: var(--r-pill);
  background: var(--panel); border: 1px solid var(--panel-line);
  font-size: .85rem; color: var(--ink-soft);
}
.study-stats b { color: var(--ink); }

.empty-state { padding: 2.2rem; text-align: center; border-radius: var(--r-lg); margin-top: 1.4rem; }
.empty-state h2 { font-size: 1.3rem; }
.empty-state p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }

.question-group { margin-top: 2.2rem; scroll-margin-top: 6rem; }
.question-group:first-of-type { margin-top: .4rem; }
.question-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem;
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.question-group-head h2 { margin: 0; font-size: 1.3rem; }
.question-group-head a { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; font-weight: 600; text-decoration: none; }
.question-group-head a .icon { width: 16px; height: 16px; }

.next-steps { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; }
.next-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem; border-radius: var(--r);
  color: var(--ink); text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.next-card:hover { }
.next-card span { display: grid; }
.next-card small { font-size: .86rem; font-weight: 700; color: var(--ink-faint); }
.next-card b { font-size: 1.02rem; }
.next-card > .icon { margin-left: auto; color: var(--ink-ghost); }
@media (max-width: 600px) { .next-steps { grid-template-columns: minmax(0, 1fr); } }

/* -- a deck of flashcards ------------------------------------------------- */

/* The list, as it is without JavaScript: every term, its definition folded. */
.deck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.deck-item { border-radius: var(--r-sm); padding: 0; }
.deck-item summary { padding: .9rem 1.1rem; font-weight: 650; cursor: pointer; }
.deck-item p { margin: 0; padding: 0 1.1rem 1rem; color: var(--ink-soft); }
.deck.is-live .deck-list { display: none; }
.deck.is-live.show-list .deck-list { display: grid; margin-top: 1.4rem; }

.deck-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-bottom: 1rem;
}
.deck-progress { flex: 1 1 220px; display: grid; gap: .4rem; }
.deck-count { font-size: .9rem; font-weight: 650; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.deck-track { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.deck-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand); transition: width .3s ease; }
.deck-tools { display: flex; gap: .3rem; }
.deck-tools button {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 36px; padding: 0 .8rem;
  border: 1px solid var(--line-firm); border-radius: var(--r-pill);
  background: var(--panel); color: var(--ink-soft);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
}
.deck-tools button:hover { border-color: var(--brand); color: var(--ink); }
.deck-tools button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.deck-tools .icon { width: 16px; height: 16px; }

.flashcard {
  position: relative; display: block; width: 100%;
  min-height: clamp(260px, 42vh, 380px);
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: center;
  cursor: pointer;
  perspective: 1600px;
}
.flashcard-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3, .7, .3, 1);
}
.flashcard.is-flipped .flashcard-inner { transform: rotateY(180deg); }
.flashcard-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem;
  padding: 2.4rem 2rem;
  border-radius: var(--r-xl);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-md);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flashcard-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--panel);
}
.flashcard-side {
  position: absolute; top: 1.1rem; left: 1.3rem;
  font-size: .82rem; font-weight: 750; color: var(--ink-faint);
}
.flashcard-source { position: absolute; top: 1.1rem; right: 1.3rem; font-size: .76rem; color: var(--ink-faint); max-width: 45%; text-align: right; }
.flashcard-term { font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.15; }
.flashcard-def { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 36ch; }
.flashcard-hint { position: absolute; bottom: 1.1rem; left: 0; right: 0; font-size: .8rem; color: var(--ink-faint); }

/* A card with a picture on either side. The picture is a diagram on its own
   white ground so it reads the same in the dark theme. With words as well it
   takes the top half of the face and the words sit beneath; on its own it is
   the whole face. */
.flashcard.has-picture { min-height: clamp(380px, 64vh, 580px); }
.flashcard-face.has-picture { justify-content: flex-start; gap: .6rem; padding: 2.4rem 1.2rem 2.2rem; }
.flashcard-picture {
  flex: 0 0 58%; width: 100%; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: var(--r-md); padding: .4rem;
}
.flashcard-picture img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.flashcard-face.has-picture .flashcard-term,
.flashcard-face.has-picture .flashcard-def {
  flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center;
  overflow-y: auto; max-width: none; padding-bottom: 1rem;
}
.flashcard-face.has-picture .flashcard-term { font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); }
.flashcard-face.has-picture .flashcard-def { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); }
.flashcard-face.is-picture-only .flashcard-picture { flex: 1 1 auto; }
.deck-item-picture { display: block; max-width: min(100%, 420px); height: auto; background: #fff; border-radius: var(--r-sm); padding: .3rem; margin: .4rem 0; }
.deck-item details > .deck-item-picture { margin: 0 1.1rem .6rem; }

.deck-actions {
  display: grid; grid-template-columns: auto 1fr 1fr auto; gap: .6rem;
  margin-top: 1rem;
}
.deck-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; padding: 0 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-firm); background: var(--panel); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.deck-actions button:hover { }
.deck-actions .is-again:hover { border-color: var(--bad); background: var(--bad-soft); }
.deck-actions .is-got { background: var(--brand); border-color: var(--brand); color: #fff; }
.deck-actions .is-got:hover { filter: brightness(1.07); }
.deck-actions .is-nav { width: 52px; padding: 0; }
.deck-actions kbd {
  font: 600 .7rem var(--mono); padding: .05rem .35rem; border-radius: 5px;
  border: 1px solid currentColor; opacity: .55;
}
.deck-keys { margin: .9rem 0 0; text-align: center; font-size: .8rem; color: var(--ink-faint); }

.deck-done { padding: 2.4rem 1.6rem; text-align: center; border-radius: var(--r-xl); }
.deck-done h2 { font-size: 1.8rem; }
.deck-score { font-family: var(--display); font-size: 3.2rem; font-weight: 800; letter-spacing: -.05em; color: var(--brand); margin: .2rem 0 .6rem; }
.deck-done .btn-row { justify-content: center; margin-top: 1.2rem; }

@media (max-width: 560px) {
  .deck-actions { grid-template-columns: 1fr 1fr; }
  .deck-actions .is-nav { display: none; }
  .deck-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flashcard-inner { transition: none; }
}

/* -- past papers ------------------------------------------------------------- */

.papers-soon {
  position: relative;
  margin-top: 6rem; padding: clamp(1.5rem, 4vw, 2.6rem);
  border-radius: var(--r-xl);
}
.papers-soon > div { max-width: 40rem; }
.papers-links { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.papers-links a {
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1rem; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 650;
}
.papers-links a:hover { border-color: var(--brand); background: var(--accent-wash); }
.papers-links small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .8rem; }
.papers-links .icon { margin-left: auto; color: var(--ink-faint); }
@media (max-width: 860px) { .papers-soon { padding-top: 4.5rem; } }

/* -- a subject's, a topic's and a chapter's pages ----------------------------- */

/* A topic's and a chapter's heading is on the page's band too, not a card. */
.page-head.panel-card {
  padding: 2rem 0 2.4rem; margin-bottom: 2rem;
  border: 0; border-radius: 0;
}
.page-head .eyebrow { margin-bottom: .5rem; }
.page-head .btn .tool-icon { width: 22px; height: 22px; border-radius: 7px; border: 0; }
.page-head .btn .tool-icon svg { width: 16px; }

.topic-block-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.topic-block-head .topic-block-title { margin: 0; }
.topic-block-title a { color: var(--ink); text-decoration: none; }
.topic-block-title a:hover { color: var(--accent-ink); }
.topic-block-meta { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-faint); }

.lesson-links {
  list-style: none; margin: 0; padding: 0;
  display: grid;
}
.lesson-links a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .42rem 0; border-top: 1px solid var(--line);
  color: var(--ink-soft); text-decoration: none; font-size: .95rem; line-height: 1.4;
}
.lesson-links a:hover { color: var(--ink); }
.lesson-links a:hover span:not(.n) { text-decoration: underline; text-underline-offset: 3px; }
.lesson-links .n {
  flex: none; min-width: 1.3rem;
  color: var(--ink-faint);
  font-family: var(--display); font-size: .95rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
/* The chapter's knowledge organiser, last on the list: an icon where the
   lesson's number would be, in the accent so it reads as a different kind of row. */
.lesson-links .is-organiser a { color: var(--accent-ink); font-weight: 650; }
.lesson-links .is-organiser a:hover { color: var(--accent-ink); }
.lesson-links .is-organiser .n { display: inline-flex; align-items: center; align-self: center; color: var(--accent-ink); }
.lesson-links .is-organiser .n .icon { width: 16px; height: 16px; }
/* Marked revised: the number becomes a tick, in the brand green. */
.lesson-links a.is-read .n { color: var(--ok); }
.lesson-links a.is-read .n::after { content: " ✓"; font-family: var(--sans); font-size: .8rem; }

/* "Print these notes", under a chapter's lessons: quiet, and out of the way of the lessons themselves. */
.chapter-card-print { margin: 0; padding: .5rem 0 .2rem; border-top: 1px solid var(--line); }
.chapter-card-print a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--ink-faint); font-size: .85rem; text-decoration: none;
}
.chapter-card-print a:hover { color: var(--accent-ink); }
.chapter-card-print .icon { width: 15px; height: 15px; }

/* "Print notes" beside a topic's name, over its chapters. */
.topic-block-head .topic-block-print { margin-left: auto; flex: none; min-height: 36px; padding: .4rem .9rem; font-size: .88rem; }
.lesson-links .tags { margin-left: auto; flex: none; }

.index-row { background: var(--panel); border-color: var(--panel-line); border-radius: var(--r); }
.chapter-card-head .tag-higher,
.chapter-card-head .tag-paper { flex: none; }

/* The subjects panel carries a lot of small text: it is the most solid of the
   glass, and solid outright where it fills a phone's screen. */
.mega-panel.glass-strong { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 980px) {
  .mega-panel.glass-strong { background: var(--bg); }
  .mega-bar { background: var(--surface); }
}

/* Pages of running text - about, privacy, terms - are a column of text on
   the white under the page's band. */
body.site main > .wrap-text:not(.error-page) { padding-bottom: 1rem; }


/* ==========================================================================
   The status page (/status). See views/pages/status.php.
   ========================================================================== */
.status-page { --st-up: var(--ok); --st-warn: var(--warn); --st-down: var(--bad); --st-none: var(--line); }
.status-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.status-hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding: 3rem 0 2.6rem; }
.status-hero h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); line-height: 1.05; letter-spacing: -.035em; margin: 0 0 .8rem; }
.status-hero .lede { color: var(--ink-soft); font-size: 1.08rem; margin: 0 0 1.6rem; max-width: 34em; }
.status-overall { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: 12px; background: var(--ok-soft); max-width: 37rem; }
.status-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--st-up); flex: none; }
.status-overall strong { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--st-up); }
.status-overall span { color: var(--ink-soft); font-size: .92rem; }
.status-overall.is-degraded, .status-overall.is-maintenance { background: color-mix(in srgb, var(--st-warn) 13%, transparent); }
.status-overall.is-degraded .status-dot, .status-overall.is-maintenance .status-dot { background: var(--st-warn); }
.status-overall.is-degraded strong, .status-overall.is-maintenance strong { color: var(--st-warn); }
.status-overall.is-down { background: var(--bad-soft); }
.status-overall.is-down .status-dot { background: var(--st-down); }
.status-overall.is-down strong { color: var(--st-down); }
.status-overall.is-unknown { background: var(--surface); border: 1px solid var(--line); }
.status-overall.is-unknown .status-dot { background: var(--st-none); }
.status-overall.is-unknown strong { color: var(--ink-soft); }
.status-notice { margin-top: 1rem; max-width: 37rem; padding: .9rem 1.2rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); border-left: 4px solid var(--accent); }
.status-notice.is-warning { border-left-color: var(--st-warn); }
.status-notice.is-problem { border-left-color: var(--st-down); }
.status-notice strong { font-family: var(--display); }
.status-notice p { margin: .2rem 0 .3rem; }
.status-notice time { font-size: .82rem; color: var(--ink-faint); }
.status-art { justify-self: end; width: min(100%, 460px); }
.status-art img { display: block; width: 100%; height: auto; }
.status-art-dark { display: none !important; }
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .status-art-light { display: none !important; }
  :root:not([data-theme="light"]) .status-art-dark { display: block !important; }
}
:root[data-theme="dark"] .status-art-light { display: none !important; }
:root[data-theme="dark"] .status-art-dark { display: block !important; }

.status-section { padding-top: 2.6rem; }
.status-section h2 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0; }
.status-sub { color: var(--ink-faint); margin: .2rem 0 1.1rem; font-size: .95rem; }
.status-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.status-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.status-service + .status-service { border-top: 1px solid var(--line); }
.status-service summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr) 11rem 8rem 20px; align-items: center; gap: 1rem; padding: 1rem 1.4rem; }
.status-service summary::-webkit-details-marker { display: none; }
.status-service summary:hover { background: var(--surface-2); }
.status-name { font-weight: 700; }
.status-state { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; color: var(--st-up); }
.status-state::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.status-state.is-degraded, .status-state.is-maintenance { color: var(--st-warn); }
.status-state.is-down { color: var(--st-down); }
.status-state.is-unknown { color: var(--ink-faint); }
.status-uptime { color: var(--ink-faint); font-size: .9rem; }
.status-chev { width: 20px; height: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.status-service[open] .status-chev { transform: rotate(180deg); }
.status-more { padding: 0 1.4rem 1.2rem calc(1.4rem + 28px + 1rem); }
.status-more p { margin: 0 0 .6rem; color: var(--ink-soft); font-size: .9rem; }
.status-bars { display: flex; gap: 2px; height: 30px; }
.status-bars span { flex: 1; min-width: 0; border-radius: 2px; background: var(--st-none); }
.status-bars span.is-good { background: var(--st-up); }
.status-bars span.is-some { background: var(--st-warn); }
.status-bars span.is-bad { background: var(--st-down); }
.status-scale { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .78rem; color: var(--ink-faint); }
.status-empty { text-align: center; padding: 1.6rem 1rem 1.7rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.status-empty .status-icon { width: 30px; height: 30px; margin-bottom: .3rem; }
.status-empty strong { font-family: var(--display); font-size: 1.08rem; }
.status-empty span { color: var(--ink-soft); font-size: .93rem; }
.status-incident { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: .9rem; align-items: baseline; padding: 1rem 1.4rem; }
.status-incident + .status-incident { border-top: 1px solid var(--line); }
.status-incident::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--st-down); transform: translateY(1px); }
.status-incident.is-maintenance::before, .status-incident.is-degraded::before { background: var(--st-warn); }
.status-incident strong { display: block; }
.status-incident span { color: var(--ink-soft); font-size: .9rem; }
.status-incident time { color: var(--ink-faint); font-size: .85rem; white-space: nowrap; }
.status-checked { color: var(--ink-faint); font-size: .85rem; margin: 1.2rem 0 3rem; }

@media (max-width: 860px) {
  .status-hero-inner { grid-template-columns: 1fr; padding-top: 2rem; }
  .status-art { justify-self: center; width: min(100%, 360px); order: -1; margin: .5rem 0 -.5rem; }
  .status-service summary { grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: .75rem; padding: .95rem 1rem; }
  .status-uptime { display: none; }
  .status-more { padding: 0 1rem 1.1rem; }
  .status-incident { grid-template-columns: 12px minmax(0, 1fr); padding: .9rem 1rem; }
  .status-incident time { grid-column: 2; }
}
@media (max-width: 420px) { .status-bars { gap: 1px; } }