/* Badge component — a rest-only static label (dense count, status tone, or
   micro-tag). Not interactive: no state ladder (a static badge is the whole
   ladder — docs/wiki/style.md § The state ladder).
   Public API (variables only; set them on a variant or ancestor, never
   re-declare properties or re-style .badge* from a page sheet — rake lint:hig):
     --badge-bg (--surface-alt) / --badge-color (--text-soft)
     --badge-border (none) / --badge-radius (--radius-pill)
     --badge-padding (--space-1 --space-3) / --badge-margin-inline (0) / --badge-margin-block (0)
     --badge-min-width (0)
     --badge-font (--font-body) / --badge-font-size (0.75rem) / --badge-font-weight (600)
     --badge-align (start) / --badge-transform (none) / --badge-tracking (normal)
     --badge-valign (baseline)
   Collaborators: components/_badge.html.erb, demos/_badge.html.erb. */

.badge {
  display: inline-block;
  flex-shrink: 0;
  min-width: var(--badge-min-width, 0);
  margin-inline: var(--badge-margin-inline, 0);
  margin-block: var(--badge-margin-block, 0);
  padding: var(--badge-padding, var(--space-1) var(--space-3));
  border: var(--badge-border, none);
  border-radius: var(--badge-radius, var(--radius-pill));
  background: var(--badge-bg, var(--surface-alt));
  color: var(--badge-color, var(--text-soft));
  font-family: var(--badge-font, var(--font-body));
  font-size: var(--badge-font-size, 0.75rem);
  font-weight: var(--badge-font-weight, 600);
  text-align: var(--badge-align, start);
  text-transform: var(--badge-transform, none);
  letter-spacing: var(--badge-tracking, normal);
  vertical-align: var(--badge-valign, baseline);
}

/* Size/shape variants — set variables only. */

/* Dense monospace count/status badge (workbench tables). */
.badge--mono {
  --badge-min-width: 1.2em;
  --badge-margin-inline: 0 0.2em;
  --badge-padding: 0 0.35em;
  --badge-font: var(--font-mono);
  --badge-font-size: 0.8em;
  --badge-font-weight: 400;
  --badge-align: center;
}

/* Bordered chip beside a settings-list row. */
.badge--outlined {
  --badge-border: 1px solid var(--rule);
}

/* Uppercase micro-label (borrowed-aisle marker; also the empty-today marker — default tone, --text-soft, per the contrast note at groceries.css:494). */
.badge--label {
  --badge-margin-inline: 0.4rem 0;
  --badge-padding: 0.05rem 0.4rem;
  --badge-bg: var(--ground);
  --badge-border: 1px solid var(--aisle-row-border);
  --badge-font-size: 0.6rem;
  --badge-transform: uppercase;
  --badge-tracking: 0.08em;
  --badge-valign: middle;
}

/* Tone variants — color pair only; compose onto a size variant. */
.badge--warn {
  --badge-bg: color-mix(in srgb, var(--warning) 20%, transparent);
  --badge-color: var(--warning);
}
.badge--muted { --badge-color: var(--text-faint); }
.badge--positive {
  --badge-bg: color-mix(in srgb, var(--positive) 20%, transparent);
  --badge-color: var(--positive);
}
.badge--now-confident,
.badge--new-match {
  --badge-bg: color-mix(in srgb, var(--positive) 20%, transparent);
  --badge-color: var(--positive);
}
.badge--lost-confidence {
  --badge-bg: color-mix(in srgb, var(--warning) 20%, transparent);
  --badge-color: var(--warning);
}
.badge--target-changed {
  --badge-bg: color-mix(in srgb, var(--info) 20%, transparent);
  --badge-color: var(--info);
}