.map-page > .site-header,
.map-page > .site-footer { display: none; }

.map-picker { min-height: 100svh; background: var(--wash); }
.map-brandbar { max-width: 920px; margin-inline: auto; padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.map-brandbar .brand { gap: 9px; }
.map-brandbar .brand-name { font-size: 1.18rem; letter-spacing: -.03em; }
.map-task { max-width: 864px; margin-inline: auto; padding: 16px 28px 28px; }
.map-toolbar { position: relative; z-index: 1100; }
.map-picker-header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.map-picker-header h1 { max-width: none; font-size: 1.7rem; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.map-back,
.map-icon-button { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; color: var(--ink); background: transparent; text-decoration: none; }
.map-back:hover,
.map-icon-button:hover { background: var(--line); }
.map-search { position: relative; margin-bottom: 16px; }
#map-search-form { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 7px 0 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
#map-search-form:focus-within { border-color: var(--green); }
.map-search-icon { color: var(--muted); }
#map-search-query { min-width: 0; height: 56px; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: 1rem; caret-color: var(--green); }
#map-search-query:focus-visible { outline: none; }
#map-search-form:has(#map-search-query:focus-visible) { outline: 3px solid var(--green); outline-offset: 3px; }
.map-selection { margin: 6px 2px 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.map-search-results { position: absolute; inset: calc(100% + 6px) 0 auto; max-height: min(34dvh, 280px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 24px rgb(15 40 30 / 20%); scrollbar-color: var(--muted) var(--paper); }
.map-search-results p { margin: 0; padding: 12px; color: var(--muted); font-size: .9rem; }
.map-search-results p:empty { display: none; }
.map-search-results ul { margin: 0; padding: 0; list-style: none; }
.map-search-results li + li { border-top: 1px solid var(--line); }
.map-search-results button { display: block; width: 100%; min-height: 58px; padding: 13px 12px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.map-search-results button:hover,
.map-search-results button[aria-selected="true"] { background: var(--wash); }
.map-search-results button:focus-visible { outline-offset: -3px; }
.map-area { position: relative; isolation: isolate; }
.map-canvas { height: clamp(360px, 52svh, 480px); width: 100%; border-radius: 16px; background: var(--line); }
.map-page .leaflet-control-zoom { margin: 14px 14px 0 0; overflow: hidden; border: 0; border-radius: 12px; box-shadow: 0 3px 12px rgb(15 40 30 / 16%); }
.map-page .leaflet-control-zoom a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); background: var(--paper); border-color: var(--line); font: 400 1.4rem/1 "Hanken Grotesk", sans-serif; }
.map-page .leaflet-control-zoom a:hover { color: var(--ink); background: var(--wash); }
.map-page .leaflet-control-zoom .leaflet-disabled { color: var(--muted); background: var(--paper); }
.map-page .leaflet-control-zoom a:focus-visible { outline-offset: -4px; }
.map-page .leaflet-control-attribution { padding: 2px 6px; color: #33504b; background: rgb(255 255 255 / 94%); font: 12px/1.5 "Hanken Grotesk", sans-serif; }
.map-page .leaflet-control-attribution a { color: #225347; }
#map-recenter { position: absolute; right: 14px; bottom: 36px; z-index: 800; border-radius: 12px; color: var(--ink); background: var(--paper); box-shadow: 0 3px 12px rgb(15 40 30 / 16%); }
#map-recenter:hover { background: var(--wash); }
.map-pin { filter: drop-shadow(0 3px 2px rgb(15 40 30 / 25%)); }
.map-pin::before { content: ""; position: absolute; width: 32px; height: 32px; left: 1px; top: 0; border: 2px solid #fff; border-radius: 50% 50% 50% 0; background: #17604f; transform: rotate(-45deg); }
.map-pin::after { content: ""; position: absolute; width: 9px; height: 9px; left: 13px; top: 12px; border-radius: 50%; background: #fff; }
.map-error { position: absolute; z-index: 900; top: 12px; left: 12px; right: 72px; max-width: 520px; margin: 0; padding: 12px 16px; color: var(--ink); background: var(--warning-wash); border-radius: 12px; box-shadow: 0 3px 12px rgb(15 40 30 / 16%); font-size: .9rem; }
.map-confirm-bar { display: flex; justify-content: flex-end; margin-top: 18px; }
.map-confirm-bar button { min-width: 240px; min-height: 52px; gap: 14px; padding: 12px 24px; border-radius: 12px; font-size: 1rem; }
#map-confirm-button:disabled { opacity: 1; color: var(--muted); background: var(--line); border-color: var(--line); }

@media (max-width: 600px) {
  .map-brandbar { padding: 12px 18px; }
  .map-brandbar .theme-toggle { font-size: .72rem; }
  .map-task { padding: 12px 16px max(20px, env(safe-area-inset-bottom)); }
  .map-picker-header { gap: 8px; margin-bottom: 15px; }
  .map-picker-header h1 { font-size: 1.5rem; }
  .map-canvas { height: clamp(300px, 48svh, 400px); border-radius: 14px; }
  .map-confirm-bar { margin-top: 16px; }
  .map-confirm-bar form,
  .map-confirm-bar button { width: 100%; min-width: 0; }
}

@media (max-width: 360px) {
  .map-brandbar { gap: 8px; padding-inline: 16px; }
  .map-brandbar .brand { gap: 8px; }
  .map-brandbar .brand-name { font-size: 1rem; }
}