:root{font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;color:#dceaf0;background:#07131d;color-scheme:dark;--panel:#102633;--edge:#36566a;--gold:#dfb764;--red:#741329;--muted:#9db5c3;--green:#70c79d;--cyan:#6bd4e0}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{min-height:44px;border:1px solid var(--edge);border-radius:9px;background:#183648;color:#e4f0f5;padding:9px 12px;cursor:pointer}select{min-width:0;width:100%}button:hover{border-color:var(--gold)}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true],.primary{background:var(--red);border-color:var(--gold)}[hidden]{display:none!important}.masthead{height:70px;display:flex;align-items:center;gap:10px;padding:10px 16px;background:#f4f1eb;color:#1c394a;border-bottom:3px solid #bc954b}.masthead b{display:block;font-size:24px;letter-spacing:3px;color:#a50929}.masthead small{display:block;letter-spacing:2px;font-size:10px;color:#775c28}.masthead .version{margin-left:auto;font-size:10px;letter-spacing:1px;color:#665d4b}.masthead button{background:#a50929;color:white}.topbar{display:flex;gap:12px;padding:12px 16px;align-items:end}.topbar label{display:block}.ruleSelectLabel{flex:1}.languageLabel{width:132px}.topbar span,.settings label{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.settings{padding:12px 16px;border-top:1px solid var(--edge);display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}.settings p{grid-column:1/-1;font-size:12px;line-height:1.6}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:8px 12px;background:#07131d;position:sticky;top:0;z-index:20}.tabs button{min-height:58px;border:1px solid var(--edge);border-radius:9px;line-height:1.25;padding:8px 3px;font-size:14px}.tabs button[aria-selected=true]{background:var(--red);border-color:var(--gold);font-weight:600}main{max-width:1350px;margin:0 auto;padding:8px 12px 22px}.tabpanel{border:1px solid var(--edge);border-radius:12px;overflow:hidden;background:var(--panel)}.lessonHead{padding:16px 18px 14px}.lessonHead.compact{padding:13px 16px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--gold)}h1{font-size:24px;margin:7px 0 10px;color:#f3f7f8;line-height:1.2}h2{font-size:16px;color:var(--gold);margin:0 0 10px}p{font-size:15px;line-height:1.55;margin:9px 0}.lessonHead small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.lessonCard{padding:18px;border-top:1px solid var(--edge)}.choicebar{display:flex;gap:8px}.choicebar button{flex:1;font-size:13px}.audioStatus{font-size:12px;color:var(--gold);margin-bottom:0}.stage{margin:0 10px 10px;border:1px solid #3e6276;border-radius:10px;overflow:hidden;background:#0b202b}.viewport{position:relative;height:clamp(310px,51dvh,730px);overflow:hidden;background:#142d3d}#bridge{display:block;width:100%;height:100%;touch-action:none}.rotInstrument{position:absolute;top:10px;left:10px;padding:8px 10px;width:138px;background:#071a22e8;border:1px solid #688078;border-radius:4px;pointer-events:none}.rotInstrument>span{display:block;font-size:9px;letter-spacing:1px}.rotInstrument small{float:right}.rotInstrument strong{display:block;text-align:center;font-size:28px}.rotScale{height:12px;background:linear-gradient(90deg,#8b3040 0 50%,#286f50 50% 100%);position:relative}.rotScale i{position:absolute;width:2px;background:var(--gold);height:18px;top:-3px;left:50%}#rotSide{text-align:center;margin-top:5px;color:var(--gold);font-size:9px}.sceneBadge{position:absolute;right:8px;top:10px;max-width:45%;padding:8px;background:#102635de;color:#eaf0ed;font-size:10px;text-align:right;border-radius:4px}.cameraBar{position:absolute;left:8px;right:8px;top:114px;background:#102b3bd9;display:flex;padding:5px;gap:5px;border-radius:6px}.cameraBar label{flex:1;min-width:0}.cameraBar button,.cameraBar select{font-size:12px;padding:5px;min-height:35px}.sceneMessage{position:absolute;left:8px;right:8px;bottom:10px;background:#09202dde;padding:8px 10px;color:#ebf6f9;font-size:12px;line-height:1.4;border-radius:5px;pointer-events:none}.vesselLabel{position:absolute;pointer-events:none;padding:4px 6px;background:#14343ddf;color:#aff4f2;border:1px solid #b3e5df78;border-radius:4px;font-size:9px;letter-spacing:.8px;max-width:130px}.vesselLabel.target{color:#ffe3a4;border-color:#dfb76478}.sceneMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#0b202b;padding:10px 8px;font-size:9px;color:var(--muted);text-align:center}.sceneMetrics b{display:block;font-size:14px;color:#edf5fa;margin-top:4px}.playback{display:flex;padding:6px 8px;gap:6px;align-items:center;border-top:1px solid var(--edge)}.playback button{font-size:12px;flex:1;padding:8px}.playback label{font-size:9px;color:var(--muted);width:50px}.playback select{padding:3px;font-size:11px;min-height:30px}.seaNotice{font-size:10px;color:var(--muted);padding:0 10px 8px;margin:3px 0 0;line-height:1.45}.conning{background:#132e3b;border-top:2px solid var(--gold);padding:10px}.liveReadout{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px}.liveReadout b{font-size:15px;color:#efe2b7}.liveReadout button{font-size:12px}.controlGrid{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;margin-top:10px}.wheelRow{height:70px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold)}.wheelRow svg{width:66px;height:66px;stroke:#ddc178;stroke-width:4;fill:none}.wheelRow circle:last-of-type{fill:#ac1736;stroke-width:2}.helmLabels{display:flex;justify-content:space-between;font-size:9px;align-items:center;margin:6px 0}.helmLabels>span:first-child{color:#f18b99}.helmLabels>span:last-child{color:#7ed8ac}.helmLabels b{color:var(--gold);font-size:10px}.rudderBar{height:12px;background:linear-gradient(90deg,#783342 0 50%,#265c48 50% 100%);border:1px solid #6e8c96;position:relative;border-radius:2px}.rudderBar i{position:absolute;width:3px;height:19px;background:white;top:-4px;left:50%}.degreeLabels{display:flex;justify-content:space-between;color:#afc4cd;font-size:9px;margin-top:5px}.helm input{width:100%;margin:9px 0 12px;accent-color:#70d4e1}.helmButtons{display:grid;grid-template-columns:1fr 1fr;gap:5px}.helmButtons button{font-size:12px;min-height:36px;padding:6px}.helmButtons button:nth-last-child(-n+2){grid-column:1/-1}.stop{background:#642234;border-color:#a65f6c}.telegraph{background:linear-gradient(110deg,#31404b,#19252e 68%,#354650);border:2px solid #8b9ba3;border-radius:11px;padding:8px 5px;text-align:center}.telegraph h2{font-size:9px;letter-spacing:1.5px;font-weight:500;color:#d5e3e9;margin:0 0 7px}.telegraphTrack{height:228px;position:relative;touch-action:none}.gateRail{position:absolute;right:12%;top:7px;bottom:7px;width:15px;border:2px solid #84949c;border-radius:10px;background:linear-gradient(90deg,#536b75,#101b21)}.orderLabels{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}.orderLabels button{font-size:9px;text-align:right;background:none;border:0;min-height:23px;height:23px;padding:0 29% 0 0;line-height:1.1;border-radius:0;color:#becad1}.orderLabels button.selected{color:#fff;font-weight:bold;text-shadow:0 0 7px #acdcec}.orderLabels button[data-order="0"]{color:var(--gold)}.orderLabels button:first-child{color:#ade0bb}.orderLabels button:last-child{color:#e7b1b4}.gateHandle{position:absolute;pointer-events:none;right:2%;top:calc(50% - 12px);width:42px;height:26px;border:1px solid #b1c1c7;border-radius:6px;background:linear-gradient(#7e8f99,#1f2c36 60%,#536671);box-shadow:0 3px 7px #000b;display:flex;flex-direction:column;justify-content:center;gap:3px;align-items:center}.gateHandle span{width:65%;height:2px;background:#b9c7cc}.telegraph p{font-size:10px;letter-spacing:1px;margin:7px 0 2px}.telegraph small{font-size:9px;color:#97aebb}.auxControls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.auxControls label{grid-column:1/-1;font-size:10px;color:#a5bac7}.auxControls button,.auxControls select{font-size:11px}.finishbar{display:flex;gap:6px;margin-top:8px}.finishbar button{font-size:12px;flex:1}#panel3 .viewport{height:clamp(275px,40dvh,600px)}#panel3 .sceneMetrics{display:none}#panel3 .playback #playLesson,#panel3 .playback #replayLesson{display:none}#decisionOptions{display:grid;gap:10px}#decisionFeedback{padding:14px 0;font-size:14px;line-height:1.5}.conceptKey{display:grid;gap:8px;margin-top:10px}.conceptKey span{border:1px solid var(--edge);border-radius:6px;padding:8px;font-size:12px}.conceptKey .lightDot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;padding:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{max-width:850px;width:94%;max-height:90dvh;overflow:auto;background:#102633;color:#eaf3f7;border:1px solid var(--gold);border-radius:14px;padding:20px}dialog::backdrop{background:#020911db}dialog p{font-size:13px}dialog button{margin:8px 5px 0 0}#trackPlot{width:100%;height:auto;background:#061923;border-radius:7px}.evidence{padding:12px;border-left:3px solid #88b1bd;margin:10px 0;background:#09212e}.evidence.fail{border-color:#f38699}.evidence.review,.evidence.incomplete{border-color:var(--gold)}.evidence p{margin:4px 0}.evidence small{color:#e7c984}#renderFailure{position:absolute;inset:150px 20px 20px;background:#45152ae8;padding:20px;line-height:1.6}
@media(min-width:900px){.topbar,.tabs,.settings{max-width:1374px;margin:auto}.tabs button br{display:none}.lessonHead h1{font-size:28px}.lessonHead p{max-width:1000px}.conning{max-width:860px;margin:auto;border:1px solid #7c6d43;border-radius:10px}.controlGrid{grid-template-columns:2fr 1fr}.masthead{padding-left:calc((100% - min(1350px,100%))/2 + 16px)}.telegraphTrack{height:260px}.sceneBadge{font-size:13px}.cameraBar{max-width:530px}.viewport{height:640px}.lessonCard p{max-width:1000px}}
@media(max-width:370px){.tabs button{font-size:12px}.masthead .version{display:none}.topbar{gap:6px;padding:8px}.languageLabel{width:108px}.masthead b{font-size:20px}.lessonHead{padding:12px}.lessonHead p{font-size:13px}.cameraBar button{font-size:10px}.sceneMetrics b{font-size:12px}.telegraph h2{font-size:8px}.orderLabels button{font-size:8px}}
/* 0.10: learning controls sit outside the lookout; large-bridge mode has a clear exit. */
.caseBar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--edge);background:#142d3b}.caseBar label{flex:1;min-width:0;font-size:10px;color:var(--muted)}.caseBar select{display:block;margin-top:4px;font-size:12px}.caseBar small{font-size:11px;white-space:nowrap;color:var(--gold)}.caseInspector{padding:12px 14px;border-top:1px solid var(--edge);background:#102735}.caseInspector strong{font-size:13px;color:var(--gold)}.caseInspector p{font-size:13px;line-height:1.5}#caseSignals{font-size:11px;color:var(--muted)}.signalInspector{padding:12px 14px;background:#102331;border-top:1px solid var(--edge)}.signalInspector>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:12px}.signalInspector b{flex:1}.signalInspector small{font-size:10px;color:var(--muted);line-height:1.5;display:block}.signalTimeline{height:28px;position:relative;background:#071520;margin:9px 0;overflow:hidden;border:1px solid #426273;border-radius:4px}.signalSegment{height:18px;top:4px;position:absolute;background:#e1c27a}.signalSegment.bell{background:#80c7d3}.signalSegment.gong{background:#d097a7}#signalCursor{height:100%;position:absolute;width:2px;background:white;top:0}.sceneSlot{min-width:0}#focusBridge{font-size:11px}.liveReadout{flex-wrap:wrap}.bridgeFocus .masthead,.bridgeFocus .topbar,.bridgeFocus .tabs,.bridgeFocus #settings,.bridgeFocus #panel3>.lessonHead{display:none!important}.bridgeFocus main{padding:0;max-width:none}.bridgeFocus #panel3{border:0;border-radius:0}.bridgeFocus .stage{margin:0;border:0;border-radius:0}.bridgeFocus #panel3 .viewport{height:55dvh;min-height:250px}.bridgeFocus #panel3 .sceneMessage{font-size:11px;max-height:42px;overflow:hidden}.bridgeFocus #panel3 .conning{max-width:none;margin:0;border-radius:0}.bridgeFocus .seaNotice{display:none}.bridgeFocus #panel3 .cameraBar{top:auto;bottom:55px}.bridgeFocus .rotInstrument{transform:scale(.84);transform-origin:top left}
@media(orientation:landscape) and (min-width:650px){.bridgeFocus #panel3{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100dvh;overflow:hidden}.bridgeFocus #panel3 .sceneSlot{height:100dvh;overflow:hidden}.bridgeFocus #panel3 .viewport{height:calc(100dvh - 59px);min-height:0}.bridgeFocus #panel3 .playback{min-height:59px}.bridgeFocus #conning{height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:8px}.bridgeFocus .liveReadout{position:sticky;top:-8px;z-index:3;padding:5px;background:#132e3b}.bridgeFocus .liveReadout button{min-height:32px;padding:5px}.bridgeFocus .wheelRow{height:45px}.bridgeFocus .wheelRow svg{width:43px;height:43px}.bridgeFocus .telegraphTrack{height:205px}.bridgeFocus .controlGrid{gap:5px;grid-template-columns:1.3fr 1fr}.bridgeFocus .helmButtons button{min-height:32px}.bridgeFocus .cameraBar{left:5px;right:5px}.bridgeFocus .sceneBadge{max-width:42%;font-size:9px}}
@media(max-width:600px){.masthead .version{display:none}.masthead>div{min-width:0}.caseBar{gap:6px;padding:8px}.caseBar small{font-size:10px}.caseInspector,.signalInspector{overflow-wrap:anywhere}}
/* 0.11: submitted practice is explicit, immutable, and distinguished from lessons. */
button:disabled{opacity:.5;cursor:not-allowed}#decisionOptions button[aria-pressed="true"]{border-color:var(--gold);background:#3d382c;box-shadow:inset 4px 0 var(--gold)}.reasonLabel{display:block;margin:14px 0 8px;font-size:12px;color:var(--muted)}.reasonLabel textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:10px;background:#081b26;color:#eef5fa;border:1px solid var(--edge);border-radius:7px;font:inherit;resize:vertical}.decisionActions{display:flex;gap:8px;flex-wrap:wrap}#attemptStatus{font-size:12px;color:var(--gold)}.practiceHistory{max-width:1344px;margin:14px auto;padding:14px;background:#102735;border:1px solid var(--edge);border-radius:10px}.practiceHistory summary,.observationLog summary{cursor:pointer;min-height:32px;font-size:13px}.practiceHistory small,.observationLog small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:8px}.historyRow{font-size:12px;border-top:1px solid var(--edge);padding:10px 0}#storageStatus{font-size:12px;color:#ffbfba}.observationLog{padding:10px 0}.observationLog p{font-size:12px}.tableScroll{overflow-x:auto}.tableScroll table{width:100%;border-collapse:collapse;font-size:10px;text-align:right}.tableScroll th,.tableScroll td{padding:7px 4px;border-bottom:1px solid var(--edge);white-space:nowrap}.sceneMetrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}#panel3 .sceneMetrics{display:grid}.bridgeFocus .practiceHistory{display:none!important}.bridgeFocus #panel3 .sceneMetrics{position:relative;font-size:9px;padding:5px;min-height:38px}.bridgeFocus #panel3 .sceneMetrics b{font-size:11px}
@media(max-width:550px){.sceneMetrics{grid-template-columns:repeat(3,minmax(0,1fr))}.decisionActions button{flex:1;min-width:130px}}
@media(orientation:landscape) and (min-width:650px){.bridgeFocus #panel3 .viewport{height:calc(100dvh - 101px)}.bridgeFocus #panel3 .sceneMetrics{height:42px;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.bridgeFocus #panel3 .sceneMetrics span{display:flex;gap:3px;align-items:center;justify-content:center}.bridgeFocus #panel3 .playback{min-height:59px}.bridgeFocus #panel3 .playback label{min-width:0}.bridgeFocus #panel3 .playback select{width:56px}}

/* V0.12 teaching additions — original trainee conning controls retained. */
.vesselLabel{font-size:8px;letter-spacing:.35px;padding:2px 4px;max-width:none;white-space:nowrap;transform:translate(-50%,0);border-radius:3px;background:#102b38b8}
.dayNightBar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#122c3a;flex-wrap:wrap}.dayNightBar>span{font-size:11px;color:var(--muted);margin-right:auto}.dayNightBar button{min-height:34px;font-size:12px;padding:6px 12px}.dayNightBar button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}.dayNightBar small{flex-basis:100%;font-size:10px;color:var(--muted)}
.sceneGeometryNote,.channelGuidance,.windReadout{font-size:11px;line-height:1.5;padding:8px 12px;margin:0;background:#102735;color:#d0e3e9}.windReadout{color:#f0d894;border-top:1px solid var(--gold)}.channelGuidance{color:#abe3d1}
.teachingGuide{padding:15px;background:#122b38;border-top:1px solid var(--edge)}.teachingGuide h2{font-size:16px;margin:6px 0}.teachingGuide>p{font-size:13px;line-height:1.6}.teachingGuide summary{font-size:12px;cursor:pointer;color:var(--gold)}.teachingStep{padding:9px;font-size:12px;line-height:1.6;border-left:2px solid #415d69;margin:8px 0}.teachingStep.active{border-color:var(--gold);background:#213945}
.radarLesson{padding:14px;display:grid;grid-template-columns:1fr 240px;gap:12px;background:#0a211e;border-top:1px solid #386353}.radarLesson h2{font-size:15px}.radarLesson p{font-size:12px;line-height:1.6}.radarLesson canvas{width:100%;max-width:340px;height:auto;justify-self:center}.radarLesson #radarCaution{font-size:11px;color:#99c0b0}
.explanationBoard{padding:28px 20px;background:linear-gradient(130deg,#193948,#0c212f)}.explanationBoard h2{font-size:24px;line-height:1.35;color:#f4dfaa;margin:12px 0 24px}.explanationBoard section{display:flex;gap:16px;align-items:flex-start;border-top:1px solid #46606b;padding:16px 0}.explanationBoard section b{color:var(--gold);font-size:24px}.explanationBoard section p{font-size:15px;line-height:1.7;margin:0}.explanationBoard>p{padding:14px;border-left:3px solid var(--gold);font-size:14px;line-height:1.6}.explanationBoard small{color:var(--muted);font-size:11px}
body[data-lesson-mode=explanation] .stage .viewport,body[data-lesson-mode=explanation] .sceneMetrics,body[data-lesson-mode=explanation] .seaNotice,body[data-lesson-mode=explanation] #sceneGeometryNote,body[data-lesson-mode=explanation] .playback label,body[data-lesson-mode=explanation] #replayLesson{display:none!important}body[data-lesson-mode=explanation][data-tab="1"] .playback{display:none!important}body[data-lesson-mode=explanation][data-tab="3"] .explanationBoard{display:none!important}
.lightControls{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:8px;padding:12px 0;margin-top:10px;border-top:1px solid #536f79}.lightControls label{grid-column:1/-1;font-size:11px;color:var(--muted)}.lightControls select{font-size:11px;margin-top:4px}.lightControls button{font-size:12px}.lightControls p,.lightControls small{grid-column:1/-1;font-size:11px;line-height:1.55;margin:0;color:#b7ced8}#flashLamp{align-self:center;width:22px;height:22px;border-radius:50%;border:2px solid #8ba0aa;background:#243641}#flashLamp[data-active=true]{background:white;box-shadow:0 0 15px white}.debriefTeaching{padding:15px;background:#193444;border:1px solid #9a855b;border-radius:8px}.debriefTeaching h2{font-size:19px;color:var(--gold)}.debriefTeaching h3{font-size:14px}.debriefTeaching p{line-height:1.6}.debriefMetrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}.debriefMetrics div{padding:10px;background:#102634;font-size:12px;line-height:1.7}
#listenInstructor{margin-top:10px;font-size:14px;min-height:42px}.audioStatus{line-height:1.6}
@media(max-width:600px){.radarLesson{grid-template-columns:1fr}.radarLesson canvas{max-width:290px}.debriefMetrics{grid-template-columns:1fr}.explanationBoard{padding:22px 16px}.explanationBoard h2{font-size:22px}}
.bridgeFocus .sceneGeometryNote,.bridgeFocus .dayNightBar,.bridgeFocus .radarLesson{display:none!important}

#panel1 .viewport,#panel2 .viewport{height:clamp(700px,78dvh,900px)}.lessonCameraSlot .cameraBar{position:static;max-width:none;border-radius:0;margin:0;padding:7px 10px;background:#122b39}.lessonCameraSlot:empty{display:none}body[data-lesson-mode=explanation] .lessonCameraSlot{display:none!important}@media(orientation:landscape){#panel1 .viewport,#panel2 .viewport{height:clamp(520px,78dvh,900px)}}

/* V0.13 safety notices stay outside the bridge image and helm. */
.referenceSafetyNotice{padding:12px 14px;margin:8px 0;background:#362519;border:1px solid #d59b54;border-radius:10px;color:#ffe4bc;line-height:1.5;font-size:13px}
#nightTeachingNote{color:#b5ccd7;font-size:11px;margin-top:6px}
body[data-lesson-mode=explanation][data-tab="1"] .playback{display:flex!important}
.explanationVoiceStatus{font-size:12px;line-height:1.5;padding:8px 12px;color:var(--gold)}
.vesselLabel[data-night=true]{margin-top:14px}.vesselLabel[data-night=true]::before{content:"";position:absolute;bottom:100%;left:50%;height:12px;border-left:1px solid #b3e5df78}

/* V0.14: unobstructed scene and prominent controls. */
.lessonCameraSlot{display:flex;align-items:center;gap:8px;padding:8px;background:#0a1f2c;border-bottom:1px solid var(--edge)}
.lessonCameraSlot .rotInstrument{position:static;transform:none!important;flex:0 0 96px;width:96px;padding:6px;align-self:stretch}
.lessonCameraSlot .rotInstrument strong{font-size:24px;line-height:1.15}
.lessonCameraSlot .rotInstrument>span{font-size:8px;letter-spacing:.4px}
.lessonCameraSlot .rotScale{height:6px;margin:4px 0}
.lessonCameraSlot .rotScale i{height:12px}
.lessonCameraSlot .cameraBar,#panel3 .lessonCameraSlot .cameraBar{position:static;flex:1;min-width:0;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 66px;gap:5px;background:none}
.lessonCameraSlot .cameraBar label:first-child{grid-column:1/-1}
.lessonCameraSlot .cameraBar button,.lessonCameraSlot .cameraBar select{min-height:36px;font-size:12px;width:100%}
#panel3 .viewport{height:clamp(370px,57dvh,700px)}
.stage>.sceneMessage{position:static;margin:0;border-radius:0;padding:7px 10px;font-size:11px;border-top:1px solid var(--edge);min-height:30px;max-height:none!important}
#panel3 .sceneBadge{font-size:9px;padding:5px;max-width:60%}
#traineePause.startReady:not(:disabled),#nextDecision,.nextQuestion{background:#31e883;color:#032a18;border:2px solid #9affcb;font-weight:800;box-shadow:0 0 13px #31e88355}
#traineePause.startReady:disabled{background:#234137;color:#c6ded2;box-shadow:none}
#traineePause.pauseReady{background:#d6ac50;color:#241b06;border:2px solid #ffe0a0;font-weight:700}
#traineePause{min-width:90px}
#panel3 .playback{justify-content:flex-end}
#panel3 .playback #audioEnable{flex:0 0 auto;min-width:115px}
#panel3 .sceneMetrics{padding:7px 8px}
#panel3 .liveReadout{position:sticky;top:0;z-index:8;background:#132e3b;padding:5px 0}
#panel3 #signalInspector{padding:7px 10px}
#panel3 #signalInspector .signalTimeline{height:20px;margin:6px 0}
#panel3 #signalInspector .signalSegment{top:3px;height:12px}
#panel3 #signalInspector small{font-size:9px}
body[data-tab="3"][data-lesson-mode="explanation"] .stage{display:none}
body[data-tab="3"][data-trainee-kind="maneuver"] .sceneGeometryNote{font-size:10px;padding:6px 10px}
.bridgeFocus #panel3 .viewport{height:clamp(350px,53dvh,680px);min-height:0}
.bridgeFocus .lessonCameraSlot .rotInstrument{transform:none}
.bridgeFocus #panel3 .stage>.sceneMessage{max-height:none}
@media(orientation:landscape) and (min-width:650px){
 .bridgeFocus #panel3 .stage{height:100%;display:flex;flex-direction:column}
 .bridgeFocus #panel3 .lessonCameraSlot{flex:0 0 71px;padding:5px}
 .bridgeFocus #panel3 .lessonCameraSlot .cameraBar{display:flex;align-items:center}
 .bridgeFocus #panel3 .lessonCameraSlot .cameraBar label{flex:1}
 .bridgeFocus #panel3 .lessonCameraSlot .cameraBar button{width:auto}
 .bridgeFocus #panel3 .viewport{height:auto;flex:1;min-height:100px}
 .bridgeFocus #panel3 .sceneMetrics{flex:0 0 42px}
 .bridgeFocus #panel3 .playback{flex:0 0 46px;min-height:46px}
 .bridgeFocus #panel3 .sceneGeometryNote,.bridgeFocus #panel3 #signalInspector{display:none}
 .bridgeFocus #panel3 .stage>.sceneMessage{min-height:25px;font-size:10px;padding:4px 8px}
}
.answerLabel{display:block;font-size:10px;letter-spacing:.6px;margin-bottom:6px}
#decisionOptions button,.quizOptions button{text-align:left;padding:13px 14px;line-height:1.4}
button.answerCorrect:disabled{opacity:1!important;background:#0f5035!important;border:2px solid #72f2b0!important;color:#eafff3}
button.answerWrong:disabled{opacity:1!important;background:#5a1c2c!important;border:2px solid #ff9aae!important;color:#ffedf0}
.quizOptions{display:grid;gap:10px}.ruleQuiz{border:1px solid var(--edge);border-radius:12px;margin-top:16px;background:var(--panel)}
.questionProgress{font-size:12px;color:var(--cyan);font-weight:700}
.quizFeedback{font-size:14px;line-height:1.6}
.voiceControls{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:8px;margin-top:12px}
.voiceControls label{font-size:11px;color:var(--muted)}.voiceControls select{margin-top:5px;font-size:12px}
.instructorChapters{display:grid;gap:12px;margin-top:18px}
.instructorChapter{padding:15px;border:1px solid #315165;border-left:3px solid var(--gold);border-radius:7px;background:#0b202c}
.instructorChapter h3{font-size:15px;color:#f2dca7;margin:0 0 9px}.instructorChapter p{font-size:14px;line-height:1.7}
.instructorChapter button{font-size:12px;min-height:42px}

/* V0.15: scroll-first interaction and accessible engine control. */
#bridge{touch-action:pan-y pinch-zoom}#bridge.cameraInteractive{touch-action:none}
.telegraphTrack{height:396px;touch-action:pan-y}.orderLabels{inset:0 44px 0 0;display:grid;grid-template-rows:repeat(9,44px)}.orderLabels button{min-height:44px;height:44px;font-size:11px;text-align:right;padding:4px 8px;touch-action:manipulation}.orderLabels button.selected{color:#f6e5b4;background:#34464e;border-radius:5px}.gateRail{top:22px;bottom:22px;right:15px}.gateHandle{right:1px;transform:translateY(-50%);pointer-events:none;width:47px;height:34px;z-index:2}#telegraphSlider{position:absolute;right:0;top:0;bottom:0;width:48px;z-index:3;touch-action:none;border-radius:8px}#telegraphSlider:focus-visible{outline:3px solid #92f1be}#telegraphSlider[aria-disabled=true]{opacity:.5}
.appliedSetup{margin:0;padding:8px 16px;color:#bdd9d5;background:#102b31;font-size:12px;line-height:1.5}.navInstruments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:12px;background:#091f2a;border-bottom:1px solid #36566a}.navInstruments span{font-size:10px;color:#a5bfcc}.navInstruments b{display:block;font-size:19px;color:#eaf8f3;font-variant-numeric:tabular-nums;white-space:nowrap}.navInstruments small{grid-column:1/-1;line-height:1.5;color:#b0c2cc;font-size:11px}.cameraBar #gestureHint{grid-column:1/-1;font-size:10px;line-height:1.4;color:#b7ccd7}.cameraBar #cameraInteraction{grid-column:1/-1}.controlStatus{font-size:12px;line-height:1.5;margin:10px 0 14px;color:#bce9d0}#restartFinished{background:#12834c;color:white;border:2px solid #7ee9ac;box-shadow:0 0 14px #2acc7055}.scenarioBar{padding:12px;background:#152e3c}.scenarioBar label{display:block;font-size:12px;color:#e3c477}.scenarioBar select{width:100%;margin-top:6px}.scenarioBar p{font-size:12px;line-height:1.5;margin:8px 0 0}.riskPanel{padding:14px;background:#182e36;border-top:2px solid #dbb55d}.riskPanel h2{font-size:16px;color:#f2cb78;margin:0 0 10px}.riskContact{padding:10px 0;border-top:1px solid #36566a;font-size:12px;line-height:1.7}.riskContact strong{display:block;color:#ffdb91}.riskContact[data-alert=true] strong{color:#ffafa9}.riskPanel p{font-size:12px;line-height:1.6;margin-bottom:0}.accidentPanel{padding:16px;background:#491c2a;border:2px solid #e58b91;font-size:14px;line-height:1.6}.accidentPanel b{display:block;font-size:18px;color:#ffcebe}.vesselLabel.traffic{color:#ffc79b;border-color:#ba8353}.sceneBadge{max-width:60%;font-size:10px}#panel1 .viewport,#panel2 .viewport{height:clamp(400px,58dvh,700px)}
body[data-lesson-mode=explanation] .navInstruments,body[data-lesson-mode=explanation] .riskPanel{display:none!important}
@media(max-width:420px){.controlGrid{grid-template-columns:minmax(0,1.2fr) minmax(140px,1fr);gap:8px}.navInstruments b{font-size:16px}.telegraph{padding:8px 5px}.orderLabels button{font-size:9px;padding-left:0}.helmButtons{grid-template-columns:1fr}.liveReadout span{font-size:11px}}
@media(orientation:landscape) and (min-width:650px){.bridgeFocus #panel3{height:auto;min-height:100dvh;overflow:visible}.bridgeFocus #panel3 .sceneSlot{height:auto;overflow:visible}.bridgeFocus #panel3 .stage{height:auto}.bridgeFocus #panel3 .viewport{height:65dvh;flex:none}.bridgeFocus #conning{height:auto;overflow:visible}.bridgeFocus .telegraphTrack{height:396px}.bridgeFocus .riskPanel{font-size:11px}.bridgeFocus .navInstruments small{display:none}}

.viewport[data-accident=true]{outline:3px solid #f87e78;outline-offset:-3px}.viewport[data-accident=true] .sceneBadge{background:#8b2232;color:white;font-weight:700}

/* V0.16: instruction stays beside/below the image, never over the signal. */
.sceneHeader{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;background:#102c3b;color:#f0dcad;font-size:11px;line-height:1.5}
.sceneHeader .sceneBadge,#panel3 .sceneHeader .sceneBadge{position:static;display:inline-block;max-width:none;transform:none;margin:0;font-size:10px}
.instructorCuePanel{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px;padding:16px;background:#122f3e;border-top:2px solid #d7b45d}
.instructorCuePanel b{font-size:15px;color:#f5d887}.instructorCuePanel p{font-size:14px;line-height:1.7;margin:9px 0}.cueActions{display:flex;gap:6px;flex-wrap:wrap}.cueActions button{min-height:44px;font-size:12px}.instructorCuePanel svg{width:100%;height:auto}
.viewport[data-detail=true] .vesselLabel{display:none!important}
body[data-tab="3"] .liveReadout{position:static!important}
#panel3 .viewport{height:clamp(400px,60dvh,800px)}
body[data-lesson-mode=explanation] .sceneHeader{display:none}
@media(max-width:540px){.instructorCuePanel{grid-template-columns:minmax(0,1fr)}#sectorDiagram:not(:empty){width:170px;justify-self:center}.cueActions button{flex:1;min-width:95px}}
@media(orientation:landscape) and (max-height:500px){#panel1 .viewport,#panel2 .viewport,#panel3 .viewport{height:72dvh;min-height:240px}}

.viewport{scroll-margin-top:100px}.navInstruments{grid-template-columns:repeat(3,minmax(0,1fr))}

.distressVideos{padding:18px;background:#112c3a;border-bottom:2px solid #d7b45d}.distressVideos h2{color:#f4d68e;font-size:21px}.distressVideos article{padding:14px;margin:12px 0;background:#091d29;border:1px solid #526a77;border-radius:10px}.distressVideos h3{font-size:17px}.distressVideos p{font-size:13px;line-height:1.6}.distressVideos button{min-height:48px;background:#734923;border-color:#e7bf6c;color:#fff}

.demonstrationHelm{display:grid;grid-template-columns:1fr 64px 64px;align-items:center;gap:8px;background:#102b36;padding:12px;border-bottom:1px solid #375665}.demonstrationHelm b{font-size:12px;color:#f3d493}.demonstrationHelm p{font-size:12px;line-height:1.5;margin:7px 0}.demonstrationHelm small{font-size:10px;color:#a7c0c9}.demonstrationHelm svg{width:64px;height:64px}

/* V0.18 NAVIMARE development: scenario chooser + live E15.3 radar; no official logo inferred. */
.r4-radar{height:100%;display:flex;flex-direction:column;background:#071412;color:#96ff9c}.r4-radar-top{display:flex;justify-content:space-between;gap:6px;padding:4px 7px;font:10px monospace;background:#132523}.r4-radar-main{flex:1;min-height:190px;display:grid;grid-template-columns:minmax(170px,1fr) 145px}.r4-radar-scope{position:relative;min-height:180px;overflow:hidden;background:#010a07}#r4RadarCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.r4-radar-controls{padding:5px;background:linear-gradient(135deg,#34474d,#192e35);overflow:auto}.r4-radar-controls select{padding:3px;width:100%;font-size:9px;background:#0c252d}.r4-radar-controls label{font:8px monospace;display:block;margin-bottom:4px;color:#bdd9d8}.r4-radar-knobs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:5px 0}.r4-knob-label{text-align:center;font:8px monospace;color:#c6e2df}.r4-knob{width:34px;height:34px;border:2px solid #6a8793;border-radius:50%;margin:3px auto;background:radial-gradient(circle at 35% 28%,#7da5b5,#264957 60%,#0a1e27);box-shadow:2px 3px 5px #0009,inset 1px 1px 2px #b8d2d5;position:relative;touch-action:none;cursor:ns-resize}.r4-knob::after{content:'';position:absolute;left:calc(50% - 1px);top:3px;width:3px;height:10px;background:#f0ffc1;transform-origin:50% 12px;transform:rotate(var(--knob,0deg));box-shadow:0 0 3px #efff9c}.r4-knob-label output{color:#b5ff7e}.r4-radar-keys{display:grid;grid-template-columns:1fr 1fr;gap:4px}.r4-radar-keys button{font-size:8px;padding:5px 2px;border-radius:3px;background:linear-gradient(#45606a,#233e49);border:1px solid #647e87;color:#e3efe6;box-shadow:0 2px 3px #0008}.r4-radar-keys button.active{background:linear-gradient(#85c849,#2e733b);border-color:#a9dc6f;color:#fff}.r4-radar-bottom{background:#0a201c;font:9px/1.4 monospace;padding:4px 7px;min-height:35px;border-top:1px solid #467563}.r4-radar-bottom .danger{color:#ff7676}.r4-radar-settings{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}.r4-radar-settings input{width:100%;padding:3px;font-size:10px}.r4-radar-tip{font:8px monospace;color:#90b7ad}.r4-dock.expanded .r4-radar-main{grid-template-columns:minmax(0,1fr) 255px}.r4-dock.expanded .r4-radar-controls{padding:12px}.r4-dock.expanded .r4-knob{width:55px;height:55px}.r4-dock.expanded .r4-knob::after{height:16px;top:4px;transform-origin:50% 22px}.r4-dock.expanded .r4-radar-controls label,.r4-dock.expanded .r4-knob-label,.r4-dock.expanded .r4-radar-tip{font-size:11px}.r4-dock.expanded .r4-radar-keys button{padding:10px;font-size:11px}.r4-dock.expanded .r4-radar-bottom{font-size:12px;padding:8px}.r4-dock.expanded .r4-radar-top{font-size:13px;padding:8px}

.navimareScenarioChips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px 10px;background:#112b37;border-bottom:1px solid #4e7684}
.navimareScenarioChips button{padding:7px 5px;min-height:54px;font-size:10px;line-height:1.25;background:#1d3947;color:#e8f1f5;border:1px solid #467888;text-align:center}
.navimareScenarioChips button[aria-pressed=true]{border:2px solid #f1d28a;background:#3a4240;color:#fff4cf}
.navimareScenarioChips:empty{display:none}
.navimareRadarDock{min-height:330px;height:auto;padding:0;background:#081b1e;border-top:2px solid #b1e3b6;border-bottom:2px solid #52776b}
.navimareRadarDock[hidden]{display:none!important}
.navimareRadarDock .r4-radar-main{grid-template-columns:minmax(0,1fr) minmax(130px,175px);min-height:285px}
.navimareRadarDock .r4-radar-scope{min-height:285px;height:350px}
.navimareRadarDock .r4-radar-top{font-size:11px}
.navimareRadarDock .r4-radar-settings{padding:4px}
.navimareRadarDock .r4-knob{width:39px;height:39px}
#panel3 .navimareRadarDock{order:0}
#panel3 .sceneMessage,#panel3 #teachingGuide,#panel3 .riskPanel,#panel3 .radarLesson,#panel3 #sceneGeometryNote,#panel3 #cameraScopeNote,#panel3 #nightTeachingNote,#panel3 .seaNotice,#panel3 .channelGuidance,#panel3 #instructorCuePanel,#panel3 .dayNightBar,#panel3 .demonstrationHelm,#panel3 .sceneHeader,#panel3 .lessonHead .eyebrow,#panel3 #taskCaption{display:none!important}
#panel3 .navimareScenarioChips{padding:6px}
#panel3 .playback #playLesson,#panel3 .playback #replayLesson,#panel3 .playback label{display:none!important}
#panel3 .sceneSlot .viewport{height:clamp(330px,51dvh,630px)}
.vesselLabel.target,.vesselLabel.traffic{transform:translate(-50%,-105%);margin:0!important;padding:2px 5px;pointer-events:none}
#targetLabel{white-space:nowrap;font-size:10px;color:#ffe1af;border:1px solid #8b713e;background:#102532e3;z-index:5}
.dangerRiskIndicator{padding:13px;background:#860d18;color:white;text-align:center;font-weight:900;font-size:20px;border:2px solid #ffd1ce;letter-spacing:1.2px}
.dangerRiskIndicator[hidden]{display:none!important}.dangerRiskIndicator.active{animation:navimare-danger-blink .68s step-end infinite}
@keyframes navimare-danger-blink{0%,100%{background:#ad0915;color:white}50%{background:#3e080b;color:#fff0c0}}
.subrulePanel{padding:12px;background:#173241;border-left:4px solid #ddbd74;color:#dcedf0;font-size:12px;line-height:1.55}
.subrulePanel[hidden]{display:none!important}.subrulePanel p{margin:7px 0}
.navimareRiskNote{padding:8px 12px;font-size:11px;color:#ffdfce;background:#491d29}
@media(max-width:560px){.navimareScenarioChips button{font-size:9px;min-height:61px}.navimareRadarDock .r4-radar-main{grid-template-columns:minmax(0,1fr)}.navimareRadarDock .r4-radar-scope{min-height:300px;height:310px}.navimareRadarDock .r4-radar-controls{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px}.navimareRadarDock .r4-radar-knobs,.navimareRadarDock .r4-radar-keys,.navimareRadarDock .r4-radar-settings{grid-column:1/-1}.navimareRadarDock .r4-radar-controls label{font-size:10px}.navimareRadarDock .r4-radar-keys button{font-size:10px;min-height:44px}}
.navimareTrainingChart{padding:6px;background:#112e3d;border-top:1px solid #6ba4b8}
.navimareTrainingChart[hidden]{display:none!important}
.navimareTrainingChart canvas{display:block;width:100%;height:170px;border:1px solid #8aadb0;background:#235d78}
#navimareChartReadout{padding:8px;font-size:10px;line-height:1.4;color:#dcf8ff;font-weight:700}
#navimareChartReadout.danger{color:#ffb2ae;background:#5b151d}
#panel3 .subrulePanel,#panel3 .navimareRiskNote{display:none!important}

.navimareTSSLabel{font:900 14px/1.5 Arial,sans-serif;color:#f8cfff;background:#69227d;text-align:center;letter-spacing:1px;border:2px solid #d9b0ee;padding:8px}
.navimareTSSLabel:not([hidden]){animation:navimare-tss-pulse 1.5s ease-in-out infinite}
.navimareTSSLabel[hidden]{display:none!important}
@keyframes navimare-tss-pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* NAVIMARE trainee layout: rule + three scenarios + one start control, then bridge above radar. */
#panel3 #scenarioBar,#panel3 #caseBar,#panel3 .navInstruments,#panel3 .sceneHeader,
#panel3 #sceneGeometryNote,#panel3 #cameraScopeNote,#panel3 #nightTeachingNote,#panel3 #seaNotice,
#panel3 .sceneMetrics,#panel3 #referenceSafetyNotice,#panel3 .playback,#panel3 #controlStatus,
#panel3 .instructorCuePanel,#panel3 #instructorChapters,#panel3 .sceneMessage,
#panel3 #teachingGuide,#panel3 #radarLesson,#panel3 #riskPanel,#panel3 #signalInspector,
#panel3 .dayNightBar,#panel3 .demonstrationHelm{display:none!important}
#panel3 #traineePause{display:none!important}
#panel3 .navimareQuickRow{display:flex;gap:8px;justify-content:center;padding:10px 12px;background:#12303b}
#panel3 .navimareQuickRow[hidden],#panel1 .navimareQuickRow,#panel2 .navimareQuickRow{display:none!important}
#panel3 #navimareQuickStart{background:#138465;color:#fff;border:2px solid #94edc5;border-radius:7px;font-size:15px;font-weight:bold;padding:12px 24px;min-height:49px;width:100%;max-width:360px}
#panel3 #navimareQuickStart:disabled{filter:grayscale(1);opacity:.55}
#panel3 .navimareScenarioChips{padding:6px 8px;gap:6px;background:#112b37}
#panel3 .navimareScenarioChips button{font-size:11px;min-height:56px;padding:8px 3px}
#panel3>.lessonHead{padding:11px 14px 7px}
#panel3>.lessonHead h2{font-size:clamp(18px,4vw,23px)}
#panel3 .sceneSlot{margin-top:0}
#panel3 .navimareRadarDock{border-top:3px solid #76d1a6}
@media(max-width:450px){#panel3 .navimareScenarioChips button{font-size:10px;min-height:58px}#panel3 .navimareRadarDock .r4-radar-scope{min-height:310px}}

/* NAVIMARE V0.19 official-source branding and accessible teaching layout */
.masthead{height:auto;min-height:82px;background:#f7f9fa;color:#142b49;border-bottom:3px solid #ef1a24;padding-top:5px;padding-bottom:5px}
.masthead .navimareOfficialLockup{display:block;max-width:122px;object-fit:contain;height:64px;width:122px;background:#fff;flex:0 0 auto}
.masthead .navimareBrandCaption b{font-size:16px;color:#102b4b;letter-spacing:.6px;line-height:1.2}
.masthead .navimareBrandCaption small{font-size:9px;letter-spacing:.2px;color:#526983}
.masthead .version{color:#34526a;font-size:9px;letter-spacing:0}
.masthead button{background:#102b4b;color:#fff}
.nm-v019-about-logo{display:block;width:min(100%,350px);height:auto;background:white;padding:7px;border-radius:6px;margin:8px auto 18px}
.nmV019ScenarioCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 6px}
.nmV019ScenarioCards button,.navimareScenarioChips .nm-v019-scenario{min-height:54px;padding:7px;font-size:11px;line-height:1.25;text-align:left;background:#153949;border:1px solid #5e8192;color:#f2faf9;border-radius:7px}
.nmV019ScenarioCards button[aria-pressed=true],.navimareScenarioChips .nm-v019-scenario[aria-pressed=true]{border:2px solid #f3c86b;background:#335664;color:#fff9d6}
.nmV019ScenarioNote{font-size:12px;line-height:1.45;color:#d7e7eb;background:#17303d;padding:8px 11px;border-left:3px solid #7dc9e6;margin:6px 0}
.nmV019ScenarioNote[hidden]{display:none!important}
#panel3 .nmV019ScenarioNote{display:none!important}
.nmV019Hazard{padding:13px 15px;background:#390b10;color:#fff2ee;border:2px solid #ff6e70;margin:8px 10px;border-radius:8px;line-height:1.43}
.nmV019Hazard[hidden]{display:none!important}.nmV019Hazard h2{font-size:17px;letter-spacing:.5px;margin:0 0 7px;color:#fff;text-shadow:0 0 4px #ff1d2e;animation:nmV019Warning .9s step-end infinite}
.nmV019Hazard strong{display:block;font-size:11px;color:#ffb8aa;letter-spacing:.8px;margin-top:7px}
.nmV019Hazard p{font-size:12px;margin:3px 0 6px;color:#fff6f2}
.nmV019Hazard small{font-size:10px;color:#d5bdb9}
#panel2:not([hidden]) #wrongDemo{background:#ac1421!important;color:#fff!important;border:2px solid #ffad9e;animation:nmV019Warning 1s step-end infinite;font-weight:900}
#panel2:not([hidden]) #wrongDemo[aria-pressed=true]{background:#f00518!important;color:#fff!important;box-shadow:0 0 14px #ec091a}
@keyframes nmV019Warning{0%,100%{filter:brightness(1);outline:2px solid #ffada5}50%{filter:brightness(.60);outline:2px solid #f50520}}
@media(prefers-reduced-motion:reduce){.nmV019Hazard h2,#panel2:not([hidden]) #wrongDemo{animation:none!important;outline:2px solid #ffada5}}
.nmV019LightLegend{padding:12px 15px;background:#152f43;color:#f2f7f8;border-top:2px solid #fa4956;line-height:1.35}
.nmV019LightLegend[hidden]{display:none!important}.nmV019LightLegend b{font-size:13px;letter-spacing:.6px;color:#f7d9a2}
.nmV019LightLegend p{font-size:11px;margin:5px 0 8px;color:#dcebf1}
.nm-v019-lights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}
.nm-v019-lights-grid span{padding:7px;border:1px solid #517587;background:#0c2435;font-size:11px;line-height:1.35}
.nmV019LightLegend small{font-size:9px;color:#b3cbd8}
/* A previous detail-view-only rule can suppress names: restore all visible targets
   in ordinary bridge and encounter camera views, above the actual projected hull. */
.viewport:not([data-detail=true]) .vesselLabel:not([hidden]){display:block!important;z-index:12!important;transform:translate(-50%,-105%)!important;white-space:nowrap;background:#123044e8;font-size:10px;max-width:none;color:#ffe6bb}
.viewport:not([data-detail=true]) .vesselLabel[data-night=true]{margin-top:0!important}
@media(max-width:540px){.masthead{min-height:72px;padding-left:5px;padding-right:5px;gap:5px}.masthead .navimareOfficialLockup{width:86px;height:53px}.masthead .navimareBrandCaption b{font-size:12px}.masthead .navimareBrandCaption small{font-size:8px;letter-spacing:0}.masthead .version{font-size:7px}.nmV019ScenarioCards{gap:4px}.nmV019ScenarioCards button{font-size:10px;padding:5px;min-height:60px}.nm-v019-lights-grid{grid-template-columns:1fr}}

/* V0.19 verified correction: hazard is OUTSIDE the two-button choicebar. */
#panel2 .choicebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#panel2 .choicebar button{width:100%;min-height:58px;white-space:normal;word-break:normal}
#panel2 .nmV019Hazard{display:block;width:auto;margin:8px 0 12px;max-width:100%;box-sizing:border-box}
#panel2 .nmV019Hazard[hidden]{display:none!important}
.nmV019LightHud{position:absolute;right:6px;top:38px;z-index:15;pointer-events:none;width:min(51%,258px);background:#0c273be5;border:1px solid #c4a771;border-radius:6px;color:#f6e9c9;padding:7px 9px;font-size:9px;line-height:1.35;box-shadow:0 3px 9px #071b2f8f;max-height:78px;overflow:hidden}
.nmV019LightHud strong{display:block;color:#ffdf9c;font-size:10px;margin-bottom:3px;letter-spacing:.05em}
.nmV019LightHud[hidden]{display:none!important}
.viewport:not([data-detail=true]) .vesselLabel.target:not([hidden]){z-index:17!important;display:block!important}
@media(max-width:540px){#panel2 .choicebar{gap:7px}#panel2 .choicebar button{padding:7px;font-size:11px}.nmV019LightHud{right:4px;top:31px;width:47%;font-size:8px;max-height:71px}}

/* Display R2: same-sized scenario and radar panes, with controls below. */
#nmBridgeWorkspace{--nm-layout-revision:r2}
#nmCameraButtons{display:none}
.lessonCameraSlot .nmNativeCamera{grid-column:1/-1}
#nmBridgeWorkspace,.nmScenePane{display:contents}
.nmDisplayBuild{padding:7px 12px;background:#102b3b;color:#b8dfdc;font-size:11px;border-top:1px solid #42616b}
@media(min-width:768px){
 main{max-width:2000px;padding-left:8px;padding-right:8px}
 .topbar,.tabs,.settings{max-width:2000px}
 .stage{margin-left:6px;margin-right:6px}
 #nmBridgeWorkspace{display:block;--nm-pane-height:clamp(360px,min(74dvh,48vw),820px)}
 #nmBridgeWorkspace.nmHasRadar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;align-items:start;background:#102633}
 #nmBridgeWorkspace .nmScenePane{display:block;min-width:0;background:#102633}
 #nmBridgeWorkspace .viewport,#panel3 .sceneSlot #nmBridgeWorkspace .viewport{height:var(--nm-pane-height);min-height:0}
 #nmBridgeWorkspace .sceneHeader,#panel3 #nmBridgeWorkspace .sceneHeader{display:flex!important;min-height:44px;height:44px;padding:6px 10px;font-size:12px;overflow:hidden}
 #nmBridgeWorkspace .sceneHeader #sceneBadgeSlot{min-width:0;max-width:65%}
 #nmBridgeWorkspace .sceneHeader .sceneBadge{font-size:10px;max-width:none;padding:0;white-space:nowrap;background:none}
 #nmBridgeWorkspace #navimareRadarHost{min-width:0;border-top:0;margin:0;scroll-margin-top:90px}
 #nmBridgeWorkspace .r4-radar{height:auto}
 #nmBridgeWorkspace .r4-radar-top{height:44px;min-height:44px;align-items:center;padding:6px 10px;font-size:11px;flex-wrap:wrap}
 #nmBridgeWorkspace .r4-radar-main{display:block;min-height:0;height:auto;flex:none}
 #nmBridgeWorkspace .r4-radar-scope{height:var(--nm-pane-height);min-height:0}
 #nmBridgeWorkspace .r4-radar-bottom{padding:9px;font-size:11px;min-height:46px;overflow-wrap:anywhere}
 #nmBridgeWorkspace .nmRadarDrawer{background:#163541;border-top:1px solid #577783}
 #nmBridgeWorkspace .nmRadarDrawer>summary{padding:12px;font-size:13px;cursor:pointer;min-height:44px;color:#e1eeee}
 #nmBridgeWorkspace .r4-radar-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:10px;min-width:0}
 #nmBridgeWorkspace .r4-radar-controls>select{align-self:end;margin-bottom:4px}
 #nmBridgeWorkspace .r4-radar-knobs,#nmBridgeWorkspace .r4-radar-keys,#nmBridgeWorkspace .r4-radar-settings,#nmBridgeWorkspace .r4-radar-tip{grid-column:1/-1}
 #nmBridgeWorkspace .r4-radar-knobs{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 #nmBridgeWorkspace .r4-radar-keys{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 #nmBridgeWorkspace .r4-radar-controls select,#nmBridgeWorkspace .r4-radar-controls input,#nmBridgeWorkspace .r4-radar-keys button{min-height:44px;font-size:11px;min-width:0}
 #nmBridgeWorkspace .r4-radar-controls label,#nmBridgeWorkspace .r4-knob-label{font-size:10px}
 #nmBridgeWorkspace .r4-radar-tip{font-size:11px;line-height:1.5}
 #nmBridgeWorkspace .r4-knob{width:42px;height:42px}
 #lessonCameraSlot .cameraBar{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
 #lessonCameraSlot .cameraBar>button,#lessonCameraSlot .cameraBar>label select{min-height:44px}
 #lessonCameraSlot .nmNativeCamera{display:none}
 #lessonCameraSlot #nmCameraButtons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-column:1/-1;gap:6px}
 #lessonCameraSlot #nmCameraButtons button{min-height:44px;font-size:13px;padding:7px 5px}
 #lessonCameraSlot #nmCameraButtons button[aria-pressed=true]{background:#07756e;border:2px solid #9aeadc;color:#fff;box-shadow:inset 0 -3px #9aeadc}
 #lessonCameraSlot #cameraInteraction{grid-column:5;grid-row:2}
 #lessonCameraSlot #nmBinoculars{grid-column:6;grid-row:2}
 #lessonCameraSlot #gestureHint{grid-column:1/-1;grid-row:3}
 #panel3 .conning{max-width:none;margin:0 6px 12px}
 body.bridgeFocus #panel3{display:block;height:auto;overflow:visible}
 body.bridgeFocus #panel3 .sceneSlot{height:auto;overflow:visible}
 body.bridgeFocus #conning{height:auto;overflow:visible}
}
@media(min-width:768px) and (max-width:900px){
 #lessonCameraSlot #nmCameraButtons{grid-template-columns:repeat(3,minmax(0,1fr))}
 #nmBridgeWorkspace .r4-radar-knobs{grid-template-columns:repeat(3,minmax(0,1fr))}
 #nmBridgeWorkspace .r4-radar-keys{grid-template-columns:repeat(3,minmax(0,1fr))}
}
body[data-lesson-mode=explanation] #nmBridgeWorkspace{display:none}

/* R3: visible camera controls below Tab 3's scene on every screen. */
#nmBridgeWorkspace{--nm-layout-revision:r3}
#lessonCameraSlot{min-width:0;align-items:flex-start}
#lessonCameraSlot .cameraBar,#panel3 #lessonCameraSlot .cameraBar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;border:0}
#lessonCameraSlot .nmNativeCamera{display:none}
#lessonCameraSlot #nmCameraButtons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-column:1/-1;gap:6px}
#lessonCameraSlot #nmCameraButtons button,#lessonCameraSlot .cameraBar>button,#lessonCameraSlot .cameraBar select{min-height:44px;width:100%;font-size:12px;padding:8px 5px}
#lessonCameraSlot #nmCameraButtons button[aria-pressed=true]{background:#07756e;border:2px solid #9aeadc;color:white;box-shadow:inset 0 -3px #9aeadc}
#lessonCameraSlot .nmCameraHeading{grid-column:1/-1;grid-row:1;font-size:11px;font-weight:700;letter-spacing:1px;color:#b9e5eb}
#lessonCameraSlot #nmCameraButtons{grid-row:2}
#lessonCameraSlot #nmRotateLeft,#lessonCameraSlot #nmRotateRight,#lessonCameraSlot #ahead,#lessonCameraSlot #zoomIn,#lessonCameraSlot #zoomOut,#lessonCameraSlot #cameraInteraction,#lessonCameraSlot #nmBinoculars{grid-column:auto;grid-row:auto}
#lessonCameraSlot #ahead{grid-column:span 2}
#lessonCameraSlot #cameraInteraction{grid-column:span 2}
#lessonCameraSlot .cameraBar>label:not(.nmNativeCamera){grid-column:span 2;min-width:0}
#lessonCameraSlot #gestureHint{grid-column:1/-1;grid-row:auto;font-size:11px;line-height:1.5}
#panel3 #lessonCameraSlot{display:flex;padding:12px;border-top:1px solid #36566a;border-bottom:0}
#panel3 #lessonCameraSlot .rotInstrument{display:none}
#panel3 #lessonCameraSlot #nmBinoculars{grid-column:span 2}
#bridge{cursor:grab}
#bridge:active{cursor:grabbing}
@media(min-width:1000px){body:not([data-tab="3"]) #lessonCameraSlot #nmCameraButtons{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:767px){#lessonCameraSlot{display:block}#lessonCameraSlot .rotInstrument{display:none}#panel3 #lessonCameraSlot{display:block}#panel3 .sceneHeader{display:flex!important;padding:9px;gap:8px;font-size:11px}}