From 2c2342fbaf9c71c06597cad4274dba727163198b Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Wed, 17 Jun 2026 14:42:23 -0400
Subject: [PATCH] fix(p15): remediate four green-minor review findings

Tokenize scrim navy RGB triple (--deepdrft-scrim-rgb); LAVA row now
flex-start so knobs group left; WAVE row keeps space-between for
right-pinned width knob; remove inert margin-left:auto/wvc-row-right;
correct stale seven->ten count in OnControlStateChanged comment.
---
 .../Controls/WaveformVisualizer.razor.cs      |  9 ++++---
 .../Controls/WaveformVisualizerControls.razor |  6 ++---
 .../wwwroot/styles/deepdrft-styles.css        | 27 ++++++++++++-------
 .../wwwroot/styles/deepdrft-tokens.css        |  4 +++
 4 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizer.razor.cs b/DeepDrftPublic.Client/Controls/WaveformVisualizer.razor.cs
index 081e312..5fb5abd 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizer.razor.cs
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizer.razor.cs
@@ -280,10 +280,11 @@ public partial class WaveformVisualizer : ComponentBase, IAsyncDisposable
         await PushThemeIfChangedAsync();
     }
 
-    // The controls bar mutated a knob on the shared state and raised Changed. Push all seven control
-    // values (cheap scalar interop). Each control now drives its own dedicated dial in the JS handle
-    // (lava reframe Wave R4) — scroll speed → visible-time-span, plus the six lava/colour dials; see
-    // PushControlsAsync. The bridge stays the sole owner of the JS module handle.
+    // The controls bar mutated a knob on the shared state and raised Changed. Push all ten control
+    // values (cheap scalar interop): the eight continuous dials plus the two subsystem enables. Each
+    // dial drives its own dedicated uniform in the JS handle (lava reframe Wave R4) — scroll speed →
+    // visible-time-span, plus the six lava/colour dials; see PushControlsAsync. The bridge stays the
+    // sole owner of the JS module handle.
     private void OnControlStateChanged() => InvokeAsync(async () =>
     {
         await PushControlsAsync();
diff --git a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
index 6310090..8f7bb35 100644
--- a/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
+++ b/DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
@@ -82,7 +82,7 @@
             @* Color applies to the whole field regardless of which subsystems are on, so it is pinned
                far-right of row 1 and never reflows when collisions hides (§3). *@
             <MudTooltip Text="How fast the lamp drifts through its colors.">
-                <div class="waveform-visualizer-control mix-visualizer-control wvc-row-right" role="group" aria-label="Color gradient rotation speed">
+                <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
                     <RadialKnob Value="@ControlState.GradientRotationSpeed"
                                 ValueChanged="@OnGradientRotationSpeedChanged"
                                 Min="0" Max="1" Step="0.001"
@@ -148,7 +148,7 @@
         @* ── Row 3 — WAVE section (only when waveform on). Scroll is a SLIDER (§8); width pinned right. ── *@
         @if (ControlState.WaveformEnabled)
         {
-            <div class="wvc-row wvc-row-section">
+            <div class="wvc-row wvc-row-section wvc-row-wave">
                 <span class="wvc-section-label">WAVE:</span>
 
                 <MudTooltip Text="How fast the sound rolls by.">
@@ -163,7 +163,7 @@
                 </MudTooltip>
 
                 <MudTooltip Text="How wide the ribbon spreads across the lamp.">
-                    <div class="waveform-visualizer-control mix-visualizer-control wvc-row-right" role="group" aria-label="Waveform width">
+                    <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
                         <RadialKnob Value="@ControlState.WaveformWidth"
                                     ValueChanged="@OnWaveformWidthChanged"
                                     Min="0" Max="1" Step="0.001"
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index 2bf8dce..90c7583 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -422,8 +422,9 @@ h2, h3, h4, h5, h6,
     --mud-palette-text-primary: var(--deepdrft-white);         /* knob value label — light */
 }
 
-/* ── Row layout (§3). Each row is a horizontal band; row 1 + row 3 space-between so the right-pinned
-   control (color / width) hugs the right edge and never reflows when an inner control hides. ── */
+/* ── Row layout (§3). Each row is a horizontal band. Row 1 (MODE) and row 3 (WAVE) use
+   space-between so the right-pinned control (color / width) hugs the far edge. Row 2 (LAVA) uses
+   flex-start so its label + four knobs group left rather than spreading edge-to-edge. ── */
 .waveform-visualizer-control-panel .wvc-row {
     display: flex;
     flex-direction: row;
@@ -431,9 +432,20 @@ h2, h3, h4, h5, h6,
     gap: 0.85rem 1rem;
 }
 
-.waveform-visualizer-control-panel .wvc-row-mode,
+/* Row 1 (MODE): two direct flex children — the left toggle group and the color knob tooltip wrapper.
+   space-between pins the color knob to the far right and keeps it there when collisions hides. */
+.waveform-visualizer-control-panel .wvc-row-mode {
+    justify-content: space-between;
+}
+
+/* Row 2 (LAVA): label + four knobs group left — no right-pinned control. */
 .waveform-visualizer-control-panel .wvc-row-section {
-    /* space-between pushes the right-pinned control to the far edge; the left group holds the rest. */
+    justify-content: flex-start;
+}
+
+/* Row 3 (WAVE): label + scroll-slider + width-knob tooltip wrappers are direct flex children.
+   space-between pins the width knob to the far right while the label + slider sit left. */
+.waveform-visualizer-control-panel .wvc-row-wave {
     justify-content: space-between;
 }
 
@@ -446,11 +458,6 @@ h2, h3, h4, h5, h6,
     gap: 0.85rem 1rem;
 }
 
-/* The right-pinned control (color in row 1, width in row 3) — sits as the space-between right sibling. */
-.waveform-visualizer-control-panel .wvc-row-right {
-    margin-left: auto;
-}
-
 /* ── Section label "LAVA:" / "WAVE:" (§3, §5). NowPlayingCard .np-label TYPOGRAPHY (mono, uppercase,
    tracked), recoloured LIGHT — labels are static, so light by the colour principle (§5, §10.3). ── */
 .waveform-visualizer-control-panel .wvc-section-label {
@@ -506,7 +513,7 @@ h2, h3, h4, h5, h6,
    attribute). The doubled .mud-overlay-scrim.mud-overlay-dark selector (0,2,0) outranks MudBlazor's own
    .mud-overlay-dark (0,1,0), so the tint wins regardless of stylesheet load order. ── */
 .waveform-visualizer-control-overlay .mud-overlay-scrim.mud-overlay-dark {
-    background-color: rgba(13, 27, 42, var(--deepdrft-modal-scrim-alpha));
+    background-color: rgba(var(--deepdrft-scrim-rgb), var(--deepdrft-modal-scrim-alpha));
 }
 
 .waveform-visualizer-control-overlay .mud-overlay-content {
diff --git a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
index bbebade..a4ee762 100644
--- a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+++ b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
@@ -20,6 +20,10 @@
     /* Thin light-on-dark border, NowPlayingCard spirit (Phase 15 §5). One token instead of scattering
        the rgba(250,250,248,0.12) literal NowPlayingCard uses inline. */
     --deepdrft-border-light: rgba(250, 250, 248, 0.12);
+    /* Modal scrim base colour (RGB triple for use in rgba()) — panel dark-ground (#0D1B2A).
+       Deliberately NOT --deepdrft-navy (#112338); tokenised here so the scrim rule in
+       deepdrft-styles.css has no hardcoded literals. Change here once. */
+    --deepdrft-scrim-rgb: 13, 27, 42;
     /* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint
        (Phase 15 §4/§10.5). Mild so the panel reads as modal without a blackout. Change here once. */
     --deepdrft-modal-scrim-alpha: 0.3;