/* The Wonder Academy.
 *
 * Structure is BBC GEL's — the type scale, the nine-step spacing, the
 * minmax() grid, the focus rule that inherits currentColor so contrast is
 * guaranteed without choosing a focus colour. The surface is not BBC's: Bitesize
 * gets its confidence from saturated colour used at full tile size, big display
 * type and shapes with weight, and a page of white cards with thin grey borders
 * gets none of that. So: an ink header, a warm paper canvas, subject tiles that
 * are entirely their own colour, and one display face doing the shouting.
 *
 * Reith is BBC-exclusive. Bricolage Grotesque carries the display work — it has
 * the same large x-height and a bit of warmth, which matters when the same
 * screen has to suit a six-year-old and someone sitting GCSEs. Inter runs the
 * interface, where personality is a cost.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* GEL spacing — nine steps, no more */
  --space-hlf: .25rem; --space-1: .5rem;   --space-1-5: .75rem;
  --space-2: 1rem;     --space-3: 1.5rem;  --space-4: 2rem;
  --space-5: 2.5rem;   --space-6: 3rem;    --space-7: 3.5rem;

  --page-margin: var(--space-2);
  --gutter: var(--space-2);

  /* Surfaces. Paper is warm rather than white: an hour of maths on #ffffff is
     a glare, and the tiles read as brighter against it. */
  --ink:      #14142e;
  --ink-soft: #23234b;
  --ink-line: #32325e;
  --paper:    #f7f4ef;
  --paper-2:  #efeae2;
  --surface:  #ffffff;
  --line:     #e4ded4;
  --line-2:   #d3ccc0;
  --text:     #1b1b2b;
  --muted:    #6a6678;
  --muted-2:  #918da0;

  /* Brand: the spark. Used sparingly — a page where everything is orange has
     no way left to say "this one". */
  --brand:      #f4511e;
  --brand-dark: #c53d10;
  --brand-lift: #ff7a45;
  --gold:       #f5a524;

  /* Subjects. Every one clears 4.5:1 against white, because white text sits on
     all of them at tile size. */
  --subj-maths:      #1d4ed8;
  --subj-english:    #be123c;
  --subj-literature: #9f1239;
  --subj-science:    #047857;
  --subj-geography:  #0e7490;
  --subj-history:    #9a3412;
  --subj-computing:  #6d28d9;
  --subj-business:   #854d0e;
  --subj-discover:   #a21caf;
  --subj-dt:         #4338ca;

  --ok: #047857; --warn: #a16207; --risk: #b91c1c;

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* Two shadows only. The lift is ambient; the edge is the hard offset that
     makes a card feel like an object you could pick up. */
  --lift: 0 1px 2px rgba(20,20,46,.06), 0 8px 24px -8px rgba(20,20,46,.16);
  --lift-2: 0 2px 4px rgba(20,20,46,.08), 0 22px 48px -16px rgba(20,20,46,.28);

  --accent: var(--brand);
  color-scheme: light;
}

@media (min-width: 37.5rem) { :root { --page-margin: var(--space-4); --gutter: var(--space-3); } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font: 400 1rem/1.55 var(--font-sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 4rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p  { margin: 0 0 var(--space-2); max-width: 44rem; }
a  { color: inherit; }

:focus-visible { outline: 3px solid; outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

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

.icon { width: 1em; height: 1em; display: block; flex: none; }

/* ───────────────────────────── shell ───────────────────────────── */

.shell { max-width: 78rem; margin: 0 auto; padding: 0 var(--page-margin); }
.prose { max-width: 42rem; color: var(--muted); font-size: 1.0625rem; }

.eyebrow {
  font: 700 .75rem/1 var(--font-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 var(--space-1-5);
}

/* ───────────────────────────── topbar ───────────────────────────── */

.topbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1-5) var(--page-margin);
  background: var(--ink);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
}
.topbar__brand {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem;
  letter-spacing: -.02em;
}
.topbar__brand .icon { width: 1.15rem; height: 1.15rem; color: var(--gold); }
.topbar__brand span { color: var(--brand-lift); }
.topbar__spacer { margin-left: auto; }


.whochip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem .3rem .35rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  font: 600 .875rem/1 var(--font-sans);
}
.whochip__dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 .75rem/1 var(--font-display); color: #fff;
  background: var(--accent);
}

/* On a phone the bar has room for the wordmark and one control. The child's
   name is in the hero two lines below, so the chip is the one that goes. This
   block has to sit after .whochip, not before it — that was the bug. */
@media (max-width: 29.99rem) {
  .topbar { gap: var(--space-1); }
  .topbar__brand { font-size: .9375rem; white-space: nowrap; }
  .whochip { display: none; }
  .topbar .btn { min-height: 2.5rem; padding: 0 var(--space-2); font-size: .875rem;
                 white-space: nowrap; }
  .section__head { flex-wrap: wrap; }
  .section__note { margin-left: 0; flex-basis: 100%; }
  .tile__foot { font-size: .75rem; white-space: nowrap; }
  .tile__due { padding: .25rem .45rem; }
}

/* ───────────────────────────── buttons ───────────────────────────── */

.btn {
  font: 700 1rem/1 var(--font-sans);
  min-height: 3rem;
  padding: 0 var(--space-3);
  border: 2px solid transparent;          /* Windows High Contrast needs a real border */
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--line-2);
  transition: transform .14s cubic-bezier(.2,.8,.3,1), box-shadow .14s, background .14s;
}
.btn:hover  { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--ink), var(--lift); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn .icon { width: 1.05em; height: 1.05em; }

.btn--primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 3px 0 var(--brand-dark), var(--lift);
}
.btn--primary:hover {
  background: var(--brand-lift);
  box-shadow: 0 5px 0 var(--brand-dark), var(--lift-2);
}
.btn--primary:active { box-shadow: 0 1px 0 var(--brand-dark); }

.btn--ink { background: var(--ink); color: #fff; box-shadow: 0 3px 0 #000; }
.btn--ink:hover { background: var(--ink-soft); box-shadow: 0 5px 0 #000, var(--lift-2); }

.btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px currentColor; }

.btn--big { min-height: 3.5rem; font-size: 1.0625rem; padding: 0 var(--space-4); }
.btn--block { width: 100%; }

/* ───────────────────────────── who's learning ───────────────────────────── */

.gate {
  min-height: calc(100vh - 3.5rem);
  display: grid; place-items: center;
  padding: var(--space-6) var(--page-margin) var(--space-7);
}
.gate__in { width: 100%; max-width: 54rem; text-align: center; }
.gate h1 { color: var(--ink); margin-bottom: var(--space-5); }

.who {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  max-width: 46rem; margin: 0 auto;
}
.who__btn {
  appearance: none; border: 0; cursor: pointer;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--space-3) var(--space-2) var(--space-3);
  display: grid; gap: var(--space-1-5); justify-items: center;
  box-shadow: 0 3px 0 var(--line-2), var(--lift);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
  font: 700 1.0625rem/1.2 var(--font-display); color: var(--ink);
}
.who__btn:hover { transform: translateY(-4px); box-shadow: 0 7px 0 var(--line-2), var(--lift-2); }
.who__btn:active { transform: translateY(-1px); box-shadow: 0 2px 0 var(--line-2); }
.who__av {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 800 1.75rem/1 var(--font-display); color: #fff;
  background: var(--c, var(--brand));
  box-shadow: inset 0 -4px 10px rgba(0,0,0,.16);
}
.who__sub { font: 500 .8125rem/1 var(--font-sans); color: var(--muted-2); }
.who__btn--parent .who__av { background: var(--ink); }

/* ───────────────────────────── PIN ───────────────────────────── */

.pinpad { width: 100%; max-width: 22rem; margin: 0 auto; text-align: center; }
.pinpad__who {
  width: 4rem; height: 4rem; border-radius: 50%; margin: 0 auto var(--space-2);
  display: grid; place-items: center; color: #fff;
  font: 800 1.5rem/1 var(--font-display); background: var(--c, var(--ink));
}
.pinpad h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); margin-bottom: var(--space-4); }

.pinpad__display { display: flex; gap: var(--space-1-5); justify-content: center; margin-bottom: var(--space-3); }
.pinpad__dot {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 2px var(--line-2);
  transition: transform .18s cubic-bezier(.2,1.4,.4,1), background .18s, box-shadow .18s;
}
.pinpad__dot--on { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); transform: scale(1.15); }

.pinpad__keys {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1-5);
}
.pinpad__keys .btn {
  min-height: 4rem; font: 700 1.5rem/1 var(--font-display);
  background: var(--surface); box-shadow: 0 3px 0 var(--line-2);
}
.pinpad__keys .btn:hover { box-shadow: 0 5px 0 var(--line-2), var(--lift); }
.pinpad__keys .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-2); }

.error {
  color: var(--risk); font-weight: 600;
  background: #fee2e2; border-radius: var(--r-sm);
  padding: var(--space-1) var(--space-2); display: inline-block;
  margin: 0 auto var(--space-2);
}

/* ───────────────────────────── hero ───────────────────────────── */

.hero {
  position: relative; overflow: hidden;
  background: var(--sky, linear-gradient(160deg, #ffd9a8 0%, #ffb4a2 46%, #f9a8d4 100%));
  padding: var(--space-6) 0 calc(var(--space-6) + 2.75rem);
  isolation: isolate;
}
/* Two soft lights and a fine grain. Flat gradients read as cheap; these are
   what make it look like a printed thing rather than a CSS default. */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; z-index: -1;
  filter: blur(60px); opacity: .55; pointer-events: none;
}
.hero::before { width: 34rem; height: 34rem; top: -14rem; right: -8rem; background: #fff8e7; }
.hero::after  { width: 26rem; height: 26rem; bottom: -12rem; left: -6rem; background: #c7d2fe; }

.hero__grain {
  position: absolute; inset: 0; z-index: -1; opacity: .3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
.hero__date { font: 600 .875rem/1 var(--font-sans); letter-spacing: .06em;
              text-transform: uppercase; color: rgba(20,20,46,.62); margin-bottom: var(--space-2); }
.hero h1 { color: var(--ink); margin-bottom: var(--space-2); }
.hero__sub { font-size: 1.125rem; color: rgba(20,20,46,.74); font-weight: 500; max-width: 34rem; }

/* ───────────────────────────── the two sittings ───────────────────────────── */

.sittings {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: -2.75rem; position: relative; z-index: 2;
}
.sittings--one { max-width: 30rem; }
.sit {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--space-4);
  box-shadow: 0 4px 0 var(--line-2), var(--lift-2);
  display: grid; gap: var(--space-1-5); align-content: start;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
}
.sit:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--line-2), var(--lift-2); }
.sit::after {                      /* the tint that says which one is live */
  content: ''; position: absolute; inset: 0 0 auto; height: 6px;
  background: var(--accent);
}
.sit--rest::after { background: var(--line-2); }
.sit__n {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--accent);
  font: 800 1.125rem/1 var(--font-display);
}
.sit--rest .sit__n { background: var(--muted-2); }
.sit__t { font: 800 1.375rem/1.1 var(--font-display); color: var(--ink); margin: 0; letter-spacing: -.02em; }
.sit__m { color: var(--muted); margin: 0; font-size: .9375rem; }
.sit .btn { margin-top: var(--space-1); }
.sit__done {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .875rem/1 var(--font-sans); color: var(--ok);
}
.sit__done .icon { width: 1.1em; height: 1.1em; }

/* ───────────────────────────── subject tiles ───────────────────────────── */

.section { padding: var(--space-6) 0 0; }
.section__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.section__head h2 { margin: 0; }
.section__note { color: var(--muted-2); font-size: .875rem; margin: 0 0 0 auto; }

.tiles {
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}
/* Sol and Isaac both take six subjects, so three across lands two clean rows
   instead of a row of five and a widow. */
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative; overflow: hidden; isolation: isolate;
  appearance: none; border: 0; cursor: default; text-align: left;
  min-height: 12rem;
  border-radius: var(--r-lg);
  padding: var(--space-3);
  background: var(--c, var(--ink));
  color: #fff;
  display: grid; align-content: space-between; gap: var(--space-2);
  box-shadow: var(--lift);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
  animation: rise .45s cubic-bezier(.2,.8,.3,1) backwards;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.tile:hover .tile__ghost { transform: rotate(-8deg) scale(1.06); }

/* The oversized mark bleeding off the corner. This one detail is most of why
   the tiles look designed rather than generated. */
.tile__ghost {
  position: absolute; z-index: -1; right: -1.6rem; bottom: -2.2rem;
  width: 9rem; height: 9rem; color: #fff; opacity: .17;
  transition: transform .35s cubic-bezier(.2,.8,.3,1);
}
.tile__ghost .icon { width: 100%; height: 100%; stroke-width: 1.1; }
.tile__top { display: flex; align-items: center; gap: var(--space-1); }
.tile__mark { width: 1.75rem; height: 1.75rem; }
.tile__mark .icon { width: 100%; height: 100%; }
.tile__board {
  margin-left: auto;
  font: 700 .625rem/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase;
  background: rgba(255,255,255,.2); padding: .3rem .5rem; border-radius: var(--r-pill);
}
.tile__name {
  /* h3 inherits the ink heading colour by default, which is unreadable on a
     saturated tile. */
  color: inherit;
  font: 800 1.25rem/1.08 var(--font-display); letter-spacing: -.02em; margin: 0;
  text-wrap: balance;
}
.tile__bar {
  display: block; width: 100%; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.28); overflow: hidden; margin-bottom: .6rem;
}
.tile__bar i { display: block; height: 100%; background: #fff; border-radius: 3px;
               width: var(--p, 0%); transition: width .8s cubic-bezier(.2,.8,.3,1); }
.tile__foot { display: flex; align-items: center; gap: .5rem;
              font: 600 .8125rem/1 var(--font-sans); color: rgba(255,255,255,.86); }
.tile__due {
  margin-left: auto; background: rgba(0,0,0,.24); color: #fff;
  padding: .3rem .55rem; border-radius: var(--r-pill); font-weight: 700;
}

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

/* ───────────────────────────── panels ───────────────────────────── */

.panel {
  background: var(--surface); border-radius: var(--r-lg);
  padding: var(--space-3); box-shadow: var(--lift);
  border-left: 5px solid var(--accent);
  margin-top: var(--space-3);
}
.panel__title { font: 800 .8125rem/1 var(--font-sans); letter-spacing: .09em;
                text-transform: uppercase; color: var(--muted-2); margin: 0 0 var(--space-1-5); }
.panel ul { margin: 0; padding-left: 1.1rem; }
.panel li { margin-bottom: .45rem; }

.notice {
  color: var(--muted-2); font-size: .8125rem; max-width: 40rem;
  padding: var(--space-4) 0 var(--space-6);
}

.card-grid { display: grid; gap: var(--gutter);
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.stat {
  background: var(--surface); border-radius: var(--r-lg); padding: var(--space-3);
  box-shadow: var(--lift); border-top: 5px solid var(--accent);
}
.stat__k { font: 600 .8125rem/1 var(--font-sans); letter-spacing: .06em;
           text-transform: uppercase; color: var(--muted-2); margin: 0 0 var(--space-1); }
.stat__v { font: 800 2.5rem/1 var(--font-display); color: var(--ink); margin: 0 0 .35rem;
           letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat__m { color: var(--muted); font-size: .875rem; margin: 0; }

.band { position: relative; height: 10px; border-radius: 5px; background: var(--paper-2);
        margin: 0 0 .4rem; }
.band__target {                       /* 85–92 on a 70–100 scale */
  position: absolute; top: 0; bottom: 0; left: 50%; width: 23.3%;
  background: color-mix(in srgb, var(--ok) 26%, #fff); border-radius: 5px;
}
.band__now {
  position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px;
  background: var(--ink); transform: translateX(-2px);
}
.band__key { display: flex; justify-content: space-between; margin: 0 0 .5rem;
             font: 500 .6875rem/1 var(--font-sans); color: var(--muted-2); }
.band__key em { font-style: normal; font-weight: 700; color: var(--ok); }

.tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font: 700 .75rem/1 var(--font-sans); letter-spacing: .04em;
  padding: .4rem .6rem; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--muted);
}
.tag--board { background: var(--ink); color: #fff; }
.tag--key { background: var(--gold); color: #3a2600; }

/* ───────────────────────────── the lesson ───────────────────────────── */

.lesson { --accent: var(--brand); }
.lesson__head {
  background: var(--ink); color: #fff;
  padding: var(--space-4) 0 var(--space-5);
  position: relative; overflow: hidden;
}
.lesson__head::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent);
}
.lesson__head::after {
  content: ''; position: absolute; right: -6rem; top: -8rem;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: var(--accent); opacity: .22; filter: blur(50px);
}
.lesson__head .shell { position: relative; }
.lesson__crumb { font: 600 .8125rem/1 var(--font-sans); color: rgba(255,255,255,.6);
                 margin: 0 0 var(--space-2); letter-spacing: .03em; }
.lesson__head h1 { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem); margin-bottom: var(--space-2); }
.lesson__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--space-3); }
.lesson__tags .tag { background: rgba(255,255,255,.14); color: #fff; }
.lesson__tags .tag--board { background: var(--accent); color: #fff; }

.phases { display: flex; gap: .4rem; }
.phase-pip {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  flex: 1 1 0; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.22);
  transition: background .3s, transform .2s;
}
.phase-pip--done { background: rgba(255,255,255,.55); }
.phase-pip--now  { background: #fff; transform: scaleY(1.7); }

.stage {
  display: grid; gap: var(--gutter);
  grid-template-columns: 1fr;
  padding: var(--space-3) 0 var(--space-6);
}
@media (min-width: 63rem) { .stage { grid-template-columns: minmax(0,1fr) 19rem; } }

/* ───────────────────────────── the board ───────────────────────────── */

.board {
  position: relative;
  min-height: min(62vh, 34rem);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 0 var(--line-2), var(--lift-2);
  padding: var(--space-4) var(--space-3);
  display: grid; place-items: center;
  overflow: hidden;
}
/* A faint dot grid, and the subject's colour along the top. Both are there so
   the board reads as a surface rather than as the absence of one. */
.board::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
}
.board::after {
  content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: var(--accent);
}
.v-board__inner { position: relative; width: 100%; max-width: 54rem; }

.board.is-entering .v-board__inner { animation: boardin .38s cubic-bezier(.2,.8,.3,1); }
@keyframes boardin { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }

.v-eyebrow {
  font: 700 .75rem/1 var(--font-sans); letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--space-2);
}
.v-title h2 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); margin-bottom: var(--space-3);
              text-wrap: balance; }
.v-points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1-5); }
.v-points li {
  position: relative; padding-left: 2rem;
  font-size: 1.125rem; color: var(--text);
}
.v-points li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 1.1rem; height: .35rem; border-radius: 2px; background: var(--accent);
}

.v-term { text-align: center; }
.v-term__word {
  font: 800 clamp(2.5rem, 1.4rem + 6vw, 5.5rem)/1 var(--font-display);
  letter-spacing: -.03em; color: var(--ink); margin: 0 0 var(--space-1-5);
}
.v-term__say { font: 500 1.25rem/1 var(--font-sans); color: var(--accent); margin: 0 0 var(--space-2); }
.v-term__def { font-size: 1.1875rem; color: var(--muted); margin: 0 auto; max-width: 32rem; }

.v-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: var(--space-2); }
.v-step {
  counter-increment: s;
  display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-2); align-items: start;
  font-size: 1.125rem;
  transition: opacity .3s, transform .3s;
}
.v-step::before {
  content: counter(s);
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font: 800 .875rem/1 var(--font-display);
}
.v-step.is-hidden { display: none; }
.v-step__why { display: block; color: var(--muted); font-size: .9375rem; margin-top: .2rem; }

.v-maths { font-size: 1.25rem; }
.v-maths--big { font-size: clamp(1.5rem, 1rem + 2.6vw, 2.75rem); text-align: center; }
.v-equation { text-align: center; }

.v-fig { margin: 0; display: grid; gap: var(--space-2); }
.v-svg { width: 100%; height: auto; display: block; }
.v-axis, .v-tick { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.v-tick { stroke-width: 2; }
.v-tick__label { fill: var(--muted); font: 500 20px var(--font-sans); text-anchor: middle; }
.v-mark { fill: var(--accent); }
.v-mark__label { fill: var(--accent); font: 700 22px var(--font-display); text-anchor: middle; }
.v-jump { stroke: var(--accent); stroke-width: 3; fill: none; }
.v-jump__label { fill: var(--accent); font: 600 19px var(--font-sans); text-anchor: middle; }
.v-arrowhead { fill: var(--accent); }
.v-shape { fill: color-mix(in srgb, var(--accent) 9%, #fff); stroke: var(--ink); stroke-width: 2.5; }
.v-lead { stroke: var(--line-2); stroke-width: 2; }
.v-label { fill: var(--ink); font: 700 21px var(--font-display); }
.v-label__note { fill: var(--muted); font: 400 16px var(--font-sans); }

.v-bars { display: grid; gap: var(--space-1-5); }
.v-bar__row { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-2); align-items: center; }
.v-bar__label { font: 700 1.0625rem/1 var(--font-display); color: var(--ink); }
.v-bar { display: flex; gap: 3px; height: 3rem; }
.v-bar__part { flex: 1; border-radius: 6px; background: var(--paper-2);
               box-shadow: inset 0 0 0 2px var(--line-2); }
.v-bar__part.is-on { background: var(--accent); box-shadow: none; }

/* width:100% matters: as a grid child with auto margins, this box shrinks to
   its content, and cells sized only by aspect-ratio have no content width — so
   without it the whole array collapses to nothing. */
.v-array { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px;
           width: 100%; max-width: 30rem; margin: 0 auto; }
.v-cell { aspect-ratio: 1; border-radius: 6px; background: var(--paper-2);
          box-shadow: inset 0 0 0 2px var(--line-2); }
.v-cell.is-on { background: var(--accent); box-shadow: none; }
.v-array__sum { text-align: center; font: 500 1.25rem/1 var(--font-sans); color: var(--muted); margin: 0; }
.v-array__sum strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }

.v-process { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-1-5); justify-content: center; }
.v-process__box {
  display: grid; gap: .25rem; align-content: center;
  padding: var(--space-2); min-width: 8rem; border-radius: var(--r);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-2);
  text-align: center;
}
.v-process__box.is-on { background: var(--accent); color: #fff; box-shadow: none; }
.v-process__t { font: 700 1.0625rem/1.2 var(--font-display); }
.v-process__n { font-size: .8125rem; opacity: .75; }
.v-process__arrow { align-self: center; color: var(--line-2); font-size: 1.75rem; }

.v-sort { display: grid; gap: var(--space-2);
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.v-sort__col { background: var(--paper); border-radius: var(--r); padding: var(--space-2);
               box-shadow: inset 0 0 0 2px var(--line); }
.v-sort__head { font: 800 1rem/1 var(--font-display); color: var(--accent);
                margin: 0 0 var(--space-1-5); }
.v-sort__col ul { margin: 0; padding-left: 1.1rem; }
.v-sort__col li { margin-bottom: .3rem; }

.v-graphemes { display: flex; flex-wrap: wrap; gap: var(--space-1-5); justify-content: center; }
.v-grapheme {
  display: grid; gap: .25rem; place-items: center; min-width: 5.5rem;
  padding: var(--space-2); border-radius: var(--r);
  background: var(--surface); box-shadow: 0 3px 0 var(--line-2), inset 0 0 0 2px var(--line);
}
.v-grapheme.is-on { background: var(--accent); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.2); }
.v-grapheme__g { font: 800 2.5rem/1 var(--font-display); }
.v-grapheme__e { font-size: .875rem; opacity: .7; }

.v-quote blockquote {
  margin: 0; font: 500 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.5 var(--font-display);
  color: var(--ink); border-left: 5px solid var(--accent); padding-left: var(--space-3);
}
.v-quote mark { background: color-mix(in srgb, var(--accent) 22%, #fff);
                color: inherit; padding: .05em .15em; border-radius: 3px; }
.v-quote cite { color: var(--muted-2); font-style: normal; font-size: .9375rem; }

.v-tablewrap { overflow-x: auto; }
.v-table { border-collapse: collapse; width: 100%; font-size: 1.0625rem; }
.v-table th, .v-table td { padding: .6rem .8rem; text-align: left; border-bottom: 2px solid var(--line); }
.v-table th { font: 800 .875rem/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
              color: #fff; background: var(--accent); border: 0; }
.v-table th:first-child { border-top-left-radius: var(--r-sm); }
.v-table th:last-child { border-top-right-radius: var(--r-sm); }

.v-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 16rem;
           justify-content: center; }
.v-chart__col { display: grid; grid-template-rows: auto 1fr auto; align-items: end;
                gap: .4rem; height: 100%; flex: 1 1 0; max-width: 6rem; }
.v-chart__v { text-align: center; font: 700 1rem/1 var(--font-display); color: var(--ink); }
.v-chart__bar { border-radius: 8px 8px 0 0; background: var(--line-2); align-self: end; width: 100%; }
.v-chart__bar.is-on { background: var(--accent); }
.v-chart__l { text-align: center; font-size: .8125rem; color: var(--muted); }
.v-mermaid { font: 400 .8125rem/1.5 ui-monospace, monospace; color: var(--muted);
             background: var(--paper); padding: var(--space-2); border-radius: var(--r-sm); overflow-x: auto; }
.v-svgwrap svg { max-width: 100%; height: auto; }

/* ───────────────────────────── the teacher ───────────────────────────── */

.teacher {
  background: var(--ink); color: #fff;
  border-radius: var(--r-xl);
  padding: var(--space-3);
  display: grid; gap: var(--space-2); align-content: start;
  box-shadow: var(--lift-2);
  position: sticky; top: 4.5rem;
}
.orb {
  width: 5.5rem; height: 5.5rem; border-radius: 50%; margin: var(--space-1) auto var(--space-1);
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 34% 30%, var(--brand-lift), var(--brand) 56%, var(--brand-dark));
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 0 rgba(244,81,30,.5);
  transition: box-shadow .3s, transform .3s;
}
.orb::before {                                 /* a slow sheen across the surface */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(255,255,255,.5) 78%, transparent 92%);
  animation: sheen 6s linear infinite; opacity: .7;
}
.orb::after {                                  /* the ring that breathes */
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(244,81,30,.4); opacity: 0;
}
.orb--listening { animation: breathe 3.4s ease-in-out infinite; }
.orb--listening::after { animation: ripple 3.4s ease-out infinite; opacity: 1; }
.orb--speaking { animation: talk .7s ease-in-out infinite; }
.orb--speaking::after { animation: ripple 1.1s ease-out infinite; opacity: 1; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes talk    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.11); } }
@keyframes sheen   { to { transform: rotate(1turn); } }
@keyframes ripple  { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.teacher__name { font: 800 1.0625rem/1 var(--font-display); text-align: center; margin: 0; }
.teacher__state {
  text-align: center; margin: 0; font: 600 .8125rem/1 var(--font-sans);
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-lift);
}
.phase-now {
  margin: var(--space-1) 0 0; text-align: center;
  font: 700 .875rem/1.3 var(--font-sans);
  background: rgba(255,255,255,.1); border-radius: var(--r-pill);
  padding: .5rem .75rem;
}
.aside-block { background: rgba(255,255,255,.07); border-radius: var(--r); padding: var(--space-2); }
.aside-block__t { font: 800 .6875rem/1 var(--font-sans); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--brand-lift); margin: 0 0 var(--space-1); }
.aside-block ul { margin: 0; padding-left: 1.1rem; font-size: .9375rem; }
.aside-block p { margin: 0 0 .4rem; font-size: .9375rem; }
.aside-block__hint { color: rgba(255,255,255,.6); font-style: italic; }
.aside-hint { color: rgba(255,255,255,.62); font-size: .875rem; margin: 0; text-align: center; }
.teacher .btn { width: 100%; margin-top: var(--space-1); }

/* ───────────────────────────── Sophia ─────────────────────────────
   Six-year-old, no reading stamina, using this on a lap. Everything grows,
   the corners round further, and the tile grid drops to two across so each
   one is a proper target. */

body[data-tier="ks1"] {
  --r: 20px; --r-lg: 28px; --r-xl: 36px;
  font-size: 1.0625rem;
}
/* Sophia has four, so two across gives her a square of big targets. */
@media (min-width: 30rem) {
  body[data-tier="ks1"] .tiles { grid-template-columns: repeat(2, 1fr); max-width: 50rem; }
}
body[data-tier="ks1"] .tile { min-height: 13.5rem; }
body[data-tier="ks1"] .tile__name { font-size: 1.5rem; }
body[data-tier="ks1"] .tile__ghost { width: 11rem; height: 11rem; opacity: .2; }
body[data-tier="ks1"] .btn { min-height: 3.5rem; font-size: 1.125rem; }
body[data-tier="ks1"] .btn--big { min-height: 4.25rem; font-size: 1.375rem; }
body[data-tier="ks1"] .v-term__word { font-size: clamp(3rem, 1.6rem + 8vw, 7rem); }
body[data-tier="ks1"] .v-points li { font-size: 1.375rem; }
body[data-tier="ks1"] .v-step { font-size: 1.375rem; }
body[data-tier="ks1"] .v-grapheme__g { font-size: 3.5rem; }
body[data-tier="ks1"] .v-grapheme { min-width: 7rem; }
body[data-tier="ks1"] .board { min-height: min(66vh, 36rem); }
body[data-tier="ks1"] .pinpad__keys .btn { min-height: 4.75rem; font-size: 1.875rem; }

/* GCSE gets a calmer sky — the colour research the BBC did on exam-year pages
   points the same way, and Sol is on this screen twice a day for a year. */
body[data-tier="gcse"] .hero { --sky: linear-gradient(160deg, #dbeafe 0%, #c7d2fe 48%, #e0e7ff 100%); }
body[data-tier="ks3"]  .hero { --sky: linear-gradient(160deg, #d9f99d 0%, #a7f3d0 50%, #bae6fd 100%); }

/* ───────────────────────────── motion ───────────────────────────── */

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