/* ============================================================================
   Dropdown
   ----------------------------------------------------------------------------
   The list a <select> cannot hold: several answers at once, or a list long
   enough to search. A trigger button opens a panel through the Popover API, so
   opening it, closing it on an outside click and closing it on Escape are the
   browser's job, and the panel draws in the top layer where no card's overflow
   can clip it. position-area puts it under the trigger, which a popover opened
   by popovertarget has as its implicit anchor, so no anchor has to be named.

   The options are real inputs inside labels: checkboxes for several answers,
   radios for one. The form posts what is ticked with no script at all.
   ckwm-dropdown.js adds the rest: it writes the choice into the trigger,
   filters the list as the search line is typed into, closes a one-answer
   panel when it is answered, lets a row in one dropdown tick and lock rows in
   another (data-dropdown-reach), and empties every dropdown in a container
   from one button (data-dropdown-clear).

   The trigger wears .form-input for its box, the one pairing
   ComponentMixAllowed grants this sheet, so a dropdown beside a select is the
   same box at both sizes. button.dropdown-trigger outranks .form-input and
   .form-input-sm on specificity, so the end padding and the arrow hold whatever
   order the cascade loads the two sheets in.
   ========================================================================== */

button.dropdown-trigger {
    display: block;
    overflow: hidden;
    padding-right: var(--space-16);
    background: var(--select-arrow), var(--surface);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* The same surface as the open list of a select, which reset.css draws: one
   raised box, one shadow, one inset for every list a control opens. */
.dropdown-panel {
    /* The UA gives a popover inset: 0 and margin: auto, which centres it in the
       viewport. position-area only places a box whose insets are auto. */
    inset: auto;
    margin: var(--space-2) 0;
    position-area: block-end span-inline-end;
    /* A trigger at a row's right edge, an actions menu, has no room to span towards the end, so
       the panel may open towards the start as well as above. */
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    min-width: anchor-size(width);
    max-height: 44vh;
    padding: 0;
    overflow: hidden;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
/* Display only while open. An author display beats the UA's display: none on a
   closed popover, so a bare `display: flex` here would draw every panel shut. */
.dropdown-panel:popover-open { display: flex; flex-direction: column; }
/* A row the search has filtered out. [hidden] alone loses to the display each
   row declares below. */
.dropdown-panel [hidden] { display: none; }

/* Borderless, like the picker's: the panel edge is already the frame. */
.dropdown-search {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.dropdown-search i { color: var(--text-subtle); }
.dropdown-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-base);
}

/* The rows scroll and the search line stays put above them. */
.dropdown-options {
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.dropdown-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    color: var(--text-body);
    white-space: nowrap;
    cursor: pointer;
}
.dropdown-option:hover { background: var(--surface-hover); }
/* A menu of actions: each row is a submit button in its own form, so a choice posts at once. The
   button drops the platform's box and takes the whole row, and reads as a row like the labels do. */
button.dropdown-option {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}
.dropdown-option input {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--brand);
}
/* One answer: the radio holds the state, but a column of circles reads as a
   form rather than a list. It is clipped out of sight rather than hidden, so it
   keeps its place in the tab order and its arrow keys, and the row shows the
   choice with the picker's tint. */
.dropdown-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.dropdown-option:has(input[type="radio"]:checked) {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
}
/* The picker's rail, for the row the keyboard is on. */
.dropdown-option:has(input:focus-visible) {
    box-shadow: inset var(--border-accent-thick) 0 0 0 var(--brand);
}
.dropdown-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.dropdown-option:has(input[type="radio"]:checked) .dropdown-meta { color: var(--brand-on-soft); }

/* A row the reader cannot change: most often one another dropdown's choice has ticked and locked,
   whose meta says which choice that was. It reads as settled rather than as one more row to click,
   so it drops the hover and the pointer and its name steps back to the meta's colour. */
.dropdown-option:has(input:disabled) {
    color: var(--text-muted);
    cursor: default;
}
.dropdown-option:has(input:disabled):hover { background: transparent; }

/* A section is a title, a line, or both. The title is the caption size the
   sidebar's group labels use, so it reads as a heading over rows rather than
   as a row nobody can pick. */
.dropdown-section {
    margin: 0;
    padding: var(--space-4) var(--space-6) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-subtle);
}
.dropdown-separator {
    margin: var(--space-2) 0;
    border: 0;
    border-top: var(--border-width) solid var(--border-subtle);
}

/* A search that matches nothing says so. */
.dropdown-empty {
    margin: 0;
    padding: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}