test(e2e): compare help popover stays within the mobile viewport

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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.

docs/superpowers/plans/2026-07-22-info-popover.md

@@ -0,0 +1,739 @@
+# Info Popover Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the two broken metric-help affordances (the off-viewport `MetricTooltip` bubble and the native-`title` compare `?` help) with one `@floating-ui/react`-backed `InfoPopover` that stays on-screen in any viewport and shows a custom (non-native) tooltip on desktop.
+
+**Architecture:** One shared engine (`InfoPopover`) owns all Floating UI positioning and interactions. Two existing components become thin adapters over it: `MetricTooltip` keeps its public API (so ~24 detail-page call sites are untouched), and `RowLabel` in `sectionShared.tsx` swaps its native-`title` span for `InfoPopover` (so ~14 compare `tip=` call sites are untouched).
+
+**Tech Stack:** Next.js 16, React 19, TypeScript, `@floating-ui/react`, CSS Modules, Jest + jsdom + Testing Library, Playwright (e2e).
+
+## Global Constraints
+
+- All work happens in `nextjs-app/` unless a path says otherwise. Commands below assume the working directory is `nextjs-app/`.
+- Path alias: `@/` → `nextjs-app/` root (jest `moduleNameMapper` and tsconfig).
+- Jest test locations: files under `__tests__/**` or named `*.test.tsx`. Env is `jest-environment-jsdom`.
+- Trigger glyph is the circled **?** everywhere (replaces ⓘ on detail pages).
+- Trigger is a real `<button>` with a min 24px tap target (WCAG 2.5.8) and an accessible name.
+- `InfoPopover` renders `null` when it has no `plain` content (preserves current `MetricTooltip` behaviour).
+- Positioning/interaction is delegated to Floating UI — do not hand-roll positioning, outside-click, or Escape handling.
+- Run `npx tsc --noEmit` and `npx jest` green before every commit that changes code.
+- Never push to `main`; this plan's branch is `feat/info-popover-tooltip`.
+
+---
+
+### Task 1: Add the `@floating-ui/react` dependency
+
+**Files:**
+- Modify: `nextjs-app/package.json` (dependencies)
+- Modify: `nextjs-app/package-lock.json` (generated)
+
+**Interfaces:**
+- Consumes: nothing.
+- Produces: `@floating-ui/react` importable — the hooks `useFloating`, `autoUpdate`, `offset`, `flip`, `shift`, `arrow`, `useHover`, `useFocus`, `useClick`, `useDismiss`, `useRole`, `useInteractions`, and the component `FloatingPortal`, `FloatingArrow`.
+
+- [ ] **Step 1: Install the package**
+
+Run:
+```bash
+npm install @floating-ui/react@^0.27.0
+```
+Expected: `package.json` gains `"@floating-ui/react": "^0.27.0"` under `dependencies`; `package-lock.json` updates; exit 0.
+
+- [ ] **Step 2: Verify it resolves**
+
+Run:
+```bash
+node -e "const f=require('@floating-ui/react'); console.log(typeof f.useFloating, typeof f.FloatingPortal, typeof f.useInteractions)"
+```
+Expected: `function function function`
+
+- [ ] **Step 3: Typecheck still passes**
+
+Run:
+```bash
+npx tsc --noEmit
+```
+Expected: no output (exit 0).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add package.json package-lock.json
+git commit -m "build(deps): add @floating-ui/react for the info popover"
+```
+
+---
+
+### Task 2: Build `InfoPopover` (the shared engine) with unit tests
+
+**Files:**
+- Create: `nextjs-app/components/InfoPopover.tsx`
+- Create: `nextjs-app/components/InfoPopover.module.css`
+- Test: `nextjs-app/__tests__/components/InfoPopover.test.tsx`
+
+**Interfaces:**
+- Consumes: `@floating-ui/react` (Task 1).
+- Produces:
+  ```ts
+  export interface InfoPopoverProps {
+    label?: string;    // bold heading
+    plain?: string;    // body text (primary explanation)
+    detail?: string;   // muted supplementary line
+    ariaLabel?: string; // accessible name for the trigger button
+  }
+  export function InfoPopover(props: InfoPopoverProps): JSX.Element | null;
+  ```
+  Behaviour: renders `null` if `plain` is falsy. Otherwise renders a `<button>`
+  (the circled `?`) with `aria-label={ariaLabel ?? 'More information'}` and
+  `aria-expanded`. When open, a portalled `role="tooltip"` container shows
+  `label` (if any), `plain`, and `detail` (if any). Opens on hover (100ms
+  open / 0ms close) and focus on desktop, on click for touch; closes on
+  outside-press and Escape.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `nextjs-app/__tests__/components/InfoPopover.test.tsx`:
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InfoPopover } from '@/components/InfoPopover';
+
+describe('InfoPopover', () => {
+  it('renders nothing when there is no plain content', () => {
+    const { container } = render(<InfoPopover label="X" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a labelled, collapsed trigger button', () => {
+    render(<InfoPopover plain="what it means" ariaLabel="Reading score" />);
+    const btn = screen.getByRole('button', { name: 'Reading score' });
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('opens on click and shows label, plain and detail', async () => {
+    const user = userEvent.setup();
+    render(
+      <InfoPopover
+        label="Reading, Writing & Maths"
+        plain="% reaching the expected standard"
+        detail="National average ~60%"
+        ariaLabel="RWM"
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'RWM' }));
+    const tip = await screen.findByRole('tooltip');
+    expect(tip).toHaveTextContent('Reading, Writing & Maths');
+    expect(tip).toHaveTextContent('% reaching the expected standard');
+    expect(tip).toHaveTextContent('National average ~60%');
+    expect(screen.getByRole('button', { name: 'RWM' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+  });
+
+  it('closes again on a second click', async () => {
+    const user = userEvent.setup();
+    render(<InfoPopover plain="body" ariaLabel="Info" />);
+    const btn = screen.getByRole('button', { name: 'Info' });
+    await user.click(btn);
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    await user.click(btn);
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('closes on Escape', async () => {
+    const user = userEvent.setup();
+    render(<InfoPopover plain="body" ariaLabel="Info" />);
+    await user.click(screen.getByRole('button', { name: 'Info' }));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('defaults the accessible name when no ariaLabel is given', () => {
+    render(<InfoPopover plain="body" />);
+    expect(
+      screen.getByRole('button', { name: 'More information' }),
+    ).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run:
+```bash
+npx jest __tests__/components/InfoPopover.test.tsx
+```
+Expected: FAIL — `Cannot find module '@/components/InfoPopover'`.
+
+- [ ] **Step 3: Write the component**
+
+Create `nextjs-app/components/InfoPopover.tsx`:
+```tsx
+'use client';
+
+import { useRef, useState } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  arrow,
+  useHover,
+  useFocus,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingPortal,
+  FloatingArrow,
+} from '@floating-ui/react';
+import styles from './InfoPopover.module.css';
+
+export interface InfoPopoverProps {
+  label?: string;
+  plain?: string;
+  detail?: string;
+  ariaLabel?: string;
+}
+
+export function InfoPopover({ label, plain, detail, ariaLabel }: InfoPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const arrowRef = useRef<SVGSVGElement>(null);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: 'top',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(8),
+      flip({ fallbackAxisSideDirection: 'start' }),
+      shift({ padding: 8 }),
+      arrow({ element: arrowRef, padding: 8 }),
+    ],
+  });
+
+  // Hover (desktop) with a short open delay, keyboard focus, tap (touch),
+  // outside-press + Escape to dismiss. Floating UI disables hover on touch,
+  // so tap and hover never double-fire.
+  const hover = useHover(context, { delay: { open: 100, close: 0 } });
+  const focus = useFocus(context);
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    click,
+    dismiss,
+    role,
+  ]);
+
+  if (!plain) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={refs.setReference}
+        className={styles.icon}
+        aria-label={ariaLabel ?? 'More information'}
+        aria-expanded={open}
+        {...getReferenceProps()}
+      >
+        ?
+      </button>
+      {open && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            className={styles.tooltip}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            <FloatingArrow ref={arrowRef} context={context} className={styles.arrow} />
+            {label && <span className={styles.label}>{label}</span>}
+            <span className={styles.plain}>{plain}</span>
+            {detail && <span className={styles.detail}>{detail}</span>}
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}
+```
+
+- [ ] **Step 4: Write the styles**
+
+Create `nextjs-app/components/InfoPopover.module.css`:
+```css
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  margin: -6px 0;
+  padding: 0;
+  border: none;
+  background: none;
+  /* font-size:0 hides the button's own "?" text node; the ::before glyph
+     below carries the visible circled "?" at its own explicit size. */
+  font-size: 0;
+  color: var(--text-muted, #8a7a72);
+  cursor: help;
+  line-height: 1;
+  user-select: none;
+  transition: color 0.15s ease;
+}
+
+/* The visible affordance: a small circled "?" centred in the 24px target. */
+.icon::before {
+  content: '?';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  font-size: 0.65rem;
+}
+
+.icon:hover,
+.icon[aria-expanded='true'],
+.icon:focus-visible {
+  color: var(--accent-coral-dark, #b04a2e);
+}
+
+.tooltip {
+  z-index: 9999;
+  width: max-content;
+  max-width: min(260px, calc(100vw - 24px));
+  background: var(--bg-primary, #faf7f2);
+  border: 1px solid var(--border-color, #e8ddd4);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.arrow {
+  fill: var(--bg-primary, #faf7f2);
+  stroke: var(--border-color, #e8ddd4);
+  stroke-width: 1px;
+}
+
+.label {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--text-primary, #2c2420);
+}
+
+.plain {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #5a4a44);
+  line-height: 1.4;
+}
+
+.detail {
+  font-size: 0.7rem;
+  color: var(--text-muted, #8a7a72);
+  line-height: 1.4;
+  margin-top: 0.1rem;
+}
+```
+
+- [ ] **Step 5: Run the tests to verify they pass**
+
+Run:
+```bash
+npx jest __tests__/components/InfoPopover.test.tsx
+```
+Expected: PASS (6 tests).
+
+- [ ] **Step 6: Typecheck**
+
+Run:
+```bash
+npx tsc --noEmit
+```
+Expected: no output (exit 0).
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add components/InfoPopover.tsx components/InfoPopover.module.css __tests__/components/InfoPopover.test.tsx
+git commit -m "feat(ui): add InfoPopover — viewport-aware metric help via Floating UI"
+```
+
+---
+
+### Task 3: Reduce `MetricTooltip` to a thin adapter over `InfoPopover`
+
+**Files:**
+- Modify: `nextjs-app/components/MetricTooltip.tsx` (full rewrite of body)
+- Delete: `nextjs-app/components/MetricTooltip.module.css`
+- Test: `nextjs-app/__tests__/components/MetricTooltip.test.tsx` (create)
+
+**Interfaces:**
+- Consumes: `InfoPopover` (Task 2), `METRIC_EXPLANATIONS` from `@/lib/metrics`.
+- Produces: `MetricTooltip` with unchanged public props
+  `{ metricKey?: string; label?: string; plain?: string; detail?: string }`.
+  Resolves `metricKey` → `METRIC_EXPLANATIONS[metricKey]`, with explicit
+  `label`/`plain`/`detail` props overriding the looked-up values. Passes the
+  resolved label as `InfoPopover`'s `ariaLabel`.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `nextjs-app/__tests__/components/MetricTooltip.test.tsx`:
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MetricTooltip } from '@/components/MetricTooltip';
+import { METRIC_EXPLANATIONS } from '@/lib/metrics';
+
+describe('MetricTooltip', () => {
+  it('resolves content from a metricKey', async () => {
+    const key = Object.keys(METRIC_EXPLANATIONS)[0];
+    const exp = METRIC_EXPLANATIONS[key];
+    const user = userEvent.setup();
+    render(<MetricTooltip metricKey={key} />);
+    await user.click(screen.getByRole('button', { name: exp.label }));
+    const tip = await screen.findByRole('tooltip');
+    expect(tip).toHaveTextContent(exp.plain);
+  });
+
+  it('renders nothing for an unknown metricKey with no explicit content', () => {
+    const { container } = render(<MetricTooltip metricKey="__nope__" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('lets explicit props override the looked-up explanation', async () => {
+    const key = Object.keys(METRIC_EXPLANATIONS)[0];
+    const user = userEvent.setup();
+    render(<MetricTooltip metricKey={key} plain="custom text" />);
+    await user.click(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('custom text');
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run:
+```bash
+npx jest __tests__/components/MetricTooltip.test.tsx
+```
+Expected: FAIL — the old `MetricTooltip` renders a `.tooltip` span even when
+collapsed (no `role="tooltip"` gating on open) / different structure, so
+`findByRole('tooltip')` after click and the empty-render assertion diverge from
+the new contract. (If any assertion happens to pass against the old component,
+it still must fail overall before Step 3.)
+
+- [ ] **Step 3: Rewrite the component**
+
+Replace the entire contents of `nextjs-app/components/MetricTooltip.tsx` with:
+```tsx
+'use client';
+
+import { METRIC_EXPLANATIONS } from '@/lib/metrics';
+import { InfoPopover } from './InfoPopover';
+
+interface MetricTooltipProps {
+  metricKey?: string;
+  label?: string;
+  plain?: string;
+  detail?: string;
+}
+
+export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltipProps) {
+  const explanation = metricKey ? METRIC_EXPLANATIONS[metricKey] : undefined;
+  const resolvedLabel = label ?? explanation?.label;
+  return (
+    <InfoPopover
+      label={resolvedLabel}
+      plain={plain ?? explanation?.plain}
+      detail={detail ?? explanation?.detail}
+      ariaLabel={resolvedLabel ? `What does ${resolvedLabel} mean?` : undefined}
+    />
+  );
+}
+```
+
+- [ ] **Step 4: Delete the now-unused stylesheet**
+
+Run:
+```bash
+git rm components/MetricTooltip.module.css
+```
+Expected: file staged for deletion. (The old component was its only importer;
+`InfoPopover.module.css` supersedes it.)
+
+- [ ] **Step 5: Verify nothing else imports the deleted CSS**
+
+Run:
+```bash
+grep -rn "MetricTooltip.module.css" components app lib || echo "no importers"
+```
+Expected: `no importers`.
+
+- [ ] **Step 6: Run the tests to verify they pass**
+
+Run:
+```bash
+npx jest __tests__/components/MetricTooltip.test.tsx
+```
+Expected: PASS (3 tests).
+
+- [ ] **Step 7: Typecheck**
+
+Run:
+```bash
+npx tsc --noEmit
+```
+Expected: no output (exit 0).
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add components/MetricTooltip.tsx __tests__/components/MetricTooltip.test.tsx
+git commit -m "refactor(ui): MetricTooltip delegates to InfoPopover (circled ? glyph)"
+```
+
+---
+
+### Task 4: Swap the compare `?` help (`RowLabel`) to `InfoPopover`
+
+**Files:**
+- Modify: `nextjs-app/components/compare/sectionShared.tsx` (`RowLabel`)
+- Modify: `nextjs-app/components/compare/compareSections.module.css` (remove `.help`)
+- Test: `nextjs-app/__tests__/components/sectionShared.test.tsx` (create)
+
+**Interfaces:**
+- Consumes: `InfoPopover` (Task 2).
+- Produces: `RowLabel({ children, tip })` renders the label text plus, when
+  `tip` is set, an `InfoPopover` with `plain={tip}`. `ariaLabel` is omitted, so
+  the trigger uses `InfoPopover`'s default accessible name `"More information"`
+  (the row label is arbitrary `ReactNode`, so there is no clean string to derive
+  a per-row name from). `Measure` and all compare `tip=` call sites are
+  unchanged.
+
+- [ ] **Step 1: Write the failing test**
+
+Create `nextjs-app/__tests__/components/sectionShared.test.tsx`:
+```tsx
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RowLabel } from '@/components/compare/sectionShared';
+
+describe('RowLabel', () => {
+  it('renders its label text', () => {
+    render(<RowLabel>Attainment 8</RowLabel>);
+    expect(screen.getByText('Attainment 8')).toBeInTheDocument();
+  });
+
+  it('shows no help affordance when no tip is given', () => {
+    render(<RowLabel>Attainment 8</RowLabel>);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('opens the tip in a popover on click', async () => {
+    const user = userEvent.setup();
+    render(<RowLabel tip="Average GCSE score across 8 subjects">Attainment 8</RowLabel>);
+    await user.click(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(
+      'Average GCSE score across 8 subjects',
+    );
+  });
+});
+```
+
+- [ ] **Step 2: Run the test to verify it fails**
+
+Run:
+```bash
+npx jest __tests__/components/sectionShared.test.tsx
+```
+Expected: FAIL — the current `RowLabel` renders a `<span title=...>` (not a
+`button`/`role="tooltip"`), so the click test fails.
+
+- [ ] **Step 3: Update `RowLabel`**
+
+In `nextjs-app/components/compare/sectionShared.tsx`, add the import near the
+other imports:
+```tsx
+import { InfoPopover } from '@/components/InfoPopover';
+```
+Then replace the `RowLabel` function:
+```tsx
+export function RowLabel({ children, tip }: { children: ReactNode; tip?: string }) {
+  return (
+    <div className={styles.rowLabel}>
+      {children}
+      {tip && <InfoPopover plain={tip} />}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: Remove the dead `.help` style**
+
+In `nextjs-app/components/compare/compareSections.module.css`, delete the entire
+`.help { … }` rule (the `display: inline-flex; width: 15px; … flex: none;`
+block — the circled-`?` styling now lives in `InfoPopover.module.css`).
+
+- [ ] **Step 5: Confirm `.help` is unreferenced**
+
+Run:
+```bash
+grep -rn "styles.help\|\.help\b" components/compare || echo "no references"
+```
+Expected: `no references`.
+
+- [ ] **Step 6: Run the tests to verify they pass**
+
+Run:
+```bash
+npx jest __tests__/components/sectionShared.test.tsx
+```
+Expected: PASS (3 tests).
+
+- [ ] **Step 7: Full unit suite + typecheck**
+
+Run:
+```bash
+npx tsc --noEmit && npx jest
+```
+Expected: typecheck clean; all suites pass (existing + the 3 new suites).
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add components/compare/sectionShared.tsx components/compare/compareSections.module.css __tests__/components/sectionShared.test.tsx
+git commit -m "refactor(compare): row-label help uses InfoPopover, not native title"
+```
+
+---
+
+### Task 5: E2E regression guard — popover stays within the mobile viewport
+
+**Files:**
+- Modify: `nextjs-app/../e2e/tests/journeys.spec.ts` (add one test)
+
+**Interfaces:**
+- Consumes: the running app (staging/local baseURL), the `twoPrimaryUrns`
+  helper already defined in `journeys.spec.ts`.
+- Produces: a Playwright test asserting an opened compare help popover's
+  bounding box is fully within the viewport on a narrow screen.
+
+- [ ] **Step 1: Add the failing-guard test**
+
+Append to `nextjs-app/../e2e/tests/journeys.spec.ts` (i.e. `e2e/tests/journeys.spec.ts`):
+```ts
+test('compare metric-help popover stays within the mobile viewport', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  const [urn0, urn1] = await twoPrimaryUrns(page);
+  await page.goto(`/compare?urns=${urn0},${urn1}`);
+
+  await expect(
+    page.getByRole('heading', { name: 'At a glance' }),
+  ).toBeVisible({ timeout: 15_000 });
+
+  // The metric-help triggers are the circled-"?" buttons in the row labels.
+  // "More information" is InfoPopover's default accessible name.
+  const help = page.getByRole('button', { name: 'More information' }).first();
+  await expect(help).toBeVisible({ timeout: 15_000 });
+  await help.click();
+
+  const tip = page.getByRole('tooltip');
+  await expect(tip).toBeVisible();
+
+  // The whole bubble must sit inside the viewport — the original bug pushed it
+  // off the right edge with no way to scroll to it.
+  const box = await tip.boundingBox();
+  const width = page.viewportSize()!.width;
+  expect(box).not.toBeNull();
+  expect(box!.x).toBeGreaterThanOrEqual(0);
+  expect(box!.x + box!.width).toBeLessThanOrEqual(width);
+
+  // And the page must not have gained a horizontal scrollbar from the bubble.
+  const bodyOverflowsX = await page
+    .locator('body')
+    .evaluate((el) => el.scrollWidth > el.clientWidth + 1);
+  expect(bodyOverflowsX).toBe(false);
+});
+```
+
+- [ ] **Step 2: Lint/typecheck the e2e file**
+
+Run (from `e2e/`):
+```bash
+cd ../e2e && npx tsc --noEmit -p . 2>/dev/null || npx tsc --noEmit journeys 2>/dev/null; cd ../nextjs-app
+```
+Expected: no type errors reported for `journeys.spec.ts`. (If the e2e package
+has no standalone tsconfig, this is a no-op; the CI Playwright run type-checks
+on execution.)
+
+- [ ] **Step 3: Note on running e2e**
+
+The e2e journeys run against a deployed environment (staging) in CI, per
+`CLAUDE.md`; they are not run locally here (no local server). This test will
+execute in the staging gate after merge. Do not attempt to start a local server.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add ../e2e/tests/journeys.spec.ts
+git commit -m "test(e2e): compare help popover stays within the mobile viewport"
+```
+
+---
+
+### Task 6: Final verification and PR
+
+**Files:** none (verification + PR).
+
+- [ ] **Step 1: Full typecheck + unit suite**
+
+Run (from `nextjs-app/`):
+```bash
+npx tsc --noEmit && npx jest 2>&1 | tail -8
+```
+Expected: typecheck clean; all suites pass.
+
+- [ ] **Step 2: Production build sanity (catches client/server boundary issues)**
+
+Run:
+```bash
+npx next build 2>&1 | tail -20
+```
+Expected: build completes without errors. (`InfoPopover` is a client
+component — `'use client'` — so this confirms the portal usage compiles.)
+
+- [ ] **Step 3: Confirm no stragglers reference removed APIs**
+
+Run:
+```bash
+grep -rn "MetricTooltip.module.css\|styles.help\|title={tip}" components app || echo "clean"
+```
+Expected: `clean`.
+
+- [ ] **Step 4: Push and open the PR**
+
+```bash
+git push -u origin feat/info-popover-tooltip
+```
+Then open a Gitea PR (base `main`, head `feat/info-popover-tooltip`) via the
+credential-helper + API pattern used in this repo, summarising: the two bugs
+fixed (off-viewport mobile bubble; slow native-`title` desktop hover), the
+unified `InfoPopover` approach, the circled-`?` standardisation, the new
+`@floating-ui/react` dependency, and the mobile-viewport e2e guard.
+```

docs/superpowers/specs/2026-07-22-info-popover-design.md

@@ -0,0 +1,125 @@
+# Info Popover — unified metric-help affordance
+
+**Date:** 2026-07-22
+**Status:** Approved (design)
+
+## Problem
+
+Two different "info affordance" patterns explain metrics across the app, and both are broken:
+
+1. **`MetricTooltip` (ⓘ)** — used on the two detail pages (`SchoolDetailView`,
+   `SecondarySchoolDetailView`). Its bubble is `position: absolute` with a fixed
+   `220px` width and no viewport-collision detection. Near a screen edge on
+   mobile the bubble renders **partly or wholly off-viewport with no way to
+   scroll to it** — effectively unusable. A `left: -12px` mobile hack only
+   shifts the problem, it doesn't solve it.
+
+2. **Compare-section `?` help** — every compare section funnels through
+   `RowLabel` in `components/compare/sectionShared.tsx`, which uses the **native
+   `title=` attribute**. On desktop the native tooltip has a long, unconfigurable
+   hover delay; on touch it barely surfaces at all.
+
+We want a single component that positions itself correctly in any viewport and
+shows a custom (non-native) tooltip on desktop.
+
+## Decisions
+
+- **Positioning: `@floating-ui/react`** (industry standard, ~10KB gzipped, React
+  19 compatible). Chosen over a hand-rolled portal + JS positioning because the
+  current hand-rolled approach is exactly what failed, and Floating UI already
+  solves flip/shift/portal/interactions/ARIA.
+- **Mobile presentation: repositioning popover** (not a bottom-sheet). Same small
+  bubble as desktop; Floating UI's `shift`/`flip` keep it fully on-screen. One
+  presentation to build and maintain, consistent across platforms.
+- **Glyph: standardise on the circled `?`** everywhere (replaces ⓘ on the detail
+  pages). Matches the common "help" convention.
+- **Bundle:** adding `@floating-ui/react` as a runtime dependency is accepted.
+
+## Architecture
+
+One shared engine, two thin adapters — **no call-site churn**.
+
+### `InfoPopover` (new — `components/InfoPopover.tsx`)
+
+Owns all behaviour via `@floating-ui/react`.
+
+- **Trigger:** a real `<button>` (min 24px tap target — WCAG 2.5.8 —
+  keyboard-focusable) showing the circled `?` glyph. Muted colour; hover / focus
+  / open → accent colour.
+- **Positioning middleware:** `offset(6)` + `flip()` + `shift({ padding: 8 })`
+  so the bubble flips above/below and slides sideways to **always stay fully
+  on-screen** (the direct fix for the off-viewport bug). An `arrow()` element
+  tracks the trigger.
+- **Portal:** rendered inside a `FloatingPortal` so it escapes the compare
+  grid's `overflow`/`transform` clipping contexts.
+- **Interactions** (merged via `useInteractions`, one code path for both
+  platforms):
+  - `useHover(context, { delay: { open: 100, close: 0 } })` — short open delay
+    fixes the slow native-`title` hover; Floating UI disables hover on touch
+    devices so it doesn't double-fire with tap.
+  - `useFocus` — keyboard focus reveals it.
+  - `useClick` — tap toggles on touch.
+  - `useDismiss` — outside-press and `Escape` close it (opening another popover
+    closes the first, since the outside-press lands on the new trigger).
+  - `useRole(context, { role: 'tooltip' })` — ARIA wiring.
+- **Content:** optional `label` (bold), `plain` (body), `detail` (muted) — same
+  content shape as today.
+
+**Props:**
+
+```ts
+interface InfoPopoverProps {
+  label?: string;   // bold heading
+  plain?: string;   // body text (the primary explanation)
+  detail?: string;  // muted supplementary line
+  /** Accessible name for the trigger button, e.g. the metric label. */
+  ariaLabel?: string;
+}
+```
+
+Renders `null` when there is no `plain` content (mirrors current
+`MetricTooltip` behaviour).
+
+### Adapter 1 — `MetricTooltip` (public API unchanged)
+
+Keeps its existing props (`metricKey`, `label`, `plain`, `detail`), still
+resolves `metricKey` → `METRIC_EXPLANATIONS`, and renders `InfoPopover` with the
+resolved content. **All ~24 detail-page call sites are untouched.** The
+hand-rolled positioning/dismiss `useEffect` and the `.tooltip` absolute-position
+CSS (including the `left: -12px` mobile hack) are deleted.
+
+### Adapter 2 — `RowLabel` (in `sectionShared.tsx`)
+
+Replaces the native-`title` `?` span with `InfoPopover`, passing the `tip`
+string as `plain` and the row label as `ariaLabel`. **All ~14 compare `tip=`
+call sites are untouched** (they pass through `Measure` → `RowLabel`).
+
+## Removed / replaced
+
+- `MetricTooltip`'s hand-rolled open/dismiss `useEffect`.
+- `MetricTooltip.module.css` `.tooltip` absolute positioning + arrow + the
+  `@media (max-width: 640px)` `left: -12px` hack (superseded by Floating UI).
+- Native `title=` on the compare `?` help span.
+
+## Testing
+
+1. **Unit (jest + jsdom)** — `InfoPopover`:
+   - trigger button renders with the correct `aria-label` and `aria-expanded`;
+   - click opens and closes it;
+   - `label` / `plain` / `detail` render when open;
+   - `Escape` closes it.
+   Positioning (flip/shift) is Floating UI's own tested concern, not re-tested
+   here.
+
+2. **E2E (Playwright, mobile viewport)** — the regression guard for the reported
+   bug. On a narrow viewport, open a help popover near the **right edge** of a
+   compare section and assert its bounding box is fully within the viewport
+   (`rect.right <= innerWidth && rect.left >= 0`). This is the check that would
+   have caught the original overflow. Satisfies the CLAUDE.md rule to extend
+   `e2e/` when user-facing behaviour changes.
+
+## Out of scope
+
+- Other `title=` usages (button/link hints, empty-state props) — these are not
+  metric explainers and keep native `title`.
+- No bottom-sheet / alternate mobile presentation.

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();
@@ -466,3 +478,36 @@ test('rankings stay populated after picking a specific year', async ({ page }) =
   await expect(rows.first()).toBeVisible({ timeout: 15_000 });
   expect(await rows.count()).toBeGreaterThan(5);
 });
+
+test('compare metric-help popover stays within the mobile viewport', async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  const [urn0, urn1] = await twoPrimaryUrns(page);
+  await page.goto(`/compare?urns=${urn0},${urn1}`);
+
+  await expect(
+    page.getByRole('heading', { name: 'At a glance' }),
+  ).toBeVisible({ timeout: 15_000 });
+
+  // The metric-help triggers are the circled-"?" buttons in the row labels.
+  // "More information" is InfoPopover's default accessible name.
+  const help = page.getByRole('button', { name: 'More information' }).first();
+  await expect(help).toBeVisible({ timeout: 15_000 });
+  await help.click();
+
+  const tip = page.getByRole('tooltip');
+  await expect(tip).toBeVisible();
+
+  // The whole bubble must sit inside the viewport — the original bug pushed it
+  // off the right edge with no way to scroll to it.
+  const box = await tip.boundingBox();
+  const width = page.viewportSize()!.width;
+  expect(box).not.toBeNull();
+  expect(box!.x).toBeGreaterThanOrEqual(0);
+  expect(box!.x + box!.width).toBeLessThanOrEqual(width);
+
+  // And the page must not have gained a horizontal scrollbar from the bubble.
+  const bodyOverflowsX = await page
+    .locator('body')
+    .evaluate((el) => el.scrollWidth > el.clientWidth + 1);
+  expect(bodyOverflowsX).toBe(false);
+});

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

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InfoPopover } from '@/components/InfoPopover';
+
+describe('InfoPopover', () => {
+  it('renders nothing when there is no plain content', () => {
+    const { container } = render(<InfoPopover label="X" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders a labelled, collapsed trigger button', () => {
+    render(<InfoPopover plain="what it means" ariaLabel="Reading score" />);
+    const btn = screen.getByRole('button', { name: 'Reading score' });
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('opens on click and shows label, plain and detail', async () => {
+    const user = userEvent.setup();
+    render(
+      <InfoPopover
+        label="Reading, Writing & Maths"
+        plain="% reaching the expected standard"
+        detail="National average ~60%"
+        ariaLabel="RWM"
+      />,
+    );
+    await user.click(screen.getByRole('button', { name: 'RWM' }));
+    const tip = await screen.findByRole('tooltip');
+    expect(tip).toHaveTextContent('Reading, Writing & Maths');
+    expect(tip).toHaveTextContent('% reaching the expected standard');
+    expect(tip).toHaveTextContent('National average ~60%');
+    expect(screen.getByRole('button', { name: 'RWM' })).toHaveAttribute(
+      'aria-expanded',
+      'true',
+    );
+  });
+
+  it('closes again on a second click', async () => {
+    const user = userEvent.setup();
+    render(<InfoPopover plain="body" ariaLabel="Info" />);
+    const btn = screen.getByRole('button', { name: 'Info' });
+    await user.click(btn);
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    await user.click(btn);
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('closes on Escape', async () => {
+    const user = userEvent.setup();
+    render(<InfoPopover plain="body" ariaLabel="Info" />);
+    await user.click(screen.getByRole('button', { name: 'Info' }));
+    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+  });
+
+  it('defaults the accessible name when no ariaLabel is given', () => {
+    render(<InfoPopover plain="body" />);
+    expect(
+      screen.getByRole('button', { name: 'More information' }),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MetricTooltip } from '@/components/MetricTooltip';
+import { METRIC_EXPLANATIONS } from '@/lib/metrics';
+
+describe('MetricTooltip', () => {
+  it('resolves content from a metricKey', async () => {
+    const key = Object.keys(METRIC_EXPLANATIONS)[0];
+    const exp = METRIC_EXPLANATIONS[key];
+    const user = userEvent.setup();
+    render(<MetricTooltip metricKey={key} />);
+    // Collapsed by default — the popover content is not in the DOM until opened
+    // (the old component left an always-present role="tooltip" span behind).
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: `What does ${exp.label} mean?` }));
+    const tip = await screen.findByRole('tooltip');
+    expect(tip).toHaveTextContent(exp.plain);
+  });
+
+  it('renders nothing for an unknown metricKey with no explicit content', () => {
+    const { container } = render(<MetricTooltip metricKey="__nope__" />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('lets explicit props override the looked-up explanation', async () => {
+    const key = Object.keys(METRIC_EXPLANATIONS)[0];
+    const user = userEvent.setup();
+    render(<MetricTooltip metricKey={key} plain="custom text" />);
+    await user.click(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('custom text');
+  });
+});

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

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RowLabel } from '@/components/compare/sectionShared';
+
+describe('RowLabel', () => {
+  it('renders its label text', () => {
+    render(<RowLabel>Attainment 8</RowLabel>);
+    expect(screen.getByText('Attainment 8')).toBeInTheDocument();
+  });
+
+  it('shows no help affordance when no tip is given', () => {
+    render(<RowLabel>Attainment 8</RowLabel>);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('opens the tip in a popover on click', async () => {
+    const user = userEvent.setup();
+    render(<RowLabel tip="Average GCSE score across 8 subjects">Attainment 8</RowLabel>);
+    await user.click(screen.getByRole('button'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(
+      'Average GCSE score across 8 subjects',
+    );
+  });
+});

nextjs-app/app/layout.tsx

@@ -85,6 +85,14 @@ 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,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/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 UK school performance data actually readable</h2>
+          <h2 className={styles.editorialHeading}>Making England&apos;s school performance data actually readable</h2>
           <p>
-            School performance data in England is rich but fragmented. The Department for Education publishes
+            School performance data in England is rich but fragmented. The Department for Education and Ofsted
-            Key Stage 2 SATs, GCSE attainment, Ofsted outcomes, progress scores, admissions figures and
+            publish Key Stage 2 SATs, GCSE attainment, inspection outcomes, progress scores, admissions figures
-            demographics — each in its own table, each with its own jargon.
+            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
-            40-page inspection report.
+            full inspection report.
           </p>
         </div>
         <div className={styles.factbox}>

nextjs-app/components/HomeView.module.css

@@ -720,10 +720,13 @@
 .miniRowHead {
   display: flex;
   justify-content: space-between;
-  font-size: 0.48rem;
+  align-items: baseline;
+  gap: 0.2rem;
+  font-size: 0.44rem;
   color: var(--text-muted, #6d685f);
   text-transform: uppercase;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
 }
 
 .miniRowHead strong {
@@ -869,28 +872,77 @@
   color: var(--text-primary, #1a1612);
 }
 
-.ofstedBadge {
+.ofstedFramework {
   align-self: flex-start;
-  padding: 0.2rem 0.55rem;
+  padding: 0.15rem 0.5rem;
   border-radius: 4px;
-  background: rgba(45, 125, 125, 0.12);
+  background: rgba(90, 58, 110, 0.12);
-  color: var(--accent-teal, #2d7d7d);
+  color: #5a3a6e;
-  font-size: 0.55rem;
+  font-size: 0.5rem;
   font-weight: 700;
   letter-spacing: 0.05em;
+  text-transform: uppercase;
 }
 
-.ofstedVerdict {
+.rcList {
-  font-family: var(--font-playfair), 'Playfair Display', serif;
+  display: flex;
-  font-size: 1.05rem;
+  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;
-  line-height: 1.2;
+  letter-spacing: 0.03em;
-  color: var(--text-primary, #1a1612);
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
-.ofstedVerdict em {
+.rcChipGood {
+  background: rgba(45, 125, 125, 0.12);
   color: var(--accent-teal, #2d7d7d);
-  font-style: normal;
+}
+
+.rcChipNeutral {
+  background: var(--accent-gold-bg, rgba(180, 150, 40, 0.12));
+  color: var(--accent-gold-text, #7a6800);
+}
+
+/* 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;
+  color: var(--accent-teal, #2d7d7d);
+  border: 1px solid rgba(45, 125, 125, 0.4);
 }
 
 .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 with 2026/2027 admissions results
+            Updated for the 2026/27 admissions round
           </span>
           <h1 className={styles.heroTitle}>
             Every school in England, <em className={styles.heroEmph}>compared.</em>

nextjs-app/components/HowItWorksSection.tsx

@@ -5,15 +5,26 @@
 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: 73, nat: 75 },
+    { subj: 'Reading', exp: 96, exc: 44, nat: 75, excLabel: 'Higher std' },
-    { subj: 'Writing', exp: 81, exc: 15, nat: 72 },
+    { subj: 'Writing', exp: 81, exc: 26, nat: 72, excLabel: 'Greater depth' },
-    { subj: 'Maths', exp: 85, exc: 47, nat: 74 },
+    { subj: 'Maths', exp: 85, exc: 41, nat: 74, excLabel: 'Higher std' },
   ];
   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 },
-    { label: 'Reading progress', a: '+2.1', b: '+0.4', 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 },
   ];
 
   return (
@@ -29,7 +40,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 }) => (
+                {miniCascade.map(({ subj, exp, exc, nat, excLabel }) => (
                   <div key={subj} className={styles.miniCascadeCol}>
                     <div className={styles.miniSubj}>{subj}</div>
                     <div className={styles.miniRowHead}><span>Expected</span><strong>{exp}%</strong></div>
@@ -37,7 +48,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>Exceeding</span><strong>{exc}%</strong></div>
+                    <div className={styles.miniRowHead}><span>{excLabel}</span><strong>{exc}%</strong></div>
                     <div className={styles.miniTrack}>
                       <div className={styles.miniBarExc} style={{ width: `${exc}%` }} />
                     </div>
@@ -49,15 +60,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 50.2</span></div>
+                  <div className={styles.att8BarHead}><span>This school</span><span>National avg 45.9</span></div>
                   <div className={styles.att8Track}>
-                    <div className={styles.att8Fill} style={{ width: '62%' }} />
+                    <div className={styles.att8Fill} style={{ width: '54.8%' }} />
-                    <div className={styles.att8NatLine} style={{ left: '50%' }} />
+                    <div className={styles.att8NatLine} style={{ left: '45.9%' }} />
                   </div>
                 </div>
                 <div className={styles.att8Score}>
-                  <div className={styles.att8Value}>62.4</div>
+                  <div className={styles.att8Value}>54.8</div>
-                  <div className={styles.att8Delta}>+12.2 vs national</div>
+                  <div className={styles.att8Delta}>+8.9 vs national</div>
                 </div>
               </div>
             </div>
@@ -77,15 +88,26 @@ export function HowItWorksSection() {
                 <span className={styles.ofstedBullet} />
                 <span className={styles.ofstedTitle}>Latest Ofsted inspection</span>
               </div>
-              <span className={styles.ofstedBadge}>OUTSTANDING</span>
+              <span className={styles.ofstedFramework}>Report card · five-point scale</span>
-              <div className={styles.ofstedVerdict}>Rated <em>Outstanding</em> at last inspection.</div>
+              <div className={styles.rcList}>
-              <div className={styles.ofstedMeta}>Full inspection · March 2024</div>
+                {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>
             </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}>Current grade, inspection date, and a plain-English headline — without opening a 40-page report.</p>
+            <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>
           </div>
         </div>
 

nextjs-app/components/InfoPopover.module.css

@@ -0,0 +1,77 @@
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  margin: -6px 0;
+  padding: 0;
+  border: none;
+  background: none;
+  /* font-size:0 hides the button's own "?" text node; the ::before glyph
+     below carries the visible circled "?" at its own explicit size. */
+  font-size: 0;
+  color: var(--text-muted, #8a7a72);
+  cursor: help;
+  line-height: 1;
+  user-select: none;
+  transition: color 0.15s ease;
+}
+
+/* The visible affordance: a small circled "?" centred in the 24px target. */
+.icon::before {
+  content: '?';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  font-size: 0.65rem;
+}
+
+.icon:hover,
+.icon[aria-expanded='true'],
+.icon:focus-visible {
+  color: var(--accent-coral-dark, #b04a2e);
+}
+
+.tooltip {
+  z-index: 9999;
+  width: max-content;
+  max-width: min(260px, calc(100vw - 24px));
+  background: var(--bg-primary, #faf7f2);
+  border: 1px solid var(--border-color, #e8ddd4);
+  border-radius: 10px;
+  box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
+  padding: 0.6rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.arrow {
+  fill: var(--bg-primary, #faf7f2);
+  stroke: var(--border-color, #e8ddd4);
+  stroke-width: 1px;
+}
+
+.label {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--text-primary, #2c2420);
+}
+
+.plain {
+  font-size: 0.75rem;
+  color: var(--text-secondary, #5a4a44);
+  line-height: 1.4;
+}
+
+.detail {
+  font-size: 0.7rem;
+  color: var(--text-muted, #8a7a72);
+  line-height: 1.4;
+  margin-top: 0.1rem;
+}

nextjs-app/components/InfoPopover.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  arrow,
+  useHover,
+  useFocus,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingPortal,
+  FloatingArrow,
+} from '@floating-ui/react';
+import styles from './InfoPopover.module.css';
+
+export interface InfoPopoverProps {
+  label?: string;
+  plain?: string;
+  detail?: string;
+  ariaLabel?: string;
+}
+
+export function InfoPopover({ label, plain, detail, ariaLabel }: InfoPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const arrowRef = useRef<SVGSVGElement>(null);
+
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: 'top',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(8),
+      flip({ fallbackAxisSideDirection: 'start' }),
+      shift({ padding: 8 }),
+      arrow({ element: arrowRef, padding: 8 }),
+    ],
+  });
+
+  // Hover (desktop) with a short open delay, keyboard focus, tap (touch),
+  // outside-press + Escape to dismiss. Floating UI disables hover on touch,
+  // so tap and hover never double-fire.
+  const hover = useHover(context, { delay: { open: 100, close: 0 } });
+  const focus = useFocus(context);
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: 'tooltip' });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    click,
+    dismiss,
+    role,
+  ]);
+
+  if (!plain) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        ref={refs.setReference}
+        className={styles.icon}
+        aria-label={ariaLabel ?? 'More information'}
+        aria-expanded={open}
+        {...getReferenceProps()}
+      >
+        ?
+      </button>
+      {open && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            className={styles.tooltip}
+            style={floatingStyles}
+            {...getFloatingProps()}
+          >
+            <FloatingArrow ref={arrowRef} context={context} className={styles.arrow} />
+            {label && <span className={styles.label}>{label}</span>}
+            <span className={styles.plain}>{plain}</span>
+            {detail && <span className={styles.detail}>{detail}</span>}
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+}

nextjs-app/components/MetricTooltip.module.css

@@ -1,114 +0,0 @@
-.wrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
-}
-
-.icon {
-  /* A real button: 24px tap target (WCAG 2.5.8) drawn as the small glyph. */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  min-height: 24px;
-  margin: -6px 0;
-  padding: 0;
-  border: none;
-  background: none;
-  font-size: 0.9em;
-  color: var(--text-muted, #8a7a72);
-  cursor: help;
-  line-height: 1;
-  user-select: none;
-  transition: color 0.15s ease;
-}
-
-.wrapper:hover .icon,
-.icon[aria-expanded="true"] {
-  color: var(--accent-coral-dark, #b04a2e);
-}
-
-.tooltip {
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  width: 220px;
-  background: var(--bg-primary, #faf7f2);
-  border: 1px solid var(--border-color, #e8ddd4);
-  border-radius: 10px;
-  box-shadow: 0 4px 16px rgba(44, 36, 32, 0.15);
-  padding: 0.6rem 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-  pointer-events: none;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
-}
-
-/* Reveal on hover (desktop), keyboard focus, or explicit tap/click toggle. */
-.wrapper:hover .tooltip,
-.wrapper:focus-within .tooltip,
-.tooltipOpen {
-  visibility: visible;
-  opacity: 1;
-}
-
-.tooltipOpen {
-  pointer-events: auto;
-}
-
-/* Small arrow pointing down */
-.tooltip::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 5px solid transparent;
-  border-top-color: var(--border-color, #e8ddd4);
-}
-
-.tooltipLabel {
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: var(--text-primary, #2c2420);
-}
-
-.tooltipPlain {
-  font-size: 0.75rem;
-  color: var(--text-secondary, #5a4a44);
-  line-height: 1.4;
-}
-
-.tooltipDetail {
-  font-size: 0.7rem;
-  color: var(--text-muted, #8a7a72);
-  line-height: 1.4;
-  margin-top: 0.1rem;
-}
-
-@media (max-width: 480px) {
-  .tooltip {
-    width: 180px;
-  }
-}
-
-/* Anchor the bubble to open rightward on phones — icons follow their labels,
-   which start at the left edge, so centring pushed the bubble off-screen. */
-@media (max-width: 640px) {
-  .tooltip {
-    left: -12px;
-    right: auto;
-    transform: none;
-  }
-
-  .tooltip::after {
-    left: 16px;
-    transform: none;
-  }
-}

nextjs-app/components/MetricTooltip.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import { METRIC_EXPLANATIONS } from '@/lib/metrics';
-import styles from './MetricTooltip.module.css';
+import { InfoPopover } from './InfoPopover';
 
 interface MetricTooltipProps {
   metricKey?: string;
@@ -13,51 +12,13 @@ interface MetricTooltipProps {
 
 export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltipProps) {
   const explanation = metricKey ? METRIC_EXPLANATIONS[metricKey] : undefined;
-  const tooltipLabel = label ?? explanation?.label;
+  const resolvedLabel = label ?? explanation?.label;
-  const tooltipPlain = plain ?? explanation?.plain;
-  const tooltipDetail = detail ?? explanation?.detail;
-
-  // Tap/click/keyboard toggle so the definition is reachable on touch devices
-  // and by keyboard, not just mouse hover (hover still works on desktop).
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    const dismiss = (e: Event) => {
-      if (wrapperRef.current && e.target instanceof Node && !wrapperRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setOpen(false);
-    };
-    document.addEventListener('click', dismiss);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('click', dismiss);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [open]);
-
-  if (!tooltipPlain) return null;
-
   return (
-    <span className={styles.wrapper} ref={wrapperRef}>
+    <InfoPopover
-      <button
+      label={resolvedLabel}
-        type="button"
+      plain={plain ?? explanation?.plain}
-        className={styles.icon}
+      detail={detail ?? explanation?.detail}
-        aria-expanded={open}
+      ariaLabel={resolvedLabel ? `What does ${resolvedLabel} mean?` : undefined}
-        aria-label={`What does ${tooltipLabel ?? 'this metric'} mean?`}
+    />
-        onClick={() => setOpen((o) => !o)}
-      >
-        ⓘ
-      </button>
-      <span className={`${styles.tooltip}${open ? ` ${styles.tooltipOpen}` : ''}`} role="tooltip">
-        {tooltipLabel && <span className={styles.tooltipLabel}>{tooltipLabel}</span>}
-        <span className={styles.tooltipPlain}>{tooltipPlain}</span>
-        {tooltipDetail && <span className={styles.tooltipDetail}>{tooltipDetail}</span>}
-      </span>
-    </span>
   );
 }

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 ── */
+/* ── Per-bar national average marker ──
-.natLine {
+   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;
+  top: -3px;
-  height: calc(100% - 20px);
+  bottom: -3px;
-  width: 1.5px;
+  width: 2px;
-  background: rgba(224, 114, 86, 0.35); /* --accent-coral at 35% */
+  transform: translateX(-50%);
-  z-index: 2;
+  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;
+  color: var(--accent-coral-dark, #b04a2e);
-  border-radius: 4px;
+  text-transform: uppercase;
-  white-space: nowrap;
+  letter-spacing: 0.03em;
-  z-index: 3;
-  letter-spacing: 0.02em;
 }
 
 /* ── 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 */}
+        {/* Bars — each carries its own national 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 && (
-            <div className={styles.barRow}>
+            <BarRow
-              <div className={styles.barHeader}>
+              label="Expected"
-                <span className={styles.barLabelSuffix}>Expected</span>
+              value={expectedPct}
-                <span className={styles.barLabel}>{expectedPct.toFixed(0)}%</span>
+              national={nationalExpectedPct}
-              </div>
+              barRef={expectedRef}
-              <div className={styles.barTrack}>
+              barClass={styles.barExpected}
-                <div
+            />
-                  ref={expectedRef}
-                  className={`${styles.bar} ${styles.barExpected}`}
-                  data-width={expectedPct}
-                />
-              </div>
-            </div>
           )}
           {exceedingPct != null && (
-            <div className={styles.barRow}>
+            <BarRow
-              <div className={styles.barHeader}>
+              label="Exceeding"
-                <span className={styles.barLabelSuffix}>Exceeding</span>
+              value={exceedingPct}
-                <span className={styles.barLabel}>{exceedingPct.toFixed(0)}%</span>
+              national={nationalExceedingPct}
-              </div>
+              barRef={exceedingRef}
-              <div className={styles.barTrack}>
+              barClass={styles.barExceeding}
-                <div
+            />
-                  ref={exceedingRef}
-                  className={`${styles.bar} ${styles.barExceeding}`}
-                  data-width={exceedingPct}
-                />
-              </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.module.css

@@ -855,7 +855,10 @@
 /* Charts Section */
 .chartContainer {
     width: 100%;
-    height: 280px;
+    /* 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;
     position: relative;
 }
 

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,
                     },
                   ]}
                 />

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -490,7 +490,10 @@
 /* ── Charts & Map ────────────────────────────────────── */
 .chartContainer {
     width: 100%;
-    height: 280px;
+    /* 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;
     position: relative;
 }
 

nextjs-app/components/SpecialSchoolNote.module.css

@@ -9,7 +9,6 @@
   font-size: 0.9rem;
   line-height: 1.5;
   color: var(--text-secondary, #5c564d);
-  max-width: 72ch;
 }
 .note strong {
   color: var(--text-primary, #1a1612);

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

@@ -132,20 +132,6 @@
   color: var(--text-secondary);
 }
 
-.help {
-  display: inline-flex;
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  border: 1px solid var(--text-muted);
-  color: var(--text-muted);
-  font-size: 0.65rem;
-  align-items: center;
-  justify-content: center;
-  cursor: help;
-  flex: none;
-}
-
 .badge {
   display: inline-block;
   font-weight: 700;

nextjs-app/components/compare/sectionShared.tsx

@@ -11,6 +11,7 @@ import type { CSSProperties, ReactNode } from 'react';
 
 import type { School } from '@/lib/types';
 import { CHART_COLORS, CHART_TEXT_COLORS, shortName } from '@/lib/utils';
+import { InfoPopover } from '@/components/InfoPopover';
 import styles from './compareSections.module.css';
 
 export function Section({
@@ -52,11 +53,7 @@ export function RowLabel({ children, tip }: { children: ReactNode; tip?: string
   return (
     <div className={styles.rowLabel}>
       {children}
-      {tip && (
+      {tip && <InfoPopover plain={tip} />}
-        <span className={styles.help} title={tip} aria-label={tip}>
-          ?
-        </span>
-      )}
     </div>
   );
 }

nextjs-app/package-lock.json

@@ -8,6 +8,7 @@
       "name": "nextjs-app",
       "version": "0.1.0",
       "dependencies": {
+        "@floating-ui/react": "^0.27.20",
         "@types/node": "^25.2.0",
         "@types/react": "^19.2.10",
         "@types/react-dom": "^19.2.3",
@@ -832,6 +833,59 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.20",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.20.tgz",
+      "integrity": "sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.9",
+        "@floating-ui/utils": "^0.2.12",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -9136,6 +9190,12 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz",
+      "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==",
+      "license": "MIT"
+    },
     "node_modules/test-exclude": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",

nextjs-app/package.json

@@ -13,6 +13,7 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.27.20",
     "@types/node": "^25.2.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",