@layer components {
  /* Activity feed — chronological, day-grouped list of herd events.
  /* Each day is a group with a muted date heading; rows pair the creator's
  /* avatar chip with the event icon + one-line description.
  /* ======================================================================== */

  .activity {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

  .activity__date {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: oklch(var(--lch-canvas) / 0.85);
    border-block-end: var(--border);
    color: var(--color-ink-light);
    font-size: var(--text-small);
    font-weight: 700;
    /* Mobile (<640px): the body scrolls and the header is sticky at the viewport
    /* top, so clear it. From 640px up, `.page` becomes its own scroll container
    /* below the header (see sidebar.css), so the offset resets to 0. */
    inset-block-start: calc(var(--header-height, 4rem) - 1px);
    letter-spacing: 0.04em;
    margin: 0;
    padding-block: var(--block-space-half);
    position: sticky;
    text-transform: uppercase;
    z-index: calc(var(--z-nav) - 1);

    @media (min-width: 640px) {
      inset-block-start: 0;
    }
  }

  .activity__events {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .activity__event {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space);
  }

  .activity__avatar {
    --avatar-size: 2.25rem;
    flex: 0 0 auto;
  }

  .activity__body {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space-half) / 2);
    min-inline-size: 0;
  }

  .activity__line {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .activity__icon {
    margin-inline-end: var(--inline-space-half);
  }

  .activity__meta {
    color: var(--color-ink-light);
    font-size: var(--text-small);
    margin: 0;
  }
}