Session 37: Design system Phase F — mobile parity: 5-tab bar, More sheet, PWA polish (1872 tests)

VYNDR 2.0 conversion, Phase F (mobile is the PWA we launch first). Frontend-only;
zero backend changes.

- BottomTabBar rewritten to the §6 5-tab spec: Slate/Terminal/Scan/Ledger/More,
  with Scan as the prominent raised grade-green action. Shown for anon too (only
  mobile nav). Integrated More bottom sheet (sheet-up, backdrop dismiss, 48px mono
  rows). iOS safe-area + 44px touch targets.
- Nav hamburger retired on mobile (tab bar owns nav).
- globals.css mobile section: tab-bar hidden >=768, main bottom padding,
  grade-hero 80px, terminal-grid stacks, game-lines horizontal scroll.
- PWA: manifest shortcuts (Slate/Scan/Terminal) + categories; viewport-fit=cover.

Gotcha: `as const` on the TABS array broke type-check (distinct literal types);
fixed with a shared TabDef interface.

19 new tests. Backend 1853 -> 1872, 145 suites, zero regressions. Web build clean.

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

web/src/app/globals.css

@@ -1221,3 +1221,46 @@ html[data-font="readable"] {
 }
 html[data-font="readable"] .wm::before,
 html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
+
+/* ============================================================
+   MOBILE PARITY (§6, §F — Session 37)
+   Mobile is the primary (PWA) layout; desktop is the enhancement.
+   ============================================================ */
+
+/* The 5-tab bar is mobile-only — hidden once the desktop nav has room. */
+@media (min-width: 768px) {
+  .mobile-tab-bar { display: none !important; }
+}
+
+/* Clear the fixed bottom tab bar (64px + iOS safe area) so content isn't
+   hidden behind it. Desktop keeps the standard 80px footer breathing room. */
+@media (max-width: 767px) {
+  main {
+    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
+  }
+}
+
+/* Grade hero zone: full-width, slightly smaller letter on phones. */
+@media (max-width: 640px) {
+  .grade-hero { font-size: 80px !important; }
+}
+
+/* Book-line tables scroll horizontally on small screens with a sticky
+   first (team/book) column so the matchup stays anchored while prices scroll. */
+@media (max-width: 640px) {
+  .game-lines-grid {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .game-lines-grid .team-col {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: var(--bg-1);
+  }
+}
+
+/* Terminal's multi-column grid stacks on mobile. */
+@media (max-width: 768px) {
+  .terminal-grid { grid-template-columns: 1fr !important; }
+}