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/Messages.tsx

@@ -21,6 +21,7 @@ import { navItemAttrs } from "../lib/listNav";
 import { Pressable } from "./ui/Pressable";
 import { Input } from "./ui/Input";
 import { SURFACE } from "./ui/surfaces";
+import { SectionLabel } from "./ui/Headings";
 
 type View =
   | "list"
@@ -129,9 +130,7 @@ function ConversationList({
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <div className="text-xs uppercase tracking-wide text-muted">
-          {t("messages.conversations")}
-        </div>
+        <SectionLabel>{t("messages.conversations")}</SectionLabel>
         {ready && (
           <Button variant="primary" size="xs" onClick={onNew}>
             <SquarePen className="w-4 h-4" />
@@ -234,7 +233,7 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
         >
           <ArrowLeft className="w-4 h-4" />
         </IconButton>
-        <div className="text-xs uppercase tracking-wide text-muted">{t("messages.newTitle")}</div>
+        <SectionLabel>{t("messages.newTitle")}</SectionLabel>
       </div>
       <Input
         className="w-full"
@@ -294,7 +293,7 @@ function PageThread({
   const ready = useKeyState() === "ready";
   const name = seedName ?? "";
   return (
-    <div className="flex flex-col h-[65vh] min-h-80">
+    <div className="flex flex-col h-[65dvh] min-h-80">
       <div className="flex items-center gap-3 pb-3 border-b border-border">
         <IconButton
           label={t("channel.back")}