/**

 * Pool SCADA — Floorplan bundle (Phase 1C motion enabled)

 * ha-floorplan injects this file into shadow DOM — @import chains are unreliable.

 * animations.css is inlined below (not @imported).

 */

@import url("/pool/styles/theme.tokens.css");

@import url("/pool/styles/reset.css");

@import url("/pool/styles/components.css");

@import url("/pool/styles/states.css");

@import url("/pool/styles/interactions.css");

@import url("/pool/styles/responsive.css");



/* Shadow-DOM safe device tokens (@import theme.tokens.css is unreliable in ha-floorplan) */
svg,
floorplan-element {
  --device-backlight-opacity: 0.32;
  --device-backlight-opacity-active: 0.44;
  --device-ambient-white-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.18))
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.1));
}

/* Prevent status halo clipping at zoom levels */
#layer.devices,
.layer-devices,
.layer-devices .device {
  overflow: visible;
}



/* --- BEGIN inlined animations.css Phase 1E (shadow-DOM safe) --- */

/* Neon HMI piping — thin emissive lines, no steel casing.
   Layer order per pipe group: track(hidden) → bloom(outer glow) → shell(hidden)
   → core(neon line) → flow(dash segments) → sheen(inner highlight). */

/* Steel casing layers removed for the neon look (kept in markup for structure) */
.pipe-track,
.pipe-shell {
  display: none;
}

/* Outer glow halo — always on, blooms brighter when fluid moves */
.pipe-bloom {
  fill: none;
  stroke: var(--pipe-glow-c1, rgba(95, 216, 255, 0.55));
  stroke-width: var(--pipe-bloom-width, 16);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  opacity: var(--pipe-bloom-opacity, 0.22);
  transition: opacity 480ms ease, stroke 320ms ease;
}

/* Main neon line — emissive, always visible */
.pipe-core {
  fill: none;
  stroke: var(--pipe-neon-c1, #5fd8ff);
  stroke-width: var(--pipe-core-width, 4);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.92;
  pointer-events: none;
  filter: var(--pipe-ds-c1);
  transition: opacity 260ms ease, stroke 260ms ease;
}

/* Animated flow segments (───► ───►) — coloured, hidden until flowing */
.pipe-flow {
  stroke-dasharray: var(--flow-dash-on, 5) var(--flow-dash-off, 80);
  stroke-dashoffset: 0;
  fill: none;
  stroke: var(--pipe-spec-c1, #d6f6ff);
  stroke-width: var(--pipe-flow-width, 4);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  opacity: 0;
  filter: var(--pipe-flow-ds-c1);
}

/* Inner specular highlight — subtle tube depth, never cartoonish */
.pipe-sheen {
  fill: none;
  stroke: var(--pipe-spec-c1, #d6f6ff);
  stroke-width: var(--pipe-spec-width, 1.4);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  opacity: 0.4;
}

/* Lit junction nodes at T-connections */
.pipe-junction {
  fill: var(--pipe-neon-c1, #5fd8ff);
  stroke: var(--pipe-spec-c1, #d6f6ff);
  stroke-width: 1;
  pointer-events: none;
  filter: var(--pipe-ds-c1);
}

.pipe-junction--c2 {
  fill: var(--pipe-neon-c2, #ff7a3d);
  stroke: var(--pipe-spec-c2, #ffd0ad);
  filter: var(--pipe-ds-c2);
}

.pipe-junction--c3 {
  fill: var(--pipe-neon-c3, #ff6b4a);
  stroke: var(--pipe-spec-c3, #ffc4b5);
  filter: var(--pipe-ds-c3);
}

.pipe-junction--c4 {
  fill: var(--pipe-neon-c4, #3ce58a);
  stroke: var(--pipe-spec-c4, #c4ffe0);
  filter: var(--pipe-ds-c4);
}

.flow-marker {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 260ms ease;
}

#c1.state--off #c1-pool-pipes .pipe.flow-idle .pipe-flow,
#c1.state--idle #c1-pool-pipes .pipe.flow-idle .pipe-flow,
#c1.state--error #c1-pool-pipes .pipe.flow-idle .pipe-flow,
#c1-pool-pipes .pipe.flow-idle .pipe-flow {
  animation: none !important;
  opacity: 0 !important;
  will-change: auto;
}

/* Circuit 1 — neon cyan process line, always emissive */
#c1-pool-pipes .pipe.pipe--c1 .pipe-core {
  stroke: var(--pipe-neon-c1, #5fd8ff);
  stroke-width: var(--pipe-core-width, 4);
  opacity: 0.9;
  filter: var(--pipe-ds-c1);
}

#c1-pool-pipes .pipe.pipe--c1 .pipe-bloom {
  stroke: var(--pipe-glow-c1, rgba(95, 216, 255, 0.55));
}

#c1-pool-pipes .pipe.pipe--c1 .pipe-sheen {
  stroke: var(--pipe-spec-c1, #d6f6ff);
}

/* Idle keeps a soft emissive line + base halo (premium always-on twin) */
#c1.state--off #c1-pool-pipes .pipe .pipe-core,
#c1.state--idle #c1-pool-pipes .pipe .pipe-core,
#c1-pool-pipes .pipe.flow-idle .pipe-core {
  opacity: 0.72;
  stroke: var(--pipe-neon-c1, #5fd8ff);
}

#c1.state--off #c1-pool-pipes .pipe-bloom,
#c1.state--idle #c1-pool-pipes .pipe-bloom,
#c1-pool-pipes .pipe.flow-idle .pipe-bloom {
  opacity: calc(var(--pipe-bloom-opacity, 0.22) * 0.6) !important;
}

#c1.state--warning #c1-pool-pipes .pipe .pipe-core {
  stroke: var(--c-warn, #ffb020) !important;
  filter: drop-shadow(0 0 3px rgba(255, 176, 32, 0.85)) drop-shadow(0 0 9px rgba(255, 176, 32, 0.45)) !important;
}

#c1.state--warning #c1-pool-pipes .pipe .pipe-bloom {
  stroke: rgba(255, 176, 32, 0.5) !important;
}

#c1.state--error #c1-pool-pipes .pipe .pipe-core {
  stroke: var(--c-error, #ff3d5a) !important;
  filter: drop-shadow(0 0 3px rgba(255, 61, 90, 0.9)) drop-shadow(0 0 9px rgba(255, 61, 90, 0.5)) !important;
}

#c1.state--error #c1-pool-pipes .pipe .pipe-bloom {
  stroke: rgba(255, 61, 90, 0.5) !important;
}

#c1.state--running #c1-pool-pipes .pipe-bloom,
#c1.state--heating #c1-pool-pipes .pipe-bloom,
#c1-pool-pipes .pipe.flow-animated .pipe-bloom {
  opacity: calc(var(--pipe-bloom-opacity, 0.22) + var(--flow-glow-strength, 0.58) * 0.18) !important;
}

#c1.state--running #c1-pool-pipes .pipe .pipe-core,
#c1.state--heating #c1-pool-pipes .pipe .pipe-core,
#c1-pool-pipes .pipe.flow-animated .pipe-core {
  opacity: 1 !important;
  stroke: var(--pipe-neon-c1, #5fd8ff);
}

#c1.state--heating #c1-pool-pipes .pipe-core,
#c1.state--heating #c1-pool-pipes .pipe.flow-animated .pipe-core {
  stroke: var(--c-thermal-mix, #5dd9c8);
}

#c1.state--running #c1-pool-pipes .pipe-sheen,
#c1.state--heating #c1-pool-pipes .pipe-sheen,
#c1-pool-pipes .pipe.flow-animated .pipe-sheen {
  opacity: 0.35 !important;
}

#c1.state--running #c1-pool-pipes .flow-marker,
#c1.state--heating #c1-pool-pipes .flow-marker,
#c1-pool-pipes .pipe.flow-animated .flow-marker {
  opacity: 0.85 !important;
}

#c1-pool-pipes .pipe.flow-animated .pipe-bloom,
#c1.state--heating #c1-pool-pipes .pipe-bloom {
  animation: scada-bloom-pulse var(--flow-speed, 0.8s) ease-in-out infinite;
}

#c1.state--running #c1-pool-pipes .pipe-flow.flow-dir--forward,
#c1.state--heating #c1-pool-pipes .pipe-flow.flow-dir--forward,
#c1.state--running #c1-pool-pipes .pipe-flow.flow-dir--reverse,
#c1.state--heating #c1-pool-pipes .pipe-flow.flow-dir--reverse,
#c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  opacity: calc(0.48 + var(--flow-opacity, 0.78) * 0.48) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c1.state--running #c1-pool-pipes .pipe-flow.flow-dir--forward,
#c1.state--heating #c1-pool-pipes .pipe-flow.flow-dir--forward,
#c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
}

#c1.state--running #c1-pool-pipes .pipe-flow.flow-dir--reverse,
#c1.state--heating #c1-pool-pipes .pipe-flow.flow-dir--reverse,
#c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
}

/* Warning + pump on: must beat legacy #c1.state--warning #c1-pool-pipes .pipe-flow kill (2 IDs) */
#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  opacity: calc(0.48 + var(--flow-opacity, 0.78) * 0.48) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
}

#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
}

#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-core {
  opacity: calc(0.32 + var(--flow-core-brightness, 0.55) * 0.48 + var(--flow-glow-strength, 0.58) * 0.22) !important;
}

#c1.state--warning #c1-pool-pipes .pipe.flow-animated .flow-marker {
  opacity: 0.85 !important;
}

#c1.state--warning #c1-pool-pipes .pipe.flow-animated .pipe-bloom {
  opacity: calc(var(--pipe-bloom-opacity, 0.18) + var(--flow-glow-strength, 0.58) * 0.14) !important;
}

#c1.state--heating #c1-pool-pipes .pipe-flow {
  stroke: #fff0dc;
}

@keyframes scada-flow-forward {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -85; }
}

@keyframes scada-flow-reverse {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 85; }
}

/* Unified flow rhythm — dash period matches keyframe step for seamless loops */
#c1-pool-pipes,
#c2,
#c3,
#c4 {
  --flow-speed: 0.8s;
  --flow-dash-on: 5;
  --flow-dash-off: 80;
  --flow-dash-period: 85;
  --flow-play: running;
}

#c1-pool-pipes {
  --flow-opacity: 0.78;
}

#c2 {
  --flow-opacity: 0.78;
}

#c3 {
  --flow-opacity: 0.85;
}

#c4 {
  --flow-opacity: 0.9;
}

.pipe.flow-animated .pipe-flow,
#c1-pool-pipes .pipe-flow.flow-dir--forward,
#c1-pool-pipes .pipe-flow.flow-dir--reverse,
#c1-pool-pipes .pipe.flow-animated .pipe-flow {
  stroke-dasharray: var(--flow-dash-on, 5) var(--flow-dash-off, 80) !important;
}

@keyframes scada-bloom-pulse {
  0%, 100% { opacity: calc(var(--pipe-bloom-opacity, 0.12) + var(--flow-glow-strength, 0.4) * 0.08); }
  50% { opacity: calc(var(--pipe-bloom-opacity, 0.22) + var(--flow-glow-strength, 0.58) * 0.18); }
}

.pipe-channel {
  pointer-events: none;
  transition: fill 260ms ease;
}

#c1.state--running .pipe-channel,
#c1.state--heating .pipe-channel {
  fill: rgba(0, 229, 255, 0.06);
}

#c1.state--running .pipe-flange,
#c1.state--heating .pipe-flange {
  stroke: var(--c-flow, #00e5ff);
}

.motion-impeller,
.motion-fan {
  transform-box: fill-box;
  transform-origin: center;
}

#c1.state--off .motion-impeller,
#c1.state--idle .motion-impeller,
#c1.state--off .motion-fan,
#c1.state--idle .motion-fan,
#c1.state--error .motion-impeller,
#c1.state--error .motion-fan {
  animation: none !important;
}

.device.role--pump.state--running .motion-impeller,
.device.role--pump.state--running.has-glow .motion-impeller {
  animation: scada-spin var(--pump-rotate-duration, 3.6s) linear infinite;
  animation-play-state: var(--flow-play, running);
}

.device.role--heatpump.state--running .motion-fan,
.device.role--heatpump.state--heating .motion-fan {
  animation: scada-spin var(--fan-rotate-duration, 2.6s) linear infinite;
  animation-play-state: var(--flow-play, running);
}

@keyframes scada-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Device status glow — see states.css (integrated SCADA halos) */

.thermal-shimmer {
  pointer-events: none;
  opacity: 0;
}

#c1.state--off .thermal-shimmer,
#c1.state--idle .thermal-shimmer,
#c1.state--running .thermal-shimmer,
#c1.state--warning .thermal-shimmer,
#c1.state--error .thermal-shimmer {
  animation: none !important;
  opacity: 0 !important;
}

.device.role--hx.state--heating .thermal-shimmer {
  opacity: 1;
  animation: scada-thermal-shimmer 3.2s ease-in-out infinite;
}

@keyframes scada-thermal-shimmer {
  0%, 100% { opacity: 0.5; transform: translateX(-3%); }
  50% { opacity: 0.92; transform: translateX(3%); }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-flow,
  .motion-impeller,
  .motion-fan,
  .thermal-shimmer {
    animation: none !important;
    will-change: auto !important;
  }

  .pipe-flow,
  .thermal-shimmer {
    opacity: 0 !important;
  }

  #c1.state--running .pipe-core,
  #c1.state--heating .pipe-core {
    opacity: calc(var(--flow-core-brightness, 0.55) * 0.58);
  }

  #c1.state--running .pipe-bloom,
  #c1.state--heating .pipe-bloom {
    opacity: calc(var(--pipe-bloom-opacity, 0.18) * 0.65);
  }
}

/* --- END inlined animations.css --- */



.floorplan-card ha-card {

  background: transparent !important;

  box-shadow: none !important;

  border: none !important;

}



.floorplan-card .card-content {

  padding: 0 !important;

}



/* Panel chrome is baked into scada-bg.png */
.scada-panel,
.scada-panel-glow,
.scada-panel-inner {
  display: none;
}

/* Zone headers — engraved into panel grooves (matches scada-bg emboss) */
#layer.zones .zone-title {
  pointer-events: none;
  paint-order: fill;
}

#layer.zones .zone-title--c1 {
  fill: rgba(95, 216, 255, 0.88);
}

#layer.zones .zone-title--c2 {
  fill: rgba(255, 138, 80, 0.88);
}

#layer.zones .zone-title--c3 {
  fill: rgba(255, 107, 74, 0.95) !important;
}

#layer.zones .zone-title--c4 {
  fill: rgba(74, 222, 128, 0.95) !important;
}

#layer.zones .zone-subtitle {
  pointer-events: none;
  fill: rgba(196, 214, 224, 0.62);
  font-weight: 500;
}

.floorplan-card svg,

ha-floorplan svg,

floorplan-element svg {

  width: 100%;

  height: auto;

  aspect-ratio: 1920 / 1320;

  display: block;

  visibility: visible !important;

  opacity: 1 !important;

}

/* Circuit 2 — neon orange solar loop, warm emissive */
#c2 .pipe-core {
  stroke: var(--pipe-neon-c2, #ff7a3d);
  stroke-width: var(--pipe-core-width-c2, 4);
  opacity: 0.9;
  filter: var(--pipe-ds-c2);
}

#c2 .pipe-bloom {
  stroke: var(--pipe-glow-c2, rgba(255, 122, 61, 0.62));
  stroke-width: var(--pipe-bloom-width-c2, 15);
  opacity: var(--pipe-bloom-opacity, 0.22);
}

#c2 .pipe-sheen {
  stroke: var(--pipe-spec-c2, #ffd0ad);
}

#c2 .pipe.flow-animated .pipe-bloom,
#c2.state--running .pipe-bloom,
#c2.state--heating .pipe-bloom {
  animation: scada-bloom-pulse 2.8s ease-in-out infinite;
}

#c2.state--off .pipe.flow-idle .pipe-flow,
#c2.state--idle .pipe.flow-idle .pipe-flow,
#c2.state--warning .pipe.flow-idle .pipe-flow,
#c2.state--error .pipe.flow-idle .pipe-flow {
  animation: none !important;
  opacity: 0 !important;
}

#c2.state--off .pipe-core,
#c2.state--idle .pipe-core {
  stroke: var(--pipe-neon-c2, #ff7a3d);
  opacity: 0.7 !important;
}

#c2.state--off .pipe-bloom,
#c2.state--idle .pipe-bloom {
  opacity: calc(var(--pipe-bloom-opacity, 0.22) * 0.6) !important;
}

#c2.state--warning .pipe-bloom,
#c2.state--error .pipe-bloom {
  opacity: 0.18 !important;
}

#c2.state--off .pipe.flow-idle .flow-marker,
#c2.state--idle .pipe.flow-idle .flow-marker,
#c2.state--warning .pipe.flow-idle .flow-marker,
#c2.state--error .pipe.flow-idle .flow-marker {
  opacity: 0 !important;
}

#c2.state--warning .pipe-core {
  stroke: var(--c-warn, #ffb020) !important;
}

#c2.state--error .pipe-core {
  stroke: var(--c-error, #ff3d5a) !important;
}

#c2.state--heating .pipe-core,
#c2.state--running .pipe-core {
  stroke: var(--pipe-neon-c2, #ff7a3d);
  opacity: 1 !important;
}

#c2 .pipe-flow {
  filter: var(--pipe-flow-ds-c2);
}

#c2.state--heating .pipe-flow.flow-dir--forward,
#c2.state--heating .pipe-flow.flow-dir--reverse,
#c2.state--running .pipe-flow.flow-dir--forward,
#c2.state--running .pipe-flow.flow-dir--reverse,
#c2 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c2 .pipe.flow-animated .pipe-flow.flow-dir--reverse,
#c1 #c2 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1 #c2 .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  stroke: var(--pipe-spec-c2, #ffd0ad);
  opacity: calc(0.48 + var(--flow-opacity, 0.78) * 0.48) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c2.state--heating .pipe-flow.flow-dir--forward,
#c2.state--running .pipe-flow.flow-dir--forward,
#c2 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1 #c2 .pipe.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
}

#c2.state--heating .pipe-flow.flow-dir--reverse,
#c2.state--running .pipe-flow.flow-dir--reverse,
#c2 .pipe.flow-animated .pipe-flow.flow-dir--reverse,
#c1 #c2 .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
}

#c2 .pipe.flow-animated .pipe-sheen,
#c2.state--running .pipe-sheen,
#c2.state--heating .pipe-sheen {
  opacity: 0.35 !important;
}

#c2.state--heating .flow-marker,
#c2.state--running .flow-marker,
#c2 .pipe.flow-animated .flow-marker,
#c1 #c2 .pipe.flow-animated .flow-marker {
  opacity: 0.72 !important;
}

/* Circuit 3 — coral boiler loop (matches CIRCUIT 3 zone title) */
#c3 .pipe-core {
  stroke: var(--pipe-neon-c3, #ff6b4a);
  stroke-width: var(--pipe-core-width-c3, 4);
  opacity: 0.9;
  filter: var(--pipe-ds-c3);
}

#c3 .pipe-bloom {
  stroke: var(--pipe-glow-c3, rgba(255, 107, 74, 0.58));
  stroke-width: var(--pipe-bloom-width-c3, 15);
  opacity: var(--pipe-bloom-opacity, 0.22);
}

#c3 .pipe-sheen {
  stroke: var(--pipe-spec-c3, #ffc4b5);
}

#c3 .pipe.flow-animated .pipe-bloom,
#c3.state--running .pipe-bloom,
#c3.state--heating .pipe-bloom {
  animation: scada-bloom-pulse 2.6s ease-in-out infinite;
}

#c3.state--off .pipe.flow-idle .pipe-flow,
#c3.state--idle .pipe.flow-idle .pipe-flow,
#c3.state--warning .pipe.flow-idle .pipe-flow,
#c3.state--error .pipe.flow-idle .pipe-flow {
  animation: none !important;
  opacity: 0 !important;
}

#c3.state--off .pipe-core,
#c3.state--idle .pipe-core {
  stroke: var(--pipe-neon-c3, #ff6b4a) !important;
  opacity: 0.7 !important;
}

#c3.state--off .pipe-bloom,
#c3.state--idle .pipe-bloom {
  opacity: calc(var(--pipe-bloom-opacity, 0.22) * 0.6) !important;
}

#c3.state--warning .pipe-bloom,
#c3.state--error .pipe-bloom {
  opacity: 0.18 !important;
}

#c3.state--off .pipe.flow-idle .flow-marker,
#c3.state--idle .pipe.flow-idle .flow-marker,
#c3.state--warning .pipe.flow-idle .flow-marker,
#c3.state--error .pipe.flow-idle .flow-marker {
  opacity: 0 !important;
}

#c3.state--warning .pipe-core {
  stroke: var(--c-warn, #ffb020) !important;
}

#c3.state--error .pipe-core {
  stroke: var(--c-error, #ff3d5a) !important;
}

#c3.state--heating .pipe-core,
#c3.state--running .pipe-core {
  stroke: var(--pipe-neon-c3, #ff6b4a) !important;
  opacity: 1 !important;
}

#c3 .pipe-flow {
  filter: var(--pipe-flow-ds-c3);
}

#c3.state--heating .pipe-flow.flow-dir--forward,
#c3.state--heating .pipe-flow.flow-dir--reverse,
#c3.state--running .pipe-flow.flow-dir--forward,
#c3.state--running .pipe-flow.flow-dir--reverse,
#c3 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c3 .pipe.flow-animated .pipe-flow.flow-dir--reverse,
#c1 #c3 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1 #c3 .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  stroke: var(--pipe-spec-c3, #ffc4b5) !important;
  opacity: var(--flow-opacity, 0.85) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c3.state--heating .pipe-flow.flow-dir--forward,
#c3.state--running .pipe-flow.flow-dir--forward,
#c3 .pipe.flow-animated .pipe-flow.flow-dir--forward,
#c1 #c3 .pipe.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
  will-change: stroke-dashoffset;
}

#c3.state--heating .pipe-flow.flow-dir--reverse,
#c3.state--running .pipe-flow.flow-dir--reverse,
#c3 .pipe.flow-animated .pipe-flow.flow-dir--reverse,
#c1 #c3 .pipe.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
  will-change: stroke-dashoffset;
}

#c3 .pipe.flow-animated .pipe-sheen,
#c3.state--running .pipe-sheen,
#c3.state--heating .pipe-sheen {
  opacity: 0.35 !important;
}

#c3.state--heating .flow-marker,
#c3.state--running .flow-marker,
#c3 .pipe.flow-animated .flow-marker,
#c1 #c3 .pipe.flow-animated .flow-marker {
  opacity: var(--flow-opacity, 0.85) !important;
}

/* Circuit 4 — peristaltic dosing on C1 return (open circuit, green flow) */
#c4 .pipe-track,
#c4 .pipe-shell,
#c4 .pipe-sheen {
  display: none;
}

#c4 .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a);
  stroke-width: var(--pipe-core-width-c4, 3);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.82 !important;
  filter: var(--pipe-ds-c4);
}

#c4 .pipe-flow {
  filter: var(--pipe-flow-ds-c4);
}

#c4.state--off .pipe--dosing .pipe-core,
#c4.state--idle .pipe--dosing .pipe-core,
#c4.state--warning .pipe--dosing .pipe-core,
#c4.state--error .pipe--dosing .pipe-core,
#c4 .pipe--dosing.flow-idle .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a) !important;
  opacity: 0.78 !important;
}

#c4.state--error .pipe--dosing .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a) !important;
}

/* Isolate C4 dosing colours from parent #c1 circuit state */
#c1 #c4 .pipe--dosing .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a) !important;
  opacity: 0.78 !important;
}

#c1 #c4 .pipe--dosing.flow-animated .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a) !important;
  opacity: 1 !important;
}

#c1 #c4 .pipe--dosing.flow-animated .pipe-flow {
  stroke: var(--pipe-spec-c4, #c4ffe0) !important;
  opacity: var(--flow-opacity, 0.9) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c1 #c4 .pipe--dosing.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
}

#c1 #c4 .pipe--dosing.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
}

#c1 #c4 .pipe--dosing.flow-animated .flow-marker {
  opacity: var(--flow-opacity, 0.9) !important;
}

#c4.state--off .pipe--dosing.flow-idle .pipe-flow,
#c4.state--idle .pipe--dosing.flow-idle .pipe-flow,
#c4.state--error .pipe--dosing.flow-idle .pipe-flow {
  opacity: 0 !important;
  animation: none !important;
  animation-play-state: paused !important;
}

#c4.state--off .pipe--dosing.flow-idle .flow-marker,
#c4.state--idle .pipe--dosing.flow-idle .flow-marker,
#c4.state--error .pipe--dosing.flow-idle .flow-marker {
  opacity: 0 !important;
}

.pipe--dosing.flow-animated .pipe-core {
  stroke: var(--pipe-neon-c4, #3ce58a) !important;
}

.pipe--dosing.flow-animated .pipe-flow {
  stroke: var(--pipe-spec-c4, #c4ffe0) !important;
  opacity: var(--flow-opacity, 0.85) !important;
  animation-play-state: var(--flow-play, running) !important;
  will-change: stroke-dashoffset;
}

#c4 .pipe--dosing.flow-animated .pipe-flow {
  opacity: var(--flow-opacity, 0.85) !important;
  animation-play-state: var(--flow-play, running) !important;
}

#c4 .pipe--dosing.flow-animated .flow-marker {
  opacity: var(--flow-opacity, 0.85) !important;
}

.pipe--dosing.flow-animated .pipe-flow.flow-dir--forward {
  animation: scada-flow-forward var(--flow-speed, 0.8s) linear infinite !important;
  opacity: var(--flow-opacity, 0.85) !important;
  animation-play-state: var(--flow-play, running) !important;
}

.pipe--dosing.flow-animated .pipe-flow.flow-dir--reverse {
  animation: scada-flow-reverse var(--flow-speed, 0.8s) linear infinite !important;
  opacity: var(--flow-opacity, 0.85) !important;
  animation-play-state: var(--flow-play, running) !important;
}

.pipe--dosing.flow-animated .flow-marker {
  opacity: var(--flow-opacity, 0.85) !important;
}

/* Shadow-DOM safe readout sizes — ha-floorplan @import of tokens often fails */
.label .label-title {
  font-size: 26px !important;
}

.label .label-data,
.label .label-badge {
  font-size: 24px !important;
}

/* Circuit 1 device titles — cyan (matches CIRCUIT 1 zone header) */
[id="c1.label.basin"] .label-title,
[id="c1.label.pump"] .label-title,
[id="c1.label.heatpump"] .label-title,
[id="c1.label.hx1"] .label-title,
[id="c1.label.hx2"] .label-title {
  fill: rgba(0, 229, 255, 0.9) !important;
}

/* pH / ORP return sensors — green titles, white data */
[id="c1.label.return.ph"] .label-title,
[id="c1.label.return.orp"] .label-title {
  fill: #4ade80 !important;
}

.label .label-data,
[id="c1.label.return.ph"] .label-data,
[id="c1.label.return.orp"] .label-data,
[id^="c2.label.hp"] .label-data {
  fill: #ffffff !important;
}

[id^="c2.label.hp"] .label-title {
  font-size: var(--type-hp-title, 20px) !important;
  fill: #ffffff !important;
}

[id^="c2.label.hp"] .label-title,
[id^="c2.label.hp"] .label-data {
  paint-order: stroke fill;
  stroke: rgba(8, 12, 18, 0.82);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* Circuit 2/3 device titles — match neon pipe colours */
[id="c2.label.solar-pump"] .label-title {
  fill: #ff7a3d !important;
}

[id="c3.label.boiler"] .label-title {
  fill: var(--pipe-neon-c3, #ff6b4a) !important;
}

.c3-pump-side-label {
  fill: var(--pipe-neon-c3, #ff6b4a) !important;
  font-family: var(--font-display);
  font-size: 26px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

/* Circuit 4 pump labels — beside vertical dosing pipe */
.c4-pump-side-label {
  fill: #4ade80 !important;
  font-family: var(--font-display);
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: 0.12em;
  dominant-baseline: middle;
}

.c4-pump-side-label--left {
  text-anchor: end;
}

.c4-pump-side-label--right {
  text-anchor: start;
}