Offer the app shell a window-wide banner above the rail

M3's scaffold is bars, then rails, then panes, and the shell had no slot that
rendered above the rail: an application-wide bar could only be a pane bar beside
it. `banner` is that slot — the shell is a column now, with the rail and the page
as one row inside it — and the rail sticks under a pinned banner through
--material-banner rather than behind it. `top` still means the page's own bar.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-14).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/navigation.css

@@ -217,14 +217,17 @@
         }
     }
 
+    /* `--material-banner` is the height of a bar pinned across the top of the window — what
+       <x-app-shell>'s `banner` slot holds, if the application made it sticky. The rail sticks
+       under it rather than behind it; 0 without one. */
     [data-navigation-rail-panel] {
         position: sticky;
-        top: 0;
+        top: var(--material-banner, 0px);
         display: flex;
         flex-direction: column;
         width: 100%;
         height: 100%;
-        max-height: 100dvh;
+        max-height: calc(100dvh - var(--material-banner, 0px));
         /* Clip, not hide: no scroll container, so the destinations below can still scroll and
            nothing sticky breaks. What only an expanded rail draws — a label, the brand — is drawn
            at once when the rail expands, while the width is still growing; the clip keeps it