html, body { height: 100%; margin: 0; }
body:has(> .travel-map-page) { display: flex; flex-direction: column; overflow: hidden; }
body:has(> .travel-map-page) > nav { flex: 0 0 auto; z-index: 1100; }
.travel-map-page { position: relative; flex: 1 1 auto; min-height: 0; isolation: isolate; background: #e9eee9; }
.travel-map-embedded { height: 100%; }
#travel-map { position: absolute; inset: 0; background: #e4ebe8; }
#travel-map .leaflet-tile-pane { filter: saturate(.35) brightness(1.04); }
.map-panel { background: rgba(255,255,255,.96); border: 1px solid rgba(34,58,53,.12); box-shadow: 0 4px 22px #233c3420; border-radius: 16px; }
.map-heading { position: absolute; top: 22px; left: 22px; z-index: 800; width: 285px; padding: 19px 21px 16px; }
.map-eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: #668078; margin-bottom: 6px; }
.map-heading h1 { color: #163e32; font-size: 27px; font-weight: 650; letter-spacing: -.04em; margin: 0; }
.map-title-row { position: relative; }
.map-heading-toggle { display: none; }
.map-heading p { font-size: 13px; color: #66756f; margin: 6px 0 15px; }
.map-actions { display: flex; gap: 9px; }
.map-actions select, .map-actions button { min-height: 40px; padding: 7px 11px; border: 1px solid #d8e2db; border-radius: 9px; background: #fff; color: #204b3d; font-size: 13px; }
.map-actions select { flex: 1; min-width: 0; }
.map-actions button:hover { background: #eef6f0; }
.map-actions :focus-visible, .map-filters input:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.map-bottom { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 800; white-space: nowrap; }
.map-filters { display: flex; gap: 5px; padding: 7px; margin: 0; }
.map-filters label { display: flex; align-items: center; gap: 7px; cursor: pointer; border-radius: 9px; padding: 9px 11px; min-height: 44px; font-size: 13px; font-weight: 500; color: #30433d; }
.map-filters label:hover { background: #f0f5f1; }
.map-filters label:focus-within { outline: 2px solid #2563eb; outline-offset: -2px; }
.map-filters label:has(input:not(:checked)) { opacity: .45; }
.map-filters input { appearance: none; width: 0; height: 0; margin: 0; }
.route-key { display: inline-block; width: 19px; border-top: 3px solid; border-radius: 3px; }
.route-key.flight { border-color: #3978bd; }
.route-key.train { border-color: #288471; }
.route-key.road { border-color: #bc8549; }
.route-key.ferry { border-color: #8660ad; }
.map-hint { text-align: center; font-size: 11px; color: #465c54; background: #ffffffd9; border-radius: 20px; padding: 4px 10px; margin: 7px auto 0; width: fit-content; }
.map-empty { position: absolute; z-index: 800; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 20px; text-align: center; }
#travel-map .leaflet-control-zoom { border: 1px solid #d8e2db; box-shadow: 0 3px 12px #233c341a; border-radius: 10px; overflow: hidden; margin: 22px; }
#travel-map .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; color: #204b3d; }
#travel-map .leaflet-popup-content-wrapper { border-radius: 13px; }
.map-place-title { font-size: 16px; font-weight: 650; color: #204b3d; margin-bottom: 8px; }
.map-dot-target:focus-visible { outline: 3px solid #2563eb; border-radius: 50%; background: #ffffff99; }
.map-place-list { max-height: 220px; overflow: auto; padding-left: 17px; margin: 0; line-height: 1.8; }
.map-place-years { color: #708078; font-size: 12px; margin-top: 8px; }
.map-place-zoom { border: 1px solid #d8e2db; border-radius: 8px; background: #f4f8f5; color: #204b3d; padding: 9px; margin-top: 10px; min-height: 44px; }
@media (max-width: 575.98px), (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {
  .map-heading { top: 12px; left: 12px; width: min(254px, calc(100% - 84px)); padding: 4px 12px; border-radius: 13px; }
  .map-heading.is-expanded { width: min(302px, calc(100% - 84px)); }
  .map-heading h1 { font-size: 18px; padding-right: 28px; }
  .map-title-row { display: flex; align-items: center; min-height: 44px; }
  .map-heading-toggle { display: flex; position: absolute; inset: 0; width: 100%; align-items: center; justify-content: flex-end; border: 0; padding: 0 2px; background: transparent; color: #204b3d; font-size: 23px; border-radius: 7px; }
  .map-heading-toggle:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  .map-heading.is-expanded .map-heading-toggle span { transform: rotate(180deg); }
  #map-details { display: none; }
  .map-heading.is-expanded #map-details { display: block; padding-bottom: 8px; }
  .map-heading p { font-size: 12px; margin-bottom: 10px; }
  .map-heading .map-eyebrow { display: none; }
  .map-actions select, .map-actions button { min-height: 44px; font-size: 12px; padding: 6px 8px; }
  .map-bottom { bottom: max(24px, env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 380px; }
  .map-filters { gap: 0; padding: 4px; justify-content: space-between; border-radius: 12px; }
  .map-filters label { gap: 5px; padding: 8px; font-size: 12px; }
  .route-key { width: 13px; }
  #travel-map .leaflet-control-zoom { margin: 12px; }
  #travel-map .leaflet-control-attribution { font-size: 9px; }
}