/* <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. */
/* No --flow-space here: the page's prose rules decide the accordion's spacing
 * (this sheet is unlayered, so a value set here would beat base.css). */
ad-accordion {
  display: block;
  /* The bulk-control bar's height: a small button (line 1.2 + padding 0.6 +
   * border 0.2 of its font). Shared by the bar and by the placeholder below. */
  --accordion-bar: max(var(--target-min), 2 * var(--text--1));
}

/* While the script is on its way (data-js is set by theme-init.js before the
 * first paint) a group of three or more items holds the room for the bar it
 * will get, so the items do not move down when the bar appears. Without
 * JavaScript there is no bar and no placeholder; exclusive groups get no bar. */
[data-js] ad-accordion:not([data-enhanced], [exclusive]):has(> details:nth-of-type(3))::before {
  content: "";
  display: block;
  block-size: var(--accordion-bar);
  margin-block-end: var(--space-xs);
}

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

/* The focus ring sits outside the item, so a focused item is lifted above its
 * neighbours instead of being painted over by them. (No overflow clipping on
 * the item: that used to cut the ring off.) */
ad-accordion > details:has(> summary:focus-visible) {
  position: relative;
  z-index: 1;
}

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;
  border-radius: calc(var(--radius-m) - 1px);
}

/* The heading inside the summary keeps its semantics and takes the summary's
 * type; a section-level (h2) item gets the larger heading size. */
ad-accordion > details > summary > :is(h2, h3, h4, h5, h6) {
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  max-inline-size: none;
}

ad-accordion > details > summary:has(> h2) {
  font-size: var(--text-1);
}

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);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

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);
  min-block-size: var(--accordion-bar);
  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;
  }
}

/* Print: every item expanded, bulk controls and chevrons gone. Chromium keeps
 * closed content inside ::details-content, so CSS alone opens it there; the
 * script also sets `open` on beforeprint for browsers without the pseudo-element. */
@media print {
  .accordion__controls {
    display: none;
  }

  ad-accordion > details::details-content {
    content-visibility: visible;
    display: block;
    block-size: auto;
  }

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

  ad-accordion > details > summary {
    border-block-end: 1px solid #999;
  }
}