/* Level1 presentation only; ControlsTrainer5000 palette/layout from Levels9/10. */
.l1-studio{margin:12px;border:1px solid #0a1319;border-radius:9px;overflow:hidden;background:#16222b;color:#dce8f2;box-shadow:0 8px 26px #0a141c50;font-family:'Segoe UI',system-ui,sans-serif;min-width:0}
.l1s-title{display:flex;align-items:center;gap:9px;padding:10px 12px;background:linear-gradient(#33566f,#20394b);font-size:13px;flex-wrap:wrap}.l1s-title>span{font-size:11px;color:#a9c6da}.l1s-logo{background:#ef9b31;color:#22150a;padding:4px;border-radius:4px}.l1s-project{margin-left:auto;font-size:12px;color:#bcd3e3}
.l1-studio button,.l1-studio select{font:600 12px 'Segoe UI',sans-serif;background:#22394a;color:#eaf3fa;border:1px solid #526d80;border-radius:4px;padding:6px 9px;cursor:pointer}.l1-studio button:disabled{opacity:.4;cursor:default}.l1-studio button:hover:not(:disabled){background:#315775}.l1-studio :focus-visible{outline:2px solid #f1a63e;outline-offset:2px}
.l1s-toolbar,.l1s-online,.l1s-palette{padding:8px 12px;background:#25333d;border-bottom:1px solid #0f1a22;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}.l1s-loaded{margin-right:auto;color:#b8cfdd}.l1s-toolbar label{display:flex;align-items:center;gap:6px}.l1s-online{background:#1d2a33}.l1s-online .editor-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.l1s-online .plc-mode-box{background:#14202a;border-color:#405b6e;color:#dce8f2}.l1s-online .plc-mode-label{color:#a9bfce}.l1s-running #modeText{color:#60df85}.l1s-online #programModeNotice{color:#ffe1ac;background:#4b3922;border-color:#916c3e;flex-basis:100%}
.l1s-palette .instruction-palette{padding:0;margin:0;border:0;background:none;width:100%;color:#cad9e4;gap:8px}.l1s-palette .palette-note{color:#a5baca}.l1s-palette .instruction-btn{min-width:55px;padding:9px 12px;background:#182833}
.l1s-body{display:grid;grid-template-columns:180px minmax(0,1fr) 260px;min-width:0}.l1s-organizer{background:#131e26;padding:12px 10px;border-right:1px solid #0a1319;font-size:12px;overflow:auto;max-height:620px}.l1s-organizer h3,.l1s-tags h3{font-size:11px;color:#8eabbd;text-transform:uppercase;margin:0 0 14px}.l1s-controller{font-size:12px;line-height:1.8}.l1s-controller small{color:#89a4b8}.l1s-tree{line-height:2}.l1s-tree div{padding-left:8px;border-left:1px dotted #3a5061}.l1s-organizer button{display:block;margin:7px 0;width:100%;text-align:left;font-size:11px}.l1s-organizer [aria-current]{background:#204a6b}.l1s-explainer{color:#a5bac9;line-height:1.6;margin-top:22px}
.l1s-workspace{min-width:0;background:#0f1c26;display:flex;flex-direction:column}.l1s-routine-tab{background:#223544;padding:10px;color:#eaf3fa;font-size:12px;border-bottom:1px solid #4c687e;display:flex;justify-content:space-between;gap:10px}.l1s-routine-tab span{color:#99b0c2}.l1s-ladder-scroll{overflow:auto;max-height:620px;min-height:340px;flex:1}.l1-studio #ladderEditor{border:0;border-radius:0;margin:0;padding:14px;min-width:1050px;background:#0f1c26}.l1-studio .editable-rung{background:#12212d;color:#cadde9;border-color:#344f63;min-height:130px}.l1-studio .editable-rung.selected-rung{background:#19364b;box-shadow:inset 4px 0 #5daadd}.l1-studio .editor-rung-number{color:#97b4cb;background:#142737;border-color:#365064}.l1-studio .editor-rung-line{flex-wrap:nowrap;background-color:transparent}.l1-studio .editor-inst,.l1-studio .selected-rung .editor-inst{background:#172b3b;color:#d7e8f6;border-color:#44637a}.l1-studio .editor-inst select{max-width:145px;font-size:11px;padding:4px}.l1-studio .inst-symbol{color:#dfedf8;font-family:Consolas,monospace}.l1-studio .editor-rail{background:#abc5d7}.l1-studio .editor-branch{border-color:#abc5d7}.l1-studio .branch-path{border-color:#abc5d7}.l1-studio .editor-inst.energized{background:#153b29;border-color:#56c882}.l1-studio .editor-inst.energized .inst-symbol{color:#6ff2a0}.l1-studio .editor-inst.energized .tag-select{color:#9af3b8;background:#163c2b}.l1-studio .delete-inst,.l1-studio .delete-rung{color:#f0b0aa;background:#412b2f}.l1-studio .drag-handle{color:#94b2c7}
.l1s-tags{min-width:0;overflow:auto;max-height:620px;padding:12px 8px;background:#16252f;border-left:1px solid #0a1319}.l1s-tags .tag-table-wrap{margin:0;padding:0;overflow:visible;border:0}.l1s-tags .tag-table{width:100%;font-size:11px;border:0;background:transparent}.l1s-tags .tag-table th,.l1s-tags .tag-table td{white-space:normal;overflow-wrap:anywhere;padding:7px 4px;background:transparent;color:#c5d8e6;border-color:#334c5e}.l1s-tags .tag-table th{color:#8fadc2}.l1s-tags .tag-table th:nth-child(3),.l1s-tags .tag-table td:nth-child(3){display:none}
.l1s-status{display:flex;align-items:center;gap:16px;padding:8px 12px;background:#1a2730;color:#a9bdca;font-size:11px;flex-wrap:wrap}.l1s-status .scan-box{margin:0 0 0 auto;padding:0;background:none;border:0;display:flex;gap:14px}.l1s-status .scan-box div{padding:0;background:none;border:0;min-width:0}.l1s-status .scan-box span,.l1s-status .scan-box strong{color:#b9cddd;font-size:11px}.l1s-help{margin:12px;padding:12px;border:1px solid #8ca1af;border-radius:7px}.l1s-help>summary{cursor:pointer;font-weight:700}
.l1-studio.l1s-max{position:fixed;inset:0;z-index:9999;margin:0;border-radius:0;display:flex;flex-direction:column}.l1s-max .l1s-body{flex:1;min-height:0}.l1s-max .l1s-organizer,.l1s-max .l1s-tags,.l1s-max .l1s-ladder-scroll{max-height:none;min-height:0}.l1s-max .l1s-title,.l1s-max .l1s-toolbar,.l1s-max .l1s-online,.l1s-max .l1s-palette,.l1s-max .l1s-status{flex:none}
@media(max-width:1100px){.l1s-body{grid-template-columns:150px minmax(0,1fr)}.l1s-tags{grid-column:1/-1;max-height:210px}.l1s-tags .tag-table{max-width:750px}.l1s-tags .tag-table th:nth-child(3),.l1s-tags .tag-table td:nth-child(3){display:table-cell}.l1s-max .l1s-body{overflow:auto}.l1s-max .l1s-tags{max-height:180px}}
@media(max-width:650px){.l1-studio{margin:8px}.l1s-body{grid-template-columns:minmax(0,1fr)}.l1s-organizer{display:none}.l1s-tags{max-height:190px}.l1s-title>span,.l1s-project{display:none}.l1s-title{gap:6px}.l1s-title strong{font-size:12px}.l1s-title button{margin-left:auto}.l1s-palette .instruction-palette>strong{display:none}.l1s-status .scan-box{margin-left:0}.l1s-ladder-scroll{min-height:300px}.l1s-max .l1s-body{display:flex;flex-direction:column}.l1s-max .l1s-workspace{flex:1;min-height:0}.l1s-max .l1s-tags{display:none}.l1s-max .palette-note{display:none}}

/* Retain the full terminal/type description in the tag browser. */
.l1s-tags .tag-table thead{display:none}.l1s-tags .tag-table tbody{display:block}.l1s-tags .tag-table tr{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #334c5e}.l1s-tags .tag-table td{border:0}.l1s-tags .tag-table td:first-child{font-weight:700}.l1s-tags .tag-table td:nth-child(3){display:block;grid-column:1/-1;color:#a5becf;padding-top:0;font-size:10px;line-height:1.5}.l1s-palette .instruction-palette>strong{color:#a5baca}
/* Fullscreen rows must shrink to the viewport so the ladder owns its scrollbar. */
.l1s-max .l1s-body{grid-template-rows:minmax(0,1fr);overflow:hidden}
.l1s-max .l1s-workspace{min-height:0;overflow:hidden}
.l1s-max .l1s-routine-tab{flex-shrink:0}
.l1s-max .l1s-ladder-scroll{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}
@media(min-width:651px) and (max-width:1100px){.l1s-max .l1s-body{grid-template-rows:minmax(0,1fr) 140px}}

/* ============================================================
   Level 1 ladder look (Claude, 10/5). Appended last; visual only, no scan or grading change.
   - Whole rungs, coils included, fit the workspace at 1366 px (the old min-width:1050px forced sideways scrolling).
   - Operand above the glyph, glyph on the wire (the wire stops at the contact), the field contact the bit reads
     (N.O./N.C.) under it, and a rung comment on top.
   - Edit tools (XIC/XIO, delete, drag, + contact) only on the selected rung, under the pointer or with keyboard
     focus, in a row UNDER the instruction, never on the wire or over a glyph. Hidden in RUN.
   ============================================================ */
.l1-studio #ladderEditor{min-width:780px;padding:0}
.l1-studio #ladderEditor .editable-rung{--rung-bg:#0f1c26;background:var(--rung-bg);grid-template-columns:34px 2px minmax(0,1fr) 2px 30px;min-width:0;min-height:0}
.l1-studio #ladderEditor .editable-rung:hover{--rung-bg:#13222d}
.l1-studio #ladderEditor .editable-rung.selected-rung{--rung-bg:#143247}
.l1-studio #ladderEditor.run-locked .editable-rung,.l1-studio #ladderEditor.run-locked .editable-rung.selected-rung{--rung-bg:#0f1c26}
.l1-studio #ladderEditor .editor-rung-number{padding-top:8px}
.l1-studio #ladderEditor .editor-rung-line{gap:10px;padding:24px 10px 20px;min-height:110px}
.l1-studio #ladderEditor .rung-comment{position:absolute;top:6px;left:12px;right:12px;color:#86b6d8;font:600 11.5px/1.3 'Segoe UI',Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.l1-studio #ladderEditor .rung-comment::before{content:"// ";color:#5f86a3}
/* instruction: operand / glyph / field contact */
.l1-studio #ladderEditor .editor-inst{box-sizing:border-box;min-width:82px;padding:0 4px}
.l1-studio #ladderEditor .output-inst{min-width:92px}
/* series contacts share the rung's spare width (so their addresses never touch); the coil keeps the rest at the right rail */
.l1-studio #ladderEditor .editor-rung-line>.contact-inst{flex:1 1 82px;max-width:116px}
.l1-studio #ladderEditor .inst-tag{left:-14px;right:-14px;margin:0 0 5px;text-align:center}
.l1-studio #ladderEditor .inst-tag select{appearance:none;-webkit-appearance:none;width:auto;min-width:0;max-width:118px;padding:1px 4px;border:1px solid transparent;border-radius:3px;background:transparent;color:#e6f0f7;font:700 11px/1.3 Consolas,'Courier New',monospace;text-align:center;text-align-last:center;cursor:pointer}
.l1-studio #ladderEditor .selected-rung .inst-tag select{border-color:transparent;border-bottom:1px dashed #5d88a8;border-radius:0;background:transparent}
.l1-studio #ladderEditor .editor-inst:hover>.inst-tag select,.l1-studio #ladderEditor .inst-tag select:focus{border:1px solid #4f7695;border-radius:3px;background:#16303f}
.l1-studio #ladderEditor .inst-symbol{font-size:24px;padding:1px 2px;background:var(--rung-bg)}
.l1-studio #ladderEditor .inst-symbol.coil{font-size:25px}
.l1-studio #ladderEditor .inst-note{position:absolute;top:100%;left:-14px;right:-14px;margin-top:3px;color:#93adc0;font:600 9px/1.3 Consolas,'Courier New',monospace;text-align:center;white-space:nowrap;cursor:help}
.l1-studio #ladderEditor .inst-note:empty{display:none}
/* tools row under the instruction */
.l1-studio #ladderEditor .inst-tools{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:20px;display:flex;align-items:center;gap:4px;white-space:nowrap;z-index:6;opacity:0;transition:opacity .12s}
.l1-studio #ladderEditor .inst-tools,.l1-studio #ladderEditor .inst-tools>*{pointer-events:none}
.l1-studio #ladderEditor .selected-rung .inst-tools,.l1-studio #ladderEditor .editor-inst:hover>.inst-tools,.l1-studio #ladderEditor .editor-inst:focus-within>.inst-tools{opacity:1}
.l1-studio #ladderEditor .selected-rung .inst-tools>*,.l1-studio #ladderEditor .editor-inst:hover>.inst-tools>*,.l1-studio #ladderEditor .editor-inst:focus-within>.inst-tools>*{pointer-events:auto}
.l1-studio #ladderEditor .inst-tools .instruction-type-select{position:static;transform:none;margin:0;opacity:1;width:auto;height:22px;min-height:0;padding:0 4px;font:700 10px Consolas,monospace}
.l1-studio #ladderEditor .inst-tools .delete-inst{position:static;opacity:1;width:22px;height:22px;padding:0;border:1px solid #6c3a3f;border-radius:3px;background:#3a2427;color:#ffb4ab;font:700 14px/20px Arial,sans-serif}
.l1-studio #ladderEditor .inst-tools .delete-inst:hover{background:#5a2a30;color:#fff}
.l1-studio #ladderEditor .inst-tools .drag-handle{position:static;opacity:1;width:18px;height:22px;font-size:12px;display:none}
/* the grip only for the instruction under the pointer (or focused): a whole selected rung of grips crowds the row */
.l1-studio #ladderEditor .editor-inst:hover>.inst-tools .drag-handle,.l1-studio #ladderEditor .editor-inst:focus-within>.inst-tools .drag-handle{display:grid}
.l1-studio #ladderEditor .output-inst .inst-tools{display:none}
/* parallel branch drawn like a real one: the rung wire stops at the branch (no "jumper" through its middle), the side
   rails run only from the upper leg's wire to the lower leg's wire, and each leg's wire reaches both rails */
.l1-studio #ladderEditor .editor-branch{min-width:0;gap:20px;padding:10px 8px;border-left:0;border-right:0;background:var(--rung-bg)}
.l1-studio #ladderEditor .editor-branch::before,.l1-studio #ladderEditor .editor-branch::after{content:"";position:absolute;top:37px;bottom:37px;width:2px;background:#6b8296;z-index:0}
.l1-studio #ladderEditor .editor-branch::before{left:0}
.l1-studio #ladderEditor .editor-branch::after{right:0}
.l1-studio #ladderEditor .branch-path::before{left:-8px;right:-8px;background:#6b8296}
/* compact legs; a small round + at the end of each leg (selected rung only) */
.l1-studio #ladderEditor .selected-rung .editor-branch{gap:42px}
.l1-studio #ladderEditor .branch-path{min-height:54px;gap:10px;padding:0 26px 0 6px;justify-content:center}
.l1-studio #ladderEditor .branch-add{position:absolute;right:3px;top:50%;transform:translateY(-50%);z-index:4;width:20px;height:20px;padding:0;border:1px solid #4f7695;border-radius:50%;background:#16303f;color:#d5ebfb;font:700 15px/18px Arial,sans-serif;opacity:0;pointer-events:none}
.l1-studio #ladderEditor .selected-rung .branch-add,.l1-studio #ladderEditor .branch-path:hover>.branch-add,.l1-studio #ladderEditor .branch-add:focus-visible{opacity:1;pointer-events:auto}
.l1-studio #ladderEditor .branch-add:hover{background:#2a5675}
/* the branch's own grip and delete sit at its BOTTOM corners: the top is taken by the rung comment and the operands */
.l1-studio #ladderEditor .editor-branch>.branch-delete{top:auto;bottom:-13px;right:-12px;width:20px;height:20px;line-height:18px;font-size:13px;border-radius:3px}
.l1-studio #ladderEditor .editor-branch>.drag-handle{top:auto;bottom:-13px;left:-12px;width:20px;height:18px}
.l1-studio #ladderEditor .editor-branch>.branch-delete,.l1-studio #ladderEditor .editor-branch>.drag-handle{pointer-events:none}
.l1-studio #ladderEditor .selected-rung .editor-branch>.branch-delete,.l1-studio #ladderEditor .selected-rung .editor-branch>.drag-handle,.l1-studio #ladderEditor .editor-branch:hover>.branch-delete,.l1-studio #ladderEditor .editor-branch:hover>.drag-handle{pointer-events:auto}
/* RUN: monitor only */
.l1-studio #ladderEditor.run-locked .inst-tools,.l1-studio #ladderEditor.run-locked .branch-add,.l1-studio #ladderEditor.run-locked .editor-branch>.branch-delete,.l1-studio #ladderEditor.run-locked .editor-branch>.drag-handle{display:none}
.l1-studio #ladderEditor.run-locked .selected-rung .editor-branch{gap:20px}
.l1-studio #ladderEditor.run-locked .inst-tag select{cursor:default;border-color:transparent;background:transparent}
/* ===== Branch layout (Claude, 10/6; John: follow real PLC programming software as the example) =====
   The top leg IS the rung: it sits on the rung wire, and the lower leg hangs below it as an open box. Both legs share
   one grid cell, so the box is as wide as the longer leg; the lower leg is then moved down 84px (106px on the selected
   rung in PROGRAM, where the tool row under each instruction needs room). Every device reads the same on both legs:
   tag name above, instruction on the wire, I/O address below. The rung number sits level with the rung wire. */
.l1-studio #ladderEditor .editor-branch{display:grid;gap:0;padding:0 8px}
.l1-studio #ladderEditor .editor-branch>.branch-path{grid-area:1/1;border-top:0}
.l1-studio #ladderEditor .editor-branch>.branch-path+.branch-path{position:relative;top:84px}
.l1-studio #ladderEditor .editor-branch::before,.l1-studio #ladderEditor .editor-branch::after{top:27px;bottom:auto;height:84px}
.l1-studio #ladderEditor .editor-rung-line:has(>.editor-branch){min-height:195px;padding-top:33px;padding-bottom:108px}
.l1-studio #ladderEditor .editor-rung-line:has(>.editor-branch)::before{top:59px}
.l1-studio #ladderEditor .editor-branch>.branch-delete,.l1-studio #ladderEditor .editor-branch>.drag-handle{top:131px;bottom:auto}
.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-branch>.branch-path+.branch-path{top:106px}
.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-branch::before,.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-branch::after{height:106px}
.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-rung-line:has(>.editor-branch){min-height:226px;padding-bottom:139px}
.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-branch>.branch-delete,.l1-studio #ladderEditor:not(.run-locked) .selected-rung .editor-branch>.drag-handle{top:153px}
.l1-studio #ladderEditor .editor-rung-number{padding-top:50px}
.l1-studio #ladderEditor .editable-rung:has(.editor-branch) .editor-rung-number{padding-top:53px}
.l1-studio #ladderEditor .editor-branch{margin:0 8px}   /* two branches side by side stay two boxes, joined by the rung wire */
.l1-studio #ladderEditor .editor-branch{flex:0 0 auto;min-width:max-content}   /* a branch never shrinks below its legs: a long rung scrolls instead */
/* every rung as wide as the longest one, so the right power rail is one straight line (as in PLC software) */
.l1-studio #ladderEditor{display:grid;grid-template-columns:minmax(max-content,auto);align-content:start}
.l1-studio #ladderEditor .editable-rung{grid-template-columns:34px 2px minmax(max-content,1fr) 2px 30px}
.l1-studio #ladderEditor{width:max-content;min-width:100%;overflow:visible}   /* one scrollbar: the workspace scrolls, not the ladder inside it */
/* Ladder editing (Claude, 10/6; John: "remove the red x's", "one click highlights the device and then the user has to
   use the delete key", "click the rung number to highlight that rung number block, then hit the delete key"): no x buttons.
   A click highlights one device, or a whole rung by its number; Delete removes it. The instruction type reads like the tag
   name: underlined text that opens its list, not a boxed drop-down. The right-hand column no longer holds a rung button. */
.l1-studio #ladderEditor .editable-rung{grid-template-columns:34px 2px minmax(max-content,1fr) 2px 12px}
.l1-studio #ladderEditor .editor-inst[data-pick]{cursor:pointer;border-radius:3px}
.l1-studio #ladderEditor .editor-inst[data-pick]:focus{outline:none}
.l1-studio #ladderEditor .editor-inst[data-pick]:focus-visible:not(.ladder-picked)::after{content:"";position:absolute;left:-16px;right:-16px;top:-30px;bottom:-19px;border:2px dashed #4fb3ff;border-radius:4px;pointer-events:none;z-index:7}
.l1-studio #ladderEditor .editor-inst.ladder-picked::after{content:"";position:absolute;left:-16px;right:-16px;top:-30px;bottom:-19px;border:2px solid #4fb3ff;border-radius:4px;background:rgba(79,179,255,.12);box-shadow:0 0 12px rgba(79,179,255,.35);pointer-events:none;z-index:7}
.l1-studio #ladderEditor .editor-rung-number[data-pick]{cursor:pointer;user-select:none;transition:background .12s,color .12s}
.l1-studio #ladderEditor .editor-rung-number[data-pick]:hover{color:#e4f2ff;background:#1d3a50}
.l1-studio #ladderEditor .editor-rung-number[data-pick]:focus{outline:none}
.l1-studio #ladderEditor .editor-rung-number[data-pick]:focus-visible{outline:2px dashed #4fb3ff;outline-offset:-3px}
.l1-studio #ladderEditor .editor-rung-number.ladder-picked,.l1-studio #ladderEditor .editor-rung-number.ladder-picked:hover{background:#2f7fc1;color:#fff}
.l1-studio #ladderEditor .editable-rung.rung-picked{box-shadow:inset 0 0 0 2px #4fb3ff}
.l1-studio #ladderEditor .inst-tools .instruction-type-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;min-height:0;padding:1px 3px;border:0;border-bottom:1px dashed #5d88a8;border-radius:0;background:transparent;color:#cfe4f5;font:600 12px/1.2 Consolas,"Segoe UI",monospace;text-align:center;text-align-last:center;cursor:pointer}
.l1-studio #ladderEditor .inst-tools .instruction-type-select:hover,.l1-studio #ladderEditor .inst-tools .instruction-type-select:focus{border:0;border-bottom:1px dashed #8cc4ec;background:#16303f;outline:none}
.l1-studio #ladderEditor .instruction-type-select option{background:#0f1c26;color:#cfe4f5}
/* (fix1018 L1-08) the logic-check note above the status bar (js/level1-studio.js) */
.l1s-logic{margin:0;padding:8px 12px;background:#fff4df;color:#4a3000;border-top:2px solid #c97a10;font:13px/1.45 system-ui,sans-serif}.l1s-logic[hidden]{display:none}.l1s-logic button{margin-left:4px;padding:3px 9px;border:1px solid #8a5a10;border-radius:5px;background:#fff;color:#4a3000;font:600 12px/1.3 system-ui,sans-serif;cursor:pointer}