@layer components {
  .timeline {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding-block-start: var(--block-space);
  }

  .timeline + .timeline {
    border-block-start: var(--border);
  }

  .timeline__section-title {
    color: var(--color-ink);
    font-size: var(--text-normal);
    font-weight: 600;
    margin: 0;
  }

  .timeline__filter {
    padding-block: var(--block-space-half);
  }

  .timeline__filter-fields {
    align-items: flex-end;
    display: flex;
    gap: var(--inline-space);
  }

  .timeline__filter-label {
    color: var(--color-ink-secondary);
    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    gap: var(--block-space-quarter);
  }

  .timeline__filter-label .input {
    inline-size: 6ch;
  }

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

  .timeline__predicate {
    border-block-end: var(--border);
    color: var(--color-ink-secondary);
    font-size: var(--text-small);
    font-weight: 600;
    padding-block-end: var(--block-space-quarter);
    text-transform: capitalize;
  }

  .timeline__entry {
    border-inline-start: 3px solid var(--color-link);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
    padding-inline-start: var(--inline-space);
  }

  .timeline__entry--superseded {
    border-inline-start-color: var(--color-ink-muted);
    opacity: 0.6;
  }

  .timeline__entry--dismissed {
    border-inline-start-color: var(--color-negative);
    opacity: 0.5;
    text-decoration: line-through;
  }

  .timeline__value {
    font-size: var(--text-small);
    line-height: var(--line-height);
  }

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

  .timeline__source {
    text-transform: capitalize;
  }

  .timeline__empty {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    padding: var(--block-space-half);
  }
}