fix(places): align the measure column's heading with its values

The heading sat on the right edge of the column and every value on the left.
A specificity collision, not a layout problem: the two were aligned by
different selectors and only one of them won.

  .table td            (0,1,1)  text-align: left    <- won for the value
  .num                 (0,1,0)  text-align: right   <- lost
  .table th:last-child (0,2,1)  text-align: right   <- won for the heading

The heading and the value cell now share one class and one rule, so they
cannot drift apart again whatever else changes around them.

The column also stretched to half the table. It now hugs its content with
width:1% and nowrap, so the school name takes the remaining width — which is
what made the gap read as misalignment on a wide screen, and what crowded the
name column on a narrow one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015mWQnpye9F299NVRCCSRvj

backend/app.py

@@ -209,12 +209,27 @@ def _place_url(place) -> str:
 
 
 def _place_sitemap_rows(kinds: tuple[str, ...]) -> list[str]:
-    return [
-        _url_element(BASE_URL + _place_url(p))
-        for p in sorted(get_place_registry().values(),
-                        key=lambda p: (p.kind, p.slug))
-        if p.kind in kinds
-    ]
+    """A <url> per place, plus a phase variant wherever that phase clears the
+    threshold on its own.
+
+    Phase is part of the query — "primary schools in beccles" — so each
+    variant is its own indexable page. Submitting only the bare place URL left
+    ~950 of them reachable by nothing: absent from every sitemap, and not
+    linked from the place page either.
+    """
+    rows: list[str] = []
+    for p in sorted(get_place_registry().values(), key=lambda p: (p.kind, p.slug)):
+        if p.kind not in kinds:
+            continue
+        rows.append(_url_element(BASE_URL + _place_url(p)))
+        # Outcodes carry no phase variants: nobody searches "primary schools
+        # in SW11", so the routes do not exist to submit.
+        if p.kind == "outcode":
+            continue
+        for phase in ("primary", "secondary"):
+            if p.publishes_phase(phase):
+                rows.append(_url_element(f"{BASE_URL}{_place_url(p)}/{phase}"))
+    return rows
 
 
 def build_sitemaps() -> dict[str, str]:
@@ -1216,7 +1231,11 @@ async def get_place(request: Request, kind: str, slug: str,
     return {
         "place": {"kind": place.kind, "slug": place.slug, "name": place.name,
                   "count": len(place.urns),
-                  "parent_authority": place.parent_authority},
+                  "parent_authority": place.parent_authority,
+                  # Only phases that clear the threshold, so the page links
+                  # variants that exist rather than 404s.
+                  "phases": [ph for ph in ("primary", "secondary")
+                             if place.publishes_phase(ph)]},
         "schools": clean_for_json(rows[cols]),
         "averages": averages,
     }

backend/places.py

@@ -14,7 +14,7 @@ from __future__ import annotations
 
 import logging
 import re
-from dataclasses import dataclass
+from dataclasses import dataclass, field
 
 logger = logging.getLogger(__name__)
 
@@ -30,6 +30,13 @@ class Place:
     name: str
     urns: tuple[int, ...]
     parent_authority: str | None    # authority NAME, for the 301 target
+    # URNs per phase, so the per-phase threshold can be applied without
+    # re-querying. A place with 30 primaries and 2 secondaries publishes a
+    # primary variant and no secondary one.
+    phase_urns: dict[str, tuple[int, ...]] = field(default_factory=dict)
+
+    def publishes_phase(self, phase: str) -> bool:
+        return len(self.phase_urns.get(phase, ())) >= MIN_SCHOOLS
 
     @property
     def key(self) -> str:
@@ -46,6 +53,24 @@ def _publishable_urns(df) -> set[int]:
     return set(df.loc[df[cols].notna().any(axis=1), "urn"].astype(int))
 
 
+def _phase_urns(group, publishable: set[int]) -> dict[str, tuple[int, ...]]:
+    """URNs per phase. All-through schools count toward both, matching the
+    PHASE_GROUPS mapping the search filters already use."""
+    from backend.app import PHASE_GROUPS
+
+    if "phase" not in group.columns:
+        return {}
+    lowered = group["phase"].fillna("").str.lower()
+    out: dict[str, tuple[int, ...]] = {}
+    for phase in ("primary", "secondary"):
+        wanted = PHASE_GROUPS.get(phase, set())
+        subset = group[lowered.isin(wanted)]
+        urns = tuple(sorted({int(u) for u in subset["urn"]} & publishable))
+        if urns:
+            out[phase] = urns
+    return out
+
+
 def _parent_authority(group) -> str | None:
     """The most common authority in a group — the useful 301 target.
 
@@ -79,6 +104,7 @@ def _group(df, column: str, kind: str, publishable: set[int]) -> dict[str, Place
         place = Place(
             kind=kind, slug=slug, name=name, urns=urns,
             parent_authority=_parent_authority(group) if kind == "town" else None,
+            phase_urns=_phase_urns(group, publishable),
         )
         out[place.key] = place
     return out
@@ -111,7 +137,8 @@ def _outcode_places(df, publishable: set[int]) -> dict[str, Place]:
         if len(urns) < MIN_SCHOOLS:
             continue
         place = Place(kind="outcode", slug=str(oc).lower(), name=str(oc),
-                      urns=urns, parent_authority=_parent_authority(group))
+                      urns=urns, parent_authority=_parent_authority(group),
+                      phase_urns=_phase_urns(group, publishable))
         out[place.key] = place
     return out
 
@@ -153,7 +180,8 @@ def _locality_places(df, publishable: set[int],
                 slug, ", ".join(outcodes), len(urns), MIN_SCHOOLS)
             continue
         place = Place(kind="locality", slug=slug, name=name, urns=urns,
-                      parent_authority=_parent_authority(group))
+                      parent_authority=_parent_authority(group),
+                      phase_urns=_phase_urns(group, publishable))
         out[place.key] = place
     return out
 

backend/tests/test_sitemap.py

@@ -268,3 +268,23 @@ def test_place_urls_carry_no_priority_or_changefreq(place_sitemaps):
     for name in ("places-1.xml", "outcodes-1.xml"):
         assert "<priority>" not in place_sitemaps[name]
         assert "<changefreq>" not in place_sitemaps[name]
+
+
+def test_phase_variants_are_submitted_where_the_phase_clears_the_threshold(place_sitemaps):
+    # "primary schools in beccles" is the query shape the baseline showed, so
+    # each variant is its own page and has to be submitted. Emitting only the
+    # bare place URL left ~950 of them reachable by nothing.
+    xml = place_sitemaps["places-1.xml"]
+    assert "<loc>https://www.schoolcompare.co.uk/schools/brentwood/primary</loc>" in xml
+
+
+def test_a_phase_below_its_own_threshold_is_not_submitted(place_sitemaps):
+    # The fixture is six primaries and no secondaries.
+    xml = place_sitemaps["places-1.xml"]
+    assert "/schools/brentwood/secondary" not in xml
+
+
+def test_outcodes_get_no_phase_variants(place_sitemaps):
+    # Nobody searches "primary schools in CM13"; the routes do not exist.
+    xml = place_sitemaps["outcodes-1.xml"]
+    assert "/primary" not in xml and "/secondary" not in xml

e2e/tests/journeys.spec.ts

@@ -1842,3 +1842,46 @@ test('a place page states the local average against England', async ({ page }) =
   await page.goto(`/schools/${place.slug}`);
   await expect(page.getByTestId('local-vs-england')).toContainText(/across England/i);
 });
+
+test('a place page links its phase variants, and they resolve', async ({ page }) => {
+  // "primary schools in beccles" is the query shape the baseline showed. The
+  // first cut submitted only the bare place URL and linked nothing, leaving
+  // ~950 variant pages reachable by nothing at all.
+  const res = await page.request.get('/api/places');
+  const { places } = await res.json();
+  const town = places.find((p: { kind: string }) => p.kind === 'town');
+  expect(town).toBeTruthy();
+
+  const detail = await (await page.request.get(`/api/places/town/${town.slug}`)).json();
+  test.skip(!(detail.place.phases ?? []).length, 'no phase clears the threshold here');
+
+  await page.goto(`/schools/${town.slug}`);
+  const phase = detail.place.phases[0];
+  const link = page.locator(`a[href="/schools/${town.slug}/${phase}"]`).first();
+  await expect(link).toBeVisible();
+
+  await link.click();
+  await expect(page.locator('h1')).toContainText(new RegExp(`${phase} schools in`, 'i'));
+});
+
+test('phase variants are submitted in the places sitemap', async ({ page }) => {
+  const xml = await (await page.request.get('/sitemaps/places-1.xml')).text();
+  expect(xml).toMatch(/\/schools\/[a-z0-9-]+\/primary</);
+});
+
+test('no page title repeats the brand', async ({ page }) => {
+  // The root layout appends '| schoolcompare' to a plain-string title. Any
+  // route whose title already carries the brand must opt out with
+  // `absolute`, or it ships '... | schoolcompare | schoolcompare' — which is
+  // how ~2,600 place pages first went out.
+  const res = await page.request.get('/api/places');
+  const { places } = await res.json();
+  const town = places.find((p: { kind: string }) => p.kind === 'town');
+
+  for (const path of ['/', '/rankings', '/admissions', `/schools/${town.slug}`]) {
+    await page.goto(path);
+    const title = await page.title();
+    const brands = (title.match(/schoolcompare/gi) ?? []).length;
+    expect(brands, `${path} repeats the brand: ${title}`).toBeLessThanOrEqual(1);
+  }
+});

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

@@ -14,7 +14,7 @@ jest.mock('@/lib/places', () => ({
 describe('place page metadata', () => {
   it('titles the page the way the place is searched', async () => {
     const m = await placeMeta({ params: Promise.resolve({ place: 'brentwood' }) });
-    expect(m.title).toMatch(/schools in brentwood/i);
+    expect((m.title as { absolute: string }).absolute).toMatch(/schools in brentwood/i);
   });
 
   it('canonicalises to its own path on the www host', async () => {
@@ -23,6 +23,18 @@ describe('place page metadata', () => {
       .toBe('https://www.schoolcompare.co.uk/schools/brentwood');
   });
 
+  it('opts out of the layout template, which would double the brand', () => {
+    // The root layout appends '| schoolcompare' to a plain string title, and
+    // these titles already carry it — every place page shipped reading
+    // '... | schoolcompare | schoolcompare' until this was made absolute.
+    return placeMeta({ params: Promise.resolve({ place: 'brentwood' }) })
+      .then((m) => {
+        expect(typeof m.title).toBe('object');
+        expect((m.title as { absolute: string }).absolute)
+          .not.toMatch(/schoolcompare.*schoolcompare/);
+      });
+  });
+
   it('an unknown place gets a not-found title rather than inventing one', async () => {
     const m = await placeMeta({ params: Promise.resolve({ place: 'atlantis' }) });
     expect(m.title).toMatch(/not found/i);

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

@@ -4,12 +4,12 @@ import type { PlaceDetail } from '@/lib/places';
 
 const detail: PlaceDetail = {
   place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 29,
-           parent_authority: 'Essex' },
+           parent_authority: 'Essex', phases: ['primary'] },
   schools: [
     { urn: 1, school_name: 'Alpha Primary', rwm_expected_pct: 82,
-      ofsted_grade: 1 } as never,
+      ofsted_grade: 1, phase: 'Primary' } as never,
     { urn: 2, school_name: 'Beta Primary', rwm_expected_pct: 44,
-      ofsted_grade: 3 } as never,
+      ofsted_grade: 3, phase: 'Primary' } as never,
   ],
   averages: { rwm_expected_pct: 63, attainment_8_score: null },
 };
@@ -91,3 +91,111 @@ describe('PlaceView structured data', () => {
     }
   });
 });
+
+describe('PlaceView phase variants', () => {
+  it('links the phase variants that exist', () => {
+    render(<PlaceView detail={detail} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByRole('link', { name: /Primary schools in Brentwood/i }))
+      .toHaveAttribute('href', '/schools/brentwood/primary');
+  });
+
+  it('links no variant for a phase below its own threshold', () => {
+    render(<PlaceView detail={detail} englandAverage={61} neighbours={[]} />);
+    expect(screen.queryByRole('link', { name: /Secondary schools in Brentwood/i }))
+      .not.toBeInTheDocument();
+  });
+
+  it('does not link sideways from a variant page to itself', () => {
+    render(<PlaceView detail={detail} phase="primary" englandAverage={61}
+      neighbours={[]} />);
+    expect(screen.queryByRole('link', { name: /Primary schools in Brentwood/i }))
+      .not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceView presentation', () => {
+  // /schools/brentwood shipped with 8 of 27 rows blank: an unphased page shows
+  // one primary-only measure for a list that also holds secondaries.
+  const mixed: PlaceDetail = {
+    place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 4,
+             parent_authority: 'Essex', phases: ['primary', 'secondary'] },
+    schools: [
+      { urn: 1, school_name: 'Alpha Primary', phase: 'Primary',
+        rwm_expected_pct: 82, attainment_8_score: null } as never,
+      { urn: 2, school_name: 'Beta High', phase: 'Secondary',
+        rwm_expected_pct: null, attainment_8_score: 47 } as never,
+    ],
+    averages: { rwm_expected_pct: 63, attainment_8_score: 45 },
+  };
+
+  it('gives each phase its own table rather than one column of blanks', () => {
+    render(<PlaceView detail={mixed} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByRole('heading', { name: /^Primary schools/ })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /^Secondary schools/ })).toBeInTheDocument();
+    expect(screen.getByText('82%')).toBeInTheDocument();
+    expect(screen.getByText('47')).toBeInTheDocument();
+  });
+
+  it('names the measure in plain words, not jargon', () => {
+    // The first cut said "RWM expected", which appears nowhere else on the site.
+    render(<PlaceView detail={mixed} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByText('Reading, writing & maths')).toBeInTheDocument();
+    expect(screen.getByText('Attainment 8')).toBeInTheDocument();
+    expect(screen.queryByText(/RWM expected/i)).not.toBeInTheDocument();
+  });
+
+  it('says a missing result is unpublished rather than showing a bare dash', () => {
+    const noResult: PlaceDetail = {
+      ...mixed,
+      schools: [{ urn: 3, school_name: 'New Primary', phase: 'Primary',
+                  rwm_expected_pct: null, attainment_8_score: null } as never],
+    };
+    render(<PlaceView detail={noResult} englandAverage={61} neighbours={[]} />);
+    expect(screen.getByText('Not published')).toBeInTheDocument();
+  });
+
+  it('styles school links to the site convention rather than browser default', () => {
+    const { container } = render(<PlaceView detail={mixed} englandAverage={61}
+      neighbours={[]} />);
+    const link = container.querySelector('a[href^="/school/"]');
+    expect(link?.className).toBeTruthy();
+  });
+
+  it('a phased page shows one table and no phase headings', () => {
+    render(<PlaceView detail={mixed} phase="primary" englandAverage={61}
+      neighbours={[]} />);
+    expect(screen.queryByRole('heading', { name: /^Secondary schools/ }))
+      .not.toBeInTheDocument();
+  });
+});
+
+describe('PlaceView table alignment', () => {
+  const aligned: PlaceDetail = {
+    place: { kind: 'town', slug: 'brentwood', name: 'Brentwood', count: 2,
+             parent_authority: 'Essex', phases: ['primary'] },
+    schools: [
+      { urn: 1, school_name: 'Alpha Primary', phase: 'Primary',
+        rwm_expected_pct: 82, attainment_8_score: null } as never,
+    ],
+    averages: { rwm_expected_pct: 63, attainment_8_score: null },
+  };
+
+  it('aligns the measure heading and its values with the same class', () => {
+    // They were aligned by two different selectors whose specificity did not
+    // match: `.table th:last-child` (0,2,1) won and went right, while `.num`
+    // (0,1,0) lost to `.table td` (0,1,1) and stayed left. Sharing one class
+    // is what makes them impossible to drift apart.
+    const { container } = render(<PlaceView detail={aligned} englandAverage={61}
+      neighbours={[]} />);
+    const th = container.querySelectorAll('th')[1];
+    const td = container.querySelectorAll('tbody td')[1];
+    expect(th.className).toBeTruthy();
+    expect(td.className).toBe(th.className);
+  });
+
+  it('leaves the school-name column unclassed so it takes the spare width', () => {
+    const { container } = render(<PlaceView detail={aligned} englandAverage={61}
+      neighbours={[]} />);
+    expect(container.querySelectorAll('th')[0].className).toBe('');
+  });
+});

nextjs-app/app/schools/[place]/[phase]/page.tsx

@@ -37,7 +37,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const word = phase === 'secondary' ? 'Secondary' : 'Primary';
   const { name } = detail.place;
   return {
-    title: `${word} Schools in ${name} — Ranked | schoolcompare`,
+    title: { absolute: `${word} Schools in ${name} — Ranked | schoolcompare` },
     description:
       `Every ${phase} school in ${name} ranked by results, with Ofsted grades and `
       + `the local average against England.`,

nextjs-app/app/schools/[place]/page.tsx

@@ -53,7 +53,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: `Schools in ${name} — Compare ${count} Schools | schoolcompare`,
+    // 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` },
     description:
       `Every school in ${name} ranked by SATs and GCSE results, with Ofsted grades, `
       + `the local average against England, and how close you had to live to get a place.`,

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

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

nextjs-app/app/schools/near/[outcode]/page.tsx

@@ -38,7 +38,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
   const { name, count } = detail.place;
   return {
-    title: `Schools near ${name} | schoolcompare`,
+    title: { absolute: `Schools near ${name} | schoolcompare` },
     description:
       `${count} schools in the ${name} postcode district, ranked by results, with `
       + `Ofsted grades and how close you had to live to get a place.`,

nextjs-app/components/places/PlaceView.module.css

@@ -1,4 +1,8 @@
-/* Tokens only — see globals.css. Matches RankingsView's conventions. */
+/* Tokens only — see globals.css. Follows RankingsView's conventions, and in
+   particular its link treatment: table links take --text-primary with no
+   underline and a brand-coloured hover, not the browser default. The first
+   cut used bare <Link> with no class at all, which rendered as default blue
+   underlined links and read as unstyled beside the rest of the site. */
 .container {
   width: 100%;
   min-width: 0;
@@ -24,6 +28,44 @@
   line-height: 1.6;
 }
 
+/* Links in running copy: brand colour, underline on hover only. */
+.inlineLink {
+  color: var(--brand);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.inlineLink:hover {
+  color: var(--brand-strong);
+  text-decoration: underline;
+}
+
+/* Phase variants are separate indexable pages, so the bare place page has to
+   link them — a sitemap entry alone leaves them with no internal path in. */
+.phaseLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 0.75rem;
+  margin: 0 0 1.25rem;
+}
+
+.phaseLink {
+  display: inline-block;
+  padding: 0.4rem 0.875rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.phaseLink:hover {
+  border-color: var(--brand);
+  color: var(--brand-strong);
+}
+
 /* The one number a list cannot give you, so it gets its own band. */
 .compare {
   background: var(--bg-secondary);
@@ -46,6 +88,30 @@
   color: var(--text-secondary);
 }
 
+.group {
+  margin-bottom: 2rem;
+}
+
+.groupHeading {
+  display: flex;
+  align-items: baseline;
+  gap: 0.625rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-family: var(--font-display);
+  margin: 0 0 0.75rem;
+}
+
+.groupCount {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border-radius: 999px;
+  padding: 0.125rem 0.5rem;
+}
+
 /* Wide content scrolls in its own container so the page body never does. */
 .tableWrap {
   overflow-x: auto;
@@ -72,18 +138,54 @@
   color: var(--text-secondary);
   font-weight: 600;
   font-size: 0.8125rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .table tbody tr:last-child td {
   border-bottom: none;
 }
 
-.table th:last-child,
-.num {
+/*
+ * Header and value share one class and one rule, so they cannot drift apart.
+ *
+ * The first cut aligned them with two different selectors: `.table th:last-child`
+ * at (0,2,1) beat the element rule and went right, while `.num` at (0,1,0) lost
+ * to `.table td` at (0,1,1) and stayed left. The heading and its numbers sat on
+ * opposite edges of the column.
+ *
+ * width:1% with nowrap makes the measure column hug its content so the school
+ * name takes the remaining width — without it the two columns split evenly and
+ * the gap between heading and value reads as misalignment on a wide screen.
+ */
+.table th.num,
+.table td.num {
   text-align: right;
   font-variant-numeric: tabular-nums;
+  width: 1%;
+  white-space: nowrap;
+}
+
+/* The measure is spelled out; the tooltip carries the definition. */
+.metricHead {
+  text-decoration: none;
+  cursor: help;
+  border-bottom: 1px dotted var(--border-strong);
+}
+
+/* Table links: site convention is body colour, brand on hover. */
+.schoolLink {
+  color: var(--text-primary);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.schoolLink:hover {
+  color: var(--brand-strong);
+}
+
+/* "Not published" is a fact about the school, not an error. */
+.noData {
+  color: var(--text-muted);
+  font-size: 0.8125rem;
 }
 
 .neighbours {

nextjs-app/components/places/PlaceView.tsx

@@ -12,6 +12,7 @@
 import Link from 'next/link';
 import type { PlaceDetail, PlaceSummary } from '@/lib/places';
 import { placeUrl, authoritySlug } from '@/lib/places';
+import type { School } from '@/lib/types';
 import { schoolUrl } from '@/lib/utils';
 import { absoluteUrl } from '@/lib/site';
 import styles from './PlaceView.module.css';
@@ -30,19 +31,103 @@ const OFSTED_LABELS: Array<[number, string]> = [
   [3, 'Requires improvement'], [4, 'Inadequate'],
 ];
 
+/**
+ * Column headings, taken from the site's own metric dictionary rather than
+ * invented here — see METRIC_DEFINITIONS in backend/schemas.py, surfaced at
+ * /api/metrics. The first cut said "RWM expected", which is jargon that
+ * appears nowhere else on the site.
+ */
+const METRICS = {
+  primary: {
+    key: 'rwm_expected_pct' as const,
+    heading: 'Reading, writing & maths',
+    hint: '% meeting the expected standard in reading, writing and maths',
+    unit: '%',
+  },
+  secondary: {
+    key: 'attainment_8_score' as const,
+    heading: 'Attainment 8',
+    hint: "Average grade across a pupil's best 8 GCSEs, including English and maths",
+    unit: '',
+  },
+};
+
+type PhaseKey = keyof typeof METRICS;
+
+/** All-through schools sit in both phases, matching the search filters. */
+function isPhase(school: School, phase: PhaseKey): boolean {
+  const p = (school.phase ?? '').toLowerCase();
+  if (p === 'all-through') return true;
+  return phase === 'secondary'
+    ? p.includes('secondary') || p === '16 plus'
+    : p.includes('primary') || p.includes('middle');
+}
+
+function SchoolTable({ schools, phase }: { schools: School[]; phase: PhaseKey }) {
+  const metric = METRICS[phase];
+  return (
+    <div className={styles.tableWrap}>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th scope="col">School</th>
+            {/* Same class as the value cell below: one rule aligns both, so
+                they cannot drift apart. */}
+            <th scope="col" className={styles.num}>
+              <abbr className={styles.metricHead} title={metric.hint}>
+                {metric.heading}
+              </abbr>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {schools.map((s) => {
+            const value = s[metric.key];
+            return (
+              <tr key={s.urn}>
+                <td>
+                  <Link href={schoolUrl(s.urn, s.school_name)} className={styles.schoolLink}>
+                    {s.school_name}
+                  </Link>
+                </td>
+                <td className={styles.num}>
+                  {value == null
+                    ? <span className={styles.noData}>Not published</span>
+                    : `${Math.round(Number(value))}${metric.unit}`}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 export function PlaceView({ detail, phase, englandAverage, neighbours }: Props) {
   const { place, schools, averages } = detail;
-  const metric = phase === 'secondary' ? 'attainment_8_score' : 'rwm_expected_pct';
-  const local = averages[metric];
+  const local = averages[METRICS[phase ?? 'primary'].key];
   const phaseWord = phase === 'secondary' ? 'Secondary schools'
     : phase === 'primary' ? 'Primary schools' : 'Schools';
   const graded = OFSTED_LABELS
     .map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
     .filter(([, n]) => n > 0);
 
-  // ItemList tells Google this page is a ranked set rather than prose;
-  // BreadcrumbList puts the place in a hierarchy. Capped at 20 because that
-  // is what the page shows above the fold and what the markup should mirror.
+  /*
+   * An unphased page holds both primaries and secondaries, and they are
+   * scored on different measures — a percentage and a 0-90 score. Showing one
+   * column for both left 30% of rows blank on /schools/brentwood and put two
+   * incomparable scales in one column when it did not.
+   *
+   * So the phases get a table each. A blank cell inside one now means the
+   * school genuinely has no published result, which is worth saying.
+   */
+  const groups: Array<[PhaseKey, School[]]> = phase
+    ? [[phase, schools]]
+    : (['primary', 'secondary'] as PhaseKey[])
+        .map((p) => [p, schools.filter((s) => isPhase(s, p))] as [PhaseKey, School[]])
+        .filter(([, list]) => list.length > 0);
+
   const jsonLd = {
     '@context': 'https://schema.org',
     '@graph': [
@@ -60,8 +145,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
       {
         '@type': 'BreadcrumbList',
         itemListElement: [
-          { '@type': 'ListItem', position: 1, name: 'Schools',
-            item: absoluteUrl('/') },
+          { '@type': 'ListItem', position: 1, name: 'Schools', item: absoluteUrl('/') },
           { '@type': 'ListItem', position: 2, name: place.name },
         ],
       },
@@ -74,6 +158,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
+
       <header className={styles.header}>
         <h1>{phaseWord} in {place.name}</h1>
         <p className={styles.summary}>
@@ -81,7 +166,8 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           {place.parent_authority && (
             <>
               {' · '}
-              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}>
+              <Link href={`/schools/authority/${authoritySlug(place.parent_authority)}`}
+                className={styles.inlineLink}>
                 {place.parent_authority}
               </Link>
             </>
@@ -89,6 +175,16 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         </p>
       </header>
 
+      {!phase && (place.phases ?? []).length > 0 && (
+        <nav className={styles.phaseLinks} aria-label="By phase">
+          {(place.phases ?? []).map((ph) => (
+            <Link key={ph} href={`/schools/${place.slug}/${ph}`} className={styles.phaseLink}>
+              {ph === 'secondary' ? 'Secondary schools' : 'Primary schools'} in {place.name}
+            </Link>
+          ))}
+        </nav>
+      )}
+
       {local != null && englandAverage != null && (
         <p className={styles.compare} data-testid="local-vs-england">
           {place.name} averages <strong>{Math.round(local)}</strong> against{' '}
@@ -104,28 +200,17 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
         </ul>
       )}
 
-      <div className={styles.tableWrap}>
-        <table className={styles.table}>
-          <thead>
-            <tr>
-              <th>School</th>
-              <th>{phase === 'secondary' ? 'Attainment 8' : 'RWM expected'}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {schools.map((s) => (
-              <tr key={s.urn}>
-                <td>
-                  <Link href={schoolUrl(s.urn, s.school_name)}>{s.school_name}</Link>
-                </td>
-                <td className={styles.num}>
-                  {s[metric] == null ? '—' : Math.round(Number(s[metric]))}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {groups.map(([p, list]) => (
+        <section key={p} className={styles.group}>
+          {groups.length > 1 && (
+            <h2 className={styles.groupHeading}>
+              {p === 'secondary' ? 'Secondary schools' : 'Primary schools'}
+              <span className={styles.groupCount}>{list.length}</span>
+            </h2>
+          )}
+          <SchoolTable schools={list} phase={p} />
+        </section>
+      ))}
 
       {neighbours.length > 0 && (
         <nav className={styles.neighbours} aria-label="Nearby places">
@@ -133,7 +218,7 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
           <ul>
             {neighbours.map((n) => (
               <li key={n.kind + n.slug}>
-                <Link href={placeUrl(n.kind, n.slug)}>{n.name}</Link>
+                <Link href={placeUrl(n.kind, n.slug)} className={styles.inlineLink}>{n.name}</Link>
               </li>
             ))}
           </ul>

nextjs-app/lib/places.ts

@@ -13,6 +13,9 @@ export interface PlaceSummary {
   slug: string;
   name: string;
   count: number;
+  /** Phases that clear the threshold on their own, so the page links
+   *  variants that exist rather than 404s. Absent on the registry listing. */
+  phases?: string[];
 }
 
 export interface PlaceDetail {