/* Ride page: map card, plot card and the portal tokens behind them.
   Loaded after visualize.css and app-ui.css. */

/* The page predates the shared tokens. Mapping its own variables onto them makes everything
   that still reads the old names (cards, buttons, modals, tables) match the rest of the portal. */
:root {
    --wdp-gutter: 236px;
}

.wdv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wdv-card { overflow: hidden; margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--wd-border); border-radius: var(--wd-radius); background: var(--wd-surface); }
.wdv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: .8rem 1.25rem; }
.wdv-toolbar-left, .wdv-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.wdp .wdv-toolbar-right { flex: none; flex-wrap: nowrap; }
.wdv-btn, .wdv-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wd-border); border-radius: var(--wd-radius-pill); background: var(--wd-surface-raised); color: var(--wd-muted); font: 600 .75rem/1 Roboto, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.wdv-btn { padding: .55rem .85rem; }
.wdv-iconbtn { width: 34px; height: 34px; border-radius: var(--wd-radius-control); font-size: 1rem; }
.wdv-btn:hover, .wdv-iconbtn:hover { color: var(--wd-text); }
.wdv-btn.wdp-active { border-color: rgba(239, 68, 68, .5); color: var(--wd-text); }
#plotReset:not(.wdp-active) { opacity: .55; }

/* ---- map ---- */
.map-container.wdv-card { padding: 0; }
.wdv-mapwrap { position: relative; }
#routeMap { height: 460px; border-radius: 0; }
.wdv-legend { position: absolute; right: 14px; bottom: 30px; z-index: 500; display: flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .8rem; border: 1px solid var(--wd-border); border-radius: 10px; background: rgba(14, 19, 26, .92); }
.wdv-legend .map-legend-bar { flex: none; width: 140px; height: 6px; border-radius: 3px; }
.wdv-legend .map-legend-min, .wdv-legend .map-legend-max { min-width: 0; color: var(--wd-muted); font: .65rem "JetBrains Mono", ui-monospace, monospace; }
.wdv-mapwrap .route-probe-panel { position: absolute; top: 14px; left: 14px; z-index: 500; width: min(460px, calc(100% - 28px)); max-height: calc(100% - 28px); margin: 0; overflow: auto; border: 1px solid var(--wd-border); border-radius: 12px; background: rgba(14, 19, 26, .95); }
.wdv-mapwrap .map-focus-indicator { bottom: 3rem; }

.map-position-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #05080d; background: #f5f7fa; box-shadow: 0 0 0 4px rgba(245, 247, 250, .24); }
.map-position-dot.pinned { width: 18px; height: 18px; background: #07090d; border: 3px solid var(--wd-caution); box-shadow: 0 0 0 4px rgba(251, 191, 36, .3); animation: none; }

.wdv-elev { padding: .55rem 1.25rem .15rem; border-top: 1px solid var(--wd-border); background: #0c1118; }
.wdv-elev[hidden] { display: none; }
.wdv-elev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.wdv-cap { color: var(--wd-muted); font: 700 .62rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.wdv-elev-summary { color: var(--wd-muted); font-size: .68rem; }
#mapElevation { min-height: 96px; }

.map-container .map-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem 2rem; margin: 0; padding: .9rem 1.25rem; border-top: 1px solid var(--wd-border); background: var(--wd-surface); }
.map-container .map-stat { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: .6rem; text-align: left; }
.map-container .map-stat-value { color: var(--wd-text); font: 700 .85rem "JetBrains Mono", ui-monospace, monospace; }
.map-container .map-stat-label { margin: 0; color: var(--wd-muted); font: 700 .6rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }

/* ---- plot ---- */
.wdp { margin-bottom: 1.5rem; }
.wdp-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.wdp-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .65rem; border: 1px solid var(--wd-border); border-radius: 999px; background: transparent; color: var(--wd-muted); font: 600 .7rem/1 Roboto, ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.wdp-chip--on { background: rgba(255, 255, 255, .05); color: var(--wd-text); }
.wdp-chip:not(.wdp-chip--on) .wdp-swatch { opacity: .35; }
.wdp-swatch { display: inline-block; flex: none; width: 10px; height: 3px; border-radius: 2px; }
.wdp-cursor { flex: none; width: 24ch; min-height: 1.1em; overflow: hidden; white-space: nowrap; color: var(--wd-text); font: 700 .72rem "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; }

.wdp-overview { display: flex; border-top: 1px solid var(--wd-border); background: #0c1118; }
.wdp-overview-cap { flex: 0 0 var(--wdp-gutter); width: var(--wdp-gutter); padding: 1.1rem 1rem 0 1.5rem; color: var(--wd-muted); font: 700 .6rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.wdp-overview-host { flex: 1; min-width: 0; }
.wdp-overview .u-select { border-radius: 4px; background: rgba(96, 165, 250, .14); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .75); }

.wdp-row { display: flex; min-width: 0; border-top: 1px solid var(--wd-border); }
.wdp-gutter { display: flex; flex: 0 0 var(--wdp-gutter); width: var(--wdp-gutter); flex-direction: column; gap: .3rem; padding: .9rem 1rem .6rem 1.5rem; }
.wdp-head { display: flex; align-items: center; gap: .5rem; }
.wdp-name { color: var(--wd-muted); font: 700 .64rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.wdp-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.wdp-num { color: var(--wd-text); font: 700 1.75rem/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: -.04em; }
.wdp-value--secondary .wdp-num { color: #c5cedb; font-size: 1.05rem; }
.wdp-idle .wdp-num { color: var(--wd-muted); }
.wdp-unit { color: var(--wd-muted); font: .7rem "JetBrains Mono", ui-monospace, monospace; }
.wdp-tag { font: 700 .58rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.wdp-stats { display: flex; gap: .75rem; margin-top: auto; color: #c5cedb; font: 700 .62rem "JetBrains Mono", ui-monospace, monospace; }
.wdp-stat i { margin-right: .25rem; color: var(--wd-muted); font-style: normal; font-weight: 500; }
.wdp-plot { position: relative; flex: 1; min-width: 0; }
.wdp .u-over, .wdv-elev .u-over { touch-action: pan-y; }
.wdp .u-select { background: rgba(96, 165, 250, .12); }
.wdp .u-cursor-x, .wdv-elev .u-cursor-x { border-right: 1px solid rgba(245, 247, 250, .42); }
.wdp-hint { margin: 0; padding: .6rem 1.5rem .8rem; border-top: 1px solid var(--wd-border); color: var(--wd-muted); font-size: .7rem; }

@media (max-width: 760px) {
    :root { --wdp-gutter: 100%; }
    .wdp-overview-cap { display: none; }
    .wdp-row { flex-direction: column; }
    .wdp-gutter { width: auto; flex: none; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .75rem 1rem 0; }
    .wdp-stats { margin: 0 0 0 auto; }
    .wdp-num { font-size: 1.35rem; }
    #routeMap { height: 340px; }
    .wdv-toolbar { padding: .7rem 1rem; }
    .wdv-toolbar-left, .wdv-toolbar-right { width: 100%; flex-wrap: nowrap; }
    .wdv-toolbar .wd-seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .wdv-toolbar .wd-seg button { flex: none; white-space: nowrap; }
    .wdv-toolbar .wd-seg-cap { display: none; }
    .wdv-toolbar-right .wd-seg { flex: 1; min-width: 0; }
    .wdp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .wdp-chip { flex: none; }
    .wdp .wdv-toolbar-left { flex-direction: column; align-items: stretch; }
    .wdp .wdv-toolbar-right { justify-content: space-between; }
    .wdv-legend { right: 8px; bottom: 26px; }
    .wdv-legend .map-legend-bar { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .map-position-dot { animation: none; }
}