/*
 * context-menu.css — the right-click menu and the "Link copied" note (js/context-menu.js),
 * and the pin of a shared link (js/shared-link.js).
 */

/* --- The menu: white card with a soft shadow, like Google Maps' --- */

.map-menu {
  position: absolute;
  z-index: 3; /* above the height panel and the scale ruler */
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
}

.map-menu[hidden] {
  display: none;
}

.map-menu button {
  padding: 8px 16px;
  border: 0;
  background: none;
  font: 15px/20px system-ui, sans-serif;
  color: #202124;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.map-menu button:first-child {
  font-variant-numeric: tabular-nums;
}

.map-menu button:hover,
.map-menu button:focus-visible {
  background: #eef3f6;
  outline: none;
}

/* --- "Link copied": a dark label next to the pointer that fades away --- */

.map-note {
  position: absolute;
  z-index: 4;
  padding: 5px 10px;
  background: rgba(32, 33, 36, 0.9);
  color: #fff;
  font: 600 13px/18px system-ui, sans-serif;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none; /* never catches clicks */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.map-note.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease;
}

/* --- The pin of a shared link: a red map pin whose tip stands on the point --- */

.shared-pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; /* under the controls, the height panel and the menu */
  width: 28px;
  height: 40px;
  margin: -40px 0 0 -14px; /* the tip (bottom centre) on the point; js sets the translate */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.shared-pin[hidden] {
  display: none;
}

.shared-pin svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  transform-origin: 50% 100%;
  transition: scale 0.1s;
}

.shared-pin:hover svg {
  scale: 1.12;
}

.shared-pin path {
  fill: #d93025;
  stroke: #a52714;
  stroke-width: 1;
}

.shared-pin circle {
  fill: #7a1a10;
}