/* ---------------------------------------------------------------------------
   /routes/{a}-to-{b} — one crossing, answered first.

   Loaded ALONGSIDE ferry-board.css, not instead of it. The hero, the chips, the
   table, the badges and the notes are the same components as the departures
   board, because a reader moving between the two is looking at one system and
   two ideas about what a timetable looks like would say otherwise. This file
   holds only what the corridor page adds: provenance, fares, the trip slot and
   the section rhythm.

   PALETTE. Navy carries structure, orange is the spark, and the only other
   colours are the functional ones that mean a status. Every value resolves to a
   Destinito token from assets/css/ds/tokens/colors.css with a literal fallback
   — ferry-board.css was shipped once reading --accent, --muted, --surface,
   --surface-2 and --link, none of which the app defines, so all five silently
   took their fallbacks and the page rendered teal and slate inside a
   navy-and-orange site. Check a token exists before using it.
   --------------------------------------------------------------------------- */

/* ── Section rhythm ───────────────────────────────────────────────────────── */

.corridor-options,
.corridor-fares,
.corridor-practical,
.corridor-trip,
.corridor-intro,
.corridor-links { margin: 0 0 2.25rem; }

.corridor-h2 {
    margin: 0 0 .9rem;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--navy, #003366);
}

.corridor-h3 {
    margin: 1.5rem 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy, #003366);
}

/* A caption is the table's own summary sentence — read by a screen reader
   before the rows, and the one place the date and the direction are stated
   together. Visible rather than sr-only: it is useful to everybody. */
.corridor-caption {
    caption-side: top;
    padding: .75rem 1rem;
    text-align: left;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--text-muted, #6d88a8);
    border-bottom: 1px solid var(--border, #dbe3ec);
    background: var(--surface-tinted, #eef2f7);
}

/* ── Options table additions ──────────────────────────────────────────────── */

/* Ferry or flight, on the row itself. The mode is the first thing that changes
   what a reader does next — one needs a port two hours early, the other an
   airport — so it sits with the departure time rather than in a legend. */
.corridor-mode {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #6d88a8);
}

.corridor-book {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--navy, #003366);
    white-space: normal;
}

.corridor-book:hover,
.corridor-book:focus-visible { text-decoration: underline; }

/* ── Provenance ───────────────────────────────────────────────────────────── */

/* Not a disclaimer in small print. Phase 0 found 663 ferry scrape runs that saw
   zero legs, so every sailing on the site was a hand seed nobody had re-checked
   — and it rendered identically to verified data. The whole point of this strip
   is that unverified data must not be able to impersonate verified data, so it
   gets a left rule and real contrast rather than grey 11px text.

   Amber, not red: the times are probably right. Red is for a cancellation. */
.corridor-provenance {
    margin: 1rem 0 0;
    padding: .7rem .9rem;
    max-width: 46rem;
    border-left: 3px solid var(--orange, #FF7F0E);
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
    background: var(--orange-050, #fff3e6);
    font-size: .875rem;
    line-height: 1.55;
    color: var(--navy-700, #1d4977);
}

.corridor-provenance strong { color: var(--navy, #003366); }

.corridor-notes {
    margin: .75rem 0 0;
    padding-left: 1.1rem;
    max-width: 46rem;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--text-muted, #6d88a8);
}

/* ── "Nothing on file" ────────────────────────────────────────────────────── */

/* A distinct component from .ferry-empty-day on purpose. That one means "not
   today"; this one means "nothing is recorded at all", and the two must not
   look the same — conflating them is how a page tells a crawler a crossing does
   not exist when it does. */
.corridor-none {
    margin: 0;
    padding: 1rem 1.1rem;
    max-width: 46rem;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card, #fff);
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--navy-600, #2b5c8f);
}

.corridor-none strong { color: var(--navy, #003366); }

/* ── Fees ─────────────────────────────────────────────────────────────────── */

.corridor-fees {
    margin: 0;
    padding-left: 1.1rem;
    max-width: 46rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--navy-600, #2b5c8f);
}

.corridor-fees strong {
    font-variant-numeric: tabular-nums;
    color: var(--navy, #003366);
}

/* ── Practicalities ───────────────────────────────────────────────────────── */

.corridor-practical-list {
    margin: 0;
    padding-left: 1.1rem;
    max-width: 46rem;
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--navy-600, #2b5c8f);
}

/* ── Trip slot ────────────────────────────────────────────────────────────── */

.corridor-trip {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-tinted, #eef2f7);
}

.corridor-trip .corridor-h2 { margin-bottom: .5rem; }

.corridor-trip-copy {
    margin: 0;
    max-width: 42rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--navy-600, #2b5c8f);
}

.corridor-trip-form { margin: .9rem 0 0; }

/* The one orange button on the page. Orange is the spark and this is the action the page
   is asking for; the operator links stay navy so they read as references rather than as a
   second call to action. */
.corridor-add {
    display: inline-block;
    padding: .7rem 1.2rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--orange, #FF7F0E);
    color: var(--navy-900, #002247);
    font-size: .9375rem;
    font-weight: 800;
    cursor: pointer;
}

.corridor-add:hover,
.corridor-add:focus-visible { background: var(--orange-press, #cf6403); color: var(--white, #fff); }

/* Disabled means "done" here far more often than "broken", so it reads as a settled state
   rather than a dead control. */
.corridor-add:disabled {
    background: var(--surface-card, #fff);
    border: 1px solid var(--border-strong, #b9c7d6);
    color: var(--navy, #003366);
    cursor: default;
}

.corridor-add-result {
    margin: .6rem 0 0;
    max-width: 42rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--navy-700, #1d4977);
}

.corridor-add-result a { color: var(--navy, #003366); font-weight: 700; }

/* ── Prose and links ──────────────────────────────────────────────────────── */

.corridor-prose {
    max-width: 42rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--navy-700, #1d4977);
}

.corridor-prose p { margin: 0 0 .9rem; }

.corridor-link-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.corridor-link-list a {
    display: block;
    padding: .7rem .9rem;
    border: 1px solid var(--border, #dbe3ec);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card, #fff);
    color: var(--navy, #003366);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}

.corridor-link-list a:hover,
.corridor-link-list a:focus-visible { border-color: var(--navy, #003366); }

@media (max-width: 480px) {
    .corridor-options,
    .corridor-fares,
    .corridor-practical,
    .corridor-trip,
    .corridor-intro,
    .corridor-links { margin-bottom: 1.75rem; }

    .corridor-caption { padding: .65rem .75rem; }
    .corridor-link-list { grid-template-columns: 1fr; }
}