/*
 * Badge — structure.
 *
 * A small chip carrying a status, a count or a label. Tones are named for
 * MEANING (good / warn / bad / info) rather than colour, so a project can
 * recolour them without every call site becoming a lie.
 *
 * DO NOT edit this file to re-skin — override tokens in the .tokens.css file.
 */

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 9999px);
  background: var(--surface-subtle, #f7f7f7);
  color: var(--ink-muted, #5d5d5d);
  font-family: var(--font-ui, "SF Pro Text", -apple-system, sans-serif);
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking-ui, -0.15px);
  white-space: nowrap;
  vertical-align: middle;
}

.sp-badge svg { width: 12px; height: 12px; }

/* A count reads better with even padding and tabular figures — otherwise a
   badge visibly changes width going from 9 to 10. */
.sp-badge--count {
  padding: 2px 7px;
  min-width: 20px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Tones. Each is a tinted fill rather than a saturated block: a row of solid
   colour chips turns a table into a fruit salad and stops any one of them
   meaning anything. */
.sp-badge--good {
  background: var(--sp-badge-good-bg, #dcfce7);
  color: var(--sp-badge-good, #15803d);
}

.sp-badge--warn {
  background: var(--sp-badge-warn-bg, #fef3c7);
  color: var(--sp-badge-warn, #92400e);
}

.sp-badge--bad {
  background: var(--sp-badge-bad-bg, #fee2e2);
  color: var(--sp-badge-bad, #b91c1c);
}

.sp-badge--info {
  background: var(--accent-soft, #dbeafe);
  color: var(--sp-badge-info, #1d4ed8);
}

/* Outline: the quietest form. For labels that must be present but should not
   compete with the row's actual content. */
.sp-badge--outline {
  background: transparent;
  border-color: var(--border, #e5e5e5);
  color: var(--ink-faint, #9e9e9e);
}

/* Solid: reserved for the one badge on a screen that genuinely outranks the
   others. If two are on screen at once, neither is doing its job. */
.sp-badge--solid {
  background: var(--ink, #292929);
  color: var(--surface, #fff);
}

/* Leading dot, for status without an icon. Sized to read at 12px text. */
.sp-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* Removable chip — a filter pill the reader can dismiss. */
.sp-badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: -3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--dur-instant, 150ms) var(--ease-out, ease-out);
}

.sp-badge__remove:hover { opacity: 1; }

.sp-badge__remove:focus-visible {
  outline: 2px solid var(--sp-badge-focus, var(--accent, #3b82f6));
  outline-offset: 1px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sp-badge__remove { transition: none; }
}