/* ============================================================================
   Picker
   ----------------------------------------------------------------------------
   A modal list you search rather than scroll: the control a <select> becomes
   once the list is long enough that finding a name in it is the hard part.

   A native <dialog> opened with showModal(), like .ckwm-confirm and
   .command-bar, so focus trapping, Escape and the inert backdrop are the
   browser's job. ckwm-picker.js builds the node per use and drops it on close;
   there is no markup partial to keep in step, because a <dialog> parked in the
   layout loses its modal state when hx-boost swaps <body> without ever firing
   `close`.

   The shell is .command-bar's, deliberately: the same box, the same search
   line at the top, the same list under it. A reader who has met one of the two
   has met both, and two overlay shells that differ by four pixels of padding
   is how a suite ends up looking assembled rather than designed.
   ========================================================================== */

.ckwm-picker {
    /* The UA centres a modal dialog with `margin: auto`, and the reset zeroes
       every margin — so without this it pins itself to the top-left corner and
       the backdrop click never has a corner to land in. */
    margin: auto;
    margin-top: 12vh;
    padding: 0;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    width: 460px;
    max-width: calc(100vw - 40px);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}
.ckwm-picker::backdrop { background: var(--backdrop); }
.ckwm-picker[open] { animation: pickerIn var(--transition) ease; }

/* The heading says what is being decided; the line under it says who it is
   being decided about. The subject is not decoration: the trigger is one row
   of a table, the dialog covers that table, and without the name carried onto
   the overlay the reader has to close it to check which row they opened. */
.ckwm-picker-head {
    padding: var(--space-7) var(--space-9) var(--space-5);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.ckwm-picker-head h2 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text);
}
.ckwm-picker-subject {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-muted);
}
.ckwm-picker-subject:empty { display: none; }

/* Borderless, like the command bar's: the dialog edge is already the frame, and
   a second box drawn inside it reads as a form field on a form that is not
   there. The icon is the affordance that says this line filters. */
.ckwm-picker-search {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-bottom: var(--border-width) solid var(--border-subtle);
}
.ckwm-picker-search i { color: var(--text-subtle); }
.ckwm-picker-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-size: var(--text-md);
}

.ckwm-picker-options {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 44vh;
    overflow-y: auto;
}
.ckwm-picker-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-8);
    cursor: pointer;
}
.ckwm-picker-option:hover { background: var(--surface-hover); }

/* Where the arrow keys have walked to, and therefore what Enter acts on. It
   carries a rail as well as a tint because the hover state is a tint too, and
   a mouse resting anywhere in the list would otherwise draw a second row that
   looks exactly as selected as the real one. */
.ckwm-picker-option-active {
    background: var(--brand-soft);
    color: var(--brand-on-soft);
    box-shadow: inset var(--border-accent-thick) 0 0 0 var(--brand);
}

/* The choice already in force. Marked rather than hidden or sorted to the top:
   the reader opened this dialog to change a decision, and the row they are
   changing away from is the one piece of context that makes the rest of the
   list mean anything. */
.ckwm-picker-option-current .ckwm-picker-name::after {
    content: "current";
    margin-left: var(--space-4);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ckwm-picker-name {
    font-size: var(--text-base);
    color: var(--text-body);
}
.ckwm-picker-option-active .ckwm-picker-name { color: var(--brand-on-soft); }

/* The second fact about an option, right-aligned so the names stay a column
   the eye can run down. Whatever tells two similar names apart goes here. */
.ckwm-picker-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.ckwm-picker-option-active .ckwm-picker-meta { color: var(--brand-on-soft); }

/* A search that matches nothing has to say so. An empty list under a filled
   search box reads as a component that broke. */
.ckwm-picker-empty {
    margin: 0;
    padding: var(--space-10) var(--space-8);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.ckwm-picker-legend {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-8);
    border-top: var(--border-width) solid var(--border-subtle);
    background: var(--surface-alt);
    font-size: var(--text-xs);
    color: var(--text-subtle);
}
.ckwm-picker-legend kbd {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

@keyframes pickerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}