/* Route results are a persistent sibling of the editor, available before JS loads. */
body.evb-route-result-open .evb-planner-panel,
body.evb-planner-page .evb-planner-panel.is-route-built {
    display: none !important;
}
.evb-route-details {
    display: none;
    position: fixed;
    z-index: 6901;
    inset: 92px auto 12px 12px;
    width: 368px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cbd5d1;
    border-radius: 16px;
    background: #edf2f0;
    box-shadow: 0 8px 32px #0f172a24;
    color: #17202e;
    font-size: 13px;
    line-height: 1.4;
}
body.evb-route-details-open .evb-route-details { display: flex; }
.evb-route-details [hidden] { display: none !important; }
.evb-route-details button, .evb-route-details a { font-family: inherit; }
.evb-route-details button:focus-visible, .evb-route-details a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}
.evb-route-details-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    padding: 6px 12px;
    border-bottom: 1px solid #cbd5d1;
    background: white;
}
.evb-route-details-header h2 { margin: 0; font-size: 14px; font-weight: 750; }
.evb-route-new {
    width: 32px;
    height: 32px !important;
    padding: 0;
    border: 1px solid #cbd5d1;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 22px;
    line-height: 1;
}
.evb-route-sheet-handle { display: none; }
.evb-route-details-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.evb-route-details #route-container { margin: 0; padding: 0; background: transparent; box-shadow: none; }
.evb-route-status { padding: 16px 12px; margin: 0; color: #475569; }
.evb-rd-panel { padding: 12px; }
.evb-rd-header { margin-bottom: 10px; }
.evb-rd-route-kicker { display: none; }
.evb-rd-route { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 750; overflow-wrap: anywhere; }
.evb-rd-abrp-summary { margin-bottom: 12px; padding: 10px; background: #183e30; color: #ffffff; border: 1px solid #123124; border-radius: 12px; box-shadow: 0 3px 10px #183e301a; }
.evb-rd-abrp-main { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.evb-rd-abrp-time { font-size: 22px; line-height: 1.2; font-weight: 750; }
.evb-rd-abrp-badge { border-radius: 6px; padding: 3px 6px; background: #ffda57; color: #28351c; font-size: 10px; font-weight: 650; }
.evb-rd-abrp-sub { margin-bottom: 8px; color: #d3e5da; font-size: 11px; }
.evb-rd-abrp-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.evb-rd-abrp-item { display: flex; align-items: center; gap: 4px; color: #e4f0e8; font-size: 11px; }
.evb-rd-abrp-icon { font-size: 12px; }
.evb-rd-timeline { position: relative; padding-left: 22px; }
.evb-rd-timeline::before { content: ''; position: absolute; inset: 12px auto 40px 6px; width: 2px; background: #27905b; }
.evb-rd-point { position: relative; }
.evb-rd-marker { position: absolute; left: -22px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #16854b; color: white; font-size: 9px; text-align: center; box-shadow: 0 0 0 3px #edf2f0; }
.evb-rd-marker.is-start { background: white; border: 3px solid #16854b; }
.evb-rd-marker.is-finish { background: white; border: 3px solid #334155; }
.evb-rd-section { padding: 6px 0; }
.evb-rd-section-title { font-size: 10px; color: #475569; }
.evb-rd-section-sub { display: flex; justify-content: space-between; gap: 6px; align-items: center; font-size: 13px; font-weight: 650; }
.evb-rd-pill { padding: 2px 6px; border-radius: 6px; background: #e7f4eb; color: #166534; font-size: 11px; white-space: nowrap; }
.evb-rd-drive { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; padding: 7px 0; color: #475569; }
.evb-rd-drive-icon { font-size: 11px; }
.evb-rd-drive-text { font-size: 11px; }
.evb-rd-drive-muted { display: none; }
.evb-rd-waypoint, .evb-rd-charge-card { padding: 9px; border: 1px solid #c8d6cd; border-radius: 11px; background: white; box-shadow: 0 2px 5px #153d300a; }
.evb-rd-waypoint-title { font-size: 12px; font-weight: 650; }
.evb-rd-waypoint-address, .evb-rd-station-address { margin-top: 3px; font-size: 11px; color: #475569; overflow-wrap: anywhere; }
.evb-rd-charge-card { border-left: none; }
.evb-rd-charge-head, .evb-rd-charge-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.evb-rd-charge-head { justify-content: space-between; margin-bottom: 5px; }
.evb-rd-stop-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; height: 20px; background: #16854b; color: white; border-radius: 6px; font-size: 11px; font-weight: 750; }
.evb-rd-operator { font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.evb-rd-power { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 2px 5px; border-radius: 5px; background: #e0f3e6; font-size: 11px; color: #116337; font-weight: 700; }
/* Станція, яку водій обрав сам, а не підібрав планувальник. */
.evb-rd-charge-card.is-driver-choice { border-left: none; background: #fffdf4; }
.evb-rd-choice-badge { flex-shrink: 0; margin-left: auto; padding: 2px 7px; border-radius: 999px; background: #ffd000; color: #4a3a00; font-size: 9.5px; font-weight: 900; white-space: nowrap; }
.evb-rd-charge-card.is-driver-choice .evb-rd-stop-number { background: #d6aa00; color: #241c00; }
.evb-rd-station-name { font-size: 13px; line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; }
.evb-rd-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin: 9px 0; padding-top: 8px; border-top: 1px solid #d8e2dc; }
.evb-rd-metric { display: flex; gap: 4px; align-items: center; min-width: 0; }
.evb-rd-metric-icon { display: none; }
.evb-rd-metric-body { display: flex; flex-direction: column; }
.evb-rd-metric-value { font-size: 12px; line-height: 1.25; font-weight: 650; }
.evb-rd-metric-label { font-size: 9px; color: #475569; }
.evb-rd-charge-card.is-above-80-fallback { }
.evb-rd-charge-warning { margin: -1px 0 9px; padding: 7px 8px; border: 1px solid #ead59a; border-radius: 8px; background: #fff8df; color: #695000; font-size: 10.5px; line-height: 1.4; }
.evb-rd-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.evb-rd-btn { display: flex; gap: 5px; align-items: center; justify-content: center; flex: 1 1 auto; min-width: max-content; min-height: 30px; padding: 4px 6px; border: 1px solid #cbd5d1; border-radius: 7px; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 650; text-decoration: none; }
.evb-rd-btn-primary { background: #e0f3e6; border-color: #9ccbad; color: #145c35; }
.evb-rd-btn:hover { background: #e7f4eb; color: #166534; }
/* One grid, one stroke weight: the icon reads as part of the label, not as decoration. */
.evb-rd-btn-icon { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.evb-rd-btn > span { white-space: nowrap; }
/* Removing a stop rebuilds the whole route, so it reads as a quiet action, not a primary one. */
.evb-rd-btn-remove { padding: 4px 6px; border-color: #e2c9c9; background: #fdf5f5; color: #9f3a3a; cursor: pointer; font-family: inherit; }
.evb-rd-btn-remove:hover { border-color: #d99b9b; background: #fdeaea; color: #8a2b2b; }
.evb-rd-excluded { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #e4d7b4; border-radius: 10px; background: #fdf8e9; }
.evb-rd-excluded-head { margin-bottom: 6px; color: #6b5a20; font-size: 11px; font-weight: 700; }
.evb-rd-excluded-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.evb-rd-excluded-item { display: flex; gap: 8px; align-items: center; justify-content: space-between; min-width: 0; }
.evb-rd-excluded-name { overflow: hidden; color: #4a4230; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.evb-rd-excluded-undo { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; padding: 3px 8px; border: 1px solid #cbb87c; border-radius: 6px; background: white; color: #6b5a20; font-family: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.evb-rd-excluded-undo:hover { background: #fffaf0; color: #4a4230; }
.evb-rd-excluded-undo .evb-rd-btn-icon { width: 12px; height: 12px; }
.evb-route-details-actions { display: flex; flex: 0 0 auto; gap: 6px; padding: 10px 12px; border-top: 1px solid #cbd5d1; background: white; }
.evb-rd-action { display: inline-flex; flex: 1; min-width: 0; height: 36px; align-items: center; justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; }
.evb-rd-action > svg { flex: 0 0 15px; width: 15px; height: 15px; }
.evb-rd-action > span { overflow: hidden; text-overflow: ellipsis; }
.evb-rd-action-primary { background: #16854b; color: white; }
.evb-rd-action-primary:hover { background: #116b3b; color: white; }
.evb-rd-action-secondary { background: #ffca05; color: #17202e; }
.evb-rd-action-ghost { background: #ffffff; border-color: #aebfb5; color: #263e32; }
body.evb-planner-page #evbAltLocationsControl { left: auto !important; right: 16px !important; top: 92px !important; bottom: auto !important; transform: none !important; }
/* Three labelled buttons are a tight fit on a 320px phone; tighten before wrapping. */
@media (max-width: 380px) {
    .evb-rd-actions { gap: 5px; }
    .evb-rd-btn { gap: 4px; padding: 4px 5px; }
    .evb-rd-btn-remove { padding: 4px 5px; }
    .evb-rd-btn-icon { width: 12px; height: 12px; }
}
@media (max-width: 768px) {
    .evb-route-details {
        inset: auto 0 0;
        width: 100%;
        height: var(--evb-route-sheet-height, 48dvh);
        min-height: 190px;
        max-height: calc(100dvh - 86px - env(safe-area-inset-top));
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
        box-shadow: 0 -6px 28px #0f172a24;
    }
    .evb-route-sheet-handle { display: flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: white; touch-action: none; cursor: ns-resize; }
    .evb-route-sheet-handle span { width: 36px; height: 4px; border-radius: 4px; background: #7b9485; }
    .evb-route-details-header { min-height: 34px; padding-top: 0; padding-bottom: 4px; }
    .evb-route-details-header h2 { font-size: 13px; }
    .evb-route-new { width: 30px; height: 30px !important; }
    .evb-route-details-actions { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
    .evb-rd-action { height: 40px; }
    .evb-rd-btn { min-height: 36px; }
    .evb-rd-btn-icon { width: 14px; height: 14px; }
    .evb-rd-excluded-undo { min-height: 32px; }
    .evb-rd-panel { padding: 10px; }
    .evb-rd-route { font-size: 16px; }
    body.evb-planner-page #evbAltLocationsControl { right: 10px !important; top: calc(76px + env(safe-area-inset-top)) !important; }
    body.evb-route-details-open #evbMobileMapControls { bottom: calc(var(--evb-route-sheet-height, 48dvh) + 12px) !important; }
}
/* Override the legacy page-wide footer and map-control visibility rules. */
body.evb-planner-page .evb-route-details-actions { display: flex !important; }
.evb-route-details #restart { flex: 0 0 32px; width: 32px !important; max-width: 32px !important; height: 32px !important; margin: 0 !important; }
body.evb-planner-page.evb-route-details-open #evbAltLocationsControl:not([hidden]),
body.evb-planner-page.evb-route-details-open #evbMobileMapControls { display: flex !important; }
@media (max-width: 768px) {
    body.evb-planner-page.evb-route-result-open.evb-route-details-open #evbMobileMapControls {
        bottom: calc(var(--evb-route-sheet-height, 48dvh) + 12px) !important;
    }
    body.evb-planner-page.evb-route-details-open:has(#evbRouteDetailsPanel[data-sheet-size="expanded"]) #evbMobileMapControls {
        display: none !important;
    }
}
/* Road alternatives: choices stay visible while the selected itinerary scrolls. */
.evb-route-choices { flex: 0 0 auto; padding: 9px 10px; border-bottom: 1px solid #cbd5d1; background: white; }
.evb-route-options-list { display: flex; gap: 6px; }
.evb-route-option { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px 5px; border: 1px solid #b7c7dc; border-radius: 9px; background: #f5f8fc; color: #334155; text-align: left; cursor: pointer; }
.evb-route-option > span { font-size: 10px; }
.evb-route-option strong { font-size: 12px; line-height: 1.25; }
.evb-route-option small { font-size: 9px; line-height: 1.3; }
.evb-route-option.is-selected { background: #eaf2ff; border-color: #2563eb; color: #1545a5; box-shadow: inset 0 0 0 1px #2563eb; }
.evb-route-options-status { margin: 4px 0 0; color: #526176; font-size: 11px; }
@media (max-width: 768px) {
    /*
     * The picker replaces the old sheet-size tabs here, so it stays visible at
     * every sheet height — it is now the only way to switch routes.
     */
    .evb-route-choices { padding: 6px 10px; }
    .evb-route-option { gap: 2px; padding: 6px 5px; }
    .evb-route-option strong { font-size: 11px; }
    .evb-route-option small { font-size: 8.5px; }
}

.evb-rd-action svg { width: 17px; height: 17px; flex: 0 0 17px; }
@media (max-width: 768px) {
    .evb-route-details {
        height: var(--evb-route-sheet-height, max(58dvh, calc(340px + env(safe-area-inset-bottom))));
        transition: height 180ms ease;
    }
    .evb-rd-action { flex-direction: column; gap: 4px; height: 48px; padding: 4px; font-size: 11px; }
    .evb-rd-action svg { width: 18px; height: 18px; flex-basis: 18px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-timeline,
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-breakdown { display: none; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-panel { padding: 6px 10px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-header { margin-bottom: 5px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-route { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-summary { padding: 7px 9px; margin: 0; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-time { font-size: 19px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-sub { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .evb-route-details { transition: none; }
}
/* Legacy planner button IDs must not shrink the persistent action bar. */
body.evb-planner-page .evb-route-details-actions .evb-rd-action {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
}
@media (max-width: 768px) {
    body.evb-planner-page .evb-route-details-actions .evb-rd-action {
        height: 48px !important;
        min-height: 48px !important;
    }
}

.evb-route-loading[hidden] { display: none !important; }
.evb-route-loading {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; background: #eaf1edf0; backdrop-filter: blur(5px);
}
.evb-route-loading-card {
    width: min(100%, 360px); padding: 30px 22px; text-align: center;
    background: #fff; border: 1px solid #c8dbcf; border-radius: 22px;
    box-shadow: 0 16px 56px #173e3026;
}
.evb-route-loading-card h2 { margin: 20px 0 8px; color: #173e30; font-size: 21px; line-height: 1.3; font-weight: 750; }
.evb-route-loading-card p { margin: 0; color: #576f61; font-size: 14px; line-height: 1.5; }
.evb-route-loading-spinner { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: #19834b; }
.evb-route-loading-spinner::before { content: ''; position: absolute; inset: 0; border: 4px solid #e3eee7; border-top-color: #19834b; border-right-color: #ffca05; border-radius: 50%; animation: evb-route-loading-spin 1s linear infinite; }
.evb-route-loading-spinner svg { width: 26px; height: 26px; }
@keyframes evb-route-loading-spin { to { transform: rotate(360deg); } }

/*
 * Смуга не показує відсотки — розрахунок їх не знає. Вона лише підтверджує,
 * що процес живий, поки текст під заголовком називає поточний етап.
 */
.evb-route-loading-bar {
    overflow: hidden;
    width: 100%;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: #e3eee7;
}
.evb-route-loading-bar span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #19834b, #ffca05);
    animation: evb-route-loading-slide 1.4s ease-in-out infinite;
}
@keyframes evb-route-loading-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .evb-route-loading-spinner::before { animation: none; }
    .evb-route-loading-bar span { width: 100%; animation: none; }
}

/* What the estimate assumed: weather and terrain, stated rather than implied. */
.evb-rd-conditions-card {
    margin-top: 9px;
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #c8d6cd;
    border-radius: 11px;
    background: #fff;
    color: #16372b;
}
.evb-rd-conditions { display: flex; flex-wrap: wrap; gap: 5px; }
.evb-rd-weather-attribution {
    margin-top: 5px;
    color: #5e5e5e;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}
.evb-rd-condition {
    padding: 3px 8px;
    border: 1px solid #b8d0c1;
    border-radius: 999px;
    background: #f3faf4;
    color: #153528;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    cursor: help;
}
.evb-rd-condition.is-warning { border-color: #ca8a00; background: #fff4d4; color: #674000; }
/*
 * Shown on the route, not applied to the estimate. Its own muted colour so it
 * is not read as a warning, plus a dashed edge: the state survives being
 * looked at in greyscale or by someone who does not separate these hues.
 */
.evb-rd-condition.is-preview {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 4px 3px 9px;
    border-style: dashed;
    border-color: #a9b4c6;
    background: #f2f5fa;
    color: #3d4a63;
    /* The pill drops to its own line on a narrow panel instead of overflowing. */
    white-space: normal;
}
/*
 * The upsell is the one thing here meant to be tapped, so it is a solid pill
 * with its own label rather than tinted text: visible against the muted chip
 * and big enough for a finger, which a 10px inline link never was.
 */
.evb-rd-condition.is-preview a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--evb-pro-600, #6D35C5);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}
.evb-rd-condition.is-preview a:hover,
.evb-rd-condition.is-preview a:active { background: var(--evb-pro-700, #5727A3); color: #fff; }
.evb-rd-condition.is-preview a:focus-visible { outline: 3px solid var(--evb-pro-300, #C6AEFF); outline-offset: 2px; }
/* Touch: the pill gets the full recommended target height. */
@media (hover: none) {
    .evb-rd-condition.is-preview a { min-height: 40px; padding-inline: 14px; font-size: 12px; }
}

/*
 * The details panel was a fixed 368px at every desktop size, which reads as a
 * narrow column on a large monitor and forces station names and the metric
 * grid to wrap. It now grows with the viewport while staying a side panel
 * rather than taking over the map.
 */
@media (min-width: 1280px) {
    .evb-route-details { width: 420px; }
}

@media (min-width: 1600px) {
    .evb-route-details { width: 470px; }
}

@media (min-width: 1920px) {
    .evb-route-details { width: 520px; }
}

/* Elevation profile: where the climbing the conditions strip counts happens. */
.evb-rd-elevation {
    margin: 12px 0 12px;
    padding: 9px 10px 6px;
    border: 1px solid #c8d6cd;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 2px 5px #153d300a;
}
.evb-rd-elevation figcaption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    color: #475569;
    font-size: 10px;
    font-weight: 650;
}
.evb-rd-elevation figcaption span { color: #64748b; font-size: 9px; font-weight: 600; }
.evb-rd-elevation svg { display: block; width: 100%; height: auto; }

/* Sharing lives with the route content, so it does not reduce the timeline viewport. */
/*
 * Route access, in one card.
 *
 * The same URL used to have three homes here: a status/description pair, a link
 * row with its own copy button, and a Share button in the action row that wrapped
 * onto a second line once it read "Копіювати посилання". What is left is the
 * link, the single button that shares it, and one line saying where it stands.
 */
.evb-route-share {
    margin: 4px 12px 12px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
/* Nothing to show yet: one line with the route's state and its delete control. */
.evb-route-share.is-private { padding: 3px 4px 3px 10px; }

.evb-route-share__link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 2px 2px 2px 9px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
}
.evb-route-share__link > svg { flex: 0 0 14px; width: 14px; height: 14px; color: #6b7280; }
.evb-route-share__link a {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #111827;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.evb-route-share__link a:hover { text-decoration: underline; }
.evb-route-share__link button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #111827;
    color: #fff;
    cursor: pointer;
}
.evb-route-share__link button:hover { background: #1f2937; }
.evb-route-share__link button:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
.evb-route-share__link button svg { width: 16px; height: 16px; }

.evb-route-share__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}
.evb-route-share.is-published .evb-route-share__foot { margin-top: 7px; }
.evb-route-share__state {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #6b7280;
    font-size: 10.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.evb-route-share__copy-route {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.evb-route-share__copy-route:hover { background: #f3f4f6; }
/* The one action a private route offers, so it leads inside the card. */
.evb-route-share__publish {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.evb-route-share__publish:hover { background: #1f2937; }
.evb-route-share__publish:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
.evb-route-share__publish:disabled { opacity: .6; cursor: progress; }
.evb-route-share__publish svg { width: 14px; height: 14px; }
/* For a visitor the copy is the whole point of the page, so it leads. */
.evb-route-share.is-public-view .evb-route-share__copy-route {
    border-color: #111827;
    background: #111827;
    color: #fff;
}
.evb-route-share.is-public-view .evb-route-share__copy-route:hover { background: #1f2937; }
.evb-route-share__delete {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
}
.evb-route-share__delete:hover { background: #fef2f2; color: #b42318; }
.evb-route-share__delete svg { width: 16px; height: 16px; }
.evb-route-share__message {
    margin: 6px 0 0;
    color: #111827;
    font-size: 10.5px;
    font-weight: 700;
}
.evb-route-share__message[data-type="error"] { color: #b42318; }
/* Touch: every control in the card reaches a full target. */
@media (hover: none) {
    .evb-route-share__link button { width: 44px; height: 40px; }
    .evb-route-share__copy-route,
    .evb-route-share__publish { min-height: 40px; }
    .evb-route-share__delete { width: 40px; height: 40px; }
}

.evb-snapshot-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 10px 12px 4px;
    padding: 10px;
    border: 1px solid #ead498;
    border-radius: 11px;
    background: #fffaf0;
    color: #473a19;
}
.evb-snapshot-notice__icon {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ffedb5;
    color: #8a6412;
}
.evb-snapshot-notice__icon svg { width: 15px; height: 15px; }
.evb-snapshot-notice > div { min-width: 0; }
.evb-snapshot-notice strong,
.evb-snapshot-notice time { display: block; }
.evb-snapshot-notice strong { font-size: 11px; font-weight: 850; }
.evb-snapshot-notice time { margin-top: 1px; color: #755d24; font-size: 9.5px; font-weight: 750; }
.evb-snapshot-notice p { margin: 4px 0 0; color: #796a45; font-size: 9px; line-height: 1.4; }

.evb-share-dialog {
    width: min(calc(100% - 32px), 420px);
    max-width: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d9e2dc;
    border-radius: 20px;
    background: #fff;
    color: #172b20;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}
.evb-share-dialog::backdrop {
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(3px);
}
.evb-share-dialog__content { padding: 24px; }
.evb-share-dialog__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: #e3f4e9;
    color: #16854b;
}
.evb-share-dialog__icon svg { width: 22px; height: 22px; }
.evb-share-dialog h2 {
    margin: 0 0 7px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}
.evb-share-dialog p {
    margin: 0;
    color: #5f7167;
    font-size: 13px;
    line-height: 1.5;
}
.evb-share-dialog__notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px;
    border-radius: 10px;
    background: #f5f7f6;
    color: #53645b;
    font-size: 11px;
    line-height: 1.45;
}
.evb-share-dialog__notice svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.evb-share-dialog__actions { display: flex; gap: 8px; margin-top: 20px; }
.evb-share-dialog__actions button {
    flex: 1;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 750;
}
.evb-share-dialog__cancel { border: 1px solid #cbd5cf; background: #fff; color: #34483d; }
.evb-share-dialog__publish { border: 1px solid #16854b; background: #16854b; color: #fff; }
.evb-share-dialog__publish:hover { background: #116d3d; }

.evb-copy-route-dialog {
    width: min(calc(100% - 32px), 440px);
    max-width: none;
    padding: 0;
    border: 1px solid #d9e2dc;
    border-radius: 20px;
    background: #fff;
    color: #172b20;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
}
.evb-copy-route-dialog::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); }
.evb-copy-route-dialog__content { padding: 22px; }
.evb-copy-route-dialog h2 { margin: 0 0 7px; font-size: 19px; font-weight: 800; line-height: 1.3; }
.evb-copy-route-dialog__content > p { margin: 0 0 17px; color: #65766c; font-size: 12px; line-height: 1.5; }
.evb-copy-route-option {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 11px;
    border: 1px solid #d7e1db;
    border-radius: 12px;
    background: #fff;
    color: #22382c;
    text-align: left;
}
.evb-copy-route-option:hover { border-color: #9ac4a9; background: #f5fbf7; }
.evb-copy-route-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #edf3ef;
    color: #526d5d;
}
.evb-copy-route-option__icon.is-all { background: #e0f3e7; color: #16854b; }
.evb-copy-route-option__icon svg { width: 18px; height: 18px; }
.evb-copy-route-option strong,
.evb-copy-route-option small { display: block; }
.evb-copy-route-option strong { font-size: 12px; font-weight: 800; }
.evb-copy-route-option small { margin-top: 2px; color: #718078; font-size: 10px; line-height: 1.35; }
.evb-copy-route-option > span:last-child { color: #718078; font-size: 22px; }
.evb-copy-route-dialog__cancel {
    width: 100%;
    min-height: 40px;
    margin-top: 14px;
    border: 0;
    border-radius: 10px;
    background: #f1f4f2;
    color: #43554b;
    font-size: 12px;
    font-weight: 750;
}

@media (max-width: 768px) {
    .evb-route-share { margin: 4px 10px 12px; }
    .evb-snapshot-notice { margin: 8px 10px 4px; }
    /* Narrow panel: the state line may wrap rather than be clipped. */
    .evb-route-share__state { white-space: normal; }
    .evb-share-dialog { margin-bottom: max(16px, env(safe-area-inset-bottom)); }
    .evb-share-dialog__content { padding: 20px; }
}

/* ============================================================
   Погода на точках маршруту
   ============================================================ */

/*
 * Прогноз на годину приїзду, а не «зараз»: у стрічці він стоїть поруч із
 * часом і читається як його продовження, тому лишається тихим.
 */
.evb-rd-weather:empty {
    display: none;
}

.evb-rd-weather {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .05);
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.evb-rd-section-title .evb-rd-weather {
    background: rgba(255, 255, 255, .16);
    color: inherit;
}

/*
 * Погода і потужність — два різні значення, тож і дві окремі плашки.
 *
 * Раніше вони лежали в одній зеленій: скільки відступу між ними не став,
 * зелений ішов суцільно, і око читало «13°140 кВт» як одне слово. Тому фон
 * і паддінг переїжджають з обгортки на саме значення потужності, а між
 * плашками лишається чистий проміжок.
 */
.evb-rd-power {
    padding: 0;
    background: transparent;
    gap: 8px;
}

.evb-rd-power .evb-rd-weather {
    margin-left: 0;
    margin-right: 0;
}

.evb-rd-power-value {
    white-space: nowrap;
    margin-left: 0;
    padding: 2px 6px;
    border-radius: 5px;
    background: #e0f3e6;
    color: #116337;
}

/*
 * Погода у смужці умов — це вже сама по собі плашка, тож усередині чипа вона
 * лишається голим текстом, інакше вийшла б плашка в плашці.
 */
.evb-rd-condition.is-weather {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.evb-rd-condition .evb-rd-weather {
    margin: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.evb-rd-condition-arrow {
    margin: 0 4px;
    opacity: .55;
}

/* Mobile route actions share the title row instead of reserving a footer row. */
@media (max-width: 768px) {
    .evb-route-details-header {
        justify-content: flex-start;
        gap: 5px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .evb-route-details-header h2 {
        flex: 1 1 auto;
        min-width: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.evb-planner-page .evb-route-details-header .evb-route-details-actions.is-in-header {
        display: flex !important;
        flex: 0 0 auto;
        gap: 4px;
        padding: 0;
        border: 0;
        background: transparent;
    }

    body.evb-planner-page .evb-route-details-header .evb-route-details-actions.is-in-header .evb-rd-action {
        flex: 0 0 30px;
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        height: 30px !important;
        min-height: 30px !important;
        gap: 0;
        padding: 0 !important;
        border-radius: 9px !important;
    }

    .evb-route-details-header .evb-route-details-actions.is-in-header .evb-rd-action svg {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .evb-route-details-header .evb-route-details-actions.is-in-header .evb-rd-action > span {
        display: none;
    }

    body.evb-planner-page .evb-route-details-header #restart {
        flex: 0 0 30px;
        width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
    }
}

@media (max-width: 360px) {
    body.evb-planner-page .evb-route-details-header .evb-route-details-actions.is-in-header .evb-rd-action {
        flex-basis: 28px;
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px !important;
        min-height: 28px !important;
    }
}

/* Minimum snap is a summary, never a smaller viewport into the full itinerary. */
@media (max-width: 768px) {
    body.evb-planner-page .evb-route-details[data-sheet-size="compact"] { min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
    .evb-route-details[data-sheet-size="compact"] > :not(.evb-route-sheet-handle):not(.evb-route-details-scroll),
    .evb-route-details[data-sheet-size="compact"] .evb-route-details-scroll > :not(#route-container),
    .evb-route-details[data-sheet-size="compact"] .evb-rd-panel > :not(.evb-rd-header):not(.evb-rd-abrp-summary),
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-summary > :not(.evb-rd-abrp-main):not(.evb-rd-abrp-sub),
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-badge { display: none !important; }
    .evb-route-details[data-sheet-size="compact"] .evb-route-details-scroll { overflow: hidden; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-panel { padding: 0 12px 6px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-header { margin-bottom: 5px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-summary { padding: 6px 9px; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-time { font-size: 20px; line-height: 1.2; }
    .evb-route-details[data-sheet-size="compact"] .evb-rd-abrp-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.4; }
}

/* Full forecasts remain readable on narrow screens and never widen the sheet. */
.evb-rd-weather {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    border-radius: 8px;
}
.evb-rd-condition.is-weather { flex-wrap: wrap; }
.evb-rd-power { min-width: 0; }
.evb-rd-charge-head { flex-wrap: wrap; }