/* Voice select (design/DESIGN-SYSTEM.md §8 "Select"). Load with vselect.js on every page. */
/* ---------- select (vselect.js): one dropdown for every <select> ---------- */
.vs-native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;margin:0!important;overflow:hidden!important}
.vs-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--control-h);padding:6px 10px 6px 12px;font:var(--t-label);color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-sm);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.vs-trigger:hover{border-color:var(--ink-3)}
.vs-trigger.open,.vs-trigger:focus-visible{border-color:var(--ink);box-shadow:0 0 0 3px var(--blue-soft);outline:0}
.vs-trigger:disabled{opacity:.5;cursor:default}
.vs-trigger .vs-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-trigger .vs-chev{flex:none;color:var(--ink-3);transition:transform .15s}
.vs-trigger.open .vs-chev{transform:rotate(180deg)}
.vs-trigger.vs-block{display:flex;width:100%}
.vs-panel{position:absolute;z-index:200;max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh-pop);padding:6px;animation:vs-in .12s ease-out}
.vs-panel.up{animation-name:vs-in-up}
@keyframes vs-in{from{opacity:0;transform:translateY(-4px)}}
@keyframes vs-in-up{from{opacity:0;transform:translateY(4px)}}
.vs-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font:var(--t-secondary);color:var(--ink);cursor:pointer;min-height:40px}
.vs-opt.hl{background:var(--tint)}
.vs-opt.cur .vs-l{font-weight:600}
.vs-opt.dis{opacity:.45;cursor:default}
.vs-opt .vs-txt{display:grid;gap:1px;flex:1;min-width:0}
.vs-opt .vs-d{font:var(--t-secondary);color:var(--ink-2)}
.vs-opt .vs-check{flex:none;color:var(--ink);visibility:hidden}
.vs-opt.cur .vs-check{visibility:visible}
.vs-group{font:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:10px 10px 4px}
.vs-sep{height:1px;background:var(--line);margin:6px 4px}
/* mobile: bottom sheet, big targets */
.vs-scrim{position:fixed;inset:0;z-index:199;background:var(--scrim);animation:vs-fade .15s ease-out}
@keyframes vs-fade{from{opacity:0}}
.vs-panel.vs-sheet{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:70vh;border-radius:16px 16px 0 0;padding:8px 10px calc(14px + env(safe-area-inset-bottom));animation:vs-up .18s ease-out}
@keyframes vs-up{from{transform:translateY(100%)}}
.vs-sheet-h{font:var(--t-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-align:center;padding:10px 0 8px;position:relative}
.vs-sheet-h::before{content:"";position:absolute;top:0;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line-2)}
.vs-sheet .vs-opt{min-height:48px;font-size:16px} /* phones: 16px so iOS never zooms (design system §4) */
@media (prefers-reduced-motion:reduce){.vs-panel,.vs-scrim{animation:none}}