deepdrft/product-notes/track-view-css-consolidation.md

# Track View CSS Consolidation — audit + consolidated architecture spec

Status: completed. Author: product-designer. Date: 2026-06-05. Implementer: maintenance-engineer. Landed: 2026-06-05.

Predecessors (both landed 2026-06-05):
- [`track-card-theming.md`](track-card-theming.md) — landed the navy-glass fallback + moss-green
  text treatment, scoped under `.deepdrft-theme-dark` / `-light`.
- [`track-card-css-architecture.md`](track-card-css-architecture.md) — replaced the MudCard/MudPaper
  shell with plain `<div>`s and removed the four `!important` declarations from section 8.

This note is the consolidation pass *after* those two landed. The cards render correctly today; the
goal here is a single coherent description of the cascade as it now stands, identification of what is
redundant or fragile, and a prioritized set of changes. **Nothing here is urgent or broken** — it is
hygiene plus two genuine hierarchy issues (§5) that the predecessor notes flagged as optional and that
are now worth re-deciding because the design converged on green-everywhere.

The headline finding: **the architecture is already close to clean.** The plain-div shell removed the
hard MudBlazor fight. What remains is (a) one real cascade subtlety on `MudText` color, (b) an open-but-
unused CSS-isolation seam, (c) layout-container redundancy across three files, and (d) a green-on-green
hierarchy collapse now that artist text, the genre chip, and the play FAB are all the same accent green.

---

## §1. Inventory — every CSS declaration touching the track view

Render tree (confirmed): `MainLayout` → `<div class="@ThemeWrapperClass">` (the
`deepdrft-theme-dark` / `-light` ancestor, wraps `@Body`) → `TracksView` (`.tracks-page-wrapper` …)
→ `TracksGallery` (`MudContainer.tracks-gallery-container` → `MudGrid` → `MudItem` →
`.deepdrft-track-gallery-item-center`) → `TrackCard` (plain-div shell).

Stylesheet load order (from `App.razor`, per the header comment in `deepdrft-styles.css`):
`deepdrft-tokens.css` (tokens) → `deepdrft-styles.css` (rules) → MudBlazor framework CSS + the
`MudThemeProvider`-injected `:root` palette variables. The `--mud-palette-*` vars are runtime-injected
and update on `IsDarkMode` toggle.

| # | Rule / selector | File | Targets | Conflict status |
|---|---|---|---|---|
| 1 | `.tracks-page-wrapper` (flex column) | `TracksView.razor.css` (scoped) | page outer wrapper | none — but **functionally inert**: `flex-direction: column` with no height constraint and a single flex child does nothing visible. See §4. |
| 2 | `.tracks-view-container` (flex column, `flex:1`, `padding:0 16px`) | `TracksView.razor.css` (scoped) | inner container | Horizontal padding here **stacks** with #5 and #6 (16px + 16px + 16px = 48px effective inset before the grid). See §4. |
| 3 | `.tracks-content` (flex, `flex-grow:1`, `padding-top:16px`) | `TracksView.razor.css` (scoped) | content row | `display:flex` on a block that contains a single full-width `MudContainer` — flex adds nothing here. Mild redundancy. |
| 4 | `.tracks-footer` (flex column, center, gap) | `TracksView.razor.css` (scoped) | pagination footer | none. Clean. |
| 5 | `.tracks-gallery-container` (`padding:16px`, `height:100%`, `box-sizing`) | `TracksGallery.razor.css` (scoped) | `MudContainer` root | `padding:16px` **competes with** #2's horizontal padding (double inset). `height:100%` is inert (no constrained-height ancestor chain). See §4. |
| 6 | `MudContainer MaxWidth="Large"` (MudBlazor) | MudBlazor framework | gallery container | MudBlazor's own `.mud-container` adds responsive horizontal padding + max-width. Stacks on top of #2 and #5 — **three** sources of horizontal inset. |
| 7 | `.deepdrft-track-gallery-item-center` (`display:flex; justify-content:center`) | `deepdrft-styles.css` §8 (global) | per-item wrapper div | none functionally, but **lives in global §8 while its only consumers are two scoped components** — see §3/§4 placement note. Appears twice (TracksView skeleton path + TracksGallery). |
| 8 | `.deepdrft-track-card-container` (250×250, relative, overflow hidden, `background:transparent`) | `deepdrft-styles.css` §8 (global) | card shell div | none — `!important` already removed; plain div wins by default. |
| 9 | `.deepdrft-theme-dark .deepdrft-track-card-container` (glass border) | §8 (global) | card shell, dark | none. **Ancestor-dependent** (needs `.deepdrft-theme-dark`) — cannot move to scoped CSS. |
| 10 | `.deepdrft-track-card-bg` (absolute full-bleed, `brightness(0.7)`) | §8 (global) | album-art div | none. Theme-agnostic — **could** move to scoped. |
| 11 | `.deepdrft-track-card-content` (relative, flex column, space-between, padding) | §8 (global) | content div | none. Theme-agnostic layout — **could** move to scoped. |
| 12 | `.deepdrft-theme-dark .deepdrft-track-card-content` (navy scrim gradient) | §8 (global) | content div, dark | none. **Ancestor-dependent** — stays global. |
| 13 | `.deepdrft-track-card-fallback` (absolute full-bleed, `background:navy-mid`) | §8 (global) | fallback div | none. Base paint is the no-wrapper-class flash guard. |
| 14 | `.deepdrft-theme-dark .deepdrft-track-card-fallback` (navy-glass, border, blur) | §8 (global) | fallback, dark | none. **Ancestor-dependent** — stays global. |
| 15 | `.deepdrft-theme-light .deepdrft-track-card-fallback` (navy-tint-on-white, border) | §8 (global) | fallback, light | none. **Ancestor-dependent** — stays global. |
| 16 | `.deepdrft-track-title { color: white }` (unconditional) | §8 (global) | title MudText | **competes with MudBlazor `.mud-typography-subtitle1` color.** See §2. |
| 17 | `.deepdrft-track-artist { color: green-accent }` (unconditional) | §8 (global) | artist MudText | **competes with MudBlazor `.mud-typography-caption` color.** See §2. |
| 18 | `.deepdrft-track-meta { color: rgba(white,.55) }` (unconditional) | §8 (global) | album/year MudText | **competes with MudBlazor `.mud-typography-caption` color.** See §2. |
| 19 | `.deepdrft-theme-light .deepdrft-track-title / -artist / -meta` (navy/green/muted) | §8 (global) | text, light | Light overrides of #16–18. Correct intent; cascade verified in §2. |
| 20 | `.deepdrft-track-info-middle { margin: 8px 0 }` | §8 (global) | middle row | none. Theme-agnostic — could move to scoped. |
| 21 | `.deepdrft-track-info-bottom` (flex, space-between, center) | §8 (global) | bottom row | none. Theme-agnostic — could move to scoped. (Note: `.deepdrft-track-info-top` has **no** rule — relies on default block flow; fine.) |
| 22 | `.deepdrft-genre-chip { opacity:.9; margin-top:4px }` | §8 §9 (global) | genre MudChip | No color override — chip inherits `Color.Primary` = green in dark. See §5. |
| 23 | `MudChip Color="Color.Primary"` (MudBlazor) | MudBlazor framework | genre chip | Renders filled `--mud-palette-primary` = `#3D7A68` green (dark). **Collides with green artist text + green FAB.** See §5. |
| 24 | `MudFab Color="Color.Primary"` (MudBlazor) | MudBlazor framework | play button | Renders green (dark). Intended as primary interactive accent, but now one of three greens in the card. See §5. |
| 25 | `@media (max-width:480px) .deepdrft-track-card-container` (200×200) | §8 §13 (global) | card shell, small screens | none. Theme-agnostic — would move to scoped *with* the container rule if §3 adopted. |
| — | `MudText Typo` font-family (subtitle1 → Geist Mono, caption → Geist Mono) | `DeepDrftPalettes.Typography` (MudBlazor theme) | all card text | Not a conflict — font comes from the theme typography object, color comes from our §8 rules. The two concerns are cleanly separated **once §2 confirms color wins.** |

---

## §2. MudText cascade analysis — per element, both themes

This is the part Daniel flagged. The question: do our single-class `.deepdrft-track-*` color rules
reliably beat MudBlazor's `.mud-typography-*` color rules, and do they behave correctly in **both**
themes given the unconditional-default + light-override structure?

### The two competing selectors

For each card text element MudBlazor renders `<p class="mud-typography mud-typography-{typo} deepdrft-track-{role} ...">`. Two color sources apply:

- **MudBlazor:** `.mud-typography-subtitle1` / `.mud-typography-caption` — these set font properties.
  The **color** for body/caption/subtitle typography comes from `.mud-typography` (or the element
  default) resolving to `color: var(--mud-palette-text-primary)`. Specificity: single class, `0,1,0`.
  (MudBlazor does not put a per-`Typo` color on `.mud-typography-caption`; caption/subtitle inherit the
  text-primary color. The relevant competing declaration is therefore `0,1,0` — a single class.)
- **Ours, dark (unconditional default):** `.deepdrft-track-title { color: white }` — `0,1,0`.
- **Ours, light (theme override):** `.deepdrft-theme-light .deepdrft-track-title { color: navy }` — `0,2,0`.

### Why ours wins in dark — the load-order fact

In **dark mode**, ours (`0,1,0`) ties MudBlazor's (`0,1,0`) on specificity, so **source order decides.**
`deepdrft-styles.css` is authored to load, and the MudBlazor framework sheet loads as a separate link.
The decisive detail: the *color* MudBlazor would otherwise apply is `var(--mud-palette-text-primary)`,
and our rule sets an explicit color literal. **As long as `deepdrft-styles.css` is linked after the
MudBlazor framework CSS, ours wins the tie.** Per `App.razor` ordering (tokens → our styles, with the
MudThemeProvider injecting palette vars), this holds today — but it is a **source-order dependency, not
a specificity guarantee.** That is the one fragility in the dark path: it works because of link order,
the same class of latent risk the predecessor note removed for backgrounds. It is lower-risk here
(both are `0,1,0`, and the visible result is correct), but it is the same smell.

### Per-element cascade table

| Element | Typo | Dark winner | Dark correct? | Light winner | Light correct? |
|---|---|---|---|---|---|
| Title (`-track-title`) | subtitle1 | `.deepdrft-track-title` (white, `0,1,0`, wins tie by load order) | ✅ off-white on navy-glass | `.deepdrft-theme-light .deepdrft-track-title` (navy, `0,2,0`) | ✅ navy on light fallback |
| Artist (`-track-artist`) | caption | `.deepdrft-track-artist` (green-accent, `0,1,0`) | ✅ legible, but see §5 (green collision) | `.deepdrft-theme-light .deepdrft-track-artist` (deep green, `0,2,0`) | ✅ deep green on light |
| Album (`-track-meta`) | caption | `.deepdrft-track-meta` (rgba white .55, `0,1,0`) | ✅ muted off-white | `.deepdrft-theme-light .deepdrft-track-meta` (muted, `0,2,0`) | ✅ muted on light |
| Year (`-track-meta`) | caption | same as album | ✅ | same as album | ✅ |

### Does the "unconditional default + light override" structure behave correctly?

**Yes, in both themes — with one caveat.** The structure is:

- **Dark:** unconditional defaults apply (no `.deepdrft-theme-dark` guard). They win the `0,1,0` tie
  against MudBlazor by load order. ✅
- **Light:** the `.deepdrft-theme-light` overrides (`0,2,0`) beat the unconditional defaults (`0,1,0`).
  ✅ — this is why the unconditional dark defaults do **not** leak into light mode. The light overrides
  correctly win on specificity, not load order, so light is *more* robust than dark.

**Caveat — the no-wrapper hydration window.** The unconditional defaults exist specifically to cover the
brief WASM-hydration window where neither `.deepdrft-theme-dark` nor `.deepdrft-theme-light` is on the
ancestor yet (the predecessor "blue text flash" fix). During that window the card shows dark-default
colors (white title, green artist) regardless of the user's actual theme. For a **light-mode** user this
means a sub-second flash of dark-intended text before the `-light` override attaches. It is the
symmetric cost of choosing dark as the unconditional default. Acceptable (the flash is brief and the
fallback panel underneath is also painted by a base navy-mid rule, so the card is internally
consistent during the flash), but worth naming: **the flash guard optimizes for the dark-mode user at
the light-mode user's slight expense.**

### Better alternative to the unconditional-default approach

There is a cleaner structure that removes both the load-order tie *and* the asymmetric flash, at the
cost of one extra rule per element. See §6 R2 — promote the dark treatment to a `.deepdrft-theme-dark`
guard and keep a theme-neutral safe default. Recommended only if the load-order dependency is judged
worth hardening; the current code is visually correct.

---

## §3. Recommended scoped/global split for TrackCard

The predecessor architecture note established the key fact: with a plain-div shell, **Blazor CSS
isolation now works** for elements Blazor renders (the shell divs), but **cannot select ancestors** —
so any rule keyed on `.deepdrft-theme-dark` / `-light` must stay global. The seam is open but unused.

The clean seam: **scoped CSS owns theme-agnostic structure/layout; global §8 owns everything that
depends on the theme-wrapper ancestor (all paint/color that differs by theme).**

### What CAN move to a new `TrackCard.razor.css` (theme-agnostic, Blazor-rendered divs)

| Rule | Why it can move |
|---|---|
| `.deepdrft-track-card-container` (size, position, overflow, `background:transparent`) | No theme dependency. Note: the `@media 480px` override (#25) must move **with** it. |
| `.deepdrft-track-card-bg` (album-art positioning + brightness) | Pure layout/filter, theme-agnostic. |
| `.deepdrft-track-card-content` (base flex/padding/z-index — **not** the dark scrim) | Base layout is theme-agnostic. |
| `.deepdrft-track-info-middle` / `-info-bottom` | Pure layout. |

### What MUST stay global in §8 (ancestor-dependent — scoped CSS can't reach `.deepdrft-theme-*`)

| Rule | Why it stays |
|---|---|
| `.deepdrft-theme-dark .deepdrft-track-card-container` (glass border) | Selects the theme ancestor. |
| `.deepdrft-theme-dark .deepdrft-track-card-content` (scrim gradient) | Selects the theme ancestor. |
| `.deepdrft-track-card-fallback` + both theme variants | Theme ancestor (and the base flash-guard rule pairs with them — keep the set together). |
| All `.deepdrft-track-title / -artist / -meta` color rules (both default and `-light`) | Theme-dependent color; the `-light` variants select the ancestor. Keeping the unconditional defaults global alongside them keeps the whole color story in one place. |
| `.deepdrft-genre-chip` color treatment (if added per §5) | If theme-aware, ancestor-dependent. |

### Is there a clean seam? — Recommendation

**Yes, but it is a judgment call whether to take it.** Two coherent end-states:

- **Option S-1 (split): introduce `TrackCard.razor.css`** holding the four theme-agnostic structural
  rules above; leave all theme/color rules in §8. *Pro:* co-locates structure with the component,
  uses the seam the predecessor note reopened, shrinks §8. *Con:* splits the card's CSS across two
  files — a maintainer now looks in two places, and the split line ("is this theme-dependent?") is a
  subtlety that invites future mis-filing. It also lives in `DeepDrftShared.Client` (the component's
  home), which means the CMS would now ship these structural rules too (harmless — they are layout
  only — but a new coupling).
- **Option S-2 (consolidate, recommended): keep everything in §8, do not create a scoped file.**
  The card's CSS is small (~15 rules) and *already* all in one place. The strongest property of the
  current setup is that **all track-card CSS lives in exactly one section of one file.** Splitting it
  to use isolation "because we can" trades that single-location clarity for architectural tidiness
  that buys little — the theme-dependent majority must stay global regardless, so a split leaves the
  bulk in §8 and scatters only four layout rules. **Recommend S-2.** Keep the seam *open and
  documented* (it is a real option for future per-state styling — hover/selected/now-playing — which
  may be theme-agnostic and numerous enough to justify a scoped file later), but do not split now.

This matches the predecessor note's own framing: §8's public-only scoping is "still convenient"; the
isolation seam is a reopened *option*, not a mandate.

---

## §4. TracksView / TracksGallery layout assessment — competing

This is the one place with genuine redundancy and mild competition. Three layers each contribute
horizontal inset and flex behavior that doesn't compose cleanly:

### The triple horizontal inset

A track card's left edge is pushed in by **three stacked paddings**:
1. `.tracks-view-container { padding: 0 16px }` (TracksView scoped)
2. `MudContainer`'s own responsive padding + `MaxWidth.Large` cap (MudBlazor)
3. `.tracks-gallery-container { padding: 16px }` (TracksGallery scoped)

Three sources of "indent the gallery" with no single owner. Not *broken* (it renders; the grid just
sits inside a compounded margin), but it is exactly the "where does this spacing come from?" confusion
that consolidation should remove. **One layer should own horizontal inset.** Since `MudContainer`
already provides centered, capped, responsive padding (its entire purpose), the two hand-rolled 16px
paddings are redundant with it.

### Inert / no-op rules

- `.tracks-page-wrapper` `flex-direction: column` — single child, no height target. Does nothing.
- `.tracks-view-container` `flex: 1` and `.tracks-content` `flex-grow: 1` — these presume a constrained-
  height flex parent so the content stretches and the footer pins to the bottom. But `.tracks-page-
  wrapper` has **no height** (no `min-height: 100vh`, no `flex: 1` against a sized parent). The flex-grow
  chain has nothing to grow into, so the "sticky footer" intent these rules encode is **not actually
  achieved** — the footer sits directly under the content regardless. Dead intent.
- `.tracks-gallery-container { height: 100% }` — no constrained-height ancestor, so `100%` resolves to
  content height. Inert.
- `.tracks-content { display: flex }` — wraps a single full-width `MudContainer`; flex changes nothing.

### Centering

`.deepdrft-track-gallery-item-center` (global §8) + `MudGrid Justify="Justify.Center"` (TracksGallery)
+ `MudItem` breakpoints. These **do** cooperate correctly — the per-item flex-center plus grid justify
center the cards within their columns and center the row. No conflict here; this part works.

### Recommendation (detail in §6 R3)

Collapse to a single ownership model: let `MudContainer` own horizontal inset and max-width; drop the
redundant paddings; either *commit* to the sticky-footer intent (give the wrapper a real height target
so the flex chain works) or *remove* the inert flex rules. The skeleton-loading path in `TracksView`
(which uses its own `MudGrid` + `.deepdrft-track-gallery-item-center`, bypassing `TracksGallery`)
should match whatever container model the loaded path uses, so the layout doesn't shift on load.

---

## §5. Genre chip and FAB hierarchy — re-assessment

The predecessor note flagged the genre chip as §3a (optional) and explicitly blessed the FAB as
correct (§3b). **That assessment was made before the design converged on green-for-everything.** Re-
evaluating now that artist text is *also* green-accent:

### The collapse

In **dark mode**, three elements in the lower half of every card are the **same** `#3D7A68` green-
accent:
1. **Artist text** (`.deepdrft-track-artist` → green-accent)
2. **Genre chip** (`MudChip Color="Color.Primary"` → filled green)
3. **Play FAB** (`MudFab Color="Color.Primary"` → green)

Three greens stacked in the card's lower two rows flattens the visual hierarchy: the *interactive*
element (the FAB — the only thing you click) no longer stands out from the *informational* green
(artist) and the *categorical* green (genre tag). The eye can't tell what's actionable. This is a
real regression introduced by the convergence on green, not a pre-existing nit.

### Resolving it — assign each green a distinct job

The fix is to **let only one of the three keep the saturated green**, and give it to the interactive
element (the FAB), since green-accent is defined as the dark palette's *primary interactive* color.
Demote the other two:

- **FAB → keep `Color.Primary` (green).** It is the action; it earns the accent. ✅ Confirmed correct
  *only if* the other two greens step back. The predecessor's "FAB is fine" verdict holds **conditional
  on fixing the chip and artist**.
- **Genre chip → stop being a filled green.** Make it a *tag*, not a button-lookalike. Recommend an
  outlined / low-emphasis treatment: transparent (or navy-mid) ground, green-accent border + text, so
  it reads as a category label distinct from the solid green FAB. This is the predecessor §3a proposal,
  now upgraded from "optional" to **recommended** because the collision is no longer hypothetical.
- **Artist text → consider demoting from green to muted off-white.** This is the genuinely open
  design call. Two readings (the predecessor's §2b ambiguity resurfacing): (a) **artist stays green**
  as the card's identity color and we rely on the chip-outline + FAB-fill contrast to separate the
  three; or (b) **artist goes muted off-white** (like `.np-sub` in NowPlayingCard, `rgba(250,250,248,.45–.55)`),
  leaving green as a *purely interactive/accent* signal (FAB + chip border). **Recommend (b).** It
  matches NowPlayingCard's actual hierarchy most closely — there, green is the *label/accent* color
  (`.np-label`, waveform), the title is off-white, and the sub is muted; artist-as-sub should be muted,
  not accent. Reading (b) also reserves green for "this means something / do something," which is the
  cleaner semantic. This reverses the predecessor's "reading 1" default — justified because that
  default was chosen before the three-green collision was visible.

### Light mode

Less acute: in light, `Color.Primary` = navy `#0D1B2A`, artist = deep green `#1A3C34`, so the three
elements are navy chip / navy FAB / green artist — already two distinct hues. The chip-vs-FAB
sameness (both navy) is the only light-mode echo of the problem; the outlined-chip treatment fixes it
there too. No separate light fix needed beyond the theme-aware chip rule.

---

## §6. Recommended changes — prioritized, ready for maintenance-engineer

Ordered by value. R1 and R4 are pure cleanup (safe, low-risk). R5 is the real design change. R2 and
R3 are judgment calls flagged for Daniel.

### R1 — Resolve the triple horizontal inset (cleanup, recommended)
**Priority: high (clarity). Risk: low (visual nudge only).**
Pick `MudContainer` as the single owner of horizontal inset + max-width. In
`TracksView.razor.css`: change `.tracks-view-container { padding: 0 16px }` → `padding: 0`. In
`TracksGallery.razor.css`: remove `padding: 16px` from `.tracks-gallery-container` (keep `box-sizing`;
drop `height: 100%` as inert — see R3). The cards will sit at MudContainer's natural inset. Verify the
gallery still has breathing room at the page edge; if MudContainer's default padding feels too tight,
add a *single* deliberate gutter on `.tracks-gallery-container` and document it as the one owner.

### R2 — Harden the MudText color cascade (judgment call, optional)
**Priority: medium. Risk: low. Decision needed from Daniel.**
Today the dark text colors win MudBlazor by **load order** (a `0,1,0` tie). It renders correctly but is
the same latent fragility the predecessor note removed for backgrounds. Two ways to harden, if desired:
- **R2a (minimal):** leave as-is, add a comment in §8 noting the load-order dependency and that
  `deepdrft-styles.css` must stay linked after the MudBlazor framework sheet. Zero visual change.
- **R2b (structural):** restructure to remove the tie *and* the asymmetric light-flash:
  give each text element a theme-neutral safe default (e.g. `inherit` / muted) at `0,1,0`, then guard
  **both** dark and light treatments under their respective `.deepdrft-theme-*` ancestors (`0,2,0`).
  This makes both themes win on **specificity, not load order**, and removes the dark-defaults-leak
  during a light user's hydration window (the flash becomes a neutral-to-light transition, not dark-to-
  light). Cost: one extra rule per element (3 default + 3 dark + 3 light instead of 3 default + 3 light).
  **Recommend R2b only if Daniel wants the cascade hardened; otherwise R2a.** The current code is not
  wrong — this is hardening, not a bug fix.

### R3 — Decide the sticky-footer intent (judgment call)
**Priority: medium. Risk: low.**
The `flex: 1` / `flex-grow: 1` / `height: 100%` chain in `TracksView.razor.css` +
`TracksGallery.razor.css` encodes a sticky-footer-at-viewport-bottom intent that **does not currently
work** (no height target on `.tracks-page-wrapper`). Resolve one way:
- **R3a (commit):** add `min-height: 100vh` (or `flex: 1` against a sized layout parent) to
  `.tracks-page-wrapper` so the flex-grow chain actually pins the pagination footer to the bottom on
  short pages. Then the existing flex rules become meaningful.
- **R3b (remove, recommended):** delete the inert flex/height rules (`.tracks-page-wrapper`
  flex-direction; `.tracks-view-container` flex/flex:1; `.tracks-content` display:flex/flex-grow;
  `.tracks-gallery-container` height:100%). The page already lays out fine via normal block flow + the
  footer's own centering. **Recommend R3b** — the sticky-footer intent isn't visibly needed on a
  paginated gallery (content fills the page), and removing dead rules is cleaner than reviving an
  unused behavior. If Daniel *wants* the footer pinned on sparse pages, do R3a instead.

### R4 — Tidy redundant layout rules (cleanup, recommended)
**Priority: low. Risk: none.**
Independent of R3: `.tracks-content { display: flex }` wraps a single full-width child — drop
`display: flex` (keep `padding-top: 16px`). These are no-ops being removed, not behavior changes. Roll
into the R3 pass.

### R5 — Break the three-green collision (design change, recommended)
**Priority: high (visual quality). Risk: low-medium (visible design change — wants Daniel's eye).**
This is the substantive one. In dark mode, artist text + genre chip + play FAB are all the same green.
Reassign:
- **Genre chip:** add a theme-aware `.deepdrft-genre-chip` treatment — outlined / low-emphasis
  (transparent or navy-mid ground, green-accent border + text in dark; navy border + text in light) so
  it reads as a *tag*, not a filled button. Keep the existing `opacity:.9; margin-top:4px`. Because the
  treatment is theme-aware it stays in global §8 (ancestor-dependent). Likely also requires changing the
  Razor `MudChip` from `Variant.Filled Color.Primary` to `Variant.Outlined` (or `Variant.Text`) so
  MudBlazor stops painting a filled green ground that our CSS then has to fight — *prefer changing the
  Variant in Razor over CSS-overriding a filled chip*, consistent with the predecessor's "don't fight
  MudBlazor, don't invite the fight" principle. **Razor edit owned by maintenance-engineer; flagged
  here as part of the change.**
- **Artist text:** demote `.deepdrft-track-artist` from green-accent to muted off-white in dark
  (`rgba(250,250,248,.55)`, matching `.deepdrft-track-meta` or slightly brighter for hierarchy), leaving
  green as a purely accent/interactive signal. **This reverses the predecessor's "reading 1" default —
  call it out to Daniel explicitly; it's a taste call he should confirm.** Light mode artist can stay
  deep green (no collision there) or follow the same demotion for consistency.
- **FAB:** no change — keep `Color.Primary` green. It is now the *only* saturated green in the lower
  card, so it correctly reads as the action.

  **Net effect:** title off-white, artist muted, genre = outlined green tag, FAB = solid green action.
  A clear three-tier hierarchy (identity / info / action) instead of a green wash. This is the
  NowPlayingCard vocabulary applied correctly.

### R6 — Do NOT split TrackCard CSS into a scoped file (decision: hold)
**Priority: n/a (a decision to *not* act). Risk: n/a.**
Per §3, keep all track-card CSS in §8 (Option S-2). Document the open isolation seam in a §8 comment so
a future per-state styling pass (hover/selected/now-playing) knows a `TrackCard.razor.css` is available
for theme-agnostic state rules if they grow numerous. Do not create the file now.

### Things explicitly NOT to change
- The plain-div shell and absence of `!important` (predecessor work — correct, leave alone).
- The base flash-guard rules (`.deepdrft-track-card-fallback` base navy-mid; unconditional text
  defaults) — these are load-bearing for the no-wrapper hydration window. R2b *restructures* them but
  preserves the guard; do not simply delete them.
- `.deepdrft-track-gallery-item-center` location — it is used by both the loaded path (TracksGallery)
  and the skeleton path (TracksView), so it correctly stays global. Leave in §8.

### Suggested sequencing
1. R1 + R4 + R3b together (one cleanup pass on the two scoped layout files — safe, no design risk).
2. R5 (the design change — wants Daniel's eye on the result; the artist-demotion is a taste call).
3. R2 only if Daniel elects to harden the cascade (R2a comment is near-free; R2b is the fuller fix).

---

## Open questions for Daniel
1. **R5 artist color:** demote artist from green to muted off-white (recommended), or keep artist green
   and rely on chip-outline + FAB-fill to separate the three greens? This reverses a prior default.
2. **R3 sticky footer:** pin the pagination footer to viewport bottom on sparse pages (R3a), or remove
   the dead flex rules and let it flow (R3b, recommended)?
3. **R2 cascade hardening:** leave the dark text colors winning by load order with a comment (R2a), or
   restructure to win by specificity and remove the light-user hydration flash (R2b)?