Merge pull request 'fix(map): the popup never took the dark theme' (#136) from fix/dark-mode-map-popup-contrast into main

Reviewed-on: #136

nextjs-app/app/globals.css

@@ -588,6 +588,35 @@ html .leaflet-bar a:hover {
     color: var(--text-primary);
 }
 
+/*
+ * The popup, which leaflet.css paints `background: white; color: #333` on both
+ * the card and its tip. The content LeafletMapInner binds into it is themed —
+ * the school name and the headline figure are `var(--text-primary)` — so in
+ * dark mode that was #E9EEF0 on #FFFFFF, a contrast ratio of 1.17:1. The name
+ * and the number were the two least readable things on the page.
+ *
+ * Moving the surface onto --bg-card fixes every foreground at once rather than
+ * one at a time: the muted phase line goes 2.90:1 -> 5.45:1, the vs-national
+ * delta 1.94:1 -> 8.14:1, the Ofsted badge 1.74:1 -> 9.11:1. In light mode
+ * --bg-card is #FFFFFF, so the popup looks as it always did.
+ */
+html .leaflet-popup-content-wrapper,
+html .leaflet-popup-tip {
+    background: var(--bg-card);
+    color: var(--text-primary);
+}
+
+/* Leaflet's own selector is `.leaflet-container a.leaflet-popup-close-button`
+   at 0,2,1 — an `html` prefix alone would lose to it. */
+html .leaflet-container a.leaflet-popup-close-button {
+    color: var(--text-muted);
+}
+
+html .leaflet-container a.leaflet-popup-close-button:hover,
+html .leaflet-container a.leaflet-popup-close-button:focus {
+    color: var(--text-primary);
+}
+
 /* Main content column */
 .main {
     max-width: 1400px;