feat(frontend): mobile primitives + bottom-nav chrome (0.56.0)

Phase 1 of the mobile redesign: add the reusable primitives every
later phase plugs into, and switch the layout to a 4-tab bottom nav
+ compact AppBar on phone viewports while leaving the desktop header
untouched above 640px.

- New primitives: BottomNav, Sheet, AppBar, SegmentedControl, all
  with vitest unit tests.
- Layout swaps the desktop header for AppBar + BottomNav under the
  existing 640px breakpoint. Login / register / reader routes opt
  out of the mobile chrome.
- Library tab currently points at /bookmarks; the curated /library
  wrapper lands in Phase 5.
- Independent ResizeObservers publish --app-header-h,
  --mobile-app-bar-h, --app-bottom-nav-h, with a zero-height skip so
  hidden bars don't clobber the visible one's value.
- viewport-fit=cover + env(safe-area-inset-*) tokens for notched
  devices and the iOS home indicator.
- Playwright spec covers visibility at 390px / 1280px viewports and
  tab navigation.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/styles/tokens.css

@@ -66,9 +66,27 @@
        in +layout.svelte and the reader, so they reflect rendered
        size and survive font / zoom / wrap changes. */
     --app-header-h: 60px;
+    --mobile-app-bar-h: 48px;
+    --app-bottom-nav-h: 56px;
     --reader-nav-h: 56px;
     --reader-bar-h: 56px;
 
+    /* Mobile breakpoint tokens. CSS @media queries can't read custom
+       properties, so these are documented anchors — keep the pixel
+       values in @media (max-width: 640px) etc. in lockstep. */
+    --bp-sm: 640px;
+    --bp-md: 768px;
+    --bp-lg: 1024px;
+
+    /* Safe-area helpers for notched / home-indicator devices. Resolve
+       to 0 on devices without insets, so they're safe everywhere as
+       long as <meta name="viewport" content="…, viewport-fit=cover">
+       is set (see app.html). */
+    --safe-top: env(safe-area-inset-top, 0px);
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-left: env(safe-area-inset-left, 0px);
+    --safe-right: env(safe-area-inset-right, 0px);
+
     --z-dropdown: 10;
     --z-sticky: 50;
     --z-modal: 100;