/* Companion on the transcription. The image-only viewer keeps its own sheet. */

aside.facsimile-aside {
    display: none;
}

img.facsimile-aside-img,
aside.facsimile-aside noscript img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    border: 1px solid var(--border-color-01);
    background: transparent;
}

/* A sourceless primary image must not paint. The noscript img has no such class. */
img.facsimile-aside-img:not([src]) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    img.facsimile-aside-img,
    aside.facsimile-aside noscript img {
        transition: none;
    }
}

@media screen and (min-width: 1312px) {
    html.facsimile-aside:not(.facsimile-aside-off) main.page-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        column-gap: 1.5rem;
    }

    /* max-width alone does not stop a flex item from shrinking below 800px. */
    html.facsimile-aside:not(.facsimile-aside-off) .page-content > .wrapper {
        flex: 0 0 auto;
        width: var(--content-width);
        max-width: var(--content-width);
        margin-left: 0;
        margin-right: 0;
    }

    html.facsimile-aside:not(.facsimile-aside-off) aside.facsimile-aside {
        display: block;
        flex: 0 1 40rem;
        min-width: 420px;
        max-width: 40rem;
        align-self: stretch;
    }

    /* Subtract --spacing-unit so the scan fits at scroll 0 under .page-content padding. */
    html.facsimile-aside:not(.facsimile-aside-off) div.facsimile-aside-frame {
        position: sticky;
        z-index: 1;
        top: calc(var(--header-height) + 6px);
        height: calc(100dvh - var(--header-height) - 6px - var(--spacing-unit) - var(--space-3));
    }

    html.facsimile-aside:not(.facsimile-aside-off) .page-content > .wrapper:has(.toc) {
        max-width: var(--content-width);
    }

    html.facsimile-aside:not(.facsimile-aside-off) article.page:has(.toc),
    html.facsimile-aside:not(.facsimile-aside-off) article.page:has(.toc) > .page-body,
    html.facsimile-aside:not(.facsimile-aside-off) article.page:has(.toc) > .page-body > :has(> .toc) {
        display: block;
    }

    /* Prefix of the chrome.css sticky rule. A shorter .toc selector loses. */
    html.facsimile-aside:not(.facsimile-aside-off) article.page:has(.toc) > .page-body > :has(> .toc) > .toc {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        align-self: auto;
    }
}