/* ki_child.css — Session 58 page-group sheet. Loaded after ki_app.css on every non-chalkboard page; scope every rule. */
/* ═══════════════════════════════════════════════════════════════════════════
   THE CHILD'S SURFACES — home, practice hub, section hubs, the practice
   question pages, Learn, Virtual Lessons, This week, the practice test and the
   Weekly Challenge hubs.

   The treatment is a WORKBOOK / SAMPLE TEST PAPER: ⚑ SESSION 59 — raised
   --ki-panel sheets on the practice blue (#1D3A56), never white except a
   picture plate (see section 11, which also explains why the legacy token flip
   is restated here), 1px ruled edges, square corners, serif headings, and each
   section's identity colour kept as a top rule or a marker rather than as a
   pastel fill. Nothing here changes markup, ids, data-* or behaviour; every
   rule is scoped to `body.ki.theme-kid` so no parent or public page is reached.

   ⚑ CONTRAST. Every text colour below is a --ki-* ink (all >= 5.9:1 on ivory).
   The two chooser tiles lose their gradients: Practice is white on --ki-navy
   (14.8:1) and Learn white on --ki-blue (7.1:1), so the "large text only" limit
   learn.css records for the Learn gradient (3.10:1) no longer binds.
   ⚑ The Learn hub art panels keep their per-tile ink (--lh-ink, text-safe on a
   light ground) but sit on ivory with the tile's identity colour as a 4px top
   rule; the gradient fill (which needed per-tile glyph ink to clear 3:1) is gone.
   ⚑ ANSWER STATES ARE NEVER COLOUR ALONE: a correct / incorrect option also
   carries a tick or cross and a word ("Correct", "Answer", "Your answer").
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. GROUND — no ambient glow behind a test paper ─────────────────────── */
body.ki.theme-kid::before,
body.ki.theme-kid::after { background-image: none !important; background: none !important; }

/* ── 1. PAGE HEADINGS — serif, ink, one short ochre rule ─────────────────── */
body.ki.theme-kid .kh-greet__name,
body.ki.theme-kid .lh-title,
body.ki.theme-kid .lh-head__title,
body.ki.theme-kid .sec-hero__title,
body.ki.theme-kid .sec-intro__title,
body.ki.theme-kid .mock-title,
body.ki.theme-kid .ch-title,
body.ki.theme-kid .page-narrow > h1,
body.ki.theme-kid .page-narrow h1 {
  font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0;
  color: var(--ki-ink);
}
body.ki.theme-kid .kh-greet__name { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.15; }
body.ki.theme-kid .kh-greet__sub,
body.ki.theme-kid .lh-sub,
body.ki.theme-kid .lh-lead,
body.ki.theme-kid .mock-lede,
body.ki.theme-kid .ch-lede,
body.ki.theme-kid .sec-hero__blurb { color: var(--ki-ink-2); }
body.ki.theme-kid .kd-home__head {
  border-bottom: 1px solid var(--ki-rule); padding-bottom: 18px; margin-bottom: 26px;
}
body.ki.theme-kid .kd-home__head .kh-greet__main::after {
  content: ''; display: block; width: 56px; border-top: 3px solid var(--ki-ochre); margin-top: 14px;
}
body.ki.theme-kid .lh-rule {
  width: 56px; height: 0; background: none; border-top: 3px solid var(--ki-ochre); border-radius: 0;
}

/* Eyebrows: small caps label in Korva blue / ink, never ochre text. */
body.ki.theme-kid .ks-eyebrow,
body.ki.theme-kid .ks-tile__cap,
body.ki.theme-kid .ks-resume__cap,
body.ki.theme-kid .mock-eyebrow,
body.ki.theme-kid .ch-eyebrow,
body.ki.theme-kid .sec-intro__eyebrow,
body.ki.theme-kid .lh-tile__eyebrow,
body.ki.theme-kid .lh-head__eyebrow,
body.ki.theme-kid .part-card__eyebrow,
body.ki.theme-kid .sec-diff__label {
  font-family: var(--ki-sans); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
body.ki.theme-kid .ks-eyebrow,
body.ki.theme-kid .ks-tile__cap,
body.ki.theme-kid .ks-resume__cap { color: var(--ki-blue); }

/* Section sub-headings ("Pick a section", "Recently", "Practice tests", "Work on these"). */
body.ki.theme-kid .kd-home__lead,
body.ki.theme-kid .kfeed__lead,
body.ki.theme-kid .sec-block__title,
body.ki.theme-kid .sec-panel__title,
body.ki.theme-kid .mock-card__title,
body.ki.theme-kid .ks-hero__title {
  font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; color: var(--ki-ink);
}

/* ── 2. THE TWO DOORS (/practice/home) — solid panels, no gradient ───────── */
body.ki.theme-kid .kpath { gap: 0; border: 1px solid var(--ki-navy); }
body.ki.theme-kid .kpath-tile {
  border-radius: 0; box-shadow: none; background-image: none; transform: none;
  min-height: 176px; padding: 22px 24px;
  border-top: 4px solid var(--ki-ochre);
}
body.ki.theme-kid .kpath-tile--practice { background-color: var(--ki-navy); }
body.ki.theme-kid .kpath-tile--learn    { background-color: var(--ki-brand); }
body.ki.theme-kid .kpath-tile:hover,
body.ki.theme-kid .kpath-tile:focus-visible { transform: none; box-shadow: none; }
body.ki.theme-kid .kpath-tile--practice:hover { background-color: var(--ki-navy-2); }
body.ki.theme-kid .kpath-tile--learn:hover    { background-color: #00506E; }
body.ki.theme-kid .kpath-tile:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
body.ki.theme-kid .kpath-tile__title { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; }
body.ki.theme-kid .kpath-tile__line { font-family: var(--ki-sans); font-size: 18px; font-weight: 600; color: var(--ki-on-navy-2); }
body.ki.theme-kid .kpath-tile--learn .kpath-tile__line { color: #fff; }
body.ki.theme-kid .kpath-tile__ico { opacity: 1; }

/* ── 3. SHEETS — every card, tile and panel becomes a ruled white sheet ──── */
body.ki.theme-kid .ks-hero,
body.ki.theme-kid .ks-tile,
body.ki.theme-kid .ks-resume,
body.ki.theme-kid .ks-sec,
body.ki.theme-kid .ks-note,
body.ki.theme-kid .mistake-chip,
body.ki.theme-kid .kfeed,
body.ki.theme-kid .sec-hero,
body.ki.theme-kid .sec-diff,
body.ki.theme-kid .sec-action,
body.ki.theme-kid .sec-panel,
body.ki.theme-kid .sec-mini,
body.ki.theme-kid .sec-test-card,
body.ki.theme-kid .sec-block,
body.ki.theme-kid .sec-empty,
body.ki.theme-kid .sec-mistake,
body.ki.theme-kid .sec-intro__card,
body.ki.theme-kid .mock-card,
body.ki.theme-kid .mock-section,
body.ki.theme-kid .ch-card,
body.ki.theme-kid .ch-empty,
body.ki.theme-kid .ch-status,
body.ki.theme-kid .card,
body.ki.theme-kid .card-encourage,
body.ki.theme-kid .vl-tile,
body.ki.theme-kid .vl-list,
body.ki.theme-kid .vl-note,
body.ki.theme-kid .lh-head {
  border-radius: 0 !important; box-shadow: none !important; background-image: none;
}
body.ki.theme-kid .ks-hero,
body.ki.theme-kid .ks-tile,
body.ki.theme-kid .ks-resume,
body.ki.theme-kid .ks-note,
body.ki.theme-kid .mistake-chip,
body.ki.theme-kid .sec-hero,
body.ki.theme-kid .sec-diff,
body.ki.theme-kid .sec-action,
body.ki.theme-kid .sec-panel,
body.ki.theme-kid .sec-test-card,
body.ki.theme-kid .sec-mistake,
body.ki.theme-kid .mock-card,
body.ki.theme-kid .mock-section,
body.ki.theme-kid .ch-card,
body.ki.theme-kid .ch-empty,
body.ki.theme-kid .ch-status,
body.ki.theme-kid .card,
body.ki.theme-kid .card-encourage,
body.ki.theme-kid .vl-tile,
body.ki.theme-kid .vl-note,
body.ki.theme-kid .lh-head {
  background-color: var(--ki-panel); border: 1px solid var(--ki-rule);
}
/* No hover lifts on a test paper — the border darkens instead. */
body.ki.theme-kid a.ks-hero:hover, body.ki.theme-kid a.ks-tile:hover,
body.ki.theme-kid a.ks-resume:hover, body.ki.theme-kid a.ks-sec:hover,
body.ki.theme-kid a.mistake-chip:hover, body.ki.theme-kid a.sec-action:hover,
body.ki.theme-kid a.sec-test-card:hover, body.ki.theme-kid a.vl-tile:hover,
body.ki.theme-kid a.cha-row:hover, body.ki.theme-kid .lh-tile:hover {
  transform: none !important; box-shadow: none !important; border-color: var(--ki-blue);
}
body.ki.theme-kid a.ks-hero:focus-visible, body.ki.theme-kid a.ks-tile:focus-visible,
body.ki.theme-kid a.ks-resume:focus-visible, body.ki.theme-kid a.ks-sec:focus-visible,
body.ki.theme-kid a.sec-action:focus-visible, body.ki.theme-kid a.vl-tile:focus-visible,
body.ki.theme-kid .lh-tile:focus-visible {
  transform: none !important; outline: 3px solid var(--ki-ochre); outline-offset: 2px;
}

/* An inert ("not open yet") card is ruled dashed and sits on the paper, not white. */
body.ki.theme-kid .ks-hero--idle { background-color: transparent; border: 1px dashed var(--ki-rule-2); }

/* Icon marks: a square ruled box, ink glyph. */
body.ki.theme-kid .ks-hero__mark,
body.ki.theme-kid .ks-tile__mark,
body.ki.theme-kid .ks-resume__mark,
body.ki.theme-kid .kfeed__ico,
body.ki.theme-kid .sec-hero__mark,
body.ki.theme-kid .sec-action__icon,
body.ki.theme-kid .sec-empty__icon,
body.ki.theme-kid .vl-tile__ico,
body.ki.theme-kid .mock-section__ico,
body.ki.theme-kid .ch-section__ico {
  border-radius: 0 !important; box-shadow: none !important; background-image: none !important;
}
body.ki.theme-kid .ks-tile__mark,
body.ki.theme-kid .ks-hero__mark {
  background: var(--ki-stone) !important; color: var(--ki-blue) !important; border: 1px solid var(--ki-rule);
}
body.ki.theme-kid .ks-resume__mark { background: var(--ki-brand) !important; color: #fff !important; }

/* ── 4. THE PRACTICE HUB — section tiles carry their colour as a top rule ── */
body.ki.theme-kid .ks-sec { background-color: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 4px solid var(--tile-accent, var(--ki-blue)); }
body.ki.theme-kid a.ks-sec:hover { border-top-color: var(--tile-accent, var(--ki-blue)); }
/* Today's tip (inline-styled in practice_hub.html): a ruled note, ochre edge. */
body.ki.theme-kid .kd-home div[style*="primary-50"] {
  background: var(--ki-panel) !important; border: 1px solid var(--ki-rule) !important; border-left: 4px solid var(--ki-ochre) !important; border-radius: 0 !important;
}
body.ki.theme-kid .ks-sec__name { font-family: var(--ki-serif); font-weight: 700; font-size: 19px; color: var(--ki-ink); letter-spacing: 0; }
body.ki.theme-kid .ks-resume { background-color: var(--ki-panel); border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-blue); }
body.ki.theme-kid .ks-resume__title,
body.ki.theme-kid .ks-tile__title { color: var(--ki-ink); }
body.ki.theme-kid .ks-note { background-color: var(--ki-stone); border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-ochre); }
body.ki.theme-kid .ks-note a { color: var(--ki-blue); }
body.ki.theme-kid .mistake-chip { background-color: var(--ki-panel); }

/* Recently — a ruled list, not a stack of cards. */
body.ki.theme-kid .kfeed { background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 2px solid rgba(255,255,255,.55); }
body.ki.theme-kid .kfeed__row { border-radius: 0; }
body.ki.theme-kid .kfeed > li + li { border-top: 1px solid var(--ki-rule); }
body.ki.theme-kid .kfeed__title { color: var(--ki-ink); }
body.ki.theme-kid .kfeed__meta, body.ki.theme-kid .kfeed__when { color: var(--ki-ink-3); }

/* ── 5. SECTION HUB /section/<id>, skills, mistakes, test intro ─────────── */
body.ki.theme-kid .sec-hero { border-left: 4px solid var(--sec-accent, var(--ki-blue)); }
body.ki.theme-kid .sec-hero__title { color: var(--ki-ink); }
body.ki.theme-kid .sec-diff__seg { border-radius: 0; border: 1px solid var(--ki-field); background: var(--ki-panel); padding: 0; overflow: hidden; }
body.ki.theme-kid .sec-diff__seg > * { border-radius: 0 !important; }
body.ki.theme-kid .sec-action--primary { background-color: var(--ki-blue-50); border-color: var(--ki-blue); }
body.ki.theme-kid .sec-action__title { color: var(--ki-ink); }
body.ki.theme-kid .sec-test-card__len { font-family: var(--ki-serif); color: var(--ki-blue); }
body.ki.theme-kid .sec-mini__num { font-family: var(--ki-serif); color: var(--ki-blue); }
body.ki.theme-kid .sec-fs__row { background: var(--ki-panel); border: 0; border-bottom: 1px solid var(--ki-rule); border-radius: 0; }
body.ki.theme-kid .sec-fs__row:first-child { border-top: 2px solid rgba(255,255,255,.55); }
body.ki.theme-kid .sec-fs__name { color: var(--ki-ink); }
body.ki.theme-kid .sec-fs__go,
body.ki.theme-kid .sec-skill__go {
  border-radius: var(--ki-r); background: var(--ki-panel); border: 1px solid var(--ki-blue); color: var(--ki-blue);
}
body.ki.theme-kid .sec-fs__go:hover,
body.ki.theme-kid .sec-skill__go:hover { background: var(--ki-blue-50); }
body.ki.theme-kid .sec-skill__bar,
body.ki.theme-kid .sec-chart__track,
body.ki.theme-kid .vl-prog__track,
body.ki.theme-kid .vl-prog__fill { border-radius: 0 !important; }
body.ki.theme-kid .sec-intro__card { border: 1px solid var(--ki-rule); border-top: 3px solid var(--ki-blue); }
body.ki.theme-kid .sec-intro__fact { background: var(--ki-stone); border: 1px solid var(--ki-rule); border-radius: 0; }
body.ki.theme-kid .sec-intro__fact-num { font-family: var(--ki-serif); color: var(--ki-blue); }
body.ki.theme-kid .sec-toggle__track { border-radius: 2px; }
body.ki.theme-kid .sec-toggle__knob { border-radius: 1px; }

/* ── 6. LEARN HUB (/learn) — ruled tiles, identity as a top rule ────────── */
body.ki.theme-kid .lh-tile {
  aspect-ratio: auto; border-radius: 0; box-shadow: none; transform: none;
  background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 4px solid var(--lh-a);
}
body.ki.theme-kid .lh-tile__art {
  flex: 0 0 auto; min-height: 0; height: 118px;
  background: var(--ki-stone); background-image: none; color: var(--lh-ink);
  border-bottom: 1px solid var(--ki-rule);
}
body.ki.theme-kid .lh-tile__title { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; color: var(--ki-ink); }
body.ki.theme-kid .lh-tile__blurb { color: var(--ki-ink-2); }
body.ki.theme-kid .lh-back,
body.ki.theme-kid .lh-head__back {
  border-radius: var(--ki-r); border: 1px solid var(--ki-blue); color: var(--ki-blue); background: var(--ki-panel);
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px;
}
/* Session 62: the `display: inline-flex` above is (0,3,1) and silently undid
   learn.css's "the pill goes below 560px" rule (0,1,0) — at 390 "Back to Learn"
   sat across the "Virtual Lessons" title. The gear beside it carries the same
   destination, so the narrow hide is restated at this specificity. */
@media (max-width: 559px) {
  body.ki.theme-kid .lh-head__back { display: none; }
}
body.ki.theme-kid .lh-head { border-top: 3px solid var(--lh-a, var(--ki-blue)); }
body.ki.theme-kid .lh-head__art {
  border-radius: 0; background: var(--ki-stone); background-image: none; color: var(--lh-ink);
  border: 1px solid var(--ki-rule);
}

/* ── 7. VIRTUAL LESSONS ─────────────────────────────────────────────────── */
body.ki.theme-kid .vl-tile__name,
body.ki.theme-kid .vl-row__title,
body.ki.theme-kid .vl-note__t { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; color: var(--ki-ink); }
body.ki.theme-kid .vl-tile__blurb { color: var(--ki-ink-2); }
body.ki.theme-kid .vl-tile__ico { background: var(--ki-stone) !important; border: 1px solid var(--ki-rule); }
body.ki.theme-kid .vl-row__n { border-radius: 0; }
body.ki.theme-kid .vl-list { background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 2px solid rgba(255,255,255,.55); }
body.ki.theme-kid .vl-note { background: transparent; border: 0; border-top: 1px solid var(--ki-rule); }
/* The header, the crumbs, the lead and the grid share one left edge. */
body.ki.theme-kid .page-narrow:has(> .lh-head) > * { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ── 8. THIS WEEK, PRACTICE TEST HUB, CHALLENGE HUB ─────────────────────── */
body.ki.theme-kid .mock-fact,
body.ki.theme-kid .mock-section__tiers > *,
body.ki.theme-kid .ch-section__bar { border-radius: 0 !important; }
body.ki.theme-kid .mock-fact { background: var(--ki-stone); border: 1px solid var(--ki-rule); }
body.ki.theme-kid .mock-card { border-top: 3px solid var(--ki-blue); }
body.ki.theme-kid .mock-section__name,
body.ki.theme-kid .ch-section__name { color: var(--ki-ink); font-weight: 700; }
body.ki.theme-kid .ch-empty { border-top: 3px solid var(--ki-ochre); }
body.ki.theme-kid .ch-empty .btn,
body.ki.theme-kid .ch-empty a { border: 1px solid var(--ki-blue); color: var(--ki-blue); background: var(--ki-panel); }
/* /practice/this-week rows (inline-styled cards in this_week.html). */
body.ki.theme-kid .page-narrow:has(> .stack) [style*="border-radius"] { border-radius: 0 !important; box-shadow: none !important; }
body.ki.theme-kid .page-narrow:has(> .stack) .stack > a:hover { border-color: var(--ki-blue) !important; }

/* ── 9. PRACTICE QUESTION PAGES — chrome only; layout untouched ─────────── */
body.ki.theme-kid .q-header {
  border-radius: 0; box-shadow: none; background: var(--ki-panel);
  border: 1px solid var(--ki-rule); border-top: 3px solid var(--ki-blue);
}
body.ki.theme-kid .q-header__section { color: var(--ki-blue); }
body.ki.theme-kid .diff-pill,
body.ki.theme-kid .chip,
body.ki.theme-kid .part-card__skill {
  border-radius: var(--ki-r) !important; box-shadow: none;
}
body.ki.theme-kid .diff-pill,
body.ki.theme-kid .part-card__skill { background: var(--ki-stone); border: 1px solid var(--ki-rule); color: var(--ki-ink-2); }

/* The question sheet. */
body.ki.theme-kid .part-card,
body.ki.theme-kid .q-passage-shell,
body.ki.theme-kid .q-stimulus-shell,
body.ki.theme-kid .q-passage,
body.ki.theme-kid .abstract-stage,
body.ki.theme-kid .feedback-card,
body.ki.theme-kid .wr-prompt,
body.ki.theme-kid .wr-rubric,
body.ki.theme-kid .q-scenario {
  border-radius: 0 !important; box-shadow: none !important;
}
body.ki.theme-kid .part-card { background: var(--ki-panel); border: 1px solid var(--ki-rule); border-top: 3px solid rgba(255,255,255,.55); }
body.ki.theme-kid .part-card__eyebrow { color: var(--ki-blue); }
body.ki.theme-kid .q-question,
body.ki.theme-kid .abstract-prompt__title { color: var(--ki-ink); }
body.ki.theme-kid .abstract-prompt__title { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; }
body.ki.theme-kid .abstract-stage { background: var(--ki-panel); border: 1px solid var(--ki-rule); }
body.ki.theme-kid .scn, body.ki.theme-kid .scn * { border-radius: 0 !important; }
body.ki.theme-kid .q-passage-shell, body.ki.theme-kid .q-stimulus-shell { border: 1px solid var(--ki-rule); }
body.ki.theme-kid .q-passage-shell__title,
body.ki.theme-kid .q-stimulus-shell__title,
body.ki.theme-kid .scn__passage-title,
body.ki.theme-kid .passage-title { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; color: var(--ki-ink); }

/* Options: square, bordered, >= 52px, the letter in a ruled box. */
body.ki.theme-kid .option {
  border-radius: var(--ki-r); box-shadow: none; transform: none;
  border: 1px solid var(--ki-field); background: var(--ki-panel); color: var(--ki-ink);
  min-height: 52px; font-family: var(--ki-sans); font-size: 16px;
}
body.ki.theme-kid .option-letter {
  border-radius: 0; background: var(--ki-panel); color: var(--ki-ink);
  border: 1px solid var(--ki-ink-3); font-family: var(--ki-serif); font-weight: 700;
  width: 30px; height: 30px;
}
body.ki.theme-kid .option:hover:not(.disabled) {
  border-color: var(--ki-blue); background: var(--ki-blue-50); transform: none; box-shadow: none;
}
body.ki.theme-kid .option:hover:not(.disabled) .option-letter { background: var(--ki-blue); border-color: var(--ki-blue); color: #10283A; }
body.ki.theme-kid .option:focus-visible,
body.ki.theme-kid .abstract-option:focus-visible { outline: 3px solid var(--ki-ochre); outline-offset: 2px; }
body.ki.theme-kid .option.selected { border: 2px solid var(--ki-blue); }
body.ki.theme-kid .option.disabled { opacity: 1; color: var(--ki-ink-3); }
body.ki.theme-kid .option.correct,
body.ki.theme-kid .option.incorrect { color: var(--ki-ink); border-width: 2px; }
body.ki.theme-kid .option.correct   { border-color: var(--ki-green); background: var(--ki-green-50); }
body.ki.theme-kid .option.incorrect { border-color: var(--ki-red);   background: var(--ki-red-50); }
body.ki.theme-kid .option.correct .option-letter   { background: var(--ki-green); border-color: var(--ki-green); color: #10283A; }
body.ki.theme-kid .option.incorrect .option-letter { background: var(--ki-red);   border-color: var(--ki-red);   color: #10283A; }
body.ki.theme-kid .option.correct::after,
body.ki.theme-kid .option.incorrect::after {
  margin-left: auto; padding-left: 12px; flex: none; white-space: nowrap;
  font: 700 14px/1.2 var(--ki-sans); letter-spacing: .02em;
}
body.ki.theme-kid .option.correct::after { content: '\2713\00a0 Answer'; color: var(--ki-green); }
body.ki.theme-kid .option.correct.selected::after { content: '\2713\00a0 Correct'; }
body.ki.theme-kid .option.incorrect::after { content: '\2717\00a0 Your answer'; color: var(--ki-red); }

/* Abstract (figure) options. */
body.ki.theme-kid .abstract-option {
  border-radius: var(--ki-r) !important; box-shadow: none !important; transform: none !important;
  border: 1px solid var(--ki-field); background: var(--ki-panel);
}
body.ki.theme-kid .abstract-option:hover:not(.disabled) { border-color: var(--ki-blue); background: var(--ki-blue-50); }
body.ki.theme-kid .abstract-option-letter { font-family: var(--ki-serif); font-weight: 700; color: var(--ki-ink); }
body.ki.theme-kid .abstract-option.selected  { border: 2px solid var(--ki-blue); }
body.ki.theme-kid .abstract-option.correct   { border: 3px solid var(--ki-green); background: var(--ki-green-50); }
body.ki.theme-kid .abstract-option.incorrect { border: 3px solid var(--ki-red);   background: var(--ki-red-50); }
body.ki.theme-kid .abstract-option.correct .abstract-option-letter   { color: var(--ki-green); }
body.ki.theme-kid .abstract-option.incorrect .abstract-option-letter { color: var(--ki-red); }
body.ki.theme-kid .abstract-option.correct .abstract-option-letter::after   { content: '\00a0\2713\00a0 Correct'; }
body.ki.theme-kid .abstract-option.incorrect .abstract-option-letter::after { content: '\00a0\2717\00a0 Your answer'; }
body.ki.theme-kid .abstract-option.correct:not(.selected) .abstract-option-letter::after { content: '\00a0\2713\00a0 Answer'; }

/* Hint / broken / secondary controls: ruled outline buttons, >= 44px. */
body.ki.theme-kid .hint-btn,
body.ki.theme-kid .btn-soft,
body.ki.theme-kid .btn-secondary,
body.ki.theme-kid .btn-ghost {
  border-radius: var(--ki-r) !important; box-shadow: none !important; transform: none !important;
  background: var(--ki-panel); border: 1px solid var(--ki-blue); color: var(--ki-blue); min-height: 44px;
}
body.ki.theme-kid .hint-btn--ghost,
body.ki.theme-kid .btn-ghost { border-color: var(--ki-rule-2); color: var(--ki-ink-2); }
body.ki.theme-kid .hint-btn:hover,
body.ki.theme-kid .btn-soft:hover,
body.ki.theme-kid .btn-secondary:hover,
body.ki.theme-kid .btn-ghost:hover { background: var(--ki-blue-50); color: var(--ki-blue-dk); }
body.ki.theme-kid .btn-primary {
  border-radius: var(--ki-r) !important; box-shadow: none !important; transform: none !important;
  background: #FFFFFF; border: 2px solid #FFFFFF; color: var(--ki-brand);
}
body.ki.theme-kid .btn-primary:hover { background: #E3F1F7; border-color: #E3F1F7; color: var(--ki-brand); }

/* Feedback after an answer. */
body.ki.theme-kid .feedback-card { background: var(--ki-panel); border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-blue); }
body.ki.theme-kid .feedback-heading { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; }

/* Writing: the prompt as a ruled sheet, the response as a lined field. */
body.ki.theme-kid .wr-prompt { background: var(--ki-panel); border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-green); }
body.ki.theme-kid .wr-rubric { background: var(--ki-panel); border: 1px solid var(--ki-rule); }
body.ki.theme-kid .wr-rubric__name { font-family: var(--ki-serif); font-weight: 700; letter-spacing: 0; color: var(--ki-ink); }
body.ki.theme-kid .wr-textarea,
body.ki.theme-kid textarea.textarea {
  border-radius: var(--ki-r); border: 1px solid var(--ki-field); box-shadow: none; background: var(--ki-panel);
}
body.ki.theme-kid .wr-textarea:focus { outline: 2px solid var(--ki-blue); outline-offset: 0; border-color: var(--ki-blue); }

/* The Fo coach bubbles: square, ruled. Tints kept (they distinguish the kinds). */
body.ki.theme-kid [class^="foc-"],
body.ki.theme-kid [class*=" foc-"] { border-radius: 0; box-shadow: none; }
body.ki.theme-kid .foc-meter { border-radius: var(--ki-r); }

/* ── 10. PHONE — keep the last control clear of the fixed bottom bar ────── */
@media (max-width: 1023px) {
  body.ki.theme-kid.has-knav-bottom main { padding-bottom: 8px; }
}
@media (max-width: 600px) {
  body.ki.theme-kid .kpath-tile { min-height: 140px; padding: 16px 14px; }
  body.ki.theme-kid .option.correct::after,
  body.ki.theme-kid .option.incorrect::after { font-size: 13px; padding-left: 8px; }
}

/* /practice/mistakes — the inline gradient banner becomes a ruled note. */
body.ki.theme-kid .rise-in[style*="linear-gradient(135deg, #FAF2DF"] {
  background: var(--ki-panel) !important; border: 1px solid var(--ki-rule); border-left: 4px solid var(--ki-ochre); border-radius: 0 !important;
}
body.ki.theme-kid .rise-in[style*="linear-gradient(135deg, #FAF2DF"] .t-strong { font-family: var(--ki-serif); font-weight: 700; color: var(--ki-ink); }

/* The practice-test hub paints its own band behind the page; the portal ground is enough. */
body.ki.theme-kid .mock-page, body.ki.theme-kid .kd-mock { background: transparent; background-image: none; }
/* A "not open yet" challenge is one ruled note, not a box inside a box. */
body.ki.theme-kid .ch-card:has(.ch-empty) { border: 0; background: transparent; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. SESSION 59 — THE PRACTICE BLUE (#1D3A56)
   Session 58 painted the child's surfaces as white sheets on ivory. Every
   sheet above now reads the tier tokens (--ki-panel raised, --ki-stone inset),
   and this block finishes the job for what the tokens could not reach.

   ⚑ THE LEGACY TOKEN FLIP LOST ON EVERY KID PAGE. ki_app.css flips --surface,
   --line, --bg … on `body.ki-t-practice` (0,1,1), but its own earlier rule
   `body.ki.theme-kid { --surface: #FFFFFF; --line-soft: #E4E7EA; background:
   var(--ki-ivory) }` is (0,2,1) and wins, so every legacy card painting
   var(--surface) (.scn, this_week's inline cards, the passage) stayed a white
   island. Re-declared here at (0,3,1). theme-parent has the same trap on the
   portal tier; that one belongs to ki_app.css, not to this sheet.

   ⚑ THE ONE ALLOWED WHITE IS A PICTURE PLATE. Bank PNGs, SVG tables / charts and
   abstract figures are drawn for white, so they sit on a white mount with dark
   ink (#1A1F2E, 16.5:1) inside it and a --ki-rule-2 edge around it.
   ═══════════════════════════════════════════════════════════════════════════ */
body.ki.theme-kid.ki-t-practice {
  --surface:        var(--ki-panel);
  --surface-tier-0: var(--ki-panel);
  --surface-tier-1: var(--ki-ground);
  --surface-tier-2: var(--ki-stone);
  --bg:             var(--ki-ground);
  --bg-soft:        var(--ki-stone);
  --k-bg:           var(--ki-ground);
  --k-card:         var(--ki-panel);
  --line:           rgba(255, 255, 255, .16);
  --line-soft:      rgba(255, 255, 255, .10);
  --ink:            #F3EFE6;
  --ink-soft:       #D2DBE5;
  --ink-mute:       var(--ki-ink-3);
  --ink-faint:      var(--ki-ink-3);
  --primary:        #8CCBE6;
  --primary-50:     rgba(140, 203, 230, .12);
  --primary-100:    rgba(140, 203, 230, .22);
  --primary-dark:   #8CCBE6;
  --surface-2:      var(--ki-stone);
  --mint:           #8FDCA6;
  --mint-50:        rgba(143, 220, 166, .14);
  --error:          #F4A493;
  --error-50:       rgba(244, 164, 147, .14);
  --kx-chev:        #8CCBE6;
  --kx-wash:        rgba(140, 203, 230, .06);
  /* the four section INKS (text-safe on light) become light tints of the same
     hue, all >= 5.3:1 on --ki-panel; the identity fills stay as they are */
  --sec-reading-ink:  #E9C46A;
  --sec-quant-ink:    #8CCBE6;
  --sec-abstract-ink: #F6B8B4;   /* 59b: #F4A493 was 4.25 on the lifted panel; this is 4.99 */
  --sec-writing-ink:  #8FDCA6;
  --kp-plate-ink:   #1A1F2E;
  background: var(--ki-ground);
}

/* Session 62: the mistake review's "your answer" row read var(--coral-50), a
   light-theme pastel this block does not flip, under the flipped near-white
   --ink — the child's own wrong answer measured ~1.1:1, i.e. invisible, on
   /section/<id>/mistakes. Same treatment as .is-answer: a tint of the error hue. */
body.ki.theme-kid .sec-review__opt.is-yours { background: var(--error-50); border-color: var(--error); }

/* ── 11a. Icon marks: pastel chips become stone squares, glyph in ink ────── */
body.ki.theme-kid :is(.kfeed__ico, .ks-sec__ico, .sec-hero__mark, .sec-action__icon, .sec-empty__icon, .mock-section__ico, .ch-section__ico) {
  background: var(--ki-stone) !important; border: 1px solid var(--ki-rule); color: var(--ki-ink) !important;
}
body.ki.theme-kid .ks-tile__mark,
body.ki.theme-kid .ks-hero__mark { background: var(--ki-stone) !important; color: var(--ki-blue) !important; }

/* ── 11b. Small chips, pills, tracks, the difficulty segment ─────────────── */
body.ki.theme-kid :is(.chip, .mock-tier, .diff-pill, .part-card__skill) {
  background: var(--ki-stone) !important; border: 1px solid var(--ki-rule-2); color: var(--ki-ink-2) !important;
}
body.ki.theme-kid :is(.sec-skill__bar, .sec-chart__track, .sec-fs__bar, .vl-prog__track) { background: var(--ki-stone) !important; }
body.ki.theme-kid .sec-diff__seg { background: var(--ki-stone); border-color: var(--ki-field); }
body.ki.theme-kid .sec-diff__opt { background: transparent; color: var(--ki-ink-2); }
body.ki.theme-kid .sec-diff__opt.is-on { background: #FFFFFF !important; color: var(--ki-brand) !important; }
body.ki.theme-kid .kback {
  background: transparent; border: 1px solid var(--ki-rule-2); color: var(--ki-ink); border-radius: var(--ki-r);
  min-height: 44px; display: inline-flex; align-items: center;
}
body.ki.theme-kid .kback:hover { background: rgba(255,255,255,.08); border-color: #FFFFFF; }

/* ── 11c. Outline / secondary buttons: transparent on blue, light edge ───── */
body.ki.theme-kid :is(.hint-btn, .btn-soft, .btn-secondary, .btn-ghost, .sec-fs__go, .lh-back, .lh-head__back) {
  background: transparent; border-color: var(--ki-blue); color: var(--ki-blue);
}
body.ki.theme-kid :is(.hint-btn--ghost, .btn-ghost) { border-color: var(--ki-rule-2); color: var(--ki-ink-2); }
body.ki.theme-kid :is(.hint-btn, .btn-soft, .btn-secondary, .btn-ghost, .sec-fs__go, .lh-back, .lh-head__back):hover {
  background: rgba(140, 203, 230, .14); color: #FFFFFF; border-color: #FFFFFF;
}
body.ki.theme-kid .ch-empty :is(.btn, a) { background: transparent; border-color: var(--ki-blue); color: var(--ki-blue); }

/* ── 11d. QUESTION PAGES ──────────────────────────────────────────────────
   Layout untouched. The question / stimulus sits on the raised panel with
   warm-white ink; the picture itself is a white plate. */
body.ki.theme-kid .q-header { background: var(--ki-navy-2); border-color: var(--ki-rule); border-top-color: var(--ki-blue); }
body.ki.theme-kid .part-card { background: var(--ki-panel); border-color: var(--ki-rule); border-top-color: var(--ki-blue); }
body.ki.theme-kid .q-question { color: var(--ki-head); }

/* the scenario sheet: panel; its picture: a white plate */
body.ki.theme-kid .scn { background: var(--ki-panel); border: 1px solid var(--ki-rule); }
body.ki.theme-kid .scn__media { background: #FFFFFF; border-bottom: 1px solid var(--ki-rule-2); }
body.ki.theme-kid .scn__svg { background: #FFFFFF; color: var(--kp-plate-ink); }
body.ki.theme-kid .scn__text { color: var(--ki-ink); }
body.ki.theme-kid .scn__placeholder { background: var(--ki-stone); color: var(--ki-ink-2); }
body.ki.theme-kid :is(.scn__placeholder-label, .scn-line__n) { color: var(--ki-ink-3); }
body.ki.theme-kid .scn__placeholder-alt { color: var(--ki-ink-2); }
/* reading: the numbered passage is the raised sheet; numbers muted, text warm white */
body.ki.theme-kid .scn--passage { border-top: 3px solid var(--ki-ochre); }
body.ki.theme-kid :is(.scn__lines, .scn-line__t) { color: var(--ki-ink); }
body.ki.theme-kid .q-passage { background: var(--ki-panel) !important; color: var(--ki-ink); border-color: var(--ki-rule); box-shadow: none; }
body.ki.theme-kid :is(.q-passage-shell, .q-stimulus-shell) { background: var(--ki-panel); }
/* HTML data tables and figures inside a question: white plate, dark ink */
body.ki.theme-kid .q-figure { background: #FFFFFF; border: 1px solid var(--ki-rule-2); color: var(--kp-plate-ink); }
body.ki.theme-kid .q-figure :is(table, th, td, caption, p, span) { color: var(--kp-plate-ink); }
/* Session 62 (Agent D+E): the plate's header row kept style.css's
   `background: var(--surface-elev)`, which the tier flips to navy, under the plate's
   dark ink — every table header on a practice / multi-part plate measured ~1.2:1
   (#1A1F2E on #18324B), i.e. invisible. A light tint of the plate; ink is ~14:1. */
body.ki.theme-kid .q-figure th { background: #EEF1F5; }

/* options: the inset stone so each reads as a separate square key on the panel */
body.ki.theme-kid .option { background: var(--ki-stone); border-color: var(--ki-field); color: var(--ki-ink); }
body.ki.theme-kid .option-letter { background: transparent; border-color: var(--ki-field); color: var(--ki-head); }
body.ki.theme-kid .option:hover:not(.disabled) { background: #2C5373; border-color: var(--ki-blue); color: #FFFFFF; }
body.ki.theme-kid .option.selected { border-color: var(--ki-blue); background: #2C5373; }
body.ki.theme-kid .option.disabled { color: var(--ki-ink-2); }
body.ki.theme-kid .option.correct   { background: #1E4A3C; border-color: var(--ki-green); color: #FFFFFF; }
body.ki.theme-kid .option.incorrect { background: #4E3134; border-color: var(--ki-red);   color: #FFFFFF; }

/* abstract: the figure stage and each option tile are white plates */
body.ki.theme-kid .abstract-stage { background: #FFFFFF; border: 1px solid var(--ki-rule-2); color: var(--kp-plate-ink); }
body.ki.theme-kid .abstract-option { background: #FFFFFF; border: 2px solid var(--ki-rule-2); }
body.ki.theme-kid .abstract-option .abstract-option-letter { color: var(--kp-plate-ink); }
body.ki.theme-kid .abstract-option:hover:not(.disabled) { background: #FFFFFF; border-color: var(--ki-blue); box-shadow: 0 0 0 2px var(--ki-blue) !important; }
body.ki.theme-kid .abstract-option.selected  { border: 2px solid var(--ki-blue); box-shadow: 0 0 0 2px var(--ki-blue) !important; }
body.ki.theme-kid .abstract-option.correct   { background: #FFFFFF; border: 4px solid var(--ki-green); }
body.ki.theme-kid .abstract-option.incorrect { background: #FFFFFF; border: 4px solid var(--ki-red); }
/* on the white tile the state words take a dark ink of the same hue */
body.ki.theme-kid .abstract-option.correct .abstract-option-letter   { color: #1D6B3A; }
body.ki.theme-kid .abstract-option.incorrect .abstract-option-letter { color: #A4321C; }

/* feedback / explanation / distractor reveal: a stone well, light ink */
body.ki.theme-kid .feedback-card { background: var(--ki-stone); border-color: var(--ki-rule); border-left-color: var(--ki-blue); color: var(--ki-ink); }

/* writing */
body.ki.theme-kid .wr-prompt { background: var(--ki-panel); color: var(--ki-ink); }
body.ki.theme-kid .wr-rubric { background: var(--ki-panel); color: var(--ki-ink-2); }
body.ki.theme-kid :is(.wr-textarea, textarea.textarea) {
  background: var(--ki-input-bg); border: 1px solid var(--ki-field); color: #FFFFFF;
}
body.ki.theme-kid :is(.wr-textarea, textarea.textarea)::placeholder { color: #A9B4C1; }
body.ki.theme-kid .wr-textarea:focus { outline: 2px solid var(--ki-blue); border-color: var(--ki-blue); }
/* Session 62: the PIN field (/practice/start/<id>, pin_entry.html — theme-kid on
   the portal tier) is the one `.input` a kid-themed page draws, and nothing here
   styled it. It autofocuses, so vibrant.css's light-theme `:focus` fill #F6FBFD
   sat under the flipped near-white ink and the digits a child typed were
   invisible (~1.05:1). Same treatment ki_parent.css §9 gives the portal fields. */
body.ki.theme-kid .input { background: var(--ki-input-bg); border: 1px solid var(--ki-field); color: #FFFFFF; }
body.ki.theme-kid .input::placeholder { color: #A9B4C1; }
body.ki.theme-kid .input:focus { outline: 2px solid var(--ki-blue); outline-offset: 0; border-color: var(--ki-blue); background: rgba(0, 0, 0, .32); }

/* Session 62: the nickname builder (/practice/nickname) — the first screen every
   new child sees. nickname.css inks it in --teal-500/600, dark blues sized for a
   light card, and no tier sheet flipped them: "Your nickname" measured 1.49:1
   and both "Shuffle" buttons 1.31:1. The light accent takes over, as everywhere
   else on these grounds; the picked word keeps a filled state, as on practice. */
body.ki.theme-kid :is(.nick-preview__cap, .nick-col__title) { color: var(--ki-blue); }
body.ki.theme-kid .nick-preview__name { color: #FFFFFF; }
body.ki.theme-kid .nick-preview--empty .nick-preview__name { color: var(--ki-ink-2); }
body.ki.theme-kid .nick-roll { background: transparent; border-color: var(--ki-blue); color: var(--ki-blue); }
body.ki.theme-kid .nick-roll:hover { background: rgba(255, 255, 255, .10); border-color: #FFFFFF; color: #FFFFFF; }
body.ki.theme-kid .nick-word__face:hover { border-color: var(--ki-blue); background: rgba(255, 255, 255, .08); }
body.ki.theme-kid .nick-word__input:checked + .nick-word__face { border-color: #FFFFFF; background: #FFFFFF; color: var(--ki-brand); }
body.ki.theme-kid .nick-word__input:focus-visible + .nick-word__face { outline-color: #E9C46A; }

/* Fo coach (appears after a hint). The three kinds keep their distinction as a
   left rule — hint light blue, explain lilac, limit ochre — on a stone well. */
body.ki.theme-kid .foc-bubble__body {
  background: var(--ki-stone); border: 1px solid var(--ki-rule-2); border-left: 4px solid var(--ki-blue); color: var(--ki-ink);
}
body.ki.theme-kid .foc-bubble--explain .foc-bubble__body { background: var(--ki-stone); border-color: var(--ki-rule-2); border-left-color: #C9BDF5; }
body.ki.theme-kid .foc-bubble--limit .foc-bubble__body { background: var(--ki-stone); border-color: var(--ki-rule-2); border-left-color: var(--ki-ochre-ink); color: var(--ki-ink); }
body.ki.theme-kid .foc-bubble__who,
body.ki.theme-kid .foc-bubble--explain .foc-bubble__who { color: var(--ki-blue); }
body.ki.theme-kid .foc-bubble--limit .foc-bubble__who { color: var(--ki-ochre-ink); }
body.ki.theme-kid :is(.foc-meter, .foc-reveal__note) { color: var(--ki-ink-3); }
body.ki.theme-kid .foc-nudge { color: var(--ki-ink); }
body.ki.theme-kid .foc-dots span { background: var(--ki-blue); }
body.ki.theme-kid .foc-explain-btn {
  background: transparent; color: #C9BDF5; border: 1px solid #C9BDF5; border-radius: var(--ki-r); min-height: 44px;
}
body.ki.theme-kid .foc-explain-btn:hover:not(:disabled) { background: rgba(201, 189, 245, .14); color: #FFFFFF; transform: none; }
body.ki.theme-kid .part-card__label { color: var(--ki-blue); }
body.ki.theme-kid .part-card__status { color: var(--ki-ink-2); }
body.ki.theme-kid div.sec-skill__go { border: 0; background: transparent; padding: 0; }

/* ── 11e. Learn / Virtual Lessons / Challenge labels. The per-tile --lh-ink is a
   DARK ink written for a light ground (1.6-2.1:1 here); on blue every label reads
   the light accent and the tile keeps its identity as the 4px top rule. ──── */
body.ki.theme-kid :is(.lh-tile__eyebrow, .lh-head__eyebrow, .lh-tile__go, .ch-eyebrow, .mock-eyebrow, .sec-intro__eyebrow) { color: var(--ki-blue); }
body.ki.theme-kid :is(.lh-tile__art, .lh-head__art) { color: var(--ki-blue); }

/* The rail's logo square: the light accent fill put white "K" at 1.78:1.
   Korva blue is the fill on every tier (ki_app.css says so; something later wins
   on kid pages, so it is restated here). */
body.ki.theme-kid .brand-mark { background: var(--ki-brand) !important; color: #FFFFFF; }