@layer components {
  .fold {
    max-inline-size: var(--measure);
    margin-block-start: var(--space-7);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .page-title + .fold {
    margin-block-start: var(--space-2);
  }

  .fold__body > p {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .fold + .fold {
    margin-block-start: var(--space-0);
  }

  .fold + .fold .fold__summary {
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .fold__summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-block-size: var(--tap-min);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font: var(--type-label);
    color: var(--color-ink-muted);
  }

  .fold__summary::-webkit-details-marker {
    display: none;
  }

  .fold__title {
    flex: auto;
  }

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

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

  .fold__toggle--hide,
  .fold[open] .fold__toggle--show {
    display: none;
  }

  .fold[open] .fold__toggle--hide {
    display: inline;
  }

  .fold__body {
    padding-block: var(--space-4) var(--space-2);
  }

  .fold__body .section-title {
    margin-block-start: var(--space-6);
  }
}