diff --git a/plugin-designs/cities-internet/connectivity-map.vue b/plugin-designs/cities-internet/connectivity-map.vue
index 3d5e0d680..d11333c0b 100644
--- a/plugin-designs/cities-internet/connectivity-map.vue
+++ b/plugin-designs/cities-internet/connectivity-map.vue
@@ -649,12 +649,19 @@ useShadowStyles(
   '.map-scroll-edge--left{left:0}' +
   '.map-scroll-edge--right{right:0}' +
   '.gm-legend{position:absolute;top:8px;inset-inline-start:8px;width:var(--map-legend-width,380px);' +
-  'max-width:calc(100% - 16px);box-sizing:border-box;z-index:4;padding:8px 10px;' +
+  'max-width:calc(100% - 16px);box-sizing:border-box;z-index:21;padding:8px 10px;' +
   'border-radius:10px;background:rgba(255,255,255,.94);color:#0f1419;' +
   "font:12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.16)}" +
   // Narrow screens: the rail is still on the right, so the legend must stop short
   // of it rather than run under it. 46px = 32px button + 3px inset + clearance.
   '@media(max-width:480px){.gm-legend{width:auto;inset-inline-end:46px}}' +
+  // THE LEGEND OVERLAPS ITS MAP CONTROLS (the legend's z-index 21 above). It shares one stacking context with the
+  // gallery's ⓘ pointer (z 20; the gallery pane and this map's host form none of their own), and at 4 that pointer
+  // was drawn over the open legend's title; the map's own toolbar is z 10. It never meets the gallery's round ☰
+  // (z 15): the legend hangs from the top and stops at 70% on a phone, and the button sits at the bottom. While a
+  // country or state SHEET is open the legend drops back under it (z 4 < the sheet's 6), so the sheet stays on top
+  // and the round ☰ stays above the sheet; the gallery's drawer and the ⓘ dialog stay above all of it.
+  '.gm.has-sheet .gm-legend{z-index:4}' +
   '.is-dark .gm-legend{background:rgba(19,32,25,.95);color:#e5e7eb}' +
   '.gm-title{font-weight:700;font-size:12.5px;margin-bottom:5px}' +
   // The phone fold button: Gospel Resources' .gm-fold, with its 44px touch target on a phone.
@@ -710,7 +717,7 @@ useShadowStyles(
 </script>
 
 <template>
-  <div class="gm" :class="{ 'is-dark': isDark }" :style="narrow && toolbarTop ? { '--gm-toolbar-top': toolbarTop + 'px' } : null">
+  <div class="gm" :class="{ 'is-dark': isDark, 'has-sheet': !!(selected || selectedAdm1) }" :style="narrow && toolbarTop ? { '--gm-toolbar-top': toolbarTop + 'px' } : null">
     <div ref="mapEl" class="gm-map"></div>
     <!-- The edge scroll strips: direct siblings of the map inside .gm, the wrapper handed to
          useEdgeScrollAffordance (a strip under any other ancestor renders but stays inert). -->
diff --git a/plugin-designs/gospel-resources/resources-map.vue b/plugin-designs/gospel-resources/resources-map.vue
index fabe6f5ef..c73f5de38 100644
--- a/plugin-designs/gospel-resources/resources-map.vue
+++ b/plugin-designs/gospel-resources/resources-map.vue
@@ -2105,12 +2105,19 @@ useShadowStyles(
   '.map-scroll-edge--right{right:0}' +
   '.gm-legend{position:absolute;top:8px;inset-inline-start:8px;width:var(--map-legend-width,380px);' +
   'max-height:calc(100% - 16px);overflow-y:auto;overscroll-behavior:contain;' +
-  'max-width:calc(100% - 16px);box-sizing:border-box;z-index:4;padding:8px 10px;' +
+  'max-width:calc(100% - 16px);box-sizing:border-box;z-index:21;padding:8px 10px;' +
   'border-radius:10px;background:rgba(255,255,255,.94);color:#0f1419;' +
   "font:12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.16)}" +
   // Narrow screens: the rail is still on the right, so the legend must stop short
   // of it rather than run under it. 46px = 32px button + 3px inset + clearance.
   '@media(max-width:480px){.gm-legend{width:auto;inset-inline-end:46px}}' +
+  // THE LEGEND OVERLAPS ITS MAP CONTROLS (the legend's z-index 21 above). It shares one stacking context with the
+  // gallery's ⓘ pointer (z 20; the gallery pane and this map's host form none of their own), and at 4 that pointer
+  // was drawn over the open legend's title; the map's own toolbar is z 10. It never meets the gallery's round ☰
+  // (z 15): the legend hangs from the top and stops at 70% on a phone, and the button sits at the bottom. While a
+  // country or state SHEET is open the legend drops back under it (z 4 < the sheet's 6), so the sheet stays on top
+  // and the round ☰ stays above the sheet; the gallery's drawer and the ⓘ dialog stay above all of it.
+  '.gm.has-sheet .gm-legend{z-index:4}' +
   // The caret's box matches .stl-collapse-btn exactly (22x20, 5px radius, 1px border) so the
   // two legends read as the same control. The colours are this map's, because the palette is
   // the map's and the geometry is the fleet's.