@layer components {
  /*
   * Event Timeline
   * Activity feed showing recent events
   */
  .event-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-lg);
  }

  /* Date separator with horizontal lines */
  .event-date-separator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: var(--block-space-sm);
    gap: var(--inline-space-lg);
  }

  .event-date-separator::before,
  .event-date-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
  }

  .event-date-separator__label {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--block-space-xs) var(--inline-space);
    border-radius: var(--radius-md);
    background-color: var(--color-grey-200);
    color: var(--color-grey-600);
  }

  .event {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space-lg);
    padding: var(--block-space);
    background-color: var(--color-canvas);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-block-end: var(--block-space);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .event:hover {
    border-color: var(--color-border-strong);
    box-shadow: 0 2px 4px oklch(0% 0 0 / 0.05);
  }

  .event__avatar {
    flex-shrink: 0;
  }

  .event__content {
    flex: 1;
    min-width: 0;
  }

  .event__description {
    line-height: 1.4;
    margin-block-end: var(--block-space-xs);
  }

  .event__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .event__time {
    display: flex;
    align-items: center;
    gap: var(--inline-space-sm);
  }

  .event__time::before {
    content: "\2022";
    color: var(--color-ink-faint);
  }

  .event__facility {
    display: flex;
    align-items: center;
    gap: var(--inline-space-sm);
  }

  .event__facility::before {
    content: "\2022";
    color: var(--color-ink-faint);
  }

  /* Details section for expanded info */
  .event__details {
    margin-block-start: var(--block-space-sm);
    padding: var(--block-space-sm);
    background-color: var(--color-canvas-alt);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .event__changes {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-xs);
  }

  .event__change {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-sm);
  }

  .event__change-label {
    font-weight: 600;
    color: var(--color-ink-muted);
  }

  .event__change-from {
    text-decoration: line-through;
    color: var(--color-ink-faint);
  }

  .event__change-to {
    color: var(--color-ink);
  }

  /* Data point changes */
  .event__dp-changes {
    margin-block-start: var(--block-space-xs);
  }

  .event__dp-list {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .event__dp-item {
    display: inline;
  }

  .event__dp-item:not(:last-child)::after {
    content: ", ";
  }

  /* Mobile: hide avatar, stack layout */
  @media (max-width: 639px) {
    .event {
      padding: var(--block-space-sm);
    }

    .event__avatar {
      display: none;
    }

    .event__meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--block-space-xs);
    }

    .event__time::before,
    .event__facility::before {
      display: none;
    }
  }
}