/* Let the brand and controls share a grid, rather than overlap at fixed offsets. */
.map-header { position:absolute; inset:24px 24px auto; z-index:5; display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); grid-template-areas:"brand tools" "brand views"; align-items:start; gap:12px 24px; pointer-events:none; }
.map-header>* { pointer-events:auto; }
.map-header .brand-plaque { grid-area:brand; position:static; inset:auto; max-width:100%; }
.map-header .map-toolbar { grid-area:tools; position:static; inset:auto; justify-self:end; }
.map-header .view-switch { grid-area:views; position:static; inset:auto; justify-self:end; }
.dialog-close,.plan-close,.photo-close,.village-close { display:grid; place-items:center; padding:0; min-width:48px; min-height:48px; line-height:1; }
.close-icon { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; pointer-events:none; }
@media(max-width:820px){
  .map-section { padding-top:0; }
  .map-header { position:relative; inset:auto; margin:14px 12px 16px 14px; grid-template-columns:minmax(0,1fr) max-content; grid-template-areas:"brand tools" "views tools"; gap:12px; }
  .map-header .brand-plaque { width:100%; }
  .map-header .view-switch { justify-self:start; max-width:100%; }
  .map-header .view-switch button { padding:8px 12px; min-height:44px; font-size:16px; }
  .map-viewport .map-zoom { top:auto; bottom:24px; right:12px; }
}