/* water.css — Water distribution network studio (v44). Builds on atelier.css (cp-*), jetty.css (jt-*), road.css (rd-*) and minimal.css. */
.wn-app #wn-plan svg { width: 100%; height: auto; display: block; touch-action: none; }
.wn-app #wn-plan svg text { pointer-events: none; }
.wn-app [data-h] { cursor: move; }
.wn-app [data-sel] { cursor: pointer; }
.wn-app .wn-sl { min-width: 220px; flex: 1; }
.wn-app .wn-sl input[type=range] { width: 100%; }
.wn-app .wn-bar { gap: 8px; flex-wrap: wrap; align-items: center; }
.wn-app .wn-bar select { max-width: 240px; }
.wn-app .cp-grid2.wn-live { grid-template-columns: minmax(0, 2.4fr) minmax(260px, 1fr); }
@media (max-width: 980px) { .wn-app .cp-grid2.wn-live { grid-template-columns: minmax(0, 1fr); } }
.wn-app tr.wn-sel td { background: color-mix(in srgb, #2563eb 9%, transparent); }
.wn-app tr.wn-bad td { background: color-mix(in srgb, #b42318 8%, transparent); }
.wn-app .wn-step { border-left: 3px solid var(--purple, #2563eb); padding: 6px 14px; margin: 0 0 10px; }
.wn-app .wn-step p { margin: 4px 0; font-size: .92rem; }
.wn-app .rd-wide .jt-fig svg { width: 100%; height: auto; display: block; }
.wn-app .cp-edit select { max-width: 110px; }