feat(ux): 8 UX improvements — simpler home, advanced filters, phase tabs, 4-line rows

1. Simpler home page: only search box on landing, no filter dropdowns
2. Advanced filters: hidden behind toggle on results page, auto-open if active
3. Per-school phase rendering: each row renders based on its own data
4. Taller 4-line rows with context line (type, age range, denomination, gender)
5. Result-scoped filters: dropdown values reflect current search results
6. Fix blank filter values: exclude empty strings and "Not applicable"
7. Rankings: Primary/Secondary phase tabs with phase-specific metrics
8. Compare: Primary/Secondary tabs with school counts and phase metrics

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

nextjs-app/components/SchoolRow.module.css

@@ -6,7 +6,7 @@
   border: 1px solid var(--border-color, #e5dfd5);
   border-left: 3px solid transparent;
   border-radius: 8px;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.25rem;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   animation: rowFadeIn 0.3s ease-out both;
 }
@@ -32,10 +32,10 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.2rem;
+  gap: 0.35rem;
 }
 
-/* Line 1: name + type */
+/* Line 1: name + ofsted */
 .line1 {
   display: flex;
   align-items: baseline;
@@ -59,15 +59,24 @@
   color: var(--accent-coral, #e07256);
 }
 
-.schoolType {
+/* Line 2: context tags */
+.line2 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
   font-size: 0.8rem;
   color: var(--text-muted, #8a847a);
-  white-space: nowrap;
-  flex-shrink: 0;
 }
 
-/* Line 2: stats */
-.line2 {
+.line2 span:not(:last-child)::after {
+  content: '·';
+  margin: 0 0.4rem;
+  color: var(--border-color, #e5dfd5);
+}
+
+/* Line 3: stats */
+.line3 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -107,17 +116,17 @@
 .trendDown  { color: var(--accent-coral, #e07256); }
 .trendStable { color: var(--text-muted, #8a847a); }
 
-/* Line 3: location */
-.line3 {
+/* Line 4: location */
+.line4 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0 0;
+  gap: 0;
   font-size: 0.8rem;
   color: var(--text-muted, #8a847a);
 }
 
-.line3 span:not(:last-child)::after {
+.line4 span:not(:last-child)::after {
   content: '·';
   margin: 0 0.4rem;
   color: var(--border-color, #e5dfd5);
@@ -162,6 +171,10 @@
   line-height: 1.4;
 }
 
+.ofstedDate {
+  font-weight: 400;
+}
+
 .ofsted1 { background: var(--accent-teal-bg); color: var(--accent-teal, #2d7d7d); }
 .ofsted2 { background: rgba(60, 140, 60, 0.12); color: #3c8c3c; }
 .ofsted3 { background: var(--accent-gold-bg); color: #b8920e; }
@@ -171,7 +184,7 @@
 @media (max-width: 640px) {
   .row {
     flex-wrap: wrap;
-    padding: 0.75rem;
+    padding: 0.875rem;
     gap: 0.625rem;
   }
 
@@ -183,7 +196,7 @@
     white-space: normal;
   }
 
-  .line2 {
+  .line3 {
     gap: 0 1rem;
   }