@layer disclosure {
  /* FAQ (and any) <details> disclosure. The pool ships one <details><summary>
     prototype; a page clones it as many times as its data needs (the FAQ uses
     two). Native <details> already toggles on click/Enter/Space with no JS and
     full keyboard + screen-reader support — this file only styles it and adds an
     open/close animation. Cutting-edge CSS per the css skill (used without regard
     for browser support): where ::details-content is unsupported the disclosure
     still works, just without the transition. */

  main article details {
    margin-inline: 1rem;
    padding-block-end: 0.5rem;
  }

  main article summary {
    cursor: pointer;
    padding-block: 0.75rem;
    font-weight: 600;
  }

  main article summary:is(:hover, :focus-visible) {
    color: var(--fg-emphasis, currentColor);
  }

  /* Reveal the content region as a grid, fading + sliding in. content-visibility
     is the discrete property the browser flips closed↔open; allow-discrete lets
     it participate so the fade runs instead of snapping. */
  main article details::details-content {
    display: grid;
    gap: 0.25rem;
    opacity: 0;
    translate: 0 -0.25rem;
    transition:
      content-visibility 0.25s allow-discrete,
      opacity 0.25s ease,
      translate 0.25s ease;
  }

  main article details[open]::details-content {
    opacity: 1;
    translate: 0 0;

    @starting-style {
      opacity: 0;
      translate: 0 -0.25rem;
    }
  }

  main article details p {
    margin-inline: 0;
  }
}