@layer components {
  .audit-history {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .audit-event {
    padding: 14px 16px;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-md);
    background: var(--rd-bg-sunken);
  }

  .audit-event-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .audit-event-description {
    font-weight: 600;
    color: var(--rd-fg);
  }

  .audit-event-by {
    color: var(--rd-fg-muted);
  }

  .audit-event-actor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rd-fg);
  }

  .audit-event-source {
    font-size: var(--rd-text-sm);
    color: var(--rd-fg-muted);
  }

  .audit-webhook-link {
    color: var(--rd-accent);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
  }

  .audit-webhook-link:hover {
    text-decoration-style: solid;
  }

  .audit-event-time {
    color: var(--rd-fg-muted);
    font-size: var(--rd-text-sm);
    margin-left: auto;
  }

  .audit-event-changes {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rd-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .audit-change {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--rd-text-sm);
    color: var(--rd-fg);
  }

  .audit-change-field {
    font-weight: 500;
    min-width: 140px;
    color: var(--rd-fg-muted);
  }

  .audit-change-old {
    color: var(--rd-fg-subtle);
    text-decoration: line-through;
  }

  .audit-change-arrow {
    color: var(--rd-fg-muted);
  }

  .audit-change-new {
    color: var(--rd-fg);
  }
}