feat(ui): replace card grid with row-based results and plain-language metric labels

Replace the school card grid with a scannable row list that shows 3x more
results per screen. Each row shows: school name + R,W&M % with trend,
area/type meta, and reading/writing/maths progress scores with plain-English
band labels (e.g. "above average") instead of raw numbers.

Add lib/metrics.ts as a single source of truth for plain-language metric
explanations and the progressBand() helper. Map view toggle is unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

nextjs-app/components/HomeView.module.css

@@ -311,64 +311,24 @@
   line-height: 1.5;
 }
 
-.resultsHeader {
-  margin-bottom: 1rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 2px solid var(--border-color, #e5dfd5);
-}
-
-.resultsHeader h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--text-primary, #1a1612);
-  margin: 0;
+.schoolList {
   display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.resultsHeader h2::before {
-  content: '';
-  display: inline-block;
-  width: 3px;
-  height: 1.125em;
-  background: var(--accent-coral, #e07256);
-  border-radius: 2px;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1rem;
+  flex-direction: column;
+  gap: 0.5rem;
   margin-bottom: 1.25rem;
 }
 
-/* Staggered grid entry animation */
-.grid > * {
-  animation: gridItemFadeIn 0.4s ease-out both;
-}
-
-.grid > *:nth-child(1) { animation-delay: 0ms; }
-.grid > *:nth-child(2) { animation-delay: 50ms; }
-.grid > *:nth-child(3) { animation-delay: 100ms; }
-.grid > *:nth-child(4) { animation-delay: 150ms; }
-.grid > *:nth-child(5) { animation-delay: 200ms; }
-.grid > *:nth-child(6) { animation-delay: 250ms; }
-.grid > *:nth-child(7) { animation-delay: 300ms; }
-.grid > *:nth-child(8) { animation-delay: 350ms; }
-.grid > *:nth-child(9) { animation-delay: 400ms; }
-.grid > *:nth-child(n+10) { animation-delay: 450ms; }
-
-@keyframes gridItemFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+/* Staggered fade-in for rows */
+.schoolList > *:nth-child(1) { animation-delay: 0ms; }
+.schoolList > *:nth-child(2) { animation-delay: 30ms; }
+.schoolList > *:nth-child(3) { animation-delay: 60ms; }
+.schoolList > *:nth-child(4) { animation-delay: 90ms; }
+.schoolList > *:nth-child(5) { animation-delay: 120ms; }
+.schoolList > *:nth-child(6) { animation-delay: 150ms; }
+.schoolList > *:nth-child(7) { animation-delay: 180ms; }
+.schoolList > *:nth-child(8) { animation-delay: 210ms; }
+.schoolList > *:nth-child(9) { animation-delay: 240ms; }
+.schoolList > *:nth-child(n+10) { animation-delay: 270ms; }
 
 .emptyState {
   text-align: center;
@@ -394,11 +354,6 @@
 }
 
 @media (max-width: 768px) {
-  .grid {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-
   .locationBannerWrapper {
     flex-direction: column;
     align-items: stretch;