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/MetricTooltip.module.css

@@ -6,7 +6,17 @@
 }
 
 .icon {
-  font-size: 0.85em;
+  /* 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;
@@ -14,8 +24,9 @@
   transition: color 0.15s ease;
 }
 
-.wrapper:hover .icon {
-  color: var(--accent-coral, #e07256);
+.wrapper:hover .icon,
+.icon[aria-expanded="true"] {
+  color: var(--accent-coral-dark, #b04a2e);
 }
 
 .tooltip {
@@ -39,12 +50,18 @@
   transition: opacity 0.15s ease, visibility 0.15s ease;
 }
 
-/* Keep tooltip visible when hovering over it */
-.wrapper:hover .tooltip {
+/* 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: '';
@@ -75,19 +92,23 @@
   margin-top: 0.1rem;
 }
 
-/* Flip tooltip below when near top of screen */
 @media (max-width: 480px) {
   .tooltip {
     width: 180px;
   }
 }
 
-/* On phones the icon was rendering at ~9px and the tooltip relied on
-   :hover, which doesn't fire on touch. Rather than build a tap-to-show
-   layer with backdrop dismissal, hide the helper entirely — the metric
-   labels themselves carry the meaning. */
+/* 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) {
-  .wrapper {
-    display: none;
+  .tooltip {
+    left: -12px;
+    right: auto;
+    transform: none;
+  }
+
+  .tooltip::after {
+    left: 16px;
+    transform: none;
   }
 }