@layer components {
  .facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    font: var(--type-body-sm);
  }

  .facts__fact {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .facts__term {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .facts__value {
    min-inline-size: var(--space-0);
    margin: var(--space-0);
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  .facts__link {
    color: var(--color-link);
  }

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

  .facts__value :is(.copy, .secret__summary) {
    margin-block: calc((var(--space-4) + var(--space-1)) * -1);
  }

  .facts__code {
    font: inherit;
    user-select: all;
  }

  .facts__source {
    display: block;
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }
}