/* ============================================================
   select.css — custom searchable single-select (SelectMenu.js).
   Replaces native <select> in every context. The popover is
   teleported to <body> and positioned with fixed coords, so it
   never clips inside a scroll area.
   ============================================================ */

.selm{position:relative;display:inline-flex;max-width:100%;vertical-align:top}
.selm--block{display:flex;width:100%}

.selm__btn{
  display:inline-flex;align-items:center;gap:8px;width:100%;min-width:0;
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;background:transparent;border:none;
}
.selm__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selm__val--ph{color:var(--muted)}
.selm__chev{flex:none;color:var(--muted);transition:transform .18s ease}
.selm--open .selm__chev{transform:rotate(180deg)}
.selm--disabled .selm__btn{opacity:.5;cursor:default}

/* ---- variant: input (form field, matches .input) ---- */
.selm--input .selm__btn{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:.8em 1em;font-size:1.05rem;transition:border-color .15s ease, box-shadow .15s ease;
}
.selm--input .selm__btn:hover{border-color:var(--ink-2)}
.selm--input.selm--open .selm__btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.selm--input.selm--disabled .selm__btn:hover{border-color:var(--line-2)}

/* ---- variant: ctl (compact toolbar pill inner control) ---- */
.selm--ctl .selm__btn{
  font-weight:600;font-size:.85rem;color:var(--ink);
  padding:3px 4px 3px 6px;border-radius:var(--radius-xs);gap:5px;
}
.selm--ctl .selm__btn:hover{background:var(--sink)}
.selm--ctl .selm__chev{margin-left:-1px}

/* ---- variant: cell (inline table cell, borderless) ---- */
.selm--cell .selm__btn{
  padding:10px 12px;font-size:.9rem;font-weight:500;border-radius:0;color:var(--ink);
}
.selm--cell .selm__btn:hover{background:var(--surface-2)}
.selm--cell.selm--open .selm__btn{background:var(--accent-tint)}

/* ---- floating popover ---- */
.selm__pop{
  position:fixed;z-index:200;display:flex;flex-direction:column;min-width:180px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-pop);padding:4px;overflow:hidden;
  animation:selmpop .13s cubic-bezier(.2,.9,.3,1.1);transform-origin:top center;
}
.selm__pop--up{transform-origin:bottom center}
@keyframes selmpop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.selm__pop{animation:none}}

.selm__search{
  display:flex;align-items:center;gap:7px;margin:2px 2px 5px;padding:6px 9px;
  background:var(--sink);border-radius:var(--radius-xs);flex:none;
}
.selm__search .icon{color:var(--muted);flex:none}
.selm__search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:.9rem;color:var(--ink)}
.selm__search input::placeholder{color:var(--muted)}
.selm__search input:focus{outline:none}

.selm__list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:1px;padding:1px}

.selm__opt{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:none;background:transparent;padding:8px 9px;border-radius:var(--radius-xs);
  font-size:.92rem;color:var(--ink);cursor:pointer;
}
.selm__opt--active{background:var(--surface-2)}
.selm__opt--on{color:var(--accent-ink);font-weight:600}
.selm__opt--on.selm__opt--active{background:var(--accent-tint)}
.selm__opt-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selm__check{color:var(--accent-ink);flex:none}
.selm__empty{padding:12px 10px;color:var(--muted);font-size:.85rem;text-align:center}

/* the toolbar pill wraps the trigger; drop its old native-select padding */
.ctl:has(.selm){padding-right:12px}

/* compact form fields (add-field form) use the smaller control rhythm */
.addfield .selm--input .selm__btn{padding:8px 10px;font-size:.9rem;border-radius:var(--radius-xs)}
.inline-add .selm--input .selm__btn{padding:7px 8px;font-size:.84rem;border-radius:var(--radius-xs)}
