refactor(search): drop the applied-filter row above the results

The row repeated the search, local authority and school type above the
results list, and nothing else: no phase, distance, gender, sixth form,
admissions or faith. The filter bar already shows every one of them, in
its selects and More filters count on desktop and as removable chips on
phones, so the row was a partial second copy.

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

backend/app.py

@@ -40,20 +40,21 @@ from .data_loader import (
 from .data_loader import get_data_info as get_db_info
 from . import flags
 from .places import build_place_index, build_place_registry, places_for_urn
-from .schemas import METRIC_DEFINITIONS, RANKING_COLUMNS, SCHOOL_COLUMNS
+from .schemas import METRIC_DEFINITIONS, PHASE_GROUPS, RANKING_COLUMNS, SCHOOL_COLUMNS
+from .school_groups import (
+    FAITH_GROUPS,
+    FAITH_KEYS,
+    TYPE_GROUP_KEYS,
+    TYPE_GROUPS,
+    faith_groups_for,
+    type_group_for,
+)
+from .nearby_schools import select_nearby
 from .utils import clean_for_json, convert_to_native
 
 # Values to exclude from filter dropdowns (empty strings, non-applicable labels)
 EXCLUDED_FILTER_VALUES = {"", "Not applicable", "Does not apply"}
 
-# Maps user-facing phase filter values to the GIAS PhaseOfEducation values they include.
-# All-through schools appear in both primary and secondary results.
-PHASE_GROUPS: dict[str, set[str]] = {
-    "primary": {"primary", "middle deemed primary", "all-through"},
-    "secondary": {"secondary", "middle deemed secondary", "all-through", "16 plus"},
-    "all-through": {"all-through"},
-}
-
 # Must match SITE_URL in nextjs-app/lib/site.ts. The apex 301s to www, and a
 # sitemap <loc> that redirects wastes a crawl on every URL it lists.
 BASE_URL = "https://www.schoolcompare.co.uk"
@@ -116,7 +117,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>"
@@ -273,6 +274,27 @@ def _places_payload(urn: int) -> list[dict]:
     return payload
 
 
+def _nearby_schools_payload(urn: int) -> list[dict]:
+    """The nearest eligible schools this page may offer, closest first.
+
+    Phase and reach are read from the school's own row inside select_nearby,
+    so nothing here can hand it a phase that disagrees with the data.
+
+    Wrapped: a failure in selection must never 500 a page that is otherwise
+    complete, which is the posture get_supplementary_data already takes. The
+    section simply does not render.
+    """
+    try:
+        return select_nearby(load_latest_school_data(), int(urn))
+    except Exception:
+        import logging
+
+        logging.getLogger(__name__).exception(
+            "Nearby schools selection failed for urn=%s", urn
+        )
+        return []
+
+
 def _place_sitemap_rows(kinds: tuple[str, ...], registry=None) -> list[str]:
     """A <url> per place, plus a phase variant wherever that phase clears the
     threshold on its own.
@@ -594,6 +616,15 @@ def verify_admin_api_key(x_api_key: str = Header(None)) -> bool:
 
 
 # Input validation helpers
+def _names_in_group(names: pd.Series, in_group) -> set:
+    """The distinct names in a column that a group predicate accepts.
+
+    Evaluated once per distinct name rather than per row, so a filter over
+    every school costs a few dozen lookups.
+    """
+    return {n for n in names.dropna().unique() if in_group(n)}
+
+
 def sanitize_search_input(value: Optional[str], max_length: int = 100) -> Optional[str]:
     """Sanitize search input to prevent injection attacks."""
     if value is None:
@@ -722,7 +753,7 @@ async def get_schools(
         None, description="Filter by local authority", max_length=100
     ),
     school_type: Optional[str] = Query(None, description="Filter by school type", max_length=100),
-    phase: Optional[str] = Query(None, description="Filter by phase: primary, secondary, all-through", max_length=50),
+    phase: Optional[str] = Query(None, description="Filter by phase: primary or secondary (grouped), or any GIAS phase name (exact)", max_length=50),
     postcode: Optional[str] = Query(None, description="Search near postcode", max_length=10),
     radius: float = Query(5.0, ge=0.1, le=5, description="Search radius in miles"),
     page: int = Query(1, ge=1, le=1000, description="Page number"),
@@ -730,6 +761,7 @@ async def get_schools(
     gender: Optional[str] = Query(None, description="Filter by gender (Mixed/Boys/Girls)", max_length=50),
     admissions_policy: Optional[str] = Query(None, description="Filter by admissions policy", max_length=100),
     has_sixth_form: Optional[str] = Query(None, description="Filter by sixth form presence: yes/no", max_length=3),
+    faith: Optional[str] = Query(None, description="Filter by faith group key", max_length=40),
 ):
     """
     Get list of schools with pagination.
@@ -742,6 +774,7 @@ async def get_schools(
     local_authority = sanitize_search_input(local_authority)
     school_type = sanitize_search_input(school_type)
     phase = sanitize_search_input(phase)
+    faith = sanitize_search_input(faith)
     postcode = validate_postcode(postcode)
 
     # Load the pre-computed latest-year snapshot (cached after first request / startup).
@@ -757,11 +790,13 @@ async def get_schools(
 
     # Phase filter — uses PHASE_GROUPS so all-through/middle schools appear
     # in the correct phase(s) rather than being invisible to both filters.
+    # Any other GIAS phase (nursery, 16 plus, middle deemed ...) is an exact
+    # match. It must never fall through to no filter: the search page offers
+    # every phase, and "Nursery" used to return the whole result set.
     if phase:
         phase_lower = phase.lower().replace("_", "-")
-        allowed = PHASE_GROUPS.get(phase_lower)
-        if allowed:
-            df_latest = df_latest[df_latest["phase"].str.lower().isin(allowed)]
+        allowed = PHASE_GROUPS.get(phase_lower, {phase_lower})
+        df_latest = df_latest[df_latest["phase"].fillna("").str.lower().isin(allowed)]
 
     # Secondary-specific filters (after phase filter)
     if gender:
@@ -780,6 +815,22 @@ async def get_schools(
             flag = df_latest["age_range"].str.contains("18", na=False)
         df_latest = df_latest[flag if has_sixth_form == "yes" else ~flag]
 
+    # Faith group (backend/school_groups.py). A joint school is in every faith
+    # its label names; a missing religious character is "none". An unknown key
+    # matches nothing rather than being ignored, so a typo cannot show all.
+    if faith:
+        faith_key = faith.lower()
+        if faith_key in FAITH_KEYS and "religious_denomination" in df_latest.columns:
+            column = df_latest["religious_denomination"]
+            matches = column.isin(_names_in_group(column, lambda n: faith_key in faith_groups_for(n)))
+            # _names_in_group skips missing names; a missing religious
+            # character is "No religious character".
+            if faith_key == "none":
+                matches = matches | column.isna()
+            df_latest = df_latest[matches]
+        else:
+            df_latest = df_latest.iloc[0:0]
+
     # Include key result metrics for display on cards
     location_cols = ["latitude", "longitude"]
     result_cols = [
@@ -867,10 +918,17 @@ async def get_schools(
             schools_df["local_authority"].str.lower() == local_authority.lower()
         ]
 
+    # A type group key (backend/school_groups.py), or for an old link a raw
+    # GIAS type label, matched exactly as before.
     if school_type:
-        schools_df = schools_df[
-            schools_df["school_type"].str.lower() == school_type.lower()
-        ]
+        type_key = school_type.lower()
+        if type_key in TYPE_GROUP_KEYS:
+            column = schools_df["school_type"]
+            schools_df = schools_df[
+                column.isin(_names_in_group(column, lambda n: type_group_for(n) == type_key))
+            ]
+        else:
+            schools_df = schools_df[schools_df["school_type"].str.lower() == type_key]
 
     # Compute result-scoped filter values (before pagination).
     # Gender and admissions are secondary-only filters — scope them to schools
@@ -983,6 +1041,10 @@ async def get_school_details(request: Request, urn: int):
         # and authority both fall below the publish threshold has nowhere to
         # point, and the page renders without the module.
         "places": _places_payload(urn),
+        # The nearest eligible schools, closest first. Always present on a
+        # build with this code; the frontend treats absent and empty
+        # identically, which is what lets the two images deploy independently.
+        "nearby_schools": _nearby_schools_payload(urn),
         "yearly_data": clean_for_json(school_data),
         # Supplementary data (null if not yet populated by Kestra)
         "ofsted": supplementary.get("ofsted"),
@@ -1141,6 +1203,8 @@ async def get_filter_options(request: Request):
             "local_authorities": [],
             "school_types": [],
             "years": [],
+            "school_type_groups": [],
+            "faiths": [],
         }
 
     # Phases: return values from data, ordered sensibly
@@ -1150,6 +1214,18 @@ async def get_filter_options(request: Request):
     genders = clean_filter_values(secondary_df["gender"]) if "gender" in secondary_df.columns else []
     admissions_policies = clean_filter_values(secondary_df["admissions_policy"]) if "admissions_policy" in secondary_df.columns else []
 
+    def offered(groups, present):
+        return [{"value": key, "label": label} for key, label, _ in groups if key in present]
+
+    type_groups_present = (
+        {type_group_for(n) for n in df["school_type"].dropna().unique()} - {None}
+        if "school_type" in df.columns else set()
+    )
+    faiths_present = (
+        {f for n in df["religious_denomination"].unique() for f in faith_groups_for(n)}
+        if "religious_denomination" in df.columns else set()
+    )
+
     return {
         "local_authorities": clean_filter_values(df["local_authority"]) if "local_authority" in df.columns else [],
         "school_types": clean_filter_values(df["school_type"]) if "school_type" in df.columns else [],
@@ -1157,6 +1233,8 @@ async def get_filter_options(request: Request):
         "phases": phases,
         "genders": genders,
         "admissions_policies": admissions_policies,
+        "school_type_groups": offered(TYPE_GROUPS, type_groups_present),
+        "faiths": offered(FAITH_GROUPS, faiths_present),
     }
 
 

backend/nearby_schools.py

@@ -0,0 +1,263 @@
+"""Which nearby schools a detail page may offer as alternatives.
+
+HARD FILTERS decide eligibility, and encode claims the section is not allowed
+to make. A selective school is not an alternative to a non-selective one, a
+special school is not comparable to a mainstream one, and a Girls school is not
+an option for a Boys school's reader. They never relax, at any distance, even
+where that means the section does not render at all.
+
+DISTANCE decides the order, and nothing else does.
+
+An earlier version ranked by intake similarity first and used distance only as
+a tiebreak. That put a Catholic school 2.9 miles away above the community
+school 0.3 miles down the road, and — because the row filled from the best tier
+before widening — filled all six slots with faith matches while omitting every
+school a parent could actually walk to. For a primary, a school that far is not
+a weaker option; it is not an option. Distance is a constraint and intake is a
+preference, and the ranking now says so.
+
+Similarity survives as `shared`: what a candidate genuinely has in common with
+this school, reported on its card, so a reader applies their own weighting
+instead of having ours applied for them.
+
+Pure functions over a DataFrame: no I/O, no FastAPI, no database.
+"""
+
+from __future__ import annotations
+
+import re
+
+import numpy as np
+import pandas as pd
+
+from .schemas import PHASE_GROUPS
+
+# Three fit the row; the rest are behind the carousel arrows.
+MAX_SCHOOLS = 6
+MINIMUM = 2
+
+# How far the section will reach, in miles, when nothing closer exists.
+#
+# A sanity bound rather than a target: ordering by distance already handles
+# density, so a school in a dense area fills all six slots inside a mile and
+# never sees this. It decides one thing — what happens where the area is
+# sparse — and the answer differs by phase because catchments do. Primary
+# catchments are routinely under a mile; beyond two, a primary is not a weaker
+# option but not an option, and no section is the honest answer.
+PRIMARY_RADIUS_MILES = 2.0
+SECONDARY_RADIUS_MILES = 6.0
+POST16_RADIUS_MILES = 10.0
+
+EARTH_RADIUS_MILES = 3958.8
+
+_SPECIAL = re.compile(r"\bspecial\b|pupil referral|alternative provision", re.I)
+
+# Values that mean "this school has no religious character".
+_NO_FAITH = {"", "none", "does not apply", "not applicable"}
+
+
+def is_special_provision(school_type: str | None) -> bool:
+    """Mirror of isSpecialSchool() in nextjs-app/lib/utils.ts.
+
+    Special schools carry a mainstream phase, so phase alone cannot identify
+    them. The two implementations must agree: a school the frontend treats as
+    special for benchmarking but this treats as mainstream would be dropped
+    from its own England comparison and then offered as a peer to a mainstream
+    school on the next page along.
+    """
+    return bool(_SPECIAL.search(school_type or ""))
+
+
+def is_selective(admissions_policy: str | None) -> bool:
+    """Strictly selective. Unknown counts as non-selective, which is the safe
+    direction: it can only ever exclude a pairing, never invent one."""
+    return (admissions_policy or "").strip().lower() == "selective"
+
+
+def faith_key(denomination: str | None) -> str:
+    value = (denomination or "").strip().lower()
+    return "" if value in _NO_FAITH else value
+
+
+def faith_label(denomination: str | None) -> str:
+    return denomination.strip() if faith_key(denomination) else "No religious character"
+
+
+def genders_compatible(a: str | None, b: str | None) -> bool:
+    single = {"boys", "girls"}
+    left, right = (a or "").strip().lower(), (b or "").strip().lower()
+    return not (left in single and right in single and left != right)
+
+
+def is_secondary_phase(phase: str | None) -> bool:
+    """Whether this phase takes the secondary side: secondary group membership,
+    minus all-through.
+
+    Membership is read from PHASE_GROUPS rather than tested with `"secondary" in
+    phase`, because that substring misses "16 plus" — GIAS phase 6, which
+    PHASE_GROUPS deliberately files as secondary. The substring version fails
+    silently rather than loudly: a sixth-form college is simply handed the
+    primary bucket and offered infant schools as peers.
+
+    All-through is the exception. PHASE_GROUPS lists it on both sides because it
+    belongs on both phases' place pages, but the detail page renders it with the
+    primary template, and the metric follows the template.
+    """
+    text = (phase or "").strip().lower()
+    return text != "all-through" and text in PHASE_GROUPS["secondary"]
+
+
+def radius_miles(phase: str | None) -> float:
+    """How far this phase's section will reach when nothing closer exists."""
+    if (phase or "").strip().lower() == "16 plus":
+        return POST16_RADIUS_MILES
+    return SECONDARY_RADIUS_MILES if is_secondary_phase(phase) else PRIMARY_RADIUS_MILES
+
+
+def _phase_group(is_secondary: bool) -> set[str]:
+    return PHASE_GROUPS["secondary" if is_secondary else "primary"]
+
+
+def _haversine_miles(lat1: float, lon1: float, lat2, lon2):
+    """Vectorised, matching the postcode search in app.py."""
+    lat1_r, lon1_r = np.radians(lat1), np.radians(lon1)
+    lat2_r, lon2_r = np.radians(lat2.astype(float)), np.radians(lon2.astype(float))
+    dlat, dlon = lat2_r - lat1_r, lon2_r - lon1_r
+    a = np.sin(dlat / 2) ** 2 + np.cos(lat1_r) * np.cos(lat2_r) * np.sin(dlon / 2) ** 2
+    return 2 * EARTH_RADIUS_MILES * np.arcsin(np.sqrt(a))
+
+
+def _native(value):
+    """NaN and numpy scalars both reach JSONResponse badly; normalise here so
+    the caller never has to remember to."""
+    if value is None:
+        return None
+    if isinstance(value, np.generic):
+        value = value.item()
+    if isinstance(value, float) and np.isnan(value):
+        return None
+    return value
+
+
+def _mask(series: pd.Series, predicate) -> pd.Series:
+    """A boolean mask that survives an empty frame.
+
+    `Series.apply` on an empty Series returns an empty *DataFrame*, and using
+    that as a mask silently drops every column — so the next column lookup
+    raises KeyError rather than yielding no rows. This is not hypothetical: a
+    special school with no special school near it empties the frame at the
+    provision filter, which is the ordinary case for most special schools.
+    """
+    return pd.Series([predicate(value) for value in series], index=series.index, dtype=bool)
+
+
+def _shared(subject: pd.Series, candidate: pd.Series, is_secondary: bool) -> list[str]:
+    """What this candidate genuinely has in common with the subject.
+
+    Empty is a real answer, and renders no chips at all. A card claiming a
+    shared characteristic it does not have would be worse than a bare one —
+    and since these no longer affect the order, an empty list costs the school
+    nothing but its place in the row, which distance already decided.
+    """
+    shared: list[str] = []
+
+    gender = str(subject.get("gender") or "").strip()
+    if gender and str(candidate.get("gender") or "").strip().lower() == gender.lower():
+        shared.append(gender)
+
+    if is_secondary:
+        policy = str(candidate.get("admissions_policy") or "").strip()
+        subject_policy = str(subject.get("admissions_policy") or "").strip()
+        if (
+            policy
+            and policy.lower() == subject_policy.lower()
+            and policy.lower() not in {"not applicable", "unknown"}
+        ):
+            shared.append(policy)
+
+    if faith_key(candidate.get("religious_denomination")) == faith_key(
+        subject.get("religious_denomination")
+    ):
+        shared.append(faith_label(candidate.get("religious_denomination")))
+
+    return shared
+
+
+def select_nearby(frame: pd.DataFrame, urn: int) -> list[dict]:
+    """The nearest eligible schools, closest first — at most MAX_SCHOOLS, and
+    none at all below MINIMUM.
+
+    The phase is read from the subject's own row rather than passed in, so a
+    caller cannot hand this a phase that disagrees with the data it selects
+    from.
+    """
+    subject_rows = frame[frame["urn"] == urn]
+    if subject_rows.empty:
+        return []
+    subject = subject_rows.iloc[0]
+
+    lat, lon = _native(subject.get("latitude")), _native(subject.get("longitude"))
+    if lat is None or lon is None:
+        return []
+
+    phase = subject.get("phase")
+    is_secondary = is_secondary_phase(phase)
+    reach = radius_miles(phase)
+    metric_key = "attainment_8_score" if is_secondary else "rwm_expected_pct"
+
+    candidates = frame[frame["urn"] != urn].copy()
+    for column in ("latitude", "longitude"):
+        candidates = candidates[candidates[column].notna()]
+    if candidates.empty:
+        return []
+
+    # ── Hard filters ────────────────────────────────────────────────────
+    allowed_phases = _phase_group(is_secondary)
+    candidates = candidates[
+        candidates["phase"].fillna("").str.lower().isin(allowed_phases)
+    ]
+    candidates = candidates[candidates["status"].fillna("").str.lower().str.startswith("open")]
+
+    subject_special = is_special_provision(subject.get("school_type"))
+    special = _mask(candidates["school_type"], is_special_provision)
+    candidates = candidates[special if subject_special else ~special]
+
+    subject_selective = is_selective(subject.get("admissions_policy"))
+    selective = _mask(candidates["admissions_policy"], is_selective)
+    candidates = candidates[selective if subject_selective else ~selective]
+
+    subject_gender = subject.get("gender")
+    candidates = candidates[
+        _mask(candidates["gender"], lambda g: genders_compatible(subject_gender, g))
+    ]
+    if candidates.empty:
+        return []
+
+    candidates["distance_miles"] = _haversine_miles(
+        lat, lon, candidates["latitude"].values, candidates["longitude"].values
+    ).round(1)
+
+    # ── Nearest first, and nothing else has a say ───────────────────────
+    within = candidates[candidates["distance_miles"] <= reach]
+    if len(within) < MINIMUM:
+        return []
+
+    selected = within.sort_values(["distance_miles", "urn"]).head(MAX_SCHOOLS)
+    return [
+        {
+            "urn": int(row["urn"]),
+            "school_name": str(row.get("school_name") or ""),
+            "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,
+            "metric_year": _native(row.get("year")),
+        }
+        for _, row in selected.iterrows()
+    ]

backend/schemas.py

@@ -532,6 +532,18 @@ RANKING_COLUMNS = [
     "gcse_grade_91_pct",
 ]
 
+# Maps user-facing phase filter values to the GIAS PhaseOfEducation values they
+# include. All-through schools appear in both primary and secondary results,
+# which is why this is a set per phase rather than a single string comparison.
+#
+# Lives here rather than in app.py because nearby_schools.py needs it too, and
+# importing app from there would be a cycle.
+PHASE_GROUPS: dict[str, set[str]] = {
+    "primary": {"primary", "middle deemed primary", "all-through"},
+    "secondary": {"secondary", "middle deemed secondary", "all-through", "16 plus"},
+    "all-through": {"all-through"},
+}
+
 # School listing columns
 SCHOOL_COLUMNS = [
     "urn",

backend/school_groups.py

@@ -0,0 +1,104 @@
+"""Parent-facing groups over GIAS establishment types and religious characters.
+
+The 34 GIAS establishment types describe governance and funding, which for a
+mainstream state school barely changes what a parent experiences. The search
+filter offers six groups a parent recognises instead, and a faith filter in
+place of the faith signal that "Voluntary aided" and "Voluntary controlled"
+only half carry. See
+docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md.
+
+Groups are defined over GIAS codes and looked up by the translated name,
+because the DataFrame the API filters carries names only: the codes are
+replaced at load (data_loader.translate_gias_code_columns), the legacy-name
+mart fallback never had them, and test fixtures are written in names.
+"""
+
+from typing import Optional
+
+import pandas as pd
+
+from .gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
+
+# (key, label, GIAS TypeOfEstablishment codes), in the order shown.
+TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
+    # Academy sponsor led, Academy converter, Free schools, University technical
+    # college, Studio schools, City technology college. UTCs and studio schools
+    # are legally academies, and a family considering one searches by name.
+    ("academy", "State school: academy or free school", frozenset({28, 34, 35, 40, 41, 6})),
+    # Community, Voluntary aided, Voluntary controlled, Foundation, LA nursery.
+    ("council", "State school: council-run", frozenset({1, 2, 3, 5, 15})),
+    ("independent", "Independent (fee-paying)", frozenset({11})),
+    # Every special type, independent ones included (usually funded by the
+    # council through an EHCP, so SEND provision to a parent, not private
+    # school), and Special post 16 institutions.
+    ("special", "Special school (SEND)", frozenset({7, 8, 10, 12, 32, 33, 36, 44})),
+    # Further education, Sixth form centres, the 16-19 academies and free schools.
+    ("post16", "Sixth form or college", frozenset({18, 31, 39, 45, 46})),
+    # Pupil referral units and AP academies and free schools. Last: parents do
+    # not apply to these; the local authority places children there.
+    ("alternative", "Alternative provision", frozenset({14, 38, 42, 43})),
+)
+
+# In no group, so reachable only under "Any school type": Secure units,
+# Miscellaneous, Higher education institutions, Online provider, Institution
+# funded by other government department, Academy secure 16 to 19.
+UNOFFERED_TYPE_CODES: frozenset[int] = frozenset({24, 27, 29, 49, 56, 57})
+
+# (key, label, GIAS ReligiousCharacter codes), in the order shown. A joint
+# school is in every faith its label names; a generic "Christian" beside a
+# named church adds nothing.
+FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
+    # Does not apply, None, and 99 (a blank label).
+    ("none", "No religious character", frozenset({0, 6, 99})),
+    ("church_of_england", "Church of England",
+     frozenset({2, 9, 10, 11, 12, 13, 19, 20, 30, 31, 32, 33, 34, 41, 48})),
+    ("roman_catholic", "Roman Catholic", frozenset({3, 11, 13, 35, 48})),
+    # 28 "Inter- / non- denominational" is how GIAS files Christian schools
+    # tied to no one church.
+    ("other_christian", "Other Christian",
+     frozenset({4, 8, 9, 10, 12, 14, 15, 16, 17, 18, 19, 22, 26, 28, 30, 33,
+                37, 38, 39, 40, 41, 44, 45, 46, 47})),
+    ("jewish", "Jewish", frozenset({5, 36, 43})),
+    ("muslim", "Muslim", frozenset({7, 42, 49})),
+    ("other_faith", "Other faith", frozenset({21, 24, 25, 29})),
+)
+
+TYPE_GROUP_KEYS: frozenset[str] = frozenset(k for k, _, _ in TYPE_GROUPS)
+FAITH_KEYS: frozenset[str] = frozenset(k for k, _, _ in FAITH_GROUPS)
+
+
+def _key(name: str) -> str:
+    return name.strip().lower()
+
+
+_TYPE_GROUP_BY_NAME: dict[str, str] = {
+    _key(SCHOOL_TYPE[code]): key
+    for key, _, codes in TYPE_GROUPS
+    for code in codes
+    if code in SCHOOL_TYPE
+}
+
+_FAITHS_BY_NAME: dict[str, tuple[str, ...]] = {}
+for _faith, _, _codes in FAITH_GROUPS:
+    for _code in sorted(_codes):
+        if _code in RELIGIOUS_CHARACTER:
+            _name = _key(RELIGIOUS_CHARACTER[_code])
+            _FAITHS_BY_NAME[_name] = _FAITHS_BY_NAME.get(_name, ()) + (_faith,)
+
+
+def type_group_for(name: object) -> Optional[str]:
+    """The type group of a GIAS establishment type name, or None."""
+    if not isinstance(name, str):
+        return None
+    return _TYPE_GROUP_BY_NAME.get(_key(name))
+
+
+def faith_groups_for(name: object) -> tuple[str, ...]:
+    """The faith groups of a GIAS religious character name.
+
+    A missing or blank name is "No religious character". A name the
+    dictionary does not know has no faith, so it matches no faith option.
+    """
+    if not isinstance(name, str):
+        return ("none",) if name is None or pd.isna(name) else ()
+    return _FAITHS_BY_NAME.get(_key(name), ())

backend/tests/test_nearby_schools.py

@@ -0,0 +1,395 @@
+"""Selection rules for the nearby-schools section.
+
+Hard filters encode claims the section is not allowed to make — that a
+selective school is an alternative to a non-selective one, that a special
+school is comparable to a mainstream one, or that a Girls school is an option
+for a Boys school's reader. They decide who is eligible.
+
+Distance decides the order, and nothing else does. An earlier version ranked by
+intake similarity first, which put a Catholic school 2.9 miles away above the
+community school 0.3 miles down the road — for a primary, a school that far is
+not a weaker option, it is not an option. Similarity is now reported on the
+card and never reorders the row.
+"""
+
+import numpy as np
+import pandas as pd
+
+from backend.nearby_schools import (
+    is_secondary_phase,
+    radius_miles,
+    select_nearby,
+)
+
+BASE_LAT, BASE_LON = 51.5000, -0.1000
+
+
+def _row(urn, name, **overrides):
+    base = {
+        "urn": urn,
+        "school_name": name,
+        "local_authority": "Testshire",
+        "school_type": "Community school",
+        "phase": "Primary",
+        "age_range": "4-11",
+        "status": "Open",
+        "gender": "Mixed",
+        "religious_denomination": "None",
+        "admissions_policy": "Not applicable",
+        "latitude": BASE_LAT,
+        "longitude": BASE_LON,
+        "year": 202425,
+        "rwm_expected_pct": 70.0,
+        "attainment_8_score": np.nan,
+    }
+    base.update(overrides)
+    return base
+
+
+def _frame(*rows):
+    return pd.DataFrame(list(rows))
+
+
+def _at(miles):
+    """A latitude `miles` north of BASE_LAT."""
+    return BASE_LAT + miles / 69.0
+
+
+# ---------------------------------------------------------------------------
+# Order: distance, and only distance
+# ---------------------------------------------------------------------------
+
+def test_returns_nearest_first():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Mid", latitude=_at(1.0)),
+        _row(100003, "Near", latitude=_at(0.4)),
+        _row(100004, "Far", latitude=_at(1.8)),
+    )
+    result = select_nearby(frame, 100001)
+    assert [s["urn"] for s in result] == [100003, 100002, 100004]
+    assert result[0]["distance_miles"] == 0.4
+
+
+def test_a_faith_match_never_outranks_a_closer_school():
+    """The reported defect. A Catholic primary surrounded by Catholic primaries
+    showed six of them and omitted the community school down the road."""
+    frame = _frame(
+        _row(100001, "St Jude's RC Primary", religious_denomination="Roman Catholic"),
+        _row(100002, "Elm Grove Primary", religious_denomination="None", latitude=_at(0.3)),
+        _row(100003, "Holy Cross RC", religious_denomination="Roman Catholic", latitude=_at(0.8)),
+        _row(100004, "Sacred Heart RC", religious_denomination="Roman Catholic", latitude=_at(1.2)),
+        _row(100005, "St Peter's RC", religious_denomination="Roman Catholic", latitude=_at(1.6)),
+    )
+    result = select_nearby(frame, 100001)
+    assert result[0]["urn"] == 100002, "the nearest school leads, whatever its intake"
+    assert [s["distance_miles"] for s in result] == sorted(s["distance_miles"] for s in result)
+
+
+def test_the_nearest_eligible_school_is_always_shown():
+    """Whatever else changes, a section titled "nearby" cannot omit the nearest
+    school while listing one four times further away."""
+    frame = _frame(
+        _row(100001, "Subject", gender="Boys", religious_denomination="Roman Catholic"),
+        _row(100002, "Nearest", gender="Mixed", religious_denomination="None", latitude=_at(0.2)),
+        *[
+            _row(100010 + n, f"Match {n}", gender="Boys",
+                 religious_denomination="Roman Catholic", latitude=_at(0.9 + n * 0.1))
+            for n in range(6)
+        ],
+    )
+    assert select_nearby(frame, 100001)[0]["urn"] == 100002
+
+
+def test_caps_at_six_taking_the_nearest():
+    frame = _frame(
+        _row(100001, "Subject"),
+        *[_row(100010 + n, f"Peer {n}", latitude=_at(0.1 * (n + 1))) for n in range(7)],
+    )
+    result = select_nearby(frame, 100001)
+    assert len(result) == 6
+    assert 100016 not in {s["urn"] for s in result}, "the seventh-nearest is the one dropped"
+
+
+def test_fewer_than_two_matches_returns_empty():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Only neighbour", latitude=_at(0.5)),
+    )
+    assert select_nearby(frame, 100001) == []
+
+
+def test_excludes_the_subject_school():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    assert 100001 not in {s["urn"] for s in select_nearby(frame, 100001)}
+
+
+def test_a_school_is_never_listed_twice():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    result = select_nearby(frame, 100001)
+    assert len(result) == len({s["urn"] for s in result})
+
+
+# ---------------------------------------------------------------------------
+# Reach: a sanity bound, not a target
+# ---------------------------------------------------------------------------
+
+def test_primary_does_not_reach_past_two_miles():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Just inside", latitude=_at(1.9)),
+        _row(100003, "Just outside", latitude=_at(2.4)),
+        _row(100004, "Miles away", latitude=_at(4.0)),
+    )
+    # One inside the cap is below the minimum, so nothing renders at all —
+    # a primary with nothing within two miles has no nearby schools.
+    assert select_nearby(frame, 100001) == []
+
+
+def test_secondary_reaches_further_than_primary():
+    frame = _frame(
+        _row(100001, "Subject", phase="Secondary"),
+        _row(100002, "A", phase="Secondary", latitude=_at(3.0)),
+        _row(100003, "B", phase="Secondary", latitude=_at(5.5)),
+    )
+    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
+    assert radius_miles("All-through") == 2.0
+    assert radius_miles("Secondary") == 6.0
+    assert radius_miles("Middle deemed secondary") == 6.0
+    # Post-16 is the phase people travel furthest for.
+    assert radius_miles("16 plus") == 10.0
+
+
+# ---------------------------------------------------------------------------
+# Hard filters: eligibility, never order
+# ---------------------------------------------------------------------------
+
+def test_selective_never_meets_non_selective():
+    frame = _frame(
+        _row(100001, "Grammar", phase="Secondary", admissions_policy="Selective"),
+        _row(100002, "Comp A", phase="Secondary", admissions_policy="Non-selective", latitude=_at(0.5)),
+        _row(100003, "Comp B", phase="Secondary", admissions_policy="Non-selective", latitude=_at(0.6)),
+    )
+    assert select_nearby(frame, 100001) == []
+    assert 100001 not in {s["urn"] for s in select_nearby(frame, 100002)}
+
+
+def test_special_schools_match_only_each_other():
+    frame = _frame(
+        _row(100001, "Special", school_type="Community special school"),
+        _row(100002, "Mainstream A", latitude=_at(0.5)),
+        _row(100003, "Mainstream B", latitude=_at(0.6)),
+    )
+    assert select_nearby(frame, 100001) == []
+    assert select_nearby(frame, 100002) == []
+
+
+def test_boys_never_meets_girls():
+    frame = _frame(
+        _row(100001, "Boys School", gender="Boys"),
+        _row(100002, "Girls School", gender="Girls", latitude=_at(0.5)),
+        _row(100003, "Mixed School", gender="Mixed", latitude=_at(0.6)),
+        _row(100004, "Another Mixed", gender="Mixed", latitude=_at(0.7)),
+    )
+    urns = {s["urn"] for s in select_nearby(frame, 100001)}
+    assert 100002 not in urns
+    assert urns == {100003, 100004}
+
+
+def test_closed_schools_and_missing_coordinates_are_dropped():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "Closed", status="Closed", latitude=_at(0.5)),
+        _row(100003, "No coords", latitude=np.nan, longitude=np.nan),
+        _row(100004, "Good A", latitude=_at(0.6)),
+        _row(100005, "Good B", latitude=_at(0.7)),
+    )
+    assert {s["urn"] for s in select_nearby(frame, 100001)} == {100004, 100005}
+
+
+def test_all_through_is_offered_on_both_phase_sides():
+    frame = _frame(
+        _row(100001, "Primary subject", phase="Primary"),
+        _row(100002, "All through", phase="All-through", latitude=_at(0.5)),
+        _row(100003, "Primary peer", phase="Primary", latitude=_at(0.6)),
+    )
+    assert 100002 in {s["urn"] for s in select_nearby(frame, 100001)}
+
+    secondary = _frame(
+        _row(100010, "Secondary subject", phase="Secondary"),
+        _row(100002, "All through", phase="All-through", latitude=_at(0.5)),
+        _row(100011, "Secondary peer", phase="Secondary", latitude=_at(0.6)),
+    )
+    assert 100002 in {s["urn"] for s in select_nearby(secondary, 100010)}
+
+
+def test_sixteen_plus_is_matched_against_secondary_not_primary():
+    """GIAS phase 6 is "16 plus", and PHASE_GROUPS puts it in the secondary
+    group — a sixth-form college's peers are secondaries and other colleges,
+    never primary schools. A substring test for "secondary" misses it silently:
+    no crash, just a page offering infant schools to a sixth form."""
+    frame = _frame(
+        _row(100001, "Sixth Form College", phase="16 plus", age_range="16-19"),
+        _row(100002, "Nearby Secondary", phase="Secondary", latitude=_at(0.5),
+             attainment_8_score=52.0),
+        _row(100003, "Nearby College", phase="16 plus", latitude=_at(0.6)),
+        _row(100004, "Nearby Primary", phase="Primary", latitude=_at(0.1)),
+    )
+    result = select_nearby(frame, 100001)
+    urns = {s["urn"] for s in result}
+    assert 100004 not in urns, "a primary school is not a peer for a sixth form"
+    assert urns == {100002, 100003}
+    assert all(s["metric_key"] == "attainment_8_score" for s in result)
+
+
+def test_is_secondary_phase_agrees_with_the_phase_groups_it_selects_from():
+    for phase in ("Secondary", "Middle deemed secondary", "16 plus"):
+        assert is_secondary_phase(phase) is True, phase
+    for phase in ("Primary", "Middle deemed primary", "Nursery", "", None):
+        assert is_secondary_phase(phase) is False, phase
+    # In PHASE_GROUPS an all-through school is on both sides, but it renders
+    # with the primary template, and the metric follows the phase side.
+    assert is_secondary_phase("All-through") is False
+
+
+# ---------------------------------------------------------------------------
+# What the card reports
+# ---------------------------------------------------------------------------
+
+def test_shared_lists_only_what_is_actually_shared():
+    frame = _frame(
+        _row(100001, "Subject", phase="Secondary", gender="Mixed",
+             religious_denomination="None", admissions_policy="Non-selective"),
+        _row(100002, "Full match", phase="Secondary", gender="Mixed",
+             religious_denomination="None", admissions_policy="Non-selective", latitude=_at(0.5)),
+        _row(100003, "Faith differs", phase="Secondary", gender="Mixed",
+             religious_denomination="Church of England", admissions_policy="Non-selective", latitude=_at(0.6)),
+    )
+    by_urn = {s["urn"]: s for s in select_nearby(frame, 100001)}
+    assert by_urn[100002]["shared"] == ["Mixed", "Non-selective", "No religious character"]
+    assert by_urn[100003]["shared"] == ["Mixed", "Non-selective"]
+
+
+def test_a_shared_faith_is_named():
+    frame = _frame(
+        _row(100001, "Subject", religious_denomination="Roman Catholic"),
+        _row(100002, "Also RC", religious_denomination="Roman Catholic", latitude=_at(0.4)),
+        _row(100003, "Secular", religious_denomination="None", latitude=_at(0.5)),
+    )
+    by_urn = {s["urn"]: s for s in select_nearby(frame, 100001)}
+    assert "Roman Catholic" in by_urn[100002]["shared"]
+    assert by_urn[100003]["shared"] == ["Mixed"]
+
+
+def test_shared_is_empty_when_nothing_is_shared():
+    frame = _frame(
+        _row(100001, "Subject", gender="Boys", religious_denomination="Roman Catholic"),
+        _row(100002, "A", gender="Mixed", religious_denomination="None", latitude=_at(0.4)),
+        _row(100003, "B", gender="Mixed", religious_denomination="Church of England", latitude=_at(0.5)),
+    )
+    assert all(s["shared"] == [] for s in select_nearby(frame, 100001))
+
+
+def test_no_tier_is_reported_because_there_are_no_tiers():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.4)),
+        _row(100003, "B", latitude=_at(0.5)),
+    )
+    assert all("tier" not in s for s in select_nearby(frame, 100001))
+
+
+def test_metric_follows_the_phase_side_not_the_neighbour():
+    frame = _frame(
+        _row(100001, "Subject", phase="Secondary", attainment_8_score=50.0),
+        _row(100002, "A", phase="Secondary", attainment_8_score=52.8, latitude=_at(0.5)),
+        _row(100003, "B", phase="Secondary", attainment_8_score=np.nan, latitude=_at(0.6)),
+    )
+    by_urn = {s["urn"]: s for s in select_nearby(frame, 100001)}
+    assert by_urn[100002]["metric_key"] == "attainment_8_score"
+    assert by_urn[100002]["metric_value"] == 52.8
+    assert by_urn[100002]["metric_year"] == 202425
+    assert by_urn[100003]["metric_value"] is None
+
+
+def test_values_are_json_safe_native_types():
+    frame = _frame(
+        _row(100001, "Subject"),
+        _row(100002, "A", latitude=_at(0.5)),
+        _row(100003, "B", latitude=_at(0.6)),
+    )
+    for school in select_nearby(frame, 100001):
+        assert isinstance(school["urn"], int)
+        assert isinstance(school["distance_miles"], float)
+        assert not isinstance(school["metric_value"], np.generic)
+
+
+# ---------------------------------------------------------------------------
+# The endpoint
+# ---------------------------------------------------------------------------
+
+import pytest
+from fastapi.testclient import TestClient
+
+
+def _endpoint_frame():
+    return _frame(
+        _row(100001, "Subject Primary"),
+        _row(100002, "Neighbour A", latitude=_at(0.5)),
+        _row(100003, "Neighbour B", latitude=_at(0.6)),
+    )
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _endpoint_frame)
+    monkeypatch.setattr(app_module, "load_school_data", _endpoint_frame)
+    monkeypatch.setattr(app_module, "get_supplementary_data", lambda db, urn: {})
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def test_detail_payload_carries_nearby_schools(client):
+    resp = client.get("/api/schools/100001")
+    assert resp.status_code == 200, resp.text
+    similar = resp.json()["nearby_schools"]
+    assert [s["school_name"] for s in similar] == ["Neighbour A", "Neighbour B"]
+    assert similar[0]["metric_key"] == "rwm_expected_pct"
+
+
+def test_a_failure_in_selection_does_not_break_the_page(client, monkeypatch):
+    from backend import app as app_module
+
+    def _explode(*args, **kwargs):
+        raise ValueError("selection blew up")
+
+    monkeypatch.setattr(app_module, "select_nearby", _explode)
+    resp = client.get("/api/schools/100001")
+    assert resp.status_code == 200, resp.text
+    assert resp.json()["nearby_schools"] == []

backend/tests/test_phase_filter.py

@@ -0,0 +1,84 @@
+"""The /api/schools phase filter.
+
+The search page offers every GIAS phase, but the filter only knew the three
+grouped ones (primary, secondary, all-through). Anything else — nursery,
+16 plus, the middle-deemed phases — fell through to no filter at all, so
+"Nursery" returned the whole result set, mostly primaries.
+"""
+
+import numpy as np
+import pandas as pd
+import pytest
+from fastapi.testclient import TestClient
+
+PHASES = {
+    100001: "Nursery",
+    100002: "Primary",
+    100003: "Middle deemed primary",
+    100004: "Secondary",
+    100005: "Middle deemed secondary",
+    100006: "16 plus",
+    100007: "All-through",
+}
+
+
+def _schools_df() -> pd.DataFrame:
+    base = {
+        "local_authority": "Testshire",
+        "school_type": "Academy",
+        "address": "1 Test Street",
+        "town": "Testtown",
+        "postcode": "TS1 1AA",
+        "religious_denomination": None,
+        "age_range": "4-11",
+        "has_sixth_form": None,
+        "gender": "Mixed",
+        "admissions_policy": None,
+        "ofsted_grade": np.nan,
+        "ofsted_date": None,
+        "ofsted_framework": None,
+        "latitude": 51.5,
+        "longitude": -0.1,
+        "year": 202425,
+        "total_pupils": 300,
+        "rwm_expected_pct": np.nan,
+        "attainment_8_score": np.nan,
+    }
+    return pd.DataFrame([
+        {**base, "urn": urn, "school_name": f"{phase} School", "phase": phase}
+        for urn, phase in PHASES.items()
+    ])
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
+    monkeypatch.setattr(app_module, "load_school_data", _schools_df)
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def _urns(client, phase):
+    resp = client.get("/api/schools", params={"phase": phase})
+    assert resp.status_code == 200, resp.text
+    return sorted(s["urn"] for s in resp.json()["schools"])
+
+
+@pytest.mark.parametrize("phase, urn", [
+    ("nursery", 100001),
+    ("16 plus", 100006),
+    ("middle deemed primary", 100003),
+    ("middle deemed secondary", 100005),
+])
+def test_an_ungrouped_phase_matches_exactly(client, phase, urn):
+    assert _urns(client, phase) == [urn]
+
+
+def test_grouped_phases_still_take_in_their_related_phases(client):
+    assert _urns(client, "primary") == [100002, 100003, 100007]
+    assert _urns(client, "secondary") == [100004, 100005, 100006, 100007]
+
+
+def test_an_unknown_phase_returns_nothing_rather_than_everything(client):
+    assert _urns(client, "kindergarten") == []

backend/tests/test_school_groups.py

@@ -0,0 +1,98 @@
+"""Parent-facing groups over GIAS establishment types and religious characters.
+
+Every GIAS code must be accounted for, so a new DfE code fails here instead of
+silently vanishing from the filter.
+"""
+
+from pathlib import Path
+
+import numpy as np
+import pytest
+import yaml
+
+from backend.gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
+from backend.school_groups import (
+    FAITH_GROUPS,
+    TYPE_GROUPS,
+    UNOFFERED_TYPE_CODES,
+    faith_groups_for,
+    type_group_for,
+)
+
+DBT_PROJECT = Path(__file__).resolve().parents[2] / "pipeline" / "transform" / "dbt_project.yml"
+
+
+def _non_england_codes() -> set[int]:
+    return set(yaml.safe_load(DBT_PROJECT.read_text())["vars"]["non_england_school_type_codes"])
+
+
+def test_every_type_code_is_in_exactly_one_place():
+    places = [codes for _, _, codes in TYPE_GROUPS] + [UNOFFERED_TYPE_CODES, _non_england_codes()]
+    for code in SCHOOL_TYPE:
+        homes = sum(code in p for p in places)
+        assert homes == 1, f"type code {code} ({SCHOOL_TYPE[code]}) is in {homes} places"
+
+
+def test_every_religion_code_has_a_faith():
+    for code, name in RELIGIOUS_CHARACTER.items():
+        assert any(code in codes for _, _, codes in FAITH_GROUPS), f"{code} {name!r}"
+
+
+def test_type_groups_in_display_order():
+    assert [k for k, _, _ in TYPE_GROUPS] == [
+        "academy", "council", "independent", "special", "post16", "alternative"]
+
+
+def test_faiths_in_display_order():
+    assert [k for k, _, _ in FAITH_GROUPS] == [
+        "none", "church_of_england", "roman_catholic", "other_christian",
+        "jewish", "muslim", "other_faith"]
+
+
+@pytest.mark.parametrize("name, group", [
+    ("Academy converter", "academy"),
+    ("University technical college", "academy"),
+    ("Voluntary aided school", "council"),
+    ("Local authority nursery school", "council"),
+    ("Other independent school", "independent"),
+    ("Other independent special school", "special"),
+    ("Special post 16 institution", "special"),
+    ("Further education", "post16"),
+    ("Pupil referral unit", "alternative"),
+    ("academy CONVERTER", "academy"),
+])
+def test_type_group_by_name(name, group):
+    assert type_group_for(name) == group
+
+
+@pytest.mark.parametrize("name", [
+    "Higher education institutions", "Miscellaneous", "Unknown (9999)", "Academy", "", None, np.nan,
+])
+def test_unoffered_or_unknown_types_have_no_group(name):
+    assert type_group_for(name) is None
+
+
+@pytest.mark.parametrize("name, faiths", [
+    ("Roman Catholic/Church of England", ("church_of_england", "roman_catholic")),
+    ("Roman Catholic/Anglican", ("church_of_england", "roman_catholic")),
+    ("Church of England/Methodist", ("church_of_england", "other_christian")),
+    ("Church of England/Christian", ("church_of_england",)),
+    ("Catholic", ("roman_catholic",)),
+    ("Inter- / non- denominational", ("other_christian",)),
+    ("Orthodox Jewish", ("jewish",)),
+    ("Sunni Deobandi", ("muslim",)),
+    ("Hindu", ("other_faith",)),
+    ("Does not apply", ("none",)),
+    ("None", ("none",)),
+])
+def test_faiths_by_name(name, faiths):
+    assert faith_groups_for(name) == faiths
+
+
+@pytest.mark.parametrize("missing", [None, np.nan, "", "  "])
+def test_a_missing_religion_is_no_religious_character(missing):
+    assert faith_groups_for(missing) == ("none",)
+
+
+def test_an_unknown_religion_has_no_faith():
+    assert faith_groups_for("Unknown (77)") == ()

backend/tests/test_type_and_faith_filters.py

@@ -0,0 +1,100 @@
+"""/api/schools school-type groups and faith filter, and their /api/filters lists."""
+
+import numpy as np
+import pandas as pd
+import pytest
+from fastapi.testclient import TestClient
+
+# urn -> (GIAS school type, GIAS religious character)
+SCHOOLS = {
+    100001: ("Community school", "Does not apply"),
+    100002: ("Voluntary aided school", "Roman Catholic"),
+    100003: ("Academy converter", "Roman Catholic/Church of England"),
+    100004: ("Community special school", None),
+    100005: ("Academy special converter", "Church of England"),
+    100006: ("Other independent school", "Jewish"),
+    100007: ("Miscellaneous", ""),
+}
+
+
+def _schools_df() -> pd.DataFrame:
+    base = {
+        "local_authority": "Testshire", "address": "1 Test Street", "town": "Testtown",
+        "postcode": "TS1 1AA", "age_range": "4-11", "has_sixth_form": None,
+        "gender": "Mixed", "admissions_policy": None, "ofsted_grade": np.nan,
+        "ofsted_date": None, "ofsted_framework": None, "latitude": 51.5,
+        "longitude": -0.1, "year": 202425, "total_pupils": 300,
+        "rwm_expected_pct": np.nan, "attainment_8_score": np.nan, "phase": "Primary",
+    }
+    return pd.DataFrame([
+        {**base, "urn": urn, "school_name": f"School {urn}",
+         "school_type": t, "religious_denomination": r}
+        for urn, (t, r) in SCHOOLS.items()
+    ])
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
+    monkeypatch.setattr(app_module, "load_school_data", _schools_df)
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def _urns(client, **params):
+    resp = client.get("/api/schools", params={"page_size": 50, **params})
+    assert resp.status_code == 200, resp.text
+    return sorted(s["urn"] for s in resp.json()["schools"])
+
+
+@pytest.mark.parametrize("key, urns", [
+    ("council", [100001, 100002]),
+    ("academy", [100003]),
+    ("special", [100004, 100005]),
+    ("independent", [100006]),
+    ("Special", [100004, 100005]),
+])
+def test_a_type_group_key_filters_to_its_group(client, key, urns):
+    assert _urns(client, school_type=key) == urns
+
+
+def test_a_raw_type_label_still_filters_exactly(client):
+    assert _urns(client, school_type="Community school") == [100001]
+
+
+@pytest.mark.parametrize("key, urns", [
+    ("roman_catholic", [100002, 100003]),
+    ("church_of_england", [100003, 100005]),
+    ("none", [100001, 100004, 100007]),
+    ("jewish", [100006]),
+    ("Roman_Catholic", [100002, 100003]),
+])
+def test_faith_filters_to_its_group_joint_schools_included(client, key, urns):
+    assert _urns(client, faith=key) == urns
+
+
+def test_an_unknown_faith_returns_nothing(client):
+    assert _urns(client, faith="nonsense") == []
+
+
+def test_type_and_faith_combine(client):
+    assert _urns(client, school_type="special", faith="church_of_england") == [100005]
+
+
+def test_filters_lists_only_groups_present_in_order(client):
+    body = client.get("/api/filters").json()
+    assert body["school_type_groups"] == [
+        {"value": "academy", "label": "State school: academy or free school"},
+        {"value": "council", "label": "State school: council-run"},
+        {"value": "independent", "label": "Independent (fee-paying)"},
+        {"value": "special", "label": "Special school (SEND)"},
+    ]
+    assert body["faiths"] == [
+        {"value": "none", "label": "No religious character"},
+        {"value": "church_of_england", "label": "Church of England"},
+        {"value": "roman_catholic", "label": "Roman Catholic"},
+        {"value": "jewish", "label": "Jewish"},
+    ]
+    # The raw list is still there for anything that reads it.
+    assert "Community school" in body["school_types"]

docs/ARCHITECTURE.md

@@ -73,7 +73,12 @@ There is no SWR dependency. Leaflet maps are loaded through dynamic wrappers;
 Chart.js renders performance and comparison charts.
 
 `components/school/` contains detail sections, with section decisions and data
-preparation in `lib/schoolSections.ts`. `lib/types.ts` contains manually maintained
+preparation in `lib/schoolSections.ts`. The nearby-schools section is selected in
+`backend/nearby_schools.py` — hard filters decide eligibility (phase, provision,
+selectivity, gender) and distance alone decides the order, capped per phase —
+and served on `/api/schools/{urn}`. Its rules are presentation logic,
+deliberately kept out of `marts.*` so they can be tuned by deploy rather than by
+pipeline run. `lib/types.ts` contains manually maintained
 API types. `payload-types.ts` and the Payload import map are generated artifacts.
 
 ## Publication and caching today

docs/DEPLOY.md

@@ -291,6 +291,15 @@ workflow first. The release route must be reachable through the configured
 `/api` proxy limitation. No new deployment secret is required.
 
 `scripts/ci/release.py` implements identity polling and digest verification.
+The poller identifies itself as `SchoolCompare-Release-Check/1.0`: the public
+staging proxy has returned HTTP 403 to Python's default urllib user agent even
+while the release endpoint was healthy. It logs changes in HTTP/connection
+failures or observed release identities, and includes the last observation in
+the timeout error. If verification fails, use that observation to distinguish
+proxy rejection (403), an unavailable release endpoint (503), and containers
+still reporting an older SHA/build ID. Check the configured base URL from the
+CI runner; a successful request from another machine does not establish runner
+connectivity. Do not bypass identity verification to unblock a deployment.
 Its mocked tests run in PR checks alongside backend and index-publication tests.
 The new Playwright journeys also check deployed identity and stale pagination.
 Local unit checks do not validate registry credentials, Portainer behaviour,

docs/LEGACY_CODE.md

@@ -44,6 +44,7 @@ Their previous implementations remain recoverable from Git history.
 | `nextjs-app/components/SchoolCard.tsx` and its CSS | Imported by its own tests, not application code. HomeView uses SchoolRow/SecondarySchoolRow. | Decide whether to retire the card design; if removed, remove its dedicated tests as well. Passing tests do not establish runtime use. |
 | `backend/database.py: get_db`, `get_db_session` | No remaining callers after removing the importer. Current code creates SessionLocal directly. | Either adopt these helpers during session-lifecycle cleanup or remove them; do not rewrite active sessions in a documentation change. |
 | `backend/schemas.py: COLUMN_MAPPINGS`, `NULL_VALUES`, `LA_CODE_TO_NAME` | No remaining Python consumers found after importer removal. Other constants in this module are active. | Remove individual constants after checking external data utilities; retain the module. |
+| `backend/app.py: result_filters` keys `school_types`, `phases`, `genders`, `admissions_policies` | Since 2026-10-02 FilterBar offers these from `/api/filters`, because options scoped to the results left only the chosen value on offer. Only `local_authorities` is still read. | Stop computing the four keys in a focused API change; keep `local_authorities`. |
 | `backend/config.py: data_dir`, `max_page_size`, `rate_limit_burst` | No active consumers found. `default_page_size` appears only in a branch that expects None, although the route supplies a concrete default. | Reconcile settings with route validation in a focused API change. |
 
 ## Legacy/manual paths requiring operational verification

docs/superpowers/plans/2026-10-02-school-type-groups-and-faith-filter.md

@@ -0,0 +1,911 @@
+# School Type Groups and a Faith Filter Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the School type filter's 34 GIAS types with six parent-facing groups, and add a Faith filter with eight options.
+
+**Architecture:** A new backend module `backend/school_groups.py` holds both groupings as GIAS code sets and exposes lookups by the translated *name* (the DataFrame the API filters only carries names). `/api/schools` accepts a group key for `school_type` and a new `faith` key; `/api/filters` gains `school_type_groups` and `faiths` as `{value, label}` lists. The frontend's FilterBar reads those lists for its School type select and a new Faith select.
+
+**Tech Stack:** FastAPI + pandas (backend, pytest via uv), Next.js 15 / React (frontend, Jest + Testing Library), Playwright (E2E against staging).
+
+**Spec:** `docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md`
+
+## Global Constraints
+
+- Type group keys, labels and order, verbatim: `academy` "State school: academy or free school", `council` "State school: council-run", `independent` "Independent (fee-paying)", `special` "Special school (SEND)", `post16` "Sixth form or college", `alternative` "Alternative provision".
+- Faith keys, labels and order, verbatim: `none` "No religious character", `church_of_england` "Church of England", `roman_catholic` "Roman Catholic", `other_christian` "Other Christian", `jewish` "Jewish", `muslim` "Muslim", `other_faith` "Other faith".
+- Select defaults, verbatim: "Any school type", "Any faith or none". Faith select `aria-label="Faith"`.
+- `/api/filters` keeps `school_types` (raw list) unchanged; the new keys are additions.
+- An old raw-label `school_type` value (e.g. `Community school`) still filters by that label exactly.
+- An unknown `faith` key returns no schools.
+- Do not change `backend/gias_codes.py` or `pipeline/scripts/gias_codes.py` (their parity is tested).
+- No copy may use an em dash (`__tests__/components/noEmDashCopy.test.ts`).
+- Backend tests run from the repo root with: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests -q`
+- Frontend checks run from `nextjs-app/`: `npx jest` and `npx tsc --noEmit`.
+- Do not start a local server. E2E journeys are verified against staging after merge.
+
+## Review Focus
+
+- A school whose `religious_denomination` is `None`/NaN or `""` (GIAS code 99) must count as "No religious character", not drop out of every faith option. Pinned in Task 1.
+- A type or religion label the dictionaries do not know (e.g. `"Unknown (9999)"`, or a test fixture's `"Academy"`) must map to no group without raising. Pinned in Task 1.
+- `/api/filters` returning no `school_type_groups`/`faiths` (API failed, or an older backend) must leave the selects out rather than render "Any…" alone. Pinned in Task 3.
+- An old bookmarked URL with `school_type=Community+school` must still return community schools and show a chip with its raw label. Pinned in Tasks 2 and 3.
+- Mixed case in a key (`?faith=Roman_Catholic`, `?school_type=Special`) must still match. Pinned in Task 2.
+
+---
+
+## File Structure
+
+| File | Responsibility |
+|---|---|
+| `backend/school_groups.py` (new) | The two groupings as code sets, and name-based lookups. Nothing else. |
+| `backend/tests/test_school_groups.py` (new) | Coverage of every GIAS code, joint faiths, unknown/blank names. |
+| `backend/app.py` (modify) | `faith` param; group-key branch for `school_type`; two new `/api/filters` keys. |
+| `backend/tests/test_type_and_faith_filters.py` (new) | API behaviour of both filters and the new `/api/filters` keys. |
+| `nextjs-app/lib/types.ts` (modify) | `FilterOption`; optional `school_type_groups`/`faiths` on `Filters`; `faith` on `SchoolSearchParams`. |
+| `nextjs-app/app/(frontend)/page.tsx` (modify) | Read and forward `faith`. |
+| `nextjs-app/components/FilterBar.tsx` (modify) | Grouped School type options; Faith select; chips, counts, analytics. |
+| `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx` (new) | Frontend behaviour of both selects. |
+| Existing FilterBar tests (modify) | Fixtures move from raw types to groups. |
+| `e2e/tests/journeys.spec.ts` (modify) | A journey for both filters. |
+| Spec (modify) | Architecture section: grouping is by name at filter time. |
+
+---
+
+### Task 1: The groupings module
+
+**Files:**
+- Create: `backend/school_groups.py`
+- Test: `backend/tests/test_school_groups.py`
+- Modify: `docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md` (Architecture)
+
+**Interfaces:**
+- Consumes: `backend.gias_codes.SCHOOL_TYPE: dict[int, str]`, `backend.gias_codes.RELIGIOUS_CHARACTER: dict[int, str]` (code 99 maps to `""`).
+- Produces:
+  - `TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...]` (key, label, codes), in display order
+  - `UNOFFERED_TYPE_CODES: frozenset[int]`
+  - `FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...]`, in display order
+  - `TYPE_GROUP_KEYS: frozenset[str]`, `FAITH_KEYS: frozenset[str]`
+  - `type_group_for(name: object) -> str | None`
+  - `faith_groups_for(name: object) -> tuple[str, ...]`
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `backend/tests/test_school_groups.py`:
+
+```python
+"""Parent-facing groups over GIAS establishment types and religious characters.
+
+Every GIAS code must be accounted for, so a new DfE code fails here instead of
+silently vanishing from the filter.
+"""
+
+from pathlib import Path
+
+import numpy as np
+import pytest
+import yaml
+
+from backend.gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
+from backend.school_groups import (
+    FAITH_GROUPS,
+    TYPE_GROUPS,
+    UNOFFERED_TYPE_CODES,
+    faith_groups_for,
+    type_group_for,
+)
+
+DBT_PROJECT = Path(__file__).resolve().parents[2] / "pipeline" / "transform" / "dbt_project.yml"
+
+
+def _non_england_codes() -> set[int]:
+    return set(yaml.safe_load(DBT_PROJECT.read_text())["vars"]["non_england_school_type_codes"])
+
+
+def test_every_type_code_is_in_exactly_one_place():
+    places = [codes for _, _, codes in TYPE_GROUPS] + [UNOFFERED_TYPE_CODES, _non_england_codes()]
+    for code in SCHOOL_TYPE:
+        homes = sum(code in p for p in places)
+        assert homes == 1, f"type code {code} ({SCHOOL_TYPE[code]}) is in {homes} places"
+
+
+def test_every_religion_code_has_a_faith():
+    for code, name in RELIGIOUS_CHARACTER.items():
+        assert any(code in codes for _, _, codes in FAITH_GROUPS), f"{code} {name!r}"
+
+
+def test_type_groups_in_display_order():
+    assert [k for k, _, _ in TYPE_GROUPS] == [
+        "academy", "council", "independent", "special", "post16", "alternative"]
+
+
+def test_faiths_in_display_order():
+    assert [k for k, _, _ in FAITH_GROUPS] == [
+        "none", "church_of_england", "roman_catholic", "other_christian",
+        "jewish", "muslim", "other_faith"]
+
+
+@pytest.mark.parametrize("name, group", [
+    ("Academy converter", "academy"),
+    ("University technical college", "academy"),
+    ("Voluntary aided school", "council"),
+    ("Local authority nursery school", "council"),
+    ("Other independent school", "independent"),
+    ("Other independent special school", "special"),
+    ("Special post 16 institution", "special"),
+    ("Further education", "post16"),
+    ("Pupil referral unit", "alternative"),
+    ("academy CONVERTER", "academy"),
+])
+def test_type_group_by_name(name, group):
+    assert type_group_for(name) == group
+
+
+@pytest.mark.parametrize("name", [
+    "Higher education institutions", "Miscellaneous", "Unknown (9999)", "Academy", "", None, np.nan,
+])
+def test_unoffered_or_unknown_types_have_no_group(name):
+    assert type_group_for(name) is None
+
+
+@pytest.mark.parametrize("name, faiths", [
+    ("Roman Catholic/Church of England", ("church_of_england", "roman_catholic")),
+    ("Roman Catholic/Anglican", ("church_of_england", "roman_catholic")),
+    ("Church of England/Methodist", ("church_of_england", "other_christian")),
+    ("Church of England/Christian", ("church_of_england",)),
+    ("Catholic", ("roman_catholic",)),
+    ("Inter- / non- denominational", ("other_christian",)),
+    ("Orthodox Jewish", ("jewish",)),
+    ("Sunni Deobandi", ("muslim",)),
+    ("Hindu", ("other_faith",)),
+    ("Does not apply", ("none",)),
+    ("None", ("none",)),
+])
+def test_faiths_by_name(name, faiths):
+    assert faith_groups_for(name) == faiths
+
+
+@pytest.mark.parametrize("missing", [None, np.nan, "", "  "])
+def test_a_missing_religion_is_no_religious_character(missing):
+    assert faith_groups_for(missing) == ("none",)
+
+
+def test_an_unknown_religion_has_no_faith():
+    assert faith_groups_for("Unknown (77)") == ()
+```
+
+- [ ] **Step 2: Run them to see them fail**
+
+Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_school_groups.py -q`
+Expected: collection error, `ModuleNotFoundError: No module named 'backend.school_groups'`.
+
+- [ ] **Step 3: Write the module**
+
+Create `backend/school_groups.py`:
+
+```python
+"""Parent-facing groups over GIAS establishment types and religious characters.
+
+The 34 GIAS establishment types describe governance and funding, which for a
+mainstream state school barely changes what a parent experiences. The search
+filter offers six groups a parent recognises instead, and a faith filter in
+place of the faith signal that "Voluntary aided" and "Voluntary controlled"
+only half carry. See
+docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md.
+
+Groups are defined over GIAS codes and looked up by the translated name,
+because the DataFrame the API filters carries names only: the codes are
+replaced at load (data_loader.translate_gias_code_columns), the legacy-name
+mart fallback never had them, and test fixtures are written in names.
+"""
+
+from typing import Optional
+
+import pandas as pd
+
+from .gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
+
+# (key, label, GIAS TypeOfEstablishment codes), in the order shown.
+TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
+    # Academy sponsor led, Academy converter, Free schools, University technical
+    # college, Studio schools, City technology college. UTCs and studio schools
+    # are legally academies, and a family considering one searches by name.
+    ("academy", "State school: academy or free school", frozenset({28, 34, 35, 40, 41, 6})),
+    # Community, Voluntary aided, Voluntary controlled, Foundation, LA nursery.
+    ("council", "State school: council-run", frozenset({1, 2, 3, 5, 15})),
+    ("independent", "Independent (fee-paying)", frozenset({11})),
+    # Every special type, independent ones included (usually funded by the
+    # council through an EHCP, so SEND provision to a parent, not private
+    # school), and Special post 16 institutions.
+    ("special", "Special school (SEND)", frozenset({7, 8, 10, 12, 32, 33, 36, 44})),
+    # Further education, Sixth form centres, the 16-19 academies and free schools.
+    ("post16", "Sixth form or college", frozenset({18, 31, 39, 45, 46})),
+    # Pupil referral units and AP academies and free schools. Last: parents do
+    # not apply to these; the local authority places children there.
+    ("alternative", "Alternative provision", frozenset({14, 38, 42, 43})),
+)
+
+# In no group, so reachable only under "Any school type": Secure units,
+# Miscellaneous, Higher education institutions, Online provider, Institution
+# funded by other government department, Academy secure 16 to 19.
+UNOFFERED_TYPE_CODES: frozenset[int] = frozenset({24, 27, 29, 49, 56, 57})
+
+# (key, label, GIAS ReligiousCharacter codes), in the order shown. A joint
+# school is in every faith its label names; a generic "Christian" beside a
+# named church adds nothing.
+FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
+    # Does not apply, None, and 99 (a blank label).
+    ("none", "No religious character", frozenset({0, 6, 99})),
+    ("church_of_england", "Church of England",
+     frozenset({2, 9, 10, 11, 12, 13, 19, 20, 30, 31, 32, 33, 34, 41, 48})),
+    ("roman_catholic", "Roman Catholic", frozenset({3, 11, 13, 35, 48})),
+    # 28 "Inter- / non- denominational" is how GIAS files Christian schools
+    # tied to no one church.
+    ("other_christian", "Other Christian",
+     frozenset({4, 8, 9, 10, 12, 14, 15, 16, 17, 18, 19, 22, 26, 28, 30, 33,
+                37, 38, 39, 40, 41, 44, 45, 46, 47})),
+    ("jewish", "Jewish", frozenset({5, 36, 43})),
+    ("muslim", "Muslim", frozenset({7, 42, 49})),
+    ("other_faith", "Other faith", frozenset({21, 24, 25, 29})),
+)
+
+TYPE_GROUP_KEYS: frozenset[str] = frozenset(k for k, _, _ in TYPE_GROUPS)
+FAITH_KEYS: frozenset[str] = frozenset(k for k, _, _ in FAITH_GROUPS)
+
+
+def _key(name: str) -> str:
+    return name.strip().lower()
+
+
+_TYPE_GROUP_BY_NAME: dict[str, str] = {
+    _key(SCHOOL_TYPE[code]): key
+    for key, _, codes in TYPE_GROUPS
+    for code in codes
+    if code in SCHOOL_TYPE
+}
+
+_FAITHS_BY_NAME: dict[str, tuple[str, ...]] = {}
+for _faith, _, _codes in FAITH_GROUPS:
+    for _code in sorted(_codes):
+        if _code in RELIGIOUS_CHARACTER:
+            _name = _key(RELIGIOUS_CHARACTER[_code])
+            _FAITHS_BY_NAME[_name] = _FAITHS_BY_NAME.get(_name, ()) + (_faith,)
+
+
+def type_group_for(name: object) -> Optional[str]:
+    """The type group of a GIAS establishment type name, or None."""
+    if not isinstance(name, str):
+        return None
+    return _TYPE_GROUP_BY_NAME.get(_key(name))
+
+
+def faith_groups_for(name: object) -> tuple[str, ...]:
+    """The faith groups of a GIAS religious character name.
+
+    A missing or blank name is "No religious character". A name the
+    dictionary does not know has no faith, so it matches no faith option.
+    """
+    if not isinstance(name, str):
+        return ("none",) if name is None or pd.isna(name) else ()
+    return _FAITHS_BY_NAME.get(_key(name), ())
+```
+
+- [ ] **Step 4: Run the tests to see them pass**
+
+Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_school_groups.py -q`
+Expected: all pass.
+
+- [ ] **Step 5: Correct the spec's architecture**
+
+In the spec, replace the `### backend/data_loader.py` subsection with:
+
+```markdown
+### Grouping by name, at filter time
+
+The groups are defined over codes but looked up by the translated name
+(`type_group_for(name)`, `faith_groups_for(name)`), when `/api/schools` and
+`/api/filters` filter. The DataFrame those endpoints read carries names only:
+`translate_gias_code_columns` replaces the codes at load, the legacy-name
+mart fallback never had codes, and the API test fixtures are written in
+names. The names come from the same dictionaries, so the lookup is exact.
+`data_loader.py` is unchanged.
+```
+
+and in `### backend/school_groups.py (new)` replace the `type_group_for(code)` / `faith_groups_for(code)` bullet with `type_group_for(name) -> str | None` and `faith_groups_for(name) -> tuple[str, ...]` (a missing or blank name gives `("none",)`).
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add backend/school_groups.py backend/tests/test_school_groups.py docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md
+git commit -m "feat(api): group GIAS school types and religions for parents"
+```
+
+---
+
+### Task 2: The API filters
+
+**Files:**
+- Modify: `backend/app.py` (imports near line 43; `get_schools` params ~738-747, sanitising ~755-759, secondary filters ~782-786, `school_type` filter ~886-889; `get_filter_options` ~1155-1180)
+- Test: `backend/tests/test_type_and_faith_filters.py`
+
+**Interfaces:**
+- Consumes: from Task 1, `TYPE_GROUPS`, `FAITH_GROUPS`, `TYPE_GROUP_KEYS`, `FAITH_KEYS`, `type_group_for`, `faith_groups_for`.
+- Produces:
+  - `GET /api/schools?school_type=<group key | raw label>&faith=<faith key>`
+  - `GET /api/filters` adds `"school_type_groups": [{"value": str, "label": str}]` and `"faiths": [{"value": str, "label": str}]`, in group order, groups with no school left out.
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `backend/tests/test_type_and_faith_filters.py`:
+
+```python
+"""/api/schools school-type groups and faith filter, and their /api/filters lists."""
+
+import numpy as np
+import pandas as pd
+import pytest
+from fastapi.testclient import TestClient
+
+# urn -> (GIAS school type, GIAS religious character)
+SCHOOLS = {
+    100001: ("Community school", "Does not apply"),
+    100002: ("Voluntary aided school", "Roman Catholic"),
+    100003: ("Academy converter", "Roman Catholic/Church of England"),
+    100004: ("Community special school", None),
+    100005: ("Academy special converter", "Church of England"),
+    100006: ("Other independent school", "Jewish"),
+    100007: ("Miscellaneous", ""),
+}
+
+
+def _schools_df() -> pd.DataFrame:
+    base = {
+        "local_authority": "Testshire", "address": "1 Test Street", "town": "Testtown",
+        "postcode": "TS1 1AA", "age_range": "4-11", "has_sixth_form": None,
+        "gender": "Mixed", "admissions_policy": None, "ofsted_grade": np.nan,
+        "ofsted_date": None, "ofsted_framework": None, "latitude": 51.5,
+        "longitude": -0.1, "year": 202425, "total_pupils": 300,
+        "rwm_expected_pct": np.nan, "attainment_8_score": np.nan, "phase": "Primary",
+    }
+    return pd.DataFrame([
+        {**base, "urn": urn, "school_name": f"School {urn}",
+         "school_type": t, "religious_denomination": r}
+        for urn, (t, r) in SCHOOLS.items()
+    ])
+
+
+@pytest.fixture()
+def client(monkeypatch):
+    from backend import app as app_module
+
+    monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
+    monkeypatch.setattr(app_module, "load_school_data", _schools_df)
+    return TestClient(app_module.app, raise_server_exceptions=False)
+
+
+def _urns(client, **params):
+    resp = client.get("/api/schools", params={"page_size": 50, **params})
+    assert resp.status_code == 200, resp.text
+    return sorted(s["urn"] for s in resp.json()["schools"])
+
+
+@pytest.mark.parametrize("key, urns", [
+    ("council", [100001, 100002]),
+    ("academy", [100003]),
+    ("special", [100004, 100005]),
+    ("independent", [100006]),
+    ("Special", [100004, 100005]),
+])
+def test_a_type_group_key_filters_to_its_group(client, key, urns):
+    assert _urns(client, school_type=key) == urns
+
+
+def test_a_raw_type_label_still_filters_exactly(client):
+    assert _urns(client, school_type="Community school") == [100001]
+
+
+@pytest.mark.parametrize("key, urns", [
+    ("roman_catholic", [100002, 100003]),
+    ("church_of_england", [100003, 100005]),
+    ("none", [100001, 100004, 100007]),
+    ("jewish", [100006]),
+    ("Roman_Catholic", [100002, 100003]),
+])
+def test_faith_filters_to_its_group_joint_schools_included(client, key, urns):
+    assert _urns(client, faith=key) == urns
+
+
+def test_an_unknown_faith_returns_nothing(client):
+    assert _urns(client, faith="nonsense") == []
+
+
+def test_type_and_faith_combine(client):
+    assert _urns(client, school_type="special", faith="church_of_england") == [100005]
+
+
+def test_filters_lists_only_groups_present_in_order(client):
+    body = client.get("/api/filters").json()
+    assert body["school_type_groups"] == [
+        {"value": "academy", "label": "State school: academy or free school"},
+        {"value": "council", "label": "State school: council-run"},
+        {"value": "independent", "label": "Independent (fee-paying)"},
+        {"value": "special", "label": "Special school (SEND)"},
+    ]
+    assert body["faiths"] == [
+        {"value": "none", "label": "No religious character"},
+        {"value": "church_of_england", "label": "Church of England"},
+        {"value": "roman_catholic", "label": "Roman Catholic"},
+        {"value": "jewish", "label": "Jewish"},
+    ]
+    # The raw list is still there for anything that reads it.
+    assert "Community school" in body["school_types"]
+```
+
+- [ ] **Step 2: Run them to see them fail**
+
+Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_type_and_faith_filters.py -q`
+Expected: the group-key, faith and `/api/filters` tests fail (`KeyError: 'school_type_groups'`, empty URN lists); `test_a_raw_type_label_still_filters_exactly` passes.
+
+- [ ] **Step 3: Implement**
+
+In `backend/app.py`, add beside the other local imports (after the `from .schemas import ...` line):
+
+```python
+from .school_groups import (
+    FAITH_GROUPS,
+    FAITH_KEYS,
+    TYPE_GROUP_KEYS,
+    TYPE_GROUPS,
+    faith_groups_for,
+    type_group_for,
+)
+```
+
+Add a helper just above `def sanitize_search_input`:
+
+```python
+def _names_in_group(names: pd.Series, in_group) -> set:
+    """The distinct names in a column that a group predicate accepts.
+
+    Evaluated once per distinct name rather than per row, so a filter over
+    every school costs a few dozen lookups.
+    """
+    return {n for n in names.dropna().unique() if in_group(n)}
+```
+
+In `get_schools`, add the parameter after `has_sixth_form`:
+
+```python
+    faith: Optional[str] = Query(None, description="Filter by faith group key", max_length=40),
+```
+
+and after `phase = sanitize_search_input(phase)`:
+
+```python
+    faith = sanitize_search_input(faith)
+```
+
+After the `has_sixth_form` filter block (the one ending `df_latest = df_latest[flag if has_sixth_form == "yes" else ~flag]`), add:
+
+```python
+    # Faith group (backend/school_groups.py). A joint school is in every faith
+    # its label names; a missing religious character is "none". An unknown key
+    # matches nothing rather than being ignored, so a typo cannot show all.
+    if faith:
+        faith_key = faith.lower()
+        if faith_key in FAITH_KEYS and "religious_denomination" in df_latest.columns:
+            column = df_latest["religious_denomination"]
+            matches = column.isin(_names_in_group(column, lambda n: faith_key in faith_groups_for(n)))
+            # _names_in_group skips missing names; a missing religious
+            # character is "No religious character".
+            if faith_key == "none":
+                matches = matches | column.isna()
+            df_latest = df_latest[matches]
+        else:
+            df_latest = df_latest.iloc[0:0]
+```
+
+Replace the existing `school_type` filter:
+
+```python
+    if school_type:
+        schools_df = schools_df[
+            schools_df["school_type"].str.lower() == school_type.lower()
+        ]
+```
+
+with:
+
+```python
+    # A type group key (backend/school_groups.py), or for an old link a raw
+    # GIAS type label, matched exactly as before.
+    if school_type:
+        type_key = school_type.lower()
+        if type_key in TYPE_GROUP_KEYS:
+            column = schools_df["school_type"]
+            schools_df = schools_df[
+                column.isin(_names_in_group(column, lambda n: type_group_for(n) == type_key))
+            ]
+        else:
+            schools_df = schools_df[schools_df["school_type"].str.lower() == type_key]
+```
+
+In `get_filter_options`, add to the early `if df.empty:` return dict:
+
+```python
+            "school_type_groups": [],
+            "faiths": [],
+```
+
+and before the final `return {`:
+
+```python
+    def offered(groups, present):
+        return [{"value": key, "label": label} for key, label, _ in groups if key in present]
+
+    type_groups_present = (
+        {type_group_for(n) for n in df["school_type"].dropna().unique()} - {None}
+        if "school_type" in df.columns else set()
+    )
+    faiths_present = (
+        {f for n in df["religious_denomination"].unique() for f in faith_groups_for(n)}
+        if "religious_denomination" in df.columns else set()
+    )
+```
+
+and add to the returned dict:
+
+```python
+        "school_type_groups": offered(TYPE_GROUPS, type_groups_present),
+        "faiths": offered(FAITH_GROUPS, faiths_present),
+```
+
+- [ ] **Step 4: Run the new tests, then the whole backend suite**
+
+Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_type_and_faith_filters.py -q`
+Expected: all pass.
+
+Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests pipeline/tests scripts/ci/tests -q`
+Expected: all pass (the CI command; `pyyaml` comes from requirements or add `--with pyyaml` if collection fails on `import yaml`).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add backend/app.py backend/tests/test_type_and_faith_filters.py
+git commit -m "feat(api): filter schools by type group and by faith"
+```
+
+---
+
+### Task 3: The frontend filters
+
+**Files:**
+- Modify: `nextjs-app/lib/types.ts` (`Filters` ~487-494, `SchoolSearchParams` ~558-570)
+- Modify: `nextjs-app/app/(frontend)/page.tsx` (props type ~15-29, `hasSearchParams` ~79-88, `fetchSchools` call ~96-109)
+- Modify: `nextjs-app/components/FilterBar.tsx`
+- Test: `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx` (new)
+- Modify tests: `__tests__/components/ResultsToolbar.test.tsx`, `FilterSheet.test.tsx`, `FilterSheetPending.test.tsx`, `FilterBarOptions.test.tsx`
+
+**Interfaces:**
+- Consumes: `/api/filters` keys `school_type_groups`, `faiths` (Task 2); URL params `school_type` (group key) and `faith`.
+- Produces: `export interface FilterOption { value: string; label: string }`; `Filters.school_type_groups?: FilterOption[]`; `Filters.faiths?: FilterOption[]`; `SchoolSearchParams.faith?: string`. FilterBar selects named "School type" and "Faith".
+
+- [ ] **Step 1: Write the failing tests**
+
+Create `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx`:
+
+```tsx
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+import { track } from '@/lib/analytics';
+
+/*
+ * School type offers six groups a parent recognises, not GIAS's 34 types, and
+ * a Faith filter sits beside it (spec 2026-10-02-school-type-groups-and-faith-
+ * filter-design.md). Both lists come from /api/filters.
+ */
+
+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('@/lib/analytics', () => ({ track: jest.fn() }));
+
+const filters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
+  school_type_groups: [
+    { value: 'academy', label: 'State school: academy or free school' },
+    { value: 'council', label: 'State school: council-run' },
+    { value: 'special', label: 'Special school (SEND)' },
+  ],
+  faiths: [
+    { value: 'none', label: 'No religious character' },
+    { value: 'roman_catholic', label: 'Roman Catholic' },
+  ],
+};
+
+const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
+const openSheet = () => {
+  fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
+  return screen.getByRole('dialog', { name: 'Filters' });
+};
+const optionsOf = (scope: HTMLElement, name: string) =>
+  within(within(scope).getByRole('combobox', { name })).getAllByRole('option').map((o) => o.textContent);
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+  jest.mocked(track).mockClear();
+});
+
+describe('School type', () => {
+  it('offers the groups, not the GIAS types, on desktop and in the sheet', () => {
+    render(<FilterBar filters={filters} />);
+    const groups = ['Any school type', 'State school: academy or free school',
+      'State school: council-run', 'Special school (SEND)'];
+    expect(optionsOf(screen.getByRole('group', { name: 'Filters' }), 'School type')).toEqual(groups);
+    expect(optionsOf(openSheet(), 'School type')).toEqual(groups);
+  });
+
+  it('puts the group key in the URL and names the chip by its label', () => {
+    const view = render(<FilterBar filters={filters} />);
+    fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'School type' }),
+      { target: { value: 'special' } });
+    expect(pushedParams().get('school_type')).toBe('special');
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=special');
+    view.rerender(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
+  });
+
+  it('names an old raw-label link\'s chip by that label', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Community school' })).toBeInTheDocument();
+  });
+
+  it('is left out when the API sends no groups', () => {
+    render(<FilterBar filters={{ ...filters, school_type_groups: undefined }} />);
+    expect(screen.queryByRole('combobox', { name: 'School type' })).not.toBeInTheDocument();
+  });
+});
+
+describe('Faith', () => {
+  it('offers its options in the More filters panel and in the sheet', () => {
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: /More filters/ }));
+    const faiths = ['Any faith or none', 'No religious character', 'Roman Catholic'];
+    expect(optionsOf(document.body, 'Faith')).toEqual(faiths);
+    expect(optionsOf(openSheet(), 'Faith')).toEqual(faiths);
+  });
+
+  it('shows as a chip, counts on both buttons, and clears with Clear all', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&faith=roman_catholic');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
+    fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
+      .getByRole('button', { name: 'Clear all' }));
+    expect(pushedParams().get('faith')).toBeNull();
+    expect(pushedParams().get('postcode')).toBe('SW196AR');
+  });
+
+  it('goes into the search analytics event', () => {
+    params = new URLSearchParams('faith=roman_catholic');
+    render(<FilterBar filters={filters} />);
+    const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
+    fireEvent.change(input, { target: { value: 'st marys' } });
+    fireEvent.submit(input.closest('form')!);
+    expect(track).toHaveBeenCalledWith('search_submitted',
+      expect.objectContaining({ filters_active: 'faith=roman_catholic', filters_count: 1 }));
+  });
+
+  it('is left out when the API sends no faiths', () => {
+    render(<FilterBar filters={{ ...filters, faiths: [] }} />);
+    expect(within(openSheet()).queryByRole('combobox', { name: 'Faith' })).not.toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2: Run them to see them fail**
+
+Run (from `nextjs-app/`): `npx jest __tests__/components/FilterBarTypeFaith.test.tsx`
+Expected: failures; School type still lists `Community school`, no `Faith` combobox. (`tsc` also flags `school_type_groups` on `Filters`, which Step 3 fixes.)
+
+- [ ] **Step 3: Types and page plumbing**
+
+In `nextjs-app/lib/types.ts`, above `export interface Filters`:
+
+```ts
+/** A filter option whose URL value differs from what a parent reads. */
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+```
+
+and add to `Filters` (after `admissions_policies`):
+
+```ts
+  /** Parent-facing school type groups; the URL's school_type takes their value. */
+  school_type_groups?: FilterOption[];
+  faiths?: FilterOption[];
+```
+
+and to `SchoolSearchParams` (after `has_sixth_form`):
+
+```ts
+  faith?: string;
+```
+
+In `nextjs-app/app/(frontend)/page.tsx`: add `faith?: string;` to the `searchParams` type after `has_sixth_form?: string;`; add `params.faith ||` to `hasSearchParams` after `params.has_sixth_form`; add `faith: params.faith,` to the `fetchSchools({...})` call after `has_sixth_form: params.has_sixth_form,`.
+
+- [ ] **Step 4: FilterBar**
+
+In `nextjs-app/components/FilterBar.tsx`:
+
+1. Add `"faith"` to `FILTER_KEYS` directly after `"school_type"`.
+2. After `const currentHasSixthForm = ...` add:
+
+```tsx
+  const currentFaith = searchParams.get("faith") || "";
+```
+
+3. Add `currentFaith,` to the `activeDropdownFilters` array (after `currentLA,`). Faith lives behind More filters, so it counts there.
+4. In `handleSearchSubmit`'s `filters_active` list, after the `type=` line add:
+
+```tsx
+      currentFaith && `faith=${currentFaith}`,
+```
+
+5. Add `currentFaith ||` to `hasActiveFilters` after `currentType ||`.
+6. Replace `const typeOptions = filters.school_types;` with:
+
+```tsx
+  // Six groups a parent recognises, not GIAS's 34 establishment types.
+  const typeOptions = filters.school_type_groups ?? [];
+  const faithOptions = filters.faiths ?? [];
+```
+
+7. Add `faith: currentFaith,` to the `values` record after `school_type: currentType,`.
+8. In `labelFor`, before the `// Phase, gender and admissions values…` comment, add:
+
+```tsx
+    // An old link may carry a raw GIAS type, which reads as itself.
+    const labelled = { school_type: typeOptions, faith: faithOptions }[
+      key as "school_type" | "faith"
+    ];
+    if (labelled) return labelled.find((o) => o.value === value)?.label ?? value;
+```
+
+9. In `typeSelect`, replace the options map with:
+
+```tsx
+        {typeOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+```
+
+10. After `laSelect`, add:
+
+```tsx
+  const faithSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentFaith}
+        onChange={(e) => handleFilterChange("faith", e.target.value)}
+        className={selectClass(look, currentFaith)}
+        aria-label="Faith"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Any faith or none</option>
+        {faithOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+```
+
+11. In the desktop row, change `{typeSelect("pill")}` to `{typeOptions.length > 0 && typeSelect("pill")}`.
+12. In the More filters panel, after `{laSelect("panel")}` add `{faithOptions.length > 0 && faithSelect("panel")}`.
+13. In the sheet, replace `<SheetField label="School type">{typeSelect("sheet")}</SheetField>` with:
+
+```tsx
+            {typeOptions.length > 0 && (
+              <SheetField label="School type">{typeSelect("sheet")}</SheetField>
+            )}
+            {faithOptions.length > 0 && (
+              <SheetField label="Faith">{faithSelect("sheet")}</SheetField>
+            )}
+```
+
+- [ ] **Step 5: Move the existing tests' fixtures to groups**
+
+These tests used raw types as values; give each fixture the groups and use keys:
+
+- `ResultsToolbar.test.tsx`: add to `filters` `school_type_groups: [{ value: 'council', label: 'State school: council-run' }],`; in 'counts only what More filters hides' change `school_type=Community+school` to `school_type=council`.
+- `FilterSheet.test.tsx`: add the same `school_type_groups` to `filters`; change both `school_type=Community+school` to `school_type=council`.
+- `FilterSheetPending.test.tsx`: add the same `school_type_groups`; change the `{ target: { value: 'Community school' } }` to `{ target: { value: 'council' } }` and `toBe('Community school')` to `toBe('council')`.
+- `FilterBarOptions.test.tsx`: add to `filters` `school_type_groups: [{ value: 'academy', label: 'State school: academy or free school' }, { value: 'council', label: 'State school: council-run' }],`; change `school_type=Community+school` (two places) to `school_type=council`; change the expected School type options to `['Any school type', 'State school: academy or free school', 'State school: council-run']`; change `toBe('Community school')` to `toBe('council')`; rename the first test to 'offer every school type group, gender and admissions policy, whatever the results hold'; and in the header comment replace "School type, gender and admissions offer the full lists" with "School type groups, gender and admissions offer the full lists".
+
+- [ ] **Step 6: Run the frontend checks**
+
+Run (from `nextjs-app/`): `npx jest` then `npx tsc --noEmit`
+Expected: all suites pass; no type errors.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add nextjs-app/lib/types.ts "nextjs-app/app/(frontend)/page.tsx" nextjs-app/components/FilterBar.tsx nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx nextjs-app/__tests__/components/ResultsToolbar.test.tsx nextjs-app/__tests__/components/FilterSheet.test.tsx nextjs-app/__tests__/components/FilterSheetPending.test.tsx nextjs-app/__tests__/components/FilterBarOptions.test.tsx
+git commit -m "feat(search): school type groups and a faith filter"
+```
+
+---
+
+### Task 4: E2E journey, build, PR
+
+**Files:**
+- Modify: `e2e/tests/journeys.spec.ts` (insert before `test('a phase outside primary/secondary filters to that phase, not to everything'`)
+
+**Interfaces:**
+- Consumes: the "School type" and "Faith" selects (Task 3); `/api/schools?school_type=&faith=` (Task 2).
+
+- [ ] **Step 1: Add the journey**
+
+```ts
+/*
+ * School type offers six groups a parent recognises, and Faith sits beside it.
+ * Data-invariant: asserts what every returned school is, never how many.
+ */
+test('school type groups and the faith filter narrow to what they name', async ({ page }) => {
+  await page.goto('/?search=school');
+  const type = page.getByRole('combobox', { name: 'School type', exact: true });
+  await expect(type).toBeVisible({ timeout: 15_000 });
+  await type.selectOption({ label: 'Special school (SEND)' });
+  await expect(page).toHaveURL(/[?&]school_type=special(&|$)/);
+
+  await page.getByRole('button', { name: /^More filters/ }).click();
+  await page.getByRole('combobox', { name: 'Faith', exact: true }).selectOption({ label: 'Roman Catholic' });
+  await expect(page).toHaveURL(/[?&]faith=roman_catholic(&|$)/);
+
+  const res = await page.request.get(
+    '/api/schools?search=school&school_type=special&faith=roman_catholic&page_size=100');
+  expect(res.ok()).toBeTruthy();
+  for (const s of (await res.json()).schools as { school_type: string; religious_denomination: string }[]) {
+    expect(s.school_type).toMatch(/special/i);
+    expect(s.religious_denomination).toMatch(/catholic/i);
+  }
+});
+```
+
+- [ ] **Step 2: Confirm it parses, and fails on today's staging**
+
+Run (from `e2e/`): `npx playwright test --list | grep "school type groups"`
+Expected: the test is listed.
+
+Run: `BASE_URL=https://stx.schoolcompare.co.uk npx playwright test -g "school type groups" --retries=0 --reporter=line`
+Expected: FAIL at `selectOption({ label: 'Special school (SEND)' })`, because staging still offers the raw types. It can only pass after merge (the staging E2E gate runs post-merge).
+
+- [ ] **Step 3: Build without a database**
+
+Run (from `nextjs-app/`): `env -u DATABASE_URL npm run build`
+Expected: build completes.
+
+- [ ] **Step 4: Commit, push, open the PR**
+
+```bash
+git add e2e/tests/journeys.spec.ts
+git commit -m "test(e2e): school type groups and the faith filter"
+git push -u origin feat/school-type-groups-faith
+```
+
+Open the PR on Gitea against `main` (credential-helper basic auth, as for PRs #168/#169), listing: the six groups and seven faiths, the old-link compatibility, the backend-by-name decision, test counts, and that the new journey can only pass post-merge.

docs/superpowers/specs/2026-09-21-similar-schools-nearby-design.md

@@ -0,0 +1,432 @@
+# Other Schools Nearby — Design
+
+**Date:** 2026-09-21, revised 2026-09-22
+**Status:** revised after staging review
+**Scope:** school detail pages, both phase templates
+
+> **Revision, 2026-09-22.** The first build ranked by intake similarity and used
+> distance as a tiebreak. On staging a Catholic primary showed six Catholic
+> primaries, none of them close enough to be a real option, and omitted the
+> community school down the road. Distance now decides the order and nothing
+> else does; the tier system is gone. The reasoning is kept below rather than
+> quietly overwritten, because the mistake is the instructive part.
+
+## Goal
+
+Give a school detail page an answer to the question every reader arrives with
+after the results tables: *and what else is around here?*
+
+Today a school page links outward to its place pages through
+`components/school/NearbyPlaces.tsx` and nowhere else. It never links to another
+school. This section adds that edge — up to six nearby schools of the same phase
+and a comparable intake, three at a time in a carousel, each a crawlable link and
+each addable to the comparison basket in one click.
+
+Mockup, in both themes (drawn against the original tiered design, so its ledes
+and chip fallbacks are one revision behind the copy specified below):
+<https://claude.ai/artifact/168KdUMcfkUeGWW2FGjuec>
+
+Source of the same page in the repo: `mockups/similar-schools-nearby.html`.
+
+## The constraint that shapes everything
+
+**A nearby school is not automatically a comparable school.**
+
+The section's whole value is that a reader treats what it shows as a shortlist.
+That makes every card an implicit claim that the school is a realistic
+alternative, and there are three ways that claim goes wrong:
+
+1. A **selective** school beside a non-selective one. Their intakes are
+   different by construction, so putting their Attainment 8 figures side by side
+   invites a conclusion the data cannot support.
+2. A **special school, PRU or AP** beside a mainstream school. This is the same
+   error PR #70 fixed for the England benchmark, where Greenmead (URN 101099)
+   rendered "0% — 62 below England".
+3. A **single-sex** school of the opposite sex. Not a weak match — not an option
+   at all.
+
+So the design separates two kinds of fact, and never confuses them:
+
+- **Hard filters** encode the claims above. They decide eligibility, and are
+  never relaxed at any distance, even if that means the section does not render.
+- **Shared characteristics** — gender, religious character, selectivity —
+  describe how closely an intake resembles this school's. They are *reported on
+  the card and never ranked on*, so the reader weighs them rather than having
+  them weighed for them.
+
+Everything below follows from that split. The revision at the top of this
+document is what happens when the second kind is treated as the first.
+
+## Selection algorithm
+
+A backend helper, `_nearby_schools_payload(urn)` in `backend/app.py`, modelled
+on the existing `_places_payload(urn)` and delegating to
+`backend/nearby_schools.select_nearby(frame, urn)`, which operates on the cached
+`load_latest_school_data()` frame — one row per URN, already carrying
+`latitude`, `longitude`, `phase`, `gender`, `religious_denomination`,
+`admissions_policy`, `school_type` and `status`.
+
+### Hard filters
+
+| Filter | Rule |
+|---|---|
+| Self | `urn` is excluded |
+| Status | GIAS status must be open |
+| Coordinates | both `latitude` and `longitude` present on both schools |
+| Phase | same phase group via the existing `PHASE_GROUPS` map |
+| Provision | special/PRU/AP match only each other |
+| Selectivity | selective matches selective; non-selective matches non-selective |
+| Gender | Boys never matches Girls; Mixed is compatible with both |
+
+`PHASE_GROUPS` is reused rather than re-derived so an all-through school is
+offered correctly on both the primary and secondary sides, exactly as it already
+behaves in search.
+
+The provision filter needs a backend counterpart to the frontend's
+`isSpecialSchool()` in `nextjs-app/lib/utils.ts:897`, reading the same GIAS
+establishment types through `backend/gias_codes.py`. The two must agree: a
+school the frontend treats as special for benchmarking but the backend treats as
+mainstream for matching would be dropped from its own England comparison and
+then offered as a peer to a mainstream school on the next page along.
+
+**Up to six cards, three visible.** Three fit the row; the rest are reached with
+the carousel arrows. Two is the minimum that renders at all.
+
+### Order: distance, and nothing else
+
+The nearest eligible schools, closest first. Similarity does not enter the
+ranking at any point.
+
+**Why not, having built it the other way first.** The original design ranked by
+tiers — same gender and faith within 3 miles, then same gender within 5, then
+anything within 10 — and used distance only to order the result. Two things
+followed, and both showed up on the first Catholic primary anyone looked at:
+
+- A faith match at 2.9 miles outranked a community school at 0.3 miles. For a
+  primary, whose catchment is routinely under a mile, the far school is not a
+  weaker option; it is not an option.
+- Because the row filled from the best tier before widening, three Catholic
+  schools within 3 miles were enough to fill all six slots with Catholic
+  schools. The stopping rule that produced this had been added to prevent the
+  *opposite* failure — padding a row with weak distant matches — and made this
+  one certain.
+
+The premise was backwards. **Distance is a constraint and intake is a
+preference.** A parent cannot act on a school outside their reach however well
+it matches, and they are perfectly capable of noticing a shared denomination
+for themselves if we show it to them. So similarity moved from the ranking to
+the card: `shared` reports what a school genuinely has in common, and the reader
+applies their own weighting.
+
+The hard filters above were always where the defensibility lived. They are
+untouched.
+
+### Reach: a sanity bound, not a target
+
+| Phase | Reach |
+|---|---|
+| Primary, middle deemed primary, all-through | 2 miles |
+| Secondary, middle deemed secondary | 6 miles |
+| 16 plus | 10 miles |
+
+Ordering by distance already handles density — a school in inner London fills
+all six slots inside a mile and never approaches the cap. The cap decides one
+thing: what happens where the area is sparse. It differs by phase because
+catchments do, and because people travel furthest for post-16.
+
+**A primary with nothing inside two miles renders no section**, and that is the
+intended answer rather than a gap. The alternative is a section headed "nearby"
+listing a school four miles from a five-year-old.
+
+**Past the sixth school, the rest are dropped without a count.** The section
+does not try to be the list: `NearbyPlaces` sits directly beneath and already
+leads to the place pages, which are built for browsing a full set and which the
+school page exists to feed.
+
+**Fewer than two results renders nothing.** Not an empty state, not a single
+lonely card. The section is absent, the nav item is absent, and the page is
+unchanged from before it existed.
+
+### Distance
+
+Straight-line, from the vectorised haversine already used for postcode search at
+`backend/app.py:831`, computed over the ~27k-row frame in numpy. Reported to one
+decimal place in miles, consistent with the rest of the site.
+
+Straight-line distance is not road distance and is not measured from the
+reader's home. The section says so in its disclosure rather than leaving the
+reader to assume otherwise.
+
+## API
+
+`/api/schools/{urn}` gains a `similar_schools` array. Each row:
+
+| Field | Notes |
+|---|---|
+| `urn` | for the link and the compare basket |
+| `school_name` | link text |
+| `distance_miles` | one decimal place |
+| `school_type` | GIAS type, translated, for the card's meta line |
+| `age_range` | for the meta line |
+| `shared` | what this school genuinely shares with the subject; may be empty |
+| `metric_value` | the phase-appropriate headline figure, or null |
+| `metric_key` | `rwm_expected_pct` or `attainment_8_score` — see below |
+| `metric_year` | the year the figure is from |
+
+The metric follows the subject school's phase side, not the neighbour's own
+phase, so a row of cards never mixes two scales. The secondary
+side uses `attainment_8_score`; the primary side uses `rwm_expected_pct`. Where
+the neighbour has no value for that key, the card reads "Not published" rather
+than falling back to the other key.
+
+Which side a school takes is decided once, in
+`similar_schools.is_secondary_phase`, by membership of `PHASE_GROUPS["secondary"]`
+minus all-through — never by testing for the substring "secondary", which misses
+`16 plus` (GIAS phase 6) and hands a sixth-form college the primary bucket.
+All-through is the exception in the other direction: `PHASE_GROUPS` lists it on
+both sides, but it takes the primary metric.
+
+This is usually the same thing as "the template the page renders", but not
+always. `computeSchoolFlags` decides the template with that same substring test,
+so a `16 plus` school renders `PrimarySchoolSections` while being matched — 
+correctly — against secondaries. The section therefore takes its lede noun from
+the school's own phase rather than from its template, or it would print "Other
+primary schools near <sixth form college>" above a row of secondaries.
+
+Up to six rows of roughly 130 bytes each. It rides in the existing detail payload
+rather than a new endpoint because the page already makes exactly one server
+fetch for its data, and `/school/[slug]` regenerates at most weekly
+(`revalidate = 604800`), so the per-request cost is paid once per school per
+week.
+
+**The key is absent, not null, on a backend that does not have this code.** The
+frontend treats absent and empty identically, which is what allowed
+`NearbyPlaces` to ship without a lockstep deploy of the two images.
+
+`shared` is computed on the backend, beside the data it is derived from, not
+re-derived on the frontend. Deriving it twice is how a card comes to claim
+something the selection never established. An empty list is a real answer and
+renders no chips: a bare card costs a school nothing but the likeness it does
+not have, since the order was already settled by distance.
+
+## Frontend
+
+### Components
+
+`components/school/SimilarSchoolsSection.tsx` — a server component wrapped in
+the shared `Section` shell from `sectionShared.tsx`. It renders the heading,
+the lede, the card grid, the footer CTA and one caption line. Every
+card's title is an `<a>` to the school's canonical slug URL via `schoolUrl()`.
+
+`components/school/AddToCompareButton.tsx` — calls `addSchool` from
+`ComparisonProvider` and reports the selection with a `from: 'similar_schools'`
+attribution, mirroring `addSchoolFromSearch` in `HomeView.tsx:442`.
+
+`components/school/SimilarSchoolsCarousel.tsx` — the scroller and its arrows. It
+takes the server-rendered cards as `children` and the server-rendered heading and
+lede as a `header` prop, so those stay server components while the client
+component owns only the ref, the scroll handler and the arrows' disabled state.
+
+The split matters: the links — the part with SEO value and the part that must
+work without JavaScript — are server-rendered into the initial HTML, and only
+the basket interaction and the arrows are hydrated.
+
+### The carousel
+
+**Every card is in the initial HTML.** The arrows scroll a list; they never swap
+a view. Six `<a>` elements are in the markup whether or not anything is
+hydrated, which is the whole reason the section exists — a paginated widget that
+mounts cards on click would put four of the six links beyond a crawler and
+beyond a reader with no JavaScript.
+
+So the scroller is a plain overflowing `<ul>` with `scroll-snap-type: x
+mandatory`, and the arrows call `scrollBy` on it. With no JavaScript it
+degrades to a horizontally scrollable row that still works by touch and by
+trackpad. Three cards are visible at desktop width and two below 820px.
+
+**Arrows appear only when there is somewhere to go** — that is, only when more
+than three schools were found. Each disables itself at its own end of the
+travel.
+
+#### Below 640px the arrows go away
+
+This follows [MOBILE.md](../../../MOBILE.md), which makes 360px the design
+floor and mobile the primary target at ≥55% of traffic.
+
+Kept in the heading's flex row at 360px, the two arrow buttons take 96px from a
+328px card and crush the lede into a four-line column — measured, not guessed.
+And swiping already does what they do. So below 640px the header becomes a
+single column, the arrows are not rendered, one card shows at 86% width so the
+next one peeks, and the affordance is carried by the right-edge scroll-fade that
+MOBILE.md documents for exactly this case:
+
+```css
+mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+```
+
+The fade lifts at the end of the travel, where there is nothing left to hint
+at. That means the at-end state must be computed whether or not an arrow exists
+to consume it — on mobile it drives the mask alone.
+
+**Every interactive element clears 44×44px**, per MOBILE.md's iOS HIG check: the
+arrow buttons and the add-to-compare button are both 44px, up from the 40px they
+were first drawn at. A card title's own box is shorter than that, but its hit
+area is the whole card through the `::after` overlay, so it passes on the target
+that actually receives the tap.
+
+**The edge test needs a tolerance, and this is not fussiness.** The scroller
+carries 2px of padding so focus rings are not clipped, and scroll-snap treats
+that padding as the first card's snap position: a scroller sitting at its start
+reports `scrollLeft` of 2, not 0. Sub-pixel rounding moves it again at other
+zoom levels. Testing `scrollLeft === 0` therefore leaves the back arrow live and
+pointing nowhere on first paint — confirmed in the mockup before it was fixed.
+Both ends compare against an 8px tolerance.
+
+**Selecting a school must not move the row.** Adding to the basket re-renders
+the footer; the scroll offset lives in the DOM rather than in React state, so
+the carousel must not remount or reset on that render. A reader who ticks the
+fifth school and is thrown back to the first has been punished for using the
+feature.
+
+### Placement and navigation
+
+Rendered as the last section **inside** `SchoolDetailShell`, from both
+`PrimarySchoolSections` and `SecondarySchoolSections`. Inside, not after, because
+the sticky nav's scroll-spy locates sections with `document.getElementById` and
+can only reach a section that lives in the shell.
+
+`NearbyPlaces` stays where it is, outside the shell, immediately below. The
+resulting order — this school, then similar schools, then the places containing
+them — narrows before it widens, which is the order a reader leaves a page in.
+
+`buildNavItems` and `buildSecondaryNavItems` both gain
+`{ id: 'similar', label: 'Similar schools' }`, gated on the section rendering.
+The id must match the `Section` id or the scroll-spy silently breaks.
+
+### The comparison CTA
+
+A plain `<a href="/compare?urns=…">`, built from this school's URN plus the
+selected ones. `/compare` already parses `urns` from the query string
+(`app/(frontend)/compare/page.tsx:55`), so this needs no new compare plumbing.
+With nothing selected the CTA is disabled; the button also adds to the shared
+basket so the site-wide comparison state stays consistent with what the page
+shows.
+
+## Copy, and what the section is allowed to claim
+
+**The lede never claims an intake.** It reads "Other primary schools near X." —
+one sentence, no variants. The earlier version varied the wording by tier, which
+only existed to soften a claim the section should not have been making.
+
+**The heading is "Other schools nearby", not "Similar schools nearby".** The
+hard filters do guarantee a comparable set — same phase, same selectivity,
+mainstream never beside special — but nothing ranks on likeness, so the heading
+does not say it does. The nav item reads "Nearby schools" and the section id is
+`nearby`.
+
+**Chips state only what is shared, and may be absent entirely.** A card with
+nothing in common renders no chip row rather than falling back to a filler.
+Since chips no longer affect the order, an empty one costs that school nothing
+except a claim it cannot support — and a Catholic parent scanning the row still
+spots "Roman Catholic" on the card that carries it, and weighs it themselves.
+
+**The neighbour's metric carries no valence colour.** Green and terracotta are
+reserved site-wide for comparison against the England average. Colouring a
+neighbour's figure against this school's would read as ranking the neighbours
+against each other, which is precisely the endorsement this section must not
+make. The figure sits in neutral ink above a plain "72% at this school"
+reference line, and the reader draws their own conclusion.
+
+**A missing figure reads "Not published".** Never 0, never blank, never an
+em dash. This follows the same rule the rest of the detail page uses: a school
+with no published result has not scored zero.
+
+**There is no "how these are chosen" disclosure.** The method is visible in what
+the section already shows — the phase in the lede, the shared characteristics on
+each card, the distance above each name — and a collapsed panel restating it
+earns less than the space it costs.
+
+**One caption line survives, and only one:** that distances are straight-line
+from the school and not road distance. This is not a method note. A reader who
+sees "0.6 miles away" and takes it for the walk has been misled by us, and no
+other element on the card corrects that. The remaining notes — that listing is
+not a recommendation, that special schools only meet special schools — are
+statements the selection rules already keep true without being narrated.
+
+## Degradation
+
+| Condition | Behaviour |
+|---|---|
+| `similar_schools` absent (older backend image) | no section, no nav item |
+| fewer than 2 qualifying schools | no section, no nav item |
+| this school has no coordinates | no section |
+| the helper raises | returns `[]`; the page renders without the section |
+
+The helper is wrapped so a failure inside it never 500s a page that is otherwise
+complete — the posture `get_supplementary_data` already takes for its own
+queries.
+
+## Testing
+
+**Backend**, in a new `backend/tests/test_similar_schools.py`, against a
+synthetic frame rather than live marts:
+
+- a selective school never returns a non-selective one, and vice versa
+- a special school returns only special schools; a mainstream school returns none
+- a Boys school never returns a Girls school; Mixed matches both
+- closed schools and schools without coordinates are never returned
+- results are ordered by distance ascending, always
+- a faith match never outranks a closer school (the staging defect, pinned)
+- the nearest eligible school is always present
+- more than six qualifying schools returns the six nearest
+- reach is capped per phase, and a primary beyond two miles returns `[]`
+- an all-through school is offered on both phase sides
+- a `16 plus` school is matched against secondaries and colleges, never primaries
+- `is_secondary_phase` and `PHASE_GROUPS` agree on every GIAS phase value
+- fewer than two qualifying schools returns `[]`
+- distances match a hand-computed haversine for a known pair
+
+**Frontend**, in `nextjs-app/__tests__`:
+
+- the section renders nothing for absent, empty and single-row inputs
+- the lede never claims a similar intake
+- an empty `shared` renders no chips rather than a filler
+- a null metric renders "Not published"
+- the nav item appears only alongside the section
+- every card is in the DOM, including the ones scrolled out of view
+- arrows render only when more than three schools were found
+
+jsdom has no layout, so `scrollWidth` and `clientWidth` are both 0 there and the
+arrows' disabled state cannot be meaningfully asserted in Jest. That behaviour is
+covered in the journey instead, against a real engine, rather than by a unit test
+that would pass on a measurement that does not exist.
+
+**E2E**, added to the existing journeys in `e2e/tests` in the same PR, per the
+repository's rule on user-facing behaviour:
+
+- the section renders on a known staging URN, with resolving links
+- where arrows are present, the back arrow starts disabled and the forward arrow
+  moves the row
+- selecting a school does not reset the scroll position
+- add-to-compare reaches `/compare` with the expected `urns`
+- at 360, 390 and 430px: no horizontal overflow, every interactive element in the
+  section clears 44×44px, and no arrows are rendered
+
+The E2E gate runs after merge on this project, so these journeys are not
+provable in the PR checks; the PR is verified on the unit tests, and the
+journeys are confirmed on the post-merge staging run.
+
+## Out of scope
+
+- A map of the nearby schools. The section is a list; the page already has a map.
+- Autoplay, dots, or an infinite loop on the carousel. It is a short list a
+  reader scans deliberately, not a banner competing for attention, and a row
+  that moves on its own is a row that moves while someone is reading it.
+- Statistical neighbours on deprivation, size or cohort profile. If plain
+  distance proves too blunt, that is the trigger to move this computation into a
+  dbt mart — `select_nearby` is a deliberate seam for exactly that swap.
+- Precomputing neighbours in `marts.*`. Rejected for now: a new mart is inert
+  until Airflow runs, so the feature would ship dark, and every tuning change to
+  the rules would become a pipeline round-trip instead of a deploy. The revision
+  at the top of this document is the argument for keeping that loop short.
+- Any change to `/api/compare`, the compare page, or the comparison basket.

docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md

@@ -0,0 +1,222 @@
+# School Type Groups and a Faith Filter — Design
+
+**Date:** 2026-10-02
+**Status:** approved in conversation, awaiting spec review
+**Scope:** search filters (`/` results toolbar and phone filter sheet), `/api/schools`, `/api/filters`
+
+## Goal
+
+Replace the School type filter's 34 GIAS establishment types with six groups a
+parent recognises, and add a Faith filter.
+
+Since PR #169 the School type select offers the full GIAS list rather than the
+types in the results. That fixed the trap where choosing a type left only that
+type on offer, but it exposed the list itself: "Academy converter", "Academy
+sponsor led", "Free schools", "Foundation school", "Voluntary controlled
+school" and 29 more. These describe governance and funding. For a mainstream
+state school they change almost nothing a parent experiences, and parents
+cannot be expected to know the differences.
+
+What parents actually ask is: is it free, is it mainstream, is it for children
+with special needs, is it a sixth form or college, and is it a faith school.
+The first four are the type groups below. The fifth is the real meaning behind
+"Voluntary aided" and "Voluntary controlled", but many academies are faith
+schools too, so it gets its own filter rather than hiding inside type.
+
+## Non-goals
+
+- Changing what a school page or result row shows. They keep the precise GIAS
+  type ("Academy sponsor led"), where it is information, not a choice.
+- Removing the "not offered" types from search results. They stay reachable
+  under "Any school type"; whether parents should see them at all is a
+  separate decision.
+- Reordering the type options by phase (for example "Sixth form or college"
+  first for 16 plus). Fixed order is simpler.
+- The rankings page, which has no type filter.
+- Changing `result_filters`. Its `school_types` key is already unread
+  (docs/LEGACY_CODE.md).
+
+## Type groups
+
+Order is the order shown. Codes are GIAS `TypeOfEstablishment` codes
+(`backend/gias_codes.py: SCHOOL_TYPE`). Counts are staging schools on
+2026-10-02.
+
+| Key | Label | GIAS codes | Schools |
+|---|---|---|---|
+| `academy` | State school: academy or free school | 28 Academy sponsor led, 34 Academy converter, 35 Free schools, 40 University technical college, 41 Studio schools, 6 City technology college | 11,186 |
+| `council` | State school: council-run | 1 Community school, 2 Voluntary aided school, 3 Voluntary controlled school, 5 Foundation school, 15 Local authority nursery school | 9,316 |
+| `independent` | Independent (fee-paying) | 11 Other independent school | 1,585 |
+| `special` | Special school (SEND) | 7 Community special, 12 Foundation special, 44 Academy special converter, 33 Academy special sponsor led, 36 Free schools special, 8 Non-maintained special, 10 Other independent special, 32 Special post 16 institution | 2,227 |
+| `post16` | Sixth form or college | 18 Further education, 31 Sixth form centres, 45 Academy 16-19 converter, 46 Academy 16 to 19 sponsor led, 39 Free schools 16 to 19 | 302 |
+| `alternative` | Alternative provision | 14 Pupil referral unit, 42 Academy AP converter, 43 Academy AP sponsor led, 38 Free schools AP | 331 |
+
+**Not offered** (no group, reachable only under "Any school type"): 29 Higher
+education institutions, 27 Miscellaneous, 24 Secure units, 49 Online provider,
+57 Academy secure 16 to 19, 56 Institution funded by other government
+department. 238 schools.
+
+**Excluded upstream** (never in the marts): 25, 26, 30, 37, per
+`non_england_school_type_codes` in `pipeline/transform/dbt_project.yml`.
+
+### Judgement calls
+
+- **Independent special schools are Special, not Independent.** They are
+  usually funded by the local authority through a child's EHCP; to a parent
+  they are SEND provision, not private school.
+- **UTCs, studio schools and city technology colleges are academies.** They are
+  legally academies, they are few (66 together), and a family considering one
+  searches for it by name.
+- **Special post 16 institutions are Special, not Sixth form or college.** The
+  defining fact for a parent is the SEND provision.
+- **Alternative provision is last.** Parents do not apply to it; the local
+  authority places children there.
+
+## Faith groups
+
+Codes are GIAS `ReligiousCharacter` codes
+(`backend/gias_codes.py: RELIGIOUS_CHARACTER`). A joint school belongs to every
+faith its label names, so "Roman Catholic/Church of England" matches both
+Church of England and Roman Catholic. A generic "Christian" alongside a named
+denomination adds nothing ("Church of England/Christian" is Church of England
+only).
+
+| Key | Label | GIAS codes |
+|---|---|---|
+| `none` | No religious character | 0 Does not apply, 6 None, 99 (blank), and a missing code |
+| `church_of_england` | Church of England | 2, 31 Anglican, 34 Anglican/Church of England, 20 CofE/Christian, 32 Anglican/Christian, and the joint codes 9, 10, 11, 12, 13, 19, 30, 33, 41, 48 |
+| `roman_catholic` | Roman Catholic | 3, 35 Catholic, and the joint codes 11, 13, 48 |
+| `other_christian` | Other Christian | 4 Methodist, 8 Seventh Day Adventist, 14 Quaker, 15 Christian, 16 United Reformed Church, 17 Congregational Church, 18 Free Church, 22 Greek Orthodox, 26 Moravian, 28 Inter- / non- denominational, 37 Christian/Evangelical, 38 Christian Science, 39 Christian/Methodist, 40 Christian/non-denominational, 44 Plymouth Brethren Christian Church, 45 Protestant, 46 Protestant/Evangelical, 47 Reformed Baptist, and the joint codes 9, 10, 12, 19, 30, 33, 41 |
+| `jewish` | Jewish | 5 Jewish, 36 Charadi Jewish, 43 Orthodox Jewish |
+| `muslim` | Muslim | 7 Muslim, 42 Islam, 49 Sunni Deobandi |
+| `other_faith` | Other faith | 21 Sikh, 24 Buddhist, 25 Hindu, 29 Multi-faith |
+
+The joint codes: 9 CofE/Methodist, 10 Methodist/CofE, 11 CofE/RC, 12 CofE/URC,
+13 RC/CofE, 19 CofE/Free Church, 30 CofE/Methodist/URC/Baptist,
+33 Anglican/Evangelical, 41 CofE/Evangelical, 48 RC/Anglican.
+
+28 "Inter- / non- denominational" is filed as Other Christian: GIAS uses it for
+Christian schools that are not tied to one church.
+
+## Architecture
+
+Grouping lives in the backend, not dbt. The API already translates GIAS codes
+to names when it loads the marts (`backend/data_loader.py:
+translate_gias_code_columns`), and every filter is applied to that DataFrame.
+Grouping there needs no mart change, so there is no Airflow run between merge
+and staging showing it.
+
+### `backend/school_groups.py` (new)
+
+- `TYPE_GROUPS`: ordered `(key, label, frozenset[int])` per type group.
+- `UNOFFERED_TYPE_CODES`: the not-offered codes, so that "every code is
+  accounted for" is testable.
+- `FAITH_GROUPS`: ordered `(key, label, frozenset[int])` per faith group.
+- `type_group_for(name) -> str | None` and
+  `faith_groups_for(name) -> tuple[str, ...]` (a missing or blank name gives
+  `("none",)`).
+
+No dependence on the generated GIAS dictionaries beyond their codes, so the
+backend/pipeline dictionary parity test is untouched.
+
+### Grouping by name, at filter time
+
+The groups are defined over codes but looked up by the translated name
+(`type_group_for(name)`, `faith_groups_for(name)`), when `/api/schools` and
+`/api/filters` filter. The DataFrame those endpoints read carries names only:
+`translate_gias_code_columns` replaces the codes at load, the legacy-name
+mart fallback never had codes, and the API test fixtures are written in
+names. The names come from the same dictionaries, so the lookup is exact.
+`data_loader.py` is unchanged.
+
+### `/api/schools`
+
+Both filters work on the name columns at request time. `_names_in_group`
+collects the distinct `school_type` or `religious_denomination` names the
+group accepts, once per distinct name rather than per row, and the rows are
+kept with `isin`. No group column is stored.
+
+- `school_type`: if the value is a type group key (any case), keep the rows
+  whose `school_type` name `type_group_for` puts in that group. Otherwise
+  filter on the raw label exactly as today, so an old
+  `?school_type=Community+school` link keeps working.
+- `faith` (new, optional, `max_length=40`, sanitised like the others): keep the
+  rows whose `religious_denomination` name `faith_groups_for` puts in that
+  faith (any case); for `none`, rows with a missing name too. An unknown key
+  returns no schools rather than being ignored, so a typo does not silently
+  show everything.
+
+### `/api/filters`
+
+Two new keys:
+
+- `school_type_groups`: `[{value, label}]` in `TYPE_GROUPS` order, only groups
+  with at least one school.
+- `faiths`: `[{value, label}]` in `FAITH_GROUPS` order, same rule.
+
+`school_types` stays as it is (the raw list), so nothing that reads it breaks.
+
+### Frontend
+
+- `lib/types.ts`: `Filters` gains optional `school_type_groups` and `faiths`
+  (`{ value: string; label: string }[]`). Optional, so the empty fallbacks in
+  `app/(frontend)/page.tsx` and `rankings/page.tsx` stay valid.
+- `app/(frontend)/page.tsx`: reads `faith` from the search params, counts it
+  in `hasSearchParams`, and passes it to `fetchSchools`. `SchoolSearchParams`
+  in `lib/types.ts` gains `faith`. HomeView's load-more already forwards every
+  URL param. HomeView's `isSearchActive` is left as it is: like phase and
+  gender, faith narrows a search rather than starting one.
+- `components/FilterBar.tsx`:
+  - The School type select's options become `filters.school_type_groups`;
+    "Any school type" stays first. With no groups (the API failed), the select
+    is left out, as Gender and Admissions already are.
+  - A new **Faith** select (`aria-label="Faith"`, "Any faith or none" first)
+    from `filters.faiths`. On desktop it goes in the More filters panel, after
+    Local authority. In the phone sheet it comes after School type.
+  - `faith` joins `FILTER_KEYS` (chip and Filters count) and the More filters
+    count, and `faith=` joins `filters_active` in the `search_submitted`
+    analytics event.
+  - Chip labels come from the option lists: "Special school (SEND)",
+    "Roman Catholic". An old raw-label `school_type` shows its raw label.
+- `lib/utils.ts: isSpecialSchool` is unchanged. It reads a school's raw
+  `school_type`, which still arrives.
+
+## Testing
+
+**Backend (pytest):**
+
+- Every `SCHOOL_TYPE` code is in exactly one type group, in
+  `UNOFFERED_TYPE_CODES`, or in `non_england_school_type_codes`. A new DfE
+  code fails this test instead of silently vanishing from the filter.
+- Every `RELIGIOUS_CHARACTER` code maps to at least one faith group.
+- The joint codes map to each faith they name (11 and 48 → CofE and RC;
+  9 → CofE and Other Christian) and 20 → CofE only.
+- `/api/schools?school_type=special` returns only special-group schools;
+  `?school_type=Community+school` still filters by label.
+- `/api/schools?faith=roman_catholic` returns only matching schools, a joint
+  school included; `?faith=nonsense` returns none.
+- `/api/filters` lists the groups in order and leaves out an empty one.
+- Run via uv, as the backend tests always are.
+
+**Frontend (Jest):**
+
+- School type offers the six group labels, not raw types.
+- Faith offers its options, in the panel and in the sheet.
+- A faith filter shows as a chip, counts on Filters and More filters, and
+  clears with Clear all.
+- No groups or faiths in `filters` → the select is left out.
+
+**E2E (`e2e/tests/journeys.spec.ts`):**
+
+- A journey that picks "Special school (SEND)" and "Roman Catholic" from the
+  selects, then checks through `/api/schools` with the same params that every
+  returned school's `school_type` is a special type and its
+  `religious_denomination` names Catholic. Data-invariant: it asserts the
+  property, not a count.
+- It can only pass after merge; the staging E2E gate runs post-merge.
+
+## Rollout
+
+One PR; backend and frontend deploy together on merge. The frontend tolerates
+an API without the new keys (the selects are left out), so the order the
+containers update in does not matter.

e2e/tests/journeys.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Page } from '@playwright/test';
+import { test, expect, Locator, Page } from '@playwright/test';
 
 /**
  * Journey tests for SchoolCompare, run against the staging environment as the
@@ -19,6 +19,31 @@ function schoolLinks(page: Page) {
   return page.locator('a[href^="/school/"]');
 }
 
+/**
+ * A scroll offset that has stopped moving.
+ *
+ * The carousel arrows scroll with `behavior: 'smooth'`, so a reading taken
+ * straight after a click lands mid-animation. Measured against staging: the
+ * animation runs ~700ms, and a poll for "has it moved at all" is satisfied
+ * 50ms in, at 13px of a 1300px journey. A test that then records an offset,
+ * does something, and records again is measuring the tail of the arrow's
+ * animation rather than the effect of whatever it did in between.
+ *
+ * Two identical readings in a row is the cheapest sound definition of settled.
+ */
+async function settledScrollLeft(scroller: Locator): Promise<number> {
+  let previous = -1;
+  await expect
+    .poll(async () => {
+      const current = await scroller.evaluate((node: HTMLElement) => Math.round(node.scrollLeft));
+      const settled = current === previous;
+      previous = current;
+      return settled;
+    }, { timeout: 10_000 })
+    .toBe(true);
+  return previous;
+}
+
 /**
  * Two URNs guaranteed to be pure-primary (same phase). The compare page's
  * phase tabs split all-through schools (which carry KS4 data) onto the
@@ -97,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);
 });
 
@@ -245,6 +270,77 @@ test('searching by name returns school results', async ({ page }) => {
 test('searching by postcode returns nearby schools', async ({ page }) => {
   await searchByName(page, 'B1 1BB');
   await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
+  // A new postcode search starts at half a mile.
+  await expect(page).toHaveURL(/[?&]radius=0\.5(&|$)/);
+  await expect(page.getByRole('combobox', { name: 'Distance' })).toHaveValue('0.5');
+});
+
+test('the phase filter switches straight from secondary to primary', async ({ page }) => {
+  // The phase options once came from the result set, which the phase filter
+  // had already narrowed — so with secondary chosen, primary was not offered.
+  await page.goto('/?search=school&phase=secondary');
+  const phase = page.getByRole('combobox', { name: 'Phase' });
+  await expect(phase).toHaveValue('secondary', { timeout: 15_000 });
+  await phase.selectOption('primary');
+  await expect(page).toHaveURL(/[?&]phase=primary(&|$)/);
+  await expect(phase).toHaveValue('primary');
+});
+
+test('school type and gender switch straight to another value', async ({ page }) => {
+  // Their options came from the result set, which the filter had already
+  // narrowed, so with one value chosen it was the only one on offer.
+  await page.goto('/?search=school&gender=girls');
+  // An applied gender filter opens More filters by itself.
+  const gender = page.getByRole('combobox', { name: 'Gender', exact: true });
+  await expect(gender).toHaveValue('girls', { timeout: 15_000 });
+  await gender.selectOption('boys');
+  await expect(page).toHaveURL(/[?&]gender=boys(&|$)/);
+
+  // Whatever types the data holds, choosing one leaves the same list on offer.
+  const type = page.getByRole('combobox', { name: 'School type', exact: true });
+  const offered = await type.locator('option').allTextContents();
+  expect(offered.length, 'no school type to choose').toBeGreaterThan(1);
+  await type.selectOption(offered[1]);
+  await expect(page).toHaveURL(/[?&]school_type=/);
+  await expect.poll(() => type.locator('option').allTextContents()).toEqual(offered);
+});
+
+/*
+ * School type offers six groups a parent recognises, and Faith sits beside it.
+ * Data-invariant: asserts what every returned school is, never how many.
+ */
+test('school type groups and the faith filter narrow to what they name', async ({ page }) => {
+  await page.goto('/?search=school');
+  const type = page.getByRole('combobox', { name: 'School type', exact: true });
+  await expect(type).toBeVisible({ timeout: 15_000 });
+  await type.selectOption({ label: 'Special school (SEND)' });
+  await expect(page).toHaveURL(/[?&]school_type=special(&|$)/);
+
+  await page.getByRole('button', { name: /^More filters/ }).click();
+  await page.getByRole('combobox', { name: 'Faith', exact: true }).selectOption({ label: 'Roman Catholic' });
+  await expect(page).toHaveURL(/[?&]faith=roman_catholic(&|$)/);
+
+  const res = await page.request.get(
+    '/api/schools?search=school&school_type=special&faith=roman_catholic&page_size=100');
+  expect(res.ok()).toBeTruthy();
+  for (const s of (await res.json()).schools as { school_type: string; religious_denomination: string }[]) {
+    expect(s.school_type).toMatch(/special/i);
+    expect(s.religious_denomination).toMatch(/catholic/i);
+  }
+});
+
+test('a phase outside primary/secondary filters to that phase, not to everything', async ({ page }) => {
+  // The search page offers every GIAS phase, but the API only knew the grouped
+  // ones and silently dropped the rest — so "Nursery" returned primaries.
+  for (const phase of ['Nursery', '16 plus']) {
+    const res = await page.request.get(
+      `/api/schools?phase=${encodeURIComponent(phase.toLowerCase())}&page_size=50`);
+    expect(res.ok()).toBeTruthy();
+    const phases = new Set(
+      ((await res.json()).schools ?? []).map((s: { phase?: string }) => s.phase));
+    expect([...phases], `phase=${phase} returned other phases`)
+      .toEqual(phases.size ? [phase] : []);
+  }
 });
 
 test('a report-card school shows a Report Card badge in search results, not its old grade', async ({ page }) => {
@@ -475,11 +571,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();
@@ -491,6 +584,276 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
   await expect(openFs).toBeVisible();
 });
 
+/*
+ * A postcode search with a list long enough to scroll. The default half mile
+ * finds two schools around B1 1BB, so the page ends before the toolbar has
+ * anything to stay pinned over; the scroll tests ask for a mile.
+ */
+const LONG_LIST = '/?postcode=B1%201BB&radius=1';
+
+/*
+ * 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 page.goto(LONG_LIST);
+  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');
+});
+
+/*
+ * The toolbar's line count is set by the screen width, never by the results.
+ * It once wrapped wherever it ran out of room, and the List/Map switch only
+ * appears when there are results — so the same search took two lines with
+ * results and one without.
+ */
+test('the results toolbar keeps its line count whether or not there are results', async ({ page }) => {
+  const withResults = LONG_LIST;
+  // No school type matches this, so the same search returns nothing.
+  const without = `${withResults}&school_type=no-such-type`;
+
+  const lines = async (url: string) => {
+    await page.goto(url);
+    // By label: the input is a combobox when autosuggest is on.
+    const input = page.getByLabel('School name or postcode', { exact: true });
+    const filters = page.getByRole('group', { name: 'Filters' });
+    await expect(filters).toBeVisible({ timeout: 15_000 });
+    const a = (await input.boundingBox())!;
+    const b = (await filters.boundingBox())!;
+    return b.y >= a.y + a.height ? 2 : 1;
+  };
+  const view = page.getByRole('group', { name: 'Results view' });
+
+  for (const [width, expected] of [[1400, 1], [1100, 2]] as const) {
+    await page.setViewportSize({ width, height: 800 });
+    expect(await lines(withResults), `${width}px with results`).toBe(expected);
+    await expect(view).toBeVisible();
+    expect(await lines(without), `${width}px without results`).toBe(expected);
+    await expect(view).toHaveCount(0);
+  }
+});
+
+/*
+ * 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 count and the sort share one line at the top of the list.
+  const heading = await pane.getByRole('heading', { level: 2 }).boundingBox();
+  const sort = await pane.getByRole('combobox').boundingBox();
+  expect(Math.abs((heading!.y + heading!.height / 2) - (sort!.y + sort!.height / 2)))
+    .toBeLessThan(8);
+
+  // 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);
+  // Leaflet crossfades popups for 200ms, so two exist until the old one goes.
+  await expect(page.locator('.sc-popup')).toHaveCount(1);
+  await expect(page.locator('.sc-popup')).toContainText(name);
+  // The card's View link is drawn like the list's, not in Leaflet's link blue.
+  // Polled, because .btn transitions its colour.
+  const colour = (l: Locator) => l.evaluate(el => getComputedStyle(el).color);
+  const listViewColour = await colour(card.getByRole('link', { name: 'View', exact: true }));
+  await expect.poll(() => colour(page.locator('.sc-popup').getByRole('link', { name: 'View', exact: true })))
+    .toBe(listViewColour);
+
+  // 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')).toHaveCount(1);
+  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 page.goto(LONG_LIST);
+
+    // 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 applied-filter chips scroll by design, so only their line's 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*="chipsLine"]'))
+        .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();
+  });
+}
+
+/*
+ * Phones filter through one Filters button and a sheet with every filter in
+ * it. The row it replaced scrolled sideways with "More filters" first, so
+ * phase showed only in part, school type not at all, and the panel "More
+ * filters" opened held neither.
+ */
+test('a phone filters through one sheet, and sees what it applied as chips', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto(LONG_LIST);
+  const trigger = page.getByRole('button', { name: 'Filters', exact: true });
+  await expect(trigger).toBeInViewport({ timeout: 15_000 });
+  // The desktop row is gone at this width: no phase select until the sheet.
+  await expect(page.getByRole('combobox', { name: 'Phase', exact: true })).toHaveCount(0);
+
+  await trigger.click();
+  const sheet = page.getByRole('dialog', { name: 'Filters' });
+  await expect(sheet).toBeVisible();
+  await expect(sheet.getByRole('radio', { name: 'Within 1 mile' })).toBeChecked();
+  for (const name of ['Phase', 'School type', 'Local authority']) {
+    await expect(sheet.getByRole('combobox', { name, exact: true })).toBeVisible();
+  }
+
+  // A change applies at once, and the sheet stays open for the next one.
+  await sheet.getByRole('combobox', { name: 'Phase', exact: true }).selectOption('primary');
+  await page.waitForURL(/[?&]phase=primary(&|$)/);
+  await expect(sheet).toBeVisible();
+  const show = sheet.getByRole('button', { name: /^(Show [\d,]+ schools?|No schools match)$/ });
+  await expect(show).toBeVisible();
+
+  // MOBILE.md: the sheet clears the bottom tab bar, and its targets are 44px.
+  // It slides up over 0.3s, so poll for where it comes to rest.
+  await expect.poll(async () => {
+    const box = (await show.boundingBox())!;
+    return Math.round(box.y + box.height);
+  }).toBeLessThanOrEqual(844);
+  const small = await sheet.evaluate((el) =>
+    [...el.querySelectorAll('button, select, label:has(input)')]
+      .filter((n): n is HTMLElement => !!(n as HTMLElement).offsetParent)
+      .map((n) => ({ t: n.innerText?.trim().slice(0, 24) || n.getAttribute('aria-label'),
+        w: n.getBoundingClientRect().width, h: n.getBoundingClientRect().height }))
+      .filter((o) => o.w < 44 || o.h < 44));
+  expect(small).toEqual([]);
+
+  await show.click();
+  await expect(sheet).toBeHidden();
+
+  // What was applied shows under the search, counted on the button, and comes
+  // off with a tap, keeping the search.
+  await expect(page.getByRole('button', { name: 'Filters, 1 applied' })).toBeInViewport();
+  const chip = page.getByRole('group', { name: 'Applied filters' })
+    .getByRole('button', { name: 'Remove filter: Primary' });
+  await expect(chip).toBeInViewport();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth))
+    .toBe(0);
+  await chip.click();
+  await expect(page).not.toHaveURL(/[?&]phase=/);
+  await expect(page).toHaveURL(/[?&]postcode=B1(%20|\+)1BB/);
+  await expect(page.getByRole('group', { name: 'Applied filters' })).toHaveCount(0);
+  await expect(trigger).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);
@@ -2734,3 +3097,166 @@ test('the content sitemap lists the about page and is advertised in robots', asy
   expect(body).toContain('/sitemap.xml');
   expect(body).toContain('/content-sitemap.xml');
 });
+
+/**
+ * Other schools nearby.
+ *
+ * The section is absent by design where fewer than two schools qualify, and the
+ * arrows are absent where three cards fit, so this asserts each part of the
+ * contract only where it applies.
+ *
+ * Two things here cannot be tested anywhere else: the arrows' disabled state,
+ * which jsdom cannot measure because it has no layout, and the scroll position
+ * surviving a selection, which is DOM state rather than React state.
+ */
+test('nearby schools link on to other schools and into compare', async ({ page }) => {
+  await searchByName(page, 'Primary');
+  await schoolLinks(page).first().click();
+  await page.waitForURL(/\/school\//);
+
+  const section = page.locator('#nearby');
+  if ((await section.count()) === 0) {
+    test.skip(true, 'No qualifying similar schools for this school');
+  }
+
+  // Every card is a real link to another school page — including the ones
+  // behind the arrows, which is the whole reason this is a scroller and not a
+  // paginated widget.
+  const links = section.locator('a[href^="/school/"]');
+  const linkCount = await links.count();
+  expect(linkCount).toBeGreaterThanOrEqual(2);
+  expect(linkCount).toBeLessThanOrEqual(6);
+  expect(await links.first().getAttribute('href')).toMatch(/^\/school\/\d{6}-/);
+
+  await expect(section.getByText(/miles away/).first()).toBeVisible();
+
+  const scroller = section.locator('ul').first();
+
+  // The carousel, where this school had more than three matches.
+  const forward = section.getByRole('button', { name: 'More schools' });
+  if (await forward.count()) {
+    const back = section.getByRole('button', { name: 'Previous schools' });
+    await expect(back).toBeDisabled();
+
+    await forward.click();
+    expect(await settledScrollLeft(scroller)).toBeGreaterThan(8);
+    await expect(back).toBeEnabled();
+  }
+
+  // The compare hand-off, and the row must not jump back to the start when the
+  // footer re-renders underneath it.
+  //
+  // Click the LAST card's button, not the first. Playwright scrolls a target
+  // into view before clicking it, so clicking card one while the row is paged
+  // to the end scrolls the container back to the start — and the assertion
+  // below then measures Playwright's own scrolling rather than the app's.
+  // That is what this test did on its first staging run: 537 → 2, reproduced
+  // afterwards on a static page with no React on it at all.
+  //
+  // A few pixels of snap or sub-pixel adjustment are fine; a reset to the
+  // start is not, which is the whole point of the check.
+  const offsetBefore = await settledScrollLeft(scroller);
+  await section.getByRole('button', { name: /Add to compare/ }).last().click();
+  await expect(
+    section.getByRole('button', { name: /Added to compare/ }).first(),
+  ).toBeVisible();
+  const offsetAfter = await settledScrollLeft(scroller);
+  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.
+ *
+ * MOBILE.md asks for exactly this check and records that it was not written
+ * because "Playwright isn't currently in the project dependency set". That is
+ * no longer true — this suite is Playwright — so the check exists now, scoped
+ * to the page this feature touches.
+ */
+for (const width of [360, 390, 430]) {
+  test(`nearby schools survives a ${width}px viewport`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 800 });
+    await searchByName(page, 'Primary');
+    await schoolLinks(page).first().click();
+    await page.waitForURL(/\/school\//);
+
+    const section = page.locator('#nearby');
+    if ((await section.count()) === 0) {
+      test.skip(true, 'No qualifying similar schools for this school');
+    }
+
+    // 1. Nothing bleeds past the right edge.
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth),
+    ).toBe(0);
+
+    // 2. No arrows on touch widths — swiping does the job, and they would take
+    //    96px from a 328px card.
+    await expect(section.getByRole('button', { name: 'More schools' })).toHaveCount(0);
+
+    // 3. Every tap target in the section clears 44px. A card title's own box is
+    //    shorter, but its hit area is the whole card via ::after.
+    const failing = await section.evaluate((root: HTMLElement) =>
+      Array.from(root.querySelectorAll('a, button'))
+        .filter((el) => (el as HTMLElement).offsetParent)
+        .map((el) => {
+          const card = el.closest('li');
+          const box = el.matches('h3 a') && card
+            ? card.getBoundingClientRect()
+            : el.getBoundingClientRect();
+          return {
+            text: (el as HTMLElement).innerText.trim().slice(0, 24),
+            w: box.width,
+            h: box.height,
+          };
+        })
+        .filter((o) => o.w < 44 || o.h < 44),
+    );
+    expect(failing).toEqual([]);
+  });
+}

mockups/similar-schools-nearby.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Similar Schools Nearby</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap" rel="stylesheet">
+<style>
+/* Tokens copied verbatim from nextjs-app/app/(frontend)/globals.css so this
+   mockup cannot drift from the shipped palette. Light values first, dark
+   under prefers-color-scheme, both overridable by the theme switch. */
+:root {
+  color-scheme: light;
+  --bg-primary:#FAFAF8; --bg-secondary:#F5EFE6; --bg-card:#FFFFFF;
+  --text-primary:#1C2731; --text-secondary:#4A5560; --text-muted:#5F6A75;
+  --border:#E5E7EB; --border-strong:#D3D7DD;
+  --brand:#0F766E; --brand-strong:#0C5F58; --brand-bg:rgba(15,118,110,.10); --brand-on:#FFFFFF;
+  --action:#BE3C27; --action-strong:#A33320; --action-on:#FFFFFF;
+  --sand:#F5EFE6;
+  --font-display:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;
+  --font-ui:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
+  --radius-md:8px; --radius-lg:16px;
+  --shadow:0 1px 2px rgba(28,39,49,.06),0 1px 3px rgba(28,39,49,.05);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
+    --text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
+    --border:#26343D; --border-strong:#35454F;
+    --brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
+    --action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
+    --sand:#1B2730;
+    --shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
+  }
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --bg-primary:#111A20; --bg-secondary:#16222A; --bg-card:#18242C;
+  --text-primary:#E9EEF0; --text-secondary:#B4C2C7; --text-muted:#8B9AA1;
+  --border:#26343D; --border-strong:#35454F;
+  --brand:#5FC7BB; --brand-strong:#7BD6CC; --brand-bg:rgba(95,199,187,.14); --brand-on:#0A1418;
+  --action:#F08A72; --action-strong:#F5A492; --action-on:#241009;
+  --sand:#1B2730;
+  --shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.25);
+}
+* { box-sizing:border-box; }
+body {
+  margin:0; padding:32px 16px 80px; background:var(--bg-primary);
+  color:var(--text-primary); font:15px/1.55 var(--font-ui);
+  -webkit-font-smoothing:antialiased;
+}
+.page { max-width:960px; margin:0 auto; }
+.page > header { margin-bottom:28px; display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; }
+.page > header h1 { font:700 25px/1.25 var(--font-display); letter-spacing:-.6px; margin:0 0 6px; }
+.page > header p { margin:0; color:var(--text-muted); font-size:14px; max-width:60ch; }
+.theme-switch { border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text-secondary); border-radius:999px; padding:8px 14px; font:500 13px var(--font-ui); cursor:pointer; min-height:44px; }
+.theme-switch:hover { border-color:var(--brand); color:var(--brand); }
+
+/* ── The page context each variant is shown inside ─────────────────── */
+.variant { margin-bottom:40px; }
+.variant > .context { padding:0 4px 12px; }
+.variant .eyebrow { margin:0 0 4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
+.variant .context h2 { font:600 18px/1.35 var(--font-display); margin:0; color:var(--text-secondary); }
+.variant .note { margin:10px 4px 0; font-size:12.5px; color:var(--text-muted); }
+.variant .note b { color:var(--text-secondary); font-weight:600; }
+
+/* ── The section itself — mirrors components/school/Section ────────── */
+.card {
+  background:var(--bg-card); border:1px solid var(--border);
+  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);
+}
+.top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
+.top h2 { font:700 22px/1.25 var(--font-display); letter-spacing:-.4px; margin:0; }
+.lede { margin:8px 0 20px; color:var(--text-secondary); font-size:14.5px; max-width:64ch; }
+
+/* ── Carousel ───────────────────────────────────────────────────────
+   Every card is in the DOM and in the initial HTML — the arrows scroll a
+   list, they do not swap a view. That keeps all six links crawlable and
+   keeps the section usable with no JavaScript, where it degrades to a
+   plain horizontally scrollable row. */
+.arrows { display:flex; gap:8px; flex:none; }
+.arrow {
+  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
+  border:1px solid var(--border-strong); border-radius:999px;
+  background:var(--bg-card); color:var(--brand);
+}
+.arrow:hover:not(:disabled) { border-color:var(--brand); background:var(--brand-bg); }
+.arrow:disabled { opacity:.35; cursor:default; }
+.arrow:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+.arrow svg { width:17px; height:17px; }
+
+.scroller {
+  display:grid; grid-auto-flow:column;
+  grid-auto-columns:calc((100% - 28px) / 3);
+  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
+  padding:2px; margin:-2px;                /* room for focus rings */
+  scrollbar-width:none; -ms-overflow-style:none;
+  list-style:none;
+}
+.scroller::-webkit-scrollbar { display:none; }
+.scroller:focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:var(--radius-md); }
+@media (max-width:820px) { .scroller { grid-auto-columns:calc((100% - 14px) / 2); } }
+/* Touch widths: the arrows would squeeze the lede into a four-line column for a
+   control that swiping already provides, so they go and the documented
+   right-edge fade carries the affordance instead (MOBILE.md). The fade lifts at
+   the end of the travel, where there is nothing more to hint at. */
+@media (max-width:640px) {
+  .top { display:block; }
+  .arrows { display:none; }
+  .scroller { grid-auto-columns:86%; mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .scroller[data-at-end=true] { mask-image:none; }
+  .card { padding:20px; }
+}
+
+.school {
+  position:relative; display:flex; flex-direction:column; scroll-snap-align:start;
+  border:1px solid var(--border); border-radius:var(--radius-md);
+  padding:16px; background:var(--bg-card);
+}
+.school:has(.add[aria-pressed=true]) { border-color:var(--brand); background:var(--brand-bg); }
+.distance { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); margin:0 0 10px; }
+.distance svg { width:13px; height:13px; flex:none; }
+.school h3 { font:600 16px/1.35 var(--font-display); margin:0 0 6px; }
+/* The whole card is the link target; the button sits above it on z-index so
+   it stays independently clickable. */
+.school h3 a { color:var(--text-primary); text-decoration:none; }
+.school h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--radius-md); }
+.school:hover { border-color:var(--border-strong); }
+.school h3 a:hover { color:var(--brand); text-decoration:underline; }
+.school h3 a:focus-visible { outline:none; }
+.school:has(h3 a:focus-visible) { outline:2px solid var(--brand); outline-offset:2px; }
+.meta { margin:0 0 12px; font-size:12.5px; color:var(--text-muted); }
+.shared { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0; list-style:none; }
+.shared li { font-size:11.5px; line-height:1.4; padding:4px 8px; border-radius:999px; background:var(--brand-bg); color:var(--brand); border:1px solid transparent; }
+.shared li.loose { background:transparent; color:var(--text-muted); border-color:var(--border); }
+.metric { margin-top:auto; padding-top:13px; border-top:1px solid var(--border); }
+.value { font:700 26px/1.1 var(--font-display); letter-spacing:-.6px; margin:0; }
+.value.absent { font-size:15px; font-weight:600; color:var(--text-muted); letter-spacing:0; }
+.metric .label { margin:4px 0 0; font-size:12px; color:var(--text-secondary); }
+.metric .ref { margin:2px 0 0; font-size:12px; color:var(--text-muted); }
+.add {
+  position:relative; z-index:1; margin-top:14px; width:100%; min-height:44px;
+  font:500 13px var(--font-ui); cursor:pointer; border-radius:var(--radius-md);
+  border:1px solid var(--border-strong); background:var(--bg-card); color:var(--brand);
+}
+.add:hover { border-color:var(--brand); background:var(--brand-bg); }
+.add[aria-pressed=true] { border-color:var(--brand); background:var(--brand-bg); font-weight:600; }
+.add:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
+
+.footer {
+  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
+  gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
+}
+.footer p { margin:0; font-size:12.5px; color:var(--text-muted); }
+.footer strong { display:block; font:600 14px var(--font-ui); color:var(--text-primary); }
+/* Coral: the one decisive action in this section, and there is only one. */
+.compare {
+  min-height:44px; padding:0 20px; border-radius:var(--radius-md); cursor:pointer;
+  font:600 14px var(--font-ui); background:var(--action); color:var(--action-on);
+  border:1px solid var(--action); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
+}
+.compare:hover { background:var(--action-strong); border-color:var(--action-strong); }
+.compare[aria-disabled=true] { opacity:.45; pointer-events:none; }
+.caption { margin:16px 0 0; font-size:11.5px; color:var(--text-muted); }
+.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
+</style>
+</head>
+<body>
+<div class="page">
+<header>
+  <div>
+    <h1>Similar schools nearby</h1>
+    <p>A new section on the school detail page. Fictional schools and figures; shipped
+       colour, type and section shell taken from <code>globals.css</code>.</p>
+  </div>
+  <button class="theme-switch" type="button" id="theme">Dark theme</button>
+</header>
+<div id="variants"></div>
+</div>
+
+<script>
+const PIN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>';
+const CHEV = (dir) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${dir === 'prev' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'}"/></svg>`;
+
+const variants = [
+  {
+    id: 'dense',
+    eyebrow: 'Variant 1 · Dense urban primary — six matches, carousel active',
+    context: 'Meadowbrook Primary School — Ages 4–11 · Mixed · No religious character · Community school',
+    lede: 'Other primary schools near Meadowbrook Primary School, with a similar intake.',
+    metric: 'Reading, writing & maths',
+    caption: 'Meeting the expected standard at key stage 2, 2025.',
+    thisValue: '72%',
+    note: 'Fourteen schools cleared <b>tier 1</b> within three miles, so the section takes the six nearest and stops there. The arrows scroll a list that is entirely in the HTML — all six links are crawlable, and with JavaScript off the row still scrolls.',
+    schools: [
+      { name:'Willow Lane Primary School', distance:'0.4', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'74%' },
+      { name:'Oakfield Primary School', distance:'0.6', meta:'Academy converter · Ages 3–11', shared:['Mixed','No religious character'], value:'69%' },
+      { name:'Brookside Primary School', distance:'0.9', meta:'Community school · Ages 4–11', shared:['Mixed','No religious character'], value:'Not published' },
+      { name:'Hollytree Primary School', distance:'1.3', meta:'Academy converter · Ages 4–11', shared:['Mixed','No religious character'], value:'81%' },
+      { name:'Marsh Green Primary School', distance:'1.8', meta:'Community school · Ages 3–11', shared:['Mixed','No religious character'], value:'64%' },
+      { name:'Kingsway Primary School', distance:'2.2', meta:'Foundation school · Ages 4–11', shared:['Mixed','No religious character'], value:'77%' },
+    ],
+  },
+  {
+    id: 'secondary',
+    eyebrow: 'Variant 2 · Secondary — four matches, mixed tiers',
+    context: 'Meadowbrook High School — Ages 11–18 · Mixed · Non-selective · Academy',
+    lede: 'Other secondary schools near Meadowbrook High School, with a similar intake.',
+    metric: 'Attainment 8',
+    caption: 'Average GCSE attainment score across eight qualifications, 2025.',
+    thisValue: '51.2',
+    note: 'Only two schools cleared tier 1, so the search widened to <b>tier 2</b> and found two more. It stops there rather than widening again to reach six — tiers relax to reach a usable set, never to fill the last slots. Selectivity never relaxes, so no grammar school can appear here.',
+    schools: [
+      { name:'Rivermead High School', distance:'0.9', meta:'Academy converter · Ages 11–18', shared:['Mixed','Non-selective','No religious character'], value:'52.8' },
+      { name:'Oakfield Academy', distance:'1.7', meta:'Academy sponsor led · Ages 11–16', shared:['Mixed','Non-selective','No religious character'], value:'49.6' },
+      { name:'St Aidan’s Catholic High School', distance:'2.4', meta:'Voluntary aided · Ages 11–18', shared:['Mixed','Non-selective'], value:'53.4' },
+      { name:'Parkside Community School', distance:'3.8', meta:'Community school · Ages 11–16', shared:['Mixed','Non-selective'], value:'50.9' },
+    ],
+  },
+  {
+    id: 'sparse',
+    eyebrow: 'Variant 3 · Rural — two matches, no arrows',
+    context: 'Little Ashby Church of England Primary School — Ages 4–11 · Mixed · Church of England · Voluntary controlled',
+    lede: 'Other primary schools near Little Ashby Church of England Primary School.',
+    metric: 'Reading, writing & maths',
+    caption: 'Meeting the expected standard at key stage 2, 2025.',
+    thisValue: '66%',
+    note: 'Nothing matched on religious character within range. At <b>tier 3</b> the lede drops the phrase “with a similar intake” and the chips fall back to the plain phase. Two cards fit the row, so the arrows are not rendered at all. One school fewer and the section would not render either.',
+    schools: [
+      { name:'Great Marden Primary School', distance:'4.2', meta:'Community school · Ages 4–11', shared:['Primary school'], loose:true, value:'71%' },
+      { name:'Ashby Vale Academy', distance:'7.8', meta:'Academy converter · Ages 4–11', shared:['Primary school'], loose:true, value:'58%' },
+    ],
+  },
+];
+
+const selected = Object.fromEntries(variants.map((v) => [v.id, new Set()]));
+
+function card(v, s, i) {
+  const on = selected[v.id].has(i);
+  const absent = s.value === 'Not published';
+  return `
+  <li class="school">
+    <p class="distance">${PIN}${s.distance} miles away</p>
+    <h3><a href="#">${s.name}</a></h3>
+    <p class="meta">${s.meta}</p>
+    <ul class="shared">${s.shared.map((c) => `<li class="${s.loose ? 'loose' : ''}">${c}</li>`).join('')}</ul>
+    <div class="metric">
+      <p class="value ${absent ? 'absent' : ''}">${s.value}</p>
+      <p class="label">${v.metric}</p>
+      <p class="ref">${v.thisValue} at this school</p>
+    </div>
+    <button class="add" type="button" data-variant="${v.id}" data-index="${i}" aria-pressed="${on}">
+      ${on ? '✓ Added to compare' : '+ Add to compare'}<span class="sr"> — ${s.name}</span>
+    </button>
+  </li>`;
+}
+
+function render() {
+  document.getElementById('variants').innerHTML = variants.map((v) => {
+    const count = selected[v.id].size;
+    // Three fit the row, so anything more is what the arrows are for.
+    const scrollable = v.schools.length > 3;
+    return `
+    <section class="variant">
+      <div class="context">
+        <p class="eyebrow">${v.eyebrow}</p>
+        <h2>${v.context}</h2>
+      </div>
+      <div class="card">
+        <div class="top">
+          <div>
+            <h2 id="h-${v.id}">Similar schools nearby</h2>
+            <p class="lede">${v.lede}</p>
+          </div>
+          ${scrollable ? `<div class="arrows">
+            <button class="arrow" type="button" data-scroll="prev" data-variant="${v.id}" aria-label="Previous schools" aria-controls="sc-${v.id}">${CHEV('prev')}</button>
+            <button class="arrow" type="button" data-scroll="next" data-variant="${v.id}" aria-label="More schools" aria-controls="sc-${v.id}">${CHEV('next')}</button>
+          </div>` : ''}
+        </div>
+
+        <ul class="scroller" id="sc-${v.id}" ${scrollable ? `tabindex="0" role="group" aria-labelledby="h-${v.id}"` : ''}>
+          ${v.schools.map((s, i) => card(v, s, i)).join('')}
+        </ul>
+
+        <div class="footer">
+          <p aria-live="polite">
+            <strong>${count ? `${count} school${count === 1 ? '' : 's'} selected` : 'Compare side by side'}</strong>
+            ${count ? 'This school is included automatically.' : 'Add a school to compare it with this one.'}
+          </p>
+          <a class="compare" href="#" aria-disabled="${count ? 'false' : 'true'}">
+            ${count ? `Compare ${count + 1} schools` : 'Compare'} →
+          </a>
+        </div>
+        <p class="caption">Distances are straight-line from this school, not road distance.
+           ${v.caption} Fictional schools and figures for this mockup.</p>
+      </div>
+      <p class="note">${v.note}</p>
+    </section>`;
+  }).join('');
+
+  variants.forEach((v) => {
+    const scroller = document.getElementById(`sc-${v.id}`);
+    if (scroller) syncArrows(v.id, scroller);
+  });
+}
+
+/** An arrow that scrolls nowhere is a dead control, so each end disables its own.
+ *
+ *  EDGE is not paranoia. The scroller carries 2px of padding so focus rings are
+ *  not clipped, and scroll-snap treats that padding as the first card's snap
+ *  position — so a scroller sitting at its start reports scrollLeft 2, not 0.
+ *  Sub-pixel rounding at other zoom levels moves it again. Testing against an
+ *  exact 0 leaves the back arrow live at the start, pointing nowhere. */
+const EDGE = 8;
+
+function syncArrows(id, scroller) {
+  const max = scroller.scrollWidth - scroller.clientWidth;
+  const atStart = scroller.scrollLeft <= EDGE;
+  const atEnd = scroller.scrollLeft >= max - EDGE;
+
+  // Drives the mobile scroll-fade, so it is computed even where no arrow is
+  // rendered to consume it.
+  scroller.dataset.atEnd = String(atEnd);
+
+  const prev = document.querySelector(`.arrow[data-scroll="prev"][data-variant="${id}"]`);
+  const next = document.querySelector(`.arrow[data-scroll="next"][data-variant="${id}"]`);
+  if (!prev || !next) return;
+  prev.disabled = atStart;
+  next.disabled = atEnd;
+}
+
+document.getElementById('variants').addEventListener('click', (event) => {
+  const arrow = event.target.closest('.arrow');
+  if (arrow) {
+    const scroller = document.getElementById(`sc-${arrow.dataset.variant}`);
+    // A page is what the reader can see, so the viewport is the step.
+    scroller.scrollBy({ left: (arrow.dataset.scroll === 'next' ? 1 : -1) * scroller.clientWidth, behavior: 'smooth' });
+    return;
+  }
+  const button = event.target.closest('.add');
+  if (!button) return;
+  const { variant, index } = button.dataset;
+  const set = selected[variant];
+  const i = Number(index);
+  // Scroll position is DOM state, not React state; keep it across the re-render.
+  const offset = document.getElementById(`sc-${variant}`).scrollLeft;
+  set.has(i) ? set.delete(i) : set.add(i);
+  render();
+  const scroller = document.getElementById(`sc-${variant}`);
+  scroller.scrollLeft = offset;
+  syncArrows(variant, scroller);
+  document.querySelector(`.add[data-variant="${variant}"][data-index="${index}"]`).focus();
+}, true);
+
+document.getElementById('variants').addEventListener('scroll', (event) => {
+  const scroller = event.target.closest('.scroller');
+  if (scroller) syncArrows(scroller.id.replace('sc-', ''), scroller);
+}, true);
+
+const themeButton = document.getElementById('theme');
+themeButton.addEventListener('click', () => {
+  const dark = document.documentElement.dataset.theme === 'dark';
+  document.documentElement.dataset.theme = dark ? 'light' : 'dark';
+  themeButton.textContent = dark ? 'Dark theme' : 'Light theme';
+});
+
+render();
+</script>
+</body>
+</html>

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/FilterBarOptions.test.tsx

@@ -0,0 +1,129 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+import type { ResultFilters } from '@/lib/types';
+
+/*
+ * A filter's options must not come from the results it is filtering, or
+ * choosing one leaves only that one on offer: pick "Girls" and "Boys" is gone
+ * until the filter is cleared. School type groups, gender and admissions offer the
+ * full lists, as phase already did. Local authority stays scoped to the
+ * results, so a postcode search offers the councils nearby rather than 153.
+ *
+ * Gender, sixth form and admissions show unless the phase chosen is a primary
+ * one, so what the results happen to contain never decides which filters
+ * there are.
+ */
+
+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('@/lib/analytics', () => ({ track: jest.fn() }));
+
+const filters = {
+  local_authorities: ['Merton', 'Wandsworth'],
+  school_types: ['Academy converter', 'Community school'], years: [],
+  phases: ['Middle deemed primary', 'Nursery', 'Primary', 'Secondary', 'All-through'],
+  genders: ['Boys', 'Girls', 'Mixed'],
+  admissions_policies: ['Non-selective', 'Selective'],
+  school_type_groups: [
+    { value: 'academy', label: 'State school: academy or free school' },
+    { value: 'council', label: 'State school: council-run' },
+  ],
+};
+
+// What the results came back with once narrowed by the chosen filters.
+const narrowed: ResultFilters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'],
+  phases: ['Secondary'], genders: ['Girls'], admissions_policies: ['Non-selective'],
+};
+
+const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
+
+const openSheet = () => {
+  fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
+  return screen.getByRole('dialog', { name: 'Filters' });
+};
+
+const optionsOf = (sheet: HTMLElement, name: string) =>
+  within(within(sheet).getByRole('combobox', { name }))
+    .getAllByRole('option').map((o) => o.textContent);
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+});
+
+describe('filter options', () => {
+  it('offer every school type group, gender and admissions policy, whatever the results hold', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=council&gender=girls');
+    render(<FilterBar filters={filters} resultFilters={narrowed} />);
+    const sheet = openSheet();
+    expect(optionsOf(sheet, 'School type')).toEqual(['Any school type', 'State school: academy or free school', 'State school: council-run']);
+    expect(optionsOf(sheet, 'Gender')).toEqual(['Boys, Girls & Mixed', 'Boys', 'Girls', 'Mixed']);
+    expect(optionsOf(sheet, 'Admissions')).toEqual(['All admissions types', 'Non-selective', 'Selective']);
+  });
+
+  it('keep local authority to the councils in the results', () => {
+    render(<FilterBar filters={filters} resultFilters={narrowed} />);
+    expect(optionsOf(openSheet(), 'Local authority')).toEqual(['All Local Authorities', 'Wandsworth']);
+  });
+
+  it('offer the full school types in the desktop row too', () => {
+    render(<FilterBar filters={filters} resultFilters={narrowed} />);
+    const row = screen.getByRole('group', { name: 'Filters' });
+    expect(within(within(row).getByRole('combobox', { name: 'School type' }))
+      .getAllByRole('option')).toHaveLength(3);
+  });
+});
+
+describe('the secondary-only filters', () => {
+  const secondaryOnly = ['Gender', 'Sixth form', 'Admissions'];
+  const shown = (sheet: HTMLElement) =>
+    secondaryOnly.filter((name) => within(sheet).queryByRole('combobox', { name }));
+
+  it('show with any phase, even when no secondary school is in the results', () => {
+    const primariesOnly = { ...narrowed, phases: ['Primary'], genders: [], admissions_policies: [] };
+    render(<FilterBar filters={filters} resultFilters={primariesOnly} />);
+    expect(shown(openSheet())).toEqual(secondaryOnly);
+  });
+
+  it.each(['primary', 'nursery', 'middle deemed primary', 'Middle-deemed  Primary'])(
+    'hide for the %s phase', (phase) => {
+    params = new URLSearchParams(`postcode=SW196AR&radius=1&phase=${encodeURIComponent(phase)}`);
+    render(<FilterBar filters={filters} />);
+    expect(shown(openSheet())).toEqual([]);
+  });
+
+  it('leave out a filter with no options, rather than show only its "any"', () => {
+    render(<FilterBar filters={{ ...filters, genders: [], admissions_policies: [] }} />);
+    expect(shown(openSheet())).toEqual(['Sixth form']);
+  });
+
+  it.each(['secondary', 'all-through', 'middle deemed secondary', '16 plus'])('show for the %s phase', (phase) => {
+    params = new URLSearchParams(`postcode=SW196AR&radius=1&phase=${phase}`);
+    render(<FilterBar filters={filters} />);
+    expect(shown(openSheet())).toEqual(secondaryOnly);
+  });
+
+  it('are cleared by choosing a primary phase, rather than left applied and hidden', () => {
+    params = new URLSearchParams(
+      'postcode=SW196AR&radius=1&phase=secondary&gender=girls&has_sixth_form=yes&admissions_policy=selective&school_type=council');
+    render(<FilterBar filters={filters} />);
+    fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
+    const next = pushedParams();
+    expect(next.get('phase')).toBe('primary');
+    for (const key of ['gender', 'has_sixth_form', 'admissions_policy']) expect(next.get(key)).toBeNull();
+    expect(next.get('school_type')).toBe('council');
+  });
+
+  it('are kept when the new phase still has them', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=secondary&gender=girls');
+    render(<FilterBar filters={filters} />);
+    fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'Phase' }), { target: { value: 'all-through' } });
+    expect(pushedParams().get('gender')).toBe('girls');
+  });
+});

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

@@ -0,0 +1,40 @@
+import { render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+
+let searchParams = new URLSearchParams();
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => searchParams,
+}));
+
+const FILTERS = {
+  local_authorities: [], school_types: [], years: [],
+  phases: ['Primary', 'Secondary', 'All-through'],
+  genders: [], admissions_policies: [],
+};
+
+/**
+ * The phase options must not come from the result set. The backend scopes its
+ * result filters to the schools it returns, and it applies the phase filter
+ * first — so with "secondary" chosen the scoped list holds only secondary-ish
+ * phases, and switching to primary meant going back to "Any phase" first.
+ */
+describe('FilterBar phase options', () => {
+  it('offers every phase while a phase filter narrows the results', () => {
+    searchParams = new URLSearchParams('search=hampton&phase=secondary');
+    render(
+      <FilterBar
+        filters={FILTERS}
+        resultFilters={{
+          local_authorities: [], school_types: [],
+          phases: ['Secondary', 'All-through'],
+          genders: [], admissions_policies: [],
+        }}
+      />,
+    );
+    const phase = screen.getByRole('combobox', { name: 'Phase' });
+    expect(within(phase).getByRole('option', { name: 'Primary' })).toBeInTheDocument();
+    expect(phase).toHaveValue('secondary');
+  });
+});

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

@@ -0,0 +1,51 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FilterBar } from '@/components/FilterBar';
+
+const push = jest.fn();
+let searchParams = new URLSearchParams();
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => searchParams,
+}));
+
+const FILTERS = {
+  local_authorities: [], school_types: [], years: [], phases: [],
+  genders: [], admissions_policies: [],
+};
+
+beforeEach(() => {
+  push.mockClear();
+  searchParams = new URLSearchParams();
+});
+
+describe('FilterBar default distance', () => {
+  it('searches a new postcode within half a mile', async () => {
+    render(<FilterBar filters={FILTERS} />);
+    await userEvent.type(screen.getByPlaceholderText(/School name or postcode/i), 'SW19 6AR{Enter}');
+    await waitFor(() => expect(push).toHaveBeenCalledWith(expect.stringContaining('radius=0.5')));
+  });
+
+  it('shows half a mile when the URL carries a postcode but no radius', () => {
+    searchParams = new URLSearchParams('postcode=SW196AR');
+    render(<FilterBar filters={FILTERS} />);
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveValue('0.5');
+  });
+
+  it('keeps a distance the user already chose', async () => {
+    searchParams = new URLSearchParams('postcode=SW196AR&radius=3');
+    render(<FilterBar filters={FILTERS} />);
+    expect(screen.getByRole('combobox', { name: 'Distance' })).toHaveValue('3');
+  });
+});
+
+describe('FilterBar distance options', () => {
+  it('offers a quarter mile without making it the default', () => {
+    searchParams = new URLSearchParams('postcode=SW196AR');
+    render(<FilterBar filters={FILTERS} />);
+    const distance = screen.getByRole('combobox', { name: 'Distance' });
+    expect([...(distance as HTMLSelectElement).options].map(o => o.value)).toEqual(['0.25', '0.5', '1', '3', '5']);
+    expect(distance).toHaveValue('0.5');
+  });
+});

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/FilterBarTypeFaith.test.tsx

@@ -0,0 +1,137 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+import { track } from '@/lib/analytics';
+
+/*
+ * School type offers six groups a parent recognises, not GIAS's 34 types, and
+ * a Faith filter sits beside it (spec 2026-10-02-school-type-groups-and-faith-
+ * filter-design.md). Both lists come from /api/filters.
+ */
+
+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('@/lib/analytics', () => ({ track: jest.fn() }));
+
+const filters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
+  school_type_groups: [
+    { value: 'academy', label: 'State school: academy or free school' },
+    { value: 'council', label: 'State school: council-run' },
+    { value: 'special', label: 'Special school (SEND)' },
+  ],
+  faiths: [
+    { value: 'none', label: 'No religious character' },
+    { value: 'roman_catholic', label: 'Roman Catholic' },
+  ],
+};
+
+const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
+const openSheet = () => {
+  fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
+  return screen.getByRole('dialog', { name: 'Filters' });
+};
+const optionsOf = (scope: HTMLElement, name: string) =>
+  within(within(scope).getByRole('combobox', { name })).getAllByRole('option').map((o) => o.textContent);
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+  jest.mocked(track).mockClear();
+});
+
+describe('School type', () => {
+  it('offers the groups, not the GIAS types, on desktop and in the sheet', () => {
+    render(<FilterBar filters={filters} />);
+    const groups = ['Any school type', 'State school: academy or free school',
+      'State school: council-run', 'Special school (SEND)'];
+    expect(optionsOf(screen.getByRole('group', { name: 'Filters' }), 'School type')).toEqual(groups);
+    expect(optionsOf(openSheet(), 'School type')).toEqual(groups);
+  });
+
+  it('puts the group key in the URL and names the chip by its label', () => {
+    const view = render(<FilterBar filters={filters} />);
+    fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'School type' }),
+      { target: { value: 'special' } });
+    expect(pushedParams().get('school_type')).toBe('special');
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=special');
+    view.rerender(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
+  });
+
+  it('names an old raw-label link\'s chip by that label', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Community school' })).toBeInTheDocument();
+  });
+
+  it('is left out when the API sends no groups', () => {
+    render(<FilterBar filters={{ ...filters, school_type_groups: undefined }} />);
+    expect(screen.queryByRole('combobox', { name: 'School type' })).not.toBeInTheDocument();
+  });
+});
+
+describe('Faith', () => {
+  it('offers its options in the More filters panel and in the sheet', () => {
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: /More filters/ }));
+    const faiths = ['Any faith or none', 'No religious character', 'Roman Catholic'];
+    expect(optionsOf(document.body, 'Faith')).toEqual(faiths);
+    expect(optionsOf(openSheet(), 'Faith')).toEqual(faiths);
+  });
+
+  it('shows as a chip, counts on both buttons, and clears with Clear all', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&faith=roman_catholic');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
+    fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
+      .getByRole('button', { name: 'Clear all' }));
+    expect(pushedParams().get('faith')).toBeNull();
+    expect(pushedParams().get('postcode')).toBe('SW196AR');
+  });
+
+  it('goes into the search analytics event', () => {
+    params = new URLSearchParams('faith=roman_catholic');
+    render(<FilterBar filters={filters} />);
+    const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
+    fireEvent.change(input, { target: { value: 'st marys' } });
+    fireEvent.submit(input.closest('form')!);
+    expect(track).toHaveBeenCalledWith('search_submitted',
+      expect.objectContaining({ filters_active: 'faith=roman_catholic', filters_count: 1 }));
+  });
+
+  it('is left out when the API sends no faiths', () => {
+    render(<FilterBar filters={{ ...filters, faiths: [] }} />);
+    expect(within(openSheet()).queryByRole('combobox', { name: 'Faith' })).not.toBeInTheDocument();
+  });
+});
+
+describe('a URL value the options do not spell the same way', () => {
+  const row = () => screen.getByRole('group', { name: 'Filters' });
+
+  it('shows an old raw-label type in the select, and lets "Any" clear it', () => {
+    params = new URLSearchParams('search=school&school_type=Community+school');
+    render(<FilterBar filters={filters} />);
+    const type = within(row()).getByRole('combobox', { name: 'School type' });
+    expect(type).toHaveValue('Community school');
+    expect(within(type).getByRole('option', { name: 'Community school' })).toBeInTheDocument();
+    fireEvent.change(type, { target: { value: '' } });
+    expect(pushedParams().get('school_type')).toBeNull();
+  });
+
+  it('matches a key in another case, in the select and the chip', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Special&faith=Roman_Catholic');
+    render(<FilterBar filters={filters} />);
+    expect(within(row()).getByRole('combobox', { name: 'School type' })).toHaveValue('special');
+    expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: 'Faith' })).toHaveValue('roman_catholic');
+  });
+});

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

@@ -0,0 +1,157 @@
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+
+/*
+ * Phones filter through one "Filters" button and a bottom sheet holding every
+ * filter, rather than a sideways-scrolling row whose later chips (phase, type)
+ * sat off-screen beside a "More filters" panel that did not contain them.
+ * Which markup shows at which width is CSS and invisible to jsdom; these pin
+ * the behaviour and the accessible names.
+ */
+
+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('@/lib/analytics', () => ({ track: jest.fn() }));
+
+const filters = {
+  local_authorities: ['Wandsworth', 'Merton'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: ['Girls', 'Mixed'], admissions_policies: [],
+  school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
+};
+
+const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
+
+beforeEach(() => {
+  params = new URLSearchParams('postcode=SW196AR&radius=1');
+  push.mockClear();
+});
+
+describe('the phone Filters button', () => {
+  it('sits beside the folded search summary', () => {
+    render(<FilterBar filters={filters} />);
+    const summary = screen.getByRole('button', { name: /Edit search/ });
+    expect(summary.parentElement).toContainElement(screen.getByRole('button', { name: 'Filters' }));
+  });
+
+  it('counts every applied filter, phase and type included', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&school_type=council');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Filters, 2 applied' })).toBeInTheDocument();
+  });
+
+  it('is still offered before anything has been searched', () => {
+    params = new URLSearchParams('local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
+  });
+
+  it('stays out of the hero', () => {
+    render(<FilterBar filters={filters} isHero />);
+    expect(screen.queryByRole('button', { name: /^Filters/ })).not.toBeInTheDocument();
+  });
+});
+
+describe('the filter sheet', () => {
+  const openSheet = () => {
+    fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
+    return screen.getByRole('dialog', { name: 'Filters' });
+  };
+
+  it('holds every filter in one place', () => {
+    render(<FilterBar filters={filters} />);
+    const sheet = openSheet();
+    expect(within(sheet).getByRole('radiogroup', { name: 'Distance' })).toBeInTheDocument();
+    for (const name of ['Phase', 'School type', 'Local authority']) {
+      expect(within(sheet).getByRole('combobox', { name })).toBeInTheDocument();
+    }
+  });
+
+  it('shows the secondary-only filters once they apply', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=secondary');
+    render(<FilterBar filters={filters} />);
+    const sheet = openSheet();
+    for (const name of ['Gender', 'Sixth form']) {
+      expect(within(sheet).getByRole('combobox', { name })).toBeInTheDocument();
+    }
+  });
+
+  it('offers distance only for a postcode search', () => {
+    params = new URLSearchParams('search=southmead');
+    render(<FilterBar filters={filters} />);
+    expect(within(openSheet()).queryByRole('radiogroup', { name: 'Distance' })).not.toBeInTheDocument();
+  });
+
+  it('changes the distance', () => {
+    render(<FilterBar filters={filters} />);
+    const distance = within(openSheet()).getByRole('radiogroup', { name: 'Distance' });
+    expect(within(distance).getByRole('radio', { name: 'Within 1 mile' })).toBeChecked();
+    fireEvent.click(within(distance).getByRole('radio', { name: 'Within 3 miles' }));
+    expect(pushedParams().get('radius')).toBe('3');
+  });
+
+  it('applies a change straight away and stays open for the next one', () => {
+    render(<FilterBar filters={filters} />);
+    const sheet = openSheet();
+    fireEvent.change(within(sheet).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
+    expect(pushedParams().get('phase')).toBe('primary');
+    expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
+  });
+
+  it('closes on the results button, which gives the count', () => {
+    render(<FilterBar filters={filters} resultCount={12} />);
+    fireEvent.click(within(openSheet()).getByRole('button', { name: 'Show 12 schools' }));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('says so when nothing matches', () => {
+    render(<FilterBar filters={filters} resultCount={0} />);
+    expect(within(openSheet()).getByRole('button', { name: 'No schools match' })).toBeInTheDocument();
+  });
+
+  it('clears the filters but keeps the search', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(within(openSheet()).getByRole('button', { name: 'Clear all' }));
+    const next = pushedParams();
+    expect(next.get('phase')).toBeNull();
+    expect(next.get('local_authority')).toBeNull();
+    expect(next.get('postcode')).toBe('SW196AR');
+    expect(next.get('radius')).toBe('1');
+  });
+});
+
+describe('the applied-filter chips', () => {
+  it('appear only when something is applied', () => {
+    render(<FilterBar filters={filters} />);
+    expect(screen.queryByRole('group', { name: 'Applied filters' })).not.toBeInTheDocument();
+  });
+
+  it('name each filter by its label and remove it on tap', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&gender=girls&has_sixth_form=no');
+    render(<FilterBar filters={filters} />);
+    const chips = screen.getByRole('group', { name: 'Applied filters' });
+    for (const label of ['Primary', 'Girls', 'Without sixth form']) {
+      expect(within(chips).getByRole('button', { name: `Remove filter: ${label}` })).toBeInTheDocument();
+    }
+    fireEvent.click(within(chips).getByRole('button', { name: 'Remove filter: Primary' }));
+    const next = pushedParams();
+    expect(next.get('phase')).toBeNull();
+    expect(next.get('gender')).toBe('girls');
+    expect(next.get('postcode')).toBe('SW196AR');
+  });
+
+  it('carry a Clear all that keeps the search', () => {
+    params = new URLSearchParams('search=southmead&school_type=council');
+    render(<FilterBar filters={filters} />);
+    fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
+      .getByRole('button', { name: 'Clear all' }));
+    const next = pushedParams();
+    expect(next.get('school_type')).toBeNull();
+    expect(next.get('search')).toBe('southmead');
+  });
+});

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

@@ -0,0 +1,81 @@
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { FilterBar } from '@/components/FilterBar';
+
+/*
+ * While a filter change is navigating, the sheet's controls stay enabled: a
+ * control disabled under the user's focus drops it to <body>, and a keyboard or
+ * screen-reader user is thrown out of the sheet after every change. A second
+ * change made before the first lands must build on the first, not on the URL
+ * useSearchParams still reports.
+ */
+
+// Every transition stays pending, as a slow server render would.
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useTransition: () => [true, (fn: () => void) => fn()],
+}));
+
+const 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('@/lib/analytics', () => ({ track: jest.fn() }));
+
+const filters = {
+  local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
+  phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
+  school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
+};
+
+const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
+
+const openSheet = () => {
+  fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
+  return screen.getByRole('dialog', { name: 'Filters' });
+};
+
+beforeEach(() => push.mockClear());
+
+it('keeps the sheet usable, and says it is busy, while a change lands', () => {
+  render(<FilterBar filters={filters} />);
+  const sheet = openSheet();
+  for (const name of ['Phase', 'School type', 'Local authority']) {
+    expect(within(sheet).getByRole('combobox', { name })).toBeEnabled();
+  }
+  expect(within(sheet).getByRole('radio', { name: 'Within 3 miles' })).toBeEnabled();
+  expect(sheet.querySelector('[aria-busy="true"]')).not.toBeNull();
+});
+
+it('builds a second change on the first, not on the URL it has not reached', () => {
+  render(<FilterBar filters={filters} />);
+  const sheet = openSheet();
+  fireEvent.change(within(sheet).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
+  fireEvent.change(within(sheet).getByRole('combobox', { name: 'School type' }),
+    { target: { value: 'council' } });
+  const next = pushedParams();
+  expect(next.get('phase')).toBe('primary');
+  expect(next.get('school_type')).toBe('council');
+  expect(next.get('postcode')).toBe('SW196AR');
+});
+
+describe('a screen that widens past phone width', () => {
+  let listeners: ((e: { matches: boolean }) => void)[] = [];
+  beforeEach(() => {
+    listeners = [];
+    window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+      matches: true, media: query,
+      addEventListener: (_: string, l: (e: { matches: boolean }) => void) => listeners.push(l),
+      removeEventListener: jest.fn(),
+    }));
+  });
+
+  it('closes the sheet, leaving the desktop row as the only filters', () => {
+    render(<FilterBar filters={filters} />);
+    openSheet();
+    act(() => listeners.forEach((l) => l({ matches: false })));
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+});

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

@@ -18,7 +18,10 @@ jest.mock('@/lib/api', () => ({
   fetchNationalAverages: jest.fn(async () => ({})),
   fetchLAaverages: jest.fn(async () => ({ secondary: { attainment_8_by_la: {} } })),
 }));
-jest.mock('@/components/FilterBar', () => ({ FilterBar: () => null }));
+// Renders only the List/Map switch HomeView hands it, which lives in its row.
+jest.mock('@/components/FilterBar', () => ({
+  FilterBar: ({ viewSwitch }: { viewSwitch?: unknown }) => viewSwitch || null,
+}));
 jest.mock('@/components/SchoolRow', () => ({ SchoolRow: ({ school }: {school: School}) => <div>{school.school_name}</div> }));
 jest.mock('@/components/SchoolMap', () => ({ SchoolMap: ({ schools }: {schools: School[]}) => <div data-testid="map">{schools.map(s => s.school_name).join(',')}</div> }));
 
@@ -39,15 +42,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/NearbySchoolsSection.test.tsx

@@ -0,0 +1,192 @@
+/**
+ * The section's job is to be honest about what it is showing. These tests pin
+ * the ways it could mislead: rendering below the minimum, claiming a likeness
+ * it does not rank on, showing a missing figure as a number, or hiding a card
+ * behind an arrow where a crawler cannot reach it.
+ */
+
+import { render, screen } from '@testing-library/react';
+
+import {
+  nearbyNoun,
+  NearbySchoolsSection,
+  shouldRenderNearby,
+} from '@/components/school/NearbySchoolsSection';
+import type { NearbySchool } from '@/lib/types';
+
+jest.mock('@/components/school/AddToCompareButton', () => ({
+  AddToCompareButton: ({ school }: { school: NearbySchool }) => (
+    <button type="button">Add {school.school_name} to compare</button>
+  ),
+}));
+
+jest.mock('@/components/school/NearbySchoolsCompareBar', () => ({
+  NearbySchoolsCompareBar: ({ thisUrn }: { thisUrn: number }) => (
+    <div data-testid="compare-bar">bar for {thisUrn}</div>
+  ),
+}));
+
+function school(overrides: Partial<NearbySchool> = {}): NearbySchool {
+  return {
+    urn: 100002,
+    school_name: 'Willow Lane Primary School',
+    distance_miles: 0.6,
+    school_type: 'Community school',
+    age_range: '4-11',
+    shared: ['Mixed', 'No religious character'],
+    metric_value: 74,
+    metric_key: 'rwm_expected_pct',
+    metric_year: 202425,
+    ...overrides,
+  };
+}
+
+function renderSection(nearby: NearbySchool[]) {
+  return render(
+    <NearbySchoolsSection
+      urn={100001}
+      schoolName="Meadowbrook Primary School"
+      phase="Primary"
+      thisMetricValue={72}
+      nearby={nearby}
+    />,
+  );
+}
+
+describe('render gates', () => {
+  it.each([
+    ['undefined', undefined],
+    ['null', null],
+    ['empty', []],
+    ['a single school', [school()]],
+  ])('renders nothing for %s', (_label, value) => {
+    expect(shouldRenderNearby(value as NearbySchool[] | null | undefined)).toBe(false);
+  });
+
+  it('renders for two or more schools', () => {
+    expect(shouldRenderNearby([school(), school({ urn: 100003 })])).toBe(true);
+  });
+
+  it('returns null rather than an empty shell below the minimum', () => {
+    const { container } = renderSection([school()]);
+    expect(container).toBeEmptyDOMElement();
+  });
+});
+
+describe('what the section claims', () => {
+  it('never claims a similar intake, because it does not rank on one', () => {
+    renderSection([school(), school({ urn: 100003, shared: [] })]);
+    expect(screen.queryByText(/similar intake/i)).not.toBeInTheDocument();
+  });
+
+  it('is headed "Other schools nearby", not "similar"', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getByRole('heading', { name: 'Other schools nearby' })).toBeInTheDocument();
+  });
+
+  it('shows chips for what is shared', () => {
+    renderSection([school({ shared: ['Mixed', 'Roman Catholic'] }), school({ urn: 100003 })]);
+    expect(screen.getAllByText('Roman Catholic').length).toBe(1);
+  });
+
+  it('shows no chips at all when nothing is shared, rather than inventing one', () => {
+    const { container } = render(
+      <NearbySchoolsSection
+        urn={100001}
+        schoolName="Meadowbrook Primary School"
+        phase="Primary"
+        thisMetricValue={72}
+        nearby={[school({ shared: [] }), school({ urn: 100003, shared: [] })]}
+      />,
+    );
+    // The card still carries its distance, name, type and figure — just no
+    // claim of likeness.
+    expect(container.querySelectorAll('li ul').length).toBe(0);
+    expect(screen.getAllByText(/miles away/).length).toBe(2);
+  });
+});
+
+describe('what the lede calls the set', () => {
+  it.each([
+    ['Primary', 'primary schools'],
+    ['Middle deemed primary', 'primary schools'],
+    ['Secondary', 'secondary schools'],
+    ['Middle deemed secondary', 'secondary schools'],
+    ['All-through', 'all-through schools'],
+    // GIAS phase 6. Its candidates span the whole secondary group, so no
+    // single noun fits and it takes the honest general one.
+    ['16 plus', 'schools and colleges'],
+    ['', 'schools'],
+    [null, 'schools'],
+  ])('calls a %s school\'s neighbours "%s"', (phase, expected) => {
+    expect(nearbyNoun(phase)).toBe(expected);
+  });
+
+  it('never calls a sixth form college\'s neighbours primary schools', () => {
+    render(
+      <NearbySchoolsSection
+        urn={100001}
+        schoolName="Barnet Sixth Form College"
+        phase="16 plus"
+        thisMetricValue={null}
+        nearby={[school(), school({ urn: 100003 })]}
+      />,
+    );
+    expect(screen.getByText(/Other schools and colleges near Barnet Sixth Form College/)).toBeInTheDocument();
+    expect(screen.queryByText(/primary schools/)).not.toBeInTheDocument();
+  });
+});
+
+describe('cards', () => {
+  it('links each school to its canonical slug', () => {
+    renderSection([school(), school({ urn: 100003, school_name: 'Oakfield Primary School' })]);
+    const link = screen.getByRole('link', { name: /Willow Lane Primary School/ });
+    expect(link).toHaveAttribute('href', '/school/100002-willow-lane-primary-school');
+  });
+
+  it('shows the distance and the shared characteristics', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getAllByText('0.6 miles away').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Mixed').length).toBeGreaterThan(0);
+  });
+
+  it('renders a missing figure as "Not published", never as a number', () => {
+    renderSection([school({ metric_value: null }), school({ urn: 100003 })]);
+    expect(screen.getByText('Not published')).toBeInTheDocument();
+  });
+
+  it('anchors each figure against this school', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getAllByText('72% at this school').length).toBe(2);
+  });
+
+  it('offers the compare bar once, for this school', () => {
+    renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getByTestId('compare-bar')).toHaveTextContent('bar for 100001');
+  });
+
+  it('keeps every card in the DOM, including the ones scrolled out of view', () => {
+    const six = Array.from({ length: 6 }, (_, n) =>
+      school({ urn: 100002 + n, school_name: `Peer ${n} School` }),
+    );
+    renderSection(six);
+    expect(screen.getAllByRole('link', { name: /Peer \d School/ })).toHaveLength(6);
+  });
+
+  it('offers no arrows when three cards fit the row', () => {
+    renderSection([school(), school({ urn: 100003 }), school({ urn: 100004 })]);
+    expect(screen.queryByRole('button', { name: /More schools/ })).not.toBeInTheDocument();
+  });
+
+  it('offers arrows once there is a fourth school', () => {
+    renderSection(Array.from({ length: 4 }, (_, n) => school({ urn: 100002 + n })));
+    expect(screen.getByRole('button', { name: /More schools/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Previous schools/ })).toBeInTheDocument();
+  });
+
+  it('says distances are straight-line, and offers no method panel', () => {
+    const { container } = renderSection([school(), school({ urn: 100003 })]);
+    expect(screen.getByText(/straight-line from this school/i)).toBeInTheDocument();
+    expect(container.querySelector('details')).toBeNull();
+  });
+});

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

@@ -0,0 +1,195 @@
+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: {} } })),
+}));
+// Renders only the List/Map switch HomeView hands it, which lives in its row.
+jest.mock('@/components/FilterBar', () => ({
+  FilterBar: ({ viewSwitch }: { viewSwitch?: unknown }) => viewSwitch || 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();
+  // Short beside the map, so it shares one line with the sort.
+  expect(screen.getAllByRole('heading', { name: '3 schools within 1 mile' })).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');
+});
+
+it('keeps the postcode in the heading in list view, where there is room', async () => {
+  await renderMap();
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  expect(screen.getByRole('heading', { name: '3 schools within 1 mile of SW196AR' })).toBeInTheDocument();
+});
+
+it('draws and names a quarter-mile search as 0.25, not rounded to 0.3', async () => {
+  params = new URLSearchParams('postcode=SW196AR&radius=0.25');
+  const quarter = { ...results(), location_info: { postcode: 'SW196AR', radius: 0.25 * 1.60934, coordinates: [51.42, -0.21] } } as SchoolsResponse;
+  render(<HomeView initialSchools={quarter} filters={filters} />);
+  await act(async () => {});
+  expect(screen.getByTestId('map')).toHaveAttribute('data-radius', '0.25');
+  expect(screen.getByRole('heading', { name: '3 schools within 0.25 miles' })).toBeInTheDocument();
+  fireEvent.click(screen.getByRole('button', { name: 'List' }));
+  expect(screen.getByRole('heading', { name: '3 schools within 0.25 miles of SW196AR' })).toBeInTheDocument();
+});

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

@@ -0,0 +1,177 @@
+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: [],
+  school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
+};
+
+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=council&local_authority=Wandsworth');
+    render(<FilterBar filters={filters} />);
+    expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
+  });
+});
+
+describe('the phone chips line', () => {
+  it('drops its "more this way" fade when nothing is left to scroll', () => {
+    params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary');
+    render(<FilterBar filters={filters} />);
+    // jsdom lays nothing out, so the line reads as not overflowing at all.
+    const line = screen.getByRole('group', { name: 'Applied filters' }).parentElement!;
+    expect(line.className).toMatch(/controlsAtEnd/);
+  });
+});
+
+describe('the phone filter sheet', () => {
+  it('offers the results total', () => {
+    render(<HomeView initialSchools={results()} filters={filters} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Filters' }));
+    expect(screen.getByRole('button', { name: 'Show 1 school' })).toBeInTheDocument();
+  });
+});
+
+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();
+  });
+});
+
+describe('the results list', () => {
+  it('repeats no applied filters above the results; the filter bar shows them', () => {
+    params = new URLSearchParams('search=southmead&school_type=council&local_authority=Wandsworth');
+    const { container } = render(<HomeView initialSchools={results()} filters={filters} />);
+    expect(container.querySelector('[class*="activeFilters"]')).toBeNull();
+    expect(screen.queryByText('Search: southmead')).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/__tests__/lib/schoolSections.test.ts

@@ -172,3 +172,39 @@ describe('buildSecondaryNavItems', () => {
     expect(ids).not.toContain('history');
   });
 });
+
+describe('the nearby-schools nav item', () => {
+  const navInput = {
+    ofsted: null, admissions: null, admissionDistance: null,
+    hasLocation: true, yearlyDataLength: 1,
+  };
+
+  it('appears on both templates when the section renders', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const secondary = computeSecondaryFlags(secondaryFixture);
+    const input = { ...navInput, hasNearbySchools: true };
+
+    expect(buildNavItems(primary, input).map((i) => i.id)).toContain('nearby');
+    expect(buildSecondaryNavItems(secondary, input).map((i) => i.id)).toContain('nearby');
+  });
+
+  it('is absent when the section does not render', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const secondary = computeSecondaryFlags(secondaryFixture);
+    const input = { ...navInput, hasNearbySchools: false };
+
+    expect(buildNavItems(primary, input).map((i) => i.id)).not.toContain('nearby');
+    expect(buildSecondaryNavItems(secondary, input).map((i) => i.id)).not.toContain('nearby');
+  });
+
+  it('is absent when nothing says either way', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    expect(buildNavItems(primary, navInput).map((i) => i.id)).not.toContain('nearby');
+  });
+
+  it('comes last, because the section renders last', () => {
+    const primary = computeSchoolFlags(primaryFixture);
+    const ids = buildNavItems(primary, { ...navInput, hasNearbySchools: true }).map((i) => i.id);
+    expect(ids[ids.length - 1]).toBe('nearby');
+  });
+});

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)/globals.css

@@ -645,6 +645,13 @@ html .leaflet-container a.leaflet-popup-close-button:focus {
     color: var(--text-primary);
 }
 
+/* The popup card's View link is a .btn-tertiary, which leaflet.css's
+   `.leaflet-container a` (0,1,1) paints #0078A8 over its 0,1,0. Its hover
+   rule, at 0,3,0, still wins over this. */
+html .leaflet-container a.btn-tertiary {
+    color: var(--text-secondary);
+}
+
 /* Main content column */
 .main {
     max-width: 1400px;

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

@@ -6,7 +6,7 @@
 import { absoluteUrl } from '@/lib/site';
 import type { Metadata } from 'next';
 import { fetchSchools, fetchFilters, fetchDataInfo } from '@/lib/api';
-import { formatAcademicYear } from '@/lib/utils';
+import { DEFAULT_RADIUS_MILES, formatAcademicYear } from '@/lib/utils';
 import { HomeView } from '@/components/HomeView';
 import { getFlags } from '@/lib/flags';
 import { HowItWorksSection } from '@/components/HowItWorksSection';
@@ -25,6 +25,7 @@ interface HomePageProps {
     gender?: string;
     admissions_policy?: string;
     has_sixth_form?: string;
+    faith?: string;
   }>;
 }
 
@@ -49,7 +50,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.
@@ -71,7 +72,9 @@ export default async function HomePage({ searchParams }: HomePageProps) {
 
   // Parse search params
   const page = parseInt(params.page || '1');
-  const radius = params.radius ? parseFloat(params.radius) : undefined;
+  // Without this the API applies its own 5-mile default while the Distance
+  // control shows DEFAULT_RADIUS_MILES.
+  const radius = params.radius ? parseFloat(params.radius) : DEFAULT_RADIUS_MILES;
 
   // Check if user has performed a search
   const hasSearchParams = !!(
@@ -82,7 +85,8 @@ export default async function HomePage({ searchParams }: HomePageProps) {
     params.postcode ||
     params.gender ||
     params.admissions_policy ||
-    params.has_sixth_form
+    params.has_sixth_form ||
+    params.faith
   );
 
   // Failures propagate to the retryable error boundary.
@@ -103,6 +107,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
       gender: params.gender,
       admissions_policy: params.admissions_policy,
       has_sixth_form: params.has_sixth_form,
+      faith: params.faith,
     });
   } else {
     // Empty state by default

nextjs-app/app/(frontend)/school/[slug]/page.tsx

@@ -8,6 +8,7 @@ import { APIFetchError, fetchSchoolDetails, fetchSchools, fetchNationalAverages
 import { notFound, redirect } from 'next/navigation';
 import { SchoolDetailShell } from '@/components/school/SchoolDetailShell';
 import { NearbyPlaces } from '@/components/school/NearbyPlaces';
+import { shouldRenderNearby } from '@/components/school/NearbySchoolsSection';
 import { schoolBreadcrumbJsonLd, type SchoolPlace } from '@/lib/jsonld';
 import { PrimarySchoolSections } from '@/components/school/PrimarySchoolSections';
 import { SecondarySchoolSections } from '@/components/school/SecondarySchoolSections';
@@ -155,6 +156,8 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
   // nothing rather than throwing, which is how this shipped without a
   // lockstep deploy of the two images.
   const places: SchoolPlace[] = data.places ?? [];
+  // Absent on an older API build, exactly like `places` above.
+  const nearbySchools = data.nearby_schools ?? [];
 
   // Redirect bare URN to canonical slug URL
   const canonicalSlug = schoolUrl(urn, school_info.school_name).replace('/school/', '');
@@ -186,6 +189,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
     admissions: admissions ?? null,
     admissionDistance: admission_distance ?? null,
     hasLocation: school_info.latitude != null && school_info.longitude != null,
+    hasNearbySchools: shouldRenderNearby(nearbySchools),
     yearlyDataLength: yearly_data.length,
   };
   const primaryNavItems = buildNavItems(primaryFlags, navInput);
@@ -262,6 +266,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
             finance={finance ?? null}
             nationalAvg={nationalAvg}
             destinations={destinations ?? null}
+            nearbySchools={nearbySchools}
             flags={secondaryFlags}
           />
         </SchoolDetailShell>
@@ -284,6 +289,7 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
             deprivation={deprivation ?? null}
             finance={finance ?? null}
             nationalAvg={nationalAvg}
+            nearbySchools={nearbySchools}
             flags={primaryFlags}
           />
         </SchoolDetailShell>

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,68 @@
   margin: 0 auto 1.5rem;
 }
 
+/*
+ * One row on wide screens, two below 1340px — decided by the width alone,
+ * never by what the search returned.
+ *
+ * The row once wrapped wherever it ran out of room, and its contents change
+ * with the results: the List/Map switch beside it, the distance chip and Clear
+ * all come and go. So the same search folded onto two lines when it had
+ * results and sat on one when it had none. Now the controls never wrap away
+ * from the search on a wide screen; the search box takes what they leave, and
+ * 1340px is where the fullest toolbar (distance, phase, type, More filters,
+ * Clear and the switch) still leaves it 12rem. 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 0;
+  min-width: 0;
+}
+
+.filterBar:not(.heroMode) .controlsRow {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+}
+
+/* The List/Map switch closes the line; the "More filters" panel follows it. */
+.viewSwitchSlot {
+  flex: 0 0 auto;
+  order: 1;
+}
+
+/* Below that, the switch stays up beside the search and the controls always
+   take a full-width line of their own, results or not. */
+@media (min-width: 641px) and (max-width: 1339px) {
+  .viewSwitchSlot {
+    order: 0;
+  }
+
+  .filterBar:not(.heroMode) .controlsRow {
+    flex-basis: 100%;
+    flex-wrap: wrap;
+  }
+}
+
+/* Only phones fold the form away and filter through the sheet; see the
+   640px block. */
+.summaryRow,
+.chipsLine {
+  display: none;
+}
+
 /* ── Search ───────────────────────────────────────────────────────── */
 
 .searchSection {
@@ -115,8 +179,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 +286,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 +350,30 @@
   font-weight: 500;
 }
 
+/* In the phone sheet a select is a full-width field and a whole touch target. */
+.sheetSelect {
+  min-height: 2.75rem;
+}
+
+/* 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. The cap
+     is part of the one-line budget above. */
+  max-width: 11rem;
+  text-overflow: ellipsis;
+}
+
+.selectShell:has(.controlSelect) .selectChevron {
+  right: 1rem;
 }
 
 .filterSelect:hover:not(:disabled),
@@ -335,12 +402,19 @@
   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 {
+  order: 2;
+  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 +424,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 +462,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 +489,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 +497,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 +556,201 @@
     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 · 1 mi
+ * Edit") with the Filters button beside it, and every filter lives in
+ * the sheet that button opens. A second line, of the applied filters as
+ * chips, appears only once something is applied.
+ */
+@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 (then "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;
+  }
+
+  /* Phones switch views with the floating button (HomeView, .mobileDock). An
+     empty slot would still take a gap in this column. */
+  .viewSwitchSlot {
+    display: none;
+  }
+
+  /* The desktop row and its panel give way to the Filters button, the
+     applied-filter chips and the sheet. */
+  .filterBar:not(.heroMode) .controlsRow,
+  .filterBar:not(.heroMode) .filters {
+    display: none;
+  }
+
+  .summaryRow {
+    display: flex;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .summaryRow .searchSummary {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .sheetTrigger {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2.75rem;
+    padding: 0 0.875rem;
+    background: var(--bg-card);
+    border: 1px solid var(--text-secondary);
+    border-radius: var(--radius-md);
+    font-family: var(--font-ui);
+    font-size: var(--step--1);
+    font-weight: 600;
+    line-height: 1;
+    color: var(--text-primary);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  /* The same brand chip as "More filters" on desktop: the list is narrowed. */
+  .sheetTriggerActive {
+    border-color: var(--brand);
+    background: var(--brand-bg);
+    color: var(--brand);
+  }
+
+  .sheetTriggerCount {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    padding: 0 0.3rem;
+    border-radius: 999px;
+    background: var(--brand);
+    color: var(--bg-card);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  /* 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. */
+  .chipsLine {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    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;
+  }
+
+  .chipsLine::-webkit-scrollbar {
+    display: none;
+  }
+
+  .chipsLine > *,
+  .chips > * {
+    flex: 0 0 auto;
+  }
+
+  .chips {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-height: 2.75rem;
+    padding: 0 0.75rem 0 1rem;
+    background: rgba(var(--sage-rgb), 0.38);
+    border: 1px solid var(--brand);
+    border-radius: 999px;
+    font-family: var(--font-ui);
+    font-size: var(--step--1);
+    font-weight: 600;
+    line-height: 1;
+    color: var(--brand-strong);
+    cursor: pointer;
+    white-space: nowrap;
+  }
+
+  /* A school type can run to "Academy special sponsor led". */
+  .chipLabel {
+    max-width: 11rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .chipsClear {
+    min-height: 2.75rem;
+    padding: 0 0.75rem;
+    font-size: var(--step--1);
+    font-weight: 500;
+  }
+}

nextjs-app/components/FilterBar.tsx

@@ -3,12 +3,13 @@
 import { useState, useCallback, useTransition, useRef, useEffect } from "react";
 import type { ReactNode } from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
-import { isValidPostcode, schoolUrl } from "@/lib/utils";
+import { DEFAULT_RADIUS_MILES, isValidPostcode, schoolUrl } from "@/lib/utils";
 import { track } from "@/lib/analytics";
 import { useSchoolSuggest } from "@/hooks/useSchoolSuggest";
 import { SuggestList, suggestOptionId } from "./SuggestList";
+import { FilterSheet, SheetField, RADIUS_OPTIONS, radiusLabel as milesLabel } from "./FilterSheet";
 import type { Suggestion } from "@/lib/suggest";
-import type { Filters, ResultFilters } from "@/lib/types";
+import type { FilterOption, Filters, ResultFilters } from "@/lib/types";
 import styles from "./FilterBar.module.css";
 
 interface FilterBarProps {
@@ -22,6 +23,14 @@ interface FilterBarProps {
   geoError?: string | null;
   /** Server-read feature flag. Off means no listener, no fetch, no markup. */
   autosuggest?: boolean;
+  /**
+   * The results page's List/Map switch. It sits in this bar's own row rather
+   * than beside it, so that when the bar takes two lines the filters' line
+   * runs the full width instead of stopping short of the switch.
+   */
+  viewSwitch?: ReactNode;
+  /** The results' total, for the phone filter sheet's "Show N schools". */
+  resultCount?: number;
 }
 
 /**
@@ -46,6 +55,76 @@ function SelectShell({
   );
 }
 
+/** The filters a phone sees as chips and counts on its Filters button. */
+const FILTER_KEYS = [
+  "phase",
+  "school_type",
+  "faith",
+  "local_authority",
+  "gender",
+  "has_sixth_form",
+  "admissions_policy",
+] as const;
+type FilterKey = (typeof FILTER_KEYS)[number];
+
+/** Filters that only mean something for schools teaching beyond primary. */
+const SECONDARY_ONLY_KEYS = ["gender", "has_sixth_form", "admissions_policy"] as const;
+
+/**
+ * False for a phase with no secondary-age pupils, for which those filters are
+ * hidden: Primary, Nursery and Middle deemed primary. Matched on the words,
+ * not exact labels, so a change of case, hyphen or spacing in the GIAS label
+ * cannot leave them showing. The same reading of "primary" as
+ * compareGroups in lib/compareLogic.ts. The API's PHASE_GROUPS answers a
+ * different question (which phases a phase filter returns: primary includes
+ * all-through), so it is not this list.
+ */
+function hasSecondaryFilters(phase: string): boolean {
+  const p = phase.toLowerCase().replace(/[^a-z]+/g, " ").trim();
+  return !(p === "nursery" || (p.includes("primary") && !p.includes("secondary")));
+}
+
+/**
+ * The option a URL value names, ignoring case as the API does. An old link's
+ * raw GIAS type names none, and is shown as itself.
+ */
+function optionFor(options: FilterOption[], value: string) {
+  const v = value.toLowerCase();
+  return options.find((o) => o.value.toLowerCase() === v);
+}
+
+/**
+ * A select's value and, when the URL holds something no option spells, an
+ * extra option for it, so the select shows what is applied and "Any" can be
+ * chosen to clear it. Without one, React shows the first option, "Any",
+ * while the list is still filtered, and choosing it changes nothing.
+ */
+function selectedOf(options: FilterOption[], value: string) {
+  if (!value) return { value, unlisted: null };
+  const match = optionFor(options, value);
+  return match ? { value: match.value, unlisted: null } : { value, unlisted: value };
+}
+
+function SlidersIcon() {
+  return (
+    <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>
+  );
+}
+
 export function FilterBar({
   filters,
   isHero,
@@ -54,6 +133,8 @@ export function FilterBar({
   geoState = "idle",
   geoError,
   autosuggest = false,
+  viewSwitch,
+  resultCount,
 }: FilterBarProps) {
   const router = useRouter();
   const pathname = usePathname();
@@ -63,7 +144,7 @@ export function FilterBar({
 
   const currentSearch = searchParams.get("search") || "";
   const currentPostcode = searchParams.get("postcode") || "";
-  const currentRadius = searchParams.get("radius") || "1";
+  const currentRadius = searchParams.get("radius") || String(DEFAULT_RADIUS_MILES);
   const initialOmniValue = currentPostcode || currentSearch;
 
   const [omniValue, setOmniValue] = useState(initialOmniValue);
@@ -127,11 +208,14 @@ export function FilterBar({
   const currentGender = searchParams.get("gender") || "";
   const currentAdmissionsPolicy = searchParams.get("admissions_policy") || "";
   const currentHasSixthForm = searchParams.get("has_sixth_form") || "";
+  const currentFaith = searchParams.get("faith") || "";
 
-  // 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,
+    currentFaith,
     currentGender,
     currentAdmissionsPolicy,
     currentHasSixthForm,
@@ -144,6 +228,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 chips line'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 filters, 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 (
@@ -160,9 +288,21 @@ export function FilterBar({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  /*
+   * Where the navigation in flight is headed. useSearchParams only catches up
+   * once a navigation lands, so a second change made before then (the phone
+   * sheet stays usable while one lands) would otherwise be built on the old
+   * URL and undo the first. Dropped once nothing is pending, when
+   * searchParams is current again.
+   */
+  const pendingQueryRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!isPending) pendingQueryRef.current = null;
+  }, [isPending]);
+
   const updateURL = useCallback(
     (updates: Record<string, string>) => {
-      const params = new URLSearchParams(searchParams);
+      const params = new URLSearchParams(pendingQueryRef.current ?? searchParams);
 
       Object.entries(updates).forEach(([key, value]) => {
         if (value && value !== "") {
@@ -173,6 +313,7 @@ export function FilterBar({
       });
 
       params.delete("page");
+      pendingQueryRef.current = params.toString();
 
       startTransition(() => {
         router.push(`${pathname}?${params.toString()}`);
@@ -186,6 +327,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;
@@ -200,6 +342,7 @@ export function FilterBar({
       currentPhase && `phase=${currentPhase}`,
       currentLA && `la=${currentLA}`,
       currentType && `type=${currentType}`,
+      currentFaith && `faith=${currentFaith}`,
       currentGender && `gender=${currentGender}`,
       currentAdmissionsPolicy && `admissions=${currentAdmissionsPolicy}`,
       currentHasSixthForm && `sixth_form=${currentHasSixthForm}`,
@@ -216,7 +359,7 @@ export function FilterBar({
     if (isPostcode) {
       updateURL({
         postcode: cleaned.toUpperCase(),
-        radius: currentRadius || "1",
+        radius: currentRadius,
         search: "",
       });
     } else {
@@ -225,11 +368,24 @@ export function FilterBar({
   };
 
   const handleFilterChange = (key: string, value: string) => {
-    updateURL({ [key]: value });
+    // A primary phase hides the secondary-only filters, so it clears them
+    // too: left applied, they would empty the list with no control showing.
+    const cleared =
+      key === "phase" && !hasSecondaryFilters(value)
+        ? Object.fromEntries(SECONDARY_ONLY_KEYS.map((k) => [k, ""]))
+        : {};
+    updateURL({ ...cleared, [key]: value });
+  };
+
+  // Every filter at once, keeping the search and its distance: what "Clear
+  // all" means beside the applied filters, where the search is not one of them.
+  const handleClearFilterValues = () => {
+    updateURL(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
   };
 
   const handleClearFilters = () => {
     setOmniValue("");
+    pendingQueryRef.current = "";
     startTransition(() => {
       router.push(pathname);
     });
@@ -239,33 +395,305 @@ export function FilterBar({
     currentSearch ||
     currentLA ||
     currentType ||
+    currentFaith ||
     currentPhase ||
     currentPostcode ||
     currentGender ||
     currentAdmissionsPolicy ||
     currentHasSixthForm;
 
-  // Use result-scoped filter values when available, fall back to global
+  /*
+   * A filter's options come from the full lists, not from the results: the
+   * results have already been narrowed by that filter, so scoping to them
+   * would leave only the chosen value on offer, and switching (Girls to Boys,
+   * one school type to another) would need clearing first.
+   *
+   * Local authority is the exception, scoped to the results so a postcode
+   * search offers the councils nearby rather than all of England's.
+   */
   const laOptions =
     resultFilters?.local_authorities ?? filters.local_authorities;
-  const typeOptions = resultFilters?.school_types ?? filters.school_types;
-  const phaseOptions = resultFilters?.phases ?? filters.phases ?? [];
-  const genderOptions = resultFilters?.genders ?? filters.genders ?? [];
-  const admissionsPolicyOptions =
-    resultFilters?.admissions_policies ?? filters.admissions_policies ?? [];
+  // Six groups a parent recognises, not GIAS's 34 establishment types.
+  const typeOptions = filters.school_type_groups ?? [];
+  const faithOptions = filters.faiths ?? [];
+  const phaseOptions = filters.phases ?? [];
+  const genderOptions = filters.genders ?? [];
+  const admissionsPolicyOptions = filters.admissions_policies ?? [];
 
-  const isSecondaryMode =
-    currentPhase === "secondary" || genderOptions.length > 0;
+  // Set by the phase chosen, never by what the results happen to contain.
+  const isSecondaryMode = hasSecondaryFilters(currentPhase);
 
   // A select that is narrowing the results carries a sage tint; the class is
   // only ever additive, so the control's behaviour is untouched.
   const activeIf = (value: string) => (value ? ` ${styles.selectActive}` : "");
 
+  const radiusLabel = milesLabel(currentRadius);
+
+  /*
+   * Phones filter through one button and a sheet holding every filter. The
+   * desktop row's phone version scrolled sideways with "More filters" first,
+   * so phase showed only in part and school type not at all, and the panel
+   * "More filters" opened did not contain either of them.
+   */
+  const [sheetOpen, setSheetOpen] = useState(false);
+  // The sheet is phone furniture: if the screen widens past phone width while
+  // it is open (rotation, a resized window), close it, or its selects and the
+  // desktop row's would both be showing.
+  useEffect(() => {
+    if (!sheetOpen || typeof window.matchMedia !== "function") return;
+    const phone = window.matchMedia("(max-width: 640px)");
+    const onChange = (e: { matches: boolean }) => {
+      if (!e.matches) setSheetOpen(false);
+    };
+    phone.addEventListener("change", onChange);
+    return () => phone.removeEventListener("change", onChange);
+  }, [sheetOpen]);
+  const values: Record<FilterKey, string> = {
+    phase: currentPhase,
+    school_type: currentType,
+    faith: currentFaith,
+    local_authority: currentLA,
+    gender: currentGender,
+    has_sixth_form: currentHasSixthForm,
+    admissions_policy: currentAdmissionsPolicy,
+  };
+  const labelFor = (key: FilterKey, value: string) => {
+    if (key === "has_sixth_form") {
+      return value === "yes" ? "With sixth form" : "Without sixth form";
+    }
+    // An old link may carry a raw GIAS type, which reads as itself.
+    const labelled = { school_type: typeOptions, faith: faithOptions }[
+      key as "school_type" | "faith"
+    ];
+    if (labelled) return optionFor(labelled, value)?.label ?? value;
+    // Phase, gender and admissions values are lowercased option names; the
+    // rest are the names themselves.
+    const named: Partial<Record<FilterKey, string[]>> = {
+      phase: phaseOptions,
+      gender: genderOptions,
+      admissions_policy: admissionsPolicyOptions,
+    };
+    return (named[key] ?? []).find((o) => o.toLowerCase() === value.toLowerCase()) ?? value;
+  };
+  const applied = FILTER_KEYS.filter((k) => values[k]).map((key) => ({
+    key,
+    label: labelFor(key, values[key]),
+  }));
+  const appliedCount = applied.length;
+
+  /*
+   * Each select is built here once and drawn twice: as a pill in the desktop
+   * row or panel, and as a full-width labelled field in the phone sheet. Only
+   * one copy is ever showing; the sheet's is mounted only while it is open.
+   * The sheet's stay enabled while a change lands: disabling the control
+   * under the user's focus would drop focus to <body>, out of the dialog.
+   */
+  type Look = "pill" | "panel" | "sheet";
+  const selectClass = (look: Look, value: string) =>
+    `${look === "pill" ? styles.controlSelect : styles.filterSelect}${look === "sheet" ? ` ${styles.sheetSelect}` : ""}${activeIf(value)}`;
+
+  const phaseSelect = (look: Look) => (
+    <SelectShell wide={look !== "pill"}>
+      <select
+        value={currentPhase}
+        onChange={(e) => handleFilterChange("phase", e.target.value)}
+        className={selectClass(look, currentPhase)}
+        aria-label="Phase"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Any phase</option>
+        {phaseOptions.map((p) => (
+          <option key={p} value={p.toLowerCase()}>
+            {p}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const typeSelected = selectedOf(typeOptions, currentType);
+  const faithSelected = selectedOf(faithOptions, currentFaith);
+
+  const typeSelect = (look: Look) => (
+    <SelectShell wide={look !== "pill"}>
+      <select
+        value={typeSelected.value}
+        onChange={(e) => handleFilterChange("school_type", e.target.value)}
+        className={selectClass(look, currentType)}
+        aria-label="School type"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Any school type</option>
+        {typeSelected.unlisted && (
+          <option value={typeSelected.unlisted}>{typeSelected.unlisted}</option>
+        )}
+        {typeOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const laSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentLA}
+        onChange={(e) => handleFilterChange("local_authority", e.target.value)}
+        className={selectClass(look, currentLA)}
+        aria-label="Local authority"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">All Local Authorities</option>
+        {laOptions.map((la) => (
+          <option key={la} value={la}>
+            {la}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const faithSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={faithSelected.value}
+        onChange={(e) => handleFilterChange("faith", e.target.value)}
+        className={selectClass(look, currentFaith)}
+        aria-label="Faith"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Any faith or none</option>
+        {faithSelected.unlisted && (
+          <option value={faithSelected.unlisted}>{faithSelected.unlisted}</option>
+        )}
+        {faithOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const genderSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentGender}
+        onChange={(e) => handleFilterChange("gender", e.target.value)}
+        className={selectClass(look, currentGender)}
+        aria-label="Gender"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">Boys, Girls &amp; Mixed</option>
+        {genderOptions.map((g) => (
+          <option key={g} value={g.toLowerCase()}>
+            {g}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const sixthFormSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentHasSixthForm}
+        onChange={(e) => handleFilterChange("has_sixth_form", e.target.value)}
+        className={selectClass(look, currentHasSixthForm)}
+        aria-label="Sixth form"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">With or without sixth form</option>
+        <option value="yes">With sixth form</option>
+        <option value="no">Without sixth form</option>
+      </select>
+    </SelectShell>
+  );
+
+  const admissionsSelect = (look: Look) => (
+    <SelectShell wide>
+      <select
+        value={currentAdmissionsPolicy}
+        onChange={(e) => handleFilterChange("admissions_policy", e.target.value)}
+        className={selectClass(look, currentAdmissionsPolicy)}
+        aria-label="Admissions"
+        disabled={isPending && look !== "sheet"}
+      >
+        <option value="">All admissions types</option>
+        {admissionsPolicyOptions.map((p) => (
+          <option key={p} value={p.toLowerCase()}>
+            {p}
+          </option>
+        ))}
+      </select>
+    </SelectShell>
+  );
+
+  const sheetTrigger = (
+    <button
+      type="button"
+      className={`${styles.sheetTrigger}${appliedCount ? ` ${styles.sheetTriggerActive}` : ""}`}
+      onClick={() => setSheetOpen(true)}
+      aria-haspopup="dialog"
+      aria-label={appliedCount ? `Filters, ${appliedCount} applied` : "Filters"}
+    >
+      <SlidersIcon />
+      Filters
+      {appliedCount > 0 && (
+        <span className={styles.sheetTriggerCount} aria-hidden="true">
+          {appliedCount}
+        </span>
+      )}
+    </button>
+  );
+  // Beside the folded search summary; on the chips line when there is no
+  // summary to sit beside. While the search is being edited it steps aside,
+  // and comes back when the form folds.
+  const triggerBesideSummary = canFold && !searchOpen;
+  const triggerOnChipsLine = !canFold;
+
   return (
     <div
       className={`${styles.filterBar} ${isPending ? styles.isLoading : ""} ${isHero ? styles.heroMode : ""}`}
     >
-      <form onSubmit={handleSearchSubmit} className={styles.searchSection}>
+      {triggerBesideSummary && (
+        <div className={styles.summaryRow}>
+        <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>
+            {/* Short, so the distance survives beside the Filters button on a
+                360px screen; the button's name carries the long form. */}
+            {currentPostcode && <span> · {currentRadius} mi</span>}
+          </span>
+          <span className={styles.summaryEdit} aria-hidden="true">Edit</span>
+        </button>
+        {sheetTrigger}
+        </div>
+      )}
+      <form
+        onSubmit={handleSearchSubmit}
+        className={`${styles.searchSection}${canFold && !searchOpen ? ` ${styles.searchFolded}` : ""}`}
+      >
         <div className={styles.omniBoxContainer}>
           {isHero && (
             <span className={styles.omniIcon} aria-hidden="true">
@@ -292,6 +720,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 +752,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,51 +799,43 @@ export function FilterBar({
 
       {!isHero && (
         <>
-          <div className={styles.controlsRow}>
+          {viewSwitch && (
+            <div className={styles.viewSwitchSlot}>{viewSwitch}</div>
+          )}
+          {/* Desktop and tablet. Every control here is a real <select> or
+              <button>, drawn as a pill. Phones hide the row and use the
+              Filters button and sheet instead. */}
+          <div className={styles.controlsRow} role="group" aria-label="Filters">
             {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>
-            )}
-
-            {phaseOptions.length > 0 && (
               <SelectShell>
                 <select
-                  value={currentPhase}
-                  onChange={(e) => handleFilterChange("phase", e.target.value)}
-                  className={`${styles.controlSelect}${activeIf(currentPhase)}`}
+                  value={currentRadius}
+                  onChange={(e) => updateURL({ radius: e.target.value })}
+                  className={`${styles.controlSelect} ${styles.selectActive}`}
+                  aria-label="Distance"
                   disabled={isPending}
                 >
-                  <option value="">All Phases</option>
-                  {phaseOptions.map((p) => (
-                    <option key={p} value={p.toLowerCase()}>
-                      {p}
+                  {RADIUS_OPTIONS.map((r) => (
+                    <option key={r} value={r}>
+                      Within {milesLabel(r)}
                     </option>
                   ))}
                 </select>
               </SelectShell>
             )}
 
+            {phaseOptions.length > 0 && phaseSelect("pill")}
+
+            {typeOptions.length > 0 && typeSelect("pill")}
+
             <button
               type="button"
               className={`${styles.advancedToggle}${hasActiveDropdownFilters ? ` ${styles.advancedToggleActive}` : ''}`}
               onClick={() => setFiltersOpen((v) => !v)}
               aria-expanded={filtersOpen}
             >
-              {hasActiveDropdownFilters ? 'Filters' : 'Advanced'}
+              <SlidersIcon />
+              More filters
               {hasActiveDropdownFilters
                 ? ` (${activeDropdownFilters.length})`
                 : ""}
@@ -437,102 +858,99 @@ export function FilterBar({
 
           {filtersOpen && (
             <div className={styles.filters}>
-              <SelectShell wide>
-                <select
-                  value={currentLA}
-                  onChange={(e) =>
-                    handleFilterChange("local_authority", e.target.value)
-                  }
-                  className={`${styles.filterSelect}${activeIf(currentLA)}`}
-                  disabled={isPending}
-                >
-                  <option value="">All Local Authorities</option>
-                  {laOptions.map((la) => (
-                    <option key={la} value={la}>
-                      {la}
-                    </option>
-                  ))}
-                </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>
+              {laSelect("panel")}
+              {faithOptions.length > 0 && faithSelect("panel")}
 
               {isSecondaryMode && (
                 <>
-                  {genderOptions.length > 0 && (
-                    <SelectShell wide>
-                      <select
-                        value={currentGender}
-                        onChange={(e) =>
-                          handleFilterChange("gender", e.target.value)
-                        }
-                        className={`${styles.filterSelect}${activeIf(currentGender)}`}
-                        disabled={isPending}
-                      >
-                        <option value="">Boys, Girls &amp; Mixed</option>
-                        {genderOptions.map((g) => (
-                          <option key={g} value={g.toLowerCase()}>
-                            {g}
-                          </option>
-                        ))}
-                      </select>
-                    </SelectShell>
-                  )}
-
-                  <SelectShell wide>
-                    <select
-                      value={currentHasSixthForm}
-                      onChange={(e) =>
-                        handleFilterChange("has_sixth_form", e.target.value)
-                      }
-                      className={`${styles.filterSelect}${activeIf(currentHasSixthForm)}`}
-                      disabled={isPending}
-                    >
-                      <option value="">With or without sixth form</option>
-                      <option value="yes">With sixth form</option>
-                      <option value="no">Without sixth form</option>
-                    </select>
-                  </SelectShell>
-
-                  {admissionsPolicyOptions.length > 0 && (
-                    <SelectShell wide>
-                      <select
-                        value={currentAdmissionsPolicy}
-                        onChange={(e) =>
-                          handleFilterChange("admissions_policy", e.target.value)
-                        }
-                        className={`${styles.filterSelect}${activeIf(currentAdmissionsPolicy)}`}
-                        disabled={isPending}
-                      >
-                        <option value="">All admissions types</option>
-                        {admissionsPolicyOptions.map((p) => (
-                          <option key={p} value={p.toLowerCase()}>
-                            {p}
-                          </option>
-                        ))}
-                      </select>
-                    </SelectShell>
-                  )}
+                  {genderOptions.length > 0 && genderSelect("panel")}
+                  {sixthFormSelect("panel")}
+                  {admissionsPolicyOptions.length > 0 && admissionsSelect("panel")}
                 </>
               )}
             </div>
           )}
+
+          {/* Phones: what is applied, each removable with a tap. The line
+              scrolls sideways if it overflows, under the same right-edge fade
+              as the school page's section nav. */}
+          {(appliedCount > 0 || triggerOnChipsLine) && (
+            <div
+              ref={controlsRowRef}
+              className={`${styles.chipsLine}${controlsAtEnd ? ` ${styles.controlsAtEnd}` : ""}`}
+              onScroll={updateControlsAtEnd}
+            >
+              {triggerOnChipsLine && sheetTrigger}
+              {appliedCount > 0 && (
+                <div className={styles.chips} role="group" aria-label="Applied filters">
+                  {applied.map(({ key, label }) => (
+                    <button
+                      key={key}
+                      type="button"
+                      className={styles.chip}
+                      onClick={() => handleFilterChange(key, "")}
+                      aria-label={`Remove filter: ${label}`}
+                      disabled={isPending}
+                    >
+                      <span className={styles.chipLabel}>{label}</span>
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                        aria-hidden="true"
+                      >
+                        <path d="M18 6 6 18M6 6l12 12" />
+                      </svg>
+                    </button>
+                  ))}
+                  <button
+                    type="button"
+                    className={`btn btn-tertiary ${styles.chipsClear}`}
+                    onClick={handleClearFilterValues}
+                    disabled={isPending}
+                  >
+                    Clear all
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+
+          <FilterSheet
+            open={sheetOpen}
+            onClose={() => setSheetOpen(false)}
+            radius={currentPostcode ? currentRadius : null}
+            onRadiusChange={(r) => updateURL({ radius: r })}
+            onClearAll={appliedCount > 0 ? handleClearFilterValues : undefined}
+            resultCount={resultCount}
+            isPending={isPending}
+          >
+            {phaseOptions.length > 0 && (
+              <SheetField label="Phase">{phaseSelect("sheet")}</SheetField>
+            )}
+            {typeOptions.length > 0 && (
+              <SheetField label="School type">{typeSelect("sheet")}</SheetField>
+            )}
+            {faithOptions.length > 0 && (
+              <SheetField label="Faith">{faithSelect("sheet")}</SheetField>
+            )}
+            <SheetField label="Local authority">{laSelect("sheet")}</SheetField>
+            {isSecondaryMode && (
+              <>
+                {genderOptions.length > 0 && (
+                  <SheetField label="Gender">{genderSelect("sheet")}</SheetField>
+                )}
+                <SheetField label="Sixth form">{sixthFormSelect("sheet")}</SheetField>
+                {admissionsPolicyOptions.length > 0 && (
+                  <SheetField label="Admissions">{admissionsSelect("sheet")}</SheetField>
+                )}
+              </>
+            )}
+          </FilterSheet>
         </>
       )}
     </div>

nextjs-app/components/FilterSheet.module.css

@@ -0,0 +1,92 @@
+/* ── Phone filter sheet ───────────────────────────────────────────── */
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.fieldLabel {
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+/* Distance: five joined segments, a full-width row. At 360px each is about
+   65px wide, clear of the 44px minimum. */
+.segments {
+  display: flex;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.segment {
+  position: relative;
+  flex: 1 1 0;
+  display: flex;
+}
+
+.segment + .segment {
+  border-left: 1px solid var(--border);
+}
+
+/* The real radio stays in the tree for keyboard and screen readers; the span
+   is what is drawn. */
+.segment input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.segment span {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  font-family: var(--font-ui);
+  font-size: var(--step--1);
+  font-weight: 500;
+  color: var(--text-primary);
+  background: var(--bg-card);
+  white-space: nowrap;
+  transition: background-color var(--transition), color var(--transition);
+}
+
+.segment input:checked + span {
+  background: rgba(var(--sage-rgb), 0.38);
+  color: var(--brand-strong);
+  font-weight: 700;
+}
+
+.segment input:focus-visible + span {
+  box-shadow: inset 0 0 0 2px var(--brand);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.clearAll {
+  min-height: 2.75rem;
+  padding: 0 1rem;
+}
+
+.show {
+  flex: 1;
+  min-height: 2.75rem;
+  justify-content: center;
+}

nextjs-app/components/FilterSheet.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useId } from "react";
+import type { ReactNode } from "react";
+import { Modal } from "./Modal";
+import styles from "./FilterSheet.module.css";
+
+export const RADIUS_OPTIONS = ["0.25", "0.5", "1", "3", "5"] as const;
+
+export const radiusLabel = (r: string) => `${r} mile${r === "1" ? "" : "s"}`;
+
+interface FilterSheetProps {
+  open: boolean;
+  onClose: () => void;
+  /** The current distance, or null when the search is not by postcode. */
+  radius: string | null;
+  onRadiusChange: (radius: string) => void;
+  /** The filter selects, each already labelled; FilterBar owns their state. */
+  children: ReactNode;
+  /** Shown only when something is applied. */
+  onClearAll?: () => void;
+  resultCount?: number;
+  isPending: boolean;
+}
+
+/*
+ * Every filter in one place, for phones. A change applies at once, as it does
+ * in the desktop toolbar, so the results behind the sheet are already the
+ * filtered ones and the footer button only has to close it.
+ */
+export function FilterSheet({
+  open,
+  onClose,
+  radius,
+  onRadiusChange,
+  children,
+  onClearAll,
+  resultCount,
+  isPending,
+}: FilterSheetProps) {
+  const distanceId = useId();
+
+  const showLabel = isPending
+    ? "Updating…"
+    : resultCount === undefined
+      ? "Show schools"
+      : resultCount === 0
+        ? "No schools match"
+        : `Show ${resultCount.toLocaleString()} school${resultCount === 1 ? "" : "s"}`;
+
+  return (
+    <Modal
+      isOpen={open}
+      onClose={onClose}
+      title="Filters"
+      size="small"
+      footer={
+        <div className={styles.footer}>
+          {onClearAll && (
+            <button
+              type="button"
+              className={`btn btn-tertiary ${styles.clearAll}`}
+              onClick={onClearAll}
+            >
+              Clear all
+            </button>
+          )}
+          <button
+            type="button"
+            className={`btn btn-action ${styles.show}`}
+            onClick={onClose}
+          >
+            {showLabel}
+          </button>
+        </div>
+      }
+    >
+      {/* Controls stay enabled while a change lands, so focus is never
+          dropped out of the dialog; aria-busy says the results are updating. */}
+      <div className={styles.body} aria-busy={isPending}>
+        {radius !== null && (
+          <div className={styles.field}>
+            <span id={distanceId} className={styles.fieldLabel}>
+              Distance
+            </span>
+            <div
+              className={styles.segments}
+              role="radiogroup"
+              aria-labelledby={distanceId}
+            >
+              {RADIUS_OPTIONS.map((r) => (
+                <label key={r} className={styles.segment}>
+                  <input
+                    type="radio"
+                    name={`${distanceId}-radius`}
+                    value={r}
+                    checked={r === radius}
+                    onChange={() => onRadiusChange(r)}
+                    aria-label={`Within ${radiusLabel(r)}`}
+                  />
+                  <span>{r} mi</span>
+                </label>
+              ))}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+    </Modal>
+  );
+}
+
+/** One labelled row of the sheet. */
+export function SheetField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <label className={styles.field}>
+      <span className={styles.fieldLabel}>{label}</span>
+      {children}
+    </label>
+  );
+}

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,136 +572,132 @@
   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;
-}
-
-.mapContainer {
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  height: 100%;
-}
-
-.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;
+  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: 8px;
-  transition: all 0.2s ease;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
-.compactItem:hover {
-  border-color: var(--brand);
-  box-shadow: 0 2px 6px rgba(var(--shadow-rgb), 0.05);
+.mapListPane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--bg-primary);
+  border-right: 1px solid var(--border);
 }
 
-.compactItemContent {
+/* One line: the count takes what the sort leaves, and truncates rather than
+   wrap if a narrow pane cannot fit both. */
+.mapListPane .resultsHeader {
+  flex-wrap: nowrap;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem 0.75rem;
+}
+
+.mapListPane .resultsHeader h2 {
   flex: 1;
   min-width: 0;
-}
-
-.compactItemHeader {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  margin-bottom: 0.125rem;
-}
-
-.compactItemName {
-  font-weight: 600;
-  font-size: 0.8125rem;
-  color: var(--text-primary);
-  text-decoration: none;
+  font-size: var(--step-0);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.compactItemName:hover {
-  color: var(--brand-strong);
-}
-
-.distanceBadge {
+.mapListPane .resultsHeaderActions {
   flex-shrink: 0;
-  padding: 0.0625rem 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  background: var(--brand);
-  color: var(--brand-on);
-  border-radius: 3px;
 }
 
-.compactItemMeta {
-  display: flex;
-  gap: 0.375rem;
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-  margin-bottom: 0.25rem;
+/* A select is as wide as its longest option ("Highest Reading, Writing &
+   Maths %", 281px), more than half the pane. Cap it; a long choice truncates. */
+.mapListPane .sortSelect {
+  max-width: 11rem;
+  text-overflow: ellipsis;
 }
 
-.compactItemMeta span:not(:last-child)::after {
-  content: '·';
-  margin-left: 0.375rem;
-  color: var(--text-muted);
+.mapContainer {
+  height: 100%;
+  min-height: 0;
 }
 
-.compactItemStats {
-  display: flex;
-  gap: 0.75rem;
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-}
-
-.compactStat strong {
-  color: var(--text-primary);
-}
-
-.compactItemActions {
+.compactList {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  flex-shrink: 0;
+  gap: 0.625rem;
+  flex: 1;
+  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;
 }
 
+/* A row in the list beside the map: clicking it picks its pin. */
+.mapRow {
+  position: relative;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+.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;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.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: 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;
+}
+
+
 
 .sectionHeader {
   margin-bottom: 1rem;
@@ -696,6 +734,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 +784,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 +793,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 +838,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 +878,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 {
@@ -1466,37 +1533,6 @@
   cursor: pointer;
 }
 
-.activeFilters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.filterChip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.625rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  font-size: 0.8rem;
-  color: var(--text-secondary);
-}
-
-.chipRemove {
-  color: var(--text-muted);
-  text-decoration: none;
-  font-size: 0.9rem;
-  line-height: 1;
-  transition: color var(--transition, 0.2s ease);
-}
-
-.chipRemove:hover {
-  color: var(--text-primary);
-}
-
 .loadMoreSection {
   display: flex;
   flex-direction: column;

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,8 +16,8 @@ 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 { DEFAULT_RADIUS_MILES } from '@/lib/utils';
 import styles from './HomeView.module.css';
 
 interface HomeViewProps {
@@ -33,6 +33,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 +142,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 +177,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 +208,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 +229,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 +247,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 +298,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(() => {
@@ -290,6 +341,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
     setIsLoadingMap(true);
     const params: Record<string, any> = {};
     searchParams.forEach((value, key) => { params[key] = value; });
+    params.radius ??= DEFAULT_RADIUS_MILES;
     params.page = 1;
     params.page_size = 500;
     fetchSchools(params, { cache: 'no-store', signal: controller.signal })
@@ -369,7 +421,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
             setGeoState('idle');
             track('near_me_used', { outcome: 'granted' });
             track('search_submitted', { query: postcode, via: 'near_me', has_postcode: true, filters_active: '', filters_count: 0 });
-            router.push(`/?postcode=${encodeURIComponent(postcode)}&radius=1`);
+            router.push(`/?postcode=${encodeURIComponent(postcode)}&radius=${DEFAULT_RADIUS_MILES}`);
           } else {
             track('near_me_used', { outcome: 'no_postcode' });
             setGeoState('error');
@@ -395,7 +447,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 +456,15 @@ 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);
+  // Two places, so a 0.25-mile search is not drawn or labelled as 0.3.
+  const radiusMiles = initialSchools.location_info
+    ? Number((initialSchools.location_info.radius / 1.60934).toFixed(2))
+    : undefined;
 
   // Empty-results sentinel: track when a search returns nothing.
   useEffect(() => {
@@ -448,11 +509,133 @@ 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}
+      />
+    )
+  );
+
+  const schoolCount = `${initialSchools.total.toLocaleString()} school${initialSchools.total !== 1 ? 's' : ''}`;
+
+  // 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">
+        {/* Beside the map the heading shares one line with the sort, so it
+            drops the postcode, which the search box just above already shows. */}
+        {isMapView && radiusMiles != null
+          ? `${schoolCount} within ${radiusMiles} mile${radiusMiles === 1 ? '' : 's'}`
+          : isLocationSearch && radiusMiles != null && initialSchools.location_info
+          ? `${schoolCount} within ${radiusMiles} mile${radiusMiles === 1 ? '' : 's'} of ${initialSchools.location_info.postcode}`
+          : `${schoolCount} 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 +661,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 +705,42 @@ 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}
+            resultCount={initialSchools.total}
+            onNearMe={handleNearMe}
+            geoState={geoState}
+            geoError={geoError}
+            autosuggest={autosuggest}
+            viewSwitch={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 +792,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,77 +805,7 @@ 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>
-        )}
-
-        {isSearchActive && (
-          <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>}
-            {searchParams.get('school_type') && <span className={styles.filterChip}>{searchParams.get('school_type')}</span>}
-          </div>
-        )}
+        {hasSearch && !isMapView && resultsHeader}
 
         {initialSchools.schools.length === 0 && isSearchActive ? (
           <EmptyState
@@ -675,77 +818,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 +896,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/Modal.module.css

@@ -5,7 +5,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  /* Above the pinned results toolbar (1001), the floating List/Map button
+     (1002) and the comparison toast (2000): a modal covers the page. */
+  z-index: 2100;
   padding: 1rem;
   animation: fadeIn 0.2s ease;
 }
@@ -31,6 +33,10 @@
   border: 1px solid var(--border);
 }
 
+.modal:focus {
+  outline: none;
+}
+
 @keyframes slideIn {
   from {
     transform: translateY(-20px);
@@ -96,6 +102,14 @@
   flex: 1;
 }
 
+/* Clears the iPhone home indicator when the modal is a bottom sheet. */
+.footer {
+  flex-shrink: 0;
+  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--border);
+  background: var(--bg-card);
+}
+
 /* Scrollbar styles */
 .content::-webkit-scrollbar {
   width: 8px;

nextjs-app/components/Modal.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import { useEffect, useCallback, useRef } from 'react';
+import { useEffect, useCallback, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Modal.module.css';
 
@@ -15,10 +15,14 @@ interface ModalProps {
   children: React.ReactNode;
   title?: string;
   size?: 'small' | 'medium' | 'large';
+  /** Pinned below the scrolling content, so its actions stay in reach. */
+  footer?: React.ReactNode;
 }
 
-export function Modal({ isOpen, onClose, children, title, size = 'medium' }: ModalProps) {
+export function Modal({ isOpen, onClose, children, title, size = 'medium', footer }: ModalProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
 
   const handleEscape = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') {
@@ -41,6 +45,17 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
     };
   }, [isOpen, handleEscape]);
 
+  // Focus moves into the dialog when it opens and back to whatever opened it
+  // when it closes. A child that has already taken focus (an autoFocus input)
+  // keeps it: children's effects run before this one.
+  useEffect(() => {
+    if (!isOpen) return;
+    const opener = document.activeElement as HTMLElement | null;
+    const dialog = dialogRef.current;
+    if (dialog && !dialog.contains(document.activeElement)) dialog.focus();
+    return () => opener?.focus?.();
+  }, [isOpen]);
+
   // Pin the overlay to the VISUAL viewport, not the layout viewport. On mobile
   // the on-screen keyboard shrinks the visual viewport but not the layout one,
   // so a `position: fixed; inset: 0` overlay keeps full height — leaving the
@@ -77,9 +92,16 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
 
   return createPortal(
     <div ref={overlayRef} className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={`${styles.modal} ${styles[size]}`}>
+      <div
+        ref={dialogRef}
+        className={`${styles.modal} ${styles[size]}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+        tabIndex={-1}
+      >
         <div className={styles.header}>
-          {title && <h2 className={styles.title}>{title}</h2>}
+          {title && <h2 id={titleId} className={styles.title}>{title}</h2>}
           <button
             className={styles.closeButton}
             onClick={onClose}
@@ -103,6 +125,7 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
         <div className={styles.content}>
           {children}
         </div>
+        {footer && <div className={styles.footer}>{footer}</div>}
       </div>
     </div>,
     document.body

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

@@ -0,0 +1,48 @@
+'use client';
+
+/**
+ * The per-card basket toggle.
+ *
+ * The links around it are server-rendered, so the section works with JS off;
+ * this adds the basket interaction on top rather than being what makes the
+ * section function.
+ */
+
+import { useComparisonContext } from '@/context/ComparisonContext';
+import type { School, NearbySchool } from '@/lib/types';
+import styles from './NearbySchools.module.css';
+
+export function AddToCompareButton({ school }: { school: NearbySchool }) {
+  const { addSchool, removeSchool, selectedSchools } = useComparisonContext();
+  const selected = selectedSchools.some((s) => s.urn === school.urn);
+
+  const toggle = () => {
+    if (selected) {
+      removeSchool(school.urn);
+      return;
+    }
+    // The basket only needs identity and display fields; the compare page
+    // fetches everything it renders by URN.
+    addSchool({
+      urn: school.urn,
+      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);
+  };
+
+  return (
+    <button
+      type="button"
+      className={styles.add}
+      onClick={toggle}
+      aria-pressed={selected}
+    >
+      {selected ? '✓ Added to compare' : '+ Add to compare'}
+      <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/NearbySchools.module.css

@@ -0,0 +1,64 @@
+.heading { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.4px; margin: 0; }
+.lede { margin: 0.5rem 0 1.25rem; color: var(--text-secondary); max-width: 64ch; }
+.caption { margin: 1rem 0 0; font-size: 0.72rem; color: var(--text-muted); }
+
+.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
+.arrows { display: flex; gap: 0.5rem; flex: none; }
+.arrow { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--brand); }
+.arrow:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-bg); }
+.arrow:disabled { opacity: 0.35; cursor: default; }
+.arrow svg { width: 17px; height: 17px; }
+
+/* A scroller, not a paginated view: every card is in the DOM and the arrows
+   only move the viewport across them. The 2px padding keeps focus rings from
+   being clipped — and is why the arrows' edge test needs a tolerance. */
+.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.8rem) / 3); gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px; margin: -2px; list-style: none; scrollbar-width: none; -ms-overflow-style: none; }
+.scroller::-webkit-scrollbar { display: none; }
+@media (max-width: 820px) { .scroller { grid-auto-columns: calc((100% - 0.9rem) / 2); } }
+/* Touch widths (MOBILE.md): the arrows would take 96px from a 328px card and
+   crush the lede into four lines, for a control swiping already provides. They
+   go, and the documented right-edge fade carries the affordance — lifting at
+   the end of the travel, where there is nothing more to hint at. */
+@media (max-width: 640px) {
+  .top { display: block; }
+  .arrows { display: none; }
+  .scroller { grid-auto-columns: 86%; mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
+  .scroller[data-at-end="true"] { mask-image: none; }
+}
+
+.school { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; border: 1px solid var(--border); border-radius: 8px; padding: 1rem; background: var(--bg-card); }
+.school:hover { border-color: var(--border-strong); }
+
+.distance { margin: 0 0 0.6rem; font-size: 0.75rem; color: var(--text-muted); }
+.name { font-family: var(--font-display); font-size: 1rem; line-height: 1.35; margin: 0 0 0.35rem; }
+.name a { color: var(--text-primary); text-decoration: none; }
+/* The whole card is the link target; the button sits above it on z-index. */
+.name a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
+.name a:hover { color: var(--brand); text-decoration: underline; }
+.meta { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--text-muted); }
+
+.shared { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 0.85rem; padding: 0; }
+.chip { font-size: 0.72rem; line-height: 1.4; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--brand-bg); color: var(--brand); border: 1px solid transparent; }
+
+.metric { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--border); }
+/* No valence colour here, deliberately: green and terracotta mean "against the
+   England average" everywhere else on the site, and colouring a neighbour
+   against this school would read as ranking the neighbours. */
+.value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.6px; margin: 0; color: var(--text-primary); }
+.valueAbsent { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--text-muted); }
+.metricLabel { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }
+.metricRef { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--text-muted); }
+
+.add { position: relative; z-index: 1; margin-top: 0.85rem; width: 100%; min-height: 44px; font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--brand); }
+.add:hover { border-color: var(--brand); background: var(--brand-bg); }
+.add[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-bg); font-weight: 600; }
+
+.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
+.footer p { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
+.footer strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
+/* Coral is the one decisive action per screen, and in this section this is it. */
+.compare { min-height: 44px; padding: 0 1.25rem; border-radius: 8px; font-size: 0.88rem; font-weight: 600; background: var(--action); color: var(--action-on); border: 1px solid var(--action); text-decoration: none; display: inline-flex; align-items: center; }
+.compare:hover { background: var(--action-strong); border-color: var(--action-strong); }
+.compare[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

nextjs-app/components/school/NearbySchoolsCarousel.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+/**
+ * The scroller and its arrows.
+ *
+ * `children` are the server-rendered cards and `header` the server-rendered
+ * heading and lede: both stay server components, passed through, so this file
+ * owns a DOM ref and nothing else. That is what keeps all six links in the
+ * initial HTML — a carousel that mounted cards on click would put four of the
+ * six beyond a crawler and beyond a reader with no JavaScript.
+ *
+ * With JavaScript off this degrades to a horizontally scrollable row, which is
+ * still usable by touch and trackpad.
+ */
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import styles from './NearbySchools.module.css';
+
+/** Three cards fit the row, so fewer than four has nowhere to scroll to.
+ *  Below 640px the arrows are not rendered at all — see the stylesheet. */
+const VISIBLE = 3;
+
+/**
+ * Why a tolerance rather than `=== 0`.
+ *
+ * The scroller carries 2px of padding so focus rings are not clipped, and
+ * scroll-snap treats that padding as the first card's snap position — a row at
+ * rest reports scrollLeft 2, not 0. Sub-pixel rounding moves it again at other
+ * zoom levels. An exact test leaves the back arrow live on first paint,
+ * pointing nowhere.
+ */
+const EDGE = 8;
+
+export function NearbySchoolsCarousel({
+  count,
+  labelledBy,
+  header,
+  children,
+}: {
+  count: number;
+  labelledBy: string;
+  header: ReactNode;
+  children: ReactNode;
+}) {
+  const scroller = useRef<HTMLUListElement>(null);
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(false);
+  const scrollable = count > VISIBLE;
+
+  const sync = useCallback(() => {
+    const node = scroller.current;
+    if (!node) return;
+    const max = node.scrollWidth - node.clientWidth;
+    setAtStart(node.scrollLeft <= EDGE);
+    setAtEnd(node.scrollLeft >= max - EDGE);
+  }, []);
+  // `atEnd` is not only the forward arrow's disabled state: below 640px, where
+  // no arrow is rendered, it is the only thing driving the scroll-fade.
+
+  // Also on mount: the first measurement can only happen once there is layout.
+  useEffect(sync, [sync]);
+
+  const page = (direction: 1 | -1) => {
+    const node = scroller.current;
+    if (!node) return;
+    // A page is what the reader can see, so the viewport is the step.
+    node.scrollBy({ left: direction * node.clientWidth, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <div className={styles.top}>
+        {header}
+        {scrollable && (
+          <div className={styles.arrows}>
+            <button
+              type="button"
+              className={styles.arrow}
+              onClick={() => page(-1)}
+              disabled={atStart}
+              aria-label="Previous schools"
+            >
+              <Chevron direction="prev" />
+            </button>
+            <button
+              type="button"
+              className={styles.arrow}
+              onClick={() => page(1)}
+              disabled={atEnd}
+              aria-label="More schools"
+            >
+              <Chevron direction="next" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <ul
+        ref={scroller}
+        className={styles.scroller}
+        onScroll={sync}
+        data-at-end={atEnd}
+        {...(scrollable
+          ? { tabIndex: 0, role: 'group', 'aria-labelledby': labelledBy }
+          : {})}
+      >
+        {children}
+      </ul>
+    </>
+  );
+}
+
+function Chevron({ direction }: { direction: 'prev' | 'next' }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={direction === 'prev' ? 'M15 18l-6-6 6-6' : 'M9 18l6-6-6-6'} />
+    </svg>
+  );
+}

nextjs-app/components/school/NearbySchoolsCompareBar.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+/**
+ * The selection count and the one decisive action in the section.
+ *
+ * The CTA is a real link, not a handler: /compare already parses `urns` from
+ * the query string, so the hand-off needs no new compare plumbing. It counts
+ * this school plus whatever the reader ticked, because comparing a shortlist
+ * without the school they are looking at is not what they asked for.
+ */
+
+import Link from 'next/link';
+import { useComparisonContext } from '@/context/ComparisonContext';
+import type { NearbySchool } from '@/lib/types';
+import styles from './NearbySchools.module.css';
+
+export function NearbySchoolsCompareBar({
+  thisUrn,
+  candidates,
+}: {
+  thisUrn: number;
+  candidates: NearbySchool[];
+}) {
+  const { selectedSchools } = useComparisonContext();
+
+  // Only the schools this section offers, in the order the cards show them —
+  // the basket may hold schools picked up elsewhere on the site, and this bar
+  // speaks for this section.
+  const offered = candidates
+    .map((c) => c.urn)
+    .filter((urn) => selectedSchools.some((s) => s.urn === urn));
+
+  const count = offered.length;
+  const href = `/compare?urns=${[thisUrn, ...offered].join(',')}`;
+
+  return (
+    <div className={styles.footer}>
+      <p aria-live="polite">
+        <strong>
+          {count
+            ? `${count} school${count === 1 ? '' : 's'} selected`
+            : 'Compare side by side'}
+        </strong>
+        {count
+          ? 'This school is included automatically.'
+          : 'Add a school to compare it with this one.'}
+      </p>
+      {count ? (
+        <Link className={styles.compare} href={href}>
+          Compare {count + 1} schools →
+        </Link>
+      ) : (
+        <span className={styles.compare} aria-disabled="true">
+          Compare →
+        </span>
+      )}
+    </div>
+  );
+}

nextjs-app/components/school/NearbySchoolsSection.tsx

@@ -0,0 +1,152 @@
+/**
+ * NearbySchoolsSection — the nearest eligible schools, closest first. Server
+ * component; only the carousel, the compare bar and the add-to-compare button
+ * are client-side.
+ *
+ * "Other schools nearby", not "similar" ones: the order is distance and only
+ * distance. The hard filters upstream still guarantee the set is comparable —
+ * same phase, same selectivity, mainstream never beside special — but nothing
+ * here ranks by how alike two schools are, so the heading does not say it does.
+ *
+ * The chips report what a school shares, and may be absent entirely. That is
+ * information for the reader to weigh, not a verdict this section has already
+ * reached on their behalf.
+ *
+ * There is deliberately no "how these are chosen" panel: the method is already
+ * visible in the lede, the chips and the distances. The single caption line is
+ * not a method note — it is the one thing a card cannot self-correct.
+ */
+
+import Link from 'next/link';
+import type { NearbySchool } from '@/lib/types';
+import { schoolUrl } from '@/lib/utils';
+import { AddToCompareButton } from './AddToCompareButton';
+import { NearbySchoolsCarousel } from './NearbySchoolsCarousel';
+import { NearbySchoolsCompareBar } from './NearbySchoolsCompareBar';
+import { Section } from './sectionShared';
+import styles from './NearbySchools.module.css';
+
+const MINIMUM = 2;
+
+export function shouldRenderNearby(nearby?: NearbySchool[] | null): boolean {
+  return (nearby?.length ?? 0) >= MINIMUM;
+}
+
+/**
+ * What the lede calls the set of schools it is showing.
+ *
+ * Derived from the school's own GIAS phase rather than the template it renders
+ * with, because those disagree for "16 plus" (GIAS phase 6): a sixth-form
+ * college renders the primary template — computeSchoolFlags tests for the
+ * substring "secondary" — while the backend correctly matches it against the
+ * secondary group. Taking the noun from the template would print "Other primary
+ * schools near <sixth form college>" above a row of secondaries.
+ *
+ * A 16-plus school's candidates span the whole secondary group, so no single
+ * noun fits and it gets the honest general one.
+ */
+export function nearbyNoun(phase: string | null | undefined): string {
+  const text = (phase ?? '').trim().toLowerCase();
+  if (text === 'all-through') return 'all-through schools';
+  if (text === '16 plus') return 'schools and colleges';
+  if (text.includes('secondary')) return 'secondary schools';
+  if (text.includes('primary')) return 'primary schools';
+  return 'schools';
+}
+
+function metricLabel(key: string): string {
+  return key === 'attainment_8_score' ? 'Attainment 8' : 'Reading, writing & maths';
+}
+
+function formatMetric(value: number | null, key: string): string {
+  if (value == null) return 'Not published';
+  return key === 'attainment_8_score' ? value.toFixed(1) : `${Math.round(value)}%`;
+}
+
+export function NearbySchoolsSection({
+  urn,
+  schoolName,
+  phase,
+  thisMetricValue,
+  nearby,
+}: {
+  urn: number;
+  schoolName: string;
+  /** The school's own GIAS phase, not the template it renders with. */
+  phase: string | null | undefined;
+  thisMetricValue: number | null;
+  nearby?: NearbySchool[] | null;
+}) {
+  if (!shouldRenderNearby(nearby)) return null;
+  const schools = nearby as NearbySchool[];
+
+  // One card matched on phase alone, so the section may not claim the set
+  // shares an intake with this school.
+  const metricKey = schools[0].metric_key;
+  const noun = nearbyNoun(phase);
+
+  return (
+    <Section id="nearby">
+      <NearbySchoolsCarousel
+        count={schools.length}
+        labelledBy="nearby-schools-heading"
+        header={
+          <div>
+            <h2 id="nearby-schools-heading" className={styles.heading}>
+              Other schools nearby
+            </h2>
+            <p className={styles.lede}>{`Other ${noun} near ${schoolName}.`}</p>
+          </div>
+        }
+      >
+        {schools.map((school) => (
+          <li key={school.urn} className={styles.school}>
+            <p className={styles.distance}>{school.distance_miles} miles away</p>
+            <h3 className={styles.name}>
+              <Link href={schoolUrl(school.urn, school.school_name)}>
+                {school.school_name}
+              </Link>
+            </h3>
+            <p className={styles.meta}>
+              {[school.school_type, school.age_range && `Ages ${school.age_range}`]
+                .filter(Boolean)
+                .join(' · ')}
+            </p>
+            {school.shared.length > 0 && (
+              <ul className={styles.shared}>
+                {school.shared.map((label) => (
+                  <li key={label} className={styles.chip}>{label}</li>
+                ))}
+              </ul>
+            )}
+            <div className={styles.metric}>
+              <p
+                className={
+                  school.metric_value == null ? styles.valueAbsent : styles.value
+                }
+              >
+                {formatMetric(school.metric_value, school.metric_key)}
+              </p>
+              <p className={styles.metricLabel}>{metricLabel(school.metric_key)}</p>
+              {thisMetricValue != null && (
+                <p className={styles.metricRef}>
+                  {formatMetric(thisMetricValue, metricKey)} at this school
+                </p>
+              )}
+            </div>
+            <AddToCompareButton school={school} />
+          </li>
+        ))}
+      </NearbySchoolsCarousel>
+
+      <NearbySchoolsCompareBar thisUrn={urn} candidates={schools} />
+
+      {/* The one caveat the cards cannot make on their own: a reader who takes
+          "0.6 miles away" for the walk has been misled, and nothing else here
+          corrects that. */}
+      <p className={styles.caption}>
+        Distances are straight-line from this school, not road distance.
+      </p>
+    </Section>
+  );
+}

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/PrimarySchoolSections.tsx

@@ -14,6 +14,7 @@
 import type {
   School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
   SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
+  NearbySchool,
 } from '@/lib/types';
 import { ofstedLegacyAreas } from '@/lib/utils';
 import type { SchoolFlags } from '@/lib/schoolSections';
@@ -26,6 +27,7 @@ import { HistorySection } from './HistorySection';
 import { SchoolLifeSection } from './SchoolLifeSection';
 import { LocalAreaSection } from './LocalAreaSection';
 import { FinancesSection } from './FinancesSection';
+import { NearbySchoolsSection } from './NearbySchoolsSection';
 
 export interface PrimarySchoolSectionsProps {
   schoolInfo: School;
@@ -39,13 +41,15 @@ export interface PrimarySchoolSectionsProps {
   deprivation: SchoolDeprivation | null;
   finance: SchoolFinance | null;
   nationalAvg: NationalAverages | null;
+  /** Nearby schools of a comparable intake. Absent on an older API build. */
+  nearbySchools?: NearbySchool[];
   flags: SchoolFlags;
 }
 
 export function PrimarySchoolSections({
   schoolInfo, yearlyData, absenceData, ofsted, census,
   admissions, admissionsHistory, admissionDistance,
-  deprivation, finance, nationalAvg, flags,
+  deprivation, finance, nationalAvg, nearbySchools, flags,
 }: PrimarySchoolSectionsProps) {
   const primaryAvg = nationalAvg?.primary ?? {};
   const secondaryAvg = nationalAvg?.secondary ?? {};
@@ -146,6 +150,15 @@ export function PrimarySchoolSections({
       )}
 
       {flags.hasFinance && finance && <FinancesSection finance={finance} />}
+
+      {/* Last: it is where the reader goes next, not part of this school. */}
+      <NearbySchoolsSection
+        urn={schoolInfo.urn}
+        schoolName={schoolInfo.school_name}
+        phase={schoolInfo.phase}
+        thisMetricValue={flags.latestResults?.rwm_expected_pct ?? null}
+        nearby={nearbySchools}
+      />
     </>
   );
 }

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/SecondarySchoolSections.tsx

@@ -14,7 +14,7 @@
 import type {
   School, SchoolResult, AbsenceData, OfstedInspection, SchoolCensus,
   SchoolAdmissions, SchoolAdmissionDistance, SchoolDeprivation, SchoolFinance, NationalAverages,
-  SchoolDestinations,
+  SchoolDestinations, NearbySchool,
 } from '@/lib/types';
 import { ofstedLegacyAreas } from '@/lib/utils';
 import type { SecondaryFlags } from '@/lib/schoolSections';
@@ -27,6 +27,7 @@ import { DistanceSection } from './DistanceSection';
 import { SecondaryHistorySection } from './SecondaryHistorySection';
 import { WellbeingSection } from './WellbeingSection';
 import { FinancesSection } from './FinancesSection';
+import { NearbySchoolsSection } from './NearbySchoolsSection';
 import styles from './schoolSections.module.css';
 
 export interface SecondarySchoolSectionsProps {
@@ -47,13 +48,15 @@ export interface SecondarySchoolSectionsProps {
   finance: SchoolFinance | null;
   nationalAvg: NationalAverages | null;
   destinations: SchoolDestinations | null;
+  /** Nearby schools of a comparable intake. Absent on an older API build. */
+  nearbySchools?: NearbySchool[];
   flags: SecondaryFlags;
 }
 
 export function SecondarySchoolSections({
   schoolInfo, yearlyData, ofsted, census,
   admissions, admissionsHistory, admissionDistance,
-  deprivation, finance, nationalAvg, destinations, flags,
+  deprivation, finance, nationalAvg, destinations, nearbySchools, flags,
 }: SecondarySchoolSectionsProps) {
   const secondaryAvg = nationalAvg?.secondary ?? {};
 
@@ -141,6 +144,15 @@ export function SecondarySchoolSections({
       {flags.hasFinance && finance && (
         <FinancesSection finance={finance} showPremises />
       )}
+
+      {/* Last: it is where the reader goes next, not part of this school. */}
+      <NearbySchoolsSection
+        urn={schoolInfo.urn}
+        schoolName={schoolInfo.school_name}
+        phase={schoolInfo.phase}
+        thisMetricValue={flags.latestResults?.attainment_8_score ?? null}
+        nearby={nearbySchools}
+      />
     </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/schoolSections.ts

@@ -128,6 +128,10 @@ export interface NavItemsInput {
    *  measure a postcode, so the nav must gate on them too or it will link to an
    *  anchor that was never rendered. */
   hasLocation?: boolean;
+  /** Whether the nearby-schools section will render. Optional for the same
+   *  reason hasLocation is: the nav must never link to an anchor that was not
+   *  rendered, and absent has to mean "no section". */
+  hasNearbySchools?: boolean;
   yearlyDataLength: number;
 }
 
@@ -142,7 +146,10 @@ export interface NavItemsInput {
  */
 export function buildNavItems(
   flags: SchoolFlags,
-  { ofsted, admissions, admissionDistance, hasLocation, yearlyDataLength }: NavItemsInput,
+  {
+    ofsted, admissions, admissionDistance, hasLocation,
+    hasNearbySchools, yearlyDataLength,
+  }: NavItemsInput,
 ): NavItem[] {
   const navItems: NavItem[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
@@ -161,6 +168,8 @@ export function buildNavItems(
   if (flags.hasSchoolLife) navItems.push({ id: 'school-life', label: 'School Life' });
   if (flags.hasDeprivation) navItems.push({ id: 'local-area', label: 'Local Area' });
   if (flags.hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
+  // Last, because the section renders last — the scroll-spy reads this order.
+  if (hasNearbySchools) navItems.push({ id: 'nearby', label: 'Nearby schools' });
   return navItems;
 }
 
@@ -239,7 +248,10 @@ export function computeSecondaryFlags({
  */
 export function buildSecondaryNavItems(
   flags: SecondaryFlags,
-  { ofsted, admissions, admissionDistance, hasLocation, yearlyDataLength }: NavItemsInput,
+  {
+    ofsted, admissions, admissionDistance, hasLocation,
+    hasNearbySchools, yearlyDataLength,
+  }: NavItemsInput,
 ): NavItem[] {
   const navItems: NavItem[] = [];
   if (ofsted) navItems.push({ id: 'ofsted', label: 'Ofsted' });
@@ -257,5 +269,7 @@ export function buildSecondaryNavItems(
   if (yearlyDataLength > 1) navItems.push({ id: 'history', label: 'History' });
   if (flags.hasWellbeing) navItems.push({ id: 'wellbeing', label: 'Wellbeing' });
   if (flags.hasFinance) navItems.push({ id: 'finances', label: 'Finances' });
+  // Last, because the section renders last — the scroll-spy reads this order.
+  if (hasNearbySchools) navItems.push({ id: 'nearby', label: 'Nearby schools' });
   return navItems;
 }