/* Glacier learning surfaces: the task stays central, secondary controls stay small. */
.spelling-explanation { font-size:clamp(14px,1.7vw,19px); line-height:1.35; margin:6px auto 10px; max-width:38ch; font-weight:600; }
.learning-words { padding:0; list-style:none; }
.learning-words li { display:flex; flex-wrap:wrap; gap:4px 16px; justify-content:space-between; padding:10px 0; border-bottom:1px solid #b5ccdc; }
.learning-words span { font-size:14px; }
.sound-settings { display:flex; flex-wrap:wrap; gap:8px; border:0; padding:12px 0; }
.sound-settings label { display:flex; align-items:center; gap:6px; min-width:64px; min-height:44px; background:#e8f4fd; border:1px solid #b5ccdc; border-radius:10px; padding:6px 12px; }
.sound-settings input { width:20px; height:20px; }
.phonics-root { min-height:100dvh; display:grid; place-items:center; padding: max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.sound-workshop { width:min(100%,720px); background:#eef8ff; color:#163d5c; border:3px solid #92b7d0; border-radius:26px; box-shadow:0 8px 0 #86a9c0; padding:clamp(16px,3vw,32px); text-align:center; }
.sound-workshop header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sound-workshop h1 { font-size:clamp(22px,3vw,32px); margin:0; text-align:left; }
.sound-workshop p { max-width:46ch; margin:14px auto; line-height:1.45; }
.sound-friends { display:flex; justify-content:center; gap:36px; height:120px; margin:12px 0; }
.sound-friends span { display:block; width:80px; }
.sound-friends svg { width:100%; height:100%; }
.sound-slots, .sound-bank, .sound-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
.sound-piece { min-width:60px; height:74px; display:flex; flex-direction:column; justify-content:center; font-size:36px; font-weight:750; border-bottom:4px solid #7598b4; border-radius:12px 12px 4px 4px; background:#dcecf7; }
.sound-piece.filled { background:#fff; }
.sound-slots { flex-wrap:nowrap; }
button.sound-piece { min-width:72px; min-height:74px; border:0; border-bottom:4px solid #7598b4; color:inherit; font-family:inherit; cursor:pointer; }
.sound-piece.selected,.sound-piece.sounding { outline:3px solid #235d83; outline-offset:2px; }
.sound-piece.changed-sound { border-bottom-style:dashed; background:#cceadc; }
.sound-piece:focus-visible { outline:3px solid #235d83; outline-offset:3px; }
.sound-piece i { display:block; font-style:normal; font-size:12px; line-height:16px; }
.sound-tile.btn { font-size:30px; min-width:72px; min-height:72px; padding:6px 12px; }
.sound-workshop .btn:not(.sound-tile) { min-height:44px; padding:8px 16px; font-size:16px; }
.sound-tile:disabled { opacity:.3; }
.sound-feedback { min-height:24px; }
.sound-adult { text-align:left; font-size:14px; margin-top:16px; border-top:1px solid #b5ccdc; padding-top:12px; }
.sound-adult summary { cursor:pointer; min-height:36px; }
@media(max-width:420px) {
 .phonics-root { padding:12px; }
 .sound-workshop { padding:12px; }
 .sound-slots { gap:6px; }
 .sound-friends { height:88px; }
}
@media(max-height:500px) and (orientation:landscape) {
 .phonics-root { padding:max(8px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
 .sound-workshop { padding:12px 20px; width:min(100%,900px); }
 .sound-friends { display:none; }
 .sound-workshop header { margin-bottom:8px; }
 .sound-workshop p { margin:8px auto; }
 .sound-slots,.sound-bank,.sound-actions { margin:8px 0; }
 .sound-piece { height:58px; }
 .sound-adult { margin-top:8px; }
}
@media(prefers-reduced-motion:no-preference) { .sound-piece.filled { animation:sound-pop .18s ease-out; } @keyframes sound-pop { from {transform:translateY(4px)} to {transform:translateY(0)} } }
.encounter-brief { font-size:15px; line-height:1.4; padding:12px 0; }
.encounter-brief p { margin:6px 0; }
.encounter-brief summary { cursor:pointer; min-height:40px; padding-top:10px; }
.discovery-list { text-align:left; padding-left:24px; }
.discovery-list li { padding:8px 0; }
.discovery-list p { margin:4px 0; font-size:14px; }

.sound-workshop #sound-hear,.sound-workshop #sound-next,.sound-workshop #sound-check { min-height:72px; min-width:100px; }
/* A spelling is one word, never two visual lines. Scale normal words to the
   available board; very long words keep readable letters in a scrollable strip. */
.test .board { min-width:0; container-type:inline-size; }
.test .answer, .test.handheld .answer { flex-wrap:nowrap; justify-content:safe center; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:4px 3px 8px; gap:4px; }
/* Size the letter and its box from the same measure. Independent height/font
   clamps previously put 35px type in a 32px interior on iPhone. */
.test .answer .cell {
 --cell-size:clamp(30px,calc((100cqi - 12px) / var(--word-length,8) - 4px),56px);
 flex:0 0 auto; width:var(--cell-size); height:calc(var(--cell-size) * 1.22);
 font-size:max(20px,calc(var(--cell-size) * .66)); line-height:1; font-weight:750;
 border:2px solid #9bb6c9; border-radius:8px; background:#e2eff8; color:#214a73;
}
.test .answer .cell-letter { display:block; line-height:1; transform:translateY(-.06em); }
.test .answer .cell.on,.test .answer .cell.shown { background:#f5fbff; box-shadow:inset 0 -3px 0 #cadde9; }
.test .answer .cell.ghost { color:#57748c; }
.test .answer .cell.current { border-color:#235d83; box-shadow:inset 0 -3px 0 #235d83; }
.test .answer .cell.cell-ending-er { background:var(--ending-er-bg); color:var(--ending-er); border-color:var(--ending-er); }
.test .answer .cell.cell-ending-est { background:var(--ending-est-bg); color:var(--ending-est); border-color:var(--ending-est); }
.test .answer .cell.fix { animation:none; background:#fff0bd; border-style:dashed; border-color:#775c12; box-shadow:inset 0 -3px 0 #dac06b; }
.test .answer .cell.won { background:#cceadc; border-color:#5e947e; color:#214a73; }
.test .answer .cell.gone { width:var(--cell-size); min-width:var(--cell-size); padding:0; }
.test:not(.handheld) .board { background:#edf7fd; border-radius:18px; padding:24px; gap:12px; }
.test .board-note { letter-spacing:0; text-align:center; }
.test .board-note:empty { display:none; }
.test .spelling-explanation { margin:2px auto 12px; font-weight:500; }
.test .answer { min-height:0; }

.play .wordbox-wrap { min-width:0; max-width:100%; overflow-x:auto; }
.play .wordbox, .play.handheld .wordbox { flex-wrap:nowrap; justify-content:safe center; min-width:0; max-width:100%; }
.play .wordbox .slot { flex-shrink:0; }
.play .wordbox-wrap { display:flex; align-items:center; overflow:visible; width:100%; }
.play .wordbox, .play.handheld .wordbox { container-type:inline-size; flex:1; width:100%; overflow-x:auto; overflow-y:hidden; padding:3px 0 5px; gap:3px; }
.play:not(.lenny) .wordbox .slot { width:clamp(18px,calc(100cqi / var(--word-length,8) - 3px),32px); font-size:clamp(17px,calc(85cqi / var(--word-length,8)),24px); }
.play.lenny .wordbox-wrap .wordbox .slot { width:clamp(28px,calc(100cqi / var(--word-length,4) - 3px),44px); font-size:clamp(23px,calc(85cqi / var(--word-length,4)),32px); }

.play:not(.handheld) .panel .wordbox { gap:3px; }
.test .answer .cell { line-height:1; }
@media(max-height:500px) and (orientation:landscape) {
 .sound-workshop { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6px 14px; }
 .sound-workshop header { grid-column:1/-1; margin:0; }
 .sound-workshop #sound-hear { grid-column:1; grid-row:2; justify-self:center; }
 .sound-workshop #sound-instruction { grid-column:2; grid-row:2; align-self:center; margin:0; font-size:15px; }
 .sound-workshop .sound-slots { grid-column:2; grid-row:3; margin:0; align-self:center; }
 .sound-workshop #sound-next { grid-column:1; grid-row:3; justify-self:center; }
 .sound-workshop .sound-adult { grid-column:1/-1; margin:0; padding-top:4px; }
 .sound-workshop[data-phase=build] #sound-instruction { display:none; }
 .sound-workshop[data-phase=build] .sound-slots { grid-row:2; }
 .sound-workshop .sound-bank { grid-column:1/-1; grid-row:3; margin:0; }
 .sound-workshop .sound-feedback { grid-column:1; grid-row:4; margin:0; align-self:center; font-size:14px; }
 .sound-workshop .sound-actions { grid-column:2; grid-row:4; margin:0; gap:5px; align-items:center; }
 .sound-workshop .sound-actions .btn { padding:4px 8px; }
 .sound-workshop #sound-check { min-width:72px; }
 .sound-workshop .sound-actions #sound-help { font-size:14px; }
 .sound-workshop[data-phase=model] .sound-slots,.sound-workshop[data-phase=blend] .sound-slots { grid-column:1/-1; grid-row:3; }
 .sound-workshop[data-phase=model] #sound-next,.sound-workshop[data-phase=blend] #sound-next { grid-column:1; grid-row:4; }
 .sound-workshop[data-phase=model] .sound-feedback,.sound-workshop[data-phase=blend] .sound-feedback { grid-column:2; grid-row:4; font-size:14px; margin:0; }
 .sound-workshop #sound-model-word,.sound-workshop #sound-change { grid-column:1/-1; }
 .sound-workshop[data-phase=build] .sound-slots { gap:6px; }
}

/* Keep the sound and its dot/line on separate baselines in every phase. */
.sound-workshop .sound-piece {
 display:grid; grid-template-rows:42px 12px; align-content:center; justify-items:center;
 gap:2px; min-width:72px; height:74px; padding:4px 6px; line-height:1;
}
.sound-piece .sound-glyph { align-self:center; line-height:1; }
.sound-piece .sound-mark { align-self:center; font-size:12px; line-height:12px; }

/* The desktop Hear control uses the same compact icon-over-label layout. */
.test:not(.handheld) .test-speak {
 display:grid; justify-items:center; align-content:center; gap:1px;
 width:56px; min-width:56px; height:56px; min-height:56px; padding:4px; border-radius:50%;
}
.test:not(.handheld) .test-speak svg { width:24px; height:24px; }
.test:not(.handheld) .test-speak .speak-label { font-size:11px; line-height:1.2; }

/* One sound workshop: hear, build, join. Secondary actions stay compact. */
.sound-workshop .sound-friends { height:76px; margin:8px 0; align-items:center; gap:24px; }
.sound-workshop .sound-friends span { height:100%; width:56px; }
.sound-workshop .sound-friends .sound-picture { display:grid; place-items:center; font-size:48px; width:72px; }
.sound-whole { font-size:32px; font-weight:750; line-height:1.2; margin:4px 0 16px; }
.sound-whole.sounding { color:#225f49; }
.sound-slots.blending .sound-piece { background:#cceadc; border-bottom-color:#50856c; }
.sound-workshop #sound-hear { min-height:44px; min-width:0; }
.sound-workshop #sound-next { min-height:72px; min-width:100px; }
.sound-workshop #sound-model-word { min-height:72px; min-width:0; max-width:100%; }
.sound-workshop #sound-next { display:block; margin:12px auto 0; }
.sound-workshop .sound-feedback { font-size:15px; min-height:22px; }
.sound-workshop .sound-piece { min-width:0; width:clamp(72px,16vw,80px); flex:0 0 auto; }
.sound-workshop .sound-tile { min-width:72px; }
.sound-workshop .sound-actions { align-items:center; gap:8px; }
.sound-settings-preview { padding:8px 0; font-size:15px; line-height:1.5; }
@media(max-height:500px) and (orientation:landscape) {
 .sound-workshop .sound-friends { display:none; }
 .sound-workshop .sound-whole { grid-column:2; grid-row:4; margin:0; }
 .sound-workshop[data-phase=model] .sound-slots,.sound-workshop[data-phase=blend] .sound-slots { grid-column:2; grid-row:3; }
 .sound-workshop #sound-model-word { grid-column:1; grid-row:3; align-self:center; font-size:15px; padding-inline:10px; }
 .sound-workshop[data-phase=model] #sound-next,.sound-workshop[data-phase=blend] #sound-next { grid-column:1; grid-row:4; margin:0; }
 .sound-workshop[data-phase=model] .sound-feedback,.sound-workshop[data-phase=blend] .sound-feedback { grid-column:1/-1; grid-row:5; }
 .sound-workshop #sound-change { grid-column:1/-1; min-height:44px; }
 .sound-workshop .sound-piece { width:72px; }
 .sound-workshop .sound-actions .btn { font-size:14px; }
}

/* The sound workshop owns its safe-area inset; avoid a second body inset that
   squeezes four 72px sound choices onto two rows on phones. */
body:has(.phonics-root) { padding:0; }
.phonics-root { width:100%; }
.sound-workshop .sound-bank { gap:8px; }
@media(max-width:600px) and (orientation:portrait) {
 .phonics-root { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
 .sound-workshop .sound-actions .btn:not(#sound-check) { font-size:14px; padding:8px 10px; }
}