feature: AppBar clearance & Theming

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;
@@ -226,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

@@ -15,7 +15,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>

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 {

DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css

@@ -90,11 +90,26 @@
        (visualizer/queue/privacy) do NOT bind this — they keep --deepdrft-panel-ground directly. */
     --deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
 
+    /* Fixed-nav height — single source of truth shared by the frosted-glass nav
+       (DeepDrftMenu.razor.css pins .dd-nav to this) and the main-content clearance
+       (.dd-main-content padding-top in deepdrft-styles.css). The nav is position:fixed
+       so content scrolls under its backdrop blur; this keeps the clearance in lockstep
+       with the bar so content never overlaps. Mobile (<600px) override below. */
+    --deepdrft-nav-height: 88px;
+
     /* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*.
        Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have
        consumers and are scheduled for retirement in Phase 0.3/0.4. */
 }
 
+/* Mobile fixed-nav height — matches the <600px breakpoint in DeepDrftMenu.razor.css
+   (tighter horizontal padding + smaller bar). Cascades to .dd-nav and .dd-main-content. */
+@media (max-width: 599px) {
+    :root {
+        --deepdrft-nav-height: 72px;
+    }
+}
+
 /* Dark theme - wireframe palette (navy ground / green-accent / off-white).
    Mirrors the light palette's vocabulary on a dark ground. Same alias structure
    as :root so utility classes (.deepdrft-chip-*, .deepdrft-border-*, .deepdrft-text-*)