/* An intentionally simple view of the route, without chart axes or a grid. */
.rg-elevation { --profile-line: #ad591e; scroll-margin-top: 115px; }
.rg-elevation .rg-elevation__heading h2 { margin: 10px 0 0; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.2; }
.rg-elevation__stage { position: relative; height: 220px; margin-top: 25px; border-radius: 12px; isolation: isolate; }
.rg-elevation__stage[role="slider"] { cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; scroll-margin-top: 115px; }
.rg-elevation__stage > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rg-elevation__line { fill: none; stroke: var(--profile-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rg-elevation__dot, .rg-elevation__endpoint, .rg-elevation__cursor {
    position: absolute; z-index: 1; left: var(--point-x); top: var(--point-y);
    width: 9px; height: 9px; border: 2px solid var(--cream-light); border-radius: 50%;
    background: var(--profile-line); transform: translate(-50%, -50%); pointer-events: none;
}
.rg-elevation__label, .rg-elevation__endpoint-label {
    position: absolute; left: clamp(30px, var(--point-x), calc(100% - 30px)); top: var(--point-y);
    color: var(--forest); font-family: var(--sans); font-size: .8rem; font-weight: 750;
    font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; pointer-events: none;
}
.rg-elevation__endpoint { z-index: 2; width: 17px; height: 17px; border-width: 3px; background: var(--forest); }
.rg-elevation__endpoint-label { left: var(--point-x); transform: translate(-50%, 15px); }
.rg-elevation__endpoint-label.is-above { transform: translate(-50%, calc(-100% - 15px)); }
.rg-elevation__label--max { transform: translate(-50%, calc(-100% - 12px)); }
.rg-elevation__label--min { transform: translate(-50%, 13px); }
.rg-elevation__cursor { z-index: 3; width: 11px; height: 11px; background: var(--forest); box-shadow: 0 0 0 4px rgba(25,55,45,.10); }
.rg-elevation__tooltip {
    position: absolute; z-index: 4; left: clamp(42px, var(--point-x), calc(100% - 42px));
    top: max(1px, calc(var(--point-y) - 42px)); transform: translateX(-50%);
    padding: 7px 12px; border-radius: 8px; background: var(--forest); color: #fff;
    font-family: var(--sans); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
    line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 12px rgba(16,37,31,.10); pointer-events: none;
}
.rg-elevation__stage [hidden] { display: none; }
.rg-elevation__ends { display: flex; justify-content: space-between; gap: 16px; padding: 0 10%; color: var(--muted); font-size: .75rem; }
.rg-elevation__note { margin: 15px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
@media (max-width:600px) {
    .rg-elevation__stage { height: 190px; margin-top: 20px; }
    .rg-elevation__label, .rg-elevation__endpoint-label { font-size: .78rem; }
}