/**
 * The shell: header, journey stepper, main column, assistant rail.
 *
 * KEEP-on-clone.
 *
 * ── How the assistant is removed ───────────────────────────────────────────
 * `.shell` is a two-column grid whose second column is `var(--rail-w)`, which
 * is 0px unless the client sets data-agent="on". With the agent off the column
 * has no width, the rail is never rendered, and the main column reflows to full
 * width on its own.
 *
 * No conditional in any product stylesheet, no layout to fix later. That is the
 * whole mechanism.
 */

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  /*
   * Named explicitly, not left implicit, so the rail (column 2) can span
   * "header through footer" with `grid-row: 1 / -1`. `-1` resolves against
   * the EXPLICIT grid only — with no `grid-template-rows` at all, that grid
   * has a single row, so a bare `1 / -1` on the rail would span just that
   * one row and force it to grow to the rail's full height, shoving every
   * later, auto-placed row (header included, since only fully-definite
   * items are placed before auto-placed ones) down below it. Three explicit
   * rows here is what makes the rail's span land on all three.
   */
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.masthead {
  grid-row: 1;
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  /* --gold-deep, not --gold: plain gold on white is 2.4:1 and unreadable even
     at this size. The deep tone is the one the brand file marks as safe to
     read, and it inverts correctly in dark. */
  color: var(--gold-deep);
  letter-spacing: -0.015em;
  text-decoration: none;
}

/* The single gold detail in the header. One accent, not three. */
/* Was a plain gold dot. The plane says what the product is; the dot did not.
   Rotated 45deg so it climbs rather than flying flat. */
.wordmark-plane {
  width: 20px; height: 20px;
  fill: var(--gold);
  align-self: center;
  flex: none;
  transform: rotate(45deg);
}

.wordmark .tagline {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--ink-muted);
  color: var(--ink-muted);
}

.masthead .spacer { flex: 1; }

/* ── Journey stepper ────────────────────────────────────────────────────── */

.stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5) 0;
}

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
}

.step .n {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.step[aria-current='step'] {
  background: var(--paper);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.step[aria-current='step'] .n { background: var(--gold); color: var(--ink); }

.step[data-done='true'] { color: var(--ink-soft); }
.step[data-done='true'] .n { background: var(--gold-soft); color: var(--gold-deep); }

.step-sep { color: var(--ink-faint); }

/* Which half of "Choose your flight" is on screen — Outward / Return, or
   "Flight 2 of 4". Quieter than the label it qualifies, and separated by a
   hairline rather than punctuation so it reads as a caption, not a second step. */
.step-detail {
  margin-left: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 1px solid var(--line-strong);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  /* The numbers and the current step's detail survive; the other labels go.
     Three words per step will not fit beside a sub-label on a phone. */
  .step:not([aria-current='step']) .step-label { display: none; }
}

/* ── Main column ────────────────────────────────────────────────────────── */

.main {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;               /* lets wide children scroll instead of stretching the grid */
  padding: var(--sp-5);
  max-width: var(--content-max);
  width: 100%;
}

/*
  "Already sent us a request?  Check its status" — under the search form.

  Quiet on purpose. It is for the minority of visitors who arrived having already
  finished, and it must not compete with the search button two lines above it.
  Centred so it reads as a footnote to the form rather than a field of it.
*/
.check-request {
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  margin: var(--sp-5) 0 0;
}
.check-request a {
  color: var(--gold-deep);   /* the only gold safe to read — see tokens.css */
  font-weight: 500;
}

/* ── The signature ──────────────────────────────────────────────────────────
   What made this and which version, at the foot of the page.

   `grid-column: 1`, not `1 / -1`: the second column is the assistant rail, a
   full-height panel the customer is mid-conversation with, and a footer running
   underneath it would be a rule drawn across the bottom of a chat.

   It carries no border. The dashboard's footer has one because a working screen
   above it ends in tables and needs a line to stop; here the last thing above is
   usually a card with its own edges, and a second rule under it reads as a
   second box. Quiet is the whole brief: the customer is here to find a flight. */
.app-foot {
  grid-row: 3;
  grid-column: 1;
  max-width: var(--content-max);
  width: 100%;
  padding: var(--sp-5);
  color: var(--ink-muted);
  font-size: var(--text-xs);
}
.app-ver {
  /* A version is a build stamp, not prose — and tabular figures stop the digits
     shuffling sideways when 1.1.0 becomes 1.11.0. */
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.page-title {
  margin-bottom: var(--sp-2);
}
.page-intro {
  color: var(--ink-soft);
  margin-bottom: var(--sp-5);
  max-width: 62ch;
}

/* ── Assistant rail ─────────────────────────────────────────────────────── */

.rail {
  grid-column: 2;
  /* Explicit, because the rail is appended to `.shell` last (see
     agent/rail.js), after `.main` and `.app-foot`. Left to auto-placement,
     grid's row cursor has already advanced past those rows by the time the
     rail arrives, so it lands in whatever row is next — near the footer,
     below the fold — instead of spanning the full column beside the form.
     Spanning "1 / -1" only reaches header-to-footer because `.shell` now
     declares `grid-template-rows` explicitly — against an implicit grid,
     -1 resolves to the single explicit row and the rail would instead
     force that one row to its own full height, pushing the header down. */
  grid-row: 1 / -1;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--line);
}

.rail-head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--gold-wash);
}

.rail-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}

/* Horizontal — flying level, beside the label rather than climbing out of it. */
.rail-plane {
  width: 16px; height: 16px;
  color: var(--gold);
  flex: none;
  transform: rotate(90deg);
}

.rail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.rail-foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}

/* Box and Send on one line. The button is square and holds its width so the
   composer does not reflow as the placeholder is replaced by typing. */
.rail-compose {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.rail-compose .input { flex: 1; min-width: 0; }
.rail-send {
  flex: none;
  width: var(--tap-min);
  display: grid;
  place-items: center;
  font-size: var(--text-lg);
  line-height: 1;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/**
 * Below 1080px the rail stops being a column and becomes a bottom sheet.
 *
 * It must never become a modal that covers the results: the entire point is
 * that the customer can see what they are asking about while they ask.
 */
@media (max-width: 1080px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .rail {
    grid-column: 1;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    height: min(58vh, 460px);
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(100% - 56px));
    transition: transform 180ms ease;
    z-index: 30;
  }
  .rail[data-open='true'] { transform: translateY(0); }

  /* The grab handle doubles as the "Ask" tab when closed. */
  .rail-head { cursor: pointer; background: var(--paper); }

  /* Space so the closed sheet never hides the last result. */
  .main { padding-bottom: calc(56px + var(--sp-6)); }

  /* The footer is now the last thing on the page, so it needs the same
     clearance. `.main` keeps its own: the signature is hidden until the server
     answers, and the results must clear the sheet whether it appears or not. */
  .app-foot { padding-bottom: calc(56px + var(--sp-5)); }
}

@media (max-width: 640px) {
  .masthead { padding: 0 var(--sp-4); }
  .wordmark .tagline { display: none; }
  .main, .stepper { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .app-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* Print: the rail is a conversation, not a document. */
@media print {
  .rail, .masthead, .stepper { display: none; }
  /* Deliberate: paper is white whatever the screen theme is. */
  body { background: #fff; }
}