feat(mobile): WCAG-aligned tap targets on cohort selects + tighter modal/header padding on phone

Author: jddunn

src/dashboard/src/components/chat/ChatPanel.module.scss

@@ -67,6 +67,13 @@
     outline: 2px solid var(--amber);
     outline-offset: 1px;
   }
+
+  // Phone: bump tap target to clear the WCAG 2.5.5 44px guideline and
+  // raise font size so iOS doesn't auto-zoom the page on focus.
+  @media (max-width: 480px) {
+    padding: 10px 8px;
+    font-size: var(--font-md);
+  }
 }
 
 .agentBtn {

src/dashboard/src/components/layout/VerdictModal.module.scss

@@ -59,6 +59,12 @@
 .cohortDetails {
   padding: 12px 4px 8px;
   color: var(--text-1);
+
+  // Phone: pull the padding flush with the dialog edge so 360px
+  // viewports get more rendering room for the headline + summary.
+  @media (max-width: 480px) {
+    padding: 8px 0 6px;
+  }
 }
 
 .cohortHeader {
@@ -122,6 +128,15 @@
   border: 1px solid color-mix(in srgb, var(--actor-color, var(--amber)) 28%, transparent);
   border-left: 3px solid var(--actor-color, var(--amber));
   border-radius: 8px;
+
+  // Phone: tighten the badge column so the rationale text gets more
+  // horizontal room. The rank badge is short enough (#1 to #99) to
+  // still center-read at 40px while leaving meaningful body width.
+  @media (max-width: 480px) {
+    grid-template-columns: 40px 1fr;
+    gap: 10px;
+    padding: 10px 12px;
+  }
 }
 
 .cohortRankBadge {

src/dashboard/src/components/reports/ReportView.module.scss

@@ -242,6 +242,17 @@
   border: 1px solid var(--border);
   border-radius: 4px;
   min-width: 160px;
+
+  // Phone: 160px min-width forces the two selects + "vs" to wrap onto
+  // 3 rows on a 360px viewport. Dropping the floor + flex-grow lets
+  // them share the row width and clears the WCAG 2.5.5 44px tap
+  // target via the larger padding.
+  @media (max-width: 480px) {
+    min-width: 0;
+    flex: 1 1 0;
+    padding: 10px 8px;
+    font-size: var(--font-md);
+  }
 }
 
 .actorPairPickerVs {

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

@@ -87,6 +87,14 @@
   background: var(--bg-panel);
   border-bottom: 1px solid var(--actor-color, var(--border));
   flex-shrink: 0;
+
+  // Phone: shrink the header padding + gap so the slot label + name +
+  // pop chip stay on one line at narrow widths. Archetype already
+  // truncates with text-overflow: ellipsis so it shrinks naturally.
+  @media (max-width: 480px) {
+    padding: 8px 10px;
+    gap: 6px;
+  }
 }
 
 .columnHeaderSlot {

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

@@ -405,6 +405,13 @@
   & + & {
     border-left: 1px solid var(--border);
   }
+
+  // Phone: bump tap target to the WCAG 2.5.5 "Target Size" recommended
+  // 44×44px minimum so thumb taps don't miss between adjacent pills.
+  @media (max-width: 480px) {
+    padding: 10px 14px;
+    min-height: 44px;
+  }
 }
 
 .cohortViewModeButtonActive {
@@ -448,6 +455,16 @@
     outline: 2px solid var(--amber);
     outline-offset: 1px;
   }
+
+  // Phone: drop the 160px floor so two selects + the "vs" separator
+  // can both fit on a single row inside a 360px viewport, and bump
+  // the height to clear the WCAG 2.5.5 44px target-size guideline.
+  @media (max-width: 480px) {
+    min-width: 0;
+    flex: 1 1 0;
+    padding: 10px 8px;
+    font-size: var(--font-md);
+  }
 }
 
 .cohortPairPickerVs {