/* KIDS PAGES (foundation part 3). Loaded only on audience:"child" routes.
   Tokens live on [data-audience="child"], never on :root, so adult pages are
   untouched; site.css is not edited. No inline styles anywhere (the kids CSP
   has style-src 'self'); motion writes CSSOM transforms only. Light theme
   only: paper-white tracing is the teaching surface. */

/* A hidden element is hidden, whatever display its class sets (the stage,
   overlays and notices toggle the attribute). */
[hidden] { display: none !important; }

[data-audience="child"] {
  --kid-paper: #FFF8EC; --kid-surface: #FFFFFF; --kid-ink: #2B2118; --kid-ink-soft: #5C4A3A;
  --kid-sun: #FFC83D; --kid-sky: #8FD3F4; --kid-leaf: #8ED081; --kid-coral: #FF9E7A;
  --kid-plum: #5B3F8C; --kid-focus: #1A5FD0; --kid-go: #1E8E3E; --kid-trace-ink: #0F6E6E;
  --kid-model: #8A8078; --kid-model-faint: #BDB3A8;
  --art-red: #E4572E; --art-red-light: #F4B8A0; --art-red-shade: #BB2F00;
  --art-orange: #F28C28; --art-orange-light: #FACD9E; --art-orange-shade: #C56300;
  --art-yellow: #F6C945; --art-yellow-light: #FBE5A9; --art-yellow-shade: #C49800;
  --art-green: #6BBF59; --art-green-light: #C4E1B1; --art-green-shade: #42952E;
  --art-teal: #2A9D8F; --art-teal-light: #AAD4C7; --art-teal-shade: #007A6E;
  --art-blue: #4C8BF5; --art-blue-light: #B7CCF0; --art-blue-shade: #2966CD;
  --art-purple: #8E6CC8; --art-purple-light: #D2C0DE; --art-purple-shade: #6E4CA5;
  --art-pink: #F29CB7; --art-pink-light: #FAD3D7; --art-pink-shade: #C2718B;
  --art-brown: #9C6B44; --art-brown-light: #D7C0A9; --art-brown-shade: #7C4E27;
  --art-grey: #9AA0A6; --art-grey-light: #D7D5D0; --art-grey-shade: #747A80;
  --art-white: #FFFFFF; --art-cream: #F3E3C3;
  font-size: 18px;
  line-height: 1.5;
}

/* art fill classes (inline SVG on the page) */
.f-red { fill: var(--art-red); } .f-red-light { fill: var(--art-red-light); } .f-red-shade { fill: var(--art-red-shade); }
.f-orange { fill: var(--art-orange); } .f-orange-light { fill: var(--art-orange-light); } .f-orange-shade { fill: var(--art-orange-shade); }
.f-yellow { fill: var(--art-yellow); } .f-yellow-light { fill: var(--art-yellow-light); } .f-yellow-shade { fill: var(--art-yellow-shade); }
.f-green { fill: var(--art-green); } .f-green-light { fill: var(--art-green-light); } .f-green-shade { fill: var(--art-green-shade); }
.f-teal { fill: var(--art-teal); } .f-teal-light { fill: var(--art-teal-light); } .f-teal-shade { fill: var(--art-teal-shade); }
.f-blue { fill: var(--art-blue); } .f-blue-light { fill: var(--art-blue-light); } .f-blue-shade { fill: var(--art-blue-shade); }
.f-purple { fill: var(--art-purple); } .f-purple-light { fill: var(--art-purple-light); } .f-purple-shade { fill: var(--art-purple-shade); }
.f-pink { fill: var(--art-pink); } .f-pink-light { fill: var(--art-pink-light); } .f-pink-shade { fill: var(--art-pink-shade); }
.f-brown { fill: var(--art-brown); } .f-brown-light { fill: var(--art-brown-light); } .f-brown-shade { fill: var(--art-brown-shade); }
.f-grey { fill: var(--art-grey); } .f-grey-light { fill: var(--art-grey-light); } .f-grey-shade { fill: var(--art-grey-shade); }
.f-white { fill: var(--art-white); } .f-cream { fill: var(--art-cream); }

[data-audience="child"] :focus-visible { outline: 3px solid var(--kid-focus); outline-offset: 3px; }
.kids-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ parent surface */
.kids-page { max-width: 1040px; margin: 0 auto; padding: 0 16px 48px; }
.kids-page .kids-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; margin: 4px 0 4px; padding: 0; color: var(--kid-ink-soft); }
.kids-page .kids-crumb a { color: var(--kid-plum); display: inline-flex; min-height: 44px; align-items: center; margin: 0; padding: 0; }
.kids-page .kids-crumb span { margin: 0; padding: 0; }
.kids-top { display: grid; gap: 24px; }
.kids-hero .eyebrow { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kid-ink-soft); margin: 0 0 4px; }
.kids-hero h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.12; }
.kids-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kids-title-guide { flex: none; width: 96px; height: auto; aspect-ratio: 144 / 90; }
.kids-lede { margin: 0 0 8px; font-size: 18px; line-height: 1.4; color: var(--kid-ink); }
.kids-trust { margin: 0 0 16px; font-size: 14px; color: var(--kid-ink-soft); }
/* Phone: a small sample sheet beside the value line, so a parent sees what
   they get in the first screen without pushing Play and Print down (round 2,
   PO2-2). The hero's children join the .kids-top grid for this. */
@media (max-width: 899px) {
  .kids-top { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 12px; }
  .kids-hero { display: contents; }
  .kids-hero > * { grid-column: 1 / -1; }
  .kids-hero > .eyebrow { grid-row: 1; }
  .kids-hero > .kids-title-row { grid-row: 2; }
  .kids-hero > .kids-lede { grid-row: 3; grid-column: 1; }
  .kids-hero > .kids-trust { grid-row: 4; grid-column: 1; }
  .kids-top > .kids-preview { grid-row: 3 / span 2; grid-column: 2; margin: 0 0 12px; align-self: start; }
  .kids-top > .kids-preview figcaption { font-size: 12px; margin-top: 2px; }
}

.kids-nojs { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--kid-surface); border: 1px solid #E4DCCF; }
.kids-nojs p { margin: 0; }
.kids-nojs-guide { flex: none; width: 120px; height: 120px; }
/* the loading lantern: static markup, a gentle sway (decoration; the site's
   reduced-motion rule stops it, leaving the lantern still) */
.kids-loading { position: fixed; inset: 0; z-index: 49; display: grid; place-items: center; background: var(--kid-paper); }
.kids-loading[hidden] { display: none; }
.kids-loading-lantern { width: 112px; height: 112px; transform-origin: 50% 24%; animation: kids-sway 1.6s ease-in-out infinite alternate; }
@keyframes kids-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.kids-fields { display: grid; gap: 4px; margin-bottom: 12px; }
.kids-field-label { font-weight: 600; font-size: 16px; display: block; margin-top: 8px; }
.kids-name-input { min-height: 56px; font-size: 22px; padding: 8px 14px; border: 2px solid var(--kid-ink-soft); border-radius: 12px; background: var(--kid-surface); color: var(--kid-ink); width: 100%; box-sizing: border-box; }
.kids-help { margin: 2px 0; font-size: 14px; color: var(--kid-ink-soft); }
.kids-notice { margin: 2px 0; font-size: 15px; color: var(--kid-plum); min-height: 0; }
.kids-notice:empty { display: none; }
.kids-hint { margin: 6px 0; font-size: 15px; color: var(--kid-plum); }
.kids-remember .kids-help { margin-left: 34px; }
.kids-remembered { margin: 4px 0; font-size: 15px; }
.kids-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.kids-toggle input { width: 22px; height: 22px; accent-color: var(--kid-plum); flex: none; }
.kids-entry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 6px; }
@media (max-width: 359px) { .kids-entry-row { grid-template-columns: 1fr; } }
.kids-entry { min-height: 56px; border-radius: 20px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; cursor: pointer; border: 2px solid var(--kid-ink); text-align: left; }
.kids-entry svg { flex: none; }
.kids-entry-print { background: var(--kid-surface); color: var(--kid-ink); }
.kids-entry-play { background: var(--kid-sun); color: var(--kid-ink); }
.kids-entry[aria-busy="true"] { opacity: 0.7; }
.kids-adult-line { margin: 2px 0; font-size: 14px; color: var(--kid-ink-soft); }
.kids-text-button { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: 16px; color: var(--kid-plum); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kids-adult-line .kids-text-button { font-size: 14px; }
.kids-settings-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0; }
.kids-button { min-height: 44px; padding: 8px 18px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; background: var(--kid-plum); color: #FFFFFF; border: 2px solid var(--kid-plum); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.kids-button-secondary { background: var(--kid-surface); color: var(--kid-ink); border-color: var(--kid-ink-soft); }
.kids-button-danger { background: var(--kid-surface); color: #8A2A12; border-color: #8A2A12; }
.kids-button[disabled] { opacity: 0.5; cursor: default; }
.kids-button-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.kids-card { background: var(--kid-surface); border: 1px solid #E4DCCF; border-radius: 20px; padding: 14px 16px; margin: 10px 0; }
.kids-card p { margin: 0 0 8px; font-size: 16px; }
.kids-card-title { font-weight: 700; }
.kids-band-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0; }
@media (max-width: 359px) { .kids-band-row { grid-template-columns: 1fr; } }
.kids-band { min-height: 56px; border-radius: 16px; border: 2px solid var(--kid-ink); background: var(--kid-paper); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; padding: 6px 10px; }
.kids-stepup { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
.kids-stepup .kids-button-row { grid-column: 1 / -1; }
.kids-preview { margin: 16px 0; }
.kids-preview img, .kids-preview svg { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 696 / 936; background: #FFFFFF; border: 1px solid #E4DCCF; border-radius: 6px; }
.kids-preview figcaption { font-size: 14px; color: var(--kid-ink-soft); margin-top: 6px; }
/* The sample sheet in the article (a 696-wide <img>) and any figure beside it.
   Uncapped, it widened a 390px phone's layout viewport to 752px and pushed the
   print preview's Close and Print off-screen (production review MAJOR-2). */
.kids-figure { margin: 16px 0; }
.kids-figure img, .kids-figure svg { display: block; max-width: 100%; height: auto; }
.kids-guide-figure img { width: 320px; }
.kids-mark { display: inline-block; width: 28px; height: 28px; vertical-align: middle; margin: -4px 8px 0 0; }
@media (min-width: 900px) {
  .kids-top { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: start; }
  .kids-preview { position: sticky; top: 16px; margin-top: 0; }
}
.kids-options, .kids-class { margin: 16px 0; border-top: 1px solid #E4DCCF; padding-top: 8px; }
.kids-options summary, .kids-class summary, .kids-more summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.kids-segmented { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kids-segmented legend { font-weight: 600; font-size: 16px; padding: 0; margin-bottom: 6px; width: 100%; }
.kids-segmented label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 2px solid #D8CDBD; border-radius: 12px; background: var(--kid-surface); cursor: pointer; font-size: 15px; }
.kids-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kids-segmented label:has(input:checked) { border-color: var(--kid-plum); background: #F1EBF8; font-weight: 700; }
.kids-segmented label:has(input:focus-visible) { outline: 3px solid var(--kid-focus); outline-offset: 3px; }
.kids-stage-tiles { display: grid; grid-template-columns: repeat(5, 62px); gap: 12px; }
.kids-stage-tiles legend { grid-column: 1 / -1; }
.kids-stage-tiles label { flex-direction: column; justify-content: center; width: 62px; min-height: 72px; padding: 4px 2px; gap: 2px; font-size: 11px; text-align: center; line-height: 1.15; }
.kids-stage-tiles img { width: 52px; height: 36px; display: block; }
@media (max-width: 359px) { .kids-stage-tiles { grid-auto-flow: column; overflow-x: auto; } }
.kids-more select, .kids-corner select { min-height: 44px; font: inherit; font-size: 16px; border-radius: 10px; border: 2px solid #D8CDBD; background: var(--kid-surface); padding: 4px 10px; }
.kids-class textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; border-radius: 12px; border: 2px solid var(--kid-ink-soft); padding: 8px 12px; }
.kids-text { max-width: 720px; }
.kids-text h2 { margin-top: 32px; }
.kids-text section:first-child h2 { margin-top: 8px; }

/* ------------------------------------------------------------ dialogs */
dialog.kids-corner, dialog.kids-gate, dialog.kids-preview-dialog { border: 0; padding: 0; color: var(--kid-ink); background: var(--kid-surface); font-family: inherit; }
dialog.kids-corner::backdrop, dialog.kids-gate::backdrop, dialog.kids-preview-dialog::backdrop { background: rgba(43, 33, 24, 0.45); }
dialog.kids-corner { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; box-sizing: border-box; }
@media (min-width: 768px) { dialog.kids-corner { width: 480px; margin: 0 0 0 auto; border-left: 1px solid #E4DCCF; } }
.kids-corner-head, .kids-preview-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--kid-surface); border-bottom: 1px solid #E4DCCF; }
.kids-corner-head h2, .kids-preview-head h2 { font-size: 20px; margin: 0; flex: 1; }
.kids-corner-close { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--kid-ink-soft); background: var(--kid-surface); font: inherit; font-weight: 600; cursor: pointer; }
.kids-corner-body { padding: 0 16px 32px; font-size: 16px; }
.kids-corner-section { border-bottom: 1px solid #EFE7DA; padding: 12px 0; }
.kids-corner-section h3 { font-size: 17px; margin: 4px 0 8px; }
.kids-profile-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.kids-profile { border: 1px solid #EFE7DA; border-radius: 16px; padding: 10px 12px; }
.kids-profile-row { display: flex; align-items: center; gap: 12px; }
.kids-profile-name { font-weight: 700; margin: 0; }
.kids-profile .kids-help { margin: 0; }
.kids-animal-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.kids-animal-choice { min-width: 64px; min-height: 64px; border-radius: 50%; border: 2px solid transparent; background: none; padding: 0; cursor: pointer; }
.kids-animal-choice[disabled] { opacity: 0.35; cursor: default; }
.kids-confirm { background: var(--kid-paper); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.kids-offer { background: #F1EBF8; border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.kids-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.kids-toast { margin: 0; padding: 0 16px; font-weight: 600; color: var(--kid-plum); }
.kids-toast:empty { display: none; }
.kids-corner input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--kid-plum); }
.kids-corner-link a { color: var(--kid-plum); display: inline-flex; min-height: 44px; align-items: center; }
dialog.kids-gate { width: min(360px, calc(100vw - 32px)); border-radius: 20px; padding: 16px 20px 12px; font-size: 18px; }
.kids-gate h2 { margin: 0 0 8px; font-size: 20px; }
.kids-gate-task { margin: 0 0 4px; font-size: 18px; }
.kids-gate-retry { margin: 0; min-height: 24px; color: var(--kid-plum); font-weight: 600; }
.kids-gate-display { display: block; text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 0.2em; margin: 6px 0 10px; min-height: 42px; }
.kids-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kids-key { min-height: 56px; border-radius: 12px; border: 2px solid #D8CDBD; background: var(--kid-paper); font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; color: var(--kid-ink); }
.kids-key-del, .kids-key-ok { font-size: 16px; }
.kids-key-ok { background: var(--kid-plum); color: #FFFFFF; border-color: var(--kid-plum); }
.kids-gate .kids-text-button { margin-top: 6px; }
dialog.kids-preview-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; }
@media (min-width: 768px) { dialog.kids-preview-dialog { width: 760px; max-width: calc(100vw - 32px); height: calc(100dvh - 48px); margin: 24px auto; border-radius: 20px; } }
.kids-preview-dialog > .kids-help, .kids-preview-dialog > .kids-hint { padding: 0 16px; }
.kids-preview-count { margin: 0; font-size: 15px; color: var(--kid-ink-soft); }
.kids-thumbs { display: grid; gap: 16px; padding: 8px 16px 96px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .kids-thumbs { grid-template-columns: 1fr 1fr; } }
.kids-thumb { margin: 0; }
.kids-thumb svg { width: 100%; height: auto; aspect-ratio: 696 / 936; border: 1px solid #E4DCCF; display: block; }
.kids-thumb figcaption { font-size: 14px; color: var(--kid-ink-soft); }
.kids-print-bar { position: sticky; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--kid-surface); border-top: 1px solid #E4DCCF; }
.kids-print-bar .kids-button { width: 100%; min-height: 56px; font-size: 18px; }

/* ------------------------------------------------------------ the child stage */
html.kids-stage-open, html.kids-stage-open body { overflow: hidden; }
.kids-stage { position: fixed; inset: 0; height: 100dvh; z-index: 50; background: var(--kid-paper); overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; color: var(--kid-ink); }
.kids-stage[hidden] { display: none; }
.kids-stage button { touch-action: manipulation; font: inherit; }
.kids-topbar { position: absolute; top: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; box-sizing: border-box; }
.kids-stage[data-hand="left"] .kids-topbar { flex-direction: row-reverse; }
.kids-ear { width: 64px; height: 64px; border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; flex: none; }
.kids-ear-face { fill: var(--kid-sky); stroke: var(--kid-ink); stroke-width: 3; }
.kids-ear-mark { stroke: var(--kid-ink); }
.kids-ear-playing .kids-ear-face { stroke: var(--kid-plum); stroke-width: 5; }
.kids-strip-wrap { flex: 1; height: 36px; display: flex; justify-content: center; pointer-events: none; min-width: 0; padding: 0 8px; }
.kids-strip { height: 100%; width: 100%; max-width: 220px; }
.kids-strip-lit { stroke: var(--kid-ink); }
.kids-strip-dim { stroke: var(--kid-model-faint); }
.kids-grownups { width: 56px; height: 56px; border: 0; background: none; padding: 0; margin-left: 48px; border-radius: 50%; cursor: pointer; flex: none; }
.kids-stage[data-hand="left"] .kids-grownups { margin-left: 0; margin-right: 48px; }
.kids-grownups-face { fill: var(--kid-paper); stroke: var(--kid-model-faint); stroke-width: 2; }
.kids-grownups-mark { stroke: var(--kid-model); }
.kids-grownups-fill { fill: var(--kid-model); }
.kids-hold-ring { stroke: var(--kid-plum); }
.kids-grownups[disabled] { opacity: 0.3; }
.kids-play { position: absolute; top: 72px; left: 16px; right: 16px; height: calc((100dvh - 128px) * 0.62); }
.kids-trace { position: relative; width: 100%; height: 100%; touch-action: none; border-radius: 20px; outline-offset: -3px; }
.kids-trace-svg, .kids-trace-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kids-trace-svg { overflow: visible; }
.kids-trace-ink { pointer-events: none; }
.kids-guide { position: absolute; left: 12px; bottom: 60px; top: calc(72px + (100dvh - 128px) * 0.62 + 4px); width: 118px; display: flex; align-items: flex-end; pointer-events: none; }
.kids-stage[data-hand="left"] .kids-guide { left: auto; right: 12px; }
.kids-guide-svg { width: 100%; height: 100%; max-height: 118px; }
.kids-stage[data-screen="home"] .kids-guide { z-index: 1; }
.kids-guide[data-away] { visibility: hidden; }
.kids-guide[data-whisper], .kids-done-guide[data-whisper] { pointer-events: auto; cursor: pointer; }
.kids-ear-dim { opacity: 0.45; }
.kids-caption { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 180px); padding: 8px 14px; border-radius: 999px; background: var(--kid-surface); font-size: 18px; text-align: center; box-shadow: 0 1px 0 #E4DCCF; }
.kids-stage:not(.kids-captions-on) .kids-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.kids-overlay { position: absolute; inset: 72px 0 0 0; display: grid; place-items: center; background: var(--kid-paper); padding: 8px 16px 64px; box-sizing: border-box; overflow: hidden; }
.kids-overlay[hidden] { display: none; }
.kids-hero-screen { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.kids-hero-guide { width: clamp(160px, 26vh, 200px); height: auto; aspect-ratio: 224 / 234; }
.kids-pick-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 264px; }
.kids-pick { width: 120px; height: 120px; border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; }
.kids-intro svg { width: min(180px, 46vw); height: auto; }
.kids-done, .kids-home { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kids-done-guide { width: 170px; height: 178px; }
.kids-sticker-fly { width: 96px; height: 96px; }
.kids-big-row { display: flex; gap: 24px; justify-content: center; }
.kids-big-row[hidden] { display: none; }
.kids-big { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--kid-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.kids-big-again { background: var(--kid-sun); }
.kids-big-stop { background: var(--kid-coral); }
.kids-night { background: #1F2A48; border-radius: 28px; padding: 24px 32px; }
.kids-overlay[data-kids-overlay="break"] { background: #1F2A48; }
.kids-book-page { position: relative; }
.kids-book-guide { position: absolute; right: -14px; top: -66px; width: 76px; height: 76px; pointer-events: none; }
.kids-book { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.kids-slot { width: 96px; height: 96px; border-radius: 20px; background: var(--kid-surface); border: 2px solid #EDE3D3; display: grid; place-items: center; padding: 0; cursor: pointer; }
.kids-slot-empty { background: transparent; border: 3px dotted var(--kid-model-faint); border-radius: 50%; width: 78px; height: 78px; margin: 9px; cursor: default; }
.kids-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (min-width: 768px) and (min-height: 600px) {
  .kids-topbar { height: 80px; padding: 0 20px; }
  .kids-play { top: 80px; left: 50%; right: auto; width: min(720px, calc(100% - 32px)); transform: translateX(-50%); height: calc((100dvh - 136px) * 0.64); }
  .kids-guide { top: calc(80px + (100dvh - 136px) * 0.64 + 4px); width: 150px; left: calc(50% - min(360px, 50% - 16px)); }
  .kids-guide-svg { max-height: 150px; }
  .kids-overlay { inset: 80px 0 0 0; }
  .kids-pick-grid { max-width: 552px; }
  .kids-book { grid-template-columns: repeat(9, 96px); }
}
@media (min-width: 1024px) and (pointer: fine) {
  .kids-stage { background: #F3EADB; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .kids-topbar { position: absolute; inset: 0; height: auto; pointer-events: none; padding: 0; }
  .kids-topbar > * { pointer-events: auto; }
  .kids-ear { position: absolute; top: 8px; left: 4px; }
  .kids-grownups { position: absolute; top: 8px; right: 8px; margin: 0; }
  .kids-stage[data-hand="left"] .kids-ear { left: auto; right: 4px; }
  .kids-stage[data-hand="left"] .kids-grownups { right: auto; left: 8px; margin: 0; }
  .kids-strip-wrap { position: absolute; top: 4px; left: 88px; right: 88px; height: 28px; }
  .kids-play { top: 36px; bottom: 8px; left: 88px; right: 88px; height: auto; }
  .kids-guide { top: auto; bottom: 8px; left: 0; width: 84px; height: 88px; }
  .kids-overlay { inset: 0 80px; }
  .kids-hero-screen { flex-direction: row; gap: 32px; }
  .kids-hero-guide { width: min(170px, 44vh); }
  .kids-pick-grid { max-width: 264px; }
}

/* ------------------------------------------------------------ speech: start (K4 speech spec 4; tokens only, no literal colours) */
.kids-speech-parent { display: grid; gap: 8px; }
.kids-speech-activity { width: 100%; justify-content: flex-start; padding: 6px 14px; }
.kids-speech-answered { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; }
.kids-speech-answered p { margin: 0; }
.kids-speech-reveal { display: grid; gap: 10px; padding: 2px 0 10px; }
.kids-speech-setup { display: grid; gap: 10px; margin-top: 6px; }
.kids-speech-chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.kids-speech-chips legend { font-weight: 700; font-size: 16px; padding: 0; margin: 0 0 6px; }
.kids-speech-chips label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; border: 1px solid var(--kid-model); border-radius: 12px; background: var(--kid-surface); cursor: pointer; font-size: 15px; box-sizing: border-box; }
.kids-speech-chips label:has(input:checked) { border: 2px solid var(--kid-plum); font-weight: 700; }
.kids-speech-chips label:has(input:focus-visible) { outline: 3px solid var(--kid-focus); outline-offset: 3px; }
.kids-speech-chips input { accent-color: var(--kid-plum); width: 18px; height: 18px; margin: 0; }
.kids-speech-chips img, .kids-pairs img { width: 48px; height: 48px; }
.kids-week-row { display: flex; gap: clamp(6px, 3vw, 16px); margin: 6px 0; }
.kids-week-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; color: var(--kid-ink-soft); min-width: 28px; }
.kids-week-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--kid-model); box-sizing: border-box; }
.kids-week-on { background: var(--kid-plum); border-color: var(--kid-plum); }
.kids-week-today { font-size: 12px; }
.kids-referral { border-left: 4px solid var(--kid-plum); }
.kids-typical { border-collapse: collapse; width: 100%; font-size: 15px; }
.kids-typical th, .kids-typical td { border-bottom: 1px solid var(--kid-model); padding: 6px 4px; text-align: left; vertical-align: top; }
.kids-words { columns: 2; padding-left: 20px; }
.kids-pairs { list-style: none; padding: 0; display: grid; gap: 6px; }
.kids-pairs li { display: flex; align-items: center; gap: 8px; }
.kids-guide-listen { width: 64px; height: 64px; float: left; margin: 0 10px 6px 0; }
.kids-listen { height: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; }
.kids-listen-card, .kids-say-card { position: relative; display: grid; place-items: center; padding: 0; border-radius: 28px; background: var(--kid-surface); border: 2px solid var(--kid-model-faint); cursor: pointer; transition: transform 0.25s, opacity 0.25s; }
.kids-listen-card { width: min(164px, calc(50vw - 32px)); height: min(164px, calc(50vw - 32px)); }
.kids-listen-card svg { width: 85%; height: 85%; }
.kids-say { height: 100%; display: grid; place-items: center; }
.kids-say-card { width: min(248px, 70vw, 56dvh); height: min(248px, 70vw, 56dvh); }
.kids-say-card svg { width: 84%; height: 84%; overflow: visible; }
.kids-enter { opacity: 0; transform: translateY(12px); }
.kids-ring { box-shadow: 0 0 0 4px var(--kid-paper), 0 0 0 7px var(--kid-ink); }
.kids-helper-ring { position: absolute; inset: -10px; border: 4px solid var(--kid-plum); border-radius: 34px; pointer-events: none; animation: kids-helper 0.8s ease-in-out 2; }
.kids-helper-static { animation: none; transform: scale(1.1); }
@keyframes kids-helper { 50% { transform: scale(1.15); } }
.kids-wave { stroke: var(--kid-ink); }
.kids-wave-draw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: kids-wave-draw 1.2s forwards; }
@keyframes kids-wave-draw { to { stroke-dashoffset: 0; } }
.kids-seg { fill: none; stroke: var(--kid-model); stroke-width: 2; transition: fill 0.25s; }
.kids-seg-lit { fill: var(--art-yellow); stroke: var(--kid-ink); }
.kids-tally { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--kid-paper); border-top: 1px solid var(--kid-model-faint); box-sizing: border-box; }
.kids-tally[hidden], .kids-tally-line:empty, .kids-tally-row:empty { display: none; }
.kids-tally-line { margin: 0; font-size: clamp(14px, 4vw, 16px); font-weight: 600; color: var(--kid-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kids-tally-row { display: flex; gap: 12px; }
.kids-tally-button { flex: 1; min-height: 48px; border-radius: 12px; border: 2px solid var(--kid-ink-soft); background: var(--kid-surface); color: var(--kid-ink); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: opacity 0.15s; -webkit-touch-callout: none; }
.kids-tally-button:active { opacity: 0.7; }
.kids-stage[data-speech-strip-on] .kids-guide { bottom: 104px; }
.kids-stage[data-speech-strip-on] .kids-caption { bottom: 108px; }
.kids-plenty { position: static; border: 0; background: none; padding: 0; text-align: center; font-weight: 600; max-width: 326px; }
.kids-garden { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kids-garden-row { display: flex; gap: 12px; justify-content: center; border-top: 2px solid var(--kid-ink-soft); border-radius: 50% 50% 0 0 / 14px 14px 0 0; padding-top: 2px; }
.kids-garden-strip .kids-garden-row:not(:has(.kids-lantern-new)) { display: none; }
.kids-lantern { width: 64px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.25s; }
.kids-lantern-new { animation: kids-lantern-in 0.6s; }
@keyframes kids-lantern-in { from { transform: scale(0.6); opacity: 0; } }
.kids-lift { transform: scale(1.04); }
.kids-lantern-ink { stroke: var(--kid-ink); }
.kids-lantern-line { stroke: var(--kid-ink-soft); }
.kids-hook { display: inline-block; width: 64px; height: 80px; }
.kids-hook-ring { stroke: var(--kid-model-faint); }
.kids-garden-ground { width: min(326px, 100%); height: auto; }
.kids-garden-nav { display: flex; gap: 24px; }
.kids-garden-arrow, .kids-garden-button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--kid-ink); background: var(--kid-surface); color: var(--kid-ink); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
/* speech: end */

/* ------------------------------------------------------------ print (foundation 2.6) */
@page { size: auto; margin: 0.4in; }
.kids-print-root { display: none; }
@media print {
  body.kids-print-ready > *:not(.kids-print-root) { display: none !important; }
  body.kids-print-ready .kids-print-root { display: block; }
  .kids-sheet { width: 7.25in; height: 9.75in; margin: 0 auto; break-after: page; page-break-after: always; }
  .kids-sheet:last-child { break-after: auto; page-break-after: auto; }
  .kids-sheet svg { width: 7.25in; height: 9.75in; display: block; }
}