/* ============================================================================
   PitchIQ — In-app Credits page (pages-billing.jsx, route /upgrade)
   ----------------------------------------------------------------------------
   The credit balance strip. pitchiq#286 removed the plan catalog this file
   used to style (tier cards, monthly/annual toggle, seat stepper): Edge is
   consumption-only, and credits are bought in Evolve Suite.

   Namespacing: every class is prefixed `pi-up-` so nothing collides with
   kit.css (.mp-*) or the design system (.tm-*). Customer-facing expiry copy
   says "12 months" only.
   ========================================================================== */

/* ---- numbers: Gluten medium with tabular figures (matches strategy doc) --- */
.pi-up-num { font-family: var(--font-numbers); font-weight: 500; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------------------
   Credit snapshot strip — balance / next expiry
--------------------------------------------------------------------------- */
.pi-up-snapshot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 26px;
}
@media (max-width: 460px) { .pi-up-snapshot { grid-template-columns: 1fr; } }
.pi-up-snap {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pi-up-snap + .pi-up-snap { border-left: 1px solid var(--border-1); }
@media (max-width: 460px) {
  .pi-up-snap + .pi-up-snap { border-left: 0; border-top: 1px solid var(--border-1); }
}
.pi-up-snap__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-subtitle-4); font-weight: 900; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-2);
}
.pi-up-snap__label svg { color: var(--accent); }
.pi-up-snap__value { font-size: 24px; line-height: 1.1; color: var(--fg-1); }
.pi-up-snap__sub { font-size: var(--fs-body-3); color: var(--fg-2); line-height: 1.4; }
.pi-up-snap__sub.is-warn { color: var(--gold-0); font-weight: 800; }
.pi-up-snap--accent { background: var(--bg-inverse); }
.pi-up-snap--accent .pi-up-snap__label { color: rgba(255,255,255,.62); }
.pi-up-snap--accent .pi-up-snap__label svg { color: var(--gold-3); }
.pi-up-snap--accent .pi-up-snap__value { color: #fff; }
.pi-up-snap--accent .pi-up-snap__sub { color: rgba(255,255,255,.66); }
.pi-up-snap--accent .pi-up-snap__sub.is-warn { color: var(--gold-3); }