feat(rankings,metrics): score visible on phones; definitions usable everywhere (P2.2, P2.3)

Rankings mobile: the metric value — the point of the page — sat behind
a sideways swipe at 390px. The Area column now folds into a subline
under the school name, leaving Rank | School | Value to fit the
viewport with no horizontal scroll.

Rankings default metric becomes 'expected standard' (rwm_expected_pct);
'higher standard' stays available but no longer frames every school's
headline number in the terms parents least understand.

MetricTooltip was hover-only and display:none on phones — the mobile-
primary audience had zero access to the Attainment 8 / Progress 8 /
EBacc definitions. It is now a real button: tap/click/keyboard
toggleable with outside-click and Escape dismissal, 24px target,
shown at all viewports.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

nextjs-app/components/RankingsView.module.css

@@ -55,13 +55,13 @@
 }
 
 .phaseTabActive {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-dark, #b04a2e);
   color: white;
   font-weight: 600;
 }
 
 .phaseTabActive:hover {
-  background: var(--accent-coral, #e07256);
+  background: var(--accent-coral-darker, #9c3f26);
 }
 
 /* Filters */
@@ -290,7 +290,7 @@
 }
 
 .schoolLink:hover {
-  color: var(--accent-coral, #e07256);
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .areaCell,
@@ -298,6 +298,14 @@
   color: var(--text-secondary, #5c564d);
 }
 
+/* LA subline under the school name — mobile only (Area column hidden there). */
+.schoolCellArea {
+  display: none;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: var(--text-muted, #8a847a);
+}
+
 .valueCell {
   text-align: center;
   font-size: 1rem;
@@ -374,20 +382,26 @@
     font-size: 0.875rem;
   }
 
-  /* Hide less-critical columns on mobile so the metric value stays visible */
+  /* Hide less-critical columns on mobile so the metric value stays visible.
+     Area moves to a subline under the school name (.schoolCellArea) — with a
+     four-column layout the value still overflowed a 390px viewport and the
+     whole point of the page (the score) needed a sideways swipe to see. */
   .typeHeader,
   .typeCell,
   .actionHeader,
-  .actionCell {
+  .actionCell,
+  .areaHeader,
+  .areaCell {
     display: none;
   }
 
-  .schoolHeader {
-    min-width: 140px;
+  .schoolCellArea {
+    display: block;
+    margin-top: 0.15rem;
   }
 
-  .areaHeader {
-    min-width: 80px;
+  .schoolHeader {
+    min-width: 0;
   }
 
   .valueHeader,