Merge cors-manager-origin into dev

Phase 23 Track B: make DeepDrftManager uncrawlable — static robots.txt (Disallow: /) + blanket noindex meta in the CMS head. No env gate; the CMS is always uncrawlable.

.gitignore

@@ -317,5 +317,7 @@ Database/Vaults/*
 !DeepDrftPublic.Client/wwwroot/js/*.js
 # RCL compiled JS must be committed — MapStaticAssets serves from build-time manifest;
 # gitignored TS output is absent when manifest is generated, so absent from publish output.
-!DeepDrftShared.Client/wwwroot/js/parallax/
-!DeepDrftShared.Client/wwwroot/js/knob/
+# Re-include the whole RCL js/ tree so every compiled module (parallax, knob, theme, and
+# any added later) ships, rather than maintaining a per-module allowlist.
+!DeepDrftShared.Client/wwwroot/js/
+!DeepDrftShared.Client/wwwroot/js/**

CLAUDE.md

@@ -8,9 +8,9 @@ DeepDrftHome is a **net10.0** solution consisting of ten projects implementing a
 
 ### Core Projects
 
-- **DeepDrftPublic**: ASP.NET Core host. Blazor Web App with Server + WASM render modes. Owns browser-facing proxy controller for `api/track/*` (metadata listing and audio streaming), MudBlazor theme prerender, and TypeScript→JS audio interop. Public-facing site for listeners.
-- **DeepDrftPublic.Client**: Blazor WebAssembly assembly. All interactive UI (pages, player stack, dark-mode plumbing, HTTP clients for both backends). Pages include the public `/about` editorial page (`Pages/About.razor` — three-movement **"Liner Notes"** editorial treatment: numbered left-rail (oversized Bodoni numerals + vertical hairline spine + mono marginalia captions), asymmetric content column, pull-quotes breaking into the margin, hand-authored SVG waveform movement dividers (self-contained motif, not the live `WaveformVisualizer`), and stacked editorial definition list for CUTS/SESSIONS/MIXES; active-movement highlight via `about-rail.ts` IntersectionObserver interop; registered in `Layout/Pages.cs`). Home hero stat row (`NowPlayingStats.razor`) is live-data-backed via `IStatsDataService` / `StatsClient` (named `"DeepDrft.API"` client) with a `PersistentComponentState` prerender bridge; `RuntimeFormat` helper converts mix runtime seconds to `hh:mm`. Consumed by the public site.
-- **DeepDrftManager**: ASP.NET Core host. Blazor Web App with server-rendered `InteractiveServer` render mode. Hosts all CMS Razor components and pages under `Components/Pages/Cms/`, `Components/Pages/Tracks/`, `Components/Layout/CmsLayout.razor`, and `Components/Shared/` (all inlined from the former `DeepDrftCms` RCL). Public entry point: `Components/Pages/Home.razor` (`@page "/"`, no `[Authorize]`, uses lean `CmsHomeLayout`) — unauthenticated visitors see a DeepDrft-branded splash with a Login CTA; authenticated admins are redirected to `/catalogue` via `RedirectToCatalogue`. The catalogue dashboard (`Components/Pages/Index.razor`) lives at `@page "/catalogue"` and remains `[Authorize]`-gated with `CmsLayout`; its cards are **CUTS / SESSIONS / MIXES**, each deep-linking to `/releases?medium=<medium>` with the matching tab pre-selected. The consolidated browse surface is `Components/Pages/Tracks/Releases.razor` (`@page "/releases"`): bulk-action buttons (Generate All Profiles / Backfill High-res) → medium tab strip (ALL / CUTS / SESSIONS / MIXES) → the active tab's grid; waveform columns (Profile / High-res) — each showing a status icon when a datum is present and an always-visible generate/regenerate button — and per-track info tooltip live in `CmsAlbumBrowser`'s expanded child-row track table. Old list routes `/tracks`, `/tracks/albums`, `/tracks/archive` are kept as aliases on `Releases.razor` so bookmarks don't 404; operational sub-routes (`/tracks/upload`, edit routes, etc.) remain at `/tracks/*`. Gated by AuthBlocks login and hierarchical `Admin` role authorization. All track operations (upload, metadata read/write, delete, replace audio) are HTTP proxies via `ICmsTrackService` / `CmsTrackService` injected directly into Blazor components; no in-process data layer. The per-track "Replace audio" affordance in `BatchEdit` / `BatchTrackList` / `BatchTrackDetail` swaps the vault bytes, regenerates both waveform datums server-side, and re-derives `DurationSeconds` from the new audio; the track id, `EntryKey`, release membership, position, and all other metadata are preserved. The remove control on a persisted track is hidden when it is the release's sole remaining persisted track — a release can reach zero live tracks only via replace or release-level delete, not per-track removal. Two named HttpClients: `DeepDrft.Content.Cms` (bounded 100 s default, for all non-upload calls) and `DeepDrft.Content.Cms.Upload` (`InfiniteTimeSpan`, for large WAV uploads). Upload progress and idle/heartbeat timeout are driven by a single `ProgressStreamContent` wrapper (`Services/ProgressStreamContent.cs`); `CmsTrackService.UploadTrackAsync` adds a two-phase cancellation (idle window resets per progress tick; separate response-wait budget arms when the body completes).
+- **DeepDrftPublic**: ASP.NET Core host. Blazor Web App with Server + WASM render modes. Owns browser-facing proxy controller for `api/track/*` (metadata listing and audio streaming), crawl-directive endpoints (`GET /robots.txt` and `GET /sitemap.xml`, environment-gated via `IWebHostEnvironment.IsProduction()` directly — server-side only, no PersistentState bridge — served by `CrawlDirectiveController` with pure builders in `Seo/RobotsTxt.cs` and `Seo/SitemapXml.cs`), MudBlazor theme prerender, and TypeScript→JS audio interop. Public-facing site for listeners.
+- **DeepDrftPublic.Client**: Blazor WebAssembly assembly. All interactive UI (pages, player stack, dark-mode plumbing, HTTP clients for both backends). Pages include the public `/about` editorial page (`Pages/About.razor` — three-movement **"Liner Notes"** editorial treatment: numbered left-rail (oversized Bodoni numerals + vertical hairline spine + mono marginalia captions), asymmetric content column, pull-quotes breaking into the margin, hand-authored SVG waveform movement dividers (self-contained motif, not the live `WaveformVisualizer`), and stacked editorial definition list for CUTS/SESSIONS/MIXES; active-movement highlight via `about-rail.ts` IntersectionObserver interop; registered in `Layout/Pages.cs`). Home hero stat row (`NowPlayingStats.razor`) is live-data-backed via `IStatsDataService` / `StatsClient` (named `"DeepDrft.API"` client) with a `PersistentComponentState` prerender bridge; `RuntimeFormat` helper converts mix runtime seconds to `hh:mm`. **SEO component** (`Controls/SeoHead.razor` + `Common/SeoModel`, `SeoJsonLd`, `SeoOptions`, `SeoUrls`, `SeoEnvironment`): `SeoHead` is a presentational `<HeadContent>` emitter (one line per page, no fetch); `SeoModel` named factories (`ForRelease`/`ForHome`/`ForAbout`/`ForBrowse`/`ForNotFound`) encode the medium→schema.org mapping in one place; `SeoJsonLd` builds typed JSON-LD (MusicGroup / MusicAlbum+LiveAlbum / MusicRecording / CollectionPage) with inline-safe escaping; `SeoOptions` holds site-wide config (`BaseUrl https://deepdrft.com`, title suffix, default OG image seam, IG `sameAs`) registered via the static `Startup` seam; `SeoEnvironment` is a scoped `[PersistentState]` bridge (mirrors `DarkModeSettings`) seeded in `DeepDrftPublic/Components/App.razor` from `IWebHostEnvironment.IsProduction()` — robots defaults to `index,follow` only in Production, `noindex,nofollow` everywhere else (fail-safe is noindex); per-page `SeoModel.Robots` overrides the default. Tags are present in prerendered HTML (rides the existing `PersistentComponentState` bridge; no new fetch). Canonical/OG origins come from `SeoOptions.BaseUrl` (config), not `window.location` — no `window` at server prerender and the origin cannot be derived behind the nginx proxy. Consumed by the public site.
+- **DeepDrftManager**: ASP.NET Core host. Blazor Web App with server-rendered `InteractiveServer` render mode. **Always uncrawlable**: a static `wwwroot/robots.txt` (`Disallow: /`, no env gate) plus a blanket `<meta name="robots" content="noindex,nofollow">` in `Components/App.razor` — defense in depth so the CMS is never indexed regardless of how it is discovered. Hosts all CMS Razor components and pages under `Components/Pages/Cms/`, `Components/Pages/Tracks/`, `Components/Layout/CmsLayout.razor`, and `Components/Shared/` (all inlined from the former `DeepDrftCms` RCL). Public entry point: `Components/Pages/Home.razor` (`@page "/"`, no `[Authorize]`, uses lean `CmsHomeLayout`) — unauthenticated visitors see a DeepDrft-branded splash with a Login CTA; authenticated admins are redirected to `/catalogue` via `RedirectToCatalogue`. `Routes.razor` resolves `DefaultLayout` from the cascaded `Task<AuthenticationState>`: unauthenticated → `CmsHomeLayout`, authenticated → `CmsLayout`; this means the AuthBlocks `Login`/`Register` pages (which declare no `@layout`) render in the lean layout for unauthenticated visitors. `CmsLayout` carries a left `MudDrawer` (app-bar hamburger toggle) holding the CMS destinations (Catalogue `/catalogue`, Releases `/releases`, Upload `/tracks/upload`), the AuthBlocks `UserAdminMenu` fragment (self-gates to `UserAdmin`+, links Users/Registrations/Permissions), and a "Provision User" link to `/useradmin/users/new` wrapped in a `HierarchicalRoleAuthorizeView` (`UserAdmin`-gated) — making the AuthBlocks user-administration surface reachable from the CMS UI. The catalogue dashboard (`Components/Pages/Index.razor`) lives at `@page "/catalogue"` and remains `[Authorize]`-gated with `CmsLayout`; its cards are **CUTS / SESSIONS / MIXES**, each deep-linking to `/releases?medium=<medium>` with the matching tab pre-selected. The consolidated browse surface is `Components/Pages/Tracks/Releases.razor` (`@page "/releases"`): bulk-action buttons (Generate All Profiles / Backfill High-res) → medium tab strip (ALL / CUTS / SESSIONS / MIXES) → the active tab's grid; waveform columns (Profile / High-res) — each showing a status icon when a datum is present and an always-visible generate/regenerate button — and per-track info tooltip live in `CmsAlbumBrowser`'s expanded child-row track table. Old list routes `/tracks`, `/tracks/albums`, `/tracks/archive` are kept as aliases on `Releases.razor` so bookmarks don't 404; operational sub-routes (`/tracks/upload`, edit routes, etc.) remain at `/tracks/*`. Gated by AuthBlocks login and hierarchical `Admin` role authorization. All track operations (upload, metadata read/write, delete, replace audio) are HTTP proxies via `ICmsTrackService` / `CmsTrackService` injected directly into Blazor components; no in-process data layer. The per-track "Replace audio" affordance in `BatchEdit` / `BatchTrackList` / `BatchTrackDetail` swaps the vault bytes, regenerates both waveform datums server-side, and re-derives `DurationSeconds` from the new audio; the track id, `EntryKey`, release membership, position, and all other metadata are preserved. The remove control on a persisted track is hidden when it is the release's sole remaining persisted track — a release can reach zero live tracks only via replace or release-level delete, not per-track removal. Two named HttpClients: `DeepDrft.Content.Cms` (bounded 100 s default, for all non-upload calls) and `DeepDrft.Content.Cms.Upload` (`InfiniteTimeSpan`, for large WAV uploads). Upload progress and idle/heartbeat timeout are driven by a single `ProgressStreamContent` wrapper (`Services/ProgressStreamContent.cs`); `CmsTrackService.UploadTrackAsync` adds a two-phase cancellation (idle window resets per progress tick; separate response-wait budget arms when the body completes). The upload form is create-only: `BatchUpload.razor` calls `GET api/track/release/exists` as a pre-flight before transferring bytes and blocks the submit with a visible message if a (title, artist) match already exists; the server also rejects duplicates with 409. The authenticated user's id (`NameIdentifier` claim) is captured once into `_createdByUserId` at component initialization (`OnInitializedAsync`) — not re-read at submit — so a mid-session token expiry cannot discard a long-composed release; the page is `[Authorize]`-gated and runs `prerender: false`, so the auth state is fully available at init and only one init pass occurs. Within-batch multi-track Cuts still work by passing the release id from row 1 as `releaseId` on rows 2..N (the ATTACH path), while `BatchEdit.razor` uses the same ATTACH path for its legitimate adds-to-existing-release.
 - **DeepDrftShared.Client**: Razor Class Library. Shared Blazor components consumed by both `DeepDrftPublic` and `DeepDrftManager` for consistency across public and admin surfaces.
 - **DeepDrftData**: Class library. EF Core domain logic: `DeepDrftContext`, `TrackConfiguration`, `Migrations`, `TrackRepository`, `TrackService`, `TrackManager`. Consumed by `DeepDrftAPI` and tests.
 - **DeepDrftAPI**: ASP.NET Core host. Dual-database authority (SQL metadata + FileDatabase binary). AuthBlocks API host (owns registration, migration/seed, JWT endpoints). Track endpoints: streaming, vault write, upload+persist, delete+cleanup, paged list with filters, single metadata (ApiKey-gated operations), metadata update, waveform profiles (512-bucket seeker + per-track high-res visualizer datum in the `track-waveforms` vault), release-track join operations, `POST api/track/duration/backfill` (ApiKey-gated one-time backfill of `DurationSeconds` for existing rows from vault audio). Stats endpoints: `GET api/stats/home` (unauthenticated; returns `HomeStatsDto` with cut track count, per-`ReleaseType` cut release counts, mix release count, and total mix runtime seconds). Release endpoints: paged list with medium filter, single read, session hero-image upload (all unauthenticated reads; authenticated writes via ApiKey). Image endpoints: authenticated upload, unauthenticated streaming.
@@ -76,17 +76,20 @@ Keep this seam clean — it is the most architecturally load-bearing part of the
 
 ### Theming and dark mode
 
-- MudBlazor is the UI framework. Light and dark palettes (bespoke "Charleston in the Day" / "Lowcountry Summer Nights") defined inline in `MainLayout.razor`.
+- MudBlazor is the UI framework. Light and dark palettes (bespoke "Charleston in the Day" / "Lowcountry Summer Nights") defined in `DeepDrftShared.Client/Common/DeepDrftPalettes.cs`. `MainLayout.razor` mounts `<MudThemeProvider Theme="@DeepDrftPalettes.Default" IsDarkMode="_isDarkMode" />` — the palettes are not inline in the layout.
 - Dark mode toggles via cookie (`darkMode`, 365 days). Client-side via JS interop.
 - During server prerender, `DarkModeService` (in `DeepDrftPublic`) reads the cookie and seeds `DarkModeSettings.IsDarkMode`, which carries into WASM render via `PersistentComponentState`. Avoids "wrong theme flash" on initial paint.
 - `DarkModeSettings` lives in `DeepDrftPublic.Client.Common` (consumed by both server prerender and client components).
+- **Theme-aware token layer:** `DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css` defines two kinds of CSS custom properties. *Source tokens* (`--deepdrft-navy`, `--deepdrft-white`, `--deepdrft-green-accent`, etc.) are brand constants — identical in `:root` and `.deepdrft-theme-dark`. *Theme-aware aliases* are defined in both blocks and flip when the theme wrapper class changes. Component and page CSS must bind the **alias**, not the source token, so neutral surfaces invert for free. Current alias families: `--deepdrft-page-surface`/`-text`/`-text-muted` (neutral page backgrounds and text), `--deepdrft-play-chip`/`-glyph`/`-chip-soft` (play-state icon chip and glyph), `--deepdrft-popover-surface` (default MudBlazor popover background — light: `color-mix(navy 4%, white)`, a near-page-background surface; dark: references source token `--deepdrft-popover-surface-dark`, a `color-mix(navy-mid 80%, green-accent 20%)` bluer navy defined once in `:root` and referenced by both the `.deepdrft-theme-dark` wrapper block and `body.deepdrft-theme-dark` so portaled popovers are reached). The bespoke glass panels (visualizer/queue/privacy) now bind their own theme-aware `--deepdrft-panel-surface`/`-text`/`-text-muted`/`-border`/`-row-hover` family: dark-glass charcoal (sourced from the `--deepdrft-panel-ground` constant) with light text in dark theme, and a light translucent glass with dark text in light theme. These tokens are re-declared in `body.deepdrft-theme-dark` because the panels are MudOverlay panels that portal to `<body>` (same portal scope as popovers); the `--deepdrft-panel-ground` source token is now consumed only via the dark `--deepdrft-panel-surface` value.
+- **Portaled-popover body-class bridge:** MudBlazor popovers portal to `<body>`, outside the `.deepdrft-theme-dark` wrapper `<div>`, so the dark popover token never reached them. Fix: `MainLayout.razor` stamps `deepdrft-theme-dark` on `<body>` via the `setBodyThemeClass(isDark)` helper in `DeepDrftShared.Client/Interop/theme/theme.ts` (lazy-imported as `_content/DeepDrftShared.Client/js/theme/theme.js`). The call fires only on first render or when `_isDarkMode` actually changes (gated by `_lastAppliedDarkMode` comparison) to avoid redundant JS calls on unrelated re-renders. The `body.deepdrft-theme-dark` selector in `deepdrft-tokens.css` resolves `--deepdrft-popover-surface` from `--deepdrft-popover-surface-dark` for these portaled elements.
+- **Interactive-accent icon treatment (`.dd-accent-icon` / `.dd-accent-fill`):** one reusable rule in `DeepDrftPublic/wwwroot/styles/deepdrft-styles.css` for green-accent interactive icon affordances (Play / Share / Add-to-Queue / lava-lamp trigger), replacing the former pile of per-site dark overrides. Wrap the affordance container in `.dd-accent-icon` to colour its glyphs green-accent in both themes; add `.dd-accent-fill` when the container also holds a `Color.Secondary` filled button that must go green-accent in dark. It is a CSS class (not a palette `Color`) because no MudBlazor `Color` enum is green in both themes, and it targets `.dd-accent-icon .mud-icon-button .mud-icon-root` (0,3,0) `!important` to beat MudBlazor's standalone `.mud-secondary-text` (0,1,0) `!important` on the glyph svg — specificity wins; source order is not load-bearing for the glyph clause. The Session/Mix release-detail hero Share/Play glyphs use this class too (already green-accent in light via `Color.Secondary`, so folding them in keeps light pixel-identical and fixes dark). The gas-lamp toggle (`GasLampLit`) is self-colored in its SVG (`fill="#2A5C4F"` on the frame) — no dark-only CSS rule is needed; `GasLamp` (unlit, light mode) continues to use `currentColor` and inherits nav text colour. New green-accent icons use this class, not a new override. (Convention detail in `DeepDrftPublic.Client/CLAUDE.md`.)
 - Typography: Google Fonts (Bodoni Moda, Cormorant, DM Sans). Hand-rolled gas-lamp icon (lit/unlit) lives in `DeepDrftShared.Client/Common/DDIcons.cs`.
 
 ### TypeScript interop, not raw JS
 
 Audio interop authored in TypeScript under `DeepDrftPublic/Interop/audio/`, compiled to `wwwroot/js/audio/` via `Microsoft.TypeScript.MSBuild`. One module per responsibility (AudioContextManager, StreamDecoder, PlaybackScheduler, SpectrumAnalyzer, AudioPlayer), plus `index.ts` exposing `window.DeepDrftAudio`. `tsconfig.json` is **not** copied to output. In dev, raw `.ts` served from `/Interop/` for source-map debugging. A second interop module lives at `DeepDrftPublic/Interop/about/about-rail.ts` (IntersectionObserver for the About page active-movement rail highlight; compiled output gitignored).
 
-**`DeepDrftShared.Client` also hosts TypeScript interop.** Its `tsconfig.json` maps `rootDir: "Interop"` → `outDir: "wwwroot/js"`, compiled by the same `Microsoft.TypeScript.MSBuild` package. Current modules: `Interop/parallax/parallax.ts` (parallax scroll for `ParallaxImage`) and `Interop/knob/knob.ts` (`capturePointer`/`releasePointer` for `RadialKnob`). Consumers lazy-import via the static-asset path `_content/DeepDrftShared.Client/js/<module>/<file>.js`.
+**`DeepDrftShared.Client` also hosts TypeScript interop.** Its `tsconfig.json` maps `rootDir: "Interop"` → `outDir: "wwwroot/js"`, compiled by the same `Microsoft.TypeScript.MSBuild` package. Current modules: `Interop/parallax/parallax.ts` (parallax scroll for `ParallaxImage`), `Interop/knob/knob.ts` (`capturePointer`/`releasePointer` for `RadialKnob`), and `Interop/theme/theme.ts` (`setBodyThemeClass(isDark)` — stamps/removes `deepdrft-theme-dark` on `<body>` so portaled MudBlazor elements inherit the dark popover token; consumed by `MainLayout.razor`). Consumers lazy-import via the static-asset path `_content/DeepDrftShared.Client/js/<module>/<file>.js`.
 
 ## Development Commands
 
@@ -126,7 +129,7 @@ All projects load secrets via `CredentialTools.ResolvePathOrThrow()` from gitign
 
 - `DeepDrftPublic/appsettings.json`: Logging and URL config. Secrets loaded from `environment/api.json` (DeepDrftAPI base URL via `Api:ContentApiUrl`).
 - `DeepDrftManager/appsettings.json`: Logging and URL config. Secrets loaded from `environment/api.json` (DeepDrftAPI base URL via `Api:ContentApiUrl` and API key via `Api:ContentApiKey`). Non-secret upload tunables (in `appsettings.json` itself, not `environment/`): `Upload:IdleTimeoutSeconds` (default 90 — aborts a stalled body-streaming phase) and `Upload:ResponseTimeoutSeconds` (default 1200 — budget for server-side persist after the body is fully sent).
-- `DeepDrftAPI/appsettings.json`: Logging and hosting config. Secrets loaded from `environment/filedatabase.json` (FileDatabase vault path), `environment/apikey.json` (API key), `environment/connections.json` (SQL and Auth connection strings), `environment/authblocks.json` (AuthBlocks JWT/email/admin creds).
+- `DeepDrftAPI/appsettings.json`: Logging and hosting config. Non-secret upload tunable: `Upload:StagingPath` (default empty → a `staging` subdirectory under the FileDatabase vault path) — the data-disk directory where large audio bodies are staged during upload/replace-audio, kept off the system temp mount (`/tmp` is a small tmpfs on the Linux host); `Startup` also points the framework's multipart buffer here via `ASPNETCORE_TEMP`. Secrets loaded from `environment/filedatabase.json` (FileDatabase vault path), `environment/apikey.json` (API key), `environment/connections.json` (SQL and Auth connection strings), `environment/authblocks.json` (AuthBlocks JWT/email/admin creds).
 
 ## Folder-Level Guidance
 

CMS-PLAN.md

@@ -40,7 +40,7 @@ The CMS is now inlined as the primary content of `DeepDrftManager`, a dedicated
 - A `[HierarchicalRoleAuthorize("Admin")]` attribute (from `AuthBlocksWeb.HierarchicalAuthorize`) on every CMS page component, so `Admin` and any descendant role are admitted by the bundled hierarchical role handler.
 - Controllers and minimal-API endpoints for CMS operations (`POST api/cms/track`, `DELETE api/cms/track/{id}`, `PUT api/cms/track/{id}`). Controllers are host-owned per the existing convention. Protected by `[Authorize(Roles = "Admin")]` — the JWT bearer middleware AuthBlocks installs validates the access token on each request.
 - The `AddAuthBlocks(...)` call in `Program.cs` and the matching `await app.Services.UseAuthBlocksStartupAsync()` post-build hook. This installs JWT bearer middleware, the hierarchical role authorization handler, the `AuthDbContext`, the EF migrations, and seeds system roles plus the configured admin user on first boot.
-- The `app.MapAuthBlocks()` call that registers `/api/auth/*`, `/api/users/*`, `/api/roles/*`, `/api/user-roles/*`, and `/api/pending-registrations/*` minimal-API endpoints. The CMS UI uses `/api/auth/login`, `/api/auth/logout`, `/api/auth/refresh`, and `/api/auth/me`; the rest are available if Wave 3 account-management ever lands.
+- The `app.MapAuthBlocks()` call that registers `/api/auth/*`, `/api/users/*`, `/api/roles/*`, `/api/user-roles/*`, and `/api/pendingregistration/*` minimal-API endpoints. The CMS UI uses `/api/auth/login`, `/api/auth/logout`, `/api/auth/refresh`, and `/api/auth/me`; the rest are available if Wave 3 account-management ever lands.
 
 **Render mode:** `InteractiveServer` for all CMS pages and routes. AuthBlocks's bundled UI (`AuthBlocksWeb` pages) is server-rendered MudBlazor with `JwtAuthenticationStateProvider` reading tokens from browser `localStorage` via JS interop. `InteractiveServer` is the right fit because: (a) it matches what the bundled login UI uses, (b) `InputFile` uploads are natively server-side, (c) CMS endpoints live in the `DeepDrftManager` process with direct access to services.
 
@@ -79,7 +79,7 @@ Concretely, from reading the library source:
 
 - Real per-user accounts (`ApplicationUser` table). No shared password.
 - One seeded admin on first boot via `AdminUserSettings`. Username, email, password come from `DeepDrftManager/environment/authblocks.json` (gitignored, same pattern as `apikey.json`).
-- No public signup in Wave 1. The `/account/register` page that AuthBlocks bundles requires a registration code (generated by an admin via `/api/pending-registrations`). We do not surface `/account/register` in any nav until Wave 3 account management lands; the route exists but is uninteresting until then.
+- No public signup in Wave 1. The `/account/register` page that AuthBlocks bundles requires a registration code (generated by an admin via `/api/pendingregistration`). We do not surface `/account/register` in any nav until Wave 3 account management lands; the route exists but is uninteresting until then.
 - **Mutation attribution.** `TrackEntity` gains a nullable `CreatedByUserId : long?` column in the W1.2 migration. Populated on every CMS-originated mutation; null for historical CLI-added rows and for any pre-CMS data. Captures attribution from day one even though Wave 1 has exactly one user (`feedback_design_for_adaptability`).
 - **Role gate.** Every CMS page and every `api/cms/*` endpoint requires the `Admin` system role. We use `Admin` rather than introducing a new `CmsAdmin` role because the collective is small and the existing hierarchy already covers the case; if Wave 3 ever needs finer grain (e.g. a `ContentEditor` role that can edit but not delete), that is a `SystemRole.cs` edit upstream, not a redesign here.
 

COMPLETED.md

@@ -6,6 +6,141 @@ Newest entries at the top. Group by phase/wave header (mirroring `PLAN.md` / `CM
 
 ---
 
+## Phase 23 — SEO Crawl Directives (landed 2026-06-23)
+
+**Landed:** 2026-06-23 on dev.
+
+- **What:** Server-side crawl-directive endpoints for `DeepDrftPublic` (`GET /robots.txt` and `GET /sitemap.xml`) plus a defense-in-depth noindex layer for `DeepDrftManager`. The endpoint/file-shaped follow-on to Phase 22's per-page `SeoHead` component. Phase 22 is the *content* of discoverability; Phase 23 is the *directives* layer above it — telling crawlers **which** pages exist and **whether** to crawl at all. No new `DeepDrftAPI` endpoint, no schema change.
+
+- **Why:** Without robots.txt a crawler has no machine-readable signal about which routes to include or exclude (e.g. `/FramePlayer`, `/api/*`). Without sitemap.xml Google/Bing must discover release detail pages by link-following alone. Without noindex/robots protection the CMS could be inadvertently crawled if an admin link ever appeared on a public page.
+
+- **Shape:**
+  - **`DeepDrftPublic/Controllers/CrawlDirectiveController.cs`** (new): thin controller serving both endpoints. Reads `IWebHostEnvironment.IsProduction()` **directly** — no `SeoEnvironment` PersistentState bridge needed because these are server-side only (nothing crosses the server→WASM seam). Env gate is fail-safe closed: non-production robots.txt emits `Disallow: /` and the sitemap returns 404.
+  - **`DeepDrftPublic/Seo/RobotsTxt.cs`** (new): pure builder for the robots.txt body. Production: `Allow: /` + `Disallow: /FramePlayer` + `Disallow: /api/` + `Sitemap:` pointer. Non-production: `Disallow: /`.
+  - **`DeepDrftPublic/Seo/SitemapXml.cs`** (new): pure builder for the sitemap XML body. Walks `GET api/release` (server-to-server via the existing `"DeepDrft.API"` named client, paged) and emits a sitemaps.org `urlset`. Six explicit static roots (`/`, `/about`, `/cuts`, `/sessions`, `/mixes`, `/archive`) plus one `<url>` per release — `<loc>` = `SeoOptions.BaseUrl` + `ReleaseRoutes.DetailHref`, equal to the page's `SeoHead` canonical by construction; `<lastmod>` from `ReleaseDate`. Resilient: a partial/failed release read yields a well-formed roots-only document, never a 500.
+  - **`DeepDrftManager/wwwroot/robots.txt`** (new static file): `Disallow: /` with no environment gate — the CMS is always uncrawlable, including in production.
+  - **`DeepDrftManager/Components/App.razor`** (updated): blanket `<meta name="robots" content="noindex,nofollow">` in the CMS host `<head>` — defense in depth against de-indexing URLs discovered via external links, complementing the robots.txt directive.
+
+- **Design memo:** `product-notes/phase-23-seo-crawl-directives.md`.
+
+---
+
+## Phase 22 — SEO Metadata Component (landed 2026-06-23)
+
+**Landed:** 2026-06-23 on dev.
+
+- **What:** A parameterized, reusable SEO head component (`SeoHead.razor`) that emits the full modern-SEO head surface — standard meta, canonical, robots, Open Graph, Twitter Card, and schema.org JSON-LD — for every public page in one line of markup. **Public listener site only** (`DeepDrftPublic` host + `DeepDrftPublic.Client`); the CMS is explicitly out of scope. No data-model/schema change, no new API endpoint.
+
+- **Why:** `App.razor` had a static `<head>` with no description, canonical, OG, Twitter Card, or JSON-LD anywhere; pages set only an ad-hoc `<PageTitle>` with an inconsistent suffix. A shared `/mixes/{key}` link unfurled as a bare title + URL. Crawlers and social unfurlers saw nothing useful.
+
+- **Shape:**
+  - **`Controls/SeoHead.razor`** (new): purely presentational `<HeadContent>` + `<PageTitle>` emitter. Accepts a single `SeoModel` parameter; owns no data fetch. Each page wires it in one line.
+  - **`Common/SeoModel.cs`** (new): typed per-page input with named factories — `ForRelease(release, baseUrl, options)` (medium-dispatched), `ForHome`, `ForAbout`, `ForBrowse`, `ForNotFound`. Factories encode the medium→schema mapping in one place. Explicit `SeoModel.Robots` override available; default is environment-gated (see `SeoEnvironment`).
+  - **`Common/SeoJsonLd.cs`** (new): typed schema.org JSON-LD builders. Cut → `MusicAlbum` with ordered `MusicRecording` track list; Session → `MusicAlbum`/`LiveAlbum`; Mix → single `MusicRecording` with ISO-8601 duration; Home/About → `MusicGroup` (with `sameAs: ["https://instagram.com/deepdrft.music"]`); Browse → `CollectionPage`. `byArtist` wired per-release. JSON-LD body is inline-safe-escaped (`<`/`>`/`&` → `\uXXXX`) to prevent script-breakout from CMS-authored text.
+  - **`Common/SeoOptions.cs`** (new): site-wide config — `BaseUrl` (`https://deepdrft.com`), title suffix (`Deep DRFT`, middot separator), default OG image seam (uses `ImageProxyController` route), IG handle in `sameAs`, no Twitter handle. Registered via the static `Startup` seam (runs in both server and WASM `Program.cs`).
+  - **`Common/SeoUrls.cs`** (new): URL helpers for canonical and `og:image` construction from `SeoOptions.BaseUrl` (config, not `window.location` — no `window` at server prerender and the origin can't be derived behind the nginx proxy).
+  - **`Common/SeoEnvironment.cs`** (new): scoped `[PersistentState]` bridge seeded in `DeepDrftPublic/Components/App.razor` from `IWebHostEnvironment.IsProduction()` — mirrors the `DarkModeSettings` bridge. Default robots is `index,follow` only in Production; `noindex,nofollow` in every non-production environment so the beta/staging site stays uncrawled. Explicit per-page `SeoModel.Robots` overrides this default. Fail-safe default is `noindex`.
+  - **Wired into:** Home, About, Cut/Session/Mix detail pages (incl. their not-found branches → `noindex`), the browse views (Albums/Sessions/Mixes/Archive), and the 404 NotFound page.
+  - **Render-mode correctness:** `SeoHead` rides the existing `PersistentComponentState` bridge (the same `ReleaseDto` the detail pages already bridge) — no new fetch. The `InteractiveAuto` double-render produces identical head content across prerender and WASM passes (fed from bridged state, guarded on id/key equality).
+
+- **Design memo:** `product-notes/phase-22-seo-metadata-component.md`.
+
+---
+
+## Phase 20 — Theater Mode (landed 2026-06-20)
+
+**Landed:** 2026-06-20 on dev. Pending: final manual browser/GPU smoke-test on dev.
+
+- **What:** A presentation-only Theater Mode toggle on the three public Release Detail views (`CutDetail.razor`, `MixDetail.razor`, `SessionDetail.razor`). Toggling ON hides the release page content via `@if` so the lava-lamp + waveform visualizer fills the surface unobstructed; the player bar grows to surface the playing release's cover art, release title (linked), and a release-mode `SharePopover`. Toggling OFF restores the page byte-for-byte. The top action row (back link, lava-lamp popover, Theater toggle) stays visible in both states. Behavior is identical across all three mediums. Persists across SPA navigation within a session; resets to OFF on fresh page load.
+
+- **Why:** The visualizer is the site's most distinctive feature (Phases 10/12/15). Theater Mode makes it the *whole* thing on demand — a "lean back and watch the lamp" experience — and relocates the minimum release identity to the one piece of chrome that stays (the player bar), so nothing essential is lost.
+
+- **Shape:**
+  - **`Controls/TheaterModeToggle.razor`** (new): shared toggle button placed immediately left of the lava-lamp `WaveformVisualizerControlPopover` on all three detail pages inside a `.dd-detail-top-actions` cluster. Material `Theaters` glyph; `.dd-accent-icon` for green-accent in both themes. Visible only when `LavaEnabled || WaveformEnabled`; disabled until interactive. Flips `WaveformVisualizerControlState.TheaterMode` and calls `NotifyChanged()`. Subscribes to `State.Changed` for its own active-state re-render; disposes cleanly.
+  - **`Controls/AudioPlayerBar/NowShowingPanel.razor`** (new): presentational "now showing" band rendered by `AudioPlayerBar` only when `TheaterMode && CurrentTrack?.Release is not null`. Shows cover art (`deepdrft-track-detail-cover-art` / `deepdrft-gradient-soft-secondary` placeholder), release title link (`ReleaseRoutes.DetailHref`), and release-mode `SharePopover` in `.dd-accent-icon`. Layout CSS in `AudioPlayerBar.razor.css` (`.now-showing-*`); surface/text bind `--deepdrft-page-*` aliases — no new dark overrides.
+  - **`Services/WaveformVisualizerControlState.cs`** (widened): gained `TheaterMode` bool + `DefaultTheaterMode = false` const, and `CoerceTheaterMode()` — enforces the invariant that Theater Mode cannot remain on when both subsystems are off. Called from `WaveformVisualizerControls.ToggleLava`/`ToggleWaveform` before `NotifyChanged()` so all observers see a consistent coerced state in the same `Changed` cycle.
+  - **`Controls/AudioPlayerBar/AudioPlayerBar.razor` + `.razor.cs` + `.razor.css`**: subscribes to `WaveformVisualizerControlState.Changed`; mounts `<NowShowingPanel>` above transport controls when Theater is on and a release is playing.
+  - **Three detail pages** (`CutDetail.razor`, `MixDetail.razor`, `SessionDetail.razor`): page-level `@if (!VisualizerControlState.TheaterMode)` gates content regions on each page individually (not in `ReleaseDetailScaffold`, so Session — which does not use the scaffold — is covered identically). Each page's top action cluster hosts `<TheaterModeToggle />` in a `.dd-detail-top-actions` flex wrapper.
+  - **`deepdrft-styles.css`**: new `.dd-detail-top-actions` layout-only class (`display:flex; align-items:center; gap:0.25rem`) — no colour; shared by all three pages.
+  - **`DeepDrftTests/WaveformVisualizerControlStateTests.cs`** (new): unit tests for the `CoerceTheaterMode()` auto-exit invariant.
+
+- **Design memo:** `product-notes/phase-20-theater-mode.md`.
+
+### Phase 20 — Wave 2 — Theater Mode refinements (landed 2026-06-21)
+
+**Landed:** 2026-06-21 on dev.
+
+- **What:** Three refinements to the base Phase 20 feature. (1) **Full-screen detail body:** each detail page's foreground container gained `.dd-detail-fill` (`min-height: calc(100vh - var(--deepdrft-nav-height, 88px))`), so the visualizer reads as full-screen and the footer is pushed below the fold regardless of Theater Mode. (2) **Eased collapse (no pop):** the hard `@if` content-hide on the three detail pages was replaced by a `.dd-theater-collapsible` / `.dd-theater-collapsible-inner` wrapper pair that receives `.dd-theater-collapsed` when `IsContentHidden` is true — animates `grid-template-rows: 1fr → 0fr`, `opacity`, and `visibility` (deferred via `transition-behavior: allow-discrete`) so Theater ON/OFF eases rather than pops; `prefers-reduced-motion` collapses instantly. The same wrapper pattern drives the player-bar `NowShowingPanel`, which is now kept mounted whenever a release is playing and collapsed (not `@if`-removed) when Theater is OFF — enabling the ease-in when Theater turns ON (resolves OQ2 design intent for a mounted-but-dormant panel). (3) **Playing-release scoping:** Theater Mode now only applies to the currently-playing release. `ReleaseDetailBase` and `CutDetailBase` each gained a cascaded `IStreamingPlayerService PlayerService`, a reference-guarded `StateChanged` subscription (disposed in `Dispose`), and three predicates: `IsThisReleasePlaying` (`CurrentTrack?.Release?.EntryKey == EntryKey`), `IsContentHidden` (`TheaterMode && IsThisReleasePlaying`), `ShowTheaterToggle` (`(LavaEnabled || WaveformEnabled) && IsThisReleasePlaying`). `TheaterModeToggle.razor` gained an `Available` parameter (default `true`) folded into its render gate; all three pages pass `Available="ShowTheaterToggle"`. A detail page whose release is not playing shows no toggle and ignores the global `TheaterMode` flag.
+
+---
+
+## Phase 18 — Theme / Dark-Mode Remediation (landed 2026-06-19)
+
+**Landed:** 2026-06-19 on dev (Wave 1 + Wave 2 + Wave 3).
+
+- **What:** A DRY token pass resolving six theming symptoms (five in dark mode, one in light) that all traced to three root causes: neutral page surfaces bound to constant brand tokens, the play chip bound to a constant light-grey, and no theme-aware popover-surface token. Resolved as one coherent pass via a shared token layer rather than per-component patches.
+
+- **Why:** Symptom consolidation and root-cause analysis showed all six symptoms shared the same underlying structure — component CSS bypassing the theme-aware alias layer and binding constant source tokens directly. A single additive token pass in `deepdrft-tokens.css` plus targeted re-pointing of consumers fixes all six without scattering dark-mode rules.
+
+- **Shape:**
+  - **Token foundation (`deepdrft-tokens.css`):** Three new theme-aware token families added to `DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css`, each defined in both `:root` (light) and `.deepdrft-theme-dark` (dark):
+    - `--deepdrft-page-surface` / `--deepdrft-page-text` / `--deepdrft-page-text-muted` — neutral page surface family. Light: `--deepdrft-white` / `--deepdrft-navy` / `--deepdrft-muted`. Dark: `var(--mud-palette-background)` (#0D1B2A, the true page ground) / `--deepdrft-white` / `color-mix(muted 70%, white)` — neutral sections dissolve into the site background as one continuous dark field rather than reading as raised panels.
+    - `--deepdrft-play-chip` / `--deepdrft-play-glyph` / `--deepdrft-play-chip-soft` — play-chip family. Light: soft-grey chip (matching prior `--deepdrft-soft`). Dark: `--deepdrft-green-accent` chip + `--deepdrft-navy` glyph (navy-on-green for solid chips); `--deepdrft-play-chip-soft` is `color-mix(green-accent 30%, transparent)` (the player-bar translucent override).
+    - `--deepdrft-popover-surface` — popover surface. Light: `color-mix(navy 8%, white)` soft desaturated-navy wash. Dark: `#162437` (pixel-identical to `DeepDrftPalettes.Dark.Surface` — dark popovers unchanged, only light is retoned).
+  - **Neutral-surface inversion (T2):** `Home.razor.css`, `About.razor.css`, `DeepDrftFooter.razor.css` re-pointed from constant `--deepdrft-white`/`--deepdrft-navy` to `--deepdrft-page-surface`/`--deepdrft-page-text`. Decorative navy/green sections (`.section-dark`, `.split-left`, `.cta-banner`, hero overlays) untouched — classification encoded in which token each section binds.
+  - **Play-chip theming (T3):** `PlayStateIcon.razor.css` `.icon-container` re-pointed to `--deepdrft-play-chip`; glyph to `--deepdrft-play-glyph`. Player-bar context overrides chip to `--deepdrft-play-chip-soft` (translucent green wash). Light-mode parity and connect-option hover also corrected.
+  - **Popover surface (T4):** `deepdrft-styles.css` binds `--deepdrft-popover-surface` to the MudBlazor default popover surface. Bespoke dark-glass panels (`--deepdrft-panel-ground`) untouched.
+  - **Wave 2 refinements (on top of T1–T4):** App bar background moved to navy (`#112338`) from near-black (`#0D1B2A`). Neutral page surfaces re-pointed to `var(--mud-palette-background)` (`#0D1B2A`) as the true dark ground — sections dissolve into the body background rather than reading as navy-mid raised panels (resolves Wave 1's open question in favour of ground). Dark-mode hero legibility (superseded in Wave 3 — see below). Play-glyph settled on navy-on-green (solid chips) and green-on-green (player bar, via `--deepdrft-play-chip-soft`).
+  - **Wave 3 — hero dark-mode legibility fix:** `DeepDrftHero.razor.css` hero text re-worked to bind theme-aware tokens directly in the base rules rather than via `:global(.deepdrft-theme-dark)` overrides (matching the About page's proven pattern). `.hero-title` and `.hero-desc` now bind `--deepdrft-page-text` directly; `.hero-subtitle` (previously bound to the constant `--deepdrft-muted`) now binds `--deepdrft-page-text-muted`, making it theme-aware for the first time. Only `.hero-title em` retains an explicit dark override (`:global(.deepdrft-theme-dark) .hero-title em` → `--deepdrft-green-accent`, lifting the low-contrast `--deepdrft-green` on the dark ground). Global hero-button dark treatment added to `deepdrft-styles.css`: `.deepdrft-theme-dark .btn-primary` → `--deepdrft-green-accent` fill + `--deepdrft-navy` text (hover: `--deepdrft-green-interactive`); `.deepdrft-theme-dark .btn-ghost` → `--deepdrft-page-text` color + `--deepdrft-border-light` border.
+  - **Open questions resolved:** Dark neutral surface = ground (continuous field, `--mud-palette-background`) — not elevated navy-mid. Popover target: `color-mix(navy 8%, white)` in light; dark binds `#162437` (MudBlazor dark Surface) unchanged.
+
+- **Design memo:** `product-notes/theme-dark-mode-remediation.md`.
+
+### Phase 18 — Wave 4 — Popover-surface retune + portaled-popover body-class bridge (landed 2026-06-20)
+
+**Landed:** 2026-06-20 on dev.
+
+- **What:** Follow-on retune of `--deepdrft-popover-surface` values and a root-cause fix for portaled MudBlazor popovers that were never reaching the dark token.
+
+- **Why:** Wave 1–3 shipped `--deepdrft-popover-surface` light at `color-mix(navy 8%, white)` (too saturated — read as a grey slab) and dark at flat `#162437`. More importantly, MudBlazor popovers portal to `<body>`, outside the `.deepdrft-theme-dark` wrapper `<div>`, so the dark token never applied to them at all. Both needed fixing as a pair.
+
+- **Shape:**
+  - **Token retune (`deepdrft-tokens.css`):** Light value changed from 8% → 4% navy mix (near-page-background, clearly light). Dark value changed from `#162437` to `color-mix(in srgb, var(--deepdrft-navy-mid) 80%, var(--deepdrft-green-accent) 20%)` — a bluer navy with a slight green accent. Dark value hoisted into a new source token `--deepdrft-popover-surface-dark` (defined once in `:root`), referenced by both the `.deepdrft-theme-dark` wrapper block and a new `body.deepdrft-theme-dark` block so portaled content is reached from either selector.
+  - **Portaled-popover body-class bridge (`MainLayout.razor` + new TS module):** `MainLayout.razor` now stamps/removes `deepdrft-theme-dark` on `<body>` after each render via a new `DeepDrftShared.Client/Interop/theme/theme.ts` module exporting `setBodyThemeClass(isDark: boolean)`. Lazy-imported as `_content/DeepDrftShared.Client/js/theme/theme.js`. Call is gated to fire only on first render or when `_isDarkMode` changes (`_lastAppliedDarkMode` comparison) — no redundant JS calls on unrelated re-renders. `IJSObjectReference _themeModule` is disposed in `DisposeAsync` to clean up the module reference when the circuit tears down.
+
+### Phase 18 — Wave 5 — Glass-panel theme-aware token family (landed 2026-06-20)
+
+**Landed:** 2026-06-20 on dev.
+
+- **What:** The three `MudOverlay`-based glass panels — the queue panel (`.deepdrft-queue-modal`), the waveform visualizer control deck, and the privacy modal — now render as a light translucent glass with legible dark text in light theme, while remaining the existing dark-glass charcoal in dark theme. Dark mode is visually unchanged; a latent white-on-light bug in the inline embed queue row was incidentally fixed by the token flip.
+
+- **Why:** Prior to this wave, all three panels were bound to the constant `--deepdrft-panel-ground` token, exempting them from the theme-aware alias layer established in Waves 1–3. In light theme this produced white text on a near-white glass surface — unreadable. The panels needed their own theme-aware family (separate from `--deepdrft-popover-surface`, which targets MudBlazor default popovers) and the same `body.deepdrft-theme-dark` portal-scope treatment introduced for popovers in Wave 4.
+
+- **Shape:**
+  - **New token family (`deepdrft-tokens.css`):** `--deepdrft-panel-surface` / `--deepdrft-panel-text` / `--deepdrft-panel-text-muted` / `--deepdrft-panel-border` / `--deepdrft-panel-row-hover` — each defined in `:root` (light values: translucent glass with dark text), `.deepdrft-theme-dark` (dark-glass charcoal with light text, sourced from the existing `--deepdrft-panel-ground` constant), and `body.deepdrft-theme-dark` (same dark values re-declared so the tokens resolve correctly when the panels portal to `<body>` via `MudOverlay`).
+  - **Consumer re-pointing:** The three panels and their descendants (queue rows, visualizer deck, privacy modal) previously bound `--deepdrft-panel-ground` directly; they are now re-pointed to the appropriate `--deepdrft-panel-surface`/`-text`/`-text-muted`/`-border`/`-row-hover` aliases.
+  - **Exemption lifted:** This deliberately removes the previously-documented exemption of these panels from the theme-aware layer. `--deepdrft-panel-ground` is now consumed only as the dark-theme value of `--deepdrft-panel-surface`, not directly by any component CSS.
+
+---
+
+## Phase 17 — Player-Bar Queue View: Wave 17.3 — Fixed embed panel + iframe resize (landed 2026-06-19)
+
+**Landed:** 2026-06-19 on dev.
+
+- **What:** The Fixed (embed) mode queue panel and the OQ1 Option-A iframe resize handshake. Release embeds now render an always-shown, read-only queue panel below the player-bar controls; the Queue button collapses/expands that panel and posts the iframe's new height to the host page so the outer `<iframe>` element resizes to match. Single-track embeds (TrackEntryKey mode) have no queue, no panel, and no Queue button — unchanged compact behaviour. Phase 17 is now complete (all four waves landed).
+
+- **Why:** Phase 11 wave 11.F armed release embeds with a queue (skip navigation, auto-advance), but the viewer had no way to see or jump within the queue. Wave 17.3 surfaces it in Fixed mode — read-only because a shared embed is not an editable playlist — and resolves OQ1 (Option A confirmed feasible: `postMessage` resize degrades gracefully if the host strips the script).
+
+- **Shape:**
+  - **Fixed embed queue panel** (`AudioPlayerBar.razor`): rendered conditionally on `ShowFixedPanel && _fixedPanelOpen` inside `.deepdrft-queue-embed-panel`; hosts `<QueueList Items="QueueItems" CurrentIndex="QueueCurrentIndex" Editable="false" OnJump="@OnQueueJump" />`. Read-only: no drag handles, no remove buttons. Row-jump (OQ2) calls `PlayRelease(Items, index)` — coherent from the armed-but-not-started state (`PlayRelease` already clears `IsArmed` and materializes a defensive copy).
+  - **Queue button in Fixed mode** (`PlayerTransportZone`): toggles `_fixedPanelOpen`; triggers a height post after the panel renders. Gated on `ShowFixedPanel` so single-track embeds see no button.
+  - **`EmbedSnippetBuilder.cs`** (`DeepDrftPublic.Client/Helpers/EmbedSnippetBuilder.cs`): `ForRelease` now mints a per-snippet random token (8 hex chars from `Guid.NewGuid().ToString("N")[..8]`). Token is used as the iframe id (`deepdrft-embed-{token}`) and threaded into the iframe src as `&EmbedId={token}`. Taller iframe height (release: 384 px vs. track: 196 px). Carries a host-side `<script>` listener that matches incoming `{type:"deepdrft-embed-resize", embedId}` messages against the snippet's own token and sets `iframe.style.height` — multiple release embeds on one host page resize independently (no cross-talk). Degrades to Option B if the host strips the script (panel still works inside the iframe at expanded height). `ForTrack` is unchanged (compact height 196 px, no script, no id token).
+  - **`embed-frame.ts`** (`DeepDrftPublic/Interop/embed/embed-frame.ts`; compiled output gitignored): new TypeScript interop module. Reads `EmbedId` from `window.location.search` once at module load; exports `postHeight(element: HTMLElement)` — measures the player element's rendered height (`Math.ceil(getBoundingClientRect().height) + 2`), builds `{type:"deepdrft-embed-resize", height, embedId?}` payload (omits `embedId` when absent for backward-compatible degradation), and calls `window.parent.postMessage(payload, "*")`. No-ops when not framed (`window.parent === window`) or the element is unmeasurable.
+  - **CSS** (`DeepDrftPublic/wwwroot/styles/deepdrft-styles.css`): new `deepdrft-queue-embed-panel` and related `deepdrft-` embed-panel classes for the fixed queue panel chrome.
+  - **Tests** (`EmbedSnippetBuilderTests`): height divergence (ForRelease taller than ForTrack), ForTrack-unchanged (height 196, no script), id uniqueness (two ForRelease calls yield distinct ids), id/script-token consistency (iframe id matches token in script), EmbedId-in-src (token appears as `EmbedId=` in the iframe src).
+
+---
+
 ## Phase 17 — Player-Bar Queue View: Wave 17.4 — Add-to-Queue affordance (landed 2026-06-19)
 
 **Landed:** 2026-06-19 on dev.

DeepDrftAPI/CLAUDE.md

@@ -16,7 +16,7 @@ Dual-database authority for tracks (SQL metadata + FileDatabase binary), release
 - `Controllers/TrackController.cs`: Track endpoints (see below).
 - `Controllers/ReleaseController.cs`: Release endpoints (see below).
 - `Middleware/ApiKeyAuthenticationMiddleware.cs`, `Middleware/ApiKeyAuthorizeAttribute.cs`: ApiKey validation logic (for track endpoints only).
-- `Models/`: Settings POCOs only (`ApiKeySettings`, `CorsSettings`, `FileDatabaseSettings`). No domain code.
+- `Models/`: Settings POCOs only (`ApiKeySettings`, `CorsSettings`, `FileDatabaseSettings`, `UploadSettings`, `UploadStagingDirectory`). No domain code.
 - `environment/filedatabase.json`: FileDatabase vault path config (loaded via CredentialTools, not in repo).
 - `environment/apikey.json`: API key for track endpoints (loaded via CredentialTools, not in repo, must be created locally or at deployment).
 - `environment/connections.json`: SQL and Auth connection strings (loaded via CredentialTools, not in repo, format: `{ "ConnectionStrings": { "DefaultConnection": "...", "Auth": "..." } }`).
@@ -120,6 +120,17 @@ Admin backfill: for every track whose `DurationSeconds` SQL column is still null
 - **Response**: `{ updated: int, skipped: int }` — counts of rows written vs. already-populated rows bypassed.
 - Returns 200 on success. Returns 500 if the backfill operation fails.
 
+### GET api/track/release/exists ([ApiKeyAuthorize])
+
+Upload-form pre-flight: checks whether a release with the given (title, artist) already exists in the catalogue. Returns the matching `ReleaseDto` (so the caller can name it in a block message) or 404 when none exists. Uses the same `GetReleaseByTitleAndArtist` read the upload CREATE-path duplicate guard uses, so the pre-flight and the server backstop agree on the match by construction (exact ordinal comparison, soft-deleted rows excluded).
+
+- **Header `ApiKey`**: required. Validated by `ApiKeyAuthenticationMiddleware`.
+- **Query parameters**:
+  - `title` (string, required): the release title to check.
+  - `artist` (string, required): the artist name to check.
+- Declared as a literal 2-segment route (`"release/exists"`) before the parameterized `{trackId}` route and distinct from `"release/{id:long}"` (different segment shape) — no routing ambiguity.
+- Returns 200 with `ReleaseDto` JSON if a match exists. Returns 400 if either query parameter is missing or whitespace. Returns 404 if no match. Returns 500 on query error.
+
 ### DELETE api/track/release/{id:long} ([ApiKeyAuthorize])
 
 Soft-delete a release row. Used by the albums browser to remove an orphaned release (one with no live tracks).
@@ -156,10 +167,11 @@ Soft-delete a release row. Used by the albums browser to remove an orphaned rele
   - `releaseType` (string, optional): enum `ReleaseType` (e.g., `Single`, `Album`, `EP`). Defaults to `Single` if null or unrecognized.
   - `medium` (string, optional): enum `ReleaseMedium` (e.g., `Cut`, `Mix`, `Session`). Defaults to `Cut` if null or unrecognized.
   - `trackNumber` (int?, optional): track position within the release (1-based). Defaults to 1 if ≤ 0 or null.
-- The upload stream is copied to a temp file under `Path.GetTempPath()` with the appropriate extension (`.wav`, `.mp3`, or `.flac`). The audio processor reads from disk and requires the correct extension for format detection. The temp file is always deleted in a `finally` block — success or failure.
-- `[RequestSizeLimit(~1.86 GB / 2_000_000_000)]` + `[RequestFormLimits(MultipartBodyLengthLimit = 2_000_000_000)]` lift the per-request ceiling above the framework default (~28 MB) so production-sized files are accepted. The body is streamed to the temp file, not buffered in memory.
-- Calls `UnifiedTrackService.UploadAsync`, which orchestrates: `TrackContentService.AddTrackAsync` (format-agnostic vault write via router) → `TrackManager` (SQL persist with `createdByUserId`).
-- Returns 200 with the **persisted** `TrackDto` JSON (Id populated) on success. Returns 400 for missing/invalid form fields or unsupported audio format. Returns 409 if the request violates domain cardinality rules (e.g., track number conflict). Returns 500 if processing fails.
+  - `releaseId` (long?, optional): the SQL release ID to attach this track to. Omit (null) on the first row of a submit — this is the **CREATE path**, which mints a new release and blocks a pre-existing (title, artist) with 409. Set to the release id returned by row 1 for rows 2..N of a within-batch multi-track Cut — this is the **ATTACH path**, which skips the (title, artist) pre-existing check and attaches directly to the already-created release after validating the id matches the natural key. The upload form is create-only; appending to a pre-existing release must go through the edit tools.
+- The upload stream is copied to a staging file under the **upload staging directory** (resolved from `Upload:StagingPath`, defaulting to a `staging` subdirectory under the FileDatabase vault path — on the data disk, **never** `Path.GetTempPath()`) with the appropriate extension (`.wav`, `.mp3`, or `.flac`). The audio processor reads from disk and requires the correct extension for format detection. The staging file is always deleted in a `finally` block — success or failure. The framework's own multipart file-section buffer is relocated off the system temp mount too: `Startup.ConfigureDomainServices` sets the `ASPNETCORE_TEMP` env var to the same staging directory, so neither on-disk copy of a large body lands on `/tmp` (a small RAM-backed tmpfs on the Linux host).
+- `[RequestSizeLimit(~1.86 GB / 2_000_000_000)]` + `[RequestFormLimits(MultipartBodyLengthLimit = 2_000_000_000)]` lift the per-request ceiling above the framework default (~28 MB) so production-sized files are accepted. The body is streamed to the staging file, not buffered in memory.
+- `UnifiedTrackService.UploadAsync` orchestrates: release resolution (CREATE or ATTACH, see above) → `TrackContentService.AddTrackAsync` (format-agnostic vault write via router) → `TrackManager` (SQL persist with `createdByUserId`). Release resolution runs the cardinality guard on both paths and, on the CREATE path, calls `ITrackService.FindOrCreateRelease` (returns `(ReleaseDto Release, bool WasCreated)`); if `WasCreated` is false, a concurrent upload won the race and the request is rejected as a duplicate rather than silently attaching.
+- Returns 200 with the **persisted** `TrackDto` JSON (Id populated) on success. Returns 400 for missing/invalid form fields or unsupported audio format. Returns 409 for two distinct domain conditions: a pre-existing (title, artist) duplicate on the CREATE path (`DUPLICATE_RELEASE:` marker → 409 Conflict), or a track-number conflict within the release (`CARDINALITY_VIOLATION:` marker → 409 Conflict). Returns 500 if processing fails.
 
 ### DELETE api/track/{id:long} ([ApiKeyAuthorize])
 
@@ -177,7 +189,7 @@ Soft-delete a release row. Used by the albums browser to remove an orphaned rele
 - **Header `ApiKey`**: required. Validated by `ApiKeyAuthenticationMiddleware`.
 - **Route parameter `id`** (long): the SQL track ID.
 - **Form field `audioFile`** (`IFormFile`, required): the replacement audio bytes. File name must end in `.wav`, `.mp3`, or `.flac`.
-- `[RequestSizeLimit(~1.86 GB / 2_000_000_000)]` + `[RequestFormLimits(MultipartBodyLengthLimit = 2_000_000_000)]` mirror the upload ceiling. The body is streamed to a temp file (correct extension preserved for the audio processor), always deleted in a `finally` block.
+- `[RequestSizeLimit(~1.86 GB / 2_000_000_000)]` + `[RequestFormLimits(MultipartBodyLengthLimit = 2_000_000_000)]` mirror the upload ceiling. The body is streamed to a staging file under the upload staging directory (the same off-`/tmp` data-disk location as the upload path; correct extension preserved for the audio processor), always deleted in a `finally` block.
 - Calls `UnifiedTrackService.ReplaceAudioAsync`, which: looks up SQL row by id → calls `TrackContentService.ReplaceTrackAudioAsync(entryKey, tempFilePath)` (registers new audio under the existing `EntryKey`; removes the stale backing file only on a cross-format swap, after the new write succeeds) → regenerates both waveform datums (best-effort; a datum failure is logged and swallowed) → writes the new audio's duration to `DurationSeconds` via `ITrackService.SetDuration` (unconditional overwrite; a failure is surfaced, not swallowed, to prevent derived aggregates like `MixRuntimeSeconds` from silently going stale).
 - Returns 200 on success. Returns 400 if the file is missing or the format is unsupported. Returns 404 if the track id is not found. Returns 500 if vault processing fails.
 
@@ -367,6 +379,7 @@ Configured in `Startup.ConfigureDomainServices()`, applied to all endpoints via
 5. Ensure the `images` vault exists (type `MediaVaultType.Image`, created on first boot if missing) via `InitializeImageVault`.
 5a. Ensure the `track-waveforms` vault exists (type `MediaVaultType.Media`, created on first boot if missing) — holds per-track high-res visualizer datum keyed by `TrackEntity.EntryKey`.
 6. Register singletons: `AudioProcessor`, `ImageProcessor`, `TrackService` (the `DeepDrftContent` version for vault operations), `WaveformProfileService`.
+6a. **Upload staging directory** — resolve and create the on-disk staging directory (read `Upload:StagingPath`; if empty, default to a `staging` subdirectory under the FileDatabase vault path via `Startup.ResolveStagingPath`). Set the `ASPNETCORE_TEMP` env var to this directory before any request is served, relocating the framework's multipart file-section buffer (Layer 1) off the system temp mount. Register `UploadStagingDirectory` as a singleton so both `UploadTrack` and `ReplaceAudio` in `TrackController` stage to the same data-disk location (Layer 2) and never write to `/tmp` (a small RAM-backed tmpfs on the Linux host).
 
 **In `Program.cs`** (SQL + AuthBlocks + wiring):
 
@@ -389,8 +402,9 @@ Mapped in `Development` only. Swagger UI at `/swagger` for testing endpoints loc
 
 ## Configuration files
 
-- `appsettings.json`: Logging, hosting, CORS, and AuthBlocks config. **Does not contain secrets.**
+- `appsettings.json`: Logging, hosting, CORS, AuthBlocks, and non-secret upload config. **Does not contain secrets.**
   - `Logging`: standard ASP.NET structure.
+  - `Upload:StagingPath`: non-secret string. Empty default → a `staging` subdirectory under the FileDatabase vault path (on the data disk). Override to an absolute path when the vault default is not suitable. Consumed by `Startup.ResolveStagingPath`.
   - `CorsSettings.AllowedOrigins`: array of origin URLs allowed to call the API (required; throws on startup if missing).
   - `AuthBlocks:Jwt:Issuer`, `AuthBlocks:Jwt:Audience`: JWT validation settings (loaded from `environment/authblocks.json`).
 - `environment/filedatabase.json` (required, loaded via CredentialTools, not in repo):

DeepDrftAPI/Controllers/TrackController.cs

@@ -20,6 +20,7 @@ public class TrackController : ControllerBase
     private readonly UnifiedTrackService _unifiedService;
     private readonly ITrackService _sqlTrackService;
     private readonly WaveformProfileService _waveformProfileService;
+    private readonly UploadStagingDirectory _stagingDirectory;
     private readonly ILogger<TrackController> _logger;
 
     // FileDatabase is injected directly for PutTrack because that endpoint receives a pre-processed
@@ -34,6 +35,7 @@ public class TrackController : ControllerBase
         UnifiedTrackService unifiedService,
         ITrackService sqlTrackService,
         WaveformProfileService waveformProfileService,
+        UploadStagingDirectory stagingDirectory,
         ILogger<TrackController> logger)
     {
         _trackContentService = trackContentService;
@@ -41,9 +43,48 @@ public class TrackController : ControllerBase
         _unifiedService = unifiedService;
         _sqlTrackService = sqlTrackService;
         _waveformProfileService = waveformProfileService;
+        _stagingDirectory = stagingDirectory;
         _logger = logger;
     }
 
+    // Builds a unique staging file path on the data disk with the validated extension. The caller MUST
+    // assign this to the local that its finally block guards BEFORE calling StageUploadAsync — that
+    // way a mid-copy abort (OperationCanceledException, IO error) still triggers deletion of the
+    // partially-written file. Staging lives under UploadStagingDirectory, never Path.GetTempPath() —
+    // on the Linux host /tmp is a small tmpfs that cannot hold a large WAV.
+    private string BuildStagingPath(string uploadExtension) =>
+        Path.Combine(_stagingDirectory.Path, Guid.NewGuid().ToString("N") + uploadExtension);
+
+    // Streams an uploaded audio body to the pre-allocated staging path. The caller owns the path and
+    // must delete it in a finally block; separating path generation from the copy ensures the finally
+    // guard fires even when CopyToAsync throws before returning.
+    private async Task StageUploadAsync(
+        IFormFile audioFile, string stagingPath, CancellationToken cancellationToken)
+    {
+        await using var stagingStream = new FileStream(
+            stagingPath, FileMode.CreateNew, FileAccess.Write, FileShare.None,
+            bufferSize: 81920, useAsync: true);
+        await using var uploadStream = audioFile.OpenReadStream();
+        await uploadStream.CopyToAsync(stagingStream, cancellationToken);
+    }
+
+    // Best-effort removal of a staging file. Logs and swallows — a stranded staging file is a
+    // disk-hygiene concern, not a request failure.
+    private void DeleteStagingFile(string stagingPath)
+    {
+        try
+        {
+            if (System.IO.File.Exists(stagingPath))
+            {
+                System.IO.File.Delete(stagingPath);
+            }
+        }
+        catch (Exception ex)
+        {
+            _logger.LogWarning(ex, "Failed to delete staging file {StagingPath}", stagingPath);
+        }
+    }
+
     // --- Literal-segment routes first ---
     // These are declared before the parameterized "{trackId}" / "{id:long}" actions so route
     // resolution never treats "page", "upload", or "meta" as a trackId.
@@ -96,6 +137,37 @@ public class TrackController : ControllerBase
         return Ok(result.Value);
     }
 
+    // GET api/track/release/exists?title=...&artist=... ([ApiKeyAuthorize])
+    // Upload-form pre-flight: does a release with this exact (title, artist) already exist? Returns the
+    // matching ReleaseDto (so the caller can name it in the block message) or 404 when none exists. Uses
+    // the same GetReleaseByTitleAndArtist read the upload create-path duplicate guard uses, so the
+    // pre-flight and the server backstop agree on the match by construction (exact ordinal comparison,
+    // soft-deleted rows excluded). "release/exists" is a literal 2-segment route declared before the
+    // parameterized "{trackId}" route and distinct from "release/{id:long}" (different segment shape).
+    [ApiKeyAuthorize]
+    [HttpGet("release/exists")]
+    public async Task<ActionResult> ReleaseExists(
+        [FromQuery] string? title,
+        [FromQuery] string? artist,
+        CancellationToken ct = default)
+    {
+        if (string.IsNullOrWhiteSpace(title) || string.IsNullOrWhiteSpace(artist))
+            return BadRequest("title and artist are both required");
+
+        var result = await _sqlTrackService.GetReleaseByTitleAndArtist(title, artist, ct);
+        if (!result.Success)
+        {
+            var error = result.Messages.FirstOrDefault()?.Message ?? "Unknown error";
+            _logger.LogError("ReleaseExists failed for ({Title}, {Artist}): {Error}", title, artist, error);
+            return StatusCode(500, "Failed to check release");
+        }
+
+        if (result.Value is null)
+            return NotFound();
+
+        return Ok(result.Value);
+    }
+
     // GET api/track/genres (unauthenticated)
     // Distinct non-null genres with track counts. Public browse data, same posture as GET
     // api/track/page. Literal segment, declared before the parameterized "{trackId}" route.
@@ -220,6 +292,7 @@ public class TrackController : ControllerBase
         [FromForm] string? releaseType,
         [FromForm] string? medium,
         [FromForm] int? trackNumber,
+        [FromForm] long? releaseId,
         CancellationToken cancellationToken)
     {
         _logger.LogInformation("UploadTrack called: trackName={TrackName}, artist={Artist}, fileName={FileName}, size={Size}",
@@ -287,23 +360,15 @@ public class TrackController : ControllerBase
 
         var resolvedTrackNumber = trackNumber is > 0 ? trackNumber.Value : 1;
 
-        // The processor router selects by extension and reads from disk, so the temp file must carry
-        // the upload's real extension. Path.GetTempFileName() yields .tmp, which the router rejects —
-        // generate our own path preserving the validated .wav/.mp3/.flac extension.
-        var tempPath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString("N") + uploadExtension);
-
+        // Build the staging path before the copy so the finally block can delete the partial file
+        // even if CopyToAsync throws mid-stream (client cancellation, disk-full, IO error).
+        var stagingPath = BuildStagingPath(uploadExtension);
         try
         {
-            await using (var tempStream = new FileStream(
-                tempPath, FileMode.CreateNew, FileAccess.Write, FileShare.None,
-                bufferSize: 81920, useAsync: true))
-            await using (var uploadStream = audioFile.OpenReadStream())
-            {
-                await uploadStream.CopyToAsync(tempStream, cancellationToken);
-            }
+            await StageUploadAsync(audioFile, stagingPath, cancellationToken);
 
             var result = await _unifiedService.UploadAsync(
-                tempPath,
+                stagingPath,
                 trackName,
                 artist,
                 string.IsNullOrWhiteSpace(album) ? null : album,
@@ -315,6 +380,7 @@ public class TrackController : ControllerBase
                 parsedReleaseType,
                 parsedMedium,
                 resolvedTrackNumber,
+                releaseId,
                 cancellationToken);
 
             if (!result.Success || result.Value is null)
@@ -322,14 +388,19 @@ public class TrackController : ControllerBase
                 var error = result.Messages.FirstOrDefault()?.Message ?? "Failed to process and store audio";
                 _logger.LogWarning("UploadTrack: UnifiedTrackService failed for {TrackName}: {Error}", trackName, error);
 
-                // A cardinality rejection is a well-formed request that violates a domain rule, so it
-                // is 409 Conflict — distinct from the 500 used for processing failure. The marker is
-                // stripped so the client sees only the human-readable detail.
+                // A cardinality or duplicate-release rejection is a well-formed request that violates a
+                // domain rule, so it is 409 Conflict — distinct from the 500 used for processing failure.
+                // The marker is stripped so the client sees only the human-readable detail.
                 if (error.StartsWith(UnifiedTrackService.CardinalityViolationMarker, StringComparison.Ordinal))
                 {
                     return Conflict(error[UnifiedTrackService.CardinalityViolationMarker.Length..]);
                 }
 
+                if (error.StartsWith(UnifiedTrackService.DuplicateReleaseMarker, StringComparison.Ordinal))
+                {
+                    return Conflict(error[UnifiedTrackService.DuplicateReleaseMarker.Length..]);
+                }
+
                 return StatusCode(500, error);
             }
 
@@ -343,17 +414,7 @@ public class TrackController : ControllerBase
         }
         finally
         {
-            try
-            {
-                if (System.IO.File.Exists(tempPath))
-                {
-                    System.IO.File.Delete(tempPath);
-                }
-            }
-            catch (Exception ex)
-            {
-                _logger.LogWarning(ex, "UploadTrack: failed to delete temp file {TempPath}", tempPath);
-            }
+            DeleteStagingFile(stagingPath);
         }
     }
 
@@ -529,21 +590,14 @@ public class TrackController : ControllerBase
             return BadRequest("Uploaded file must have a .wav, .mp3, or .flac extension");
         }
 
-        // The processor router selects by extension and reads from disk, so the temp file must carry
-        // the upload's real extension. Mirrors UploadTrack — Path.GetTempFileName() yields .tmp.
-        var tempPath = Path.Combine(Path.GetTempPath(), Guid.NewGuid().ToString("N") + uploadExtension);
-
+        // Build the staging path before the copy so the finally block can delete the partial file
+        // even if CopyToAsync throws mid-stream (client cancellation, disk-full, IO error).
+        var stagingPath = BuildStagingPath(uploadExtension);
         try
         {
-            await using (var tempStream = new FileStream(
-                tempPath, FileMode.CreateNew, FileAccess.Write, FileShare.None,
-                bufferSize: 81920, useAsync: true))
-            await using (var uploadStream = audioFile.OpenReadStream())
-            {
-                await uploadStream.CopyToAsync(tempStream, cancellationToken);
-            }
+            await StageUploadAsync(audioFile, stagingPath, cancellationToken);
 
-            var result = await _unifiedService.ReplaceAudioAsync(id, tempPath, cancellationToken);
+            var result = await _unifiedService.ReplaceAudioAsync(id, stagingPath, cancellationToken);
             if (result.Success)
             {
                 _logger.LogInformation("ReplaceAudio succeeded: id={Id}", id);
@@ -566,17 +620,7 @@ public class TrackController : ControllerBase
         }
         finally
         {
-            try
-            {
-                if (System.IO.File.Exists(tempPath))
-                {
-                    System.IO.File.Delete(tempPath);
-                }
-            }
-            catch (Exception ex)
-            {
-                _logger.LogWarning(ex, "ReplaceAudio: failed to delete temp file {TempPath}", tempPath);
-            }
+            DeleteStagingFile(stagingPath);
         }
     }
 

DeepDrftAPI/DeepDrftAPI.csproj

@@ -15,7 +15,13 @@
         <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.1" />
         <!-- AuthBlocks API host surface: AddAuthBlocks / MapAuthBlocks / UseAuthBlocksStartupAsync.
              The Manager keeps only Cerebellum.AuthBlocks.Web (web-side auth, no signing secret). -->
-        <PackageReference Include="Cerebellum.AuthBlocks" Version="10.3.33" />
+        <PackageReference Include="Cerebellum.AuthBlocks" Version="10.3.39" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <!-- Exposes the internal 409 markers (CardinalityViolationMarker / DuplicateReleaseMarker) to the
+           test suite so UploadDuplicateDetectionTests can assert the orchestrator's rejection contract. -->
+      <InternalsVisibleTo Include="DeepDrftTests" />
     </ItemGroup>
 
     <ItemGroup>

DeepDrftAPI/Models/UploadSettings.cs

@@ -0,0 +1,13 @@
+namespace DeepDrftAPI.Models
+{
+    /// <summary>
+    /// Non-secret upload tunables. <see cref="StagingPath"/> is the directory used to stage the raw
+    /// audio body during upload/replace-audio. It must live on the data disk, never the system temp
+    /// mount (on the Linux host <c>/tmp</c> is a small RAM-backed tmpfs that cannot hold a multi-hundred-MB
+    /// WAV). When null/empty it defaults to a "staging" subdirectory under the FileDatabase vault path.
+    /// </summary>
+    public class UploadSettings
+    {
+        public string? StagingPath { get; set; }
+    }
+}

DeepDrftAPI/Models/UploadStagingDirectory.cs

@@ -0,0 +1,10 @@
+namespace DeepDrftAPI.Models
+{
+    /// <summary>
+    /// The resolved, on-disk staging directory for upload/replace-audio bodies. Resolved once at
+    /// startup from <see cref="UploadSettings"/> (or the vault path default) and guaranteed to exist.
+    /// Injected into <c>TrackController</c> so the upload path never stages on the system temp mount.
+    /// A typed wrapper rather than a bare string so DI resolves it unambiguously.
+    /// </summary>
+    public sealed record UploadStagingDirectory(string Path);
+}

DeepDrftAPI/Program.cs

@@ -103,10 +103,13 @@ builder.Services.AddAuthBlocks(options =>
     options.JwtSettings.Audience = builder.Configuration["AuthBlocks:Jwt:Audience"]
         ?? throw new InvalidOperationException("AuthBlocks:Jwt:Audience is required");
 
-    options.EmailConnection.Host  = builder.Configuration["AuthBlocks:Email:Host"]
+    options.EmailConnection.Host        = builder.Configuration["AuthBlocks:Email:Host"]
         ?? throw new InvalidOperationException("AuthBlocks:Email:Host is required");
-    options.EmailConnection.Token = builder.Configuration["AuthBlocks:Email:Token"]
+    options.EmailConnection.Token       = builder.Configuration["AuthBlocks:Email:Token"]
         ?? throw new InvalidOperationException("AuthBlocks:Email:Token is required");
+    options.EmailConnection.FromAddress = builder.Configuration["AuthBlocks:Email:From"]
+        ?? throw new InvalidOperationException("AuthBlocks:Email:From is required");
+    options.EmailConnection.TestInbox   = builder.Configuration["AuthBlocks:Email:TestInbox"];
 
     options.AdminUserSettings = new AdminUserSettings
     {

DeepDrftAPI/Services/UnifiedTrackService.cs

@@ -25,6 +25,16 @@ public class UnifiedTrackService
     /// follows the marker and is what the CMS surfaces to the admin.
     /// </summary>
     internal const string CardinalityViolationMarker = "CARDINALITY_VIOLATION: ";
+
+    /// <summary>
+    /// Stable marker prefixed onto a duplicate-release rejection so the controller can map it to 409
+    /// Conflict, the same way <see cref="CardinalityViolationMarker"/> is mapped. Fires when an upload
+    /// with no explicit releaseId would create a release whose (title, artist) already exists in the
+    /// catalogue — the upload form is a create-new tool, never an edit/append path. The human-readable
+    /// detail follows the marker and is what the CMS surfaces to the admin.
+    /// </summary>
+    internal const string DuplicateReleaseMarker = "DUPLICATE_RELEASE: ";
+
     private readonly TrackContentService _contentTrackContentService;
     private readonly ITrackService _sqlTrackService;
     private readonly FileDb _fileDatabase;
@@ -64,33 +74,66 @@ public class UnifiedTrackService
         ReleaseType releaseType,
         ReleaseMedium medium,
         int trackNumber,
+        long? releaseId,
         CancellationToken ct)
     {
-        // Cardinality pre-check — BEFORE the vault write so a rejected over-limit add never orphans
-        // audio in the tracks vault. This is a READ-only peek (no release is created for an upload we
-        // may reject); the real FindOrCreateRelease still runs below for the accepted path. Only the
-        // find path can violate: a release that does not yet exist has zero tracks and admits its
-        // first. The guard is the general form `(liveCount + 1) > Max`, not Session/Mix-hardcoded, so
-        // a future bounded medium is covered by the same line.
+        // Resolve which release this track lands on BEFORE the vault write, so a rejected upload never
+        // orphans audio. Two paths:
+        //   - releaseId is null  → CREATE path: this is the first row of a submit. (title, artist) must
+        //     NOT already exist — the upload form creates new releases only. A pre-existing match is a
+        //     duplicate and is blocked (409).
+        //   - releaseId is set   → ATTACH path: rows 2..N of a within-batch multi-track Cut, attaching
+        //     to the release row 1 just created. No (title, artist) lookup — the release id is
+        //     authoritative — so the within-batch build is never mistaken for a pre-existing duplicate.
+        // Both paths run the cardinality guard `(liveCount + 1) > Max` (not Session/Mix-hardcoded, so a
+        // future bounded medium is covered by the same line).
+        ResolvedRelease? resolved = null;
         if (!string.IsNullOrWhiteSpace(album))
         {
-            var peek = await _sqlTrackService.GetReleaseByTitleAndArtist(album, artist, ct);
-            if (!peek.Success)
+            if (releaseId is { } attachId)
             {
-                var error = peek.Messages.FirstOrDefault()?.Message ?? "Unknown error";
-                _logger.LogError("UploadAsync: release peek failed for ({Album}, {Artist}): {Error}", album, artist, error);
-                return ResultContainer<TrackDto>.CreateFailResult($"Could not verify the release: {error}");
-            }
+                var attachPeek = await _sqlTrackService.GetReleaseByTitleAndArtist(album, artist, ct);
+                if (!attachPeek.Success)
+                {
+                    var error = attachPeek.Messages.FirstOrDefault()?.Message ?? "Unknown error";
+                    _logger.LogError("UploadAsync: release peek failed for ({Album}, {Artist}): {Error}", album, artist, error);
+                    return ResultContainer<TrackDto>.CreateFailResult($"Could not verify the release: {error}");
+                }
 
-            if (peek.Value is { } existing)
-            {
-                var cardinality = MediumRules.CardinalityOf(existing.Medium);
-                if (existing.TrackCount + 1 > cardinality.Max)
+                // The attach target must be the same release the natural key resolves to — a guard against
+                // a stale/forged releaseId pointing at a different (title, artist) than this row carries.
+                if (attachPeek.Value is not { } target || target.Id != attachId)
                 {
                     return ResultContainer<TrackDto>.CreateFailResult(
-                        $"{CardinalityViolationMarker}A {existing.Medium} release holds a single track; " +
-                        $"'{existing.Title}' already has one — edit the existing track or choose a different release.");
+                        $"{DuplicateReleaseMarker}The release this track should attach to could not be found. " +
+                        "Start the upload again.");
                 }
+
+                var cardinalityCheck = CheckCardinality(target);
+                if (cardinalityCheck is { } violation)
+                    return ResultContainer<TrackDto>.CreateFailResult(violation);
+
+                resolved = new ResolvedRelease(target.Id);
+            }
+            else
+            {
+                var peek = await _sqlTrackService.GetReleaseByTitleAndArtist(album, artist, ct);
+                if (!peek.Success)
+                {
+                    var error = peek.Messages.FirstOrDefault()?.Message ?? "Unknown error";
+                    _logger.LogError("UploadAsync: release peek failed for ({Album}, {Artist}): {Error}", album, artist, error);
+                    return ResultContainer<TrackDto>.CreateFailResult($"Could not verify the release: {error}");
+                }
+
+                // CREATE path: a pre-existing (title, artist) is a duplicate. Block it — the form never
+                // edits or appends to an existing release.
+                if (peek.Value is { } existing)
+                {
+                    return ResultContainer<TrackDto>.CreateFailResult(
+                        $"{DuplicateReleaseMarker}A release titled '{existing.Title}' by {existing.Artist} already " +
+                        "exists. The upload form creates new releases only — use the edit tools to change an existing one.");
+                }
+                // resolved stays null → FindOrCreateRelease below creates the release.
             }
         }
 
@@ -109,9 +152,12 @@ public class UnifiedTrackService
         // shared release (created on first sighting); an upload without one stays a loose track with
         // a null ReleaseId. Release-cardinal metadata (artist/genre/description/releaseDate/type/uploader)
         // rides on the release, not the track.
-        long? releaseId = null;
-        if (!string.IsNullOrWhiteSpace(album))
+        long? resolvedReleaseId = resolved?.Id;
+        if (!string.IsNullOrWhiteSpace(album) && resolvedReleaseId is null)
         {
+            // CREATE path only: the duplicate guard above proved no (title, artist) match exists, so this
+            // mints the release. (The attach path already resolved the id from the pre-check above and
+            // skips FindOrCreateRelease entirely, so a within-batch row never re-runs the natural-key find.)
             var releaseData = new ReleaseDto
             {
                 Title = album,
@@ -124,13 +170,13 @@ public class UnifiedTrackService
                 CreatedByUserId = createdByUserId,
             };
 
-            // Medium (like every other field in releaseData) applies only when this upload CREATES the
-            // release. FindOrCreateRelease returns an existing (title, artist) row untouched — the first
-            // upload's medium is authoritative. Do NOT "fix" this to overwrite the stored medium on a
-            // subsequent track add: medium is a release-level property, changed only via the edit path
-            // (PUT api/track/meta), never silently flipped by adding a track to an existing release.
+            // FindOrCreateRelease either creates a fresh release (WasCreated = true) or returns the
+            // row the concurrent winner just inserted (WasCreated = false). In the CREATE path the
+            // duplicate peek above already verified no pre-existing row exists — so WasCreated = false
+            // means we lost a concurrent-insert race. Treat that as the duplicate condition: reject
+            // rather than silently attaching, keeping the DB unique index as the final safety net.
             var releaseResult = await _sqlTrackService.FindOrCreateRelease(album, artist, releaseData, ct);
-            if (!releaseResult.Success || releaseResult.Value is null)
+            if (!releaseResult.Success)
             {
                 var error = releaseResult.Messages.FirstOrDefault()?.Message ?? "Unknown error";
                 _logger.LogError(
@@ -139,11 +185,21 @@ public class UnifiedTrackService
                 return ResultContainer<TrackDto>.CreateFailResult($"Track was uploaded but could not be saved: {error}");
             }
 
-            releaseId = releaseResult.Value.Id;
+            var (resolvedRelease, wasCreated) = releaseResult.Value;
+            if (!wasCreated)
+            {
+                // The winning concurrent upload created this release between our peek and our insert.
+                // Reject with the same marker the pre-flight peek uses so the controller maps it to 409.
+                return ResultContainer<TrackDto>.CreateFailResult(
+                    $"{DuplicateReleaseMarker}A release titled '{resolvedRelease.Title}' by {resolvedRelease.Artist} already " +
+                    "exists. The upload form creates new releases only — use the edit tools to change an existing one.");
+            }
+
+            resolvedReleaseId = resolvedRelease.Id;
         }
 
         var trackDto = TrackConverter.Convert(unpersisted);
-        trackDto.ReleaseId = releaseId;
+        trackDto.ReleaseId = resolvedReleaseId;
         trackDto.Release = null; // FK already resolved; Create must not re-resolve a detached graph.
 
         var saveResult = await _sqlTrackService.Create(trackDto);
@@ -166,6 +222,26 @@ public class UnifiedTrackService
         return saveResult;
     }
 
+    // The release a track resolved onto before the vault write. A null Id is the create path (mint
+    // below); a non-null Id is the attach path (a within-batch multi-track Cut row 2..N).
+    private readonly record struct ResolvedRelease(long Id);
+
+    // The cardinality guard shared by the attach path and (historically) the create path: a release
+    // already at its medium's Max rejects a further track. Returns the marker-prefixed rejection
+    // message, or null when the add is within limits. The create path never trips this (a brand-new
+    // release has zero tracks and admits its first), so only the attach path calls it today.
+    private static string? CheckCardinality(ReleaseDto release)
+    {
+        var cardinality = MediumRules.CardinalityOf(release.Medium);
+        if (release.TrackCount + 1 > cardinality.Max)
+        {
+            return $"{CardinalityViolationMarker}A {release.Medium} release holds a single track; " +
+                   $"'{release.Title}' already has one — edit the existing track or choose a different release.";
+        }
+
+        return null;
+    }
+
     /// <summary>
     /// Replace an existing track's audio in place: look up the SQL row, swap only the vault bytes
     /// keyed by its EntryKey, regenerate both waveform datums from the new audio, then write the

DeepDrftAPI/Startup.cs

@@ -47,9 +47,41 @@ namespace DeepDrftAPI
                 return db;
             });
 
+            // Upload staging directory. Large audio bodies (multi-hundred-MB WAVs) must never stage on
+            // the system temp mount — on the Linux host /tmp is a small RAM-backed tmpfs. We move BOTH
+            // on-disk copies of an upload off /tmp onto the data disk:
+            //   Layer 1 — the framework's multipart file-section buffer (FileBufferingReadStream), which
+            //             reads its directory from the ASPNETCORE_TEMP env var (falling back to
+            //             Path.GetTempPath()). Setting the var here, before the host runs, relocates it.
+            //   Layer 2 — the controller's own staging file, via the injected UploadStagingDirectory.
+            // Default location is a "staging" subdirectory beside the vaults; override with
+            // Upload:StagingPath in appsettings.json.
+            var uploadSettings = builder.Configuration.GetSection("Upload").Get<UploadSettings>();
+            var stagingPath = ResolveStagingPath(uploadSettings?.StagingPath, vaultPath);
+            Directory.CreateDirectory(stagingPath);
+
+            // AspNetCoreTempDirectory caches this value on first read and throws if the directory is
+            // absent, so set it (and create the dir) before any request is served.
+            Environment.SetEnvironmentVariable("ASPNETCORE_TEMP", stagingPath);
+            builder.Services.AddSingleton(new UploadStagingDirectory(stagingPath));
+
             return Task.CompletedTask;
         }
 
+        /// <summary>
+        /// Resolves the absolute upload-staging directory. An explicit <paramref name="configuredPath"/>
+        /// (from <c>Upload:StagingPath</c>) wins; otherwise it defaults to a <c>staging</c> subdirectory
+        /// under <paramref name="vaultPath"/> — on the data disk, never the system temp mount. Pure so
+        /// the "never <c>/tmp</c>" invariant is unit-testable without standing up the host.
+        /// </summary>
+        public static string ResolveStagingPath(string? configuredPath, string vaultPath)
+        {
+            var path = string.IsNullOrWhiteSpace(configuredPath)
+                ? Path.Combine(vaultPath, "staging")
+                : configuredPath;
+            return Path.GetFullPath(path);
+        }
+
         private static async Task InitializeTrackVault(FileDatabase fileDatabase)
         {
             if (!fileDatabase.HasVault(VaultConstants.Tracks))

DeepDrftAPI/appsettings.json

@@ -7,13 +7,17 @@
     }
   },
   "AllowedHosts": "*",
+  "Upload": {
+    "StagingPath": ""
+  },
   "CorsSettings": {
     "AllowedOrigins": [
       "https://localhost:12778",
       "https://localhost:5004",
       "http://localhost:5003",
       "https://deepdrft.com",
-      "https://www.deepdrft.com"
+      "https://www.deepdrft.com",
+      "https://app.deepdrft.com"
     ]
   },
   "ForwardedHeaders": {

DeepDrftAPI/environment/authblocks.example.json

@@ -8,7 +8,9 @@
     },
     "Email": {
       "Host": "smtp.your-provider.com",
-      "Token": "your-email-token-here"
+      "Token": "your-email-token-here",
+      "From": "noreply@yourdomain.com",
+      "TestInbox": "<sandbox-id>"
     },
     "Admin": {
       "UserName": "admin",

DeepDrftData/CLAUDE.md

@@ -55,6 +55,7 @@ Notable repository / service methods beyond the standard CRUD:
 - `TrackRepository.GetHomeStatsAsync` / `ITrackService.GetHomeStats`: Returns `HomeStatsDto` — cut track count, per-`ReleaseType` cut release counts (zero-suppressed), mix release count, total mix runtime seconds (null durations counted as 0; tracks under a soft-deleted release excluded). Used by `StatsController`.
 - `TrackRepository.UpdateDurationAsync` / `ITrackService.UpdateDuration`: Null-guarded duration write — skips rows where `DurationSeconds` is already set. Used by the one-time backfill (`POST api/track/duration/backfill`).
 - `TrackRepository.SetDurationAsync` / `ITrackService.SetDuration`: Unconditional duration overwrite — no null guard, always stamps the new value. Used by the replace-audio path (`POST api/track/{id:long}/replace-audio`) where the existing non-null duration must be overwritten with the new audio's value. Returns a fail result when zero rows are affected (track removed between lookup and write).
+- `ITrackService.FindOrCreateRelease` / `TrackManager.FindOrCreateRelease`: Finds the release row matching (title, artist) or creates one if none exists. Returns `ResultContainer<(ReleaseDto Release, bool WasCreated)>` — the `WasCreated` flag lets the upload CREATE path distinguish a freshly minted release from one returned because a concurrent upload won the insert race (the latter is treated as a duplicate and rejected with 409, not silently attached). `ITrackService.GetReleaseByTitleAndArtist` is the read-only counterpart used for the upload pre-flight check and the ATTACH-path validation.
 
 ## Phase 16 — anonymous telemetry domain (EventRepository / EventManager)
 

DeepDrftData/DeepDrftData.csproj

@@ -18,9 +18,9 @@
     </PackageReference>
     <!-- Npgsql 10.0.1 requires Microsoft.EntityFrameworkCore >= 10.0.4; keep in sync -->
     <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.1" />
-    <PackageReference Include="Cerebellum.NetBlocks" Version="10.3.30" />
-    <PackageReference Include="Cerebellum.BlazorBlocks.Data" Version="10.3.30" />
-    <PackageReference Include="Cerebellum.BlazorBlocks.Data.Postgres" Version="10.3.30" />
+    <PackageReference Include="Cerebellum.NetBlocks" Version="10.3.32" />
+    <PackageReference Include="Cerebellum.BlazorBlocks.Data" Version="10.3.35" />
+    <PackageReference Include="Cerebellum.BlazorBlocks.Data.Postgres" Version="10.3.35" />
   </ItemGroup>
 
   <ItemGroup>

DeepDrftData/ITrackService.cs

@@ -59,8 +59,12 @@ public interface ITrackService
     /// Resolve the release matching <paramref name="title"/> + <paramref name="artist"/>, creating
     /// one from <paramref name="releaseData"/> when none exists. Backs the upload flow's FK
     /// resolution so a track lands on a shared release rather than duplicating release-cardinal data.
+    /// The <c>WasCreated</c> flag in the result is <see langword="true"/> when a new row was inserted
+    /// and <see langword="false"/> when an existing row was found (including after a lost concurrent-insert
+    /// race). The CREATE path in <c>UnifiedTrackService.UploadAsync</c> uses this to turn a
+    /// "found existing" outcome into a duplicate rejection rather than a silent attach.
     /// </summary>
-    Task<ResultContainer<ReleaseDto>> FindOrCreateRelease(
+    Task<ResultContainer<(ReleaseDto Release, bool WasCreated)>> FindOrCreateRelease(
         string title, string artist, ReleaseDto releaseData, CancellationToken cancellationToken = default);
 
     /// <summary>

DeepDrftData/TrackManager.cs

@@ -164,14 +164,14 @@ public class TrackManager
         }
     }
 
-    public async Task<ResultContainer<ReleaseDto>> FindOrCreateRelease(
+    public async Task<ResultContainer<(ReleaseDto Release, bool WasCreated)>> FindOrCreateRelease(
         string title, string artist, ReleaseDto releaseData, CancellationToken cancellationToken = default)
     {
         try
         {
             var existing = await Repository.GetReleaseByTitleAndArtistAsync(title, artist, cancellationToken);
             if (existing is not null)
-                return ResultContainer<ReleaseDto>.CreatePassResult(TrackConverter.Convert(existing));
+                return ResultContainer<(ReleaseDto, bool)>.CreatePassResult((TrackConverter.Convert(existing), false));
 
             // The natural key (title + artist) is authoritative — override whatever the caller put
             // in releaseData so a typo upstream cannot create a release that won't be found again.
@@ -186,21 +186,21 @@ public class TrackManager
             try
             {
                 var added = await Repository.AddReleaseAsync(entity, cancellationToken);
-                return ResultContainer<ReleaseDto>.CreatePassResult(TrackConverter.Convert(added));
+                return ResultContainer<(ReleaseDto, bool)>.CreatePassResult((TrackConverter.Convert(added), true));
             }
             catch (ClassifiedDbException ex) when (ex.Error.Category == DbErrorCategory.UniqueViolation)
             {
                 // Concurrent upload inserted the same (title, artist) between our read and write.
-                // Re-query and return the winning row. Should not return null here since the
-                // constraint just fired, but re-throw if it does so the caller sees an error.
+                // Re-query and return the winning row as WasCreated=false so the caller (UploadAsync
+                // CREATE path) treats the lost race as a duplicate rather than silently attaching.
                 var race = await Repository.GetReleaseByTitleAndArtistAsync(title, artist, cancellationToken);
                 if (race is null) throw;
-                return ResultContainer<ReleaseDto>.CreatePassResult(TrackConverter.Convert(race));
+                return ResultContainer<(ReleaseDto, bool)>.CreatePassResult((TrackConverter.Convert(race), false));
             }
         }
         catch (Exception e)
         {
-            return ResultContainer<ReleaseDto>.CreateFailResult(e.Message);
+            return ResultContainer<(ReleaseDto, bool)>.CreateFailResult(e.Message);
         }
     }
 
@@ -302,13 +302,13 @@ public class TrackManager
             if (newTrack.Release is { } release && !string.IsNullOrWhiteSpace(release.Title))
             {
                 var resolved = await FindOrCreateRelease(release.Title, release.Artist, release);
-                if (!resolved.Success || resolved.Value is null)
+                if (!resolved.Success)
                 {
                     var error = resolved.Messages.FirstOrDefault()?.Message ?? "Failed to resolve release.";
                     return ResultContainer<TrackDto>.CreateFailResult(error);
                 }
 
-                newTrack.ReleaseId = resolved.Value.Id;
+                newTrack.ReleaseId = resolved.Value.Release.Id;
             }
 
             var added = await Repository.AddAsync(TrackConverter.Convert(newTrack));

DeepDrftManager/Components/App.razor

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
     <ImportMap />
     <link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
+    <meta name="robots" content="noindex,nofollow" />
     <HeadOutlet @rendermode="ServerMode" />
 </head>
 

DeepDrftManager/Components/Layout/CmsHomeLayout.razor

@@ -6,9 +6,23 @@
 
 <MudLayout>
     <MudAppBar Dense="true" Elevation="1" Color="Color.Primary">
-        <MudText Typo="Typo.h6" Class="ml-3" Style="font-family: 'DM Sans', sans-serif; letter-spacing: 0.05em;">
-            Deep Drft — Admin
-        </MudText>
+        <a href="/" class="mx-2">
+            <MudStack Row AlignItems="AlignItems.Center">
+                <MudImage Src="img/deepdrft-logo-l.webp" 
+                          Alt="Deep Drft Ornamental Logo Left"
+                          Width="24"
+                          Height="24 "
+                          Style="filter: invert(1);"/>
+                
+                <MudText Typo="Typo.button" Style="color: var(--deepdrft-white);">Deep DRFT Management</MudText>
+                
+                <MudImage Src="img/deepdrft-logo-r.webp" 
+                          Alt="Deep Drft Ornamental Logo Right"
+                          Width="24"
+                          Height="24"
+                          Style="filter: invert(1);"/>
+            </MudStack>
+        </a>
     </MudAppBar>
     <MudMainContent>
         <MudContainer MaxWidth="MaxWidth.Small"

DeepDrftManager/Components/Layout/CmsLayout.razor

@@ -1,5 +1,6 @@
 @inherits LayoutComponentBase
 @using DeepDrftShared.Client.Common
+@using AuthBlocksWeb.Components.Layout
 
 <MudThemeProvider IsDarkMode="false" Theme="@DeepDrftPalettes.Cms" />
 <MudPopoverProvider />
@@ -8,9 +9,27 @@
 
 <MudLayout>
     <MudAppBar Dense="true" Elevation="1" Color="Color.Primary">
-        <MudText Typo="Typo.h6" Class="ml-3" Style="font-family: 'DM Sans', sans-serif; letter-spacing: 0.05em;">
-            Deep Drft — Admin
-        </MudText>
+        <MudIconButton Icon="@Icons.Material.Filled.Menu"
+                       Color="Color.Inherit"
+                       Edge="Edge.Start"
+                       OnClick="ToggleDrawer" />
+        <a href="/" class="mx-2">
+            <MudStack Row AlignItems="AlignItems.Center">
+                <MudImage Src="img/deepdrft-logo-l.webp" 
+                          Alt="Deep Drft Ornamental Logo Left"
+                          Width="24"
+                          Height="24 "
+                          Style="filter: invert(1);"/>
+                
+                <MudText Typo="Typo.button" Style="color: var(--deepdrft-white);">Deep DRFT Management</MudText>
+                
+                <MudImage Src="img/deepdrft-logo-r.webp" 
+                          Alt="Deep Drft Ornamental Logo Right"
+                          Width="24"
+                          Height="24"
+                          Style="filter: invert(1);"/>
+            </MudStack>
+        </a>
         <MudSpacer />
         <MudTooltip Text="Catalogue">
             <MudIconButton Icon="@Icons.Material.Filled.Home"
@@ -18,6 +37,20 @@
                            Color="Color.Inherit" />
         </MudTooltip>
     </MudAppBar>
+    <MudDrawer @bind-Open="_drawerOpen" Elevation="2" Variant="DrawerVariant.Responsive" ClipMode="DrawerClipMode.Always">
+        <MudNavMenu>
+            <MudNavLink Href="/catalogue" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Dashboard">Catalogue</MudNavLink>
+            <MudNavLink Href="/releases" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.LibraryMusic">Releases</MudNavLink>
+            <MudNavLink Href="/tracks/upload" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.UploadFile">Upload</MudNavLink>
+            <UserAdminMenu />
+            <HierarchicalRoleAuthorizeView RolesList="@([SystemRoleConstants.UserAdmin])">
+                <Authorized>
+                    <MudNavLink Href="/useradmin/users/new" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.PersonAdd">Provision User</MudNavLink>
+                </Authorized>
+            </HierarchicalRoleAuthorizeView>
+            <AccountNavMenu />
+        </MudNavMenu>
+    </MudDrawer>
     <MudMainContent Class="pt-14 pb-8">
         <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
             @Body
@@ -25,6 +58,12 @@
     </MudMainContent>
 </MudLayout>
 
+@code {
+    private bool _drawerOpen = true;
+
+    private void ToggleDrawer() => _drawerOpen = !_drawerOpen;
+}
+
 <div id="blazor-error-ui" data-nosnippet>
     An unhandled error has occurred.
     <a href="." class="reload">Reload</a>

DeepDrftManager/Components/NotFound.razor

@@ -1,6 +1,6 @@
 @page "/404"
 
-<PageTitle>SkipperHaven - Page Not Found</PageTitle>
+<PageTitle>Deep DRFT Management - Page Not Found</PageTitle>
 
 <MudText Typo="Typo.h1" Color="Color.Primary">
     404 - Resource Not Found 

DeepDrftManager/Components/Pages/Home.razor

@@ -1,7 +1,7 @@
 @page "/"
 @layout Layout.CmsHomeLayout
 
-<PageTitle>Deep Drft — Admin</PageTitle>
+<PageTitle>Deep DRFT Management</PageTitle>
 
 <HierarchicalRoleAuthorizeView>
     <Authorized>

DeepDrftManager/Components/Pages/Index.razor

@@ -7,7 +7,7 @@
 @inject ICmsReleaseService CmsReleaseService
 @inject ILogger<Index> Logger
 
-<PageTitle>DeepDrft CMS</PageTitle>
+<PageTitle>Deep DRFT Management - Catalogue</PageTitle>
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
     <MudText Typo="Typo.h3" Class="mb-6">Catalogue</MudText>

DeepDrftManager/Components/Pages/Tracks/BatchEdit.razor

@@ -14,7 +14,7 @@
 @inject IDialogService DialogService
 @inject ILogger<BatchEdit> Logger
 
-<PageTitle>Edit Release — DeepDrft CMS</PageTitle>
+<PageTitle>Edit Release — Deep DRFT Management</PageTitle>
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
     <MudText Typo="Typo.h4" GutterBottom="true">Edit Release</MudText>
@@ -146,6 +146,9 @@
     private string _releaseDate = string.Empty;
     private ReleaseType _releaseType = ReleaseType.Single;
     private ReleaseMedium _medium = ReleaseMedium.Cut;
+    // The id of the release being edited. New tracks added in this session attach to it via the upload
+    // service's releaseId (ATTACH) path, so they are not rejected as a pre-existing-(title,artist) duplicate.
+    private long? _releaseId;
 
     // The medium selector drives ReleaseType visibility and is persisted on save: every UpdateAsync /
     // UploadTrackAsync call below passes _medium, and PUT api/track/meta resets ReleaseType to its
@@ -214,6 +217,10 @@
         }
 
         var release = tracks[0].Release;
+        // The release being edited already exists, so any new track added here ATTACHES to it (the upload
+        // service's releaseId path) rather than taking the CREATE path, which would reject it as a
+        // duplicate (title, artist). Fall back to the track's own ReleaseId if the nav is not populated.
+        _releaseId = release?.Id ?? tracks[0].ReleaseId;
         _albumName = albumName;
         _artist = release?.Artist ?? string.Empty;
         _genre = release?.Genre ?? string.Empty;
@@ -592,6 +599,7 @@
                             _releaseType,
                             trackNumber,
                             _medium,
+                            _releaseId,
                             progress);
 
                         if (!uploadResult.Success || uploadResult.Value is null)

DeepDrftManager/Components/Pages/Tracks/BatchUpload.razor

@@ -12,7 +12,7 @@
 @inject ISnackbar Snackbar
 @inject ILogger<BatchUpload> Logger
 
-<PageTitle>Upload Release — DeepDrft CMS</PageTitle>
+<PageTitle>Upload Release — Deep DRFT Management</PageTitle>
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
     <MudText Typo="Typo.h4" GutterBottom="true">Upload Release</MudText>
@@ -129,6 +129,11 @@
     // Set true once the admin has acknowledged the missing-hero warning, so a second submit proceeds.
     private bool _heroWarningAcknowledged;
 
+    // Captured once at component initialization on the live interactive circuit, while the token
+    // is known-good, so a mid-session token expiry at submit time cannot discard a long-composed
+    // release. Only assigned when the id parses successfully.
+    private long? _createdByUserId;
+
     private string _albumName = string.Empty;
     private string _artist = string.Empty;
     private string _genre = string.Empty;
@@ -156,6 +161,19 @@
         }
     }
 
+    protected override async Task OnInitializedAsync()
+    {
+        // Capture the user id once at load, while the token is known-good. The CMS host runs with
+        // prerender: false (InteractiveServer), so this is the single init pass — auth state is
+        // fully available. The page is [Authorize]-gated, so the parse should always succeed.
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        var userIdValue = authState.User.FindFirstValue(ClaimTypes.NameIdentifier);
+        if (long.TryParse(userIdValue, out var userId))
+        {
+            _createdByUserId = userId;
+        }
+    }
+
     // Switching to a single-track medium collapses any multi-track selection to the first row so the
     // single-track invariant holds before submit. The predicate reads the same MediumRules cardinality
     // declaration the upload service enforces, so the form and the domain cannot drift.
@@ -275,13 +293,12 @@
             }
         }
 
-        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
-        var userIdValue = authState.User.FindFirstValue(ClaimTypes.NameIdentifier);
-        if (!long.TryParse(userIdValue, out var createdByUserId))
+        if (_createdByUserId is not long createdByUserId)
         {
-            // The page is gated by [Authorize] under the Admin role, so a missing or
-            // unparseable id here is a configuration bug, not normal client state.
-            Logger.LogError("Authenticated user has no parseable NameIdentifier claim: {Value}", userIdValue);
+            // _createdByUserId is set at component initialization from the authenticated principal.
+            // A null here means the id was unavailable even at load — a genuine configuration bug,
+            // since the page is [Authorize]-gated.
+            Logger.LogError("User id was not captured at initialization — NameIdentifier claim missing or unparseable.");
             _errorMessage = "Your session is missing a valid identifier. Please sign in again.";
             return;
         }
@@ -298,6 +315,29 @@
             return;
         }
 
+        // Pre-flight duplicate guard (primary block): the upload form creates new releases only, so a
+        // (title, artist) that already exists in the catalogue is refused BEFORE any bytes transfer —
+        // the admin is not surprised at the end of a long upload. The server backstops this on the
+        // create path, but checking here keeps the failure fast and visible. The values passed match
+        // exactly what the upload sends (untrimmed _albumName/_artist) so the pre-flight and the server
+        // agree on the match. A check failure (API unreachable) blocks rather than proceeding blind.
+        var duplicateCheck = await CmsTrackService.GetExistingReleaseAsync(_albumName, _artist);
+        if (!duplicateCheck.Success)
+        {
+            var checkError = duplicateCheck.Messages.FirstOrDefault()?.Message ?? "Unknown error";
+            _errorMessage = $"Could not verify the release name: {checkError}";
+            Snackbar.Add(_errorMessage, Severity.Error);
+            return;
+        }
+
+        if (duplicateCheck.Value is { } existing)
+        {
+            _errorMessage = $"A release titled '{existing.Title}' by {existing.Artist} already exists. "
+                + "The upload form creates new releases only — use the edit tools to change an existing one.";
+            Snackbar.Add(_errorMessage, Severity.Error);
+            return;
+        }
+
         // For single-track media (Session/Mix) the track name is derived from the Release Name —
         // no separate Track Name input is shown. Sync here so the stored name always matches.
         if (MediumRules.CardinalityOf(_medium).IsSingleTrack && _tracks.Count > 0)
@@ -327,6 +367,11 @@
             }
 
             int succeeded = 0, failed = 0;
+            // Within-batch attach: row 1 creates the release (no releaseId → CREATE path); once it
+            // succeeds we carry its ReleaseId into rows 2..N so they ATTACH to the just-created release
+            // rather than tripping the server's pre-existing-duplicate block. Only a multi-track Cut
+            // reaches row 2 (single-track media collapse to one row).
+            long? batchReleaseId = null;
             for (int i = 0; i < _tracks.Count; i++)
             {
                 var row = _tracks[i];
@@ -375,6 +420,7 @@
                         _releaseType,
                         trackNumber,
                         _medium,
+                        batchReleaseId,
                         progress);
 
                     if (!result.Success || result.Value is null)
@@ -387,6 +433,15 @@
                     }
                     else
                     {
+                        // Capture the release id created by the first successful row so subsequent rows
+                        // attach to it (the within-batch multi-track Cut path). Only set once — later
+                        // rows must not overwrite it. A null ReleaseId here (loose track) leaves it null,
+                        // which is correct: a release-less upload has no within-batch release to attach to.
+                        if (batchReleaseId is null && result.Value.ReleaseId is { } createdReleaseId)
+                        {
+                            batchReleaseId = createdReleaseId;
+                        }
+
                         // The upload endpoint does not accept an imagePath, so link the cover art with
                         // a follow-up metadata update — same two-step pattern BatchEdit uses.
                         if (_imagePath is { } imgPath)
@@ -487,7 +542,13 @@
             }
             else
             {
-                Snackbar.Add($"Uploaded {succeeded} track(s); {failed} failed — review errors below.", Severity.Warning);
+                // Surface the actual reason, not just counts — a server rejection (duplicate, cardinality)
+                // relays a human-readable message via row.ErrorMessage. Show the first failure's reason so
+                // the admin sees WHY without scanning the rows; the per-row errors remain as detail.
+                var firstError = _tracks.FirstOrDefault(t => t.Status == BatchRowStatus.Failed)?.ErrorMessage;
+                var reason = string.IsNullOrWhiteSpace(firstError) ? "review errors below" : firstError;
+                _errorMessage = succeeded == 0 ? reason : $"{succeeded} uploaded; {failed} failed: {reason}";
+                Snackbar.Add($"Uploaded {succeeded} track(s); {failed} failed — {reason}", Severity.Warning);
                 // Stay on page so the admin can see the failed rows.
             }
         }

DeepDrftManager/Components/Pages/Tracks/CmsMixBrowser.razor

@@ -18,7 +18,7 @@
 }
 else
 {
-    <PageTitle>Mixes — DeepDrft CMS</PageTitle>
+    <PageTitle>Mixes — Deep DRFT Management</PageTitle>
 
     <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
         <MudButton Variant="Variant.Text"

DeepDrftManager/Components/Pages/Tracks/CmsSessionBrowser.razor

@@ -19,7 +19,7 @@
 }
 else
 {
-    <PageTitle>Sessions — DeepDrft CMS</PageTitle>
+    <PageTitle>Sessions — Deep DRFT Management</PageTitle>
 
     <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
         <MudButton Variant="Variant.Text"

DeepDrftManager/Components/Pages/Tracks/Releases.razor

@@ -11,7 +11,7 @@
 @inject NavigationManager NavigationManager
 @attribute [Authorize]
 
-<PageTitle>Releases — DeepDrft CMS</PageTitle>
+<PageTitle>Releases — Deep DRFT Management</PageTitle>
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="mt-8">
     <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mb-4">

DeepDrftManager/Components/Routes.razor

@@ -3,7 +3,7 @@
         NotFoundPage="typeof(NotFound)">
     <Found Context="routeData">
         <AuthorizeRouteView RouteData="routeData"
-                            DefaultLayout="typeof(Layout.CmsLayout)">
+                            DefaultLayout="@_currentLayout">
             <NotAuthorized Context="authState">
                 @if (authState.User.Identity?.IsAuthenticated == true)
                 {
@@ -18,3 +18,20 @@
         <FocusOnNavigate RouteData="routeData" Selector="h1" />
     </Found>
 </Router>
+
+@code {
+    [CascadingParameter] private Task<AuthenticationState>? AuthenticationState { get; set; }
+
+    private Type _currentLayout = typeof(Layout.CmsHomeLayout);
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (AuthenticationState is not null)
+        {
+            var authState = await AuthenticationState;
+            _currentLayout = authState.User.Identity?.IsAuthenticated == true
+                ? typeof(Layout.CmsLayout)
+                : typeof(Layout.CmsHomeLayout);
+        }
+    }
+}

DeepDrftManager/DeepDrftManager.csproj

@@ -8,7 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="MudBlazor" Version="8.15.0" />
-    <PackageReference Include="Cerebellum.AuthBlocks.Web" Version="10.3.33" />
+    <PackageReference Include="Cerebellum.AuthBlocks.Web" Version="10.3.39" />
   </ItemGroup>
 
   <ItemGroup>

DeepDrftManager/Services/CmsTrackService.cs

@@ -68,6 +68,7 @@ public class CmsTrackService : ICmsTrackService
         ReleaseType releaseType,
         int trackNumber,
         ReleaseMedium medium = ReleaseMedium.Cut,
+        long? releaseId = null,
         IProgress<long>? progress = null,
         CancellationToken ct = default)
     {
@@ -91,6 +92,9 @@ public class CmsTrackService : ICmsTrackService
         // The upload endpoint binds "medium" to the created release's ReleaseMedium (defaulting to Cut
         // for an unrecognised value). Authoritative only when this upload creates the release.
         multipart.Add(new StringContent(medium.ToString()), "medium");
+        // releaseId present → ATTACH (rows 2..N of a within-batch Cut); absent → CREATE (server rejects a
+        // pre-existing (title, artist) as a duplicate). Only sent when set so the form omits it on row 1.
+        if (releaseId is { } rid) multipart.Add(new StringContent(rid.ToString()), "releaseId");
 
         var send = await phase.SendAsync(UploadPath, multipart, $"upload of {trackName}");
         if (send.Response is not { } response)
@@ -474,6 +478,53 @@ public class CmsTrackService : ICmsTrackService
         }
     }
 
+    public async Task<ResultContainer<ReleaseDto?>> GetExistingReleaseAsync(
+        string title, string artist, CancellationToken ct = default)
+    {
+        var client = _httpClientFactory.CreateClient(ContentCmsClientName);
+        var query = $"api/track/release/exists?title={Uri.EscapeDataString(title)}&artist={Uri.EscapeDataString(artist)}";
+
+        HttpResponseMessage response;
+        try
+        {
+            response = await client.GetAsync(query, ct);
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Content API call failed for release existence check ({Title}, {Artist})", title, artist);
+            return ResultContainer<ReleaseDto?>.CreateFailResult("Content API is unreachable.");
+        }
+
+        using (response)
+        {
+            // 404 is the not-found (null) case, not a failure — no release matches this (title, artist).
+            if (response.StatusCode == HttpStatusCode.NotFound)
+            {
+                return ResultContainer<ReleaseDto?>.CreatePassResult(null);
+            }
+
+            if (!response.IsSuccessStatusCode)
+            {
+                _logger.LogError("Content API release existence check failed for ({Title}, {Artist}): {Status}",
+                    title, artist, (int)response.StatusCode);
+                return ResultContainer<ReleaseDto?>.CreateFailResult("Failed to check for an existing release.");
+            }
+
+            ReleaseDto? release;
+            try
+            {
+                release = await response.Content.ReadFromJsonAsync<ReleaseDto>(ct);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Failed to deserialize ReleaseDto from release existence check");
+                return ResultContainer<ReleaseDto?>.CreateFailResult("Content API returned an unexpected response.");
+            }
+
+            return ResultContainer<ReleaseDto?>.CreatePassResult(release);
+        }
+    }
+
     private static readonly HashSet<string> KnownImageMimeTypes = new(StringComparer.OrdinalIgnoreCase)
     {
         "image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml", "image/bmp"

DeepDrftManager/Services/ICmsTrackService.cs

@@ -25,6 +25,10 @@ public interface ICmsTrackService
     /// sets Content-Length and is the denominator for <paramref name="progress"/>, which reports cumulative
     /// bytes pushed to the wire. Each progress tick also resets the idle/heartbeat upload timeout, so a
     /// stalled connection aborts without a fixed total-duration cap.
+    /// <paramref name="releaseId"/> distinguishes the two rows of a within-batch multi-track Cut: null on
+    /// the first row (CREATE — the server rejects a pre-existing (title, artist) as a duplicate) and the
+    /// id returned by that first row on rows 2..N (ATTACH — the server skips the duplicate check and adds
+    /// the track to the release the batch just created).
     /// </summary>
     Task<ResultContainer<TrackDto>> UploadTrackAsync(
         Stream wavStream,
@@ -42,9 +46,20 @@ public interface ICmsTrackService
         ReleaseType releaseType,
         int trackNumber,
         ReleaseMedium medium = ReleaseMedium.Cut,
+        long? releaseId = null,
         IProgress<long>? progress = null,
         CancellationToken ct = default);
 
+    /// <summary>
+    /// Upload-form pre-flight: returns the existing release whose exact (title, artist) matches, or null
+    /// when none exists. Backs the duplicate block the form runs BEFORE transferring bytes, so the admin
+    /// is not surprised at the end of a long upload. A 404 from the API is the not-found (null) case, not
+    /// a failure. The match semantics are the API's <c>GetReleaseByTitleAndArtist</c> — the same read the
+    /// server backstop uses — so the pre-flight and the backstop agree.
+    /// </summary>
+    Task<ResultContainer<ReleaseDto?>> GetExistingReleaseAsync(
+        string title, string artist, CancellationToken ct = default);
+
     /// <summary>
     /// Delete a track via the Content API, which removes the SQL row then the vault entry.
     /// Maps a 404 to a "Track not found." failure.

DeepDrftManager/wwwroot/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

DeepDrftModels/DeepDrftModels.csproj

@@ -7,8 +7,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-      <PackageReference Include="Cerebellum.NetBlocks" Version="10.3.30" />
-      <PackageReference Include="Cerebellum.BlazorBlocks.Models" Version="10.3.30" />
+      <PackageReference Include="Cerebellum.NetBlocks" Version="10.3.32" />
+      <PackageReference Include="Cerebellum.BlazorBlocks.Models" Version="10.3.35" />
     </ItemGroup>
 
 </Project>

DeepDrftPublic.Client/CLAUDE.md

@@ -10,17 +10,18 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream
 
 ## Actual structure
 
-- `Pages/`: Routable components. `Home.razor` (hero/about), `SessionDetail.razor` (session detail — hero-dominant overlay composition rendered via `<ReleaseHeroOverlay>`: large background hero image with darkening gradient shim, cover thumbnail + title + play button overlaid near the hero's bottom, genre/date/share overlaid at the top; uses `MudContainer MaxWidth="Large"`; **does not compose `ReleaseDetailScaffold`** — `PlayTrack` is wired directly in its own `@code` block; mounts `<WaveformVisualizer>` ambient engine + `<WaveformVisualizerControlPopover>` directly; renders `<ReleaseDescription>` below the hero for the release's description blurb), `MixDetail.razor` (mix detail — composes `ReleaseDetailScaffold` with `TopRightAction` lava-lamp `<WaveformVisualizerControlPopover>`; hero+meta rendered via `<ReleaseHeroOverlay Class="mix-hero">` in the scaffold's `Hero` slot with `ShowHeader="false"` suppressing the duplicate masthead; square ~600px cover-as-background with metadata overlaid; full-bleed `<WaveformVisualizer>` is the mode-A centerpiece mounted by the page directly; renders `<ReleaseDescription>` below the hero for the release's description blurb), `CutDetail.razor` (album detail — composes `ReleaseDetailScaffold` with the `Ambient` slot carrying `<WaveformVisualizer>` + `<WaveformVisualizerControlPopover>` for mode-B ambient layer; renders `<ReleaseDescription>` below the hero for the release's description blurb; each track row carries a per-track `<SharePopover EntryKey="@track.EntryKey" />` aligned far-right as the last flex child of `.cut-detail-track-row`), `FramePlayer.razor` (embeddable iframe player at `/FramePlayer`, uses `EmbedLayout`; two mutually-exclusive modes via query params: `TrackEntryKey` stages a single track as before; `ReleaseEntryKey` resolves the release's ordered tracks via `FramePlayerViewModel`, stages track 0 via `PlayerService.StageTrack`, and arms the queue via `Queue.Arm` — no JS interop in either path, so both run safely during prerender; the first play gesture in `AudioPlayerBar` routes through `Queue.Start()` which streams the current track and clears the armed state; release embeds expose queue skip-prev/next navigation in the player bar while single-track embeds show none; track-title links open in a new tab so the iframe keeps playing). **No demo pages** (`Counter.razor`, `Weather.razor` do not exist).
-- `Layout/`: `MainLayout.razor` (root layout, wraps in `AudioPlayerProvider`, hosts theme switcher), `DeepDrftMenu.razor` (branded menu bar), `NavMenu.razor` (nav list), `Pages.cs` (centralised nav index — `MenuPages` for header, `AllPages` for exhaustive list).
+- `Pages/`: Routable components. `Home.razor` (hero/about), `SessionDetail.razor` (session detail — hero-dominant overlay composition rendered via `<ReleaseHeroOverlay>`: large background hero image with darkening gradient shim, cover thumbnail + title + play button overlaid near the hero's bottom, genre/date/share overlaid at the top; uses `MudContainer MaxWidth="Large"` with `.dd-detail-fill` so the ambient visualizer reads full-screen and the footer is pushed below the fold; **does not compose `ReleaseDetailScaffold`** — `PlayTrack` is wired directly in its own `@code` block; mounts `<WaveformVisualizer>` ambient engine + `<WaveformVisualizerControlPopover>` directly; **Phase 20:** top action row carries `<TheaterModeToggle Available="ShowTheaterToggle" />` immediately left of the lava-lamp popover in a `.dd-detail-top-actions` cluster — the toggle only appears when this page's release is the one currently playing (`ShowTheaterToggle` from `ReleaseDetailBase` folds in the subsystem gate + release-playing check); hero overlay and `<ReleaseDescription>` are wrapped in a `.dd-theater-collapsible` / `.dd-theater-collapsible-inner` pair that gets `.dd-theater-collapsed` when `IsContentHidden` is true — eased collapse via `grid-template-rows: 1fr → 0fr` + `opacity` + `visibility` (no hard `@if` pop); renders `<ReleaseDescription>` below the hero for the release's description blurb), `MixDetail.razor` (mix detail — composes `ReleaseDetailScaffold` with `TopRightAction` lava-lamp `<WaveformVisualizerControlPopover>`; hero+meta rendered via `<ReleaseHeroOverlay Class="mix-hero">` in the scaffold's `Hero` slot with `ShowHeader="false"` suppressing the duplicate masthead; square ~600px cover-as-background with metadata overlaid; full-bleed `<WaveformVisualizer>` is the mode-A centerpiece mounted by the page directly; the foreground container carries `.dd-detail-fill`; renders `<ReleaseDescription>` below the hero for the release's description blurb; **Phase 20:** `TopRightAction` slot holds `<TheaterModeToggle Available="ShowTheaterToggle" />` + lava-lamp popover in a `.dd-detail-top-actions` cluster — toggle only appears when this Mix is the playing release; hero overlay and description are wrapped in `.dd-theater-collapsible` / `.dd-theater-collapsed` eased collapse driven by `IsContentHidden`), `CutDetail.razor` (album detail — composes `ReleaseDetailScaffold` with the `Ambient` slot carrying `<WaveformVisualizer>` + `<WaveformVisualizerControlPopover>` for mode-B ambient layer; the scaffold is wrapped in a `.dd-detail-fill` div; renders `<ReleaseDescription>` below the hero for the release's description blurb; each track row carries a per-track `<SharePopover EntryKey="@track.EntryKey" />` aligned far-right as the last flex child of `.cut-detail-track-row`; **Phase 20:** `TopRightAction` slot holds `<TheaterModeToggle Available="ShowTheaterToggle" />` + lava-lamp popover in a `.dd-detail-top-actions` cluster — toggle only appears when this Cut is the playing release; header and track-list body are each wrapped in a `.dd-theater-collapsible` / `.dd-theater-collapsed` eased collapse driven by `IsContentHidden`, replacing the prior hard `@if`), `FramePlayer.razor` (embeddable iframe player at `/FramePlayer`, uses `EmbedLayout`; two mutually-exclusive modes via query params: `TrackEntryKey` stages a single track as before; `ReleaseEntryKey` resolves the release's ordered tracks via `FramePlayerViewModel`, stages track 0 via `PlayerService.StageTrack`, and arms the queue via `Queue.Arm` — no JS interop in either path, so both run safely during prerender; the first play gesture in `AudioPlayerBar` routes through `Queue.Start()` which streams the current track and clears the armed state; release embeds expose queue skip-prev/next navigation in the player bar while single-track embeds show none; track-title links open in a new tab so the iframe keeps playing). **No demo pages** (`Counter.razor`, `Weather.razor` do not exist).
+- `Layout/`: `MainLayout.razor` (root layout, wraps in `AudioPlayerProvider`, hosts theme switcher), `DeepDrftMenu.razor` (branded menu bar), `NavMenu.razor` (nav list), `Pages.cs` (centralised nav index — `MenuPages` for header, `AllPages` for exhaustive list), `DeepDrftFooter.razor` (site footer — logo, nav links, copyright; contains a "Privacy" button that opens a screen-centered tinted modal via `MudOverlay` (`DarkBackground="true"`, `Modal="true"`) carrying the anonymous-listener privacy note; trigger-button styling in the co-located `DeepDrftFooter.razor.css`, overlay chrome in the global `deepdrft-styles.css`; follows the `QueueOverlay`/`WaveformVisualizerControlPopover` `MudOverlay` idiom — scrim-click closes, panel stops propagation).
 - `Controls/`: Reusable components.
   - `TrackCard.razor`: Individual track display (image, name, artist, album, genre, release date). Play/pause icon controlled via `IsPaused` parameter.
   - `TracksGallery.razor`: Responsive grid of `TrackCard` items (MudBlazor `MudGrid` with breakpoints). Fully controlled by parent; derives active-track state from cascaded player service.
   - `AppNavLink.razor`: Nav link with active-page highlight.
   - `AudioPlayerProvider.razor`: Cascading host for `IStreamingPlayerService`. Everything inside it gets the player via `[CascadingParameter]`.
-  - `StreamNowButton.razor`: Reusable streaming-trigger button. Fetches a random track, warms the AudioContext (Safari gesture requirement), and starts streaming via `IStreamingPlayerService`. Accepts `ButtonClass` and `ButtonLabel` for distinct visual presentations; `OnStreamStarted` EventCallback for post-stream side effects (e.g., mobile menu close).
-  - `AudioPlayerBar.razor`: Dock UI at the bottom (play/pause/seek/volume).
+  - `StreamNowButton.razor`: Reusable streaming-trigger button. Fetches a random track, warms the AudioContext (Safari gesture requirement), and starts streaming — routes through `IQueueService.PlayTrack` (deque PLAY semantics) when the queue cascade is present, falls back to `IStreamingPlayerService.SelectTrackStreaming` when absent. Accepts `ButtonClass` and `ButtonLabel` for distinct visual presentations; `OnStreamStarted` EventCallback for post-stream side effects (e.g., mobile menu close).
+  - `AudioPlayerBar.razor`: Dock UI at the bottom (play/pause/seek/volume). In Fixed (embed) mode, renders an always-shown read-only queue panel below the controls when `ShowFixedPanel && _fixedPanelOpen` (release embeds only; single-track embeds stay panel-free). The Queue button in Fixed mode toggles `_fixedPanelOpen` and triggers a `postHeight` call via `embed-frame.ts` so the host page can resize the outer iframe. TypeScript counterpart for the resize handshake: `DeepDrftPublic/Interop/embed/embed-frame.ts` — reads `EmbedId` from `window.location.search`, exports `postHeight(element)` which measures the player element and posts `{type:"deepdrft-embed-resize", height, embedId?}` to `window.parent`; no-ops when not framed (compiled output gitignored). **Phase 20:** injects `WaveformVisualizerControlState` and subscribes to `Changed` (added alongside the existing `IPlayerService.StateChanged` subscription — same reference-guard + dispose pattern); mounts `<NowShowingPanel Release="CurrentTrack.Release" />` above the transport controls when `CurrentTrack?.Release is not null` — the panel is kept **always mounted** whenever a release is playing and wrapped in the shared `.dd-theater-collapsible` / `.dd-theater-collapsible-inner` pair; it gets `.dd-theater-collapsed` when Theater Mode is OFF, so the bar grows/shrinks via the same eased collapse that the detail-page content regions use rather than popping via `@if` (Phase 20 Wave 2).
   - `AudioPlayerBar/PlayerControls.razor`: Play/pause/stop buttons in the transport zone. Renders via `<PlayStateIcon>`. In embedded (`Fixed`) mode, skip-previous and skip-next render when `!Fixed || HasPrevious || HasNext` — so a release embed (which has a queue) shows forward/back navigation while a single-track embed (no queue) hides them; the Stop button is hidden in all embed contexts (`!Fixed` only).
   - `AudioPlayerBar/TrackMetaLabel.razor`: Now-playing track-title + artist row. Takes `[Parameter] bool Fixed` (passed from `AudioPlayerBar.razor`). When `Fixed` (embedded iframe), the track-title anchor renders with `target="_blank" rel="noopener noreferrer"` so clicking it opens the release detail page in a new tab; the docked (non-embedded) player keeps same-tab nav. When no release is attached the title renders unlinked in both modes.
+  - `AudioPlayerBar/NowShowingPanel.razor`: Phase 20 "now showing" presentational band rendered by `AudioPlayerBar` **only when** `VisualizerControlState.TheaterMode && CurrentTrack?.Release is not null`. Carries the release identity the hidden detail page would otherwise show: cover art thumbnail (`deepdrft-track-detail-cover-art` / `deepdrft-gradient-soft-secondary` placeholder), release title linked via `ReleaseRoutes.DetailHref(Release)`, and a release-mode `SharePopover` (`ReleaseEntryKey` + `ReleaseMedium`) wrapped in `.dd-accent-icon`. `[Parameter, EditorRequired] ReleaseDto Release` — non-null by the bar's mount gate. Purely presentational: owns no player logic, no Theater state, and no data fetch. Layout CSS lives in `AudioPlayerBar.razor.css` (`.now-showing` / `.now-showing-cover` / `.now-showing-cover-art` / `.now-showing-cover-placeholder` / `.now-showing-title-link` / `.now-showing-title` / `.now-showing-share`); all surface/text binds `--deepdrft-page-*` theme-aware aliases — no new dark overrides.
   - `AudioPlayerBar/PlayStateIcon.razor`: Icon button encapsulating service subscription + transport-state icon selection. Injects `IPlayerService`, subscribes to `StateChanged`, calls `PlaybackIcons.Resolve()` to determine icon and active state.
   - `AudioPlayerBar/LevelMeterFab.razor`: Floating-action button replacing the static FAB in the minimized dock. Renders a continuous vertical fill inside the music-note silhouette that tracks live audio level (0–100%), with fixed three-zone gradient (green 0–60%, yellow 60–85%, orange 85–100%). Note silhouette always visible at 25% opacity; idle when paused/stopped. Reuses spectrum-callback infrastructure.
   - `SpectrumVisualizer.razor`: Bar-graph spectrum display, driven by `getSpectrumData` JS callback.
@@ -29,6 +30,7 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream
   - `WaveformVisualizer.razor`: The single WebGL2 lava-lamp visualizer engine. Hosts the waveform of whatever track is currently playing/selected. Three hosting modes: mode A (Mix detail — full-bleed centerpiece), mode B (Cut/Session detail — ambient layer behind hero+content via `ReleaseDetailScaffold`'s `Ambient` slot), mode C (NowPlaying hero panel — full-bleed background for the home hero's right side, mounted by `NowPlaying.razor` inside `.np-visualizer-bg`). `[Parameter] bool Fill` switches from fixed-viewport positioning to container-relative sizing (CSS-only; the renderer is identical in both modes). The bridge resolves the current track's `EntryKey` and re-fetches the high-res datum on track change. Subscribes to `WaveformVisualizerControlState.Changed` and pushes each updated dial to the WebGL module via JS interop. Follows the live playing track (keys on host `TrackId` match OR shared host `ReleaseEntryKey`).
   - `WaveformVisualizerControls.razor`: The waveform visualizer control panel (content hosted by `WaveformVisualizerControlPopover`). Phase 15 re-layout: a deterministic **three-row sectioned layout** encoding the visualizer's two subsystems. Row 1 (MODE, always visible): two iconographic lamp toggles (lava on/off, waveform on/off) left-aligned + collisions knob (conditional — only when both subsystems on) + color knob pinned far-right. Row 2 (LAVA, visible only when `LavaEnabled`): "LAVA:" section label + Gravity / Heat / FluidAmount / FluidViscosity knobs. Row 3 (WAVE, visible only when `WaveformEnabled`): "WAVE:" section label + scroll-speed `MudSlider` (not a knob) + width knob pinned far-right. Total: two lamp toggles, seven `RadialKnob`s, one `MudSlider`. Colour principle: lamp toggles / knob arcs / slider are green (`Color.Primary` — interactive); section labels / knob caption icons are light (static). Each control has a playful `MudTooltip`. `[Parameter] bool PanelChrome` scopes panel chrome (NowPlayingCard look — square corners, lighter-navy, thin border) to the popover mount; chrome classes live in the global `deepdrft-styles.css` (CSS isolation cannot reach portaled overlay content). `[Parameter] bool Visible` gates the rows via `@if` while the container holds reserved min-height. Owns no JS interop: mutates the injected `WaveformVisualizerControlState` and raises `Changed`. No control is a seek surface (read-only contract).
   - `WaveformVisualizerControlPopover.razor`: Pairs the lava-lamp icon button with `WaveformVisualizerControls` as a **screen-centered tinted modal** (Phase 15). The primitive is `MudOverlay` (`DarkBackground="true"`, `Modal="true"`) — **not** `MudPopover`; `AnchorOrigin`/`TransformOrigin` parameters do not exist (a centered modal has no anchor). Clicking the lava-lamp icon opens the overlay; clicking the scrim closes it (knob-drag-safe: `RadialKnob`'s `position:fixed` capture div sits above the scrim during a drag, so releasing outside the panel never fires the close handler). The panel stops click propagation so an inside click is not a dismissal. `[Parameter] Size IconSize` controls the trigger-icon size (default `Large`). This is the unit every host places — one icon anywhere gives the full control panel centered on screen, regardless of where the icon sits. Placed identically on Mix, Cut, Session, and the NowPlaying hero panel (full parity; in NowPlaying it sits in `.np-visualizer-controls` at the panel's top-right corner, not inside `NowPlayingCard`).
+  - `TheaterModeToggle.razor`: Phase 20 Theater-Mode toggle button. Visible only when `Available && (State.LavaEnabled || State.WaveformEnabled)` — no visualizer subsystem active → no theater to enter; `Available` is false when this page's release is not the one currently playing (Phase 20 Wave 2). Disabled until interactive (`!RendererInfo.IsInteractive`), same guard as Play and the lava-lamp trigger. On click: flips `WaveformVisualizerControlState.TheaterMode` and calls `NotifyChanged()`. Shows an on/off `aria-pressed` active state. Glyph: Material `Theaters`. `.dd-accent-icon` container gives the green-accent glyph in both themes with zero new CSS — same treatment as `WaveformVisualizerControlPopover`. Subscribes to `State.Changed` in `OnInitialized` and unsubscribes on `Dispose` to re-render when another observer (e.g. `CoerceTheaterMode()`) flips the state. `[Parameter] Size IconSize` (default `Large`) matches the adjacent lava-lamp trigger. `[Parameter] bool Available` (default `true`) — the page passes its `ShowTheaterToggle` predicate here so the toggle is scoped to the playing release; surfaces with no release-scoping pass the default `true`. Placed **immediately left** of the lava-lamp popover on all three detail pages inside a `.dd-detail-top-actions` cluster.
   - `WaveformZoomMapping.cs`: Maps the `WaveformVisualizerControlState.Resolution` fraction to an integer zoom level for the WebGL renderer.
   - `NowPlayingCard.razor`: Home-page text panel showing the currently playing track (label, title, sub-line). Renders label/"Now Playing" dot, track name, and artist·release sub-line from the cascaded `IStreamingPlayerService`. Subscribes to `IPlayerService.StateChanged` in `OnParametersSet` (reference-guarded, idempotent) and unsubscribes on dispose to re-render on track/state change. No visualizer or popover; those moved to `NowPlaying.razor`.
   - `NowPlayingStats.razor`: Home hero stat row. Three cards: Studio Cuts (total Cut-medium track count + zero-suppressed per-`ReleaseType` Cut release breakdown), Mixes (`MixReleaseCount` labelled "Sets" + `hh:mm` total mix runtime via `RuntimeFormat`), and Plays (live `TotalPlays` odometer in `.hero-stat-odometer` + `UniqueListeners` "N listeners" secondary line via `.hero-stat-sub` — Phase 16 wave 16.5). All three cards read from the same `HomeStatsDto` round-trip; no extra fetch path. Fetches via `IStatsDataService` on init; bridges the prerender fetch across the WASM seam with `PersistentComponentState` (persists only on a successful load, matching the medium-browse bridge pattern). Implements `IDisposable` to release the `PersistingComponentStateSubscription`.
@@ -36,25 +38,26 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream
   - `QueueList.razor`: Shared presentational queue-list component (Phase 17 wave 17.1). Renders `Items` as an ordered list with the current track marked; `Editable` flag gates drag-reorder handles (drag handle icon + `MudDropContainer`/`MudDropZone` for reorder) and per-row remove controls. The remove (×) control is suppressed on the currently-playing row (`Editable && !isCurrent`) — the current track cannot be removed via the UI (wave 17.2; reorder of the current row is still permitted). When not editable, renders a plain `<div>` — the read-only state for the embed's fixed-order shared queue. Reorder, remove, and row-jump are surfaced to the parent as `EventCallback<(int FromIndex, int ToIndex)> OnReorder`, `EventCallback<int> OnRemove`, and `EventCallback<int> OnJump`; the component calls no `IQueueService` method itself (purely presentational, no data fetch, no player wiring). Both view modes (docked overlay 17.2, embedded panel 17.3) consume this single component differing only in hosting context and the `Editable` flag. Runs during prerender without JS interop (drag work is client-only and inert when no drag occurs).
   - `QueueOverlay.razor`: Screen-centered tinted modal hosting the docked-player editable queue (Phase 17 wave 17.2). Borrows the `WaveformVisualizerControlPopover` `MudOverlay` idiom (`DarkBackground="true"`, `Modal="true"`): the panel stops click propagation; scrim-click closes the overlay; drag-safe (the panel's capture div sits above the scrim during a drag so releasing outside the panel never fires the close handler). Auto-closes when a removal empties the queue. Hosts `QueueList` in `Editable="true"` mode. Opened/closed by the Queue toggle button in `PlayerTransportZone` (shown only when `!Fixed && Items.Count > 0`; `QueueMusic` glyph, active state when open).
   - `AddToQueueButton.razor`: Append-only Add-to-Queue button shared across detail-page play sites (Phase 17 wave 17.4). Two modes: track mode (calls `IQueueService.Enqueue` with a single `TrackDto`) and release mode (calls `IQueueService.EnqueueRange` with an ordered track list). Material `PlaylistAdd` glyph; tooltip "Add to queue" (track mode) / "Add release to queue" (release mode). Reads the cascaded `IQueueService`; disabled until interactive or when the cascade is absent. Append-only — does not play, does not navigate. Placed at: `CutDetail` header (release mode, `TrackNumber`-ordered list), `CutDetail` track rows (track mode), `SessionDetail` hero play (track mode), `MixDetail` hero play (track mode). Excluded from `StreamNowButton` (OQ9) and `ReleaseGallery` cards (OQ10, deferred).
-  - `ReleaseDetailScaffold.razor`: Shared scaffold for release detail pages. Gained an optional `Ambient` `RenderFragment` slot (Phase 12) — a full-bleed layer rendered behind the main content. Absent slot = no regression. Cut mounts `<WaveformVisualizer>` + `<WaveformVisualizerControlPopover>` here; Mix uses its own full-bleed mount outside the scaffold.
+  - `ReleaseDetailScaffold.razor`: Shared scaffold for release detail pages. Gained an optional `Ambient` `RenderFragment` slot (Phase 12) — a full-bleed layer rendered behind the main content. Absent slot = no regression. Cut mounts `<WaveformVisualizer>` + `<WaveformVisualizerControlPopover>` here; Mix uses its own full-bleed mount outside the scaffold. The scaffold's default masthead PLAY (`PlayTrack`) routes through `IQueueService.PlayTrack` (deque PLAY semantics — prepends the track to the queue front) when the queue cascade is present, falling back to `IStreamingPlayerService.SelectTrackStreaming` when absent; toggle-pause is handled directly via `IStreamingPlayerService.TogglePlayPause` when this track is already active.
   - `SharePopover.razor`: Share affordance serving both track and release surfaces from one clipboard/popover-chrome source. **Track mode** (`EntryKey` set): copies the track's canonical URL and offers an iframe embed snippet pointing at `FramePlayer?TrackEntryKey=…`. **Release mode** (`ReleaseEntryKey` + `ReleaseMedium` set): copies the release's canonical detail URL (via `ReleaseRoutes.DetailHref`) and offers an iframe embed snippet pointing at `FramePlayer?ReleaseEntryKey=…`, which queues and auto-advances through the release's tracks on first play. Both modes offer the embed affordance — release mode no longer suppresses it. The iframe snippet is built by `EmbedSnippetBuilder`. A transient "Copied!" confirmation resets after a short delay.
+  - `SeoHead.razor`: Purely presentational SEO head emitter (Phase 22). Renders a `<PageTitle>` + `<HeadContent>` block from a single `SeoModel` parameter — standard meta (description, robots), canonical, Open Graph, Twitter Card, and schema.org JSON-LD. Owns no data fetch; each page wires it in one line and supplies the model from its already-bridged ViewModel state. Wired on Home, About, Cut/Session/Mix detail (incl. not-found branches → `noindex`), browse views, and the 404 page.
 - `Helpers/`: Utilities and mapper functions.
   - `PlaybackIcons.cs`: Static `Resolve(isPlaying, isPaused, trackId, currentTrackId)` method — the sole glyph-mapping source for transport icons across all surfaces. Returns `(Icon, IsActive, IsPaused)` tuple.
   - `RuntimeFormat.cs`: Static `ToHoursMinutes(double totalSeconds)` helper. Formats a seconds value as `h:mm` (hours not zero-padded, minutes always two digits). Negative / non-finite inputs return `"0:00"`. Used by `NowPlayingStats` for the mix runtime figure.
-  - `EmbedSnippetBuilder.cs`: Static helper that builds the iframe embed snippet the share popover copies. `ForTrack(baseUri, trackEntryKey)` → `<iframe src="…FramePlayer?TrackEntryKey=…">` and `ForRelease(baseUri, releaseEntryKey)` → `<iframe src="…FramePlayer?ReleaseEntryKey=…">`. iframe chrome (dimensions, border-radius, autoplay permission) is identical across both targets and defined once here.
+  - `EmbedSnippetBuilder.cs`: Static helper that builds the iframe embed snippet the share popover copies. Two targets diverge in height and content (Phase 17 wave 17.3): `ForTrack(baseUri, trackEntryKey)` → compact `<iframe>` at 196 px (no queue panel, no script, unchanged from before 17.3). `ForRelease(baseUri, releaseEntryKey)` → taller `<iframe>` at 384 px plus a host-side `<script>` resize listener; mints a fresh random token per call (8 hex chars from `Guid.NewGuid().ToString("N")[..8]`) used as the iframe id (`deepdrft-embed-{token}`) and threaded into the iframe src as `&EmbedId={token}` — the in-iframe `embed-frame.ts` reads this token and includes it in `postMessage` payloads so the host listener can route resize messages to the correct iframe when multiple release embeds share a host page. The script matches on `embedId` and applies `iframe.style.height`; degrades safely (panel still works inside the iframe) if the host strips the script. Pure string composition — unit-testable without rendering. TypeScript counterpart: `DeepDrftPublic/Interop/embed/embed-frame.ts` (compiled output gitignored).
 - `Services/`: Audio player + dark-mode services.
   - `IPlayerService` / `IStreamingPlayerService`: Contracts exposed to UI.
   - `AudioPlayerService`: Abstract base (lifecycle, initialise, select track, play/pause/stop/seek/volume).
   - `StreamingAudioPlayerService`: Production implementation. Chunked stream from `TrackMediaClient`, adaptive 16–64 KB buffer, early-playback, **seek-beyond-buffer** via offset request to the content API.
   - `AudioInteropService`: JS interop wrapper over `window.DeepDrftAudio`. Manages `DotNetObjectReference` lifetimes for progress, end-of-playback, spectrum callbacks.
   - Dark-mode services: `DarkModeServiceBase` (cookie name constant), `DarkModeCookieService` (JS cookie read/write).
-  - `WaveformVisualizerControlState`: Scoped session-persistent holder for the visualizer's **eight** continuous control positions plus **two subsystem on/off toggles** (Phase 15): `ScrollSpeed`, `GradientRotationSpeed`, `LavaGravity`, `LavaHeat`, `FluidAmount` (wax count/volume), `FluidViscosity` (cohesion — the second half of the Phase 10 "bubbles" split; `BlobDensity` is gone), `CollisionStrength`, `WaveformWidth`, `LavaEnabled` (bool, default `true`), `WaveformEnabled` (bool, default `true`). Each has a matching `Default*` const. `Changed` event is the decoupling seam — controls mutate state + raise `Changed`; the bridge (`WaveformVisualizer`) subscribes and pushes the affected uniform or subsystem-enable. Scoped DI so state survives SPA nav within a session and resets on fresh page load.
+  - `WaveformVisualizerControlState`: Scoped session-persistent holder for the visualizer's **eight** continuous control positions, **two subsystem on/off toggles** (Phase 15), and one **Theater-Mode flag** (Phase 20): `ScrollSpeed`, `GradientRotationSpeed`, `LavaGravity`, `LavaHeat`, `FluidAmount` (wax count/volume), `FluidViscosity` (cohesion — the second half of the Phase 10 "bubbles" split; `BlobDensity` is gone), `CollisionStrength`, `WaveformWidth`, `LavaEnabled` (bool, default `true`), `WaveformEnabled` (bool, default `true`), `TheaterMode` (bool, default `false` — `DefaultTheaterMode`). Each has a matching `Default*` const. `Changed` event is the decoupling seam — controls mutate state + raise `Changed`; the bridge (`WaveformVisualizer`) subscribes and pushes the affected uniform or subsystem-enable; the Theater observers (the three detail pages and `AudioPlayerBar`) subscribe to react to `TheaterMode`. **`CoerceTheaterMode()`**: enforces the invariant that Theater Mode cannot remain on when both subsystems are off — called from `WaveformVisualizerControls.ToggleLava`/`ToggleWaveform` **before** `NotifyChanged()` so all observers see a consistent, coerced state in the same `Changed` cycle. `TheaterMode` is a page-chrome presentation flag; the visualizer bridge ignores it. Scoped DI so state survives SPA nav within a session and resets on fresh page load. **Phase 20 Wave 2 — playing-release predicates** live in `ReleaseDetailBase` / `CutDetailBase` (not in this state holder): `IsThisReleasePlaying` (`PlayerService?.CurrentTrack?.Release?.EntryKey == EntryKey`), `IsContentHidden` (`TheaterMode && IsThisReleasePlaying`), `ShowTheaterToggle` (`(LavaEnabled || WaveformEnabled) && IsThisReleasePlaying`). Both base classes also subscribe to `IStreamingPlayerService.StateChanged` (idempotent, reference-guarded, disposed) so the predicates re-evaluate live when playback moves between releases.
   - `PlayTracker`: Per-session play-session tracker (Phase 16 wave 16.1). Opens on playback start, advances a high-water position on each progress tick (from `StreamingAudioPlayerService` — not the HTTP layer, so seek-beyond-buffer re-fetches are the same play), closes on track-switch / stop / organic-end / page-unload. Engagement floor: ≥3 s OR ≥5% of duration. Three-bucket classification (`partial`/`sampled`/`complete`). Emits at most one event per session via `IPlayEventSink`. No player or JS dependency — testable against a fake sink.
   - `ShareTracker`: Per-session share tracker (Phase 16 wave 16.1). Called by `SharePopover` after a successful clipboard write; applies a 60-second per-(target, channel) debounce. Sends via `BeaconInterop`. Scoped so debounce memory resets on fresh page load. **Wave 16.3:** injects `IAnonIdProvider`; attaches `_anonId.Current` to `ShareEventDto.AnonId` (omitted when null).
   - `BeaconInterop`: `navigator.sendBeacon` JS interop wrapper (Phase 16 wave 16.1). Fires JSON payloads to `api/event/{play,share}` fire-and-forget. Also wires a page-unload handler that flushes any pending play event when the page is torn down.
   - `BeaconPlayEventSink`: Production `IPlayEventSink` (Phase 16 wave 16.1). Serializes the play classification and fires it via `BeaconInterop` to `api/event/play`. Synchronous (`EmitPlay` cannot await — it is called from the player close path and the page-unload handler). **Wave 16.3:** injects `IAnonIdProvider`; reads `_anonId.Current` synchronously at emit time and sets `PlayEventDto.AnonId` (omitted when null via `WhenWritingNull`).
   - `IAnonIdProvider` / `AnonIdProvider`: Wave 16.3 anonymous-listener id seam. `IAnonIdProvider` exposes `string? Current` (synchronous cached read, safe on the unload path) and `ValueTask EnsureLoadedAsync()` (warms the cache from `localStorage` via `window.DeepDrftAnonId.get` JS interop — idempotent, never throws). `AnonIdProvider` is the production implementation; degrades to null when `localStorage` is unavailable (private mode / blocked storage). The token itself outlives the session in `localStorage`; the in-process cache is scoped (resets on fresh page load). Callers warm the cache when going interactive, then read `Current` synchronously on the close/unload path with no extra JS hop. TypeScript interop: `DeepDrftPublic/Interop/telemetry/anonid.ts` (mints GUID on first visit, returns null without throwing when storage is unavailable).
-  - `IQueueService` / `QueueService`: Ordered playback orchestrator above the single-slot player. `PlayRelease(tracks, startIndex)` replaces the queue and starts streaming; `Next`/`Previous` advance or step back; `Enqueue`/`EnqueueRange` append without interrupting the current track; `Clear` empties the queue. **Armed-idle state** added to support prerender-safe release embeds: `Arm(tracks)` loads the track list at index 0 with no JS interop (safe during prerender); `IsArmed` signals the armed-but-not-streaming state; `Start()` begins streaming the current track and clears `IsArmed`, leaving the list and position intact so auto-advance carries on. `AudioPlayerBar` reads `IsArmed` to route the first play gesture through `Start()` instead of streaming the staged track alone. `QueueChanged` event fires on all list/position changes; cascaded via `AudioPlayerProvider`. **Wave 17.1 additions:** `Move(int fromIndex, int toIndex)` reorders `Items` in-place, adjusting `CurrentIndex` so the same track stays current across the move — never re-streams or interrupts playback; `RemoveAt(int index)` removes an item and adjusts `CurrentIndex` (removing the current track does not stop playback; removing the last remaining item leaves the queue empty and dormant). Both are interop-free state mutations that re-emit `QueueChanged`. **Dormant-`Enqueue` coherence (OQ8):** `Enqueue`/`EnqueueRange` into an empty/dormant queue (`CurrentIndex == -1`) set `CurrentIndex` to 0 so a subsequent play/skip is correct — but do not auto-play. **Wave 17.2 additions:** `ClearUpcoming()` removes all queued items except the currently-playing one, leaving it as the sole item at `CurrentIndex == 0` and re-emitting `QueueChanged` — touches no playback (OQ5: Clear does not stop or remove the current track). `PlayRelease` now always materializes a defensive copy of its input (`tracks.ToList()`) so it can never alias the service's own `Items` list — fixes a row-jump bug where `PlayRelease(Items, index)` could mutate the live list mid-operation.
+  - `IQueueService` / `QueueService`: **Two-level deque** orchestrator above the single-slot player. The deque has two entry ends. **PLAY (manual)** enters the FRONT: `PlayTrack(track)` and `PlayRelease(tracks, startIndex)` prepend the played track/release in order, **remove the previously-current track**, make the new front current, start streaming it, and leave whatever sat after the old current intact behind the prepend (a whole release prepends in order in one op). The detail pages (Cut header/row, Session/Mix hero) and `StreamNowButton` route their PLAY through these. **Add-to-queue** enters the BACK: `Enqueue`/`EnqueueRange` append to the end without interrupting the current track (`AddToQueueButton`). `Next`/`Previous` advance or step back, walking `CurrentIndex` and leaving played tracks behind so `Previous` can reach them; `JumpTo(index)` moves the pointer to a queued row and streams it once (the playlist panel's row-jump — it does NOT prepend or stream the intervening rows). **End-of-track:** auto-advance (`TrackEnded`) advances when there is a next track; when the **last** track ends naturally the queue **empties** and goes dormant (bug #2) rather than stranding the finished track. `Clear` empties the queue. **Bug #3 (dormant-seed):** the first `Enqueue`/`EnqueueRange` into a dormant queue while a track is already playing externally (via the attached player, not through the queue) seeds the head with that now-playing track and then appends — yielding `[now-playing, added]` (even when adding the same track). The queue learns the externally-playing track through the existing `Attach(player)` seam (`_player.CurrentTrack`) — no new dependency, no `IServiceProvider`. **Armed-idle state** (prerender-safe release embeds): `Arm(tracks)` replaces the queue at index 0 with no JS interop; `IsArmed` signals armed-but-not-streaming; `Start()` streams the current track and clears `IsArmed`. `AudioPlayerBar` reads `IsArmed` to route the embed's first play gesture through `Start()`. `QueueChanged` fires on all list/position changes; cascaded via `AudioPlayerProvider`. `Move`/`RemoveAt` are interop-free reorder/remove mutations that adjust `CurrentIndex` and never re-stream. `ClearUpcoming()` keeps the current track and drops the up-next. **Bug #4 (reactivity):** `AudioPlayerBar.QueueItems` caches `QueueService.Items` as a `_queueItemsCache` snapshot (the service exposes its backing list by reference); the cache is invalidated and set to `null` in `OnQueueChanged`, so every real mutation hands `QueueList` a new list reference while frequent progress-tick re-renders reuse the cached one without allocating. `QueueList.OnParametersSet` calls `_dropContainer?.Refresh()` so the `MudDropContainer` re-reads the new list and the open panel re-flows immediately. **Bug #1 (label):** the docked `QueueOverlay` panel header reads **"Playlist"** (the current track stays listed). `PlayRelease` materializes `tracks.ToList()` before mutating so it can never alias the service's own `Items` list.
 - `Clients/`: HTTP API clients (both target DeepDrftAPI).
   - `TrackClient`: SQL metadata API. Uses named `IHttpClientFactory` client `"DeepDrft.API"`. Sends `page` param (not `pageNumber`). Deserializes response as bare `PagedResult<TrackDto>` (not wrapped in ApiResultDto envelope).
   - `TrackMediaClient`: Content API. Uses named `IHttpClientFactory` client `"DeepDrft.Content"`. Methods like `GetAudioStreamAsync(trackId, byteOffset?)` → `Stream` with optional Range header support for seek-beyond-buffer.
@@ -68,6 +71,11 @@ All interactive UI for the site. Blazor WebAssembly. Pages, controls, the stream
 - `Common/`: Shared utilities.
   - `DarkModeSettings.cs`: `[PersistentState]`-annotated class (single source of truth for dark mode in the client). Registered scoped.
   - `ReleaseRoutes.cs`: Static helper. `DetailHref(long id, ReleaseMedium)` returns the canonical public detail route for a release; consumed by Archive, AlbumsView, player bar, and TrackRedirect (11.B).
+  - `SeoModel.cs`: Typed per-page SEO input (Phase 22). Named factories: `ForRelease` (medium-dispatched — Cut → `MusicAlbum`, Session → `MusicAlbum`/`LiveAlbum`, Mix → `MusicRecording`), `ForHome`, `ForAbout`, `ForBrowse`, `ForNotFound`. Encodes the medium→schema.org mapping in one place. `SeoModel.Robots` overrides the environment-default (see `SeoEnvironment`).
+  - `SeoJsonLd.cs`: Typed schema.org JSON-LD builders (Phase 22). Types: `MusicGroup` (home/about, with `sameAs: ["https://instagram.com/deepdrft.music"]`), `MusicAlbum`/`LiveAlbum` (cuts/sessions, with ordered `MusicRecording` track list and per-release `byArtist`), `MusicRecording` (mixes, with ISO-8601 `duration`), `CollectionPage` (browse). All serialized output is inline-safe-escaped (`<`/`>`/`&` → `\uXXXX`) to prevent script-breakout from CMS-authored text.
+  - `SeoOptions.cs`: Site-wide SEO config (Phase 22). `BaseUrl` (`https://deepdrft.com`), title suffix (`Deep DRFT`, middot separator), default OG image seam (uses `ImageProxyController` route), IG handle in `sameAs`, no Twitter handle. Registered via the static `Startup` seam (both server and WASM `Program.cs`). `BaseUrl` is config, not `window.location` — no `window` at server prerender, and the origin cannot be derived reliably behind the nginx proxy.
+  - `SeoUrls.cs`: URL helpers for canonical and `og:image` construction from `SeoOptions.BaseUrl` (Phase 22).
+  - `SeoEnvironment.cs`: Scoped `[PersistentState]` bridge for the server environment flag (Phase 22). Seeded in `DeepDrftPublic/Components/App.razor` from `IWebHostEnvironment.IsProduction()` — mirrors the `DarkModeSettings` bridge pattern. Default robots is `index,follow` only in Production; `noindex,nofollow` in every non-production environment so the beta/staging site stays uncrawled. Explicit per-page `SeoModel.Robots` overrides this default. Fail-safe default is `noindex`.
 - `Program.cs`: WASM entry point. Calls `Startup.ConfigureApiHttpClient`, `ConfigureContentServices`, `ConfigureDomainServices`.
 - `_Imports.razor`: Global using statements and component imports.
 
@@ -127,6 +135,8 @@ New modules in `DeepDrftPublic/Interop/audio/`:
 
 The flow ensures the first paint uses the correct theme (no flash), and toggling the button persists the setting to a 365-day cookie.
 
+**`SeoEnvironment` follows the same `[PersistentState]` bridge pattern** (Phase 22). It is seeded server-side in `DeepDrftPublic/Components/App.razor` from `IWebHostEnvironment.IsProduction()` and bridged to the WASM client. Consumers (`SeoHead`) read `SeoEnvironment.IsProduction` to gate the default robots directive (`index,follow` in Production, `noindex,nofollow` elsewhere). The pattern is identical to `DarkModeSettings` — one server-side seed, one `PersistentComponentState` round-trip, one scoped client read.
+
 ## MVVM convention
 
 Component state lives in ViewModels (registered scoped in DI). Components render and dispatch only.
@@ -140,6 +150,22 @@ Component state lives in ViewModels (registered scoped in DI). Components render
 - CSS classes prefixed `deepdrft-` live in `DeepDrftPublic/wwwroot/styles/deepdrft-styles.css` (shared across server and client).
 - Custom SVG icons: `DeepDrftShared.Client/Common/DDIcons.cs` (hand-rolled gas-lamp, lava-lamp, etc. — shared across public and CMS surfaces).
 
+### Interactive-accent icons (`.dd-accent-icon` / `.dd-accent-fill`)
+
+Green-accent interactive icon affordances (Play / Share / Add-to-Queue / lava-lamp trigger, etc.) use a **single reusable treatment** in `deepdrft-styles.css`, not per-site dark overrides. Wrap the affordance(s) in a container carrying `.dd-accent-icon`; the rule colours the inner `.mud-icon-root` glyph green-accent (`--deepdrft-green-accent`, the brand constant — same value in both palettes) in **both** themes. Add `.dd-accent-fill` to the same container when it also holds a filled `Color.Secondary` `MudButton` whose fill must go green-accent in **dark** (dark-only — light already renders green fill + white text).
+
+Two reasons this is needed and why it's a class, not a palette colour: (1) no MudBlazor `Color` enum is green in both themes (`Dark.Secondary` is off-white), so palette-only solutions can't express "green in both"; (2) MudBlazor stamps the standalone rule `.mud-secondary-text { color: …secondary !important }` (0,1,0) on the glyph `<svg>`, so wrapper-level overrides never reach it — the reusable rule targets `.dd-accent-icon .mud-icon-button .mud-icon-root` (0,3,0) `!important`, which beats it on specificity alone; source order is not load-bearing for the glyph clause. The Session/Mix release-detail hero Share/Play glyphs use this class too: they were already green-accent in light (via `Color.Secondary` → `Light.Secondary`), so folding them in keeps light pixel-identical while fixing the dark over-image glyphs — they are not actually theme-divergent. **Add new green-accent icon affordances by applying this class, not by spawning a new dark override.**
+
+**Self-themed components are authoritative over `.dd-accent-icon`.** `PlayStateIcon` owns its glyph colour inside `.icon-container` and must beat a surrounding `.dd-accent-icon` in dark — its scoped CSS rule targets `.mud-icon-root` at (0,5,0) `!important` (after Blazor's scope attribute is applied), which outranks the consolidation rule's (0,3,0) `!important`. Do not wrap a `PlayStateIcon` in `.dd-accent-icon` expecting to recolor its play-chip glyph — the play chip always shows navy (`--deepdrft-play-glyph`) against the moss-green chip in dark.
+
+**Layout-only cluster class: `.dd-detail-top-actions`.** When two or more icon affordances sit together in a top-action row (e.g. the Theater toggle + lava-lamp popover on the three detail pages), wrap them in `.dd-detail-top-actions` — a layout-only `display:flex; align-items:center; gap:0.25rem` class in `deepdrft-styles.css`. No colour; prevents the `SpaceBetween` row from spreading the icons apart. Each affordance inside still carries its own `.dd-accent-icon` wrapper independently.
+
+**Full-screen detail body: `.dd-detail-fill`.** Phase 20 Wave 2. Applied to each detail page's foreground content container (the `<div>` or `<MudContainer>` that wraps the scaffold/hero); sets `min-height: calc(100vh - var(--deepdrft-nav-height, 88px))` so the ambient/full-bleed visualizer reads as genuinely full-screen and the site footer is pushed below the fold, independent of Theater Mode. Reuses `--deepdrft-nav-height` (88px desktop / 72px mobile) so the clearance tracks the nav bar height across breakpoints; no new layout token. Defined in `deepdrft-styles.css`.
+
+**Eased Theater Mode collapse: `.dd-theater-collapsible` / `.dd-theater-collapsed`.** Phase 20 Wave 2. Used wherever Theater Mode should ease content in/out rather than pop via `@if`. The outer wrapper carries `.dd-theater-collapsible` (always present); its single direct child carries `.dd-theater-collapsible-inner`; adding `.dd-theater-collapsed` to the outer collapses the region. Technique: `grid-template-rows: 1fr → 0fr` (real-height interpolation), `opacity`, and `visibility: hidden` + `transition-behavior: allow-discrete` (visibility flip deferred to end of ease-out so collapsed content is removed from the tab order once the animation completes; immediately re-shown on expand). A `prefers-reduced-motion` block collapses instantly. Used on the release content regions in all three detail pages (`IsContentHidden` predicate) and on the player-bar `NowShowingPanel` band (collapsed when `!TheaterMode`). Defined in `deepdrft-styles.css`.
+
+**Gas-lamp toggle is self-colored in its SVG.** `DDIcons.GasLampLit` (dark-mode icon) carries `fill="#2A5C4F"` directly on its frame path — no CSS colour override is needed. The former dark nav rule (`.deepdrft-theme-dark .dd-nav-actions .mud-icon-button`) has been removed as dead. `DDIcons.GasLamp` (light-mode icon) continues to use `currentColor` and inherits nav text colour in light (the unlit toggle is theme-divergent by design).
+
 ## Development commands
 
 ```bash

DeepDrftPublic.Client/Common/SeoEnvironment.cs

@@ -0,0 +1,33 @@
+using Microsoft.AspNetCore.Components;
+
+namespace DeepDrftPublic.Client.Common;
+
+/// <summary>
+/// Environment-gated robots bridge (Phase 22 remediation §4). The beta/staging site is web-hosted and must
+/// not be crawled, so the <i>default</i> robots directive is environment-gated: <c>index,follow</c> only in
+/// Production, <c>noindex,nofollow</c> everywhere else. A per-page <see cref="SeoModel.Robots"/> override
+/// still wins — this only sets the default.
+///
+/// <para>
+/// Crawlers read the server-prerendered HTML, so correctness lives in the server prerender pass — but the
+/// value must be identical across the InteractiveAuto double render (AC6), so the WASM pass has to resolve
+/// the same flag. The WASM assembly has no <c>IWebHostEnvironment</c> (config comes from the server). This
+/// mirrors the DarkMode bridge exactly: a scoped service the server seeds during prerender (from
+/// <c>IWebHostEnvironment.IsProduction()</c>) and <c>[PersistentState]</c> rounds to the client, so both
+/// passes resolve the identical value. <c>SeoHead</c> injects this rather than an environment dependency,
+/// honouring the no-environment-in-the-component constraint.
+/// </para>
+/// </summary>
+public class SeoEnvironment
+{
+    /// <summary>
+    /// True only in Production. Seeded server-side and persisted across the WASM boot. Defaults to
+    /// <c>false</c> so the fail-safe is "do not index" — a missing bridge never accidentally opens a
+    /// non-production site to crawlers.
+    /// </summary>
+    [PersistentState]
+    public bool IsProduction { get; set; }
+
+    /// <summary>The environment-gated default robots directive. Explicit page values override this.</summary>
+    public string DefaultRobots => IsProduction ? "index,follow" : "noindex,nofollow";
+}

DeepDrftPublic.Client/Common/SeoJsonLd.cs

@@ -0,0 +1,127 @@
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace DeepDrftPublic.Client.Common;
+
+/// <summary>
+/// Typed schema.org JSON-LD nodes (Phase 22, OQ5 — the typed-builder option). Each record mirrors one
+/// schema.org type; <see cref="SeoJsonLd.Serialize"/> renders a node to the <c>&lt;script type="application/ld+json"&gt;</c>
+/// body. Keeping the shape in C# (not hand-written JSON in pages) is what makes the medium→type mapping
+/// live in one place (DRY, §4.3) and the output unit-testable (AC5) rather than a manual validator pass.
+///
+/// <para>
+/// All nodes share <see cref="JsonLdNode"/> so the <c>@context</c>/<c>@type</c> pair serialises first and
+/// once. Null properties are omitted (the serializer ignores nulls) so partial data never emits an empty
+/// or broken node (C6/AC4).
+/// </para>
+/// </summary>
+public static class SeoJsonLd
+{
+    private static readonly JsonSerializerOptions Options = new()
+    {
+        DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull,
+        // schema.org keys are PascalCase ("@type", "byArtist", "datePublished"); JsonPropertyName drives
+        // each. Encoder relaxed so the JSON sits inline in HTML without over-escaping apostrophes etc.
+        // Note: the relaxed encoder leaves <, >, & raw — InlineSafe re-escapes exactly those before the
+        // body is injected into the <script> element. See Serialize.
+        Encoder = System.Text.Encodings.Web.JavaScriptEncoder.UnsafeRelaxedJsonEscaping,
+        WriteIndented = false,
+    };
+
+    /// <summary>
+    /// Renders a node to its compact JSON-LD script body. The host component wraps it in the script tag.
+    /// The body is run through <see cref="InlineSafe"/> so CMS-authored values containing
+    /// <c>&lt;/script&gt;</c> or <c>&lt;</c> cannot break out of the inline script element (XSS).
+    /// </summary>
+    public static string Serialize<TNode>(TNode node) where TNode : JsonLdNode =>
+        InlineSafe(JsonSerializer.Serialize(node, node.GetType(), Options));
+
+    /// <summary>
+    /// Escapes the three characters that can break out of an inline <c>&lt;script type="application/ld+json"&gt;</c>
+    /// element. Replacing <c>&lt;</c>/<c>&gt;</c>/<c>&amp;</c> with their <c>\uXXXX</c> JSON escapes keeps the
+    /// JSON byte-for-byte equivalent on parse (a JSON string treats <c><</c> and <c>&lt;</c> identically)
+    /// while making <c>&lt;/script&gt;</c> impossible to emit raw — the documented safe pattern for inline JSON-LD.
+    /// </summary>
+    internal static string InlineSafe(string json) => json
+        .Replace("<", "\\u003C")
+        .Replace(">", "\\u003E")
+        .Replace("&", "\\u0026");
+}
+
+/// <summary>Base for every schema.org node: emits <c>@context</c> and <c>@type</c> first.</summary>
+public abstract record JsonLdNode
+{
+    [JsonPropertyName("@context")]
+    [JsonPropertyOrder(-2)]
+    public string Context => "https://schema.org";
+
+    [JsonPropertyName("@type")]
+    [JsonPropertyOrder(-1)]
+    public abstract string Type { get; }
+}
+
+/// <summary>The Deep DRFT collective entity — the home/about node.</summary>
+public sealed record MusicGroupNode : JsonLdNode
+{
+    [JsonPropertyName("@type")] public override string Type => "MusicGroup";
+
+    [JsonPropertyName("name")] public string Name { get; init; } = string.Empty;
+    [JsonPropertyName("url")] public string? Url { get; init; }
+    [JsonPropertyName("genre")] public string? Genre { get; init; }
+    [JsonPropertyName("description")] public string? Description { get; init; }
+    [JsonPropertyName("logo")] public string? Logo { get; init; }
+    [JsonPropertyName("sameAs")] public IReadOnlyList<string>? SameAs { get; init; }
+}
+
+/// <summary>A studio cut or a live session release. <c>AlbumProductionType</c> distinguishes them.</summary>
+public sealed record MusicAlbumNode : JsonLdNode
+{
+    [JsonPropertyName("@type")] public override string Type => "MusicAlbum";
+
+    [JsonPropertyName("name")] public string Name { get; init; } = string.Empty;
+    [JsonPropertyName("byArtist")] public ArtistRef? ByArtist { get; init; }
+
+    /// <summary>schema.org <c>MusicAlbumProductionType</c> URI, e.g. <c>StudioAlbum</c> or <c>LiveAlbum</c>.</summary>
+    [JsonPropertyName("albumProductionType")] public string? AlbumProductionType { get; init; }
+
+    [JsonPropertyName("datePublished")] public string? DatePublished { get; init; }
+    [JsonPropertyName("genre")] public string? Genre { get; init; }
+    [JsonPropertyName("image")] public string? Image { get; init; }
+    [JsonPropertyName("url")] public string? Url { get; init; }
+
+    /// <summary>Ordered list of the album's recordings (cut track list, in TrackNumber order).</summary>
+    [JsonPropertyName("track")] public IReadOnlyList<MusicRecordingNode>? Track { get; init; }
+}
+
+/// <summary>A single recording — a mix release, or one track inside an album's <c>track</c> list.</summary>
+public sealed record MusicRecordingNode : JsonLdNode
+{
+    [JsonPropertyName("@type")] public override string Type => "MusicRecording";
+
+    [JsonPropertyName("name")] public string Name { get; init; } = string.Empty;
+    [JsonPropertyName("byArtist")] public ArtistRef? ByArtist { get; init; }
+
+    /// <summary>ISO-8601 duration (e.g. <c>PT1H2M3S</c>) from <c>DurationSeconds</c>.</summary>
+    [JsonPropertyName("duration")] public string? Duration { get; init; }
+
+    [JsonPropertyName("genre")] public string? Genre { get; init; }
+    [JsonPropertyName("image")] public string? Image { get; init; }
+    [JsonPropertyName("url")] public string? Url { get; init; }
+}
+
+/// <summary>A browse/index surface listing releases (cuts/sessions/mixes/archive).</summary>
+public sealed record CollectionPageNode : JsonLdNode
+{
+    [JsonPropertyName("@type")] public override string Type => "CollectionPage";
+
+    [JsonPropertyName("name")] public string Name { get; init; } = string.Empty;
+    [JsonPropertyName("description")] public string? Description { get; init; }
+    [JsonPropertyName("url")] public string? Url { get; init; }
+}
+
+/// <summary>A nested <c>byArtist</c> reference — the collective as a MusicGroup, by name.</summary>
+public sealed record ArtistRef
+{
+    [JsonPropertyName("@type")] public string Type => "MusicGroup";
+    [JsonPropertyName("name")] public string Name { get; init; } = string.Empty;
+}

DeepDrftPublic.Client/Common/SeoModel.cs

@@ -0,0 +1,209 @@
+using DeepDrftModels.DTOs;
+using DeepDrftModels.Enums;
+
+namespace DeepDrftPublic.Client.Common;
+
+/// <summary>
+/// The OG <c>og:type</c> for a page. Releases map per medium (§3.4); everything else is a website.
+/// </summary>
+public enum SeoOgType
+{
+    Website,
+    MusicAlbum,
+    MusicSong,
+}
+
+/// <summary>
+/// The typed per-page SEO input (Phase 22). A page hands <c>SeoHead</c> one model instead of ~15 loose
+/// parameters; the named factories below encode the per-page / per-medium mapping (title, description,
+/// canonical path, og:type, JSON-LD node) in exactly one place each (DRY, §4.1/§4.2). The factories are
+/// pure functions over DTOs the page already holds — unit-testable without rendering.
+///
+/// <para>
+/// <see cref="CanonicalPath"/> is site-relative; <c>SeoHead</c> absolutises it against
+/// <see cref="SeoOptions.BaseUrl"/>. Release pages pass <see cref="ReleaseRoutes.DetailHref"/> so the
+/// canonical is the dedicated route regardless of alias/query routes (AC7). A null cover means the model
+/// carries no <see cref="ImagePath"/> and <c>SeoHead</c> falls back to the default OG image (C6/AC4).
+/// </para>
+/// </summary>
+public sealed record SeoModel
+{
+    /// <summary>Bare page title, no site suffix. <c>SeoHead</c> composes <c>"{Title} · {suffix}"</c>.</summary>
+    public required string Title { get; init; }
+
+    /// <summary>Meta/OG description. Null falls back to <see cref="SeoOptions.DefaultDescription"/>.</summary>
+    public string? Description { get; init; }
+
+    /// <summary>Site-relative canonical path. Null defaults to the current path in <c>SeoHead</c>.</summary>
+    public string? CanonicalPath { get; init; }
+
+    /// <summary>Relative cover <c>ImagePath</c>. Null → the default OG image.</summary>
+    public string? ImagePath { get; init; }
+
+    public SeoOgType OgType { get; init; } = SeoOgType.Website;
+
+    /// <summary>Robots directive. Null falls back to <see cref="SeoOptions.DefaultRobots"/>.</summary>
+    public string? Robots { get; init; }
+
+    /// <summary>Pre-serialised JSON-LD script body, or null to emit no structured-data script.</summary>
+    public string? JsonLd { get; init; }
+
+    // --- Music-vertical OG, release pages only (null elsewhere → tags omitted) ---
+    public string? Artist { get; init; }
+    public DateOnly? ReleaseDate { get; init; }
+    public double? DurationSeconds { get; init; }
+
+    // ------------------------------------------------------------------ Factories
+
+    /// <summary>Home page: the collective entity (MusicGroup JSON-LD), site-level OG.</summary>
+    public static SeoModel ForHome(SeoOptions options) => new()
+    {
+        Title = "Electronic Music Collective",
+        Description = options.DefaultDescription,
+        CanonicalPath = "/",
+        OgType = SeoOgType.Website,
+        JsonLd = SeoJsonLd.Serialize(MusicGroup(options)),
+    };
+
+    /// <summary>About page: the collective again, with the bio lede as description.</summary>
+    public static SeoModel ForAbout(SeoOptions options) => new()
+    {
+        Title = "The Collective",
+        Description =
+            "Two people, many hats. Deep DRFT brings the heart and soul of Midwest deep house to " +
+            "Charleston — informed by the founders of the style, and promising to push it forward.",
+        CanonicalPath = "/about",
+        OgType = SeoOgType.Website,
+        JsonLd = SeoJsonLd.Serialize(MusicGroup(options) with
+        {
+            Description =
+                "Two people, many hats. Deep DRFT brings the heart and soul of Midwest deep house to " +
+                "Charleston — informed by the founders of the style, and promising to push it forward.",
+        }),
+    };
+
+    /// <summary>A browse surface: <c>CollectionPage</c> JSON-LD, website OG.</summary>
+    public static SeoModel ForBrowse(SeoOptions options, ReleaseMedium? medium, string path)
+    {
+        var (title, description) = BrowseCopy(medium);
+        return new SeoModel
+        {
+            Title = title,
+            Description = description,
+            CanonicalPath = path,
+            OgType = SeoOgType.Website,
+            JsonLd = SeoJsonLd.Serialize(new CollectionPageNode
+            {
+                Name = title,
+                Description = description,
+                Url = SeoUrls.Absolute(options, path),
+            }),
+        };
+    }
+
+    /// <summary>The 404 page: no canonical, <c>noindex,follow</c>, no JSON-LD.</summary>
+    public static SeoModel ForNotFound(SeoOptions options) => new()
+    {
+        Title = "Not Found",
+        Description = options.DefaultDescription,
+        Robots = "noindex,follow",
+        OgType = SeoOgType.Website,
+    };
+
+    /// <summary>
+    /// A release detail page. The medium picks the schema (cut/session → MusicAlbum, mix → MusicRecording),
+    /// the og:type, and the music-vertical OG fields; the canonical is the dedicated route. The optional
+    /// <paramref name="tracks"/> seed the album's ordered <c>track</c> list (cut). <b>One call site, all tags.</b>
+    /// </summary>
+    public static SeoModel ForRelease(SeoOptions options, ReleaseDto release, IReadOnlyList<TrackDto>? tracks = null)
+    {
+        var canonicalPath = ReleaseRoutes.DetailHref(release.EntryKey, release.Medium);
+        var image = SeoUrls.CoverOrDefault(options, release.ImagePath);
+        // byArtist reflects the release's own artist, consistent with the music:musician OG tag (Daniel's
+        // call) — not the collective name. Album sub-recordings share it: the tracks are by this artist.
+        var artist = new ArtistRef { Name = release.Artist };
+        var description = string.IsNullOrWhiteSpace(release.Description) ? options.DefaultDescription : release.Description;
+
+        // A mix is a single recording; its duration comes from the (single) track when present.
+        var mixDurationSeconds = release.Medium == ReleaseMedium.Mix
+            ? tracks?.FirstOrDefault()?.DurationSeconds
+            : null;
+
+        JsonLdNode node = release.Medium switch
+        {
+            ReleaseMedium.Mix => new MusicRecordingNode
+            {
+                Name = release.Title,
+                ByArtist = artist,
+                Duration = SeoUrls.IsoDuration(mixDurationSeconds),
+                Genre = release.Genre,
+                Image = image,
+                Url = SeoUrls.Absolute(options, canonicalPath),
+            },
+            // Cut and Session are both albums; the production type distinguishes a live session.
+            _ => new MusicAlbumNode
+            {
+                Name = release.Title,
+                ByArtist = artist,
+                AlbumProductionType = release.Medium == ReleaseMedium.Session
+                    ? "https://schema.org/LiveAlbum"
+                    : "https://schema.org/StudioAlbum",
+                DatePublished = release.ReleaseDate?.ToString("yyyy-MM-dd"),
+                Genre = release.Genre,
+                Image = image,
+                Url = SeoUrls.Absolute(options, canonicalPath),
+                Track = AlbumTracks(options, artist, tracks),
+            },
+        };
+
+        return new SeoModel
+        {
+            Title = release.Title,
+            Description = description,
+            CanonicalPath = canonicalPath,
+            ImagePath = release.ImagePath,
+            OgType = release.Medium == ReleaseMedium.Mix ? SeoOgType.MusicSong : SeoOgType.MusicAlbum,
+            Artist = release.Artist,
+            ReleaseDate = release.ReleaseDate,
+            DurationSeconds = mixDurationSeconds,
+            JsonLd = SeoJsonLd.Serialize(node),
+        };
+    }
+
+    // The collective entity, built once from config — the home/about JSON-LD root.
+    private static MusicGroupNode MusicGroup(SeoOptions options) => new()
+    {
+        Name = options.SiteName,
+        Url = SeoUrls.Absolute(options, "/"),
+        Genre = options.Genre,
+        Description = options.DefaultDescription,
+        Logo = SeoUrls.Absolute(options, options.DefaultImageUrl),
+        SameAs = options.SameAs.Count > 0 ? options.SameAs : null,
+    };
+
+    // Ordered recording list for an album's `track` property. Null when there are no tracks so the
+    // property is omitted rather than emitting an empty array (C6).
+    private static IReadOnlyList<MusicRecordingNode>? AlbumTracks(
+        SeoOptions options, ArtistRef artist, IReadOnlyList<TrackDto>? tracks)
+    {
+        if (tracks is null || tracks.Count == 0) return null;
+
+        return tracks
+            .OrderBy(t => t.TrackNumber)
+            .Select(t => new MusicRecordingNode
+            {
+                Name = t.TrackName,
+                ByArtist = artist,
+                Duration = SeoUrls.IsoDuration(t.DurationSeconds),
+            })
+            .ToList();
+    }
+
+    private static (string Title, string Description) BrowseCopy(ReleaseMedium? medium) => medium switch
+    {
+        ReleaseMedium.Cut => ("Cuts", "Studio cuts from Deep DRFT — composed, layered, and finished."),
+        ReleaseMedium.Session => ("Sessions", "Live sessions from Deep DRFT — performances caught in the moment, unrepeatable and unedited."),
+        ReleaseMedium.Mix => ("Mixes", "DJ mixes from Deep DRFT — uninterrupted sets, one track bleeding into the next."),
+        _ => ("Archive", "The full Deep DRFT catalogue — cuts, sessions, and mixes, indexed and always expanding."),
+    };
+}

DeepDrftPublic.Client/Common/SeoOptions.cs

@@ -0,0 +1,52 @@
+namespace DeepDrftPublic.Client.Common;
+
+/// <summary>
+/// Site-wide SEO defaults (Phase 22). These are non-secret brand constants — a single canonical origin,
+/// the site name/suffix, the fallback share image, the social links — sourced once and injected into
+/// <c>SeoHead</c> so no page re-declares them. Registered as a singleton in
+/// <see cref="Startup.ConfigureDomainServices"/>, which runs in <b>both</b> the server prerender and the
+/// WASM passes, so both passes resolve identical values (the double-render-identity requirement, §5/AC6).
+///
+/// <para>
+/// <see cref="BaseUrl"/> is the load-bearing field: absolute canonical / <c>og:url</c> / <c>og:image</c>
+/// origins all come from here, never from a browser API — there is no <c>window.location</c> during
+/// server prerender, and the request host is unreliable behind the nginx reverse proxy (§5, OQ1).
+/// </para>
+/// </summary>
+public sealed record SeoOptions
+{
+    /// <summary>Canonical production origin, no trailing slash. Absolute URLs are this + a resolved path (OQ1).</summary>
+    public string BaseUrl { get; init; } = "https://deepdrft.com";
+
+    /// <summary>The brand name used in <c>og:site_name</c>, <c>application-name</c>, and the JSON-LD MusicGroup.</summary>
+    public string SiteName { get; init; } = "Deep DRFT";
+
+    /// <summary>Appended to a page's bare title as <c>"{Title} · {TitleSuffix}"</c>. Resolves the prior suffix inconsistency (OQ4).</summary>
+    public string TitleSuffix { get; init; } = "Deep DRFT";
+
+    /// <summary>Fallback meta/OG description for pages that supply none.</summary>
+    public string DefaultDescription { get; init; } =
+        "Deep DRFT — an electronic music collective from Charleston, South Carolina. Studio cuts, live sessions, and DJ mixes.";
+
+    /// <summary>
+    /// Absolute or root-relative URL of the default 1200×630 share image used when a page has no cover (OQ2).
+    /// A placeholder path until the real asset is dropped in; swapping it is a one-value change.
+    /// </summary>
+    public string DefaultImageUrl { get; init; } = "/img/og-default.png";
+
+    /// <summary>OG locale. Optional surface tag.</summary>
+    public string Locale { get; init; } = "en_US";
+
+    /// <summary>The collective's primary genre, used in the MusicGroup JSON-LD node.</summary>
+    public string Genre { get; init; } = "Electronic";
+
+    // The default robots directive is NOT a static option — it is environment-gated (Production →
+    // index,follow; non-production → noindex,nofollow) via SeoEnvironment so the beta/staging site is
+    // never crawled. A page's explicit SeoModel.Robots still overrides that default.
+
+    /// <summary>
+    /// Public social profile URLs for the MusicGroup <c>sameAs</c> array (OQ3). Instagram only —
+    /// no Twitter/X account exists, so no <c>twitter:site</c>/<c>twitter:creator</c> handle is emitted.
+    /// </summary>
+    public IReadOnlyList<string> SameAs { get; init; } = ["https://instagram.com/deepdrft.music"];
+}

DeepDrftPublic.Client/Common/SeoUrls.cs

@@ -0,0 +1,44 @@
+namespace DeepDrftPublic.Client.Common;
+
+/// <summary>
+/// Absolute-URL composition for SEO tags (Phase 22). Canonical / <c>og:url</c> / <c>og:image</c> origins
+/// all come from <see cref="SeoOptions.BaseUrl"/> (config), never from a browser API — there is no
+/// <c>window.location</c> during server prerender and the request host is unreliable behind nginx
+/// (§5, OQ1). Shared by the <c>SeoModel</c> factories (which absolutise JSON-LD <c>url</c>/<c>image</c>)
+/// and <c>SeoHead</c> (which absolutises the meta/OG tags) so the rule lives in exactly one place.
+/// </summary>
+public static class SeoUrls
+{
+    /// <summary>BaseUrl + a site-relative path. Both sides are trimmed so the join never doubles or drops the slash.</summary>
+    public static string Absolute(SeoOptions options, string path)
+    {
+        var origin = options.BaseUrl.TrimEnd('/');
+        if (string.IsNullOrEmpty(path)) return origin;
+        return $"{origin}/{path.TrimStart('/')}";
+    }
+
+    /// <summary>
+    /// Absolute URL of a release/track cover from its FileDatabase <c>ImagePath</c>, via the public image
+    /// route (<c>api/image/{escaped}</c>). Returns the configured default share image when no cover exists
+    /// (C6/AC4 — a default guarantees <c>og:image</c> presence).
+    /// </summary>
+    public static string CoverOrDefault(SeoOptions options, string? imagePath)
+    {
+        if (string.IsNullOrWhiteSpace(imagePath))
+            return Absolute(options, options.DefaultImageUrl);
+
+        return Absolute(options, $"api/image/{Uri.EscapeDataString(imagePath)}");
+    }
+
+    /// <summary>
+    /// ISO-8601 duration (e.g. <c>PT1H2M3S</c>) from a seconds value, for JSON-LD <c>duration</c> and the
+    /// <c>music:duration</c> OG tag. Null / non-finite / non-positive input yields null (omit the tag).
+    /// </summary>
+    public static string? IsoDuration(double? seconds)
+    {
+        if (seconds is null || double.IsNaN(seconds.Value) || double.IsInfinity(seconds.Value) || seconds.Value <= 0)
+            return null;
+
+        return System.Xml.XmlConvert.ToString(TimeSpan.FromSeconds(seconds.Value));
+    }
+}

DeepDrftPublic.Client/Controls/AddToQueueButton.razor

@@ -3,10 +3,11 @@
 @using DeepDrftPublic.Client.Services
 
 @* Append-only "Add to Queue" affordance placed beside a play control. Add is NOT play: it calls the
-   cascaded IQueueService's Enqueue/EnqueueRange (which append without disturbing current playback and
-   leave a coherent CurrentIndex on a first add into a dormant queue) — never PlayRelease/Start/Select.
-   Track mode (Track set) appends a single track; release mode (ReleaseTracks set) appends the whole
-   ordered list. Reads queue state from the layout-level cascade (C1); owns no data fetch. *@
+   cascaded IQueueService's Enqueue/EnqueueRange (which append to the END without disturbing current
+   playback; a first add into a dormant queue seeds the head from the externally-playing track when one
+   exists, then appends) — never PlayRelease/PlayTrack/Start/Select. Track mode (Track set) appends a
+   single track; release mode (ReleaseTracks set) appends the whole ordered list. Reads queue state from
+   the layout-level cascade (C1); owns no data fetch. *@
 
 <MudTooltip Text="@Tooltip">
     <MudIconButton Icon="@Icons.Material.Filled.PlaylistAdd"

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor

@@ -10,6 +10,22 @@ else
         <MudContainer MaxWidth="MaxWidth.Large" Class="player-inner-container">
             <MudPaper Elevation="8" Class="player-surface pa-3">
 
+                @* Theater Mode "now showing" band (Phase 20 §5/§7, Wave 2 §2). Keyed off the playing
+                   track's Release, not off any detail page (the bar reaches into no page; §6). The release
+                   page is hidden in Theater Mode, so the bar carries its identity: cover, linked title,
+                   release share. The band stays mounted whenever a release is playing and eases in/out via
+                   the shared .dd-theater-collapsible wrapper — collapsed (zero height, faded) unless
+                   Theater is ON — so the bar grows/shrinks smoothly instead of popping. *@
+                @if (CurrentTrack?.Release is not null)
+                {
+                    var nowShowing = VisualizerControlState.TheaterMode;
+                    <div class="dd-theater-collapsible @(nowShowing ? null : "dd-theater-collapsed")">
+                        <div class="dd-theater-collapsible-inner">
+                        <NowShowingPanel Release="CurrentTrack.Release" />
+                        </div>
+                    </div>
+                }
+
                 <div class="player-layout">
                     <PlayerTransportZone IsLoaded="IsLoaded"
                                          CanPlay="CanPlay"
@@ -26,7 +42,7 @@ else
                                          SkipNext="@SkipNext"
                                          SkipPrevious="@SkipPrevious"
                                          ShowQueueButton="ShowQueueButton"
-                                         QueueOpen="_queueOpen"
+                                         QueueOpen="QueueButtonOpen"
                                          QueueToggle="@ToggleQueue"
                                          Class="transport-zone"/>
 
@@ -42,6 +58,23 @@ else
                                     Class="seek-zone"/>
                 </div>
 
+                @* Fixed (embed) queue panel (§4 / AC5). A release embed shows the up-next inline below the
+                   controls as a read-only list (Editable=false → no drag handles, no remove buttons; C3).
+                   Jump-to-track is still allowed (OQ2) — routed through the same OnQueueJump as the docked
+                   overlay, which calls JumpTo (moves the pointer and streams the row, clearing IsArmed).
+                   Gated on ShowFixedPanel so a single-track embed (empty queue) stays panel-free (UC6). The
+                   Queue button collapses/expands this panel (OQ1 Option A); collapse hides it and posts the
+                   shrunken height to the host iframe. *@
+                @if (ShowFixedPanel && _fixedPanelOpen)
+                {
+                    <div class="deepdrft-queue-embed-panel">
+                        <QueueList Items="QueueItems"
+                                   CurrentIndex="QueueCurrentIndex"
+                                   Editable="false"
+                                   OnJump="@OnQueueJump"/>
+                    </div>
+                }
+
                 @* Minimize / close — positioned absolutely top-right *@
                 @if (!Fixed)
                 {
@@ -62,8 +95,8 @@ else
 
         @* Docked queue overlay (Phase 17 §3.2). MudOverlay portals to the body, so its position here in
            the dock subtree does not affect its screen-centered rendering. Only mounted in docked mode —
-           the Fixed embed gets its own inline panel in a later wave. *@
-        @if (ShowQueueButton)
+           the Fixed embed renders its own inline panel inside the surface above. *@
+        @if (ShowDockedOverlay)
         {
             <QueueOverlay Visible="_queueOpen"
                           Items="QueueItems"

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.cs

@@ -16,12 +16,18 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
 
     [Inject] private IJSRuntime JsRuntime { get; set; } = default!;
 
+    // Theater Mode (Phase 20). Property-injected (no constructor growth) so the bar can read
+    // TheaterMode to mount the "now showing" band and re-render when the flag flips. The toggle lives on
+    // the detail pages; the bar only observes — single source, multiple observers (§6).
+    [Inject] private WaveformVisualizerControlState VisualizerControlState { get; set; } = default!;
+
     private bool _isMinimized = true;
     private bool _isSeeking = false;
     private double _seekPosition = 0;
     private bool _queueOpen = false;
     private IStreamingPlayerService? _subscribedService;
     private IQueueService? _subscribedQueue;
+    private bool _subscribedToVisualizerState;
 
     // Spacer-height bridge: the expanded dock is position:fixed, so MainLayout's
     // spacer reserves its space. We mirror this element's live height into a CSS
@@ -40,6 +46,13 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
     private IJSObjectReference? _spacerModule;
     private bool _spacerObserved;
 
+    // Fixed-embed → host resize handshake (OQ1 Option A). When the inline panel collapses/expands we
+    // measure the player's live height and post it to the host so the iframe resizes to match. The
+    // dirty flag defers the post to OnAfterRenderAsync so the DOM reflects the new panel state first.
+    private IJSObjectReference? _embedModule;
+    private bool _embedHeightDirty;
+    private bool _embedHeightPosted;
+
     private bool IsLoaded => PlayerService?.IsLoaded ?? false;
     private bool IsLoading => PlayerService?.IsLoading ?? false;
 
@@ -64,13 +77,39 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
     private bool HasNext => QueueService?.HasNext ?? false;
     private bool HasPrevious => QueueService?.HasPrevious ?? false;
 
-    // Queue overlay state. The button (and overlay) appear only in docked mode with a non-empty queue,
-    // mirroring the skip-affordance gating (AC1): with no queue the bar is byte-for-byte its pre-queue
-    // self. The Fixed embed gets an inline panel in a later wave, so the docked overlay is !Fixed-only.
-    private bool ShowQueueButton => !Fixed && (QueueService?.Items.Count ?? 0) > 0;
-    private IReadOnlyList<TrackDto> QueueItems => QueueService?.Items ?? [];
+    // Queue button gating. The button appears in BOTH modes when a queue is loaded, mirroring the
+    // skip-affordance gating (AC1): with no queue the bar is byte-for-byte its pre-queue self, so a
+    // single-track embed (empty queue) shows no button and no panel (UC6). In docked mode it toggles
+    // the overlay; in Fixed mode it collapses/expands the inline panel (OQ1 Option A).
+    private bool HasQueue => (QueueService?.Items.Count ?? 0) > 0;
+    private bool ShowQueueButton => HasQueue;
+
+    // The docked overlay mounts only in docked mode; the Fixed embed renders its inline panel instead.
+    private bool ShowDockedOverlay => !Fixed && HasQueue;
+
+    // The Fixed-mode inline panel: always shown (read-only, C3) when a release embed has a queue.
+    // Gated on Fixed + non-empty so single-track embeds keep their compact, panel-free bar (UC6).
+    private bool ShowFixedPanel => Fixed && HasQueue;
+
+    // Cached snapshot of the queue list (bug #4 fix). QueueService.Items returns the service's
+    // backing list by reference, so passing it straight through means Blazor parameter diffing sees
+    // an unchanged reference after an in-place Clear/remove/reorder and the child (QueueList /
+    // MudDropContainer) keeps its stale snapshot until reopened. We snapshot on first access and
+    // rebuild in OnQueueChanged, so every real mutation hands the child a NEW reference while
+    // progress-tick re-renders (the frequent path) reuse the cached one without allocating.
+    private IReadOnlyList<TrackDto>? _queueItemsCache;
+    private IReadOnlyList<TrackDto> QueueItems =>
+        _queueItemsCache ??= QueueService is null ? [] : QueueService.Items.ToList();
     private int QueueCurrentIndex => QueueService?.CurrentIndex ?? -1;
 
+    // Fixed-mode panel collapse state (OQ1 Option A). Default expanded so a release embed shows the
+    // up-next out of the box; the Queue button collapses it to let the viewer reclaim iframe space.
+    private bool _fixedPanelOpen = true;
+
+    // The Queue button's "open" state differs by mode: docked tracks the overlay, Fixed tracks the
+    // inline panel's expanded state. One button, mode-appropriate meaning.
+    private bool QueueButtonOpen => Fixed ? _fixedPanelOpen : _queueOpen;
+
     /// <summary>
     /// Display time - shows seek position while dragging, otherwise current playback time.
     /// </summary>
@@ -110,12 +149,28 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
             QueueService.QueueChanged += OnQueueChanged;
             _subscribedQueue = QueueService;
         }
+
+        // Theater Mode (Phase 20 §7): re-render the bar when TheaterMode flips so the "now showing" band
+        // appears/disappears. VisualizerControlState is injected (one stable scoped instance per session),
+        // so the subscribe is once-only — same idempotent subscribe-here / unsubscribe-on-dispose shape.
+        if (!_subscribedToVisualizerState)
+        {
+            VisualizerControlState.Changed += OnVisualizerStateChanged;
+            _subscribedToVisualizerState = true;
+        }
     }
 
+    private void OnVisualizerStateChanged() => InvokeAsync(StateHasChanged);
+
     private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
 
     private void OnQueueChanged()
     {
+        // Invalidate the snapshot so QueueItems rebuilds a fresh list on the next render.
+        // This gives Blazor a new reference on every real mutation (bug #4 reactivity preserved)
+        // while progress-tick re-renders that don't go through here keep the cached reference.
+        _queueItemsCache = null;
+
         // If a removal emptied the queue while the overlay was open, the button disappears (AC1) — close
         // the overlay so it cannot strand open over an empty queue. The button gate hides the overlay
         // mount too, so this keeps state and view consistent.
@@ -137,7 +192,21 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
         await QueueService.Previous();
     }
 
-    private void ToggleQueue() => _queueOpen = !_queueOpen;
+    // Docked: toggle the overlay. Fixed: collapse/expand the inline panel and flag a height re-post so
+    // the host iframe resizes to match the new panel state (OQ1 Option A). The post happens in
+    // OnAfterRenderAsync (below) once the DOM reflects the new state, then degrades safely — the host
+    // listener may simply not be present (Option B's behaviour).
+    private void ToggleQueue()
+    {
+        if (Fixed)
+        {
+            _fixedPanelOpen = !_fixedPanelOpen;
+            _embedHeightDirty = true;
+            return;
+        }
+
+        _queueOpen = !_queueOpen;
+    }
 
     private void CloseQueue() => _queueOpen = false;
 
@@ -150,17 +219,33 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
 
     private void ClearUpcoming() => QueueService?.ClearUpcoming();
 
-    // Jump reuses the existing "play from index" semantics (OQ2). This is the one queue action that
-    // touches playback — it streams the chosen track via the player.
+    // Jump to a row already in the queue. Under the deque model PlayRelease prepends (it is a PLAY,
+    // not an in-place seek), so a jump cannot route through it without duplicating the queue. JumpTo
+    // moves the pointer to the chosen row and streams it once — preserving deque order. This is the one
+    // queue action besides PLAY/skip that touches playback.
     private async Task OnQueueJump(int index)
     {
         if (QueueService == null) return;
-        await QueueService.PlayRelease(QueueService.Items, index);
+        await QueueService.JumpTo(index);
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        // The Fixed embed is already in normal flow — no spacer/clip needed.
+        // Fixed embed: post the live player height to the host so the iframe sizes to the panel. We
+        // post on the first render (so the host snaps to the expanded panel rather than the snippet's
+        // initial guess) and whenever the panel is collapsed/expanded (_embedHeightDirty). No spacer/
+        // clip here — the embed is in normal flow.
+        if (Fixed)
+        {
+            if (ShowFixedPanel && (!_embedHeightPosted || _embedHeightDirty))
+            {
+                _embedHeightDirty = false;
+                _embedHeightPosted = true;
+                await PostEmbedHeight();
+            }
+            return;
+        }
+
         // For the docked player: we observe in BOTH expanded and minimized states
         // so --player-height always reflects the live height of whichever element
         // is visible. This keeps the WaveformVisualizer clipped to the top of
@@ -169,7 +254,6 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
         //   minimized → observe _miniDock   (floating FAB container, ~56–60px)
         // The player-spacer's .minimized class uses a hardcoded height and ignores
         // the var, so publishing the FAB height here does not regress the spacer.
-        if (Fixed) return;
 
         var elementToObserve = _isMinimized ? _miniDock : _playerRoot;
         var alreadyOnThisElement = _spacerObserved && elementToObserve.Id == _lastObservedElement.Id;
@@ -198,6 +282,37 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
         }
     }
 
+    // Measure the player root's live height and post it to the host page (OQ1 Option A). Best-effort:
+    // a missing module or a host that ignores the message just means no outer resize (Option B value).
+    private async Task PostEmbedHeight()
+    {
+        var module = await GetEmbedModuleAsync();
+        if (module is null) return;
+
+        try
+        {
+            await module.InvokeVoidAsync("postHeight", _playerRoot);
+        }
+        catch (JSException)
+        {
+            // Runtime gone or element detached mid-teardown — nothing actionable.
+        }
+    }
+
+    private async Task<IJSObjectReference?> GetEmbedModuleAsync()
+    {
+        try
+        {
+            return _embedModule ??= await JsRuntime.InvokeAsync<IJSObjectReference>(
+                "import", "./js/embed/embed-frame.js");
+        }
+        catch (JSException)
+        {
+            // Module failed to load — the panel still renders and toggles; only the outer resize is lost.
+            return null;
+        }
+    }
+
     private async Task Expand() => await SetMinimized(false);
 
     /// <summary>
@@ -304,6 +419,12 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
             _subscribedQueue = null;
         }
 
+        if (_subscribedToVisualizerState)
+        {
+            VisualizerControlState.Changed -= OnVisualizerStateChanged;
+            _subscribedToVisualizerState = false;
+        }
+
         if (_spacerModule is not null)
         {
             try
@@ -318,5 +439,18 @@ public partial class AudioPlayerBar : ComponentBase, IAsyncDisposable
             }
             _spacerModule = null;
         }
+
+        if (_embedModule is not null)
+        {
+            try
+            {
+                await _embedModule.DisposeAsync();
+            }
+            catch (JSException)
+            {
+                // Runtime already gone (navigation/teardown) — nothing to clean up.
+            }
+            _embedModule = null;
+        }
     }
 }

DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css

@@ -42,6 +42,68 @@
     right: 0.5rem;
 }
 
+/* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid
+   --deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the
+   player dock that solid green reads too hot, so here — and only here — swap to the
+   translucent --deepdrft-play-chip-soft (same green, much less opaque).
+   The glyph stays --mud-palette-primary (green on the soft translucent wash), giving the
+   preferred green-on-green look on the player bar in dark mode. */
+::deep .player-surface .icon-container {
+    background-color: var(--deepdrft-play-chip-soft);
+}
+
+::deep .player-surface .icon-container .mud-icon-button {
+    color: var(--mud-palette-primary);
+}
+
+/* Theater Mode "now showing" band (Phase 20 §5/§7). Sits above the transport layout inside the
+   player surface and lets the bar grow taller to carry the hidden release's identity. The band only
+   renders when Theater is ON, so this geometry is gated by render-inclusion, not a CSS flag — when
+   Theater is OFF the player bar is byte-for-byte its non-Theater self.
+   Colour/surface come from the bar's themed --deepdrft-page-* aliases; no new token, no dark override. */
+::deep .now-showing {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 1px solid var(--deepdrft-page-text-muted);
+    min-width: 0;
+}
+
+/* Fixed cover box — the reused .deepdrft-track-detail-cover-art / -placeholder idioms are height:100%,
+   so the band supplies the square frame they fill. */
+::deep .now-showing-cover {
+    flex: 0 0 auto;
+    width: 44px;
+    height: 44px;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+::deep .now-showing-cover-art,
+::deep .now-showing-cover-placeholder {
+    width: 100%;
+}
+
+::deep .now-showing-cover-placeholder .mud-icon-root {
+    font-size: 24px;
+}
+
+::deep .now-showing-title-link {
+    flex: 1 1 auto;
+    min-width: 0;
+    text-decoration: none;
+}
+
+::deep .now-showing-title {
+    color: var(--deepdrft-page-text);
+}
+
+::deep .now-showing-share {
+    flex: 0 0 auto;
+}
+
 /* Minimized floating dock — positioning + hover only; colour from MudFab */
 .minimized-dock {
     position: fixed;

DeepDrftPublic.Client/Controls/AudioPlayerBar/NowShowingPanel.razor

@@ -0,0 +1,46 @@
+@namespace DeepDrftPublic.Client.Controls.AudioPlayerBar
+@using DeepDrftModels.DTOs
+@using DeepDrftPublic.Client.Common
+@using DeepDrftPublic.Client.Controls
+
+@* "Now showing" block surfaced in the player bar when Theater Mode is ON (Phase 20 §5/§7). Theater
+   hides the release page, so the bar carries the release identity the page would have shown: cover art,
+   the release title linked to its detail page, and a release-mode share. Purely presentational — it owns
+   no player logic and no Theater state; AudioPlayerBar mounts it only when state.TheaterMode &&
+   CurrentTrack?.Release is not null, so Release is non-null here.
+
+   Theming is all reuse (§8, zero new CSS): the cover reuses the deepdrft-track-detail-cover-art /
+   -placeholder idiom; the share glyph goes green-accent in both themes via .dd-accent-icon; surface and
+   text come from the bar's own .player-surface and the .now-showing-* classes in the global sheet, which
+   bind the theme-aware --deepdrft-page-* aliases. *@
+
+<div class="now-showing">
+    <div class="now-showing-cover">
+        @if (!string.IsNullOrEmpty(Release.ImagePath))
+        {
+            <div class="deepdrft-track-detail-cover-art now-showing-cover-art"
+                 style="@($"background-image: url('api/image/{Uri.EscapeDataString(Release.ImagePath)}');")"></div>
+        }
+        else
+        {
+            <div class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary now-showing-cover-placeholder">
+                <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
+            </div>
+        }
+    </div>
+
+    <a href="@ReleaseRoutes.DetailHref(Release)" class="now-showing-title-link">
+        <MudText Typo="Typo.subtitle2" Class="now-showing-title text-truncate">
+            @Release.Title
+        </MudText>
+    </a>
+
+    <div class="dd-accent-icon now-showing-share">
+        <SharePopover ReleaseEntryKey="@Release.EntryKey" ReleaseMedium="@Release.Medium" />
+    </div>
+</div>
+
+@code {
+    /// <summary>The current playing track's release. Non-null by the bar's mount gate.</summary>
+    [Parameter, EditorRequired] public ReleaseDto Release { get; set; } = default!;
+}

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerControls.razor

@@ -14,14 +14,6 @@
                    Color="Color.Primary"
                    Disabled="!CanPlay"
                    OnToggle="@TogglePlayPause"/>
-    @if (!Fixed || HasPrevious || HasNext)
-    {
-        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
-                       Color="Color.Primary"
-                       Size="Size.Large"
-                       OnClick="@SkipNext"
-                       Disabled="!HasNext"/>
-    }
     @if (!Fixed)
     {
         <MudIconButton Icon="@Icons.Material.Filled.Stop"
@@ -30,4 +22,12 @@
                        OnClick="@Stop"
                        Disabled="!IsLoaded"/>
     }
+    @if (!Fixed || HasPrevious || HasNext)
+    {
+        <MudIconButton Icon="@Icons.Material.Filled.SkipNext"
+                       Color="Color.Primary"
+                       Size="Size.Large"
+                       OnClick="@SkipNext"
+                       Disabled="!HasNext"/>
+    }
 </MudStack>

DeepDrftPublic.Client/Controls/AudioPlayerBar/PlayerTransportZone.razor

@@ -23,17 +23,19 @@
     @* Queue toggle: a second row between the transport controls and the timestamp (§3.1 placement —
        "below the control buttons, to the left of the timestamps"). Shown only when a queue is loaded,
        mirroring the skip-affordance gating, so an empty/single-track player is byte-for-byte unchanged. *@
-    @if (ShowQueueButton)
-    {
-        <MudTooltip Text="Queue">
-            <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
-                           Color="Color.Primary"
-                           Size="Size.Medium"
-                           OnClick="QueueToggle"
-                           aria-label="Queue"
-                           aria-expanded="@QueueOpen"
-                           Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
-        </MudTooltip>
-    }
-    <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+    <MudStack Row AlignItems="AlignItems.Center">
+        <TimestampLabel CurrentTime="DisplayTime" Duration="@Duration"/>
+        @if (ShowQueueButton)
+        {
+            <MudTooltip Text="Queue">
+                <MudIconButton Icon="@Icons.Material.Filled.QueueMusic"
+                               Color="Color.Primary"
+                               Size="Size.Medium"
+                               OnClick="QueueToggle"
+                               aria-label="Queue"
+                               aria-expanded="@QueueOpen"
+                               Class="@($"deepdrft-queue-toggle{(QueueOpen ? " deepdrft-queue-toggle-active" : "")}")"/>
+            </MudTooltip>
+        }
+    </MudStack>
 </MudStack>

DeepDrftPublic.Client/Controls/DeepDrftHero.razor.css

@@ -13,7 +13,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.65rem;
     letter-spacing: 0.28em;
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     text-transform: uppercase;
     margin-bottom: 1.8rem;
     display: flex;
@@ -27,7 +27,7 @@
     display: block;
     width: 2.5rem;
     height: 1px;
-    background: var(--deepdrft-green-accent);
+    background: var(--deepdrft-green);
 }
 
 .hero-title {
@@ -36,14 +36,14 @@
     font-weight: 300;
     line-height: 0.92;
     letter-spacing: -0.02em;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     margin-bottom: 0.5rem;
     animation-delay: 0.22s;
 }
 
 .hero-title em {
     font-style: italic;
-    color: var(--deepdrft-green);
+    color: var(--deepdrft-green-accent);
 }
 
 .hero-subtitle {
@@ -51,7 +51,7 @@
     font-size: clamp(1rem, 2vw, 1.35rem);
     font-weight: 300;
     font-style: italic;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     margin-bottom: 3rem;
     letter-spacing: 0.04em;
     animation-delay: 0.34s;
@@ -61,7 +61,7 @@
     font-family: var(--deepdrft-font-body);
     font-size: 0.92rem;
     line-height: 1.75;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.7;
     max-width: 36ch;
     margin-bottom: 3rem;
@@ -81,3 +81,11 @@
         align-items: stretch;
     }
 }
+
+/* Dark-mode accent override (Phase 18, Wave 3).
+   .hero-title and .hero-desc bind --deepdrft-page-text directly above (theme-aware).
+   The em italic is the only element needing an explicit dark lift:
+   --deepdrft-green (#1A3C34) is low-contrast on the navy ground; lift to green-accent. */
+:global(.deepdrft-theme-dark) .hero-title em {
+    color: var(--deepdrft-green-accent);
+}

DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css

@@ -2,7 +2,7 @@
     display: flex;
     justify-content: center;
     align-content: center;
-    background-color: var(--deepdrft-soft);
+    background-color: var(--deepdrft-play-chip);
     border-radius: 50%;
     height: 60px;
     width: 60px;
@@ -10,5 +10,27 @@
 }
 
 .icon-container:hover {
-    background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%);
+    background-color: color-mix(in srgb, var(--deepdrft-play-chip), var(--deepdrft-navy-mid) 25%);
+}
+
+/* In dark mode the chip is moss-green and MudIconButton's Color.Primary/Secondary green
+   glyph would vanish against it, so pin the glyph to --deepdrft-play-glyph (navy) in dark
+   only. In light mode the token also resolves to navy, but applying it there overrides
+   Color.Secondary (green-accent) on hero/row mounts — a visible regression. Scoping to
+   .deepdrft-theme-dark preserves the MudBlazor Color prop in light and fixes only dark.
+   ::deep reaches the portaled-in-scope MudIconButton icon, which doesn't carry this
+   component's scope attribute. */
+.deepdrft-theme-dark .icon-container ::deep .mud-icon-button {
+    color: var(--deepdrft-play-glyph);
+}
+
+/* PlayStateIcon is authoritative over its own glyph colour — a surrounding .dd-accent-icon
+   must NOT recolor the play-chip glyph in dark. The consolidation rule is:
+     .dd-accent-icon .mud-icon-button .mud-icon-root  (0,3,0) !important
+   After Blazor scoped-CSS compilation this rule becomes:
+     .deepdrft-theme-dark .icon-container[b-xxx] .mud-icon-button .mud-icon-root  (0,5,0) !important
+   (0,5,0) beats (0,3,0) — wins on specificity; !important parity is irrelevant.
+   Dark only: light already renders the navy glyph via the MudBlazor Color prop. */
+.deepdrft-theme-dark .icon-container ::deep .mud-icon-button .mud-icon-root {
+    color: var(--deepdrft-play-glyph) !important;
 }

DeepDrftPublic.Client/Controls/QueueList.razor

@@ -71,6 +71,13 @@
 
     private MudDropContainer<QueueRow>? _dropContainer;
 
+    // MudDropContainer snapshots its Items into internal drop zones and does not re-read them on a
+    // plain re-render — so a Clear/remove/reorder that changes the parent's Items list must be pushed
+    // into the container explicitly, or the panel shows the stale order until reopened (bug #4). The
+    // parent passes a fresh Items reference per mutation; refreshing here on every parameter set re-flows
+    // the container's snapshot to match. Cheap: Refresh only re-reads the bound list.
+    protected override void OnParametersSet() => _dropContainer?.Refresh();
+
     // Index-tagged view rows. The index is the row's position in Items at render time and is the
     // value surfaced to the parent's callbacks — the component never mutates the underlying list.
     private List<QueueRow> Rows =>

DeepDrftPublic.Client/Controls/QueueOverlay.razor

@@ -20,7 +20,7 @@
             Class="deepdrft-queue-overlay">
     <div class="deepdrft-queue-modal" @onclick:stopPropagation="true">
         <div class="deepdrft-queue-modal-header">
-            <span class="deepdrft-queue-modal-title">Up Next</span>
+            <span class="deepdrft-queue-modal-title">Playlist</span>
             <MudButton Variant="Variant.Text"
                        Size="Size.Small"
                        Color="Color.Primary"

DeepDrftPublic.Client/Controls/ReleaseDetailScaffold.razor.cs

@@ -13,6 +13,7 @@ namespace DeepDrftPublic.Client.Controls;
 public partial class ReleaseDetailScaffold : ComponentBase
 {
     [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    [CascadingParameter] public IQueueService? Queue { get; set; }
 
     [Parameter] public required string Title { get; set; }
     [Parameter] public string? Artist { get; set; }
@@ -96,13 +97,19 @@ public partial class ReleaseDetailScaffold : ComponentBase
     {
         if (Track is null || PlayerService is null) return;
 
-        // Toggle if this track is already active (playing or paused); otherwise start a fresh
-        // stream. SelectTrackStreaming is the live entry point — the buffered path is dead.
+        // Toggle if this track is already active (playing or paused); otherwise PLAY it —
+        // prepend to the queue's front (deque PLAY semantics) so it becomes current and
+        // the existing queue stays intact behind it. Falls back to a direct stream when
+        // the queue cascade is absent (prerender / non-interactive).
         var isThisTrack = PlayerService.CurrentTrack?.Id == Track.Id;
         if (isThisTrack && (PlayerService.IsPlaying || PlayerService.IsPaused))
         {
             await PlayerService.TogglePlayPause();
         }
+        else if (Queue is not null)
+        {
+            await Queue.PlayTrack(Track);
+        }
         else
         {
             await PlayerService.SelectTrackStreaming(Track);

DeepDrftPublic.Client/Controls/ReleaseHeroOverlay.razor

@@ -52,7 +52,7 @@
         </MudStack>
         @if (ShareContent is not null)
         {
-            <div class="release-hero-share">
+            <div class="release-hero-share dd-accent-icon">
                 @ShareContent
             </div>
         }
@@ -74,7 +74,7 @@
             </div>
             @if (PlayContent is not null)
             {
-                <div class="release-hero-play">
+                <div class="release-hero-play dd-accent-icon">
                     @PlayContent
                 </div>
             }

DeepDrftPublic.Client/Controls/ReleaseHeroOverlay.razor.css

@@ -151,14 +151,13 @@
     flex: 0 0 auto;
 }
 
-/* The play affordance and share button sit over a dark image — force their icon glyphs to the
-   light theme color regardless of MudBlazor's Secondary palette. Both PlayStateIcon and
-   SharePopover render MudIconButton / MudProgressCircular internals, so ::deep is required. */
-::deep .release-hero-play .mud-icon-button,
-::deep .release-hero-play .mud-progress-circular,
-::deep .release-hero-share .mud-icon-button {
-    color: var(--deepdrft-white);
-}
+/* The play/share glyphs are coloured by the shared .dd-accent-icon treatment (green-accent in
+   both themes) applied on .release-hero-play / .release-hero-share in ReleaseHeroOverlay.razor —
+   see deepdrft-styles.css. No co-located colour rule here: the former white override was removed
+   because its glyph clauses (.mud-icon-button .mud-icon-root) could not reach the
+   .mud-secondary-text !important glyph at wrapper specificity, and its spinner clause
+   (.mud-progress-circular) was live but is now correctly covered by .dd-accent-icon —
+   making the spinner green-accent (was white) in light mode, the one intentional light delta. */
 
 @media (max-width: 599.98px) {
     .release-hero {

DeepDrftPublic.Client/Controls/SeoHead.razor

@@ -0,0 +1,116 @@
+@using DeepDrftPublic.Client.Common
+@inject SeoOptions Seo
+@inject SeoEnvironment SeoEnv
+@inject NavigationManager Nav
+
+@*
+   The single reusable SEO head surface (Phase 22). Presentational and parameter-fed — owns no fetch and
+   no business logic (C4); it reads the injected SeoOptions for defaults and NavigationManager for the
+   current path. Renders <PageTitle> (the sole title source — pages drop their bare <PageTitle>) plus a
+   <HeadContent> block carrying the full standard/OG/Twitter/JSON-LD surface (§3), projected into the
+   <HeadOutlet> in App.razor so it is present in the prerendered HTML a crawler sees (C2/AC1).
+
+   Identical output across the InteractiveAuto double render (AC6): every value comes from the parameter
+   Model (built from the page's bridged PersistentComponentState) and config — never a browser API — so
+   the prerender and WASM passes render byte-identical tags.
+
+   Partial data (C6/AC4): a missing value falls back to config or omits its tag; og:image always resolves
+   (the default guarantees presence) so there is never a content="" attribute or a broken node.
+*@
+
+<PageTitle>@_fullTitle</PageTitle>
+
+<HeadContent>
+    @* Standard / search *@
+    <meta name="description" content="@_description" />
+    <link rel="canonical" href="@_canonical" />
+    <meta name="robots" content="@_robots" />
+    <meta name="application-name" content="@Seo.SiteName" />
+
+    @* Open Graph *@
+    <meta property="og:title" content="@Model.Title" />
+    <meta property="og:description" content="@_description" />
+    <meta property="og:url" content="@_canonical" />
+    <meta property="og:type" content="@_ogType" />
+    <meta property="og:site_name" content="@Seo.SiteName" />
+    <meta property="og:locale" content="@Seo.Locale" />
+    <meta property="og:image" content="@_image" />
+    @if (_hasCover)
+    {
+        <meta property="og:image:alt" content="@($"{Model.Title} cover art")" />
+    }
+
+    @* Music-vertical OG (release pages only) *@
+    @if (!string.IsNullOrWhiteSpace(Model.Artist))
+    {
+        <meta property="music:musician" content="@Model.Artist" />
+    }
+    @if (Model.ReleaseDate is not null)
+    {
+        <meta property="music:release_date" content="@Model.ReleaseDate.Value.ToString("yyyy-MM-dd")" />
+    }
+    @if (_isoDuration is not null)
+    {
+        <meta property="music:duration" content="@_isoDuration" />
+    }
+
+    @* Twitter Card. No twitter:site / twitter:creator — no X account exists (OQ3). *@
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="@Model.Title" />
+    <meta name="twitter:description" content="@_description" />
+    <meta name="twitter:image" content="@_image" />
+
+    @* JSON-LD structured data *@
+    @if (!string.IsNullOrEmpty(Model.JsonLd))
+    {
+        <script type="application/ld+json">@((MarkupString)Model.JsonLd)</script>
+    }
+</HeadContent>
+
+@code {
+    /// <summary>The page's resolved SEO input, built via a <see cref="SeoModel"/> factory.</summary>
+    [Parameter, EditorRequired] public required SeoModel Model { get; set; }
+
+    private string _fullTitle = string.Empty;
+    private string _description = string.Empty;
+    private string _canonical = string.Empty;
+    private string _robots = string.Empty;
+    private string _ogType = "website";
+    private string _image = string.Empty;
+    private bool _hasCover;
+    private string? _isoDuration;
+
+    protected override void OnParametersSet()
+    {
+        _fullTitle = $"{Model.Title} · {Seo.TitleSuffix}";
+        _description = string.IsNullOrWhiteSpace(Model.Description) ? Seo.DefaultDescription : Model.Description;
+        // Default robots is environment-gated (non-production → noindex,nofollow) so beta/staging is never
+        // crawled; an explicit per-page Robots still wins (e.g. the 404's / soft-404's noindex,follow).
+        _robots = string.IsNullOrWhiteSpace(Model.Robots) ? SeoEnv.DefaultRobots : Model.Robots;
+        _ogType = OgTypeString(Model.OgType);
+
+        // Canonical: BaseUrl + the model's path, defaulting to the current relative path. The origin is
+        // always config (no browser API) so prerender and WASM agree (§5).
+        var path = Model.CanonicalPath ?? RelativePath();
+        _canonical = SeoUrls.Absolute(Seo, path);
+
+        _hasCover = !string.IsNullOrWhiteSpace(Model.ImagePath);
+        _image = SeoUrls.CoverOrDefault(Seo, Model.ImagePath);
+        _isoDuration = SeoUrls.IsoDuration(Model.DurationSeconds);
+    }
+
+    private string RelativePath()
+    {
+        var path = Nav.ToBaseRelativePath(Nav.Uri);
+        var query = path.IndexOf('?');
+        if (query >= 0) path = path[..query];
+        return "/" + path;
+    }
+
+    private static string OgTypeString(SeoOgType type) => type switch
+    {
+        SeoOgType.MusicAlbum => "music.album",
+        SeoOgType.MusicSong => "music.song",
+        _ => "website",
+    };
+}

DeepDrftPublic.Client/Controls/StreamNowButton.razor

@@ -27,6 +27,7 @@
     [Parameter] public string LoadingLabel { get; set; } = "Finding a track…";
     [Parameter] public EventCallback OnStreamStarted { get; set; }
     [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    [CascadingParameter] public IQueueService? Queue { get; set; }
     [Inject] public required ITrackDataService TrackData { get; set; }
 
     private bool _streamLoading;
@@ -79,7 +80,12 @@
             _findingTrack = false;
             StateHasChanged();
 
-            if (PlayerService is not null)
+            // PLAY semantics: prepend to the queue's front so a "stream now" track becomes current and
+            // any existing queue stays intact behind it. Falls back to a direct stream when the queue
+            // cascade is absent.
+            if (Queue is not null)
+                await Queue.PlayTrack(track);
+            else if (PlayerService is not null)
                 await PlayerService.SelectTrackStreaming(track);
         }
         catch (Exception)

DeepDrftPublic.Client/Controls/TheaterModeToggle.razor

@@ -0,0 +1,59 @@
+@namespace DeepDrftPublic.Client.Controls
+@using DeepDrftPublic.Client.Services
+@implements IDisposable
+@inject WaveformVisualizerControlState State
+
+@* Theater-Mode toggle (Phase 20 §3). The single affordance placed identically on all three release
+   detail pages — immediately to the LEFT of the lava-lamp WaveformVisualizerControlPopover trigger.
+   It is purely a mutation surface: tapping it flips State.TheaterMode and raises Changed; the detail
+   pages observe that to gate their content @if, and the player bar observes it to grow. This component
+   reaches into no page and no bar — single source, multiple observers (§6).
+
+   Visible only when the lava OR waveform subsystem is on — there is nothing to go to theater FOR if both
+   are off (§3.2) — AND when <see cref="Available"/> is true. The page supplies Available so the toggle
+   only appears when this page's release is the one playing (Phase 20 Wave 2 §3): the toggle owns the
+   subsystem gate; the page owns the release-playing predicate. Disabled until interactive (§3.4), the
+   same prerender guard the lava/Play buttons use. Active visual state when Theater is ON. .dd-accent-icon
+   gives the green-accent glyph in both themes with zero new CSS (§8) — same as the lava-lamp trigger. *@
+
+@if (Available && (State.LavaEnabled || State.WaveformEnabled))
+{
+    <div class="dd-accent-icon">
+        <MudTooltip Text="@(State.TheaterMode ? "Exit theater mode" : "Theater mode")">
+            <MudIconButton Icon="@Icons.Material.Filled.Theaters"
+                           Size="@IconSize"
+                           Color="Color.Secondary"
+                           Disabled="@(!RendererInfo.IsInteractive)"
+                           OnClick="@Toggle"
+                           aria-label="Theater mode"
+                           aria-pressed="@State.TheaterMode" />
+        </MudTooltip>
+    </div>
+}
+
+@code {
+    /// <summary>Trigger-icon size. Defaults Large to match the lava-lamp popover trigger it sits beside.</summary>
+    [Parameter] public Size IconSize { get; set; } = Size.Large;
+
+    /// <summary>
+    /// Whether the toggle is available on this surface (Phase 20 Wave 2 §3). The page passes the
+    /// "this release is the one playing" predicate here; Theater Mode only applies to the playing
+    /// release, so a detail page whose release is not playing passes <c>false</c> and shows no toggle.
+    /// Defaults <c>true</c> so surfaces with no release-scoping (none today) keep the subsystem-only gate.
+    /// </summary>
+    [Parameter] public bool Available { get; set; } = true;
+
+    protected override void OnInitialized() => State.Changed += OnStateChanged;
+
+    // The toggle's own visibility and active state both key off State, which another observer (or this
+    // button) may mutate, so re-render on every Changed — same idempotent posture the visualizer bridge uses.
+    private void OnStateChanged() => InvokeAsync(StateHasChanged);
+
+    private void Toggle()
+    {
+        State.TheaterMode = !State.TheaterMode;
+        State.NotifyChanged();
+    }
+
+    public void Dispose() => State.Changed -= OnStateChanged;
+}

DeepDrftPublic.Client/Controls/WaveformVisualizerControlPopover.razor

@@ -29,15 +29,17 @@
    the shared WaveformVisualizerControlState and raises Changed; the visualizer bridge subscribes. This
    host only toggles open/closed and centers the panel — it stays purely presentational. *@
 
-<MudTooltip Text="Visualizer settings">
-    <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
-                   Size="@IconSize"
-                   Color="Color.Secondary"
-                   Disabled="@(!RendererInfo.IsInteractive)"
-                   OnClick="@Toggle"
-                   aria-label="Visualizer settings"
-                   aria-expanded="@_open" />
-</MudTooltip>
+<div class="dd-accent-icon">
+    <MudTooltip Text="Visualizer settings">
+        <MudIconButton Icon="@(_open ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
+                       Size="@IconSize"
+                       Color="Color.Secondary"
+                       Disabled="@(!RendererInfo.IsInteractive)"
+                       OnClick="@Toggle"
+                       aria-label="Visualizer settings"
+                       aria-expanded="@_open" />
+    </MudTooltip>
+</div>
 
 @* The tinted modal scrim that also HOLDS the panel. DarkBackground = the mild tint; OnClick on the scrim
    dismisses (knob-drag-safe, see header). The panel is the overlay's centered child; it stops click

DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor

@@ -34,147 +34,164 @@
 
     @if (Visible)
     {
-        @* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
-        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+        <MudGrid>
+            @*  ── Row 1 — MODE (always visible). ──  *@
+            <MudItem xs="2" Class="d-flex align-center">
+                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                    <span class="wvc-section-label">MODE:</span>
+                </MudStack>
+            </MudItem>
             
-                <MudTooltip Text="Show the sound, or hide the ribbon.">
-                    <div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
-                        <MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
-                                       Color="Color.Primary"
-                                       OnClick="@ToggleWaveform"
-                                       aria-label="Waveform ribbon on or off"
-                                       aria-pressed="@ControlState.WaveformEnabled"/>
-                    </div>
-                </MudTooltip>
+            <MudItem xs="10">
+                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                    <MudTooltip Text="Show the sound, or hide the ribbon.">
+                        <div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
+                            <MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
+                                           Color="Color.Primary"
+                                           OnClick="@ToggleWaveform"
+                                           aria-label="Waveform ribbon on or off"
+                                           aria-pressed="@ControlState.WaveformEnabled"/>
+                        </div>
+                    </MudTooltip>
 
-                @* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
+                    @* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
                    present, so visible only when BOTH are on (§3 truth table). *@
-                @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
-                {
-                    <MudTooltip Text="How hard the blobs body-check the beat.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
-                            <RadialKnob Value="@ControlState.CollisionStrength"
-                                        ValueChanged="@OnCollisionStrengthChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary"/>
-                            <MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
-                        </div>
-                    </MudTooltip>
-                }
-            @* </div> *@
+                    @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
+                    {
+                        <MudTooltip Text="How hard the blobs body-check the beat.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
+                                <RadialKnob Value="@ControlState.CollisionStrength"
+                                            ValueChanged="@OnCollisionStrengthChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Compress"
+                                         Size="Size.Small"
+                                         Color="Color.Primary"
+                                         Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    }
 
-            @* 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" role="group" aria-label="Color gradient rotation speed">
-                    <RadialKnob Value="@ControlState.GradientRotationSpeed"
-                                ValueChanged="@OnGradientRotationSpeedChanged"
-                                Min="0" Max="1" Step="0.001"
-                                Size="64"
-                                Color="Color.Primary"/>
-                    <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
-                </div>
-            </MudTooltip>
+                    @if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
+                    {
+                        <MudTooltip Text="How fast the lamp drifts through its colors.">
+                            <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"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    }
 
-            <MudTooltip Text="Light the lamp — or let it go cold.">
-                <div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
-                    <MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
-                                   Color="Color.Primary"
-                                   OnClick="@ToggleLava"
-                                   aria-label="Lava field on or off"
-                                   aria-pressed="@ControlState.LavaEnabled"/>
-                </div>
-            </MudTooltip>
-
-        </MudStack>
-
-        @* ── Row 2 — WAVE section (only when waveform on). Both controls are RadialKnobs (scroll reverted
-           from MudSlider per Phase 15 polish); width pinned far-right via wvc-row-wave space-between. ── *@
-        @if (ControlState.WaveformEnabled)
-        {
-            <div class="wvc-row wvc-row-section wvc-row-wave">
-                <span class="wvc-section-label">WAVE:</span>
-
-                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
-                    <MudTooltip Text="How fast the sound rolls by.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
-                            <RadialKnob Value="@ControlState.ScrollSpeed"
-                                        ValueChanged="@OnScrollSpeedChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
-
-                    <MudTooltip Text="How wide the ribbon spreads across the lamp.">
-                        <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"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
+                    <MudTooltip Text="Light the lamp — or let it go cold.">
+                        <div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
+                            <MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
+                                           Color="Color.Primary"
+                                           OnClick="@ToggleLava"
+                                           aria-label="Lava field on or off"
+                                           aria-pressed="@ControlState.LavaEnabled"/>
                         </div>
                     </MudTooltip>
                 </MudStack>
-            </div>
-        }
+            </MudItem>
             
-        @* ── Row 3 — LAVA section (only when lava on). ── *@
-        @if (ControlState.LavaEnabled)
-        {
-            <div class="wvc-row wvc-row-section">
-                <span class="wvc-section-label">LAVA:</span>
+            @*  ── Row 2 — WAVE section (only when waveform on). ──  *@
+            @if (ControlState.WaveformEnabled)
+            {
+                <MudItem xs="2" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                        <span class="wvc-section-label">WAVE:</span>
+                    </MudStack>
+                </MudItem>
 
-                <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
-                    <MudTooltip Text="How heavy the wax feels — float, or sink.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
-                            <RadialKnob Value="@ControlState.LavaGravity"
-                                        ValueChanged="@OnLavaGravityChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+                <MudItem xs="10">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                        <MudTooltip Text="How fast the sound rolls by.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
+                                <RadialKnob Value="@ControlState.ScrollSpeed"
+                                            ValueChanged="@OnScrollSpeedChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
 
-                    <MudTooltip Text="Crank the burner. More heat, more rolling boil.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
-                            <RadialKnob Value="@ControlState.LavaHeat"
-                                        ValueChanged="@OnLavaHeatChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+                        <MudTooltip Text="How wide the ribbon spreads across the lamp.">
+                            <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"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    </MudStack>
+                </MudItem>
+            }
             
-                    <MudTooltip Text="How much goo is in the lamp.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
-                            <RadialKnob Value="@ControlState.FluidAmount"
-                                        ValueChanged="@OnFluidAmountChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
+            @if (ControlState.LavaEnabled)
+            {
+                <MudItem xs="2" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
+                        <span class="wvc-section-label">LAVA:</span>
+                    </MudStack>
+                </MudItem>
 
-                    <MudTooltip Text="Runny and gooey, or tight little globes.">
-                        <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
-                            <RadialKnob Value="@ControlState.FluidViscosity"
-                                        ValueChanged="@OnFluidViscosityChanged"
-                                        Min="0" Max="1" Step="0.001"
-                                        Size="64"
-                                        Color="Color.Primary" />
-                            <MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
-                        </div>
-                    </MudTooltip>
-                </MudStack>
-            </div>
-        }
+                <MudItem xs="10" Class="d-flex align-center">
+                    <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
+                        <MudTooltip Text="How heavy the wax feels — float, or sink.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
+                                <RadialKnob Value="@ControlState.LavaGravity"
+                                            ValueChanged="@OnLavaGravityChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+
+                        <MudTooltip Text="Crank the burner. More heat, more rolling boil.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
+                                <RadialKnob Value="@ControlState.LavaHeat"
+                                            ValueChanged="@OnLavaHeatChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+
+                        <MudTooltip Text="How much wax is in the lamp.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
+                                <RadialKnob Value="@ControlState.FluidAmount"
+                                            ValueChanged="@OnFluidAmountChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+
+                        <MudTooltip Text="Runny and gooey, or tight little globes.">
+                            <div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
+                                <RadialKnob Value="@ControlState.FluidViscosity"
+                                            ValueChanged="@OnFluidViscosityChanged"
+                                            Min="0" Max="1" Step="0.001"
+                                            Size="64"
+                                            Color="Color.Primary"/>
+                                <MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
+                            </div>
+                        </MudTooltip>
+                    </MudStack>
+                </MudItem>
+            }
+        </MudGrid>
     }
 
 </div>
@@ -209,12 +226,14 @@
     private void ToggleLava()
     {
         ControlState.LavaEnabled = !ControlState.LavaEnabled;
+        ControlState.CoerceTheaterMode();
         ControlState.NotifyChanged();
     }
 
     private void ToggleWaveform()
     {
         ControlState.WaveformEnabled = !ControlState.WaveformEnabled;
+        ControlState.CoerceTheaterMode();
         ControlState.NotifyChanged();
     }
 

DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css

@@ -38,3 +38,8 @@
     color: var(--mud-palette-primary);
     opacity: 0.78;
 }
+
+.wvc-row {
+    display: flex;
+    width: 100%;
+}

DeepDrftPublic.Client/Helpers/EmbedSnippetBuilder.cs

@@ -3,19 +3,74 @@ namespace DeepDrftPublic.Client.Helpers;
 /// <summary>
 /// Builds the iframe embed snippet the share popover copies. Two targets: a single track
 /// (<see cref="ForTrack"/> → <c>FramePlayer?TrackEntryKey=...</c>) and a whole release
-/// (<see cref="ForRelease"/> → <c>FramePlayer?ReleaseEntryKey=...</c>). The iframe chrome
-/// (dimensions, border radius, autoplay permission) is identical across both, defined once here.
+/// (<see cref="ForRelease"/> → <c>FramePlayer?ReleaseEntryKey=...</c>).
+///
+/// <para>
+/// The two snippets diverge in height by design (Phase 17 §4.1, OQ6): a single-track embed has no
+/// queue, so <see cref="ForTrack"/> stays at the compact player height; a release embed renders the
+/// always-shown queue panel below the controls, so <see cref="ForRelease"/> is taller to show it
+/// without clipping. Other iframe chrome (width, border radius, autoplay permission) is identical and
+/// defined once in <see cref="Frame"/>.
+/// </para>
+///
+/// <para>
+/// OQ1 Option A — collapse/expand resize handshake. The release snippet carries a tiny host-side
+/// listener: the embedded player posts its desired height when the viewer collapses/expands the
+/// queue panel, and the listener sizes this specific iframe to match. It is scoped to the snippet's
+/// own iframe (matched by id) and ignores any message whose shape does not match, so it cannot be
+/// driven by foreign frames. It degrades to Option B's behaviour if the host strips the script: the
+/// panel still renders and toggles inside the iframe at its default (expanded) height — only the
+/// outer resize is lost. The track snippet needs no script (no panel, no toggle).
+/// </para>
+///
+/// <para>
+/// Multi-embed isolation: each <see cref="ForRelease"/> call mints a fresh random token (8 hex
+/// chars). The token is used as the iframe id (<c>deepdrft-embed-{token}</c>) and threaded into
+/// the iframe src as <c>&amp;EmbedId={token}</c> so the iframe can learn its own id. The host-side
+/// resize script matches incoming messages on <c>embedId</c> and resizes only the iframe whose id
+/// matches the token — two releases on one host page resize independently without cross-talk. Two
+/// calls for the same release still get distinct tokens, ensuring uniqueness even when the same
+/// release is pasted twice. Older snippets that lack <c>embedId</c> in their postMessage payload are
+/// silently ignored by the script (backward-compatible degradation).
+/// </para>
+///
 /// Pure string composition so the snippet shape is unit-testable without rendering the component.
 /// </summary>
 public static class EmbedSnippetBuilder
 {
+    // Compact single-track height (the historical embed height — must not change: UC6/AC6).
+    private const int TrackHeight = 196;
+
+    // Release height: the compact player plus the queue panel (fixed, internally scrollable past N
+    // rows per OQ6). The panel collapses to the track height via the resize handshake below.
+    private const int ReleaseHeight = 384;
+
     // baseUri carries a trailing slash (NavigationManager.BaseUri), so "FramePlayer" appends cleanly.
     public static string ForTrack(string baseUri, string trackEntryKey)
-        => Frame($"{baseUri}FramePlayer?TrackEntryKey={trackEntryKey}");
+        => Frame($"{baseUri}FramePlayer?TrackEntryKey={trackEntryKey}", TrackHeight);
 
     public static string ForRelease(string baseUri, string releaseEntryKey)
-        => Frame($"{baseUri}FramePlayer?ReleaseEntryKey={releaseEntryKey}");
+    {
+        // Mint a fresh random token per call so two embeds on the same host page never share an id,
+        // even when they point at the same release.
+        var token = Guid.NewGuid().ToString("N")[..8];
+        var iframeId = $"deepdrft-embed-{token}";
+        var src = $"{baseUri}FramePlayer?ReleaseEntryKey={releaseEntryKey}&EmbedId={token}";
+        return Frame(src, ReleaseHeight, iframeId, ResizeScript(iframeId, token));
+    }
 
-    private static string Frame(string src)
-        => $"""<iframe src="{src}" width="656" height="196" frameborder="0" style="border-radius:8px;" allow="autoplay"></iframe>""";
+    private static string Frame(string src, int height, string iframeId = "deepdrft-embed", string trailingScript = "")
+        => $"""<iframe id="{iframeId}" src="{src}" width="656" height="{height}" frameborder="0" style="border-radius:8px;" allow="autoplay"></iframe>{trailingScript}""";
+
+    // Host-side listener: resize the matching iframe when the embedded player posts its panel height.
+    // The embedId field in the payload is matched against the snippet's own token so only this
+    // iframe is driven — foreign frames or other release embeds on the same page cannot interfere.
+    // The height is clamped to a sane floor so a bad payload can't collapse the player away.
+    // Messages without embedId (older snippets) are silently ignored.
+    private static string ResizeScript(string iframeId, string token) =>
+        "<script>(function(){var id=\"" + iframeId + "\",tok=\"" + token + "\";" +
+        "window.addEventListener(\"message\",function(e){var d=e.data;" +
+        "if(!d||d.type!==\"deepdrft-embed-resize\"||d.embedId!==tok)return;" +
+        "var f=document.getElementById(id);var h=Number(d.height);" +
+        "if(f&&h>=150)f.style.height=h+\"px\";});})();</script>";
 }

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor

@@ -4,8 +4,34 @@
         <ul class="deepdrft-footer-links">
             <li><a href="/about">About</a></li>
             <li><a href="#">Contact</a></li>
+            <li><button class="deepdrft-footer-privacy-btn" @onclick="@OpenPrivacy" type="button" aria-haspopup="dialog">Privacy</button></li>
         </ul>
         <div class="deepdrft-footer-copy">© 2026 Deep DRFT</div>
     </div>
-    <p class="deepdrft-footer-privacy">We keep a random tag in your browser so we can count how many people a track reaches — not who they are. No account, no name, nothing personal, nothing shared with anyone else. Clear your browser data and the tag&#8217;s gone.</p>
 </footer>
+
+<MudOverlay Visible="@_privacyOpen"
+            DarkBackground="true"
+            Modal="true"
+            OnClick="@ClosePrivacy"
+            Class="deepdrft-privacy-overlay">
+    <div class="deepdrft-privacy-modal" @onclick:stopPropagation="true">
+        <div class="deepdrft-privacy-modal-header">
+            <span class="deepdrft-privacy-modal-title">Privacy</span>
+            <MudIconButton Icon="@Icons.Material.Filled.Close"
+                           Size="Size.Small"
+                           Color="Color.Default"
+                           OnClick="@ClosePrivacy"
+                           aria-label="Close privacy note"
+                           Class="deepdrft-privacy-modal-close" />
+        </div>
+        <p class="deepdrft-privacy-modal-body">We keep a random tag in your browser so we can count how many people a track reaches — not who they are. No account, no name, nothing personal, nothing shared with anyone else.</p>
+    </div>
+</MudOverlay>
+
+@code {
+    private bool _privacyOpen;
+
+    private void OpenPrivacy() => _privacyOpen = true;
+    private void ClosePrivacy() => _privacyOpen = false;
+}

DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css

@@ -3,7 +3,7 @@
        WaveformVisualizer backdrop (z-index:0), keeping footer text fully legible. */
     position: relative;
     z-index: 1;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     border-top: 1px solid var(--deepdrft-border);
     padding: 3rem;
     display: flex;
@@ -22,7 +22,7 @@
     font-family: var(--deepdrft-font-display);
     font-size: 1.5rem;
     font-weight: 400;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
 }
 
 .deepdrft-footer-logo span {
@@ -38,33 +38,37 @@
     padding: 0;
 }
 
-.deepdrft-footer-links a {
+.deepdrft-footer-links a,
+.deepdrft-footer-links button {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.62rem;
     letter-spacing: 0.18em;
     text-transform: uppercase;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     text-decoration: none;
     transition: color 0.2s;
 }
 
-.deepdrft-footer-links a:hover { color: var(--deepdrft-navy); }
+.deepdrft-footer-links a:hover,
+.deepdrft-footer-links button:hover { color: var(--deepdrft-page-text); }
 
 .deepdrft-footer-copy {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.58rem;
     letter-spacing: 0.12em;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
 }
 
-.deepdrft-footer-privacy {
-    font-family: var(--deepdrft-font-mono);
-    font-size: 0.55rem;
-    letter-spacing: 0.08em;
-    color: var(--deepdrft-muted);
-    opacity: 0.7;
+/* PRIVACY trigger — reset button chrome so it reads as a link, not a button element.
+   Typography/colour shared with footer <a> links via the grouped selector above. */
+.deepdrft-footer-privacy-btn {
+    background: none;
+    border: none;
+    padding: 0;
     margin: 0;
-    line-height: 1.6;
+    cursor: pointer;
+    line-height: inherit;
+    font-family: inherit;
 }
 
 @media (max-width: 440px) {

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor

@@ -3,7 +3,7 @@
 @using DeepDrftPublic.Client.Services
 
 @* Desktop Menu *@
-<div class="d-none d-sm-flex">
+<div class="d-none d-md-flex">
     <nav class="@NavClass">
         <MudStack Row AlignItems="AlignItems.Center">
             <a class="dd-nav-brand" href="/">
@@ -42,14 +42,29 @@
 
         <div class="dd-nav-actions">
             <StreamNowButton ButtonClass="dd-nav-cta" ButtonLabel="Stream Now &#9654;"/>
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
         </div>
     </nav>
 </div>
 
 @* Mobile Menu *@
-<div class="d-flex d-sm-none">
+<div class="d-flex d-md-none">
     <nav class="@NavClass">
-        <a class="dd-nav-brand" href="/">Deep DRFT</a>
+        <MudStack Row AlignItems="AlignItems.Center">
+            <a class="dd-nav-brand" href="/">
+                <MudImage Src="img/deepdrft-logo-l.webp" 
+                          Alt="Deep Drft Ornamental Logo Left"
+                          Width="24"
+                          Height="24 "/>
+                
+                <span class="mx-2">Deep DRFT</span>
+                
+                <MudImage Src="img/deepdrft-logo-r.webp" 
+                          Alt="Deep Drft Ornamental Logo Right"
+                          Width="24"
+                          Height="24 "/>
+            </a>
+        </MudStack>
         
         <div class="dd-nav-actions">
             <button type="button"
@@ -59,6 +74,8 @@
                     @onclick="ToggleMobileMenu">
                 <span></span><span></span><span></span>
             </button>
+            
+            <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
         </div>
 
         @if (_mobileMenuOpen)
@@ -117,6 +134,12 @@
 
     private string DarkLightModeIconSvg => IsDarkMode ? DDIcons.GasLampLit : DDIcons.GasLamp;
 
+    private string DarkLightModeButtonIcon => IsDarkMode switch
+    {
+        true => DDIcons.GasLampLit,
+        false => DDIcons.GasLamp,
+    };
+    
     private async Task DarkModeToggle()
     {
         IsDarkMode = !IsDarkMode;

DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css

@@ -16,7 +16,12 @@
     justify-content: space-between;
     gap: 2rem;
 
-    padding: 1.5rem 3rem;
+    /* Height is pinned to the shared --deepdrft-nav-height token so the main-content
+       clearance (.dd-main-content) always matches the bar exactly. Contents stay
+       vertically centred via align-items; horizontal padding only here. */
+    height: var(--deepdrft-nav-height);
+    box-sizing: border-box;
+    padding: 0 3rem;
 
     border-bottom: 1px solid var(--deepdrft-border);
     box-shadow: none;
@@ -50,6 +55,10 @@
     color: var(--deepdrft-white);
 }
 
+.dd-nav-dark .dd-nav-brand > ::deep img {
+    filter: invert(1);
+}
+
 /* Centred link list */
 .dd-nav-links {
     display: flex;
@@ -222,6 +231,6 @@
 /* Mobile padding — give the nav room to breathe without crowding */
 @media (max-width: 599px) {
     .dd-nav {
-        padding: 1rem 1.25rem;
+        padding: 0 1.25rem;
     }
 }

DeepDrftPublic.Client/Layout/MainLayout.razor

@@ -6,6 +6,7 @@
 @using Microsoft.AspNetCore.Components
 @inherits LayoutComponentBase
 @implements IDisposable
+@implements IAsyncDisposable
 
 <MudThemeProvider Theme="@DeepDrftPalettes.Default" IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
@@ -15,7 +16,7 @@
     <MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
         <AudioPlayerProvider>
             <DeepDrftMenu Elevation="4" @bind-IsDarkMode="_isDarkMode" />
-            <MudMainContent Class="flex-grow-1 pt-16 pb-8">
+            <MudMainContent Class="flex-grow-1 pb-8 dd-main-content">
                 <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
                     @Body
                 </MudContainer>
@@ -42,10 +43,13 @@
     private string _audioPlayerClass = "minimized";
     private const string DarkModeKey = "darkMode";
     private bool _isDarkMode = false;
+    private bool? _lastAppliedDarkMode = null;
     private PersistingComponentStateSubscription _persistingSubscription;
+    private IJSObjectReference? _themeModule;
 
     [Inject] public required PersistentComponentState PersistentState { get; set; }
     [Inject] public required DarkModeSettings DarkModeSettings { get; set; }
+    [Inject] public required IJSRuntime JS { get; set; }
 
     protected override void OnInitialized()
     {
@@ -66,6 +70,24 @@
         _persistingSubscription = PersistentState.RegisterOnPersisting(PersistDarkMode);
     }
 
+    // Sync dark mode class on <body> so portaled MudBlazor elements (popovers, menus, selects)
+    // inherit --deepdrft-popover-surface from body.deepdrft-theme-dark rather than from :root only.
+    // Popovers portal outside the ThemeWrapperClass div, so only a body-level class can reach them.
+    // Gated: only fires on first render or when _isDarkMode actually changes, to avoid redundant
+    // JS calls on unrelated re-renders (e.g. audio player minimize/expand).
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await base.OnAfterRenderAsync(firstRender);
+
+        if (firstRender || _isDarkMode != _lastAppliedDarkMode)
+        {
+            _lastAppliedDarkMode = _isDarkMode;
+            _themeModule ??= await JS.InvokeAsync<IJSObjectReference>(
+                "import", "./_content/DeepDrftShared.Client/js/theme/theme.js");
+            await _themeModule.InvokeVoidAsync("setBodyThemeClass", _isDarkMode);
+        }
+    }
+
     // Theme wrapper class for CSS targeting
     private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
 
@@ -80,6 +102,15 @@
         _persistingSubscription.Dispose();
     }
 
+    public async ValueTask DisposeAsync()
+    {
+        if (_themeModule != null)
+        {
+            try { await _themeModule.DisposeAsync(); }
+            catch (JSDisconnectedException) { /* circuit torn down */ }
+        }
+    }
+
     private void ToggleAudioPlayerMinimized(bool isMinimized)
     {
         _audioPlayerClass = isMinimized ? "minimized" : "expanded";

DeepDrftPublic.Client/Pages/About.razor

@@ -2,8 +2,9 @@
 @using DeepDrftPublic.Client.Controls
 @implements IAsyncDisposable
 @inject IJSRuntime JsRuntime
+@inject SeoOptions Seo
 
-<PageTitle>The Collective - Deep DRFT</PageTitle>
+<SeoHead Model="@SeoModel.ForAbout(Seo)" />
 
 @* ──────────────────────────────────────────────────────────────────────────────
    THE LINER NOTES — a numbered three-movement editorial essay.
@@ -23,8 +24,8 @@
 
 @* ── HERO — the page opener. Reuses the .hero-* type scale with About's own words.
    NOT DeepDrftHero (that hard-codes the Deep/DRFT masthead + streaming CTA). ── *@
-<section class="hero">
-    <MudGrid Spacing="0" Style="height: 100%;">
+<section class="hero pb-20">
+    <MudGrid Spacing="0">
         <MudItem xs="12" md="6">
             <div class="hero-left">
                 <div class="hero-eyebrow @AnimClass">Charleston, South Carolina</div>
@@ -344,11 +345,6 @@
         return sb.ToString();
     }
     
-    // Member bios. Khabran's body is an intentional empty slot — the card composes
-    // without it (graceful degrade). Daniel's copy is verbatim per spec COPY C,
-    // including the two typos he chose to keep ("embarked in", "metalhead at from").
-    // PortraitImage* are null until final portrait files land — the card renders a
-    // placeholder treatment in their absence.
     private record Member(
         string Name,
         string Role,
@@ -361,13 +357,13 @@
         new(
             Name: "Khabran Peters",
             Role: "Production · Sound Design · Live",
-            Bio: "Raised on the Chicago underground, this artist cut their teeth on DJ Assault and DJ Funk. They started DJing young, learning to read a room long before they opened a DAW. After fifteen years as a visual artist, they moved into music production.\n\nNow based in Charleston, their sound carries the city's late-night feel but keeps the kinetic edge of its Midwest roots—deep one minute, fast the next. As much indie sensibility as booty-house grit.\n\nThe work is hardware-first, with software kept to remixes and edits. Onstage they stay out of the way and let the tracks do the talking. Polished without being precious—built by someone who cares more about the craft than the spotlight.",
+            Bio: "Raised on the Chicago underground, this artist cut his teeth on DJ Assault and DJ Funk. He started DJing young, learning to read a room long before he opened a DAW. After fifteen years as a visual artist, he moved into music production.\n\nNow based in Charleston, his sound carries the city's late-night feel but keeps the kinetic edge of its Midwest roots—deep one minute, fast the next. As much indie sensibility as booty-house grit.\n\nThe work is hardware-first, with software kept to remixes and edits. Onstage he stays out of the way and lets the tracks do the talking. Polished without being precious—built by someone who cares more about the craft than the spotlight.",
             PortraitImage1: "img/dd-khabran-bw.jpeg",
             PortraitImage2: "img/dd-khabran.jpeg"),
         new(
             Name: "Daniel Harvey",
             Role: "Production · Sound Design · Live",
-            Bio: "Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. A metalhead at from a young age, he spent ten years as an engineer living near Detroit filling the nights with synthesized tones and rhythms, shaped most of all by the thriving local underground techno scene.\n\nNow back home in the lowcountry, Daniel carries the varied sounds of his past into a new future, inspired by the wandering cypress swamps and soulful sunsets over the Ashley River.\n\nArt & engineering cannot be separated: custom plugins, hardware recording & performance rigs; the tools behind the tracks are just as important as the finished sound. To him the science and the math matter as much as the beauty — tension and release, built deliberately.",
+            Bio: "Daniel started on drums at ten and embarked in electronic music at seventeen — synthesizers first. A metalhead from a young age, he spent ten years as an engineer living near Detroit filling the nights with synthesized tones and rhythms, shaped most of all by the thriving local underground techno scene.\n\nNow back home in the lowcountry, Daniel carries the varied sounds of his past into a new future, inspired by the wandering cypress swamps and soulful sunsets over the Ashley River.\n\nArt & engineering cannot be separated: custom plugins, hardware recording & performance rigs; the tools behind the tracks are just as important as the finished sound. To him, the science and the math matter as much as the beauty — tension and release, built deliberately.",
             PortraitImage1: "img/dd-daniel-bw.jpeg",
             PortraitImage2: "img/dd-daniel.jpeg"),
     ];

DeepDrftPublic.Client/Pages/About.razor.css

@@ -25,7 +25,6 @@
 
 /* ── HERO — the page opener (type scale from Home's .hero-*) ── */
 .hero {
-    min-height: 100vh;
     overflow: hidden;
 }
 
@@ -35,7 +34,7 @@
     justify-content: center;
     padding: 6rem 3rem;
     position: relative;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     height: 100%;
 }
 
@@ -43,7 +42,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     height: 100%;
 }
 
@@ -56,7 +55,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.65rem;
     letter-spacing: 0.28em;
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     text-transform: uppercase;
     margin-bottom: 1.8rem;
     display: flex;
@@ -70,7 +69,7 @@
     display: block;
     width: 2.5rem;
     height: 1px;
-    background: var(--deepdrft-green-accent);
+    background: var(--deepdrft-green);
 }
 
 .hero-title {
@@ -79,21 +78,21 @@
     font-weight: 300;
     line-height: 0.92;
     letter-spacing: -0.02em;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     margin-bottom: 0.5rem;
     animation-delay: 0.22s;
 }
 
 .hero-title em {
     font-style: italic;
-    color: var(--deepdrft-green);
+    color: var(--deepdrft-green-accent);
 }
 
 .hero-desc {
     font-family: var(--deepdrft-font-body);
     font-size: 0.92rem;
     line-height: 1.75;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.7;
     max-width: 36ch;
     margin-bottom: 3rem;
@@ -109,7 +108,7 @@
 .movement {
     display: grid;
     grid-template-columns: minmax(140px, 14%) minmax(0, 1fr);
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     align-items: start;
 }
 
@@ -141,14 +140,14 @@
     font-weight: 300;
     line-height: 1;
     letter-spacing: -0.04em;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.14;
     padding-left: 1.4rem;
     transition: color 0.5s ease, opacity 0.5s ease;
 }
 
 .movement.is-active .rail-numeral {
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     opacity: 0.95;
 }
 
@@ -163,7 +162,7 @@
     font-size: 0.58rem;
     letter-spacing: 0.24em;
     text-transform: uppercase;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     transform-origin: center;
@@ -195,7 +194,7 @@
 
 .wave-stroke path {
     fill: none;
-    stroke: var(--deepdrft-green-accent);
+    stroke: var(--deepdrft-green);
     stroke-width: 1.4;
     opacity: 0.7;
     vector-effect: non-scaling-stroke;
@@ -207,7 +206,7 @@
     font-size: 0.62rem;
     letter-spacing: 0.28em;
     text-transform: uppercase;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     white-space: nowrap;
 }
 
@@ -221,7 +220,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.62rem;
     letter-spacing: 0.28em;
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     text-transform: uppercase;
     margin-bottom: 1.4rem;
 }
@@ -231,20 +230,20 @@
     font-size: clamp(2.6rem, 5vw, 4.2rem);
     font-weight: 300;
     line-height: 1.02;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     margin-bottom: 2rem;
 }
 
 .movement-title em {
     font-style: italic;
-    color: var(--deepdrft-green);
+    color: var(--deepdrft-green-accent);
 }
 
 .movement-prose {
     font-family: var(--deepdrft-font-body);
     font-size: 0.95rem;
     line-height: 1.85;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.72;
     max-width: 56ch;
 }
@@ -279,14 +278,15 @@
 }
 
 /* Graceful-degrade slot shown until a portrait file lands. A flat tonal panel in
-   the navy family, matching the circular portrait frame. */
+   the navy family, matching the circular portrait frame. Mixes a touch of navy into
+   --deepdrft-page-surface so the gradient inverts with the section in dark mode. */
 .bio-portrait-placeholder {
     width: 100%;
     aspect-ratio: 1 / 1;
     background:
         linear-gradient(160deg,
-            color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) 0%,
-            color-mix(in srgb, var(--deepdrft-navy) 16%, var(--deepdrft-white)) 100%);
+            color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-page-surface)) 0%,
+            color-mix(in srgb, var(--deepdrft-navy) 16%, var(--deepdrft-page-surface)) 100%);
 }
 
 /* The marginalia caption — mono, sits directly under the framed portrait. */
@@ -295,7 +295,7 @@
     font-size: 0.56rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     margin-top: 0.9rem;
     padding-left: 0.1rem;
 }
@@ -309,7 +309,7 @@
     font-size: 2rem;
     font-weight: 300;
     line-height: 1.1;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     margin-bottom: 1rem;
 }
 
@@ -317,7 +317,7 @@
     font-family: var(--deepdrft-font-body);
     font-size: 0.85rem;
     line-height: 1.8;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.7;
 }
 
@@ -339,7 +339,7 @@
     font-size: 0.56rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     margin-top: 0.9rem;
 }
 
@@ -354,7 +354,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.62rem;
     letter-spacing: 0.28em;
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     text-transform: uppercase;
     margin-bottom: 1.2rem;
 }
@@ -467,7 +467,7 @@
     font-family: var(--deepdrft-font-display);
     font-size: 1.5rem;
     font-weight: 400;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     min-width: 7rem;
 }
 
@@ -477,7 +477,7 @@
     font-family: var(--deepdrft-font-body);
     font-size: 0.85rem;
     line-height: 1.6;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.6;
 }
 
@@ -502,7 +502,7 @@
     font-size: clamp(1.8rem, 3.4vw, 2.9rem);
     font-weight: 300;
     line-height: 1.15;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
 }
 
 /* ══════════════════ CLOSING CTA (reused vocabulary) ══════════════════ */
@@ -606,6 +606,14 @@
 
 .btn-outline-white:hover { border-color: var(--deepdrft-white); }
 
+/* ── DARK-MODE OVERRIDES ── */
+/* In dark mode, decorative em accents that use --deepdrft-green (#1A3C34) become
+   near-invisible on the navy ground. Switch to --deepdrft-green-accent (#3D7A68). */
+:global(.deepdrft-theme-dark) .hero-title em,
+:global(.deepdrft-theme-dark) .movement-title em {
+    color: var(--deepdrft-green-accent);
+}
+
 /* ══════════════════ RESPONSIVE COLLAPSE ══════════════════
 
    Below 960px the rail collapses: the spine + vertical numeral can't survive a

DeepDrftPublic.Client/Pages/AlbumsView.razor

@@ -1,7 +1,9 @@
 @page "/cuts"
+@using DeepDrftModels.Enums
 @using DeepDrftPublic.Client.Controls
+@inject SeoOptions Seo
 
-<PageTitle>DeepDrft Cuts</PageTitle>
+<SeoHead Model="@SeoModel.ForBrowse(Seo, ReleaseMedium.Cut, "/cuts")" />
 
 @* The shared release-card grid; each card routes to /cuts/{entryKey} via the one ReleaseRoutes table.
    Cuts show a track count where other media show the artist, supplied via SubtitleResolver. *@

DeepDrftPublic.Client/Pages/ArchiveView.razor

@@ -1,8 +1,9 @@
 @page "/archive"
 @using DeepDrftModels.Enums
 @using DeepDrftPublic.Client.Controls
+@inject SeoOptions Seo
 
-<PageTitle>DeepDrft Archive</PageTitle>
+<SeoHead Model="@SeoModel.ForBrowse(Seo, null, "/archive")" />
 
 <div>
     <MudContainer MaxWidth="MaxWidth.Large" Class="archive-view-container">

DeepDrftPublic.Client/Pages/ArchiveView.razor.css

@@ -9,7 +9,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 24px;
-    padding: 36px 0 20px 0;
+    padding: 12px 0 20px 0;
 }
 
 .archive-controls-search {

DeepDrftPublic.Client/Pages/CutDetail.razor

@@ -3,8 +3,7 @@
 @using DeepDrftPublic.Client.Controls
 @using DeepDrftPublic.Client.Services
 @inherits CutDetailBase
-
-<PageTitle>@(ViewModel.Release?.Title ?? "Cut") - DeepDrft</PageTitle>
+@inject SeoOptions Seo
 
 @if (ViewModel.IsLoading)
 {
@@ -17,6 +16,9 @@
 }
 else if (ViewModel.NotFound || ViewModel.Release is null)
 {
+    @* Soft-404: a bad key renders a 200 "not found" view, so it must carry noindex so it is not indexed
+       (mirrors the dedicated /404 NotFound page). *@
+    <SeoHead Model="@SeoModel.ForNotFound(Seo)" />
     <div class="deepdrft-track-detail-container">
         <div class="deepdrft-track-detail-masthead">
             <MudText Typo="Typo.h4" Align="Align.Center">Cut not found.</MudText>
@@ -37,6 +39,14 @@ else
     var hasYear = release.ReleaseDate is not null;
     var firstTrack = ViewModel.Tracks.Count > 0 ? ViewModel.Tracks[0] : null;
 
+    @* SEO head — fed from the same bridged release + ordered tracks, so the prerender and WASM passes
+       render identical tags (AC6). MusicAlbum/StudioAlbum with the ordered track list (§3.4). *@
+    <SeoHead Model="@SeoModel.ForRelease(Seo, release, ViewModel.Tracks)" />
+
+    @* Full-screen content body (Phase 20 Wave 2 §1): the scaffold has no Class param, so a thin wrapper
+       carries the min-height. dd-detail-fill keeps the body >= viewport height (below the nav) so the
+       ambient visualizer reads full-screen and the site footer is pushed below the fold. *@
+    <div class="dd-detail-fill">
     <ReleaseDetailScaffold Title="@release.Title"
                            Artist="@release.Artist"
                            Track="@firstTrack"
@@ -54,11 +64,24 @@ else
                                 TrackEntryKey="@firstTrack?.EntryKey" />
         </Ambient>
         <TopRightAction>
-            @* Lava-lamp icon → popover panel (full parity, §3d-revised). Sits top-right across from the
-               back link, clear of the header's own Play/Share affordances below. *@
-            <WaveformVisualizerControlPopover />
+            @* Theater toggle sits immediately LEFT of the lava-lamp popover (Phase 20 §3). Both are
+               controls over the experience, not release content, so both stay in Theater Mode (§4/OQ4).
+               Wrapped so they cluster on the right rather than spreading across the SpaceBetween row. *@
+            <div class="dd-detail-top-actions">
+                @* Theater toggle only appears when this Cut is the currently-playing release (Phase 20
+                   Wave 2 §3). ShowTheaterToggle folds in the subsystem gate + the release-playing check. *@
+                <TheaterModeToggle Available="ShowTheaterToggle" />
+                @* Lava-lamp icon → popover panel (full parity, §3d-revised). Sits top-right across from the
+                   back link, clear of the header's own Play/Share affordances below. *@
+                <WaveformVisualizerControlPopover />
+            </div>
         </TopRightAction>
         <Header>
+            @* Theater Mode (Phase 20 §4, Wave 2 §2): the release content stays mounted and eases out via
+               a collapsing wrapper so it does not pop — IsContentHidden collapses it to zero height when
+               Theater is on AND this Cut is the playing release. OFF eases it back to its normal layout. *@
+            <div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
+            <div class="dd-theater-collapsible-inner">
             @* Header split: meta + Play/Share on the LEFT, bordered cover on the RIGHT (spec §3.1). *@
             <div class="cut-detail-header">
                 <div class="cut-detail-meta">
@@ -83,7 +106,7 @@ else
                         </div>
                     }
 
-                    <div class="cut-detail-actions">
+                    <div class="cut-detail-actions dd-accent-icon dd-accent-fill">
                         @* Header Play loads the full album into the queue at index 0 (§3.4 seam,
                            closed P11 W1). Disabled until at least one streamable track is resolved. *@
                         <MudButton Variant="Variant.Filled"
@@ -117,8 +140,13 @@ else
                     }
                 </div>
             </div>
+            </div>
+            </div>
         </Header>
         <BodyContent>
+            @* Theater Mode (Wave 2 §2): eased collapse, mirroring the Header region. *@
+            <div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
+            <div class="dd-theater-collapsible-inner">
             @* Blurb sits between the header and the track-list divider. *@
             <ReleaseDescription Description="@release.Description" />
             <MudDivider Class="cut-detail-divider" />
@@ -133,7 +161,7 @@ else
                     {
                         var track = ViewModel.Tracks[i];
                         var index = i;
-                        <div class="cut-detail-track-row">
+                        <div class="cut-detail-track-row dd-accent-icon">
                             <span class="cut-detail-track-number">@track.TrackNumber</span>
                             <div class="cut-detail-track-play">
                                 <PlayStateIcon Track="@track"
@@ -149,12 +177,15 @@ else
                     }
                 </div>
             }
+            </div>
+            </div>
         </BodyContent>
     </ReleaseDetailScaffold>
+    </div>
 }
 
 @code {
-    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    // PlayerService is cascaded by CutDetailBase (used there for the Theater release-playing predicate).
     [CascadingParameter] public IQueueService? Queue { get; set; }
 
     // Header Play: load the full album into the queue starting at track 0.

DeepDrftPublic.Client/Pages/CutDetailBase.cs

@@ -1,4 +1,5 @@
 using DeepDrftModels.DTOs;
+using DeepDrftPublic.Client.Services;
 using DeepDrftPublic.Client.ViewModels;
 using Microsoft.AspNetCore.Components;
 
@@ -19,7 +20,41 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
     [Inject] public required CutDetailViewModel ViewModel { get; set; }
     [Inject] public required PersistentComponentState PersistentState { get; set; }
 
+    // Theater Mode (Phase 20). The page owns the content gate, so it must re-render when the flag flips
+    // on the toggle. Property-injected; no constructor growth.
+    [Inject] public required WaveformVisualizerControlState VisualizerControlState { get; set; }
+
+    // Theater Mode is scoped to the currently-playing release (Phase 20 Wave 2 §3). The page observes
+    // player state so the toggle availability and content gate re-evaluate live when playback starts,
+    // stops, or moves to a different release. Cascaded by AudioPlayerProvider; no constructor growth.
+    // The cascade is IsFixed, so the provider's own re-render does not reach this page — the page must
+    // subscribe to StateChanged to re-render itself (same posture as AudioPlayerBar).
+    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+
     private PersistingComponentStateSubscription _persistingSubscription;
+    private IStreamingPlayerService? _subscribedPlayer;
+
+    /// <summary>
+    /// True when the currently-playing track belongs to this page's release. Theater Mode only applies
+    /// to the playing release: a detail page whose release is not playing ignores the global flag and
+    /// shows no toggle. Identity is the release <c>EntryKey</c> — the canonical public key the routes
+    /// and <see cref="DeepDrftPublic.Client.Common.ReleaseRoutes"/> use.
+    /// </summary>
+    protected bool IsThisReleasePlaying =>
+        PlayerService?.CurrentTrack?.Release?.EntryKey == EntryKey;
+
+    /// <summary>
+    /// True when this page's release content should be hidden for Theater Mode — only when Theater is on
+    /// AND this release is the one playing. Drives the eased collapse of the header/track-list regions.
+    /// </summary>
+    protected bool IsContentHidden => VisualizerControlState.TheaterMode && IsThisReleasePlaying;
+
+    /// <summary>
+    /// True when the Theater toggle should be offered on this page: a visualizer subsystem is on AND
+    /// this page's release is the one playing.
+    /// </summary>
+    protected bool ShowTheaterToggle =>
+        (VisualizerControlState.LavaEnabled || VisualizerControlState.WaveformEnabled) && IsThisReleasePlaying;
 
     // The release EntryKey the ViewModel currently holds — tracks param-only navigations (e.g.
     // /cuts/{a} -> /cuts/{b}) which reuse this component instance and fire OnParametersSet without
@@ -28,10 +63,29 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
     private bool _loaded;
 
     protected override void OnInitialized()
-        => _persistingSubscription = PersistentState.RegisterOnPersisting(Persist);
+    {
+        _persistingSubscription = PersistentState.RegisterOnPersisting(Persist);
+        VisualizerControlState.Changed += OnVisualizerStateChanged;
+    }
+
+    private void OnVisualizerStateChanged() => InvokeAsync(StateHasChanged);
+
+    private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
 
     protected override async Task OnParametersSetAsync()
     {
+        // The player cascade is IsFixed, so the provider's re-render does not reach this page; subscribe
+        // to the StateChanged side-channel to re-render when playback moves between releases. Idempotent
+        // (reference-guarded) and unsubscribed on dispose — same posture as AudioPlayerBar.
+        if (PlayerService is not null && !ReferenceEquals(PlayerService, _subscribedPlayer))
+        {
+            if (_subscribedPlayer is not null)
+                _subscribedPlayer.StateChanged -= OnPlayerStateChanged;
+
+            PlayerService.StateChanged += OnPlayerStateChanged;
+            _subscribedPlayer = PlayerService;
+        }
+
         if (_loaded && _loadedKey == EntryKey) return;
 
         // Capture the key synchronously before any await so a re-entrant call (rapid navigation or a
@@ -61,7 +115,16 @@ public abstract class CutDetailBase : ComponentBase, IDisposable
         return Task.CompletedTask;
     }
 
-    public void Dispose() => _persistingSubscription.Dispose();
+    public void Dispose()
+    {
+        _persistingSubscription.Dispose();
+        VisualizerControlState.Changed -= OnVisualizerStateChanged;
+        if (_subscribedPlayer is not null)
+        {
+            _subscribedPlayer.StateChanged -= OnPlayerStateChanged;
+            _subscribedPlayer = null;
+        }
+    }
 
     // JSON-serializable bridge payload. Round-trips through PersistentComponentState's serializer.
     protected sealed record BridgedCut(ReleaseDto Release, IReadOnlyList<TrackDto> Tracks);

DeepDrftPublic.Client/Pages/Home.razor

@@ -1,8 +1,9 @@
 @page "/"
 @using DeepDrftPublic.Client.Controls
 @using DeepDrftPublic.Client.Services
+@inject SeoOptions Seo
 
-<PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
+<SeoHead Model="@SeoModel.ForHome(Seo)" />
 
 @* Hero - split 50/50 *@
 <section class="hero">

DeepDrftPublic.Client/Pages/Home.razor.css

@@ -15,7 +15,7 @@
     justify-content: center;
     padding: 6rem 3rem;
     position: relative;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     height: 100%;
 }
 
@@ -30,7 +30,7 @@
     align-items: center;
     gap: 2rem;
     padding: 2rem 3rem;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
 }
 
 .divider-line {
@@ -43,7 +43,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.6rem;
     letter-spacing: 0.25em;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     text-transform: uppercase;
     white-space: nowrap;
 }
@@ -51,7 +51,7 @@
 /* ── SECTION (sound) ── */
 .section {
     padding: 7rem 3rem;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
 }
 
 @media (min-width: 960px) {
@@ -64,7 +64,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.62rem;
     letter-spacing: 0.28em;
-    color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-green);
     text-transform: uppercase;
     margin-bottom: 1.2rem;
 }
@@ -74,12 +74,12 @@
     font-size: clamp(2.8rem, 5vw, 4.5rem);
     font-weight: 300;
     line-height: 1;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
 }
 
 .section-title em {
     font-style: italic;
-    color: var(--deepdrft-green);
+    color: var(--deepdrft-green-accent);
 }
 
 /* The body column is already full height; make it a flex container that
@@ -106,7 +106,7 @@
     font-family: var(--deepdrft-font-body);
     font-size: 0.9rem;
     line-height: 1.8;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.65;
     max-width: 52ch;
 }
@@ -130,7 +130,7 @@
 }
 
 .medium-card {
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     border: 1px solid var(--deepdrft-border);
     cursor: pointer;
     overflow: hidden;
@@ -189,7 +189,7 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.58rem;
     letter-spacing: 0.2em;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     text-transform: uppercase;
     margin-bottom: 0.6rem;
 }
@@ -198,7 +198,7 @@
     font-family: var(--deepdrft-font-display);
     font-size: 1.6rem;
     font-weight: 400;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     margin-bottom: 0.75rem;
     line-height: 1.1;
 }
@@ -207,7 +207,7 @@
     font-family: var(--deepdrft-font-body);
     font-size: 0.82rem;
     line-height: 1.65;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     opacity: 0.6;
 }
 
@@ -333,7 +333,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    background: var(--deepdrft-white);
+    background: var(--deepdrft-page-surface);
     height: 100%;
 }
 
@@ -387,7 +387,7 @@
     font-family: var(--deepdrft-font-display);
     font-size: clamp(2rem, 3.5vw, 3rem);
     font-weight: 300;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     line-height: 1.05;
     margin-bottom: 2rem;
 }
@@ -417,7 +417,7 @@
 
 .connect-option:hover {
     border-color: var(--deepdrft-green-accent);
-    background: #f3f6f4;
+    background: color-mix(in srgb, var(--deepdrft-page-surface), var(--deepdrft-green-accent) 8%);
 }
 
 .option-icon {
@@ -426,14 +426,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--deepdrft-navy);
+    /* Inversion pair with the glyph below: a contrast chip against the page surface
+       (navy chip / white glyph in light; white chip / navy glyph on the dark ground). */
+    background: var(--deepdrft-page-text);
     flex-shrink: 0;
 }
 
 .option-icon svg {
     width: 0.9rem;
     height: 0.9rem;
-    stroke: var(--deepdrft-white);
+    stroke: var(--deepdrft-page-surface);
     fill: none;
     stroke-width: 1.5;
 }
@@ -442,14 +444,14 @@
     font-family: var(--deepdrft-font-mono);
     font-size: 0.65rem;
     letter-spacing: 0.15em;
-    color: var(--deepdrft-navy);
+    color: var(--deepdrft-page-text);
     text-transform: uppercase;
 }
 
 .option-text-sub {
     font-family: var(--deepdrft-font-body);
     font-size: 0.75rem;
-    color: var(--deepdrft-muted);
+    color: var(--deepdrft-page-text-muted);
     margin-top: 0.1rem;
 }
 
@@ -558,6 +560,14 @@
 
 .btn-outline-white:hover { border-color: var(--deepdrft-white); }
 
+/* ── DARK-MODE OVERRIDES ── */
+/* In dark mode, decorative em accents that use --deepdrft-green (#1A3C34) become
+   near-invisible on the navy ground. Switch to --deepdrft-green-accent (#3D7A68). */
+:global(.deepdrft-theme-dark) .section-title em,
+:global(.deepdrft-theme-dark) .connect-title em {
+    color: var(--deepdrft-green-accent);
+}
+
 @media (max-width: 599px) {
     .cta-banner {
         flex-direction: column;

DeepDrftPublic.Client/Pages/MixDetail.razor

@@ -2,8 +2,7 @@
 @using DeepDrftPublic.Client.Controls
 @using DeepDrftPublic.Client.Services
 @inherits ReleaseDetailBase
-
-<PageTitle>@(ViewModel.Release?.Title ?? "Mix") - DeepDrft</PageTitle>
+@inject SeoOptions Seo
 
 @if (ViewModel.IsLoading)
 {
@@ -16,6 +15,9 @@
 }
 else if (ViewModel.NotFound || ViewModel.Release is null)
 {
+    @* Soft-404: a bad key renders a 200 "not found" view, so it must carry noindex so it is not indexed
+       (mirrors the dedicated /404 NotFound page). *@
+    <SeoHead Model="@SeoModel.ForNotFound(Seo)" />
     <div class="deepdrft-track-detail-container">
         <div class="deepdrft-track-detail-masthead">
             <MudText Typo="Typo.h4" Align="Align.Center">Mix not found.</MudText>
@@ -32,6 +34,11 @@ else if (ViewModel.NotFound || ViewModel.Release is null)
 else
 {
     var release = ViewModel.Release;
+    var mixTracks = ViewModel.Track is not null ? new[] { ViewModel.Track } : null;
+
+    @* SEO head — fed from the same bridged release + single track, so prerender and WASM render identical
+       tags (AC6). MusicRecording with ISO-8601 duration from the track (§3.4). *@
+    <SeoHead Model="@SeoModel.ForRelease(Seo, release, mixTracks)" />
 
     @* Full-page waveform sits behind the scaffold content. The scaffold's container is positioned
        above it via the mix-detail-foreground stacking context. TrackId lets the visualizer couple to
@@ -41,7 +48,7 @@ else
                         TrackId="@ViewModel.Track?.Id"
                         TrackEntryKey="@ViewModel.Track?.EntryKey" />
 
-    <div class="mix-detail-foreground">
+    <div class="mix-detail-foreground dd-detail-fill">
       <MudContainer MaxWidth="MaxWidth.Large" Class="mix-detail-container">
         @* Mix keeps the scaffold solely for the Phase 10 top row (back link | controls | lava-lamp).
            Title/artist/genre/date/share/play all move into the overlaid hero, so the scaffold's
@@ -56,13 +63,26 @@ else
                                ShowMeta="false"
                                ShowShareRow="false">
             <TopRightAction>
-                @* Lava-lamp icon → popover panel, top-right across from the back link (Phase 12
-                   §3d-revised). Replaces the former inline TopContent knob-bar: the icon IS the toggle
-                   and the popover IS the panel. Mix takes the cleanest anchor case (§8e) — the popover's
-                   default bottom-right anchor opens down over the full-bleed field. *@
-                <WaveformVisualizerControlPopover />
+                @* Theater toggle sits immediately LEFT of the lava-lamp popover (Phase 20 §3). Both stay
+                   visible in Theater Mode — controls over the experience, not release content (§4/OQ4).
+                   Wrapped so they cluster on the right rather than spreading across the SpaceBetween row. *@
+                <div class="dd-detail-top-actions">
+                    @* Theater toggle only appears when this Mix is the currently-playing release
+                       (Phase 20 Wave 2 §3). ShowTheaterToggle folds in the subsystem + release-playing gate. *@
+                    <TheaterModeToggle Available="ShowTheaterToggle" />
+                    @* Lava-lamp icon → popover panel, top-right across from the back link (Phase 12
+                       §3d-revised). Replaces the former inline TopContent knob-bar: the icon IS the toggle
+                       and the popover IS the panel. Mix takes the cleanest anchor case (§8e) — the popover's
+                       default bottom-right anchor opens down over the full-bleed field. *@
+                    <WaveformVisualizerControlPopover />
+                </div>
             </TopRightAction>
             <Hero>
+                @* Theater Mode (Phase 20 §4, Wave 2 §2): the hero overlay stays mounted and eases out via
+                   a collapsing wrapper so it does not pop — collapsed to zero height when Theater is on AND
+                   this Mix is the playing release. OFF eases the full-bleed visualizer back behind the hero. *@
+                <div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
+                <div class="dd-theater-collapsible-inner">
                 @* Cover-as-background hero with all metadata overlaid, square `mix-hero` sizing. The
                    cover art IS the background, so no separate cover thumbnail (CoverThumbKey defaults
                    to null). Share and play ride in as slots, matching Sessions. *@
@@ -86,10 +106,17 @@ else
                         }
                     </PlayContent>
                 </ReleaseHeroOverlay>
+                </div>
+                </div>
             </Hero>
             <BodyContent>
-                @* Blurb sits below the hero, inside the scaffold's foreground stacking context. *@
-                <ReleaseDescription Description="@release.Description" />
+                @* Theater Mode (Wave 2 §2): eased collapse, mirroring the Hero region. *@
+                <div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
+                    <div class="dd-theater-collapsible-inner">
+                    @* Blurb sits below the hero, inside the scaffold's foreground stacking context. *@
+                    <ReleaseDescription Description="@release.Description" />
+                    </div>
+                </div>
             </BodyContent>
         </ReleaseDetailScaffold>
       </MudContainer>
@@ -99,11 +126,14 @@ else
 @code {
     protected override string PersistKey => "mix-detail";
 
-    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    // PlayerService is cascaded by ReleaseDetailBase (used there for the Theater release-playing predicate).
+    [CascadingParameter] public IQueueService? Queue { get; set; }
 
     // The hero now carries the play affordance (the scaffold's header is suppressed), so the
     // play-toggle is wired here directly — mirroring SessionDetail. Toggle if this track is already
-    // active, otherwise start a fresh stream.
+    // active, otherwise PLAY it: prepend to the queue's front (deque PLAY semantics) so it becomes
+    // current and the existing queue stays intact behind it. Falls back to a direct stream when the
+    // queue cascade is absent (prerender / non-interactive).
     private async Task PlayTrack()
     {
         var track = ViewModel.Track;
@@ -114,6 +144,10 @@ else
         {
             await PlayerService.TogglePlayPause();
         }
+        else if (Queue is not null)
+        {
+            await Queue.PlayTrack(track);
+        }
         else
         {
             await PlayerService.SelectTrackStreaming(track);

DeepDrftPublic.Client/Pages/MixesView.razor

@@ -1,8 +1,10 @@
 @page "/mixes"
+@using DeepDrftModels.Enums
 @using DeepDrftPublic.Client.Controls
 @inherits MediumBrowseBase
+@inject SeoOptions Seo
 
-<PageTitle>DeepDrft Mixes</PageTitle>
+<SeoHead Model="@SeoModel.ForBrowse(Seo, ReleaseMedium.Mix, "/mixes")" />
 
 <ReleaseGallery Releases="@Releases"
                 Loading="@Loading"

DeepDrftPublic.Client/Pages/NotFound.razor

@@ -1,4 +1,9 @@
 @page "/404"
+@using DeepDrftPublic.Client.Controls
+@inject SeoOptions Seo
+
+@* The 404 must not be indexed (AC8): noindex,follow — no canonical, no JSON-LD. *@
+<SeoHead Model="@SeoModel.ForNotFound(Seo)" />
 
 <MudText Typo="Typo.h3">
     Not Found

DeepDrftPublic.Client/Pages/ReleaseDetailBase.cs

@@ -1,4 +1,5 @@
 using DeepDrftModels.DTOs;
+using DeepDrftPublic.Client.Services;
 using DeepDrftPublic.Client.ViewModels;
 using Microsoft.AspNetCore.Components;
 
@@ -17,7 +18,41 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
     [Inject] public required ReleaseDetailViewModel ViewModel { get; set; }
     [Inject] public required PersistentComponentState PersistentState { get; set; }
 
+    // Theater Mode (Phase 20). The page owns the content gate, so it must re-render when the flag flips
+    // on the toggle. Property-injected; no constructor growth.
+    [Inject] public required WaveformVisualizerControlState VisualizerControlState { get; set; }
+
+    // Theater Mode is scoped to the currently-playing release (Phase 20 Wave 2 §3). The page observes
+    // player state so the toggle availability and content gate re-evaluate live when playback starts,
+    // stops, or moves to a different release. Cascaded by AudioPlayerProvider; no constructor growth.
+    // The cascade is IsFixed, so the provider's own re-render does not reach this page — the page must
+    // subscribe to StateChanged to re-render itself (same posture as AudioPlayerBar).
+    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+
     private PersistingComponentStateSubscription _persistingSubscription;
+    private IStreamingPlayerService? _subscribedPlayer;
+
+    /// <summary>
+    /// True when the currently-playing track belongs to this page's release. Theater Mode only applies
+    /// to the playing release: a detail page whose release is not playing ignores the global flag and
+    /// shows no toggle. Identity is the release <c>EntryKey</c> — the canonical public key the routes
+    /// and <see cref="DeepDrftPublic.Client.Common.ReleaseRoutes"/> use.
+    /// </summary>
+    protected bool IsThisReleasePlaying =>
+        PlayerService?.CurrentTrack?.Release?.EntryKey == EntryKey;
+
+    /// <summary>
+    /// True when this page's release content should be hidden for Theater Mode — only when Theater is on
+    /// AND this release is the one playing. Drives the eased collapse of the hero/blurb regions.
+    /// </summary>
+    protected bool IsContentHidden => VisualizerControlState.TheaterMode && IsThisReleasePlaying;
+
+    /// <summary>
+    /// True when the Theater toggle should be offered on this page: a visualizer subsystem is on AND
+    /// this page's release is the one playing.
+    /// </summary>
+    protected bool ShowTheaterToggle =>
+        (VisualizerControlState.LavaEnabled || VisualizerControlState.WaveformEnabled) && IsThisReleasePlaying;
 
     // The release EntryKey the ViewModel currently holds. Tracks param-only navigations (e.g.
     // /mixes/{a} -> /mixes/{b}) which reuse this component instance and fire OnParametersSet
@@ -30,10 +65,29 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
     protected abstract string PersistKey { get; }
 
     protected override void OnInitialized()
-        => _persistingSubscription = PersistentState.RegisterOnPersisting(Persist);
+    {
+        _persistingSubscription = PersistentState.RegisterOnPersisting(Persist);
+        VisualizerControlState.Changed += OnVisualizerStateChanged;
+    }
+
+    private void OnVisualizerStateChanged() => InvokeAsync(StateHasChanged);
+
+    private void OnPlayerStateChanged() => InvokeAsync(StateHasChanged);
 
     protected override async Task OnParametersSetAsync()
     {
+        // The player cascade is IsFixed, so the provider's re-render does not reach this page; subscribe
+        // to the StateChanged side-channel to re-render when playback moves between releases. Idempotent
+        // (reference-guarded) and unsubscribed on dispose — same posture as AudioPlayerBar.
+        if (PlayerService is not null && !ReferenceEquals(PlayerService, _subscribedPlayer))
+        {
+            if (_subscribedPlayer is not null)
+                _subscribedPlayer.StateChanged -= OnPlayerStateChanged;
+
+            PlayerService.StateChanged += OnPlayerStateChanged;
+            _subscribedPlayer = PlayerService;
+        }
+
         // Re-run whenever the route key changes. Component instances are reused across
         // same-template navigations, so the load decision must live here, not in
         // OnInitialized (which fires once per instance).
@@ -69,7 +123,16 @@ public abstract class ReleaseDetailBase : ComponentBase, IDisposable
         return Task.CompletedTask;
     }
 
-    public void Dispose() => _persistingSubscription.Dispose();
+    public void Dispose()
+    {
+        _persistingSubscription.Dispose();
+        VisualizerControlState.Changed -= OnVisualizerStateChanged;
+        if (_subscribedPlayer is not null)
+        {
+            _subscribedPlayer.StateChanged -= OnPlayerStateChanged;
+            _subscribedPlayer = null;
+        }
+    }
 
     // JSON-serializable bridge payload. Round-trips through PersistentComponentState's serializer.
     protected sealed record BridgedDetail(ReleaseDto Release, TrackDto? Track);

DeepDrftPublic.Client/Pages/SessionDetail.razor

@@ -3,8 +3,7 @@
 @using DeepDrftPublic.Client.Controls
 @using DeepDrftPublic.Client.Services
 @inherits ReleaseDetailBase
-
-<PageTitle>@(ViewModel.Release?.Title ?? "Session") - DeepDrft</PageTitle>
+@inject SeoOptions Seo
 
 @if (ViewModel.IsLoading)
 {
@@ -20,6 +19,9 @@
 }
 else if (ViewModel.NotFound || ViewModel.Release is null)
 {
+    @* Soft-404: a bad key renders a 200 "not found" view, so it must carry noindex so it is not indexed
+       (mirrors the dedicated /404 NotFound page). *@
+    <SeoHead Model="@SeoModel.ForNotFound(Seo)" />
     <div class="deepdrft-track-detail-container">
         <div class="deepdrft-track-detail-masthead">
             <MudText Typo="Typo.h4" Align="Align.Center">Session not found.</MudText>
@@ -40,6 +42,10 @@ else
     // Hero image precedence: the session's dedicated hero, then the release cover, then a placeholder.
     var heroImage = !string.IsNullOrEmpty(heroKey) ? heroKey : release.ImagePath;
 
+    @* SEO head — fed from the same bridged release, so prerender and WASM render identical tags (AC6).
+       MusicAlbum/LiveAlbum (a session is a live release, §3.4/OQ6). *@
+    <SeoHead Model="@SeoModel.ForRelease(Seo, release)" />
+
     @* Ambient living waveform behind the hero overlay (Phase 12 §3e option b / §3f mode B). Session does
        NOT compose ReleaseDetailScaffold, so it mounts the shared engine directly with its own thin
        full-bleed wrapper — the engine is single-source either way, only the mount differs (§3b). The
@@ -49,18 +55,30 @@ else
                         TrackId="@ViewModel.Track?.Id"
                         TrackEntryKey="@ViewModel.Track?.EntryKey" />
 
-    <MudContainer MaxWidth="MaxWidth.Large" Class="session-detail-page session-detail-foreground">
+    <MudContainer MaxWidth="MaxWidth.Large" Class="session-detail-page session-detail-foreground dd-detail-fill">
 
         <div class="session-detail-top-row">
             <MudLink Href="/sessions" Typo="Typo.body2" Class="deepdrft-track-detail-back">
                 &larr; All sessions
             </MudLink>
 
-            @* Lava-lamp icon → popover panel (full parity, §3e/§3d-revised). Anchored top-right, clear of
-               the hero overlay and the share/play affordances overlaid on the hero below. *@
-            <WaveformVisualizerControlPopover />
+            @* Theater toggle sits immediately LEFT of the lava-lamp popover (Phase 20 §3). The whole top
+               row (back + theater + lava) stays in Theater Mode — controls, not release content (§4/OQ4). *@
+            <div class="dd-detail-top-actions">
+                @* Theater toggle only appears when this Session is the currently-playing release
+                   (Phase 20 Wave 2 §3). ShowTheaterToggle folds in the subsystem + release-playing gate. *@
+                <TheaterModeToggle Available="ShowTheaterToggle" />
+                @* Lava-lamp icon → popover panel (full parity, §3e/§3d-revised). Anchored top-right, clear of
+                   the hero overlay and the share/play affordances overlaid on the hero below. *@
+                <WaveformVisualizerControlPopover />
+            </div>
         </div>
 
+        @* Theater Mode (Phase 20 §4, Wave 2 §2): the hero overlay + blurb stay mounted and ease out via a
+           collapsing wrapper so they do not pop — collapsed to zero height when Theater is on AND this
+           Session is the playing release. The top row above stays. OFF eases this region back in. *@
+        <div class="dd-theater-collapsible @(IsContentHidden ? "dd-theater-collapsed" : null)">
+        <div class="dd-theater-collapsible-inner">
         @* The overlay shows the cover thumbnail only when it differs from the resolved hero image —
            when there is no dedicated hero, heroImage already falls back to release.ImagePath, so the
            thumb would duplicate the background. That logic lives in ReleaseHeroOverlay. *@
@@ -86,6 +104,8 @@ else
         </ReleaseHeroOverlay>
 
         <ReleaseDescription Description="@release.Description" />
+        </div>
+        </div>
 
     </MudContainer>
 }
@@ -93,11 +113,14 @@ else
 @code {
     protected override string PersistKey => "session-detail";
 
-    [CascadingParameter] public IStreamingPlayerService? PlayerService { get; set; }
+    // PlayerService is cascaded by ReleaseDetailBase (used there for the Theater release-playing predicate).
+    [CascadingParameter] public IQueueService? Queue { get; set; }
 
     // Mirrors the play-toggle wiring the shared scaffold owns. Session detail composes the player
     // affordance directly (it diverges from ReleaseDetailScaffold for the overlay layout), so the
-    // toggle logic lives here: toggle if this track is already active, otherwise start a fresh stream.
+    // toggle logic lives here: toggle if this track is already active, otherwise PLAY it — prepend to
+    // the queue's front (deque PLAY semantics) so it becomes current and the existing queue stays
+    // intact behind it. Falls back to a direct stream when the queue cascade is absent.
     private async Task PlayTrack()
     {
         var track = ViewModel.Track;
@@ -108,6 +131,10 @@ else
         {
             await PlayerService.TogglePlayPause();
         }
+        else if (Queue is not null)
+        {
+            await Queue.PlayTrack(track);
+        }
         else
         {
             await PlayerService.SelectTrackStreaming(track);

DeepDrftPublic.Client/Pages/SessionsView.razor

@@ -1,8 +1,10 @@
 @page "/sessions"
+@using DeepDrftModels.Enums
 @using DeepDrftPublic.Client.Controls
 @inherits MediumBrowseBase
+@inject SeoOptions Seo
 
-<PageTitle>DeepDrft Sessions</PageTitle>
+<SeoHead Model="@SeoModel.ForBrowse(Seo, ReleaseMedium.Session, "/sessions")" />
 
 <ReleaseGallery Releases="@Releases"
                 Loading="@Loading"

DeepDrftPublic.Client/Services/IQueueService.cs

@@ -10,18 +10,35 @@ namespace DeepDrftPublic.Client.Services;
 /// — it adds no new playback semantics.
 ///
 /// <para>
-/// Extension posture (open/closed): future shuffle, repeat modes, reordering, and persistence are
-/// expected. They are additive — a shuffle/repeat strategy slots in behind <see cref="Next"/>/
-/// <see cref="Previous"/> as the "which index is next" decision; reordering mutates <see cref="Items"/>
-/// and re-emits <see cref="QueueChanged"/>; persistence snapshots/restores <see cref="Items"/> +
-/// <see cref="CurrentIndex"/>. None of those require changing this interface's existing members, only
-/// adding new ones — so consumers written against today's surface keep working.
+/// <b>Two-level deque model (the load-bearing invariant).</b> The queue is a deque whose
+/// <see cref="Current"/> track (the item at <see cref="CurrentIndex"/>) is the live "front of play".
+/// Two families of mutation enter the deque from opposite ends:
+/// <list type="bullet">
+///   <item><b>PLAY (manual)</b> — <see cref="PlayTrack"/> / <see cref="PlayRelease"/> prepend to the
+///   <em>front</em>. The previously-current track is removed, the prepended track(s) become the head
+///   in order, the new head becomes current and starts streaming, and whatever sat after the old
+///   current stays intact behind the prepend. A whole release prepends in order in one operation.</item>
+///   <item><b>Add-to-queue</b> — <see cref="Enqueue"/> / <see cref="EnqueueRange"/> append to the
+///   <em>end</em>. They never interrupt the current track and never start playback.</item>
+/// </list>
+/// </para>
+///
+/// <para>
+/// <b>Advance and end-of-track.</b> <see cref="Next"/> and auto-advance (the player's
+/// <see cref="IPlayerService.TrackEnded"/>) walk <see cref="CurrentIndex"/> forward, leaving the just-
+/// played track in the list behind the pointer so <see cref="Previous"/> can step back to it. The one
+/// exception is the <em>last</em> track: when the current track ends naturally and there is nothing
+/// after it, the queue <b>empties</b> and goes dormant (<see cref="CurrentIndex"/> == -1) rather than
+/// stranding the finished track as current.
 /// </para>
 ///
 /// <para>
 /// With an empty queue (<see cref="CurrentIndex"/> == -1) the queue is dormant: it drives nothing and
 /// auto-advances nothing, so direct single-track play through the player behaves exactly as it did
-/// before the queue existed.
+/// before the queue existed. The <b>first</b> <see cref="Enqueue"/>/<see cref="EnqueueRange"/> into a
+/// dormant queue while a track is already playing externally seeds the head from the player's current
+/// track (learned through the attached player, no extra dependency) and then appends the added item, so
+/// the resulting deque is <c>[now-playing, added…]</c> rather than a phantom single entry.
 /// </para>
 /// </summary>
 public interface IQueueService
@@ -41,9 +58,10 @@ public interface IQueueService
     /// <summary>
     /// True when the queue has been loaded via <see cref="Arm"/> but no track has streamed yet —
     /// the embed's pre-gesture state. Set by <see cref="Arm"/>; cleared the moment playback actually
-    /// starts (<see cref="Start"/>/<see cref="PlayRelease"/>/<see cref="Next"/>/<see cref="Previous"/>)
-    /// or on <see cref="Clear"/>. The player bar reads this to route the first play gesture through
-    /// <see cref="Start"/> (which begins the armed release) rather than streaming the staged track alone.
+    /// starts (<see cref="Start"/>/<see cref="PlayRelease"/>/<see cref="PlayTrack"/>/<see cref="Next"/>/
+    /// <see cref="Previous"/>) or on <see cref="Clear"/>. The player bar reads this to route the first
+    /// play gesture through <see cref="Start"/> (which begins the armed release) rather than streaming
+    /// the staged track alone.
     /// </summary>
     bool IsArmed { get; }
 
@@ -55,26 +73,40 @@ public interface IQueueService
 
     /// <summary>
     /// Raised whenever the queue's contents or current position change. The player bar subscribes
-    /// to re-render its skip-forward/back affordances. Fires on enqueue, advance, step-back, and clear.
+    /// to re-render its skip-forward/back affordances. Fires on enqueue, prepend, advance, step-back,
+    /// and clear.
     /// </summary>
     event Action? QueueChanged;
 
     /// <summary>
-    /// Replaces the queue with <paramref name="tracks"/> (in the order given) and begins streaming
-    /// the track at <paramref name="startIndex"/>. This is the "play album" entry point the Cuts
-    /// detail page consumes: pass the release's tracks in ordinal order. A header Play uses
-    /// <c>startIndex: 0</c>; a mid-album row play passes that row's index so the queue continues to
-    /// the end from there. No-op when <paramref name="tracks"/> is empty.
+    /// Manual PLAY of a single track: prepends <paramref name="track"/> to the <em>front</em> of the
+    /// deque, removes the previously-current track, makes <paramref name="track"/> the new head/current,
+    /// and starts streaming it. The rest of the queue (everything that sat after the old current) stays
+    /// intact behind the new head. Into a dormant queue this simply becomes the sole head and plays.
+    /// This is the deque-front counterpart to the append-only <see cref="Enqueue"/>.
+    /// </summary>
+    Task PlayTrack(TrackDto track);
+
+    /// <summary>
+    /// Manual PLAY of a release: prepends <paramref name="tracks"/> (in the order given) to the
+    /// <em>front</em> of the deque, removes the previously-current track, and starts streaming the
+    /// prepended track at <paramref name="startIndex"/> — which becomes current. Tracks prepended
+    /// before <paramref name="startIndex"/> sit behind the pointer (reachable via <see cref="Previous"/>);
+    /// tracks after it are up-next; whatever sat after the old current stays intact behind the whole
+    /// prepend. This is the "play album" entry point the detail pages consume: a header Play uses
+    /// <c>startIndex: 0</c>; a mid-album row play passes that row's index. No-op when
+    /// <paramref name="tracks"/> is empty.
     /// </summary>
     Task PlayRelease(IEnumerable<TrackDto> tracks, int startIndex = 0);
 
     /// <summary>
     /// Loads <paramref name="tracks"/> as the queue and sets the current position to index 0 WITHOUT
     /// streaming anything — the queue is "armed". This is the embed's prerender-safe entry point: it
-    /// performs no JS interop, so it runs identically during prerender and after WASM boot. The first
-    /// play gesture (see <see cref="IsArmed"/>) then starts playback via <see cref="Start"/>, which
-    /// keeps the loaded release queued so it advances through its tracks. No-op when
-    /// <paramref name="tracks"/> is empty (the queue stays empty and disarmed).
+    /// performs no JS interop, so it runs identically during prerender and after WASM boot. It replaces
+    /// the queue (an armed embed is a fresh staged release, not a prepend). The first play gesture (see
+    /// <see cref="IsArmed"/>) then starts playback via <see cref="Start"/>, which keeps the loaded
+    /// release queued so it advances through its tracks. No-op when <paramref name="tracks"/> is empty
+    /// (the queue stays empty and disarmed).
     /// </summary>
     void Arm(IEnumerable<TrackDto> tracks);
 
@@ -88,18 +120,24 @@ public interface IQueueService
     Task Start();
 
     /// <summary>
-    /// Appends a track to the end of the queue without changing what is currently playing.
-    /// Into a dormant queue (<see cref="CurrentIndex"/> == -1) the append leaves a coherent
-    /// <see cref="CurrentIndex"/> (the first appended track) so a subsequent play/skip is correct —
-    /// but it does NOT begin playback (add is not play). Interop-free; safe during prerender.
+    /// Appends a track to the <em>end</em> of the queue without changing what is currently playing.
+    /// Into a dormant queue (<see cref="CurrentIndex"/> == -1) while a track is already playing
+    /// externally (through the attached player but not via the queue), the append first seeds the head
+    /// with that now-playing track, then appends <paramref name="track"/> — yielding
+    /// <c>[now-playing, track]</c> so the queue reflects what the listener actually hears. Into a fully
+    /// dormant queue with nothing playing, the single appended track becomes the head at
+    /// <see cref="CurrentIndex"/> == 0. Either way it does NOT begin playback (add is not play).
+    /// Interop-free; safe during prerender.
     /// </summary>
     void Enqueue(TrackDto track);
 
     /// <summary>
-    /// Appends tracks to the end of the queue without changing what is currently playing.
-    /// Into a dormant queue (<see cref="CurrentIndex"/> == -1) the append leaves a coherent
-    /// <see cref="CurrentIndex"/> (the first appended track) so a subsequent play/skip is correct —
-    /// but it does NOT begin playback (add is not play). Interop-free; safe during prerender.
+    /// Appends tracks to the <em>end</em> of the queue without changing what is currently playing.
+    /// Into a dormant queue while a track is already playing externally, the append first seeds the head
+    /// with that now-playing track (see <see cref="Enqueue"/>), then appends the range. Into a fully
+    /// dormant queue with nothing playing, the first appended track becomes the head at
+    /// <see cref="CurrentIndex"/> == 0. It does NOT begin playback (add is not play). Interop-free; safe
+    /// during prerender.
     /// </summary>
     void EnqueueRange(IEnumerable<TrackDto> tracks);
 
@@ -136,6 +174,15 @@ public interface IQueueService
     /// </summary>
     Task Previous();
 
+    /// <summary>
+    /// Moves the current pointer to <paramref name="index"/> and streams that track once. This is the
+    /// row-jump primitive the open playlist panel uses: unlike <see cref="PlayRelease"/> it does not
+    /// prepend (the track is already in the deque), and unlike repeated <see cref="Next"/> it does not
+    /// stream the intervening rows. No-op when <paramref name="index"/> is out of range or already
+    /// current.
+    /// </summary>
+    Task JumpTo(int index);
+
     /// <summary>Empties the queue and resets the position. Does not stop the player.</summary>
     void Clear();
 

DeepDrftPublic.Client/Services/QueueService.cs

@@ -3,10 +3,12 @@ using DeepDrftModels.DTOs;
 namespace DeepDrftPublic.Client.Services;
 
 /// <summary>
-/// Default <see cref="IQueueService"/>: a single-slot orchestrator over an
+/// Default <see cref="IQueueService"/>: a two-level deque orchestrator over an
 /// <see cref="IStreamingPlayerService"/>. Holds the ordered list and current index as pure state,
 /// drives playback through the player's existing <see cref="IStreamingPlayerService.SelectTrackStreaming"/>,
-/// and auto-advances on the player's <see cref="IPlayerService.TrackEnded"/> signal.
+/// and auto-advances on the player's <see cref="IPlayerService.TrackEnded"/> signal. PLAY mutations enter
+/// the front (prepend); add-to-queue mutations enter the back (append) — see <see cref="IQueueService"/>
+/// for the full invariant.
 ///
 /// <para>
 /// The player instance is not DI-registered — <c>AudioPlayerProvider</c> constructs and cascades it.
@@ -14,7 +16,8 @@ namespace DeepDrftPublic.Client.Services;
 /// creates the player) rather than constructor injection. This keeps the player single-slot, avoids a
 /// construction cycle between provider/player/queue, and needs no <c>IServiceProvider</c>. The queue's
 /// own constructor stays parameterless, so the queue logic is unit-testable against a fake player with
-/// no container.
+/// no container. The attached player is also the seam by which the queue learns the externally-playing
+/// track when a dormant <see cref="Enqueue"/> needs to seed the head.
 /// </para>
 /// </summary>
 public sealed class QueueService : IQueueService, IDisposable
@@ -54,23 +57,42 @@ public sealed class QueueService : IQueueService, IDisposable
         _player.TrackEnded += OnTrackEnded;
     }
 
+    public async Task PlayTrack(TrackDto track)
+    {
+        PrependForPlay(new[] { track }, prependIndex: 0);
+        QueueChanged?.Invoke();
+        await PlayCurrent();
+    }
+
     public async Task PlayRelease(IEnumerable<TrackDto> tracks, int startIndex = 0)
     {
         var list = tracks.ToList();
         if (list.Count == 0) return;
 
         var start = Math.Clamp(startIndex, 0, list.Count - 1);
-
-        _items.Clear();
-        _items.AddRange(list);
-        CurrentIndex = start;
-        // Playback is now starting for real, so the queue is no longer merely armed.
-        IsArmed = false;
+        PrependForPlay(list, start);
         QueueChanged?.Invoke();
 
         await PlayCurrent();
     }
 
+    // The shared PLAY-prepend mutation (bug #5). Removes the previously-current track, inserts the
+    // played track(s) at the front in order, and points CurrentIndex at the prepended item the caller
+    // chose to start on. Whatever sat AFTER the old current stays intact behind the prepend; the old
+    // back-history (items before the old current) is discarded because a fresh PLAY defines a new
+    // front. Pure state — callers invoke QueueChanged + PlayCurrent. IsArmed clears: playback is real now.
+    private void PrependForPlay(IReadOnlyList<TrackDto> played, int prependIndex)
+    {
+        // Drop the previously-current track only (its tail — the up-next after it — is preserved).
+        // Anything before the old current is back-history that a new PLAY supersedes.
+        if (CurrentIndex >= 0 && CurrentIndex < _items.Count)
+            _items.RemoveRange(0, CurrentIndex + 1);
+
+        _items.InsertRange(0, played);
+        CurrentIndex = prependIndex;
+        IsArmed = false;
+    }
+
     public void Arm(IEnumerable<TrackDto> tracks)
     {
         var list = tracks as IReadOnlyList<TrackDto> ?? tracks.ToList();
@@ -94,27 +116,47 @@ public sealed class QueueService : IQueueService, IDisposable
 
     public void Enqueue(TrackDto track)
     {
+        SeedHeadFromPlayerIfDormant();
         _items.Add(track);
-        // OQ8: appending into a dormant (empty) queue leaves a coherent CurrentIndex so the next
-        // play/skip is correct — but does NOT auto-play (add is not play). PlayCurrent is never
-        // called here, so this stays interop-free and prerender-safe.
-        if (CurrentIndex == -1)
-            CurrentIndex = 0;
+        EnsureCoherentDormantIndex();
         QueueChanged?.Invoke();
     }
 
     public void EnqueueRange(IEnumerable<TrackDto> tracks)
     {
-        var before = _items.Count;
-        _items.AddRange(tracks);
-        if (_items.Count == before) return;
-        // OQ8: see Enqueue — first append into a dormant queue stages a coherent CurrentIndex
-        // without playing. The first newly-appended track becomes current.
-        if (CurrentIndex == -1)
-            CurrentIndex = 0;
+        var toAdd = tracks as IReadOnlyList<TrackDto> ?? tracks.ToList();
+        if (toAdd.Count == 0) return;
+
+        SeedHeadFromPlayerIfDormant();
+        _items.AddRange(toAdd);
+        EnsureCoherentDormantIndex();
         QueueChanged?.Invoke();
     }
 
+    // Bug #3: the first add into a dormant queue while a track is already playing externally (through
+    // the attached player but not via the queue) must seed the head with that now-playing track, so the
+    // append yields [now-playing, added] instead of a phantom single entry. We read the player's
+    // CurrentTrack — the same seam OnTrackEnded uses — so no extra dependency is introduced. Only seeds
+    // when truly dormant (empty list) AND a player track exists; a non-dormant queue is untouched.
+    private void SeedHeadFromPlayerIfDormant()
+    {
+        if (_items.Count != 0) return;
+        var playing = _player?.CurrentTrack;
+        if (playing is null) return;
+
+        _items.Add(playing);
+        CurrentIndex = 0;
+    }
+
+    // After an append, a dormant queue (CurrentIndex == -1, e.g. nothing was playing to seed from)
+    // needs a coherent head so a subsequent play/skip is correct — but add is not play, so we never
+    // stream here. A queue that already has a current index is left untouched.
+    private void EnsureCoherentDormantIndex()
+    {
+        if (CurrentIndex == -1 && _items.Count > 0)
+            CurrentIndex = 0;
+    }
+
     public void Move(int fromIndex, int toIndex)
     {
         if (fromIndex == toIndex) return;
@@ -192,6 +234,16 @@ public sealed class QueueService : IQueueService, IDisposable
         await PlayCurrent();
     }
 
+    public async Task JumpTo(int index)
+    {
+        if (index < 0 || index >= _items.Count) return;
+        if (index == CurrentIndex) return;
+        CurrentIndex = index;
+        IsArmed = false;
+        QueueChanged?.Invoke();
+        await PlayCurrent();
+    }
+
     public void Clear()
     {
         if (_items.Count == 0 && CurrentIndex == -1) return;
@@ -217,23 +269,40 @@ public sealed class QueueService : IQueueService, IDisposable
 
     // Advance on organic end-of-stream only. TrackEnded is not raised by stop/unload/track-switch,
     // so a manual stop or a fresh single-track selection elsewhere never spuriously advances the
-    // queue. When the queue is past its last track, end-of-stream simply stops — nothing to advance.
+    // queue.
     //
-    // Guard: only advance when the track that just ended is the queue's own current item. Call sites
-    // that stream a single track directly (SessionDetail, StreamNowButton, resume from AudioPlayerBar)
+    // Guard: only act when the track that just ended is the queue's own current item. Call sites that
+    // stream a single track directly (SessionDetail, StreamNowButton, resume from AudioPlayerBar)
     // overwrite the player's CurrentTrack without touching the queue. If their track reaches natural
     // end, the player fires TrackEnded — but the queue's Current no longer matches the player's
-    // CurrentTrack, so we must not advance. Id-based equality is used rather than ReferenceEquals
+    // CurrentTrack, so we must not touch the queue. Id-based equality is used rather than ReferenceEquals
     // because DTO copies through serialisation are not reference-equal.
+    //
+    // When the ended track IS the queue's current: advance if there is a next track, otherwise the queue
+    // has reached its end — empty it (bug #2), so the finished last track is not stranded as current and
+    // the queue goes dormant (panel/button gone per HasQueue gating).
     private void OnTrackEnded()
     {
-        if (!HasNext) return;
         if (_player?.CurrentTrack?.Id != Current?.Id) return;
-        // Fire-and-forget is deliberate: TrackEnded is a synchronous event invoked from the player's
-        // end-of-playback callback continuation; we must not block it. Advancing kicks off the next
-        // stream, whose own failures surface through the player's ErrorMessage/state — the queue does
-        // not own playback error handling.
-        _ = Next();
+        if (Current is null) return;
+
+        if (HasNext)
+        {
+            // Fire-and-forget is deliberate: TrackEnded is a synchronous event invoked from the player's
+            // end-of-playback callback continuation; we must not block it. Advancing kicks off the next
+            // stream, whose own failures surface through the player's ErrorMessage/state — the queue does
+            // not own playback error handling.
+            _ = Next();
+        }
+        else
+        {
+            // Last track ended naturally → empty the deque. The player is left alone (its stream has
+            // already ended on its own); we only reset queue state.
+            _items.Clear();
+            CurrentIndex = -1;
+            IsArmed = false;
+            QueueChanged?.Invoke();
+        }
     }
 
     private async Task PlayCurrent()

DeepDrftPublic.Client/Services/WaveformVisualizerControlState.cs

@@ -97,6 +97,13 @@ public sealed class WaveformVisualizerControlState
     /// </summary>
     public const bool DefaultWaveformEnabled = true;
 
+    /// <summary>
+    /// Default Theater-mode state. <c>false</c> so a fresh page load opens with the full release page,
+    /// not the bare visualizer (Phase 20 §4/OQ5). Has no TS-side anchor: Theater Mode is a page-chrome
+    /// presentation flag, not a visualizer dial — the bridge never reads it.
+    /// </summary>
+    public const bool DefaultTheaterMode = false;
+
     /// <summary>Apparent bottom-to-top scroll rate, normalized [0,1]. Bridge maps it to a visible
     /// time-span via <see cref="WaveformZoomMapping"/>; the standalone resolution/zoom control is gone.</summary>
     public double ScrollSpeed { get; set; } = DefaultScrollSpeed;
@@ -137,12 +144,35 @@ public sealed class WaveformVisualizerControlState
     /// </summary>
     public bool WaveformEnabled { get; set; } = DefaultWaveformEnabled;
 
+    /// <summary>
+    /// Whether Theater Mode is on (Phase 20). When <c>true</c> the three release-detail pages remove
+    /// their release content via <c>@if</c> so the visualizer fills the surface, and the player bar
+    /// grows to carry the playing release's identity. Distinct from the visualizer dials: the bridge
+    /// ignores it — the pages and the player bar observe it through the same <see cref="Changed"/> seam.
+    /// Gated for visibility on <see cref="LavaEnabled"/> || <see cref="WaveformEnabled"/> at the toggle.
+    /// </summary>
+    public bool TheaterMode { get; set; } = DefaultTheaterMode;
+
     /// <summary>
     /// Raised whenever any control value changes. The visualizer bridge subscribes to push the
-    /// affected dial(s). Mutators set the property then raise this; subscribers re-read the values.
+    /// affected dial(s); the Theater-Mode observers (detail pages, player bar) subscribe to react to
+    /// <see cref="TheaterMode"/>. Mutators set the property then raise this; subscribers re-read the values.
     /// </summary>
     public event Action? Changed;
 
+    /// <summary>
+    /// Enforces the Theater-Mode invariant: Theater Mode cannot remain on when both visualizer
+    /// subsystems are off (there is nothing to go to theater FOR). Call this after mutating
+    /// <see cref="LavaEnabled"/> or <see cref="WaveformEnabled"/> and before
+    /// <see cref="NotifyChanged"/> so all observers see a consistent, coerced state in the same
+    /// <see cref="Changed"/> cycle.
+    /// </summary>
+    public void CoerceTheaterMode()
+    {
+        if (TheaterMode && !LavaEnabled && !WaveformEnabled)
+            TheaterMode = false;
+    }
+
     /// <summary>Raise <see cref="Changed"/>. Called by the controls component after mutating a value.</summary>
     public void NotifyChanged() => Changed?.Invoke();
 }

DeepDrftPublic.Client/Startup.cs

@@ -45,6 +45,16 @@ public static class Startup
         services.AddScoped<IAnonIdProvider, AnonIdProvider>();
         services.AddScoped<IPlayEventSink, BeaconPlayEventSink>();
         services.AddScoped<ShareTracker>();
+
+        // Phase 22 SEO defaults — non-secret brand constants (canonical origin, site name, default share
+        // image, social links). Singleton: stateless config, identical in the server-prerender and WASM
+        // passes (this method runs in both), which is what makes SeoHead's double-render output identical.
+        services.AddSingleton(new SeoOptions());
+
+        // Environment-gated robots bridge. Scoped + [PersistentState] like DarkModeSettings: the server
+        // seeds IsProduction during prerender and it rounds to the WASM pass, so SeoHead resolves the same
+        // default robots in both render passes (non-production → noindex,nofollow, keeping beta uncrawled).
+        services.AddScoped<SeoEnvironment>();
     }
 
     public static void ConfigureApiHttpClient(IServiceCollection services, string baseAddress)

DeepDrftPublic/CLAUDE.md

@@ -6,12 +6,15 @@ See the root `CLAUDE.md` for full architecture overview. This file covers what i
 
 ## One-line purpose
 
-The Blazor Web App host. Owns a browser-facing proxy controller for `api/track/*` (metadata and audio streaming), MudBlazor theme prerender, and TypeScript→JS audio interop.
+The Blazor Web App host. Owns a browser-facing proxy controller for `api/track/*` (metadata and audio streaming), crawl-directive endpoints (`/robots.txt` + `/sitemap.xml`), MudBlazor theme prerender, and TypeScript→JS audio interop.
 
 ## What lives here now (only)
 
 - `Program.cs`, `Startup.cs`: HTTP host config, DI wiring, port binding.
 - `Controllers/TrackProxyController.cs`: Thin proxy controller at `[Route("api/track")]`. Two actions: `GET api/track/page` (proxies paged track metadata) and `GET api/track/{trackId}` (proxies audio streaming without buffering, forwards `offset` query param for seek-beyond-buffer). Uses `RegisterForDispose` for clean connection cleanup.
+- `Controllers/CrawlDirectiveController.cs`: Second controller; serves `GET /robots.txt` and `GET /sitemap.xml`. Reads `IWebHostEnvironment.IsProduction()` **directly** (server-side only — no PersistentState bridge). Production robots.txt: `Allow: /` + `Disallow: /FramePlayer` + `Disallow: /api/` + `Sitemap:` pointer. Non-production robots.txt: `Disallow: /`. Production sitemap.xml: walks `GET api/release` via the `"DeepDrft.API"` named client, emits six static roots + one `<url>` per release (loc = `SeoOptions.BaseUrl` + `ReleaseRoutes.DetailHref`, lastmod from `ReleaseDate`); resilient (partial read → well-formed roots-only doc, never 500). Non-production: sitemap returns 404. Routes automatically via `MapControllers()`.
+- `Seo/RobotsTxt.cs`: Pure builder for the robots.txt body (no HTTP, no DI — composition only).
+- `Seo/SitemapXml.cs`: Pure builder for the sitemap XML body (no HTTP, no DI — composition only).
 - `Services/DarkModeService.cs`: Server-side dark-mode prerender (reads `darkMode` cookie, seeds `DarkModeSettings.IsDarkMode` via `IHttpContextAccessor`, carries to WASM via `PersistentComponentState`).
 - `Components/App.razor`: Root component with `@rendermode="InteractiveAuto"`. Calls `DarkModeService.InitializeAsync()` in `OnInitialized`.
 - `Components/Pages/Error.razor`: Error fallback.
@@ -84,9 +87,11 @@ The middleware pipeline in `Program.cs` is ordered as follows:
 8. Development-only `UseStaticFiles()` — serves raw TypeScript from `/Interop/` for source-map debugging.
 9. `MapControllers()` and `MapRazorComponents()` — route controller and component requests.
 
-## The proxy controller
+## Controllers
 
-`TrackProxyController` in `Controllers/` is the only HTTP controller. It is a thin proxy only — no domain logic, no data layer. The WASM client points both named HttpClients (`"DeepDrft.API"` and `"DeepDrft.Content"`) at the Blazor host's base address, so all browser requests route through this controller to DeepDrftAPI. Server-side SSR calls DeepDrftAPI directly (server-to-server) via the same named clients — no proxy hop on the server side.
+`Controllers/` now holds two controllers. Both are thin boundaries — no domain logic, no data layer.
+
+`TrackProxyController` is the audio/metadata proxy. The WASM client points both named HttpClients (`"DeepDrft.API"` and `"DeepDrft.Content"`) at the Blazor host's base address, so all browser requests route through this controller to DeepDrftAPI. Server-side SSR calls DeepDrftAPI directly (server-to-server) via the same named clients — no proxy hop on the server side.
 
 The proxy forwards public, unauthenticated routes:
 - `GET api/track/page` — paged metadata listing

DeepDrftPublic/Components/App.razor

@@ -1,4 +1,5 @@
 @using DeepDrftPublic.Client
+@using DeepDrftPublic.Client.Common
 @using DeepDrftPublic.Services
 @using DeepDrftShared.Client.Components
 <!DOCTYPE html>
@@ -34,11 +35,16 @@
 @code {
 
     [Inject] public required DarkModeService DarkModeService { get; set; }
+    [Inject] public required SeoEnvironment SeoEnvironment { get; set; }
+    [Inject] public required IWebHostEnvironment HostEnvironment { get; set; }
 
     protected override void OnInitialized()
     {
         base.OnInitialized();
         DarkModeService.CheckDarkMode();
+        // Seed the environment-gated robots bridge during prerender; [PersistentState] rounds it to WASM
+        // so both render passes resolve the same default robots (Production → index, else noindex).
+        SeoEnvironment.IsProduction = HostEnvironment.IsProduction();
     }
 
 }

DeepDrftPublic/Controllers/CrawlDirectiveController.cs

@@ -0,0 +1,111 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+using DeepDrftModels.DTOs;
+using Models.Common;
+using DeepDrftPublic.Client.Common;
+using DeepDrftPublic.Seo;
+using Microsoft.AspNetCore.Mvc;
+
+namespace DeepDrftPublic.Controllers;
+
+/// <summary>
+/// Serves the public crawl-directive surfaces (Phase 23): <c>GET /robots.txt</c> and
+/// <c>GET /sitemap.xml</c>. Both are environment-gated server-side via
+/// <see cref="IWebHostEnvironment.IsProduction"/> read directly here — not the WASM-only
+/// <c>SeoEnvironment</c> bridge — and fail safe closed (non-production is uncrawlable, Invariant E1).
+///
+/// <para>
+/// This is a thin host boundary: it owns the gate and the release walk, and delegates all body composition
+/// to the pure <see cref="RobotsTxt"/> / <see cref="SitemapXml"/> builders. The sitemap walk reuses the
+/// existing <c>"DeepDrft.API"</c> named client server-to-server (the same client SSR prerender uses) — it
+/// <b>enumerates and transforms</b> releases into XML rather than relaying verbatim like the proxy controllers.
+/// No new API endpoint, no schema change (Phase 22 C5 holds).
+/// </para>
+/// </summary>
+[ApiController]
+public class CrawlDirectiveController : ControllerBase
+{
+    // 100 is the server-side PageSize cap, so this is the largest page the walk can actually get.
+    private const int WalkPageSize = 100;
+
+    // The release walk deserializes a bare PagedResult<ReleaseDto> (no ApiResultDto envelope), matching TrackClient.
+    private static readonly JsonSerializerOptions JsonOptions = new(JsonSerializerDefaults.Web);
+
+    private readonly IWebHostEnvironment _environment;
+    private readonly SeoOptions _seoOptions;
+    private readonly HttpClient _upstream;
+    private readonly ILogger<CrawlDirectiveController> _logger;
+
+    public CrawlDirectiveController(
+        IWebHostEnvironment environment,
+        SeoOptions seoOptions,
+        IHttpClientFactory httpClientFactory,
+        ILogger<CrawlDirectiveController> logger)
+    {
+        _environment = environment;
+        _seoOptions = seoOptions;
+        _upstream = httpClientFactory.CreateClient("DeepDrft.API");
+        _logger = logger;
+    }
+
+    /// <summary>
+    /// <c>GET /robots.txt</c>. Production: allow + FramePlayer/api disallows + sitemap pointer. Any
+    /// non-production environment: <c>Disallow: /</c> with no sitemap pointer (E1). Always <c>text/plain</c>.
+    /// </summary>
+    [HttpGet("/robots.txt")]
+    public ContentResult GetRobots()
+    {
+        var body = RobotsTxt.Build(_environment.IsProduction(), _seoOptions.BaseUrl);
+        return Content(body, "text/plain");
+    }
+
+    /// <summary>
+    /// <c>GET /sitemap.xml</c>. Non-production: 404 (the non-prod robots carries no sitemap pointer, so
+    /// nothing references it). Production: the static roots plus one entry per release. Resilient — a
+    /// partial/empty/failed release read yields a well-formed (possibly roots-only) document, never a 500.
+    /// </summary>
+    [HttpGet("/sitemap.xml")]
+    public async Task<ActionResult> GetSitemap(CancellationToken ct = default)
+    {
+        if (!_environment.IsProduction())
+            return NotFound();
+
+        var releases = await GatherReleasesAsync(ct);
+        var xml = SitemapXml.Build(_seoOptions.BaseUrl, releases);
+        return Content(xml, "application/xml");
+    }
+
+    // Walks GET api/release page by page until every release is read. On any upstream failure, returns the
+    // releases gathered so far (possibly none) so the sitemap degrades to a well-formed roots-only document
+    // rather than 500ing — a sitemap that errors trains crawlers to stop fetching it (AC-S5).
+    private async Task<IReadOnlyList<ReleaseDto>> GatherReleasesAsync(CancellationToken ct)
+    {
+        var gathered = new List<ReleaseDto>();
+        var page = 1;
+
+        try
+        {
+            while (true)
+            {
+                var result = await _upstream.GetFromJsonAsync<PagedResult<ReleaseDto>>(
+                    $"api/release?page={page}&pageSize={WalkPageSize}", JsonOptions, ct);
+
+                if (result?.Items is null)
+                    break;
+
+                gathered.AddRange(result.Items);
+
+                if (gathered.Count >= result.TotalCount || !result.Items.Any())
+                    break;
+
+                page++;
+            }
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Sitemap release walk failed after gathering {Count} release(s); serving a partial sitemap", gathered.Count);
+        }
+
+        return gathered;
+    }
+}

DeepDrftPublic/Interop/embed/embed-frame.ts

@@ -0,0 +1,55 @@
+// Embed (iframe) → host resize handshake (Phase 17 wave 17.3, OQ1 Option A).
+//
+// The Fixed-mode player renders an always-shown queue panel below the controls. A collapse/expand
+// toggle lets the embedder's viewer reclaim the panel's vertical space — but collapsing inside the
+// iframe only reclaims space if the *outer* iframe element also shrinks. The iframe cannot resize
+// itself, so it posts its desired pixel height to the host page; the embed snippet (minted by
+// EmbedSnippetBuilder.ForRelease) carries a tiny listener that sets iframe.style.height.
+//
+// Degrades safely: if the host page ignores or strips the snippet's listener (Option B's value), the
+// panel still renders and toggles inside the iframe — only the outer resize is lost. We post nothing
+// when not framed (window === parent), so the docked player is unaffected.
+//
+// Multi-embed isolation: EmbedSnippetBuilder.ForRelease mints a per-snippet random token and passes
+// it as ?EmbedId=<token> in the iframe src. We read it here from window.location.search and include
+// it in the postMessage payload as `embedId`. The host-side resize script matches on this token so
+// only the correct iframe is resized when multiple embeds share a host page. If EmbedId is absent
+// (older already-pasted snippets), embedId is omitted from the payload — those snippets' scripts
+// ignore messages without a matching embedId, so there is no cross-talk either way.
+
+const MESSAGE_TYPE = "deepdrft-embed-resize";
+
+/** Read the EmbedId query param from the iframe's own URL, if present. */
+function readEmbedId(): string | null {
+    try {
+        return new URLSearchParams(window.location.search).get("EmbedId");
+    } catch {
+        return null;
+    }
+}
+
+// Resolved once at module load — the URL does not change while the iframe is alive.
+const embedId: string | null = readEmbedId();
+
+/**
+ * Measure the live rendered height of the player element and post it to the host page so it can size
+ * the iframe to match. No-op when not embedded in a frame, or when the element is unmeasurable.
+ *
+ * targetOrigin is "*" deliberately: the embedder's origin is unknown (any blog can embed us) and the
+ * payload carries no secrets — just a height the host is free to ignore.
+ *
+ * The payload includes `embedId` when the iframe src carried an EmbedId query param. The host-side
+ * resize script matches on this field to isolate multiple embeds on the same page.
+ */
+export function postHeight(element: HTMLElement): void {
+    if (window.parent === window) return; // Not framed — nothing to resize.
+    if (!element) return;
+
+    // ceil + a hairline guard against sub-pixel rounding that would otherwise clip the bottom edge.
+    const height = Math.ceil(element.getBoundingClientRect().height) + 2;
+    if (!Number.isFinite(height) || height <= 0) return;
+
+    const payload: Record<string, unknown> = { type: MESSAGE_TYPE, height };
+    if (embedId !== null) payload.embedId = embedId;
+    window.parent.postMessage(payload, "*");
+}

DeepDrftPublic/Interop/layout/spacer.ts

@@ -10,14 +10,81 @@
  * read it. One observer at a time, re-pointed on each `observe` call; the var
  * resets to 0 on `unobserve` (player minimized / disposed) so the spacer
  * collapses.
+ *
+ * COALESCING (Phase 20 theater-flash fix). `--player-height` has two consumers:
+ * the layout spacer div AND the ambient WaveformVisualizer backdrop, whose
+ * `bottom` inset is this var (WaveformVisualizer.razor.css `.mix-waveform-bg`).
+ * Moving that inset changes the visualizer canvas's CSS box, which fires the
+ * renderer's own canvas ResizeObserver — and a GL resize CLEARS the backing
+ * store. That is correct and cheap for a discrete bar-height change (breakpoint
+ * reflow, minimize/expand, error banner). But Theater Mode eases the player bar's
+ * "now showing" band open/closed over ~0.45s via a CSS grid-rows transition, so
+ * the bar height changes EVERY FRAME of the ease. Mirroring each intermediate
+ * frame here would re-clear the GL backing store ~27×, reading as a flash.
+ *
+ * The fix coalesces the publish with a LEADING + TRAILING edge: the first change
+ * after a quiet period is written immediately (so a discrete jump — the common
+ * case — has zero added latency and the clip never lags), then a rapid STREAM of
+ * further changes (an animated transition) is debounced and only its SETTLED
+ * end-state is written. So a Theater ease resizes the visualizer at most twice
+ * (leading 1px move + final settle) instead of once per frame. The settled value
+ * is always the last write, so at-rest sizing/clip stays exact; and this remains
+ * the SOLE writer of `--player-height`, so the renderer's ResizeObserver stays the
+ * sole canvas size writer (its invariant is untouched).
  */
 
 const HEIGHT_VAR = '--player-height';
-let observer: ResizeObserver | null = null;
 
-function writeHeight(px: number): void {
+/**
+ * Quiet window (ms) after which a pending settled height is flushed. One change
+ * then silence (a discrete reflow) flushes after this delay but was ALSO written
+ * on the leading edge, so the trailing flush is a no-op — discrete jumps pay no
+ * latency. A continuous transition keeps resetting this timer until it ends, then
+ * flushes the final height once. ~80ms comfortably exceeds a frame interval (so a
+ * mid-ease frame never trips an early flush) yet settles promptly after the ease.
+ */
+const SETTLE_MS = 80;
+
+let observer: ResizeObserver | null = null;
+let lastWritten = -1;
+let pendingHeight = -1;
+let settleTimer: number | null = null;
+
+function setVar(px: number): void {
     // Round up so sub-pixel heights never leave a hairline of overlap.
-    document.documentElement.style.setProperty(HEIGHT_VAR, `${Math.ceil(px)}px`);
+    const rounded = Math.ceil(px);
+    if (rounded === lastWritten) return;
+    lastWritten = rounded;
+    document.documentElement.style.setProperty(HEIGHT_VAR, `${rounded}px`);
+}
+
+/**
+ * Publish a measured height with leading + trailing coalescing. Leading: if no
+ * settle is pending, this is the first change after a quiet period — write it now.
+ * Trailing: (re)arm the settle timer so the final value of a rapid stream lands
+ * once the stream stops.
+ */
+function publishHeight(px: number): void {
+    pendingHeight = px;
+    if (settleTimer === null) {
+        // Leading edge — discrete jumps land immediately; the first frame of a
+        // transition lands too (one resize), then the rest is debounced below.
+        setVar(px);
+    }
+    if (settleTimer !== null) {
+        clearTimeout(settleTimer);
+    }
+    settleTimer = window.setTimeout(() => {
+        settleTimer = null;
+        setVar(pendingHeight);
+    }, SETTLE_MS);
+}
+
+function measure(entry: ResizeObserverEntry): number {
+    // Prefer the border-box measurement; fall back to contentRect on the
+    // (older) engines that don't populate borderBoxSize.
+    const box = entry.borderBoxSize?.[0];
+    return box ? box.blockSize : entry.contentRect.height;
 }
 
 export function observe(element: Element): void {
@@ -27,20 +94,28 @@ export function observe(element: Element): void {
     observer = new ResizeObserver(entries => {
         const entry = entries[0];
         if (!entry) return;
-        // Prefer the border-box measurement; fall back to contentRect on the
-        // (older) engines that don't populate borderBoxSize.
-        const box = entry.borderBoxSize?.[0];
-        writeHeight(box ? box.blockSize : entry.contentRect.height);
+        publishHeight(measure(entry));
     });
     observer.observe(element);
 
     // Seed synchronously so the spacer is correct on this frame, before the
-    // first ResizeObserver callback fires.
-    writeHeight(element.getBoundingClientRect().height);
+    // first ResizeObserver callback fires. A fresh observe target is a discrete
+    // change, so write it straight through (bypassing the debounce) — re-pointing
+    // the observer (e.g. expanded <-> minimized) must not lag behind a settle.
+    if (settleTimer !== null) {
+        clearTimeout(settleTimer);
+        settleTimer = null;
+    }
+    setVar(element.getBoundingClientRect().height);
 }
 
 export function unobserve(): void {
     observer?.disconnect();
     observer = null;
-    writeHeight(0);
+    if (settleTimer !== null) {
+        clearTimeout(settleTimer);
+        settleTimer = null;
+    }
+    pendingHeight = -1;
+    setVar(0);
 }

DeepDrftPublic/Seo/RobotsTxt.cs

@@ -0,0 +1,34 @@
+namespace DeepDrftPublic.Seo;
+
+/// <summary>
+/// Pure composition of the <c>robots.txt</c> body (Phase 23 wave 23.1). The environment gate is the
+/// caller's: the endpoint reads <see cref="Microsoft.AspNetCore.Hosting.IWebHostEnvironment.IsProduction"/>
+/// server-side and passes the boolean here, so the production-vs-beta branch lives in one testable place.
+/// Fail-safe is closed — anything that is not Production yields <c>Disallow: /</c> (Invariant E1).
+/// </summary>
+public static class RobotsTxt
+{
+    /// <summary>
+    /// Builds the directive body. In Production: allow everything except the embed shell and the proxy API
+    /// paths, plus a <c>Sitemap:</c> pointer (OQ-R2). In any non-production environment: a closed door
+    /// (<c>Disallow: /</c>) with no sitemap pointer, so a crawl of beta sees nothing and the sitemap is
+    /// never advertised.
+    /// </summary>
+    /// <param name="isProduction">The server-side <c>IsProduction()</c> result — the single gate.</param>
+    /// <param name="baseUrl">Canonical origin (no trailing slash) for the <c>Sitemap:</c> line; Production only.</param>
+    public static string Build(bool isProduction, string baseUrl)
+    {
+        if (!isProduction)
+        {
+            return "User-agent: *\n" +
+                   "Disallow: /\n";
+        }
+
+        var origin = baseUrl.TrimEnd('/');
+        return "User-agent: *\n" +
+               "Allow: /\n" +
+               "Disallow: /FramePlayer\n" +
+               "Disallow: /api/\n" +
+               $"Sitemap: {origin}/sitemap.xml\n";
+    }
+}

DeepDrftPublic/Seo/SitemapXml.cs

@@ -0,0 +1,68 @@
+using System.Text;
+using System.Xml;
+using System.Xml.Linq;
+using DeepDrftModels.DTOs;
+using DeepDrftPublic.Client.Common;
+
+namespace DeepDrftPublic.Seo;
+
+/// <summary>
+/// Pure composition of the sitemaps.org <c>urlset</c> document (Phase 23 wave 23.2). Enumerates the fixed
+/// indexable roots plus one entry per release, every <c>&lt;loc&gt;</c> absolutized against
+/// <see cref="SeoOptions.BaseUrl"/> and per-release paths resolved through
+/// <see cref="ReleaseRoutes.DetailHref(string, DeepDrftModels.Enums.ReleaseMedium)"/> — so each sitemap URL
+/// equals the page's <c>SeoHead</c> canonical by construction. No fetch, no env logic: the endpoint owns the
+/// gate and the release walk; this turns the gathered DTOs into XML and never throws on partial input.
+/// </summary>
+public static class SitemapXml
+{
+    private static readonly XNamespace Ns = "http://www.sitemaps.org/schemas/sitemap/0.9";
+
+    /// <summary>
+    /// The indexable static roots (OQ-S3). An explicit list, deliberately NOT derived from the nav index:
+    /// the indexable set is not the nav set (e.g. <c>/FramePlayer</c> is nav-absent and must stay out, and a
+    /// new nav entry is not automatically sitemap-worthy). Revisit here if the indexable-roots set grows.
+    /// </summary>
+    public static readonly IReadOnlyList<string> StaticRoots = ["/", "/about", "/cuts", "/sessions", "/mixes", "/archive"];
+
+    /// <summary>
+    /// Builds the full <c>urlset</c>: the static roots (no <c>lastmod</c>) followed by one <c>&lt;url&gt;</c>
+    /// per release. A release carries a <c>&lt;lastmod&gt;</c> sourced from <see cref="ReleaseDto.ReleaseDate"/>
+    /// in W3C <c>YYYY-MM-DD</c> form when present (OQ-S2 — the release date, accepted as a plausible crawl hint).
+    /// A null/empty release set yields a well-formed roots-only document.
+    /// </summary>
+    /// <param name="baseUrl">Canonical origin (no trailing slash) every <c>&lt;loc&gt;</c> is built from.</param>
+    /// <param name="releases">The gathered releases; may be empty or partial after an upstream failure.</param>
+    public static string Build(string baseUrl, IEnumerable<ReleaseDto> releases)
+    {
+        var origin = baseUrl.TrimEnd('/');
+
+        var roots = StaticRoots.Select(path => UrlElement(origin + path, lastmod: null));
+        var releaseUrls = releases.Select(release => UrlElement(
+            origin + ReleaseRoutes.DetailHref(release.EntryKey, release.Medium),
+            release.ReleaseDate?.ToString("yyyy-MM-dd")));
+
+        var urlset = new XElement(Ns + "urlset", roots.Concat(releaseUrls));
+        var document = new XDocument(new XDeclaration("1.0", "UTF-8", null), urlset);
+
+        // Save through a byte-based UTF-8 stream so the XML declaration reads encoding="utf-8". An
+        // XmlWriter over a StringBuilder/StringWriter is character-based (UTF-16) and would stamp the
+        // declaration utf-16, which is wrong for a body served as application/xml.
+        using var stream = new MemoryStream();
+        var settings = new XmlWriterSettings { Encoding = new UTF8Encoding(encoderShouldEmitUTF8Identifier: false), Indent = true };
+        using (var xmlWriter = XmlWriter.Create(stream, settings))
+        {
+            document.Save(xmlWriter);
+        }
+
+        return Encoding.UTF8.GetString(stream.ToArray());
+    }
+
+    private static XElement UrlElement(string loc, string? lastmod)
+    {
+        var element = new XElement(Ns + "url", new XElement(Ns + "loc", loc));
+        if (lastmod is not null)
+            element.Add(new XElement(Ns + "lastmod", lastmod));
+        return element;
+    }
+}

DeepDrftPublic/wwwroot/styles/deepdrft-styles.css

@@ -18,6 +18,15 @@ html, body {
     color: var(--mud-palette-text-primary);
 }
 
+/* Main-content clearance for the fixed frosted-glass nav (.dd-nav). The nav is
+   position:fixed (so content scrolls under its backdrop blur) and thus out of flow;
+   in MainLayout's flex column the content would otherwise start at the top and slide
+   under the bar. Pad the top by the shared --deepdrft-nav-height token so the clearance
+   tracks the bar exactly across breakpoints. Replaces the old hardcoded MudBlazor pt-16. */
+.dd-main-content {
+    padding-top: var(--deepdrft-nav-height, 88px);
+}
+
 /* Ensure the theme wrapper fills the full viewport so no background gap shows. */
 .deepdrft-theme-dark,
 .deepdrft-theme-light {
@@ -342,6 +351,75 @@ h2, h3, h4, h5, h6,
     gap: 0.5rem;
 }
 
+/* Theater toggle + lava-lamp popover cluster on the detail-page top action row (Phase 20 §3). Keeps
+   the two icon affordances adjacent on the right edge rather than letting the SpaceBetween row spread
+   them apart. Shared by Cut/Mix (scaffold TopRightAction) and Session (its own top row). */
+.dd-detail-top-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+/* Full-screen detail body (Phase 20 Wave 2 §1). The content body always fills the viewport below the
+   fixed nav so the ambient/full-bleed visualizer reads as genuinely full-screen and the footer is pushed
+   below the fold (scroll to reach it) — independent of Theater Mode. Reuses the shared
+   --deepdrft-nav-height token (88px desktop / 72px mobile) so the clearance tracks the bar across
+   breakpoints; no new layout token. Applied to each detail page's foreground content container. */
+.dd-detail-fill {
+    min-height: calc(100vh - var(--deepdrft-nav-height, 88px));
+}
+
+/* Eased content collapse for Theater Mode (Phase 20 Wave 2 §2). The detail content stays mounted and
+   collapses smoothly when .dd-theater-collapsed is applied, so toggling Theater eases both directions
+   instead of popping — when collapsed the content is fully out of the way and the visualizer is
+   unobstructed. The same pattern drives the player-bar "now showing" band so the bar grows/shrinks
+   smoothly too.
+
+   Technique: grid-template-rows 1fr → 0fr interpolates the REAL content height (no 400vh ceiling
+   artifact / delayed-start that the old max-height approach had). The direct child receives
+   overflow:hidden + min-height:0 so it actually clips during the transition (the grid child is the
+   collapsing unit). visibility:hidden removes all descendants from the tab order and from pointer/
+   keyboard interaction once collapsed — this fixes the Major accessibility defect where Tab could
+   reach hidden controls. transition-behavior:allow-discrete makes visibility flip discretely: it
+   flips to hidden AFTER the ease-out finishes (so the animation plays fully), and flips back to
+   visible BEFORE the ease-in starts (so content is immediately interactive on the way back in).
+   The visibility transition duration matches the height ease (0.45s) so allow-discrete has a real
+   interval to defer against: on collapse the flip to hidden is held until t=0.45s; on reopen it
+   fires at t=0 (immediately interactive). A 0s duration would fire the flip at t≈0 on collapse,
+   defeating the deferral and hiding content before the ease-out finishes. */
+.dd-theater-collapsible {
+    display: grid;
+    grid-template-rows: 1fr;
+    opacity: 1;
+    visibility: visible;
+    transition: grid-template-rows 0.45s ease, opacity 0.3s ease, visibility 0.45s;
+    transition-behavior: allow-discrete;
+}
+
+/* The single direct child clips itself during the grid-row collapse. min-height:0 overrides the
+   implicit min-height:auto that would prevent the row from shrinking past the content's intrinsic
+   height. overflow:hidden clips painted content when the row is partially collapsed. */
+.dd-theater-collapsible > * {
+    overflow: hidden;
+    min-height: 0;
+}
+
+.dd-theater-collapsed {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    /* visibility flips to hidden at the END of the 0.45s ease-out (deferred by allow-discrete);
+       on reopen it flips back to visible at t=0 so content is immediately interactive. */
+    visibility: hidden;
+}
+
+/* Honor reduced-motion: collapse still happens (it is layout, not decoration) but instantly, matching
+   the parallax precedent (transition-duration: 0). */
+@media (prefers-reduced-motion: reduce) {
+    .dd-theater-collapsible {
+        transition-duration: 0ms;
+    }
+}
+
 .deepdrft-track-detail-meta {
     display: flex;
     flex-direction: row;
@@ -358,6 +436,22 @@ h2, h3, h4, h5, h6,
     font-family: var(--deepdrft-font-mono) !important;
 }
 
+/* Default MudBlazor popover surface (Phase 18, T4 — symptom #1). Selects, menus, and the
+   share-popover body render inside .mud-popover. (Tooltips are NOT covered here — MudBlazor
+   tooltips paint from --mud-palette-text, not the popover surface.) Their visible surface is the
+   inner .mud-paper, which paints background-color: var(--mud-palette-surface). Inspection settled
+   the root cause: the "too dark" is NOT --deepdrft-panel-ground leakage (the bespoke dark-glass
+   panels are MudOverlay .mud-overlay-content surfaces and never match .mud-popover) — it is simply
+   that the popover surface tracks --mud-palette-surface with no desaturated-navy treatment. So
+   re-point --mud-palette-surface to the theme-aware --deepdrft-popover-surface *within the popover
+   scope only*: a soft desaturated-navy wash in light, the existing panel-ground charcoal in dark.
+   Scoping the variable (not a flat background) means any inner .mud-paper, .mud-list, or menu picks
+   it up for free, while the global surface used elsewhere on the page is unaffected. */
+.mud-popover {
+    --mud-palette-surface: var(--deepdrft-popover-surface);
+    background-color: var(--deepdrft-popover-surface);
+}
+
 .deepdrft-share-popover-body {
     padding: 0.75rem 1rem;
     min-width: 280px;
@@ -399,11 +493,11 @@ h2, h3, h4, h5, h6,
    section labels are LIGHT (static). The slider track/thumb and the lamp toggles are green.
    ============================================================================= */
 .waveform-visualizer-control-panel.mix-visualizer-controls-bar {
-    /* Greyed panel ground — desaturated charcoal so the blue slider reads against it (defect #1).
-       Token is tunable in deepdrft-tokens.css without touching this rule. */
-    background: var(--deepdrft-panel-ground);
-    /* Square corners + thin light border — NowPlayingCard chrome (§5). */
-    border: 1px solid var(--deepdrft-border-light);
+    /* Theme-aware glass ground — dark charcoal in dark theme, light translucent glass in light
+       (so the deck reads against the light page). Tunable in deepdrft-tokens.css. */
+    background: var(--deepdrft-panel-surface);
+    /* Square corners + thin theme-aware border — NowPlayingCard chrome (§5). */
+    border: 1px solid var(--deepdrft-panel-border);
     border-radius: 0;
     /* Optional backdrop blur — cheap on a small modal panel, nice over the visualizer (§5). */
     backdrop-filter: blur(8px);
@@ -415,12 +509,12 @@ h2, h3, h4, h5, h6,
     flex-direction: column;
     gap: 0.75rem;
     min-height: 0;
-    max-width: 420px;
+    max-width: 480px;
     /* Pin the MudBlazor palette vars the portaled RadialKnob + slider consume. */
     --mud-palette-primary: var(--deepdrft-green-accent);       /* knob arc/pointer + slider track/thumb (interactive) */
     --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 */
-    --mud-palette-text-primary: var(--deepdrft-white);         /* knob value label — light */
+    --mud-palette-text-primary: var(--deepdrft-panel-text);    /* knob value label — flips dark on light glass */
 }
 
 /* ── Row layout (§3). Each row is a horizontal band. Row 1 (MODE) and row 3 (WAVE) use
@@ -461,13 +555,13 @@ h2, h3, h4, h5, h6,
 }
 
 /* ── 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). ── */
+   tracked), coloured via --deepdrft-panel-text — theme-aware (navy in light, off-white in dark). ── */
 .waveform-visualizer-control-panel .wvc-section-label {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.6rem;
     letter-spacing: 0.25em;
     text-transform: uppercase;
-    color: var(--deepdrft-white);
+    color: var(--deepdrft-panel-text);
     align-self: center;
     flex: 0 0 auto;
     opacity: 0.85;
@@ -495,10 +589,11 @@ h2, h3, h4, h5, h6,
     opacity: 0.38;
 }
 
-/* Caption icons render LIGHT (§5/§9: static/decorative = light). !important beats the scoped
-   .mix-visualizer-control ::deep .mix-visualizer-control-icon rule (which sets green for the legacy
-   inline mount) when the icon also carries mix-visualizer-control-icon. Lamp toggles are MudIconButton
-   not MudIcon so they are unaffected — they stay green (interactive, Color.Primary). (defect #3) */
+/* Caption icons inherit the portaled panel's body text — theme-aware (dark text on light glass,
+   off-white on dark glass). !important beats the scoped .mix-visualizer-control ::deep
+   .mix-visualizer-control-icon rule (which sets green for the legacy inline mount) when the icon also
+   carries mix-visualizer-control-icon. Lamp toggles are MudIconButton not MudIcon so they are
+   unaffected — they stay green (interactive, Color.Primary). (defect #3) */
 .waveform-visualizer-control-panel .waveform-visualizer-control-icon {
     opacity: 0.85;
     translate: 0 -1rem;
@@ -597,6 +692,28 @@ body:has(.waveform-visualizer-control-overlay) {
     }
 }
 
+/* Dark-mode button overrides (Phase 18, Wave 3).
+   In dark, --deepdrft-navy fill/text blends into the #0D1B2A page ground.
+   Primary: green-accent fill + navy text reads as a clear CTA (matches play-chip language).
+   Ghost: white text + light border stands off the dark ground. */
+.deepdrft-theme-dark .btn-primary {
+    background: var(--deepdrft-green-accent);
+    color: var(--deepdrft-navy);
+}
+
+.deepdrft-theme-dark .btn-primary:hover {
+    background: var(--deepdrft-green-interactive);
+}
+
+.deepdrft-theme-dark .btn-ghost {
+    color: var(--deepdrft-page-text);
+    border-color: var(--deepdrft-border-light);
+}
+
+.deepdrft-theme-dark .btn-ghost:hover {
+    border-color: var(--deepdrft-page-text);
+}
+
 /* =============================================================================
    CUT ALBUM DETAIL  (/cuts/{id})
    Header splits left-meta / right-cover; the cover carries an explicit theme
@@ -703,6 +820,69 @@ body:has(.waveform-visualizer-control-overlay) {
     }
 }
 
+/* =============================================================================
+   INTERACTIVE-ACCENT ICON TREATMENT  (.dd-accent-icon / .dd-accent-fill)
+   ----------------------------------------------------------------------------
+   The single, reusable green-accent treatment for interactive icon affordances —
+   replaces the per-site dark-mode overrides that previously had to fight the palette.
+
+   WHY a class and not a palette colour: no MudBlazor Color enum is green in BOTH
+   themes (Dark.Secondary is off-white, Dark.Primary is green; Light.Secondary is
+   green, Light.Primary is navy), so every "green in both" affordance had to be
+   patched per-site. --deepdrft-green-accent (#3D7A68) is the brand constant — the
+   SAME value in both palettes — so a non-theme-scoped rule is correct: light already
+   renders these glyphs green-accent (via Color.Secondary → Light.Secondary), so this
+   keeps light pixel-identical while fixing dark.
+
+   WHY it reaches the glyph: MudBlazor colours a Color.Secondary icon by stamping
+   .mud-secondary-text on the inner .mud-icon-root <svg>, and that rule is `!important`
+   (color: var(--mud-palette-secondary) !important). Targeting only the .mud-icon-button
+   wrapper therefore never wins — the svg keeps its own !important colour. The documented
+   override bug. The glyph clause .dd-accent-icon .mud-icon-button .mud-icon-root is
+   specificity (0,3,0) + !important, which beats MudBlazor's standalone .mud-secondary-text
+   (0,1,0) + !important on specificity alone — source order is not load-bearing for the
+   glyph clause. The .mud-icon-button selector carries the
+   Color.Inherit affordances (lava-lamp glyph inherits the wrapper colour, no
+   .mud-secondary-text to fight); the spinner covers the PlayStateIcon loading state.
+
+   Apply .dd-accent-icon to a CONTAINER of the affordance(s); add .dd-accent-fill
+   alongside it when the container ALSO holds a filled MudButton whose Color.Secondary
+   fill must go green-accent in dark (a filled button is a background fill, not a glyph —
+   light already renders green-accent fill + white text, so .dd-accent-fill is DARK-ONLY
+   to keep light pixel-identical). The Session/Mix hero Share/Play glyphs use this class
+   too (they were already green-accent in light via Color.Secondary, so folding them in
+   keeps light pixel-identical and fixes dark — the over-image glyphs are not actually
+   theme-divergent). The one genuinely theme-divergent affordance (gas-lamp = inherited
+   nav text in light) does NOT use this class — it keeps a dark-only rule below.
+
+   The glyph rule targets glyphs inside an ICON button (.mud-icon-button .mud-icon-root)
+   only — the filled Play button is a .mud-button-filled (not .mud-icon-button), so its
+   StartIcon is naturally excluded and keeps its own contrast colour (white in light,
+   navy in dark). The bare .mud-icon-button selector carries the Color.Inherit case
+   (lava-lamp glyph inherits the wrapper colour); the spinner covers the loading state. */
+.dd-accent-icon .mud-icon-button .mud-icon-root,
+.dd-accent-icon .mud-icon-button,
+.dd-accent-icon .mud-progress-circular {
+    color: var(--deepdrft-green-accent) !important;
+}
+
+/* Filled-button variant (DARK-ONLY): green-accent fill + navy glyph/label, matching the
+   play-chip language. In dark, Color.Secondary fill resolves to off-white (unreadable);
+   here it becomes a clear green CTA. Light is untouched (already green fill + white text). */
+.deepdrft-theme-dark .dd-accent-fill .mud-button-filled {
+    background-color: var(--deepdrft-green-accent);
+    color: var(--deepdrft-navy);
+}
+
+.deepdrft-theme-dark .dd-accent-fill .mud-button-filled .mud-icon-root {
+    color: var(--deepdrft-navy) !important;
+}
+
+/* Gas-lamp dark-mode toggle: the frame now carries an explicit #2A5C4F fill in its SVG
+   (DDIcons.GasLampLit), so no CSS colour override is needed here in dark. The nav rule
+   that previously set green-accent on the MudIconButton has been removed — it was the
+   only .mud-icon-button in .dd-nav-actions and is now dead. */
+
 /* =============================================================================
    RELEASE DESCRIPTION BLURB
    Shared block rendered just below the hero/header on every release detail page
@@ -791,8 +971,8 @@ body:has(.deepdrft-queue-overlay) {
     width: min(90vw, 520px);
     height: min(90vw, 520px);
     max-height: 90vh;
-    background: var(--deepdrft-panel-ground);
-    border: 1px solid var(--deepdrft-border-light);
+    background: var(--deepdrft-panel-surface);
+    border: 1px solid var(--deepdrft-panel-border);
     border-radius: 0;
     backdrop-filter: blur(8px);
     overflow: hidden;
@@ -803,16 +983,16 @@ body:has(.deepdrft-queue-overlay) {
     align-items: center;
     justify-content: space-between;
     padding: 0.85rem 1rem;
-    border-bottom: 1px solid var(--deepdrft-border-light);
+    border-bottom: 1px solid var(--deepdrft-panel-border);
 }
 
-/* Mono uppercase eyebrow — the NowPlayingCard .np-label typography, recoloured light (static). */
+/* Mono uppercase eyebrow — the NowPlayingCard .np-label typography, theme-aware (static). */
 .deepdrft-queue-modal-title {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.72rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
-    color: var(--deepdrft-white);
+    color: var(--deepdrft-panel-text);
     opacity: 0.85;
 }
 
@@ -840,12 +1020,12 @@ body:has(.deepdrft-queue-overlay) {
     gap: 0.6rem;
     padding: 0.45rem 0.5rem;
     border-radius: 4px;
-    color: var(--deepdrft-white);
+    color: var(--deepdrft-panel-text);
     transition: background 0.15s ease;
 }
 
 .deepdrft-queue-row:hover {
-    background: color-mix(in srgb, var(--deepdrft-white) 6%, transparent);
+    background: var(--deepdrft-panel-row-hover);
 }
 
 /* Current track: a subtle green wash + left accent, matching the green = active principle. */
@@ -863,7 +1043,7 @@ body:has(.deepdrft-queue-overlay) {
 .deepdrft-queue-position {
     font-family: var(--deepdrft-font-mono);
     font-size: 0.72rem;
-    opacity: 0.6;
+    color: var(--deepdrft-panel-text-muted);
     min-width: 1.4rem;
     text-align: right;
     flex: 0 0 auto;
@@ -888,7 +1068,7 @@ body:has(.deepdrft-queue-overlay) {
 
 .deepdrft-queue-artist {
     font-size: 0.74rem;
-    opacity: 0.6;
+    color: var(--deepdrft-panel-text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -905,3 +1085,95 @@ body:has(.deepdrft-queue-overlay) {
     background: color-mix(in srgb, var(--deepdrft-green-accent) 22%, transparent);
     border-radius: 6px;
 }
+
+/* ── Fixed (embed) inline queue panel (Phase 17 §4, OQ6). ──
+   Rendered below the player controls inside the embed surface. A fixed sensible height with internal
+   scroll past N rows (NOT grow-to-cap): ~4.5 rows are visible, the rest scroll. A top hairline
+   separates it from the controls. The list rows reuse the shared .deepdrft-queue-* styles above. */
+.deepdrft-queue-embed-panel {
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--deepdrft-border-light);
+    max-height: 184px;
+    overflow-y: auto;
+}
+
+/* =============================================================================
+   PRIVACY OVERLAY
+   Screen-centered modal following the same MudOverlay idiom as the visualizer
+   controls and queue overlays. MudOverlay portals to body — CSS isolation cannot
+   reach portaled content, so chrome lives here in the global sheet.
+   ============================================================================= */
+
+/* Raise above the sticky header (100), player dock (1200), and minimized FAB (1300). */
+.deepdrft-privacy-overlay {
+    z-index: 1400 !important;
+}
+
+/* Mild tint: doubled selector (0,2,0) outranks MudBlazor's .mud-overlay-dark (0,1,0). */
+.deepdrft-privacy-overlay .mud-overlay-scrim.mud-overlay-dark {
+    background-color: rgba(var(--deepdrft-scrim-rgb), var(--deepdrft-modal-scrim-alpha));
+}
+
+.deepdrft-privacy-overlay .mud-overlay-content {
+    max-height: 90vh;
+    overflow: visible;
+}
+
+/* Lock body scroll while the overlay is open. */
+body:has(.deepdrft-privacy-overlay) {
+    overflow: hidden;
+}
+
+/* Panel: compact width, navy-panel ground, thin light border — matches queue/visualizer chrome. */
+.deepdrft-privacy-modal {
+    display: flex;
+    flex-direction: column;
+    width: min(90vw, 480px);
+    background: var(--deepdrft-panel-surface);
+    border: 1px solid var(--deepdrft-panel-border);
+    border-radius: 0;
+    backdrop-filter: blur(8px);
+    overflow: hidden;
+}
+
+.deepdrft-privacy-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.85rem 0.85rem 0.85rem 1rem;
+    border-bottom: 1px solid var(--deepdrft-panel-border);
+}
+
+/* Mono uppercase eyebrow — matches queue modal title. */
+.deepdrft-privacy-modal-title {
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--deepdrft-panel-text);
+    opacity: 0.85;
+}
+
+/* Tuck the close icon flush with the panel edge; keep it subtle. */
+.deepdrft-privacy-modal-close {
+    opacity: 0.6;
+    color: var(--deepdrft-panel-text) !important;
+}
+
+.deepdrft-privacy-modal-close:hover {
+    opacity: 1;
+}
+
+/* Privacy copy: same mono treatment as the former inline paragraph; theme-aware text colour
+   so it stays legible on both the dark-glass (dark) and light-glass (light) panel surfaces. */
+.deepdrft-privacy-modal-body {
+    font-family: var(--deepdrft-font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.06em;
+    line-height: 1.7;
+    color: var(--deepdrft-panel-text);
+    opacity: 0.8;
+    margin: 0;
+    padding: 1rem 1rem 1.25rem;
+}

DeepDrftShared.Client/Common/DDIcons.cs

@@ -12,11 +12,16 @@ public static class DDIcons
                                   """;
 
     /// <summary>
-    /// Charleston gas lamp with lit flame - for dark mode
+    /// Charleston gas lamp with lit flame - for dark mode.
+    /// Frame/body path uses an explicit darker-green fill (#2A5C4F — palette PrimaryDarken /
+    /// --deepdrft-green-light) instead of currentColor so it is deterministic in the nav
+    /// regardless of inherited colour. The flame ellipses keep their literal orange/yellow/cream
+    /// fills. Only rendered in dark mode (DarkLightModeButtonIcon in DeepDrftMenu.razor).
+    /// If the palette's PrimaryDarken changes, update #2A5C4F to match.
     /// </summary>
     public const string GasLampLit = """
                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                       <path fill="currentColor" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/>
+                                       <path fill="#2A5C4F" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/>
                                        <ellipse cx="12" cy="13" rx="2.5" ry="3.5" fill="#FF9800"/>
                                        <ellipse cx="12" cy="12.5" rx="1.5" ry="2.5" fill="#FFCA28"/>
                                        <ellipse cx="12" cy="12" rx=".7" ry="1.5" fill="#FFF8E1"/>

DeepDrftShared.Client/Common/DeepDrftPalettes.cs

@@ -114,7 +114,7 @@ public static class DeepDrftPalettes
         Tertiary = "#1A3C34",                             // Deep green - tertiary accent
         Background = "#0D1B2A",                           // Navy - the light palette's primary as the dark ground
         Surface = "#162437",                              // Navy-mid - elevated cards/panels
-        AppbarBackground = "rgba(13,27,42,0.92)",         // Semi-opaque navy
+        AppbarBackground = "rgba(17,35,56,0.92)",          // Semi-opaque #112338 navy — distinct appbar bar, lighter than the #0D1B2A page ground
         AppbarText = "#FAFAF8",
         DrawerBackground = "#162437",                     // Navy-mid
         DrawerText = "#FAFAF8",