feat(mobile): mobile cleanups for deadlines, result cards, tooltips, ofsted, rankings

MOB-07: Admissions deadlines strip becomes a horizontal snap-scroller
on ≤640px instead of a cramped 2×2 grid (which forced "Secondary ·
Deadline" track labels down to 9.6px). Cards stay readable, the right
edge fades to signal more content past the viewport, .chipTrack font
bumped to 0.7rem.

MOB-09: Result-card line3 (headline metric + secondary stats) was
crowding everything onto one row. Force the first .stat (Attainment
8 / RWM headline) to flex-basis 100% on mobile so delta-vs-LA and
pupil count wrap below it with a visible row-gap. Applied to both
SchoolRow (primary) and SecondarySchoolRow.

MOB-12: MetricTooltip ⓘ icons rendered at ~9px and relied on :hover
(which doesn't fire on touch). Hide the whole .wrapper at ≤640px —
metric labels themselves carry the meaning. Saves building a
tap-to-show layer for now.

MOB-13: The "Ofsted pending / No inspection on record" empty state
took a full hero card to communicate non-information. Add a
data-ofsted-state attribute on the hero chip; on ≤640px, the
"none" state collapses to a single muted line.

MOB-17: Already had Type+Action columns hidden on rankings mobile —
no change needed beyond marking complete.

MOB-18: Long metric headers ("Reading, Writing & Maths Combined %")
forced the value column wide. Drop .valueHeader to 0.625rem with
white-space: normal at ≤640px so labels wrap onto 2 short lines.

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

nextjs-app/components/HomeView.module.css

@@ -1361,3 +1361,35 @@
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
+/* On phones the 2×2 grid cramped each chip so badly the "Secondary ·
+   Deadline" track label dropped to 9.6px. Switch to a horizontal
+   snap-scroller — each card is full-width-ish and stays readable,
+   and the rightmost card peeks past the edge to signal there's more. */
+@media (max-width: 640px) {
+  .countdownRail {
+    display: flex;
+    grid-template-columns: none;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    gap: 0.75rem;
+    padding-right: 1.25rem;
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
+  }
+  .countdownRail::-webkit-scrollbar {
+    display: none;
+  }
+  .countdownChip {
+    flex: 0 0 auto;
+    width: 78%;
+    min-width: 220px;
+    scroll-snap-align: start;
+  }
+  .chipTrack {
+    font-size: 0.7rem;
+  }
+}