/* forms.css — auto-split from style.css. */

@media (max-width: 640px) {
    .form-group input,
    .form-group select,
    .form-group textarea,
    .settings-form input,
    .settings-form select,
    .settings-form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .form-hint {
        overflow-wrap: anywhere;
    }
    .form-group > div[style*="display: flex"] {
        flex-wrap: wrap;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label,
.settings-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* A field label standing on its own above a table or a group of
   controls (Release Groups' "Current entries"). */
.settings-label {
    display: block;
    margin: 20px 0 8px;
}

.settings-label:first-child {
    margin-top: 0;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-body);
    transition: border-color 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.form-group textarea[spellcheck="false"] {
    font-family: var(--font-mono);
    font-size: 13px;
    tab-size: 2;
    -moz-tab-size: 2;
}

.form-hint {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.45;
}

/* A hint under a field is one sentence and reads as a caption, not a
   paragraph: cap the measure so it never runs the card's full width. */
.form-group > .form-hint {
    max-width: 72ch;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Match the per-form-group rhythm so vertical spacing is even
       whether the next sibling is a row, a single form-group, or a
       settings-subheading. Without this the row's children supply the
       gap and adjacent-sibling margin collapse skips them, leaving
       16+24=40px before a heading vs the 24px collapse after a plain
       form-group. */
    margin-bottom: 16px;
}

.settings-form .form-group { margin-bottom: 16px; }
/* An inline action row (Sync now / Unlink, the Test buttons) has no
   bottom margin because it used to end its card; a group placed
   after one keeps the same 16px rhythm the groups have among
   themselves. */
.settings-form .settings-inline-actions + .form-group { margin-top: 16px; }

/* The card's own padding already closes it; without this the last
   field adds its 16px on top and every card sits deeper at the
   bottom than at the top. */
.settings-form .cf-section > .form-group:last-child,
.settings-form .cf-section > .form-row:last-child,
.cf-section.settings-form > .form-group:last-child {
    margin-bottom: 0;
}

/* Inside a form-row, the row itself owns the bottom-margin. Zero
   the children so the row's height is clean and consecutive rows
   don't double-up. */
.form-row > .form-group { margin-bottom: 0; }

/* One height for every variant and element. The transparent border
   keeps `.btn-primary` (no visible border) level with the bordered
   variants, and the explicit line-height keeps an `<a class="btn">`
   level with a `<button>`; without them a primary sat 2px shorter
   than its secondary neighbor and a link 3px taller. Regular = 41px,
   `.btn-sm` = 32px. */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    font-family: var(--font-body);
    text-decoration: none;
    text-align: center;
    color: var(--bg);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-grab {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 6px 14px;
    font-size: 13px;
}

.btn-grab:hover { border-color: var(--accent); color: var(--accent); }

.btn-grab:disabled { opacity: 0.6; cursor: default; }

.btn-grab.btn-success { border-color: var(--green); color: var(--green); background: var(--bg-elevated); }

.btn-grab.btn-error { border-color: var(--red); color: var(--red); }

/* Post-grab Cancel state — search.js flips the Grab button into
   this on a successful grab so users can immediately undo without
   navigating to /downloads. Color matches `.btn-grab.btn-error` so
   the destructive intent is obvious; full hover treatment too so
   the button doesn't look stuck in a non-interactive state. */
.btn-grab.btn-cancel { border-color: var(--red); color: var(--red); }
.btn-grab.btn-cancel:hover { background: rgba(var(--red-rgb), 0.15); }

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    margin-bottom: 20px;
}

.alert-error {
    background: rgba(var(--red-rgb), 0.1);
    border: 1px solid rgba(var(--red-rgb), 0.3);
    color: var(--red);
}

.alert-success {
    background: rgba(var(--green-rgb), 0.1);
    border: 1px solid rgba(var(--green-rgb), 0.3);
    color: var(--green);
}

.alert-warn {
    background: rgba(var(--yellow-rgb), 0.1);
    border: 1px solid rgba(var(--yellow-rgb), 0.3);
    color: var(--yellow);
}

.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-bar input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
}

.search-bar input:focus { outline: none; border-color: var(--accent); }

.search-bar select {
    padding: 10px 30px 10px 12px; /* right: chevron room */
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
}

.empty-state .btn { margin-top: 16px; }

/* ── Icon buttons ─────────────────────────────────────────────────
   One round family for every icon-only control: modal close buttons,
   the episode-row actions and the monitor-all toggle on the series
   page, the card delete crosses, and the library sort direction.
   32px regular, 28px small; `-danger` turns red on hover. State
   variants (loading, success, error, manual override, active) keep
   their own colors in their page files. */
.btn-icon,
.btn-icon-sm,
.btn-icon-danger,
.icon-btn,
.monitor-all-btn,
.library-sort-dir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-elevated);
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-icon-sm,
.btn-icon-danger,
.icon-btn,
.monitor-all-btn {
    width: 28px;
    height: 28px;
}

.btn-icon:hover,
.btn-icon-sm:hover,
.icon-btn:hover:not(:disabled),
.monitor-all-btn:hover:not(:disabled),
.library-sort-dir:hover {
    color: var(--text);
    border-color: var(--border-accent);
}

.btn-icon-danger:hover {
    color: var(--red);
    border-color: rgba(var(--red-rgb), 0.5);
    background: rgba(var(--red-rgb), 0.12);
}

.btn-icon svg,
.btn-icon-sm svg,
.icon-btn svg,
.monitor-all-btn svg,
.library-sort-dir svg {
    display: block;
}

.btn-search-series {
    background: rgba(0,0,0,0.6);
    border-color: transparent;
    color: var(--text);
    backdrop-filter: blur(4px);
}

.btn-search-series:hover { background: var(--accent); color: var(--bg); }

.btn-remove-series {
    background: rgba(0,0,0,0.6);
    border-color: transparent;
    color: var(--text);
    backdrop-filter: blur(4px);
}

.btn-remove-series:hover { background: var(--red); color: #fff; }

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-danger {
    background: rgba(var(--red-rgb), 0.15);
    color: var(--red);
    border: 1px solid rgba(var(--red-rgb), 0.3);
}

.btn-danger:hover { background: rgba(var(--red-rgb), 0.25); }

.btn-ghost {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
}

.btn-ghost:hover { color: var(--text); border-color: var(--border-accent); }

.btn-success {
    background: var(--green);
    color: var(--bg);
}


@media (max-width: 640px) {
    .search-bar { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
}

/* Solid-fill overrides of the muted `.btn-secondary` / `.btn-danger`
   defined earlier in this file. Source-order wins, so these are the
   styles that actually render — the earlier rules survive only as
   the muted-rgba fallback if these are deleted. Don't trim either
   block thinking it's redundant: the `data-ryokan-confirm-danger`
   opt in `static/js/base.js` toggles `.btn-danger` on the modal Yes
   button to render the red destructive treatment, and that depends
   on the solid-fill version below winning the cascade. The earlier
   muted-rgba block stays for buttons that want a softer red (e.g.
   inline-delete `<button class="btn-icon btn-danger">` row actions
   that shouldn't shout). If consolidating, fold both versions into
   classed variants (`.btn-danger-solid` vs `.btn-danger-muted`)
   rather than picking one. */
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.btn-success { background: var(--green); color: var(--bg); }

.btn-danger { background: var(--red); color: var(--bg); }

/* Hover for the solid fill above. Without this the muted block's
   `.btn-danger:hover` (same specificity, earlier in the file) wins and
   fades the fill to a faint tint under the dark label, so the label
   disappears while the pointer is on it. Same shade the Remove-series
   modal uses. */
.btn-danger:hover { background: var(--red-hover); }

/* Anchors styled as buttons (`<a class="btn btn-primary">`). base.css
   gives every `a:hover` the accent color at (0,1,1), which outranks
   the (0,1,0) label color on the variants, so a hovered solid button
   painted its label in its own fill color and the text vanished. Pin
   the label color per variant at (0,2,1) and keep links underline-free. */
a.btn:hover { text-decoration: none; }

a.btn-primary:hover,
a.btn-success:hover,
a.btn-danger:hover { color: var(--bg); }

a.btn-secondary:hover,
a.btn-grab:hover { color: var(--accent); }

a.btn-ghost:hover { color: var(--text); }

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

/* ─── Setting rows ────────────────────────────────────────────────
 *
 * A boolean setting is a row: its name with a one-line description
 * underneath on the left, the checkbox on the right, a hairline
 * between rows. The description belongs to the row instead of
 * trailing the control as a footnote, so a card of five switches
 * reads as five items rather than ten alternating lines. The whole
 * row is the label, so clicking anywhere on it toggles the box. Each
 * row is its own card-fill box with the control radius; a bare
 * hairline on the page background gave almost no separation. */
.setting-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.setting-rows:last-child {
    margin-bottom: 0;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-transform: none;
    cursor: pointer;
}

/* The field-label recipe in sentence case and the text color: same
   size, weight, and tracking as the caption over a field, so a row
   name and a field name read as one family. Sentence case because
   the name is a sentence; text color because, unlike a field, the
   row has no bright control under it to carry the contrast. */
.setting-row-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text);
}

/* Modals are card-fill already, so a row inside one steps up a level. */
.modal .setting-row {
    background: var(--bg-elevated);
}

/* The field-label rule outranks the checkbox resets by one element
   selector and turned every checkbox setting inside a form-group
   uppercase and dim; pin the resets at higher specificity. */
.form-group .checkbox-row,
.form-group .setting-row {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}

.setting-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.setting-row-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-dim);
    line-height: 1.45;
    max-width: 72ch;
}

.checkbox-row input[type="checkbox"],
.setting-row input[type="checkbox"],
.calendar-toggle-filter input[type="checkbox"],
.cf-export-check input[type="checkbox"],
.import-files input[type="checkbox"],
.wanted-row-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg);
    border: 2px solid var(--border-accent);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    transition: background 0.15s, border-color 0.15s;
}

.checkbox-row input[type="checkbox"]:checked,
.setting-row input[type="checkbox"]:checked,
.calendar-toggle-filter input[type="checkbox"]:checked,
.cf-export-check input[type="checkbox"]:checked,
.import-files input[type="checkbox"]:checked,
.wanted-row-select input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-row input[type="checkbox"]:checked::after,
.setting-row input[type="checkbox"]:checked::after,
.calendar-toggle-filter input[type="checkbox"]:checked::after,
.cf-export-check input[type="checkbox"]:checked::after,
.import-files input[type="checkbox"]:checked::after,
.wanted-row-select input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -58%) rotate(45deg);
}

.cf-section input[type="radio"],
.settings-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-accent);
    border-radius: 50%;
    background: var(--bg);
    margin: 0;
    cursor: pointer;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    vertical-align: middle;
    transition: border-color 0.15s, background 0.15s;
}

.cf-section input[type="radio"]:checked,
.settings-form input[type="radio"]:checked {
    border-color: var(--accent);
    background: var(--bg);
}

.cf-section input[type="radio"]:checked::after,
.settings-form input[type="radio"]:checked::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.cf-section input[type="number"],
.settings-form input[type="number"],
.dc-modal-form input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.cf-section input[type="number"]::-webkit-outer-spin-button,
.cf-section input[type="number"]::-webkit-inner-spin-button,
.settings-form input[type="number"]::-webkit-outer-spin-button,
.settings-form input[type="number"]::-webkit-inner-spin-button,
.dc-modal-form input[type="number"]::-webkit-outer-spin-button,
.dc-modal-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 13px;
    line-height: 18px;
}

@media (max-width: 640px) {
    .btn-sm {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 14px;
    }
    .btn-ghost,
    .btn-icon,
    .btn-icon-sm,
    .btn-icon-danger {
        min-width: 44px;
        min-height: 44px;
    }
    .checkbox-row {
        padding: 8px 0;
    }
}

/* ─── Native <select> chevron replacement ─────────────────────────────
 *
 * Firefox has a known bug where the native chevron decoration on
 * `<select>` elements disappears after a body swap (boost-nav) — the
 * select's option text and click behavior survive intact, but the
 * little down-arrow that signals "this is a dropdown" goes missing
 * until a full document reload restores the native control. The
 * chevron is part of the OS/browser's native form-widget rendering
 * pipeline; htmx 2.x's body swap doesn't tell the widget it was
 * re-attached, so the decoration just doesn't re-paint.
 *
 * Workaround: own the chevron in CSS. `appearance: none` strips the
 * native control entirely (so there's no native chevron to lose),
 * and a data-URI SVG `background-image` paints our own chevron in
 * its place. Since the chevron is CSS-rendered, it survives every
 * DOM mutation that `<select>` does — no boost-nav fragility.
 *
 * Color is `--text-dim` (URL-encoded as `%237a7a96`); dimensions and
 * padding-right=28px leave room for the chevron without overlapping
 * option text. Applies globally to every `<select>` in the app so we
 * don't have to per-class-style-update each new dropdown. The
 * existing per-element rules (`.folder-select`, `.log-filter-select`,
 * etc.) keep working — they just paint their text/border/bg, while
 * this rule paints the chevron and reserves space for it. */
select {
    /* `-moz-appearance` is the Firefox-specific knob; modern Firefox
     * also honors the unprefixed `appearance` but older + some Linux
     * builds still need the prefix to fully strip the native control
     * widget. Ship both for belt-and-suspenders coverage. Without
     * Firefox actually stripping the native control, both the native
     * chevron AND our SVG would render side-by-side on focus (the
     * "two chevrons" symptom from the first iteration of this fix). */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* `!important` on `background-image` because per-page rules like
     * `.folder-select { background: var(--bg) }` (shorthand) reset
     * `background-image` as part of cascade semantics. We've fixed
     * the known offenders to use `background-color:` longhand, but
     * any future rule that uses the shorthand on a select would
     * silently lose the chevron without this guard. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    /* Room for the chevron (10px inset + 14px glyph + a gap), guarded
     * like the image above: a per-role `padding: 6px 10px` shorthand
     * on a select reset this to 10px and drew the chevron over the
     * last letters of "Anime - English" and "Missing Episodes". The
     * role rules below state their right padding explicitly too, so
     * the numbers read honestly, but this is what holds the line. */
    padding-right: 30px !important;
}

select:focus-visible {
    /* `:focus-visible` (not `:focus`) deliberately. A native `<select>`
     * retains focus after a mouse-click + option-pick, so a `:focus`
     * rule keeps the chevron purple until the user clicks somewhere
     * else — felt like a stuck UI state. `:focus-visible` only
     * matches when focus arrived via the keyboard (Tab), which is
     * exactly the case where an accessibility cue *is* needed.
     * Mouse-clicked selects skip the purple state entirely; selecting
     * an option leaves the chevron in its default gray, which feels
     * right for the modal-style "open dropdown, pick, close" flow.
     *
     * Tints the chevron with --accent. Re-emit the same SVG with the
     * focused stroke color, since CSS can't recolor a data-URI image
     * with `filter` without affecting the rest of the select. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cba6f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* Firefox doesn't render `background-image` on `<select>` elements
 * unless you also strip its internal padding via `text-indent` and
 * suppress the focus dotted ring on the option text. Without this
 * the chevron would be hidden behind Firefox's own option-padding
 * region in some versions. The `0` text-indent is a no-op visually
 * but force-resets any inherited text-indent that might shove the
 * chevron offscreen. */
select::-ms-expand {
    display: none;
}

/* ── Add tiles ────────────────────────────────────────────────────
   The dashed "add one" card in every card grid (download clients,
   custom formats, notification providers, API keys): card fill and
   corners, dim until hovered, a 28px plus over a 13px label. */
.dc-card-add,
.cf-card-add,
.notif-card-add,
.api-key-card-add {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 140px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-dim);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.dc-card-add:hover,
.cf-card-add:hover,
.notif-card-add:hover,
.api-key-card-add:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.dc-card-add-icon,
.cf-card-add-icon,
.notif-card-add-icon,
.api-key-card-add-icon {
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.dc-card-add-label,
.cf-card-add-label,
.notif-card-add-label,
.api-key-card-add-label {
    font-size: 13px;
    font-weight: 500;
}

/* ── File field ──────────────────────────────────────────────────────
   The native <input type="file"> paints the browser's own button,
   which matches none of the control recipes. The input is kept (it
   owns the OS dialog and keyboard focus) but hidden visually; a
   `.btn` label is the visible trigger and the chosen file name sits
   beside it in caption style. Focus on the hidden input outlines the
   label so tabbing still shows where you are. */
.file-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.file-field-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}
.file-field-input:focus-visible + .btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.file-field-name {
    font-size: 13px;
    color: var(--text-dim);
    max-width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.file-field-name.has-file {
    color: var(--text);
}

/* Settings → Integrations: series kept off the watch-list sync, one
   row per exclusion with its "Allow again" button. */
.sync-exclusions {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-exclusion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.sync-exclusion-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Dropdown ────────────────────────────────────────────────────
   A server-rendered pick list for where a native <select> would sit
   apart from the other controls: a 32px toolbar-field trigger (the
   .folder-select look, chevron included) and a card-fill menu under
   it that caps at 60vh and scrolls inside itself, so a long list
   (every wanted episode of a long-running series) stays usable on a
   phone. Markup: partials/wanted/isearch_menu.html; behavior (open,
   close, pick) in the page's script, wanted.js today. */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    height: 32px;
    max-width: 260px;
    padding: 0 30px 0 10px;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-body);
    line-height: 30px;
    cursor: pointer;
}

.dropdown-trigger:hover,
.dropdown-trigger[aria-expanded="true"] { border-color: var(--accent); }
.dropdown-trigger:focus { outline: none; }
.dropdown-trigger:focus-visible { border-color: var(--accent); }

.dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    min-width: 100%;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.dropdown-menu[hidden] { display: none; }

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 32px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: var(--bg-elevated);
    outline: none;
}

.dropdown-item.active { color: var(--accent); }

.dropdown-item-hint {
    font-size: 11px;
    color: var(--text-dim);
}

.dropdown-sep {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}