fix: match TOC style and collapse behavior to original template

- Grid columns: 260px / 680px / 260px (matching original)
- Desktop TOC: exact same styles (border-left, font-size 13px, title
14px 600, H2 links bold 700, hover underline solid muted, active
underline, margin-top 12px)
- Auto-collapse: sub-sections fold/unfold based on active heading,
disabled on mobile (all expanded), with height transition 200ms
- Mobile sidebar: same styles as original template
- Class names aligned: .table-of-contents (not .toc)

Made-with: Cursor

backend/src/publisher/html-renderer.ts

@@ -88,14 +88,14 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-/* Grid: TOC | Article | (empty) */
+/* Grid: TOC | Article | (empty right) */
 .content-grid {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 24px;
   margin-top: 40px;
   display: grid;
-  grid-template-columns: 240px minmax(0, 720px) 1fr;
+  grid-template-columns: 260px minmax(0, 680px) 260px;
   gap: 32px;
   align-items: start;
 }
@@ -160,30 +160,64 @@ body {
   z-index: 100;
 }
 
-/* ---------- Table of Contents ---------- */
-.toc {
+/* ---------- Table of Contents (desktop sticky) ---------- */
+.table-of-contents {
   position: sticky;
   top: 32px;
-  max-height: calc(100vh - 64px);
-  overflow-y: auto;
+  margin-top: 12px;
 }
 
-.toc .toc-title {
+.table-of-contents .title {
   font-weight: 600;
   font-size: 14px;
   margin-bottom: 8px;
   color: var(--text-primary);
 }
 
-.toc nav { border-left: 1px solid var(--border); padding-left: 16px; font-size: 13px; }
-.toc nav ul { margin: 0 0 4px; padding-left: 1em; }
-.toc nav li { list-style: none; margin: 0.25em 0; }
-.toc nav a { color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
-.toc nav > ul > li > a { font-weight: 600; color: var(--text-primary); }
-.toc nav a:hover { color: var(--accent-light); }
-.toc nav a.active { color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
+.table-of-contents nav {
+  border-left: 1px solid var(--border);
+  padding-left: 16px;
+  font-size: 13px;
+}
 
-/* Mobile TOC toggle */
+.table-of-contents nav ul {
+  margin: 0 0 6px;
+  padding-left: 1em;
+}
+
+.table-of-contents nav li {
+  list-style: none;
+  margin: 0.25em 0;
+}
+
+.table-of-contents nav a,
+.table-of-contents nav a:link,
+.table-of-contents nav a:visited {
+  color: var(--text-primary);
+  text-decoration: none;
+  border-bottom: none;
+}
+
+.table-of-contents nav > ul > li > a {
+  font-weight: 700;
+}
+
+.table-of-contents nav a:hover {
+  text-decoration: underline solid var(--text-tertiary);
+}
+
+.table-of-contents nav a.active {
+  text-decoration: underline;
+}
+
+/* Collapsible sub-sections */
+.table-of-contents nav.toc-collapsible li > ul,
+.toc-mobile-sidebar nav.toc-collapsible li > ul {
+  overflow: hidden;
+  transition: height 200ms ease;
+}
+
+/* ---------- Mobile TOC toggle ---------- */
 .toc-mobile-toggle {
   display: none;
   position: fixed;
@@ -199,10 +233,12 @@ body {
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--shadow-sm);
+  box-shadow: 0 2px 12px rgba(0,0,0,.08);
+  transition: transform 150ms ease, box-shadow 150ms ease;
 }
+.toc-mobile-toggle:active { transform: scale(0.92); }
 
-/* Mobile backdrop */
+/* ---------- Mobile backdrop ---------- */
 .toc-mobile-backdrop {
   display: none;
   position: fixed;
@@ -215,7 +251,7 @@ body {
 }
 .toc-mobile-backdrop.open { opacity: 1; pointer-events: auto; }
 
-/* Mobile sidebar */
+/* ---------- Mobile sidebar ---------- */
 .toc-mobile-sidebar {
   display: none;
   position: fixed;
@@ -238,11 +274,12 @@ body {
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
-.toc-mobile-sidebar__title { font-weight: 700; font-size: 15px; }
+.toc-mobile-sidebar__title { font-weight: 700; font-size: 15px; color: var(--text-primary); }
 .toc-mobile-sidebar__close {
   background: none; border: none; color: var(--text-tertiary);
   cursor: pointer; padding: 6px; border-radius: 6px;
   display: flex; align-items: center; justify-content: center;
+  transition: color 150ms ease, background 150ms ease;
 }
 .toc-mobile-sidebar__close:hover { color: var(--text-primary); background: var(--bg-secondary); }
 
@@ -250,23 +287,32 @@ body {
   flex: 1;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
-  padding: 0.75rem 1rem 2rem;
+  padding: 0.75rem 1rem 1.5rem;
+}
+.toc-mobile-sidebar nav ul { margin: 0 0 6px; padding-left: 1em; }
+.toc-mobile-sidebar nav li { list-style: none; margin: 0.35em 0; }
+.toc-mobile-sidebar nav a,
+.toc-mobile-sidebar nav a:link,
+.toc-mobile-sidebar nav a:visited {
+  color: var(--text-primary);
+  text-decoration: none;
+  border-bottom: none;
+  font-size: 14px;
+  line-height: 1.5;
 }
-.toc-mobile-sidebar__body nav ul { margin: 0 0 4px; padding-left: 1em; }
-.toc-mobile-sidebar__body nav li { list-style: none; margin: 0.35em 0; }
-.toc-mobile-sidebar__body nav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; line-height: 1.5; }
-.toc-mobile-sidebar__body nav > ul > li > a { font-weight: 600; color: var(--text-primary); }
-.toc-mobile-sidebar__body nav a:hover { color: var(--accent-light); }
-.toc-mobile-sidebar__body nav a.active { color: var(--accent-light); text-decoration: underline; }
+.toc-mobile-sidebar nav > ul > li > a { font-weight: 700; }
+.toc-mobile-sidebar nav a:hover { text-decoration: underline solid var(--text-tertiary); }
+.toc-mobile-sidebar nav a.active { color: var(--accent-light); text-decoration: underline; }
 
-/* Responsive: collapse grid below 1100px */
+/* ---------- Responsive: collapse below 1100px ---------- */
 @media (max-width: 1100px) {
   .content-grid {
+    overflow: hidden;
     display: block;
     padding: 0 16px;
-    margin-top: 1rem;
+    margin-top: 0.5rem;
   }
-  .toc { display: none; }
+  .table-of-contents { position: static; display: none; }
   .toc-mobile-toggle { display: flex; }
   .toc-mobile-backdrop { display: block; }
   .toc-mobile-sidebar { display: flex; }
@@ -308,7 +354,7 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
 
 /* Print */
 @media print {
-  .toc, .toc-mobile-toggle, .toc-mobile-backdrop, .toc-mobile-sidebar, .theme-toggle { display: none !important; }
+  .table-of-contents, .toc-mobile-toggle, .toc-mobile-backdrop, .toc-mobile-sidebar, .theme-toggle { display: none !important; }
   .content-grid { display: block !important; }
 }
   </style>
@@ -336,10 +382,10 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
   </aside>
 
   <section class="content-grid">
-    <div class="toc" aria-label="Table of Contents">
-      <div class="toc-title">Table of Contents</div>
+    <nav class="table-of-contents" aria-label="Table of Contents">
+      <div class="title">Table of Contents</div>
       <div id="toc-placeholder"></div>
-    </div>
+    </nav>
 
     <article>
       <header class="article-header">
@@ -361,17 +407,16 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
 
   <script>
   (function() {
-    // Theme toggle
+    // Theme
     window.toggleTheme = function() {
-      var html = document.documentElement;
-      var next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
-      html.setAttribute('data-theme', next);
+      var next = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
       localStorage.setItem('theme', next);
     };
     var saved = localStorage.getItem('theme');
     if (saved) document.documentElement.setAttribute('data-theme', saved);
 
-    // Image lightbox
+    // Lightbox
     document.querySelectorAll('.tiptap img').forEach(function(img) {
       img.style.cursor = 'zoom-in';
       img.addEventListener('click', function() {
@@ -379,140 +424,217 @@ dialog.lightbox img { max-width: 95vw; max-height: 90vh; object-fit: contain; bo
         document.getElementById('lightbox').showModal();
       });
     });
-    document.getElementById('lightbox').addEventListener('click', function(e) {
-      if (e.target === this) this.close();
-    });
+    document.getElementById('lightbox').addEventListener('click', function(e) { if (e.target === this) this.close(); });
 
-    // Glossary tabindex
-    document.querySelectorAll('[data-type="glossary"]').forEach(function(el) {
-      el.setAttribute('tabindex', '0');
-    });
+    // Glossary
+    document.querySelectorAll('[data-type="glossary"]').forEach(function(el) { el.setAttribute('tabindex', '0'); });
 
     // ---- Table of Contents ----
     var holder = document.getElementById('toc-placeholder');
     var holderMobile = document.getElementById('toc-mobile-placeholder');
     var articleRoot = document.querySelector('.content-grid article');
     if (!articleRoot) return;
-
     var headings = articleRoot.querySelectorAll('h2, h3, h4');
     if (!headings.length) return;
     var headingsArr = Array.from(headings);
 
-    // Ensure unique IDs
+    // Unique IDs
     var usedIds = {};
-    var slugify = function(s) {
-      return String(s || '').toLowerCase().trim().replace(/\\s+/g, '_').replace(/[^a-z0-9_-]/g, '');
-    };
+    var slugify = function(s) { return String(s||'').toLowerCase().trim().replace(/\\s+/g,'_').replace(/[^a-z0-9_-]/g,''); };
     headingsArr.forEach(function(h) {
-      var id = (h.id || '').trim() || slugify(h.textContent) || 'section';
-      var candidate = id;
-      var n = 2;
-      while (usedIds[candidate]) { candidate = id + '-' + (n++); }
-      if (h.id !== candidate) h.id = candidate;
-      usedIds[candidate] = true;
+      var id = (h.id||'').trim() || slugify(h.textContent) || 'section';
+      var c = id, n = 2;
+      while (usedIds[c]) c = id+'-'+(n++);
+      if (h.id !== c) h.id = c;
+      usedIds[c] = true;
     });
 
-    // Build nested nav
+    // Build nested nav with data-heading-idx
     var nav = document.createElement('nav');
     var ulStack = [document.createElement('ul')];
     nav.appendChild(ulStack[0]);
-    var levelOf = function(tag) { return tag === 'H2' ? 2 : tag === 'H3' ? 3 : 4; };
-    var prev = 2;
+    var levelOf = function(tag) { return tag==='H2'?2:tag==='H3'?3:4; };
+    var prev = 2, hIdx = 0;
     headingsArr.forEach(function(h) {
       var lvl = levelOf(h.tagName);
-      while (lvl > prev) {
-        var ul = document.createElement('ul');
-        var last = ulStack[ulStack.length - 1].lastElementChild;
-        if (last) last.appendChild(ul);
-        ulStack.push(ul);
-        prev++;
-      }
+      while (lvl > prev) { var ul = document.createElement('ul'); var last = ulStack[ulStack.length-1].lastElementChild; if (last) last.appendChild(ul); ulStack.push(ul); prev++; }
       while (lvl < prev) { ulStack.pop(); prev--; }
       var li = document.createElement('li');
       var a = document.createElement('a');
-      a.href = '#' + h.id;
-      a.textContent = h.textContent;
+      a.href = '#'+h.id; a.textContent = h.textContent;
       li.appendChild(a);
-      ulStack[ulStack.length - 1].appendChild(li);
+      li.setAttribute('data-heading-idx', String(hIdx++));
+      ulStack[ulStack.length-1].appendChild(li);
     });
 
     if (holder) holder.appendChild(nav);
     var navClone = nav.cloneNode(true);
     if (holderMobile) holderMobile.appendChild(navClone);
 
-    // Active section tracking
+    // Mark navs as collapsible
+    nav.classList.add('toc-collapsible');
+    navClone.classList.add('toc-collapsible');
+
     var allLinks = [].concat(
       holder ? Array.from(holder.querySelectorAll('a')) : [],
       holderMobile ? Array.from(holderMobile.querySelectorAll('a')) : []
     );
-    var OFFSET = 80;
-    var lastScrollTime = 0;
 
-    var onScroll = function() {
+    // ---- Auto-collapse logic ----
+    var isMobile = window.matchMedia('(max-width: 1100px)');
+
+    function getItemsWithChildren(navEl) {
+      if (!navEl) return [];
+      return Array.from(navEl.querySelectorAll('li[data-heading-idx]')).filter(function(li) {
+        return li.querySelector(':scope > ul');
+      });
+    }
+
+    function getAncestorIndices(items, targetIdx) {
+      var toExpand = {};
+      var activeLi = null;
+      function find(li) {
+        if (Number(li.getAttribute('data-heading-idx')) === targetIdx) return li;
+        var ul = li.querySelector(':scope > ul');
+        if (!ul) return null;
+        var children = ul.querySelectorAll(':scope > li[data-heading-idx]');
+        for (var i = 0; i < children.length; i++) { var f = find(children[i]); if (f) return f; }
+        return null;
+      }
+      for (var i = 0; i < items.length; i++) { activeLi = find(items[i]); if (activeLi) break; }
+      if (!activeLi) return toExpand;
+      toExpand[targetIdx] = true;
+      var cur = activeLi;
+      while (cur) {
+        var parent = cur.parentElement ? cur.parentElement.closest('li[data-heading-idx]') : null;
+        if (parent) { toExpand[Number(parent.getAttribute('data-heading-idx'))] = true; cur = parent; }
+        else break;
+      }
+      return toExpand;
+    }
+
+    function applyCollapseState(navEl, activeIdx) {
+      if (!navEl) return;
+      var items = getItemsWithChildren(navEl);
+      var ancestors = getAncestorIndices(items, activeIdx);
+
+      items.forEach(function(li) {
+        var sub = li.querySelector(':scope > ul');
+        if (!sub) return;
+        var idx = Number(li.getAttribute('data-heading-idx'));
+        var allDesc = li.querySelectorAll('li[data-heading-idx]');
+        var related = [idx];
+        allDesc.forEach(function(d) { related.push(Number(d.getAttribute('data-heading-idx'))); });
+        var shouldExpand = related.some(function(i) { return ancestors[i]; });
+
+        if (shouldExpand) {
+          li.classList.remove('collapsed');
+          sub.style.height = 'auto';
+        } else {
+          li.classList.add('collapsed');
+          sub.style.height = '0px';
+        }
+      });
+    }
+
+    function expandAll(navEl) {
+      if (!navEl) return;
+      getItemsWithChildren(navEl).forEach(function(li) {
+        li.classList.remove('collapsed');
+        var sub = li.querySelector(':scope > ul');
+        if (sub) sub.style.height = 'auto';
+      });
+    }
+
+    // Initial state: collapse all except first section
+    function initCollapse() {
+      if (isMobile.matches) {
+        expandAll(holder ? holder.querySelector('nav') : null);
+        expandAll(holderMobile ? holderMobile.querySelector('nav') : null);
+      } else {
+        applyCollapseState(holder ? holder.querySelector('nav') : null, 0);
+        applyCollapseState(holderMobile ? holderMobile.querySelector('nav') : null, 0);
+      }
+    }
+    initCollapse();
+
+    isMobile.addEventListener('change', function() {
+      if (isMobile.matches) {
+        expandAll(holder ? holder.querySelector('nav') : null);
+        expandAll(holderMobile ? holderMobile.querySelector('nav') : null);
+      } else {
+        applyCollapseState(holder ? holder.querySelector('nav') : null, prevActiveIdx);
+        applyCollapseState(holderMobile ? holderMobile.querySelector('nav') : null, prevActiveIdx);
+      }
+    });
+
+    // ---- Scroll tracking ----
+    var OFFSET = 60, lastScrollTime = 0, prevActiveIdx = 0;
+
+    function onScroll() {
       var now = performance.now();
       if (now - lastScrollTime < 50) return;
       lastScrollTime = now;
       requestAnimationFrame(function() {
-        var activeId = null;
+        var activeIdx = -1, activeId = null;
         for (var i = headingsArr.length - 1; i >= 0; i--) {
           if (headingsArr[i].getBoundingClientRect().top - OFFSET <= 0) {
-            activeId = headingsArr[i].id;
-            break;
+            activeIdx = i; activeId = headingsArr[i].id; break;
           }
         }
         allLinks.forEach(function(l) {
-          if (activeId && l.getAttribute('href') === '#' + activeId) {
-            l.classList.add('active');
-          } else {
-            l.classList.remove('active');
-          }
+          if (activeId && l.getAttribute('href') === '#'+activeId) l.classList.add('active');
+          else l.classList.remove('active');
         });
+        if (activeIdx !== prevActiveIdx && activeIdx >= 0 && !isMobile.matches) {
+          prevActiveIdx = activeIdx;
+          applyCollapseState(holder ? holder.querySelector('nav') : null, activeIdx);
+        }
+        if (activeIdx >= 0) prevActiveIdx = activeIdx;
       });
-    };
+    }
     window.addEventListener('scroll', onScroll, { passive: true });
     onScroll();
 
-    // Mobile sidebar
+    // ---- Mobile sidebar ----
     var sidebar = document.querySelector('.toc-mobile-sidebar');
     var backdrop = document.querySelector('.toc-mobile-backdrop');
     var toggleBtn = document.querySelector('.toc-mobile-toggle');
     var closeBtn = document.querySelector('.toc-mobile-sidebar__close');
 
-    var openSidebar = function() {
-      sidebar.classList.add('open');
-      backdrop.classList.add('open');
-      toggleBtn.setAttribute('aria-expanded', 'true');
+    function openSidebar() {
+      sidebar.classList.add('open'); backdrop.classList.add('open');
+      toggleBtn.setAttribute('aria-expanded','true');
       document.body.style.overflow = 'hidden';
       requestAnimationFrame(function() {
         var active = sidebar.querySelector('a.active');
         if (active) {
           var body = sidebar.querySelector('.toc-mobile-sidebar__body');
-          if (body) body.scrollTop = Math.max(0, active.offsetTop - body.offsetTop - body.clientHeight / 3);
+          if (body) body.scrollTop = Math.max(0, active.offsetTop - body.offsetTop - body.clientHeight/3);
         }
       });
-    };
-    var closeSidebar = function() {
-      sidebar.classList.remove('open');
-      backdrop.classList.remove('open');
-      toggleBtn.setAttribute('aria-expanded', 'false');
+    }
+    function closeSidebar() {
+      sidebar.classList.remove('open'); backdrop.classList.remove('open');
+      toggleBtn.setAttribute('aria-expanded','false');
       document.body.style.overflow = '';
-    };
-
+    }
     if (toggleBtn) toggleBtn.addEventListener('click', openSidebar);
     if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
     if (backdrop) backdrop.addEventListener('click', closeSidebar);
-    if (holderMobile) holderMobile.addEventListener('click', function(e) {
-      if (e.target.closest && e.target.closest('a')) closeSidebar();
-    });
-    document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape' && sidebar.classList.contains('open')) closeSidebar();
-    });
+    if (holderMobile) holderMobile.addEventListener('click', function(e) { if (e.target.closest && e.target.closest('a')) closeSidebar(); });
+    document.addEventListener('keydown', function(e) { if (e.key==='Escape' && sidebar.classList.contains('open')) closeSidebar(); });
 
-    // Handle initial hash navigation
+    // Hash navigation
     if (window.location.hash) {
       var target = document.querySelector(window.location.hash);
-      if (target) setTimeout(function() { target.scrollIntoView({ block: 'start' }); }, 100);
+      if (target) setTimeout(function() { target.scrollIntoView({block:'start'}); }, 100);
     }
+    window.addEventListener('popstate', function() {
+      var h = window.location.hash;
+      if (h) { var t = document.querySelector(h); if (t) t.scrollIntoView({block:'start'}); }
+      else window.scrollTo({top:0});
+    });
   })();
   </script>
 </body>