/* NewTrip.in — the design system from docs/brand/design-specification.md,
   as CSS custom properties and the components built on them.

   ── Contrast, measured rather than hoped for ────────────────────────────
   Every pairing the site actually puts on screen, computed against WCAG 2.2:

     text      #20243A  on white    #FFFFFF   15.27:1
     text      #20243A  on surface  #F5F6FA   14.19:1
     muted     #6B7184  on white    #FFFFFF    5.02:1
     muted     #6B7184  on surface  #F5F6FA    4.67:1
     primary   #3552A5  on white    #FFFFFF    7.24:1
     primary   #3552A5  on surface  #F5F6FA    6.70:1
     white     #FFFFFF  on primary  #3552A5    7.24:1
     white     #FFFFFF  on deep     #293F83    9.85:1

   The lowest anywhere is 4.67:1, which clears AA's 4.5.

   ── The one departure from the brand specification ──────────────────────
   §3.2 sets secondary text at #72788D. Measured, that is 4.39:1 on white and
   4.06:1 on the light surface — under the 4.5 the same document targets in
   §17. It is used for descriptions and supporting copy, which is most of the
   words on the site, so it is darkened to #6B7184: same grey character, and
   it passes on every surface. Nothing else in the palette moved. */

:root {
  /* Brand — §3.1 */
  --primary: #3552a5;
  --primary-deep: #293f83;
  --indigo: #5969b1;
  --periwinkle: #7a85bf;
  --lavender: #cdcde9;

  /* Neutral — §3.2 */
  --white: #ffffff;
  --off-white: #fafbfe;
  --surface: #f5f6fa;
  --border: #e1e2eb;
  --text: #20243a;
  --muted: #6b7184; /* see the note above: §3.2 says #72788D */
  --disabled: #a7adbd;

  /* Functional — §3.3 */
  --success: #21865b;
  --danger: #d94a4a;
  --warning: #d99527;
  --info: #3976c6;

  /* Spacing — §6.1, base unit 4px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px;

  /* Radius — §6.2 */
  --r-button: 10px; --r-input: 10px; --r-card: 14px;
  --r-image: 16px;  --r-modal: 18px; --r-pill: 999px;

  /* §6.3 — subtle, never heavy */
  --shadow: 0 8px 30px rgba(32, 36, 58, 0.06);
  --shadow-lift: 0 14px 40px rgba(32, 36, 58, 0.10);

  --container: 1240px;
  --header-h: 76px;
}

/* ── reset ─────────────────────────────────────────────────────────────── */

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

body {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* A visible focus ring everywhere, on the brand colour. §17 asks for
   WCAG 2.2 AA and a keyboard user who cannot see where they are has no way
   through a booking form. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--primary); color: #fff;
  padding: var(--s3) var(--s4); border-radius: 0 0 var(--r-button) 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ── type — §4.2 ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 { margin: 0 0 var(--s4); font-weight: 700; line-height: 1.15; }
h1 { font-size: 48px; }
h2 { font-size: 36px; font-weight: 600; }
h3 { font-size: 26px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }
p  { margin: 0 0 var(--s4); }

.hero-title { font-size: 60px; line-height: 1.1; letter-spacing: -0.02em; }
.lede  { font-size: 18px; color: var(--muted); max-width: 60ch; }
.small { font-size: 14px; }
.muted { color: var(--muted); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: var(--s2);
}

@media (max-width: 767px) {
  .hero-title { font-size: 38px; }
  h1 { font-size: 34px; } h2 { font-size: 28px; }
  h3 { font-size: 22px; } h4 { font-size: 18px; }
  .lede { font-size: 17px; }
  body { font-size: 15px; }
}

/* ── layout — §6.1 ─────────────────────────────────────────────────────── */

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 44px; }
.band { padding: 96px 0; }
.band-surface { background: var(--surface); }
.band-off { background: var(--off-white); }
.band-deep { background: var(--primary-deep); color: #fff; }
.band-deep h2, .band-deep h3 { color: #fff; }
.band-deep .lede, .band-deep .muted { color: #cdd6ef; }

.grid { display: grid; gap: var(--s6); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s12); align-items: center; }
/* The detail pages are an article with a sidebar, not two balanced columns:
   a fixed sidebar width and a top edge that lines up with the first
   paragraph. Centring an aside against a 1200-word page floats it into the
   middle of nowhere. */
.split-article { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }

@media (max-width: 1023px) {
  .wrap { padding: 0 30px; }
  .band { padding: 72px 0; }
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--s8); }
}
@media (max-width: 767px) {
  .wrap { padding: 0 20px; }
  .band { padding: 56px 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

/* ── buttons — §14 ─────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s6);
  border-radius: var(--r-button); border: 1px solid transparent;
  font: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all 180ms ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-deep); transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn-secondary:hover { background: var(--surface); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface); }
.btn-on-dark { background: #fff; color: var(--primary); }
.btn-on-dark:hover { background: var(--lavender); }
.btn-sm { min-height: 40px; font-size: 15px; padding: 0 var(--s4); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--border); color: var(--disabled);
  border-color: transparent; cursor: not-allowed; transform: none;
}
.btn-danger { background: var(--danger); color: #fff; }

/* ── header — §7.2 ─────────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h); background: #fff;
  border-bottom: 1px solid var(--border);
}
.header .wrap { height: 100%; display: flex; align-items: center; gap: var(--s6); }
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: var(--s6); margin-left: auto; align-items: center; }
.nav a { color: var(--text); font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--primary); text-decoration: none; }
.header-cta { display: flex; gap: var(--s3); align-items: center; }

.burger {
  display: none; margin-left: auto; background: none; border: 0;
  padding: var(--s2); cursor: pointer; color: var(--text);
}
@media (max-width: 1023px) {
  .header { height: 64px; }
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  .nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 64px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    padding: var(--s5); gap: var(--s4); margin: 0;
  }
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative; background: var(--primary-deep); color: #fff;
  padding: 104px 0 120px; overflow: hidden;
}
.hero::after {
  /* The road motif from the logo's T, as a receding dashed centre line.
     Drawn rather than photographed, so the hero is strong before any
     photography exists — see the design document on the photo gap. */
  content: ""; position: absolute; inset: auto 0 -10% 0; height: 60%;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.22) 0 28px, transparent 28px 60px);
  width: 10px; margin: 0 auto;
  transform: perspective(300px) rotateX(58deg);
  opacity: 0.5; pointer-events: none;
}
.hero-photo { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; }
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,32,75,0.35) 0%, rgba(20,32,75,0.80) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { color: #d9e1f7; }
.cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

.props { display: flex; gap: var(--s8); flex-wrap: wrap; margin-top: var(--s10); }
.prop { display: flex; align-items: center; gap: var(--s2); color: #d9e1f7; font-size: 15px; }
.prop svg { flex: none; }

/* ── cards ─────────────────────────────────────────────────────────────── */

.card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-card); overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card h3 { margin: 0; font-size: 20px; }
.card .meta { font-size: 14px; color: var(--muted); }
.card-foot {
  margin-top: auto; padding-top: var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}

.thumb {
  aspect-ratio: 16 / 10; width: 100%; object-fit: cover;
  background: var(--surface); border-bottom: 1px solid var(--border);
}

/* An image slot with nothing in it yet. Designed rather than broken: the
   site ships before the photography does, and an empty frame that looks
   deliberate is better than a grey box or a stock photograph. */
.thumb-empty {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg,
      var(--surface) 0 14px, var(--off-white) 14px 28px);
  border-bottom: 1px solid var(--border); color: var(--periwinkle);
}
.thumb-empty svg { opacity: 0.85; }

.price { font-weight: 700; color: var(--primary); white-space: nowrap; }
.price small { font-weight: 500; color: var(--muted); display: block; font-size: 12px; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag {
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border-radius: var(--r-pill); background: #eaeefb; color: var(--primary-deep);
}
.tag-warm { background: #fdf2e0; color: #8a5a10; }

/* ── forms — §14, 48–52px fields ───────────────────────────────────────── */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=password], select, textarea {
  width: 100%; min-height: 50px; padding: 0 var(--s4);
  font: inherit; font-size: 16px; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-input);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea { min-height: 120px; padding: var(--s3) var(--s4); line-height: 1.6; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53, 82, 165, 0.15);
  outline: none;
}
.field { margin-bottom: var(--s4); }
.field-error { color: var(--danger); font-size: 13px; margin-top: 6px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }

/* The honeypot. Hidden from people and from screen readers; a bot that fills
   every field fills this one too. See the design document on why there is no
   third-party captcha. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── notices ───────────────────────────────────────────────────────────── */

.notice {
  padding: var(--s4) var(--s5); border-radius: var(--r-card);
  border: 1px solid var(--border); background: var(--surface);
  margin-bottom: var(--s4);
}
.notice-good { background: #e8f6ef; border-color: #b9e0cd; color: #10543a; }
.notice-bad  { background: #fdecec; border-color: #f3c6c6; color: #8f2020; }
.notice-warn { background: #fdf5e6; border-color: #f0dcb4; color: #7a5410; }

/* ── footer — §7.3 ─────────────────────────────────────────────────────── */

.footer { background: var(--primary-deep); color: #c9d3ee; padding: var(--s16) 0 var(--s8); }
.footer img { height: 28px; margin-bottom: var(--s4); }
.footer h4 { color: #fff; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.footer a { color: #c9d3ee; font-size: 15px; }
.footer a:hover { color: #fff; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--s8); }
.footer-base {
  margin-top: var(--s10); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; font-size: 14px;
}
@media (max-width: 1023px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .footer-cols { grid-template-columns: 1fr; } }

/* ── WhatsApp, and the sticky mobile CTA — §15 ─────────────────────────── */

.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
}
.whatsapp:hover { transform: scale(1.05); }

.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta {
    display: flex; gap: var(--s2); position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 60; padding: var(--s3) var(--s4);
    background: #fff; border-top: 1px solid var(--border);
  }
  .sticky-cta .btn { flex: 1; }
  .whatsapp { bottom: 84px; width: 48px; height: 48px; }
  body { padding-bottom: 76px; }
}

/* ── prose, for owner-written content ──────────────────────────────────── */

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s10); }
.prose h3 { margin-top: var(--s8); }
.prose ul, .prose ol { padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }

/* ── the fare breakdown — §14 pricing card ─────────────────────────────── */

.fare { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s5); }
.fare-row { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.fare-row:last-child { border-bottom: 0; }
.fare-row .label { font-weight: 500; }
.fare-row .value { font-weight: 600; text-align: right; white-space: nowrap; }
.fare-row.strong { font-size: 20px; }
.fare-row.strong .value { color: var(--primary); font-weight: 700; }
/* The note sits under its label, not beside it: a <span> inherits inline flow
   and runs "Billable distanceMinimum 300 km per day" together. */
.fare-note { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 2px; font-weight: 400; }

/* ── map ───────────────────────────────────────────────────────────────── */

.map { height: 380px; border-radius: var(--r-image); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.map-empty { display: grid; place-items: center; color: var(--muted); text-align: center; padding: var(--s6); }
@media (max-width: 767px) { .map { height: 280px; } }

/* ── accordion — §14 ───────────────────────────────────────────────────── */

details.faq { border-bottom: 1px solid var(--border); padding: var(--s4) 0; }
details.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--primary); font-size: 22px; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: var(--s3) 0 0; color: var(--muted); }

/* ── admin ─────────────────────────────────────────────────────────────── */

.admin-bar { background: var(--text); color: #fff; padding: var(--s3) 0; }
.admin-bar .wrap { display: flex; align-items: center; gap: var(--s5); }
.admin-bar a { color: #c9cde0; font-size: 15px; }
.admin-bar a:hover, .admin-bar a[aria-current="page"] { color: #fff; }
.admin-bar .right { margin-left: auto; }

table.rows { width: 100%; border-collapse: collapse; font-size: 15px; }
table.rows th, table.rows td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); vertical-align: top; }
table.rows th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
table.rows tr:hover td { background: var(--off-white); }

/* ── motion — §16, and the preference that overrides it ────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Page furniture
   ------------------------------------------------------------------------ */

.page-head {
  padding: calc(var(--header-h) + var(--s12)) 0 var(--s10);
  background: linear-gradient(180deg, var(--surface), var(--white));
  border-bottom: 1px solid var(--border);
}
.page-head h1 { margin: var(--s2) 0 var(--s4); }
.page-head .lede { margin: 0; max-width: 62ch; }

.hero-short { min-height: 0; padding: calc(var(--header-h) + var(--s16)) 0 var(--s16); }

.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-size: 14px; color: var(--muted); margin-bottom: var(--s4);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs span { color: var(--disabled); }

.figure {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-image); margin: 0 0 var(--s6);
}

/* ---------------------------------------------------------------------------
   Long-form prose. Scoped so that content the owner writes in the admin panel
   -- which is plain paragraphs and lists, not a styled layout -- reads well
   without needing a class on every element.
   ------------------------------------------------------------------------ */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { margin-top: var(--s10); font-size: 26px; }
.prose h3 { margin-top: var(--s8); font-size: 20px; }
.prose ul, .prose ol { padding-left: var(--s6); }
.prose li + li { margin-top: var(--s2); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.aside { display: flex; flex-direction: column; gap: var(--s4); }

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s6);
  box-shadow: var(--shadow);
}
.panel h3 { margin: 0 0 var(--s3); font-size: 18px; }
.panel-sticky { position: sticky; top: calc(var(--header-h) + var(--s4)); }

/* A definition list used as a specification table. The grid keeps the values
   aligned down the column, which is the whole point of showing them this way. */
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; }
.spec dt { color: var(--muted); font-size: 14px; }
.spec dd { margin: 0; font-size: 14px; font-weight: 500; }

.timeline { list-style: none; padding: 0; margin: var(--s4) 0 0; }
.timeline li {
  position: relative; padding: 0 0 var(--s5) var(--s6);
  border-left: 2px solid var(--lavender);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--white);
}
.timeline strong { display: block; }
.timeline .meta { display: block; }

.ticks { list-style: none; padding: 0; margin: var(--s4) 0; }
.ticks li { position: relative; padding-left: var(--s6); margin-bottom: var(--s3); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 10px; height: 6px; border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary); transform: rotate(-45deg);
}

/* Tabs on the corporate page. Anchors, not JavaScript: each tab is a real
   section with a real URL, so a link to the deals tab works when shared. */
.tabs {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-top: var(--s8);
}
.tab {
  padding: var(--s3) var(--s5); border-radius: var(--r-button) var(--r-button) 0 0;
  font-weight: 500; color: var(--muted); border-bottom: 3px solid transparent;
}
.tab:hover { color: var(--primary); background: var(--surface); }
.tab.is-current { color: var(--primary-deep); border-bottom-color: var(--primary); }

.tick-big {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto var(--s6);
  display: grid; place-items: center;
  background: #e6f4ec; color: var(--success);
}

/* ---------------------------------------------------------------------------
   Forms. Used by the no-JavaScript fallbacks, the contact page and the whole
   admin panel, so they are plain CSS rather than anything the islands own.
   ------------------------------------------------------------------------ */

.form { max-width: 560px; }
.form-wide { max-width: 760px; }
.field { margin-bottom: var(--s5); }
.field > label { display: block; font-weight: 500; font-size: 14px; margin-bottom: var(--s2); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  padding: var(--s3) var(--s4); background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-input);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.field textarea { resize: vertical; min-height: 90px; }
.field-check > label { display: flex; align-items: center; gap: var(--s3); font-weight: 400; }
.field-check input { width: auto; }
.form-actions { display: flex; gap: var(--s3); margin-top: var(--s8); }
.inline { display: inline; }

/* ---------------------------------------------------------------------------
   Tables, flashes and status pills. Mostly admin, but kept here so the admin
   stylesheet only has to carry its own layout.
   ------------------------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.table th, .table td {
  text-align: left; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top;
}
.table th { background: var(--surface); font-size: 13px; color: var(--muted); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table .right { text-align: right; white-space: nowrap; }

.pill {
  display: inline-block; padding: 2px var(--s3); border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; background: var(--surface); color: var(--muted);
}
.pill-live { background: #e6f4ec; color: var(--success); }

.flash {
  padding: var(--s3) var(--s4); border-radius: var(--r-button);
  background: #e6f4ec; color: #15543a; font-size: 14px; margin-bottom: var(--s6);
}
.flash-bad { background: #fbeaea; color: #8c2626; }

.empty { color: var(--muted); max-width: 60ch; }
.quote {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--surface); border-left: 3px solid var(--lavender);
  border-radius: 0 var(--r-button) var(--r-button) 0;
  white-space: pre-wrap; font-size: 14px;
}

@media (max-width: 760px) {
  .page-head { padding-top: calc(var(--header-h) + var(--s8)); }
  .panel-sticky { position: static; }
  .table, .table thead, .table tbody, .table tr, .table th, .table td { display: block; }
  .table thead { display: none; }
  .table tr { border-bottom: 1px solid var(--border); padding: var(--s3) 0; }
  .table td { border-bottom: 0; padding: var(--s1) var(--s4); }
  .table .right { text-align: left; white-space: normal; }
}

/* ---------------------------------------------------------------------------
   The trip planner.
   ------------------------------------------------------------------------ */

.planner {
  display: grid; grid-template-columns: 1fr 420px; gap: var(--s8);
  align-items: start; margin-top: var(--s6);
}
.planner-side {
  display: flex; flex-direction: column; gap: var(--s4);
  position: sticky; top: calc(var(--header-h) + var(--s4));
}
.planner-choices { display: flex; flex-direction: column; gap: var(--s4); }

.step {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s6); box-shadow: var(--shadow);
}
.step h3 { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s2); font-size: 18px; }
.step-n {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: var(--white);
  font-size: 13px; font-weight: 700;
}
.step .hint { margin-top: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chip {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
  background: var(--white); color: var(--primary-deep);
  border: 1px solid var(--lavender);
}
.chip:hover { background: var(--surface); border-color: var(--indigo); }
.chip-on { background: var(--primary); color: var(--white); border-color: var(--primary); }
.chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.route-list { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); }
.route-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); font-size: 14px; font-weight: 500;
  background: var(--surface); border-radius: var(--r-button); margin-bottom: var(--s2);
}
.route-list .route-fixed { background: transparent; color: var(--muted); font-weight: 400; }
.route-controls { display: flex; gap: var(--s1); }

.row-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.row-fields .field { margin-bottom: 0; }

/* Map markers, drawn rather than loaded: Leaflet's default pin is an image
   referenced from its own stylesheet, which does not survive bundling. */
.pin {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--white);
  border: 2px solid var(--white); box-shadow: 0 2px 8px rgba(32, 36, 58, 0.3);
}
.pin-base { background: var(--primary-deep); }
.pin-stop { background: var(--primary); }

@media (max-width: 1000px) {
  .planner { grid-template-columns: 1fr; }
  /* The map goes above the steps on a narrow screen: the thing a visitor
     wants to see while tapping destinations is where they are. */
  .planner-side { position: static; order: -1; }
}