Fix: use <details>/<summary> for native toggle, no JS needed for cards

app.py

@@ -111,19 +111,19 @@ def calc_log_to_html(steps):
         elif "MASK" in n:                       cat = "mask"
 
         cards.append(f"""
-        <div class="calc-card cat-{cat}" data-idx="{i}">
-          <div class="calc-header">
+        <details class="calc-card cat-{cat}" data-idx="{i}">
+          <summary class="calc-header">
             <span class="step-num">#{i+1}</span>
             <span class="step-name cat-label-{cat}">{name.replace('_',' ')}</span>
             {shape_badge}
             <span class="toggle-arrow">▶</span>
-          </div>
-          <div class="calc-body" style="display:none">
+          </summary>
+          <div class="calc-body">
             {formula_html}
             {note_html}
             <div class="matrix-wrap">{matrix_html}</div>
           </div>
-        </div>""")
+        </details>""")
 
     return "\n".join(cards)
 
@@ -384,14 +384,16 @@ button.primary { background: linear-gradient(135deg, #0d3d30, #0d3d4d) !importan
 button.primary:hover { background: linear-gradient(135deg, #1a5c4a, #1a5c6d) !important; box-shadow: 0 0 12px rgba(100,255,218,0.3) !important; }
 
 /* ── calc cards ── */
-.calc-card { border-radius: 8px; margin: 4px 0; border: 1px solid var(--border); background: var(--card); overflow: hidden; }
-.calc-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; transition: background 0.15s; }
-.calc-header:hover { background: rgba(255,255,255,0.03); }
-.calc-body { padding: 10px 14px; background: var(--bg2); border-top: 1px solid var(--border); }
+details.calc-card { border-radius: 8px; margin: 4px 0; border: 1px solid var(--border); background: var(--card); overflow: hidden; }
+details.calc-card > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; list-style: none; transition: background 0.15s; }
+details.calc-card > summary::-webkit-details-marker { display: none; }
+details.calc-card > summary::marker { display: none; }
+details.calc-card > summary:hover { background: rgba(255,255,255,0.03); }
+details.calc-card > .calc-body { padding: 10px 14px; background: var(--bg2); border-top: 1px solid var(--border); }
 .step-num { color: var(--muted); font-size: 11px; min-width: 28px; }
 .step-name { font-weight: 600; font-size: 12px; flex: 1; }
 .toggle-arrow { color: var(--muted); font-size: 10px; transition: transform 0.2s; }
-.toggle-arrow.open { transform: rotate(90deg); }
+details[open] .toggle-arrow { transform: rotate(90deg); }
 .shape-badge { background: var(--bg3); color: var(--muted); font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
 .formula { color: var(--accent); font-size: 11px; font-style: italic; margin-bottom: 4px; background: rgba(100,255,218,0.05); padding: 4px 8px; border-radius: 4px; border-left: 2px solid var(--accent); }
 .step-note { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
@@ -485,39 +487,26 @@ button.primary:hover { background: linear-gradient(135deg, #1a5c4a, #1a5c6d) !im
 """
 
 CUSTOM_JS = """
-// Card toggle
-window._toggleCard = function(header) {
-  const body = header.nextElementSibling;
-  const arrow = header.querySelector('.toggle-arrow');
-  if (!body) return;
-  const open = body.style.display === 'block';
-  body.style.display = open ? 'none' : 'block';
-  if (arrow) arrow.classList.toggle('open', !open);
-};
+// <details> elements toggle natively — JS only needed for expand-all/collapse-all/filter
 window._expandAll = function() {
-  document.querySelectorAll('.calc-body').forEach(b => b.style.display='block');
-  document.querySelectorAll('.toggle-arrow').forEach(a => a.classList.add('open'));
+  document.querySelectorAll('details.calc-card').forEach(d => d.open = true);
 };
 window._collapseAll = function() {
-  document.querySelectorAll('.calc-body').forEach(b => b.style.display='none');
-  document.querySelectorAll('.toggle-arrow').forEach(a => a.classList.remove('open'));
+  document.querySelectorAll('details.calc-card').forEach(d => d.open = false);
 };
 window._filterCards = function(cat) {
-  document.querySelectorAll('.calc-card').forEach(c => {
-    c.style.display = (!cat || c.classList.contains('cat-'+cat)) ? '' : 'none';
+  document.querySelectorAll('details.calc-card').forEach(d => {
+    d.style.display = (!cat || d.classList.contains('cat-'+cat)) ? '' : 'none';
   });
 };
-// Event delegation — works even if Gradio strips onclick attrs
+// Toolbar button delegation
 document.addEventListener('click', function(e) {
-  const header = e.target.closest('.calc-header');
-  if (header) { window._toggleCard(header); return; }
   const btn = e.target.closest('[data-ga]');
-  if (btn) {
-    const a = btn.dataset.ga;
-    if (a === 'expand') window._expandAll();
-    else if (a === 'collapse') window._collapseAll();
-    else if (a.startsWith('filter:')) window._filterCards(a.slice(7));
-  }
+  if (!btn) return;
+  const a = btn.dataset.ga;
+  if (a === 'expand')        window._expandAll();
+  else if (a === 'collapse') window._collapseAll();
+  else if (a.startsWith('filter:')) window._filterCards(a.slice(7));
 }, true);
 """