/* ── Dropdown (Popover API) ──────────────────────────────────── */
    /* The panel is a [popover] → it renders in the top layer, so its
       containing block is the viewport, not the .dropdown wrapper, and
       CSS alone can't tie it to the trigger (anchor positioning isn't
       everywhere yet). The `dropdown` Stimulus controller measures the
       trigger on open and writes --dropdown-top/left/width here; the
       open/close animation below stays pure CSS. Opens on a click, so
       animating transform + opacity is CLS-safe. */
    .dropdown-panel {
        top: var(--dropdown-top, 0);
        left: var(--dropdown-left, 0);
        min-width: var(--dropdown-width, 0);

        opacity: 0;
        transform: translateY(-4px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            display 0.2s allow-discrete,
            overlay 0.2s allow-discrete;
    }

    .dropdown-panel:popover-open {
        opacity: 1;
        transform: translateY(-1px);
    }

    @starting-style {
        .dropdown-panel:popover-open {
            opacity: 0;
            transform: translateY(-4px);
        }
    }

    /* Caret flips while the panel is open — :has() is the only route
       back up from the popover's :popover-open state to the caret. */
    .dropdown:has(.dropdown-panel:popover-open) .dropdown-caret {
        transform: rotate(180deg);
    }