/* ============================================================
   level1.css — Level 1 "Motor Starter Lab" realism layer
   ------------------------------------------------------------
   Scoped entirely under body.l1 and linked ONLY by trainer.html,
   so it never touches the shared trainer.css or any other level.
   Turns the plain white device cards into a real control-panel
   subpanel: painted-steel backplane, slotted wire ducts, and
   devices mounted as labeled modules. Logic (app.js/plc.js) and
   all .wire-terminal hit targets are untouched.
   ============================================================ */

/* ---- work-order scenario strip (immersion / framing) ---- */
.l1 .work-order{
  display:flex; align-items:center; gap:14px;
  margin:0 0 16px;
  padding:11px 16px;
  background:linear-gradient(100deg,#12314f,#1c4a72);
  border:1px solid #0d2338;
  border-left:5px solid #f4b63d;
  border-radius:10px;
  color:#eaf3fb;
  box-shadow:0 4px 14px rgba(16,42,67,.22);
}
.l1 .work-order .wo-tag{
  flex:0 0 auto;
  font:800 .66rem/1 system-ui,sans-serif; letter-spacing:.12em;
  background:#f4b63d; color:#3a2a05;
  padding:6px 9px; border-radius:6px;
}
.l1 .work-order .wo-body{font-size:.86rem;line-height:1.4}
.l1 .work-order .wo-body strong{color:#fff}
.l1 .work-order .wo-id{color:#a9c8e4;font-weight:700}

/* ---- the enclosure: painted-steel subpanel inside the panel ---- */
.l1 .photo-board{
  padding:24px 56px 20px;
  border-radius:12px;
  border:1px solid #8a959e;
  background:
    /* corner mounting screws */
    radial-gradient(circle at 15px 15px,#7c858d 0 3px,#565f67 3px 5px,rgba(0,0,0,.14) 5px 7px,transparent 7px) 0 0/60px 60px no-repeat,
    radial-gradient(circle at calc(100% - 15px) 15px,#7c858d 0 3px,#565f67 3px 5px,rgba(0,0,0,.14) 5px 7px,transparent 7px) 100% 0/60px 60px no-repeat,
    radial-gradient(circle at 15px calc(100% - 15px),#7c858d 0 3px,#565f67 3px 5px,rgba(0,0,0,.14) 5px 7px,transparent 7px) 0 100%/60px 60px no-repeat,
    radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),#7c858d 0 3px,#565f67 3px 5px,rgba(0,0,0,.14) 5px 7px,transparent 7px) 100% 100%/60px 60px no-repeat,
    /* painted steel */
    linear-gradient(150deg,#d3dade 0%,#c3ccd2 48%,#b4bec6 100%);
  box-shadow:
    inset 0 2px 12px rgba(24,40,54,.30),
    inset 0 -40px 70px rgba(24,40,54,.06);
}

/* ---- vertical wireways down both sides (complete the duct system) ---- */
.l1 .photo-board::before,
.l1 .photo-board::after{
  content:"";
  position:absolute; top:14px; bottom:14px; width:30px;
  border-radius:5px; z-index:1;
  background:repeating-linear-gradient(0deg,#d3d9de 0 13px,#828a92 13px 17px);
  border-left:3px solid #e7ecef;
  border-right:3px solid #949ca3;
  box-shadow:
    inset 0 7px 9px -7px rgba(0,0,0,.34),
    inset 0 -7px 9px -7px rgba(0,0,0,.4),
    2px 0 5px rgba(0,0,0,.14);
}
.l1 .photo-board::before{left:13px}
.l1 .photo-board::after{right:13px}

/* device rows: size to content (kills the dead space) + room for a duct */
.l1 .device-row-photo{
  align-items:flex-start;
  gap:20px;
  margin-bottom:30px;
  padding-bottom:40px;
}
.l1 .device-row-photo:last-of-type{margin-bottom:6px}

/* ---- slotted wire duct running under each device row ---- */
.l1 .device-row-photo::after{
  content:"";
  position:absolute; left:-46px; right:-46px; bottom:2px; height:28px;
  border-radius:5px;
  background:
    repeating-linear-gradient(90deg,#d3d9de 0 13px,#828a92 13px 17px);
  border-top:3px solid #e5eaed;
  border-bottom:3px solid #939ba2;
  box-shadow:
    inset 0 7px 9px -7px rgba(0,0,0,.35),
    inset 0 -7px 9px -7px rgba(0,0,0,.4),
    0 3px 6px rgba(0,0,0,.18);
  z-index:1;
}

/* ---- each device as a mounted, labeled module ---- */
.l1 .wire-device-photo{
  position:relative;
  background:
    radial-gradient(circle at 9px 9px,#9aa2a9 0 1.6px,transparent 2.4px) 0 0/18px 18px no-repeat,
    radial-gradient(circle at calc(100% - 9px) 9px,#9aa2a9 0 1.6px,transparent 2.4px) 100% 0/18px 18px no-repeat,
    linear-gradient(180deg,#ffffff,#eef2f6);
  border:1px solid #aab4bd;
  border-radius:9px;
  padding:0 10px 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 5px 13px rgba(18,34,50,.18),
    0 1px 2px rgba(18,34,50,.12);
  overflow:hidden;
  z-index:10;
}
/* engraved dark nameplate header on each module */
.l1 .wire-device-photo h3{
  margin:0 -10px 9px;
  padding:6px 10px;
  background:linear-gradient(180deg,#33414e,#232f3a);
  color:#e6edf3;
  font-size:.74rem;
  letter-spacing:.02em;
  border-bottom:1px solid #46586a;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.l1 .wire-device-photo .photo-stage{
  border-radius:5px;
  padding:2px;
  background:#f7fafc;
  box-shadow:inset 0 0 0 1px rgba(150,163,175,.35);
}
.l1 .terminal-key{color:#4a5a68}
/* code-compliance callouts (OSHA/NEC/NFPA 79) */
.l1 .pe-note{color:#2f7d4a;font-weight:700}
.l1 .pe-term{box-shadow:0 0 0 2px #2f9e57,0 0 0 4px rgba(47,158,87,.4)!important}
.l1 .lock-note{margin:5px 0 0;font-size:.74rem;line-height:1.36;color:#6d5320;background:#fff6e0;border:1px solid #e6c98a;border-radius:6px;padding:6px 9px}
.l1 .lock-note .lock-ico{font-size:.92rem}
.l1 .lock-note strong{color:#5f4610}
.l1 .rating-note{margin:4px 0 0;font-size:.68rem;color:#7c8b98;font-family:Consolas,'Courier New',monospace}

/* the field control buttons read as panel-mounted operators */
.l1 .field-btn{
  border-radius:7px;
  box-shadow:0 2px 0 rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.16);
  letter-spacing:.01em;
  font-size:.78rem;
  padding:9px 6px;
  white-space:nowrap;
}

/* keep the whole lab a touch more "shop floor" so the panel pops */
.l1 .wiring-panel .panel-head{
  background:linear-gradient(180deg,#f4f7fa,#e9eef3);
}

/* ---- wires: same gauge & treatment as Level 3 ---- */
.l1 #wireLayer .wire-line{
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* NFPA 79 striped conductors: 0 V return = white + blue stripe; PE = green + yellow stripe.
   Each stacks coincident strokes (casing/core/stripe), so widths must step down. */
.l1 #wireLayer .wire-dccasing{stroke-width:4.2}
.l1 #wireLayer .wire-dccore{stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;filter:none}
.l1 #wireLayer .wire-dcstripe{stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:round;pointer-events:none;filter:none}
.l1 #wireLayer .wire-pecore{stroke-width:2.8}
.l1 #wireLayer .wire-pestripe{stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:round;pointer-events:none;filter:none}
/* factory pre-wired 3-phase line/power conductors — black (NFPA 79 AC line/power) */
.l1 #wireLayer .factory-power-wire{stroke:#1d2329;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22))}

/* ---- subtle shop-floor backdrop so the white panels pop ---- */
.l1{background:#dfe5eb}
.l1 .workspace{
  grid-template-columns:1.55fr 1fr;
  grid-template-areas:
    "wiring wiring"
    "machine machine"
    "ladder io"
    "ladder completion";
  align-items:start;
  background:
    radial-gradient(1200px 500px at 50% -120px,rgba(29,74,114,.10),transparent 70%),
    linear-gradient(180deg,#e7ecf1,#dbe2e8);
}
.l1 .wiring-panel{grid-area:wiring}
.l1 .machine-panel{grid-area:machine}
.l1 .ladder-panel{grid-area:ladder}
.l1 .io-panel{grid-area:io}
.l1 .completion-panel{grid-area:completion}

/* ---- M1 transfer-pump payoff: photorealistic scene + REAL animated tank fill ----
   stopped/running photos crossfade for the equipment, pipe flow and inlet stream; the
   day-tank water is a separate SVG overlay that starts EMPTY and rises only while the
   motor runs, freezing at its level when the motor stops. v3 photo tanks were emptied
   so the water level is fully overlay-controlled. ---- */
.l1 .pump-wrap{padding:14px 18px 20px}
.l1 .pump-scene{position:relative;max-width:1040px;margin:0 auto;border-radius:13px;overflow:hidden;line-height:0;background:#202a33;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 10px 26px rgba(20,35,50,.22);transition:box-shadow .35s}
.l1 .pump-scene img{display:block;width:100%;height:auto}
.l1 #stoppedBase{position:relative;z-index:0}
.l1 #runningBase{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .45s ease}
.l1 .pump-scene.running #runningBase{opacity:1}
.l1 .pump-scene.running{box-shadow:inset 0 0 0 2px rgba(46,158,82,.6),0 12px 30px rgba(20,45,30,.3)}
.l1 .pump-overlay{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;overflow:visible}
/* inlet stream + splash + aeration bubbles reveal only while the pump runs */
.l1 .pump-overlay .fx{opacity:0;transition:opacity .35s ease}
.l1 .pump-scene.running .pump-overlay .fx{opacity:1}
.l1 .pump-overlay .bubble{animation:l1bubble 1.9s linear infinite;opacity:.85}
.l1 .pump-overlay .delay1{animation-delay:.24s}.l1 .pump-overlay .delay2{animation-delay:.5s}.l1 .pump-overlay .delay3{animation-delay:.75s}
.l1 .pump-overlay .delay4{animation-delay:1s}.l1 .pump-overlay .delay5{animation-delay:1.2s}.l1 .pump-overlay .delay6{animation-delay:1.45s}.l1 .pump-overlay .delay7{animation-delay:1.7s}
@keyframes l1bubble{0%{transform:translateY(24px);opacity:0}25%{opacity:.9}100%{transform:translateY(-64px);opacity:0}}
.l1 #tankWave{animation:l1wave 1.5s ease-in-out infinite alternate}
@keyframes l1wave{from{transform:translateY(-1px)}to{transform:translateY(3px)}}
.l1 .conv-cap{font-size:.85rem;color:#54656f;margin:9px 0 0;text-align:center;line-height:1.4;font-weight:600}

/* ---- device modules sized to real hardware proportions ---- */
.l1 .device-row-photo{justify-content:space-between}
.l1 .wire-device-photo{width:calc(190px * var(--wire-zoom,1))}
.l1 .dev-disconnect{width:calc(170px * var(--wire-zoom,1))}
.l1 .dev-supply{width:calc(190px * var(--wire-zoom,1))}
.l1 .dev-startpb,.l1 .dev-stoppb{width:calc(150px * var(--wire-zoom,1))}
.l1 .dev-overload{width:calc(182px * var(--wire-zoom,1))}
.l1 .dev-plc{width:calc(340px * var(--wire-zoom,1))}
.l1 .dev-estop{width:calc(138px * var(--wire-zoom,1))}   /* single mushroom button — smallest */
.l1 .dev-contactor{width:calc(206px * var(--wire-zoom,1))}
.l1 .dev-motor{width:calc(198px * var(--wire-zoom,1))}
@media(max-width:1100px){
  .l1 .workspace{
    grid-template-columns:1fr;
    grid-template-areas:"wiring" "machine" "ladder" "io" "completion";
  }
}

/* ============================================================
   Wireway layout (patch 116): the ducts are real elements the wire
   router follows ([data-duct] in level1.php, js/app.js), so no
   conductor is ever drawn across a device, label or control.
   - side wireways + one duct under each device row (same look as before);
   - each module's label/notes/buttons sit ABOVE its photo ([data-no-wire]),
     so every terminal breaks out straight down (or up) into a duct;
   - the contactor has terminals on both edges, so its label sits beside it;
   - rows never wrap (a wrapped row would put devices under terminals):
     a narrow screen scrolls the board sideways instead.
   ============================================================ */
.l1 .photo-board::before,.l1 .photo-board::after,.l1 .device-row-photo::after{content:none}
.l1 .panel-duct{pointer-events:none;border-radius:5px;z-index:1;box-sizing:border-box}
.l1 .duct-left,.l1 .duct-right{
  position:absolute; top:14px; bottom:14px; width:30px;
  background:repeating-linear-gradient(0deg,#d3d9de 0 13px,#828a92 13px 17px);
  border-left:3px solid #e7ecef; border-right:3px solid #949ca3;
  box-shadow:inset 0 7px 9px -7px rgba(0,0,0,.34),inset 0 -7px 9px -7px rgba(0,0,0,.4),2px 0 5px rgba(0,0,0,.14);
}
.l1 .duct-left{left:13px}
.l1 .duct-right{right:13px}
.l1 .row-duct{
  position:absolute; left:-46px; right:-46px; bottom:2px; height:28px;
  background:repeating-linear-gradient(90deg,#d3d9de 0 13px,#828a92 13px 17px);
  border-top:3px solid #e5eaed; border-bottom:3px solid #939ba2;
  box-shadow:inset 0 7px 9px -7px rgba(0,0,0,.35),inset 0 -7px 9px -7px rgba(0,0,0,.4),0 3px 6px rgba(0,0,0,.18);
}
.l1 .device-row-photo{flex-wrap:nowrap; align-items:flex-end}
.l1 .photo-board{width:fit-content; min-width:100%; box-sizing:border-box}   /* never narrower than one device row */
.l1 .dev-disconnect{width:calc(300px * var(--wire-zoom,1))}                  /* room for its lockout note above the photo */
.l1 .dev-disconnect .photo-stage{max-width:190px; margin:0 auto}
.l1 .wiring-panel{overflow-x:auto}
.l1 .device-info{display:flex; flex-direction:column; gap:6px; margin-bottom:8px}
.l1 .device-info h3{margin-bottom:0}
.l1 .device-info .terminal-key,.l1 .device-info .lock-note,.l1 .device-info .rating-note{margin:0}
.l1 .device-info .field-btn{width:100%}
.l1 .dev-contactor.info-side{display:grid; grid-template-columns:minmax(0,1fr) 104px; column-gap:10px; align-items:start; padding-top:10px;
  width:calc(310px * var(--wire-zoom,1))}
.l1 .dev-contactor.info-side .device-info{margin:0}
.l1 .dev-contactor.info-side .device-info h3{margin:0 0 2px; border-radius:5px; font-size:.7rem}
/* Terminal targets sized INSIDE the terminal pitch (as on Level 3, patch 107b), so no two hit areas
   overlap at any screen width. The shared rule (width 18%, min 22 px) made the supply and PLC targets
   wider than their pitch on phones. Touch comfort comes from the board's zoom control: targets scale
   with --wire-zoom together with the photos, so the gap between them is kept at every zoom level.
   Tightest pitches at zoom 1: supply L/N/GND 8.7% of a 208 px photo = 18 px (16 px targets);
   PLC 4.5% of 318 px = 14.3 px (12 px targets). The hover/selected halo stays visual only. */
.l1 #wiringBoard .photo-stage .wire-terminal{
  width:calc(16px * var(--wire-zoom,1))!important; height:calc(16px * var(--wire-zoom,1))!important;
  min-width:0!important; min-height:0!important; max-width:none!important; max-height:none!important;
  padding:0!important; box-sizing:border-box; border-radius:50%}
.l1 #wiringBoard .dev-plc .photo-stage .wire-terminal{width:calc(12px * var(--wire-zoom,1))!important; height:calc(12px * var(--wire-zoom,1))!important}
.l1 .dev-supply{width:calc(230px * var(--wire-zoom,1))}

/* ============================================================
   Patch 150b: the complete panel, built in code order, one conductor per terminal
   (Patches\CLAUDE-PANEL-BUILD-REFERENCE.txt):
   - Row 1: main disconnect Q1 and the PLC.
   - Row 2: distribution block under Q1, operator devices on the right.
   - Row 3: motor fuses F2-F4 (NEC 430.52), T1 primary fuses F5/F6, ground bar.
   - Row 4: starter (contactor M1 + overload) under F2-F4, control transformer T1
     under F5/F6, the motor.
   - Row 5: control power - XT (X2), F1 (X1), 24 VDC supply, DC fuse F7, TB1/TB2.
   Devices whose line side is on top AND load side below carry their label beside
   the picture (info-side), so no conductor ever crosses a label. Their stages have
   no padding, so every terminal % lands on the picture's measured ring centre.
   ============================================================ */
.l1 .info-side:not(.dev-contactor){display:grid; grid-template-columns:auto 104px; column-gap:10px; align-items:start; padding-top:10px; width:auto}
.l1 .info-side:not(.dev-contactor) .photo-stage{padding:0}
.l1 .info-side .device-info{margin:0}
.l1 .info-side .device-info h3{margin:0 0 2px; border-radius:5px; font-size:.7rem}
.l1 .dev-xt.info-side,.l1 .dev-f1.info-side,.l1 .dev-f7.info-side{grid-template-columns:auto 80px}
.l1 .dev-tb.info-side{grid-template-columns:auto 90px}
.l1 .info-side .photo-stage img{display:block; height:auto; max-width:none}
.l1 .dev-pdb .photo-stage img{width:calc(260px * var(--wire-zoom,1))}
.l1 .dev-t1fuses .photo-stage img{width:calc(72px * var(--wire-zoom,1))}
.l1 .dev-t1 .photo-stage img{width:calc(170px * var(--wire-zoom,1))}
.l1 .dev-f1 .photo-stage img,.l1 .dev-f7 .photo-stage img,.l1 .dev-motorfuses .photo-stage img{width:calc(36px * var(--wire-zoom,1))}
.l1 .dev-motorfuses .photo-stage{display:flex; gap:calc(8px * var(--wire-zoom,1))}
/* starter M1: 100-C09EJ10 contactor + direct-mounted 193-T1AB40 overload, one picture (Codex R7) */
.l1 .dev-starter.info-side{grid-template-columns:auto 104px; width:auto}
.l1 .dev-starter .photo-stage{padding:0}
.l1 .dev-starter .photo-stage img{width:calc(190px * var(--wire-zoom,1))}
.l1 .dev-gb{width:calc(260px * var(--wire-zoom,1))}
/* feed-through terminal strips: only the first positions of the 8-position photo are shown */
.l1 .strip-stage{display:flex; gap:calc(10px * var(--wire-zoom,1))}
.l1 .strip-crop{flex:0 0 auto; height:calc(218px * var(--wire-zoom,1)); overflow:hidden}
.l1 .strip-crop img{height:100%!important; width:auto!important; max-width:none; display:block}
/* close-pitch terminals: targets sized inside the pitch (as the PLC's) */
.l1 #wiringBoard .dev-pdb .photo-stage .wire-terminal,.l1 #wiringBoard .dev-tb .photo-stage .wire-terminal,
.l1 #wiringBoard .dev-xt .photo-stage .wire-terminal{width:calc(13px * var(--wire-zoom,1))!important; height:calc(13px * var(--wire-zoom,1))!important}
/* the T1 H2-H3 link: a short brass bar between neighbouring screws */
.l1 #wireLayer .factory-jumper{stroke-width:4.5; stroke-linecap:round; pointer-events:none}
.l1 #wireLayer .factory-casing{pointer-events:none}
.l1 .row-dist,.l1 .row-branch,.l1 .row-starter,.l1 .row-ctl{justify-content:flex-start}
.l1 .row-dist .dev-startpb{margin-left:auto}       /* operator devices grouped on the right */
.l1 .row-branch .dev-gb{margin-left:auto}           /* ground bar at the right of the backplate */
.l1 .row-starter .dev-motor{margin-left:auto}      /* the motor is a field device, set apart from the starter */
/* devices fed from the duct ABOVE them sit at the top of their rows, so those drops are short */
.l1 .row-dist .dev-pdb,.l1 .row-branch .dev-motorfuses,.l1 .row-branch .dev-t1fuses,.l1 .row-starter .dev-contactor,
.l1 .row-starter .dev-t1,.l1 .row-ctl .dev-xt,.l1 .row-ctl .dev-f1,.l1 .row-ctl .dev-f7,.l1 .row-ctl .dev-tb{align-self:flex-start}