/* ══ A bank account typed into a form, the Send Money way (6 Nov 2026) ══
   staff/bank_field_lib.php bankFieldHtml() draws it, staff/assets/js/
   bank_field.js works it; the list and the card are bank_suggest.css's.
   The page's own tokens (suite.css on the dashboards, storefront.css on the
   shop's Register sheet — `.bf--shop` adds the two it lacks and draws the
   list's few icons, the storefront having no icon font). The field and its
   label keep the form's own classes; 360 px first, taps 44 px and more, no
   transition (suite rule). Identical in all four builds. */

.bf{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;min-width:0;}
.bf, .bf *{box-sizing:border-box;}
.bf .bf-acct{display:flex;flex-direction:column;gap:6px;margin:0;}
.bf .bf-acct > label, .bf .bf-typed > label{margin:0;}
.bf .bf-in{width:100%;font-variant-numeric:tabular-nums;}
.bf .bs-pop{margin-top:2px;}
.bf .bf-typed{display:flex;flex-direction:column;gap:6px;}
.bf .bf-typed[hidden]{display:none !important;}
.bf .bf-card{min-height:56px;}
.bf .bf-card.is-file .bs-card__who b, .bf .bf-card.is-pick .bs-card__who b{font-weight:650;}
.bf .bf-in[aria-invalid="true"]{border-color:var(--bad) !important;}
.bf-say{margin:0;font-size:13px;font-weight:600;line-height:1.35;color:var(--bad);}
.bf-say[hidden]{display:none;}

/* ── the storefront's Register sheet ─────────────────────────────────── */
.bf--shop{
  --brand-soft: color-mix(in srgb, var(--brand, #6d28d9) 16%, transparent);
  --ui-ring: 0 0 0 3px color-mix(in srgb, var(--brand, #6d28d9) 18%, transparent);
}
.bf--shop .bs-anchor > label{font-size:inherit;font-weight:inherit;color:inherit;}
/* the sheet's labels hold their box (margin 0 0 12px, the box 4px under): here the box is the label's sibling */
html[data-sf] .bf--shop .bs-anchor > label, html[data-sf] .bf--shop .bf-typed > label{margin:0;}
.bf--shop .bf-acct, .bf--shop .bf-typed{gap:0;}
.bf--shop i.fas{
  display:inline-block;width:15px;height:15px;vertical-align:-2px;background:currentColor;
  -webkit-mask:var(--bf-i) center / contain no-repeat;mask:var(--bf-i) center / contain no-repeat;
}
.bf--shop i.fas::before{content:none;}
.bf--shop i.fa-chevron-left{
  --bf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E");
}
.bf--shop i.fa-chevron-right{
  --bf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}
.bf--shop i.fa-landmark{
  --bf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M24,104H48v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16H208V104h24a8,8,0,0,0,4.19-14.81l-104-64a8,8,0,0,0-8.38,0l-104,64A8,8,0,0,0,24,104Zm40,0H96v64H64Zm80,0v64H112V104Zm48,64H160V104h32ZM128,41.39,203.74,88H52.26ZM248,208a8,8,0,0,1-8,8H16a8,8,0,0,1,0-16H240A8,8,0,0,1,248,208Z'/%3E%3C/svg%3E");
}
.bf--shop i.fa-circle-check{
  --bf-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z'/%3E%3C/svg%3E");
}

/* ── where it sits ───────────────────────────────────────────────────── */
/* the Suppliers card's Add and Edit (suppliers.css spans the grid) */
.sup-f.bf{gap:3px;}
/* the dashboards' sheets size every button 40 px: Change keeps its 44 */
.bf button.bs-change{height:44px !important;min-height:44px !important;max-height:none !important;}