:root {
  --ground:      #F5F8F9;
  --surface:     #FFFFFF;
  --surface-alt: #EAF0F2;
  --ink:         #131B21;
  --slate:       #5D707C;
  --hairline:    #D2DDE1;
  --teal:        #0E7C86;
  --teal-soft:   #E2F1F2;
  --pompeii:     #B0342A;
  --pompeii-soft:#F8E7E4;
  --good:        #1B7F4B;
  --board:       #101A20;
  --board-ink:   #7FE3D4;
  --board-dim:   #5E7A85;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0E1519;
    --surface:     #162127;
    --surface-alt: #1D2B33;
    --ink:         #E7EFF2;
    --slate:       #9AAEB8;
    --hairline:    #2C3D46;
    --teal:        #4FC3CB;
    --teal-soft:   #143134;
    --pompeii:     #E8776A;
    --pompeii-soft:#33201E;
    --good:        #4FBF83;
    --board:       #060C10;
    --board-ink:   #7FE3D4;
    --board-dim:   #5E7A85;
  }
}

:root[data-theme="dark"] {
  --ground:      #0E1519;
  --surface:     #162127;
  --surface-alt: #1D2B33;
  --ink:         #E7EFF2;
  --slate:       #9AAEB8;
  --hairline:    #2C3D46;
  --teal:        #4FC3CB;
  --teal-soft:   #143134;
  --pompeii:     #E8776A;
  --pompeii-soft:#33201E;
  --good:        #4FBF83;
  --board:       #060C10;
  --board-ink:   #7FE3D4;
  --board-dim:   #5E7A85;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------- masthead ---------- */

.masthead {
  padding: 56px 0 32px;
  border-bottom: 2px solid var(--ink);
  display: flex; flex-direction: column; gap: 18px;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal);
}

h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.5vw, 3.6rem);
  line-height: 1.03; letter-spacing: -0.025em;
  margin: 0; text-wrap: balance;
}

.standfirst {
  font-size: 1.13rem; line-height: 1.6;
  color: var(--slate); max-width: 62ch; margin: 0;
}

/* ---------- the rule strip ---------- */

.rulestrip {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}

.chip {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-soft);
  border-radius: 2px;
  padding: 6px 10px;
}

/* ---------- spin control ---------- */

.console {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}

.spin {
  font-family: var(--f-display);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: -0.01em;
  color: #FFFFFF; background: var(--teal);
  border: 0; border-radius: 3px;
  padding: 15px 30px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.spin:hover:not(:disabled) { filter: brightness(1.08); }
.spin:active:not(:disabled) { transform: translateY(1px); }
.spin:disabled { opacity: 0.55; cursor: progress; }
.spin:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.spin-note {
  font-family: var(--f-mono);
  font-size: 11.5px; color: var(--slate);
  letter-spacing: 0.02em;
}

.linkbtn {
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--slate); background: none;
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 9px 14px; cursor: pointer;
}
.linkbtn:hover { color: var(--ink); border-color: var(--slate); }
.linkbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- board ---------- */

.board {
  background: var(--board);
  border-radius: 3px;
  margin-top: 22px;
  padding: 18px 22px;
  overflow-x: auto;
  min-height: 96px;
}

.board table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-mono); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.board th {
  text-align: left; font-weight: 500;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--board-dim);
  padding-bottom: 10px; border-bottom: 1px solid #22333B;
}

.board td {
  padding: 11px 20px 11px 0;
  color: #C8DBE2; border-bottom: 1px solid #1A272E;
}
.board tr:last-child td { border-bottom: 0; }
.board td.city { color: var(--board-ink); font-weight: 700; letter-spacing: 0.06em; }
.board td.fare { color: #F2F7F9; font-weight: 700; }
.board .empty { color: var(--board-dim); font-style: italic; }

/* ---------- results ---------- */

.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.trip {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--teal);
  border-radius: 3px;
  padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 15px;
}

.trip.rank-2 { border-top-color: var(--pompeii); }
.trip.rank-3,
.trip.rank-4,
.trip.rank-5,
.trip.rank-6 { border-top-color: var(--slate); }

/* Over budget: the card still shows, but it should not read as a candidate. */
.trip.over-budget { border-top-color: var(--pompeii); opacity: 0.92; }

.trip-rank {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate);
}

.trip-city {
  font-family: var(--f-display);
  font-weight: 700; font-size: 1.75rem;
  letter-spacing: -0.02em; line-height: 1; margin: 0;
}

.trip-country {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
}

.trip-dates {
  background: var(--surface-alt);
  border-radius: 2px; padding: 12px 14px;
  font-family: var(--f-mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 6px;
}

.dr { display: flex; justify-content: space-between; gap: 12px; }
.dr span:first-child { color: var(--slate); }
.dr span:last-child { font-weight: 500; text-align: right; }

.money { display: flex; flex-direction: column; gap: 0; font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.money .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.money .row span:first-child { color: var(--slate); }
.money .row.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 3px; padding-top: 11px; font-weight: 700; font-size: 15px; }

.badge {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--good);
}
.badge.over { color: var(--pompeii); }

.trip-note { font-size: 0.94rem; color: var(--slate); margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 2px; }

.action {
  font-family: var(--f-display); font-size: 12.5px; font-weight: 600;
  text-decoration: none; border-radius: 2px; padding: 9px 13px;
  border: 1px solid var(--teal); color: var(--teal);
}
.action.solid { background: var(--teal); color: #FFFFFF; border-color: var(--teal); }
.action:hover { filter: brightness(1.1); }
.action:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.verified {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent);
  border-radius: 2px; padding: 3px 7px; align-self: flex-start;
}

/* ---------- notice ---------- */

.notice {
  margin-top: 20px; padding: 15px 18px;
  background: var(--pompeii-soft);
  border-left: 4px solid var(--pompeii);
  border-radius: 2px;
  font-size: 14.5px; color: var(--ink);
}
.notice[hidden] { display: none; }

/* ---------- sections ---------- */

section { padding-top: 56px; }

h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  letter-spacing: -0.018em; line-height: 1.15;
  margin: 0 0 8px; text-wrap: balance;
}

.section-note { color: var(--slate); max-width: 66ch; margin: 0 0 24px; }
p { max-width: 66ch; }

.cliff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }

.cliff-case {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 2px; padding: 16px 18px;
  font-family: var(--f-mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; gap: 7px;
}
.cliff-route { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.cliff-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cliff-line b { font-size: 17px; font-weight: 700; }
.cliff-line.win b { color: var(--good); }
.cliff-line.lose b { color: var(--pompeii); }
.cliff-line em { font-style: normal; color: var(--slate); font-size: 11.5px; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: var(--teal); padding-top: 2px; letter-spacing: 0.04em;
}
.steps p { margin: 0; color: var(--slate); }
.steps strong { color: var(--ink); font-weight: 600; font-family: var(--f-display); }

footer {
  margin-top: 60px; padding-top: 24px;
  border-top: 1px solid var(--hairline);
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--slate); letter-spacing: 0.02em;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}

a { color: var(--teal); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Phones. Deliberately more compact than a shrunk desktop layout: the job is
   to get an actual answer above the fold, so the masthead gives up most of its
   height and the board drops the columns a 375px screen cannot use.
   --------------------------------------------------------------------------- */

@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px 56px; }

  /* masthead: was eating a full screen on its own */
  .masthead { padding: 22px 0 16px; gap: 11px; }
  .eyebrow { font-size: 10px; letter-spacing: 0.1em; }
  h1 { font-size: clamp(1.7rem, 7.6vw, 2.2rem); line-height: 1.07; }
  .standfirst { font-size: 0.95rem; line-height: 1.5; }
  /* 44px minimum on both, they were 29px and 37px */
  .langswitch {
    font-size: 10px; padding: 5px 12px; min-height: 44px;
    display: inline-flex; align-items: center;
  }

  .rulestrip { gap: 5px; }
  .chip { font-size: 9.5px; padding: 4px 7px; letter-spacing: 0.045em; }

  /* console: one full-width primary action, everything else quiet */
  .console { margin-top: 18px; gap: 9px; }
  .spin { width: 100%; padding: 14px 18px; font-size: 0.97rem; }
  .linkbtn { flex: 0 0 auto; padding: 10px 14px; min-height: 44px; }
  .spin-note { flex: 1 1 100%; font-size: 10.5px; line-height: 1.45; }
  .notice { margin-top: 14px; padding: 12px 14px; font-size: 13px; }

  /* board: keep the split-flap moment, lose the unusable columns.
     Back / Stay / Per person / Flights all live on the card below. */
  .board { padding: 12px 14px; margin-top: 14px; min-height: 0; }
  .board table { font-size: 11.5px; }
  .board th { font-size: 8.5px; letter-spacing: 0.09em; padding-bottom: 8px; }
  .board td { padding: 9px 10px 9px 0; }
  .board th:nth-child(3), .board td:nth-child(3),
  .board th:nth-child(4), .board td:nth-child(4),
  .board th:nth-child(5), .board td:nth-child(5),
  .board th:nth-child(6), .board td:nth-child(6) { display: none; }

  /* cards */
  .results { gap: 12px; margin-top: 16px; }
  .trip { padding: 16px 16px 15px; gap: 11px; border-top-width: 3px; }
  .trip-rank { font-size: 9.5px; }
  .trip-city { font-size: 1.5rem; }
  .trip-country { font-size: 10px; }
  .trip-dates { padding: 11px 12px; font-size: 11.5px; gap: 5px; }
  .money { font-size: 12px; }
  .money .row { padding: 7px 0; }
  .money .row.total { font-size: 14px; padding-top: 10px; }
  .badge { font-size: 10.5px; }
  .trip-note { font-size: 0.89rem; line-height: 1.5; }
  .verified { font-size: 9px; }

  /* tap targets: 44px minimum, and split the width evenly */
  .actions { gap: 8px; }
  .action {
    flex: 1 1 0; text-align: center;
    padding: 13px 10px; font-size: 12.5px;
    min-height: 44px; display: flex;
    align-items: center; justify-content: center;
  }

  /* long-form below the results */
  section { padding-top: 34px; }
  h2 { font-size: 1.28rem; }
  .section-note { font-size: 0.92rem; margin-bottom: 16px; }
  .cliff-grid { grid-template-columns: 1fr; gap: 10px; }
  .cliff-case { padding: 13px 14px; font-size: 11.5px; gap: 6px; }
  .cliff-line b { font-size: 15px; }
  .steps li { grid-template-columns: 26px 1fr; gap: 11px; padding: 14px 0; }
  .steps li::before { font-size: 11px; }
  .steps p { font-size: 0.9rem; line-height: 1.5; }
  section p { font-size: 0.92rem; }
  footer { margin-top: 36px; padding-top: 16px; font-size: 10.5px; gap: 5px 14px; }
}

/* Very narrow phones: tighten, but keep city / date / total all visible. */
@media (max-width: 400px) {
  .wrap { padding: 0 13px 48px; }
  h1 { font-size: 1.6rem; }
  .board { padding: 11px 12px; }
  .board table { font-size: 11px; }
  .board td { padding: 8px 8px 8px 0; }
  .trip-city { font-size: 1.4rem; }
  .chip { font-size: 9px; padding: 4px 6px; }
}

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

.trip-note.est { font-size: 0.86rem; font-style: italic; opacity: 0.85; }
.board .est-mark { color: var(--board-dim); font-weight: 400; font-size: 10px; letter-spacing: 0.08em; }

/* ---------- language switch ---------- */

.topline {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}

.langswitch {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--slate); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 6px 11px; flex-shrink: 0; line-height: 1.4;
}
.langswitch:hover { color: var(--teal); border-color: var(--teal); }
.langswitch:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Hours on the ground: the number that decides whether a trip is worth taking,
   so it gets its own emphasised row rather than sitting in with the dates. */
.dr.ground {
  border-top: 1px solid var(--hairline);
  margin-top: 2px; padding-top: 7px;
}
.dr.ground span:last-child { color: var(--teal); font-weight: 700; }