/* Flights and hotels: the search box (also on Home), filters, prices on nearby dates, results and the trip plan.
   Loaded after app.css and uses its tokens, so an org's accent follows. */

/* ---------- the search box: options, then one row of fields and Search ---------- */
.qs { display: grid; gap: 10px; padding: 16px; background: var(--ground-alt); container-type: inline-size; }
.qs-tabs { margin-block-end: 10px; }
.qs-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-block-size: 36px; }
.qs-opts select { inline-size: auto; min-height: 36px; padding-block: 6px; background: transparent; border-color: transparent; color: var(--ink); font-weight: 500; cursor: pointer; }
.qs-opts select:hover { background: var(--band); }
.qs-opts .check { font-size: 14px; }
.qs-row { display: grid; gap: 10px; align-items: start; }
.qs .ap-list { inset-block-start: 50px; }
.qs-f { display: grid; gap: 6px; align-content: start; min-inline-size: 0; }
.qs-f input, .qs-f select { inline-size: 100%; min-inline-size: 0; min-height: 48px; font-size: 16px; }
/* Room for the airport's name under every place box, so boxes side by side stay level. */
.qs-place .ap { padding-block-end: 20px; }
.qs-place .ap > .ap-name { inset-block-start: auto; inset-block-end: 0; }
.qs-near { font-size: 13px; gap: 8px; color: var(--ink-muted); }
.qs-near input { inline-size: 16px; block-size: 16px; }
.qs-place .ap-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.qs-place .ap-quick .btn[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.qs-flight { grid-template-columns: minmax(150px, 1.3fr) 36px minmax(150px, 1.3fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; }
.qs-flight.one { grid-template-columns: minmax(150px, 1.3fr) 36px minmax(150px, 1.3fr) minmax(140px, 1fr) auto; }
.qs-hotel { grid-template-columns: minmax(200px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto; }
.qs-car { grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(110px, 0.8fr) auto; }
.qs-car.two { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qs-car.two > .qs-place { grid-column: span 2; }
.qs-swap { inline-size: 36px; block-size: 48px; border: 0; background: none; color: var(--ink-muted); font-size: 18px; cursor: pointer; }
.qs-swap:hover { background: var(--band); color: var(--ink); }
.qs-go { min-height: 48px; padding-inline: 28px; }
/* Multi-city: one row per flight */
.qs-legs { display: grid; gap: 10px; }
.qs-leg { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(140px, 1fr) 36px; gap: 10px; align-items: start; }
.qs-legx { align-self: end; }
.qs-legx .x { inline-size: 36px; block-size: 48px; border: 0; background: none; color: var(--ink-muted); font-size: 22px; cursor: pointer; }
.qs-legx .x:hover { background: var(--band); color: var(--ink); }
.qs-multi-go { grid-template-columns: auto; justify-content: end; }
.qs-multi-go .qs-gow > span { display: none; }

/* Home: the search box is the first thing on the page */
.hero { display: grid; gap: 4px; margin-block-end: 40px; }
.hero h1 { margin-block-end: 12px; }

/* ---------- filters: a row of buttons once results are in; each opens a small panel ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 16px; }
.f-wrap { position: relative; }
.f-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid transparent; background: var(--band); color: var(--ink); font: 500 14px/1.2 var(--font); cursor: pointer; }
.f-chip:hover { background: var(--line-strong); }
.f-chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--on-red); }
.f-chip[aria-pressed="true"]:hover { background: var(--red-deep); }
.f-chip .caret { inline-size: 7px; block-size: 7px; }
.f-pop { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 40; display: grid; gap: 12px; inline-size: max-content; min-inline-size: 240px; max-inline-size: min(360px, calc(100vw - 32px)); padding: 16px; background: var(--ground); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); }
.f-pop fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.f-pop .check { font-size: 14px; }
.f-list { display: grid; gap: 10px; max-block-size: 280px; overflow-y: auto; }
.f-leg { display: grid; gap: 8px; }
.f-leg + .f-leg { padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.f-clear { font-size: 14px; }

/* ---------- prices on nearby dates ---------- */
.dp { display: grid; gap: 10px; margin-block: 24px 8px; }
.dp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dp-head h2 { font-size: 16px; }
.dp-head .btn[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.dp-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dp-cell { display: grid; gap: 2px; justify-items: center; align-content: center; min-block-size: 64px; padding: 8px 4px; border: 0; background: var(--ground-alt); color: var(--ink); font: inherit; cursor: pointer; }
.dp-cell:hover:not(:disabled) { background: var(--band); }
.dp-cell:disabled { cursor: default; }
.dp-cell[aria-pressed="true"] { background: var(--red); color: var(--on-red); }
.dp-day { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
table.dp-grid th { vertical-align: middle; }
.dp-price { font-size: 15px; font-weight: 600; }
.dp-low { font-size: 11px; font-weight: 500; color: var(--good); }
.dp-cell.low .dp-price { color: var(--good); }
.dp-cell[aria-pressed="true"] .dp-day, .dp-cell[aria-pressed="true"] .dp-price, .dp-cell[aria-pressed="true"] .dp-low { color: var(--on-red); }
.dp-wait { display: inline-block; inline-size: 40px; block-size: 10px; background: var(--band); animation: dp-pulse 1.2s ease-in-out infinite; }
@keyframes dp-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .dp-wait { animation: none; } }
table.dp-grid { table-layout: fixed; min-inline-size: 560px; }
table.dp-grid th { font-size: 12px; font-weight: 500; text-align: center; white-space: nowrap; border: 0; padding: 6px 4px; }
table.dp-grid th[scope="row"] { text-align: end; padding-inline-end: 10px; }
table.dp-grid td { padding: 2px; border: 0; }
table.dp-grid .dp-cell { inline-size: 100%; min-block-size: 48px; }
.dp-axes { margin: 0; }
/* the price graph: one bar per day, taller is dearer */
.dp-graph { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; }
.dp-bar { display: grid; grid-template-rows: auto 120px auto; gap: 4px; justify-items: center; padding: 6px 2px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.dp-bar:hover:not(:disabled) { background: var(--ground-alt); }
.dp-bar:disabled { cursor: default; }
.dp-bar .dp-price { font-size: 13px; }
.dp-col { display: flex; align-items: flex-end; inline-size: 60%; block-size: 120px; }
.dp-col > span { display: block; inline-size: 100%; background: var(--line-strong); }
.dp-bar.low .dp-col > span { background: var(--good); }
.dp-bar.low .dp-price { color: var(--good); }
.dp-bar[aria-pressed="true"] .dp-col > span { background: var(--red); }
.dp-bar[aria-pressed="true"] .dp-day { color: var(--ink); font-weight: 600; }

/* ---------- results ---------- */
.book-main { display: grid; gap: 0; min-inline-size: 0; align-content: start; }
.results { margin-block-start: 16px; }
.results.updating { opacity: 0.55; }
.results-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; padding-block: 16px 8px; }
.results-head h2 { font-size: 16px; }
.results-head h2 + .small { display: block; margin-block-start: 4px; }
.r-sort { display: flex; align-items: center; gap: 8px; }
.r-sort > span:first-child { white-space: nowrap; }
.r-sort select { inline-size: auto; min-height: 36px; padding-block: 4px; }
.r-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: center; padding: 14px 4px; border-block-end: 1px solid var(--line); }
.r-row:hover { background: var(--ground-alt); }
.r-row.added { background: var(--ground-alt); }
.r-main { display: grid; gap: 3px; min-inline-size: 0; }
.r-main.with-mark { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.r-main.with-mark > .bm { margin-block-start: 2px; }
.r-body { display: grid; gap: 3px; min-inline-size: 0; }
.r-main .t { font-size: 16px; font-weight: 600; }
.r-main sup { font-size: 11px; color: var(--ink-muted); margin-inline-start: 2px; }
.r-main .leg .muted { font-size: 14px; }
.r-tags { display: flex; gap: 4px; }
.r-over { font-size: 13px; }
.r-price { display: grid; justify-items: end; text-align: end; white-space: nowrap; }
.r-price strong { font-size: 18px; font-weight: 600; }
.r-price .per { font-size: 13px; font-weight: 400; color: var(--ink-muted); }

/* ---------- the trip plan ---------- */
.tp .seg-item .amt { float: inline-end; }
.tp .actions { margin-block-start: 4px; }
.tp-actions { display: grid; gap: 8px; }
.tp-actions .btn:not(.link) { inline-size: 100%; justify-content: center; }
.tp-actions .btn.link { justify-self: start; }
.draft-book { display: grid; gap: 14px; padding-block-start: 8px; border-block-start: 1px solid var(--line); }

@container (max-width: 860px) {
  .qs-flight, .qs-flight.one { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .qs-hotel { grid-template-columns: 1fr 1fr; }
  .qs-car { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .qs-car.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qs-hotel .qs-place, .qs-car:not(.two) .qs-place { grid-column: 1 / -1; }
  .qs-car.two > .qs-place { grid-column: auto; }
  .qs-gow { grid-column: 1 / -1; }
  .qs-gow > span { display: none; }
  .qs-go { inline-size: 100%; }
  .qs-leg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, 0.9fr) 36px; }
  .qs-multi-go { justify-content: stretch; grid-template-columns: 1fr; }
  /* Dates side by side under From and To; the swap button sits between From and To. */
}
@container (max-width: 560px) {
  .qs-leg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .qs-leg .qs-date { grid-column: 1 / 3; grid-row: 2; }
  .qs-leg .qs-legx { grid-column: 3; grid-row: 1; }
}
@container (max-width: 860px) {
  .qs-flight { grid-template-areas: "from swap to" "dep dep ret" "go go go"; }
  .qs-flight > .qs-place:first-child { grid-area: from; }
  .qs-flight > .qs-swapw { grid-area: swap; }
  .qs-flight > .qs-place:nth-child(3) { grid-area: to; }
  .qs-flight > .qs-date:nth-child(4) { grid-area: dep; }
  .qs-flight > .qs-date:nth-child(5) { grid-area: ret; }
  .qs-flight > .qs-gow { grid-area: go; }
  .qs-flight.one { grid-template-areas: "from swap to" "dep dep dep" "go go go"; }
}
/* On a phone the return date gets only one column and its date is cut off, so the dates stack. */
@container (max-width: 440px) {
  .qs-flight { grid-template-areas: "from swap to" "dep dep dep" "ret ret ret" "go go go"; }
}
@media (max-width: 720px) {
  .qs { padding: 12px; }
  .dp-strip, .dp-graph { grid-template-columns: repeat(7, minmax(72px, 1fr)); overflow-x: auto; scrollbar-width: thin; }
  .r-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .r-price { grid-column: 2; grid-row: 1; }
  .r-act { grid-column: 2; grid-row: 2; justify-self: end; }
  .r-main { grid-row: 1 / span 2; }
  .r-main.with-mark { grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; }
  .r-main.with-mark > .bm { inline-size: 20px; block-size: 20px; font-size: 9px; }
  .dp-day span { display: block; }
  .qs-opts select { flex: 0 0 auto; padding-inline: 6px; }
  /* A filter panel opens as a sheet along the bottom of the screen, so it never runs off the side. */
  .f-wrap { position: static; }
  .f-pop { position: fixed; inset-inline: 16px; inset-block: auto 16px; inline-size: auto; max-inline-size: none; max-block-size: 70vh; overflow-y: auto; }
}

/* ---------- a plan's page: its fields, and each item with its options ---------- */
.plan-details { display: grid; gap: 14px; padding-block: 16px; border-block: 1px solid var(--line); }
.part-line { display: grid; gap: 10px; }
.part-line + .part-line { margin-block-start: 18px; }
.part-line-head { margin: 0; flex-wrap: wrap; gap: 8px 16px; }

/* ---------- Settings > Policy and approvals: trip purposes ---------- */
.purpose-list { gap: 6px; margin-block-end: 12px; }
.purpose-list .chip { gap: 4px; padding-inline-end: 2px; font-size: 14px; line-height: 24px; }
.chip-x { inline-size: 24px; block-size: 24px; border: 0; background: none; color: var(--ink-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.chip-x:hover { background: var(--line-strong); color: var(--ground); }
.purpose-add { display: flex; gap: 8px; max-inline-size: 420px; }
.purpose-add input { flex: 1 1 auto; }