feat(detail): show pupil gender split on school detail pages

Upgrades the existing "Pupils" stat to include a compact split bar and
percentage hint for mixed schools (single-sex schools already carry a
"Boys's/Girls's school" badge, so the split would be redundant).

Wires fact_pupil_characteristics into the API: new SQLAlchemy model and
a real census block in /api/schools/{urn} replacing the prior null stub.

On the primary detail page the inline "Pupils: 241" text is replaced by
a richer block (display number + bar + "52% girls · 48% boys"). On the
secondary detail page the existing "Total pupils" hero stat card grows
the bar and hint beneath the number. Both fall back to the previous
text-only rendering when census gender data is missing.

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

nextjs-app/components/SchoolDetailView.module.css

@@ -83,6 +83,95 @@
     text-decoration: underline;
 }
 
+/* Pupils block — the "Pupils: N" inline text is upgraded to a richer
+   display whenever we have census gender data and the school is Mixed. */
+.pupilsBlock {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+    padding: 0.3rem 0.65rem 0.3rem 0.4rem;
+    background: rgba(243, 237, 228, 0.5);
+    border-radius: 10px;
+}
+
+.pupilsFigure {
+    font-family: var(--font-playfair), 'Playfair Display', serif;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: -0.01em;
+    color: var(--text-primary, #1a1612);
+}
+
+.pupilsInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    min-width: 140px;
+}
+
+.pupilsLegend {
+    font-size: 0.72rem;
+    color: var(--text-muted, #6d685f);
+    font-weight: 500;
+    line-height: 1;
+}
+
+.pupilsCapacity {
+    color: var(--text-muted, #6d685f);
+}
+
+.pupilsSplitRow {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.pupilsSplitGirls {
+    color: #b45778;
+}
+
+.pupilsSplitBoys {
+    color: var(--accent-teal, #2d7d7d);
+}
+
+.pupilsSplitSep {
+    color: var(--border-color, #e5dfd5);
+    font-weight: 400;
+}
+
+.pupilsBar {
+    display: flex;
+    height: 4px;
+    border-radius: 999px;
+    overflow: hidden;
+    background: var(--border-color, #e5dfd5);
+    width: 100%;
+    min-width: 140px;
+}
+
+.pupilsBarGirls {
+    background: #b45778;
+}
+
+.pupilsBarBoys {
+    background: var(--accent-teal, #2d7d7d);
+}
+
+@media (max-width: 640px) {
+    .pupilsBlock {
+        display: flex;
+        width: 100%;
+    }
+    .pupilsInfo {
+        flex: 1;
+        min-width: 0;
+    }
+}
+
 .actions {
     display: flex;
     gap: 0.5rem;