/* busweb base.css — structure, layout, and the definition of every token.
   Company theming happens in site/assets/theme.css by overriding variables
   only. Nothing in this file may name an operator. (§13) */

:root {
    /* Brand. Overridden per company. */
    --brand: #005A32;
    --brand-dark: #003D22;
    --on-brand: #FFFFFF;

    /* Surfaces. A cool paper-green, not a warm cream: this is highway
       signage and painted metal, not stationery. */
    --paper: #F3F6F2;
    --surface: #FFFFFF;
    --surface-soft: #F8FAF8;
    --line: #CDD7CF;
    --line-strong: #718578;
    --brand-soft: #E7F1EB;
    --brand-soft: color-mix(in srgb, var(--brand) 9%, white);

    --ink: #14211A;
    /* AAA text contrast on both --paper and --surface. */
    --muted: #405047;

    /* Service state. Amber for late, never red — a late bus is not an error. */
    --on-time: #0F5B28;
    --late: #7A3F00;
    --alert: #941B16;
    --alert-bg: #FBEDEC;

    --radius: 14px;
    --radius-sm: 9px;
    --radius-lg: 20px;
    --gap: 1rem;
    --measure: 58rem;

    --shadow-card: 0 1px 2px rgb(20 33 26 / .06), 0 8px 24px rgb(20 33 26 / .055);
    --shadow-raised: 0 2px 6px rgb(20 33 26 / .10), 0 16px 38px rgb(20 33 26 / .10);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
}

a { color: var(--brand-dark); }

/* Times, delays and distances are data: align them in columns. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gap); }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.skip {
    position: absolute; left: -9999px;
}
.skip:focus {
    left: var(--gap); top: var(--gap); z-index: 10;
    background: var(--surface); padding: .5rem .75rem; border-radius: var(--radius);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------- header */

.masthead {
    background: var(--brand);
    color: var(--on-brand);
    padding: .6rem 0;
}
.masthead__inner { display: flex; align-items: center; gap: .75rem; }
.masthead__logo { height: 28px; width: auto; }
.masthead__name {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    /* Preserve the operator's supplied casing. Avoid forcing paragraph text
       to all caps, which can reduce readability for some users. */
    text-transform: none;
    margin: 0;
}
.masthead a { color: var(--on-brand); text-decoration: none; }
.masthead__name a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.masthead a:focus-visible,
.dirs__tab:focus-visible {
    outline-color: var(--on-brand);
}

/* --------------------------------------------------- destination board
   The rótulo in a bus windscreen: route number on a plate, destination
   in condensed caps. This is the page's first statement. */

.board {
    background: var(--brand);
    color: var(--on-brand);
    padding: .25rem 0 1.25rem;
}
.board__row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.board__plate {
    background: var(--on-brand);
    color: var(--brand);
    font-family: var(--font-data);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .2rem .5rem;
    border-radius: 3px;
}
.board__dest {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
    text-transform: uppercase;
}
/* Do not create secondary brand text through opacity: the previous .85
   blend measured about 6.53:1 and narrowly missed WCAG AAA 1.4.6. */
.board__sub { margin: .35rem 0 0; opacity: 1; color: var(--on-brand); font-size: .9rem; }

/* Direction tabs are real links to real URLs, not JavaScript state. */
.dirs { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.dirs__tab {
    display: inline-flex;
    padding: .45rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.45);
    color: var(--on-brand);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
}
.dirs__tab[aria-current="page"] {
    background: var(--on-brand);
    color: var(--brand);
    border-color: var(--on-brand);
}

/* ---------------------------------------------------------------- blocks */

main { padding-bottom: 3rem; }

.block { margin-top: 1.75rem; }
.block__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem; margin-bottom: .6rem;
}
.block__title {
    margin: 0;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.block__note { font-size: .8rem; color: var(--muted); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* ----------------------------------------------------------------- alert */

.alert {
    display: flex; gap: .7rem;
    background: var(--alert-bg);
    border: 1px solid var(--alert);
    border-left-width: 5px;
    border-radius: var(--radius);
    padding: .8rem .9rem;
    margin-top: 1.25rem;
}
.alert__mark { color: var(--alert); font-weight: 700; }
.alert__title { margin: 0 0 .2rem; font-size: 1rem; }
.alert__text { margin: 0; font-size: .9rem; color: var(--ink); }

/* -------------------------------------------------------------- vehicles */

.buses { display: grid; gap: .6rem; }
.bus {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem .85rem;
}
.bus__plate {
    font-family: var(--font-data);
    font-weight: 700;
    font-size: .95rem;
    border: 1.5px solid var(--ink);
    border-radius: 3px;
    padding: .15rem .4rem;
    white-space: nowrap;
}
.bus__where { min-width: 0; }
.bus__toward { margin: 0; font-weight: 600; }
.bus__next {
    margin: .1rem 0 0;
    font-size: .85rem;
    color: var(--muted);
    white-space: normal;
    overflow-wrap: anywhere;
}
.bus__delay { text-align: right; font-weight: 700; white-space: nowrap; }
.bus__delay--late { color: var(--late); }
.bus__delay--ontime { color: var(--on-time); }
.bus__held { color: var(--alert); font-size: .8rem; }

.empty {
    padding: .9rem;
    color: var(--muted);
    font-size: .92rem;
}

/* ------------------------------------------------------------ timetable
   A real table provides row/column relationships to assistive technology.
   The route rail is visual decoration inside the stop-header cells. */

.timetable-card { overflow-x: auto; }
.timetable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
}
.timetable th,
.timetable td {
    padding: .45rem .65rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.timetable tbody tr:last-child th,
.timetable tbody tr:last-child td { border-bottom: 0; }
.timetable thead th {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.timetable__stop-head { text-align: left; padding-left: 3.15rem !important; }
.timetable__time-head,
.timetable__time {
    width: 4rem;
    text-align: right;
    white-space: nowrap;
}
.timetable__row:nth-child(even) { background: #FAFCF9; }
.timetable__stop-cell {
    position: relative;
    min-width: 15rem;
    text-align: left;
    font-size: .88rem;
    font-weight: 400;
    padding-left: 3.15rem !important;
}
.timetable__stop-link {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}
.timetable__row--terminal .timetable__stop-link { font-weight: 700; }

/* Route line and nodes are non-text graphics; line-strong is deliberately
   >=3:1 against the white table surface. */
.timetable__stop-cell::before {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 0;
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    background: var(--line-strong);
}
.timetable__stop-cell::after {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--surface);
    border: 2.5px solid var(--line-strong);
}
.timetable tbody tr:first-child .timetable__stop-cell::before { top: 50%; }
.timetable tbody tr:last-child .timetable__stop-cell::before { bottom: 50%; }
.timetable__row--terminal .timetable__stop-cell::after {
    width: 13px;
    height: 13px;
    background: var(--brand);
    border-color: var(--brand);
}
.timetable__time { color: var(--muted); font-size: .85rem; }
.timetable__time--next { color: var(--ink); font-weight: 700; }

/* Live bus token is supplementary to the textual live-bus card. */
.strip__bus {
    display: block;
    width: fit-content;
    margin-top: .3rem;
    padding: .2rem .5rem;
    background: var(--brand);
    color: var(--on-brand);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}
.strip__bus::before { content: "▸ "; }

/* ------------------------------------------------------------------- map */

#map { height: 320px; border-radius: var(--radius); background: var(--line); }
.map-fallback { padding: .9rem; font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------- footer */

.foot {
    margin-top: 2.5rem;
    padding: 1.25rem 0 2rem;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--muted);
}
.foot p { margin: .2rem 0; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Live map progressive enhancement. Leaflet itself is loaded only on route
   pages with live_map enabled; these styles keep the vehicle label legible. */
.bus-map-icon {
    background: transparent;
    border: 0;
}
.bus-map-marker {
    position: relative;
    display: block;
    width: 82px;
    height: 103px;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / .28));
    transform: scale(var(--bus-marker-scale, 1));
    transform-origin: 50% 100%;
    transition: transform 160ms ease-out;
}
.bus-map-marker__svg {
    display: block;
    width: 100%;
    height: 100%;
}
.bus-map-marker__plate {
    position: absolute;
    left: 18.8%;
    top: 68.3%;
    width: 62.4%;
    height: 12.8%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 2px;
    overflow: hidden;
    color: #0A2A24;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: 900 8.5px/1 var(--font-data);
    letter-spacing: -.02em;
    text-align: center;
    white-space: nowrap;
}

/* ------------------------------------------------ accessibility / live UI */
.live-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .6rem;
    margin: 0 0 .6rem;
}
.live-controls__button {
    min-height: 44px;
    min-width: 44px;
    padding: .38rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand-dark);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    cursor: pointer;
}
.live-controls__button:hover { background: var(--paper); }
.live-controls__state { color: var(--muted); font-size: .76rem; }
.map-note { margin: -.15rem 0 .55rem; color: var(--muted); font-size: .82rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .45rem; }
.foot__nav a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    white-space: nowrap;
}
.home-secondary-link { margin: 1rem 0 0; }
.home-secondary-link a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
}

.stop-search { padding: .85rem; }
.stop-search label { display: block; margin-bottom: .35rem; font-weight: 650; }
.stop-search__row { display: flex; gap: .5rem; }
.stop-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: .55rem .65rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.stop-search input::placeholder {
    color: var(--muted);
    opacity: 1;
}
.stop-search button {
    min-height: 44px;
    padding: .55rem .85rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-brand);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.stop-directory { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.stop-directory li + li { border-top: 1px solid var(--line); }
.stop-directory a {
    display: block;
    min-height: 44px;
    padding: .65rem .8rem;
    color: var(--ink);
    text-decoration: none;
}
.stop-directory a:hover { background: var(--paper); }
.stop-directory__name { display: block; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.stop-directory__meta { display: block; margin-top: .15rem; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }

.prose { max-width: var(--measure); }
.prose section { margin-top: 1.75rem; }
.prose h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.prose p, .prose li { max-width: 65ch; }
.prose ul { padding-left: 1.3rem; }

/* --------------------------------------------------------- homepage/routes */
.route-list { display: grid; gap: .8rem; }
.route-card { padding: .9rem; }
.route-card__head { display: flex; align-items: flex-start; gap: .8rem; }
.route-card__plate { flex: 0 0 auto; background: var(--brand); color: var(--on-brand); }
.route-card__title { margin: 0; font-size: 1rem; line-height: 1.25; }
.route-card__meta { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.route-card__links { display: grid; gap: .45rem; margin-top: .8rem; }
.route-link {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 44px;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 650;
}
.route-link span { color: var(--muted); font-size: .8rem; font-weight: 400; white-space: nowrap; }
.route-link:hover { background: var(--paper); }

/* --------------------------------------------------------------- stop links */
.stop-board__name { text-transform: none; font-size: clamp(1.35rem, 5vw, 2rem); }

/* ----------------------------------------------------------- stop departures */
.departures { overflow: hidden; }
.departure {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .2rem .8rem;
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--line);
}
.departure:last-child { border-bottom: 0; }
.departure__route { min-width: 0; font-weight: 650; }
.departure__route a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.departure__vehicle {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .3rem;
    border: 1px solid var(--line-strong);
    border-radius: 3px;
    color: var(--muted);
    font-family: var(--font-data);
    font-size: .72rem;
    font-weight: 600;
}
.departure__time { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.departure__time strong { display: block; font-size: 1.1rem; }
.departure__time span { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.departure__detail { color: var(--muted); font-size: .8rem; }
.departure__delay { margin-left: .45rem; color: var(--late); font-weight: 650; }

/* -------------------------------------------------------- routes at one stop */
.stop-routes { overflow: hidden; }
.stop-route {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: center;
    padding: .7rem .85rem;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}
.stop-route:last-child { border-bottom: 0; }
.stop-route:hover { background: var(--paper); }
.stop-route__number { font-family: var(--font-data); font-weight: 700; }
.stop-route__dest { font-weight: 600; }
.stop-route__position { color: var(--muted); font-size: .78rem; white-space: nowrap; }

#stop-map { height: 280px; border-radius: var(--radius); background: var(--line); }

@media (max-width: 34rem) {
    .stop-route { grid-template-columns: auto 1fr; }
    .stop-route__position { grid-column: 2; white-space: normal; }
    .departure { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ------------------------------------------------------ route-page helpers */

.route-jump { display: none; }
.trip-picker { display: none; }
.trip-picker__check { display: none; }
.foot__phone { white-space: nowrap; }

@media (max-width: 34rem) {
    /* A long route page needs local navigation on a phone. */
    .route-jump {
        display: grid;
        /* minmax(0,1fr) is important for WCAG reflow: three 6rem minimum
           tracks plus gaps exceeded a 320 CSS-pixel viewport at 400% zoom. */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .4rem;
        margin-top: 1.1rem;
    }
    .route-jump__link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: .48rem .35rem;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        color: var(--brand-dark);
        text-align: center;
        text-decoration: none;
        font-size: .78rem;
        font-weight: 650;
        white-space: nowrap;
    }

    /* One trip at a time on narrow screens. The full timetable stays in the
       DOM and desktop still shows every trip as columns. */
    .has-js .trip-picker {
        display: flex;
        align-items: center;
        gap: .55rem;
        margin: 0 0 .6rem;
        min-width: 0;
    }
    .trip-picker__label {
        flex: 0 0 auto;
        color: var(--muted);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .trip-picker__choices {
        display: flex;
        gap: .4rem;
        min-width: 0;
        overflow-x: auto;
        padding: .15rem .1rem .2rem;
        scrollbar-width: thin;
    }
    .trip-picker__button {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        min-height: 44px;
        min-width: 44px;
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        background: var(--surface);
        color: var(--brand-dark);
        padding: .42rem .7rem;
        font: inherit;
        font-size: .82rem;
        cursor: pointer;
    }
    .trip-picker__button.is-selected {
        background: var(--brand);
        border-color: var(--brand);
        color: var(--on-brand);
        font-weight: 700;
    }
    .trip-picker__button.is-selected .trip-picker__check {
        display: inline;
        font-weight: 800;
    }

    /* Keep common phone actions comfortably above the 24px WCAG minimum
       target size. */
    .dirs__tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .live-controls__button { min-height: 44px; }
    .live-controls__state { flex-basis: 100%; }
    .stop-search__row { flex-direction: column; }
    .stop-search button { width: 100%; }

    /* Keep any genuinely two-dimensional no-JS table overflow local to the
       table card rather than making the whole page scroll horizontally. */
    .timetable-card { max-width: 100%; overflow-x: auto; }
    .timetable { width: 100%; max-width: 100%; table-layout: fixed; }
    /* width:100% here used to make the stop column 100% PLUS the fixed time
       column, which was the main 400% zoom/reflow bug. The stop column must
       simply consume the remaining width. */
    .timetable__stop-cell { min-width: 0; width: auto; line-height: 1.25; }
    .has-js .timetable th[data-trip],
    .has-js .timetable td[data-trip] { display: none; }
    .has-js .timetable th[data-trip].is-selected,
    .has-js .timetable td[data-trip].is-selected { display: table-cell; }
    .timetable__time-head,
    .timetable__time { width: 4.5rem; }
}


/* ------------------------------------------------------ extreme reflow
   WCAG 2.2 SC 1.4.10 is normally evaluated at a 320 CSS-pixel viewport
   (equivalent to 400% zoom on a 1280px-wide desktop viewport). These rules
   also make BusWeb usable at even narrower effective widths, such as a phone
   emulator combined with browser zoom. No information is removed. */
@media (max-width: 20rem) {
    .wrap { padding-inline: .5rem; }

    .route-jump { grid-template-columns: 1fr; }
    .route-jump__link { white-space: normal; }

    .dirs { align-items: stretch; }
    .dirs__tab { flex: 1 1 100%; }

    .live-controls { align-items: stretch; }
    .live-controls__button { width: 100%; }

    .bus {
        grid-template-columns: 1fr;
        align-items: start;
        gap: .35rem;
    }
    .bus__plate { width: fit-content; }
    .bus__delay { text-align: left; white-space: normal; }

    .has-js .trip-picker { display: block; }
    .trip-picker__label { display: block; margin-bottom: .3rem; }
    .trip-picker__choices {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .timetable th,
    .timetable td { padding: .4rem .25rem; }
    .timetable__stop-head,
    .timetable__stop-cell { padding-left: 1.45rem !important; }
    .timetable__stop-cell::before,
    .timetable__stop-cell::after { left: .7rem; }
    .timetable__time-head,
    .timetable__time { width: 3.2rem; }

    .route-link {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }
    .route-link span,
    .foot__phone { white-space: normal; }
}

/* Leaflet defaults to roughly 30px controls. Enlarge the two zoom controls
   to the WCAG 2.5.5 AAA enhanced target while keeping their familiar layout. */
#map .leaflet-control-zoom a,
#stop-map .leaflet-control-zoom a {
    width: 44px;
    height: 44px;
    line-height: 44px;
}


/* ================================================================ v0.4.0
   Visual refresh. This layer deliberately changes presentation only: data,
   semantics, focus behaviour, reflow rules and live-update controls remain
   intact. */

.icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.15em;
}
.icon--arrow { width: 1.05rem; height: 1.05rem; }

body {
    background:
        radial-gradient(circle at 50% -10rem, rgb(255 255 255 / .8), transparent 28rem),
        var(--paper);
}

.wrap { width: min(100%, var(--measure)); }

.masthead {
    padding: .35rem 0;
    border-bottom: 1px solid rgb(255 255 255 / .16);
    box-shadow: 0 1px 0 rgb(0 0 0 / .08);
}
.masthead__inner { min-height: 48px; gap: .85rem; }
.masthead__logo { height: 32px; }
.masthead__name { letter-spacing: .035em; font-weight: 700; }

.board {
    padding: .8rem 0 1.65rem;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 115%);
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);
}
.board__row { gap: .8rem; align-items: center; }
.board__plate {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: .3rem .62rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 rgb(0 0 0 / .08), 0 6px 18px rgb(0 0 0 / .10);
}
.board__sub { font-size: .92rem; font-weight: 650; line-height: 1.3; }
.board__dest {
    margin-top: .55rem;
    font-size: clamp(1.85rem, 6vw, 2.75rem);
    letter-spacing: -.035em;
    line-height: 1.02;
    text-transform: none;
}
.board__summary {
    margin: .55rem 0 0;
    color: var(--on-brand);
    font-size: .88rem;
    font-weight: 550;
}
.board__summary span { padding-inline: .25rem; }
.board--home .board__dest { max-width: 15ch; }
.board--stop .board__dest { max-width: 26ch; }

.dirs { margin-top: 1.15rem; gap: .55rem; }
.dirs__tab {
    padding: .55rem .9rem;
    background: rgb(255 255 255 / .08);
    border-color: rgb(255 255 255 / .55);
    backdrop-filter: blur(3px);
}
.dirs__tab:hover { background: rgb(255 255 255 / .16); }
.dirs__tab[aria-current="page"] {
    box-shadow: 0 5px 16px rgb(0 0 0 / .14);
    font-weight: 750;
}

main { padding-bottom: var(--space-7); }
.block { margin-top: 2.1rem; }
.block__head { margin-bottom: .72rem; }
.block__title {
    font-size: .94rem;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--ink);
    font-weight: 800;
}
.block__note { font-size: .82rem; font-weight: 650; }

.card {
    border-color: color-mix(in srgb, var(--line) 88%, white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.alert {
    align-items: flex-start;
    gap: .85rem;
    margin-top: 1.4rem;
    padding: .95rem 1rem;
    border-left-width: 4px;
    box-shadow: 0 4px 18px rgb(148 27 22 / .07);
}
.alert__mark {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--alert);
    color: #fff;
}
.alert__mark .icon { width: 20px; height: 20px; stroke-width: 2; }
.alert__title { font-size: 1.02rem; line-height: 1.25; }
.alert__text { margin-top: .25rem; line-height: 1.45; }

/* Compact transport navigation. */
.route-jump__link { gap: .4rem; }
.route-jump__link .icon { width: 1rem; height: 1rem; }

/* ------------------------------------------------------- live vehicle cards */
.buses { gap: .75rem; }
.bus {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    overflow: hidden;
}
.bus__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.bus__icon .icon { width: 25px; height: 25px; stroke-width: 1.9; }
.bus__where { min-width: 0; }
.bus__heading { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bus__toward { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.bus__plate {
    border-color: var(--line-strong);
    border-radius: 6px;
    background: var(--surface-soft);
    padding: .13rem .38rem;
    font-size: .78rem;
    color: var(--muted);
}
.bus__next-label {
    margin: .32rem 0 0;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .025em;
}
.bus__next { margin: .05rem 0 0; color: var(--ink); font-size: .92rem; font-weight: 650; line-height: 1.32; }
.status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: .3rem .62rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
}
.bus__delay--late { background: color-mix(in srgb, var(--late) 8%, white); }
.bus__delay--ontime { background: color-mix(in srgb, var(--on-time) 8%, white); }
.empty { padding: 1rem 1.1rem; }

.live-controls { margin-bottom: .75rem; }
.live-controls__button {
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / .035);
}
.live-controls__button:hover { background: var(--brand-soft); }

/* --------------------------------------------------------------------- map */
.map-shell {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--shadow-raised);
}
#map, #stop-map { border-radius: 0; }
#map { height: 360px; }
#stop-map { height: 300px; }
.map-overlay {
    position: absolute;
    z-index: 500;
    top: .8rem;
    left: .8rem;
    right: .8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    pointer-events: none;
}
.map-overlay__route,
.map-overlay__live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 32px;
    padding: .35rem .62rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .96);
    color: var(--ink);
    box-shadow: 0 4px 14px rgb(0 0 0 / .16);
    font-size: .76rem;
    font-weight: 800;
}
.map-overlay__live { color: var(--brand-dark); }
.map-overlay--stop { justify-content: flex-start; }
.map-note { margin-bottom: .7rem; }

/* Live vehicle marker styling is defined above with .bus-map-marker. */

/* -------------------------------------------------------------- timetable */
.timetable-card { overflow: clip; }
.timetable { border-radius: var(--radius); }
.timetable thead th {
    padding-top: .65rem;
    padding-bottom: .65rem;
    background: var(--surface-soft);
    color: var(--muted);
}
.timetable th,
.timetable td { padding-top: .52rem; padding-bottom: .52rem; }
.timetable__row:nth-child(even) { background: #F8FAF8; }
.timetable__row:hover { background: var(--brand-soft); }
.timetable__stop-link { text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.timetable__time--next { color: var(--brand-dark); }
.strip__bus { box-shadow: 0 2px 6px rgb(0 0 0 / .12); }

.trip-picker__button {
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgb(0 0 0 / .035);
}
.trip-picker__button.is-selected { box-shadow: 0 4px 12px rgb(0 90 50 / .18); }

/* --------------------------------------------------------------- homepage */
.route-list { gap: 1rem; }
.route-card { padding: 1.2rem; overflow: hidden; }
.route-card__head { gap: .9rem; align-items: center; }
.route-card__plate { min-height: 42px; font-size: 1rem; }
.route-card__identity { min-width: 0; }
.route-card__eyebrow {
    margin: 0 0 .12rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.route-card__title { font-size: 1.08rem; }
.route-card__meta { margin-top: .25rem; }
.route-card__path {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1rem;
    padding: .7rem .8rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .84rem;
    font-weight: 700;
}
.route-card__path .icon { width: 1.25rem; height: 1.25rem; }
.route-card__links { gap: .55rem; margin-top: .85rem; }
.route-link {
    padding: .72rem .78rem;
    border-radius: var(--radius-sm);
    border-color: var(--line);
    background: var(--surface-soft);
}
.route-link:hover { background: var(--brand-soft); border-color: var(--line-strong); }
.route-link__main { display: block; min-width: 0; }
.route-link__label { display: block; color: var(--ink); font-weight: 800; }
.route-link__meta { display: block; margin-top: .08rem; color: var(--muted); font-size: .75rem; font-weight: 550; }
.route-link > .icon { color: var(--brand); }
.home-secondary-link a {
    gap: .45rem;
    padding: .5rem .15rem;
    font-weight: 750;
    text-underline-offset: 3px;
}
.home-secondary-link .icon--arrow { margin-left: .1rem; }

/* ------------------------------------------------------------- stop board */
.departures { overflow: hidden; }
.departure { position: relative; padding: .9rem 1rem; }
.departure--primary {
    padding: 1rem 1.05rem 1.05rem;
    background: var(--brand-soft);
    border-left: 5px solid var(--brand);
}
.departure__eyebrow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .18rem;
    color: var(--brand-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.departure__eyebrow .icon { width: 1rem; height: 1rem; }
.departure--primary .departure__route { font-size: 1rem; }
.departure--primary .departure__time strong {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1;
    letter-spacing: -.04em;
}
.departure__time span { margin-top: .18rem; font-weight: 750; }
.departure__vehicle { border-radius: 6px; background: var(--surface); }
.stop-route { padding: .85rem 1rem; }
.stop-route__number {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: .22rem .48rem;
    border-radius: 7px;
    background: var(--brand);
    color: var(--on-brand);
}
.stop-route:hover { background: var(--brand-soft); }

.stop-search { padding: 1rem; }
.stop-search input { border-radius: var(--radius-sm); background: var(--surface-soft); }
.stop-search button { border-radius: var(--radius-sm); }
.stop-directory a { padding: .75rem 1rem; }
.stop-directory a:hover { background: var(--brand-soft); }

.foot {
    margin-top: 3rem;
    padding: 1.5rem 0 2.5rem;
    background: color-mix(in srgb, var(--brand) 3%, var(--paper));
}
.foot__nav a { font-weight: 700; }

@media (min-width: 48rem) {
    .route-list { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
    .route-card { padding: 1.35rem; }
    .bus { padding: 1rem 1.1rem; }
}

@media (max-width: 34rem) {
    .board { padding-top: .65rem; padding-bottom: 1.35rem; }
    .board__dest { font-size: clamp(1.75rem, 9vw, 2.25rem); }
    .board__summary { font-size: .82rem; }
    .block { margin-top: 1.75rem; }

    .route-jump__link { border-radius: var(--radius-sm); gap: .32rem; }

    .bus {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: .65rem;
        padding: .8rem .85rem;
    }
    .bus__icon { width: 42px; height: 42px; border-radius: 11px; }
    .bus__heading { gap: .35rem; }
    .bus__toward { font-size: .94rem; }
    .status-chip { min-height: 30px; padding-inline: .5rem; }

    #map { height: 315px; }
    #stop-map { height: 270px; }
    .map-overlay { top: .55rem; left: .55rem; right: .55rem; }
    .map-overlay__route, .map-overlay__live { font-size: .7rem; padding: .3rem .48rem; }

    .departure--primary .departure__time strong { font-size: 1.9rem; }
}

@media (max-width: 20rem) {
    .map-overlay { align-items: flex-start; flex-direction: column; right: auto; }
    .bus { grid-template-columns: 40px minmax(0, 1fr); }
    .bus__delay { grid-column: 2; justify-self: start; text-align: left; }
    .route-card__path { align-items: flex-start; }
}

@media (forced-colors: active) {
    :focus-visible { outline: 3px solid CanvasText; }
    .dirs__tab[aria-current="page"],
    .trip-picker__button.is-selected,
    .live-controls__button,
    .stop-search input,
    .stop-search button {
        border: 2px solid CanvasText;
    }
    .timetable__stop-cell::before,
    .timetable__stop-cell::after { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
    .trip-picker__button.is-selected .trip-picker__check {
        display: inline;
    }
}

/* ================================================================ v0.4.2
   Stop directory grouped by the administrative district encoded in PBA ids.
   Pastel colour is supplementary: every group also has a text heading/code. */
.stop-area-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}
.stop-area-chip {
    --area-bg: #F1F4F2;
    --area-border: #718578;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    min-height: 44px;
    padding: .48rem .7rem;
    border: 1px solid color-mix(in srgb, var(--area-border) 58%, white);
    border-radius: 999px;
    background: var(--area-bg);
    color: var(--ink);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 750;
}
.stop-area-chip:hover { border-color: var(--area-border); }
.stop-area-chip__count {
    min-width: 1.65rem;
    padding: .08rem .38rem;
    border-radius: 999px;
    background: rgb(255 255 255 / .78);
    color: var(--muted);
    text-align: center;
    font-family: var(--font-data);
    font-size: .72rem;
    font-weight: 800;
}

.stop-area-list { display: grid; gap: 1rem; }
.stop-area {
    --area-bg: #F1F4F2;
    --area-bg-soft: #F8FAF8;
    --area-border: #718578;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--area-border) 48%, white);
    border-left: 5px solid var(--area-border);
    border-radius: var(--radius);
    background: var(--area-bg-soft);
    box-shadow: var(--shadow-card);
    scroll-margin-top: 1rem;
}
.stop-area__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--area-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--area-border) 34%, white);
    scroll-margin-top: 1rem;
}
.stop-area__identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.stop-area__code {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .22rem .48rem;
    border: 1px solid color-mix(in srgb, var(--area-border) 70%, white);
    border-radius: 7px;
    background: rgb(255 255 255 / .72);
    color: var(--ink);
    font-family: var(--font-data);
    font-size: .73rem;
    font-weight: 800;
}
.stop-area__title { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.stop-area__place { margin: .12rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.stop-area__count {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.stop-area .stop-directory { background: rgb(255 255 255 / .55); }
.stop-area .stop-directory li + li { border-color: color-mix(in srgb, var(--area-border) 20%, white); }
.stop-area .stop-directory a:hover { background: var(--area-bg); }

/* Four deliberately pale, high-legibility area palettes for route 1244-A. */
.stop-area--mint {
    --area-bg: #E5F3EA;
    --area-bg-soft: #F5FAF7;
    --area-border: #3F7658;
}
.stop-area--lavender {
    --area-bg: #EEEAF8;
    --area-bg-soft: #FAF8FD;
    --area-border: #675F8C;
}
.stop-area--sky {
    --area-bg: #E4F1F6;
    --area-bg-soft: #F5FAFC;
    --area-border: #3E7183;
}
.stop-area--peach {
    --area-bg: #F8EBDD;
    --area-bg-soft: #FDF9F4;
    --area-border: #876238;
}
.stop-area--neutral {
    --area-bg: #EEF1EF;
    --area-bg-soft: #F8FAF8;
    --area-border: #66756B;
}

@media (max-width: 34rem) {
    .stop-area-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stop-area-chip { border-radius: var(--radius-sm); }
    .stop-area__head { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .stop-area__count { margin-left: 2.95rem; white-space: normal; }
}

@media (max-width: 20rem) {
    .stop-area-nav { grid-template-columns: 1fr; }
    .stop-area__identity { align-items: flex-start; flex-direction: column; gap: .45rem; }
    .stop-area__count { margin-left: 0; }
}

@media (forced-colors: active) {
    .stop-area,
    .stop-area-chip,
    .stop-area__code {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/* District context on a route timetable. The route may cross a district
   boundary more than once; tinting follows each stop's actual PBA code while
   the legend lists each unique district once in first-seen route order. */
.route-areas {
    display: flex;
    align-items: center;
    gap: .65rem 1rem;
    flex-wrap: wrap;
    margin: 0 0 .85rem;
    padding: .65rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.route-areas__label {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}
.route-areas__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.route-area-chip {
    --area-bg: #EEF1EF;
    --area-border: #66756B;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 32px;
    padding: .25rem .5rem;
    border: 1px solid color-mix(in srgb, var(--area-border) 52%, white);
    border-radius: 999px;
    background: var(--area-bg);
    color: var(--ink);
    font-size: .75rem;
    font-weight: 750;
}
.route-area-chip__swatch {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--area-border);
}

.timetable__row--area {
    background: var(--area-bg-soft);
}
.timetable__row--area:hover {
    background: var(--area-bg);
}
.timetable__row--area .timetable__stop-cell::before {
    background: var(--area-border);
}
.timetable__row--area .timetable__stop-cell::after {
    border-color: var(--area-border);
}
.timetable__row--terminal.timetable__row--area .timetable__stop-cell::after {
    background: var(--brand);
    border-color: var(--brand);
}
.timetable__area-label {
    display: block;
    width: fit-content;
    margin: 0 0 .14rem;
    padding: .08rem .32rem;
    border: 1px solid color-mix(in srgb, var(--area-border) 48%, white);
    border-radius: 5px;
    background: var(--area-bg);
    color: var(--ink);
    font-size: .65rem;
    font-weight: 800;
    line-height: 1.25;
}

@media (max-width: 34rem) {
    .route-areas { align-items: flex-start; flex-direction: column; }
    .route-areas__chips { width: 100%; }
}

@media (forced-colors: active) {
    .route-areas,
    .route-area-chip,
    .timetable__area-label {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
    .route-area-chip__swatch { background: CanvasText; }
}

/* ================================================================ v0.4.3
   District boundaries are structural, not zebra colours. Stop rows return to
   a neutral timetable; district colour is carried by separator bands and the
   vertical route rail. This makes boundaries obvious without relying on colour
   alone because every band also names the district and its administrative code. */

/* Neutral stop rows. Explicit --alt classes avoid separator rows changing the
   zebra sequence when a route crosses a district boundary. */
.timetable tbody > .timetable__row {
    background: var(--surface);
}
.timetable tbody > .timetable__row.timetable__row--alt {
    background: #F8FAF8;
}
.timetable tbody > .timetable__row:hover {
    background: var(--brand-soft);
}

/* District colour now belongs to the route rail, not the entire row. */
.timetable__row--area .timetable__stop-cell::before {
    background: var(--area-border);
}
.timetable__row--area .timetable__stop-cell::after {
    border-color: var(--area-border);
    background: var(--surface);
}
.timetable__row--alt.timetable__row--area .timetable__stop-cell::after {
    background: #F8FAF8;
}
.timetable__row--area:hover .timetable__stop-cell::after {
    background: var(--brand-soft);
}
.timetable__row--terminal.timetable__row--area .timetable__stop-cell::after {
    background: var(--area-border);
    border-color: var(--area-border);
}

/* Full-width boundary marker. It repeats whenever the route re-enters a
   district, which is important on routes that cross an administrative line
   more than once. */
.timetable__area-band {
    --area-bg: #EEF1EF;
    --area-border: #66756B;
}
.timetable__area-band td {
    position: relative;
    padding: .62rem .85rem .6rem 3.15rem;
    border-top: 2px solid var(--area-border);
    border-bottom: 1px solid color-mix(in srgb, var(--area-border) 55%, white);
    background: var(--area-bg);
    color: var(--ink);
    text-align: left;
    line-height: 1.25;
}
.timetable__area-band td::before {
    content: '';
    position: absolute;
    left: 1.45rem;
    top: 0;
    bottom: 0;
    width: .38rem;
    background: var(--area-border);
}
.timetable__area-band-name {
    display: inline-block;
    margin-right: .45rem;
    font-size: .86rem;
    font-weight: 850;
}
.timetable__area-band-code {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: .08rem .38rem;
    border: 1px solid color-mix(in srgb, var(--area-border) 66%, white);
    border-radius: 6px;
    background: rgb(255 255 255 / .72);
    color: var(--ink);
    font-family: var(--font-data);
    font-size: .68rem;
    font-weight: 850;
    vertical-align: middle;
}
.timetable__area-band-place {
    display: block;
    margin-top: .12rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 650;
}

/* The old small per-stop district label is intentionally retired. */
.timetable__area-label { display: none; }

/* Make /paradas/ read as four genuinely separate geographic sections. */
.stop-area {
    border-left-width: 8px;
    background: var(--surface);
}
.stop-area__head {
    padding-top: .95rem;
    padding-bottom: .95rem;
    border-bottom-width: 2px;
}
.stop-area__title {
    font-size: 1.12rem;
    font-weight: 850;
}
.stop-area .stop-directory {
    background: var(--surface);
}
.stop-area .stop-directory li {
    background: var(--surface);
}
.stop-area .stop-directory li:nth-child(even) {
    background: #F8FAF8;
}
.stop-area .stop-directory a:hover {
    background: var(--area-bg);
}

@media (max-width: 34rem) {
    .timetable__area-band td {
        padding: .58rem .5rem .55rem 1.45rem;
    }
    .timetable__area-band td::before {
        left: .58rem;
        width: .3rem;
    }
    .timetable__area-band-name { font-size: .8rem; }
    .timetable__area-band-place { font-size: .67rem; }
}

@media (forced-colors: active) {
    .timetable tbody > .timetable__row,
    .timetable tbody > .timetable__row.timetable__row--alt,
    .timetable__area-band td,
    .stop-area .stop-directory li,
    .stop-area .stop-directory li:nth-child(even) {
        background: Canvas;
        color: CanvasText;
    }
    .timetable__area-band td {
        border-color: CanvasText;
    }
    .timetable__area-band td::before,
    .timetable__row--area .timetable__stop-cell::before,
    .timetable__row--terminal.timetable__row--area .timetable__stop-cell::after {
        background: CanvasText;
    }
}

/* ================================================================ v0.4.4
   Stronger district colour identity. District colour is intentionally
   concentrated in headings, legend chips, codes and the route rail while
   timetable stop rows stay neutral. Text labels remain the primary cue. */

/* Distinct pastel backgrounds paired with dark accents. The accent colours
   retain strong contrast with white so district-code badges remain legible. */
.stop-area--peach {
    --area-bg: #F6DDCE;
    --area-bg-soft: #FDF8F4;
    --area-border: #6F3F20;
}
.stop-area--sky {
    --area-bg: #DCECF5;
    --area-bg-soft: #F5FAFD;
    --area-border: #24556F;
}
.stop-area--lavender {
    --area-bg: #E9E0F3;
    --area-bg-soft: #FAF7FD;
    --area-border: #524267;
}
.stop-area--mint {
    --area-bg: #DDEEDF;
    --area-bg-soft: #F5FAF6;
    --area-border: #315D3D;
}

/* The whole legend chip now carries the district colour rather than relying
   on a small dot. */
.route-area-chip {
    min-height: 36px;
    padding: .32rem .62rem;
    border: 2px solid var(--area-border);
    background: var(--area-bg);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
    font-weight: 800;
}
.route-area-chip__swatch {
    width: .72rem;
    height: .72rem;
    background: var(--area-border);
    box-shadow: 0 0 0 2px rgb(255 255 255 / .58);
}

/* /paradas/ jump chips use the same full-colour identity. */
.stop-area-chip {
    border: 2px solid var(--area-border);
    background: var(--area-bg);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.stop-area-chip__count {
    background: var(--area-border);
    color: #FFFFFF;
}

/* District section headings are deliberately more saturated than row
   backgrounds, with a strong matching left rail. */
.stop-area {
    border-color: color-mix(in srgb, var(--area-border) 58%, white);
    border-left: 8px solid var(--area-border);
}
.stop-area__head {
    background: var(--area-bg);
    border-bottom-color: var(--area-border);
}
.stop-area__code {
    border: 1px solid var(--area-border);
    background: var(--area-border);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}

/* Strong district boundary bands on route timetables. */
.timetable__area-band td {
    border-top: 3px solid var(--area-border);
    border-bottom: 1px solid var(--area-border);
    background: var(--area-bg);
}
.timetable__area-band td::before {
    width: .5rem;
    background: var(--area-border);
}
.timetable__area-band-name {
    font-weight: 900;
}
.timetable__area-band-code {
    border-color: var(--area-border);
    background: var(--area-border);
    color: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
}

/* The line itself becomes a much clearer geographic cue. */
.timetable__row--area .timetable__stop-cell::before {
    width: 4px;
    margin-left: -2px;
    background: var(--area-border);
}
.timetable__row--area .timetable__stop-cell::after {
    border-width: 3px;
    border-color: var(--area-border);
}
.timetable__row--terminal.timetable__row--area .timetable__stop-cell::after {
    background: var(--area-border);
    border-color: var(--area-border);
}

@media (max-width: 34rem) {
    .route-area-chip {
        min-height: 38px;
        padding-inline: .58rem;
    }
    .timetable__area-band td::before {
        width: .38rem;
    }
}

@media (forced-colors: active) {
    .route-area-chip,
    .stop-area-chip,
    .stop-area__head,
    .stop-area__code,
    .timetable__area-band-code {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .stop-area-chip__count {
        background: CanvasText;
        color: Canvas;
    }
}

/* v0.4.5 — District polygons on route maps.
   The same district palette used in timetables is repeated in a compact key
   immediately above the map. Colour is supplementary; every chip is named. */
.map-district-key {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin: 0 0 .7rem;
    font-size: .75rem;
}
.map-district-key__label {
    color: var(--muted);
    font-weight: 800;
}
.map-district-key__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.map-district-key__chip {
    --area-bg: #EEF1EF;
    --area-border: #66756B;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    min-height: 30px;
    padding: .25rem .55rem;
    border: 2px solid var(--area-border);
    border-radius: 999px;
    background: var(--area-bg);
    color: var(--text);
    font-weight: 800;
    line-height: 1.15;
}
.map-district-key__swatch {
    width: .68rem;
    height: .68rem;
    flex: 0 0 auto;
    border: 2px solid var(--area-border);
    border-radius: 3px;
    background: var(--area-bg);
}
.district-map-tooltip {
    border: 1px solid #66756B;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
    color: #172019;
    font-size: .75rem;
    line-height: 1.3;
}
.district-map-tooltip strong { font-weight: 900; }
.district-map-tooltip span { color: #405047; }

@media (max-width: 520px) {
    .map-district-key { align-items: flex-start; flex-direction: column; }
    .map-district-key__chips { width: 100%; }
    .map-district-key__chip { font-size: .7rem; }
}

@media (forced-colors: active) {
    .map-district-key__chip,
    .map-district-key__swatch {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}

/* ================================================================ v0.4.10
   Map district interaction refinement. The map uses the same well-defined
   route-area chips as the timetable did, so only one district legend remains.
   Polygon fills remain visible while borders are deliberately lighter. */
.map-district-key .route-area-chip {
    min-height: 36px;
}
.map-district-key .route-area-chip__swatch {
    flex: 0 0 auto;
}

/* Hover-only SVG shapes must not display browser focus rectangles. District
   names/cantons remain available in the visible legend and sticky tooltip. */
.busweb-district-polygon:focus,
.busweb-stop-marker:focus {
    outline: none;
}

.stop-map-tooltip {
    border: 1px solid #66756B;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
    color: #172019;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.3;
}

/* ================================================================ v0.4.11
   Route-stop map markers. Stops are deliberately small and neutral so the
   route, district fills and live buses retain their visual hierarchy. */
.route-stop-marker {
    cursor: pointer;
    transition: stroke-width .12s ease, fill-opacity .12s ease;
}
.route-stop-marker:hover {
    stroke-width: 2.5;
    fill-opacity: 1;
}
.route-stop-marker--terminal:hover { stroke-width: 3; }

.route-stop-tooltip {
    border: 1px solid #66756B;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.13);
    color: #172019;
    font-size: .76rem;
    line-height: 1.3;
}
.route-stop-tooltip strong { font-weight: 900; }
.route-stop-tooltip span { color: #405047; }

.route-map-layer-control {
    margin: 0 0 .65rem .65rem;
    border: 1px solid rgb(23 32 25 / .28);
    border-radius: 9px;
    background: rgb(255 255 255 / .96);
    box-shadow: 0 1px 5px rgb(0 0 0 / .18);
    color: #172019;
    font-size: .78rem;
    font-weight: 850;
}
.route-map-layer-control label {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem .65rem;
    cursor: pointer;
}
.route-map-layer-control input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
    .route-stop-marker { transition: none; }
}

@media (forced-colors: active) {
    .route-map-layer-control {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }
    .route-stop-marker {
        forced-color-adjust: none;
        stroke: CanvasText;
        fill: Canvas;
    }
    .route-stop-marker--terminal { fill: CanvasText; }
}

/* ================================================================ v0.4.16
   Responsive homepage photography. Company-specific imagery lives under
   site/assets and is art-directed for wide, standard and mobile viewports. */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    background: var(--brand-dark);
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / .08);
}
.home-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}
.home-hero__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--brand-dark) 96%, transparent) 0%,
        color-mix(in srgb, var(--brand-dark) 90%, transparent) 30%,
        color-mix(in srgb, var(--brand-dark) 72%, transparent) 52%,
        color-mix(in srgb, var(--brand-dark) 28%, transparent) 76%,
        color-mix(in srgb, var(--brand-dark) 12%, transparent) 100%
    );
}
.home-hero__inner {
    display: flex;
    align-items: flex-end;
    min-height: clamp(20rem, 38vw, 27rem);
    padding-top: 4.5rem;
    padding-bottom: 2.4rem;
}
.home-hero__content {
    width: min(100%, 34rem);
    padding: .2rem 0;
}
.home-hero .board__dest {
    max-width: 15ch;
    font-size: clamp(2.15rem, 6.2vw, 3.4rem);
    text-shadow: 0 2px 14px rgb(0 0 0 / .2);
}
.home-hero .board__sub,
.home-hero .board__summary {
    text-shadow: 0 1px 8px rgb(0 0 0 / .2);
}

/* Route cards can opt into a route-specific image supplied under site/assets. */
.route-card--with-media {
    padding: 0;
}
.route-card__media {
    min-height: 10rem;
    overflow: hidden;
    background: var(--brand-soft);
}
.route-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}
.route-card__body {
    padding: 1.2rem;
}

@media (min-width: 48rem) {
    .route-card--with-media {
        display: grid;
        grid-template-columns: minmax(17rem, .9fr) minmax(0, 1.35fr);
        align-items: stretch;
    }
    .route-card--with-media .route-card__media img {
        min-height: 100%;
        aspect-ratio: auto;
    }
    .route-card--with-media .route-card__body {
        padding: 1.35rem;
    }
}

@media (max-width: 47.99rem) {
    .home-hero::after {
        background: linear-gradient(
            0deg,
            color-mix(in srgb, var(--brand-dark) 97%, transparent) 0%,
            color-mix(in srgb, var(--brand-dark) 91%, transparent) 34%,
            color-mix(in srgb, var(--brand-dark) 58%, transparent) 62%,
            color-mix(in srgb, var(--brand-dark) 18%, transparent) 100%
        );
    }
    .home-hero__media img { object-position: center 42%; }
    .home-hero__inner {
        min-height: 28rem;
        padding-top: 7.5rem;
        padding-bottom: 1.8rem;
    }
    .home-hero .board__dest {
        font-size: clamp(2.1rem, 11vw, 3rem);
    }
}

@media (max-width: 20rem) {
    .home-hero__inner {
        min-height: 27rem;
        padding-top: 6rem;
    }
}

@media (forced-colors: active) {
    .home-hero__media { display: none; }
    .home-hero::after { display: none; }
    .home-hero { background: Canvas; color: CanvasText; }
    .home-hero .board__sub,
    .home-hero .board__summary,
    .home-hero .board__dest { color: CanvasText; text-shadow: none; }
    .home-hero .board__plate { border: 2px solid CanvasText; }
}

/* ================================================================ v0.4.17
   Compact homepage hero + simplified message. The second supplied image set
   is art-directed inside the single-route card rather than adding another
   large decorative section. */
.home-hero__inner {
    min-height: clamp(13rem, 22vw, 17rem);
    padding-top: 2.6rem;
    padding-bottom: 1.55rem;
}
.home-hero__content {
    width: min(100%, 31rem);
}
.home-hero .board__dest {
    margin-bottom: .35rem;
    font-size: clamp(2rem, 5vw, 3rem);
}
.home-hero .board__summary {
    margin: 0;
    max-width: 28rem;
    font-size: clamp(.98rem, 2vw, 1.08rem);
    font-weight: 700;
    line-height: 1.45;
}
.route-card__media {
    display: block;
}

@media (max-width: 47.99rem) {
    .home-hero__inner {
        min-height: 18.5rem;
        padding-top: 4.2rem;
        padding-bottom: 1.35rem;
    }
    .home-hero .board__dest {
        font-size: clamp(2rem, 10vw, 2.75rem);
    }
    .route-card__media img {
        object-position: center 36%;
    }
}

@media (max-width: 20rem) {
    .home-hero__inner {
        min-height: 17rem;
        padding-top: 3.4rem;
    }
}


/* v0.4.18: live bus markers scale with route-map zoom. */

/* v0.4.20: route photography uses a vertical focal point one quarter down the image. */

/* ================================================================ v0.4.19
   Per-route photography and trip-aware stop markers. Route imagery follows a
   generic site/assets/routes/{route-id}/ convention and is decorative. */
.route-page-media-wrap {
    margin-top: 1rem;
}
.route-page-media {
    display: block;
    height: clamp(8.5rem, 20vw, 12rem);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.route-page-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

/* A stop skipped by the selected departure is both lighter and dashed, so the
   distinction is not communicated by colour alone. Its tooltip also states
   explicitly that the departure does not serve it. */
.route-stop-marker--unserved {
    stroke-dasharray: 2 2;
}
.route-stop-marker--unserved:hover {
    stroke-width: 2;
}

@media (max-width: 47.99rem) {
    .route-page-media {
        height: 9rem;
    }
    .route-page-media img {
        object-position: center 25%;
    }
}

@media (forced-colors: active) {
    .route-page-media { display: none; }
    .route-stop-marker--unserved {
        stroke-dasharray: 2 2;
        fill: Canvas;
    }
}

/* v0.4.21 bilingual language switcher */
.language-switch {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--font-data);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
    white-space: nowrap;
}
.language-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    padding: .2rem .4rem;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 999px;
}
.language-switch a[aria-current="page"] {
    background: var(--on-brand);
    color: var(--brand);
    border-color: var(--on-brand);
}
.language-switch a:focus-visible { outline-color: var(--on-brand); }
.masthead__name { min-width: 0; flex: 1 1 auto; }
.language-switch { flex: 0 0 auto; }
@media (max-width: 24rem) {
    .language-switch { gap: .18rem; font-size: .74rem; }
    .language-switch a { min-width: 34px; padding-inline: .3rem; }
}

/* v0.4.22 — concise crawlable route/stop context without competing with boards */
.context-summary {
    max-width: 72ch;
    margin: 1rem 0 1.25rem;
    color: var(--muted, #405047);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* ------------------------------------------------------ v0.4.23 route PDF */
.schedule-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.route-pdf-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .42rem;
    min-height: 44px;
    min-width: 44px;
    padding: .5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--brand-dark);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 700;
}
.route-pdf-link:hover { background: var(--brand-soft); }
.route-pdf-link:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}
.route-pdf-link .icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
}
@media (forced-colors: active) {
    .route-pdf-link {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }
}