/* ─────────────────────────────
   Signify Kids — kids.v1.css
   Loaded after site.v1.css on /kids/* pages. Same family, kid register:
   honey promoted to the lead accent, Fraunces set heavier, larger type,
   rounder corners, bigger targets. Jade stays as the structural voice.
   ───────────────────────────── */

.kids-world{
  --honey:#c9761f;--honey-deep:#9a4f1e;--honey-soft:rgba(201,118,31,.10);--honey-line:rgba(201,118,31,.28);
  --bloom:#b6407a;--bloom-soft:rgba(182,64,122,.10);
  --kid-radius:18px;--kid-radius-lg:26px;
  --tap:48px;
}
html.dark .kids-world{
  --honey:#f0b27a;--honey-deep:#d8935a;--honey-soft:rgba(240,178,122,.12);--honey-line:rgba(240,178,122,.30);
  --bloom:#f08fbb;--bloom-soft:rgba(240,143,187,.12);
}

/* ─── Type: Fraunces carries real weight in the kid world ─── */
.kids-world{font-size:16px;line-height:1.6}
.kids-world h1,.kids-world h2,.kids-world h3{font-weight:600;letter-spacing:-.02em}
.kids-world h1{font-size:clamp(30px,5.5vw,48px);line-height:1.05}
.kids-world h2{font-size:clamp(22px,3.4vw,30px);line-height:1.12}
.kids-world h3{font-size:19px}
.kids-world h1 em,.kids-world h2 em,.kids-world h3 em{color:var(--honey);font-weight:600}
.kids-world .k-lede{font-size:17px;color:var(--ink-soft);max-width:56ch}
.kids-world .k-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--honey)}

/* ─── Layout ─── */
.k-page{padding:34px 0 60px}
.k-head{margin-bottom:26px}
.k-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.k-panel{background:var(--surface);border:1px solid var(--hair);border-radius:var(--kid-radius-lg);
  padding:26px;box-shadow:var(--shadow-card)}
.k-panel+.k-panel{margin-top:18px}

/* ─── Buttons: bigger targets, honey lead ─── */
.k-btn{min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 24px;border-radius:999px;background:var(--honey);color:#fff;border:1px solid var(--honey);
  font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,.7,.3,1),background .2s,box-shadow .2s}
html.dark .k-btn{color:#1a1005}
.k-btn:hover{background:var(--honey-deep);border-color:var(--honey-deep);transform:translateY(-2px)}
.k-btn:active{transform:translateY(0) scale(.98)}
.k-btn[disabled]{opacity:.45;pointer-events:none}
.k-btn.ghost{background:transparent;color:var(--honey)}
.k-btn.ghost:hover{background:var(--honey-soft);color:var(--honey-deep)}
html.dark .k-btn.ghost{color:var(--honey)}
.k-btn.jade{background:var(--jade);border-color:var(--jade);color:var(--paper)}
.k-btn.jade:hover{background:var(--jade-deep);border-color:var(--jade-deep)}
.k-btn.sm{min-height:44px;font-size:13px;padding:0 16px}

/* ─── Inputs ─── */
.k-field{display:block;margin:0 0 6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.k-input,.k-area{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--surface-2);
  border:1.5px solid var(--hair-2);border-radius:14px;padding:14px 16px;transition:border-color .18s,box-shadow .18s}
.k-area{min-height:110px;resize:vertical;line-height:1.5}
.k-input:focus,.k-area:focus{outline:none;border-color:var(--honey);box-shadow:0 0 0 4px var(--honey-soft)}
.k-hint{font-size:13.5px;color:var(--ink-mute);margin-top:8px}

/* ─── Pollen + level bar ─── */
.k-meter{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.k-pollen{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;color:var(--honey-deep);background:var(--honey-soft);
  border:1px solid var(--honey-line);border-radius:999px;padding:6px 13px}
html.dark .k-pollen{color:var(--honey)}
.k-level{flex:1;min-width:170px}
.k-level-top{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:6px}
.k-track{height:9px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.k-fill{height:100%;background:var(--honey);border-radius:999px;transition:width .7s cubic-bezier(.16,.7,.3,1)}

/* ─── The Garden ─── */
.k-garden{position:relative;border:1px solid var(--hair);border-radius:var(--kid-radius-lg);
  background:var(--surface-2);padding:8px;overflow:hidden;box-shadow:var(--shadow-card)}
.k-garden svg{width:100%;height:auto;display:block}
.k-plot{cursor:pointer}
.k-plot .cell{fill:var(--surface);stroke:var(--hair-2);stroke-width:1}
.k-plot.is-empty .cell{fill:none;stroke-dasharray:4 5;stroke:var(--hair-2)}
.k-plot.is-done .cell{fill:var(--honey-soft);stroke:var(--honey-line)}
.k-plot:hover .cell{stroke:var(--honey);stroke-width:1.6}
.k-plot .glyph{transition:transform .4s cubic-bezier(.16,.7,.3,1)}
.k-plot:hover .glyph{transform:translateY(-3px)}
.k-plot text{font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;
  text-transform:uppercase;fill:var(--ink-mute)}
.k-plot.is-done text{fill:var(--honey-deep)}
html.dark .k-plot.is-done text{fill:var(--honey)}
@media (prefers-reduced-motion:no-preference){
  .k-plot.just-bloomed .glyph{animation:kbloom .8s cubic-bezier(.16,.9,.3,1) both}
}
@keyframes kbloom{0%{transform:scale(.2) translateY(10px);opacity:0}60%{transform:scale(1.12) translateY(0)}100%{transform:none;opacity:1}}

/* ─── Challenge cards on the hub ─── */
.k-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.k-card{display:flex;flex-direction:column;gap:9px;padding:22px;border-radius:var(--kid-radius);
  border:1px solid var(--hair);background:var(--surface);color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow-card);transition:transform .4s cubic-bezier(.16,.7,.3,1),box-shadow .4s,border-color .3s}
.k-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);border-color:var(--honey-line)}
.k-card h3{margin:0}
.k-card p{margin:0;font-size:14.5px;color:var(--ink-soft);flex:1}
.k-card .k-meta{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.k-card.is-locked{opacity:.62;pointer-events:none}
.k-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;background:var(--honey-soft);color:var(--honey-deep)}
html.dark .k-tag{color:var(--honey)}
.k-tag.done{background:var(--jade-soft);color:var(--jade)}

/* ─── Buzz the companion ─── */
/* margin-top added 2026-08-11 (manual-test item 5). `.k-opts` sets `margin-top:16px` and a
   11px grid gap but NO bottom margin, and both renderers append the buzz box immediately
   after it — kids-share.v1.js `stage.appendChild(opts)` then `stage.appendChild(K.buzz(…))`,
   which is the reported One More Thing case, and kids-engine's own `if (s.buzz)` append.
   So the hint sat flush against the last choice. One rule, all 13 kids pages.
   `.k-screen` is a plain block and `.k-lede` carries only the UA 1em bottom margin, so on
   the info screens these ADJACENT MARGINS COLLAPSE to max(17,18) — an 18px rule cannot
   double-space anything. Checked rather than assumed, because I cannot see it. */
.k-buzz{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;
  border-radius:var(--kid-radius);
  background:var(--honey-soft);border:1px solid var(--honey-line)}
.k-buzz .bee{width:40px;height:40px;flex:0 0 auto;color:var(--honey-deep)}
html.dark .k-buzz .bee{color:var(--honey)}
.k-buzz .say{font-size:15.5px;color:var(--ink);line-height:1.5}
.k-buzz .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--honey-deep);margin-bottom:4px}
html.dark .k-buzz .who{color:var(--honey)}

/* ─── The genie ─── */
.k-genie{border-radius:var(--kid-radius);padding:22px;border:1px solid var(--hair-2);
  background:var(--surface-2);margin-top:18px}
.k-genie.twisted{border-color:var(--bloom);background:var(--bloom-soft)}
.k-genie.clean{border-color:var(--jade);background:var(--jade-soft)}
.k-genie .g-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:10px}
.k-genie .g-grant{font-family:var(--display);font-weight:500;font-style:italic;
  font-size:clamp(18px,2.6vw,23px);line-height:1.35;color:var(--ink)}
.k-genie .g-why{margin-top:14px;font-size:15px;color:var(--ink-soft)}
.k-genie .g-fix{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--surface);
  border:1px solid var(--hair);font-size:15px;color:var(--ink)}
.k-genie .g-fix b{color:var(--honey-deep);font-weight:600}
html.dark .k-genie .g-fix b{color:var(--honey)}

/* ─── Shield radar: which loopholes the child has closed ─── */
.k-shields{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.k-shield{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  border:1px solid var(--hair-2);color:var(--ink-mute);background:transparent;transition:.25s}
.k-shield.is-open{border-color:var(--bloom);color:var(--bloom);background:var(--bloom-soft)}
.k-shield.is-closed{border-color:var(--jade);color:var(--jade);background:var(--jade-soft)}

/* ─── Attempt trail ─── */
.k-trail{margin-top:18px;border-top:1px solid var(--hair);padding-top:14px}
.k-trail li{list-style:none;display:flex;gap:11px;padding:9px 0;font-size:14.5px;color:var(--ink-soft);
  border-bottom:1px solid var(--hair)}
.k-trail li:last-child{border-bottom:0}
.k-trail ol{margin:0;padding:0}
.k-trail .n{font-family:var(--mono);font-size:11px;color:var(--ink-mute);flex:0 0 22px;padding-top:3px}
.k-trail .w{flex:1}
.k-trail .s{font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bloom);flex:0 0 auto;padding-top:3px}
.k-trail li.won .s{color:var(--jade)}

/* ─── Screens + step dots ─── */
.k-screen{animation:kfade .45s cubic-bezier(.16,.7,.3,1) both}
@keyframes kfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.k-screen{animation:none}}
.k-dots{display:flex;gap:6px;margin-bottom:20px}
.k-dots i{width:26px;height:4px;border-radius:999px;background:var(--hair-2)}
.k-dots i.on{background:var(--honey)}
.k-dots i.done{background:var(--jade)}

/* ─── Options (quiz / sort / choice) ─── */
.k-opts{display:grid;gap:11px;margin-top:16px}
.k-opt{min-height:var(--tap);display:flex;align-items:center;gap:13px;text-align:start;
  padding:14px 17px;border-radius:14px;border:1.5px solid var(--hair-2);background:var(--surface);
  color:var(--ink);font-size:16px;cursor:pointer;transition:.2s;width:100%}
.k-opt:hover{border-color:var(--honey);background:var(--honey-soft)}
/* +2px ring and a solid border weight so right/wrong are separable without hue;
   see kids-engine's markOption for the glyph and the screen-reader phrase. */
.k-opt.is-right{border-color:var(--jade);background:var(--jade-soft);
  border-width:3px;border-style:solid}
/* SELECTED STATE for a choice row. Added 2026-08-11 after the reported bug "the selection
   of difficulty and game set at the beginning does not work". It DID work — the click
   handler ran, `chosenSet` moved, `aria-checked` flipped and the `is-on` class was added.
   `.k-opt.is-on` simply had no rule anywhere in the codebase, so the button looked
   identical before and after and there was no way to tell anything had happened.
   `.k-chip.is-on` existed and misled me into assuming the pair did.
   My tests asserted `aria-checked` and `className` — the mechanism I had just written —
   and passed while the thing the child actually needs did nothing. Asserting the property
   you implemented instead of the property that matters is how a feature ships broken with
   a green suite.
   NOT COLOUR ALONE: WCAG 1.4.1 is explicit, so the tick below carries the same
   information as the fill. Border weight changes too, for anyone who sees neither. */
.k-opt.is-on{border-color:var(--honey);border-width:2px;background:var(--honey-soft);
  position:relative;padding-inline-end:44px}
.k-opt.is-on::after{content:"\2713";position:absolute;inset-inline-end:16px;top:50%;
  transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
  background:var(--honey);color:#fff;display:grid;place-items:center;
  font-size:13px;line-height:1;font-weight:600}
html.dark .k-opt.is-on::after{color:#1a1005}
.k-opt.is-on .t{font-weight:600}

.k-opt-mk{font-family:var(--mono);font-weight:600;margin-inline-start:auto;padding-inline-start:8px}
.k-opt.is-wrong{border-color:var(--bloom);background:var(--bloom-soft);
  border-width:3px;border-style:dashed}
.k-opt[disabled]{cursor:default}
.k-opt .mark{font-family:var(--mono);font-size:12px;color:var(--ink-mute);flex:0 0 auto}

/* ─── Celebrate ─── */
.k-celebrate{text-align:center;padding:14px 0}
.k-celebrate .big{font-family:var(--display);font-weight:600;font-size:clamp(28px,5vw,44px);
  color:var(--honey);line-height:1.05}
.k-badge{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:12px 20px;
  border-radius:999px;background:var(--jade);color:var(--paper);font-weight:600;font-size:15px}

/* ─── Parent strip ─── */

/* `.k-wrap` DEFINED 2026-08-11 (manual-test item 3). The seven early-years pages wrap
   their content in `<div class="k-wrap">` and THE CLASS HAD NO RULE ANYWHERE — not in
   this sheet, not in site.v4.css, not inline. Dead markup, the mirror image of dead CSS,
   and check 1h does not cover it because 1h only guards SHARED-CHROME classes.
   The consequence was the reported one: the grown-up strip ran edge to edge with no
   gutter and no measure, out of line with the centred hero above it, while the five
   engine-era pages nest the identical markup in `.wrap` and look right. The Genie's
   Loophole IS the `.wrap` case, which is why the owner named it as the reference.
   Mirrors `.wrap` exactly, including the 620px gutter step, so the two page families
   now share one measure. `.k-sec` is also unstyled but nothing was reported about
   vertical rhythm, so it is left alone rather than guessed at. */
.k-wrap{max-width:var(--maxw);margin:0 auto;padding:0 44px}
@media(max-width:620px){.k-wrap{padding:0 20px}}

/* text-align pinned to start rather than inherited: the ros pages set text-align:center
   on their hero and stage, and one refactor away from that box this strip reads centred. */
.k-parent{margin-top:34px;padding:18px 20px;border-radius:var(--kid-radius);text-align:start;
  border:1px dashed var(--hair-2);background:var(--surface-2)}
.k-parent .pl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:7px}
.k-parent p{margin:0;font-size:14px;color:var(--ink-soft)}

/* ─── Accessibility options ─── */
.kids-world[data-font="readable"]{--display:var(--sans);letter-spacing:.012em;word-spacing:.08em}
.kids-world[data-font="readable"] h1,.kids-world[data-font="readable"] h2,
.kids-world[data-font="readable"] h3{font-family:var(--sans);font-weight:700;letter-spacing:0}
.kids-world[data-contrast="high"]{--hair:rgba(14,22,20,.34);--hair-2:rgba(14,22,20,.52);--ink-soft:var(--ink);--ink-mute:#3a4744}
html.dark .kids-world[data-contrast="high"]{--hair:rgba(243,240,228,.34);--hair-2:rgba(243,240,228,.55);--ink-soft:var(--ink);--ink-mute:#d8d4c4}
.k-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── Print: badges, passport, wishes ─── */
@media print{
  .k-garden,.k-parent,.k-dots,.k-btn,.k-shields{display:none!important}
  .k-panel{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .kids-world{font-size:12pt}
}

@media(max-width:620px){
  .k-panel{padding:20px;border-radius:var(--kid-radius)}
  .kids-world h1{font-size:29px}
  .k-cards{grid-template-columns:1fr}
}

/* ─── Hallucination Hunt: the AI-written page ─── */
.k-doc-head{display:flex;align-items:center;gap:11px;margin:22px 0 10px}
.k-doc-title{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink)}
.k-doc{border:1px solid var(--hair-2);border-radius:var(--kid-radius);background:var(--surface-2);
  padding:20px 22px;box-shadow:var(--shadow-card)}
.k-doc-p{margin:0 0 14px;font-size:16.5px;line-height:1.85}
.k-doc-p:last-child{margin-bottom:0}
.k-seg{display:inline;font:inherit;color:var(--ink);background:transparent;border:0;padding:1px 2px;
  margin:0;border-radius:5px;cursor:pointer;text-align:start;
  border-bottom:2px solid transparent;transition:background .16s,border-color .16s,color .16s}
.k-seg:hover{background:var(--honey-soft);border-bottom-color:var(--honey-line)}
.k-seg.is-flagged{background:var(--honey-soft);border-bottom-color:var(--honey);color:var(--honey-deep);font-weight:500}
html.dark .k-seg.is-flagged{color:var(--honey)}
/* The three outcomes were separated by HUE ALONE: is-caught jade, is-missed
   bloom, otherwise identical rules. That is a red/green distinction with no
   second cue, so a child with a colour-vision deficiency learned nothing from
   the reveal — the one screen where the whole lesson lands. Each outcome now
   carries its own underline STYLE as well, and kids-hunt adds a glyph and a
   screen-reader phrase inside the button. Three signals, one of them colour. */
.k-seg.is-caught{background:var(--jade-soft);border-bottom-color:var(--jade);color:var(--jade);
  font-weight:500;border-bottom-style:double;border-bottom-width:4px}
.k-seg.is-missed{background:var(--bloom-soft);border-bottom-color:var(--bloom);color:var(--bloom);
  font-weight:500;border-bottom-style:solid;border-bottom-width:3px}
.k-seg.is-wrong{background:var(--bloom-soft);border-bottom-style:dashed;border-bottom-color:var(--bloom);color:var(--bloom)}
.k-seg-mk{font-family:var(--mono);font-size:.82em;font-weight:600;margin-inline-start:3px;
  vertical-align:baseline}
.k-seg:focus-visible{outline:2px solid var(--honey);outline-offset:2px}
@media(max-width:620px){.k-doc{padding:16px 17px}.k-doc-p{font-size:16px;line-height:1.95}}

/* ─── Remix Studio: drafts and chips ─── */
.k-drafts{display:grid;gap:12px;margin-top:18px}
.k-draft{display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;text-align:start;
  min-height:var(--tap);padding:17px 19px;border-radius:var(--kid-radius);border:1.5px solid var(--hair-2);
  background:var(--surface);cursor:pointer;transition:.2s}
.k-draft:hover{border-color:var(--honey);background:var(--honey-soft);transform:translateY(-2px)}
.k-draft:active{transform:none}
.k-draft-t{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;color:var(--ink)}
.k-draft-m{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.k-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.k-chip{min-height:40px;padding:0 15px;border-radius:999px;border:1.5px solid var(--hair-2);
  background:transparent;color:var(--ink-soft);font-size:14.5px;cursor:pointer;transition:.18s}
.k-chip:hover{border-color:var(--honey);color:var(--honey-deep)}
html.dark .k-chip:hover{color:var(--honey)}
.k-chip.is-on{background:var(--honey);border-color:var(--honey);color:#fff;font-weight:500}
html.dark .k-chip.is-on{color:#1a1005}
@media(max-width:620px){.k-draft-t{font-size:17.5px}}

/* THE PROFILE CHIP IS NOT DEFINED HERE ANY MORE — removed 2026-08-11.
   It was defined in BOTH sheets, and kids pages load both with this one second, so the
   button in the header was measurably different on Signify Kids than everywhere else: a
   28px avatar instead of 22px, a different base rule, a different name width, and its own
   media query. That is what "the button is different on signify kids vs all the other
   pages" was.
   The chip is chrome. It appears in the m-header of all 82 pages, so its only sensible
   owner is site.css, the sheet every page loads. Two owners for one component is not a
   style disagreement, it is a component that behaves differently depending on which page
   you are standing on.
   `.k-chips` and the `.k-chip` rule above are the HONEY FILTER CHIPS and stay — they are a
   different component that unfortunately shares a class name. That collision is the reason
   this went unnoticed: a grep for `.k-chip` returns both and looks intentional. */


/* k-garden-cap — the garden must never dominate the page. */
.k-garden{max-width:620px;margin-inline:auto}
.k-garden svg{width:100%;height:auto;display:block}
.k-plot[aria-hidden="true"]{opacity:.45}

/* kids-type-scoped — the kid type scale must not reach shared chrome.
   The footer and sidebar are the same on every page of the site; a
   section skin restyling them is what made the footer look wrong. */
footer .foot-col h2,footer .foot-brand p,footer .foot-col a,
footer .foot-bot .fb-links a,.side .lbl,.mm-link span{
  font-weight:inherit;letter-spacing:inherit}
footer .foot-col h2{font-family:var(--mono);font-size:10px;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.2}

/* k-band — the hub launcher grouped by age. Two groups, an eyebrow + a small
   display heading each; rows inside keep the plain .k-prog treatment. */
.k-band{display:grid;gap:10px}
.k-band+.k-band{margin-top:14px}
.k-band-h{display:flex;align-items:baseline;gap:10px}
.k-band-t{margin:0;font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:.01em}
.k-band-rows{display:grid;gap:10px}

/* k-progress — the progress snapshot. Deliberately plain: no overlapping hit
   areas and no geometry that can go wrong at a size nobody tested. */
.k-progress{display:grid;gap:10px;margin-top:6px}
.k-prog{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:64px;
  border:1px solid var(--hair);border-radius:14px;background:var(--surface);
  text-decoration:none;color:inherit;transition:background .18s,border-color .18s}
.k-prog:hover{background:var(--surface-2);border-color:var(--honey-line)}
.k-prog-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;
  color:var(--honey);opacity:.5}
.k-prog.is-done .k-prog-ico{opacity:1}
.k-prog-ico svg{width:30px;height:30px}
.k-prog-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.k-prog-t{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.2}
.k-prog-s{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-mute)}
.k-prog.is-done .k-prog-s{color:var(--honey-deep)}
.k-prog-go{color:var(--honey);font-size:18px;flex:none}
@media(max-width:520px){.k-prog{padding:12px 13px}.k-prog-t{font-size:15.5px}}

/* ─── Interactive screens: one column, so prose and fields share an edge ───
   Reported as "the one question is on a new line where it does not need to be".
   The orphaned word was a symptom: .k-panel is a child of .wrap (max 1320px),
   so on a desktop the card ran to ~1180px. Inside it .k-area is width:100% of
   that, while .kids-world .k-lede is capped at 56ch — so the prompt wrapped at
   roughly half the width of the box directly beneath it, which reads as broken
   rather than as a measure. Capping the panel makes the card itself the reading
   column, after which the prose and the field agree and the sentence fits.
   Scoped to #k-root, which exists only on the five engine-era challenges and
   the set-up page — a narrower column is better on a form too. The early-years
   packs render into #ros and are untouched. */
/* The panel FILLS its column. It was capped at 78ch in session 4 as a reading
   measure, which left roughly a third of the screen empty beside every
   challenge — reported 2026-08-10 as "the box is very small and not filling
   the screen". The measure was the right instinct applied to the wrong
   element: a panel is a container, and it is the PROSE inside it that needs a
   line length. So the cap moves onto the text. */
#k-root .k-panel{max-width:none}
#k-root .k-doc-p{max-width:72ch}
#k-root .k-screen>p{max-width:70ch}
#k-root .k-genie .say{max-width:70ch}
.kids-world .k-screen .k-lede{max-width:none}