style: refine acrylic workbench surfaces

features/workbench/map/scada.test.ts

@@ -9,6 +9,7 @@ import {
   scadaFallbackLayers,
   scadaLayers
 } from "./scada";
+import { waterNetworkLayers } from "./layers";
 
 describe("SCADA map presentation", () => {
   it("maps the three authoritative device types and falls back to unknown", () => {
@@ -26,20 +27,29 @@ describe("SCADA map presentation", () => {
     expect(scadaFallbackLayers.at(-1)?.id).toBe(SCADA_HIT_LAYER_ID);
   });
 
-  it("keeps the icon and selected ring consistent across zoom levels", () => {
+  it("keeps the icon and selected ring consistent with junction selection", () => {
     const symbolLayer = scadaLayers.find((layer) => layer.id === "scada-symbol");
     const outerLayer = scadaLayers.find((layer) => layer.id === "scada-selected-outer");
     const selectedLayer = scadaLayers.find((layer) => layer.id === "scada-selected");
+    const junctionOuterLayer = waterNetworkLayers.find((layer) => layer.id === "junctions-selected-outer");
+    const junctionSelectedLayer = waterNetworkLayers.find((layer) => layer.id === "junctions-selected");
+    const junctionOuterPaint = junctionOuterLayer?.paint as Record<string, unknown> | undefined;
+    const junctionSelectedPaint = junctionSelectedLayer?.paint as Record<string, unknown> | undefined;
 
     expect(symbolLayer).toMatchObject({ type: "symbol", layout: { "icon-size": 0.75 } });
     expect(outerLayer).toMatchObject({
       type: "circle",
       paint: {
         "circle-radius": 12.5,
-        "circle-stroke-width": 3
+        "circle-stroke-width": junctionOuterPaint?.["circle-stroke-width"]
+      }
+    });
+    expect(selectedLayer).toMatchObject({
+      type: "circle",
+      paint: {
+        "circle-stroke-width": junctionSelectedPaint?.["circle-stroke-width"]
       }
     });
-    expect(selectedLayer).toMatchObject({ type: "circle", paint: { "circle-stroke-width": 2 } });
   });
 
   it("uses MapLibre-compatible PNG assets", () => {