/*
 * Route pages (/routes, /routes/{origin}/{destination}).
 *
 * These pages are chapters of the /explore magazine: route.html takes the masthead, lede,
 * chapter type, ruled interlude rows, FAQ and colophon straight from explore.css (its critical
 * slice is inlined, the full sheet is deferred). This file holds only what a journey needs on
 * top of that: the title header, the facts strip, the section rhythm, the bus picker + map and the stop table.
 *
 * Tokens (--ink, --canvas, --surface, --primary, --terracotta, --sand ...) are explore.css's;
 * never hard-code a colour here or the alternate skins (DESIGN.md) stop applying. explore.css
 * has no --line-strong or --gold, so --rule-strong is derived below and --sand stands in for gold.
 */

.route-body {
    --rule-strong: color-mix(in srgb, var(--ink) 22%, var(--canvas));
}

/* explore.css has no skip link (the page it was written for has none); hidden until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--ink);
}

.skip-link:focus {
    left: 12px;
    top: 8px;
}

/* Neither page has a cover or a route run in its masthead: both open on their title, so the
   utility links sit at the right edge on their own. */
.masthead--bare .masthead__utility {
    margin-left: auto;
}

.rt-head {
    padding-bottom: clamp(20px, 3vh, 40px);
}

/* Every header, and the index's list of routes, shares the body's column (.rt: 1400px, centred), so
   the breadcrumb, title, intro and facts strip all start on one line however wide the screen, and the
   indent does not change between /routes and a route page. */
.rt-head--page,
.rt-index {
    max-width: 1400px;
    margin: 0 auto;
}

.rt-head .hub-breadcrumb {
    padding-top: clamp(20px, 3.4vh, 40px);
}

/* With no breadcrumb above it (the index) the title gets the breadcrumb's breathing room. */
.rt-head > .rt-title:first-child {
    padding-top: clamp(28px, 5vh, 56px);
}

.rt-title {
    margin: 0;
    padding: clamp(14px, 2.2vh, 26px) var(--gutter) 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(32px, 4.8vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

@media (max-width: 860px) {
    .rt-title {
        font-size: clamp(30px, 8.6vw, 46px);
    }
}

/* Transport details last checked / byline: under the intro, in the lede's second column. */
.rt-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: clamp(12px, 1.6vh, 20px) 0 0;
    font-size: clamp(13.5px, 0.95vw, 15px);
    line-height: 1.5;
    color: var(--muted);
}

.rt-meta a {
    color: var(--ink-soft);
}

@media (max-width: 860px) {
    .rt-meta {
        grid-column: 1;
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
   Body. One column of sections under the cover, each opened by a rule and a serif heading, the
   way a chapter is. Prose stays at a readable measure.
   ------------------------------------------------------------------ */

.rt {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.rt-notice {
    margin: clamp(18px, 2.6vh, 30px) 0 0;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--terracotta);
    background: var(--surface);
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.rt-notice p {
    margin: 0;
}

.rt-notice .rt-notice__title {
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--ink);
}

/* At a glance: four figures across a ruled strip, in the display serif. */
.rt-facts {
    margin: clamp(22px, 3vh, 38px) 0 0;
    border-top: 1px solid var(--ink);
    border-bottom: var(--rule);
}

.rt-facts__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.rt-facts__item {
    padding: clamp(14px, 2vh, 22px) clamp(12px, 1.6vw, 24px);
    border-left: var(--rule);
}

.rt-facts__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.rt-facts__item dt {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--terracotta-ink);
}

.rt-facts__item dd {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 26px);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

@media (max-width: 860px) {
    .rt-facts__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rt-facts__item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }

    .rt-facts__item:nth-child(n + 3) {
        border-top: var(--rule);
    }
}

.rt-section {
    margin: clamp(30px, 4.4vh, 60px) 0 0;
    padding: clamp(26px, 3.6vh, 46px) 0 0;
    border-top: var(--rule);
}

.rt-h2 {
    margin: 0 0 clamp(12px, 1.8vh, 22px);
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-wrap: balance;
    scroll-margin-top: 90px;
}

.rt-prose {
    max-width: 68ch;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.72;
    color: var(--ink-soft);
}

.rt-prose p,
p.rt-prose {
    margin: 0 0 0.85em;
}

.rt-prose a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.rt-prose a:hover {
    text-decoration-color: currentColor;
}

.rt-prose-section {
    scroll-margin-top: 90px;
}

/* Buses and boats: a ruled list, operator in the serif, the sign beside it. */
.rt-list {
    list-style: none;
    max-width: 78ch;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ink);
}

.rt-list li {
    padding: clamp(12px, 1.6vh, 18px) 0;
    border-bottom: var(--rule);
}

.rt-list__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0 0 4px;
    font-family: var(--serif);
    font-size: clamp(18px, 1.6vw, 24px);
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.rt-list__sign {
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.rt-list__note {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.route-caveat,
.route-empty {
    margin: 12px 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.route-empty {
    padding: clamp(24px, 4vh, 48px) var(--gutter);
}

/* The options table (the airport page): ruled, no boxes. */
.rt-table {
    overflow-x: auto;
    border-top: 1px solid var(--ink);
    -webkit-overflow-scrolling: touch;
}

.rt-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rt-table th,
.rt-table td {
    padding: 12px 14px 12px 0;
    border-bottom: var(--rule);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.rt-table thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.rt-table tbody th {
    min-width: 8.5rem;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
}

.rt-table td {
    color: var(--ink-soft);
}

/* The note repeated as its own full-width row is for phones only. */
.rt-table__note-row {
    display: none;
}

@media (max-width: 640px) {
    /* Four columns leave the note a sliver a few words wide. Drop the column and show the note
       as a colspan-3 row directly under its option instead. */
    .rt-table__notes-col {
        display: none;
    }

    .rt-table tbody th {
        min-width: 7rem;
    }

    .rt-table__note-row {
        display: table-row;
    }

    /* The option row and its note row read as one item: the rule sits under the note. */
    .rt-table tbody tr:has(+ .rt-table__note-row) > * {
        border-bottom: 0;
        padding-bottom: 2px;
    }

    .rt-table__note-row td {
        padding: 0 0 14px;
        font-size: 0.9rem;
    }
}

/* Place lists (along the road / at the far end). */
.rt-links {
    list-style: none;
    max-width: 78ch;
    margin: 0;
    padding: 0;
}

.rt-links li {
    margin-bottom: 10px;
}

.rt-links a {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sand);
}

.rt-links a:hover {
    border-bottom-color: var(--ink);
}

.route-places__note {
    display: block;
    font-size: 0.9rem;
    color: var(--muted);
}

/* "Explore {area}": explore.css's .more-link, in a section of its own at the foot of the page. */
.route-explore {
    padding-bottom: clamp(8px, 1.4vh, 16px);
}

/* The routes index: a group per starting point, then ruled rows (explore's interlude). */
.rt-group .chapter__title {
    font-size: clamp(34px, 5vw, 68px);
}

.rt-rows .interlude__desc {
    max-width: 70ch;
}

.rt-rows .interlude__kicker {
    color: var(--terracotta-ink);
}

/* ------------------------------------------------------------------
   Bus-line pages: the stop diagram (a stop x line table drawn as a vertical strip map).
   Each column is one bus line; a dot on a bar means that line stops there. Line colours come
   from theme tokens so the alternate skins apply.
   ------------------------------------------------------------------ */

.route-line__scroll {
    overflow-x: auto;
    margin-top: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.route-line__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
}

.route-line__table th,
.route-line__table td {
    padding: 0;
    vertical-align: middle;
}

.route-line__corner,
.route-line__head {
    padding: 0.25rem 0.5rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    vertical-align: bottom;
    border-bottom: 1px solid var(--rule-strong);
}

.route-line__head {
    min-width: 5.5rem;
    text-align: center;
}

.route-line__op,
.route-line__sign {
    display: block;
}

.route-line__sign {
    font-weight: 400;
    color: var(--muted);
}

.route-line__stop {
    padding: 0.35rem 0.75rem 0.35rem 0;
    font-weight: 500;
    text-align: left;
    line-height: 1.3;
    border-bottom: 1px solid var(--line);
}

.route-line__stop.is-headline {
    font-weight: 700;
}

.route-line__stop a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.route-line__note {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
}

.route-line__cell {
    position: relative;
    height: 2.4rem;
    border-bottom: 1px solid var(--line);
    --line-color: var(--primary);
}

.route-line__cell[data-col="1"] { --line-color: var(--ink-soft); }
.route-line__cell[data-col="2"] { --line-color: color-mix(in srgb, var(--primary) 50%, var(--surface)); }
.route-line__cell[data-col="3"] { --line-color: var(--muted); }

/* The bar runs the full row height so consecutive stops join into one line... */
.route-line__cell.is-on::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0.5rem;
    margin-left: -0.25rem;
    background: var(--line-color);
}

/* ...starting and ending mid-row at the first and last stop the line serves. */
.route-line__cell.is-on[style*="--edge:start"]::before { top: 50%; }
.route-line__cell.is-on[style*="--edge:end"]::before { bottom: 50%; }

.route-line__cell.is-on::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    margin: -0.425rem 0 0 -0.425rem;
    border: 3px solid var(--line-color);
    border-radius: 50%;
    background: var(--surface);
}

.route-lines__list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.route-lines__list li {
    margin-bottom: 0.9rem;
}

.route-lines__name {
    margin: 0 0 0.15rem;
    font-size: 1rem;
    line-height: 1.35;
}

.route-lines__sign {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--muted);
}

.route-lines__note {
    margin: 0;
}

@media (max-width: 560px) {
    .route-line__head {
        min-width: 4.25rem;
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .route-line__stop {
        padding-right: 0.4rem;
    }
}

/* ------------------------------------------------------------------
   Bus-line pages: the map (Leaflet, loaded when scrolled into view) and the places list.
   The canvas has a fixed height so the map adds no layout shift.
   ------------------------------------------------------------------ */

/* One colour per bus line: theme tokens, so the alternate skins apply. */
.route-map {
    --route-line-0: var(--primary);
    --route-line-1: var(--terracotta);
    --route-line-2: var(--teal);
    --route-line-3: var(--ink-soft);
}

.route-map__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.route-map__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.route-map__chip:hover {
    border-color: var(--ink-soft);
}

.route-map__chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.route-map__chip.is-active {
    border-color: var(--ink);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.route-map__chip-text {
    display: flex;
    flex-direction: column;
}

.route-map__chip-op {
    font-size: 0.88rem;
    font-weight: 600;
}

.route-map__chip-sign {
    font-size: 0.76rem;
    color: var(--muted);
}

.route-map__swatch {
    display: inline-block;
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--route-line-0);
}

.route-map__chip .route-map__swatch {
    margin-right: 0;
}

.route-map__chip[data-line="1"] .route-map__swatch { background: var(--route-line-1); }
.route-map__chip[data-line="2"] .route-map__swatch { background: var(--route-line-2); }
.route-map__chip[data-line="3"] .route-map__swatch { background: var(--route-line-3); }

/* Two lines of room, so choosing a bus never moves the map. */
.route-map__summary {
    min-height: 2.8em;
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ink-soft);
}

.route-map__canvas {
    /* Leaflet's panes and controls carry z-indexes up to 1000; keep them inside the map so they
       never draw over the sticky masthead. */
    isolation: isolate;
    position: relative;
    height: 32rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    /* Vertical swipes scroll the page; only sideways drags and pinches move the map. */
    touch-action: pan-y pinch-zoom;
}

.route-map__canvas .leaflet-control-attribution {
    font-size: 11px;
    line-height: 1.4;
}

.route-map__canvas.leaflet-container {
    font: inherit;
    background: var(--surface-2);
    touch-action: pan-y pinch-zoom;
}

.route-map__fallback {
    margin: 0;
    padding: 1rem;
    color: var(--muted);
}

/* Leaflet tooltips as plain map labels: no box, no arrow, a halo so text reads over the roads. */
.route-map__canvas .route-map__label {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    /* A solid halo so the town name reads over roads, coastlines and the route line. */
    text-shadow: 0 0 2px var(--surface), 0 0 2px var(--surface), 0 0 3px var(--surface),
        0 0 3px var(--surface), 0 0 5px var(--surface);
}

.route-map__canvas .route-map__label::before {
    display: none;
}

.route-map__canvas .route-map__label--major {
    /* Natural width up to the cap, not squeezed to the space beside the marker. */
    width: max-content;
    max-width: 12rem;
    font-size: 1.02rem;
    font-weight: 700;
    white-space: normal;
    line-height: 1.2;
}

.route-map__canvas .route-map__label--place {
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: var(--surface);
    text-shadow: none;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 30%, transparent);
}

.route-map__popup {
    font-size: 0.88rem;
    line-height: 1.4;
}

.route-map__popup p {
    margin: 0.25rem 0 0;
}

.route-map__popup ul {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
}

.route-map__popup-heading {
    font-weight: 600;
}

.route-map__popup ul.route-map__buses {
    padding-left: 0;
    list-style: none;
}

.route-map__canvas .route-map__label--dim {
    opacity: 0.4;
}

.route-along__stop {
    margin: 1rem 0 0.25rem;
    font-size: 1rem;
    line-height: 1.35;
}

.route-along__stop a {
    color: inherit;
}

@media (max-width: 560px) {
    .route-map__canvas {
        height: 26rem;
    }
}