fix(compare): mobile measure-first cards to match the mockup

The grid sections (At a glance, Ofsted, Getting a place, Who goes there)
collapsed generically on mobile — grey label pills, full names wrapping
to 3 lines, no dots — making the page ~2x the mockup's height and
'significantly different' from the mobile design.

Each measure is now wrapped in a <Measure> that is display:contents on
desktop (so the label + cells still flow into the shared aligned grid,
unchanged) and a white card on mobile with compact [dot][short name]
[value] rows — matching the mobile mockup. The sticky school bar becomes
scrollable short-name pills on mobile too. Adds a shortName() util.

Desktop layout is unchanged (display:contents dissolves the wrapper).
Validated the card mechanism and real content shapes (report-card cell,
badges, %+chip rows) via static previews at both widths.

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

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

@@ -31,43 +31,71 @@
   margin-top: 1.25rem;
 }
 
+/* Mobile base: each measure is a card; each cell is a school row led by a
+   colour dot + short name. `display: contents` at ≥761px dissolves the card
+   back into the shared grid. */
+.measure {
+  background: var(--bg-card);
+  border: 1px solid var(--border-light);
+  border-radius: 12px;
+  box-shadow: var(--shadow-soft);
+  padding: 0.75rem 0.85rem;
+  margin-bottom: 0.6rem;
+}
+
 .rowLabel {
   font-size: 0.85rem;
   font-weight: 600;
-  color: var(--text-secondary);
+  color: var(--text-primary);
   display: flex;
   align-items: center;
   gap: 0.35rem;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  padding: 0.4rem 0.6rem;
-  margin-top: 0.8rem;
+  padding: 0 0 0.1rem;
 }
 
 .cell {
-  padding: 0.4rem 0.6rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  padding: 0.45rem 0;
+  border-top: 1px solid var(--border-light);
+  margin-top: 0.45rem;
   font-size: 0.95rem;
 }
 
-.cell::before {
-  content: attr(data-school);
-  display: block;
-  font-size: 0.72rem;
+.cellTag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5rem;
+  flex: none;
+  font-size: 0.8rem;
   font-weight: 600;
-  color: var(--sc, var(--text-muted));
+  color: var(--sc, var(--text-secondary));
+}
+
+.cellDot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--dot, var(--text-muted));
+  flex: none;
 }
 
 .big {
-  font-size: 1.35rem;
+  font-size: 1.05rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
 
 .small {
   display: block;
+  flex-basis: 100%;
+  padding-left: 5.5rem;
   font-size: 0.8rem;
   color: var(--text-muted);
-  margin-top: 0.1rem;
+  margin-top: -0.05rem;
 }
 
 .chip {
@@ -197,20 +225,37 @@
     gap: 0 0.75rem;
   }
 
+  /* Dissolve the per-measure card so its label + cells become grid items of
+     .grid, keeping columns aligned across every measure. */
+  .measure {
+    display: contents;
+  }
+
+  .cellTag {
+    display: none;
+  }
+
   .rowLabel {
-    background: none;
-    border-radius: 0;
-    margin-top: 0;
+    color: var(--text-secondary);
     padding: 0.85rem 0.5rem 0.85rem 0;
     border-bottom: 1px solid var(--border-light);
   }
 
   .cell {
+    display: block;
     padding: 0.85rem 0.25rem;
+    border-top: none;
     border-bottom: 1px solid var(--border-light);
+    margin-top: 0;
   }
 
-  .cell::before {
-    content: none;
+  .big {
+    font-size: 1.35rem;
+  }
+
+  .small {
+    flex-basis: auto;
+    padding-left: 0;
+    margin-top: 0.1rem;
   }
 }