Separate and collapse CSV column selector card (#123)

### Motivation
- Improve the CSV Row Viewer UI by separating column selection from row browsing so the controls are clearer and less crowded.
- Make the column selector collapsible and collapsed by default to reduce visual noise for users who only want to view rows.
- Display column checkboxes in a single vertical list with the checkbox on the left for clear, accessible selection.

### Description
- Moved the column selection UI out of the `#viewer` card into a new `#column-selector` card that contains a `<details>` block with a `summary` titled "Column selection" so it is collapsed by default.
- Removed the inline column-filter markup from `#viewer` and added `#column-filter-card` and `#column-checkboxes` inside the new `#column-selector` markup.
- Adjusted CSS to make the checkbox list vertical (`.column-checkboxes { grid-template-columns: 1fr; }`) and added `.column-filter-details>summary` styles to indicate the collapsible header.
- Updated JavaScript to reference the new `columnSelector` element and show/hide `columnSelector` together with `columnFilterCard` during CSV load and on parse errors, preserving existing checkbox and "select all" behavior.

------
[Codex Task](https://chatgpt.com/codex/tasks/task_e_69c3c3f0a4f08325a4678927023530b4)

Author: rodrigogiraoserrao

csv-row-viewer.html

@@ -66,11 +66,6 @@
         .column-filter-card {
             display: grid;
             gap: 1rem;
-            margin-bottom: 1.25rem;
-            padding: 1rem;
-            border: 1px solid var(--border-subtle, #d0d5dd);
-            border-radius: 0.75rem;
-            background: var(--background-subtle, #f8f9fb);
         }
 
         .column-filter-header {
@@ -84,7 +79,12 @@
         .column-checkboxes {
             display: grid;
             gap: 0.5rem;
-            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            grid-template-columns: 1fr;
+        }
+
+        .column-filter-details>summary {
+            cursor: pointer;
+            font-weight: 700;
         }
 
         .checkbox-row {
@@ -126,23 +126,28 @@ <h1>CSV Row Viewer</h1>
             <p id="load-status" class="status" aria-live="polite">No file loaded.</p>
         </section>
 
+        <section id="column-selector" class="surface tool-card" hidden>
+            <details id="column-filter-details" class="column-filter-details">
+                <summary>Column selection</summary>
+                <div id="column-filter-card" class="column-filter-card" hidden>
+                    <div class="column-filter-header">
+                        <strong>Visible columns</strong>
+                        <label class="checkbox-row" for="toggle-all-columns">
+                            <input id="toggle-all-columns" type="checkbox">
+                            <span>Select all</span>
+                        </label>
+                    </div>
+                    <div id="column-checkboxes" class="column-checkboxes"></div>
+                </div>
+            </details>
+        </section>
+
         <section id="viewer" class="surface tool-card" hidden>
             <div class="meta">
                 <span id="row-indicator">Row 1 of 1</span>
                 <span id="file-summary"></span>
             </div>
 
-            <div id="column-filter-card" class="column-filter-card" hidden>
-                <div class="column-filter-header">
-                    <strong>Visible columns</strong>
-                    <label class="checkbox-row" for="toggle-all-columns">
-                        <input id="toggle-all-columns" type="checkbox">
-                        <span>Select all</span>
-                    </label>
-                </div>
-                <div id="column-checkboxes" class="column-checkboxes"></div>
-            </div>
-
             <div class="table-container" aria-live="polite">
                 <table>
                     <thead>
@@ -183,6 +188,7 @@ <h1>CSV Row Viewer</h1>
             const nextButton = document.getElementById('next-row');
             const jumpInput = document.getElementById('jump-row');
             const jumpButton = document.getElementById('jump-button');
+            const columnSelector = document.getElementById('column-selector');
             const columnFilterCard = document.getElementById('column-filter-card');
             const columnCheckboxes = document.getElementById('column-checkboxes');
             const toggleAllColumns = document.getElementById('toggle-all-columns');
@@ -285,10 +291,12 @@ <h1>CSV Row Viewer</h1>
 
             const renderColumnFilters = () => {
                 if (!columnLabels.length) {
+                    columnSelector.hidden = true;
                     columnFilterCard.hidden = true;
                     return;
                 }
 
+                columnSelector.hidden = false;
                 columnFilterCard.hidden = false;
                 columnCheckboxes.innerHTML = columnLabels.map((label, index) => `
                     <label class="checkbox-row" for="column-toggle-${index}">
@@ -342,6 +350,7 @@ <h1>CSV Row Viewer</h1>
                     renderRow();
                 } catch (error) {
                     viewer.hidden = true;
+                    columnSelector.hidden = true;
                     headers = [];
                     rows = [];
                     columnLabels = [];