@layer components {
    /* Trigger — Control Room top bar: [logo] Mechbase / {location} ▾ [J]
  /* ------------------------------------------------------------------------ */

    .nav__trigger {
        align-items: baseline;
        background: transparent;
        border: 0;
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        font-family: var(--font-body);
        font-size: var(--text-small);
        gap: 0.5em;
        inline-size: auto;
        padding: 0;
        white-space: nowrap;

        @media (any-hover: hover) {
            &:hover .nav__trigger-location {
                color: var(--ink);
            }
        }
    }

    .nav__trigger-logo {
        align-self: center;
        color: var(--ink);
        display: inline-flex;
    }

    .nav__trigger-logo svg {
        display: block;
        height: 0.85em;
        width: auto;
    }

    .nav__trigger-brand {
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -0.01em;
    }

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

    .nav__trigger-location {
        color: var(--ink-soft);
        font-weight: 500;
        max-inline-size: 28ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav__trigger-chevron {
        color: var(--ink-mute);
        font-size: 0.75em;
    }

    .nav__trigger kbd {
        margin-inline-start: 0.25em;
    }

    /* Dialog
  /* ------------------------------------------------------------------------ */

    .nav__menu.popup {
        --panel-border-color: var(--color-selected-dark);
        --panel-border-radius: 1.4em;
        --panel-padding: var(--block-space);
        --panel-size: 45ch;
        --popup-display: grid;
        --nav-section-gap: 2px;

        block-size: auto;
        box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
            0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
            0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
            0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
        grid-template-rows: auto 1fr auto;
        gap: var(--nav-section-gap);
        max-block-size: calc(100vh - var(--block-space) - var(--footer-height));
        overflow: hidden;
        padding-block-end: 0;
        scrollbar-gutter: stable both-edges;
        z-index: var(--z-nav);

        @media (max-height: 668px) {
            max-block-size: calc(100vh - var(--block-space));
        }
    }

    .nav__scroll-container {
        display: flex;
        flex-direction: column;
        gap: var(--nav-section-gap);
        margin-inline: calc(-1 * var(--block-space));
        /* space for scrollbar */
        overflow: auto;
        padding-block-end: var(--nav-section-gap);
        padding-inline: var(--block-space);
    }

    .nav__close {
        @media (any-hover: hover) {
            display: none !important;
        }
    }

    .nav__section {
        border-block-start: 1px solid var(--color-ink-lighter);
        font-size: var(--text-small);

        &[open] {
            padding-block-end: 0.4rem;
        }
    }

    .nav__section--secret:not([data-is-filtering]) {
        display: none;
    }

    .nav__header {
        --actions-width: 2rem;

        display: grid;
        grid-template-columns: var(--actions-width) 1fr var(--actions-width);
        grid-template-areas:
            "actions-start title actions-end";
        justify-items: center;
    }

    .nav__header-actions {
        display: flex;
        font-size: var(--text-x-small);
        gap: var(--inline-space);
        inline-size: var(--actions-width);
        min-inline-size: fit-content;
    }

    .nav__header-actions--end {
        grid-area: actions-end;
        justify-content: flex-end;
        margin-inline-start: auto;
    }

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

    .nav__header-title {
        color: inherit;
        grid-area: title;
        justify-content: center;
        margin: auto;
        min-inline-size: 0;
        text-align: center;
    }

    .nav__hotkeys {
        --gap: 8px;

        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        inline-size: 100%;
        list-style: none;
        justify-content: center;
        margin: var(--block-space) auto calc(var(--block-space-half) / 2);
        max-inline-size: 100%;

        /* When all its children are hidden, hide this as well so it doesn't take up space */
        &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
            display: none;
        }

        .btn {
            --btn-border-radius: 0.4em;

            align-content: end;
            aspect-ratio: 5/3;
            background-color: var(--color-ink-lightest);
            border-radius: 0.5em;
            container-type: inline-size;
            flex-basis: calc((100% - var(--gap) * 2) / 3);
            flex-direction: column;
            font-size: var(--text-small);
            line-height: 1;
            justify-content: center;
            overflow: hidden;
            position: relative;
            row-gap: 0.3lh;
            text-align: center;

            kbd {
                inset: 0.66em 0.33em auto auto;
                line-height: 1.4;
                opacity: 0.5;
                position: absolute;

                @media (any-hover: none) {
                    /* This is a reasonable way to assert touch devices. any-pointer would seem */
                    /* to be a better fit but it is incorrectly reported on many devices */
                    display: none;
                }
            }

            .icon {
                --icon-size: 2em !important;
            }

            span {
                display: flex;
                text-wrap: nowrap;
            }

            @media (max-width: 639px) {
                font-size: var(--text-x-small);
                font-size: clamp(var(--text-xx-small), 3.15cqi, var(--text-small));
                font-weight: 500;
            }
        }
    }

    .nav__blank-slate {
        font-size: var(--text-small);
        margin: 2rem auto;

        .nav:has(.popup__item:not([hidden])) & {
            display: none;
        }
    }

    .nav__footer {
        background-color: var(--color-canvas);
        border-block-start: 1px solid var(--color-ink-lighter);
        font-size: var(--text-small);
        line-height: 1.6;
        margin-block-start: calc(-1 * var(--nav-section-gap));
        padding: 1.5ch;
        text-align: center;
        z-index: 1;

        @media (max-height: 668px) {
            font-size: var(--text-x-small);
        }
    }
}