@layer components {

    /* Control Room header:
       Row 1  top bar (menu)
       Row 2  back-nav (LEFT)          ·  breadcrumb (RIGHT)
       Row 3  start-actions  ·  title  ·  end-actions (page-level h1 + primary buttons)
       Columns auto-size to side content so the middle absorbs the rest —
       nav row needs the full width even when side columns are empty.
       1px rule-soft bottom border anchors the whole chrome. */
    .header {
        --header-gap: 0.5ch;
        --btn-icon-size: 1rem;
        --header-btn-size: 2rem;

        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 title actions-end";
        max-inline-size: 100dvw;
        padding-block: calc(var(--block-space-half) + var(--custom-safe-inset-top, 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;
        }

        &:has(~ #main .card-columns) {
            inline-size: 100dvw;
            margin-inline: auto;
            max-inline-size: var(--main-width);
        }

        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__actions--end {
        grid-area: actions-end;
        justify-content: flex-end;
        margin-inline-start: auto;
    }

    .header__title {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: var(--text-large);
        font-weight: 700;
        grid-area: title;
        letter-spacing: -0.02em;
        margin: 0 auto;
        min-inline-size: 0;
        text-align: center;
    }

    .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);
        }
    }

    .header__logo {
        color: var(--color-ink);
        font-size: 1.2rem;
        inline-size: auto;
        margin-block-start: 0.1em;

        span {
            background: var(--color-ink-lightest);
            block-size: auto;
            border-radius: 0.3125em;
            box-shadow:
                0 0 0 1px oklch(var(--lch-ink-darkest) / 0.1),
                0 0.1em 0.2em -0.1em oklch(var(--lch-ink-darkest) / 0.05),
                0 0.2em 0.4em -0.2em oklch(var(--lch-ink-darkest) / 0.05),
                0 0.3em 0.6em -0.3em oklch(var(--lch-ink-darkest) / 0.05);
            display: grid;
            height: 1.5em;
            inline-size: 1.5em;
            padding: 0.325em 0.275em 0.225em 0.275em;
            place-content: center;
            width: 1.5em;
        }

        svg {
            height: 100%;
            margin-inline-start: 0.4125em;
            margin-inline-end: 0.75em;
            max-height: 0.8625em;
            overflow: visible;
            width: auto;
        }
    }

    /* Optional class to stack header actions on small screens.
       The desktop grid-template-areas already work on mobile — back-nav +
       breadcrumb sit on the same row, actions-start/title/actions-end below.
       Earlier this class redefined areas without `back-nav`, which orphaned
       the :has(> .btn--back:only-child) routing into an implicit grid track
       and wedged the back button at the viewport edge on phones. We now only
       tweak the title margin under this class. */
  /* ------------------------------------------------------------------------ */

    .header--mobile-actions-stack {
        @media (max-width: 639px) {
            .header__title {
                margin-block-start: 0.25rem;
            }
        }
    }

    /* 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;
    }
}