/* Custom select component — replaces native <select> via cd-select.js progressive enhancer.
 *
 * Reason: macOS native <select> dropdowns ignore CSS font-size and render
 * options at OS scale, producing visually massive option lists out of
 * proportion with the form.
 *
 * Opt-in: include cd-select.js in the page; it auto-enhances every <select>
 * on the page unless the element has data-no-cd-enhance.
 */
.cd-select-wrap { position: relative; width: 100%; }
.cd-select-wrap > select {
    /* keep <select> in DOM for form submission, hide visually */
    position: absolute; left: 0; top: 0;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.cd-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    border: 1px solid var(--gray-300, #DEE2E6);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-900, #0F1219);
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.cd-select-trigger:focus,
.cd-select-trigger.open {
    outline: none;
    border-color: var(--ink-700, #2D3348);
    box-shadow: 0 0 0 2px rgba(15, 18, 25, 0.08);
}
.cd-select-trigger.placeholder { color: var(--ink-400, #6E7892); }
.cd-select-arrow {
    width: 12px; height: 12px;
    flex-shrink: 0;
    color: var(--ink-400, #6E7892);
    transition: transform .15s;
}
.cd-select-trigger.open .cd-select-arrow { transform: rotate(180deg); }
.cd-select-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--gray-200, #E9ECEF);
    border-radius: 10px;
    box-shadow: 0 12px 28px -10px rgba(15, 18, 25, 0.18);
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.cd-select-menu[hidden] { display: none; }
.cd-select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink-900, #0F1219);
    cursor: pointer;
    border-radius: 6px;
    line-height: 1.4;
}
.cd-select-option:hover,
.cd-select-option.focused { background: var(--gray-50, #F8F9FA); }
.cd-select-option.selected {
    background: var(--ink-900, #0F1219);
    color: #fff;
    font-weight: 600;
}
.cd-select-option.placeholder { color: var(--ink-400, #6E7892); font-style: italic; }