= {
+ published: '',
+ 'not-oversubscribed': 'No cut-off needed',
+ 'not-published': '—',
+};
+
+export function CutoffYearTable({ rows }: { rows: CutoffYearRow[] }) {
+ if (rows.length === 0) return null;
+
+ const showPlaces = rows.some((r) => r.placesOffered != null);
+
+ return (
+
+
+
+ Last distance offered by year, with the reason where no figure was published
+
+
+
+ | Year |
+ Last distance |
+ {showPlaces && Places | }
+ Status |
+
+
+
+ {rows.map((r, i) => (
+
+ | {r.year} |
+
+ {r.status === 'published' ? r.figure : DISTANCE_TEXT[r.status]}
+ {r.status === 'published' && (r.routeCount ?? 1) > 1 && (
+
+ {' '}furthest of {r.routeCount}
+
+ )}
+ |
+ {showPlaces && (
+
+ {r.placesOffered ?? '—'}
+ |
+ )}
+
+
+ {STATUS_LABEL[r.status]}
+
+ |
+
+ ))}
+
+
+
- {schoolInfo.local_authority
- ? `${schoolInfo.local_authority} has not published a cut-off distance for this school.`
- : 'No cut-off distance has been published for this school.'}{' '}
- Contact the admissions authority for its oversubscription criteria.
+ {describeCutoffAbsence({
+ localAuthority: schoolInfo.local_authority,
+ admissionsPolicy: schoolInfo.admissions_policy,
+ admissionsHistory,
+ })}
)}
+ {/* Inline rather than behind a tab: this template is one flat panel by
+ design and has no segmented control to hang a third view on. The
+ caveat is suppressed because it is already directly above. */}
+
+
{hasSixthForm && (
This school has a sixth form (Post-16 provision). Post-16 destination data coming soon.
diff --git a/nextjs-app/components/school/SecondarySchoolSections.tsx b/nextjs-app/components/school/SecondarySchoolSections.tsx
index 9c95439..aa9b37e 100644
--- a/nextjs-app/components/school/SecondarySchoolSections.tsx
+++ b/nextjs-app/components/school/SecondarySchoolSections.tsx
@@ -32,7 +32,11 @@ export interface SecondarySchoolSectionsProps {
ofsted: OfstedInspection | null;
census: SchoolCensus | null;
admissions: SchoolAdmissions | null;
+ /** Needed to tell a year with no published cut-off apart from a year the
+ * school simply was not oversubscribed. */
+ admissionsHistory: SchoolAdmissions[];
admissionDistance: SchoolAdmissionDistance | null;
+ admissionDistanceHistory: SchoolAdmissionDistance[];
deprivation: SchoolDeprivation | null;
finance: SchoolFinance | null;
nationalAvg: NationalAverages | null;
@@ -41,7 +45,8 @@ export interface SecondarySchoolSectionsProps {
export function SecondarySchoolSections({
schoolInfo, yearlyData, ofsted, census,
- admissions, admissionDistance, deprivation, finance, nationalAvg, flags,
+ admissions, admissionsHistory, admissionDistance, admissionDistanceHistory,
+ deprivation, finance, nationalAvg, flags,
}: SecondarySchoolSectionsProps) {
const secondaryAvg = nationalAvg?.secondary ?? {};
@@ -86,6 +91,8 @@ export function SecondarySchoolSections({
diff --git a/nextjs-app/components/school/charts.tsx b/nextjs-app/components/school/charts.tsx
index 83535a0..1cfe7b3 100644
--- a/nextjs-app/components/school/charts.tsx
+++ b/nextjs-app/components/school/charts.tsx
@@ -24,3 +24,8 @@ export const AdmissionsTrendChart = dynamic(
() => import('../AdmissionsTrendChart'),
{ ssr: false },
);
+
+export const CutoffTrendChart = dynamic(
+ () => import('../CutoffTrendChart'),
+ { ssr: false },
+);
diff --git a/nextjs-app/components/school/lastDistanceOffered.ts b/nextjs-app/components/school/lastDistanceOffered.ts
index 5523384..035d458 100644
--- a/nextjs-app/components/school/lastDistanceOffered.ts
+++ b/nextjs-app/components/school/lastDistanceOffered.ts
@@ -59,3 +59,319 @@ export function describeCutoff(
: null,
};
}
+
+// ---------------------------------------------------------------------------
+// Year-by-year history
+// ---------------------------------------------------------------------------
+
+/**
+ * Why a year has no cut-off figure.
+ *
+ * The distinction matters more than the figure does. A missing year is not one
+ * fact but three, and collapsing them into "no data" throws away the most
+ * reassuring case (the school had places for everyone who put it first) and
+ * the most important caveat (nobody published anything, so we cannot say).
+ */
+export type CutoffYearStatus =
+ /** The authority published a cut-off for this year. */
+ | 'published'
+ /**
+ * No cut-off published, and EES shows fewer first-preference applications
+ * than places offered. Note the precise claim: this says the school was not
+ * oversubscribed ON FIRST PREFERENCES, which is what the data supports. It
+ * does NOT establish that every applicant was offered a place — total
+ * applications can still exceed places — so no copy here may say so.
+ */
+ | 'not-oversubscribed'
+ /** Nothing published, and nothing in the admissions data to explain why. */
+ | 'not-published';
+
+export interface CutoffYearRow {
+ year: number;
+ status: CutoffYearStatus;
+ /** Straight-line metres, present only when status is 'published'. */
+ distanceM: number | null;
+ /** Formatted figure, present only when status is 'published'. */
+ figure: string | null;
+ placesOffered: number | null;
+ routeCount: number | null;
+}
+
+interface AdmissionsYearLike {
+ year: number;
+ places_offered?: number | null;
+ oversubscribed?: boolean | null;
+}
+
+/**
+ * EES years are six-digit academic codes (202425); cut-off years are plain
+ * entry years (2024). Both denote the same September intake, so they have to be
+ * reduced to a common key before they can be matched.
+ */
+export function entryYearOf(year: number): number {
+ const s = String(year);
+ return s.length === 6 ? Number(s.slice(0, 4)) : year;
+}
+
+/**
+ * One row per year across the full span the school has any record for, newest
+ * first. Years with no record at all still appear — an unbroken axis is what
+ * makes a gap legible as a gap.
+ */
+export function cutoffYearRows(
+ /* Defaulted, not merely optional: admission_distance_history is an additive
+ API field, so a frontend deployed ahead of its backend receives undefined
+ here. Defaulting keeps that a section that renders nothing rather than a
+ page that throws. */
+ history: SchoolAdmissionDistance[] = [],
+ admissionsHistory: AdmissionsYearLike[] = [],
+): CutoffYearRow[] {
+ const published = new Map();
+ for (const d of history ?? []) {
+ if (d.distance_m != null) published.set(entryYearOf(d.year), d);
+ }
+
+ const admissions = new Map();
+ for (const a of admissionsHistory ?? []) admissions.set(entryYearOf(a.year), a);
+
+ const years = [...published.keys(), ...admissions.keys()];
+ if (years.length === 0) return [];
+
+ // The span is bounded by the cut-off data, not by admissions: EES reaches
+ // back further than councils publish, and padding the chart with a decade of
+ // "not published" would bury the years that carry a figure.
+ const publishedYears = [...published.keys()];
+ const from = publishedYears.length ? Math.min(...publishedYears) : Math.min(...years);
+ const to = Math.max(...years);
+
+ const rows: CutoffYearRow[] = [];
+ for (let y = to; y >= from; y -= 1) {
+ const d = published.get(y);
+ const a = admissions.get(y);
+
+ let status: CutoffYearStatus = 'not-published';
+ if (d) status = 'published';
+ else if (a?.oversubscribed === false) status = 'not-oversubscribed';
+
+ rows.push({
+ year: y,
+ status,
+ distanceM: d?.distance_m ?? null,
+ figure: d ? formatCutoffDistance(d.distance_m)?.primary ?? null : null,
+ placesOffered: a?.places_offered ?? null,
+ routeCount: d?.route_count ?? null,
+ });
+ }
+ return rows;
+}
+
+/**
+ * A factual summary of how the cut-off has moved.
+ *
+ * Deliberately not a verdict. It names both endpoints and their years and lets
+ * the reader draw the conclusion, because the series is short, gappy, and
+ * driven by things outside the school's control — one large sibling cohort
+ * moves it. Withheld below four published points, where a swing between two
+ * years is noise wearing the clothes of a trend.
+ */
+export function cutoffTrendSummary(rows: CutoffYearRow[]): string | null {
+ const pts = rows.filter((r) => r.status === 'published' && r.distanceM != null);
+ if (pts.length < 4) return null;
+
+ // rows are newest-first
+ const latest = pts[0];
+ const earliest = pts[pts.length - 1];
+ const a = formatCutoffDistance(earliest.distanceM)?.primary;
+ const b = formatCutoffDistance(latest.distanceM)?.primary;
+ if (!a || !b) return null;
+
+ const change = latest.distanceM! - earliest.distanceM!;
+ // A tenth of the earlier figure — below that the endpoints are effectively
+ // the same and calling it a direction would be reading noise.
+ const meaningful = Math.abs(change) > earliest.distanceM! * 0.1;
+
+ const direction = !meaningful
+ ? 'has stayed broadly the same'
+ : change < 0
+ ? 'has tightened'
+ : 'has widened';
+
+ return `Across ${pts.length} published years the cut-off ${direction}: `
+ + `${a} in ${earliest.year}, ${b} in ${latest.year}.`;
+}
+
+// ---------------------------------------------------------------------------
+// "Would we have got in?"
+// ---------------------------------------------------------------------------
+
+/**
+ * How close a home has to be to a year's cut-off before the comparison stops
+ * meaning anything, in metres.
+ *
+ * A UK postcode unit covers roughly fifteen addresses and postcodes.io returns
+ * its centroid, so the home point carries error of this order before anything
+ * else is considered. Against a cut-off that is often only 500 m, that is a
+ * fifth of the whole distance. Inside this band the honest answer is that we
+ * cannot tell, and saying "you would have been offered a place" would be
+ * inventing precision the inputs do not have.
+ */
+export const CUTOFF_UNCERTAINTY_M = 100;
+
+export type CutoffVerdict = 'inside' | 'outside' | 'too-close' | 'unknown';
+
+export interface CutoffYearComparison {
+ year: number;
+ status: CutoffYearStatus;
+ verdict: CutoffVerdict;
+}
+
+export interface CutoffCheckResult {
+ /** Straight-line metres from the given postcode to the school. */
+ distanceM: number;
+ distanceLabel: string;
+ years: CutoffYearComparison[];
+ /** Years the home is clearly inside, out of those with a published figure. */
+ insideCount: number;
+ comparableCount: number;
+ headline: string;
+ detail: string;
+}
+
+export function compareToCutoffs(
+ distanceM: number,
+ rows: CutoffYearRow[],
+): CutoffCheckResult {
+ const years: CutoffYearComparison[] = rows.map((r) => {
+ if (r.status !== 'published' || r.distanceM == null) {
+ return { year: r.year, status: r.status, verdict: 'unknown' as const };
+ }
+ const margin = r.distanceM - distanceM;
+ const verdict: CutoffVerdict =
+ Math.abs(margin) <= CUTOFF_UNCERTAINTY_M ? 'too-close' : margin > 0 ? 'inside' : 'outside';
+ return { year: r.year, status: r.status, verdict };
+ });
+
+ const comparable = years.filter((y) => y.verdict !== 'unknown');
+ const inside = comparable.filter((y) => y.verdict === 'inside');
+ const tooClose = comparable.filter((y) => y.verdict === 'too-close');
+ const label = formatCutoffDistance(distanceM)?.primary ?? `${Math.round(distanceM)} m`;
+
+ let headline: string;
+ if (comparable.length === 0) {
+ headline = `${label} from the school`;
+ } else if (inside.length === comparable.length) {
+ headline = `${label} away — inside the cut-off in all ${comparable.length} `
+ + `${comparable.length === 1 ? 'year' : 'years'} with a published figure`;
+ } else if (inside.length === 0 && tooClose.length === 0) {
+ headline = `${label} away — outside the cut-off in every year with a published figure`;
+ } else {
+ headline = `${label} away — inside the cut-off in ${inside.length} of `
+ + `${comparable.length} years with a published figure`;
+ }
+
+ const parts: string[] = [];
+ if (tooClose.length > 0) {
+ parts.push(
+ `${tooClose.length} ${tooClose.length === 1 ? 'year is' : 'years are'} too close to call: `
+ + 'your postcode is a centroid covering several addresses, so a margin under '
+ + `${CUTOFF_UNCERTAINTY_M} m is inside the measurement error.`,
+ );
+ }
+ const unknown = years.length - comparable.length;
+ if (unknown > 0) {
+ parts.push(`${unknown} ${unknown === 1 ? 'year has' : 'years have'} no published figure to compare against.`);
+ }
+
+ return {
+ distanceM,
+ distanceLabel: label,
+ years,
+ insideCount: inside.length,
+ comparableCount: comparable.length,
+ headline,
+ detail: parts.join(' '),
+ };
+}
+
+/**
+ * The limits of the check, stated where a parent will act on it.
+ *
+ * Every clause is load-bearing. Distance is the last criterion applied, not the
+ * first; the authority's own measurement may be a walking route rather than a
+ * straight line, which is always longer for the same home; and a past cut-off
+ * constrains next year's not at all.
+ */
+export const CUTOFF_CHECK_CAVEAT =
+ 'An indication only. Places go first to children in care, EHCP places, '
+ + 'siblings and — at faith schools — on faith criteria, so a home inside the '
+ + 'distance can still miss out. Some authorities measure a walking route '
+ + 'rather than a straight line, which is always longer for the same home, and '
+ + "next year's cut-off depends on next year's applicants. Always check the "
+ + "school's own admissions policy.";
+
+/**
+ * The rings are a drawing of a number, not a boundary anyone administers.
+ *
+ * The walking-route caveat belongs to CUTOFF_CHECK_CAVEAT immediately below
+ * this on the page, which states it more usefully ("always longer for the same
+ * home"). Saying it in both places read as a stutter.
+ */
+export const CUTOFF_MAP_CAVEAT =
+ 'Each ring is the straight-line cut-off for that year, drawn around the '
+ + 'school. It illustrates the distance — it is not a catchment boundary.';
+
+// ---------------------------------------------------------------------------
+// When there is no figure
+// ---------------------------------------------------------------------------
+
+interface AbsenceInput {
+ localAuthority?: string | null;
+ admissionsPolicy?: string | null;
+ admissionsHistory?: AdmissionsYearLike[];
+}
+
+/**
+ * Why this school has no cut-off distance, in the most useful terms available.
+ *
+ * "No data" is the least informative thing we could say, and for two of these
+ * cases it is also the most pessimistic reading of a fact that is either
+ * neutral or good news. The order matters: a selective school's absence is
+ * explained by how it admits, which outranks anything the publication record
+ * says.
+ */
+export function describeCutoffAbsence({
+ localAuthority,
+ admissionsPolicy,
+ admissionsHistory = [],
+}: AbsenceInput): string {
+ const policy = (admissionsPolicy ?? '').toLowerCase();
+ if (policy.includes('selective')) {
+ return 'Places at this school are ranked by the entrance test rather than by '
+ + 'distance, so no cut-off distance applies.';
+ }
+
+ const known = admissionsHistory.filter((a) => a.oversubscribed != null);
+ if (known.length >= 3 && known.every((a) => a.oversubscribed === false)) {
+ return `First preferences have not exceeded places in any of the last ${known.length} `
+ + 'years, so this school has not needed a distance cut-off.';
+ }
+
+ return (localAuthority
+ ? `${localAuthority} has not published a cut-off distance for this school.`
+ : 'No cut-off distance has been published for this school.')
+ + ' Contact the admissions authority for its oversubscription criteria.';
+}
+
+/**
+ * A short note on how thin the record is.
+ *
+ * Four points is the same threshold the trend summary uses: below it the series
+ * is too short to carry a direction, and saying so is more useful than leaving
+ * the reader to count the rows.
+ */
+export function cutoffCoverageNote(rows: CutoffYearRow[]): string | null {
+ const published = rows.filter((r) => r.status === 'published').length;
+ if (published === 0 || published >= 4) return null;
+ return `Only ${published} ${published === 1 ? 'year has' : 'years have'} a published figure, `
+ + 'which is too few to read as a trend.';
+}
diff --git a/nextjs-app/components/school/schoolSections.module.css b/nextjs-app/components/school/schoolSections.module.css
index a9f4515..066ec49 100644
--- a/nextjs-app/components/school/schoolSections.module.css
+++ b/nextjs-app/components/school/schoolSections.module.css
@@ -2064,3 +2064,383 @@
.secondaryScope .ofstedReportLink { margin-left: 0; display: block; margin-top: 0.25rem; }
.secondaryScope .admissionsTypeBadge { font-size: 0.75rem; }
}
+
+/* ══════════════════════════════════════════════════════════════════════
+ Last distance offered — the Distance view, map and postcode check
+ ══════════════════════════════════════════════════════════════════════ */
+
+/* Visually hidden but still read aloud. The year strip encodes its verdict as
+ a glyph, so every chip carries a spelled-out equivalent here — a screen
+ reader announcing "2025 ✓" tells you nothing. */
+.srOnly {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ border: 0;
+}
+
+.cutoffChartKey {
+ margin: 0.6rem 0 0;
+ font-size: 0.8125rem;
+ line-height: 1.55;
+ color: var(--text-secondary);
+ max-width: 68ch;
+}
+
+/* ── Year-by-year table ── */
+
+.cutoffTableWrap {
+ margin-top: 1.25rem;
+ overflow-x: auto;
+}
+
+.cutoffTable {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+ /* Below this the four columns crush; the wrapper scrolls instead of the
+ page, so the section itself never scrolls sideways. */
+ min-width: 26rem;
+ font-variant-numeric: tabular-nums;
+}
+
+.cutoffTable thead th {
+ text-align: right;
+ font-size: 0.6875rem;
+ font-weight: 600;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--text-secondary);
+ padding: 0 0.625rem 0.55rem;
+ border-bottom: 1px solid var(--border);
+ white-space: nowrap;
+}
+
+.cutoffTable thead th:first-child,
+.cutoffTable tbody th {
+ text-align: left;
+}
+
+.cutoffTable tbody td,
+.cutoffTable tbody th {
+ text-align: right;
+ padding: 0.65rem 0.625rem;
+ border-bottom: 1px solid var(--border);
+ font-weight: 400;
+ color: var(--text-primary);
+}
+
+.cutoffTable tbody th {
+ font-weight: 600;
+}
+
+.cutoffTable tbody tr:last-child td,
+.cutoffTable tbody tr:last-child th {
+ border-bottom: none;
+}
+
+.cutoffRowLatest td,
+.cutoffRowLatest th {
+ background: var(--bg-secondary);
+}
+
+.cutoffCellMissing {
+ color: var(--text-secondary);
+}
+
+.cutoffRouteFlag {
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ white-space: nowrap;
+}
+
+.cutoffPill {
+ display: inline-block;
+ font-size: 0.6875rem;
+ font-weight: 600;
+ padding: 0.15rem 0.55rem;
+ border-radius: 999px;
+ white-space: nowrap;
+}
+
+.cutoffPillOver {
+ background: var(--brand-bg);
+ color: var(--brand-strong);
+}
+
+.cutoffPillOk {
+ background: var(--status-above-bg);
+ color: var(--status-above);
+}
+
+.cutoffPillNa {
+ background: var(--bg-secondary);
+ color: var(--text-secondary);
+}
+
+/* ── Map panel ── */
+
+.cutoffMapPanel {
+ margin-top: 1.75rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--border);
+}
+
+.cutoffMapTitle {
+ margin: 0 0 0.85rem;
+ font-family: var(--font-display);
+ font-size: 1.1rem;
+ font-weight: 700;
+ letter-spacing: -0.01em;
+ color: var(--text-primary);
+}
+
+.cutoffMapFigure {
+ height: 320px;
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ border: 1px solid var(--border);
+ background: var(--bg-secondary);
+}
+
+.cutoffMapSkeleton {
+ width: 100%;
+ height: 100%;
+ background: var(--bg-secondary);
+}
+
+.cutoffMapLegend {
+ list-style: none;
+ margin: 0.85rem 0 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem 1.25rem;
+ font-size: 0.8125rem;
+ color: var(--text-secondary);
+}
+
+.cutoffMapLegend li {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.45rem;
+}
+
+.cutoffSwatch {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ flex: none;
+}
+
+.cutoffSwatchNow {
+ background: var(--brand-bg);
+ box-shadow: inset 0 0 0 2px var(--brand);
+}
+
+.cutoffSwatchPast {
+ background: transparent;
+ box-shadow: inset 0 0 0 1.5px var(--brand);
+ opacity: 0.5;
+}
+
+.cutoffSwatchHome {
+ width: 11px;
+ height: 11px;
+ border-radius: 2px;
+ background: var(--status-above);
+ transform: rotate(45deg);
+}
+
+.cutoffMapCaveat {
+ margin: 0.75rem 0 0;
+ font-size: 0.8125rem;
+ line-height: 1.55;
+ color: var(--text-secondary);
+ max-width: 68ch;
+}
+
+/* ── Postcode check ── */
+
+.cutoffCheck {
+ margin-top: 1.5rem;
+ padding-top: 1.25rem;
+ border-top: 1px solid var(--border);
+}
+
+.cutoffCheckTitle {
+ margin: 0 0 0.25rem;
+ font-family: var(--font-display);
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--text-primary);
+}
+
+.cutoffCheckSub {
+ margin: 0 0 0.85rem;
+ font-size: 0.8125rem;
+ line-height: 1.55;
+ color: var(--text-secondary);
+ max-width: 62ch;
+}
+
+.cutoffCheckForm {
+ display: flex;
+ gap: 0.5rem;
+ flex-wrap: wrap;
+}
+
+.cutoffCheckInput {
+ font: inherit;
+ font-size: 1rem;
+ padding: 0.6rem 0.8rem;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ background: var(--bg-card);
+ color: var(--text-primary);
+ text-transform: uppercase;
+ /* Grows into the row but never past it — at 320px a fixed width would push
+ the button out of the viewport. */
+ flex: 1 1 9rem;
+ /* Stops well short of full width on desktop, where a postcode field
+ spanning the whole card reads as a search box. */
+ max-width: 16rem;
+ min-width: 0;
+}
+
+.cutoffCheckInput::placeholder {
+ text-transform: none;
+ color: var(--text-secondary);
+}
+
+.cutoffCheckInput:focus-visible {
+ outline: 2px solid var(--brand);
+ outline-offset: 1px;
+ border-color: var(--brand);
+}
+
+.cutoffCheckButton {
+ font: inherit;
+ font-weight: 600;
+ font-size: 1rem;
+ padding: 0.6rem 1.25rem;
+ border: none;
+ border-radius: var(--radius-md);
+ background: var(--brand);
+ color: var(--brand-on);
+ cursor: pointer;
+ flex: none;
+ transition: background var(--transition);
+}
+
+.cutoffCheckButton:hover:not(:disabled) {
+ background: var(--brand-strong);
+}
+
+.cutoffCheckButton:disabled {
+ opacity: 0.65;
+ cursor: progress;
+}
+
+.cutoffCheckButton:focus-visible {
+ outline: 2px solid var(--brand);
+ outline-offset: 2px;
+}
+
+.cutoffCheckError {
+ margin: 0.75rem 0 0;
+ font-size: 0.875rem;
+ color: var(--status-below);
+}
+
+.cutoffCheckResult {
+ margin-top: 0.9rem;
+ padding: 0.9rem 1rem;
+ border-radius: var(--radius-md);
+ background-color: var(--bg-card);
+ background-image: linear-gradient(var(--brand-bg), var(--brand-bg));
+}
+
+.cutoffCheckHeadline {
+ margin: 0;
+ font-family: var(--font-display);
+ font-size: 1.05rem;
+ font-weight: 700;
+ line-height: 1.35;
+ color: var(--text-primary);
+ text-wrap: balance;
+}
+
+.cutoffCheckDetail {
+ margin: 0.35rem 0 0;
+ font-size: 0.8125rem;
+ line-height: 1.55;
+ color: var(--text-secondary);
+}
+
+.cutoffYearStrip {
+ list-style: none;
+ margin: 0.75rem 0 0;
+ padding: 0;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.3rem;
+}
+
+.cutoffYearChip {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ font-size: 0.75rem;
+ font-weight: 600;
+ padding: 0.2rem 0.5rem;
+ border-radius: 999px;
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
+}
+
+.cutoffYearChipYear {
+ font-weight: 700;
+}
+
+.cutoffYearInside {
+ background: var(--status-above-bg);
+ color: var(--status-above);
+}
+
+.cutoffYearOutside {
+ background: var(--status-below-bg);
+ color: var(--status-below);
+}
+
+/* Deliberately neutral rather than a warning colour: "we cannot tell" is not a
+ bad outcome, and tinting it amber would read as one. */
+.cutoffYearTooClose {
+ background: var(--bg-secondary);
+ color: var(--text-primary);
+ box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.cutoffYearUnknown {
+ background: var(--bg-secondary);
+ color: var(--text-secondary);
+}
+
+.cutoffCheckCaveat {
+ margin: 0.9rem 0 0;
+ font-size: 0.8125rem;
+ line-height: 1.55;
+ color: var(--text-secondary);
+ max-width: 68ch;
+}
+
+@media (max-width: 640px) {
+ .cutoffMapFigure {
+ height: 260px;
+ }
+}
diff --git a/nextjs-app/lib/types.ts b/nextjs-app/lib/types.ts
index 32ff142..426bf85 100644
--- a/nextjs-app/lib/types.ts
+++ b/nextjs-app/lib/types.ts
@@ -356,6 +356,12 @@ export interface SchoolDetailsResponse {
admissions_history: SchoolAdmissions[];
/** Latest published cut-off distance, or null where the LA publishes none. */
admission_distance: SchoolAdmissionDistance | null;
+ /**
+ * Every published cut-off year, oldest first. Sparse by nature — a school may
+ * have 2021 and 2026 and nothing between, so consumers must classify the
+ * missing years rather than joining the points they do have.
+ */
+ admission_distance_history: SchoolAdmissionDistance[];
deprivation: SchoolDeprivation | null;
finance: SchoolFinance | null;
}