From 62bc73f2f98a054ab7711810ee3ceaf0202b968d Mon Sep 17 00:00:00 2001
From: Rene De Ren <zn375ix3@gmail.com>
Date: Wed, 6 May 2026 14:10:22 +0200
Subject: [PATCH] Editor: dynamic input bounds + full hierarchy validation,
 layout polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bounds (new src/editor/bounds.js):
- Sets HTML5 min/max on every level + percent input each redraw,
  derived from the current values of related inputs so the spinner
  stops at the basin hierarchy:
  0 < outflowLevel < dryRunLevel < startLevel ≤ inflowLevel
      ≤ shiftLevel ≤ maxLevel ≤ overflowLevel ≤ basinHeight
- dryRunPercent capped so dryRunLevel ≤ startLevel given current outflow.
- shiftArmPercent ∈ [1, 100]; highVolumeSafety% ∈ [1, 100].

Validation:
- New visible ribbon above the basin diagram (#ps-basin-validation)
  listing every hierarchy violation. The in-SVG warning text is now a
  small reminder ("⚠ N ordering issues").
- basin-diagram.js owns hierarchy issues; mode-preview.js trimmed to
  only own shift-specific issues (shift > start, shift ≤ max,
  shiftArmPercent range, shiftLevel required-when-enabled).
- oneditsave blocks Deploy on the union of _psBasinValidationIssues
  and _psModeValidationIssues with a RED.notify listing all problems.

Layout polish:
- Side panel widened to 220 px with minmax(0, 1fr) first column so long
  labels can no longer push the rows past the panel edge.
- Basin SVG max-width 380 → 360, gap between side panel and SVG bumped
  14 → 28 px. Tank shifted right (x=145 width=110) so the inlet
  "bottom of pipe" sub-label is no longer clipped on the left edge.
- "0 m (datum)" moved below the tank (y=395, centred) so it can't
  collide with "Outlet / top of pipe" when outflowLevel is near floor.
- Zone labels shortened (Spare / Sewage + buffer / Buffer / Dead vol)
  and only show when the bracketing thresholds are ≥ 28 px apart, so
  they never sit on a threshold label.
- Mode preview axis labels under the chart removed — line colour +
  side-panel labels + hover-couple already identify each line. Stub
  <text> elements left hidden to keep the redraw loop simple. Arm-%
  line + label trimmed in 10 px on the right so they're not clipped.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 pumpingStation.html         | 96 ++++++++++++++++++++-----------------
 src/editor/basin-diagram.js | 68 +++++++++++++++++++++-----
 src/editor/bounds.js        | 89 ++++++++++++++++++++++++++++++++++
 src/editor/mode-preview.js  | 31 ++++--------
 src/editor/oneditprepare.js | 11 +++++
 src/editor/oneditsave.js    |  8 +++-
 6 files changed, 225 insertions(+), 78 deletions(-)
 create mode 100644 src/editor/bounds.js

diff --git a/pumpingStation.html b/pumpingStation.html
index 35dbcda..3ca10db 100644
--- a/pumpingStation.html
+++ b/pumpingStation.html
@@ -14,6 +14,7 @@
 <!-- Editor JS modules — see nodes/pumpingStation/src/editor/. Loaded in
      dependency order: index.js (namespace + helpers) → diagrams → handlers. -->
 <script src="/pumpingStation/editor/index.js"></script>
+<script src="/pumpingStation/editor/bounds.js"></script>
 <script src="/pumpingStation/editor/basin-diagram.js"></script>
 <script src="/pumpingStation/editor/mode-preview.js"></script>
 <script src="/pumpingStation/editor/hover-couple.js"></script>
@@ -127,17 +128,19 @@
   
   <h4>Basin parameters</h4>
   <p style="font-size:12px;color:#777;margin:0 0 8px 0;">Heights are measured from the basin floor (0 m). Each input on the left controls a line in the diagram on the right — hover an input to highlight its line.</p>
+  <div id="ps-basin-validation" style="display:none;color:#C0392B;font-size:11px;margin:0 0 8px 0;border:1px solid #C0392B;border-radius:3px;padding:6px 8px;background:#FDECEA;"></div>
 
   <style>
     /* Two-column layout: stacked colour-coded inputs on the left,
        SVG on the right. Hover an input row → its paired SVG line
        (referenced by data-couples-line) gets a thicker stroke. */
-    .ps-diag { display:flex; gap:14px; align-items:flex-start; margin:0 0 14px 0; }
-    .ps-diag-side { width: 200px; flex: 0 0 200px; display:flex; flex-direction:column; gap:6px; }
+    .ps-diag { display:flex; gap:28px; align-items:flex-start; margin:0 0 14px 0; }
+    .ps-diag-side { width: 220px; flex: 0 0 220px; display:flex; flex-direction:column; gap:6px; }
     .ps-diag-side .ps-row {
-      display:grid; grid-template-columns: 1fr 78px 18px; align-items:center;
+      display:grid; grid-template-columns: minmax(0,1fr) 70px 16px; align-items:center;
       gap:6px; padding:4px 6px 4px 10px; border-left:4px solid #ccc;
       background:#fafafa; border-radius:3px; font-size:11px; cursor:pointer;
+      min-width:0;
     }
     .ps-diag-side .ps-row:hover { background:#f0f0f0; }
     .ps-diag-side .ps-row.ps-readonly { background:#fff; cursor:default; opacity:0.85; }
@@ -267,55 +270,58 @@
     <!-- RIGHT: SVG. The viewBox is now narrower (320 wide) since the right
          input column is gone — labels render inside the tank's right margin. -->
     <svg id="ps-basin-diagram" class="ps-diag-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 430"
-         style="display:block;width:100%;max-width:380px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
+         style="display:block;width:100%;max-width:360px;background:#fff;border:1px solid #e5e5e5;border-radius:4px;"
          font-family="Arial,sans-serif" font-size="11">
       <defs>
         <marker id="ps-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
           <path d="M 0 0 L 10 5 L 0 10 z" fill="#1F4E79" />
         </marker>
       </defs>
-      <!-- Tank body — x=120,width=120 (was 200,120 in the old wider viewBox).
-           Threshold tick lines extend a few px outside the tank walls. -->
-      <rect x="120" y="40" width="120" height="340" fill="#F0F8FF" stroke="#333" stroke-width="1.5" />
-      <rect id="ps-deadvol" x="121" width="118" fill="#AACCE0" />
+      <!-- Tank body — shifted right (x=145, width=110) to give the inlet
+           sub-label "bottom of pipe" room on the left without clipping.
+           Threshold tick lines extend 5 px outside the tank walls. -->
+      <rect x="145" y="40" width="110" height="340" fill="#F0F8FF" stroke="#333" stroke-width="1.5" />
+      <rect id="ps-deadvol" x="146" width="108" fill="#AACCE0" />
 
-      <!-- Mid-tank zone labels — centred at x=180. -->
-      <text id="ps-zone-spare"   x="180" text-anchor="middle" fill="#B78200" font-size="10" font-style="italic" visibility="hidden">Spare volume before spilling</text>
-      <text id="ps-zone-sewage"  x="180" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Sewage + tank buffer</text>
-      <text id="ps-zone-buffer1" x="180" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Tank buffer</text>
-      <text id="ps-zone-buffer2" x="180" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Tank buffer</text>
-      <text id="ps-zone-dead"    x="180" text-anchor="middle" fill="#444" font-size="10" font-style="italic" visibility="hidden">Dead volume</text>
+      <!-- Mid-tank zone labels — centred at x=200 (tank centre). -->
+      <text id="ps-zone-spare"   x="200" text-anchor="middle" fill="#B78200" font-size="10" font-style="italic" visibility="hidden">Spare</text>
+      <text id="ps-zone-sewage"  x="200" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Sewage + buffer</text>
+      <text id="ps-zone-buffer1" x="200" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Buffer</text>
+      <text id="ps-zone-buffer2" x="200" text-anchor="middle" fill="#1F4E79" font-size="10" font-style="italic" visibility="hidden">Buffer</text>
+      <text id="ps-zone-dead"    x="200" text-anchor="middle" fill="#444" font-size="10" font-style="italic" visibility="hidden">Dead vol</text>
 
       <!-- basinHeight tick at tank rim (y=40, static). -->
-      <line id="ps-line-basinHeight" x1="115" y1="40" x2="245" y2="40" stroke="#333" stroke-width="1.5" />
-      <text id="ps-label-basinHeight" x="250" y="44" fill="#333">basinHeight</text>
+      <line id="ps-line-basinHeight" x1="140" y1="40" x2="260" y2="40" stroke="#333" stroke-width="1.5" />
+      <text id="ps-label-basinHeight" x="265" y="44" fill="#333">basinHeight</text>
 
-      <line id="ps-line-overflowLevel" x1="115" x2="245" stroke="#C0392B" stroke-dasharray="4 2" stroke-width="1.5" />
-      <text id="ps-label-overflowLevel" x="250" fill="#C0392B">overflowLevel</text>
+      <line id="ps-line-overflowLevel" x1="140" x2="260" stroke="#C0392B" stroke-dasharray="4 2" stroke-width="1.5" />
+      <text id="ps-label-overflowLevel" x="265" fill="#C0392B">overflowLevel</text>
 
-      <line id="ps-line-highVolumeSafetyLevel" x1="115" x2="245" stroke="#D68910" stroke-dasharray="1 2" stroke-width="1" opacity="0.7" />
-      <text id="ps-label-highVolumeSafetyLevel" x="250" fill="#D68910" font-size="10" font-style="italic">highVolumeSafety</text>
+      <line id="ps-line-highVolumeSafetyLevel" x1="140" x2="260" stroke="#D68910" stroke-dasharray="1 2" stroke-width="1" opacity="0.7" />
+      <text id="ps-label-highVolumeSafetyLevel" x="265" fill="#D68910" font-size="10" font-style="italic">highVolSafety</text>
 
-      <line id="ps-line-inflowLevelGuide" x1="120" x2="240" stroke="#1F4E79" stroke-dasharray="2 3" stroke-width="1" opacity="0.55" />
-      <text id="ps-label-inflowLevelGuide" x="250" fill="#1F4E79" font-size="10" font-style="italic">inlet invert</text>
+      <line id="ps-line-inflowLevelGuide" x1="145" x2="255" stroke="#1F4E79" stroke-dasharray="2 3" stroke-width="1" opacity="0.55" />
+      <text id="ps-label-inflowLevelGuide" x="265" fill="#1F4E79" font-size="10" font-style="italic">inlet invert</text>
 
-      <line id="ps-line-inflowLevel" x1="60" x2="120" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
-      <text id="ps-label-inflowLevel" x="55" text-anchor="end" fill="#1F4E79" font-weight="bold">Inlet</text>
-      <text id="ps-sub-inflowLevel" x="55" text-anchor="end" fill="#777" font-size="9">bottom of pipe</text>
+      <line id="ps-line-inflowLevel" x1="85" x2="145" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
+      <text id="ps-label-inflowLevel" x="80" text-anchor="end" fill="#1F4E79" font-weight="bold">Inlet</text>
+      <text id="ps-sub-inflowLevel" x="80" text-anchor="end" fill="#777" font-size="9">bottom of pipe</text>
 
-      <line id="ps-line-dryRunLevel" x1="115" x2="245" stroke="#C0392B" stroke-dasharray="1 2" stroke-width="1" opacity="0.6" />
-      <text id="ps-label-dryRunLevel" x="250" fill="#C0392B" font-size="10" font-style="italic">dryRunLevel</text>
+      <line id="ps-line-dryRunLevel" x1="140" x2="260" stroke="#C0392B" stroke-dasharray="1 2" stroke-width="1" opacity="0.6" />
+      <text id="ps-label-dryRunLevel" x="265" fill="#C0392B" font-size="10" font-style="italic">dryRunLevel</text>
 
-      <line id="ps-line-outflowLevel" x1="240" x2="280" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
-      <text id="ps-label-outflowLevel" x="285" fill="#1F4E79" font-weight="bold">Outlet</text>
-      <text id="ps-sub-outflowLevel" x="285" fill="#777" font-size="9">top of pipe</text>
+      <line id="ps-line-outflowLevel" x1="255" x2="295" stroke="#1F4E79" stroke-width="2" marker-end="url(#ps-arrow)" />
+      <text id="ps-label-outflowLevel" x="300" fill="#1F4E79" font-weight="bold">Outlet</text>
+      <text id="ps-sub-outflowLevel" x="300" fill="#777" font-size="9">top of pipe</text>
 
-      <!-- Floor / datum -->
-      <line x1="115" y1="380" x2="245" y2="380" stroke="#000" stroke-width="2" />
-      <text x="250" y="384" fill="#000">0 m (datum)</text>
+      <!-- Floor / datum — datum label sits BELOW the tank (y=395) so it
+           never collides with the Outlet / top-of-pipe sub-label when
+           outflowLevel is near the floor. -->
+      <line x1="140" y1="380" x2="260" y2="380" stroke="#000" stroke-width="2" />
+      <text x="200" y="395" text-anchor="middle" fill="#000" font-size="10">0 m (datum)</text>
 
       <!-- Ordering-warning ribbon -->
-      <text id="ps-warning" x="180" y="410" text-anchor="middle" fill="#C0392B" font-size="10" font-style="italic" visibility="hidden"></text>
+      <text id="ps-warning" x="200" y="410" text-anchor="middle" fill="#C0392B" font-size="10" font-style="italic" visibility="hidden"></text>
     </svg>
   </div>
 
@@ -469,15 +475,19 @@
       <line id="ps-mode-line-shiftLevel" y1="24" y2="140" stroke="#D68910" stroke-dasharray="2 2" style="display:none;" />
       <!-- Horizontal arming-% line — y is set DYNAMICALLY by the JS to the
            shiftArmPercent value (in plot-y space). Spans full plot width. -->
-      <line id="ps-mode-line-armPercent" x1="52" x2="402" stroke="#D68910" stroke-dasharray="4 3" stroke-width="1" opacity="0.7" style="display:none;" />
-      <text id="ps-mode-label-armPercent" x="404" text-anchor="start" fill="#D68910" font-size="9" style="display:none;">arm%</text>
-      <!-- Axis labels — y=180 row sits below the OFF baseline (y=160). x set dynamically. -->
-      <text id="ps-mode-label-dryRunLevel"  y="180" text-anchor="middle" fill="#C0392B">dry run</text>
-      <text id="ps-mode-label-startLevel" y="180" text-anchor="middle" fill="#1E8449">start</text>
-      <text id="ps-mode-label-inflowLevel" y="180" text-anchor="middle" fill="#1F4E79">inlet</text>
-      <text id="ps-mode-label-maxLevel" y="180" text-anchor="middle" fill="#D68910">max</text>
-      <text id="ps-mode-label-overflowLevel" y="180" text-anchor="middle" fill="#C0392B">overflow</text>
-      <text id="ps-mode-label-shiftLevel" y="180" text-anchor="middle" fill="#D68910" style="display:none;">shift</text>
+      <line id="ps-mode-line-armPercent" x1="52" x2="392" stroke="#D68910" stroke-dasharray="4 3" stroke-width="1" opacity="0.7" style="display:none;" />
+      <text id="ps-mode-label-armPercent" x="394" text-anchor="start" fill="#D68910" font-size="9" style="display:none;">arm%</text>
+      <!-- Axis labels under the plot were removed — they crowded each other
+           when levels were close. Identification comes from the line colour
+           (matched to the side-panel input row) and hover-coupling. -->
+      <!-- Empty <text> stubs kept for the redraw loop's getElementById calls
+           (cheaper than guarding each one). They're hidden via display:none. -->
+      <text id="ps-mode-label-dryRunLevel"   style="display:none;"></text>
+      <text id="ps-mode-label-startLevel"    style="display:none;"></text>
+      <text id="ps-mode-label-inflowLevel"   style="display:none;"></text>
+      <text id="ps-mode-label-maxLevel"      style="display:none;"></text>
+      <text id="ps-mode-label-overflowLevel" style="display:none;"></text>
+      <text id="ps-mode-label-shiftLevel"    style="display:none;"></text>
       <!-- Legend captions — placed BELOW the axis labels (y=200) on their own row,
            so they never collide with the title (y=14). Up-caption left-aligned at
            x=60; down-caption to its right at x=210. Both font-size 10. -->
diff --git a/src/editor/basin-diagram.js b/src/editor/basin-diagram.js
index df66b26..f2a1ffb 100644
--- a/src/editor/basin-diagram.js
+++ b/src/editor/basin-diagram.js
@@ -69,12 +69,18 @@
       }
       for (const it of items) placeItem(it.id, it.y);
 
+      // Zone labels show only when the gap between the bracketing
+      // thresholds is at least MIN_ZONE_GAP px high — otherwise the label
+      // collides with one of the threshold labels (which sit at threshold
+      // y ±6 px text-height). 28 px keeps a 6 px clear gap above and
+      // below the zone label.
+      const MIN_ZONE_GAP = 28;
       const placeZone = (zoneId, topId, botId) => {
         const el = document.getElementById(`ps-zone-${zoneId}`);
         if (!el) return;
         const top = items.find(it => it.id === topId);
         const bot = items.find(it => it.id === botId);
-        if (!top || !bot || (bot.y - top.y) < 14) {
+        if (!top || !bot || (bot.y - top.y) < MIN_ZONE_GAP) {
           el.setAttribute('visibility', 'hidden'); return;
         }
         el.setAttribute('y', (top.y + bot.y) / 2 + 3);
@@ -127,21 +133,59 @@
       const d2 = document.getElementById('derived-highVolumeSafetyLevel');
       if (d2) d2.textContent = fmt(highLvl);
 
-      const warn = document.getElementById('ps-warning');
+      // Hierarchy validation. Soft '≤' relations follow the user's choice:
+      // start ≤ inflow, max ≤ overflow, overflow ≤ basinHeight (equality OK).
+      // dryRunLevel must be < startLevel strictly (otherwise the runtime
+      // would trip dry-run before it could ramp).
+      // Re-read the raw value (basinH falls back to 5 for diagram scaling;
+      // here we want null when the user hasn't entered anything so the
+      // ≤-checks below are skipped rather than false-flagged).
+      const basinHraw = fNum('basinHeight');
+      const start = fNum('startLevel');
+      const inlet = fNum('inflowLevel');
+      const max   = fNum('maxLevel');
+      const ovfl  = fNum('overflowLevel');
       const issues = [];
-      const pairs = [
-        ['outflowLevel', 'inflowLevel',   '<'],
-        ['inflowLevel',  'overflowLevel', '<'],
-      ];
-      for (const [a, b, op] of pairs) {
-        const av = fNum(a), bv = fNum(b);
-        if (av == null || bv == null) continue;
-        if (op === '<' ? !(av < bv) : !(av <= bv)) issues.push(`${a} ${op} ${b}`);
+      const ok = (a, b, op) => {
+        if (!Number.isFinite(a) || !Number.isFinite(b)) return true;
+        return op === '<' ? a < b : a <= b;
+      };
+      if (Number.isFinite(refLow) && refLow <= 0)
+        issues.push('outflowLevel must be > 0');
+      if (!ok(dryLvl, start, '<'))
+        issues.push(`dryRunLevel (${(dryLvl ?? NaN).toFixed(2)} m, derived) must be < startLevel — lower dryRun% or raise startLevel`);
+      if (!ok(start, inlet, '<='))
+        issues.push('startLevel must be ≤ inflowLevel');
+      if (!ok(inlet, max, '<='))
+        issues.push('inflowLevel must be ≤ maxLevel');
+      if (!ok(max, ovfl, '<='))
+        issues.push('maxLevel must be ≤ overflowLevel');
+      if (!ok(ovfl, basinHraw, '<='))
+        issues.push('overflowLevel must be ≤ basinHeight');
+
+      // Visible ribbon above the basin diagram.
+      const warnDiv = document.getElementById('ps-basin-validation');
+      if (warnDiv) {
+        if (issues.length) {
+          warnDiv.innerHTML = '⚠ Fix before deploy:<ul style="margin:4px 0 0 18px;padding:0;">'
+            + issues.map((i) => `<li>${i}</li>`).join('') + '</ul>';
+          warnDiv.style.display = '';
+        } else {
+          warnDiv.style.display = 'none';
+        }
       }
+      // Legacy in-SVG warning text — kept for the small reminder inside
+      // the diagram. Only shows the count.
+      const warn = document.getElementById('ps-warning');
       if (warn) {
-        if (issues.length) { warn.setAttribute('visibility', 'visible'); warn.textContent = `⚠ Check ordering: ${issues.join(', ')}`; }
-        else { warn.setAttribute('visibility', 'hidden'); }
+        if (issues.length) {
+          warn.setAttribute('visibility', 'visible');
+          warn.textContent = `⚠ ${issues.length} ordering issue${issues.length > 1 ? 's' : ''}`;
+        } else {
+          warn.setAttribute('visibility', 'hidden');
+        }
       }
+      window._psBasinValidationIssues = issues;
     },
   };
 })();
diff --git a/src/editor/bounds.js b/src/editor/bounds.js
new file mode 100644
index 0000000..9388765
--- /dev/null
+++ b/src/editor/bounds.js
@@ -0,0 +1,89 @@
+// PumpingStation editor — dynamic input bounds.
+// Sets HTML5 min/max attributes on every level and percent input based on
+// the current values of related inputs, so the up/down arrows stop at
+// values that respect the basin hierarchy:
+//
+//   0 < outflowLevel < dryRunLevel < startLevel ≤ inflowLevel
+//       ≤ shiftLevel ≤ maxLevel ≤ overflowLevel ≤ basinHeight
+//
+// The user can still type out-of-range values via the keyboard (HTML5
+// min/max only constrain the spinner). The validation ribbons in
+// basin-diagram.js and mode-preview.js catch typed violations and the
+// oneditsave handler blocks Deploy until they're resolved.
+
+(function () {
+  const ns = window.PSEditor = window.PSEditor || {};
+  const fNum = (id) => ns.fNum(id);
+  const EPS = 0.001; // smallest meaningful step (mm-precision)
+
+  const setBounds = (id, min, max) => {
+    const el = document.getElementById(`node-input-${id}`);
+    if (!el) return;
+    if (Number.isFinite(min)) el.setAttribute('min', String(min));
+    else el.removeAttribute('min');
+    if (Number.isFinite(max)) el.setAttribute('max', String(max));
+    else el.removeAttribute('max');
+  };
+
+  ns.bounds = {
+    apply() {
+      const basinHeight = fNum('basinHeight');
+      const outflow     = fNum('outflowLevel');
+      const dryPct      = fNum('dryRunThresholdPercent');
+      const start       = fNum('startLevel');
+      const inlet       = fNum('inflowLevel');
+      const max         = fNum('maxLevel');
+      const overflow    = fNum('overflowLevel');
+      const shiftEnabled = !!document.getElementById('node-input-enableShiftedRamp')?.checked;
+
+      // Derived dryRunLevel (lower bound for startLevel).
+      const dryRun = (Number.isFinite(outflow) && Number.isFinite(dryPct))
+        ? outflow * (1 + dryPct / 100) : null;
+
+      // Geometry — basin envelope.
+      setBounds('basinHeight',   EPS, undefined);
+      setBounds('basinVolume',   EPS, undefined);
+
+      // Levels (each capped by the next-higher level if defined).
+      setBounds('outflowLevel',  EPS,
+        Number.isFinite(start) && Number.isFinite(dryPct)
+          ? start / (1 + dryPct / 100) - EPS  // keep dryRun < start
+          : (start ?? inlet ?? max ?? overflow ?? basinHeight));
+
+      setBounds('startLevel',
+        Number.isFinite(dryRun) ? dryRun + EPS : EPS,
+        inlet ?? max ?? overflow ?? basinHeight);
+
+      setBounds('inflowLevel',
+        start ?? EPS,
+        max ?? overflow ?? basinHeight);
+
+      setBounds('maxLevel',
+        inlet ?? start ?? EPS,
+        overflow ?? basinHeight);
+
+      setBounds('overflowLevel',
+        max ?? inlet ?? start ?? EPS,
+        basinHeight);
+
+      // Shift inputs (only relevant when shifted ramp enabled).
+      if (shiftEnabled) {
+        setBounds('shiftLevel',
+          Number.isFinite(start) ? start : EPS,
+          max ?? overflow ?? basinHeight);
+        setBounds('shiftArmPercent', 1, 100);
+      }
+
+      // Percentages.
+      // dryRun% capped so dryRunLevel ≤ startLevel.
+      let dryMax = 99;
+      if (Number.isFinite(start) && Number.isFinite(outflow) && outflow > 0) {
+        dryMax = Math.max(0, Math.min(99, ((start / outflow) - 1) * 100));
+      }
+      setBounds('dryRunThresholdPercent', 0, dryMax);
+
+      // highVol% bounded (1, 100). Equal to 100 means no margin to overflow.
+      setBounds('highVolumeSafetyThresholdPercent', 1, 100);
+    },
+  };
+})();
diff --git a/src/editor/mode-preview.js b/src/editor/mode-preview.js
index bb1f1f4..691a2aa 100644
--- a/src/editor/mode-preview.js
+++ b/src/editor/mode-preview.js
@@ -146,7 +146,9 @@
         }
       }
 
-      // Vertical level markers + axis labels.
+      // Vertical level markers — line only. Axis labels were removed;
+      // identification comes from line colour + side-panel labels +
+      // hover coupling.
       [
         ['dryRunLevel', dryRun],
         ['startLevel', start],
@@ -155,18 +157,14 @@
         ['overflowLevel', overflow],
       ].forEach(([id, level]) => {
         const line = document.getElementById(`ps-mode-line-${id}`);
-        const label = document.getElementById(`ps-mode-label-${id}`);
-        if (!line || !label) return;
+        if (!line) return;
         if (!Number.isFinite(level)) {
           line.style.display = 'none';
-          label.style.display = 'none';
           return;
         }
         const x = xFor(level);
         line.style.display = '';
-        label.style.display = '';
         line.setAttribute('x1', x); line.setAttribute('x2', x);
-        label.setAttribute('x', x);
       });
 
       // Background zone bands.
@@ -192,19 +190,15 @@
       setBand('ps-zone-safetyHigh', xMax,  xOvf);
       setBand('ps-zone-overflow',   xOvf,  plotR);
 
-      // Shift level marker.
+      // Shift level marker (line only).
       const shiftLine = document.getElementById('ps-mode-line-shiftLevel');
-      const shiftLabel = document.getElementById('ps-mode-label-shiftLevel');
-      if (shiftLine && shiftLabel) {
+      if (shiftLine) {
         if (shiftEnabled && Number.isFinite(shift)) {
           const x = xFor(shift);
           shiftLine.setAttribute('x1', x); shiftLine.setAttribute('x2', x);
-          shiftLabel.setAttribute('x', x);
           shiftLine.style.display = '';
-          shiftLabel.style.display = '';
         } else {
           shiftLine.style.display = 'none';
-          shiftLabel.style.display = 'none';
         }
       }
 
@@ -237,16 +231,11 @@
         }
       }
 
-      // Validation: ordering constraints.
+      // Validation: only mode-specific (shift) ordering. Basin-level
+      // hierarchy (start ≤ inlet ≤ max ≤ overflow ≤ basinHeight,
+      // dryRun < start) is owned by basin-diagram.js so it shows in the
+      // basin section near the offending inputs.
       const issues = [];
-      if (Number.isFinite(dryRun) && Number.isFinite(start) && dryRun >= start)
-        issues.push('dryRunLevel (derived) must be < startLevel — increase startLevel or lower dryRun%');
-      if (Number.isFinite(start) && Number.isFinite(inlet) && start >= inlet)
-        issues.push('startLevel must be < inflowLevel (set in basin above)');
-      if (Number.isFinite(inlet) && Number.isFinite(max) && inlet >= max)
-        issues.push('inflowLevel must be < maxLevel');
-      if (Number.isFinite(max) && Number.isFinite(overflow) && max > overflow)
-        issues.push('maxLevel must be ≤ overflowLevel');
       if (shiftEnabled) {
         const shiftVal = Number(shiftInput?.value);
         if (Number.isFinite(shiftVal)) {
diff --git a/src/editor/oneditprepare.js b/src/editor/oneditprepare.js
index a187352..cf43a20 100644
--- a/src/editor/oneditprepare.js
+++ b/src/editor/oneditprepare.js
@@ -93,8 +93,19 @@
       ns.modePreview.redraw
     );
 
+    // Whenever any level/percent input changes, refresh the bounds first
+    // so the next redraw + validation sees the correct min/max attrs.
+    ns.bindRedraw(
+      ['basinHeight', 'basinVolume', 'overflowLevel', 'maxLevel',
+       'inflowLevel', 'startLevel', 'outflowLevel',
+       'dryRunThresholdPercent', 'highVolumeSafetyThresholdPercent',
+       'enableShiftedRamp', 'shiftLevel', 'shiftArmPercent'],
+      () => ns.bounds?.apply()
+    );
+
     // Initial render + hover-couple wiring once the DOM is settled.
     setTimeout(() => {
+      ns.bounds?.apply();
       ns.basinDiagram.redraw();
       ns.modePreview.redraw();
       ns.hoverCouple?.init();
diff --git a/src/editor/oneditsave.js b/src/editor/oneditsave.js
index 6480856..8ba082f 100644
--- a/src/editor/oneditsave.js
+++ b/src/editor/oneditsave.js
@@ -10,8 +10,12 @@
   ns.oneditsave = function () {
     const node = this;
 
-    // Block save if the inline validator surfaced any issues.
-    const issues = window._psModeValidationIssues || [];
+    // Block save if EITHER validator surfaced any issues. basin-diagram
+    // owns hierarchy issues (start ≤ inlet ≤ max ≤ overflow ≤ basinHeight,
+    // dryRun < start). mode-preview owns shift-specific issues.
+    const basinIssues = window._psBasinValidationIssues || [];
+    const modeIssues  = window._psModeValidationIssues  || [];
+    const issues = [...basinIssues, ...modeIssues];
     if (issues.length) {
       if (typeof RED !== 'undefined' && RED.notify) {
         RED.notify('PumpingStation config invalid:<br>• ' + issues.join('<br>• '),