document.addEventListener('DOMContentLoaded', function() {
    // (No per-icon setup needed here—just ensure your CSS is in place.)
  });

  // 1) Delegate clicks on any .toggle-icon, now or in the future:
  document.addEventListener('click', function(e) {
    // Find the closest .toggle-icon ancestor of the click target, if any
    if (!e.target.classList.contains('toggle-icon')) return;
    var icon = e.target;

    // Prevent clicks on the icon from bubbling further if you want
    e.stopPropagation(); 

    // Locate its .card-body.collapsable in the same card
    var card = icon.closest('.card');
    if (!card) return;
    var body = card.querySelector('.card-body.collapsable');
    if (!body) return;

    // Toggle the 'show' class and swap +/– text
    if (body.classList.contains('show')) {
      // Collapse: remove show, update icon, remove from set
      body.classList.remove('show');
      icon.textContent = '+';
      icon.setAttribute('aria-expanded', 'false');
      openCards.add(key);
    } else {
      // Expand: add show, update icon, add to set
      body.classList.add('show');
      icon.textContent = '–';
      icon.setAttribute('aria-expanded', 'true');
      openCards.add(key);
    }
  });