@layer components {
    /* The bar's height is its padding plus the toolbar's own row, and the
       collapsed heading is absolutely positioned over that row — so the
       collapse toggle is pure opacity and the bar can never change height.
       A heading that claims layout on collapse resizes the bar, which
       re-feeds the scroller's measured inset (navigation-stack.js) and makes
       the content jump under the reader. */
    .navigation-bar {
        --navigation-bar-gutter-start: calc(
            var(--safe-area-inline-start) + var(--edge-spacing-inline)
        );
        --navigation-bar-gutter-end: calc(
            var(--safe-area-inline-end) + var(--edge-spacing-inline)
        );

        padding-block: calc(
                var(--safe-area-block-start) + var(--edge-spacing-block)
            )
            var(--edge-spacing-block);
        padding-inline: var(--navigation-bar-gutter-start)
            var(--navigation-bar-gutter-end);
        position: relative;
    }

    /* Centred over the toolbar row; the inline insets keep it clear of leading
       and trailing toolbar buttons. */
    .navigation-bar__heading {
        align-items: center;
        block-size: var(--toolbar-block-size);
        display: flex;
        flex-direction: column;
        inset-block-start: calc(
            var(--safe-area-block-start) + var(--edge-spacing-block)
        );
        inset-inline: var(--toolbar-block-size);
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        text-align: center;
        transition: opacity 0.2s ease;
    }

    .navigation-bar__subtitle {
        line-height: 1;
    }

    @media (min-width: 48rem) {
        .navigation-stack--toolbar-role-editor .navigation-bar__heading {
            align-items: flex-start;
            block-size: var(--toolbar-block-size);
            inset: auto;
            position: static;
            text-align: start;
        }
    }

    .navigation-stack[data-title-collapsed] .navigation-bar__heading,
    .navigation-stack--title-display-mode-inline
        > .navigation-bar
        .navigation-bar__heading {
        opacity: 1;
    }

    .navigation-bar__large-title {
        padding-inline: calc(
                var(--safe-area-inline-start) + var(--edge-spacing-inline)
            )
            calc(var(--safe-area-inline-end) + var(--edge-spacing-inline));
        transition: opacity 0.2s ease;
        padding-block-end: 1rem;
    }

    .navigation-stack[data-title-collapsed] .navigation-bar__large-title {
        opacity: 0;
    }

    /* The search field is a toolbar item on the bar's trailing edge: a
       capsule in the item's glass with a magnifier and the input, sized by
       the control height, so it is touch-sized on a phone and a compact
       macOS toolbar field on a fine pointer. Enter submits its GET form. */
    .navigation-bar__search {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        inline-size: min(16rem, 48vw);
        block-size: var(--control-block-size);
        margin: 0;
        padding-inline: calc(var(--control-block-size) / 3);
        color: var(--secondary-label);
    }

    .navigation-bar__search-icon {
        display: flex;
        flex-shrink: 0;

        & svg {
            inline-size: calc(var(--control-block-size) * 0.4);
            block-size: calc(var(--control-block-size) * 0.4);
        }
    }

    .navigation-bar__search-input {
        flex: 1 1 auto;
        min-inline-size: 0;
        block-size: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
        appearance: none;
        background: transparent;
        color: var(--label);
        font: inherit;
        font-size: var(--font-size-body);

        &::placeholder {
            color: var(--secondary-label);
        }

        &::-webkit-search-decoration {
            appearance: none;
        }
    }

    .toolbar-item:has(> .navigation-bar__search:focus-within) {
        outline: 0.125rem solid var(--tint);
        outline-offset: 0.0625rem;
    }

    @media (width < 48rem) {
        .navigation-bar__search {
            inline-size: var(--control-block-size);
            justify-content: center;
            padding-inline: 0;
            position: relative;
        }

        .navigation-bar__search:has(
                > .navigation-bar__search-input:not(:placeholder-shown)
            ) {
            color: var(--tint);
        }

        .navigation-bar__search-input {
            cursor: pointer;
            inset: 0;
            opacity: 0;
            position: absolute;
        }

        .toolbar-item:has(> .navigation-bar__search:focus-within) {
            inset-block-start: calc(
                var(--safe-area-block-start) + var(--edge-spacing-block) +
                    (var(--toolbar-block-size) - var(--control-block-size)) / 2
            );
            inset-inline: var(--navigation-bar-gutter-start)
                var(--navigation-bar-gutter-end);
            position: absolute;
            z-index: 1;

            & > .navigation-bar__search {
                color: var(--secondary-label);
                inline-size: 100%;
                justify-content: flex-start;
                padding-inline: calc(var(--control-block-size) / 3);
            }

            & .navigation-bar__search-input {
                cursor: text;
                opacity: 1;
                position: static;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .navigation-bar__heading,
        .navigation-bar__large-title {
            transition: none;
        }
    }
}

@layer components {
    @media print {
        .navigation-bar {
            display: none;
        }
    }
}