@layer components {
  .progress-summary {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .progress-summary__link {
    display: block;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .progress-summary__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines);
    overflow: hidden;
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: pretty;
  }

  .progress-summary--empty .progress-summary__text {
    color: var(--color-ink-faint);
  }

  .progress-summary__source {
    display: block;
    margin-block-start: var(--space-2);
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .progress-summary__change {
    color: var(--color-link);
  }

  @media (any-hover: hover) {
    .progress-summary__link:hover .progress-summary__change {
      text-decoration: underline;
    }
  }
}