/* Shared selects, with native form controls retained as the progressive fallback. */
.cp-select { position: relative; display: inline-flex; flex-direction: column; min-width: 0; width: 100%; vertical-align: middle; }
.cp-select > select.cp-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.cp-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; width: 100%; min-width: 0; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); color: var(--text); font: inherit; line-height: 1.45; text-align: start; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.cp-select-trigger:hover:not(:disabled) { border-color: var(--muted); background: var(--card-2); }
.cp-select-trigger:focus-visible, .cp-select-trigger[aria-expanded=true] { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.cp-select-trigger:disabled { cursor: not-allowed; opacity: .5; }
.cp-select-trigger.is-placeholder { color: var(--muted); }
.cp-select-value { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.cp-select-chevron { flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; color: var(--muted); margin-inline: 4px; }
.cp-select-trigger[aria-expanded=true] .cp-select-chevron { transform: translateY(2px) rotate(225deg); color: var(--accent); }
.cp-select-popup { position: fixed; z-index: 200; margin: 0; padding: 7px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); color: var(--text); font: 400 15px/1.45 var(--sans); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.cp-select-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 14px; border-radius: 10px; cursor: pointer; overflow-wrap: anywhere; }
.cp-select-option > span:first-child { min-width: 0; }
.cp-select-option.is-selected { color: var(--accent); background: var(--accent-soft); font-weight: 650; }
.cp-select-option.is-active { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card-2); }
.cp-select-option.is-selected.is-active { background: var(--accent-soft); }
.cp-select-option[aria-disabled=true] { cursor: not-allowed; opacity: .45; }
.cp-select-check { flex: none; width: 18px; font-size: 18px; color: var(--accent); }
.cp-select-group { padding: 12px 14px 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cp-select-error { color: var(--warn); font-size: .85rem; line-height: 1.5; margin-top: 7px; }
.cp-select-trigger[aria-invalid=true] { border-color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .cp-select-trigger, .cp-select-chevron { transition: none; } }
@media (forced-colors: active) { .cp-select-option.is-active { outline: 2px solid Highlight; outline-offset: -3px; } .cp-select-option.is-selected { color: Highlight; } }