.map-body{
  overflow:hidden;
}
.map-layout{
  height: calc(100vh - 64px - 52px);
  display:grid;
  grid-template-columns: 360px 1fr;
}
.panel{
  height:100%;
  overflow:auto;
  background: rgba(6,10,20,.90);
  border-right: 1px solid rgba(34,48,101,.45);
}

/* Subtle scrollbar (avoids bright white bars) */
.panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(67,215,255,.28) rgba(0,0,0,0);
}
.panel::-webkit-scrollbar{width: 10px}
.panel::-webkit-scrollbar-track{background: rgba(0,0,0,0)}
.panel::-webkit-scrollbar-thumb{
  background: rgba(67,215,255,.22);
  border: 2px solid rgba(6,10,20,.70);
  border-radius: 999px;
}
.panel::-webkit-scrollbar-thumb:hover{background: rgba(67,215,255,.35)}
.panel-header{
  padding: 18px 18px 6px;
}
.panel-title{
  margin: 0 0 6px;
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing:.03em;
  font-size: 20px;
}
.panel-subtitle{
  margin:0;
  color: rgba(234,240,255,.75);
  font-size: 13px;
}

.panel-section{
  padding: 14px 18px;
  border-top: 1px solid rgba(34,48,101,.40);
}
.panel-section-title{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--neon);
  font-weight: 800;
  margin-bottom: 10px;
}

.filters{
  display:grid;
  gap:10px;
}
.filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px;
  background: rgba(11,20,53,.38);
  border: 1px solid rgba(34,48,101,.55);
  border-radius: 14px;
}
.filter-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.filter-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.swatch{
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: rgba(67,215,255,.35);
  box-shadow: 0 0 0 3px rgba(67,215,255,.08);
}
.filter label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.88);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.filter input{accent-color: var(--neon)}
.filters-actions{
  display:flex;
  gap:10px;
  margin-top: 10px;
}
.btn-small{
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing:.02em;
}

.panel-help{
  margin:0;
  color: rgba(234,240,255,.72);
  font-size: 13px;
}

/* Accessible label helper */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border:0 !important;
}

/* Locations list */
.search-row{
  display:flex;
  gap:10px;
}
.search-input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(34,48,101,.60);
  background: rgba(11,20,53,.42);
  color: rgba(234,240,255,.92);
  font-weight: 700;
  font-size: 13px;
}
.search-input::placeholder{color: rgba(169,183,230,.78)}
.search-input:focus{
  outline: 2px solid rgba(67,215,255,.55);
  outline-offset: 3px;
}

.locations-list{
  margin-top: 10px;
  display:grid;
  gap: 10px;
  overflow-x: hidden; /* prevent horizontal scrollbar */
}
.location-item{
  display:flex;
  width: 100%;
  text-align:left;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(11,20,53,.38);
  border: 1px solid rgba(34,48,101,.55);
  cursor:pointer;
  color: rgba(234,240,255,.90);
  overflow:hidden;
}
.location-item:hover{
  border-color: rgba(67,215,255,.55);
  background: rgba(11,20,53,.48);
}
.location-item:focus{
  outline: 2px solid rgba(67,215,255,.55);
  outline-offset: 3px;
}
.location-main{
  min-width: 0;
}
.location-name{
  font-weight: 900;
  letter-spacing:.01em;
  font-size: 13px;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.location-sub{
  margin:0;
  font-size: 12px;
  color: rgba(234,240,255,.70);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.location-meta{
  margin: 0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(234,240,255,.68);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(67,215,255,.35);
  box-shadow: 0 0 0 3px rgba(67,215,255,.08);
  flex:none;
}

.alpha-heading{
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(34,48,101,.45);
  background: rgba(6,10,20,.38);
  color: rgba(234,240,255,.88);
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}

/* Filter dropdown (under search) */
.filter-dropdown{
  margin-top: 14px;
  border: 1px solid rgba(34,48,101,.55);
  border-radius: 16px;
  background: rgba(11,20,53,.28);
  overflow:hidden;
}
.filter-summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px;
}
.filter-summary::-webkit-details-marker{display:none}
.summary-pill{
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 900;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(34,48,101,.55);
  background: rgba(6,10,20,.45);
  color: rgba(234,240,255,.86);
}
.filter-body{
  padding: 0 12px 12px;
}
.filter-row{
  margin-bottom: 10px;
}
.filter-body .filters{
  max-height: 280px;
  overflow:auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(67,215,255,.22) rgba(0,0,0,0);
}
.filter-body .filters::-webkit-scrollbar{width: 10px}
.filter-body .filters::-webkit-scrollbar-thumb{
  background: rgba(67,215,255,.18);
  border: 2px solid rgba(11,20,53,.28);
  border-radius: 999px;
}
.locations-empty{
  color: rgba(234,240,255,.70);
  font-size: 13px;
  padding: 8px 0;
}
.panel-details{
  margin-top: 10px;
  background: rgba(11,20,53,.28);
  border: 1px solid rgba(34,48,101,.50);
  border-radius: 14px;
  padding: 10px 12px;
}
.panel-details summary{
  cursor:pointer;
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,240,255,.86);
}
.panel-details ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(234,240,255,.72);
  font-size: 13px;
}

.status{
  padding: 12px 18px 18px;
  color: rgba(234,240,255,.78);
  font-size: 13px;
}
.status b{color:#fff}
.loading-line{color: rgba(234,240,255,.70); font-size:13px}

.map-shell{
  position:relative;
}
.map{
  position:absolute;
  inset:0;
}

/* Mobile bottom-sheet UI (native-app feel) */
.sheet-grabber,
.sheet-tabs,
.fab{display:none;}

.fab{
  position:absolute;
  left: 14px;
  bottom: 14px;
  z-index: 650;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(34,48,101,.55);
  background: rgba(6,10,20,.78);
  color: rgba(234,240,255,.92);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.fab:hover{background: rgba(11,20,53,.78)}
.fab:focus{outline: 2px solid rgba(67,215,255,.55); outline-offset: 3px;}

.legend-fab{
  position:absolute;
  right: 14px;
  bottom: 14px;
  z-index: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(34,48,101,.55);
  background: rgba(6,10,20,.78);
  color: rgba(234,240,255,.92);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.legend-fab:hover{background: rgba(11,20,53,.78)}
.legend-fab:focus{outline: 2px solid rgba(67,215,255,.55); outline-offset: 3px;}

/* Map footer: fixed bar at bottom (so it doesn't create extra scrolling) */
.map-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 600;
  padding: 14px 0;
  background: transparent !important;
  background-color: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
}
.map-footer .footer-inner p{
  font-size: 12px;
}

.map-legend{
  position:absolute;
  right: 14px;
  bottom: calc(14px + 52px);
  z-index: 500;
  display: none;
  background: rgba(6,10,20,.72);
  border: 1px solid rgba(34,48,101,.55);
  border-radius: 16px;
  padding: 12px 12px;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 28px));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
body.legend-open .map-legend{display:block;}
.legend-title{
  font-family: Orbitron, Inter, sans-serif;
  font-size: 12px;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: rgba(234,240,255,.90);
  margin-bottom: 8px;
}
.legend-items{
  display:grid;
  gap:8px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
  color: rgba(234,240,255,.78);
}
.legend-icon{
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 10px rgba(67,215,255,.10));
}
.legend-muted{color: rgba(234,240,255,.70); font-size:13px}

/* Marker hover glow */
.trail-marker{
  /* Subtle depth + purple neon glow (NASA-ish) */
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.22))
    drop-shadow(0 0 12px rgba(181, 76, 255, .22));
  transition: filter .2s ease, opacity .2s ease;
}
.trail-marker:hover{
  filter:
    drop-shadow(0 0 16px rgba(181, 76, 255, .45))
    drop-shadow(0 14px 22px rgba(0,0,0,.22));
}

/* Selected marker stays obvious under popups */
.marker-selected{
  filter:
    drop-shadow(0 0 22px rgba(181, 76, 255, .65))
    drop-shadow(0 18px 28px rgba(0,0,0,.22)) !important;
}

/* Non-selected markers fade during focus */
.marker-dimmed{
  opacity: .22;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.18)) !important;
}

/* Ping animation when selecting from list */
.marker-ping{
  animation: markerPing 1.05s ease-out 1;
}
@keyframes markerPing{
  0%{filter: drop-shadow(0 0 0 rgba(181, 76, 255, .0)) drop-shadow(0 10px 18px rgba(0,0,0,.22))}
  40%{filter: drop-shadow(0 0 20px rgba(181, 76, 255, .65)) drop-shadow(0 10px 18px rgba(0,0,0,.22))}
  100%{filter: drop-shadow(0 10px 18px rgba(0,0,0,.22)) drop-shadow(0 0 12px rgba(181, 76, 255, .18))}
}

/* Selected-location spotlight ring (helps when popup is open) */
.focus-ring{
  pointer-events:none !important;
}
.focus-ring-inner{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 2px solid rgba(181, 76, 255, .75);
  background: rgba(181, 76, 255, .12);
  box-shadow:
    0 0 22px rgba(181, 76, 255, .35),
    0 0 60px rgba(67, 215, 255, .10);
  animation: focusPulse 1.35s ease-out infinite;
}
@keyframes focusPulse{
  0%{transform: scale(.92); opacity: .85}
  60%{transform: scale(1.08); opacity: .65}
  100%{transform: scale(.92); opacity: .85}
}

/* Drop-in animation */
.marker-drop{
  /* Leaflet positions markers via inline transform; animate opacity/filter only */
  animation: markerIn .45s ease-out both;
}
@keyframes markerIn{
  0%{opacity:0; filter: drop-shadow(0 0 0 rgba(181, 76, 255, 0))}
  100%{opacity:1}
}

/* Popup animation */
.leaflet-popup-content-wrapper{
  background: rgba(6,10,20,.82);
  color: var(--text);
  border: 1px solid rgba(34,48,101,.55);
  border-radius: 16px;
  box-shadow:
    0 18px 60px rgba(0,0,0,.42),
    0 0 26px rgba(181, 76, 255, .16);
}
.leaflet-popup-tip{
  background: rgba(6,10,20,.82);
  border: 1px solid rgba(34,48,101,.55);
}
.leaflet-popup-content{
  margin: 14px 14px;
  width: 270px;
}
.trail-popup{
  animation: popupIn .22s ease-out both;
}

/* Leaflet controls (match the site's dark NASA-ish UI) */
.leaflet-control-zoom a,
.leaflet-bar a{
  background: rgba(6,10,20,.78) !important;
  color: rgba(234,240,255,.92) !important;
  border-color: rgba(34,48,101,.60) !important;
}
.leaflet-bar a:hover{
  background: rgba(11,20,53,.75) !important;
}
.leaflet-control-zoom,
.leaflet-control-layers{
  border: 1px solid rgba(34,48,101,.55) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.leaflet-control-layers{
  background: rgba(6,10,20,.78) !important;
  color: rgba(234,240,255,.88) !important;
}
.leaflet-control-layers label{
  color: rgba(234,240,255,.84) !important;
  font-weight: 700;
}
.leaflet-control-layers-separator{
  border-top: 1px solid rgba(34,48,101,.55) !important;
}
.leaflet-control-layers-toggle{
  background-color: rgba(6,10,20,.78) !important;
  filter: invert(1) grayscale(1);
  opacity: .85;
}

/* "Dark (NASA)" tile treatment: push CARTO dark into blue/steel NASA palette */
.nasa-base .leaflet-tile{
  /* Lift the dark base into charcoal + steel, then tint to navy. */
  filter:
    brightness(1.75)
    contrast(1.05)
    saturate(1.15)
    hue-rotate(205deg);
}

/* Keep labels crisp and slightly "silvery" */
.nasa-labels .leaflet-tile{
  filter:
    saturate(0)
    brightness(1.55)
    contrast(1.25);
}

/* Add a subtle navy/charcoal atmospheric tint that doesn't shift to beige/purple */
.map.basemap-nasa .leaflet-tile-pane{
  position: relative;
}
.map.basemap-nasa .leaflet-tile-pane::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 72% 18%, rgba(67,215,255,.12), transparent 58%),
    radial-gradient(1100px 700px at 25% 80%, rgba(181,76,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,16,48,.38), rgba(6,10,20,.46));
  opacity: .85;
}
@keyframes popupIn{
  from{transform: translateY(8px); opacity:0}
  to{transform: translateY(0); opacity:1}
}
.popup-title{
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing:.02em;
  margin: 0 0 8px;
  font-size: 14px;
}
.popup-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  border: 1px solid rgba(34,48,101,.50);
  margin: 0 auto 10px;
  background: rgba(6,10,20,.35);
}
.popup-desc{
  margin: 0 0 10px;
  color: rgba(234,240,255,.78);
  font-size: 13px;
}
.popup-meta{
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(234,240,255,.70);
}
.popup-actions{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
}
.popup-actions a{
  flex: 1;
  min-width: 120px;
  text-align:center;
}
/* Website link: outline style + external icon */
.btn-website.popup-website-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: rgba(67,215,255,.5);
  color: rgba(67,215,255,.95);
  background: rgba(67,215,255,.08);
}
.btn-website.popup-website-link:hover{
  border-color: var(--neon);
  color: var(--neon);
  background: rgba(67,215,255,.15);
}
.popup-website-icon{
  display: inline-block;
  width: 12px;
  height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
}

@media (max-width: 980px){
  :root{ --map-footer-h: 52px; --sheet-peek: 110px; }

  .map-layout{
    height: auto;
    display:block;
  }

  /* Map always visible, full-bleed behind the sheet */
  .map-shell{
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: var(--map-footer-h);
    height: auto;
    min-height: 0;
  }

  /* Bottom sheet */
  .panel{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--map-footer-h) + 12px);
    height: auto;
    max-height: 72vh;
    border-right: none;
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform .22s ease-out;
    z-index: 740; /* ensure list is tappable above Leaflet */
  }

  body.sheet-expanded .panel{
    transform: translateY(0);
  }

  .sheet-grabber{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 6px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px 16px;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(67,215,255,.14) 0%, rgba(67,215,255,.06) 100%);
    border-bottom: 1px solid rgba(67,215,255,.25);
    border-radius: 18px 18px 0 0;
    transition: background .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
    animation: sheetGrabberPulse 2.5s ease-in-out infinite;
  }
  .sheet-grabber:hover,
  .sheet-grabber:focus{
    background: linear-gradient(180deg, rgba(67,215,255,.22) 0%, rgba(67,215,255,.10) 100%);
    border-bottom-color: rgba(67,215,255,.45);
    outline: none;
  }
  .sheet-grabber:focus-visible{
    outline: 2px solid rgba(67,215,255,.6);
    outline-offset: 2px;
  }
  @keyframes sheetGrabberPulse{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(67,215,255,.15); }
    50%{ box-shadow: 0 0 20px 4px rgba(67,215,255,.08); }
  }
  .sheet-grabber-icon{
    display:block;
    width: 32px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(67,215,255,.95)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
    transition: transform .25s ease;
  }
  body.sheet-expanded .sheet-grabber-icon{
    transform: rotate(180deg);
  }
  .sheet-grabber-hint{
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(67,215,255,.95);
  }
  .sheet-grabber-hint-close{ display: none; }
  body.sheet-expanded .sheet-grabber-hint-open{ display: none; }
  body.sheet-expanded .sheet-grabber-hint-close{ display: block; }

  .sheet-tabs{
    display:flex;
    gap: 8px;
    padding: 0 12px 10px;
  }
  .sheet-tab{
    flex: 1;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(34,48,101,.55);
    background: rgba(11,20,53,.32);
    color: rgba(234,240,255,.78);
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
  }
  .sheet-tab.is-active{
    background:
      linear-gradient(135deg, rgba(67,215,255,.16), rgba(255,59,107,.10)),
      rgba(11,20,53,.38);
    border-color: rgba(67,215,255,.45);
    color: rgba(234,240,255,.95);
  }

  /* Hide desktop intro copy to keep the sheet compact */
  .panel-header .panel-subtitle{display:none;}

  /* App-like scrolling: only the sheet scrolls */
  .panel{overflow:auto;}

  /* Make the legend less dominant on small screens */
  .map-legend{
    right: 12px;
    bottom: calc(var(--map-footer-h) + 14px + 52px);
    min-width: 160px;
    padding: 10px;
  }

  /* Keep action buttons always tappable */
  .fab,
  .legend-fab{
    display:inline-flex;
    position: fixed;
    bottom: calc(var(--map-footer-h) + 14px);
    z-index: 760;
  }
  .fab{left: 14px;}
  .legend-fab{right: 14px;}

  /* When the sheet is open, the FABs are redundant and can cover content */
  body.sheet-expanded .fab,
  body.sheet-expanded .legend-fab{display:none;}
}