/* Concord Properties — map engine styles (shared: editor + public page) */
.cpmap{position:relative;overflow:hidden;background:#0e1b24;cursor:grab;
  border-radius:var(--r-md);touch-action:none}
.cpmap.grabbing{cursor:grabbing}
.cpmap.drawing{cursor:crosshair}
.cpmap.pinning{cursor:copy}
.cpmap-tiles{position:absolute;inset:0}
.cpmap-tiles img{position:absolute;user-select:none;-webkit-user-drag:none;pointer-events:none;
  opacity:0;transition:opacity .18s ease-out}
.cpmap-tiles img.rdy{opacity:1}
.cpmap-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cpmap-ov .cpmap-hit{pointer-events:auto}
.cpmap-ui{position:absolute;z-index:3}
.cpmap-zoom{right:12px;top:12px;display:flex;flex-direction:column;gap:5px}
.cpmap-zoom button{width:32px;height:32px;background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:17px;font-weight:700;
  color:var(--navy);line-height:1;cursor:pointer}
.cpmap-zoom button:hover{background:#fff}
.cpmap-legend{left:12px;top:12px;background:rgba(255,255,255,.93);border-radius:var(--r-sm);
  padding:8px 11px;display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink);
  max-width:190px}
.cpmap-legend span{display:flex;align-items:center;gap:7px}
.cpmap-legend i{width:11px;height:11px;border-radius:2px;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.2);opacity:.75}
.cpmap-attrib{right:10px;bottom:8px;background:rgba(255,255,255,.8);border-radius:3px;
  padding:2px 7px;font-size:9.5px;color:#333;pointer-events:none}
@media (prefers-reduced-motion:reduce){.cpmap-tiles img{transition:none}}

/* Basemap switcher */
.cpmap-over{pointer-events:none}
.cpmap-styles{left:12px;bottom:12px;display:flex;gap:0;background:rgba(255,255,255,.93);
  border-radius:var(--r-sm);overflow:hidden;box-shadow:0 1px 4px rgba(0,25,40,.18)}
.cpmap-styles button{background:none;border:0;border-right:1px solid var(--line);
  padding:6px 11px;font:600 11px/1 var(--font-body,system-ui);color:var(--ink);cursor:pointer;
  white-space:nowrap}
.cpmap-styles button:last-child{border-right:0}
.cpmap-styles button:hover{background:var(--ivory)}
.cpmap-styles button[aria-pressed=true]{background:var(--navy);color:#fff}
@media (max-width:560px){
  .cpmap-styles{flex-wrap:wrap;max-width:160px}
  .cpmap-styles button{padding:5px 8px;font-size:10.5px}
}