.map-main { width: min(1180px, calc(100% - 40px)); margin: 36px auto 0; }
.map-workspace { border: 1px solid var(--tools-line); border-radius: 20px; overflow: clip; background: var(--tools-surface); }
.map-toolbar { display: flex; align-items: flex-start; gap: 12px; padding: 12px; position: relative; z-index: 3; border-bottom: 1px solid var(--tools-line); }
.map-search-wrap { flex: 1; min-width: 0; position: relative; }
.map-search-field { display: flex; align-items: center; min-height: 46px; gap: 10px; padding-inline: 12px 4px; border: 1px solid var(--tools-line); border-radius: 10px; background: var(--tools-bg); }
.map-search-field > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--tools-muted); }
.map-search-field:focus-within { outline: 2px solid var(--tools-green); outline-offset: 2px; }
#map-search { width: 100%; min-width: 0; padding: 10px 0; border: 0; border-radius: 0; background: transparent; font: inherit; color: var(--tools-text); outline: none; }
#map-search::placeholder { color: var(--tools-muted); opacity: 1; }
#map-search::-webkit-search-cancel-button { display: none; }
.map-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; border: 0; background: var(--tools-surface); color: var(--tools-text); border-radius: 8px; cursor: pointer; }
.map-icon svg, .map-expand svg { width: 20px; height: 20px; flex: 0 0 auto; }
.map-icon:hover { background: var(--tools-surface-soft); }
.map-icon:disabled { opacity: .4; cursor: default; }
.map-search-field .map-icon { width: 36px; height: 36px; flex-basis: 36px; padding: 8px; background: transparent; }
.map-expand { min-height: 46px; white-space: nowrap; gap: 8px; }
.map-layer-menu { position: relative; flex: 0 0 auto; }
.map-layer-menu summary { min-height: 46px; gap: 8px; list-style: none; }
.map-layer-menu summary::-webkit-details-marker { display: none; }
.map-layer-menu summary svg { width: 20px; height: 20px; flex: 0 0 auto; }
.map-layer-menu[open] summary { background: var(--tools-green-soft); }
.map-layer-menu .map-layers { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; display: grid; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 8px 12px; border: 1px solid var(--tools-line); border-radius: 12px; background: var(--tools-surface); }
.map-layer-menu .map-layers label { min-height: 44px; }
#map-results { position: absolute; top: calc(100% + 6px); inset-inline: 0; max-height: min(420px, 50dvh); overflow: auto; list-style: none; margin: 0; padding: 6px; border: 1px solid var(--tools-line); border-radius: 12px; background: var(--tools-surface); z-index: 5; }
#map-results li { padding: 10px 12px; border-radius: 7px; cursor: pointer; }
#map-results li:hover, #map-results li[aria-selected="true"] { background: var(--tools-green-soft); }
#map-results strong, #map-results span { display: block; }
#map-results strong { font-weight: 650; }
#map-results span { font-size: 12px; color: var(--tools-muted); margin-top: 2px; }
.map-search-status { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; font-size: 13px; color: var(--tools-text); background: var(--tools-surface); border-radius: 8px; margin: 0; padding: 8px 12px; border: 1px solid var(--tools-line); }
.map-search-status:empty { display: none; }
.map-search-wrap:has(#map-results:not([hidden])) .map-search-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
.map-stage { position: relative; height: clamp(380px, 58vw, 610px); isolation: isolate; background: #f4f5ee; }
#atlas { width: 100%; height: 100%; display: block; touch-action: auto; cursor: grab; }
#atlas.is-panning { cursor: grabbing; }
#atlas:focus-visible { outline: 3px solid var(--tools-action); outline-offset: -4px; }
.map-navigation { position: absolute; top: 14px; right: 14px; display: grid; gap: 1px; padding: 3px; border: 1px solid var(--tools-line); border-radius: 12px; background: var(--tools-surface); }
.map-feedback { position: absolute; inset: 14px auto auto 14px; max-width: min(440px, calc(100% - 94px)); padding: 10px 14px; border: 1px solid var(--tools-line); border-radius: 10px; background: var(--tools-surface); }
.map-feedback p { margin: 0; font-size: 13px; }
.map-feedback button { margin-top: 10px; }
.map-place { position: absolute; inset: auto auto 48px 14px; max-width: min(400px, calc(100% - 28px)); display: flex; gap: 12px; align-items: center; padding: 8px 8px 8px 16px; border: 1px solid var(--tools-line); border-radius: 12px; background: var(--tools-surface); }
.map-place h2 { margin: 0; font: 650 17px/1.3 var(--tools-sans); overflow-wrap: anywhere; }
.map-place p { margin: 4px 0 0; color: var(--tools-muted); font-size: 12px; }
.map-scale { position: absolute; bottom: 10px; left: 14px; display: grid; justify-items: start; font-size: 11px; color: #263b3b; }
#map-scale-text { background: #e3f3f0; padding-inline: 3px; }
#map-scale-line { height: 5px; border: 1px solid currentColor; border-top: 0; }
.map-attribution { position: static; margin-inline-start: auto; color: var(--tools-muted); font-size: 11px; text-decoration: none; white-space: nowrap; }
.map-attribution:hover { text-decoration: underline; }
.map-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 12px; flex: 0 0 auto; min-height: 28px; }
.map-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding: 0; margin: 0; border: 0; }
.map-layers label { display: flex; align-items: center; gap: 7px; font-size: 13px; min-height: 36px; cursor: pointer; }
.map-layers input { width: 16px; height: 16px; margin: 0; accent-color: var(--tools-action); }
.map-help { font-size: 11px; color: var(--tools-muted); margin: 0; }
.map-note { max-width: 90ch; color: var(--tools-muted); font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
#world-map-app [hidden] { display: none !important; }
.map-expanded { overflow: hidden; }
.map-expanded .site-header { z-index: 51; }
.map-expanded .map-hero, .map-expanded .map-note, .map-expanded .family-footer { display: none; }
.map-expanded .map-main { margin: 0; }
.map-expanded .map-workspace { position: fixed; inset: var(--map-top, 110px) 12px 12px; z-index: 50; display: flex; flex-direction: column; }
.map-expanded .map-stage { flex: 1; height: auto; min-height: 0; }
.map-expanded .map-toolbar, .map-expanded .map-bottom { flex: 0 0 auto; }
@media (prefers-color-scheme: dark) {
  .map-stage { background: #152125; }
  .map-scale { color: #fffdf4; }
  #map-scale-text { background: #1f3c46; }
}
@media (max-width: 760px) {
  .map-main { width: calc(100% - 24px); margin-top: 26px; }
  .map-stage { height: clamp(300px, 85vw, 430px); }
  .map-toolbar { gap: 8px; padding: 10px; }
  .map-expand { width: 46px; min-width: 46px; padding: 10px; }
  .map-expand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .map-layers { column-gap: 15px; }
  .map-bottom { padding: 8px 12px 10px; }
  .map-workspace { border-radius: 16px; }
  .map-expanded .map-workspace { inset-inline: 6px; bottom: 6px; }
}
@media (max-width: 380px) {
  .map-layers { column-gap: 12px; }
  .map-layers label { font-size: 12px; }
}
@media (max-width: 1024px) {
  .map-main { width: 100%; margin: 12px auto 0; }

  /* Safari's collapsing toolbar must not resize/clear an embedded canvas. */
  .map-workspace { display: flex; flex-direction: column; height: clamp(340px, 65svh, 620px); border-radius: 12px; }
  .map-toolbar { padding: 8px; gap: 8px; flex: 0 0 auto; }
  .map-search-field { min-height: 44px; }
  .map-expand, .map-layer-menu summary { width: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
  .map-expand span, .map-layer-menu summary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .map-stage { flex: 1; min-height: 0; height: auto; }
  .map-navigation { top: 8px; right: 8px; }
  .map-place { left: 8px; bottom: 38px; padding: 6px 6px 6px 12px; max-width: min(360px, calc(100% - 16px)); gap: 6px; }
  .map-place h2 { font-size: 15px; }
  .map-place p { margin-top: 2px; font-size: 11px; line-height: 1.3; }
  .map-expanded .map-workspace { inset-inline: 0; top: var(--map-top, 84px); bottom: auto; height: max(220px, calc(var(--map-viewport-height, 100dvh) - var(--map-top, 84px))); }
}
@media (max-width: 1024px) and (max-height: 540px) {

  .map-main { margin-top: 6px; }
}
:root { color: var(--tools-text); background: var(--tools-bg); font-family: var(--tools-sans); font-synthesis: none; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--tools-green); outline-offset: 3px; }
.brand { color: inherit; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--tools-line); border-radius: 10px; font-weight: 650; cursor: pointer; }
.button-secondary { color: var(--tools-text); background: var(--tools-surface); }
.button-secondary:hover { background: var(--tools-green-soft); }

@media (min-width: 1025px) {
  .map-main { width: calc(100% - 32px); margin-top: 16px; }

  .map-workspace { display: flex; flex-direction: column; height: clamp(420px, 66svh, 660px); border-radius: 12px; }
  .map-toolbar { padding: 8px 10px; flex: 0 0 auto; }
  .map-stage { flex: 1; min-height: 0; height: auto; }
  .map-note { margin-inline: 4px; }
}
.map-expanded .site-header { display: none; }
.map-expanded .map-workspace { inset: 0; height: var(--map-viewport-height, 100dvh); border: 0; border-radius: 0; }
@media (max-width: 1024px) {
  .map-bottom { display: flex; min-height: 24px; padding: 3px 8px; }
  .map-expanded .map-workspace { inset: 0; height: var(--map-viewport-height, 100dvh); }
}


.map-main { width: 100%; margin: 0 auto; }
.map-hero { width: min(850px, calc(100% - 40px)); }
#world-map-app { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.guide.map-guide { width: min(1040px, calc(100% - 40px)); margin-inline: auto; }
.map-expanded .map-guide { display: none; }
.map-expanded #atlas { touch-action: none; }
.map-touch-help { display: none; }
.map-gesture-hint { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(400px, calc(100% - 32px)); width: max-content; margin: 0; padding: 12px 16px; border: 1px solid var(--tools-line); border-radius: 12px; color: var(--tools-text); background: var(--tools-surface); font-size: 14px; line-height: 1.5; text-align: center; pointer-events: none; }
@media (max-width: 1024px) { #world-map-app { width: calc(100% - 40px); } }
@media (max-width: 620px) {
  .map-hero, .guide.map-guide, #world-map-app { width: calc(100% - 28px); }
  .map-bottom { flex-wrap: wrap; gap: 2px 12px; }
}
@media (hover: none) and (pointer: coarse) {
  .map-desktop-help { display: none; }
  .map-touch-help { display: inline; }
}

.map-copy { flex: 0 0 auto; min-height: 46px; gap: 8px; white-space: nowrap; }
.map-copy svg { width: 20px; height: 20px; flex: 0 0 auto; }
.map-copy > span[data-copy-normal], .map-copy > span[data-copy-done] { display: inline-flex; }
.map-copy[aria-busy="true"] { opacity: .6; }
.map-export-status { position: absolute; z-index: 8; right: 8px; top: calc(100% + 8px); max-width: min(360px, calc(100% - 16px)); margin: 0; padding: 10px 14px; border: 1px solid var(--tools-line); border-radius: 10px; background: var(--tools-surface); color: var(--tools-text); font-size: 13px; }
@media (max-width: 1100px) {
  .map-copy { width: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
  .map-copy-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.map-export-status p { margin: 0; }
.map-export-status .button { min-height: 44px; gap: 8px; margin-top: 8px; }
.map-export-status svg { width: 20px; height: 20px; }