/* ▾ The pick lists (select.js): every <select> is shown as a button of our own and a list of our own, in place of the
   browser's drop-down. The button looks like the page's boxes (inputs); the list like the payee list (combo.css).
   Colour tokens only, so dark mode follows the device. The list is fixed over the dialog it's in, under the button
   (or above it when there's more room there), ~8 rows then it scrolls; on a phone it's as wide as the screen. */
select.bsel-native { display: none !important; }

.bsel-btn {
  appearance: none; display: flex; align-items: center; gap: .45rem; width: 100%; min-width: 0;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .55rem .7rem;
}
.bsel-btn[hidden], .bsel-btn .bsel-emo[hidden] { display: none; }
.bsel-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); }
.bsel-btn:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.bsel-btn:focus:not(:focus-visible):not(.open) { outline: none; }
.bsel-btn:disabled { cursor: not-allowed; color: var(--text-3); background: var(--surface-2); }
.bsel-btn .bsel-emo { flex-shrink: 0; line-height: 1; }
.bsel-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel-empty { color: var(--text-3); }
.bsel-arrow { flex-shrink: 0; width: .45rem; height: .45rem; margin: 0 .15rem -.05rem auto; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: translateY(-25%) rotate(45deg); transition: transform .15s ease; }
.bsel-btn:hover:not(:disabled) .bsel-arrow { border-color: var(--text); }
.bsel-btn.open .bsel-arrow { transform: translateY(25%) rotate(-135deg); }

.bsel-list {
  position: fixed; z-index: 70; margin: 0; padding: .3rem; list-style: none;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  font: 500 .92rem/1.35 var(--font); text-align: left;
  animation: bsel-in .12s ease-out;
}
.bsel-list[hidden] { display: none; }
.bsel-list.up { animation-name: bsel-in-up; }
.bsel-list:focus { outline: none; }
.bsel-opt { display: flex; align-items: center; gap: .55rem; min-height: 2.4rem; padding: .4rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.bsel-opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.bsel-opt.is-on { font-weight: 700; }
.bsel-opt[aria-disabled="true"] { cursor: default; color: var(--text-3); background: none; }
.bsel-opt .bsel-emo { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: 1.1rem; line-height: 1; }
.bsel-list.no-emo .bsel-emo { display: none; }
.bsel-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsel-tick { flex-shrink: 0; width: 1rem; text-align: right; color: var(--accent-text); font-weight: 800; }

@media (max-width: 600px) {
  .bsel-opt { min-height: 2.85rem; padding: .5rem .65rem; font-size: 1rem; }
}

@keyframes bsel-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes bsel-in-up { from { opacity: 0; transform: translateY(4px); } }
html[data-fx="off"] .bsel-list { animation: none; }
html[data-fx="off"] .bsel-arrow { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bsel-list { animation: none; }
  .bsel-arrow { transition: none; }
}
@media print { .bsel-list { display: none !important; } .bsel-arrow { display: none; } }