/* ============================================================================
   /quest: one beat at a time, in big type.
   ============================================================================
   The same paper, ink and serif as the rest of the book. A quest is read at
   arm's length with a board on the table in front of it, so the guide's line
   is large, the controls are few, and only one beat is ever on screen.
   ========================================================================== */
.quest-page { background: var(--paper); }
.quest-main { max-width: 860px; padding-bottom: 96px; }
.quest-main h1 { font-size: clamp(38px, 6vw, 64px); margin: 6px 0 10px; }
.quest-fixes { font: 400 clamp(19px, 2.2vw, 23px)/1.4 var(--serif); color: var(--ink-soft); max-width: 28em; }
#questKept, #questWhere { margin-top: 10px; }
#questEye[hidden] { display: none; }
/* The opening picture stands clear of the line above it, which on a preview can run to the pictures a drafted lesson still needs (a world's own stage sets its own, quest-world.css). */
.quest-stage { margin-top: 16px; }
/* Where the child is, as marks (quest-page.js, paintWhere): the parts behind filled, this one ringed in lemon, the rest an outline. No digit. */
.beat-marks { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; vertical-align: middle; }
.beat-mark { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; }
.beat-mark.is-done { background: var(--ink-soft); border-color: var(--ink-soft); }
.beat-mark.is-here { width: 11px; height: 11px; background: var(--lemon); border-color: var(--ink); }
.quest-problem { color: var(--oxblood); min-height: 1.4em; margin-top: 16px; }

/* A beat's own drawing: the child meets the picture, then the words. */
.beat-figure { margin: 0 0 18px; max-width: 560px; }
.beat-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.beat-figure figcaption { margin-top: 6px; color: var(--ink-soft); }
@media (max-width: 640px) { .beat-figure { max-width: 100%; } }

.quest-beat { margin-top: 34px; padding: 28px 28px 22px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--paper-2) 45%, #fff); }
.guide-line { font: 400 clamp(23px, 3.2vw, 34px)/1.35 var(--serif); color: var(--ink); max-width: 24em; }
.guide-line .w.lit { background: var(--lemon); border-radius: 4px; }
.beat-body:not(:empty) { margin-top: 22px; }
.beat-acts { margin-top: 24px; align-items: center; }
.beat-foot { margin: 18px 0 0; }
.track-finish { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.track-finish .btn { margin-top: 12px; }
/* The words the visit taught, said back one tap at a time: the desk reads the same list until the next day. */
.quest-learned { margin-top: 20px; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--paper) 90%, var(--lemon)); }
.quest-learned .eye { margin: 0 0 10px; }
.quest-words { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.quest-word { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 20px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 19px / 1.1 var(--serif); cursor: pointer; box-shadow: 2px 3px 0 rgba(23, 58, 50, 0.15); }
.quest-word:hover { background: color-mix(in srgb, var(--lemon) 34%, var(--paper)); }
.quest-word:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.quest-word::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--word-colour, var(--lemon)); }
#simVoiceNote:empty { display: none; }

/* ------------------------------------------------------- the parts card --- */
.parts-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.parts-card .eye { margin-bottom: 4px; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.part { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); }
.part b { font: 500 17px/1.2 var(--serif); }
.part:hover { border-color: var(--ink); }
.part[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.part[aria-pressed="true"] .small { color: var(--paper); }

.beat-link { margin-top: 16px; }
.wiring { margin: 16px 0 0; padding-left: 1.3em; font: 400 19px/1.6 var(--serif); display: grid; gap: 6px; }

/* ------------------------------------------------------------ a check --- */
.check-form { display: grid; gap: 14px; justify-items: start; }
.check-row { display: inline-flex; align-items: center; gap: 12px; }
.check-row input { min-height: 60px; width: 8em; padding: 10px 16px; border: 2px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 500 clamp(24px, 3vw, 30px)/1.2 var(--serif); }
.check-row input:focus { outline: 3px solid var(--lemon); outline-offset: 2px; border-color: var(--ink); }
.check-unit { font: 500 clamp(18px, 2vw, 22px)/1.2 var(--serif); color: var(--ink-soft); }
.check-form .cta-row { margin-top: 0; }
.hint:not(:empty) { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--paper-2) 60%, #fff); display: grid; gap: 8px; }
.hint p { font: 400 19px/1.5 var(--serif); }
.check-note { margin-top: 12px; font-size: 16px; }

/* ------------------------------------------------------- a know-it check --- */
/* One of the book's own questions: four written answers, one tap, then the
   book's reason. No hint, because a hint here is the answer. */
.choices { display: grid; gap: 10px; }
.choice { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; text-align: left; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 400 clamp(17px, 2vw, 20px)/1.45 var(--serif); }
.choice:hover:not([disabled]) { border-color: var(--ink); }
.choice-letter { font: 600 16px/1.2 var(--sans); color: var(--oxblood); }
.choice[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice[aria-pressed="true"] .choice-letter { color: var(--paper); }
/* A chosen answer stays readable once the choices are locked: a disabled button's own grey must not win over the paper colour. */
.choice[aria-pressed="true"], .choice[aria-pressed="true"] * { color: var(--paper); -webkit-text-fill-color: var(--paper); opacity: 1; }
.choice[disabled] { cursor: default; }
.choice-explain { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--paper-2) 60%, #fff); font: 400 19px/1.5 var(--serif); }

/* ------------------------------------------------- a simulation on a beat --- */
/* The sim is the same sandboxed frame the child's desk shows a library
   simulation in, with the mission's goal above it and, under it, what the sim
   says it is showing: the child can read their answer off the page they are
   answering about. */
.sim-frame { border: 1.5px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 16 / 10; max-height: 460px; }
.sim-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.sim-goal { margin: 14px 0 0; font: 500 clamp(18px, 2.2vw, 22px)/1.4 var(--serif); color: var(--ink); }
/* Whose book the sim came out of, when it is not one of ours. */
.credit { margin: 8px 0 0; color: var(--ink-soft); }
.credit a { color: inherit; }
.sim-values { margin-top: 8px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sim-check:not(:empty) { margin-top: 20px; }

/* A lab (course-lab.js): the child's program as a row of step cards, the tray
   of cards to lay (each in its card's colour, its sign in paper, its word in
   ink beside it), Run, and what the run did. Every press target is at least
   52 pixels; nothing here scrolls sideways at 320. */
.course-lab { display: grid; gap: 14px; margin-top: 6px; }
.lab-label { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--ink-soft); }
.lab-program { display: flex; flex-wrap: wrap; gap: 8px; min-height: 56px; margin: 0; padding: 8px; list-style: none; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: #fff; }
.lab-chip { display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; background: var(--card); color: #fffaf0; border: 1.5px solid color-mix(in srgb, var(--card) 70%, #000); }
.lab-empty { align-self: center; padding: 0 6px; color: var(--ink-soft); font: 400 17px/1.3 var(--serif); }
.lab-tray { display: flex; flex-wrap: wrap; gap: 10px; }
.lab-card { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 16px 6px 6px; border: 1.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: 600 19px/1.1 var(--serif); cursor: pointer; box-shadow: 2px 3px 0 rgba(23, 58, 50, 0.15); }
.lab-card .lab-sign { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--card); color: #fffaf0; }
.lab-card:hover:not([disabled]) { background: color-mix(in srgb, var(--lemon) 30%, #fff); }
.lab-card:focus-visible, .lab-acts button:focus-visible { outline: 4px solid var(--lemon); outline-offset: 2px; }
.lab-card[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }
.lab-acts { gap: 10px; }
.lab-status { margin: 0; min-height: 1.4em; font: 400 clamp(18px, 2vw, 21px)/1.4 var(--serif); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .lab-card { box-shadow: none; } }
/* On a phone the tray is three cards across, each its sign over its word, and the program's cards narrower, so the place, the program and Run fit one screen. */
@media (max-width: 520px) {
  .lab-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lab-card { flex-direction: column; justify-content: center; gap: 4px; min-height: 76px; padding: 6px 4px; font-size: 16px; }
  .lab-card .lab-sign { width: 36px; height: 36px; }
  .lab-program { gap: 6px; min-height: 52px; padding: 6px; }
  .lab-chip { width: 36px; height: 44px; }
}

/* --------------------------------------------------------- say why, kept --- */
.beat-body textarea { width: 100%; max-width: 30em; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 400 20px/1.5 var(--serif); }
.kept-words { font: 400 clamp(20px, 2.4vw, 24px)/1.5 var(--serif); }
.sibling-call { margin-top: 4px; }

@media (max-width: 640px) {
  .quest-beat { padding: 20px 18px 18px; }
  .parts { grid-template-columns: 1fr; }
  .sim-frame { aspect-ratio: 4 / 5; }
}

/* The playback row: the words are always on the page, and a person presses to hear them. */
.narration-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.narration-row .read-aloud { display: flex; gap: 6px; align-items: center; }
.narration-row .small { color: var(--ink-soft); }

/* ------------------------------------------- the child's own helper --- */
/* One small card, under the beat and never over it, on a story or a say
   beat alone. It changes nothing about the mission, and the last line on it
   says so. A check beat never carries it: there the only honest help is the
   engine's own hint, which has its own button. */
.assist-card { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.assist-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.assist-title { font: 500 18px/1.2 var(--serif); margin: 0; }
.assist-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.assist-talk { min-height: 52px; padding: 12px 20px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 500 18px/1.2 var(--serif); }
.assist-talk[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.assist-confirm { display: grid; gap: 8px; margin-top: 14px; }
.assist-confirm textarea { width: 100%; max-width: 30em; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 400 19px/1.5 var(--serif); }
.assist-send { min-height: 48px; padding: 10px 20px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--ink); color: var(--paper); font: 500 17px/1.2 var(--serif); }
/* The studios call a quiet button `quiet`; this page calls it `tool`. One
   card serves both, so on this page the quiet ones are dressed as tools. */
.assist-card .quiet { font: 500 13px/1 var(--sans); min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.assist-card .quiet:hover { border-color: var(--ink); }
.assist-reply { margin-top: 16px; padding-left: 16px; border-left: 3px solid var(--accent); }
.assist-say { font: 400 clamp(19px, 2.2vw, 23px)/1.45 var(--serif); }
.assist-say .w.lit { background: var(--lemon); border-radius: 4px; }
.assist-meaning { margin-top: 6px; color: var(--ink-soft); }
.assist-picture { margin: 12px 0 0; }
.assist-picture img { display: block; width: 100%; max-width: 320px; height: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.assist-foot { margin-top: 14px; color: var(--ink-soft); }

@media (max-width: 640px) {
  /* Under the answer, in the flow, never floating over it: a thumb reaching
     for Keep must not find a microphone. */
  .assist-card { position: static; margin-top: 18px; padding: 14px 16px; }
  .assist-talk { width: 100%; }
}

/* ---------------------------------------------- hold to talk, read, keep --- */
/* Where a box to type into used to be. The words come back on the page in the
   child's own reading size; Keep is theirs; a misheard word is said again.
   The typing line appears only once a microphone has actually failed. */
.talk { display: grid; gap: 10px; }
.talk-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.talk-hold { min-height: 56px; padding: 12px 22px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 500 19px/1.2 var(--serif); }
.talk-hold[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.talk-state { color: var(--ink-soft); }
.talk-heard { display: grid; gap: 8px; padding: 12px 16px; border-left: 3px solid var(--accent); }
.talk-words { margin: 0; font: 400 clamp(20px, 2.4vw, 24px)/1.5 var(--serif); }
.talk-fallback { color: var(--ink-soft); }
.talk-typing { display: grid; gap: 8px; }
.talk-typing textarea { width: 100%; max-width: 30em; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); font: 400 20px/1.5 var(--serif); }
@media (max-width: 640px) { .talk-hold { width: 100%; } }
.talk .text-link, .assist-fallback .text-link { background: none; border: 0; padding: 0; color: var(--ink-soft); text-decoration: underline; font: inherit; cursor: pointer; }

/* ------------------------------------- a voice beat without listening --- */
/* The founder's rule of 2026-10-18 (voice-fallback-view.js): the beat falls back in
   place. Taps are big enough for a small finger, every word keeps the reading size,
   and the one quiet line about listening is small and says it once. */
.listening-off { color: var(--ink-soft); margin: 0 0 8px; }
.fallback-line { margin: 0 0 10px; font: 500 clamp(19px, 2.2vw, 22px)/1.4 var(--serif); }
.fallback-word { margin: 0 0 10px; font: 600 clamp(24px, 3vw, 30px)/1.3 var(--serif); }
.fallback-hear { min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.fallback-hear svg { width: 28px; height: 28px; }
.fallback-pick { display: grid; gap: 12px; justify-items: start; }
.fallback-options, .fallback-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.fallback-option, .fallback-tile, .fallback-laid { min-height: 56px; min-width: 56px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: 14px; background: var(--chip, #fff); color: var(--ink); font: 500 clamp(19px, 2.2vw, 22px)/1.25 var(--serif); display: inline-grid; place-items: center; gap: 4px; cursor: pointer; }
.fallback-option img { width: 72px; height: 72px; object-fit: contain; }
.fallback-option:disabled, .fallback-tile:disabled { opacity: 0.45; cursor: default; }
.fallback-tiles { display: grid; gap: 12px; }
.fallback-built { min-height: 60px; margin: 0; padding: 8px 12px; border-bottom: 2px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fallback-laid { background: var(--paper-2); }
.fallback-or { margin: 10px 0 4px; color: var(--ink-soft); }
.fallback-result { margin: 0; padding: 10px 14px; border-left: 3px solid var(--accent); font: 500 clamp(19px, 2.2vw, 22px)/1.4 var(--serif); }

/* ---------------------------------------------------------- show me --- */
/* A built thing is shown: the photo goes into the book before Done opens. */
.show-me { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.show-me .cta-row { margin-top: 10px; gap: 10px 16px; }
.file-pick { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.file-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.material-thumb { display: block; margin-top: 12px; max-width: 320px; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.show-me .text-link { background: none; border: 0; padding: 0; color: var(--ink-soft); text-decoration: underline; font: inherit; cursor: pointer; }

/* ------------------------------------------------- talk with the sage --- */
/* A live conversation on a story beat, under the helper. Start is one press;
   the captions are the platform's own transcript; End is always in reach. */
.agent-card { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.agent-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.agent-title { font: 500 18px/1.2 var(--serif); margin: 0; }
.agent-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.agent-minutes { color: var(--ink-soft); }
.agent-captions { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.agent-captions:empty { display: none; }
.agent-line { font: 400 17px/1.45 var(--serif); padding-left: 12px; border-left: 3px solid var(--line); }
.agent-line b { font: 500 12px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 2px; }
.agent-sage { border-left-color: var(--accent); }
.agent-world { border-left-color: var(--lemon, #f2e394); }
.agent-foot { margin-top: 12px; color: var(--ink-soft); }
@media (max-width: 640px) { .agent-card { padding: 14px 16px; } .agent-start { width: 100%; } }

/* A mission on a road starts at its first beat: the road's map already named it (quest-page.js, 2026-09-30). The title stays for a screen reader. */
.track-mission #questEye, .track-mission #questFixes, .track-mission #questKept, .track-mission #questWhere { display: none; }
/* No logo and no name over a road's mission (the founder, 2026-09-30: "why is the mission screen still showing the logo and name"): the mission starts at the place. */
.track-mission .mast { display: none; }
.track-mission .quest-main { padding-top: 12px; }
.track-mission #questTitle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand .mark.mark-dragon { object-fit: contain; }
/* In a frame on a desk (?embed=1: the studio's preview; quest-page.js): the mission alone, from the frame's top edge to its sides, with no header, no skip link to a header that is not there, and none of the page's width. The series line goes too (and since 2026-10-01 it is hidden on every mission, quest-page.js): a drafted quest's was a machine id ("studio-g60k601vy0 · mission 0"), and a frame opens on the mission's own title. The line saying nothing is saved stays, so a tutor playing a pane knows the child's record is untouched. `body` makes these win over the village's own layout whatever order the sheets load in. */
body.quest-embed .mast, body.quest-embed .skip-link, body.quest-embed #questEye { display: none; }
body.quest-embed .quest-main { max-width: none; margin: 0; padding: 16px 18px 32px; }
/* Praise, the moment it is earned: the companion's name and one line, warm and quiet, at the top of the screen where it never covers a button, and clicks pass through it. */
.quest-praise { position: fixed; z-index: 40; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); pointer-events: none; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); box-sizing: border-box; box-shadow: 0 12px 30px -12px rgba(40, 40, 20, .35); display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--lemon, #f2cf4a) 22%, var(--paper, #fffcf5)); border: 1px solid color-mix(in srgb, var(--lemon, #f2cf4a) 55%, transparent); font: 500 16px/1.4 var(--sans); color: var(--ink); max-width: 60ch; }
.quest-praise b { color: var(--oxblood, #85394b); font-weight: 700; }
.quest-praise.praise-in { animation: praise-in .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes praise-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.97); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .quest-praise.praise-in { animation: none; } }

/* The voice's speed (voice-speed.js, 2026-10-08): Slower, Normal, Faster at the top of the conversation, where the line is read, on every mission and every width. Words, never a number; each a forty four pixel target. */
.quest-voice { margin: 0 0 14px; }
.voice-speed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 26px; background: #fff; max-width: 100%; box-sizing: border-box; }
.voice-speed-label { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; font: 500 14px/1 var(--sans); color: var(--ink-soft); }
.voice-speed-label svg { width: 20px; height: 20px; flex: none; }
.voice-speed-step { min-height: 44px; min-width: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 500 16px/1 var(--sans); cursor: pointer; }
.voice-speed-step:hover { background: var(--paper-2); }
.voice-speed-step[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 480px) { .voice-speed { display: flex; } .voice-speed-label { flex-basis: 100%; min-height: 28px; } .voice-speed-step { flex: 1 0 auto; padding: 8px 10px; } }
.math-slides #questVoice.public-maths-voice { display: block; position: fixed; top: 12px; right: 12px; z-index: 4; margin: 0; }
.math-slides #questVoice.public-maths-voice .voice-speed { display: none; }
.public-maths-listen { flex: none; width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.public-maths-listen img { display: block; width: 20px; height: 20px; }

/* Reviewed resource beats share the mission's two-column stage and notes. */
#questStage:has(.resource-player) { width: 100%; max-width: 100%; }
.resource-player { width: 100%; padding: 1rem; box-sizing: border-box; }
.resource-player h2 { font-size: 1.35rem; }
#resourceVideo { width: 100%; min-width: 0; min-height: 200px; aspect-ratio: 16 / 9; display: grid; place-content: center; background: #ede9df; border-radius: .6rem; margin-block: 1rem; }
#resourceVideo iframe { min-width: 0; max-width: 100%; display: block; width: 100%; height: 100%; border: 0; }
#resourceVideo:has(iframe) { display: block; }
.resource-player a, .resource-notes a { overflow-wrap: anywhere; }
.resource-notes h2 { font-size: 1.1rem; margin-block: 1.25rem .35rem; }
.resource-notes p { line-height: 1.6; }