.choice-control { min-width: 0; }
.choice-control input[type="hidden"] { display: none; }
.choice-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper, Canvas); color: var(--ink, CanvasText); font: inherit; font-size: .76rem; font-weight: 650; text-align: left; }
.choice-trigger:hover, .choice-control.open .choice-trigger { border-color: var(--iris, var(--accent)); }
.choice-trigger:focus-visible, .choice-option:focus-visible { outline: 2px solid var(--iris, var(--accent)); outline-offset: 2px; }
.choice-trigger:disabled { opacity: .55; cursor: wait; }
.choice-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-chevron { flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 3px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; }
.choice-control.open .choice-chevron { margin-top: 4px; transform: rotate(225deg); }
.choice-menu { position: fixed; inset: auto; z-index: 100; display: grid; gap: 2px; max-height: 244px; margin: 0; padding: 5px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 11px; background: var(--paper, Canvas); color: var(--ink, CanvasText); box-shadow: 0 12px 32px rgba(39,37,46,.16); font: inherit; }
.choice-menu[hidden] { display: none !important; }
.choice-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 38px; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink, CanvasText); font: inherit; font-size: .76rem; font-weight: 550; text-align: left; cursor: pointer; }
.choice-option-label { min-width: 0; overflow-wrap: anywhere; }
.choice-option:hover, .choice-option:focus-visible { background: var(--primary-soft, var(--soft)); outline-offset: -2px; }
.choice-option[aria-selected="true"] { background: var(--copper-soft, var(--accent-soft)); color: var(--primary, var(--ink, CanvasText)); font-weight: 700; }
.choice-check { flex: 0 0 auto; visibility: hidden; color: var(--copper, var(--accent)); }
.choice-option[aria-selected="true"] .choice-check { visibility: visible; }
@media (pointer: coarse) { .choice-option { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .choice-chevron { transition: none; } }