docs(design): how B4, B9 and the viewport rule are built, and the log rows (E28 S3d4)

docs/DESIGN.md

@@ -204,10 +204,27 @@ Also in force:
 - **Page chrome (B4):** a page's tabs and filters sit in ONE sticky band of the page colour, with the fade
   under it (below). Below ~600px of height the filter row folds into one "Filters · n" button. Every page has
   a visually hidden `h1`; the nav rail and the browser tab title are the visible identity. [WCAG 2.4.6]
+  Built as: the band is `PageShell`'s toolbar slot (`PageToolbar`), above the one scroller; a console
+  whose toolbar lives inside its frame (the server log) makes that toolbar `sticky` with `fade-below`
+  instead. The band holds controls only: an intro paragraph scrolls with the content (in the band it
+  ate three lines of a short window). The fold is `useFilterFold` + `FilterFoldButton`: the same row
+  shown or hidden in place, never copied into a popover. The hidden `h1` is `PageShell`'s `title`; a
+  view with its own visible title (a channel, a Plex show, a playlist) renders it as `PageHeading`
+  and the hidden one steps aside, so a page has exactly one `h1` (a hand `<h1>` inside the shell is
+  refused by a contract test). A section's caption is `SectionLabel`, an `h2` (an `h3` in a dialog),
+  never a styled `div`. The first Tab stop is "Skip to content" (`SkipLink`), which focuses the
+  scroller's `<main>`. [WCAG 2.4.1, 1.3.1]
 - **The header + fade edge (B9):** a crisp band and a 1rem gradient of the colour it sits on, so content
   dissolves as it slides under. It goes on sticky toolbars and table headers, tabs over a scrolling panel, a
   long dialog's header and footer, and the clipped ends of an overflowing chip row. Not on thumbnails (they
-  are the content) and not on buttons (it becomes a dated gloss).
+  are the content) and not on buttons (it becomes a dated gloss). Built as: a sticky element takes the
+  `fade-below` utility (`fade-below-panel` / `fade-above-panel` on a panel); the page band and a
+  scrolling panel under its header fade by the scroller's own edge mask (`useScrollFade`), because what
+  they sit on is the backdrop, not a colour. The chip rows fold their overflow into "+N" rather than
+  scroll, so no row has clipped ends; the carousels fade theirs. The dialog edges come with C4's pinned
+  footer (S3f).
+- **Viewport height:** `dvh`, never `vh` / `h-screen`: `100vh` is the viewport with a mobile browser's
+  toolbar retracted, so an `h-screen` shell runs its last rows under the toolbar (contract-tested).
 - **Nav rail (B7):** the `ui/NavRail` primitive, slim: 3.75rem wide. "You are here" is a soft accent tint plus a
   3px edge bar. Labels under the icons are optional, a per-user switch in Settings (off by default); they add
   height, never width, so each module has a short rail label that fits, and the full name stays in the
@@ -345,7 +362,7 @@ Wherever there is text, the user can select it and copy it, and no click action
 ## Decision log
 
 | Date       | Decision                    | Chosen                                                                                                                                                                                  | Over                                                                                                  | Why                                                                                                                                                                  |
-| ---------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ---------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 2026-09-24 | Floating button             | Back to top: a round 48 glass FAB; "round" = floats over something (media or the page)                                                                                                  | A Material 3 rounded square; a labelled pill; the old 64 circle                                       | The common web convention for back to top; round tells it apart from every toolbar button; 64 was oversized                                                          |
 | 2026-09-24 | Device contract             | Tablet portrait + landscape and up; phones out                                                                                                                                          | A 1024px floor with a "too small" message                                                             | Portrait tablet use is real, and the app already renders at 820 portrait                                                                                             |
 | 2026-09-24 | Card actions on touch       | Fewer visible, the rest in a "…" menu                                                                                                                                                   | 44px buttons that no longer fit the card                                                              | Six 44px targets need more width than a card has                                                                                                                     |
@@ -383,5 +400,8 @@ Wherever there is text, the user can select it and copy it, and no click action
 | 2026-09-25 | Fjord trial (B2 exception)  | A fifth scheme, temporary: Midnight's neutrals, Playnite's steel accent (#337599 lifted to #5aa1cb) and steel rules; exit = fold into Midnight or remove                                | Retune Midnight straight away; borrow only the qualities                                              | The owner wants to live with the calmer palette app-wide before it replaces the default; it breaks "own hue family" on purpose, and only until that call             |
 | 2026-09-25 | Whole-card row (owner)      | A card row's B3 layer is the card's `::before` under its content; the open button's hit layer spans the card, the actions sit above it                                                  | The name button's own hover, ending at the first badge or button                                      | A row that half-answers the pointer reads as broken; a badge click did nothing                                                                                       |
 | 2026-09-25 | Badge tones (F29)           | `Badge tone` neutral / accent / warn at 6%; light `--warn` #b45309 → #a14a07; edged label spans lint-refused                                                                            | Keep edged status pills (a private Badge in Users, Settings "Granted", the suggestions count)         | Edged = pressable at a glance; amber-700 was 4.58:1 as text and fell under 4.5 on its own tint                                                                       |
+| 2026-09-26 | Page band built (B4)        | Controls only in the band (intros scroll); the fold shows the same row in place; one `h1` per page (`PageHeading` steps the hidden one aside); `SectionLabel` headings; Skip to content | A popover of the folded filters; the page title kept visible                                          | A folded row is still the same controls, nothing duplicated; the rail and the tab title already name the page                                                        |
+| 2026-09-26 | Fade built (B9)             | `fade-below` on sticky toolbars and table headers; the scroller mask where the band sits on the backdrop                                                                                | A painted band over the backdrop                                                                      | The backdrop is the colour under the band, so fading the content into it is the same edge                                                                            |
+| 2026-09-26 | Viewport units              | `dvh` everywhere (the Plex player stage with S3f)                                                                                                                                       | `vh` / `h-screen`                                                                                     | `100vh` hides the last rows under a tablet browser's toolbar                                                                                                         |
 | 2026-09-24 | Chip family                 | One `Chip` (filter / token / tag / suggest / ghost) + `DismissibleChip`; nothing under 24; the lint rule "no raw `<button>` outside ui/"                                                | Five chip geometries in five files                                                                    | The applied-filter row, the tag cells, the year picker and the saved-view editor each drew their own chip; a one-letter tag was 21px wide                            |
 | 2026-09-24 | Button families             | `Button` / `IconButton` / `Pressable` / chips / `DragHandle`; `lg` 40 for a hero CTA; pills and a 48 Play on media (from C5)                                                            | Every button hand-painted                                                                             | 268 hand-rolled buttons in 79 files drifted into as many looks; the ladder only holds if every button stands on it                                                   |