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/__tests__/lib/utils.test.ts

@@ -9,6 +9,8 @@ import {
   isValidPostcode,
   debounce,
   buildOfstedListBadge,
+  metricKind,
+  computeYBounds,
 } from '@/lib/utils';
 
 describe('formatPercentage', () => {
@@ -159,3 +161,54 @@ describe('buildOfstedListBadge', () => {
     expect(badge.cssClass).toBe('ofstedPending');
   });
 });
+
+describe('metricKind', () => {
+  it('classifies metrics by key', () => {
+    expect(metricKind('rwm_expected_pct')).toBe('percentage');
+    expect(metricKind('absence_rate')).toBe('percentage');
+    expect(metricKind('reading_progress')).toBe('progress');
+    expect(metricKind('progress_8_score')).toBe('progress');
+    expect(metricKind('attainment_8_score')).toBe('score');
+    expect(metricKind('reading_avg_score')).toBe('score');
+  });
+});
+
+describe('computeYBounds', () => {
+  it('tightens clustered percentages instead of framing 0-100', () => {
+    const b = computeYBounds([86, 86, 86, 80, 96], 'percentage');
+    expect(b.min).toBeGreaterThanOrEqual(0);
+    expect(b.max).toBeLessThanOrEqual(100);
+    expect(b.min).toBeGreaterThan(50);
+    expect(b.max! - b.min!).toBeGreaterThanOrEqual(10);
+  });
+
+  it('never widens percentages beyond 0-100 for non-negative data', () => {
+    const b = computeYBounds([2, 5, 98], 'percentage');
+    expect(b.min).toBe(0);
+    expect(b.max).toBe(100);
+  });
+
+  it('does not clamp to zero when pct-named trend data is negative', () => {
+    const b = computeYBounds([-12, -3, 4], 'percentage');
+    expect(b.min).toBeLessThan(-12);
+  });
+
+  it('keeps progress bounds symmetric around zero', () => {
+    const b = computeYBounds([-1.2, 0.4, 2.1], 'progress');
+    expect(b.min).toBe(-b.max!);
+    expect(b.min).toBeLessThanOrEqual(-1.2);
+    expect(b.max).toBeGreaterThanOrEqual(2.1);
+  });
+
+  it('fits score metrics without a fixed frame', () => {
+    const b = computeYBounds([42.3, 48.9, 51.2], 'score');
+    expect(b.min).toBeGreaterThanOrEqual(0);
+    expect(b.min).toBeLessThanOrEqual(42.3);
+    expect(b.max).toBeGreaterThanOrEqual(51.2);
+  });
+
+  it('returns empty bounds when there is no numeric data', () => {
+    expect(computeYBounds([null, undefined, NaN], 'percentage')).toEqual({});
+    expect(computeYBounds([], 'progress')).toEqual({});
+  });
+});