:root {
  --icon-size: 10px;
  --triangle-color: #861f41;
}

details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
}

/* Remove default marker */
details summary::-webkit-details-marker {
  display: none;
}

/* Triangle icon built with borders */
.triangle {
  width: 0;
  height: 0;
  border-left: var(--icon-size) solid transparent;
  border-right: var(--icon-size) solid transparent;
  border-top: calc(var(--icon-size) * 1.2) solid var(--triangle-color);
  transition: transform 0.2s ease;
}

/* Closed state: point right */
details:not([open]) .triangle {
  transform: rotate(-90deg);
}

/* Text toggling (base behavior for all details) */
.show-when-open,
.show-when-closed {
  display: inline;
}

details[open] .show-when-open {
  display: inline;
}

details[open] .show-when-closed {
  display: none;
}

details:not([open]) .show-when-open {
  display: none;
}

details:not([open]) .show-when-closed {
  display: inline;
}

/* --- Versions --- */

/* Version 1: Open by default */
.details-open[open] {
  /* nothing extra needed, just a semantic marker */
}

/* Version 2: Closed by default */
.details-closed {
  /* start closed unless explicitly opened by user */
}