/**
 * Badge-status chips shown per tool on /rooms/zones/equipment.
 *
 * For each required badge on a tool, render a compact pill that tells the
 * viewer at a glance whether they already hold the badge. Three states:
 * - active: green  — you have this badge
 * - pending: amber — you started but haven't finished
 * - none:   gray   — you need this badge to use the tool
 */

.mh-badge-tool-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.mh-badge-tool-chips__label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mh-color-neutral-600, #6b6b6b);
  margin-right: 0.1rem;
}

.mh-badge-tool-chips--none {
  font-size: 0.85rem;
  color: var(--mh-color-neutral-600, #777);
  font-style: italic;
}

.mh-tool-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.mh-tool-badge-chip:hover,
.mh-tool-badge-chip:focus-visible {
  text-decoration: none;
  filter: brightness(0.96);
}

.mh-tool-badge-chip__icon {
  font-weight: 700;
  font-size: 0.95em;
}

.mh-tool-badge-chip--active {
  background: var(--mh-color-success-50, #f1f8e9);
  color: var(--mh-color-success-800, #2e7d32);
  border-color: var(--mh-color-success-200, #c8e6c9);
}

.mh-tool-badge-chip--pending {
  background: var(--mh-color-warning-50, #fff8e1);
  color: var(--mh-color-warning-900, #6f4500);
  border-color: var(--mh-color-warning-200, #ffe0b2);
}

.mh-tool-badge-chip--none {
  background: var(--mh-color-neutral-100, #f5f5f5);
  color: var(--mh-color-neutral-800, #333);
  border-color: var(--mh-color-border, #e0e0e0);
}

.mh-tool-badge-chip--optional {
  opacity: 0.78;
  font-style: italic;
}