/* Active tasks use the available viewport; teaching pages keep normal document flow. */
body:has(.exercise-screen)>header,
body:has(.exercise-screen)>footer,
body:has(.exercise-screen)>.release-bar{display:none}
body:has(.exercise-screen) main{width:100%;max-width:1280px;min-height:0;padding:0;margin:0 auto}
main:has(#tracking-canvas):has(.exercise-screen){width:100%;max-width:1280px;padding:0;margin:0 auto}
main:has(#tracking-canvas) .exercise-screen .test-head{margin:0;padding:0 0 6px}
main:has(#tracking-canvas) .exercise-screen .test-head h2{margin:0}
.exercise-screen{height:var(--exercise-height,100dvh);min-height:0;padding:16px 24px;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
.exercise-screen .test-head{flex:none;align-items:center;gap:12px;padding:0 0 8px;margin:0;border-bottom:1px solid var(--line);min-height:48px}
.exercise-screen .test-head>div:last-child{display:flex;align-items:center;gap:16px}
.exercise-screen .test-head .eyebrow{font-size:10px;line-height:1.3;margin:0 0 4px}
.exercise-screen .test-head h2{font-size:23px;line-height:1.2;margin:0}
.exercise-screen .timer{font-size:22px;white-space:nowrap}
.exercise-screen .test-head button,.exercise-screen .test-head .btn{min-height:38px;padding:8px 12px;font-size:13px}
.exercise-screen>.progress-track{flex:none;margin:0;height:4px}
.exercise-screen .exercise-hint{flex:none;font-size:12px;line-height:1.3;margin:0}
.exercise-screen .actions{flex:none;gap:10px;margin:0}
.exercise-screen .actions button{min-height:44px;padding:10px 18px;font-size:14px}
.exercise-screen .question{flex:1;width:100%;max-width:none;min-height:0;margin:0;display:flex;flex-direction:column;gap:10px}
.exercise-screen .question-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:28px}
.exercise-screen .question-stimulus{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.exercise-screen .tag{align-self:flex-start;flex:none;font-size:11px;line-height:1.2;padding:4px 8px}
.exercise-screen .question h2{font-size:clamp(19px,2.1vw,27px);line-height:1.3;letter-spacing:-.015em;margin:0;flex:none}
.exercise-screen .passage{flex:none;margin:0;padding:12px 16px;font-size:16px;line-height:1.5}
.exercise-screen .question-visual{flex:1;min-height:80px;display:flex;align-items:center;justify-content:center}
.exercise-screen .question-visual .diagram{width:100%;height:100%;max-width:100%!important;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.exercise-screen .question-visual svg{display:block;width:100%;height:100%;max-height:300px;max-width:540px}
.exercise-screen .question[data-visual=rotation] .question-visual svg{max-width:240px;max-height:240px}
.exercise-screen .question-visual .table-wrap{width:100%;max-width:450px;overflow:visible}
.exercise-screen .question-visual table{font-size:15px}
.exercise-screen .question-visual th,.exercise-screen .question-visual td{padding:7px 10px}
.exercise-screen .options{min-width:0;min-height:0;margin:0;display:grid;align-content:center;gap:10px}
.exercise-screen .question[data-area=spatial][data-visual=diagram] .options{grid-template-columns:repeat(2,minmax(0,1fr))}
.exercise-screen .option{min-width:0;min-height:48px;padding:12px 16px;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.exercise-screen .option:disabled{opacity:1;cursor:default}
.exercise-screen .option .letter{width:25px;height:25px;font-size:12px}
.exercise-screen .rotation-options{grid-template-columns:repeat(2,minmax(0,1fr));align-content:center}
.exercise-screen .rotation-options .option{gap:4px;padding:8px;position:relative}
.exercise-screen .rotation-options .letter{position:absolute;top:7px;left:7px;width:21px;height:21px}
.exercise-screen .rotation-options svg{width:100%;height:clamp(60px,17vh,120px);max-width:140px;max-height:120px}
.exercise-screen .rotation-options .option>span:last-child{font-size:12px}
.exercise-screen #feedback:empty{display:none}
.exercise-screen .feedback{flex:none;margin:0;padding:10px 14px;font-size:14px;line-height:1.35}
.exercise-screen .feedback p{margin:3px 0 0}

/* The canvas keeps its original proportions and scoring coordinates. */
.control-screen .game-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:14px}
.control-screen .game-layout:not(:has(.game-side)){grid-template-columns:1fr}
.control-screen .game-field{min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px}
.control-screen .game-wrap{flex:1;min-height:80px;width:100%;max-width:none;margin:0;padding:10px;display:flex;align-items:center;justify-content:center}
.control-screen .game-wrap canvas{width:100%;height:100%;min-height:0;max-width:100%;max-height:100%;object-fit:contain;aspect-ratio:auto}
.control-screen .game-controls{flex:none;margin:0;gap:8px;align-content:start}
.control-screen .game-controls button{min-height:40px;padding:8px 12px;font-size:13px}
.control-screen .game-controls .pad{margin-left:auto;gap:5px}
.control-screen .game-controls .pad button{min-width:40px;font-size:16px;padding:7px 10px}
.control-screen .game-controls .small{flex-basis:100%;font-size:11px;line-height:1.3;margin:0}
.control-screen .game-layout .game-side{min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.control-screen .game-layout .instrument{grid-column:auto;min-height:0;padding:10px;display:flex;flex-direction:column;justify-content:center}
.control-screen .game-layout .game-side .instrument:last-child{grid-column:auto}
.control-screen .game-layout .instrument h3{font-size:14px;line-height:1.2;margin:0}
.control-screen .game-layout .instrument .reading{font-size:28px;line-height:1.1;margin:5px 0}
.control-screen .game-layout .instrument button{min-height:38px;font-size:12px;line-height:1.2;padding:7px 6px}
.control-screen .game-layout .instrument p{font-size:11px;line-height:1.25;margin:5px 0 0}
.control-screen .math-options{min-height:38px;gap:5px}
.control-screen .math-options button{white-space:nowrap}
.control-screen .overlay{inset:8px;padding:12px}
.control-screen .overlay h2{font-size:22px;margin:6px 0}
.control-screen .overlay p{font-size:13px;margin:8px 0}

.memory-screen .memory-panel{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px;margin:0;width:100%;max-width:750px;align-self:center}
.memory-screen .memory-instructions{font-size:16px;line-height:1.5;margin:0}
.memory-screen .large-digits{font-size:clamp(30px,6vw,64px);letter-spacing:.14em;line-height:1.2;margin:12px 0;overflow-wrap:anywhere}
.memory-screen #memory-input:empty{display:none}
.memory-screen #recall-form{display:grid;gap:10px}
.memory-screen #recall{margin-top:5px;font-size:18px}
.memory-screen #recall-help{margin:0}
.memory-screen .actions:has(#show-sequence:disabled){display:none}
.memory-screen #memory-input p{font-size:15px;margin:0 0 10px}

.reflection-panel{flex:1;min-height:0;width:100%;max-width:880px;align-self:center;display:flex;flex-direction:column;justify-content:center;gap:18px}
.reflection-panel>.small{font-size:13px;line-height:1.4;margin:0;color:var(--muted)}
.reflection-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.reflection-panel legend,.reflection-prompt{font-weight:650;font-size:clamp(20px,2.6vw,29px);line-height:1.3;padding:0;margin:0 0 18px}
.reflection-options{display:grid;gap:10px}
.reflection-options label{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:6px;background:#fffef9;padding:12px 16px;min-height:45px;cursor:pointer;font-size:16px;font-weight:500}
.reflection-options label:has(input:checked){background:#dbeff0;border-color:var(--teal)}
.reflection-options input{width:19px;height:19px;flex:none;accent-color:var(--teal)}
.reflection-panel textarea{width:100%;height:clamp(90px,28vh,230px);min-height:70px;max-height:32vh;resize:none;font-size:16px;margin:0}
.reflection-actions{justify-content:space-between}
#reflection-print{display:none}

@media(max-width:679px) and (min-height:501px){
 .exercise-screen{padding:10px 14px;gap:8px}
 .exercise-screen .test-head{min-height:44px;padding-bottom:6px;gap:8px}
 .exercise-screen .test-head h2{font-size:19px}
 .exercise-screen .test-head .eyebrow{font-size:9px;letter-spacing:.07em}
 .exercise-screen .test-head>div:last-child{gap:8px}
 .exercise-screen .timer{font-size:18px}
 .exercise-screen .test-head button,.exercise-screen .test-head .btn{font-size:12px;padding:7px 9px;min-height:36px}
 .exercise-screen .question{gap:8px}
 .exercise-screen .question-body{display:flex;flex-direction:column;gap:10px}
 .exercise-screen .question-stimulus{flex:1;gap:8px}
 .exercise-screen .question h2{font-size:18px;line-height:1.3}
 .exercise-screen .passage{font-size:14px;line-height:1.4;padding:9px 11px}
 .exercise-screen .question-visual{min-height:65px}
 .exercise-screen .question-visual svg{max-height:200px}
 .exercise-screen .question[data-visual=rotation] .question-visual svg{max-height:160px}
 .exercise-screen .question-visual table{font-size:14px}
 .exercise-screen .question-visual th,.exercise-screen .question-visual td{padding:4px 8px}
 .exercise-screen .options{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .exercise-screen .question[data-area=verbal] .options{grid-template-columns:1fr}
 .exercise-screen .question[data-area=spatial][data-visual=diagram] .options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .exercise-screen .option{min-height:42px;padding:8px 10px;font-size:14px;gap:7px}
 .exercise-screen .option .letter{width:21px;height:21px;font-size:11px}
 .exercise-screen .rotation-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .exercise-screen .rotation-options .option{padding:5px 3px;gap:2px}
 .exercise-screen .rotation-options .letter{position:static;width:18px;height:18px;font-size:10px}
 .exercise-screen .rotation-options svg{height:60px;max-height:60px}
 .exercise-screen .rotation-options .option>span:last-child{font-size:10px}
 .exercise-screen .feedback{font-size:13px;line-height:1.3;padding:8px 10px}
 .exercise-screen .actions button{font-size:13px;padding:9px 12px;min-height:42px}
 .exercise-screen .exercise-hint{font-size:11px}
 .control-screen .game-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:9px}
 .control-screen .game-layout:not(:has(.game-side)){grid-template-rows:minmax(0,1fr)}
 .control-screen .game-layout .game-side{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;gap:6px}
 .control-screen .game-layout .instrument{padding:8px 6px;justify-content:flex-start}
 .control-screen .game-layout .instrument h3{font-size:11px;min-height:27px}
 .control-screen .game-layout .instrument .reading{font-size:23px;margin:6px 0}
 .control-screen .game-layout .instrument button{font-size:11px;padding:6px 3px;min-height:40px}
 .control-screen .game-layout .instrument p{font-size:10px;line-height:1.25}
 .control-screen .game-controls .pad button{min-width:34px;padding:7px 9px}
 .control-screen .math-options{flex-wrap:wrap;min-height:40px}
 .control-screen .math-options button{flex:1 1 25%;font-size:11px;padding:6px 2px}
 .memory-screen .memory-panel{padding:16px;gap:12px}
 .memory-screen .memory-instructions{font-size:14px}
 .reflection-panel{gap:12px}
 .reflection-panel>.small{font-size:12px}
 .reflection-panel legend,.reflection-prompt{font-size:21px;margin-bottom:14px}
 .reflection-options{gap:8px}
 .reflection-options label{min-height:42px;padding:9px 12px;font-size:14px}
}

/* Short windows, including phones held horizontally. */
@media(max-width:359px) and (min-height:501px){
 .control-screen .game-controls .pad{gap:4px}
 .control-screen .game-controls .pad button{min-width:30px;padding:7px;font-size:14px}
 .control-screen .math-options{flex-direction:column;gap:4px}
 .control-screen .game-layout .instrument .math-options button{flex:none;width:100%;min-height:32px;font-size:12px}
}
@media(max-height:500px){
 .exercise-screen{padding:8px 14px;gap:6px}
 .exercise-screen .test-head{min-height:38px;padding-bottom:5px}
 .exercise-screen .test-head h2{font-size:18px}
 .exercise-screen .test-head .eyebrow{font-size:9px;margin-bottom:2px}
 .exercise-screen .timer{font-size:18px}
 .exercise-screen .test-head button,.exercise-screen .test-head .btn{min-height:32px;padding:6px 10px;font-size:12px}
 .exercise-screen .question{gap:6px}
 .exercise-screen .question-body{gap:16px;grid-template-columns:minmax(0,1.25fr) minmax(190px,.75fr)}
 .exercise-screen .question-stimulus{gap:6px}
 .exercise-screen .tag{font-size:10px;padding:2px 6px}
 .exercise-screen .question h2{font-size:17px;line-height:1.25}
 .exercise-screen .passage{font-size:13px;line-height:1.3;padding:6px 9px}
 .exercise-screen .question-visual{min-height:40px}
 .exercise-screen .question-visual table{font-size:12px}
 .exercise-screen .question-visual th,.exercise-screen .question-visual td{padding:2px 7px}
 .exercise-screen .options{gap:5px}
 .exercise-screen .question[data-area=spatial][data-visual=diagram] .options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .exercise-screen .option{min-height:35px;font-size:13px;padding:5px 9px}
 .exercise-screen .option .letter{width:20px;height:20px;font-size:11px}
 .exercise-screen .rotation-options svg{height:58px;max-height:58px}
 .exercise-screen .rotation-options .option{padding:4px;gap:2px}
 .exercise-screen .feedback{font-size:12px;line-height:1.25;padding:6px 10px}
 .exercise-screen .actions button{font-size:12px;min-height:34px;padding:7px 12px}
 .exercise-screen .exercise-hint{font-size:10px}
 .control-screen .game-layout{grid-template-columns:minmax(0,1fr) 240px;gap:10px}
 .control-screen .game-layout .game-side{gap:5px}
 .control-screen .game-layout .instrument{padding:5px 8px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px}
 .control-screen .game-layout .instrument h3{font-size:11px}
 .control-screen .game-layout .instrument .reading{font-size:21px;margin:0;grid-column:2;grid-row:1}
 .control-screen .game-layout .instrument>button,.control-screen .math-options{grid-column:1/-1;min-height:30px}
 .control-screen .game-layout .instrument button{min-height:30px;font-size:11px;padding:4px 6px}
 .control-screen .game-layout .instrument p{display:none}
 .control-screen .game-controls{gap:5px}
 .control-screen .game-controls button{min-height:33px;padding:5px 9px;font-size:12px}
 .control-screen .game-controls .pad button{min-width:32px;padding:4px 8px;font-size:14px}
 .control-screen .game-controls .small{font-size:10px}
 .memory-screen .memory-panel{padding:10px 18px;gap:6px}
 .memory-screen .memory-instructions{font-size:13px;line-height:1.3}
 .memory-screen .large-digits{font-size:32px;margin:3px 0}
 .memory-screen:has(#recall) .memory-instructions,.memory-screen:has(#recall) .large-digits{display:none}
 .memory-screen #recall-form{gap:6px}
 .memory-screen #recall-form button{min-height:34px;padding:7px 12px}
 .reflection-panel{gap:8px;max-width:1000px}
 .reflection-panel>.small{font-size:11px}
 .reflection-panel legend,.reflection-prompt{font-size:19px;margin-bottom:10px}
 .reflection-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .reflection-options label{min-height:37px;padding:7px 9px;font-size:13px}
 .reflection-panel textarea{height:90px;max-height:28vh;font-size:14px}
}

.exercise-screen[data-density=compact]{padding-top:7px;padding-bottom:7px;gap:6px}
.exercise-screen[data-density=compact] .question,.exercise-screen[data-density=compact] .question-stimulus{gap:6px}
.exercise-screen[data-density=compact] .question h2{font-size:17px;line-height:1.25}
.exercise-screen[data-density=compact] .passage{font-size:13px;line-height:1.3;padding:6px 9px}
.exercise-screen[data-density=compact] .feedback{padding:6px 9px;font-size:12px;line-height:1.25}
.exercise-screen[data-density=compact] .question-visual{min-height:50px}
.exercise-screen[data-density=compact] .question-visual th,.exercise-screen[data-density=compact] .question-visual td{padding:2px 7px}
.reflection-screen[data-density=compact] .reflection-panel{gap:10px}
.reflection-screen[data-density=compact] .reflection-panel legend{font-size:20px;margin-bottom:10px}
.reflection-screen[data-density=compact] .reflection-options{gap:6px}
.reflection-screen[data-density=compact] .reflection-options label{min-height:40px;padding:8px 12px;font-size:14px}
.quiz-screen[data-density=compact] .tag,.quiz-screen[data-density=compact] .exercise-hint{display:none}
.exercise-screen[data-density=compact] .question[data-area=spatial][data-visual=diagram] .question-visual{min-height:90px}
@media print{
 .exercise-screen{height:auto;display:block;padding:0}
 .exercise-screen .question-body{display:block}
 #reflection-print{display:block;color:#132b42;padding:0}
 body:has(#reflection-print)>:not(#reflection-print){display:none!important}
 #reflection-print h2{font-size:14pt;margin:16px 0 5px;break-after:avoid}
 .reflection-note-print{white-space:pre-wrap}
}