/* Badge — only the rules styles.css does not already paint.
 *
 * The status chip (.badge.warn / .err / .neutral) is painted by styles.css.
 * This file adds the change pill (up/down tinted background from the
 * direction tokens) and the RVOL emphasis steps (font weight only, never a
 * new hue). Every colour and length comes from tokens.css.
 */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-1) 2px;
}

.pill.up { background: var(--up-bg); color: var(--up-fg); }
.pill.down { background: var(--down-bg); color: var(--down-fg); }
.pill.flat { color: var(--muted); border: 1px solid var(--axis); }

/* RVOL emphasis steps — font weight only, never colour: no background, no
 * shadow, no per-tier text colour; the figure keeps the text colour it
 * inherits. >1 medium, >1.5 semibold, >2 bold, every weight from tokens.css. */
.rvol-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-regular);
}

.rvol-value.rv1 { font-weight: var(--fw-medium); }

.rvol-value.rv15 { font-weight: var(--fw-semibold); }

.rvol-value.rv2 { font-weight: var(--fw-bold); }

/* ---- phone (MOBILE_PLAN.md P6 / §2.10 / §2.11) ----------------------------
   Badge-family type rides the new micro scale: --fs-2xs (11px under the
   phone override — the §2.10 `.badge` mapping, and never below 11px). Long
   status / change strings wrap rather than pushing the page wide (§2.11).
   Desktop keeps the pill at --fs-label and is unchanged. */

@media (max-width: 767.98px) {
  .badge,
  .pill {
    font-size: var(--fs-2xs);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .rvol-value {
    overflow-wrap: anywhere;
  }
}