/* ---------------------------------------------------------------------------
   /bridges — bridge openings

   Read most often in a car, one-handed, deciding which way to drive. So the
   next opening is the largest thing on each card and the state is carried by a
   word as well as a colour: "Road closed" has to survive being glanced at in
   sunlight, and colour alone fails both that and anyone colour-blind.

   PALETTE. Every colour resolves to a Destinito token from
   assets/css/ds/tokens/colors.css. This file used to read --muted, --surface,
   --surface-2 and --link, none of which the app defines — so each one silently
   took the hardcoded fallback written beside it and the page rendered slate
   greys and a blue link inside a navy-and-orange site. Only --border resolved.
   Nothing errors when a custom property is missing, so it looked deliberate.

   The one exception is the status TINTS below. The token set names the three
   functional colours but no light backgrounds to pair them with, so the pill
   fills stay as authored — they are tuned for contrast against their own text
   colour, and inventing tints would trade that for consistency nobody sees.
   --------------------------------------------------------------------------- */

/* ── Hero ─────────────────────────────────────────────────────────────────── */

/* The same navy-to-navy-900 fill .iig-hero uses on the home page and /ferry
   uses on the board, so the three read as one site. */
.bridge-hero {
    background: linear-gradient(135deg, var(--navy, #003366) 0%, var(--navy-900, #002247) 100%);
    color: var(--white, #fff);
    padding: 2.25rem 0 2rem;
}

/* .iig-theme .container carries a 12px top margin for body content. Inside a
   full-bleed band it just dents the fill, and the band sets its own padding. */
.bridge-hero .container { margin-top: 0; }

.bridge-hero-eyebrow {
    margin: 0 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--orange, #FF7F0E);
}

.bridge-hero-title {
    margin: 0 0 .6rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--white, #fff);
}

.bridge-hero-summary {
    margin: 0;
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

.bridge-hero-facts {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
}

.bridge-fact {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.bridge-fact-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white, #fff);
}

.bridge-fact-label {
    font-size: .8125rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .75);
}

/* The road-state fact keeps a status colour, because a closed road is a status.
   The dot only repeats what the label already says. */
.bridge-fact--state .bridge-fact-value {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.bridge-fact--state .bridge-fact-value::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: none;
    background: var(--success, #1f8a54);
}

.bridge-fact--closed .bridge-fact-value::before { background: var(--danger, #c0392b); }

/* ── Page body ────────────────────────────────────────────────────────────── */

.bridge-page { padding-top: 1.75rem; padding-bottom: 2.5rem; }

.bridge-list {
    display: grid;
    gap: 1rem;
}

.bridge-card {
    padding: 1rem 1.15rem;
    border: 1px solid var(--border, #dbe3ec);
    border-left-width: 4px;
    border-radius: var(--radius-md, 12px);
    background: var(--surface-card, #fff);
}

.bridge-card--open        { border-left-color: var(--success, #1f8a54); }
.bridge-card--soon        { border-left-color: var(--warning, #b8860b); }
.bridge-card--closed      { border-left-color: var(--danger, #c0392b); }
.bridge-card--unscheduled { border-left-color: var(--border-strong, #b9c7d6); }

.bridge-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .6rem;
}

.bridge-card-head h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy, #003366);
}

.bridge-side {
    font-size: .8125rem;
    color: var(--text-muted, #6d88a8);
}

.bridge-state {
    margin-left: auto;
    padding: .15rem .55rem;
    border-radius: var(--radius-pill, 999px);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Tints, not tokens — see the palette note at the top of this file. */
.bridge-state--open        { background: #e8f5e0; color: #3d6b1e; }
.bridge-state--soon        { background: #fdeade; color: #8a4415; }
.bridge-state--closed      { background: #fbe3ea; color: #7d1c39; }
.bridge-state--unscheduled { background: var(--surface-tinted, #eef2f7); color: var(--text-muted, #6d88a8); }

.bridge-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.bridge-next-label {
    font-size: .8125rem;
    color: var(--text-muted, #6d88a8);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bridge-next-time {
    font-size: 1.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--navy, #003366);
}

.bridge-tomorrow,
.bridge-direction {
    padding: .1rem .45rem;
    border-radius: var(--radius-xs, 6px);
    background: var(--surface-tinted, #eef2f7);
    font-size: .75rem;
    color: var(--navy-600, #2b5c8f);
}

/* The one live number on the card, and the only orange on it. */
.bridge-countdown {
    font-weight: 700;
    color: var(--orange-press, #cf6403);
}

.bridge-next--none { color: var(--text-muted, #6d88a8); font-style: italic; }

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.bridge-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    display: block;
    overflow-x: auto;
}

.bridge-table th,
.bridge-table td {
    padding: .4rem .6rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #dbe3ec);
    white-space: nowrap;
}

.bridge-table tbody tr:last-child th,
.bridge-table tbody tr:last-child td { border-bottom: 0; }

.bridge-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted, #6d88a8);
}

.bridge-table tbody th {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--navy, #003366);
}

/* Direction and reopening time are content, not chrome, so they take a navy
   that clears AA on white rather than the tint reserved for labels. This page
   gets read through a windscreen. */
.bridge-table tbody td { color: var(--navy-600, #2b5c8f); }

/* Openings already past stay on the page — the whole day's schedule is the
   point — but recede, so the eye lands on what is still coming. */
.bridge-row--passed { opacity: .45; }

.bridge-captains { margin-top: .85rem; font-size: .875rem; }

.bridge-captains > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--navy, #003366);
}

.bridge-captains-grid {
    margin: .5rem 0 0;
    display: grid;
    gap: .35rem;
}

.bridge-captains-grid > div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: .5rem;
}

.bridge-captains-grid dt { color: var(--text-muted, #6d88a8); }
.bridge-captains-grid dd { margin: 0; color: var(--navy-600, #2b5c8f); }
.bridge-captains-grid dd a { color: var(--navy, #003366); font-weight: 600; }

.bridge-note {
    margin-top: 1.5rem;
    max-width: 46rem;
    font-size: .8125rem;
    color: var(--text-muted, #6d88a8);
    line-height: 1.55;
}

@media (max-width: 480px) {
    .bridge-hero { padding: 1.75rem 0 1.5rem; }
    .bridge-hero-facts { gap: .75rem 1.25rem; }
    .bridge-captains-grid > div { grid-template-columns: 1fr; gap: 0; }
    .bridge-state { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   On-demand bridges

   Queen Emma has no timetable, so it gets no countdown and no large time —
   there is nothing to count down to, and a big number on the card would imply
   otherwise. Neutral rather than green/amber/red: "open on demand" is not a
   state a driver acts on the way "road closed in 5 minutes" is. Navy is the
   palette's neutral, so the rail is a navy tint rather than the slate-blue it
   used to be.
   --------------------------------------------------------------------------- */

.bridge-card--ondemand { border-left-color: var(--navy-400, #6d88a8); }

.bridge-state--ondemand { background: var(--surface-tinted, #eef2f7); color: var(--navy, #003366); }

.bridge-next--ondemand { align-items: baseline; }

.bridge-ondemand-text { color: var(--navy-600, #2b5c8f); }

.bridge-hours {
    margin: 0 0 .75rem;
    font-size: .875rem;
    color: var(--navy-600, #2b5c8f);
}

.bridge-notes {
    margin: 0 0 .75rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--navy-600, #2b5c8f);
}