/* 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; } }