/**
 * Incident Chip — Compact Incident Status Indicator
 * EPIC 8.3: Severity color, time ago, click to expand
 * AI Worker: Component Builder
 * Health: chip_render_ms
 * DoD: States (critical/warning/resolved), auto-draft indicator
 */

.incident-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
  color: var(--text-0);
}

.incident-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Severity: Critical */
.incident-chip[data-severity="critical"] {
  background: rgba(255, 71, 87, 0.15);
  border-color: var(--bad);
  color: var(--bad);
}

.incident-chip[data-severity="critical"]::before {
  content: "🔴";
  font-size: var(--fs-sm);
}

/* Severity: Warning */
.incident-chip[data-severity="warning"] {
  background: rgba(255, 184, 0, 0.15);
  border-color: var(--warn);
  color: var(--warn);
}

.incident-chip[data-severity="warning"]::before {
  content: "⚠️";
  font-size: var(--fs-sm);
}

/* Severity: Resolved */
.incident-chip[data-severity="resolved"] {
  background: rgba(0, 255, 136, 0.15);
  border-color: var(--good);
  color: var(--good);
}

.incident-chip[data-severity="resolved"]::before {
  content: "✅";
  font-size: var(--fs-sm);
}

/* Auto-draft indicator */
.incident-chip[data-draft="true"]::after {
  content: "DRAFT";
  font-size: var(--fs-xs);
  padding: 2px 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-left: var(--s-2);
  opacity: 0.7;
}

.incident-chip__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.incident-chip__time {
  font-size: var(--fs-xs);
  opacity: 0.8;
  margin-left: var(--s-2);
}

/* List layout */
.incident-chip-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Inline layout */
.incident-chip-inline {
  display: inline-flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}