/* ----------------- energy flow diagram ------------------ */
.flow-wrap {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; margin-bottom: 18px;
}
.flow {
  display: grid;
  grid-template-columns: 1fr 46px minmax(150px, 1.5fr) 46px 1fr;
  grid-template-rows: auto 40px auto 40px auto;
  align-items: center; justify-items: center; gap: 4px;
}
.node {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; width: 100%;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  transition: border-color 0.4s, box-shadow 0.4s;
}
/* `display: flex/grid` on .node/.pipe outranks the UA's [hidden] rule, so an
   optional node (the charger) would still paint an empty box. Restore it. */
.node[hidden], .pipe[hidden] { display: none; }
.node .n-head { display: flex; align-items: center; gap: 7px; }
.node .n-ico { font-size: 18px; line-height: 1; }
.node .n-name { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.node .n-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.node .n-val .u { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.node .n-sub { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.node .n-sub .feed { display: flex; justify-content: space-between; gap: 8px; line-height: 1.5; }
.node .n-sub .feed-n { font-weight: 700; color: var(--fg); }
.node .n-sub .feed-v { white-space: nowrap; }
.node .n-sub .feed-v.over { color: var(--err); font-weight: 700; }
.node .n-sub .feed-v .u { font-size: 10px; color: var(--muted); }
.node.solar  { grid-area: 1 / 3; border-color: color-mix(in srgb, var(--solar) 40%, var(--border)); }
.node.grid   { grid-area: 3 / 1; }
.node.inv    { grid-area: 3 / 3; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.node.loads  { grid-area: 3 / 5; }
.node.battery{ grid-area: 5 / 3; }
/* Charger sits on the battery row, feeding the pack from the right. */
.node.charger{ grid-area: 5 / 5; }
.node.charger.on { border-color: color-mix(in srgb, var(--battery) 50%, var(--border)); }
.node.solar.on  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--solar) 50%, transparent); }
.node.grid.on   { border-color: color-mix(in srgb, var(--grid) 50%, var(--border)); }
.node.battery.charging   { border-color: color-mix(in srgb, var(--battery) 50%, var(--border)); }
.node.battery.discharging{ border-color: color-mix(in srgb, var(--discharge) 50%, var(--border)); }

/* Overload: an inverter is above its configured threshold → red pulsing node. */
.node.overload { border-color: var(--err); animation: overload-pulse 1.2s ease-in-out infinite; }
@keyframes overload-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--err) 50%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--err) 0%, transparent); }
}

/* pipes — a track with a flowing dash when power moves through it */
.pipe { position: relative; overflow: hidden; --c: var(--idle); --dur: 2.5s; }
.pipe.v { grid-column: 3; width: 6px; height: 100%; }
.pipe.v.top { grid-row: 2; }
.pipe.v.bot { grid-row: 4; }
.pipe.h { grid-row: 3; height: 6px; width: 100%; }
.pipe.h.left  { grid-column: 2; }
.pipe.h.right { grid-column: 4; }
/* Charger → battery pack, on the bottom row. */
.pipe.h.batt-right { grid-row: 5; grid-column: 4; }
.pipe::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: var(--idle); opacity: 0.25;
}
.pipe.flow-on::before { opacity: 0.18; }
.pipe .stream { position: absolute; inset: 0; border-radius: 4px; opacity: 0; }
.pipe.flow-on .stream { opacity: 1; }
.pipe.v .stream {
  background: repeating-linear-gradient(180deg,
    transparent 0, transparent 6px,
    var(--c) 6px, var(--c) 16px);
  background-size: 100% 22px;
  animation: flow-down var(--dur) linear infinite;
  box-shadow: 0 0 8px var(--c);
}
.pipe.v.rev .stream { animation-name: flow-up; }
.pipe.h .stream {
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent 6px,
    var(--c) 6px, var(--c) 16px);
  background-size: 22px 100%;
  animation: flow-right var(--dur) linear infinite;
  box-shadow: 0 0 8px var(--c);
}
.pipe.h.rev .stream { animation-name: flow-left; }
@keyframes flow-down  { to { background-position: 0 22px; } }
@keyframes flow-up    { to { background-position: 0 -22px; } }
@keyframes flow-right { to { background-position: 22px 0; } }
@keyframes flow-left  { to { background-position: -22px 0; } }

@media (max-width: 720px) {
  .flow {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, auto);
    gap: 0;
  }
  .node, .pipe { grid-area: auto !important; }
  .node { margin: 0; }
  .pipe.v, .pipe.h { width: 6px; height: 26px; margin: 4px 0; align-self: center; }
  .pipe.h { width: 6px; height: 26px; }
  .pipe.h .stream {
    background: repeating-linear-gradient(180deg, transparent 0, transparent 6px, var(--c) 6px, var(--c) 16px);
    background-size: 100% 22px; animation-name: flow-down;
  }
  .pipe.h.rev .stream { animation-name: flow-up; }
  /* visual order on mobile: solar → inv → loads → battery → charger → grid */
  .node.solar  { order: 1; } .flow .pipe.v.top { order: 2; }
  .node.inv    { order: 3; } .flow .pipe.h.right { order: 4; }
  .node.loads  { order: 5; } .flow .pipe.v.bot  { order: 6; }
  .node.battery{ order: 7; } .flow .pipe.h.batt-right { order: 8; }
  .node.charger{ order: 9; } .flow .pipe.h.left { order: 10; }
  .node.grid   { order: 11; }
  .flow { display: flex; flex-direction: column; align-items: stretch; }
}