/* Collapsible section container (spec §3.4).
 *
 * The collapsible-section Stimulus controller writes [data-collapsed]
 * to the root; CSS drives the height transition and chevron rotation.
 * Respects prefers-reduced-motion: the transition is additive inside
 * the media query so reduced-motion users get an instant toggle.
 */

@layer components {
  .collapsible-section {
    display: grid;
    grid-template-rows: auto 1fr;
    row-gap: 0.375rem;
  }

  .collapsible-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--inline-space);
    padding-block: 0.5rem;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    cursor: pointer;
    text-align: start;
    min-height: var(--touch-min);
  }

  .collapsible-section__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    /* Tertiary ink fails AA at 11px. Muted clears 6.82:1 over canvas. */
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .collapsible-section__subtitle {
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    margin-inline-start: auto;
    margin-inline-end: 0.5rem;
  }

  .collapsible-section__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-ink-muted);
    transition: transform 150ms ease;

    [data-collapsed="true"] & {
      transform: rotate(-90deg);
    }
  }

  .collapsible-section__content {
    overflow: hidden;
    interpolate-size: allow-keywords;

    [data-collapsed="true"] > & {
      block-size: 0;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .collapsible-section__content {
      transition: block-size 250ms ease;
    }
  }
}