/* ============================================================
   delta-pill.css — Q-over-Q delta chip used in tables and KPIs.
   Convention: positive delay change = bad (red); negative = good (green).
   For AOG and "share of A" metrics, the renderer flips the sign
   before assigning the class.
   ============================================================ */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font: 600 var(--text-xs) / 1 var(--font-mono);
  white-space: nowrap;
}
.delta--up   { background: var(--alert-soft); color: var(--alert); }
.delta--down { background: var(--ok-soft);    color: var(--ok); }
.delta--flat { background: var(--surface-2);  color: var(--muted); }

.delta::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.delta--up::before   { border-bottom: 5px solid var(--alert); }
.delta--down::before { border-top: 5px solid var(--ok); }
.delta--flat::before { width: 8px; height: 1px; background: var(--muted); border: 0; }