@layer components {
    /* Header layout:
       Row 1  top bar (menu)
       Row 2  back-nav (LEFT)  ·  breadcrumb (RIGHT)
       Row 3  start-actions (additional page-level buttons)
       1px rule-soft bottom border anchors the whole chrome. */
    .header {
        --header-gap: 0.5ch;
        --btn-icon-size: 1rem;
        --header-btn-size: 2rem;

        position: relative;
        border-block-end: 1px solid var(--rule-soft);
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "menu        menu  menu"
            "back-nav    .     breadcrumb"
            "actions-start . .";
        max-inline-size: 100dvw;
        padding-block: calc(var(--block-space-half) + env(safe-area-inset-top, 0px)) var(--block-space-half);
        padding-inline: var(--main-padding);
        row-gap: 0.25rem;

        &:has(nav:not(.breadcrumb)) {
            row-gap: 0;
        }

        nav:not(.breadcrumb) {
            grid-area: menu;
            margin-inline: auto;
        }
    }

    .header__actions {
        align-self: center;
        display: flex;
        font-size: var(--text-x-small);
        gap: var(--header-gap);
    }

    .header__actions--start {
        grid-area: actions-start;
        margin-inline-end: auto;
    }

    /* When actions-start contains ONLY a back button, move it up to the
       back-nav row so it sits level with the breadcrumb on the right.
       Keeps the older two-column "actions + title + actions" for pages
       that put additional buttons next to the back. */
    .header__actions--start:has(> .btn--back:only-child) {
        grid-area: back-nav;
        justify-self: start;
    }

    .header__skip-navigation {
        --left-offset: -999em;

        inset-block-start: 4rem;
        inset-inline-start: var(--left-offset);
        position: absolute;
        white-space: nowrap;
        z-index: 11;

        &:focus {
            --left-offset: var(--inline-space);
        }
    }

    /* Breadcrumb
  /* ------------------------------------------------------------------------ */

    .breadcrumb {
        align-items: center;
        color: var(--ink-faint);
        display: flex;
        /* Wrap at item/separator boundaries. Flex keeps each item at its
           natural min-content width, so multi-word items stay intact and
           line breaks happen *between* items first. */
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        /* row-gap tightens vertical rhythm when the breadcrumb spills to
           a second line; column-gap preserves the original spacing. */
        gap: 0.15em 0.5ch;
        grid-area: breadcrumb;
        justify-content: flex-end;
        justify-self: end;
        letter-spacing: 0.14em;
        margin-block-start: 0;
        text-transform: uppercase;
    }

    .breadcrumb__item {
        color: inherit;
        text-decoration: none;
        /* Safety net for the pathological case: a single item so long it
           exceeds the full breadcrumb line. */
        overflow-wrap: anywhere;

        @media (any-hover: hover) {
            &:not(.breadcrumb__item--current):hover {
                color: var(--ink);
            }
        }
    }

    .breadcrumb__item--current {
        color: var(--ink);
        font-weight: 700;
    }

    .breadcrumb__sep {
        color: var(--ink-mute);
        font-weight: 400;
    }
}