feat(design): the page band (B4) — one h1 per page, section headings, skip to content, filters fold on a short window (E28 S3d4)

- PageShell names the page with a visually hidden h1; a view with its own title renders it as
  PageHeading and the hidden one steps aside (contract: no hand <h1> inside the shell).
- Section captions are SectionLabel headings (h2, h3 in a dialog), ui/form Section included.
- "Skip to content" is the first Tab stop and focuses the scroller's <main>.
- Below 600px of height the band's filter row folds into "Filters · n" (Feed, Plex, server log),
  the same row shown in place.
- The band holds controls only: Downloads and Notifications lose their title cards, the Config and
  channel-discovery intros scroll with the content, the Stats tabs and the audit pager join the band,
  and the server log's toolbar sticks with the fade under it.

frontend/src/components/ui/PageScroller.tsx

@@ -2,6 +2,7 @@ import { useCallback, useLayoutEffect, useRef, useState, type ReactNode } from "
 import { useScrollFade } from "../../lib/useScrollFade";
 import { useFocusKeeper } from "../../lib/useFocusKeeper";
 import { StickyTopProvider } from "./stickyTop";
+import { CONTENT_ID } from "./landmarks";
 import { ensureNavId, peekNavId, subscribeNav } from "../../lib/history";
 
 // Saved scroll offsets, keyed by `${historyEntryId}:${scrollKey}`. The entry id ties an offset to the
@@ -156,10 +157,14 @@ export default function PageScroller({
   }, [resolve]);
 
   return (
+    // `id` + `tabIndex={-1}`: the skip link's target (ui/SkipLink) takes the focus, so the next Tab
+    // lands on the page's first control.
     <main
       ref={setRef}
+      id={CONTENT_ID}
+      tabIndex={-1}
       style={fade.style}
-      className="flex-1 min-w-0 overflow-y-auto scrollbar-gutter-stable"
+      className="flex-1 min-w-0 overflow-y-auto scrollbar-gutter-stable focus:outline-none"
     >
       <StickyTopProvider value={registerStickyTop}>{children}</StickyTopProvider>
     </main>