/* Select — dependency-free Select2-style combobox (views/_select.js). Native to the DM app:
   ember focus-glow (the control catches firelight when active), brass-plate tags, ember highlight + check. */
.sel2 { position: relative; width: 100%; font-size: var(--fs-smplus); }

.sel2-control {
  display: flex; align-items: center; gap: var(--sp-4); min-height: 2.125rem; box-sizing: border-box;
  background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519); border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-6); cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.sel2-control:focus { }
.sel2.open .sel2-control, .sel2-control:focus-visible {          /* ← the signature: firelight on the rim */
  border-color: var(--accent, #e0792c);
  box-shadow: 0 0 0 0.1875rem rgba(var(--accent-rgb, 224,121,44), .14), 0 0 1rem -0.375rem rgba(var(--accent-rgb, 224,121,44), .5);
}
.sel2.disabled .sel2-control { opacity: .55; cursor: default; }

.sel2-value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3125rem; flex: 1 1 auto; min-width: 0; padding: var(--sp-1) 0; }
.sel2-ph { color: var(--muted, #7a7263); }
.sel2-single { color: var(--text, #ece3cf); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* brass-plate tags (multi) */
.sel2-tag {
  display: inline-flex; align-items: center; gap: 0.3125rem; background: var(--chip-bg);
  border: 0.0625rem solid rgba(var(--accent-rgb, 224,121,44), .45); color: var(--text, #ece3cf);
  border-radius: var(--r-md); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-5); font-size: var(--fs-sm); line-height: 1.5;
}
.sel2-tagx { display: inline-flex; align-items: center; justify-content: center; width: 0.9375rem; height: 0.9375rem; border: none;
  border-radius: var(--r-sm); background: rgba(0,0,0,.28); color: var(--muted, #b3a98f); font-size: var(--fs-micro); line-height: 1; cursor: pointer; }
.sel2-tagx:hover { background: rgba(var(--accent-rgb, 224,121,44), .28); color: var(--text); }

.sel2-clear { flex: none; width: 1.125rem; height: 1.125rem; border: none; background: none; color: var(--muted, #9a8f78); font-size: var(--fs-xs); cursor: pointer; border-radius: var(--r-sm); }
.sel2-clear:hover { color: var(--bad-hover); }
.sel2-caret { flex: none; color: var(--muted, #9a8f78); font-size: var(--fs-xs); transition: transform .15s, color .12s; padding-right: var(--sp-1); }
.sel2.open .sel2-caret { transform: rotate(180deg); color: var(--accent, #e0792c); }

/* menu — position:fixed (coords set inline from the control's rect) so it never clips inside a scroll column */
.sel2-menu {
  position: fixed; z-index: 200;
  background: var(--panel, #16130d); border: 0.0625rem solid rgba(var(--accent-rgb, 224,121,44), .35); border-radius: var(--r-lg);
  box-shadow: var(--shadow-drop-md); overflow: hidden; animation: sel2-in .12s ease;
}
.sel2-menu.up { transform-origin: bottom; animation-name: sel2-in-up; }
@keyframes sel2-in { from { opacity: 0; transform: translateY(-0.375rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes sel2-in-up { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: translateY(0); } }

.sel2-search { padding: 0.4375rem; border-bottom: 0.0625rem solid var(--border, #2c2519); }
.sel2-search input { width: 100%; box-sizing: border-box; background: var(--panel-2, #201b12); border: 0.0625rem solid var(--border, #2c2519);
  color: var(--text, #ece3cf); border-radius: var(--r-md); padding: 0.3125rem 0.5625rem; font-size: var(--fs-sm); }
.sel2-search input:focus { border-color: var(--accent, #e0792c); }

.sel2-opts { max-height: 15.25rem; overflow-y: auto; padding: var(--sp-3); }
.sel2-group { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #8a8069);
  padding: var(--sp-5) var(--sp-5) var(--sp-2); border-top: 0.0625rem solid var(--border, #2c2519); margin-top: var(--sp-2); }
.sel2-group:first-child { border-top: none; margin-top: 0; }
.sel2-opt { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); cursor: pointer; color: var(--text, #ece3cf); }
.sel2-opt.hi { background: rgba(var(--accent-rgb, 224,121,44), .14); }
.sel2-opt.sel { color: var(--gold); }   /* gold = selected (theme semantics) */
.sel2-opt.off { opacity: .4; cursor: default; }
.sel2-check { flex: none; width: 0.8125rem; color: var(--accent, #e0792c); font-size: var(--fs-sm); }
.sel2-optlbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel2-opthint { flex: none; font-size: var(--fs-2xs); color: var(--muted, #8a8069); font-variant-numeric: tabular-nums; }
.sel2-empty, .sel2-more { padding: var(--sp-6); text-align: center; font-size: var(--fs-xs); color: var(--muted, #8a8069); font-style: italic; }
.sel2-more { border-top: 0.0625rem solid var(--border, #2c2519); }

@media (prefers-reduced-motion: reduce) {
  .sel2-menu { animation: none; }
  .sel2-caret, .sel2-control { transition: none; }
}