fix(a11y,layout): deep-review fixes — menu roles, sort aria-pressed, rem rail threshold

Epic-end deep-review of the branch surfaced six verified findings; fix them.

a11y (medium): FilterSelect and SortControl opened their AnchoredPopover in
mode:"listbox" but never passed a role, so the surface fell through to
role="menu" while the rows rendered role="option"+aria-selected — options
orphaned outside a listbox, so AT could not announce the selected value.
Switch both to the house menu pattern (as ViewSwitcher already uses): a menu
surface with menuitemradio (single) / menuitemcheckbox (multi) rows carrying
aria-checked, scoped by a role=group. Trigger stays a button+haspopup=menu.

a11y (low): the SortControl asc/desc direction segment signalled the active
direction by colour alone. Add aria-pressed so the current direction is
programmatically exposed, matching SegmentedToggle.

correctness (low): PageShell converted a rem maxWidth to px with a hardcoded
16 to decide the pinned-rail overlay threshold, but index.css scales the root
font by --font-scale (default 1.06 ~ 17px, slider 0.9-1.3), so the threshold
was wrong at every text size on the rem pages (playlists is the only one with
a pinned rail). Use the live root font-size, scale the 36rem slack the same
way, and recompute when --font-scale changes (a guarded MutationObserver — the
slider fires no resize).

tests: cover the two gaps the review flagged — ItemCount (plural, 1M+ overflow,
undefined icon-only, tooltip) and the PageShell rail-pinned-w/content-mw
threshold math incl. the font-scale scaling. Updated the FilterSelect/
SortControl role queries to the new menuitemradio/checkbox roles.

Verified in the running app: menu surfaces carry role=group + menuitemradio/
checkbox with 0 orphaned options, and the sort direction segment exposes
aria-pressed. Dropped two review findings (max-width duplication, pill-class
reuse) as refuted on adversarial verification. Gate green: tsc, 372 vitest,
prettier, eslint (0 err).

frontend/src/components/PageShell.dom.test.tsx

@@ -74,3 +74,54 @@ describe("PageShell --hdr-h (E5 S7)", () => {
     expect(content().style.getPropertyValue("--hdr-h")).toBe("68px"); // re-measured, not the stale 4px
   });
 });
+
+// The pinned-rail overlay decision: a rail pins as OVERLAY (--rail-pinned-w 2.25rem, the toolbar keeps a
+// slim gutter and content stays put) once the window is wide enough that the centred content leaves room
+// for the rail in its left margin (maxWidth + ~36rem); below that it pins in-flow (16.75rem). The rem→px
+// conversion must use the LIVE root font-size, not a hardcoded 16, so it stays correct at every text size.
+describe("PageShell --rail-pinned-w / --content-mw", () => {
+  const root = document.documentElement;
+  const setWidth = (w: number) =>
+    Object.defineProperty(window, "innerWidth", { value: w, configurable: true });
+  afterEach(() => {
+    root.style.removeProperty("font-size");
+    root.style.removeProperty("--content-mw");
+    root.style.removeProperty("--rail-pinned-w");
+  });
+
+  it("overlays the rail once the window clears maxWidth + 36rem (at 16px/rem)", () => {
+    setWidth(1600); // 64rem*16 + 36rem*16 = 1024 + 576 = 1600 → exactly roomy
+    render(<PageShell maxWidth="64rem">content</PageShell>);
+    expect(root.style.getPropertyValue("--content-mw")).toBe("64rem");
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("2.25rem");
+  });
+
+  it("keeps the rail in-flow just below the threshold", () => {
+    setWidth(1599);
+    render(<PageShell maxWidth="64rem">content</PageShell>);
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("16.75rem");
+  });
+
+  it("never overlays on a full-width page (no maxWidth)", () => {
+    setWidth(3000);
+    render(<PageShell>content</PageShell>);
+    expect(root.style.getPropertyValue("--content-mw")).toBe("none");
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("16.75rem");
+  });
+
+  it("recomputes on resize", () => {
+    setWidth(1599);
+    render(<PageShell maxWidth="64rem">content</PageShell>);
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("16.75rem");
+    setWidth(1600);
+    window.dispatchEvent(new Event("resize"));
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("2.25rem");
+  });
+
+  it("scales the rem threshold by the live root font-size, not a hardcoded 16", () => {
+    root.style.fontSize = "17px"; // as the --font-scale 1.06 default renders it
+    setWidth(1650); // roomy at 16px/rem (>1600) but NOT at 17px/rem (needs 100rem*17 = 1700)
+    render(<PageShell maxWidth="64rem">content</PageShell>);
+    expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("16.75rem");
+  });
+});