:root {
    /* Coastal Refresh palette (bootstrap-25) */
    --gf-navy: #1c3347;
    --gf-navy-deep: #152a38;
    --gf-blue: #2a6f9e;
    --gf-blue-dark: #1f5578;
    --gf-blue-pale: #e8f2f8;
    --gf-teal: #167a72;
    --gf-teal-bright: #1a9589;
    --gf-sand: #f5f2ec;
    --gf-sand-deep: #ebe6dc;
    --gf-surface: #ffffff;
    --gf-gold: #c4a035;
    --gf-amber: #c99200;
    --gf-red: #b83228;
    --gf-green: #1a7a45;
    --gf-border: rgba(28, 51, 71, 0.1);
    --gf-shadow: 0 2px 12px rgba(28, 51, 71, 0.07);
    --gf-radius: 12px;
  }
  body {
    background: var(--gf-sand);
    font-family: "Segoe UI", Roboto, Verdana, Arial, sans-serif;
    color: #24303f;
  }
  a { color: var(--gf-blue-dark); }

  /* Title-sponsor inline bar — Option E on page sand (see TITLE_SPONSOR). */
  .title-sponsor-bar {
    background: var(--gf-sand);
    border-top: 1px solid rgba(36, 48, 63, 0.08);
    border-bottom: 1px solid rgba(36, 48, 63, 0.08);
    color: #24303f;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
  }
  .title-sponsor-bar[hidden] { display: none !important; }
  .title-sponsor-bar .title-sponsor-logo {
    flex-shrink: 0;
    max-height: 44px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  .title-sponsor-bar .sponsor-copy { flex: 1 1 160px; min-width: 0; }
  .title-sponsor-bar .sponsor-kicker {
    color: #7b8595;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .title-sponsor-bar .sponsor-name {
    color: var(--gf-navy);
    font-size: 0.9rem;
    font-weight: 700;
  }
  .title-sponsor-bar .sponsor-blurb { font-size: 0.78rem; color: #6c7a89; }
  .title-sponsor-bar .sponsor-cta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--gf-blue-dark);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
  }
  .title-sponsor-bar .sponsor-cta:hover { color: var(--gf-teal); }
  @media (max-width: 575.98px) {
    .title-sponsor-bar { justify-content: center; text-align: center; }
  }

  .section-title {
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .section-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: var(--gf-blue-pale);
    color: var(--gf-teal);
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  /* BI glyphs are ::before on an empty <i> — need explicit box or flex collapses them */
  .section-icon-pill .bi {
    display: inline-block;
    line-height: 1;
    font-size: 1em;
    flex-shrink: 0;
  }
  .section-title .bi {
    display: inline-block;
    line-height: 1;
    color: var(--gf-teal);
    flex-shrink: 0;
  }

  /* Unified top chrome (backgrounds on children — wrap may use display:contents) */
  .site-header .site-navbar {
    background: linear-gradient(180deg, var(--gf-navy-deep) 0%, var(--gf-navy) 100%);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header .next-sailing-band {
    background: var(--gf-navy);
    border-bottom: 3px solid var(--gf-teal);
    padding: 0.9rem 0 1rem;
  }
  .site-navbar .navbar-brand { color: #fff; }
  .site-navbar .navbar-brand:hover,
  .site-navbar .navbar-brand:focus { color: #fff; }
  .site-navbar .navbar-brand .bi { color: var(--gf-teal-bright); }

  /* Camera panel on sand */
  .cam-panel {
    background: var(--gf-surface);
    border: 1px solid var(--gf-border);
    border-radius: calc(var(--gf-radius) + 4px);
    padding: 1rem;
    box-shadow: var(--gf-shadow);
  }
  .cam-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gf-surface);
    border: 1px solid var(--gf-border);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gf-navy);
    box-shadow: var(--gf-shadow);
  }
  .live-status-pill.is-warning {
    background: #fff8e6;
    border-color: #e8d49a;
    color: #8a6300;
  }
  .live-status-pill.is-error {
    background: #fbeae8;
    border-color: #e8b4ae;
    color: var(--gf-red);
  }
  .content-card-head {
    background: var(--gf-surface);
    border-bottom: 1px solid var(--gf-border);
  }

  .section-title.h6 .section-icon-pill {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.82rem;
    border-radius: 6px;
  }

  .cam-card.card-soft {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .cam-card.card-soft:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(28, 51, 71, 0.12);
  }
  .cam-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
    background: rgba(21, 42, 56, 0.82);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
  }
  .cam-sponsor-line {
    font-size: 0.72rem;
    color: #6c7a89;
    line-height: 1.3;
  }
  .cam-sponsor-line strong { color: var(--gf-navy); font-weight: 600; }
  @media (max-width: 575.98px), (min-width: 992px) {
    .cam-sponsor-line strong {
      display: block;
    }
  }

  .cam-card img {
    aspect-ratio: 424 / 237;
    object-fit: cover;
    background: #dde3ea;
  }
  .cam-card .card-footer {
    background: #fff;
    font-size: 0.85rem;
  }
  .card-footer-lineup {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e2e6ec;
  }
  .lineup-badge {
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    cursor: help;
  }
  .lineup-badge.tier-quiet { background: #e3f5ea; color: var(--gf-green); }
  .lineup-badge.tier-moderate { background: #fff4d6; color: #8a6300; }
  .lineup-badge.tier-busy { background: #fbe4e1; color: var(--gf-red); }
  .lineup-badge.tier-unknown { background: #eef1f5; color: #6c7a89; }
  .lineup-badge.tier-dark { background: #1a2740; color: #6ea8ff; }
  .lineup-badge.tier-low { background: #e3f5ea; color: var(--gf-green); }
  /* Nanaimo's Lineup badge reuses the row-fill tiers (half/threequarter/
     nearly) rather than quiet/moderate/busy — same color intent, mapped
     onto the same badge class used by the other four cameras. */
  .lineup-badge.tier-half { background: #e3f5ea; color: var(--gf-green); }
  .lineup-badge.tier-threequarter { background: #fff4d6; color: #8a6300; }
  .lineup-badge.tier-nearly { background: #fbe4e1; color: var(--gf-red); }

  /* ---- PAGE_TOGGLE: lineup-hidden CSS (paired with LINEUP_STATUS_VISIBLE) --
     When capacity detection is turned off (LINEUP_STATUS_VISIBLE = false;
     search PAGE_TOGGLE), the page gets body.lineup-hidden, which removes
     every piece of UI derived from the detection: the per-camera "Lineup"
     badges (.card-footer-lineup) and the "Lineup status" rows in the two
     NEXT-FROM chips (.chip-lineup-status). Nothing else on the page is
     affected. */
  body.lineup-hidden .card-footer-lineup,
  body.lineup-hidden .chip-lineup-status { display: none !important; }

  /* ---- Fill bar visibility (paired with ?lineupDebug=1) ------------------
     The fullness fill bar (#gab-fill-meter) is a DEBUG-ONLY visual: hidden by
     default in all cases, and revealed only when the page has body.lineup-debug
     (set by ?lineupDebug=1). It stays hidden when lineup-hidden regardless. */
  #gab-fill-meter { display: none !important; }
  body.lineup-debug:not(.lineup-hidden) #gab-fill-meter { display: block !important; }
  .cam-thumb-wrap { position: relative; cursor: pointer; }
  .cam-thumb-wrap img { display: block; }

  /* Per-image sponsor logo, pinned to a configurable corner (see CAM_SPONSORS
     in the script). Width is a % of the image width so it scales responsively;
     height auto-follows. No backing chip — bare logo. Same class is reused
     inside the lightbox slide, sized relative to the enlarged image. */
  .cam-sponsor-logo {
    position: absolute;
    z-index: 3;
    aspect-ratio: auto;             /* override .cam-card img letterboxing */
    height: auto;                   /* keep aspect ratio; width is set per-logo via `size` */
    max-width: 100%;                /* never exceed the image; real size is the `size` % */
    object-fit: contain;            /* show the WHOLE logo, never cropped */
    pointer-events: none;           /* clicks fall through to open the lightbox */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));  /* lift off busy images without a backing box */
  }
  /* .cam-card img sets aspect-ratio + object-fit:cover on cam frames; these
     higher-specificity rules make sure the sponsor logo is NOT letterboxed or
     cropped by that, and shows in full at its `size` width. */
  .cam-card img.cam-sponsor-logo,
  .cam-thumb-wrap img.cam-sponsor-logo {
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
  }
  .cam-sponsor-logo.corner-top-left     { top: 6px;    left: 6px; }
  .cam-sponsor-logo.corner-top-right    { top: 6px;    right: 6px; }
  .cam-sponsor-logo.corner-bottom-left  { bottom: 6px; left: 6px; }
  .cam-sponsor-logo.corner-bottom-right { bottom: 6px; right: 6px; }
  /* When the logo is a clickable link, let it receive clicks. */
  a.cam-sponsor-logo-link { position: absolute; z-index: 4; line-height: 0; }
  a.cam-sponsor-logo-link .cam-sponsor-logo { position: static; pointer-events: auto; }
  a.cam-sponsor-logo-link.corner-top-left     { top: 6px;    left: 6px; }
  a.cam-sponsor-logo-link.corner-top-right    { top: 6px;    right: 6px; }
  a.cam-sponsor-logo-link.corner-bottom-left  { bottom: 6px; left: 6px; }
  a.cam-sponsor-logo-link.corner-bottom-right { bottom: 6px; right: 6px; }
  /* Lightbox slide is a flex-centered container; pin relative to it. */
  .cam-lightbox-slide { position: relative; }

  /* Preview-only "logo here" placeholder for empty cam-logo slots. */
  .cam-sponsor-placeholder {
    position: absolute; z-index: 3;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    color: #fff; background: rgba(47,111,176,0.85);
    border: 1px dashed rgba(255,255,255,0.85); border-radius: 5px;
    padding: 2px 7px; pointer-events: none;
  }
  .cam-sponsor-placeholder.corner-top-left     { top: 6px;    left: 6px; }
  .cam-sponsor-placeholder.corner-top-right    { top: 6px;    right: 6px; }
  .cam-sponsor-placeholder.corner-bottom-left  { bottom: 6px; left: 6px; }
  .cam-sponsor-placeholder.corner-bottom-right { bottom: 6px; right: 6px; }

  /* Preview-mode banner (?enablehidden=1). Fixed so it stays visible. */
  #previewBanner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 4000;
    background: repeating-linear-gradient(45deg, #c0392b, #c0392b 14px, #a5281c 14px, #a5281c 28px);
    color: #fff; text-align: center; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em;
    padding: 6px 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }
  body:has(#previewBanner) { padding-top: 34px; }   /* keep content clear of the fixed banner */
  .cam-zoom-hint {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity .15s ease;
    pointer-events: none;
  }
  .cam-thumb-wrap:hover .cam-zoom-hint,
  .cam-thumb-wrap:focus-within .cam-zoom-hint { opacity: 1; }

  /* Camera lightbox */
  .cam-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 14, 22, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .cam-lightbox[hidden] { display: none; }

  .cam-lightbox-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cam-lightbox-track::-webkit-scrollbar { display: none; }

  .cam-lightbox-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 60px 20px 100px;
    box-sizing: border-box;
  }
  .cam-lightbox-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    background: #1a2230;
  }
  /* The sponsor logo is also an <img> inside the slide; keep it out of the
     full-size rule above so it doesn't get stretched to 100%x100% or given the
     dark background (which was painting an opaque strip over the cam image). */
  .cam-lightbox-slide img.cam-sponsor-logo {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  @media (min-width: 768px) {
    .cam-lightbox-slide { padding: 60px 90px 100px; }
  }

  .cam-lightbox-close,
  .cam-lightbox-arrow {
    position: absolute;
    z-index: 2010;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
  }
  .cam-lightbox-close svg,
  .cam-lightbox-arrow svg { display: block; pointer-events: none; }

  /* Close: bright red X — visible at idle, brightest on hover. */
  .cam-lightbox-close {
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.3rem;
    background: rgba(0,0,0,0.35);
    color: #ff4d4d;
  }
  .cam-lightbox-close:hover,
  .cam-lightbox-close:focus-visible {
    background: rgba(0,0,0,0.55);
    color: #ff1a1a;
    transform: scale(1.08);
  }

  /* Arrows: bright yellow directional arrows on a faint dark disc so they
     stay legible over any image; brightest yellow on hover. */
  .cam-lightbox-arrow {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.5rem;
    background: rgba(0,0,0,0.35);
    color: #ffd21a;
  }
  .cam-lightbox-arrow:hover,
  .cam-lightbox-arrow:focus-visible {
    background: rgba(0,0,0,0.55);
    color: #fff23a;
    transform: translateY(-50%) scale(1.08);
  }
  .cam-lightbox-prev { left: 12px; }
  .cam-lightbox-next { right: 12px; }
  @media (max-width: 576px) {
    .cam-lightbox-arrow { width: 38px; height: 38px; font-size: 1.25rem; }
    .cam-lightbox-slide { padding: 52px 12px 92px; }
  }

  .cam-lightbox-caption {
    position: absolute;
    bottom: 54px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .cam-lightbox-caption-logo {
    max-height: 120px;              /* fallback; per-camera lightboxSize overrides inline */
    max-width: 70vw;                /* keep within the viewport on any screen */
    width: auto;
    height: auto;
    object-fit: contain;
    background: rgba(255,255,255,0.92);
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  }
  .cam-lightbox-dots {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .cam-lightbox-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
  }
  .cam-lightbox-dot.is-active { background: #fff; }
  /* Visual separator in the dot row: groups the five traffic cams apart from
     the two bottom items (lineup map + Gertie), as they were previously. */
  .cam-lightbox-dot-sep {
    width: 1px;
    height: 14px;
    margin: 0 8px;
    background: rgba(255,255,255,0.35);
    flex: 0 0 auto;
  }
  .cam-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gf-green);
    margin-right: 6px;
    box-shadow: 0 0 0 rgba(30,132,73,0.5);
    animation: pulse 2s infinite;
  }
  .cam-live-dot.offline { background: var(--gf-red); animation: none; }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(30,132,73,0.45); }
    70% { box-shadow: 0 0 0 8px rgba(30,132,73,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,132,73,0); }
  }

  .table-schedule {
    table-layout: fixed;
    width: 100%;
  }
  .table-schedule thead th,
  .table-schedule tbody td {
    width: 50%;
  }
  .table-schedule thead th {
    background: var(--gf-navy);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: 2;
    vertical-align: middle;
  }
  .table-schedule thead th:first-child {
    border-right: 2px solid rgba(255, 255, 255, 0.45);
  }
  .table-schedule tbody td:first-child {
    border-right: 2px solid rgba(20, 30, 50, 0.1);
  }
  .schedule-th-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .btn-service-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gf-amber);
    color: #fff;
    font-weight: 700;
    font-size: 0.51rem;
    padding: 3px 8px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  .btn-service-alert:hover,
  .btn-service-alert:focus-visible {
    background: #b08200;
    color: #fff;
  }
  .btn-service-alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    border-radius: 50%;
    background: #fff;
    color: var(--gf-amber);
    font-weight: 900;
    font-size: 0.62rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .table-schedule td {
    font-size: 0.92rem;
    vertical-align: top;
    transition: background-color .3s ease;
    overflow-wrap: break-word;
  }
  .table-schedule td .sail-badge,
  .table-schedule td .badge-note {
    vertical-align: top;
  }
  .table-schedule tbody tr:nth-child(even) td { background: #faf9f7; }
  .table-schedule tbody tr:nth-child(even) td.is-next-sailing { background: #fff8e6; }
  .badge-note { font-weight: 500; font-size: 0.72rem; }
  /* All schedule annotation notes (Except Sat/Sun, ++, Wed is DC, Discontinued,
     Daily except Wed) and the two legend notes (++ / DC): bold, dark red.
     Overrides Bootstrap's text-muted / text-secondary / emphasis colors. */
  .badge-note {
    font-weight: 700 !important;
    color: #8b0000 !important;
    background-color: #f3e6e6 !important;   /* light red-grey tint so dark red text stays legible on every variant */
  }

  /* Next-sailing highlight in the schedule table */
  .table-schedule td.is-next-sailing {
    position: relative;
    padding-right: 4.75rem;
    font-weight: 700;
    background: #fff8e6 !important;
  }
  .table-schedule td.is-next-sailing::after {
    content: "NEXT\A SCHEDULED";
    white-space: pre;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--gf-amber);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.15;
    margin: 0;
    padding: 2px 4px;
    box-sizing: border-box;
  }
  .table-schedule tr:has(td.is-next-sailing) { scroll-margin-top: 90px; }

  /* Mobile: Option 4 — stack "NEXT SCHEDULED" below the sailing info */
  @media (max-width: 575.98px) {
    .table-schedule td.is-next-sailing {
      padding-right: 0.35rem;
    }
    .table-schedule td.is-next-sailing::after {
      content: "NEXT SCHEDULED";
      white-space: nowrap;
      position: static;
      display: block;
      width: fit-content;
      margin-top: 4px;
      background: var(--gf-amber);
      color: #fff;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.2;
      padding: 2px 6px;
      border-radius: 3px;
      text-align: left;
    }
  }

  /* Brief pulse when a header chip scrolls this row into center view. */
  .table-schedule td.next-row-flash { animation: nextRowFlash 1.2s ease-out; }
  @keyframes nextRowFlash {
    0%   { background: #fff4d6; }
    100% { background: transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .table-schedule td.next-row-flash { animation: none; }
  }

  /* Vessel badges in schedule cells */
  .sail-badge {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    vertical-align: middle;
    cursor: default;
  }
  .sail-badge-ig { background: var(--gf-green); }
  .sail-badge-ix { background: var(--gf-blue); }

  /* Schedule key (grouped legend under title) */
  .schedule-title-divider {
    padding-bottom: 0.65rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e8ecf1;
  }
  .schedule-key-grouped {
    font-size: 0.82rem;
    color: #5c6a7a;
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-top: 0.65rem;
  }
  .schedule-key-grouped .key-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .schedule-key-grouped .key-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9aa4b2;
  }
  .schedule-key-grouped .key-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  @media (max-width: 575.98px) {
    .schedule-key-grouped .key-item {
      white-space: normal;
    }
  }
  @media (min-width: 576px) {
    .schedule-key-grouped .key-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.35rem 0.75rem;
    }
    .schedule-key-grouped .key-label {
      min-width: 3.25rem;
    }
    .schedule-key-grouped .key-item {
      white-space: nowrap;
    }
  }

  /* Next-sailing band under navbar */
  .next-sailing-chip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--gf-radius);
    color: #fff;
    padding: 1.1rem 1.25rem 1rem;
    box-sizing: border-box;
  }
  .next-sailing-chip:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
  }
  #next-gab-chip { border-left: 4px solid var(--gf-teal-bright); }
  #next-nai-chip { border-left: 4px solid var(--gf-blue); }
  .next-sailing-chip .bi {
    color: var(--gf-teal-bright);
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 0.1rem;
    flex-shrink: 0;
  }
  #next-nai-chip .bi { color: #6eb5e8; }
  .next-sailing-chip > .flex-grow-1 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
  }
  .next-sailing-heading {
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .next-sailing-heading .next-sailing-place { color: var(--gf-gold); }
  .next-sailing-time {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
  }
  .next-sailing-chip .chip-time-row,
  .next-sailing-chip .chip-lineup-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  .chip-lineup-status {
    margin-top: 0.15rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .next-sailing-label { color: rgba(255,255,255,0.55); letter-spacing: 0.06em; font-size: 0.72rem; text-transform: uppercase; }
  .next-sailing-countdown {
    background: var(--gf-teal);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    padding: 0.42rem 0.8rem;
    white-space: nowrap;
    border-radius: 999px;
  }
  .next-sailing-countdown.due-soon { background: var(--gf-amber); }
  .next-sailing-countdown.departed { background: var(--gf-red); }
  .next-sailing-chip .ferry-status-badge {
    font-size: 0.8125rem;
    padding: 0.42rem 0.8rem;
  }

  /* Stack Gabriola / Nanaimo chips vertically on narrow viewports */
  .next-sailing-band .next-sailing-chips-row {
    flex-wrap: wrap;
  }
  .next-sailing-band .next-sailing-chip {
    width: 100%;
    min-width: 0;
  }
  @media (max-width: 767.98px) {
    .next-sailing-band .next-sailing-chips-row > [class*="col-"] {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .next-sailing-chip .chip-time-row,
    .next-sailing-chip .chip-lineup-status {
      flex-wrap: wrap;
      row-gap: 0.35rem;
    }
  }

  /* Ferry fullness status badge, derived from the Cam 3 / Cam 4 lineup reads */
  .ferry-status-badge {
    font-weight: 700;
    font-size: 0.75rem;
    padding: 5px 10px;
    white-space: nowrap;
    color: #fff;
  }
  .ferry-status-badge.tier-half { background: var(--gf-green); }
  .ferry-status-badge.tier-threequarter { background: var(--gf-amber); }
  .ferry-status-badge.tier-nearly { background: var(--gf-red); }
  .ferry-status-badge.tier-unknown { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }
  .ferry-status-badge.tier-dark { background: #1a2740; color: #6ea8ff; }
  .ferry-status-badge.tier-low { background: var(--gf-green); }

  .nav-pills .nav-link.active { background-color: var(--gf-blue-dark); }
  .nav-pills .nav-link { color: var(--gf-blue-dark); font-weight: 500; }

  .card-soft {
    border: 1px solid var(--gf-border);
    box-shadow: var(--gf-shadow);
    border-radius: var(--gf-radius);
    overflow: hidden;
  }

  /* Info-image box below the schedule: Nanaimo lineup map + Gertie schedule,
     side by side. The two columns flex-grow in proportion to each image's
     aspect ratio (width/height), so both render at the SAME height while
     together filling 100% of the box width. Each image is tappable to open in
     the shared lightbox (swipe-to-zoom on mobile). */
  .info-images {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  .info-images .info-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    min-width: 0;               /* allow the flex items to shrink below content size */
  }
  /* flex-grow = image aspect ratio (w/h). Equal heights => widths split by ratio. */
  .info-images .info-image.ratio-nanaimo { flex: 0.947 1 0; }   /* 487 x 514 */
  .info-images .info-image.ratio-gertie  { flex: 0.821 1 0; }   /* 422 x 514 */
  .info-images .info-image img {
    width: 100%;                /* fill the column; height follows the ratio */
    height: auto;
    display: block;
    border-radius: 8px;
    border: 1px solid rgba(20,30,50,0.10);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .info-images .info-image img:hover,
  .info-images .info-image img:focus { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,30,50,0.14); }
  .info-images .info-image .info-caption {
    font-size: .78rem; color: #6c7a89; margin-top: 6px; text-align: center;
  }

  /* Sponsor panel in the right sidebar (see AD_SLOT in the script): a centred
     header plus up to three stacked sponsor spots. Fills the sidebar space
     under the terminal cam to balance the column. */
  .ad-slot-card { overflow: hidden; }
  .ad-slot-header {
    text-align: center; font-size: .84rem; color: #5b6673; line-height: 1.4;
    margin: 0 0 12px; font-weight: 600;
  }
  .ad-slot-items { display: flex; flex-direction: column; gap: 10px; }
  .ad-slot-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; border-radius: 10px; min-height: 84px; padding: 12px;
    background: #f7f9fc; border: 1px solid rgba(20,30,50,0.08);
  }
  .ad-slot-item .ad-slot-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; width: 100%; }
  .ad-slot-item .ad-slot-img { max-width: 100%; max-height: 110px; height: auto; display: block; }
  .ad-slot-item .ad-slot-caption { display: block; font-size: .82rem; color: #6c7a89; margin-top: 6px; }
  .ad-slot-item.ad-slot-empty { border: 2px dashed #c4ccd6; background: #fbfcfe; }
  .ad-slot-item .ad-slot-available-title { font-weight: 700; color: #7b8595; font-size: .9rem; }
  .ad-slot-item .ad-slot-available-sub { font-size: .78rem; color: #9aa4b2; margin-top: 4px; }

  @media (max-width: 575.98px) {
    .info-images { gap: 10px; }
  }

  /* VesselFinder's widget renders at a fixed pixel width (424px) regardless
     of its parent's width, so it can overflow the sidebar card on smaller
     screens. Clip it to the card and let it scroll horizontally instead of
     bleeding past the card's rounded edges. */
  #ais-map-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0.5rem;
    border: 1px solid #dfe4ea;
    -webkit-overflow-scrolling: touch;
  }
  #ais-map-container > div,
  #ais-map-container table {
    flex-shrink: 0;
  }

  /* Vessel tracker lightbox: the widget renders at a fixed 424x380px size
     internally, so "fill the screen" is done with a CSS scale transform
     rather than resizing — the container's own layout box stays 424x380
     for centering purposes, and the visual scale-up happens on top. The
     map itself stays clickable/pannable while open; only the dedicated
     close button, the backdrop, or Escape dismiss it. */
  .map-lightbox-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 22, 0.94);
    z-index: 2000;
    display: none;
  }
  .map-lightbox-backdrop.is-open { display: block; }

  #ais-map-container.is-lightboxed {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: none;
    z-index: 2001;
    overflow: visible;
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    transform: translate(-50%, -50%) scale(var(--map-scale, 1));
    transform-origin: center center;
  }

  /* Expand trigger: labeled pill, comfortable ~40px touch target height,
     with a visible idle background (was invisible white-on-white before). */
  .map-expand-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--gf-blue);
    border-radius: 999px;
    background: var(--gf-blue-pale);
    color: var(--gf-blue-dark);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .map-expand-btn .bi { font-size: 1rem; }
  .map-expand-btn:hover,
  .map-expand-btn:focus-visible {
    background: var(--gf-blue-dark);
    border-color: var(--gf-blue-dark);
    color: #fff;
  }
  .map-expand-btn:focus-visible {
    outline: 3px solid var(--gf-teal);
    outline-offset: 2px;
  }

  .map-lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2010;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background .15s ease;
  }
  .map-lightbox-close:hover { background: rgba(255,255,255,0.25); }
  .map-lightbox-close.is-open { display: flex; }

  .clock-chip {
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.82rem;
  }

  footer.site-footer {
    background: var(--gf-navy-deep);
    color: rgba(255,255,255,0.85);
    border-top: 3px solid var(--gf-teal);
  }
  footer.site-footer a { color: #a9c9ea; }
  footer.site-footer h6 { color: #fff; }

  .sidebar-info-body { padding: 7px 12px 12px; }
  .sidebar-info-body > p,
  .sidebar-info-body > ul { font-size: 80%; }
  .sidebar-info-subhead {
    font-size: 80%;
    font-weight: bold;
    margin: 0 0 6px;
  }
  .sidebar-info-body .supporters-list { font-size: 70%; margin-bottom: 1rem; }
  .sidebar-info-body .supporters-list:last-child { margin-bottom: 0; }

  .skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--gf-navy);
    color: #fff;
    padding: 8px 14px;
    z-index: 1080;
  }
  .skip-link:focus { left: 8px; top: 8px; }