/* ══ Send Money › New: the account number first, its likely banks under it ══
   staff/assets/js/bank_suggest.js draws the list; staff/ADMIN.php the field
   and the card. Owner, 26 Oct 2026: "ask for account number first then when
   entered it pops up with few suggested banks the most professional way".
   The suite's own tokens (assets/css/suite.css), a small list right under
   the field — not a sheet — rows of 44 px and more, phone first (360 px).
   No transition on the list or its rows (suite rule); the one spinner stops
   for reduced motion. Identical in all four builds. */

.bs-anchor{position:relative;}
.bs-anchor > label{font-size:13px;font-weight:600;color:var(--ink-2);}

/* ── the list ───────────────────────────────────────────────────────────────
   In the flow, right under the field, not floating over what follows: the
   sheet's middle scrolls and, on a desk, is only as tall as what it holds —
   a list laid over it was cut off at the foot. Here the sheet grows to show
   it (and scrolls, on a short screen). */
.bs-pop{position:relative;box-sizing:border-box;margin:0;
  padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--lift-2);}
.bs-pop[hidden]{display:none;}
.bs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;padding:4px 8px;}
.bs-title{font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.02em;}
.bs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.bs-list--all{max-height:min(320px, 46vh);overflow-y:auto;overscroll-behavior:contain;}
.bs-row{display:flex;align-items:center;gap:10px;min-height:48px;box-sizing:border-box;margin:0;padding:6px 8px;
  border-radius:10px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.bs-row:hover{background:var(--surface-2);}
.bs-row.is-active{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--brand);}
.bs-row.is-picked .bs-txt b{color:var(--brand-ink);}
.bs-row.is-off{opacity:.55;cursor:default;}
.bs-row.is-off:hover{background:transparent;}
.bs-row--note{min-height:40px;cursor:default;}
.bs-row--note:hover{background:transparent;}
.bs-group{padding:8px 8px 2px;font-size:11px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.05em;}

/* the bank's two letters on a tint of its own (the hue from its name) */
.bs-av{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;line-height:1;
  background:hsl(var(--bs-h, 262) 70% 93%);color:hsl(var(--bs-h, 262) 55% 30%);}
.bs-av--all{background:var(--brand-wash);color:var(--brand-ink);font-size:14px;}
.bs-txt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.bs-txt b{font-size:14px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-say{font-size:12.5px;line-height:1.25;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-say.is-ok{color:var(--ink);font-weight:800;}
.bs-say.is-none{color:var(--faint);}
.bs-say.is-fail{color:var(--warn);font-weight:600;}
.bs-chev{flex:none;font-size:12px;color:var(--faint);}

/* All banks: Back and the search, then the list */
.bs-head--all{padding:2px 2px 6px;}
.bs-back{flex:none;width:44px;height:44px;border:0;border-radius:10px;background:var(--surface-2);color:var(--ink-2);
  font-size:14px;cursor:pointer;}
.bs-find{flex:1 1 auto;min-width:0;height:44px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink);font-size:16px;}
.bs-find:focus{outline:0;border-color:var(--brand);box-shadow:var(--ui-ring);}
.bs-back:focus-visible,.bs-change:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

@keyframes bsSpin{to{transform:rotate(360deg);}}
.bs-spin{flex:none;width:14px;height:14px;box-sizing:border-box;border:2px solid var(--mute);border-right-color:transparent;
  border-radius:50%;animation:bsSpin .7s linear infinite;}
@media (prefers-reduced-motion: reduce){.bs-spin{animation:none;border-right-color:var(--mute);opacity:.5;}}

/* ── the bank chosen: the name the bank has, and Change ───────────────────── */
.bs-card{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);}
.bs-card[hidden]{display:none;}
.bs-card__who{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.bs-card__who b{font-size:15px;line-height:1.25;color:var(--ink);overflow-wrap:anywhere;}
.bs-card__who b i{margin-right:6px;color:var(--good);}
.bs-card__who small{font-size:12.5px;color:var(--mute);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.bs-card.is-wait .bs-card__who b{color:var(--mute);font-weight:600;font-size:14px;}
.bs-card.is-err .bs-card__who b{color:var(--bad);font-size:13.5px;}
.bs-change{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--brand-wash);
  color:var(--brand-ink);font-weight:650;font-size:13px;cursor:pointer;}
.bs-change:hover{background:var(--brand-soft);}

/* New's amount comes after the name (the bar above the list, hidden till then) */
.pr-modal.is-new-wait #prAmtBar{display:none;}