/* A single viewport owner; the main screen scrolls and navigation has its own row. */
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
body{height:100%;overflow:hidden;overscroll-behavior:none;background:#edf5fb}
.app{position:fixed;top:var(--app-top,0px);left:50%;transform:translateX(-50%);width:100%;max-width:520px;height:var(--app-height,100dvh);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--paper)}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));border-top:3px solid #ed2939;border-bottom:1px solid var(--line)}
.brand{min-width:0;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.settings-button{flex:none;min-width:44px;min-height:44px}.flag{width:23px;height:23px}
.app>main{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left));scroll-padding:12px}
.app>nav{display:flex;gap:6px;position:relative;z-index:5;width:100%;margin:0;padding:6px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid var(--line);background:#fff}
nav button{flex:1;min-width:0;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 5px;border:0;border-radius:14px;background:transparent;color:#6f817a;font-size:14px;font-weight:700}
nav button.active{background:#e1f3ff;color:#00689c}nav .nav-icon{width:20px;height:20px;flex:none;margin:0}nav span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.native-ios .app{grid-template-rows:minmax(0,1fr) auto}
html.native-ios header{display:none}
html.native-ios .home-title{display:block;min-width:0;font-size:18px;font-weight:800;color:var(--ink)}
html.native-ios .home-toolbar{justify-content:space-between}html.native-ios .home-settings{display:block;flex:none}
/* Button labels are controls, never selectable text or iOS callout targets. */
button,button *,[role="button"],[role="button"] *,summary,nav,a.btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button{min-height:44px;touch-action:manipulation}.dictionary-audio,.lux-audio-inline,.verb-close{min-width:44px;min-height:44px}button:active{filter:brightness(.94)}
input,select,textarea{font-size:16px;min-height:44px;touch-action:manipulation}
[hidden]{display:none!important}
/* Practice content may grow. Footer stays after it in normal flow and can stick
   to the viewport bottom without overlapping the independently laid-out nav. */
main.practice{display:flex;flex-direction:column;gap:12px}
.practice>*{flex-shrink:0;min-width:0}
.practice-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:14px}
.practice-top .back,.practice .back{margin:0;min-height:44px;color:var(--ink)}
.practice h1{font-size:23px;line-height:1.2;margin:0;letter-spacing:-.5px}
.practice h2{font-size:20px;margin:0 0 8px}.practice p{margin:0}
.practice-body{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;padding:16px 0}
.practice-body>h1{text-align:center}
.practice-body .phrase{font-size:32px;line-height:1.25;margin:0;overflow-wrap:anywhere}
.practice-body .translation{font-size:16px;line-height:1.4;margin:0}
.practice .row{justify-content:center;gap:14px}.practice .row .btn{flex:0 0 auto;min-width:96px}
.practice .btn{font-size:16px;padding:12px;min-height:46px;border-radius:13px}
.practice .play-big{width:64px;height:64px;margin:4px 0;font-size:26px;align-self:center}
.practice .options{display:grid;gap:8px;margin:0}.practice .option{min-height:46px;padding:11px 12px;font-size:16px;line-height:1.3}
.practice .option.correct{background:#def4e4;border-color:#70ae80;color:#174b2b;opacity:1}
.practice .feedback{margin:0;padding:12px;font-size:15px;line-height:1.4}
.practice-footer{display:flex;gap:10px;margin-top:auto;padding:10px 0 2px;background:var(--paper);position:sticky;bottom:-14px;z-index:2;flex:none}
.practice-footer>*{flex:1;min-width:0}.practice-footer .btn{min-height:48px}
.practice .progress-track{height:4px;margin:0}.practice .card{padding:16px;margin:0}
.practice .tabs{margin:0;padding:4px}.practice .tabs button{min-height:44px;padding:7px 2px;font-size:clamp(11px,3vw,14px)}
.practice .words{margin:0;gap:7px}.practice .word{min-height:44px;padding:8px 10px}.practice .answer-zone{margin:0;min-height:60px;padding:8px}
.voice-prompt{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:center;padding:12px 0}
.voice-prompt .phrase{font-size:clamp(24px,6vw,32px);line-height:1.3;margin:0;overflow-wrap:anywhere}
.voice-prompt .translation{font-size:16px;line-height:1.4;margin:0}
.practice .picture-preview{display:block;width:100%;padding:0;border:0;border-radius:12px;background:#eff7fc;cursor:zoom-in;line-height:0}
.practice .scene-photo{display:block;width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:contain;border-radius:12px;background:#eff7fc}
.voice-dock{display:flex;flex-direction:column;gap:8px;flex:none}
.voice-controls{display:flex;align-items:center;justify-content:center;gap:16px}
.practice .mic{width:62px;height:62px;border-width:5px;font-size:24px;margin:0;flex:none}
.voice-status{font-size:14px;line-height:1.3;text-align:center;min-height:18px}
.voice-feedback{background:#eaf5fd;border-radius:13px;padding:12px;font-size:15px;line-height:1.4;min-height:68px;display:flex;flex-direction:column;gap:5px}
.voice-feedback:empty{display:none}
.voice-feedback.error{background:#fff0f0}.voice-footer,.audio-credit{font-size:12px;color:var(--muted);text-align:center}
.sample-answer{flex:none}.sample-answer p{line-height:1.5;margin:10px 0}
.settings-screen,.settings-page{display:flex;flex-direction:column;gap:12px}.settings-screen .tabs,.settings-screen .back{margin:0}.settings-page h2,.settings-page p{margin:0}
.settings-page .btn{margin:0}.language-setting{grid-template-columns:1fr 1fr}
.compact-home{display:flex;flex-direction:column;gap:12px;min-width:0}.compact-home .hero{margin:0;padding:20px}.compact-home h1{font-size:26px;margin:0}.compact-home p{margin:0 0 10px}.compact-home .lesson{padding:12px;margin:0}.compact-home .small-note{font-size:14px;color:var(--muted)}
.greeting{padding-bottom:18px}.welcome{padding:12px 2px 20px}.welcome h1{font-size:clamp(26px,7vw,34px);margin:0 0 8px}.welcome p{font-size:16px;margin:0;color:var(--muted)}
.start-card{position:relative;isolation:isolate;min-height:205px;border-radius:18px;padding:22px 18px;background:#009ed5 url('/illustration-grundPicture.webp') center/cover no-repeat;overflow:hidden}
.start-card:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#007faa 0%,#007faaeb 38%,#009ed500 80%);z-index:-1}
.start-copy{max-width:72%;color:white}.start-copy h2{font-size:25px;line-height:1.2;margin:13px 0 7px;color:white}.start-copy p{font-size:15px;line-height:1.4;color:white}.start-copy .eyebrow{font-size:10px;letter-spacing:1px;color:white}.start-copy .btn{background:#ed2939}
.path-title{font-size:21px;margin:25px 2px 0}.lesson-category{margin:26px 0}.lesson-category h2{font-size:19px;margin-bottom:12px}.lesson-category .lesson{padding:12px;margin-bottom:8px;min-height:66px}.lesson-category .number{height:38px;min-width:38px}.lesson-category h3{font-size:16px}
.speech-line{display:block}.speech-line small{display:block;font-size:12px;color:var(--muted)}.speech-line p{margin:2px 0 5px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}.speech-tip{font-size:13px}.transcript-pages{display:flex;align-items:center;justify-content:space-between;gap:8px}.transcript-pages button{min-width:44px;min-height:44px;border:1px solid #c9dce9;border-radius:8px;background:#edf7fd;color:#183550}
#notice{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:calc(132px + env(safe-area-inset-bottom));max-width:min(440px,calc(100% - 28px));width:max-content;pointer-events:none;background:#122b4b;color:#fff;font-size:14px}
@media(max-width:370px){html.native-ios .home-title{font-size:16px}#home-language{max-width:125px}.home-toolbar{gap:6px}.practice .btn{font-size:14px}}
@media(max-height:620px){.practice-body{padding:8px 0}.voice-prompt{padding:6px 0}.voice-prompt .phrase{font-size:24px}}
@media(prefers-reduced-motion:reduce){.mic.recording{animation:none}}


/* Compact answer groups, with native radios sized independently of text fields. */
.practice .options{gap:5px}.practice .option{margin:0;display:flex;align-items:center;gap:9px;padding:9px 11px;min-height:44px}
.practice .option input,.extended-option input{width:18px;height:18px;min-height:0;flex:0 0 18px;padding:0;margin:0}
.practice .option>span{min-width:0}.listening-option .translation-inline{padding:0 11px 0 38px}.listening-option .translation{margin:3px 0 5px}
.extended-page{gap:12px}.extended-questions{gap:16px}.extended-option{padding:9px 10px;margin:4px 0;min-height:44px}.extended-questions legend{margin-bottom:6px}.extended-option+.translation-inline .translation{margin:2px 0 7px;font-size:14px}
.practice-body{gap:10px;padding:10px 0}.practice .feedback{padding:9px 11px}.voice-feedback .translation-inline .translation{margin:3px 0;font-size:14px}


@media(max-height:620px){
 main.voice-screen{gap:8px}
 .voice-prompt{gap:8px;padding:4px 0}
 .voice-prompt .noun-info{margin:0;font-size:13px}
 .voice-feedback{padding:8px;min-height:0}
 .voice-dock{gap:6px}
}

/* A shared picker keeps the selected title and every option on one line on iOS. */
.practice-picker{position:relative;flex:0 0 auto;min-width:0;width:100%;margin:0;padding:0;border:1px solid #bbcfc5;border-radius:12px;background:white}
.practice-picker>summary{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 13px;list-style:none;font-weight:500;cursor:pointer}
.practice-picker>summary::-webkit-details-marker{display:none}
.picker-text{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}
.picker-options{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;max-height:min(46dvh,360px);overflow-y:auto;overscroll-behavior:contain;padding:4px;background:white;border:1px solid #dce8f2;border-radius:12px;box-shadow:0 10px 30px #122b4b26}
.picker-options button{display:flex;align-items:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:10px;border:0;border-radius:8px;background:white;color:var(--ink);font-size:16px;line-height:24px}
.picker-options button[aria-selected="true"]{background:#e3f4ff;color:#00689c;font-weight:650}
.picker-check{width:20px;flex:0 0 20px}
.picker-options button:focus-visible,.practice-picker>summary:focus-visible{outline:3px solid #008fc8;outline-offset:-3px}

/* Only the upper half receives pointer events; there is deliberately no backdrop. */
.picture-zoom{position:fixed;z-index:60;top:var(--app-top,0px);left:0;width:100vw;height:calc(var(--app-height,100dvh) * .5);padding:0;margin:0;background:#eff7fc;box-shadow:0 5px 18px #122b4b35;overflow:hidden;border-radius:0 0 16px 16px}
.picture-zoom-viewport{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;cursor:grab}
.picture-zoom-viewport.dragging{cursor:grabbing}
.picture-zoom .picture-zoom-image{display:block;width:300vw;max-width:none;height:auto;margin:0;border:0;border-radius:0;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:pan-x pan-y}
.picture-zoom-close{position:absolute;z-index:1;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #dce8f2;border-radius:50%;background:#fff;color:#00689c;font-size:32px;line-height:1;box-shadow:0 2px 12px #122b4b33;cursor:pointer}
.picture-preview:focus-visible,.picture-zoom-close:focus-visible,.picture-zoom-viewport:focus-visible{outline:3px solid #008fc8;outline-offset:-3px}


/* Picture practice keeps its full-width illustration while freeing room for controls.
   An expanded sample or speech feedback may scroll, but the footer never covers it. */
main.picture-screen{gap:8px;padding-top:6px;padding-bottom:8px}
.picture-screen .tabs{padding:2px}
.picture-screen .practice-picker>summary{min-height:44px;padding:8px 11px}
.picture-screen .voice-prompt{flex:0 0 auto;gap:5px;padding:0}
.picture-screen .voice-prompt .phrase{font-size:clamp(22px,5.5vw,26px);line-height:1.2}
.picture-screen .voice-prompt .translation{font-size:15px;line-height:1.25}
.picture-screen .sample-answer{margin:0;padding:0 10px}
.picture-screen .sample-answer>summary{min-height:44px;padding:10px 0;line-height:24px}
.picture-screen .sample-answer[open]{padding-bottom:8px}
.picture-screen .voice-dock{gap:4px}
.picture-screen .voice-controls{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:10px}
.picture-screen .voice-controls .btn{min-height:44px;padding:6px 8px;font-size:14px;line-height:1.2}
.picture-screen .mic{width:52px;height:52px}
.picture-screen .voice-status{font-size:12px;line-height:1.25;min-height:15px}
.picture-screen .practice-footer{position:static;gap:8px;padding:4px 0 0}
.picture-screen .practice-footer .btn{min-height:44px;padding:8px;font-size:14px;line-height:1.25}