/* The child's pages, in the exercise book.

   A child opens the same book the landing page sells. The name page is the
   cobalt cover; every page after it is the white grid page under the cover's
   edge, with the question printed large, the answer written into a box and
   the teacher's pen marking it. Print is Atkinson Hyperlegible Next; the pen
   (Edu NSW ACT Foundation, the hand NSW children learn) writes only marks,
   ticks, the points working and names on labels.

   app.css loads first and keeps the layout of every child page. book.css
   loads next and brings the book's type, colours and keys. This file points
   the app's token names at the book's colours for the child's pages, as
   parent.css does for the parent's, then redraws the child's pieces in the
   book's own terms. Highlighter yellow fills the one main key on a page;
   every other key is a paper key ruled in pen blue. */

/* Atkinson Hyperlegible Next draws zero with a slash, and in an exercise book a
   slash through a figure means crossed out. The child's pages take a plain
   zero for the digit 0 only: book.css declares "Learnest Plain Zero", and
   the print face below names it first. */

body.kid {
  --f-print: "Learnest Plain Zero", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --card: var(--slip);
  --line: #d6dce8;
  --line-strong: var(--key-line);
  --accent: var(--pen);
  --accent-dark: var(--cover-deep);
  --accent-edge: var(--cover-deeper);
  --accent-soft: #e8eefb;
  --on-accent: #ffffff;
  --current-bg: #eef2fa;
  --head-bg: #eef2fa;
  --wrong: var(--red);
  /* Light enough that red text on it keeps 4.5:1. */
  --wrong-bg: #fdf0ee;
  --right: var(--done);
  --right-bg: var(--done-bg);
  --font-body: var(--f-print);
  --font-display: var(--f-print);
  --font-serif: var(--f-print);
  /* Only paper stuck on the page casts a shadow; nothing printed on it does. */
  --shadow: 0 0 0 0 transparent;
  --ground-grid: rgba(49, 102, 190, 0.06);
  /* Cobalt Tint laid over the page, as a solid colour for a key that has to
     cover what is under it. */
  --tint-solid: #eef1f8;
  --speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.4h3.6l4.7-4v13.2l-4.7-4H3.5z'/%3E%3Cpath d='M15.4 9.2c1.5 1.6 1.5 4 0 5.6'/%3E%3Cpath d='M18.2 6.6c2.9 3 2.9 7.8 0 10.8'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  body.kid {
    --line: #2c3a52;
    --accent-dark: var(--cover-soft);
    --accent-soft: #1f2a44;
    --on-accent: #0b1219;
    --current-bg: #1a2336;
    --head-bg: #24304a;
    --wrong-bg: #3a1e1c;
    --ground-grid: rgba(150, 180, 240, 0.055);
    --tint-solid: #1c2740;
    /* The book's night key line only just clears 3:1 on a slip; this one keeps
       a key's edge at 4.3:1, the same value the parent pages use. */
    --key-line: #7a8896;
  }
}

/* ------------------------------------------------------------------ ground

   White grid paper, and the printed margin rule down the left once the page
   is wide enough to have a margin. */

body.kid {
  font-family: var(--f-print);
  /* Two quick taps on a choice or a link zoom the page on an iPad (the keys
     already stopped it). Pinch zoom stays for a child who needs it. */
  touch-action: manipulation;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--ground-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ground-grid) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  background-attachment: scroll;
}

body.kid .wrap {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 760px) {
  body.kid::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: clamp(14px, 2.6vw, 40px);
    width: 2px;
    background: var(--margin);
    box-shadow: 5px 0 0 -0.5px rgba(224, 74, 60, 0.55);
    opacity: 0.7;
    pointer-events: none;
  }
  body.kid .wrap {
    padding-left: clamp(1rem, 6vw, 4rem);
    padding-right: clamp(1rem, 6vw, 4rem);
  }
}

/* Whatever a page or the script hides stays hidden, whatever a rule gives it
   for display. The flag form under every question showed open because its
   grid display beat the hidden attribute. */
body.kid [hidden] { display: none !important; }

::selection { background: var(--hl); color: var(--hl-ink); }
body.kid input { caret-color: var(--red); }

/* The page arrives still. The one moment that moves is the teacher's pen. */
body.today .wrap > *, body.done .wrap > *, body.shop .wrap > *, body.pick .wrap > * {
  animation: none;
}

/* ------------------------------------------------------------------ cover bar

   The edge of the cobalt cover above every page: the name label, and on a
   question the day's progress and the way to stop. Not sticky: the page
   needs the height more than the bar does. */

.kbar {
  position: relative;
  z-index: 2;
  color: var(--on-cover);
  background: var(--cover);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 max(var(--side), env(safe-area-inset-right)) 0 max(var(--side), env(safe-area-inset-left));
}
.kbar-in {
  max-width: 72rem;
  margin: 0 auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.kbar .wordmark { padding: 2px 13px 4px; }
.kbar .wordmark .pen { font-size: 1.4rem; }
.kbar :focus-visible, .kbar .wordmark:focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }
body.kid .kbar .quiet {
  min-height: 44px;
  padding: 0.4rem 0;
  font: 700 1rem/1.2 var(--f-print);
  color: var(--on-cover);
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
body.kid .kbar .quiet:hover { color: var(--on-cover); text-decoration-thickness: 2.5px; }

/* The day's progress, drawn as a row of cells on the cover: one per question,
   grouped by block, white once answered, highlighter on the one in front of
   the child. A group's width follows its number of questions. */
.kbar .progress {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 2vw, 22px);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.kbar .progress .dots { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
.kbar .progress .group { flex: var(--n, 1) 1 0; min-width: 0; display: block; }
.kbar .progress .block { display: flex; gap: 3px; padding: 0; background: none; border-radius: 0; flex-wrap: nowrap; }
.kbar .progress .group.current .block { background: none; }
.kbar .progress .label { display: none; }
.kbar .dot {
  flex: 1 1 0;
  min-width: 3px;
  width: auto;
  height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: none;
}
.kbar .dot.filled { background: #ffffff; }
.kbar .dot.now { height: 16px; background: var(--hl); box-shadow: 0 0 0 2px var(--cover-deeper); }
.kbar .progress .count {
  flex: none;
  font-size: 1rem;
  font-weight: 700;
  color: var(--on-cover);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kbar .progress .stop, .kbar .stop { flex: none; margin: 0 0 0 auto; }
.kbar .progress .stop-button { font-size: 1rem; }

/* A phone: the label gives way so the progress keeps its room, and the cells
   close up into one ruled bar. */
@media (max-width: 600px) {
  body.item .kbar .wordmark, body.feedback .kbar .wordmark, body.paper .kbar .wordmark { display: none; }
  .kbar .progress .count { font-size: 0.9rem; }
  .kbar .progress .dots { gap: 3px; }
  .kbar .progress .block { gap: 1px; }
  .kbar .dot { height: 8px; border-radius: 1px; }
  .kbar .dot.now { height: 12px; }
}

/* ------------------------------------------------------------------ the next cell

   From one of the child's pages to the next (a question, its feedback, the
   next question) the cover bar holds still and its row of cells changes
   where it stands, over 160ms: the row fades out on the way to feedback,
   which has none, and fades back in on the next question with the cell just
   answered filled and the next one lit. Where two pages both have the row,
   the cells change in place. The browser does it between the two pages
   with no script where it can (Chrome and Edge 126, Safari 18.2); anywhere
   else the next page loads as it always has. Both pages must load this
   file, so a parent's or a public page never takes part.

   Only the cells take part. Chrome 154 and WebKit 26.4 let no tap reach
   anything in the transition while it runs, whatever the overlay's
   pointer-events say: with the whole page cross-fading, a tap on the new
   page landed on the page itself and did nothing. So the sheet changes as a
   plain page load does, and nothing a child can press is ever in it. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
:root { view-transition-name: none; }
.kbar .progress .dots { view-transition-name: cells; }

/* The overlay never takes a tap meant for the page under it. Both pictures
   of the cells run on the one curve: the browser adds the two together, so
   an old picture fading on a curve of its own would flash the cells
   brighter halfway. */
::view-transition { pointer-events: none; }
::view-transition-group(*) {
  animation-duration: 160ms;
  animation-timing-function: ease-out;
}
/* The cells never travel or stretch: when the count beside them changes
   width, both pictures sit where the new page puts the row and cross-fade
   there. */
::view-transition-group(cells) { animation-name: none; }

/* ------------------------------------------------------------------ type */

body.kid h1, body.kid h2, body.kid h3 { font-family: var(--f-print); letter-spacing: -0.012em; }
body.kid h1 {
  font-size: clamp(1.9rem, 1.45rem + 1.5vw, 2.45rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 0.2rem 0 1rem;
}
body.kid h2 { font-size: 1.45rem; font-weight: 800; line-height: 1.2; margin: 1.9rem 0 0.6rem; }
body.kid h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
body.kid .lead { color: var(--ink-soft); }
body.kid .meta { color: var(--ink-soft); }
body.kid a { color: var(--pen); }
/* "Back to today" under the shop, a lesson and a paper: a whole 44px row to
   tap, not a 24px line of small print. */
body.kid a.back-link {
  display: flex;
  align-items: center;
  width: fit-content;
  min-width: 44px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
}
body.kid strong, body.kid b { font-weight: 800; }

/* ------------------------------------------------------------------ keys */

/* Every button is a paper key: a 2px rule and a hard bottom edge that drops
   when it is pressed. */
body.kid button {
  font-family: var(--f-print);
  color: var(--ink);
  background: var(--key);
  border-color: var(--key-line);
}

/* The one main key on a page, in highlighter: Start, Send, Next, Check. */
body.kid .big {
  font: 800 1.2rem/1.2 var(--f-print);
  letter-spacing: 0;
  color: var(--hl-ink);
  background: var(--start);
  border: 2px solid var(--start-edge);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--start-edge);
  min-height: 64px;
  padding: 0.9rem 1.2rem;
}
body.kid a.big:hover, body.kid button.big:hover { color: var(--hl-ink); background: var(--start-hover); filter: none; }
body.kid .big:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--start-edge); }
body.kid .big[aria-disabled="true"], body.kid .big[disabled] { opacity: 0.5; }
body.kid .big[aria-disabled="true"]:hover { background: var(--start); }
body.kid .big[aria-disabled="true"]:active { transform: none; box-shadow: 0 5px 0 var(--start-edge); }

/* Every other key a child presses: paper, ruled and lettered in pen blue. */
body.kid .big.quiet,
body.kid .send.unsure,
body.kid .paper-offer .big,
body.kid .thinking .big,
body.kid .spark-offer .big,
body.kid .prize .big,
body.kid .read-aloud.big {
  color: var(--pen);
  background: var(--key);
  border: 2px solid var(--pen);
  box-shadow: 0 4px 0 var(--key-edge);
  text-decoration: none;
}
body.kid .big.quiet:hover,
body.kid .send.unsure:hover,
body.kid .paper-offer .big:hover,
body.kid .thinking .big:hover,
body.kid .spark-offer .big:hover,
body.kid .prize .big:hover,
body.kid .read-aloud.big:hover { color: var(--pen); background: var(--tint-solid); }
body.kid .big.quiet:active,
body.kid .send.unsure:active,
body.kid .paper-offer .big:active,
body.kid .thinking .big:active,
body.kid .spark-offer .big:active,
body.kid .prize .big:active,
body.kid .read-aloud.big:active { box-shadow: 0 1px 0 var(--key-edge); }
body.kid .send.unsure[aria-disabled="true"]:hover,
body.kid .prize .big[aria-disabled="true"]:hover { background: var(--key); }
body.kid .send.unsure[aria-disabled="true"]:active,
body.kid .prize .big[aria-disabled="true"]:active { transform: none; box-shadow: 0 4px 0 var(--key-edge); }

/* A quiet way out is words, not a key. */
body.kid .quiet {
  font-family: var(--f-print);
  color: var(--ink-soft);
  background: none;
  border: 0;
  box-shadow: none;
}
body.kid .quiet:hover { color: var(--ink); }

/* Read it out: a paper key with a drawn speaker, the same on every page. The
   script swaps the words for "Stop reading", so the speaker is drawn by CSS
   and survives the swap. */
body.kid .read-aloud {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-height: 56px;
  margin: 0 0 1rem;
  padding: 0.4rem 1.1rem 0.4rem 0.9rem;
  font: 700 1rem/1.2 var(--f-print);
  color: var(--pen);
  background: var(--key);
  border: 2px solid var(--pen);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--key-edge);
}
body.kid .read-aloud::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  background: currentColor;
  -webkit-mask: var(--speaker) center / contain no-repeat;
  mask: var(--speaker) center / contain no-repeat;
}
body.kid .read-aloud:hover { background: var(--tint-solid); }
body.kid .read-aloud:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--key-edge); }
body.kid .read-aloud[aria-pressed="true"] { background: var(--tint-solid); }
body.kid .read-aloud.choices, body.kid .read-aloud.hint-read { margin-top: 0.75rem; font-size: 1rem; }
body.kid.feedback .read-aloud { display: inline-flex; width: auto; margin: 0 0 0.6rem; }
/* A touch screen keeps :hover on the last key tapped, and a read aloud key
   with the hover tint looks like one still reading. On a touch screen only
   "Stop reading" is tinted. */
@media (hover: none) {
  body.kid .read-aloud:hover:not([aria-pressed="true"]) { background: var(--key); }
}

/* The spelling word is only spoken, so its key is the biggest thing under the
   question: full width, the speaker and the words. */
body.kid .read-aloud.big {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  margin: 0.2rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 800;
}

/* ------------------------------------------------------------------ notices */

body.kid .notice {
  background: var(--tint-solid);
  border: 0;
  border-radius: 0;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  color: var(--ink);
}

/* An error, as on the public pages: bold teacher red in a red ring. */
body.kid .error {
  background: var(--slip);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: var(--red);
  font-weight: 700;
}

/* ------------------------------------------------------------------ the question

   One sheet: what is asked on the left, where the answer goes on the right,
   once the screen is wide enough for both. A reading passage takes the left
   and the question keeps the right, the way the online tests lay it out. */

body.item .wrap { max-width: 44rem; }

.qform .q-ask > :first-child { margin-top: 0; }

body.kid .qform .stem {
  font: 700 clamp(1.55rem, 1.05rem + 1.6vw, 2.05rem)/1.3 var(--f-print);
  letter-spacing: -0.008em;
  margin: 0.1rem 0 0.9rem;
  text-wrap: pretty;
}
/* Each half of a fraction is four fifths of the question's size. The span
   around the halves has no size of its own (app.css), so an em here would be
   four fifths of nothing and the fraction would vanish: the sizes are the
   question's own, times 0.8. */
body.kid .qform .stem .frac { --frac-size: clamp(1.24rem, 0.84rem + 1.28vw, 1.64rem); }
body.kid .has-passage .qform .stem { font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.65rem); }
body.kid .has-passage .qform .stem .frac { --frac-size: clamp(1.08rem, 0.84rem + 0.72vw, 1.32rem); }

/* The skill behind the question, below it: what this one practises. */
body.kid .working-on {
  display: block;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
  background: none;
  border-radius: 0;
}

body.kid .figure {
  max-width: 360px;
  margin: 0 0 1.1rem;
  padding: 0.7rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
}

/* The answer box: a field to write in, the teacher's red caret in it. */
body.kid .answer {
  min-height: 72px;
  padding: 0.4rem 0.9rem;
  font: 700 2rem/1.2 var(--f-print);
  color: var(--ink);
  background: var(--slip);
  border: 2px solid var(--key-line);
  border-radius: 10px;
  box-shadow: none;
}
body.kid .answer:focus { border-color: var(--pen); }
body.kid .answer.word { letter-spacing: 0.04em; font-size: 2rem; }

body.kid .keypad { gap: 10px; margin-top: 12px; }
body.kid .keypad .key, body.kid .keys .key {
  font: 700 1.6rem/1 var(--f-print);
  min-height: 64px;
  padding: 0;
  border-radius: 14px;
  color: var(--ink);
  background: var(--key);
  border: 2px solid var(--key-line);
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid .keypad .key[data-key="back"] { font-size: 1.15rem; }
body.kid .symbols { gap: 8px; margin-top: 12px; }
body.kid .symbols .key {
  font: 700 1.3rem/1 var(--f-print);
  min-height: 52px;
  padding: 0.3rem 0.2rem;
  border-radius: 12px;
  background: var(--key);
  border: 2px solid var(--key-line);
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid .symbols .key.wide { font-size: 1.05rem; }

/* A choice is a paper key with its own radio, so it sends with no script. A
   chosen one fills with pen blue. */
body.kid .options { gap: 12px; }
body.kid .option {
  min-height: 72px;
  padding: 0.6rem 1.1rem;
  font: 600 1.3rem/1.3 var(--f-print);
  color: var(--ink);
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid .option:hover { border-color: var(--pen); }
body.kid .option:has(.option-input:checked),
body.kid .option[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--pen);
  border-color: var(--cover-deeper);
  box-shadow: 0 4px 0 var(--cover-deeper);
}
body.kid .option-input { width: 26px; height: 26px; accent-color: var(--pen); }
body.kid .option:has(.option-input:checked) .option-input { accent-color: var(--hl); }

/* Send stays in reach: when the page runs longer than the screen, the two
   send keys ride along the bottom edge until the page catches up with them. */
body.kid .send-row {
  position: sticky;
  bottom: 0;
  z-index: 3;
  gap: 12px;
  margin: 0.4rem -12px 0;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--line);
}
body.kid .send-row .big { margin: 0; }
/* With the script on, the band is only drawn while the row rides the bottom
   edge, so a short page shows the keys on the grid paper like any other. */
body.kid .send-row.js-stick:not(.is-stuck),
body.kid .next-row.js-stick:not(.is-stuck) { background: none; box-shadow: none; }
body.kid .send.unsure[aria-disabled="true"] { opacity: 0.5; }

/* Help, folded away under the answer: a hint, the steps, one worked out. */
body.kid .help-row { margin: 1rem 0 0.4rem; }
body.kid .help-row .quiet { flex: 0 1 auto; text-align: left; min-height: 48px; }
body.kid .hint-button { font-size: 1.05rem; color: var(--pen); }
body.kid .hint-button.nudge {
  color: var(--pen);
  background: var(--tint-solid);
  border: 2px solid var(--pen);
  border-radius: 14px;
  padding: 0.4rem 1rem;
  text-decoration: none;
}
body.kid .hint {
  margin-top: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--tint-solid);
  border: 0;
  border-radius: 0;
  color: var(--ink);
}

body.kid .flag-wrap { margin-top: 2.8rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
body.kid .flag input {
  min-height: 52px;
  font: 400 1rem/1.2 var(--f-print);
  background: var(--slip);
  border: 2px solid var(--key-line);
  border-radius: 10px;
}

@media (min-width: 880px) {
  body.item .wrap { max-width: 70rem; }

  .q-sheet:not(.has-side) .qform {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  .q-sheet:not(.has-side) .q-ask { grid-column: 1; grid-row: 1; }
  .q-sheet:not(.has-side) .q-answer { grid-column: 2; grid-row: 1 / span 2; }
  .q-sheet:not(.has-side) .q-help { grid-column: 1; grid-row: 2; }

  .q-sheet.has-side {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 1fr);
    column-gap: clamp(28px, 4vw, 64px);
    align-items: start;
  }
  .q-side > :first-child { margin-top: 0; }
  /* The question stays in view beside long reading, unless help is open
     below it and needs the page to scroll. Everything in its column is a
     little tighter, so the whole of it fits an iPad held sideways. */
  .q-sheet.has-side .qform { position: sticky; top: 16px; }
  .q-sheet.has-side .qform:has(details[open]),
  .q-sheet.has-side .qform:has(.hint:not([hidden])) { position: static; }
  .q-sheet.has-side .options { gap: 10px; }
  .q-sheet.has-side .option { min-height: 60px; font-size: 1.2rem; }
  .q-sheet.has-side .working-on { margin-bottom: 0.8rem; }
  .q-sheet.has-side .read-aloud { margin-bottom: 0.7rem; }
  .q-sheet.has-side .read-aloud.choices { margin-top: 0.6rem; }
  .q-sheet.has-side .keypad { gap: 8px; margin-top: 10px; }
  .q-sheet.has-side .keypad .key { min-height: 56px; }
  .q-sheet.has-side .answer { min-height: 64px; }

  /* Ten symbol keys need more width than a column has: two rows of five. */
  .q-answer .symbols { grid-template-columns: repeat(5, 1fr); }
  .q-answer .symbols .key.wide { grid-column: span 1; }

  .q-answer > :first-child { margin-top: 0; }
  .q-help .help-row { margin-top: 0.4rem; }
  /* Beside the question everything fits on the screen, so Send sits in the
     column like any key, on the grid paper. */
  body.kid .q-sheet .send-row {
    position: static;
    margin: 0.9rem 0 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------ passage */

body.kid .passage {
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .passage h2 { margin: 0 0 0.6rem; font-size: 1.3rem; }
body.kid .passage-text { max-width: 36em; }
body.kid .passage-text p { font-family: var(--f-print); font-size: 1.12rem; line-height: 1.7; }
body.kid.young .passage-text p { font-size: 1.22rem; line-height: 1.75; }

/* ------------------------------------------------------------------ worked steps */

/* One worked out, written on the page: a cobalt tint, the steps numbered. */
body.kid .example {
  margin: 0 0 1.4rem;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--tint-solid);
  border: 0;
  border-radius: 0;
}
body.kid .example h2 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--pen); }
body.kid .example .stem { font: 700 1.25rem/1.35 var(--f-print); margin: 0 0 0.5rem; }
body.kid .example ol { padding-left: 1.4rem; }
body.kid .example li { margin-bottom: 0.4rem; }
body.kid .answer-line { font-weight: 800; }
/* On a wrong answer the worked example folds under "See one like it worked
   out", so the question's own answer line stays near the top on a phone. */
body.kid .example-fold > .example { margin: 0; }

/* The lesson card: folded paper with a drawn plus, its headings printed in
   sentence case and every line at reading size. */
body.kid .lesson {
  max-width: none;
  margin: 0.9rem 0;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .lesson > summary {
  min-height: 60px;
  padding: 0.8rem 3.4rem 0.8rem 1.1rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--pen);
}
body.kid .lesson > summary .sub { font-size: 0.95rem; font-weight: 400; color: var(--ink-soft); }
body.kid .lesson > summary::after,
body.kid .lesson > summary::before {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 20px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--pen);
  transform: none;
  transition: transform 180ms var(--ease);
}
body.kid .lesson > summary::before { transform: rotate(90deg); }
body.kid .lesson[open] > summary::before { transform: rotate(0deg); }
body.kid .lesson[open] > summary::after { content: ""; }
body.kid .lesson[open] > summary { border-bottom: 1px solid var(--line); }

body.kid .lesson-body { padding: 1rem 1.2rem 1.2rem; }
body.kid .lesson-body h3 {
  margin: 1.3rem 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
body.kid .lesson-body .stem { font: 700 1.2rem/1.35 var(--f-print); margin: 0.2rem 0 0.5rem; }
body.kid .lesson-lead { font-size: 1.05em; }
body.kid .lesson-steps .why { font-size: 0.85em; line-height: 1.45; color: var(--ink-soft); }
body.kid .lesson-mistake {
  margin-top: 1rem;
  padding: 0.8rem 1rem 0.9rem;
  background: var(--slip);
  border: 2px solid var(--red);
  border-radius: 0;
}
body.kid .lesson-mistake h3 { margin-top: 0; color: var(--ink); }
body.kid .lesson-words dd { color: var(--ink-soft); }
body.kid .lesson-videos .video-button { color: var(--pen); font-weight: 700; }
body.kid .lesson-figure svg, body.kid .figure svg { color: var(--ink); }

body.kid .lesson-intro { max-width: none; margin: 0 0 1.2rem; }

/* ------------------------------------------------------------------ the mark

   The teacher's pen marks the answer. A right one gets a drawn tick and the
   word written beside it in tick green; the tick draws itself once, and with
   reduced motion it is simply there. A miss gets a short pen stroke and the
   words in plain ink: never a red cross. */

body.kid .verdict {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.2rem 0 1rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
body.kid .verdict-mark {
  flex: none;
  width: 4.2rem;
  height: 3.4rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: none;
}
body.kid .verdict-mark path { stroke-width: 4; }
body.kid .verdict.is-right { color: var(--done); background: none; border: 0; }
body.kid .verdict.is-right .verdict-word {
  font: 700 clamp(2.4rem, 1.9rem + 1.6vw, 3rem)/1 var(--f-pen);
  color: var(--done);
}
/* On the feedback page the word is the h1; it keeps the verdict's own size and spacing. */
body.kid .verdict h1.verdict-word { margin: 0; }
body.kid .verdict.is-wrong { color: var(--ink-soft); background: none; border: 0; }
body.kid .verdict.is-wrong .verdict-mark { width: 2.6rem; height: 2rem; }
body.kid .verdict.is-wrong .verdict-word {
  font: 800 clamp(1.5rem, 1.3rem + 0.6vw, 1.8rem)/1.1 var(--f-print);
  color: var(--ink);
}

@keyframes pen-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pen-write {
  from { clip-path: inset(-0.4em 100% -0.4em -0.2em); }
  to { clip-path: inset(-0.4em -0.6em -0.4em -0.2em); }
}
@media (prefers-reduced-motion: no-preference) {
  body.kid .verdict.is-right .verdict-mark path {
    stroke-dasharray: 1;
    animation: pen-draw 520ms var(--ease) 80ms both;
  }
  body.kid .verdict.is-right .verdict-word { animation: pen-write 600ms var(--ease) 380ms both; }
}

/* ------------------------------------------------------------------ feedback */

body.kid.feedback .wrap > .stem,
body.kid.feedback .wrap > p.stem {
  font: 700 clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem)/1.35 var(--f-print);
  margin: 0 0 0.8rem;
}
body.kid .message { font-weight: 700; }
body.kid .given {
  font-family: var(--f-print);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
body.kid .reason {
  padding: 0.9rem 1.1rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
}
body.kid .reason.second {
  padding: 0;
  background: none;
  border: 0;
  color: var(--pen);
  font-weight: 700;
}
body.kid .quote {
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  font-family: var(--f-print);
  background: var(--tint-solid);
  border: 0;
  border-radius: 0;
}
/* The right answer after a miss, said plainly, the last thing before Next. */
body.kid.feedback .wrap > .answer-line {
  margin: 1.2rem 0 0;
  padding: 0.75rem 1rem;
  color: var(--done);
  background: var(--done-bg);
  border: 2px solid var(--done);
  border-radius: 0;
}

/* Next rides along the bottom edge on a long page, as Send does. */
body.kid .next-row {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 1rem -12px 0;
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--line);
}
body.kid .next-row .big { margin: 0; }

/* The device keyboard is up and the child is typing in the answer box
   (app.js, setUpKeyboardRows). On an iPad or a phone the keyboard covers the
   bottom of the page without making it shorter, so the row rides on top of
   the keyboard instead, --kb-lift above the page's bottom edge. Beside the
   question, where the row sits still in its column, it rides too, because
   the keyboard covers half an iPad held sideways.
   While the keyboard is up the row is a little slimmer: the keyboard covers
   the home bar, so the room kept for it goes, and on a phone the two keys
   sit side by side, so more of the question shows above them. Only the band
   waits for the row to ride (kb-riding): nothing that sets the row's height
   does, or a row that slimmed as it rode could stop riding, grow, and ride
   again. These rules come after the column rules so they win. */
body.kid .send-row.kb-up,
body.kid .next-row.kb-up {
  position: sticky;
  bottom: var(--kb-lift, 0px);
  z-index: 3;
  padding-top: 10px;
  padding-bottom: 10px;
}
body.kid .send-row.kb-up.kb-riding,
body.kid .next-row.kb-up.kb-riding {
  background: var(--paper);
  box-shadow: 0 -1px 0 var(--line);
}
@media (max-width: 479px) {
  body.kid .send-row.kb-up {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
/* In the column the row keeps its place until it rides, then pads its band.
   Growing as it rides never stops it riding. */
@media (min-width: 880px) {
  body.kid .q-sheet .send-row.kb-up { padding-top: 0; padding-bottom: 0; }
  body.kid .q-sheet .send-row.kb-up.kb-riding { padding-top: 10px; padding-bottom: 10px; }
}

/* ------------------------------------------------------------------ pick: the cover

   The name page is the front of the book: cobalt, the name label, and each
   child's own label with their name written on it in pen. */

body.pick { background: var(--cover); background-image: none; color: var(--on-cover); }
body.pick::before { display: none; }
body.pick .wrap { max-width: 60rem; padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: 3rem; }
body.pick .cover-mark { margin: 0 0 clamp(1.4rem, 4vw, 2.4rem); }
body.pick .cover-mark .wordmark { padding: 4px 22px 6px; }
body.pick .cover-mark .wordmark .pen { font-size: 2.3rem; }
body.pick h1 { margin: 0 0 1.2rem; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); color: var(--on-cover); }
body.pick :focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }

body.pick .students { display: grid; gap: 16px; }
body.pick .student {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  padding: 10px 26px 12px;
  font: 700 clamp(2rem, 1.7rem + 1vw, 2.5rem)/1.1 var(--f-pen);
  color: #1f3f9f;
  text-align: left;
  background: var(--label);
  border: 0;
  border-radius: 10px;
  outline: 1.5px solid rgba(29, 69, 163, 0.5);
  outline-offset: -6px;
  box-shadow: 0 2px 0 rgba(5, 20, 60, 0.18), 0 14px 26px -14px rgba(0, 8, 30, 0.75);
}
/* "Name", printed on the label the way an exercise book prints it. */
body.pick .student::before {
  content: "Name";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font: 700 0.85rem/1 var(--f-print);
  letter-spacing: 0;
  color: #4a5563;
}
body.pick .students .student:nth-child(2)::before { background: none; }
body.pick .student:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(5, 20, 60, 0.18); }
body.pick .student[aria-pressed="true"] {
  color: #1f3f9f;
  background: var(--label);
  border: 0;
  outline: 4px solid var(--hl);
  outline-offset: 3px;
  box-shadow: 0 2px 0 rgba(5, 20, 60, 0.18), 0 14px 26px -14px rgba(0, 8, 30, 0.75);
}
body.pick .student[aria-pressed="true"]::before { background: none; }
body.pick .student:focus-visible { outline: 4px solid var(--hl); outline-offset: 3px; }

/* The PIN pad, a slip taped onto the cover. */
body.pick .pad {
  position: relative;
  margin-top: 1.6rem;
  padding: 1.6rem 1.3rem 1.3rem;
  color: var(--ink);
  background: var(--slip);
  border: 0;
  border-radius: 0;
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
body.pick .pad::before, body.pick .pad::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 96px;
  height: 27px;
  background: linear-gradient(rgba(255, 255, 255, 0.22), transparent 70%), var(--tape);
  box-shadow: 0 1px 2px rgba(40, 30, 0, 0.1);
}
body.pick .pad::before { left: 22px; transform: rotate(-7deg); }
body.pick .pad::after { right: 22px; transform: rotate(6deg); }
body.pick .pad :focus-visible { outline-color: var(--focus); }
body.pick .pad .who { margin: 0 0 0.7rem; font: 800 1.3rem/1.2 var(--f-print); color: var(--ink); }
body.pick .pin {
  min-height: 64px;
  font: 700 2rem/1 var(--f-code);
  letter-spacing: 0.6em;
  text-align: center;
  color: var(--ink);
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 10px;
}
body.pick .pin:focus { border-color: var(--pen); }
body.pick .keys { gap: 10px; margin-top: 12px; }
body.pick .keys .key.wide { font-size: 1.05rem; }
body.pick .keys .go {
  color: var(--hl-ink);
  background: var(--start);
  border-color: var(--start-edge);
  box-shadow: 0 4px 0 var(--start-edge);
}
body.pick .keys .go:active { box-shadow: 0 1px 0 var(--start-edge); }
body.pick .parent-link { margin-top: 2.4rem; text-align: left; }
body.pick .parent-link a { color: var(--on-cover); font-weight: 700; }
body.pick .error { margin: 0 0 1rem; }

@media (min-width: 880px) {
  body.pick form[data-pinpad] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
    column-gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }
  body.pick .students { grid-column: 1; }
  body.pick .pad { grid-column: 2; margin-top: 0; }
}

/* ------------------------------------------------------------------ today */

body.today .wrap { max-width: 44rem; }
body.today .kid-top { margin: 0 0 1.4rem; }
body.today .kid-top h1 { margin: 0; }

/* The points, and what they buy, as a paper key into the shop. Numbers stay
   plain ink: the highlighter marks a key, never a number. */
body.kid .shop-link a, body.kid .points-pill {
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.45rem 1rem;
  font: 700 1rem/1.25 var(--f-print);
  color: var(--pen);
  background: var(--key);
  border: 2px solid var(--pen);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--key-edge);
}
body.kid .shop-link a::before, body.kid .points-pill::before { display: none; }
body.kid .shop-link a:hover { color: var(--pen); background: var(--tint-solid); filter: none; }

/* A notice or an offer printed on the page: a white slip in a pen ring. */
body.kid .paper-offer {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: var(--slip);
  border: 2px solid var(--pen);
  border-radius: 0;
}
body.kid .paper-offer h2 { margin: 0 0 0.4rem; font-size: 1.3rem; text-wrap: pretty; }
body.kid .ls-offer { background: var(--slip); border-color: var(--pen); }
body.kid .kid-notice p { margin: 0 0 0.5rem; }
body.kid .paper-offer .big { margin-top: 1rem; }

/* This week, drawn as five pen-ruled cells sharing their rules, as on the
   landing page: a tick in each school day done, today in cobalt tint. */
body.kid .weekstreak {
  margin: 0 0 1.8rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.kid .weekbar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
body.kid .weekbar .wday {
  gap: 4px;
  min-height: 84px;
  margin-left: -2px;
  padding: 8px 2px 6px;
  justify-content: flex-start;
  background: var(--paper);
  border: 2px solid var(--pen);
  border-radius: 0;
}
body.kid .weekbar .wday:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
body.kid .weekbar .wday:last-child { border-radius: 0 8px 8px 0; }
body.kid .weekbar .wlabel {
  order: -1;
  font: 700 0.95rem/1 var(--f-print);
  color: var(--ink-soft);
}
body.kid .weekbar .wdot {
  width: 44px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
  color: var(--done);
  animation: none;
}
body.kid .weekbar .wdot .mark {
  width: 40px;
  height: 33px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
body.kid .weekbar .wday.done { background: var(--paper); border-color: var(--pen); }
body.kid .weekbar .wday.done .wdot { background: none; animation: none; }
body.kid .weekbar .wday.done .wlabel { color: var(--ink); }
body.kid .weekbar .wday.now { position: relative; z-index: 1; background-color: var(--paper); background-image: linear-gradient(var(--tint), var(--tint)); border-color: var(--pen); }
body.kid .weekbar .wday.now .wlabel { color: var(--pen); font-weight: 800; }
body.kid .weekbar .wday.now .wdot { box-shadow: none; }
body.kid .weekbar .wday.miss .wdot { opacity: 1; box-shadow: none; }
body.kid .weekbar .wday.miss .wlabel { opacity: 1; }
body.kid .weekbar .wday.off { opacity: 1; border-style: solid; }
/* Dimmer than a school day, but still 4.5:1 on the paper: 0.55 read at 2.6:1. */
body.kid .weekbar .wday.off .wlabel { color: var(--ink-soft); opacity: 0.85; }
body.kid .week-line { margin: 0.75rem 0 0; font-size: 1rem; color: var(--ink-soft); }
body.kid .week-line b { color: var(--ink); background: none; padding: 0; border-radius: 0; }

/* Today's work: one day sheet taped onto the page. What today is, how long it
   runs and what finishing pays, then the one highlighter key. */
body.kid .day-card {
  position: relative;
  margin: 0.6rem 0 2rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.2rem, 3vw, 1.8rem) clamp(1.3rem, 3vw, 1.7rem);
  background: var(--slip);
  border: 0;
  border-radius: 0;
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
body.kid .day-card::before, body.kid .day-card::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 96px;
  height: 27px;
  background: linear-gradient(rgba(255, 255, 255, 0.22), transparent 70%), var(--tape);
  box-shadow: 0 1px 2px rgba(40, 30, 0, 0.1);
}
body.kid .day-card::before { left: 22px; transform: rotate(-7deg); }
body.kid .day-card::after { right: 22px; transform: rotate(6deg); }
/* The sheet's own title: printed, sentence case, never a small-capitals label. */
body.kid .day-kicker {
  margin: 0 0 0.4rem;
  font: 800 clamp(1.45rem, 1.25rem + 0.7vw, 1.75rem)/1.2 var(--f-print);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
body.kid .day-card .lead { margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--ink); }
body.kid .day-card .lead + .lead { color: var(--ink-soft); }
body.kid .day-card .big { margin-top: 1.2rem; }
body.kid .day-card .read-aloud { margin-top: 0.5rem; }

/* The puzzle of the day: printed on the page under the day sheet. */
body.kid .thinking {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .thinking h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
body.kid .thinking h2 .puzzle-points { margin-left: 0.3rem; font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
body.kid .thinking-prompt { font-size: 1.15rem; }
body.kid .thinking-options .option { min-height: 60px; font-size: 1.1rem; }
body.kid .thinking-input {
  min-height: 52px;
  font: 400 1.1rem/1.2 var(--f-print);
  background: var(--slip);
  border: 2px solid var(--key-line);
  border-radius: 10px;
}
body.kid .thinking-count { border-top: 1px dashed var(--line); }

/* ------------------------------------------------------------------ done */

body.done .wrap { max-width: 44rem; }

/* The day's points, added up in pen on a slip taped to the page, the total
   ruled off twice and ringed by the teacher. */
body.kid .points-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0.6rem 0 2rem;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 1.7rem);
  overflow: visible;
  color: var(--ink);
  background: var(--slip);
  border: 0;
  border-radius: 0;
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.6deg);
}
body.kid .points-hero::after { display: none; }
body.kid .points-hero::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 96px;
  height: 27px;
  background: linear-gradient(rgba(255, 255, 255, 0.22), transparent 70%), var(--tape);
  box-shadow: 0 1px 2px rgba(40, 30, 0, 0.1);
  transform: translateX(-50%) rotate(-2deg);
}
body.kid .points-hero .ph-breakdown { order: 1; margin: 0; gap: 0; }
body.kid .points-hero .ph-breakdown li {
  align-items: baseline;
  padding: 0.15rem 0;
  font-size: 1.05rem;
  border: 0;
}
body.kid .points-hero .ph-what { color: var(--ink); }
body.kid .points-hero .ph-plus {
  min-width: 3.4ch;
  font: 700 1.6rem/1.2 var(--f-pen);
  color: var(--pen);
  text-align: right;
}
body.kid .points-hero .ph-earned {
  order: 2;
  margin: 0.5rem 0 0;
  padding-top: 0.55rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font: 800 1.25rem/1.2 var(--f-print);
  color: var(--ink);
  border-top: 7px double var(--pen);
}
body.kid .points-hero .ph-breakdown:empty + .ph-earned,
body.kid .points-hero .ph-earned:first-child { border-top: 0; padding-top: 0; }
body.kid .points-hero .ph-label { font-weight: 800; }
body.kid .points-hero .ph-num {
  position: relative;
  display: inline-block;
  padding: 0 0.2em;
  font: 700 clamp(2.6rem, 2.1rem + 1.6vw, 3.2rem)/1 var(--f-pen);
  color: var(--pen);
  vertical-align: baseline;
  animation: none;
}
body.kid .points-hero .ph-num .ring {
  position: absolute;
  left: -0.35em;
  top: -0.2em;
  width: calc(100% + 0.7em);
  height: calc(100% + 0.4em);
  overflow: visible;
  fill: none;
  pointer-events: none;
}
body.kid .points-hero .ph-num .ring path {
  fill: none;
  stroke: var(--done);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
  body.kid .points-hero .ph-num .ring path {
    stroke-dasharray: 1;
    animation: pen-draw 700ms var(--ease) 350ms both;
  }
}
body.kid .points-hero .ph-bonus {
  order: 3;
  margin: 0.9rem 0 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--done);
}
body.kid .points-hero .ph-total { order: 4; margin: 1rem 0 0; font-size: 1.05rem; }
body.kid .points-hero .ph-total strong { font-size: 1.2rem; }
body.kid .points-hero .ph-shop { color: var(--pen); }
body.kid .points-hero .ph-next { order: 5; margin: 0.6rem 0 0.4rem; }
body.kid .points-hero .np-bar {
  order: 6;
  height: 8px;
  border-radius: 0;
  background: var(--tint-solid);
  border: 0;
}
body.kid .points-hero .np-fill { background: var(--pen); }

body.kid .resume-offer {
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: var(--slip);
  border: 2px solid var(--pen);
}
body.kid .resume-offer .lead { color: var(--ink); }

/* The tally: a ruled row of cells, a big printed number over its word. */
body.kid ul.tally { gap: 0; margin: 0 0 1.4rem; }
body.kid ul.tally li {
  margin: 0 0 -1px -1px;
  padding: 0.8rem 1rem;
  color: var(--ink-soft);
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
}
body.kid ul.tally strong { font: 800 2rem/1.1 var(--f-print); color: var(--ink); }

/* What the child can now do alone: each one ticked in pen. */
body.kid .skills.new li {
  position: relative;
  padding: 0.45rem 0.9rem 0.45rem 2.6rem;
  background: none;
  border: 0;
  border-radius: 0;
}
body.kid .skills.new li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.35rem;
  width: 1.7rem;
  height: 1.4rem;
  background: var(--done);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c4 3 8 7 11 12 5-11 13-21 25-28'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20c4 3 8 7 11 12 5-11 13-21 25-28'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.kid .trend .bar { background: var(--pen); border-radius: 0; }

body.kid .spark-offer, body.kid .spark-hook, body.kid .spark-why, body.kid .spark-more {
  padding: 1.1rem 1.3rem 1.2rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .spark-offer { border: 2px solid var(--pen); }
body.spark .qform + .meta { margin-top: 1.2rem; }
body.kid .spark-offer h2 { color: var(--ink); }

/* ------------------------------------------------------------------ shop */

body.shop .wrap { max-width: 48rem; }
body.kid .points-big {
  margin: 0 0 1.4rem;
  padding: 0;
  font: 800 1.4rem/1.3 var(--f-print);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.kid .shop-notice, body.kid .shop-waiting, body.kid .shop-decision {
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--slip);
  border: 2px solid var(--pen);
  border-radius: 0;
}
body.kid .prize {
  padding: 1rem 1.1rem 1.1rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .prizes.saving .prize { background: transparent; border-style: dashed; }
body.kid .prize-name { font: 800 1.25rem/1.25 var(--f-print); }
body.kid .prize-cost {
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
}
body.kid .prize .big { min-height: 56px; font-size: 1.1rem; }
body.kid .points-delta { color: var(--done); }
body.kid .points-minus { color: var(--red); }
body.kid .points-log li, body.kid .points-rules li { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ timed paper */

/* The clock rides on the cover bar, where a child glances for it, and the bar
   stays put on a paper so the time never scrolls away. */
body.paper .kbar { position: sticky; top: 0; }
.kbar .paper-clock {
  margin: 0 0 0 auto;
  padding: 0.35rem 0.9rem;
  font: 700 1.1rem/1.2 var(--f-print);
  font-variant-numeric: tabular-nums;
  color: var(--hl-ink);
  background: var(--label);
  border: 0;
  border-radius: 10px;
  white-space: nowrap;
}
.kbar .paper-clock.low { color: #ffffff; background: var(--red); border: 0; }
body.paper .wrap { max-width: 44rem; }
body.paper .paper-top { margin: 0 0 0.4rem; }
body.paper .paper-top h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); }
body.kid .paper-score {
  padding: 1rem 1.2rem;
  font: 800 1.4rem/1.3 var(--f-print);
  background: var(--slip);
  border: 2px solid var(--pen);
  border-radius: 0;
}
body.kid .paper-review { padding-left: 1.6rem; }
body.kid .paper-review li {
  margin: 0 0 -1px;
  padding: 0.6rem 0.9rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
}
body.kid .paper-review li.right, body.kid .paper-review li.wrong { border-left: 1px solid var(--line); }
body.kid .paper-review li.skipped { border-left: 1px solid var(--line); }
body.kid .paper-review li.right .meta strong { color: var(--done); }

/* ------------------------------------------------------------------ a set lesson */

body.kid .ls-title { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem); }
body.kid .ls-card {
  position: relative;
  margin: 0 0 1.2rem;
  padding: 1.1rem 1.2rem 1.2rem 1.2rem;
  background: var(--slip);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
body.kid .ls-last, body.kid .ls-rule, body.kid .ls-example { border-left: 1px solid var(--line); }
body.kid .ls-card h2 { margin: 0 0 0.7rem; font-size: 1.3rem; gap: 0.6rem; }
/* The step numbers, large and printed in pen blue. The pen's 1 is a single
   stroke, which a child reads as a slash, so the numbers stay in print. */
body.kid .ls-step {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font: 800 1.7rem/1 var(--f-print);
  color: var(--pen);
}
body.kid .ls-last .ls-step, body.kid .ls-example .ls-step { background: none; }
body.kid .ls-label {
  min-width: 6.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
/* What the child wrote last time, struck through in plain ink: the lesson
   names the miss without the teacher's red. */
body.kid .ls-given {
  font-family: var(--f-print);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration-color: var(--ink-soft);
}
body.kid .ls-answer { font-family: var(--f-print); font-weight: 800; }
body.kid .ls-why { background: var(--tint-solid); border-radius: 0; }
body.kid .ls-watch, body.kid .ls-remember { background: var(--tint-solid); border-radius: 0; }
body.kid .ls-score.got-it { border: 2px solid var(--done); }
body.kid .ls-big { font: 700 3.2rem/1 var(--f-pen); color: var(--pen); }
body.kid .ls-big span { font-family: var(--f-print); }
body.kid .ls-top .day-kicker { font-size: 1.2rem; }
body.kid .ls-top .dot {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--pen);
}
body.kid .ls-top .dot.filled { background: var(--pen); box-shadow: none; }
body.kid .ls-top .dot.now { width: 22px; height: 14px; background: var(--hl); box-shadow: inset 0 0 0 2px var(--start-edge); }

/* ------------------------------------------------------------------ page meta */

body.kid .page-meta { margin: -0.4rem 0 1rem; color: var(--ink-soft); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  body.kid .lesson > summary::before, body.kid .lesson > summary::after { transition: none; }
}

/* ------------------------------------------------------------------ the demo

   Try it with your child (learn/web/demo.py): the child's own screens under
   a slim strip on the cover's deep blue, as the family-code bar sits on the
   front page, saying what this is and offering the one way out. */

.demo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding: 4px max(var(--side), env(safe-area-inset-right)) 4px max(var(--side), env(safe-area-inset-left));
  color: var(--cover-text);
  background: var(--cover-deep);
  font: 700 0.95rem/1.2 var(--f-print);
}
.demo-bar-text { flex: 1 1 auto; min-width: 0; }
/* Named with the body, so the child's blue link colour does not reach it. */
body.kid .demo-bar-exit {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
  color: var(--on-cover);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
body.kid .demo-bar-exit:hover { color: var(--on-cover); text-decoration-thickness: 2.5px; }
body.kid .demo-bar-exit:focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }
/* The strip has the label, so the cover bar needs only the cells and the count. */
body.demo .kbar .progress { margin-right: 0; }

/* The done page's way on: what a grown-up reads next. */
body.demo .demo-next {
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem 1.3rem;
  background: var(--slip);
  border: 2px solid var(--pen);
}
body.demo .demo-next h2 { margin: 0 0 0.4rem; }
body.demo .demo-next .lead { margin: 0 0 0.8rem; }
body.demo .demo-next .big { margin: 0.4rem 0 1rem; }
body.demo .demo-next .lead a { color: var(--pen); font-weight: 700; }
body.demo .points-hero .ph-total { color: var(--ink-soft); }

/* ------------------------------------------------------------------ home-screen app

   The status bar is drawn over the page (book.css, the same media query). The
   cover's edge starts below it, and the name page, which is all cover, moves
   its label and its names down by the same amount. The bar is positioned
   relative on every page but the paper, so only the margin moves it: a `top`
   as well would move it down twice. The paper's bar is sticky, and `top` is
   where it sticks. */
@media (display-mode: standalone) {
  .kbar { margin-top: env(safe-area-inset-top, 0px); }
  body.paper .kbar { top: env(safe-area-inset-top, 0px); }
  body.pick .wrap { padding-top: calc(clamp(2rem, 6vw, 4.5rem) + env(safe-area-inset-top, 0px)); }
  /* The demo's strip sits above the cover bar, so the strip moves down
     instead and the bar stays under it. */
  body.demo .demo-bar { margin-top: env(safe-area-inset-top, 0px); }
  body.demo .kbar { margin-top: 0; }
}

/* The page the worker shows with no network (templates/offline.html). */
body.offline .offline-card { text-align: center; }
body.offline .offline-card .big { margin-top: 0.4rem; }

/* ------------------------------------------------------------------ interactive questions

   The child places a point, puts cards in order, sorts cards into groups,
   taps words or shades parts (templates/_interactive.html). Each is drawn as
   plain form controls that answer with no script; static/interact.js builds
   the tap-then-tap version over them (.ix-on) and works the same controls.
   Everything a finger taps is 44px or more, a picked thing is ringed in pen
   blue with no shadow and no lift, and nothing moves by itself. */

body.kid .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
body.kid .ix { margin: 0 0 0.6rem; }
body.kid .ix.ix-on .ix-fallback { display: none; }
body.kid .ix-help { margin: 0 0 0.8rem; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }

/* The feedback page: what the child did beside the right answer. */
body.kid .ix-result { margin: 0 0 1rem; }
body.kid .ix-result .given { margin: 0.6rem 0 0.4rem; }
body.kid .slip-note {
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  font-weight: 700;
  background: var(--slip);
  border: 2px solid var(--red);
}

/* A card a child orders or sorts: a paper key with the words, and a picture
   above them when the card has one. Picked up, it fills with pen blue, the
   way a chosen option does. */
body.kid .ix-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  font: 700 1.3rem/1.25 var(--f-print);
  color: var(--ink);
  text-align: left;
}
body.kid .ix-card-picture { flex: none; width: 52px; height: 52px; }
body.kid .ix-card-text { min-width: 0; overflow-wrap: anywhere; }
body.kid .ix-card .frac { --frac-size: 1.1rem; }
body.kid button.ix-card-key {
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid button.ix-card-key:hover { border-color: var(--pen); }
body.kid button.ix-card-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
body.kid button.ix-card-key[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--pen);
  border-color: var(--cover-deeper);
  box-shadow: 0 4px 0 var(--cover-deeper);
}
body.kid button.ix-card-key[aria-pressed="true"] .ix-card-text { color: var(--on-accent); }

/* The two ends of an order, printed at the top and the bottom of the list. */
body.kid .ix-end {
  margin: 0.2rem 0 0.5rem 2.6rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-soft);
}
body.kid .ix-order-list + .ix-end { margin-top: 0.1rem; }

/* The scripted order: one numbered list, the place numbers written in pen. */
body.kid .ix-order-list {
  counter-reset: place;
  list-style: none;
  margin: 0;
  padding: 0;
}
body.kid .ix-slot {
  counter-increment: place;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 12px;
}
body.kid .ix-slot::before {
  content: counter(place);
  font: 700 1.6rem/1 var(--f-pen);
  color: var(--pen);
  text-align: center;
}
/* With a card picked up, every other card is a place it can go. */
body.kid .ix-order-list.is-picking .ix-slot:not(.is-picked) button.ix-card-key {
  border-style: dashed;
  border-color: var(--pen);
}
body.kid .ix-moves { display: flex; gap: 8px; }
body.kid button.ix-move {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin: 0;
  padding: 0;
  color: var(--pen);
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid button.ix-move svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.kid button.ix-move:hover { border-color: var(--pen); }
body.kid button.ix-move:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
body.kid button.ix-move[aria-disabled="true"] { opacity: 0.4; }
body.kid button.ix-move[aria-disabled="true"]:active { transform: none; box-shadow: 0 4px 0 var(--key-edge); }

/* The plain order, with no script: each card beside its place select. */
body.kid .ix-order-plain { list-style: none; margin: 0; padding: 0; }
body.kid .ix-place-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 10px;
  padding: 0.5rem 0.6rem 0.5rem 0.9rem;
  background: var(--slip);
  border: 1px solid var(--line);
}
body.kid .ix-place-label { min-width: 0; }
body.kid select.ix-place-select {
  min-height: 56px;
  min-width: 7.5rem;
  padding: 0 0.8rem;
  font: 700 1.1rem/1.2 var(--f-print);
  color: var(--ink);
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 10px;
}
body.kid select.ix-place-select:focus { border-color: var(--pen); }

/* The feedback: the child's order beside the right one, each of the child's
   places marked by the pen. */
body.kid .ix-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.6rem 1rem;
  margin: 0 0 0.4rem;
}
/* Sentences need the width: one column under the other on a phone. */
body.kid .ix-compare.is-long { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
body.kid .ix-col-head { margin: 0 0 0.3rem; font-size: 1.1rem; }
body.kid .ix-compare .ix-end { margin: 0 0 0.3rem; font-size: 0.95rem; }
body.kid .ix-order-show { list-style: none; margin: 0 0 0.3rem; padding: 0; }
body.kid .ix-show-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 52px;
  margin: 0 0 8px;
  padding: 0.35rem 0.8rem;
  background: var(--slip);
  border: 1px solid var(--line);
}
body.kid .ix-show-card .ix-card { font-size: 1.15rem; }
body.kid .ix-show-card .ix-card-picture { width: 40px; height: 40px; }
body.kid .ix-order-show.is-right .ix-show-card { border: 2px solid var(--done); }
body.kid .ix-mark {
  flex: none;
  width: 1.6rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
body.kid .ix-mark.is-ok { color: var(--done); }
body.kid .ix-mark.is-off { color: var(--ink-soft); }

/* The scripted sort: a tray of cards over a box for each group. A group's
   name is the key that takes the picked card. */
body.kid .ix-tray {
  margin: 0 0 1rem;
  padding: 0.6rem;
  background: var(--slip);
  border: 2px dashed var(--key-line);
}
body.kid .ix-tray.is-empty { border-color: var(--line); }
body.kid .ix-tray-cards,
body.kid .ix-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
  gap: 10px;
}
body.kid .ix-tray-cards:empty { display: none; }
body.kid .ix-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 12px;
}
body.kid .ix-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 9rem;
  padding: 0.6rem;
  background: var(--slip);
  border: 2px solid var(--line);
}
body.kid button.ix-group-key {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0.4rem 0.8rem;
  font: 800 1.15rem/1.2 var(--f-print);
  color: var(--pen);
  background: var(--key);
  border: 2px solid var(--pen);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
}
body.kid .ix-tray button.ix-tray-key { margin: 0 0 10px; color: var(--ink-soft); border-color: var(--key-line); }
body.kid .ix-tray.is-empty button.ix-tray-key { margin: 0; }
body.kid button.ix-group-key:hover { background: var(--tint-solid); }
body.kid button.ix-group-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
/* With a card picked up, every group's name is a place it can go. */
body.kid .ix-sort-widget.is-picking .ix-group button.ix-group-key { background: var(--tint-solid); border-style: dashed; }
body.kid .ix-sort-widget.is-picking .ix-tray button.ix-tray-key { border-style: dashed; }
body.kid .ix-sort-widget button.ix-card-key { min-height: 56px; }

/* The plain sort, with no script: a radio row under each card. */
body.kid .ix-sort-row {
  margin: 0 0 10px;
  padding: 0.6rem 0.8rem 0.7rem;
  background: var(--slip);
  border: 1px solid var(--line);
}
body.kid .ix-sort-legend { padding: 0; }
body.kid .ix-sort-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.4rem; }
body.kid .ix-sort-choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0 0.9rem 0 0.6rem;
  font-weight: 700;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
}
body.kid .ix-sort-choice input { width: 24px; height: 24px; accent-color: var(--pen); }
body.kid .ix-sort-choice:has(input:checked) { border-color: var(--pen); background: var(--tint-solid); }
body.kid .ix-show-none { margin: 0 0 8px; padding: 0.3rem 0; color: var(--ink-soft); font-weight: 700; }

/* The number line: a ruled line in ink with its marks, the numbers it prints
   under them, and, with the script, a pen-blue point that stops only where
   the question lets it. The whole line is the place to tap. */
body.kid .ix-line { position: relative; margin: 0.4rem 0 0.6rem; }
body.kid .ix-line-track {
  position: relative;
  height: 88px;
  touch-action: pan-y;
  border-radius: 10px;
  cursor: pointer;
}
body.kid .ix-line-result .ix-line-track { cursor: default; }
body.kid .ix-line-track:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
body.kid .ix-line-draw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.kid .ix-line-draw line {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
body.kid .ix-line-draw .ix-line-rule { stroke-width: 3; }
body.kid .ix-line-draw .ix-line-mark.is-named { stroke-width: 3.5; }
body.kid .ix-line-labels { position: relative; height: 2.6rem; }
body.kid .ix-tick-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font: 700 1.15rem/1.2 var(--f-print);
  color: var(--ink);
  white-space: nowrap;
}
body.kid .ix-tick-label .frac { --frac-size: 1rem; }
body.kid .ix-point {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: var(--pen);
  border: 3px solid var(--slip);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--pen);
  pointer-events: none;
}
body.kid .ix-point-flag {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px 2px;
  font: 700 1rem/1.3 var(--f-print);
  color: var(--on-accent);
  white-space: nowrap;
  background: var(--pen);
  border-radius: 6px;
}
body.kid .ix-line-keys { display: flex; gap: 12px; margin: 0.2rem 0 0.4rem; }
body.kid button.ix-move.ix-move-wide {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  height: 56px;
  min-height: 56px;
  font: 800 1.1rem/1 var(--f-print);
}
body.kid .ix-line-plain .answer { margin-top: 0.4rem; }

/* The feedback: the child's point and the right one on the same line, each
   flagged, and the band the item allows round the right one. */
body.kid .ix-line-flags { position: relative; height: 4.2rem; }
body.kid .ix-flag {
  position: absolute;
  transform: translateX(-50%);
  padding: 2px 8px 3px;
  font: 700 0.95rem/1.3 var(--f-print);
  white-space: nowrap;
  border-radius: 6px;
}
body.kid .ix-flag .frac { --frac-size: 0.85rem; }
body.kid .ix-flag.at-start { transform: translateX(-14px); }
body.kid .ix-flag.at-end { transform: translateX(calc(-100% + 14px)); }
body.kid .ix-flag.is-mine { top: 0; color: var(--on-accent); background: var(--pen); }
body.kid .ix-flag.is-right { top: 2.2rem; color: var(--done); background: var(--done-bg); border: 2px solid var(--done); }
body.kid .ix-point.is-right {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  background: none;
  border: 4px solid var(--done);
  box-shadow: none;
}
body.kid .ix-line-band {
  position: absolute;
  top: 22px;
  bottom: 22px;
  background: var(--done-bg);
  border-radius: 6px;
}

/* Select: the text set at reading size on a slip, each part the child can
   tap a pill that fills with pen blue once tapped. The box itself is out of
   sight but takes the focus, and its label shows the focus ring. Lines sit
   far enough apart that every pill is a 44px target. */
body.kid .ix-text {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  font: 400 1.3rem/2.5 var(--f-print);
  color: var(--ink);
  background: var(--slip);
  border: 1px solid var(--line);
}
body.kid .ix-tok {
  position: relative;
  display: inline-block;
  min-width: 44px;
  min-height: 44px;
  margin: 2px 0;
  padding: 0 0.3em;
  line-height: 40px;
  text-align: center;
  vertical-align: middle;
  border: 2px solid transparent;
  border-bottom-color: var(--key-line);
  border-radius: 10px;
  cursor: pointer;
}
body.kid .ix-tok:hover { background: var(--tint-solid); }
body.kid .ix-tok-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.kid .ix-tok:has(.ix-tok-box:checked),
body.kid .ix-tok.is-on {
  color: var(--on-accent);
  background: var(--pen);
  border-color: var(--cover-deeper);
}
body.kid .ix-tok:has(.ix-tok-box:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A sentence wraps over lines, so it is set inline, its box on every line. */
body.kid .ix-text-sentence { line-height: 2.3; }
body.kid .ix-text-sentence .ix-tok {
  display: inline;
  padding: 0.35em 0.2em;
  line-height: 2.3;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The feedback: the child's taps underlined in pen, the right answer ringed
   in tick green. */
body.kid .ix-legend { margin: 0 0 0.5rem; font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
body.kid .ix-key-mine { text-decoration: underline 3px var(--pen); text-underline-offset: 4px; color: var(--ink); }
body.kid .ix-key-right { padding: 0 0.25em; border: 2px solid var(--done); border-radius: 8px; color: var(--ink); }
body.kid .ix-text-result { line-height: 2.3; }
body.kid .ix-tok-show { padding: 0.1em 0.15em; border: 2px solid transparent; border-radius: 8px; }
body.kid .ix-tok-show.is-mine { text-decoration: underline 3px var(--pen); text-underline-offset: 5px; }
body.kid .ix-tok-show.is-right {
  border-color: var(--done);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Shade: squares ruled in ink, and a part shaded the way a pencil shades
   it, with close pen-blue hatching over a pale wash. Every square is at least
   44px; a grid is at most eight across, so even a phone keeps that. */
body.kid .ix-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(44px, 60px));
  width: fit-content;
  max-width: 100%;
  margin: 0.2rem 0 0.9rem;
  background: var(--slip);
  border: 2px solid var(--ink);
}
body.kid .ix-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ink-soft);
  cursor: pointer;
}
body.kid .ix-cell-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
body.kid .ix-cell:hover { background: var(--tint-solid); }
body.kid .ix-cell:has(.ix-cell-box:checked),
body.kid .ix-cell.is-on {
  background-color: var(--shade-wash);
  background-image: repeating-linear-gradient(135deg, var(--pen) 0 2.5px, transparent 2.5px 7px);
}
body.kid .ix-cell:has(.ix-cell-box:focus-visible) { outline: 3px solid var(--focus); outline-offset: -4px; z-index: 1; }
body.kid { --shade-wash: #c9d6f5; }
@media (prefers-color-scheme: dark) { body.kid { --shade-wash: #2c3f6e; } }

/* A circle: the parts drawn in an SVG; a shaded part fills with pen blue. */
body.kid .ix-circle { margin: 0.2rem 0 0.9rem; }
body.kid .ix-circle-draw { display: block; width: min(100%, 260px); height: auto; overflow: visible; }
body.kid .ix-sector {
  fill: var(--slip);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  cursor: pointer;
}
body.kid .ix-circle.is-live .ix-sector:not(.is-on):hover { fill: var(--tint-solid); }
body.kid .ix-sector.is-on,
body.kid .ix-circle:has(.ix-part-box[value="0"]:checked) .ix-sector[data-part="0"],
body.kid .ix-circle:has(.ix-part-box[value="1"]:checked) .ix-sector[data-part="1"],
body.kid .ix-circle:has(.ix-part-box[value="2"]:checked) .ix-sector[data-part="2"],
body.kid .ix-circle:has(.ix-part-box[value="3"]:checked) .ix-sector[data-part="3"],
body.kid .ix-circle:has(.ix-part-box[value="4"]:checked) .ix-sector[data-part="4"],
body.kid .ix-circle:has(.ix-part-box[value="5"]:checked) .ix-sector[data-part="5"],
body.kid .ix-circle:has(.ix-part-box[value="6"]:checked) .ix-sector[data-part="6"],
body.kid .ix-circle:has(.ix-part-box[value="7"]:checked) .ix-sector[data-part="7"],
body.kid .ix-circle:has(.ix-part-box[value="8"]:checked) .ix-sector[data-part="8"],
body.kid .ix-circle:has(.ix-part-box[value="9"]:checked) .ix-sector[data-part="9"],
body.kid .ix-circle:has(.ix-part-box[value="10"]:checked) .ix-sector[data-part="10"],
body.kid .ix-circle:has(.ix-part-box[value="11"]:checked) .ix-sector[data-part="11"] { fill: var(--pen); }
body.kid .ix-sector:focus { outline: none; }
body.kid .ix-sector:focus-visible { stroke: var(--focus); stroke-width: 6; }
body.kid .ix-sector-num { font: 700 15px var(--f-print); fill: var(--ink-soft); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
body.kid .ix-circle.is-live .ix-sector-num { display: none; }
body.kid .ix-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.6rem; }
body.kid .ix-part-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 56px;
  padding: 0 0.8rem 0 0.6rem;
  font-weight: 700;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
}
body.kid .ix-part-key input { width: 24px; height: 24px; accent-color: var(--pen); }

/* The feedback: the child's shading beside one right way. */
body.kid .ix-grid.is-shown { grid-template-columns: repeat(var(--cols), minmax(18px, 34px)); margin: 0.3rem 0 0.6rem; }
body.kid .ix-grid.is-shown .ix-cell { min-width: 18px; min-height: 18px; cursor: default; }
body.kid .ix-shade-compare .ix-circle-draw { width: min(100%, 150px); }
body.kid .ix-shade-compare .ix-sector { cursor: default; }