Map style improvements

Author: bkeepers

website/src/styles/global.css

@@ -60,6 +60,10 @@
   --hero-to: #ffffff;
   --shadow: rgba(226, 232, 240, 0.5);
 
+  /* Map overlay colors — satellite base is always dark, no dark-mode swap */
+  --neaps-map-text: #ffffff;
+  --neaps-map-bg: #000000;
+
   /* Status colors */
   --status-green-bg: #dcfce7;
   --status-green-text: #166534;

website/src/utils/useMapStyle.ts

@@ -40,20 +40,18 @@ function buildStyle(): Promise<StyleSpecification> {
     promise = fetch(VECTOR_SOURCE_URL)
       .then((r) => r.json())
       .then((style: StyleSpecification) => {
-        // Insert satellite imagery above fill/background layers but below
-        // labels and lines. The fills act as a loading placeholder so there
-        // is no white flash while satellite tiles load.
-        const firstSymbolIdx = style.layers.findIndex(
-          (l: LayerSpecification) => l.type === "symbol" || l.type === "line",
+        // Partition layers: fills/backgrounds below satellite as a loading
+        // placeholder (avoids white flash), everything else on top.
+        const fills = style.layers.filter(
+          (l: LayerSpecification) =>
+            l.type === "background" || l.type === "fill",
+        );
+        const rest = style.layers.filter(
+          (l: LayerSpecification) =>
+            l.type !== "background" && l.type !== "fill",
         );
-        const insertAt =
-          firstSymbolIdx === -1 ? style.layers.length : firstSymbolIdx;
 
-        const layers = [
-          ...style.layers.slice(0, insertAt),
-          SATELLITE_LAYER,
-          ...style.layers.slice(insertAt),
-        ];
+        const layers = [...fills, SATELLITE_LAYER, ...rest];
 
         const composite: StyleSpecification = {
           ...style,