/* Band pill button, used on region cards, summary cards and popovers */

.band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.band:hover,
.band:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(31, 29, 26, 0.12);
  outline: none;
}

.band.good {
  background: #eaf7ee;
  color: #17693d;
  border: 1px solid rgba(23, 105, 61, 0.35);
}

.band.moderate {
  background: #fff7d6;
  color: #6b4f00;
  border: 1px solid rgba(107, 79, 0, 0.25);
}

.band.unhealthy {
  background: #ffd2b8;
  color: #9c3d22;
  border: 1px solid rgba(156, 61, 34, 0.45);
}

.band.very-unhealthy {
  background: #f3d3e6;
  color: #7d173d;
  border: 1px solid rgba(125, 23, 61, 0.5);
}

.band.hazardous {
  background: #2d1616;
  color: #fff2f2;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 560px) {
  .band {
    min-height: 28px;
    padding: 6px 10px;
  }
}