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/SecondarySchoolRow.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 + ofsted */
+/* 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.25rem 0;
   font-size: 0.8rem;
   color: var(--text-muted, #8a847a);
-  white-space: nowrap;
-  flex-shrink: 0;
 }
 
-/* Line 2: KS4 stats */
-.line2 {
+.line2 > span:not(.provisionTag):not(:last-child)::after {
+  content: '·';
+  margin: 0 0.4rem;
+  color: var(--border-color, #e5dfd5);
+}
+
+/* Line 3: KS4 stats */
+.line3 {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -109,17 +118,17 @@
 .deltaPositive { color: #3c8c3c; }
 .deltaNegative { color: var(--accent-coral, #e07256); }
 
-/* Line 3: location + tags */
-.line3 {
+/* Line 4: location + distance */
+.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);
@@ -144,6 +153,7 @@
   color: var(--text-secondary, #5c5650);
   border-radius: 3px;
   white-space: nowrap;
+  margin-left: 0.375rem;
 }
 
 .selectiveTag {
@@ -191,7 +201,7 @@
 @media (max-width: 640px) {
   .row {
     flex-wrap: wrap;
-    padding: 0.75rem;
+    padding: 0.875rem;
     gap: 0.625rem;
   }
 
@@ -203,7 +213,7 @@
     white-space: normal;
   }
 
-  .line2 {
+  .line3 {
     gap: 0 1rem;
   }