/* msr-map v1 — town page map. Replaces the OpenStreetMap export/embed iframe.
   Why: that iframe builds its canvas at a hard-coded 400x300 whenever it has no
   layout box at init (it is loading="lazy", so usually), and it floors fit zoom to
   an integer, which framed most towns 2-3x too wide. Both are impossible here:
   we own the map instance, we call resize() ourselves on mount, and we fit the
   original bbox against the real container instead of baking in a zoom. */

.msr-map{
  position:relative;
  width:100%;
  aspect-ratio:874/380;
  min-height:300px;
  background:#0d1013;
  border-radius:inherit;
  overflow:hidden;
  contain:layout paint;
}
/* Specificity is deliberate and load-order-proof. MapLibre's own stylesheet is
   injected at mount time, i.e. AFTER this file, and carries
   `.maplibregl-map{position:relative}` at the same 0,1,0 specificity as a bare
   `.msr-map__canvas` rule. It therefore won, the container collapsed to 0 height,
   and MapLibre kept its hard-coded 300px fallback canvas inside a 380px box.
   The descendant selector below is 0,2,0 and wins regardless of order.
   Do not flatten it back to a single class. */
.msr-map > .msr-map__canvas,
.msr-map > .msr-map__canvas.maplibregl-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* layer switch */
.msr-map__seg{
  position:absolute;top:10px;right:10px;z-index:3;display:flex;
  background:rgba(20,26,29,.9);border:1px solid #2a343a;border-radius:7px;
  overflow:hidden;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.msr-map__seg button{
  appearance:none;background:transparent;border:0;border-right:1px solid #2a343a;
  color:#8e9894;font:inherit;font-size:.76rem;line-height:1;
  /* 44px is the tap-target floor. This control is the only thing on the map a
     visitor is invited to touch, and it was 25.5px tall. Height is set here on
     the BASE rule, not in a media query, so it holds at every width. */
  min-height:44px;padding:0 13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;white-space:nowrap;
}
.msr-map__seg button:last-child{border-right:0}
.msr-map__seg button:hover{color:#e8eae7;background:rgba(255,255,255,.05)}
.msr-map__seg button[aria-pressed="true"]{color:#0d1013;background:#c9a24a;font-weight:600}
/* The 3D control is a MODE TOGGLE sitting in the same bar as three mutually
   exclusive basemaps. Styled identically it lit gold at the same time as Aerial,
   so two of four buttons were gold and the group read as broken. Give it its own
   divider and a quieter pressed state so the bar reads as "pick one of three,
   plus a switch". */
.msr-map__seg button.msr-map__3d{border-left:2px solid #3c474d}
.msr-map__seg button.msr-map__3d[aria-pressed="true"]{
  color:#e0bd6d;background:rgba(201,162,74,.16);font-weight:700}
.msr-map__seg button:focus-visible{outline:2px solid #e0bd6d;outline-offset:-2px}

/* place label */
.msr-map__name{
  position:absolute;left:12px;top:11px;z-index:3;
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:#e8eae7;background:rgba(8,11,13,.72);
  padding:5px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  pointer-events:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.msr-map__pin{
  width:17px;height:17px;border-radius:50%;background:#c9a24a;
  border:2.5px solid #fff;
  box-shadow:0 0 0 6px rgba(201,162,74,.25),0 2px 8px rgba(0,0,0,.6);
}

/* MapLibre chrome, tuned to the site's dark palette.
   `color` here is REQUIRED, not cosmetic. MapLibre sets
   `.maplibregl-ctrl-attrib.maplibregl-compact{color:#000}`. Overriding only the
   background left every NON-LINK fragment of the attribution as black on
   near-black at roughly 1.1:1 contrast, which visually deletes the words
   "contributors", "Imagery: USDA NAIP /", "Elevation:" and
   "3DEP/SRTM courtesy U.S. Geological Survey". ODbL requires that text to be
   legible. Same failure class as the position:relative collision above:
   our rule won the property it named and lost the one it forgot. */
.msr-map .maplibregl-ctrl-attrib,
.msr-map .maplibregl-ctrl-attrib.maplibregl-compact{
  background:rgba(8,11,13,.82)!important;
  color:#b9c0bc!important;
  font-size:10px!important;
}
.msr-map .maplibregl-ctrl-attrib a{color:#d8b978!important;text-decoration:underline}
.msr-map .maplibregl-ctrl-attrib-button{background-color:rgba(8,11,13,.82)!important}

.msr-map .maplibregl-ctrl-group{background:rgba(20,26,29,.92)!important;border:1px solid #2a343a!important;box-shadow:none!important}
.msr-map .maplibregl-ctrl-group button+button{border-top:1px solid #2a343a!important}
/* forced-colors mode swaps MapLibre's icons to white; inverting them there makes
   them near-black on a dark ground. Only invert when forced-colors is off. */
@media not (forced-colors: active){
  .msr-map .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(.86)}
}
.msr-map .maplibregl-ctrl-scale{
  background:rgba(8,11,13,.72)!important;
  color:#b9c0bc!important;
  border-color:#5c665f!important;
}
.msr-map .maplibregl-canvas{outline:none}

/* Fallback. Emitted server-side inside the div, so it is what a no-JS visitor
   sees, and removed by the module once the map mounts. Never a blank box. */
.msr-map__fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;
  align-items:center;justify-content:center;text-align:center;padding:20px;
  background:linear-gradient(160deg,#141a1d,#0d1013);color:#9aa3a0;font-size:.82rem;
}
.msr-map__fallback a{color:#d8b978;text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .msr-map,.msr-map *{transition:none!important}
}

/* ============================================================================
   PHONE. THIS BLOCK MUST STAY LAST.
   It previously sat at the top of this file, above the .msr-map__seg base rules.
   Both are 0,1,0 specificity, so the LATER one won and half of this tuning was
   silently dead: measured top:10px/right:10px and padding 7px 11px instead of the
   intended values. Only the properties the base rule never names (left,
   justify-content, flex, text-align) were surviving.
   This is the same cascade-order failure as the MapLibre position:relative
   collision documented above. Do not move this block up the file.
   ========================================================================= */
@media (max-width:620px){
  .msr-map{aspect-ratio:4/3;min-height:260px}

  /* The place badge and the layer switch collide at this width and the badge
     also covers the marker. Every town page carries an h2 naming the place
     directly above the map, so the badge is redundant here. */
  .msr-map__name{display:none}

  .msr-map__seg{top:8px;right:8px;left:8px;justify-content:center}
  .msr-map__seg button{flex:1 1 auto;padding:0 6px;font-size:.74rem}

  /* The attribution is collapsed to its (i) button by collapseAttrib() in
     msr-map.v1.js, NOT here. MapLibre adds `maplibregl-compact-show` on init, so
     a CSS :not() rule never matches. Nothing to do in CSS. */
}