/* ============================================================
   Time Sellers — brand (Logo, Mark) and display (BalancePill).
   Design system: `Logo`, `Mark`, `BalancePill`.
   ============================================================ */

/* ---- Logo: AI-ring mark + uppercase tracked wordmark ---- */
.ts-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  color: var(--text); line-height: 1;
}
.ts-logo__mark { display: block; flex: none; }
.ts-logo__word {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ts-logo--sm { font-size: 13px; gap: 10px; }
.ts-logo--md { font-size: 17px; gap: 12px; }
.ts-logo--lg { font-size: 24px; gap: 16px; }
.ts-logo--stacked { flex-direction: column; }
.ts-logo--stacked.ts-logo--sm { gap: 8px; }
.ts-logo--stacked.ts-logo--md { gap: 10px; }
.ts-logo--stacked.ts-logo--lg { gap: 12px; }

/* ---- BalancePill: borderless display-font text, no pill chrome ---- */
.ts-balance {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent;
  font-family: var(--font-display); font-size: 13px;
  font-weight: var(--fw-bold); color: var(--text); line-height: 1; white-space: nowrap;
}
.ts-balance__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--azure-400); flex: none; }
/* Wallet states (`BalancePill`; `rulings.md` S1): amber = low,
   crimson = AIs stopped / frozen / money owed. `unknown` is ours (no
   readable balance): the subtle grey, and no label colour of its own.
   `stopped` is crimson, not the handoff's amber (Radek, 2026-10-15) —
   the app was stopped because the
   wallet ran out, which is a danger state, not a warning. Only the pill goes
   crimson: the Wallet's "AIs stopped" banner and a card's stopped line stay
   amber.
   The dot is a fill: the fill crimson (--red-400). The state word is
   text: --text-danger, the error-text crimson (colors.css has its ratios). */
.ts-balance__dot--low { background: var(--amber-500); }
.ts-balance__dot--stopped, .ts-balance__dot--frozen, .ts-balance__dot--debt { background: var(--red-400); }
.ts-balance__dot--unknown { background: var(--text-subtle); }
/* The pill's own face (the design read an undefined --font-body here). */
.ts-balance__label { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-muted); }
.ts-balance__label--low { color: var(--amber-500); }
.ts-balance__label--stopped, .ts-balance__label--frozen, .ts-balance__label--debt { color: var(--text-danger); }