fix(viz mobile): mode pills become select <480px, hide redundant strips on phones

Author: jddunn

src/dashboard/src/components/viz/HighlightStrip.module.scss

@@ -12,6 +12,15 @@
   font-size: var(--font-xs);
   color: var(--text-2);
   line-height: 1.4;
+
+  // Below 640px the TurnBanner headline already carries the event
+  // title above this row; the divergence summary repeated here just
+  // eats vertical space the canvas needs more. Pull it off-screen
+  // for assistive tech (display:none drops it from the a11y tree)
+  // so phones reclaim the row.
+  @media (max-width: 640px) {
+    display: none;
+  }
 }
 
 .text { flex: 1 1 auto; }

src/dashboard/src/components/viz/VizLegendBar.module.scss

@@ -13,6 +13,14 @@
   font-family: var(--sans);
   font-size: var(--font-xs);
   color: var(--text-3);
+
+  // Below 480px the 4 legend swatches + Show full legend button take a
+  // full 40px row. The legend is reference info, not interactive — and
+  // SHOW FULL LEGEND is still reachable via the toolbar's ? Help
+  // overlay on phones. Reclaim the row for canvas height.
+  @media (max-width: 480px) {
+    display: none;
+  }
 }
 
 .glyphRow {

src/dashboard/src/components/viz/grid/GridModePills.tsx

@@ -1,3 +1,5 @@
+import { useMediaQuery, PHONE_QUERY } from './useMediaQuery.js';
+
 export type GridMode = 'living' | 'mood' | 'forge' | 'ecology' | 'divergence';
 
 /** Hints are scenario-templated. `{people}` = plural population noun,
@@ -48,6 +50,49 @@ export function GridModePills({
   counts?: Partial<Record<GridMode, number>>;
   labels: { person: string; people: string; Person: string; People: string };
 }) {
+  const isPhone = useMediaQuery(PHONE_QUERY);
+
+  // On phone viewports the 5-pill row was horizontally scrollable but
+  // ate ~44px of vertical chrome + always required the user to swipe
+  // sideways to see DIVERGENCE / ECOLOGY. Native <select> renders the
+  // current mode + a tap target that opens the system picker — cleaner
+  // and reclaims the row for actual viz content.
+  if (isPhone) {
+    return (
+      <select
+        aria-label="Grid viz mode"
+        value={mode}
+        onChange={(e) => onChange(e.target.value as GridMode)}
+        title={interpolate(MODES.find(m => m.key === mode)?.hint ?? '', labels)}
+        style={{
+          width: '100%',
+          padding: '8px 10px',
+          fontSize: 16,  // iOS Safari zoom-on-focus threshold
+          fontFamily: 'var(--mono)',
+          fontWeight: 800,
+          letterSpacing: '0.08em',
+          textTransform: 'uppercase',
+          background: 'var(--bg-card)',
+          color: 'var(--text-1)',
+          border: '1px solid var(--border)',
+          borderRadius: 6,
+          cursor: 'pointer',
+          minHeight: 44,  // WCAG 2.5.5 target size
+        }}
+      >
+        {MODES.map((m) => {
+          const count = counts?.[m.key];
+          const countSuffix = typeof count === 'number' && count > 0 ? ` · ${count}` : '';
+          return (
+            <option key={m.key} value={m.key}>
+              {m.label}{countSuffix}
+            </option>
+          );
+        })}
+      </select>
+    );
+  }
+
   return (
     <div
       role="tablist"