From 97e76578e9714184c63b88e99b2f2f820cd88e1d Mon Sep 17 00:00:00 2001
From: type-two <minimus.hargroove@gmail.com>
Date: Wed, 16 Sep 2026 15:30:30 +1000
Subject: [PATCH] Balance bars: common scale across groups, fixed track,
 astrological row order

Each group was normalised to its own max, so Fire 4 / Mutable 7 /
Negative 6 all drew full-width. Bars now scale against the group total
(always 12 planet-weights) inside a fixed track, and rows are ordered
Fire/Earth/Air/Water, Cardinal/Fixed/Mutable, Positive/Negative instead
of JSON-alphabetical.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 static/app.js    | 14 +++++++++-----
 static/style.css |  3 ++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/static/app.js b/static/app.js
index 27e4a47..2e561fb 100644
--- a/static/app.js
+++ b/static/app.js
@@ -510,14 +510,18 @@ function renderBalances(d) {
   const b = d.balances;
   const colors = { Fire: "#e06a4f", Earth: "#7aa85c", Air: "#d9c86a", Water: "#5f8fd0",
     Cardinal: "#8f7bd8", Fixed: "#e8c66a", Mutable: "#5fa8e0", Positive: "#e8e4f0", Negative: "#9a93ad" };
+  // one common scale: every group sums to the same total planet-weight (12),
+  // so bar length is comparable across elements / modalities / polarities
+  const ORDER = [["Fire", "Earth", "Air", "Water"], ["Cardinal", "Fixed", "Mutable"], ["Positive", "Negative"]];
   let html = "<h3>Balances</h3>";
-  for (const group of [b.elements, b.modalities, b.polarities]) {
-    const max = Math.max(...Object.values(group), 1);
-    for (const [k, v] of Object.entries(group)) {
-      html += `<div class="bal-row"><span>${k}</span><div class="bal-bar" style="width:${(v / max) * 130}px;background:${colors[k]}"></div><span>${v}</span></div>`;
+  [b.elements, b.modalities, b.polarities].forEach((group, gi) => {
+    const total = Object.values(group).reduce((a, x) => a + x, 0) || 1;
+    for (const k of ORDER[gi]) {
+      const v = group[k] || 0;
+      html += `<div class="bal-row"><span>${k}</span><div class="bal-track"><div class="bal-bar" style="width:${(v / total) * 100}%;background:${colors[k]}"></div></div><span>${v}</span></div>`;
     }
     html += `<div style="height:10px"></div>`;
-  }
+  });
   $("#balances").innerHTML = html;
   const mp = d.moon_phase;
   $("#moonphase").innerHTML = mp
diff --git a/static/style.css b/static/style.css
index 73f35c9..714ed0c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -104,7 +104,8 @@ td.dign { color: var(--gold); font-size: 12px; }
 
 .bal-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; }
 .bal-row span:first-child { width: 74px; color: var(--dim); }
-.bal-bar { height: 10px; border-radius: 5px; }
+.bal-track { width: 160px; height: 10px; background: #1c1c2c; border-radius: 5px; overflow: hidden; }
+.bal-bar { height: 10px; border-radius: 5px; min-width: 0; }
 #moonphase { margin-top: 22px; color: var(--dim); font-size: 14px; }
 #moonphase strong { color: var(--ink); }