fix(detail): let the special-school note span the full container width

Drop the note's `max-width: 72ch`, which left it stopping well short of the
section's right edge. It now fills the results-section container like the
subtitle paragraph above it.

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

backend/app.py

@@ -807,10 +807,6 @@ async def get_la_averages(request: Request):
 _KS2_NATIONAL_METRICS = [
     "rwm_expected_pct", "rwm_high_pct",
     "reading_expected_pct", "writing_expected_pct", "maths_expected_pct",
-    # Per-subject higher-standard nationals: reading/maths reach the "higher
-    # standard" in the tests; writing is teacher-assessed at "greater depth"
-    # (writing_gd_pct). Needed so each SATs bar compares to its own benchmark.
-    "reading_high_pct", "writing_gd_pct", "maths_high_pct",
     "gps_expected_pct", "gps_high_pct", "science_expected_pct",
     "reading_avg_score", "maths_avg_score", "gps_avg_score",
     "reading_progress", "writing_progress", "maths_progress",

backend/tests/test_national_averages_marts.py

@@ -25,11 +25,6 @@ class _Ks2Row:
     year = LATEST
     rwm_expected_pct = 62.1
     gps_expected_pct = 72.0
-    # Per-subject higher-standard nationals — reading/maths reach the higher
-    # standard, writing is teacher-assessed at greater depth (writing_gd_pct).
-    reading_high_pct = 29.0
-    writing_gd_pct = 13.0
-    maths_high_pct = 24.0
 
 
 class _Ks4Row:
@@ -89,16 +84,6 @@ def test_ks4_averages_come_from_the_mart_not_the_dataframe(payload):
     assert body["by_year"][-1]["secondary"]["progress_8_score"] == -0.02
 
 
-def test_per_subject_higher_standard_nationals_are_surfaced(payload):
-    # The SATs chart compares each bar to its own benchmark, so the per-subject
-    # higher-standard / greater-depth nationals must reach the payload — not
-    # only the combined rwm_high_pct.
-    body = payload(_StubSession)
-    assert body["primary"]["reading_high_pct"] == 29.0
-    assert body["primary"]["writing_gd_pct"] == 13.0
-    assert body["primary"]["maths_high_pct"] == 24.0
-
-
 def test_ks4_secondary_empty_when_mart_missing(payload):
     # No computed stand-in: the UI labels national figures as official DfE
     # data, so an empty mart must yield an empty secondary series.

e2e/tests/journeys.spec.ts

@@ -438,18 +438,6 @@ test('compare chart on mobile shows school chips with tap-to-focus', async ({ pa
   await expect(chips.first()).toHaveAttribute('aria-pressed', 'false');
 });
 
-test('admissions guide renders its key milestones', async ({ page }) => {
-  // Static content page — assert the guide loads and the load-bearing
-  // milestones parents rely on are present (dates are statutory, so these
-  // strings are stable invariants, not data-refresh-sensitive).
-  await page.goto('/admissions');
-  await expect(page.getByRole('heading', { name: /School Admissions Guide/i })).toBeVisible();
-  await expect(page.getByRole('heading', { name: /Primary school admissions/i })).toBeVisible();
-  await expect(page.getByRole('heading', { name: /Secondary school admissions/i })).toBeVisible();
-  // National Offer Day is the milestone the whole guide builds toward.
-  await expect(page.getByText(/National Offer Day/i).first()).toBeVisible();
-});
-
 test('rankings page loads a populated table', async ({ page }) => {
   await page.goto('/rankings');
   await expect(page.getByRole('heading', { name: /rankings/i }).first()).toBeVisible();

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

@@ -41,30 +41,6 @@ describe('buildCompareChart', () => {
     }
   });
 
-  it('ignores a no-results school whose only row has a null year', () => {
-    // A school with no performance rows comes back from /api/compare with a
-    // single phantom yearly_data row (LEFT JOIN) where year and every metric
-    // are null. That null year must NOT pollute the axis: Math.trunc(null) is
-    // 0, and filling from year 0 blows past the real years, blanking every
-    // school's line. Regression guard for "add a no-data school → chart empty".
-    const withNoData = {
-      ...THREE_SCHOOLS,
-      '4': school(4, [[null as unknown as number, null]]),
-    };
-    const list = [...SCHOOL_LIST, { urn: 4, school_name: 'School 4' }];
-    const chart = buildCompareChart(withNoData, list, 'rwm_expected_pct');
-
-    // The real years still drive the axis; the phantom year 0 is gone.
-    expect(chart.years).toContain(201819);
-    expect(chart.years).toContain(202425);
-    expect(chart.years).not.toContain(0);
-    // The three real schools still render their lines.
-    for (const urn of [1, 2, 3]) {
-      const ds = chart.schoolDatasets[urn - 1];
-      expect(ds.data.some((v) => v != null)).toBe(true);
-    }
-  });
-
   it('handles float years from the API (202425.0 style)', () => {
     const floaty = {
       '1': school(1, [[201819.0 as number, 80], [202425.0 as number, 85]]),

nextjs-app/app/layout.tsx

@@ -85,14 +85,6 @@ export default function RootLayout({
           data-performance="true"
           strategy="afterInteractive"
         />
-        {/* Heatmap / session recorder — same data-domains guard so staging
-            (same image, different host) never feeds the heatmap. */}
-        <Script
-          src="https://analytics.schoolcompare.co.uk/recorder.js"
-          data-website-id="d7fb0c95-bb6c-4336-8209-bd10077e50dd"
-          data-domains="schoolcompare.co.uk,www.schoolcompare.co.uk"
-          strategy="afterInteractive"
-        />
       </head>
       <body className={`${dmSans.variable} ${playfairDisplay.variable}`}>
         <div className="noise-overlay" />

nextjs-app/components/AdmissionsView.module.css

@@ -442,58 +442,6 @@
   line-height: 1;
 }
 
-/* ─── Easy-to-miss callouts ──────────────────────────── */
-
-.calloutGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.7rem;
-}
-
-.callout {
-  display: flex;
-  gap: 0.55rem;
-  padding: 0.6rem 0.75rem;
-  background: var(--accent-gold-bg, rgba(201, 162, 39, 0.12));
-  border: 1px solid rgba(201, 162, 39, 0.28);
-  border-left: 3px solid var(--accent-gold, #c9a227);
-  border-radius: 8px;
-}
-
-.calloutIcon {
-  flex-shrink: 0;
-  width: 1.05rem;
-  height: 1.05rem;
-  margin-top: 0.1rem;
-  border-radius: 50%;
-  background: var(--accent-gold, #c9a227);
-  color: #fff;
-  font-size: 0.72rem;
-  font-weight: 800;
-  line-height: 1.05rem;
-  text-align: center;
-}
-
-.calloutText {
-  min-width: 0;
-}
-
-.calloutTitle {
-  font-size: 0.82rem;
-  font-weight: 700;
-  color: var(--accent-gold-text, #7a6800);
-  line-height: 1.3;
-  margin-bottom: 0.15rem;
-}
-
-.calloutBody {
-  font-size: 0.82rem;
-  color: var(--text-secondary, #5c564d);
-  line-height: 1.5;
-  margin: 0;
-}
-
 /* ─── Tips ───────────────────────────────────────────── */
 
 .tips {

nextjs-app/components/AdmissionsView.tsx

@@ -54,9 +54,6 @@ interface Step {
   title: string;
   body: string;
   highlight?: 'deadline' | 'offer';
-  /* Easy-to-miss, deadline-sensitive warnings surfaced as callout boxes
-     rather than buried in the body prose. */
-  callouts?: { title: string; body: string }[];
   /* How SchoolCompare helps at this stage of the journey */
   tool?: { label: string; href: string };
 }
@@ -65,16 +62,6 @@ const SECONDARY_STEPS: Step[] = [
   {
     title: 'Check entry criteria',
     body: 'Look at each school\'s admissions policy — catchment areas, faith criteria, sibling priority, and aptitude tests vary widely.',
-    callouts: [
-      {
-        title: 'Selective schools register earlier',
-        body: 'Grammar and other selective schools need separate entrance-test registration months earlier — often by September, well before the 31 October deadline.',
-      },
-      {
-        title: 'Faith schools may need an extra form',
-        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, on top of the council application.',
-      },
-    ],
     tool: { label: 'Find schools & view their admissions history', href: '/' },
   },
   {
@@ -86,14 +73,14 @@ const SECONDARY_STEPS: Step[] = [
   {
     date: '31 October',
     title: 'Application deadline',
-    body: 'Submit your ranked list of schools — most councils allow three to six preferences (London boroughs typically six). Councils treat all preferences equally, so list schools in the genuine order you want them, not strategically.',
+    body: 'Submit your ranked list of up to six schools. Councils treat all preferences equally — list schools in the genuine order you want them, not strategically.',
     highlight: 'deadline',
     tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
   },
   {
     date: '1 March',
     title: 'National Offer Day',
-    body: 'Your allocated school appears on the council\'s online admissions portal and is sent by email. Release times are set by each council — often from late afternoon, though some publish overnight — so check your council\'s page rather than refreshing at midnight.',
+    body: 'Results are published online, usually from 12:01 am. You\'ll receive an email or letter with your allocated school.',
     highlight: 'offer',
     tool: { label: 'Look up your allocated school', href: '/' },
   },
@@ -114,12 +101,6 @@ const PRIMARY_STEPS: Step[] = [
   {
     title: 'Research entry criteria',
     body: 'Faith schools, language units, and distance-based catchments differ by school. Start by reading each school\'s admissions policy on their website or the council\'s website.',
-    callouts: [
-      {
-        title: 'Faith schools may need an extra form',
-        body: 'Many faith schools require a supplementary information form (SIF) sent directly to the school, in addition to the council application.',
-      },
-    ],
     tool: { label: 'Find schools & view their admissions history', href: '/' },
   },
   {
@@ -163,7 +144,7 @@ interface Tip {
 const TIPS: Tip[] = [
   {
     heading: 'Equal preference rule',
-    body: 'Councils consider every school you list before making any offer, then give you the highest-ranked one you qualify for. Your order only decides which qualifying school you get — you can\'t game it, so list schools in the order you genuinely want them.',
+    body: 'Councils rank offers by your eligibility for each school, not by the order you listed them. You cannot game the system — put schools in the order you actually want them.',
   },
   {
     heading: 'Late applications go to the back',
@@ -326,19 +307,6 @@ export function AdmissionsView() {
                 {step.date && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
-                {step.callouts && step.callouts.length > 0 && (
-                  <div className={styles.calloutGroup}>
-                    {step.callouts.map((c) => (
-                      <div key={c.title} className={styles.callout}>
-                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
-                        <div className={styles.calloutText}>
-                          <div className={styles.calloutTitle}>{c.title}</div>
-                          <p className={styles.calloutBody}>{c.body}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}
@@ -387,19 +355,6 @@ export function AdmissionsView() {
                 {step.date && <div className={styles.stepDate}>{step.date}</div>}
                 <div className={styles.stepTitle}>{step.title}</div>
                 <p className={styles.stepBody}>{step.body}</p>
-                {step.callouts && step.callouts.length > 0 && (
-                  <div className={styles.calloutGroup}>
-                    {step.callouts.map((c) => (
-                      <div key={c.title} className={styles.callout}>
-                        <span className={styles.calloutIcon} aria-hidden="true">!</span>
-                        <div className={styles.calloutText}>
-                          <div className={styles.calloutTitle}>{c.title}</div>
-                          <p className={styles.calloutBody}>{c.body}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
                 {step.tool && (
                   <a
                     href={step.tool.href}

nextjs-app/components/EditorialSection.tsx

@@ -13,17 +13,17 @@ export function EditorialSection({ totalSchools, localAuthorityCount }: Editoria
       <div className={styles.editorialGrid}>
         <div className={styles.editorialText}>
           <div className={styles.editorialKicker}>About school data</div>
-          <h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
+          <h2 className={styles.editorialHeading}>Making UK school performance data actually readable</h2>
           <p>
-            School performance data in England is rich but fragmented. The Department for Education and Ofsted
-            publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
-            and demographics — each in its own table, each with its own jargon.
+            School performance data in England is rich but fragmented. The Department for Education publishes
+            Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
+            demographics — each in its own table, each with its own jargon.
           </p>
           <p>
             SchoolCompare brings it all into one place. Every school page shows performance against the national
             average, explains what the numbers mean, and lets you shortlist schools side by side. Built for
             parents, governors, journalists, and anyone who wants to understand a school without reading a
-            full inspection report.
+            40-page inspection report.
           </p>
         </div>
         <div className={styles.factbox}>

nextjs-app/components/HomeView.module.css

@@ -720,13 +720,10 @@
 .miniRowHead {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
-  gap: 0.2rem;
-  font-size: 0.44rem;
+  font-size: 0.48rem;
   color: var(--text-muted, #6d685f);
   text-transform: uppercase;
-  letter-spacing: 0.01em;
-  white-space: nowrap;
+  letter-spacing: 0.04em;
 }
 
 .miniRowHead strong {
@@ -872,77 +869,28 @@
   color: var(--text-primary, #1a1612);
 }
 
-.ofstedFramework {
+.ofstedBadge {
   align-self: flex-start;
-  padding: 0.15rem 0.5rem;
+  padding: 0.2rem 0.55rem;
   border-radius: 4px;
-  background: rgba(90, 58, 110, 0.12);
-  color: #5a3a6e;
-  font-size: 0.5rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.rcList {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.rcRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
-.rcArea {
-  font-size: 0.62rem;
-  color: var(--text-secondary, #4a453d);
-}
-
-.rcChip {
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.52rem;
-  font-weight: 700;
-  letter-spacing: 0.03em;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.rcChipGood {
   background: rgba(45, 125, 125, 0.12);
   color: var(--accent-teal, #2d7d7d);
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
 }
 
-.rcChipNeutral {
-  background: var(--accent-gold-bg, rgba(180, 150, 40, 0.12));
-  color: var(--accent-gold-text, #7a6800);
+.ofstedVerdict {
+  font-family: var(--font-playfair), 'Playfair Display', serif;
+  font-size: 1.05rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary, #1a1612);
 }
 
-/* Safeguarding is a separate binary met/not-met judgement, not a graded area,
-   so it sits below the five-point list behind a divider with its own chip. */
-.rcSafeguarding {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-top: 0.05rem;
-  padding-top: 0.35rem;
-  border-top: 1px dashed var(--border-color, #e5dfd5);
-}
-
-.rcSep {
-  color: var(--text-muted, #8a847a);
-  font-style: italic;
-}
-
-.rcChipMet {
-  background: transparent;
+.ofstedVerdict em {
   color: var(--accent-teal, #2d7d7d);
-  border: 1px solid rgba(45, 125, 125, 0.4);
+  font-style: normal;
 }
 
 .ofstedMeta {

nextjs-app/components/HomeView.tsx

@@ -261,7 +261,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
         <div className={styles.heroSection}>
           <span className={styles.heroEyebrow}>
             <span className={styles.heroEyebrowDot} aria-hidden="true" />
-            Updated for the 2026/27 admissions round
+            Updated with 2026/2027 admissions results
           </span>
           <h1 className={styles.heroTitle}>
             Every school in England, <em className={styles.heroEmph}>compared.</em>

nextjs-app/components/HowItWorksSection.tsx

@@ -5,26 +5,15 @@
 import styles from './HomeView.module.css';
 
 export function HowItWorksSection() {
-  // "exc" is the school's above-expected result. DfE names this differently
-  // by subject: "higher standard" for the reading and maths tests, "greater
-  // depth" for teacher-assessed writing. "nat" is the national expected %.
   const miniCascade = [
-    { subj: 'Reading', exp: 96, exc: 44, nat: 75, excLabel: 'Higher std' },
-    { subj: 'Writing', exp: 81, exc: 26, nat: 72, excLabel: 'Greater depth' },
-    { subj: 'Maths', exp: 85, exc: 41, nat: 74, excLabel: 'Higher std' },
+    { subj: 'Reading', exp: 96, exc: 73, nat: 75 },
+    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
+    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
   ];
   const compareRows = [
     { label: 'Reading, Writing & Maths', a: '70%', b: '64%', aHi: true },
-    { label: 'Higher standard (RWM)', a: '13%', b: '6%', aHi: true },
     { label: 'Ofsted', a: 'Outstanding', b: 'Good', aHi: true },
-  ];
-  // Report card (Ofsted's framework from Nov 2025): one rating per area of
-  // school life on a five-point scale. Safeguarding is judged separately, as a
-  // binary met/not-met outcome — kept out of this list and shown on its own.
-  const reportCard: Array<{ area: string; grade: string; good: boolean }> = [
-    { area: 'Achievement', grade: 'Strong', good: true },
-    { area: 'Curriculum & teaching', grade: 'Expected standard', good: false },
-    { area: 'Attendance & behaviour', grade: 'Strong', good: true },
+    { label: 'Reading progress', a: '+2.1', b: '+0.4', aHi: true },
   ];
 
   return (
@@ -40,7 +29,7 @@ export function HowItWorksSection() {
             <div className={styles.hiwPhaseBlock}>
               <div className={styles.hiwPhaseLabel}>Primary · Year 6 · <strong>Key Stage 2 SATs</strong></div>
               <div className={styles.miniCascade}>
-                {miniCascade.map(({ subj, exp, exc, nat, excLabel }) => (
+                {miniCascade.map(({ subj, exp, exc, nat }) => (
                   <div key={subj} className={styles.miniCascadeCol}>
                     <div className={styles.miniSubj}>{subj}</div>
                     <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
@@ -48,7 +37,7 @@ export function HowItWorksSection() {
                       <div className={styles.miniNatPill} style={{ left: `${nat}%` }}>{nat}%</div>
                       <div className={styles.miniBarExp} style={{ width: `${exp}%` }} />
                     </div>
-                    <div className={styles.miniRowHead}><span>{excLabel}</span><strong>{exc}%</strong></div>
+                    <div className={styles.miniRowHead}><span>Exceeding</span><strong>{exc}%</strong></div>
                     <div className={styles.miniTrack}>
                       <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
                     </div>
@@ -60,15 +49,15 @@ export function HowItWorksSection() {
               <div className={styles.hiwPhaseLabel}>Secondary · Year 11 · <strong>GCSE Attainment 8</strong></div>
               <div className={styles.att8Row}>
                 <div className={styles.att8BarWrap}>
-                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
+                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 50.2</span></div>
                   <div className={styles.att8Track}>
-                    <div className={styles.att8Fill} style={{ width: '54.8%' }} />
-                    <div className={styles.att8NatLine} style={{ left: '45.9%' }} />
+                    <div className={styles.att8Fill} style={{ width: '62%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
                   </div>
                 </div>
                 <div className={styles.att8Score}>
-                  <div className={styles.att8Value}>54.8</div>
-                  <div className={styles.att8Delta}>+8.9 vs national</div>
+                  <div className={styles.att8Value}>62.4</div>
+                  <div className={styles.att8Delta}>+12.2 vs national</div>
                 </div>
               </div>
             </div>
@@ -88,26 +77,15 @@ export function HowItWorksSection() {
                 <span className={styles.ofstedBullet} />
                 <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
               </div>
-              <span className={styles.ofstedFramework}>Report card · five-point scale</span>
-              <div className={styles.rcList}>
-                {reportCard.map(({ area, grade, good }) => (
-                  <div key={area} className={styles.rcRow}>
-                    <span className={styles.rcArea}>{area}</span>
-                    <span className={`${styles.rcChip} ${good ? styles.rcChipGood : styles.rcChipNeutral}`}>{grade}</span>
-                  </div>
-                ))}
-              </div>
-              <div className={styles.rcSafeguarding}>
-                <span className={styles.rcArea}>Safeguarding <span className={styles.rcSep}>· separate check</span></span>
-                <span className={`${styles.rcChip} ${styles.rcChipMet}`}>Met</span>
-              </div>
-              <div className={styles.ofstedMeta}>Full inspection · March 2026</div>
+              <span className={styles.ofstedBadge}>OUTSTANDING</span>
+              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
+              <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
             </div>
           </div>
           <div className={styles.hiwCardBody}>
             <div className={styles.hiwStep}>Judgement</div>
             <div className={styles.hiwTitle}>Ofsted at a glance</div>
-            <p className={styles.hiwDesc}>Since November 2025, Ofsted rates each area of school life on a five-point scale rather than one overall word. We show every area and the inspection date — and, for schools not yet reinspected, the older overall grade they still carry.</p>
+            <p className={styles.hiwDesc}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
           </div>
         </div>
 

nextjs-app/components/RankingsView.tsx

@@ -118,7 +118,7 @@ export function RankingsView({
       <header className={styles.header}>
         <h1>School Rankings</h1>
         <p className={styles.subtitle}>
-          Schools ranked by {metricLabel.toLowerCase()}
+          Top-performing schools by {metricLabel.toLowerCase()}
           {!selectedArea && rankings.length > 0 && <span className={styles.limitNote}> — showing top {rankings.length}</span>}
         </p>
       </header>
@@ -143,10 +143,7 @@ export function RankingsView({
         <p className={styles.metricDescription}>{currentMetricDef.description}</p>
       )}
       {isProgressScore && (
-        <p className={styles.progressHint}>
-          Progress scores: 0 = national average. Positive = above average.
-          {isPrimary && ' KS2 progress isn’t published for 2023/24 or 2024/25 (there’s no key stage 1 baseline) — pick an earlier year to rank by it.'}
-        </p>
+        <p className={styles.progressHint}>Progress scores: 0 = national average. Positive = above average.</p>
       )}
 
       {/* Filters */}
@@ -221,11 +218,7 @@ export function RankingsView({
         {rankings.length === 0 ? (
           <EmptyState
             title="No rankings found"
-            message={
-              isPrimary && isProgressScore
-                ? 'KS2 progress scores aren’t published for the most recent years (2023/24 and 2024/25) because there’s no key stage 1 baseline. Select an earlier year to see progress rankings.'
-                : 'Try selecting a different metric, area, or year.'
-            }
+            message="Try selecting a different metric, area, or year."
             action={{
               label: 'Clear filters',
               onClick: () => router.push(`${pathname}?phase=${selectedPhase}`),

nextjs-app/components/SatsChart.module.css

@@ -44,46 +44,30 @@
   background: var(--bg-secondary, #f3ede4);
 }
 
-/* ── Per-bar national average marker ──
-   Each bar compares against its own benchmark (expected vs higher standard /
-   greater depth), so the marker sits on the individual bar's track rather than
-   as one line spanning both bars. */
-.natTick {
+/* ── National average marker ── */
+.natLine {
   position: absolute;
-  top: -3px;
-  bottom: -3px;
-  width: 2px;
-  transform: translateX(-50%);
-  background: var(--accent-coral, #e07256);
-  border-radius: 2px;
-  z-index: 4;
+  top: 0;
+  height: calc(100% - 20px);
+  width: 1.5px;
+  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
+  z-index: 2;
   pointer-events: none;
 }
 
-.natTick::before {
-  content: '';
+.natPill {
   position: absolute;
-  top: -3px;
-  left: 50%;
+  top: -10px;
   transform: translateX(-50%);
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
   background: var(--accent-coral, #e07256);
-}
-
-.barHeaderRight {
-  display: flex;
-  align-items: baseline;
-  gap: 0.4rem;
-}
-
-.natLabel {
+  color: #fff;
   font-size: 0.55rem;
   font-weight: 700;
-  color: var(--accent-coral-dark, #b04a2e);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  z-index: 3;
+  letter-spacing: 0.02em;
 }
 
 /* ── Bar rows ── */

nextjs-app/components/SatsChart.tsx

@@ -8,9 +8,6 @@ interface SubjectData {
   expectedPct: number | null;
   exceedingPct: number | null;
   nationalExpectedPct: number | null;
-  /** National higher-standard / greater-depth benchmark for the exceeding
-   * bar — a different figure from the expected national. */
-  nationalExceedingPct: number | null;
 }
 
 interface SatsChartProps {
@@ -20,45 +17,11 @@ interface SatsChartProps {
 const RULER_TICKS = [0, 25, 50, 75, 100];
 const GRIDLINE_POSITIONS = [25, 50, 75];
 
-/** One results bar with a national marker positioned on its own track, so the
- * expected and exceeding bars each compare against their own benchmark. */
-function BarRow({
-  label,
-  value,
-  national,
-  barRef,
-  barClass,
-}: {
-  label: string;
-  value: number;
-  national: number | null;
-  barRef: React.RefObject<HTMLDivElement | null>;
-  barClass: string;
-}) {
-  return (
-    <div className={styles.barRow}>
-      <div className={styles.barHeader}>
-        <span className={styles.barLabelSuffix}>{label}</span>
-        <span className={styles.barHeaderRight}>
-          {national != null && <span className={styles.natLabel}>nat {national.toFixed(0)}%</span>}
-          <span className={styles.barLabel}>{value.toFixed(0)}%</span>
-        </span>
-      </div>
-      <div className={styles.barTrack}>
-        <div ref={barRef} className={`${styles.bar} ${barClass}`} data-width={value} />
-        {national != null && (
-          <div className={styles.natTick} style={{ left: `${national}%` }} aria-hidden="true" />
-        )}
-      </div>
-    </div>
-  );
-}
-
 function SubjectColumn({ subject }: { subject: SubjectData }) {
   const expectedRef = useRef<HTMLDivElement>(null);
   const exceedingRef = useRef<HTMLDivElement>(null);
 
-  const { name, expectedPct, exceedingPct, nationalExpectedPct, nationalExceedingPct } = subject;
+  const { name, expectedPct, exceedingPct, nationalExpectedPct } = subject;
 
   // Animate bars on mount
   useEffect(() => {
@@ -88,25 +51,44 @@ function SubjectColumn({ subject }: { subject: SubjectData }) {
           ))}
         </div>
 
-        {/* Bars — each carries its own national marker */}
+        {/* National average marker */}
+        {nationalExpectedPct != null && (
+          <div className={styles.natLine} style={{ left: `${nationalExpectedPct}%` }}>
+            <div className={styles.natPill}>{nationalExpectedPct.toFixed(0)}%</div>
+          </div>
+        )}
+
+        {/* Bars */}
         <div className={styles.barGroup}>
           {expectedPct != null && (
-            <BarRow
-              label="Expected"
-              value={expectedPct}
-              national={nationalExpectedPct}
-              barRef={expectedRef}
-              barClass={styles.barExpected}
-            />
+            <div className={styles.barRow}>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Expected</span>
+                <span className={styles.barLabel}>{expectedPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={expectedRef}
+                  className={`${styles.bar} ${styles.barExpected}`}
+                  data-width={expectedPct}
+                />
+              </div>
+            </div>
           )}
           {exceedingPct != null && (
-            <BarRow
-              label="Exceeding"
-              value={exceedingPct}
-              national={nationalExceedingPct}
-              barRef={exceedingRef}
-              barClass={styles.barExceeding}
-            />
+            <div className={styles.barRow}>
+              <div className={styles.barHeader}>
+                <span className={styles.barLabelSuffix}>Exceeding</span>
+                <span className={styles.barLabel}>{exceedingPct.toFixed(0)}%</span>
+              </div>
+              <div className={styles.barTrack}>
+                <div
+                  ref={exceedingRef}
+                  className={`${styles.bar} ${styles.barExceeding}`}
+                  data-width={exceedingPct}
+                />
+              </div>
+            </div>
           )}
         </div>
 
@@ -153,7 +135,7 @@ export default function SatsChart({ subjects }: SatsChartProps) {
           Exceeding / high score
         </div>
         <div className={styles.legendItem}>
-          <div className={styles.legendSwatch} style={{ background: 'var(--accent-coral, #e07256)', width: '3px', height: '12px', borderRadius: '2px' }} />
+          <div className={styles.legendSwatch} style={{ background: 'var(--accent-coral, #e07256)', borderRadius: '50%' }} />
           National average
         </div>
       </div>

nextjs-app/components/SchoolDetailView.module.css

@@ -855,10 +855,7 @@
 /* Charts Section */
 .chartContainer {
     width: 100%;
-    /* Taller on desktop so the trend lines have vertical room to separate
-       and read clearly. Mobile overrides this to height:auto below (the
-       max-width:768px query), so this only affects desktop. */
-    height: 380px;
+    height: 280px;
     position: relative;
 }
 
@@ -1043,41 +1040,6 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
-/* ── Ofsted grade grids (Report Card + OEIF) ──
-   Uniform, vertically-aligned grade chips. Labels reserve two lines so
-   single- and double-line labels put their chips on the same baseline;
-   every chip (Met, Strong, Expected standard, …) shares one font size,
-   padding and min-height regardless of how many lines its text wraps to. */
-.gradeGrid .metricCard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.85rem 0.75rem;
-}
-.gradeGrid .metricLabel {
-    min-height: 2.6em;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-.gradeGrid .metricValue {
-    margin-top: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-    min-height: 2.6em;
-    padding: 0.3rem 0.7rem;
-    border-radius: 5px;
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.25;
-    text-align: center;
-}
-
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SchoolDetailView.tsx

@@ -577,7 +577,7 @@ export function SchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -623,7 +623,7 @@ export function SchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+                <div className={styles.metricsGrid}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>
@@ -752,22 +752,18 @@ export function SchoolDetailView({
                       expectedPct: latestResults.reading_expected_pct,
                       exceedingPct: latestResults.reading_high_pct,
                       nationalExpectedPct: suppressKs2Comparison ? null : primaryAvg.reading_expected_pct,
-                      nationalExceedingPct: suppressKs2Comparison ? null : primaryAvg.reading_high_pct,
                     },
                     {
                       name: 'Writing',
                       expectedPct: latestResults.writing_expected_pct,
                       exceedingPct: latestResults.writing_high_pct,
                       nationalExpectedPct: suppressKs2Comparison ? null : primaryAvg.writing_expected_pct,
-                      // Writing's higher level is teacher-assessed "greater depth".
-                      nationalExceedingPct: suppressKs2Comparison ? null : primaryAvg.writing_gd_pct,
                     },
                     {
                       name: 'Maths',
                       expectedPct: latestResults.maths_expected_pct,
                       exceedingPct: latestResults.maths_high_pct,
                       nationalExpectedPct: suppressKs2Comparison ? null : primaryAvg.maths_expected_pct,
-                      nationalExceedingPct: suppressKs2Comparison ? null : primaryAvg.maths_high_pct,
                     },
                   ]}
                 />
@@ -929,15 +925,6 @@ export function SchoolDetailView({
               </div>
             )}
           </div>
-          {/* All-through admissions data covers a single entry point (usually the
-              Year 7 secondary intake), not reception — say so, or a parent could
-              read these as the whole-school figures. */}
-          {isAllThrough && admissions.school_phase && (
-            <p className={styles.sectionSubtitle}>
-              These figures are for {admissions.school_phase.toLowerCase()} entry
-              {/secondary/i.test(admissions.school_phase) ? ' (Year 7)' : /primary/i.test(admissions.school_phase) ? ' (Reception)' : ''}.
-            </p>
-          )}
 
           <div className={styles.admissionsViewport}>
             {/* This-year Q&A */}

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -490,10 +490,7 @@
 /* ── Charts & Map ────────────────────────────────────── */
 .chartContainer {
     width: 100%;
-    /* Taller on desktop so the trend lines have vertical room to separate
-       and read clearly. Mobile overrides this to height:auto below (the
-       max-width:768px query), so this only affects desktop. */
-    height: 380px;
+    height: 280px;
     position: relative;
 }
 
@@ -626,41 +623,6 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
-/* ── Ofsted grade grids (Report Card + OEIF) ──
-   Uniform, vertically-aligned grade chips. Labels reserve two lines so
-   single- and double-line labels put their chips on the same baseline;
-   every chip (Met, Strong, Expected standard, …) shares one font size,
-   padding and min-height regardless of how many lines its text wraps to. */
-.gradeGrid .metricCard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.85rem 0.75rem;
-}
-.gradeGrid .metricLabel {
-    min-height: 2.6em;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-.gradeGrid .metricValue {
-    margin-top: auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-    min-height: 2.6em;
-    padding: 0.3rem 0.7rem;
-    border-radius: 5px;
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.25;
-    text-align: center;
-}
-
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -374,7 +374,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -419,7 +419,7 @@ export function SecondarySchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+                <div className={styles.metricsGrid}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>
@@ -436,7 +436,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.sectionSubtitle}>
                 From September 2024, Ofsted no longer gives a single overall grade.
               </p>
-              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
+              <div className={styles.metricsGrid}>
                 {[
                   { label: 'Quality of Education', value: ofsted.quality_of_education },
                   { label: 'Behaviour & Attitudes', value: ofsted.behaviour_attitudes },

nextjs-app/lib/compareChartData.ts

@@ -10,17 +10,6 @@
 
 import type { ComparisonData } from './types';
 
-/**
- * A yearly row only counts once it carries a real academic year. A school with
- * no performance data still comes back from /api/compare with a single phantom
- * row (the dim_school LEFT JOIN) where `year` is null — and Math.trunc(null) is
- * 0, which would seed the axis at year 0 and, via fillAcademicYears, blow past
- * every real year and blank all schools' lines. Drop those rows up front.
- */
-function hasYear(row: { year: number }): boolean {
-  return typeof row.year === 'number' && Number.isFinite(row.year);
-}
-
 /** 201819 → 201920 (academic-year arithmetic on YYYYYY codes). */
 function nextAcademicYear(year: number): number {
   const start = Math.floor(year / 100);
@@ -77,19 +66,14 @@ export function buildCompareChart(
   nationalByYear?: Record<number, number | null | undefined>,
 ): CompareChart {
   const rawYears = schools.flatMap(
-    (s) =>
-      comparisonData[String(s.urn)]?.yearly_data.filter(hasYear).map((d) => Math.trunc(d.year)) ??
-      [],
+    (s) => comparisonData[String(s.urn)]?.yearly_data.map((d) => Math.trunc(d.year)) ?? [],
   );
   const years = fillAcademicYears(rawYears);
 
   const schoolDatasets: CompareChartSeries[] = schools.map((school, schoolIndex) => {
     const rows = comparisonData[String(school.urn)]?.yearly_data ?? [];
     const byYear = new Map<number, Record<string, unknown>>();
-    for (const row of rows) {
-      if (!hasYear(row)) continue;
-      byYear.set(Math.trunc(row.year), row as unknown as Record<string, unknown>);
-    }
+    for (const row of rows) byYear.set(Math.trunc(row.year), row as unknown as Record<string, unknown>);
     return {
       label: school.school_name,
       data: years.map((year) => {