/* ============================================================================
   Digitour — search.css
   Search widget · date-range calendar · travellers picker (with child ages).
   Mobile-first: fields stack and open full-screen sheets. From 1024px the
   widget becomes an inline pill row and the sheets become anchored popovers.
   ========================================================================== */

/* ── 1. Widget shell ─────────────────────────────────────────────────────── */
/* No backdrop-filter, transform or filter on this element or its ancestors:
   any of them would become the containing block for the position:fixed
   bottom sheets and break the mobile layout. */
.search { position: relative; display: grid; gap: 12px; }
.search__panel {
  position: relative;
  background: rgba(255, 255, 255, .97);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  padding: 8px;
  display: grid;
  gap: 4px;
}
.search--light .search__panel { background: #fff; box-shadow: var(--sh-2); border: 1px solid var(--line); }
.search--compact { box-shadow: var(--sh-2); }

.search__fields { display: grid; gap: 4px; }
@media (min-width: 600px) {
  .search__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .search__fields > .search__field:last-of-type { grid-column: 1 / -1; }
}

.search__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 9px 14px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
/* Without this, the [hidden] attribute (set by flights.js's setTripType()
   when switching to one-way) loses the cascade tie to this element's own
   display:flex — the field stays visibly showing (and, worse, its stale
   return-date value stays submittable) even though .hidden was set to
   true. Same fix already applied elsewhere for this exact pattern (see
   flights.css's own .aviacard[hidden] comment). */
.search__field[hidden] { display: none; }
.search__field:hover { background: var(--g50); }
.search__field[aria-expanded="true"],
.search__field:focus-within {
  border-color: var(--g600);
  background: var(--g100);
}
.search__field.is-invalid { border-color: var(--danger); background: var(--danger-bg); }

.search__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--g700); line-height: 1;
}
.search__value {
  font-size: .9375rem; font-weight: 500; color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search__value.is-placeholder { color: var(--muted); font-weight: 400; }

/* Native select styled as a field */
.search__select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; padding: 0;
  /* Same iOS auto-zoom-on-focus threshold as .trav__age select above. */
  font-size: 1rem; font-weight: 500; color: var(--ink); line-height: 1.3;
  width: 100%; cursor: pointer;
}
.search__select:focus { outline: none; }

.search__divider { display: none; }
/* Same [hidden]-cascade fix as .search__field above — only matters from
   1024px up, where the divider's own rule sets display:block. */
.search__divider[hidden] { display: none; }

.search__submit {
  min-height: 52px;
  border-radius: var(--r-md);
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* Sheen sweep on hover — pure decoration, disabled under reduced motion */
.search__submit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.search__submit:hover::after { transform: translateX(120%); }
.search__submit[data-busy="true"] { pointer-events: none; }
.search__submit[data-busy="true"]::after { display: none; }

.search__error {
  display: none;
  align-items: center; gap: 6px;
  grid-column: 1 / -1;
  margin: 2px 6px 4px;
  font-size: .75rem; font-weight: 500; color: var(--danger);
}
.search.has-error .search__error { display: flex; animation: pop-in var(--dur-2) var(--ease); }

/* Desktop: single row of fields */
@media (min-width: 1024px) {
  .search__panel {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 4px;
  }
  /* Flex, not an auto-column grid: with grid-auto-columns every child gets an
     equal track, so the 1px dividers were each claiming a full field's width
     and leaving big empty gaps between the fields. */
  .search__fields {
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .search__field { flex: 1 1 0; min-width: 0; }
  /* Board and travellers need less room than a destination or a date */
  .search__field[data-search-open="board"] { flex: 0 1 clamp(130px, 13%, 170px); }
  .search__field { min-height: 60px; }
  .search__divider {
    display: block; width: 1px; background: var(--line);
    margin: 12px 0; align-self: stretch; flex-shrink: 0;
  }
  .search__submit { width: auto; min-width: 132px; padding-inline: 26px; }
  .search__error { grid-column: 1 / -1; margin-top: 0; }
}

/* Search widget inside a dark hero */
@keyframes search-in { from { opacity: 0; } to { opacity: 1; } }
.search-hero { position: relative; z-index: 3; }
.search-hero .search { animation: search-in .5s var(--ease) both; }

/* ── 2. Sheet / popover container ─────────────────────────────────────────
   The panel is a child of <body>, positioned with position:fixed, so it is
   never trapped by an ancestor's stacking context or overflow clip.

   Phone  → a full-screen sheet: the whole viewport, page locked behind it.
   1024px+ → a floating panel; search.js sets top/left/max-height from the
             space actually available around the field.
   ------------------------------------------------------------------------ */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1);
  background: rgba(6, 28, 19, .58);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-3) ease, visibility var(--dur-3);
  backdrop-filter: blur(3px);
}
.sheet-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.pop {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  background: var(--white);
  display: flex;
  flex-direction: column;
  box-shadow: 0 -14px 60px rgba(6, 28, 19, .34);
  transform: translateY(100%);
  visibility: hidden;
  /* visibility flips instantly on open and waits for the slide-out on close,
     so the panel is never focusable while it is off screen */
  transition: transform var(--dur-3) var(--ease), visibility 0s var(--dur-3);
  overscroll-behavior: contain;
}
.pop[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-3) var(--ease), visibility 0s;
}

/* Grab handle — sheet affordance, hidden once it becomes a floating panel */
.pop__grab {
  flex-shrink: 0;
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--line);
  margin: 10px auto 2px;
}

.pop__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.pop__heading { min-width: 0; }
.pop__title { font-family: var(--serif); font-size: 1.125rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.pop__hint { font-size: .8125rem; color: var(--muted); margin-top: 3px; }
.pop__hint strong { color: var(--g700); font-weight: 600; }
.pop__close {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  background: var(--sand);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease;
  flex-shrink: 0;
}
.pop__close:hover { background: var(--line); color: var(--ink); }

.pop__body {
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;              /* lets the body actually scroll inside the flex column */
}

.pop__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
  box-shadow: 0 -6px 18px rgba(10, 46, 32, .05);
}
.pop__apply { min-height: 48px; padding-inline: 26px; }
.pop__clear {
  font-size: .875rem; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; min-height: 44px; padding-inline: 4px;
}
.pop__clear:hover { color: var(--ink); }

@media (min-width: 1024px) {
  .sheet-backdrop { background: transparent; backdrop-filter: none; }

  .pop {
    inset: auto auto auto 0;          /* top/left come from search.js */
    width: max-content;
    max-width: min(94vw, 720px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 64px rgba(6, 28, 19, .24), 0 2px 8px rgba(6, 28, 19, .08);
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    opacity: 0;
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease), visibility 0s var(--dur-2);
  }
  .pop[data-open="true"] {
    transform: none; opacity: 1;
    transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease), visibility 0s;
  }
  .pop--up { transform-origin: bottom center; transform: translateY(8px) scale(.985); }

  .pop__grab { display: none; }
  .pop__close { display: none; }
  .pop__head { padding: 16px 22px 14px; }
  .pop__body { padding: 18px 22px; }
  .pop__foot { padding: 14px 22px; }

  /* Centred fallback: used when the window is too short to place the panel
     beside its field. It then behaves as a modal dialog. */
  .pop--centred {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%) scale(.985);
    transform-origin: center;
  }
  .pop--centred[data-open="true"] { transform: translate(-50%, -50%); }
  .sheet-backdrop[data-centred="true"] {
    background: rgba(6, 28, 19, .5);
    backdrop-filter: blur(3px);
  }

  .pop--trav { width: min(92vw, 420px); }
  .pop--dest { width: min(92vw, 360px); }
  /* Explicit: with a fixed row height the columns no longer carry an
     intrinsic width, so max-content would shrink to the width of the digits. */
  .pop--cal { width: 616px; }
  .pop--cal.cal--single { width: 340px; }
}

/* ── 2b. Destination list ────────────────────────────────────────────────── */
.optlist { display: grid; gap: 4px; }
.optlist li {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 14px;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.optlist li:hover { background: var(--g50); }
.optlist li:focus-visible { outline: 2px solid var(--g600); outline-offset: -2px; }
.optlist li[aria-selected="true"] { background: var(--g100); border-color: var(--g600); }
.optlist__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.optlist__label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.optlist__sub { font-size: .75rem; color: var(--muted); }
.optlist__tick { color: var(--g700); opacity: 0; flex-shrink: 0; transition: opacity var(--dur-1) ease; }
.optlist li[aria-selected="true"] .optlist__tick { opacity: 1; }

/* Only rendered when the destination picker is searchable (see search.js's
   data-search-dest-searchable) — /flights today, so any airport pac.am
   knows about can be found, not just the curated popular/other list. */
.optlist__search { margin-bottom: 10px; }
.optlist__empty { padding: 14px; color: var(--muted); font-size: .875rem; text-align: center; }

/* The native <select> stays in the DOM as the form value and the no-JS
   fallback; once the listbox is built it is taken out of the layout. */
.js .search__native { display: none; }

/* Hide the compact sticky search bar while a panel is open — it would
   otherwise slide in over the top of it. */
body.pop-open .searchbar { transform: translateY(-110%); }

/* ── 3. Calendar ─────────────────────────────────────────────────────────── */
.cal { min-width: 0; }

.cal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.cal__navbtn {
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--ink); flex-shrink: 0;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, opacity var(--dur-1) ease;
}
.cal__navbtn:hover { border-color: var(--g600); background: var(--g50); }
.cal__navbtn[disabled] { opacity: .3; pointer-events: none; }
.cal__status { font-size: .8125rem; color: var(--muted); text-align: center; flex: 1; }
.cal__status strong { color: var(--g700); font-weight: 600; }

.cal__months { display: grid; gap: 26px; }
@media (min-width: 1024px) { .cal__months { grid-template-columns: 1fr 1fr; gap: 28px; } }
/* One month at a time when two will not fit — still no internal scrolling. */
.cal--single .cal__months { grid-template-columns: 1fr; }

.cal__mtitle {
  font-family: var(--serif); font-weight: 600; font-size: .9375rem; color: var(--ink);
  text-align: center; margin-bottom: 8px;
}
.cal__dows { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  text-align: center; font-size: .6875rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal__cell { position: relative; }
.cal__day {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease;
  z-index: 1;
}
.cal__day:hover:not([disabled]) { background: var(--sand); }
.cal__day[disabled] { color: var(--line); cursor: default; }
.cal__day[data-today]::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--g600);
}
/* Range fill sits behind the day button, edge-to-edge */
.cal__cell[data-in-range]::before {
  content: ""; position: absolute; inset: 4px -1px; background: var(--g100); z-index: 0;
}
.cal__cell[data-edge="start"]::before { left: 50%; border-radius: 0; }
.cal__cell[data-edge="end"]::before   { right: 50%; }
.cal__cell[data-edge="both"]::before  { display: none; }
.cal__day[data-selected] {
  background: var(--g700); color: #fff; font-weight: 700;
}
.cal__day[data-selected]:hover { background: var(--g600); }
.cal__day[data-selected][data-today]::after { background: var(--gold); }
.cal__day[data-preview] { background: var(--g600); color: #fff; }

/* Desktop sizing, declared after the day rules above so it takes effect: a
   pointer does not need a 44px target, and a fixed row height is what keeps
   the two-month panel inside the space available to it. */
@media (min-width: 1024px) {
  .cal__day { aspect-ratio: auto; height: 38px; min-height: 0; font-size: .8125rem; }
  .cal__mtitle { margin-bottom: 6px; }
  .cal__dow { padding-bottom: 4px; }
  .cal__nav { margin-bottom: 10px; }
  .cal--single .cal__months { grid-template-columns: 1fr; }

  /* Last step down, for short windows: tighter rows rather than a scrollbar. */
  .cal--compact .cal__day { height: 32px; font-size: .78125rem; }
  .cal--compact .cal__nav { margin-bottom: 6px; }
  .cal--compact .cal__mtitle { margin-bottom: 2px; font-size: .875rem; }
  .cal--compact .cal__dow { padding-bottom: 2px; }
  .cal--compact .cal__presets { margin-bottom: 8px; }
  .cal--compact .cal__preset { min-height: 32px; padding: 5px 10px; }
}

/* The legend is announced, not drawn: a row of swatches ate 40px of panel
   height and was the first thing to be clipped when space ran short. */

/* Quick presets */
.cal__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cal__preset {
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px;
  font-size: .75rem; font-weight: 500; color: var(--ink); min-height: 36px;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.cal__preset:hover { border-color: var(--g600); background: var(--g50); }

/* ── 4. Travellers picker ────────────────────────────────────────────────── */
.trav__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.trav__row:first-child { padding-top: 0; }
.trav__name { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.trav__sub  { font-size: .75rem; color: var(--muted); margin-top: 1px; }
.trav__stepper { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.trav__btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; color: var(--ink);
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.trav__btn:hover:not([disabled]) { border-color: var(--g600); background: var(--g100); }
.trav__btn:active:not([disabled]) { transform: scale(.92); }
.trav__btn[disabled] { opacity: .32; pointer-events: none; }
.trav__count {
  min-width: 26px; text-align: center; font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Child ages — one select per child, 0–12 */
.trav__ages { padding: 16px 0 4px; }
.trav__ages[hidden] { display: none; }
.trav__ages-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.trav__ages-title { font-size: .8125rem; font-weight: 600; color: var(--ink); }
.trav__ages-note  { font-size: .6875rem; color: var(--muted); }
.trav__ages-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 480px) { .trav__ages-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.trav__age { animation: pop-in var(--dur-2) var(--ease) both; }
.trav__age label {
  display: block; font-size: .6875rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}
.trav__age select {
  width: 100%; min-height: 44px; padding: 8px 28px 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  /* iOS Safari zooms the whole page in on focusing any form control under
     16px — this select renders the moment a child is added, so tapping
     "+" was visibly zooming the page even though nothing here needed a
     closer look. 16px is the documented threshold, not a design choice. */
  font-size: 1rem; color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23566159' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.trav__age select:focus { outline: none; border-color: var(--g600); box-shadow: 0 0 0 3px rgba(20,107,75,.14); }
.trav__age.is-invalid select { border-color: var(--danger); background-color: var(--danger-bg); }
.trav__age.is-invalid label  { color: var(--danger); }

.trav__notice {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--g50); font-size: .75rem; color: var(--muted); line-height: 1.6;
}

/* ── 5. Sticky compact search bar (appears after hero scrolls away) ──────── */
.searchbar {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 95;
  background: rgba(250, 248, 244, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform var(--dur-3) var(--ease);
}
.searchbar[data-show="true"] { transform: none; }
.searchbar__inner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--gutter);
  max-width: var(--container); margin-inline: auto;
}
.searchbar__summary {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  padding: 8px 14px; min-height: 46px;
  font-size: .8125rem; color: var(--ink); text-align: left;
  box-shadow: var(--sh-1);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.searchbar__summary:hover { border-color: var(--g600); box-shadow: var(--sh-2); }
.searchbar__summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchbar__summary .sep { color: var(--muted); }
.searchbar__go { flex-shrink: 0; min-height: 46px; padding-inline: 18px; }

/* ── 6. Results transitions ──────────────────────────────────────────────── */
.results { position: relative; }
.results[data-loading="true"] .results__list { opacity: .25; pointer-events: none; filter: saturate(.4); }
.results__list { transition: opacity var(--dur-2) ease, filter var(--dur-2) ease; }

.results__skeleton { display: none; }
.results[data-loading="true"] .results__skeleton { display: grid; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.results__list > * { animation: card-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }

.results__count { font-size: .875rem; color: var(--muted); }
.results__count strong { color: var(--ink); font-weight: 600; }

@keyframes count-flash {
  0%   { color: var(--g600); transform: translateY(-2px); }
  100% { color: inherit; transform: none; }
}
.results__count.is-updated strong { animation: count-flash .5s var(--ease); display: inline-block; }

/* Empty state */
.results__empty { text-align: center; padding: 48px 20px; }
.results__empty svg { margin: 0 auto 16px; color: var(--line); }

/* ── 7. Destination field: the whole box opens the menu ──────────────────── */
/* It is a <label for> wrapping its own <select>, so the full 56px field is the
   hit area rather than the 20px the select occupied on its own. */
.search__field--select { cursor: pointer; }
.search__field--select .search__select {
  width: 100%;
  min-height: 24px;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23566159' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.search__field--select:focus-within { border-color: var(--g600); background: var(--g100); }

/* ── 8. Board basis: multi-select list ───────────────────────────────────── */
.checklist { display: grid; gap: 4px; }
.check {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 10px 14px;
  border: 1.5px solid transparent; border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.check:hover { background: var(--g50); }
.check:has(input:checked) { background: var(--g100); border-color: var(--g600); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex-shrink: 0; width: 22px; height: 22px;
  border: 1.5px solid var(--line); border-radius: var(--r-xs);
  background: var(--white);
  display: grid; place-items: center; color: transparent;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.check input:checked ~ .check__box { background: var(--g700); border-color: var(--g700); color: #fff; }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--g600); outline-offset: 2px; }
.check__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.check__label { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.check__note { font-size: .75rem; color: var(--muted); }
.check__count {
  flex-shrink: 0; font-size: .6875rem; font-weight: 600; color: var(--muted);
  background: var(--sand); border-radius: 999px; padding: 4px 9px; white-space: nowrap;
}
/* A board basis nothing is sold on is shown, but cannot be chosen */
.check.is-empty { cursor: not-allowed; opacity: .55; }
.check.is-empty:hover { background: transparent; }
.check.is-empty .check__count { background: transparent; border: 1px dashed var(--line); }

.checklist__note {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 14px; font-size: .75rem; color: var(--muted); line-height: 1.55;
}
.checklist__note .i { flex-shrink: 0; margin-top: 2px; color: var(--g600); }

@media (min-width: 1024px) { .pop--board { width: min(92vw, 400px); } }

/* Compact mode trims the panel chrome too — head and foot were taking a third
   of the available height on a short window. */
@media (min-width: 1024px) {
  .cal--compact .pop__head { padding: 12px 20px 10px; }
  .cal--compact .pop__title { font-size: 1rem; }
  .cal--compact .pop__body { padding: 12px 20px; }
  .cal--compact .pop__foot { padding: 10px 20px; }
  .cal--compact .pop__apply { min-height: 42px; }
}

/* Panel chrome on a pointer device: 78px of header and 77px of footer is
   dropdown-sized for a dialog, not for a dropdown. Trimming it keeps the
   two-month calendar anchored to its field on a normal laptop instead of
   falling back to the centred dialog. */
@media (min-width: 1024px) {
  .pop__head { padding: 13px 22px 11px; }
  .pop__title { font-size: 1rem; }
  .pop__hint { margin-top: 1px; }
  .pop__body { padding: 14px 22px; }
  .pop__foot { padding: 11px 22px; }
  .pop__apply { min-height: 42px; }
  .pop__clear { min-height: 40px; }
  .cal__day { height: 36px; }
}


/* ── 9. Board basis chips ────────────────────────────────────────────────
   All five are on by default: the chips narrow a search rather than build
   one up, so an untouched widget searches everything. They sit under the
   card and are styled for a dark hero, with a light variant for the results
   page. Real checkboxes, so they submit and work without JavaScript. */
.search__boards {
  border: 0; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.search__boards[hidden] { display: none; }
.search__boards-label {
  padding: 0; margin-right: 2px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--on-dark-2);
}
.boardchip { cursor: pointer; }
.boardchip input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.boardchip__face {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: .8125rem; font-weight: 600; line-height: 1;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease,
              color var(--dur-1) ease, opacity var(--dur-1) ease;
}
.boardchip__face .i { opacity: 0; width: 0; transition: opacity var(--dur-1) ease, width var(--dur-1) ease; }
.boardchip:hover .boardchip__face { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
/* Adjacent sibling, not :has() — the on-state must never depend on it */
.boardchip input:checked + .boardchip__face {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.boardchip input:checked + .boardchip__face .i { opacity: 1; width: 13px; }
.boardchip input:focus-visible + .boardchip__face { outline: 2px solid var(--gold); outline-offset: 3px; }
.boardchip input:not(:checked) + .boardchip__face { opacity: .82; }

.search__boards-reset {
  min-height: 40px; padding: 0 12px;
  font-size: .75rem; font-weight: 600; color: var(--on-dark-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.search__boards-reset:hover { color: #fff; }
.search__boards-reset[hidden] { display: none; }

/* On a light page the chips invert */
.search--light .search__boards-label { color: var(--muted); }
.search--light .boardchip__face {
  border-color: var(--line); background: var(--white); color: var(--ink);
}
.search--light .boardchip:hover .boardchip__face { border-color: var(--g600); background: var(--g50); }
.search--light .boardchip input:checked + .boardchip__face {
  background: var(--g700); border-color: var(--g700); color: #fff;
}
.search--light .search__boards-reset { color: var(--g700); }
.search--light .search__boards-reset:hover { color: var(--g600); }

/* ── 9b. Flight toggle — same "sits on a dark hero photo" context as the
   board chips above, so it needs the same translucent-white/light-text
   treatment rather than the sidebar-filter .check component (which
   assumes a white page background and is unreadable here). */
.search__flight-toggle {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 14px; border-radius: var(--r-md);
  border: 1.5px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.search__flight-toggle:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.search__flight-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.search__flight-toggle.is-locked { cursor: default; }
.search__flight-toggle.is-locked:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.search--light .search__flight-toggle.is-locked:hover { background: var(--white); border-color: var(--line); }
.search__flight-box {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 5px;
  display: grid; place-items: center; color: var(--ink);
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.search__flight-box .i { opacity: 0; transition: opacity var(--dur-1) ease; }
.search__flight-toggle input:checked ~ .search__flight-box { background: var(--gold); border-color: var(--gold); }
.search__flight-toggle input:checked ~ .search__flight-box .i { opacity: 1; }
.search__flight-toggle input:focus-visible ~ .search__flight-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.search__flight-text { display: grid; gap: 2px; }
.search__flight-label { font-size: .8125rem; font-weight: 600; color: #fff; }
.search__flight-note { font-size: .6875rem; color: var(--on-dark-2); line-height: 1.4; }

.search--light .search__flight-toggle { border-color: var(--line); background: var(--white); }
.search--light .search__flight-toggle:hover { border-color: var(--g600); background: var(--g50); }
.search--light .search__flight-box { border-color: var(--line); }
.search--light .search__flight-toggle input:checked ~ .search__flight-box { background: var(--g700); border-color: var(--g700); color: #fff; }
.search--light .search__flight-label { color: var(--ink); }
.search--light .search__flight-note { color: var(--muted); }