/* ==========================
   GENERAL
========================== */

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #333;
    background-color: rgb(243, 209, 174);
    background-image: url("images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sticky-text {
    position: sticky;
    top: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

/* ==========================
   INTRO SECTION
========================== */

.intro {
    height: 200vh;
    padding: 0;
}


.sticky-text {
    position: sticky;
    top: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}


.intro h1 {

    font-size: clamp(2rem, 6vw, 4rem);

    margin-bottom:30px;

}

/* Small italic link above the intro title - lets anyone with
   symptoms jump straight to the quiz intro (#quiz-intro) instead
   of scrolling through the full story first. Positioned absolutely
   within .sticky-text (which is already a sticky positioning
   context) so it sits near the top of the viewport, independent of
   the vertically-centered h1/paragraph group below it. */
.intro-skip-link {

    position: absolute;

    top: 28px;

    left: 50%;

    transform: translateX(-50%);

    font-size: clamp(0.9rem, 2.5vw, 1.2rem);

    font-style: italic;

    margin: 0;

}

.intro-skip-link a {

    color: #6a8fd8;

    text-decoration: none;

    cursor: pointer;

}

.intro-skip-link a:hover {

    text-decoration: underline;

}


.intro p:not(.intro-skip-link) {

    max-width:800px;

    font-size: clamp(1rem, 2.5vw, 1.25rem);

    line-height:1.8;

}

/* ==========================
   ZOOM-IN INTRO
   zoom-spacer just reserves the scroll distance the intro plays
   across (measured in script.js). The images themselves are fixed
   to the viewport - see .zoom-jwtick / .zoom-wtick below - so
   they can play large and centered independent of the sidebar
   column, then shrink down onto it.
========================== */

.zoom-spacer {
    height: 250vh;
}

.zoom-jwtick,
.zoom-wtick {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    /* left/top/width are set frame-by-frame from script.js as the
       user scrolls - no CSS sizing here so the JS math (which
       needs to know the image's true base size) stays authoritative.
       wtick.png is pre-aligned to the same canvas as
       jwtick.png, so both are always given the identical box -
       wtick just sits on top and fades out of it. */
}

.zoom-jwtick {
    z-index: 5;
}

.zoom-wtick {
    z-index: 6;
}

.zoom-caption {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    /* left/top are set frame-by-frame from script.js, same as the
       two images - centered under the image's bottom edge. */
    transform: translateX(-50%);
    text-align: center;
    max-width: 480px;
    padding: 0 20px;
    z-index: 6;
}

.zoom-caption p {
    margin: 0;
    font-size: clamp(1rem, 3vw, 1.4rem);
    line-height: 1.6;
    color: #333;
}

/* ==========================
   PAGE LAYOUT
========================== */

.container {
    display: flex;
    align-items: flex-start;
}

/* ==========================
   LEFT COLUMN
========================== */

.scroller {

/* change this to make the text in the left column wider 
or thinner, does wonders for filling up the blank space*/

    width: 60%;

    padding: 0 60px;

}

.step {
    min-height: 140vh;

    border-left: 4px solid transparent;
    transition: 0.3s;
}

/* Step 1 hosts three paragraph states that fade between each
   other mid-scroll, so it gets extra scroll runway: room for
   the pause, the fade, and a beat to read each chunk of text. */
.step[data-step="1"] {
    /* + 200px reserved as trailing scroll room so the sticky text
       holds in place for a beat after "What do I do if I've found a
       tick?" finishes fading in, before scrolling away - see
       SCROLL_AWAY_HOLD in script.js, which must match this number. */
    min-height: calc(260vh + 400px);
}

/* Step 2 now has a fourth phase after baggie.png/the mini tick
   (doctor.png fading in - see #doctor-image below and the step 2
   block in script.js's refresh()), so it gets extra scroll runway
   again. */
.step[data-step="2"] {
    /* Bumped up from 260vh - the extra ~40vh is deliberately not
       tied to any animation. Everything (doctor.png fading in and
       the third text block landing) finishes by DOCTOR_FADE_END in
       script.js, well before this section's scroll runs out, so
       that leftover distance plays as a pause where scrolling
       doesn't change anything on screen before step 2 releases. */
    min-height: 300vh;
}

.sticky-step-text {
    position: sticky;
    top: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.step-text-wrap {
    position: relative;
    width: 100%;
    /* Reserve space so the wrap doesn't collapse to 0 height
       (both children are absolutely positioned). Bumped up from
       140px: with the "Following a tick bite..." list now properly
       absolutely-positioned (instead of accidentally escaping its
       <p> and adding real flow height), .step-text-wrap lost the
       extra height that used to push the whole h2+wrap block
       higher up the screen inside .sticky-step-text's centered
       flexbox. This restores that same vertical footprint on
       purpose. Tune this number directly to taste - it's the one
       knob controlling how high the block sits. */
    min-height: 320px;
}

.step-text {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.6s ease;
}

.step2-second-text .step-text,
.step2-third-text .step-text {
    position: static;
    opacity: 1;
    width: 100%;
    transition: none;
}

.step-text.active-text {
    opacity: 1;
    /* Wait for the outgoing paragraph's 0.6s fade-out to finish
       before this one starts fading in, so they never overlap. */
    transition-delay: 0.6s;
}

/* Occupies the middle third of the sticky 100vh box, positioned
   absolutely so it's independent of .step-text-wrap's
   flex-centered flow above it - lets it stay hidden below the
   viewport and slide up into place on its own schedule (see
   stepTwoSecondTextEl in script.js) without disturbing the first
   text block's own rise animation. */
.step2-second-text {

    position: absolute;

    top: 55%;

    height: 33.33%;

    left: 0;

    width: 100%;

    display: flex;

    align-items: center;

}

/* Same pattern as .step2-second-text, but rests in the lower third
   of the sticky box, in step with doctor.png fading in on the right
   - see stepTwoThirdTextEl in script.js. */
.step2-third-text {

    position: absolute;

    top: 85%;

    height: 33.33%;

    left: 0;

    width: 100%;

    display: flex;

    align-items: center;

}

.step.active {

    padding-left: 20px;

}

.step h2 {

    font-size: clamp(1.3rem, 4vw, 2rem);

    margin-bottom: 20px;

}

.step p,
.step ul {

    font-size: clamp(0.95rem, 2.2vw, 1.15rem);

    line-height: 1.7;

}

.step ul ul {

    font-size: clamp(0.85rem, 2vw, 1rem);

}


/* ==========================
   RIGHT COLUMN
========================== */

.graphic {

    width: 60%;

    position: sticky;

    top: 0;

    /* Deliberately no z-index here. A positioned element only forms
       a new stacking context once z-index is explicitly set (even
       to 0) - and .graphic having one was the actual bug: it sealed
       .marker's z-index:10 inside .graphic's own local context, so
       that 10 could only ever win against other things inside
       .graphic, never against .zoom-jwtick/.zoom-wtick
       (z-index 5/6), which live outside .graphic as fixed-position
       siblings.

       With z-index left auto, .graphic no longer creates a
       stacking context, so its child .image-wrapper (which DOES
       have its own explicit z-index: 10, see below) escapes
       upward into the *root* stacking context instead - where it
       now directly outranks the zoom overlays (5/6). Meanwhile
       .graphic's green background, having no z-index of its own,
       stays at the lower "positioned, z-index:auto" paint layer,
       below both zoom overlays. Net effect: green panel (bottom),
       landed symptoms.png, landed jwtick.png on top of it, markers
       via image-wrapper (top). */

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background: transparent;

    border-left: 1px solid transparent;

}


/* ==========================
   VISUALIZATION CARD
========================== */

#viz {

    width: 85%;

    height: 80%;

    background: transparent;

    border: 1px solid transparent;

    border-radius: 14px;

    box-shadow: 0 8px 30px rgba(0,0,0,.08);

}


/* ==========================
   HERO IMAGE + MARKERS
========================== */

/* Scaling the wrapper (not just the image) shrinks the image
   AND moves the markers with it, so the dots stay pinned to the
   same spot on the picture at any scale. */
.image-wrapper {

    position: relative;

    display: inline-block;

    transform: scale(0.5);

    transform-origin: center center;

    z-index: 10;

    transition: opacity 0.6s ease;

    /* Lets symptoms.png (and its markers, which live inside this
       wrapper) fade out as a unit once step 2 is reached - see
       .graphic.step2-active below, which now drives this directly
       (no more scroll-driven transform from the removed
       step-transition section). The transition above lives here
       (rather than only on the .step2-active variant) so the fade
       is smooth in both directions if the user scrolls back up too. */

}

/* ==========================
   STEP 2 IMAGES (tick.png / skin.png)
   Fade in over the upper third of the right column while symptoms.png
   fades out. Placeholder positions/sizes - tune left/top/width to
   taste once the images are in the images folder.
========================== */

.step2-image {

    /* All three images share this exact box, so tick.png sits
       directly on top of skin.png, and tweezers.png on top of
       both - see z-index order below. */
    position: absolute;

    top: 8%;

    left: 40%;

    width: 40%;

    max-width: 300px;

    height: auto;

    opacity: 0;

    pointer-events: none;

    transform: translateX(-50%);

}

#skin-image {
    z-index: 15;
    /* No CSS transition here - opacity is driven frame-by-frame from
       scroll position (see textRiseProgress in script.js), in sync
       with #tick-image, so the two fade in together rather than one
       lagging behind the other. */
}

#tick-image {
    z-index: 16;
}

#tweezers-image {
    /* No CSS transition here - its opacity is driven frame-by-frame
       from scroll position in script.js's resolveStepTwoProgress(),
       same pattern as the zoom-in overlays. */
    z-index: 17;
}

#ticktweezer-image {
    z-index: 18;
    opacity: 0;
}

/* Sits in the middle third of the right column (roughly the 33%-66%
   band), rather than the upper-third box the skin/tick/tweezers
   stack uses - overrides the top/left/width that .step2-image sets
   by default. Opacity is driven frame-by-frame from scroll position
   in script.js's refresh(), same pattern as #tweezers-image. */
#baggie-image {
    top: 38%;
    left: 45%;
    width: 55%;
    z-index: 19;
    opacity: 0;
}

/* Small copy of tick.png that starts above baggie.png and travels
   down to baggie's center as the user scrolls through phase 3 - see
   the step 2 block in script.js's refresh(). Its resting top/left
   match baggie.png's own center point; the upward offset is applied
   as a translateY on top of that, driven frame-by-frame from
   script.js, so tuning baggie's position above also moves this
   image's landing spot with it. Sits one z-index behind baggie.png
   (18 vs 19) so it ends up tucked behind it once it arrives. */
#baggie-tick-image {
    top: 45%;
    left: 45%;
    width: 8%;
    z-index: 18;
    opacity: 0;
}

/* Sits in the lower third of the right column (roughly the 66%-100%
   band) - overrides the top/left/width that .step2-image sets by
   default, same pattern as #baggie-image above. Opacity is driven
   frame-by-frame from scroll position in script.js's refresh(),
   once the mini tick has finished traveling into baggie.png. Sits
   above both baggie.png and the mini tick (z-index 20 vs 19/18). */
#doctor-image {
    top: 62%;
    left: 45%;
    width: 100%;
    max-width: none;
    z-index: 20;
    opacity: 0;
}

/* symptoms.png fades out once step 2 begins - simple CSS-transition
   crossfade against skin.png/tick.png fading in via their own
   scroll-driven opacity (see the currentStep === "2" block in
   script.js's refresh()), now that step 1 leads directly into step 2
   with no step-transition section in between. */
.graphic.step2-active .image-wrapper {
    opacity: 0;
}

.hero-image {

    display: block;

    max-width: 100%;

    height: auto;

    /* Hidden by default (and the only thing measureLanding() reads
       from while hidden, to reserve this spot's size/position for
       both the incoming zoom overlay and the markers below). Once
       the zoom-in animation finishes landing, script.js sets this
       to opacity: 1 and hides the fixed .zoom-jwtick overlay in
       the same frame, handing off to .landed-jwtick-image (which sits
       directly on top of this element, see below) instead - since
       both live inside .image-wrapper alongside the markers and so
       stack against them directly, rather than needing z-index
       compared against a fixed-position element in a different
       stacking context. symptoms.png itself stays fully opaque from
       that point on - it's .landed-jwtick-image that later fades away
       to reveal it, once the user scrolls into step 1. */
    opacity: 0;

    z-index: 1;

}

/* Sits exactly on top of hero-image - width/height: 100% fills the
   same box, since .image-wrapper is sized off hero-image (the only
   in-flow content inside it) and jwtick.png is the same size as
   symptoms.png. Starts hidden, jumps to fully opaque the instant the
   fixed .zoom-jwtick overlay finishes landing on this same spot (see
   updateZoomScene() in script.js), then fades out over the start of
   step 1's scroll via resolveJwtickFadeProgress() - no CSS transition
   here since it's driven frame-by-frame from scroll position, same
   pattern as #tweezers-image. */
.landed-jwtick-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    pointer-events: none;

    z-index: 2;

}

/* Sits exactly on top of hero-image/landed-jwtick-image - same box,
   since shortlyme.png/longlyme.png are the same size as symptoms.png.
   Starts hidden and crossfades in/out via the .visible toggle
   (added/removed from script.js's refresh() based on step 1's
   substate), rather than tracking scroll position frame-by-frame like
   .landed-jwtick-image does - it only ever has two states (shown for
   its matching text chunk, hidden otherwise), so a CSS transition on
   opacity is enough. Sits below the remaining markers (z-index 3 vs.
   10) so it doesn't cover the ones still showing for the 1a chunk. */
.shortlyme-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    pointer-events: none;

    z-index: 3;

    transition: opacity 0.6s ease;

}

.shortlyme-image.visible {

    opacity: 1;

}

/* Same pattern as .shortlyme-image above, for the "Long Lyme is a
   serious condition..." chunk. */
.longlyme-image {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    pointer-events: none;

    z-index: 3;

    transition: opacity 0.6s ease;

}

.longlyme-image.visible {

    opacity: 1;

}

/* "What do I do if I've found a tick?" - lives inside the "Long
   Lyme..." step-text chunk, right below its bullet list, so it sits
   beneath that text and scrolls away with it like everything else in
   the chunk. No CSS transition here - opacity is driven frame-by-frame
   from scroll position (see TICK_QUESTION_SCROLL_DISTANCE in
   script.js), so it fades in once the user has scrolled a bit further
   into this chunk, rather than after a fixed delay. */
.tick-question-text {

    opacity: 0;

    margin-top: 24px;

}

.marker {

    position: absolute;

    z-index: 10;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #ff2d3e;

    box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.25);

    transform: translate(-50%, -50%) scale(0.5);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.4s ease, transform 0.4s ease;

}

.marker.visible {

    z-index: 10;

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}

/* Placeholder positions - move these to line up with the actual
   points of interest on symptoms.png */

/* "Especially during summer and fall..." - 7 markers */
#m-1a-1 { top: 31%; left: 34%; }
#m-1a-2 { top: 11%; left: 39%; }
#m-1a-3 { top: 4%; left: 50%; }
#m-1a-4 { top: 40%; left: 50%; }
#m-1a-5 { top: 48%; left: 25%; }
#m-1a-6 { top: 57%; left: 50%; }
#m-1a-7 { top: 92%; left: 46%; }

/* ==========================
   ACTIVE STEP HIGHLIGHT
========================== */

.step.active h2 {

    color: #333;

}


/* ==========================
   MAP SECTION
   .map-section reserves extra scroll distance (200vh); .map-sticky
   pins to the viewport for that whole distance (position: sticky,
   same pattern as .sticky-text and .graphic elsewhere on the page)
   so the map holds in place on screen rather than scrolling past
   within a single screen's worth of scrolling.
========================== */

.map-section {

    width: 100%;

    height: 200vh;

    padding: 0;

}

.map-sticky {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    display: flex;

    align-items: center;

}

.map-text {

    width: 30%;

    padding: 0 40px;

    text-align: center;

}

.map-title {

    font-size: clamp(1.3rem, 4vw, 2rem);

    margin: 0 0 16px;

}

.map-text p {

    font-size: clamp(1rem, 2.5vw, 1.3rem);

    line-height: 1.7;

}

.map-image-wrapper {

    position: relative;

    width: 70%;

    height: 100%;

}

.map-image,
.region-overlay {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* USmap.png is a shaped graphic (not a full-bleed photo like
       map.jpg was), so contain keeps the whole map visible instead
       of cropping its edges the way cover would. The region
       overlays share this exact box so they line up with USmap.png
       pixel-for-pixel - see script.js's map-hover block for how the
       cursor position is converted into this same coordinate
       space. */
    object-fit: contain;

}

.region-overlay {

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.15s ease;

}

.region-overlay.visible {

    opacity: 1;

}

/* ==========================
   QUIZ SECTION
   Placeholder copy - swap in the real questions/answers whenever
   they're ready. .quiz-intro is separate from .quiz-section which
   holds the questions - so question 1 stays off-screen until the
   user scrolls past the intro or clicks "Start Quiz". .quiz-intro
   itself reserves 200vh of scroll distance, with its title/blurb/
   button content living in .quiz-intro-sticky, which pins to the
   viewport (position: sticky) for that whole distance - same
   pattern as .map-section/.map-sticky above - so the intro holds on
   screen longer instead of clearing in one screen's worth of
   scrolling. Each .quiz-question is its own full screen - text and
   checkboxes live in .quiz-question-content on the left,
   .quiz-question-space is an empty flex spacer that keeps the right
   side of the screen open. "Start Quiz" and "Next" both scroll to
   the next section - see the QUIZ section in script.js. Checkboxes
   are plain inputs (not toggle buttons), so any number can be
   checked per question without extra JS.
========================== */

.quiz-intro,
.quiz-section {

    width: 100%;

    background: transparent;

}

.quiz-intro {

    height: 200vh;

    padding: 0;

}

.quiz-intro-sticky {

    position: sticky;

    top: 0;

    width: 100%;

    height: 100vh;

    padding: 0 60px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 24px;

}

.quiz-title {

    font-size: clamp(1.5rem, 5vw, 2.5rem);

    margin: 0;

    text-align: center;

}

.quiz-intro-text {

    font-size: clamp(1rem, 2.5vw, 1.2rem);

    max-width: 500px;

    margin: 0 auto;

    text-align: center;

}

.quiz-start {

    font-family: inherit;

    font-size: clamp(0.9rem, 2vw, 1.1rem);

    padding: 14px 40px;

    margin-top: 10px;

    border: 3px solid #333;

    border-radius: 14px;

    background: #333;

    color: rgb(243, 209, 174);

    cursor: pointer;

    transition: background 0.2s ease, transform 0.1s ease;

}

.quiz-start:hover {

    background: #47b058;

    border-color: #47b058;

    transform: translateY(-2px);

}

.quiz-question {

    width: 100%;

    min-height: 100vh;

    padding: 0 60px;

    display: flex;

    align-items: center;

    gap: 40px;

    /* Anchor point for "Start Quiz" / "Next" to scroll to - see
       the QUIZ section in script.js. */
    scroll-margin-top: 0;

}

.quiz-question-content {

    flex: 0 1 auto;

    min-width: min(500px, 100%);

    max-width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 30px;

}

/* Empty on purpose - absorbs whatever width quiz-question-content
   doesn't need, so the text/checkboxes start in the same spot but
   are free to stretch right as far as their content requires. */
.quiz-question-space {

    flex: 1;

    min-width: 0;

}

.quiz-question-text {

    font-size: clamp(1.15rem, 3.5vw, 1.6rem);

    text-align: left;

    margin: 0;

}

.quiz-answers {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* Used only by question 2 (states list) - lays its three
   .quiz-answers-column groups out side by side instead of the
   usual single stacked column. */
/* Question 2 (states) is the one place we want the content block
   itself to fill the row, rather than shrink-wrapping to its
   content and leaving .quiz-question-space to soak up the rest -
   that's what lets the three columns spread across the full
   screen width instead of just the left portion. */
.quiz-question[data-question="2"] .quiz-question-content {

    flex: 1 1 auto;

    max-width: 1200px;

}

.quiz-question[data-question="2"] .quiz-question-space {

    display: none;

}

.quiz-answers-columns {

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;

    gap: 40px;

}

.quiz-answers-column {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/* Plain text with a checkbox to the left - no button styling. */
.quiz-answer {

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: clamp(0.95rem, 2vw, 1.1rem);

    color: #333;

    cursor: pointer;

}

.quiz-checkbox {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    accent-color: #47b058;

    cursor: pointer;

}

/* Scrolls the user down to the next question - see the click
   handler in script.js's QUIZ section. Manual scrolling between
   questions still works on its own; this button is just a
   shortcut that always advances by exactly one question. */
.quiz-next {

    font-family: inherit;

    font-size: clamp(0.9rem, 2vw, 1.1rem);

    padding: 14px 40px;

    margin-top: 10px;

    border: 3px solid #333;

    border-radius: 14px;

    background: #333;

    color: rgb(243, 209, 174);

    cursor: pointer;

    transition: background 0.2s ease, transform 0.1s ease;

}

.quiz-next:hover {

    background: #47b058;

    border-color: #47b058;

    transform: translateY(-2px);

}

/* "Did you know?" aside used in question 4 - lives in the same
   .quiz-question-content column as the question/answers/button, so
   it scrolls in and out with the rest of that question rather than
   being a separately-timed element. */
.quiz-fact {

    font-size: clamp(0.8rem, 1.8vw, 0.95rem);

    font-style: italic;

    color: #555;

    border-left: 3px solid #47b058;

    padding-left: 14px;

    margin: 0;

}

/* Own full-screen section, styled like .quiz-intro, since it's
   presenting an output rather than asking a question - see the
   QUIZ RESULTS SECTION comment in index.html and renderSymptomsList()
   in script.js. */
.quiz-results {

    width: 100%;

    min-height: 100vh;

    background: transparent;

    padding: 40px 60px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 16px;

}

.quiz-results-title {

    font-size: clamp(1.4rem, 4.5vw, 2.2rem);

    margin: 0;

}

/* Sits directly beneath the title. */
.quiz-results-subtitle {

    font-size: clamp(0.9rem, 2.2vw, 1.1rem);

    margin: 0;

}

/* Two-column grid holding the four labeled boxes plus the
   statement box - Exposure History (questions 1-5) and Symptoms
   (questions 6-9) fill the first row, Timeline (questions 10-11)
   and Other Recent Illnesses (question 12) fill the second row,
   and .quiz-results-statement-box spans both columns in a third
   row (see its grid-column rule below). Keeping everything in one
   grid, rather than stacking full-width boxes, keeps the whole set
   visible on screen together for a screenshot. */
.quiz-results-body {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    text-align: left;

}

/* Each labeled box - bordered card containing a heading and its
   symptoms-list. Width comes from its grid cell. */
.quiz-results-box {

    background: rgba(255, 255, 255, 0.45);

    border: 2px solid rgba(0, 0, 0, 0.15);

    border-radius: 16px;

    padding: 18px 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}

/* Spans both grid columns so the statement reads full-width below
   the two rows of boxes above it. */
.quiz-results-statement-box {

    grid-column: 1 / -1;

}

.quiz-results-box-title {

    font-size: clamp(1rem, 2.2vw, 1.2rem);

    margin: 0 0 12px 0;

    padding-bottom: 10px;

    width: 100%;

    border-bottom: 2px solid rgba(0, 0, 0, 0.15);

}

/* Rebuilt each time the section scrolls into view - see
   renderSymptomsList() in script.js. Shared base styling for both
   the primary and secondary lists. */
.symptoms-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: clamp(0.9rem, 2vw, 1.05rem);

    align-items: center;

    text-align: center;

}

/* Shown in place of the list when nothing is checked. */
.symptoms-list-empty {

    color: #777;

    font-style: italic;

}

/* Closing statement the user can read to their provider, shown in
   its own full-width box below the other four. */
.quiz-results-statement {

    font-size: clamp(0.95rem, 2vw, 1.1rem);

    max-width: 100%;

    margin: 0;

}

/* Reminder shown below the boxes. */
.quiz-results-note {

    font-size: clamp(0.8rem, 1.8vw, 0.95rem);

    font-style: italic;

    color: #555;

    margin: 0;

}

/* ==========================
   REFERENCES SECTION
   Barebones - title top-right, links listed below it, right-aligned.
========================== */

.references-section {

    width: 100%;

    background: transparent;

    padding: 60px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}

.references-title {

    font-size: clamp(1.3rem, 4vw, 2rem);

    margin: 0 0 20px;

    text-align: right;

}

.references-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

    text-align: right;

}

.references-list a {

    color: #333;

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 900px) {

    .container {

        flex-direction: column;

    }

    .scroller {

        width: 100%;

        padding: 10px;

    }

    .graphic {

        position: relative;

        width: 100%;

        height: 60vh;

        border-left: none;

        border-top: 1px solid #ddd;

    }

    .map-section {

        height: auto;

        padding: 40px 0;

    }

    .map-sticky {

        position: relative;

        flex-direction: column;

        height: auto;

    }

    .map-text {

        width: 100%;

        padding: 0 20px 20px;

    }

    .map-image-wrapper {

        width: 90%;

        height: 60vh;

    }

    .quiz-intro {

        height: auto;

    }

    .quiz-intro-sticky {

        position: relative;

        height: auto;

        padding: 60px 20px;

    }

    .quiz-results {

        padding: 40px 20px;

    }

    .quiz-results-body {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 16px;

    }

    .quiz-results-box {

        text-align: center;

    }

    .quiz-question {

        padding: 40px 20px;

        min-height: auto;

    }

    .quiz-question-content {

        width: 100%;

        max-width: none;

    }

    .quiz-question-space {

        display: none;

    }

    .quiz-answers-columns {

        flex-direction: column;

        gap: 18px;

    }

}

/* ==========================
   SCROLL-DOWN HINT
   Thin arrow pinned to the bottom center of the viewport for the
   whole scrolling story, nudging the user onward. Faded in/out (not
   display:none) so the transition is smooth - see #scroll-hint.hidden,
   toggled from script.js.
========================== */

.scroll-hint {

    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);

    z-index: 25;

    pointer-events: none;

    opacity: 0.9;
    transition: opacity 0.5s ease;

}

.scroll-hint.hidden {

    opacity: 0;

}

.scroll-hint-arrow {

    width: 26px;
    height: 48px;

    fill: none;
    stroke: #aaaca8;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;

}

@media (max-width: 900px) {

    .scroll-hint {
        bottom: 16px;
    }

}