fix(detail): render report cards and date them by the report-card inspection

The detail views detected report cards via ofsted.framework === 'ReportCard',
but the API sets framework to the raw event grouping ('Schools - S5') even
for report-card schools — so the check never matched: report-card schools
rendered as legacy 'Ofsted Rating' badges dated to a pre-Nov-2025
inspection (e.g. Barclay shown as 'Outstanding, Inspected 7 October 2021'
instead of its Feb 2026 report card).

Detect report cards by the presence of the report_card object (matching
the compare screen), and date them with rc_inspection_date, never the
legacy inspection_date. Applies to both primary and secondary detail views.
New e2e assertion against a real report-card school gates it.

Note: the list/map surface has the same latent issue via ofsted_framework
(LeafletMapInner) — flagged as a separate follow-up.

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

e2e/tests/journeys.spec.ts

@@ -94,6 +94,33 @@ test('school detail page renders name and performance data', async ({ page }) =>
   await expect(page.locator('canvas:visible').first()).toBeVisible({ timeout: 15_000 });
 });
 
+test('a report-card school shows its report card, dated to the report-card inspection', async ({ page }) => {
+  // Detail views detected report cards via `framework`, which the API never
+  // sets to "ReportCard" — so report-card schools rendered as legacy ratings
+  // dated to a pre-Nov-2025 inspection. Detection now keys off the report_card
+  // object and dates it with rc_inspection_date.
+  const RC_URN = 138690; // Barclay Primary — has a Nov-2025+ report card
+  const res = await page.request.get(`/api/schools/${RC_URN}`);
+  expect(res.ok()).toBeTruthy();
+  const ofsted = (await res.json()).ofsted;
+  test.skip(
+    !ofsted?.report_card || Object.keys(ofsted.report_card).length === 0,
+    'precondition: chosen URN must currently have a report card',
+  );
+  const rcYear = new Date(ofsted.rc_inspection_date).getFullYear();
+  const legacyYear = new Date(ofsted.inspection_date).getFullYear();
+
+  await page.goto(`/school/${RC_URN}`);
+  const ofstedSection = page.locator('#ofsted');
+  // Detection fixed: rendered as a Report Card, not a legacy "Ofsted Rating".
+  await expect(ofstedSection.getByText('Ofsted Report Card')).toBeVisible({ timeout: 15_000 });
+  // Dating fixed: dated to the report-card inspection, never the legacy one.
+  await expect(ofstedSection.getByText(new RegExp(`Inspected .*${rcYear}`))).toBeVisible();
+  if (legacyYear !== rcYear) {
+    await expect(ofstedSection.getByText(new RegExp(`Inspected .*${legacyYear}`))).toHaveCount(0);
+  }
+});
+
 test('school with no performance data still gets a working detail page', async ({ page }) => {
   // Schools without KS2/KS4 results (special post-16 institutions, sixth-form
   // centres, PRUs) used to 500 in the API — NaN GIAS fields broke JSON

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

@@ -0,0 +1,65 @@
+/**
+ * Secondary academics: every headline number carries its England anchor and a
+ * verdict chip (expert sign-off SF1 — the grade-5 and EBacc rows previously
+ * rendered as bare numbers, breaking the "anchored against England" promise).
+ */
+
+import { render, screen, within } from '@testing-library/react';
+
+import { CompareAcademics } from '@/components/compare/CompareAcademics';
+import type { ComparisonData, NationalAverages, School } from '@/lib/types';
+
+function school(urn: number, name: string): School {
+  return { urn, school_name: name, attainment_8_score: 58.7 } as School;
+}
+
+function data(urn: number): ComparisonData {
+  return {
+    school_info: school(urn, 'Test High'),
+    yearly_data: [
+      {
+        year: 202425,
+        attainment_8_score: 58.7,
+        english_maths_strong_pass_pct: 30,
+        ebacc_entry_pct: 10,
+      },
+    ] as ComparisonData['yearly_data'],
+    ofsted: null,
+    census: null,
+    admissions: null,
+    admissions_history: [],
+    deprivation: null,
+  };
+}
+
+const NATIONAL: NationalAverages = {
+  year: 202425,
+  primary: {},
+  secondary: {
+    attainment_8_score: 46.0,
+    english_maths_strong_pass_pct: 45.4,
+    ebacc_entry_pct: 40.5,
+  },
+  by_year: [],
+};
+
+test('grade-5 and EBacc rows show the England anchor and a Below chip when under it', () => {
+  const s = school(137086, 'Bishop Stopford School');
+  render(
+    <CompareAcademics
+      schools={[s]}
+      data={{ '137086': data(137086) }}
+      nationalAverages={NATIONAL}
+      isSecondary
+    />,
+  );
+
+  // The official anchors appear (45.4% and 40.5%), not just the school numbers.
+  expect(screen.getByText(/England average 45%/)).toBeInTheDocument();
+  expect(screen.getByText(/England average 41%/)).toBeInTheDocument();
+
+  // 30% grade-5 and 10% EBacc are both well below their anchors → Below chips.
+  // Attainment 8 (58.7 vs 46.0) is above → at least one "Above" chip too.
+  expect(screen.getAllByText(/Below England average/).length).toBeGreaterThanOrEqual(2);
+  expect(screen.getAllByText(/Above England average/).length).toBeGreaterThanOrEqual(1);
+});

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

@@ -73,6 +73,15 @@ describe('buildCompareChart', () => {
     expect(eng.data[chart.years.indexOf(202122)]).toBe(58.7);
   });
 
+  it('lists England-only years so the component can caption dashed-only stretches', () => {
+    const chart = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct', {
+      202122: 58.7,
+    });
+    expect(chart.englandOnlyYears).toEqual([202122]);
+    const none = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct');
+    expect(none.englandOnlyYears).toEqual([]);
+  });
+
   it('flags the unpublished 2021/22 school-level year when England has data but schools do not', () => {
     const withNational = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct', {
       202122: 58.7,

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

@@ -177,6 +177,16 @@ describe('summariseAdmissions', () => {
     expect(s.chip).toEqual({ tone: 'warn', text: 'Over 1 in 4 first choices missed out' });
   });
 
+  it('60% → "About 1 in 3 first choices missed out"', () => {
+    const s = summariseAdmissions(admissions({ first_preference_offer_pct: 60 }));
+    expect(s.chip).toEqual({ tone: 'warn', text: 'About 1 in 3 first choices missed out' });
+  });
+
+  it('44% (selective-scale demand) → "More than half of first choices missed out"', () => {
+    const s = summariseAdmissions(admissions({ first_preference_offer_pct: 43.69 }));
+    expect(s.chip).toEqual({ tone: 'warn', text: 'More than half of first choices missed out' });
+  });
+
   it('100% → "All first choices offered"', () => {
     const s = summariseAdmissions(admissions({ first_preference_offer_pct: 100 }));
     expect(s.chip).toEqual({ tone: 'good', text: 'All first choices offered' });

nextjs-app/app/globals.css

@@ -183,10 +183,15 @@ body {
 }
 
 /* Secondary: teal outline — supporting actions (+ Compare) */
+/* NOTE: a duplicate `.btn` block further down this file sets `border: none`,
+   which wins over the base `.btn`'s `1px solid transparent`. The outline
+   variants below therefore declare the full `border` shorthand explicitly so
+   they don't depend on the base border-width — otherwise `border-color` alone
+   has no width and the outline never renders (buttons read as plain text). */
 .btn-secondary {
     background: transparent;
     color: var(--accent-teal);
-    border-color: var(--accent-teal);
+    border: 1px solid var(--accent-teal);
 }
 .btn-secondary:hover:not(:disabled) {
     background: var(--accent-teal-bg);
@@ -196,7 +201,7 @@ body {
 .btn-tertiary {
     background: var(--bg-secondary);
     color: var(--text-secondary);
-    border-color: var(--border-color);
+    border: 1px solid var(--border-color);
 }
 .btn-tertiary:hover:not(:disabled) {
     background: var(--border-color);
@@ -207,7 +212,7 @@ body {
 .btn-active {
     background: var(--accent-teal-bg);
     color: var(--accent-teal);
-    border-color: var(--accent-teal);
+    border: 1px solid var(--accent-teal);
 }
 .btn-active:hover:not(:disabled) {
     background: transparent;

nextjs-app/components/ComparisonChart.module.css

@@ -1,16 +1,23 @@
-/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
-   parent .chartContainer, whose fixed height drives Chart.js sizing via
-   maintainAspectRatio: false. */
+/* Chart wrapper: chips (mobile) above, then the canvas, then the gap note.
+   The canvas has its OWN definite height (Chart.js needs one for
+   maintainAspectRatio: false); the chips and the note flow at their natural
+   size around it rather than competing with it for a fixed outer height —
+   so a longer note (e.g. the KS4 gap caption) or a two-row chip legend can
+   never squash the chart. */
 .wrapper {
     display: flex;
     flex-direction: column;
-    height: 100%;
 }
 
 .canvasBox {
     position: relative;
-    flex: 1 1 auto;
-    min-height: 0;
+    height: 380px;
+}
+
+@media (max-width: 640px) {
+    .canvasBox {
+        height: 280px;
+    }
 }
 
 /* School chips: mobile-only legend + tap-to-focus control. Desktop keeps

nextjs-app/components/ComparisonChart.tsx

@@ -38,13 +38,15 @@ interface ComparisonChartProps {
   /** Official England figure per academic year for this metric — renders a
    * dashed grey reference line when provided. */
   nationalByYear?: Record<number, number | null | undefined>;
+  /** KS4 metrics get a different (honest) gap caption than KS2. */
+  isSecondary?: boolean;
 }
 
 // One shape per basket slot (MAX_SCHOOLS = 5) — secondary encoding so
 // converging lines stay tellable apart without relying on hue alone.
 const POINT_STYLES: PointStyle[] = ['circle', 'triangle', 'rect', 'rectRot', 'star'];
 
-export function ComparisonChart({ comparisonData, schools, metric, metricLabel, nationalByYear }: ComparisonChartProps) {
+export function ComparisonChart({ comparisonData, schools, metric, metricLabel, nationalByYear, isSecondary = false }: ComparisonChartProps) {
   const isMobile = useIsMobile();
   const [focusedUrn, setFocusedUrn] = useState<number | null>(null);
 
@@ -168,7 +170,7 @@ export function ComparisonChart({ comparisonData, schools, metric, metricLabel,
         display: true,
         title: {
           display: !isMobile,
-          text: kind === 'percentage' ? 'Percentage (%)' : kind === 'progress' ? 'Progress Score' : 'Value',
+          text: kind === 'percentage' ? 'Percentage (%)' : kind === 'progress' ? 'Progress Score' : 'Score',
           font: {
             size: 12,
             weight: 'bold',
@@ -240,11 +242,23 @@ export function ComparisonChart({ comparisonData, schools, metric, metricLabel,
       <div className={styles.canvasBox}>
         <Line data={chartData} options={options} aria-label={`${metricLabel} comparison chart`} />
       </div>
-      {built.showUnpublished202122Note && (
+      {isSecondary && built.englandOnlyYears.length > 0 ? (
+        // KS4's honest story differs from KS2's: 2019/20–2020/21 school-level
+        // GCSE results weren't published (COVID grading); later years WERE
+        // published by DfE but aren't in our dataset yet.
         <p className={styles.chartNote}>
-          No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn&apos;t publish
-          school-level figures for 2021/22 — the England average is shown for that year.
+          School-level GCSE figures for 2019/20 and 2020/21 weren&apos;t published (COVID
+          grading), and more recent years aren&apos;t in our dataset yet where lines break — the
+          England average is shown where available.
         </p>
+      ) : (
+        !isSecondary &&
+        built.showUnpublished202122Note && (
+          <p className={styles.chartNote}>
+            No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn&apos;t publish
+            school-level figures for 2021/22 — the England average is shown for that year.
+          </p>
+        )
       )}
     </div>
   );

nextjs-app/components/ComparisonView.tsx

@@ -365,12 +365,18 @@ export function ComparisonView({
             style={{ '--school-count': activeSchools.length } as CSSProperties}
             aria-label="Schools in this comparison"
           >
-            {/* Fills the 200px label rail on desktop (hidden on mobile). */}
+            {/* Fills the 200px label rail on desktop (hidden on mobile).
+                All-through schools must not be miscounted as "primary
+                schools"/"secondary schools" — mixed baskets get "· primary
+                view" phrasing instead. */}
             <div className={styles.barCaption}>
               <span className={styles.barCaptionEyebrow}>Comparing</span>
               <span className={styles.barCaptionCount}>
-                {activeSchools.length} {comparePhase} school
-                {activeSchools.length === 1 ? '' : 's'}
+                {activeSchools.every((sch) =>
+                  sch.phase?.toLowerCase().includes(comparePhase),
+                )
+                  ? `${activeSchools.length} ${comparePhase} school${activeSchools.length === 1 ? '' : 's'}`
+                  : `${activeSchools.length} schools · ${comparePhase} view`}
               </span>
             </div>
             {activeSchools.map((school, index) => (
@@ -390,7 +396,13 @@ export function ComparisonView({
                     <span className={styles.chipNameShort}>{shortName(school.school_name)}</span>
                   </a>
                   <span className={styles.chipMeta}>
-                    {[school.local_authority, school.school_type].filter(Boolean).join(' · ')}
+                    {[
+                      /all.?through/i.test(school.phase ?? '') ? 'All-through' : null,
+                      school.local_authority,
+                      school.school_type,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
                   </span>
                 </span>
                 <button

nextjs-app/components/Modal.module.css

@@ -123,7 +123,13 @@
   .modal {
     width: 100%;
     max-width: 100%;
-    max-height: 95vh;
+    /* Bottom sheet sized against the overlay (which tracks the visual
+       viewport), NOT vh: when the keyboard is open the overlay is short, so
+       max-height:100% keeps the whole sheet — input and results — above the
+       keyboard. min-height gives a comfortable default without a tiny stub,
+       but is capped at 100% so it never exceeds the visible area. */
+    min-height: min(55vh, 100%);
+    max-height: 100%;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     animation: slideUp 0.3s ease;

nextjs-app/components/Modal.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './Modal.module.css';
 
@@ -18,6 +18,8 @@ interface ModalProps {
 }
 
 export function Modal({ isOpen, onClose, children, title, size = 'medium' }: ModalProps) {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
   const handleEscape = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose();
@@ -39,6 +41,32 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
     };
   }, [isOpen, handleEscape]);
 
+  // Pin the overlay to the VISUAL viewport, not the layout viewport. On mobile
+  // the on-screen keyboard shrinks the visual viewport but not the layout one,
+  // so a `position: fixed; inset: 0` overlay keeps full height — leaving the
+  // bottom-anchored sheet (and the dim backdrop's lower half) hidden behind
+  // the keyboard. Tracking visualViewport.height/offsetTop keeps the whole
+  // overlay — backdrop and sheet — inside the visible area, above the keyboard.
+  useEffect(() => {
+    if (!isOpen) return;
+    const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+    const el = overlayRef.current;
+    if (!vv || !el) return;
+
+    const sync = () => {
+      el.style.top = `${vv.offsetTop}px`;
+      el.style.height = `${vv.height}px`;
+      el.style.bottom = 'auto';
+    };
+    sync();
+    vv.addEventListener('resize', sync);
+    vv.addEventListener('scroll', sync);
+    return () => {
+      vv.removeEventListener('resize', sync);
+      vv.removeEventListener('scroll', sync);
+    };
+  }, [isOpen]);
+
   if (!isOpen || typeof window === 'undefined') return null;
 
   const handleOverlayClick = (e: React.MouseEvent) => {
@@ -48,7 +76,7 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
   };
 
   return createPortal(
-    <div className={styles.overlay} onClick={handleOverlayClick}>
+    <div ref={overlayRef} className={styles.overlay} onClick={handleOverlayClick}>
       <div className={`${styles.modal} ${styles[size]}`}>
         <div className={styles.header}>
           {title && <h2 className={styles.title}>{title}</h2>}

nextjs-app/components/SchoolDetailView.tsx

@@ -269,9 +269,24 @@ export function SchoolDetailView({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navItems.map(n => n.id).join(',')]);
 
+  // A report card is identified by the presence of report-card area
+  // judgements, NOT by `framework` — the API sets `framework` to the raw
+  // event grouping (e.g. "Schools - S5") even for report-card schools, so
+  // the old `framework === 'ReportCard'` test never matched and report cards
+  // were rendered as legacy ratings dated to a pre-Nov-2025 inspection.
+  const isReportCard = !!(
+    ofsted?.report_card && Object.keys(ofsted.report_card).length > 0
+  );
+  // A report card is dated by its own inspection (rc_inspection_date); the
+  // legacy inspection_date belongs to an older inspection and must never
+  // date a report card (report cards exist only from Nov 2025).
+  const ofstedInspectedDate = isReportCard
+    ? ofsted?.rc_inspection_date ?? null
+    : ofsted?.inspection_date ?? null;
+
   // ── Ofsted: detect if all OEIF sub-grades match the overall ───────────
   const oeifAllSameGrade = (() => {
-    if (!ofsted || ofsted.framework === 'ReportCard') return false;
+    if (!ofsted || isReportCard) return false;
     const subs = [
       ofsted.quality_of_education,
       ofsted.behaviour_attitudes,
@@ -507,10 +522,10 @@ export function SchoolDetailView({
       {ofsted && (
         <section id="ofsted" className={styles.card}>
           <h2 className={styles.sectionTitle}>
-            {ofsted.framework === 'ReportCard' ? 'Ofsted Report Card' : 'Ofsted Rating'}
-            {ofsted.inspection_date && (
+            {isReportCard ? 'Ofsted Report Card' : 'Ofsted Rating'}
+            {ofstedInspectedDate && (
               <span className={styles.ofstedDate}>
-                Inspected {new Date(ofsted.inspection_date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
+                Inspected {new Date(ofstedInspectedDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
               </span>
             )}
             <a
@@ -525,7 +540,7 @@ export function SchoolDetailView({
             </a>
           </h2>
 
-          {ofsted.framework === 'ReportCard' ? (
+          {isReportCard ? (
             /* ── New Report Card layout ── */
             <>
               <p className={styles.ofstedDisclaimer}>

nextjs-app/components/SchoolSearchModal.module.css

@@ -2,14 +2,6 @@
   padding: 1.5rem;
 }
 
-.title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary, #1a1612);
-  margin-bottom: 1.5rem;
-  font-family: var(--font-playfair), 'Playfair Display', serif;
-}
-
 .warning {
   background: var(--accent-gold-bg);
   border: 1px solid var(--accent-gold, #c9a227);
@@ -119,12 +111,16 @@
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary, #1a1612);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.resultButton {
+  flex: 0 0 auto;
+}
+
 .schoolMeta {
   display: flex;
   gap: 1rem;
@@ -159,21 +155,30 @@
     padding: 1rem;
   }
 
-  .title {
-    font-size: 1.25rem;
+  /* One scroll container on mobile: the modal content itself scrolls, so the
+     results list must not add its own inner scroll (double scrollbars, and
+     the input would be trapped above a short 400px window when the keyboard
+     shrinks the sheet). */
+  .results {
+    max-height: none;
+    overflow: visible;
   }
 
+  /* Compact stacked card: name + meta, then a full-width action so the tap
+     target is obvious and the card doesn't waste vertical space. */
   .resultItem {
     flex-direction: column;
     align-items: stretch;
+    gap: 0.625rem;
+    padding: 0.875rem;
   }
 
-  .addButton {
+  .resultButton {
     width: 100%;
   }
 
   .schoolMeta {
-    flex-direction: column;
-    gap: 0.25rem;
+    flex-wrap: wrap;
+    gap: 0.25rem 1rem;
   }
 }

nextjs-app/components/SchoolSearchModal.tsx

@@ -81,10 +81,8 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose}>
+    <Modal isOpen={isOpen} onClose={handleClose} title="Add School to Comparison">
       <div className={styles.modalContent}>
-        <h2 className={styles.title}>Add School to Comparison</h2>
-
         {!canAddMore && (
           <div className={styles.warning}>
             Maximum 5 schools can be compared. Remove a school to add another.
@@ -129,9 +127,9 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 <button
                   onClick={() => handleAddSchool(school)}
                   disabled={alreadySelected || !canAddMore}
-                  className={
+                  className={`${styles.resultButton} ${
                     alreadySelected ? "btn btn-active" : "btn btn-secondary"
-                  }
+                  }`}
                 >
                   {alreadySelected ? "✓ Comparing" : "+ Compare"}
                 </button>

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -186,9 +186,23 @@ export function SecondarySchoolDetailView({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navItems.map(n => n.id).join(',')]);
 
+  // A report card is identified by the presence of report-card area
+  // judgements, NOT by `framework` — the API sets `framework` to the raw
+  // event grouping (e.g. "Schools - S5") even for report-card schools, so
+  // the old `framework === 'ReportCard'` test never matched and report cards
+  // were rendered as legacy ratings dated to a pre-Nov-2025 inspection.
+  const isReportCard = !!(
+    ofsted?.report_card && Object.keys(ofsted.report_card).length > 0
+  );
+  // Report cards are dated by their own inspection (rc_inspection_date), never
+  // the legacy inspection_date (report cards exist only from Nov 2025).
+  const ofstedInspectedDate = isReportCard
+    ? ofsted?.rc_inspection_date ?? null
+    : ofsted?.inspection_date ?? null;
+
   // ── Ofsted: detect if all OEIF sub-grades match the overall ───────────
   const oeifAllSameGrade = (() => {
-    if (!ofsted || ofsted.framework === 'ReportCard') return false;
+    if (!ofsted || isReportCard) return false;
     const subs = [
       ofsted.quality_of_education,
       ofsted.behaviour_attitudes,
@@ -332,10 +346,10 @@ export function SecondarySchoolDetailView({
       {ofsted && (
         <section id="ofsted" className={styles.card}>
           <h2 className={styles.sectionTitle}>
-            {ofsted.framework === 'ReportCard' ? 'Ofsted Report Card' : 'Ofsted Rating'}
-            {ofsted.inspection_date && (
+            {isReportCard ? 'Ofsted Report Card' : 'Ofsted Rating'}
+            {ofstedInspectedDate && (
               <span className={styles.ofstedDate}>
-                {' '}Inspected {new Date(ofsted.inspection_date).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
+                {' '}Inspected {new Date(ofstedInspectedDate).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
               </span>
             )}
             <a
@@ -349,7 +363,7 @@ export function SecondarySchoolDetailView({
               Ofsted reports ↗
             </a>
           </h2>
-          {ofsted.framework === 'ReportCard' ? (
+          {isReportCard ? (
             <>
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.

nextjs-app/components/compare/CompareAcademics.tsx

@@ -148,9 +148,35 @@ export function CompareAcademics({
       }
       return null;
     });
+    // DfE stopped publishing Progress 8 from 2024/25: those GCSE year groups
+    // sat no KS2 tests (COVID), so there is no baseline to measure progress
+    // from. A bare "No data" reads as a gap on our side — say why. Judged
+    // PER SCHOOL on its own latest data year: a school whose data simply
+    // stops earlier (an unrelated gap) must not borrow the COVID explanation
+    // from a neighbour that does have 2024/25 data.
+    const p8NotPublished = urns.map((urn) => {
+      const rows = data[String(urn)]?.yearly_data ?? [];
+      const y = rows.length ? Math.trunc(rows[rows.length - 1].year) : 0;
+      return y >= 202425;
+    });
     const grade5 = latestValues(data, urns, 'english_maths_strong_pass_pct');
     const ebacc = latestValues(data, urns, 'ebacc_entry_pct');
     const att8Anchor = nationalAverages?.secondary?.attainment_8_score;
+    const grade5Anchor = nationalAverages?.secondary?.english_maths_strong_pass_pct;
+    const ebaccAnchor = nationalAverages?.secondary?.ebacc_entry_pct;
+
+    // Every headline number gets its England anchor + verdict chip, so the
+    // "anchored against the England average" promise holds for the grade-5
+    // and EBacc rows too, not just Attainment 8.
+    const anchorChip = (value: number | null, anchor: number | null | undefined, tol: number) => {
+      if (value == null || anchor == null) return null;
+      const v = verdict(value, anchor, tol);
+      return (
+        <Chip tone={v === 'above' ? 'good' : v === 'below' ? 'warn' : 'neutral'}>
+          {v === 'above' ? 'Above' : v === 'below' ? 'Below' : 'Close to'} England average
+        </Chip>
+      );
+    };
 
     return (
       <Section
@@ -163,7 +189,8 @@ export function CompareAcademics({
             <Cell key={school.urn} school={school} index={i}>
               {att8[i] != null ? (
                 <>
-                  <span className={s.big}>{(att8[i] as number).toFixed(1)}</span>
+                  <span className={s.big}>{(att8[i] as number).toFixed(1)}</span>{' '}
+                  {anchorChip(att8[i], att8Anchor, 2)}
                   {att8Anchor != null && (
                     <span className={s.small}>England average {att8Anchor.toFixed(1)}</span>
                   )}
@@ -189,6 +216,11 @@ export function CompareAcademics({
                 >
                   {banding[i]}
                 </Chip>
+              ) : p8NotPublished[i] ? (
+                <span className={s.small}>
+                  Not published — this GCSE year group sat no KS2 tests (COVID), so DfE has no
+                  baseline to measure progress from
+                </span>
               ) : (
                 <span className={s.small}>No data</span>
               )}
@@ -200,14 +232,38 @@ export function CompareAcademics({
           </RowLabel>
           {schools.map((school, i) => (
             <Cell key={school.urn} school={school} index={i}>
-              {grade5[i] != null ? `${Math.round(grade5[i] as number)}%` : <span className={s.small}>No data</span>}
+              {grade5[i] != null ? (
+                <>
+                  <span className={s.big} style={{ fontSize: '1.1rem' }}>
+                    {Math.round(grade5[i] as number)}%
+                  </span>{' '}
+                  {anchorChip(grade5[i], grade5Anchor, 3)}
+                  {grade5Anchor != null && (
+                    <span className={s.small}>England average {Math.round(grade5Anchor)}%</span>
+                  )}
+                </>
+              ) : (
+                <span className={s.small}>No data</span>
+              )}
             </Cell>
           ))}
 
           <RowLabel tip="% entering the English Baccalaureate subject combination.">EBacc entry</RowLabel>
           {schools.map((school, i) => (
             <Cell key={school.urn} school={school} index={i}>
-              {ebacc[i] != null ? `${Math.round(ebacc[i] as number)}%` : <span className={s.small}>No data</span>}
+              {ebacc[i] != null ? (
+                <>
+                  <span className={s.big} style={{ fontSize: '1.1rem' }}>
+                    {Math.round(ebacc[i] as number)}%
+                  </span>{' '}
+                  {anchorChip(ebacc[i], ebaccAnchor, 3)}
+                  {ebaccAnchor != null && (
+                    <span className={s.small}>England average {Math.round(ebaccAnchor)}%</span>
+                  )}
+                </>
+              ) : (
+                <span className={s.small}>No data</span>
+              )}
             </Cell>
           ))}
         </SectionGrid>
@@ -218,6 +274,24 @@ export function CompareAcademics({
   const national = nationalAverages?.primary;
   const disadvantaged = latestValues(data, urns, 'rwm_expected_disadvantaged_pct');
   const disadvantagedAnchor = benchmarks?.primary?.disadvantaged_rwm_expected_pct ?? null;
+  // Cohort size behind the disadvantaged figure (spec §8.5): these are small
+  // groups where single pupils move the percentage — show roughly how many
+  // pupils the figure rests on. Taken from the SAME yearly row that supplies
+  // the displayed percentage: resolving eligible_pupils and the
+  // disadvantaged share independently could mix years and misstate the
+  // cohort behind the figure.
+  const cohorts = urns.map((urn) => {
+    const rows = data[String(urn)]?.yearly_data ?? [];
+    for (let i = rows.length - 1; i >= 0; i--) {
+      const row = rows[i];
+      if (row.rwm_expected_disadvantaged_pct != null) {
+        if (row.eligible_pupils == null || row.disadvantaged_pct == null) return null;
+        const cohort = Math.round((row.eligible_pupils * row.disadvantaged_pct) / 100);
+        return cohort > 0 ? cohort : null;
+      }
+    }
+    return null;
+  });
 
   return (
     <Section
@@ -270,6 +344,9 @@ export function CompareAcademics({
                     <span className={s.big} style={{ fontSize: '1.1rem' }}>
                       {Math.round(value)}%
                     </span>{' '}
+                    {cohorts[i] != null && (
+                      <span className={s.small}>of ~{cohorts[i]} disadvantaged pupils</span>
+                    )}{' '}
                     {disadvantagedAnchor != null && (
                       <Chip tone={verdict(value, disadvantagedAnchor, 5) === 'below' ? 'warn' : 'good'}>
                         {verdict(value, disadvantagedAnchor, 5) === 'above' &&

nextjs-app/components/compare/CompareAtAGlance.tsx

@@ -170,8 +170,14 @@ export function CompareAtAGlance({
         {schools.map((school, i) => {
           const census = data[String(school.urn)]?.census;
           const pupils = census?.total_pupils ?? school.total_pupils ?? null;
+          // An all-through school's roll covers every age group, so judging
+          // it against the single-phase median ("Much larger than average")
+          // is meaningless — label the roll honestly instead.
+          const isAllThrough = /all.?through/i.test(school.phase ?? '');
           let sizeNote: string | null = null;
-          if (pupils != null && medianPupils != null) {
+          if (isAllThrough) {
+            sizeNote = 'Whole-school roll (all-through, all ages)';
+          } else if (pupils != null && medianPupils != null) {
             if (pupils >= medianPupils * 1.5) sizeNote = 'Much larger than average';
             else if (pupils >= medianPupils * 1.1) sizeNote = 'Larger than average';
             else if (pupils <= medianPupils * 0.66) sizeNote = 'Much smaller than average';

nextjs-app/components/compare/CompareCommunity.tsx

@@ -48,10 +48,25 @@ export function CompareCommunity({
     );
   };
 
+  const anyAllThrough = schools.some((school) => /all.?through/i.test(school.phase ?? ''));
+
   return (
     <Section
       title="Who goes there"
-      how="The school's community, from the latest school census. State-school averages are computed from our dataset and shown for context — there's no “right” number here."
+      how={
+        <>
+          The school&apos;s community, from the latest school census. State-school averages are
+          computed from our dataset and shown for context — there&apos;s no &ldquo;right&rdquo;
+          number here.
+          {anyAllThrough && (
+            <>
+              {' '}
+              For all-through schools these figures cover the whole school, all ages — not just
+              the {isSecondary ? 'secondary' : 'primary'} phase.
+            </>
+          )}
+        </>
+      }
     >
       <SectionGrid schools={schools}>
         <Measure label="Pupils on roll">

nextjs-app/components/compare/CompareOfsted.tsx

@@ -239,8 +239,17 @@ export function CompareOfsted({
             `https://reports.ofsted.gov.uk/provider/21/${school.urn}`;
           return (
             <Cell key={school.urn} school={school} index={i}>
-              <a className={s.link} href={url} target="_blank" rel="noopener noreferrer">
-                {school.school_name}&apos;s Ofsted page →
+              {/* Short visible label to save space on mobile (the coloured
+                  school name already leads the row); the full name stays in
+                  aria-label so screen readers can tell the links apart. */}
+              <a
+                className={s.link}
+                href={url}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={`${school.school_name}'s Ofsted page`}
+              >
+                Ofsted page →
               </a>
             </Cell>
           );

nextjs-app/components/compare/TrendsExplorer.module.css

@@ -60,18 +60,10 @@
   margin: 0 0 1rem;
 }
 
-/* ComparisonChart runs Chart.js with maintainAspectRatio:false, so it fills
-   its container's height — which must be *definite*. A min-height alone does
-   not resolve the chart wrapper's height:100%, leaving Chart.js to fall back
-   to its ~150px default (a squashed sliver). Give it a real height. */
+/* ComparisonChart owns its own canvas height now (a definite px value per
+   breakpoint), with the mobile chip legend above and the gap note below it
+   flowing at natural size. This box therefore only needs to not constrain
+   that height — no fixed height, or the note would again eat the plot. */
 .chartBox {
-  height: 420px;
-}
-
-@media (max-width: 640px) {
-  /* Taller on mobile: the mobile-only school chips sit above the canvas and
-     wrap to two rows for 3+ schools, so the plot keeps a usable height. */
-  .chartBox {
-    height: 360px;
-  }
+  min-height: 0;
 }

nextjs-app/components/compare/TrendsExplorer.tsx

@@ -119,6 +119,7 @@ export function TrendsExplorer({
               metric={metric}
               metricLabel={metricLabel}
               nationalByYear={nationalByYear}
+              isSecondary={!isPrimaryPhase}
             />
           </div>
         </div>

nextjs-app/components/compare/compareSections.module.css

@@ -72,15 +72,18 @@
   align-items: center;
   gap: 0.4rem;
   flex-basis: 100%;
-  font-size: 0.8rem;
+  /* Slightly larger than the values below it so the school each row belongs
+     to is easy to read on mobile (hidden on desktop, where the column header
+     names the school). */
+  font-size: 0.9rem;
   font-weight: 600;
   color: var(--sc, var(--text-secondary));
-  margin-bottom: 0.15rem;
+  margin-bottom: 0.2rem;
 }
 
 .cellDot {
-  width: 9px;
-  height: 9px;
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
   background: var(--dot, var(--text-muted));
   flex: none;

nextjs-app/lib/compareChartData.ts

@@ -53,6 +53,10 @@ export interface CompareChart {
   /** True when England published a 2021/22 figure but no school has one —
    * the UI shows: "DfE didn't publish school-level figures for 2021/22". */
   showUnpublished202122Note: boolean;
+  /** Years where the England overlay has a value but no school does — the
+   * chart shows a dashed-line-only stretch that needs explaining (KS2 and
+   * KS4 have different honest explanations, so the component owns the copy). */
+  englandOnlyYears: number[];
 }
 
 export function buildCompareChart(
@@ -92,11 +96,12 @@ export function buildCompareChart(
     }
   }
 
-  const idx202122 = years.indexOf(202122);
-  const showUnpublished202122Note =
-    idx202122 >= 0 &&
-    englandDataset?.data[idx202122] != null &&
-    schoolDatasets.every((ds) => ds.data[idx202122] == null);
+  const englandOnlyYears = years.filter(
+    (year, i) =>
+      englandDataset?.data[i] != null && schoolDatasets.every((ds) => ds.data[i] == null),
+  );
 
-  return { years, schoolDatasets, englandDataset, showUnpublished202122Note };
+  const showUnpublished202122Note = englandOnlyYears.includes(202122);
+
+  return { years, schoolDatasets, englandDataset, showUnpublished202122Note, englandOnlyYears };
 }

nextjs-app/lib/compareLogic.ts

@@ -192,6 +192,12 @@ export function summariseAdmissions(
   if (pct != null) {
     if (pct >= 100) {
       chip = { tone: 'good', text: 'All first choices offered' };
+    } else if (pct < 50) {
+      // Banded, not one blanket chip: "Over 1 in 4" on a school where more
+      // than half missed out understated the worst cases by half.
+      chip = { tone: 'warn', text: 'More than half of first choices missed out' };
+    } else if (pct < 67) {
+      chip = { tone: 'warn', text: 'About 1 in 3 first choices missed out' };
     } else if (pct < 75) {
       chip = { tone: 'warn', text: 'Over 1 in 4 first choices missed out' };
     } else {