/* ===================================================================
   reference/quiz-question.css

   Per-recipe component styles for the quiz-question variants
   (single-select, text-input). Loaded by:
     - the standalone recipe files at reference/quiz-question/<variant>.html
     - the iframe-based index at reference/quiz-question.html (via the
       embedded iframes, which means the host doc itself only needs
       reference-scaffold.css; this file rides along with each iframe)

   Token discipline: every value resolves to var(--wag-*) except the
   `#ffffff` input background, which is defined that way in DESIGN.md.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Quiz/survey screens use a pure-white surface (matches Reference's
     live clinical survey, e.g. /survey/basicHeight). Other surface
     treatments — interstitials, checkout, plan-select — keep the
     cream var(--wag-color-surface). */
  background: #ffffff;
  color: var(--wag-color-ink);
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  font-weight: var(--wag-typography-body-md-font-weight);
  line-height: var(--wag-typography-body-md-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Page chrome ---------- */

.wag-page {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--wag-spacing-md) var(--wag-spacing-gutter) var(--wag-spacing-xl);
}

.wag-chrome {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: var(--wag-spacing-sm);
  margin-bottom: var(--wag-spacing-md);
  min-height: 24px;
}

.wag-back {
  grid-column: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--wag-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wag-back:focus-visible {
  outline: 2px solid var(--wag-color-primary);
  outline-offset: 4px;
  border-radius: var(--wag-rounded-sm);
}

.wag-back svg {
  width: 18px;
  height: 16px;
  display: block;
}

.wag-eyebrow {
  grid-column: 2;
  margin: 0;
  text-align: center;
  color: var(--wag-component-eyebrow-label-text-color);
  font-family: var(--wag-component-eyebrow-label-font-family);
  font-size: var(--wag-component-eyebrow-label-font-size);
  font-weight: var(--wag-component-eyebrow-label-font-weight);
  line-height: var(--wag-component-eyebrow-label-line-height);
  letter-spacing: var(--wag-component-eyebrow-label-letter-spacing);
  text-transform: uppercase;
}

/* ---------- Progress bar (segmented) ---------- */

.wag-progress {
  display: flex;
  gap: var(--wag-spacing-xs);
  margin: 0 0 var(--wag-spacing-xl);
  padding: 0;
  list-style: none;
}

.wag-progress-segment {
  flex: 1;
  height: var(--wag-component-progress-segment-active-height);
  border-radius: var(--wag-component-progress-segment-active-rounded);
  background: var(--wag-component-progress-segment-upcoming-background-color);
  overflow: hidden;
  position: relative;
}

.wag-progress-segment--complete {
  background: var(--wag-component-progress-segment-complete-background-color);
}

.wag-progress-segment--active {
  background: var(--wag-component-progress-segment-upcoming-background-color);
}

.wag-progress-segment--active .wag-progress-segment-fill {
  position: absolute;
  inset: 0;
  width: 60%;
  background: var(--wag-component-progress-segment-active-background-color);
  border-radius: inherit;
  animation: wag-segment-fill 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wag-segment-fill {
  from { width: 0%; }
  to   { width: 60%; }
}

/* ---------- Question block ---------- */

.wag-question {
  margin: 0;
  padding: 0;
}

.wag-question h1 {
  margin: 0 0 var(--wag-spacing-lg);
  font-family: var(--wag-typography-headline-md-font-family);
  font-size: var(--wag-typography-headline-md-font-size);
  /* Match Reference's live clinical survey: question titles are regular
     weight (400), not bold. Cleaner, less shouty than the token's
     default headline-md weight of 700. */
  font-weight: 400;
  line-height: var(--wag-typography-headline-md-line-height);
  color: var(--wag-color-ink);
  text-wrap: wrap;
}

.wag-question h1:has(+ h2) {
  margin-bottom: var(--wag-spacing-sm);
}

.wag-question h2 {
  margin: 0 0 var(--wag-spacing-lg);
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  font-weight: var(--wag-typography-body-md-font-weight);
  line-height: var(--wag-typography-body-md-line-height);
  color: var(--wag-component-body-text-secondary-text-color);
  text-wrap: wrap;
}

/* ---------- Single-select option stack ---------- */

.wag-options {
  display: flex;
  flex-direction: column;
  gap: var(--wag-spacing-sm);
}

.wag-options button {
  display: block;
  width: 100%;
  margin: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color 120ms ease-out;
}

.wag-options button[data-selected="false"] {
  background: var(--wag-component-quiz-option-background-color);
  color: var(--wag-component-quiz-option-text-color);
  /* 2px solid border same color as the fill (matches Reference's live
     option spec). The matching color makes the border invisible
     in the default state but reserves the layout space so a
     selected/focus state can swap the border color (e.g., to
     teal) without shifting other pills. */
  border: 2px solid var(--wag-component-quiz-option-background-color);
  border-radius: var(--wag-component-quiz-option-rounded);
  padding: var(--wag-component-quiz-option-padding);
  font-family: var(--wag-component-quiz-option-font-family);
  font-size: var(--wag-component-quiz-option-font-size);
  font-weight: var(--wag-component-quiz-option-font-weight);
  line-height: var(--wag-component-quiz-option-line-height);
}

.wag-options button[data-selected="false"]:hover,
.wag-options button[data-selected="false"]:focus-visible {
  background: var(--wag-color-outline);
  outline: none;
}

.wag-options button[data-selected="false"]:focus-visible {
  box-shadow: 0 0 0 2px var(--wag-color-primary);
}

.wag-options button[data-selected="true"] {
  background: var(--wag-component-quiz-option-selected-background-color);
  color: var(--wag-component-quiz-option-selected-text-color);
  border: 2px solid var(--wag-component-quiz-option-selected-background-color);
  border-radius: var(--wag-component-quiz-option-selected-rounded);
  padding: var(--wag-component-quiz-option-selected-padding);
  font-family: var(--wag-component-quiz-option-selected-font-family);
  font-size: var(--wag-component-quiz-option-selected-font-size);
  font-weight: var(--wag-component-quiz-option-selected-font-weight);
  line-height: var(--wag-component-quiz-option-selected-line-height);
}

.wag-question { animation: wag-page-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.wag-options button { animation: wag-page-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.wag-options button:nth-child(1) { animation-delay: 120ms; }
.wag-options button:nth-child(2) { animation-delay: 200ms; }
.wag-options button:nth-child(3) { animation-delay: 280ms; }
.wag-options button:nth-child(4) { animation-delay: 360ms; }

@keyframes wag-page-enter {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ---------- Text-input variant ---------- */

.wag-input-block {
  display: flex;
  flex-direction: column;
  gap: var(--wag-spacing-sm);
}

.wag-input-block label {
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  font-weight: var(--wag-typography-body-md-font-weight);
  line-height: var(--wag-typography-body-md-line-height);
  color: var(--wag-component-body-text-secondary-text-color);
}

.wag-input-block input {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: var(--wag-component-input-text-background-color);
  color: var(--wag-component-input-text-text-color);
  border: 1px solid var(--wag-color-outline);
  border-radius: var(--wag-component-input-text-rounded);
  padding: var(--wag-component-input-text-padding);
  font-family: var(--wag-component-input-text-font-family);
  font-size: var(--wag-component-input-text-font-size);
  font-weight: var(--wag-component-input-text-font-weight);
  line-height: var(--wag-component-input-text-line-height);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.wag-input-block input:focus {
  outline: none;
  border-color: var(--wag-color-primary);
  box-shadow: 0 0 0 2px var(--wag-color-primary-soft);
}

.wag-cta {
  margin: var(--wag-spacing-lg) 0 0;
  cursor: pointer;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--wag-component-button-primary-background-color);
  color: var(--wag-component-button-primary-text-color);
  border-radius: var(--wag-component-button-primary-rounded);
  padding: var(--wag-component-button-primary-padding);
  font-family: var(--wag-component-button-primary-font-family);
  font-size: var(--wag-component-button-primary-font-size);
  font-weight: var(--wag-component-button-primary-font-weight);
  line-height: var(--wag-component-button-primary-line-height);
  transition: background-color 120ms ease-out, transform 60ms ease-out;
}

.wag-cta:hover,
.wag-cta:focus-visible {
  background: var(--wag-component-button-primary-hover-background-color);
  outline: none;
}

.wag-cta:active { transform: translateY(1px); }

.wag-cta[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
  transform: none;
}

.wag-link-escape {
  display: block;
  margin: var(--wag-spacing-md) 0 0;
  text-align: center;
  color: var(--wag-color-ink);
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- State combobox (used by the 02-state compliance gate)
   Searchable text-input dropdown — visually + behaviorally a direct
   clone of .breed-combo in checkout.css so the two pickers feel like
   the same component. Structure:
     .state-combo                    (wrapper)
       > .state-combo__shell         (relative — anchors the panel)
         > .state-combo__input       (text input, role=combobox)
         > .state-combo__caret       (chevron)
         > .state-combo__list        (absolute, role=listbox)
           > .state-combo__option × N
       > <input type="hidden">       (mirror — holds committed value)
   The wrapper sits inside the existing .wag-input-block so the
   label above it picks up the same styling as text-input steps. */

.state-combo {
  display: block;
}

.state-combo__shell {
  position: relative;
}

.state-combo__input {
  width: 100%;
  box-sizing: border-box;
  background: var(--wag-component-input-text-background-color);
  color: var(--wag-component-input-text-text-color);
  border: 1px solid var(--wag-color-outline);
  border-radius: var(--wag-component-input-text-rounded);
  padding: var(--wag-component-input-text-padding);
  padding-right: 40px;
  font-family: var(--wag-component-input-text-font-family);
  font-size: var(--wag-component-input-text-font-size);
  font-weight: var(--wag-component-input-text-font-weight);
  line-height: var(--wag-component-input-text-line-height);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
  appearance: none;
  -webkit-appearance: none;
}

.state-combo__input::placeholder {
  color: var(--wag-component-body-text-secondary-text-color);
  opacity: 0.65;
}

.state-combo__input:focus {
  outline: none;
  border-color: var(--wag-color-primary);
  box-shadow: 0 0 0 1px var(--wag-color-primary);
}

.state-combo__caret {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--wag-color-ink);
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: transform 150ms ease-out;
}

.state-combo__input[aria-expanded="true"] ~ .state-combo__caret {
  transform: translateY(-50%) rotate(180deg);
}

.state-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--wag-color-surface-card-white, #fff);
  border: 1px solid var(--wag-color-outline);
  border-radius: var(--wag-rounded-md, 8px);
  box-shadow:
    0 8px 20px -8px rgba(15, 23, 42, 0.18),
    0 2px 4px -2px rgba(15, 23, 42, 0.08);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.state-combo__list::-webkit-scrollbar {
  display: none;
}

.state-combo__option {
  padding: 10px 16px;
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  line-height: 1.35;
  color: var(--wag-color-ink);
  cursor: pointer;
  user-select: none;
}

.state-combo__option:hover,
.state-combo__option.is-active {
  background: var(--wag-color-surface, #f6f3ec);
}

.state-combo__empty {
  padding: 10px 16px;
  font-family: var(--wag-typography-body-md-font-family);
  font-size: var(--wag-typography-body-md-font-size);
  line-height: 1.4;
  color: var(--wag-component-body-text-secondary-text-color);
  list-style: none;
}

/* ---------- Checkbox row (used by the state-select consent gate) ---
   Hides the native <input>, replaces it with a custom 22×22 box that
   gets a coral check when :checked. The whole row is a <label> so
   clicking the text or the box toggles the input. */

.wag-checkbox {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: flex-start;
    margin-top: var(--wag-spacing-md);
    cursor: pointer;
    color: #191717;
    font-family: var(--wag-typography-body-md-font-family);
    font-size: var(--wag-typography-body-md-font-size);
    line-height: var(--wag-typography-body-md-line-height);
}

.wag-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.wag-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--wag-color-outline);
  border-radius: 6px;
  background: var(--wag-component-input-text-background-color);
  color: transparent;
  transition: background-color 120ms ease-out, border-color 120ms ease-out,
              color 120ms ease-out;
  flex-shrink: 0;
  margin-top: 1px;
}

.wag-checkbox__box svg {
  width: 14px;
  height: 14px;
}

.wag-checkbox input[type="checkbox"]:checked + .wag-checkbox__box {
  background: var(--wag-color-accent-coral, #f97316);
  border-color: var(--wag-color-accent-coral, #f97316);
  color: #fff;
}

.wag-checkbox input[type="checkbox"]:focus-visible + .wag-checkbox__box {
  box-shadow: 0 0 0 2px var(--wag-color-primary-soft);
  border-color: var(--wag-color-primary);
}

.wag-checkbox__label a {
  color: inherit;
  text-decoration: underline;
}

.wag-checkbox__label a:hover,
.wag-checkbox__label a:focus-visible {
  color: var(--wag-color-primary);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wag-question,
  .wag-options button,
  .wag-progress-segment--active .wag-progress-segment-fill {
    animation: none !important;
  }
  .wag-options button { opacity: 1; transform: none; }
  .wag-progress-segment--active .wag-progress-segment-fill { width: 60%; }
}