feat(compare): readable comparison chart on mobile

The compare chart squashed clustered schools into a thin band (y pinned
0-100) under an in-chart title + per-school legend that ate ~40% of a
300px card, leaving converging lines indistinguishable on phones.

- Auto-fit the y-axis to the data on all viewports (computeYBounds in
  lib/utils: padded + min-span for percentages, symmetric around 0 for
  progress, fitted for scores; negative pct-named trend metrics are not
  zero-clamped).
- Distinct point style per school (circle/triangle/rect/rectRot/star)
  as secondary encoding for convergence and colour-blindness.
- Mobile: drop in-chart title/legend/axis titles; add a chip row (colour
  dot + name) that doubles as tap-to-focus — highlights one school's
  line and dims the rest. Chart card 300px -> 340px, nearly all plot.
- Fix a latent colour mismatch: datasets were built from Object.entries
  whose integer-like URN keys enumerate in ascending numeric order,
  desyncing line colours from card colours; the chart now receives the
  ordered school list.
- Union years across schools instead of taking the first school's.
- Extract PerformanceChart's matchMedia pattern into hooks/useIsMobile.

Unit tests for metricKind/computeYBounds; e2e journey covers the mobile
chips and focus toggle.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

nextjs-app/components/ComparisonChart.module.css

@@ -0,0 +1,63 @@
+/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
+   parent .chartContainer, whose fixed height drives Chart.js sizing via
+   maintainAspectRatio: false. */
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.canvasBox {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+/* School chips: mobile-only legend + tap-to-focus control. Desktop keeps
+   Chart.js's built-in legend (with per-school point shapes). */
+.chips {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        padding-bottom: 8px;
+    }
+
+    .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 44px;
+        max-width: 100%;
+        padding: 4px 10px;
+        border: 1px solid rgba(0, 0, 0, .12);
+        border-radius: 999px;
+        background: transparent;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .chip[aria-pressed="true"] {
+        background: rgba(0, 0, 0, .06);
+        border-color: rgba(0, 0, 0, .35);
+    }
+
+    .chipDot {
+        flex: 0 0 auto;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+    }
+
+    .chipName {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 9rem;
+    }
+}