From 4c53af96a925ffc927752dd87469fea72c150487 Mon Sep 17 00:00:00 2001
From: John OReilly <john@svsmsp.ca>
Date: Wed, 18 Mar 2026 17:35:31 -0400
Subject: [PATCH] =?UTF-8?q?style:=20sidebar=20UX=20polish=20=E2=80=94=20un?=
 =?UTF-8?q?ified=20dividers,=20letter-spacing,=20contrast,=20font=20floor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unify sidebar dividers: one dashed style + --sidebar-rule token (replaces 4 old tokens)
- Remove total-line border from invoice/value/summary groups (keep monthly only)
- Add --text-spacing-money: 0.05em token (was hardcoded 0.02em) for price readability
- Bump 6 font sizes from 8-10px to 0.6875rem (11px minimum floor)
- Darken --muted: Dark #9e9588→#b0a99f (6.6:1), Light #6a6157→#554e46 (6.5:1)
- Remove opacity on 9 text elements that were double-muting with --muted color
- Normalize divider weight across themes: Dark/Light 75%, Glass 0.16

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 SVS-MSP-Calculator-components.css | 48 +++++++++++++++----------------
 SVS-MSP-Calculator-glass.css      |  7 ++---
 SVS-MSP-Calculator-light.css      |  5 ++--
 SVS-MSP-Calculator-responsive.css |  2 +-
 SVS-MSP-Calculator-tokens.css     |  9 +++---
 5 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/SVS-MSP-Calculator-components.css b/SVS-MSP-Calculator-components.css
index 86d0812..88981a9 100644
--- a/SVS-MSP-Calculator-components.css
+++ b/SVS-MSP-Calculator-components.css
@@ -97,10 +97,8 @@
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--accent);
-    opacity: 0.7;
   }
   .group-label-sections {
-    opacity: 0.6;
     letter-spacing: 0.06em;
   }
 
@@ -206,7 +204,7 @@
     max-width: none;
     text-wrap: pretty;
   }
-  .section-title-tag { font-size: 0.9375rem; font-weight: 400; opacity: 0.6; }
+  .section-title-tag { font-size: 0.9375rem; font-weight: 400; }
   .section-subtitle {
     grid-column: 1 / -1;
     grid-row: 3;
@@ -496,8 +494,8 @@
     font-weight: 500;
     color: var(--ink);
   }
-  .pill-toggle label .pill-price small { font-size: 0.875rem; opacity: 0.6; }
-  .pill-toggle label .pill-desc { font-size: 0.875rem; opacity: 0.7; }
+  .pill-toggle label .pill-price small { font-size: 0.875rem; }
+  .pill-toggle label .pill-desc { font-size: 0.875rem; }
   .pill-toggle label .pill-savings {
     display: block;
     font-size: 0.75rem;
@@ -1015,7 +1013,7 @@
      with _m IDs and synced by update() via syncEl/syncClass.
   ─────────────────────────────────────────────────────────────── */
   .sidebar {
-    --sidebar-rule-color: var(--sidebar-line-rule);
+    --sidebar-rule-color: var(--sidebar-rule);
     --sidebar-copy-size: 0.84375rem;
     --sidebar-copy-line: 1.5;
     --sidebar-note-size: 0.78125rem;
@@ -1114,7 +1112,7 @@
   .sidebar-focus-client-label {
     display: block;
     font-family: 'DM Mono', monospace;
-    font-size: 0.625rem;
+    font-size: 0.6875rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: color-mix(in srgb, var(--ink) 62%, var(--muted));
@@ -1173,7 +1171,7 @@
     flex: 0 0 auto;
     min-height: 12px;
     font-family: 'DM Mono', monospace;
-    font-size: 0.625rem;
+    font-size: 0.6875rem;
     font-weight: 500;
     letter-spacing: 0.18em;
     text-transform: uppercase;
@@ -1189,7 +1187,7 @@
     color: var(--muted);
     line-height: var(--sidebar-copy-line);
     padding: var(--space-stack-tight) var(--space-xs);
-    border-bottom: var(--border-thin) var(--sidebar-line-rule-style) var(--sidebar-rule-color);
+    border-bottom: var(--border-thin) var(--sidebar-rule-style) var(--sidebar-rule-color);
     border-left: var(--border-medium) solid transparent;
     border-radius: 2px;
     transition: background var(--transition-fast, 150ms) ease,
@@ -1208,7 +1206,7 @@
     color: var(--text-money);
     font-size: var(--sidebar-copy-size);
     line-height: 1.2;
-    letter-spacing: 0.02em;
+    letter-spacing: var(--text-spacing-money);
     flex: 0 0 auto;
     padding-left: var(--space-sm);
     text-align: right;
@@ -1216,7 +1214,7 @@
   .sidebar-line .lbl-icon { margin-right: var(--space-sm); opacity: 0.82; }
   .sidebar-mrr-label {
     font-family: 'DM Mono', monospace;
-    font-size: 0.625rem;
+    font-size: 0.6875rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: var(--muted);
@@ -1242,7 +1240,6 @@
     height: 15px;
   }
   .sidebar-line-opportunity {
-    border-bottom-style: dotted;
   }
   .sidebar-line-opportunity .val {
     color: var(--amber);
@@ -1353,7 +1350,6 @@
   }
   #nudgeCounter {
     font-size: 0.75rem;
-    opacity: 0.55;
   }
   .nudge-nav-btn {
     background: var(--surface-ghost);
@@ -1501,7 +1497,7 @@
     display: inline-flex;
     max-width: 100%;
     font-family: 'DM Mono', monospace;
-    font-size: 8px;
+    font-size: 0.6875rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -1723,7 +1719,7 @@
     color: var(--muted);
     font-family: 'DM Mono', monospace;
     line-height: 1.6;
-    letter-spacing: 0.02em;
+    letter-spacing: var(--text-spacing-money);
     padding: var(--space-xs) 0 var(--space-stack) var(--space-2xl);
   }
   .sl-sub-row {
@@ -1755,8 +1751,8 @@
   }
 
   /* Per-user cost section */
-  .per-user-cost-sub { display: inline-block; font-size: 0.625rem; opacity: 0.6; font-weight: 400; margin-top: 3px; }
-  .sidebar-note-mono { font-size: var(--sidebar-mono-size); padding: 2px 0 6px; font-family: 'DM Mono', monospace; line-height: 1.45; }
+  .per-user-cost-sub { display: inline-block; font-size: 0.6875rem; font-weight: 400; margin-top: 3px; }
+  .sidebar-note-mono { font-size: var(--sidebar-mono-size); padding: 2px 0 6px; font-family: 'DM Mono', monospace; line-height: 1.65; }
 
   /* VS Comparison block */
   .vs-comparison-wrap {
@@ -1777,7 +1773,7 @@
     margin-top: var(--space-stack);
     padding-top: var(--space-md);
     border-top: var(--border-thin) solid var(--border);
-    line-height: 1.6;
+    line-height: 1.75;
     font-style: italic;
   }
 
@@ -1814,23 +1810,26 @@
   /* Sidebar utility classes — !important overrides .sidebar-line .val compound selector */
   .sl-muted { color: var(--muted) !important; font-size: 0.6875rem; }
   .sl-discount-val { color: var(--green) !important; }
-  .sl-discount-detail { font-size: 0.7rem; opacity: 0.7; }
+  .sl-discount-detail { font-size: 0.75rem; }
   .sl-hst-val { color: var(--text-money) !important; font-size: var(--sidebar-copy-size); }
-  .sidebar-line-discount { border-bottom-style: dashed; border-bottom-color: var(--sidebar-rule-color); opacity: 0.8; }
+  .sidebar-line-discount { opacity: 0.8; }
   .sidebar-line.sidebar-line-hst {
     margin-top: 0;
     padding-top: var(--space-stack-tight);
     padding-bottom: var(--space-stack-tight);
-    border-top: var(--border-thin) var(--sidebar-line-rule-style) var(--sidebar-rule-color);
+    border-top: var(--border-thin) var(--sidebar-rule-style) var(--sidebar-rule-color);
     border-bottom: none;
   }
   .sidebar-line.sidebar-line-total {
     font-weight: 600;
     margin-top: var(--space-sm);
-    border-top: var(--border-medium) solid color-mix(in srgb, var(--accent) 30%, transparent);
+    border-top: none;
     border-bottom: none;
     padding-top: var(--space-stack-roomy);
   }
+  .sidebar-group--monthly .sidebar-line.sidebar-line-total {
+    border-top: var(--border-medium) var(--sidebar-rule-style) var(--sidebar-rule-color);
+  }
   .sidebar-line.sidebar-line-total .val {
     font-size: 1.1em;
     font-weight: 700;
@@ -1840,7 +1839,7 @@
     font-size: 0.7em;
     font-weight: 500;
     color: var(--muted);
-    letter-spacing: 0.02em;
+    letter-spacing: var(--text-spacing-money);
   }
   .sl-hst-toggle {
     justify-content: flex-start;
@@ -1989,7 +1988,7 @@
   }
   .quote-notes-label {
     font-family: 'DM Mono', monospace;
-    font-size: 10px;
+    font-size: 0.6875rem;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--muted);
@@ -2016,7 +2015,6 @@
   }
   .quote-notes-input::placeholder {
     color: var(--muted);
-    opacity: 0.5;
   }
 
   /* ── EXPORT BUTTONS ─────────────────────────────────────────────
diff --git a/SVS-MSP-Calculator-glass.css b/SVS-MSP-Calculator-glass.css
index 427b900..a24322e 100644
--- a/SVS-MSP-Calculator-glass.css
+++ b/SVS-MSP-Calculator-glass.css
@@ -191,8 +191,7 @@ html {
   --sidebar-zone-value: rgba(99, 216, 162, 0.04);
   --sidebar-zone-summary: rgba(105, 200, 255, 0.03);
   --sidebar-row-stripe: rgba(105, 200, 255, 0.03);
-  --sidebar-line-rule: rgba(143, 183, 221, 0.12);
-  --sidebar-total-rule: rgba(143, 183, 221, 0.22);
+  --sidebar-rule: rgba(143, 183, 221, 0.16);
 }
 
 body {
@@ -469,10 +468,10 @@ body::before {
   border-color: var(--glass-divider) !important;
 }
 .sidebar-line {
-  border-bottom-color: var(--glass-divider) !important;
+  border-bottom-color: var(--sidebar-rule) !important;
 }
 .sidebar-line.sidebar-line-total {
-  border-top-color: var(--sidebar-total-rule) !important;
+  border-top-color: var(--sidebar-rule) !important;
   border-bottom: none !important;
 }
 
diff --git a/SVS-MSP-Calculator-light.css b/SVS-MSP-Calculator-light.css
index 8857761..fdb7358 100644
--- a/SVS-MSP-Calculator-light.css
+++ b/SVS-MSP-Calculator-light.css
@@ -8,7 +8,7 @@
   --ink: #2c2825;
   --paper: #e2dccf;
   --accent: #637f88;
-  --muted: #6a6157;
+  --muted: #554e46;
   --border: #c3baab;
   --border-soft: #cdc6ba;
   --card: #ece4d6;
@@ -119,8 +119,7 @@
   --sidebar-zone-value: rgba(33, 112, 69, 0.04);
   --sidebar-zone-summary: rgba(0, 0, 0, 0.02);
   --sidebar-row-stripe: rgba(0, 0, 0, 0.02);
-  --sidebar-line-rule: color-mix(in srgb, var(--border) 70%, transparent);
-  --sidebar-total-rule: color-mix(in srgb, var(--border) 90%, transparent);
+  --sidebar-rule: color-mix(in srgb, var(--border) 75%, transparent);
   --surface-switch-off: #b5ad9f;
   --surface-switch-on: var(--green);
 }
diff --git a/SVS-MSP-Calculator-responsive.css b/SVS-MSP-Calculator-responsive.css
index 91d956d..126c52b 100644
--- a/SVS-MSP-Calculator-responsive.css
+++ b/SVS-MSP-Calculator-responsive.css
@@ -156,7 +156,7 @@
     .vs-brand-name { font-size: 0.9375rem; }
     .vs-table td { padding: var(--space-sm) 3px; font-size: 0.78125rem; }
     .vs-save-row td { padding: var(--space-stack-tight) var(--space-md); }
-    .vs-footnote { font-size: 0.65625rem; line-height: 1.55; }
+    .vs-footnote { font-size: 0.65625rem; line-height: 1.7; }
 
     /* Pitch footer */
     .pitch-wrap { padding: 0; }
diff --git a/SVS-MSP-Calculator-tokens.css b/SVS-MSP-Calculator-tokens.css
index 1b41ce9..a03430a 100644
--- a/SVS-MSP-Calculator-tokens.css
+++ b/SVS-MSP-Calculator-tokens.css
@@ -87,10 +87,11 @@
     --text-copy-line: 1.76;
     --text-compact-line: 1.58;
     --text-title-line: 1.24;
+    --text-spacing-money: 0.05em;
     --ink: #e8e3da;      /* warm beige-white — brighter for legibility */
     --paper: #1c1a17;    /* darker base — widens gap vs card for panel float */
     --accent: #3d8aba;   /* lifted blue — pops on dark backgrounds */
-    --muted: #9e9588;    /* softer secondary — clearly subordinate but readable */
+    --muted: #b0a99f;    /* softer secondary — clearly subordinate but readable (6.6:1) */
     --border: #35322c;   /* subtler dividers */
     --border-soft: var(--border);
     --card: #272420;     /* elevated surface — clear separation from paper */
@@ -260,10 +261,8 @@
     --sidebar-zone-value: rgba(58, 184, 112, 0.05);
     --sidebar-zone-summary: rgba(255, 255, 255, 0.03);
     --sidebar-zone-tax: transparent;
-    --sidebar-line-rule: color-mix(in srgb, var(--border) 88%, transparent);
-    --sidebar-line-rule-style: dashed;
-    --sidebar-total-rule: var(--border);
-    --sidebar-total-rule-style: solid;
+    --sidebar-rule: color-mix(in srgb, var(--border) 75%, transparent);
+    --sidebar-rule-style: dashed;
     --sidebar-row-stripe: rgba(255, 255, 255, 0.018);
     --sidebar-group-title-color: var(--muted);
     --sidebar-stack-gap: 14px;