@layer components {
    .navigation-stack {
        --navigation-stack-bar-block-size: var(--safe-area-block-start);

        --navigation-stack-padding-block-start: var(
            --navigation-stack-bar-block-size
        );

        --navigation-stack-padding-block-end: max(
            1rem,
            var(--safe-area-block-end),
            var(--navigation-stack-bottom-block-size, 0rem)
        );

        --navigation-stack-scroll-edge-blur: 1rem;
        --navigation-stack-scroll-edge-extent: 0rem;
        --navigation-stack-scroll-edge-material: light-dark(
            oklch(from var(--system-background) 98% c h / 60%),
            oklch(from var(--system-background) 20% c h / 50%)
        );

        block-size: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        position: relative;
    }

    /* The bar's row is as tall as the space the content reserves for it,
       so the scroll edge covers the whole bar. An inline title with no
       toolbar is positioned out of flow, which would otherwise leave the
       row only as tall as its padding. */
    .navigation-stack > .navigation-stack__bar {
        grid-column: 1;
        grid-row: 1;
        min-block-size: var(--navigation-stack-bar-block-size);
        transition:
            opacity 0.3s ease,
            translate 0.3s ease;
        z-index: 2;
    }

    .navigation-stack--toolbar-visibility-hidden > .navigation-stack__bar {
        opacity: 0;
        pointer-events: none;
        translate: 0 -100%;
    }

    .navigation-stack__edge {
        backdrop-filter: blur(
            calc(
                var(--navigation-stack-scroll-edge-blur) *
                    var(--navigation-stack-scroll-edge-progress)
            )
        );
        background-color: var(--navigation-stack-scroll-edge-material);
        grid-column: 1;
        opacity: var(--navigation-stack-scroll-edge-progress);
        pointer-events: none;
        z-index: 1;
    }

    .navigation-stack__edge--top {
        --navigation-stack-scroll-edge-progress: var(
            --navigation-stack-scroll-edge-start-progress,
            0
        );

        grid-row: 1;
        margin-block-end: calc(-1 * var(--navigation-stack-scroll-edge-extent));
    }

    .navigation-stack__edge--bottom {
        --navigation-stack-scroll-edge-progress: var(
            --navigation-stack-scroll-edge-end-progress,
            0
        );

        grid-row: 3;
        margin-block-start: calc(
            -1 * var(--navigation-stack-scroll-edge-extent)
        );
    }

    .navigation-stack__content {
        display: flex;
        flex-direction: column;
        grid-column: 1;
        grid-row: 1 / 4;
        overflow: auto;
        overscroll-behavior: contain;
        padding-block-start: var(--navigation-stack-padding-block-start);
        padding-block-end: var(--navigation-stack-padding-block-end);
        position: relative;
    }

    .navigation-stack.navigation-stack--bar-padding {
        --navigation-stack-bar-block-size: calc(
            var(--safe-area-block-start) + 2 * var(--edge-spacing-block)
        );
    }

    /* A large title with no toolbar reserves only the bar's padding, so once
       it collapses the bar grows to the toolbar row its heading sits in. The
       content keeps its padding, so nothing under the reader moves. */
    .navigation-stack--bar-padding[data-title-collapsed]
        > .navigation-stack__bar {
        min-block-size: calc(
            var(--safe-area-block-start) + var(--toolbar-block-size) + 2 *
                var(--edge-spacing-block)
        );
    }

    .navigation-stack.navigation-stack--bar-toolbar {
        --navigation-stack-bar-block-size: calc(
            var(--safe-area-block-start) + var(--toolbar-block-size) + 2 *
                var(--edge-spacing-block)
        );
    }

    .navigation-stack__content > * {
        --safe-area-block-start: 0rem;
        --safe-area-block-end: 0rem;

        flex-shrink: 0;
    }

    .navigation-stack__content > .navigation-stack__fill {
        position: absolute;
        inset: 0;
    }

    .navigation-stack__content > .navigation-stack__inset {
        padding-block-start: 1rem;
    }

    .navigation-stack__content > .navigation-stack__expand {
        flex-grow: 1;
    }

    .navigation-stack__content.navigation-stack__content--extend-top {
        padding-block-start: 0rem;
    }

    .navigation-stack__content > .navigation-stack__extend-top {
        --safe-area-block-start: var(--navigation-stack-padding-block-start);
    }

    .navigation-stack__content.navigation-stack__content--extend-bottom {
        padding-block-end: 0rem;
    }

    .navigation-stack__content > .navigation-stack__extend-bottom {
        --safe-area-block-end: var(--navigation-stack-padding-block-end);
    }

    .navigation-stack__bottom {
        grid-column: 1;
        grid-row: 3;
        padding-block: 1rem calc(var(--safe-area-block-end) + 1.5rem);
        padding-inline: calc(
                var(--safe-area-inline-start) + var(--edge-spacing-inline)
            )
            calc(var(--safe-area-inline-end) + var(--edge-spacing-inline));
        z-index: 2;
    }
}

@layer components {
    @media print {
        .navigation-stack {
            block-size: auto;
            display: block;
        }

        .navigation-stack__content {
            overflow: visible;
            padding-block: 0;
        }

        .navigation-stack__edge {
            display: none;
        }
    }
}