.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { color: var(--c-slate-600); }
.accordion__summary:focus-visible { outline-offset: -2px; }

.accordion__chevron {
  flex: none;
  color: var(--c-slate-400);
  transition: transform var(--dur) var(--ease);
}
.accordion__item[open] .accordion__chevron { transform: rotate(180deg); }

.accordion__panel { overflow: hidden; }
.accordion__panel-inner { padding-bottom: var(--s-5); color: var(--fg-muted); font-size: var(--fs-sm); }

/* Progressive: animate the disclosure where the browser supports it. */
@supports (interpolate-size: allow-keywords) {
  .accordion__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete;
  }
  .accordion__item[open]::details-content { block-size: auto; }
}