.activity-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: -8px 0 8px;
  color: #7892a7;
  font-size: .68rem;
}

.activity-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.activity-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.activity-column .activity-stack {
  display: flex;
  flex-direction: column-reverse;
  width: min(24px, 72%);
  min-height: 3px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(56, 213, 255, .18);
}

.activity-column .activity-stack i {
  display: block;
  width: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.activity-stack .detection,
.activity-legend .detection { background: var(--cc-cyan); }
.activity-stack .response,
.activity-legend .response { background: var(--cc-green); }
.activity-stack .governance,
.activity-legend .governance { background: var(--gold); }

.activity-column .activity-date {
  font-size: .58rem;
  color: #678298;
  transform: rotate(-35deg);
  height: 26px;
  white-space: nowrap;
}