/*
  Wortic macOS UI Kit — Wallet Low
  wm-wallet-low

  Alerta de saldo baixo. Compõe components/notification-item/notification-item.css
  INTEIRO — mesma raiz <article class="wm-notification-item">, mesmo
  __icon[data-tone], __text, __actor/__subject, __urgent-flag, __actions,
  __read-toggle. Este componente NÃO reimplementa um cartão de aviso do
  zero; ele é uma composição com o vocabulário certo para o caso "saldo
  ficou baixo": o número (quanto sobrou), o limiar (o que definiu "baixo")
  e a ação de resolver (adicionar crédito).

  Regra do briefing, não-negociável: o LIMIAR de "baixo" é do hospedeiro,
  nunca deste componente. 100 créditos pode ser muito para um sistema e
  nada para outro — por isso toda variante mostra o limiar em texto
  ("abaixo de N créditos"), nunca um número mágico escondido no CSS/JS.
*/

@layer components {
  /* Selo do limiar — o número que o HOSPEDEIRO escolheu, sempre junto do
     texto principal, nunca só implícito no fato de a notificação existir.
     É um parágrafo de texto corrido (frase com um <strong> no meio), NUNCA
     flex — display:inline-flex aqui já quebrou a ordem de leitura (cada
     nó de texto vira um item de flex e embaralha o wrap), achado só
     renderizando de verdade, não no grep de classe. */
  .wm-wallet-low__threshold {
    margin-block-start: var(--wm-space-2);
    font-size: var(--wm-font-size-caption);
    line-height: var(--wm-line-height-normal);
    color: var(--wm-label-tertiary);
  }
  .wm-wallet-low__threshold strong {
    color: var(--wm-label-secondary);
    font-weight: var(--wm-font-weight-semibold);
  }

  /* Saldo negativo é o caso mais grave — reaproveita __urgent-flag do
     notification-item (ícone + texto, nunca só cor) sem redefinir nada. */
  .wm-wallet-low[data-wm-wallet-low-estado="negativo"] .wm-notification-item__subject {
    color: var(--wm-error);
  }
}