/* Compact route authoring surface for the monochrome Draw drawer. */
.wm-user-route-point { position:relative; width:0; height:0; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; pointer-events:auto; }
.wm-user-route-point:focus-visible .wm-user-route-point-number { outline:2px solid #fff; outline-offset:3px; }
.wm-user-route-point-number { position:absolute; left:-8px; top:-8px; display:grid; place-items:center; width:16px; height:16px; border:1px solid #fff; border-radius:50%; background:#000; color:#fff; font:600 9px/1 monospace; }
.wm-user-route-point-label { position:absolute; left:13px; top:-8px; max-width:155px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:rgba(0,0,0,.8); color:#fff; padding:2px 5px; border-radius:2px; font:11px/14px sans-serif; }
#wmDrawTools button.wm-route-stop-name { display:block; min-width:0; padding:0; border:0; background:transparent; color:#fff; text-align:left; cursor:pointer; }
#wmDrawTools .wm-route-stop-coordinates { display:block; font:9px/15px monospace; color:#c7c7c7; }
#worldMapCanvas.wm-route-picking,
#worldGlobeCanvas.wm-route-picking canvas,
#worldMapCanvas.wm-route-picking .leaflet-interactive { cursor: crosshair !important; }
#wmDrawTools .wm-route-builder {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.27);
  color: #f4f4f1;
  font: 11px/1.4 "DM Sans", "Avenir Next", sans-serif;
}
#wmDrawTools .wm-route-builder *,
#wmDrawTools .wm-route-builder *::before,
#wmDrawTools .wm-route-builder *::after { box-sizing: border-box; }
#wmDrawTools .wm-route-builder > summary {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 2px;
  background: #080808;
  color: #fff;
  font: 700 10px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
#wmDrawTools .wm-route-builder > summary::-webkit-details-marker { display: none; }
#wmDrawTools .wm-route-builder > summary::after { content: "+"; font-size: 14px; }
#wmDrawTools .wm-route-builder[open] > summary::after { content: "−"; }
#wmDrawTools .wm-route-builder > summary:hover,
#wmDrawTools .wm-route-builder[open] > summary { background: #242424; border-color: #fff; }
#wmDrawTools .wm-route-builder button,
#wmDrawTools .wm-route-builder input,
#wmDrawTools .wm-route-builder select { font: inherit; }
#wmDrawTools .wm-route-panel {
  width: 100%;
  /* The Draw drawer owns scrolling; nested scrollers trapped wheel/touch
     gestures before users could reach the save/playback controls. */
  max-height: none;
  overflow: visible;
  padding: 10px 0 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.4) transparent;
}
#wmDrawTools .wm-route-intro {
  margin: 0 0 11px;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  line-height: 1.5;
}
#wmDrawTools .wm-route-label {
  display: block;
  margin: 9px 0 5px;
  color: rgba(255,255,255,.78);
  font-size: 10px;
}
#wmDrawTools .wm-route-saved-row { display: flex; gap: 6px; }
#wmDrawTools .wm-route-builder input[type="text"],
#wmDrawTools .wm-route-builder input[type="search"],
#wmDrawTools .wm-route-builder select {
  width: 100%;
  min-width: 0;
  min-height: 33px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 2px;
  background: #101010;
  color: #fff;
  color-scheme: dark;
}
#wmDrawTools .wm-route-saved-row select { flex: 1; }
#wmDrawTools .wm-route-builder input::placeholder { color: rgba(255,255,255,.45); }
#wmDrawTools .wm-route-builder button {
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px;
  background: #111;
  color: #fff;
  cursor: pointer;
}
#wmDrawTools .wm-route-builder button:hover:not(:disabled) {
  border-color: #fff;
  background: #2b2b2b;
}
#wmDrawTools .wm-route-builder button:disabled { opacity: .42; cursor: not-allowed; }
#wmDrawTools .wm-route-builder button:focus-visible,
#wmDrawTools .wm-route-builder input:focus-visible,
#wmDrawTools .wm-route-builder select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#wmDrawTools .wm-route-results {
  max-height: 118px;
  margin-top: 5px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2px;
}
#wmDrawTools .wm-route-results[hidden] { display: none; }
#wmDrawTools .wm-route-results button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
#wmDrawTools .wm-route-results button + button { border-top: 1px solid rgba(255,255,255,.12); }
#wmDrawTools .wm-route-results button small {
  flex: 0 0 auto;
  color: rgba(255,255,255,.55);
  font-size: 9px;
}
#wmDrawTools .wm-route-no-results { margin: 0; padding: 9px; color: rgba(255,255,255,.62); }
#wmDrawTools .wm-route-stop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
}
#wmDrawTools .wm-route-stop-head .wm-route-label { margin: 0; }
#wmDrawTools .wm-route-stop-head .wm-route-label span { margin-left: 4px; color: rgba(255,255,255,.52); }
#wmDrawTools .wm-route-builder #wmRoutePick { min-height: 28px; padding: 4px 7px; font-size: 10px; }
#wmDrawTools .wm-route-builder #wmRoutePick.is-active {
  background: #f1f1ed;
  border-color: #f1f1ed;
  color: #080808;
}
#wmDrawTools .wm-route-stops {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: none;
  min-height: 30px;
  overflow: visible;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
#wmDrawTools .wm-route-stop {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 31px;
  padding: 3px 4px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
}
#wmDrawTools .wm-route-stop-number {
  flex: 0 0 22px;
  color: rgba(255,255,255,.48);
  font: 10px ui-monospace, "SFMono-Regular", Consolas, monospace;
}
#wmDrawTools .wm-route-stop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#wmDrawTools .wm-route-stop-tools { display: flex; flex: 0 0 auto; gap: 2px; }
#wmDrawTools .wm-route-stop-tools button {
  width: 24px;
  min-height: 23px;
  padding: 1px;
  border-color: transparent;
  background: transparent;
  font-size: 13px;
  line-height: 1;
}
#wmDrawTools .wm-route-actions,
#wmDrawTools .wm-route-playback {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}
#wmDrawTools .wm-route-actions button,
#wmDrawTools .wm-route-playback button { flex: 1; min-height: 32px; }
#wmDrawTools .wm-route-builder .wm-route-primary {
  background: #f1f1ed;
  border-color: #f1f1ed;
  color: #080808;
  font-weight: 700;
}
#wmDrawTools .wm-route-builder .wm-route-primary:hover:not(:disabled) {
  background: #fff;
  color: #080808;
}
#wmDrawTools .wm-route-builder .wm-route-delete { flex: 0 0 auto; }
#wmDrawTools .wm-route-builder .wm-route-speed-label {
  flex: 0 0 auto;
  color: rgba(255,255,255,.62);
  font-size: 9px;
}
#wmDrawTools .wm-route-builder #wmRouteSpeed { width: 58px; min-height: 32px; padding: 4px; }
#wmDrawTools .wm-route-progress {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 8px;
  border: 0;
  accent-color: #f1f1ed;
}
#wmDrawTools .wm-route-progress::-webkit-progress-bar { background: #303030; }
#wmDrawTools .wm-route-progress::-webkit-progress-value { background: #f1f1ed; }
#wmDrawTools .wm-route-progress::-moz-progress-bar { background: #f1f1ed; }
#wmDrawTools .wm-route-status {
  min-height: 16px;
  margin: 7px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  #wmDrawTools .wm-route-builder button { transition: none !important; }
}

/* Country tour (worldmap-country-tour.js) reuses the route builder panel styles. */
#wmDrawTools .wm-country-tour .wm-tour-colors { display: flex; gap: 6px; margin: 2px 0 8px; }
#wmDrawTools .wm-country-tour .wm-tour-colors button { width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
#wmDrawTools .wm-country-tour .wm-tour-colors button.active { border-color: currentColor; outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; }
#wmDrawTools .wm-country-tour .wm-tour-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 12px; cursor: pointer; }
#wmDrawTools .wm-country-tour .wm-tour-check input { width: 14px; height: 14px; margin: 0; }
#wmDrawTools .wm-country-tour .wm-route-stop-name.is-current { color: #ef4444; font-weight: 700; }
#wmDrawTools .wm-country-tour .wm-route-stop-name.is-current::before { content: '▶ '; }
#wmDrawTools .wm-country-tour .wm-tour-pick { width: 100%; margin: 0 0 10px; }
#wmDrawTools .wm-country-tour .wm-tour-pick.is-active { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }