/* Controls Trainer — Level 1 phone ladder editor (cl-batch116). Used by js/l1-phone-ladder.js on phones (upright up to
   700px wide, or a touch screen held sideways). The desktop ladder stays in the page, hidden, and keeps being redrawn: the
   phone editor changes the same program. */
.ladder-panel.l1lp-on .l1s-toolbar,.ladder-panel.l1lp-on .l1s-palette,.ladder-panel.l1lp-on .l1s-organizer,
.ladder-panel.l1lp-on .l1s-workspace,.ladder-panel.l1lp-on #addRung,.ladder-panel.l1lp-on #deletePicked,
.ladder-panel.l1lp-on #l1sFullscreen{display:none !important}
.ladder-panel.l1lp-on .l1s-body{display:block !important}
.l1lp[hidden],.l1lp-back[hidden],.l1lp-scrim[hidden]{display:none !important}

.l1lp,.l1lp-scrim,.l1lp-toast{--lp-bg:#0b1724;--lp-surface:#102335;--lp-raised:#16304a;--lp-line:#24435f;--lp-canvas:#0d1d2c;
  --lp-ink:#e7eef5;--lp-muted:#9fb3c6;--lp-accent:#f28c28;--lp-live:#2fbf71;--lp-live-soft:rgba(47,191,113,.18);--lp-warn:#ffcf7a;
  --lp-ui:system-ui,"Segoe UI",Arial,sans-serif;--lp-tag:ui-monospace,"SF Mono",Consolas,monospace;
  font-family:var(--lp-ui);font-size:15px;line-height:1.35;color:var(--lp-ink);-webkit-tap-highlight-color:transparent}
.l1lp *,.l1lp-scrim *{box-sizing:border-box}
.l1lp button,.l1lp-scrim button{font-family:inherit;color:inherit;margin:0;min-width:0;box-shadow:none;text-transform:none;letter-spacing:normal}
.l1lp :focus-visible,.l1lp-scrim :focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}
.l1lp{background:var(--lp-bg);border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);padding:10px}
.l1lp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.l1lp-where{flex:1 1 180px;min-width:0;display:flex;align-items:center;gap:8px;color:var(--lp-muted);font-size:13px}
.l1lp-where b{color:var(--lp-ink);display:block;font-size:15px}
.l1lp-where>span,.l1lp-wt{display:block;min-width:0}
.l1lp-wt span{display:block}
.l1lp-tools{display:flex;gap:6px}
.l1lp-btn{font:600 14px var(--lp-ui);background:var(--lp-raised);border:1px solid var(--lp-line);border-radius:10px;padding:7px 12px;min-height:40px;cursor:pointer;white-space:nowrap;color:var(--lp-ink)}
.l1lp-btn:disabled{opacity:.4;cursor:default}
.l1lp-back{margin:8px 10px;color:#ffd7ad;border-color:var(--lp-accent);background:#2a1c0c}
.l1lp-main{display:flex;flex-direction:column;gap:10px}

/* rung cards */
.l1lp-card{display:block;width:100%;text-align:left;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:14px;padding:10px 10px 8px;cursor:pointer}
.l1lp-card:active{background:var(--lp-raised)}
.l1lp-rhead{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.l1lp-rnum{font:800 13px var(--lp-tag);background:#0d1b28;border:1px solid var(--lp-line);border-radius:6px;padding:2px 7px;flex:none}
.l1lp-cmt{flex:1;min-width:0;color:#8fc2ef;font-size:13px;line-height:1.3}
.l1lp-chip{font:700 11px var(--lp-ui);border-radius:999px;padding:2px 7px;flex:none}
.l1lp-chip.on{background:var(--lp-live-soft);color:var(--lp-live)}
.l1lp-mini{display:block;width:100%;height:auto;margin-top:4px}
.l1lp-rfoot{display:flex;justify-content:space-between;color:var(--lp-muted);font-size:12px;margin-top:2px}

/* the zoomable drawing */
.l1lp-zv{position:relative;overflow:hidden;background:var(--lp-canvas);border:1px solid var(--lp-line);border-radius:12px;touch-action:pan-y;flex:none;-webkit-user-select:none;user-select:none}
.l1lp-zv.l1lp-zoomed{touch-action:none}
.l1lp-zc{position:absolute;left:0;top:0;transform-origin:0 0}
.l1lp-zc svg{display:block;max-width:none}
.l1lp-zbtns{position:absolute;right:6px;bottom:6px;display:flex;gap:6px}
.l1lp-zbtns button{min-width:38px;height:38px;padding:0 9px;border-radius:10px;border:1px solid var(--lp-line);background:rgba(16,35,53,.94);font:700 18px var(--lp-ui);cursor:pointer;color:var(--lp-ink)}
.l1lp-zbtns .l1lp-zfit{font-size:12.5px}
.l1lp-zpct{position:absolute;left:8px;bottom:14px;font:600 11px var(--lp-tag);color:var(--lp-muted);pointer-events:none}
.l1lp-hit{cursor:pointer;outline:none}
.l1lp-hr{fill:transparent}
.l1lp-hit.sel .l1lp-hr,.l1lp-hit:focus-visible .l1lp-hr{fill:rgba(242,140,40,.13);stroke:var(--lp-accent);stroke-width:2}
.l1lp-hint{color:var(--lp-muted);font-size:12.5px;margin:-4px 2px 0}
.l1lp-rcmt{color:#8fc2ef;font-size:13px;margin:0 2px}

/* one row per instruction */
.l1lp-seq{display:flex;flex-direction:column}
.l1lp-rail{font:700 11px var(--lp-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--lp-muted);padding:2px 4px}
.l1lp-rail-r{text-align:right}
.l1lp-slot{display:flex;align-items:center;min-height:32px;margin:-2px 0;padding:0 4px 0 22px;position:relative;cursor:pointer;background:none;border:0;width:100%}
.l1lp-slot::before{content:"";position:absolute;left:30px;top:0;bottom:0;border-left:2px solid var(--lp-line)}
.l1lp-plus{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--lp-line);display:flex;align-items:center;justify-content:center;font:700 17px var(--lp-ui);color:var(--lp-muted);background:var(--lp-bg)}
.l1lp-ins{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:12px;padding:7px 12px;min-height:52px;cursor:pointer;scroll-margin:70px}
.l1lp-ins.picked{border-color:var(--lp-accent);box-shadow:0 0 0 2px rgba(242,140,40,.35)}
.l1lp-ins.pass{border-color:var(--lp-live);background:linear-gradient(90deg,var(--lp-live-soft),var(--lp-surface) 60%)}
.l1lp-sym{font:700 18px var(--lp-tag);width:46px;text-align:center;flex:none;letter-spacing:-1px}
.l1lp-ins.pass .l1lp-sym{color:var(--lp-live)}
.l1lp-it{flex:1;min-width:0}
.l1lp-it b{display:block;font:700 15px var(--lp-tag);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l1lp-it small{display:block;color:var(--lp-muted);font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l1lp-ty{font:800 11px var(--lp-tag);color:var(--lp-muted);border:1px solid var(--lp-line);border-radius:6px;padding:2px 6px;flex:none}
.l1lp-ins.coil{background:#132a20;border-color:#2b5a41}
.l1lp-ins.coil.pass{background:linear-gradient(90deg,rgba(47,191,113,.3),#132a20 70%)}
.l1lp-branch{border:1.5px solid #3b5f80;border-radius:14px;padding:8px 8px 6px;display:flex;flex-direction:column;gap:6px;background:rgba(22,48,74,.35)}
.l1lp-bhead{display:flex;align-items:center;gap:8px;font:700 12px var(--lp-ui);color:#8fc2ef}
.l1lp-bdel{margin-left:auto !important;background:transparent;border:1px solid var(--lp-line);border-radius:8px;padding:5px 9px;color:var(--lp-muted) !important;font:600 12px var(--lp-ui);cursor:pointer;min-height:34px}
.l1lp-leg{border-left:3px solid #3b5f80;padding-left:8px}
.l1lp-leg-l{font-size:12px;color:var(--lp-muted);margin:2px 0}
.l1lp-danger{align-self:flex-start;background:none;border:0;color:#ff8f88 !important;font-weight:700;padding:8px 2px;cursor:pointer;min-height:40px}
.l1lp-foot{margin:12px 2px 0;font-size:13px}
.l1lp-link{background:none !important;border:0 !important;min-height:40px;padding:6px 0;color:#8fc2ef !important;text-decoration:underline;cursor:pointer;font-size:13px}
/* in RUN the program is read-only: no insert points, branch removal or edit tools */
.l1lp-run .l1lp-slot{min-height:10px;pointer-events:none}
.l1lp-run .l1lp-plus,.l1lp-run .l1lp-bdel,.l1lp-run .l1lp-danger{display:none}
/* the operator strip from the wiring view, shown under this editor */
.l1lp + .l1p-ops{border-top:0;margin:0 0 4px}

/* level1-studio.css styles every button in the Studio (.l1-studio button: font, colours, border, padding, and a hover
   colour that would stick after a tap on a phone): the editor's own buttons keep their look */
.l1lp .l1lp-btn,.l1-studio .l1lp-back{font:600 14px var(--lp-ui);border:1px solid var(--lp-line);border-radius:10px;padding:7px 12px}
.l1lp .l1lp-btn{background:var(--lp-raised) !important}
.l1-studio .l1lp-back{background:#2a1c0c !important;border-color:var(--lp-accent);color:#ffd7ad}
.l1lp .l1lp-card{font:inherit;width:100%;border:1px solid var(--lp-line);border-radius:14px;padding:10px 10px 8px;background:var(--lp-surface) !important}
.l1lp .l1lp-card:active{background:var(--lp-raised) !important}
.l1lp .l1lp-slot{width:100%;border:0;border-radius:0;padding:0 4px 0 22px;background:none !important}
.l1lp .l1lp-ins{font:inherit;width:100%;border:1px solid var(--lp-line);border-radius:12px;padding:7px 12px;background:var(--lp-surface) !important}
.l1lp .l1lp-ins.picked{border-color:var(--lp-accent)}
.l1lp .l1lp-ins.pass{border-color:var(--lp-live);background:linear-gradient(90deg,var(--lp-live-soft),var(--lp-surface) 60%) !important}
.l1lp .l1lp-ins.coil{border-color:#2b5a41;background:#132a20 !important}
.l1lp .l1lp-ins.coil.pass{background:linear-gradient(90deg,rgba(47,191,113,.3),#132a20 70%) !important}
.l1lp .l1lp-bdel{font:600 12px var(--lp-ui);border:1px solid var(--lp-line);border-radius:8px;padding:5px 9px;background:transparent !important}
.l1lp .l1lp-danger{font:700 15px var(--lp-ui);border:0;padding:8px 2px;background:none !important}
.l1lp .l1lp-link{font:13px var(--lp-ui);border:0;padding:6px 0;background:none !important}
.l1lp .l1lp-zbtns button{font:700 18px var(--lp-ui);border:1px solid var(--lp-line);border-radius:10px;padding:0 9px;background:rgba(16,35,53,.94) !important}
.l1lp .l1lp-zbtns .l1lp-zfit{font-size:12.5px}

/* (cl-batch117, John: "Need that button to stand out more") "‹ All rungs" is the orange primary button, at the top and the
   end of a rung, and floats at the top of the screen while the top one is scrolled away */
.l1lp .l1lp-backbtn{background:var(--lp-accent) !important;border-color:var(--lp-accent);color:#1a0f02 !important;font:800 15px var(--lp-ui);min-height:44px;padding:8px 14px;box-shadow:0 2px 10px rgba(242,140,40,.3)}
.l1lp-endbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
/* (cl-batch120) the floating copy is a slim bar across the top of the screen (an app header the page scrolls under), not a
   pill over the first row's name */
.l1lp-float{position:fixed;top:0;left:0;right:0;z-index:9300;display:flex;align-items:center;gap:12px;width:100%;
  padding:calc(6px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 6px calc(12px + env(safe-area-inset-left,0px));
  font:700 14px system-ui,"Segoe UI",Arial,sans-serif;color:#d9e6f2;background:rgba(9,22,35,.96);border:0;border-bottom:1px solid #2a4a66;
  box-shadow:0 4px 14px rgba(0,0,0,.35);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.l1lp-fpill{flex:none;background:#f28c28;color:#1a0f02;font-weight:800;font-size:15px;border-radius:999px;padding:8px 14px;min-height:36px;display:inline-flex;align-items:center}
.l1lp-ftxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#adc0d1}
/* (cl-batch120) an edit that fails the lesson's logic check says so at the top of the editor (the Studio's own note is far below) */
.l1lp-warn{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#3a2410;border:1px solid #b36b1f;color:#ffe2bf;font:400 13px/1.5 system-ui,"Segoe UI",Arial,sans-serif}
.l1lp-warn b{color:#ffd29c}
.l1lp-warn span{display:block;margin-top:4px;color:#f6c48d}
.l1lp-float[hidden]{display:none !important}
.l1lp-float:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* the rung drawing handles every touch itself (the script passes a vertical drag to the page while the rung fits) */
/* (cl-batch119) the rung drawing is pan-y at fit like every drawing here (the browser scrolls a finger, with momentum),
   none only while zoomed (.l1lp-zoomed above) */
/* the whole editor: a pinch never magnifies the page (cards open their rung, the drawings zoom themselves) ... */
.l1lp,.l1lp-scrim{touch-action:pan-y}
/* ... but if the page is magnified anyway, every part hands the pinch back to the browser so it can zoom out */
.l1lp.l1lp-pagezoom,.l1lp.l1lp-pagezoom *,.l1lp-scrim.l1lp-pagezoom,.l1lp-scrim.l1lp-pagezoom *{touch-action:manipulation!important}

/* sheet and toast (on <body>, above the site's bottom bar and checklist, below the tutorial) */
.l1lp-scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(3,9,15,.6);display:flex;align-items:flex-end;justify-content:center;z-index:9450}
.l1lp-sheet{width:100%;max-width:560px;max-height:82vh;max-height:82svh;display:flex;flex-direction:column;background:var(--lp-surface);border-top:2px solid var(--lp-accent);border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior:contain}
.l1lp-sh-h{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.l1lp-sh-h h3{margin:0;font-size:17px;flex:1;min-width:0;color:var(--lp-ink)}
.l1lp-sh-x{width:40px !important;height:40px;border-radius:50%;border:1px solid var(--lp-line);background:var(--lp-raised);font-size:18px;cursor:pointer;flex:none}
.l1lp-sh-b{overflow:auto;padding:0 14px 14px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch}
.l1lp-lbl{font:700 11.5px var(--lp-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--lp-muted);margin-top:4px}
.l1lp-note{color:var(--lp-muted);font-size:13.5px;margin:0}
.l1lp-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.l1lp-tbtn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;min-height:64px;border-radius:12px;border:1.5px solid var(--lp-line);background:var(--lp-bg);cursor:pointer}
.l1lp-tbtn i{font:700 18px var(--lp-tag);font-style:normal;letter-spacing:-1px}
.l1lp-tbtn b{font:800 12.5px var(--lp-tag)}
.l1lp-tbtn small{font-size:10.5px;color:var(--lp-muted);text-align:center;line-height:1.2}
.l1lp-tbtn[aria-pressed="true"],.l1lp-tag[aria-pressed="true"]{border-color:var(--lp-accent);background:#2a1c0c}
.l1lp-tags{display:flex;flex-direction:column;gap:6px}
.l1lp-tag{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px;min-height:54px;border-radius:12px;border:1.5px solid var(--lp-line);background:var(--lp-bg);cursor:pointer;width:100% !important}
.l1lp-tt{flex:1;min-width:0}
.l1lp-tt b{display:block;font:700 14.5px var(--lp-tag)}
.l1lp-tt small{display:block;color:var(--lp-muted);font-size:12px;line-height:1.3}
.l1lp-addr{font:600 11px var(--lp-tag);color:#8fc2ef;flex:none;text-align:right;max-width:40%}
.l1lp-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.l1lp-act{min-height:46px;border-radius:12px;border:1px solid var(--lp-line);background:var(--lp-raised);font-weight:700;cursor:pointer;width:100% !important}
.l1lp-act.del{color:#ffb4b0 !important;border-color:#6b2a2a;background:#2a1414}
.l1lp-act:disabled{opacity:.4;cursor:default}
.l1lp-toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);width:max-content;max-width:88vw;background:#3a2a0c;border:1px solid #7a5a1a;color:#ffe3a8;padding:9px 13px;border-radius:10px;font-size:13.5px;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s;z-index:9460}
.l1lp-toast.show{opacity:1}
.l1lp-toast.ok{background:#0e2a19;border-color:#2f6b4c;color:#bff5d6}
@media (prefers-reduced-motion:reduce){.l1lp-toast{transition:none}}

/* October 28 mobile polish. Full instruction descriptions remain readable; no clipped tags. */
.l1lp {padding:16px 12px;--lp-line:#304b62;--lp-muted:#adc0d1}
.l1lp-bar {gap:12px;margin-bottom:16px}
.l1lp-where {line-height:1.5;flex-wrap:wrap}
.l1lp-where b {font-size:16px}
.l1lp-tools {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
.l1lp .l1lp-btn,.l1lp .l1lp-bdel {min-height:44px;line-height:1.35;white-space:normal}
.l1lp .l1lp-backbtn {box-shadow:none}
.l1lp .l1lp-card {padding:14px 12px}
.l1lp-rhead {gap:10px;align-items:flex-start}
.l1lp-cmt {font-size:14px;line-height:1.5}
.l1lp-rnum {min-width:28px;text-align:center;padding:4px 6px}
.l1lp-rfoot {gap:12px;line-height:1.5;margin-top:8px;flex-wrap:wrap;font-size:13px}
.l1lp .l1lp-ins {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;min-height:72px;padding:12px 10px;scroll-margin:72px 0 92px}
/* (cl-batch120, John's iPhone: "] [" broke onto two lines) the symbol never wraps and its column is as wide as it needs */
.l1lp-sym {width:auto;min-width:42px;font-size:19px;white-space:nowrap}
.l1lp-it b {white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:14px;line-height:1.45}
.l1lp-it small {white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;font-size:12px;line-height:1.5;margin-top:4px}
.l1lp-ty {align-self:start;font-size:10px;padding:3px 4px}
.l1lp-bhead {flex-wrap:wrap;line-height:1.5;gap:8px}
.l1lp-bhead .l1lp-bdel {padding:8px 10px;font-size:12px}
.l1lp-branch {padding:12px 8px;gap:10px}
.l1lp-leg {padding-left:6px}
.l1lp .l1lp-slot {min-height:44px}
.l1lp.l1lp-run .l1lp-slot {min-height:10px}
.l1lp-plus {width:32px;height:32px}
.l1lp .l1lp-zbtns button {min-width:44px;height:44px}
.l1lp-zpct {bottom:20px}
.l1lp-hint,.l1lp-rcmt {font-size:13px;line-height:1.55;margin:0 2px 6px}
.l1lp-sh-h {padding:16px;gap:12px}
.l1lp-sh-h h3 {font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.l1lp-sh-x {width:44px!important;height:44px}
.l1lp-sh-b {padding:0 16px 20px;gap:12px}
.l1lp-types {grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.l1lp-tbtn {min-height:76px;padding:12px 8px}
.l1lp-tbtn small {font-size:12px;line-height:1.4}
.l1lp-tag {display:grid;grid-template-columns:minmax(0,1fr);gap:7px;padding:12px 14px}
.l1lp-tt b {font-size:15px;overflow-wrap:anywhere;line-height:1.4}
.l1lp-tt small {font-size:13px;line-height:1.5;margin-top:4px}
.l1lp-addr {max-width:100%;text-align:left;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.l1lp-act {font:650 14px/1.4 system-ui,'Segoe UI',sans-serif;padding:10px 8px;min-height:48px}
.ladder-panel.l1lp-on .l1-studio {box-shadow:none;border-color:#29455a;border-radius:14px}
.ladder-panel.l1lp-on .l1s-title {padding:14px;font:650 16px/1.4 system-ui,'Segoe UI',sans-serif;background:#173b55}
.ladder-panel.l1lp-on .l1s-online {padding:12px;background:#102335}
.ladder-panel.l1lp-on .l1s-online button {min-height:44px;font:650 14px/1.4 system-ui,'Segoe UI',sans-serif;border-radius:10px;padding:10px 12px;white-space:normal}
.ladder-panel.l1lp-on #resetProgram {background:#203c52;color:#e7eef5;border:1px solid #365b78}
.ladder-panel.l1lp-on .l1s-tags {display:none}
.ladder-panel.l1lp-on .l1s-status {padding:12px;gap:12px;font-size:12px;line-height:1.5}
.ladder-panel.l1lp-on .l1s-logic {margin:12px;padding:14px;font:400 14px/1.6 system-ui,'Segoe UI',sans-serif;overflow-wrap:anywhere}

/* (cl-batch118) sideways on a phone (the short-landscape view in js/l1-phone-ladder.js) the tools stay beside the title:
   on their own row they cost about 50 px of a 330 px-tall screen */
@media (max-height:500px) and (min-width:701px){.l1lp-tools{display:flex;width:auto}.l1lp .l1lp-tools .l1lp-btn{min-width:84px}}