/* ─────────────────────────────────────────────
   Convert Accordion — native <details>, +/- toggle.
   Use with tokens.css. Markup: <div class="accordion"> > <details class="accordion__item">.
   ───────────────────────────────────────────── */

.accordion { border-top: 1px solid var(--color-border-cream); }
.accordion__item { border-bottom: 1px solid var(--color-border-cream); }
.accordion__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  font-size: var(--text-card-title);
  font-weight: 500;
  color: var(--color-text-primary);
  list-style: none;
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary::after {
  content: "+";
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-violet-100);
  color: var(--color-violet-700);
  font-size: 18px;
  line-height: 1;
}
.accordion__item[open] > summary::after { content: "\2212"; } /* minus sign */
.accordion__body {
  padding: 0 4px 20px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}