/* Build Steps. Every mission is an instruction booklet: big step numbers, a parts box for what you
   need, callout boxes for clues, and coloured bricks for who did the work. Yellow is together, blue
   is on your own, green is go and look back. White pages, ink outlines, nothing decorative. */
@font-face { font-family: Lexend; src: url('/fonts/lexend-latin-variable.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Archivo Black"; src: url('/fonts/archivo-black-latin-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root {
  --page: #ffffff;
  --ink: #111318;
  --ink-2: #444a57;
  --ink-3: #5a6070;
  --rule: #d9dce3;
  --parts: #eef0f4;
  --parts-2: #dfe2e9;
  --yellow: #ffcf00; --yellow-side: #b89400; --yellow-wash: #fff5c7;
  --blue: #0a5bd3; --blue-side: #063f96; --blue-wash: #e4eefc;
  --green: #157a3a; --green-side: #0b4f24; --green-wash: #e1f2e6;
  --red: #c8261c; --red-wash: #fde8e5;
  --sans: Lexend, ui-sans-serif, system-ui, sans-serif;
  --numeral: "Archivo Black", Lexend, ui-sans-serif, sans-serif;
  --radius: 12px; --line: 2px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-btn: 12px;
  --display: var(--sans); --display-weight: 700; --heading-shadow: none; --page-bg: var(--page); --card: var(--page); --go-ink: #fff; --green-hover: #126a32;
  --gutter: 20px;
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-snap: cubic-bezier(.22, 1, .36, 1); --stagger: 40ms;
  --z-raised: 2; --z-nav: 20; --z-fab: 30; --z-scrim: 39; --z-drawer: 40;
  /* Kept for the strengths map and older templates that read these names. */
  --surface: var(--page); --paper: var(--page); --dim: var(--ink-3); --muted: var(--ink-3); --accent: var(--blue); --lamp: var(--yellow); --m1: var(--red); --m2: var(--yellow-side); --m3: var(--blue); --m4: var(--green);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page-bg); color: var(--ink); font: 400 17px/1.55 var(--sans); font-variant-numeric: tabular-nums; }
::selection { background: var(--yellow); color: var(--ink); }
input, textarea { caret-color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
a { color: var(--blue-side); text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); }
a:hover { color: var(--ink); text-decoration-color: var(--yellow); }
h1, h2, h3 { margin: 0; color: var(--heading, var(--ink)); font-family: var(--display); font-weight: var(--display-weight); text-wrap: balance; text-shadow: var(--heading-shadow); }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.55rem); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
h3 { font-size: 1.05rem; line-height: 1.3; }
p { margin: 0.5rem 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
* { scrollbar-color: var(--parts-2) transparent; }
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 40rem; }
.fine { font-size: 0.85rem; color: var(--ink-3); }
.mono { font-variant-numeric: tabular-nums; }
.arrow { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -0.15em; margin-left: 0.3em; flex: none; }
.arrow-back { margin: 0 0.3em 0 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: 0.5rem 0.8rem; z-index: 60; border: var(--line) solid var(--ink); border-radius: 8px; }

/* Page frame */
.top, main { width: min(1120px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.top { display: flex; align-items: center; justify-content: space-between; min-height: 72px; border-bottom: var(--line) solid var(--ink); }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 400 26px/1 var(--logo-font, var(--numeral)); letter-spacing: -0.01em; }
.mark-brick { width: 44px; height: 44px; background: var(--bloop-wave) center / contain no-repeat; }
.mark-dot, .top-note { display: none; }
main { padding-block: 8px 72px; }
/* In a patterned world, the page content sits on a see-through screen so text never fights the pattern. */
:root:not(:has([data-world="booklet"])) main { margin-block: 14px 28px; padding-inline: clamp(14px, 3vw, 30px); padding-top: 6px; background: color-mix(in srgb, var(--card) 92%, transparent); border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--frame-shadow, 0 10px 30px rgba(0, 0, 0, 0.18)); }

/* Controls: every button is a brick with an ink outline and a darker side face. */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 48px; padding: 0 20px;
  font: 700 16px/1.2 var(--button-font, var(--sans)); text-decoration: none; text-align: center;
  color: var(--go-ink); background: var(--green); border: var(--line) solid var(--ink); border-radius: var(--r-btn);
  box-shadow: 0 4px 0 var(--green-side); cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
}
button:hover, .button:hover { background: var(--green-hover); color: var(--go-ink); }
button:active, .button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-side); }
button.ghost, .button.ghost { background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--parts-2); }
button.ghost:hover, .button.ghost:hover { background: var(--parts); color: var(--ink); }
button.ghost:active, .button.ghost:active { box-shadow: 0 0 0 var(--parts-2); }
button.danger, .button.danger, .danger button { background: var(--red); box-shadow: 0 4px 0 #7f150f; }
button:disabled, .button[aria-disabled="true"] { background: var(--parts); color: var(--ink-3); border-color: var(--parts-2); box-shadow: none; cursor: default; transform: none; }
button.linklike, .linklike { min-height: 44px; padding: 4px 0; background: none; border: 0; box-shadow: none; color: var(--blue-side); font-weight: 600; font-size: 15px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
button.linklike:hover { background: none; color: var(--ink); transform: none; }
.chip { min-height: 44px; padding: 4px 14px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--parts); border: 2px solid var(--parts-2); box-shadow: none; border-radius: 999px; }
.chip:hover { background: var(--yellow-wash); color: var(--ink); border-color: var(--yellow-side); }
label { display: block; margin: 12px 0; font-weight: 600; font-size: 15px; color: var(--ink); }
input, select, textarea { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 10px 14px; font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 2px solid #9aa0ae; border-radius: var(--r-sm); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: 3px solid var(--blue); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: #6b7180; }
textarea { min-height: 5rem; resize: vertical; }
input[type=checkbox], input[type=radio] { display: inline-block; width: 24px; height: 24px; min-height: 24px; margin: 0; accent-color: var(--blue); }
input[type=file] { padding: 10px; background: var(--parts); border-style: dashed; }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 18px 0; min-width: 0; }
legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
summary { min-height: 48px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--t-base) var(--ease-out); margin-right: 2px; }
details[open] > summary::before { transform: rotate(45deg); }
.links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }

/* Boxes: the parts box holds what you need; the callout holds a clue or a message. */
.panel { margin: 20px 0; padding: 22px; background: var(--parts); border-radius: var(--r-lg); }
.panel > h2:first-child, .panel > summary + * { margin-top: 0; }
.banner { margin: 16px 0; padding: 14px 16px; background: var(--yellow-wash); border: var(--line) solid var(--ink); border-radius: var(--radius); font-weight: 500; }
.banner.warn { border-style: dashed; }
form.inline { display: inline; }
.subject-maps ul { margin: 8px 0 0; padding-left: 20px; }
.subject-maps li { margin: 6px 0; }
.map-group { margin: 24px 0; }
.map-concept { margin: 12px 0; padding: 14px 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--card); }
.map-concept h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.map-levels { display: grid; gap: 8px; margin: 10px 0; }
.map-levels > div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 10px; }
.map-levels dt { font-weight: 600; }
.map-levels dd { margin: 0; }
@media (max-width: 520px) { .map-levels > div { grid-template-columns: 1fr; gap: 2px; } }
.map-decision form { margin: 10px 0; }
.map-decision textarea { width: 100%; min-height: 80px; }
.ok, .miss, .hint, .reask, .celebration { margin: 14px 0; padding: 14px 16px; border-radius: var(--radius); border: var(--line) solid var(--ink); }
.ok, .celebration { background: var(--green-wash); border-color: var(--green); }
.miss { background: var(--yellow-wash); border-color: var(--yellow-side); }
.hint { position: relative; background: var(--card); border: var(--line) solid var(--ink); }
.hint::before { content: ""; position: absolute; left: 28px; top: -10px; width: 16px; height: 16px; background: var(--card); border-left: var(--line) solid var(--ink); border-top: var(--line) solid var(--ink); transform: rotate(45deg); }
.reask { background: var(--blue-wash); border-color: var(--blue); font-weight: 600; }
.nudge { font-size: 1.15rem; font-weight: 700; margin: 6px 0; }
.yes-spark { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; font-size: 0; border-radius: 5px; background: var(--blue); border: var(--line) solid var(--ink); }
.celebration { animation: snap-in var(--t-slow) var(--ease-snap) both; }

/* Learner navigation: a tab bar at the bottom of a phone, a row of tabs on larger screens. */
.journey, .journey-page { max-width: 760px; margin-inline: auto; }
.journey-nav { display: flex; gap: 6px; padding: 14px 0 6px; flex-wrap: wrap; }
.journey-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; border: 2px solid transparent; }
.journey-nav a:hover { background: var(--parts); color: var(--ink); }
.journey-nav a[aria-current] { background: var(--yellow); border-color: var(--ink); }
.journey-nav .parent-link { margin-left: auto; border-color: var(--parts-2); }
.journey-nav svg { width: 20px; height: 20px; flex: none; }
.mode-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 10px 0; padding: 10px 14px; background: var(--parts); border-radius: var(--radius); font-size: 14px; }
.mode-strip p { margin: 0; }
.mode-strip button { min-height: 44px; padding: 0 14px; font-size: 14px; }
.student-signout { margin: 8px 0; }
.student-signout button { min-height: 44px; font-size: 14px; }

/* Learner home */
.companion { display: inline-block; flex: none; width: 88px; height: 88px; background: var(--bloop-wave) center / contain no-repeat; }
.companion[data-pose=think] { background-image: var(--bloop-think); }
.companion[data-pose=cheer] { background-image: var(--bloop-cheer); }
.companion[data-pose=oops] { background-image: var(--bloop-oops); }
.ok > .companion, .miss > .companion, .feedback-review article > .companion { float: right; width: 72px; height: 72px; margin: -8px -4px 0 8px; }
.world-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }
.world-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.world-tile { display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 6px; min-height: 0; padding: 16px; text-align: center; color: var(--ink); background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: 0 4px 0 var(--parts-2); font: inherit; }
.world-tile:hover { background: var(--card); color: var(--ink); transform: translateY(-2px); }
.world-tile[aria-pressed="true"] { outline: 4px solid var(--blue); outline-offset: 3px; }
.world-tile strong { font-size: 1.1rem; }
.world-tile small { color: var(--ink-2); font-weight: 400; }
.world-preview { width: 120px; height: 120px; background: center / contain no-repeat; }
.world-current { font-size: 13px; font-weight: 800; color: var(--blue-side); }
[data-world-preview=cartoon] { background-image: url("/worlds/cartoon/bloop-wave.webp"); }
[data-world-preview="8bit"] { background-image: url("/worlds/8bit/bloop-wave.webp"); image-rendering: pixelated; }
[data-world-preview=toybox] { background-image: url("/worlds/toybox/bloop-wave.webp"); }
[data-world-preview=sticker] { background-image: url("/worlds/sticker/bloop-wave.webp"); }
[data-world-preview=princess] { background-image: url("/worlds/princess/bloop-wave.webp"); }
[data-world-preview=booklet] { background-image: url("/worlds/booklet/bloop-wave.webp"); }
.today-greeting { display: flex; align-items: flex-end; gap: 12px; margin: 16px 0 6px; padding: 16px; min-height: 200px; background: var(--hero, var(--parts)) center / cover no-repeat; border: var(--line) solid var(--ink); border-radius: var(--r-lg); overflow: hidden; }
.today-greeting .companion { width: 128px; height: 128px; margin-bottom: -10px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25)); }
.today-greeting > div { min-width: 0; padding: 10px 14px; background: color-mix(in srgb, var(--card) 90%, transparent); border-radius: var(--r); }
.today-greeting h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); }
.today-greeting .lede { margin: 2px 0 0; font-size: 1rem; }
.mission-hero.today { margin: 8px 0 0; }
.today-mission { position: relative; margin-top: 14px; padding: 22px 22px 20px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card); }
.today-mission h2 { margin: 10px 0 6px; font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; }
.today-mission > p { color: var(--ink-2); }
.mission-plan { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; margin: 16px 0 4px; }
.mission-plan span { height: 44px; display: grid; place-items: center; border: var(--line) solid var(--ink); border-radius: 9px; font: 400 18px/1 var(--numeral); }
.mission-plan [data-beat=together] { background: var(--yellow); box-shadow: inset 0 -5px 0 var(--yellow-side); }
.mission-plan [data-beat=own] { background: var(--blue); color: #fff; box-shadow: inset 0 -5px 0 var(--blue-side); }
.mission-plan [data-beat=review] { background: var(--green); color: #fff; box-shadow: inset 0 -5px 0 var(--green-side); }
.mission-note { margin: 14px 0 0; padding: 10px 14px; background: var(--blue-wash); border-radius: var(--r-sm); font-weight: 600; color: var(--ink); }
.mission-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.mission-key li { display: inline-flex; align-items: center; gap: 6px; }
.mission-key i { width: 20px; height: 14px; border-radius: 4px; border: max(var(--line), 2px) solid var(--ink); background: var(--blue); }
.mission-key [data-beat=together] i { background: var(--yellow); }
.mission-key [data-beat=review] i { background: var(--green); }
.mission-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; }
.mission-start button.go, .mission-start button[value=session] { flex: 1 1 100%; min-height: 64px; font-size: 20px; border-radius: var(--r); }
.mission-start button[value=session].ghost { flex: 0 1 auto; min-height: 48px; font-size: 16px; }
.duration-change { flex: 1 1 auto; }
.duration-change > summary { min-height: 44px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.durations { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.durations legend { width: 100%; margin-bottom: 6px; font-size: 14px; }
.durations label { position: relative; margin: 0; }
.durations input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.durations span { display: grid; place-items: center; min-width: 60px; min-height: 58px; padding: 4px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); background: var(--card); font: 400 20px/1 var(--numeral); cursor: pointer; }
.durations small { font: 600 11px/1 var(--sans); margin-top: 4px; }
.durations input:checked + span { background: var(--yellow); box-shadow: inset 0 -4px 0 var(--yellow-side); }
.durations input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.resume-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 14px 16px; background: var(--yellow-wash); border: var(--line) solid var(--ink); border-radius: var(--radius); font-weight: 600; }
.parent-note { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 14px 0 0; padding: 16px 18px; background: var(--blue-wash); border: 2px solid var(--blue); border-radius: var(--r-lg); animation: snap-in var(--t-slow) var(--ease-snap) both; }
.parent-note-art { flex: none; width: 48px; height: 36px; border: var(--line) solid var(--ink); border-radius: 6px; background: var(--card); font-size: 0; position: relative; }
.parent-note-art::after { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 14px; border-left: var(--line) solid var(--ink); border-bottom: var(--line) solid var(--ink); transform: skewY(-20deg) rotate(-45deg); transform-origin: left top; }
.parent-note-copy { flex: 1 1 220px; }
.parent-note-copy .note-body { margin: 0 0 4px; font-size: 1.15rem; font-weight: 600; }
.parent-note-copy .note-title { margin: 0; font-size: 1rem; }
.parent-note form { margin: 0; }
.more-to-do { margin: 28px 0 0; }
.more-to-do > h2 { font-size: 1.15rem; }
.quick-missions { display: grid; grid-template-columns: 1fr; margin: 8px 0 0; border-top: var(--line) solid var(--ink); }
.quick-missions > a, .tile-form button { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; justify-items: start; width: 100%; min-height: 64px; padding: 10px 6px; text-align: left; text-decoration: none; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; box-shadow: none; font: inherit; }
.quick-missions > a:hover, .tile-form button:hover { background: var(--parts); color: var(--ink); }
.quick-missions .tile-icon, .tile-form button > span { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); border: var(--line) solid var(--ink); background: var(--card); font-size: 0; }
.quick-missions .tile-icon svg, .tile-form button > span svg { width: 22px; height: 22px; }
.quick-missions h2, .tile-form strong { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.quick-missions p, .tile-form small { margin: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); line-height: 1.35; }
/* A due review leads the list. */
.quick-missions > .tile-form button { background: var(--green-wash); padding-inline: 10px; }
.quick-missions > .tile-form button > span { background: var(--green); color: #fff; }
.tile-form { margin: 0; }
.week-trail { margin: 28px 0 0; padding-top: 18px; border-top: var(--line) solid var(--ink); }
.museum { margin: 28px 0 0; padding: 16px; border: var(--line) solid var(--ink); border-radius: var(--radius); background: var(--card); }
.museum h2 { margin-top: 0; font-size: 1.15rem; }
.museum ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.museum li { display: grid; gap: 4px; }
.audit-item .audit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.audit-item .audit-actions form { margin: 0; }
.experiments .experiment { padding: 12px 0; border-top: 1px solid var(--rule); }
.experiments .experiment h3 { margin: 0 0 4px; font-size: 1rem; }
.week-trail h2 { font-size: 1.15rem; }
.week-trail ul { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.keepsake { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r); background: var(--parts); list-style: none; }
.keepsake-art { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: var(--line) solid var(--ink); border-radius: 9px; background: var(--keepsake, var(--blue)); color: var(--ink); font-size: 20px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.keepsake small { display: block; color: var(--ink-2); font-size: 13px; }
.keepsake-waiting { background: none; border: 2px dashed #9aa0ae; }
.keepsake-waiting .keepsake-art { background: var(--card); border-style: dashed; color: var(--ink-3); box-shadow: none; }
.followups { padding-left: 1.1rem; color: var(--ink-2); }

/* Ask for practice */
.pack-ask { margin: 24px 0 0; padding: 20px; background: var(--parts); border-radius: var(--r-lg); }
.pack-ask h2 { margin: 0 0 4px; font-size: 1.15rem; }
.pack-ask > .fine { margin: 0 0 10px; }
.pack-ask textarea { min-height: 64px; font-size: 18px; }
.pack-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.pack-preview { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 600; font-size: 15px; }
.pack-ask[data-state=sending] button[type=submit], .pack-ask[data-state=making] button[type=submit] { opacity: .6; }
.pack-zone .pack-ask { margin: 0 0 12px; }
/* On the learner home the mission is the one main action; asking for practice stays secondary. */
.journey .pack-ask button[type=submit] { background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--parts-2); }
.journey .pack-ask button[type=submit]:hover { background: var(--yellow-wash); }
.pack-mode, .pack-count { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 12px 0 0; }
.pack-mode legend, .pack-count legend { width: 100%; font-size: 14px; margin-bottom: 6px; }
.pack-mode label, .pack-count label { position: relative; margin: 0; }
.pack-mode input, .pack-count input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pack-mode span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); background: var(--card); font-weight: 600; font-size: 15px; }
.pack-count span { display: grid; place-items: center; min-width: 60px; min-height: 56px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); background: var(--card); font: 400 20px/1 var(--numeral); cursor: pointer; }
.pack-mode input:checked + span, .pack-count input:checked + span { background: var(--yellow); box-shadow: inset 0 -4px 0 var(--yellow-side); }
.pack-mode input:focus-visible + span, .pack-count input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
.planner-pack-mode { margin: 8px 0; }
.planner-pack-mode span { min-height: 38px; padding: 0 12px; font-size: 13px; }
.pack-live:empty { display: none; }
.pack-live { margin-top: 14px; }
.pack-live .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-ready { font-weight: 700; font-size: 18px; outline: none; }
.pack-safety { padding: 12px 14px; border-radius: var(--r); background: var(--yellow-wash); }
.pack-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
.pack-steps li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-3); }
.pack-steps li::before { content: ""; flex: none; width: 22px; height: 16px; border-radius: 4px; border: 2px solid #9aa0ae; background: var(--card); }
.pack-steps li[data-state=done], .pack-steps li[data-state=now] { color: var(--ink); }
.pack-steps li[data-state=done]::before { background: var(--blue); border-color: var(--ink); }
.pack-steps li[data-state=now]::before { background: var(--yellow); border-color: var(--ink); animation: brick-bob 1.2s var(--ease-out) infinite; }
.pack-page { max-width: 760px; }
.pack-request { font-size: 18px; color: var(--ink-2); }
.pack-card { margin: 16px 0; padding: 20px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card); animation: snap-in var(--t-slow) var(--ease-snap) both; }
.pack-card[data-state=ready] { background: var(--green-wash); }
.pack-card[data-state=failed] { background: var(--red-wash); border-color: var(--red); }
.pack-card h2 { margin-top: 0; }
.pack-actions, .class-actions, .strength-actions, .planner-proposal-actions, .week-action { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.pack-actions form, .class-actions form { margin: 0; }
.pack-qa { margin: 6px 0 0; }
.pack-skill { margin: 20px 0; }
.pack-items > li { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.pack-choices li.is-key { font-weight: 700; }
.pack-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }

/* A mission step */
.mission-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin: 12px 0 0; }
.mission-toolbar > * { margin: 0; }
.mission-toolbar button { min-height: 44px; font-size: 15px; }
.mission-toolbar + h1, .mission-toolbar + .celebration + h1 { margin-top: 20px; }
.stones-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.stones { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; }
.stones li { --brick: var(--blue); --brick-side: var(--blue-side); width: 30px; height: 18px; border-radius: 5px; border: 2px solid var(--brick); background: color-mix(in srgb, var(--brick) 14%, var(--page)); }
.stones li[data-beat=together], .stones li[data-beat=clue] { --brick: var(--yellow); --brick-side: var(--yellow-side); }
.stones li[data-beat=review] { --brick: var(--green); --brick-side: var(--green-side); }
.stones li[data-state=done] { background: var(--brick); border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--brick-side); }
/* The current step is lifted and outlined in ink; its colour still says whose step it is. */
.stones li[data-state=now] { background: var(--brick); border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 var(--brick-side), 0 3px 0 var(--ink); transform: translateY(-3px); animation: snap-in var(--t-slow) var(--ease-snap) both; }
.stones-row .progress, .progress { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.prompt { position: relative; margin: 14px 0 0; padding: 22px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card); }
.prompt h1 { font-size: 1.05rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0; line-height: 1.35; }
.prompt .step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.step-number { flex: none; font: 400 clamp(64px, 14vw, 96px)/0.8 var(--numeral); letter-spacing: -0.04em; color: var(--ink); }
.step-tag { display: inline-block; margin: 2px 0 6px; padding: 3px 10px; border: var(--line) solid var(--ink); border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--parts); }
.step-tag[data-beat=together], .step-tag[data-beat=clue] { background: var(--yellow); }
.step-tag[data-beat=own] { background: var(--blue); color: #fff; }
.step-tag[data-beat=review] { background: var(--green); color: #fff; }
.question-text { margin: 10px 0 4px; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem); font-weight: 700; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt pre { font: 600 1.5rem/1.35 var(--sans); }
.step-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.step-tools form { margin: 0; }
.step-tools button { min-height: 48px; }
.answer { display: grid; gap: 12px; margin: 16px 0 0; }
.answer > label { margin: 0; font-size: 15px; }
.answer input[name=answer] { min-height: 64px; font: 700 28px/1.2 var(--sans); background: var(--parts); border-color: var(--ink); border-radius: var(--r); }
.answer > button[type=submit] { min-height: 62px; font-size: 20px; border-radius: var(--r); width: 100%; }
.answer > label, .answer > .choices { order: 0; }
.answer > button[type=submit] { order: 1; }
.answer > .voice-row { order: 2; justify-self: start; }
.answer > [data-voice-status] { order: 3; margin: 0; }
.answer > [data-voice-status]:empty { display: none; }
.answer > .voice-note { order: 4; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0; }
.choices legend { grid-column: 1 / -1; margin-bottom: 8px; font-size: 15px; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 10px 14px; border: var(--line) solid var(--ink); border-radius: var(--r); background: var(--card); font-size: 19px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 0 var(--parts-2); transition: background var(--t-fast); }
.choice input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-letter { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--parts); font: 400 16px/1 var(--numeral); }
.choice:hover { background: var(--parts); }
.choice:has(input:checked) { background: var(--yellow); box-shadow: inset 0 -5px 0 var(--yellow-side); }
.choice:has(input:checked) .choice-letter { background: var(--ink); color: #fff; }
.choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.sure { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; padding: 0; border: 0; }
.sure legend { width: 100%; margin-bottom: 6px; font-size: 15px; }
.sure-chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-size: 16px; font-weight: 600; cursor: pointer; }
.sure-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sure-chip:has(input:checked) { background: var(--yellow); }
.sure-chip:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.calibration { display: block; margin-top: 4px; font-weight: 500; }
.show-how { margin-top: 8px; }
.show-how > summary { min-height: 44px; }
.math-picture { margin: 12px 0; }
.math-picture svg { display: block; width: 100%; max-width: 340px; height: auto; }
.math-picture figcaption { font-size: 15px; color: var(--ink-2); }
.autoread-toggle { display: inline-flex; margin: 8px 0 0 12px; font-size: 16px; }
.tap-to-hear { animation: none; }
.lesson-card { padding: 22px; }
.lesson-hook { font-size: 1.25rem; font-weight: 700; }
.lesson-steps { padding-left: 22px; display: grid; gap: 10px; }
.lesson-example { margin: 16px 0; padding: 14px 16px; border-radius: var(--r); background: var(--parts); }
.lesson-check details { margin-top: 6px; }
.lesson-start { position: sticky; bottom: 12px; z-index: var(--z-raised); margin: 20px 0; padding: 10px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(17, 19, 24, .12); }
.lesson-start button { width: 100%; }
.feedback-review { margin: 18px 0; }
.feedback-review article { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.feedback-review article p { overflow-wrap: anywhere; }
.feedback-review .verdict { margin: 0 0 4px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.feedback-review .verdict::before { content: ""; flex: none; width: 22px; height: 15px; border-radius: 4px; border: var(--line) solid var(--ink); background: var(--card); }
.feedback-review article.is-right { padding: 14px 16px; margin: 8px 0; background: var(--green-wash); border: 2px solid var(--green); border-radius: var(--radius); animation: snap-in var(--t-slow) var(--ease-snap) both; }
.feedback-review article.is-right .verdict { font-size: 1.15rem; }
.feedback-review article.is-right .verdict::before { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-side); }
.feedback-review article.is-miss .verdict::before { border-color: var(--red); background: var(--red-wash); }
.feedback-review article.is-pending .verdict::before { border-style: dotted; }
.step-tag.mode-tag { margin-top: 6px; }
.done-line { font-size: 1.15rem; }
.breakdown { margin: 10px 0 16px; padding-left: 1.2rem; }
.grown-ups { margin-top: 24px; }
.thread { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.bubble { max-width: 40rem; margin: 0; padding: 12px 14px; background: var(--parts); border-radius: 14px 14px 14px 4px; }
.bubble p { margin: 0; white-space: pre-wrap; }
.bubble.mine { justify-self: end; background: var(--yellow-wash); border-radius: 14px 14px 4px 14px; }
.bubble .ghost { margin-top: 8px; min-height: 44px; font-size: 14px; }
.talk textarea { min-height: 4.5rem; }
.next-steps { margin: 18px 0 28px; padding: 20px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
.next-steps h2 { margin: 0 0 6px; }
.next-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.next-step { display: grid; gap: 6px; margin: 0; align-content: start; }
.next-step button, .next-step .button { width: 100%; }
.next-step small { display: block; font-size: 13px; color: var(--ink-3); text-align: center; }

/* Hands-on models */
.manip { margin: 16px 0; padding: 16px; background: var(--parts); border-radius: var(--r); }
.manip-title { margin: 0 0 10px; font-weight: 700; }
.manip-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.manip-controls button { min-height: 44px; font-size: 14px; }
.manip-value { margin: 6px 0 0; font-weight: 600; }
.manip-bar { display: flex; gap: 3px; max-width: 100%; overflow-x: auto; }
.manip-part { flex: 1; min-width: 44px; min-height: 48px; padding: 0; background: var(--card); border: var(--line) solid var(--ink); border-radius: 7px; box-shadow: none; }
.manip-part:hover { background: var(--blue-wash); }
.manip-part[aria-pressed="true"] { background: var(--blue); box-shadow: inset 0 -5px 0 var(--blue-side); }
.manip-groups { display: flex; flex-wrap: wrap; gap: 10px; }
.manip-group { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 86px; padding: 8px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-sm); }
.manip-dot { width: 14px; height: 14px; border-radius: 4px; background: var(--yellow); border: 1.5px solid var(--ink); }
.manip-line { display: flex; overflow-x: auto; border-top: 3px solid var(--ink); padding-top: 4px; }
.manip-tick { flex: 0 0 24px; text-align: center; font-size: 13px; border-left: 2px solid #9aa0ae; min-height: 24px; }
.manip-tick.is-here { background: var(--yellow); border: var(--line) solid var(--ink); border-radius: 6px; font-weight: 700; }

/* Voice and camera */
.voice-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.voice-wave { display: inline-flex; align-items: center; gap: 3px; height: 28px; }
.voice-wave i { width: 5px; height: 8px; border-radius: 2px; background: var(--blue); animation: voice-bar .9s ease-in-out infinite; }
.voice-wave i:nth-child(2) { animation-delay: .12s; } .voice-wave i:nth-child(3) { animation-delay: .24s; } .voice-wave i:nth-child(4) { animation-delay: .36s; } .voice-wave i:nth-child(5) { animation-delay: .48s; }
[data-talk].listening { background: var(--blue-wash); border-color: var(--blue); color: var(--ink); }
.voice-note { margin: 2px 0 0; }
.voice-note > summary { min-height: 44px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.camera-drop { display: block; padding: 24px; border: 2px dashed var(--ink-3); background: var(--parts); border-radius: var(--r-lg); font-weight: 700; }
.camera-drop input { margin-top: 14px; }
[data-camera-video], [data-live-video] { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--ink); border-radius: var(--r); margin: 16px 0; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Waiting for work to be prepared */
.job-panel { max-width: 640px; margin: 24px auto 0; padding: 28px 20px; text-align: center; }
.job-panel .links { justify-content: center; }
.job-link { display: inline-flex; margin: 12px; }
.job-controls { align-items: center; }
.job-elapsed { margin: 0; }
.thinking-world { position: relative; width: 140px; height: 120px; margin: 8px auto 12px; }
.thinking-world .companion { width: 120px; height: 120px; position: absolute; left: 0; bottom: 0; }
.thought-bubble { position: absolute; width: 20px; height: 14px; border-radius: 4px; border: var(--line) solid var(--ink); }
.bubble-one { left: 92px; top: 46px; background: var(--yellow); }
.bubble-two { left: 104px; top: 22px; background: var(--blue); }
.bubble-three { left: 116px; top: 0; background: var(--green); }
.thinking-dots { display: flex; justify-content: center; gap: 6px; }
.thinking-dots i { width: 14px; height: 9px; border-radius: 3px; background: var(--ink); }
.job-panel[data-job-state="running"] .companion, .job-panel[data-job-state="queued"] .companion { animation: bubble-think 3s var(--ease-out) infinite; }
.job-panel[data-job-state="running"] .thought-bubble, .job-panel[data-job-state="queued"] .thought-bubble { animation: brick-stack 1.8s var(--ease-out) infinite; }
.bubble-two { animation-delay: .2s !important; } .bubble-three { animation-delay: .4s !important; }
.job-panel[data-job-state="running"] .thinking-dots i, .job-panel[data-job-state="queued"] .thinking-dots i { animation: brick-bob 1.4s var(--ease-out) infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .2s !important; } .thinking-dots i:nth-child(3) { animation-delay: .4s !important; }
.waiting-nugget, .waiting-review { max-width: 34rem; margin: 18px auto; padding: 18px; text-align: left; background: var(--parts); border-radius: var(--r-lg); }
.waiting-review h2 { margin-top: 0; }
.waiting-review form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.waiting-review form label { flex: 1 1 180px; margin: 0; }
.working { display: flex; gap: 10px; align-items: center; }
.working i { flex: none; width: 14px; height: 10px; border-radius: 3px; background: var(--yellow); border: var(--line) solid var(--ink); animation: brick-bob 1s var(--ease-out) infinite; }
.mini-think { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mini-think .companion { width: 36px; height: 36px; }
.mini-think i { width: 10px; height: 7px; border-radius: 2px; background: var(--ink); animation: brick-bob 1.4s var(--ease-out) infinite; }
.mini-think i:nth-child(3) { animation-delay: .2s; } .mini-think i:nth-child(4) { animation-delay: .4s; }

/* Topics map */
.strength-world { --map-blue: var(--blue-side); --map-paper: var(--page); margin: 18px 0 60px; display: flex; flex-direction: column; }
/* The chosen topic and its start button come before the map, so the one main action is in the first screen. */
.strength-world > * { order: 4; }
.strength-world > .strength-heading, .strength-world > .strength-subjects, .strength-world > .strength-summary { order: 0; }
.strength-world > .strength-detail { order: 3; margin: 0 0 16px; }
.strength-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.strength-heading h1 { max-width: 650px; }
.strength-orbit { display: none; }
.strength-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.strength-subjects a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); text-decoration: none; font-weight: 700; color: var(--ink); }
.strength-subjects [aria-current] { background: var(--yellow); }
/* The map's counts read as one line of brick chips, not a row of big-number tiles. */
.strength-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; }
.strength-summary > div { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--parts); border-radius: var(--r-sm); }
.strength-summary dt { font-size: 15px; font-weight: 600; }
.strength-summary dd { margin: 0; min-width: 34px; height: 28px; display: grid; place-items: center; border: var(--line) solid var(--ink); border-radius: 7px; background: var(--blue); color: #fff; font: 400 17px/1 var(--numeral); }
.strength-summary > div:nth-child(2) dd { background: var(--yellow); color: var(--ink); }
.strength-summary > div:nth-child(3) dd { background: var(--green); }
.strength-summary dd small { display: none; }
.strength-summary small, .strength-evidence small { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.strength-map-bar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin: 18px 0 10px; font-size: 14px; color: var(--ink-2); }
.strength-map-bar p { max-width: 650px; margin: 0; }
.strength-map-bar a { flex-shrink: 0; }
.strength-viewport { width: 100%; max-height: 600px; overflow: auto; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card) radial-gradient(#cdd1da 1.2px, transparent 1.3px) 0 0 / 22px 22px; overscroll-behavior: contain; }
.strength-canvas { position: relative; }
.strength-canvas svg { position: absolute; inset: 0; pointer-events: none; }
.strength-canvas svg path { stroke: var(--ink-3); }
.strength-node { position: absolute; width: 224px; height: 156px; padding: 14px; display: flex; gap: 10px; align-items: flex-start; border: var(--line) solid var(--ink); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 4px 0 var(--parts-2); }
.strength-node:hover { box-shadow: 0 4px 0 var(--ink); }
.strength-node[aria-current] { outline: 3px solid var(--blue); outline-offset: 4px; }
.strength-node-copy { display: block; min-width: 0; }
.strength-node strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.strength-node small, .strength-node-copy > span { display: block; font-size: 12px; line-height: 1.3; }
.strength-mark { flex-shrink: 0; width: 26px; height: 18px; border-radius: 5px; border: var(--line) solid var(--ink); background: var(--card); font-size: 0; }
.strength-demonstrated { background: var(--blue-wash); } .strength-demonstrated .strength-mark { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-side); }
.strength-review { background: var(--green-wash); } .strength-review .strength-mark { background: var(--green); }
.strength-growing { background: var(--card); } .strength-growing .strength-mark { background: linear-gradient(90deg, var(--blue) 50%, var(--page) 50%); }
.strength-supported { background: var(--yellow-wash); } .strength-supported .strength-mark { background: var(--yellow); }
.strength-pending { background: var(--parts); } .strength-pending .strength-mark { border-style: dotted; }
.strength-unseen { border-style: dashed; color: var(--ink-2); box-shadow: none; } .strength-unseen .strength-mark { border-style: dashed; }
.strength-key.strength-demonstrated, .strength-detail-symbol.strength-demonstrated { background: var(--blue); box-shadow: inset 0 -4px 0 var(--blue-side); }
.strength-key.strength-review, .strength-detail-symbol.strength-review { background: var(--green); }
.strength-key.strength-growing, .strength-detail-symbol.strength-growing { background: linear-gradient(90deg, var(--blue) 50%, var(--page) 50%); }
.strength-key.strength-supported, .strength-detail-symbol.strength-supported { background: var(--yellow); }
.strength-key.strength-pending, .strength-detail-symbol.strength-pending { background: var(--parts); border-style: dotted; }
.strength-key.strength-unseen, .strength-detail-symbol.strength-unseen { background: var(--card); border-style: dashed; }
.strength-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 16px 0 8px; list-style: none; font-size: 13px; }
.strength-legend li { display: flex; align-items: center; gap: 8px; }
.strength-key { display: inline-grid; place-items: center; width: 26px; height: 18px; border: var(--line) solid var(--ink); border-radius: 5px; font-size: 0; }
.strength-list { margin: 20px 0; padding: 14px 0; border-block: 1px solid var(--rule); }
.strength-list li { padding: 8px 0; }
.strength-list small { display: block; }
.strength-detail { margin-top: 24px; padding: 24px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card); scroll-margin-top: 20px; }
.strength-detail-head { display: flex; justify-content: space-between; gap: 20px; }
.strength-detail h2 { font-size: 1.6rem; }
.strength-detail h3 { font-size: 1.05rem; }
.strength-detail-symbol { flex: none; width: 56px; height: 40px; border: var(--line) solid var(--ink); border-radius: 9px; font-size: 0; }
.strength-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.strength-evidence dt { font-size: 14px; }
.strength-evidence dd { margin: 4px 0 0; font: 400 28px/1 var(--numeral); }
.strength-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; padding: 0; list-style: none; margin: 18px 0; }
.strength-levels li { padding: 12px 0; border-top: 1px solid var(--rule); }
.strength-levels li > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.strength-levels span, .strength-levels small { font-size: 13px; color: var(--ink-2); }
.strength-levels small { display: block; margin-top: 4px; }
.strength-connections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.strength-connections ul { padding-left: 20px; }
.strength-connections li { margin: 8px 0; }
.strength-retained { padding: 10px 14px; background: var(--green-wash); border-radius: var(--r-sm); }
.strength-start { margin: 12px 0; }
.island { margin: 32px 0; }
.bubble-map { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.topic-bubble { width: 200px; }
.topic-bubble button { width: 100%; min-height: 120px; flex-direction: column; color: var(--ink); background: var(--parts); border-color: var(--ink); box-shadow: 0 4px 0 var(--parts-2); font-size: 16px; }
.topic-bubble button[name="goal"] { min-height: 44px; margin-top: 12px; background: var(--card); font-size: 13px; box-shadow: none; }
.topic-bubble small { font-size: 12px; font-weight: 400; margin-top: 8px; }

/* Parent area */
.parent-area { max-width: 960px; margin-inline: auto; }
.parent-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 18px 0 6px; }
.parent-head h1 { margin: 2px 0 0; }
.lock-form { margin: 0; }
.lock-form button { min-height: 44px; padding: 0 14px; font-size: 14px; }
.parent-students { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 14px; }
.parent-students a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 600; }
.parent-students [aria-current="page"] { background: var(--yellow); }
.parent-overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 18px 0; }
.parent-overview > .journey-nav, .parent-overview > .parent-head, .parent-overview > .parent-students, .parent-overview > .banner, .parent-overview > .ok, .parent-overview > .parent-progress, .parent-overview > .parent-links, .parent-overview > .build-log { grid-column: 1 / -1; }
.parent-overview > .parent-actions { align-content: start; }
.parent-overview h2 { margin-top: 0; }
.week-note { padding: 22px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
.parent-overview .week-note { padding-top: 22px; }
.week-note h2 { margin: 0 0 8px; }
.week-lines { list-style: none; padding: 0; margin: 8px 0 14px; display: grid; gap: 8px; font-size: 1.1rem; line-height: 1.45; max-width: 40rem; }
.week-lines li { padding-left: 30px; position: relative; }
.week-lines li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 13px; border-radius: 4px; border: var(--line) solid var(--ink); background: var(--parts); }
.week-action .button, .week-action button { min-height: 56px; font-size: 17px; }
.parent-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.parent-actions a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; border: var(--line) solid var(--ink); border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 700; background: var(--card); box-shadow: 0 3px 0 var(--parts-2); }
.parent-actions a:hover { background: var(--yellow-wash); }
.parent-links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; }
.parent-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); background: var(--parts); text-decoration: none; color: var(--ink); font-weight: 600; }
.parent-links a:hover { background: var(--yellow-wash); }
.parent-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px 0; grid-column: 1 / -1; }
.parent-progress { margin: 20px 0; }
.parent-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.parent-counts div { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--parts); border-radius: var(--r-sm); }
.parent-counts dt { font-size: 15px; font-weight: 600; }
.parent-counts dd { margin: 0; min-width: 34px; height: 28px; display: grid; place-items: center; border: var(--line) solid var(--ink); border-radius: 7px; background: var(--card); font: 400 17px/1 var(--numeral); }
.parent-counts div:first-child dd { background: var(--blue); color: #fff; }
/* Recent missions as brick rows: blue alone, yellow with help, green remembered later, red outline missed. */
.build-log { padding: 20px 22px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
.build-log ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.build-log li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.build-date { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.build-title { font-weight: 600; min-width: 0; }
.build-bricks { display: flex; flex-wrap: wrap; gap: 4px; }
.build-log i { display: inline-block; width: 20px; height: 14px; border-radius: 4px; border: var(--line) solid var(--ink); background: var(--card); vertical-align: -2px; }
.build-log i[data-kind=alone] { background: var(--blue); }
.build-log i[data-kind=help] { background: var(--yellow); }
.build-log i[data-kind=review] { background: var(--green); }
.build-log i[data-kind=miss] { border-color: var(--red); background: var(--red-wash); }
.build-log i[data-kind=pending] { border-style: dotted; }
.build-log i[data-kind=open] { border-style: dashed; border-color: #9aa0ae; }
.build-key { margin-top: 12px; line-height: 2; }
.build-empty { margin: 8px 0 0; padding: 14px; border: 2px dashed #9aa0ae; border-radius: var(--r); color: var(--ink-2); }
.build-key i { margin: 0 2px 0 8px; }
.build-key i:first-child { margin-left: 0; }
.section-index { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 0 18px; }
.section-index a { padding: 8px 0; }
.learning-plan { margin-top: 28px; scroll-margin-top: 24px; }
.family-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.family-progress article { padding: 18px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
.controls { margin: 24px 0; border-top: var(--line) solid var(--ink); }
.controls > summary { font-size: 1.2rem; padding: 14px 0; }
.note-form { margin: 18px 0; }
.note-form textarea { min-height: 4rem; }
.class-card { margin: 0 0 16px; padding: 20px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); background: var(--card); }
.class-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.class-head h2 { margin: 0; }
.class-status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: var(--line) solid var(--ink); border-radius: 8px; font-size: 13px; font-weight: 700; background: var(--blue-wash); }
.class-status[data-status="building"] { background: var(--yellow); }
.class-status[data-status="failed"] { background: var(--red-wash); border-color: var(--red); }
.class-status[data-status="empty"], .class-status[data-status="new"] { background: var(--parts); }
.next-focus { margin: 14px 0; padding: 14px 16px; background: var(--yellow-wash); border-radius: var(--r); }
.next-focus.muted { background: var(--parts); }
.next-focus p { margin: 4px 0; }
.class-topics { margin-top: 10px; }
.add-class { border-style: dashed; background: var(--parts); }
.add-class-form label { display: block; margin: 10px 0; }
.steps { margin: 12px 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.planner-steps li[aria-current="step"] { margin-left: -22px; padding: 6px 10px 6px 22px; background: var(--yellow-wash); border-radius: var(--r-sm); list-style-position: inside; }
.connection-options { margin: 22px 0; }
.connection-status { margin: 14px 0; }
button.chatgpt-button { background: #000; box-shadow: 0 4px 0 #444; }
button.chatgpt-button:hover { background: #222; }
.chatgpt-welcome { margin: 22px 0; padding: 18px; border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
/* Measures read as labelled rows, not big-number tiles. */
.metrics { display: grid; gap: 0; border-top: var(--line) solid var(--ink); margin: 12px 0 20px; }
.metrics > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.metrics > * h2 { margin: 0; font-size: 1rem; }
.metrics > * .fine { grid-column: 1 / -1; margin: 0; }
.metric { margin: 0; font: 700 1.05rem/1.3 var(--sans); text-align: right; }
.learning-measures dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.learning-measures .measure { padding: 14px; background: var(--parts); border-radius: var(--r); }
.panel .learning-measures .measure, .learning-measures.panel .measure { background: var(--card); }
.learning-measures .measure dd { margin: 6px 0 0; display: grid; gap: 4px; }
.learning-measures .measure strong { font: 400 24px/1.1 var(--numeral); }
.learning-measures .is-waiting strong { font: 600 16px/1.3 var(--sans); color: var(--ink-2); }
.gradebook { width: 100%; border-collapse: collapse; }
.gradebook th, .gradebook td { height: 44px; padding: 0 8px; text-align: left; border-bottom: 1px solid var(--rule); }
.gradebook th { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.table-scroll { width: 100%; overflow-x: auto; }
.ladder th[scope="row"] { font-weight: 600; text-align: left; }
.ladder .steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ladder .steps li { padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; font-size: 13px; color: var(--ink-2); }
.ladder .steps li[data-done="true"] { border-color: var(--ink); background: var(--parts); color: var(--ink); font-weight: 600; }
.ladder tr.goal-met th[scope="row"]::after { content: " ★"; }
.gain .metric { font-size: 1.6rem; }
.strength { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Mastery as four bricks: each filled brick is one step of the way. */
.strength::before { content: ""; display: inline-block; vertical-align: middle; width: 88px; height: 16px; margin-right: 10px; border-radius: 4px; border: var(--line) solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 19px, var(--page) 19px 22px), linear-gradient(var(--c, var(--parts)), var(--c, var(--parts))) 0 0 / var(--w, 0) 100% no-repeat, var(--parts); }
.strength[data-strength="1"] { --c: var(--parts-2); --w: 25%; }
.strength[data-strength="2"] { --c: var(--yellow); --w: 50%; }
.strength[data-strength="3"] { --c: var(--blue); --w: 75%; }
.strength[data-strength="4"] { --c: var(--green); --w: 100%; }
.timeline { list-style: none; margin: 12px 0; padding: 0 0 0 26px; border-left: 3px solid var(--ink); }
.timeline li { position: relative; padding: 10px 0 10px 4px; }
.timeline li::before { content: ""; position: absolute; left: -36px; top: 16px; width: 16px; height: 11px; border-radius: 3px; border: var(--line) solid var(--ink); background: var(--yellow); }
.timeline time { font-size: 13px; font-weight: 700; }
.digest-body { white-space: pre-wrap; font-size: 17px; line-height: 1.6; max-width: 44rem; }
.digest.is-new { padding: 14px 16px; background: var(--yellow-wash); border-radius: var(--r); }
.digest-link { font-weight: 700; }
.undo-form { margin: 8px 0 0; }
.school-score { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.school-score small { grid-column: span 2; }
.school-box { margin: 18px 0; }
.school-box > summary { font-size: 1.1rem; }
.question-review { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.review-correct { padding: 18px; background: var(--green-wash); border-radius: var(--r); }
.review-needs_work, .review-unresolved { padding: 18px; background: var(--yellow-wash); border-radius: var(--r); }
.evidence-panel { display: grid; grid-template-columns: 40% 1fr; gap: 28px; margin: 24px 0; align-items: center; }
.radar { width: 100%; max-width: 360px; }
.axis-list { list-style: none; padding: 0; }
.axis-list li { display: grid; grid-template-columns: 1fr 1.5fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.axis-list small { grid-column: span 2; color: var(--ink-3); }
.page-previews, .source-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.page-preview { padding: 12px; border: var(--line) solid var(--ink); border-radius: var(--r); background: var(--card); }
.page-previews img, .source-pages img { width: 100%; max-height: 350px; object-fit: contain; border-radius: var(--r-sm); }
.source-pages img { height: 350px; }
.materials-list { padding-left: 1.1rem; }
.tabs { position: relative; }
.tabs > input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tabs > input:focus-visible ~ .tabbar { outline: 3px solid var(--blue); outline-offset: 3px; }
.tabbar { display: flex; gap: 6px; margin: 8px 0 16px; border-bottom: var(--line) solid var(--ink); }
.tabbar label { margin: 0; padding: 10px 14px; color: var(--ink-2); cursor: pointer; font-weight: 700; border-radius: 10px 10px 0 0; }
.tab { display: none; }
#tab-topics:checked ~ .tabbar label[for="tab-topics"], #tab-record:checked ~ .tabbar label[for="tab-record"] { color: var(--ink); background: var(--yellow); }
#tab-topics:checked ~ #panel-topics, #tab-record:checked ~ #panel-record { display: block; }
.flow { margin: 0 0 2rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0 0.8rem; border-bottom: var(--line) solid var(--ink); margin-bottom: 1rem; }
.subject { margin: 0.4rem 0 2rem; }
.subject-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; }
.pills a { padding: 6px 14px; border: var(--line) solid var(--ink); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); background: var(--card); }
.pills a.on { background: var(--yellow); }
.proposal { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--yellow); }
.proposal ul { margin: 6px 0 12px; padding-left: 1.1rem; }
.student-entry { max-width: 540px; margin: 40px auto; }
.hero { padding: 26px 0 6px; }
.world-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; }
details.setup { margin: 18px 0 40px; border-top: var(--line) solid var(--ink); }
details.setup > summary { font-size: 1.05rem; }

/* Sign in */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 28px; }
.auth-intro h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); }
.auth-intro .lede { margin-top: 12px; }
.auth-steps { list-style: none; display: grid; gap: 10px; margin: 22px 0 0; padding: 0; }
.auth-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; font-weight: 500; }
.auth-steps b { font: 400 34px/1 var(--numeral); }
.auth-forms .panel { margin: 0 0 16px; background: var(--card); border: var(--line) solid var(--ink); }
.auth-forms .panel button[type=submit] { width: 100%; min-height: 54px; font-size: 17px; }
.auth-forms details.setup { margin: 0; border: 0; }
.student-door { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--yellow-wash); border: var(--line) solid var(--ink); border-radius: var(--r); margin-bottom: 16px; font-weight: 600; }

/* Planner drawer: opened from the button in the page header, never floating over content. */
.planner-fab { position: absolute; top: 12px; right: max(var(--gutter), calc((100% - 1120px) / 2)); z-index: var(--z-fab); min-height: 48px; color: var(--ink); background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-side); }
.planner-fab:hover { background: #ffd933; color: var(--ink); }
.planner-fab > span[aria-hidden] { width: 14px; height: 10px; border-radius: 3px; background: var(--ink); font-size: 0; }
.planner-fab[aria-expanded="true"] { visibility: hidden; }
.planner-drawer { position: fixed; inset: 0; z-index: var(--z-drawer); pointer-events: none; }
.planner-scrim { position: absolute; inset: 0; background: rgba(17, 19, 24, .4); opacity: 0; transition: opacity var(--t-base) var(--ease-out); }
.planner-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--card); border-left: var(--line) solid var(--ink); box-shadow: -10px 0 30px rgba(17, 19, 24, .14); transform: translateX(100%); transition: transform var(--t-slow) var(--ease-out); pointer-events: auto; overscroll-behavior: contain; }
.planner-drawer.is-open .planner-panel { transform: none; }
.planner-drawer.is-open .planner-scrim { opacity: 1; pointer-events: auto; }
.planner-drawer[data-restoring] .planner-panel, .planner-drawer[data-restoring] .planner-scrim { transition: none; }
.planner-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: var(--line) solid var(--ink); }
.planner-head h2 { margin: 0; font-size: 1.3rem; }
.planner-close { min-height: 44px; padding: 0 14px; }
.planner-body { flex: 1; overflow: auto; padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.planner-body[aria-busy="true"] .planner-thread { opacity: .6; }
.planner-intro { margin: 0; }
.planner-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; align-content: start; }
.planner-bubble { max-width: 92%; padding: 12px 14px; background: var(--parts); border-radius: 14px 14px 14px 4px; }
.planner-bubble p { margin: 0; white-space: pre-wrap; }
.planner-bubble.mine { justify-self: end; background: var(--yellow-wash); border-radius: 14px 14px 4px 14px; }
.planner-bubble.working { display: flex; align-items: center; gap: 10px; }
.planner-bubble .planner-hear { margin-top: 8px; min-height: 44px; padding: 0 12px; font-size: 14px; }
.planner-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.planner-form label[for="planner-message"] { margin: 0 0 4px; }
.planner-form textarea { min-height: 3.6rem; }
.planner-send { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.planner-send .fine { flex-basis: 100%; font-size: 12px; margin: 0; }
.planner-send [data-voice-status]:empty { display: none; }
.planner-proposal { margin-top: 10px; padding: 12px 14px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r); }
.planner-proposal[data-status="applied"] { background: var(--green-wash); border-color: var(--green); }
.applied-note { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-weight: 700; }
.applied-note .keepsake-art { width: 30px; height: 22px; font-size: 0; background: var(--blue); animation: snap-in var(--t-slow) var(--ease-snap) both; }
.planner-see { margin-top: 8px; }
.planner-photo-button { position: relative; cursor: pointer; margin: 0; }
.planner-photo-button:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.planner-photo-hint { margin: 6px 0 0; font-size: 13px; }
.planner-previews { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.planner-previews li { position: relative; width: 72px; height: 72px; border-radius: var(--r-sm); overflow: hidden; border: var(--line) solid var(--ink); background: var(--card); }
.planner-previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.planner-previews button { position: absolute; top: 2px; right: 2px; min-height: 44px; min-width: 44px; padding: 0; border-radius: 8px; font-size: 14px; box-shadow: none; }
.planner-pages { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.planner-pages img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: var(--line) solid var(--ink); }
.planner-more { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; background: var(--card); border: var(--line) solid var(--ink); font-weight: 700; }
.planner-link { margin: 8px 0 0 !important; }
.planner-bubble.is-arriving { animation: snap-in var(--t-base) var(--ease-snap) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
body.drawer-open { overflow: hidden; }
@media (min-width: 751px) { .planner-scrim { display: none; } }
@media (max-width: 750px) {
  .planner-panel { top: auto; left: 0; width: 100%; height: 88vh; height: min(88dvh, 100%); border-left: 0; border-top: var(--line) solid var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(17, 19, 24, .16); padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); }
  .planner-panel::before { content: ""; display: block; width: 44px; height: 6px; margin: 8px auto 0; border-radius: 3px; background: var(--parts-2); }
  .planner-bubble { max-width: 100%; }
}
.chatgpt-in-use { display: inline-block; margin-top: 4px; }

/* Printed practice sheets */
.sheet-body { background: #fff; color: #000; color-scheme: light; }
.sheet { position: relative; width: 612px; min-height: 792px; margin: 1rem auto; padding: 72px 48px; }
.corner { position: absolute; width: 18px; height: 18px; border-top: 3px solid black; border-left: 3px solid black; }
.c1 { top: 28px; left: 28px; } .c2 { top: 28px; right: 28px; transform: scaleX(-1); } .c3 { bottom: 28px; left: 28px; transform: scaleY(-1); } .c4 { bottom: 28px; right: 28px; transform: scale(-1); }
.sheet-title { font-size: 1.6rem; line-height: 1.05; color: #000; }
.sheet-head, .sheet-item { display: grid; grid-template-columns: 110px 1fr 160px; gap: 0.8rem; align-items: start; }
.sheet-head { grid-template-columns: 110px 1fr; margin-bottom: 1.2rem; }
.box { border: 2px solid black; }
@media print { .no-print, .top, .skip, .journey-nav, .planner-fab { display: none !important; } body { background: #fff; color: #000; } }

/* Age bands: 5–7 bigger and almost wordless, 11–14 calmer and denser. Scoring is identical. */
[data-presentation=junior] { font-size: 19px; }
[data-presentation=junior] button, [data-presentation=junior] .button { min-height: 56px; font-size: 18px; }
[data-band="5-7"] { font-size: 21px; }
[data-band="5-7"] button, [data-band="5-7"] .button { min-height: 64px; font-size: 20px; }
[data-band="5-7"] .question-text { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); line-height: 1.25; }
[data-band="5-7"] .choice { min-height: 76px; font-size: 28px; }
[data-band="5-7"] .journey-nav a, [data-band="5-7"] .student-signout button, [data-band="5-7"] .bubble .ghost, [data-band="5-7"] summary, [data-band="5-7"] .chip, [data-band="5-7"] .manip-part, [data-band="5-7"] .durations span, [data-band="5-7"] .check, [data-band="5-7"] .strength-subjects a, [data-band="5-7"] .pack-count span, [data-band="5-7"] .pack-mode span { min-height: 64px; }
[data-band="5-7"] .manip-part, [data-band="5-7"] .durations span { min-width: 64px; }
/* The phone tab bar sits outside the learner wrapper, so ages 5–7 are found through the page. */
body:has([data-band="5-7"]) .journey-nav a { min-height: 64px; }
[data-band="5-7"] .journey .lede, [data-band="5-7"] .journey .fine, [data-band="5-7"] .mission-key { display: none; }
[data-band="5-7"] .tap-to-hear { animation: brick-bob 1.4s var(--ease-out) infinite; }
[data-band="11-14"] { font-size: 16px; }
[data-band="11-14"] button, [data-band="11-14"] .button { min-height: 44px; font-size: 15px; }
[data-band="11-14"] .question-text { font-size: 1.35rem; }
[data-band="11-14"] .step-number { font-size: 64px; }

/* Motion: one authored moment, a brick snapping into place. */
/* The one celebration: Bloop jumps for joy on a right answer. */
.ok > .companion, .feedback-review article.is-right > .companion { animation: bloop-jump 900ms var(--ease-out) both; }
@keyframes bloop-jump { 0% { transform: translateY(12px) scale(0.8); } 35% { transform: translateY(-18px) scale(1.08) rotate(-6deg); } 60% { transform: translateY(0) scale(0.97) rotate(3deg); } 100% { transform: none; } }
@keyframes snap-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes bubble-think { 50% { transform: translateY(-5px); } }
@keyframes brick-bob { 50% { transform: translateY(-3px); } }
@keyframes brick-stack { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
@keyframes voice-bar { 0%, 100% { height: 6px; opacity: .6; } 50% { height: 24px; opacity: 1; } }


/* Footer: privacy, terms and the source link (AGPL section 13). Quiet, and clear of the phone tabs. */
.site-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 18px 16px 24px; font-size: .85rem; color: var(--muted, #555); }
.site-foot a { color: inherit; }
@media (max-width: 760px) { body:has(.journey-nav) .site-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
.legal { max-width: 68ch; }
.legal h2 { margin-top: 1.4em; font-size: 1.15rem; }
.legal li { margin-bottom: .4em; }

/* ===== Worlds. One app, swappable skins; each child picks a world (src/worlds.ts). Cartoon Club is the default,
   so a page with no world on it (sign-in, family list) is Cartoon Club too. Scoring and layout never change between worlds. ===== */

@font-face { font-family: Nunito; src: url('/fonts/nunito-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: Bangers; src: url('/fonts/bangers-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url('/fonts/pixelify-sans-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Fredoka; src: url('/fonts/fredoka-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url('/fonts/patrick-hand-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cherry Bomb One"; src: url('/fonts/cherry-bomb-one-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root:has([data-world="cartoon"]), :root:not(:has([data-world])) {
  --sans: Nunito, ui-rounded, system-ui, sans-serif; --display: Bangers, Nunito, system-ui, sans-serif; --display-weight: 400; --logo-font: Bangers, Nunito, sans-serif; --button-font: Nunito, system-ui, sans-serif;
  --page: #ffffff; --card: #ffffff; --page-bg: #ffe23f url("/worlds/cartoon/pattern.webp") 0 0 / 420px repeat;
  --ink: #1a1030; --ink-2: #3b2f5c; --ink-3: #574b78; --rule: #e7defa; --parts: #f6f1ff; --parts-2: #e3d8ff;
  --yellow: #ffd400; --yellow-side: #c79f00; --yellow-wash: #fff6c2;
  --blue: #1f5fff; --blue-side: #1240b8; --blue-wash: #e2ebff;
  --green: #e6007e; --green-side: #8f004e; --green-wash: #ffe0f0; --green-hover: #c4006b;
  --red: #ff3b30; --red-wash: #ffe6e3;
  --line: 3px; --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-btn: 999px;
  --heading-shadow: 3px 3px 0 #ffd400; --frame-shadow: 8px 8px 0 var(--ink);
  --nav-bg: #ffd400; --nav-ink: #1a1030; --nav-active: #e6007e; --nav-active-ink: #ffffff; --hero: url("/worlds/cartoon/hero.webp"); --bloop-wave: url("/worlds/cartoon/bloop-wave.webp"); --bloop-think: url("/worlds/cartoon/bloop-think.webp"); --bloop-cheer: url("/worlds/cartoon/bloop-cheer.webp"); --bloop-oops: url("/worlds/cartoon/bloop-oops.webp");
}
:root:has([data-world="cartoon"]) .top, :root:not(:has([data-world])) .top { border-bottom: 0; background: #fff; margin-top: 12px; padding: 0 16px; border-radius: 999px; box-shadow: 0 5px 0 var(--ink), 0 0 0 3px var(--ink); }
:root:has([data-world="cartoon"]) h1, :root:not(:has([data-world])) h1 { letter-spacing: 0.02em; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 0.95; }
:root:has([data-world="cartoon"]) h2, :root:not(:has([data-world])) h2 { letter-spacing: 0.02em; font-size: 1.6rem; }
:root:has([data-world="cartoon"]) .today-mission, :root:not(:has([data-world])) .today-mission, :root:has([data-world="cartoon"]) .prompt, :root:not(:has([data-world])) .prompt, :root:has([data-world="cartoon"]) .week-note, :root:not(:has([data-world])) .week-note, :root:has([data-world="cartoon"]) .build-log, :root:not(:has([data-world])) .build-log, :root:has([data-world="cartoon"]) .class-card, :root:not(:has([data-world])) .class-card, :root:has([data-world="cartoon"]) .strength-detail, :root:not(:has([data-world])) .strength-detail, :root:has([data-world="cartoon"]) .auth-forms .panel, :root:not(:has([data-world])) .auth-forms .panel, :root:has([data-world="cartoon"]) .world-tile, :root:not(:has([data-world])) .world-tile { box-shadow: 6px 6px 0 var(--ink); }
:root:has([data-world="cartoon"]) .today-mission, :root:not(:has([data-world])) .today-mission { transform: rotate(-0.6deg); }
:root:has([data-world="cartoon"]) .today-mission h2, :root:not(:has([data-world])) .today-mission h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.8rem); text-shadow: 3px 3px 0 #00d1ff; }
:root:has([data-world="cartoon"]) button:not(.linklike):not(.planner-fab), :root:not(:has([data-world])) button:not(.linklike):not(.planner-fab), :root:has([data-world="cartoon"]) .button, :root:not(:has([data-world])) .button { font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; box-shadow: 0 5px 0 var(--ink); }
:root:has([data-world="cartoon"]) button.ghost:not(.linklike):not(.planner-fab), :root:not(:has([data-world])) button.ghost:not(.linklike):not(.planner-fab), :root:has([data-world="cartoon"]) .button.ghost, :root:not(:has([data-world])) .button.ghost { box-shadow: 0 4px 0 var(--ink); }
:root:has([data-world="cartoon"]) .mission-start button.go, :root:not(:has([data-world])) .mission-start button.go, :root:has([data-world="cartoon"]) .answer > button[type=submit], :root:not(:has([data-world])) .answer > button[type=submit] { font: 400 30px/1 Bangers, Nunito, sans-serif; letter-spacing: 0.06em; transform: rotate(-1deg); background: var(--green); }
:root:has([data-world="cartoon"]) .question-text, :root:not(:has([data-world])) .question-text { font-family: Nunito, system-ui, sans-serif; font-weight: 900; }
:root:has([data-world="cartoon"]) .step-number, :root:not(:has([data-world])) .step-number { font-family: Bangers, sans-serif; color: var(--green); text-shadow: 4px 4px 0 var(--ink); }
:root:has([data-world="cartoon"]) .ok, :root:not(:has([data-world])) .ok { background: #eafff3; border-color: #00b86b; }
:root:has([data-world="cartoon"]) .mission-plan span[data-beat], :root:not(:has([data-world])) .mission-plan span[data-beat], :root:has([data-world="cartoon"]) .stones li, :root:not(:has([data-world])) .stones li, :root:has([data-world="cartoon"]) .mission-key i, :root:not(:has([data-world])) .mission-key i { border: 0; border-radius: 0; box-shadow: none; clip-path: none; background: transparent url("/worlds/cartoon/step-own.webp") center / contain no-repeat; }
:root:has([data-world="cartoon"]) .mission-plan span[data-beat=together], :root:not(:has([data-world])) .mission-plan span[data-beat=together], :root:has([data-world="cartoon"]) .stones li[data-beat=together], :root:not(:has([data-world])) .stones li[data-beat=together], :root:has([data-world="cartoon"]) .stones li[data-beat=clue], :root:not(:has([data-world])) .stones li[data-beat=clue], :root:has([data-world="cartoon"]) .mission-key [data-beat=together] i, :root:not(:has([data-world])) .mission-key [data-beat=together] i { background-image: url("/worlds/cartoon/step-together.webp"); }
:root:has([data-world="cartoon"]) .mission-plan span[data-beat=review], :root:not(:has([data-world])) .mission-plan span[data-beat=review], :root:has([data-world="cartoon"]) .stones li[data-beat=review], :root:not(:has([data-world])) .stones li[data-beat=review], :root:has([data-world="cartoon"]) .mission-key [data-beat=review] i, :root:not(:has([data-world])) .mission-key [data-beat=review] i { background-image: url("/worlds/cartoon/step-review.webp"); }
:root:has([data-world="cartoon"]) .mission-plan span[data-beat], :root:not(:has([data-world])) .mission-plan span[data-beat] { height: 56px; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 17px; }
:root:has([data-world="cartoon"]) .mission-key i, :root:not(:has([data-world])) .mission-key i { width: 22px; height: 22px; }
:root:has([data-world="cartoon"]) .stones li, :root:not(:has([data-world])) .stones li { width: 30px; height: 30px; }
:root:has([data-world="cartoon"]) .stones li[data-state=next], :root:not(:has([data-world])) .stones li[data-state=next] { filter: grayscale(1); opacity: 0.4; }
:root:has([data-world="cartoon"]) .stones li[data-state=now], :root:not(:has([data-world])) .stones li[data-state=now] { border: 0; transform: translateY(-4px) scale(1.2); box-shadow: none; filter: drop-shadow(0 3px 0 var(--ink)); }
:root:has([data-world="cartoon"]) .prompt h1, :root:not(:has([data-world])) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }
:root:has([data-world="8bit"]) {
  --sans: Nunito, system-ui, sans-serif; --display: "Pixelify Sans", Nunito, monospace; --display-weight: 700; --logo-font: "Pixelify Sans", monospace; --button-font: "Pixelify Sans", Nunito, monospace; --numeral: "Pixelify Sans", monospace;
  --page: #fff7e1; --card: #fff7e1; --page-bg: #5c94fc url("/worlds/8bit/pattern.webp") 0 0 / 384px repeat;
  --ink: #000000; --ink-2: #2a2a2a; --ink-3: #4a4a4a; --rule: #d8c9a0; --parts: #f3e6bf; --parts-2: #d8c48c;
  --yellow: #f8b800; --yellow-side: #ac7c00; --yellow-wash: #fff0b8;
  --blue: #0047d6; --blue-side: #001f8f; --blue-wash: #d6e4ff;
  --green: #c84c0c; --green-side: #7c2c00; --green-wash: #ffe2cf; --green-hover: #a63c08;
  --red: #d82800; --red-wash: #ffdcd2;
  --line: 4px; --r-sm: 0px; --r: 0px; --r-lg: 0px; --r-btn: 0px; --frame-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.12), 0 0 0 4px #fff;
  --heading: #ffffff; --heading-shadow: 3px 3px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
  --nav-bg: #000000; --nav-ink: #ffffff; --nav-active: #f8b800; --nav-active-ink: #000000; --hero: url("/worlds/8bit/hero.webp"); --bloop-wave: url("/worlds/8bit/bloop-wave.webp"); --bloop-think: url("/worlds/8bit/bloop-think.webp"); --bloop-cheer: url("/worlds/8bit/bloop-cheer.webp"); --bloop-oops: url("/worlds/8bit/bloop-oops.webp");
}
:root:has([data-world="8bit"]) .companion { image-rendering: pixelated; }
:root:has([data-world="8bit"]) .top { border-bottom: 0; background: #000; margin: 10px auto 0; padding: 0 14px; }
:root:has([data-world="8bit"]) .mark { color: #fff; }
:root:has([data-world="8bit"]) .today-mission h2, :root:has([data-world="8bit"]) .prompt h1, :root:has([data-world="8bit"]) .week-note h2, :root:has([data-world="8bit"]) .build-log h2, :root:has([data-world="8bit"]) .panel h2, :root:has([data-world="8bit"]) .class-card h2, :root:has([data-world="8bit"]) .strength-detail h2, :root:has([data-world="8bit"]) .world-tile strong, :root:has([data-world="8bit"]) .auth-forms .panel h2, :root:has([data-world="8bit"]) .card h2 { color: var(--ink); text-shadow: none; }
:root:has([data-world="8bit"]) .today-mission, :root:has([data-world="8bit"]) .prompt, :root:has([data-world="8bit"]) .week-note, :root:has([data-world="8bit"]) .build-log, :root:has([data-world="8bit"]) .class-card, :root:has([data-world="8bit"]) .strength-detail, :root:has([data-world="8bit"]) .auth-forms .panel, :root:has([data-world="8bit"]) .world-tile, :root:has([data-world="8bit"]) .panel, :root:has([data-world="8bit"]) .pack-ask { clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.12); }
:root:has([data-world="8bit"]) button:not(.linklike):not(.planner-fab), :root:has([data-world="8bit"]) .button { box-shadow: inset -5px -5px 0 rgba(0, 0, 0, 0.35), inset 5px 5px 0 rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.04em; }
:root:has([data-world="8bit"]) button:not(.linklike):active, :root:has([data-world="8bit"]) .button:active { box-shadow: inset 5px 5px 0 rgba(0, 0, 0, 0.35); transform: none; }
:root:has([data-world="8bit"]) .mission-start button.go, :root:has([data-world="8bit"]) .answer > button[type=submit] { font-size: 26px; }
:root:has([data-world="8bit"]) .stones li, :root:has([data-world="8bit"]) .mission-plan span, :root:has([data-world="8bit"]) .step-tag { border-radius: 0; }
:root:has([data-world="8bit"]) .mission-plan span[data-beat], :root:has([data-world="8bit"]) .stones li, :root:has([data-world="8bit"]) .mission-key i { border: 0; border-radius: 0; box-shadow: none; clip-path: none; image-rendering: pixelated; background: transparent url("/worlds/8bit/step-own.webp") center / contain no-repeat; }
:root:has([data-world="8bit"]) .mission-plan span[data-beat=together], :root:has([data-world="8bit"]) .stones li[data-beat=together], :root:has([data-world="8bit"]) .stones li[data-beat=clue], :root:has([data-world="8bit"]) .mission-key [data-beat=together] i { background-image: url("/worlds/8bit/step-together.webp"); }
:root:has([data-world="8bit"]) .mission-plan span[data-beat=review], :root:has([data-world="8bit"]) .stones li[data-beat=review], :root:has([data-world="8bit"]) .mission-key [data-beat=review] i { background-image: url("/worlds/8bit/step-review.webp"); }
:root:has([data-world="8bit"]) .mission-plan span[data-beat] { height: 56px; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 17px; }
:root:has([data-world="8bit"]) .mission-key i { width: 22px; height: 22px; }
:root:has([data-world="8bit"]) .stones li { width: 30px; height: 30px; }
:root:has([data-world="8bit"]) .stones li[data-state=next] { filter: grayscale(1); opacity: 0.4; }
:root:has([data-world="8bit"]) .stones li[data-state=now] { border: 0; transform: translateY(-4px) scale(1.2); box-shadow: none; filter: drop-shadow(0 3px 0 var(--ink)); }
:root:has([data-world="8bit"]) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }
:root:has([data-world="toybox"]) {
  --sans: Fredoka, Nunito, system-ui, sans-serif; --display: Fredoka, Nunito, system-ui, sans-serif; --display-weight: 700; --logo-font: Fredoka, sans-serif; --button-font: Fredoka, sans-serif; --numeral: Fredoka, sans-serif;
  --page: #ffffff; --card: #ffffff; --page-bg: #efe4ff url("/worlds/toybox/pattern.webp") 0 0 / 460px repeat;
  --ink: #3a2a5e; --ink-2: #4f3f74; --ink-3: #66588a; --rule: #ece4ff; --parts: #f6f0ff; --parts-2: #e6dbff;
  --yellow: #ffb21c; --yellow-side: #d98900; --yellow-wash: #fff1d1;
  --blue: #6a3df0; --blue-side: #4a22c0; --blue-wash: #ece5ff;
  --green: #158a3e; --green-side: #0c5e29; --green-wash: #dff6e7; --green-hover: #117a36;
  --red: #e5384d; --red-wash: #ffe3e7;
  --line: 0px; --r-sm: 18px; --r: 24px; --r-lg: 34px; --r-btn: 999px; --frame-shadow: 0 20px 50px rgba(90, 60, 160, 0.22);
  --nav-bg: #ffffff; --nav-ink: #3a2a5e; --nav-active: #ffb21c; --nav-active-ink: #3a2a5e; --hero: url("/worlds/toybox/hero.webp"); --bloop-wave: url("/worlds/toybox/bloop-wave.webp"); --bloop-think: url("/worlds/toybox/bloop-think.webp"); --bloop-cheer: url("/worlds/toybox/bloop-cheer.webp"); --bloop-oops: url("/worlds/toybox/bloop-oops.webp");
}
:root:has([data-world="toybox"]) .top { border-bottom: 0; background: rgba(255, 255, 255, 0.85); margin-top: 12px; padding: 0 18px; border-radius: 999px; box-shadow: 0 10px 24px rgba(90, 60, 160, 0.16); }
:root:has([data-world="toybox"]) .mark { background: linear-gradient(90deg, #ff4fa3, #ffb21c, #2bc96b, #3fa7ff, #8a5cff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
:root:has([data-world="toybox"]) .today-mission, :root:has([data-world="toybox"]) .prompt, :root:has([data-world="toybox"]) .week-note, :root:has([data-world="toybox"]) .build-log, :root:has([data-world="toybox"]) .class-card, :root:has([data-world="toybox"]) .strength-detail, :root:has([data-world="toybox"]) .auth-forms .panel, :root:has([data-world="toybox"]) .world-tile, :root:has([data-world="toybox"]) .panel, :root:has([data-world="toybox"]) .pack-ask, :root:has([data-world="toybox"]) .quick-missions > a { box-shadow: 0 14px 30px rgba(90, 60, 160, 0.16), inset 0 -6px 0 rgba(90, 60, 160, 0.06); }
:root:has([data-world="toybox"]) button:not(.linklike):not(.planner-fab), :root:has([data-world="toybox"]) .button { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%); box-shadow: 0 6px 0 var(--green-side), 0 12px 20px rgba(21, 138, 62, 0.25); }
:root:has([data-world="toybox"]) button.ghost:not(.linklike):not(.planner-fab), :root:has([data-world="toybox"]) .button.ghost { background-image: none; box-shadow: 0 5px 0 var(--parts-2), 0 10px 18px rgba(90, 60, 160, 0.12); }
:root:has([data-world="toybox"]) .mission-start button.go, :root:has([data-world="toybox"]) .answer > button[type=submit] { font-size: 26px; min-height: 72px; }
:root:has([data-world="toybox"]) .mission-plan span, :root:has([data-world="toybox"]) .stones li { border-radius: 10px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.18), inset 0 4px 0 rgba(255, 255, 255, 0.4); }
:root:has([data-world="toybox"]) input, :root:has([data-world="toybox"]) select, :root:has([data-world="toybox"]) textarea { border-radius: 16px; border-color: #d6c8ff; }
:root:has([data-world="toybox"]) .mission-plan span[data-beat], :root:has([data-world="toybox"]) .stones li, :root:has([data-world="toybox"]) .mission-key i { border: 0; border-radius: 0; box-shadow: none; clip-path: none; background: transparent url("/worlds/toybox/step-own.webp") center / contain no-repeat; }
:root:has([data-world="toybox"]) .mission-plan span[data-beat=together], :root:has([data-world="toybox"]) .stones li[data-beat=together], :root:has([data-world="toybox"]) .stones li[data-beat=clue], :root:has([data-world="toybox"]) .mission-key [data-beat=together] i { background-image: url("/worlds/toybox/step-together.webp"); }
:root:has([data-world="toybox"]) .mission-plan span[data-beat=review], :root:has([data-world="toybox"]) .stones li[data-beat=review], :root:has([data-world="toybox"]) .mission-key [data-beat=review] i { background-image: url("/worlds/toybox/step-review.webp"); }
:root:has([data-world="toybox"]) .mission-plan span[data-beat] { height: 56px; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 17px; }
:root:has([data-world="toybox"]) .mission-key i { width: 22px; height: 22px; }
:root:has([data-world="toybox"]) .stones li { width: 30px; height: 30px; }
:root:has([data-world="toybox"]) .stones li[data-state=next] { filter: grayscale(1); opacity: 0.4; }
:root:has([data-world="toybox"]) .stones li[data-state=now] { border: 0; transform: translateY(-4px) scale(1.2); box-shadow: none; filter: drop-shadow(0 3px 0 var(--ink)); }
:root:has([data-world="toybox"]) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }
:root:has([data-world="sticker"]) {
  --sans: Nunito, system-ui, sans-serif; --display: "Patrick Hand", Nunito, system-ui, sans-serif; --display-weight: 400; --logo-font: "Patrick Hand", sans-serif; --button-font: Nunito, sans-serif;
  --page: #fffdf6; --card: #fffdf6; --page-bg: #fbf6ea url("/worlds/sticker/pattern.webp") 0 0 / 520px repeat;
  --ink: #2a2340; --ink-2: #463d60; --ink-3: #5f5678; --rule: #eadfca; --parts: #f6efe1; --parts-2: #e7dbc2;
  --yellow: #ffd23f; --yellow-side: #c99f13; --yellow-wash: #fff5c9;
  --blue: #2563c9; --blue-side: #17408a; --blue-wash: #e3ecfb;
  --green: #d63a12; --green-side: #8f250a; --green-wash: #ffe4d9; --green-hover: #b9310e;
  --red: #c62828; --red-wash: #fde4e4;
  --line: 2px; --r-sm: 8px; --r: 12px; --r-lg: 6px; --r-btn: 999px; --frame-shadow: 0 14px 34px rgba(60, 40, 10, 0.18);
  --nav-bg: #fffdf6; --nav-ink: #2a2340; --nav-active: #ffd23f; --nav-active-ink: #2a2340; --hero: url("/worlds/sticker/hero.webp"); --bloop-wave: url("/worlds/sticker/bloop-wave.webp"); --bloop-think: url("/worlds/sticker/bloop-think.webp"); --bloop-cheer: url("/worlds/sticker/bloop-cheer.webp"); --bloop-oops: url("/worlds/sticker/bloop-oops.webp");
}
:root:has([data-world="sticker"]) h1 { font-size: clamp(2.3rem, 1.7rem + 3vw, 3.4rem); }
:root:has([data-world="sticker"]) h2 { font-size: 1.7rem; }
:root:has([data-world="sticker"]) .top { border-bottom: 0; }
:root:has([data-world="sticker"]) .today-mission { position: relative; transform: rotate(-1deg); box-shadow: 0 10px 20px rgba(60, 40, 10, 0.12); }
:root:has([data-world="sticker"]) .today-mission::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgba(255, 120, 170, 0.55); transform: rotate(-4deg); }
:root:has([data-world="sticker"]) .prompt, :root:has([data-world="sticker"]) .week-note, :root:has([data-world="sticker"]) .build-log, :root:has([data-world="sticker"]) .class-card, :root:has([data-world="sticker"]) .strength-detail, :root:has([data-world="sticker"]) .auth-forms .panel, :root:has([data-world="sticker"]) .world-tile { box-shadow: 0 8px 18px rgba(60, 40, 10, 0.10); }
:root:has([data-world="sticker"]) .prompt { transform: rotate(0.4deg); }
:root:has([data-world="sticker"]) button:not(.linklike):not(.planner-fab), :root:has([data-world="sticker"]) .button { box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(60, 40, 10, 0.25); }
:root:has([data-world="sticker"]) button.ghost:not(.linklike):not(.planner-fab), :root:has([data-world="sticker"]) .button.ghost { box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(60, 40, 10, 0.15); }
:root:has([data-world="sticker"]) .mission-plan span, :root:has([data-world="sticker"]) .stones li { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 3px 6px rgba(0, 0, 0, 0.18); }
:root:has([data-world="sticker"]) .mission-start button.go, :root:has([data-world="sticker"]) .answer > button[type=submit] { font-size: 24px; }
:root:has([data-world="sticker"]) .mission-plan span[data-beat], :root:has([data-world="sticker"]) .stones li, :root:has([data-world="sticker"]) .mission-key i { border: 0; border-radius: 0; box-shadow: none; clip-path: none; background: transparent url("/worlds/sticker/step-own.webp") center / contain no-repeat; }
:root:has([data-world="sticker"]) .mission-plan span[data-beat=together], :root:has([data-world="sticker"]) .stones li[data-beat=together], :root:has([data-world="sticker"]) .stones li[data-beat=clue], :root:has([data-world="sticker"]) .mission-key [data-beat=together] i { background-image: url("/worlds/sticker/step-together.webp"); }
:root:has([data-world="sticker"]) .mission-plan span[data-beat=review], :root:has([data-world="sticker"]) .stones li[data-beat=review], :root:has([data-world="sticker"]) .mission-key [data-beat=review] i { background-image: url("/worlds/sticker/step-review.webp"); }
:root:has([data-world="sticker"]) .mission-plan span[data-beat] { height: 56px; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 17px; }
:root:has([data-world="sticker"]) .mission-key i { width: 22px; height: 22px; }
:root:has([data-world="sticker"]) .stones li { width: 30px; height: 30px; }
:root:has([data-world="sticker"]) .stones li[data-state=next] { filter: grayscale(1); opacity: 0.4; }
:root:has([data-world="sticker"]) .stones li[data-state=now] { border: 0; transform: translateY(-4px) scale(1.2); box-shadow: none; filter: drop-shadow(0 3px 0 var(--ink)); }
:root:has([data-world="sticker"]) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }
:root:has([data-world="princess"]) {
  --sans: Nunito, system-ui, sans-serif; --display: "Cherry Bomb One", Nunito, system-ui, sans-serif; --display-weight: 400; --logo-font: "Cherry Bomb One", sans-serif; --button-font: Nunito, sans-serif;
  --page: #fffafd; --card: #fffafd; --page-bg: #ffe4f1 url("/worlds/princess/pattern.webp") 0 0 / 440px repeat;
  --ink: #4a1d4f; --ink-2: #5f3264; --ink-3: #7a4c80; --rule: #f6d7ea; --parts: #fff0f8; --parts-2: #f6d1e6;
  --yellow: #ffcf5c; --yellow-side: #c79a2e; --yellow-wash: #fff3d6;
  --blue: #8e44ad; --blue-side: #5e2a75; --blue-wash: #f3e6fa;
  --green: #c2185b; --green-side: #7f0f3b; --green-wash: #ffe1ee; --green-hover: #a3134c;
  --red: #d32f2f; --red-wash: #ffe3e3;
  --line: 2px; --r-sm: 16px; --r: 22px; --r-lg: 28px; --r-btn: 999px; --frame-shadow: 0 0 0 6px #ffe7a6, 0 0 0 8px var(--ink), 0 18px 40px rgba(194, 24, 91, 0.2);
  --heading: #a3134c; --heading-shadow: 2px 2px 0 #ffcf5c;
  --nav-bg: #fff0f8; --nav-ink: #4a1d4f; --nav-active: #c2185b; --nav-active-ink: #ffffff; --hero: url("/worlds/princess/hero.webp"); --bloop-wave: url("/worlds/princess/bloop-wave.webp"); --bloop-think: url("/worlds/princess/bloop-think.webp"); --bloop-cheer: url("/worlds/princess/bloop-cheer.webp"); --bloop-oops: url("/worlds/princess/bloop-oops.webp");
}
:root:has([data-world="princess"]) .top { border-bottom: 0; }
:root:has([data-world="princess"]) .today-mission, :root:has([data-world="princess"]) .prompt, :root:has([data-world="princess"]) .week-note, :root:has([data-world="princess"]) .build-log, :root:has([data-world="princess"]) .class-card, :root:has([data-world="princess"]) .strength-detail, :root:has([data-world="princess"]) .auth-forms .panel, :root:has([data-world="princess"]) .world-tile { box-shadow: 0 0 0 5px #ffe7a6, 0 0 0 7px var(--ink), 0 14px 30px rgba(194, 24, 91, 0.18); }
:root:has([data-world="princess"]) button:not(.linklike):not(.planner-fab), :root:has([data-world="princess"]) .button { background-image: linear-gradient(135deg, #e0418a, #c2185b 55%, #8e44ad); box-shadow: 0 5px 0 var(--green-side), 0 0 18px rgba(255, 207, 92, 0.6); }
:root:has([data-world="princess"]) button.ghost:not(.linklike):not(.planner-fab), :root:has([data-world="princess"]) .button.ghost { background-image: none; }
:root:has([data-world="princess"]) .mission-plan span, :root:has([data-world="princess"]) .stones li { clip-path: polygon(50% 0, 100% 35%, 80% 100%, 20% 100%, 0 35%); border-radius: 0; }
:root:has([data-world="princess"]) .mission-start button.go, :root:has([data-world="princess"]) .answer > button[type=submit] { font: 400 28px/1 "Cherry Bomb One", Nunito, sans-serif; }
:root:has([data-world="princess"]) .mission-plan span[data-beat], :root:has([data-world="princess"]) .stones li, :root:has([data-world="princess"]) .mission-key i { border: 0; border-radius: 0; box-shadow: none; clip-path: none; background: transparent url("/worlds/princess/step-own.webp") center / contain no-repeat; }
:root:has([data-world="princess"]) .mission-plan span[data-beat=together], :root:has([data-world="princess"]) .stones li[data-beat=together], :root:has([data-world="princess"]) .stones li[data-beat=clue], :root:has([data-world="princess"]) .mission-key [data-beat=together] i { background-image: url("/worlds/princess/step-together.webp"); }
:root:has([data-world="princess"]) .mission-plan span[data-beat=review], :root:has([data-world="princess"]) .stones li[data-beat=review], :root:has([data-world="princess"]) .mission-key [data-beat=review] i { background-image: url("/worlds/princess/step-review.webp"); }
:root:has([data-world="princess"]) .mission-plan span[data-beat] { height: 56px; color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; font-size: 17px; }
:root:has([data-world="princess"]) .mission-key i { width: 22px; height: 22px; }
:root:has([data-world="princess"]) .stones li { width: 30px; height: 30px; }
:root:has([data-world="princess"]) .stones li[data-state=next] { filter: grayscale(1); opacity: 0.4; }
:root:has([data-world="princess"]) .stones li[data-state=now] { border: 0; transform: translateY(-4px) scale(1.2); box-shadow: none; filter: drop-shadow(0 3px 0 var(--ink)); }
:root:has([data-world="princess"]) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }
:root:has([data-world="booklet"]) {
  --sans: Lexend, ui-sans-serif, system-ui, sans-serif; --display: Lexend, ui-sans-serif, system-ui, sans-serif; --display-weight: 700; --logo-font: "Archivo Black", Lexend, sans-serif; --button-font: Lexend, sans-serif; --numeral: "Archivo Black", Lexend, sans-serif;
  --page: #ffffff; --card: #ffffff; --page-bg: #ffffff;
  --ink: #111318; --ink-2: #444a57; --ink-3: #5a6070; --rule: #d9dce3; --parts: #eef0f4; --parts-2: #dfe2e9;
  --yellow: #ffcf00; --yellow-side: #b89400; --yellow-wash: #fff5c7;
  --blue: #0a5bd3; --blue-side: #063f96; --blue-wash: #e4eefc;
  --green: #157a3a; --green-side: #0b4f24; --green-wash: #e1f2e6; --green-hover: #126a32;
  --red: #c8261c; --red-wash: #fde8e5;
  --line: 2px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-btn: 12px; --heading-shadow: none;
  --hero: url("/worlds/booklet/hero.webp"); --bloop-wave: url("/worlds/booklet/bloop-wave.webp"); --bloop-think: url("/worlds/booklet/bloop-think.webp"); --bloop-cheer: url("/worlds/booklet/bloop-cheer.webp"); --bloop-oops: url("/worlds/booklet/bloop-oops.webp");
}
:root:has([data-world="booklet"]) .prompt h1 { font: 600 1.05rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--ink-2); }

/* Tablets and laptops */
@media (min-width: 900px) {
  .journey .today-mission { padding: 28px; }
  .quick-missions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

/* Phones: the learner tabs move to a bar at the bottom of the screen. */
@media (max-width: 750px) {
  :root { --gutter: 16px; }
  .top { min-height: 64px; }
  .mark { font-size: 21px; }
  .planner-fab { top: 8px; }
  main { padding-bottom: 56px; }
  body:has(.journey-nav) main { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* During a question the tabs step aside so the mission is the only thing on screen; Save & stop is the way out. */
  body:has(form.answer) .journey-nav, body:has(.feedback-review) .journey-nav { display: none; }
  body:has(.journey-nav) .lesson-start { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(form.answer) main, body:has(.feedback-review) main { padding-bottom: 56px; }
  .journey-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: var(--nav-bg, var(--card)); border-top: max(var(--line), 2px) solid var(--ink); }
  .journey-nav a { color: var(--nav-ink, var(--ink)); }
  .journey-nav a[aria-current] { background: var(--nav-active, var(--yellow)); color: var(--nav-active-ink, var(--ink)); }
  .journey-nav a { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 4px 2px; font-size: 12px; line-height: 1.15; text-align: center; border-radius: var(--r-sm); }
  .journey-nav .parent-link { margin-left: 0; border-color: transparent; }
  .field-pair, .evidence-panel, .parent-overview, .parent-evidence, .auth, .strength-levels, .strength-connections, .checks, .sheet-head, .sheet-item { grid-template-columns: 1fr; }
  .class-topics .gradebook thead { display: none; }
  .class-topics .gradebook tr { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .class-topics .gradebook td { height: auto; padding: 0; border: 0; }
  .strength-evidence { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .strength-map-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .strength-viewport { max-height: 420px; }
  .strength-detail { padding: 18px; }
  .prompt { padding: 18px; }
  .panel { padding: 18px; }
  .week-note { padding: 18px; }
  .parent-actions { grid-template-columns: 1fr 1fr; }
  .build-log { padding: 16px; }
  .build-log li { grid-template-columns: minmax(0, 1fr) auto; }
  .build-date { grid-column: 1 / -1; }
  .lesson-start button, .pack-actions .button, .pack-actions button, .resume-strip button, .strength-actions button { width: 100%; }
}
@media (max-width: 380px) { .parent-actions { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-band="5-7"] .tap-to-hear { outline: 3px solid var(--blue); }
  .voice-wave i { height: 16px; }
}

/* Connect an AI (onboarding): three equal doors and a skip, Bloop thinking at the top. */
.welcome-ai { max-width: 980px; margin: 18px auto 0; text-align: center; }
.welcome-ai > .companion { width: 140px; height: 140px; }
.welcome-ai .lede { margin-inline: auto; }
.connect-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 22px 0 14px; text-align: left; }
.connect-card { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 20px; background: var(--card); border: var(--line) solid var(--ink); border-radius: var(--r-lg); }
.connect-card h2 { margin: 0; font-size: 1.35rem; }
.connect-card p { margin: 0; color: var(--ink-2); }
.connect-card label { margin: 6px 0 0; }
.connect-card input { margin-top: 0; }
.connect-card button { margin-top: auto; width: 100%; }
.connect-card.is-soon { background: var(--parts); border-style: dashed; }