*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#152235;background:#eef3f7}
body{margin:0}
.topbar{height:72px;background:#102a43;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}
.topbar strong{font-size:1.25rem;margin-right:14px}
.topbar span{opacity:.9}
.mode{display:flex;align-items:center;gap:10px}
button{font:inherit}
#runToggle{border:0;border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}
.lamp,.mini-led{display:inline-block;width:13px;height:13px;border-radius:50%;background:#6d7a86;box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.lamp.on,.mini-led.on{background:#3aa655;box-shadow:0 0 10px rgba(58,166,85,.65)}
.workspace{padding:18px;display:grid;grid-template-columns:1.35fr 1.2fr .8fr;gap:18px}
.panel{background:#fff;border:1px solid #d3dce5;border-radius:12px;overflow:hidden;min-height:250px}
.panel-head{padding:18px 20px;border-bottom:1px solid #e3e9ef}
.panel-head h2{margin:0 0 6px}
.panel-head p{margin:0;color:#607080}
.device-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px}
.device{border:1px solid #cdd7e1;border-radius:10px;padding:16px;background:#fafcfe}
.device h3{margin-top:0}
.term-row,.status-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.terminal{padding:8px 10px;border-radius:7px;font-weight:700}
.plus{background:#ffe8e8}.common{background:#e7edf4}
.field-btn{width:100%;padding:12px;border:0;border-radius:8px;background:#2474c6;color:white;font-weight:700;cursor:pointer;margin-bottom:12px}
.field-btn.danger{background:#b43c3c}.field-btn.secondary{background:#65788a}
.coil{display:flex;align-items:center;justify-content:space-between;border:2px solid #65788a;padding:15px;border-radius:8px;margin-bottom:12px}
.motor-device{text-align:center}
.motor{width:86px;height:86px;border-radius:50%;border:8px solid #637789;margin:15px auto;display:grid;place-items:center;font-size:2rem;font-weight:800;transition:.2s}
.motor.running{animation:spin .7s linear infinite;border-style:dashed}
@keyframes spin{to{transform:rotate(360deg)}}
.rung{
  position:relative;padding:36px 22px;display:flex;align-items:stretch;min-height:300px}
.rail{width:4px;background:#20384d}
.logic-line{display:flex;align-items:center;gap:16px;flex:1;padding:0 16px;border-top:3px solid #708090;border-bottom:3px solid transparent}
.contact,.coil-symbol{min-width:110px;text-align:center;padding:10px;border-radius:7px}
.contact span,.coil-symbol span{display:block;font-size:.8rem;margin-bottom:6px}
.contact b,.coil-symbol b{font-size:1.35rem}
.branch{display:flex;flex-direction:column;gap:18px;border-left:2px solid #708090;border-right:2px solid #708090;padding:8px 14px}
.branch-row{min-height:65px;display:flex;align-items:center}
.energized{background:#e6f7ea;box-shadow:inset 0 0 0 2px #3aa655}
.scan-box{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e3e9ef}
.scan-box div{padding:16px 20px}
.scan-box span{display:block;color:#607080;font-size:.8rem}
.scan-box strong{font-size:1.3rem}
.io-panel table{width:100%;border-collapse:collapse}
.io-panel th,.io-panel td{text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8ef;font-size:.9rem}
.explain{padding:16px}
.explain h3{margin-top:0}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.device-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.device-grid{grid-template-columns:1fr}.topbar{height:auto;padding:14px;align-items:flex-start;flex-direction:column}.workspace{padding:10px}.logic-line{overflow-x:auto}}


/* Proper ladder diagram layout */
.ladder-panel{
  overflow:hidden;
}
.ladder-canvas{
  position:relative;
  height:360px;
  margin:0;
  background:#fff;
  min-width:720px;
}
.ladder-rail{
  position:absolute;
  top:34px;
  bottom:34px;
  width:4px;
  background:#111;
}
.left-rail{left:58px}
.right-rail{right:58px}
.ladder-label{
  position:absolute;
  top:8px;
  font-size:.85rem;
  font-weight:700;
}
.left-label{left:48px}
.right-label{right:46px}
.rung-number{
  position:absolute;
  left:6px;
  top:160px;
  font-size:.78rem;
  color:#4f5f6d;
}
.rung-wire{
  position:absolute;
  height:3px;
  background:#111;
}
.main-wire{
  left:58px;
  right:58px;
  top:180px;
}
.ladder-contact{
  position:absolute;
  width:92px;
  height:72px;
  top:144px;
  background:#fff;
  text-align:center;
  z-index:2;
}
.ladder-contact .tag,
.ladder-coil .tag{
  display:block;
  font-size:.78rem;
  margin-bottom:10px;
  white-space:nowrap;
}
.contact-symbol{
  position:relative;
  display:block;
  width:72px;
  height:28px;
  margin:0 auto;
}
.contact-symbol:before,
.contact-symbol:after{
  content:"";
  position:absolute;
  top:13px;
  width:22px;
  height:3px;
  background:#111;
}
.contact-symbol:before{left:0}
.contact-symbol:after{right:0}
.contact-symbol .bar{
  position:absolute;
  top:0;
  width:3px;
  height:28px;
  background:#111;
}
.contact-symbol .bar:first-child{left:29px}
.contact-symbol .bar:last-child{right:29px}

.stop-xic{left:105px}
.ol-xic{left:225px}
.start-xic{left:360px;top:120px}
.seal-xic{left:360px;top:220px}

.branch-left,
.branch-right{
  position:absolute;
  width:3px;
  background:#111;
  top:180px;
  height:100px;
  z-index:1;
}
.branch-left{left:340px}
.branch-right{left:470px}
.branch-top-wire,
.branch-bottom-wire{
  position:absolute;
  height:3px;
  background:#111;
  left:340px;
  width:130px;
  z-index:1;
}
.branch-top-wire{top:180px}
.branch-bottom-wire{top:280px}
.branch-bottom-wire:before{
  content:"";
  position:absolute;
  left:0;
  top:-100px;
  width:3px;
  height:100px;
  background:#111;
}

.ladder-coil{
  position:absolute;
  right:96px;
  top:143px;
  width:105px;
  height:72px;
  text-align:center;
  background:#fff;
  z-index:2;
}
.coil-shape{
  display:block;
  font-size:2.1rem;
  line-height:28px;
  font-family:Georgia,serif;
}
.ladder-contact.energized .contact-symbol:before,
.ladder-contact.energized .contact-symbol:after,
.ladder-contact.energized .contact-symbol .bar,
.ladder-coil.energized .coil-shape{
  filter:drop-shadow(0 0 3px rgba(35,160,80,.55));
}
.ladder-contact.energized,
.ladder-coil.energized{
  background:#edf9f0;
  box-shadow:inset 0 0 0 2px #3aa655;
  border-radius:6px;
}
@media(max-width:760px){
  .ladder-panel{overflow-x:auto}
  .ladder-canvas{min-width:720px}
}


/* Wiring simulator */
.wiring-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.wiring-actions{display:flex;gap:8px;flex-wrap:wrap}
.small-btn{border:0;border-radius:7px;background:#173b5e;color:#fff;padding:9px 12px;font-weight:700;cursor:pointer}
.small-btn.secondary{background:#647586}
.wiring-board{
  position:relative;
  min-height:650px;
  margin:16px;
  border:2px solid #aab7c4;
  border-radius:12px;
  background:
    linear-gradient(#eef3f6 1px, transparent 1px),
    linear-gradient(90deg,#eef3f6 1px, transparent 1px),
    #f9fbfd;
  background-size:24px 24px;
  overflow:hidden;
}
.wire-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:5;
}
.wire-line{
  stroke-width:4;
  fill:none;
  pointer-events:stroke;
  cursor:pointer;
}
.wire-line.live{stroke-width:5}
.wire-device{
  position:absolute;
  z-index:10;
  background:#fff;
  border:1px solid #9eacb9;
  border-radius:10px;
  padding:12px;
  width:190px;
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.wire-device h3{font-size:.95rem;margin:0 0 10px}
.supply{left:22px;top:22px}
.start-device{left:235px;top:22px}
.stop-device{left:448px;top:22px}
.ol-device{left:661px;top:22px}
.input-card{left:235px;top:285px}
.output-card{left:475px;top:315px}
.contactor-device{left:715px;top:315px}
.motor-device{left:715px;top:500px}
.terminal-row{display:flex;justify-content:space-around;gap:18px;margin:8px 0 12px}
.wire-terminal{
  width:42px;
  height:42px;
  border-radius:50%;
  border:3px solid #516476;
  background:#fff;
  cursor:pointer;
  font-weight:800;
  position:relative;
  z-index:12;
}
.wire-terminal:hover{transform:scale(1.05)}
.wire-terminal.selected{outline:4px solid rgba(36,116,198,.25);border-color:#2474c6}
.wire-terminal.connected{box-shadow:0 0 0 3px rgba(58,166,85,.2)}
.wire-terminal.positive{border-color:#a73333}
.wire-terminal.common{border-color:#283849}
.module-row{display:grid;grid-template-columns:1fr 46px 20px;align-items:center;gap:6px;margin:7px 0}
.symbol-text{text-align:center;font-family:monospace;font-size:1.05rem;margin-bottom:8px}
.wiring-footer{display:flex;justify-content:space-between;gap:15px;padding:0 18px 18px;color:#526579;font-size:.9rem}
.wiring-hint{
  position:absolute;
  left:22px;
  top:280px;
  width:190px;
  z-index:20;
  background:#fff8d9;
  border:1px solid #d7bd57;
  border-radius:9px;
  padding:12px;
  font-size:.78rem;
  line-height:1.55;
}
.wiring-hint strong{display:block;margin-bottom:5px}
@media(max-width:1100px){
  .wiring-panel{overflow-x:auto}
  .wiring-board{min-width:930px}
}


/* v3.1 responsive wiring-board fix */
.wiring-board{
  min-height:700px;
  overflow:hidden;
}
.wire-device{
  width:22%;
  min-width:0;
  padding:10px;
}
.wire-device h3{
  font-size:.88rem;
}
.supply{left:2%;top:22px}
.start-device{left:26%;top:22px}
.stop-device{left:50%;top:22px}
.ol-device{left:74%;top:22px}

.input-card{left:26%;top:300px}
.output-card{left:51%;top:330px}
.contactor-device{left:76%;top:330px}
.motor-device{left:76%;top:520px}

.wiring-hint{
  left:2%;
  top:300px;
  width:21%;
}

@media(max-width:1100px){
  .wiring-panel{overflow:visible}
  .wiring-board{min-width:0}
}

@media(max-width:760px){
  .wiring-board{
    min-width:760px;
    overflow:hidden;
  }
  .wiring-panel{
    overflow-x:auto;
  }
  .wire-device{
    width:165px;
  }
  .supply{left:18px}
  .start-device{left:200px}
  .stop-device{left:382px}
  .ol-device{left:564px}
  .input-card{left:200px}
  .output-card{left:390px}
  .contactor-device{left:580px}
  .motor-device{left:580px}
  .wiring-hint{left:18px;width:165px}
}


/* v4 wire visibility */
.wire-layer{
  z-index:30;
}
.wire-device{
  z-index:10;
}
.wire-terminal{
  z-index:40;
}
.wire-line{
  stroke-width:5;
  fill:none;
  pointer-events:stroke;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Ladder editor */
.editor-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.editor-actions{display:flex;gap:8px;flex-wrap:wrap}
.instruction-palette{
  padding:12px 16px;
  border-bottom:1px solid #dfe6ec;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  background:#f7fafc;
}
.instruction-btn{
  border:1px solid #8999a8;
  background:#fff;
  border-radius:7px;
  padding:7px 10px;
  font-weight:700;
  cursor:pointer;
}
.palette-note{font-size:.78rem;color:#607080}
.tag-table-wrap{padding:12px 16px 0}
.tag-table{width:100%;border-collapse:collapse;font-size:.8rem}
.tag-table th,.tag-table td{padding:7px 8px;border-bottom:1px solid #e3e9ef;text-align:left}

.ladder-editor{
  padding:16px;
  overflow-x:auto;
  background:#fff;
}
.editable-rung{
  display:grid;
  grid-template-columns:65px 4px minmax(560px,1fr) 4px 88px;
  align-items:stretch;
  min-width:820px;
  min-height:155px;
  position:relative;
  border:2px solid transparent;
  border-radius:9px;
  margin-bottom:12px;
  padding:10px 6px;
}
.editable-rung.selected-rung{
  border-color:#8eb5d8;
  background:#f9fcff;
}
.editor-rung-number{
  align-self:center;
  font-size:.76rem;
  color:#566879;
}
.editor-rail{background:#111;width:4px}
.editor-rung-line{
  align-self:center;
  min-height:95px;
  border-top:3px solid #111;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 16px;
}
.editor-inst{
  position:relative;
  min-width:112px;
  background:#fff;
  text-align:center;
  padding:8px 7px;
  border-radius:6px;
  z-index:2;
}
.editor-inst.energized{
  background:#e9f8ee;
  box-shadow:inset 0 0 0 2px #3aa655;
}
.inst-tag{margin-bottom:7px}
.tag-select{
  width:100%;
  font-size:.76rem;
  border:1px solid #b6c2cd;
  border-radius:5px;
  padding:4px;
}
.inst-symbol{
  font-family:monospace;
  font-size:1.65rem;
  line-height:1;
  margin-bottom:5px;
  white-space:nowrap;
}
.inst-symbol.coil{font-family:Georgia,serif;font-size:2rem}
.delete-inst{
  position:absolute;
  top:-9px;
  right:-9px;
  width:23px;
  height:23px;
  border-radius:50%;
  border:0;
  background:#b94040;
  color:#fff;
  font-size:1rem;
  line-height:20px;
  cursor:pointer;
}
.delete-rung{
  position:absolute;
  top:8px;
  right:8px;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:3px;
  background:#8b2e2e;
  color:#fff;
  padding:0;
  font-size:18px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  z-index:5;
}
.delete-rung:hover{background:#a73a3a}
.delete-rung:focus{outline:2px solid rgba(44,130,201,.35);outline-offset:1px}
.editor-branch{
  position:relative;
  min-width:155px;
  display:flex;
  flex-direction:column;
  gap:18px;
  border-left:3px solid #111;
  border-right:3px solid #111;
  padding:8px 12px;
}
.branch-path{
  min-height:70px;
  border-top:3px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.branch-delete{top:-13px;right:-13px}
.output-inst{margin-left:auto}
@media(max-width:760px){
  .editor-head{flex-direction:column}
}

.topbar strong{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
}
.topbar-byline{
  font-size:.58em;
  font-weight:500;
  opacity:.82;
}

.level-nav{
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  padding:8px 10px;
  border-radius:7px;
  font-size:.8rem;
}

.completion-check{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
}
.completion-check span{color:#536577;flex:1;transition:color .15s}
.completion-check span.is-error{color:#a72f2f;font-weight:700}
.completion-check span.is-progress{color:#2f6ea5;font-weight:700}
.completion-check span.is-success{color:#1c7a3f;font-weight:800}
.completion-check.has-success{background:linear-gradient(180deg,#eefaf0,#ffffff);box-shadow:inset 0 0 0 1px #bfe6c8;border-radius:12px}
@media(max-width:760px){
  .completion-check{flex-direction:column;align-items:flex-start}
}

.small-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.plc-mode-box{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid #aebbc7;
  border-radius:8px;
  background:#eef3f7;
  margin-right:4px;
}
.plc-mode-label{
  font-size:.68rem;
  letter-spacing:.08em;
  font-weight:800;
  color:#5b6e7f;
}
.plc-run-btn{
  margin-left:3px;
}
.hint-run-note{
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid rgba(0,0,0,.14);
}
@media(max-width:850px){
  .editor-actions{
    flex-wrap:wrap;
  }
  .plc-mode-box{
    width:100%;
    justify-content:flex-start;
  }
}

.program-mode-notice{
  width:100%;
  margin-top:8px;
  padding:9px 11px;
  border:1px solid #c98432;
  border-radius:7px;
  background:#fff3df;
  color:#7a4a12;
  font-size:.8rem;
  font-weight:700;
}
.ladder-editor.run-locked{
  opacity:.92;
}
.ladder-editor.run-locked .delete-inst,
.ladder-editor.run-locked .delete-rung,
.ladder-editor.run-locked .tag-select{
  cursor:not-allowed;
}

.run-edit-blocked{
  opacity:.58;
  cursor:not-allowed !important;
}
.program-mode-notice{
  animation:programNoticeIn .18s ease-out;
}
@keyframes programNoticeIn{
  from{opacity:.2;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* v5.19 industrial operator pushbutton color convention */
#startPb {
  background:#2e8b57;
  color:#fff;
}
#startPb:hover { background:#26784b; }
#stopPb {
  background:#b43c3c;
  color:#fff;
}
#stopPb:hover { background:#9d3434; }

/* ============================================================
   v5.22 - Studio 5000-inspired ladder editor visual treatment
   Visual only: PLC execution and grading logic are unchanged.
   ============================================================ */
.ladder-editor{
  background:#e9edf1;
  border-top:1px solid #b8c1ca;
  border-bottom:1px solid #b8c1ca;
  padding:0;
  font-family:"Segoe UI",Arial,sans-serif;
}
.editable-rung{
  grid-template-columns:72px 2px minmax(650px,1fr) 2px 86px;
  min-width:920px;
  min-height:118px;
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px solid #cbd2d8;
  border-radius:0;
  background:#f7f7f7;
}
.editable-rung:hover{background:#f2f6fa}
.editable-rung.selected-rung{
  background:#eaf3fb;
  box-shadow:inset 4px 0 0 #2b6ea6;
  border-color:#c3d7e8;
}
.editor-rung-number{
  align-self:stretch;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:9px 10px 0 6px;
  background:#dfe4e8;
  border-right:1px solid #bcc5cd;
  color:#34495a;
  font:600 12px Consolas,"Courier New",monospace;
}
.editor-rail{background:#1c1c1c;width:2px}
.editor-rung-line{
  align-self:center;
  min-height:92px;
  border-top:2px solid #222;
  gap:24px;
  padding:0 18px;
  background:transparent;
}
.editor-inst{
  min-width:128px;
  padding:4px 5px 5px;
  border-radius:0;
  background:#f7f7f7;
  font-family:Consolas,"Courier New",monospace;
}
.editable-rung.selected-rung .editor-inst{background:#eaf3fb}
.inst-tag{margin:0 0 3px}
.tag-select{
  width:100%;
  min-height:26px;
  padding:2px 5px;
  border:1px solid #8d99a3;
  border-radius:2px;
  background:#fff;
  color:#111;
  font:12px Consolas,"Courier New",monospace;
}
.inst-symbol{
  margin:1px 0 0;
  color:#111;
  font:700 27px/1 Consolas,"Courier New",monospace;
  letter-spacing:-2px;
}
.inst-symbol.coil{
  font:700 28px/1 Consolas,"Courier New",monospace;
  letter-spacing:0;
}
.editor-inst small{
  display:block;
  margin-top:2px;
  color:#334b5f;
  font:700 10px/1.1 Consolas,"Courier New",monospace;
}
.editor-inst.energized{
  background:#e7f5e9;
  box-shadow:none;
  color:#087a28;
}
.editor-inst.energized .inst-symbol,
.editor-inst.energized small{color:#087a28}
.editor-inst.energized .tag-select{
  border-color:#4a9b60;
  background:#f3fff5;
}
.editor-branch{
  min-width:205px;
  gap:0;
  border-left:2px solid #222;
  border-right:2px solid #222;
  padding:0 12px;
  background:transparent;
}
.branch-path{
  min-height:62px;
  border-top:2px solid #222;
  justify-content:center;
  background:transparent;
}
.branch-path + .branch-path{border-top:2px solid #222}
.output-inst{margin-left:auto}
.delete-inst{
  width:18px;height:18px;top:-5px;right:-5px;
  border-radius:2px;background:#8b2e2e;
  font-size:13px;line-height:16px;padding:0;
}
.delete-rung{
  align-self:center;
  margin:0 7px;
  border:1px solid #9ca7b0;
  border-radius:2px;
  background:#eef1f3;
  color:#324657;
  padding:5px 7px;
  font-size:11px;
}
.instruction-palette{
  padding:8px 12px;
  border-top:1px solid #c4ccd3;
  border-bottom:1px solid #aeb8c1;
  background:linear-gradient(#f4f6f8,#dfe4e8);
  gap:6px;
}
.instruction-palette>strong{
  margin-right:8px;
  color:#34495a;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.instruction-btn{
  min-width:82px;
  padding:5px 9px;
  border:1px solid #8f9ba5;
  border-radius:2px;
  background:linear-gradient(#fff,#e4e8eb);
  box-shadow:inset 0 1px 0 #fff;
  color:#182b3a;
  font:700 12px Consolas,"Courier New",monospace;
}
.instruction-btn:hover{background:#edf4fa;border-color:#5f87a8}
.ladder-editor.run-locked{background:#e2e5e8}
.ladder-editor.run-locked .editable-rung{background:#f0f1f2}

/* ============================================================
   v5.26 - mobile polish pass for Levels 1 and 2
   Responsive-only overrides; desktop behavior is unchanged.
   ============================================================ */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:16px}
  .topbar{
    gap:10px;
    padding:12px 14px;
  }
  .topbar>div:first-child,
  .topbar .mode{width:100%}
  .topbar strong{font-size:1.05rem;margin-right:0;flex-wrap:wrap}
  .topbar-byline{font-size:.62em}
  .topbar .mode{justify-content:flex-start;flex-wrap:wrap}
  .level-nav{padding:9px 11px}

  .workspace{padding:10px;gap:12px}
  .panel{border-radius:10px;min-width:0}
  .panel-head{padding:15px 16px}
  .panel-head h2{font-size:1.45rem;line-height:1.12}
  .panel-head p{line-height:1.45}
  .wiring-head,.editor-head{flex-direction:column;align-items:stretch}
  .wiring-actions,.editor-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .wiring-actions .small-btn,.editor-actions>.small-btn{width:100%}

  .plc-mode-box{
    width:100%;
    margin:0;
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:8px;
  }
  .plc-run-btn{grid-column:1/-1;width:100%;margin:0}
  .program-mode-notice{margin-top:0}

  .instruction-palette{padding:11px 12px;gap:7px}
  .instruction-palette>strong{width:100%;font-size:.82rem}
  .instruction-btn{flex:1 1 calc(50% - 7px);min-width:0;padding:9px 7px}
  .palette-note{width:100%;line-height:1.35}

  .tag-table-wrap{padding:10px 10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tag-table{min-width:430px}
  .io-panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .io-panel table{min-width:430px}
  .io-panel th,.io-panel td{padding:10px 11px;font-size:.84rem}

  .wiring-panel{overflow:hidden}
  .wiring-board{
    min-width:760px;
    margin:12px;
  }
  .wiring-panel .wiring-board{
    transform-origin:top left;
  }
  .wiring-panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wiring-footer{padding:0 14px 14px;flex-direction:column;gap:5px}

  .ladder-editor,.ladder-panel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .editable-rung{min-width:820px}
  .editor-rung-line{gap:18px;padding:0 14px}
  .editor-inst{min-width:118px}

  .scan-box div{padding:13px 15px}
  .completion-check{padding:15px 16px;gap:12px}
  .completion-check .small-btn{width:100%}
  .explain{padding:14px 16px}
}

@media(max-width:430px){
  .workspace{padding:8px}
  .panel-head{padding:14px}
  .instruction-btn{font-size:.82rem}
  .plc-mode-box{padding:9px}
  .scan-box strong{font-size:1.1rem}
}

/* v5.28.3 Level 1/2 mobile wiring-hint readability fix */
@media(max-width:760px){
  .wiring-hint{
    left:18px;
    top:300px;
    width:270px;
    max-width:270px;
    box-sizing:border-box;
    font-size:.76rem;
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .wiring-board:has(.wiring-hint:not([hidden])){
    min-height:820px;
  }
}

@media(max-width:430px){
  .wiring-hint{
    width:250px;
    max-width:250px;
    padding:11px;
    font-size:.74rem;
  }
  .wiring-board:has(.wiring-hint:not([hidden])){
    min-height:850px;
  }
}

/* v5.41 ladder editor UX */
.ladder-editor{min-height:360px}
.editable-rung{min-height:158px}
.editor-rung-line{min-height:130px;gap:28px;padding:14px 20px}
.editor-inst{position:relative;min-width:148px;padding-top:22px}
.editor-branch{position:relative;padding-top:18px}
.instruction-type-select{display:block;width:100%;min-height:25px;margin-top:5px;padding:2px 5px;border:1px solid #8d99a3;border-radius:2px;background:#eef3f7;color:#17324a;font:700 11px Consolas,"Courier New",monospace}
.drag-handle{position:absolute;left:4px;top:3px;z-index:5;display:grid;place-items:center;width:24px;height:17px;border:1px solid #aeb9c2;border-radius:3px;background:#eef2f5;color:#54697b;font:700 14px/1 Arial,sans-serif;cursor:grab;user-select:none}
.drag-handle:active{cursor:grabbing}.dragging-inst{opacity:.48}.drag-over-inst{outline:2px dashed #2b86c8;outline-offset:4px}
.ladder-editor.run-locked .drag-handle,.ladder-editor.run-locked .instruction-type-select{opacity:.55;cursor:not-allowed}
@media(max-width:760px){.ladder-editor{min-height:340px}.editable-rung{min-height:150px}.editor-rung-line{min-height:122px;gap:20px;padding:12px 16px}.editor-inst{min-width:140px}}


/* ============================================================
   v5.57 RUN-mode ladder monitor highlighting
   ============================================================ */
.editor-inst.energized{
  background:#effff1 !important;
  border:1px solid #28b44a;
  box-shadow:
    inset 0 0 0 1px rgba(40,180,74,.22),
    0 0 10px rgba(40,180,74,.18) !important;
}
.editor-inst.energized .inst-symbol{
  color:#00a62f !important;
  text-shadow:0 0 5px rgba(0,190,60,.28);
}
.editor-inst.energized small{
  color:#07862c !important;
}
.editor-inst.energized .tag-select{
  border-color:#35a953 !important;
  background:#f3fff5 !important;
  color:#087a28 !important;
  font-weight:700;
}

/* The energized instruction gets short green power-flow stubs so the
   monitor view reads more like a live PLC ladder display. */
.editor-inst.energized::before,
.editor-inst.energized::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;
  height:4px;
  background:#20c543;
  transform:translateY(-50%);
  z-index:-1;
}
.editor-inst.energized::before{left:-18px}
.editor-inst.energized::after{right:-18px}

@media(max-width:760px){
  .editor-inst.energized::before,
  .editor-inst.energized::after{
    width:12px;
  }
  .editor-inst.energized::before{left:-12px}
  .editor-inst.energized::after{right:-12px}
}


/* ============================================================
   v5.57.1 FINAL rung-delete override
   Must remain at end of file because trainer.css contains an older
   duplicate .delete-rung rule earlier in the Studio-style section.
   ============================================================ */
.ladder-editor .ladder-rung,
.ladder-editor .rung,
.ladder-editor .rung-row{
  position:relative;
}

.ladder-editor .delete-rung{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  left:auto !important;
  bottom:auto !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:auto !important;
  border:0 !important;
  border-radius:4px !important;
  background:#963434 !important;
  color:#fff !important;
  font:700 18px/1 Arial,sans-serif !important;
  text-indent:0 !important;
  overflow:hidden !important;
  cursor:pointer !important;
  box-shadow:0 1px 3px rgba(0,0,0,.22) !important;
  z-index:20 !important;
}

.ladder-editor .delete-rung:hover{
  background:#b13c3c !important;
}

.ladder-editor .delete-rung:focus{
  outline:2px solid rgba(35,135,210,.42) !important;
  outline-offset:2px !important;
}

@media(max-width:760px){
  .ladder-editor .delete-rung{
    top:7px !important;
    right:7px !important;
    width:24px !important;
    height:24px !important;
  }
}


/* ============================================================
   v5.58 Level 1 TRUE instruction monitor
   ============================================================ */
.editor-inst.energized{
  position:relative;
}
.editor-inst.energized::before,
.editor-inst.energized::after{
  content:"";
  position:absolute;
  top:50%;
  height:5px;
  width:16px;
  background:#00c13f !important;
  transform:translateY(-50%);
  box-shadow:0 0 5px rgba(0,193,63,.35);
  z-index:1;
}
.editor-inst.energized::before{left:-16px}
.editor-inst.energized::after{right:-16px}


/* ============================================================
   v5.59 PLC monitor view — shared Levels 1 & 2
   ============================================================ */

/* RUN mode locks editing but must not wash out the live monitor colors. */
.ladder-editor.run-locked{
  opacity:1 !important;
  background:#e9edf1 !important;
}
.ladder-editor.run-locked .editable-rung{
  background:#f7f7f7 !important;
}
.ladder-editor.run-locked .editable-rung.selected-rung{
  background:#f7f7f7 !important;
}
.ladder-editor.run-locked .editor-inst{
  opacity:1 !important;
}
.ladder-editor.run-locked .editor-inst.energized{
  background:#dcffe4 !important;
  border:2px solid #00b83f !important;
  box-shadow:0 0 0 2px rgba(0,184,63,.18),0 0 12px rgba(0,184,63,.30) !important;
}
.ladder-editor.run-locked .editor-inst.energized .inst-symbol,
.ladder-editor.run-locked .editor-inst.energized small{
  color:#00a832 !important;
}
.ladder-editor.run-locked .editor-inst.energized .tag-select,
.ladder-editor.run-locked .editor-inst.energized .instruction-type-select{
  opacity:1 !important;
  background:#edfff1 !important;
  border-color:#00b83f !important;
  color:#087a28 !important;
}

/* Keep the Level 1/2 wiring hint completely inside the wiring board. */
.wiring-board:has(.wiring-hint:not([hidden])){
  min-height:860px !important;
}
.wiring-hint{
  max-height:520px;
  overflow:auto;
  box-sizing:border-box;
}
@media(max-width:760px){
  .wiring-board:has(.wiring-hint:not([hidden])){
    min-height:900px !important;
  }
  .wiring-hint{
    max-height:540px;
  }
}

/* v6.0 Level 1 photo-realistic field-device wiring board.
   Only .wire-device-photo / .photo-stage markup is affected — the original
   .wire-device / .wire-terminal rules above stay as-is (now unused here,
   since the new markup uses a different class name) so nothing else that
   might still reference them elsewhere is disturbed. */
.photo-board{
  position:relative;
  min-height:0;
  overflow:visible;
  padding:16px;
}
.photo-board:has(.wiring-hint:not([hidden])){
  min-height:0 !important;
}
.device-row-photo{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:22px;
  position:relative;
  z-index:10;
}
.device-row-photo:last-of-type{margin-bottom:0}
.wire-device-photo{
  background:#fff;
  border:1px solid #9eacb9;
  border-radius:10px;
  padding:10px 10px 8px;
  box-shadow:0 3px 10px rgba(28,48,65,.08);
  width:calc(200px * var(--wire-zoom,1));
}
.wire-device-photo h3{
  margin:0 0 8px;
  font-size:.78rem;
  text-align:center;
  color:#31485e;
  font-weight:800;
}
/* Real overload relays print 95-96 (NC) and 97-98 (NO) on the housing with
   no other visual distinction — a student can't tell which pair is which
   just by looking at the photo, so spell out the standard numbering
   instead of leaving it to the Wiring Hint panel alone. */
.terminal-key{
  margin:6px 0 0;
  text-align:center;
  font-size:.66rem;
  font-weight:700;
  color:#5a6b7a;
  line-height:1.4;
}
.dev-plc{width:calc(360px * var(--wire-zoom,1))}
.dev-contactor,.dev-motor{width:calc(220px * var(--wire-zoom,1))}
.photo-stage{position:relative;display:block}
.photo-stage img{
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  user-select:none;
  border-radius:4px;
}
.photo-stage .wire-terminal{
  position:absolute;
  z-index:30;
  width:15%;
  aspect-ratio:1;
  max-width:30px;
  max-height:30px;
  min-width:14px;
  min-height:14px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.01);
  border:2px solid transparent;
  cursor:pointer;
  padding:0;
}
.photo-stage .wire-terminal:hover{
  border-color:rgba(36,116,198,.55);
  background:rgba(36,116,198,.12);
  transform:translate(-50%,-50%);
}
.photo-stage .wire-terminal.selected{
  outline:none;
  border-color:#2474c6;
  background:rgba(36,116,198,.18);
  box-shadow:0 0 0 4px rgba(36,116,198,.18);
}
.photo-stage .wire-terminal.connected{
  box-shadow:0 0 0 3px rgba(58,166,85,.35);
}
/* The PLC card's terminals (I/O row AND the OVP/ICOM pair) sit only
   ~15-18px apart, matching the real printed dots on the photo — but the
   general 30px max-width above let each button's invisible hit zone
   balloon past its neighbor's, so a click meant for one terminal could
   land on the one next to it. Cap every terminal on the PLC card down
   near its min hit size (still centered on the dot) so neighbors never
   overlap. */
.dev-plc .photo-stage .wire-terminal{
  max-width:15px;
  max-height:15px;
}
/* The new contactor photo's auxiliary-contact block (13/21/14/22) packs its
   terminals about as tightly as the PLC's — same overlap risk, same fix. */
.dev-contactor .photo-stage .wire-terminal{
  max-width:16px;
  max-height:16px;
}
.photo-stage .mini-led.photo-led{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:25;
  width:10px;
  height:10px;
  pointer-events:none;
}
/* The card header already reads "Contactor M1", so this repeated "M1"
   badge was redundant — hidden rather than removed from the markup, since
   js/app.js and js/app-assisted.js still toggle .energized on this element
   every render frame and expect it to exist. */
.coil-label{
  display:none;
}
.motor-photo-img{
  display:block;
  width:72%;
  margin:6px auto 0;
  border-radius:6px;
  box-shadow:0 0 0 0 rgba(58,166,85,0);
  transition:box-shadow .3s;
}
/* A full-photo spin looked like the whole housing was tumbling rather than
   a shaft turning inside it, and clipped into the status text below — a
   steady green running glow reads more like a real running-status light. */
.motor-photo-img.running{
  box-shadow:0 0 0 6px rgba(58,166,85,.22);
  animation:motor-pulse 1.6s ease-in-out infinite;
}
@keyframes motor-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(58,166,85,.18)}
  50%{box-shadow:0 0 0 9px rgba(58,166,85,.32)}
}
/* The glow alone doesn't read as "spinning" the way the old schematic M
   symbol's rotation did. Add a small fan-blade badge in the corner of the
   photo that actually spins — a real motion cue — without rotating the
   whole rectangular housing photo (which is what clipped the status text
   before). Pure CSS: toggled by the same .running class JS already sets
   on #motorGraphic, no markup or script changes needed beyond the one
   inert sibling span in the HTML. */
.motor-run-badge{
  position:absolute;
  right:9%;
  bottom:10%;
  width:15%;
  aspect-ratio:1;
  max-width:28px;
  min-width:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px #3aa655,0 2px 6px rgba(0,0,0,.3);
  display:none;
  z-index:20;
}
.motor-run-badge::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(#3aa655,#3aa655) center / 78% 15% no-repeat,
    linear-gradient(#3aa655,#3aa655) center / 15% 78% no-repeat;
}
.motor-photo-img.running ~ .motor-run-badge{
  display:block;
  animation:motor-badge-spin .9s linear infinite;
}
@keyframes motor-badge-spin{
  to{transform:rotate(360deg)}
}
.photo-board .wiring-hint{
  position:static;
  width:100%;
  max-width:none;
  margin-top:4px;
}
/* Wires now render in front of device cards (same as Level 7), which means
   a wire can visually cross over a card's live control button (PRESS
   START/STOP, Trip Overload). The original .wire-line{pointer-events:stroke}
   let a wire intercept clicks meant for whatever is underneath it — fine
   when nothing was ever underneath, but here it could swallow a button
   press. Disabling pointer events on wires here (Undo/Clear remain the way
   to remove a wire, same as every other board on the site) fixes that. */
.photo-board .wire-line{
  pointer-events:none;
}
@media(max-width:900px){
  .wire-device-photo{width:calc(170px * var(--wire-zoom,1))}
  .dev-plc{width:calc(320px * var(--wire-zoom,1))}
}
/* Mobile: keep the site's original horizontal-scroll wiring canvas instead
   of stacking every photo card full-width down the page. .wiring-panel
   already gets overflow-x:auto / overflow-y:hidden at this breakpoint
   (see the v5.28-era rules above) — we just need each device row to stay
   on one line so there's something to scroll to, rather than wrapping. */
.mobile-scroll-hint{
  display:none;
  align-items:center;
  gap:6px;
  margin-bottom:10px;
  padding:6px 12px;
  background:#eaf2fb;
  color:#1f5c94;
  border:1px solid #bcd7ef;
  border-radius:999px;
  font-size:.74rem;
  font-weight:700;
  animation:scroll-hint-nudge 1.6s ease-in-out infinite;
}
@keyframes scroll-hint-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(4px)}
}
@media(max-width:760px){
  .wire-device-photo{flex-shrink:0}
  .device-row-photo{flex-wrap:nowrap}
  .photo-board{overflow-x:visible}
  .mobile-scroll-hint{display:inline-flex}
}

/* ============================================================
   v5.60 Studio 5000-style ladder editor (Levels 1 & 2)
   ------------------------------------------------------------
   ONE authoritative pass, scoped to #ladderEditor so its ID
   specificity wins over the earlier layered .ladder-editor
   rules in this file. Goal: a clean Logix Designer monitor look
   - white canvas, dark power rails, a rung wire that runs
   through the contacts, tag operands as plain text, edit chrome
   only on hover, and Logix-green power flow (no boxes/glow)
   when a rung is true in RUN. Visual only: PLC scan + grading
   are unchanged. (The older v5.26-v5.59 ladder blocks above are
   now superseded and can be consolidated in a later cleanup.)
   ============================================================ */
#ladderEditor{
  background:#ffffff;
  padding:0;
  border-top:1px solid #c9d0d7;
  font-family:"Segoe UI",Arial,sans-serif;
}

/* Rung grid: [number] [left rail] [wire area] [right rail] [gutter] */
#ladderEditor .editable-rung{
  grid-template-columns:46px 2px minmax(560px,1fr) 2px 34px;
  min-width:840px;
  min-height:120px;
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px solid #e4e8ec;
  border-radius:0;
  background:#ffffff;
}
#ladderEditor .editable-rung:hover{background:#fafbfc}
#ladderEditor .editable-rung.selected-rung{
  background:#f4f8fc;
  box-shadow:inset 3px 0 0 #2f6fb0;
}

/* Rung number: bare integer, small + gray, at the top like Logix */
#ladderEditor .editor-rung-number{
  align-self:stretch;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:8px 4px 0;
  background:transparent;
  border:0;
  border-right:1px solid #eef1f4;
  color:#9aa4ae;
  font:600 12px/1 "Segoe UI",Consolas,monospace;
}

/* Power rails */
#ladderEditor .editor-rail{background:#232a31;width:2px}

/* Wire area: the rung wire runs horizontally through the symbols */
#ladderEditor .editor-rung-line{
  position:relative;
  align-self:center;
  min-height:96px;
  border-top:0;
  gap:32px;
  padding:0 22px;
  background:transparent;
}
#ladderEditor .editor-rung-line::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  background:#232a31;
  transform:translateY(-50%);
  z-index:0;
}

/* Instruction: symbol centered on the wire, operand floating above */
#ladderEditor .editor-inst{
  position:relative;
  z-index:1;
  min-width:96px;
  padding:0 12px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Tag operand: plain text above the symbol; editable box only on hover */
#ladderEditor .inst-tag{
  position:absolute;
  bottom:100%;
  left:0;right:0;
  margin:0 0 3px;
}
#ladderEditor .tag-select{
  width:100%;
  min-height:0;
  text-align:center;
  text-align-last:center;
  border:1px solid transparent;
  border-radius:3px;
  background:transparent;
  color:#1d2b38;
  font:600 12px/1.2 Consolas,"Segoe UI",monospace;
  padding:1px 3px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
#ladderEditor .editor-inst:hover .tag-select,
#ladderEditor .tag-select:focus{
  border-color:#9db4c9;
  background:#ffffff;
}

/* Contact / coil glyphs */
#ladderEditor .inst-symbol{
  margin:0;
  color:#1a2732;
  font:700 26px/1 Consolas,"Courier New",monospace;
  letter-spacing:0;
  background:#ffffff;
  padding:2px 3px;
}
#ladderEditor .inst-symbol.coil{font-size:28px}

/* Type toggle: hidden until you work on the instruction */
#ladderEditor .instruction-type-select{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  min-height:0;
  margin-top:4px;
  padding:1px 4px;
  border:1px solid #9aa6b0;
  border-radius:2px;
  background:#f2f5f8;
  color:#26404f;
  font:700 10px Consolas,monospace;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s;
}
#ladderEditor .editor-inst:hover .instruction-type-select,
#ladderEditor .editable-rung.selected-rung .instruction-type-select{
  opacity:1;
  pointer-events:auto;
}

/* Delete + drag chrome only on hover of the instruction */
#ladderEditor .delete-inst{opacity:0;transition:opacity .12s}
#ladderEditor .drag-handle{opacity:0;transition:opacity .12s}
/* Reveal edit chrome on hover (desktop) AND whenever the rung is selected. Touch
   devices have no hover, so tapping a rung to select it is how a phone/tablet user
   reaches the delete-instruction, branch-delete, and drag controls. The selected-rung
   rule also covers a branch's own delete (it lives on .editor-branch, not .editor-inst). */
#ladderEditor .editor-inst:hover .delete-inst,
#ladderEditor .editor-inst:hover .drag-handle,
#ladderEditor .editor-branch:hover > .delete-inst,
#ladderEditor .editor-branch:hover > .drag-handle,
#ladderEditor .editable-rung.selected-rung .delete-inst,
#ladderEditor .editable-rung.selected-rung .drag-handle{opacity:1}

/* Delete-rung only on hover/selection of the rung */
#ladderEditor .delete-rung{opacity:0 !important;transition:opacity .12s}
#ladderEditor .editable-rung:hover .delete-rung,
#ladderEditor .editable-rung.selected-rung .delete-rung{opacity:1 !important}

/* Parallel branch: dark verticals + a centered wire through each leg */
#ladderEditor .editor-branch{
  position:relative;
  z-index:1;
  min-width:150px;
  gap:30px;                 /* vertical separation between the two legs so the
                               lower leg's operand can't collide with the upper
                               leg's contact/dropdown */
  border-left:2px solid #232a31;
  border-right:2px solid #232a31;
  padding:10px 14px;
  background:transparent;
}
#ladderEditor .branch-path{
  position:relative;
  min-height:42px;
  border-top:0;
  justify-content:center;
  background:transparent;
}
#ladderEditor .branch-path::before{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:2px;
  background:#232a31;
  transform:translateY(-50%);
  z-index:0;
}

/* Coil sits out by the right rail */
#ladderEditor .output-inst{margin-left:auto}

/* --- Online monitor: green power flow when true (Logix-style) --- */
#ladderEditor .editor-inst.energized{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#ladderEditor .editor-inst.energized .inst-symbol{
  color:#00a651 !important;
  background:#ffffff !important;
  text-shadow:none !important;
}
#ladderEditor .editor-inst.energized .tag-select{
  color:#007e2e !important;
  background:transparent !important;
  border-color:transparent !important;
  font-weight:700;
}
/* Green stays on the true instruction only - no power-flow stubs bleeding
   onto the rung wire between devices. (Also suppresses the older energized
   ::before/::after stub rules from the v5.57/v5.58 passes above.) */
#ladderEditor .editor-inst.energized::before,
#ladderEditor .editor-inst.energized::after{display:none !important}

/* RUN-mode lock keeps the clean monitor look (beats the v5.59 washes) */
#ladderEditor.run-locked,
#ladderEditor.run-locked .editable-rung,
#ladderEditor.run-locked .editable-rung.selected-rung{background:#ffffff !important}
#ladderEditor.run-locked .editor-inst.energized{
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
#ladderEditor.run-locked .editor-inst.energized .inst-symbol{color:#00a651 !important;background:#fff !important}
#ladderEditor.run-locked .editor-inst.energized .tag-select{
  color:#007e2e !important;background:transparent !important;border-color:transparent !important;
}

/* ============================================================
   v5.61 Touch tap targets - on coarse (finger) pointers, grow the
   wiring terminal hit area so mobile users can place wires more
   easily. The tightly-packed PLC and contactor terminal blocks get
   a smaller bump so adjacent hit zones do not overlap; those dense
   areas benefit most from pinch-zoom (planned next).
   ============================================================ */
@media (pointer: coarse){
  .photo-stage .wire-terminal{width:18%;min-width:22px;max-width:38px}
  .dev-plc .photo-stage .wire-terminal{max-width:18px;max-height:18px;min-width:16px;min-height:16px}
  .dev-contactor .photo-stage .wire-terminal{max-width:18px;max-height:18px;min-width:16px;min-height:16px}
}

/* ============================================================
   v5.62 Board-scoped wiring zoom (touch)
   ------------------------------------------------------------
   Enlarges the wiring cards via --wire-zoom so dense terminals
   (e.g. the MicroLogix I/O row) spread apart and become tappable.
   The board grows to its content width and the wiring panel's
   existing scroll pans it - the SVG wire layer scrolls WITH the
   cards (both live inside #wiringBoard), so wires stay attached
   with no coordinate math. Zoom UI shows on touch only.
   ============================================================ */
#wiringBoard.wire-zoomed{width:max-content;min-width:0;max-width:none;overflow:visible}
.wire-zoom-controls{display:none;align-items:center;gap:6px}
@media (pointer: coarse){ .wire-zoom-controls{display:inline-flex} }
.wire-zoom-btn{
  width:38px;height:38px;border:0;border-radius:8px;background:#173b5e;color:#fff;
  font:700 20px/1 Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.wire-zoom-btn:disabled{opacity:.4;cursor:default}
.wire-zoom-level{min-width:44px;text-align:center;font:700 12px Consolas,"Courier New",monospace;color:#31485e}

/* ============================================================
   v5.63 Desktop terminal magnify on hover
   ------------------------------------------------------------
   On mouse (hover-capable) devices, the terminal under the cursor
   grows into an easy click target - a big help on densely-spaced
   blocks like the MicroLogix I/O row. The scale is around each
   terminal's own center (which sits on its coordinate point), so
   the center does not move and wires stay attached. Touch devices
   (no hover) are unaffected; they use the board zoom instead.
   ============================================================ */
@media (hover: hover){
  .photo-stage .wire-terminal{transition:transform .08s ease, box-shadow .08s ease}
  .photo-stage .wire-terminal:hover{
    transform:translate(-50%,-50%) scale(2);
    z-index:60;
    border:2px solid #2474c6;
    background:rgba(36,116,198,.15);
    box-shadow:0 0 0 3px rgba(36,116,198,.30), 0 2px 7px rgba(0,0,0,.22);
  }
}

/* ============================================================
   v5.64 Taller ladder rungs - more vertical breathing room so the
   operand (above), the symbol, and the type dropdown (below) are
   not mashed together, and each parallel-branch leg has room for
   its own full contact stack.
   ============================================================ */
#ladderEditor .editable-rung{min-height:170px}
#ladderEditor .editor-rung-line{min-height:140px}
#ladderEditor .inst-tag{margin-bottom:8px}
#ladderEditor .instruction-type-select{margin-top:8px}
#ladderEditor .editor-branch{gap:36px;padding-top:14px;padding-bottom:14px}
#ladderEditor .branch-path{min-height:72px}

/* v5.65 Vertical room INSIDE each rung so a parallel branch's delete (x) - which
   sits just above the branch - is not clipped at the rung's top edge. Symmetric
   top/bottom padding keeps the rung wire centered through the contacts. */
#ladderEditor .editable-rung{min-height:150px}
#ladderEditor .editor-rung-line{min-height:100px;padding-top:28px;padding-bottom:28px}

/* ============================================================
   v5.66 Hardwired E-Stop safety device
   ------------------------------------------------------------
   A drawn (SVG) red mushroom E-Stop with an NC contact block.
   Loaded by every level (all load trainer.css). The NC contact
   (terminals 11/12) is wired in series with the contactor coil,
   so the E-Stop drops the machine independent of the PLC scan.
   Latched state (mushroom pressed in) reveals the ACTIVATED badge.
   ============================================================ */
.dev-estop{width:calc(160px * var(--wire-zoom,1))}
.estop-photo-svg{display:block;width:100%;height:auto}
.dev-estop .photo-stage{overflow:visible}
.estop-latch-badge{
  position:absolute;left:50%;top:30%;
  transform:translate(-50%,-50%) rotate(-8deg);
  display:none;z-index:40;
  padding:4px 9px;border-radius:6px;
  background:#b71510;color:#fff;
  font:800 .68rem/1 Arial,sans-serif;letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(0,0,0,.38);
  pointer-events:none;white-space:nowrap;
}
.dev-estop.estop-latched .estop-latch-badge{display:block}
.dev-estop.estop-latched .photo-stage img{filter:brightness(.84) saturate(.92)}
/* Drawn (SVG) devices that stand in for photos that don't exist yet — the
   optional Level 3 decoys (stack light, interposing relay, reset PB). Sized
   to their natural proportions so a thin light tower is not stretched wide. */
.dev-stack{width:calc(120px * var(--wire-zoom,1))}
.dev-relay{width:calc(170px * var(--wire-zoom,1))}
.dev-resetpb{width:calc(150px * var(--wire-zoom,1))}
@media (max-width:720px){
  .dev-estop{width:calc(140px * var(--wire-zoom,1))}
  .dev-stack{width:calc(104px * var(--wire-zoom,1))}
  .dev-relay{width:calc(150px * var(--wire-zoom,1))}
  .dev-resetpb{width:calc(132px * var(--wire-zoom,1))}
}

/* ============================================================
   v5.67 Accessibility — reduced motion + visible keyboard focus
   (trainer.css is loaded by every level, so this applies site-wide
   except the marketing homepage, which uses style.css.)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
:focus-visible{outline:3px solid #2474c6;outline-offset:2px}
.photo-stage .wire-terminal:focus-visible,
.vfd-terminal:focus-visible,
.pneu-terminal:focus-visible,
.air-port:focus-visible{outline:3px solid #ffb300;outline-offset:1px;z-index:60}

/* ============================================================
   Dense-terminal hover LOUPE (ported to production). Rack + safety +
   contactor terminals magnify to 2.7x with a white halo + blue ring on
   hover so tightly-packed blocks are easy to read and wire. Center-
   anchored so landed wires stay put. Hover-only (touch keeps pinch-zoom).
   ============================================================ */
.dev-ps .photo-stage .wire-terminal,
.dev-clx .photo-stage .wire-terminal,
.dev-di .photo-stage .wire-terminal,
.dev-do .photo-stage .wire-terminal{
  max-width:15px;
  max-height:15px;
}
@media (hover: hover){
  .dev-plc      .photo-stage .wire-terminal:hover,
  .dev-ps       .photo-stage .wire-terminal:hover,
  .dev-clx      .photo-stage .wire-terminal:hover,
  .dev-di       .photo-stage .wire-terminal:hover,
  .dev-do       .photo-stage .wire-terminal:hover,
  .dev-safrelay .photo-stage .wire-terminal:hover,
  .dev-contactor .photo-stage .wire-terminal:hover{
    transform:translate(-50%,-50%) scale(2.7);
    z-index:70;
    border:2px solid #2474c6;
    background:rgba(232,243,255,.55);
    box-shadow:0 0 0 2px rgba(255,255,255,.95),
               0 0 0 4px rgba(36,116,198,.55),
               0 3px 11px rgba(0,0,0,.32);
  }
}
/* ============================================================
   DARK LADDER THEME  (John: "make the ladder logic dark on all levels")
   Matches Level 8's dark Studio-5000 monitor. Applies to the shared
   editable #ladderEditor canvas used by Levels 1, 3 and 7. Appended
   LAST so it wins the cascade over the v5.60 light block; keeps the
   originals' !important on the energized / run-locked rules. Visual
   only — PLC scan, rung editing and grading are unchanged. Level 8
   renders .ai-* sub-elements (not .editable-rung/.editor-inst), so it
   is untouched by these rules.
   ============================================================ */
#ladderEditor{background:#0f1c26;border-top:1px solid #26333d}
#ladderEditor .editable-rung{background:#0f1c26;border-bottom:1px solid #223140}
#ladderEditor .editable-rung:hover{background:#13222d}
#ladderEditor .editable-rung.selected-rung{background:#143247;box-shadow:inset 3px 0 0 #3f83c0}
#ladderEditor .editor-rung-number{color:#7f95a6;border-right:1px solid #223140}
#ladderEditor .editor-rail{background:#6b8296}
#ladderEditor .editor-rung-line::before{background:#4a6373}
#ladderEditor .inst-symbol{color:#eaf3fb;background:transparent}
#ladderEditor .inst-symbol.coil{color:#ffd082}
#ladderEditor .tag-select{color:#cfe4f5;background:transparent}
#ladderEditor .tag-select option{background:#0f1c26;color:#cfe4f5}
#ladderEditor .editor-inst:hover .tag-select,#ladderEditor .tag-select:focus{border-color:#42607a;background:#16303f}
#ladderEditor .instruction-type-select{background:#16303f;color:#d6e6f3;border-color:#42607a}
#ladderEditor .editor-branch{border-left-color:#6b8296;border-right-color:#6b8296}
#ladderEditor .branch-path::before{background:#4a6373}
/* energized = bright Logix-green glyph glowing on dark, no white box */
#ladderEditor .editor-inst.energized .inst-symbol{color:#2ee36a !important;background:transparent !important;text-shadow:0 0 8px rgba(46,227,106,.55) !important}
#ladderEditor .editor-inst.energized .tag-select{color:#8ff0b0 !important}
#ladderEditor.run-locked,#ladderEditor.run-locked .editable-rung,#ladderEditor.run-locked .editable-rung.selected-rung{background:#0f1c26 !important}
#ladderEditor.run-locked .editor-inst.energized .inst-symbol{color:#2ee36a !important;background:transparent !important}
#ladderEditor.run-locked .editor-inst.energized .tag-select{color:#8ff0b0 !important}
#ladderEditor .drag-handle{background:#16303f;color:#8ea6b8;border-color:#2c4256}
#ladderEditor .editor-rung-number{color:#7f95a6}