Cinder pass across /admin, the login gate, and the library's a11y floor (#177)

One commit (`af07314`), three strands of browser-UI work against one design system. `docs/design-system.md` was updated to match the CSS, not the reverse.

## Library (Reader-facing)

Findings came out of a two-axis design review of the library surface; the fixes are the P1/P2 set plus the cheap P3s.

- **`.chrome` sticks at `top: 0`.** Search and the tab row were unreachable three screens into a 300-item library — exactly where they earn their keep. Everything above them (`.topbar`, `.keyrow`, `.recent`) still scrolls away on purpose: another 150px of permanent chrome on an 844px phone costs more than re-scrolling for an icon reminder.
- **One `:focus-visible` ring** (`2px solid var(--paper)`, offset 2px) on the nine controls that defined none and fell back to the UA blue — a colour tuned for neither branch of this palette. `.searchbar` keeps its `:focus-within` border recolour as a resting cue but no longer stands in for the ring.
- **Mono labels lift 10px → 11px** everywhere (nine rules). PRODUCT.md names night reading and glare as the usage scene; 10px small-caps was the one place taste overrode the brief. 11px is now a documented floor.
- **A card in flight past 2s says `Saving…` and carries `aria-busy`.** htmx sets neither, so the wait — up to its own 15s timeout, and this app is used on a phone in dead zones — was silent in both the visual and the assistive channel. Deliberately `--mute`, not `--ember`: ember means "new chapter" and nothing else.
- **Titles clamp at 3 lines**; `.is-new .title` takes `width: fit-content`, or `-webkit-box` stretches the ember underline past the text it is supposed to be sized to.
- `.libswitch a` reaches a real 44px under `(pointer: coarse)` — padding plus an 11px line landed at 43.

## /admin

- Overview routes into Lanes when a lane is unhealthy, prefixes each figure with its column word on the phone layout that drops the `thead`, labels state cells for a screen reader, and has an empty state where the sites table previously assumed rows.
- The admin shell picks up the library's chrome: htmx 15s timeout, the shared `#notice` slot, `#sr-announce`, `filter.js`.
- `admin_render_test.go` and `card_render_test.go` render the templates directly, so markup regressions in either surface fail without a browser.

## Login

`DISCORD_GUILD_NAME` (optional) names the community on the login screen and in the refusal message, so a stranger knows which Discord to ask for an invite. Unset degrades to a generic label. Neither form names the numeric guild id — that was never actionable, and the gate still reveals nothing about whether a given guild exists.

## Handlers

`maxChapterNum` (9999) now bounds **both** typed-chapter paths. `uiChapter` and `adminSeriesCorrectLatest` each parsed a `float64` with no ceiling, so a hand-rolled POST stored `1e308` and every later reader of that row — the poller's `HasNewChapter` comparison, the display string — inherited it. Matches the `max` on the card's chapter input. The API PUT path is deliberately untouched: it carries the userscripts' own scraped numbers, not typed input.

## Verification

- `cd backend && go test ./...` green (Docker-backed `pgtest`). `TestChapterOverrideRejectsBadInput` gained `"10000"` and `"1e5"` — both parse fine as `float64`, so they only fail if the bound exists.
- Visual: 390×844 dark + light, 1000px and 1440px (`zoom: 1.2`) desktop, against the real templates + real CSS. Measured `chromeTop = 0` at `scrollY 950`, `2px solid rgb(242,236,229)` rings, `content: "Saving…"` at `opacity: 1` after 2.4s, `aria-busy` `true` during / cleared after, `libswitchH = 44` in a `hasTouch` context, no horizontal overflow at either width.
- `detect.mjs` on `templates/`: `[]`, exit 0.

## Note on shape

The three strands landed as one commit because `admin_series.go` and `style.css` each carry hunks from more than one of them; splitting cleanly would have needed hunk-level surgery. Say the word if you want it split before merge.

Reviewed-on: #177
Co-authored-by: Sulthan Zaki <sultankiki05@gmail.com>
Co-committed-by: Sulthan Zaki <sultankiki05@gmail.com>

docs/design-system.md

@@ -128,8 +128,11 @@ Recurring specs (copy these rather than inventing sizes):
 - Tab: `400 17px display` (`18px` ≥720px), active gets `border-bottom: 2px` in
   `--paper` (`--ember` for Updated) plus `margin-bottom: -1px` so it lands on
   the row's own hairline.
-- Meta / label / badge / action key: `500 10–11px mono`, `letter-spacing:
+- Meta / label / badge / action key: `500 11px mono`, `letter-spacing:
   .04em`–`.2em`, `text-transform: uppercase`. Eyebrows use the widest tracking.
+  **11px is the floor** — nothing in this UI sets mono below it. The brief names
+  night reading and glare as the usage scene, and a 10px small-caps label at
+  arm's length on a phone is where that scene stops being served.
 - Empty-state heading: `400 20px display`; body `400 14px/1.6 sans`, `max-width: 44ch`.
 - Primary button: `--paper` fill, `--ink` text, `400 17–19px display`, no border radius.
 - Ghost button: mono small-caps, transparent, `border-bottom: 1px --field-line`.
@@ -140,11 +143,20 @@ Recurring specs (copy these rather than inventing sizes):
 .sheet
   .topbar        .brand (mark + wordmark) + .ghost (log out)
   .chrome        .searchbar + nav.tabs   (column on phone, row ≥720px via order:)
+                 sticky at top: 0, z-index 2, on an --ink ground
   .keyrow        one-line action key: Read / Fav / Chapter / Archive / Done / Delete
   .recent        h2 eyebrow + .recent-strip > a.recent-card
   main#list      article.card …  |  .empty
 ```
 
+**Sticky chrome.** Search and the tab row are the two controls a 300-item
+library needs mid-scroll, so `.chrome` alone sticks (`padding-top:
+env(safe-area-inset-top)` for the notch cutout). Everything above it —
+`.topbar`, `.keyrow`, `.recent` — scrolls away on purpose: another 150px of
+permanent chrome on an 844px phone costs more than re-scrolling for an icon
+reminder. If header height ever grows, unstick `.recent`/`.keyrow` further
+rather than adding to the sticky region, and keep `.chrome` above the cards.
+
 The owner's admin page (`admin.html`) is the same sheet with two sections in
 place of the list — `.lanes` (Poll Lane rows) and `.readers` (the roster) —
 and no library switch: it belongs to neither library, so its topbar carries a
@@ -225,9 +237,16 @@ Rules that are easy to break:
 - `[hidden] { display: none !important; }` is load-bearing — every disclosure
   panel is a flex container, and `display` beats `hidden`.
 - Busy state is `.card.htmx-request::before`, a 1px grey bar sliding across the
-  top hairline (`barSlide`), plus the action strip at `opacity: .5`. Never a
-  spinner, and deliberately `--mute` not `--ember` — on a list screen ember
-  means "new chapter" and nothing else, so a system state can't borrow it.
+  top hairline (`barSlide`), the action strip at `opacity: .5`, and past 2s the
+  word `Saving…` in `::after` (`busyWord`, §6). `filter.js` sets `aria-busy` on
+  the card over the same window because htmx sets none, so the wait is not
+  silent to a screen reader. Never a spinner, and deliberately `--mute` not
+  `--ember` — on a list screen ember means "new chapter" and nothing else, so a
+  system state can't borrow it.
+- Titles clamp at 3 lines (`.recent-title` at 2 — there the title is a
+  reminder, in the list it is the identifier). `.is-new .title` needs
+  `width: fit-content`, or `-webkit-box` stretches the ember underline to the
+  full row and the rule stops being sized to the text.
 - `.open` on the pencil / lifecycle cell marks which panel is showing;
   `filter.js` `togglePanel()`/`toggleConfirmRow()` own that class alongside
   `hidden`. An open lifecycle cell needs the next surface step up from
@@ -251,7 +270,7 @@ is a 1px bar, not a rotating ring); toasts are `--ash` with a 2px left rule,
 
 ## 6. Motion
 
-Three animations, all ≤ 1.15s and all disabled under
+Four animations, all ≤ 1.15s and all disabled under
 `prefers-reduced-motion: reduce` (pseudo-elements need naming explicitly in
 that query — `*` does not match `::before`/`::after`, so the busy bar and
 error dot are listed by name and fall back to their static drawn form):
@@ -259,16 +278,29 @@ error dot are listed by name and fall back to their static drawn form):
 - `sheetIn` — 180ms fade + 4px rise, on a row and on each disclosure panel.
 - `barSlide` — the sliding hairline, for any busy state.
 - `mutePulse` — the 5px dot on `.error-inline`.
+- `busyWord` — `0s 2s forwards`, a delay rather than a motion: it reveals the
+  `Saving…` word only once a request has outlived a plausible response. The
+  reduced-motion block cancels the animation and so would pin it at
+  `opacity: 0`; that branch re-declares `opacity: 1` to show it from the start.
+  Any future state revealed this way needs the same two-line pair.
 
 No transforms on hover, no scale, no easing curves beyond `ease-out`/`linear`.
 
 ## 7. Accessibility floor (not negotiable)
 
-- Touch targets on the phone layout are 44–46px; the 44px desktop cells are
-  pointer-only (≥720px).
 - Every icon-only control keeps `title` + `aria-label`; the SVG inside is
   `aria-hidden`. Lifecycle buttons also carry `aria-expanded` +
   `aria-controls` pointing at their `.confirm-row`.
+- **Every focusable control carries a visible ring**: `outline: 2px solid
+  var(--paper)` with `2px` offset on `:focus-visible`, since the UA default is
+  a bright blue tuned for neither branch of this palette. `.searchbar` recolours
+  its border on `:focus-within` as a resting cue, but that 1px change is not the
+  ring — the `.search` input declares its own. A new control that suppresses
+  `outline` must replace it, not drop it.
+- Touch targets are 44–46px under `(pointer: coarse)` — including inline text
+  controls like `.libswitch a`, where padding plus an 11px line lands short of
+  44 and needs `min-height` + `place-items: center`. The 44px desktop cells are
+  pointer-only (≥720px).
 - The cover link is `tabindex="-1" aria-hidden="true"` because the title link
   and the play cell already reach the same URL — do not make it a third tab stop.
 - Tabs keep `role="tab"` / `role="tablist"`; the active one is marked by class,
@@ -292,7 +324,9 @@ No transforms on hover, no scale, no easing curves beyond `ease-out`/`linear`.
 5. Icon → `templates/icons.html`; nothing inlines SVG paths. Brand mark stays
    the one exception (`chrome.html`'s `mark` template), since it takes
    page-level custom properties the sprite can't carry per-instance.
-6. Phone first (44px targets, single column), then the ≥720px block.
+6. Phone first (44px targets under `(pointer: coarse)`, single column), then the
+   ≥720px block. Mono no smaller than 11px, and a `:focus-visible` ring on
+   anything focusable — both are §7 floors, not preferences.
 7. Verify: `cd backend && go test ./...`, then run the binary and screenshot
    both widths and both colour schemes (Playwright: `emulateMedia`,
    `setViewportSize`; disable the browser cache — `/static/*` is served with