/* ==========================================================================
   AI Readiness Quiz — styles (loaded only on quiz.html)
   ========================================================================== */
.quiz-main { display: flex; align-items: center; min-height: calc(100dvh - 68px); padding-block: var(--s-6); }
.quiz { max-width: 720px; margin-inline: auto; width: 100%; }

/* Progress */
.quiz-progress { margin-bottom: var(--s-4); }
.quiz-progress-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--seafoam); margin-bottom: 0.6rem; }
.quiz-bar { height: 4px; border-radius: 99px; background: rgba(240,237,232,0.15); overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--seafoam); border-radius: 99px; transition: width var(--dur) var(--ease); }

/* Question */
.quiz-q h2 { margin-bottom: var(--s-4); max-width: 24ch; }
.quiz-options { display: grid; gap: 0.75rem; }
.quiz-option {
  display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left;
  background: rgba(240,237,232,0.04); color: var(--salt);
  border: 1.5px solid rgba(240,237,232,0.18); border-radius: var(--radius);
  padding: 1rem 1.2rem; min-height: 56px; font: inherit; font-size: 1.02rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.quiz-option:hover { border-color: var(--seafoam); background: rgba(126,200,200,0.10); }
.quiz-option:active { transform: scale(0.99); }
.quiz-option.is-selected { border-color: var(--seafoam); background: rgba(126,200,200,0.16); }
.quiz-option .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--seafoam); flex: none; position: relative; }
.quiz-option.is-selected .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--seafoam); }

/* Controls */
.quiz-controls { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-4); gap: var(--s-2); }
.quiz-back { background: none; border: 0; color: var(--salt-55); font: inherit; padding: 0.6rem; }
.quiz-back:hover { color: var(--salt); }
.quiz-back[hidden] { visibility: hidden; }

/* Result */
.quiz-result { text-align: center; }
.quiz-score { font-family: var(--font-display); font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; color: var(--seafoam); }
.quiz-score small { font-size: 1.4rem; color: var(--salt-55); }
.quiz-tier { font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.8rem; color: var(--brass); margin-top: var(--s-2); }
.quiz-result h2 { margin-block: var(--s-2) var(--s-2); }
.quiz-result .lead { margin-inline: auto; color: var(--salt-70); }
.quiz-meter { height: 6px; border-radius: 99px; background: rgba(240,237,232,0.15); overflow: hidden; max-width: 360px; margin: var(--s-4) auto; }
.quiz-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--horizon), var(--seafoam)); border-radius: 99px; transition: width 700ms var(--ease); }
.quiz-result-cta { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.quiz-restart { background: none; border: 0; color: var(--salt-55); font: inherit; text-decoration: underline; padding: 0.5rem; }
.quiz-restart:hover { color: var(--salt); }
.quiz-honesty { max-width: 52ch; margin-inline: auto; font-size: 0.9rem; color: var(--salt-55); line-height: 1.5; }

/* Email gate */
.quiz-gate { text-align: center; }
.quiz-gate h2 { margin-bottom: var(--s-2); }
.quiz-gate .lead { margin-inline: auto; margin-bottom: var(--s-4); }
.quiz-email { display: flex; flex-direction: column; gap: 0.6rem; max-width: 420px; margin: 0 auto; }
.quiz-email input {
  width: 100%; min-height: 50px; padding: 0.8rem 1.1rem; font: inherit; font-size: 1rem;
  color: var(--salt); background: rgba(240,237,232,0.06);
  border: 1.5px solid rgba(240,237,232,0.25); border-radius: var(--radius);
}
.quiz-email .btn { width: 100%; justify-content: center; }
.quiz-email input::placeholder { color: var(--salt-55); }
.quiz-email input:focus { border-color: var(--seafoam); outline: none; }
.quiz-email-err { color: #e8a0a0; font-size: 0.88rem; margin-top: 0.8rem; }
.quiz-skip { display: inline-block; margin-top: var(--s-3); background: none; border: 0; color: var(--salt-55); font: inherit; text-decoration: underline; padding: 0.5rem; }
.quiz-skip:hover { color: var(--salt); }

/* Per-area breakdown on the result */
.quiz-breakdown { max-width: 460px; margin: var(--s-5) auto 0; text-align: left; }
.quiz-breakdown .eyebrow { text-align: center; }
.quiz-area { margin-bottom: var(--s-2); }
.quiz-area-top { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--salt-70); margin-bottom: 0.3rem; }
.quiz-area-bar { height: 8px; border-radius: 99px; background: rgba(240,237,232,0.12); overflow: hidden; }
.quiz-area-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--horizon), var(--seafoam)); transition: width 700ms var(--ease); }
.quiz-hint { margin-top: var(--s-3); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--salt); text-align: center; }