From 1986aed9024c0142309715c0071f273872c432d8 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Fri, 5 Jun 2026 16:15:27 -0400
Subject: [PATCH] =?UTF-8?q?fix(css):=20eliminate=20track=20card=20flash=20?=
 =?UTF-8?q?=E2=80=94=20transparent=20container,=20stable=20fallback=20base?=
 =?UTF-8?q?=20color,=20unconditional=20text=20defaults?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../wwwroot/styles/deepdrft-styles.css        | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index e84237a..c21a93d 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -211,12 +211,15 @@ body, p, span, div,
    8. TRACK CARDS
    ============================================================================= */
 
+/* Container — always transparent so MudCard's paper background never competes
+   with the absolute-positioned fallback panel or album art. */
 .deepdrft-track-card-container {
     width: 250px;
     height: 250px;
     min-width: 250px;
     position: relative;
     overflow: hidden;
+    background: transparent !important;
 }
 
 /* Dark: glass edge to match NowPlayingCard vocabulary */
@@ -253,41 +256,42 @@ body, p, span, div,
         rgba(13, 27, 42, 0.00) 100%);
 }
 
-/* Fallback panel — layout (theme-agnostic) */
+/* Fallback panel — layout + stable dark default.
+   Base rule sets navy-mid so the card never flashes grey/surface-teal even
+   if the theme wrapper class is absent during WASM hydration. */
 .deepdrft-track-card-fallback {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    background: var(--deepdrft-navy-mid, #162437) !important;
 }
 
-/* Fallback panel — navy-glass, dark theme only. Mirrors NowPlayingCard's .now-playing glass. */
+/* Fallback panel — navy-glass, dark theme. Mirrors NowPlayingCard's .now-playing glass. */
 .deepdrft-theme-dark .deepdrft-track-card-fallback {
-    background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent);
+    background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent) !important;
     border: 1px solid rgba(250, 250, 248, 0.12);
     backdrop-filter: blur(8px);
 }
 
 /* Fallback panel — light theme: subtle navy tint on off-white */
 .deepdrft-theme-light .deepdrft-track-card-fallback {
-    background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
+    background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) !important;
     border: 1px solid var(--deepdrft-border);
 }
 
-/* Card text — dark theme (Reading 2: NowPlayingCard hierarchy) */
-/* Title: off-white (NowPlayingCard .np-title) */
-.deepdrft-theme-dark .deepdrft-track-title {
-    color: var(--deepdrft-white);
-}
-/* Artist: moss-green (NowPlayingCard .np-label accent) */
-.deepdrft-theme-dark .deepdrft-track-artist {
-    color: var(--deepdrft-green-accent);
-}
-/* Meta (album, year): muted off-white (NowPlayingCard .np-sub) */
-.deepdrft-theme-dark .deepdrft-track-meta {
-    color: rgba(250, 250, 248, 0.55);
-}
+/* Card text — unconditional dark defaults (glass-language colors).
+   These fire even if the theme wrapper class is absent during WASM hydration,
+   preventing a "blue text" flash. Light-mode overrides below correct legibility. */
+.deepdrft-track-title  { color: var(--deepdrft-white, #FAFAF8); }
+.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
+.deepdrft-track-meta   { color: rgba(250, 250, 248, 0.55); }
+
+/* Light-mode text overrides — legible on the near-white light fallback */
+.deepdrft-theme-light .deepdrft-track-title  { color: var(--deepdrft-navy, #0D1B2A); }
+.deepdrft-theme-light .deepdrft-track-artist { color: var(--deepdrft-green, #1A3C34); }
+.deepdrft-theme-light .deepdrft-track-meta   { color: var(--deepdrft-muted, #8A9BB0); }
 
 .deepdrft-track-info-middle { margin: 8px 0; }