// Click-to-zoom for .diagram img elements
// Creates a fullscreen overlay with the diagram, click or Escape to close
(function () {
  var overlay = document.createElement('div');
  overlay.id = 'diagram-overlay';
  overlay.style.cssText =
    'display:none;position:fixed;top:0;left:0;width:100%;height:100%;' +
    'background:rgba(0,0,0,0.9);z-index:9999;cursor:zoom-out;' +
    'justify-content:center;align-items:center;padding:2em;';

  var img = document.createElement('img');
  img.style.cssText = 'max-width:95%;max-height:95%;object-fit:contain;';
  overlay.appendChild(img);

  document.body.appendChild(overlay);

  overlay.addEventListener('click', function () {
    overlay.style.display = 'none';
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && overlay.style.display === 'flex') {
      overlay.style.display = 'none';
    }
  });

  document.querySelectorAll('.diagram img').forEach(function (el) {
    el.style.cursor = 'zoom-in';
    el.addEventListener('click', function () {
      img.src = el.src;
      img.alt = el.alt;
      overlay.style.display = 'flex';
    });
  });
})();