/* Photo atlas: a full canvas, bounded place collections, and a mobile bottom sheet. */
body.map-app { height: 100vh; height: 100dvh; margin: 0; overflow: hidden; display: flex; flex-direction: column; background: #f8fafc; color: var(--ink, #043361); font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.map-app [hidden] { display: none !important; }
.map-app button, .map-app input, .map-app select { font: inherit; }
.map-app button { cursor: pointer; }
.map-app button:disabled { opacity: .45; cursor: default; }
.map-app button:focus-visible, .map-app a:focus-visible, .map-app input:focus-visible, .map-app select:focus-visible { outline: 2px solid var(--blue, #1b6fb3); outline-offset: 3px; }
.skip-link { position: fixed; top: -70px; left: 18px; z-index: 10000; padding: 10px 15px; border-radius: 8px; color: white; background: #043361; }
.skip-link:focus { top: 10px; }
.map-main { flex: 1; min-height: 0; display: flex; }
.map-workspace { --drawer-width: 370px; position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: #f3f7fa; }
.map-stage { position: absolute; inset: 0; overflow: hidden; }
.map-canvas, .map-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-canvas { opacity: 0; pointer-events: none; }
.is-map-ready .map-canvas { opacity: 1; pointer-events: auto; }
.is-map-ready .map-fallback { display: none; }
.fallback-country { cursor: pointer; }
.fallback-country:hover, .fallback-country:focus { fill: #80acd1; outline: none; stroke-width: 1.4; }
.map-filters { position: absolute; z-index: 5; top: 18px; left: 18px; width: min(440px, calc(100% - var(--drawer-width) - 58px)); margin: 0; padding: 10px; border: 1px solid #d5e1eb; border-radius: 13px; background: rgba(255,255,255,.98); box-shadow: 0 5px 22px rgba(4,51,97,.08); }
.is-index-hidden .map-filters { width: min(440px, calc(100% - 36px)); }
.search-line { display: flex; align-items: center; gap: 8px; }
.search-field { flex: 1; min-width: 0; }
.search-field input { display: block; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: #f5f8fb; color: #244c6d; font-size: 13px; }
.search-field input::placeholder { color: #8394a3; }
.filter-toggle { height: 38px; padding: 0 12px; border: 1px solid #d7e3ed; border-radius: 7px; color: #476982; background: white; font-size: 11px; }
.filter-toggle[aria-expanded='true'] { border-color: #9bbcd8; background: #edf5fc; color: #1b6fb3; }
.search-lenses { display: flex; align-items: center; gap: 9px; margin-top: 8px; min-height: 27px; }
.photos-lens { flex-shrink: 0; padding: 5px 10px; border: 1px solid #dbe5ee; border-radius: 6px; background: #fff; color: #526f85; font-size: 10px; line-height: 1.5; }
.photos-lens[aria-pressed='true'] { background: #eaf3fc; border-color: #9ebdda; color: #1b6fb3; }
.active-scope { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #738796; font-size: 10px; }
.clear-button { flex-shrink: 0; border: 0; background: none; color: #1b6fb3; padding: 4px 3px; font-size: 10px; }
.clear-button:hover { text-decoration: underline; }
.filter-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding-top: 11px; margin-top: 9px; border-top: 1px solid #e6edf3; }
.filter-options label { display: block; min-width: 0; }
.filter-options label > span { display: block; font-size: 10px; color: #6c8191; margin: 0 0 5px; }
.filter-options select { display: block; width: 100%; height: 36px; padding: 0 8px; min-width: 0; border: 1px solid #d3e0eb; border-radius: 7px; background: white; color: #244c6d; font-size: 12px; }
.map-actions { position: absolute; z-index: 2; bottom: 25px; left: 18px; display: flex; gap: 6px; }
.map-actions button, .open-index { min-height: 34px; padding: 7px 12px; border: 1px solid #d2e0eb; border-radius: 8px; background: rgba(255,255,255,.97); color: #365d7c; font-size: 11px; box-shadow: 0 2px 8px rgba(4,51,97,.05); }
.map-actions button:hover:enabled, .open-index:hover { border-color: #95b6d3; background: #f2f8fd; }
.open-index { position: absolute; z-index: 3; top: 18px; right: 18px; }
.map-feedback { position: absolute; z-index: 2; top: 130px; left: 18px; max-width: calc(100% - var(--drawer-width) - 56px); padding: 8px 12px; margin: 0; border: 1px solid #dce6ee; border-radius: 8px; color: #718595; background: white; font-size: 11px; }
.map-legend { position: absolute; z-index: 2; bottom: 25px; left: 207px; display: flex; gap: 12px; align-items: center; padding: 8px 11px; border: 1px solid #d2e0eb; border-radius: 8px; background: rgba(255,255,255,.97); color: #627b8e; font-size: 10px; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.visited-dot { background: #1b6fb3; }
.wishlist-dot { background: #876787; }
.map-stage .maplibregl-ctrl-top-left { top: auto; left: 8px; bottom: 68px; }
.map-stage .maplibregl-ctrl-group { overflow: hidden; border: 1px solid #d2e0eb; border-radius: 8px; box-shadow: 0 2px 8px rgba(4,51,97,.05); }
.map-stage .maplibregl-ctrl-group button { width: 33px; height: 33px; }
.map-stage .maplibregl-ctrl-attrib { font-size: 9px; }
.map-tooltip .maplibregl-popup-content { padding: 0; overflow: hidden; pointer-events: auto; border: 1px solid #d3dfeb; border-radius: 8px; background: #fff; box-shadow: 0 4px 15px rgba(4,51,97,.12); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; width: 172px; }
.map-tooltip .maplibregl-popup-tip { border-top-color: white; pointer-events: none; }
.tooltip-text { padding: 10px 11px; }
.tooltip-text strong { display: block; font-size: 12px; font-weight: 600; }
.tooltip-text span { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.tooltip-preview { position: relative; display: block; width: 172px; height: 105px; padding: 0; border: 0; background: #edf3f8; color: var(--blue); cursor: pointer; overflow: hidden; touch-action: manipulation; user-select: none; }
.tooltip-preview:focus-visible { outline-offset: -3px; }
.tooltip-open-label { font-size: 11px; font-weight: 500; }
.tooltip-photo { position: absolute; inset: 0; display: block; width: 172px; height: 105px; object-fit: cover; background: #edf3f8; opacity: 0; pointer-events: none; user-select: none; transition: opacity .15s; }
.tooltip-photo.is-loaded { opacity: 1; }
.tooltip-caption { padding: 8px 11px 10px; margin: 0; font-size: 10px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }

.destination-panel { position: absolute; z-index: 4; top: 18px; right: 18px; bottom: 29px; width: var(--drawer-width); min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d8e3ec; border-radius: 14px; background: #fff; box-shadow: 0 7px 28px rgba(4,51,97,.09); }
.index-toggle { display: flex; align-items: center; gap: 8px; min-height: 37px; width: 100%; flex-shrink: 0; padding: 9px 17px 6px; border: 0; background: white; color: #768b9a; font-size: 10px; text-align: left; }
.drawer-toggle-icon { margin-left: auto; color: #527890; font-size: 15px; }
.sheet-grip { display: none; }
.destination-overview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.index-header { flex-shrink: 0; padding: 9px 18px 17px; border-bottom: 1px solid #e7eef4; }
.collection-scope { margin: 0 0 6px; color: #70899b; font-size: 10px; }
.index-header h2 { margin: 0 0 8px; color: #043361; font-size: 24px; line-height: 1.25; letter-spacing: -.5px; font-weight: 600; }
.index-header #destination-count { margin: 0; color: #6d8495; font-size: 11px; }
.atlas-summary { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 17px; color: #718796; font-size: 10px; }
.atlas-summary strong { color: #244f73; font-weight: 600; }
.collection-gallery-link { display: inline-block; margin-top: 13px; font-size: 11px; color: #1b6fb3; }
.collection-gallery-link span { margin-left: 8px; }
.destination-list-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px 16px 20px; scrollbar-width: thin; scrollbar-color: #ccdbe7 transparent; }
.place-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 11px; }
.destination-row { display: block; min-width: 0; width: 100%; padding: 0; overflow: hidden; border: 1px solid #dce7ef; border-radius: 9px; background: white; color: #043361; text-align: left; }
.destination-row:hover { border-color: #a1bfd9; box-shadow: 0 3px 12px rgba(4,51,97,.05); }
.destination-row:focus-visible { outline-offset: 2px; }
.place-cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3/2; overflow: hidden; background: #f0f5f9; }
.place-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-cover .destination-flag { font-size: 28px; }
.place-photo-count { position: absolute; bottom: 7px; right: 7px; padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.94); color: #375f7c; font-size: 9px; }
.destination-row-text { display: block; padding: 11px 10px 12px; }
.destination-row-text strong { display: block; color: #244d70; font-size: 12px; font-weight: 600; line-height: 1.4; }
.destination-row-text > span { display: block; color: #77909f; font-size: 10px; line-height: 1.5; margin-top: 4px; }
.place-caption { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #687f90; font-size: 10px; line-height: 1.6; margin: 6px 0 0; }
.destination-row.no-photo { grid-column: 1/-1; display: flex; align-items: center; gap: 10px; padding: 12px; background: #fbfcfe; }
.destination-row.no-photo .destination-flag { flex-shrink: 0; font-size: 20px; }
.destination-row.no-photo .destination-row-text { padding: 0; flex: 1; }
.destination-row-meta { color: #8094a3; font-size: 9px; }
.destination-row-meta.is-wishlist { color: #876787; }
.more-button { display: block; width: 100%; padding: 10px; margin-top: 17px; border: 1px solid #d6e3ed; border-radius: 8px; background: #f8fbfd; color: #1b6fb3; font-size: 11px; }
.more-button:hover { background: #eff6fc; }
.empty-state { color: #718797; font-size: 12px; line-height: 1.8; text-align: center; padding: 28px 15px; }
.empty-state p { margin: 0 0 15px; }
.empty-state button { border: 1px solid #cfdfe9; border-radius: 7px; padding: 8px 12px; color: #1b6fb3; background: white; font-size: 11px; }
.destination-detail { flex: 1; min-height: 0; overflow: auto; padding: 9px 18px 24px; scrollbar-width: thin; scrollbar-color: #ccdbe7 transparent; }
.destination-back { display: inline-block; border: 0; padding: 0; margin: 0 0 19px; background: none; color: #1b6fb3; font-size: 11px; }
.destination-country { font-size: 11px; color: #70899a; margin: 0 0 6px; }
.destination-detail h2 { margin: 0 0 9px; color: #043361; font-size: 29px; line-height: 1.2; letter-spacing: -.6px; font-weight: 600; }
.destination-detail-meta { margin: 0 0 19px; color: #6e8798; font-size: 11px; line-height: 1.8; }
.photo-open { display: block; position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 9px; background: #eef4f8; }
.destination-cover { width: 100%; aspect-ratio: 16/10; }
.photo-open img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-unavailable { padding: 12px; color: #738a9b; font-size: 11px; }
.destination-cover-caption { margin: 10px 0 0; color: #6b8294; font-size: 11px; line-height: 1.7; }
.destination-photo-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 11px; }
.destination-photo-strip button { aspect-ratio: 1; border-radius: 7px; }
.destination-note { margin: 22px 0 0; padding-top: 17px; border-top: 1px solid #e5edf3; color: #536e83; font-size: 13px; line-height: 1.85; white-space: pre-line; }
.view-photos { display: block; width: 100%; margin-top: 21px; padding: 11px; border: 1px solid #1b6fb3; border-radius: 8px; color: white; background: #1b6fb3; font-size: 12px; font-weight: 500; }
.view-photos:hover { border-color: #043361; background: #043361; }
.city-gallery-link { display: block; margin-top: 13px; color: #1b6fb3; font-size: 11px; text-align: center; }
.destination-no-photos { padding: 24px 17px; margin: 0; border: 1px solid #dee8f0; border-radius: 9px; color: #6e8799; background: #f7fafc; font-size: 12px; line-height: 1.8; text-align: center; }
.noscript-message { position: fixed; left: 18px; bottom: 30px; z-index: 10; padding: 13px 16px; border: 1px solid #d4e0e9; border-radius: 8px; background: white; color: #526d81; font-size: 12px; }
@media (max-width: 1120px) { .map-workspace { --drawer-width: 340px; } .map-filters { width: min(400px, calc(100% - var(--drawer-width) - 54px)); } .index-header h2 { font-size: 22px; } }
@media (max-width: 900px) { .map-workspace { --drawer-width: 315px; } .map-filters { width: calc(100% - var(--drawer-width) - 50px); } .map-actions { left: 15px; } .search-field input { font-size: 12px; } .filter-toggle { font-size: 10px; padding-inline: 8px; } .destination-row-text { padding-inline: 9px; } }
@media (max-width: 700px) {
  .map-workspace { --sheet-height: 112px; }
  .map-workspace.is-sheet-expanded { --sheet-height: min(56dvh, calc(100% - 128px)); }
  .map-filters, .is-index-hidden .map-filters { left: 12px; top: 12px; width: calc(100% - 24px); padding: 9px; border-radius: 12px; }
  .search-field input { height: 39px; font-size: 16px; }
  .filter-toggle { height: 39px; padding-inline: 11px; font-size: 11px; }
  .filter-options select { font-size: 16px; height: 38px; }
  .search-lenses { margin-top: 7px; }
  .map-feedback { top: 123px; left: 12px; max-width: calc(100% - 24px); font-size: 10px; }
  .destination-panel { top: auto; right: 0; bottom: 0; width: 100%; height: var(--sheet-height); border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -4px 22px rgba(4,51,97,.09); }
  .index-toggle { position: relative; min-height: 33px; justify-content: center; padding: 13px 19px 3px; }
  .sheet-grip { display: block; position: absolute; top: 7px; left: calc(50% - 17px); width: 34px; height: 3px; border-radius: 999px; background: #c1d2df; }
  .drawer-toggle-icon { position: absolute; right: 20px; top: 10px; font-size: 17px; }
  .is-sheet-collapsed .drawer-toggle-icon { transform: rotate(180deg); }
  .index-header { padding: 9px 18px 17px; }
  .index-header h2 { font-size: 24px; }
  .is-sheet-collapsed .collection-scope, .is-sheet-collapsed .atlas-summary, .is-sheet-collapsed .collection-gallery-link { display: none; }
  .is-sheet-collapsed .index-header { padding: 5px 18px 10px; }
  .is-sheet-collapsed .index-header h2 { margin-bottom: 4px; font-size: 18px; }
  .is-sheet-collapsed .index-header #destination-count { font-size: 10px; }
  .is-sheet-collapsed .destination-list-scroll { display: none; }
  .destination-list-scroll { padding: 14px 16px 24px; }
  .place-cards { gap: 13px; }
  .destination-row-text strong { font-size: 13px; }
  .destination-row-text > span { font-size: 11px; }
  .place-cover { aspect-ratio: 16/10; }
  .destination-detail { padding-top: 10px; }
  .is-sheet-collapsed .destination-detail { overflow: hidden; padding: 2px 18px 10px; }
  .is-sheet-collapsed .destination-detail h2 { display: inline; font-size: 19px; margin-right: 10px; }
  .is-sheet-collapsed .destination-country { display: inline; font-size: 10px; margin-right: 7px; }
  .is-sheet-collapsed .destination-detail-meta { display: block; margin: 4px 0 0; font-size: 10px; }
  .is-sheet-collapsed .destination-back, .is-sheet-collapsed .photo-open, .is-sheet-collapsed .destination-cover-caption, .is-sheet-collapsed .destination-photo-strip, .is-sheet-collapsed .destination-note, .is-sheet-collapsed .view-photos, .is-sheet-collapsed .city-gallery-link, .is-sheet-collapsed .destination-no-photos { display: none; }
  .map-actions { left: 12px; bottom: calc(var(--sheet-height) + 18px); }
  .map-legend { left: 12px; bottom: calc(var(--sheet-height) + 62px); }
  .map-stage .maplibregl-ctrl-top-left { left: auto; right: 2px; top: 113px; bottom: auto; }
  .map-stage .maplibregl-ctrl-bottom-right { bottom: calc(var(--sheet-height) + 3px); }
  .map-stage .maplibregl-ctrl-attrib { font-size: 8px; }
  .open-index { display: none; }
}
@media (prefers-reduced-motion: reduce) { .map-app *, .map-app *::before, .map-app *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }