/* ▾ The combo box (combo.js): the editor’s Payee box and its list of our own (no browser datalist). Colour tokens only,
   so dark mode follows the device. The list is fixed over the dialog, under the box (or above it when there's
   more room there), ~8 rows then it scrolls; on a phone it's as wide as the screen. */
.combo { position: relative; display: block; min-width: 0; }
.combo > input { padding-right: 2.3rem; }
.combo-btn { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 2.2rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: none; color: var(--text-3); cursor: pointer; }
.combo-btn:hover { color: var(--text); background: var(--surface-2); }
.combo-btn svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.combo.open .combo-btn svg { transform: rotate(180deg); }

.combo-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-size: .92rem; font-weight: 500; text-align: left;
  animation: combo-in .12s ease-out;
}
.combo-list[hidden] { display: none; }
.combo-list.up { animation-name: combo-in-up; }
.combo-opt { display: flex; align-items: center; gap: .55rem; min-height: 2.5rem; padding: .4rem .6rem; border-radius: var(--radius-sm); cursor: pointer; }
.combo-opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.combo-emo { flex-shrink: 0; width: 1.5rem; text-align: center; font-size: 1.1rem; line-height: 1; }
.combo-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-hit { background: none; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.combo-chip { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .76rem; font-weight: 600; }
.combo-opt[aria-selected="true"] .combo-chip { background: var(--surface); }
.combo-count { flex-shrink: 0; min-width: 2.1em; text-align: right; color: var(--text-3); font-size: .76rem; font-variant-numeric: tabular-nums; }
.combo-new { position: relative; margin-top: .35rem; color: var(--accent-text); font-weight: 600; }
.combo-opt + .combo-new::before { content: ''; position: absolute; left: .4rem; right: .4rem; top: -.22rem; border-top: 1px solid var(--border); }
.combo-new .combo-name { white-space: normal; overflow-wrap: anywhere; }

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

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