#wiring-app{
  --bg:#f4f1ea; --panel:#ffffff; --ink:#1d1d1b; --muted:#6b6b66; --line:#d9d4c8; --accent:#1f4e79;
  --core:4.4; --halo:10; --ring:3; --hit:60; --font:12px;
}
#wiring-app *{box-sizing:border-box}
#wiring-app{height:100%;margin:0}
#wiring-app{font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
#wiring-app .wd-bar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
#wiring-app .wd-bar .wd-title{font-size:17px;margin:0 auto 0 0;font-weight:650}
#wiring-app .wd-bar .wd-title .sub{font-weight:400;color:var(--muted);font-size:14px;margin-left:6px}
#wiring-app button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;padding:6px 12px;min-height:36px}
#wiring-app button:disabled{opacity:.45;cursor:not-allowed}
#wiring-app .modes{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
#wiring-app .modes .mode{border:0;border-radius:0;min-width:84px}
#wiring-app .modes .mode.on{background:var(--accent);color:#fff}
#wiring-app .zoom{display:flex;gap:6px}
#wiring-app .zoom button{min-width:36px;font-weight:600}
#wiring-app #panel-toggle{display:none}
#wiring-app .wd-main{flex:1;display:flex;min-height:0}
#wiring-app #stage{flex:1;position:relative;background:#e9e5db;touch-action:none;overflow:hidden;user-select:none;-webkit-user-select:none}
#wiring-app #svg{width:100%;height:100%;display:block}
#wiring-app #svg image{image-rendering:auto}
#wiring-app #loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);padding:8px 14px;border-radius:8px;font-size:14px}
#wiring-app #toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(29,29,27,.92);color:#fff;padding:8px 14px;border-radius:8px;font-size:14px;max-width:90%}
#wiring-app .route path.halo{fill:none;stroke-width:var(--halo);stroke-opacity:.18;stroke-linecap:round;stroke-linejoin:round}
#wiring-app .route .cabled path.halo{stroke:#FFD600;stroke-opacity:.45;stroke-width:calc(var(--halo)*1.1)}
#wiring-app .route .cabled path.core{stroke:var(--c1)}
#wiring-app .route .cabled path.stripe{fill:none;stroke:var(--c2);stroke-width:var(--core);stroke-dasharray:calc(var(--core)*2.5) calc(var(--core)*2.5);stroke-linecap:butt}
#wiring-app .route .cabled circle.ring{stroke:var(--c1)}
#wiring-app .route .cabled[data-code="B"] path.core{stroke:#fff}
#wiring-app .route .cabled[data-code="B"] path.halo{stroke:#555;stroke-opacity:.6}
#wiring-app .route .userhidden{display:none}
#wiring-app #comps .comp{fill:#FFD600;fill-opacity:0;stroke:#FFD600;stroke-opacity:0;stroke-width:calc(var(--ring)*1.5);transition:fill-opacity .15s,stroke-opacity .15s}
#wiring-app #comps .comp:hover{fill-opacity:.18;stroke-opacity:.9}
#wiring-app .chip-btn.code{display:inline-flex;align-items:center;gap:5px}
#wiring-app .chip-btn.code i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.3);display:inline-block}
#wiring-app .chip-btn.code.off{opacity:.4;text-decoration:line-through}
#wiring-app ul.wires{list-style:none;padding:0}
#wiring-app ul.wires li label{display:flex;gap:8px;align-items:flex-start}
#wiring-app ul.wires input{width:18px;height:18px;margin-top:2px;flex:none}
#wiring-app .route path.core{fill:none;stroke-width:var(--core);stroke-opacity:.9;stroke-linecap:round;stroke-linejoin:round}
#wiring-app .route circle.ring{fill:none;stroke-width:var(--ring);stroke-opacity:.85}
#wiring-app .route rect.ref{fill:none;stroke-width:calc(var(--ring) * .8);stroke-opacity:.9}
#wiring-app .route.dim{opacity:.22}
#wiring-app .route.selected path.core{stroke-opacity:1}
#wiring-app .route.selected path.halo{stroke-opacity:.32}
#wiring-app #hits path{fill:none;stroke:#000;stroke-opacity:0;stroke-width:var(--hit);stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke;cursor:pointer}
#wiring-app #hits circle{fill:#000;fill-opacity:0;pointer-events:all;cursor:pointer}
#wiring-app #labels g{pointer-events:none}
#wiring-app #labels rect{rx:calc(var(--font) * .45);fill:#fff;fill-opacity:.92;stroke-width:calc(var(--ring) * .7)}
#wiring-app #labels text{font-size:var(--font);font-weight:650;font-family:inherit;dominant-baseline:middle}
#wiring-app #panel{width:340px;max-width:40vw;background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:12px 16px 24px;-webkit-overflow-scrolling:touch}
#wiring-app #panel .grip{display:none}
#wiring-app #panel h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 8px}
#wiring-app #panel section+section{border-top:1px solid var(--line)}
#wiring-app #route-list{list-style:none;margin:0;padding:0}
#wiring-app #route-list li{display:flex;align-items:center;gap:10px;padding:6px 0}
#wiring-app #route-list input{width:20px;height:20px;margin:0;flex:none}
#wiring-app #route-list .sw{width:14px;height:14px;border-radius:50%;flex:none}
#wiring-app #route-list button.name{flex:1;text-align:left;border:0;background:none;padding:6px 4px;min-height:36px;border-radius:6px}
#wiring-app #route-list button.name:hover,#wiring-app #route-list li.selected button.name{background:#eef3f8}
#wiring-app #detail h3{margin:0 0 4px;font-size:16px}
#wiring-app #detail .chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;color:#fff;margin-right:6px}
#wiring-app #detail .status{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}
#wiring-app #detail .status.unresolved{border-color:#c77800;color:#8a5300;background:#fff6e5}
#wiring-app #detail ul{padding-left:18px;margin:6px 0}
#wiring-app #detail li{margin:4px 0}
#wiring-app #detail .pairs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
#wiring-app #detail .pairs button{padding:4px 10px;min-height:34px;font-variant-numeric:tabular-nums}
#wiring-app #detail .pairs button.unconf{border-style:dashed}
#wiring-app #detail .limit{background:#fff6e5;border-left:3px solid #c77800;padding:6px 10px;border-radius:0 6px 6px 0;font-size:14px}
#wiring-app .codes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;font-size:13px}
#wiring-app .codes span{display:flex;align-items:center;gap:6px}
#wiring-app .codes i{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:none}
#wiring-app .muted{color:var(--muted)}
#wiring-app .small{font-size:13px}
@media (max-width:820px){#wiring-app .wd-bar{padding:6px 10px;gap:8px}
#wiring-app .wd-bar .wd-title{font-size:15px}
#wiring-app .wd-bar .wd-title .sub{display:none}
#wiring-app #panel-toggle{display:inline-block}
#wiring-app .wd-main{flex-direction:column}
#wiring-app #panel{width:auto;max-width:none;border-left:0;border-top:1px solid var(--line);max-height:46dvh;padding-top:4px;transition:max-height .2s}
#wiring-app #panel .grip{display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 6px}
#wiring-app #panel.collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;border-top:0}
#wiring-app .codes{grid-template-columns:repeat(2,1fr)}
}
#wiring-app.operate .route.dim{opacity:.1}
#wiring-app .route .live path.core{stroke-opacity:1}
#wiring-app .route .live path.stripe{stroke-opacity:1}
#wiring-app .route .live path.halo{stroke-opacity:.5;stroke-width:calc(var(--halo)*1.15)}
#wiring-app .route .live circle.ring{stroke-opacity:1}
#wiring-app .route .earth path.core{stroke-opacity:.9}
#wiring-app .route .earth path.stripe{stroke-opacity:.9}
#wiring-app .route .earth path.halo{stroke:#37474F;stroke-opacity:.34;stroke-width:calc(var(--halo)*1.15)}
#wiring-app .route .earth circle.ring{stroke-opacity:.9}
/* Unenergised wires keep their cable colour and are simply quieter. Painting
   them grey made a whole circuit read as grey the moment the switches were off
   (Mark, 18 Oct). Energised wires are still teal and earth returns still dark. */
#wiring-app .route .off path.core{stroke-opacity:.26}
#wiring-app .route .off path.halo{stroke-opacity:0}
#wiring-app .route .off circle.ring{stroke-opacity:.26}
#wiring-app .route .off path.stripe{stroke-opacity:.26}
#wiring-app .route .off rect.ref{stroke-opacity:.5}
#wiring-app .route .blown path.stripe{stroke:#D32F2F;stroke-opacity:.6}
#wiring-app .route .lit circle.ring{stroke:#f9a825;fill:#ffd54f;fill-opacity:.7;stroke-width:calc(var(--ring)*1.6)}
#wiring-app .ctl{margin:8px 0 12px}
#wiring-app .ctl .lbl{font-weight:600;margin-bottom:4px}
#wiring-app .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content;max-width:100%}
#wiring-app .seg button{border:0;border-radius:0;min-height:40px}
#wiring-app .seg button.on{background:var(--accent);color:#fff}
#wiring-app .ctl label{display:flex;gap:8px;align-items:flex-start;font-weight:600}
#wiring-app .ctl input{width:20px;height:20px;margin-top:2px}
#wiring-app ul.lamps{list-style:none;padding:0;margin:6px 0}
#wiring-app ul.lamps li{display:flex;align-items:center;gap:8px;padding:4px 0}
#wiring-app .bulb{width:16px;height:16px;border-radius:50%;border:2px solid #777;background:#eee;flex:none}
#wiring-app .bulb.on{background:#ffd54f;border-color:#f9a825;box-shadow:0 0 8px #ffd54f}
#wiring-app .bulb.na{border-style:dashed}
#wiring-app .route .harness path.core{stroke-opacity:.95}
#wiring-app .route .harness path.halo{stroke-opacity:.12}
#wiring-app .route .harness path.bandtint{display:none}
#wiring-app .route .netoff{opacity:.07}
#wiring-app #hits path{cursor:crosshair}
#wiring-app #tip{position:absolute;z-index:5;pointer-events:none;background:rgba(29,29,27,.94);color:#fff;padding:7px 10px;border-radius:8px;font-size:13px;line-height:1.35;max-width:320px}
#wiring-app #tip b{font-weight:700}
#wiring-app #tip .muted{color:#cfcfcf}
#wiring-app #comps .label-only:hover{fill-opacity:.12;stroke-opacity:.6}
#wiring-app #relays circle.relay{fill:none;stroke-opacity:.95}
#wiring-app #relays circle.relay.off{stroke:#D32F2F;fill:#D32F2F;fill-opacity:.07}
#wiring-app #relays circle.relay.on{stroke:#2E7D32;fill:#43A047;fill-opacity:.14}
#wiring-app #relays text.relay-label{font-weight:700;font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
#wiring-app #relays text.relay-label.off{fill:#D32F2F}
#wiring-app #relays text.relay-label.on{fill:#2E7D32}
#wiring-app .relaydot{width:16px;height:16px;border-radius:50%;background:#D32F2F;flex:none;box-shadow:0 0 0 2px #fff inset}
#wiring-app .relaydot.on{background:#43A047}
#wiring-app #relays circle.switchmark{fill:#1F4E79;fill-opacity:.06;stroke:#1F4E79;stroke-opacity:.85}
#wiring-app #relays text.switch-label{fill:#1F4E79;font-weight:700;font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
#wiring-app .route .blown path.core,#wiring-app .route .blown circle.ring{stroke:#D32F2F;stroke-dasharray:6 6;stroke-opacity:.9}
#wiring-app .route .blown path.halo{stroke:#D32F2F;stroke-opacity:.15}
#wiring-app .fusebtn{min-width:70px;font-size:12px;font-weight:700;padding:4px 8px;min-height:30px;border-radius:6px}
#wiring-app .fusebtn.ok{background:#E8F5E9;border-color:#43A047;color:#1B5E20}
#wiring-app .fusebtn.blown{background:#FFEBEE;border-color:#D32F2F;color:#B71C1C}
#wiring-app .bulb.earthed{background:#263238;border-color:#263238}
#wiring-app ul.fuses{list-style:none;padding:0;margin:6px 0}
#wiring-app ul.fuses li{display:grid;grid-template-columns:1.5em 3.4em 1fr;gap:6px;align-items:baseline;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:13px;line-height:1.3}
#wiring-app ul.fuses li:hover{background:rgba(255,214,0,.18)}
#wiring-app ul.fuses li.on{background:rgba(255,214,0,.38)}
#wiring-app ul.fuses li b{font-size:15px}
#wiring-app ul.fuses li .pin{color:var(--muted);white-space:nowrap}
#wiring-app ul.fuses li.spare{opacity:.55}
#wiring-app .fusehead{border-bottom:1px solid var(--line);margin-bottom:10px;padding-bottom:8px}
#wiring-app .fusehead h3{margin-top:0}
#wiring-app #comps .fuse:hover{fill-opacity:.22;stroke-opacity:.9}
#wiring-app .wd-bar .home{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:5px 9px;white-space:nowrap}
#wiring-app .wd-bar .home:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
#wiring-app #about h3{font-size:14px;margin:14px 0 4px}
#wiring-app details.routelist{margin:6px 0}
#wiring-app details.routelist>summary{cursor:pointer;font-size:13px;font-weight:600;padding:5px 0}
#wiring-app details.routelist ul{padding-left:18px;margin:4px 0}
#wiring-app details.routelist li{margin-bottom:7px;line-height:1.4}
#wiring-app #about a,#wiring-app #panel a{color:var(--accent)}


/* ---- the viewer is a block inside the x19.com.au page, not the whole viewport ---- */
#wiring-app{height:min(80vh,1100px);min-height:min(520px,86vh);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06)}
#wiring-app .wd-bar{border-radius:10px 10px 0 0}
@media (min-width:821px){#wiring-app #panel{width:clamp(340px,24vw,560px);max-width:42%}}
@media (max-width:820px){
  #wiring-app{height:auto;min-height:0}
  /* The sheet is 1.5:1 and a phone is portrait, so a tall canvas can only ever
     letterbox. Matching the sheet's own shape keeps the dead space to a sliver
     and puts the diagram straight under the toolbar. Pinch to zoom from there. */
  #wiring-app #stage{height:auto;aspect-ratio:4657/3109;min-height:300px;flex:none}
  /* No nested scrolling: the panel flows with the page, Details still collapses it. */
  #wiring-app #panel{width:auto;max-width:none;max-height:400vh;overflow:visible}
  #wiring-app #panel.collapsed{max-height:0}
}


/* Operate: the model picker is 15 circuits, so it wraps as chips instead of
   squeezing a segmented control until the labels break mid-word. */
#wiring-app .seg.models{display:flex;flex-wrap:wrap;gap:6px;border:0;border-radius:0;overflow:visible;width:auto;max-width:none;margin-bottom:10px}
#wiring-app .seg.models button{border:1px solid var(--line);border-radius:999px;min-height:32px;padding:4px 12px;font-size:12.5px;white-space:nowrap;flex:0 0 auto}
#wiring-app .seg.models button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Switch positions: a segmented control clips its last option once the labels
   are longer than the panel, so these wrap as chips too. Labels never break. */
#wiring-app .ctl .seg{display:flex;flex-wrap:wrap;gap:6px;border:0;border-radius:0;overflow:visible;width:auto;max-width:none}
#wiring-app .ctl .seg button{border:1px solid var(--line);border-radius:8px;min-height:38px;padding:5px 13px;white-space:nowrap;flex:0 0 auto}
#wiring-app .ctl .seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}


/* ---- compact toolbar on phones: two tidy rows, no label ever breaks ---- */
#wiring-app .lbl-narrow{display:none}
@media (max-width:820px){
  #wiring-app .wd-bar{gap:6px;padding:7px 8px}
  #wiring-app .wd-bar .wd-title{display:none}          /* the page h1 right above says it */
  #wiring-app .wd-bar button{white-space:nowrap;padding:6px 10px;min-height:40px}
  #wiring-app .modes{flex:1 1 auto}
  #wiring-app .modes .mode{flex:1 1 0;min-width:0}
  #wiring-app .zoom{flex:1 1 100%;gap:6px}
  #wiring-app .zoom button{flex:1 1 auto}
  #wiring-app .zoom #zoom-in,#wiring-app .zoom #zoom-out{flex:0 0 42px;min-width:42px}
  #wiring-app .lbl-wide{display:none}
  #wiring-app .lbl-narrow{display:inline}
}


/* ---- Fuses mode ---- */
#wiring-app ul.fusemode-list{list-style:none;padding:0;margin:6px 0}
#wiring-app ul.fusemode-list li{display:grid;grid-template-columns:5.2em 1.4em 3.4em 1fr;gap:8px;align-items:center;padding:6px 4px;border-radius:6px;font-size:13px;line-height:1.35;border-bottom:1px solid var(--line)}
#wiring-app ul.fusemode-list li:last-child{border-bottom:0}
#wiring-app ul.fusemode-list li.out{background:#FFEBEE}
#wiring-app ul.fusemode-list li.spare{opacity:.5}
#wiring-app ul.fusemode-list li b{font-size:15px}
#wiring-app ul.fusemode-list li .pin{color:var(--muted);white-space:nowrap}
#wiring-app ul.fusemode-list li .job{min-width:0}
#wiring-app ul.fusemode-list .fusebtn{width:100%}
#wiring-app #fusemarks rect.fuseblown{fill:#D32F2F;fill-opacity:.1;stroke:#D32F2F;stroke-opacity:.95}
#wiring-app #fusemarks line.fusecross{stroke:#D32F2F;stroke-opacity:.95;stroke-linecap:round}
#wiring-app #fusemarks text.fuselabel{fill:#D32F2F;font-weight:700;font-family:inherit;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;dominant-baseline:middle}
@media (max-width:820px){
  #wiring-app ul.fusemode-list li{grid-template-columns:5.2em 1.4em 1fr;row-gap:2px}
  #wiring-app ul.fusemode-list li .job{grid-column:1 / -1}
}
#wiring-app .fuse-actions{min-height:40px;display:flex;align-items:center;margin:6px 0}
#wiring-app .route .fusehide{display:none}


/* ---- full screen: the diagram covers the site chrome, same page and URL ---- */
#wiring-app .iconbtn{display:inline-flex;align-items:center;gap:7px}
#wiring-app .iconbtn svg{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:none}
#wiring-app #expand.backbtn{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:650}
body.wiring-expanded{overflow:hidden}
#wiring-app.expanded{position:fixed;inset:0;z-index:10050;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;background:var(--bg)}
#wiring-app.expanded .wd-bar{border-radius:0}
#wiring-app.expanded #stage{height:auto;min-height:0;aspect-ratio:auto;flex:1}
#wiring-app.expanded #panel{max-height:none;overflow:auto}
@media (max-width:820px){
  #wiring-app.expanded #panel{width:auto;max-width:none;max-height:46dvh;overflow:auto}
  #wiring-app.expanded #panel.collapsed{max-height:0}
  #wiring-app #expand .x-label{display:none}
  #wiring-app #expand.backbtn .x-label{display:inline}
}
@media (min-width:821px){ #wiring-app #expand .x-label{display:none} #wiring-app #expand.backbtn .x-label{display:inline} }