/* Charted-wreck overlay. V7 Topographic Night, secondary to primary pins. */

.atlas-wreck {
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
}
.atlas-wreck__mark {
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:color-mix(in srgb,var(--accent) 78%,var(--text));
  background:rgba(2,6,7,.82);
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--border));
  border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 2px rgba(2,6,7,.5);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.atlas-wreck__mark svg {
  width:15px;
  height:15px;
  stroke:currentColor;
  stroke-width:1.55;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.atlas-wreck:hover .atlas-wreck__mark,
.atlas-wreck:focus .atlas-wreck__mark {
  transform:translateY(-2px) scale(1.05);
  background:var(--surface-active);
  border-color:var(--accent);
}

.atlas-wreck-pop .leaflet-popup-content-wrapper {
  background:linear-gradient(155deg,rgba(19,25,26,.98),rgba(6,12,13,.98));
  color:var(--text);
  border:1px solid var(--border-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow2);
  font-family:var(--font);
}
.atlas-wreck-pop .leaflet-popup-tip { background:#0b1112; }
.atlas-wreck-pop .leaflet-popup-content { margin:15px 17px 16px; }
.atlas-wreck-pop .leaflet-popup-close-button {
  color:var(--text-dim)!important;
  font:20px/28px var(--font)!important;
}
.wreckPop__eyebrow {
  margin:0 0 6px!important;
  color:var(--accent)!important;
  font-size:8px!important;
  letter-spacing:.17em;
}
.wreckPop h3 {
  margin:0 22px 9px 0;
  color:var(--text);
  font-family:var(--font-h2);
  font-size:14px;
  font-weight:400;
  line-height:1.35;
}
.wreckPop__facts { display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px; }
.wreckPop__facts span {
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  padding:3px 7px;
  color:var(--text-dim);
  font-size:8px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.wreckPop p {
  margin:0 0 8px;
  color:var(--text-dim);
  font-size:10.5px;
  line-height:1.55;
}
.wreckPop__basis { border-top:1px dotted var(--border);padding-top:8px; }
.wreckPop__basis b { color:var(--text);font-weight:400;letter-spacing:.1em; }
.wreckPop__coord { margin-bottom:0!important;color:var(--text-faint)!important;font-size:9px!important;letter-spacing:.08em; }

@media (max-width:760px) {
  .atlas-wreck-pop .leaflet-popup-content-wrapper { max-width:min(82vw,320px); }
}