/* Weight & balance calculator — page styles */
#root { min-height: 100vh; display: flex; flex-direction: column; }

.wb-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.wb-layout > * { min-width: 0; }

@media (max-width: 900px) {
  .wb-layout { grid-template-columns: 1fr; gap: 20px; }
}

/* Range sliders — amber accent, comfortable touch target */
input[type="range"].wb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--gp-ink-100);
  accent-color: var(--gp-amber);
  cursor: pointer;
}
input[type="range"].wb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gp-navy);
  border: 3px solid var(--gp-amber);
  cursor: pointer;
}
input[type="range"].wb-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gp-navy);
  border: 3px solid var(--gp-amber);
  cursor: pointer;
}

.wb-num {
  width: 74px; text-align: right;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-lg);
  color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 4px 8px; background: var(--surface-card);
}
.wb-num:focus { outline: none; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--ring-color); }

/* ---------- Range-ring map (performance page) ---------- */
.gp-map { width: 100%; height: 480px; background: var(--gp-ink-50); }
@media (max-width: 700px) { .gp-map { height: 360px; } }

/* Draggable centre pin — navy disc, amber collar, on-brand */
.gp-pin {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gp-navy); border: 3px solid var(--gp-amber);
  box-shadow: 0 0 0 2px rgba(251, 252, 255, 0.9), var(--shadow-md);
  cursor: grab;
}
.gp-pin:active { cursor: grabbing; }

/* Reachable-range legend, floated over the map */
.gp-map-legend {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(251, 252, 255, 0.94); backdrop-filter: blur(4px);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 11px 13px; min-width: 188px;
}
.gp-map-legend h4 {
  margin: 0 0 8px; font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted);
}
.gp-map-legend .row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: var(--text-xs); }
.gp-map-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.gp-map-legend .nm { margin-left: auto; font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.gp-map-legend .nm span { color: var(--text-muted); font-weight: 400; }

.gp-map-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; background: var(--gp-ink-50); color: var(--text-muted); font-size: var(--text-sm);
}

/* Nudge MapLibre chrome toward the site's radii */
.maplibregl-ctrl-group { border-radius: var(--radius-sm) !important; overflow: hidden; }
.maplibregl-ctrl-attrib { font-size: 10px; }