/* The available balance from bank SMS (lean-rollout ticket 234; ADR 0012): the one line an
   account carries on the board's account cards and on the accounts page (sms-balance.js
   draws it), and the overview's own figures in the same tones. Tokens only.

   A counted figure reads in the primary text colour; a figure that is shown but not counted
   (`maybe_stale`, `uncertain`) wears the warning text colour, and its words say why; a state
   with no figure (`waiting`, `not_connected`) is quiet secondary words, never 0.00. The
   colour only supports the words, which carry the state. */
.balance-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-8);margin:var(--space-4) 0 0;max-inline-size:none;font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-secondary)}
.balance-line[hidden]{display:none}
.balance-line-label{color:var(--color-text-secondary)}
.balance-line-figure{white-space:nowrap;font-variant-numeric:tabular-nums}
.balance-line-value{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.balance-line-value[data-known=false]{font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text-secondary)}
.balance-line-unit{color:var(--color-text-secondary)}
.balance-line-words{min-inline-size:0;overflow-wrap:anywhere}
.balance-line[data-balance-state=maybe_stale] .balance-line-value,
.balance-line[data-balance-state=uncertain] .balance-line-value,
.balance-line[data-balance-state=maybe_stale] .balance-line-words,
.balance-line[data-balance-state=uncertain] .balance-line-words{color:var(--color-feedback-warning-text)}
.balance-line[data-balance-state=maybe_stale] .balance-line-words,
.balance-line[data-balance-state=uncertain] .balance-line-words{font-weight:var(--weight-medium)}
/* On the board's account cards the line is a row of its own under the account, aligned with its
   name, so a phone's narrow name column does not fold the figure and its words line by line. */
#board-accounts .account-row:has(>.balance-line){flex-wrap:wrap;row-gap:var(--space-4)}
#board-accounts .account-row:has(>.balance-line)>.account-copy{flex:1 1 0}
#board-accounts .account-row>.balance-line{flex:1 0 100%;margin:0;padding-inline-start:calc(var(--size-36) + var(--space-12))}
@media (max-width:700px){
  #board-accounts .account-row>.balance-line{padding-inline-start:0}
}