/* /map-a-course — on top of site.css's tokens/cards/buttons/inputs. Leaflet's
   own CSS (vendor/leaflet.css) handles the map internals; this file is only
   the guided-mapper chrome around it. */

#mapper-map-wrap { padding-bottom: 12px; }
#mapper-map {
  height: 62vh;
  min-height: 360px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  margin-top: 10px;
}
/* Leaflet defaults to a grab-hand cursor at rest, which reads as "drag this"
   when most clicks here are actually placing a point. Regular pointer at
   rest; the grab/grabbing hand only shows while the map is actually being
   panned. */
#mapper-map .leaflet-grab { cursor: default; }
#mapper-map .leaflet-dragging.leaflet-grab { cursor: grabbing; }

.mapper-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mapper-toolbar label { font-weight: 600; }
.mapper-toolbar .input { width: auto; min-height: 40px; }
.mapper-toolbar .btn { min-height: 40px; padding: 0 14px; }

.mapper-holes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.mapper-hole-btn {
  min-width: 40px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Finished (has a green + tee) gets a green outline; the one you're on is
   solid green regardless of finished state — selection always wins, so it's
   declared last. */
.mapper-hole-btn[data-done="1"] { border: 2px solid var(--accent); }
.mapper-hole-btn[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus) inset; }

/* Leaflet's draggable vertex dots, drawn as small divIcons. */
.mapper-vtx {
  width: 12px; height: 12px; border-radius: 50%;
  background: #00e5ff; border: 2px solid #063; box-shadow: 0 0 0 1px #fff;
  cursor: grab;
}
.mapper-hole-label {
  font: 700 12px system-ui, sans-serif; color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
}