@layer components {
  /* Accordions
   * Native <details> with exclusive toggle via name attribute.
   * No JavaScript needed — the name attribute ensures only one item
   * is open at a time (exclusive accordion behavior).
   *
   * Usage:
   *   <div class="accordion">
   *     <details class="accordion__item" name="faq">
   *       <summary class="accordion__header">Question one?</summary>
   *       <div class="accordion__body">Answer one.</div>
   *     </details>
   *     <details class="accordion__item" name="faq">
   *       <summary class="accordion__header">Question two?</summary>
   *       <div class="accordion__body">Answer two.</div>
   *     </details>
   *   </div>
   */

  .accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .accordion__item {
    border-block-end: 1px solid var(--color-border);

    &:last-child {
      border-block-end: none;
    }
  }

  .accordion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    color: var(--color-ink);
    background: var(--color-canvas);
    cursor: pointer;
    list-style: none;
    transition: background var(--transition-fast);

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

    &:hover {
      background: var(--color-surface);
    }

    /* Chevron indicator */
    &::after {
      content: "";
      width: 0.5em;
      height: 0.5em;
      border-right: 2px solid var(--color-ink-muted);
      border-bottom: 2px solid var(--color-ink-muted);
      rotate: -45deg;
      transition: rotate var(--transition-base);
      flex-shrink: 0;
    }
  }

  .accordion__item[open] > .accordion__header::after {
    rotate: 45deg;
  }

  .accordion__body {
    padding: 0 1rem 0.75rem;
    color: var(--color-ink-muted);

    /* Entry animation */
    opacity: 1;
    transition: opacity var(--transition-base);

    @starting-style {
      opacity: 0;
    }
  }

}