/* JetAmigo. One stylesheet, no framework.
   Palette is deliberately not the default SaaS blue: a pine accent on warm
   grey, with amber and rust kept for meaning rather than decoration. */

:root {
  --bg:          #f7f6f3;
  --surface:     #ffffff;
  --surface-2:   #efeeea;
  --ink:         #1b1f1d;
  --ink-2:       #4a534f;
  --ink-3:       #77817c;
  --line:        #ddddd6;
  --line-strong: #c2c4bc;
  --accent:      #17715c;
  --accent-soft: #e3efea;
  --accent-ink:  #ffffff;
  --warn:        #9a5b06;
  --warn-soft:   #f9efdf;
  --risk:        #a3311f;
  --risk-soft:   #f9e7e3;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141716; --surface: #1c211f; --surface-2: #242a27;
    --ink: #e8ebe8; --ink-2: #b0b9b4; --ink-3: #838d88;
    --line: #2f3733; --line-strong: #435049;
    --accent: #55c7a4; --accent-soft: #1d3730; --accent-ink: #0d1613;
    --warn: #e0a352; --warn-soft: #35291a;
    --risk: #e8836e; --risk-soft: #38211c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ a11y */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 40;
  padding: 10px 16px; background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-size: 14px; text-decoration: none;
  border-radius: 0 0 4px 4px; transition: top 0.12s;
}
.skip:focus { top: 0; }

/* ------------------------------------------------------------ chrome */
.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 28px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  /* One line, always. Left to wrap it stacked the mark above the word and
     made the bar twice as tall on a phone. */
  flex: none; white-space: nowrap;
}
.brand-name span { color: var(--accent); }

.topbar nav { display: flex; align-items: center; gap: 20px; }
.topbar nav a, .link {
  font-family: var(--display); font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.topbar nav a:hover, .link:hover { color: var(--accent); }
.inline { display: inline; margin: 0; }
.link { background: none; border: 0; padding: 0; cursor: pointer; }
.link.danger { color: var(--risk); }

/* The menu button exists only where the row does not fit. Below, at the
   breakpoint, the nav becomes a panel under the bar. */
.menu-btn { display: none; }

@media (max-width: 719px) {
  /* On a phone the bar is the brand and one button. Trips, Add a trip,
     Settings and Log out do not fit beside them and were wrapping into the
     page, so all four live in the menu. */
  /* No tab key on a touch screen, so the skip link has nothing to skip for
     and is one more thing in the way. It stays on desktop, where keyboard
     users are the ones who need it. */
  .skip { display: none; }

  .topbar { padding: 10px 14px; }
  .has-js .topbar { flex-wrap: nowrap; }

  /* No JavaScript: nothing can open a menu, so the links have to stay on the
     page. Given a full row of their own rather than crushed beside the brand,
     which is what wrapped the mark above the word. */
  html:not(.has-js) .topbar { flex-wrap: wrap; }
  html:not(.has-js) .topbar nav {
    width: 100%; flex-wrap: wrap; gap: 8px 16px; padding-top: 6px;
    border-top: 1px solid var(--line); margin-top: 4px;
  }

  .has-js .menu-btn {
    display: flex; align-items: center; justify-content: center;
    flex: none; width: 42px; height: 42px; padding: 0; cursor: pointer;
    background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  }
  .bars { display: grid; gap: 4px; }
  .bars span {
    display: block; width: 18px; height: 2px; border-radius: 2px;
    background: var(--ink-2);
  }
  .topbar[data-open] .menu-btn { border-color: var(--accent); background: var(--accent-soft); }

  /* Without JavaScript nothing can open it, so it stays a plain wrapped row. */
  .has-js .topbar nav {
    display: none;
    position: absolute; right: 12px; top: calc(100% + 6px); z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    min-width: 208px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  }
  .has-js .topbar[data-open] nav { display: flex; }
  .topbar nav a, .topbar nav .link {
    padding: 11px 12px; border-radius: 5px; font-size: 15px; text-align: left;
  }
  .topbar nav a:hover, .topbar nav .link:hover { background: var(--surface-2); }
  .topbar nav .inline { display: block; }
  .topbar nav .link { display: block; width: 100%; }
}

@media (max-width: 400px) {
  .brand-name { font-size: 17px; }
}

.wrap { max-width: 1020px; margin: 0 auto; padding: 42px 28px 90px; }
.wrap.narrow { max-width: 620px; }

.foot {
  border-top: 1px solid var(--line); padding: 26px 28px;
  color: var(--ink-3); font-size: 13.5px;
}
.foot p { max-width: 70ch; margin: 0 auto; }

/* ------------------------------------------------------------ type */
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(27px, 4vw, 36px); letter-spacing: -0.025em;
  line-height: 1.1; margin: 0 0 10px; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -0.01em; margin: 0 0 14px;
}
.lede { color: var(--ink-2); font-size: 17px; max-width: 62ch; margin: 0 0 28px; }
.aside { color: var(--ink-3); font-size: 14.5px; margin-top: 26px; }
.hint { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.note { color: var(--ink-2); font-size: 14.5px; margin: -4px 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
.quiet { font-family: var(--display); font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------------ messages */
.messages { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 8px; }
.msg {
  padding: 12px 16px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); font-size: 15px;
}
.msg.error { border-left-color: var(--risk); background: var(--risk-soft); }
.msg.warning { border-left-color: var(--warn); background: var(--warn-soft); }

.error { color: var(--risk); font-size: 13.5px; display: block; margin-top: 4px; }
.error.big, .ok.big {
  font-size: 15px; padding: 14px 18px; border-left: 3px solid var(--risk);
  background: var(--risk-soft); margin-bottom: 22px;
}
.ok.big { border-left-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

/* ------------------------------------------------------------ forms */
.stack { display: grid; gap: 18px; max-width: 460px; }
.field { display: block; }
.lbl {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: 13.5px; margin-bottom: 5px; cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select {
  width: 100%; padding: 9px 11px; font: 15px var(--body);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 3px;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.unit, .euro { color: var(--ink-3); font-size: 14px; }
/* Without this the unit wraps under its own full-width input and reads as a
   stray word rather than as part of the answer. */
.with-unit { display: flex; align-items: center; gap: 8px; }
.with-unit input { flex: 1; min-width: 0; }

button.primary {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
}
button.primary:hover { filter: brightness(1.08); }
a.primary {
  display: inline-block; text-decoration: none; font-family: var(--display);
  font-weight: 600; padding: 11px 20px; border-radius: 3px;
  background: var(--accent); color: var(--accent-ink);
}

/* ------------------------------------------------------------ builder */
.builder {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr);
}
.steps { display: grid; gap: 14px; min-width: 0; }

@media (min-width: 900px) {
  .builder { grid-template-columns: minmax(0, 1fr) 268px; align-items: start; }
  .builder .card, .steps { grid-column: 1; }
  .rail { grid-column: 1 / -1; }
  /* Auto-placed rather than pinned to row 2: with no JavaScript the rail is
     display:none and takes no cell, so a pinned row left a gap above the
     quote the height of the steps that were never there. */
  .quote { grid-column: 2; position: sticky; top: 20px; }
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  padding: 22px 24px; display: grid; gap: 16px;
}
.card > h2 { margin-bottom: 0; }
.row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .row { grid-template-columns: 1fr; } }
.row > [hidden] { display: none; }

/* ---------------------------------------------------------- step rail */
/* Hidden without JavaScript: every step is open there, so a progress
   indicator would be counting something that is not happening. */
.rail { display: none; }
.wizard .rail {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0 0 4px; padding: 0;
  counter-reset: rail;
}
.rail li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--display); font-size: 13px; color: var(--ink-3);
  cursor: pointer; counter-increment: rail;
}
.rail li::before {
  content: counter(rail);
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-3);
  font-size: 11.5px; font-weight: 600;
}
.rail li.done { color: var(--ink-2); border-color: var(--line-strong); }
.rail li.done::before { content: "✓"; background: var(--accent); color: var(--accent-ink); }
.rail li.on {
  color: var(--ink); border-color: var(--accent); background: var(--accent-soft);
}
.rail li.on::before { background: var(--accent); color: var(--accent-ink); }
.rail li.locked { cursor: default; opacity: 0.55; }

/* -------------------------------------------------------------- steps */
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px;
}
.wizard .step.is-open { border-color: var(--line-strong); box-shadow: 0 1px 0 var(--line); }
.wizard .step.is-todo { background: var(--surface-2); }

.step-head {
  display: grid; align-items: center; gap: 2px 12px;
  grid-template-columns: 26px 1fr auto;
  padding: 16px 22px;
}
.wizard .step.is-done .step-head, .wizard .step.is-todo .step-head {
  cursor: pointer; padding: 13px 22px;
}
.step-n {
  display: none; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface-2); color: var(--ink-3);
  font-family: var(--display); font-size: 12.5px; font-weight: 700;
}
.wizard .step-n { display: grid; }
.wizard .step.is-open .step-n { background: var(--accent); color: var(--accent-ink); }
.wizard .step.is-done .step-n { background: var(--accent-soft); color: var(--accent); }
.step-head h2 { grid-column: 2; margin: 0; }
.wizard .step:not(.is-open) .step-head h2 { font-size: 15px; color: var(--ink-2); }

.step-sum {
  grid-column: 2; font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.step-sum:empty { display: none; }

.step-edit {
  display: none; grid-column: 3; grid-row: 1 / span 2;
  background: none; border: 0; padding: 4px; cursor: pointer;
  font-family: var(--display); font-size: 13.5px; color: var(--accent);
}
.wizard .step.is-done .step-edit { display: block; }

.step-body { display: grid; gap: 16px; padding: 0 22px 20px; }
.wizard .step:not(.is-open) .step-body { display: none; }

.step-go { display: none; }
.wizard .step-go { display: block; }
.step-warn {
  margin: 0; padding: 10px 14px; font-size: 14px;
  background: var(--risk-soft); border-left: 3px solid var(--risk);
}

@media (max-width: 620px) {
  .step-head, .step-body { padding-left: 16px; padding-right: 16px; }
}

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
legend {
  font-family: var(--display); font-weight: 600; font-size: 13.5px;
  padding: 0; margin-bottom: 2px;
}

.kinds { gap: 8px; }
.kind {
  display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px;
  align-items: start; padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 3px;
}
.kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* The open-jaw option. Indented and joined to the Return card above it so it
   reads as a detail of that answer rather than as a fourth kind of trip. */
.kind-extra {
  margin: -4px 0 0 22px; padding: 12px 14px 13px 16px;
  border-left: 2px solid var(--accent);
  background: var(--surface-2); border-radius: 0 3px 3px 0;
}
.kind-extra[hidden] { display: none; }
.kind-extra .check { align-items: start; }
.kind-extra strong {
  font-family: var(--display); font-size: 14px; font-weight: 600;
}
.kind-extra .hint { margin-top: 3px; max-width: 58ch; }
.kind input { grid-row: 1 / span 2; margin-top: 3px; }
.kind-name { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.kind-why { color: var(--ink-3); font-size: 13px; line-height: 1.45; }

.stops, .groups { gap: 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--display); font-size: 13.5px; cursor: pointer;
}
.pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------- airport picker */
/* The real field. Kept in the DOM and kept posting; only taken off screen,
   so with the script blocked it is the plain text box it always was. */
.picker-source {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0;
}
.picker {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px; min-height: 42px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.picker-chips { display: contents; }

.chip-air {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid transparent;
  font-size: 13.5px; line-height: 1.2; max-width: 100%;
}
.chip-city { font-family: var(--display); font-weight: 600; }
.chip-code {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  letter-spacing: 0.04em;
}
.chip-x {
  display: grid; place-items: center; width: 19px; height: 19px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 14px;
  line-height: 1; background: transparent; color: var(--ink-3);
}
.chip-x:hover { background: var(--risk-soft); color: var(--risk); }

.picker-search {
  flex: 1 1 130px; min-width: 110px;
  padding: 5px 4px; border: 0; background: none;
  font: 15px var(--body); color: var(--ink);
}
/* The box around it already shows focus. Letting the global input outline
   through as well drew a second ring inside the first. */
.picker-search:focus, .picker-search:focus-visible { outline: none; }
.picker-search[hidden] { display: none; }

.picker-list {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 4px);
  z-index: 20; max-height: 302px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 4px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.17);
}
.picker-opt {
  display: grid; grid-template-columns: 42px 1fr; align-items: center;
  gap: 10px; padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.picker-opt:last-child { border-bottom: 0; }
.picker-opt.active, .picker-opt:hover { background: var(--accent-soft); }
.picker-opt.on { opacity: 0.5; }
.picker-opt.on .opt-city::after { content: " · added"; color: var(--accent); font-weight: 400; }
.opt-code {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  text-align: center; padding: 3px 0; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-2);
}
.opt-body { display: grid; min-width: 0; }
.opt-city { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.opt-sub {
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-none, .picker-note {
  padding: 11px 13px; font-size: 13px; color: var(--ink-3); line-height: 1.45;
}
.picker-note { padding: 2px 4px 0; flex-basis: 100%; }

/* The euro belongs against the number, not floating beside the box. */
.with-euro {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface); overflow: hidden; max-width: 220px;
}
.with-euro:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.with-euro .euro {
  display: grid; place-items: center; padding: 0 11px;
  background: var(--surface-2); border-right: 1px solid var(--line);
  font-size: 15px; color: var(--ink-2);
}
.with-euro input { flex: 1; min-width: 0; border: 0; border-radius: 0; }
.with-euro input:focus, .with-euro input:focus-visible { outline: none; }
.check {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; cursor: pointer; font-size: 14.5px;
}
.check input { margin-top: 4px; }

.quote {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent); padding: 20px 22px;
  display: grid; gap: 10px; align-content: start;
}
.quote.over { border-top-color: var(--risk); }
/* Before there are dates there is nothing to quote, and a big em-dash where a
   price will be reads as a broken number rather than as one not asked for. */
.wizard .quote:not(.ready) .quote-n,
.wizard .quote:not(.ready) .quote-p { opacity: 0.4; }
.quote-n { font-size: 14.5px; color: var(--ink-2); }
.quote-n strong, .quote-p strong {
  font-family: var(--display); font-weight: 700; font-size: 30px;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.quote-p { font-size: 14.5px; color: var(--ink-2); }
.quote-p span { display: block; }
.quote-note { font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.45; }
.quote.over .quote-note { color: var(--risk); }

/* ------------------------------------------------------------ receipt */
.receipt {
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 20px; margin-bottom: 26px;
}
.line {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 11px 0; border-bottom: 1px dotted var(--line); font-size: 15px;
}
.line:last-child { border-bottom: 0; }
.line.total {
  border-top: 1px solid var(--line-strong); border-bottom: 0;
  font-family: var(--display); font-weight: 600;
}
.line.discount .amt { color: var(--accent); }
.amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.soon {
  border: 1px dashed var(--line-strong); padding: 18px 20px;
  margin-top: 26px; color: var(--ink-2); font-size: 14.5px;
}
.soon h2 { margin-bottom: 6px; }
.code-form { max-width: 380px; }

/* ------------------------------------------------------------ dashboard */
.trip-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.trip-switch a {
  font-family: var(--display); font-size: 13.5px; text-decoration: none;
  padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-2);
}
.trip-switch a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------- destination hero */
.trip-hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 5px; margin-bottom: 26px;
  min-height: 168px; display: flex; flex-direction: column;
  justify-content: flex-end;
  /* The fallback colour, from the airport code. A destination nobody has
     fetched a photograph for still gets its own hero rather than a hole. */
  background: linear-gradient(135deg, var(--dest-from, var(--accent)),
                                      var(--dest-to, #123));
}
.trip-hero-img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* The scrim. A photograph can be any brightness anywhere, so white text on
   one is only safe with a guaranteed dark floor under it -- pale sky over
   Cape Town would otherwise swallow the trip name entirely. */
.trip-hero.has-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 38%,
      rgba(0, 0, 0, 0.22) 70%, rgba(0, 0, 0, 0.30) 100%);
}

.trip-hero-body {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: flex-end; justify-content: space-between;
  padding: 26px 24px 20px;
}
.trip-hero-body > div:first-child { min-width: 0; }
.trip-hero h1 {
  color: #fff; margin: 0 0 5px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.trip-place {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.82); margin: 0 0 4px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.trip-route {
  margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.trip-meta { display: flex; align-items: center; gap: 14px; flex: none; }
.trip-hero .chip {
  background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3);
  color: #fff; backdrop-filter: blur(3px);
}
.trip-hero .quiet { color: #fff; text-decoration: underline; }

/* Attribution. CC BY and CC BY-SA both require the photographer to be named,
   so this is not decoration and must not be removed to tidy the corner. */
.trip-credit {
  position: absolute; right: 0; top: 0; margin: 0;
  padding: 4px 9px 5px; border-radius: 0 0 0 7px;
  font-size: 10.5px; line-height: 1.3; max-width: 62%; text-align: right;
  color: rgba(255, 255, 255, 0.78);
  /* Its own backdrop rather than only a text shadow: the top of the hero is
     wherever the sky is, so it is the brightest part of most of these
     photographs and white-on-white was unreadable over Cape Town. */
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}
.trip-credit a { color: inherit; text-decoration: none; }
.trip-credit a:hover { color: #fff; text-decoration: underline; }

.chip {
  font-family: var(--mono); font-size: 12px; padding: 4px 10px;
  background: var(--surface-2); border: 1px solid var(--line);
}

@media (max-width: 620px) {
  .trip-hero { min-height: 150px; }
  .trip-hero-body { padding: 20px 16px 16px; }
  .trip-credit { max-width: 52%; }
}

/* The graph shows the shape; these say the number in words. */
.stats {
  display: grid; gap: 1px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  background: var(--line); border: 1px solid var(--line);
}
.stat { background: var(--surface); padding: 14px 18px; display: grid; gap: 3px; }
.stat-k {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
}
.stat-v {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-v.down { color: var(--accent); }
.stat-v.up { color: var(--risk); }
.stat-v.flat { color: var(--ink-3); font-size: 20px; }
.stat-s { font-size: 12.5px; color: var(--ink-3); }

.chartbox {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  padding: 18px 20px; margin-bottom: 32px; overflow-x: auto;
}
.chart { width: 100%; height: auto; display: block; min-width: 520px; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.chart .dot { stroke: var(--surface); stroke-width: 1.5; }
.chart .dot.partial { opacity: 0.45; }
.chart .best { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chart .threshold {
  stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 4 4;
}
.chart .ylab, .chart .xlab, .chart .tlab {
  font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3);
}
.chart .ylab { text-anchor: end; }
.chart .tlab { fill: var(--warn); }
.chart .blab {
  font-family: var(--display); font-size: 12px; font-weight: 600; fill: var(--ink);
}
.chart-empty { color: var(--ink-3); text-align: center; padding: 40px 0; margin: 0; }

.days-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.pager { display: flex; gap: 14px; font-family: var(--display); font-size: 14px; }

.daygrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
/* A link, not a card: picking a night is what switches the options table. */
.day {
  background: var(--surface); border: 1px solid var(--line);
  padding: 14px 16px; display: grid; gap: 5px; align-content: start;
  color: inherit; text-decoration: none; cursor: pointer;
  border-left: 3px solid transparent;
}
.day:hover { border-color: var(--line-strong); border-left-color: var(--line-strong); }
.day.on { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.day.partial { border-style: dashed; }
.day-date {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.day-price {
  font-family: var(--display); font-weight: 700; font-size: 25px;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.day-price.none { font-size: 16px; color: var(--ink-3); font-weight: 500; }
.day-card { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.day-checks { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* -------------------------------------------------- every option table */
.options { margin-top: 38px; }
.scroll {
  /* Positioned so it is the containing block for anything absolute inside it.
     Without this the visually-hidden `.sr` label in the last column escaped
     the clip, sat at x=818 of the wide table and stretched the whole document
     to 819px -- so every page on a phone scrolled sideways. */
  position: relative;
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px;
}
.opts { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Not sticky: `overflow-x: auto` on .scroll makes it the scroll container in
   both axes, so a sticky header would have nothing to stick to and the whole
   table is meant to scroll with the page anyway. */
.opts th {
  padding: 9px 12px; text-align: left; white-space: nowrap;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.opts td {
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top; white-space: nowrap;
}
.opts tbody tr:last-child td { border-bottom: 0; }
.opts tbody tr:hover { background: var(--surface-2); }
.opts tr.best td { background: var(--accent-soft); }
.opts tr.best:hover td { background: var(--accent-soft); filter: brightness(0.98); }

.opts .price {
  font-family: var(--display); font-weight: 700; font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}
.opts .price.muted { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.opts .route { font-family: var(--mono); font-size: 12.5px; }
.opts .times { font-variant-numeric: tabular-nums; }
.back-times { display: block; font-size: 12px; color: var(--ink-3); }
.opts .why {
  display: block; font-size: 12px; color: var(--ink-3);
  white-space: normal; max-width: 42ch; margin-top: 3px;
}
a.open {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  text-decoration: none; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--ink-2);
}
a.open:hover { border-color: var(--accent); color: var(--accent); }

.tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 3px; vertical-align: middle;
  background: var(--surface-2); color: var(--ink-3);
}
.opts tr.best .price .tag { background: var(--accent); color: var(--accent-ink); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

.rest { margin-top: 18px; }
.rest > summary {
  cursor: pointer; font-family: var(--display); font-size: 14px;
  color: var(--ink-2); padding: 8px 0;
}
.rest > summary:hover { color: var(--accent); }
.rest .note { margin: 8px 0 14px; max-width: 74ch; }
.foot-note { margin-top: 18px; max-width: 74ch; }

/* ------------------------------------------------------------ landing */
.hero { padding: 26px 0 44px; border-bottom: 1px solid var(--line); margin-bottom: 44px; }
.hero h1 { font-size: clamp(30px, 5.5vw, 46px); max-width: 16ch; }
.hero .lede { font-size: 19px; max-width: 56ch; }

.how {
  display: grid; gap: 22px; margin-bottom: 52px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.step h2 { font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); margin: 0; }

.pricing { margin-bottom: 52px; }
.price-card {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); padding: 26px 28px; max-width: 460px;
}
.price-big {
  font-family: var(--display); font-weight: 700; font-size: 44px;
  letter-spacing: -0.03em; line-height: 1;
}
.price-per { color: var(--ink-3); font-size: 14px; margin-bottom: 18px; }
.price-card ul { margin: 0 0 16px; padding-left: 20px; font-size: 15px; }
.price-card li { margin-bottom: 6px; }
.price-note { font-size: 13.5px; color: var(--ink-3); margin: 0; }

.honest {
  border-top: 1px solid var(--line); padding-top: 26px;
  color: var(--ink-2); font-size: 15px;
}
.honest h2 { margin-bottom: 12px; }
.honest p { max-width: 68ch; }

/* ------------------------------------------------------------ settings */
.trip-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.trip-row:last-of-type { border-bottom: 0; }
.trip-actions { display: flex; gap: 14px; align-items: center; }
.quiet-card { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}