fix(search): address review on the shared result rows

- The rows' narrow layout now switches at a 608px list, not 600px. Below
  769px the page pads 1rem each side, so a 640px screen gives a 608px
  list: exactly the old max-width: 640px media query, where 600px left
  633-640px screens on the wide layout.
- rowContainerGuard.test.ts fails if anything other than HomeView renders
  SchoolRow or SecondarySchoolRow, or if one of HomeView's row lists loses
  its `results` container. Outside one the rows silently keep their wide
  layout on phones. (Checked: HomeView is the only importer today.)
- Picking a pin from the list beside the map now works from the keyboard:
  each row carries a "Show <school> on the map" button, visually hidden
  until focused, with aria-pressed for the selected school. The row itself
  cannot be the button, since it holds links and buttons of its own.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

backend/app.py

@@ -109,7 +109,7 @@ def _has_publishable_data(row) -> bool:
 
 
 def _url_element(loc: str, lastmod: str | None = None) -> str:
-    """One <url> entry. No priority or changefreq — Google ignores both."""
+    """One <url> entry. No priority or changefreq, Google ignores both."""
     body = f"<loc>{loc}</loc>"
     if lastmod:
         body += f"<lastmod>{lastmod}</lastmod>"

backend/nearby_schools.py

@@ -250,6 +250,10 @@ def select_nearby(frame: pd.DataFrame, urn: int) -> list[dict]:
             "distance_miles": float(row["distance_miles"]),
             "school_type": _native(row.get("school_type")),
             "age_range": _native(row.get("age_range")),
+            # Each peer's own phase, not the subject's: the pool is a phase
+            # group, so an all-through school can sit beside a primary. The
+            # compare basket counts it against both of its tabs.
+            "phase": _native(row.get("phase")),
             "shared": _shared(subject, row, is_secondary),
             "metric_value": _native(row.get(metric_key)),
             "metric_key": metric_key,

backend/tests/test_nearby_schools.py

@@ -163,6 +163,18 @@ def test_secondary_reaches_further_than_primary():
     assert {s["urn"] for s in select_nearby(frame, 100001)} == {100002, 100003}
 
 
+def test_each_card_carries_its_own_phase():
+    # The compare basket limits each phase separately, so an all-through peer
+    # must not inherit the subject's "Primary".
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", phase="All-through", age_range="4-18", latitude=_at(0.6)),
+    )
+    phases = {s["urn"]: s["phase"] for s in select_nearby(frame, 100001)}
+    assert phases == {100002: "Primary", 100003: "All-through"}
+
+
 def test_the_cap_follows_the_phase():
     assert radius_miles("Primary") == 2.0
     assert radius_miles("Middle deemed primary") == 2.0

e2e/tests/journeys.spec.ts

@@ -122,9 +122,9 @@ test('the coverage figure is live, not the hardcoded fallback', async ({ page })
 test('the landing page states the real comparison limit', async ({ page }) => {
   await page.goto('/');
   const body = await page.locator('body').innerText();
-  // MAX_SCHOOLS in context/ComparisonProvider.tsx is 5. The hero used to
-  // promise three while a card lower on the same page promised five.
-  expect(body).toMatch(/five schools/i);
+  // MAX_PER_GROUP in lib/compareLogic.ts is 5 per phase. The hero once
+  // promised three while a card lower on the same page promised five.
+  expect(body).toMatch(/five primary and five secondary schools/i);
   expect(body).not.toMatch(/three schools/i);
 });
 
@@ -500,11 +500,8 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
     delete Element.prototype.requestFullscreen;
   });
 
+  // A postcode search opens on the map, phones included; open it fullscreen.
   await searchByName(page, 'B1 1BB');
-  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
-
-  // Switch to the map view, then open the map fullscreen.
-  await page.getByRole('button', { name: 'Map', exact: true }).click();
   const openFs = page.getByRole('button', { name: 'View map fullscreen' });
   await expect(openFs).toBeVisible({ timeout: 15_000 });
   await openFs.click();
@@ -516,6 +513,160 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
   await expect(openFs).toBeVisible();
 });
 
+/*
+ * The results toolbar: search, filters and the List/Map switch pinned under
+ * the header, so none of them scroll away with the results.
+ *
+ * Positions are read after window.scrollTo, never after a click: Playwright
+ * scrolls a click target into view first, which would make "still on screen
+ * after scrolling" true of anything.
+ */
+test('the results toolbar stays pinned with its List/Map switch', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 800 });
+  await searchByName(page, 'B1 1BB');
+  await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+
+  const view = page.getByRole('group', { name: 'Results view' });
+  await expect(view).toBeVisible();
+  // Desktop opens on the map; the list is the long page that scrolls.
+  await page.getByRole('button', { name: 'List', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'List', exact: true }))
+    .toHaveAttribute('aria-pressed', 'true');
+
+  await page.evaluate(() => window.scrollTo(0, 1500));
+  await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(1000);
+  const box = await view.boundingBox();
+  expect(box, 'the switch left the viewport').not.toBeNull();
+  // Just under the 64px header, not scrolled off the top.
+  expect(box!.y).toBeGreaterThanOrEqual(64);
+  expect(box!.y).toBeLessThan(160);
+  await expect(page.getByRole('combobox', { name: 'Distance' })).toBeInViewport();
+
+  await page.getByRole('button', { name: 'Map', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Map', exact: true }))
+    .toHaveAttribute('aria-pressed', 'true');
+});
+
+/*
+ * Desktop opens a postcode search on the map (mockup B): the list in a pane on
+ * the left, the map filling the rest of the screen, and a card on the map for
+ * the school picked in either.
+ */
+test('a desktop postcode search opens on the map with the list beside it', async ({ page }) => {
+  await page.setViewportSize({ width: 1280, height: 800 });
+  await searchByName(page, 'B1 1BB');
+
+  await expect(page.getByRole('button', { name: 'Map', exact: true }))
+    .toHaveAttribute('aria-pressed', 'true', { timeout: 15_000 });
+  const pane = page.locator('[class*="mapListPane"]');
+  const card = pane.locator('[data-urn]').first();
+  await expect(card).toBeVisible({ timeout: 15_000 });
+  // The list view's own row, not a cut-down card: it carries the same View
+  // link and Compare button.
+  await expect(card.getByRole('link', { name: 'View', exact: true })).toBeVisible();
+  await expect(card.getByRole('button', { name: /Compar/ })).toBeVisible();
+  await expect(page.locator('.sc-pin').first()).toBeVisible({ timeout: 15_000 });
+
+  // The split runs to the bottom of the screen rather than stopping short.
+  const split = await page.locator('[class*="mapViewContainer"]').boundingBox();
+  expect(split!.y + split!.height).toBeGreaterThan(800 - 40);
+  expect(split!.y + split!.height).toBeLessThanOrEqual(800);
+
+  // A card picks its pin and opens its card on the map. Clicked in its padding,
+  // clear of the name link and the Compare button.
+  const name = (await card.locator('a').first().innerText()).trim();
+  await card.click({ position: { x: 6, y: 6 } });
+  await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
+  await expect(page.locator('.sc-popup')).toContainText(name);
+
+  // And from the keyboard: each row has a "Show … on the map" button that
+  // appears on focus.
+  const second = pane.locator('[data-urn]').nth(1);
+  const secondName = (await second.locator('a').first().innerText()).trim();
+  const show = second.getByRole('button', { name: `Show ${secondName} on the map` });
+  await show.focus();
+  await expect(show).toBeVisible();
+  await page.keyboard.press('Enter');
+  await expect(show).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('.sc-popup')).toContainText(secondName);
+});
+
+// 402 is the iPhone 17, where the toolbar overflowed (see below).
+for (const width of [360, 390, 402, 430]) {
+  test(`a phone opens on the map, with the list a tap away, at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 });
+    await searchByName(page, 'B1 1BB');
+
+    // On the map, with the floating button offering the list, clear of the
+    // bottom tab bar.
+    const toList = page.getByRole('button', { name: 'Show list' });
+    await expect(toList).toBeInViewport({ timeout: 15_000 });
+    await expect(page.locator('.sc-pin').first()).toBeAttached({ timeout: 15_000 });
+    const barTop = await page.locator('nav[class*="bottomBar"]')
+      .evaluate((el) => el.getBoundingClientRect().top);
+    const fabBox = (await toList.boundingBox())!;
+    expect(fabBox.y + fabBox.height).toBeLessThanOrEqual(barTop);
+
+    // A pin opens the bottom sheet, stacked under the button, above the bar.
+    // dispatchEvent, not click: a pin may sit under the button or the toolbar,
+    // and Leaflet listens on the pin itself.
+    await page.locator('.sc-pin').first().dispatchEvent('click');
+    const sheet = page.locator('[class*="bottomSheet"]');
+    await expect(sheet).toBeVisible();
+    // The sheet slides up over 0.3s; measure where it comes to rest, not a
+    // frame of the animation (which reads as below the tab bar).
+    await expect.poll(async () => {
+      const box = (await sheet.boundingBox())!;
+      return Math.round(box.y + box.height);
+    }).toBeLessThanOrEqual(barTop);
+    // The dock is anchored at the bottom, so the sheet pushes the button up:
+    // measure the button again now that the sheet is in.
+    const fabNow = (await toList.boundingBox())!;
+    expect((await sheet.boundingBox())!.y).toBeGreaterThanOrEqual(fabNow.y + fabNow.height);
+
+    // MOBILE.md: no horizontal overflow, and 44px targets in the new chrome.
+    expect(await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth))
+      .toBe(0);
+    // scrollWidth alone cannot see this page's overflow: .main clips on x, so
+    // the search summary ran 40px off an iPhone 17 screen with scrollWidth
+    // still equal to the viewport. Measure the toolbar's own edges instead;
+    // the controls row scrolls by design, so only its box is held to the edge.
+    const offscreen = await page.evaluate(() => {
+      const toolbar = document.querySelector('[class*="resultsToolbar"]');
+      return [...(toolbar?.querySelectorAll('*') ?? [])]
+        .filter((el) => (el as HTMLElement).offsetParent
+          && !el.parentElement?.closest('[class*="controlsRow"]'))
+        .map((el) => ({ el: (el.className?.toString() || el.tagName).slice(0, 40),
+          right: Math.round(el.getBoundingClientRect().right) }))
+        .filter((o) => o.right > window.innerWidth);
+    });
+    expect(offscreen).toEqual([]);
+    const small = await page.evaluate(() => {
+      const toolbar = document.querySelector('[class*="resultsToolbar"]');
+      const fabEl = document.querySelector('[class*="viewFab"]');
+      const closeEl = document.querySelector('[class*="closeSheetBtn"]');
+      return [...(toolbar?.querySelectorAll('a, button, input, select') ?? []), fabEl, closeEl]
+        .filter((el): el is HTMLElement => !!el && !!(el as HTMLElement).offsetParent)
+        .map((el) => ({ t: el.innerText?.trim().slice(0, 24) || el.getAttribute('aria-label'),
+          w: el.getBoundingClientRect().width, h: el.getBoundingClientRect().height }))
+        .filter((o) => o.w < 44 || o.h < 44);
+    });
+    expect(small).toEqual([]);
+
+    // The list: the search folds to a summary, and the pinned toolbar and
+    // the button survive a scroll.
+    await toList.click();
+    const toMap = page.getByRole('button', { name: 'Show map' });
+    await expect(toMap).toBeInViewport();
+    await expect(schoolLinks(page).first()).toBeVisible();
+    const summary = page.getByRole('button', { name: /^Edit search: B1 1BB/ });
+    await page.evaluate(() => window.scrollTo(0, 1200));
+    await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(600);
+    await expect(summary).toBeInViewport();
+    await expect(toMap).toBeInViewport();
+  });
+}
+
 test('comparing two schools shows the parent-first sections side by side', async ({ page }) => {
   // Two same-phase (pure primary) schools so both stay on one tab.
   const [urn0, urn1] = await twoPrimaryUrns(page);
@@ -2826,6 +2977,52 @@ test('nearby schools link on to other schools and into compare', async ({ page }
   expect(Math.abs(offsetAfter - offsetBefore)).toBeLessThanOrEqual(8);
 });
 
+/**
+ * Every section in the mobile jump sheet can actually be reached.
+ *
+ * The sheet is a fixed bottom sheet, and the app has a fixed bottom tab bar.
+ * `position: sticky` with a z-index on the sticky nav makes it a stacking
+ * context, so the sheet's own z-index orders it only within that context —
+ * against the tab bar, the nav's value is what counts. The last item in the
+ * sheet was therefore painted over and untappable as soon as the list grew
+ * long enough to reach the bar, which adding "Nearby schools" is what did.
+ *
+ * Bounding boxes are not enough to catch this: the item is in the viewport and
+ * the right size, it is simply underneath something. So this asks the question
+ * a thumb asks — what is on top at this point.
+ */
+test('every section in the mobile jump sheet is tappable, not under the tab bar', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await searchByName(page, 'Primary');
+  await schoolLinks(page).first().click();
+  await page.waitForURL(/\/school\//);
+
+  // Scroll down so the sticky nav is docked and the sheet has somewhere to open.
+  await page.evaluate(() => window.scrollTo({ top: 1200 }));
+  // Two controls carry aria-haspopup: the mobile "Section" button and the
+  // desktop "All" one, which is display:none here but still in the DOM.
+  await page.locator('[aria-haspopup="menu"]:visible').click();
+
+  const sheet = page.locator('[role="menu"]');
+  await expect(sheet).toBeVisible();
+
+  const covered = await sheet.evaluate((panel: HTMLElement) =>
+    Array.from(panel.querySelectorAll('[role="menuitem"]'))
+      .map((el) => {
+        const box = el.getBoundingClientRect();
+        const hit = document.elementFromPoint(
+          Math.round(box.left + box.width / 2),
+          Math.round(box.top + box.height / 2),
+        );
+        return { label: (el as HTMLElement).innerText.trim().replace(/\s+/g, ' '), reachable: !!(hit && hit.closest('[role="menuitem"]')) };
+      })
+      .filter((item) => !item.reachable)
+      .map((item) => item.label),
+  );
+
+  expect(covered).toEqual([]);
+});
+
 /**
  * The nearby-schools section at MOBILE.md's three reference widths.
  *

nextjs-app/__tests__/app/metadata.test.ts

@@ -123,7 +123,7 @@ describe('C1 snippet copy', () => {
 
   it('no C1 page claims a school count that will drift', () => {
     // The corpus moves with every data refresh; this repo has already shipped
-    // one copy bug of that kind ("three schools" against MAX_SCHOOLS = 5).
+    // one copy bug of that kind ("three schools" against a limit of five).
     for (const [, meta] of pages) {
       expect(meta.description as string).not.toMatch(/\b\d{2},\d{3}\b|\b\d{2},000\b/);
     }

nextjs-app/__tests__/components/CompareAdmissions.test.tsx

@@ -104,7 +104,7 @@ describe('CompareAdmissions', () => {
     render(<CompareAdmissions schools={[grammar]} data={data} isSecondary={true} />);
 
     expect(
-      screen.getByText(/Entry is by entrance test — the school is selective/),
+      screen.getByText(/Entry is by entrance test\. The school is selective/),
     ).toBeInTheDocument();
     expect(screen.queryByText(/non-faith primaries/)).toBeNull();
   });

nextjs-app/__tests__/components/CutoffMapPanel.test.tsx

@@ -102,7 +102,7 @@ describe('CutoffMapPanel', () => {
     // Explanation is supporting text, not part of the bold verdict line.
     expect(result.querySelector('[class*="cutoffCheckHeadline"]')!.textContent)
       .not.toMatch(/measurement error/);
-    expect(result).not.toHaveTextContent(/^\S+ away — inside/);
+    expect(result).not.toHaveTextContent(/^\S+ away, inside/);
   });
 
   it('surfaces a postcode the geocoder cannot find', async () => {

nextjs-app/__tests__/components/FilterBarSuggest.test.tsx

@@ -32,9 +32,9 @@ afterEach(() => { global.fetch = realFetch; });
 describe('FilterBar autosuggest', () => {
   it('is a combobox only when the flag is on', () => {
     const { rerender } = render(<FilterBar filters={FILTERS} autosuggest={false} />);
-    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    expect(screen.queryByRole('combobox', { name: 'School name or postcode' })).not.toBeInTheDocument();
     rerender(<FilterBar filters={FILTERS} autosuggest />);
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: 'School name or postcode' })).toBeInTheDocument();
   });
 
   it('makes no request while the flag is off', async () => {
@@ -47,7 +47,7 @@ describe('FilterBar autosuggest', () => {
 
   it('shows suggestions and navigates when one is chosen', async () => {
     render(<FilterBar filters={FILTERS} autosuggest />);
-    await userEvent.type(screen.getByRole('combobox'), 'brecknock');
+    await userEvent.type(screen.getByRole('combobox', { name: 'School name or postcode' }), 'brecknock');
     const option = await screen.findByRole('option', { name: /Brecknock/ });
     await userEvent.click(option);
     expect(push).toHaveBeenCalledWith(
@@ -61,7 +61,7 @@ describe('FilterBar autosuggest', () => {
     // "NW1" is not a postcode, so a request for it is correct behaviour. Only
     // the settled value is the assertion, so set it in one go.
     render(<FilterBar filters={FILTERS} autosuggest />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'NW1 1AA' } });
+    fireEvent.change(screen.getByRole('combobox', { name: 'School name or postcode' }), { target: { value: 'NW1 1AA' } });
     await new Promise((r) => setTimeout(r, 300));   // past the 200ms debounce
     expect(global.fetch).not.toHaveBeenCalled();
   });
@@ -69,7 +69,7 @@ describe('FilterBar autosuggest', () => {
   it('Enter with no active option still submits the free-text search', async () => {
     // The existing behaviour is preserved, not replaced.
     render(<FilterBar filters={FILTERS} autosuggest />);
-    const input = screen.getByRole('combobox');
+    const input = screen.getByRole('combobox', { name: 'School name or postcode' });
     await userEvent.type(input, 'brecknock{Enter}');
     // updateURL pushes inside startTransition, so the call is not synchronous.
     await waitFor(() => expect(push).toHaveBeenCalledWith(
@@ -90,7 +90,7 @@ describe('FilterBar autosuggest does not reopen over results', () => {
     searchParams = new URLSearchParams('search=brecknock');
     render(<FilterBar filters={FILTERS} autosuggest />);
 
-    expect(screen.getByRole('combobox')).toHaveValue('brecknock');
+    expect(screen.getByRole('combobox', { name: 'School name or postcode' })).toHaveValue('brecknock');
     await new Promise((r) => setTimeout(r, 300));   // past the 200ms debounce
     expect(global.fetch).not.toHaveBeenCalled();
     expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('FilterBar autosuggest does not reopen over results', () => {
 
   it('closes the dropdown when the search is submitted', async () => {
     render(<FilterBar filters={FILTERS} autosuggest />);
-    const input = screen.getByRole('combobox');
+    const input = screen.getByRole('combobox', { name: 'School name or postcode' });
 
     await userEvent.type(input, 'brecknock');
     expect(await screen.findByRole('listbox')).toBeInTheDocument();

nextjs-app/__tests__/components/HomeView.staleFetch.test.tsx

@@ -39,15 +39,17 @@ beforeEach(() => {
 });
 
 test('load-more results from an old search are discarded, even after returning to it', async () => {
+  // Name searches: a postcode search opens on the map, which has no Load more.
+  params = new URLSearchParams('search=abbey');
   const pending = deferred();
   jest.mocked(fetchSchools).mockReturnValueOnce(pending.promise);
   const view = render(<HomeView initialSchools={response('Initial A')} filters={filters} />);
   fireEvent.click(screen.getByRole('button', { name: 'Load more schools' }));
   const signal = jest.mocked(fetchSchools).mock.calls[0][1]?.signal;
-  params = new URLSearchParams('postcode=SW2+1AA');
+  params = new URLSearchParams('search=brecknock');
   view.rerender(<HomeView initialSchools={response('Initial B')} filters={filters} />);
   expect(signal?.aborted).toBe(true);
-  params = new URLSearchParams('postcode=SW1A+1AA');
+  params = new URLSearchParams('search=abbey');
   view.rerender(<HomeView initialSchools={response('Fresh A')} filters={filters} />);
   await act(async () => pending.resolve(response('Stale append')));
   expect(screen.queryByText('Stale append')).not.toBeInTheDocument();

nextjs-app/__tests__/components/LeafletMapInner.test.tsx

@@ -0,0 +1,107 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import LeafletMapInner from '@/components/LeafletMapInner';
+import { primaryFixture } from '../support/schoolFixtures';
+import type { School } from '@/lib/types';
+
+/*
+ * The results map's own logic, against real Leaflet in jsdom: which pin is
+ * selected, whether the card opens, and what the card offers. jsdom lays out
+ * nothing, so this pins behaviour, never positions.
+ */
+
+const base = primaryFixture.schoolInfo;
+const a: School = { ...base, urn: 1, school_name: 'Southmead Primary School', latitude: 51.43, longitude: -0.21, distance: 0.2, rwm_expected_pct: 52 };
+const b: School = { ...base, urn: 2, school_name: 'Greenmead School', latitude: 51.431, longitude: -0.205, distance: 0.2,
+  school_type: 'Community special school', rwm_expected_pct: 0, reading_expected_pct: 0, writing_expected_pct: 0, maths_expected_pct: 0 };
+const schools = [a, b];
+const centre: [number, number] = [51.43, -0.21];
+
+function setWide(wide: boolean) {
+  window.matchMedia = ((q: string) => ({
+    matches: wide, media: q, addEventListener() {}, removeEventListener() {},
+  })) as unknown as typeof window.matchMedia;
+}
+
+function renderMap(props: Partial<React.ComponentProps<typeof LeafletMapInner>> = {}) {
+  const all = {
+    schools, center: centre, zoom: 13, referencePoint: centre, radiusMiles: 1,
+    nationalAvgRwm: 62, ...props,
+  };
+  const view = render(<LeafletMapInner {...all} />);
+  return { ...view, rerender: (next: Partial<typeof all>) => view.rerender(<LeafletMapInner {...all} {...next} />) };
+}
+
+beforeEach(() => setWide(true));
+
+it('draws a pin per school, the search location and the radius', () => {
+  const { container } = renderMap();
+  expect(container.querySelectorAll('.sc-pin')).toHaveLength(2);
+  expect(container.querySelector('.sc-home')).not.toBeNull();
+  expect(container.querySelector('.sc-radius-label')).toHaveTextContent('1 mile');
+});
+
+it('reports a pin click, and marks and opens the selected school', () => {
+  const onMarkerClick = jest.fn();
+  const { container, rerender } = renderMap({ onMarkerClick });
+  fireEvent.click(container.querySelectorAll('.sc-pin')[0]);
+  expect(onMarkerClick).toHaveBeenCalledWith(a);
+
+  rerender({ onMarkerClick, selectedUrn: 1 });
+  expect(container.querySelectorAll('.sc-pin--selected')).toHaveLength(1);
+  expect(container.querySelector('.sc-popup')).toHaveTextContent('Southmead Primary School');
+  expect(container.querySelector('.sc-popup')).toHaveTextContent('52% RWM -10 pts');
+});
+
+it('keeps the special-school card free of a benchmark and a placeholder 0%', () => {
+  const { container } = renderMap({ selectedUrn: 2 });
+  const card = container.querySelector('.sc-popup')!;
+  expect(card).toHaveTextContent('Greenmead School');
+  expect(card).not.toHaveTextContent(/%|pts/);
+});
+
+it('adds to compare from the card, and the card follows the basket', () => {
+  const onAddToCompare = jest.fn();
+  const { container, rerender } = renderMap({ onAddToCompare, selectedUrn: 1, compareUrns: [] });
+  fireEvent.click(container.querySelector('[data-compare]')!);
+  expect(onAddToCompare).toHaveBeenCalledWith(a);
+
+  rerender({ onAddToCompare, selectedUrn: 1, compareUrns: [1] });
+  expect(container.querySelector('[data-compare]')).toHaveTextContent('✓ Comparing');
+  fireEvent.click(container.querySelector('[data-compare]')!);
+  expect(onAddToCompare).toHaveBeenCalledTimes(2);
+});
+
+it('tells the page when the card is closed from the map, but not when replaced', () => {
+  const onDeselect = jest.fn();
+  const { container, rerender } = renderMap({ onDeselect, selectedUrn: 1 });
+  rerender({ onDeselect, selectedUrn: 2 });
+  expect(onDeselect).not.toHaveBeenCalled();
+
+  fireEvent.click(container.querySelector('.leaflet-popup-close-button')!);
+  expect(onDeselect).toHaveBeenCalledTimes(1);
+});
+
+it('keeps the selection when the results reload under it', () => {
+  const onDeselect = jest.fn();
+  const { container, rerender } = renderMap({ onDeselect, selectedUrn: 1 });
+  act(() => rerender({ onDeselect, selectedUrn: 1, schools: [...schools] }));
+  expect(onDeselect).not.toHaveBeenCalled();
+  expect(container.querySelector('.sc-popup')).toHaveTextContent('Southmead Primary School');
+});
+
+it('opens no card on a narrow screen, where the page shows a bottom sheet', () => {
+  setWide(false);
+  const { container } = renderMap({ selectedUrn: 1 });
+  expect(container.querySelectorAll('.sc-pin--selected')).toHaveLength(1);
+  expect(container.querySelector('.sc-popup')).toBeNull();
+});
+
+it('puts the card back when the pins are rebuilt for a reason other than the schools', () => {
+  const onDeselect = jest.fn();
+  const { container, rerender } = renderMap({ onDeselect, selectedUrn: 1 });
+  act(() => rerender({ onDeselect, selectedUrn: 1, radiusMiles: 3, referencePoint: [51.43, -0.21] }));
+  expect(onDeselect).not.toHaveBeenCalled();
+  expect(container.querySelector('.sc-radius-label')).toHaveTextContent('3 miles');
+  expect(container.querySelector('.sc-popup')).toHaveTextContent('Southmead Primary School');
+  expect(container.querySelectorAll('.sc-pin--selected')).toHaveLength(1);
+});

nextjs-app/__tests__/components/ResultsMapView.test.tsx

@@ -0,0 +1,174 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { HomeView } from '@/components/HomeView';
+import { fetchSchools, fetchNationalAverages } from '@/lib/api';
+import { primaryFixture } from '../support/schoolFixtures';
+import type { School, SchoolsResponse } from '@/lib/types';
+
+/*
+ * The map view: the list beside the map (mockup B), where every postcode
+ * search opens. The map itself is Leaflet and mocked here; what is pinned is what
+ * HomeView hands it and the list it draws beside it.
+ */
+
+let params = new URLSearchParams('postcode=SW196AR&radius=1');
+jest.mock('next/navigation', () => ({
+  useSearchParams: () => params,
+  usePathname: () => '/',
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}));
+jest.mock('@/context/ComparisonContext', () => ({
+  useComparisonContext: () => ({ addSchool: jest.fn(), removeSchool: jest.fn(), selectedSchools: [] }),
+}));
+jest.mock('@/lib/api', () => ({
+  fetchSchools: jest.fn(),
+  fetchNationalAverages: jest.fn(),
+  fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
+}));
+jest.mock('@/components/FilterBar', () => ({ FilterBar: () => null }));
+jest.mock('@/components/SchoolMap', () => ({
+  SchoolMap: ({ selectedUrn, radiusMiles, onMarkerClick, schools }: {
+    selectedUrn: number | null; radiusMiles?: number;
+    onMarkerClick: (s: School) => void; schools: School[];
+  }) => (
+    <div data-testid="map" data-selected={selectedUrn ?? ''} data-radius={radiusMiles}>
+      <button type="button" onClick={() => onMarkerClick(schools[1])}>pin</button>
+    </div>
+  ),
+}));
+
+const base = primaryFixture.schoolInfo;
+const southmead: School = {
+  ...base, urn: 2, school_name: 'Southmead Primary School', distance: 0.2,
+  school_type: 'Community school', rwm_expected_pct: 52, total_pupils: 269,
+};
+const greenmead: School = {
+  ...base, urn: 3, school_name: 'Greenmead School', distance: 0.2,
+  school_type: 'Community special school', rwm_expected_pct: 0,
+  reading_expected_pct: 0, writing_expected_pct: 0, maths_expected_pct: 0, total_pupils: 62,
+};
+const ourLady: School = {
+  ...base, urn: 1, school_name: 'Our Lady Queen of Heaven RC School', distance: 0,
+  school_type: 'Voluntary aided school', rwm_expected_pct: 70, total_pupils: 224,
+};
+
+function results(): SchoolsResponse {
+  return {
+    schools: [ourLady, southmead, greenmead], total: 3, page: 1, page_size: 25, total_pages: 1,
+    location_info: { postcode: 'SW196AR', radius: 1.60934, coordinates: [51.42, -0.21] },
+  } as SchoolsResponse;
+}
+const filters = { local_authorities: [], school_types: [], years: [], phases: [], genders: [], admissions_policies: [] };
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  jest.mocked(fetchSchools).mockReset().mockResolvedValue(results());
+  jest.mocked(fetchNationalAverages).mockResolvedValue({ primary: { rwm_expected_pct: 62 } } as never);
+  setWide(true);
+});
+
+/** Desktop unless a test says otherwise: the list pane is shown from 769px. */
+function setWide(wide: boolean) {
+  window.matchMedia = ((q: string) => ({
+    matches: wide, media: q, addEventListener() {}, removeEventListener() {},
+  })) as unknown as typeof window.matchMedia;
+}
+
+async function renderMap() {
+  const view = render(<HomeView initialSchools={results()} filters={filters} />);
+  await act(async () => {});
+  return view;
+}
+
+it('opens a postcode search on the map', async () => {
+  await renderMap();
+  expect(screen.getByTestId('map')).toHaveAttribute('data-radius', '1');
+  expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
+});
+
+it('lists a name search, which has no map', async () => {
+  params = new URLSearchParams('search=southmead');
+  render(<HomeView initialSchools={results()} filters={filters} />);
+  await act(async () => {});
+  expect(screen.queryByTestId('map')).not.toBeInTheDocument();
+});
+
+it('puts the count and the sort in the list beside the map, once', async () => {
+  await renderMap();
+  expect(screen.getAllByRole('heading', { name: /3 schools within 1.0 miles of SW196AR/ })).toHaveLength(1);
+  expect(screen.getAllByRole('combobox')).toHaveLength(1);
+});
+
+it('selects the pin from the card, and the card from the pin', async () => {
+  const { container } = await renderMap();
+  const card = (urn: number) => container.querySelector(`[data-urn="${urn}"]`) as HTMLElement;
+
+  fireEvent.click(within(card(1)).getByText(/pupils/));
+  expect(screen.getByTestId('map')).toHaveAttribute('data-selected', '1');
+  expect(card(1).className).toMatch(/mapRowSelected/);
+
+  fireEvent.click(screen.getByRole('button', { name: 'pin' }));
+  expect(card(2).className).toMatch(/mapRowSelected/);
+  expect(card(1).className).not.toMatch(/mapRowSelected/);
+});
+
+it('clicking a card\'s link or button does not also select it', async () => {
+  const { container } = await renderMap();
+  const card = container.querySelector('[data-urn="1"]') as HTMLElement;
+  fireEvent.click(within(card).getByRole('button', { name: '+ Compare' }));
+  expect(screen.getByTestId('map')).toHaveAttribute('data-selected', '');
+});
+
+it('shows the England comparison for mainstream schools only, and never a placeholder 0%', async () => {
+  const { container } = await renderMap();
+  const card = (urn: number) => container.querySelector(`[data-urn="${urn}"]`) as HTMLElement;
+  expect(card(2)).toHaveTextContent('52%Reading, Writing & Maths-10 pts vs national');
+  expect(card(2)).toHaveTextContent('269pupils');
+  expect(card(3)).toHaveTextContent('62pupils');
+  expect(card(3)).not.toHaveTextContent(/%|pts/);
+});
+
+it('opens the map after a hero search, and keeps the reader\'s choice after that', async () => {
+  // Landing page, then a hero search: the same instance gets new props.
+  params = new URLSearchParams('');
+  const empty = { schools: [], total: 0, page: 1, page_size: 25, total_pages: 0 } as SchoolsResponse;
+  const view = render(<HomeView initialSchools={empty} filters={filters} />);
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  view.rerender(<HomeView initialSchools={results()} filters={filters} />);
+  await act(async () => {});
+  expect(screen.getByTestId('map')).toBeInTheDocument();
+
+  // Chosen: a later search keeps the list.
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  params = new URLSearchParams('postcode=SW170AA&radius=1');
+  view.rerender(<HomeView initialSchools={results()} filters={filters} />);
+  await act(async () => {});
+  expect(screen.queryByTestId('map')).not.toBeInTheDocument();
+});
+
+it('builds no list cards on a phone, where the pane is hidden', async () => {
+  setWide(false);
+  const { container } = await renderMap();
+  expect(screen.getByTestId('map')).toBeInTheDocument();
+  expect(container.querySelectorAll('[data-urn]')).toHaveLength(0);
+  // The count stays: it is the pane's heading, shown above the map.
+  expect(screen.getByRole('heading', { name: /3 schools within/ })).toBeInTheDocument();
+});
+
+it('draws the list view\'s own row beside the map, with the same content', async () => {
+  const { container } = await renderMap();
+  const beside = container.querySelector('[data-urn="2"] > [class~="row"]')!.textContent;
+
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  const row = screen.getByRole('link', { name: 'Southmead Primary School' }).closest('[class~="row"]')!;
+  expect(row.parentElement?.className).toMatch(/schoolList/);
+  expect(row.textContent).toBe(beside);
+});
+
+it('lets a keyboard pick a pin from the list, with a real button', async () => {
+  await renderMap();
+  const show = screen.getByRole('button', { name: 'Show Southmead Primary School on the map' });
+  expect(show).toHaveAttribute('aria-pressed', 'false');
+  fireEvent.click(show);
+  expect(screen.getByTestId('map')).toHaveAttribute('data-selected', '2');
+  expect(show).toHaveAttribute('aria-pressed', 'true');
+});

nextjs-app/__tests__/components/ResultsToolbar.test.tsx

@@ -0,0 +1,157 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { HomeView } from '@/components/HomeView';
+import { FilterBar } from '@/components/FilterBar';
+import { fetchSchools } from '@/lib/api';
+import { track } from '@/lib/analytics';
+import { primaryFixture } from '../support/schoolFixtures';
+import type { SchoolsResponse } from '@/lib/types';
+
+/*
+ * The results toolbar (option B of the 2026-09-30 results-controls mockups):
+ * search, filters and the List/Map switch pinned under the header, with a
+ * floating List/Map button standing in for the switch on phones. Layout is CSS
+ * and not visible to jsdom; these pin the behaviour and the accessible names
+ * the E2E journeys rely on.
+ */
+
+let params = new URLSearchParams('postcode=SW196AR&radius=1');
+const push = jest.fn();
+jest.mock('next/navigation', () => ({
+  useSearchParams: () => params,
+  usePathname: () => '/',
+  useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
+}));
+jest.mock('@/context/ComparisonContext', () => ({
+  useComparisonContext: () => ({ addSchool: jest.fn(), removeSchool: jest.fn(), selectedSchools: [] }),
+}));
+jest.mock('@/lib/api', () => ({
+  fetchSchools: jest.fn(),
+  fetchNationalAverages: jest.fn(async () => ({})),
+  fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
+}));
+jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
+jest.mock('@/components/SchoolMap', () => ({ SchoolMap: () => <div data-testid="map" /> }));
+
+const filters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
+};
+
+function results(): SchoolsResponse {
+  return { schools: [{ ...primaryFixture.schoolInfo, school_name: 'Southmead Primary School' }],
+    total: 1, page: 1, page_size: 25, total_pages: 1 };
+}
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+  jest.mocked(track).mockClear();
+  jest.mocked(fetchSchools).mockReset().mockResolvedValue(results());
+});
+
+describe('the List/Map switch', () => {
+  it('lives in the toolbar with the filters and says which view is on', () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    const view = screen.getByRole('group', { name: 'Results view' });
+    expect(view.closest('div[class*="resultsToolbar"]')).not.toBeNull();
+    // A postcode search opens on the map.
+    expect(screen.getByRole('button', { name: 'Map' })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'false');
+  });
+
+  it('has a floating twin that flips between map and list', async () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    await act(async () => {});
+    fireEvent.click(screen.getByRole('button', { name: 'Show list' }));
+    expect(screen.queryByTestId('map')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'List' })).toHaveAttribute('aria-pressed', 'true');
+    expect(track).toHaveBeenCalledWith('results_view_changed', { view: 'list', via: 'floating' });
+
+    await act(async () => fireEvent.click(screen.getByRole('button', { name: 'Show map' })));
+    expect(screen.getByTestId('map')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Show list' })).toBeInTheDocument();
+  });
+
+  it('does not track a click on the view already showing', async () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    await act(async () => {});
+    fireEvent.click(screen.getByRole('button', { name: 'Map' }));
+    expect(track).not.toHaveBeenCalledWith('results_view_changed', expect.anything());
+  });
+
+  it('is absent from a name search, which has no map', () => {
+    params = new URLSearchParams('search=southmead');
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    expect(screen.queryByRole('group', { name: 'Results view' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Show map' })).not.toBeInTheDocument();
+  });
+});
+
+describe('the toolbar filters', () => {
+  it('keeps distance, phase and school type in the row, not behind More filters', () => {
+    render(<FilterBar filters={filters} />);
+    const row = screen.getByRole('group', { name: 'Filters' });
+    for (const name of ['Distance', 'Phase', 'School type']) {
+      expect(row).toContainElement(screen.getByRole('combobox', { name }));
+    }
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveDisplayValue('Within 1 mile');
+    expect(screen.queryByRole('combobox', { name: 'Local authority' })).not.toBeInTheDocument();
+  });
+
+  it('counts only what More filters hides', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school&local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
+  });
+});
+
+describe('the phone filter row', () => {
+  it('drops its "more this way" fade when nothing is left to scroll', () => {
+    render(<FilterBar filters={filters} />);
+    // jsdom lays nothing out, so the row reads as not overflowing at all.
+    expect(screen.getByRole('group', { name: 'Filters' }).className).toMatch(/controlsAtEnd/);
+  });
+});
+
+describe('the folded search', () => {
+  it('summarises the search and unfolds on tap', () => {
+    render(<FilterBar filters={filters} />);
+    const summary = screen.getByRole('button', { name: 'Edit search: SW196AR, within 1 mile' });
+    fireEvent.click(summary);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+  });
+
+  it('folds again once the edited search is submitted', () => {
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: /Edit search/ }));
+    const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
+    fireEvent.change(input, { target: { value: 'SW19 1AA' } });
+    fireEvent.submit(input.closest('form')!);
+    expect(screen.getByRole('button', { name: /Edit search/ })).toBeInTheDocument();
+  });
+
+  it('refolds and shows the new text when the search changes some other way', () => {
+    const view = render(<FilterBar filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: /Edit search/ }));
+    fireEvent.change(screen.getByRole('searchbox', { name: 'School name or postcode' }),
+      { target: { value: 'half-typed' } });
+
+    // Back button: the URL changes under the component, nothing is submitted.
+    params = new URLSearchParams('postcode=SW170AA&radius=3');
+    view.rerender(<FilterBar filters={filters} />);
+
+    expect(screen.getByRole('button', { name: 'Edit search: SW170AA, within 3 miles' }))
+      .toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: 'School name or postcode' }))
+      .toHaveValue('SW170AA');
+  });
+
+  it('never appears in the hero, or before anything has been searched', () => {
+    const { unmount } = render(<FilterBar filters={filters} isHero />);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+    unmount();
+    params = new URLSearchParams('local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
+  });
+});

nextjs-app/__tests__/components/darkThemeSafety.test.ts

@@ -119,10 +119,13 @@ describe('third-party surfaces under themed text', () => {
 
   it('still finds a component painting themed text into a Leaflet popup', () => {
     // Guards the rule below against passing vacuously if the popups are ever
-    // rewritten as React components rather than HTML strings.
+    // rewritten as React components rather than HTML strings. The results
+    // map's card themes its text through classes in SchoolMap.module.css
+    // rather than inline, so a class-built popup counts as well.
     const themed = sources(COMPONENTS).filter((file) => {
       const src = fs.readFileSync(file, 'utf8');
-      return /bindPopup\(/.test(src) && /color:var\(--|color: var\(--/.test(src);
+      return /bindPopup\(|L\.popup\(/.test(src)
+        && (/color:var\(--|color: var\(--/.test(src) || /class="sc-card/.test(src));
     });
 
     expect(themed.length).toBeGreaterThan(0);

nextjs-app/__tests__/components/noEmDashCopy.test.ts

@@ -0,0 +1,72 @@
+import fs from 'fs';
+import path from 'path';
+import ts from 'typescript';
+
+/**
+ * Keeps the em dash out of public copy.
+ *
+ * Every visitor-facing sentence was rewritten to use a colon, comma, full stop
+ * or parentheses instead. A new one slips back in unnoticed, because it reads
+ * fine to whoever wrote it, so this walks the source with the TypeScript parser
+ * and checks every string literal, template chunk and JSX text node. Comments
+ * are not nodes the walk visits, so they stay free to use it.
+ *
+ * Two uses are allowed:
+ *  - a lone dash standing in for a missing value in a table cell or stat slot,
+ *    which is a data convention rather than prose;
+ *  - the message of a thrown Error, which only a developer reads.
+ */
+
+const ROOT = path.join(__dirname, '..', '..');
+const SCANNED = ['app', 'components', 'lib'];
+const SKIPPED = [path.join(ROOT, 'app', '(payload)')];
+
+function sources(dir: string): string[] {
+  if (SKIPPED.includes(dir)) return [];
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) return sources(full);
+    return /\.tsx?$/.test(entry.name) ? [full] : [];
+  });
+}
+
+function isErrorMessage(node: ts.Node): boolean {
+  for (let p = node.parent; p; p = p.parent) {
+    if (ts.isNewExpression(p) && /Error$/.test(p.expression.getText())) return true;
+    if (ts.isStatement(p)) return false;
+  }
+  return false;
+}
+
+const EMPTY_VALUE = /^(—|—)$/;
+
+function dashedCopy(file: string): string[] {
+  const text = fs.readFileSync(file, 'utf8');
+  const kind = file.endsWith('.tsx') ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  const sf = ts.createSourceFile(file, text, ts.ScriptTarget.Latest, true, kind);
+  const found: string[] = [];
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isStringLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node) || ts.isJsxText(node)
+      || ts.isTemplateHead(node) || ts.isTemplateMiddle(node) || ts.isTemplateTail(node)
+    ) {
+      const copy = node.getText().replace(/\s+/g, ' ').trim();
+      const bare = node.text.trim();
+      if (/—|—/.test(copy) && !EMPTY_VALUE.test(bare) && !isErrorMessage(node)) {
+        const { line } = sf.getLineAndCharacterOfPosition(node.getStart());
+        found.push(`${path.relative(ROOT, file)}:${line + 1}  ${copy}`);
+      }
+    }
+    ts.forEachChild(node, visit);
+  };
+  visit(sf);
+  return found;
+}
+
+describe('public copy', () => {
+  it('uses no em dashes', () => {
+    const files = SCANNED.flatMap((dir) => sources(path.join(ROOT, dir)));
+    expect(files.length).toBeGreaterThan(50);
+    expect(files.flatMap(dashedCopy)).toEqual([]);
+  });
+});

nextjs-app/__tests__/components/rowContainerGuard.test.ts

@@ -0,0 +1,41 @@
+import fs from 'fs';
+import path from 'path';
+
+/*
+ * SchoolRow and SecondarySchoolRow switch to their narrow layout with a
+ * container query on a `results` container, not a media query, because the
+ * same row fills the phone list and the narrow list beside the desktop map.
+ * Outside a `results` container the query never matches and the row keeps its
+ * wide layout on a phone, a silent regression rather than an error.
+ *
+ * HomeView provides the container on every list it renders the rows into.
+ * Anything else that starts rendering them must do the same; this fails so
+ * that the person adding it reads this first.
+ */
+
+const ROOT = path.join(__dirname, '..', '..');
+const DIRS = ['app', 'components', 'lib'];
+const ROW_IMPORT = /from\s+['"][^'"]*\/(SchoolRow|SecondarySchoolRow)['"]/;
+
+function sources(dir: string): string[] {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) return entry.name === 'node_modules' ? [] : sources(full);
+    return /\.tsx?$/.test(entry.name) ? [full] : [];
+  });
+}
+
+it('renders the results rows only where a `results` container is provided', () => {
+  const importers = DIRS.flatMap((d) => sources(path.join(ROOT, d)))
+    .filter((file) => ROW_IMPORT.test(fs.readFileSync(file, 'utf8')))
+    .map((file) => path.relative(ROOT, file));
+  expect(importers).toEqual(['components/HomeView.tsx']);
+});
+
+it('gives each of HomeView\'s row lists the `results` container', () => {
+  const css = fs.readFileSync(path.join(ROOT, 'components', 'HomeView.module.css'), 'utf8');
+  for (const list of ['.schoolList', '.compactList', '.bottomSheet']) {
+    const rule = new RegExp(`\\${list}\\s*\\{[^}]*container:\\s*results\\s*/\\s*inline-size`);
+    expect({ list, provided: rule.test(css) }).toEqual({ list, provided: true });
+  }
+});

nextjs-app/__tests__/components/schoolDetail.characterization.test.tsx

@@ -108,7 +108,7 @@ describe('all-through schools', () => {
 
   it('labels the KS2 block explicitly', () => {
     renderSchoolDetail(allThroughFixture);
-    expect(screen.getAllByText(/Primary — KS2 SATs/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Primary: KS2 SATs/).length).toBeGreaterThan(0);
   });
 });
 

nextjs-app/__tests__/context/ComparisonProvider.test.tsx

@@ -0,0 +1,114 @@
+/**
+ * The basket limit is five per phase group, not five overall, and the
+ * provider is where it is enforced for every add path.
+ *
+ * Entries without a phase count against both groups. Baskets saved before
+ * phases were recorded hold such entries, so the compare page backfills them
+ * once it has fetched each school.
+ */
+
+import { act, render, screen, fireEvent } from '@testing-library/react';
+
+import { AddToCompareButton } from '@/components/school/AddToCompareButton';
+import { ComparisonProvider } from '@/context/ComparisonProvider';
+import { useComparisonContext } from '@/context/ComparisonContext';
+import type { NearbySchool, School } from '@/lib/types';
+
+type Ctx = ReturnType<typeof useComparisonContext>;
+
+function renderBasket(stored: Partial<School>[] = []) {
+  window.localStorage.setItem('selectedSchools', JSON.stringify(stored));
+  const ref: { current: Ctx | null } = { current: null };
+  function Probe() {
+    ref.current = useComparisonContext();
+    return null;
+  }
+  render(
+    <ComparisonProvider>
+      <Probe />
+    </ComparisonProvider>,
+  );
+  return ref as { current: Ctx };
+}
+
+const school = (urn: number, phase: string | null) =>
+  ({ urn, school_name: `School ${urn}`, phase }) as School;
+
+beforeEach(() => {
+  window.localStorage.clear();
+  jest.spyOn(window, 'alert').mockImplementation(() => {});
+});
+
+afterEach(() => jest.restoreAllMocks());
+
+it('holds five primary and five secondary schools, and no more of either', () => {
+  const ctx = renderBasket();
+  act(() => {
+    for (let i = 0; i < 6; i++) ctx.current.addSchool(school(100000 + i, 'Primary'));
+    for (let i = 0; i < 6; i++) ctx.current.addSchool(school(200000 + i, 'Secondary'));
+  });
+  expect(ctx.current.selectedSchools).toHaveLength(10);
+  expect(window.alert).toHaveBeenCalledWith(expect.stringMatching(/5 primary schools/));
+  expect(window.alert).toHaveBeenCalledWith(expect.stringMatching(/5 secondary schools/));
+});
+
+it('frees the second group once a stored entry learns its phase', () => {
+  // Three phase-less entries from an older basket plus two primaries: the
+  // primary group reads as full although only two are really primary.
+  const ctx = renderBasket([
+    school(100001, null),
+    school(100002, null),
+    school(100003, null),
+    school(100004, 'Primary'),
+    school(100005, 'Primary'),
+  ]);
+  expect(ctx.current.fullGroupFor({ phase: 'Primary' })).toBe('primary');
+
+  act(() => {
+    ctx.current.backfillPhases({ 100001: 'Secondary', 100002: 'Secondary', 100003: 'Secondary' });
+  });
+
+  expect(ctx.current.fullGroupFor({ phase: 'Primary' })).toBeNull();
+  expect(ctx.current.selectedSchools.map((s) => s.phase)).toEqual([
+    'Secondary',
+    'Secondary',
+    'Secondary',
+    'Primary',
+    'Primary',
+  ]);
+});
+
+it('never overwrites a phase the basket already has', () => {
+  const ctx = renderBasket([school(100001, 'Primary')]);
+  act(() => ctx.current.backfillPhases({ 100001: 'All-through' }));
+  expect(ctx.current.selectedSchools[0].phase).toBe('Primary');
+});
+
+it('a nearby card adds its own phase, not an unknown one', () => {
+  const nearby = {
+    urn: 100009,
+    school_name: 'Nearby',
+    distance_miles: 0.4,
+    school_type: 'Academy',
+    age_range: '4-18',
+    phase: 'All-through',
+    shared: [],
+    metric_value: null,
+    metric_key: 'rwm_expected_pct',
+    metric_year: null,
+  } as NearbySchool;
+
+  const ref: { current: Ctx | null } = { current: null };
+  function Probe() {
+    ref.current = useComparisonContext();
+    return null;
+  }
+  render(
+    <ComparisonProvider>
+      <Probe />
+      <AddToCompareButton school={nearby} />
+    </ComparisonProvider>,
+  );
+  fireEvent.click(screen.getByRole('button', { name: /Add to compare/ }));
+  expect(ref.current?.selectedSchools[0].phase).toBe('All-through');
+});

nextjs-app/__tests__/lib/compareLogic.test.ts

@@ -6,8 +6,12 @@
  */
 
 import {
+  MAX_PER_GROUP,
   OFSTED_LEGACY_GRADES,
   admissionsForPhase,
+  compareGroups,
+  fitToGroupLimits,
+  fullGroupFor,
   ofstedDisplay,
   progressBand,
   rcAreaLabel,
@@ -313,3 +317,48 @@ describe('latestValues', () => {
     expect(latestValues(data, [1], 'nope')).toEqual([null]);
   });
 });
+
+describe('basket limits per comparison group', () => {
+  const school = (phase: string | null, urn = 0) => ({ urn, phase });
+  const many = (phase: string | null, n: number, from = 0) =>
+    Array.from({ length: n }, (_, i) => school(phase, from + i));
+
+  it('files each phase under its compare tab', () => {
+    expect(compareGroups('Primary')).toEqual(['primary']);
+    expect(compareGroups('Middle deemed primary')).toEqual(['primary']);
+    expect(compareGroups('Secondary')).toEqual(['secondary']);
+    expect(compareGroups('Middle deemed secondary')).toEqual(['secondary']);
+    expect(compareGroups('16 plus')).toEqual(['secondary']);
+  });
+
+  it('counts schools that could land in either tab against both', () => {
+    expect(compareGroups('All-through')).toEqual(['primary', 'secondary']);
+    expect(compareGroups('Not applicable')).toEqual(['primary', 'secondary']);
+    expect(compareGroups(null)).toEqual(['primary', 'secondary']);
+  });
+
+  it('a full primary group still admits secondary schools', () => {
+    const basket = many('Primary', MAX_PER_GROUP);
+    expect(fullGroupFor(basket, school('Primary'))).toBe('primary');
+    expect(fullGroupFor(basket, school('Secondary'))).toBeNull();
+    expect(fullGroupFor(basket, school('All-through'))).toBe('primary');
+  });
+
+  it('allows ten schools in total, five per group', () => {
+    const basket = [...many('Primary', 5), ...many('Secondary', 5, 5)];
+    expect(fullGroupFor(basket, school('Primary'))).toBe('primary');
+    expect(fullGroupFor(basket, school('Secondary'))).toBe('secondary');
+  });
+
+  it('an all-through school uses a slot in both groups', () => {
+    const basket = [school('All-through'), ...many('Primary', 4, 1)];
+    expect(fullGroupFor(basket, school('Primary'))).toBe('primary');
+    expect(fullGroupFor(basket, school('Secondary'))).toBeNull();
+  });
+
+  it('trims an oversized shared link per group, keeping order', () => {
+    const urls = [...many('Primary', 7), ...many('Secondary', 3, 7)];
+    const kept = fitToGroupLimits(urls).map((s) => s.urn);
+    expect(kept).toEqual([0, 1, 2, 3, 4, 7, 8, 9]);
+  });
+});

nextjs-app/__tests__/lib/lastDistanceOffered.test.ts

@@ -122,7 +122,7 @@ describe('compareToCutoff', () => {
 
   it('reads back the reported case in one unit', () => {
     expect(compareToCutoff(69, 270, 2026).headline)
-      .toBe('0.04 miles away — inside the September 2026 cut-off of 0.17 miles.');
+      .toBe('0.04 miles away, inside the September 2026 cut-off of 0.17 miles.');
   });
 
   it('calls a clearly nearer home inside, and names the year', () => {

nextjs-app/app/(frontend)/compare/page.tsx

@@ -33,9 +33,9 @@ export async function generateMetadata(
     // Deliberately not the homepage's phrase. Two pages chasing "compare
     // schools" is how a site competes with itself; this one takes the tool
     // phrasing instead.
-    title: 'School Comparison Tool — Up to Five at Once | schoolcompare',
+    title: 'School Comparison Tool: Primary and Secondary Schools | schoolcompare',
     description:
-      'Put up to five English schools in one table: SATs and GCSE results against the England average, Ofsted grades, and the distance places were offered.',
+      'Put up to five primary and five secondary schools in England in one table: SATs and GCSE results against the England average, Ofsted grades, and the distance places were offered.',
     keywords:
       'school comparison, compare schools, Ofsted comparison, school admissions, KS2 comparison, primary school performance',
     alternates: { canonical: absoluteUrl('/compare') },

nextjs-app/app/(frontend)/layout.tsx

@@ -54,7 +54,7 @@ export const metadata: Metadata = {
     template: '%s | schoolcompare',
   },
   description:
-    'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place. Free, no sign-up.',
+    'Put five English schools on one screen: SATs, GCSE results, Ofsted grades, and how close you had to live to get a place. Free, no sign-up.',
   keywords: 'school comparison, KS2 results, KS4 results, primary school, secondary school, England schools, SATs results, GCSE results',
   authors: [{ name: 'schoolcompare' }],
   manifest: '/manifest.json',
@@ -69,7 +69,7 @@ export const metadata: Metadata = {
     type: 'website',
     title: 'Compare Schools Side by Side | schoolcompare',
     description:
-      'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
+      'Put five English schools on one screen: SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
     /*
      * Declared, not inherited.
      *
@@ -93,7 +93,7 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     title: 'Compare Schools Side by Side | schoolcompare',
     description:
-      'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
+      'Put five English schools on one screen: SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
     // The card is summary_large_image; claiming that and supplying no image
     // is worse than claiming a summary card.
     images: ['/opengraph-image'],

nextjs-app/app/(frontend)/page.tsx

@@ -49,7 +49,7 @@ export const metadata: Metadata = {
    */
   title: { absolute: 'Compare Schools Side by Side | schoolcompare' },
   description:
-    'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place. Free, no sign-up.',
+    'Put five English schools on one screen: SATs, GCSE results, Ofsted grades, and how close you had to live to get a place. Free, no sign-up.',
   // This page reads eleven search params. They filter a result set; they do
   // not make a new document. Collapsing every combination onto "/" stops the
   // homepage competing with itself for its own head terms.

nextjs-app/app/(frontend)/schools/[place]/page.tsx

@@ -56,7 +56,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     // absolute: the root layout's template appends '| schoolcompare' to a
     // plain string, and this title already carries it. Without this every
     // place title read '... | schoolcompare | schoolcompare'.
-    title: { absolute: `Schools in ${name} — Compare ${count} Schools | schoolcompare` },
+    title: { absolute: `Schools in ${name}: Compare ${count} Schools | schoolcompare` },
     description:
       `Every school in ${name}, with SATs and GCSE results, Ofsted grades, the local `
       + `average against England, and how close you had to live to get a place.`,

nextjs-app/app/(frontend)/schools/authority/[la]/[phase]/page.tsx

@@ -41,7 +41,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     // "Local Authority" stays in the title for the same reason it is on the
     // bare authority page: 67 town names collide with an authority name, and
     // a reader landing on both needs to know which set each covers.
-    title: { absolute: `${word} Schools in ${name} — Local Authority | schoolcompare` },
+    title: { absolute: `${word} Schools in ${name} (Local Authority) | schoolcompare` },
     description:
       `Every ${phase} school in the ${name} local authority, with results, Ofsted `
       + `grades and the authority average against England.`,

nextjs-app/app/(frontend)/schools/authority/[la]/page.tsx

@@ -43,7 +43,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: { absolute: `Schools in ${name} — Local Authority | schoolcompare` },
+    title: { absolute: `Schools in ${name} (Local Authority) | schoolcompare` },
     description:
       `All ${count} schools in the ${name} local authority, with SATs and GCSE results, `
       + `Ofsted grades and the authority average against England.`,

nextjs-app/app/opengraph-image.tsx

@@ -11,7 +11,7 @@ import { ImageResponse } from 'next/og';
  * and a suggestion of the illustration's rolling landscape along the bottom.
  * It states the promise rather than decorating it.
  */
-export const alt = 'schoolcompare — find the school where your child will flourish';
+export const alt = 'schoolcompare: find the school where your child will flourish';
 export const size = { width: 1200, height: 630 };
 export const contentType = 'image/png';
 

nextjs-app/components/AdmissionsView.tsx

@@ -64,11 +64,11 @@ interface Step {
 const SECONDARY_STEPS: Step[] = [
   {
     title: 'Check entry criteria',
-    body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely.',
+    body: 'Look at each school\'s admissions policy. Catchment areas, faith criteria, sibling priority and aptitude tests vary widely.',
     callouts: [
       {
         title: 'Selective schools register earlier',
-        body: 'Grammar and other selective schools need separate entrance-test registration months earlier — often by September, well before the 31 October deadline.',
+        body: 'Grammar and other selective schools need separate entrance-test registration months earlier, often by September and well before the 31 October deadline.',
       },
       {
         title: 'Faith schools may need an extra form',
@@ -86,26 +86,26 @@ const SECONDARY_STEPS: Step[] = [
   {
     date: '31 October',
     title: 'Application deadline',
-    body: 'Submit your ranked list of schools — most councils allow three to six preferences (London boroughs typically six). Councils treat all preferences equally, so list schools in the genuine order you want them, not strategically.',
+    body: 'Submit your ranked list of schools. Most councils allow three to six preferences (London boroughs typically six). Councils treat all preferences equally, so list schools in the genuine order you want them, not strategically.',
     highlight: 'deadline',
     tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
   },
   {
     date: '1 March',
     title: 'National Offer Day',
-    body: 'Your allocated school appears on the council\'s online admissions portal and is sent by email. Release times are set by each council — often from late afternoon, though some publish overnight — so check your council\'s page rather than refreshing at midnight.',
+    body: 'Your allocated school appears on the council\'s online admissions portal and is sent by email. Release times are set by each council (often from late afternoon, though some publish overnight), so check your council\'s page rather than refreshing at midnight.',
     highlight: 'offer',
     tool: { label: 'Look up your allocated school', href: '/' },
   },
   {
     date: '~15 March',
     title: 'Accept or decline',
-    body: 'Respond by the deadline your council gives — typically around 15 March. Accepting does not prevent you from keeping a place on a waiting list for a preferred school.',
+    body: 'Respond by the deadline your council gives, typically around 15 March. Accepting does not prevent you from keeping a place on a waiting list for a preferred school.',
     tool: { label: 'Weigh your offer against your other choices', href: '/compare' },
   },
   {
     title: 'Appeals',
-    body: 'If unsuccessful, you can appeal within 20 school days of the refusal letter. Secondary appeals consider whether prejudice to the school outweighs your case — success rates vary.',
+    body: 'If unsuccessful, you can appeal within 20 school days of the refusal letter. Secondary appeals consider whether prejudice to the school outweighs your case, and success rates vary.',
     tool: { label: 'Gather performance evidence for your case', href: '/rankings' },
   },
 ];
@@ -163,7 +163,7 @@ interface Tip {
 const TIPS: Tip[] = [
   {
     heading: 'Equal preference rule',
-    body: 'Councils consider every school you list before making any offer, then give you the highest-ranked one you qualify for. Your order only decides which qualifying school you get — you can\'t game it, so list schools in the order you genuinely want them.',
+    body: 'Councils consider every school you list before making any offer, then give you the highest-ranked one you qualify for. Your order only decides which qualifying school you get. You can\'t game it, so list schools in the order you genuinely want them.',
   },
   {
     heading: 'Late applications go to the back',
@@ -259,7 +259,7 @@ export function AdmissionsView() {
         </span>
         <h1 className={styles.heroTitle}>School Admissions Guide</h1>
         <p className={styles.heroSub}>
-          Everything parents need to know about applying for a school place in England — from opening dates to National Offer Day, with live countdowns to every key milestone.
+          Everything parents need to know about applying for a school place in England, from opening dates to National Offer Day, with live countdowns to every key milestone.
         </p>
       </section>
 

nextjs-app/components/ComparisonChart.tsx

@@ -43,7 +43,7 @@ interface ComparisonChartProps {
   isSecondary?: boolean;
 }
 
-// One shape per basket slot (MAX_SCHOOLS = 5) — secondary encoding so
+// One shape per slot in a phase tab (MAX_PER_GROUP = 5) — secondary encoding so
 // converging lines stay tellable apart without relying on hue alone.
 const POINT_STYLES: PointStyle[] = ['circle', 'triangle', 'rect', 'rectRot', 'star'];
 
@@ -258,15 +258,15 @@ export function ComparisonChart({ comparisonData, schools, metric, metricLabel,
         // published by DfE but aren't in our dataset yet.
         <p className={styles.chartNote}>
           School-level GCSE figures for 2019/20 and 2020/21 weren&apos;t published (COVID
-          grading), and more recent years aren&apos;t in our dataset yet where lines break — the
-          England average is shown where available.
+          grading), and more recent years aren&apos;t in our dataset yet. Where lines break, the
+          England average is shown if available.
         </p>
       ) : (
         !isSecondary &&
         built.showUnpublished202122Note && (
           <p className={styles.chartNote}>
             No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn&apos;t publish
-            school-level figures for 2021/22 — the England average is shown for that year.
+            school-level figures for 2021/22. The England average is shown for that year.
           </p>
         )
       )}

nextjs-app/components/ComparisonView.tsx

@@ -53,7 +53,8 @@ export function ComparisonView({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
-  const { selectedSchools, removeSchool, replaceSchools, isInitialized } = useComparison();
+  const { selectedSchools, removeSchool, replaceSchools, backfillPhases, isInitialized } =
+    useComparison();
 
   const [selectedMetric, setSelectedMetric] = useState(initialMetric);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -157,6 +158,17 @@ export function ComparisonView({
     };
   }, [urnKey, isInitialized]);
 
+  useEffect(() => {
+    if (!comparisonData) return;
+    backfillPhases(
+      Object.fromEntries(
+        Object.values(comparisonData)
+          .filter((d) => d?.school_info)
+          .map((d) => [d.school_info.urn, d.school_info.phase]),
+      ),
+    );
+  }, [comparisonData, backfillPhases]);
+
   const primarySchools = selectedSchools.filter((school) => {
     const info = comparisonData?.[school.urn]?.school_info;
     const hasPrimaryData =
@@ -263,7 +275,7 @@ export function ComparisonView({
         <header className={styles.header}>
           <h1>Compare Schools</h1>
           <p className={styles.subtitle}>
-            Add schools to your comparison basket to see them side by side — inspection results,
+            Add schools to your comparison basket to see them side by side: inspection results,
             academics, admissions and community.
           </p>
         </header>
@@ -300,8 +312,8 @@ export function ComparisonView({
           <div>
             <h1>Compare Schools</h1>
             <p className={styles.subtitle}>
-              {selectedSchools.length} school{selectedSchools.length !== 1 ? 's' : ''} side by side
-              — each number anchored against the England average so you can tell at a glance
+              {selectedSchools.length} school{selectedSchools.length !== 1 ? 's' : ''} side by side,
+              each number anchored against the England average so you can tell at a glance
               what&apos;s typical and what stands out.
             </p>
           </div>

nextjs-app/components/EditorialSection.tsx

@@ -47,7 +47,7 @@ export function EditorialSection({
           <p>
             School performance data in England is rich but fragmented. The Department for Education and Ofsted
             publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
-            and demographics — each in its own table, each with its own jargon.
+            and demographics, each in its own table with its own jargon.
           </p>
           <p>
             schoolcompare brings it all into one place. Every school page shows performance against the national

nextjs-app/components/FilterBar.module.css

@@ -4,8 +4,10 @@
  *   hero     a single white pill on the Sand hero panel, carrying the one
  *            coral action the page exists for. No card of its own: the panel
  *            behind it belongs to the page, so the pill reads as the object.
- *   compact  the filter rail above the results — a white card of quiet
- *            controls, brand for what is active, sage for what is selected.
+ *   compact  the results toolbar — search, then a row of pill controls. The
+ *            card around it belongs to HomeView, which pins it under the
+ *            header and puts the List/Map switch beside it, so the compact
+ *            bar draws no card of its own.
  *
  * Colour comes from the token layer only; the disclosure arrows are drawn
  * from currentColor rather than a background image so they follow the theme.
@@ -38,6 +40,31 @@
   margin: 0 auto 1.5rem;
 }
 
+/* One row where it fits: the search takes what the controls leave, and the
+   "More filters" panel breaks onto its own line below both. */
+.filterBar:not(.heroMode) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+}
+
+.filterBar:not(.heroMode) .searchSection {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+
+/* Only phones fold the form away; see the 640px block. */
+.searchSummary {
+  display: none;
+}
+
 /* ── Search ───────────────────────────────────────────────────────── */
 
 .searchSection {
@@ -115,8 +142,13 @@
   box-shadow: none;
 }
 
+.filterBar:not(.heroMode) .omniInput {
+  min-height: 2.75rem;
+}
+
 .searchButton {
   flex: 0 0 auto;
+  min-height: 2.75rem;
   padding: 0.6875rem 1.25rem;
   font-size: var(--step--1);
   border-radius: var(--radius-sm);
@@ -217,34 +249,13 @@
   text-align: center;
 }
 
-/* ── Controls row (radius + phase + advanced toggle) ──────────────── */
+/* ── Controls row (distance, phase, type, more filters) ───────────── */
 
 .controlsRow {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
-  margin-top: 0.875rem;
-  padding-top: 0.875rem;
-  border-top: 1px solid var(--border);
-}
-
-.controlsRow .advancedToggle {
-  margin-left: auto;
-}
-
-.radiusControl {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.radiusLabel {
-  font-size: var(--step--2);
-  font-weight: 600;
-  color: var(--text-secondary);
-  white-space: nowrap;
 }
 
 /* ── Selects ──────────────────────────────────────────────────────── */
@@ -302,11 +313,24 @@
   font-weight: 500;
 }
 
+/* A pill, 44px tall: these are the page's main controls now, not fine print,
+   and a phone needs the full touch target. */
 .controlSelect {
-  padding: 0.4375rem 1.875rem 0.4375rem 0.75rem;
+  min-height: 2.75rem;
+  padding: 0 2.25rem 0 1rem;
+  border-color: var(--border-strong);
+  border-radius: 999px;
   font-size: var(--step--1);
   font-weight: 500;
   white-space: nowrap;
+  /* A select is as wide as its longest option, and a school type can run to
+     "Academy special sponsor led". Cap it; the chosen value truncates. */
+  max-width: 14rem;
+  text-overflow: ellipsis;
+}
+
+.selectShell:has(.controlSelect) .selectChevron {
+  right: 1rem;
 }
 
 .filterSelect:hover:not(:disabled),
@@ -335,12 +359,18 @@
   border-color: var(--brand);
 }
 
+/* Capped so an open panel scrolls inside the pinned toolbar instead of
+   pushing the results off a short screen. The 3px gutter keeps the selects'
+   focus rings clear of the scroll clip. */
 .filters {
+  flex-basis: 100%;
   display: flex;
   gap: 0.625rem;
   flex-wrap: wrap;
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
+  max-height: 50dvh;
+  overflow-y: auto;
+  margin: 0.25rem -3px 0;
+  padding: 0.75rem 3px 3px;
   border-top: 1px solid var(--border);
 }
 
@@ -350,15 +380,16 @@
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.4375rem 0.75rem;
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  min-height: 2.75rem;
+  padding: 0 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--text-secondary);
+  border-radius: 999px;
   font-family: var(--font-ui);
   font-size: var(--step--1);
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1;
-  color: var(--text-secondary);
+  color: var(--text-primary);
   cursor: pointer;
   white-space: nowrap;
   transition: border-color var(--transition), background-color var(--transition),
@@ -387,7 +418,8 @@
 }
 
 .clearButton {
-  padding: 0.4375rem 0.875rem;
+  min-height: 2.75rem;
+  padding: 0 1rem;
   font-size: var(--step--1);
   font-weight: 500;
   border-radius: var(--radius-sm);
@@ -413,31 +445,6 @@
 /* ── Narrow ───────────────────────────────────────────────────────── */
 
 @media (max-width: 768px) {
-  /*
-   * Scoped, like the two rules below it.
-   *
-   * The results filter bar is a card — background, border, shadow — and needs
-   * inner padding. The hero's search is not a card: .heroMode zeroes the
-   * padding, border and background so the search sits directly on the panel.
-   * Unscoped, this rule put 14px back, which indented the search box, the hint
-   * and the location link 14px past the headline they sit under, and cost the
-   * search field 28px of width on a 390px screen.
-   */
-  .filterBar:not(.heroMode) {
-    padding: 0.875rem;
-  }
-
-  /* The hero pill stays a pill at every width — stacking it would lose the
-     one shape the page is built around. Only the results bar stacks. */
-  .filterBar:not(.heroMode) .omniBoxContainer {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .filterBar:not(.heroMode) .searchButton {
-    width: 100%;
-  }
-
   .filters {
     flex-direction: column;
   }
@@ -446,19 +453,6 @@
     min-width: 100%;
   }
 
-  .controlsRow {
-    gap: 0.5rem;
-  }
-
-  .controlsRow .advancedToggle {
-    margin-left: 0;
-  }
-
-  .controlSelect {
-    flex: 1;
-    min-width: 140px;
-  }
-
   .searchHint {
     text-align: left;
   }
@@ -518,3 +512,100 @@
     padding: 0.75rem 0.875rem;
   }
 }
+
+/*
+ * Phones: the results toolbar is pinned, so it is held to two short lines.
+ *
+ * After a search the form folds into a one-line summary ("SW196AR · within
+ * 1 mile  Edit") and the controls become a single row that scrolls sideways.
+ * "More filters" leads the row there: it is the one control that opens
+ * everything else, so it must never be the chip scrolled out of sight.
+ */
+@media (max-width: 640px) {
+  /*
+   * nowrap matters as much as column. The desktop rule wraps, and in a
+   * wrapping flex container each line is as wide as its widest item's content,
+   * not the container: the search summary ("SW196AR · within 1 mile  Edit",
+   * about 410px) stretched the line, and the controls row with it, 40px past a
+   * 402px iPhone 17 screen. Single-line, stretch means the container's width.
+   */
+  .filterBar:not(.heroMode) {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    gap: 0.625rem;
+  }
+
+  .filterBar:not(.heroMode) .searchSection {
+    flex: 0 0 auto;
+  }
+
+  .searchSummary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 2.75rem;
+    padding: 0 0.875rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md);
+    font-family: var(--font-ui);
+    font-size: var(--step--1);
+    color: var(--text-muted);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .summaryText {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .summaryText strong {
+    color: var(--text-primary);
+    font-weight: 700;
+  }
+
+  .summaryEdit {
+    flex-shrink: 0;
+    font-weight: 600;
+    color: var(--brand);
+  }
+
+  .searchFolded {
+    display: none;
+  }
+
+  /* Bleeds to the screen edge so a chip scrolls out from under it, rather than
+     being cut off at the toolbar's padding. The toolbar's inline padding is
+     1rem at this width (HomeView.module.css, .resultsToolbar). The 4px of
+     block padding is room for focus rings, which the scroll clip would
+     otherwise cut off above and below the chips. */
+  .controlsRow {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    margin: -4px -1rem;
+    padding: 4px 1rem;
+    scrollbar-width: none;
+    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
+
+  .controlsAtEnd {
+    mask-image: none;
+  }
+
+  .controlsRow::-webkit-scrollbar {
+    display: none;
+  }
+
+  .controlsRow > * {
+    flex: 0 0 auto;
+  }
+
+  .controlsRow .advancedToggle {
+    order: -1;
+  }
+}

nextjs-app/components/FilterBar.tsx

@@ -128,10 +128,11 @@ export function FilterBar({
   const currentAdmissionsPolicy = searchParams.get("admissions_policy") || "";
   const currentHasSixthForm = searchParams.get("has_sixth_form") || "";
 
-  // Count active dropdown filters (not search/postcode, not phase since it's always visible)
+  // Count the filters behind "More filters". Search, postcode, distance, phase
+  // and school type each have their own control in the toolbar, so they are
+  // visible without opening anything and are not counted here.
   const activeDropdownFilters = [
     currentLA,
-    currentType,
     currentGender,
     currentAdmissionsPolicy,
     currentHasSixthForm,
@@ -144,6 +145,50 @@ export function FilterBar({
     if (hasActiveDropdownFilters) setFiltersOpen(true);
   }, [hasActiveDropdownFilters]);
 
+  /*
+   * On phones the results toolbar is pinned, so it has to stay short. Once a
+   * search has been made the form folds into a one-line summary of it, and
+   * tapping the summary unfolds the form again. Desktop never folds: the
+   * summary is hidden there by CSS and the form is always shown.
+   */
+  const currentQuery = currentPostcode || currentSearch;
+  const canFold = !isHero && !!currentQuery;
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  // A search that arrives any other way (back/forward, "Use my location", a
+  // link) must fold the form and show its own text, or the summary and the
+  // unfolded input would describe two different searches.
+  const [shownQuery, setShownQuery] = useState(currentQuery);
+  if (shownQuery !== currentQuery) {
+    setShownQuery(currentQuery);
+    setSearchOpen(false);
+    setOmniValue(currentQuery);
+  }
+
+  // The phone row's right-edge fade says "more this way"; once there is no
+  // more, it only dims the last chip. Same rule as the school page's section
+  // nav (MOBILE.md, "Right-edge scroll-fade").
+  const controlsRowRef = useRef<HTMLDivElement>(null);
+  const [controlsAtEnd, setControlsAtEnd] = useState(false);
+  const updateControlsAtEnd = useCallback(() => {
+    const el = controlsRowRef.current;
+    if (!el) return;
+    const overflow = el.scrollWidth - el.clientWidth;
+    setControlsAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 2);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("resize", updateControlsAtEnd);
+    return () => window.removeEventListener("resize", updateControlsAtEnd);
+  }, [updateControlsAtEnd]);
+  // Chips come and go with the search (distance, Clear), so re-measure after
+  // every render rather than only on resize.
+  useEffect(updateControlsAtEnd);
+  const openSearch = () => {
+    setSearchOpen(true);
+    // After the form is displayed, or focus() lands on a hidden input.
+    requestAnimationFrame(() => inputRef.current?.focus());
+  };
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (
@@ -186,6 +231,7 @@ export function FilterBar({
     // The search has been made; the suggestions that led to it are spent.
     setHasTyped(false);
     close();
+    setSearchOpen(false);
     if (!omniValue.trim()) {
       updateURL({ search: "", postcode: "", radius: "" });
       return;
@@ -261,11 +307,43 @@ export function FilterBar({
   // only ever additive, so the control's behaviour is untouched.
   const activeIf = (value: string) => (value ? ` ${styles.selectActive}` : "");
 
+  const radiusLabel = `${currentRadius} mile${currentRadius === "1" ? "" : "s"}`;
+
   return (
     <div
       className={`${styles.filterBar} ${isPending ? styles.isLoading : ""} ${isHero ? styles.heroMode : ""}`}
     >
-      <form onSubmit={handleSearchSubmit} className={styles.searchSection}>
+      {canFold && !searchOpen && (
+        <button
+          type="button"
+          className={styles.searchSummary}
+          onClick={openSearch}
+          aria-label={`Edit search: ${currentQuery}${currentPostcode ? `, within ${radiusLabel}` : ""}`}
+        >
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            aria-hidden="true"
+          >
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          <span className={styles.summaryText}>
+            <strong>{currentQuery}</strong>
+            {currentPostcode && <span> · within {radiusLabel}</span>}
+          </span>
+          <span className={styles.summaryEdit} aria-hidden="true">Edit</span>
+        </button>
+      )}
+      <form
+        onSubmit={handleSearchSubmit}
+        className={`${styles.searchSection}${canFold && !searchOpen ? ` ${styles.searchFolded}` : ""}`}
+      >
         <div className={styles.omniBoxContainer}>
           {isHero && (
             <span className={styles.omniIcon} aria-hidden="true">
@@ -292,6 +370,7 @@ export function FilterBar({
             onKeyDown={handleOmniKeyDown}
             onBlur={close}
             placeholder="School name or postcode"
+            aria-label="School name or postcode"
             className={styles.omniInput}
             {...(autosuggest ? {
               role: "combobox",
@@ -323,7 +402,7 @@ export function FilterBar({
         {isHero && (
           <>
             <p className={styles.searchHint}>
-              Search by <strong>school name</strong> — or use your{" "}
+              Search by <strong>school name</strong>, or use your{" "}
               <strong>postcode</strong> for the nearest schools.
             </p>
             {onNearMe && (
@@ -370,24 +449,31 @@ export function FilterBar({
 
       {!isHero && (
         <>
-          <div className={styles.controlsRow}>
+          {/* Every control here is a real <select> or <button>, drawn as a
+              pill. On phones the row scrolls sideways rather than wrapping, so
+              the pinned toolbar stays two lines tall. */}
+          <div
+            ref={controlsRowRef}
+            className={`${styles.controlsRow}${controlsAtEnd ? ` ${styles.controlsAtEnd}` : ""}`}
+            role="group"
+            aria-label="Filters"
+            onScroll={updateControlsAtEnd}
+          >
             {currentPostcode && (
-              <div className={styles.radiusControl}>
-                <label className={styles.radiusLabel}>Within:</label>
-                <SelectShell>
-                  <select
-                    value={currentRadius}
-                    onChange={(e) => updateURL({ radius: e.target.value })}
-                    className={styles.controlSelect}
-                    disabled={isPending}
-                  >
-                    <option value="0.5">0.5 miles</option>
-                    <option value="1">1 mile</option>
-                    <option value="3">3 miles</option>
-                    <option value="5">5 miles</option>
-                  </select>
-                </SelectShell>
-              </div>
+              <SelectShell>
+                <select
+                  value={currentRadius}
+                  onChange={(e) => updateURL({ radius: e.target.value })}
+                  className={`${styles.controlSelect} ${styles.selectActive}`}
+                  aria-label="Distance"
+                  disabled={isPending}
+                >
+                  <option value="0.5">Within 0.5 miles</option>
+                  <option value="1">Within 1 mile</option>
+                  <option value="3">Within 3 miles</option>
+                  <option value="5">Within 5 miles</option>
+                </select>
+              </SelectShell>
             )}
 
             {phaseOptions.length > 0 && (
@@ -396,9 +482,10 @@ export function FilterBar({
                   value={currentPhase}
                   onChange={(e) => handleFilterChange("phase", e.target.value)}
                   className={`${styles.controlSelect}${activeIf(currentPhase)}`}
+                  aria-label="Phase"
                   disabled={isPending}
                 >
-                  <option value="">All Phases</option>
+                  <option value="">Any phase</option>
                   {phaseOptions.map((p) => (
                     <option key={p} value={p.toLowerCase()}>
                       {p}
@@ -408,13 +495,47 @@ export function FilterBar({
               </SelectShell>
             )}
 
+            <SelectShell>
+              <select
+                value={currentType}
+                onChange={(e) =>
+                  handleFilterChange("school_type", e.target.value)
+                }
+                className={`${styles.controlSelect}${activeIf(currentType)}`}
+                aria-label="School type"
+                disabled={isPending}
+              >
+                <option value="">Any school type</option>
+                {typeOptions.map((type) => (
+                  <option key={type} value={type}>
+                    {type}
+                  </option>
+                ))}
+              </select>
+            </SelectShell>
+
             <button
               type="button"
               className={`${styles.advancedToggle}${hasActiveDropdownFilters ? ` ${styles.advancedToggleActive}` : ''}`}
               onClick={() => setFiltersOpen((v) => !v)}
               aria-expanded={filtersOpen}
             >
-              {hasActiveDropdownFilters ? 'Filters' : 'Advanced'}
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                aria-hidden="true"
+              >
+                <path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12" />
+                <circle cx="16" cy="6" r="2" />
+                <circle cx="10" cy="12" r="2" />
+                <circle cx="18" cy="18" r="2" />
+              </svg>
+              More filters
               {hasActiveDropdownFilters
                 ? ` (${activeDropdownFilters.length})`
                 : ""}
@@ -444,6 +565,7 @@ export function FilterBar({
                     handleFilterChange("local_authority", e.target.value)
                   }
                   className={`${styles.filterSelect}${activeIf(currentLA)}`}
+                  aria-label="Local authority"
                   disabled={isPending}
                 >
                   <option value="">All Local Authorities</option>
@@ -455,24 +577,6 @@ export function FilterBar({
                 </select>
               </SelectShell>
 
-              <SelectShell wide>
-                <select
-                  value={currentType}
-                  onChange={(e) =>
-                    handleFilterChange("school_type", e.target.value)
-                  }
-                  className={`${styles.filterSelect}${activeIf(currentType)}`}
-                  disabled={isPending}
-                >
-                  <option value="">All School Types</option>
-                  {typeOptions.map((type) => (
-                    <option key={type} value={type}>
-                      {type}
-                    </option>
-                  ))}
-                </select>
-              </SelectShell>
-
               {isSecondaryMode && (
                 <>
                   {genderOptions.length > 0 && (

nextjs-app/components/HomeView.module.css

@@ -484,42 +484,84 @@
   }
 }
 
-/* View Toggle */
-.viewToggle {
+/* ── Results toolbar ───────────────────────────────────────────────────────
+   Search, filters and the List/Map switch in one card, pinned under the
+   header. It sits above Leaflet's controls (z-index 1000), which scroll up
+   beneath it, and below the comparison toast and the map's own fullscreen
+   overlay. */
+.resultsToolbar {
+  position: sticky;
+  top: calc(64px + 0.5rem);
+  z-index: 1001;
   display: flex;
-  gap: 0.2rem;
-  background: var(--bg-secondary);
-  padding: 0.2rem;
-  border-radius: 6px;
-}
-
-.viewToggleBtn {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.375rem 0.625rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  background: transparent;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  color: var(--text-secondary);
-  transition: all 0.2s ease;
-}
-
-.viewToggleBtn:hover {
-  color: var(--text-primary);
-}
-
-.viewToggleBtn.active {
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding: 0.875rem 1rem;
   background: var(--bg-card);
-  color: var(--brand-strong);
-  box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.08);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
 }
 
-.viewToggleBtn svg {
+.resultsToolbar > :first-child {
+  flex: 1;
+  min-width: 0;
+}
+
+/* The one filled control in the toolbar: which view you are in is the first
+   thing a results page should answer. */
+.viewSwitch {
   flex-shrink: 0;
+  display: flex;
+  gap: 2px;
+  padding: 1px;
+  background: var(--bg-card);
+  border: 1.5px solid var(--brand);
+  border-radius: var(--radius-md);
+}
+
+.viewSwitchBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0 1.125rem;
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius-md) - 3px);
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 700;
+  color: var(--brand-strong);
+  cursor: pointer;
+  transition: background-color var(--transition), color var(--transition);
+}
+
+.viewSwitchBtn:hover {
+  background: var(--brand-bg);
+}
+
+.viewSwitchBtn[aria-pressed='true'] {
+  background: var(--brand);
+  color: var(--brand-on);
+}
+
+/* Phones: a full-bleed band flush under the header, and the switch gives way
+   to the floating button in .mobileDock. */
+@media (max-width: 640px) {
+  .resultsToolbar {
+    top: 56px;
+    margin: -1rem -1rem 1rem;
+    padding: 0.75rem 1rem;
+    border-width: 0 0 1px;
+    border-radius: 0;
+    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
+  }
+
+  .viewSwitch {
+    display: none;
+  }
 }
 
 .results {
@@ -530,135 +572,112 @@
   margin-top: 0;
 }
 
-/* Map View Layout */
+/* ── Map view ──────────────────────────────────────────────────────────────
+   The list on the left, the map filling the rest, in one card that runs from
+   under the pinned toolbar to the bottom of the screen. --toolbar-h is the
+   toolbar's measured height, written by HomeView. */
+/* Where the split starts before any scrolling: header, the page's top
+   padding (globals.css .main), the toolbar and its margin. */
+.homeView {
+  --map-top: calc(64px + 1.25rem + var(--toolbar-h, 76px) + 1.25rem);
+  --map-bottom: 1rem;
+}
+
+@media (max-width: 768px) {
+  .homeView {
+    --map-top: calc(64px + 1rem + var(--toolbar-h, 76px) + 1.25rem);
+  }
+}
+
 .mapViewContainer {
   display: grid;
-  grid-template-columns: 1fr 340px;
-  gap: 1rem;
-  height: calc(100dvh - 280px);
-  min-height: 520px;
-  max-height: 800px;
+  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
+  height: calc(100dvh - var(--map-top) - var(--map-bottom));
+  min-height: 480px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.mapListPane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
+}
+
+.mapListPane .resultsHeader {
+  gap: 0.5rem;
+  padding: 0.875rem 1rem 0.75rem;
+}
+
+.mapListPane .resultsHeader h2 {
+  font-size: var(--step-1);
 }
 
 .mapContainer {
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--border);
   height: 100%;
+  min-height: 0;
 }
 
 .compactList {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  overflow-y: auto;
-  height: 100%;
-  padding-right: 0.375rem;
-}
-
-.compactList::-webkit-scrollbar {
-  width: 6px;
-}
-
-.compactList::-webkit-scrollbar-track {
-  background: var(--bg-secondary);
-  border-radius: 3px;
-}
-
-.compactList::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
-}
-
-.compactList::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-/* Compact School Item */
-.compactItem {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.compactItem:hover {
-  border-color: var(--brand);
-  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.05);
-}
-
-.compactItemContent {
+  gap: 0.625rem;
   flex: 1;
-  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.125rem 1rem 1rem;
+  scrollbar-width: thin;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css),
+     which here is always narrow, whatever the screen. */
+  container: results / inline-size;
 }
 
-.compactItemHeader {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.125rem;
+/* A row in the list beside the map: clicking it picks its pin. */
+.mapRow {
+  position: relative;
+  cursor: pointer;
+  border-radius: 10px;
 }
 
-.compactItemName {
-  font-weight: 600;
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-  text-decoration: none;
-  white-space: nowrap;
+.mapRowSelected > :last-child {
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
+}
+
+/* Visually hidden until focused, then a pill over the row's top edge. */
+.showOnMap {
+  position: absolute;
+  width: 1px;
+  height: 1px;
   overflow: hidden;
-  text-overflow: ellipsis;
+  clip-path: inset(50%);
+  white-space: nowrap;
 }
 
-.compactItemName:hover {
-  color: var(--brand-strong);
-}
-
-.distanceBadge {
-  flex-shrink: 0;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
+.showOnMap:focus-visible {
+  top: -0.5rem;
+  right: 0.75rem;
+  z-index: 1;
+  width: auto;
+  height: auto;
+  padding: 0.375rem 0.75rem;
+  overflow: visible;
+  clip-path: none;
   background: var(--brand);
   color: var(--brand-on);
-  border-radius: 3px;
+  border: 0;
+  border-radius: 999px;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 700;
+  outline: 2px solid var(--text-primary);
+  outline-offset: 2px;
 }
 
-.compactItemMeta {
-  display: flex;
-  gap: 0.375rem;
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.25rem;
-}
-
-.compactItemMeta span:not(:last-child)::after {
-  content: '·';
-  margin-left: 0.375rem;
-  color: var(--text-muted);
-}
-
-.compactItemStats {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-}
-
-.compactStat strong {
-  color: var(--text-primary);
-}
-
-.compactItemActions {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  flex-shrink: 0;
-}
 
 
 .sectionHeader {
@@ -696,6 +715,8 @@
   flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1.25rem;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css). */
+  container: results / inline-size;
 }
 
 /* Staggered fade-in for rows */
@@ -744,11 +765,6 @@
     justify-content: space-between;
   }
 
-  .viewToggle {
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
   /* The sort <select> sizes to its widest option ("Highest Reading, Writing
      & Maths %"), which overflows a phone viewport — beside the view toggle it
      ran off the right edge. Let it flex into the remaining space and shrink;
@@ -758,67 +774,43 @@
     min-width: 0;
   }
 
-  .mapViewContainer {
-    grid-template-columns: 1fr;
-    grid-template-rows: 260px auto;
-    height: auto;
-    gap: 0.75rem;
-  }
-
-  .mapContainer {
-    height: 260px;
-  }
-
-  .compactList {
-    height: auto;
-    max-height: 350px;
-    padding-right: 0;
-  }
-
-  .compactItem {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-
-  .compactItemActions {
-    flex-direction: row;
-  }
-
-  .compactItemActions > * {
-    flex: 1;
-  }
-
   .emptyState {
     padding: 2rem 1.25rem;
   }
 }
 
-/* Highlighted List Item */
-.highlightedItem .compactItem {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 1px var(--brand);
-  background: var(--bg-secondary);
+/* ── Mobile dock ───────────────────────────────────────────────────────────
+   The floating List/Map button (phones only) above the selected pin's card.
+   A column, so the button always clears the card instead of covering it. */
+.mobileDock {
+  display: none;
 }
 
-/* Mobile Bottom Sheet */
-.bottomSheetWrapper {
+.viewFab {
   display: none;
 }
 
 @media (max-width: 768px) {
-  .bottomSheetWrapper {
-    display: block;
+  .mobileDock {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    z-index: 1000;
+    z-index: 1002;
     padding: 1rem;
     pointer-events: none;
   }
 
+  .mobileDock > * {
+    pointer-events: auto;
+  }
+
   .bottomSheet {
+    align-self: stretch;
     position: relative;
     background: var(--bg-card);
     border-radius: 12px;
@@ -827,36 +819,37 @@
     animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
-  .bottomSheet .compactItem {
-    border: none;
-    box-shadow: none;
-    background: transparent;
-    padding: 1rem;
-  }
-
-  .bottomSheet .compactItem:hover {
-    box-shadow: none;
-  }
 
+  /* A 30px circle, drawn by ::before, inside a 44px target (MOBILE.md). */
   .closeSheetBtn {
     position: absolute;
-    top: -12px;
-    right: -12px;
-    width: 30px;
-    height: 30px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 50%;
+    top: -19px;
+    right: -15px;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: none;
+    border: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--text-secondary);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
     z-index: 10;
   }
 
+  .closeSheetBtn::before {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    z-index: -1;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
+  }
+
   @keyframes slideUpSheet {
     from {
       transform: translateY(120%);
@@ -866,21 +859,76 @@
     }
   }
 
-  /* When map view on mobile, expand map and hide list */
+  /* Map only: the pane keeps its heading, the cards give way to the pins and
+     the bottom sheet. */
   .mapViewContainer {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    height: calc(100dvh - 280px);
-    min-height: 400px;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+    border-radius: var(--radius-md);
   }
 
-  .mapContainer {
-    height: 100%;
+  .mapListPane {
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
   }
 
+  .mapListPane .sortSelect,
   .compactList {
     display: none;
   }
+
+  /* The sheet holds one results row, which is the card itself. It is not
+     inside a `results` container, so give it one: a phone-width sheet takes
+     the row's narrow layout. */
+  .bottomSheet {
+    container: results / inline-size;
+  }
+
+  .mapListPane .resultsHeader {
+    padding: 0.625rem 0.875rem;
+  }
+}
+
+/* Above the tab bar, and riding with it when iOS Chrome's URL bar hides
+   (MOBILE.md, check 4). */
+@media (max-width: 640px) {
+  .mobileDock {
+    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
+    padding: 0.75rem;
+    transform: translate3d(0, var(--mobile-bar-offset, 0px), 0);
+  }
+
+  .viewFab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-height: 3rem;
+    padding: 0 1.375rem;
+    background: var(--text-primary);
+    color: var(--bg-primary);
+    border: 0;
+    border-radius: 999px;
+    box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.32);
+    font-family: var(--font-ui);
+    font-size: var(--step--1);
+    font-weight: 700;
+    cursor: pointer;
+  }
+
+  /* Room under the last card so the floating button never sits on it. */
+  .hasViewFab {
+    padding-bottom: 4.5rem;
+  }
+
+  /* The map runs down to the tab bar; the button floats over the map. */
+  .mapViewResults.hasViewFab {
+    padding-bottom: 0;
+  }
+
+  .homeView {
+    --map-top: calc(56px + var(--toolbar-h, 124px) + 1rem);
+    --map-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
+  }
 }
 
 .quickSearches {

nextjs-app/components/HomeView.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { FilterBar } from './FilterBar';
 import { SchoolRow } from './SchoolRow';
@@ -16,7 +16,6 @@ import { HeroIllustration } from './Illustration';
 import { useComparisonContext } from '@/context/ComparisonContext';
 import { fetchSchools, fetchLAaverages, fetchNationalAverages } from '@/lib/api';
 import type { SchoolsResponse, Filters, School } from '@/lib/types';
-import { schoolUrl, buildOfstedListBadge } from '@/lib/utils';
 import { track } from '@/lib/analytics';
 import styles from './HomeView.module.css';
 
@@ -33,6 +32,13 @@ interface HomeViewProps {
   autosuggest?: boolean;
 }
 
+/*
+ * The view a postcode search opens in, on every screen size. The map is on
+ * trial as the default (2026-09-30); results_view_changed shows how often
+ * readers switch away from it. Name searches have no map and always list.
+ */
+const DEFAULT_LOCATION_VIEW: 'list' | 'map' = 'map';
+
 function daysUntil(month: number, day: number): number {
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -135,6 +141,27 @@ function CalendarIcon() {
   );
 }
 
+/* List / Map glyphs for the results view switch and its floating twin. */
+function ListIcon() {
+  return (
+    <svg {...ICON_PROPS} width={18} height={18}>
+      <path d="M9 6h11M9 12h11M9 18h11" />
+      <circle cx="4.5" cy="6" r="1" />
+      <circle cx="4.5" cy="12" r="1" />
+      <circle cx="4.5" cy="18" r="1" />
+    </svg>
+  );
+}
+
+function MapIcon() {
+  return (
+    <svg {...ICON_PROPS} width={18} height={18}>
+      <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
+      <path d="M9 4v14M15 6v14" />
+    </svg>
+  );
+}
+
 interface ValueProp {
   icon: React.ReactNode;
   tintClass: string;
@@ -149,11 +176,12 @@ interface ValueProp {
  * and is backed by the next-deadline bar further down this page.
  *
  * Every claim here must name something the product actually does. Two of the
- * four previously did not: "up to three schools" contradicted MAX_SCHOOLS = 5
- * in context/ComparisonProvider.tsx (and the card further down the page, which
- * correctly said five), and "class sizes" described data the codebase has never
- * held — grep for it and this line was the only hit. Both are corrected below
- * against the real fields, which live in components/school/InclusionSection.tsx.
+ * four previously did not: "up to three schools" contradicted the basket limit
+ * of five (and the card further down the page, which correctly said five), and
+ * "class sizes" described data the codebase has never held — grep for it and
+ * this line was the only hit. Both are corrected below against the real
+ * fields, which live in components/school/InclusionSection.tsx.
+ * The limit is now five per phase: MAX_PER_GROUP in lib/compareLogic.ts.
  */
 const VALUE_PROPS: ValueProp[] = [
   {
@@ -179,13 +207,13 @@ const VALUE_PROPS: ValueProp[] = [
     icon: <BarsIcon />,
     tintClass: styles.propIconCompare,
     title: 'Easy to compare',
-    body: 'Up to five schools side by side, on the measures that matter.',
+    body: 'Up to five primary and five secondary schools side by side, on the measures that matter.',
   },
   {
     icon: <HeartIcon />,
     tintClass: styles.propIconContext,
     title: 'Beyond the numbers',
-    body: 'SEN support, pupil premium and attendance — not just results.',
+    body: 'Not just results: SEN support, pupil premium and attendance too.',
   },
   {
     icon: <CalendarIcon />,
@@ -200,7 +228,13 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   const router = useRouter();
   const pathname = usePathname();
   const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
-  const [resultsView, setResultsView] = useState<'list' | 'map'>('list');
+  /*
+   * The reader's choice, once they make one; until then the default for the
+   * kind of search. Derived rather than seeded into state, because a hero
+   * search reaches the results by client-side navigation: the same instance
+   * gets new props, and a state seeded on the landing page would stay "list".
+   */
+  const [chosenView, setChosenView] = useState<'list' | 'map' | null>(null);
   const [selectedMapSchool, setSelectedMapSchool] = useState<School | null>(null);
   const sortOrder = searchParams.get('sort') || 'default';
   const [allSchools, setAllSchools] = useState<School[]>(initialSchools.schools);
@@ -212,6 +246,10 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   const [mapSchools, setMapSchools] = useState<School[]>([]);
   const [isLoadingMap, setIsLoadingMap] = useState(false);
   const prevSearchParamsRef = useRef(searchParams.toString());
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const resultsRef = useRef<HTMLElement>(null);
+  const mapListRef = useRef<HTMLDivElement>(null);
+
   const mapParamsRef = useRef<string>('');
   const loadMoreController = useRef<AbortController | null>(null);
   // Identity changes even for A → B → A, so an old A response stays stale.
@@ -259,6 +297,18 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
   const isSecondaryView = currentPhase.toLowerCase().includes('secondary')
     || (!currentPhase && secondaryCount > primaryCount);
   const isMixedView = primaryCount > 0 && secondaryCount > 0 && !currentPhase;
+  const resultsView: 'list' | 'map' = chosenView ?? (isLocationSearch ? DEFAULT_LOCATION_VIEW : 'list');
+
+  // The map view fills the screen below the pinned toolbar, whose height
+  // depends on how its controls wrap. Measure it rather than guess.
+  const [toolbarHeight, setToolbarHeight] = useState<number | null>(null);
+  useEffect(() => {
+    const el = toolbarRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(() => setToolbarHeight(Math.round(el.getBoundingClientRect().height)));
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isSearchActive]);
 
   // Reset pagination and map cache when search params change
   useEffect(() => {
@@ -395,7 +445,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     );
   }, [router]);
 
-  const sortedSchools = [...allSchools].sort((a, b) => {
+  const sortSchools = (list: School[]) => [...list].sort((a, b) => {
     if (sortOrder === 'rwm_desc') return (b.rwm_expected_pct ?? -Infinity) - (a.rwm_expected_pct ?? -Infinity);
     if (sortOrder === 'rwm_asc') return (a.rwm_expected_pct ?? Infinity) - (b.rwm_expected_pct ?? Infinity);
     if (sortOrder === 'att8_desc') return (b.attainment_8_score ?? -Infinity) - (a.attainment_8_score ?? -Infinity);
@@ -404,6 +454,14 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     if (sortOrder === 'name_asc') return a.school_name.localeCompare(b.school_name);
     return 0;
   });
+  const sortedSchools = sortSchools(allSchools);
+  // The map gets a stable array (a new one rebuilds every pin and closes the
+  // open card); only the list beside it is sorted.
+  const mapResultSchools = mapSchools.length > 0 ? mapSchools : initialSchools.schools;
+  const mapListSchools = sortSchools(mapResultSchools);
+  const radiusMiles = initialSchools.location_info
+    ? Number((initialSchools.location_info.radius / 1.60934).toFixed(1))
+    : undefined;
 
   // Empty-results sentinel: track when a search returns nothing.
   useEffect(() => {
@@ -448,11 +506,127 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     });
   }, [addSchool, selectedSchools.length]);
 
+  const hasViewSwitch = isLocationSearch && initialSchools.schools.length > 0;
+  const compareUrns = useMemo(() => selectedSchools.map(s => s.urn), [selectedSchools]);
+
+  /*
+   * Below 769px the map view hides its list pane (HomeView.module.css), and
+   * with the map now the default on phones, every postcode search there
+   * would otherwise build up to 500 hidden cards. Decided after mount, so
+   * the server's HTML and the first client render still agree.
+   */
+  const [listPaneShown, setListPaneShown] = useState(true);
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return;
+    const query = window.matchMedia('(min-width: 769px)');
+    const update = () => setListPaneShown(query.matches);
+    update();
+    query.addEventListener('change', update);
+    return () => query.removeEventListener('change', update);
+  }, []);
+  const clearMapSelection = useCallback(() => setSelectedMapSchool(null), []);
+
+  // A pin chosen on the map brings its card into view in the list beside it.
+  useEffect(() => {
+    if (!selectedMapSchool) return;
+    const card = mapListRef.current?.querySelector<HTMLElement>(`[data-urn="${selectedMapSchool.urn}"]`);
+    if (card?.offsetParent) card.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [selectedMapSchool]);
+
+  /*
+   * Switching view from far down the list would otherwise leave the reader
+   * looking at whatever now sits at that scroll offset, usually the footer,
+   * because the map layout is much shorter than a long list. Bring the top of
+   * the results back to just under the pinned toolbar instead.
+   */
+  const changeView = (view: 'list' | 'map', via: 'toolbar' | 'floating') => {
+    if (view === resultsView) return;
+    setChosenView(view);
+    track('results_view_changed', { view, via });
+    requestAnimationFrame(() => {
+      const results = resultsRef.current;
+      const toolbar = toolbarRef.current;
+      if (!results || !toolbar) return;
+      const toolbarBottom = toolbar.getBoundingClientRect().bottom;
+      const resultsTop = results.getBoundingClientRect().top;
+      if (resultsTop < toolbarBottom) {
+        window.scrollTo({ top: window.scrollY + resultsTop - toolbarBottom - 12 });
+      }
+    });
+  };
+
+  const isMapView = initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch;
+
+  // One school as a results row: the list view, the list beside the map and
+  // the phone's bottom sheet all draw the same thing.
+  const renderRow = (school: School) => (
+    school.attainment_8_score != null ? (
+      <SecondarySchoolRow
+        key={school.urn}
+        school={school}
+        isLocationSearch={isLocationSearch}
+        onAddToCompare={addSchoolFromSearch}
+        onRemoveFromCompare={removeSchool}
+        isInCompare={compareUrns.includes(school.urn)}
+        laAvgAttainment8={school.local_authority ? laAverages[school.local_authority] ?? null : null}
+      />
+    ) : (
+      <SchoolRow
+        key={school.urn}
+        school={school}
+        isLocationSearch={isLocationSearch}
+        onAddToCompare={addSchoolFromSearch}
+        onRemoveFromCompare={removeSchool}
+        isInCompare={compareUrns.includes(school.urn)}
+        nationalAvgRwm={nationalAvgRwm}
+      />
+    )
+  );
+
+  // The count and the sort. Above the list in list view; at the top of the
+  // list pane, beside the map, in map view.
+  const resultsHeader = (
+    <div className={styles.resultsHeader}>
+      <h2 aria-live="polite" aria-atomic="true">
+        {isLocationSearch && initialSchools.location_info
+          ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
+          : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found`
+        }
+      </h2>
+      <div className={styles.resultsHeaderActions}>
+        <select
+          value={sortOrder}
+          onChange={e => {
+            const params = new URLSearchParams(searchParams);
+            if (e.target.value === 'default') {
+              params.delete('sort');
+            } else {
+              params.set('sort', e.target.value);
+            }
+            router.push(`${pathname}?${params.toString()}`);
+          }}
+          className={styles.sortSelect}
+        >
+          <option value="default">Sort: Relevance</option>
+          {(!isSecondaryView || isMixedView) && <option value="rwm_desc">Highest Reading, Writing &amp; Maths %</option>}
+          {(!isSecondaryView || isMixedView) && <option value="rwm_asc">Lowest Reading, Writing &amp; Maths %</option>}
+          {(isSecondaryView || isMixedView) && <option value="att8_desc">Highest Attainment 8</option>}
+          {(isSecondaryView || isMixedView) && <option value="att8_asc">Lowest Attainment 8</option>}
+          {isLocationSearch && <option value="distance">Nearest first</option>}
+          <option value="name_asc">Name A–Z</option>
+        </select>
+      </div>
+    </div>
+  );
+
   return (
     /* The landing arrangement owns its own vertical rhythm (one gap, set in
        CSS); the search arrangement is a filter bar directly above its results
        and wants none of it. */
-    <div className={isSearchActive ? styles.homeView : `${styles.homeView} ${styles.landing}`}>
+    <div
+      className={isSearchActive ? styles.homeView : `${styles.homeView} ${styles.landing}`}
+      style={toolbarHeight ? { '--toolbar-h': `${toolbarHeight}px` } as React.CSSProperties : undefined}
+    >
       {/* Hero: a Sand panel with the proposition and the search on the left and
           the brand landscape bleeding to the panel edge on the right. The
           search lives inside the panel here and above the results elsewhere,
@@ -478,8 +652,8 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
                   every line above the fold costs. */}
               <span className={styles.heroDescriptionFull}>
                 {' '}Key Stage 2 SATs, GCSE results, Ofsted grades, progress scores
-                and admissions data{coverageLabel && <> for <strong>{coverageLabel} schools</strong></>} — side by
-                side, in one place.
+                and admissions data{coverageLabel && <> for <strong>{coverageLabel} schools</strong></>}, side by
+                side in one place.
               </span>
             </p>
 
@@ -522,15 +696,41 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
         </ul>
         </div>
       ) : (
-        <FilterBar
-          filters={filters}
-          isHero={false}
-          resultFilters={initialSchools.result_filters}
-          onNearMe={handleNearMe}
-          geoState={geoState}
-          geoError={geoError}
-          autosuggest={autosuggest}
-        />
+        /* Pinned under the header, so the search, the filters and the List/Map
+           switch stay in reach however far down the results a reader is. */
+        <div ref={toolbarRef} className={styles.resultsToolbar}>
+          <FilterBar
+            filters={filters}
+            isHero={false}
+            resultFilters={initialSchools.result_filters}
+            onNearMe={handleNearMe}
+            geoState={geoState}
+            geoError={geoError}
+            autosuggest={autosuggest}
+          />
+          {hasViewSwitch && (
+            <div className={styles.viewSwitch} role="group" aria-label="Results view">
+              <button
+                type="button"
+                className={styles.viewSwitchBtn}
+                aria-pressed={resultsView === 'list'}
+                onClick={() => changeView('list', 'toolbar')}
+              >
+                <ListIcon />
+                List
+              </button>
+              <button
+                type="button"
+                className={styles.viewSwitchBtn}
+                aria-pressed={resultsView === 'map'}
+                onClick={() => changeView('map', 'toolbar')}
+              >
+                <MapIcon />
+                Map
+              </button>
+            </div>
+          )}
+        </div>
       )}
 
       {/* Next admissions deadline — one bar, not four cards. */}
@@ -582,7 +782,10 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           nothing to list — an empty <section> is still a flex child, so it was
           contributing a full section gap of blank space above the footer. */}
       {(isSearchActive || initialSchools.schools.length > 0) && (
-      <section className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''}`}>
+      <section
+        ref={resultsRef}
+        className={`${styles.results} ${resultsView === 'map' && isLocationSearch ? styles.mapViewResults : ''} ${hasViewSwitch ? styles.hasViewFab : ''}`}
+      >
         {!hasSearch && initialSchools.schools.length > 0 && (
           <div className={styles.sectionHeader}>
             <h2>Featured Schools</h2>
@@ -592,71 +795,9 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
           </div>
         )}
 
-        {hasSearch && (
-          <div className={styles.resultsHeader}>
-            <h2 aria-live="polite" aria-atomic="true">
-              {isLocationSearch && initialSchools.location_info
-                ? `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} within ${(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of ${initialSchools.location_info.postcode}`
-                : `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''} found`
-              }
-            </h2>
-            <div className={styles.resultsHeaderActions}>
-              {isLocationSearch && initialSchools.schools.length > 0 && (
-                <div className={styles.viewToggle}>
-                  <button
-                    className={`${styles.viewToggleBtn} ${resultsView === 'list' ? styles.active : ''}`}
-                    onClick={() => setResultsView('list')}
-                  >
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
-                      <line x1="8" y1="6" x2="21" y2="6"/>
-                      <line x1="8" y1="12" x2="21" y2="12"/>
-                      <line x1="8" y1="18" x2="21" y2="18"/>
-                      <line x1="3" y1="6" x2="3.01" y2="6"/>
-                      <line x1="3" y1="12" x2="3.01" y2="12"/>
-                      <line x1="3" y1="18" x2="3.01" y2="18"/>
-                    </svg>
-                    List
-                  </button>
-                  <button
-                    className={`${styles.viewToggleBtn} ${resultsView === 'map' ? styles.active : ''}`}
-                    onClick={() => setResultsView('map')}
-                  >
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
-                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
-                      <circle cx="12" cy="10" r="3"/>
-                    </svg>
-                    Map
-                  </button>
-                </div>
-              )}
-              {resultsView === 'list' && (
-                <select
-                  value={sortOrder}
-                  onChange={e => {
-                    const params = new URLSearchParams(searchParams);
-                    if (e.target.value === 'default') {
-                      params.delete('sort');
-                    } else {
-                      params.set('sort', e.target.value);
-                    }
-                    router.push(`${pathname}?${params.toString()}`);
-                  }}
-                  className={styles.sortSelect}
-                >
-                  <option value="default">Sort: Relevance</option>
-                  {(!isSecondaryView || isMixedView) && <option value="rwm_desc">Highest Reading, Writing &amp; Maths %</option>}
-                  {(!isSecondaryView || isMixedView) && <option value="rwm_asc">Lowest Reading, Writing &amp; Maths %</option>}
-                  {(isSecondaryView || isMixedView) && <option value="att8_desc">Highest Attainment 8</option>}
-                  {(isSecondaryView || isMixedView) && <option value="att8_asc">Lowest Attainment 8</option>}
-                  {isLocationSearch && <option value="distance">Nearest first</option>}
-                  <option value="name_asc">Name A–Z</option>
-                </select>
-              )}
-            </div>
-          </div>
-        )}
+        {hasSearch && !isMapView && resultsHeader}
 
-        {isSearchActive && (
+        {isSearchActive && !isMapView && (
           <div className={styles.activeFilters}>
             {searchParams.get('search') && <span className={styles.filterChip}>Search: {searchParams.get('search')}<a href="/" className={styles.chipRemove} onClick={e => { e.preventDefault(); }}>×</a></span>}
             {searchParams.get('local_authority') && <span className={styles.filterChip}>{searchParams.get('local_authority')}</span>}
@@ -675,77 +816,62 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
               },
             }}
           />
-        ) : initialSchools.schools.length > 0 && resultsView === 'map' && isLocationSearch ? (
-          /* Map View Layout */
+        ) : isMapView ? (
+          /* Map View Layout: the list beside the map, as one card. */
           <div className={styles.mapViewContainer}>
+            <div className={styles.mapListPane}>
+              {resultsHeader}
+              <div ref={mapListRef} className={styles.compactList}>
+                {/* The list view's own rows, so both views show the same thing.
+                    Clicking a row (not its links or buttons) picks its pin. */}
+                {listPaneShown && mapListSchools.map((school) => (
+                  <div
+                    key={school.urn}
+                    data-urn={school.urn}
+                    className={`${styles.mapRow} ${selectedMapSchool?.urn === school.urn ? styles.mapRowSelected : ''}`}
+                    onClick={(e) => {
+                      if ((e.target as HTMLElement).closest('a, button')) return;
+                      setSelectedMapSchool(school);
+                    }}
+                  >
+                    {/* The keyboard's way to pick the pin: hidden until it has
+                        focus, since a pointer just clicks the row. The row
+                        itself cannot be the button, as it holds links and
+                        buttons of its own. */}
+                    <button
+                      type="button"
+                      className={styles.showOnMap}
+                      aria-pressed={selectedMapSchool?.urn === school.urn}
+                      onClick={() => setSelectedMapSchool(school)}
+                    >
+                      Show {school.school_name} on the map
+                    </button>
+                    {renderRow(school)}
+                  </div>
+                ))}
+              </div>
+            </div>
             <div className={styles.mapContainer}>
               <SchoolMap
-                schools={isLoadingMap ? initialSchools.schools : mapSchools}
+                schools={mapResultSchools}
                 center={initialSchools.location_info?.coordinates}
                 referencePoint={initialSchools.location_info?.coordinates}
+                radiusMiles={radiusMiles}
+                selectedUrn={selectedMapSchool?.urn ?? null}
                 onMarkerClick={setSelectedMapSchool}
+                onDeselect={clearMapSelection}
+                onAddToCompare={addSchoolFromSearch}
+                compareUrns={compareUrns}
                 nationalAvgRwm={nationalAvgRwm}
                 laAverages={laAverages}
               />
             </div>
-            <div className={styles.compactList}>
-              {(isLoadingMap ? initialSchools.schools : mapSchools).map((school) => (
-                <div
-                  key={school.urn}
-                  className={`${styles.listItemWrapper} ${selectedMapSchool?.urn === school.urn ? styles.highlightedItem : ''}`}
-                >
-                  <CompactSchoolItem
-                    school={school}
-                    onAddToCompare={addSchoolFromSearch}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                  />
-                </div>
-              ))}
-            </div>
-
-            {/* Mobile Bottom Sheet for Selected Map Pin */}
-            {selectedMapSchool && (
-              <div className={styles.bottomSheetWrapper}>
-                <div className={styles.bottomSheet}>
-                  <button className={styles.closeSheetBtn} onClick={() => setSelectedMapSchool(null)}>×</button>
-                  <CompactSchoolItem
-                    school={selectedMapSchool}
-                    onAddToCompare={addSchoolFromSearch}
-                    isInCompare={selectedSchools.some(s => s.urn === selectedMapSchool.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                  />
-                </div>
-              </div>
-            )}
           </div>
         ) : (
           /* List View Layout */
           <>
             <div className={styles.schoolList}>
-              {sortedSchools.map((school) => (
-                school.attainment_8_score != null ? (
-                  <SecondarySchoolRow
-                    key={school.urn}
-                    school={school}
-                    isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchoolFromSearch}
-                    onRemoveFromCompare={removeSchool}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    laAvgAttainment8={school.local_authority ? laAverages[school.local_authority] ?? null : null}
-                  />
-                ) : (
-                  <SchoolRow
-                    key={school.urn}
-                    school={school}
-                    isLocationSearch={isLocationSearch}
-                    onAddToCompare={addSchoolFromSearch}
-                    onRemoveFromCompare={removeSchool}
-                    isInCompare={selectedSchools.some(s => s.urn === school.urn)}
-                    nationalAvgRwm={nationalAvgRwm}
-                  />
-                )
-              ))}
+              {sortedSchools.map(renderRow)}
             </div>
 
             {(hasMore || allSchools.length < initialSchools.total) && (
@@ -768,105 +894,34 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
         )}
       </section>
       )}
-    </div>
-  );
-}
 
-/* Compact School Item for Map View */
-interface CompactSchoolItemProps {
-  school: School;
-  onAddToCompare: (school: School) => void;
-  isInCompare: boolean;
-  nationalAvgRwm?: number | null;
-}
-
-function CompactSchoolItem({ school, onAddToCompare, isInCompare, nationalAvgRwm }: CompactSchoolItemProps) {
-  const ofstedBadge = buildOfstedListBadge(school);
-  const isSecondary = school.attainment_8_score != null;
-
-  // vs-national delta for primary schools
-  const rwmDelta =
-    !isSecondary && school.rwm_expected_pct != null && nationalAvgRwm != null
-      ? Math.round(school.rwm_expected_pct - nationalAvgRwm)
-      : null;
-
-  const deltaStyle: React.CSSProperties =
-    rwmDelta == null
-      ? {}
-      : rwmDelta >= 2
-      ? { fontSize: '0.7rem', color: 'var(--status-above)', fontWeight: 600 }
-      : rwmDelta <= -2
-      ? { fontSize: '0.7rem', color: 'var(--brand)', fontWeight: 600 }
-      : { fontSize: '0.7rem', color: 'var(--text-muted)' };
-
-  return (
-    <div className={styles.compactItem}>
-      <div className={styles.compactItemContent}>
-        <div className={styles.compactItemHeader}>
-          <a href={schoolUrl(school.urn, school.school_name)} className={styles.compactItemName}>
-            {school.school_name}
-          </a>
-          {school.distance !== undefined && school.distance !== null && (
-            <span className={styles.distanceBadge}>
-              {school.distance.toFixed(1)} mi
-            </span>
-          )}
-        </div>
-        {/* Ofsted badge */}
-        <div style={{ marginBottom: '0.25rem' }}>
-          <span
-            style={{
-              display: 'inline-block',
-              padding: '0.0625rem 0.375rem',
-              fontSize: '0.625rem',
-              fontWeight: 600,
-              borderRadius: '3px',
-              whiteSpace: 'nowrap',
-              ...(ofstedBadge.cssClass === 'ofsted1' ? { background: 'var(--status-above-bg)', color: 'var(--status-above)' } :
-                  ofstedBadge.cssClass === 'ofsted2' ? { background: 'var(--status-above-bg)', color: 'var(--status-above)' } :
-                  ofstedBadge.cssClass === 'ofsted3' ? { background: 'var(--status-below-bg)', color: 'var(--status-below)' } :
-                  ofstedBadge.cssClass === 'ofsted4' ? { background: 'var(--status-below)', color: 'var(--text-inverse)' } :
-                  ofstedBadge.cssClass === 'ofstedRc' ? { background: 'var(--phase-secondary-text)', color: 'var(--text-inverse)' } :
-                  ofstedBadge.cssClass === 'ofstedPending' ? { background: 'var(--bg-secondary)', color: 'var(--text-muted)' } :
-                  { background: 'var(--bg-secondary)', color: 'var(--text-muted)' }),
-            }}
+      {/* Phones and small tablets: the selected pin's card, and on phones the
+          floating List/Map button, stacked above the bottom tab bar. The
+          toolbar's switch is hidden at phone width, where this replaces it. */}
+      {hasViewSwitch && (
+        <div className={styles.mobileDock}>
+          <button
+            type="button"
+            className={styles.viewFab}
+            aria-label={resultsView === 'list' ? 'Show map' : 'Show list'}
+            onClick={() => changeView(resultsView === 'list' ? 'map' : 'list', 'floating')}
           >
-            {ofstedBadge.label}
-          </span>
-        </div>
-        {/* Headline metric + delta */}
-        <div className={styles.compactItemStats}>
-          <span className={styles.compactStat}>
-            <strong>
-              {isSecondary
-                ? (school.attainment_8_score != null ? school.attainment_8_score.toFixed(1) : '-')
-                : (school.rwm_expected_pct != null ? `${school.rwm_expected_pct}%` : '-')}
-            </strong>
-            {' '}
-            {isSecondary ? 'Att 8' : 'RWM'}
-          </span>
-          {rwmDelta != null && (
-            <span style={deltaStyle}>
-              {rwmDelta >= 2
-                ? `+${rwmDelta} pts vs national`
-                : rwmDelta <= -2
-                ? `${rwmDelta} pts vs national`
-                : '≈ national avg'}
-            </span>
+            {resultsView === 'list' ? <><MapIcon />Map</> : <><ListIcon />List</>}
+          </button>
+          {resultsView === 'map' && selectedMapSchool && (
+            <div className={styles.bottomSheet}>
+              <button
+                className={styles.closeSheetBtn}
+                onClick={() => setSelectedMapSchool(null)}
+                aria-label="Close"
+              >
+                ×
+              </button>
+              {renderRow(selectedMapSchool)}
+            </div>
           )}
         </div>
-      </div>
-      <div className={styles.compactItemActions}>
-        <button
-          className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
-          onClick={() => onAddToCompare(school)}
-        >
-          {isInCompare ? '✓ Comparing' : '+ Compare'}
-        </button>
-        <a href={schoolUrl(school.urn, school.school_name)} className="btn btn-tertiary btn-sm">
-          View
-        </a>
-      </div>
+      )}
     </div>
   );
 }

nextjs-app/components/HowItWorksSection.tsx

@@ -47,7 +47,7 @@ export function HowItWorksSection() {
       <div className={styles.sectionHead}>
         <p className={styles.sectionKicker}>Every school page</p>
         <h2 className={styles.sectionHeading}>What you&apos;ll see on every school</h2>
-        <p className={styles.sectionAside}>Primary or secondary — the page adapts to the phase</p>
+        <p className={styles.sectionAside}>The page adapts to primary or secondary</p>
       </div>
       <div className={styles.hiwGrid}>
         {/* Card 1 — Performance */}
@@ -123,7 +123,7 @@ export function HowItWorksSection() {
           <div className={styles.hiwCardBody}>
             <div className={styles.hiwStep}>Judgement</div>
             <div className={styles.hiwTitle}>Ofsted at a glance</div>
-            <p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area and the inspection date — and, for schools not yet reinspected, the older overall grade they still carry.</p>
+            <p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area, the inspection date and, for schools not yet reinspected, the older overall grade they still carry.</p>
           </div>
         </div>
 
@@ -143,7 +143,7 @@ export function HowItWorksSection() {
                   <span className={styles.compareRowVal}>{b}</span>
                 </div>
               ))}
-              <div className={styles.compareFoot}>+ compare up to 5 schools</div>
+              <div className={styles.compareFoot}>+ up to 5 primary &amp; 5 secondary</div>
             </div>
           </div>
           <div className={styles.hiwCardBody}>
@@ -152,7 +152,7 @@ export function HowItWorksSection() {
             {/* One verb for one feature. The site previously called this
                 "compare" in the nav, "shortlist" in the footer and "pin" here,
                 which reads as three separate things it does not have. */}
-            <p className={styles.hiwDesc}>Compare up to five schools and every metric aligns in the same columns — works for primary and secondary alike.</p>
+            <p className={styles.hiwDesc}>Compare primary and secondary school performance side by side: KS2 SATs results for primary schools, GCSE Attainment 8 for secondary schools, and Ofsted ratings for both, lined up in one table so you can see where each school is stronger.</p>
           </div>
         </div>
       </div>

nextjs-app/components/LeafletMapInner.tsx

@@ -5,213 +5,283 @@
 
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import type { School } from '@/lib/types';
-import { schoolUrl } from '@/lib/utils';
-
-// Fix for default marker icons in Next.js
-delete (L.Icon.Default.prototype as any)._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
-  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
-  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
-});
+import { schoolUrl, isSpecialSchool, buildOfstedListBadge, listRwmValue } from '@/lib/utils';
 
 interface LeafletMapInnerProps {
   schools: School[];
   center: [number, number];
   zoom: number;
   referencePoint?: [number, number];
+  /** Search radius in miles. Drawn as a dashed circle the view fits to. */
+  radiusMiles?: number;
+  /** The school whose pin is highlighted and, on wide screens, whose card is open. */
+  selectedUrn?: number | null;
   onMarkerClick?: (school: School) => void;
+  /** The open card was closed from the map itself (its × or a click elsewhere). */
+  onDeselect?: () => void;
+  onAddToCompare?: (school: School) => void;
+  compareUrns?: number[];
   nationalAvgRwm?: number | null;
   laAverages?: Record<string, number | null>;
 }
 
+const METRES_PER_MILE = 1609.344;
+
+/*
+ * Wide screens show the selected school as a card on the map. Narrow ones do
+ * not: HomeView shows the same card as a bottom sheet there, and a popup on a
+ * 390px map would cover most of it.
+ */
+const CARD_ON_MAP_QUERY = '(min-width: 769px)';
+
 // ---------------------------------------------------------------------------
-// Popup helpers (must work in plain JS string templates — no React / CSS Modules)
+// Card helpers (must work in plain JS string templates — no React / CSS Modules)
+// Class names are global and styled in SchoolMap.module.css.
 // ---------------------------------------------------------------------------
 
 function escapeHtml(s: string): string {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 
-interface PopupBadge {
-  label: string;
-  style: string;
+function pinIcon(selected: boolean): L.DivIcon {
+  const size = selected ? 32 : 22;
+  return L.divIcon({
+    className: selected ? 'sc-pin sc-pin--selected' : 'sc-pin',
+    html: '',
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+  });
 }
 
-function buildPopupBadge(school: School): PopupBadge {
-  // A report card wins over any carried-forward legacy grade — its presence is
-  // signalled by ofsted_rc_date (the list has no full report_card object, and
-  // ofsted_framework is the raw event grouping, never "ReportCard").
-  if (school.ofsted_rc_date) {
-    const rcYear = new Date(school.ofsted_rc_date).getFullYear();
-    return { label: `Report Card · ${rcYear}`, style: 'background:var(--phase-secondary-text);color:var(--text-inverse)' };
-  }
-  const year = school.ofsted_date ? new Date(school.ofsted_date).getFullYear() : null;
-  const yearStr = year ? ` · ${year}` : '';
-  if (school.ofsted_grade) {
-    const labels: Record<number, string> = { 1: 'Outstanding', 2: 'Good', 3: 'Req. Improvement', 4: 'Inadequate' };
-    const colours: Record<number, string> = {
-      1: 'background:var(--status-above-bg);color:var(--status-above)',
-      2: 'background:var(--status-above-bg);color:var(--status-above)',
-      3: 'background:var(--status-below-bg);color:var(--status-below)',
-      4: 'background:var(--status-below);color:var(--text-inverse)',
-    };
-    return { label: `${labels[school.ofsted_grade]}${yearStr}`, style: colours[school.ofsted_grade] };
-  }
-  return { label: 'Not yet inspected', style: 'background:var(--bg-secondary);color:var(--text-muted)' };
+interface CardContext {
+  inCompare: boolean;
+  nationalAvgRwm?: number | null;
+  laAverages?: Record<string, number | null>;
 }
 
-export default function LeafletMapInner({ schools, center, zoom, referencePoint, onMarkerClick, nationalAvgRwm, laAverages }: LeafletMapInnerProps) {
+/** The headline figure and its comparison, the same rule as the list rows. */
+function metricHtml(school: School, { nationalAvgRwm, laAverages }: CardContext): string {
+  const special = isSpecialSchool(school);
+  if (school.attainment_8_score != null) {
+    const score = school.attainment_8_score;
+    const laAvg = school.local_authority ? (laAverages?.[school.local_authority] ?? null) : null;
+    let delta = '';
+    if (!special && laAvg != null) {
+      const diff = Math.round((score - laAvg) * 10) / 10;
+      // Att8 runs 0–90 in 0.1 steps; ±0.5 is meaningful, where RWM needs ±2.
+      const cls = diff >= 0.5 ? 'sc-up' : diff <= -0.5 ? 'sc-down' : '';
+      delta = ` <span class="${cls}">${diff >= 0 ? '+' : ''}${diff} vs LA</span>`;
+    }
+    return `<strong>${score.toFixed(1)}</strong> Att 8${delta}`;
+  }
+  const rwm = listRwmValue(school);
+  if (rwm != null) {
+    let delta = '';
+    if (!special && nationalAvgRwm != null) {
+      const diff = Math.round(rwm - nationalAvgRwm);
+      const cls = diff >= 2 ? 'sc-up' : diff <= -2 ? 'sc-down' : '';
+      const text = diff >= 2 ? `+${diff} pts` : diff <= -2 ? `${diff} pts` : '≈ national';
+      delta = ` <span class="${cls}">${text}</span>`;
+    }
+    return `<strong>${rwm}%</strong> RWM${delta}`;
+  }
+  return '';
+}
+
+function cardHtml(school: School, ctx: CardContext): string {
+  const badge = buildOfstedListBadge(school);
+  const href = schoolUrl(school.urn, school.school_name);
+  const distance = school.distance != null
+    ? `<span class="sc-dist">${school.distance.toFixed(1)} mi</span>` : '';
+  const type = school.school_type
+    ? `<span class="sc-tag">${escapeHtml(school.school_type)}</span>` : '';
+  const metric = metricHtml(school, ctx);
+  const pupils = school.total_pupils != null
+    ? `${metric ? ' · ' : ''}${school.total_pupils.toLocaleString('en-GB')} pupils` : '';
+  return `<div class="sc-card">
+  <div class="sc-card-head"><a class="sc-card-name" href="${href}">${escapeHtml(school.school_name)}</a>${distance}</div>
+  <div class="sc-card-tags"><span class="sc-ofsted sc-${badge.cssClass}">${escapeHtml(badge.label)}</span>${type}</div>
+  ${metric || pupils ? `<div class="sc-card-metric">${metric}${pupils}</div>` : ''}
+  <div class="sc-card-actions">
+    <a class="btn btn-tertiary btn-sm" href="${href}">View</a>
+    <button type="button" class="btn ${ctx.inCompare ? 'btn-active' : 'btn-secondary'} btn-sm" data-compare>${ctx.inCompare ? '✓ Comparing' : '+ Compare'}</button>
+  </div>
+</div>`;
+}
+
+export default function LeafletMapInner({
+  schools, center, zoom, referencePoint, radiusMiles, selectedUrn,
+  onMarkerClick, onDeselect, onAddToCompare, compareUrns,
+  nationalAvgRwm, laAverages,
+}: LeafletMapInnerProps) {
   const mapRef = useRef<L.Map | null>(null);
   const mapContainerRef = useRef<HTMLDivElement>(null);
-  const refMarkerRef = useRef<L.Marker | null>(null);
+  const markersRef = useRef<Map<number, L.Marker>>(new Map());
+  const overlayRef = useRef<L.LayerGroup | null>(null);
+  const popupRef = useRef<L.Popup | null>(null);
+  const selectedRef = useRef<number | null>(null);
+  // Bumped whenever the pins are rebuilt, for any reason, so the selection
+  // effect puts the card back on the new pin rather than only when the
+  // selection or the school list changes.
+  const [pinsVersion, setPinsVersion] = useState(0);
 
+  // The popup is plain HTML outside React, so its handlers read the latest
+  // props through a ref rather than closing over the render they were made in.
+  const latest = useRef({ onMarkerClick, onDeselect, onAddToCompare, compareUrns, nationalAvgRwm, laAverages });
+  latest.current = { onMarkerClick, onDeselect, onAddToCompare, compareUrns, nationalAvgRwm, laAverages };
+
+  const cardHtmlFor = (school: School) => cardHtml(school, {
+    inCompare: !!latest.current.compareUrns?.includes(school.urn),
+    nationalAvgRwm: latest.current.nationalAvgRwm,
+    laAverages: latest.current.laAverages,
+  });
+
+  // Map, tiles and controls: once.
   useEffect(() => {
-    if (!mapContainerRef.current) return;
+    if (!mapContainerRef.current || mapRef.current) return;
+    const map = L.map(mapContainerRef.current, { zoomControl: false }).setView(center, zoom);
+    L.control.zoom({ position: 'topright' }).addTo(map);
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      maxZoom: 19,
+    }).addTo(map);
+    overlayRef.current = L.layerGroup().addTo(map);
+    mapRef.current = map;
+    // center/zoom only seed the first view; later changes go through the
+    // markers effect, which fits the view to the results.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    // Initialize map
-    if (!mapRef.current) {
-      mapRef.current = L.map(mapContainerRef.current).setView(center, zoom);
+  // Search location, radius and school pins.
+  useEffect(() => {
+    const map = mapRef.current;
+    const overlay = overlayRef.current;
+    if (!map || !overlay) return;
 
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-        maxZoom: 19,
-      }).addTo(mapRef.current);
-    }
+    // Forget the open card before closing it, so its close handler does not
+    // read this rebuild as the reader deselecting; the selection effect below
+    // reopens it on the new pin.
+    popupRef.current = null;
+    map.closePopup();
+    overlay.clearLayers();
+    markersRef.current.clear();
 
-    // Clear existing school markers (not the reference pin)
-    mapRef.current.eachLayer((layer) => {
-      if (layer instanceof L.Marker && layer !== refMarkerRef.current) {
-        mapRef.current!.removeLayer(layer);
+    let radiusBounds: L.LatLngBounds | null = null;
+    if (referencePoint) {
+      if (radiusMiles) {
+        const circle = L.circle(referencePoint, {
+          radius: radiusMiles * METRES_PER_MILE,
+          className: 'sc-radius',
+          interactive: false,
+        }).addTo(overlay);
+        radiusBounds = circle.getBounds();
+        const label = radiusMiles === 1 ? '1 mile' : `${radiusMiles} miles`;
+        L.marker([radiusBounds.getNorth(), referencePoint[1]], {
+          icon: L.divIcon({ className: 'sc-radius-label', html: label, iconSize: undefined }),
+          interactive: false,
+          keyboard: false,
+        }).addTo(overlay);
       }
-    });
-
-    // Add reference pin (search location)
-    if (refMarkerRef.current) {
-      refMarkerRef.current.remove();
-      refMarkerRef.current = null;
-    }
-    if (referencePoint && mapRef.current) {
-      const refIcon = L.divIcon({
-        html: `<div style="
-          width: 20px; height: 20px;
-          background: var(--brand);
-          border: 3px solid white;
-          border-radius: 50%;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.35);
-        "></div>`,
-        iconSize: [20, 20],
-        iconAnchor: [10, 10],
-        className: '',
-      });
-      refMarkerRef.current = L.marker(referencePoint, { icon: refIcon, zIndexOffset: 1000 })
-        .addTo(mapRef.current)
-        .bindPopup('<strong>Search location</strong>');
+      L.marker(referencePoint, {
+        icon: L.divIcon({ className: 'sc-home', html: '', iconSize: [16, 16], iconAnchor: [8, 8] }),
+        zIndexOffset: 500,
+        title: 'Search location',
+        alt: 'Search location',
+      }).addTo(overlay);
     }
 
-    // Add markers for schools
-    schools.forEach((school) => {
-      if (school.latitude && school.longitude && mapRef.current) {
-        const marker = L.marker([school.latitude, school.longitude]).addTo(mapRef.current);
+    for (const school of schools) {
+      if (!school.latitude || !school.longitude) continue;
+      const selected = school.urn === selectedRef.current;
+      const marker = L.marker([school.latitude, school.longitude], {
+        icon: pinIcon(selected),
+        zIndexOffset: selected ? 1000 : 0,
+        title: school.school_name,
+        alt: school.school_name,
+        riseOnHover: true,
+      }).addTo(overlay);
+      marker.on('click', () => latest.current.onMarkerClick?.(school));
+      markersRef.current.set(school.urn, marker);
+    }
 
-        // Create popup content
-        const badge = buildPopupBadge(school);
-        const isSecondary = school.attainment_8_score != null;
-
-        // Phase label
-        const rawPhase = (school.phase ?? '').toLowerCase();
-        const phaseLabel =
-          rawPhase.includes('secondary') ? 'Secondary' :
-          rawPhase === 'all-through' ? 'All-through' :
-          rawPhase.includes('primary') ? 'Primary' :
-          isSecondary ? 'Secondary' : 'Primary';
-
-        // Distance string
-        const distanceStr =
-          school.distance != null ? ` · ${school.distance.toFixed(1)} mi` : '';
-
-        // Headline metric
-        let metricHtml = '';
-        if (isSecondary) {
-          const score = school.attainment_8_score!;
-          const laAvg = school.local_authority ? (laAverages?.[school.local_authority] ?? null) : null;
-          let deltaLine = '';
-          if (laAvg != null) {
-            const diff = Math.round((score - laAvg) * 10) / 10;
-            const sign = diff >= 0 ? '+' : '';
-            // Att8 scores range 0–90 in 0.1 increments; ±0.5 is meaningful here
-            // vs primary RWM % where ±2 pts is the threshold
-            const colour = diff >= 0.5 ? 'var(--status-above)' : diff <= -0.5 ? 'var(--brand)' : 'var(--text-muted)';
-            const laName = escapeHtml(school.local_authority ?? 'LA');
-            deltaLine = `<div style="font-size:11px;font-weight:600;color:${colour}">${sign}${diff} vs ${laName} avg</div>`;
-          }
-          metricHtml = `<div style="margin-bottom:4px">
-  <span style="font-size:20px;font-weight:700;color:var(--text-primary);font-family:Georgia,serif">${score.toFixed(1)}</span>
-  <span style="font-size:11px;color:var(--text-muted);margin-left:4px">Attainment 8</span>
-  ${deltaLine}
-</div>`;
-        } else if (school.rwm_expected_pct != null) {
-          const rwm = school.rwm_expected_pct;
-          let deltaLine = '';
-          if (nationalAvgRwm != null) {
-            const diff = Math.round(rwm - nationalAvgRwm);
-            const colour = diff >= 2 ? 'var(--status-above)' : diff <= -2 ? 'var(--brand)' : 'var(--text-muted)';
-            const text =
-              diff >= 2 ? `+${diff} pts vs national` :
-              diff <= -2 ? `${diff} pts vs national` :
-              '≈ national avg';
-            deltaLine = `<div style="font-size:11px;font-weight:600;color:${colour}">${text}</div>`;
-          }
-          metricHtml = `<div style="margin-bottom:4px">
-  <span style="font-size:20px;font-weight:700;color:var(--text-primary);font-family:Georgia,serif">${rwm}%</span>
-  <span style="font-size:11px;color:var(--text-muted);margin-left:4px">Reading, Writing &amp; Maths</span>
-  ${deltaLine}
-</div>`;
-        }
-
-        const slug = schoolUrl(school.urn, school.school_name);
-
-        const popupContent = `<div style="font-family:system-ui,sans-serif;min-width:240px;max-width:280px;padding:0">
-  <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px">
-    <strong style="font-size:13px;color:var(--text-primary);line-height:1.3">${escapeHtml(school.school_name)}</strong>
-    <span style="font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;${badge.style}">${badge.label}</span>
-  </div>
-  <div style="font-size:11px;color:var(--text-muted);margin-bottom:8px">
-    ${phaseLabel}${school.local_authority ? ` · ${escapeHtml(school.local_authority)}` : ''}${distanceStr}
-  </div>
-  ${metricHtml}
-  <a href="${slug}" style="display:block;text-align:center;padding:6px;background:var(--status-above);color:var(--text-inverse);border-radius:5px;text-decoration:none;font-size:12px;font-weight:600;margin-top:8px">View Details →</a>
-</div>`;
-
-        marker.bindPopup(popupContent);
-
-        if (onMarkerClick) {
-          marker.on('click', () => onMarkerClick(school));
-        }
-      }
-    });
-
-    // Update map view
-    if (schools.length > 1) {
-      const bounds = L.latLngBounds(
-        schools
-          .filter(s => s.latitude && s.longitude)
-          .map(s => [s.latitude!, s.longitude!] as [number, number])
-      );
-      mapRef.current.fitBounds(bounds, { padding: [50, 50] });
+    // Fit the search radius when there is one: every result lies inside it,
+    // and it keeps the view the same shape whatever the pins happen to be.
+    if (radiusBounds) {
+      map.fitBounds(radiusBounds, { padding: [16, 16] });
+    } else if (schools.length > 1) {
+      const points = schools
+        .filter(s => s.latitude && s.longitude)
+        .map(s => [s.latitude!, s.longitude!] as [number, number]);
+      if (points.length) map.fitBounds(L.latLngBounds(points), { padding: [50, 50] });
     } else {
-      mapRef.current.setView(center, zoom);
+      map.setView(center, zoom);
+    }
+    setPinsVersion(v => v + 1);
+  }, [schools, center, zoom, referencePoint, radiusMiles]);
+
+  // Selection: restyle the pin, and on wide screens open its card.
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    const previous = selectedRef.current;
+    selectedRef.current = selectedUrn ?? null;
+
+    if (previous != null && previous !== selectedUrn) {
+      const old = markersRef.current.get(previous);
+      old?.setIcon(pinIcon(false));
+      old?.setZIndexOffset(0);
     }
 
-    // Cleanup
-    return () => {
-      // Don't destroy map on every update, just clean markers
-    };
-  }, [schools, center, zoom, referencePoint, onMarkerClick, nationalAvgRwm, laAverages]);
+    const marker = selectedUrn != null ? markersRef.current.get(selectedUrn) : undefined;
+    const school = selectedUrn != null ? schools.find(s => s.urn === selectedUrn) : undefined;
+    if (!marker || !school) {
+      popupRef.current = null;
+      map.closePopup();
+      return;
+    }
+    marker.setIcon(pinIcon(true));
+    marker.setZIndexOffset(1000);
+
+    if (!window.matchMedia(CARD_ON_MAP_QUERY).matches) {
+      if (!map.getBounds().contains(marker.getLatLng())) map.panTo(marker.getLatLng());
+      return;
+    }
+
+    const popup = L.popup({
+      className: 'sc-popup',
+      maxWidth: 300,
+      minWidth: 260,
+      offset: [0, -12],
+      autoPanPadding: [24, 24],
+    }).setLatLng(marker.getLatLng()).setContent(cardHtmlFor(school));
+    popup.on('remove', () => {
+      // Closed from the map, not replaced by another selection.
+      if (popupRef.current === popup) {
+        popupRef.current = null;
+        latest.current.onDeselect?.();
+      }
+    });
+    popupRef.current = popup;
+    popup.openOn(map);
+    // One listener on the card's shell: it outlives the content swaps below.
+    popup.getElement()?.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('[data-compare]')) latest.current.onAddToCompare?.(school);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedUrn, pinsVersion]);
+
+  // The open card follows the compare basket and the averages as they arrive.
+  useEffect(() => {
+    const popup = popupRef.current;
+    if (!popup || selectedUrn == null) return;
+    const school = schools.find(s => s.urn === selectedUrn);
+    if (school) popup.setContent(cardHtmlFor(school));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [compareUrns, nationalAvgRwm, laAverages]);
 
   // Cleanup map on unmount
   useEffect(() => {

nextjs-app/components/PerformanceChart.tsx

@@ -114,7 +114,7 @@ export function PerformanceChart({
     const delta = latest.rwm_expected_pct! - prev.rwm_expected_pct!;
     const arrow = delta > 1 ? '↑' : delta < -1 ? '↓' : '→';
     if (best.year === latest.year) {
-      return `${arrow} Best year on record — ${latestPct}% met the expected standard in Reading, Writing & Maths`;
+      return `${arrow} Best year on record: ${latestPct}% met the expected standard in Reading, Writing & Maths`;
     }
     return `${arrow} Reading, Writing & Maths peaked at ${bestPct}% (${formatAcademicYear(best.year)}), currently ${latestPct}%`;
   })();
@@ -451,15 +451,15 @@ export function PerformanceChart({
       {hasGap && (
         <p className={styles.covidNote}>
           {isSecondary
-            ? "School-level GCSE figures for 2019/20 and 2020/21 weren't published (COVID grading) where the line breaks — the England average is shown where available."
-            : "No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn't publish school-level figures for 2021/22 — the England average is shown for those years where available."}
+            ? "School-level GCSE figures for 2019/20 and 2020/21 weren't published (COVID grading). Where the line breaks, the England average is shown if available."
+            : "No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn't publish school-level figures for 2021/22. Where available, the England average is shown for those years."}
         </p>
       )}
 
       {/* Desktop-only hint about toggling progress in the legend */}
       {!isSecondary && (
         <p className={styles.chartHint}>
-          Progress scores (Reading, Writing, Maths) are hidden by default — click them in the legend to show.
+          Progress scores (Reading, Writing, Maths) are hidden by default. Click them in the legend to show them.
         </p>
       )}
     </div>

nextjs-app/components/RankingsView.tsx

@@ -95,6 +95,9 @@ export function RankingsView({
   const handleAddToCompare = (ranking: RankingEntry) => {
     addSchool({
       ...ranking,
+      // Ranking rows carry no phase, but the tab they're ranked under is
+      // theirs. The compare basket's per-phase limit needs it.
+      phase: isPrimary ? 'Primary' : 'Secondary',
       address: null,
       postcode: null,
       latitude: null,
@@ -119,7 +122,7 @@ export function RankingsView({
         <h1>School Rankings</h1>
         <p className={styles.subtitle}>
           Schools ranked by {metricLabel.toLowerCase()}
-          {!selectedArea && rankings.length > 0 && <span className={styles.limitNote}> — showing top {rankings.length}</span>}
+          {!selectedArea && rankings.length > 0 && <span className={styles.limitNote}> (showing top {rankings.length})</span>}
         </p>
       </header>
 
@@ -145,7 +148,7 @@ export function RankingsView({
       {isProgressScore && (
         <p className={styles.progressHint}>
           Progress scores: 0 = national average. Positive = above average.
-          {isPrimary && ' KS2 progress isn’t published for 2023/24 or 2024/25 (there’s no key stage 1 baseline) — pick an earlier year to rank by it.'}
+          {isPrimary && ' KS2 progress isn’t published for 2023/24 or 2024/25 because there’s no key stage 1 baseline. Pick an earlier year to rank by it.'}
         </p>
       )}
 

nextjs-app/components/SchoolMap.module.css

@@ -74,3 +74,173 @@
   font-size: 0.9375rem;
   margin: 0;
 }
+
+/* ── Results map skin ──────────────────────────────────────────────────────
+   Leaflet renders these outside React, so they are global class names, scoped
+   under .mapWrapper to keep this module pure. Pins are brand teal, the chosen
+   one coral; the search location is ink, ringed. */
+
+/* Muted tiles so the pins, not the streets, carry the colour. */
+.mapWrapper :global(.leaflet-tile-pane) {
+  filter: saturate(0.45);
+}
+
+/* The fullscreen button owns the top-right corner; zoom stacks under it. */
+.mapWrapper :global(.leaflet-top.leaflet-right) {
+  top: 2.75rem;
+}
+
+.mapWrapper :global(.sc-pin) {
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--brand);
+  border: 2.5px solid var(--bg-card);
+  box-shadow: 0 2px 5px rgba(var(--shadow-rgb), 0.35);
+  transition: transform 0.12s ease;
+}
+
+.mapWrapper :global(.sc-pin:hover) {
+  transform: scale(1.15);
+}
+
+.mapWrapper :global(.sc-pin--selected) {
+  background: var(--action);
+  border-width: 3px;
+}
+
+.mapWrapper :global(.sc-pin:focus-visible) {
+  outline: 3px solid var(--text-primary);
+  outline-offset: 2px;
+}
+
+.mapWrapper :global(.sc-home) {
+  border-radius: 50%;
+  background: var(--text-primary);
+  box-shadow: 0 0 0 6px rgba(var(--shadow-rgb), 0.18);
+}
+
+.mapWrapper :global(.sc-radius) {
+  stroke: var(--brand);
+  stroke-width: 2px;
+  stroke-dasharray: 6 6;
+  fill: var(--brand);
+  fill-opacity: 0.05;
+}
+
+.mapWrapper :global(.sc-radius-label) {
+  width: auto !important;
+  height: auto !important;
+  transform-origin: center;
+  translate: -50% -50%;
+  padding: 0.125rem 0.625rem;
+  background: var(--bg-card);
+  border: 1px solid var(--brand);
+  border-radius: 999px;
+  font-family: var(--font-ui);
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--brand-strong);
+  white-space: nowrap;
+}
+
+/* The selected school's card, drawn as a card rather than a speech bubble. */
+.mapWrapper :global(.sc-popup .leaflet-popup-content-wrapper) {
+  border-radius: 14px;
+  box-shadow: 0 10px 28px rgba(var(--shadow-rgb), 0.22);
+}
+
+.mapWrapper :global(.sc-popup .leaflet-popup-content) {
+  margin: 0.875rem 1rem;
+  font-family: var(--font-ui);
+}
+
+.mapWrapper :global(.sc-card) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.mapWrapper :global(.sc-card-head) {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding-right: 1rem; /* clear of the popup's × */
+}
+
+.mapWrapper :global(.sc-card-name) {
+  font-family: var(--font-display);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.mapWrapper :global(.sc-card-name:hover) {
+  text-decoration: underline;
+}
+
+.mapWrapper :global(.sc-dist) {
+  flex-shrink: 0;
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  background: var(--brand);
+  color: var(--brand-on);
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.mapWrapper :global(.sc-card-tags) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.mapWrapper :global(.sc-ofsted),
+.mapWrapper :global(.sc-tag) {
+  padding: 0.125rem 0.4375rem;
+  border-radius: 4px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.mapWrapper :global(.sc-tag) {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.mapWrapper :global(.sc-ofsted1),
+.mapWrapper :global(.sc-ofsted2) { background: var(--status-above-bg); color: var(--status-above); }
+.mapWrapper :global(.sc-ofsted3) { background: var(--status-below-bg); color: var(--status-below); }
+.mapWrapper :global(.sc-ofsted4) { background: var(--status-below); color: var(--text-inverse); }
+.mapWrapper :global(.sc-ofstedRc) { background: var(--phase-secondary-text); color: var(--text-inverse); }
+.mapWrapper :global(.sc-ofstedInspected) { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
+.mapWrapper :global(.sc-ofstedPending) { background: var(--border); color: var(--text-muted); }
+
+.mapWrapper :global(.sc-card-metric) {
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+.mapWrapper :global(.sc-card-metric strong) {
+  font-size: 0.9375rem;
+  color: var(--text-primary);
+}
+
+.mapWrapper :global(.sc-up) { color: var(--status-above); font-weight: 600; }
+.mapWrapper :global(.sc-down) { color: var(--status-below); font-weight: 600; }
+
+.mapWrapper :global(.sc-card-actions) {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.mapWrapper :global(.sc-card-actions > *) {
+  flex: 1;
+  justify-content: center;
+  text-align: center;
+}

nextjs-app/components/SchoolMap.tsx

@@ -6,7 +6,7 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { useRef, useState, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import type { School } from '@/lib/types';
 import styles from './SchoolMap.module.css';
 
@@ -26,12 +26,17 @@ interface SchoolMapProps {
   center?: [number, number];
   zoom?: number;
   referencePoint?: [number, number];
+  radiusMiles?: number;
+  selectedUrn?: number | null;
   onMarkerClick?: (school: School) => void;
+  onDeselect?: () => void;
+  onAddToCompare?: (school: School) => void;
+  compareUrns?: number[];
   nationalAvgRwm?: number | null;
   laAverages?: Record<string, number | null>;
 }
 
-export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarkerClick, nationalAvgRwm, laAverages }: SchoolMapProps) {
+export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarkerClick, nationalAvgRwm, laAverages, ...selection }: SchoolMapProps) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [nativeFullscreen, setNativeFullscreen] = useState(false);
   // iOS Safari has no Element.requestFullscreen — fall back to a fixed-position
@@ -80,8 +85,9 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
     }
   }, [fallbackFullscreen]);
 
-  // Calculate center if not provided
-  const mapCenter: [number, number] = center || (() => {
+  // Calculate center if not provided. Memoised: a fresh array on every render
+  // would make the map refit and rebuild every pin each time.
+  const mapCenter = useMemo<[number, number]>(() => center || (() => {
     if (schools.length === 0) return [51.5074, -0.1278];
     if (schools.length === 1 && schools[0].latitude && schools[0].longitude) {
       return [schools[0].latitude, schools[0].longitude];
@@ -90,8 +96,8 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
     if (validSchools.length === 0) return [51.5074, -0.1278];
     const avgLat = validSchools.reduce((sum, s) => sum + (s.latitude || 0), 0) / validSchools.length;
     const avgLng = validSchools.reduce((sum, s) => sum + (s.longitude || 0), 0) / validSchools.length;
-    return [avgLat, avgLng];
-  })();
+    return [avgLat, avgLng] as [number, number];
+  })(), [center, schools]);
 
   return (
     <div ref={wrapperRef} className={`${styles.mapWrapper} ${isFullscreen ? styles.fullscreen : ''} ${fallbackFullscreen ? styles.fsFallback : ''}`}>
@@ -123,6 +129,7 @@ export function SchoolMap({ schools, center, zoom = 13, referencePoint, onMarker
         onMarkerClick={onMarkerClick}
         nationalAvgRwm={nationalAvgRwm}
         laAverages={laAverages}
+        {...selection}
       />
     </div>
   );

nextjs-app/components/SchoolRow.module.css

@@ -220,7 +220,16 @@
 .vsNationalFlat { font-size: 0.7rem; color: var(--text-muted); }
 
 /* ── Mobile ──────────────────────────────────────────── */
-@media (max-width: 640px) {
+/*
+ * Narrow: content full width, actions in a row beneath. Keyed to the list the
+ * row sits in, not the screen, because the same row fills the phone list and
+ * the ~430px list beside the map on desktop. HomeView makes its lists a
+ * `results` container; outside one, the row keeps its wide layout, which is
+ * why rowContainerGuard.test.ts fails if anything else renders this row.
+ * 608px is exact: below 769px the page pads 1rem each side, so a 640px screen
+ * gives a 608px list, matching the old max-width: 640px media query.
+ */
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;

nextjs-app/components/SchoolRow.tsx

@@ -9,7 +9,7 @@
  */
 
 import type { School } from '@/lib/types';
-import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange, isProposedToClose, isSpecialSchool } from '@/lib/utils';
+import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange, isProposedToClose, isSpecialSchool, listRwmValue } from '@/lib/utils';
 import styles from './SchoolRow.module.css';
 
 interface SchoolRowProps {
@@ -38,18 +38,10 @@ export function SchoolRow({
     school.religious_denomination &&
     school.religious_denomination !== 'Does not apply';
 
-  // A placeholder all-zero row (every subject 0 — a special/suppressed
-  // signature, matching SchoolDetailView's ks2Placeholder) isn't a real score,
-  // so its figure is hidden. A genuine 0% combined (some pupils met individual
-  // subjects but not all three) is NOT all-zero and stays shown.
-  const rwmPlaceholder =
-    school.rwm_expected_pct === 0 &&
-    (school.reading_expected_pct ?? 0) === 0 &&
-    (school.writing_expected_pct ?? 0) === 0 &&
-    (school.maths_expected_pct ?? 0) === 0;
   // The school's OWN figure and its year-over-year trend are same-school
-  // measures — shown whenever there's a real value, special schools included.
-  const showRwmValue = school.rwm_expected_pct != null && !rwmPlaceholder;
+  // measures — shown whenever there's a real value (not the all-zero
+  // placeholder, see listRwmValue), special schools included.
+  const showRwmValue = listRwmValue(school) != null;
   // The vs-England delta is a mainstream benchmark: additionally dropped for
   // special schools / PRUs / AP, whose pupils aren't measured against it fairly.
   const rwmDelta =

nextjs-app/components/SchoolSearchModal.tsx

@@ -11,6 +11,7 @@ import { useComparison } from "@/hooks/useComparison";
 import { debounce } from "@/lib/utils";
 import { fetchSchools } from "@/lib/api";
 import { track } from "@/lib/analytics";
+import { MAX_PER_GROUP } from "@/lib/compareLogic";
 import type { School } from "@/lib/types";
 import styles from "./SchoolSearchModal.module.css";
 
@@ -20,7 +21,7 @@ interface SchoolSearchModalProps {
 }
 
 export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
-  const { addSchool, selectedSchools, canAddMore } = useComparison();
+  const { addSchool, selectedSchools, fullGroupFor } = useComparison();
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<School[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -73,6 +74,19 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
     return selectedSchools.some((s) => s.urn === urn);
   };
 
+  // Limits apply per phase group, so a full primary list must not stop a
+  // parent adding secondary schools.
+  const primaryFull = fullGroupFor({ phase: "Primary" }) !== null;
+  const secondaryFull = fullGroupFor({ phase: "Secondary" }) !== null;
+  const limitWarning =
+    primaryFull && secondaryFull
+      ? `You're comparing ${MAX_PER_GROUP} primary and ${MAX_PER_GROUP} secondary schools, the most at once. Remove a school to add another.`
+      : primaryFull
+        ? `You're comparing ${MAX_PER_GROUP} primary schools, the most at once. You can still add secondary schools.`
+        : secondaryFull
+          ? `You're comparing ${MAX_PER_GROUP} secondary schools, the most at once. You can still add primary schools.`
+          : null;
+
   const handleClose = () => {
     setSearchTerm("");
     setResults([]);
@@ -83,10 +97,8 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
   return (
     <Modal isOpen={isOpen} onClose={handleClose} title="Add School to Comparison">
       <div className={styles.modalContent}>
-        {!canAddMore && (
-          <div className={styles.warning}>
-            Maximum 5 schools can be compared. Remove a school to add another.
-          </div>
+        {limitWarning && (
+          <div className={styles.warning}>{limitWarning}</div>
         )}
 
         {/* Search Input */}
@@ -112,6 +124,7 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
 
           {results.map((school) => {
             const alreadySelected = isSchoolSelected(school.urn);
+            const fullGroup = alreadySelected ? null : fullGroupFor(school);
 
             return (
               <div key={school.urn} className={styles.resultItem}>
@@ -126,12 +139,16 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 </div>
                 <button
                   onClick={() => handleAddSchool(school)}
-                  disabled={alreadySelected || !canAddMore}
+                  disabled={alreadySelected || fullGroup !== null}
                   className={`${styles.resultButton} ${
                     alreadySelected ? "btn btn-active" : "btn btn-secondary"
                   }`}
                 >
-                  {alreadySelected ? "✓ Comparing" : "+ Compare"}
+                  {alreadySelected
+                    ? "✓ Comparing"
+                    : fullGroup
+                      ? `${fullGroup === "primary" ? "Primary" : "Secondary"} full`
+                      : "+ Compare"}
                 </button>
               </div>
             );

nextjs-app/components/SecondarySchoolRow.module.css

@@ -232,7 +232,16 @@
 }
 
 /* ── Mobile ──────────────────────────────────────────── */
-@media (max-width: 640px) {
+/*
+ * Narrow: content full width, actions in a row beneath. Keyed to the list the
+ * row sits in, not the screen, because the same row fills the phone list and
+ * the ~430px list beside the map on desktop. HomeView makes its lists a
+ * `results` container; outside one, the row keeps its wide layout, which is
+ * why rowContainerGuard.test.ts fails if anything else renders this row.
+ * 608px is exact: below 769px the page pads 1rem each side, so a 640px screen
+ * gives a 608px list, matching the old max-width: 640px media query.
+ */
+@container results (max-width: 608px) {
   .row {
     flex-wrap: wrap;
     padding: 0.875rem;

nextjs-app/components/SpecialSchoolNote.tsx

@@ -33,14 +33,14 @@ export function SpecialSchoolNote({ school }: { school: { school_type?: string |
         <>
           <strong>This is a special school.</strong> Its pupils have special educational needs and
           work towards individual targets. They sit the same national assessments, but very few
-          reach the mainstream &ldquo;expected standard&rdquo; these measures report — so a
+          reach the mainstream &ldquo;expected standard&rdquo; these measures report, so a
           comparison with the England average isn&rsquo;t a meaningful guide to the school.
         </>
       )}
       {kind === 'pru' && (
         <>
           <strong>This is a pupil referral unit.</strong> It teaches pupils educated outside a
-          mainstream school — for example after exclusion, or for medical or behavioural reasons.
+          mainstream school, for example after exclusion or for medical or behavioural reasons.
           The mainstream &ldquo;expected standard&rdquo; and the England-average comparison
           aren&rsquo;t a meaningful guide to the school.
         </>

nextjs-app/components/compare/CompareAcademics.tsx

@@ -26,7 +26,7 @@ interface StripSpec {
 
 const TIER1_PRIMARY: StripSpec[] = [
   {
-    label: 'Reading, writing & maths — expected standard',
+    label: 'Reading, writing & maths: expected standard',
     metric: 'rwm_expected_pct',
     anchorKey: 'rwm_expected_pct',
     tip: '% of Year 6 pupils reaching the expected standard in reading, writing and maths.',
@@ -49,18 +49,18 @@ const TIER1_PRIMARY: StripSpec[] = [
 
 const TIER2_PRIMARY: StripSpec[] = [
   {
-    label: 'Grammar, punctuation & spelling — expected standard',
+    label: 'Grammar, punctuation & spelling: expected standard',
     metric: 'gps_expected_pct',
     anchorKey: 'gps_expected_pct',
   },
   {
-    label: 'Science — expected standard (teacher-assessed)',
+    label: 'Science: expected standard (teacher-assessed)',
     metric: 'science_expected_pct',
     anchorKey: 'science_expected_pct',
-    tip: 'Teacher-assessed, like writing — there has been no KS2 science test since 2009, so comparisons are indicative.',
+    tip: 'Teacher-assessed, like writing. There has been no KS2 science test since 2009, so comparisons are indicative.',
   },
   {
-    label: 'Average scaled score — reading',
+    label: 'Average scaled score: reading',
     metric: 'reading_avg_score',
     anchorKey: 'reading_avg_score',
     min: 100,
@@ -68,7 +68,7 @@ const TIER2_PRIMARY: StripSpec[] = [
     unit: '',
   },
   {
-    label: 'Average scaled score — maths',
+    label: 'Average scaled score: maths',
     metric: 'maths_avg_score',
     anchorKey: 'maths_avg_score',
     min: 100,
@@ -76,7 +76,7 @@ const TIER2_PRIMARY: StripSpec[] = [
     unit: '',
   },
   {
-    label: 'Average scaled score — grammar, punctuation & spelling',
+    label: 'Average scaled score: grammar, punctuation & spelling',
     metric: 'gps_avg_score',
     anchorKey: 'gps_avg_score',
     min: 100,
@@ -193,7 +193,7 @@ export function CompareAcademics({
     return (
       <Section
         title="How students do academically"
-        how="GCSE results (latest year). Attainment 8 averages performance across eight subjects; Progress 8 shows how much progress students make compared with similar students nationally — the wording is DfE's own banding."
+        how="GCSE results (latest year). Attainment 8 averages performance across eight subjects; Progress 8 shows how much progress students make compared with similar students nationally. The wording is DfE's own banding."
       >
         <SectionGrid schools={schools}>
           <RowLabel tip="Average Attainment 8 score across eight GCSE subjects.">Attainment 8</RowLabel>
@@ -230,7 +230,7 @@ export function CompareAcademics({
                 </Chip>
               ) : p8NotPublished[i] ? (
                 <span className={s.small}>
-                  Not published — this GCSE year group sat no KS2 tests (COVID), so DfE has no
+                  Not published: this GCSE year group sat no KS2 tests (COVID), so DfE has no
                   baseline to measure progress from
                 </span>
               ) : (
@@ -308,7 +308,7 @@ export function CompareAcademics({
   return (
     <Section
       title="How children do academically"
-      how="Results from national tests and teacher assessments at the end of Year 6 — writing is assessed by teachers, not tested. Each line runs from 0–100%; the grey tick marks the England average, so dots to its right are above average."
+      how="Results from national tests and teacher assessments at the end of Year 6 (writing is assessed by teachers, not tested). Each line runs from 0–100%; the grey tick marks the England average, so dots to its right are above average."
     >
       <div className={s.card}>
         {TIER1_PRIMARY.map((spec) => (
@@ -324,7 +324,7 @@ export function CompareAcademics({
         ))}
 
         <details className={styles.moreMeasures}>
-          <summary>More measures — grammar, punctuation &amp; spelling, science, average scaled scores</summary>
+          <summary>More measures: grammar, punctuation &amp; spelling, science, average scaled scores</summary>
           {TIER2_PRIMARY.map((spec) => (
             <Strip
               key={spec.metric}

nextjs-app/components/compare/CompareAdmissions.tsx

@@ -49,17 +49,17 @@ export function CompareAdmissions({
       how={
         <>
           From the most recent admissions round ({entryLabel}). &quot;First choice&quot; means
-          families who ranked the school top of their application form — officially a &quot;first
-          preference&quot;. Schools never see your ranking: places are decided only by the
+          families who ranked the school top of their application form (officially a &quot;first
+          preference&quot;). Schools never see your ranking: places are decided only by the
           school&apos;s admission criteria, so listing a school lower down never hurts your chances.
-          These are National Offer Day offers — waiting lists and appeals can change the final
+          These are National Offer Day offers. Waiting lists and appeals can change the final
           intake.
         </>
       }
     >
       <SectionGrid schools={schools}>
         <Measure
-          tip="How many application forms named the school at any preference rank — not the number of families competing head-to-head for a place."
+          tip="How many application forms named the school at any preference rank. This is not the number of families competing head-to-head for a place."
           label="Interest in the school"
         >
         {schools.map((school, i) => {
@@ -126,7 +126,7 @@ export function CompareAdmissions({
               // Selective schools: the entrance test decides, whatever the
               // offer percentage looks like — never the distance template.
               text =
-                'Entry is by entrance test — the school is selective; distance and preference rank don’t decide places.';
+                'Entry is by entrance test. The school is selective, so distance and preference rank don’t decide places.';
             } else if (summary.firstPrefPct >= 100) {
               text = `Every family who put ${school.school_name} first got a place.`;
             } else if (summary.firstPrefPct >= 90) {
@@ -134,9 +134,9 @@ export function CompareAdmissions({
             } else if (a?.oversubscribed) {
               text = isSecondary
                 ? faith
-                  ? 'More first-choice applications than places — check the school’s admission criteria (faith-based criteria may apply).'
-                  : 'More first-choice applications than places — check the school’s admission criteria (catchment or distance often decides, but criteria vary).'
-                : 'More first-choice applications than places — check the school’s admission criteria (for most non-faith primaries, distance decides).';
+                  ? 'More first-choice applications than places. Check the school’s admission criteria (faith-based criteria may apply).'
+                  : 'More first-choice applications than places. Check the school’s admission criteria (catchment or distance often decides, but criteria vary).'
+                : 'More first-choice applications than places. Check the school’s admission criteria (for most non-faith primaries, distance decides).';
             } else {
               text = `${summary.firstPrefPct}% of first-choice families received an offer.`;
             }

nextjs-app/components/compare/CompareAtAGlance.tsx

@@ -70,7 +70,7 @@ export function CompareAtAGlance({
     : benchmarks?.primary?.median_pupils;
 
   return (
-    <Section title="At a glance" how="The short version — each row below is explained in its own section further down.">
+    <Section title="At a glance" how="The short version. Each row below is explained in its own section further down.">
       <SectionGrid schools={schools}>
         <Measure label="Latest Ofsted inspection">
         {schools.map((school, i) => {

nextjs-app/components/compare/CompareCommunity.tsx

@@ -56,12 +56,12 @@ export function CompareCommunity({
       how={
         <>
           The school&apos;s community, from the latest school census. State-school averages are
-          computed from our dataset and shown for context — there&apos;s no &ldquo;right&rdquo;
+          computed from our dataset and shown for context. There&apos;s no &ldquo;right&rdquo;
           number here.
           {anyAllThrough && (
             <>
               {' '}
-              For all-through schools these figures cover the whole school, all ages — not just
+              For all-through schools these figures cover the whole school and all ages, not just
               the {isSecondary ? 'secondary' : 'primary'} phase.
             </>
           )}
@@ -79,7 +79,7 @@ export function CompareCommunity({
           if (pupils != null && capacity != null && capacity > 0) {
             capNote =
               pupils >= capacity
-                ? `${capacity.toLocaleString('en-GB')} places — at or above capacity`
+                ? `${capacity.toLocaleString('en-GB')} places (at or above capacity)`
                 : `of ${capacity.toLocaleString('en-GB')} places (${Math.round((pupils / capacity) * 100)}% full)`;
           }
           return (
@@ -111,7 +111,7 @@ export function CompareCommunity({
         </Measure>
 
         <Measure
-          tip="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. Benchmark computed across state schools in our dataset."
+          tip="% of pupils eligible for free school meals, a common measure of how many pupils come from lower-income families. Benchmark computed across state schools in our dataset."
           label="Free school meals"
         >
         {schools.map((school, i) => {
@@ -145,7 +145,7 @@ export function CompareCommunity({
         </Measure>
 
         <Measure
-          tip="% of pupils receiving SEN support (not including EHC plans). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign. State-school average computed from our dataset."
+          tip="% of pupils receiving SEN support (not including EHC plans). A high figure can mean the school hosts specialist provision, which is often a strength rather than a warning sign. State-school average computed from our dataset."
           label="Extra learning support (SEN)"
         >
         {schools.map((school, i) => {

nextjs-app/components/compare/CompareOfsted.tsx

@@ -47,7 +47,7 @@ function ResultCell({ display }: { display: OfstedDisplay }) {
     return (
       <>
         <strong style={{ fontSize: '0.9rem' }}>Report card</strong>
-        <span className={s.small}>New-style inspection — no overall grade is given</span>
+        <span className={s.small}>New-style inspection: no overall grade is given</span>
       </>
     );
   }
@@ -127,7 +127,7 @@ function JudgementDetailCell({
   if (published.length === 0) {
     return (
       <span className={s.small}>
-        We don&apos;t hold area-by-area detail for this inspection — see {schoolName}&apos;s
+        We don&apos;t hold area-by-area detail for this inspection. See {schoolName}&apos;s
         Ofsted page for the full report.
       </span>
     );

nextjs-app/components/school/AddToCompareButton.tsx

@@ -28,6 +28,9 @@ export function AddToCompareButton({ school }: { school: NearbySchool }) {
       school_name: school.school_name,
       school_type: school.school_type,
       age_range: school.age_range,
+      // The basket limits each phase separately. Missing (an older API)
+      // counts against both groups, which is safe, just stricter.
+      phase: school.phase ?? null,
     } as School);
   };
 
@@ -39,7 +42,7 @@ export function AddToCompareButton({ school }: { school: NearbySchool }) {
       aria-pressed={selected}
     >
       {selected ? '✓ Added to compare' : '+ Add to compare'}
-      <span className={styles.srOnly}> — {school.school_name}</span>
+      <span className={styles.srOnly}>: {school.school_name}</span>
     </button>
   );
 }

nextjs-app/components/school/AdmissionsSection.tsx

@@ -175,7 +175,7 @@ export function AdmissionsSection({
           <><strong>{admissions.first_preference_applications}</strong> families put it first for </>
         )}
         {admissions.places_offered != null && <><strong>{admissions.places_offered}</strong> places</>}
-        {admissions.total_applications != null && ` — ${admissions.total_applications.toLocaleString()} applications in total`}.
+        {admissions.total_applications != null && ` (${admissions.total_applications.toLocaleString()} applications in total)`}.
       </p>
     </>
   );

nextjs-app/components/school/DestinationsView.tsx

@@ -189,7 +189,7 @@ export function DestinationsView({
                   data-group={card ?? 'none'}
                   className={`${styles.segment} ${styles[seg.category]} ${dimmed(card) ? styles.dim : ''}`}
                   style={{ width: `${seg.widthPct}%` }}
-                  title={`${CATEGORY_LABELS[seg.category]} — ${seg.labelPct}% (${seg.pupils} pupils)`}
+                  title={`${CATEGORY_LABELS[seg.category]}: ${seg.labelPct}% (${seg.pupils} pupils)`}
                 >
                   {seg.widthPct >= 9 ? `${seg.labelPct}%` : ''}
                 </div>
@@ -254,7 +254,7 @@ export function DestinationsView({
       <p className={styles.footnote}>
         Shares are rounded and may not add up to 100%. A pupil counted under a
         school sixth form may have moved to a different school&apos;s sixth
-        form — the published data records the type of place, not which one.
+        form. The published data records the type of place, not which one.
       </p>
     </div>
   );

nextjs-app/components/school/GcseSection.tsx

@@ -129,7 +129,7 @@ export function GcseSection({
           that comparison isn't meaningful. */}
       {!suppressComparison && latestResults.attainment_8_score != null && (
         <div className={styles.att8Viz}>
-          <div className={styles.att8VizLabel}>Attainment 8 — school vs national</div>
+          <div className={styles.att8VizLabel}>Attainment 8: school vs national</div>
           <div className={styles.att8VizTrack}>
             <div
               className={styles.att8VizFill}
@@ -155,7 +155,7 @@ export function GcseSection({
       {/* Progress 8 number line with CI */}
       {latestResults.progress_8_score != null && !p8Suspended && (
         <div className={styles.p8Viz}>
-          <div className={styles.p8VizLabel}>Progress 8 — relative to national baseline (0)</div>
+          <div className={styles.p8VizLabel}>Progress 8: relative to national baseline (0)</div>
           {(() => {
             const p8 = latestResults.progress_8_score!;
             const lo = latestResults.progress_8_lower_ci ?? p8;

nextjs-app/components/school/HistorySection.tsx

@@ -37,7 +37,7 @@ export function HistorySection({
         <>
           {hasKS2Results && (
             <>
-              <h3 className={styles.subSectionTitle}>Primary — KS2 SATs</h3>
+              <h3 className={styles.subSectionTitle}>Primary: KS2 SATs</h3>
               <div className={styles.chartContainer}>
                 <PerformanceChart
                   data={yearlyData}
@@ -51,7 +51,7 @@ export function HistorySection({
           )}
           {hasKS4Results && (
             <>
-              <h3 className={styles.subSectionTitle} style={{ marginTop: '1.5rem' }}>Secondary — GCSEs</h3>
+              <h3 className={styles.subSectionTitle} style={{ marginTop: '1.5rem' }}>Secondary: GCSEs</h3>
               <div className={styles.chartContainer}>
                 <PerformanceChart
                   data={yearlyData}

nextjs-app/components/school/OfstedSection.tsx

@@ -114,14 +114,14 @@ export function OfstedSection({
           </div>
           <p className={styles.ofstedDisclaimer}>
             {ofsted.grade_source === 'ungraded_carried_forward'
-              ? 'This overall grade is carried forward from an earlier inspection — Ofsted has since visited without issuing a new overall grade. From September 2024, Ofsted no longer makes an overall effectiveness judgement.'
+              ? 'This overall grade is carried forward from an earlier inspection. Ofsted has since visited without issuing a new overall grade. From September 2024, Ofsted no longer makes an overall effectiveness judgement.'
               : isSecondary
                 ? 'From September 2024, Ofsted no longer makes an overall effectiveness judgement in inspections.'
                 : 'From September 2024, Ofsted no longer makes an overall effectiveness judgement in inspections of state-funded schools.'}
           </p>
           {oeifAllSameGrade ? (
             <p className={styles.ofstedAllSame}>
-              Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
+              Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas: Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
             </p>
           ) : (
             <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>

nextjs-app/components/school/ResultsSection.tsx

@@ -41,7 +41,7 @@ export function ResultsSection({
               ? 'GCSE results for Year 11 pupils.'
               : 'End-of-primary-school tests taken by Year 6 pupils.')
           : isAllThrough
-            ? 'KS2 SATs (end of Year 6) and GCSE results (Year 11) — this school covers both. England averages shown for comparison.'
+            ? 'This school covers both KS2 SATs (end of Year 6) and GCSE results (Year 11). England averages shown for comparison.'
             : isSecondary
               ? 'GCSE results for Year 11 pupils. England averages shown for comparison.'
               : 'End-of-primary-school tests taken by Year 6 pupils. England averages shown for comparison.'}
@@ -56,7 +56,7 @@ export function ResultsSection({
       {hasKS2Results && (
         <>
           {isAllThrough && (
-            <h3 className={styles.subSectionTitle}>Primary — KS2 SATs (Year 6)</h3>
+            <h3 className={styles.subSectionTitle}>Primary: KS2 SATs (Year 6)</h3>
           )}
           <div className={styles.heroStatGrid}>
             {latestResults.rwm_expected_pct !== null && (
@@ -208,7 +208,7 @@ export function ResultsSection({
       {hasKS4Results && (
         <>
           {isAllThrough && (
-            <h3 className={styles.subSectionTitle} style={{ marginTop: '1.5rem' }}>Secondary — GCSEs (Year 11)</h3>
+            <h3 className={styles.subSectionTitle} style={{ marginTop: '1.5rem' }}>Secondary: GCSEs (Year 11)</h3>
           )}
           <div className={styles.metricsGrid}>
             {latestResults.attainment_8_score !== null && (

nextjs-app/components/school/SchoolDetailShell.module.css

@@ -283,6 +283,21 @@
 }
 
 
+/* `position: sticky` with a z-index makes .sectionNav a stacking context, so
+   the jump sheet's own z-index only orders it INSIDE that context. Against the
+   fixed bottom tab bar (Navigation.module.css, z-index 1000) what counts is
+   .sectionNav's 10 — which is why the sheet's last item was painted over, and
+   untappable, once the list grew long enough to reach the bar.
+
+   Lifted only while the sheet is open, and only to 1100: above the bar, below
+   the comparison toast (2000), the fullscreen map (5000) and the info popover
+   (9999). This rule carries the z-index and nothing else; every other
+   declaration belongs to .sectionNav in both states. */
+.sectionNavSheetOpen {
+    z-index: 1100;
+}
+
+
 .sectionNavBack {
     flex: none;
     display: inline-flex;

nextjs-app/components/school/SchoolDetailShell.tsx

@@ -229,8 +229,8 @@ export function SchoolDetailShell({
             </div>
             {isProposedToClose(schoolInfo) && (
               <div className={styles.closingStrip} role="note">
-                <strong>⚠ Proposed to close</strong> — this school is proposed for closure,
-                check with the local authority before applying.
+                <strong>⚠ Proposed to close.</strong> Check with the local authority before
+                applying.
               </div>
             )}
             {schoolInfo.address && (
@@ -344,7 +344,10 @@ export function SchoolDetailShell({
       </header>
 
       {/* Sticky Section Navigation — docks under the global header */}
-      <nav className={styles.sectionNav} aria-label="Page sections">
+      <nav
+        className={`${styles.sectionNav}${sectionsOpen ? ` ${styles.sectionNavSheetOpen}` : ''}`}
+        aria-label="Page sections"
+      >
         <button onClick={scrollToTop} className={styles.sectionNavBack} aria-label="Back to top">
           <span aria-hidden="true">↑</span>
           <span className={styles.sectionNavBackLabel}>Top</span>

nextjs-app/components/school/SecondaryAdmissionsSection.tsx

@@ -46,10 +46,10 @@ export function SecondaryAdmissionsSection({
 
       {admissionsTag && (
         <div className={`${styles.admissionsTypeBadge} ${admissionsTag === 'Selective' ? styles.admissionsSelective : styles.admissionsFaith}`}>
-          <strong>{admissionsTag}</strong>{' '}
+          <strong>{admissionsTag}:</strong>{' '}
           {admissionsTag === 'Selective'
-            ? '— Entry to this school is by selective examination (e.g. 11+).'
-            : `— This school has a faith-based admissions priority (${schoolInfo.religious_denomination}).`}
+            ? 'entry to this school is by selective examination (e.g. 11+).'
+            : `this school has a faith-based admissions priority (${schoolInfo.religious_denomination}).`}
         </div>
       )}
 

nextjs-app/components/school/lastDistanceOffered.ts

@@ -32,7 +32,7 @@ export interface CutoffDisplay {
 /** What the cut-off measures, and what it does not. Identical on both templates. */
 export const CUTOFF_NOTE =
   'The furthest home offered a place, after higher priorities such as siblings, ' +
-  'faith and EHCP were applied. It is not a fixed catchment — it moves every year ' +
+  'faith and EHCP were applied. It is not a fixed catchment. It moves every year ' +
   'with the number of applications.';
 
 /** Straight-line, because that is how councils measure it. */
@@ -54,7 +54,7 @@ export function describeCutoff(
     entryYear: formatEntryYear(distance.year),
     routeNote:
       routes > 1
-        ? `Furthest of ${routes} admission routes at this school — the one that ` +
+        ? `Furthest of ${routes} admission routes at this school. The one that ` +
           'applies to your child may have had a shorter cut-off.'
         : null,
   };
@@ -122,10 +122,10 @@ export function compareToCutoff(
   const cutoffPhrase = `the September ${year} cut-off of ${cutoffLabel}`;
   const headline =
     verdict === 'inside'
-      ? `${label} away — inside ${cutoffPhrase}.`
+      ? `${label} away, inside ${cutoffPhrase}.`
       : verdict === 'outside'
-        ? `${label} away — beyond ${cutoffPhrase}.`
-        : `${label} away — too close to ${cutoffPhrase} to call.`;
+        ? `${label} away, beyond ${cutoffPhrase}.`
+        : `${label} away, too close to ${cutoffPhrase} to call.`;
 
   const detail =
     verdict === 'too-close'
@@ -156,11 +156,11 @@ export function compareToCutoff(
  */
 export const CUTOFF_CHECK_CAVEAT =
   'Distance is the last criterion applied. Places go first to children in care, '
-  + 'EHCP places, siblings and — at faith schools — on faith criteria, so a home '
+  + 'EHCP places and siblings, and at faith schools by faith criteria, so a home '
   + 'inside the distance can still miss out. Figures are straight-line distances '
   + 'and not a catchment boundary; some authorities measure a walking route '
   + "instead, which is always longer for the same home. Next year's cut-off "
-  + "depends on next year's applicants — always check the school's own "
+  + "depends on next year's applicants, so always check the school's own "
   + 'admissions policy.';
 
 // ---------------------------------------------------------------------------

nextjs-app/context/ComparisonContext.tsx

@@ -6,6 +6,7 @@
 'use client';
 
 import { createContext, useContext } from 'react';
+import type { CompareGroup } from '@/lib/compareLogic';
 import type { School } from '@/lib/types';
 
 interface ComparisonContextType {
@@ -16,9 +17,12 @@ interface ComparisonContextType {
   addSchool: (school: School) => void;
   removeSchool: (urn: number) => void;
   replaceSchools: (schools: School[]) => void;
+  /** Fill in phases missing from stored entries; never overwrites one. */
+  backfillPhases: (phases: Record<number, string | null | undefined>) => void;
   clearAll: () => void;
   isSelected: (urn: number) => boolean;
-  canAddMore: boolean;
+  /** The comparison group with no room for this school, or null. */
+  fullGroupFor: (school: Pick<School, 'phase'>) => CompareGroup | null;
   isInitialized: boolean;
   mutate: () => void;
 }

nextjs-app/context/ComparisonProvider.tsx

@@ -7,11 +7,11 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { getFromLocalStorage, setToLocalStorage } from '@/lib/utils';
+import { MAX_PER_GROUP, fitToGroupLimits, fullGroupFor } from '@/lib/compareLogic';
 import type { School } from '@/lib/types';
 import { ComparisonContext } from './ComparisonContext';
 
 const STORAGE_KEY = 'selectedSchools';
-const MAX_SCHOOLS = 5;
 
 export function ComparisonProvider({ children }: { children: React.ReactNode }) {
   const [selectedSchools, setSelectedSchools] = useState<School[]>([]);
@@ -53,8 +53,9 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
       if (prev.some((s) => s.urn === school.urn)) {
         return prev;
       }
-      if (prev.length >= MAX_SCHOOLS) {
-        alert(`Maximum ${MAX_SCHOOLS} schools can be compared`);
+      const fullGroup = fullGroupFor(prev, school);
+      if (fullGroup) {
+        alert(`You can compare up to ${MAX_PER_GROUP} ${fullGroup} schools at once. Remove one to add another.`);
         return prev;
       }
       return [...prev, school];
@@ -68,7 +69,23 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
   // Replace the whole selection — used when a shared /compare?urns=… link
   // must take precedence over whatever this visitor had stored.
   const replaceSchools = useCallback((schools: School[]) => {
-    setSelectedSchools(schools.slice(0, MAX_SCHOOLS));
+    setSelectedSchools(fitToGroupLimits(schools));
+  }, []);
+
+  // Baskets saved before phases were recorded (or added from a path that
+  // lacked one) count against both groups. Fill the gaps once the compare
+  // page has fetched each school, so they stop holding a slot they don't need.
+  const backfillPhases = useCallback((phases: Record<number, string | null | undefined>) => {
+    setSelectedSchools((prev) => {
+      let changed = false;
+      const next = prev.map((s) => {
+        const phase = phases[s.urn];
+        if (s.phase || !phase) return s;
+        changed = true;
+        return { ...s, phase };
+      });
+      return changed ? next : prev;
+    });
   }, []);
 
   const clearAll = useCallback(() => {
@@ -80,6 +97,11 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
     [selectedSchools]
   );
 
+  const fullGroupForSchool = useCallback(
+    (school: Pick<School, 'phase'>) => fullGroupFor(selectedSchools, school),
+    [selectedSchools]
+  );
+
   // Placeholder mutate - actual SWR mutate is in useComparison hook
   const mutate = useCallback(() => {}, []);
 
@@ -93,9 +115,10 @@ export function ComparisonProvider({ children }: { children: React.ReactNode })
         addSchool,
         removeSchool,
         replaceSchools,
+        backfillPhases,
         clearAll,
         isSelected,
-        canAddMore: selectedSchools.length < MAX_SCHOOLS,
+        fullGroupFor: fullGroupForSchool,
         isInitialized,
         mutate,
       }}

nextjs-app/lib/analytics.ts

@@ -33,7 +33,8 @@ export type EventName =
   | 'compare_focus_school'
   // Operational
   | 'api_error'
-  | 'results_load_more';
+  | 'results_load_more'
+  | 'results_view_changed';
 
 type Primitive = string | number | boolean;
 type Payload = Record<string, Primitive>;

nextjs-app/lib/compareLogic.ts

@@ -289,3 +289,48 @@ export function latestValues(
     return null;
   });
 }
+
+// ---------------------------------------------------------------------------
+// Basket limits — five per comparison group, not five overall
+// ---------------------------------------------------------------------------
+
+export type CompareGroup = 'primary' | 'secondary';
+
+export const MAX_PER_GROUP = 5;
+
+/**
+ * Which phase tab(s) of the compare page a school can land in. The page
+ * sorts by the data a school actually has, which isn't known when it's added,
+ * so anything that isn't plainly one phase (all-through, special schools
+ * with phase "Not applicable", unknown) counts against BOTH groups. That
+ * keeps every tab at MAX_PER_GROUP or fewer, which the five-slot chart
+ * palette and point styles rely on.
+ */
+export function compareGroups(phase?: string | null): CompareGroup[] {
+  const p = (phase ?? '').toLowerCase();
+  // "Middle deemed secondary" / "Middle deemed primary" match here too.
+  // "16 plus" is secondary, as the API's PHASE_GROUPS files it.
+  if (p.includes('secondary') || p === '16 plus') return ['secondary'];
+  if (p.includes('primary')) return ['primary'];
+  return ['primary', 'secondary'];
+}
+
+/** The group that has no room for `school`, or null if it can be added. */
+export function fullGroupFor(
+  basket: ReadonlyArray<{ phase?: string | null }>,
+  school: { phase?: string | null },
+): CompareGroup | null {
+  for (const group of compareGroups(school.phase)) {
+    const used = basket.filter((s) => compareGroups(s.phase).includes(group)).length;
+    if (used >= MAX_PER_GROUP) return group;
+  }
+  return null;
+}
+
+/** Keep schools in order, dropping any that would overflow a group. */
+export function fitToGroupLimits<T extends { phase?: string | null }>(schools: T[]): T[] {
+  return schools.reduce<T[]>(
+    (kept, school) => (fullGroupFor(kept, school) ? kept : [...kept, school]),
+    [],
+  );
+}

nextjs-app/lib/metrics.ts

@@ -16,32 +16,32 @@ export const METRIC_EXPLANATIONS: Record<string, MetricExplanation> = {
     detail: 'The national average is around 60%. Higher means more pupils reached the expected level.',
   },
   rwm_high_pct: {
-    label: 'Higher Standard — Reading, Writing & Maths',
+    label: 'Higher Standard: Reading, Writing & Maths',
     plain: '% of pupils exceeding the expected level in all three subjects',
     detail: 'A more demanding threshold. The national average is around 8%.',
   },
   reading_expected_pct: {
-    label: 'Reading — Expected Standard',
+    label: 'Reading: Expected Standard',
     plain: '% of pupils achieving the expected standard in reading at age 11',
   },
   writing_expected_pct: {
-    label: 'Writing — Expected Standard',
+    label: 'Writing: Expected Standard',
     plain: '% of pupils achieving the expected standard in writing at age 11',
   },
   maths_expected_pct: {
-    label: 'Maths — Expected Standard',
+    label: 'Maths: Expected Standard',
     plain: '% of pupils achieving the expected standard in maths at age 11',
   },
   reading_high_pct: {
-    label: 'Reading — Higher Standard',
+    label: 'Reading: Higher Standard',
     plain: '% of pupils exceeding the expected level in reading',
   },
   writing_high_pct: {
-    label: 'Writing — Higher Standard',
+    label: 'Writing: Higher Standard',
     plain: '% of pupils exceeding the expected level in writing',
   },
   maths_high_pct: {
-    label: 'Maths — Higher Standard',
+    label: 'Maths: Higher Standard',
     plain: '% of pupils exceeding the expected level in maths',
   },
   gps_expected_pct: {
@@ -90,7 +90,7 @@ export const METRIC_EXPLANATIONS: Record<string, MetricExplanation> = {
     detail: 'Lower is better. Persistent absence can significantly affect attainment.',
   },
   rwm_expected_disadvantaged_pct: {
-    label: 'Disadvantaged Pupils — Reading, Writing & Maths',
+    label: 'Disadvantaged Pupils: Reading, Writing & Maths',
     plain: '% of disadvantaged pupils achieving the expected standard in all three subjects',
   },
   disadvantaged_gap: {
@@ -105,7 +105,7 @@ export const METRIC_EXPLANATIONS: Record<string, MetricExplanation> = {
   },
   sen_ehcp_pct: {
     label: 'Education, Health and Care Plan (EHCP)',
-    plain: '% of pupils with a formal EHCP — a legal plan for pupils with significant additional needs',
+    plain: '% of pupils with a formal EHCP (a legal plan for pupils with significant additional needs)',
   },
   eal_pct: {
     label: 'English as an Additional Language',
@@ -128,26 +128,26 @@ export const METRIC_EXPLANATIONS: Record<string, MetricExplanation> = {
     detail: '0 = national average. Positive means better-than-expected progress; negative means lower-than-expected. A score above +0.5 is considered well above average.',
   },
   english_maths_standard_pass_pct: {
-    label: 'English & Maths — Grade 4+ (Standard Pass)',
+    label: 'English & Maths: Grade 4+ (Standard Pass)',
     plain: '% of pupils achieving at least a grade 4 in both English and Maths',
     detail: 'Grade 4 is the minimum "standard pass". Employers and colleges often require grade 4 in English and Maths.',
   },
   english_maths_strong_pass_pct: {
-    label: 'English & Maths — Grade 5+ (Strong Pass)',
+    label: 'English & Maths: Grade 5+ (Strong Pass)',
     plain: '% of pupils achieving at least a grade 5 in both English and Maths',
     detail: 'Grade 5 is a "strong pass". Many sixth forms and universities expect grade 5 in English and Maths.',
   },
   ebacc_entry_pct: {
     label: 'EBacc Entry',
-    plain: '% of pupils who entered the English Baccalaureate — a set of GCSE subjects covering English, Maths, Sciences, a Language, and Humanities',
+    plain: '% of pupils who entered the English Baccalaureate (a set of GCSE subjects covering English, Maths, Sciences, a Language and Humanities)',
     detail: 'EBacc entry keeps academic options open post-16. It is not a separate qualification.',
   },
   ebacc_standard_pass_pct: {
-    label: 'EBacc — Grade 4+ (Standard Pass)',
+    label: 'EBacc: Grade 4+ (Standard Pass)',
     plain: '% of pupils achieving grade 4 or above across all EBacc subjects',
   },
   ebacc_strong_pass_pct: {
-    label: 'EBacc — Grade 5+ (Strong Pass)',
+    label: 'EBacc: Grade 5+ (Strong Pass)',
     plain: '% of pupils achieving grade 5 or above across all EBacc subjects',
   },
   ebacc_avg_score: {

nextjs-app/lib/types.ts

@@ -360,6 +360,8 @@ export interface NearbySchool {
   distance_miles: number;
   school_type: string | null;
   age_range: string | null;
+  /** Optional: a frontend can ship ahead of the API that serves it. */
+  phase?: string | null;
   shared: string[];
   metric_value: number | null;
   metric_key: string;

nextjs-app/lib/utils.ts

@@ -116,7 +116,7 @@ export function formatWithSuppression(value: number | null | undefined): { displ
   return { display: formatPercentage(value), suppressed: false };
 }
 
-export const SUPPRESSED_TOOLTIP = 'Data not available — may be suppressed to protect small cohorts.';
+export const SUPPRESSED_TOOLTIP = 'Data not available. It may be suppressed to protect small cohorts.';
 
 /**
  * Format a progress score (can be negative)
@@ -750,7 +750,7 @@ export function buildSchoolSummary(
     if (admissions.first_preference_offer_pct != null) {
       const pct = Math.round(admissions.first_preference_offer_pct);
       parts.push(
-        `oversubscribed — ${pct}% of first-choice applicants are offered a place`,
+        `oversubscribed (${pct}% of first-choice applicants are offered a place)`,
       );
     } else {
       parts.push('oversubscribed');
@@ -898,3 +898,27 @@ export function isSpecialSchool(school: { school_type?: string | null }): boolea
   const t = (school.school_type ?? '').toLowerCase();
   return /\bspecial\b/.test(t) || /pupil referral/.test(t) || /alternative provision/.test(t);
 }
+
+/**
+ * The school's combined Reading, Writing & Maths figure, or null when there is
+ * no real one to show.
+ *
+ * A placeholder all-zero row (every subject 0, the special/suppressed
+ * signature that SchoolDetailView calls ks2Placeholder) is not a score. A
+ * genuine 0% combined, where some pupils met individual subjects but not all
+ * three, is not all-zero and stays shown.
+ */
+export function listRwmValue(school: {
+  rwm_expected_pct?: number | null;
+  reading_expected_pct?: number | null;
+  writing_expected_pct?: number | null;
+  maths_expected_pct?: number | null;
+}): number | null {
+  if (school.rwm_expected_pct == null) return null;
+  const placeholder =
+    school.rwm_expected_pct === 0 &&
+    (school.reading_expected_pct ?? 0) === 0 &&
+    (school.writing_expected_pct ?? 0) === 0 &&
+    (school.maths_expected_pct ?? 0) === 0;
+  return placeholder ? null : school.rwm_expected_pct;
+}