@layer components {
  .inline-help {
    margin-block-start: var(--spacing-sm);
  }

  .inline-help__trigger {
    width: fit-content;
    padding-block: 0.375rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .inline-help__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
  }

  .inline-help__content {
    max-inline-size: 65ch;
    margin-block-start: var(--spacing-sm);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .inline-help__content > :first-child {
    margin-block-start: 0;
  }

  .inline-help__content > :last-child {
    margin-block-end: 0;
  }
}