diff --git a/app/modules/employees/templates/employees/work_engagement_board.html b/app/modules/employees/templates/employees/work_engagement_board.html
index 961becc..74bc829 100644
--- a/app/modules/employees/templates/employees/work_engagement_board.html
+++ b/app/modules/employees/templates/employees/work_engagement_board.html
@@ -175,7 +175,7 @@
 
                 <details class="relative">
                   <summary class="list-none cursor-pointer rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-sm font-bold text-amber-700 hover:bg-amber-100">! Blocked</summary>
-                  <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-20 mt-2 w-80 rounded-xl border border-amber-200 bg-white p-3 shadow-xl">
+                  <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-30 mt-2 w-80 rounded-xl border border-amber-200 bg-white p-3 shadow-xl">
                     <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                     <input type="hidden" name="action" value="blocked">
                     <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Reason</label>
@@ -189,7 +189,7 @@
 
                 <details class="relative">
                   <summary class="list-none cursor-pointer rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm font-bold text-red-700 hover:bg-red-100">✕ N/A</summary>
-                  <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-20 mt-2 w-80 rounded-xl border border-red-200 bg-white p-3 shadow-xl">
+                  <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/quick-action" class="absolute right-0 z-30 mt-2 w-80 rounded-xl border border-red-200 bg-white p-3 shadow-xl">
                     <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                     <input type="hidden" name="action" value="na">
                     <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Short reason</label>
@@ -202,137 +202,154 @@
             <span class="rounded-xl bg-slate-100 px-3 py-2 text-sm font-semibold text-slate-500">🔒 Locked</span>
             {% endif %}
 
-            <details class="group w-full lg:w-auto">
-              <summary class="list-none cursor-pointer rounded-xl border border-violet-200 bg-violet-50 px-3 py-2 text-center text-sm font-semibold text-violet-700 hover:bg-violet-100">Documents{% if task.i1_documents %} · {{ task.i1_documents|length }}{% endif %}</summary>
-              <div class="mt-3 rounded-2xl border border-violet-200 bg-white p-4 lg:min-w-[620px]">
-                <div class="flex flex-wrap items-start justify-between gap-3">
-                  <div>
-                    <h5 class="font-semibold text-slate-900">Task Documents</h5>
-                    <p class="mt-1 text-xs text-slate-500">Files stay linked to this task and engagement.</p>
-                  </div>
-                  <a href="/documents/tasks/{{ task.id }}?return_to=/employee/work/engagements/{{ board.engagement_id }}%3Ftask_id%3D{{ task.id }}%23task-{{ task.id }}" class="text-xs font-semibold text-violet-700 hover:underline">Open full document view</a>
-                </div>
+            <button type="button"
+                    data-i1-panel-trigger="documents"
+                    data-i1-task-id="{{ task.id }}"
+                    class="rounded-xl border border-violet-200 bg-violet-50 px-3 py-2 text-sm font-semibold text-violet-700 hover:bg-violet-100">
+              Documents{% if task.i1_documents %} · {{ task.i1_documents|length }}{% endif %}
+            </button>
 
-                {% if task.i1_documents %}
-                <div class="mt-3 divide-y divide-slate-100 rounded-xl border border-slate-200">
-                  {% for doc in task.i1_documents[:5] %}
-                  {% set latest = doc.versions[0] if doc.versions else none %}
-                  <div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
-                    <div class="min-w-0">
-                      <div class="truncate font-medium text-slate-800">{{ doc.title }}</div>
-                      <div class="truncate text-xs text-slate-500">{{ latest.original_filename if latest else doc.document_type }}{% if latest %} · v{{ latest.version_no }}{% endif %}</div>
-                    </div>
-                    {% if latest %}<a href="/documents/{{ doc.id }}/download" class="text-xs font-semibold text-brand-700 hover:underline">Download</a>{% endif %}
-                  </div>
-                  {% endfor %}
+            <button type="button"
+                    data-i1-panel-trigger="messages"
+                    data-i1-task-id="{{ task.id }}"
+                    class="rounded-xl border border-sky-200 bg-sky-50 px-3 py-2 text-sm font-semibold text-sky-700 hover:bg-sky-100">
+              Message / Clarification{% if task.i1_communications %} · {{ task.i1_communications|length }}{% endif %}
+            </button>
+
+            <button type="button"
+                    data-i1-panel-trigger="details"
+                    data-i1-task-id="{{ task.id }}"
+                    class="rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">
+              Details
+            </button>
+          </div>
+        </div>
+
+        <div class="mt-3 space-y-3" data-i1-panels-for-task="{{ task.id }}">
+          <div data-i1-panel="documents" class="hidden w-full rounded-2xl border border-violet-200 bg-violet-50/40 p-4">
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <h5 class="font-semibold text-slate-900">Task Documents</h5>
+                <p class="mt-1 text-xs text-slate-500">Files stay linked to this task and engagement.</p>
+              </div>
+              <a href="/documents/tasks/{{ task.id }}?return_to=/employee/work/engagements/{{ board.engagement_id }}%3Ftask_id%3D{{ task.id }}%23task-{{ task.id }}" class="text-xs font-semibold text-violet-700 hover:underline">Open full document view</a>
+            </div>
+
+            {% if task.i1_documents %}
+            <div class="mt-3 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white">
+              {% for doc in task.i1_documents[:5] %}
+              {% set latest = doc.versions[0] if doc.versions else none %}
+              <div class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
+                <div class="min-w-0">
+                  <div class="truncate font-medium text-slate-800">{{ doc.title }}</div>
+                  <div class="truncate text-xs text-slate-500">{{ latest.original_filename if latest else doc.document_type }}{% if latest %} · v{{ latest.version_no }}{% endif %}</div>
                 </div>
-                {% else %}
-                <div class="mt-3 rounded-xl border border-dashed border-slate-300 px-4 py-3 text-sm text-slate-500">No document attached yet.</div>
+                {% if latest %}<a href="/documents/{{ doc.id }}/download" class="text-xs font-semibold text-brand-700 hover:underline">Download</a>{% endif %}
+              </div>
+              {% endfor %}
+            </div>
+            {% else %}
+            <div class="mt-3 rounded-xl border border-dashed border-slate-300 bg-white px-4 py-3 text-sm text-slate-500">No document attached yet.</div>
+            {% endif %}
+
+            <form method="post" action="/documents/tasks/{{ task.id }}/upload" enctype="multipart/form-data" class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-end">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+              <input type="hidden" name="title" value="">
+              <input type="hidden" name="document_type" value="GENERAL">
+              <input type="hidden" name="return_to" value="/employee/work/engagements/{{ board.engagement_id }}?task_id={{ task.id }}#task-{{ task.id }}">
+              <label class="min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Add file
+                <input type="file" name="file" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
+              </label>
+              <button type="submit" class="rounded-lg bg-violet-600 px-4 py-2 text-sm font-semibold text-white hover:bg-violet-700">Upload</button>
+            </form>
+          </div>
+
+          <div data-i1-panel="messages" class="hidden w-full rounded-2xl border border-sky-200 bg-sky-50/40 p-4">
+            <div class="flex flex-wrap items-start justify-between gap-3">
+              <div>
+                <h5 class="font-semibold text-slate-900">Messages / Clarifications</h5>
+                <p class="mt-1 text-xs text-slate-500">Add a note, clarification or client/consultant communication.</p>
+              </div>
+              <a href="/employee/work/tasks/{{ task.id }}/communication?return_to=/employee/work/engagements/{{ board.engagement_id }}%3Ftask_id%3D{{ task.id }}%23task-{{ task.id }}" class="text-xs font-semibold text-sky-700 hover:underline">Open full timeline</a>
+            </div>
+
+            {% if task.i1_communications %}
+            <div class="mt-3 max-h-52 divide-y divide-slate-100 overflow-y-auto rounded-xl border border-slate-200 bg-white">
+              {% for item in task.i1_communications[:5] %}
+              <div class="px-3 py-2">
+                <div class="flex flex-wrap items-center justify-between gap-2 text-[11px] text-slate-500">
+                  <span>{{ item.comment_type.replace('_',' ').title() }} · {{ item.visibility.replace('_',' ').title() }}</span>
+                  <span>{{ item.created_at_utc }}</span>
+                </div>
+                <div class="mt-1 whitespace-pre-wrap text-sm text-slate-800">{{ item.message }}</div>
+                <div class="mt-1 text-[11px] text-slate-400">By {{ item.created_by.full_name if item.created_by else 'System/User' }}</div>
+              </div>
+              {% endfor %}
+            </div>
+            {% else %}
+            <div class="mt-3 rounded-xl border border-dashed border-slate-300 bg-white px-4 py-3 text-sm text-slate-500">No message or clarification yet.</div>
+            {% endif %}
+
+            <form method="post" action="/employee/work/tasks/{{ task.id }}/communication" class="mt-3 grid gap-2 sm:grid-cols-2">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+              <input type="hidden" name="return_to" value="/employee/work/engagements/{{ board.engagement_id }}?task_id={{ task.id }}#task-{{ task.id }}">
+              <select name="comment_type" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
+                {% for code, label in board.communication_types %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
+              </select>
+              <select name="visibility" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
+                {% for code, label in board.communication_visibilities %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
+              </select>
+              <textarea name="message" rows="2" required class="sm:col-span-2 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm" placeholder="Type message or clarification"></textarea>
+              <div class="sm:col-span-2 flex justify-end">
+                <button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700">Send</button>
+              </div>
+            </form>
+          </div>
+
+          <div data-i1-panel="details" class="hidden w-full rounded-2xl border border-slate-200 bg-slate-50 p-4">
+            <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/save" class="space-y-4">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+              <input type="hidden" name="status" value="{{ task.status or 'pending' }}">
+              <input type="hidden" name="workflow_action" value="save">
+
+              {% set response_type = task.response_type or 'NONE' %}
+              {% if response_type != 'NONE' or task.response_required %}
+              <div class="rounded-xl border border-indigo-200 bg-white p-3">
+                <div class="text-sm font-semibold text-indigo-900">Checklist Response{% if task.response_required %} *{% endif %}</div>
+                {% if response_type in ['YES_NO_NA', 'YES_NO'] %}
+                <div class="mt-2 flex flex-wrap gap-2">
+                  <label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="YES" {% if task.checklist_response == 'YES' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700">Yes</span></label>
+                  <label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="NO" {% if task.checklist_response == 'NO' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-red-500 peer-checked:bg-red-50 peer-checked:text-red-700">No</span></label>
+                  {% if response_type == 'YES_NO_NA' %}<label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="NA" {% if task.checklist_response == 'NA' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-slate-500 peer-checked:bg-slate-100">N/A</span></label>{% endif %}
+                </div>
+                {% elif response_type == 'TEXT' %}
+                <textarea name="checklist_text_response" rows="2" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ task.checklist_text_response or '' }}</textarea>
+                {% elif response_type == 'NUMBER' %}
+                <input type="number" step="any" name="checklist_number_response" value="{{ task.checklist_number_response if task.checklist_number_response is not none else '' }}" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
+                {% elif response_type == 'DATE' %}
+                <input type="date" name="checklist_date_response" value="{{ task.checklist_date_response or '' }}" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                 {% endif %}
-
-                <form method="post" action="/documents/tasks/{{ task.id }}/upload" enctype="multipart/form-data" class="mt-3 flex flex-col gap-2 sm:flex-row sm:items-end">
-                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                  <input type="hidden" name="title" value="">
-                  <input type="hidden" name="document_type" value="GENERAL">
-                  <input type="hidden" name="return_to" value="/employee/work/engagements/{{ board.engagement_id }}?task_id={{ task.id }}#task-{{ task.id }}">
-                  <label class="min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-slate-500">Add file
-                    <input type="file" name="file" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
-                  </label>
-                  <button type="submit" class="rounded-lg bg-violet-600 px-4 py-2 text-sm font-semibold text-white hover:bg-violet-700">Upload</button>
-                </form>
+                <textarea name="checklist_remarks" rows="2" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Checklist remark only when needed">{{ task.checklist_remarks or '' }}</textarea>
               </div>
-            </details>
+              {% else %}
+              <input type="hidden" name="checklist_response" value="">
+              <input type="hidden" name="checklist_text_response" value="">
+              <input type="hidden" name="checklist_number_response" value="">
+              <input type="hidden" name="checklist_date_response" value="">
+              <input type="hidden" name="checklist_remarks" value="">
+              {% endif %}
 
-            <details class="group w-full lg:w-auto">
-              <summary class="list-none cursor-pointer rounded-xl border border-sky-200 bg-sky-50 px-3 py-2 text-center text-sm font-semibold text-sky-700 hover:bg-sky-100">Message / Clarification{% if task.i1_communications %} · {{ task.i1_communications|length }}{% endif %}</summary>
-              <div class="mt-3 rounded-2xl border border-sky-200 bg-white p-4 lg:min-w-[620px]">
-                <div class="flex flex-wrap items-start justify-between gap-3">
-                  <div>
-                    <h5 class="font-semibold text-slate-900">Messages / Clarifications</h5>
-                    <p class="mt-1 text-xs text-slate-500">Add a note, clarification or client/consultant communication.</p>
-                  </div>
-                  <a href="/employee/work/tasks/{{ task.id }}/communication?return_to=/employee/work/engagements/{{ board.engagement_id }}%3Ftask_id%3D{{ task.id }}%23task-{{ task.id }}" class="text-xs font-semibold text-sky-700 hover:underline">Open full timeline</a>
-                </div>
-
-                {% if task.i1_communications %}
-                <div class="mt-3 max-h-52 divide-y divide-slate-100 overflow-y-auto rounded-xl border border-slate-200">
-                  {% for item in task.i1_communications[:5] %}
-                  <div class="px-3 py-2">
-                    <div class="flex flex-wrap items-center justify-between gap-2 text-[11px] text-slate-500">
-                      <span>{{ item.comment_type.replace('_',' ').title() }} · {{ item.visibility.replace('_',' ').title() }}</span>
-                      <span>{{ item.created_at_utc }}</span>
-                    </div>
-                    <div class="mt-1 whitespace-pre-wrap text-sm text-slate-800">{{ item.message }}</div>
-                    <div class="mt-1 text-[11px] text-slate-400">By {{ item.created_by.full_name if item.created_by else 'System/User' }}</div>
-                  </div>
-                  {% endfor %}
-                </div>
-                {% else %}
-                <div class="mt-3 rounded-xl border border-dashed border-slate-300 px-4 py-3 text-sm text-slate-500">No message or clarification yet.</div>
-                {% endif %}
-
-                <form method="post" action="/employee/work/tasks/{{ task.id }}/communication" class="mt-3 grid gap-2 sm:grid-cols-2">
-                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                  <input type="hidden" name="return_to" value="/employee/work/engagements/{{ board.engagement_id }}?task_id={{ task.id }}#task-{{ task.id }}">
-                  <select name="comment_type" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
-                    {% for code, label in board.communication_types %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
-                  </select>
-                  <select name="visibility" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
-                    {% for code, label in board.communication_visibilities %}<option value="{{ code }}">{{ label }}</option>{% endfor %}
-                  </select>
-                  <textarea name="message" rows="2" required class="sm:col-span-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Type message or clarification"></textarea>
-                  <div class="sm:col-span-2 flex justify-end"><button type="submit" class="rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700">Send</button></div>
-                </form>
+              <div>
+                <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Work Remark</label>
+                <input type="text" name="remarks" value="{{ task.remarks or '' }}" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Optional">
               </div>
-            </details>
 
-            <details class="group w-full lg:w-auto">
-              <summary class="list-none cursor-pointer rounded-xl border border-slate-300 bg-white px-3 py-2 text-center text-sm font-semibold text-slate-700 hover:bg-slate-50">Details</summary>
-              <div class="mt-3 rounded-2xl border border-slate-200 bg-slate-50 p-4 lg:min-w-[720px]">
-                <form method="post" action="/employee/work/engagements/{{ board.engagement_id }}/tasks/{{ task.id }}/save" class="space-y-4">
-                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                  <input type="hidden" name="status" value="{{ task.status or 'pending' }}">
-                  <input type="hidden" name="workflow_action" value="save">
-
-                  {% set response_type = task.response_type or 'NONE' %}
-                  {% if response_type != 'NONE' or task.response_required %}
-                  <div class="rounded-xl border border-indigo-200 bg-white p-3">
-                    <div class="text-sm font-semibold text-indigo-900">Checklist Response{% if task.response_required %} *{% endif %}</div>
-                    {% if response_type in ['YES_NO_NA', 'YES_NO'] %}
-                    <div class="mt-2 flex flex-wrap gap-2">
-                      <label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="YES" {% if task.checklist_response == 'YES' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700">Yes</span></label>
-                      <label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="NO" {% if task.checklist_response == 'NO' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-red-500 peer-checked:bg-red-50 peer-checked:text-red-700">No</span></label>
-                      {% if response_type == 'YES_NO_NA' %}<label class="cursor-pointer"><input type="radio" class="peer sr-only" name="checklist_response" value="NA" {% if task.checklist_response == 'NA' %}checked{% endif %}><span class="inline-flex rounded-lg border px-3 py-2 text-sm peer-checked:border-slate-500 peer-checked:bg-slate-100">N/A</span></label>{% endif %}
-                    </div>
-                    {% elif response_type == 'TEXT' %}
-                    <textarea name="checklist_text_response" rows="2" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ task.checklist_text_response or '' }}</textarea>
-                    {% elif response_type == 'NUMBER' %}
-                    <input type="number" step="any" name="checklist_number_response" value="{{ task.checklist_number_response if task.checklist_number_response is not none else '' }}" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
-                    {% elif response_type == 'DATE' %}
-                    <input type="date" name="checklist_date_response" value="{{ task.checklist_date_response or '' }}" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
-                    {% endif %}
-                    <textarea name="checklist_remarks" rows="2" class="mt-2 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Checklist remark only when needed">{{ task.checklist_remarks or '' }}</textarea>
-                  </div>
-                  {% else %}
-                  <input type="hidden" name="checklist_response" value="">
-                  <input type="hidden" name="checklist_text_response" value="">
-                  <input type="hidden" name="checklist_number_response" value="">
-                  <input type="hidden" name="checklist_date_response" value="">
-                  <input type="hidden" name="checklist_remarks" value="">
-                  {% endif %}
-
-                  <div>
-                    <label class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Work Remark</label>
-                    <input type="text" name="remarks" value="{{ task.remarks or '' }}" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Optional">
-                  </div>
-
-                  <div class="flex flex-wrap items-center justify-between gap-2">
-                    <div class="text-xs text-slate-500">Documents and messages can be added directly from this checklist row.</div>
-                    <button type="submit" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Save Details</button>
-                  </div>
-                </form>
+              <div class="flex justify-end">
+                <button type="submit" class="rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white">Save Details</button>
               </div>
-            </details>
+            </form>
+          </div>
+        </div>
           </div>
         </div>
       </div>
@@ -367,4 +384,30 @@
     </dl>
   </section>
 </div>
+
+<script>
+document.addEventListener("click", function (event) {
+  const trigger = event.target.closest("[data-i1-panel-trigger]");
+  if (!trigger) return;
+
+  const taskId = trigger.getAttribute("data-i1-task-id");
+  const panelName = trigger.getAttribute("data-i1-panel-trigger");
+  const container = document.querySelector('[data-i1-panels-for-task="' + taskId + '"]');
+  if (!container) return;
+
+  const requested = container.querySelector('[data-i1-panel="' + panelName + '"]');
+  if (!requested) return;
+
+  const wasOpen = !requested.classList.contains("hidden");
+  container.querySelectorAll("[data-i1-panel]").forEach(function (panel) {
+    panel.classList.add("hidden");
+  });
+
+  if (!wasOpen) {
+    requested.classList.remove("hidden");
+    requested.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+});
+</script>
+
 {% endblock %}