/* Conduit lines (site-wide standard, Oct 19 2026): styles for js/conduit-lines.js. See STYLE-GUIDE.md "Connector lines".
   Every stroke uses non-scaling-stroke, so widths and dashes are screen pixels at any size. Colour per run comes from --c. */
.cl path, .cl circle { vector-effect:non-scaling-stroke; }
.cl path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cl-ln { stroke:var(--c); }
.cl-flow { stroke:var(--c); stroke-width:3; stroke-dasharray:16 260; opacity:0; }
.cl-jn { fill:var(--c); stroke:#0a1020; stroke-width:1.5; }
.cl-jn--knee { fill:#0a1020; stroke:var(--c); stroke-width:1.6; }
.cl-bus { stroke:#4DAAE8; stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(77,170,232,.8)); }
@keyframes clFlow { to { stroke-dashoffset:-276; } }
@keyframes clDash { to { stroke-dashoffset:-12; } }

/* 1 Pulse: thin solid runs, a bright pulse travels toward the panel */
.cl[data-cl-style="1"] .cl-ln { stroke-width:1.6; opacity:.7; }
.cl[data-cl-style="1"] .cl-flow { opacity:1; filter:drop-shadow(0 0 4px var(--c)); animation:clFlow 2.8s linear infinite; animation-delay:calc(var(--i) * -.6s); }

/* 2 Conduit: a dark tube with coloured walls (double line) and a soft glow; a slow glow moves inside */
.cl[data-cl-style="2"] .cl-tube { stroke:var(--c); stroke-width:8; opacity:.55; filter:drop-shadow(0 0 5px var(--c)); }
.cl[data-cl-style="2"] .cl-bore { stroke:#0b1224; stroke-width:5; }
.cl[data-cl-style="2"] .cl-ln { stroke-width:1; opacity:.5; }
.cl[data-cl-style="2"] .cl-flow { opacity:.95; stroke-width:2.4; stroke-dasharray:34 240; animation:clFlow 3.6s linear infinite; animation-delay:calc(var(--i) * -.7s); }
.cl[data-cl-style="2"] .cl-jn--knee { display:none; }

/* 3 Dashed + flow dots: even dashes creep toward the panel, two dots ride each run */
.cl[data-cl-style="3"] .cl-ln { stroke-width:2; stroke-dasharray:5 7; opacity:.75; animation:clDash 1.2s linear infinite; }
.cl[data-cl-style="3"] .cl-dot { fill:#fff; stroke:var(--c); stroke-width:2; filter:drop-shadow(0 0 4px var(--c)); }

/* 4 Tray (recommended): one shared cable tray into the panel bus; crisp runs, ringed junctions, energy packets */
.cl-tray { fill:rgba(77,170,232,.07); stroke:rgba(200,215,240,.28); stroke-width:1; stroke-dasharray:2 3; }
.cl[data-cl-style="4"] .cl-ln { stroke-width:2; opacity:.85; }
.cl[data-cl-style="4"] .cl-flow { opacity:1; stroke:#fff; stroke-width:2; stroke-dasharray:6 120; filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 6px var(--c)); animation:clFlow 2.2s linear infinite; animation-delay:calc(var(--i) * -.45s); }
.cl[data-cl-style="4"] .cl-jn--src { stroke:var(--c); stroke-width:5; stroke-opacity:.3; }

@media (prefers-reduced-motion: reduce) { .cl .cl-ln, .cl .cl-flow { animation:none !important; } .cl .cl-flow { opacity:0 !important; } }

/* ===== Finalists A / B / C (style:'A'|'B'|'C'; preview /hiw-lines-a/ .. -c/ or ?lines=A|B|C). Not a default yet. ===== */
.cl[data-cl-style="A"] path, .cl[data-cl-style="B"] path, .cl[data-cl-style="C"] path, .cl[data-cl-style="A"] circle, .cl[data-cl-style="B"] circle, .cl[data-cl-style="C"] circle, .cl[data-cl-style] rect { vector-effect:non-scaling-stroke; }
.clf-tray { fill:rgba(5,9,20,.88); stroke:rgba(150,175,215,.38); stroke-width:1.2; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.clf-u { fill:none; stroke:rgba(4,7,16,.85); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.clf-u--main { stroke-width:11; }
.clf-ln { fill:none; stroke:var(--lc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px color-mix(in srgb,var(--lc) 70%,transparent)); }
.cl[data-cl-style="B"] .clf-ln { opacity:.9; }
.clf-main { fill:none; stroke:#4DAAE8; stroke-width:5; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(77,170,232,.75)); }
.clf-flow { fill:none; stroke:#EAF6FF; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:8 72; filter:drop-shadow(0 0 3px #4DAAE8) drop-shadow(0 0 7px #4DAAE8); animation:clfFlow 3.2s linear infinite; animation-delay:calc(var(--i) * -.64s); }
.cl[data-cl-style="C"] .clf-flow:not(.clf-flow--main) { stroke:#fff; filter:drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 6px var(--c)); }
.clf-flow--main { stroke-width:3; stroke-dasharray:10 50; animation-duration:2.4s; }
@keyframes clfFlow { to { stroke-dashoffset:-80; } }
.clf-flow--main { animation-name:clfFlowM; } @keyframes clfFlowM { to { stroke-dashoffset:-60; } }
.clf-ring { fill:#0a1020; stroke:var(--c); stroke-width:1.8; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 60%,transparent)); }
.clf-dot { fill:var(--c); }
.clf-panel__halo { fill:rgba(77,170,232,.16); stroke:rgba(77,170,232,.35); stroke-width:1; animation:clfHalo 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes clfHalo { 50% { transform:scale(1.15); opacity:.6; } }
.clf-panel__tile { fill:#0e1830; stroke:#4DAAE8; stroke-width:1.6; filter:drop-shadow(0 0 6px rgba(77,170,232,.7)); }
.clf-panel__g { fill:none; stroke:#cfe6fb; stroke-width:1.6; stroke-linecap:round; }
.clf-panel__bolt { fill:none; stroke:#F7CA50; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (prefers-reduced-motion: reduce) { .clf-flow { display:none; } .clf-panel__halo { animation:none; } }

/* Option D / D2 wires (js/conduit-wires.js): canvas over the render, labels stay above it. */
.cw-host { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; display:block !important; }
.cw-canvas { position:absolute; inset:0; display:block; }
.cw-chip { position:absolute; transform:translate(-8px,-50%); display:flex; align-items:center; gap:9px; padding:8px 14px 8px 10px; border-radius:12px; background:rgba(14,24,48,.92); border:1px solid rgba(207,230,251,.35); box-shadow:0 0 0 4px rgba(77,170,232,.12),0 10px 24px rgba(0,0,0,.45); color:#fff; font:600 14px/1.15 'Averta CY',system-ui,sans-serif; white-space:nowrap; z-index:2; }
.cw-chip i { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 10px #4DAAE8,0 0 0 3px rgba(77,170,232,.35); flex:none; }
.cw-chip strong { display:block; color:#fff; font-weight:600; }
.cw-chip span { display:block; font-weight:400; font-size:12px; color:#b9cbe4; }
@media (max-width:600px){ .cw-chip { font-size:11px; padding:5px 9px 5px 7px; gap:6px; } .cw-chip span { font-size:10px; } }
/* Option E: no red glow blobs; the ribbons' ring nodes mark the equipment. */
.cw-E .r2h__eq i, .cw-E .sv2-pn, .cw-E .sv2-leak { display:none !important; }