/* The custom select (select.js). The trigger is a `.in` field, so it takes every field style it sits in (white and
 * bordered on the client screens, white-on-navy on the Split page, filled grey in the back office) and adds the value,
 * a chevron and the open state. The list matches the real reskin SelectContent / SelectItem. */
.sel { justify-content: space-between; gap: 0.5rem; text-align: left; cursor: pointer; padding-right: 0.625rem; }
.sel.is-ph .sel-v { color: var(--muted-fg); }
.sel-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-c { flex: none; width: 1rem; height: 1rem; color: currentColor; opacity: 0.5; transition: transform 200ms var(--ease); }
.sel[aria-expanded='true'] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }
.sel[aria-expanded='true'] .sel-c { transform: rotate(180deg); }
.sel:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 14%, transparent); }

.sel-pop {
	position: fixed; z-index: 1000; min-width: 8rem; padding: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border: 1px solid var(--line-2, rgba(16, 17, 25, 0.16)); border-radius: 10px;
	box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.06);
	font-family: var(--font-sans); font-size: 14px; line-height: 1.35; color: var(--fg);
	animation: selIn 140ms var(--ease) both;
}
.sel-pop.up { animation-name: selUp; }
@keyframes selIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes selUp { from { opacity: 0; transform: translateY(4px); } }
.sel-o { position: relative; display: flex; align-items: center; width: 100%; min-height: 2.25rem; padding: 0.4375rem 2rem 0.4375rem 0.625rem; border-radius: 6px; cursor: pointer; user-select: none; font-size: 14px; }
.sel-o > span { min-width: 0; overflow-wrap: anywhere; }
.sel-o.act { background: var(--accent); }
.sel-o[aria-selected='true'] { font-weight: 500; }
.sel-ck { position: absolute; right: 0.5rem; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; color: var(--fg-2); }
.sel-pop.sm .sel-o { min-height: 2rem; padding-top: 0.3125rem; padding-bottom: 0.3125rem; }
@media (prefers-reduced-motion: reduce) { .sel-pop { animation: none; } .sel-c { transition: none; } }