/* Shared station theme. Keep state meanings identical across PL and EN. */
:root {
  --vk-signal-on: #169e72;
  --vk-signal-off: #a5b2ba;
  --vk-beam: #db7249;
  --vk-parcel: #c6a479;
  --vk-parcel-edge: #93744d;
  --vk-parcel-top: #dec29b;
  --vk-tape: #e9d7b8;
  --vk-belt: #35444e;
  --vk-steel: #b4c1cb;
  --vk-steel-edge: #7a8c99;
  --vk-label: #52636f;
  --vk-motor: #6e8595;
  --vk-motor-edge: #405b6d;
  --vk-bin: #d9e2e7;
  --vk-sensor: #465e6d;
}
.sc-lbl{fill:var(--vk-label);font:9px var(--mono);letter-spacing:.02em}
.station-floor{stroke:#cbd4da;stroke-width:1}
.machine-frame{stroke:#8d9ca7;stroke-width:6;fill:none;stroke-linejoin:round}
.machine-frame .frame-brace{stroke-width:2;stroke:#bcc6cd}
.conveyor-chassis{fill:var(--vk-steel);stroke:var(--vk-steel-edge);stroke-width:1}
.belt{fill:var(--vk-belt);stroke:#263640;stroke-width:1}
.belt-dash{stroke:#8998a3;stroke-width:3;stroke-dasharray:2 9}
.roller{fill:#c0cbd2;stroke:#667c8c;stroke-width:1.4}
.roller-hub{fill:#6a7e8c;stroke:#e8edf0;stroke-width:1}
.roller-spoke{stroke:#7e929f;stroke-width:1}
.motor-blk rect{fill:var(--vk-motor);stroke:var(--vk-motor-edge);stroke-width:1}
.motor-blk .terminal-box{fill:#8fa1ae}
.motor-fins{stroke:#b5c3cc;stroke-width:1}
.drive-coupling{fill:none;stroke:#778d9d;stroke-width:5}
.m-led{fill:#829099;stroke:#eef3f5;stroke-width:1}
.scene-svg.running .m-led{fill:var(--vk-signal-on)}
.box-item{fill:var(--vk-parcel);stroke:var(--vk-parcel-edge);stroke-width:1}
.box-top{fill:var(--vk-parcel-top);stroke:var(--vk-parcel-edge);stroke-width:.7}
.box-tape{stroke:var(--vk-tape);stroke-width:4}
.parcel-mark{stroke:#7d674b;stroke-width:1}
.bin{fill:var(--vk-bin);stroke:#8599a6;stroke-width:1.3}
.bin .bin-rim{fill:#b7c7d1}
.bin .bin-ribs{fill:none;stroke:#a8b9c4;stroke-width:2}
.bin circle{fill:#536876;stroke:none}
.delivered-count{font-size:8px}
.sensor-bracket{fill:none;stroke:#acbac4;stroke-width:2}
.pe-head{fill:var(--vk-sensor);stroke:#273e4c;stroke-width:1}
.pe-led{fill:var(--vk-signal-off);stroke:#253d4d;stroke-width:.7}
.beam{stroke:var(--vk-beam);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.pe.on .beam{stroke:var(--vk-signal-on);opacity:1}
.pe.on .pe-led,.ls.on .pe-led{fill:var(--vk-signal-on)}
.stop-assembly{fill:none;stroke:#71818b;stroke-width:4;stroke-linejoin:round}
.stop-assembly .stop-face{stroke:#d5a53c;stroke-width:3}
.air-jet rect{fill:#8da2af;stroke:#4b6373;stroke-width:1}
.air-lines{fill:none;stroke:#0b93c1;stroke-width:1.5;stroke-dasharray:3 3;opacity:.12}
.air-jet.on .air-lines{opacity:1;animation:air-flow .35s linear infinite}
@keyframes air-flow{to{stroke-dashoffset:-12}}
.motion-direction{font-size:17px;fill:#718694}
.thermal-station .din-rail{fill:#ccd5da;stroke:#a6b5bf;stroke-width:1}
.relay-body{fill:#dfe4e6;stroke:#8395a0;stroke-width:1}
.relay-cap{fill:#a3b0b9;stroke:#8395a0;stroke-width:.8}
.terminal circle{fill:#657680;stroke:#cbd5db;stroke-width:1}.terminal path{stroke:#e1e8ec;stroke-width:1}
.relay-label{font:700 9px var(--sans);fill:#304b5d}.relay-small{font:6px var(--sans);fill:#667e8d}
.relay-dial{fill:#f1f3f4;stroke:#78909f;stroke-width:2}.relay-dial-mark{stroke:#39556a;stroke-width:2}
.relay-reset{fill:#457eab;stroke:#325a78}.relay-trip{fill:#b66356;stroke:#945043}
.contact-diagram{fill:#f8fafb;stroke:#c7d2da;stroke-width:1}
.thermal-wire{stroke:#718895;stroke-width:1.5;fill:none}.thermal-contact{stroke:#b88630;stroke-width:2;fill:none}
.contact-terminal{fill:#f8fafb;stroke:#718895;stroke-width:1.5}
.barrel{fill:#d4dfe5;stroke:#6d8595}.piston,.rod-head{fill:#547386}.rod{fill:#acbecb;stroke:#7c92a0;stroke-width:.5}
.tank{fill:#eff4f7;stroke:#718b9c}.water{fill:#7eb0c5}.pipe{stroke:#8ca3b1}.valve{fill:#9aafbc;stroke:#617e90}.valve.on{fill:#229b78}.lvl{fill:#365566}

.motor svg.scene-svg{width:64px;height:50px}
.card.active .motor .m-led{fill:var(--vk-signal-on)}
@media(prefers-reduced-motion:reduce){.air-jet.on .air-lines{animation:none}}

/* KonnectSymbols Animated adapter. Equipment geometry and states remain PLC-driven. */
:root{--vk-steel:#a4b2b8;--vk-steel-edge:#26343d;--vk-motor:#78909c;--vk-motor-edge:#26343d;--vk-label:#354a56;--vk-signal-on:#238454}
.vk-conveyor .belt-dash{stroke:#a4b2b8;stroke-width:8;stroke-dasharray:8 5}
.vk-motor [data-moving-part]{transform-box:fill-box;transform-origin:center}
.vk-control{width:38px;height:42px;display:block;flex:none;overflow:visible}
.push,.toggle{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;text-align:center}
.push .vk-lens{fill:#7d929e}.push.down .vk-lens{fill:#435c6c;transform:translateY(1px)}
.push.output-lit .vk-lens{fill:#f4cf57;filter:drop-shadow(0 0 3px #e9b820)}
.card .vis.lamp.vk-lamp{width:76px;height:76px;background:none!important;border:0;box-shadow:none!important}
.vk-lamp .vk-control{width:76px;height:76px}
.vk-lamp{--lamp-off:#316340;--lamp-on:#63ed8b}
.vk-lamp.c-red{--lamp-off:#a83132;--lamp-on:#ff6666}
.vk-lamp.c-orange,.vk-lamp.c-yellow{--lamp-off:#936322;--lamp-on:#ffd264}
.vk-lamp.c-blue{--lamp-off:#275d9a;--lamp-on:#63b8ff}
.vk-lamp.c-white{--lamp-off:#87969b;--lamp-on:#f4f8fa}
.vk-lamp [data-part="lens"]{fill:var(--lamp-off)}
.card.active .vk-lamp [data-part="lens"]{fill:var(--lamp-on)}
.card.active .vk-lamp [data-part="light-rays"]{display:inline}
.vk-lamp [data-part="light-rays"] path{stroke:var(--lamp-on)!important}
.vk-selector-handle{transform-box:fill-box;transform-origin:center;transition:transform .12s}
.card.active .vk-selector-handle{transform:rotate(45deg)}
.conveyor-chassis,.bin{stroke:#26343d;stroke-width:1.4}.belt{stroke:#26343d;stroke-width:1.5}
.barrel,.relay-body,.relay-cap{stroke:#26343d;stroke-width:1.4}
.box-item{stroke:#765c3d;stroke-width:1.3}.box-top{stroke:#765c3d;stroke-width:1}
@media(prefers-reduced-motion:reduce){.vk-selector-handle{transition:none}.push.output-lit .vk-lens{filter:none}}
.vk-conveyor .belt-dash{stroke-width:6;stroke-dasharray:8 6;stroke-linecap:butt}
.conveyor-chassis{fill:var(--vk-metal,#a4b2b8)}
.bin{fill:var(--vk-metal,#d9e2e7)}
.barrel{fill:var(--vk-metal,#d4dfe5)}

/* Slim side-view frame: real roller geometry, restrained tread and a fixed bin detector. */
.refined-conveyor .belt-dash{stroke:#8798a1;stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:butt}
.refined-conveyor .belt{fill:#35444e;stroke:#26343d;stroke-width:1}
.refined-conveyor .conveyor-edge{stroke:#d4dee2;stroke-width:1;fill:none}
.refined-conveyor .machine-frame{stroke:#8599a4;stroke-width:4}
.refined-conveyor .frame-brace{stroke:#bcc8ce;stroke-width:1.5}
.bin-detection-beam{stroke:#a5b2ba;stroke-width:1.5;stroke-dasharray:2 2;fill:none}
.bin-detector.on .bin-detection-beam{stroke:var(--vk-signal-on)}
.bin-detector .pe-led{r:3}
.bin-detector [data-k=bin-state]{font-size:8px;font-weight:700}

/* Shared steel 2D family: neutral materials, colour reserved for process states. */
:root{--vk-steel:#b5bec3;--vk-steel-edge:#687b85;--vk-bin:#d0d8dc;--vk-sensor:#465a66;--vk-belt:#343d42}
.bin{stroke:#71848e;stroke-width:1}.bin .bin-rim{fill:#d7dfe2;stroke:#71848e}.bin .bin-ribs{stroke:#e6ecef;stroke-width:1.5}
.box-item{stroke-width:.8}.box-top{stroke-width:.6}.box-tape{stroke-width:3}
.barrel,.relay-body,.relay-cap{stroke:#71848e;stroke-width:1}
.relay-body{fill:#dce3e6}.relay-cap{fill:#aab8bf}
.sensor-bracket{stroke:#8e9fa8;stroke-width:1.5}.pe-led{stroke:#eef3f5;stroke-width:.7}
.vk-selector-handle{transform-box:view-box;transform-origin:50px 47px}
.steel-top-conveyor .belt{fill:#343d42;stroke:#536771;stroke-width:.8}

/* Approved sensor artwork: source geometry stays stationary; only indicators change. */
.vk-photo [data-part="power-led"]{fill:#8296a3}
.vk-photo[data-powered="true"] [data-part="power-led"]{fill:#48b77b}
.vk-photo [data-part="output-led"],.vk-inductive [data-part="led"] rect{fill:#8296a3;transition:fill 100ms linear}
.vk-photo [data-part="output-rays"],.vk-inductive [data-part="led-rays"]{opacity:0;pointer-events:none;transition:opacity 100ms linear}
.vk-photo[data-powered="true"][data-output="true"] [data-part="output-led"],.vk-inductive[data-detected="true"] [data-part="led"] rect{fill:#ffd43b}
.vk-photo[data-powered="true"][data-output="true"] [data-part="output-rays"],.vk-inductive[data-detected="true"] [data-part="led-rays"]{opacity:1}
.vk-photo[data-powered="false"] .beam{opacity:0}
.vk-photo[data-optical-mode="retro"].on .return-beam{opacity:0}
.vk-reflector [data-part="light-rays"]{display:none}
.approved-bin{stroke:none;fill:none}
.approved-bin circle{stroke:#344854;stroke-width:2;fill:#52636d}.approved-bin circle[r="5"]{fill:#e5ebef}

/* Keep fine source details readable at the station's small drawing scale. */
.vk-photo .sensor-body :is(path,rect,circle),.vk-inductive .sensor-body :is(path,rect,circle),.vk-reflector :is(path,rect,line){stroke-width:.6}
.approved-bin :is(path,rect,circle){stroke-width:.8}

/* Generic front-panel assets. Mechanical press and PLC illumination are independent. */
.vk-panel-control{width:46px;height:46px;flex:none;overflow:visible}
.vk-panel-control [data-part="button-cap"]{transform-origin:110px 134px}
.vk-panel-control[data-pressed="true"] [data-part="button-cap"]{transform:scale(.92)}
.vk-panel-control [data-part="light-rays"]{display:none}
.vk-panel-control[data-lit="true"] [data-part="light-rays"]{display:inline}
.vk-panel-control[data-control="start"][data-lit="true"] [data-part="lens"]{fill:#63ed8b}
.vk-panel-control[data-control="stop"][data-lit="true"] [data-part="lens"]{fill:#ff6666}
.vk-panel-control[data-control="reset"][data-lit="true"] [data-part="lens"]{fill:#63b8ff}
.ctl-dial{display:flex;justify-content:center}.ctl-dial .vk-panel-control{width:64px;height:64px}

.ctl-range{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.ctl-range .ctl-dial{grid-column:1/-1}.ctl-range input[type="range"]{width:100%;min-width:0}

/* PLC motor outputs: one independently driven contactor per direction. */
.motor-output{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.motor-output .vis{margin:0}
.motor-contactor{display:flex;flex-direction:column;align-items:center;width:92px;flex:none}
.motor-contactor .sirius-device{width:92px;height:129px;display:block}
.contactor-label{font:11px var(--mono,monospace);color:#526875;margin-top:-12px;margin-bottom:4px}

/* Larger signal indicators, scoped to I/O cards. */
.card .card-h .led{width:16px;height:16px;min-width:16px;flex:none;box-sizing:border-box;border:2px solid #728792;background:#d3dce2;box-shadow:0 0 0 2px #edf2f5}
.card .card-h .led.on{background:#138655;border-color:#075b39;box-shadow:0 0 0 3px #b4e5ce}

/* Readable drive status above the conveyor motor label. */
.conveyor-station .m-led{r:6px;fill:#c5d0d7;stroke:#607783;stroke-width:1.5}
.conveyor-station .scene-svg.running .m-led{fill:#19b876;stroke:#075b39;stroke-width:2}

/* Match selector visibility to enlarged output lamps. */
.toggle .vk-panel-control{width:104px;height:104px}
.toggle{flex-wrap:wrap;padding:8px;row-gap:4px}
.toggle .vk-toggle-label{overflow-wrap:anywhere}

.card.in .toggle,.card.in.active .toggle{background:#e5ebef;border-color:#9babb6;color:#344c5d}

.motor-output .motor svg.scene-svg{width:104px;height:80px}

.motor-output{flex-direction:column;gap:4px}
.motor-state{font:700 12px var(--mono,monospace);color:#344c5d;border:1px solid #9babb6;border-radius:3px;padding:3px 9px;background:#edf2f5;min-width:62px;text-align:center}
.scene-svg .motor-state-label{font-size:10px;font-weight:700;fill:#344c5d;text-anchor:middle}

.motor-output .vis.motor{width:104px;height:80px;min-height:80px}

/* Device status badges match the SIRIUS equipment labels. */
.signal-state{display:table;margin:4px auto;font:700 12px Arial,sans-serif;color:#fff;border:1px solid #e5ebef;border-radius:2px;padding:3px 9px;background:#26343d;min-width:62px;text-align:center;line-height:16px}
.card.active .signal-state{background:#146c3b;border-color:#84efb1}
.device-state-badge rect{fill:#26343d;stroke:#e5ebef;stroke-width:1}
.device-state-badge[data-active="true"] rect{fill:#146c3b;stroke:#84efb1}
.scene-svg .device-state-badge text{fill:white;font:700 10px Arial,sans-serif;text-anchor:middle}

.scene-advanced{flex-basis:100%;margin-top:4px}.scene-advanced summary{cursor:pointer;padding:6px;font-size:12px}.scene-advanced-buttons{display:flex;flex-wrap:wrap;gap:6px;padding-top:6px}

.vk-top-outline{stroke:#344854;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}.conveyor-view{margin:8px 10px 0;display:block}

.conveyor-view,.conveyor-view[aria-pressed="true"]{background:#f8fafb;color:#344c5d;border:1px solid #9babb6}

/* One panel footprint for task switches, pushbuttons and pilot lamps. */
#bench .cards{--panel-face-size:76px;--panel-control-height:112px}
#bench .cards .toggle,#bench .cards .push{
  box-sizing:border-box;min-height:var(--panel-control-height);height:var(--panel-control-height);
  display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;
  gap:4px;padding:8px;background:#e5ebef;border:1px solid #9babb6;border-bottom-width:3px;
  border-radius:3px;color:#344c5d;font:600 10px var(--sans);letter-spacing:.05em;
}
#bench .cards .toggle .vk-panel-control,#bench .cards .push .vk-panel-control,
#bench .cards .vk-lamp .vk-panel-control{width:var(--panel-face-size);height:var(--panel-face-size);flex:none}
#bench .cards .card .vis.lamp.vk-lamp{
  box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;
  width:100%;height:var(--panel-control-height);padding:8px;margin:0;
  background:#e5ebef!important;border:1px solid #9babb6;border-bottom-width:3px;border-radius:3px;
  box-shadow:none!important;
}
#bench .cards .push.down{background:#dce4e9;border-bottom-width:1px;transform:none}
#bench .cards .ctl-push .ctl-note{display:block;margin-top:4px}

#bench .sensor-probe-art{text-align:center;min-height:72px}
#bench .sensor-force-buttons{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
#bench .card.active .sensor-probe-art .probe-led{fill:#19b879}
#bench .level-adjust{display:flex;align-items:center;gap:12px;padding:12px;font-size:12px;color:#344c5d}
#bench .level-adjust input{min-width:0;flex:1}

/* Keep both process views together without changing single-conveyor lessons. */
#bench .lesson-scene.multi-conveyor{gap:4px}
#bench .multi-conveyor .lesson-model{position:relative}
#bench .multi-conveyor .lesson-model>strong{min-height:28px;box-sizing:border-box;padding:7px 12px}
#bench .multi-conveyor .conveyor-view{position:absolute;right:8px;top:3px;margin:0;min-height:22px;padding:2px 8px;font-size:10px}
#bench .multi-conveyor .conveyor-station>.scene-svg{height:clamp(160px,24vh,190px);width:100%;object-fit:contain}
#bench .multi-conveyor .lesson-indicator{padding:6px 12px}
