/* =========================================================
   Component — Chip

   A small standalone label used inside panels and mocks.
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

/* Small — for chips inside a mock, where the standard size would
   outweigh the text it sits under. */
.chip--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  background: var(--color-surface-sunken);
}

/* Live — a chip that says the figures beside it are read from the database
   rather than drawn. The dot is the whole signal; it does not pulse, because
   a blinking light on a marketing page is a notification nobody asked for. */
.chip--live {
  gap: var(--space-2);
  border-color: var(--color-growth);
  color: var(--color-growth-text);
}
.chip--live::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-growth);
}

/* Not shipped yet. Muted rather than tinted: a chip that says «soon»
   should read as a note, not as a feature already earned. */
.chip--soon {
  border-style: dashed;
  color: var(--color-text-muted);
}