.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: var(--leading-tight);
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

/* display: inline-flex outranks the browser's own [hidden] rule, so a chip
   a controller hides (the calibration ⚠ once a row is in band) would still show. */
.chip[hidden] {
  display: none;
}

.chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.chip-good {
  background: var(--good-soft);
  color: var(--good-ink);
}

.chip-caution {
  background: var(--caution-soft);
  color: var(--caution-ink);
}

.chip-danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.chip-severe {
  background: var(--severe);
  color: var(--ink-on-accent);
}

.chip-quiet {
  background: transparent;
  border: var(--line-width) solid var(--line);
  color: var(--ink-muted);
}

.chip-accent {
  background: var(--accent);
  color: var(--ink-on-accent);
}

.chip-energy-phosphagen,
.chip-energy-glycolytic,
.chip-energy-oxidative,
.chip-energy-skill {
  color: var(--ink-on-accent);
}

.chip-energy-phosphagen {
  background: var(--energy-phosphagen);
}

.chip-energy-glycolytic {
  background: var(--energy-glycolytic);
}

.chip-energy-oxidative {
  background: var(--energy-oxidative);
}

.chip-energy-skill {
  background: var(--energy-skill);
}

/* A chip whose text is a phrase rather than a label (a reason, a sentence)
   wraps onto more lines instead of clipping to the base rule's single-line
   nowrap. overflow-wrap keeps a long unbroken word inside the chip's own
   background once it wraps. Corners square down from the pill to the
   standard radius, since a multi-line chip reads as a small card, not a
   pill. Use it for a reason, an explanation, or any chip text that isn't a
   short label. */
.chip-wrap {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  border-radius: var(--radius-md);
  padding-block: var(--space-1);
  text-align: left;
}