/* Page styles for the dark Cheap Escape artboard, on top of organic.css. */
body { margin: 0; background: var(--color-neutral-900); color: var(--color-bg); font-family: var(--font-body); }
.shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-neutral-900); }
header { display: flex; align-items: center; gap: 14px; padding: 18px clamp(20px,4vw,48px) 10px; }
/* A button, not a link: there is no page to navigate to, only a view to go
   back to, and the running search has to be stopped on the way. */
.brand {
  font-family: var(--font-heading);
  font-size: 20px;
  background: none;
  border: 0;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  font-weight: 400;
}
.brand span { color: var(--color-accent-400); }
.brand:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
@media (hover: hover) {
  .brand:hover { background: color-mix(in srgb,#f6a06b 12%,transparent); }
}
main { flex: 1; padding: 0 clamp(20px,4vw,48px) 56px; max-width: 1120px; width: 100%; }
h1 { font-size: clamp(34px,6vw,56px); margin: 0 0 6px; }
h2 { font-size: clamp(28px,5vw,42px); }
.lede { font-size: 14px; opacity: .6; max-width: 34em; margin-bottom: clamp(20px,4vw,34px); }

.dark .input { background: transparent; color: var(--color-bg); border-color: color-mix(in srgb,#f5ead8 30%,transparent); }
.dark .input:hover { border-color: var(--color-accent-400); }
.dark .input:focus-visible { border-color: var(--color-accent-400); outline-color: var(--color-accent-400); }
.dark .seg { border-color: color-mix(in srgb,#f5ead8 25%,transparent); }
.dark .seg-opt + .seg-opt { border-left-color: color-mix(in srgb,#f5ead8 25%,transparent); }
.dark .seg-opt:has(input:checked) { background: var(--color-accent-400); color: var(--color-neutral-900); }
.dark .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb,#f5ead8 12%,transparent); }
.dark .field > label { color: color-mix(in srgb,#f5ead8 65%,transparent); letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.dark a { color: var(--color-accent-400); }
.dark .btn-ghost { color: var(--color-accent-400); }
.dark .btn-ghost:hover { background: color-mix(in srgb,#f6a06b 16%,transparent); }
.dark .btn-secondary { color: var(--color-bg); border-color: color-mix(in srgb,#f5ead8 30%,transparent); }
.dark .btn-secondary:hover { background: color-mix(in srgb,#f5ead8 12%,transparent); }
.dark :focus-visible { outline-color: var(--color-accent-400); }

.bigfield { background: transparent; border: 0; border-bottom: 2px solid var(--color-accent-400); border-radius: 0; padding: 4px 0; font-family: var(--font-heading); font-size: clamp(24px,4vw,34px); color: var(--color-bg); min-height: 52px; width: 100%; }
.bigfield::placeholder { color: color-mix(in srgb,#f5ead8 35%,transparent); }
.biglabel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
/* One grid holding every field. The markup is in the order a phone should
   read it -- from, to, then the rest -- and the wider layout places the cells
   explicitly rather than relying on that order. */
.formgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  max-width: 720px;
  align-items: start;
}
.cell { min-width: 0; }
/* The two segmented controls sit side by side when there is room and stack
   with a gap when there is not. This rule went missing in a rewrite and they
   ended up touching. */
.rowwrap { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.rowwrap.bottom { align-items: flex-end; }
.cell.f-from, .cell.f-to { display: block; }

@media (min-width: 680px) {
  .formgrid { grid-template-columns: 1fr 1fr; }
  /* One control per cell, paired by what it asks about: where, when, what
     shape of journey, what it may cost. Nesting two segmented controls in a
     single cell meant they had to share half the form's width, and on a
     tablet's larger text they did not fit and stacked. */
  /* Paired by kind. The two text fields, then the date, then the two
     segmented controls, then the two sliders. Controls that look alike and
     work alike sit together; splitting a pair across rows read as a mistake. */
  .cell.f-from   { grid-column: 1; grid-row: 1; }
  .cell.f-to     { grid-column: 2; grid-row: 1; }
  .cell.f-out    { grid-column: 1; grid-row: 2; }
  .cell.f-flex   { grid-column: 1; grid-row: 3; }
  .cell.f-legs   { grid-column: 2; grid-row: 3; }
  .cell.f-travel { grid-column: 1; grid-row: 4; }
  .cell.f-price  { grid-column: 2; grid-row: 4; }
}

/* A result reads the same way an earlier search does: a rounded card, with
   hover a hint and open a state, and the legs continuing the same shape. */
details.row + details.row { border-top: 1px solid color-mix(in srgb,#f5ead8 10%,transparent); }
details.row[open], details.row:has(+ details.row[open]) { border-top-color: transparent; }
details.row summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(8px,1.4vw,16px);
  padding: 12px 14px;
  min-width: 0;
  border-radius: 14px;
}
details.row summary::-webkit-details-marker { display: none; }
/* Only where there is a real pointer: a tap leaves hover stuck on a touch
   screen, and closing a row then looks like nothing happened. */
@media (hover: hover) {
  details.row summary:hover { background: color-mix(in srgb,#f6a06b 5%,transparent); }
}
details.row[open] summary {
  background: color-mix(in srgb,#f6a06b 13%,transparent);
  border-radius: 14px 14px 0 0;
}
details.row .chev { transition: transform .18s ease; flex: none; opacity: .5; }
details.row[open] .chev { transform: rotate(90deg); }
.rank { width: 26px; flex: none; font: 11px ui-monospace,Menlo,monospace; opacity: .6; }
/* The city cell carries the departure date under the name. It cannot live in
   .meta, which phones hide, and with flexible dates a row showing only a time
   never says which day it leaves. */
/* Wide enough for a city and its country at full size. The price bar beside
   it is flex:1 1 auto, so what is given here comes out of the bar's length --
   the bar only has to show a comparison, while the name has to be readable. */
.city { width: clamp(168px,26vw,336px); flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.city > b { font-family: var(--font-heading); font-size: clamp(15px,1.6vw,19px); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city > small { font-size: 11px; opacity: .55; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* City and country read as one name, so the country is set in the same colour
   and size rather than as an aside. A long pair clips rather than pushing the
   row out of shape; the full text is on the title attribute. */
.city .cc { color: inherit; opacity: 1; }
.barwrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.bar { height: 10px; border-radius: 999px; background: var(--color-accent-400); flex: 0 1 auto; min-width: 6px; }
.price { flex: none; font-family: var(--font-heading); font-size: clamp(14px,1.5vw,18px); }
.meta { flex: none; text-align: right; font-size: 12px; opacity: .6; }
/* On a phone the name and the bar cannot share one line: a city with its
   country takes the width, and the bar collapses to a dot that compares
   nothing. The row becomes two lines instead -- name, date and price on the
   first, the bar across the full width beneath -- so the bar is worth
   drawing. .barwrap becomes display:contents so its two children can be
   placed independently without changing the markup. */
@media (max-width:560px) {
  .meta { display: none; }
  details.row summary {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "rank city price chev"
                         "rank bar  bar   bar";
    align-items: center;
    column-gap: 10px;
    row-gap: 7px;
  }
  .rank { grid-area: rank; }
  .city { grid-area: city; width: auto; min-width: 0; }
  .barwrap { display: contents; }
  .bar { grid-area: bar; height: 7px; }
  .price { grid-area: price; }
  details.row .chev { grid-area: chev; }
}
/* ---- the expanded detail -------------------------------------------
   A leg reads left to right the way the journey does: which flight, when it
   leaves and from where, how long it takes, when it lands and where, and who
   is flying it. A rail down the left ties the legs of one trip together. */
.legs {
  position: relative;
  padding: 6px 14px 16px 56px;
  background: color-mix(in srgb,#f6a06b 13%,transparent);
  border-radius: 0 0 14px 14px;
}
/* The rail sits inside the card rather than being its left edge, so the card
   stays one unbroken shape. */
.legs::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 0;
  bottom: 22px;
  border-left: 1px solid color-mix(in srgb, #f6a06b 34%, transparent);
}

.leg {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 0 16px;
  padding: 12px 0;
  position: relative;
}
/* A dot on the rail for each leg. */
.leg::before {
  content: "";
  position: absolute;
  left: -26px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-accent-400);
  box-shadow: 0 0 0 3px var(--color-neutral-900);
}

.leg .flightno {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--color-accent-300);
  background: color-mix(in srgb, #f6a06b 14%, transparent);
  border: 1px solid color-mix(in srgb, #f6a06b 34%, transparent);
  white-space: nowrap;
}
.leg .flightno.empty { opacity: .35; }

.leg .endpoint { display: flex; flex-direction: column; line-height: 1.15; }
.leg .endpoint b {
  font-family: var(--font-heading);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.leg .endpoint .place {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .06em;
  opacity: .5;
  margin-top: 2px;
}
/* The city and country under the code. Capped and clipped, because a long
   name here would push the middle of the leg out of shape. */
.leg .endpoint .placecity {
  font-size: 10.5px;
  opacity: .45;
  margin-top: 1px;
  max-width: 17ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The arriving end reads right to left, so every line in it is aligned that
   way -- the time, the code and the place. Aligning only one of them left the
   code against the left edge and the city against the right. */
.leg .endpoint.arrive { align-items: flex-end; text-align: right; }


/* The line between the two times, with the flight's length sitting on it. */
.leg .span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; }
.leg .span .line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, #f5ead8 30%, transparent),
    color-mix(in srgb, #f5ead8 12%, transparent));
}
.leg .span .spantext { font-size: 10.5px; opacity: .5; font-variant-numeric: tabular-nums; }

.leg .who {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right; font-size: 12px; opacity: .7; max-width: 170px;
}
.leg .who .day { font-size: 10.5px; opacity: .6; margin-top: 2px; }

/* A stop shows as a gap in the rail rather than another line of text. */
.layover { position: relative; padding: 2px 0 2px 0; }
.layover::before {
  content: "";
  position: absolute;
  left: -22px; top: 0; bottom: 0;
  border-left: 1px dashed color-mix(in srgb, #f5ead8 28%, transparent);
}
.layover span {
  display: inline-block;
  font-size: 11px;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5ead8 8%, transparent);
  color: color-mix(in srgb, #f5ead8 70%, transparent);
}

.legfoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

@media (max-width: 620px) {
  .leg { grid-template-columns: auto 1fr auto; gap: 6px 12px; }
  .leg .flightno { grid-column: 1; grid-row: 1; }
  .leg .who { grid-column: 2 / -1; grid-row: 1; align-items: flex-start; text-align: left; }
  /* By class, not nth-of-type: every child here is a span, so counting by
     type picked the wrong ones and drew the journey backwards. */
  .leg .endpoint.depart { grid-column: 1; grid-row: 2; }
  .leg .span            { grid-column: 2; grid-row: 2; }
  .leg .endpoint.arrive { grid-column: 3; grid-row: 2; text-align: right; }
  .leg .endpoint.arrive .place { align-self: flex-end; }
}

@keyframes sk { 0%{opacity:.3} 50%{opacity:.7} 100%{opacity:.3} }
.sk { animation: sk 1.3s ease-in-out infinite; background: color-mix(in srgb,#f5ead8 18%,transparent); border-radius: 999px; }
@keyframes spin { to { transform: rotate(360deg) } }
.spinner { width: 14px; height: 14px; flex: none; border: 2px solid color-mix(in srgb,#f5ead8 28%,transparent); border-top-color: var(--color-accent-400); border-radius: 50%; animation: spin .8s linear infinite; }
.progress { height: 3px; border-radius: 999px; background: color-mix(in srgb,#f5ead8 14%,transparent); overflow: hidden; margin-bottom: 22px; }
.progress > i { display: block; height: 100%; background: var(--color-accent-400); transition: width .4s ease; }
.busyline { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 14px; }
.resulthead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 16px; }
.summary { font-size: 13px; opacity: .75; }
.sorts { margin-left: auto; font-size: 11px; }
[hidden] { display: none !important; }

/* ---- date field -------------------------------------------------------
   The native picker indicator is a dark glyph that all but disappears on the
   dark ground, so it is inverted to the page's cream and given room to be an
   obvious target. The whole field opens the picker, not just the icon. */
.dark .input[type="date"] {
  width: 100%;
  max-width: 260px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.dark .input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(89%) sepia(12%) saturate(360%) hue-rotate(340deg) brightness(103%);
  opacity: .55;
  cursor: pointer;
  padding: 4px;
  margin-inline-start: 6px;
  border-radius: 999px;
  transition: opacity .15s ease, background-color .15s ease;
}
.dark .input[type="date"]:hover::-webkit-calendar-picker-indicator,
.dark .input[type="date"]:focus-visible::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: color-mix(in srgb, #f6a06b 22%, transparent);
}
.dark .input[type="date"]::-webkit-datetime-edit-text { opacity: .45; padding: 0 1px; }
.dark .input[type="date"]::-webkit-datetime-edit-day-field:focus,
.dark .input[type="date"]::-webkit-datetime-edit-month-field:focus,
.dark .input[type="date"]::-webkit-datetime-edit-year-field:focus {
  background: var(--color-accent-400);
  color: var(--color-neutral-900);
  border-radius: 4px;
  outline: none;
}
.datehint { font-size: 11.5px; opacity: .5; margin-top: 6px; }

/* ---- max travel time slider ----------------------------------------
   The native track and thumb are drawn by the browser and look nothing like
   the rest of the page, so both are styled explicitly in each engine's way. */
.slider-field { min-width: 240px; }
.slider-field > label b { color: var(--color-accent-400); font-variant-numeric: tabular-nums; }
.slider-ends {
  display: flex; justify-content: space-between;
  font-size: 10.5px; opacity: .4; margin-top: 2px;
}

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px;
  background: transparent; cursor: pointer; margin: 0;
}
.slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  /* WebKit has no equivalent of ::-moz-range-progress, so the filled part is
     painted as a gradient stopping at --fill, which the page keeps updated. */
  background: linear-gradient(to right,
    var(--color-accent-400) 0 var(--fill, 0%),
    color-mix(in srgb, #f5ead8 18%, transparent) var(--fill, 0%) 100%);
}
.slider::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: color-mix(in srgb, #f5ead8 18%, transparent);
}
.slider::-moz-range-progress {
  height: 5px; border-radius: 999px; background: var(--color-accent-400);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -7.5px;
  border-radius: 50%;
  background: var(--color-accent-400);
  border: 3px solid var(--color-neutral-900);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f6a06b 55%, transparent);
  transition: transform .12s ease;
}
.slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-accent-400);
  border: 3px solid var(--color-neutral-900);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f6a06b 55%, transparent);
}
.slider:hover::-webkit-slider-thumb,
.slider:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, #f6a06b 45%, transparent);
}

/* A result that could not cover everything says so, rather than looking
   complete and quietly missing flights. */
.partial {
  font-size: 12.5px;
  margin: 0 0 14px;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--color-accent-200);
  background: color-mix(in srgb, #f6a06b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f6a06b 30%, transparent);
}

/* Counts while a search runs, so the wait shows what it is doing. */
.busystats { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 16px; }
.stat {
  font-size: 11.5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #f5ead8 18%, transparent);
  color: color-mix(in srgb, #f5ead8 75%, transparent);
  font-variant-numeric: tabular-nums;
}
.stat b { color: var(--color-accent-400); font-weight: 700; }
.stat.where { border-color: color-mix(in srgb, #f6a06b 35%, transparent); }

.morewrap { display: flex; gap: 10px; align-items: center; padding: 22px 4px 4px; }

/* Prices served from a recent search say how old they are, and offer a way
   back to the providers. Quietly showing day-old fares would be worse than
   waiting for new ones. */
.cachenote {
  font-size: 12px;
  margin: 0 0 12px;
  opacity: .6;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cachenote .btn { font-size: 12px; }

/* ---- earlier searches ----------------------------------------------
   Kept in the browser, so it is this device's history and nobody else's.
   The row shows what you scan for; the rest waits until the row is opened. */
#recent { margin-top: clamp(38px, 6vw, 60px); max-width: 620px; }
.recenthead { display: flex; align-items: baseline; gap: 12px; }
.recenttitle {
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0;
  color: color-mix(in srgb, #f5ead8 85%, transparent);
}
.recentnote { font-size: 12px; opacity: .45; margin: 4px 0 14px; max-width: 46em; }

/* separate, not collapse: a collapsed table cannot round a row's corners,
   and this row needs to read as one card with its details. */
table.recent { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.recent th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: color-mix(in srgb, #f5ead8 42%, transparent);
  padding: 0 12px 8px 0;
  white-space: nowrap;
}
table.recent th:last-child, table.recent td.open { width: 1%; }
table.recent th:first-child, table.recent td:first-child { padding-left: 14px; }
table.recent th:last-child, table.recent td:last-child { padding-right: 14px; }
table.recent td {
  padding: 12px 12px 12px 0;
  border-top: 1px solid color-mix(in srgb, #f5ead8 10%, transparent);
  white-space: nowrap;
  vertical-align: middle;
}
table.recent tr.row { cursor: pointer; }

/* Hover is a hint, open is a state, so they cannot look the same: closing a
   row while the pointer is still on it looked like nothing had happened.
   Hover only where there is a real pointer -- a tap leaves the state stuck on
   a touch screen. */
@media (hover: hover) {
  table.recent tr.row:hover > td {
    background: color-mix(in srgb, #f6a06b 5%, transparent);
  }
}
table.recent tr.row.expanded > td {
  background: color-mix(in srgb, #f6a06b 13%, transparent);
  border-top-color: transparent;
}
table.recent tr.row > td:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
table.recent tr.row > td:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
/* Open, the bottom corners belong to the details below, so the two read as
   one shape rather than two stacked ones. */
table.recent tr.row.expanded > td:first-child { border-bottom-left-radius: 0; }
table.recent tr.row.expanded > td:last-child { border-bottom-right-radius: 0; }
table.recent tr.row.expanded + tr.detail > td {
  background: color-mix(in srgb, #f6a06b 13%, transparent);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}
table.recent .route { font-family: var(--font-heading); font-size: 14px; }
table.recent .route .arrow { color: var(--color-accent-400); margin: 0 6px; }
/* Colour again, not opacity, for the same reason as the arrow. */
table.recent .muted { color: color-mix(in srgb, #f5ead8 55%, transparent); }
table.recent .cheapest {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-accent-400);
  font-variant-numeric: tabular-nums;
}
table.recent .none { color: color-mix(in srgb, #f5ead8 38%, transparent); font-family: var(--font-body); font-size: 12px; }
table.recent .open { text-align: right; }

/* A bare arrow did not say it could be pressed, and sitting in its own cell
   against the price it read as a stray divider. A bordered button says both
   what it is and what it does. */
.openbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--color-accent-300);
  background: color-mix(in srgb, #f6a06b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f6a06b 38%, transparent);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.openbtn span { font-size: 13px; transition: transform .15s ease; }
.openbtn:hover, .openbtn:focus-visible {
  background: var(--color-accent-400);
  border-color: var(--color-accent-400);
  color: var(--color-neutral-900);
}
.openbtn:hover span { transform: translateX(2px); }
.openbtn:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }

@media (max-width: 560px) {
  .openbtn { padding: 7px 10px; }
  .openbtn .label { display: none; }
}

/* What the row was not showing. */
tr.detail td { padding: 0 14px 13px; border-top: 0; white-space: normal; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; }
.facts .fact {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #f5ead8 7%, transparent);
  color: color-mix(in srgb, #f5ead8 78%, transparent);
}
.facts .fact i {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .5;
}

/* A phone gets the same three columns, just tighter. */
@media (max-width: 560px) {
  table.recent { font-size: 12.5px; }
  table.recent td { padding-right: 8px; }
}


/* ---- airport suggestions --------------------------------------------
   The field sits above the list, which is absolutely positioned so opening
   it never moves the form underneath. */
.combo { position: relative; }
.suggest {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 0;
  right: 0;
  margin: 6px 0 0;
  padding: 5px;
  list-style: none;
  max-height: 290px;
  overflow-y: auto;
  background: var(--color-surface-100, #2a241e);
  border: 1px solid color-mix(in srgb,#f5ead8 16%,transparent);
  border-radius: 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.42);
}
.suggest li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 10px;
  cursor: pointer;
  /* Colour, not opacity: fading a row fades its background with it, which is
     what made an earlier highlight look muddy. */
  color: var(--color-text-100, #f5ead8);
}
.suggest li.on { background: color-mix(in srgb,#f6a06b 17%,transparent); }
@media (hover: hover) {
  .suggest li:hover { background: color-mix(in srgb,#f6a06b 11%,transparent); }
}
.sg-city { font-family: var(--font-heading); font-size: 15px; flex: 0 1 auto;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-code { font-family: ui-monospace, Menlo, monospace; font-size: 11px;
           letter-spacing: .06em; color: var(--color-accent-300);
           background: color-mix(in srgb,#f6a06b 13%,transparent);
           border-radius: 999px; padding: 2px 7px; flex: none; }
.sg-country { font-size: 11.5px; color: var(--color-text-100, #f5ead8);
              opacity: .5; margin-left: auto; flex: none; white-space: nowrap; }