Design completion train — import authoritative mockup + M1a mobile foundation

SETUP (required first step): overwrote specs/design-reference/ with the CURRENT
authoritative mockup ("Vyndr System.dc.html" from claude.ai/design, the version
with the combat card / pitcher identity / live grade-shift / correlation builder
/ FREE|PRO pricing / TRANSMISSION QUIET). 12 surfaces. Confirmed it has NO media
queries — desktop-only, so the 390px expression is a deliberate design decision,
not a shrink.

M1a — mobile foundation (built to spec, VISUALLY UNVERIFIED at 390px; WSL2↔Chrome
unreachable, the Chrome audit is the eyes):
- Header-zone collapse (the concrete audit finding: ticker + SIGNAL LIVE + STALE
  stacking in ~110px). The decorative EKG is dropped <768px so the heartbeat
  reads as ONE clean status line; signal pulse + ticker are the single animated
  element (DESIGN-SPEC §4). LiveLayer gains .heartbeat-bar / .hb-ekg hooks.
- Primary CTA (.vbtn) meets the 44px touch target on mobile; dense `small`
  buttons opt out (density is a feature).
- .m-hero mono-hero clamp for the one-figure-per-card grammar at 390px.
- M4 test-lock: vyndrParityQA asserts the header collapse, tap target, overflow
  containment, and the honest "UNVERIFIED at 390px" label are all in source.

Per-surface stacking (M1b), billboards (M2), desktop parity (M3) continue.

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

web/src/app/globals.css

@@ -1361,6 +1361,51 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
   .gl-full.gl-expanded { margin-top: 10px; }
 }
 
+/* ============================================================
+   DESIGN COMPLETION TRAIN — M1 MOBILE FOUNDATION (2026-07-16)
+   The mockup (specs/design-reference/vyndr-system.html) is DESKTOP-ONLY.
+   These rules are the deliberate 390px expression of its grammar — not a
+   shrink: ONE animated element in the header (DESIGN-SPEC §4), one bold
+   mono hero per card with muted context (§3/§5), ≥44px primary tap targets,
+   zero horizontal overflow. BUILT TO SPEC, VISUALLY UNVERIFIED at 390px
+   (WSL2↔Chrome unreachable here — a true-390px Chrome audit is the eyes).
+   ============================================================ */
+
+/* Header-zone collapse (audit: ticker + SIGNAL LIVE + STALE all stacking in
+   ~110px on narrow). The EKG is decorative proof-of-life — dropped on phones
+   so the heartbeat reads as ONE clean status line, and the ticker + live-dot
+   become the single animated element in the header. */
+@media (max-width: 767px) {
+  .hb-ekg { display: none !important; }
+  .heartbeat-bar {
+    height: 28px !important;
+    gap: 10px !important;
+    padding: 0 12px !important;
+  }
+  /* The status line is one line by contract — never let it wrap into the
+     "stacked" state the audit flagged. */
+  .heartbeat-bar > span { white-space: nowrap; }
+}
+
+/* Tap targets — the PRIMARY button component meets the 44px touch minimum.
+   Scoped to .vbtn only (not dense in-row data chips — density is a feature;
+   per-surface tap-target review rides with each M1b surface). */
+@media (max-width: 767px) {
+  .vbtn {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* Mono hero grammar (§3 "one bold hero figure among muted context"). Card
+   hero numbers opt in via .m-hero; they scale up on phones so the ONE figure
+   that matters dominates the stacked card. Context stays demoted. */
+@media (max-width: 640px) {
+  .m-hero { font-size: clamp(28px, 12vw, 56px) !important; line-height: 1; }
+}
+
 /* ============================================================
    Session 60 (night2/E) — §7 reveal choreography.
    Stamp slam + 90ms staggered context panels. Entrance keyframes floor at

web/src/components/vyndr/LiveLayer.tsx

@@ -118,7 +118,7 @@ export function HeartbeatBar() {
   const syncColor = tier === 'stale' ? 'var(--miss)' : tier === 'amber' ? 'var(--amber)' : 'var(--text-2)';
   return (
     <div
-      className="scanlines"
+      className="scanlines heartbeat-bar"
       style={{
         display: 'flex',
         alignItems: 'center',
@@ -136,8 +136,10 @@ export function HeartbeatBar() {
         <span className="mono" style={{ color: 'var(--g-a)', fontWeight: 700, letterSpacing: '0.12em' }}>SIGNAL LIVE</span>
       </span>
 
-      {/* EKG strip */}
-      <div style={{ flex: 1, overflow: 'hidden', height: 22, maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
+      {/* EKG strip — decorative proof-of-life. Hidden <768px (mobile header
+          collapses to ONE status line; the signal pulse + ticker are the single
+          animated element there — DESIGN-SPEC §4 "one animated element"). */}
+      <div className="hb-ekg" style={{ flex: 1, overflow: 'hidden', height: 22, maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
         <div className="ekg-track" style={{ height: 22 }}>
           {[0, 1].map((k) => (
             <svg key={k} width="200" height="22" viewBox="0 0 200 22" style={{ display: 'block' }} aria-hidden>

web/src/components/vyndr/VBtn.tsx

@@ -54,6 +54,9 @@ export default function VBtn({
       type={type}
       disabled={disabled}
       onClick={onClick}
+      /* full-size CTAs meet the 44px mobile touch target (globals.css M1);
+         dense `small` buttons keep their compact size (density is a feature). */
+      className={small ? undefined : 'vbtn'}
       style={{ ...base, ...VARIANTS[variant], ...style }}
       onMouseEnter={(e) => {
         if (variant === 'outline') e.currentTarget.style.borderColor = 'var(--g-a)';