/*
 * CP-13 Bank account card — app/components/ui/bank_account_card_component.rb
 *
 * Inset panel: account name + status badge on one row, the masked BSB/
 * account line beneath in tabular type, a status-specific explanation
 * line, and an optional remediation CTA. Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 */

.ui-bank-account-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.ui-bank-account-card__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.ui-bank-account-card__numbers {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-variant-numeric: var(--numeric-tabular);
  margin-bottom: var(--space-2);
}

.ui-bank-account-card__explanation {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: 0;
}

.ui-bank-account-card__actions {
  margin-top: var(--space-3);
}