/* Route planner page — styles Tailwind utility classes can't express. */

#planner-map { cursor: crosshair; }

.waypoint-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0ABF68;
  color: #fff;
  font: 700 12px/1 'Nunito', sans-serif;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.waypoint-marker.start { background: #0C3B2E; }
.waypoint-marker.end   { background: #e0533d; }

.midpoint-handle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0ABF68;
  opacity: 0.85;
  cursor: grab;
}

/* Mobile: panel becomes a scrollable bottom sheet under the map.
   The panel precedes the map in the DOM (desktop sidebar), so swap the
   visual order here — map first, panel as the sheet below it. */
@media (max-width: 1023px) {
  #planner-shell { flex-direction: column; }
  #planner-map { order: 1; min-height: 55dvh; }
  #planner-panel {
    order: 2;
    width: 100%;
    max-height: 45dvh;
    overflow-y: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
}

#elevation-chart path.profile {
  fill: none;
  stroke: #0ABF68;
  stroke-width: 2;
}
#elevation-chart .profile-fill {
  fill: rgba(10, 191, 104, 0.15);
  stroke: none;
}

.planner-toast {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 1100;
  background: #0C3B2E;
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.planner-toast.show { opacity: 1; }