/* A single bar, in the same position at rest and while inspecting. */
.ride-gpt-ui .route-surface-inspector {
  --surface-paved:#687d91;
  --surface-unpaved:#a7bcbd;
  --surface-gravel:#c0a77b;
  --surface-other:#a8a1ae;
  --surface-unknown:#b8bab5;
  position:relative;border:0;margin:8px 0 0;padding:0;
}
:is([data-theme="dark"],.theme-dark) .route-surface-inspector {
  --surface-paved:#9bb5d2;
  --surface-unpaved:#b9cbcc;
  --surface-gravel:#dabe8e;
  --surface-other:#bbb0c3;
  --surface-unknown:#777e7b;
}
.ride-gpt-ui .route-surface-inspector .route-surface-bar {
  display:block;position:relative;width:100%;height:28px;min-height:28px;
  border:0;border-radius:0;overflow:visible;touch-action:none;cursor:crosshair;
  user-select:none;-webkit-user-select:none;
}
.ride-gpt-ui .route-surface-track {display:flex;height:100%;width:100%;overflow:hidden;border-radius:0;}
.ride-gpt-ui .route-surface-track>span {
  display:flex;align-items:center;justify-content:center;flex:none;min-width:0;height:100%;
  overflow:hidden;white-space:nowrap;font-size:10px;font-weight:500;line-height:1;
  color:#283032;background:var(--surface-unknown);
}
.ride-gpt-ui .route-surface-track>.route-surface-paved {background:var(--surface-paved);color:#fff;}
.ride-gpt-ui .route-surface-track>[data-surface^="concrete"] {background:var(--surface-unpaved);color:#283032;}
.ride-gpt-ui .route-surface-track>:is([data-surface="paving_stones"],[data-surface="sett"],[data-surface="cobblestone"],[data-surface="unhewn_cobblestone"]) {background:var(--surface-other);color:#283032;}
.ride-gpt-ui .route-surface-track>.route-surface-unpaved {background:var(--surface-unpaved);}
.ride-gpt-ui .route-surface-track>.route-surface-gravel {background:var(--surface-gravel);}
.ride-gpt-ui .route-surface-track>.route-surface-other {background:var(--surface-other);}
.ride-gpt-ui .route-surface-track>.route-surface-unknown {background:var(--surface-unknown);}
:is([data-theme="dark"],.theme-dark) .route-surface-track>.route-surface-paved {color:#202728;}
.ride-gpt-ui .route-surface-bar:focus-visible {outline:2px solid var(--ink);outline-offset:4px;}
.ride-gpt-ui .route-surface-position {
  position:absolute;top:-9px;bottom:-3px;width:1px;height:auto!important;
  background:var(--ink);transform:translateX(-50%);pointer-events:none;
}
.ride-gpt-ui .route-surface-position::after {
  content:"";position:absolute;top:calc(50% + 2px);left:50%;width:7px;height:7px;
  border:1.5px solid var(--ink);background:var(--white,var(--bg));border-radius:50%;transform:translate(-50%,-50%);
}
.ride-gpt-ui .route-surface-axes {display:flex;justify-content:space-between;position:absolute;left:0;right:0;top:calc(100% + 5px);font-size:9px;line-height:1.3;color:var(--muted);pointer-events:none;}
.ride-gpt-ui .route-surface-inspector .route-surface-status {font-size:10px;line-height:1.4;margin:0 0 7px;color:var(--muted);}
.ride-gpt-ui .route-surface-inspector [hidden] {display:none!important;}
.ride-gpt-ui .route-elevation-readout {
  top:0;padding:5px 10px;border:1px solid var(--soft-line);border-radius:4px;
  background:var(--white,var(--bg));color:var(--ink);font-size:10px;line-height:1.3;font-weight:500;
}
.ride-gpt-ui .route-surface-readout {
  position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);padding:5px 10px;
  border:1px solid var(--soft-line);border-radius:4px;background:var(--white,var(--bg));
  color:var(--ink);font-size:10px;line-height:1.3;font-weight:500;white-space:nowrap;pointer-events:none;
}
.ride-gpt-ui .route-elevation-cursor {stroke-dasharray:none;stroke-width:1;}
.ride-gpt-ui .route-elevation-dot {r:2.5;stroke-width:1;}
.ride-gpt-ui .elevation-position-marker {
  width:18px!important;height:18px!important;min-width:0!important;min-height:0!important;
  border:2px solid var(--ink)!important;border-radius:50%!important;background:var(--white,var(--bg))!important;
  padding:0!important;box-shadow:none!important;pointer-events:none;
}
/* Decorative inspection markers must outrank the base #mapMarkers button rule. */
.ride-gpt-ui #mapMarkers .elevation-position-marker {pointer-events:none;}
.ride-gpt-ui .elevation-position-marker::before {content:"";position:absolute;width:5px;height:5px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);}
.ride-gpt-ui .elevation-position-marker::after {
  content:attr(data-distance);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  min-width:58px;white-space:nowrap;padding:5px 8px;border:1px solid var(--soft-line);border-radius:4px;
  background:var(--white,var(--bg));color:var(--ink);font-size:10px;line-height:1.25;font-weight:500;
}
@media(max-width:700px){
  .ride-gpt-ui .route-surface-inspector .route-surface-bar{height:23px;min-height:23px;}
  .ride-gpt-ui .route-surface-track>span{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){.ride-gpt-ui .route-surface-inspector *{transition:none!important;}}