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/components/Slate.tsx

@@ -918,10 +918,14 @@ export default function Slate({ initialTab = 'all', tier = 'free', preferredBook
     <div style={{ display: 'grid', gap: 24, paddingBottom: 24 }}>
       {/* Sticky header — search + tabs */}
       <div
+        className="slate-sticky-head"
         style={{
           position: 'sticky',
           // Clears nav (60) + heartbeat (30) + the dynamic ticker (Session 57:
-          // --ticker-h is 32px only when the ticker has ≥4 real items).
+          // --ticker-h is 32px only when the ticker has ≥4 real items). P0-4:
+          // on mobile the header collapses to the 60px app bar (ticker +
+          // heartbeat hidden), so .slate-sticky-head is overridden to top:60px
+          // in globals.css — otherwise it stuck 62px below the bar.
           top: 'calc(90px + var(--ticker-h, 0px))',
           zIndex: 5,
           background: 'var(--bg-0, #0A0A0F)',