/* FAQ accordion shared by the informational pages (compatibility, install,
   help) via the common.FAQ component. Mirrors the homepage's #faq: a chevron
   replaces the default disclosure marker and rows are divided by hairlines.
   Section spacing follows the info pages' --size-12 rhythm. */
.faq {
  margin-top: var(--size-12);

  > h2 {
    margin-bottom: var(--size-4);
  }

  details {
    border-bottom: 1px solid var(--border);

    summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--size-3);
      padding-block: var(--size-4);
      font-weight: var(--weight-medium);
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }

      .icon {
        color: var(--muted-foreground);
        transition: rotate 0.15s var(--ease-out-quad);
      }
    }

    &[open] summary .icon {
      rotate: 180deg;
    }

    p {
      padding-bottom: var(--size-4);
      color: var(--muted-foreground);
      max-width: var(--prose-md);
    }

    /* tighten the answer when a contextual link follows, so the link reads
       as attached to it */
    p:has(+ .faq-cta) {
      padding-bottom: var(--size-2);
    }
  }

  details:first-of-type {
    border-top: 1px solid var(--border);
  }

  .faq-cta {
    font-weight: var(--weight-medium);
  }
}