.pin-label .maplibregl-popup-content {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(27, 33, 53, .18);
  padding: 8px 12px 8px 12px;
  font-family: var(--font);
  color: var(--ink);
}

.pin-label.maplibregl-popup-anchor-top-left .maplibregl-popup-content { border-top-left-radius: 0; }
.pin-label.maplibregl-popup-anchor-top-right .maplibregl-popup-content { border-top-right-radius: 0; }
.pin-label.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content { border-bottom-left-radius: 0; }
.pin-label.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content { border-bottom-right-radius: 0; }

.pin-label .maplibregl-popup-tip { border-width: 8px; }
.pin-label.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.pin-label.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.pin-label.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #fff; }
.pin-label.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.pin-label.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.pin-label.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #fff; }
.pin-label.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #fff; }
.pin-label.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #fff; }

.pin-label-text { padding-right: 18px; min-width: 0; overflow-wrap: anywhere; }
.pin-label-main { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.pin-label-sub { font-size: 12px; line-height: 1.35; color: var(--dim); margin-top: 2px; }
.pin-label-text.coord .pin-label-main,
.pin-label-text.coord .pin-label-sub { font-variant-numeric: tabular-nums; }

.pin-label .maplibregl-popup-close-button {
  top: 5px; right: 5px;
  width: 20px; height: 20px; padding: 0;
  border-radius: 6px;
  font: 16px/20px var(--font);
  color: var(--dim);
}
.pin-label .maplibregl-popup-close-button:hover { background: var(--bg-soft); color: var(--ink); }
.pin-label .maplibregl-popup-close-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (pointer: coarse) {
  .pin-label .maplibregl-popup-close-button { width: 28px; height: 28px; top: 2px; right: 2px; line-height: 28px; }
  .pin-label-text { padding-right: 24px; }
}

.pin-nav {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px; padding: 5px 11px 5px 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
  font: 600 12px/1.2 var(--font);
  box-shadow: 0 1px 3px rgba(69, 96, 212, .35);
  transition: background .12s;
}
.pin-nav:hover { background: var(--accent-dark); }
.pin-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pin-nav svg { flex: none; }
@media (pointer: coarse) { .pin-nav { padding: 8px 14px 8px 10px; font-size: 13px; } }