P0-4 fix: mobile header collapses to ONE line — logo + clock + sync dot

Phone audit: at 390px we still rendered the full desktop 3-row header (nav +
TOP MOVES ticker + SYNC line) eating ~20% of the viewport, and its height
clipped page titles under it (MY READS tabs, HEAD TO HEAD). Implemented Design's
mobile app bar <768px:
- New MobileSyncClock (extracted from HeartbeatBar) lives in the Nav's right
  cluster — wall clock rests, amber/STALE reacts off the shared freshness tier.
- <768px: the ticker row (.nav-ticker) AND the whole heartbeat bar are hidden;
  only the nav row shows (logo + clock + search). main padding-top → 62px and
  the Slate sticky tabs → top:60px, so nothing clips under the bar.
- Locked in vyndrParityQA (P0-4): ticker+heartbeat hidden, nav clock shown,
  paddings collapsed.

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

web/src/app/globals.css

@@ -1371,6 +1371,20 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
   .gl-full.gl-expanded { margin-top: 10px; }
 }
 
+
+/* P0-4 — MOBILE APP BAR: collapse the 3-row header (nav + ticker + heartbeat)
+   to ONE line <768px. The ticker row + the whole heartbeat bar are hidden; the
+   nav's right cluster shows the app-bar clock (nav-mobile-clock). main's top
+   padding drops to the nav height alone so page titles stop clipping under it. */
+.nav-mobile-clock { display: none; }
+@media (max-width: 767px) {
+  .nav-ticker { display: none !important; }
+  .heartbeat-bar { display: none !important; }
+  .nav-mobile-clock { display: inline-flex !important; }
+  main { padding-top: 62px !important; }
+  .slate-sticky-head { top: 60px !important; } /* sticky tabs clear the 60px app bar, not 122 */
+}
+
 /* ============================================================
    DESIGN COMPLETION TRAIN — M1 MOBILE FOUNDATION (2026-07-16)
    Now RECONCILED against Design's drawn mobile (specs/design-reference/