/* Compact timeline state highlights.
   The shared .phase-* badge styles in styles.css also match timeline rows,
   which made Monitoring/Resolved updates render as oversized green banners. */

.timeline-entry.phase-monitoring,
.timeline-entry.phase-resolved,
.incident-detail-update.phase-monitoring,
.incident-detail-update.phase-resolved {
  border-color: transparent !important;
  background: transparent !important;
  color: inherit !important;
}

.timeline-entry.phase-monitoring .timeline-content,
.timeline-entry.phase-resolved .timeline-content,
.incident-detail-update.phase-monitoring .incident-detail-update-body,
.incident-detail-update.phase-resolved .incident-detail-update-body {
  width: 100%;
  min-height: 0 !important;
  align-self: start;
  margin: 0 0 12px;
  border: 1px solid rgba(50, 230, 154, 0.16);
  border-radius: 8px;
  background: rgba(50, 230, 154, 0.055);
  padding: 10px 12px !important;
  color: inherit !important;
}

.timeline-entry.phase-monitoring .timeline-content strong,
.timeline-entry.phase-resolved .timeline-content strong,
.incident-detail-update.phase-monitoring .incident-detail-update-heading strong,
.incident-detail-update.phase-resolved .incident-detail-update-heading strong {
  color: #6df0b2 !important;
}

.timeline-entry.phase-monitoring .timeline-content p,
.timeline-entry.phase-resolved .timeline-content p,
.incident-detail-update.phase-monitoring .incident-detail-update-body p,
.incident-detail-update.phase-resolved .incident-detail-update-body p {
  margin-top: 5px;
  margin-bottom: 0;
}

.timeline-entry.phase-monitoring .timeline-content small,
.timeline-entry.phase-resolved .timeline-content small,
.incident-detail-update.phase-monitoring .incident-detail-update-body small,
.incident-detail-update.phase-resolved .incident-detail-update-body small {
  margin-top: 4px;
}

/* Keep the timeline rail compact now that the highlight no longer supplies row height. */
.incident-detail-update.phase-monitoring .incident-detail-rail span,
.incident-detail-update.phase-resolved .incident-detail-rail span {
  min-height: 42px;
}

@media (max-width: 680px) {
  .timeline-entry.phase-monitoring .timeline-content,
  .timeline-entry.phase-resolved .timeline-content,
  .incident-detail-update.phase-monitoring .incident-detail-update-body,
  .incident-detail-update.phase-resolved .incident-detail-update-body {
    margin-bottom: 10px;
    border-radius: 7px;
    padding: 9px 10px !important;
  }
}