/**
 * The Vitality Drain Quiz popup.
 *
 * Built on <dialog> + showModal() so the focus trap, Esc-to-close and inert
 * background come from the browser rather than from hand-rolled JS.
 */

.c-quiz {
  width: min(100% - 2rem, 40rem);
  max-width: none;
  max-height: min(92vh, 60rem);
  padding: 0;
  border: 0;
  background: var(--color-surface-raised);
  box-shadow: 0 30px 80px rgb(44 33 26 / .45);
  color: var(--color-body);
}

/* A copper hairline across the top, matching the editorial page heroes. */
.c-quiz::after {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--color-accent) 0 40%,
    var(--color-earth-600) 40% 70%,
    var(--color-olive-600) 70% 100%
  );
  content: "";
  pointer-events: none;
}

.c-quiz::backdrop {
  background: rgb(44 33 26 / .72);
  backdrop-filter: blur(3px);
}

.c-quiz__panel {
  --quiz-pad: clamp(var(--space-6), 4vw, var(--space-10));
  --quiz-pad-top: var(--quiz-pad);

  position: relative;
  overflow-y: auto;
  max-height: inherit;
  padding: var(--quiz-pad-top) var(--quiz-pad) var(--quiz-pad);
  /* Firefox/standard. The WebKit rules below cover Chrome, Edge and Safari,
     whose default chrome-grey scrollbar with stepper arrows sits badly
     against the warm palette. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-tan-500) var(--color-surface);
}

.c-quiz__panel::-webkit-scrollbar {
  width: 12px;
}

.c-quiz__panel::-webkit-scrollbar-track {
  background: var(--color-surface);
}

.c-quiz__panel::-webkit-scrollbar-thumb {
  /* The border lets the track show through either side, so the thumb reads
     as a slim bar rather than filling the full gutter width. */
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-tan-500);
}

.c-quiz__panel::-webkit-scrollbar-thumb:hover {
  background: var(--color-earth-600);
}

/* Steppers are a Windows-only affordance and look out of place here. */
.c-quiz__panel::-webkit-scrollbar-button {
  display: none;
}

/* The long-form result earns a wider measure than the question steps. */
.c-quiz.is-result {
  width: min(100% - 2rem, 48rem);
}

.c-quiz__close {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  right: var(--space-4);
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-pill);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  cursor: pointer;
  place-items: center;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.c-quiz__close svg {
  width: 1rem;
  height: 1rem;
}

.c-quiz__close:hover,
.c-quiz__close:focus-visible {
  background: var(--color-ink);
  color: var(--color-white);
}

/* On the result step the button sits over the dark head band. */
.c-quiz.is-result .c-quiz__close {
  border-color: rgb(212 176 138 / .45);
  background: rgb(44 33 26 / .55);
  color: var(--color-page);
}

.c-quiz.is-result .c-quiz__close:hover,
.c-quiz.is-result .c-quiz__close:focus-visible {
  border-color: var(--color-tan-400);
  background: var(--color-tan-400);
  color: var(--color-ink);
}

/* ── Progress ─────────────────────────────────────────────────────── */

.c-quiz__progress {
  overflow: hidden;
  height: 3px;
  margin-bottom: var(--space-8);
  background: var(--color-border);
}

.c-quiz__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* ── Steps ────────────────────────────────────────────────────────── */

.c-quiz__step:focus {
  outline: none;
}

.c-quiz__step > * + * {
  margin-top: var(--space-4);
}

.c-quiz__eyebrow {
  color: var(--color-accent-text);
}

.c-quiz__title {
  font-size: clamp(1.6rem, 3vw + 1rem, 2.25rem);
  line-height: 1.1;
}

.c-quiz__standfirst {
  max-width: none;
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.5;
}

.c-quiz__body {
  max-width: none;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

.c-quiz__start {
  margin-top: var(--space-6);
}

.c-quiz__count {
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.c-quiz__question {
  font-size: clamp(1.35rem, 2vw + 1rem, 1.75rem);
  line-height: 1.2;
}

/* ── Options ──────────────────────────────────────────────────────── */

.c-quiz__options {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.c-quiz__option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-input);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.45;
  text-align: left;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

/* Takes the remaining width so a long answer wraps beside the marker
   rather than pushing it out of the button. */
.c-quiz__option-label {
  flex: 1;
}

.c-quiz__option-marker {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: .04em;
  place-items: center;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.c-quiz__option:hover,
.c-quiz__option:focus-visible,
.c-quiz__option.is-selected {
  border-color: var(--color-accent);
  background: var(--color-surface-soft);
  transform: translateX(2px);
}

.c-quiz__option:hover .c-quiz__option-marker,
.c-quiz__option:focus-visible .c-quiz__option-marker,
.c-quiz__option.is-selected .c-quiz__option-marker {
  border-color: var(--color-accent-fill);
  background: var(--color-accent-fill);
  color: var(--color-white);
}

.c-quiz__back {
  margin-top: var(--space-6);
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.c-quiz__back:hover,
.c-quiz__back:focus-visible {
  color: var(--color-accent-text);
}

/* ── Email capture ────────────────────────────────────────────────── */

.c-quiz__bullets {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.c-quiz__bullets li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-text-secondary);
}

.c-quiz__bullets li::before {
  position: absolute;
  left: 0;
  color: var(--color-olive-600);
  content: "✓";
  font-weight: 800;
}

.c-quiz__label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.c-quiz__form {
  margin-top: var(--space-6);
}

.c-quiz__field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-quiz__field-row input[type="email"] {
  min-width: 0;
  flex: 1 1 14rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-input);
  background: var(--color-white);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
}

.c-quiz__field-row input[type="email"]:focus-visible {
  border-color: var(--color-accent);
}

/* Never shrink below the label width, so "Show me my result" stays on one
   line while the email input takes the slack. */
.c-quiz__submit {
  flex: 0 0 auto;
}

.c-quiz__status {
  min-height: 1.25rem;
  margin-top: var(--space-3);
  font-size: var(--text-small);
}

.c-quiz__status[data-state="error"] { color: var(--color-danger-600); }
.c-quiz__status[data-state="pending"] { color: var(--color-text-muted); }

.c-quiz__note {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  line-height: 1.55;
}

/* ── Result ───────────────────────────────────────────────────────── */

/* Full-bleed inside the padded panel: the negative margin cancels
   --quiz-pad on three sides so the band meets the dialog edges. */
.c-quiz__result-head {
  margin: calc(var(--quiz-pad-top) * -1) calc(var(--quiz-pad) * -1) var(--space-8);
  padding: calc(var(--quiz-pad-top) + var(--space-2)) var(--quiz-pad) var(--quiz-pad);
  background:
    radial-gradient(120% 150% at 12% 0%, var(--color-dark-raised), transparent 62%),
    var(--color-dark);
  color: var(--color-page);
}

.c-quiz__result-eyebrow {
  color: var(--color-tan-400);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.c-quiz__result-name {
  margin-top: var(--space-3);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw + 1rem, 2.875rem);
  font-weight: 800;
  line-height: 1.02;
}

.c-quiz__result-headline {
  position: relative;
  max-width: none;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  color: rgb(245 237 226 / .88);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.4;
}

.c-quiz__result-headline::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3px;
  background: var(--color-accent);
  content: "";
}

.c-quiz__result-body > * + * {
  margin-top: var(--space-4);
}

/* The opening line of the diagnosis, set larger than the rest. */
.c-quiz__lede {
  max-width: none;
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: 1.55;
}

.c-quiz__signs-label {
  max-width: none;
  margin-top: var(--space-6);
  color: var(--color-ink);
  font-weight: 700;
}

.c-quiz__signs {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-quiz__signs li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--color-text-secondary);
}

.c-quiz__signs li::before {
  position: absolute;
  top: .55em;
  left: .25rem;
  width: .4rem;
  height: .4rem;
  background: var(--color-accent);
  content: "";
}

.c-quiz__action {
  margin-top: var(--space-6);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
}

.c-quiz__action > * + * {
  margin-top: var(--space-3);
}

.c-quiz__action-title {
  color: var(--color-accent-text);
}

.c-quiz__action-lead {
  max-width: none;
  color: var(--color-ink);
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.45;
}

/* Closes the result as its own band rather than another paragraph — the
   negative inline margin cancels the panel padding so it reaches the edges. */
.c-quiz__offer {
  margin: clamp(var(--space-8), 4vw, var(--space-10)) calc(var(--quiz-pad) * -1) calc(var(--quiz-pad) * -1);
  padding: clamp(var(--space-7), 4vw, var(--space-10)) var(--quiz-pad);
  border-top: 3px solid var(--color-accent);
  background: var(--color-surface);
}

.c-quiz__offer > * + * {
  margin-top: var(--space-3);
}

.c-quiz__offer-heading {
  font-size: var(--text-h3);
}

.c-quiz__offer-cta {
  margin-top: var(--space-5);
}

/* ── Small screens ────────────────────────────────────────────────── */

@media (max-width: 36rem) {
  .c-quiz,
  .c-quiz.is-result {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border: 0;
  }

  .c-quiz__panel {
    --quiz-pad-top: var(--space-12);

    max-height: 100dvh;
  }

  .c-quiz__field-row button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-quiz__progress-bar,
  .c-quiz__option {
    transition: none;
  }
}