/* ============================================================================
   Badges, pills & deltas
   ----------------------------------------------------------------------------
   Small inline status markers. The .badge-yes / .badge-no / .badge-sentiment
   and .trend-delta / .delta-up / .delta-down names are emitted by helpers, so
   they're preserved here verbatim.
   ============================================================================ */

@layer components {
  /* Rounded status pill (the app's existing default for `.badge`). */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
  }

  /* "Current" plan markers reuse the affirmative palette of .badge-yes. */
  .badge-yes,
  .badge-active { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
  .badge-no { background: var(--bg-tertiary); border-color: var(--border); color: var(--text-tertiary); }
  .badge-sentiment { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
  /* Something needs attention (a failed run on the projects dashboard). */
  .badge-alert { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

  /* Outlined pill — for plan names and similar metadata. */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    border: 0.5px solid var(--border-strong);
    color: var(--text-secondary);
  }

  /* --- Trend / delta chips ----------------------------------------------- */
  /* Helper-emitted "vs previous" chips. Kept as plain inline text so they sit
     naturally inside <dd>/<li> without a chip background. They must stay
     wrappable: the label can run long ("vs previous (scored 80 answers)"),
     and an unbreakable chip overflows the metric tiles instead. */
  .trend-delta {
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .delta-up { color: var(--up); }
  .delta-down { color: var(--down); }
  /* Only the signed figure carries the trend color; the "vs previous (scored
     40 answers)" qualifier stays quiet so a grid of tiles doesn't read as a
     wall of red and green sentences. */
  .trend-delta .trend-delta-label { color: var(--text-secondary); font-weight: 400; }
}