.l2-learning-step{background:#fff;border:1px solid #d2dce5;border-radius:14px;padding:22px;margin:22px 0;scroll-margin-top:18px;min-width:0}
.l2-learning-step>h2{margin:0 0 12px;font-size:1.35rem;color:#173b59}
.l2-learning-step .lesson-step{display:block;font:800 clamp(1.65rem,3vw,2.25rem)/1.15 system-ui,sans-serif;letter-spacing:.055em;margin-bottom:8px}
.step-intro{line-height:1.6;max-width:1000px;color:#34495a;margin:0 0 20px}
.l2-step-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.l2-step-nav a,.step-next a{color:#173b59;font-weight:700}.l2-step-nav a{padding:10px 14px;background:#edf5fc;border-radius:7px}
.l2-learning-step .loto-col{width:100%;max-width:none}.l2-learning-step .station-wrap{margin:10px 0;max-width:250px}.l2-learning-step .steps-col{display:block}
.l2-learning-step>.step{max-width:760px}.l2-learning-step>.line-card{margin-top:18px}.l2-learning-step .step-num[hidden]{display:none}
.step-next{padding:12px 16px;background:#edf5fc;border-radius:8px;line-height:1.8;margin:18px 0 0}
.proc-msg:not(:empty){position:sticky;bottom:8px;z-index:900;background:#fff;border:2px solid #315775;box-shadow:0 3px 16px #0003;padding:12px 18px;border-radius:9px;max-width:900px;margin:12px auto}
@media(max-width:720px){.l2-learning-step{padding:14px 10px}.l4-shell{padding:12px 10px}.l2-learning-step .bench{gap:16px}.l2-learning-step .meter-col{max-width:100%}.l2-learning-step .line-card{min-width:0}.l2-step-nav a{padding:8px 10px}}
/* Keep simulated equipment at a believable size inside full-width task sections. */
.l2-learning-step>.line-card{box-sizing:border-box;width:100%;max-width:760px;margin:18px auto;min-width:0}
.l2-learning-step .pv-bezel{box-sizing:border-box}
.l2-learning-step #stVerify{box-sizing:border-box;max-width:760px}
/* A compact lockout work area: station beside the verification checklist. */
#l2Step3 .loto-col{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px 24px;max-width:960px;margin:0 auto;align-items:start}
#l2Step3 .loto-col>div:not(.station-wrap):not(.steps-col){grid-column:1/-1}
#l2Step3 .station-wrap{width:280px;max-width:100%;margin:0}
#l2Step3 .steps-col{margin:0;align-self:center}
#l2Step3 #haspHint{text-align:left}
@media(max-width:720px){#l2Step3 .loto-col{grid-template-columns:minmax(0,1fr)}#l2Step3 .station-wrap{width:260px;margin:0 auto}#l2Step3 .steps-col{width:100%}}
/* Safety is a prominent workstation, with an explicit reading-by-reading checklist. */
#l2Step3 .loto-col{grid-template-columns:440px minmax(0,1fr);max-width:1180px;gap:20px 30px}
#l2Step3 .station-wrap{width:440px;max-width:100%;align-self:start}
#l2Step3 .steps-col{align-self:start}
#stVerify .step-title{font-size:1.15rem;color:#173b59;margin-bottom:12px}
#verifyList{padding:0;list-style:none;margin:0 0 16px;font-size:.9rem;line-height:1.5;max-height:560px;overflow:auto}
#verifyList li{padding:12px;margin:0 0 8px;border:1px solid #d5e0e9;border-radius:8px}
#verifyList .verify-summary{background:#eaf4ff;color:#173b59;border-color:#9abddc;position:static}
#verifyList .verify-summary strong{font-size:1.05rem}#verifyList .verify-summary p{margin:8px 0}#verifyList a{color:#173b59;font-weight:800}
#verifyList .verify-warning{background:#fff4d9;color:#614600}
#verifyList .verify-reading{display:flex;gap:12px;align-items:start}
#verifyList .verify-reading>span{font-size:.75rem;min-width:70px;font-weight:800;color:#53687a}
#verifyList .verify-reading.ok{background:#eaf6ee;color:#215c34}#verifyList .verify-reading.ok>span{color:#215c34}
#verifyList .verify-reading b{display:block}
@media(max-width:1000px){#l2Step3 .loto-col{grid-template-columns:minmax(0,1fr)}#l2Step3 .station-wrap{width:440px;margin:0 auto}#l2Step3 .steps-col{width:100%;max-width:760px;margin:auto}}
#l2Step3 #stVerify{opacity:1}
.l2-diagnostic-tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:2px solid #d3dfe8;padding-bottom:12px;margin:18px 0}
.l2-diagnostic-tabs button{font:800 1rem system-ui;padding:13px 20px;border:2px solid #315875;border-radius:8px;background:#edf4fa;color:#173b59;cursor:pointer}
.l2-diagnostic-tabs button[aria-selected="true"]{background:#173b59;color:white}
.l2-diagnostic-tabs button:focus-visible{outline:3px solid #e7a324;outline-offset:3px}
#l2Step2 [role="tabpanel"][hidden]{display:none!important}
#l2Step3>.bench{margin-top:28px;padding-top:22px;border-top:2px solid #d3dfe8;scroll-margin-top:16px}
/* Rack artwork is 700/840 of the SVG: 1020px board gives the Level1 850px rack. */
#l2Panel #board{max-width:1020px;display:block;margin-inline:auto}
.l4-shell{box-sizing:border-box;width:100%;max-width:1450px;margin-inline:auto}
/* Match docked and floating instruments; return the extra70px to the panel. */
#l2Panel .meter-col{flex:0 0 230px;width:230px;min-width:0}
#l2Panel .meter-wrap:not(.meter-floating){width:230px;max-width:100%}
@media(max-width:480px){#l2Panel .meter-col{flex-basis:190px;width:190px}#l2Panel .meter-wrap:not(.meter-floating){width:190px}}
/* Keep a full-size panel beside the compact instrument whenever both fit. */
#l2Panel .board-col{flex:1 1 1058px}
@media(min-width:721px){#l2Panel .meter-col{align-self:flex-start}}
/* Match Level1 physical artwork sizes at desktop scale; narrow screens scroll the panel. */
#l2Panel #board{width:1220px!important;max-width:none;min-width:1220px}
#l2Panel .board-col{flex:1 1 1260px;min-width:0}
#l2Panel .board-scroll{max-width:100%;overflow-x:auto}
/* Lesson actions are buttons, not full-row banners. Preserve existing state colors. */
.l2-learning-step .step button,.l2-learning-step .conv-complete{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:auto;max-width:100%;min-height:44px;padding:10px 20px;line-height:1.35;text-align:center;white-space:normal;vertical-align:middle}
.l2-learning-step .step button:focus-visible,.l2-learning-step .conv-complete:focus-visible{outline:3px solid #e7a324;outline-offset:3px}
#l2Step4 #repairSel{display:block;max-width:340px;min-height:40px}
#l2Step6 .conv-complete-hint{text-align:left}

/* Keep the instrument beside the panel without scaling down devices. */
@media(min-width:721px){#l2Panel{flex-wrap:nowrap;align-items:flex-start}#l2Panel .board-col{flex:1 1 0;min-width:0}#l2Panel .meter-col{flex:0 0 230px}}
.meter-movebar .meter-grip{background:#66ef76;color:#103519;border:2px solid #219b38;font-weight:800}
.meter-movebar .meter-grip:hover{background:#8bfa98}
.meter-movebar .meter-grip:focus-visible{outline:3px solid #e7a324;outline-offset:3px}
#l2Panel .meter-col .panel{padding:12px}
#l2Panel .meter-col .hintline{font-size:.8rem;line-height:1.45}

#l2Panel .board-swipe{display:block}

/* Keep the workbench together in narrow preview windows as well. */
#l2Panel{flex-wrap:nowrap;align-items:flex-start}
#l2Panel .board-col{flex:1 1 0;min-width:0}
@media(max-width:720px){#l2Panel{gap:12px}#l2Panel .meter-col{flex:0 0 150px;width:150px}#l2Panel .meter-wrap:not(.meter-floating){width:150px}#l2Panel .meter-movebar{flex-wrap:wrap}#l2Panel .meter-col .panel{padding:8px}#l2Panel .board-col{padding:8px}}

/* On wide monitors use the left page gutter for the instrument. The panel
   keeps the same centered lesson width and its Level 1 device scale. */
@media(min-width:1900px){
 #l2Panel{position:relative;display:block;min-height:760px}
 #l2Panel .meter-col{position:absolute;left:-256px;top:22px;width:230px;max-width:230px}
 #l2Panel .board-col{box-sizing:border-box;width:100%;max-width:none}
}
@media(min-width:1900px){#l2Panel .board-swipe{display:none}}

#l2Step5>.line-card{max-width:1100px}