/* Fullscreen map pages that still show the StationHub header nav */



body:has(.map-shell) .conditions-bar {

  display: none;

}

body:has(.map-shell) .site-header {

  padding: 0.35rem 1rem;

  position: relative;

  z-index: 2000;

}

body:has(.map-shell) .site-header h1 {

  font-size: 1rem;

}

body:has(.map-shell) .site-nav {

  font-size: 0.8rem;

  gap: 0.45rem;

}



.map-shell {

  position: relative;

  height: calc(100vh - 52px);

  min-height: 360px;

  overflow: hidden;

  background: #1a1a2e;

}



.map-shell #map,

.map-shell #compare-map {

  position: absolute !important;

  inset: 0 !important;

  z-index: 0;

}



/* Shared dark floating panel — same tokens as main.css / worked map */

.map-shell #panel {

  position: absolute;

  top: 12px;

  left: 56px;

  z-index: 1000;

  width: 300px;

  max-height: calc(100% - 52px);

  overflow: auto;

  background: rgba(26, 35, 50, 0.96);

  border: 1px solid var(--border, #2d3a4f);

  border-radius: 10px;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(61, 139, 253, 0.2);

  padding: 12px;

  font-size: 13px;

  color: var(--text, #e7ecf3);

  transition: transform 0.2s ease, opacity 0.2s ease;

}

.map-shell #panel.collapsed {

  transform: translateX(-320px);

  opacity: 0;

  pointer-events: none;

}



.map-shell #panelToggle {

  position: absolute;

  top: 12px;

  left: 12px;

  z-index: 1001;

  width: 36px;

  height: 36px;

  border-radius: 8px;

  border: 1px solid var(--border, #2d3a4f);

  background: rgba(26, 35, 50, 0.96);

  color: var(--text, #e7ecf3);

  cursor: pointer;

  font-size: 18px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

}

.map-shell #panelToggle:hover {

  border-color: var(--accent, #3d8bfd);

  color: #fff;

}



.map-shell #panel h3 {

  margin: 0 0 6px;

  font-size: 15px;

  color: #fff;

  font-weight: 600;

}

.map-shell #panel label {

  display: block;

  font-size: 11px;

  color: var(--muted, #8b9cb3);

  margin: 8px 0 3px;

}

.map-shell #panel label.check,

.map-shell #panel label:has(> input[type="checkbox"]) {

  display: flex;

  align-items: center;

  gap: 0.4rem;

  font-size: 12px;

  color: var(--text, #e7ecf3);

}

.map-shell #panel select,

.map-shell #panel input:not([type="checkbox"]):not([type="range"]) {

  width: 100%;

  padding: 6px;

  font-size: 12px;

  border: 1px solid var(--border, #2d3a4f);

  border-radius: 6px;

  background: var(--bg, #0f1419);

  color: var(--text, #e7ecf3);

}

.map-shell #panel .row {

  display: flex;

  gap: 6px;

  margin-top: 8px;

}

.map-shell #panel .row button {

  flex: 1;

  padding: 7px;

  font-size: 12px;

  cursor: pointer;

  border: 1px solid var(--border, #2d3a4f);

  border-radius: 6px;

  background: var(--panel-raised, #243044);

  color: var(--text, #e7ecf3);

}

.map-shell #panel .row button:hover {

  background: #2d3a4f;

  border-color: var(--accent, #3d8bfd);

}

.map-shell #panel .preset-row button {

  font-size: 11px;

  padding: 6px 4px;

}

.map-shell #panel .preset-row button.active {

  background: rgba(61, 139, 253, 0.25);

  border-color: var(--accent, #3d8bfd);

  color: #fff;

  font-weight: 600;

}

.map-shell #panel .muted {

  color: var(--muted, #8b9cb3);

  font-size: 11px;

}

.map-shell #panel a {

  color: var(--accent, #3d8bfd);

}

.map-shell #panel a:hover {

  color: var(--accent-hover, #5a9dff);

}

.map-shell #panel #stats,

.map-shell #panel #cmp-stats,

.map-shell #panel #legend {

  margin: 8px 0;

  padding: 6px;

  background: var(--bg, #0f1419);

  border: 1px solid var(--border, #2d3a4f);

  border-radius: 6px;

  font-size: 11px;

  color: var(--text, #e7ecf3);

}

.map-shell #panel #stats strong,

.map-shell #panel #cmp-stats strong {

  color: var(--accent-hover, #5a9dff);

}

.map-shell #panel #legend {

  font-size: 10px;

}

.map-shell #panel #legend .item {

  display: flex;

  align-items: center;

  gap: 5px;

  margin: 2px 0;

}

.map-shell #panel #legend .swatch {

  width: 12px;

  height: 12px;

  border-radius: 2px;

  border: 1px solid rgba(255, 255, 255, 0.2);

}

.map-shell #panel #log {

  margin-top: 8px;

  padding: 6px;

  background: #0a0e14;

  color: #9be9a8;

  font-family: ui-monospace, monospace;

  font-size: 10px;

  height: 100px;

  overflow: auto;

  border-radius: 6px;

  border: 1px solid var(--border, #2d3a4f);

  white-space: pre-wrap;

}



.map-shell #footer {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  height: 28px;

  background: rgba(15, 20, 25, 0.92);

  color: var(--muted, #8b9cb3);

  font-size: 11px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 12px;

  border-top: 1px solid var(--border, #2d3a4f);

}

.map-shell #footer strong {

  color: var(--text, #e7ecf3);

}

.map-shell #footer .brand {

  color: var(--accent, #3d8bfd);

  font-weight: 700;

  letter-spacing: 0.5px;

}



/* Map overlays — readable on dark basemap */

.map-shell .leaflet-tooltip.spot-tip,

.map-shell .leaflet-tooltip.worked-tip {

  background: var(--panel, #1a2332);

  border: 1px solid var(--border, #2d3a4f);

  border-radius: 6px;

  padding: 8px 10px;

  font-size: 13px;

  line-height: 1.4;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

  color: var(--text, #e7ecf3);

}

.map-shell .leaflet-tooltip.spot-tip b {

  color: #fff;

}

.map-shell .spot-label-wrap {

  background: transparent;

  border: none;

}

.map-shell .spot-label {

  display: inline-block;

  padding: 3px 8px;

  border-radius: 5px;

  font-size: 12px;

  font-weight: 700;

  color: #111;

  white-space: nowrap;

  border: 1px solid rgba(0, 0, 0, 0.25);

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);

  line-height: 1.35;

  pointer-events: auto;

}

.map-shell .spot-label.light {

  color: #fff;

  border-color: rgba(255, 255, 255, 0.3);

}

.map-shell .mh-label {

  background: transparent;

  border: none;

  color: rgba(231, 236, 243, 0.55);

  font-size: 11px;

  font-weight: 700;

  text-shadow: 0 0 3px #0f1419, 0 0 3px #0f1419;

  pointer-events: none;

}



@media (max-width: 900px) {

  .map-shell {

    height: calc(100vh - 88px);

  }

}