/*
 * 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;
    }
}

.story3-page {
    /* The scene surface stays black in both themes; it is the backdrop the
       illustration artwork was drawn against. */
    --story3-color-scene-surface: #000;
    --story3-color-page-surface: #fff;
}

:root[data-theme="dark"] .story3-page {
    --story3-color-page-surface: var(--hra-dark-surface);
}

/* System-theme fallback when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .story3-page {
        --story3-color-page-surface: var(--hra-dark-surface);
    }
}

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

.story3-page .introcharcece,
.story3-page .introcharsquiggy {
    width: min(12%, 7rem);
}

.story3-page #introImageSection,
.story3-page .imageintrosec {
    height: var(--narrative-viewport-height);
}

.story3-page .imageintrosec {
    overflow: hidden;
}

.story3-page .scene3-1,
.story3-page .scene3-2,
.story3-page .scene3-3,
.story3-page .scene3-4,
.story3-page .scene3-5,
.story3-page .scene3-5-1,
.story3-page .scene3-6,
.story3-page .scene3-7,
.story3-page .scene3-8,
.story3-page .scene3-9 {
    background-color: var(--story3-color-scene-surface);
    height: var(--narrative-viewport-height);
    overflow: hidden;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 100%;
}

.story3-page .scene3-1,
.story3-page .scene3-2,
.story3-page .scene3-3,
.story3-page .scene3-4,
.story3-page .scene3-5,
.story3-page .scene3-5-1,
.story3-page .scene3-7,
.story3-page .scene3-8,
.story3-page .scene3-9 {
    margin: 0;
}

.story3-page .scene3-1 {
    background-image: url('../images/squiggy-greets-cece.svg');
}

.story3-page .scene3-2 {
    background-image: url('../images/cece-discovers-kidney-tissue.svg');
}

.story3-page .scene3-3 {
    background-image: url('../images/squiggy-suggests-kidney-placement.svg');
}

.story3-page .scene3-4 {
    background-image: url('../images/kidney-variation-background.svg');
}

.story3-page .scene3-5 {
    background-image: url('../images/squiggy-reconsiders-guessing.svg');
}

.story3-page .scene3-5-1,
.story3-page .scene3-6 {
    display: inline-block;
    vertical-align: middle;
}

.story3-page #Rectangle1,
.story3-page #Rectangle2,
.story3-page #Rectangle3,
.story3-page #Rectangle4,
.story3-page #Rectangle5,
.story3-page #Rectangle6,
.story3-page #Rectangle7 {
    opacity: 0;
}

.story3-page .scene3-6 {
    margin: auto;
}

.story3-page .scene3-7 {
    background-image: url('../images/rui-registration-scene.svg');
}

.story3-page .scene3-8 {
    background-image: url('../images/registered-tissue-data-scene.svg');
}

.story3-page .imageintrosec {
    position: relative;
    height: var(--narrative-viewport-height);
    overflow: hidden;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    min-width: 100%;
    margin: auto;
    justify-content: center;
    display: flex;
}

.story3-page .imageintro1,
.story3-page .imageintro2,
.story3-page .imageintro3 {
    width: auto;
    height: 100%;
}

.story3-page .imageintro2,
.story3-page .imageintro3 {
    opacity: 1;
}

.story3-page #kidneyorgan {
    width: 20%;
    min-width: 300px;
    max-width: 600px;
    left: 50%;
    top: 15%;
    position: relative;
    opacity: 1;
}

.story3-page #kidneypart1,
.story3-page #kidneypart2,
.story3-page #kidneypart3,
.story3-page #kidneypart4 {
    height: auto;
    max-width: 200px;
    opacity: 0;
}

.story3-page #kidneypart1 {
    width: 14%;
    left: 16%;
    top: 20%;
}

.story3-page #kidneypart2 {
    width: 15%;
    right: 16%;
    top: 20%;
}

.story3-page #kidneypart3 {
    width: 15%;
    left: 15%;
    bottom: 20%;
}

.story3-page #kidneypart4 {
    width: 15%;
    right: 15%;
    bottom: 20%;
}

.story3-page #changehere {
    overflow: hidden;
}

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

.story3-page .story3-dialogue--raised {
    top: -25%;
}

.story3-page .story3-dialogue--raised-medium {
    top: -20%;
}

.story3-page .story3-dialogue--raised-slight {
    top: -10%;
}

.story3-page .story3-dialogue--centered {
    top: 0;
}

.story3-page .story3-dialogue--lower-slight {
    top: 5%;
}

.story3-page .story3-dialogue--lower {
    top: 10%;
}

.story3-page .story3-dialogue--lower-strong {
    top: 20%;
}

.story3-page .story3-dialogue--left-zero {
    left: 0;
}

.story3-page .story3-dialogue--left-5 {
    left: 5%;
}

/*
 * Decorative horizontal offsets. The bubble is 90% wide, so a fixed percentage
 * offset pushes it past the right edge once the viewport is narrow: at 320px
 * the 18% variant overhung by 3px and scrolled the whole page sideways. Cap
 * each offset at the space actually left over, so the nudge degrades to flush
 * instead of overflowing, at any width.
 */
.story3-page .story3-dialogue--left-16 {
    left: min(16%, 100% - 90%);
}

.story3-page .story3-dialogue--left-18 {
    left: min(18%, 100% - 90%);
}