.route-test-banner{margin:0 0 18px;padding:14px 16px;border:1px solid rgba(245,158,11,.55);border-radius:14px;background:rgba(245,158,11,.12);color:#fff7dd;line-height:1.5}.route-test-banner strong{color:#fff}.route-button{background:linear-gradient(180deg,#ff9d24 0%,#b85d00 100%);border:0;color:#fff!important}.route-button:hover,.route-button:focus{filter:brightness(1.08);text-decoration:none}.route-button-unavailable{opacity:.55;cursor:not-allowed}.route-viewer-page{display:grid;gap:18px}.route-viewer-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}.route-viewer-heading h2{margin:4px 0 8px;font-size:clamp(26px,4vw,40px);line-height:1.1}.route-test-badge{display:inline-flex;margin:0;padding:6px 10px;border:1px solid rgba(245,158,11,.6);border-radius:999px;background:rgba(245,158,11,.14);color:#ffd99e;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.route-viewer-subtitle{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;color:#d9e8fb}.route-viewer-heading-actions{display:flex;gap:10px;flex-wrap:wrap}.route-token-warning{margin:0}.route-viewer-shell{position:relative;min-height:620px;border:1px solid #24496f;border-radius:18px;overflow:hidden;background:#020817;box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 28px rgba(30,144,255,.13)}.route-cesium-container{position:absolute;inset:0}.route-loading{position:absolute;z-index:6;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:calc(100% - 40px);padding:14px 18px;border:1px solid #315a86;border-radius:14px;background:rgba(2,8,23,.92);color:#fff;font-weight:800;text-align:center}.route-loading.is-error{border-color:rgba(239,68,68,.75);color:#fecaca}.route-telemetry{position:absolute;z-index:5;top:14px;left:14px;display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:8px;max-width:calc(100% - 28px);padding:10px;border:1px solid rgba(75,112,151,.75);border-radius:14px;background:rgba(2,8,23,.82);backdrop-filter:blur(8px)}.route-telemetry>div{min-width:0;padding:8px 10px;border-radius:10px;background:rgba(11,27,51,.82)}.route-telemetry-label{display:block;margin-bottom:4px;color:#9fb6d3;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.route-telemetry strong{display:block;color:#fff;font-size:16px;white-space:nowrap}.route-controls{position:absolute;z-index:5;left:14px;right:14px;bottom:54px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border:1px solid rgba(75,112,151,.75);border-radius:14px;background:rgba(2,8,23,.82);backdrop-filter:blur(8px)}.route-controls button{min-height:38px;padding:9px 12px}.route-speed-control{display:flex;align-items:center;gap:8px;margin-left:auto;color:#d7e6f8;font-size:13px;font-weight:800}.route-speed-control select{min-height:38px;border:1px solid #315a86;border-radius:9px;background:#071426;color:#fff;padding:7px 10px}.route-viewer-note{padding:14px 16px;border:1px solid #1d3b5f;border-radius:14px;background:#071426;color:#c9d8ec;line-height:1.5}.route-viewer-note p{margin:0}.route-error-card{max-width:760px;margin:0 auto}.cesium-viewer-bottom{bottom:0!important}.cesium-viewer-timelineContainer{left:0!important;right:0!important}.cesium-viewer-animationContainer{display:none!important}.cesium-viewer-timelineContainer{left:0!important}.route-cesium-credits{min-height:34px;margin-top:8px;padding:6px 10px;border:1px solid #24496f;border-radius:10px;background:#020817;color:#fff;overflow-x:auto;line-height:1.35}.route-cesium-credits:empty{display:none}.route-cesium-credits .cesium-widget-credits{position:static!important;inset:auto!important;display:flex!important;align-items:center;flex-wrap:wrap;gap:4px;min-height:20px;padding:0!important;white-space:normal!important}.route-cesium-credits a{color:#d8ecff!important;text-decoration:none}.route-cesium-credits a:hover,.route-cesium-credits a:focus{color:#fff!important;text-decoration:underline}.route-cesium-container .cesium-widget-credits{bottom:42px!important}.route-backfill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.route-backfill-stat{padding:16px;border:1px solid #24496f;border-radius:14px;background:#071426}.route-backfill-stat span{display:block;color:#9fb6d3;font-size:12px;font-weight:800;text-transform:uppercase}.route-backfill-stat strong{display:block;margin-top:6px;font-size:28px}.route-backfill-log{max-height:420px;overflow:auto;padding:12px;border:1px solid #24496f;border-radius:12px;background:#020817}.route-backfill-log table{width:100%;border-collapse:collapse}.route-backfill-log th,.route-backfill-log td{padding:8px;border-bottom:1px solid #163452;text-align:left;vertical-align:top}.route-backfill-log .ok{color:#86efac}.route-backfill-log .error{color:#fca5a5}@media(max-width:760px){.route-viewer-shell{min-height:560px;border-radius:14px}.route-telemetry{grid-template-columns:repeat(3,minmax(0,1fr));left:8px;right:8px;top:8px;max-width:none;padding:7px;gap:5px}.route-telemetry>div{padding:7px}.route-telemetry-label{font-size:9px}.route-telemetry strong{font-size:13px}.route-controls{left:8px;right:8px;bottom:46px;padding:8px;gap:6px}.route-controls button{flex:1 1 auto;font-size:12px;padding:8px}.route-speed-control{width:100%;margin-left:0;justify-content:space-between}.route-viewer-heading-actions{width:100%}.route-viewer-heading-actions .button{flex:1 1 auto}.route-backfill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.route-viewer-shell{min-height:520px}.route-telemetry{grid-template-columns:1fr 1fr}.route-telemetry>div:first-child{grid-column:1/-1}.route-backfill-grid{grid-template-columns:1fr}}

/* Phase 2: multi-route comparison and explicit 3D camera controls. */
.route-viewer-fullscreen{min-width:0}.route-controls-help{display:grid;gap:8px}.route-controls-help p{margin:0}.route-compare-select{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-weight:800;color:#dcecff}.route-compare-select input{width:18px;height:18px;margin:0;accent-color:#ff8a00}.route-compare-select span{font-size:12px}.route-compare-unavailable{color:#64748b}.compare-cell,.compare-heading{text-align:center}.route-compare-bar{position:sticky;z-index:12;bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 6px;padding:14px 16px;border:1px solid rgba(245,158,11,.68);border-radius:16px;background:rgba(2,8,23,.96);box-shadow:0 12px 36px rgba(0,0,0,.55),0 0 24px rgba(245,158,11,.12);backdrop-filter:blur(10px)}.route-compare-bar[hidden]{display:none}.route-compare-bar>div:first-child{min-width:0;display:grid;gap:4px}.route-compare-names{color:#cbdcf2;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-compare-error{min-height:1em;color:#fca5a5;font-size:12px;font-weight:700}.route-compare-bar-actions{display:flex;gap:8px;flex:0 0 auto}.route-compare-bar button{min-height:40px;padding:10px 14px}.route-compare-bar button:disabled{opacity:.5;cursor:not-allowed}.route-compare-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.route-compare-run{display:grid;grid-template-columns:minmax(150px,1fr) minmax(230px,auto) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid #24496f;border-radius:14px;background:linear-gradient(180deg,rgba(11,27,51,.98),rgba(7,20,38,.98))}.route-compare-visible-toggle{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}.route-compare-visible-toggle input{width:18px;height:18px;margin:0;accent-color:var(--route-colour,#ff8a00)}.route-colour-swatch{width:28px;height:8px;flex:0 0 auto;border-radius:999px;background:var(--route-colour);box-shadow:0 0 0 1px rgba(255,255,255,.25)}.route-compare-run-name{display:grid;min-width:0}.route-compare-run-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-compare-run-name small{margin-top:2px;color:#b7c9e6}.route-compare-run-telemetry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#9fb6d3;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.route-compare-run-telemetry>span{white-space:nowrap}.route-compare-run-telemetry strong{color:#fff;font-size:12px;letter-spacing:0;text-transform:none}.route-follow-run{min-height:38px;padding:8px 11px;white-space:nowrap}.route-compare-shell{min-height:680px}.route-compare-time{grid-template-columns:minmax(120px,1fr);width:max-content}.route-compare-time>div{min-width:120px}.route-controls button{white-space:nowrap}.route-viewer-fullscreen:fullscreen,.route-viewer-fullscreen:-webkit-full-screen{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;width:100%;height:100%;padding:10px;background:#000}.route-viewer-fullscreen:fullscreen .route-viewer-shell,.route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell{min-height:0;height:auto;border-radius:10px}.route-viewer-fullscreen:fullscreen .route-cesium-credits,.route-viewer-fullscreen:-webkit-full-screen .route-cesium-credits{margin:0}.route-viewer-fullscreen:fullscreen .route-controls,.route-viewer-fullscreen:-webkit-full-screen .route-controls{bottom:54px}.route-viewer-fullscreen .cesium-navigation-help{z-index:20}
@media(max-width:980px){.route-compare-legend{grid-template-columns:1fr}.route-compare-run{grid-template-columns:minmax(150px,1fr) minmax(210px,auto) auto}}
@media(max-width:760px){.route-compare-bar{bottom:6px;align-items:stretch;flex-direction:column;gap:10px}.route-compare-bar-actions{width:100%}.route-compare-bar-actions button{flex:1}.route-compare-select span{font-size:11px}.route-compare-run{grid-template-columns:1fr auto;gap:10px}.route-compare-run-telemetry{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.route-compare-run-telemetry>span{display:grid;gap:2px;padding:7px;border-radius:8px;background:rgba(2,8,23,.65)}.route-follow-run{grid-column:2;grid-row:1}.route-compare-shell{min-height:650px}.route-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:190px;overflow:auto}.route-controls button{width:100%}.route-speed-control{grid-column:1/-1}.route-viewer-fullscreen:fullscreen .route-controls,.route-viewer-fullscreen:-webkit-full-screen .route-controls{bottom:46px}}
@media(max-width:480px){.route-compare-run{padding:10px}.route-compare-run-telemetry{grid-template-columns:1fr}.route-compare-shell{min-height:620px}.route-colour-swatch{width:22px}.route-compare-bar{padding:12px}.route-compare-names{white-space:normal}}

/* Phase 2.1: persistent 3D selection bar and clearer Cesium attribution. */
.route-map-selection-bar{display:flex}
.route-map-selection-bar[hidden]{display:flex}
.route-compare-select{min-width:32px;min-height:32px}
.route-compare-select input{width:20px;height:20px}
.route-compare-bar button:disabled{opacity:.5;cursor:not-allowed}
.route-cesium-credits{min-height:40px;padding:8px 12px;overflow-x:visible;overflow-wrap:anywhere}
.route-cesium-credits .cesium-widget-credits{font-size:12px!important;line-height:1.4}
.route-cesium-credits .cesium-credit-logoContainer{flex:0 0 auto}
@media(max-width:760px){.route-map-selection-bar{position:sticky}.route-compare-select{min-width:38px;min-height:38px}.route-compare-select input{width:22px;height:22px}}

/* Phase 2.2: place Cesium fullscreen beside navigation help and reorder mobile map selection. */
.route-viewer-fullscreen .cesium-viewer-toolbar{
    right:44px!important;
}
.route-viewer-fullscreen .cesium-viewer-fullscreenContainer{
    top:5px!important;
    right:5px!important;
    bottom:auto!important;
    width:32px!important;
    height:32px!important;
}
.route-viewer-fullscreen .cesium-viewer-fullscreenContainer .cesium-button{
    width:32px!important;
    height:32px!important;
}
@media(max-width:760px){
    .results-table td.compare-cell{
        order:1!important;
        grid-column:1/-1!important;
    }
    .results-table td.actions-cell{
        order:2!important;
    }
}

/* Phase 2.3: align fullscreen, overlay Cesium attribution, and fix mobile row order. */
.route-viewer-fullscreen .cesium-viewer-fullscreenContainer{
    top:6px!important;
}
.route-viewer-shell .route-cesium-credits{
    position:absolute;
    z-index:7;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:max-content;
    max-width:min(440px,42%);
    min-height:34px;
    margin:0;
    padding:6px 10px;
    border:1px solid rgba(75,112,151,.78);
    border-radius:10px;
    background:rgba(2,8,23,.86);
    color:#fff;
    overflow:visible;
    overflow-wrap:anywhere;
    line-height:1.35;
    backdrop-filter:blur(8px);
    box-shadow:0 5px 18px rgba(0,0,0,.32);
}
.route-viewer-shell .route-cesium-credits .cesium-widget-credits{
    justify-content:center;
    text-align:center;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    display:block;
    padding:10px;
}
.route-viewer-fullscreen:fullscreen .route-viewer-shell,
.route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell{
    width:100%;
    height:100%;
}
@media(max-width:990px){
    .results-table td.compare-cell{
        order:98!important;
        grid-column:1/-1!important;
    }
    .results-table td.actions-cell{
        order:99!important;
    }
}
@media(max-width:760px){
    .route-viewer-shell .route-cesium-credits{
        top:84px;
        max-width:calc(100% - 24px);
        padding:5px 8px;
    }
    .route-viewer-shell .route-cesium-credits .cesium-widget-credits{
        font-size:11px!important;
    }
}
@media(max-width:480px){
    .route-viewer-shell:not(.route-compare-shell) .route-cesium-credits{
        top:126px;
    }
}

/* Phase 2.4: polished results layout, persistent route chooser, and centred attribution above the map. */
.route-map-selection-bar{
    position:relative!important;
    bottom:auto!important;
    margin:18px 0 20px;
}
.route-map-selection-bar .route-compare-names{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}

.route-viewer-fullscreen{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:6px;
}
.route-viewer-fullscreen .route-cesium-credits-above{
    position:static;
    z-index:auto;
    top:auto;
    left:auto;
    transform:none;
    display:flex;
    justify-content:center;
    width:fit-content;
    max-width:100%;
    min-height:30px;
    margin:0 auto;
    padding:4px 9px;
    border:1px solid rgba(75,112,151,.68);
    border-radius:9px;
    background:rgba(2,8,23,.92);
    color:#fff;
    overflow:visible;
    overflow-wrap:anywhere;
    line-height:1.3;
    box-shadow:none;
    backdrop-filter:none;
}
.route-viewer-fullscreen .route-cesium-credits-above .cesium-widget-credits{
    justify-content:center;
    text-align:center;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
    gap:6px;
}
.route-viewer-fullscreen:fullscreen .route-viewer-shell,
.route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell{
    min-height:0;
    height:auto;
}

@media(max-width:990px){
    .results-table td.uploaded-cell{
        order:97!important;
        grid-column:1/-1!important;
    }
    .results-table td.compare-cell{
        order:98!important;
        grid-column:1/-1!important;
    }
    .results-table td.actions-cell{
        order:99!important;
        grid-column:1/-1!important;
    }
}

@media(max-width:760px){
    .route-map-selection-bar{
        position:relative!important;
        bottom:auto!important;
        margin:16px 0 18px;
    }
    .route-viewer-fullscreen .route-cesium-credits-above{
        max-width:calc(100% - 16px);
        padding:4px 7px;
    }
    .route-viewer-fullscreen .route-cesium-credits-above .cesium-widget-credits{
        font-size:11px!important;
    }
}


/* Phase 2.5: credits below the map, split control docks, and toolbar-aligned fullscreen. */
.route-viewer-fullscreen{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:8px!important;
}
.route-viewer-fullscreen .route-cesium-credits-below{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    justify-self:start;
    display:block;
    width:fit-content;
    max-width:100%;
    min-height:34px;
    margin:0!important;
    padding:6px 10px;
    border:1px solid #24496f;
    border-radius:10px;
    background:#020817;
    color:#fff;
    overflow-x:auto;
    overflow-wrap:anywhere;
    line-height:1.35;
    box-shadow:none;
    backdrop-filter:none;
}
.route-viewer-fullscreen .route-cesium-credits-below:empty{
    display:none;
}
.route-viewer-fullscreen .route-cesium-credits-below .cesium-widget-credits{
    justify-content:flex-start!important;
    text-align:left!important;
    font-size:12px!important;
}
.route-control-dock{
    position:absolute;
    z-index:5;
    left:14px;
    right:14px;
    bottom:54px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    pointer-events:none;
}
.route-control-dock .route-controls{
    position:static!important;
    inset:auto!important;
    bottom:auto!important;
    margin:0;
    width:auto;
    right:auto!important;
    left:auto!important;
    pointer-events:auto;
}
.route-controls-main{
    flex:0 1 auto;
    max-width:calc(100% - 150px);
}
.route-controls-playback{
    flex:0 0 auto;
}
.route-controls-playback .route-speed-control{
    width:auto;
    margin:0;
    white-space:nowrap;
}
.route-viewer-fullscreen .cesium-viewer-toolbar{
    top:5px!important;
    right:5px!important;
    display:flex!important;
    align-items:center!important;
    gap:5px;
}
.route-viewer-fullscreen .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper,
.route-viewer-fullscreen .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-button,
.route-viewer-fullscreen .cesium-viewer-toolbar .route-fullscreen-toolbar-item,
.route-viewer-fullscreen .cesium-viewer-toolbar .route-fullscreen-toolbar-item .cesium-button{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    min-height:32px!important;
    margin:0!important;
}
.route-viewer-fullscreen .cesium-viewer-toolbar .route-fullscreen-toolbar-item{
    position:static!important;
    inset:auto!important;
    bottom:auto!important;
    top:auto!important;
    right:auto!important;
    display:block!important;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:8px!important;
}
.route-viewer-fullscreen:fullscreen .route-control-dock,
.route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
    bottom:54px;
}
@media(max-width:760px){
    .route-control-dock{
        left:8px;
        right:8px;
        bottom:46px;
        flex-direction:column;
        align-items:stretch;
        gap:7px;
    }
    .route-controls-main{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:none;
        width:100%!important;
        max-height:150px;
        overflow:auto;
    }
    .route-controls-main button{
        width:100%;
    }
    .route-controls-playback{
        align-self:flex-end;
        width:auto!important;
    }
    .route-controls-playback .route-speed-control{
        width:auto;
        justify-content:flex-start;
    }
    .route-viewer-fullscreen .route-cesium-credits-below{
        max-width:100%;
        padding:6px 8px;
    }
    .route-viewer-fullscreen .route-cesium-credits-below .cesium-widget-credits{
        font-size:11px!important;
    }
    .route-viewer-fullscreen:fullscreen .route-control-dock,
    .route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
        bottom:46px;
    }
}

/* Phase 2.6: keep the Cesium toolbar clear of the single-route telemetry panel. */
.route-viewer-shell .route-telemetry:not(.route-compare-time){
    right:88px;
    max-width:none;
}
@media(max-width:760px){
    .route-viewer-shell .route-telemetry:not(.route-compare-time){
        top:48px;
        left:8px;
        right:8px;
    }
}

/* Phase 3: stable telemetry, section scoring and a synced elevation/score window. */
.route-viewer-fullscreen{
    grid-template-rows:minmax(0,1fr) auto auto!important;
}
.route-telemetry:not(.route-compare-time){
    grid-template-columns:repeat(4,minmax(108px,1fr));
}
.route-telemetry strong,
.route-compare-run-telemetry strong,
.route-window-readout strong,
.route-window-score-item b,
.route-section-table{
    font-variant-numeric:tabular-nums lining-nums;
}
.route-telemetry strong{
    min-width:9ch;
}
.route-telemetry .is-finished,
.route-compare-run-telemetry .is-finished{
    color:#86efac!important;
}
.route-compare-run{
    grid-template-columns:minmax(130px,1fr) minmax(300px,auto) auto;
}
.route-compare-run.is-route-hidden{
    opacity:.56;
}
.route-compare-run-telemetry{
    display:grid;
    grid-template-columns:repeat(4,minmax(66px,1fr));
    gap:6px;
    width:100%;
}
.route-compare-run-telemetry>span{
    display:grid;
    gap:2px;
    min-width:0;
    padding:7px 8px;
    border-radius:8px;
    background:rgba(2,8,23,.65);
}
.route-compare-run-telemetry strong{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.route-compare-run-telemetry>span:nth-child(1) strong{min-width:8ch}
.route-compare-run-telemetry>span:nth-child(2) strong{min-width:8ch}
.route-analysis-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
}
.route-analysis-heading>strong,
.route-analysis-heading h3{
    color:#fff;
}
.route-analysis-heading>span,
.route-section-heading p{
    color:#9fb6d3;
    font-size:13px;
}
.route-section-heading h3{
    margin:0 0 4px;
    font-size:22px;
}
.route-section-heading p{
    margin:0;
}
.route-elevation-panel{
    display:grid;
    gap:9px;
    padding:12px 14px;
    border:1px solid #24496f;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(7,20,38,.99),rgba(3,11,22,.99));
    min-width:0;
}
.route-profile-chart-wrap{
    position:relative;
    min-width:0;
    height:140px;
    overflow:hidden;
    border:1px solid rgba(75,112,151,.72);
    border-radius:9px;
    background:#030b16;
    cursor:crosshair;
}
.route-compare-elevation-panel .route-profile-chart-wrap{
    height:160px;
}
.route-profile-chart-wrap canvas{
    display:block;
    width:100%;
    height:100%;
}
.route-profile-range-layer{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.route-profile-range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    pointer-events:none;
}
.route-profile-range::-webkit-slider-runnable-track{
    height:2px;
    background:transparent;
}
.route-profile-range::-webkit-slider-thumb{
    width:18px;
    height:30px;
    margin-top:-14px;
    border:2px solid #071426;
    border-radius:5px;
    background:#86efac;
    box-shadow:0 0 0 1px rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.5);
    -webkit-appearance:none;
    appearance:none;
    pointer-events:auto;
    cursor:ew-resize;
}
.route-profile-range::-moz-range-track{
    height:2px;
    background:transparent;
}
.route-profile-range::-moz-range-thumb{
    width:16px;
    height:28px;
    border:2px solid #071426;
    border-radius:5px;
    background:#86efac;
    box-shadow:0 0 0 1px rgba(255,255,255,.5),0 3px 10px rgba(0,0,0,.5);
    pointer-events:auto;
    cursor:ew-resize;
}
.route-profile-range-start{z-index:2}
.route-profile-range-end{z-index:3}
.route-window-readout{
    display:flex;
    align-items:center;
    gap:10px 18px;
    flex-wrap:wrap;
    color:#9fb6d3;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.route-window-readout span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.route-window-readout strong{
    color:#fff;
    font-size:13px;
    letter-spacing:0;
    text-transform:none;
}
.route-window-scores{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}
.route-window-score-item{
    display:inline-grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    min-width:150px;
    padding:7px 9px;
    border:1px solid rgba(75,112,151,.6);
    border-radius:9px;
    background:rgba(2,8,23,.7);
    font-size:12px;
}
.route-window-score-item .route-colour-swatch{
    width:18px;
    height:6px;
}
.route-window-score-item strong{
    overflow:hidden;
    color:#dbeafe;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.route-window-score-item b{
    color:#86efac;
}
.route-section-score-card{
    min-width:0;
    padding:16px;
    border:1px solid #24496f;
    border-radius:16px;
    background:linear-gradient(180deg,rgba(11,27,51,.98),rgba(7,20,38,.98));
}
.route-section-table-wrap{
    max-width:100%;
    margin-top:13px;
    overflow:auto;
    border:1px solid #1d3b5f;
    border-radius:10px;
}
.route-section-table{
    width:100%;
    min-width:920px;
    border-collapse:collapse;
    font-size:13px;
}
.route-section-table th,
.route-section-table td{
    padding:9px 10px;
    border-bottom:1px solid #163452;
    text-align:right;
    white-space:nowrap;
}
.route-section-table th{
    position:sticky;
    top:0;
    z-index:1;
    background:#0b1b33;
    color:#b7c9e6;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.route-section-table th:first-child,
.route-section-table td:first-child{
    text-align:left;
}
.route-section-table tbody tr:last-child td{
    border-bottom:0;
}
.route-section-table tbody tr:hover td{
    background:rgba(30,144,255,.07);
}
.route-compare-section-tables{
    display:grid;
    gap:9px;
    margin-top:13px;
}
.route-section-run{
    border:1px solid #1d3b5f;
    border-radius:10px;
    background:#071426;
    overflow:hidden;
}
.route-section-run>summary{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px 13px;
    color:#fff;
    cursor:pointer;
    list-style-position:inside;
}
.route-section-run>summary strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.route-section-run>summary>span:last-child{
    color:#86efac;
    font-variant-numeric:tabular-nums;
}
.route-section-run>.route-section-table-wrap{
    margin:0;
    border-width:1px 0 0;
    border-radius:0;
}
.route-section-run>p{
    margin:0;
    padding:12px 14px;
    color:#c9d8ec;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    grid-template-rows:minmax(0,1fr) auto auto!important;
    gap:0!important;
    padding:0!important;
    background:#000;
}
.route-viewer-fullscreen:fullscreen .route-viewer-shell,
.route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell,
.route-viewer-fullscreen:fullscreen .route-elevation-panel,
.route-viewer-fullscreen:-webkit-full-screen .route-elevation-panel,
.route-viewer-fullscreen:fullscreen .route-cesium-credits-below,
.route-viewer-fullscreen:-webkit-full-screen .route-cesium-credits-below{
    border-right:0!important;
    border-left:0!important;
    border-radius:0!important;
}
.route-viewer-fullscreen:fullscreen .route-viewer-shell,
.route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell{
    border-top:0!important;
}
.route-viewer-fullscreen:fullscreen .route-elevation-panel,
.route-viewer-fullscreen:-webkit-full-screen .route-elevation-panel{
    border-bottom:0!important;
}
.route-viewer-fullscreen:fullscreen .route-cesium-credits-below,
.route-viewer-fullscreen:-webkit-full-screen .route-cesium-credits-below{
    width:100%;
    max-width:none;
    border-bottom:0!important;
}

@media(max-width:980px){
    .route-compare-run{
        grid-template-columns:minmax(130px,1fr) minmax(280px,auto) auto;
    }
}
@media(max-width:760px){
    .route-telemetry:not(.route-compare-time){
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .route-viewer-shell .route-telemetry:not(.route-compare-time){
        top:48px;
    }
    .route-compare-run{
        grid-template-columns:minmax(0,1fr) auto;
    }
    .route-compare-run-telemetry{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .route-profile-chart-wrap,
    .route-compare-elevation-panel .route-profile-chart-wrap{
        height:120px;
    }
    .route-elevation-panel{
        padding:10px;
        border-radius:11px;
    }
    .route-window-score-item{
        flex:1 1 160px;
    }
    .route-section-score-card{
        padding:12px;
    }
}
@media(max-width:480px){
    .route-telemetry:not(.route-compare-time)>div:first-child{
        grid-column:auto;
    }
    .route-compare-run-telemetry{
        grid-template-columns:1fr 1fr;
    }
    .route-window-readout{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .route-window-readout span:last-child{
        grid-column:1/-1;
    }
}

/* Phase 3.1: simplified viewer controls and top-left control help. */
.route-control-dock{
    justify-content:space-between;
}
.route-controls-follow{
    flex:0 0 auto;
}
.route-controls-right{
    margin-left:auto!important;
    max-width:none;
}
.route-play-button{
    border:0;
    background:linear-gradient(180deg,#ff9d24 0%,#b85d00 100%);
    color:#fff!important;
    box-shadow:0 6px 18px rgba(245,158,11,.24);
}
.route-play-button:hover,
.route-play-button:focus{
    color:#fff!important;
    filter:brightness(1.08);
}
.route-viewer-fullscreen .cesium-viewer-toolbar{
    top:5px!important;
    right:5px!important;
    left:5px!important;
    width:auto!important;
    justify-content:flex-end!important;
    pointer-events:none;
}
.route-viewer-fullscreen .cesium-viewer-toolbar>*{
    pointer-events:auto;
}
.route-viewer-fullscreen .cesium-navigationHelpButton-wrapper{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    margin:0!important;
}
.route-viewer-fullscreen .cesium-navigationHelpButton-wrapper .cesium-navigation-help{
    right:auto!important;
    left:0!important;
}
.route-viewer-shell .route-telemetry{
    left:52px;
}
.route-section-table{
    min-width:720px;
}
@media(max-width:760px){
    .route-control-dock{
        align-items:stretch;
    }
    .route-controls-follow{
        align-self:flex-start;
        width:auto!important;
    }
    .route-controls-right{
        align-self:flex-end;
        width:auto!important;
        max-width:100%;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .route-viewer-shell .route-telemetry{
        left:8px;
    }
}

/* Phase 3.2: top-right help, renamed 3D control, and external replay timeline. */
.route-viewer-fullscreen .cesium-viewer-toolbar{
    top:5px!important;
    right:42px!important;
    left:auto!important;
    width:32px!important;
    justify-content:flex-start!important;
    pointer-events:auto;
}
.route-viewer-fullscreen .cesium-navigationHelpButton-wrapper{
    position:static!important;
    inset:auto!important;
    width:32px!important;
    height:32px!important;
    margin:0!important;
}
.route-viewer-fullscreen .cesium-navigationHelpButton-wrapper .cesium-navigation-help{
    right:0!important;
    left:auto!important;
}
.route-viewer-shell .route-telemetry{
    left:14px;
}
.route-control-dock{
    bottom:14px;
}
.route-timeline-dock{
    position:relative;
    min-width:0;
    height:32px;
    overflow:hidden;
    border:1px solid #24496f;
    border-radius:8px;
    background:#020817;
}
.route-timeline-dock:empty{
    display:none;
}
.route-timeline-dock .cesium-viewer-timelineContainer{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:30px!important;
}
.route-timeline-dock .cesium-timeline-main{
    border:none!important;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    grid-template-rows:minmax(0,1fr) auto auto auto!important;
}
.route-viewer-fullscreen:fullscreen .route-control-dock,
.route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
    bottom:14px;
}
@media(max-width:760px){
    .route-viewer-shell .route-telemetry{
        left:8px;
    }
    .route-control-dock,
    .route-viewer-fullscreen:fullscreen .route-control-dock,
    .route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
        bottom:8px;
    }
    .route-timeline-dock{
        height:30px;
        border-radius:6px;
    }
    .route-timeline-dock .cesium-viewer-timelineContainer{
        height:28px!important;
    }
}

/* Phase 3.3: corrected top-view orientation and square mobile map edges. */
@media(max-width:760px){
    .route-viewer-shell,
    .route-viewer-fullscreen:fullscreen .route-viewer-shell,
    .route-viewer-fullscreen:-webkit-full-screen .route-viewer-shell{
        border-radius:0!important;
    }
}


/* Phase 3.5: compact single-route controls and map action row. */
.route-attribution-actions-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
}
.route-attribution-actions-row .route-cesium-credits{
    flex:1 1 auto;
    min-width:0;
    margin-top:8px;
}
.route-viewer-map-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex:0 0 auto;
    margin-top:8px;
}
.route-viewer-map-actions .button{
    min-height:40px;
    padding:10px 13px;
}
.route-controls-single{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center;
    width:auto!important;
    max-width:100%!important;
    overflow:visible!important;
}
.route-controls-single button{
    flex:0 0 auto!important;
    width:auto!important;
}
@media(max-width:760px){
    .route-control-dock{
        flex-direction:row!important;
        align-items:flex-end!important;
        justify-content:flex-end!important;
    }
    .route-controls-single{
        display:flex!important;
        grid-template-columns:none!important;
        flex-wrap:nowrap!important;
        gap:4px!important;
        padding:6px!important;
        width:auto!important;
        max-width:calc(100vw - 16px)!important;
        overflow:visible!important;
    }
    .route-controls-single button{
        flex:0 1 auto!important;
        min-width:0!important;
        width:auto!important;
        min-height:34px!important;
        padding:7px 8px!important;
        font-size:11px!important;
        line-height:1!important;
        white-space:nowrap!important;
    }
    .route-attribution-actions-row{
        align-items:center;
        gap:8px;
    }
    .route-attribution-actions-row .route-cesium-credits{
        flex:1 1 0;
    }
    .route-viewer-map-actions{
        gap:5px;
        flex-wrap:nowrap;
    }
    .route-viewer-map-actions .button{
        min-height:36px;
        padding:8px 9px;
        font-size:11px;
        white-space:nowrap;
    }
}
@media(max-width:420px){
    .route-attribution-actions-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
    }
    .route-controls-single{
        gap:3px!important;
        padding:5px!important;
    }
    .route-controls-single button{
        padding:7px 6px!important;
        font-size:10.5px!important;
    }
    .route-viewer-map-actions .button{
        padding:8px 7px;
        font-size:10px;
    }
}


/* Phase 3.6: place comparison player cards beneath the elevation analysis on mobile. */
.route-layout-anchor{display:none!important}
@media(max-width:760px){
    .route-compare-legend.is-mobile-position{
        width:100%;
        grid-template-columns:1fr;
        gap:8px;
    }
    .route-compare-legend.is-mobile-position .route-compare-run{
        border-radius:11px;
    }
}


/* Phase 3.7: square replay timeline container. */
.route-timeline-dock{border-radius:0!important}

/* Phase 3.8: stack mobile help/fullscreen controls beside single-route telemetry. */
@media(max-width:760px){
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar{
        top:8px!important;
        right:8px!important;
        left:auto!important;
        width:40px!important;
        height:auto!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:6px!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper,
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar .cesium-navigationHelpButton-wrapper .cesium-button,
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar .route-fullscreen-toolbar-item,
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar .route-fullscreen-toolbar-item .cesium-button{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        min-height:40px!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-shell .route-telemetry:not(.route-compare-time){
        top:8px!important;
        left:8px!important;
        right:56px!important;
        width:auto!important;
        max-width:none!important;
    }
}

/* Phase 3.9: mobile toolbar separation, compact telemetry and content-sized attribution. */
.route-attribution-actions-row .route-cesium-credits{
    flex:0 1 auto!important;
    width:max-content;
    max-width:100%;
    min-width:0;
}
@media(max-width:760px){
    /* Help and fullscreen are separate Cesium containers. Keep them equal-sized and stacked. */
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar{
        top:8px!important;
        right:8px!important;
        left:auto!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        display:block!important;
        overflow:visible!important;
        z-index:20!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-navigationHelpButton-wrapper,
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-navigationHelpButton-wrapper .cesium-button{
        position:static!important;
        inset:auto!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        margin:0!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-fullscreenContainer{
        top:46px!important;
        right:8px!important;
        bottom:auto!important;
        left:auto!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        z-index:19!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-fullscreenContainer .cesium-button{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        margin:0!important;
    }

    /* Size the four-value panel to its content while reserving room for the icon column. */
    .route-viewer-page:not(.route-compare-page) .route-viewer-shell .route-telemetry:not(.route-compare-time){
        top:8px!important;
        left:8px!important;
        right:auto!important;
        width:max-content!important;
        max-width:calc(100% - 56px)!important;
        grid-template-columns:repeat(2,minmax(112px,max-content))!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-telemetry:not(.route-compare-time)>div{
        min-width:112px;
    }

    .route-attribution-actions-row{
        justify-content:space-between;
    }
    .route-attribution-actions-row .route-cesium-credits{
        flex:0 1 auto!important;
        width:max-content!important;
        max-width:calc(100% - 170px);
        justify-self:start;
    }
}
@media(max-width:420px){
    .route-attribution-actions-row .route-cesium-credits{
        width:max-content!important;
        max-width:100%;
        justify-self:start;
    }
}
@media(max-width:760px){
    .route-viewer-page:not(.route-compare-page) .route-telemetry:not(.route-compare-time)>div:first-child{
        grid-column:auto!important;
    }
}

/* Phase 4.0: compact desktop telemetry and clean mobile help button chrome. */
@media(min-width:761px){
    .route-viewer-page:not(.route-compare-page) .route-viewer-shell .route-telemetry:not(.route-compare-time){
        left:14px!important;
        right:auto!important;
        width:max-content!important;
        max-width:calc(100% - 116px)!important;
        grid-template-columns:repeat(4,minmax(118px,142px))!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-telemetry:not(.route-compare-time)>div{
        min-width:118px;
    }
}
@media(max-width:760px){
    /* Remove the oversized dark toolbar wrapper; only the help button itself is visible. */
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar{
        box-sizing:border-box!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        overflow:visible!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-navigationHelpButton-wrapper{
        box-sizing:border-box!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        overflow:visible!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-navigationHelpButton-wrapper > .cesium-button{
        box-sizing:border-box!important;
        display:block!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        padding:0!important;
        margin:0!important;
        line-height:32px!important;
        border-radius:4px!important;
        overflow:hidden!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-navigationHelpButton-wrapper > .cesium-button svg{
        display:block!important;
        width:32px!important;
        height:32px!important;
        max-width:32px!important;
        max-height:32px!important;
    }
}


/* Phase 4.1: keep comparison playback/view controls on one mobile row. */
.route-controls-compare{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center;
    width:auto!important;
    max-width:100%!important;
    overflow:visible!important;
}
.route-controls-compare button{
    flex:0 0 auto!important;
    width:auto!important;
    white-space:nowrap!important;
}
@media(max-width:760px){
    .route-compare-page .route-control-dock{
        flex-direction:row!important;
        align-items:flex-end!important;
        justify-content:flex-end!important;
    }
    .route-controls-compare{
        display:flex!important;
        grid-template-columns:none!important;
        flex-wrap:nowrap!important;
        gap:4px!important;
        padding:6px!important;
        width:auto!important;
        max-width:calc(100vw - 16px)!important;
        max-height:none!important;
        overflow:visible!important;
    }
    .route-controls-compare button{
        flex:0 1 auto!important;
        min-width:0!important;
        width:auto!important;
        min-height:34px!important;
        padding:7px 8px!important;
        font-size:11px!important;
        line-height:1!important;
        white-space:nowrap!important;
    }
}
@media(max-width:420px){
    .route-controls-compare{
        gap:3px!important;
        padding:5px!important;
    }
    .route-controls-compare button{
        padding:7px 6px!important;
        font-size:10.5px!important;
    }
}

/* Phase 4.2: selectable elevation measurements, draggable graph playhead and in-map attribution. */
.route-profile-heading{
    align-items:flex-start;
}
.route-profile-heading-copy{
    display:grid;
    gap:4px;
    min-width:0;
    max-width:780px;
}
.route-profile-heading-copy>strong{
    color:#fff;
}
.route-profile-description{
    margin:0;
    color:#9fb6d3;
    font-size:12px;
    line-height:1.45;
}
.route-profile-metric-switch{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}
.route-profile-metric-button{
    min-height:34px!important;
    padding:7px 10px!important;
    border-radius:8px!important;
    font-size:12px!important;
    box-shadow:none!important;
}
.route-profile-metric-button.is-active,
.route-profile-metric-button[aria-pressed="true"]{
    border-color:#ff9d24!important;
    background:linear-gradient(180deg,#ff9d24 0%,#b85d00 100%)!important;
    color:#fff!important;
}
.route-profile-metric-button:disabled{
    opacity:.42;
    cursor:not-allowed;
}
.route-profile-chart-wrap canvas{
    cursor:ew-resize;
    touch-action:none;
}
.route-profile-chart-wrap canvas.is-scrubbing{
    cursor:grabbing;
}
.route-profile-axis-label{
    position:absolute;
    z-index:1;
    top:7px;
    right:8px;
    max-width:calc(100% - 90px);
    padding:3px 6px;
    border:1px solid rgba(75,112,151,.58);
    border-radius:5px;
    background:rgba(2,8,23,.78);
    color:#d9e8fb;
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    pointer-events:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.route-viewer-shell .route-cesium-credits-map{
    position:absolute!important;
    z-index:8!important;
    top:auto!important;
    right:auto!important;
    bottom:5px!important;
    left:5px!important;
    transform:none!important;
    display:block!important;
    width:max-content!important;
    max-width:calc(100% - 10px)!important;
    min-height:0!important;
    margin:0!important;
    padding:3px 6px!important;
    border:1px solid rgba(75,112,151,.62)!important;
    border-radius:5px!important;
    background:rgba(2,8,23,.78)!important;
    color:#fff!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    line-height:1.15!important;
    box-shadow:0 3px 10px rgba(0,0,0,.28)!important;
    backdrop-filter:blur(5px)!important;
    scrollbar-width:thin;
}
.route-viewer-shell .route-cesium-credits-map:empty{
    display:none!important;
}
.route-viewer-shell .route-cesium-credits-map .cesium-widget-credits{
    position:static!important;
    inset:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    min-height:0!important;
    padding:0!important;
    font-size:10px!important;
    line-height:1.15!important;
    text-align:left!important;
    white-space:nowrap!important;
}
.route-viewer-shell .route-cesium-credits-map .cesium-credit-logoContainer{
    flex:0 0 auto!important;
}
.route-viewer-shell .route-cesium-credits-map .cesium-credit-logoContainer img{
    display:block!important;
    max-height:18px!important;
    width:auto!important;
}
.route-viewer-shell .route-cesium-credits-map a{
    color:#d8ecff!important;
}
.route-attribution-actions-row.route-actions-only{
    justify-content:flex-end;
}
.route-attribution-actions-row.route-actions-only .route-viewer-map-actions{
    margin-left:auto;
}

@media(max-width:760px){
    .route-profile-heading{
        gap:7px;
    }
    .route-profile-heading-copy{
        width:100%;
        max-width:none;
    }
    .route-profile-metric-switch{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:4px;
    }
    .route-profile-metric-button{
        min-width:0!important;
        padding:7px 5px!important;
        font-size:10.5px!important;
        white-space:normal!important;
        line-height:1.15!important;
    }
    .route-profile-axis-label{
        top:5px;
        right:5px;
        max-width:calc(100% - 80px);
        font-size:9px;
    }
    .route-viewer-shell .route-cesium-credits-map{
        bottom:4px!important;
        left:4px!important;
        max-width:calc(100% - 8px)!important;
        padding:2px 5px!important;
    }
    .route-viewer-shell .route-cesium-credits-map .cesium-widget-credits{
        font-size:9px!important;
    }
}


/* Phase 4.3: move route actions to the heading and analysis data below the elevation profile. */
.route-summary-telemetry{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    z-index:auto!important;
    width:100%!important;
    max-width:none!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
    margin:0!important;
    padding:10px!important;
}
.route-summary-telemetry>div{
    min-width:0!important;
}
.route-summary-telemetry strong{
    min-width:0!important;
    overflow:hidden;
    text-overflow:ellipsis;
}
.route-compare-page .route-compare-legend{
    width:100%;
    min-width:0;
}
.route-compare-run{
    min-width:0;
}

/* Retain the compact two-row comparison cards at narrower desktop widths. */
@media(min-width:761px) and (max-width:1240px){
    .route-compare-run{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-areas:
            "identity follow"
            "telemetry telemetry";
        row-gap:8px;
    }
    .route-compare-visible-toggle{
        grid-area:identity;
        min-width:0;
    }
    .route-compare-run-telemetry{
        grid-area:telemetry;
        min-width:0;
        width:100%;
    }
    .route-follow-run{
        grid-area:follow;
        justify-self:end;
    }
}
@media(max-width:760px){
    .route-summary-telemetry{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        padding:8px!important;
    }
    .route-summary-telemetry>div{
        padding:7px 8px!important;
    }
}

/* Phase 4.4: align the replay timeline with the draggable elevation chart. */
.route-viewer-fullscreen{
    --route-analysis-horizontal-inset:15px;
}
.route-timeline-dock{
    width:auto;
    margin-inline:var(--route-analysis-horizontal-inset);
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    --route-analysis-horizontal-inset:14px;
}
@media(max-width:760px){
    .route-viewer-fullscreen{
        --route-analysis-horizontal-inset:11px;
    }
    .route-viewer-fullscreen:fullscreen,
    .route-viewer-fullscreen:-webkit-full-screen{
        --route-analysis-horizontal-inset:10px;
    }
}

/* Phase 4.5: align timeline to the chart plot and prevent map controls overlapping attribution. */
.route-timeline-dock{
    width:calc(100% - 30px)!important;
    max-width:calc(100% - 30px)!important;
    margin-inline:0!important;
    justify-self:center!important;
}
@media(max-width:960px){
    .route-control-dock,
    .route-viewer-fullscreen:fullscreen .route-control-dock,
    .route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
        bottom:48px!important;
    }
}
@media(max-width:760px){
    .route-timeline-dock{
        width:calc(100% - 22px)!important;
        max-width:calc(100% - 22px)!important;
    }
    .route-control-dock,
    .route-viewer-fullscreen:fullscreen .route-control-dock,
    .route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
        bottom:42px!important;
    }
}

/* Phase 4.6: shorter desktop maps, exact draggable-track alignment and controls above attribution. */
@media(min-width:761px){
    .route-viewer-shell{
        min-height:465px!important;
    }
    .route-compare-shell{
        min-height:510px!important;
    }
}

/*
 * The elevation range thumbs are 18px wide, so their centres travel 9px
 * inside the chart edges. Add that half-thumb width to the panel inset so
 * the Cesium timeline covers the same draggable horizontal range.
 */
.route-viewer-fullscreen{
    --route-timeline-track-inset:24px;
}
.route-timeline-dock{
    width:calc(100% - (2 * var(--route-timeline-track-inset)))!important;
    max-width:calc(100% - (2 * var(--route-timeline-track-inset)))!important;
    margin-inline:auto!important;
    justify-self:stretch!important;
}
.route-viewer-fullscreen:fullscreen,
.route-viewer-fullscreen:-webkit-full-screen{
    --route-timeline-track-inset:23px;
}
@media(max-width:760px){
    .route-viewer-fullscreen{
        --route-timeline-track-inset:20px;
    }
    .route-viewer-fullscreen:fullscreen,
    .route-viewer-fullscreen:-webkit-full-screen{
        --route-timeline-track-inset:19px;
    }
}

/* Keep the playback/view controls above the in-map Cesium credit panel. */
.route-control-dock,
.route-viewer-fullscreen:fullscreen .route-control-dock,
.route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
    z-index:12!important;
}
.route-control-dock .route-controls{
    position:relative!important;
    z-index:13!important;
}
.route-viewer-shell .route-cesium-credits-map{
    z-index:8!important;
}


/* Phase 4.7: move Cesium credits to the top-left and keep mobile map icons side by side. */
.route-viewer-shell .route-cesium-credits-map{
    z-index:14!important;
    top:5px!important;
    right:auto!important;
    bottom:auto!important;
    left:5px!important;
    max-width:calc(100% - 10px)!important;
}

/* With the credits away from the playback controls, return the controls to the map edge. */
.route-control-dock,
.route-viewer-fullscreen:fullscreen .route-control-dock,
.route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
    bottom:14px!important;
    z-index:12!important;
}

@media(max-width:760px){
    .route-viewer-shell .route-cesium-credits-map{
        top:4px!important;
        right:auto!important;
        bottom:auto!important;
        left:4px!important;
        max-width:calc(100% - 88px)!important;
    }

    .route-control-dock,
    .route-viewer-fullscreen:fullscreen .route-control-dock,
    .route-viewer-fullscreen:-webkit-full-screen .route-control-dock{
        bottom:8px!important;
    }

    /* Help and fullscreen/enlarge remain adjacent at the top-right. */
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-toolbar,
    .route-viewer-page.route-compare-page .route-viewer-fullscreen .cesium-viewer-toolbar{
        top:8px!important;
        right:46px!important;
        left:auto!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-fullscreenContainer,
    .route-viewer-page.route-compare-page .route-viewer-fullscreen .cesium-viewer-fullscreenContainer{
        top:8px!important;
        right:8px!important;
        bottom:auto!important;
        left:auto!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        z-index:20!important;
    }
    .route-viewer-page:not(.route-compare-page) .route-viewer-fullscreen .cesium-viewer-fullscreenContainer .cesium-button,
    .route-viewer-page.route-compare-page .route-viewer-fullscreen .cesium-viewer-fullscreenContainer .cesium-button{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
        margin:0!important;
    }
}


/* Phase 4.8: compact four-column Rally Race section tables on narrow screens. */
.route-section-table.route-section-table-rally{
    width:100%;
    min-width:0!important;
    table-layout:fixed;
}
.route-section-table-rally th,
.route-section-table-rally td{
    overflow:hidden;
    text-overflow:ellipsis;
}
.route-section-table-rally th:nth-child(1),
.route-section-table-rally td:nth-child(1){width:15%;}
.route-section-table-rally th:nth-child(2),
.route-section-table-rally td:nth-child(2){width:31%;}
.route-section-table-rally th:nth-child(3),
.route-section-table-rally td:nth-child(3){width:19%;}
.route-section-table-rally th:nth-child(4),
.route-section-table-rally td:nth-child(4){width:35%;}

@media(max-width:760px){
    .route-section-table-wrap:has(.route-section-table-rally){
        overflow-x:hidden;
    }
    .route-section-table-rally th,
    .route-section-table-rally td{
        padding:8px 6px;
    }
    .route-section-table-rally th{
        font-size:10px;
        letter-spacing:.025em;
    }
    .route-section-table-rally td{
        font-size:13px;
    }
}

@media(max-width:380px){
    .route-section-table-rally th,
    .route-section-table-rally td{
        padding-inline:4px;
    }
    .route-section-table-rally th{
        font-size:9px;
    }
    .route-section-table-rally td{
        font-size:12px;
    }
}


/* Phase 4.10: combined section-comparison matrix. */
.route-section-comparison-card{
    overflow:hidden;
}
.route-section-comparison-matrix{
    min-width:0;
    margin-top:13px;
}
.route-section-matrix-shell{
    display:grid;
    grid-template-columns:minmax(170px,220px) minmax(0,1fr);
    max-width:100%;
    overflow:hidden;
    border:1px solid #1d3b5f;
    border-radius:10px;
    background:#061120;
    isolation:isolate;
}
.route-section-matrix-players{
    position:relative;
    z-index:2;
    min-width:0;
    overflow:hidden;
    border-right:1px solid #24496f;
    background:#0b1b33;
    box-shadow:7px 0 12px rgba(0,0,0,.3);
}
.route-section-matrix-results-scroll{
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    background:#061120;
    scrollbar-gutter:stable;
}
.route-section-matrix-results-scroll:focus-visible{
    outline:2px solid rgba(47,142,232,.8);
    outline-offset:-2px;
}
.route-section-matrix{
    border-collapse:separate;
    border-spacing:0;
    font-size:13px;
}
.route-section-matrix-player-table{
    width:100%;
    table-layout:fixed;
    background:#0b1b33;
}
.route-section-matrix-results-table{
    width:max-content;
    min-width:100%;
}
.route-section-matrix th,
.route-section-matrix td{
    height:52px;
    min-width:88px;
    padding:10px 11px;
    border-right:1px solid #163452;
    border-bottom:1px solid #163452;
    text-align:center;
    white-space:nowrap;
}
.route-section-matrix thead th{
    height:41px;
    background:#0b1b33;
    color:#b7c9e6;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.route-section-matrix-player-table th{
    min-width:0;
    width:100%;
    border-right:0;
    text-align:left;
    background:#0b1b33;
}
.route-section-matrix-player{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-weight:800;
}
.route-section-matrix-player span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}
.route-section-matrix-player .route-colour-swatch{
    width:22px;
    height:7px;
    flex:0 0 auto;
}
.route-section-matrix-cell{
    color:#e5eefc;
    font-variant-numeric:tabular-nums;
}
.route-section-matrix-cell.has-value{
    background:hsla(var(--section-heat-hue),72%,38%,.52);
    color:#fff;
    font-weight:800;
    text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.route-section-matrix-cell.is-best{
    box-shadow:inset 0 0 0 1px rgba(134,239,172,.7);
}
.route-section-matrix-cell.is-worst{
    box-shadow:inset 0 0 0 1px rgba(252,165,165,.48);
}
.route-section-matrix-cell.is-missing{
    color:#64748b;
    background:#071426;
}
.route-section-matrix tr:last-child th,
.route-section-matrix tr:last-child td{
    border-bottom:0;
}
.route-section-matrix-results-table th:last-child,
.route-section-matrix-results-table td:last-child{
    border-right:0;
}
.route-section-matrix-key{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-top:8px;
    color:#9fb6d3;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.route-section-matrix-gradient{
    width:110px;
    height:8px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:linear-gradient(90deg,hsla(6,72%,38%,.8),hsla(70,72%,38%,.8),hsla(134,72%,38%,.8));
}
@media(max-width:760px){
    .route-section-matrix-shell{
        grid-template-columns:minmax(118px,145px) minmax(0,1fr);
    }
    .route-section-matrix th,
    .route-section-matrix td{
        height:47px;
        min-width:76px;
        padding:8px 7px;
        font-size:12px;
    }
    .route-section-matrix thead th{
        height:37px;
        font-size:10px;
    }
    .route-section-matrix-player-table th{
        min-width:0;
    }
    .route-section-matrix-gradient{
        width:82px;
    }
}


/* Rally Race comparison cards do not show score telemetry. */
.route-compare-run-telemetry.is-rally-telemetry{
    grid-template-columns:repeat(3,minmax(66px,1fr));
}
@media(max-width:760px){
    .route-compare-run-telemetry.is-rally-telemetry{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

/* Wider elevation-profile copy and clickable section-window selection. */
.route-profile-heading-copy{
    width:80%;
    max-width:80%;
    flex:0 1 80%;
}
.route-profile-heading>#routeWindowSummary{
    flex:0 0 auto;
    margin-left:auto;
    white-space:nowrap;
    text-align:right;
}
.route-section-matrix-cell.is-selectable{
    cursor:pointer;
}
.route-section-matrix-cell.is-selectable:hover,
.route-section-matrix-cell.is-selectable:focus-visible{
    filter:brightness(1.12);
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:-3px;
}
.route-section-matrix-cell.is-selected{
    outline:2px solid #ffffff;
    outline-offset:-3px;
}
@media(max-width:760px){
    .route-profile-heading-copy{
        width:100%;
        max-width:100%;
        flex-basis:100%;
    }
}


/* Phase 4.1: Discord feedback refinements. */
.route-viewer-fullscreen .cesium-viewer-fullscreenContainer,
.route-viewer-fullscreen .cesium-viewer-fullscreenContainer .cesium-button,
.route-viewer-fullscreen .route-fullscreen-toolbar-item,
.route-viewer-fullscreen .route-fullscreen-toolbar-item .cesium-button{
    border-radius:6px!important;
    overflow:hidden!important;
}
.route-timeline-dock{
    width:100%!important;
    max-width:none!important;
}
.route-section-matrix-cell.is-best{
    box-shadow:inset 3px 0 0 rgba(134,239,172,.72);
}
.route-section-matrix-cell.is-worst{
    box-shadow:inset 3px 0 0 rgba(252,165,165,.58);
}
.route-viewer-fullscreen:fullscreen .route-compare-legend,
.route-viewer-fullscreen:-webkit-full-screen .route-compare-legend{
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.route-viewer-fullscreen:fullscreen .route-compare-run,
.route-viewer-fullscreen:-webkit-full-screen .route-compare-run{
    grid-template-columns:minmax(110px,1fr) minmax(260px,1.6fr) auto;
    padding:9px 10px;
}
@media(max-width:1200px){
    .route-viewer-fullscreen:fullscreen .route-compare-legend,
    .route-viewer-fullscreen:-webkit-full-screen .route-compare-legend{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:760px){
    .route-viewer-fullscreen:fullscreen .route-compare-legend,
    .route-viewer-fullscreen:-webkit-full-screen .route-compare-legend{
        grid-template-columns:1fr;
    }
}