/* St. Croix map, self-hosted imagery layer (2026-10-06). Loaded on /map/ only, after leaflet.css and app.css
   (which still styles the key panel, pins, previews and popups). This file styles what the site now draws
   itself instead of hotlinking Esri + CARTO: the sea under the tiles, the OpenStreetMap road overlay, and the
   town / route / sea labels in the site's own font. Brand colours only. */
#map,#map.leaflet-container{background:#1b2c47}   /* = the tiles' open-sea fill after toning (fetch_sat.py SEA + look) */
#map .leaflet-tile-pane{filter:saturate(1.04)}
/* tile seams: Leaflet's plus-lighter blend can draw a light hairline where scaled tiles meet on dark imagery */
#map img.leaflet-tile{mix-blend-mode:normal}

/* ---------- roads (SVG overlay, strokes hold one width at any zoom) ---------- */
.roads-ov{pointer-events:none}
.lr{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lr-case .lr{stroke:rgba(11,20,36,.55)}
.lr-case .lr-mot{stroke-width:5.2}.lr-case .lr-trk{stroke-width:4.2}.lr-case .lr-pri{stroke-width:3.2}.lr-case .lr-sec{stroke-width:2.4}.lr-case .lr-ter{stroke-width:1.8}
.lr-line .lr-mot{stroke:#fbfaf6;stroke-width:2.6}
.lr-line .lr-trk{stroke:#fbfaf6;stroke-width:2}
.lr-line .lr-pri{stroke:rgba(251,250,246,.88);stroke-width:1.5}
.lr-line .lr-sec{stroke:rgba(251,250,246,.66);stroke-width:1.1}
.lr-line .lr-ter{stroke:rgba(251,250,246,.46);stroke-width:.85}
#map[data-z="10"] .lr-ter,#map[data-z="11"] .lr-ter,#map[data-z="12"] .lr-ter,#map[data-z="10"] .lr-sec,#map[data-z="11"] .lr-sec,#map[data-z="12"] .lr-sec{display:none}
#map[data-z="10"] .lr-line .lr-pri,#map[data-z="10"] .lr-line .lr-trk,#map[data-z="11"] .lr-line .lr-pri,#map[data-z="11"] .lr-line .lr-trk{stroke-width:1.1}

/* ---------- labels (towns, route numbers, the sea) ---------- */
.mlab-town,.mlab-shield,.mlab-water{width:0!important;height:0!important;overflow:visible;pointer-events:none}
.mlab-town .td{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(11,20,36,.6)}
.mlab-town span:last-child{position:absolute;left:8px;top:-8px;white-space:nowrap;font:800 11px/1.2 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(11,20,36,.95),0 0 5px rgba(11,20,36,.85)}
.mlab-town--big .td{width:8px;height:8px;left:-4px;top:-4px}
.mlab-town--big span:last-child{font-size:12.5px;left:10px}
#map[data-z="10"] .mlab-town:not(.mlab-town--big),#map[data-z="11"] .mlab-town:not(.mlab-town--big),#map[data-z="12"] .mlab-town:not(.mlab-town--big){display:none}
.mlab-town.is-off{visibility:hidden}
.mlab-shield span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:800 9.5px/1 var(--font-b);letter-spacing:.04em;padding:4px 6px;border-radius:3px;
  background:#fff;color:var(--navy);border:1px solid rgba(11,20,36,.55)}
#map[data-z="10"] .mlab-shield,#map[data-z="11"] .mlab-shield,#map[data-z="12"] .mlab-shield{display:none}
.mlab-water span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font:800 11px/1 var(--font-b);letter-spacing:.34em;text-transform:uppercase;
  color:rgba(143,211,230,.92);text-shadow:0 1px 3px rgba(11,20,36,.9)}
#map[data-z="14"] .mlab-water,#map[data-z="15"] .mlab-water,#map[data-z="16"] .mlab-water,#map[data-z="17"] .mlab-water{display:none}