feat(school): state the header's facts in one line, and flag what applies

The row of grey chips under the name mixed the council, a GIAS governance
term, the age range and provision, with no labels. Parents could not tell
what "Wandsworth" or "Nursery" meant, and selective, faith and fees were
missing or buried in the details.

The header now prints one fact line (phase pill · ages · type · pupils),
then flags only for what applies, in a fixed order: who can apply or what
it costs (Fee-paying, Selective, Girls'/Boys' school, the religious
character as recorded), then what the school offers (Nursery class, Sixth
form). Flags carry no hue: they are facts, not verdicts. The council joins
the address unless the address already names it. The details keep
headteacher, website, phone, academy trust (hidden when it has the
school's own name) and capacity; county, constituency and religious
character leave the header. The proposed-to-close strip is unchanged.

lib/schoolFacts holds the type label and the flags so the search rows can
print the same words.

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

nextjs-app/components/school/SchoolDetailShell.module.css

@@ -145,20 +145,76 @@
 }
 
 
-.meta {
+/* Fact line: the phase pill, then plain register values joined by dots. */
+.facts {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    align-items: center;
+    row-gap: 0.25rem;
     margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
 }
 
 
-.metaItem {
-    font-size: 0.8125rem;
+.fact + .fact::before {
+    content: "·";
+    margin: 0 0.5rem;
+    color: var(--text-muted);
+}
+
+
+/* The search rows' phase pill, in the same phase colours. */
+.phasePill {
+    margin-right: 0.625rem;
+    padding: 0.0625rem 0.4rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+
+.phasePillPrimary    { background: var(--phase-primary-bg);     color: var(--phase-primary-text); }
+.phasePillSecondary  { background: var(--phase-secondary-bg);   color: var(--phase-secondary-text); }
+.phasePillAllThrough { background: var(--phase-all-through-bg); color: var(--phase-all-through-text); }
+.phasePillPost16     { background: var(--phase-post16-bg);      color: var(--phase-post16-text); }
+.phasePillNursery    { background: var(--phase-nursery-bg);     color: var(--phase-nursery-text); }
+
+
+/* Flags are facts, not verdicts, so they carry no hue. Outlined changes who
+   can apply or what it costs; filled is what the school offers. Text may
+   wrap: the longest religious character runs past a 360px line. */
+.flags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    margin: 0 0 0.625rem;
+    padding: 0;
+    list-style: none;
+}
+
+
+.flagCondition,
+.flagProvision {
+    padding: 0.0625rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.4;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+
+.flagCondition {
+    border-color: rgba(var(--ink-rgb), 0.4);
+    color: var(--text-primary);
+}
+
+
+.flagProvision {
+    background: rgba(var(--ink-rgb), 0.07);
     color: var(--text-secondary);
-    padding: 0.125rem 0.5rem;
-    background: var(--bg-secondary);
-    border-radius: 3px;
 }
 
 
@@ -703,17 +759,8 @@
         word-break: break-word;
     }
 
-    /* Pills wrap horizontally instead of stacking — short tokens like
-       "Manchester" / "Voluntary aided" fit 2 per row instead of 3 full
-       rows of empty horizontal space. */
-    .meta {
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 0.375rem;
-    }
-
-    /* Secondary header info (headteacher, website, pupil count, trust,
-       contact, area) isn't needed above the fold on phones/tablets, so it's
+    /* Secondary header info (headteacher, website, phone, trust, capacity)
+       isn't needed above the fold on phones/tablets, so it's
        collapsed by default and revealed on demand via the "Show all details"
        link — reclaiming the vertical space so the metrics surface sooner. */
     .detailsToggle {