fix(detail): compare each SATs bar to its own national benchmark

The KS2 SATs chart drew a single national-average line spanning the
full height of each subject's chart area, positioned at the national
*expected* value. But the area stacks two bars — Expected and Exceeding
— and the higher-standard/greater-depth national is a very different,
much lower figure (e.g. reading higher standard ~29% vs expected ~75%).
So the line crossed the Exceeding bar at the wrong place, making every
school's exceeding result look far below national when it wasn't.

The per-subject higher-standard nationals were already computed in the
fact_ks2_national_averages mart; they just weren't serialized. Fix:

- backend: add reading_high_pct, writing_gd_pct (writing = greater
  depth) and maths_high_pct to the national-averages payload.
- SchoolDetailView: pass a nationalExceedingPct per subject, mapping
  writing to the greater-depth figure.
- SatsChart: replace the single full-height line with a national marker
  on each bar's own track (coral tick + "nat X%" in the bar header), so
  Expected and Exceeding each sit against the correct benchmark.

KS2 only; the secondary Attainment 8 chart already uses one line for
one measure and is untouched.

Verified: tsc --noEmit, next build, and backend pytest (national
averages marts, incl. a new test guarding the per-subject nationals).

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

backend/app.py

@@ -807,6 +807,10 @@ 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,6 +25,11 @@ 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:
@@ -84,6 +89,16 @@ 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,6 +438,18 @@ 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/components/AdmissionsView.module.css

@@ -442,6 +442,58 @@
   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,6 +54,9 @@ 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 };
 }
@@ -62,6 +65,16 @@ 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: '/' },
   },
   {
@@ -73,14 +86,14 @@ const SECONDARY_STEPS: Step[] = [
   {
     date: '31 October',
     title: 'Application deadline',
-    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.',
+    body: 'Submit your ranked list of schools — most councils allow three to six preferences (London boroughs typically six). Councils treat all preferences equally, so list schools in the genuine order you want them, not strategically.',
     highlight: 'deadline',
     tool: { label: 'Compare performance to order your preferences', href: '/rankings' },
   },
   {
     date: '1 March',
     title: 'National Offer Day',
-    body: 'Results are published online, usually from 12:01 am. You\'ll receive an email or letter with your allocated school.',
+    body: 'Your allocated school appears on the council\'s online admissions portal and is sent by email. Release times are set by each council — often from late afternoon, though some publish overnight — so check your council\'s page rather than refreshing at midnight.',
     highlight: 'offer',
     tool: { label: 'Look up your allocated school', href: '/' },
   },
@@ -101,6 +114,12 @@ 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: '/' },
   },
   {
@@ -144,7 +163,7 @@ interface Tip {
 const TIPS: Tip[] = [
   {
     heading: 'Equal preference rule',
-    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.',
+    body: 'Councils consider every school you list before making any offer, then give you the highest-ranked one you qualify for. Your order only decides which qualifying school you get — you can\'t game it, so list schools in the order you genuinely want them.',
   },
   {
     heading: 'Late applications go to the back',
@@ -307,6 +326,19 @@ 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}
@@ -355,6 +387,19 @@ 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/RankingsView.tsx

@@ -118,7 +118,7 @@ export function RankingsView({
       <header className={styles.header}>
         <h1>School Rankings</h1>
         <p className={styles.subtitle}>
-          Top-performing schools by {metricLabel.toLowerCase()}
+          Schools ranked by {metricLabel.toLowerCase()}
           {!selectedArea && rankings.length > 0 && <span className={styles.limitNote}> — showing top {rankings.length}</span>}
         </p>
       </header>
@@ -143,7 +143,10 @@ export function RankingsView({
         <p className={styles.metricDescription}>{currentMetricDef.description}</p>
       )}
       {isProgressScore && (
-        <p className={styles.progressHint}>Progress scores: 0 = national average. Positive = above average.</p>
+        <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>
       )}
 
       {/* Filters */}
@@ -218,7 +221,11 @@ export function RankingsView({
         {rankings.length === 0 ? (
           <EmptyState
             title="No rankings found"
-            message="Try selecting a different metric, area, or year."
+            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.'
+            }
             action={{
               label: 'Clear filters',
               onClick: () => router.push(`${pathname}?phase=${selectedPhase}`),

nextjs-app/components/SatsChart.module.css

@@ -44,30 +44,46 @@
   background: var(--bg-secondary, #f3ede4);
 }
 
-/* ── National average marker ── */
-.natLine {
+/* ── 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 {
   position: absolute;
-  top: 0;
-  height: calc(100% - 20px);
-  width: 1.5px;
-  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
-  z-index: 2;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  transform: translateX(-50%);
+  background: var(--accent-coral, #e07256);
+  border-radius: 2px;
+  z-index: 4;
   pointer-events: none;
 }
 
-.natPill {
+.natTick::before {
+  content: '';
   position: absolute;
-  top: -10px;
+  top: -3px;
+  left: 50%;
   transform: translateX(-50%);
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
   background: var(--accent-coral, #e07256);
-  color: #fff;
+}
+
+.barHeaderRight {
+  display: flex;
+  align-items: baseline;
+  gap: 0.4rem;
+}
+
+.natLabel {
   font-size: 0.55rem;
   font-weight: 700;
-  padding: 0.1rem 0.35rem;
-  border-radius: 4px;
-  white-space: nowrap;
-  z-index: 3;
-  letter-spacing: 0.02em;
+  color: var(--accent-coral-dark, #b04a2e);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 /* ── Bar rows ── */

nextjs-app/components/SatsChart.tsx

@@ -8,6 +8,9 @@ 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 {
@@ -17,11 +20,45 @@ 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 } = subject;
+  const { name, expectedPct, exceedingPct, nationalExpectedPct, nationalExceedingPct } = subject;
 
   // Animate bars on mount
   useEffect(() => {
@@ -51,44 +88,25 @@ function SubjectColumn({ subject }: { subject: SubjectData }) {
           ))}
         </div>
 
-        {/* National average marker */}
-        {nationalExpectedPct != null && (
-          <div className={styles.natLine} style={{ left: `${nationalExpectedPct}%` }}>
-            <div className={styles.natPill}>{nationalExpectedPct.toFixed(0)}%</div>
-          </div>
-        )}
-
-        {/* Bars */}
+        {/* Bars — each carries its own national marker */}
         <div className={styles.barGroup}>
           {expectedPct != null && (
-            <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}
+            <BarRow
+              label="Expected"
+              value={expectedPct}
+              national={nationalExpectedPct}
+              barRef={expectedRef}
+              barClass={styles.barExpected}
             />
-              </div>
-            </div>
           )}
           {exceedingPct != null && (
-            <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}
+            <BarRow
+              label="Exceeding"
+              value={exceedingPct}
+              national={nationalExceedingPct}
+              barRef={exceedingRef}
+              barClass={styles.barExceeding}
             />
-              </div>
-            </div>
           )}
         </div>
 
@@ -135,7 +153,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)', borderRadius: '50%' }} />
+          <div className={styles.legendSwatch} style={{ background: 'var(--accent-coral, #e07256)', width: '3px', height: '12px', borderRadius: '2px' }} />
           National average
         </div>
       </div>

nextjs-app/components/SchoolDetailView.tsx

@@ -752,18 +752,22 @@ 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,
                     },
                   ]}
                 />