/*
 * Canvas appearance.
 *
 * The page advertises `color-scheme: light dark` in its meta tag, so without a
 * declaration the browser paints the canvas from the OS preference - a dark
 * canvas even when the visitor has chosen Light, showing through anything that
 * does not paint its own background. This must sit on the ROOT element: on the
 * body it styles only that box and leaves the canvas untouched. This file is
 * loaded by exactly one page, so :root is already story-scoped.
 */
:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

.story2-page {
    --story2-color-accent: #e00d3a;
    --story2-color-accent-strong: var(--hra-light-on-primary-container);
    --story2-color-focus: #201e3d;
    --story2-color-quiz-surface: #eff2f5;
    /* The scene surface stays black in both themes; it is the backdrop the
       illustration artwork was drawn against, as is the text over it. */
    --story2-color-scene-surface: #000;
    --story2-color-page-surface: #fff;
    --story2-color-on-scene: #fff;
    /* Foreground for the accent-filled quiz button. Distinct from
       --story2-color-on-scene, which is text over the black scene and must
       stay white in both themes. */
    --story2-color-on-accent: #fff;
    --story2-color-choice-surface: var(--hra-light-surface-container-lowest);
    --story2-color-choice-surface-hover: var(--hra-light-surface-container-low);
    --story2-color-choice-surface-selected: var(--hra-light-primary-container);
    --story2-color-choice-border: var(--hra-light-outline-strong);
    --story2-color-correct-surface: var(--hra-light-secondary-container);
    /* No error-container role exists in the palette; this is the one raw
       value Story 2 still owns. 13.87:1 against the body ink. */
    --story2-color-incorrect-surface: #fee2cf;
}

.story2-page .story2-zoom-target {
    height: 20vh;
    top: 50%;
}

.story2-page .story2-dialogue--spaced {
    margin-top: 80px;
}

.story2-page .story2-dialogue--compact {
    margin-top: 26px;
}

.story2-page .story2-dialogue--raised {
    top: -30%;
}

.story2-page .story2-dialogue--upper-left {
    top: -20%;
    left: 10%;
}

.story2-page .story2-dialogue-track {
    overflow-x: hidden;
}

#main-content.story-main--intrinsic-height > .section2 {
    height: auto;
}

.story2-page .videozoom {
    background-color: var(--story2-color-scene-surface);
    height: var(--narrative-viewport-height);
    width: 100%;
    overflow: hidden;
    margin: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 100%;
}

.story2-page .videozoom img {
    width: 80%;
    margin: auto;
}

.story2-page .videozoom p {
    text-align: center;
    color: var(--story2-color-on-scene);
    opacity: 0.7;
}

.story2-page .videozoom a {
    color: var(--story2-color-on-scene);
    opacity: 0.7;
    text-decoration: underline;
}

.story2-page .videozoom h1 {
    margin-top: 40px;
    color: var(--story2-color-on-scene);
}

@media all and (max-width: 750px) {
    .story2-page .videozoom img {
        width: 90%;
        margin: auto;
    }
}

.story2-page .fadeimage2 {
    position: relative;
    height: var(--narrative-viewport-height);
    justify-content: center;
    display: flex;
    top: -10%;
}

.story2-page .scene1,
.story2-page .scene1-1,
.story2-page .scene1-2,
.story2-page .scene2 {
    background-color: var(--story2-color-scene-surface);
    height: var(--narrative-viewport-height);
    overflow: hidden;
    margin: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 100%;
}

.story2-page .scene1,
.story2-page .scene1-2 {
    background-image: url('../images/squiggy-and-cece-at-home.svg');
}

.story2-page .scene1-1 {
    background-image: url('../images/squiggy-and-cece-close-up.svg');
}

.story2-page .scene2 {
    background-image: url('../images/cece-reassures-squiggy.svg');
}

.story2-page .scene3 {
    background-image: none;
    height: var(--narrative-viewport-height);
    overflow: hidden;
    margin: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: var(--story2-color-scene-surface);
}

.story2-page .scene6 {
    background-color: var(--story2-color-scene-surface);
    height: 1px;
}

.story2-page .scene7,
.story2-page .scene8,
.story2-page .scene9,
.story2-page .scene10,
.story2-page .scene11,
.story2-page .scene12,
.story2-page .scene13 {
    background-color: var(--story2-color-page-surface);
    height: var(--narrative-viewport-height);
    margin: 0;
    overflow: hidden;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.story2-page .scene7 {
    background-image: url('../images/biomarker-discussion.svg');
}

.story2-page .scene8 {
    background-image: url('../images/squiggy-discovers-tag.svg');
}

.story2-page .scene9 {
    background-image: url('../images/squiggy-biomarker-tag.svg');
}

.story2-page .scene10 {
    background-image: url('../images/biomarker-tag-close-up.svg');
}

.story2-page .scene11 {
    background-image: url('../images/squiggy-asks-about-biomarkers.svg');
}

.story2-page .scene12 {
    background-image: url('../images/squiggy-refuses-reporter-ride.svg');
}

.story2-page .scene13 {
    background-image: url('../images/squiggy-and-cece-address-readers.svg');
}

.story2-page .scrollbubble {
    opacity: 0;
}

.story2-page .linesection {
    margin: 10px;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.story2-page .sectionquiz {
    position: relative;
    padding: clamp(1.5rem, 5vw, 3rem);
    margin-top: 10vh;
    background-color: var(--story2-color-quiz-surface);
    font-size: 1rem;
    line-height: 1.5;
}

.story2-page .quizheader {
    margin-block: 0 1rem;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    line-height: 1.2;
}

.story2-page .quizp {
    width: min(100%, 44rem);
    margin-inline: auto;
}

/*
 * Quiz controls.
 *
 * The shared button supplies the form; the pairing is Story 2's own so it
 * survives the theme switch. Both use accent-strong rather than the accent:
 * white on HRA red measures 4.90:1, which passes AA but not the AAA target,
 * while on-primary-container reaches 9.14:1.
 */
.story2-page .story-quiz .choiceresult.hra-button {
    --hra-button-action: var(--story2-color-accent-strong);
    --hra-button-on-action: var(--story2-color-on-accent);
}

.story2-page .story-quiz .hra-button--text {
    --hra-button-action: var(--story2-color-accent-strong);
}

/* --- Dark appearance -------------------------------------------------- */

:root[data-theme="dark"] .story2-page {
    --story2-color-accent: var(--hra-dark-primary);
    --story2-color-on-accent: var(--hra-dark-on-primary);
    --story2-color-accent-strong: var(--hra-dark-on-primary-container);
    --story2-color-focus: var(--hra-dark-primary);
    --story2-color-quiz-surface: var(--hra-dark-surface-container);
    --story2-color-page-surface: var(--hra-dark-surface);
    --story2-color-choice-surface: var(--hra-dark-surface-container-high);
    --story2-color-choice-surface-hover: var(--hra-dark-surface-container-highest);
    --story2-color-choice-surface-selected: var(--hra-dark-primary-container);
    --story2-color-choice-border: var(--hra-dark-outline-variant);
    --story2-color-correct-surface: var(--hra-dark-secondary-container);
    --story2-color-incorrect-surface: var(--hra-dark-surface-container-highest);
}

/* System-theme fallback when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .story2-page {
        --story2-color-accent: var(--hra-dark-primary);
        --story2-color-on-accent: var(--hra-dark-on-primary);
        --story2-color-accent-strong: var(--hra-dark-on-primary-container);
        --story2-color-focus: var(--hra-dark-primary);
        --story2-color-quiz-surface: var(--hra-dark-surface-container);
        --story2-color-page-surface: var(--hra-dark-surface);
        --story2-color-choice-surface: var(--hra-dark-surface-container-high);
        --story2-color-choice-surface-hover: var(--hra-dark-surface-container-highest);
        --story2-color-choice-surface-selected: var(--hra-dark-primary-container);
        --story2-color-choice-border: var(--hra-dark-outline-variant);
        --story2-color-correct-surface: var(--hra-dark-secondary-container);
        --story2-color-incorrect-surface: var(--hra-dark-surface-container-highest);
    }
}