/**
 * The itinerary timeline in the ticket details modal.
 *
 * One rail down the middle column: a ring at every airport, a line for every
 * flight, and the clock times in their own column so they align down the page. A
 * connection breaks the rail with dashed rules, because a wait is an interruption
 * of the journey and not another leg of it.
 *
 * The city is the line a reader's eye lands on; the code and the airport name are
 * its caption. That is the same order as on the card, so the modal confirms what
 * the card said rather than restating it differently.
 */

.tbo-modal__itinerary {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/*
 * One row: city path (or OD fallback) on the left, cabin chip on the right.
 * nowrap + min-width:0 let JS measure overflow and swap the path wholesale —
 * never cut a city name with an ellipsis.
 */
.tbo-itinerary__head {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px 12px;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--tt-hairline);
}

.tbo-itinerary__title {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.tbo-itinerary__route {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tbo-itinerary__direction {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    color: var(--tt-accent);
    text-transform: uppercase;
}

/*
 * Chips mark identity. Flight number stays quiet; cabin class takes the ticket
 * accent — pale teal fill, saturated label — so the fare class reads at a glance
 * against the grey of the timeline around it.
 */
.tbo-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text-secondary);
    white-space: nowrap;
    background: var(--tt-chip);
    border-radius: 999px;
}

.tbo-chip--cabin {
    align-self: center;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tt-accent);
    background: var(--tt-accent-soft);
}

/* "Flight" stays quiet; the number is what a traveller looks up on the board. */
.tbo-chip--flight {
    gap: 5px;
}

.tbo-chip--flight .tbo-chip__label {
    color: var(--color-text-secondary);
}

.tbo-chip--flight .tbo-chip__value {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tt-accent);
}

.tbo-legs {
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
}

/* Each row is: time, rail, content.
 * Rows stretch so the middle rail cell matches the tallest column; the stroke is
 * then just top/bottom of that cell — no measured heights, no JS. */

.tbo-leg__row {
    display: grid;
    grid-template-columns: 52px 16px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.tbo-leg__time {
    display: flex;
    flex-direction: column;
    padding-top: 1px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* Written only where the calendar day changes on the way down the rail. */
.tbo-leg__date {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tbo-leg__duration {
    padding: 8px 0;
    font-size: 11.5px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tbo-leg__rail {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Node center sits at 9.5px (5px margin + 4.5px radius); stroke meets it there. */
.tbo-leg__rail::before {
    position: absolute;
    left: 50%;
    width: 1px;
    content: "";
    background: var(--tt-rail);
    transform: translateX(-50%);
}

/* The line leaves the departure ring, runs the length of the flight, and stops at
   the arrival ring. */
.tbo-leg__rail--departure::before {
    top: 9.5px;
    bottom: 0;
}

.tbo-leg__rail--flight::before {
    top: 0;
    bottom: 0;
}

.tbo-leg__rail--arrival::before {
    top: 0;
    height: 9.5px;
}

.tbo-leg__node {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    background: var(--tt-bg);
    border: 2px solid var(--tt-accent);
    border-radius: 50%;
}

.tbo-leg__place {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tbo-leg__city {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: baseline;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tbo-leg__code {
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--tt-accent);
}

.tbo-leg__airport {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--color-text-muted);
}

/* The flight itself, between the two stops. */

.tbo-leg__flight {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 7px 0;
}

.tbo-leg__flight-head {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 9px;
    align-items: center;
    min-width: 0;
}

.tbo-leg__flight-head .tbo-ticket__airline-logo {
    width: 22px;
    height: 22px;
}

.tbo-leg__carrier {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Cabin (when mixed), aircraft, operator and baggage as one sentence. */
.tbo-leg__facts {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.tbo-leg__alert {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tt-warn);
}

/* The wait between two legs. */

.tbo-wait {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    align-items: center;
    padding: 8px 0 8px 68px;
    margin: 6px 0;
    font-size: 12px;
    color: var(--color-text-secondary);
    border-top: 1px dashed var(--tt-hairline);
    border-bottom: 1px dashed var(--tt-hairline);
}

.tbo-wait .tbo-icon {
    color: var(--color-text-muted);
}

/*
 * A change of terminal is the part of a connection a traveller can be caught by,
 * so it sits immediately after the wait rather than at the opposite edge of the
 * row, where it read as an unrelated note.
 */
.tbo-wait__terminals {
    font-weight: 600;
    color: var(--tt-warn);
}

.tbo-wait__terminals::before {
    margin-right: 8px;
    color: var(--color-text-muted);
    content: "·";
}