.map-scroll {
  height: clamp(340px, 45vw, 640px);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}

#pile-map {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#pile-map circle,
#pile-map circle:hover,
#pile-map circle:focus,
#pile-map circle.selected {
  stroke: #000;
  fill-opacity: 1;
  pointer-events: all;
}

#pile-map circle { stroke-width: .9; }
#pile-map circle:hover, #pile-map circle:focus { stroke-width: 1.8; }
#pile-map circle.selected { stroke-width: 2.5; }
.condition-dot { border: 1px solid #000; }

.map-scroll.is-zoomed { cursor: grab; }
.map-scroll.is-dragging, .map-scroll.is-dragging circle { cursor: grabbing; }
.map-tools output { min-width: 35px; font-variant-numeric: tabular-nums; }
.map-gesture-hint { margin: 0; padding: 0 18px 10px; color: var(--muted); font-size: 11px; }
.plan-heading-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-heading-actions > button { font-size: 12px; padding: 9px 12px; }
.progress-export-result { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 18px; background: #eef7ff; font-size: 11px; }
.progress-export-result span { color: var(--muted); }
.drawing-panel > .panel-heading { flex-wrap: wrap; }
@media (max-width: 600px) {
  .plan-heading-actions { width: 100%; justify-content: space-between; gap: 6px; }
}