/* Active practice fills the viewport; content scrolls below its own controls. */
html:has(body[data-learning-active="true"]){scroll-padding:0;overflow:hidden}
body[data-learning-active="true"]{overflow:hidden}
body[data-learning-active="true"] :is(.member-header,.member-sidebar,.member-bottom,.topbar,.bottom-nav,.footer,.skip-link){display:none!important}
body[data-learning-active="true"] :is(.flashcard-session,.learning-quiz-session){position:fixed;inset:0;z-index:60;width:100%;height:100vh;height:100dvh;max-width:none;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:0;background:var(--color-paper);color:var(--color-ink);scroll-margin:0}
body[data-learning-active="true"] .learning-session-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 16px max(24px,env(safe-area-inset-left));margin:0;border-bottom:1px solid var(--color-rule);background:var(--color-surface)}
body[data-learning-active="true"] .learning-session-head :is(h1,h3){display:block;margin:0;font-size:18px;line-height:1.5;font-weight:600;overflow-wrap:anywhere;min-width:0}
body[data-learning-active="true"] .learning-session-head .timer{margin:0;display:grid;gap:2px;padding:0;border:0;font-size:12px;text-align:center;white-space:nowrap}
body[data-learning-active="true"] .learning-session-head .timer strong{font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}
body[data-learning-active="true"] .learning-session-head :is(button,a){min-height:44px;white-space:nowrap;scroll-margin:0}
body[data-learning-active="true"] .flashcard-session progress{flex:none;margin:0;height:4px;border-radius:0}
body[data-learning-active="true"] .learning-card-stage{display:flex;flex-direction:column;flex:1;min-height:0}
body[data-learning-active="true"] .learning-session-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left));scroll-padding:20px;-webkit-overflow-scrolling:touch}
body[data-learning-active="true"] .learning-card-stage>.learning-session-scroll{display:flex;flex-direction:column}
body[data-learning-active="true"] .learning-session-scroll>.flashcard{width:100%;max-width:960px;margin:auto;flex-shrink:0}
body[data-learning-active="true"] .flashcard-display{min-height:clamp(240px,45dvh,560px)}
body[data-learning-active="true"] .flashcard-front:not(.flashcard-front-word):not(.flashcard-front-long){font-size:clamp(64px,12dvh,140px)}
body[data-learning-active="true"] .flashcard-session[data-phase="question"] .flashcard-display{min-height:180px}
body[data-learning-active="true"] .flashcard-actions{flex:none;width:min(100%,1008px);margin:0 auto;gap:12px;padding:16px 24px 8px;background:var(--color-paper);border-top:1px solid var(--color-rule)}
body[data-learning-active="true"] .flashcard-status{flex:none;width:min(100%,1008px);margin:0 auto;padding:0 24px calc(8px + env(safe-area-inset-bottom));min-height:24px}
body[data-learning-active="true"] .learning-quiz-session #quiz-form{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
body[data-learning-active="true"] .learning-quiz-session .question{width:100%;max-width:960px;margin:0 auto;scroll-margin:0;border:0;padding:0;background:var(--color-transparent)}
body[data-learning-active="true"] .learning-quiz-session .question:last-child{margin-bottom:0}
body[data-learning-active="true"] #quiz-form>.btn{align-self:center;flex:none;width:min(420px,calc(100% - 48px));margin:12px 24px calc(12px + env(safe-area-inset-bottom));min-height:48px}
body[data-learning-active="true"] .selection-speech,body[data-learning-active="true"] .selection-speech.is-flashcard{top:auto;bottom:calc(96px + env(safe-area-inset-bottom));z-index:80}
body[data-learning-active="true"] .audio-status{z-index:90;bottom:calc(76px + env(safe-area-inset-bottom))}
.learning-fullscreen-gate{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:28px;border:1px solid var(--color-rule);border-radius:6px;background:var(--color-surface);color:var(--color-ink);overflow:auto}
.learning-fullscreen-gate::backdrop{background:rgba(0,0,0,.42)}
.learning-fullscreen-gate h2{font-size:22px;line-height:1.4;margin:0 0 16px}
.learning-fullscreen-gate p{font-size:15px;line-height:1.7;margin:0 0 20px}
.learning-fullscreen-gate .cms-help{font-size:13px;color:var(--color-muted)}
.learning-fullscreen-gate .inline-actions{flex-wrap:wrap;gap:12px}
.learning-fullscreen-gate .text-button{min-height:44px}
.learning-fullscreen-gate :is(button,a):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
@media(max-width:639px){
 body[data-learning-active="true"] .learning-session-head{gap:10px;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
 body[data-learning-active="true"] .learning-session-head :is(h1,h3){font-size:15px;line-height:1.4}
 body[data-learning-active="true"] .learning-session-head .timer strong{font-size:20px}
 body[data-learning-active="true"] .learning-session-head .small{padding-inline:12px;font-size:12px}
 body[data-learning-active="true"] .learning-session-scroll{padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left))}
 body[data-learning-active="true"] .flashcard-actions{padding-inline:16px}
 body[data-learning-active="true"] .flashcard-status{padding-inline:16px}
 body[data-learning-active="true"] .flashcard-display{min-height:clamp(200px,40dvh,360px)}
 body[data-learning-active="true"] .flashcard-session[data-phase="question"] .flashcard-display{min-height:160px}
 body[data-learning-active="true"] .flashcard-option{min-height:48px}
 .learning-fullscreen-gate{padding:24px}
}
@media(max-height:480px){
 body[data-learning-active="true"] .learning-session-head{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px}
 body[data-learning-active="true"] .learning-session-head :is(h1,h3){font-size:15px}
 body[data-learning-active="true"] .learning-session-scroll{padding-block:16px}
 body[data-learning-active="true"] .flashcard-actions{padding-top:8px;padding-bottom:4px}
 body[data-learning-active="true"] .flashcard-status{min-height:16px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
 body[data-learning-active="true"] .flashcard-session[data-phase="question"] .flashcard-display{min-height:140px}
}