/* Maps (Leaflet) */
.map-box {
  position: relative; z-index: 0;
  height: 240px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
}
.map-box.tall { height: 280px; }
.map-box .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .8); }
.map-box .leaflet-control-zoom a { color: var(--ink); }
.map-box .tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
[data-theme="dark"] .map-box .leaflet-control-attribution { background: rgba(22, 24, 29, .8); color: var(--muted); }
[data-theme="dark"] .map-box .leaflet-control-attribution a { color: var(--muted); }
[data-theme="dark"] .map-box .leaflet-bar a { background: var(--surface); border-color: var(--line); }

.c4s-pin { background: none; border: 0; }
.c4s-pin svg { width: 32px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.c4s-pin path { fill: var(--green); stroke: #fff; stroke-width: 2; }
.c4s-pin circle { fill: #fff; }
.c4s-area { fill: var(--green); fill-opacity: .18; stroke: var(--green); stroke-width: 1.5; }

.map-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; font-size: 15px;
}
.map-foot .where { display: flex; align-items: center; gap: 6px; min-width: 0; }
.map-foot .where svg { width: 16px; height: 16px; flex: none; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; }
.map-foot .where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-foot .muted { color: var(--muted); }
.map-dir {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 8px;
  border: 1.5px solid var(--border); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.map-dir:hover { background: var(--soft); }
.map-dir svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.field .map-box { margin-top: 10px; }

@media (max-width: 760px) {
  .map-box { height: 200px; }
  .map-box.tall { height: 240px; }
}

.field:has(#err-loc:not([hidden])) #spot { border-color: var(--error); }

/* Google Maps embed */
.map-box .gmap { display: block; width: 100%; height: 100%; border: 0; }
[data-theme="dark"] .map-box .gmap { filter: invert(.9) hue-rotate(180deg) brightness(.9) contrast(.9); }