/* The bank renderer's own classes (lean-rollout ticket 130).

   `finance_app/static/bank-catalog.js` (ticket 117) is the one answer to "which bank is
   this account", and five screens draw it: the board, the all-accounts page, account
   settings, the transaction list and the intake checklist. Until this ticket it had no
   stylesheet of its own, so each of those five files carried a scoped copy of the same
   rules -- ticket 121 wrote the first copy and recorded that a shared sheet was the
   obvious next home for them, and 107, 118 and 119 then copied it. Five copies of one
   component is five places for it to drift, which is the defect this file closes.

   This is the ONE copy. What every screen agrees on is here; what one screen needs
   differently -- the size of the badge, how big the mark is inside it, whether the mark
   sits in the flow or fills the box -- stays as an override in that page's own file,
   marked as an override and not as a second copy.

   Every colour, size, radius, weight and step below is a token from
   finance_app/static/tokens.css, generated from tokens/moneyos.json; this sheet defines
   no literal of its own. The two colours it does NOT set are the bank's: `badge()` puts
   `--bank-<code>-bg` and `--bank-<code>-ink` on the element inline, from
   finance_app/static/bank-tokens.css, so one rule here covers every bank and a bank is
   still added by editing tokens/banks.json alone.

   Loaded by index.html and backoffice.html, before every page stylesheet, so a page's
   own rule always wins over the shared one at equal specificity. */

/* --- The whole identity: the badge, then the account name over the bank and number. -- */
.bank-account{display:flex;align-items:center;gap:var(--space-12);min-inline-size:0}
.bank-account-copy{display:flex;flex-direction:column;gap:var(--space-2);min-inline-size:0}
.bank-account-name{font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.bank-account-meta{color:var(--color-text-secondary);font-size:var(--text-sm);overflow-wrap:anywhere}
/* The number is a string, printed in full and never grouped or shortened; tabular
   figures keep one column of them aligned. Scoped inside the renderer's own wrapper so
   it never reaches an `.account-number` some other page builds by hand. */
.bank-account .account-number{font-variant-numeric:tabular-nums}

/* --- The badge. A fixed box that centres whatever it has, never shrinks, and clips a
       mark that would spill. `position:relative` is here because two of the five screens
       place the mark absolutely inside it; on the other three nothing is positioned and
       it costs nothing.

       The label is LARGE text -- the --text-lg step at weight 700, above the bold
       large-text threshold WCAG sets at 18.66 pixels -- because two of the catalog's inks
       measure between the 3:1 large-text-and-graphics need and the 4.5:1 small-text need
       (`kbank` 4.22:1, `gsb` 4.27:1; ticket 117 measured them, 112 carried the rule). The
       bank NAME is printed as text beside the badge in every case, so neither the colour
       nor the mark ever carries the bank on its own. A page that sets a smaller step here
       is choosing the graphic reading, and says so where it overrides this. */
.bank-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  position:relative;overflow:hidden;
  min-inline-size:var(--size-40);block-size:var(--size-40);
  border-radius:var(--radius-control);
  background:var(--color-surface-sunken);color:var(--color-text-primary);
  font-size:var(--text-lg);font-weight:var(--weight-bold);
  line-height:var(--leading-none);letter-spacing:normal}
/* The initials, which are what shows until a mark has actually loaded and what comes
   back if it cannot. Up to four characters (BAAC, CIMB) on one line. */
.bank-fallback{line-height:var(--leading-none);letter-spacing:normal;white-space:nowrap}
/* The mark. Contained, never stretched, and by default as large as the badge; the three
   screens that want it smaller than the badge say so in their own file. */
.bank-mark{inline-size:100%;block-size:100%;object-fit:contain}