From 6bc9093298da4d3751eff320d051e5c016f4bfca Mon Sep 17 00:00:00 2001
From: Kev <kevdevelops@gmail.com>
Date: Thu, 16 Jul 2026 21:48:21 -0400
Subject: [PATCH] M4 locks: flat edge board is mobile-only + chip/grade/hero +
 overflow contained
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Structural mobile rules become failing tests (M4 'test-lock what's lockable'):
the flat EDGE BOARD shows <768px and game cards are desktop-only; the board
renders TeamChips + tier GradeBadge + sign-colored hero edge% + the ranked
opacity ramp; document never scrolls sideways at 390px. Source assertions —
they lock the RULES, not the pixels (that's the master audit).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 tests/unit/vyndrParityQA.test.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/tests/unit/vyndrParityQA.test.js b/tests/unit/vyndrParityQA.test.js
index 6ba1fcf..8a20b49 100644
--- a/tests/unit/vyndrParityQA.test.js
+++ b/tests/unit/vyndrParityQA.test.js
@@ -177,3 +177,31 @@ describe('M1 — mobile foundation is wired (structural, not visual)', () => {
     expect(css).toMatch(/@media\s*\(max-width:\s*767px\)\s*\{[^]*?html,\s*body\s*\{[^}]*overflow-x:\s*hidden/);
   });
 });
+
+// ── M4 — structural mobile locks (design completion train) ──────────────
+describe('M4 — mobile structural rules locked (source, not visual)', () => {
+  const css = read('app/globals.css');
+
+  it('the flat EDGE BOARD is the mobile board; game cards are desktop-only', () => {
+    // Design screen 01: <768px shows the flat edge-ranked board, ≥768px keeps
+    // the game-grouped cards.
+    expect(css).toMatch(/\.edge-board-mobile\s*\{\s*display:\s*none/);
+    expect(css).toMatch(/@media\s*\(max-width:\s*767px\)[^]*?\.edge-board-mobile\s*\{\s*display:\s*block/);
+    expect(css).toMatch(/\.edge-board-desktop\s*\{\s*display:\s*none\s*!important/);
+    const slate = read('components/Slate.tsx');
+    expect(slate).toMatch(/MobileEdgeBoard/);
+    expect(slate).toMatch(/flattenToEdgeBoard/);
+  });
+
+  it('the mobile edge board renders matchup chips + tier grade + one hero edge%', () => {
+    const b = read('components/vyndr/MobileEdgeBoard.tsx');
+    expect(b).toMatch(/TeamChip/);   // Rev 3 matchup chips
+    expect(b).toMatch(/GradeBadge/); // tier-colored grade
+    expect(b).toMatch(/var\(--miss\)/); // negative edge = red by sign
+    expect(b).toMatch(/rampOpacity/);    // Design's ranked opacity ramp
+  });
+
+  it('document still 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/);
+  });
+});