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/lib/analytics.ts

@@ -29,6 +29,7 @@ export type EventName =
   | 'compare_viewed'
   | 'compare_metric_changed'
   | 'compare_shared'
+  | 'compare_focus_school'
   // Operational
   | 'api_error'
   | 'results_load_more';

nextjs-app/lib/utils.ts

@@ -317,6 +317,57 @@ export function getTrendColor(trend: 'up' | 'down' | 'stable'): string {
   }
 }
 
+/**
+ * Broad shape of a KS2/KS4 metric, used to scale chart axes and format values.
+ */
+export type MetricKind = 'percentage' | 'progress' | 'score';
+
+export function metricKind(metric: string): MetricKind {
+  if (metric.includes('progress')) return 'progress';
+  if (metric.includes('pct') || metric.includes('rate')) return 'percentage';
+  return 'score';
+}
+
+/**
+ * Fit a chart y-axis to the data instead of a fixed frame, so clustered
+ * series remain distinguishable. Padding keeps a minimum span so noise is
+ * not magnified into drama.
+ *
+ * - percentage: pad and snap to 5s; cap at 100; floor at 0 only when the
+ *   data is non-negative (some trend metrics have `pct` in the key but hold
+ *   negative year-over-year deltas).
+ * - progress: symmetric around 0 so the zero line always shows.
+ * - score (Attainment 8, scaled scores): pad and snap to integers; floor at
+ *   0 only when the data is non-negative.
+ */
+export function computeYBounds(
+  values: Array<number | null | undefined>,
+  kind: MetricKind,
+): { min?: number; max?: number } {
+  const nums = values.filter((v): v is number => typeof v === 'number' && Number.isFinite(v));
+  if (nums.length === 0) return {};
+
+  const lo = Math.min(...nums);
+  const hi = Math.max(...nums);
+
+  if (kind === 'progress') {
+    const reach = Math.max(2, Math.ceil(Math.max(Math.abs(lo), Math.abs(hi)) + 0.5));
+    return { min: -reach, max: reach };
+  }
+
+  if (kind === 'percentage') {
+    const pad = Math.max(5, Math.round((hi - lo) * 0.2));
+    const min = Math.floor((lo - pad) / 5) * 5;
+    const max = Math.min(100, Math.ceil((hi + pad) / 5) * 5);
+    return { min: lo >= 0 ? Math.max(0, min) : min, max };
+  }
+
+  // score
+  const pad = Math.max(2, (hi - lo) * 0.2);
+  const min = Math.floor(lo - pad);
+  return { min: lo >= 0 ? Math.max(0, min) : min, max: Math.ceil(hi + pad) };
+}
+
 // ============================================================================
 // Local Storage Utilities
 // ============================================================================