/* Area map page (map.html). Versioned in the link like guide.css: the zone
   keeps CSS for 4 h whatever _headers says, so bump ?v= when this changes. */
.map-main { padding-bottom: var(--sp-6); }
.map-head { max-width: var(--content-max); margin-left: auto; margin-right: auto; }
.map-head .h1 { margin-bottom: var(--sp-2); }
.map-lede { color: var(--text-muted); margin: 0 0 var(--sp-4); }

.map-wrap { position: relative; max-width: 1100px; margin: 0 auto; }
.map-chips { margin-bottom: var(--sp-3); }
.map-canvas {
  height: calc(100svh - 290px); min-height: 360px; max-height: 820px;
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}

.map-bar {
  position: absolute; left: 0; right: 0; bottom: var(--sp-4); z-index: 1000;
  display: flex; justify-content: center; pointer-events: none;
}
.map-bar { transition: opacity .15s; }
.map-wrap:has(.mysa-narrow.mysa-card-open) .map-bar { opacity: 0; pointer-events: none; }
.map-bar .btn {
  pointer-events: auto; border-radius: 999px; min-height: 46px; padding: 0 22px; font-weight: 700; font-size: 0.9375rem;
  box-shadow: 0 2px 6px rgba(20,20,15,.18), 0 10px 24px rgba(20,20,15,.18);
}

.map-panel {
  position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); z-index: 1201;
  max-height: 72%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20,20,15,.28); padding: var(--sp-4) var(--sp-5);
}
@media (min-width: 720px) {
  .map-panel { left: auto; width: 360px; top: var(--sp-3); bottom: auto; max-height: calc(100% - 2 * var(--sp-3)); }
}
.map-panel-title { font-weight: 600; margin: 0 0 var(--sp-3); }
.map-panel-text { color: var(--text-muted); margin: 0 0 var(--sp-4); }
.map-panel .field { margin-bottom: var(--sp-3); }
.map-panel-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.map-kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.map-kind-grid .btn { justify-content: flex-start; min-height: 48px; }
@media (max-width: 600px) {
  .map-head .h1 { font-size: 1.625rem; }
  .map-lede { font-size: 0.9375rem; margin-bottom: var(--sp-3); }
  .map-canvas { border-radius: 14px; }
}