@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)
        );

        container: navigation-bar / inline-size;
        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;
    }

    /* The heading is the toolbar's title, which the toolbar keeps clear of
       its buttons. With no toolbar it sits alone over the bar's row. */
    .navigation-bar__heading {
        align-items: center;
        block-size: var(--toolbar-block-size);
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        text-align: center;
        transition: opacity 0.2s ease;
    }

    .navigation-bar > .navigation-bar__heading {
        inset-block-start: calc(
            var(--safe-area-block-start) + var(--edge-spacing-block)
        );
        inset-inline: var(--navigation-bar-gutter-start)
            var(--navigation-bar-gutter-end);
        position: absolute;
    }

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

    @media (min-width: 48rem) {
        .navigation-bar--toolbar-role-editor .navigation-bar__heading {
            align-items: flex-start;
            text-align: start;
        }
    }

    .navigation-bar[data-title-collapsed] .navigation-bar__heading,
    .navigation-bar--title-display-mode-inline .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;

        /* A long name wraps rather than losing its end, and a word longer
           than the screen breaks. */
        & > h1 {
            hyphens: auto;
            overflow-wrap: anywhere;
        }
    }

    .navigation-bar__large-title[data-title-collapsed] {
        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: 16rem;
        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;
        }
    }

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

    @container navigation-bar (inline-size >= 28rem) {
        .navigation-bar__search-button {
            display: none;
        }
    }

    @container navigation-bar (inline-size < 28rem) {
        .navigation-bar__search {
            block-size: 1px;
            clip-path: inset(50%);
            inline-size: 1px;
            overflow: hidden;
            position: absolute;
        }

        .navigation-bar__search-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 {
                block-size: var(--control-block-size);
                clip-path: none;
                inline-size: 100%;
                overflow: visible;
                position: static;
            }

            & > .navigation-bar__search-button {
                display: none;
            }
        }
    }

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

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