/*
 * Route Roadbook.
 * This component is the loud surface; surrounding route sections stay quiet.
 */

.vm-route-page,
.vm-route-page h1,
.vm-route-page h2,
.vm-route-page h3,
.vm-route-page p,
.vm-route-page figure {
    margin: var(--radius-none);
}

.vm-route-intro {
    background: var(--indigo-deep);
    color: var(--bone);
}

.vm-route-intro__eyebrow,
.vm-roadbook-section__eyebrow,
.vm-route-intro__facts {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-display);
    text-transform: uppercase;
}

.vm-route-intro__eyebrow,
.vm-roadbook-section__eyebrow {
    color: var(--saffron);
}

.vm-route-intro h1,
.vm-roadbook-section h2 {
    max-inline-size: var(--measure-body);
    color: var(--bone);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-route-intro h1 {
    margin-block-start: var(--space-4);
    font-size: var(--step-4);
}

.vm-route-intro__summary {
    max-inline-size: var(--measure-body);
    margin-block-start: var(--space-4) !important;
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
    font-size: var(--step-1);
}

.vm-route-intro__facts {
    margin-block-start: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: color-mix(in srgb, var(--bone) var(--footer-meta-opacity), transparent);
}

.vm-roadbook-section {
    scroll-margin-block-start: var(--header-height);
    background: var(--indigo-deep);
    color: var(--bone);
}

.vm-roadbook-section__header {
    max-inline-size: var(--measure-body);
    margin-block-end: var(--space-6);
}

.vm-roadbook-section h2 {
    margin-block-start: var(--space-3);
    font-size: var(--step-3);
}

.vm-roadbook-empty {
    max-inline-size: var(--measure-body);
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
}

.vm-roadbook-status {
    max-inline-size: var(--measure-body);
    margin-block-end: var(--space-6);
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
    border: var(--border-dark);
    border-inline-start: var(--border-success-rule);
    background: var(--indigo-raised);
    color: var(--bone);
}

.vm-roadbook-status strong {
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wordmark);
    text-transform: uppercase;
}

.vm-roadbook-sticky {
    position: sticky;
    inset-block-start: var(--header-height);
    z-index: calc(var(--z-header) - 1);
    block-size: var(--roadbook-sticky-height);
    margin-block-end: calc(var(--roadbook-sticky-height) * -1);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-block-end: var(--border-dark);
    background: var(--indigo-deep);
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wordmark);
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--space-2) * -1));
    transition:
        opacity var(--dur-fast) var(--ease),
        visibility var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
    pointer-events: none;
}

.vm-roadbook-sticky.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.vm-roadbook-sticky__time {
    color: var(--saffron);
}

.vm-roadbook-layout {
    margin-block-start: var(--space-6);
}

.vm-roadbook-strip {
    position: relative;
}

.vm-roadbook-list {
    position: relative;
    z-index: 1;
    margin: var(--radius-none);
    padding: var(--radius-none);
    list-style: none;
}

.vm-roadbook-list::before,
.vm-roadbook-strip__progress {
    content: "";
    position: absolute;
    inset-block: var(--space-2);
    inset-inline-start: calc(var(--roadbook-rail-width) / 2);
    inline-size: var(--roadbook-rail-line-width);
}

.vm-roadbook-list::before {
    background: var(--fes-green);
}

.vm-roadbook-strip__progress {
    z-index: 2;
    inset-inline-start: calc((var(--roadbook-rail-width) / 2) - var(--roadbook-rail-line-width));
    inline-size: calc(var(--roadbook-rail-line-width) * 3);
    background: var(--saffron);
    transform: scaleY(var(--roadbook-progress, 0));
    transform-origin: top;
}

.vm-roadbook-stop,
.vm-roadbook-day-marker {
    position: relative;
    padding-inline-start: calc(var(--roadbook-rail-width) + var(--space-4));
}

.vm-roadbook-stop + .vm-roadbook-stop,
.vm-roadbook-stop + .vm-roadbook-day-marker,
.vm-roadbook-day-marker + .vm-roadbook-stop {
    margin-block-start: var(--space-2);
}

.vm-roadbook-day-marker {
    margin-block: var(--space-5) var(--space-3);
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wordmark);
    line-height: var(--leading-display);
    list-style: none;
    text-transform: uppercase;
}

.vm-roadbook-stop::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset-block-start: var(--space-3);
    inset-inline-start: calc((var(--roadbook-rail-width) / 2) - (var(--space-2) / 2));
    inline-size: var(--space-2);
    block-size: var(--space-2);
    background: var(--fes-green);
    box-shadow: 0 0 0 var(--space-1) var(--indigo-deep);
}

.vm-roadbook-stop.is-current::before {
    background: var(--saffron);
}

.vm-roadbook-stop__card {
    padding-block: var(--space-2);
}

.vm-roadbook-stop__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3);
}

.vm-roadbook-stop__time,
.vm-roadbook-stop__type,
.vm-roadbook-transit__meta,
.vm-roadbook-elevation__label,
.vm-roadbook-profile figcaption {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wordmark);
    line-height: var(--leading-display);
    text-transform: uppercase;
}

.vm-roadbook-stop__time {
    color: var(--saffron);
}

.vm-roadbook-stop__type {
    color: color-mix(in srgb, var(--bone) var(--roadbook-transit-opacity), transparent);
    text-align: end;
}

.vm-roadbook-stop {
    scroll-margin-block-start: calc(var(--header-height) + var(--roadbook-sticky-height));
}

.vm-roadbook-stop h3 {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-1);
    color: var(--bone);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-roadbook-stop__image {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-3) !important;
    background: var(--indigo-raised);
}

.vm-roadbook-stop__image-media {
    inline-size: 100%;
    block-size: clamp(10rem, 44vw, 13rem);
    display: block;
    filter: var(--media-grade);
    object-fit: cover;
}

.vm-roadbook-stop__note {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-2);
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
}

.vm-roadbook-stop__note > * + * {
    margin-block-start: var(--space-3);
}

.vm-roadbook-stop__light {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-3) !important;
    padding-inline-start: var(--space-3);
    border-inline-start: var(--border-success-rule);
    color: var(--bone);
}

.vm-roadbook-transit {
    position: relative;
    margin-block: var(--space-4) var(--space-5);
    padding-block: var(--space-4);
}

.vm-roadbook-transit::before {
    content: "";
    position: absolute;
    inset-block: var(--radius-none);
    inset-inline-start: calc(((var(--roadbook-rail-width) + var(--space-4)) * -1) + (var(--roadbook-rail-width) / 2));
    inline-size: var(--roadbook-rail-line-width);
    background: repeating-linear-gradient(
        to bottom,
        var(--fes-green) 0 var(--space-1),
        var(--indigo-deep) var(--space-1) var(--space-2)
    );
}

.vm-roadbook-transit__meta {
    max-inline-size: var(--measure-roadbook-note);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: color-mix(in srgb, var(--bone) var(--roadbook-transit-opacity), transparent);
}

.vm-roadbook-elevation {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-3);
    color: var(--fes-green);
}

.vm-roadbook-elevation__svg {
    inline-size: 100%;
    block-size: var(--roadbook-mobile-elevation-height);
    display: block;
}

.vm-roadbook-elevation__line {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--roadbook-rail-line-width);
    vector-effect: non-scaling-stroke;
}

.vm-roadbook-elevation__node {
    fill: var(--fes-green);
}

.vm-roadbook-elevation__node--end {
    fill: var(--saffron);
}

.vm-roadbook-elevation__label {
    margin-block-start: var(--space-1);
    color: var(--saffron);
}

.vm-roadbook-media {
    display: none;
}

.vm-roadbook-profile {
    position: relative;
    display: none;
    margin-block-start: var(--space-8);
    color: var(--fes-green);
}

.vm-roadbook-profile-panel {
    display: none;
}

.vm-roadbook-profile__svg {
    inline-size: 100%;
    block-size: var(--roadbook-desktop-elevation-height);
    display: block;
}

.vm-roadbook-profile__line {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--roadbook-rail-line-width);
    vector-effect: non-scaling-stroke;
}

.vm-roadbook-profile__baseline {
    stroke: color-mix(in srgb, var(--bone) var(--roadbook-transit-opacity), transparent);
    stroke-width: var(--roadbook-rail-line-width);
    vector-effect: non-scaling-stroke;
}

.vm-roadbook-profile__stop-marker {
    fill: var(--indigo-deep);
    stroke: var(--fes-green);
    stroke-width: var(--roadbook-rail-line-width);
    vector-effect: non-scaling-stroke;
}

.vm-roadbook-profile__stop-marker--confirmed {
    fill: var(--saffron);
    stroke: var(--saffron);
}

.vm-roadbook-profile__marker {
    position: absolute;
    inset-block-start: var(--radius-none);
    inset-inline-start: calc(var(--roadbook-profile-progress, 0) * 100%);
    inline-size: var(--roadbook-rail-line-width);
    block-size: var(--roadbook-desktop-elevation-height);
    background: var(--saffron);
    transform: translateX(-50%);
    pointer-events: none;
}

.vm-roadbook-profile__high-label {
    fill: var(--saffron);
    font-family: var(--font-mono);
    font-size: 4px;
    letter-spacing: 0.02em;
    text-anchor: middle;
}

.vm-roadbook-profile__labels {
    position: relative;
    min-block-size: calc(var(--space-4) * 7);
    margin-block-start: calc(var(--space-2) * -1);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: var(--tracking-wordmark);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--bone) 72%, transparent);
}

.vm-roadbook-profile__labels span {
    position: absolute;
    inset-block-start: calc(var(--profile-label-row, 0) * var(--space-4));
    inset-inline-start: var(--profile-label-x);
    max-inline-size: 4.75rem;
    transform: translateX(-50%);
    text-align: center;
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
}

.vm-roadbook-profile figcaption {
    margin-block-start: var(--space-2);
    color: color-mix(in srgb, var(--bone) var(--roadbook-transit-opacity), transparent);
}

@media (min-width: 768px) {
    .vm-roadbook-strip {
        max-inline-size: var(--roadbook-desktop-strip-width);
    }
}

@media (min-width: 1024px) {
    .vm-roadbook-sticky {
        display: none;
    }

    .vm-roadbook-stop h3 {
        font-size: var(--step-3);
    }

    .vm-roadbook-stop__image {
        display: none;
    }

    .vm-roadbook-profile--band {
        inline-size: 100%;
        margin-block: var(--space-6) var(--space-8);
        display: block;
        position: sticky;
        inset-block-start: var(--header-height);
        z-index: calc(var(--z-header) - 2);
        background: var(--indigo-deep);
    }

    .vm-roadbook-layout.has-media {
        display: grid;
        grid-template-columns: minmax(0, var(--roadbook-desktop-strip-width)) minmax(0, 1fr);
        gap: var(--space-8);
        align-items: start;
    }

    .vm-roadbook-layout.has-media .vm-roadbook-strip {
        max-inline-size: none;
    }

    .vm-roadbook-layout.has-no-media {
        max-inline-size: var(--roadbook-desktop-measure);
        margin-inline: auto;
    }

    .vm-roadbook-layout.has-no-media .vm-roadbook-strip {
        inline-size: 100%;
        max-inline-size: none;
    }

    .vm-roadbook-media {
        display: block;
        align-self: stretch;
        min-block-size: 100%;
    }

    .vm-roadbook-media__sticky {
        position: sticky;
        inset-block-start: calc(var(--header-height) + var(--space-6));
        aspect-ratio: var(--roadbook-media-ratio);
        overflow: hidden;
        background: var(--indigo-raised);
    }

    .vm-roadbook-media__figure,
    .vm-roadbook-media__profile {
        position: absolute;
        inset: var(--radius-none);
        opacity: 0;
        transition: opacity var(--dur-image) var(--ease);
    }

    .vm-roadbook-media__figure.is-active,
    .vm-roadbook-section.has-profile-media-fallback .vm-roadbook-media__profile {
        opacity: 1;
    }

    .vm-roadbook-media__profile {
        display: block;
        margin: var(--radius-none);
        padding: var(--space-6);
        background: var(--indigo-raised);
        color: var(--fes-green);
    }

    .vm-roadbook-media__profile .vm-roadbook-profile__svg {
        block-size: calc(100% - var(--space-8));
    }

    .vm-roadbook-media__profile .vm-roadbook-profile__marker {
        inset-block-start: var(--space-6);
        block-size: calc(100% - var(--space-8));
    }

    .vm-roadbook-media__image {
        inline-size: 100%;
        block-size: 100%;
        display: block;
        filter: var(--media-grade);
        object-fit: cover;
    }

    .vm-roadbook-media figcaption {
        position: absolute;
        inset-inline: var(--space-4);
        inset-block-end: var(--space-4);
        color: var(--bone);
        font-family: var(--font-mono);
        font-size: var(--step--1);
        letter-spacing: var(--tracking-wordmark);
        text-transform: uppercase;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vm-roadbook-media__figure,
    .vm-roadbook-media__profile,
    .vm-roadbook-sticky {
        transition: none;
    }
}

/* TASK 15: keep the roadbook ending from visually running into the next dark section. */
.vm-roadbook-section {
    padding-block-end: var(--space-8);
}

@media (min-width: 1024px) {
    .vm-roadbook-section {
        padding-block-end: var(--space-10);
    }
}
/* TASK 20: separate return roadbook. The warning stays outside the collapsed
 * section because the flight-risk message must be visible even when the return
 * details are not expanded. */
.vm-roadbook-section--return-roadbook-stops {
    padding-block-start: var(--space-8);
    border-block-start: var(--border-dark);
}

.vm-roadbook-driver-warning {
    max-inline-size: var(--measure-roadbook-note);
    margin: var(--radius-none) var(--radius-none) var(--space-7);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-success-rule);
    color: var(--bone);
}

.vm-roadbook-driver-warning blockquote,
.vm-roadbook-driver-warning figcaption,
.vm-roadbook-return-note {
    margin: var(--radius-none);
}

.vm-roadbook-driver-warning figcaption {
    margin-block-start: var(--space-3);
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-wordmark);
    line-height: var(--leading-display);
    text-transform: uppercase;
}

.vm-roadbook-disclosure {
    border-block-start: var(--border-dark);
    border-block-end: var(--border-dark);
}

.vm-roadbook-disclosure__summary {
    min-block-size: var(--control-height);
    padding-block: var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    cursor: pointer;
    list-style: none;
}

.vm-roadbook-disclosure__summary::-webkit-details-marker {
    display: none;
}

.vm-roadbook-disclosure__title {
    display: block;
    margin-block-start: var(--space-2);
    color: var(--bone);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
}

.vm-roadbook-disclosure__intro {
    display: block;
    max-inline-size: var(--measure-body);
    margin-block-start: var(--space-2);
    color: color-mix(in srgb, var(--bone) var(--footer-link-opacity), transparent);
}

.vm-roadbook-disclosure__toggle {
    flex: 0 0 auto;
    color: var(--saffron);
    font-family: var(--font-mono);
    font-size: var(--step-2);
    line-height: var(--leading-display);
}

.vm-roadbook-disclosure[open] .vm-roadbook-disclosure__toggle {
    transform: rotate(45deg);
}

.vm-roadbook-disclosure__body {
    padding-block: var(--space-6) var(--space-7);
}

.vm-roadbook-return-note {
    max-inline-size: var(--measure-roadbook-note);
    margin-block-start: var(--space-7);
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-success-rule);
    color: var(--bone);
}

@media (min-width: 1024px) {
    .vm-roadbook-section--return-roadbook-stops {
        padding-block-start: var(--space-9);
    }
}
@media (min-width: 1024px) {
    .vm-roadbook-section--return-roadbook-stops .vm-roadbook-layout.has-no-media {
        max-inline-size: var(--roadbook-desktop-strip-width);
        margin-inline: var(--radius-none);
    }

    .vm-roadbook-section--return-roadbook-stops .vm-roadbook-layout.has-no-media .vm-roadbook-strip {
        inline-size: 100%;
        max-inline-size: none;
    }
}