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

    /* Drawer dialog — Control Room chrome
    /* ------------------------------------------------------------------------
    /* Sharp rectangle, hairline border in --rule, neutral drop shadow. The
    /* drawer reads as a piece of bench equipment: sand-toned header strip,
    /* mono caps section titles, hairline rules between rows. No rounded
    /* corners, no blue shadow — those were the legacy SaaS look. */
    .nav__menu.popup {
        --panel-border-color: var(--rule);
        --panel-border-radius: 0;
        --panel-padding: 0;
        --panel-size: 42ch;
        --popup-display: grid;
        --nav-section-gap: 0;
        /* Inner inset for icon margins + button padding so rows breathe
           even though .popup__item is itself padding-inline: 0. */
        --popup-item-padding-inline: 0.85rem;

        background: var(--surface);
        block-size: auto;
        border: 1px solid var(--rule);
        border-radius: 0;
        box-shadow: 0 14px 28px -10px oklch(0% 0 0 / 0.22);
        gap: 0;
        grid-template-rows: auto 1fr auto;
        max-block-size: calc(100vh - var(--block-space) - var(--footer-height));
        overflow: hidden;
        padding: 0;
        scrollbar-gutter: stable both-edges;
        z-index: var(--z-nav);

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

    /* Calmer entry — small fade + nudge, no scale-from-0.2 bounce. The
    /* base .popup--animated rule defines a maximalist scale; we override
    /* it for the drawer specifically. */
    .nav__menu.popup--animated {
        transform: translateX(-50%) translateY(-6px);
        transform-origin: top center;

        &[open] {
            transform: translateX(-50%) translateY(0);
        }

        @starting-style {
            &[open] {
                opacity: 0;
                transform: translateX(-50%) translateY(-6px);
            }
        }
    }

    /* Header strip — sand-toned, hairline rule below. Holds search input
    /* + close button. Mono caps treatment matches every other section
    /* head in the app. */
    .nav__header {
        --actions-width: 2rem;

        align-items: center;
        background: var(--surface-sunken);
        border-block-end: 1px solid var(--rule);
        display: grid;
        grid-template-areas: "actions-start title actions-end";
        grid-template-columns: var(--actions-width) 1fr var(--actions-width);
        justify-items: center;
        padding-block: 0.45rem;
        padding-inline: 0.75rem;
    }

    .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: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        grid-area: title;
        letter-spacing: 0.18em;
        min-inline-size: 0;
        text-align: center;
        text-transform: uppercase;
    }

    /* Search input — flat full-width row inside the header band, with a
    /* bottom hairline rule and mono caps placeholder treatment. */
    .nav__menu input[type="search"] {
        background: var(--surface);
        border: 1px solid var(--rule);
        border-radius: 0;
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.875rem;
        inline-size: 100%;
        padding: 0.5rem 0.7rem;
    }

    .nav__menu input[type="search"]:focus,
    .nav__menu input[type="search"]:focus-visible {
        border-color: var(--ink);
        box-shadow: inset 0 -1px 0 0 var(--ink);
        outline: 0;
    }

    .nav__menu input[type="search"]::placeholder {
        color: var(--ink-faint);
    }

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

    /* Scroll body — owns the section + item rows. No internal padding;
    /* each section provides its own. */
    .nav__scroll-container {
        background: var(--surface);
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: auto;
        padding: 0;
    }

    /* Section group — hairline top rule, mono caps title strip. */
    .nav__section {
        border-block-start: 1px solid var(--rule);
        font-family: var(--font-body);
        font-size: 0.875rem;

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

    .nav__scroll-container > .nav__section:first-of-type,
    .nav__scroll-container > div:first-of-type > .nav__section:first-of-type {
        border-block-start: 0;
    }

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

    /* Section header (mono caps eyebrow) — sand background so it reads as
    /* a tab-divider in the drawer, not as a heavy blocking surface. */
    .nav__menu .popup__section-title {
        background: var(--surface-sunken);
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        padding: 0.45rem 0.85rem;
        text-transform: uppercase;
    }

    /* Top-of-drawer jump shortcuts — same row chrome as installations /
    /* sections / routes / settings, but with a hotkey hint pushed to the
    /* end of the row. */
    .nav__jump-list .popup__btn {
        align-items: center;
        display: flex;
        gap: 0.5ch;
    }

    .nav__jump-list .popup__btn kbd {
        margin-inline-start: auto;
    }

    /* Override the base popup.css rule that indents nested lists by
    /* 0.75ch when they live inside a <details>. The drawer's sections
    /* are <details>, but the rows inside them must run edge-to-edge so
    /* the hover background and selected stripe span the full drawer. */
    .nav__menu details .popup__list {
        margin-inline-start: 0;
    }

    /* Sharp drawer items — hairline-separated rows, no rounded corners,
    /* accent left-stripe on the active selection. The item background
    /* spans the full drawer width; horizontal breathing room comes from
    /* the inner button + icon, not from item-level padding. */
    .nav__menu .popup__item {
        background: var(--surface);
        border-block-end: 1px solid var(--rule-soft);
        border-radius: 0;
        padding-inline: 0;

        @media (any-hover: hover) {
            &:hover {
                background: var(--surface-sunken);
            }
        }

        &[aria-selected] {
            background: var(--surface-sunken);
            box-shadow: inset 3px 0 0 var(--accent);

            @media (any-hover: hover) {
                &:hover {
                    background: var(--surface-sunken);
                }
            }
        }
    }

    .nav__menu .popup__item:last-child {
        border-block-end: 0;
    }

    .nav__menu .popup__btn {
        --btn-border-radius: 0;
        border-radius: 0;
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 500;
        padding-block: 0.55rem;
    }

    .nav__menu .popup__icon {
        color: var(--ink-soft);
    }

    .nav__blank-slate {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.1em;
        margin: 2rem auto;
        text-align: center;
        text-transform: uppercase;

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

    /* Footer — sand strip, mono caps fine print. Same visual register as
    /* the report-spine eyebrows, kept quiet so it doesn't compete with
    /* the drawer content. */
    .nav__footer {
        background: var(--surface-sunken);
        border-block-start: 1px solid var(--rule);
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        line-height: 1.6;
        margin-block-start: 0;
        padding: 0.55rem 0.85rem;
        text-align: center;
        text-transform: uppercase;
        z-index: 1;

        @media (max-height: 668px) {
            font-size: 0.5625rem;
        }
    }

    .nav__footer a {
        color: var(--ink);
        text-decoration: none;
    }
}