/* custom select (select.js): linked by the pages that load /select.js (/app/ and /signup), after /styles.css,
   so both share one copy and the pages without a <select> ship nothing. Tokens from styles.css. The native
   <select> stays in the DOM as .csel-native (visually hidden, never display:none: forms and .value keep
   working); .csel is the widget inserted after it, carrying the native's classes (.num, …). */
.csel { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; min-width: 0; text-align: left; }
.csel-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.field .csel, .cols .csel, .card-form .csel, .ws-dialog .csel { display: block; width: 100%; }

/* the field: the current value and a chevron; a 2px orange ring when focused or open */
.csel-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; margin: 0; padding: 8px 12px; font: inherit; font-size: 14.5px; line-height: 1.3; color: var(--ink); text-align: left; background: #fff; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; }
.csel-btn:hover { border-color: #cdc4b8; }
.csel-btn:focus-visible, .csel.open .csel-btn { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.csel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel.placeholder .csel-val { color: var(--muted); }
.csel-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease-out; }
.csel.open .csel-chev { transform: rotate(180deg); }
.csel.disabled .csel-btn { color: var(--muted); background: var(--bg-soft); cursor: default; }

/* the popover: search (when the list is long), grouped options, key hints */
.csel-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-direction: column; min-width: 100%; width: max-content; max-width: min(440px, calc(100vw - 24px)); background: #fff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 32px rgba(26, 25, 23, .14), 0 2px 6px rgba(26, 25, 23, .08); font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--ink); text-align: left; overflow: hidden; }
.csel-pop[hidden] { display: none; }
.csel-pop.up { top: auto; bottom: calc(100% + 4px); }
.csel-pop.fixed { position: fixed; top: auto; bottom: auto; min-width: 0; }
.csel-search { display: flex; align-items: center; gap: 8px; flex: none; margin: 8px 8px 4px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.csel-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.csel-glass { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.csel-q { flex: 1; min-width: 0; margin: 0; padding: 8px 0; border: 0; font: inherit; font-size: 14px; color: var(--ink); background: transparent; outline: none; }
.csel-q::placeholder { color: var(--muted); }
.csel-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; overscroll-behavior: contain; scrollbar-width: thin; }
.csel-group + .csel-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.csel-gh { padding: 8px 16px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.csel-opt { position: relative; display: block; padding: 7px 44px 7px 16px; cursor: pointer; }
.csel-lbl { display: block; font-family: var(--mono); font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-desc { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-opt.active { background: var(--bg-soft); }
.csel-opt[aria-selected="true"] { background: var(--tint); }
.csel-opt[aria-selected="true"].active { background: #fbe1d3; }
.csel-check { display: none; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.csel-opt[aria-selected="true"] .csel-check { display: block; }
.csel-opt[aria-disabled="true"] { cursor: default; opacity: .5; }
.csel-opt[hidden], .csel-group[hidden] { display: none; }
.csel-empty { padding: 12px 16px; font-size: 13.5px; color: var(--muted); }
.csel-foot { display: flex; flex: none; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--rule); background: var(--bg); font-size: 12px; color: var(--muted); }
.csel-foot kbd { font: inherit; color: var(--ink-soft); }

@media (max-width: 720px), (pointer: coarse) {
  .csel .csel-btn { min-height: 44px; }   /* wins over the page's sized variants (.cols, .ws-dialog, .field) */
  .csel-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .csel-chev { transition: none; }
}