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>

tests/unit/vyndrParityQA.test.js

@@ -140,3 +140,34 @@ describe('QA.22 — honest waiting copy everywhere (no passive mystery)', () =>
     expect(read(rel)).toContain('nextRunLabelET');
   });
 });
+
+// ── DESIGN COMPLETION TRAIN — M1 mobile foundation (2026-07-16) ──────────
+// Structural mobile rules become failing tests (M4 "test-lock what's
+// lockable"). These assert the RULES exist in source — they do NOT prove
+// visual correctness at 390px (that needs the Chrome audit).
+describe('M1 — mobile foundation is wired (structural, not visual)', () => {
+  const css = read('app/globals.css');
+
+  it('header collapses on phones: the decorative EKG is hidden <768px', () => {
+    // The audit flagged ticker + SIGNAL LIVE + STALE stacking in ~110px.
+    expect(css).toMatch(/\.hb-ekg\s*\{[^}]*display:\s*none/);
+    // and the hook actually exists on the component
+    expect(read('components/vyndr/LiveLayer.tsx')).toMatch(/hb-ekg/);
+    expect(read('components/vyndr/LiveLayer.tsx')).toMatch(/heartbeat-bar/);
+  });
+
+  it('primary CTA meets a 44px touch target on mobile', () => {
+    expect(css).toMatch(/\.vbtn\s*\{[^}]*min-height:\s*44px/);
+    // full-size VBtn carries the class; dense `small` buttons opt out
+    expect(read('components/vyndr/VBtn.tsx')).toMatch(/small\s*\?\s*undefined\s*:\s*'vbtn'/);
+  });
+
+  it('the M1 mobile-foundation block is present and honestly labelled unverified', () => {
+    expect(css).toMatch(/DESIGN COMPLETION TRAIN — M1 MOBILE FOUNDATION/);
+    expect(css).toMatch(/VISUALLY UNVERIFIED at 390px/);
+  });
+
+  it('document never scrolls sideways on phones (overflow contained)', () => {
+    expect(css).toMatch(/@media\s*\(max-width:\s*767px\)\s*\{[^]*?html,\s*body\s*\{[^}]*overflow-x:\s*hidden/);
+  });
+});