/* <ad-accordion>: styled native disclosures with an animated open/close.
 * The animation uses ::details-content and interpolate-size (Chromium 131+);
 * other browsers simply toggle, which is fully accessible. */
ad-accordion {
  display: block;
  --flow-space: var(--space-2xs);
}

ad-accordion > details {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--bg-raised);
  padding-inline: 0;
  overflow: clip;
}

ad-accordion > details + details {
  margin-block-start: var(--space-2xs);
}

ad-accordion > details > summary {
  padding: var(--space-xs) var(--space-s);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 650;
  cursor: pointer;
}

ad-accordion > details > summary::-webkit-details-marker {
  display: none;
}

/* A chevron drawn with borders, rotated when open. */
ad-accordion > details > summary::before {
  content: "";
  flex: none;
  inline-size: 0.6em;
  block-size: 0.6em;
  border-inline-end: 3px solid var(--accent);
  border-block-end: 3px solid var(--accent);
  rotate: -45deg;
  translate: 0 -0.1em;
  transition: rotate var(--duration-base) var(--ease-out);
}

ad-accordion > details[open] > summary::before {
  rotate: 45deg;
  translate: 0 -0.2em;
}

ad-accordion > details > summary:hover {
  background: var(--bg-tint);
}

ad-accordion > details[open] > summary {
  border-block-end: 1px solid var(--border);
}

ad-accordion > details > :not(summary) {
  padding: var(--space-s);
  margin: 0;
}

ad-accordion > details > :not(summary) > * + * {
  margin-block-start: var(--space-xs);
}

.accordion__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-xs);
}

@media (prefers-reduced-motion: no-preference) {
  ad-accordion {
    interpolate-size: allow-keywords;
  }

  ad-accordion > details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--duration-base) var(--ease-out),
      content-visibility var(--duration-base) allow-discrete;
  }

  ad-accordion > details[open]::details-content {
    block-size: auto;
  }
}