/* Study screens. Every value points at a CedarLearn token in brand.css (loaded first); the names stay, so the JS and
   the diagram modules keep working. The Atkinson files stay in /fonts/ unloaded (a possible "easy-read letters" option). */
:root {
  --paper: var(--cl-cream);
  --surface: var(--cl-white);
  --ink: var(--cl-text);
  --ink-soft: var(--cl-muted);
  --line: var(--cl-line);              /* decorative dividers only */
  --line-strong: var(--cl-line-strong); /* inputs, answer choices, chips, slots, order rows (3:1 on white and cream) */
  --leaf: var(--cl-green);
  --leaf-deep: var(--cl-green-deep);
  --leaf-wash: var(--cl-sage-light);
  --sky: var(--cl-navy);
  --amber: var(--cl-amber);
  --amber-wash: var(--cl-amber-wash);
  --good: var(--cl-green);
  --good-wash: var(--cl-sage-light);
  --radius-lg: var(--cl-radius-lg);
  --radius-sm: var(--cl-radius-md);
  --shadow: var(--cl-shadow);
  --font-head: var(--cl-font-head);
  --font-body: var(--cl-font-body);
  /* Diagram tokens (shared with js/diagrams) */
  --sg-ink: var(--ink);
  --sg-muted: var(--ink-soft);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1c18; --surface: #15281f; --ink: #e4f0e6; --ink-soft: #a7bfb2; --line: #2a4038;
    --leaf: #51b867; --leaf-deep: #8fd19e; --leaf-wash: #1d3a2a;
    --amber: #f0b13a; --amber-wash: #3b2c10; --good: #6fcf75; --good-wash: #1c3a22;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px; line-height: 1.5;
  /* Inter: open 4 and 6, I/l/1 apart (R16), with a plain 0: the ss02 set slashes the zero too (ADHD r2 #12) */
  font-feature-settings: "cv01", "cv02", "cv03", "cv05", "cv08";
  min-height: 100dvh; display: flex; flex-direction: column;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- header / HUD ---------- */
/* The round's bar (UX round 1, K-04/K-05/K-19): "‹ <Topic>" on the left, the sun, and Tutor · Break · Home (Stop in a
   check), each an icon over its one word at EVERY width, at least 44 px. The second line names what is on screen in
   navy at 15 px (4.5:1 or more), beside the round's numbers; a thin bar under it shows how far the round has got. It is
   sized by its own width (container query), so it also fits a Chromebook with the tutor panel open. Under 420 px the
   numbers step out (best, the bar) before any word does. */
.hud {
  position: sticky; top: 0; z-index: 10;
  container-type: inline-size; container-name: hud;
  padding: max(6px, env(safe-area-inset-top)) 14px 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.hud-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hud-back { flex: 0 1 auto; margin-right: auto; min-width: 0; display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  margin-left: -4px; padding: 2px 10px 2px 4px; border-radius: 12px; font-family: var(--font-head); font-weight: 700;
  font-size: 17px; color: var(--cl-navy); text-decoration: none; touch-action: manipulation; }
.hud-back .back-chev { font-size: 28px; line-height: 1; margin-top: -3px; flex: none; }
.hud-back-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hud-back:hover { background: var(--cl-sky-light); }
.hud-back:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.hud-sun { display: flex; align-items: center; gap: 6px; flex: none; }
.hud-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.hud-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 54px; min-height: 48px; padding: 3px 8px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--sky); font: 700 14px/1.1 var(--font-body); cursor: pointer;
  white-space: nowrap; touch-action: manipulation; }
.hud-btn .hud-btn-text { color: var(--cl-navy); }
.hud-btn:hover, .hud-btn[aria-expanded="true"] { background: var(--cl-sky-light); border-color: var(--cl-navy); }
.hud-row2 { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 0 6px; }
.hud-stats { flex: 0 1 auto; min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; overflow: hidden; white-space: nowrap; font-size: 16px; }
.hud-stats .stat { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.hud-stats .stat-icon { display: inline-flex; }
.hud-stats .ico { width: 18px; height: 18px; }
/* The sections number shares its class name with the topic page's section list: never that card's box here. */
.hud-stats .stat.sections { background: none; border: 0; border-radius: 0; overflow: visible; }
.hud-stats .stat b { font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.hud-stats .xpbar { flex: 1 1 80px; min-width: 40px; max-width: 160px; height: 8px; }
.hud-stats .xpbar > div { background: var(--leaf); }
.hud-mode { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15px; color: var(--cl-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-mode:empty { display: none; }
.hud-progress { height: 4px; margin: 0 -14px; background: var(--line); }
.hud-progress > div { height: 100%; width: 0; background: var(--leaf); transition: width 600ms ease; }
/* A look back's own number is on the second line ("Quick look back 2 of 3 · Biology"): not the topic's (R-03). */
.hud.in-look-back .stat.sections, .hud.in-look-back .xpbar { display: none; }
@container hud (max-width: 640px) {
  .sun-label, .hud-stats .xpbar { display: none; }
}
.hud-stats .stat.fit-hidden { display: none; }
@container hud (max-width: 420px) {
  .hud { padding-left: 10px; padding-right: 10px; }
  .hud-row { gap: 4px; }
  .hud-actions { gap: 3px; }
  .hud-btn { min-width: 46px; padding: 3px 4px; }
  .hud-back { font-size: 15px; padding-right: 4px; }
  .hud .sun-timer { width: 32px; height: 32px; }
  .hud-stats { gap: 7px; font-size: 15px; }
  .hud-stats .stat { gap: 1px; }
  .hud-stats .stat.best, .hud-stats .xpbar { display: none; }
  .hud-progress { margin: 0 -10px; }
}
/* On a break the bar does not count down, you can't take a break from a break, and Help rests (K-28). */
body.on-break .hud-sun, body.on-break #btn-break, body.on-break #btn-help { display: none; }
.btn-quiet {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 8px 14px; min-height: 44px; font-size: 15px; cursor: pointer;
}

/* The sun timer: a Time-Timer style disk that fills as time passes on a screen. */
.sun-timer { width: 40px; height: 40px; flex: none; }
.sun-timer svg, .big-timer svg { width: 100%; height: 100%; display: block; }
@keyframes sun-pulse { 50% { transform: scale(1.12); } }

/* ---------- layout ---------- */
.app { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 16px 120px; outline: none; }
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--paper);  /* solid: nothing half-shows through it (ADHD #12) */
  border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(11, 74, 120, 0.06);
  display: flex; gap: 10px; justify-content: center;
}
.actionbar > * { flex: 1; max-width: 360px; }

.btn {
  min-height: 54px; border-radius: var(--radius-sm); border: 2px solid transparent; padding: 10px 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 19px; cursor: pointer; background: var(--leaf); color: #fff;
  touch-action: manipulation;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--sky); border-color: var(--line-strong); }
.btn.sun { background: var(--sky); color: #fff; }  /* the Topic check: navy primary, apart from green study */

.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; }
.stack > * + * { margin-top: 14px; }
.muted { color: var(--ink-soft); }
.small { font-size: 15px; }
h1 { font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.15; margin: 4px 0 8px; letter-spacing: -0.01em; }
h2 { font-family: var(--font-head); font-weight: 700; font-size: 23px; line-height: 1.25; margin: 0 0 6px; }
h3 { font-family: var(--font-head); font-weight: 700; }
.topic { font-size: 15px; color: #155D2E; font-weight: 700; margin: 0 0 4px; }

/* ---------- media ---------- */
/* A transparent frame (R2-A25): no grey boxes beside a picture narrower than its column. */
.media { border-radius: var(--radius-sm); overflow: hidden; background: transparent; }
.media img, .media video { display: block; width: 100%; height: auto; max-height: 42vh; object-fit: contain; background: transparent; }
.visual { width: 100%; }
.visual svg { display: block; width: 100%; height: auto; max-height: 52vh; }

/* ---------- profile screens ---------- */
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.profile {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px;
  border-radius: var(--radius-lg); border: 2px solid var(--line); background: var(--surface); cursor: pointer; min-height: 130px;
}
.profile .avatar { font-size: 46px; line-height: 1; }
.profile.add { border-style: dashed; color: var(--ink-soft); }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.avatars button { font-size: 32px; width: 58px; height: 58px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; }
.avatars button[aria-pressed="true"] { border-color: var(--leaf); background: var(--leaf-wash); }
.field { display: grid; gap: 6px; }
.field input, textarea {
  border: 2px solid var(--line-strong); border-radius: 8px; padding: 12px 14px; background: var(--surface); min-height: 52px; width: 100%;
  font-weight: 500;
}
.field input:focus, textarea:focus { border-color: var(--sky); }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 10px 0 18px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-soft); }
.pin-dots span.on { background: var(--sky); border-color: var(--sky); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; }
.pinpad button { min-height: 64px; font-size: 26px; font-weight: 700; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; touch-action: manipulation; }
.error { color: var(--amber); font-weight: 700; min-height: 1.5em; }

/* ---------- topic map (home + quest) ---------- */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.topic-chip { display: flex; gap: 8px; align-items: center; font-size: 15px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-strong); }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--line); }
.dot.learning { background: var(--sky); }
.dot.review { background: var(--amber); }
.dot.known { background: #C9DCC7; }
.dot.mastered { background: var(--leaf); }

/* ---------- questions ---------- */
.prompt { font-size: 21px; font-weight: 600; line-height: 1.35; margin: 0; }
.choices { display: grid; gap: 10px; }
.choice {
  text-align: left; min-height: 56px; padding: 12px 16px; border-radius: var(--radius-sm); border: 2px solid var(--line-strong);
  background: var(--surface); cursor: pointer; font-size: 18px; font-weight: 500; touch-action: manipulation;
}
.choice[aria-pressed="true"] { border-color: var(--sky); background: #D7EAF7; }
.choice.is-correct { border-color: var(--good); background: var(--good-wash); }
.choice.is-review { border-color: var(--amber); background: var(--amber-wash); }
.tf { grid-template-columns: 1fr 1fr; }
.tf .choice { text-align: center; font-weight: 700; }
.fill-input { font-size: 22px; }

/* Compact rows (48px for one line) so six steps fit on a Chromebook screen without scrolling the list. */
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.order-item {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; min-height: 48px;
  padding: 3px 4px 3px 8px; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--surface);
  font-size: 17px; line-height: 1.25; cursor: pointer;
}
.order-item.picked { border-color: var(--sky); }
.order-item .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf-wash); font-weight: 700; font-size: 14px; }
.order-item .moves { display: flex; gap: 4px; }
.order-item .moves button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--paper); font-size: 16px; cursor: pointer; }
.order-item .mark { width: 38px; text-align: center; font-size: 20px; font-weight: 700; color: var(--good); }
.order-item.is-correct { border-color: var(--good); background: var(--good-wash); }
.order-item.is-review { border-color: var(--amber); background: var(--amber-wash); }

.tray { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 14px; background: var(--paper); border: 1px dashed var(--line-strong); min-height: 62px; }
.chip {
  min-height: 46px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--surface);
  cursor: grab; font-size: 17px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.chip.selected { border-color: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 25%, transparent); }
.chip.dragging { opacity: 0.85; position: fixed; z-index: 50; pointer-events: none; }
.chip.placed { border-color: var(--ink-soft); }
.buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bucket { border: 2px dashed var(--line-strong); border-radius: 16px; padding: 10px; min-height: 110px; background: var(--surface); cursor: pointer; }
.bucket h3 { font-size: 16px; margin: 0 0 8px; }
.bucket .items { display: flex; flex-wrap: wrap; gap: 6px; }
.bucket.target-ready { border-color: var(--sky); }
.chip.is-correct { border-color: var(--good); background: var(--good-wash); }
.chip.is-review { border-color: var(--amber); background: var(--amber-wash); }

.equation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; }
.slot {
  min-width: 92px; min-height: 52px; padding: 6px 10px; border-radius: 12px; border: 2px dashed var(--line-strong);
  display: grid; place-items: center; background: var(--surface); cursor: pointer; font-weight: 700; font-size: 18px;
}
.slot.filled { border-style: solid; border-color: var(--leaf); }
.slot.is-correct { border-color: var(--good); background: var(--good-wash); }
.slot.is-review { border-color: var(--amber); background: var(--amber-wash); }
.eq-op { font-size: 24px; font-weight: 700; }
.eq-side { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }  /* "_ + _" never splits */
.eq-arrow { display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 4px; }
.eq-arrow .shaft { font-size: 30px; line-height: 1; }
.eq-arrow .slot { min-width: 104px; min-height: 44px; font-size: 15px; }

.sg-slot { cursor: pointer; }

/* ---------- confidence + result ---------- */
.confidence { display: flex; gap: 10px; width: 100%; max-width: 560px !important; }
.confidence .btn { flex: 1; }
.result { border-radius: var(--radius-lg); padding: 16px; border: 2px solid; }
.result.good { border-color: var(--good); background: var(--good-wash); }
.result.amber { border-color: var(--amber); background: var(--amber-wash); }
.result h2 { display: flex; align-items: center; gap: 8px; }
.result .answer { font-weight: 700; }
.result .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.explain-box { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }

/* ---------- section start / finish, choice after a tough run, recap ---------- */
.section-card h1, .stuck-card h1 { margin: 0; }
.parts-list { margin: 0; padding-left: 22px; font-size: 19px; display: grid; gap: 6px; }
.section-card.finish { text-align: center; }
.section-card.finish .parts-list { display: inline-grid; text-align: left; max-width: 560px; }
.big-emoji { font-size: 52px; margin: 0; line-height: 1; }
.recap { display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; background: #EAF3E9; font-size: 18px; }
.recap p { margin: 0; }
.recap .recap-next { font-weight: 700; margin-top: 4px; }
.kid-note textarea { font-size: 18px; }

/* ---------- learn cards ---------- */
.learn-dots { display: flex; gap: 6px; justify-content: center; }
.learn-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); opacity: 0.35; }
.learn-dots span.on { background: var(--leaf); opacity: 1; }
.learn-body p { margin: 0 0 8px; font-size: 19px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--leaf-wash); color: var(--ink); }

/* ---------- break / rating ---------- */
.center { text-align: center; }
.big-timer { width: 180px; height: 180px; margin: 10px auto; }
.faces { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.faces button { font-size: 38px; width: 64px; height: 64px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; }

/* ---------- strategy HUDs ---------- */
.xpbar { flex: 1; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; min-width: 40px; }
.xpbar > div { height: 100%; background: var(--leaf); transition: width 400ms ease; }
.calm-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.calm-bar > div { height: 100%; background: var(--leaf); transition: width 600ms ease; }
/* A toast sits just under the top bar, never over the result being read (R2-A24). */
.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 112px); transform: translateX(-50%); z-index: 40; pointer-events: none;
  width: max-content; max-width: calc(100vw - 32px); text-align: center;
  background: var(--cl-navy); color: var(--cl-cream); padding: 10px 18px; border-radius: 18px; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.boss { border: 2px solid var(--sky); background: #EEF5FB; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 15px; }

@media (min-width: 900px) {
  .app { padding-top: 24px; }
}
@media (max-width: 420px) {
  body { font-size: 17px; }
  .hud { padding-left: 10px; padding-right: 10px; }
  .btn-quiet { padding: 6px 10px; font-size: 14px; }
  h1 { font-size: 26px; }
  .prompt { font-size: 19px; }
  .order-item { font-size: 15px; grid-template-columns: 28px 1fr auto; }
  .order-item .moves button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Chromebook / laptop (primary device): picture left, words right ---------- */
@media (min-width: 1000px) {
  .app { max-width: 1180px; padding: 20px 28px 110px; }
  .app > .card:not(.split) { max-width: 820px; margin-left: auto; margin-right: auto; }
  .card.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .card.split > .split-media { position: sticky; top: 76px; }
  .card.split > .split-media .visual svg { max-height: calc(100vh - 220px); }
  .card.split > .split-media .media img { max-height: calc(100vh - 240px); }
  .card.split.label-q { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .kbd-hint { display: inline; }
  h1 { font-size: 32px; }
  .prompt { font-size: 22px; }
}
.kbd-hint { display: none; font-size: 14px; color: var(--ink-soft); margin-left: 6px; }
.choice .key { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; margin-right: 10px; color: var(--ink-soft); }
@media (max-width: 999px) { .choice .key { display: none; } }

/* ---------- UX review fixes ---------- */
.result { scroll-margin-bottom: 110px; }
.confidence { align-items: center; flex-wrap: wrap; }
.confidence-q { width: 100%; text-align: center; font-weight: 700; font-size: 16px; margin-bottom: 2px; }
@media (min-width: 1000px) { .confidence-q { width: auto; margin: 0 6px 0 0; } }
.card.split.label-q .split-media .visual svg { max-height: calc(100vh - 170px) !important; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dot { border: 1px solid rgba(0, 0, 0, 0.12); }
.dot.review { background: var(--amber); }
.topic-chip { cursor: default; }
.faces button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 76px; width: 70px; gap: 2px; }
.faces button small { font-size: 14px; color: var(--ink-soft); }
.faces button .ico { width: 36px; height: 36px; color: var(--sky); }
.faces button:hover { background: #EEF5FB; border-color: var(--sky); }
.has-selection [data-slot]:not(.tray):not(svg *) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 35%, transparent); }
.read-btn.playing { border-color: var(--sky); }

/* =================== App shell (sign-in, classes, topics) =================== */
:root {
  --bg: var(--cl-cream);
  --brand: var(--cl-navy);
  --brand-wash: var(--cl-sky-light);
  --shell-ink: var(--cl-text);
  --shell-soft: var(--cl-muted);
  --shell-line: var(--cl-line);
}
body.shell { background: var(--bg); color: var(--shell-ink); }
body.shell .app { max-width: 1080px; padding-top: 28px; }
.appbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 16px; background: var(--cl-cream); border-bottom: 1px solid var(--shell-line);
}
/* The logo PNG has the cream baked in: it only ever sits on opaque cream. Clear space is the link's padding; the
   image gets no filter, shadow, radius, transform or animation. */
.brand { display: inline-flex; align-items: center; padding: 8px; color: var(--shell-ink); text-decoration: none; }
.brand img { height: 32px; width: auto; display: block; }
.brand small { font-size: 14px; color: var(--shell-soft); }
.appbar-right { display: flex; align-items: center; gap: 12px; }
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.who .av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-wash); font-size: 18px; }

/* sign-in */
.signin { display: grid; grid-template-columns: 1fr 1.1fr; max-width: 940px; margin: 4vh auto 0; background: var(--surface);
  border: 1px solid var(--shell-line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.signin-brand { background: var(--cl-cream); color: var(--ink); padding: 40px 36px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--shell-line); }
.signin-brand .cl-logo { width: 240px; max-width: 100%; height: auto; display: block; }  /* scales, never crops or stretches */
.signin-brand h1 { color: var(--cl-navy); font-size: 32px; line-height: 1.15; margin: 8px 0 0; }
.signin-brand p { margin: 0; color: var(--ink); }
.signin-brand ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.signin-brand li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; font-size: 16px; }
.signin-brand li span:first-child { width: 34px; height: 34px; border-radius: 10px; background: #EEF5FB; display: grid; place-items: center; }
.signin-panel { padding: 36px; display: flex; flex-direction: column; gap: 14px; min-height: 460px; }
.signin-panel h2 { font-size: 24px; margin: 0; }
.people { display: grid; gap: 8px; }
.person { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer; text-align: left; min-height: 60px; }
.person:hover { border-color: var(--brand); background: #EEF5FB; }
.person .av { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-wash); display: grid; place-items: center; font-size: 24px; }
.person strong { font-size: 17px; }
.person .chev { color: var(--shell-soft); font-size: 20px; }
.parent-row .av .ico { width: 24px; height: 24px; color: var(--cl-navy); }
.linkish { background: none; border: 0; color: var(--brand); font-weight: 700; cursor: pointer; padding: 8px 0; text-align: left; min-height: 44px; }
.signin-panel .pinpad button { background: var(--surface); }
.signin-panel .pin-dots span.on { background: var(--brand); border-color: var(--brand); }

/* pages */
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--shell-soft); margin: -8px 0 0; flex-wrap: wrap; }
.crumbs a { color: var(--brand); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 30px; }
@media (min-width: 1000px) { .page-head h1 { font-size: 32px; } }
.page-head .sub { color: var(--shell-soft); margin: 2px 0 0; }
.chip-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; flex: none; }
.section-title { font-size: 18px; margin: 28px 0 12px; }
.upnext { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--surface);
  border: 1px solid var(--shell-line); border-radius: 16px; padding: 20px 22px; }
.upnext .label { font-size: 14px; font-weight: 700; color: var(--brand); }
.upnext h2 { margin: 2px 0; font-size: 22px; }
.upnext p { margin: 0; color: var(--shell-soft); }
.upnext .upnext-section { color: var(--shell-ink); font-weight: 700; font-size: 17px; margin-top: 6px; }
.upnext .upnext-meta { margin-top: 4px; font-size: 15px; }
.upnext .btn { min-width: 150px; font-size: 18px; }
.week-line { margin: 14px 2px 0; font-weight: 700; color: var(--shell-ink); }
.see-all { display: block; margin-top: 18px; }
.home-more[hidden] { display: none; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px; }
.course { background: var(--surface); border: 1px solid var(--shell-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column;
  gap: 10px; cursor: pointer; text-align: left; min-height: 170px; transition: border-color 0.15s, box-shadow 0.15s; }
.course:hover { border-color: var(--c, var(--brand)); box-shadow: var(--shadow); }
.course h3 { margin: 0; font-size: 19px; }
.course .teacher { color: var(--shell-soft); font-size: 14px; margin: 0; }
.course .meta { margin-top: auto; font-size: 14px; color: var(--shell-soft); }
.course.empty { cursor: default; }
.course.empty:hover { border-color: var(--shell-line); box-shadow: none; }
.bar { height: 8px; border-radius: 999px; background: var(--shell-line); overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; background: var(--cl-navy); }
.bar.done > div { background: var(--leaf); }
/* Topic cards sit in one list (.topic-list) whose gap keeps them apart: the cards used to be bare siblings in the page
   with no margin of their own, so their borders touched (founder, 2026-11-08: "all cards stick together"). */
.topic-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 18px 20px; box-shadow: 0 1px 2px rgba(11, 74, 120, 0.06); }
.topic-card h2 { margin: 0; font-size: 22px; }
.topic-card p { margin: 0; color: var(--shell-soft); }
.empty-state { background: var(--surface); border: 1px dashed var(--shell-line); border-radius: 16px; padding: 28px; color: var(--shell-soft); }
.hub { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.hub-side { background: var(--surface); border: 1px solid var(--shell-line); border-radius: 16px; padding: 22px; display: grid; gap: 14px; justify-items: center; text-align: center; position: sticky; top: 84px; }
/* A tablet from 760 px keeps the two columns (R2-A32); a phone is one column. */
@media (max-width: 999px) { .hub { grid-template-columns: 280px minmax(0, 1fr); } }
/* An open practice list makes the side taller than the screen: it scrolls with the page then (never stuck half off). */
.hub-side:has(.practice-again.is-open) { position: static; }
@media (max-width: 759px) { .hub { grid-template-columns: minmax(0, 1fr); } .hub-side { position: static; } }
.hub-side .btn { width: 100%; }
.ring-label { font-size: 15px; color: var(--shell-soft); margin: -6px 0 0; }
.sections { background: var(--surface); border: 1px solid var(--shell-line); border-radius: 16px; overflow: hidden; }
.sections ol { list-style: none; margin: 0; padding: 0; }
.sections li { border-top: 1px solid var(--shell-line); }
.sec-row { display: grid; grid-template-columns: 32px 1fr auto 14px; gap: 12px; align-items: center; width: 100%; min-height: 52px; padding: 12px 18px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.sec-row:hover, .sec-row:focus-visible { background: var(--bg); }
.sec-row:disabled { cursor: default; background: none; }
.sec-row .chev { color: var(--shell-soft); font-size: 20px; }
.sec-row { grid-template-columns: 32px 1fr auto auto; }
.sec-row .go { font-weight: 700; color: var(--brand); white-space: nowrap; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.sec-row:disabled .go { color: var(--shell-soft); }
.pill .pill-short { display: none; }
/* Phones: the status pill stays, small and short ("Knew it", "Shaky"), on its own line under the section title. */
@media (max-width: 520px) {
  .sec-row { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "n t go" "n p go"; row-gap: 4px; column-gap: 10px; padding: 10px 12px; }
  .sec-row > :nth-child(1) { grid-area: n; }
  .sec-row > :nth-child(2) { grid-area: t; min-width: 0; overflow-wrap: anywhere; }
  .sec-row > .pill { grid-area: p; justify-self: start; font-size: 14px; padding: 1px 8px; }
  .sec-row > .go { grid-area: go; padding: 6px 10px; }
  .pill .pill-long { display: none; }
  .pill .pill-short { display: inline; }
}
.sec-tip { margin: 0; padding: 10px 18px; border-top: 1px solid var(--shell-line); }
.sections li:first-child { border-top: 0; }
.sections .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--bg); color: var(--shell-soft); }
.pill { font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill.new { background: var(--cl-stone); color: #4B5563; }
.pill.learning { background: var(--cl-sky); color: var(--cl-navy); }
.pill.review { background: var(--cl-amber-wash); color: #7A4D00; }
.pill.known { background: var(--cl-sage); color: var(--cl-text); }
.pill.mastered { background: var(--cl-green); color: var(--cl-white); }
body.shell .btn { background: var(--leaf); }
body.shell .btn.secondary { background: var(--surface); color: var(--sky); border-color: var(--line-strong); }
body.shell .btn.sun { background: var(--sky); color: #fff; }
@media (max-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .signin-brand { padding: 24px; }
  .signin-brand ul { display: none; }
  .upnext { grid-template-columns: 1fr; }
  .topic-card { grid-template-columns: 1fr; }
  .appbar { padding: 2px 8px; }
  .brand small { display: none; }
}

/* =================== Ask the tutor =================== */
.btn-ask {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--cl-navy); background: #EEF5FB; color: var(--cl-navy); font: inherit; font-size: 15px;
  font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn-ask:hover, .btn-ask[aria-expanded="true"] { background: var(--brand); color: #fff; }
.btn-ask[hidden] { display: none; }
.ask-panel {
  position: fixed; z-index: 40; right: 0; top: 0; bottom: 0; width: 400px; max-width: 100vw;
  display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(11, 74, 120, 0.10);
}
.ask-panel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ask-head h2 { margin: 0; font-size: 22px; font-family: var(--font-head); }
.ask-intro { margin: 0; color: var(--ink-soft); }
.ask-thread { flex: 1; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.ask-msg { max-width: 92%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; font-size: calc(17px * var(--ask-scale, 1)); }
.ask-msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ask-msg.tutor { align-self: flex-start; background: var(--brand-wash); border-bottom-left-radius: 4px; }
.ask-msg.note { align-self: flex-start; background: var(--amber-wash); border-bottom-left-radius: 4px; }
.ask-msg.care { align-self: flex-start; background: var(--good-wash); border: 2px solid var(--good); }
.ask-msg.thinking { color: var(--ink-soft); font-style: italic; }
.ask-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-quick .chip { font-size: 15px; min-height: 44px; cursor: pointer; color: var(--sky); font-weight: 700; }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 17px;
  border: 2px solid var(--line-strong); border-radius: 8px; }
.ask-form input:focus { border-color: var(--brand); }
.ask-form .btn { background: var(--leaf); min-width: 84px; }
.ask-note { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* the AI line: on the question card only once the kid has asked (the calm study screen gains nothing before that) */
.ask-inline .ask-thread:empty + .ask-ai-note { display: none; }
@media (min-width: 1100px) {
  body.ask-open { padding-right: 400px; }  /* the lesson moves left so the panel never covers it */
  body.ask-open .actionbar { right: 400px; }
}
@media (max-width: 1099px) {
  .ask-panel { top: auto; left: 0; width: auto; max-height: 72vh; border-left: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0; box-shadow: 0 -12px 32px rgba(11, 74, 120, 0.12); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* 2026-11-08 (Evanna, MacBook with a bookmarks bar): the conversation is the flexible part of the panel. After the
   first ask the suggestions fold into "More ideas ›" and the intro steps out, so a 4-sentence reply reads whole. */
.ask-panel .ask-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; }
.ask-panel.has-msgs .ask-thread { min-height: 55%; }
.ask-panel.has-msgs .ask-intro { display: none; }
@media (max-width: 1099px) {  /* a phone or a small laptop: once there is a reply, the sheet grows to hold it */
  .ask-panel.has-msgs { max-height: 88vh; }
}
.ask-panel .ask-msg.tutor, .ask-panel .ask-msg.note, .ask-panel .ask-msg.care {
  max-width: 100%; font-size: calc(19px * var(--ask-scale, 1)); line-height: 1.5; }
.ask-more { display: none; }
.ask-panel.has-msgs .ask-more { display: inline-flex; align-self: flex-start; min-height: 40px; padding: 4px 10px;
  font-size: 15px; font-weight: 700; color: var(--sky); }
.ask-panel.has-msgs .ask-quick:not(.open) { display: none; }
.ask-panel.has-msgs.ideas-open .ask-thread { min-height: 0; }
.ask-panel.has-msgs .ask-quick.open .chip { min-height: 40px; font-size: 14px; }
.ask-panel .ask-quick { flex: none; }
.ask-info { flex: none; }
.ask-info summary { cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; gap: 4px; }
.ask-info summary::-webkit-details-marker { display: none; }
.ask-info-mark { font-size: 16px; color: var(--sky); }
.ask-info[open] .ask-note + .ask-note, .ask-info[open] summary + .ask-note { margin-top: 4px; }
.ask-listen { margin-top: 6px; min-height: 40px; padding: 4px 10px; font-size: 15px; font-weight: 700; color: var(--sky); }
.ask-listen .ico { width: 18px; height: 18px; }

/* parent sign-in on the shared sign-in screen */
.signin-divider { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--shell-line); font-size: 14px; font-weight: 700; color: var(--shell-soft); }

/* Label questions on a picture: the app places the boxes; the picture itself has no words. */
.hotspot-fig { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
.hotspot-fig img { width: 100%; display: block; border-radius: 12px; }
.hotspot-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255,255,255,.8); pointer-events: none; }
.slot.hotspot-slot { position: absolute; transform: translate(-50%, calc(-100% - 12px)); min-width: 88px; min-height: 36px;
  padding: 4px 8px; font-size: 14px; background: rgba(255,255,255,.94); white-space: nowrap; z-index: 1; }
.slot.hotspot-slot.hs-left { transform: translate(calc(-100% - 12px), -50%); }
.slot.hotspot-slot.hs-right { transform: translate(12px, -50%); }
.slot.hotspot-slot.is-correct { background: var(--good-wash); }
.slot.hotspot-slot.is-review { background: var(--amber-wash); }

.test-badge { display: inline-block; margin: 4px 0 2px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: var(--amber-wash); color: #7A4D00; }
.test-badge.soon { border: 2px solid var(--amber); padding: 1px 8px; }  /* the test is 3 days away or less */

/* Badges */
/* A new badge sits in the page just above the button bar (never over it: every button stays tappable), fixed width,
   full width on a phone; the page gets room below so nothing hides behind it. */
.badge-pop { position: fixed; left: 50%; bottom: calc(var(--bar-h, 0px) + 8px); transform: translateX(-50%); z-index: 9;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--cl-cream); border: 2px solid var(--leaf);
  border-radius: 16px; box-shadow: 0 -6px 22px rgba(11, 74, 120, .12); width: 460px; max-width: calc(100vw - 20px);
  animation: badge-in .35s ease-out; }
body.badge-showing .app { padding-bottom: calc(var(--bar-h, 80px) + var(--badge-h, 90px) + 32px); }
@media (max-width: 600px) { .badge-pop { width: auto; left: 10px; right: 10px; transform: none; animation: none; } }
.badge-quiet { margin: 14px auto 0; max-width: 820px; font-size: 15px; font-weight: 700; color: var(--ink-soft); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.badge-inline { margin-top: 14px; padding: 10px 14px; border-radius: 14px; background: var(--leaf-wash); display: grid; gap: 6px; }
.badge-inline-row { margin: 0; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.badge-inline-row .badge-pop-icon { display: inline-flex; }
.badge-pop.leaving { opacity: 0; transition: opacity .25s; }
.badge-pop-icon { display: flex; gap: 4px; line-height: 1; flex: none; }
.badge-pop-label { font-size: 14px; font-weight: 700; color: var(--leaf-deep); }
.badge-pop-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--ink); }
.badge-pop-text { font-size: 14px; color: var(--ink-soft); }
.badge-pop-ok { margin-left: auto; border: 2px solid var(--leaf); border-radius: 12px; padding: 8px 14px; font: inherit;
  font-family: var(--font-head); font-weight: 700; background: var(--leaf-wash); color: var(--leaf-deep); cursor: pointer; min-height: 44px; min-width: 44px;
  flex: none; white-space: nowrap; }
@keyframes badge-in { from { transform: translate(-50%, 12px) scale(.96); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .badge-pop { animation: none; } }
.badge-shelf { margin-top: 28px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; }
.badge-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; padding: 12px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-align: center; box-shadow: var(--shadow); }
.badge-icon { display: inline-flex; line-height: 1; }
.badge-name { font-size: 14px; font-weight: 700; line-height: 1.25; }
.badge-how { font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.badge-tile.locked { background: var(--paper); border: 1px dashed var(--line-strong); box-shadow: none; }

/* Badge medals (icons.js badgeMedal): earned = a green medal with a cream glyph and a sage rim; not yet earned = an
   outlined medal with a muted glyph. Same shape at every size (shelf 48px, pop-up 48px, finish card 32px, line 22px). */
.medal { display: inline-block; flex: none; vertical-align: middle; }
.medal .medal-disc { fill: var(--leaf); stroke: var(--cl-sage); stroke-width: 2; }
.medal .medal-glyph { color: var(--cl-cream); }
.medal.locked .medal-disc { fill: var(--surface); stroke: var(--line-strong); stroke-dasharray: 3 2.4; }
.medal.locked .medal-glyph { color: var(--ink-soft); }

.num-row { display: flex; align-items: center; gap: 10px; }
.num-row .fill-input { max-width: 220px; font-variant-numeric: tabular-nums; }
.num-unit { font-size: 18px; font-weight: 700; color: var(--ink); }

.paste-note { color: var(--amber); margin-top: 6px; font-weight: 600; }
.paste-note[hidden] { display: none; }

/* A diagram shown next to a question: words and controls hidden so it never shows the answer */
.sg-quiet svg text, .sg-quiet svg tspan { display: none; }
.sg-quiet > :not(svg) { display: none !important; }
.sg-quiet svg { pointer-events: none; }
.tray:empty { display: none; }  /* everything placed: no empty dashed box */
.chip { max-width: 100%; }
.tappable { cursor: pointer; }  /* the whole card opens the topic */
.tappable:hover { border-color: var(--c, var(--brand)); }
.topic-row .n { background: none; font-size: 20px; }
.topic-row .pill.learning { background: var(--bg); color: var(--shell-soft); }
.ask-inline { border-top: 1px dashed var(--shell-line); padding-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ask-inline-head { margin: 0; font-weight: 700; color: var(--brand); }
.ask-inline.under-bar { border-top-color: transparent; }  /* r6 ADHD #4: nothing of it ghosts under the bar's fade */
.ask-inline .ask-thread { display: flex; flex-direction: column; gap: 8px; }
.ask-inline .ask-thread:empty { display: none; }
.ask-inline .ask-msg p { margin: 0; }
.ask-inline .ask-form { display: flex; gap: 8px; }
.ask-inline .ask-form input { flex: 1; min-width: 0; min-height: 44px; font: inherit; padding: 8px 12px; border: 2px solid var(--line-strong); border-radius: 8px; }
.ask-inline .ask-msg.tutor { max-width: 100%; }
.ask-pic { margin-top: 10px; background: var(--surface); border-radius: 12px; padding: 8px; }
.ask-pic .visual, .ask-pic .media { max-width: 420px; margin: 0 auto; }
.ask-pic img, .ask-pic video { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.ask-pic > p { margin: 6px 0 0; text-align: center; }

/* tutor chat: text size, read aloud, pictures and files */
.ask-size { display: flex; gap: 4px; margin-left: auto; }
.ask-size .btn-quiet { min-width: 44px; min-height: 44px; font-weight: 700; }
.ask-size .btn-quiet:disabled { opacity: 0.4; }
.ask-inline-top { display: flex; align-items: center; gap: 8px; }
.ask-inline:not(.has-msgs) .ask-size { display: none; }  /* only once there is something to read */
.ask-msg p { margin: 0; }
.ask-msg p + p { margin-top: 6px; }
.ask-thumb { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; }
.ask-msg.me .ask-thumb { background: #fff; }
.ask-compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-radius: 14px; }
.ask-compose .ask-form .btn { min-width: 72px; }
.ask-compose[hidden] { display: none; }
.ask-compose.drop { outline: 3px dashed var(--brand); outline-offset: 4px; }
.ask-form input, .ask-inline .ask-form input { font-size: calc(17px * var(--ask-scale, 1)); }
.ask-attach { min-width: 48px; font-size: 22px; padding: 0 8px; color: var(--sky); }
.ask-attach .ico { width: 24px; height: 24px; }
.ask-tray { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: var(--surface); font-size: 15px; }
.ask-tray .ask-thumb { max-height: 64px; max-width: 96px; }
.ask-tray-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-tray.err { border-color: var(--amber); background: var(--amber-wash); }

/* A lesson card or question whose picture is missing (not made yet, or failed to load) uses the plain
   one-column card instead of leaving the left half blank. */
.card.split:not(:has(.split-media .media, .split-media .visual, .split-media .punnett-fb)) { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }
.card.split:not(:has(.split-media .media, .split-media .visual, .split-media .punnett-fb)) > .split-media { display: none; }

/* The top bar's words for the sun: "Break in 7 min" (hidden when the bar is narrow). */
.sun-label { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--ink); }

/* 12 digits in four groups ("482 917 360 551") fit a 390 px phone: the size follows the screen up to 28 px */
.setup-code { width: 100%; min-width: 0; font-size: clamp(18px, 6vw, 28px); letter-spacing: 1px; text-align: center; font-weight: 700; padding: 12px 8px; border: 2px solid var(--line-strong); border-radius: 8px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.setup-code:focus { border-color: var(--brand); }

/* The end screen after a face, the rubric's "Also say …" lines, and the read-aloud button while reading. */
.thanks { font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.also-say { margin: 6px 0; font-weight: 700; }
.read-btn.playing { border-color: var(--sky); background: #D7EAF7; font-weight: 700; }

/* A format hint after Check ("Almost — Write it as a fraction."): calm, at the question, not a miss. */
.nudge { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #EEF5FB; border: 2px solid var(--sky);
  font-weight: 700; }
/* The tutor's kind reply when the kid's own words asked for help (same look as the tutor's "care" message). */
.care-note { padding: 14px 16px; border-radius: 16px; background: var(--good-wash); border: 2px solid var(--good); line-height: 1.5; }

/* Quick rounds: the round's score on the round-done screen; HUD words beside the numbers when the bar has room. */
.round-score { font-size: 22px; font-weight: 700; margin: 0; }
.hud-stats .stat-word { font-weight: 400; color: var(--ink-soft); }
@container hud (max-width: 640px) { .hud-stats .stat-word:not(.keep) { display: none; } }

/* Home: the Topic check as a second choice on the Up-next card, or when it opens. */
.upnext-actions { display: grid; gap: 8px; }
.upnext .upnext-test { margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--shell-ink); }
.topic-row .topic-test { display: block; }

/* A right answer moves (not in Calm; the reduced-motion rule turns all of it off): the star counter bumps, the
   feedback fades in. A streak that ends is said kindly. Home shows the star total beside the week line. */
@keyframes star-bump { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.hud-stats .stat.points.bump { animation: star-bump 300ms ease-out 1; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.result.fade-in { animation: fade-in 250ms ease-out 1; }
.streak-end { margin: 8px 0 0; font-weight: 700; }
.week-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 14px 2px 0; }
.week-row .week-line { margin: 0; }
.home-stars { font-weight: 700; font-size: 17px; white-space: nowrap; }

/* A quick-check miss: neutral, not amber (it counts for nothing). */
.result.neutral { border-color: var(--line); background: var(--surface); }
.checkin-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--leaf-wash); font-weight: 700; }

/* Finished-section words: Solid (proved on a later day) and shaky (amber). */
.pill.solid { background: var(--cl-sage-light); color: var(--cl-green-deep); }
.pill.shaky { background: var(--amber-wash); color: #7A4D00; }

/* Two-part labels ("Check — I'm sure") stay on one line on a phone. */
@media (max-width: 440px) { .actionbar .btn { font-size: 16px; padding-left: 8px; padding-right: 8px; } }

/* The quick check's "I haven't learned this — teach me" takes its own row on a phone, above the two Check buttons. */
@media (max-width: 600px) { .actionbar { flex-wrap: wrap; } .actionbar > .teach-me { flex-basis: 100%; max-width: none; min-height: 44px; } }

/* "Stop the check — study instead" with its one-line warning (Home card and topic page). */
.stop-note { margin: 0; font-size: 14px; }

/* Room under the page for the button bar (it grows when the quick check adds a row), so no drop box or text hides
   behind it. A phone's "Stuck? Ask the tutor" hint sits under the card. Folded sentence starters for older students. */
/* r4 ADHD #7: the bar's fade (28px above it) counts too, so the last line (the tutor's hint row) clears it whole. */
.app { padding-bottom: calc(var(--bar-h, 96px) + 28px + 32px); }
.bucket { scroll-margin-bottom: calc(var(--bar-h, 96px) + 24px); }
.ask-hint { margin: 12px auto 0; max-width: 820px; padding: 10px 14px; border-radius: 12px; background: var(--leaf-wash); font-weight: 700; font-size: 15px; }
.starters summary { cursor: pointer; font-weight: 700; }

/* "Looks like you…": the mistake named, calm (ink on a light panel, no red). */
.thought-line { margin: 6px 0 8px; padding: 8px 12px; border-left: 4px solid var(--sky); background: var(--surface); border-radius: 8px; font-weight: 700; }

/* A tutor reply scrolled into view stops above the button bar and below the top bar. */
.ask-msg { scroll-margin-top: 96px; scroll-margin-bottom: calc(var(--bar-h, 96px) + 16px); }

/* "Questions to practice again": compact, three shown until "Show all"; the kid's answer neutral, the answer green. */
.practice-again { margin-bottom: 16px; scroll-margin-top: 84px; }
.practice-again h2 { margin: 0; font-size: 20px; }
.pa-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pa-item { min-width: 0; overflow: hidden; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pa-item p { margin: 0; font-size: 16px; }
.pa-q { font-weight: 700; overflow-wrap: anywhere; }  /* every question reads in full (R2-A16) */
.pa-yours { color: var(--ink-soft); }
.pa-right { color: var(--good); font-weight: 700; }
.pa-label { font-weight: 400; }
.pa-more { display: none; }
.practice-again.pa-open .pa-more { display: block; }
.practice-again .btn { width: 100%; max-width: 360px; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 12px; }  /* "Show all (4)" and "Practice these" stand apart */
.pa-reveal { min-height: 40px; padding: 4px 0; font-size: 15px; }
/* Each link on its own line, a full tap tall (r2: "Add the date ›8 questions to practice again ›" ran together). */
.upnext .upnext-again { display: flex; width: fit-content; align-items: center; min-height: 44px; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--brand); text-decoration: none; }

/* ---------- CedarLearn icon family (public/js/icons.js) ---------- */
/* One stroke family: 24px grid, 2px round strokes, currentColor. Each place sets the color; sizes follow the text. */
.ico { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -0.22em; }
.hud-btn .ico { width: 22px; height: 22px; }
.hud-stats .stat.sections .ico { color: var(--sky); }
.hud-stats .stat.points .ico { color: var(--leaf); }
.hud-stats .stat.streak .ico { color: var(--amber); }
.hud-stats .stat.right .ico { color: var(--leaf); }
.hud-stats .stat.best .ico { color: var(--sky); }
.toast .ico { color: inherit; width: 20px; height: 20px; }
.home-stars { display: inline; font-size: inherit; white-space: nowrap; }
.home-stars .ico { margin-right: 4px; }
.home-stars .ico, .badge .ico-points, .recap .ico-points { color: var(--leaf); }
.recap p { display: flex; align-items: baseline; gap: 8px; }
.recap .ico { color: var(--sky); position: relative; top: 3px; }
.recap .ico-right, .recap .ico-points { color: var(--leaf); }
.ask-hint .ico { color: var(--sky); }
.read-btn .ico { color: var(--sky); margin-right: 2px; }
.mode-icon { margin: 0; color: var(--sky); }
.mode-icon .ico { width: 56px; height: 56px; }
[data-icon] { display: inline-flex; }

/* ---------- 200% text zoom on a phone (a window about 200 px wide) ---------- */
/* Nothing scrolls sideways: the app bar, true/false, the break ring, the badge card and the tutor's box wrap or shrink.
   Only windows 320 px and narrower; the phone and laptop layouts above are unchanged. */
@media (max-width: 320px) {
  .appbar { flex-wrap: wrap; }
  .appbar-right { flex-wrap: wrap; gap: 8px; }
  .signin-panel { padding: 20px 8px; }  /* room for three 44 px PIN keys a row */
  .signin-brand { padding: 20px 12px; }
  .pinpad { gap: 6px; }
  .tf { grid-template-columns: 1fr; }
  .big-timer { width: 100%; max-width: 180px; height: auto; aspect-ratio: 1; }
  .badge-pop { flex-wrap: wrap; }
  .ask-head { flex-wrap: wrap; }
  .ask-form { flex-wrap: wrap; }
  .ask-form input { flex-basis: 100%; }
  .hub { grid-template-columns: minmax(0, 1fr); }
}
/* The study bar at 200% zoom: "‹ Topic" on its own line, then the ring and the buttons; the numbers wrap under the words. */
@container hud (max-width: 260px) {
  .hud-row, .hud-row2 { flex-wrap: wrap; row-gap: 4px; }
  .hud-back { flex-basis: 100%; }
  .hud-sun { margin-right: auto; }
  .hud-actions { gap: 2px; }
}
/* "Read-aloud is resting right now": one calm line under the Read to me button (no browser voice, no toast). */
.read-note { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
/* Read to me tapped again while the voice is away: the same line glows softly once, so the tap is answered. */
.read-note.again { animation: read-note-again 1.2s ease-out; border-radius: 6px; }
@keyframes read-note-again { from { background: var(--leaf-wash); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .read-note.again { animation: none; font-weight: 600; } }
/* CL fix K2: the last chrome emoji draw icons.js glyphs. */
.big-icon { color: var(--leaf); line-height: 1; }
.big-icon .ico { width: 56px; height: 56px; }
.h-icon { color: var(--leaf); width: 0.9em; height: 0.9em; vertical-align: -0.08em; }
.signin-brand li span:first-child .ico { width: 20px; height: 20px; color: var(--sky); }
.ask-inline .chip .ico, .ask-quick .chip .ico { width: 18px; height: 18px; color: var(--sky); vertical-align: -0.2em; margin-right: 2px; }
.thanks .ico { color: var(--leaf); vertical-align: -0.15em; }
.ask-file { color: var(--sky); width: 22px; height: 22px; }
.ask-msg.me .ask-file { color: inherit; }
.ask-file-line { display: flex; align-items: center; gap: 6px; }
.badge .ico-sparkle { color: var(--leaf); }
/* CL fix K1: each badge its own medal (icons.js); a badge new since the shelf was last seen glows softly and says
   "New" (words, not color alone). No motion. The finish card's badge row is a real prize, not a footnote. */
.badge-tile { position: relative; }
.badge-tile.is-new { border: 2px solid var(--leaf); box-shadow: 0 0 0 4px var(--cl-sage-light), var(--shadow); }
.badge-new { position: absolute; top: -10px; right: -6px; padding: 1px 8px; border-radius: 999px; font-size: 14px;
  font-weight: 700; background: var(--leaf); color: #fff; }
.badge-inline { padding: 12px 16px; border: 2px solid var(--leaf); background: var(--cl-sage-light); }
.badge-inline-row { font-size: 18px; }

/* The filled 2×2 Punnett square under a missed cross and on a fix card (r1 item 1). */
.punnett-fb { margin: 12px auto 4px; max-width: 300px; }
.punnett-fb svg { display: block; width: 100%; height: auto; }
.punnett-fb figcaption { text-align: center; font-weight: 600; color: var(--ink); }
.punnett-fb figcaption p { margin: 2px 0; }
.split-media .punnett-fb { background: var(--surface); border-radius: var(--radius-sm); padding: 8px; }
/* "Your result is below ↓": one calm line just above the button bar (r1 item 2). */
.below-hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-h, 80px) + 10px); z-index: 11;
  min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--sky); background: var(--surface);
  color: var(--ink); font: 700 16px/1.2 var(--font-body); cursor: pointer; box-shadow: var(--shadow); }
/* "This computer is set up for the Rivera family." — a calm green line on the kid picker (r1 item 4). */
.setup-done { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--good-wash); color: var(--leaf-deep); font-weight: 700; transition: opacity 300ms ease; }
.setup-done .icon, .setup-done svg { flex: none; }
.setup-done.leaving { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .setup-done { transition: none; } }
/* "When is your test?" on the class page's topic cards (r1 item 5): big targets, a big calendar date box. */
.test-date { margin: 8px 0 12px; display: grid; gap: 10px; }
.test-date .test-date-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 18px; }
.test-date-label { font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--ink); }
.test-date-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.test-date-input { min-height: 54px; min-width: 220px; padding: 8px 14px; font: 600 20px/1.2 var(--font-body); color: var(--ink);
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-sm); }
.test-date-input:focus { outline: 3px solid var(--sky); outline-offset: 2px; }
.topic-card .test-date-help, .topic-card .test-date-note { margin: 0; color: var(--ink); font-weight: 600; }
.topic-card .test-date-note { color: var(--leaf-deep); }
.test-date-row .btn { min-width: 120px; }

/* Plain zeros in what the kid reads and types: a slashed 0 in "10 − 2 × 3 + 4 = 0" looked like a letter (ADHD #14). */
.prompt, .choices, .learn-body, .result, .answer, .fill-input, .num-input, textarea, .pa-list, .order-list, .bucket {
  font-feature-settings: "cv01", "cv02", "cv03", "cv05", "cv08"; }
.ask-size-word { align-self: center; font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-right: 2px; }
.chip-icon .ico { width: 28px; height: 28px; }
.topic-row .n .ico { width: 24px; height: 24px; }
.answer-label { font-weight: 600; }
.check-new { margin: 0 0 4px; text-align: left; display: inline-block; }
.round-again { font-weight: 600; }
.reask-line { margin: 2px 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }

/* "Pick up where you left off" (r2 APP #1): the saved line is calm and sure, in the brand green. */
.resume-card .resume-saved { color: var(--leaf-deep); font-weight: 600; }

/* "Practice again later (N) ›" (r2 ADHD #3): a quiet full-width row under the sections, opened by a tap. */
.practice-again { margin-top: 16px; }
.pa-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 19px; color: var(--sky-deep, var(--ink)); }
.pa-chev { flex: none; font-size: 24px; line-height: 1; transition: transform 150ms ease; }  /* "›" like every other fold */
.practice-again.is-open .pa-chev { transform: rotate(90deg); }
.pa-toggle:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
.pa-right .pa-lines { margin: 2px 0 0; padding-left: 20px; font-size: 16px; }

/* Slashed zeros only where letters and digits mix in a code (the setup code, the PIN): O and 0 must differ there. */
.setup-code, .pin-dots, .pinpad { font-feature-settings: "ss02", "zero"; }
/* What scrolls under the button bar fades into it, so nothing reads as a half-cut button (ADHD r2 #8). */
.actionbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper)); }
.check-new-head { margin: 4px 0 0; font-weight: 700; }
.fixed-chip { color: var(--leaf-deep); }
.punnett-fb .keep-whole { white-space: nowrap; }

/* r4 ADHD #8: one Check, and a small "I'm guessing" chip beside it, off by default. r6 ADHD #1: it reads as a toggle:
   a checkbox-style box beside its words (empty when off, filled with a tick when on; the same size either way, so
   turning it on never moves Check), and the first time a small hint line under the words. */
.actionbar > .guess-chip { flex: 0 0 auto; max-width: none; min-height: 44px; align-self: center; padding: 6px 14px;
  font-size: 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.actionbar > .guess-chip.on { background: var(--leaf-wash); border-color: var(--leaf-deep); color: var(--ink); }
.guess-chip .guess-box { flex: 0 0 auto; width: 20px; height: 20px; box-sizing: border-box; border: 2px solid currentColor;
  border-radius: 5px; background: var(--paper); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: inherit; }
.guess-chip.on .guess-box { background: var(--leaf-deep); border-color: var(--leaf-deep); }
.guess-chip.on .guess-box::after { content: "✓"; color: #fff; font-weight: 700; }
.guess-chip .guess-words { display: inline-flex; flex-direction: column; line-height: 1.2; }
.guess-chip .guess-hint { font-family: var(--font-body, inherit); font-weight: 400; font-size: 14px; color: var(--shell-soft); }
/* r4 ADHD #2: the section being studied (THE plan's, as Home names it) says so on its row. */
.studying-now { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 14px;
  font-weight: 700; background: var(--leaf-wash); color: var(--leaf-deep); vertical-align: 0.1em; white-space: nowrap; }
/* r4 ADHD #3: one calm line when Home leads with another class than the one just studied. */
.switch-line { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--leaf-wash); font-weight: 600; }
/* r5 ADHD #1: a section finished today keeps its green "Done"; a question still to practice is a small note. */
.row-note { margin-left: 6px; font-size: 15px; color: var(--shell-soft); }
/* r5 ADHD #3: after Check a put-in-order list or a sort gets compact (smaller rows and chips, no arrows, no empty
   tray), so the whole result box fits above the button bar with the question's first line still on screen. */
.order-list.checked { gap: 4px; }
.order-list.checked .order-item { min-height: 30px; padding: 2px 6px 2px 8px; font-size: 16px; cursor: default; }
.order-list.checked .order-item .num { width: 24px; height: 24px; font-size: 14px; }
.order-list.checked .order-item .mark { width: 28px; font-size: 17px; }
.checked .tray { display: none; }
.checked .buckets { gap: 8px; }
.checked .bucket { min-height: 0; padding: 6px 8px; cursor: default; }
.checked .bucket h3 { font-size: 15px; margin-bottom: 4px; }
.checked .chip { min-height: 32px; padding: 3px 10px; font-size: 16px; cursor: default; }
/* r6 ADHD #8: the result box under them is tight too (the reason's last line was under the Next bar at 1366x625). */
.result.tight { padding: 12px 16px; }
.result.tight h2 { margin: 0 0 2px; }
.result.tight .badge { display: flex; width: fit-content; margin: 4px 0; }
.result.tight > p:not(.badge) { margin: 6px 0 0; }

/* The setup screen's folded "Parent? How to get a code" help */
.setup-letters { display: block; margin: 6px auto 0; text-align: center; font-size: 14px; font-weight: 600; }
.setup-help { margin: 12px 0 4px; text-align: left; }
.setup-help summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--cl-navy, #0b4a78); }
.setup-help ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.45; }
/* The reading gate (readgate.js, R2-A10): a new lesson card's Next is plainly inactive (grey, not green). UX round 4
   (R4-A04): it shows no number; a calm fill grows across it (below). No wiggle. */
.btn.gated { background: var(--cl-stone, #E5E7EB); color: #4B5563; border-color: var(--line-strong); cursor: default;
  font-variant-numeric: tabular-nums; }
body.shell .btn.gated { background: var(--cl-stone, #E5E7EB); }
/* The screen-reader line for the wait: for screen readers only. */
.gate-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- the "find what works" ladder: a different way each time (one idea per screen) ---------- */
.way-card h1 { margin: 0; }
.way-card .way-line { font-size: 19px; margin: 0; }
.fraction-visual { display: flex; justify-content: center; }
.fraction-bars { width: 100%; max-width: 440px; height: auto; display: block; }
.guided-card { gap: 12px; }
.guided-count { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.guided-prompt { margin: 0; font-size: 22px; line-height: 1.4; }
.guided-input { max-width: 220px; font-variant-numeric: tabular-nums; }
.guided-say:empty { display: none; }
.guided-say { border-radius: 12px; padding: 12px 14px; font-size: 18px; line-height: 1.45; border: 2px solid; }
.guided-say.good { border-color: var(--good); background: var(--good-wash); }
.guided-say.note { border-color: var(--amber); background: var(--amber-wash); }

/* ---------- kid navigation (kidnav.js): Home · My classes · Badges, Back, class tiles, topic cards ---------- */
/* A laptop or Chromebook: the tabs sit in the top bar, between the logo and the kid's name. */
.kidnav { display: flex; gap: 6px; align-items: center; margin: 0 auto 0 24px; }
.kidnav[hidden] { display: none; }
.kidnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px; border-radius: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--cl-navy); text-decoration: none;
  border: 2px solid transparent; touch-action: manipulation; }
.kidnav a .ico { width: 22px; height: 22px; }
.kidnav a:hover { background: var(--cl-sky-light); }
.kidnav a[aria-current] { background: var(--cl-sky-light); border-color: var(--cl-navy); }
.kidnav a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
/* A phone or tablet: a bar fixed at the bottom, three big tabs with the icon over the word. */
@media (max-width: 899px) {
  .kidnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 6px 8px max(6px, env(safe-area-inset-bottom)); background: var(--cl-cream); border-top: 1px solid var(--shell-line);
    box-shadow: 0 -4px 12px rgba(11, 74, 120, 0.06); }
  .kidnav a { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 4px; font-size: 14px; }
  body.shell .app { padding-bottom: calc(var(--bar-h, 0px) + 72px + 48px + env(safe-area-inset-bottom)); }
  body.shell .actionbar { bottom: calc(68px + env(safe-area-inset-bottom)); }  /* a button bar on a shell page sits above the tabs */
}

/* Back: big, first on the page, "‹ Biology 1-2 (P)". */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: -10px 0 6px -6px; padding: 4px 14px 4px 6px;
  border-radius: 12px; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--cl-navy); text-decoration: none; }
.back-link .back-chev { font-size: 30px; line-height: 1; margin-top: -3px; }
.back-link:hover { background: var(--cl-sky-light); }
.back-link:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* My classes: every class the same size, side by side. */
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.class-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 92px;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; color: var(--shell-ink);
  text-decoration: none; touch-action: manipulation; transition: border-color 0.15s, box-shadow 0.15s; }
.class-tile:hover { border-color: var(--c, var(--brand)); box-shadow: var(--shadow); }
.class-tile:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.class-tile[data-now] { border-color: var(--c, var(--brand)); box-shadow: inset 4px 0 0 var(--c, var(--brand)); }
.class-tile-words { display: grid; gap: 4px; min-width: 0; }
.class-tile-name { font-family: var(--font-head); font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.class-tile-status { font-size: 15px; color: var(--shell-soft); }
.class-tile-status.is-now { color: var(--cl-navy); font-weight: 700; }
.class-tile-ring { width: 56px; height: 56px; display: grid; place-items: center; }
.class-tile-ring svg { display: block; }
.class-tile .chip-icon { width: 48px; height: 48px; }
.class-grid + .week-line { margin-top: 18px; }

/* The class page's topics: one list, a real gap, one button per card. */
.topic-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.topic-card.is-current { border-color: var(--c, var(--brand)); }
.topic-card-words { display: grid; gap: 6px; min-width: 0; }
.topic-card .topic-title { display: inline-flex; align-items: center; min-height: 44px; color: var(--shell-ink); text-decoration: none; }
.topic-card .topic-title:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
.topic-card .topic-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--line-strong); }
.topic-card .topic-title:hover { text-decoration-color: currentColor; }
.topic-card .topic-status { color: var(--shell-ink); font-weight: 700; font-size: 16px; }
.topic-card .topic-status.is-now { color: var(--cl-navy); }
.topic-card .test-date { margin: 0; }
.test-date-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; font-size: 15px; justify-self: start; }
.test-date-link .ico { color: var(--cl-navy); }
.topic-progress { display: flex; align-items: center; gap: 10px; max-width: 420px; }
.topic-progress .bar { flex: 1; }
.topic-pct { font-size: 14px; font-weight: 700; color: var(--shell-ink); font-variant-numeric: tabular-nums; min-width: 3.2em; }
.topic-summary-box { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.topic-summary { margin: 0; min-width: 0; flex: 1; color: var(--shell-soft); display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden; }
.topic-summary-box.open .topic-summary { display: block; -webkit-line-clamp: unset; }
.topic-summary-box.fits .topic-more { display: none; }
.topic-more { flex: none; min-height: 44px; padding: 0 4px; white-space: nowrap; font-size: 15px; }
.topic-card .btn { min-height: 52px; min-width: 150px; }
.topic-card > .btn:focus-visible, .linkish:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 860px) { .topic-card > .btn { width: 100%; } }

/* =================== UX round 1 (Lane A): layers, Home's hero, sign-in, the round's frame =================== */
/* A sheet: a layer drawn as a box over the page (the test date, "Stop the check?", the goodbye card). The page under it
   can't be tapped; Back, Esc and Cancel close it. Bottom of the screen on a phone, centered on a laptop. */
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(18, 48, 76, 0.38); }
@media (min-width: 600px) { .sheet-backdrop { place-items: center; } }
.sheet { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
.sheet h2 { margin: 0; }
.sheet p { margin: 0; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.sheet-actions .btn { flex: 1 1 180px; }
.date-sheet .test-date-input { width: 100%; }

/* A card's own buttons, right under its words and centered (Today's plan, the check intro, the break, Round done). */
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px !important; }
.card-actions .btn { flex: 1 1 150px; max-width: 260px; }
.round-done .round-score { font-size: 20px; }
.break-left { margin: 0; font-weight: 700; font-size: 18px; }

/* Today's plan (K-23): the topic first, then what comes and how long, the mode on one line. */
.plan-card .plan-topic { margin: 0; font-size: 22px; color: var(--cl-navy); }
.plan-card .plan-what { font-weight: 700; font-size: 19px; }
.plan-card .plan-mode { margin-top: 10px; }

/* Home (K-06, K-09): one hero card, then at most one Also card in the same family, never a bare link. */
.upnext.hero { margin-bottom: 0; }
.also-card { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-top: 12px; padding: 14px 18px;
  border-color: var(--line-strong); }
.also-card h3 { margin: 2px 0 0; font-size: 18px; color: var(--shell-ink); }
.also-card .btn { min-width: 0; min-height: 48px; }
@media (max-width: 860px) {
  .also-card { grid-template-columns: minmax(0, 1fr); }
  .also-card .btn { width: 100%; }
}
/* A phone: the hero is compact (a 64 px ring beside two lines) so the class tiles show without scrolling. */
@media (max-width: 600px) {
  .page-head { margin-bottom: 10px; }
  .page-head h1 { font-size: 26px; }
  .upnext.hero { grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; }
  .upnext.hero > svg { width: 64px; height: 64px; align-self: start; }
  .upnext.hero .upnext-actions { grid-column: 1 / -1; }
  .upnext.hero .upnext-actions .btn { width: 100%; }
  .upnext.hero h2 { font-size: 19px; }
  .upnext.hero .upnext-meta { display: none; }
  .upnext.hero .upnext-section { font-size: 16px; margin-top: 2px; }
  .upnext .upnext-again { min-height: 40px; }
  .also-card { padding: 12px 14px; gap: 8px; }
  .section-title { margin: 18px 0 10px; }
  /* R2-A12: one compact row per class (icon, name and status, a 40 px ring), 64 px tall, so every class shows above
     the bottom tabs at first paint */
  .class-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .class-tile { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; min-height: 64px; padding: 8px 12px; align-items: center; }
  .class-tile > .chip-icon { width: 40px; height: 40px; }
  .class-tile-ring, .class-tile-ring svg { width: 40px; height: 40px; }
  .class-tile-words { gap: 0; }
  .class-tile-name { font-size: 17px; }
  .class-tile-status { font-size: 15px; }
}

/* Sign-in on a set-up device (K-08): only the logo, the names as big tiles, the whole PIN pad in view. */
.signin-brief { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 2vh auto 0; }
.signin-logo { display: flex; justify-content: center; padding: 18px 24px 0; background: var(--cl-cream); }
.signin-logo .cl-logo { width: 200px; max-width: 70%; height: auto; display: block; }
.signin-brief .signin-panel { min-height: 0; padding: 16px 24px 22px; gap: 12px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; }
.person-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px;
  padding: 14px 8px; border: 2px solid var(--line-strong); border-radius: 18px; background: var(--surface);
  color: var(--shell-ink); text-decoration: none; text-align: center; touch-action: manipulation; }
.person-tile .av { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-wash); display: grid;
  place-items: center; font-size: 36px; }
.person-tile strong { font-size: 18px; overflow-wrap: anywhere; }
.person-tile:hover { border-color: var(--brand); background: #EEF5FB; }
.person-tile:hover .av { background: var(--surface); box-shadow: 0 0 0 2px var(--cl-sky, #D7EAF7); }  /* the circle stays (R2-A30) */
.person-tile:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.signin-pin .back-link { margin: -6px 0 0 -8px; align-self: flex-start; }
.signin-pin .stack > * + * { margin-top: 8px; }
.signin-pin h2 { margin: 0; }
.signin-pin .pin-dots { margin: 4px 0 8px; }
.signin-pin .pinpad button { min-height: 56px; }
@media (max-width: 860px) { .signin-brief { margin-top: 0; } }
@media (max-height: 760px) {
  .signin-brief .signin-logo { padding-top: 10px; }
  .signin-brief .signin-logo .cl-logo { width: 160px; }
  .signin-pin .pinpad { gap: 8px; }
  .signin-pin .pinpad button { min-height: 50px; font-size: 24px; }
  body.shell .app:has(.signin-brief) { padding-top: 10px; }
}

/* The class page's topic card (K-13, R2-A19): the title is a link to the topic page and the verb is a button; the card
   itself is not a target, so nothing is nested and no card looks picked without words. */
.topic-card .topic-date { font-size: 15px; font-weight: 600; color: var(--shell-ink); }

/* The topic page: the test date under the title, how ready, and Practice again under Continue studying (K-10). */
.page-head + .test-date { margin: -6px 0 16px; }
.test-date-line { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-weight: 700;
  color: var(--shell-ink); }
.test-date-line .ico { color: var(--cl-navy); }
.test-date .test-date-note { margin: 0; color: var(--leaf-deep); font-weight: 700; }
.ready-line { margin: 0; font-weight: 700; color: var(--shell-ink); }
.hub-side .practice-again { width: 100%; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--shell-line);
  text-align: left; }
.hub-side .practice-again .btn { width: 100%; max-width: none; }
.hub-side .pa-toggle { text-align: left; }

/* The lesson's "Step 1 … Step 2 …" as a list (K-29); its first words above the picture on a phone or tablet (K-07). */
.learn-steps { margin: 0 0 8px; padding-left: 26px; display: grid; gap: 6px; font-size: 19px; }
.learn-lead > * + * { margin-top: 8px; }
.learn-lead .learn-body p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
  .card.split > .learn-lead { grid-column: 2; grid-row: 1; }
  .card.split:has(> .learn-lead) > .split-media { grid-column: 1; grid-row: 1 / span 2; }
  .card.split:has(> .learn-lead) > .split-text { grid-column: 2; grid-row: 2; }
}

/* A short or narrow screen (a 1366×625 Chromebook, a phone, a tablet): the picture is not sticky and is smaller, so
   the question's last choice and its result sit above the button bar (K-07). */
@media (max-height: 700px), (max-width: 999px) {
  .card.split > .split-media { position: static !important; }
  .media img, .media video, .visual svg,
  .card.split > .split-media .visual svg, .card.split > .split-media .media img { max-height: 35vh; }
}
/* Next waits until the result has been on screen once (K-07): quiet until then, and a tap brings the result up. */
.btn.waiting { opacity: 0.55; }

/* A sort question on a phone: the boxes above the items, so nothing to drop into hides under Check (K-07). */
@media (max-width: 600px) {
  .sort-q { display: flex; flex-direction: column; }
  .sort-q > * + * { margin-top: 12px; }
  .sort-q > .buckets { order: 1; }
  .sort-q > .tray { order: 2; }
}
/* The topic page's summary: two lines, "More ›" for the rest. */
.page-head .topic-summary-box { align-items: flex-start; }
.page-head .topic-summary { -webkit-line-clamp: 1; margin: 2px 0 0; }  /* R4-A17: one line, then Read more */
/* The class page's one optional line, "Have a test coming? …": quiet, at the end of the page, never a prompt near the top. */
.test-date.test-date-optional { margin: 14px 2px 0; }
.test-date-optional .test-date-link { font-size: 15px; font-weight: 600; color: var(--shell-soft); }

/* =================== UX round 2 (Lane A) =================== */
/* The round's bar on the check intro: only ‹ Topic and Home (R2-A02). */
.hud.is-intro .hud-sun, .hud.is-intro .hud-stats, .hud.is-intro .hud-progress { display: none; }
/* The check intro sits in the middle of a laptop screen (R2-A30). */
@media (min-height: 768px) and (min-width: 900px) { .app > .check-intro { margin-top: 10vh; } }
.check-rule { font-weight: 700; padding: 10px 14px; border-radius: 12px; background: var(--cl-sky-light, #EEF5FB); }

/* Every ring carries its unit in words under it (rule 2.5, R2-A24). */
.ring-fig { display: grid; justify-items: center; gap: 4px; }
.ring-fig .ring-label { margin: 0; font-size: 15px; font-weight: 700; color: var(--shell-soft); }
.upnext.hero > .ring-fig { align-self: center; }
.ring-counts { margin: -4px 0 0; font-weight: 700; color: var(--shell-ink); }
.upnext .upnext-date { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--shell-ink); }
.mode-line { margin: 0 0 10px; padding: 8px 14px; border-radius: 12px; background: var(--cl-sky-light, #EEF5FB); font-weight: 600; }

/* "Show what you know" with "Topic check · 26 questions · about 18 minutes" right under it (rule 2.2). */
.show-what { display: grid; gap: 4px; width: 100%; }
.show-what .btn { width: 100%; }
.show-what-sub { margin: 0; font-size: 15px; font-weight: 600; color: var(--shell-soft); text-align: center; }
.hub-side .topic-plan-line { margin: 0; font-weight: 700; color: var(--shell-ink); }
.hub-side .topic-state-line { margin: 0; color: var(--shell-soft); }
@media (min-width: 1000px) { .hub-side { gap: 12px; padding: 18px 20px; } }

/* "Up next": the marked card and row say it in words (R2-A19). */
.up-next-chip { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; font-family: var(--font-body);
  font-size: 14px; font-weight: 700; background: var(--cl-sky-light, #EEF5FB); color: var(--cl-navy); vertical-align: 0.15em;
  white-space: nowrap; border: 1px solid var(--cl-navy); }
.topic-card .topic-plan { color: var(--shell-ink); font-size: 15px; }
.empty-class { text-align: center; }
.empty-class h2 { margin: 0; }

/* Help (rule 2.3): one sheet, at most three choices, each a big row. */
.help-choices { display: grid; gap: 10px; }
.help-choice { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: center; }
.help-choice .ico { width: 24px; height: 24px; color: var(--sky); }
.help-choice-words { display: grid; gap: 2px; }
.help-choice-words strong { font-size: 18px; }
.help-choice-sub { font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.help-say:empty { display: none; }
.help-hint { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--cl-sky-light, #EEF5FB); }
.help-hint p, .help-hint h3 { margin: 0; }
.help-hint-head { font-weight: 700; color: var(--cl-navy); }
.help-hint-pic { max-width: 360px; }
.help-sheet { width: min(560px, 100%); }
/* After a miss, another way to learn it sits beside Next, above it on a phone (rule 2.3). */
@media (max-width: 600px) { .actionbar > .another-way { flex-basis: 100%; max-width: none; min-height: 48px; } }
.place-hint { margin: 12px auto 0; max-width: 820px; font-size: 15px; color: var(--ink-soft); text-align: center; }

/* The setup screen talks to the kid in big words (R2-A23). */
.signin-panel .setup-title { margin: 0; font-size: 28px; color: var(--cl-navy); }
.setup-sub { margin: 0; font-size: 18px; }
.setup-label { font-weight: 700; margin-top: 4px; }
.other-family { align-self: center; font-size: 15px; font-weight: 600; color: var(--shell-soft); }

/* Quest (R2-A24): "+10" flies to the counter; the flame grows with the streak; a new badge gets a short confetti burst.
   The reduced-motion rule above turns every animation off. */
.hud-stats .stat.streak { font-size: calc(16px * var(--streak-grow, 1)); }
.hud-stats .stat.streak .ico { width: calc(18px * var(--streak-grow, 1)); height: calc(18px * var(--streak-grow, 1)); }
.hud-stats .stat.streak.grew { animation: star-bump 400ms ease-out 1; }
.badge-pop { overflow: visible; }
.confetti { position: absolute; left: 36px; top: 24px; width: 0; height: 0; pointer-events: none; }
.confetti-bit { position: absolute; width: 8px; height: 12px; border-radius: 2px; opacity: 0;
  animation: confetti-burst 800ms ease-out forwards; }
@keyframes confetti-burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }

/* A label question on a narrow screen (R2-A11): numbered markers on the picture, the drop boxes as a list under it. */
.label-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.label-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; }
.label-num { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--cl-navy);
  color: #fff; font-weight: 800; font-size: 16px; }
.label-row .slot { min-height: 44px; justify-items: start; padding: 6px 12px; font-size: 17px; }
.label-row .slot:not(.filled) { color: var(--ink-soft); font-weight: 600; }
.hotspot-num { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--cl-navy); color: #fff; font-weight: 800; font-size: 15px;
  border: 2px solid #fff; pointer-events: none; }
/* A tablet (601–860 px): the hero keeps its ring beside the words; the button takes the full row (R2-A32). */
@media (min-width: 601px) and (max-width: 860px) {
  .upnext.hero { grid-template-columns: auto minmax(0, 1fr); }
  .upnext.hero .upnext-actions { grid-column: 1 / -1; }
  .upnext.hero .upnext-actions .btn { width: 100%; }
}

/* =================== UX round 3 (Lane A): one hero, one meter, one Back, one disclosure =================== */
/* Home's hero has no ring (rule 3.3): its words, then one primary (and at most one secondary) beside them. */
.upnext.hero { grid-template-columns: minmax(0, 1fr) auto; }
.upnext.hero .upnext-actions { min-width: 220px; }
@media (max-width: 860px) {
  .upnext.hero { grid-template-columns: minmax(0, 1fr); }
  .upnext.hero .upnext-actions { grid-column: 1 / -1; min-width: 0; }
  .upnext.hero .upnext-actions .btn { width: 100%; }
}
@media (max-width: 600px) {
  .upnext.hero .upnext-meta { display: block; font-size: 14px; }
  .upnext.hero .upnext-actions .btn { min-height: 52px; }
  .upnext.hero .show-what-sub { font-size: 14px; }
}
/* "Also saved: Life Science II · Cells ›" (R3-A08): one full-width row, 44 px+, not a card and not a button. */
.also-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin-top: 10px;
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface);
  color: var(--shell-ink); font-weight: 700; text-decoration: none; }
.also-row:hover { border-color: var(--c, var(--brand)); }
.also-row:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.also-words { min-width: 0; overflow-wrap: anywhere; }
.also-chev { flex: none; font-size: 22px; line-height: 1; color: var(--brand); }

/* A class page's topic card is ONE link (R3-A06): the whole card, one target, with a chevron. */
a.topic-card { color: inherit; text-decoration: none; cursor: pointer; grid-template-columns: minmax(0, 1fr) auto; }
a.topic-card:hover { border-color: var(--c, var(--brand)); box-shadow: var(--shadow); }
a.topic-card:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
a.topic-card .topic-title { text-decoration: none; min-height: 0; color: var(--shell-ink); }
.topic-card-chev { font-size: 28px; line-height: 1; color: var(--brand); }
@media (max-width: 860px) { a.topic-card { grid-template-columns: minmax(0, 1fr) auto; } }
.more-topics { margin: 14px 2px 0; font-weight: 700; color: var(--leaf-deep); }

/* The topic page's section rows: the row is the target; only the up-next row shows its verb (R3-A12). */
.sec-row .go.go-quiet { border: 0; background: none; padding: 6px 4px; font-size: 22px; line-height: 1; color: var(--shell-soft); }

/* One disclosure, in both apps (rule 3.6): a full-width row, words left and a chevron right, 44 px+, opening in place;
   "Show fewer" at the bottom of what opened. */
.disclosure-row { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 2px; cursor: pointer; font-weight: 700; color: var(--cl-navy); touch-action: manipulation; }
.disclosure-row:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 8px; }
.disclosure-words { min-width: 0; overflow-wrap: anywhere; }
.disclosure-chev { flex: none; font-size: 22px; line-height: 1; }
.disclosure-body[hidden] { display: none; }
.disclosure-close { color: var(--shell-soft); font-weight: 600; }
summary.disclosure-row { list-style: none; }
summary.disclosure-row::-webkit-details-marker { display: none; }
details.disclosure[open] > summary .disclosure-chev { transform: rotate(90deg); }
.pa-card > .disclosure-row { font-family: var(--font-head); font-size: 19px; color: var(--sky-deep, var(--ink)); }
.pa-more { display: block; }
.pa-more > .disclosure-row { font-size: 16px; }
/* The topic summary: one line (R4-A17); its row opens the rest in place, and steps aside once open ("Show fewer" under it). */
.topic-summary-box { display: block; }
.topic-summary-box .topic-summary { -webkit-line-clamp: 1; }  /* R4-A17: one line, then "Read more" */
.topic-summary-box.fits .topic-more { display: none; }
.topic-summary-box.open > .topic-more > .disclosure-row:first-child { display: none; }
.topic-more { white-space: normal; padding: 0; font-size: 15px; min-height: 0; }
.recap-more { margin-top: 8px; }
.recap-body { padding: 8px 12px; border-radius: 12px; background: var(--paper); }

/* The ring's number in words under it, never inside (rule 3.3) */
.ring-fig .ring-label { font-weight: 700; color: var(--shell-ink); font-size: 16px; }

/* The round's bar: no sun (rule 3.3); no ‹ when the round came from Home (rule 3.1: Home is the way back). */
.hud-back[hidden] { display: none; }
.hud.no-back .hud-actions { margin-left: auto; }
.hud-sun { display: none; }
/* Titles wrap, never cut off (R3-A37). */
.hud-back-text, .hud-mode { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.class-tile-name, .topic-card .topic-title, .sec-row .sec-name, .upnext h2 { overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }

/* The reading wait (R3-A03; UX round 4, R4-A04): a calm fill grows across the button over the same 4–12 s, with no
   number on it. With reduced motion the fill stays still and the button is muted (its line under it says why). */
.btn.gated, body.shell .btn.gated { position: relative; overflow: hidden; isolation: isolate; background: var(--surface);
  color: var(--leaf-deep); border-color: var(--leaf); }
.btn.gated::before { content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left center; transform: scaleX(0);
  background: color-mix(in srgb, var(--leaf) 25%, transparent);
  animation: gate-fill var(--gate-ms, 6000ms) linear var(--gate-at, 0ms) forwards; }
@keyframes gate-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .btn.gated::before { animation: none; transform: scaleX(0); }
  .btn.gated, body.shell .btn.gated { color: var(--ink-soft); border-color: var(--line-strong); } }

/* A box over the page: the top bar behind it reads as asleep too (R3-A18). */
body.sheet-open .appbar { opacity: .5; }

/* Badges (R3-A01, A27, A30): never under the tabs; a card at the top of a shell page; bigger medals; faded goals. */
.badge-pop { bottom: calc(max(var(--bar-h, 0px), var(--tabs-h, 0px)) + 12px + env(safe-area-inset-bottom)); z-index: 60; cursor: pointer; }
.badge-note { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px;
  padding: 10px 14px; border: 2px solid var(--leaf); border-radius: 16px; background: var(--cl-cream); cursor: pointer; }
.badge-note:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.badge-note-words { display: grid; gap: 2px; min-width: 0; }
.badge-note-words strong { color: var(--leaf-deep); font-family: var(--font-head); }
.badge-note-close { font-size: 14px; color: var(--ink-soft); }
.badge-calm { color: var(--leaf-deep); }
.badge-count { margin: -4px 0 8px; font-weight: 700; color: var(--shell-ink); }
.badge-tile { width: 140px; font: inherit; color: inherit; cursor: pointer; }
.badge-tile.locked { opacity: .5; }
.badge-tile.locked[aria-expanded="true"] { opacity: .85; }

/* Quest (R3-A29): "+10 stars" big in the Correct! panel; the streak at 3 or more in words. */
.gain-line { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font: 800 28px/1.1 var(--font-head);
  color: var(--leaf-deep); }
.gain-line .ico { width: 28px; height: 28px; color: var(--leaf); }
.streak-line { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 800; font-size: 18px; color: var(--amber-deep, #9A5B00); }
.streak-line .ico { width: 22px; height: 22px; color: var(--amber); }
.miss-hint { margin-top: 10px; }

/* A round's page leaves room for the fixed Check bar (R3-A23); the soft keyboard lifts the bar (R3-A24). */
body.kb-up:not(.shell) .actionbar { bottom: var(--kb, 0px); }
body.kb-up:not(.shell) .app { padding-bottom: calc(var(--bar-h, 96px) + var(--kb, 0px) + 24px); }

/* The equation builder on a phone (R3-A22): the two sides and the arrow stacked, a bigger arrow, the tile tray kept in
   view just above the Check bar. */
@media (max-width: 480px) {
  .equation { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 8px 0; }
  .eq-side { flex-wrap: nowrap; }
  .eq-side .slot { min-width: 0; flex: 1 1 0; }
  .equation .eq-side { width: 100%; justify-content: center; }
  .eq-arrow { grid-template-columns: auto auto auto; grid-template-rows: auto; align-items: center; gap: 6px; }
  .eq-arrow .shaft { font-size: 32px; transform: rotate(90deg); }
  .eq-arrow .slot { min-width: 88px; font-size: 14px; }
  .eq-q > .tray { position: sticky; bottom: calc(var(--bar-h, 80px) + 4px); z-index: 2; box-shadow: 0 -4px 12px rgba(11, 74, 120, 0.08); }
}

.order-item { scroll-margin-top: 120px; scroll-margin-bottom: calc(var(--bar-h, 96px) + 16px); }
/* "All 4 practiced!" (R3-A21) */
.practice-done h1 { margin: 0; }

/* ---------- UX round 4, Lane A (fix plan round4 §3.2) ---------- */
/* R4-A04: the reading gate shows no number. The button keeps its word; a calm fill grows across it over the wait
   (--gate-ms long, started --gate-at ago). With reduced motion the fill does not move: the button is muted and one
   small line under it says "Opens after a short read". */
.gate-note { display: none; flex-basis: 100%; max-width: none; margin: 0; text-align: center; font-size: 15px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .gate-note:not([hidden]) { display: block; } }
/* R4-A35: "Card 2 of 5" above the dots; the dots 10 px. */
.learn-where { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.learn-count { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.learn-dots span { width: 10px; height: 10px; }

/* R4-A20: a short card has its buttons right under it (no fixed bar, no gap, no fade). */
body.bar-inline:not(.shell) .actionbar { position: static; border-top: 0; box-shadow: none; background: transparent;
  padding-top: 4px; }
body.bar-inline:not(.shell) .actionbar::before { display: none; }
body.bar-inline:not(.shell) .app { flex: 0 0 auto; padding-bottom: 8px; }

/* R4-A08, R4-A09: a box in the middle of the screen (the goodbye, the check's Pause). */
.sheet-backdrop.sheet-center { place-items: center; }
.bye-saved { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-weight: 600; }
.appbar-done { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.appbar-done .ico { width: 20px; height: 20px; }

/* R4-A06: the hero's title is a link to the topic page, heading-styled, 44 px tall. */
.hero-title { margin: 2px 0; }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--shell-ink); text-decoration: none; }
.hero-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-link:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
button.also-row { width: 100%; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
/* R4-A33: at a tablet's 820×1180 the hero stays under 40% of the screen, so the class tiles start on screen one. */
@media (min-width: 601px) and (max-width: 999px) {
  .upnext.hero { padding: 14px 18px; gap: 12px 16px; }
  .upnext.hero .upnext-meta { font-size: 14px; }
}

/* R4-A17: the class page's one next step, first. */
.class-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 18px;
  margin: 8px 0 4px; border-left: 6px solid var(--c, var(--brand)); }
.class-next-title { margin: 0; font: 700 19px/1.3 var(--font-head); color: var(--shell-ink); }
.class-next-line { margin: 2px 0 0; color: var(--shell-soft); font-size: 15px; }
.class-next .btn { min-width: 150px; }
@media (max-width: 600px) { .class-next { grid-template-columns: minmax(0, 1fr); } .class-next .btn { width: 100%; } }
/* R4-A27: two topic cards a row on a wide screen. */
@media (min-width: 1000px) { .topic-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* R4-A16: Strong looks strongest (filled, with ✓); Done is outlined; "1 to practice" amber. One legend line. */
.pill.solid { background: var(--cl-green, #1E7F3E); color: #fff; }
.pill.mastered { background: transparent; color: var(--cl-green-deep, #155E2E); border: 2px solid var(--cl-green, #1E7F3E); padding: 1px 8px; }
.pill.practice { background: var(--amber-wash, #FFF4DB); color: #7A4D00; }
.pill.started { background: var(--cl-sky-light, #EAF4FB); color: var(--cl-navy, #0B4A78); }
.sec-legend { margin: 10px 0 0; }
.topic-saved-line { margin: 4px 0 8px; font-weight: 700; color: var(--shell-ink); }

/* R4-A07: a section finished mid-round is a chip in the result, and the round goes on. */
.section-done-chip { background: var(--cl-sage-light, #E5F0E3); color: var(--cl-green-deep, #155E2E); }
.keeps-going { margin: 6px 0 0; font-weight: 600; }
.round-finished { margin: 0; }
.missed-more { width: 100%; text-align: left; }
.missed-list { margin: 8px 0 0; }

/* R4-A12: the start card's two equal choices, with their icons. */
.start-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.start-choices .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: none; }
.start-choices .btn .ico { width: 22px; height: 22px; flex: none; }
@media (max-width: 480px) { .start-choices { grid-template-columns: minmax(0, 1fr); } }

/* R4-A19: "Getting another way…" with a small spinner. */
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -2px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-right-color: currentColor; opacity: .6; } }
.new-way { margin: 0; font-weight: 700; color: var(--leaf-deep); }

/* R4-A03: "Back to your question"; Help's line in a quick check. */
.after-teach-line { margin: 0; font-weight: 700; color: var(--leaf-deep); }
.help-why { font-size: 16px; color: var(--ink-soft); }
.nudge.try-again { font-weight: 700; }

/* R4-A11: a label after Check keeps the kid's answer ("You: …", struck) over the right one ("Right: …"). On a phone the
   picture stays in view (sticky, at most 45% of the screen) while the boxes are filled. */
.label-box .lab-you, .label-check .lab-you { display: block; color: var(--ink-soft); font-weight: 500; }
.label-box .lab-right, .label-check .lab-right { display: block; font-weight: 800; }
.label-check { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.label-check li { padding: 6px 10px; border-radius: 8px; background: var(--amber-wash, #FFF4DB); }
/* Round 5 blocker: a sticky picture covered the drop boxes on a phone (the Topic check stopped at 2 of 26). On a phone the
   picture scrolls with the page, never over the boxes; the numbered markers tie each box to its spot. */
@media (max-width: 519px) {
  .card.split.label-q > .split-media { position: static !important; z-index: auto; padding-bottom: 4px; }
  .card.split.label-q > .split-media .visual svg { max-height: 38vh !important; }
}

/* R4-A14: the class tile's ring says its number inside, at least 16 px. */
.class-tile-ring svg text { font-size: 44px; }

/* R4-A34: a badge tile's section on a second line, cut at two lines (whole on tap). R4-A24: "earned 11 times". */
.badge-section { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px;
  color: var(--ink-soft); text-align: center; overflow-wrap: anywhere; }
.badge-tile.is-open .badge-section { display: block; -webkit-line-clamp: unset; }
.badge-times { font-size: 14px; font-weight: 700; color: var(--leaf-deep); }

/* R4-A36: on a 1366×768 Chromebook the sign-in panel's parent link shows on the first screen. */
@media (min-width: 1000px) and (max-height: 820px) {
  .signin-panel { padding: 24px 32px; gap: 10px; min-height: 0; }
  .signin-divider { margin-top: 4px; padding-top: 10px; }
}

/* ---------- UX round 5, Lane A (fix plan round5 §3.1) ---------- */
/* R5-A17: the dim backdrop covers the top bar; the bar itself never turns see-through (a pill showed through it). */
body.sheet-open .appbar { opacity: 1; }
.appbar { z-index: 25; }
/* R5-A20: the star total by the kid's name at the top */
.who .who-stars { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--cl-sky-light); color: var(--cl-navy); font-weight: 800; }
.who .who-stars .ico { width: 18px; height: 18px; }
/* R5-A18: three class tiles across from 760 px; a class with no answers shows "New" instead of a "0" ring */
@media (min-width: 760px) { .class-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.class-tile-ring .new-pill { background: var(--cl-sky-light); color: var(--cl-navy); }
.class-tile-date { display: block; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 899px) {
  body.shell .app { padding-bottom: calc(var(--bar-h, 0px) + 96px + 48px + env(safe-area-inset-bottom)); }
}
/* R5-A12: the topic page's sections in groups, each under a small heading */
.sec-group + .sec-group { margin-top: 18px; }
.sec-group-head { margin: 0; padding: 12px 14px 6px; font-size: 17px; font-family: var(--font-head); color: var(--cl-navy); }
.sec-group-weak > .sec-group-head { color: var(--amber-deep, #8A5A00); }
.sec-group .pa-actions { display: flex; margin: 8px 14px 4px; }
.sec-group .practice-these-about { padding: 0 14px; }
.sec-group .pa-actions .btn { flex: 0 1 auto; }
.practice-these-about { margin: 0 0 8px; }
.topic-opens-line { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }
/* R5-A09: Help's way out is always on screen: "Close ✕" in its header, "Back to the question" in a footer that never
   scrolls away; the page behind does not scroll; a picture in a hint never runs wider than the sheet. */
body.sheet-open { overflow: hidden; }
.sheet svg, .sheet img { max-width: 100%; height: auto; }
.sheet.help-sheet { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; max-height: calc(100dvh - 32px); }
.help-sheet .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 8px;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.help-sheet .sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 18px; overscroll-behavior: contain; }
.help-sheet .sheet-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); background: var(--surface); }
.sheet-x { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 4px 12px; font-weight: 700; color: var(--cl-navy); }
/* R5-A15: room under every card for the button bar, and a result scrolls in whole above it; a non-label picture on a
   phone question is at most 28% of the screen, so the question, its answer box and Check fit. */
body:not(.shell) .app { padding-bottom: calc(var(--bar-h, 96px) + 16px + 32px); }
.result { scroll-margin-bottom: calc(var(--bar-h, 96px) + 16px); }
@media (max-width: 519px) {
  .card.split:not(.label-q) > .split-media .visual svg, .card.split:not(.label-q) > .split-media .media img { max-height: 28vh; }
}
/* R5-A10: the New-section card sits in the middle of a tablet's screen, never over an empty half */
.start-wrap { min-height: calc(100dvh - var(--hud-h, 96px) - 80px); display: grid; align-content: center; }
.start-what { margin: 0; font-size: 17px; }
/* R5-A03: why a new way came, under the card's kicker */
.reteach-why { margin: 0 0 6px; font-weight: 600; color: var(--leaf-deep); }
/* R5-A24 and R5-B09 on the question */
.saved-elsewhere { margin: 0 0 6px; font-size: 15px; color: var(--ink-soft); }
.lesson-link { align-self: flex-start; }
/* R5-B15: a sort's result, one line per item */
.result-lines { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
/* R5-A21: Round done celebrates: the round's badges pop in, a short burst over the icon (never with reduced motion) */
.round-done .big-icon { position: relative; overflow: visible; }
.round-done .confetti { left: 50%; top: 50%; }
.badge-inline.pop-in { animation: badge-pop-in 420ms cubic-bezier(.2, 1.4, .4, 1) 1 both; }
@keyframes badge-pop-in { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.round-next-line { margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }
/* R5-A22: the badge shelf fills the width; each tile shows it opens; a tapped badge opens big in a small layer */
.badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.badge-row .badge-tile { width: auto; }
.badge-chev { position: absolute; right: 10px; top: 8px; font-size: 22px; line-height: 1; color: var(--ink-soft); }
.badge-sheet { text-align: center; align-items: center; }
.badge-big svg { width: 120px; height: 120px; }
/* R5-A25: the reading caption shows under the filling button at every motion setting */
.gate-note:not([hidden]) { display: block; }
/* R5-A28: a step-by-step picture shows its whole first frame faintly at once, then each part lights up in turn */
.visual .mv-svg .mv-hidden { opacity: .14; }
/* R5-A27, R5-A29: the family code box with its Paste button; the Parents group is one list of rows in one style */
.setup-code-row { display: flex; gap: 8px; align-items: stretch; }
.setup-code-row .setup-code { flex: 1 1 auto; min-width: 0; }
.setup-code-row .setup-paste { flex: 0 0 auto; width: auto; }
.parent-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.parent-rows .setup-help { margin: 0; }
.parent-rows .setup-help > summary { list-style: none; cursor: pointer; }
.parent-rows .setup-help > summary::-webkit-details-marker { display: none; }
.parent-rows .setup-help[open] > summary .chev { transform: rotate(90deg); }
.ring-parts { margin: 2px 0 0; font-size: 15px; color: var(--leaf-deep); font-weight: 600; text-align: center; }
/* R5-B07: a written question's hint frame, one step per line */
.help-frame { margin: 4px 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 600; }
/* R5-A16: the class page's next-step card lines up with the page's content column (it is a page card, not a centered
   study card) */
body.shell .app > .class-next.card { max-width: none; margin-left: 0; margin-right: 0; }
.start-wrap .section-card { display: grid; gap: 12px; }
.sec-group .practice-again .disclosure-row { padding-left: 14px; padding-right: 14px; }
.sec-group { scroll-margin-top: 72px; }
/* R5-A29: both Parents rows look the same: full width, the same grid as "I'm a parent" */
.parent-rows .person, .parent-rows .setup-help > summary.person { width: 100%; box-sizing: border-box; display: grid;
  grid-template-columns: 44px 1fr auto; font-weight: 400; }
.parent-rows .setup-help > summary.person strong { font-size: 17px; color: var(--shell-ink); }
.parent-rows .setup-help ul { margin-top: 10px; }
/* R5-A27: on a phone the Paste button sits under the code box, so the whole code shows */
@media (max-width: 480px) {
  .setup-code-row { flex-direction: column; align-items: stretch; }
  .setup-code-row .setup-paste { align-self: flex-start; }
}
/* R5-A25: the reading caption sits on its own line under the filling button (never squeezing it) */
.actionbar:has(> .gate-note:not([hidden])) { flex-wrap: wrap; }
.actionbar > .gate-note:not([hidden]) { flex: 1 0 100%; max-width: none; order: 2; }