diff --git a/pandoc/README.md b/pandoc/README.md
index 4140aec..afe7207 100644
--- a/pandoc/README.md
+++ b/pandoc/README.md
@@ -7,8 +7,8 @@ A collection of tools for converting Markdown documents to HTML with a professio
 > The shell scripts in this folder are standalone CLI/batch tools. `zddc-server`
 > implements its **own** on-demand conversion (Go package `zddc/internal/convert`)
 > and does **not** call these scripts. It does, however, reuse the same
-> `viewer-template.html` and `custom.css` (embedded at build time). See
-> AGENTS.md → "Server-side document conversion" for the authoritative reference.
+> `templates/` (embedded at build time). See AGENTS.md → "Server-side document
+> conversion" for the authoritative reference.
 
 zddc-server can render any served `.md` on demand: requesting the sibling URL
 `<path>/foo.docx` (or `.html` / `.pdf`) returns the converted bytes — no query
@@ -25,10 +25,10 @@ that run the real binary inside a per-conversion bubblewrap sandbox
 memory/PID caps. I/O is via stdin/stdout plus a per-call scratch dir. There is no
 container runtime and no image pulling at request time.
 
-The PDF flow is two-stage: pandoc renders the markdown through
-`viewer-template.html` to standalone HTML, then headless Chromium prints that HTML
-to PDF — preserving the viewer template's print-media CSS rather than going
-through pandoc's LaTeX template.
+The PDF flow is two-stage: pandoc renders the markdown through the selected
+`templates/<doctype>.html` to standalone HTML, then headless Chromium prints that
+HTML to PDF — preserving the template's print-media CSS rather than going through
+pandoc's LaTeX template.
 
 Converted bytes are cached at `<dir>/.zddc.d/converted/<base>.<ext>` with mtime
 synced to the source, so a fresh cache hit is a stat-and-serve with no `exec`.
@@ -61,7 +61,15 @@ working. Running against raw pandoc/chromium with no wrapper gives a working but
 - **Template integration**: Automatically applies the viewer template
 - **Progress tracking**: Real-time conversion status and summary
 
-### Professional Viewer Template (`viewer-template.html`)
+### Professional templates (`templates/`)
+
+Named doctype templates — `report.html`, `letter.html`, `specification.html` —
+share `_head.html` / `_doc.html` / `_scripts.html` partials. A document selects one
+with a `template:` field in its YAML front matter (default `report`), and turns on
+legal-style heading numbering with `numbering: true` (default off). Both fields are
+read by pandoc straight from the front matter. Server deployments additionally
+resolve per-project/per-party overrides from `.zddc.d/templates/<name>.html`.
+
 - **Modern responsive design**: Works on desktop, tablet, and mobile
 - **Table of Contents (TOC)**: Auto-generated sidebar navigation with smooth scrolling
 - **Print optimization**: Professional formatting for PDF generation
@@ -153,7 +161,7 @@ your-project/
 ## Troubleshooting
 
 ### Common Issues
-1. **Template not found**: Keep `viewer-template.html` beside the script (or input), or pass `-T /path/to/template.html`
+1. **Template not found**: Keep the `templates/` directory beside the script (or input), or pass `-T /path/to/template.html`
 2. **Permission errors**: Make sure `convert` script is executable (`chmod +x convert`)
 3. **Missing output**: Check that output directory exists or use `-o` to create it
 4. **Print issues**: Use "Print to PDF" in browser for best results
diff --git a/pandoc/convert b/pandoc/convert
index be4e75e..de8591e 100644
--- a/pandoc/convert
+++ b/pandoc/convert
@@ -8,7 +8,8 @@ show_help() {
     echo "  -f: Force overwrite existing output files"
     echo "  -o: Output directory (default: same as input)"
     echo "  -t: Target format (md, html, docx) - overrides auto-detection"
-    echo "  -T: Template file path (default: viewer-template.html)"
+    echo "  -T: Template file path (default: templates/<template>.html, where <template>"
+    echo "      comes from the doc's YAML front matter; falls back to templates/report.html)"
     echo "  --no-toc: Skip table of contents generation"
 }
 
@@ -274,33 +275,44 @@ convert_md_to_html() {
         fi
     fi
     
-    # Default template discovery if no custom template or custom template not found
+    # Default template discovery if no custom template or custom template not found.
+    # Named templates live in a templates/ dir (report.html, letter.html,
+    # specification.html, sharing _head/_doc/_scripts partials). The document
+    # selects one via a `template:` field in its YAML front matter; default report.
     if [ -z "$CUSTOM_TEMPLATE" ]; then
         # Convert script directory to absolute path
         SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
-        
+
         # Check if script is a symlink and resolve target directory
         SCRIPT_TARGET_DIR=""
         if [ -L "$0" ]; then
-            # Script is a symlink - resolve the target fully
             # readlink -f is available on Linux with GNU coreutils
             SCRIPT_TARGET=$(readlink -f "$0")
             SCRIPT_TARGET_DIR=$(dirname "$SCRIPT_TARGET")
         fi
-        
-        # Template search order: input dir, script dir, symlink target dir
-        if [ -f "$INPUT_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$INPUT_DIR/viewer-template.html"
-            echo "  → Using template from input directory: $TEMPLATE_ABS"
-        elif [ -f "$SCRIPT_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_DIR/viewer-template.html"
-            echo "  → Using template from script directory: $TEMPLATE_ABS"
-        elif [ -n "$SCRIPT_TARGET_DIR" ] && [ -f "$SCRIPT_TARGET_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_TARGET_DIR/viewer-template.html"
-            echo "  → Using template from symlink target directory: $TEMPLATE_ABS"
-        else
-            echo "  ⚠ Warning: viewer-template.html not found, using pandoc default template"
-            TEMPLATE_ABS=""
+
+        # Template name from the doc's front matter (sanitized to a bare basename).
+        TEMPLATE_NAME=$(sed -n '/^---[[:space:]]*$/,/^---[[:space:]]*$/ s/^template:[[:space:]]*"\{0,1\}\([A-Za-z0-9_-]\{1,\}\)"\{0,1\}[[:space:]]*$/\1/p' "$INPUT_ABS" | head -1)
+        [ -n "$TEMPLATE_NAME" ] || TEMPLATE_NAME="report"
+
+        # Search order: input dir, script dir, symlink target dir — each a templates/
+        # subdir. Use absolute paths since pandoc runs after a cd into the input dir.
+        INPUT_DIR_ABS=$(dirname "$INPUT_ABS")
+        TEMPLATE_ABS=""
+        for _tdir in "$INPUT_DIR_ABS/templates" "$SCRIPT_DIR/templates" "$SCRIPT_TARGET_DIR/templates"; do
+            [ -n "$_tdir" ] || continue
+            if [ -f "$_tdir/$TEMPLATE_NAME.html" ]; then
+                TEMPLATE_ABS="$_tdir/$TEMPLATE_NAME.html"
+                echo "  → Using template: $TEMPLATE_ABS"
+                break
+            elif [ -f "$_tdir/report.html" ]; then
+                TEMPLATE_ABS="$_tdir/report.html"
+                echo "  ⚠ Template '$TEMPLATE_NAME' not found; using $TEMPLATE_ABS"
+                break
+            fi
+        done
+        if [ -z "$TEMPLATE_ABS" ]; then
+            echo "  ⚠ Warning: templates/ not found, using pandoc default template"
         fi
     fi
     
diff --git a/pandoc/convert-diff b/pandoc/convert-diff
index 98a6aad..c7d48ce 100644
--- a/pandoc/convert-diff
+++ b/pandoc/convert-diff
@@ -14,7 +14,7 @@ show_help() {
     echo "Usage: $0 [-f] [-o outputdir] [-T template] [--no-toc] file1_rev_a.md file1_rev_b.md [file2_rev_a.md file2_rev_b.md ...]"
     echo "  -f: Force overwrite existing output files"
     echo "  -o: Output directory (default: same as first input file)"
-    echo "  -T: Template file path (default: viewer-template.html)"
+    echo "  -T: Template file path (default: templates/report.html)"
     echo "  --no-toc: Skip table of contents generation"
     echo ""
     echo "Arguments:"
@@ -354,53 +354,25 @@ while [ $# -gt 0 ]; do
     FILE1_DIR=$(dirname "$FILE1")
     load_zddc_config "$FILE1_DIR"
 
-    # Determine template to use
+    # Determine template to use. Diffs render with the report template (its
+    # _head/_doc/_scripts partials live alongside it in templates/, so pandoc
+    # resolves them from the template's own directory).
     TEMPLATE_ABS=""
     if [ -n "$CUSTOM_TEMPLATE" ]; then
         if [ -f "$CUSTOM_TEMPLATE" ]; then
             TEMPLATE_ABS="$CUSTOM_TEMPLATE"
             echo "  → Using custom template: $TEMPLATE_ABS"
         else
-            echo "  → Custom template not found: $CUSTOM_TEMPLATE"
-            echo "  → Falling back to default template"
+            echo "  → Custom template not found: $CUSTOM_TEMPLATE; falling back to default"
         fi
     fi
-    
-    # Check for symlinked template in current directory
-    if [ -z "$TEMPLATE_ABS" ] && [ -L "viewer-template.html" ]; then
-        TEMPLATE_TARGET=$(readlink "viewer-template.html")
-        if [ -f "$TEMPLATE_TARGET" ]; then
-            TEMPLATE_ABS="$TEMPLATE_TARGET"
-            echo "  → Using template from symlink target: $TEMPLATE_ABS"
-        fi
-    fi
-    
-    # Check for template in current directory
-    if [ -z "$TEMPLATE_ABS" ] && [ -f "viewer-template.html" ]; then
-        TEMPLATE_ABS="$(pwd)/viewer-template.html"
-        echo "  → Using template from current directory: $TEMPLATE_ABS"
-    fi
-    
-    # Resolve template to absolute path if it's relative
-    if [ -n "$TEMPLATE_ABS" ] && [ "${TEMPLATE_ABS:0:1}" != "/" ]; then
-        if [ -f "$TEMPLATE_ABS" ]; then
-            TEMPLATE_ABS="$(pwd)/$TEMPLATE_ABS"
-        elif [ -f "$SCRIPT_DIR/$TEMPLATE_ABS" ]; then
-            TEMPLATE_ABS="$SCRIPT_DIR/$TEMPLATE_ABS"
-        elif [ -f "$SCRIPT_TARGET_DIR/$TEMPLATE_ABS" ]; then
-            TEMPLATE_ABS="$SCRIPT_TARGET_DIR/$TEMPLATE_ABS"
-        elif [ -f "$SCRIPT_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_DIR/viewer-template.html"
-        elif [ -f "$SCRIPT_TARGET_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_TARGET_DIR/viewer-template.html"
-        fi
-    elif [ -z "$TEMPLATE_ABS" ]; then
-        # Fallback to script-relative template discovery
-        if [ -f "$SCRIPT_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_DIR/viewer-template.html"
-        elif [ -f "$SCRIPT_TARGET_DIR/viewer-template.html" ]; then
-            TEMPLATE_ABS="$SCRIPT_TARGET_DIR/viewer-template.html"
-        fi
+    if [ -z "$TEMPLATE_ABS" ]; then
+        for _tdir in "$SCRIPT_DIR/templates" "$SCRIPT_TARGET_DIR/templates"; do
+            if [ -f "$_tdir/report.html" ]; then
+                TEMPLATE_ABS="$_tdir/report.html"
+                break
+            fi
+        done
     fi
     
     # Create temp file for pandiff output
@@ -512,7 +484,7 @@ while [ $# -gt 0 ]; do
     if [ -n "$TEMPLATE_ABS" ]; then
         PANDOC_ARGS+=("--template=$TEMPLATE_ABS")
     else
-        echo "  ⚠ Warning: viewer-template.html not found, using pandoc default template"
+        echo "  ⚠ Warning: templates/report.html not found, using pandoc default template"
     fi
 
     # Add TOC args if not disabled
@@ -521,7 +493,6 @@ while [ $# -gt 0 ]; do
     fi
     
     PANDOC_ARGS+=(
-        "--css=$SCRIPT_DIR/custom.css"
         "--resource-path=$FILE2_DIR"
         "--metadata" "title=$rev2_title"
         "--metadata" "generation_time=$GENERATION_TIME"
diff --git a/pandoc/custom.css b/pandoc/custom.css
deleted file mode 100644
index a391f6a..0000000
--- a/pandoc/custom.css
+++ /dev/null
@@ -1,163 +0,0 @@
-/* 
- * Legal-style heading numbering for ZDDC documents
- * Adds hierarchical numbering like 1, 1.1, 1.1.1, etc.
- */
-
-/* Reset counters at document level */
-.document-content {
-  counter-reset: h1-counter;
-}
-
-/* H1 counters */
-h1 {
-  counter-reset: h2-counter h3-counter h4-counter h5-counter h6-counter;
-  counter-increment: h1-counter;
-}
-
-h1::before {
-  content: counter(h1-counter) ". ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H2 counters */
-h2 {
-  counter-reset: h3-counter h4-counter h5-counter h6-counter;
-  counter-increment: h2-counter;
-}
-
-h2::before {
-  content: counter(h1-counter) "." counter(h2-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H3 counters */
-h3 {
-  counter-reset: h4-counter h5-counter h6-counter;
-  counter-increment: h3-counter;
-}
-
-h3::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H4 counters */
-h4 {
-  counter-reset: h5-counter h6-counter;
-  counter-increment: h4-counter;
-}
-
-h4::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H5 counters */
-h5 {
-  counter-reset: h6-counter;
-  counter-increment: h5-counter;
-}
-
-h5::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H6 counters */
-h6 {
-  counter-increment: h6-counter;
-}
-
-h6::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* TOC numbering to match document headings */
-.toc {
-  counter-reset: toc-h1;
-}
-
-.toc ul {
-  list-style: none;
-}
-
-.toc > ul > li {
-  counter-increment: toc-h1;
-  counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > a::before {
-  content: counter(toc-h1) ". ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-.toc > ul > li > ul > li {
-  counter-increment: toc-h2;
-  counter-reset: toc-h3 toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > ul > li > a::before {
-  content: counter(toc-h1) "." counter(toc-h2) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-.toc > ul > li > ul > li > ul > li {
-  counter-increment: toc-h3;
-  counter-reset: toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > ul > li > ul > li > a::before {
-  content: counter(toc-h1) "." counter(toc-h2) "." counter(toc-h3) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-/* Optional: Add some spacing after the numbers */
-h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-  margin-right: 0.5em;
-}
-
-/* Print-specific adjustments */
-@media print {
-  h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-    color: #000 !important; /* Ensure numbers print in black */
-  }
-}
-
-/* Optional: Style adjustments for better visual hierarchy */
-h1 {
-  border-bottom: 2px solid var(--primary-color);
-  padding-bottom: 0.3em;
-  margin-top: 1em;
-}
-
-/* Reduce margin for first heading */
-h1:first-of-type {
-  margin-top: 0.5em;
-}
-
-h2 {
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 0.2em;
-  margin-top: 1.5em;
-}
-
-h3 {
-  margin-top: 1.2em;
-}
-
-h4, h5, h6 {
-  margin-top: 1em;
-}
diff --git a/pandoc/templates/_doc.html b/pandoc/templates/_doc.html
new file mode 100644
index 0000000..b555e16
--- /dev/null
+++ b/pandoc/templates/_doc.html
@@ -0,0 +1,112 @@
+  <div class="app-container">
+    $if(toc)$
+    <!-- Sidebar Navigation -->
+    <aside id="sidebar" role="complementary" aria-label="Table of contents">
+      <header class="sidebar-header">
+        <div class="toc-header-row">
+          <div class="sidebar-title">Table Of Contents</div>
+          <div class="toc-level-selector">
+            <select id="toc-level" aria-label="Filter table of contents levels">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3" selected>3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+            </select>
+          </div>
+        </div>
+      </header>
+      
+      <div class="toc-container">
+        $if(toc)$
+        <nav class="toc" role="navigation" aria-label="Table of contents">
+          $toc$
+        </nav>
+        $endif$
+      </div>
+    </aside>
+    $endif$
+    <!-- Main Content Area -->
+    <main class="content-wrapper" role="main">
+      <div class="content-page">
+        <!-- Document Header -->
+        <header class="document-header">
+          $if(toc)$
+          <div class="mobile-menu-container">
+            <button class="mobile-menu-toggle" type="button" aria-label="Toggle navigation menu" aria-expanded="false">
+              <span aria-hidden="true">☰</span>
+            </button>
+          </div>
+          $endif$
+          <div class="header-content">
+            $if(client)$$if(project)$
+            <div class="header-line client-project">
+              $client$ - $project$$if(project_number)$ ($project_number$)$endif$
+            </div>
+            $endif$$endif$
+            $if(title)$
+            <div class="document-title">$title$</div>
+            $endif$
+            <div class="document-meta">
+              $if(tracking_number)$<span class="tracking-number">$tracking_number$</span>$endif$
+              $if(revision)$<span class="revision">Revision: $revision$</span>$endif$
+              $if(status)$<span class="status">Status: $status$</span>$endif$
+              $if(revision_comparison)$<span class="revision-comparison">$revision_comparison$</span>$endif$
+            </div>
+            $if(is_draft)$
+            $if(generation_time)$
+            <div class="draft-line">
+              <span class="draft-status">[DRAFT Generated at $generation_time$]</span>
+            </div>
+            $endif$
+            $endif$
+          </div>
+        </header>
+        
+        <!-- Scroll Progress Bar -->
+        <div class="scroll-progress" role="progressbar" aria-label="Reading progress">
+          <div class="scroll-progress-bar"></div>
+        </div>
+        
+        <!-- Print-only header -->
+        <div class="print-header">
+          $if(custom_header)$
+          $custom_header$
+          $else$
+          $if(client)$$if(project)$
+          <div class="header-line client-project">
+            $client$ - $project$$if(project_number)$ ($project_number$)$endif$
+          </div>
+          $endif$$endif$
+          $if(title)$
+          <div class="header-line document-title">$title$</div>
+          $endif$
+          $if(tracking_number)$<div class="header-line">$tracking_number$$if(revision)$ Revision: $revision$$endif$$if(status)$ Status: $status$$endif$</div>$endif$
+          $if(revision_comparison)$<div class="header-line revision-comparison">$revision_comparison$</div>$endif$
+          $endif$
+          $if(generation_time)$
+          <div class="header-line metadata-line draft-line">
+            <span class="draft-status">Generated: $generation_time$</span>
+          </div>
+          $endif$
+        </div>
+
+        <!-- Print-only footer -->
+        <div class="print-footer">
+          <div class="footer-left">
+            $if(tracking_number)$$tracking_number$$endif$$if(revision)$ Revision: $revision$$endif$$if(status)$ Status: $status$$endif$
+          </div>
+          <div class="footer-right">
+            Page <span class="page-number"></span>
+          </div>
+        </div>
+
+
+        <!-- Document Content -->
+        <article class="document-content">
+          $body$
+        </article>
+      </div>
+    </main>
+  </div>
diff --git a/pandoc/templates/_head.html b/pandoc/templates/_head.html
new file mode 100644
index 0000000..bb03731
--- /dev/null
+++ b/pandoc/templates/_head.html
@@ -0,0 +1,778 @@
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>$if(title)$$title$$else$Document$endif$</title>
+  
+  <!-- Document metadata for JavaScript -->
+  $if(revision)$<meta name="revision" content="$revision$">$endif$
+  $if(generation_time)$<meta name="generation_time" content="$generation_time$">$endif$
+  
+  <!-- Embedded CSS -->
+  <style>
+/*
+* ZDDC Document Viewer Template
+* Enhanced responsive layout with TOC navigation
+*/
+
+/* CSS Variables for theming - Soft Light Theme */
+:root {
+  --primary-color: #2563eb;
+  --primary-color-dark: #1d4ed8;
+  --text-color: #4b5563;
+  --text-secondary: #6b7280;
+  --text-primary: #1f2937;
+  --bg-primary: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --border-color: #d1d5db;
+  --hover-bg: #e2e8f0;
+  --active-bg: rgba(37, 99, 235, 0.1);
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --sidebar-width: 280px;
+  --header-height: 120px;
+  --content-max-width: 900px;
+}
+
+/* Dark mode variables - Standard Dark Theme */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-color: #60a5fa;
+    --primary-color-dark: #3b82f6;
+    --text-color: #d1d5db;
+    --text-secondary: #9ca3af;
+    --text-primary: #f9fafb;
+    --bg-primary: #111827;
+    --bg-secondary: #1f2937;
+    --border-color: #374151;
+    --hover-bg: #374151;
+    --active-bg: rgba(96, 165, 250, 0.2);
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+}
+
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.6;
+  color: var(--text-color);
+  background: var(--bg-secondary);
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+@media print {
+  body {
+    height: auto !important;
+    overflow: visible !important;
+  }
+}
+
+/* App Container - Modern CSS Grid Layout */
+.app-container {
+  height: 100vh;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  grid-template-areas: "sidebar main";
+}
+
+@media (max-width: 768px) {
+  .app-container {
+    grid-template-columns: 1fr;
+    grid-template-areas: "main";
+  }
+}
+
+/* Content wrapper - Grid area */
+.content-wrapper {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-width: min(900px, 100%);
+  margin: 0;
+  container-type: inline-size;
+}
+
+/* Content page simplified */
+.content-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+/* Sidebar Navigation - Grid area */
+#sidebar {
+  grid-area: sidebar;
+  height: 100vh;
+  background: var(--bg-primary);
+  border-inline-end: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  #sidebar {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    background: var(--bg-primary);
+  }
+  
+  #sidebar.mobile-open {
+    transform: translateX(0);
+  }
+  
+  .content-wrapper {
+    max-width: none;
+  }
+  
+  /* Ensure mobile TOC uses light theme colors */
+  #sidebar .sidebar-header {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+  }
+  
+  #sidebar .toc a {
+    color: var(--text-primary);
+  }
+  
+  #sidebar .toc a:hover {
+    background: var(--hover-bg);
+  }
+}
+
+/* Document Header - Flex Row Layout */
+.document-header {
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-shrink: 0;
+}
+
+.mobile-menu-container {
+  display: none;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .mobile-menu-container {
+    display: flex;
+    align-items: center;
+  }
+  
+  .mobile-menu-toggle {
+    background: var(--primary-color);
+    color: white;
+    border: none;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    line-height: 1;
+  }
+  
+  .mobile-menu-toggle:hover {
+    background: var(--primary-color-dark);
+    transform: scale(1.05);
+    margin: 0;
+  }
+}
+
+.header-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.sidebar-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.sidebar-header {
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+}
+
+.toc-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toc-level-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+
+.toc-level-selector select {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.25rem;
+  background: var(--bg-primary);
+  color: var(--text-color);
+  font-size: 0.9rem;
+}
+
+/* TOC Container */
+.toc-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-color) transparent;
+  position: relative;
+}
+
+.toc-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.toc-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.toc-container::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 3px;
+}
+
+/* Scroll Progress Indicator */
+.scroll-progress {
+  width: 100%;
+  height: 3px;
+  background: var(--border-color);
+  margin-bottom: 20px;
+}
+
+.scroll-progress-bar {
+  height: 100%;
+  background: var(--primary-color);
+  width: 0%;
+  transition: width 0.1s ease;
+}
+
+/* TOC Styling */
+.toc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc ul ul {
+  padding-left: 1.25rem;
+  margin-top: 0.25rem;
+  border-left: 2px solid var(--border-color);
+  margin-left: 0.5rem;
+}
+
+.toc li {
+  margin: 0;
+}
+
+.toc a {
+  display: block;
+  padding: 0.375rem 0.75rem;
+  color: var(--text-color);
+  text-decoration: none;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+  line-height: 1.3;
+}
+
+.toc li li a {
+  border-left: none;
+}
+
+.toc a:hover {
+  background: var(--hover-bg);
+  color: var(--primary-color);
+}
+
+.toc a.active {
+  background: var(--active-bg);
+  color: var(--primary-color);
+  border-left-color: var(--primary-color);
+  font-weight: 500;
+}
+
+/* Content Page Container - Simplified */
+.content-page {
+  flex: 1;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+/* Document Content */
+.document-content {
+  flex: 1;
+  padding: 0.5rem 2rem 2rem 2rem;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  overflow-y: auto;
+  position: relative;
+}
+
+/* Document Header */
+.document-header {
+  border-bottom: 1px solid var(--border-color);
+  padding: 0.75rem 2rem;
+  background: var(--bg-primary);
+}
+
+.header-content {
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+
+.header-line {
+  margin: 0;
+  line-height: 1.3;
+}
+
+/* Header line hierarchy */
+.client-project {
+  font-size: 1.2rem;
+  color: var(--text-color);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.document-title {
+  font-size: 2.2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.metadata-line {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+.draft-status {
+  color: #dc3545;
+  font-weight: bold;
+  margin-left: 0.5rem;
+}
+
+/* Print-only elements - hidden on screen */
+.print-header,
+.print-footer {
+  display: none;
+}
+
+/* Mobile menu backdrop */
+@media (max-width: 768px) {
+  .mobile-menu-container {
+    display: flex;
+    align-items: center;
+  }
+
+  #sidebar.mobile-open::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: -1;
+  }
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text-primary);
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+/* Remove top margin from first heading in content */
+.document-content h1:first-child,
+.document-content h2:first-child,
+.document-content h3:first-child,
+.document-content h4:first-child,
+.document-content h5:first-child,
+.document-content h6:first-child {
+  margin-top: 0;
+}
+
+h1 { font-size: 2rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.25rem; }
+h4 { font-size: 1.125rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.875rem; }
+
+p {
+  margin: 1rem 0;
+  color: var(--text-color);
+}
+
+/* Lists */
+ol, ul {
+  margin: 1rem 0;
+  padding-left: 2rem;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+li {
+  margin: 0.25rem 0;
+  color: var(--text-color);
+}
+
+/* Nested lists */
+ol ol, ul ul, ol ul, ul ol {
+  margin: 0.25rem 0;
+  padding-left: 1.5rem;
+}
+
+ul ul {
+  list-style-type: circle;
+}
+
+ul ul ul {
+  list-style-type: square;
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.9rem;
+}
+
+th, td {
+  padding: 0.75rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Print styles */
+@media print {
+  /* Hide online-only elements */
+  .sidebar,
+  .mobile-menu-toggle,
+  .scroll-progress,
+  .document-header {
+    display: none !important;
+  }
+
+  /* Show print-only elements */
+  .print-header {
+    display: block !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-bottom: 1pt solid #000;
+    padding: 12pt 0.5in;
+    z-index: 1000;
+    margin: 0;
+  }
+
+  .print-footer {
+    display: flex !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    border-top: 1pt solid #000;
+    padding: 8pt 0.5in;
+    z-index: 1000;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+  }
+
+  /* Print header styling */
+  .print-header .client-project {
+    font-size: 12pt;
+    color: #333;
+    font-weight: 600;
+    margin: 0 0 4pt 0;
+    line-height: 1.2;
+  }
+
+  .print-header .document-title {
+    font-size: 16pt;
+    color: #000;
+    font-weight: 700;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  /* Print footer styling */
+  .print-footer .footer-left,
+  .print-footer .footer-right {
+    font-size: 10pt;
+    color: #666;
+    margin: 0;
+  }
+  
+  /* Page counter for print */
+  .print-footer .page-number::after {
+    content: counter(page);
+  }
+  
+  @page {
+    margin: 1in;
+    size: letter;
+    counter-increment: page;
+  }
+  
+  .draft-line {
+    margin-top: 4pt;
+    font-size: 10pt;
+  }
+
+  /* Layout adjustments */
+  html, body {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .app-container {
+    display: block !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .content-wrapper {
+    margin-left: 0 !important;
+    width: 100% !important;
+    /* The screen layout caps content-wrapper at 900px; in print, the
+       printable area is page-width minus @page margins (~6.5in =
+       ~624px for letter at 96dpi), which is narrower than 900px BUT
+       chromium's --print-to-pdf renders at the full page width and
+       only clips at print time — so without max-width:none the
+       element extends past the right margin. */
+    max-width: none !important;
+  }
+
+  .content-page {
+    max-width: none !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+
+  .document-content {
+    margin-top: 80pt !important;
+    margin-bottom: 50pt !important;
+    padding: 0 0.5in !important;
+    border-left: none !important;
+    min-height: calc(100vh - 130pt) !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Wide content that wouldn't otherwise wrap: tables, code blocks,
+     long URLs in inline code. Force them to stay within the
+     printable area instead of running off the right edge. */
+  pre, code, table, blockquote, img, video {
+    max-width: 100% !important;
+    overflow-wrap: break-word !important;
+    word-wrap: break-word !important;
+  }
+  pre {
+    white-space: pre-wrap !important;
+    word-break: break-word !important;
+  }
+  table {
+    table-layout: fixed !important;
+    width: 100% !important;
+  }
+
+  /* Fix list formatting in print */
+  ol, ul {
+    padding-left: 2rem !important;
+  }
+
+  li {
+    margin: 0.25rem 0 !important;
+  }
+
+  /* Typography for print */
+  body {
+    font-size: 12pt !important;
+    line-height: 1.4 !important;
+    color: #000 !important;
+    background: white !important;
+  }
+
+  /* Page breaks */
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+    margin-top: 0.5em;
+  }
+
+  p, li {
+    orphans: 3;
+    widows: 3;
+    page-break-inside: avoid;
+  }
+  
+  /* Prevent content cutoff */
+  * {
+    box-sizing: border-box;
+  }
+  
+  /* Ensure proper spacing at page breaks */
+  h1:first-child, h2:first-child, h3:first-child {
+    margin-top: 0;
+    padding-top: 0.5em;
+  }
+  
+  /* Table print formatting */
+  table {
+    page-break-inside: avoid;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tbody {
+    display: table-row-group;
+  }
+
+  tr {
+    page-break-inside: avoid;
+  }
+
+  th, td {
+    padding: 8pt 6pt !important;
+    vertical-align: top;
+  }
+
+  a {
+    color: #000 !important;
+    text-decoration: underline !important;
+  }
+}
+
+/* Diff styling for pandiff output */
+u {
+  background-color: #d4edda;
+  color: #155724;
+  text-decoration: none;
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+}
+
+
+/*
+ * Legal-style heading numbering for ZDDC documents.
+ * Gated by the `numbered` body class, which the per-doctype templates add when
+ * the document's YAML front matter sets `numbering: true` (default: off).
+ */
+body.numbered .document-content { counter-reset: h1-counter; }
+
+body.numbered h1 { counter-reset: h2-counter h3-counter h4-counter h5-counter h6-counter; counter-increment: h1-counter; }
+body.numbered h1::before { content: counter(h1-counter) ". "; font-weight: bold; color: var(--primary-color); }
+
+body.numbered h2 { counter-reset: h3-counter h4-counter h5-counter h6-counter; counter-increment: h2-counter; }
+body.numbered h2::before { content: counter(h1-counter) "." counter(h2-counter) " "; font-weight: bold; color: var(--primary-color); }
+
+body.numbered h3 { counter-reset: h4-counter h5-counter h6-counter; counter-increment: h3-counter; }
+body.numbered h3::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) " "; font-weight: bold; color: var(--primary-color); }
+
+body.numbered h4 { counter-reset: h5-counter h6-counter; counter-increment: h4-counter; }
+body.numbered h4::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " "; font-weight: bold; color: var(--primary-color); }
+
+body.numbered h5 { counter-reset: h6-counter; counter-increment: h5-counter; }
+body.numbered h5::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) " "; font-weight: bold; color: var(--primary-color); }
+
+body.numbered h6 { counter-increment: h6-counter; }
+body.numbered h6::before { content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) " "; font-weight: bold; color: var(--primary-color); }
+
+/* TOC numbering to match document headings */
+body.numbered .toc { counter-reset: toc-h1; }
+body.numbered .toc ul { list-style: none; }
+body.numbered .toc > ul > li { counter-increment: toc-h1; counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6; }
+body.numbered .toc > ul > li > a::before { content: counter(toc-h1) ". "; font-weight: bold; color: var(--primary-color); margin-right: 0.25em; }
+body.numbered .toc > ul > li > ul > li { counter-increment: toc-h2; counter-reset: toc-h3 toc-h4 toc-h5 toc-h6; }
+body.numbered .toc > ul > li > ul > li > a::before { content: counter(toc-h1) "." counter(toc-h2) " "; font-weight: bold; color: var(--primary-color); margin-right: 0.25em; }
+body.numbered .toc > ul > li > ul > li > ul > li { counter-increment: toc-h3; counter-reset: toc-h4 toc-h5 toc-h6; }
+body.numbered .toc > ul > li > ul > li > ul > li > a::before { content: counter(toc-h1) "." counter(toc-h2) "." counter(toc-h3) " "; font-weight: bold; color: var(--primary-color); margin-right: 0.25em; }
+
+body.numbered h1::before, body.numbered h2::before, body.numbered h3::before,
+body.numbered h4::before, body.numbered h5::before, body.numbered h6::before { margin-right: 0.5em; }
+
+@media print {
+  body.numbered h1::before, body.numbered h2::before, body.numbered h3::before,
+  body.numbered h4::before, body.numbered h5::before, body.numbered h6::before { color: #000 !important; }
+}
+
+/* Visual heading hierarchy that accompanies the numbered/legal look. */
+body.numbered h1 { border-bottom: 2px solid var(--primary-color); padding-bottom: 0.3em; margin-top: 1em; }
+body.numbered h1:first-of-type { margin-top: 0.5em; }
+body.numbered h2 { border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em; margin-top: 1.5em; }
+body.numbered h3 { margin-top: 1.2em; }
+body.numbered h4, body.numbered h5, body.numbered h6 { margin-top: 1em; }
+
+/*
+ * Doctype-specific layout. `doctype` comes from the document's YAML front matter
+ * (report | specification | letter); the per-doctype template sets `doc-<name>`.
+ * A letter has no TOC sidebar and flows as a normal single column.
+ */
+body.doc-letter { height: auto; overflow: visible; }
+body.doc-letter .content-wrapper { margin: 0 auto; max-width: var(--content-max-width); }
+
+
+  </style>
+  
+  $for(header-includes)$
+  $header-includes$
+  $endfor$
+</head>
diff --git a/pandoc/templates/_scripts.html b/pandoc/templates/_scripts.html
new file mode 100644
index 0000000..9adb801
--- /dev/null
+++ b/pandoc/templates/_scripts.html
@@ -0,0 +1,259 @@
+  <!-- Embedded JavaScript -->
+  <script>
+    'use strict';
+
+    // Modern initialization with arrow functions
+    document.addEventListener('DOMContentLoaded', function() {
+      // View mode toggle functionality
+      const buttons = document.querySelectorAll('.view-mode-btn');
+      const body = document.body;
+      
+      buttons.forEach(button => {
+        button.addEventListener('click', function() {
+          const mode = this.dataset.mode;
+          
+          // Remove all view mode classes
+          body.classList.remove('view-original', 'view-final');
+          
+          // Add the selected mode class (except for diff which is default)
+          if (mode === 'original') {
+            body.classList.add('view-original');
+          } else if (mode === 'final') {
+            body.classList.add('view-final');
+          }
+          
+          // Update button states
+          buttons.forEach(btn => btn.classList.remove('active'));
+          this.classList.add('active');
+        });
+      });
+
+      const sidebar = document.getElementById('sidebar');
+      if (sidebar) {
+        initTocNavigation();
+      }
+      
+      // Set default TOC level filtering
+      filterTocLevels('3');
+      
+      // Setup event listeners with delegation
+      setupEventListeners();
+      
+      // Initialize print functionality
+      initPrintSupport();
+    });
+
+    // Modern TOC Navigation with ES6+ patterns
+    function initTocNavigation() {
+      const tocLinks = document.querySelectorAll('.toc a');
+      const contentArea = document.querySelector('.document-content');
+      
+      if (!tocLinks.length || !contentArea) return;
+      
+      // Smooth scroll with event delegation (better performance)
+      function handleTocClick(e) {
+        if (!e.target.matches('.toc a')) return;
+        
+        e.preventDefault();
+        const href = e.target.getAttribute('href');
+        const targetId = href ? href.slice(1) : null;
+        const targetElement = targetId ? document.getElementById(targetId) : null;
+        
+        if (!targetElement) return;
+        
+        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        
+        // Update URL hash without adding to browser history
+        window.location.replace(window.location.pathname + window.location.search + href);
+        
+        // Update active state
+        tocLinks.forEach(link => link.classList.remove('active'));
+        e.target.classList.add('active');
+        
+        // Close mobile menu if open
+        const sidebar = document.getElementById('sidebar');
+        if (sidebar && sidebar.classList.contains('mobile-open')) toggleMobileMenu();
+      };
+      
+      document.addEventListener('click', handleTocClick);
+      
+      // TOC scroll tracking using Intersection Observer API
+      // NOTE: Intersection Observer is the industry-standard, recommended approach for scroll spy
+      // implementations as of 2024. It provides better performance (runs off main thread),
+      // cleaner code, and is supported by all modern browsers. Avoid scroll event listeners
+      // for this use case as they are performance-intensive and require complex calculations.
+      // Find all sections with IDs - much simpler approach
+      const sections = Array.from(contentArea.querySelectorAll('section[id]'));
+      
+      
+      if (sections.length === 0) {
+        return;
+      }
+      
+      function updateActiveTocItem(activeSection) {
+        if (!activeSection || !activeSection.id) return;
+        
+        // Clear all active states
+        tocLinks.forEach(link => link.classList.remove('active'));
+        
+        // Find and activate the matching TOC link
+        const activeLink = document.querySelector('.toc a[href="#' + activeSection.id + '"]');
+        if (!activeLink) return;
+        
+        activeLink.classList.add('active');
+        
+        // Auto-scroll TOC to keep active item visible
+        activeLink.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      };
+      
+      // Create Intersection Observer with industry-standard configuration
+      const observer = new IntersectionObserver(function(entries) {
+        // Find visible sections and update active TOC item
+        const visibleSections = entries.filter(function(entry) { return entry.isIntersecting; });
+        if (visibleSections.length > 0) {
+          // Sort by position in viewport (topmost first)
+          visibleSections.sort(function(a, b) { return a.boundingClientRect.top - b.boundingClientRect.top; });
+          const activeSection = visibleSections[0].target;
+          updateActiveTocItem(activeSection);
+        }
+      }, {
+        root: contentArea,
+        rootMargin: '-20% 0px -60% 0px', // Only consider sections in the middle 20% of viewport
+        threshold: 0.1
+      });
+      
+      // Observe all sections
+      sections.forEach(function(section) { observer.observe(section); });
+      
+      // Scroll progress bar with throttling for better performance
+      const progressBar = document.querySelector('.scroll-progress-bar');
+      if (progressBar) {
+        let ticking = false;
+        
+        function updateScrollProgress() {
+          const scrollTop = contentArea.scrollTop;
+          const scrollHeight = contentArea.scrollHeight;
+          const clientHeight = contentArea.clientHeight;
+          const scrollPercent = scrollHeight > clientHeight 
+            ? (scrollTop / (scrollHeight - clientHeight)) * 100 
+            : 0;
+          progressBar.style.width = Math.min(100, Math.max(0, scrollPercent)) + '%';
+          ticking = false;
+        };
+        
+        function onScroll() {
+          if (!ticking) {
+            requestAnimationFrame(updateScrollProgress);
+            ticking = true;
+          }
+        };
+        
+        contentArea.addEventListener('scroll', onScroll, { passive: true });
+        updateScrollProgress(); // Initial call
+      }
+    };
+
+    // Toggle mobile menu with ARIA support
+    function toggleMobileMenu() {
+      const sidebar = document.getElementById('sidebar');
+      const menuToggle = document.querySelector('.mobile-menu-toggle');
+      
+      if (!sidebar || !menuToggle) return;
+      
+      const isOpen = sidebar.classList.toggle('mobile-open');
+      menuToggle.setAttribute('aria-expanded', isOpen.toString());
+    };
+
+    // Filter TOC levels with modern patterns
+    function filterTocLevels(maxLevel) {
+      const toc = document.querySelector('.toc');
+      if (!toc) return;
+      
+      const allItems = toc.querySelectorAll('li');
+      const maxLevelNum = parseInt(maxLevel);
+      const showAll = maxLevel === '6';
+      
+      allItems.forEach(function(item) {
+        const link = item.querySelector('a');
+        if (!link) return;
+        
+        if (showAll) {
+          item.style.display = '';
+          return;
+        }
+        
+        // Calculate nesting level more efficiently
+        let level = 1;
+        let parent = item.parentElement;
+        while (parent && !parent.classList.contains('toc')) {
+          if (parent.tagName === 'LI') level++;
+          parent = parent.parentElement;
+        }
+        
+        item.style.display = level <= maxLevelNum ? '' : 'none';
+      });
+    };
+
+
+    // Setup event listeners with delegation
+    function setupEventListeners() {
+      // TOC level selector
+      const tocLevelSelect = document.getElementById('toc-level');
+      if (tocLevelSelect) tocLevelSelect.addEventListener('change', function(e) {
+        filterTocLevels(e.target.value);
+      });
+      
+      // Mobile menu toggle
+      const menuToggle = document.querySelector('.mobile-menu-toggle');
+      if (menuToggle) menuToggle.addEventListener('click', toggleMobileMenu);
+      
+      // Close mobile menu on outside click
+      document.addEventListener('click', function(e) {
+        const sidebar = document.getElementById('sidebar');
+        const menuToggle = document.querySelector('.mobile-menu-toggle');
+        
+        if (sidebar && sidebar.classList.contains('mobile-open') && 
+            !sidebar.contains(e.target) && 
+            (!menuToggle || !menuToggle.contains(e.target))) {
+          toggleMobileMenu();
+        }
+      });
+      
+      // Handle escape key to close mobile menu
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          const sidebar = document.getElementById('sidebar');
+          if (sidebar && sidebar.classList.contains('mobile-open')) {
+            toggleMobileMenu();
+          }
+        }
+      });
+    };
+
+    // Initialize print support and draft status
+    function initPrintSupport() {
+      // Handle draft status for revisions containing tilde (~)
+      const revision = document.querySelector('meta[name="revision"]');
+      const generationTime = document.querySelector('meta[name="generation_time"]');
+      
+      if (revision && generationTime) {
+        const revisionValue = revision.getAttribute('content');
+        const timeValue = generationTime.getAttribute('content');
+        
+        if (revisionValue && revisionValue.includes('~') && timeValue) {
+          const draftElements = document.querySelectorAll('.draft-status');
+          draftElements.forEach(function(element) {
+            element.textContent = ' [DRAFT Generated at ' + timeValue + ']';
+          });
+        }
+      }
+    }
+
+    // Export functions for global access (maintaining backward compatibility)
+    window.toggleMobileMenu = toggleMobileMenu;
+    window.filterTocLevels = filterTocLevels;
+  </script>
diff --git a/pandoc/templates/letter.html b/pandoc/templates/letter.html
new file mode 100644
index 0000000..310e15b
--- /dev/null
+++ b/pandoc/templates/letter.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+$_head()$
+
+<body class="doc-letter$if(numbering)$ numbered$endif$">
+  <!-- Letter layout: single column, no TOC sidebar -->
+  <main class="content-wrapper" role="main">
+    <div class="content-page">
+      <!-- Letterhead -->
+      <header class="document-header">
+        <div class="header-content">
+          $if(client)$$if(project)$
+          <div class="header-line client-project">
+            $client$ - $project$$if(project_number)$ ($project_number$)$endif$
+          </div>
+          $endif$$endif$
+          $if(title)$
+          <div class="document-title">$title$</div>
+          $endif$
+          <div class="document-meta">
+            $if(date)$<span class="date">$date$</span>$endif$
+            $if(tracking_number)$<span class="tracking-number">$tracking_number$</span>$endif$
+            $if(revision)$<span class="revision">Revision: $revision$</span>$endif$
+            $if(status)$<span class="status">Status: $status$</span>$endif$
+          </div>
+        </div>
+      </header>
+
+      <!-- Print-only header -->
+      <div class="print-header">
+        $if(custom_header)$
+        $custom_header$
+        $else$
+        $if(client)$$if(project)$
+        <div class="header-line client-project">$client$ - $project$$if(project_number)$ ($project_number$)$endif$</div>
+        $endif$$endif$
+        $if(title)$<div class="header-line document-title">$title$</div>$endif$
+        $endif$
+      </div>
+
+      <!-- Print-only footer -->
+      <div class="print-footer">
+        <div class="footer-left">
+          $if(tracking_number)$$tracking_number$$endif$$if(revision)$ Revision: $revision$$endif$$if(status)$ Status: $status$$endif$
+        </div>
+        <div class="footer-right">Page <span class="page-number"></span></div>
+      </div>
+
+      <article class="document-content">
+        $body$
+      </article>
+    </div>
+  </main>
+$_scripts()$
+</body>
+</html>
diff --git a/pandoc/templates/report.html b/pandoc/templates/report.html
new file mode 100644
index 0000000..1fbbcdf
--- /dev/null
+++ b/pandoc/templates/report.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+$_head()$
+
+<body class="doc-report$if(numbering)$ numbered$endif$">
+$_doc()$
+$_scripts()$
+</body>
+</html>
diff --git a/pandoc/templates/specification.html b/pandoc/templates/specification.html
new file mode 100644
index 0000000..3e93e4a
--- /dev/null
+++ b/pandoc/templates/specification.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+$_head()$
+
+<body class="doc-specification$if(numbering)$ numbered$endif$">
+$_doc()$
+$_scripts()$
+</body>
+</html>
diff --git a/pandoc/viewer-template.html b/pandoc/viewer-template.html
deleted file mode 100644
index f64acd8..0000000
--- a/pandoc/viewer-template.html
+++ /dev/null
@@ -1,1261 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>$if(title)$$title$$else$Document$endif$</title>
-  
-  <!-- Document metadata for JavaScript -->
-  $if(revision)$<meta name="revision" content="$revision$">$endif$
-  $if(generation_time)$<meta name="generation_time" content="$generation_time$">$endif$
-  
-  <!-- Embedded CSS -->
-  <style>
-/*
-* ZDDC Document Viewer Template
-* Enhanced responsive layout with TOC navigation
-*/
-
-/* CSS Variables for theming - Soft Light Theme */
-:root {
-  --primary-color: #2563eb;
-  --primary-color-dark: #1d4ed8;
-  --text-color: #4b5563;
-  --text-secondary: #6b7280;
-  --text-primary: #1f2937;
-  --bg-primary: #f8fafc;
-  --bg-secondary: #f1f5f9;
-  --border-color: #d1d5db;
-  --hover-bg: #e2e8f0;
-  --active-bg: rgba(37, 99, 235, 0.1);
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --sidebar-width: 280px;
-  --header-height: 120px;
-  --content-max-width: 900px;
-}
-
-/* Dark mode variables - Standard Dark Theme */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --primary-color: #60a5fa;
-    --primary-color-dark: #3b82f6;
-    --text-color: #d1d5db;
-    --text-secondary: #9ca3af;
-    --text-primary: #f9fafb;
-    --bg-primary: #111827;
-    --bg-secondary: #1f2937;
-    --border-color: #374151;
-    --hover-bg: #374151;
-    --active-bg: rgba(96, 165, 250, 0.2);
-    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
-  }
-}
-
-/* Reset and base styles */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  line-height: 1.6;
-  color: var(--text-color);
-  background: var(--bg-secondary);
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-@media print {
-  body {
-    height: auto !important;
-    overflow: visible !important;
-  }
-}
-
-/* App Container - Modern CSS Grid Layout */
-.app-container {
-  height: 100vh;
-  display: grid;
-  grid-template-columns: var(--sidebar-width) 1fr;
-  grid-template-areas: "sidebar main";
-}
-
-@media (max-width: 768px) {
-  .app-container {
-    grid-template-columns: 1fr;
-    grid-template-areas: "main";
-  }
-}
-
-/* Content wrapper - Grid area */
-.content-wrapper {
-  grid-area: main;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  max-width: min(900px, 100%);
-  margin: 0;
-  container-type: inline-size;
-}
-
-/* Content page simplified */
-.content-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.header-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-/* Sidebar Navigation - Grid area */
-#sidebar {
-  grid-area: sidebar;
-  height: 100vh;
-  background: var(--bg-primary);
-  border-inline-end: 1px solid var(--border-color);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-@media (max-width: 768px) {
-  #sidebar {
-    position: fixed;
-    inset: 0;
-    z-index: 1000;
-    transform: translateX(-100%);
-    transition: transform 0.3s ease;
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-    background: var(--bg-primary);
-  }
-  
-  #sidebar.mobile-open {
-    transform: translateX(0);
-  }
-  
-  .content-wrapper {
-    max-width: none;
-  }
-  
-  /* Ensure mobile TOC uses light theme colors */
-  #sidebar .sidebar-header {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-  }
-  
-  #sidebar .toc a {
-    color: var(--text-primary);
-  }
-  
-  #sidebar .toc a:hover {
-    background: var(--hover-bg);
-  }
-}
-
-/* Document Header - Flex Row Layout */
-.document-header {
-  background: var(--bg-primary);
-  border-bottom: 1px solid var(--border-color);
-  padding: 1rem;
-  margin-bottom: 0;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex-shrink: 0;
-}
-
-.mobile-menu-container {
-  display: none;
-  flex-shrink: 0;
-}
-
-@media (max-width: 768px) {
-  .mobile-menu-container {
-    display: flex;
-    align-items: center;
-  }
-  
-  .mobile-menu-toggle {
-    background: var(--primary-color);
-    color: white;
-    border: none;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    font-size: 1.2rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    line-height: 1;
-  }
-  
-  .mobile-menu-toggle:hover {
-    background: var(--primary-color-dark);
-    transform: scale(1.05);
-    margin: 0;
-  }
-}
-
-.header-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.sidebar-title {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.sidebar-header {
-  padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
-  background: var(--bg-secondary);
-}
-
-.toc-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.toc-level-selector {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-
-.toc-level-selector select {
-  padding: 0.25rem 0.5rem;
-  border: 1px solid var(--border-color);
-  border-radius: 0.25rem;
-  background: var(--bg-primary);
-  color: var(--text-color);
-  font-size: 0.9rem;
-}
-
-/* TOC Container */
-.toc-container {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem 0;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-color) transparent;
-  position: relative;
-}
-
-.toc-container::-webkit-scrollbar {
-  width: 6px;
-}
-
-.toc-container::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.toc-container::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 3px;
-}
-
-/* Scroll Progress Indicator */
-.scroll-progress {
-  width: 100%;
-  height: 3px;
-  background: var(--border-color);
-  margin-bottom: 20px;
-}
-
-.scroll-progress-bar {
-  height: 100%;
-  background: var(--primary-color);
-  width: 0%;
-  transition: width 0.1s ease;
-}
-
-/* TOC Styling */
-.toc ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.toc ul ul {
-  padding-left: 1.25rem;
-  margin-top: 0.25rem;
-  border-left: 2px solid var(--border-color);
-  margin-left: 0.5rem;
-}
-
-.toc li {
-  margin: 0;
-}
-
-.toc a {
-  display: block;
-  padding: 0.375rem 0.75rem;
-  color: var(--text-color);
-  text-decoration: none;
-  border-radius: 4px;
-  transition: all 0.2s ease;
-  font-size: 0.9rem;
-  line-height: 1.3;
-}
-
-.toc li li a {
-  border-left: none;
-}
-
-.toc a:hover {
-  background: var(--hover-bg);
-  color: var(--primary-color);
-}
-
-.toc a.active {
-  background: var(--active-bg);
-  color: var(--primary-color);
-  border-left-color: var(--primary-color);
-  font-weight: 500;
-}
-
-/* Content Page Container - Simplified */
-.content-page {
-  flex: 1;
-  background: var(--bg-primary);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* Document Content */
-.document-content {
-  flex: 1;
-  padding: 0.5rem 2rem 2rem 2rem;
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-  overflow-y: auto;
-  position: relative;
-}
-
-/* Document Header */
-.document-header {
-  border-bottom: 1px solid var(--border-color);
-  padding: 0.75rem 2rem;
-  background: var(--bg-primary);
-}
-
-.header-content {
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-}
-
-.header-line {
-  margin: 0;
-  line-height: 1.3;
-}
-
-/* Header line hierarchy */
-.client-project {
-  font-size: 1.2rem;
-  color: var(--text-color);
-  font-weight: 600;
-  margin-bottom: 0.5rem;
-}
-
-.document-title {
-  font-size: 2.2rem;
-  font-weight: 700;
-  color: var(--text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.metadata-line {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  font-weight: 400;
-}
-
-.draft-status {
-  color: #dc3545;
-  font-weight: bold;
-  margin-left: 0.5rem;
-}
-
-/* Print-only elements - hidden on screen */
-.print-header,
-.print-footer {
-  display: none;
-}
-
-/* Mobile menu backdrop */
-@media (max-width: 768px) {
-  .mobile-menu-container {
-    display: flex;
-    align-items: center;
-  }
-
-  #sidebar.mobile-open::before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: -1;
-  }
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--text-primary);
-  font-weight: 600;
-  line-height: 1.25;
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-/* Remove top margin from first heading in content */
-.document-content h1:first-child,
-.document-content h2:first-child,
-.document-content h3:first-child,
-.document-content h4:first-child,
-.document-content h5:first-child,
-.document-content h6:first-child {
-  margin-top: 0;
-}
-
-h1 { font-size: 2rem; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.25rem; }
-h4 { font-size: 1.125rem; }
-h5 { font-size: 1rem; }
-h6 { font-size: 0.875rem; }
-
-p {
-  margin: 1rem 0;
-  color: var(--text-color);
-}
-
-/* Lists */
-ol, ul {
-  margin: 1rem 0;
-  padding-left: 2rem;
-}
-
-ol {
-  list-style-type: decimal;
-}
-
-ul {
-  list-style-type: disc;
-}
-
-li {
-  margin: 0.25rem 0;
-  color: var(--text-color);
-}
-
-/* Nested lists */
-ol ol, ul ul, ol ul, ul ol {
-  margin: 0.25rem 0;
-  padding-left: 1.5rem;
-}
-
-ul ul {
-  list-style-type: circle;
-}
-
-ul ul ul {
-  list-style-type: square;
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1.5rem 0;
-  font-size: 0.9rem;
-}
-
-th, td {
-  padding: 0.75rem;
-  text-align: left;
-  border-bottom: 1px solid var(--border-color);
-}
-
-/* Print styles */
-@media print {
-  /* Hide online-only elements */
-  .sidebar,
-  .mobile-menu-toggle,
-  .scroll-progress,
-  .document-header {
-    display: none !important;
-  }
-
-  /* Show print-only elements */
-  .print-header {
-    display: block !important;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background: white;
-    border-bottom: 1pt solid #000;
-    padding: 12pt 0.5in;
-    z-index: 1000;
-    margin: 0;
-  }
-
-  .print-footer {
-    display: flex !important;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: white;
-    border-top: 1pt solid #000;
-    padding: 8pt 0.5in;
-    z-index: 1000;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0;
-  }
-
-  /* Print header styling */
-  .print-header .client-project {
-    font-size: 12pt;
-    color: #333;
-    font-weight: 600;
-    margin: 0 0 4pt 0;
-    line-height: 1.2;
-  }
-
-  .print-header .document-title {
-    font-size: 16pt;
-    color: #000;
-    font-weight: 700;
-    margin: 0;
-    line-height: 1.2;
-  }
-
-  /* Print footer styling */
-  .print-footer .footer-left,
-  .print-footer .footer-right {
-    font-size: 10pt;
-    color: #666;
-    margin: 0;
-  }
-  
-  /* Page counter for print */
-  .print-footer .page-number::after {
-    content: counter(page);
-  }
-  
-  @page {
-    margin: 1in;
-    size: letter;
-    counter-increment: page;
-  }
-  
-  .draft-line {
-    margin-top: 4pt;
-    font-size: 10pt;
-  }
-
-  /* Layout adjustments */
-  html, body {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-  }
-
-  .app-container {
-    display: block !important;
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .content-wrapper {
-    margin-left: 0 !important;
-    width: 100% !important;
-    /* The screen layout caps content-wrapper at 900px; in print, the
-       printable area is page-width minus @page margins (~6.5in =
-       ~624px for letter at 96dpi), which is narrower than 900px BUT
-       chromium's --print-to-pdf renders at the full page width and
-       only clips at print time — so without max-width:none the
-       element extends past the right margin. */
-    max-width: none !important;
-  }
-
-  .content-page {
-    max-width: none !important;
-    width: 100% !important;
-    padding: 0 !important;
-  }
-
-  .document-content {
-    margin-top: 80pt !important;
-    margin-bottom: 50pt !important;
-    padding: 0 0.5in !important;
-    border-left: none !important;
-    min-height: calc(100vh - 130pt) !important;
-    max-width: 100% !important;
-    box-sizing: border-box !important;
-  }
-
-  /* Wide content that wouldn't otherwise wrap: tables, code blocks,
-     long URLs in inline code. Force them to stay within the
-     printable area instead of running off the right edge. */
-  pre, code, table, blockquote, img, video {
-    max-width: 100% !important;
-    overflow-wrap: break-word !important;
-    word-wrap: break-word !important;
-  }
-  pre {
-    white-space: pre-wrap !important;
-    word-break: break-word !important;
-  }
-  table {
-    table-layout: fixed !important;
-    width: 100% !important;
-  }
-
-  /* Fix list formatting in print */
-  ol, ul {
-    padding-left: 2rem !important;
-  }
-
-  li {
-    margin: 0.25rem 0 !important;
-  }
-
-  /* Typography for print */
-  body {
-    font-size: 12pt !important;
-    line-height: 1.4 !important;
-    color: #000 !important;
-    background: white !important;
-  }
-
-  /* Page breaks */
-  h1, h2, h3, h4, h5, h6 {
-    page-break-after: avoid;
-    page-break-inside: avoid;
-    margin-top: 0.5em;
-  }
-
-  p, li {
-    orphans: 3;
-    widows: 3;
-    page-break-inside: avoid;
-  }
-  
-  /* Prevent content cutoff */
-  * {
-    box-sizing: border-box;
-  }
-  
-  /* Ensure proper spacing at page breaks */
-  h1:first-child, h2:first-child, h3:first-child {
-    margin-top: 0;
-    padding-top: 0.5em;
-  }
-  
-  /* Table print formatting */
-  table {
-    page-break-inside: avoid;
-  }
-
-  thead {
-    display: table-header-group;
-  }
-
-  tbody {
-    display: table-row-group;
-  }
-
-  tr {
-    page-break-inside: avoid;
-  }
-
-  th, td {
-    padding: 8pt 6pt !important;
-    vertical-align: top;
-  }
-
-  a {
-    color: #000 !important;
-    text-decoration: underline !important;
-  }
-}
-
-/* Diff styling for pandiff output */
-u {
-  background-color: #d4edda;
-  color: #155724;
-  text-decoration: none;
-  padding: 0.1em 0.2em;
-  border-radius: 0.2em;
-}
-
-/* 
- * Legal-style heading numbering for ZDDC documents
- * Adds hierarchical numbering like 1, 1.1, 1.1.1, etc.
- */
-
-/* Reset counters at document level */
-.document-content {
-  counter-reset: h1-counter;
-}
-
-/* H1 counters */
-h1 {
-  counter-reset: h2-counter h3-counter h4-counter h5-counter h6-counter;
-  counter-increment: h1-counter;
-}
-
-h1::before {
-  content: counter(h1-counter) ". ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H2 counters */
-h2 {
-  counter-reset: h3-counter h4-counter h5-counter h6-counter;
-  counter-increment: h2-counter;
-}
-
-h2::before {
-  content: counter(h1-counter) "." counter(h2-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H3 counters */
-h3 {
-  counter-reset: h4-counter h5-counter h6-counter;
-  counter-increment: h3-counter;
-}
-
-h3::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H4 counters */
-h4 {
-  counter-reset: h5-counter h6-counter;
-  counter-increment: h4-counter;
-}
-
-h4::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H5 counters */
-h5 {
-  counter-reset: h6-counter;
-  counter-increment: h5-counter;
-}
-
-h5::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* H6 counters */
-h6 {
-  counter-increment: h6-counter;
-}
-
-h6::before {
-  content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "." counter(h5-counter) "." counter(h6-counter) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-}
-
-/* TOC numbering to match document headings */
-.toc {
-  counter-reset: toc-h1;
-}
-
-.toc ul {
-  list-style: none;
-}
-
-.toc > ul > li {
-  counter-increment: toc-h1;
-  counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > a::before {
-  content: counter(toc-h1) ". ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-.toc > ul > li > ul > li {
-  counter-increment: toc-h2;
-  counter-reset: toc-h3 toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > ul > li > a::before {
-  content: counter(toc-h1) "." counter(toc-h2) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-.toc > ul > li > ul > li > ul > li {
-  counter-increment: toc-h3;
-  counter-reset: toc-h4 toc-h5 toc-h6;
-}
-
-.toc > ul > li > ul > li > ul > li > a::before {
-  content: counter(toc-h1) "." counter(toc-h2) "." counter(toc-h3) " ";
-  font-weight: bold;
-  color: var(--primary-color);
-  margin-right: 0.25em;
-}
-
-/* Optional: Add some spacing after the numbers */
-h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-  margin-right: 0.5em;
-}
-
-/* Print-specific adjustments */
-@media print {
-  h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-    color: #000 !important; /* Ensure numbers print in black */
-  }
-}
-
-/* Optional: Style adjustments for better visual hierarchy */
-h1 {
-  border-bottom: 2px solid var(--primary-color);
-  padding-bottom: 0.3em;
-  margin-top: 1em;
-}
-
-/* Reduce margin for first heading */
-h1:first-of-type {
-  margin-top: 0.5em;
-}
-
-h2 {
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 0.2em;
-  margin-top: 1.5em;
-}
-
-h3 {
-  margin-top: 1.2em;
-}
-
-h4, h5, h6 {
-  margin-top: 1em;
-}
-
-
-  </style>
-  
-  $for(header-includes)$
-  $header-includes$
-  $endfor$
-</head>
-
-<body>
-  <div class="app-container">
-    $if(toc)$
-    <!-- Sidebar Navigation -->
-    <aside id="sidebar" role="complementary" aria-label="Table of contents">
-      <header class="sidebar-header">
-        <div class="toc-header-row">
-          <div class="sidebar-title">Table Of Contents</div>
-          <div class="toc-level-selector">
-            <select id="toc-level" aria-label="Filter table of contents levels">
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="3" selected>3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-            </select>
-          </div>
-        </div>
-      </header>
-      
-      <div class="toc-container">
-        $if(toc)$
-        <nav class="toc" role="navigation" aria-label="Table of contents">
-          $toc$
-        </nav>
-        $endif$
-      </div>
-    </aside>
-    $endif$
-    <!-- Main Content Area -->
-    <main class="content-wrapper" role="main">
-      <div class="content-page">
-        <!-- Document Header -->
-        <header class="document-header">
-          $if(toc)$
-          <div class="mobile-menu-container">
-            <button class="mobile-menu-toggle" type="button" aria-label="Toggle navigation menu" aria-expanded="false">
-              <span aria-hidden="true">☰</span>
-            </button>
-          </div>
-          $endif$
-          <div class="header-content">
-            $if(client)$$if(project)$
-            <div class="header-line client-project">
-              $client$ - $project$$if(project_number)$ ($project_number$)$endif$
-            </div>
-            $endif$$endif$
-            $if(title)$
-            <div class="document-title">$title$</div>
-            $endif$
-            <div class="document-meta">
-              $if(tracking_number)$<span class="tracking-number">$tracking_number$</span>$endif$
-              $if(revision)$<span class="revision">Revision: $revision$</span>$endif$
-              $if(status)$<span class="status">Status: $status$</span>$endif$
-              $if(revision_comparison)$<span class="revision-comparison">$revision_comparison$</span>$endif$
-            </div>
-            $if(is_draft)$
-            $if(generation_time)$
-            <div class="draft-line">
-              <span class="draft-status">[DRAFT Generated at $generation_time$]</span>
-            </div>
-            $endif$
-            $endif$
-          </div>
-        </header>
-        
-        <!-- Scroll Progress Bar -->
-        <div class="scroll-progress" role="progressbar" aria-label="Reading progress">
-          <div class="scroll-progress-bar"></div>
-        </div>
-        
-        <!-- Print-only header -->
-        <div class="print-header">
-          $if(custom_header)$
-          $custom_header$
-          $else$
-          $if(client)$$if(project)$
-          <div class="header-line client-project">
-            $client$ - $project$$if(project_number)$ ($project_number$)$endif$
-          </div>
-          $endif$$endif$
-          $if(title)$
-          <div class="header-line document-title">$title$</div>
-          $endif$
-          $if(tracking_number)$<div class="header-line">$tracking_number$$if(revision)$ Revision: $revision$$endif$$if(status)$ Status: $status$$endif$</div>$endif$
-          $if(revision_comparison)$<div class="header-line revision-comparison">$revision_comparison$</div>$endif$
-          $endif$
-          $if(generation_time)$
-          <div class="header-line metadata-line draft-line">
-            <span class="draft-status">Generated: $generation_time$</span>
-          </div>
-          $endif$
-        </div>
-
-        <!-- Print-only footer -->
-        <div class="print-footer">
-          <div class="footer-left">
-            $if(tracking_number)$$tracking_number$$endif$$if(revision)$ Revision: $revision$$endif$$if(status)$ Status: $status$$endif$
-          </div>
-          <div class="footer-right">
-            Page <span class="page-number"></span>
-          </div>
-        </div>
-
-
-        <!-- Document Content -->
-        <article class="document-content">
-          $body$
-        </article>
-      </div>
-    </main>
-  </div>
-
-  <!-- Embedded JavaScript -->
-  <script>
-    'use strict';
-
-    // Modern initialization with arrow functions
-    document.addEventListener('DOMContentLoaded', function() {
-      // View mode toggle functionality
-      const buttons = document.querySelectorAll('.view-mode-btn');
-      const body = document.body;
-      
-      buttons.forEach(button => {
-        button.addEventListener('click', function() {
-          const mode = this.dataset.mode;
-          
-          // Remove all view mode classes
-          body.classList.remove('view-original', 'view-final');
-          
-          // Add the selected mode class (except for diff which is default)
-          if (mode === 'original') {
-            body.classList.add('view-original');
-          } else if (mode === 'final') {
-            body.classList.add('view-final');
-          }
-          
-          // Update button states
-          buttons.forEach(btn => btn.classList.remove('active'));
-          this.classList.add('active');
-        });
-      });
-
-      const sidebar = document.getElementById('sidebar');
-      if (sidebar) {
-        initTocNavigation();
-      }
-      
-      // Set default TOC level filtering
-      filterTocLevels('3');
-      
-      // Setup event listeners with delegation
-      setupEventListeners();
-      
-      // Initialize print functionality
-      initPrintSupport();
-    });
-
-    // Modern TOC Navigation with ES6+ patterns
-    function initTocNavigation() {
-      const tocLinks = document.querySelectorAll('.toc a');
-      const contentArea = document.querySelector('.document-content');
-      
-      if (!tocLinks.length || !contentArea) return;
-      
-      // Smooth scroll with event delegation (better performance)
-      function handleTocClick(e) {
-        if (!e.target.matches('.toc a')) return;
-        
-        e.preventDefault();
-        const href = e.target.getAttribute('href');
-        const targetId = href ? href.slice(1) : null;
-        const targetElement = targetId ? document.getElementById(targetId) : null;
-        
-        if (!targetElement) return;
-        
-        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        
-        // Update URL hash without adding to browser history
-        window.location.replace(window.location.pathname + window.location.search + href);
-        
-        // Update active state
-        tocLinks.forEach(link => link.classList.remove('active'));
-        e.target.classList.add('active');
-        
-        // Close mobile menu if open
-        const sidebar = document.getElementById('sidebar');
-        if (sidebar && sidebar.classList.contains('mobile-open')) toggleMobileMenu();
-      };
-      
-      document.addEventListener('click', handleTocClick);
-      
-      // TOC scroll tracking using Intersection Observer API
-      // NOTE: Intersection Observer is the industry-standard, recommended approach for scroll spy
-      // implementations as of 2024. It provides better performance (runs off main thread),
-      // cleaner code, and is supported by all modern browsers. Avoid scroll event listeners
-      // for this use case as they are performance-intensive and require complex calculations.
-      // Find all sections with IDs - much simpler approach
-      const sections = Array.from(contentArea.querySelectorAll('section[id]'));
-      
-      
-      if (sections.length === 0) {
-        return;
-      }
-      
-      function updateActiveTocItem(activeSection) {
-        if (!activeSection || !activeSection.id) return;
-        
-        // Clear all active states
-        tocLinks.forEach(link => link.classList.remove('active'));
-        
-        // Find and activate the matching TOC link
-        const activeLink = document.querySelector('.toc a[href="#' + activeSection.id + '"]');
-        if (!activeLink) return;
-        
-        activeLink.classList.add('active');
-        
-        // Auto-scroll TOC to keep active item visible
-        activeLink.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      };
-      
-      // Create Intersection Observer with industry-standard configuration
-      const observer = new IntersectionObserver(function(entries) {
-        // Find visible sections and update active TOC item
-        const visibleSections = entries.filter(function(entry) { return entry.isIntersecting; });
-        if (visibleSections.length > 0) {
-          // Sort by position in viewport (topmost first)
-          visibleSections.sort(function(a, b) { return a.boundingClientRect.top - b.boundingClientRect.top; });
-          const activeSection = visibleSections[0].target;
-          updateActiveTocItem(activeSection);
-        }
-      }, {
-        root: contentArea,
-        rootMargin: '-20% 0px -60% 0px', // Only consider sections in the middle 20% of viewport
-        threshold: 0.1
-      });
-      
-      // Observe all sections
-      sections.forEach(function(section) { observer.observe(section); });
-      
-      // Scroll progress bar with throttling for better performance
-      const progressBar = document.querySelector('.scroll-progress-bar');
-      if (progressBar) {
-        let ticking = false;
-        
-        function updateScrollProgress() {
-          const scrollTop = contentArea.scrollTop;
-          const scrollHeight = contentArea.scrollHeight;
-          const clientHeight = contentArea.clientHeight;
-          const scrollPercent = scrollHeight > clientHeight 
-            ? (scrollTop / (scrollHeight - clientHeight)) * 100 
-            : 0;
-          progressBar.style.width = Math.min(100, Math.max(0, scrollPercent)) + '%';
-          ticking = false;
-        };
-        
-        function onScroll() {
-          if (!ticking) {
-            requestAnimationFrame(updateScrollProgress);
-            ticking = true;
-          }
-        };
-        
-        contentArea.addEventListener('scroll', onScroll, { passive: true });
-        updateScrollProgress(); // Initial call
-      }
-    };
-
-    // Toggle mobile menu with ARIA support
-    function toggleMobileMenu() {
-      const sidebar = document.getElementById('sidebar');
-      const menuToggle = document.querySelector('.mobile-menu-toggle');
-      
-      if (!sidebar || !menuToggle) return;
-      
-      const isOpen = sidebar.classList.toggle('mobile-open');
-      menuToggle.setAttribute('aria-expanded', isOpen.toString());
-    };
-
-    // Filter TOC levels with modern patterns
-    function filterTocLevels(maxLevel) {
-      const toc = document.querySelector('.toc');
-      if (!toc) return;
-      
-      const allItems = toc.querySelectorAll('li');
-      const maxLevelNum = parseInt(maxLevel);
-      const showAll = maxLevel === '6';
-      
-      allItems.forEach(function(item) {
-        const link = item.querySelector('a');
-        if (!link) return;
-        
-        if (showAll) {
-          item.style.display = '';
-          return;
-        }
-        
-        // Calculate nesting level more efficiently
-        let level = 1;
-        let parent = item.parentElement;
-        while (parent && !parent.classList.contains('toc')) {
-          if (parent.tagName === 'LI') level++;
-          parent = parent.parentElement;
-        }
-        
-        item.style.display = level <= maxLevelNum ? '' : 'none';
-      });
-    };
-
-
-    // Setup event listeners with delegation
-    function setupEventListeners() {
-      // TOC level selector
-      const tocLevelSelect = document.getElementById('toc-level');
-      if (tocLevelSelect) tocLevelSelect.addEventListener('change', function(e) {
-        filterTocLevels(e.target.value);
-      });
-      
-      // Mobile menu toggle
-      const menuToggle = document.querySelector('.mobile-menu-toggle');
-      if (menuToggle) menuToggle.addEventListener('click', toggleMobileMenu);
-      
-      // Close mobile menu on outside click
-      document.addEventListener('click', function(e) {
-        const sidebar = document.getElementById('sidebar');
-        const menuToggle = document.querySelector('.mobile-menu-toggle');
-        
-        if (sidebar && sidebar.classList.contains('mobile-open') && 
-            !sidebar.contains(e.target) && 
-            (!menuToggle || !menuToggle.contains(e.target))) {
-          toggleMobileMenu();
-        }
-      });
-      
-      // Handle escape key to close mobile menu
-      document.addEventListener('keydown', function(e) {
-        if (e.key === 'Escape') {
-          const sidebar = document.getElementById('sidebar');
-          if (sidebar && sidebar.classList.contains('mobile-open')) {
-            toggleMobileMenu();
-          }
-        }
-      });
-    };
-
-    // Initialize print support and draft status
-    function initPrintSupport() {
-      // Handle draft status for revisions containing tilde (~)
-      const revision = document.querySelector('meta[name="revision"]');
-      const generationTime = document.querySelector('meta[name="generation_time"]');
-      
-      if (revision && generationTime) {
-        const revisionValue = revision.getAttribute('content');
-        const timeValue = generationTime.getAttribute('content');
-        
-        if (revisionValue && revisionValue.includes('~') && timeValue) {
-          const draftElements = document.querySelectorAll('.draft-status');
-          draftElements.forEach(function(element) {
-            element.textContent = ' [DRAFT Generated at ' + timeValue + ']';
-          });
-        }
-      }
-    }
-
-    // Export functions for global access (maintaining backward compatibility)
-    window.toggleMobileMenu = toggleMobileMenu;
-    window.filterTocLevels = filterTocLevels;
-  </script>
-</body>
-</html>