/* ===== AI for the Curious: the Curious Kids layer (ages 8 to 12) =====
   Loaded after site.css on every page in Website/kids/. Same palette and fonts as the site,
   with bigger text, bigger tap targets (48px or more), rounder cards, and more color. */

/* hidden always wins over layout rules like display:grid */
body.kids [hidden]{display:none!important}

:root{--kid-sun:#F2C14E;--kid-sky:#7FB7D9;--kid-leaf:#8DBF7A;--kid-berry:#C77DA8;--kid-r:22px}
body.kids{font-size:19.5px;line-height:1.62;background:
  radial-gradient(1200px 500px at 10% -10%,color-mix(in srgb,var(--kid-sun) 16%,transparent),transparent 70%),
  radial-gradient(900px 500px at 110% 10%,color-mix(in srgb,var(--kid-sky) 14%,transparent),transparent 70%),var(--bg)}
body.kids main .wrap{max-width:880px}
body.kids h1{font-size:clamp(2rem,6vw,2.9rem);line-height:1.15}
body.kids h2{font-size:clamp(1.45rem,4vw,1.8rem)}
:where(body.kids) p{margin:0 0 .8em}   /* low priority, so class rules (.question-now, .learned, ...) keep their own spacing */
body.kids .btn{min-height:52px;padding:12px 24px;border-radius:16px;font-size:1.02rem}
body.kids :focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.kid-nav{display:flex;gap:6px 18px;flex-wrap:wrap}

/* lesson header */
.kl-head{padding:clamp(26px,5vw,44px) 0 6px}
.kl-kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px}
.kl-art{width:100%;height:auto;border-radius:var(--kid-r);display:block;margin:14px 0 8px}
.kl-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:12px 0 0}
.slot{display:flex;align-items:center;gap:12px;border:2px dashed var(--line);border-radius:var(--kid-r);padding:8px 14px 8px 8px;background:var(--surface)}
.slot img{width:64px;height:auto;filter:grayscale(1) opacity(.35);transition:filter .5s}
.slot.got{border-style:solid;border-color:var(--good);background:var(--good-soft)}
.slot.got img{filter:none}
.slot span{font-size:.92rem;color:var(--muted)}
.slot.got span{color:var(--ink);font-weight:700}

/* Read to me */
.rtm{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rtm .btn{gap:8px}
.rtm .rate{font-size:.9rem;color:var(--muted);display:flex;gap:6px;align-items:center}
.rtm .rate button{min-height:44px;min-width:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:.9rem;cursor:pointer;padding:0 12px}
.rtm .rate button[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:#fff}
.rtm-note{font-size:.82rem;color:var(--faint);margin:6px 0 0}
.reading{outline:4px solid color-mix(in srgb,var(--kid-sun) 70%,transparent);outline-offset:6px;border-radius:14px}

/* blocks */
.kblock{margin:34px 0 0}
.kblock>h2{display:flex;align-items:center;gap:10px;margin:0 0 .5em}
.kblock>h2 img{width:48px;height:auto}
.card-k{border:1px solid var(--line);border-radius:var(--kid-r);background:var(--surface-2);box-shadow:var(--shadow);padding:clamp(16px,3.5vw,24px)}
.idea-text{font-size:1.05rem}
.learned{margin:12px 0 0;border-radius:14px;padding:10px 14px;background:var(--good-soft);border:1px solid var(--good);font-weight:700}
.learned::before{content:"What we learned: ";color:var(--good)}
.pretend{display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--cyan);color:var(--cyan);border-radius:8px;padding:2px 8px;vertical-align:middle}

/* story panels (KF01) */
.story{position:relative}
.panel{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:center}
.panel img{width:100%;height:auto}
.panel .lines p{margin:0 0 .5em}
.panel .who{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);display:block}
.story-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:16px 0 0}
.dots{display:flex;gap:6px}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--line);display:block}
.dots i.on{background:var(--accent)}
@media(max-width:560px){.panel{grid-template-columns:1fr}.panel img{max-width:150px;margin:0 auto}}

/* big choice buttons (used by many games) */
.big-opts{display:flex;flex-direction:column;gap:10px}
.big-opts.row{flex-direction:row;flex-wrap:wrap}
.kopt{min-height:56px;font:inherit;font-size:1.02rem;text-align:left;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:12px 16px;cursor:pointer}
.big-opts.row .kopt{flex:1 1 160px;text-align:center;font-weight:700}
.kopt:hover{border-color:var(--accent)}
.kopt.yes{border-color:var(--good);background:var(--good-soft)}
.kopt.no{border-color:var(--accent);background:var(--accent-soft)}
.kopt[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan-soft)}
.kopt:disabled{cursor:default}
.kfb{margin:12px 0 0;min-height:1.6em;font-weight:600}
.kfb.ok{color:var(--good)} .kfb.no{color:var(--accent-ink)}
.kprog{font-family:var(--mono);font-size:.82rem;color:var(--muted);margin:0 0 8px}

/* sorting (KF02, KF07, KF09) */
.ktray{display:flex;flex-wrap:wrap;gap:8px;min-height:60px;padding:10px;border:2px dashed var(--line);border-radius:16px;margin:0 0 12px}
.kchip{min-height:52px;font:inherit;font-size:1rem;border:2px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink);padding:8px 14px;cursor:pointer}
.kchip[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan-soft)}
.kchip.good{border-color:var(--good)} .kchip.bad{border-color:var(--accent);background:var(--accent-soft)}
.kbins{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kbin{border:2px solid var(--line);border-radius:18px;background:var(--surface);padding:10px;min-height:120px;display:flex;flex-direction:column;gap:8px}
.kbin .kbh{min-height:52px;font:inherit;font-weight:700;font-size:1.02rem;border-radius:12px;border:0;background:var(--c,var(--cyan));color:#fff;cursor:pointer}
.kbin .kbh:disabled{opacity:.6}
@media(max-width:480px){.kbins{grid-template-columns:1fr}}
.pip-says{display:flex;gap:12px;align-items:flex-start;margin:12px 0 0}
.pip-says img{width:70px;height:auto;flex:none}
.pip-says .bubble{border:2px solid var(--cyan);border-radius:18px 18px 18px 4px;background:var(--cyan-soft);padding:10px 14px}

/* Pip chat (KF05) */
.chatbox{display:flex;flex-direction:column;gap:10px;max-height:none}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:92%}
.msg img{width:52px;height:auto;flex:none}
.msg .b{border-radius:18px;padding:10px 14px;background:var(--surface);border:1px solid var(--line)}
.msg.pip .b{border-color:var(--cyan);background:var(--cyan-soft);border-bottom-left-radius:4px}
.msg.me{align-self:flex-end}
.msg.me .b{background:var(--accent);color:#fff;border-color:var(--accent);border-bottom-right-radius:4px}
.chat-type{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.chat-type input{flex:1 1 200px;min-height:52px;font:inherit;border:2px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--surface);color:var(--ink)}
.chat-note{font-size:.85rem;color:var(--muted);margin:6px 0 0}

/* spot the clue (KF04), fix the question (KF06), build a card (KF11) */
.scene{border-radius:16px;background:var(--surface);border:1px solid var(--line);padding:14px 16px;margin:0 0 12px}
.qbuild{display:flex;flex-direction:column;gap:12px}
.qbuild label{font-weight:700;display:block;margin:0 0 4px}
.qbuild .opts{display:flex;flex-wrap:wrap;gap:8px}
.question-now{font-size:1.1rem;border:2px dashed var(--accent);border-radius:16px;padding:10px 14px;margin:12px 0 0;background:var(--surface-2)}
.rules-card{border:3px solid var(--accent);border-radius:24px;padding:20px 22px;background:var(--surface-2);margin:14px 0 0}
.rules-card h3{margin:0 0 8px}
.rules-card ol{margin:0;padding-left:1.3em} .rules-card li{margin:6px 0}

/* order (KF12), match (KF10) */
.korder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:o}
.korder li{display:flex;align-items:center;gap:10px;border:2px solid var(--line);border-radius:16px;background:var(--surface);padding:8px 10px;counter-increment:o}
.korder li::before{content:counter(o);font-weight:700;color:var(--accent-ink);min-width:1.4em;text-align:center}
.korder li span{flex:1}
.korder button{min-width:48px;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:1.1rem;cursor:pointer}
.korder button:disabled{opacity:.3;cursor:default}
.kmatch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kmatch .col{display:flex;flex-direction:column;gap:8px}
.kmatch .kopt.paired{border-color:var(--good);background:var(--good-soft)}

/* try it, check it, word jar, grown-up corner */
.tryit-k{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:start}
.tryit-k img{width:100%;height:auto}
@media(max-width:520px){.tryit-k{grid-template-columns:1fr}.tryit-k img{max-width:90px}}
.tryit-k ol,.tryit-k ul{margin:.3em 0 .6em;padding-left:1.2em}
.check-q{border-top:1px dashed var(--line);padding:16px 0 4px}
.check-q:first-of-type{border-top:0;padding-top:0}
.check-q .qt{font-weight:700;font-size:1.08rem;margin:0 0 10px}
.check-q.done .qt::after{content:"  ✓";color:var(--good)}
.earned{display:none;text-align:center;border:3px solid var(--good);border-radius:26px;background:var(--good-soft);padding:20px;margin:20px 0 0}
.earned.show{display:block}
.earned img{width:150px;height:auto}
.words{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.word{border:2px solid var(--line);border-radius:18px;background:var(--surface-2);padding:12px 16px}
.word b{display:block;font-size:1.1rem;color:var(--accent-ink)}
details.grownup{border:1px solid var(--line);border-radius:var(--kid-r);background:var(--surface);padding:0 18px;font-size:1rem}
details.grownup>summary{cursor:pointer;min-height:56px;display:flex;align-items:center;gap:12px;font-weight:700}
details.grownup>summary img{width:44px;height:auto}
details.grownup[open]{padding-bottom:16px}
details.grownup h3{font-size:1.02rem;margin:14px 0 4px}
.next-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:30px 0 60px}
.btn.is-off{opacity:.45;pointer-events:none}

/* sticker flying into the slot, owl cheer */
.sticker-fly{position:fixed;z-index:90;width:160px;height:auto;pointer-events:none;transition:transform .9s cubic-bezier(.5,1.6,.4,1),opacity .9s}
.owl-cheer{position:fixed;left:50%;bottom:18px;transform:translate(-50%,160%);z-index:80;display:flex;align-items:center;gap:12px;background:var(--surface-2);border:2px solid var(--kid-sun);border-radius:20px;box-shadow:var(--shadow);padding:8px 16px 8px 8px;transition:transform .4s ease;font-weight:700;max-width:calc(100vw - 24px)}
.owl-cheer img{width:64px;height:auto}
.owl-cheer.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion: reduce){
  .sticker-fly{display:none}
  .owl-cheer{transition:none}
  .slot img{transition:none}
}

/* kids hub */
.hub-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;padding:clamp(26px,5vw,44px) 0 0}
.hub-hero img{width:100%;height:auto;border-radius:var(--kid-r)}
@media(max-width:700px){.hub-hero{grid-template-columns:1fr}}
.cast img{width:100%;height:auto;border-radius:var(--kid-r)}
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.lcard{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--kid-r);background:var(--surface-2);overflow:hidden;text-decoration:none;color:var(--ink);min-height:100%}
a.lcard:hover{border-color:var(--accent)}
.lcard .art{aspect-ratio:3/2;background:var(--surface);display:block}
.lcard .art img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .body{padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.lcard .num{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--accent-ink)}
.lcard .t{font-weight:700;font-size:1.1rem;line-height:1.3}
.lcard .st{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:.88rem;color:var(--muted)}
.lcard .st img{width:40px;height:auto;filter:grayscale(1) opacity(.35)}
.lcard.got .st img{filter:none}
.lcard.got .st{color:var(--good);font-weight:700}
.lcard.soon{opacity:.7}
.grownbox{border:2px solid var(--cyan);border-radius:var(--kid-r);background:var(--surface);padding:16px 20px;font-size:1rem}
.grownbox h2{font-size:1.3rem;margin:0 0 6px}

/* sticker book, certificate */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.album .spot{border:2px dashed var(--line);border-radius:var(--kid-r);padding:12px;text-align:center;background:var(--surface);text-decoration:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px}
.album .spot img{width:100%;max-width:120px;height:auto;filter:grayscale(1) opacity(.25)}
.album .spot.got{border-style:solid;border-color:var(--good);background:var(--good-soft);color:var(--ink)}
.album .spot.got img{filter:none}
@media print{
  body.kids{background:#fff}
  .site-header,.site-footer,.no-print,.owl-cheer{display:none!important}
}

/* instruction line above a sorting game */
.game .kintro{font-weight:600;margin:0 0 12px}

/* order the steps: ticks after a check, and the button row */
.korder li.right{border-color:var(--good)}
.korder .tick{color:var(--good);font-weight:700;margin-left:4px}
.korder-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}