/* Vision Bus public site - single stylesheet, no build step. */

:root {
  --ink: #173153;
  --ink-soft: rgba(23, 49, 83, 0.74);
  /* Brand tokens - overridden at runtime by site.js from /api/site/config
     (white-label operator config). The values here ARE the Vision defaults;
     with no operator config the site renders exactly from this sheet. */
  --royal: #1553a5;
  --royal-deep: #11468b;
  --royal-rgb: 21, 83, 165; /* rgb triplet of --royal for alpha washes */
  --accent: #2f88db;
  --accent-rgb: 47, 136, 219;
  --sky: #edf5fc; /* = branding "tint" */
  --sky-strong: #dcecfb;
  --header-grad-from: var(--royal-deep);
  --header-grad-to: var(--royal);
  --brand-navy: #0f2744; /* deep anchor of the hero/promo gradients */
  --brand-navy-mid: #0d2f61; /* ticket-band counter stop */
  --footer-grad-from: #10233f;
  --footer-grad-to: #0c1b31;
  --footer-link: #9cc8f5;
  --focus-glow: #7db8f0;
  --login-metal-1: #c4e1fd;
  --login-metal-2: #8ec4f5;
  --login-metal-3: #b3d8fa;
  --login-metal-4: #d4eafe;
  --mist: #f5f8fb;
  --steel: #6d7d93;
  --line: rgba(23, 49, 83, 0.1);
  --line-strong: rgba(23, 49, 83, 0.16);
  --panel: rgba(255, 255, 255, 0.94);
  --panel-soft: rgba(244, 248, 252, 0.92);
  --shadow: 0 22px 56px rgba(23, 49, 83, 0.08);
  --shadow-strong: 0 24px 68px rgba(23, 49, 83, 0.12);
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Manrope", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* The hidden attribute always wins, even over classes that set display
   (flex/grid buttons, tab bars, badges - the classic [hidden] gotcha). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at top left, rgba(var(--royal-rgb), 0.12), transparent 24%),
    linear-gradient(180deg, #eef5fb 0%, #f8fbfe 28%, #ffffff 100%);
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { max-width: 100%; }

.page { width: min(1360px, calc(100% - 2rem)); margin: 0 auto; }
/* --op-density-gap: operator theme (density) tightens the vertical section rhythm
   in "compact"; unset (comfortable default) => 1 => today's 1.6rem exactly. */
.section-stack { display: grid; gap: calc(1.6rem * var(--op-density-gap, 1)); padding-bottom: 3rem; }
/* Grid items default to min-width:auto and refuse to shrink below their content's
   intrinsic width — which lets a wide child (e.g. the timetable table) push the whole
   page sideways instead of scrolling inside its own container. min-width:0 lets each
   section shrink to the page width so inner overflow-x:auto scrollers actually clip. */
.section-stack > * { min-width: 0; }

/* Heading font: operator theme (headingFont) may override via --heading-font;
   unset (the "display" default) falls back to --font-display => today's Sora. */
h1, h2, h3 { font-family: var(--heading-font, var(--font-display)); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--sky-strong);
  color: var(--royal-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: fit-content;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}

.pill-strong { background: var(--royal); color: #fff; border-color: var(--royal); }

.live-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
  animation: live-dot-pulse 2.2s ease-in-out infinite;
}

.live-dot-ondark { background: #7df2ae; box-shadow: 0 0 0 3px rgba(125, 242, 174, 0.22); }

@keyframes live-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* --- Header --- */

.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(238, 245, 251, 0.98), rgba(238, 245, 251, 0.9));
  backdrop-filter: blur(14px);
}

.site-header-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.4rem;
  padding: 0.6rem 0;
}

.site-logo-image { height: 3.1rem; width: auto; display: block; }

.site-topbar-actions { display: flex; align-items: center; gap: 0.8rem; }

/* Header basket pill (the adaptive Buy tickets / Basket slot). Builds on
   .site-button.site-button-primary; adds the icon + a count badge. */
.site-basket-pill { gap: 0.4rem; }
.site-basket-pill-icon { font-size: 1.05rem; line-height: 1; }
.site-basket-pill-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--royal-deep);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  /* --op-btn-radius: operator theme (buttonShape); unset (rounded default) =>
     today's 999px pill. pill => 999px, square => a small radius. */
  border-radius: var(--op-btn-radius, 999px);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  /* iOS Safari defaults a flex button's text-align to `start`, so a wrapping or
     full-width label reads left-aligned there despite justify-content — pin it. */
  text-align: center;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.site-button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.site-button-primary { background: var(--royal); border-color: var(--royal); color: #fff; }

/* --- Region (area) picker --- */

.site-region-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3rem;
  padding: 0 0.55rem 0 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  cursor: pointer;
}

.site-region-pin { width: 1rem; height: 1rem; color: var(--royal); flex: none; }

.site-region-select {
  appearance: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  max-width: 11.5rem;
  min-height: 2.8rem;
  cursor: pointer;
}

.site-region-select:focus { outline: none; }
.site-region-picker:focus-within { box-shadow: 0 0 0 3px rgba(var(--royal-rgb), 0.18); }

.site-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  cursor: pointer;
}

.site-menu-icon, .site-menu-icon::before, .site-menu-icon::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
  content: "";
}

.site-menu-icon { position: relative; }
.site-menu-icon::before { position: absolute; top: -6px; }
.site-menu-icon::after { position: absolute; top: 6px; }
.site-menu-icon.is-open { background: transparent; }
.site-menu-icon.is-open::before { transform: translateY(6px) rotate(45deg); }
.site-menu-icon.is-open::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav-band { background: linear-gradient(90deg, var(--header-grad-from), var(--header-grad-to)); }

.site-nav { display: flex; gap: 0.4rem; overflow-x: auto; }

.site-nav-link {
  padding: 0.85rem 1rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.site-nav-link:hover { color: #fff; }
.site-nav-link.is-active { color: #fff; border-bottom-color: #fff; }

/* --- Page hero --- */

.page-hero { padding: 1.4rem 0 0.4rem; max-width: 56rem; display: grid; gap: 0.55rem; justify-items: start; }

.page-hero h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.45rem);
  line-height: 1.12;
}

.page-hero p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }

/* --- Landing hero --- */

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.2rem;
  padding-top: 1.4rem;
}

.hero-copy-panel {
  padding: 1.8rem 1.9rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.16), transparent 44%),
    var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  /* The panel stretches to match the (taller) planner/live-now column; distribute the slack
     BETWEEN sections rather than letting it pool as one dead hole above the bottom-anchored
     stat row. Collapses to the plain 1rem gap when there is no slack (mobile single-column). */
  justify-content: space-between;
}

.hero-copy-panel h1 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.06;
}

.hero-lead { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; max-width: 34rem; }

.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.route-ribbon { display: grid; gap: 0.5rem; }
.route-ribbon-label { color: var(--steel); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.route-chip-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.route-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.route-chip:hover { transform: translateY(-1px); border-color: var(--royal); color: var(--royal-deep); }
.route-chip-small { padding: 0.26rem 0.68rem; font-size: 0.84rem; }
.route-chip-more { border-style: dashed; }

.hero-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.8rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.hero-point { display: grid; gap: 0.2rem; }
.hero-point strong { font-family: var(--font-display); font-size: 1rem; color: var(--royal-deep); }
.hero-point span { color: var(--steel); font-size: 0.86rem; line-height: 1.45; }

.hero-side-stack { display: grid; gap: 1.2rem; }

.journey-hero-card {
  padding: 1.5rem 1.6rem;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--royal) 60%, var(--accent) 100%);
  color: #fff;
  box-shadow: var(--shadow-strong);
  display: grid;
  gap: 1rem;
}

.planner-badge {
  display: inline-flex;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  width: fit-content;
}

.journey-hero-card h2 { margin: 0; font-size: 1.45rem; }

.journey-form-shell { display: grid; gap: 0.7rem; }

.journey-field { display: grid; gap: 0.3rem; }
.journey-field > span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }

.journey-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.journey-input:focus { outline: 2px solid var(--focus-glow); }

.journey-submit { width: 100%; background: #fff; color: var(--royal-deep); border-color: #fff; }

/* Light-panel form fields (contact page) */
.field-light > span { color: var(--steel); }
.field-light .journey-input { border-color: var(--line-strong); background: #fff; }

.live-board-card {
  padding: 1.3rem 1.4rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.9rem;
}

.live-board-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.live-board-header h3 { margin: 0.4rem 0 0; font-size: 1.08rem; }
.live-board-link { color: var(--royal); font-weight: 700; white-space: nowrap; }

.live-board-list { display: grid; gap: 0.55rem; }

.live-board-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.live-board-row:hover { border-color: var(--royal); }

.live-board-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.7rem;
  height: 2.7rem;
  padding: 0 0.5rem;
  border-radius: 11px;
  background: var(--royal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}

.live-board-copy { display: grid; gap: 0.1rem; min-width: 0; }
.live-board-copy strong { font-size: 0.95rem; }
.live-board-copy span { color: var(--steel); font-size: 0.85rem; }

.live-board-status { margin-left: auto; }

.delay-pill {
  display: inline-flex;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.delay-pill-green { background: rgba(31, 157, 85, 0.14); color: #157a43; }
.delay-pill-yellow { background: rgba(243, 181, 63, 0.2); color: #8a5a00; }
.delay-pill-red { background: rgba(214, 69, 69, 0.14); color: #a32626; }
.delay-pill-unknown { background: var(--sky-strong); color: var(--royal-deep); }

.live-board-empty { padding: 0.9rem; border-radius: 14px; background: var(--panel-soft); }
.live-board-empty strong { display: block; margin-bottom: 0.25rem; }
.live-board-empty p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }

/* --- Next departures board (route.html) --- */
/* Per-service live board keyed to the stop on this route nearest the visitor
   (or the route origin without a location). The live chip reuses the shared
   .delay-pill palette so it reads identically to the tracker / Home board. */

.departures-board {
  display: grid;
  gap: 0.9rem;
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.departures-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.departures-head h2 { margin: 0.4rem 0 0; font-size: 1.15rem; }
.departures-head-copy { min-width: 0; }
.departures-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--steel);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.departures-note { margin: 0.35rem 0 0; color: var(--steel); font-size: 0.86rem; line-height: 1.45; }

.departures-list { display: grid; gap: 0.55rem; }

.departure-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.departure-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--royal-deep);
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.departure-copy { display: grid; gap: 0.14rem; min-width: 0; }
.departure-copy strong { font-size: 0.95rem; line-height: 1.25; }
.departure-copy span { color: var(--steel); font-size: 0.82rem; }

.departure-status { margin-left: auto; text-align: right; flex: none; }
.departure-scheduled { color: var(--steel); font-size: 0.82rem; font-weight: 600; }

.departures-status { padding: 1.1rem; border-radius: 14px; background: var(--panel-soft); color: var(--ink-soft); }
.departures-status strong { display: block; color: var(--ink); margin-bottom: 0.25rem; }
.departures-status p { margin: 0; font-size: 0.92rem; line-height: 1.5; }

/* --- Sections & cards --- */

.home-section { display: grid; gap: 1rem; }

.section-heading-block { display: grid; gap: 0.45rem; max-width: 46rem; justify-items: start; }
.section-heading-block h2 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }

.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }

.resource-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  /* --op-density-pad (density) tightens the card interior; --op-radius (cornerRadius)
     scales the corner. Both unset (comfortable/soft defaults) => today's values. */
  padding: calc(1.25rem * var(--op-density-pad, 1)) calc(1.35rem * var(--op-density-pad, 1));
  border-radius: calc(18px * var(--op-radius, 1));
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.resource-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.resource-card h3 { margin: 0; font-size: 1.08rem; }
.resource-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
.resource-kicker { color: var(--royal); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }

.home-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.4rem; align-items: start; }
.home-split > div { display: grid; gap: 0.9rem; align-content: start; }

.update-card-stack { display: grid; gap: 0.8rem; }

.update-card, .update-detail-card {
  padding: 1.2rem 1.35rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.5rem;
}

.update-card h3, .update-detail-card h2 { margin: 0; font-size: 1.12rem; }
.update-card p, .update-detail-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.update-card .news-inline-colour-blue, .update-detail-card .news-inline-colour-blue { color: #1553a5; }
.update-card .news-inline-colour-green, .update-detail-card .news-inline-colour-green { color: #147a48; }
.update-card .news-inline-colour-red, .update-detail-card .news-inline-colour-red { color: #c0352b; }
.update-card .news-inline-colour-amber, .update-detail-card .news-inline-colour-amber { color: #8a620d; }
.update-card .news-inline-colour-purple, .update-detail-card .news-inline-colour-purple { color: #6b4fa1; }

.update-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }

.update-severity {
  display: inline-flex;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.update-severity-info { background: var(--sky-strong); color: var(--royal-deep); }
.update-severity-minor { background: rgba(255, 190, 59, 0.24); color: #8a5a00; }
.update-severity-major { background: rgba(214, 69, 69, 0.16); color: #a32626; }

.update-date { color: var(--steel); font-size: 0.86rem; }
.update-route-chips { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.update-affects-label { color: var(--steel); font-size: 0.86rem; font-weight: 600; }
.update-all-link { color: var(--royal); font-weight: 700; }

.content-attachment-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  width: fit-content;
  margin-top: 0.18rem;
  color: var(--royal);
  font-size: 0.88rem;
  font-weight: 700;
}

.content-attachments {
  display: grid;
  /* Cap each attachment at ~28rem (was 1fr, which stretched a single image to full width and
     letterboxed it against the sky background) and left-align the tracks, so a lone image sits
     compact on the left instead of filling the row. Multiple attachments still pack left. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 28rem));
  justify-content: start;
  gap: 0.85rem;
  margin-top: 0.65rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.content-attachment {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: calc(15px * var(--op-radius, 1));
  background: var(--panel-soft);
  overflow: hidden;
}

.content-attachment-image-link {
  display: block;
  min-height: 10rem;
  max-height: 25rem;
  background: var(--sky);
  overflow: hidden;
}

.content-attachment-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 10rem;
  max-height: 25rem;
  object-fit: contain;
  transition: transform 0.18s ease;
}

.content-attachment-image-link:hover img { transform: scale(1.012); }
.content-attachment-image figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.75rem 0.85rem; }
.content-attachment-image figcaption > span { display: grid; gap: 0.14rem; min-width: 0; }
.content-attachment-image figcaption strong { overflow-wrap: anywhere; color: var(--ink); font-size: 0.88rem; }
.content-attachment-image figcaption small { color: var(--steel); font-size: 0.75rem; }
.content-attachment-image figcaption a { flex: 0 0 auto; color: var(--royal); font-size: 0.8rem; font-weight: 700; }

.content-attachment-document {
  display: grid;
  grid-column: 1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem;
}

.content-attachment-document-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 11px;
  background: #e7f1ff;
  color: var(--royal-deep);
  font-size: 0.72rem;
  font-weight: 800;
}

.content-attachment-document-copy { display: grid; gap: 0.16rem; min-width: 0; }
.content-attachment-document-copy strong { overflow-wrap: anywhere; font-size: 0.92rem; }
.content-attachment-document-copy small { color: var(--steel); font-size: 0.78rem; }
.content-attachment-document-actions { display: flex; align-items: center; gap: 0.45rem; }
.content-attachment-document-actions a { padding: 0.48rem 0.72rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--royal); font-size: 0.8rem; font-weight: 700; }
.content-attachment-document-actions a:hover { border-color: var(--royal); }

@media (max-width: 540px) {
  .content-attachment-image figcaption { align-items: flex-start; flex-direction: column; }
  .content-attachment-document { grid-template-columns: auto minmax(0, 1fr); }
  .content-attachment-document-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

.fare-highlight-stack { display: grid; gap: 0.7rem; }

.fare-highlight-card {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.9rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.fare-highlight-card strong { font-family: var(--font-display); font-size: 1.35rem; color: var(--royal-deep); white-space: nowrap; }
.fare-highlight-card span { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.45; }
.fare-highlight-cap { background: radial-gradient(circle at top right, rgba(255, 190, 59, 0.2), transparent 50%), var(--panel); }

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.9rem; }

.news-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  /* Operator theme: density scales the interior, cornerRadius the corner (both
     unset => today's values). Matches .resource-card so the card family stays even. */
  padding: calc(1.2rem * var(--op-density-pad, 1)) calc(1.3rem * var(--op-density-pad, 1));
  border-radius: calc(18px * var(--op-radius, 1));
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.news-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.news-card h2, .news-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.news-card p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }
.news-date { color: var(--steel); font-size: 0.85rem; }
.news-card-attachments { color: var(--royal); font-size: 0.82rem; font-weight: 700; }

.promo-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1.7rem 1.9rem;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--royal) 55%, var(--accent) 100%);
  color: #fff;
  box-shadow: var(--shadow-strong);
}

.promo-band h2 { margin: 0 0 0.4rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.promo-band p { margin: 0; max-width: 34rem; color: rgba(255, 255, 255, 0.82); line-height: 1.55; }
.promo-band .site-button-primary { background: #fff; color: var(--royal-deep); border-color: #fff; }

/* --- Services directory --- */

.services-search-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.services-search-input {
  flex: 1 1 22rem;
  min-height: 3.2rem;
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.services-search-input:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
.services-search-count { color: var(--steel); font-size: 0.92rem; white-space: nowrap; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.8rem; }

.service-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.service-card:hover { transform: translateY(-2px); border-color: rgba(var(--royal-rgb), 0.4); box-shadow: var(--shadow); }

.route-roundel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 0.55rem;
  border-radius: 12px;
  background: var(--royal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.route-roundel-large { min-width: 4.1rem; height: 4.1rem; border-radius: 15px; font-size: 1.5rem; }

.service-card-copy { display: grid; gap: 0.22rem; min-width: 0; }
.service-card-copy strong { font-size: 0.98rem; line-height: 1.3; }
.service-card-arrow { margin-left: auto; color: var(--steel); font-size: 1.1rem; }

.service-area-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: var(--sky-strong);
  color: var(--royal-deep);
  font-size: 0.76rem;
  font-weight: 700;
  width: fit-content;
}

.service-live-badge { display: inline-flex; align-items: center; gap: 0.4rem; color: #157a43; font-size: 0.85rem; font-weight: 600; }

.services-empty {
  grid-column: 1 / -1;
  padding: 1.6rem;
  border-radius: 16px;
  border: 1px dashed var(--line-strong);
  background: var(--panel-soft);
}

.services-empty p { margin: 0.4rem 0 0; color: var(--ink-soft); }

/* --- Service detail --- */

.service-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.14), transparent 42%), var(--panel);
  box-shadow: var(--shadow);
}

.service-hero-main { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.service-hero-main h1 { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.18; }
.service-hero-sub { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.service-hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.service-updates-strip { display: grid; gap: 0.6rem; }

.service-update-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(214, 138, 27, 0.35);
  background: rgba(255, 244, 219, 0.75);
}

.service-update-banner-copy { font-size: 0.94rem; min-width: 0; }

/* --- Timetable --- */

/* Route map — compact, fixed-height card sitting above the timetable. Matches
   the timetable panel's card treatment; the map fills a rounded, clipped box. */
.route-map-panel {
  padding: 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-width: 0;
}

#route-map {
  height: 300px;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel-soft);
}

@media (max-width: 600px) {
  #route-map { height: 240px; }
}

.timetable-panel {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-width: 0;
}

/* The panel is itself a grid; its rows (#timetable-body) must also be allowed to
   shrink so the .timetable-scroll inside can clip rather than stretch the panel. */
.timetable-panel > * { min-width: 0; }

/* Bank-holiday / special-date banner at the top of the timetable panel. */
.calendar-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--royal-rgb), 0.28);
  border-left: 3px solid var(--royal);
  background: rgba(var(--royal-rgb), 0.08);
  color: var(--royal-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
}

.timetable-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; }

.timetable-tabs { display: inline-flex; gap: 0.3rem; padding: 0.3rem; border-radius: 999px; background: var(--sky); }

.timetable-tab {
  border: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}

.timetable-tab.is-active { background: var(--royal); color: #fff; }

.timetable-status { padding: 1.2rem; border-radius: 14px; background: var(--panel-soft); color: var(--ink-soft); }
.timetable-status strong { display: block; color: var(--ink); margin-bottom: 0.3rem; }
.timetable-status p { margin: 0; }

.timetable-note { margin: 0; color: var(--steel); font-size: 0.9rem; }

.timetable-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); max-width: 100%; }

.timetable-table { border-collapse: collapse; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }

.timetable-table th, .timetable-table td {
  padding: 0.5rem 0.85rem;
  text-align: center;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.timetable-table thead th { background: var(--royal); color: #fff; font-family: var(--font-display); position: sticky; top: 0; }

.timetable-table .timetable-stop-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  text-align: left;
  font-weight: 600;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 2px 0 0 rgba(23, 49, 83, 0.06);
}

.timetable-table thead .timetable-stop-col { background: var(--royal); z-index: 3; }
.timetable-table tbody tr:nth-child(even) td { background: rgba(237, 245, 252, 0.55); }
.timetable-table tbody tr:nth-child(even) .timetable-stop-col { background: #f3f8fd; }

/* Ordinary stops are normal weight; timing points are bold + carry a diamond.
   These body-row rules override the blanket .timetable-stop-col weight:600 above
   (the thead "Stop" cell has no tt-* row class, so it keeps its heavier weight). */
.timetable-table tr.tt-stop .timetable-stop-col { font-weight: 400; }
.timetable-table tr.tt-timing .timetable-stop-col { font-weight: 700; }
.tt-diamond { color: var(--royal); margin-right: 0.3rem; font-size: 0.7em; vertical-align: middle; }

/* Static key under the timetable matrix: what the diamond and the em-dash mean. */
.timetable-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.6rem 0 0; color: var(--steel); font-size: 0.85rem; }
.timetable-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.tt-legend-dash { color: var(--steel); font-weight: 700; }

.timetable-footnote { margin: 0; color: var(--steel); font-size: 0.85rem; }

/* Flash a row when a rider taps its stop on the route map, so they can see which
   stop's departures they've jumped to. The pulse is an OVERLAY, not a background
   swap: it drives an inset box-shadow (a full-cell royal wash layered on TOP of
   the cell) so the real cell background — the white sticky stop-name column and
   the striped-row tint — is preserved and simply tinted, never wiped to page
   colour on the off-beats. It PULSES the royal wash on/off five times across the
   full 5s (one pulse per 20% of the timeline) and finishes fully transparent,
   matching the JS class-removal at 5000ms. */
.timetable-table tr.tt-row-highlight > th,
.timetable-table tr.tt-row-highlight > td {
  animation: ttRowFlash 5s ease-in-out;
}
@keyframes ttRowFlash {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% { box-shadow: inset 0 0 0 999px rgba(var(--royal-rgb), 0); }
  10%,
  30%,
  50%,
  70%,
  90%  { box-shadow: inset 0 0 0 999px rgba(var(--royal-rgb), 0.42); }
}
/* Motion-sensitive riders: replace the ~1Hz strobe with a single gentle static
   wash. No animation — just a faint royal overlay that the existing 5000ms JS
   class-removal clears, with a soft fade-out transition. */
@media (prefers-reduced-motion: reduce) {
  .timetable-table tr.tt-row-highlight > th,
  .timetable-table tr.tt-row-highlight > td {
    animation: none;
    box-shadow: inset 0 0 0 999px rgba(var(--royal-rgb), 0.22);
    transition: box-shadow 0.4s ease-in-out;
  }
}

/* Route-map stop popup: the tapped dot's name + a "View departures" jump button. */
.rm-stop-info { min-width: 8rem; }
.rm-stop-info-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.rm-stop-info-btn {
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 999px;
  background: var(--royal);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.rm-stop-info-btn:hover { background: var(--royal-deep); }

/* --- Tickets & fares --- */

.fare-banner-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; }

.fare-banner {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at top right, rgba(255, 190, 59, 0.18), transparent 46%), var(--panel);
  box-shadow: var(--shadow);
}

.fare-banner strong { font-family: var(--font-display); font-size: 1.7rem; color: var(--royal-deep); }
.fare-banner span { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.45; }

.fare-zone-section { display: grid; gap: 0.75rem; }
.fare-zone-section h2, .fare-notes-section h2, .mticket-section h2 { margin: 0; font-size: 1.25rem; }

.fare-table-scroll {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.fare-table { width: 100%; border-collapse: collapse; }

.fare-table th, .fare-table td { padding: 0.65rem 1.05rem; text-align: left; font-size: 0.95rem; border-bottom: 1px solid var(--line); }

.fare-table thead th {
  background: var(--sky);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--royal-deep);
}

.fare-table tbody tr:last-child th, .fare-table tbody tr:last-child td { border-bottom: 0; }
.fare-price { font-family: var(--font-display); font-weight: 700; color: var(--royal-deep); white-space: nowrap; }

.mticket-section { display: grid; gap: 0.9rem; }
.mticket-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; }

.mticket-step { padding: 1.15rem 1.25rem; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }

.mticket-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--royal);
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.mticket-step h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.mticket-step p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.5; }

.fare-notes-section { display: grid; gap: 0.7rem; }
.fare-notes-list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; color: var(--ink-soft); }
.fare-notes-section p { margin: 0; color: var(--ink-soft); }

.inline-link { color: var(--royal); font-weight: 600; }

/* --- Updates / notes --- */

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

.updates-footer-note {
  padding: 1.15rem 1.3rem;
  border-radius: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.updates-footer-note p { margin: 0; line-height: 1.55; }

/* All-clear state for zero service updates — green seal + copy that mirror the
   apps' Home all-clear card. Green family matches the live/on-time pills. */
.all-clear-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.3rem;
  border-radius: 16px;
  background: rgba(31, 157, 85, 0.08);
  border: 1px solid rgba(31, 157, 85, 0.24);
}

.all-clear-seal { flex: none; width: 30px; height: 30px; color: #1f9d55; }
.all-clear-card p { margin: 0; color: #157a43; font-weight: 600; line-height: 1.5; }

/* --- Articles & legal --- */

.article-body { max-width: 46rem; margin: 0 auto; display: grid; gap: 0.4rem; }
.article-body p { color: var(--ink-soft); line-height: 1.62; margin: 0 0 0.8rem; }
.legal-section h2 { font-size: 1.12rem; margin: 1.2rem 0 0.5rem; }
.legal-section p { font-size: 0.95rem; }

/* --- Contact --- */

.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; align-items: start; }
.contact-details-panel { display: grid; gap: 0.9rem; }

.contact-detail-card {
  padding: 1.15rem 1.3rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.contact-detail-card h2 { margin: 0 0 0.5rem; font-size: 1.08rem; }
.contact-detail-card p, .contact-detail-card address { margin: 0 0 0.4rem; color: var(--ink-soft); font-style: normal; line-height: 1.55; }
.contact-phone { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--royal-deep); }
.contact-hours { color: var(--steel); font-size: 0.9rem; }

.contact-form-panel {
  padding: 1.3rem 1.45rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.contact-form-panel h2 { margin: 0 0 0.9rem; font-size: 1.2rem; }
.contact-form { display: grid; gap: 0.85rem; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.contact-textarea { resize: vertical; min-height: 8rem; border-radius: 16px; }
.contact-form-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.contact-form-status { font-size: 0.92rem; }
.contact-form-ok { color: #157a43; font-weight: 600; }
.contact-form-error { color: #a32626; }

/* --- Vacancies --- */

.vacancy-list { display: grid; gap: 1.1rem; }

.vacancy-card {
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.vacancy-card h2 { margin: 0; font-size: 1.35rem; }
.vacancy-card-head { display: grid; gap: 0.55rem; margin-bottom: 0.8rem; }
.vacancy-fact-row { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.vacancy-card > p { color: var(--ink-soft); line-height: 1.58; margin: 0 0 0.7rem; }

.vacancy-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0.9rem 0; }
.vacancy-columns h3 { margin: 0 0 0.4rem; font-size: 0.98rem; }
.vacancy-columns ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }

.vacancy-apply-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.5rem; }
.vacancy-apply-note { color: var(--steel); font-size: 0.9rem; }
.vacancy-notes { margin: 0.7rem 0 0; color: var(--steel); font-size: 0.88rem; }

/* --- Planner --- */

.planner-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.1rem; align-items: start; }
.planner-results { display: grid; gap: 0.8rem; }
.planner-results-heading { margin: 0; font-size: 1.15rem; }

.planner-hint-panel { padding: 1.3rem 1.45rem; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.planner-hint-panel h2 { margin: 0 0 0.7rem; font-size: 1.15rem; }
.planner-hint-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--ink-soft); line-height: 1.5; }

/* --- Tracker --- */

.tracker-shell { position: relative; height: calc(100vh - 9rem); min-height: 30rem; }
#tracker-map { position: absolute; inset: 0; }

.tracker-panel {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 5;
  width: min(22rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-strong);
  display: grid;
  gap: 0.7rem;
}

.tracker-panel h1 { margin: 0; font-size: 1.15rem; }
.tracker-panel-sub { margin: 0; color: var(--steel); font-size: 0.86rem; }

.tracker-service-list { display: grid; gap: 0.4rem; }

.tracker-service-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.tracker-service-row:hover { border-color: var(--royal); }
.tracker-service-row.is-active { border-color: var(--royal); background: var(--sky); }
.tracker-service-row .route-roundel { min-width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
.tracker-service-copy { display: grid; min-width: 0; }
.tracker-service-copy strong { font-size: 0.92rem; }
.tracker-service-copy span { color: var(--steel); font-size: 0.8rem; }
.tracker-live-count { margin-left: auto; color: #157a43; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }

.tracker-status { padding: 0.8rem; border-radius: 12px; background: var(--panel-soft); color: var(--ink-soft); font-size: 0.9rem; }

/* Account portal tabs (account.html signed-in view) */
.account-tabs {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.2rem 0 1.4rem;
  padding: 0.35rem; border-radius: 999px; background: var(--sky); width: fit-content; max-width: 100%;
}
.account-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 0; background: transparent; cursor: pointer;
  padding: 0.55rem 1.05rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.account-tab:hover { background: rgba(255, 255, 255, 0.7); }
.account-tab.is-active { background: var(--royal); color: #fff; }
.account-tab-count[hidden] { display: none; }
.account-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px;
  background: rgba(var(--royal-rgb), 0.14); color: var(--royal); font-size: 0.75rem; font-weight: 800;
}
.account-tab.is-active .account-tab-count { background: rgba(255, 255, 255, 0.25); color: #fff; }
.account-tab-count.is-alert { background: #c22d4c; color: #fff; }
.account-panel { margin-bottom: 2rem; }

/* ----- Account support chat ----- */
.support-thread {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: 0.9rem;
  margin: 0.9rem 0;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
}
.support-msg { display: flex; }
.support-msg.is-mine { justify-content: flex-end; }
.support-msg.is-staff { justify-content: flex-start; }
.support-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 80%;
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.95rem;
  line-height: 1.35;
}
.support-msg.is-mine .support-bubble {
  background: var(--royal);
  color: #fff;
  border-bottom-right-radius: 0.3rem;
}
.support-msg.is-staff .support-bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 0.3rem;
}
.support-who { font-size: 0.72rem; font-weight: 700; color: var(--royal); }
.support-body { white-space: pre-wrap; word-break: break-word; }
.support-img {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  width: auto;
  border-radius: 0.6rem;
  cursor: pointer;
  object-fit: cover;
}
.support-time { font-size: 0.68rem; opacity: 0.6; align-self: flex-end; }
.support-empty { text-align: center; color: var(--steel); padding: 1.6rem 0.5rem; }
.support-empty strong { display: block; margin-bottom: 0.25rem; }
.support-empty p { margin: 0; }
.support-composer { display: flex; flex-direction: column; gap: 0.5rem; }
.support-input {
  width: 100%;
  resize: vertical;
  min-height: 3rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  border: 1px solid var(--line-strong);
  font: inherit;
  color: var(--ink);
}
.support-input:focus { outline: 2px solid var(--focus-glow); outline-offset: 1px; }
.support-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.support-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.support-attach:hover { border-color: var(--royal); color: var(--royal); }
.support-attach-text { white-space: nowrap; }
.support-photo-preview {
  position: relative;
  display: inline-block;
  align-self: flex-start;
}
.support-photo-thumb {
  display: block;
  max-width: 8rem;
  max-height: 8rem;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
}
.support-photo-remove {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  border: none;
  background: var(--royal);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Server-configured guided support. The same component is mounted in the
   account Support tab and in the floating chat, with a per-account local draft. */
.support-guide[hidden] { display: none; }
.support-guide { margin: 0.65rem 0; }
.support-guide-card {
  padding: 0.85rem;
  border: 1px solid rgba(var(--royal-rgb), 0.2);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 70, 139, 0.08);
}
.support-guide-head,
.support-guide-assistant,
.support-guide-actions,
.support-guide-new-row {
  display: flex;
  align-items: center;
}
.support-guide-head { justify-content: space-between; gap: 0.75rem; }
.support-guide-assistant { gap: 0.6rem; min-width: 0; }
.support-guide-assistant strong { display: block; color: var(--ink); font-size: 0.86rem; }
.support-guide-assistant p { margin: 0.08rem 0 0; color: var(--steel); font-size: 0.76rem; }
.support-guide-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--royal-deep), var(--accent));
  color: #fff;
  font-weight: 800;
}
.support-guide-topics { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.support-guide-topics button,
.support-guide-new {
  border: 1px solid rgba(var(--royal-rgb), 0.25);
  border-radius: 999px;
  background: var(--sky);
  color: var(--royal-deep);
  padding: 0.48rem 0.72rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.support-guide-topics button:hover,
.support-guide-new:hover { border-color: var(--royal); background: #fff; }
.support-guide-link {
  border: 0;
  background: transparent;
  color: var(--royal);
  padding: 0.25rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.support-guide-card > .support-guide-link { margin-top: 0.55rem; }
.support-guide-prompt { display: block; margin: 0.8rem 0 0.4rem; color: var(--ink); font-weight: 700; line-height: 1.35; }
.support-guide-answer {
  display: block;
  width: 100%;
  min-height: 4.25rem;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: 0.7rem;
  background: #fff;
  color: var(--ink);
  padding: 0.6rem 0.7rem;
  font: inherit;
}
.support-guide-answer:focus { outline: 2px solid var(--focus-glow); outline-offset: 1px; }
.support-guide-actions { justify-content: space-between; gap: 0.5rem; margin-top: 0.55rem; }
.support-guide-actions .site-button { padding: 0.42rem 0.72rem; font-size: 0.8rem; }
.support-guide-status { color: #a61d3d; font-size: 0.75rem; text-align: center; }
.support-guide-card[aria-busy="true"] .support-guide-status { color: var(--steel); }
.support-guide-new-row { justify-content: flex-end; }
.support-guide-new { padding: 0.38rem 0.65rem; background: #fff; }

/* ---------- floating support chat widget (site.js) ---------- */
/* Self-contained launcher + popup injected on every page for signed-in
   customers. Reuses the .support-* bubble/composer look from the account
   Support tab so the two surfaces match. */
.support-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200; /* below the cookie banner (240) and ticket overlay (220) */
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background: var(--royal);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.support-fab:hover { background: var(--royal-deep); transform: translateY(-2px); }
.support-fab:focus-visible { outline: 3px solid var(--focus-glow); outline-offset: 3px; }
.support-fab svg { width: 1.65rem; height: 1.65rem; display: block; }
.support-fab-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.32rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: #c22d4c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  border: 2px solid #fff;
}
.support-pop {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem; /* clears the launcher */
  z-index: 230; /* above ticket overlay, below cookie banner */
  width: 460px;
  max-width: calc(100vw - 2rem);
  height: 680px;
  max-height: calc(100vh - 6.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  animation: support-pop-in 0.16s ease;
}
@keyframes support-pop-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.support-pop-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(135deg, var(--royal-deep), var(--royal));
  color: #fff;
  flex: none;
}
.support-pop-title { font-weight: 700; font-size: 1rem; flex: 1; }
.support-pop-close {
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-pop-close:hover { background: rgba(255, 255, 255, 0.3); }
.support-pop-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.support-pop-intro {
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem;
  color: var(--steel);
  background: var(--sky);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.support-pop .support-thread {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--mist);
}
.support-pop .support-composer {
  flex: none;
  padding: 0.75rem 0.9rem 0.9rem;
  border-top: 1px solid var(--line);
  background: #fff;
}
.support-pop .support-guide {
  flex: none;
  max-height: 20rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--line);
  background: var(--sky);
}
.support-pop .support-guide-card { padding: 0.9rem; box-shadow: none; }
.support-pop .support-guide-topics { gap: 0.45rem; }
.support-pop .support-guide-topics button { padding: 0.48rem 0.7rem; font-size: 0.8rem; }
.support-pop .support-guide-prompt { font-size: 0.92rem; }
.support-pop .support-guide-answer { min-height: 4.25rem; font-size: 0.9rem; }
.support-pop .support-input { min-height: 3.25rem; }
@media (max-width: 480px) {
  .support-pop {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    max-width: none;
    height: auto;
    max-height: calc(100vh - 1rem);
    top: 0.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .support-fab { transition: none; }
  .support-fab:hover { transform: none; }
  .support-pop { animation: none; }
}

.account-friends-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  gap: 1.2rem; align-items: start;
}
.account-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.2rem; align-items: start;
}
.account-danger-card { border-color: rgba(194, 45, 76, 0.35); }
.account-danger-card h2 { color: #a11616; }

/* Marketing preferences + order history */
.marketing-check { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0; font-size: 0.92rem; cursor: pointer; }
.marketing-check.is-sub { margin-left: 1.6rem; }
.marketing-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--royal); }
.order-history-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.6rem; }
.order-history-row {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.55rem 0.9rem; border: 1px solid var(--line, #d8e0ec); border-radius: 12px; background: #fff;
}
.order-history-main { display: grid; min-width: 0; flex: 1; }
.order-history-main strong { font-size: 0.92rem; }
.order-history-main span { color: var(--ink-soft); font-size: 0.8rem; }
.order-history-amount { font-size: 0.95rem; }

/* Your photo (selfie) card + ticket-band photo */
.selfie-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.6rem; }
.selfie-preview {
  width: 6.5rem; height: 6.5rem; border-radius: 999px; object-fit: cover;
  border: 3px solid var(--royal);
}
.selfie-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 6.5rem; height: 6.5rem; border-radius: 999px;
  background: var(--sky); border: 2px dashed rgba(var(--royal-rgb), 0.4); font-size: 2rem;
}
.ticket-selfie {
  display: block; margin: 0 auto 0.5rem;
  width: 3.6rem; height: 3.6rem; border-radius: 12px; object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.ticket-selfie[hidden] { display: none; }
@media (max-width: 860px) {
  .account-friends-layout { grid-template-columns: 1fr; }
}

/* Route view: back header, "towards X" tabs, stop list with start/finish */
.tracker-route-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.tracker-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line, #d8e0ec);
  background: #fff; color: var(--royal); font-size: 1.1rem; font-weight: 700; cursor: pointer;
}
.tracker-back:hover { border-color: var(--royal); background: var(--sky); }
.tracker-route-head .route-roundel { min-width: 2.6rem; height: 2.6rem; font-size: 1rem; }
.tracker-route-title { display: grid; min-width: 0; }
.tracker-route-title strong { font-size: 1rem; line-height: 1.25; }
.tracker-route-title span { color: #157a43; font-size: 0.8rem; font-weight: 700; }
.tracker-dir-tabs { display: flex; width: 100%; margin-bottom: 0.7rem; }
.tracker-dir-tabs .timetable-tab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Two-line direction tab: "Inbound/Outbound" bold over the terminus in smaller text. Keeps each
   tab narrow (the pair splits the width and the destination ellipsises) so there's no sideways scroll. */
.tracker-dir-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; line-height: 1.2; padding: 0.38rem 0.55rem; border-radius: 12px; text-align: left; }
.tracker-dir-name { font-weight: 700; font-size: 0.9rem; }
.tracker-dir-dest { font-size: 0.72rem; font-weight: 600; opacity: 0.85; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracker-stop-list { position: relative; margin: 0.2rem 0 0.8rem; }
.tracker-stop { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.34rem 0 0.34rem 0.2rem; }
.tracker-stop::before {
  content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 3px;
  background: var(--royal); opacity: 0.35;
}
.tracker-stop.is-start::before { top: 50%; }
.tracker-stop.is-finish::before { bottom: 50%; }
.tracker-stop-dot {
  position: relative; z-index: 1; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 999px;
  background: #fff; border: 3px solid var(--royal); margin-left: 0.08rem;
}
.tracker-stop.is-start .tracker-stop-dot { border-color: #146c2e; }
.tracker-stop.is-finish .tracker-stop-dot { border-color: #a11616; }
.tracker-stop-name { font-size: 0.88rem; min-width: 0; }
.tracker-stop.is-start .tracker-stop-name, .tracker-stop.is-finish .tracker-stop-name { font-weight: 700; }
.tracker-stop-tag {
  margin-left: auto; flex: none; padding: 0.14rem 0.5rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
}
.tracker-stop-tag.tag-start { background: #e2f4e8; color: #146c2e; }
.tracker-stop-tag.tag-finish { background: #fbe3e3; color: #a11616; }
.tracker-timetable-link { display: inline-block; margin-top: 0.2rem; font-size: 0.9rem; }

/* Click-a-bus vehicle card (Google Maps InfoWindow content) */
.tracker-card { min-width: 13rem; padding: 0 0.1rem; font-family: var(--font-body); }
.tracker-card-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
/* Google reserves a tall, mostly-empty header strip above InfoWindow content for the close
   button (.gm-style-iw-chr) plus generous container padding — the bulk of the wasted space in
   the bus card. Collapse the strip (the × floats into the top-right corner) and tighten padding
   so the card content sits near the top. Scoped to .gm-style = the tracker's Google map only. */
.gm-style .gm-style-iw-chr { height: 0 !important; min-height: 0 !important; overflow: visible !important; }
.gm-style .gm-style-iw-chr .gm-style-iw-ch { height: 0 !important; min-height: 0 !important; padding: 0 !important; }
.gm-style .gm-style-iw-chr > button { top: 2px !important; right: 2px !important; }
.gm-style .gm-style-iw-c { padding: 9px 13px 11px !important; }
.gm-style .gm-style-iw-d { overflow: visible !important; max-height: none !important; padding: 0 !important; }
.tracker-card .route-roundel { min-width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }
.tracker-card-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.18rem 0; font-size: 0.86rem; }
.tracker-card-row span { color: var(--ink-soft); }
.tracker-card-row strong { color: var(--ink); font-weight: 700; text-align: right; }
.tracker-chip { display: inline-flex; align-items: center; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.tracker-chip-green { background: #e2f4e8; color: #146c2e; }
.tracker-chip-amber { background: #fdf1d7; color: #8a5a00; }
.tracker-chip-red { background: #fbe3e3; color: #a11616; }
.tracker-chip-grey { background: #eceff3; color: #5a6675; }

/* Clickable stop rows (tap/keyboard) -> departures popup. */
.tracker-stop[role="button"] { cursor: pointer; border-radius: 8px; }
.tracker-stop[role="button"]:hover { background: var(--sky); }
.tracker-stop[role="button"]:focus-visible { outline: 2px solid var(--royal); outline-offset: 1px; }

/* Gentle one-shot flash on the open bus's next stop. */
@keyframes trackerStopFlash {
  0% { background: var(--sky-strong); }
  100% { background: transparent; }
}
.tracker-stop.is-next-stop { border-radius: 8px; animation: trackerStopFlash 1.6s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .tracker-stop.is-next-stop { animation: none; background: var(--sky-strong); }
}

/* --- Departures popup (tracker: click a stop row) --- */

.tracker-dep-popup {
  position: fixed;
  inset: 0;
  z-index: 60;               /* above the sticky site header (z-index 50) so it isn't half-hidden */
  display: flex;
  align-items: flex-start;   /* anchor near the TOP of the page, not the middle */
  justify-content: center;
  padding: 4.5rem 1rem 1rem; /* sit just below the top edge */
  background: rgba(15, 27, 45, 0.28);
}
@media (max-width: 640px) { .tracker-dep-popup { padding-top: 3.5rem; } }

.tracker-dep-card {
  width: min(24rem, 100%);
  max-height: min(30rem, calc(100% - 2rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  font-family: var(--font-body);
}

.tracker-dep-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
}

.tracker-dep-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracker-dep-close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.tracker-dep-close:hover { border-color: var(--royal); color: var(--royal); }

.tracker-dep-body { overflow-y: auto; padding: 0.4rem 0.6rem 0.7rem; }

.tracker-dep-status { padding: 1.1rem 0.8rem; color: var(--ink-soft); font-size: 0.9rem; text-align: center; }
.tracker-dep-status strong { display: block; color: var(--ink); margin-bottom: 0.2rem; }
.tracker-dep-status p { margin: 0.25rem 0 0; }

.tracker-dep-list { display: grid; gap: 0.25rem; }

.tracker-dep-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.55rem;
  border-radius: 10px;
}
.tracker-dep-row:nth-child(odd) { background: var(--panel-soft); }

.tracker-dep-time { flex: none; min-width: 3.4rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.tracker-dep-to { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracker-dep-chip { flex: none; margin-left: auto; }
.tracker-dep-sched { color: var(--steel); font-size: 0.8rem; font-weight: 600; }

/* --- Trip timetable popup (vehicle card -> "View trip timetable") --- */

.tracker-card-tt {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sky);
  color: var(--royal-deep);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: center; /* Safari inherits the card's left alignment otherwise */
  cursor: pointer;
}
.tracker-card-tt:hover { background: var(--sky-strong); }

.tracker-trip-card { width: min(26rem, 100%); max-height: min(34rem, calc(100% - 2rem)); }
.tracker-trip-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.tracker-trip-titles .tracker-dep-title { flex: none; }
.tracker-trip-sub { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.tracker-trip-sub .tracker-chip { padding: 0.1rem 0.5rem; font-size: 0.72rem; }
.tracker-trip-roundel { flex: none; }

.tracker-trip-body { padding: 0.45rem 0.6rem 0.6rem; }
.tracker-trip-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.5rem; border-radius: 10px; }
.tracker-trip-row:nth-child(odd) { background: var(--panel-soft); }
.tracker-trip-time { flex: none; min-width: 3.1rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tracker-trip-row.is-timing .tracker-trip-time { font-weight: 800; }
.tracker-trip-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tracker-trip-row.is-timing .tracker-trip-dot { background: var(--royal); }
.tracker-trip-name { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Passed stops fade; the live row carries the bus. */
.tracker-trip-row.is-passed .tracker-trip-time,
.tracker-trip-row.is-passed .tracker-trip-name { color: var(--steel); opacity: 0.62; }
.tracker-trip-row.is-passed .tracker-trip-dot { opacity: 0.45; }
.tracker-trip-row.is-live { background: var(--sky-strong); box-shadow: inset 0 0 0 1px var(--royal); }
.tracker-trip-row.is-live .tracker-trip-name { font-weight: 700; }
.tracker-trip-row.is-live .tracker-trip-dot { background: var(--royal); animation: tripLivePulse 1.6s ease-in-out infinite; }
@keyframes tripLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 83, 165, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(21, 83, 165, 0); }
}
@media (prefers-reduced-motion: reduce) { .tracker-trip-row.is-live .tracker-trip-dot { animation: none; } }
.tracker-trip-livetag { flex: none; font-size: 0.72rem; font-weight: 800; color: var(--royal-deep); background: #fff; border: 1px solid var(--royal); border-radius: 999px; padding: 0.14rem 0.5rem; white-space: nowrap; }

.tracker-trip-foot { padding: 0.55rem 1rem 0.7rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-soft); }

/* --- Tracker on phones: the panel docks as a collapsible bottom sheet so the MAP leads.
   The handle (injected by tracker.js) is display:none on desktop; below 640px the panel
   pins to the bottom edge and slides up over the map when opened. --- */

.tracker-sheet-handle { display: none; }

@media (max-width: 640px) {
  .tracker-shell { overflow: hidden; height: calc(100vh - 4.6rem); }
  .tracker-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 62vh;
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0 1rem 1.1rem;
    transform: translateY(calc(100% - 3.5rem));
    transition: transform 0.28s ease;
    overflow-y: hidden;
  }
  .tracker-panel.is-open { transform: translateY(0); overflow-y: auto; }
  /* The handle header carries the summary on mobile; the big title is redundant. */
  .tracker-panel #tracker-list-view h1,
  .tracker-panel #tracker-list-view .tracker-panel-sub { display: none; }

  .tracker-sheet-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    position: sticky;
    top: 0;
    z-index: 2;
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    min-height: 3.5rem;
    padding: 0.5rem 1.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    border-radius: 18px 18px 0 0;
    font: inherit;
    cursor: pointer;
  }
  .tracker-sheet-grip {
    width: 2.4rem;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
  }
  .tracker-sheet-titlerow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
  }
  .tracker-sheet-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tracker-sheet-chevron {
    flex: none;
    color: var(--steel);
    font-size: 0.75rem;
    transition: transform 0.28s ease;
  }
  .tracker-panel.is-open .tracker-sheet-chevron { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tracker-panel, .tracker-sheet-chevron { transition: none; }
}

/* --- Footer --- */

.site-footer { margin-top: 3rem; background: linear-gradient(180deg, var(--footer-grad-from) 0%, var(--footer-grad-to) 100%); color: rgba(255, 255, 255, 0.85); }

.site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2.4fr));
  gap: 2rem;
  padding: 2.6rem 0 2rem;
}

.site-footer-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.site-footer-brand p { margin: 0 0 0.9rem; color: rgba(255, 255, 255, 0.68); line-height: 1.55; font-size: 0.93rem; max-width: 24rem; }
.site-footer-address { font-style: normal; color: rgba(255, 255, 255, 0.68); font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.8rem; }
.site-footer-contact { display: grid; gap: 0.25rem; font-size: 0.93rem; }
.site-footer-contact a { color: var(--footer-link); font-weight: 600; }
.site-footer-contact span { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; }

.site-footer-col { display: grid; gap: 0.45rem; align-content: start; }

.site-footer-col h3 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.site-footer-col a { color: rgba(255, 255, 255, 0.82); font-size: 0.93rem; }
.site-footer-col a:hover { color: #fff; }
.site-footer-social-heading { margin-top: 0.9rem !important; }

.site-footer-baseline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* --- Page builder (Phase 2 layout engine, assets/pageBuilder.js) --- */
/* Enum-mapped layout/style classes ONLY — the renderer never inlines CSS from
   tree data. With the compiled-in DEFAULT trees these reproduce today's home
   and tickets layout exactly; the same classes also back operator layouts. */

.pb-row {
  --pb-gap: 1.2rem;
  display: grid;
  min-width: 0;
  column-gap: var(--pb-gap);
  row-gap: var(--pb-gap);
  grid-template-columns: minmax(0, 1fr);
}
.pb-col { display: grid; min-width: 0; gap: var(--pb-gap); align-content: stretch; }
/* Transparent by default: the mounted element itself is the column's grid item,
   so it inherits stretch/gap exactly as the original bespoke markup did. A block
   with style props becomes a real box carrying the enum-mapped classes. */
.pb-block { display: contents; }
.pb-block.pb-styled { display: block; }

.pb-gap-sm { --pb-gap: 0.9rem; }
.pb-gap-md { --pb-gap: 1.2rem; }
.pb-gap-lg { --pb-gap: 1.4rem; }

/* Column-count templates. Two-column rows use the site's 7fr/5fr split (the hero
   copy|aside row and the updates|fares row); other counts are even. Phase 3 will
   honour per-column widths. */
.pb-cols-1 { grid-template-columns: minmax(0, 1fr); }
.pb-cols-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pb-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pb-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pb-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Row vertical alignment. Absent => stretch (grid default) so a card column
   matches the height of a taller neighbour, exactly as `.landing-hero` did. */
.pb-align-top { align-items: start; }
.pb-align-center { align-items: center; }

.pb-w-narrow { max-width: 56rem; margin-inline: auto; width: 100%; }
.pb-w-full { width: 100%; }

/* Row background — only applied when an operator sets one (padded so content is
   not flush to the tinted edge). Default rows are bg:none => transparent. */
.pb-bg-panel, .pb-bg-brand, .pb-bg-soft { border-radius: 20px; padding: 1.4rem 1.5rem; }
.pb-bg-panel { background: var(--panel); box-shadow: var(--shadow); }
.pb-bg-brand { background: var(--royal); color: #fff; }
.pb-bg-soft { background: var(--sky); }

/* Block style enums (generic + operator-styled blocks). */
.pb-pad-sm { padding: 0.6rem; }
.pb-pad-md { padding: 1rem; }
.pb-pad-lg { padding: 1.6rem; }
.pb-text-center { text-align: center; }
.pb-text-end { text-align: end; }
.pb-block-bg-panel { background: var(--panel); border-radius: 14px; }
.pb-block-bg-brand { background: var(--royal); color: #fff; border-radius: 14px; }
.pb-accent { border-left: 3px solid var(--accent); padding-left: 0.9rem; }

/* Generic block content. */
.pb-generic-heading { margin: 0; }
.pb-generic-rich p { margin: 0 0 0.8rem; color: var(--ink-soft); line-height: 1.6; }
.pb-generic-rich p:last-child { margin-bottom: 0; }
.pb-generic-image { margin: 0; }
.pb-generic-image img { display: block; max-width: 100%; height: auto; border-radius: 16px; }
.pb-spacer-sm { height: 0.8rem; }
.pb-spacer-md { height: 1.6rem; }
.pb-spacer-lg { height: 2.6rem; }
.pb-divider { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }

/* Home updates/fares columns: the old `.home-split > div` styling, now that the
   split is a page-builder row rather than a bespoke section. */
.home-split-col { display: grid; gap: 0.9rem; align-content: start; }

/* Home hero keeps its 1.4rem top breathing space (was `.landing-hero`
   padding-top). The tickets `.page-hero` provides its own top padding. */
.page-root-home > .pb-row:first-child { padding-top: 1.4rem; }

/* A row whose every block is hidden collapses entirely, so it adds no grid gap
   to the section stack — matching a `display:none` section in the old markup
   (e.g. the empty fare-tiles banner, or the news row when there is no news).
   :has() is progressive: where unsupported the row is just an empty 0-height
   cell, a harmless minor spacing difference, never a broken page. */
.pb-row:not(:has(> .pb-col > .pb-block > :not([hidden]))) { display: none; }

/* Per-block responsive opt-out (pageBuilder block.hideOnMobile). !important so it
   wins over the block slot's own display (contents/block) at narrow widths. */
@media (max-width: 640px) { .pb-hide-mobile { display: none !important; } }

/* --- Responsive --- */

@media (max-width: 1020px) {
  .landing-hero, .home-split, .planner-layout, .contact-layout { grid-template-columns: 1fr; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; }
  .pb-stack.pb-cols-2, .pb-stack.pb-cols-3, .pb-stack.pb-cols-4,
  .pb-stack.pb-cols-5, .pb-stack.pb-cols-6 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 880px) {
  .site-menu-toggle { display: inline-flex; }
  .site-topbar-tracker { display: none; }
  .site-nav-band { display: none; }
  .site-nav-band.is-open { display: block; }
  .site-nav-band.is-open .site-nav { display: grid; gap: 0.1rem; padding: 0.4rem 0 0.8rem; overflow: visible; }
  .site-nav-band.is-open .site-nav-link { border-bottom: 0; border-radius: 10px; }
  .site-nav-band.is-open .site-nav-link.is-active { background: rgba(255, 255, 255, 0.14); }
}

@media (max-width: 640px) {
  .contact-form-row { grid-template-columns: 1fr; }
  .site-footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-hero { padding: 1.1rem; }
  .hero-copy-panel { padding: 1.3rem; }
  .departure-row { gap: 0.6rem; padding: 0.65rem 0.7rem; }
  .departure-time { font-size: 1.25rem; min-width: 3.1rem; }

  /* Compact topbar so logo + region picker + actions fit a 390px viewport. */
  .site-header-topbar { gap: 0.5rem; min-height: 4.4rem; }
  .site-logo-image { height: 2.2rem; }
  .site-topbar-actions { gap: 0.4rem; }
  .site-topbar-actions .site-button { min-height: 2.55rem; padding: 0.4rem 0.6rem; font-size: 0.8rem; }
  .site-menu-toggle { width: 2.55rem; height: 2.55rem; flex: none; }
  /* Icon-only picker: the native select sits invisibly on top, so a tap still
     opens the full area list. */
  .site-region-picker { position: relative; width: 2.55rem; min-height: 2.55rem; padding: 0; justify-content: center; flex: none; }
  .site-region-select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0; opacity: 0; }
  .site-region-picker.is-active { background: var(--sky-strong); border-color: var(--royal); }
}

/* --- Account --- */

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

@media (max-width: 880px) {
  .auth-layout { grid-template-columns: 1fr; }
}

.fav-toggle {
  gap: 0.45rem;
}

.fav-toggle.is-saved {
  background: var(--sky-strong);
  border-color: var(--royal);
  color: var(--royal-deep);
}

/* --- M-Ticket shop & wallet --- */

.shop-zone-heading { margin: 0.9rem 0 0.1rem; font-size: 1.1rem; }

/* Collapsible shop: ZONE > FARE GROUP > cards (option 3 hybrid). Mirrors the
   plan-itinerary collapsible idiom: a <button> head + rotating ⌄ caret, body
   toggled via [hidden]. Default expanded; per-section state in localStorage. */
.shop-zone { margin: 0 0 1rem; }
.shop-zone-solo { margin-bottom: 0; }

.shop-collapse-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  border-radius: 8px;
}
.shop-collapse-head:hover { background: rgba(237, 245, 252, 0.55); }

.shop-zone-head {
  min-height: 4rem;
  margin: 0.65rem 0 0.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(var(--royal-rgb), 0.28);
  border-left: 6px solid var(--accent);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.2), transparent 35%),
    linear-gradient(120deg, var(--royal-deep), var(--royal) 66%, var(--accent));
  box-shadow: 0 12px 28px rgba(var(--royal-rgb), 0.18);
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.shop-zone-head:hover {
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.24), transparent 38%),
    linear-gradient(120deg, var(--royal-deep), var(--royal) 62%, var(--accent));
  box-shadow: 0 15px 34px rgba(var(--royal-rgb), 0.24);
  transform: translateY(-1px);
}
.shop-zone-head:focus-visible {
  outline: 3px solid var(--focus-glow);
  outline-offset: 2px;
}
.shop-zone-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
.shop-zone-title::before {
  content: "Area";
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Zone count pill: solid royal / white — the prominent twin of the lighter group pill,
   matching the iOS ShopCollapsibleHeader (zone = royal, group = royal at 0.7). */
.shop-zone-count {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--royal-deep);
  background: #fff;
  border-radius: 999px;
  padding: 0.08rem 0.52rem;
  box-shadow: 0 2px 8px rgba(8, 32, 64, 0.18);
}
.shop-zone-head .shop-collapse-caret { color: rgba(255, 255, 255, 0.92); }

.shop-group { margin: 0.75rem 0 0.2rem; }
.shop-zone-body > .shop-group:not(:first-child),
.shop-zone-solo > .shop-group:not(:first-child) {
  border-top: 1px solid rgba(112, 128, 144, 0.22);
  padding-top: 0.7rem;
}
.shop-group-head { padding: 0.4rem 0.3rem; }
.shop-group-title { font-weight: 700; font-size: 1.02rem; color: var(--royal-deep); }
.shop-group-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--royal-deep);
  background: var(--sky-strong);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}

.shop-collapse-caret { margin-left: auto; color: var(--steel); line-height: 1; transition: transform 0.15s ease; }
.shop-zone.is-open > .shop-zone-head .shop-collapse-caret,
.shop-group.is-open > .shop-group-head .shop-collapse-caret { transform: rotate(180deg); }

.shop-zone-body, .shop-group-body { animation: shop-collapse-in 0.16s ease; }
.shop-group-body .shop-grid, .shop-grid-standalone { margin-top: 0.5rem; }

@keyframes shop-collapse-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  /* Left accent stripe painted as a background layer (not an absolutely
     positioned ::before) so it is clipped by the card's border-radius WITHOUT
     overflow:hidden — that lets the terms-of-use popover float above the card. */
  background:
    linear-gradient(var(--shop-accent, var(--royal)), var(--shop-accent, var(--royal))) 0 0 / 6px 100% no-repeat,
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.05rem 1.1rem 1.15rem 1.35rem;
  box-shadow: var(--shadow);
}

.shop-card h3 { margin: 0.05rem 0 0; font-size: 1.06rem; }

.shop-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }

.shop-zone-tag {
  display: inline-flex;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: var(--sky-strong);
  color: var(--royal-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.shop-card-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--royal-deep);
}

.shop-card-desc { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }

.shop-card-meta {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0;
  display: grid;
  gap: 0.18rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.shop-card-meta li::before { content: "✓  "; color: #1f9d55; font-weight: 700; }

.shop-buy { margin-top: auto; }

/* Terms of use: a small green "ⓘ terms of use" link below the card body and
   above the Buy button, revealed only when the product carries terms. It sits
   at the bottom of the card (margin-top:auto) with the Buy button tucked
   directly beneath it. Clicking the link opens a caret popover above it. */
.shop-terms { position: relative; margin-top: auto; }
.shop-terms + .shop-buy { margin-top: 0; }

.shop-terms-link {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  color: #157a43;
}
.shop-terms-link:hover { color: #0f6234; text-decoration: underline; }
.shop-terms-link:focus-visible { outline: 2px solid #1f9d55; outline-offset: 2px; border-radius: 4px; }

.shop-terms-badge {
  font-size: 0.95rem;
  line-height: 1;
  color: #1f9d55;
}

.shop-terms-pop {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.55rem);
  z-index: 30;
  padding: 0.7rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 39, 68, 0.16);
  text-align: left;
}
.shop-terms.is-open .shop-terms-pop { display: block; }

/* Downward caret joining the popover to the link (a rotated square that borrows
   the popover's fill + border on its two visible sides). */
.shop-terms-pop::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

.shop-terms-title {
  display: block;
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink);
}
.shop-terms-text {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.shop-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.shop-note.is-warn { background: #fdf6e7; border-color: #e7cf9a; color: #7a5b13; }
.shop-note.is-error { background: #fdecec; border-color: #efb3b3; color: #8f1d1d; }

.shop-note-dismiss {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  color: inherit;
  padding: 0 0.1rem;
}

/* Free-issue / applied-discount success note (£0-after-promo path). */
.shop-note.is-ok { background: #e9f9f0; border-color: #9adbb6; color: #115e36; }

/* Promo / discount codes (migration 310). Signed-in-only affordance above the
   shop grid; toggle → input+Apply → applied chip, with eligible card prices
   repainted as discounted-with-struck-original. */
.shop-promo { margin: 0.1rem 0 1rem; }

.shop-promo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px dashed var(--line-strong);
  background: var(--sky);
  color: var(--royal-deep);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.shop-promo-toggle:hover { border-color: var(--royal); transform: translateY(-1px); }
.shop-promo-toggle-icon { font-size: 1rem; }

.shop-promo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.shop-promo-input {
  flex: 1 1 12rem;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--panel);
}
.shop-promo-input::placeholder { letter-spacing: normal; text-transform: none; color: var(--ink-soft); }
.shop-promo-input:focus { outline: 2px solid var(--royal); outline-offset: 1px; }
.shop-promo-form .site-button { flex: 0 0 auto; }

.shop-promo-error { margin: 0.5rem 0 0; color: #8f1d1d; font-size: 0.9rem; }

.shop-promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #e9f9f0;
  border: 1px solid #9adbb6;
  color: #115e36;
  border-radius: 999px;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  max-width: 100%;
}
.shop-promo-chip-code { font-family: var(--font-display); letter-spacing: 0.05em; }
.shop-promo-chip-desc, .shop-promo-chip-summary { font-weight: 500; }
.shop-promo-chip-remove {
  border: 0;
  background: rgba(17, 94, 54, 0.12);
  color: inherit;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.shop-promo-chip-remove:hover { background: rgba(17, 94, 54, 0.22); }

/* Discounted price on an eligible card: green final + struck original. */
.shop-card-price.is-discounted { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.shop-price-now { color: #1f9d55; }
.shop-price-was {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: line-through;
}

/* ===== M-Ticket basket (multi-item cart) =====================================
   A per-card quantity stepper + "Add to basket", a basket toggle/badge in the
   shop heading, and a slide-in basket drawer (line items, promo, totals,
   checkout). Reuses the shop-promo styling inside the drawer for consistency. */

/* Shop heading row: title block + basket toggle pushed to the right. */
.shop-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.basket-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--royal-deep);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.basket-toggle:hover { border-color: var(--royal); transform: translateY(-1px); }
.basket-toggle.has-items { border-color: var(--royal); }
.basket-toggle-icon { font-size: 1.05rem; line-height: 1; }
.basket-toggle-count {
  min-width: 1.4rem;
  padding: 0.05rem 0.42rem;
  border-radius: 999px;
  background: var(--royal);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}
@keyframes basket-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.basket-toggle.bump { animation: basket-bump 0.32s ease; }

/* Per-card add row: quantity stepper + Add to basket button. */
.shop-add { margin-top: auto; display: flex; align-items: center; gap: 0.6rem; }
.shop-terms + .shop-add { margin-top: 0.6rem; }

.shop-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
  flex: none;
}
.shop-qty-btn {
  border: 0;
  background: none;
  width: 2rem;
  height: 2.1rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--royal-deep);
  cursor: pointer;
}
.shop-qty-btn:hover:not(:disabled) { background: var(--sky); }
.shop-qty-btn:disabled { color: var(--steel); opacity: 0.5; cursor: default; }
.shop-qty-value {
  min-width: 1.7rem;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.shop-add-btn { flex: 1 1 auto; }
.shop-add-btn.is-added { background: #1f9d55; border-color: #1f9d55; }

/* Backdrop + slide-in drawer. */
.basket-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 39, 68, 0.42);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.basket-backdrop.is-open { opacity: 1; }

.basket-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 81;
  width: min(26rem, 100vw);
  height: 100%;
  height: 100dvh;
  background: var(--panel-soft);
  box-shadow: -18px 0 50px rgba(15, 39, 68, 0.2);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.basket-drawer.is-open { transform: translateX(0); }
body.basket-open { overflow: hidden; }

.basket-panel { display: flex; flex-direction: column; height: 100%; }

.basket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.basket-title { margin: 0; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.basket-title-count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--royal);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
.basket-close {
  border: 0;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--steel);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
}
.basket-close:hover { background: var(--sky); color: var(--ink); }

.basket-scroll { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.15rem; }

.basket-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft); }
.basket-empty-icon { font-size: 2.4rem; display: block; margin-bottom: 0.6rem; opacity: 0.7; }
.basket-empty-title { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.basket-empty-sub { margin: 0; font-size: 0.9rem; }

.basket-lines { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.7rem; }
.basket-line {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.8rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.basket-line-info { display: grid; gap: 0.15rem; }
.basket-line-zone {
  justify-self: start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--royal-deep);
  background: var(--sky-strong);
  border-radius: 999px;
  padding: 0.08rem 0.5rem;
}
.basket-line-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.basket-line-unit { font-size: 0.82rem; color: var(--ink-soft); }
.basket-line-controls { display: flex; align-items: center; gap: 0.6rem; }
.basket-qty { transform: scale(0.94); transform-origin: left center; }
.basket-line-sub {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--royal-deep);
  font-variant-numeric: tabular-nums;
}
.basket-line-remove {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--steel);
  padding: 0.3rem;
  border-radius: 8px;
}
.basket-line-remove:hover { background: #fdecec; color: #8f1d1d; }

.basket-promo { margin: 0.9rem 0 0; }
.basket-promo .shop-promo-toggle { width: 100%; justify-content: center; }
.basket-promo-updating { font-size: 0.8rem; font-weight: 500; opacity: 0.75; }
.basket-promo-signin { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.basket-foot { border-top: 1px solid var(--line); padding: 1rem 1.15rem 1.15rem; background: var(--panel); }
.basket-totals { display: grid; gap: 0.35rem; margin-bottom: 0.8rem; }
.basket-total-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; color: var(--ink-soft); }
.basket-total-row span:last-child { font-variant-numeric: tabular-nums; }
.basket-total-row.is-discount { color: #157a43; font-weight: 600; }
.basket-total-row.is-grand {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
}
.basket-total-row.is-grand span:last-child { color: var(--royal-deep); }
.basket-checkout { width: 100%; min-height: 2.9rem; }
.basket-foot-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--ink-soft); text-align: center; }

.basket-msg { margin-bottom: 0.7rem; font-size: 0.9rem; }
.basket-msg:empty { display: none; }
.basket-msg.is-error {
  background: #fdecec;
  border: 1px solid #efb3b3;
  color: #8f1d1d;
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

@media (max-width: 480px) {
  .basket-drawer { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .basket-drawer, .basket-backdrop { transition: none; }
  .basket-toggle.bump { animation: none; }
}

/* Wallet */

.ticket-wallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.wallet-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem 1.4rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wallet-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 7px;
  background: var(--wallet-accent, var(--royal));
}

.wallet-card.is-history { filter: grayscale(0.85); opacity: 0.62; box-shadow: none; }
/* Active on another device (migration 191): greyed, QR disabled. */
.wallet-card.is-elsewhere { filter: grayscale(0.8); opacity: 0.68; }
.wallet-card.is-elsewhere .site-button[disabled] { opacity: 0.55; cursor: not-allowed; }

.wallet-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.wallet-card-top strong { font-family: var(--font-display); font-size: 1.02rem; }
.wallet-card-zone { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.wallet-card-info { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--ink-soft); }
.wallet-card .site-button { align-self: flex-start; min-height: 2.5rem; padding: 0.45rem 1.1rem; }

.wallet-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wallet-pill-dormant { background: var(--sky-strong); color: var(--royal-deep); }
.wallet-pill-active { background: #e3f7eb; color: #157a43; }
.wallet-pill-expired, .wallet-pill-revoked { background: #eef0f3; color: #6b7280; }

.wallet-history-details { margin-top: 0.4rem; }
.wallet-history-details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--steel);
  font-size: 0.95rem;
  padding: 0.3rem 0;
}
.wallet-history-details[open] summary { margin-bottom: 0.7rem; }

/* Purchase result panel */

.purchase-panel {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  border: 1px solid;
  margin-bottom: 1rem;
  animation: purchase-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.purchase-panel strong { display: block; font-family: var(--font-display); margin-bottom: 0.15rem; }
.purchase-panel p { margin: 0; font-size: 0.92rem; }
.purchase-panel.is-ok { background: #e9f9f0; border-color: #9adbb6; color: #115e36; }
.purchase-panel.is-pending { background: #fdf6e7; border-color: #e7cf9a; color: #7a5b13; }
.purchase-panel.is-error { background: #fdecec; border-color: #efb3b3; color: #8f1d1d; }

@keyframes purchase-pop {
  0% { transform: scale(0.94); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Confirm modal */

.vb-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(13, 26, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vb-modal {
  background: #fff;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  max-width: 26rem;
  width: 100%;
  box-shadow: var(--shadow-strong);
  display: grid;
  gap: 0.7rem;
}

.vb-modal h3 { margin: 0; font-size: 1.15rem; }
.vb-modal p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.vb-modal-actions { display: flex; gap: 0.7rem; justify-content: flex-end; margin-top: 0.4rem; flex-wrap: wrap; }

/* Full-screen ticket overlay */

.ticket-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.ticket-watermark {
  position: absolute;
  inset: -65%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 3.3rem;
  letter-spacing: 0.35em;
  white-space: pre;
  color: var(--royal-deep);
  animation: ticket-watermark-drift 46s ease-in-out infinite alternate;
}

@keyframes ticket-watermark-drift {
  from { transform: rotate(-24deg) translate3d(0, 0, 0); }
  to { transform: rotate(-24deg) translate3d(-9rem, 2.5rem, 0); }
}

.ticket-band {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.15rem 3.4rem 1.05rem;
  color: #fff;
  text-align: center;
  background: linear-gradient(115deg,
    var(--ticket-colour, var(--royal)) 0%, var(--brand-navy-mid) 30%,
    var(--ticket-colour, var(--royal)) 52%, var(--brand-navy-mid) 78%,
    var(--ticket-colour, var(--royal)) 100%);
  background-size: 320% 100%;
  animation: ticket-band-slide 7s linear infinite alternate;
}

@keyframes ticket-band-slide {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

.ticket-band-product { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.ticket-band-zone { font-size: 0.9rem; opacity: 0.85; font-weight: 600; letter-spacing: 0.03em; }

.ticket-overlay-close {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.ticket-body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 30rem;
  padding: 0.8rem 1.2rem 1.6rem;
}

.ticket-clock {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  letter-spacing: 0.04em;
}

.ticket-valid-row { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }

.ticket-valid-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--steel);
}

.ticket-valid-until { font-weight: 700; font-size: 1.02rem; }

.ticket-countdown {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.85rem;
  border-radius: 999px;
  background: var(--sky-strong);
  color: var(--royal-deep);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9rem;
}

.ticket-qr-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.85rem;
  box-shadow: var(--shadow);
  margin-top: 0.3rem;
}

.ticket-qr-wrap canvas { display: block; width: min(62vw, 250px); height: auto; image-rendering: pixelated; }

.ticket-qr-fallback {
  max-width: 16rem;
  text-align: center;
  font-weight: 700;
  word-break: break-all;
  font-size: 1.05rem;
}

.ticket-serial {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.35em;
  font-size: 1.05rem;
  margin-top: 0.15rem;
}

.ticket-passengers { color: var(--ink-soft); font-size: 0.92rem; }

.ticket-expired-flag {
  display: none;
  font-family: var(--font-display);
  font-weight: 800;
  color: #8f1d1d;
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  margin-top: 0.4rem;
}

.ticket-overlay.is-expired .ticket-qr-wrap,
.ticket-overlay.is-expired .ticket-countdown { display: none; }
.ticket-overlay.is-expired .ticket-expired-flag { display: block; }

@media (max-width: 420px) {
  .ticket-band { padding: 1rem 3.2rem 0.9rem; }
  .ticket-band-product { font-size: 1.12rem; }
  .ticket-body { gap: 0.5rem; }
}

/* [hidden] must win over the explicit display rules above */
.ticket-overlay[hidden],
.vb-modal-backdrop[hidden],
.ticket-countdown[hidden],
.ticket-qr-wrap canvas[hidden],
.ticket-qr-fallback[hidden] { display: none; }

/* Social sign-in row (config-gated) + confirm-field forms */
.auth-social { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1.4rem; }
.auth-social-buttons { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.auth-apple-btn { background: #000; color: #fff; border-color: #000; min-width: 17.5rem; justify-content: center; }
.auth-apple-btn:hover { background: #1a1a1a; }

/* Signed-out "Log in": light-blue metallic button with a sweeping sheen */
#site-account-button {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--login-metal-1) 0%, var(--login-metal-2) 45%, var(--login-metal-3) 75%, var(--login-metal-4) 100%);
  border-color: rgba(var(--royal-rgb), 0.3);
  color: var(--royal-deep);
}
#site-account-button::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 45%;
  left: -70%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: login-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes login-sheen {
  0% { left: -70%; }
  60% { left: 140%; }
  100% { left: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  #site-account-button::after { animation: none; display: none; }
  .shop-collapse-caret { transition: none; }
  .shop-zone-head { transition: none; }
  .shop-zone-head:hover { transform: none; }
  .shop-zone-body, .shop-group-body { animation: none; }
}

/* Signed-in header pill: avatar + name + dropdown menu */
.site-account-menu-wrap { position: relative; }
.site-account-pill { gap: 0.55rem; padding: 0.45rem 1rem 0.45rem 0.5rem; }
.site-account-avatar {
  width: 2.1rem; height: 2.1rem; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--sky-strong); flex: none;
}
.site-account-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sky); font-size: 1.1rem;
}
.site-account-caret { color: var(--steel); font-weight: 400; margin-top: -0.3rem; }
.site-account-menu {
  position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 60;
  min-width: 13.5rem; padding: 0.4rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-strong);
  display: flex; flex-direction: column;
}
.site-account-menu a, .site-account-menu button {
  text-align: left; padding: 0.6rem 0.8rem; border-radius: 9px; border: 0;
  background: none; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
}
.site-account-menu a:hover, .site-account-menu button:hover { background: var(--sky); }
#site-signout { color: #a11616; }

/* --- Trip planner (plan.html) --- */

.plan-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.1rem; align-items: start; }

.plan-unavailable p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

.plan-form-card { position: sticky; top: 7.4rem; }

/* From/To with the swap button riding the right edge between the fields */
.plan-endpoints { position: relative; display: grid; gap: 0.7rem; }
.plan-endpoints .journey-input { padding-right: 3.4rem; }

.plan-swap {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--royal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 39, 68, 0.28);
}
.plan-swap svg { width: 1.2rem; height: 1.2rem; }
.plan-swap:hover { background: var(--sky); }

.plan-field { position: relative; }

/* Autocomplete dropdown: predictions / current location / recents */
.plan-suggest {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 30;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-strong);
  overflow: hidden;
  max-height: 22rem;
  overflow-y: auto;
}

.plan-suggest-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
.plan-suggest-row:hover, .plan-suggest-row:focus { background: var(--sky); }
.plan-suggest-row .plan-icon { flex: none; color: var(--steel); }
.plan-suggest-locate .plan-icon, .plan-suggest-locate .plan-suggest-primary { color: var(--royal); }

.plan-suggest-copy { display: grid; gap: 0.05rem; min-width: 0; }
.plan-suggest-primary { font-weight: 600; font-size: 0.95rem; }
.plan-suggest-secondary { color: var(--steel); font-size: 0.82rem; }

.plan-suggest-heading {
  padding: 0.55rem 0.85rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}

.plan-suggest-note { padding: 0.55rem 0.85rem; color: var(--steel); font-size: 0.86rem; }

.plan-suggest-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.4rem 0.85rem 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--steel);
  font-size: 0.72rem;
}

/* Preference toggles + depart/arrive segmented pills (on the royal card) */
.plan-pref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.plan-pref {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}
.plan-pref svg { width: 1rem; height: 1rem; flex: none; }
.plan-pref.is-active { background: #fff; border-color: #fff; color: var(--royal-deep); }

.plan-time-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.plan-time-pill {
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.6rem;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.plan-time-pill.is-active { background: #fff; color: var(--royal-deep); }

.plan-when-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; }
.plan-when-field { display: grid; }
.plan-when-row .journey-input { padding-right: 0.8rem; }

.plan-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.plan-form-error {
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #a11616;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Results column */
.plan-results { display: grid; gap: 0.8rem; align-content: start; }

.plan-summary-card {
  padding: 0.95rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  gap: 0.3rem;
}
.plan-summary-route { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-family: var(--font-display); font-size: 1.02rem; }
.plan-summary-arrow { color: var(--royal); font-weight: 800; }
.plan-summary-sub { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; color: var(--steel); font-size: 0.85rem; }
.plan-attribution { font-size: 0.75rem; }

.plan-loading { display: grid; gap: 0.4rem; justify-items: start; }
.plan-loading p { margin: 0; color: var(--steel); }
.plan-spinner {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  border: 3px solid var(--sky-strong);
  border-top-color: var(--royal);
  animation: plan-spin 0.9s linear infinite;
}
@keyframes plan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .plan-spinner { animation: none; } }

.plan-results-error h2, .plan-results-empty h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.plan-results-error p, .plan-results-empty p { margin: 0; color: var(--ink-soft); line-height: 1.5; }

/* Itinerary cards */
.plan-itinerary {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.plan-itinerary.is-open { border-color: var(--royal); }

.plan-itin-head {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.plan-itin-head:hover { background: rgba(237, 245, 252, 0.55); }

.plan-itin-toprow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.plan-itin-times { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.plan-itin-times strong { font-family: var(--font-display); font-size: 1.08rem; }
.plan-itin-duration { color: var(--steel); font-size: 0.88rem; font-weight: 600; }
.plan-itin-badges { display: flex; align-items: center; gap: 0.4rem; }
.plan-itin-caret { color: var(--steel); transition: transform 0.15s ease; }
.plan-itinerary.is-open .plan-itin-caret { transform: rotate(180deg); }

.plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.plan-badge-fastest { background: #e7f7ee; color: #177a43; border: 1px solid rgba(23, 122, 67, 0.28); }
.plan-badge-vision { background: var(--royal); color: #fff; }

/* Leg-chip strip: walk icons + line pills, chevron-separated */
.plan-leg-strip { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.plan-leg-chip { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--steel); }
.plan-leg-chip .plan-icon { width: 1rem; height: 1rem; }
.plan-leg-walk { font-size: 0.78rem; font-weight: 600; }
.plan-leg-sep { color: var(--line-strong); font-weight: 700; }

.plan-icon { width: 1.05rem; height: 1.05rem; flex: none; }

.plan-line-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 8px;
  background: #e6ebf3;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.82rem;
  white-space: nowrap;
}
.plan-line-pill.is-vision { background: var(--royal); color: #fff; }
.plan-line-pill.is-rail { background: #f2a91e; color: #231a00; }

.plan-operator-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--steel);
  font-weight: 600;
  font-size: 0.75rem;
  white-space: nowrap;
}
.plan-operator-pill.is-vision { border-color: var(--royal); color: var(--royal-deep); background: var(--sky); }

/* Vertical timeline (details) */
.plan-itin-details { padding: 0.2rem 1.2rem 1.1rem; border-top: 1px solid var(--line); }

.plan-timeline { display: grid; padding-top: 0.8rem; }

.plan-tl-row {
  display: grid;
  grid-template-columns: 3.2rem 1.5rem minmax(0, 1fr);
  gap: 0 0.6rem;
  padding: 0.35rem 0;
}

.plan-tl-time { color: var(--steel); font-size: 0.85rem; font-weight: 700; text-align: right; padding-top: 0.1rem; white-space: nowrap; }

.plan-tl-node { position: relative; display: flex; justify-content: center; }
.plan-tl-node::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--line-strong);
  border-radius: 2px;
}
.plan-tl-start .plan-tl-node::before { top: 0.5rem; }
.plan-tl-end .plan-tl-node::before { bottom: calc(100% - 0.5rem); }

.plan-tl-dot {
  position: relative;
  z-index: 2;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.18rem;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--royal);
}

.plan-tl-node-walk::before { background: transparent; border-left: 3px dotted var(--line-strong); width: 0; border-radius: 0; }
.plan-tl-node-walk .plan-icon { position: relative; z-index: 2; background: var(--mist); border-radius: 999px; padding: 0.12rem; margin-top: 0.15rem; color: var(--steel); }

.plan-tl-transit .plan-tl-node-transit::before { background: #b9c5d6; }
.plan-tl-transit.is-vision .plan-tl-node-transit::before { background: var(--royal); }

.plan-tl-body { display: grid; gap: 0.18rem; padding-bottom: 0.3rem; min-width: 0; }
.plan-tl-body strong { font-size: 0.95rem; }
.plan-tl-linehead { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; color: var(--steel); }
.plan-tl-stopline { color: var(--ink-soft); font-size: 0.88rem; }
.plan-tl-meta { color: var(--steel); font-size: 0.82rem; }
.plan-tl-walk-instruction { color: var(--ink-soft); font-size: 0.92rem; }
.plan-tl-arrive { color: var(--ink-soft); font-size: 0.88rem; padding-top: 0.15rem; }
.plan-tl-arrive-time { font-weight: 700; color: var(--steel); font-size: 0.85rem; }

@media (max-width: 1020px) {
  .plan-layout { grid-template-columns: 1fr; }
  .plan-form-card { position: static; }
}

@media (max-width: 640px) {
  .plan-tl-row { grid-template-columns: 2.7rem 1.3rem minmax(0, 1fr); }
  .plan-itin-head, .plan-summary-card { padding: 0.85rem 0.95rem; }
  .plan-itin-details { padding: 0.2rem 0.95rem 0.95rem; }
}

/* --- Cookie consent banner --- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 240; /* above the ticket overlay (220) so it's never buried */
  background: var(--panel);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -18px 48px rgba(23, 49, 83, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: cookie-banner-in 0.28s ease;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding-top: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  flex-wrap: wrap;
}

.cookie-banner-icon {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--sky);
  color: var(--royal);
}

.cookie-banner-text { flex: 1 1 18rem; min-width: 0; }

.cookie-banner-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.cookie-banner-line {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cookie-banner-line a { color: var(--royal); font-weight: 700; }

.cookie-banner-actions {
  flex: none;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cookie-banner-actions .site-button {
  min-height: 2.7rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
}

@keyframes cookie-banner-in {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 640px) {
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .site-button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

/* ---------- password show/hide eye (site.js initPasswordToggles) ---------- */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 2.9rem; }
.pw-eye {
  position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 8px;
  background: none; color: #6b7a90; cursor: pointer;
}
.pw-eye:hover { color: #24354d; }
.pw-eye:focus-visible { outline: 2px solid var(--focus-glow, #2f6df6); }
.pw-eye svg { width: 20px; height: 20px; }