/* Shared select styling. Native values, labels, validation and keyboard behavior stay intact. */
:root {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23627286' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a4b1c3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select:is(.form-select, .form-input):not([multiple]):not([size]) {
    appearance: none; -webkit-appearance: none; min-width: 0; min-height: 46px;
    padding: 11px 42px 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
    background-color: var(--input); background-image: var(--select-chevron);
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
    color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.5;
    text-overflow: ellipsis; cursor: pointer; box-shadow: 0 2px 4px #07111e04;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
select:is(.form-select, .form-input):not([multiple]):not([size]):hover:not(:disabled) {
    border-color: var(--blue); background-color: var(--hover);
}
select:is(.form-select, .form-input):not([multiple]):not([size]):focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px; border-color: var(--primary);
}
select:is(.form-select, .form-input):disabled {
    color: var(--faint); background-color: var(--subtle); opacity: .7; cursor: not-allowed; box-shadow: none;
}
select:is(.form-select, .form-input).input-validation-error { border-color: var(--danger); }
select:is(.form-select, .form-input) option { color: var(--ink); background: var(--surface); }

/* Browsers with customizable selects also render a matching popup in the top layer. */
@supports (appearance: base-select) {
    select:is(.form-select, .form-input):not([multiple]):not([size]),
    select:is(.form-select, .form-input):not([multiple]):not([size])::picker(select) { appearance: base-select; }
    select:is(.form-select, .form-input):not([multiple]):not([size]) {
        padding: 11px 14px; background-image: none; gap: 14px; align-items: center;
    }
    select:is(.form-select, .form-input):not([multiple]):not([size]):open {
        border-color: var(--primary); background-color: var(--input); box-shadow: 0 0 0 3px var(--primary-soft);
    }
    select:is(.form-select, .form-input)::picker-icon {
        content: ""; width: 16px; height: 16px; flex-shrink: 0;
        background: var(--select-chevron) center / 16px no-repeat; transition: transform .15s;
    }
    select:is(.form-select, .form-input):open::picker-icon { transform: rotate(180deg); }
    select:is(.form-select, .form-input)::picker(select) {
        min-width: anchor-size(width); max-width: calc(100vw - 24px); max-height: min(320px, calc(100dvh - 32px));
        margin-block: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px;
        background: var(--surface); color: var(--ink); box-shadow: 0 16px 40px #07111e1a, 0 4px 12px #07111e0a;
        font: 14px/1.5 var(--font); overflow: auto; overscroll-behavior: contain;
        scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
    }
    select:is(.form-select, .form-input) option {
        display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 12px;
        border: 0; border-radius: 7px; font-weight: 400; overflow-wrap: anywhere; white-space: normal; cursor: pointer;
    }
    select:is(.form-select, .form-input) option + option { margin-top: 2px; }
    select:is(.form-select, .form-input) option:hover,
    select:is(.form-select, .form-input) option:focus { background: var(--hover); outline: none; }
    select:is(.form-select, .form-input) option:checked {
        color: var(--primary-text); background: var(--primary-soft); font-weight: 600;
    }
    select:is(.form-select, .form-input) option::checkmark { order: 1; margin-left: auto; color: var(--primary-text); }
    select:is(.form-select, .form-input) option:disabled { color: var(--faint); cursor: not-allowed; }
    html[data-theme="dark"] select:is(.form-select, .form-input)::picker(select) { box-shadow: 0 16px 40px #0005, 0 4px 12px #0003; }
}
@media (max-width: 760px) {
    select:is(.form-select, .form-input):not([multiple]):not([size]) { font-size: 16px; min-height: 48px; }
    @supports (appearance: base-select) {
        select:is(.form-select, .form-input) option { font-size: 16px; min-height: 48px; }
    }
}
@media (forced-colors: active) {
    select:is(.form-select, .form-input):not([multiple]):not([size]) { appearance: auto; background-image: none; }
}