/* Map page — colonial archival panel styling. Leaflet logic unchanged. */

.map-body{
  overflow: hidden;
}
.map-layout{
  height: calc(100vh - 64px - 52px);
  display: grid;
  grid-template-columns: 360px 1fr;
}

.panel{
  height: 100%;
  overflow: auto;
  background: var(--bg-parchment-light, #f3ead7);
  border-right: 1px solid var(--border-soft, #c9b79a);
}

.panel{
  scrollbar-width: thin;
  scrollbar-color: var(--border-dark, #b09b7a) transparent;
}
.panel::-webkit-scrollbar{width: 10px}
.panel::-webkit-scrollbar-track{background: transparent}
.panel::-webkit-scrollbar-thumb{
  background: var(--border-dark, #b09b7a);
  border: 2px solid var(--bg-parchment-light, #f3ead7);
  border-radius: 999px;
}
.panel::-webkit-scrollbar-thumb:hover{background: var(--ink-muted, #6a5843)}

.panel-header{
  padding: 18px 18px 6px;
}
.panel-title{
  margin: 0 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .03em;
  font-size: 20px;
  color: var(--ink-dark, #2b2116);
}
.panel-subtitle{
  margin: 0;
  color: var(--ink-muted, #6a5843);
  font-size: 13px;
}

.panel-section{
  padding: 14px 18px;
  border-top: 1px solid var(--border-soft, #c9b79a);
}
.panel-section-title{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #4a3a29);
  font-weight: 600;
  margin-bottom: 10px;
}

.filters{
  display: grid;
  gap: 10px;
}
.filter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(230,214,184,.35);
  border: 1px solid var(--border-soft, #c9b79a);
  border-radius: var(--radius-sm, 10px);
}
.filter-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Muted ink tones only — no neon category colors */
.swatch{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--border-soft, #c9b79a);
  background: var(--ink-muted, #6a5843) !important;
}
.panel .dot{ background: var(--ink-soft, #4a3a29) !important; }
.filter label{
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-dark, #2b2116);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter input{accent-color: var(--accent-navy, #2e4057)}
.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: var(--ink-muted, #6a5843);
  font-size: 13px;
}

.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;
}

.search-row{display: flex; gap: 10px;}
.search-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-soft, #c9b79a);
  background: rgba(255,255,255,.5);
  color: var(--ink-dark, #2b2116);
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 14px;
}
.search-input::placeholder{color: var(--ink-muted, #6a5843)}
.search-input:focus{
  outline: 2px solid var(--accent-navy, #2e4057);
  outline-offset: 2px;
}

.locations-list{
  margin-top: 10px;
  display: grid;
  gap: 10px;
  overflow-x: hidden;
}
.location-item{
  display: flex;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(230,214,184,.3);
  border: 1px solid var(--border-soft, #c9b79a);
  cursor: pointer;
  color: var(--ink-dark, #2b2116);
  overflow: hidden;
}
.location-item:hover{
  border-color: var(--border-dark, #b09b7a);
  background: rgba(230,214,184,.5);
}
.location-item:focus{
  outline: 2px solid var(--accent-navy, #2e4057);
  outline-offset: 2px;
}
.location-main{min-width: 0;}
.location-name{
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 14px;
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-sub{
  margin: 0;
  font-size: 12px;
  color: var(--ink-muted, #6a5843);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-meta{
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted, #6a5843);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: none;
  border: 1px solid var(--border-soft, #c9b79a);
}

.alpha-heading{
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-soft, #c9b79a);
  background: rgba(230,214,184,.4);
  color: var(--ink-dark, #2b2116);
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
}

.filter-dropdown{
  margin-top: 14px;
  border: 1px solid var(--border-soft, #c9b79a);
  border-radius: 14px;
  background: rgba(243,234,215,.6);
  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: 600;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft, #c9b79a);
  background: rgba(255,255,255,.5);
  color: var(--ink-soft, #4a3a29);
}
.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: var(--border-dark, #b09b7a) transparent;
}
.filter-body .filters::-webkit-scrollbar{width: 8px}
.filter-body .filters::-webkit-scrollbar-thumb{
  background: var(--border-dark, #b09b7a);
  border-radius: 999px;
}
.locations-empty{
  color: var(--ink-muted, #6a5843);
  font-size: 13px;
  padding: 8px 0;
}
.panel-details{
  margin-top: 10px;
  background: rgba(230,214,184,.3);
  border: 1px solid var(--border-soft, #c9b79a);
  border-radius: var(--radius-sm, 10px);
  padding: 10px 12px;
}
.panel-details summary{
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-dark, #2b2116);
}
.panel-details ul{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-muted, #6a5843);
  font-size: 13px;
}

.status{
  padding: 12px 18px 18px;
  color: var(--ink-muted, #6a5843);
  font-size: 13px;
}
.status b{color: var(--ink-dark, #2b2116)}
.loading-line{color: var(--ink-muted, #6a5843); font-size: 13px}

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

.sheet-grabber, .sheet-tabs, .fab, .legend-fab{display: none;}

.fab{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 650;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-dark, #b09b7a);
  background: var(--bg-parchment-light, #f3ead7);
  color: var(--ink-dark, #2b2116);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(43,33,22,.1);
}
.fab:hover{background: var(--bg-parchment-mid, #e6d6b8);}
.fab:focus{outline: 2px solid var(--accent-navy, #2e4057); outline-offset: 2px;}

.legend-fab{
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 650;
  padding: 12px 14px;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-dark, #b09b7a);
  background: var(--bg-parchment-light, #f3ead7);
  color: var(--ink-dark, #2b2116);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(43,33,22,.1);
}
.legend-fab:hover{background: var(--bg-parchment-mid, #e6d6b8);}
.legend-fab:focus{outline: 2px solid var(--accent-navy, #2e4057); outline-offset: 2px;}

.map-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 600;
  padding: 14px 0;
  background: 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: 14px;
  z-index: 500;
  background: var(--bg-parchment-light, #f3ead7);
  border: 1px solid var(--border-soft, #c9b79a);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 190px;
  box-shadow: 0 8px 24px rgba(43,33,22,.1);
}
.legend-title{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dark, #2b2116);
  margin-bottom: 8px;
}
.legend-items{display: grid; gap: 8px;}
.legend-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-muted, #6a5843);
}
.legend-icon{width: 20px; height: 20px;}
.legend-muted{color: var(--ink-muted, #6a5843); font-size: 13px}

.trail-marker{
  filter: drop-shadow(0 8px 16px rgba(43,33,22,.15));
  transition: filter .2s ease, opacity .2s ease;
}
.trail-marker:hover{
  filter: drop-shadow(0 10px 20px rgba(43,33,22,.22));
}
.marker-selected{
  filter: drop-shadow(0 10px 22px rgba(43,33,22,.25)) !important;
}
.marker-dimmed{
  opacity: .25;
  filter: drop-shadow(0 6px 12px rgba(43,33,22,.1)) !important;
}
.marker-ping{animation: markerPing 1s ease-out 1;}
@keyframes markerPing{
  0%{filter: drop-shadow(0 8px 16px rgba(43,33,22,.15))}
  50%{filter: drop-shadow(0 12px 24px rgba(46,64,87,.3))}
  100%{filter: drop-shadow(0 8px 16px rgba(43,33,22,.15))}
}

.focus-ring{pointer-events: none !important;}
.focus-ring-inner{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 2px solid var(--accent-brass, #a67c2e);
  background: rgba(166,124,46,.08);
  animation: focusPulse 1.35s ease-out infinite;
}
@keyframes focusPulse{
  0%{transform: scale(.95); opacity: .9}
  60%{transform: scale(1.05); opacity: .7}
  100%{transform: scale(.95); opacity: .9}
}
.marker-drop{animation: markerIn .4s ease-out both;}
@keyframes markerIn{
  0%{opacity: 0}
  100%{opacity: 1}
}

.leaflet-popup-content-wrapper{
  background: var(--bg-parchment-light, #f3ead7);
  color: var(--ink-dark, #2b2116);
  border: 1px solid var(--border-soft, #c9b79a);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(43,33,22,.12);
}
.leaflet-popup-tip{
  background: var(--bg-parchment-light, #f3ead7);
  border: 1px solid var(--border-soft, #c9b79a);
}
.leaflet-popup-content{margin: 14px; width: 270px;}
.trail-popup{animation: popupIn .2s ease-out both;}
@keyframes popupIn{
  from{transform: translateY(6px); opacity: 0}
  to{transform: translateY(0); opacity: 1}
}

.popup-title{
  font-family: "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--ink-dark, #2b2116);
}
.popup-img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm, 10px);
  border: 1px solid var(--border-soft, #c9b79a);
  margin-bottom: 10px;
}
.popup-desc{margin: 0 0 10px; color: var(--ink-muted, #6a5843); font-size: 13px;}
.popup-meta{margin: 0 0 12px; font-size: 12px; color: var(--ink-muted, #6a5843);}
.popup-actions{display: flex; flex-wrap: wrap; gap: 10px;}
.popup-actions a{flex: 1; min-width: 120px; text-align: center;}
/* Primary button in popup: force white text on navy for contrast */
.leaflet-popup-content .btn-primary,
.leaflet-popup-content .btn-primary:link,
.leaflet-popup-content .btn-primary:visited{
  color: #fff !important;
  background: var(--accent-navy, #2e4057);
}
.leaflet-popup-content .btn-primary:hover{
  color: var(--ink-dark, #2b2116) !important;
  background: var(--accent-brass, #a67c2e);
}

.btn-website.popup-website-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-color: var(--accent-navy, #2e4057);
  color: var(--accent-navy, #2e4057);
  background: rgba(46,64,87,.08);
}
.btn-website.popup-website-link:hover{
  border-color: var(--accent-brass, #a67c2e);
  color: var(--ink-dark, #2b2116);
  background: rgba(166,124,46,.1);
}
.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;
}

.leaflet-control-zoom a,
.leaflet-bar a{
  background: var(--bg-parchment-light, #f3ead7) !important;
  color: var(--ink-dark, #2b2116) !important;
  border-color: var(--border-soft, #c9b79a) !important;
}
.leaflet-bar a:hover{
  background: var(--bg-parchment-mid, #e6d6b8) !important;
}
.leaflet-control-zoom,
.leaflet-control-layers{
  border: 1px solid var(--border-soft, #c9b79a) !important;
  border-radius: var(--radius-sm, 10px) !important;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(43,33,22,.08);
}
.leaflet-control-layers{
  background: var(--bg-parchment-light, #f3ead7) !important;
  color: var(--ink-dark, #2b2116) !important;
}
.leaflet-control-layers label{color: var(--ink-dark, #2b2116) !important; font-weight: 600;}
.leaflet-control-layers-separator{border-top: 1px solid var(--border-soft, #c9b79a) !important;}
.leaflet-control-layers-toggle{
  background-color: var(--bg-parchment-light, #f3ead7) !important;
  opacity: .9;
}

/* Dark basemap option: neutral tint only (no neon) */
.nasa-base .leaflet-tile{
  filter: brightness(1.4) contrast(1.02) saturate(0.9) hue-rotate(0deg);
}
.nasa-labels .leaflet-tile{
  filter: saturate(0) brightness(1.4) contrast(1.2);
}
.map.basemap-nasa .leaflet-tile-pane{position: relative;}
.map.basemap-nasa .leaflet-tile-pane::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(43,33,22,.12), rgba(43,33,22,.08));
  opacity: .6;
}

@media (max-width: 980px){
  :root{ --map-footer-h: 52px; --sheet-peek: 110px; }
  .map-layout{height: auto; display: block;}
  .map-shell{
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: var(--map-footer-h);
    height: auto;
    min-height: 0;
  }
  .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 20px 60px rgba(43,33,22,.2);
    transform: translateY(calc(100% - var(--sheet-peek)));
    transition: transform .22s ease-out;
    z-index: 740;
  }
  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(230,214,184,.5) 0%, rgba(216,198,163,.3) 100%);
    border-bottom: 1px solid var(--border-soft, #c9b79a);
    border-radius: 18px 18px 0 0;
    transition: background .2s, border-color .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-grabber:hover,
  .sheet-grabber:focus{
    background: linear-gradient(180deg, rgba(230,214,184,.7) 0%, rgba(216,198,163,.4) 100%);
    border-bottom-color: var(--border-dark, #b09b7a);
    outline: none;
  }
  .sheet-grabber:focus-visible{
    outline: 2px solid var(--accent-navy, #2e4057);
    outline-offset: 2px;
  }
  .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='%232b2116' 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: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft, #4a3a29);
  }
  .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: var(--radius-sm, 10px);
    border: 1px solid var(--border-soft, #c9b79a);
    background: rgba(230,214,184,.3);
    color: var(--ink-muted, #6a5843);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
  }
  .sheet-tab.is-active{
    background: rgba(46,64,87,.1);
    border-color: var(--border-dark, #b09b7a);
    color: var(--ink-dark, #2b2116);
  }

  .panel-header .panel-subtitle{display: none;}
  .panel{overflow: auto;}
  .map-legend{right: 12px; bottom: 12px; min-width: 160px; padding: 10px;}
  .map-legend{display: none;}
  body.legend-open .map-legend{display: block;}
  .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;}
  body.sheet-expanded .fab,
  body.sheet-expanded .legend-fab{display: none;}
}

/* Dark mode overrides (colors only) */
[data-theme="dark"] .filter{ background: var(--callout-bg); }
[data-theme="dark"] .filter label{ color: var(--ink-dark); }
[data-theme="dark"] .filter-dropdown{
  background: var(--callout-bg);
  border-color: var(--border-dark);
}
[data-theme="dark"] .filter-dropdown .panel-section-title{ color: var(--ink-dark); }
[data-theme="dark"] .summary-pill{
  background: var(--bg-parchment-mid);
  border-color: var(--border-dark);
  color: var(--ink-dark);
}
[data-theme="dark"] .search-input{ background: var(--bg-parchment-mid); }
[data-theme="dark"] .location-item{ background: var(--callout-bg); }
[data-theme="dark"] .location-item:hover{ background: var(--bg-parchment-mid); }
[data-theme="dark"] .list-header{ background: var(--callout-bg); }
[data-theme="dark"] .list-sort option{ background: var(--bg-parchment-light); color: var(--ink-dark); }
[data-theme="dark"] .legend-inner{ box-shadow: 0 8px 24px rgba(0,0,0,.35); }
[data-theme="dark"] .trail-popup{ box-shadow: 0 12px 40px rgba(0,0,0,.4); }
[data-theme="dark"] .btn-website{ background: var(--nav-hover-bg); }
[data-theme="dark"] .btn-website:hover{ background: rgba(201,162,39,.15); }
[data-theme="dark"] .leaflet-control-layers-expanded{ background: var(--bg-parchment-light) !important; }
[data-theme="dark"] .map-footer{ background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.12)); }
[data-theme="dark"] .sheet-grabber{ background: var(--bg-parchment-mid); border-bottom-color: var(--border-soft); }
[data-theme="dark"] .sheet-expanded .sheet-grabber{ background: var(--bg-parchment-mid); border-bottom-color: var(--border-dark); }
[data-theme="dark"] .filter input{ accent-color: var(--accent-brass); }
[data-theme="dark"] .location-item.focus{ background: var(--nav-hover-bg); }