Improve mobile responsive layout, add mobile stage switcher & collapsible filter bar

public/app.js

@@ -213,8 +213,10 @@ function renderKanbanBoard() {
   for (const st of statuses) {
     const colEl = document.getElementById(`col-${st}`);
     const countEl = document.getElementById(`count-${st}`);
+    const mcountEl = document.getElementById(`mcount-${st}`);
     const list = state.ideas.filter((i) => i.status === st);
     if (countEl) countEl.textContent = list.length;
+    if (mcountEl) mcountEl.textContent = list.length;
     if (!colEl) continue;
 
     if (list.length === 0) {
@@ -1525,6 +1527,21 @@ function bindGlobalEvents() {
   });
 
   // Global Filters
+  document.getElementById("btn-mobile-filter-toggle")?.addEventListener("click", () => {
+    const bar = document.getElementById("global-filter-bar");
+    bar?.classList.toggle("mobile-filters-open");
+  });
+
+  document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      const stage = tab.dataset.mobileStage;
+      document.querySelectorAll("#mobile-stage-switcher .stage-tab").forEach((t) =>
+        t.classList.toggle("active", t === tab)
+      );
+      document.getElementById("kanban-board")?.setAttribute("data-mobile-active-stage", stage);
+    });
+  });
+
   document.getElementById("filter-search")?.addEventListener("input", (e) => {
     state.filters.search = e.target.value;
     loadIdeas();

public/index.html

@@ -85,18 +85,23 @@
 
   <!-- NAVIGATION & STATS STRIP -->
   <nav class="subnav">
-    <div class="view-tabs" role="tablist">
-      <button type="button" class="view-tab active" data-view="board" role="tab">
-        📋 Pipeline Board
-      </button>
-      <button type="button" class="view-tab" data-view="grid" role="tab">
-        🗂️ Explorer & Mockup Gallery
-      </button>
-      <button type="button" class="view-tab" data-view="whack" role="tab">
-        🃏 Creative Whack Pack <span class="tab-pill">64 Cards</span>
-      </button>
-      <button type="button" class="view-tab" data-view="review" role="tab">
-        ⚔️ Review & Head-to-Head Arena
+    <div class="subnav-top-row">
+      <div class="view-tabs" role="tablist">
+        <button type="button" class="view-tab active" data-view="board" role="tab">
+          📋 Pipeline
+        </button>
+        <button type="button" class="view-tab" data-view="grid" role="tab">
+          🗂️ Explorer
+        </button>
+        <button type="button" class="view-tab" data-view="whack" role="tab">
+          🃏 Whack Pack <span class="tab-pill">64</span>
+        </button>
+        <button type="button" class="view-tab" data-view="review" role="tab">
+          ⚔️ Arena & Triage
+        </button>
+      </div>
+      <button type="button" id="btn-mobile-filter-toggle" class="btn btn-ghost btn-sm mobile-only">
+        🔍 Filters
       </button>
     </div>
 
@@ -135,7 +140,28 @@
   <main class="workspace">
     <!-- VIEW 1: PIPELINE KANBAN BOARD -->
     <section id="view-board" class="view-section active">
-      <div class="kanban-board" id="kanban-board">
+      <!-- Mobile Stage Switcher Pills -->
+      <div class="mobile-stage-switcher mobile-only" id="mobile-stage-switcher">
+        <button type="button" class="stage-tab active" data-mobile-stage="spark">
+          ✨ Spark <span class="stage-tab-count" id="mcount-spark">0</span>
+        </button>
+        <button type="button" class="stage-tab" data-mobile-stage="exploring">
+          🔍 Exploring <span class="stage-tab-count" id="mcount-exploring">0</span>
+        </button>
+        <button type="button" class="stage-tab" data-mobile-stage="building">
+          🛠️ Building <span class="stage-tab-count" id="mcount-building">0</span>
+        </button>
+        <button type="button" class="stage-tab" data-mobile-stage="shipped">
+          🚀 Shipped <span class="stage-tab-count" id="mcount-shipped">0</span>
+        </button>
+        <button type="button" class="stage-tab" data-mobile-stage="archived">
+          📦 Archived <span class="stage-tab-count" id="mcount-archived">0</span>
+        </button>
+        <button type="button" class="stage-tab" data-mobile-stage="all">
+          All
+        </button>
+      </div>
+      <div class="kanban-board" id="kanban-board" data-mobile-active-stage="spark">
         <div class="kanban-column" data-status="spark">
           <div class="kanban-col-header">
             <div>

public/styles.css

@@ -230,6 +230,17 @@ body {
   flex-wrap: wrap;
 }
 
+.subnav-top-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.mobile-only {
+  display: none;
+}
+
 .view-tabs {
   display: flex;
   gap: 0.35rem;
@@ -1371,3 +1382,299 @@ body {
   box-shadow: var(--shadow-lg);
   font-size: 0.84rem;
 }
+
+/* =========================================================
+   MOBILE & TABLET RESPONSIVE ENHANCEMENTS (<= 820px)
+   ========================================================= */
+@media (max-width: 820px) {
+  .mobile-only {
+    display: inline-flex;
+  }
+
+  /* 1. Topbar & Quick Capture on Mobile */
+  .topbar {
+    padding: 0.6rem 0.75rem;
+    gap: 0.55rem;
+  }
+
+  .brand-subtitle,
+  .brand-badge {
+    display: none;
+  }
+
+  .brand-logo {
+    width: 32px;
+    height: 32px;
+    font-size: 1.05rem;
+  }
+
+  .brand-title {
+    font-size: 1.05rem;
+  }
+
+  .topbar-actions {
+    margin-left: auto;
+    gap: 0.35rem;
+  }
+
+  .topbar-actions .btn-sm {
+    padding: 0.28rem 0.5rem;
+    font-size: 0.76rem;
+  }
+
+  .quick-capture-bar {
+    order: 3;
+    flex: 1 1 100%;
+    max-width: 100%;
+    min-width: 0;
+    flex-wrap: wrap;
+    padding: 0.45rem;
+    gap: 0.4rem;
+  }
+
+  .qc-icon {
+    display: none;
+  }
+
+  #quick-capture-input {
+    flex: 1 1 100%;
+    width: 100%;
+    font-size: 16px; /* Prevents iOS auto-zoom on focus */
+    padding: 0.25rem 0.35rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  #quick-capture-category {
+    flex: 1;
+    font-size: 0.82rem;
+    padding: 0.36rem 0.45rem;
+  }
+
+  /* 2. Subnav & Collapsible Mobile Filters */
+  .subnav {
+    padding: 0.5rem 0.75rem;
+    gap: 0.5rem;
+  }
+
+  .subnav-top-row {
+    width: 100%;
+  }
+
+  .view-tabs {
+    flex: 1;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    gap: 0.28rem;
+  }
+
+  .view-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .view-tab {
+    white-space: nowrap;
+    padding: 0.38rem 0.65rem;
+    font-size: 0.8rem;
+  }
+
+  .filter-bar {
+    display: none;
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: 0.4rem;
+    border-top: 1px solid var(--border-color);
+    gap: 0.45rem;
+  }
+
+  .filter-bar.mobile-filters-open {
+    display: flex;
+  }
+
+  .filter-input,
+  .filter-select {
+    font-size: 16px;
+    width: 100%;
+  }
+
+  /* 3. Workspace & Mobile Pipeline Stage Switcher */
+  .workspace {
+    padding: 0.65rem 0.75rem;
+  }
+
+  .mobile-stage-switcher {
+    display: flex;
+    gap: 0.38rem;
+    overflow-x: auto;
+    padding-bottom: 0.6rem;
+    margin-bottom: 0.5rem;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .mobile-stage-switcher::-webkit-scrollbar {
+    display: none;
+  }
+
+  .stage-tab {
+    background: var(--bg-surface);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 999px;
+    padding: 0.38rem 0.75rem;
+    font-size: 0.78rem;
+    font-weight: 600;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    cursor: pointer;
+  }
+
+  .stage-tab.active {
+    background: var(--accent-primary);
+    color: #111318;
+    border-color: var(--accent-primary);
+  }
+
+  .stage-tab-count {
+    font-size: 0.7rem;
+    padding: 0.05rem 0.38rem;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .kanban-board {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    gap: 0.75rem;
+  }
+
+  .kanban-column {
+    min-height: auto;
+  }
+
+  .kanban-dropzone {
+    min-height: 160px;
+  }
+
+  /* Filter visible Kanban column on mobile unless 'all' is selected */
+  .kanban-board[data-mobile-active-stage="spark"] .kanban-column:not([data-status="spark"]),
+  .kanban-board[data-mobile-active-stage="exploring"] .kanban-column:not([data-status="exploring"]),
+  .kanban-board[data-mobile-active-stage="building"] .kanban-column:not([data-status="building"]),
+  .kanban-board[data-mobile-active-stage="shipped"] .kanban-column:not([data-status="shipped"]),
+  .kanban-board[data-mobile-active-stage="archived"] .kanban-column:not([data-status="archived"]) {
+    display: none;
+  }
+
+  /* 4. Explorer Grid & Whack Pack Studio on Mobile */
+  .explorer-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+
+  .whack-studio-header,
+  .review-header {
+    padding: 0.75rem 0.85rem;
+    gap: 0.65rem;
+  }
+
+  .collider-controls {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 0.75rem;
+    gap: 0.55rem;
+  }
+
+  .collider-control-group {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.25rem;
+  }
+
+  .whack-card-scan {
+    max-width: 235px;
+  }
+
+  .deck-cards-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.6rem;
+  }
+
+  .deck-card-item {
+    padding: 0.5rem;
+  }
+
+  .spread-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.6rem;
+  }
+
+  /* 5. Full-Screen Mobile Idea Workbench & Mockup Studio */
+  .idea-drawer {
+    width: 100vw;
+    height: 100dvh;
+    border-left: none;
+  }
+
+  .drawer-header {
+    padding: 0.75rem 0.85rem;
+  }
+
+  .drawer-title-input {
+    font-size: 1.05rem;
+  }
+
+  .drawer-tabs {
+    padding: 0.45rem 0.75rem;
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+
+  .drawer-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .drawer-tab {
+    padding: 0.4rem 0.68rem;
+    font-size: 0.8rem;
+  }
+
+  .drawer-body {
+    padding: 0.85rem;
+  }
+
+  .ratings-card,
+  .pros-cons-grid,
+  .form-row-2,
+  .form-row-3 {
+    grid-template-columns: 1fr;
+    gap: 0.65rem;
+  }
+
+  .inline-add-form {
+    flex-wrap: wrap;
+  }
+
+  .inline-add-form input {
+    flex: 1 1 180px;
+    font-size: 16px;
+  }
+
+  .text-input,
+  .textarea-input,
+  .drawer-select {
+    font-size: 16px;
+  }
+
+  .toast-container {
+    left: 0.75rem;
+    right: 0.75rem;
+    bottom: 0.75rem;
+  }
+}
+