.navigation {
    inline-size: 100%;
    max-inline-size: 60rem;
    overflow: hidden;

    ul {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: grid;
        grid-template-columns: 1fr 2.75rem;
        align-items: center;
        min-block-size: 3.5rem;
        padding: 0.5rem;
        border-block-start: 1px solid rgb(255 255 255 / 0.12);
        border-inline-start: 0.2rem solid var(--player-color, white);

        &:not([data-empire]) { background: rgb(70 130 180 / 0.1) }

        button {
            display: grid;
            place-items: center;
            inline-size: 3rem;
            block-size: 3rem;
            border: 1px solid rgb(255 255 255 / 0.24);
            border-radius: 0.5rem;
            background: none;
            color: inherit;
            cursor: pointer;

            &:hover { background: rgb(255 255 255 / 0.12) }

            svg {
                inline-size: 1.5rem;
                block-size: 1.5rem;
            }
        }
    }

    a {
        display: grid;
        align-content: center;
        min-inline-size: 0;
        padding-inline-start: 0.75rem;
        color: inherit;
        text-decoration: none;

        b {
            overflow: hidden;
            font-size: 0.875rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        small {
            margin-block-start: 0.125rem;
            color: darkgray;
            font-size: 0.6875rem;
        }
    }

    dialog > div {
        block-size: 70vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-snap-type: y mandatory;
    }

    figure {
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 1rem;
        min-block-size: 100%;
        margin: 0;
        scroll-snap-align: center;

        h2 { color: color-mix(in oklab, var(--player-color, var(--operator-accent)) 60%, black) }
    }

    @container (min-width: 40rem) {
        border: 1px solid dimgray;
        border-radius: var(--operator-radius);

        ul {
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
            gap: 1px;

            li {
                grid-template-columns: 1fr auto;
                min-block-size: auto;
                padding: 0;
                border-inline-start: 4px solid var(--player-color, var(--operator-accent));
                box-shadow: 0 0 0 1px dimgray;

                &:not([data-empire]) { background: none }

                button {
                    align-self: stretch;
                    border: none;
                    border-inline-start: 1px solid dimgray;
                    border-radius: 0;

                    &:hover { background: rgb(255 255 255 / 0.1) }
                }
            }
        }

        a {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            padding: 1rem;

            b { font-weight: inherit }
            small { margin-block-start: 0 }
            &:hover { text-decoration: underline }
        }
    }
}