/* mxselect.css — the custom dropdown (assets/js/mxselect.js), shared by the user area and the public
   /sources keyword box (bridge 2026-11-01-122727). The user area's --u-* tokens drive it there; on the
   public site each falls back to the site token (light + dark both come from site.css). */
/* ---- the dashboard select (bridge 2026-10-17-164955) ------------------------------------
   The native <select> stays (value, `change`, JS-off) but is hidden; .u-sel is its face, and
   the list is a popover on <body> (.u-sel-pop) so no card transform or sheet scroll clips it. */
.u-sel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;
  pointer-events:none!important;clip:rect(0 0 0 0);overflow:hidden;margin:0!important;padding:0!important;border:0!important}
.u-sel{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:150px;max-width:100%;
  padding:9px 11px 9px 13px;border-radius:11px;border:1px solid var(--u-line,var(--line,#ece9f5));background:var(--u-bg,var(--card,#fff));color:var(--u-ink,var(--ink,#1d1b2e));
  font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}
.u-sel:hover{border-color:color-mix(in srgb,var(--u-accent,var(--purple,#7c5cff)) 45%,var(--u-line,var(--line,#ece9f5)))}
.u-sel:focus-visible,.u-sel[aria-expanded="true"]{outline:none;border-color:var(--u-accent,var(--purple,#7c5cff));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--u-accent,var(--purple,#7c5cff)) 22%,transparent)}
.u-sel:disabled{opacity:.55;cursor:default}
.u-sel-val{display:flex;align-items:center;gap:8px;min-width:0}
.u-sel-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-sel-count{flex:0 0 auto;font-size:11.5px;font-weight:800;line-height:1;padding:3px 7px;border-radius:999px;
  background:var(--u-accent-soft,var(--purple-soft,#f3effe));color:var(--u-accent,var(--purple,#7c5cff))}
.u-sel-chev{flex:0 0 auto;color:var(--u-muted,var(--muted,#8b8696));transition:transform .18s ease}
.u-sel[aria-expanded="true"] .u-sel-chev{transform:rotate(180deg);color:var(--u-accent,var(--purple,#7c5cff))}
.u-sel.is-wide{width:100%;font-size:15px;padding:10px 12px}
.u-card-freq .u-sel{flex:1;min-width:0;padding:5px 9px;font-size:12.5px;border-radius:9px;background:var(--u-card,var(--card,#fff))}

.u-sel-pop{position:fixed;z-index:88;display:flex;flex-direction:column;max-width:min(420px,calc(100vw - 16px));
  background:var(--u-card,var(--card,#fff));color:var(--u-ink,var(--ink,#1d1b2e));border:1px solid var(--u-line,var(--line,#ece9f5));border-radius:14px;
  box-shadow:var(--u-shadow-lg,0 18px 44px rgba(29,27,46,.16));overflow:hidden;opacity:0;transform:translateY(-4px) scale(.98);
  transform-origin:top center;transition:opacity .14s ease,transform .16s cubic-bezier(.2,.8,.3,1)}
.u-sel-pop.is-up{transform-origin:bottom center;transform:translateY(4px) scale(.98)}
.u-sel-pop.is-in{opacity:1;transform:none}
.u-sel-search{margin:8px 8px 2px;padding:9px 11px;border-radius:10px;border:1px solid var(--u-line,var(--line,#ece9f5));
  background:var(--u-bg,var(--card,#fff));color:var(--u-ink,var(--ink,#1d1b2e));font:inherit;font-size:14px}
.u-sel-search:focus{outline:none;border-color:var(--u-accent,var(--purple,#7c5cff))}
.u-sel-list{list-style:none;margin:0;padding:6px;overflow:auto;overscroll-behavior:contain}
.u-sel-opt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;cursor:pointer;
  font-size:14px;font-weight:500;user-select:none}
.u-sel-opt[hidden]{display:none}
.u-sel-opt .u-sel-txt{flex:1;min-width:0}
.u-sel-opt.is-active{background:var(--u-accent-soft,var(--purple-soft,#f3effe))}
.u-sel-opt[aria-selected="true"]{font-weight:700;color:var(--u-accent,var(--purple,#7c5cff))}
.u-sel-opt[aria-disabled="true"]{opacity:.45;cursor:default}
.u-sel-tick{flex:0 0 16px;width:16px;height:16px;display:grid;place-items:center}
.u-sel-opt[aria-selected="true"] .u-sel-tick::before{content:"";width:9px;height:5px;margin-top:-3px;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
@media (prefers-reduced-motion: reduce){ .u-sel-pop,.u-sel,.u-sel-chev{transition:none!important} }