/* The service-area map. Drawn as SVG in the browser (see js/area-map.js) —
   no tile server, so nothing here can 403, rate-limit, or start charging.

   SIZES ARE IN SCREEN PIXELS. The SVG's own units are miles, so a stroke or
   a font set in user units would shrink and swell with the zoom level. The
   script publishes --u (one screen pixel, expressed in map units) on the
   <svg>, and everything visual is written as calc(var(--u) * <px>). Inside
   an SVG, 1 CSS px is 1 user unit, so this reads as real pixels. */
.map-page { margin: 0; background: var(--color-surface); }
#map { height: 100vh; width: 100%; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
#map .canvas { min-height: 0; position: relative; }
#map .plot { width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
/* Michael's Google My Maps embed, when site-config.json names one. It brings
   its own pan and zoom, so none of the controls or cursors below apply. */
#map .gmap { width: 100%; height: 100%; border: 0; display: block; }
#map .plot.dragging { cursor: grabbing; }
#map svg { width: 100%; height: 100%; display: block; user-select: none; }

/* Zoom controls. Small, quiet, and out of the way of the towns, which are
   all north-east of the bottom-left corner where the scale bar already
   lives. Real buttons, so they tab and read as buttons. */
#map .controls { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
#map .controls button {
  font: 600 16px/1 var(--font-body); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-divider);
  width: 30px; height: 30px; padding: 0; cursor: pointer; box-shadow: var(--shadow-sm);
}
#map .controls button[data-zoom="reset"] { width: auto; height: auto; padding: 5px 8px; font-size: 12px; font-weight: 400; }
#map .controls button:hover:not(:disabled) { background: var(--color-surface); }
#map .controls button:disabled { opacity: 0.4; cursor: default; }
#map .controls button:focus-visible { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
#map .fallback { max-width: 34ch; margin: auto; text-align: center; color: var(--color-neutral-800); font-size: 16px; padding: 8px; }

/* Rings */
.ring-free { fill: url(#freeFill); stroke: var(--color-accent-700); stroke-width: calc(var(--u) * 2); }
.ring-edge {
  fill: color-mix(in srgb, var(--color-accent) 5%, transparent);
  stroke: var(--color-accent-600); stroke-width: calc(var(--u) * 1.5);
  stroke-dasharray: calc(var(--u) * 7) calc(var(--u) * 6);
}

/* Landmarks */
.range { fill: color-mix(in srgb, #6b6455 12%, transparent); stroke: none; }
.range-label { fill: color-mix(in srgb, #5c5648 78%, transparent); font-size: calc(var(--u) * var(--f) * 0.92); font-style: italic; text-anchor: middle; font-family: var(--font-body); }
.lake { fill: color-mix(in srgb, #5f88a6 34%, transparent); stroke: color-mix(in srgb, #4a7089 60%, transparent); stroke-width: calc(var(--u) * 1); }
.lake-label { fill: #3f6178; font-size: calc(var(--u) * var(--f) * 0.92); font-style: italic; text-anchor: middle; font-family: var(--font-body); }
.road { fill: none; stroke: var(--color-neutral-500); stroke-width: calc(var(--u) * 3); stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
.road-label { fill: var(--color-neutral-600); font-size: calc(var(--u) * var(--f) * 0.85); text-anchor: middle; font-family: var(--font-body); }

/* Towns */
.town circle { fill: var(--color-neutral-700); }
.town text { fill: var(--color-neutral-800); font-size: calc(var(--u) * var(--f)); font-family: var(--font-body); }
.town.dim circle { fill: var(--color-neutral-400); }
.town.dim text { fill: var(--color-neutral-600); }

/* Orem */
.home circle { fill: var(--color-text); stroke: var(--color-bg); stroke-width: calc(var(--u) * 2); }
.home text { fill: var(--color-text); font-size: calc(var(--u) * var(--f) * 1.3); font-weight: 600; text-anchor: middle; font-family: var(--font-heading); }

/* Scale bar */
.scale line { stroke: var(--color-neutral-600); stroke-width: calc(var(--u) * 1.5); }
.scale text { fill: var(--color-neutral-600); font-size: calc(var(--u) * var(--f) * 0.85); text-anchor: middle; font-family: var(--font-body); }

/* Legend. A band under the map, never an overlay: the frame on the contact
   page is about 500px wide, and a floating card there sat squarely on top of
   American Fork, Pleasant Grove and Heber City. Out of the way, the map gets
   its whole frame and the key still reads at a glance. */
.legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  background: var(--color-bg); border-top: 1px solid var(--color-divider);
  padding: 9px 12px; font-size: 13px; color: var(--color-text); font-family: var(--font-body);
}
.legend h4 { display: none; }
.legend .row { display: flex; gap: 7px; align-items: center; }
.legend .swatch { width: 20px; height: 11px; flex: none; border: 2px solid var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.legend .swatch.pin { width: 11px; height: 11px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border-width: 3px; background: transparent; }
.legend .swatch.ext { border-style: dashed; border-color: var(--color-accent-600); background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.legend .muted { color: var(--color-neutral-700); font-size: 12.5px; line-height: 1.4; flex: 1 1 100%; }

/* Small frames drop the tail line; there is no room for it and the same
   words are already on the page around the map. */
@media (max-width: 560px), (max-height: 420px) {
  .legend { font-size: 12.5px; gap: 5px 12px; padding: 8px 10px; }
  .legend .muted { display: none; }
}