/*
 * The quiz only (DESIGN-SYSTEM.md section 8.5): one focal question per screen,
 * light answer cards that show their check from the icon sprite, a Next that
 * reads as muted until the screen has its answer, and a slide between steps.
 * The page sits in one centred column. Everything here is scoped to the quiz's
 * own card (.page-card) so the shared stylesheets keep their meaning.
 */

/* ---- the frame: one calm column, centred on wide screens ---------------- */

.page-card {
  max-width: 640px;
}

/* A legend does not contain its heading's bottom margin, so the question sat
   flush on the helper text under it. The legend carries the gap itself. */
.step legend {
  padding-bottom: var(--s-3);
}

.step legend h1 {
  margin-bottom: 0;
}

/* The step question is the one focal headline; it sits under a quiet meta line. */
.progress-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-3);
}

/* ---- answer cards: light, hairline, the whole card is the target -------- */

.page-card .choice {
  min-height: 56px;
  border: 1px solid var(--control-edge);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--elev-1);
  color: var(--ink);
}

.page-card .choice:hover {
  background: var(--brand-tint);
}

.page-card .choice:has(input:checked) {
  background: var(--brand-tint);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--elev-1);
}

/* The keyboard halo sits on the card, because the radio itself is invisible. */
.page-card .choice:has(input:focus-visible) {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--brand), 0 0 0 7px var(--focus);
}

.page-card .choice .choice-check {
  width: 24px;
  height: 24px;
  color: var(--brand);
}

/* The check sits at the right edge of the picked card, and only then. */
.choice .choice-check {
  margin-left: auto;
  opacity: 0;
}

.choice:has(input:checked) .choice-check {
  opacity: 1;
}

.choice:has(input:checked)::after {
  content: none;
}

/* ---- the privacy cue, under the choices --------------------------------- */

.privacy-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.privacy-line .icon {
  color: var(--brand);
}

/* ---- Next, muted until the screen has its answer ------------------------ */

#next[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: not-allowed;
  transform: none;
}

#next[aria-disabled="true"] .btn-arrow {
  background: var(--hairline-strong);
}

#next[aria-disabled="true"] .btn-arrow .icon {
  color: var(--ink-2);
}

/* ---- the call and text consent: a panel of its own, easy to scan -------- */

/* The words are the legal text, unchanged. Only the layout is: the agreement
   first, at body size, then each term on its own line, all of it always shown.
   The panel and the gap under it keep the text apart from the button. */
/* The contact step is the longest screen. The grid gap already spaces the
   fields, so the extra bottom margin each field carries is dropped here, and the
   heading is the h2 size: the button then sits within 1.6 screens on a phone. */
.step[data-step="6"] .fields .field {
  margin-bottom: 0;
}

.step[data-step="6"] h1 {
  font-size: var(--fs-h2);
}

#consent-row {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-input);
  background: var(--surface-2);
}

#consent-row[hidden] {
  display: none;
}

/* On a phone, and more so when the text is zoomed, every side pixel counts:
   the card and the consent panel give up a little padding so the long text
   wraps into fewer lines. */
@media (max-width: 480px) {
  .page-card {
    padding-inline: calc(var(--bezel) + var(--s-3));
  }

  #consent-row {
    padding: var(--s-3);
  }
}

/* The tick box and its short label share one row. The full text sits under
   it at the panel's whole width, so it never reads in a narrow column. */
.consent-check {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--tap);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-small);
  cursor: pointer;
}

#consent-text {
  display: grid;
  gap: var(--s-1);
  margin: 0;
}

/* The advisor card under the contact heading: it frames the phone ask. */
#trust-card .trust-card {
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  background: var(--surface-2);
}

#trust-card .trust-card .advisor-name {
  font-size: var(--fs-body);
}

#consent-text .consent-line {
  display: block;
}

#consent-text .consent-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

#consent-text .consent-term {
  color: var(--ink-2);
}

/* A slide between steps: 20px in from the side the visitor is heading
   toward. Going Back reverses it. Motion only, so it is off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  #quiz-form[data-motion="forward"] .step[data-active="true"] {
    animation: step-in-from-right var(--dur-2) var(--ease-out) both;
  }

  #quiz-form[data-motion="back"] .step[data-active="true"] {
    animation: step-in-from-left var(--dur-2) var(--ease-out) both;
  }

  @keyframes step-in-from-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes step-in-from-left {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}