/** Verlauf (AP-48): kompakte Aktivitätszeilen in der Zeitleiste und „Letzte Aktivität“ der Projektseite. */
@layer components {
  .thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .thread {
    gap: var(--space-3);
  }

  .activity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding-inline: var(--space-2);
    color: var(--theme-meta-color);
    font-size: var(--font-size-small);
  }

  .activity > .icon {
    flex: none;
    align-self: center;
  }

  .activity__text {
    flex: 1 1 16rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .activity__text strong {
    color: var(--theme-heading-color);
    font-weight: var(--font-weight-medium);
  }

  .activity__time {
    white-space: nowrap;
  }

  .recent-activity__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
  }

  .recent-activity__summary::-webkit-details-marker {
    display: none;
  }

  .recent-activity__summary .card__title {
    margin: 0;
  }

  .recent-activity[open] > .recent-activity__summary {
    margin-block-end: var(--space-4);
  }

  .recent-activity__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .recent-activity .activity {
    padding-inline: 0;
  }
}