/* ==========================================
   WISP SALES PROCESS EFFICIENCY QUIZ
   Extends assets/styles.css — reuses the site's
   color tokens, buttons, and form primitives.
   ========================================== */

.quiz-shell {
    position: relative;
    overflow: hidden;
}

/* Tower background + darkening overlay live at the shell level so they stay
   put across all three stages instead of vanishing when the intro is swapped out. */
.quiz-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
}

.quiz-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 20, 25, 0.55) 0%, rgba(15, 20, 25, 0.75) 55%, rgba(15, 20, 25, 0.95) 100%);
    z-index: 1;
}

.quiz-stage {
    display: none;
    width: 100%;
    min-height: calc(100vh - var(--banner-height));
    box-sizing: border-box;
}

.quiz-active {
    flex-direction: column;
    justify-content: center;
    padding: 140px 20px 100px;
}

.quiz-results {
    align-items: center;
    padding: 140px 8% 100px;
}

/* Only the stage matching data-stage on the shell is shown. This is the only
   place `display` should be set for a stage — it must win the cascade over
   the base `.quiz-stage { display: none }` above. Per-stage rules below only
   set flex-direction/align-items/justify-content, never display, or they'd
   tie that base rule on specificity and win on source order, showing every
   stage at once regardless of data-stage. */
.quiz-shell[data-stage="intro"] .quiz-intro,
.quiz-shell[data-stage="quiz"] .quiz-active,
.quiz-shell[data-stage="results"] .quiz-results {
    display: flex;
}

.quiz-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-blue);
    text-align: left;
    margin-bottom: 1.25rem;
}

/* ---------- Stage 1: Intro ---------- */

.quiz-intro {
    align-items: center;
    justify-content: flex-end;
    padding: 140px 8% 100px;
}

.quiz-intro-container {
    position: relative;
    z-index: 2;
    max-width: 780px;
    width: 100%;
    margin: 7rem 0 0 auto;
    text-align: left;
}

.quiz-intro-cta {
    text-align: center;
}

@media (max-width: 900px) {
    .quiz-intro {
        justify-content: center;
    }

    .quiz-intro-container {
        max-width: 100%;
        margin: 3rem auto 0;
        text-align: center;
    }
}

.quiz-intro-title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
}

.quiz-intro-subtitle {
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 0 2.25rem;
}

@media (max-width: 900px) {
    .quiz-intro-subtitle {
        margin: 0 auto 2.5rem;
    }
}

.quiz-intro-highlights {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    width: fit-content;
    margin: 1.75rem auto 0;
    list-style: none;
    text-align: left;
}

.quiz-intro-highlights li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.quiz-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary-blue);
}

.quiz-check svg {
    width: 13px;
    height: 13px;
}

/* ---------- Stage 2: Quiz ---------- */

.quiz-active-container {
    position: relative;
    z-index: 2;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.quiz-progress {
    margin-bottom: 2.5rem;
}

/* Signature element: a row of signal bars that fills in as you
   progress, echoing signal-strength readouts rather than a plain
   progress track. */
.quiz-progress-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 22px;
    margin-bottom: 0.75rem;
}

.quiz-progress-bar {
    flex: 1 1 0;
    align-self: flex-end;
    height: 100%;
    border-radius: 2px;
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.quiz-progress-bar:nth-child(1) { height: 40%; }
.quiz-progress-bar:nth-child(2) { height: 48%; }
.quiz-progress-bar:nth-child(3) { height: 55%; }
.quiz-progress-bar:nth-child(4) { height: 63%; }
.quiz-progress-bar:nth-child(5) { height: 70%; }
.quiz-progress-bar:nth-child(6) { height: 78%; }
.quiz-progress-bar:nth-child(7) { height: 85%; }
.quiz-progress-bar:nth-child(8) { height: 93%; }
.quiz-progress-bar:nth-child(9) { height: 100%; }

.quiz-progress-bar.is-filled {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
}

.quiz-progress-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.quiz-question-card {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.85rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.quiz-question-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.4rem;
    line-height: 1.4;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-options[hidden] {
    display: none;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 11px 15px;
    background: var(--dark-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.quiz-option:hover {
    border-color: var(--primary-blue);
    transform: translateY(-1px);
}

.quiz-option.is-selected {
    border-color: var(--primary-blue);
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.quiz-option-key {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
}

.quiz-option.is-selected .quiz-option-key {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--text-primary);
}

.quiz-option-label {
    flex: 1 1 auto;
}

.quiz-text-answer {
    width: 100%;
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.quiz-back-btn {
    padding: 12px 28px;
}

/* .btn-secondary sets its own `display`, which as an author rule beats the
   browser's default `[hidden] { display: none }` — so the hidden attribute
   alone won't hide this button without an explicit rule for it here. */
.quiz-back-btn[hidden] {
    display: none;
}

.quiz-next-btn {
    margin-left: auto;
}

.quiz-next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- Stage 3: Results ---------- */

.quiz-results-container {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* Two columns spread across the full width: email capture sits over the
   tower photo on the true left of the page, score/opportunity/bars sit on
   the right — not a single block shifted right like the intro. Was 18rem
   (288px) — that alone was doing most of the work making this page feel
   oversized, independent of any single element's font size. */
.quiz-results-layout {
    display: flex;
    align-items: center;
    gap: 5rem;
}

/* Aside takes an equal-width half of the row, then centers its (narrower)
   content within that half — rather than the box itself sitting flush
   against the row's edge. */
.quiz-results-aside {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quiz-results-main {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
}

@media (max-width: 900px) {
    .quiz-results {
        padding: 140px 20px 100px;
    }

    .quiz-results-container {
        max-width: 100%;
        margin: 0 auto;
    }

    /* column-reverse keeps results (main) reading before the email ask
       (aside) on mobile, even though aside comes first in the DOM. */
    .quiz-results-layout {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: stretch;
        gap: 2.5rem;
    }

    .quiz-results-aside {
        flex: 1 1 auto;
    }
}

/* Overall score: one big number + a tier badge that reuses the site's
   existing success/error semantic colors, then a tier-driven headline. */
.quiz-score-overall {
    margin-bottom: 2.5rem;
}

.quiz-score-number {
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.quiz-score-max {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quiz-score-headline {
    margin-top: 0.75rem;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}

/* Category bars: a distinct visual from the question-progress signal bars —
   solid horizontal tracks, always shown in the same fixed order (never
   re-sorted by score) so the layout stays consistent across retakes. */
.quiz-score-bars {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.quiz-score-bar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.quiz-score-bar-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quiz-score-bar-pct {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.quiz-score-bar-track {
    height: 10px;
    border-radius: 999px;
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.quiz-score-bar-desc-label {
    margin-top: 0.55rem;
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.quiz-score-bar-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.quiz-score-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981, #059669);
    transition: width 0.6s ease;
}

.quiz-opportunity {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    text-align: left;
    margin-bottom: 2rem;
}

.quiz-opportunity-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.6rem;
}

/* No "Your Biggest Opportunity" label in the normal case — the eyebrow is
   only populated when a contradiction rule fires ("Wait, That Doesn't Add
   Up"), so collapse it when empty instead of leaving a blank line. */
.quiz-opportunity-eyebrow:empty {
    display: none;
    margin-bottom: 0;
}

.quiz-opportunity-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}

.quiz-opportunity-body {
    font-size: 0.92rem;
    color: var(--text-muted);
}

/* Shown instead of the normal opportunity copy when a visitor's answers
   contradict each other (see CONTRADICTION_RULES in script-quiz.js) —
   same layout, just an amber accent so it reads as "hold on" rather than
   a normal result. */
.quiz-opportunity[data-contradiction="true"] {
    border-color: #f59e0b;
}

.quiz-opportunity[data-contradiction="true"] .quiz-opportunity-eyebrow {
    color: #f59e0b;
}

.quiz-cta-note {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.quiz-cta-note span {
    color: var(--text-primary);
    font-weight: 700;
}

.quiz-results-cta {
    justify-content: flex-start;
    margin-bottom: 3rem;
}

@media (max-width: 900px) {
    .quiz-results-cta {
        justify-content: center;
    }
}

/* Every other card on this page (opportunity box, score-bar track,
   breakdown items) is dark, so a near-white card is the strongest way to
   make this the one thing on the page you're meant to act on — a real
   color inversion, not just a lighter shade of the same dark tone. The
   dark email input (global input styling, untouched here) now reads as
   its own accent against the light card instead of blending into it. */
/* Was 714px, wider than this column's own share of the 1400px results
   layout (~556px at max container width, after the 18rem gap) — it was
   overflowing its column, not just "looking big." 480px sits comfortably
   inside it. */
.quiz-followup {
    width: 400px;
    max-width: 100%;
    background: rgba(248, 250, 252, 0.85);
    border: 2px solid var(--primary-blue);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: left;
    margin-bottom: 1.25rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.quiz-followup-text h3 {
    color: #0f1419;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.quiz-followup-text p {
    color: #334155;
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 0.9rem;
}

/* Stacked, not side-by-side — the aside is narrow (320px) so a row layout
   left almost no room for the email input next to the submit button. */
.quiz-followup-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Overrides the shared dark `input` styling (styles.css) for this form
   only — the dark input read fine on the old dark card, but clashes now
   that the card itself is light. Kept local so the waitlist/contact forms
   elsewhere on the site are untouched. */
.quiz-followup-form input[type="email"] {
    width: 100%;
    background: #e8edf3;
    border: 1px solid #cbd5e1;
    color: #0f1419;
}

.quiz-followup-form input[type="email"]::placeholder {
    color: #64748b;
}

.quiz-followup-form .submit-button {
    width: 100%;
    margin-top: 0;
    white-space: nowrap;
}

.quiz-followup-form .success-message,
.quiz-followup-form .error-message {
    width: 100%;
}

.quiz-retake-btn {
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}

.quiz-retake-btn:hover {
    color: var(--text-secondary);
}

/* ---------- Full Plan (unlocked) state ---------- */
/* Toggled via [data-full-plan="true"] on #quizResultsContainer once
   showFullPlan() runs (dev button, or a real ?r= emailed link). Swaps the
   two-column teaser layout — built for the pre-email ask — for a single,
   full-width report column with a banner up top. This is the reveal, not
   a sidebar, so it gets its own layout rather than squeezing into the
   teaser's aside/main split. */
.quiz-fullplan-banner,
.quiz-fullplan-subhead {
    display: none;
}

.quiz-results-container[data-full-plan="true"] .quiz-fullplan-banner {
    display: block;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0.65rem;
}

.quiz-results-container[data-full-plan="true"] .quiz-fullplan-subhead {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.98rem;
    margin-bottom: 2.25rem;
}

.quiz-results-container[data-full-plan="true"] .quiz-results-aside {
    display: none;
}

.quiz-results-container[data-full-plan="true"] .quiz-results-layout {
    display: block;
}

.quiz-results-container[data-full-plan="true"] .quiz-results-main {
    max-width: 680px;
    margin: 0 auto;
}

.quiz-results-container[data-full-plan="true"] .quiz-results-cta {
    justify-content: center;
}

.quiz-results-container[data-full-plan="true"] .quiz-cta-note {
    text-align: center;
}

/* Here's what we saw in your answers — grouped into 2-3 segment
   "chapters" (see renderAnswerBreakdown()) instead of one card per
   answer, so it reads as a diagnosis rather than a Q1-Q8 form recap. Each
   chapter is plain editorial typography — heading + running paragraphs,
   no boxes — with a left rule doing the section-break work a card border
   would otherwise do. */
.quiz-answer-breakdown {
    margin-bottom: 2.5rem;
}

.quiz-breakdown-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    line-height: 1.35;
}

.quiz-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.quiz-breakdown-section {
    padding-left: 1.25rem;
    border-left: 3px solid var(--primary-blue);
}

.quiz-breakdown-section-heading {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.85rem;
}

.quiz-breakdown-paragraph {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 0.85rem;
}

/* Names what the paragraph is reacting to (e.g. "The rep-to-engineer
   handoff.") so jumping between answers doesn't read as a non-sequitur —
   without restoring a full "Question / Answer" card. */
.quiz-breakdown-lead {
    color: var(--text-primary);
    font-weight: 700;
}

.quiz-breakdown-paragraph:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .quiz-question-card {
        padding: 1.75rem;
    }

    .quiz-nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .quiz-next-btn {
        margin-left: 0;
    }
}