/* Readiness page — mobile UX fix (client request, 2026-05-16).
   NOT part of the signed-off design CSS; loaded AFTER readiness.css so it
   wins, scoped to the Readiness page + mobile only.

   The signed-off CSS sets `.progress-side { order:-1 }` at <=980px, which
   pushes the score/progress panel ABOVE the question on mobile — so people
   couldn't see their result update after answering. This restores natural
   DOM order on mobile: question first, result/score directly below it. */

/* The whole Readiness page is a dark navy surface (Round 3 "full D4 dark
   surface"), but the signed-off CSS only made the HEADER ghost button light.
   Generic .btn-ghost stayed navy text + navy border on navy => invisible
   until hover (e.g. "How scoring works", "See what's missing", "Follow on
   Instagram"). Promote every ghost button on the dark page to the light
   treatment, matching the header/footer ghost styling. */
body.readiness-page .btn-ghost {
  color: var(--paper);
  border-color: rgba(255,255,255,.7);
}
body.readiness-page .btn-ghost:hover {
  background: var(--paper);
  color: var(--navy);
  border-color: var(--paper);
}

@media (max-width: 980px) {
  body.readiness-page .quiz-stage   { order: 0; }
  body.readiness-page .progress-side { order: 1; }

  /* The "ghost stack" is a desktop decorative flourish (aria-hidden,
     pointer-events:none) that previews the next 3 questions behind the
     active card. It's position:relative so on mobile it sits IN FLOW
     between the question and the result, pushing the score ~800px down —
     so users still couldn't see their result after answering. Hide it on
     mobile so the score panel sits directly under the question. No
     functional impact: the quiz JS still advances normally. */
  body.readiness-page .ghost-stack { display: none; }
}