/* map-skin.css — Leaflet controls restyled for the dark pencil workbench */

.leaflet-container { background: var(--bg-deep); font-family: var(--body); }

.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--panel-hi) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
/* layers icon is a dark background-image; invert the whole toggle so the
   icon goes light — the pre-invert light plate lands back on panel-dark */
.leaflet-control-layers-toggle {
  background-color: #dad7cf !important;
  filter: invert(0.88);
}
.leaflet-control-zoom a:hover { color: var(--accent) !important; }
.leaflet-bar { border: 1.5px solid var(--border-hi) !important; box-shadow: none !important; }

.leaflet-control-layers {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--border-hi) !important;
  border-radius: 9px 11px 10px 9px / 10px 9px 11px 10px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
  font-family: var(--hand);
  font-size: 14px;
}
.leaflet-control-layers-expanded { padding: 8px 12px !important; }

.leaflet-control-scale-line {
  background: rgba(29, 27, 35, 0.75) !important;
  color: var(--dim) !important;
  border-color: var(--border-hi) !important;
  font-family: var(--mono);
  font-size: 10px !important;
}

.leaflet-control-attribution {
  background: rgba(16, 15, 20, 0.7) !important;
  color: var(--faint) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--dim) !important; }

/* custom cursor-coords control */
.coords-control {
  background: rgba(29, 27, 35, 0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dim);
  min-width: 150px;
  text-align: center;
}

/* waypoint markers: pencil dots */
.wpt-marker {
  background: none;
  border: none;
}
.wpt-marker .pin {
  width: 14px;
  height: 14px;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  border: 2.5px solid var(--wpt-color, var(--accent));
  background: rgba(22, 21, 27, 0.85);
  box-sizing: border-box;
}
.wpt-marker.selected .pin {
  background: var(--wpt-color, var(--accent));
  box-shadow: 0 0 0 4px rgba(236, 231, 219, 0.22);
}
.wpt-marker .wlabel {
  position: absolute;
  left: 16px;
  top: -3px;
  font-family: var(--hand);
  font-size: 13px;
  color: #f5f0e4;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 5px #000;
  pointer-events: none;
}

.leaflet-interactive.track-selected { filter: drop-shadow(0 0 4px rgba(236, 231, 219, 0.7)); }

@media (max-width: 760px) {
  .leaflet-control-attribution { font-size: 9px !important; }
  .wpt-marker .wlabel { display: none; }
}