/* First module: explanatory scenes and touch/keyboard-compatible exercises. */
.learning-lesson{padding:30px clamp(18px,4vw,55px)}
.lesson-draft{font-size:12px;color:#665122;background:#fbf7eb;border:1px solid #e4d6b8;border-radius:7px;padding:10px 13px;margin:0 0 20px}
.learning-lesson>h1{font-size:clamp(25px,2.8vw,37px);line-height:1.2;margin:10px 0 24px;letter-spacing:-.025em}
.learning-lesson>h1:focus{outline:none}
.lesson-briefing{display:grid;grid-template-columns:125px minmax(0,1fr);align-items:center;gap:24px;margin-bottom:25px;background:#edf4f5;border:1px solid #d2e2e7;border-radius:14px;padding:10px 24px}
.lesson-briefing>canvas{display:block;height:175px;width:131.25px;max-width:100%}
.lesson-speech{position:relative;background:#fff;border:1px solid #d8e1e4;border-radius:12px;padding:18px 22px}
.lesson-speech:before{content:'';position:absolute;width:14px;height:14px;border-left:1px solid #d8e1e4;border-bottom:1px solid #d8e1e4;left:-8px;top:50%;background:#fff;transform:rotate(45deg)}
.lesson-speech>p:last-child{margin:0;font-size:17px;line-height:1.6}
.lesson-body{font-size:17px;line-height:1.6;min-width:0}
.lesson-body h2{font-size:22px;line-height:1.3}
.lesson-body p{margin:14px 0}
.lesson-small{font-size:13px;line-height:1.6;color:#4c6573}
.lesson-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lesson-detail,.lesson-info{background:#f5f8fa;border:1px solid #d1e0e7;border-radius:12px;padding:18px 20px;min-width:0}
.lesson-detail summary{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:650;font-size:17px;cursor:pointer;min-height:44px;line-height:1.4}
.lesson-detail summary:focus-visible{outline:3px solid #94620b;outline-offset:5px}
.lesson-detail[open]{background:#fff;border-color:#6b9fb3}
.lesson-detail-badge{flex-shrink:0;font-size:11px;font-weight:600;color:#225b73;background:#e2edf2;padding:5px 9px;border-radius:15px}
.lesson-detail>p:last-child{margin-bottom:0}
.lesson-callout{padding:17px 20px;background:#fbf7eb;border-left:4px solid #ae7e28;border-radius:6px;color:#614c29}
.lesson-sources{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:14px;border-top:1px solid #e1e9ed;font-size:12px}
.lesson-sources a{color:#275f78;min-height:44px;display:flex;align-items:center}
.lesson-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #dae5eb;margin-top:15px}
.lesson-footer>p{font-size:13px;color:#4c6573;margin:0;line-height:1.5}
.lesson-footer>div{display:flex;gap:12px}
.lesson-footer button:disabled,.module-topics button:disabled{background:#edf2f4;color:#4c6573;border:1px solid #c4d4dd;box-shadow:none;cursor:not-allowed}
.risk-options{display:flex;flex-wrap:wrap;gap:12px}
.risk-options [aria-pressed=true]{background:#e1f0f2;border:2px solid #27768e}
.risk-explanation{padding:24px;border:1px solid #d7e4e9;border-radius:13px;margin-top:18px;background:#f4f8fa;min-height:190px}
.risk-metric{font-size:33px;color:#235c74}
.admission-age{display:block;font-size:64px;line-height:1.1;color:#a56912;margin:20px 0}
.memo-open{display:flex;flex-direction:column;align-items:flex-start;gap:18px;background:#fff;border:1px solid #b9ced9;border-left:8px solid #2d748b;border-radius:10px;box-shadow:4px 6px 0 #e2eaf0;padding:30px;text-align:left;color:#244d63;min-height:135px;font-size:22px;font-weight:650}
.memo-open:hover{background:#f5fafb}
.lesson-site{display:block;max-width:100%;width:100%;border:1px solid #d8e4ea;border-radius:12px}
.lesson-memo{max-width:740px;width:calc(100% - 30px);max-height:85svh;border:1px solid #c3d4de;border-radius:14px;padding:25px;color:#203b4c;background:#fff}
.lesson-memo::backdrop{background:#10293688}
.lesson-memo form{display:flex;justify-content:flex-end}
.lesson-memo button{min-height:44px}
.lesson-memo p{line-height:1.65}
.lesson-memo section{border-top:1px solid #e1e9ee;padding:8px 0}
.module-topics li>div{flex:1;min-width:0}
.module-topics li strong{font-weight:600}
.module-topics li small{display:block;color:#4c6573;margin:9px 0;font-size:12px}
.module-topics li button{margin-top:8px}
.group-situation{padding:22px 26px;border:2px dashed #70a1b6;background:#eef6f8;border-radius:14px;font-size:19px;cursor:grab}
.group-situation[draggable=false]{cursor:default;border-style:solid}
.group-situation p{margin:0}
.group-targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:20px 0}
.group-target{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:300px;padding:16px;background:#f4f7f9;border:1px solid #cedee6;border-radius:12px;color:#23495f;text-align:center}
.group-target canvas{width:140px;height:187px;max-width:100%;object-fit:contain}
.group-target strong{font-size:17px}
.group-target:disabled{opacity:1;cursor:default}
.group-target:enabled:hover{background:#eaf4f6;border-color:#4a95ad}
.group-target.is-correct{border:2px solid #2e816d;background:#eef8f3}
.group-check{color:#1f6652;font-size:14px;font-weight:700}
.group-none{display:grid;place-items:center;width:90px;height:90px;border:1px solid #8da7b4;border-radius:50%;font-size:42px;margin:auto;color:#4c6573}
.group-feedback{min-height:30px;font-size:16px;line-height:1.6}
.group-feedback[data-result=wrong]{background:#fff3e7;border-left:4px solid #a35d16;color:#734615;padding:14px}
.group-feedback[data-result=correct]{background:#edf7f1;border-left:4px solid #2b7d61;color:#215b47;padding:14px}
.preparation-journal{border:1px solid #c1d0da;border-left:10px solid #2c637a;background:#fffdf8;border-radius:6px 14px 14px 6px;box-shadow:5px 6px 0 #e3e9ed;overflow:hidden}
.journal-page{padding:28px clamp(18px,4vw,42px);min-height:250px;background:#fffdf8;box-shadow:inset 12px 0 #f0ece2}
.journal-page:focus{outline:none}
.journal-navigation{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid #e2dfd3}
.journal-turn{background:#285f78;color:#fff;border:2px solid #285f78;border-radius:8px 8px 0 8px;padding:14px 18px;min-height:48px;font-weight:650;box-shadow:3px 3px 0 #bbd1da}
.journal-turn:enabled:hover{background:#19475e}
.journal-navigation button:disabled{color:#4c6573;background:#eaf0f3;border:1px solid #c3d0d7;box-shadow:none;cursor:default}
.permit-study{padding:22px;border:1px solid #c4d3db;border-top:7px solid #2e6b83;background:#fbfcfd;border-radius:8px}
.permit-study>.learning-kicker{color:#755324}
.lesson-choices{display:grid;gap:12px}
.lesson-choices button{white-space:normal;text-align:left;padding:17px 20px;line-height:1.5;min-height:48px}
.lesson-choices button.is-correct{color:#215b47;background:#edf7f1;border:2px solid #2b7d61;opacity:1}
.lesson-choices button:disabled:not(.is-correct){color:#4c6573;background:#f0f4f6;border-color:#c5d3db;opacity:1;cursor:default}
.lesson-check>h2{max-width:750px}
@media(max-width:850px){.group-targets{grid-template-columns:1fr 1fr}.lesson-cards{grid-template-columns:1fr}}
@media(max-width:600px){
 .learning-lesson{padding:24px 18px}
 .lesson-briefing{grid-template-columns:70px minmax(0,1fr);gap:10px;padding:12px 10px}
 .lesson-briefing>canvas{height:105px;width:78.75px}
 .lesson-speech{padding:14px 13px}
 .lesson-speech .learning-kicker{font-size:9px;letter-spacing:.06em}
 .lesson-speech>p:last-child,.lesson-body{font-size:16px}
 .lesson-detail,.lesson-info{padding:14px 15px}
 .lesson-detail summary{font-size:16px;flex-wrap:wrap}
 .group-targets{gap:9px}
 .group-target{padding:12px 8px;min-height:248px}
 .group-target canvas{width:105px;height:140px}
 .group-target strong{font-size:14px}
 .group-target .lesson-small{font-size:12px}
 .group-situation{font-size:17px;padding:18px}
 .lesson-footer>div{width:100%;justify-content:space-between}
 .memo-open{padding:23px;font-size:20px;max-width:100%}
 .journal-page{padding:22px 18px;min-height:290px}
 .journal-navigation{padding:14px 12px;gap:10px}
 .journal-navigation button{font-size:13px;flex:1;padding:12px 10px}
 .permit-study{padding:18px 12px}
}
@media(max-width:480px){
 .lesson-briefing{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
 .lesson-briefing>canvas{justify-self:center}
 .lesson-speech{min-width:0}
 .lesson-speech:before{left:calc(50% - 7px);top:-8px;transform:rotate(135deg)}
 .lesson-footer>div{flex-wrap:wrap}
 .lesson-footer>div>button{flex:1 1 100px;white-space:normal}
 .journal-navigation{flex-direction:column;align-items:stretch}
 .journal-navigation button{flex:auto;width:100%}
}

/* Existing camera material, reviewed inside the lesson without changing progress. */
.ladder-review{min-width:0}
.ladder-review-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}
.ladder-review-nav button{text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.ladder-review-nav button[aria-pressed=true]{background:#e1f0f2;border:2px solid #27768e;color:#235c74}
.ladder-review-figure{margin:0}
.ladder-review-viewport{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #d8e4ea;border-radius:12px;background:#edf4f5}
.ladder-review-frame{position:absolute;inset:0;transform-origin:0 0;transition:transform .2s ease-out}
.ladder-review-frame img,.ladder-review-frame svg{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ladder-review-frame svg{pointer-events:none}
.ladder-review-marker{fill:#ffd44b18;stroke:#b66c19;stroke-width:3;vector-effect:non-scaling-stroke}
.ladder-review-figure figcaption{margin:10px 0;line-height:1.6}
.ladder-review-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}
.ladder-review-tools span{flex:1 1 200px}
.ladder-review-explanation h2{margin:8px 0 14px}
.ladder-review-explanation h3{font-size:17px;color:#235c74;margin:20px 0 8px}
.ladder-review-explanation>p:last-child{margin-bottom:0}
.ladder-review-error>p{margin-top:0}
@media(max-width:700px){.ladder-review-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ladder-review-nav button{font-size:13px;padding:12px 10px}}
@media(prefers-reduced-motion:reduce){.ladder-review-frame{transition:none}}
.lesson-warning{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;margin:0 0 14px;background:var(--gold-soft,#faf6e9);border:1px solid #dfc991;border-left:4px solid var(--gold,#e7a714);border-radius:8px;color:var(--gold-ink,#78540a)}
.lesson-warning-icon{flex:none;width:44px;height:40px}
.lesson-warning strong{display:block;font-size:18px;margin-bottom:2px}
.lesson-warning p{margin:0;font-size:16px;line-height:1.55}
.lesson-violation{display:flex;align-items:flex-end;gap:16px;margin:0 0 16px}
.lesson-violation canvas{flex:none;width:min(40vw,180px);height:auto;aspect-ratio:3/4}
.lesson-violation figcaption{max-width:32ch}
.ladder-steps{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:22px;align-items:center;margin:12px 0 18px;padding:18px;background:#fff;border:1px solid var(--line,#d6ddec);border-radius:12px}
.ladder-steps-figure{position:relative;margin:0;display:grid;justify-items:center;gap:8px}
.ladder-steps-figure canvas{display:block;width:100%;height:auto;aspect-ratio:320/420}
.ladder-steps-valve{position:absolute;right:2%;top:-5%;width:32%;height:auto;pointer-events:none}
.ladder-steps-text{font-size:18px;line-height:1.55;margin:6px 0 16px}
.ladder-steps-nav{display:flex;gap:10px;flex-wrap:wrap}
.ladder-steps-nav button{min-height:44px;min-width:44px}
@media(max-width:600px){.ladder-steps{grid-template-columns:1fr;padding:14px}.ladder-steps-figure canvas{max-width:260px}.ladder-steps-valve{right:12%;width:30%}}