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

/* Story 6 semantic color roles mirror the landing-page appearance system. */
#six {
    --story-color-page: var(--hra-light-surface);
    --story-color-text: var(--hra-light-on-surface-variant);
    --story-color-heading: var(--hra-light-secondary);
    --story-color-accent: var(--hra-light-on-primary-container);
    --story-color-focus: var(--hra-light-secondary);
    --story-color-card: var(--hra-light-surface-container-lowest);
    --story-color-surface-low: var(--hra-light-surface-container-low);
    --story-color-surface: var(--hra-light-surface-container);
    --story-color-border: var(--hra-light-outline-strong);
    --story-color-outline-variant: #c7d2dd;
    --story-color-border-subtle: var(--story-color-outline-variant);
    --story-color-label: var(--hra-light-inverse-surface);
    --story-color-on-label: var(--hra-light-inverse-on-surface);
    --story-color-info-surface: #f0f5ff;
    --story-color-info-accent: #174a7e;
    --story-color-artwork-surface: var(--hra-light-surface-container-lowest);
    --hra-background: var(--story-color-page);
    --hra-on-background: var(--story-color-text);
    --hra-on-surface-variant: var(--story-color-text);
    --story-color-selection: var(--hra-light-secondary);
    --story-color-on-selection: var(--hra-light-on-primary);
    --story-condition-one: var(--hra-light-surface-variant);
    --story-condition-two: #c7d2dd;
    --story-condition-three: var(--hra-light-acknowledgments);
    --story-shadow: 0 0.5rem 1.5rem rgb(32 30 61 / 12%);
    --story-shadow-raised: 0 1rem 2.25rem rgb(32 30 61 / 18%);
    --story-splash-overlay: linear-gradient(90deg, rgb(250 251 252 / 96%), rgb(250 251 252 / 70%) 54%, transparent 82%);
    --story-splash-overlay-mobile: linear-gradient(180deg, rgb(250 251 252 / 40%), rgb(250 251 252 / 86%));
    --story-title-card: rgb(255 255 255 / 94%);
    --story-splash-text-shadow: 0 0.125rem 1rem rgb(255 255 255 / 92%);
    --story-transition-scrim: var(--hra-light-secondary);
    --story-transition-text: var(--hra-light-on-primary);

    color: var(--story-color-text);
    background: var(--story-color-page);
}

:root[data-theme="dark"] #six {
    --story-color-page: var(--hra-dark-surface);
    --story-color-text: var(--hra-dark-on-surface-variant);
    --story-color-heading: var(--hra-dark-on-secondary-container);
    --story-color-accent: var(--hra-dark-primary);
    --story-color-focus: var(--hra-dark-primary);
    --story-color-card: var(--hra-dark-surface-container-lowest);
    --story-color-surface-low: var(--hra-dark-surface-container-low);
    --story-color-surface: var(--hra-dark-surface-container);
    --story-color-border: var(--hra-dark-outline);
    --story-color-outline-variant: var(--hra-dark-outline-variant);
    --story-color-border-subtle: var(--story-color-outline-variant);
    --story-color-label: var(--hra-dark-on-surface);
    --story-color-on-label: var(--hra-dark-inverse-on-surface);
    --story-color-info-surface: #1c2633;
    --story-color-info-accent: #9fc9ff;
    --story-color-selection: var(--hra-dark-primary-fixed);
    --story-color-on-selection: var(--hra-dark-on-primary-fixed);
    --story-condition-one: var(--hra-dark-surface-container);
    --story-condition-two: var(--hra-dark-surface-container-highest);
    --story-condition-three: var(--hra-dark-secondary-container);
    --story-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 48%);
    --story-shadow-raised: 0 1rem 2.25rem rgb(0 0 0 / 62%);
    --story-splash-overlay: linear-gradient(90deg, rgb(22 23 25 / 98%), rgb(22 23 25 / 76%) 54%, transparent 82%);
    --story-splash-overlay-mobile: linear-gradient(180deg, rgb(22 23 25 / 52%), rgb(22 23 25 / 92%));
    --story-title-card: rgb(16 17 19 / 94%);
    --story-splash-text-shadow: 0 0.125rem 1rem rgb(0 0 0 / 92%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) #six {
        --story-color-page: var(--hra-dark-surface);
        --story-color-text: var(--hra-dark-on-surface-variant);
        --story-color-heading: var(--hra-dark-on-secondary-container);
        --story-color-accent: var(--hra-dark-primary);
        --story-color-focus: var(--hra-dark-primary);
        --story-color-card: var(--hra-dark-surface-container-lowest);
        --story-color-surface-low: var(--hra-dark-surface-container-low);
        --story-color-surface: var(--hra-dark-surface-container);
        --story-color-border: var(--hra-dark-outline);
        --story-color-outline-variant: var(--hra-dark-outline-variant);
        --story-color-border-subtle: var(--story-color-outline-variant);
        --story-color-label: var(--hra-dark-on-surface);
        --story-color-on-label: var(--hra-dark-inverse-on-surface);
        --story-color-info-surface: #1c2633;
        --story-color-info-accent: #9fc9ff;
        --story-color-selection: var(--hra-dark-primary-fixed);
        --story-color-on-selection: var(--hra-dark-on-primary-fixed);
        --story-condition-one: var(--hra-dark-surface-container);
        --story-condition-two: var(--hra-dark-surface-container-highest);
        --story-condition-three: var(--hra-dark-secondary-container);
        --story-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 48%);
        --story-shadow-raised: 0 1rem 2.25rem rgb(0 0 0 / 62%);
        --story-splash-overlay: linear-gradient(90deg, rgb(22 23 25 / 98%), rgb(22 23 25 / 76%) 54%, transparent 82%);
        --story-splash-overlay-mobile: linear-gradient(180deg, rgb(22 23 25 / 52%), rgb(22 23 25 / 92%));
        --story-title-card: rgb(16 17 19 / 94%);
        --story-splash-text-shadow: 0 0.125rem 1rem rgb(0 0 0 / 92%);
    }
}

#six #main-content {
    color: var(--story-color-text);
    background: var(--story-color-page);
}

#six #main-content a {
    color: inherit;
}

@media (forced-colors: none) {
    #six #main-content ::selection {
        color: var(--story-color-on-selection);
        background: var(--story-color-selection);
    }
}

#six #main-content :is(a, button, [tabindex]):focus-visible {
    outline-color: var(--story-color-focus);
}

#six .page-header {
    --story-splash-overlay-opacity: 0;
    color: var(--story-color-heading);
    background: var(--story-color-page);
}
#six .page-header::after {
    background: var(--story-splash-overlay);
    opacity: var(--story-splash-overlay-opacity);
}
#six .page-header .title-card {
    color: var(--story-color-text);
    background: var(--story-title-card);
    border-color: var(--story-color-border-subtle);
    box-shadow: var(--story-shadow-raised);
}
#six .page-header .title-card::before {
    background: var(--hra-primary-40);
}
#six .page-header .title-card .title .main,
#six .tissue-comparison__intro h2,
#six .organ-comparison h3,
#six .tissue-comparison__takeaway {
    color: var(--story-color-heading);
}
#six .page-header .title-card .title .subtitle,
#six .page-header .title-card .bottom,
#six .intro .text p,
#six .section2-2 .text p,
#six .tissue-comparison__intro p:not(.tissue-comparison__eyebrow),
#six .tissue-comparison__takeaway p {
    color: var(--story-color-text);
}
#six .page-header .title-card .bottom {
    border-color: var(--story-color-border-subtle);
}

#six .textbox-transition1 {
    --transition-underline-color: var(--hra-primary-40);

    color: var(--story-color-heading);
    text-shadow: var(--story-splash-text-shadow);
}

#six .intro,
#six .section2-2 {
    background: linear-gradient(var(--story-color-page), var(--story-color-surface-low));
}

#six .picture1 {
    background: linear-gradient(var(--story-color-surface-low), var(--story-color-page));
}

#six .picture2 {
    background: linear-gradient(var(--story-color-page), var(--story-color-surface-low));
}

#six .setup,
#six .section3 {
    background: var(--story-color-card);
}

#six section.section4,
#six section.section5,
#six .cde-tutorial-stage {
    background: var(--story-color-surface-low);
}

#six .setup3 {
    background: var(--story-color-page);
}

#six .setup .setup-text p {
    color: var(--story-color-text) !important;
}

#six .mouse .info-text,
#six .mouse .info-text p {
    color: var(--story-color-text);
}

#six .image-card,
#six .organ-comparison,
#six .tissue-comparison__takeaway {
    background: var(--story-color-card);
    border-color: var(--story-color-border-subtle);
    box-shadow: var(--story-shadow);
}

#six .image-card {
    border: 1px solid var(--story-color-border-subtle);
}

#six .mouse .label {
    color: var(--story-color-on-label);
    background: var(--story-color-label);
}

#six .tissue-comparison__eyebrow,
#six .organ-comparison__number,
#six .tissue-comparison__takeaway .tissue-comparison__takeaway-label {
    color: var(--story-color-accent);
}

#six .tissue-sample {
    color: var(--story-color-heading);
    background: var(--story-color-surface);
    border-color: var(--story-color-border-subtle);
}

#six .tissue-sample:nth-child(1) .tissue-sample__condition {
    background: var(--story-condition-one);
}

#six .tissue-sample:nth-child(2) .tissue-sample__condition {
    background: var(--story-condition-two);
}

#six .tissue-sample:nth-child(3) .tissue-sample__condition {
    background: var(--story-condition-three);
}

#six .tissue-sample__condition {
    color: var(--story-color-heading);
}

#six .tissue-sample img {
    background: var(--story-color-artwork-surface);
    border-color: var(--story-color-border-subtle);
}

#six .tissue-comparison__takeaway {
    border-inline-start-color: var(--story-color-accent);
}

#six .tutorial-callout {
    --tutorial-info-accent: var(--story-color-info-accent);
    --tutorial-info-surface: var(--story-color-info-surface);

    color: var(--story-color-text);
    box-shadow: var(--story-shadow);
}

#six .tutorial-callout :is(a, button):focus-visible {
    outline-color: var(--story-color-focus);
}

#six:not(.story-animations-enabled) .page-header {
    --story-splash-overlay-opacity: 1;
}

@media (max-width: 600px) {
    #six .page-header::after {
        background: var(--story-splash-overlay-mobile);
    }

    #six .page-header .title-card {
        background: var(--story-title-card);
    }
}

@media (prefers-reduced-transparency: reduce) {
    #six .page-header .title-card {
        background: var(--story-color-card);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #six .page-header {
        --story-splash-overlay-opacity: 1;
    }
}

:root[data-contrast="more"] #six :is(
    .title-card,
    .image-card,
    .organ-comparison,
    .tissue-sample,
    .tissue-comparison__takeaway,
    .tutorial-callout
) {
    border-color: var(--story-color-border);
    border-width: 0.1875rem;
}

:root[data-contrast="more"] #six .transition__overlay {
    opacity: 0.96 !important;
    background: linear-gradient(90deg, var(--story-transition-scrim) 0%, rgb(32 30 61 / 96%) 72%, rgb(32 30 61 / 78%) 90%, transparent 100%);
}

:root[data-contrast="more"] #six .textbox-transition:not(.textbox-transition1) {
    color: var(--story-transition-text);
    text-shadow: 0 0 0.25rem #000000, 0 0 1.5rem #000000;
}

:root[data-contrast="more"] #six .textbox-transition1 {
    text-shadow: 0 0 0.25rem var(--story-color-card), 0 0 1.5rem var(--story-color-card);
}

:root[data-contrast="more"] #six .transition-emphasis {
    background-size: 100% 0.18em;
}

@media (prefers-contrast: more) {
    :root:not([data-contrast="standard"]) #six :is(
        .title-card,
        .image-card,
        .organ-comparison,
        .tissue-sample,
        .tissue-comparison__takeaway,
        .tutorial-callout
    ) {
        border-color: var(--story-color-border);
        border-width: 0.1875rem;
    }

    :root:not([data-contrast="standard"]) #six .transition__overlay {
        opacity: 0.96 !important;
        background: linear-gradient(90deg, var(--story-transition-scrim) 0%, rgb(32 30 61 / 96%) 72%, rgb(32 30 61 / 78%) 90%, transparent 100%);
    }

    :root:not([data-contrast="standard"]) #six .textbox-transition:not(.textbox-transition1) {
        color: var(--story-transition-text);
        text-shadow: 0 0 0.25rem #000000, 0 0 1.5rem #000000;
    }

    :root:not([data-contrast="standard"]) #six .textbox-transition1 {
        text-shadow: 0 0 0.25rem var(--story-color-card), 0 0 1.5rem var(--story-color-card);
    }

    :root:not([data-contrast="standard"]) #six .transition-emphasis {
        background-size: 100% 0.18em;
    }
}

@media (forced-colors: active) {
    #six,
    #six #main-content,
    #six :is(.page-header, .intro, .section2-2, .setup, .section3, .section4, .section5) {
        color: CanvasText;
        background: Canvas;
    }

    #six :is(.title-card, .image-card, .organ-comparison, .tissue-sample, .tissue-comparison__takeaway, .tutorial-callout) {
        color: CanvasText;
        background: Canvas;
        border: 2px solid CanvasText;
        box-shadow: none;
    }

    #six .transition__overlay {
        background: Canvas;
        opacity: 0.72 !important;
    }

    #six .textbox-transition,
    #six .textbox-transition1 {
        color: CanvasText;
        text-shadow: none;
    }

}