Merge branch 'track-css-consolidation' into dev

DeepDrftPublic.Client/Pages/TracksView.razor

@@ -2,7 +2,7 @@
 
 <PageTitle>DeepDrft Track Gallery</PageTitle>
 
-<div class="tracks-page-wrapper">
+<div>
     <div class="tracks-view-container">
         @if (ViewModel.Page != null)
         {

DeepDrftPublic.Client/Pages/TracksView.razor.css

@@ -1,23 +1,17 @@
-.tracks-page-wrapper {
+/* Layout for the tracks page.
-    display: flex;
+   Dead flex/height rules removed — the sticky-footer intent they encoded required
-    flex-direction: column;
+   a height target that was never set; normal block flow is sufficient for a
-}
+   paginated gallery. Horizontal inset is owned by MudContainer in TracksGallery. */
 
 .tracks-view-container {
-    display: flex;
+    padding: 0;
-    flex-direction: column;
-    flex: 1;
-    padding: 0 16px; /* Horizontal padding only */
 }
 
 .tracks-content {
-    display: flex;
-    flex-grow: 1;
     padding-top: 16px;
 }
 
 .tracks-footer {
-    flex: 0 0;
     padding: 8px 0;
     display: flex;
     flex-direction: column;

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -211,8 +211,8 @@ body, p, span, div,
    8. TRACK CARDS
    ============================================================================= */
 
-/* Container — transparent so no background competes
+/* Container — transparent so the absolute-positioned fallback panel or album art
-   with the absolute-positioned fallback panel or album art. */
+   controls the card's background. No MudBlazor surface component background to fight. */
 .deepdrft-track-card-container {
     width: 250px;
     height: 250px;
@@ -281,14 +281,20 @@ body, p, span, div,
     border: 1px solid var(--deepdrft-border);
 }
 
-/* Card text — unconditional dark defaults (glass-language colors).
+/* Card text — theme-neutral base for the WASM hydration window (no wrapper class yet).
-   These fire even if the theme wrapper class is absent during WASM hydration,
+   Inherits body text so no jarring flash in either theme direction. */
-   preventing a "blue text" flash. Light-mode overrides below correct legibility. */
+.deepdrft-track-title,
-.deepdrft-track-title  { color: var(--deepdrft-white, #FAFAF8); }
+.deepdrft-track-artist,
-.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
+.deepdrft-track-meta  { color: inherit; }
-.deepdrft-track-meta   { color: rgba(250, 250, 248, 0.55); }
 
-/* Light-mode text overrides — legible on the near-white light fallback */
+/* Dark theme text — wins on specificity (0,2,0), not load order.
+   Title: off-white. Artist: muted off-white (hierarchy above meta, below title).
+   Meta: more muted. Green is reserved for the FAB (action) and chip border (tag only). */
+.deepdrft-theme-dark .deepdrft-track-title  { color: var(--deepdrft-white, #FAFAF8); }
+.deepdrft-theme-dark .deepdrft-track-artist { color: rgba(250, 250, 248, 0.65); }
+.deepdrft-theme-dark .deepdrft-track-meta   { color: rgba(250, 250, 248, 0.45); }
+
+/* Light theme text — wins on specificity (0,2,0) */
 .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); }

DeepDrftShared.Client/Components/TrackCard.razor

@@ -37,7 +37,7 @@
             {
                 <MudChip T="string"
                          Size="Size.Small"
-                         Variant="Variant.Filled"
+                         Variant="Variant.Outlined"
                          Color="Color.Primary"
                          Class="deepdrft-genre-chip">
                     @TrackModel.Genre

DeepDrftShared.Client/Components/TracksGallery.razor.css

@@ -1,5 +1,3 @@
 .tracks-gallery-container {
-    padding: 16px;
-    height: 100%;
     box-sizing: border-box;
 }