/* css.slopped.site exhibit: One drawer at a time. From css/exhibits/accordion.mjs. */
.x-accordion .drawers { display: grid; gap: 10px; max-width: 640px; }
.x-accordion .drawer { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.x-accordion summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 18px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.x-accordion summary::-webkit-details-marker { display: none; }
.x-accordion .drawer p { margin: 0; padding: 0 18px 18px; max-width: 54ch; }
/* key */
/* <details name="drawers"> on every drawer: opening one closes the others (no CSS involved) */

/* a drawer handle that turns when the drawer opens */
.x-accordion summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s;
}
.x-accordion details[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.x-accordion details[open] > summary { background: var(--acid); color: var(--on-acid); border-radius: 10px 10px 0 0; }

/* where the browser can animate to height: auto, the drawer slides */
@supports (interpolate-size: allow-keywords) {
  .x-accordion .drawers { interpolate-size: allow-keywords; }
  .x-accordion details::details-content { height: 0; overflow: clip; transition: height .25s, content-visibility .25s allow-discrete; }
  .x-accordion details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .x-accordion summary::after, .x-accordion details::details-content { transition: none; }
}
/* /key */

/* live support notes (built from css/exhibits.js) */