@import url('./radio-club/tokens.css');
/* Meleti interface: official Radix amber, brown and jade light scales. */
:root {
  color-scheme: light;
  --canvas: #fefbe9; /* amber2 */
  --paper: #fefdfb; /* amber1 */
  --ink: #3e332e; /* brown12 */
  --muted: #815e46; /* brown11 */
  --rule: #dcbc9f; /* brown7 */
  --header: #1d3b31; /* jade12 */
  --brand: #208368; /* jade11 */
  --brand-hover: #1d3b31;
  --accent: #ffc53d; /* amber9 */
  --radius: 10px;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 18px;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; }
header {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px max(24px, calc((100vw - 1056px) / 2));
  background: var(--header); color: white; border-bottom: 4px solid var(--brand);
}
.brand { display: flex; align-items: center; gap: 16px; font-size: 28px; font-weight: 750; text-decoration: none; color: inherit; }
.brand::before { content: 'μ'; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: var(--brand); color: white; font-size: 28px; }
.brand span { border-left: 1px solid var(--rule); padding-left: 16px; font-size: 16px; font-weight: 500; color: var(--muted); }
header button { background: transparent; border-color: var(--rule); color: white; }
main { max-width: 1056px; margin: 38px auto; padding: 0 24px; }
h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 24px; line-height: 1.3; margin-top: 0; }
p { line-height: 1.6; }
.eyebrow { font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
main > .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
main > .eyebrow::before { content: ''; width: 24px; height: 4px; background: var(--accent); }
main > .quiet { max-width: 740px; margin-bottom: 30px; }
section, .card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; margin-bottom: 24px; box-shadow: 0 3px 10px transparent; }
main > section:first-of-type { border-top: 4px solid var(--brand); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; margin-bottom: 24px; }
.grid .card { margin: 0; border-top: 4px solid var(--accent); }
button { font: inherit; font-weight: 600; min-height: 48px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 12px 20px; cursor: pointer; touch-action: manipulation; }
button.primary { background: var(--brand); color: white; border-color: var(--brand); }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--header); outline-offset: 4px; }
header :focus-visible { outline-color: var(--accent); }
@media (hover: hover) {
  button:not(:disabled):hover { border-color: var(--brand); background: var(--canvas); }
  button.primary:not(:disabled):hover { background: var(--brand-hover); color: white; }
  header button:not(:disabled):hover { background: var(--paper); border-color: var(--muted); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
label { display: block; line-height: 1.5; margin: 16px 0 6px; font-weight: 600; }
input, textarea { font: inherit; width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--rule); background: white; color: var(--ink); }
input[type=checkbox] { width: 22px; height: 22px; vertical-align: middle; margin-right: 10px; accent-color: var(--brand); }
textarea { min-height: 140px; line-height: 1.6; }
.login { max-width: 480px; margin: 6vh auto; }
.login form > button { width: 100%; margin-top: 24px; }
.badge { display: inline-block; background: var(--header); color: white; border-radius: 5px; padding: 6px 12px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.quiet { color: var(--muted); font-size: 16px; }
.word { font-size: 36px; letter-spacing: .04em; line-height: 1.6; }
.bank, .answer { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; min-height: 72px; }
.bank button, .answer button { font-size: 28px; min-width: 65px; min-height: 65px; font-weight: 500; }
.answer { padding: 14px; background: var(--canvas); border: 2px dashed var(--rule); border-radius: 8px; }
.choice { font-size: 30px; flex: 1; min-width: 100px; }
button.selected { border: 3px solid var(--brand); background: var(--brand); color: white; }
@media (hover: hover) { button.selected:not(:disabled):hover { background: var(--brand-hover); color: white; } }
.feedback { background: white; border: 1px solid var(--rule); border-left: 5px solid var(--brand); border-radius: 8px; padding: 16px; margin-top: 20px; }
.passage { font-size: 28px; line-height: 1.8; max-width: 65ch; }
.review-item { border-top: 1px solid var(--rule); padding: 24px 0; }
.statusline { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
#message { max-width: 1056px; margin: 18px auto; padding: 0 24px; color: var(--muted); }
#message:empty { display: none; }
footer { text-align: center; padding: 28px 20px; font-size: 13px; line-height: 1.6; color: var(--muted); border-top: 1px solid var(--rule); }
small { display: block; line-height: 1.6; color: var(--muted); }
.progress-row { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.progress-row:last-child { border-bottom: 0; padding-bottom: 0; }
.progress-row p { margin: 8px 0; }
@media (max-width: 600px) {
  section, .card { padding: 20px; }
  header { padding: 16px; gap: 12px; }
  .brand { gap: 8px; font-size: 24px; }
  .brand span { display: none; }
  .brand::before { width: 36px; height: 36px; font-size: 24px; }
  main { margin: 28px auto; padding: 0 16px; }
  .actions button { flex: 1 1 140px; }
  .word { font-size: 30px; }
  .passage { font-size: 25px; }
}

/* Garden/workshop presentation; scenery uses the separate Resurrect 64 palette. */
body { background: var(--canvas); }
header { background: var(--canvas); color: var(--ink); border-bottom: 1px solid var(--rule); padding-top: 18px; padding-bottom: 18px; }
.brand::before { background: var(--brand); border-radius: 50% 50% 42% 42%; }
.brand span { color: var(--muted); border-color: var(--rule); }
header button { color: var(--ink); border-color: var(--rule); background: var(--paper); }
.presentation-switch { margin-left: auto; font-size: 15px; }
header :focus-visible { outline-color: var(--brand); }
main > .eyebrow::before { background: var(--accent); height: 10px; width: 10px; border-radius: 50%; }
h1 { font-weight: 750; }
section, .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 24px 0; }
main > section:first-of-type { border-top: 0; }
main[data-view=parent] > section { border-bottom: 1px solid var(--rule); }
.lesson-register { margin: 24px 0; border-top: 1px solid var(--rule); }
.lesson-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.lesson-row h2 { margin: 0; font-size: 21px; }
.lesson-row .quiet { margin: 0; }
.lesson-row button { margin-left: auto; }
.badge { background: #f0e4d9; color: var(--ink); margin-bottom: 0; border-radius: 30px; }
button { border-radius: 12px; border-color: #ad7f58; }
button.primary { box-shadow: 0 4px 0 #1d3b31; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline-color: #1d3b31; }
@media (hover:hover) {
  button:not(:disabled):hover { background: #fff7c2; border-color: var(--brand); }
  header button:not(:disabled):hover { background: #fff7c2; border-color: var(--brand); }
}
.clubhouse { position: relative; padding: 0; overflow: hidden; margin-top: 32px; border-bottom: 6px solid #676633; border-radius: 36px 36px 8px 8px; background: var(--paper); }
.garden-scene { display: block; width: 100%; height: auto; }
.invitation { padding: 26px 32px 32px; background: #fff7c2; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; }
.invitation .eyebrow, .invitation h2, .invitation p { grid-column: 1; margin: 0 0 10px; }
.invitation .lesson-row { grid-column: 2; grid-row: 1 / span 4; border: 0; padding: 0; flex-direction: column; }
.invitation > button { grid-column: 1; justify-self: start; }
.itinerary { display: flex; justify-content: space-between; gap: 24px; list-style: none; padding: 18px 0; counter-reset: stop; }
.itinerary li { display: flex; align-items: center; gap: 12px; font-weight: 650; counter-increment: stop; }
.itinerary li::before { content: counter(stop); display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; background: #ffc53d; border-radius: 50%; }
.activity { padding: 32px; background: #fefdfb; border: 2px solid #ad7f58; border-bottom: 12px solid #815e46; border-radius: 16px; }
.workbench { background: linear-gradient(#fefdfb 0 180px, #f0e4d9 180px); }
.activity > h1 { letter-spacing: 0; }
.answer { border: 2px dashed #815e46; min-height: 100px; background: #fefbe9; }
.bank { min-height: 80px; }
.bank button, .answer button { min-width: 72px; min-height: 72px; background: #fefbe9; border: 2px solid #ad7f58; box-shadow: 0 4px 0 #ad7f58; }
button.selected { background: #208368; color: white; border-color: #1d3b31; }
.feedback { background: #fefbe9; color: var(--ink); border-color: #ad7f58; border-left-color: #208368; }
.story-stage .passage { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.login { padding: 32px; border-top: 8px solid #ffc53d !important; background: #fefdfb; border-bottom: 2px solid var(--rule); }
main[data-view=login] { max-width: 600px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 700px) {
  header { flex-wrap: wrap; gap: 10px; }
  .presentation-switch { order: 3; width: 100%; }
  .invitation { display: block; padding: 24px; }
  .invitation .lesson-row { flex-direction: row; margin-top: 20px; }
  .itinerary { gap: 12px; flex-direction: column; }
  .activity { padding: 22px 18px; }
  .bank, .answer { gap: 10px; }
  .lesson-row button { margin-left: 0; }
}
.garden-scene { max-height: 260px; object-fit: contain; }
.invitation button.primary { background: #ffc53d; border-color: #ad7f58; color: #3e332e; box-shadow: 0 4px 0 #ad7f58; }
@media (hover:hover) { .invitation button.primary:hover { background: #ffba18; color: #3e332e; } }
@media (max-width:700px) { .garden-scene { max-height: none; } }
.bank button:disabled, .answer button:disabled { opacity: 1; box-shadow: none; border-style: dashed; }
.flight-area { margin-top:28px; border-top:1px solid var(--rule); padding-top:24px; }
.target-stage { width:100%; aspect-ratio:800/340; max-height:340px; overflow:hidden; background:#fefbe9; border-radius:16px; }
.target-stage:empty { display:none; }
.target-stage canvas { display:block; max-width:100%; }
.quiet-control { font-size:16px; }
input[type=range] { min-height:48px; accent-color:#208368; border:0; padding:0; }
.invitation .lesson-row { grid-row:auto; }
.flight-area > button { margin:8px 12px 8px 0; }

.target-holder {width:100%;height:100%;} .quiet-airfield {display:block;width:100%;max-height:340px;object-fit:cover;}

.choice img {display:block;width:92px;height:58px;object-fit:contain;margin:0 auto 10px;} .delivery-target {font-weight:700;color:var(--ink);}

.settings-sheet {margin:26px 0;padding:24px 0;border-top:2px solid #ad7f58;} .setting-field {margin:16px 0;} .setting-field textarea {min-height:90px;} select {min-height:48px;font:inherit;padding:10px;max-width:100%;border:1px solid #ad7f58;border-radius:8px;background:#fefbe9;color:#3e332e;} .review-checks {border-left:4px solid #208368;padding:12px 20px;margin:20px 0;}

/* Touch gestures stay on spelling pieces; the surrounding page can scroll. */
.spelling-piece,.spelling-slot{min-width:72px;min-height:72px;font-size:1.8rem;touch-action:none;user-select:none;-webkit-user-select:none}
.spelling-slot{border-style:dashed}
.spelling-piece[aria-pressed="true"]{outline:3px solid var(--brand);outline-offset:3px}
.spelling-piece.drop-target,.spelling-slot.drop-target{outline:4px solid var(--brand);outline-offset:3px}
.tile-moves{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.tile-moves button{min-height:48px}
.tile-status{min-height:1.6em}
.tile-ghost{position:fixed;z-index:10;pointer-events:none;transform:translate(-50%,-50%);padding:.4rem 1rem;border:2px solid currentColor;border-radius:12px;background:var(--paper);font-size:2rem}

.reader-settings{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin:1.2rem 0}
.reader-settings h2{width:100%;font-size:1.2rem}
.reader-settings label{display:grid;gap:.4rem}
.reader-settings select{min-height:48px;font:inherit;padding:.4rem;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:8px}
.reader-line{border-bottom:1px solid var(--rule);padding:1rem 0}
.reader-line p{margin:.4rem 0 1rem;white-space:pre-wrap}
.reader-line button{min-height:48px}
.reader-line button[aria-pressed="true"]{outline:3px solid var(--brand)}
.reader-passage[data-text-size="large"] .passage{font-size:30px}
.reader-passage[data-text-size="largest"] .passage{font-size:36px}
.reader-passage[data-spacing="wide"] .passage{letter-spacing:.04em;line-height:1.9}

/* One activity surface: playful surroundings, quiet reviewed words. */
.practice-journey{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;list-style:none;counter-reset:journey;margin:1.5rem 0}
.practice-journey li{counter-increment:journey;display:flex;align-items:center;gap:.5rem;color:var(--muted);padding:.6rem .9rem;border-bottom:3px solid var(--rule)}
.practice-journey li::before{content:counter(journey);font-weight:750}
.practice-journey [aria-current="step"]{color:var(--header);border-color:var(--brand);background:var(--paper);border-radius:12px 12px 0 0;font-weight:750}
.activity{position:relative;overflow:hidden;border:0;border-radius:26px 26px 8px 8px;border-bottom:8px solid var(--muted);padding:0 32px 32px;background:var(--paper)}
.activity-scenery{display:block;width:calc(100% + 64px);margin:0 -32px 1.4rem;height:auto;max-height:170px;object-fit:contain;object-position:center;border-bottom:5px solid var(--accent)}
.activity-prompt{font-size:clamp(28px,3vw,36px);letter-spacing:0;margin:1rem 0}
.activity > .eyebrow{margin:1rem 0}
.workbench .answer{background:var(--canvas);border:2px dashed var(--muted);border-radius:16px;min-height:108px}
.workbench .bank{padding:18px 0;border-top:1px solid var(--rule)}
.story-stage .activity-scenery{max-height:140px}
.story-stage .reader-passage{background:var(--canvas);padding:22px 26px;border-radius:4px 18px 18px 4px;border-left:5px solid var(--accent)}
.story-stage .reader-line{display:flex;gap:1rem;align-items:center;justify-content:space-between}
.story-stage .reader-line .passage{padding:0;border:0;max-width:48ch}
.story-stage .reader-line button{font-size:14px;flex:0 0 auto;padding:8px 12px}
.reader-settings{padding:14px 0;border-bottom:1px solid var(--rule)}
.reader-settings h2{font-size:18px;margin:0}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px;min-height:136px!important}
.choice img{margin:0;width:98px;height:58px}
.flight-area{border-top:3px solid var(--rule);padding-top:22px}
.flight-area h2{font-size:22px}
.activity .actions{padding-top:18px;border-top:1px solid var(--rule)}
@media(max-width:700px){.activity{padding:0 18px 24px}.activity-scenery{width:calc(100% + 36px);margin:0 -18px 1rem}.practice-journey{gap:.25rem}.practice-journey li{padding:.6rem .65rem}.story-stage .reader-passage{padding:16px}.story-stage .reader-line{align-items:start;flex-direction:column}.choice{min-width:90px}}


.reader-settings{display:block}
.reader-settings summary{cursor:pointer;min-height:48px;padding:12px 0;color:var(--brand);font-weight:650}
.reader-settings label{display:inline-grid;margin:12px 1rem 12px 0}
.reader-settings > button{margin:12px 0}
.reader-settings:not([open]){border-bottom:0;margin:.4rem 0;padding:0}
.reader-settings summary:focus-visible{outline:3px solid var(--header);outline-offset:3px}

body[data-presentation="simple"] .activity-scenery,body[data-presentation="simple"] .garden-scene,body[data-presentation="simple"] .choice img{display:none}
body[data-presentation="simple"] .activity{border-radius:8px;border-bottom:1px solid var(--rule);padding-top:20px}
body[data-presentation="simple"] .choice{min-height:72px!important}

/* Approved stories form a reading shelf, independent of game rewards. */
.story-shelf-group { padding: 1rem 0; border-bottom: 3px solid var(--rule); }
.story-shelf-row { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; padding:1rem 0; }
.story-preview { flex:1 1 16rem; margin:0; font-size:1.3rem; line-height:1.6; }

body[data-presentation="simple"] .flight-area > :not(.game-status):not(button) { display:none; }
body[data-presentation="simple"] .flight-area > button:not(.pending-game-save) { display:none; }
/* Media remains a quiet reader tool using the established interface colors. */
.reader-settings audio { display: block; width: 100%; max-width: 440px; margin: 16px 0; }
.settings-sheet > a.primary, .reader-settings > a.primary { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; margin: 8px 12px 8px 0; color: var(--brand); border: 1px solid var(--rule); border-radius: 8px; overflow-wrap: anywhere; }

.data-inventory{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem 1rem}.data-inventory dt{font-weight:600}.data-inventory dd{margin:0;text-align:right}

.word-list-source { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }

/* Q75 whole-app journey: warm surroundings, quiet words and truthful saved states. */
.whole-app-journey {--sand:#f0e4d9;--wood:#ad7f58;--olive:#676633;background:var(--canvas)}
.whole-app-journey header {padding:18px max(24px,calc((100vw - 1120px)/2));min-height:84px;gap:16px;background:var(--paper);border-bottom:2px solid var(--rule)}
.whole-app-journey .brand {font-size:26px;letter-spacing:-.02em}
.whole-app-journey .brand span {font-size:15px}
.whole-app-journey .presentation-switch {width:auto;margin-left:auto;font-size:15px;min-height:48px}
.whole-app-journey #app {max-width:1120px;margin:36px auto;padding:0 24px}
.whole-app-journey #message {max-width:1120px;line-height:1.55;font-weight:650}
.skip-link {position:absolute;left:24px;top:-90px;z-index:100;background:var(--header);color:white;border-radius:8px;padding:14px 20px}
.skip-link:focus {top:12px}
.journey-heading {position:relative;max-width:820px;margin:0 0 32px;padding:8px 0 4px}
.journey-heading h1 {font-size:clamp(32px,4.5vw,48px);font-weight:800;letter-spacing:-.03em;margin-bottom:12px}
.journey-heading .eyebrow {font-size:12px;letter-spacing:.12em;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.journey-heading .eyebrow::before {content:'';width:10px;height:10px;border-radius:50%;background:var(--accent)}
.journey-heading .quiet {font-size:18px;line-height:1.65;max-width:64ch;margin:0}
.learner-pill {display:inline-flex;align-items:center;gap:8px;background:#dfebdd;color:var(--header);font-size:15px;font-weight:750;border:1px solid #a7c9aa;border-radius:100px;margin:18px 0 0;padding:7px 15px}
.learner-pill::before {content:'';width:7px;height:7px;border-radius:50%;background:var(--brand)}
.journey-destinations {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 36px}
.journey-destination {min-width:0;position:relative;background:var(--paper);border:2px solid var(--wood);border-bottom:6px solid var(--wood);border-radius:24px 24px 12px 12px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.journey-destination[data-destination=words] {background:#fff7c2}
.journey-destination[data-destination=stories] {background:#edf3df}
.journey-destination[data-destination=help] {background:#f0e4d9}
.destination-mark {display:grid;place-items:center;width:46px;height:46px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;font:750 15px/1 system-ui;color:var(--muted)}
.journey-destination button,.journey-destination a {font-size:24px;font-weight:800;min-height:64px;width:100%;text-align:left;padding:14px 18px;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:none;text-decoration:none}
.journey-destination[data-destination=words] button {background:var(--brand);color:white;border-color:var(--header)}
.destination-description {font-size:17px;line-height:1.6;margin:0;max-width:24ch;color:var(--ink)}
.saved-practice-card {background:var(--paper);padding:24px 28px;border:1px solid var(--rule);border-radius:18px;margin:24px 0}
.saved-practice-card h2 {font-size:25px;margin-bottom:10px}
.saved-practice-card .actions {margin:18px 0 0}
.saved-practice-card button {min-height:56px}
.casual-play-card {display:flex;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:24px 0;margin:16px 0}
.casual-play-card a {display:inline-flex;min-height:56px;align-items:center;padding:12px 20px;background:var(--paper);border:1px solid var(--wood);border-radius:12px;color:var(--ink);font-weight:750;text-decoration:none}
.casual-play-card p {flex:1 1 260px;margin:0;max-width:60ch}
.weekly-intake-host {padding:0;margin:24px 0}
.weekly-intake {padding:28px;background:var(--paper);border:2px solid var(--wood);border-radius:24px;margin:0}
.weekly-intake h2 {font-size:26px;margin:24px 0 10px}
.weekly-intake>h2:first-of-type {margin-top:28px}
.weekly-intake label {font-size:16px}
.weekly-intake textarea {min-height:200px;border:2px solid var(--rule);background:var(--canvas);font-size:19px}
.weekly-intake input[type=file] {min-height:56px;margin:16px 0;background:var(--canvas);border-style:dashed}
.weekly-intake>button {margin:12px 12px 6px 0;min-height:56px}
.weekly-journey {display:flex;gap:12px;list-style:none;padding:0;margin:0 0 28px;counter-reset:weekly;flex-wrap:wrap}
.weekly-journey li {counter-increment:weekly;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;padding:10px 12px;color:var(--muted);background:var(--canvas);border:1px solid var(--rule);border-radius:12px;min-height:48px}
.weekly-journey li::before {content:counter(weekly);display:grid;place-items:center;width:24px;height:24px;font-size:13px;border-radius:50%;background:var(--sand);color:var(--ink)}
.weekly-journey li[aria-current=step] {border-color:var(--brand);color:var(--header);background:#dfebdd}
.weekly-journey li[aria-current=step]::before {background:var(--brand);color:white}
.weekly-journey li[data-complete=true] {border-color:#a7c9aa;color:var(--header)}
.journey-save-note,.intake-notice:not(:empty) {padding:16px 20px;background:var(--canvas);border:1px solid var(--rule);border-left:5px solid var(--brand);border-radius:12px;font-size:16px;line-height:1.6}
.weekly-word-edit {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;margin:12px 0;max-width:640px}
.weekly-word-edit input {font-size:22px;min-height:58px;background:var(--canvas);border-width:2px}
.weekly-word-edit button {font-size:15px;min-height:52px}
.weekly-intake .recipient-choice {display:inline-flex;align-items:center;gap:12px;padding:14px 20px;margin:10px 14px 16px 0;min-height:60px;border:1px solid var(--rule);border-radius:12px;background:var(--canvas);font-size:19px}
.weekly-intake .recipient-choice input {margin:0;flex:none}
.assignment-receipts {background:var(--canvas);border:1px solid var(--wood);border-radius:16px;padding:20px 24px;margin:24px 0 10px}
.assignment-receipts h3 {font-size:20px;margin:20px 0 6px}
.assignment-receipts p {margin:8px 0}
.child-workspace-launch {padding:24px 0;border-bottom:1px solid var(--rule);margin:20px 0}
.child-workspace-launch h2 {flex:1 1 100%;font-size:21px;margin:0 0 8px}
.child-workspace-launch button {min-height:56px;padding:12px 24px}
.weekly-word-group {background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:24px 28px;margin:24px 0}
.weekly-word-group .eyebrow {font-size:12px;margin:0 0 10px}
.weekly-word-group h2 {font-size:clamp(24px,3vw,32px);line-height:1.5;overflow-wrap:anywhere}
.weekly-word-group>button {margin:6px 12px 6px 0;min-height:60px;font-size:20px}
.whole-app-journey .activity {border:1px solid var(--rule);border-bottom:6px solid var(--wood);border-radius:24px;padding-bottom:28px}
.whole-app-journey .activity-scenery {max-height:110px;border-bottom:3px solid var(--accent)}
.whole-app-journey .activity .actions button {min-height:56px}
.whole-app-journey .feedback {font-size:19px;line-height:1.6;border-radius:14px}
.whole-app-journey .story-shelf-group {border-bottom:1px solid var(--rule);padding:24px 0}
.whole-app-journey .story-shelf-group h2 {font-size:22px;margin-bottom:14px;line-height:1.5;overflow-wrap:anywhere}
.whole-app-journey .story-shelf-row {background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--accent);border-radius:16px;padding:22px;margin:14px 0;gap:14px}
.whole-app-journey .story-preview {font-size:20px;line-height:1.7;flex-basis:100%;max-width:64ch}
.whole-app-journey .story-shelf-row button {min-height:56px}
.whole-app-journey .story-stage .reader-passage {padding:24px;max-width:100%;border-radius:16px}
.whole-app-journey .story-stage .passage {font-size:clamp(24px,3vw,32px);line-height:1.85;letter-spacing:.01em}
.whole-app-journey .reader-settings {background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:12px 18px;margin:18px 0}
.whole-app-journey .reader-settings summary {font-size:17px}
.whole-app-journey .reader-line {gap:18px}
.whole-app-journey .sound-help {background:var(--paper);border:1px solid var(--rule);border-radius:24px;padding:28px;max-width:850px;margin:24px auto}
.whole-app-journey .sound-help h1 {font-size:38px}
.whole-app-journey .sound-help>button {min-height:56px;margin:12px 12px 8px 0}
.whole-app-journey footer {font-size:13px;margin-top:48px}
body[data-presentation=simple] .destination-mark,body[data-presentation=simple] .learner-pill::before {display:none}
body[data-presentation=simple] .journey-destination {border-radius:12px;border-bottom-width:1px;background:var(--paper)}
body[data-presentation=simple] .activity,body[data-presentation=simple] .weekly-intake {border-bottom-width:1px;box-shadow:none}
@media(max-width:800px){.journey-destinations{grid-template-columns:1fr;gap:14px}.journey-destination{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px 16px;padding:20px}.journey-destination .destination-description{grid-column:2;max-width:none}.journey-destination button{font-size:22px}.destination-mark{align-self:center}.weekly-intake{padding:22px}.whole-app-journey .presentation-switch{order:initial}.whole-app-journey .brand span{display:none}}
@media(max-width:500px){.whole-app-journey header{padding:14px 16px;flex-wrap:wrap}.whole-app-journey .brand{font-size:23px}.whole-app-journey #app{padding:0 16px;margin:28px auto}.journey-heading .quiet{font-size:17px}.weekly-journey{gap:8px}.weekly-journey li{font-size:14px;flex:1 1 100%}.weekly-word-edit{grid-template-columns:minmax(0,1fr)}.weekly-word-edit button{justify-self:start}.weekly-intake{padding:18px}.saved-practice-card,.weekly-word-group{padding:20px}.whole-app-journey .sound-help{padding:22px}.whole-app-journey .story-shelf-row{padding:18px}.casual-play-card{gap:12px}.whole-app-journey .story-stage .reader-line{align-items:start;flex-direction:column}}

.assignment-receipts[data-assignment-status=assigned] {background:#edf3df;border-color:#a7c9aa}
/* Keep real reader preferences stronger than the shared story typography. */
.whole-app-journey .reader-passage[data-text-size=large] .passage {font-size:30px}
.whole-app-journey .reader-passage[data-text-size=largest] .passage {font-size:36px}
.whole-app-journey .reader-passage[data-spacing=wide] .passage {letter-spacing:.04em;line-height:1.9}
.whole-app-journey .reader-line button {min-height:56px;min-width:56px;font-size:16px}

.parent-tools-nav {display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 28px}
.whole-app-journey main[data-view=parent]>button {margin:8px 12px 8px 0}

/* Weekly audio choices reflow within the existing parent preparation step. */
.weekly-audio-settings{margin:20px 0;padding:20px;border:1px solid #5e858a;border-radius:8px;background:#eef0df;color:#122e35}
.weekly-audio-settings h3,.weekly-audio-settings h4{color:#122e35}
.weekly-audio-settings h3{font-family:Fraunces,Georgia,serif}
.weekly-audio-settings p,.weekly-audio-settings label,.weekly-audio-settings button,.weekly-audio-settings select{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.5}
.weekly-audio-settings details{margin:12px 0}.weekly-audio-settings summary{cursor:pointer;min-height:48px;padding:12px 0;font-weight:700}
.weekly-audio-settings label{display:grid;gap:8px;margin:14px 0}
.weekly-audio-settings select{width:100%;min-width:0;max-width:100%;min-height:56px;padding:10px;background:#fff;color:#122e35}
.weekly-audio-settings button{min-height:48px;max-width:100%;white-space:normal;padding:10px 16px;margin:6px 8px 6px 0;background:#ffad67;color:#122e35;border:1px solid #122e35}
.weekly-audio-settings .audio-child-preferences{padding:12px 0;border-top:1px solid #5e858a}
.weekly-audio-settings .audio-status,.audio-status{font-weight:700;overflow-wrap:anywhere}
@media(min-width:900px){.weekly-audio-settings>details>label{display:inline-grid;width:calc(50% - 12px);margin-right:12px;vertical-align:top}}
@media(max-width:600px){.weekly-audio-settings{padding:14px}.weekly-audio-settings button{width:100%;margin:6px 0}}

.weekly-audio-settings .audio-selected-detail{margin:0;white-space:normal;overflow-wrap:anywhere;font-size:16px;line-height:1.5}

/* Podcast playback options use readable native controls on every width. */
.episode-playback-controls{display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:8px 20px;align-items:start;padding:16px 0}
.episode-playback-controls label{display:grid;gap:8px;font-size:16px;line-height:1.5}
.episode-playback-controls select{min-height:56px;width:100%;max-width:100%;font:inherit;padding:10px}
.episode-playback-controls p{font-size:16px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.episode-playback-controls .episode-speed-status{grid-column:1/-1}
@media(max-width:600px){.episode-playback-controls{grid-template-columns:minmax(0,1fr)}}

.episode-variants-parent{margin:24px 0;padding:20px;border:1px solid #5e858a;border-radius:8px;background:#eef0df;color:#122e35}
.episode-variants-parent :is(p,label,button,select,textarea),.episode-disclosure,.episode-status{font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.episode-variants-parent h3{font-family:Fraunces,Georgia,serif;color:#122e35}
.episode-variants-parent label{display:grid;gap:8px;margin:14px 0}.episode-variants-parent label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:12px}
.episode-variants-parent input[type=checkbox]{min-width:24px;min-height:24px;margin:10px 0}
.episode-variants-parent :is(select,textarea){width:100%;max-width:100%;min-height:56px;padding:10px;background:#fff;color:#122e35}
.episode-variants-parent textarea{min-height:100px}.episode-variants-parent button,.episode-variants-parent>a{display:inline-block;min-height:48px;max-width:100%;white-space:normal;padding:10px 16px;margin:6px 8px 6px 0;background:#ffad67;color:#122e35;border:1px solid #122e35}
.episode-variants-parent audio{display:block;width:100%;margin:16px 0}.episode-variants-parent .passage{white-space:pre-wrap;max-width:65ch}
.episode-status{font-weight:700}.episode-disclosure{padding:12px;background:#e1d5fa;color:#122e35;border-left:4px solid #122e35}
@media(max-width:600px){.episode-variants-parent{padding:14px}.episode-variants-parent button,.episode-variants-parent>a{width:100%;margin:6px 0}}

/* Current stage stays compact; the full sequence is an optional native disclosure. */
.weekly-progress{margin:0 0 24px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.weekly-progress>summary{padding:14px 16px;min-height:52px;cursor:pointer;font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.weekly-progress>summary strong{font:inherit;font-weight:700}
.weekly-progress-hint{display:block;margin:4px 0 0 18px;font-size:15px;color:var(--muted)}
.weekly-progress>summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.weekly-progress .weekly-journey{padding:0 16px 16px;margin:12px 0 0}
.weekly-progress .weekly-journey li{flex-wrap:wrap}
.weekly-stage-position{font-size:14px;font-weight:400}

/* The child home projects the existing mission board, with one main action. */
.child-mission-home .mission-next{padding:20px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);margin:16px 0}
.child-mission-home .mission-next h3{font-size:26px;margin:8px 0}
.child-mission-home .mission-primary-action{min-height:52px;white-space:normal}
.child-mission-home .home-mission-options{margin-top:20px}
.child-mission-home .home-mission-options>summary{padding:12px 0;min-height:48px}
.child-mission-home .mission-passive-status{display:none}
.child-mission-home .mission-route{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.child-mission-home .mission-card-progress{font-weight:700}
@media(max-width:600px){.child-mission-home{padding:16px}.child-mission-home .mission-next{padding:16px}.child-mission-home .mission-primary-action{width:100%}}

/* Optional adult observation stages retain their controls while changing layout. */
.observation-editor [hidden] { display: none !important; }
.observation-editor .observation-progress { margin: 1rem 0 1.5rem; }
.observation-editor .observation-progress nav,
.observation-editor .observation-step-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0; }
.observation-editor .observation-part { min-width: 0; }
.observation-editor .observation-part > label { display: block; margin-top: 1rem; }
.observation-editor input:not([type="checkbox"]),
.observation-editor select,
.observation-editor textarea { max-width: 100%; box-sizing: border-box; }
.observation-editor .observation-part p { overflow-wrap: anywhere; }
.observation-editor .observation-part > section { margin-block: 1.25rem; }
@media (max-width: 600px) {
 .observation-editor .observation-step-actions { flex-direction: column; }
 .observation-editor .observation-step-actions button { width: 100%; }
}