/* A language notebook: a clear practice path, generous tiles, and quiet feedback. */
:root { --muted:#62556c; --focus:#5b406a; }
body { font-size:16px; }
button, input, select { font-size:inherit; }
button, summary { min-height:48px; }
button:disabled { opacity:.5; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.primary-button:disabled { background:#817788; }
.header-inner { padding-block:16px; }
.nav-button { font-size:14px; min-height:48px; }
.text-button { min-height:48px; font-size:14px; }
.learning-home { max-width:1120px; padding-top:24px; padding-bottom:40px; }
.learner-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.learner-switch { display:flex; gap:8px; flex-wrap:wrap; }
.learner-switch button { display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; text-align:left; border:1px solid transparent; border-radius:12px; font-weight:800; }
.learner-switch [aria-pressed=true] { background:white; border-color:var(--line); }
.learner-switch small { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:2px; }
.learner-initial { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--plum-dark); background:var(--lavender); font-size:18px; }
.learning-intro { display:flex; justify-content:space-between; align-items:center; gap:28px; margin:18px 0 24px; min-height:160px; }
.learning-intro h1 { font-size:clamp(32px,4.4vw,48px); max-width:18ch; overflow-wrap:anywhere; }
.learning-intro p { color:var(--muted); margin-top:12px; font-size:16px; }
.learning-intro img { width:270px; height:170px; object-fit:cover; mix-blend-mode:multiply; }
.older-home .learning-intro { min-height:110px; }
.older-home .learning-intro h1 { font-family:var(--body); font-weight:800; letter-spacing:-.035em; }
.world-picker h2 { font:800 16px var(--body); margin-bottom:12px; }
.world-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
.world-tabs button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:10px 6px; font-size:14px; line-height:1.3; border-radius:12px; border:2px solid transparent; }
.world-tabs button:hover { background:var(--lavender); }
.world-tabs [aria-pressed=true] { background:white; border-color:var(--plum); color:var(--plum-dark); font-weight:800; }
.world-picture { display:block; width:48px; height:48px; }
.practice-path { display:grid; grid-template-columns:1.15fr 1fr; gap:20px; }
.path-start { text-align:left; display:flex; align-items:center; gap:24px; padding:28px; border-radius:16px; background:var(--lavender); color:var(--plum-dark); min-height:212px; }
.path-start:hover { outline:2px solid var(--plum); outline-offset:-2px; }
.path-art { position:relative; display:block; width:124px; height:140px; flex-shrink:0; }
.path-art .learning-art { position:absolute; width:100px; height:100px; }
.path-art .learning-art:first-child { top:0; left:0; }
.path-art .learning-art:last-child { bottom:0; right:-18px; }
.path-copy { display:flex; flex-direction:column; gap:10px; }
.path-copy h2 { font-size:30px; }
.path-copy>span { font-size:16px; line-height:1.5; }
.path-copy strong { display:flex; align-items:center; gap:8px; font-size:14px; margin-top:6px; }
.path-followups { display:grid; gap:12px; }
.path-followups button { display:flex; align-items:center; gap:14px; padding:20px; text-align:left; border:1px solid var(--line); border-radius:16px; background:white; }
.path-followups button:hover { border-color:var(--plum); }
.path-followups button>span:nth-child(2) { flex:1; }
.path-followups strong { display:block; font:500 23px var(--display); margin-bottom:6px; }
.path-followups span span { font-size:14px; line-height:1.5; color:var(--muted); }
.path-symbol { width:46px; height:46px; background:var(--rose); color:var(--plum-dark); display:grid; place-items:center; border-radius:12px; flex-shrink:0; }
.path-followups button:last-child .path-symbol { background:var(--sage); color:#395944; }
.activity-library { margin-top:28px; border-block:1px solid var(--line); }
.activity-library summary { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:18px 0; font-weight:800; }
.activity-library summary>span { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); font-weight:500; }
.activity-library[open] summary .icon { transform:rotate(180deg); }
.library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; padding-bottom:20px; }
.library-grid button { display:flex; gap:16px; align-items:center; text-align:left; padding:16px 12px; border-radius:12px; }
.library-grid button:hover { background:var(--lavender); }
.library-grid button>span:nth-child(2) { flex:1; }
.library-grid strong,.library-grid small { display:block; }
.library-grid strong { font-size:16px; margin-bottom:5px; }
.library-grid small { color:var(--muted); font-size:14px; }
.everyday-moment { display:flex; gap:20px; align-items:flex-start; text-align:left; margin:28px 0 0; padding:24px; background:#f0f4f0; border-radius:16px; color:#36553e; }
.moment-icon { padding-top:3px; }
.everyday-moment h2 { font:800 18px var(--body); }
.everyday-moment p { font-size:16px; max-width:66ch; margin:8px 0; color:#405e48; }
.everyday-moment .text-button { color:#36553e; padding-left:0; justify-content:flex-start; }
.finish-screen .everyday-moment { max-width:650px; margin:32px auto 0; }
.finish-actions { flex-wrap:wrap; }
.finish-actions .primary-button { max-width:100%; white-space:normal; }
.parent-moment { display:flex; flex-wrap:wrap; align-items:center; gap:18px; background:var(--lavender); padding:24px; border-radius:16px; margin-bottom:32px; }
.parent-moment>div { flex:1; min-width:200px; }
.parent-moment h2 { font:800 16px var(--body); }
.parent-moment p { font:500 28px var(--display); margin:12px 0 6px; }
.parent-moment>div>span { font-size:16px; }
.parent-moment .soft-button { background:white; }
.game-main { max-width:1060px; }
.game-header { padding-bottom:16px; }
.game-guidance { padding:12px 0; }
.game-guidance p { display:none; }
.game-guidance.compact { justify-content:space-between; border-bottom:0; }
.game-guidance.compact>span { color:var(--muted); font-size:14px; }
.game-title { margin-top:20px; }
.game-title h1 { font-size:32px; }
.choices-4 { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:920px; gap:16px; }
.choices-4 .picture-card { min-height:180px; padding:12px; }
.choices-4 .picture-shape { width:130px; height:130px; max-width:100%; }
.match-grid.cards-8 { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:850px; }
.cards-8 .match-card { height:152px; }
.expression-stage { max-width:740px; margin:14px auto 0; }
.expression-heading { text-align:center; }
.expression-heading>span { font-size:14px; color:var(--muted); display:block; margin-bottom:10px; }
.expression-heading h1 { font-size:36px; }
.expression-heading p { margin-top:10px; color:var(--muted); }
.sentence-context { display:flex; justify-content:center; align-items:center; gap:24px; margin:22px auto; }
.sentence-picture { display:block; width:110px; height:110px; flex-shrink:0; }
.context-word { font:500 24px var(--display); }
.sentence-context p { font-size:18px; margin:6px 0; }
.sentence-context .text-button { padding-left:0; }
.sentence-model { margin:16px auto; padding:15px 20px; background:var(--lavender); border-radius:12px; text-align:center; font:500 26px var(--display); line-height:1.4; }
.sentence-answer { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; min-height:86px; padding:14px; border:2px dashed #b8a8c2; border-radius:14px; background:white; }
.sentence-answer>span { color:var(--muted); font-size:16px; }
.sentence-answer.is-complete { border-style:solid; border-color:#597965; background:#f0f4f0; }
.sentence-bank { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:24px auto; min-height:54px; }
.word-tile { min-height:54px; padding:12px 20px; border:1px solid #c9bad3; background:white; border-radius:12px; font-size:20px; font-weight:700; transition:background .15s ease; }
.word-tile:hover:not(:disabled) { background:var(--lavender); border-color:var(--plum); }
.word-tile.used { visibility:hidden; }
.word-tile.placed { background:var(--lavender); }
.word-tile.placed:disabled { opacity:1; }
.expression-feedback { min-height:52px; margin:16px auto; text-align:center; font-size:16px; color:var(--muted); }
.expression-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin:20px auto; }
.speaking-invitation { text-align:center; padding:16px 20px; }
.speaking-invitation>p:first-child { font-size:20px; margin-bottom:12px; }
.child-fields { grid-template-columns:minmax(0,1fr) 80px; }
.child-fields>label:last-child { grid-column:1/-1; }
.family-main select { max-width:100%; width:100%; }
.family-main .setting-help { font-size:14px; line-height:1.6; }
.toddler-options summary { min-height:48px; }
.toddler-home .toddler-activities { margin-top:20px; }
footer { font-size:14px; }
@media(max-width:900px) {
 .practice-path { grid-template-columns:1fr 1fr; gap:14px; }
 .path-start { flex-direction:column; align-items:flex-start; gap:6px; padding:22px; }
 .path-art { width:132px; height:100px; }
 .path-followups button { padding:18px; flex-wrap:wrap; }
 .path-followups button>.icon { display:none; }
 .world-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .world-tabs button { flex-direction:row; text-align:left; justify-content:flex-start; padding:8px; }
 .world-picture { width:40px; height:40px; flex-shrink:0; }
}
@media(max-width:600px) {
 .header-inner nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
 .nav-button { flex-direction:column; gap:5px; font-size:12px; min-width:0; }
 .header-inner { padding:14px 16px 8px; }
 .learning-home { padding:20px 18px 28px; }
 .learner-bar { align-items:flex-start; flex-wrap:wrap; gap:4px; }
 .learner-switch { flex:1; }
 .learner-switch button { padding-right:10px; }
 .level-link { margin-left:auto; }
 .learning-intro { min-height:0; margin:16px 0 22px; }
 .learning-intro h1 { font-size:34px; }
 .learning-intro img { width:105px; height:112px; }
 .learning-intro p { font-size:15px; }
 .practice-path { grid-template-columns:1fr; }
 .path-start { flex-direction:row; align-items:center; min-height:172px; padding:22px 18px; gap:20px; }
 .path-art { width:100px; height:122px; }
 .path-art .learning-art { width:84px; height:84px; }
 .path-copy h2 { font-size:27px; }
 .path-followups button { flex-wrap:nowrap; padding:18px; }
 .path-followups strong { font-size:22px; }
 .world-tabs { gap:6px; }
 .world-tabs button { flex-direction:column; font-size:13px; justify-content:center; text-align:center; }
 .world-picture { width:40px; height:40px; }
 .library-grid { grid-template-columns:1fr; gap:0; }
 .activity-library summary>span { font-size:13px; }
 .everyday-moment { padding:20px 16px; gap:12px; }
 .choices-4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .choices-4 .picture-card { min-height:150px; }
 .choices-4 .picture-shape { width:108px; height:108px; }
 .match-grid.cards-8 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
 .cards-8 .match-card { height:124px; }
 .expression-heading h1 { font-size:30px; }
 .game-guidance.compact { justify-content:center; gap:0; }
 .game-guidance.compact>span { text-align:center; }
 .sentence-context { gap:16px; margin:16px auto; }
 .sentence-picture { width:90px; height:90px; }
 .sentence-context p { font-size:16px; }
 .sentence-answer { min-height:90px; padding:12px; gap:8px; }
 .word-tile { padding:12px 16px; font-size:18px; }
 .sentence-bank { gap:10px; margin:20px auto; }
 .parent-moment { padding:20px; gap:8px 16px; }
 .parent-moment>div { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* Keep the way back in reach; later rounds let the activity speak for itself. */
.game-header { position:sticky; top:0; z-index:5; background:var(--paper); padding-top:12px; border-bottom:1px solid var(--line); }
.later-round .game-title>p,.later-round .expression-heading>p,.later-round .game-guidance>p,.later-round .game-guidance>span { display:none; }
.game-header [data-action="leave"] { white-space:nowrap; }
@media(max-width:600px) { .game-header { gap:8px; } .game-header .game-context { order:3; flex-basis:100%; text-align:center; } .game-controls { margin-left:auto; } }
.later-round .speaking-invitation { display:none; }
@media(max-width:600px) { .game-header .game-context { display:block; font-size:13px; padding:2px 0; } }
[hidden] { display:none!important; }

/* Our world: family-entered people and places */
.world-group{margin-top:28px}
.world-group h2{font-family:var(--display);font-weight:500;font-size:1.35rem;color:var(--ink);margin:0}
.world-grid{margin-top:14px}
.world-card[aria-pressed="true"]{border-color:var(--plum);background:#faf7fc}
.world-card[aria-pressed="true"] .picture-name{color:var(--plum-dark)}
.tone-lavender{background:var(--lavender);color:#73578b}
.tone-rose{background:var(--rose);color:#8b556b}
.tone-sage{background:var(--sage);color:#4f735e}
.tone-blue{background:var(--blue);color:#4e7084}
.world-initial{font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1}
.world-detail{display:block;color:var(--muted);font-size:.85rem;overflow-wrap:anywhere;margin-top:-10px}
.world-detail::first-letter{text-transform:uppercase}
.world-grid .picture-name{overflow-wrap:anywhere;text-align:center}
.world-sentence{position:sticky;top:.5rem;z-index:2;margin:0 auto 8px;max-width:36rem;padding:20px 24px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:0 8px 24px rgb(67 58 80 / .08);text-align:center}
.world-sentence p{font-family:var(--display);font-size:clamp(1.4rem,4vw,2rem);line-height:1.2;color:var(--ink);margin:0 0 6px;text-wrap:balance}
.world-sentence span{display:block;color:var(--muted)}
.world-sentence small{display:block;margin-top:12px;color:var(--muted);font-size:.8rem;text-wrap:pretty}
.world-empty{text-align:center;color:var(--muted);margin:32px auto;max-width:32rem}
.world-main .family-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.family-line{margin:8px 0}
.family-line span{font-weight:700;color:var(--ink)}
.family-line small{display:block;color:var(--muted)}
.world-puzzle { position:static; max-width:760px; padding:24px; }
.world-puzzle .world-puzzle-context { font-family:var(--body); font-size:14px; color:var(--muted); margin:12px 0; }
.world-puzzle .sentence-answer { margin-top:20px; flex-wrap:wrap; }
.world-puzzle .sentence-bank { margin:20px 0; }
.world-puzzle [role=status] { font-family:var(--body); font-size:15px; min-height:24px; }
.world-sentence>.primary-button { margin-top:16px; }
.child-fields { padding:18px 0; border-bottom:1px solid var(--line); }
.child-fields [data-remove-child] { justify-self:start; }
@media(max-width:600px) { .world-puzzle { padding:18px 12px; } .world-puzzle .word-tile { font-size:17px; padding:12px; overflow-wrap:anywhere; max-width:100%; } }
.world-puzzle .sentence-answer .word-tile:disabled { opacity:1; color:var(--ink); background:var(--sage); }
.photo-editor { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 16px; }
.photo-editor .photo-preview { width:72px; height:72px; border-radius:14px; object-fit:cover; background:var(--lavender); }
.family-main .photo-upload { position:relative; width:auto; margin:0; cursor:pointer; }
.photo-upload:focus-within { outline:3px solid var(--plum); outline-offset:3px; }
.family-main input[data-photo-input] { position:absolute; width:1px; height:1px; padding:0; opacity:0; overflow:hidden; }
.photo-status { flex-basis:100%; font-size:13px; color:var(--muted); }
.world-photo { overflow:hidden; }
.world-photo img { width:100%; height:100%; object-fit:cover; }
.sentence-photo { display:block; width:128px; height:128px; object-fit:cover; border-radius:20px; margin:12px auto 18px; }
@media(max-width:600px) { .sentence-photo { width:96px; height:96px; } }
/* Toddler exploration: three letter blocks and objects large enough to tap. */
.toddler-symbol{font:800 46px/1 var(--body);color:var(--plum-dark);letter-spacing:.03em;display:grid;place-items:center;min-height:85px}
.abc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:660px;margin:28px auto}
.abc-tiles button{min-height:180px;border-radius:16px;background:var(--lavender);color:var(--plum-dark);font:800 clamp(56px,12vw,110px)/1 var(--body)}
.abc-tiles button:nth-child(2){background:var(--sage)}.abc-tiles button:nth-child(3){background:var(--rose)}
.abc-tiles button[aria-pressed=true]{outline:3px solid var(--plum);outline-offset:4px}
.abc-example{min-height:140px;display:grid;place-items:center;text-align:center;font-size:26px}
.abc-example button{display:flex;align-items:center;gap:16px;color:var(--ink);font-size:24px;padding:12px;border-radius:12px;background:transparent}
.abc-example .learning-art{width:110px;height:110px}
.toddler-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px auto}
.count-total{font:800 80px/1 var(--body);text-align:center;color:var(--plum-dark);margin:24px auto}
.count-apples{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;max-width:680px;margin:auto}
.count-apples button{width:112px;height:132px;border-radius:16px;position:relative;background:var(--sage);padding:10px;color:var(--ink)}
.count-apples button:disabled{opacity:1;background:var(--lavender)}
.count-apples .learning-art{width:92px;height:92px}
.count-apples button>span:last-child:not(.learning-art){position:absolute;bottom:4px;right:10px;font:800 26px var(--body)}
.count-caption{min-height:68px;text-align:center;margin-top:20px}
@media(max-width:600px){.toddler-activities{grid-template-columns:repeat(2,minmax(0,1fr))}.toddler-activity{flex-direction:column;justify-content:center;padding:12px 8px;min-height:150px;gap:8px;font-size:20px}.toddler-activity>span:first-child{width:100%;max-width:130px}.abc-tiles{gap:12px}.abc-tiles button{min-height:130px}.count-apples{gap:12px}.count-apples button{width:90px;height:108px}.count-apples .learning-art{width:70px;height:70px}.abc-example button{gap:10px;font-size:20px}}