From a5b8f90e887dde498fe424cacaa155d9633ebf5d Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 12 Oct 2025 20:32:34 +1300
Subject: [PATCH] fix: CSP-compliant category collapsing + cache busting

- Remove inline styles from category rendering (CSP violation)
- Apply collapsed state via JavaScript after DOM insertion
- Update cache version to v=0.1.0.1760254264664 across all HTML files
- Categories now properly collapsed on page load (Research, Advanced, Case Studies, Business, Archives)
---
 public/about.html           |  4 ++--
 public/api-reference.html   |  2 +-
 public/blog-post.html       |  6 +++---
 public/blog.html            |  6 +++---
 public/case-submission.html |  4 ++--
 public/docs-viewer.html     | 10 +++++-----
 public/docs.html            | 10 +++++-----
 public/faq.html             |  6 +++---
 public/implementer.html     |  4 ++--
 public/index.html           |  4 ++--
 public/js/docs-app.js       | 22 ++++++++++++++++------
 public/koha.html            |  4 ++--
 public/leader.html          |  4 ++--
 public/media-inquiry.html   |  4 ++--
 public/privacy.html         |  4 ++--
 public/researcher.html      |  4 ++--
 16 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/public/about.html b/public/about.html
index e1d3278a..a075edcd 100644
--- a/public/about.html
+++ b/public/about.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About | Tractatus AI Safety Framework</title>
   <meta name="description" content="Learn about the Tractatus Framework: our mission, values, team, and commitment to preserving human agency through structural AI safety.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -26,7 +26,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-blue-50 to-purple-50 py-20">
diff --git a/public/api-reference.html b/public/api-reference.html
index 5f200e4c..7747b612 100644
--- a/public/api-reference.html
+++ b/public/api-reference.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>API Reference | Tractatus Framework</title>
   <meta name="description" content="Complete API reference for Tractatus Framework - endpoints, authentication, request/response formats, and examples.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .endpoint-badge {
       @apply inline-block px-2 py-1 rounded text-xs font-mono font-semibold;
diff --git a/public/blog-post.html b/public/blog-post.html
index 87991074..1558fdd2 100644
--- a/public/blog-post.html
+++ b/public/blog-post.html
@@ -31,7 +31,7 @@
   <!-- RSS Feed -->
   <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
 
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -117,7 +117,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Breadcrumb -->
   <div class="bg-white border-b border-gray-200">
@@ -301,7 +301,7 @@
   </footer>
 
   <!-- Load Blog Post JavaScript -->
-  <script src="/js/blog-post.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/blog-post.js?v=0.1.0.1760254264664"></script>
 
 </body>
 </html>
diff --git a/public/blog.html b/public/blog.html
index a572676b..a5eb6371 100644
--- a/public/blog.html
+++ b/public/blog.html
@@ -28,7 +28,7 @@
   <!-- RSS Feed -->
   <link rel="alternate" type="application/rss+xml" title="Tractatus Blog RSS Feed" href="/api/blog/rss">
 
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -49,7 +49,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-indigo-50 to-blue-50 py-20">
@@ -216,7 +216,7 @@
   </footer>
 
   <!-- Load Blog JavaScript -->
-  <script src="/js/blog.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/blog.js?v=0.1.0.1760254264664"></script>
 
 </body>
 </html>
diff --git a/public/case-submission.html b/public/case-submission.html
index 5389d6e3..1a9ac256 100644
--- a/public/case-submission.html
+++ b/public/case-submission.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Submit Case Study | Tractatus AI Safety</title>
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -75,7 +75,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Main Content -->
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
diff --git a/public/docs-viewer.html b/public/docs-viewer.html
index b0d1e15e..080ff6cb 100644
--- a/public/docs-viewer.html
+++ b/public/docs-viewer.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documentation - Tractatus Framework</title>
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Prose styling for document content */
     .prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
@@ -56,10 +56,10 @@
   </div>
 
   <!-- Scripts -->
-  <script src="/js/utils/api.js?v=0.1.0.1760243560060"></script>
-  <script src="/js/utils/router.js?v=0.1.0.1760243560060"></script>
-  <script src="/js/components/document-viewer.js?v=0.1.0.1760243560060"></script>
-  <script src="/js/docs-viewer-app.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/utils/api.js?v=0.1.0.1760254264664"></script>
+  <script src="/js/utils/router.js?v=0.1.0.1760254264664"></script>
+  <script src="/js/components/document-viewer.js?v=0.1.0.1760254264664"></script>
+  <script src="/js/docs-viewer-app.js?v=0.1.0.1760254264664"></script>
 
 </body>
 </html>
diff --git a/public/docs.html b/public/docs.html
index fdc63c86..a5e670b0 100644
--- a/public/docs.html
+++ b/public/docs.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Framework Documentation | Tractatus AI Safety</title>
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     html { scroll-behavior: smooth; }
 
@@ -380,7 +380,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Page Header -->
   <div class="bg-white border-b border-gray-200">
@@ -717,9 +717,9 @@
     </div>
   </div>
 
-  <script src="/js/components/document-cards.js?v=0.1.0.1760243560060"></script>
-  <script src="/js/docs-app.js?v=0.1.0.1760243560060"></script>
-  <script src="/js/docs-search-enhanced.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/document-cards.js?v=0.1.0.1760254264664"></script>
+  <script src="/js/docs-app.js?v=0.1.0.1760254264664"></script>
+  <script src="/js/docs-search-enhanced.js?v=0.1.0.1760254264664"></script>
 
 </body>
 </html>
diff --git a/public/faq.html b/public/faq.html
index 4b61ed10..7f53c9c6 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -6,7 +6,7 @@
   <title>Frequently Asked Questions | Tractatus AI Safety Framework</title>
   <meta name="description" content="Common questions about Tractatus framework: implementation, performance, relationship to Claude Code, and governance architecture.">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
 
   <!-- Syntax highlighting for code blocks -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
@@ -183,7 +183,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero -->
   <div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-16">
@@ -336,7 +336,7 @@
     </div>
   </footer>
 
-  <script src="/js/faq.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/faq.js?v=0.1.0.1760254264664"></script>
 
 </body>
 </html>
diff --git a/public/implementer.html b/public/implementer.html
index ff8934f7..76fdc740 100644
--- a/public/implementer.html
+++ b/public/implementer.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>For Implementers | Tractatus AI Safety Framework</title>
   <meta name="description" content="Integrate Tractatus framework into your AI systems: practical guides, code examples, and step-by-step implementation for production safety.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -26,7 +26,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-blue-50 to-indigo-50 py-20">
diff --git a/public/index.html b/public/index.html
index 61482686..830d9e45 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
   <title>Tractatus AI Safety Framework | Architectural Constraints for Human Agency</title>
   <meta name="description" content="World's first production implementation of architectural AI safety constraints. Preserving human agency through structural, not aspirational, guarantees.">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
     .hover-lift { transition: transform 0.2s; }
@@ -29,7 +29,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <header role="banner">
diff --git a/public/js/docs-app.js b/public/js/docs-app.js
index e2f84275..de2c76c9 100644
--- a/public/js/docs-app.js
+++ b/public/js/docs-app.js
@@ -205,16 +205,17 @@ async function loadDocuments() {
       html += `
         <div class="category-section mb-4" data-category="${categoryId}">
           <button class="category-toggle w-full flex items-center justify-between px-3 py-3 text-sm font-bold ${category.textColor} ${category.bgColor} ${category.borderColor} rounded-r hover:shadow-md transition-all"
-                  data-category="${categoryId}">
+                  data-category="${categoryId}"
+                  data-collapsed="${isCollapsed}">
             <span class="flex items-center gap-2">
               <span class="category-icon">${category.icon}</span>
               <span>${category.label.replace(category.icon, '').trim()}</span>
             </span>
-            <svg class="category-arrow w-5 h-5 transition-transform ${isCollapsed ? 'rotate-[-90deg]' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="category-arrow w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
             </svg>
           </button>
-          <div class="category-docs mt-2 pl-2" data-category="${categoryId}" ${isCollapsed ? 'style="display:none"' : ''}>
+          <div class="category-docs mt-2 pl-2" data-category="${categoryId}" data-collapsed="${isCollapsed}">
       `;
 
       // Render documents in category
@@ -235,17 +236,18 @@ async function loadDocuments() {
       html += `
         <div class="category-section mb-4 mt-8" data-category="archives">
           <button class="category-toggle w-full flex items-center justify-between px-3 py-3 text-sm font-bold text-gray-600 bg-gray-50 border-l-4 border-gray-400 rounded-r hover:shadow-md transition-all"
-                  data-category="archives">
+                  data-category="archives"
+                  data-collapsed="true">
             <span class="flex items-center gap-2">
               <span class="category-icon">📦</span>
               <span>Archives</span>
               <span class="text-xs font-normal text-gray-500">(${archivedDocuments.length} documents)</span>
             </span>
-            <svg class="category-arrow w-5 h-5 transition-transform rotate-[-90deg]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg class="category-arrow w-5 h-5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
             </svg>
           </button>
-          <div class="category-docs mt-2 pl-2" data-category="archives" style="display:none">
+          <div class="category-docs mt-2 pl-2" data-category="archives" data-collapsed="true">
       `;
 
       // Render archived documents
@@ -265,6 +267,14 @@ async function loadDocuments() {
 
     listEl.innerHTML = html;
 
+    // Apply collapsed state to categories (CSP-compliant - no inline styles)
+    listEl.querySelectorAll('.category-docs[data-collapsed="true"]').forEach(docsEl => {
+      docsEl.style.display = 'none';
+    });
+    listEl.querySelectorAll('.category-toggle[data-collapsed="true"] .category-arrow').forEach(arrowEl => {
+      arrowEl.style.transform = 'rotate(-90deg)';
+    });
+
     // Add event delegation for document links
     listEl.addEventListener('click', function(e) {
       // Check for download link first (prevent document load when clicking download)
diff --git a/public/koha.html b/public/koha.html
index 003ea746..b2327068 100644
--- a/public/koha.html
+++ b/public/koha.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Support Tractatus | Koha Donation System</title>
   <meta name="description" content="Support the Tractatus AI Safety Framework. Help fund hosting, development, research, and community building for architectural AI safety.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .gradient-text { background: linear-gradient(120deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
     .skip-link { position: absolute; left: -9999px; }
@@ -50,7 +50,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Main Content -->
   <main id="main-content" class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
diff --git a/public/leader.html b/public/leader.html
index 65ed92e4..e2ada5f0 100644
--- a/public/leader.html
+++ b/public/leader.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>For AI Leaders | Tractatus AI Safety Framework</title>
   <meta name="description" content="Strategic AI governance for executives and research directors. Structural approach to AI safety, compliance, and risk mitigation.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .gradient-text {
       background: linear-gradient(120deg, #d97706 0%, #f59e0b 100%);
@@ -32,7 +32,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-gray-50 to-amber-50 pt-20 pb-24">
diff --git a/public/media-inquiry.html b/public/media-inquiry.html
index 9117c22b..e5667793 100644
--- a/public/media-inquiry.html
+++ b/public/media-inquiry.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Media Inquiry | Tractatus AI Safety</title>
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .form-group { margin-bottom: 1.5rem; }
     .form-label {
@@ -65,7 +65,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Main Content -->
   <main id="main-content" class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
diff --git a/public/privacy.html b/public/privacy.html
index 922a1833..f6e7224e 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Privacy Policy | Tractatus AI Safety Framework</title>
   <meta name="description" content="Privacy policy for the Tractatus AI Safety Framework. Learn how we collect, use, and protect your data.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     .skip-link { position: absolute; left: -9999px; }
     .skip-link:focus { left: 0; z-index: 100; background: white; padding: 1rem; }
@@ -25,7 +25,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Main Content -->
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
diff --git a/public/researcher.html b/public/researcher.html
index 9a22638a..020aa264 100644
--- a/public/researcher.html
+++ b/public/researcher.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>For Researchers | Tractatus AI Safety Framework</title>
   <meta name="description" content="Tractatus framework research: architectural constraints, theoretical foundations, and empirical validation of AI safety through structural guarantees.">
-  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760243560060">
+  <link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1760254264664">
   <style>
     /* Accessibility: Skip link */
     .skip-link { position: absolute; left: -9999px; top: 0; }
@@ -26,7 +26,7 @@
   <a href="#main-content" class="skip-link">Skip to main content</a>
 
   <!-- Navigation (injected by navbar.js) -->
-  <script src="/js/components/navbar.js?v=0.1.0.1760243560060"></script>
+  <script src="/js/components/navbar.js?v=0.1.0.1760254264664"></script>
 
   <!-- Hero Section -->
   <div class="bg-gradient-to-br from-purple-50 to-blue-50 py-20">