@layer components {
    .popup {
        --btn-background: transparent;
        --panel-bg: var(--surface);
        --panel-border-color: var(--rule);
        --panel-border-radius: 4px;
        --panel-padding: var(--block-space);
        --panel-size: auto;
        --popup-icon-size: 24px;
        --popup-item-padding-inline: 0.4rem;
        --popup-display: flex;

        inset: 0 auto auto 50%;
        max-block-size: 70dvh;
        max-inline-size: min(55ch, calc(100vw - (var(--panel-padding))));
        min-inline-size: min(25ch, calc(100vw - (var(--panel-padding))));
        overflow: auto;
        position: absolute;
        /* Horizontal placement lives in `translate`, never `transform`: the
           orient classes and the --animated scale would otherwise fight over
           one property, and the last rule won (the drawer sat half off-screen
           on phones). */
        translate: -50% 0;
        z-index: var(--z-popup);

        &[open] {
            display: var(--popup-display);
        }

        /* orientation_helpers.js sets --orient-offset: the shift that keeps
           the panel inside the viewport when the anchor sits near an edge. */
        &.orient-left {
            inset-inline: auto 0;
            translate: var(--orient-offset, 0px) 0;
        }

        &.orient-right {
            inset-inline: 0 auto;
            translate: var(--orient-offset, 0px) 0;
        }

        form {
            display: contents;
        }
    }

    /* Any .popup opened as a full modal (showModal → browser top layer) must
       anchor to the viewport, not the document. The base .popup rule uses
       position:absolute against the initial containing block, which for a
       modal opened while scrolled down renders the panel pinned to the
       document top and yanks the page scroll. Fixed + viewport-centered
       keeps it in view regardless of scroll. Keyed off the plain .popup
       class rather than a bespoke modifier: every non-modal .popup (menus,
       dropdowns, the anchored board popups) is opened with show() and never
       matches :modal, so this can only ever apply where it's wanted. */
    .popup:modal {
        position: fixed;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        translate: -50% -50%;
    }

    /* Hide lists when all the items within are hidden */
    .popup__section {
        &:not(:has(.popup__list)),
        &:not(:has(.popup__list > *)),
        &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
            display: none;
        }
    }

    .popup__section-title {
        background: var(--surface-sunken);
        font-size: var(--text-small);
        font-weight: 600;
        inset-block-start: 0;
        list-style: none;
        padding: 0.75ch var(--inline-space-half);
        position: sticky;
        text-transform: uppercase;
        z-index: 1;

        &:is(summary) {
            align-items: center;
            cursor: pointer;
            display: flex;
            gap: 0.5ch;
        }

        &::-webkit-details-marker {
            display: none;
        }

        .icon--caret-down {
            font-size: 1ch;
            margin-inline-start: -0.5ch;
            transition: rotate 150ms ease-out;
        }

        .popup__section:not([open]) & {
            .icon--caret-down {
                rotate: -90deg;
            }
        }
    }

    .popup__list {
        display: flex;
        flex-direction: column;
        inline-size: 100%;
        list-style: none;
        margin: 0;
        max-inline-size: 100%;
        padding: 0;
        row-gap: 1px;

        details & {
            margin-inline-start: 0.75ch;
        }
    }

    .popup__item {
        align-items: center;
        background: transparent;
        border-radius: 2px;
        display: flex;
        gap: var(--popup-item-gap, 0);
        inline-size: 100%;
        max-inline-size: 100%;
        min-block-size: var(--popup-item-min-height, auto);

        @media (any-hover: hover) {
            &:hover {
                background: var(--color-ink-lightest);
            }
        }

        .checked {
            display: none;
        }

        &[aria-checked="true"] .checked {
            display: block;
        }

        &[aria-selected] {
            background-color: var(--color-selected);

            @media (any-hover: hover) {
                &:hover {
                    background-color: var(--color-selected);
                }
            }
        }
    }

    /* The actionable thing with padding within popup__item */
    .popup__btn {
        --btn-border-radius: 2px;
        --btn-border-size: 0;

        flex: 1 1 auto;
        font-weight: 500;
        gap: 0.75ch;
        justify-content: start;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        padding: var(--inline-space-half) var(--popup-item-padding-inline);
        text-align: start;

        &:has(.callsign) {
            display: grid;
            grid-template-columns: max-content 1fr auto;
            align-items: center;
        }
    }

    .popup__icon {
        --icon-size: 1em;

        inline-size: var(--popup-icon-size);
        margin-inline-start: var(--popup-item-padding-inline);
    }

    /* Animated
  /* -------------------------------------------------------------------------- */

    .popup--animated {
        opacity: 0;
        transform: scale(0.2);
        transform-origin: top left;
        transition: var(--dialog-duration) allow-discrete;
        transition-property: display, opacity, overlay, transform;

        &::backdrop {
            background-color: var(--color-black);
            opacity: 0;
            transform: scale(1);
            transition: var(--dialog-duration) allow-discrete;
            transition-property: display, opacity, overlay;
        }

        &[open] {
            opacity: 1;
            transform: scale(1);

            &::backdrop {
                opacity: 0.5;
            }
        }

        @starting-style {
            &[open] {
                opacity: 0;
                transform: scale(0.2);
            }

            &[open]::backdrop {
                opacity: 0;
            }
        }
    }
}