/* Map mode extends the original DA; style.css remains byte-for-byte unchanged. */
#landing-header { z-index: 3; } /* Keep its language menu above the full-screen CTA. */
#landing-map-btn { margin-top: 16px; min-height: 32px; }
.view-mode-switch { display: flex; flex-shrink: 0; padding: 3px; gap: 2px; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; background: rgba(10,10,10,.45); backdrop-filter: blur(12px); }
.view-mode-switch button { border: 0; border-radius: 24px; background: none; color: rgba(255,255,255,.55); font: .65rem var(--font); padding: 9px 13px; cursor: pointer; transition: background .18s, color .18s; }
.view-mode-switch button[aria-pressed="true"] { background: rgba(255,255,255,.13); color: #fff; }
.view-mode-switch button:hover { color: #fff; }
.view-mode-switch button:focus-visible, .map-view button:focus-visible, .map-dot:focus-visible { outline: 1px solid #b8d9e5; outline-offset: 3px; }
.map-view { position: absolute; inset: 50px 0 90px; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 12px; padding: 20px 40px 12px; background: #0a0a0a; color: #f0f0f0; --coast-point: #7fbdd0; --other-point: #939a9f; }
.map-view[hidden] { display: none; }
.map-view[data-category="golden"] { --other-point: #dfbd7d; }
.map-heading { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.map-eyebrow { font: .55rem var(--font); letter-spacing: .16em; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.map-heading h1 { font: 400 1.5rem var(--serif); letter-spacing: -.02em; }
.map-filter { color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.17); border-radius: 30px; padding: 9px 14px; font: .7rem var(--font); background: transparent; cursor: pointer; white-space: nowrap; }
.map-filter::after { content: '▾'; margin-left: 10px; }
.map-canvas { position: relative; min-height: 0; overflow: hidden; }
#map-drawing { position: absolute; inset: 0; }
#map-drawing svg { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map-drawing svg:active { cursor: grabbing; }
.map-land { fill: #25292d; stroke: #373b3e; stroke-width: .65; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-dot { cursor: pointer; }
.map-point-leader,.map-point-origin { opacity:0; pointer-events:none; }
.map-point-leader { stroke:#b3d6e0; stroke-width:.8; }
.map-point-origin { fill:#b3d6e0; }
.map-points .map-point-halo { display:none; }
.map-dot.is-displaced:is(.is-targeted,.is-hovered,.is-selected,:focus-visible) .map-point-leader,
.map-dot.is-displaced:is(.is-targeted,.is-hovered,.is-selected,:focus-visible) .map-point-origin { opacity:.65; }
.map-dot-coast { fill: var(--coast-point); }
.map-dot-other { fill: var(--other-point); }
.map-halo { fill: var(--coast-point); fill-opacity: .13; }
.map-ring { fill: none; stroke: var(--coast-point); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.map-zoom { position: absolute; right: 8px; bottom: 25px; display: flex; gap: 5px; z-index: 1100; }
.map-zoom button { min-width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 0 11px; font: .75rem var(--font); color: #ddd; background: rgba(10,10,10,.86); cursor: pointer; }
.map-zoom button:hover { border-color: rgba(255,255,255,.45); }
.map-credit { position: absolute; left: 0; bottom: 12px; font: .55rem var(--font); color: rgba(255,255,255,.3); pointer-events: none; }
.map-selection { min-height: 75px; text-align: center; padding-top: 4px; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 20px; margin-bottom: 12px; font: .6rem var(--font); }
#map-legend-coast { color: var(--coast-point); }
#map-legend-other { color: var(--other-point); }
.map-selection h2 { font: 400 1rem var(--serif); overflow-wrap: anywhere; }
.map-selection p { margin-top: 6px; color: rgba(255,255,255,.45); font: .65rem/1.5 var(--font); overflow-wrap: anywhere; }
.map-empty { position: absolute; top: 45%; left: 12px; right: 12px; text-align: center; font: .85rem/1.6 var(--serif); color: rgba(255,255,255,.75); pointer-events: none; }
.map-empty[hidden] { display: none; }
#app[data-view="map"] #fact-btn, #app[data-view="map"] #fact-popup { display: none; }
#cam-frame-wrap[hidden] { display: none; }
#open-cam-btn:disabled { opacity: .4; cursor: default; }
#top-location { min-width: 0; }
#top-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#top-right { flex-shrink: 0; }
@media(max-width: 680px) {
  #bottom-bar { height: 130px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 50px 50px; gap: 0 12px; align-content: center; padding: 12px 16px; }
  #open-cam-btn { grid-row: 1; grid-column: 1 / -1; justify-self: center; max-width: 100%; padding: 11px 24px; font-size: .82rem; }
  .bottom-back-btn { grid-row: 2; grid-column: 1; justify-self: start; min-width: 0; }
  .view-mode-switch { grid-row: 2; grid-column: 2; }
  .view-mode-switch button { min-height: 44px; padding: 7px 14px; }
  .map-view { bottom: 130px; padding: 12px 16px 6px; gap: 8px; }
  .map-heading { align-items: flex-start; gap: 10px; }
  .map-heading h1 { font-size: 1.1rem; }
  .map-eyebrow { margin-bottom: 6px; }
  .map-filter { max-width: 48%; overflow: hidden; text-overflow: ellipsis; font-size: .65rem; padding: 9px 10px; }
  .map-selection { min-height: 70px; }
  .map-selection h2 { font-size: .92rem; }
  .map-zoom button { min-width: 44px; height: 44px; }
  #landing-map-btn { min-height: 44px; }
  #top-bar { padding: 0 14px; gap: 12px; }
  #top-right { gap: 10px; }
  #top-country, #top-sep { display: none; }
  #top-location { gap: 3px; }
  #cam-frame-wrap[data-camera-type="youtube"] { bottom: 130px !important; }
}
@media(prefers-reduced-motion: reduce) { .view-mode-switch button { transition: none; } }

/* Explorer controls inherit WorldLens colours and typography. */
.map-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-width:0; }
.map-search-wrap { position:relative; flex:1 1 190px; max-width:310px; min-width:0; }
#map-search { box-sizing:border-box; width:100%; height:38px; border:1px solid #333; border-radius:24px; background:#111; padding:0 37px 0 16px; font:.7rem var(--font); color:#eee; outline:none; }
#map-search:focus { border-color:#90abb4; }
#map-search::-webkit-search-cancel-button { display:none; }
#map-clear-search { position:absolute; right:5px; top:1px; border:0; background:none; color:#aaa; width:34px; height:34px; cursor:pointer; font-size:18px; }
.map-filter-tools { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.map-filter-tools button,.map-filter-tools select,.map-explore-coast { border:1px solid #303438; border-radius:22px; background:#111; color:#a3a8ac; min-height:36px; padding:0 13px; font:.65rem var(--font); cursor:pointer; }
.map-filter-tools button[aria-pressed="true"] { background:#262c2e; color:#eef4f5; border-color:#51656c; }
#map-golden-toggle[aria-pressed="true"] { color:#e6c68b; background:#292419; border-color:#705d3b; }
.map-filter-tools select { color-scheme:dark; max-width:115px; }
.map-filter-tools select:disabled { opacity:.4; cursor:default; }
.map-clear-filters { border-color:transparent!important; text-decoration:underline; text-underline-offset:4px; padding:0 5px!important; }
.map-results { position:absolute; z-index:1200; top:8px; left:8px; width:min(330px,calc(100% - 16px)); max-height:calc(100% - 60px); display:flex; flex-direction:column; background:rgba(13,15,17,.97); border:1px solid #353a3e; border-radius:14px; box-shadow:0 12px 40px #0005; overflow:hidden; }
.map-results-heading { display:flex; justify-content:space-between; align-items:center; padding:6px 6px 6px 15px; border-bottom:1px solid #282c2f; font:.68rem var(--font); color:#adb7bb; }
.map-results-heading button { width:36px; height:36px; border:0; color:#bbb; background:none; font-size:20px; cursor:pointer; }
#map-results-list { overflow-y:auto; overscroll-behavior:contain; padding:5px; }
#map-results-list p { padding:15px; font:.72rem/1.5 var(--font); color:#bbb; }
.map-result { display:block; width:100%; text-align:left; border:0; background:transparent; color:#e7e9ea; border-radius:8px; padding:12px 10px; cursor:pointer; font:.72rem var(--font); }
.map-result:hover,.map-result:focus-visible { background:#272d30; }
.map-result span,.map-result small { display:block; }
.map-result small { margin-top:4px; color:#929b9f; font:.6rem/1.4 var(--font); }
.map-view [hidden] { display:none!important; }
.map-tooltip { position:absolute; z-index:1300; pointer-events:none; padding:8px 10px; max-width:220px; border:1px solid #343c40; border-radius:8px; background:#101315ed; color:#e1e7ea; font:.65rem/1.4 var(--font); }
.map-dot .map-point { stroke:#090b0d; stroke-width:1; }
.map-selection-ring { fill:#0a0a0ab3; stroke:#bedee9; stroke-width:1.2; pointer-events:none; }
.map-dot.is-cluster .map-point { fill:#171f23; stroke:#6593a2; stroke-width:1; }
.map-cluster-count { fill:#afcad4; font:500 10px var(--font); pointer-events:none; }
.map-dot.is-golden .map-point { fill:#ddbb7b; stroke:#443924; }
.map-dot.is-cluster.is-golden .map-point { fill:#282217; stroke:#9f8148; }
.map-dot.is-golden text { fill:#e5c88d; }
.map-dot.is-golden:not(.is-cluster) .map-point { animation:map-golden-breathe 3s ease-in-out infinite; }
.map-dot.is-hovered .map-point,.map-dot.is-targeted .map-point,.map-dot:focus-visible .map-point,.map-dot.is-selected .map-point { stroke:#fff; stroke-width:2; filter:drop-shadow(0 0 5px #b0d4df80); }
.map-route { fill:none; stroke:#c5dbe3; stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
#map-legend-golden { color:#ddbb7b; } #map-legend-night { color:#707a80; }
#map-selected-solar { color:#c4b18d; font-variant-numeric:tabular-nums; }
.map-explore-coast { margin-top:7px; min-height:28px; border-color:#353b3f; font-size:.6rem; }
.map-selection { min-height:112px; }
.map-legend { margin-bottom:8px; }
.map-detail { position:absolute; inset:0; z-index:3; background:#181c1f; }
.map-detail .leaflet-tile-pane { filter:none; }
.map-detail .leaflet-control-attribution { background:#0a0a0acc; color:#879198; font:9px var(--font); }
.map-detail .leaflet-control-attribution a { color:#a1afb7; }
.map-detail .leaflet-bottom.leaflet-right { left:0; right:auto; }
#map-drawing .map-detail-points { position:absolute; inset:0; z-index:500; width:100%; height:100%; pointer-events:none; cursor:inherit; }
.map-detail-points .map-dot { pointer-events:all; }
.map-detail-shade { position:absolute; inset:0; z-index:450; width:100%; height:100%; pointer-events:none; }
.map-tile-notice { position:absolute; z-index:1100; left:10px; right:10px; top:8px; padding:8px; background:#17191de8; color:#c9c7c1; font:.65rem/1.4 var(--font); text-align:center; }
@keyframes map-golden-breathe { 0%,100%{opacity:1}50%{opacity:.6} }
@media(max-width:850px) { .map-toolbar { gap:7px; }.map-search-wrap { max-width:none; }.map-filter-tools button,.map-filter-tools select { padding:0 10px; } }
@media(max-width:680px) {
  .map-view { padding-top:8px; gap:7px; }.map-heading h1 { font-size:1rem; }.map-eyebrow { display:none; }
  .map-search-wrap { flex-basis:100%; }#map-search { height:40px; font-size:.72rem; }
  .map-filter-tools { gap:4px; }.map-filter-tools button,.map-filter-tools select { min-height:44px; padding:0 9px; font-size:.6rem; }
  .map-selection { min-height:105px; }.map-legend { font-size:.5rem; gap:5px 11px; }.map-selection h2 { font-size:.85rem; }
  .map-selection p { font-size:.6rem; line-height:1.3; margin-top:4px; }.map-explore-coast { min-height:34px; }
  .map-zoom { gap:3px; right:2px; bottom:20px; }.map-zoom button { min-width:44px; height:44px; padding:0 8px; }
}
@media(max-height:650px) { .map-view { padding-top:4px; gap:5px; }.map-heading { display:none; }.map-legend { display:none; }.map-selection { min-height:68px; }.map-explore-coast { margin-top:3px; }.map-toolbar { gap:4px; } }
@media(prefers-reduced-motion:reduce) { .map-dot .map-point { animation:none!important; } }