/* Chips: short labels, not controls: equipment, credentials, a class level.
 *   <span class="ui-chip">Reformer</span>
 * --on-band   on the dark band
 * --tint-1 ... --tint-6   the six class tints
 */

.ui-chip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-sunken);
  color: var(--ui-color-ink-nav);
  font-size: var(--ui-text-xs);
  line-height: 1.3;
}

.ui-chip--on-band {
  background: var(--ui-color-on-band-fill);
  color: var(--ui-color-on-band);
}

.ui-chip--tint-1 { background: var(--ui-color-tint-1-bg); color: var(--ui-color-tint-1-ink); }
.ui-chip--tint-2 { background: var(--ui-color-tint-2-bg); color: var(--ui-color-tint-2-ink); }
.ui-chip--tint-3 { background: var(--ui-color-tint-3-bg); color: var(--ui-color-tint-3-ink); }
.ui-chip--tint-4 { background: var(--ui-color-tint-4-bg); color: var(--ui-color-tint-4-ink); }
.ui-chip--tint-5 { background: var(--ui-color-tint-5-bg); color: var(--ui-color-tint-5-ink); }
.ui-chip--tint-6 { background: var(--ui-color-tint-6-bg); color: var(--ui-color-tint-6-ink); }