/* Themed dropdowns (public/js/select.js). The real <select> still draws the closed box; a clear button sits on top
   and opens .sel-pop, a list in a layer on <body>. */
.sel-wrap { display: inline-grid; vertical-align: middle; position: relative; min-width: 0; max-width: 100%; }
.sel-wrap[hidden] { display: none !important; }
.sel-wrap > select, .sel-wrap > .sel-btn { grid-area: 1 / 1; }
.sel-wrap > select.sel-native { pointer-events: none; }
.sel-wrap > select.sel-fill { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; flex: none; }
.sel-btn { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0;
  border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sel-btn:focus, .sel-btn:focus-visible { outline: none; }
.sel-btn:disabled { cursor: not-allowed; }
.sel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* The select shows the button's hover, focus and open states */
.sel-wrap:hover > select:not(:disabled) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sel-wrap:has(> .sel-btn:focus-visible) > select, .sel-wrap.is-open > select { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.sel-wrap.is-open > select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 7.5 6 4.5 9 7.5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* The open list */
.sel-pop { position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 0; max-height: 320px; overflow: hidden; padding: 6px; box-sizing: border-box;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--glass-strong, var(--surface)) 35%, var(--bg));
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--shadow-deep); color: var(--text); font-size: .9rem; line-height: 1.3;
  animation: sel-in var(--dur, 200ms) var(--ease, ease) both; }
.sel-pop[data-side="top"] { animation-name: sel-in-up; }
@keyframes sel-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sel-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

.sel-search { flex: none; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.sel-pop .sel-search input[type=search] { width: 100%; min-height: 34px; height: 34px; padding: 0 .7rem 0 2rem; border: 0; border-radius: 8px; font: inherit; font-size: .88rem; color: var(--text);
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238e8e93' stroke-width='1.6'/%3E%3Cpath d='m10.6 10.6 3 3' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat .65rem center / 14px;
  box-shadow: inset 0 0 0 1px transparent; }
.sel-pop .sel-search input[type=search]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

.sel-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
.sel-list[hidden], .sel-none[hidden], .sel-list [hidden] { display: none; }
.sel-opt { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--text);
  transition: background-color 120ms var(--ease, ease), color 120ms var(--ease, ease); }
.sel-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sel-check { flex: none; width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
.sel-opt:hover, .sel-opt.is-active { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sel-opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.sel-opt[aria-selected="true"] .sel-check { visibility: visible; }
.sel-opt[aria-selected="true"]:hover, .sel-opt[aria-selected="true"].is-active { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.sel-opt[aria-disabled="true"] { color: var(--text-2); opacity: .55; cursor: not-allowed; background: none; }
.sel-group { padding: 10px 10px 4px; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.sel-list > [role=group]:first-child .sel-group { padding-top: 4px; }
.sel-none { padding: 12px 10px; color: var(--text-2); font-size: .86rem; text-align: center; }

@media (max-width: 600px) {
  .sel-pop { font-size: 1rem; }
  .sel-opt { min-height: 44px; }
  .sel-pop .sel-search input[type=search] { font-size: 16px; min-height: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sel-pop { animation: none; } }