.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-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);
}