/* ============================================================
 * 10-page-assessment.css — Health assessment (multi-step quiz)
 * ------------------------------------------------------------
 * Source: V14 assessment.html inline <style>, with shared rules
 * (brand-mark, topbar, menu, vignette, canvases, site-footer,
 *  global keyframes) removed — they live in 00-base.css.
 *
 * Scope:
 *   - main.assess             stage container
 *   - .step-stage             positioned wrapper around all .step nodes
 *   - .step / .step.is-current   stacked steps (only one visible at a time)
 *   - .step-eyebrow / .step-title / .step-body
 *   - .options / .option          quiz pills
 *   - .option.is-selected
 *   - .email-form / .field         email collection form
 *   - .email-submit
 *   - .progress / .progress-dot  bottom progress indicator
 *   - .back-btn                  bottom-left back button (visible after step 0)
 *   - .thank-actions             final CTA row
 *
 * .cta base class lives in 00-base.css.
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
   STAGE
   ───────────────────────────────────────────────────────────── */
main.assess {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14vh 4vw 14vh;
}

.step-stage {
  position: relative;
  width: 100%;
  max-width: 900px;
  min-height: 50vh;
}

/* ─────────────────────────────────────────────────────────────
   INDIVIDUAL STEP — only one is .is-current at a time
   ───────────────────────────────────────────────────────────── */
.step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    visibility 0s linear 0.35s;
  pointer-events: none;
  text-align: center;
}
.step.is-current {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* Typography */
.step-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 0.7vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(210,168,135,0.85);
}
.step-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 2.2vw, 40px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  max-width: 22em;
  animation: neonBreathSoft 6s ease-in-out infinite;
}
.step-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.17vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,248,235,0.85);
  max-width: 36em;
}

/* ─────────────────────────────────────────────────────────────
   OPTIONS (pill buttons)
   ───────────────────────────────────────────────────────────── */
.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8em 0.9em;
  max-width: 48em;
}
.option {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(12px, 0.91vw, 15px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,248,235,0.88);
  background: transparent;
  border: 1px solid rgba(255,240,220,0.42);
  border-radius: 999px;
  padding: 1em 2em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.option:hover {
  color: #fff;
  border-color: rgba(255,240,220,0.85);
  background: rgba(255,240,220,0.06);
  transform: translateY(-2px);
}
.option.is-selected {
  color: #1a0a04;
  background: rgba(255,245,225,0.96);
  border-color: rgba(255,245,225,0.96);
}
.option:focus { outline: none; }
.option:focus-visible { outline: 1px dashed rgba(255,240,220,0.45); outline-offset: 4px; }

/* ─────────────────────────────────────────────────────────────
   EMAIL FORM (final step before thanks)
   ───────────────────────────────────────────────────────────── */
.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8vh;
  width: 100%;
  max-width: 30em;
}
.email-form .field {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.17vw, 19px);
  font-weight: 300;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,240,220,0.3);
  padding: 0.85em 0.3em;
  text-align: center;
  transition: border-color 0.2s ease;
}
.email-form .field:focus { outline: none; border-bottom-color: rgba(255,240,220,0.9); }
.email-form .field::placeholder {
  color: rgba(255,240,220,0.45);
  font-style: italic;
  letter-spacing: 0.04em;
}
.email-submit { margin-top: 1.4vh; }

/* ─────────────────────────────────────────────────────────────
   PROGRESS DOTS (fixed bottom)
   ───────────────────────────────────────────────────────────── */
.progress {
  position: fixed;
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,240,220,0.22);
  transition: background 0.3s ease, transform 0.3s ease;
}
.progress-dot.is-done    { background: rgba(255,240,220,0.75); }
.progress-dot.is-current { background: rgba(255,240,220,0.95); transform: scale(1.4); }

/* ─────────────────────────────────────────────────────────────
   BACK BUTTON
   ───────────────────────────────────────────────────────────── */
.back-btn {
  position: fixed;
  bottom: 4vh;
  left: 3.2vw;
  z-index: 50;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(9.5px, 0.68vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,248,235,0.55);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.4em 0;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, color 0.2s ease;
}
.back-btn.is-visible { opacity: 1; pointer-events: auto; }
.back-btn:hover { color: #fff; }

/* ─────────────────────────────────────────────────────────────
   THANK-YOU ACTIONS ROW
   ───────────────────────────────────────────────────────────── */
.thank-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 1vh;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .step-title { font-size: clamp(14px, 4.5vw, 20px); letter-spacing: 0.06em; }
  .option { padding: 0.7em 1.2em; font-size: clamp(10px, 3vw, 13px); }
  main.assess { padding: 9vh 6vw 9vh; }
}

@media (max-height: 500px) and (orientation: landscape) {
  main.assess { padding: 10vh 4vw 8vh; }
  .step-stage { min-height: 30vh; }
  .step { gap: 2vh; }
  .step-title { font-size: clamp(14px, 2vw, 22px); }
  .step-body { font-size: clamp(11px, 1.4vw, 15px); }
  .option { padding: 0.5em 1em; font-size: clamp(10px, 1.2vw, 13px); }
  .progress { bottom: 2vh; }
  .back-btn { bottom: 2vh; }
}