/* 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>
 */

@layer components {
  .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;
    min-height: var(--touch-min);
    padding: 0.75rem 1rem;
    color: var(--color-ink);
    background: var(--color-canvas);
    cursor: pointer;
    list-style: none;
    transition: background 100ms ease;

    &::-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 150ms ease;
      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 150ms ease;

    @starting-style {
      opacity: 0;
    }
  }
}