/* =====================================================================
   START — onboarding quiz. Page-specific styles only.
   Shared components live in css/main.css (do not edit that file).
   ===================================================================== */

.quiz {
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) var(--section-y);
}

/* Progress header sits above the question and stays put while scrolling
   short screens. */
.quiz__header {
  margin-bottom: var(--space-8);
}

.quiz__form {
  position: relative;
}

/* Each question is one screen; only the active step is shown. */
.quiz-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: quiz-step-in var(--dur-slow) var(--ease-out);
}
.quiz-step__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-step__title {
  font-size: var(--fs-h2);
  outline: none;
}
.quiz-step__hint {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

@keyframes quiz-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Option layouts */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.quiz-options--tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.quiz-options--allergens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 560px) {
  .quiz-options--allergens { grid-template-columns: repeat(3, 1fr); }
}

.quiz-subhead {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-top: var(--space-2);
}

/* Numeric entry with a trailing unit (cm / kg / years) */
.quiz-number {
  position: relative;
  max-width: 16rem;
}
.quiz-number .input {
  padding-right: 4rem;
  font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums;
}
.quiz-number__unit {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-subtle);
  pointer-events: none;
}

/* Step navigation row */
.quiz-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.quiz-nav__spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Result screen
   --------------------------------------------------------------------- */
.quiz-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: quiz-step-in var(--dur-slow) var(--ease-out);
}
.quiz-result__eyebrow { justify-content: flex-start; }
.quiz-result__title { font-size: var(--fs-h1); outline: none; }
.quiz-result__restate {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.quiz-result__restate strong { color: var(--color-text); }

/* The recommended-plan card */
.result-card {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 620px) {
  .result-card { grid-template-columns: 240px 1fr; }
}
.result-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 620px) {
  .result-card__media { aspect-ratio: auto; height: 100%; min-height: 220px; }
}
.result-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}
.result-card__cat {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary);
}
.result-card__name { font-size: var(--fs-h2); margin-top: calc(var(--space-1) * -1); }
.result-card__tagline { color: var(--color-text-muted); }

/* Key stats grid (target + structure) */
.result-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.result-fact { display: flex; flex-direction: column; gap: 2px; }
.result-fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
/* Price on the match card — the per-day figure leads so it is the first
   number the user anchors on; the weekly total sits beside it and matches
   what checkout will show. */
.result-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.result-card__price-day {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
}
.result-card__price-week {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.result-fact__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.result-rationale {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--color-text);
}

.quiz-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quiz-result__escape {
  display: flex;
  justify-content: center;
}