/* Lesson content owns the usable viewport; space for feedback is reserved. */
.focus-mode #app{height:100vh;height:100dvh;display:flex;flex-direction:column}
.focus-mode .demo-banner{flex:none;padding:4px 10px;font-size:10px;line-height:1.2}
.focus-shell{flex:1;min-height:0;width:100%;max-width:760px;padding:12px 16px;display:flex}
.focus-shell .quiz-wrap{width:100%;max-width:640px;min-height:0;height:100%;margin:auto;display:grid;grid-template-rows:44px 4px minmax(0,1fr) 24px;gap:8px}
.focus-shell .quiz-top{margin:0;gap:8px}
.focus-shell .back{min-height:44px;margin:0;padding:0 3px}
.focus-shell .quiz-count{font-size:12px;white-space:nowrap}
.focus-shell .progress{height:4px;margin:0}
.focus-shell .quiz-panel{min-height:0;padding:16px;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(156px,max-content);gap:12px;border-radius:22px;animation:none}
.question-block{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.question-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);gap:8px}
.focus-shell .question-text{font-size:clamp(20px,3.5vw,28px);line-height:1.2;letter-spacing:-.5px;margin:0;padding:2px 0;overflow-wrap:break-word;flex-shrink:0}
.focus-shell .equation{font-size:clamp(30px,7vw,54px)}
.focus-shell .answers{gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.focus-shell .answer{min-height:62px;padding:8px;font-size:16px;line-height:1.2;border-radius:14px;overflow-wrap:break-word}
.feedback-slot{min-height:0}
.focus-shell .feedback{height:auto;min-height:100%;margin:0;padding:12px;border-radius:14px;display:flex;flex-direction:column;gap:5px}
.focus-shell .feedback.waiting{background:#f5f4f9}
.focus-shell .feedback h3{font-size:15px;line-height:1.15;margin:0}
.focus-shell .feedback p{font-size:13px;line-height:1.3}
.focus-shell .feedback .button{margin-top:auto;min-height:46px;padding:9px 10px;flex-shrink:0}
.focus-shell .quiz-footer{margin:0;align-items:center;font-size:12px;gap:6px}
.focus-shell .result{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px;animation:none}
.focus-shell .result-badge{width:64px;height:64px;border-radius:22px;margin:0 auto 4px;flex-shrink:0}
.focus-shell .result h1{font-size:30px;margin:0}
.focus-shell .result strong.big{font-size:48px;margin:3px 0}
.focus-shell .result-actions{gap:8px;margin-top:10px}
.focus-shell .result-actions .button{min-height:46px;padding:10px}
.subject-picker{width:100%;max-width:560px;height:100%;margin:auto;display:flex;flex-direction:column;gap:12px}
.picker-title h1{font-size:28px;margin-bottom:5px}
.picker-title p,.picker-note{font-size:12px;color:var(--muted)}
.subject-list{display:grid;gap:8px;flex:1;min-height:0;grid-template-rows:repeat(6,minmax(44px,1fr))}
.subject-option{display:flex;align-items:center;gap:12px;text-align:left;min-height:48px;border:1px solid var(--line);border-radius:16px;padding:8px 12px;background:white}
.subject-option>span:nth-child(2){flex:1}
.subject-option strong{font-size:16px;display:block}
.subject-option small{font-size:12px;display:block;color:var(--muted);margin-top:3px}
.subject-option[data-subject=mix]{background:#eaf3de;border-color:#d8e7c8}
.subject-symbol{display:grid;place-items:center;width:38px;flex-shrink:0;font-size:27px;color:var(--purple)}
.picker-note{text-align:center;flex:none}
.test-setting{background:#f0eef8;padding:14px;border-radius:14px}
@media(max-height:560px) and (max-width:599px){
 .subject-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(44px,1fr));gap:6px}
 .subject-option{min-width:0;min-height:44px;gap:6px;padding:6px}
 .subject-option strong{font-size:13px}
 .subject-option small{display:none}
 .subject-option svg{display:none}
 .subject-symbol{width:24px;font-size:21px}
 .subject-picker{gap:6px}
 .picker-title h1{font-size:22px}
}
@media(max-height:650px){
 .focus-shell{padding:6px 10px}
 .focus-shell .quiz-wrap{gap:5px;grid-template-rows:44px 4px minmax(0,1fr) 20px}
 .focus-shell .quiz-panel{padding:10px;gap:8px;grid-template-rows:minmax(0,1fr) auto minmax(138px,max-content)}
 .question-block{gap:6px}
 .focus-shell .question-text{font-size:21px}
 .focus-shell .equation{font-size:34px}
 .focus-shell .answer{min-height:52px;font-size:14px;padding:6px}
 .focus-shell .feedback{padding:9px;gap:4px}
 .focus-shell .feedback h3{font-size:14px}
 .focus-shell .feedback p{font-size:12px}
 .focus-shell .result{gap:6px;padding:12px}
 .focus-shell .result-badge{width:48px;height:48px;margin:0 auto}
 .focus-shell .result-badge svg{width:30px;height:30px}
 .focus-shell .result strong.big{font-size:38px}
 .focus-shell .result h1{font-size:25px}
 .focus-shell .result-actions{margin-top:4px}
 .subject-picker{gap:6px}
 .picker-title h1{font-size:24px}
 .subject-option small{font-size:11px;margin-top:0}
 .subject-option{padding:5px 10px;border-radius:12px}
}
@media(max-height:520px) and (max-width:599px){
 .focus-shell .quiz-panel{padding:8px;gap:6px;grid-template-rows:minmax(0,1fr) auto minmax(132px,max-content)}
 .question-block{gap:4px}
 .question-meta{font-size:11px}
 .question-meta .pill{padding:4px 7px}
 .focus-shell .question-text{font-size:17px;line-height:1.15}
 .focus-shell .answers{gap:6px}
 .focus-shell .answer{min-height:48px;font-size:13px;padding:5px}
 .focus-shell .feedback{padding:7px;gap:4px}
 .focus-shell .feedback p{line-height:1.2}
 .focus-shell .feedback .button{min-height:44px;padding:8px}
}
@media(max-height:450px) and (min-width:600px){
 .focus-shell{max-width:950px}
 .focus-shell .quiz-wrap{max-width:none}
 .focus-shell .quiz-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 124px;gap:8px 16px}
 .question-block{grid-row:1 / 3;align-self:center}
 .focus-shell .answers{grid-column:2;grid-row:1;gap:6px}
 .focus-shell .answer{min-height:44px}
 .feedback-slot{grid-column:2;grid-row:2}
 .focus-shell .feedback .button{min-height:44px}
 .focus-shell .result{display:grid;grid-template-columns:1fr 1fr;gap:5px 24px}
 .focus-shell .result-badge{grid-column:1}
 .focus-shell .result-actions{grid-column:2;grid-row:1 / 7;align-self:center}
 .subject-picker{max-width:760px}
 .subject-list{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(44px,1fr))}
 .subject-option[data-subject=mix]{grid-column:auto}
}

/* Embedded teaching diagrams share the existing single-screen question area. */
.question-block.has-image{gap:5px;justify-content:flex-start}
.question-block.has-image .question-text{font-size:clamp(17px,3vw,23px);line-height:1.17}
.question-image{display:block;object-fit:contain;width:100%;max-height:150px;min-height:35px;flex:1;min-width:0;border-radius:10px;background:#f4f6fb}
@media(max-height:660px){.question-image{max-height:105px}.question-block.has-image .question-text{font-size:16px;line-height:1.15}}

.pack-sample-image{display:block;max-width:100%;width:480px;max-height:220px;object-fit:contain;border-radius:10px;background:#f4f6fb;margin:12px 0}

/* Keep embedded signs and long imported answers clear of neighbouring rows. */
@media(max-width:480px){
 .focus-shell .quiz-panel.long-content .question-text{font-size:17px;line-height:1.17}
 .focus-shell .quiz-panel.with-image .answer,.focus-shell .quiz-panel.long-content .answer{font-size:14px;line-height:1.15;min-height:52px;padding:6px}
 .question-image{min-height:56px}
}
@media(max-width:480px) and (max-height:660px){
 .question-block.has-image .question-text,.focus-shell .quiz-panel.long-content .question-text{font-size:14px;line-height:1.15}
 .focus-shell .quiz-panel.with-image .answer,.focus-shell .quiz-panel.long-content .answer{font-size:13px;min-height:44px;padding:5px}
 .focus-shell .quiz-panel.with-image .answer,.focus-shell .quiz-panel.long-content .answers{gap:6px}
 .focus-shell .quiz-panel.with-image .question-meta,.focus-shell .quiz-panel.long-content .question-meta{font-size:11px}
 .focus-shell .quiz-panel.with-image .question-meta,.focus-shell .quiz-panel.long-content .question-meta .pill{padding:4px 7px}
 .focus-shell .feedback{padding:7px;gap:4px}
 .focus-shell .feedback .button{min-height:44px}
}