From c2717d6a897c4ec5fea9e2b7db621a71133d3e35 Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Thu, 9 Jul 2026 22:59:32 +0200
Subject: [PATCH] fix(pm): re-theme custom CSS classes missed by the light-mode
 pass

The first light-mode pass only covered Tailwind utility classes in the
template. ~40 hand-written classes (.pm-flow-node, .pm-readback-*,
.freq-*, .pm-seg-*, .pm-bottomnav, signal bars) still hardcoded
rgba(255,255,255,N)/#fff, so scenario chips, the readback panel, and
the frequency display were unreadable in light mode. Switched them to
var(--text/--t2/--t3/--border) and color-mix() so they follow the
theme. Debug panel (dev-only) left as-is.
---
 app/assets/css/global.css |  7 +++++
 app/pages/pm.vue          | 66 +++++++++++++++++++--------------------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index ec2c0e1..ad2413b 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -9,7 +9,11 @@
     --text: #ffffff;
     --t2: rgba(255, 255, 255, .80);
     --t3: rgba(255, 255, 255, .60);
+    --t4: rgba(255, 255, 255, .35);
     --border: rgba(255, 255, 255, .10);
+    /* Subtle raised-panel fills used throughout /pm's custom (non-Tailwind) CSS. */
+    --pm-surface-1: rgba(255, 255, 255, .05);
+    --pm-surface-2: rgba(255, 255, 255, .1);
 }
 
 /* Light theme override — currently only used by /pm (scoped via [data-theme="light"]
@@ -22,7 +26,10 @@
     --text: #0f1420;
     --t2: rgba(15, 20, 32, .75);
     --t3: rgba(15, 20, 32, .55);
+    --t4: rgba(15, 20, 32, .38);
     --border: rgba(15, 20, 32, .14);
+    --pm-surface-1: rgba(15, 20, 32, .035);
+    --pm-surface-2: rgba(15, 20, 32, .06);
 }
 
 /* Reset + Base */
diff --git a/app/pages/pm.vue b/app/pages/pm.vue
index 54a5929..aa848e2 100644
--- a/app/pages/pm.vue
+++ b/app/pages/pm.vue
@@ -5602,7 +5602,7 @@ onUnmounted(() => {
 .signal-bar {
   width: 3px;
   height: 12px;
-  background: rgba(255, 255, 255, 0.2);
+  background: color-mix(in srgb, var(--text) 20%, transparent);
   border-radius: 1px;
   transition: all 0.3s ease;
 }
@@ -5898,7 +5898,7 @@ onUnmounted(() => {
   border-radius: 12px;
   border: 1px solid rgba(34, 211, 238, 0.32);
   background: rgba(34, 211, 238, 0.08);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
 }
 .hud-context-btn {
   display: flex;
@@ -6060,9 +6060,9 @@ onUnmounted(() => {
 .pm-readback-check {
   margin-bottom: 10px;
   padding: 10px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.04);
+  background: color-mix(in srgb, var(--text) 4%, transparent);
   font-size: 11.5px;
 }
 .pm-readback-head {
@@ -6073,12 +6073,12 @@ onUnmounted(() => {
   letter-spacing: .12em;
   font-size: 10px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.55);
+  color: color-mix(in srgb, var(--text) 55%, transparent);
   margin-bottom: 6px;
 }
 .pm-readback-heard {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: rgba(255, 255, 255, 0.5);
+  color: color-mix(in srgb, var(--text) 50%, transparent);
   margin-bottom: 6px;
   font-size: 11px;
 }
@@ -6091,9 +6091,9 @@ onUnmounted(() => {
 }
 .pm-readback-row.is-ok { color: #6ee7a8; }
 .pm-readback-row.is-missing { color: #fca5a5; }
-.pm-readback-field { color: rgba(255, 255, 255, 0.7); }
-.pm-readback-expected { color: #fff; font-weight: 600; }
-.pm-readback-forms { color: rgba(255, 255, 255, 0.4); }
+.pm-readback-field { color: var(--t2); }
+.pm-readback-expected { color: var(--text); font-weight: 600; }
+.pm-readback-forms { color: var(--t4); }
 
 /* Scenario chooser — phase flow with arrows */
 .pm-flow {
@@ -6108,20 +6108,20 @@ onUnmounted(() => {
   gap: 4px;
   padding: 4px 9px;
   border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--pm-surface-1);
+  border: 1px solid var(--border);
   font-size: 11.5px;
   line-height: 1.2;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--t2);
   transition: border-color .15s, background .15s, color .15s;
 }
 .pm-flow-node:hover {
   border-color: rgba(34, 211, 238, 0.6);
   background: rgba(34, 211, 238, 0.1);
-  color: #fff;
+  color: var(--text);
 }
 .pm-flow-arrow {
-  color: rgba(255, 255, 255, 0.25);
+  color: var(--t4);
 }
 
 .pm-bottomnav {
@@ -6130,8 +6130,8 @@ onUnmounted(() => {
   align-items: stretch;
   justify-content: space-around;
   gap: 2px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(5, 9, 16, 0.95);
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg) 95%, transparent);
   backdrop-filter: blur(10px);
   padding: 6px 6px calc(env(safe-area-inset-bottom) + 6px);
 }
@@ -6176,7 +6176,7 @@ onUnmounted(() => {
   border-radius: 14px;
   border: 1px solid rgba(34, 211, 238, 0.35);
   background: rgba(34, 211, 238, 0.09);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
 }
 .freq-stack {
   display: flex;
@@ -6233,19 +6233,19 @@ onUnmounted(() => {
 .freq-chip-tag {
   font-size: 9px;
   letter-spacing: 0.2em;
-  color: rgba(255, 255, 255, 0.5);
+  color: color-mix(in srgb, var(--text) 50%, transparent);
 }
 .freq-chip-value {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 16px;
   font-weight: 700;
-  color: #fff;
+  color: var(--text);
 }
 .freq-chip-value-sm {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 13px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.78);
+  color: color-mix(in srgb, var(--text) 78%, transparent);
 }
 
 /* Dropdown option row with source label on the right */
@@ -6265,12 +6265,12 @@ onUnmounted(() => {
 .freq-option-label {
   font-size: 13px;
   font-weight: 600;
-  color: #fff;
+  color: var(--text);
   line-height: 1.1;
 }
 .freq-option-sub {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.55);
+  color: color-mix(in srgb, var(--text) 55%, transparent);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   line-height: 1.1;
 }
@@ -6294,22 +6294,22 @@ onUnmounted(() => {
   gap: 6px;
   margin-top: 4px;
   padding-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid var(--border);
 }
 .freq-manual-input {
   flex: 1 1 auto;
   min-width: 0;
   padding: 7px 10px;
   border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  background: rgba(255, 255, 255, 0.04);
-  color: #fff;
+  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
+  background: color-mix(in srgb, var(--text) 4%, transparent);
+  color: var(--text);
   font-size: 13px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   outline: none;
 }
 .freq-manual-input::placeholder {
-  color: rgba(255, 255, 255, 0.35);
+  color: var(--t4);
   font-family: inherit;
 }
 .freq-manual-input:focus {
@@ -6366,8 +6366,8 @@ onUnmounted(() => {
   gap: 4px;
   padding: 4px;
   border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--text) 4%, transparent);
 }
 .pm-seg-btn {
   flex: 1 1 0;
@@ -6380,12 +6380,12 @@ onUnmounted(() => {
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--t3);
   transition: color 130ms ease, background 130ms ease;
   -webkit-tap-highlight-color: transparent;
 }
 .pm-seg-btn:hover {
-  color: rgba(255, 255, 255, 0.85);
+  color: color-mix(in srgb, var(--text) 85%, transparent);
 }
 .pm-seg-btn.is-active {
   color: #050910;
@@ -6403,7 +6403,7 @@ onUnmounted(() => {
   border-radius: 14px;
   border: 1px solid rgba(34, 211, 238, 0.35);
   background: rgba(34, 211, 238, 0.09);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
   transition: background 120ms ease, transform 80ms ease;
 }
 .signal-chip:hover {
@@ -6426,7 +6426,7 @@ onUnmounted(() => {
     flex: 0 0 360px;
     width: 360px;
     overflow-y: auto;
-    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    border-left: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
     padding: 16px 14px;
   }
   .pm-bottomnav {