/* ============================================================
   Pick One · Quiz Refinement Layer
   ------------------------------------------------------------
   Loaded after quiz.css and pick-one-ds.css.

   This refinement layer enforces:
     1 · Container lock & centered viewport layout
     2 · Hero discipline (2-line headline, crisp CTA above fold)
     3 · Anti-slop: SVG icons replacing raw emojis
     4 · Smooth interactive option cards with 44px+ tap targets
     5 · High-contrast results card & ragged-right text flow
   ============================================================ */

/* ---------- 1 · Container & Layout Lock ---------------------- */
.quiz-page .wrap {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.quiz-page .quiz {
  min-height: calc(100vh - 16rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

/* The question screen is a flex child of .quiz, so without a width it
   shrank to its question text and every question rendered at a
   different width. Fill the row, then cap it (body.… outranks the
   shared body[class*="-page"] .wrap rule, which set 1280px). */
.quiz-page .quiz-question {
  width: 100%;
}

body.quiz-page .quiz-question__inner {
  max-width: 58rem;
}

/* ---------- 2 · Landing Screen & Hero Discipline ------------- */
.quiz-page .quiz-landing__inner {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.quiz-page .quiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--accent-coral-ink, #b8402d);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.quiz-page .quiz-landing__pre {
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted, #6e6b67);
  max-width: 48ch;
  margin: 0 auto 0.75rem;
}

.quiz-page .quiz-landing__head {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.028em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.quiz-page .quiz-landing__head-muted {
  display: block;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted, #6e6b67);
  margin-top: 0.5rem;
}

.quiz-page .quiz-landing__sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--body, #302f2e);
  max-width: 48ch;
  margin: 0 auto 2rem;
}

.quiz-page .quiz-landing__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
}

.quiz-page .quiz-landing__cta {
  padding-inline: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 1.0625rem;
  white-space: nowrap;
}

.quiz-page .quiz-landing__meta {
  font-size: 0.8125rem;
  color: var(--muted, #6e6b67);
}

/* ---------- 3 · Question Screen & Options --------------------- */
.quiz-page .quiz-progress-bar {
  margin-bottom: 2rem;
}

.quiz-page .quiz-progress-track {
  height: 6px;
  background: var(--border-card);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.quiz-page .quiz-progress-fill {
  height: 100%;
  background: var(--coral, #f06858);
  border-radius: var(--radius-full);
  transition: width 0.3s var(--ease);
}

.quiz-page .quiz-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted, #6e6b67);
}

.quiz-page .quiz-category-tag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral-ink, #b8402d);
}

.quiz-page .quiz-question-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1.75rem;
  text-align: start;
}

.quiz-page .quiz-options-grid {
  display: grid;
  gap: 0.875rem;
}

.quiz-page .quiz-option-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background-color 0.2s var(--ease);
  text-align: start;
  min-height: 3.5rem;
}

.quiz-page .quiz-option-card:hover {
  border-color: var(--coral, #f06858);
  transform: translateY(-2px);
  background-color: var(--terracotta-light, #fdeeeb);
}

.quiz-page .quiz-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--coral-ink, #b8402d);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.quiz-page .quiz-option-text {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--body, #302f2e);
}

/* ---------- 4 · Results Screen ------------------------------- */
.quiz-page .quiz-result-card {
  background: #ffffff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
}

.quiz-page .quiz-result-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1rem;
}

.quiz-page .quiz-result-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--coral-ink, #b8402d);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.quiz-page .quiz-breakthrough-box {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-md);
  background: var(--cream, #fef8ec);
  border: 1px solid var(--border-card);
}

.quiz-page .breakthrough-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-ink, #b8402d);
  margin-bottom: 0.5rem;
}

.quiz-page .quiz-unlock-card {
  background: #ffffff;
  border: 2px solid var(--coral, #f06858);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px -8px rgba(240, 104, 88, 0.22);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1.5rem;
}

.quiz-page .quiz-unlock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-peach, #fcece5);
  color: var(--coral-ink, #b8402d);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* The card is white now; quiz.css still colours its text for the old
   dark-green card (white title, pale-sage copy). */
.quiz-page .quiz-unlock-title {
  color: var(--ink, #1a1a1a);
}

/* The card is also .glass, and pick-one-ds.css sets text-align: start
   on headings inside .glass at (0,2,2); this has to outrank it. */
body.quiz-page .quiz-unlock-card .quiz-unlock-title {
  text-align: center;
}

.quiz-page .quiz-unlock-desc {
  color: var(--body, #302f2e);
}

/* ---------- 5 · Justified Text & Rivers Fix ------------------ */
.quiz-page :is(
  .quiz-landing__pre, .quiz-landing__sub, .quiz-landing__meta,
  .quiz-option-text, .quiz-question-title,
  .quiz-result-title, .quiz-result-lead, .quiz-result-paragraphs p,
  .quiz-breakthrough-box p, .quiz-unlock-desc, .quiz-proof-quote,
  .quiz-proof-author, .quiz-loading-sub
) {
  text-align: start;
  text-align-last: auto;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.quiz-page :is(.btn, button, .quiz-option-card) {
  cursor: pointer;
}

/* ============================================================
   Follow-up pass (Finn, iteration 58)
   ============================================================ */

/* The mobile menu here is the shared burger + drawer, same as every
   other page, so this page needs no wrap-to-second-row workaround. */