Merge branch 'main' into fix/gias-blank-name-codes

2026-07-16 09:14:42 +00:00
parent 493ea39c29 d98e88f0b4
commit 404ba95275
74 changed files with 8558 additions and 1071 deletions
@@ -0,0 +1,177 @@
+# Compare Screen Redesign — Expert Data Review
+
+**Date:** 2026-07-11
+**Reviewer:** subagent briefed as an English education-standards / DfE-Ofsted data expert
+**Subject:** desktop + mobile compare mockups and the redesign spec
+(`2026-07-11-compare-screen-redesign-design.md`)
+**Status:** first-pass must-fixes applied 2026-07-12; second-pass
+findings (below) applied 2026-07-12 — mockups + spec §4/§8 updated
+
+## Must-fix
+
+1. **COVID gap is wrong and drops a real results year.** KS2 tests were
+   cancelled 2019/20 and 2020/21 only; they resumed in 2021/22 with
+   published school-level results (England RWM ≈ 59%). The mockup charts
+   omit 2021/22 entirely and the tooltip claims no tests were held
+   2019/20–2021/22. Fix: add 2021/22 to axis and all series; shrink the
+   gap band; optionally annotate 2021/22 with DfE's post-pandemic
+   comparability caution.
+2. **Report-card at-a-glance summary miscounts areas.** Detail list has
+   4 Strong / 2 Expected / 1 Attention needed + Safeguarding met, but
+   the summary says "3 areas Expected standard" — it counts safeguarding
+   as a graded area. Safeguarding is a separate binary judgement and
+   must be excluded from rating counts.
+3. **"Where the offers went" derivation is unsound.** Places − 1st-pref
+   offers ≠ "second or third choices": the residual can include 4th–6th
+   preference offers (pan-London scheme) and LA-allocated children who
+   didn't choose the school; and offers don't necessarily equal PAN.
+   Use the real 2nd/3rd-preference fields being promoted from
+   `raw.ees_admissions`; until then drop the row.
+4. **Ofsted timeline in the copy is wrong.** Overall grades were
+   abolished September 2024, not November 2025; Sept 2024–Nov 2025
+   inspections kept the four key judgements without an overall grade
+   (ungraded inspections carried grades forward). Neither mockup shows
+   the interim regime, which will dominate real comparisons. Fix copy
+   and add an interim example.
+5. **Barclay's "published an overall grade only — no area-by-area
+   detail" misdescribes inspections.** No inspection type does that; a
+   2021 graded inspection necessarily had subgrades — the gap is in our
+   dataset. If it was an ungraded (s8) inspection, "Outstanding" is a
+   carried-forward grade and should say so. Fix: "We don't hold
+   area-by-area detail for this inspection", and distinguish graded vs
+   ungraded in the data model.
+
+## Should-fix
+
+6. Writing is teacher assessment, not a test — "national tests and
+   teacher assessments"; note TA caveat on the Writing strip.
+7. Verify renewed-framework wording against Ofsted's final toolkit:
+   likely "Needs attention" (not "Attention needed") and "Personal
+   development and well-being" (which otherwise collides with the
+   identically-named legacy judgement). Pin every label to the
+   published toolkit.
+8. "Expected standard" now means two things on one page (Ofsted area
+   rating vs KS2 measure) — disambiguate in tooltips.
+9. Disadvantaged row: DfE definition includes looked-after / previously
+   looked-after children, not just FSM6; benchmark labels inconsistent
+   across desktop/mobile; subgroup percentages need cohort sizes or a
+   volatility threshold before chips are attached.
+10. "Trend, last 7 years" spans ten years; sparklines render the COVID
+    gap as equal spacing (the exact defect the audit criticises) and
+    "Improved: 52% → 87%" endpoint-cherry-picks a volatile series.
+11. At-a-glance "Getting a place" uses different metrics per school
+    (Barclay is also oversubscribed on total preferences but shows a
+    green chip). Standardise on first-preference success %. Explain the
+    equal-preference rule; condition "living close by matters" on the
+    school's actual oversubscription criteria.
+12. "457 applications for 180 places" = total preferences at any rank,
+    not head-to-head applicants; lead with first preferences vs places.
+    Add offers-vs-final-intake (waiting lists/appeals) caveat.
+13. Elmhurst's subgrade list is likely missing Early years provision
+    (school has a nursery) — possible pipeline gap.
+14. "Ofsted rating" label is obsolete post-Sept-2024 — use "Latest
+    Ofsted inspection"; check whether Oct 2021 is the latest inspection
+    or merely the latest graded one.
+15. SEN: "EHCP plans" is redundant; 28% SEN support often indicates
+    resourced provision — add a note; England SEN-support ≈ 14%, not 13%.
+
+## Nice-to-have
+
+16. Consistent labelling of official DfE vs dataset-computed benchmarks
+    (and medians shouldn't be called averages inconsistently).
+17. England 2015/16 RWM (53%) exists in DfE publications — the null is
+    a dataset gap; source it or the England line looks broken.
+18. "1 in 4 first choices missed out" — actually more than 1 in 4.
+19. "1,273 of 1,260 places (full)" is over capacity; capacity figures
+    are often stale — say "at or above capacity".
+20. State the actual suppression rule (DfE: ≤5 pupils suppressed,
+    small numbers rounded) instead of "a handful".
+21. Spec §4.3 progress chips can't exist for displayed years: KS2
+    progress ended with 2022/23 (no KS1 baseline) and returns
+    ~2027/28 with the reception baseline. Make explicit in the spec.
+    IDACI (spec §4.5) is absent from mockups; if shipped, caveat it
+    describes pupils' neighbourhoods, not the school.
+22. Tooltips should give the official term "first preference" alongside
+    the plain-English "first choice".
+
+## Overall assessment (verbatim gist)
+
+The bones are genuinely good by education-data standards —
+England-average anchoring, explicit non-comparability messaging across
+Ofsted regimes, refusal to synthesise an overall grade, time-true
+x-axis, neutral FSM/EAL framing — better than most commercial
+school-comparison sites. But items 1–5 are outright factual errors or
+misdescriptions that a well-informed parent or Ofsted would catch;
+the admissions section needs the most conceptual work (equal
+preference, preferences-vs-applicants, offers-vs-intake). Fix 1–5
+before user testing; the rest fold into the planned PRs.
+
+---
+
+# Second-pass review (2026-07-12)
+
+Same reviewer, after the must-fixes and the new three-tier metric
+exposure model were applied.
+
+## Verification of first-pass must-fixes
+
+- **1 (COVID/2021/22): resolved.** Time-true axis, band covers only the
+  cancelled years, England 58.7% consistent with official figures,
+  dataset gaps break lines honestly; reading/maths England series all
+  match published figures; RWM ≤ min(subject) checks pass.
+- **2 (report-card count): resolved** — safeguarding excluded, spec §8.2.
+- **3 (offers derivation): resolved** — row removed, spec §8.3 bans it.
+- **4 (Ofsted timeline): resolved on desktop; mobile omits the interim
+  regime clause** (see finding 6).
+- **5 (Barclay explanation): resolved.**
+
+## New findings
+
+1. **Should-fix — scaled-score strip domain contradicts caption.**
+   Caption says "scaled scores run 80–120", strips render 100–120;
+   truncated domain exaggerates small gaps and below-100 averages
+   would fall off the edge. Render 80–120, or caption the 100–120
+   window honestly and define below-100 behaviour.
+2. **Should-fix — scaled-score England ticks (106/105/105) unsourced.**
+   Plausible but hand-entered; verify against DfE 2024/25 tables and
+   add loading official England scaled scores to the pipeline list
+   (absent from §8.1/§8.6).
+3. **Should-fix — "Writing" listed under "Higher standard" in the
+   picker.** Writing TA outcome is "greater depth" (GDS), never
+   "higher standard". Label "Writing — greater depth (teacher
+   assessment)"; tooltip the combined higher-standard composition.
+4. Nice — "grammar & punctuation" summary line drops "spelling" (GPS).
+5. Nice — science is teacher-assessed (no KS2 test since 2009) and
+   coarse; tooltip it like writing; reconsider its tier-2 slot.
+6. **Should-fix — mobile Ofsted copy skips the interim regime**
+   (Sept 2024–Nov 2025) that desktop explains. One clause fixes it.
+7. **Should-fix — benchmark provenance still inconsistent** (EAL
+   tooltip unsourced; FSM/disadvantaged chips vs tooltips use three
+   vocabularies; header note says all England averages are official).
+   Adopt one house style: official = "England average", computed =
+   "benchmark / typical state school (our dataset)". Also tighten EAL
+   definition to census wording ("first language known or believed to
+   be other than English").
+8. Nice — "community primaries" distance note attached to an academy
+   (Elmhurst); say "non-faith primaries" or condition on policy field.
+9. Nice — "Improving since 2022" → "since 2022/23".
+10. Nice — England chart tooltips show decimals; §7 mandates whole
+    percents.
+
+## Residual gaps not covered by spec §8
+
+11. Spec promises IDACI-in-words, Attendance section, and tier-2
+    gender/absence that the mockups never show — mark post-v1 or
+    demonstrate, so implementation scope is unambiguous.
+12. Add official England scaled-score averages to the pipeline task
+    list.
+13. Add the writing/greater-depth terminology rule to §8.7.
+
+## Verdict
+
+All must-fixes genuinely resolved; the tier model is conceptually
+sound ("no measure is lost", honest dataset-gap breaks, grouped
+picker). Remaining issues are contained: one internal contradiction
+(80–120 vs 100–120), one provenance inconsistency, one terminology
+error (writing/GDS). With findings 1–3 and 6–7 addressed, the data
+framing is fit to put in front of parents.
@@ -0,0 +1,324 @@
+# Compare Screen Redesign — Audit & Design
+
+**Date:** 2026-07-11
+**Status:** Draft — awaiting review
+**Scope:** `/compare` page (nextjs-app), `/api/compare` endpoint (backend)
+
+## 1. Audit of the current screen
+
+The current compare page (`nextjs-app/components/ComparisonView.tsx`) is a
+single-metric analyst tool: a `<select>` with ~40 KS2/GCSE metrics, one
+line chart over time, and a year-by-year table — all for the one selected
+metric. Observed on production with 3 primary schools:
+
+**What works**
+
+- URL-shareable state (`?urns=…&metric=…`), native share sheet.
+- Phase tabs (primary/secondary) with sensible auto-detection.
+- Colour-coded school cards tied to chart series.
+- Metric descriptions from `/api/metrics` (single source of truth).
+
+**What doesn't**
+
+1. **Performance-only.** The database already holds Ofsted inspections,
+   admissions/oversubscription history, pupil characteristics (FSM/EAL),
+   SEN, deprivation (IDACI), finance, capacity, faith, gender, trust —
+   none of it reaches the compare screen. `/api/compare` returns only
+   `yearly_data` + minimal `school_info`, while `/api/schools/{urn}`
+   already returns all supplementary blocks.
+2. **One metric at a time.** A parent must know which of ~40 metrics
+   matters, select each in turn, and hold results in their head. There is
+   no side-by-side overview and no way to see two dimensions at once.
+3. **No benchmarks.** Numbers float without anchors: is 79% RWM good?
+   The DB has official national averages (`fact_ks2_national_averages`)
+   but the page never shows them.
+4. **Domain jargon untranslated.** "GPS Expected %", "Progress scores",
+   "RWM Combined" assume DfE literacy. The only plain-English help is one
+   note for progress scores.
+5. **Raw numbers, no judgement support.** 87.0% vs 92.0% vs 79.0% — the
+   page never says "all three are well above the England average of 62%",
+   which is the fact a parent actually needs.
+6. **Bugs/paper cuts observed:** the third school's series did not render
+   on the production chart despite table data (worth a separate fix);
+   the COVID gap (2018/19 → 2022/23) renders as equal spacing with no
+   annotation; table shows "87.0%" precision that implies false accuracy.
+
+## 2. Data inventory (available vs shown)
+
+| Domain | Source table | On detail page | On compare |
+|---|---|---|---|
+| KS2 attainment/progress | fact_ks2_performance | yes | **yes** (only thing shown) |
+| National averages | fact_ks2_national_averages | partial | no |
+| Ofsted (latest + subgrades + report-card fields) | fact_ofsted_inspection, dim_school | yes | no |
+| Admissions & oversubscription (multi-year) | fact_admissions | yes | no |
+| Pupil characteristics (FSM, EAL, gender split) | fact_pupil_characteristics | yes | no |
+| Context (SEN, disadvantaged, stability, absence) | fact_ks2_performance | via metric picker | buried in picker |
+| Deprivation (IDACI) | fact_deprivation | yes | no |
+| Finance (per-pupil spend) | fact_finance | yes | no |
+| School facts (capacity, faith, ages, trust, nursery, gender) | dim_school | yes | no |
+| Location/distance | dim_location | map | no |
+
+## 3. Design goals
+
+1. **Answer parent questions, in order:** Is it a good school (Ofsted)?
+   Do children do well there (academics vs England)? Will my child get a
+   place (admissions)? What is the school like (size, community, faith)?
+2. **Every number gets an anchor** — the England average, rendered as a
+   consistent visual tick, plus a plain-English chip
+   (Above / Close to / Below England average).
+3. **Plain English first, jargon on demand.** Labels are questions or
+   sentences ("Children reaching the expected standard in reading,
+   writing and maths"), codes/acronyms live in tooltips.
+4. **Scan whole-picture first, drill down second.** The single-metric
+   trend explorer survives, demoted to an "Explore trends" section at the
+   bottom rather than being the entire page.
+
+## 4. Proposed structure
+
+Columns = schools (max 4 visible on desktop, horizontal scroll beyond),
+rows = dimensions. Sticky compact school header keeps column identity
+while scrolling. Sections, in order:
+
+1. **At a glance** — verdict row per school: Ofsted badge, headline
+   attainment vs England (dot strip + chip), oversubscription chip,
+   size, distance (when a location is set).
+2. **Ofsted inspection** — must handle all three inspection regimes,
+   which will coexist in comparisons for years:
+   - **Legacy graded (pre-Sept 2024):** overall grade badge
+     (Outstanding/Good/Requires improvement/Inadequate). Subgrades,
+     where published, are rendered in the **same area-by-rating chip
+     list UX as report cards** (one row per judgement area, rating as
+     a chip) — one visual grammar for inspection detail across both
+     regimes. Where our dataset has no subgrades for an inspection,
+     say so honestly ("We don't hold area-by-area detail for this
+     inspection") and point to the school's Ofsted page — never claim
+     the inspection itself published no detail (graded inspections
+     always have subgrades; if it was ungraded, the grade is
+     carried forward and must be labelled as such).
+   - **Interim ungraded (Sept 2024 – Nov 2025):** parsed outcome
+     ("remains Good") shown as the effective grade, marked as such.
+   - **Renewed framework report card (from Nov 2025):** no overall
+     grade exists. Render the report card as an area-by-rating list
+     using Ofsted's 5-point scale (Exceptional / Strong standard /
+     Expected standard / Attention needed / Urgent improvement) across
+     the evaluation areas we model (`rc_inclusion`,
+     `rc_curriculum_teaching`, `rc_achievement`,
+     `rc_attendance_behaviour`, `rc_personal_development`,
+     `rc_leadership_governance`, `rc_early_years`, `rc_sixth_form`)
+     plus the separate safeguarding met/not-met flag. **At-a-glance
+     summary rule:** never an unlabelled colour strip — summarise by
+     counting areas per rating, best first ("5 areas Strong standard ·
+     3 areas Expected standard"), and always name any area rated
+     Attention needed or Urgent improvement explicitly (never fold
+     problems into a count), plus "Safeguarding not met" whenever that
+     flag is false. When everything is Expected standard or better,
+     add the reassurance line "No areas need attention".
+   When a comparison mixes regimes, show a one-line comparability note
+   ("Ofsted changed how it reports in Nov 2025 — a report card and an
+   older overall grade aren't directly comparable"). Never derive a
+   fake overall grade from report-card areas.
+3. **Academics (KS2)** — one dot-strip row per headline measure (RWM
+   expected, RWM higher, reading/writing/maths expected), each with the
+   England-average tick and per-school dots; copy must say "tests and
+   teacher assessments" (writing is TA, not a test). Progress scores
+   translated to Above/Average/Below chips (CI-based) — **but note KS2
+   progress measures ended with 2022/23** (no KS1 baseline afterwards)
+   and return only when the reception-baseline cohort reaches Y6
+   (~2027/28), so progress chips apply to historical years in the
+   trends explorer, not the headline view. Sparkline per school over
+   the full published period, with an honest gap for the cancelled
+   test years (2019/20–2020/21). Disadvantaged-pupils row under an
+   "Equity" subheading, always with cohort size shown and DfE's full
+   definition (FSM6 **or** looked-after/previously looked-after).
+4. **Getting a place** — oversubscription ratio as plain sentence
+   ("184 applications for 80 places"), first-preference success %, trend
+   vs last year, admissions policy.
+5. **Who goes there** — pupils on roll (vs capacity), boys/girls, FSM %,
+   EAL %, SEN support %, faith, ages, nursery, trust. *Post-v1:* IDACI
+   decile in words (needs a coverage check of `fact_deprivation` and
+   the neighbourhood-not-school caveat, §8.7).
+6. **Attendance** — *post-v1.* The KS2 test-day absence fields are the
+   only per-school absence data we hold; they're near-zero for most
+   schools and easy to misread as general attendance. Ship only if a
+   general-absence source lands.
+7. **Explore trends** (existing feature, collapsed) — metric picker +
+   multi-year line chart + table, with an added England-average
+   reference line and a COVID-gap annotation.
+
+**Metric exposure model (three tiers).** No measure from the current
+page is lost; they surface at three levels of prominence:
+- **Tier 1 — headline strips (always visible):** RWM expected,
+  reading/writing/maths expected, RWM higher standard.
+- **Tier 2 — "More measures" expansion inside Academics:** GPS and
+  science expected % (science labelled teacher-assessed), average
+  scaled scores (reading/maths/GPS, same dot-strip grammar showing
+  the 100–120 window of the 80–120 scale, widening below 100, with
+  the England tick) — one tap/click away, same visual language.
+  *Post-v1:* gender split and absence (see §4.6).
+- **Tier 3 — Explore trends:** the full grouped catalogue (the
+  current page's ~40 metrics, including equity and school-context
+  measures, and the GCSE set for secondary phase) drives the
+  year-by-year chart and table via the grouped metric picker.
+The tier assignment is a content decision per phase (secondary:
+Attainment 8, Progress 8 banding, grade 5+ English & maths as tier 1;
+EBacc and subject entries as tier 2).
+
+Finance (per-pupil spend) is deliberately deferred: low parent value,
+risk of misreading. Revisit later.
+
+**Mobile (design target — mobile first):** the desktop grid is the
+adaptation, not the other way round. On mobile the layout goes
+*measure-first*: each row is one measure with all schools listed under
+it (colour dot + short name + value + chip), so comparison never
+requires horizontal swiping between school cards. A sticky horizontal
+school-chip bar keeps identity and add/remove available while
+scrolling. Dot strips already read measure-first and carry over
+unchanged. The trend chart scrolls horizontally inside its container.
+
+## 5. Data strategy — existing dataset only
+
+Constraint (agreed 2026-07-11): use only data already in marts plus
+fields already present in the `raw` schema extracts we pull today.
+No new external sources.
+
+**Gaps in the mockup, resolved within this constraint:**
+
+| Mockup element | Resolution |
+|---|---|
+| England average for disadvantaged pupils | Compute from our own data: `stg_ees_ks2` already pivots the Disadvantaged breakdown per school; aggregate it (weighted by eligible pupils) into `fact_ks2_national_averages` or compute in the API. Label it "England average (state schools)". |
+| England context for FSM / EAL / SEN chips | Compute dataset-wide medians per phase, same pattern as `/api/national-averages` does for KS4. |
+| "Much larger than average" size label | Dataset median pupils-on-roll per phase. |
+| Ofsted link | We don't have deep links to the latest report, so always link to the school's Ofsted provider page, `https://reports.ofsted.gov.uk/provider/21/{urn}`, derived from URN (label it "the school's Ofsted page", not "the report"). |
+
+**Raw fields we already pull but don't store — promote to marts (one
+dbt/pipeline PR, no tap changes):**
+
+- `raw.ees_admissions`: 2nd/3rd preference applications and offers,
+  total-preference counts, cross-LA applications and offers → richer
+  "Getting a place" (e.g. "offers reached 2nd-choice families",
+  competition from outside the borough).
+- `raw.ees_ks2_attainment`: progress-measure confidence intervals and
+  "working towards" % → lets the Above/Average/Below progress chips be
+  statistically honest (band by CI overlap with 0, mirroring DfE
+  methodology) instead of thresholding the point estimate.
+- `raw.ees_ks4_performance` / `ees_ks4_info`: `progress8_banding`
+  (DfE's own plain-English "well above average … well below average"
+  label — exactly the chip we want for secondary), EBacc entry/APS,
+  grade-5+ English & maths, `attainment8_diffn`/`progress8_diffn`
+  (disadvantage gaps) → the secondary-phase version of the Academics
+  section.
+- `raw.ees_census`: young-carer % and the ethnicity breakdown →
+  optional "Who goes there" enrichment; hold for a later iteration
+  (presentation needs care), but the data requires no new extract.
+- `raw.ofsted_inspections` / tap-uk-ofsted: the `rc_*` report-card
+  columns exist in staging/marts but are stubbed `null` — the tap has a
+  TODO to map the report-card column names from the Ofsted MI file
+  (same monthly extract we already download; inspections from Nov 2025
+  onward carry them). This is the one promotion that needs a small tap
+  schema addition, and it's a prerequisite for the new-framework Ofsted
+  display above.
+
+Explicitly out (not in any current extract): school-level phonics,
+workforce/teacher data, per-school attendance beyond the KS2 test-day
+absence fields, Ofsted report-card documents themselves.
+
+## 6. API changes
+
+Extend `GET /api/compare` response per URN with the same supplementary
+blocks the detail endpoint already builds (`get_supplementary_data`):
+`ofsted`, `census`, `admissions` (+ `admissions_history`), `deprivation`,
+plus a top-level `national_averages` block for the latest year. Reuse the
+existing function; no new tables. Response stays backward-compatible
+(additive fields only). Add derived helper fields server-side or compute
+chips client-side from `national_averages` (client-side preferred — no
+schema churn).
+
+## 7. Accessibility & comprehension devices
+
+- Verdict chips are text + colour + position (never colour alone).
+- Every acronym has a tooltip using existing `MetricTooltip`.
+- "How to read this" one-liner at the top of each section.
+- Chart palette: coral `#e07256`, teal `#00949b`, purple `#8664c9`
+  (validated: lightness band, chroma, CVD separation, contrast — the
+  current `--chart-2/-4` tokens fail chroma/contrast checks and should
+  be nudged to these).
+- Numbers rounded to whole percents; England tick labelled on first use.
+
+## 8. Expert-review requirements
+
+An adversarial review by an education-data expert (full findings in
+`2026-07-11-compare-screen-expert-review.md`) was applied to the
+mockups on 2026-07-12. The following are binding requirements for
+implementation, beyond what the mockups can show:
+
+1. **Chart truthfulness:** KS2 tests were cancelled 2019/20–2020/21
+   only. **2021/22 school-level figures are a permanent source gap** —
+   DfE stated it would not publish KS2 2021/22 in performance tables
+   (verified 2026-07-12 against EES, the CSP download service, and
+   DfE release notes; see `# TASK 6 VERIFICATION` in
+   `pipeline/scripts/diagnose_compare_gaps.py`). The chart's England-
+   only 2021/22 point with broken school lines is therefore the
+   correct permanent rendering; copy should say "DfE didn't publish
+   school-level figures for 2021/22", not "not in our dataset yet".
+   The 2015/16 national figure and the GPS/science/scaled-score
+   England averages ARE loadable (mapping already correct; refreshed
+   raw extract backfills them). Never render missing years as if time
+   were continuous.
+2. **Report-card summaries** count graded areas only — safeguarding is
+   a separate binary flag, never included in rating counts.
+3. **Admissions:** use the real preference-breakdown fields from
+   `raw.ees_admissions`; never derive "lower-preference offers" as
+   places − first-preference offers. Frame total applications as
+   "named on N forms" (any rank), lead with first-preference success,
+   and standardise at-a-glance chips on that one metric. Explain the
+   equal-preference rule; caveat offers vs final intake (waiting
+   lists/appeals); condition "distance decides" on the school's actual
+   oversubscription criteria where we have the admissions-policy field.
+4. **Ofsted:** overall grades ended September 2024 (report cards from
+   November 2025); the interim regime must be renderable. Distinguish
+   graded (s5) vs ungraded (s8) inspections and surface carried-forward
+   grades as such; "we don't hold the detail" is a statement about our
+   dataset, never about the inspection. Verify every scale/area label
+   against Ofsted's final published toolkit before launch (e.g. "Needs
+   attention" vs "Attention needed"; "Personal development and
+   well-being" vs the identically-named legacy judgement). Check
+   whether a school's latest inspection is merely its latest *graded*
+   one. Confirm Early years provision subgrades flow through the
+   pipeline for schools with nurseries.
+5. **Subgroup honesty:** disadvantaged-pupil percentages carry cohort
+   sizes and follow the DfE suppression rule (≤5 pupils suppressed);
+   state the rule verbatim in the footer.
+6. **Benchmark provenance:** official DfE figures and
+   dataset-computed benchmarks must be labelled distinctly and
+   consistently everywhere (a computed median is a "benchmark",
+   not an "England average").
+7. **Copy details:** "Latest Ofsted inspection" (not "Ofsted rating");
+   "EHC plans"; SEN-support benchmark ≈14%; high SEN share may
+   indicate resourced provision (say so neutrally); "at or above
+   capacity" rather than "full" (capacity data is often stale);
+   disambiguate Ofsted's "Expected standard" from the KS2 measure;
+   give official terms ("first preference") alongside plain English.
+   Writing has no "higher standard" — its TA outcome is "greater
+   depth (GDS)"; never list writing under a higher-standard group.
+   Science and writing are teacher-assessed and must be labelled as
+   such (no KS2 science test since 2009). House style for benchmark
+   provenance: official DfE figures say "England average"; computed
+   figures say "state-school average (computed from our dataset)" —
+   applied to every chip, tooltip, header note and section intro.
+   EAL uses the census wording: first language known or believed to
+   be other than English. If IDACI ships, caveat that it describes
+   pupils' home neighbourhoods, not the school.
+
+## 9. Rollout
+
+1. **PR 1 (backend):** extend `/api/compare` + tests.
+2. **PR 2 (frontend):** new compare layout behind the existing route;
+   e2e journey updated in the same PR (promotion gate).
+3. **Fix separately:** missing third series on the current chart.
+
+## 10. Open questions for review
+
+- Max schools: keep 10 in API but cap visible columns at 4 with scroll?
+- Should distance-from-home appear when the user searched by postcode
+  (data exists via `dim_location`)?
+- Keep finance out of v1? (Recommended: yes, out.)
@@ -0,0 +1,642 @@
+<title>Compare screen — proposed redesign</title>
+<style>
+  :root {
+    --bg: #faf7f2;
+    --bg-2: #f3ede4;
+    --card: #ffffff;
+    --ink: #1a1612;
+    --ink-2: #5c564d;
+    --ink-3: #6d685f;
+    --border: #e5dfd5;
+    --accent: #b04a2e;
+    --accent-bg: rgba(224, 114, 86, 0.12);
+    /* Validated series palette (passes lightness / chroma / CVD / contrast) */
+    --s1: #e07256; --s1-text: #b04a2e;
+    --s2: #00949b; --s2-text: #006a70;
+    --s3: #8664c9; --s3-text: #6a4bab;
+    --eng: #6d685f;
+    --good-bg: #e3efe6; --good-text: #1a6b34;
+    --warn-bg: #f6ecd4; --warn-text: #7a5d00;
+    --bad-bg: #f7e3de;  --bad-text: #a03a20;
+    --neutral-bg: #efeae1; --neutral-text: #5c564d;
+    --shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+    --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
+    --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #16130f; --bg-2: #201c16; --card: #241f19;
+      --ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
+      --border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
+      --s1: #f08b6e; --s1-text: #f4a58e;
+      --s2: #2fb8ae; --s2-text: #5fd0c8;
+      --s3: #a98fe0; --s3-text: #c0abec;
+      --eng: #9a927f;
+      --good-bg: #1e3325; --good-text: #7fd39a;
+      --warn-bg: #38301a; --warn-text: #e4c268;
+      --bad-bg: #3d221b;  --bad-text: #f0977f;
+      --neutral-bg: #2b2620; --neutral-text: #bdb5a8;
+      --shadow: 0 2px 8px rgba(0,0,0,0.35);
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #16130f; --bg-2: #201c16; --card: #241f19;
+    --ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
+    --border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
+    --s1: #f08b6e; --s1-text: #f4a58e;
+    --s2: #2fb8ae; --s2-text: #5fd0c8;
+    --s3: #a98fe0; --s3-text: #c0abec;
+    --eng: #9a927f;
+    --good-bg: #1e3325; --good-text: #7fd39a;
+    --warn-bg: #38301a; --warn-text: #e4c268;
+    --bad-bg: #3d221b;  --bad-text: #f0977f;
+    --neutral-bg: #2b2620; --neutral-text: #bdb5a8;
+    --shadow: 0 2px 8px rgba(0,0,0,0.35);
+  }
+  :root[data-theme="light"] {
+    --bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
+    --ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
+    --border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
+    --s1: #e07256; --s1-text: #b04a2e;
+    --s2: #00949b; --s2-text: #006a70;
+    --s3: #8664c9; --s3-text: #6a4bab;
+    --eng: #6d685f;
+    --good-bg: #e3efe6; --good-text: #1a6b34;
+    --warn-bg: #f6ecd4; --warn-text: #7a5d00;
+    --bad-bg: #f7e3de;  --bad-text: #a03a20;
+    --neutral-bg: #efeae1; --neutral-text: #5c564d;
+    --shadow: 0 2px 8px rgba(26, 22, 18, 0.06);
+  }
+
+  body { background: var(--bg); color: var(--ink); font-family: var(--body); line-height: 1.5; }
+  .wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
+
+  .mock-note {
+    background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
+    padding: 0.6rem 1rem; font-size: 0.85rem; color: var(--ink-2); margin-bottom: 2rem;
+  }
+  .mock-note strong { color: var(--accent); }
+
+  h1 { font-family: var(--display); font-size: 2.4rem; font-weight: 700; margin: 0 0 0.25rem; text-wrap: balance; }
+  .sub { color: var(--ink-2); margin: 0 0 2rem; max-width: 60ch; }
+
+  h2.section-title {
+    font-family: var(--display); font-size: 1.45rem; font-weight: 700;
+    margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--accent);
+  }
+  .how { font-size: 0.85rem; color: var(--ink-3); margin: 0.35rem 0 0 0.95rem; max-width: 70ch; }
+  section.block { margin-top: 3rem; }
+
+  /* ---- Sticky school header ---- */
+  .school-bar {
+    position: sticky; top: 0; z-index: 10;
+    background: var(--bg); padding: 0.75rem 0; border-bottom: 1px solid var(--border);
+    display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0.75rem; align-items: stretch;
+  }
+  .school-chip {
+    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
+    box-shadow: var(--shadow); padding: 0.55rem 0.75rem; display: flex; gap: 0.55rem; align-items: center;
+    border-top: 3px solid var(--chip);
+  }
+  .school-chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--chip); flex: none; }
+  .school-chip .nm { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
+  .school-chip .la { font-size: 0.78rem; color: var(--ink-3); }
+  .school-chip .x {
+    margin-left: auto; border: none; background: var(--bg-2); color: var(--ink-3);
+    border-radius: 50%; width: 22px; height: 22px; cursor: pointer; flex: none; font-size: 0.9rem;
+  }
+  .add-school {
+    border: 1.5px dashed var(--border); border-radius: 8px; background: none;
+    color: var(--accent); font-weight: 600; padding: 0 1rem; cursor: pointer; font-family: inherit; font-size: 0.9rem;
+  }
+
+  /* ---- Comparison grid rows ---- */
+  .grid { display: grid; grid-template-columns: 200px repeat(3, 1fr); gap: 0 0.75rem; margin-top: 1.25rem; }
+  .grid .rowlabel {
+    font-size: 0.85rem; font-weight: 600; color: var(--ink-2); padding: 0.85rem 0.5rem 0.85rem 0;
+    border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.35rem;
+  }
+  .grid .cell { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
+  .grid .cell .big { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
+  .grid .cell .small { display: block; font-size: 0.8rem; color: var(--ink-3); margin-top: 0.1rem; }
+
+  .help {
+    display: inline-flex; width: 15px; height: 15px; border-radius: 50%;
+    border: 1px solid var(--ink-3); color: var(--ink-3); font-size: 0.65rem;
+    align-items: center; justify-content: center; cursor: help; flex: none;
+  }
+
+  .chip {
+    display: inline-block; font-size: 0.75rem; font-weight: 600; border-radius: 999px;
+    padding: 0.15rem 0.6rem; white-space: nowrap;
+  }
+  .chip.good { background: var(--good-bg); color: var(--good-text); }
+  .chip.warn { background: var(--warn-bg); color: var(--warn-text); }
+  .chip.bad  { background: var(--bad-bg); color: var(--bad-text); }
+  .chip.neutral { background: var(--neutral-bg); color: var(--neutral-text); }
+
+  .ofsted-badge {
+    display: inline-block; font-weight: 700; border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.9rem;
+  }
+  /* New-framework report card */
+  .rc-list { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.2rem; }
+  .rc-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
+  .rc-row .a { color: var(--ink-2); }
+  .illus {
+    display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
+    color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 0.05rem 0.4rem;
+  }
+  .ofsted-1 { background: var(--good-bg); color: var(--good-text); }
+  .ofsted-2 { background: #e7f0e3; color: #3c6b2f; }
+  :root[data-theme="dark"] .ofsted-2 { background:#25321f; color:#a5cf94; }
+  @media (prefers-color-scheme: dark) { .ofsted-2 { background:#25321f; color:#a5cf94; } }
+
+  /* ---- Dot strips (signature element) ---- */
+  .strip-row { margin: 1.1rem 0 1.6rem; }
+  .strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
+  .strip-head .t { font-weight: 600; font-size: 0.95rem; }
+  .strip-head .eng-note { font-size: 0.8rem; color: var(--ink-3); }
+  .strip { position: relative; height: 34px; margin-top: 0.45rem; }
+  .strip .track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--bg-2); }
+  .strip .eng-tick { position: absolute; top: 4px; width: 2px; height: 26px; background: var(--eng); }
+  .strip .eng-lbl { position: absolute; top: -14px; transform: translateX(-50%); font-size: 0.7rem; color: var(--ink-3); white-space: nowrap; }
+  .strip .pt {
+    position: absolute; top: 9px; width: 16px; height: 16px; border-radius: 50%;
+    transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
+  }
+  .strip .pt-lbl { position: absolute; top: 27px; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+
+  details.more-measures { margin-top: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
+  details.more-measures summary { cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--accent); }
+  .strip-note { font-size: 0.78rem; color: var(--ink-3); margin: 0.5rem 0 0; }
+  .metric-picker { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; }
+  .metric-picker label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
+  .metric-picker select {
+    font-family: inherit; font-size: 0.9rem; padding: 0.4rem 0.6rem; border-radius: 8px;
+    border: 1px solid var(--border); background: var(--card); color: var(--ink); max-width: 100%;
+  }
+  .picker-note { font-size: 0.78rem; color: var(--ink-3); }
+  .legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-2); margin: 0.75rem 0 0; }
+  .legend .li { display: inline-flex; align-items: center; gap: 0.4rem; }
+  .legend .sw { width: 10px; height: 10px; border-radius: 50%; }
+  .legend .engsw { width: 2px; height: 12px; background: var(--eng); }
+
+  .card {
+    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
+    box-shadow: var(--shadow); padding: 1.25rem 1.5rem; margin-top: 1rem;
+  }
+
+  /* ---- Sparklines & chart ---- */
+  .spark { display: block; }
+  .chart-wrap { overflow-x: auto; }
+  .covid { fill: var(--bg-2); }
+  .covid-lbl { font-size: 0.7rem; fill: var(--ink-3); }
+
+  .barmini { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; margin-top: 0.3rem; max-width: 140px; }
+  .barmini > i { display: block; height: 100%; border-radius: 4px; }
+
+  details.explore { margin-top: 1rem; }
+  details.explore summary {
+    cursor: pointer; font-weight: 600; color: var(--accent);
+    padding: 0.85rem 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px;
+  }
+  details.explore[open] summary { border-radius: 8px 8px 0 0; }
+  details.explore .inner { border: 1px solid var(--border); border-top: none; border-radius: 0 0 8px 8px; background: var(--card); padding: 1.25rem 1.5rem; }
+
+  .footnote { font-size: 0.78rem; color: var(--ink-3); margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; max-width: 75ch; }
+
+  @media (max-width: 760px) {
+    .school-bar { grid-template-columns: 1fr; }
+    .grid { grid-template-columns: 1fr; }
+    .grid .rowlabel { border-bottom: none; padding-bottom: 0.15rem; background: var(--bg-2); border-radius: 6px; padding: 0.4rem 0.6rem; margin-top: 0.8rem; }
+    .grid .cell { border-bottom: none; padding: 0.4rem 0.6rem; }
+    .grid .cell::before { content: attr(data-school); display: block; font-size: 0.72rem; font-weight: 600; color: var(--sc, var(--ink-3)); }
+  }
+</style>
+
+<div class="wrap">
+  <p class="mock-note"><strong>Mockup — proposed redesign of /compare.</strong> All figures are live production data for three real schools (2024/25 results, 2026/27 admissions round). England averages for test results are official DfE figures; other benchmarks are state-school averages computed from our dataset.</p>
+
+  <h1>Compare schools</h1>
+  <p class="sub">Three schools side by side — inspection results, academics, admissions and community, each anchored against the England average so you can tell at a glance what's typical and what stands out.</p>
+
+  <div class="school-bar" aria-label="Schools in this comparison">
+    <div class="school-chip" style="--chip: var(--s1)">
+      <span class="dot"></span>
+      <span><span class="nm">Barclay Primary School</span><br><span class="la">Waltham Forest · Academy</span></span>
+      <button class="x" aria-label="Remove Barclay Primary School">×</button>
+    </div>
+    <div class="school-chip" style="--chip: var(--s2)">
+      <span class="dot"></span>
+      <span><span class="nm">Elmhurst Primary School</span><br><span class="la">Newham · Academy</span></span>
+      <button class="x" aria-label="Remove Elmhurst Primary School">×</button>
+    </div>
+    <div class="school-chip" style="--chip: var(--s3)">
+      <span class="dot"></span>
+      <span><span class="nm">Plumcroft Primary School</span><br><span class="la">Greenwich · Community school</span></span>
+      <button class="x" aria-label="Remove Plumcroft Primary School">×</button>
+    </div>
+    <button class="add-school">+ Add school</button>
+  </div>
+
+  <!-- ============ AT A GLANCE ============ -->
+  <section class="block" style="margin-top:2rem">
+    <h2 class="section-title">At a glance</h2>
+    <p class="how">The short version — each row below is explained in its own section further down.</p>
+    <div class="grid">
+      <div class="rowlabel">Latest Ofsted inspection</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Inspected Oct 2021</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
+        <strong style="font-size:0.9rem">Report card</strong> <span class="illus">illustrative</span>
+        <div style="display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.3rem">
+          <span class="chip good">4 areas Strong standard</span>
+          <span class="chip neutral">2 areas Expected standard</span>
+          <span class="chip warn">Attendance &amp; behaviour: Attention needed</span>
+        </div>
+        <span class="small">Safeguarding met · Nov 2025</span>
+      </div>
+
+      <div class="rowlabel">Children reaching the expected standard <span class="help" title="% of Year 6 pupils reaching the expected standard in reading, writing and maths (2024/25). England average: 62%.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="color:var(--s1-text)">87%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="color:var(--s2-text)">92%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="color:var(--s3-text)">79%</span> <span class="chip good">Above England average</span><span class="small">England average 62%</span></div>
+
+      <div class="rowlabel">Getting a place</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="chip good">97% of first choices offered</span><span class="small">Named on 457 forms · 180 places</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="chip warn">73% of first choices offered</span><span class="small">Named on 342 forms · 120 places</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="chip good">All first choices offered</span><span class="small">Named on 185 forms · 80 places</span></div>
+
+      <div class="rowlabel">Size</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 pupils<span class="small">Much larger than average</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 pupils<span class="small">Much larger than average</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 pupils<span class="small">Much larger than average</span></div>
+    </div>
+  </section>
+
+  <!-- ============ OFSTED ============ -->
+  <section class="block">
+    <h2 class="section-title">Ofsted inspection</h2>
+    <p class="how">Ofsted is the schools inspectorate. It stopped giving a single overall grade in <strong>September 2024</strong>; inspections between then and November 2025 kept the area-by-area judgements without an overall grade, and from <strong>November 2025</strong> new inspections produce a <strong>report card</strong> rating each area of school life on a five-point scale (Exceptional · Strong standard · Expected standard · Attention needed · Urgent improvement). A report card and an older overall grade aren't directly comparable — Plumcroft's report card below is an <em>illustrative example</em> of the new format, as no school in our dataset has one yet. (Ofsted's "Expected standard" rating is unrelated to the KS2 "expected standard" test measure further down this page.)</p>
+    <div class="grid">
+      <div class="rowlabel">Result</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="ofsted-badge ofsted-1">Outstanding</span><span class="small">Overall grade (older-style inspection)</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>Report card</strong> <span class="illus">illustrative</span><span class="small">New-style inspection — no overall grade is given</span></div>
+
+      <div class="rowlabel">Inspected</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">7 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">6 Oct 2021 <span class="chip neutral">4+ years ago</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">14 Nov 2025</div>
+
+      <div class="rowlabel">Judgement detail <span class="help" title="Older-style inspections: one rating per judgement area, where published. New-style inspections: the full report card, one rating per area of school life.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">We don't hold area-by-area detail for this inspection — see Barclay's Ofsted page for the full report.</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">
+        <div class="rc-list">
+          <div class="rc-row"><span class="a">Quality of education</span><span class="chip good">Outstanding</span></div>
+          <div class="rc-row"><span class="a">Behaviour &amp; attitudes</span><span class="chip good">Outstanding</span></div>
+          <div class="rc-row"><span class="a">Personal development</span><span class="chip good">Outstanding</span></div>
+          <div class="rc-row"><span class="a">Leadership &amp; management</span><span class="chip good">Outstanding</span></div>
+        </div>
+      </div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">
+        <div class="rc-list">
+          <div class="rc-row"><span class="a">Achievement</span><span class="chip good">Strong standard</span></div>
+          <div class="rc-row"><span class="a">Curriculum &amp; teaching</span><span class="chip good">Strong standard</span></div>
+          <div class="rc-row"><span class="a">Attendance &amp; behaviour</span><span class="chip warn">Attention needed</span></div>
+          <div class="rc-row"><span class="a">Personal development</span><span class="chip good">Strong standard</span></div>
+          <div class="rc-row"><span class="a">Inclusion</span><span class="chip neutral">Expected standard</span></div>
+          <div class="rc-row"><span class="a">Leadership &amp; governance</span><span class="chip good">Strong standard</span></div>
+          <div class="rc-row"><span class="a">Early years</span><span class="chip neutral">Expected standard</span></div>
+          <div class="rc-row"><span class="a">Safeguarding</span><span class="chip good">Met</span></div>
+        </div>
+      </div>
+
+      <div class="rowlabel">Ofsted page <span class="help" title="Links to the school's page on ofsted.gov.uk, where all its inspection reports are listed.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><a href="https://reports.ofsted.gov.uk/provider/21/138690" style="color:var(--accent)">Barclay's Ofsted page →</a></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><a href="https://reports.ofsted.gov.uk/provider/21/145362" style="color:var(--accent)">Elmhurst's Ofsted page →</a></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><a href="https://reports.ofsted.gov.uk/provider/21/100140" style="color:var(--accent)">Plumcroft's Ofsted page →</a></div>
+    </div>
+  </section>
+
+  <!-- ============ ACADEMICS ============ -->
+  <section class="block">
+    <h2 class="section-title">How children do academically</h2>
+    <p class="how">Results from national tests and teacher assessments at the end of Year 6 (2024/25) — 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.</p>
+    <div class="card">
+      <div id="strips"></div>
+      <details class="more-measures">
+        <summary>More measures — grammar, punctuation &amp; spelling, science, average scaled scores</summary>
+        <div id="strips-more"></div>
+        <p class="strip-note">The strips show the 100–120 window of the full 80–120 scaled-score range; 100 is the expected standard, and the strip widens if a school averages below it. England ticks for grammar, punctuation &amp; spelling and science aren't in our dataset yet, and the scaled-score England ticks are indicative — official DfE figures for all of these will be loaded before launch.</p>
+      </details>
+      <div class="legend" id="strip-legend"></div>
+    </div>
+
+    <div class="grid">
+      <div class="rowlabel">Trend, 2015/16 to 2024/25 <span class="help" title="% reaching the expected standard in reading, writing and maths each year. Tests were cancelled in 2019/20 and 2020/21 (COVID); 2021/22 school figures aren't in our dataset yet — the line breaks over those years.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><svg class="spark" data-series="52,76,65,87,87,75,87" data-color="s1" width="150" height="40" role="img" aria-label="Barclay trend: variable, most recently 87%"></svg><span class="small">Variable, recently 87%</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><svg class="spark" data-series="80,81,86,88,88,88,92" data-color="s2" width="150" height="40" role="img" aria-label="Elmhurst trend: 80% rising to 92%"></svg><span class="small">Consistently high</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><svg class="spark" data-series="58,64,57,69,62,72,79" data-color="s3" width="150" height="40" role="img" aria-label="Plumcroft trend: 58% rising to 79%"></svg><span class="small">Improving since 2022/23</span></div>
+
+      <div class="rowlabel">Children from lower-income families <span class="help" title="% of disadvantaged pupils (eligible for free school meals in the last 6 years, or looked after by the local authority) reaching the expected standard. State-school average: 46% (computed from our dataset). Based on smaller pupil groups, so a single pupil can move a school's figure noticeably.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="big" style="font-size:1.1rem">86%</span> <span class="chip good">Well above the 46% state-school average</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="big" style="font-size:1.1rem">93%</span> <span class="chip good">Well above the 46% state-school average</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="big" style="font-size:1.1rem">72%</span> <span class="chip good">Above the 46% state-school average</span></div>
+    </div>
+  </section>
+
+  <!-- ============ ADMISSIONS ============ -->
+  <section class="block">
+    <h2 class="section-title">Getting a place</h2>
+    <p class="how">From the most recent admissions round (September 2026 entry). "First choice" means families who ranked the school top of their application form — officially a "first preference". Schools never see your ranking: places are decided only by the school'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 intake.</p>
+    <div class="grid">
+      <div class="rowlabel">Interest in the school <span class="help" title="How many application forms named the school at any preference rank — not the number of families competing head-to-head for a place.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Named on <span class="big" style="font-size:1.1rem">457</span> forms · <strong>180</strong> places</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">Named on <span class="big" style="font-size:1.1rem">342</span> forms · <strong>120</strong> places</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Named on <span class="big" style="font-size:1.1rem">185</span> forms · <strong>80</strong> places</div>
+
+      <div class="rowlabel">First-choice families offered a place</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><strong>97%</strong><span class="barmini"><i style="width:97%;background:var(--s1)"></i></span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><strong>73%</strong> <span class="chip warn">Over 1 in 4 first choices missed out</span><span class="barmini"><i style="width:73%;background:var(--s2)"></i></span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><strong>100%</strong><span class="barmini"><i style="width:100%;background:var(--s3)"></i></span></div>
+
+      <div class="rowlabel">What this means</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)"><span class="small">Nearly every family who put Barclay first got a place.</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)"><span class="small">More first-choice applications than places — check the school's admission criteria (for most non-faith primaries, distance decides).</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)"><span class="small">Every family who put Plumcroft first got a place.</span></div>
+    </div>
+  </section>
+
+  <!-- ============ COMMUNITY ============ -->
+  <section class="block">
+    <h2 class="section-title">Who goes there</h2>
+    <p class="how">The school's community, from the latest school census (2025/26). England averages are shown for context — there's no "right" number here.</p>
+    <div class="grid">
+      <div class="rowlabel">Pupils on roll</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">1,273 <span class="small">1,260 places — at or above capacity</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">980 <span class="small">of 996 places (98% full)</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">1,056 <span class="small">1,050 places — at or above capacity</span></div>
+
+      <div class="rowlabel">Girls / boys</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">51% / 49%</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">48% / 52%</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">51% / 49%</div>
+
+      <div class="rowlabel">Free school meals <span class="help" title="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. State-school average: 25% (computed from our dataset).">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">26% <span class="chip neutral">About the state-school average</span></div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">25% <span class="chip neutral">About the state-school average</span></div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">30% <span class="chip neutral">A little above average</span></div>
+
+      <div class="rowlabel">English as an additional language <span class="help" title="% of pupils whose first language is known or believed to be other than English. State-school average: 22% (computed from our dataset).">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">62%</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">84%</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">20%</div>
+
+      <div class="rowlabel">Extra learning support (SEN) <span class="help" title="% of pupils receiving SEN support (not including EHC plans). State-school average: 14% (computed from our dataset). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign.">?</span></div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">6%</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">8%</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">28% <span class="chip neutral">Well above average</span></div>
+
+      <div class="rowlabel">Faith character</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">None</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">None</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">None</div>
+
+      <div class="rowlabel">Ages · nursery</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">3–11 · has a nursery</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">3–11 · has a nursery</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">3–11 · has a nursery</div>
+
+      <div class="rowlabel">Run by</div>
+      <div class="cell" data-school="Barclay" style="--sc:var(--s1-text)">Lion Academy Trust</div>
+      <div class="cell" data-school="Elmhurst" style="--sc:var(--s2-text)">New Vision Trust</div>
+      <div class="cell" data-school="Plumcroft" style="--sc:var(--s3-text)">Greenwich council</div>
+    </div>
+  </section>
+
+  <!-- ============ EXPLORE TRENDS ============ -->
+  <section class="block">
+    <h2 class="section-title">Explore trends</h2>
+    <p class="how">The full year-by-year explorer — every measure from the current compare page lives on here, grouped, each with its England-average line. Three measures are wired up in this mockup; the rest are shown to convey the catalogue.</p>
+    <details class="explore" open>
+      <summary>Year-by-year trends, 2015/16 to 2024/25</summary>
+      <div class="inner chart-wrap">
+        <div class="metric-picker">
+          <label for="metric-select">Measure:</label>
+          <select id="metric-select">
+            <optgroup label="Expected standard">
+              <option value="rwm" selected>Reading, writing &amp; maths (combined)</option>
+              <option value="reading">Reading</option>
+              <option value="maths">Maths</option>
+              <option disabled>Writing (teacher assessment)</option>
+              <option disabled>Grammar, punctuation &amp; spelling</option>
+              <option disabled>Science</option>
+            </optgroup>
+            <optgroup label="Higher standard">
+              <option disabled>Reading, writing &amp; maths (combined)</option>
+              <option disabled>Reading · Maths · GPS</option>
+              <option disabled>Writing — greater depth (teacher assessment)</option>
+            </optgroup>
+            <optgroup label="Average scaled scores">
+              <option disabled>Reading · Maths · GPS</option>
+            </optgroup>
+            <optgroup label="Equity">
+              <option disabled>Disadvantaged pupils — expected standard</option>
+            </optgroup>
+            <optgroup label="School context">
+              <option disabled>Free school meals % · EAL % · SEN support %</option>
+            </optgroup>
+          </select>
+          <span class="picker-note">School lines break where a year isn't in our dataset.</span>
+        </div>
+        <svg id="trendchart" width="880" height="300" role="img" aria-label="Line chart: selected measure by year for three schools and England average"></svg>
+        <div class="legend" id="trend-legend"></div>
+      </div>
+    </details>
+  </section>
+
+  <p class="footnote">
+    Sources: DfE Compare School Performance (KS2 results), Ofsted inspection outcomes, DfE school admissions data, school census — all from datasets SchoolCompare already collects. England averages for test results are the official DfE national figures; benchmarks for free school meals, language, SEN, school size and disadvantaged pupils' results are computed across all state schools in our dataset. Following DfE practice, figures based on 5 or fewer pupils are suppressed and shown as "no data". This is a static mockup: tooltips and "Add school" are illustrative, and Plumcroft's Ofsted report card is a made-up example of the November 2025 format (its real latest inspection is Good, June 2023) — no school in our dataset has a report card yet.
+  </p>
+</div>
+
+<script>
+(function () {
+  const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+
+  const schools = [
+    { name: 'Barclay',   color: () => css('--s1'), text: () => css('--s1-text') },
+    { name: 'Elmhurst',  color: () => css('--s2'), text: () => css('--s2-text') },
+    { name: 'Plumcroft', color: () => css('--s3'), text: () => css('--s3-text') },
+  ];
+
+  /* ---- Dot strips ---- */
+  const strips = [
+    { label: 'Reading, writing & maths — expected standard', eng: 62, vals: [87, 92, 79] },
+    { label: 'Reading', eng: 75, vals: [91, 92, 87] },
+    { label: 'Writing', eng: 72, vals: [94, 92, 83] },
+    { label: 'Maths', eng: 74, vals: [91, 95, 84] },
+    { label: 'Working at a higher standard than expected', eng: 8, vals: [22, 27, 12], tip: 'A high score in the reading and maths tests plus \u201cgreater depth\u201d in teacher-assessed writing.' },
+  ];
+
+  // Generalised strip renderer: any domain (percentages or scaled scores),
+  // England tick optional (omitted when the benchmark isn't in our dataset).
+  function renderStrips(list, el, firstNote) {
+    list.forEach((s, si) => {
+      const min = s.min ?? 0, max = s.max ?? 100, unit = s.unit ?? '%';
+      const pos = v => (v - min) / (max - min) * 100;
+      const row = document.createElement('div');
+      row.className = 'strip-row';
+      let pts = '';
+      const sorted = s.vals.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
+      let lastBelow = -Infinity;
+      const nudge = (max - min) * 0.04;
+      sorted.forEach(({ v, i }) => {
+        const above = (v - lastBelow) < nudge;
+        if (!above) lastBelow = v;
+        pts += `<span class="pt" style="left:${pos(v)}%;background:${schools[i].color()}" title="${schools[i].name}: ${v}${unit}"></span>`
+             + `<span class="pt-lbl" style="left:${pos(v)}%;color:${schools[i].text()};${above ? 'top:-6px' : ''}">${v}</span>`;
+      });
+      const eng = s.eng != null
+        ? `<span class="eng-tick" style="left:${pos(s.eng)}%"></span><span class="eng-lbl" style="left:${pos(s.eng)}%">England ${s.eng}${unit}</span>`
+        : '';
+      row.innerHTML = `
+        <div class="strip-head"><span class="t"${s.tip ? ` title="${s.tip}"` : ''}>${s.label}</span>
+          ${si === 0 && firstNote ? `<span class="eng-note">${firstNote}</span>` : ''}</div>
+        <div class="strip" role="img" aria-label="${s.label}: ${s.eng != null ? 'England average ' + s.eng + unit + ', ' : ''}${s.vals.map((v, i) => schools[i].name + ' ' + v + unit).join(', ')}">
+          <div class="track"></div>
+          ${eng}
+          ${pts}
+        </div>`;
+      el.appendChild(row);
+    });
+  }
+  renderStrips(strips, document.getElementById('strips'), '│ grey tick = England average');
+  renderStrips([
+    { label: 'Grammar, punctuation & spelling — expected standard', eng: null, vals: [86, 94, 82] },
+    { label: 'Science — expected standard (teacher-assessed)', eng: null, vals: [95, 91, 83], tip: 'Teacher-assessed, like writing — there has been no KS2 science test since 2009, so comparisons are indicative.' },
+    { label: 'Average scaled score — reading', eng: 106, vals: [107, 110, 109], min: 100, max: 120, unit: '' },
+    { label: 'Average scaled score — maths', eng: 105, vals: [108, 113, 108], min: 100, max: 120, unit: '' },
+    { label: 'Average scaled score — grammar, punctuation & spelling', eng: 105, vals: [107, 114, 109], min: 100, max: 120, unit: '' },
+  ], document.getElementById('strips-more'), null);
+  document.getElementById('strip-legend').innerHTML =
+    schools.map(s => `<span class="li"><span class="sw" style="background:${s.color()}"></span>${s.name}</span>`).join('')
+    + '<span class="li"><span class="engsw"></span>England average</span>';
+
+  /* ---- Sparklines (x honours real time: values are 15/16–18/19 then 22/23–24/25) ---- */
+  document.querySelectorAll('svg.spark').forEach(svg => {
+    const vals = svg.dataset.series.split(',').map(Number);
+    const color = css('--' + svg.dataset.color);
+    const w = +svg.getAttribute('width'), h = +svg.getAttribute('height');
+    const min = 40, max = 100;
+    const sslots = [0,1,2,3,7,8,9];
+    const x = i => 4 + sslots[i] * (w - 8) / 9;
+    const y = v => h - 6 - (v - min) * (h - 12) / (max - min);
+    const seg = idx => idx.map((i, k) => (k ? 'L' : 'M') + x(i).toFixed(1) + ' ' + y(vals[i]).toFixed(1)).join(' ');
+    svg.innerHTML = `<path d="${seg([0,1,2,3])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
+      + `<path d="${seg([4,5,6])}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`
+      + `<circle cx="${x(6)}" cy="${y(vals[6])}" r="3.5" fill="${color}"/>`;
+  });
+
+  /* ---- Trend chart (metric-driven) ----
+     Tests were cancelled 2019/20-2020/21; lines always break across that band.
+     Nulls elsewhere are dataset gaps (no school-level 2021/22 rows; no
+     subject-level 2022/23 rows) and break the lines honestly. England figures
+     are official DfE (fact_ks2_national_averages); 2015/16 not loaded yet. */
+  const years = ['2015/16','2016/17','2017/18','2018/19','2021/22','2022/23','2023/24','2024/25'];
+  const METRICS = {
+    rwm: {
+      label: 'Reading, writing & maths - expected standard',
+      school: { Barclay: [52,76,65,87,null,87,75,87], Elmhurst: [80,81,86,88,null,88,88,92], Plumcroft: [58,64,57,69,null,62,72,79] },
+      england: [null,61.1,64.3,64.9,58.7,59.5,60.6,62.1],
+    },
+    reading: {
+      label: 'Reading - expected standard',
+      school: { Barclay: [57,84,76,87,null,null,79,91], Elmhurst: [88,91,92,91,null,null,92,92], Plumcroft: [59,68,72,79,null,null,82,87] },
+      england: [null,71.6,75.3,73.2,74.6,72.8,74.4,75.0],
+    },
+    maths: {
+      label: 'Maths - expected standard',
+      school: { Barclay: [81,82,74,90,null,null,88,91], Elmhurst: [96,89,97,97,null,null,96,95], Plumcroft: [80,80,69,90,null,null,84,84] },
+      england: [null,74.8,75.5,78.7,71.5,73.0,73.2,74.0],
+    },
+  };
+  const schoolColor = { Barclay: () => css('--s1'), Elmhurst: () => css('--s2'), Plumcroft: () => css('--s3') };
+
+  const svg = document.getElementById('trendchart');
+  const W = 880, H = 300, L = 44, R = 48, T = 18, B = 40;
+  // x positions honour real time: 2019/20 and 2020/21 (cancelled tests) sit between slots 3 and 6
+  const slots = [0,1,2,3,6,7,8,9]; const maxSlot = 9;
+  const X = i => L + slots[i] * (W - L - R) / maxSlot;
+  const Y = v => T + (100 - v) * (H - T - B) / 60; // domain 40..100
+
+  // Contiguous non-null runs, additionally split across the covid band (between indices 3 and 4)
+  function runs(vals) {
+    const out = []; let cur = [];
+    vals.forEach((v, i) => {
+      if (v == null) { if (cur.length) out.push(cur); cur = []; return; }
+      if (i === 4 && cur.length && cur[cur.length - 1] === 3) { out.push(cur); cur = []; }
+      cur.push(i);
+    });
+    if (cur.length) out.push(cur);
+    return out;
+  }
+
+  function renderChart(key) {
+    const m = METRICS[key];
+    const ink3 = css('--ink-3'), border = css('--border');
+    let g = '';
+    const bx1 = X(3) + 14, bx2 = X(4) - 14;
+    g += `<rect class="covid" x="${bx1}" y="${T}" width="${bx2 - bx1}" height="${H - T - B}" rx="4"/>`;
+    g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 16}" text-anchor="middle">tests cancelled</text>`;
+    g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 30}" text-anchor="middle">2019/20-2020/21</text>`;
+    for (let v = 40; v <= 100; v += 20) {
+      g += `<line x1="${L}" y1="${Y(v)}" x2="${W - R}" y2="${Y(v)}" stroke="${border}" stroke-width="1"/>`;
+      g += `<text x="${L - 8}" y="${Y(v) + 4}" text-anchor="end" font-size="11" fill="${ink3}">${v}%</text>`;
+    }
+    years.forEach((yr, i) => {
+      g += `<text x="${X(i)}" y="${H - B + 20}" text-anchor="middle" font-size="11" fill="${ink3}">${yr}</text>`;
+    });
+    const path = (vals, idx) => idx.map((i, k) => (k ? 'L' : 'M') + X(i) + ' ' + Y(vals[i])).join(' ');
+    runs(m.england).forEach(idx => {
+      if (idx.length > 1) g += `<path d="${path(m.england, idx)}" fill="none" stroke="${ink3}" stroke-width="1.5" stroke-dasharray="5 4"/>`;
+      else g += `<circle cx="${X(idx[0])}" cy="${Y(m.england[idx[0]])}" r="2.5" fill="${ink3}"><title>England ${years[idx[0]]}: ${Math.round(m.england[idx[0]])}%</title></circle>`;
+    });
+    Object.entries(m.school).forEach(([name, vals]) => {
+      const color = schoolColor[name]();
+      runs(vals).forEach(idx => {
+        if (idx.length > 1) g += `<path d="${path(vals, idx)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
+      });
+      vals.forEach((v, i) => {
+        if (v == null) return;
+        g += `<circle cx="${X(i)}" cy="${Y(v)}" r="3.5" fill="${color}" stroke="${css('--card')}" stroke-width="1.5"><title>${name} ${years[i]}: ${v}%</title></circle>`;
+      });
+    });
+    // End labels, pushed apart when schools finish close together
+    const ends = Object.entries(m.school)
+      .map(([name, vals]) => ({ v: vals[vals.length - 1], i: vals.length - 1 }))
+      .filter(e => e.v != null)
+      .sort((a, b) => a.v - b.v);
+    let prevY = Infinity;
+    ends.forEach(e => {
+      let y = Y(e.v) + 4;
+      if (prevY - y < 13) y = prevY - 13;
+      prevY = y;
+      g += `<text x="${X(e.i) + 8}" y="${y}" font-size="11" font-weight="600" fill="${ink3}">${e.v}%</text>`;
+    });
+    svg.innerHTML = g;
+    svg.setAttribute('aria-label', `Line chart: ${m.label} by year for three schools and England average`);
+    document.getElementById('trend-legend').innerHTML =
+      Object.keys(m.school).map(name => `<span class="li"><span class="sw" style="background:${schoolColor[name]()}"></span>${name}</span>`).join('')
+      + `<span class="li"><span class="sw" style="background:none;border-top:2px dashed ${ink3};border-radius:0;height:0"></span>England average</span>`;
+  }
+  renderChart('rwm');
+  document.getElementById('metric-select').addEventListener('change', e => renderChart(e.target.value));
+
+  // Re-render on theme change so series colors pick up dark-mode tokens
+  const rerender = () => location.reload();
+  new MutationObserver(muts => { if (muts.some(m => m.attributeName === 'data-theme')) rerender(); })
+    .observe(document.documentElement, { attributes: true });
+})();
+</script>
@@ -0,0 +1,437 @@
+<title>Compare screen — mobile mockup</title>
+<style>
+  :root {
+    --bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
+    --ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
+    --border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
+    --s1: #e07256; --s1-text: #b04a2e;
+    --s2: #00949b; --s2-text: #006a70;
+    --s3: #8664c9; --s3-text: #6a4bab;
+    --eng: #6d685f;
+    --good-bg: #e3efe6; --good-text: #1a6b34;
+    --warn-bg: #f6ecd4; --warn-text: #7a5d00;
+    --neutral-bg: #efeae1; --neutral-text: #5c564d;
+    --shadow: 0 2px 8px rgba(26,22,18,0.06);
+    --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
+    --body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #16130f; --bg-2: #201c16; --card: #241f19;
+      --ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
+      --border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
+      --s1: #f08b6e; --s1-text: #f4a58e;
+      --s2: #2fb8ae; --s2-text: #5fd0c8;
+      --s3: #a98fe0; --s3-text: #c0abec;
+      --eng: #9a927f;
+      --good-bg: #1e3325; --good-text: #7fd39a;
+      --warn-bg: #38301a; --warn-text: #e4c268;
+      --neutral-bg: #2b2620; --neutral-text: #bdb5a8;
+      --shadow: 0 2px 8px rgba(0,0,0,0.35);
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #16130f; --bg-2: #201c16; --card: #241f19;
+    --ink: #f2ede4; --ink-2: #bdb5a8; --ink-3: #9a927f;
+    --border: #3a342b; --accent: #f08b6e; --accent-bg: rgba(224,114,86,0.16);
+    --s1: #f08b6e; --s1-text: #f4a58e;
+    --s2: #2fb8ae; --s2-text: #5fd0c8;
+    --s3: #a98fe0; --s3-text: #c0abec;
+    --eng: #9a927f;
+    --good-bg: #1e3325; --good-text: #7fd39a;
+    --warn-bg: #38301a; --warn-text: #e4c268;
+    --neutral-bg: #2b2620; --neutral-text: #bdb5a8;
+    --shadow: 0 2px 8px rgba(0,0,0,0.35);
+  }
+  :root[data-theme="light"] {
+    --bg: #faf7f2; --bg-2: #f3ede4; --card: #ffffff;
+    --ink: #1a1612; --ink-2: #5c564d; --ink-3: #6d685f;
+    --border: #e5dfd5; --accent: #b04a2e; --accent-bg: rgba(224,114,86,0.12);
+    --s1: #e07256; --s1-text: #b04a2e;
+    --s2: #00949b; --s2-text: #006a70;
+    --s3: #8664c9; --s3-text: #6a4bab;
+    --eng: #6d685f;
+    --good-bg: #e3efe6; --good-text: #1a6b34;
+    --warn-bg: #f6ecd4; --warn-text: #7a5d00;
+    --neutral-bg: #efeae1; --neutral-text: #5c564d;
+    --shadow: 0 2px 8px rgba(26,22,18,0.06);
+  }
+
+  body { background: var(--bg-2); color: var(--ink); font-family: var(--body); line-height: 1.45; }
+
+  /* Phone canvas: true mobile width, framed on larger screens */
+  .phone { max-width: 400px; margin: 0 auto; background: var(--bg); min-height: 100vh; }
+  @media (min-width: 480px) {
+    .phone { margin: 1.5rem auto; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
+  }
+  .inner { padding: 1rem 0.9rem 3rem; }
+
+  .mock-note {
+    background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
+    padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--ink-2); margin-bottom: 1rem;
+  }
+  .mock-note strong { color: var(--accent); }
+
+  h1 { font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin: 0 0 0.2rem; }
+  .sub { color: var(--ink-2); margin: 0 0 1rem; font-size: 0.88rem; }
+
+  /* Sticky school chip bar — horizontal scroll */
+  .chipbar {
+    position: sticky; top: 0; z-index: 10; background: var(--bg);
+    display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.6rem 0.9rem;
+    border-bottom: 1px solid var(--border); margin: 0 -0.9rem 1rem; -webkit-overflow-scrolling: touch;
+  }
+  .chipbar::-webkit-scrollbar { display: none; }
+  .schip {
+    flex: none; display: inline-flex; align-items: center; gap: 0.4rem;
+    background: var(--card); border: 1px solid var(--border); border-radius: 999px;
+    padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
+  }
+  .schip .dot { width: 9px; height: 9px; border-radius: 50%; }
+  .schip .x { border: none; background: var(--bg-2); color: var(--ink-3); border-radius: 50%; width: 17px; height: 17px; font-size: 0.7rem; line-height: 1; }
+  .schip.add { color: var(--accent); border-style: dashed; }
+
+  h2.section-title {
+    font-family: var(--display); font-size: 1.2rem; font-weight: 700;
+    margin: 1.6rem 0 0; padding-left: 0.6rem; border-left: 3px solid var(--accent);
+  }
+  .how { font-size: 0.78rem; color: var(--ink-3); margin: 0.3rem 0 0.75rem 0.8rem; }
+
+  /* Measure-first block: one measure, all schools under it */
+  .measure { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; box-shadow: var(--shadow); }
+  .measure .mt { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; }
+  .measure .mh { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.05rem; }
+  .srow { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--border); margin-top: 0.45rem; flex-wrap: wrap; }
+  .srow:first-of-type { border-top: none; }
+  .srow .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
+  .srow .sn { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); width: 4.6rem; flex: none; }
+  .srow .val { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
+  .srow .note { font-size: 0.74rem; color: var(--ink-3); flex-basis: 100%; padding-left: 1.1rem; margin-top: -0.15rem; }
+
+  .chip { display: inline-block; font-size: 0.68rem; font-weight: 600; border-radius: 999px; padding: 0.12rem 0.5rem; white-space: nowrap; }
+  .chip.good { background: var(--good-bg); color: var(--good-text); }
+  .chip.warn { background: var(--warn-bg); color: var(--warn-text); }
+  .chip.neutral { background: var(--neutral-bg); color: var(--neutral-text); }
+  .ofsted-badge { display: inline-block; font-weight: 700; border-radius: 6px; padding: 0.14rem 0.5rem; font-size: 0.78rem; }
+  .ofsted-1 { background: var(--good-bg); color: var(--good-text); }
+  .illus { display: inline-block; font-size: 0.62rem; font-weight: 600; color: var(--accent); border: 1px dashed var(--accent); border-radius: 4px; padding: 0 0.3rem; }
+  .help { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink-3); color: var(--ink-3); font-size: 0.6rem; align-items: center; justify-content: center; flex: none; }
+
+  /* Dot strips */
+  .strip-row { margin: 0.9rem 0 1.3rem; }
+  .strip-row .t { font-weight: 600; font-size: 0.82rem; }
+  .strip { position: relative; height: 32px; margin-top: 0.4rem; }
+  .strip .track { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 2px; background: var(--bg-2); }
+  .strip .eng-tick { position: absolute; top: 4px; width: 2px; height: 24px; background: var(--eng); }
+  .strip .eng-lbl { position: absolute; top: -12px; transform: translateX(-50%); font-size: 0.62rem; color: var(--ink-3); white-space: nowrap; }
+  .strip .pt { position: absolute; top: 9px; width: 14px; height: 14px; border-radius: 50%; transform: translateX(-50%); border: 2px solid var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
+  .strip .pt-lbl { position: absolute; top: 25px; transform: translateX(-50%); font-size: 0.64rem; font-weight: 600; }
+  .legend { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--ink-2); margin-top: 0.4rem; }
+  .legend .li { display: inline-flex; align-items: center; gap: 0.3rem; }
+  .legend .sw { width: 9px; height: 9px; border-radius: 50%; }
+  .legend .engsw { width: 2px; height: 11px; background: var(--eng); }
+
+  .rc-list { display: flex; flex-direction: column; gap: 0.25rem; width: 100%; padding-left: 1.1rem; }
+  .rc-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; }
+  .rc-row .a { color: var(--ink-2); }
+
+  details.more-measures { margin-bottom: 0.6rem; }
+  details.more-measures summary { cursor: pointer; font-weight: 600; font-size: 0.82rem; color: var(--accent); padding: 0.2rem 0.2rem 0.5rem; }
+  .strip-note { font-size: 0.72rem; color: var(--ink-3); margin: 0.4rem 0.2rem 0; }
+  .metric-picker { margin-bottom: 0.6rem; }
+  .metric-picker select { width: 100%; font-family: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--ink); }
+  .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem; }
+  .swipe-hint { font-size: 0.7rem; color: var(--ink-3); text-align: center; margin-top: 0.3rem; }
+  .covid { fill: var(--bg-2); }
+  .covid-lbl { font-size: 0.6rem; fill: var(--ink-3); }
+
+  .footnote { font-size: 0.7rem; color: var(--ink-3); margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
+</style>
+
+<div class="phone"><div class="inner">
+  <p class="mock-note"><strong>Mobile mockup — proposed /compare.</strong> Mobile-first layout: measures stack vertically with all schools under each, so nothing needs horizontal swiping. Same live data as the desktop mockup.</p>
+
+  <h1>Compare schools</h1>
+  <p class="sub">Anchored against the England average — the grey tick — so you can tell what's typical at a glance.</p>
+
+  <div class="chipbar" aria-label="Schools in this comparison">
+    <span class="schip"><span class="dot" style="background:var(--s1)"></span>Barclay <button class="x" aria-label="Remove Barclay">×</button></span>
+    <span class="schip"><span class="dot" style="background:var(--s2)"></span>Elmhurst <button class="x" aria-label="Remove Elmhurst">×</button></span>
+    <span class="schip"><span class="dot" style="background:var(--s3)"></span>Plumcroft <button class="x" aria-label="Remove Plumcroft">×</button></span>
+    <span class="schip add">+ Add</span>
+  </div>
+
+  <h2 class="section-title">At a glance</h2>
+  <p class="how">The short version — each measure is explained in its own section below.</p>
+
+  <div class="measure">
+    <div class="mt">Latest Ofsted inspection</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="note">Older-style inspection, Oct 2021</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="note">Older-style inspection, Oct 2021</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span><span class="chip good">4 areas Strong standard</span> <span class="chip neutral">2 areas Expected</span> <span class="chip warn">Attendance &amp; behaviour: Attention needed</span> <span class="illus">illustrative</span></span><span class="note">New-style report card, Nov 2025 · safeguarding met · full detail in the Ofsted section below</span></div>
+  </div>
+
+  <div class="measure">
+    <div class="mt">Children reaching the expected standard <span class="help" title="% of Year 6 pupils reaching the expected standard in reading, writing and maths (2024/25).">?</span></div>
+    <div class="mh">England average: 62%</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val" style="color:var(--s1-text)">87%</span> <span class="chip good">Above average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val" style="color:var(--s2-text)">92%</span> <span class="chip good">Above average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val" style="color:var(--s3-text)">79%</span> <span class="chip good">Above average</span></div>
+  </div>
+
+  <div class="measure">
+    <div class="mt">Getting a place</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="chip good">97% of first choices offered</span><span class="note">Named on 457 forms · 180 places</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="chip warn">73% of first choices offered</span><span class="note">Named on 342 forms · 120 places</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="chip good">All first choices offered</span><span class="note">Named on 185 forms · 80 places</span></div>
+  </div>
+
+  <h2 class="section-title">Ofsted inspection</h2>
+  <p class="how">Ofsted stopped giving a single overall grade in September 2024 (inspections until November 2025 kept the area-by-area judgements); from November 2025 new inspections produce a report card rating each area of school life (Exceptional · Strong standard · Expected standard · Attention needed · Urgent improvement). A report card and an older grade aren't directly comparable. Ofsted's "Expected standard" rating is unrelated to the KS2 test measure below.</p>
+
+  <div class="measure">
+    <div class="mt">Latest inspection</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="ofsted-badge ofsted-1">Outstanding</span><span class="chip neutral">4+ years ago</span><span class="note">7 Oct 2021 · we don't hold area-by-area detail for this inspection · <a href="https://reports.ofsted.gov.uk/provider/21/138690" style="color:var(--accent)">Ofsted page →</a></span></div>
+    <div class="srow" style="align-items:flex-start"><span class="dot" style="background:var(--s2);margin-top:4px"></span><span class="sn">Elmhurst</span><span><span class="ofsted-badge ofsted-1">Outstanding</span> <span class="chip neutral">4+ years ago</span> <span style="font-size:0.72rem;color:var(--ink-3)">6 Oct 2021</span></span>
+      <div class="rc-list">
+        <div class="rc-row"><span class="a">Quality of education</span><span class="chip good">Outstanding</span></div>
+        <div class="rc-row"><span class="a">Behaviour &amp; attitudes</span><span class="chip good">Outstanding</span></div>
+        <div class="rc-row"><span class="a">Personal development</span><span class="chip good">Outstanding</span></div>
+        <div class="rc-row"><span class="a">Leadership &amp; management</span><span class="chip good">Outstanding</span></div>
+      </div>
+      <span class="note"><a href="https://reports.ofsted.gov.uk/provider/21/145362" style="color:var(--accent)">Ofsted page →</a></span>
+    </div>
+    <div class="srow" style="align-items:flex-start"><span class="dot" style="background:var(--s3);margin-top:4px"></span><span class="sn">Plumcroft</span><span><strong style="font-size:0.85rem">Report card</strong> <span class="illus">illustrative</span> <span style="font-size:0.72rem;color:var(--ink-3)">14 Nov 2025</span></span>
+      <div class="rc-list">
+        <div class="rc-row"><span class="a">Achievement</span><span class="chip good">Strong standard</span></div>
+        <div class="rc-row"><span class="a">Curriculum &amp; teaching</span><span class="chip good">Strong standard</span></div>
+        <div class="rc-row"><span class="a">Attendance &amp; behaviour</span><span class="chip warn">Attention needed</span></div>
+        <div class="rc-row"><span class="a">Personal development</span><span class="chip good">Strong standard</span></div>
+        <div class="rc-row"><span class="a">Inclusion</span><span class="chip neutral">Expected standard</span></div>
+        <div class="rc-row"><span class="a">Leadership &amp; governance</span><span class="chip good">Strong standard</span></div>
+        <div class="rc-row"><span class="a">Early years</span><span class="chip neutral">Expected standard</span></div>
+        <div class="rc-row"><span class="a">Safeguarding</span><span class="chip good">Met</span></div>
+      </div>
+      <span class="note"><a href="https://reports.ofsted.gov.uk/provider/21/100140" style="color:var(--accent)">Ofsted page →</a></span>
+    </div>
+  </div>
+
+  <h2 class="section-title">How children do academically</h2>
+  <p class="how">End of Year 6 national tests and teacher assessments (2024/25) — writing is teacher-assessed. Each line runs 0–100%; the grey tick is the England average.</p>
+  <div class="measure" id="strips"></div>
+  <details class="more-measures">
+    <summary>More measures — grammar, punctuation &amp; spelling, science, scaled scores</summary>
+    <div class="measure" id="strips-more" style="margin-top:0.5rem"></div>
+    <p class="strip-note">Strips show the 100–120 window of the full 80–120 scaled-score range; 100 is the expected standard (the strip widens if a school averages below it). England ticks for GPS and science aren't in our dataset yet, and the scaled-score ticks are indicative — official DfE figures will be loaded before launch.</p>
+  </details>
+  <div class="legend" id="strip-legend" style="padding:0 0.2rem 0"></div>
+
+  <div class="measure" style="margin-top:0.9rem">
+    <div class="mt">Children from lower-income families <span class="help" title="% of disadvantaged pupils (free school meals in the last 6 years, or looked after by the local authority) reaching the expected standard. State-school average: 46% (computed from our dataset). Small pupil groups — single pupils can move a school's figure noticeably.">?</span></div>
+    <div class="mh">State-school average: 46%</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">86%</span> <span class="chip good">Well above average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">93%</span> <span class="chip good">Well above average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">72%</span> <span class="chip good">Above average</span></div>
+  </div>
+
+  <h2 class="section-title">Getting a place</h2>
+  <p class="how">September 2026 entry. "First choice" = families who ranked the school top of their form (officially a "first preference"). Schools never see your ranking — places go by the admission criteria alone. Figures are National Offer Day offers; waiting lists and appeals can change the final intake.</p>
+  <div class="measure">
+    <div class="mt">First-choice families offered a place</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">97%</span><span class="note">Named on 457 forms · 180 places</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">73%</span> <span class="chip warn">Over 1 in 4 missed out</span><span class="note">Named on 342 forms · 120 places — check the school's admission criteria (for most non-faith primaries, distance decides)</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">100%</span><span class="note">Named on 185 forms · 80 places · every first choice offered</span></div>
+  </div>
+
+  <h2 class="section-title">Who goes there</h2>
+  <p class="how">From the latest school census (2025/26). No "right" numbers here — just context.</p>
+  <div class="measure">
+    <div class="mt">Pupils on roll</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">1,273</span><span class="note">At or above capacity · much larger than average · girls 51% / boys 49%</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">980</span><span class="note">98% full · much larger than average · girls 48% / boys 52%</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">1,056</span><span class="note">At or above capacity · much larger than average · girls 51% / boys 49%</span></div>
+  </div>
+  <div class="measure">
+    <div class="mt">Free school meals <span class="help" title="% eligible for free school meals. State-school average: 25% (computed from our dataset).">?</span></div>
+    <div class="mh">State-school average: 25% (our dataset)</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span class="val">26%</span> <span class="chip neutral">About average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span class="val">25%</span> <span class="chip neutral">About average</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span class="val">30%</span> <span class="chip neutral">A little above</span></div>
+  </div>
+  <div class="measure">
+    <div class="mt">English as an additional language · extra learning support (SEN) <span class="help" title="SEN = pupils receiving SEN support, not including EHC plans. State-school average: ≈14% (computed from our dataset). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign.">?</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span style="font-size:0.85rem">EAL 62% · SEN 6%</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span style="font-size:0.85rem">EAL 84% · SEN 8%</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span style="font-size:0.85rem">EAL 20% · SEN 28% <span class="chip neutral">SEN well above avg</span></span></div>
+  </div>
+  <div class="measure">
+    <div class="mt">Basics</div>
+    <div class="srow"><span class="dot" style="background:var(--s1)"></span><span class="sn">Barclay</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · Lion Academy Trust</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s2)"></span><span class="sn">Elmhurst</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · New Vision Trust</span></div>
+    <div class="srow"><span class="dot" style="background:var(--s3)"></span><span class="sn">Plumcroft</span><span style="font-size:0.85rem">Ages 3–11 · nursery · no faith · Greenwich council</span></div>
+  </div>
+
+  <h2 class="section-title">Explore trends</h2>
+  <p class="how">Every measure from the current compare page lives on here, grouped. Three are wired up in this mockup. School lines break where a year isn't in our dataset.</p>
+  <div class="metric-picker">
+    <select id="metric-select" aria-label="Measure">
+      <optgroup label="Expected standard">
+        <option value="rwm" selected>Reading, writing &amp; maths (combined)</option>
+        <option value="reading">Reading</option>
+        <option value="maths">Maths</option>
+        <option disabled>Writing (TA) · GPS · Science (TA)</option>
+      </optgroup>
+      <optgroup label="Higher standard"><option disabled>RWM · Reading · Maths · GPS</option><option disabled>Writing — greater depth (TA)</option></optgroup>
+      <optgroup label="Average scaled scores"><option disabled>Reading · Maths · GPS</option></optgroup>
+      <optgroup label="Equity"><option disabled>Disadvantaged pupils — expected standard</option></optgroup>
+      <optgroup label="School context"><option disabled>FSM % · EAL % · SEN support %</option></optgroup>
+    </select>
+  </div>
+  <div class="chart-wrap">
+    <svg id="trendchart" width="620" height="240" role="img" aria-label="Line chart: selected measure by year for three schools and England average"></svg>
+    <div class="legend" id="trend-legend"></div>
+  </div>
+  <p class="swipe-hint">← swipe the chart →</p>
+
+  <p class="footnote">
+    Sources: DfE Compare School Performance, Ofsted inspection outcomes, DfE admissions data, school census — all from datasets SchoolCompare already collects. England averages for test results are official DfE figures; FSM, language, SEN, size and disadvantaged-pupil benchmarks are computed across state schools in our dataset. Plumcroft's Ofsted report card is a made-up example of the November 2025 format (its real latest inspection is Good, June 2023). Following DfE practice, figures based on 5 or fewer pupils are suppressed and shown as "no data". Static mockup — tooltips and "+ Add" are illustrative.
+  </p>
+</div></div>
+
+<script>
+(function () {
+  const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
+  const schools = [
+    { name: 'Barclay',   color: () => css('--s1'), text: () => css('--s1-text') },
+    { name: 'Elmhurst',  color: () => css('--s2'), text: () => css('--s2-text') },
+    { name: 'Plumcroft', color: () => css('--s3'), text: () => css('--s3-text') },
+  ];
+
+  const strips = [
+    { label: 'Reading, writing & maths', eng: 62, vals: [87, 92, 79] },
+    { label: 'Reading', eng: 75, vals: [91, 92, 87] },
+    { label: 'Writing', eng: 72, vals: [94, 92, 83] },
+    { label: 'Maths', eng: 74, vals: [91, 95, 84] },
+    { label: 'Higher standard', eng: 8, vals: [22, 27, 12], tip: 'A high score in the reading and maths tests plus \u201cgreater depth\u201d in teacher-assessed writing.' },
+  ];
+  function renderStrips(list, el) {
+    list.forEach((s) => {
+      const min = s.min ?? 0, max = s.max ?? 100, unit = s.unit ?? '%';
+      const pos = v => (v - min) / (max - min) * 100;
+      const row = document.createElement('div');
+      row.className = 'strip-row';
+      let pts = '';
+      const sorted = s.vals.map((v, i) => ({ v, i })).sort((a, b) => a.v - b.v);
+      let lastBelow = -Infinity;
+      const nudge = (max - min) * 0.08;
+      sorted.forEach(({ v, i }) => {
+        const above = (v - lastBelow) < nudge;
+        if (!above) lastBelow = v;
+        pts += `<span class="pt" style="left:${pos(v)}%;background:${schools[i].color()}" title="${schools[i].name}: ${v}${unit}"></span>`
+             + `<span class="pt-lbl" style="left:${pos(v)}%;color:${schools[i].text()};${above ? 'top:-6px' : ''}">${v}</span>`;
+      });
+      const eng = s.eng != null
+        ? `<span class="eng-tick" style="left:${pos(s.eng)}%"></span><span class="eng-lbl" style="left:${pos(s.eng)}%">Eng ${s.eng}${unit}</span>`
+        : '';
+      row.innerHTML = `
+        <div class="t"${s.tip ? ` title="${s.tip}"` : ''}>${s.label}</div>
+        <div class="strip" role="img" aria-label="${s.label}: ${s.eng != null ? 'England average ' + s.eng + unit + ', ' : ''}${s.vals.map((v, i) => schools[i].name + ' ' + v + unit).join(', ')}">
+          <div class="track"></div>
+          ${eng}
+          ${pts}
+        </div>`;
+      el.appendChild(row);
+    });
+  }
+  renderStrips(strips, document.getElementById('strips'));
+  renderStrips([
+    { label: 'Grammar, punctuation & spelling', eng: null, vals: [86, 94, 82] },
+    { label: 'Science (teacher-assessed)', eng: null, vals: [95, 91, 83], tip: 'Teacher-assessed, like writing — no KS2 science test since 2009; comparisons are indicative.' },
+    { label: 'Avg scaled score — reading', eng: 106, vals: [107, 110, 109], min: 100, max: 120, unit: '' },
+    { label: 'Avg scaled score — maths', eng: 105, vals: [108, 113, 108], min: 100, max: 120, unit: '' },
+    { label: 'Avg scaled score — GPS', eng: 105, vals: [107, 114, 109], min: 100, max: 120, unit: '' },
+  ], document.getElementById('strips-more'));
+  document.getElementById('strip-legend').innerHTML =
+    schools.map(s => `<span class="li"><span class="sw" style="background:${s.color()}"></span>${s.name}</span>`).join('')
+    + '<span class="li"><span class="engsw"></span>England average</span>';
+
+  /* Metric-driven trend chart. Lines always break across the covid band
+     (2019/20-2020/21, cancelled tests); other nulls are dataset gaps. */
+  const years = ['2015/16','2016/17','2017/18','2018/19','2021/22','2022/23','2023/24','2024/25'];
+  const METRICS = {
+    rwm:     { school: { Barclay: [52,76,65,87,null,87,75,87], Elmhurst: [80,81,86,88,null,88,88,92], Plumcroft: [58,64,57,69,null,62,72,79] },
+               england: [null,61.1,64.3,64.9,58.7,59.5,60.6,62.1] },
+    reading: { school: { Barclay: [57,84,76,87,null,null,79,91], Elmhurst: [88,91,92,91,null,null,92,92], Plumcroft: [59,68,72,79,null,null,82,87] },
+               england: [null,71.6,75.3,73.2,74.6,72.8,74.4,75.0] },
+    maths:   { school: { Barclay: [81,82,74,90,null,null,88,91], Elmhurst: [96,89,97,97,null,null,96,95], Plumcroft: [80,80,69,90,null,null,84,84] },
+               england: [null,74.8,75.5,78.7,71.5,73.0,73.2,74.0] },
+  };
+  const schoolColor = { Barclay: () => css('--s1'), Elmhurst: () => css('--s2'), Plumcroft: () => css('--s3') };
+  const svg = document.getElementById('trendchart');
+  const W = 620, H = 240, L = 38, R = 44, T = 14, B = 34;
+  const slots = [0,1,2,3,6,7,8,9]; const maxSlot = 9;
+  const X = i => L + slots[i] * (W - L - R) / maxSlot;
+  const Y = v => T + (100 - v) * (H - T - B) / 60;
+  function runs(vals) {
+    const out = []; let cur = [];
+    vals.forEach((v, i) => {
+      if (v == null) { if (cur.length) out.push(cur); cur = []; return; }
+      if (i === 4 && cur.length && cur[cur.length - 1] === 3) { out.push(cur); cur = []; }
+      cur.push(i);
+    });
+    if (cur.length) out.push(cur);
+    return out;
+  }
+  function renderChart(key) {
+    const m = METRICS[key];
+    const ink3 = css('--ink-3'), border = css('--border');
+    let g = '';
+    const bx1 = X(3) + 12, bx2 = X(4) - 12;
+    g += `<rect class="covid" x="${bx1}" y="${T}" width="${bx2 - bx1}" height="${H - T - B}" rx="4"/>`;
+    g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 14}" text-anchor="middle">tests cancelled</text>`;
+    g += `<text class="covid-lbl" x="${(bx1 + bx2) / 2}" y="${T + 26}" text-anchor="middle">'19/20-'20/21</text>`;
+    for (let v = 40; v <= 100; v += 20) {
+      g += `<line x1="${L}" y1="${Y(v)}" x2="${W - R}" y2="${Y(v)}" stroke="${border}" stroke-width="1"/>`;
+      g += `<text x="${L - 6}" y="${Y(v) + 4}" text-anchor="end" font-size="10" fill="${ink3}">${v}%</text>`;
+    }
+    years.forEach((yr, i) => {
+      g += `<text x="${X(i)}" y="${H - B + 18}" text-anchor="middle" font-size="9.5" fill="${ink3}">${yr}</text>`;
+    });
+    const path = (vals, idx) => idx.map((i, k) => (k ? 'L' : 'M') + X(i) + ' ' + Y(vals[i])).join(' ');
+    runs(m.england).forEach(idx => {
+      if (idx.length > 1) g += `<path d="${path(m.england, idx)}" fill="none" stroke="${ink3}" stroke-width="1.5" stroke-dasharray="5 4"/>`;
+      else g += `<circle cx="${X(idx[0])}" cy="${Y(m.england[idx[0]])}" r="2" fill="${ink3}"><title>England ${years[idx[0]]}: ${Math.round(m.england[idx[0]])}%</title></circle>`;
+    });
+    Object.entries(m.school).forEach(([name, vals]) => {
+      const color = schoolColor[name]();
+      runs(vals).forEach(idx => {
+        if (idx.length > 1) g += `<path d="${path(vals, idx)}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round"/>`;
+      });
+      vals.forEach((v, i) => {
+        if (v == null) return;
+        g += `<circle cx="${X(i)}" cy="${Y(v)}" r="3" fill="${color}" stroke="${css('--card')}" stroke-width="1.5"><title>${name} ${years[i]}: ${v}%</title></circle>`;
+      });
+    });
+    const ends = Object.entries(m.school)
+      .map(([name, vals]) => ({ v: vals[vals.length - 1], i: vals.length - 1 }))
+      .filter(e => e.v != null)
+      .sort((a, b) => a.v - b.v);
+    let prevY = Infinity;
+    ends.forEach(e => {
+      let y = Y(e.v) + 3.5;
+      if (prevY - y < 12) y = prevY - 12;
+      prevY = y;
+      g += `<text x="${X(e.i) + 7}" y="${y}" font-size="10" font-weight="600" fill="${ink3}">${e.v}%</text>`;
+    });
+    svg.innerHTML = g;
+    document.getElementById('trend-legend').innerHTML =
+      Object.keys(m.school).map(name => `<span class="li"><span class="sw" style="background:${schoolColor[name]()}"></span>${name}</span>`).join('')
+      + `<span class="li"><span class="sw" style="background:none;border-top:2px dashed ${ink3};border-radius:0;height:0"></span>England avg</span>`;
+  }
+  renderChart('rwm');
+  document.getElementById('metric-select').addEventListener('change', e => renderChart(e.target.value));
+
+  new MutationObserver(muts => { if (muts.some(m => m.attributeName === 'data-theme')) location.reload(); })
+    .observe(document.documentElement, { attributes: true });
+})();
+</script>