Merge p12-w2-t2-popover-panel into dev (12.E: popover-hosted waveform control panel)

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -375,6 +375,50 @@ h2, h3, h4, h5, h6,
     word-break: break-all;
 }
 
+/* =============================================================================
+   WAVEFORM VISUALIZER CONTROL PANEL  (Phase 12 §3d-revised / §3g)
+   The eight-knob panel hosted inside WaveformVisualizerControlPopover. MudPopover
+   PORTALS its content out of the component's DOM subtree, so Blazor CSS isolation
+   never reaches the rendered panel — its chrome must live here in the global sheet,
+   not in the scoped WaveformVisualizerControls.razor.css. (The scoped file keeps only
+   the inline-bar fallback Mix's legacy TopRowCenter mount uses, which is not portaled.)
+
+   The waveform-visualizer-control-panel class is applied ONLY when the component's
+   PanelChrome="true" parameter is set — which WaveformVisualizerControlPopover does
+   and Mix's inline mount does NOT. This prevents the chrome from leaking onto Mix's
+   inline controls bar.
+
+   The NowPlaying Hero look (§3g): dark-navy ground, green-accent knobs, light icons,
+   muted-navy filler — all from the deepdrft-* token source of truth, no hardcoded hex.
+   The RadialKnob reads --mud-palette-* for its arc/track/center/label colours; we pin
+   those palette vars to the Hero tokens ON THE PANEL so the panel reads the same
+   navy/green/off-white regardless of the page's light/dark theme.
+   ============================================================================= */
+.waveform-visualizer-control-panel.mix-visualizer-controls-bar {
+    /* Dark-navy elevated panel ground (§3g: navy-mid for the elevated surface). */
+    background: var(--deepdrft-navy-mid);
+    border: 1px solid var(--deepdrft-border-green);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+    /* Popover panel: cap width so eight 64px knobs wrap to a tidy grid rather than one long bar.
+       This OVERRIDES the inline-bar min-height reserve (which only matters for Mix's non-popover mount). */
+    min-height: 0;
+    max-width: 340px;
+    /* Pin the MudBlazor palette vars the portaled RadialKnob consumes to the Hero tokens. */
+    --mud-palette-primary: var(--deepdrft-green-accent);       /* knob value arc / pointer / center stroke */
+    --mud-palette-surface: var(--deepdrft-navy);               /* knob center fill — darkest navy reads against the panel */
+    --mud-palette-surface-variant: var(--deepdrft-muted);      /* knob background track — muted-navy filler (§3g) */
+    --mud-palette-text-primary: var(--deepdrft-white);         /* knob value label — light (§3g) */
+}
+
+/* Green-accent caption icons (§3g: light/green icons). MudIcon is portaled here too, so this is a
+   plain global descendant selector — no ::deep, no scope attribute (CSS isolation does not reach
+   inside the popover). */
+.waveform-visualizer-control-panel .waveform-visualizer-control-icon {
+    color: var(--deepdrft-green-accent);
+    opacity: 0.85;
+}
+
 @media (max-width: 419.98px) {
     .deepdrft-track-detail-meta {
         flex-direction: column;