/* FBCing — /start/ qualification gate.
   Loads after /styles.css, which supplies the tokens, self-hosted IBM Plex
   Sans, the shell, the type scale and .button. This file adds only what the
   gate needs: the top band, the question and its answer cards, the Back
   control, the RED destination states and the no-JavaScript fallback.
   No inline styles anywhere; the CSP's style-src 'self' is unchanged. */

/* ---------- PAGE ----------
   Sticky-footer layout so short states (a single RED message) still hold
   the page at viewport height and the top band never floats. */

.gate-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.gate-main {
  flex: 1 0 auto;
  padding-block: var(--gap-rule-content) var(--gap-section);
}

/* ---------- TOP BAND ----------
   The hero's Ink band, reduced to a strip carrying the wordmark. Same mark,
   same 136px mobile width as the homepage. Not a link: RED destinations
   carry exactly one link, the Back to FBCing return. */

.gate-top {
  background-color: var(--ink);
  color: var(--paper);
  padding-block: var(--s-3);
}

.gate-mark {
  display: inline-block;
  line-height: 0;
}

.gate-mark svg {
  display: block;
  width: 136px;
  height: auto;
}

/* ---------- NAV ROW ----------
   Back on the left, progress on the right. The row is present on every
   question so the question heading does not move when Back appears on Q2. */

.gate-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 44px;
  max-width: var(--measure-body);
  margin-block-end: var(--gap-heading-rule);
}

.gate-nav[hidden] {
  display: none;
}

.gate-back {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 10px 12px 10px 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--slate);
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.gate-back:hover {
  color: var(--ink);
}

.gate-back:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

.gate-back[hidden] {
  display: none;
}

.gate-progress {
  margin: 0;
  margin-inline-start: auto;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--slate);
}

/* ---------- QUESTION ---------- */

.gate-step[hidden] {
  display: none;
}

.gate-q {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  margin-block-end: var(--gap-rule-content);
  max-width: var(--measure-body);
  color: var(--ink);
  text-wrap: balance;
  hyphens: none;
}

.gate-q:focus {
  outline: none;
}

/* ---------- ANSWER CARDS ----------
   One column, full measure, stacked with a 12px gap. The whole card is a
   button, so the entire surface is the tap target: 64px minimum height,
   which clears the 44pt iOS floor with room for a second line of text.
   Selected state: Ledger fill, Paper text, the same pairing as .button, so
   the tap reads as a commitment before the next question appears. */

.gate-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--measure-body);
}

.card {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 18px 20px;
  min-height: 64px;
  border: 1px solid var(--mist);
  border-radius: 4px;
  background-color: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.card:hover {
  border-color: var(--slate);
}

.card:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

.card[aria-pressed="true"],
.card.is-selected {
  background-color: var(--ledger);
  border-color: var(--ledger);
  color: var(--paper);
}

/* While one card is committing, the others stand down. */
.gate[data-busy="true"] .card:not(.is-selected) {
  color: var(--slate);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

/* ---------- HANDOFF ---------- */

.gate-handoff-link {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gate-handoff-link:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

/* ---------- RED DESTINATIONS ----------
   The message in the homepage body voice (18px / 1.5), a rule beneath it,
   and a single plain link home. Nothing else on the screen. */

.gate-red__msg {
  font-size: 20px;
  line-height: 1.5;
  max-width: var(--measure-body);
  padding-block-end: var(--gap-rule-content);
  border-block-end: 1px solid var(--rule);
}

.gate-red__msg:focus {
  outline: none;
}

.gate-return {
  display: inline-block;
  margin-block-start: var(--gap-rule-content);
  padding-block: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gate-return:hover {
  color: var(--ledger);
}

.gate-return:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

/* ---------- NO-JAVASCRIPT FALLBACK ----------
   Rendered by default; gate.js sets hidden on it. Message, then the direct
   booking button. */

.gate-nojs[hidden] {
  display: none;
}

.gate-nojs p {
  max-width: var(--measure-body);
}

.gate-nojs .button {
  margin-block-start: var(--gap-rule-content);
}

.gate-nojs .button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- TYPE BELOW 640px ----------
   Question at 24px so a five-word question holds to two lines at 320px;
   cards at 17px matching the homepage paragraph size at this width. */

@media (max-width: 639.98px) {
  .gate-q         { font-size: 24px; }
  .card           { font-size: 17px; padding: 16px 18px; }
  .gate-red__msg  { font-size: 19px; }
}

/* ---------- PRINT ----------
   The page is a form; print shows whatever state is on screen. Keep the
   top band flat like the homepage print rule does for Ink sections. */

@media print {
  .gate-top {
    background-color: transparent;
  }
  .gate-back {
    display: none;
  }
}