From 2cdfaa52cd88532f61a61d948a2470f4e011ccfa Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sun, 30 Nov 2025 02:15:36 -0500
Subject: [PATCH] Redesign offline page with cleaner layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Centered hero section with status badge
- Prominent status card with icon
- Clean download section with gradient background
- Quick access grid with larger icon cards
- Improved Bible reader section with styled controls
- Technical details collapsed by default
- Simplified cached URL list (limit 500 per category)
- Cleaner, more modern styling throughout
- Better dark mode support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/offline.html | 1336 ++++++++++-----------------
 1 file changed, 480 insertions(+), 856 deletions(-)

diff --git a/kjvstudy_org/templates/offline.html b/kjvstudy_org/templates/offline.html
index 6c353f3..8f65742 100644
--- a/kjvstudy_org/templates/offline.html
+++ b/kjvstudy_org/templates/offline.html
@@ -4,269 +4,352 @@
 
 {% block extra_head %}
 <style>
+    .offline-hero {
+        text-align: center;
+        padding: 2rem 0;
+        margin-bottom: 2rem;
+        border-bottom: 1px solid var(--border-color, #ddd);
+    }
+    .offline-hero h1 {
+        margin: 0 0 0.5rem 0;
+        font-size: 2.5rem;
+    }
+    .offline-hero .subtitle {
+        font-size: 1.1rem;
+        color: var(--text-secondary, #666);
+        margin: 0;
+    }
     .badge {
         display: inline-block;
-        padding: 0.25rem 0.5rem;
-        border-radius: 4px;
+        padding: 0.25rem 0.75rem;
+        border-radius: 20px;
         font-size: 0.8rem;
-        margin-left: 0.5rem;
+        font-weight: 600;
+        margin-left: 0.75rem;
         vertical-align: middle;
     }
     .badge-offline { background: var(--error-color, #c41e3a); color: white; }
     .badge-online { background: var(--success-color, #4a7c59); color: white; }
-    .debug-section {
-        background: var(--border-color, #ddd);
-        padding: 1rem;
-        border-radius: 4px;
-        margin: 1rem 0;
-        font-family: monospace;
-        font-size: 0.85rem;
-    }
-    .debug-section dt { font-weight: bold; margin-top: 0.5rem; }
-    .debug-section dd { margin-left: 1rem; color: var(--text-secondary, #666); }
-    .status-ok { color: var(--success-color, #4a7c59); }
-    .status-error { color: var(--error-color, #c41e3a); }
-    .nav-section {
-        display: flex;
-        gap: 1rem;
-        margin: 2rem 0;
-        flex-wrap: wrap;
-        align-items: center;
-    }
-    .nav-section select {
-        padding: 0.5rem;
-        font-size: 1rem;
-        border: 1px solid var(--border-color, #ddd);
-        border-radius: 4px;
-        background: var(--bg-color, #fffff8);
-        color: var(--text-color, #111);
-        font-family: inherit;
-    }
-    .chapter-nav {
-        display: flex;
-        gap: 0.5rem;
-    }
-    .nav-btn {
-        padding: 0.5rem 1rem;
-        border: 1px solid var(--border-color, #ddd);
-        border-radius: 4px;
-        background: var(--bg-color, #fffff8);
-        color: var(--text-color, #111);
-        cursor: pointer;
-        font-size: 1rem;
-    }
-    .nav-btn:hover { background: var(--border-color, #ddd); }
-    .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    #chapter-content {
-        line-height: 2;
-        font-size: 1.2rem;
-        display: none;
-    }
-    #chapter-content.active {
-        display: block;
-    }
-    #chapter-content p {
-        margin: 1rem 0;
-    }
-    .verse-num {
-        font-size: 0.9rem;
-        vertical-align: super;
-        margin-right: 0.25rem;
-        color: var(--text-secondary, #666);
-    }
-    .loading {
-        text-align: center;
-        padding: 2rem;
-        color: var(--text-secondary, #666);
-    }
-    #keyboard-hint {
-        font-size: 0.85rem;
-        color: var(--text-secondary, #666);
-        margin-top: 1rem;
-        font-style: italic;
-    }
-    #cached-count {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: var(--success-color, #4a7c59);
-    }
-    .cache-controls {
-        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-        padding: 1.5rem;
-        border-radius: 8px;
-        margin: 1.5rem 0;
-        border: 1px solid #bae6fd;
-    }
-    [data-theme="dark"] .cache-controls {
-        background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
-        border-color: #334155;
-    }
-    .cache-controls h3 {
-        margin: 0 0 0.5rem 0;
-        color: var(--text-color, #111);
-    }
-    .cache-controls p {
-        margin: 0 0 1rem 0;
-        color: var(--text-secondary, #666);
-        font-size: 0.95rem;
-    }
-    .cache-btn {
-        padding: 0.75rem 1.5rem;
-        font-size: 1rem;
-        font-weight: 600;
-        border: none;
-        border-radius: 6px;
-        background: var(--success-color, #4a7c59);
-        color: white;
-        cursor: pointer;
-        transition: all 0.2s;
-    }
-    .cache-btn:hover {
-        filter: brightness(1.1);
-        transform: translateY(-1px);
-    }
-    .cache-btn:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        transform: none;
-    }
-    .cache-progress {
-        margin-top: 1rem;
-        display: none;
-    }
-    .cache-progress.active {
-        display: block;
-    }
-    .progress-bar {
-        width: 100%;
-        height: 8px;
-        background: var(--border-color, #ddd);
-        border-radius: 4px;
-        overflow: hidden;
-        margin-bottom: 0.5rem;
-    }
-    .progress-fill {
-        height: 100%;
-        background: var(--success-color, #4a7c59);
-        width: 0%;
-        transition: width 0.3s ease;
-    }
-    .progress-text {
-        font-size: 0.85rem;
-        color: var(--text-secondary, #666);
-    }
-    .cache-complete {
-        color: var(--success-color, #4a7c59);
-        font-weight: 600;
-    }
+
+    /* Status Card */
     .status-card {
         display: flex;
-        align-items: flex-start;
-        gap: 1rem;
-        padding: 1.25rem;
-        border-radius: 8px;
-        margin-bottom: 1.5rem;
-        border: 1px solid var(--border-color, #ddd);
+        align-items: center;
+        gap: 1.5rem;
+        padding: 1.5rem 2rem;
+        border-radius: 12px;
+        margin-bottom: 2rem;
         background: var(--bg-color, #fffff8);
+        border: 2px solid var(--border-color, #ddd);
     }
     .status-card.status-ok {
         border-color: var(--success-color, #4a7c59);
         background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
     }
-    .status-card.status-error {
-        border-color: var(--error-color, #c41e3a);
-        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
-    }
     .status-card.status-warning {
         border-color: #f59e0b;
         background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
     }
+    .status-card.status-error {
+        border-color: var(--error-color, #c41e3a);
+        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
+    }
     [data-theme="dark"] .status-card.status-ok {
         background: linear-gradient(135deg, #14532d 0%, #166534 100%);
     }
-    [data-theme="dark"] .status-card.status-error {
-        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
-    }
     [data-theme="dark"] .status-card.status-warning {
         background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
     }
+    [data-theme="dark"] .status-card.status-error {
+        background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
+    }
     .status-icon {
-        font-size: 2rem;
+        font-size: 3rem;
         line-height: 1;
     }
     .status-content {
         flex: 1;
     }
     .status-title {
-        font-weight: 600;
-        font-size: 1.1rem;
+        font-weight: 700;
+        font-size: 1.25rem;
         margin-bottom: 0.25rem;
     }
     .status-detail {
         color: var(--text-secondary, #666);
-        font-size: 0.9rem;
+        font-size: 0.95rem;
         line-height: 1.5;
     }
     .status-detail code {
         background: rgba(0,0,0,0.1);
-        padding: 0.1rem 0.3rem;
-        border-radius: 3px;
+        padding: 0.1rem 0.4rem;
+        border-radius: 4px;
         font-size: 0.85em;
     }
     [data-theme="dark"] .status-detail code {
         background: rgba(255,255,255,0.1);
     }
-    .quick-links {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 1rem;
-        margin: 1.5rem 0;
+
+    /* Download Section */
+    .download-section {
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+        padding: 2rem;
+        border-radius: 12px;
+        margin-bottom: 2rem;
+        border: 1px solid var(--border-color, #ddd);
     }
-    .quick-link {
-        display: flex;
+    [data-theme="dark"] .download-section {
+        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+    }
+    .download-section h2 {
+        margin: 0 0 0.5rem 0;
+        font-size: 1.5rem;
+    }
+    .download-section p {
+        margin: 0 0 1.5rem 0;
+        color: var(--text-secondary, #666);
+    }
+    .download-btn {
+        display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        padding: 1rem;
+        padding: 1rem 2rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        border: none;
+        border-radius: 8px;
+        background: var(--success-color, #4a7c59);
+        color: white;
+        cursor: pointer;
+        transition: all 0.2s;
+    }
+    .download-btn:hover {
+        filter: brightness(1.1);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
+    }
+    .download-btn:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+        transform: none;
+        box-shadow: none;
+    }
+    .download-progress {
+        margin-top: 1.5rem;
+        display: none;
+    }
+    .download-progress.active {
+        display: block;
+    }
+    .progress-bar {
+        width: 100%;
+        height: 12px;
+        background: var(--border-color, #ddd);
+        border-radius: 6px;
+        overflow: hidden;
+        margin-bottom: 0.75rem;
+    }
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, var(--success-color, #4a7c59) 0%, #6aa87a 100%);
+        width: 0%;
+        transition: width 0.3s ease;
+        border-radius: 6px;
+    }
+    .progress-text {
+        font-size: 0.9rem;
+        color: var(--text-secondary, #666);
+    }
+    .cache-complete {
+        color: var(--success-color, #4a7c59);
+        font-weight: 600;
+    }
+
+    /* Quick Access Grid */
+    .quick-access {
+        margin-bottom: 2rem;
+    }
+    .quick-access h2 {
+        margin: 0 0 1rem 0;
+    }
+    .quick-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 1rem;
+    }
+    .quick-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1.25rem;
         background: var(--bg-color, #fffff8);
         border: 1px solid var(--border-color, #ddd);
-        border-radius: 8px;
+        border-radius: 12px;
         text-decoration: none;
         color: var(--text-color, #111);
+        transition: all 0.2s;
+    }
+    .quick-card:hover {
+        border-color: var(--success-color, #4a7c59);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+    }
+    .quick-card-icon {
+        font-size: 2rem;
+    }
+    .quick-card-label {
+        font-weight: 600;
+        font-size: 1rem;
+    }
+
+    /* Bible Reader */
+    .reader-section {
+        background: var(--bg-color, #fffff8);
+        border: 1px solid var(--border-color, #ddd);
+        border-radius: 12px;
+        padding: 2rem;
+        margin-bottom: 2rem;
+    }
+    .reader-section h2 {
+        margin: 0 0 0.5rem 0;
+    }
+    .reader-section > p {
+        margin: 0 0 1.5rem 0;
+        color: var(--text-secondary, #666);
+    }
+    .reader-controls {
+        display: flex;
+        gap: 1rem;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 1.5rem;
+    }
+    .reader-controls select {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+        border: 2px solid var(--border-color, #ddd);
+        border-radius: 8px;
+        background: var(--bg-color, #fffff8);
+        color: var(--text-color, #111);
+        font-family: inherit;
+        cursor: pointer;
+    }
+    .reader-controls select:focus {
+        outline: none;
+        border-color: var(--success-color, #4a7c59);
+    }
+    .nav-buttons {
+        display: flex;
+        gap: 0.5rem;
+    }
+    .nav-btn {
+        padding: 0.75rem 1.25rem;
+        border: 2px solid var(--border-color, #ddd);
+        border-radius: 8px;
+        background: var(--bg-color, #fffff8);
+        color: var(--text-color, #111);
+        cursor: pointer;
+        font-size: 1rem;
         font-weight: 500;
         transition: all 0.2s;
     }
-    .quick-link:hover {
+    .nav-btn:hover:not(:disabled) {
         border-color: var(--success-color, #4a7c59);
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        background: var(--success-color, #4a7c59);
+        color: white;
     }
-    .debug-details {
-        margin-top: 3rem;
-        padding-top: 2rem;
+    .nav-btn:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+    #chapter-content {
+        display: none;
+        line-height: 2;
+        font-size: 1.15rem;
+    }
+    #chapter-content.active {
+        display: block;
+    }
+    #chapter-content h3 {
+        margin: 0 0 1rem 0;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--border-color, #ddd);
+    }
+    #chapter-content p {
+        margin: 0.75rem 0;
+    }
+    .verse-num {
+        font-size: 0.8rem;
+        vertical-align: super;
+        margin-right: 0.25rem;
+        color: var(--success-color, #4a7c59);
+        font-weight: 600;
+    }
+    .keyboard-hint {
+        font-size: 0.85rem;
+        color: var(--text-secondary, #666);
+        margin-top: 1rem;
+        padding-top: 1rem;
         border-top: 1px solid var(--border-color, #ddd);
     }
-    .debug-details summary {
+
+    /* Technical Details */
+    .tech-details {
+        margin-top: 3rem;
+    }
+    .tech-details summary {
         cursor: pointer;
         color: var(--text-secondary, #666);
         font-size: 0.9rem;
-        padding: 0.5rem 0;
+        padding: 0.75rem 0;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
-    .debug-details summary:hover {
+    .tech-details summary:hover {
         color: var(--text-color, #111);
     }
-    .debug-details h3 {
-        margin-top: 1.5rem;
+    .tech-details[open] summary {
+        margin-bottom: 1rem;
+    }
+    .tech-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 1rem;
+        margin-bottom: 2rem;
+    }
+    .tech-item {
+        background: var(--border-color, #ddd);
+        padding: 1rem;
+        border-radius: 8px;
+    }
+    .tech-item dt {
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: var(--text-secondary, #666);
+        margin-bottom: 0.25rem;
+    }
+    .tech-item dd {
+        margin: 0;
+        font-size: 0.95rem;
+    }
+    .status-ok { color: var(--success-color, #4a7c59); }
+    .status-error { color: var(--error-color, #c41e3a); }
+
+    /* Cached URLs */
+    .cached-section h3 {
         font-size: 1rem;
         color: var(--text-secondary, #666);
+        margin: 1.5rem 0 0.75rem 0;
     }
-    /* Collapsible URL sections */
     .url-categories {
-        margin: 1rem 0;
+        margin: 0;
     }
     .url-category {
         margin-bottom: 0.5rem;
         border: 1px solid var(--border-color, #ddd);
-        border-radius: 6px;
+        border-radius: 8px;
         overflow: hidden;
     }
     .url-category-header {
@@ -278,6 +361,7 @@
         cursor: pointer;
         user-select: none;
         font-weight: 500;
+        font-size: 0.95rem;
     }
     .url-category-header:hover {
         background: var(--text-secondary, #666);
@@ -288,7 +372,7 @@
         outline-offset: -2px;
     }
     .url-category-toggle {
-        font-size: 0.8rem;
+        font-size: 0.75rem;
         transition: transform 0.2s;
     }
     .url-category.expanded .url-category-toggle {
@@ -296,7 +380,7 @@
     }
     .url-category-content {
         display: none;
-        max-height: 400px;
+        max-height: 300px;
         overflow-y: auto;
         padding: 0.5rem;
         background: var(--bg-color, #fffff8);
@@ -309,7 +393,7 @@
         padding: 0.4rem 0.75rem;
         color: var(--link-color, #333);
         text-decoration: none;
-        font-size: 0.9rem;
+        font-size: 0.85rem;
         border-radius: 4px;
     }
     .url-item:hover {
@@ -324,32 +408,30 @@
         color: var(--text-secondary, #666);
         font-weight: normal;
     }
-    .url-nav-hint {
-        font-size: 0.8rem;
-        color: var(--text-secondary, #666);
-        margin-top: 0.5rem;
-        font-style: italic;
-    }
 </style>
 {% endblock %}
 
 {% block content %}
-<h1>Offline Mode <span class="badge" id="connection-badge">checking...</span></h1>
-<p class="subtitle">KJV Study - Available without internet</p>
+<div class="offline-hero">
+    <h1>Offline Mode <span class="badge" id="connection-badge">checking...</span></h1>
+    <p class="subtitle">Access the complete KJV Bible without internet</p>
+</div>
 
 <div class="status-card" id="status-card">
     <div class="status-icon" id="status-icon">⏳</div>
     <div class="status-content">
-        <div class="status-title" id="status-title">Checking service worker...</div>
+        <div class="status-title" id="status-title">Checking status...</div>
         <div class="status-detail" id="status-detail">Please wait</div>
     </div>
 </div>
 
-<div class="cache-controls">
-    <h3>Enable Offline Access</h3>
-    <p>Download the entire site for offline use: all Bible chapters, individual verse pages with commentary, stories, study guides, and resources. The sitemap will be parsed to find all available pages.</p>
-    <button class="cache-btn" id="start-cache-btn">Download for Offline Use</button>
-    <div class="cache-progress" id="cache-progress">
+<div class="download-section">
+    <h2>Download for Offline</h2>
+    <p>Download all ~48,000 pages including chapters, verse commentary, interlinear text, stories, and study resources.</p>
+    <button class="download-btn" id="start-cache-btn">
+        <span>Download Everything</span>
+    </button>
+    <div class="download-progress" id="cache-progress">
         <div class="progress-bar">
             <div class="progress-fill" id="progress-fill"></div>
         </div>
@@ -357,56 +439,80 @@
     </div>
 </div>
 
-<h2>Quick Access</h2>
-<p>Jump directly to commonly used sections:</p>
-<div class="quick-links">
-    <a href="/books" class="quick-link">📖 All Books</a>
-    <a href="/stories" class="quick-link">📚 Bible Stories</a>
-    <a href="/topics" class="quick-link">🏷️ Topics</a>
-    <a href="/reading-plans" class="quick-link">📅 Reading Plans</a>
-    <a href="/study-guides" class="quick-link">📝 Study Guides</a>
-    <a href="/resources" class="quick-link">📂 Resources</a>
-</div>
-
-<h2>Bible Reader</h2>
-<p>Read any chapter using cached Bible data (works even without any downloads):</p>
-<div class="nav-section">
-    <select id="book-select">
-        <option value="">Select a book...</option>
-    </select>
-    <select id="chapter-select" disabled>
-        <option value="">Chapter</option>
-    </select>
-    <div class="chapter-nav">
-        <button class="nav-btn" id="prev-btn" disabled>← Prev</button>
-        <button class="nav-btn" id="next-btn" disabled>Next →</button>
+<div class="quick-access">
+    <h2>Quick Access</h2>
+    <div class="quick-grid">
+        <a href="/books" class="quick-card">
+            <span class="quick-card-icon">📖</span>
+            <span class="quick-card-label">All Books</span>
+        </a>
+        <a href="/stories" class="quick-card">
+            <span class="quick-card-icon">📚</span>
+            <span class="quick-card-label">Stories</span>
+        </a>
+        <a href="/topics" class="quick-card">
+            <span class="quick-card-icon">🏷️</span>
+            <span class="quick-card-label">Topics</span>
+        </a>
+        <a href="/reading-plans" class="quick-card">
+            <span class="quick-card-icon">📅</span>
+            <span class="quick-card-label">Reading Plans</span>
+        </a>
+        <a href="/study-guides" class="quick-card">
+            <span class="quick-card-icon">📝</span>
+            <span class="quick-card-label">Study Guides</span>
+        </a>
+        <a href="/resources" class="quick-card">
+            <span class="quick-card-icon">📂</span>
+            <span class="quick-card-label">Resources</span>
+        </a>
     </div>
 </div>
 
-<div id="chapter-content">
-    <p class="loading">Select a book and chapter above...</p>
+<div class="reader-section">
+    <h2>Bible Reader</h2>
+    <p>Read directly from cached data (always works offline)</p>
+    <div class="reader-controls">
+        <select id="book-select">
+            <option value="">Select book...</option>
+        </select>
+        <select id="chapter-select" disabled>
+            <option value="">Chapter</option>
+        </select>
+        <div class="nav-buttons">
+            <button class="nav-btn" id="prev-btn" disabled>← Prev</button>
+            <button class="nav-btn" id="next-btn" disabled>Next →</button>
+        </div>
+    </div>
+    <div id="chapter-content"></div>
+    <p class="keyboard-hint">Keyboard: ←/→ navigate chapters • g = Genesis 1 • ? = help</p>
 </div>
 
-<p id="keyboard-hint">Tip: j/k to select • ←/→ chapters • Enter to open • g=Genesis • ? for help</p>
-
-<details class="debug-details">
+<details class="tech-details">
     <summary>Technical Details</summary>
-    <div class="debug-section">
-        <dl>
+    <div class="tech-grid">
+        <div class="tech-item">
             <dt>Service Worker</dt>
             <dd id="sw-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
             <dt>Cache Storage</dt>
             <dd id="cache-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
             <dt>Bible Data</dt>
             <dd id="bible-status">Checking...</dd>
+        </div>
+        <div class="tech-item">
             <dt>Pages Cached</dt>
             <dd id="pages-cached">Checking...</dd>
-        </dl>
+        </div>
     </div>
-    <h3>Cached Pages <span id="cached-count">0</span></h3>
-    <p class="url-nav-hint">Use j/k to navigate categories, Enter/Space to expand, then j/k to browse URLs</p>
-    <div id="cached-links" class="url-categories">
-        <p class="loading">Scanning cache...</p>
+    <div class="cached-section">
+        <h3>Cached Pages <span id="cached-count" style="color: var(--success-color);">0</span></h3>
+        <div id="cached-links" class="url-categories">
+            <p style="color: var(--text-secondary); font-size: 0.9rem;">Scanning cache...</p>
+        </div>
     </div>
 </details>
 {% endblock %}
@@ -414,7 +520,6 @@
 {% block extra_js %}
 <script>
 (function() {
-    // Debug elements
     const connectionBadge = document.getElementById('connection-badge');
     const swStatus = document.getElementById('sw-status');
     const cacheStatus = document.getElementById('cache-status');
@@ -422,8 +527,6 @@
     const pagesCached = document.getElementById('pages-cached');
     const cachedLinks = document.getElementById('cached-links');
     const cachedCount = document.getElementById('cached-count');
-
-    // Status card elements
     const statusCard = document.getElementById('status-card');
     const statusIcon = document.getElementById('status-icon');
     const statusTitle = document.getElementById('status-title');
@@ -436,7 +539,6 @@
         statusDetail.innerHTML = detail;
     }
 
-    // Update connection status
     function updateConnectionStatus() {
         if (navigator.onLine) {
             connectionBadge.textContent = 'Online';
@@ -450,19 +552,13 @@
     window.addEventListener('online', updateConnectionStatus);
     window.addEventListener('offline', updateConnectionStatus);
 
-    // Check service worker status
     async function checkServiceWorker() {
         if ('serviceWorker' in navigator) {
             try {
                 const registration = await navigator.serviceWorker.getRegistration();
                 if (registration && registration.active) {
-                    const state = registration.active ? 'Active' :
-                                 registration.waiting ? 'Waiting' :
-                                 registration.installing ? 'Installing' : 'Unknown';
-                    swStatus.innerHTML = '<span class="status-ok">✓ Registered (' + state + ')</span>';
-                    swStatus.innerHTML += '<br>Scope: ' + registration.scope;
+                    swStatus.innerHTML = '<span class="status-ok">✓ Active</span>';
 
-                    // Check how many pages are cached
                     const cacheNames = await caches.keys();
                     let totalCached = 0;
                     for (const cacheName of cacheNames) {
@@ -471,60 +567,42 @@
                         totalCached += keys.filter(req => !new URL(req.url).pathname.startsWith('/static/')).length;
                     }
 
-                    // Total pages in sitemap: ~48,000 (17k main + 31k verses)
                     const TOTAL_SITE_PAGES = 48000;
                     const percentCached = Math.round((totalCached / TOTAL_SITE_PAGES) * 100);
 
                     if (totalCached > 45000) {
                         updateStatusCard('ok', '✅', 'Ready for offline use',
-                            totalCached.toLocaleString() + ' pages cached (' + percentCached + '%). The entire site is available offline.');
+                            '<strong>' + totalCached.toLocaleString() + '</strong> pages cached. The entire site is available offline.');
                     } else if (totalCached > 0) {
-                        updateStatusCard('warning', '⚠️', 'Partially cached (' + percentCached + '%)',
-                            totalCached.toLocaleString() + ' of ~' + TOTAL_SITE_PAGES.toLocaleString() + ' pages cached. Click "Download for Offline Use" to finish downloading.');
+                        updateStatusCard('warning', '📥', 'Partially cached (' + percentCached + '%)',
+                            totalCached.toLocaleString() + ' of ' + TOTAL_SITE_PAGES.toLocaleString() + ' pages. Click download to continue.');
                     } else {
-                        updateStatusCard('warning', '📥', 'Service worker ready',
-                            'Click "Download for Offline Use" below to cache all ~' + TOTAL_SITE_PAGES.toLocaleString() + ' pages for offline access.');
+                        updateStatusCard('warning', '📥', 'Ready to download',
+                            'Click the download button to cache all ' + TOTAL_SITE_PAGES.toLocaleString() + ' pages for offline access.');
                     }
-                } else if (registration) {
-                    swStatus.innerHTML = '<span class="status-ok">✓ Registered (Installing)</span>';
-                    updateStatusCard('warning', '⏳', 'Service worker installing...',
-                        'Please wait a moment and refresh the page.');
                 } else {
-                    swStatus.innerHTML = '<span class="status-error">✗ Not registered</span>';
-                    swStatus.innerHTML += '<br>Try refreshing the page or check if content blockers are blocking it.';
-                    updateStatusCard('error', '🚫', 'Service worker not registered',
-                        'This could be caused by a content blocker or privacy extension. ' +
-                        'Try:<br>• Disabling ad blockers for this site<br>' +
-                        '• Checking browser privacy settings<br>' +
-                        '• Using a different browser<br>' +
-                        '• Making sure you\'re on <code>https://</code> or <code>localhost</code>');
+                    swStatus.innerHTML = '<span class="status-error">✗ Not active</span>';
+                    updateStatusCard('error', '⚠️', 'Service worker not active',
+                        'Try refreshing the page. If using a content blocker, you may need to whitelist this site.');
                 }
             } catch (err) {
-                swStatus.innerHTML = '<span class="status-error">✗ Error: ' + err.message + '</span>';
-                updateStatusCard('error', '❌', 'Error checking service worker',
-                    'Error: ' + err.message + '<br>Try refreshing the page.');
+                swStatus.innerHTML = '<span class="status-error">✗ Error</span>';
+                updateStatusCard('error', '❌', 'Error', err.message);
             }
         } else {
-            swStatus.innerHTML = '<span class="status-error">✗ Not supported in this browser</span>';
-            updateStatusCard('error', '🌐', 'Service workers not supported',
-                'Your browser doesn\'t support service workers. ' +
-                'Try using a modern browser like Chrome, Firefox, Safari, or Edge.');
+            swStatus.innerHTML = '<span class="status-error">✗ Not supported</span>';
+            updateStatusCard('error', '🌐', 'Not supported', 'Your browser does not support service workers.');
         }
     }
 
-    // Check cache status and list cached pages
     async function checkCaches() {
         if ('caches' in window) {
             try {
                 const cacheNames = await caches.keys();
-                if (cacheNames.length > 0) {
-                    cacheStatus.innerHTML = '<span class="status-ok">✓ Available</span>';
-                    cacheStatus.innerHTML += '<br>Caches: ' + cacheNames.join(', ');
-                } else {
-                    cacheStatus.innerHTML = '<span class="status-error">✗ No caches found</span>';
-                }
+                cacheStatus.innerHTML = cacheNames.length > 0 ?
+                    '<span class="status-ok">✓ ' + cacheNames.length + ' cache(s)</span>' :
+                    '<span class="status-error">✗ Empty</span>';
 
-                // List all cached URLs
                 const allUrls = [];
                 for (const cacheName of cacheNames) {
                     const cache = await caches.open(cacheName);
@@ -537,24 +615,14 @@
                     });
                 }
 
-                // Remove duplicates and sort
                 const uniqueUrls = [...new Set(allUrls)].sort();
-                pagesCached.innerHTML = '<span class="status-ok">' + uniqueUrls.length + ' pages</span>';
-                cachedCount.textContent = uniqueUrls.length;
+                pagesCached.innerHTML = '<span class="status-ok">' + uniqueUrls.length.toLocaleString() + '</span>';
+                cachedCount.textContent = uniqueUrls.length.toLocaleString();
 
-                // Group by category with better organization
                 const categories = {
-                    'Main Pages': [],
-                    'Bible Chapters': [],
-                    'Verse Commentary': [],
-                    'Interlinear': [],
-                    'Stories': [],
-                    'Topics': [],
-                    'Study Guides': [],
-                    'Reading Plans': [],
-                    'Parables': [],
-                    'Resources': [],
-                    'Other': []
+                    'Main Pages': [], 'Bible Chapters': [], 'Verse Commentary': [],
+                    'Interlinear': [], 'Stories': [], 'Topics': [],
+                    'Study Guides': [], 'Reading Plans': [], 'Resources': [], 'Other': []
                 };
 
                 uniqueUrls.forEach(url => {
@@ -576,73 +644,47 @@
                         categories['Study Guides'].push(url);
                     } else if (url.startsWith('/reading-plans/')) {
                         categories['Reading Plans'].push(url);
-                    } else if (url.startsWith('/parables/')) {
-                        categories['Parables'].push(url);
-                    } else if (url.match(/^\/(christology|names-of-god|biblical-|fruits-|messianic-|miracles-|prayers-|spirits-|types-|women-|ten-|the-twelve|trinity|worship|grace|eschatology|ecclesiology|soteriology|pneumatology|hamartiology|anthropology|bibliology|theology-proper|justification|sanctification|providence|kingdom-of-god|law-and-gospel|armor-of-god|beatitudes|i-am-statements|names-of-christ|personifications|tetragrammaton|blood-in-scripture)/)) {
-                        categories['Resources'].push(url);
                     } else {
                         categories['Other'].push(url);
                     }
                 });
 
-                // Helper to format URL for display (decode %20, clean up path)
-                function formatUrlLabel(url) {
+                function formatLabel(url) {
                     if (url === '/') return 'Home';
-                    // Decode URL encoding (%20 -> space, etc)
-                    let label = decodeURIComponent(url);
-                    // Remove leading slash
-                    label = label.replace(/^\//, '');
-                    // Replace dashes with spaces
-                    label = label.replace(/-/g, ' ');
-                    // For verse URLs, make them prettier
-                    label = label.replace(/^book\//, '');
-                    label = label.replace(/^interlinear\//, '');
-                    label = label.replace(/^stories\//, '');
-                    label = label.replace(/^topics\//, '');
-                    label = label.replace(/^study guides\//, '');
-                    label = label.replace(/^reading plans\//, '');
-                    label = label.replace(/^parables\//, '');
+                    let label = decodeURIComponent(url).replace(/^\//, '').replace(/-/g, ' ');
+                    ['book/', 'interlinear/', 'stories/', 'topics/', 'study-guides/', 'reading-plans/'].forEach(p => {
+                        label = label.replace(p.replace('-', ' '), '');
+                    });
                     return label;
                 }
 
-                // Render collapsible categories
                 let html = '';
-                let categoryIndex = 0;
                 for (const [category, urls] of Object.entries(categories)) {
                     if (urls.length > 0) {
-                        html += '<div class="url-category" data-category-index="' + categoryIndex + '">';
-                        html += '<div class="url-category-header" onclick="toggleCategory(this.parentNode)">';
+                        html += '<div class="url-category">';
+                        html += '<div class="url-category-header" onclick="this.parentNode.classList.toggle(\'expanded\')">';
                         html += '<span>' + category + ' <span class="url-count">(' + urls.length.toLocaleString() + ')</span></span>';
                         html += '<span class="url-category-toggle">▶</span>';
                         html += '</div>';
                         html += '<div class="url-category-content">';
-                        urls.forEach((url, i) => {
-                            const label = formatUrlLabel(url);
-                            html += '<a href="' + url + '" class="url-item" data-url-index="' + i + '">' + label + '</a>';
+                        urls.slice(0, 500).forEach(url => {
+                            html += '<a href="' + url + '" class="url-item">' + formatLabel(url) + '</a>';
                         });
-                        html += '</div>';
-                        html += '</div>';
-                        categoryIndex++;
+                        if (urls.length > 500) {
+                            html += '<div style="padding: 0.5rem; color: var(--text-secondary); font-size: 0.85rem;">...and ' + (urls.length - 500).toLocaleString() + ' more</div>';
+                        }
+                        html += '</div></div>';
                     }
                 }
-                cachedLinks.innerHTML = html || '<p>No pages cached yet. Browse the site while online to cache pages.</p>';
-
-                // Initialize URL navigation
-                initUrlNavigation();
-
+                cachedLinks.innerHTML = html || '<p style="color: var(--text-secondary);">No pages cached yet.</p>';
             } catch (err) {
-                cacheStatus.innerHTML = '<span class="status-error">✗ Error: ' + err.message + '</span>';
-                cachedLinks.innerHTML = '<p class="status-error">Could not read cache.</p>';
+                cacheStatus.innerHTML = '<span class="status-error">✗ Error</span>';
             }
-        } else {
-            cacheStatus.innerHTML = '<span class="status-error">✗ Not supported</span>';
         }
     }
 
-    // Check Bible data
     async function checkBibleData() {
         try {
-            // Try cache first
             let found = false;
             const cacheNames = await caches.keys();
             for (const cacheName of cacheNames) {
@@ -650,118 +692,71 @@
                 const response = await cache.match('/static/verses-1769.json');
                 if (response) {
                     const data = await response.json();
-                    const verseCount = Object.keys(data).length;
-                    bibleStatus.innerHTML = '<span class="status-ok">✓ Cached (' + verseCount.toLocaleString() + ' verses)</span>';
+                    bibleStatus.innerHTML = '<span class="status-ok">✓ ' + Object.keys(data).length.toLocaleString() + ' verses</span>';
                     found = true;
                     break;
                 }
             }
             if (!found) {
                 bibleStatus.innerHTML = '<span class="status-error">✗ Not cached</span>';
-                bibleStatus.innerHTML += '<br>Visit the site while online to cache Bible data.';
             }
         } catch (err) {
-            bibleStatus.innerHTML = '<span class="status-error">✗ Error: ' + err.message + '</span>';
+            bibleStatus.innerHTML = '<span class="status-error">✗ Error</span>';
         }
     }
 
-    // Run all checks
     checkServiceWorker();
     checkCaches();
     checkBibleData();
 
-    // Cache controls
+    // Download controls
     const startCacheBtn = document.getElementById('start-cache-btn');
     const cacheProgress = document.getElementById('cache-progress');
     const progressFill = document.getElementById('progress-fill');
     const progressText = document.getElementById('progress-text');
 
     startCacheBtn.addEventListener('click', async function() {
-        if (!('serviceWorker' in navigator)) {
-            alert('Service workers are not supported in this browser.');
-            return;
-        }
-
+        if (!('serviceWorker' in navigator)) return alert('Service workers not supported.');
         const registration = await navigator.serviceWorker.getRegistration();
-        if (!registration || !registration.active) {
-            alert('Service worker is not active. Please refresh the page and try again.');
-            return;
-        }
+        if (!registration || !registration.active) return alert('Service worker not active. Refresh and try again.');
 
-        // Disable button and show progress
         startCacheBtn.disabled = true;
-        startCacheBtn.textContent = 'Downloading...';
+        startCacheBtn.querySelector('span').textContent = 'Downloading...';
         cacheProgress.classList.add('active');
-        progressText.textContent = 'Starting download...';
-
-        // Send message to service worker to start caching
+        progressText.textContent = 'Starting...';
         registration.active.postMessage({ type: 'START_CACHING' });
     });
 
-    // Listen for progress messages from service worker
     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.addEventListener('message', function(event) {
             const data = event.data;
-            if (data.type === 'CACHE_STATUS') {
-                cacheProgress.classList.add('active');
-                progressText.textContent = data.status;
-            } else if (data.type === 'CACHE_PROGRESS') {
-                // Show progress bar if caching is in progress
+            if (data.type === 'CACHE_PROGRESS') {
                 cacheProgress.classList.add('active');
                 startCacheBtn.disabled = true;
-                startCacheBtn.textContent = 'Downloading...';
-
                 const pct = Math.round((data.cached / data.total) * 100);
                 progressFill.style.width = pct + '%';
-                progressText.textContent = 'Downloading: ' + data.cached.toLocaleString() + ' / ' + data.total.toLocaleString() + ' pages (' + pct + '%)';
+                progressText.textContent = data.cached.toLocaleString() + ' / ' + data.total.toLocaleString() + ' (' + pct + '%)';
             } else if (data.type === 'CACHE_COMPLETE') {
-                cacheProgress.classList.add('active');
                 progressFill.style.width = '100%';
-                progressText.innerHTML = '<span class="cache-complete">✓ Download complete! ' + data.total.toLocaleString() + ' pages available offline.</span>';
-                startCacheBtn.textContent = 'Refresh Cache';
+                progressText.innerHTML = '<span class="cache-complete">✓ Complete! ' + data.total.toLocaleString() + ' pages cached.</span>';
+                startCacheBtn.querySelector('span').textContent = 'Refresh Cache';
                 startCacheBtn.disabled = false;
-                // Refresh the cache list
-                setTimeout(checkCaches, 500);
+                setTimeout(() => { checkCaches(); checkServiceWorker(); }, 500);
             } else if (data.type === 'CACHE_ERROR') {
-                cacheProgress.classList.add('active');
                 progressText.innerHTML = '<span class="status-error">Error: ' + data.error + '</span>';
                 startCacheBtn.disabled = false;
-                startCacheBtn.textContent = 'Try Again';
+                startCacheBtn.querySelector('span').textContent = 'Try Again';
             }
         });
 
-        // Check if caching is already in progress when page loads
         navigator.serviceWorker.ready.then(function(registration) {
-            if (registration.active) {
-                registration.active.postMessage({ type: 'GET_CACHE_STATUS' });
-            }
+            if (registration.active) registration.active.postMessage({ type: 'GET_CACHE_STATUS' });
         });
     }
 
-    // Bible Reader functionality
-    let bibleData = null;
-    let bookStructure = {};
-    let currentBook = '';
-    let currentChapter = 1;
-
-    const BOOKS = [
-        'Genesis', 'Exodus', 'Leviticus', 'Numbers', 'Deuteronomy',
-        'Joshua', 'Judges', 'Ruth', '1 Samuel', '2 Samuel',
-        '1 Kings', '2 Kings', '1 Chronicles', '2 Chronicles',
-        'Ezra', 'Nehemiah', 'Esther', 'Job', 'Psalms', 'Proverbs',
-        'Ecclesiastes', 'Song of Solomon', 'Isaiah', 'Jeremiah',
-        'Lamentations', 'Ezekiel', 'Daniel', 'Hosea', 'Joel', 'Amos',
-        'Obadiah', 'Jonah', 'Micah', 'Nahum', 'Habakkuk', 'Zephaniah',
-        'Haggai', 'Zechariah', 'Malachi',
-        'Matthew', 'Mark', 'Luke', 'John', 'Acts',
-        'Romans', '1 Corinthians', '2 Corinthians', 'Galatians',
-        'Ephesians', 'Philippians', 'Colossians',
-        '1 Thessalonians', '2 Thessalonians',
-        '1 Timothy', '2 Timothy', 'Titus', 'Philemon',
-        'Hebrews', 'James', '1 Peter', '2 Peter',
-        '1 John', '2 John', '3 John', 'Jude', 'Revelation'
-    ];
-
+    // Bible Reader
+    let bibleData = null, bookStructure = {}, currentBook = '', currentChapter = 1;
+    const BOOKS = ['Genesis','Exodus','Leviticus','Numbers','Deuteronomy','Joshua','Judges','Ruth','1 Samuel','2 Samuel','1 Kings','2 Kings','1 Chronicles','2 Chronicles','Ezra','Nehemiah','Esther','Job','Psalms','Proverbs','Ecclesiastes','Song of Solomon','Isaiah','Jeremiah','Lamentations','Ezekiel','Daniel','Hosea','Joel','Amos','Obadiah','Jonah','Micah','Nahum','Habakkuk','Zephaniah','Haggai','Zechariah','Malachi','Matthew','Mark','Luke','John','Acts','Romans','1 Corinthians','2 Corinthians','Galatians','Ephesians','Philippians','Colossians','1 Thessalonians','2 Thessalonians','1 Timothy','2 Timothy','Titus','Philemon','Hebrews','James','1 Peter','2 Peter','1 John','2 John','3 John','Jude','Revelation'];
     const bookSelect = document.getElementById('book-select');
     const chapterSelect = document.getElementById('chapter-select');
     const prevBtn = document.getElementById('prev-btn');
@@ -777,55 +772,49 @@
                 response = await cache.match('/static/verses-1769.json');
                 if (response) break;
             }
-            if (!response) {
-                response = await fetch('/static/verses-1769.json');
-            }
-            if (!response || !response.ok) {
-                throw new Error('Could not load Bible data');
-            }
+            if (!response) response = await fetch('/static/verses-1769.json');
+            if (!response || !response.ok) throw new Error('Could not load Bible data');
             bibleData = await response.json();
-            buildBookStructure();
-            populateBookSelect();
-            parseUrlAndNavigate();
+
+            bookStructure = {};
+            for (const ref in bibleData) {
+                const m = ref.match(/^(.+) (\d+):(\d+)$/);
+                if (m) {
+                    const [, book, chapter, verse] = m;
+                    if (!bookStructure[book]) bookStructure[book] = {};
+                    if (!bookStructure[book][chapter]) bookStructure[book][chapter] = [];
+                    bookStructure[book][chapter].push(parseInt(verse));
+                }
+            }
+
+            BOOKS.forEach(book => {
+                if (bookStructure[book]) {
+                    const opt = document.createElement('option');
+                    opt.value = book;
+                    opt.textContent = book;
+                    bookSelect.appendChild(opt);
+                }
+            });
+
+            const params = new URLSearchParams(window.location.search);
+            const book = params.get('book'), chapter = params.get('chapter');
+            if (book && bookStructure[book]) {
+                bookSelect.value = book;
+                populateChapters(book);
+                if (chapter && bookStructure[book][chapter]) {
+                    chapterSelect.value = chapter;
+                    renderChapter(book, chapter);
+                }
+            }
         } catch (err) {
             console.error('Failed to load Bible:', err);
         }
     }
 
-    function buildBookStructure() {
-        bookStructure = {};
-        for (const ref in bibleData) {
-            const match = ref.match(/^(.+) (\d+):(\d+)$/);
-            if (match) {
-                const [, book, chapter, verse] = match;
-                if (!bookStructure[book]) bookStructure[book] = {};
-                if (!bookStructure[book][chapter]) bookStructure[book][chapter] = [];
-                bookStructure[book][chapter].push(parseInt(verse));
-            }
-        }
-        for (const book in bookStructure) {
-            for (const chapter in bookStructure[book]) {
-                bookStructure[book][chapter].sort((a, b) => a - b);
-            }
-        }
-    }
-
-    function populateBookSelect() {
-        BOOKS.forEach(book => {
-            if (bookStructure[book]) {
-                const opt = document.createElement('option');
-                opt.value = book;
-                opt.textContent = book;
-                bookSelect.appendChild(opt);
-            }
-        });
-    }
-
-    function populateChapterSelect(book) {
+    function populateChapters(book) {
         chapterSelect.innerHTML = '<option value="">Chapter</option>';
         if (!bookStructure[book]) return;
-        const chapters = Object.keys(bookStructure[book]).map(Number).sort((a, b) => a - b);
-        chapters.forEach(ch => {
+        Object.keys(bookStructure[book]).map(Number).sort((a,b) => a-b).forEach(ch => {
             const opt = document.createElement('option');
             opt.value = ch;
             opt.textContent = ch;
@@ -835,439 +824,74 @@
     }
 
     function renderChapter(book, chapter) {
-        if (!bookStructure[book] || !bookStructure[book][chapter]) {
-            return;
-        }
+        if (!bookStructure[book] || !bookStructure[book][chapter]) return;
         currentBook = book;
         currentChapter = parseInt(chapter);
         content.classList.add('active');
 
-        const verses = bookStructure[book][chapter];
+        const verses = bookStructure[book][chapter].sort((a,b) => a-b);
         let html = '<h3>' + book + ' ' + chapter + '</h3>';
-        verses.forEach(verseNum => {
-            const ref = book + ' ' + chapter + ':' + verseNum;
-            const text = bibleData[ref] || '';
-            const cleanText = text.replace(/^#\s*/, '');
-            html += '<p><span class="verse-num">' + verseNum + '</span> ' + cleanText + '</p>';
+        verses.forEach(v => {
+            const text = (bibleData[book + ' ' + chapter + ':' + v] || '').replace(/^#\s*/, '');
+            html += '<p><span class="verse-num">' + v + '</span>' + text + '</p>';
         });
         content.innerHTML = html;
-        updateNavButtons();
+
+        const chapters = Object.keys(bookStructure[currentBook]).map(Number).sort((a,b) => a-b);
+        const bookIdx = BOOKS.indexOf(currentBook);
+        prevBtn.disabled = !(currentChapter > chapters[0] || bookIdx > 0);
+        nextBtn.disabled = !(currentChapter < chapters[chapters.length-1] || bookIdx < BOOKS.length-1);
+
         history.replaceState(null, '', '/offline?book=' + encodeURIComponent(book) + '&chapter=' + chapter);
     }
 
-    function updateNavButtons() {
-        const chapters = Object.keys(bookStructure[currentBook] || {}).map(Number).sort((a, b) => a - b);
-        const bookIndex = BOOKS.indexOf(currentBook);
-        prevBtn.disabled = !(currentChapter > chapters[0] || bookIndex > 0);
-        nextBtn.disabled = !(currentChapter < chapters[chapters.length - 1] || bookIndex < BOOKS.length - 1);
-    }
-
-    function goPrev() {
-        const chapters = Object.keys(bookStructure[currentBook] || {}).map(Number).sort((a, b) => a - b);
-        const chapterIndex = chapters.indexOf(currentChapter);
-        if (chapterIndex > 0) {
-            chapterSelect.value = chapters[chapterIndex - 1];
-            renderChapter(currentBook, chapters[chapterIndex - 1]);
-        } else {
-            const bookIndex = BOOKS.indexOf(currentBook);
-            if (bookIndex > 0) {
-                const prevBook = BOOKS[bookIndex - 1];
-                const prevChapters = Object.keys(bookStructure[prevBook] || {}).map(Number).sort((a, b) => a - b);
-                bookSelect.value = prevBook;
-                populateChapterSelect(prevBook);
-                chapterSelect.value = prevChapters[prevChapters.length - 1];
-                renderChapter(prevBook, prevChapters[prevChapters.length - 1]);
+    function navigate(dir) {
+        const chapters = Object.keys(bookStructure[currentBook]).map(Number).sort((a,b) => a-b);
+        const idx = chapters.indexOf(currentChapter);
+        if (dir === -1) {
+            if (idx > 0) { chapterSelect.value = chapters[idx-1]; renderChapter(currentBook, chapters[idx-1]); }
+            else {
+                const bi = BOOKS.indexOf(currentBook);
+                if (bi > 0) {
+                    const pb = BOOKS[bi-1], pc = Object.keys(bookStructure[pb]).map(Number).sort((a,b) => a-b);
+                    bookSelect.value = pb; populateChapters(pb); chapterSelect.value = pc[pc.length-1];
+                    renderChapter(pb, pc[pc.length-1]);
+                }
             }
-        }
-    }
-
-    function goNext() {
-        const chapters = Object.keys(bookStructure[currentBook] || {}).map(Number).sort((a, b) => a - b);
-        const chapterIndex = chapters.indexOf(currentChapter);
-        if (chapterIndex < chapters.length - 1) {
-            chapterSelect.value = chapters[chapterIndex + 1];
-            renderChapter(currentBook, chapters[chapterIndex + 1]);
         } else {
-            const bookIndex = BOOKS.indexOf(currentBook);
-            if (bookIndex < BOOKS.length - 1) {
-                const nextBook = BOOKS[bookIndex + 1];
-                const nextChapters = Object.keys(bookStructure[nextBook] || {}).map(Number).sort((a, b) => a - b);
-                bookSelect.value = nextBook;
-                populateChapterSelect(nextBook);
-                chapterSelect.value = nextChapters[0];
-                renderChapter(nextBook, nextChapters[0]);
-            }
-        }
-    }
-
-    function parseUrlAndNavigate() {
-        const params = new URLSearchParams(window.location.search);
-        const book = params.get('book');
-        const chapter = params.get('chapter');
-        if (book && bookStructure[book]) {
-            bookSelect.value = book;
-            populateChapterSelect(book);
-            if (chapter && bookStructure[book][chapter]) {
-                chapterSelect.value = chapter;
-                renderChapter(book, chapter);
+            if (idx < chapters.length-1) { chapterSelect.value = chapters[idx+1]; renderChapter(currentBook, chapters[idx+1]); }
+            else {
+                const bi = BOOKS.indexOf(currentBook);
+                if (bi < BOOKS.length-1) {
+                    const nb = BOOKS[bi+1], nc = Object.keys(bookStructure[nb]).map(Number).sort((a,b) => a-b);
+                    bookSelect.value = nb; populateChapters(nb); chapterSelect.value = nc[0];
+                    renderChapter(nb, nc[0]);
+                }
             }
         }
     }
 
     bookSelect.addEventListener('change', function() {
-        const book = this.value;
-        if (book) {
-            populateChapterSelect(book);
-            const chapters = Object.keys(bookStructure[book]).map(Number).sort((a, b) => a - b);
-            if (chapters.length > 0) {
-                chapterSelect.value = chapters[0];
-                renderChapter(book, chapters[0]);
-            }
+        if (this.value) {
+            populateChapters(this.value);
+            const ch = Object.keys(bookStructure[this.value]).map(Number).sort((a,b) => a-b)[0];
+            chapterSelect.value = ch;
+            renderChapter(this.value, ch);
         }
     });
-
-    chapterSelect.addEventListener('change', function() {
-        if (this.value && currentBook) {
-            renderChapter(currentBook, this.value);
-        }
-    });
-
-    prevBtn.addEventListener('click', goPrev);
-    nextBtn.addEventListener('click', goNext);
-
-    // Keyboard navigation
-    const quickLinks = Array.from(document.querySelectorAll('.quick-link'));
-    let selectedQuickLink = -1;
-    let selectedVerse = -1;
-    let inQuickLinksZone = true;
-
-    function getVerseElements() {
-        return Array.from(content.querySelectorAll('p'));
-    }
-
-    function clearSelection() {
-        quickLinks.forEach(el => {
-            el.style.outline = '';
-            el.style.outlineOffset = '';
-        });
-        getVerseElements().forEach(el => {
-            el.style.outline = '';
-            el.style.outlineOffset = '';
-        });
-    }
-
-    function selectQuickLink(index) {
-        clearSelection();
-        inQuickLinksZone = true;
-        selectedVerse = -1;
-        if (index < 0) index = 0;
-        if (index >= quickLinks.length) index = quickLinks.length - 1;
-        selectedQuickLink = index;
-        quickLinks[index].style.outline = '2px solid #4a7c59';
-        quickLinks[index].style.outlineOffset = '4px';
-        quickLinks[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-
-    function selectVerse(index) {
-        clearSelection();
-        inQuickLinksZone = false;
-        selectedQuickLink = -1;
-        const verses = getVerseElements();
-        if (verses.length === 0) return;
-        if (index < 0) index = 0;
-        if (index >= verses.length) index = verses.length - 1;
-        selectedVerse = index;
-        verses[index].style.outline = '2px solid #4a7c59';
-        verses[index].style.outlineOffset = '4px';
-        verses[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
+    chapterSelect.addEventListener('change', function() { if (this.value && currentBook) renderChapter(currentBook, this.value); });
+    prevBtn.addEventListener('click', () => navigate(-1));
+    nextBtn.addEventListener('click', () => navigate(1));
 
     document.addEventListener('keydown', function(e) {
-        if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-
-        const verses = getVerseElements();
-
-        if (e.key === 'ArrowDown' || e.key === 'j') {
-            e.preventDefault();
-            if (inQuickLinksZone) {
-                if (selectedQuickLink < 0) {
-                    selectQuickLink(0);
-                } else if (selectedQuickLink + 3 < quickLinks.length) {
-                    selectQuickLink(selectedQuickLink + 3);
-                } else if (verses.length > 0) {
-                    selectVerse(0);
-                }
-            } else {
-                selectVerse(selectedVerse + 1);
-            }
-        } else if (e.key === 'ArrowUp' || e.key === 'k') {
-            e.preventDefault();
-            if (inQuickLinksZone) {
-                if (selectedQuickLink >= 3) {
-                    selectQuickLink(selectedQuickLink - 3);
-                } else if (selectedQuickLink > 0) {
-                    selectQuickLink(0);
-                }
-            } else {
-                if (selectedVerse <= 0) {
-                    selectQuickLink(quickLinks.length - 1);
-                } else {
-                    selectVerse(selectedVerse - 1);
-                }
-            }
-        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
-            e.preventDefault();
-            if (inQuickLinksZone && selectedQuickLink > 0) {
-                selectQuickLink(selectedQuickLink - 1);
-            } else if (!inQuickLinksZone || selectedQuickLink < 0) {
-                if (!prevBtn.disabled) goPrev();
-            }
-        } else if (e.key === 'ArrowRight' || e.key === 'l') {
-            e.preventDefault();
-            if (inQuickLinksZone && selectedQuickLink >= 0 && selectedQuickLink < quickLinks.length - 1) {
-                selectQuickLink(selectedQuickLink + 1);
-            } else if (!inQuickLinksZone || selectedQuickLink < 0) {
-                if (!nextBtn.disabled) goNext();
-            }
-        } else if (e.key === 'Enter') {
-            e.preventDefault();
-            if (inQuickLinksZone && selectedQuickLink >= 0) {
-                window.location.href = quickLinks[selectedQuickLink].href;
-            }
-        } else if (e.key === 'Escape') {
-            e.preventDefault();
-            clearSelection();
-            selectedQuickLink = -1;
-            selectedVerse = -1;
-            inQuickLinksZone = true;
-        } else if (e.key === 'g') {
-            e.preventDefault();
-            if (bookStructure['Genesis']) {
-                bookSelect.value = 'Genesis';
-                populateChapterSelect('Genesis');
-                chapterSelect.value = '1';
-                renderChapter('Genesis', '1');
-            }
-        } else if (e.key === '?') {
-            e.preventDefault();
-            alert('Keyboard shortcuts:\n\n' +
-                'j/↓ - Move down\n' +
-                'k/↑ - Move up\n' +
-                'h/← - Previous chapter / Move left\n' +
-                'l/→ - Next chapter / Move right\n' +
-                'Enter - Open selected link\n' +
-                'g - Go to Genesis 1\n' +
-                'Esc - Clear selection\n' +
-                '? - Show this help');
-        }
+        if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT') return;
+        if (e.key === 'ArrowLeft' || e.key === 'h') { e.preventDefault(); if (!prevBtn.disabled) navigate(-1); }
+        else if (e.key === 'ArrowRight' || e.key === 'l') { e.preventDefault(); if (!nextBtn.disabled) navigate(1); }
+        else if (e.key === 'g') { e.preventDefault(); bookSelect.value = 'Genesis'; populateChapters('Genesis'); chapterSelect.value = '1'; renderChapter('Genesis', '1'); }
+        else if (e.key === '?') { e.preventDefault(); alert('Keyboard shortcuts:\n\n←/h - Previous chapter\n→/l - Next chapter\ng - Go to Genesis 1\n? - Show help'); }
     });
 
     loadBibleData();
-
-    // URL list navigation state
-    let urlNavMode = false;
-    let selectedCategoryIdx = -1;
-    let selectedUrlIdx = -1;
-
-    // Toggle category expand/collapse
-    window.toggleCategory = function(categoryEl) {
-        categoryEl.classList.toggle('expanded');
-    };
-
-    // Initialize URL navigation
-    window.initUrlNavigation = function() {
-        const categories = document.querySelectorAll('.url-category');
-        if (categories.length === 0) return;
-    };
-
-    function getUrlCategories() {
-        return Array.from(document.querySelectorAll('.url-category'));
-    }
-
-    function getUrlsInCategory(categoryEl) {
-        return Array.from(categoryEl.querySelectorAll('.url-item'));
-    }
-
-    function clearUrlSelection() {
-        document.querySelectorAll('.url-category.selected').forEach(el => el.classList.remove('selected'));
-        document.querySelectorAll('.url-item.selected').forEach(el => el.classList.remove('selected'));
-    }
-
-    function selectCategory(index) {
-        const categories = getUrlCategories();
-        if (categories.length === 0) return;
-
-        clearUrlSelection();
-        selectedUrlIdx = -1;
-
-        if (index < 0) index = 0;
-        if (index >= categories.length) index = categories.length - 1;
-
-        selectedCategoryIdx = index;
-        categories[index].classList.add('selected');
-        categories[index].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-
-    function selectUrlItem(categoryIndex, urlIndex) {
-        const categories = getUrlCategories();
-        if (categoryIndex < 0 || categoryIndex >= categories.length) return;
-
-        clearUrlSelection();
-        selectedCategoryIdx = categoryIndex;
-
-        const urls = getUrlsInCategory(categories[categoryIndex]);
-        if (urls.length === 0) return;
-
-        if (urlIndex < 0) urlIndex = 0;
-        if (urlIndex >= urls.length) urlIndex = urls.length - 1;
-
-        selectedUrlIdx = urlIndex;
-        categories[categoryIndex].classList.add('selected');
-        urls[urlIndex].classList.add('selected');
-        urls[urlIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    }
-
-    function expandCategory(index) {
-        const categories = getUrlCategories();
-        if (index >= 0 && index < categories.length) {
-            categories[index].classList.add('expanded');
-        }
-    }
-
-    function collapseCategory(index) {
-        const categories = getUrlCategories();
-        if (index >= 0 && index < categories.length) {
-            categories[index].classList.remove('expanded');
-        }
-    }
-
-    function isCategoryExpanded(index) {
-        const categories = getUrlCategories();
-        if (index >= 0 && index < categories.length) {
-            return categories[index].classList.contains('expanded');
-        }
-        return false;
-    }
-
-    // Handle URL list keyboard navigation when in Technical Details
-    document.addEventListener('keydown', function(e) {
-        const details = document.querySelector('.debug-details');
-        if (!details || !details.open) return;
-
-        if (e.target.tagName === 'SELECT' || e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
-
-        const categories = getUrlCategories();
-        if (categories.length === 0) return;
-
-        const cachedLinksSection = document.getElementById('cached-links');
-        const rect = cachedLinksSection.getBoundingClientRect();
-        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
-
-        if (!isVisible && selectedCategoryIdx < 0) return;
-
-        if (e.key === 'u') {
-            e.preventDefault();
-            urlNavMode = true;
-            if (selectedCategoryIdx < 0) {
-                selectCategory(0);
-            }
-            return;
-        }
-
-        if (!urlNavMode && selectedCategoryIdx < 0) return;
-
-        if (e.key === 'j' || e.key === 'ArrowDown') {
-            if (urlNavMode || selectedCategoryIdx >= 0) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (selectedUrlIdx >= 0 && isCategoryExpanded(selectedCategoryIdx)) {
-                    const urls = getUrlsInCategory(categories[selectedCategoryIdx]);
-                    if (selectedUrlIdx < urls.length - 1) {
-                        selectUrlItem(selectedCategoryIdx, selectedUrlIdx + 1);
-                    } else {
-                        if (selectedCategoryIdx < categories.length - 1) {
-                            collapseCategory(selectedCategoryIdx);
-                            selectCategory(selectedCategoryIdx + 1);
-                        }
-                    }
-                } else if (selectedCategoryIdx >= 0) {
-                    if (selectedCategoryIdx < categories.length - 1) {
-                        selectCategory(selectedCategoryIdx + 1);
-                    }
-                } else {
-                    selectCategory(0);
-                }
-            }
-        } else if (e.key === 'k' || e.key === 'ArrowUp') {
-            if (urlNavMode || selectedCategoryIdx >= 0) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (selectedUrlIdx >= 0 && isCategoryExpanded(selectedCategoryIdx)) {
-                    if (selectedUrlIdx > 0) {
-                        selectUrlItem(selectedCategoryIdx, selectedUrlIdx - 1);
-                    } else {
-                        selectedUrlIdx = -1;
-                        selectCategory(selectedCategoryIdx);
-                    }
-                } else if (selectedCategoryIdx > 0) {
-                    selectCategory(selectedCategoryIdx - 1);
-                }
-            }
-        } else if (e.key === 'Enter' || e.key === ' ') {
-            if (selectedUrlIdx >= 0) {
-                const urls = getUrlsInCategory(categories[selectedCategoryIdx]);
-                if (urls[selectedUrlIdx]) {
-                    window.location.href = urls[selectedUrlIdx].href;
-                }
-            } else if (selectedCategoryIdx >= 0) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (isCategoryExpanded(selectedCategoryIdx)) {
-                    collapseCategory(selectedCategoryIdx);
-                } else {
-                    expandCategory(selectedCategoryIdx);
-                    const urls = getUrlsInCategory(categories[selectedCategoryIdx]);
-                    if (urls.length > 0) {
-                        selectUrlItem(selectedCategoryIdx, 0);
-                    }
-                }
-            }
-        } else if (e.key === 'Escape') {
-            if (selectedUrlIdx >= 0) {
-                e.preventDefault();
-                selectedUrlIdx = -1;
-                selectCategory(selectedCategoryIdx);
-            } else if (selectedCategoryIdx >= 0) {
-                e.preventDefault();
-                clearUrlSelection();
-                selectedCategoryIdx = -1;
-                urlNavMode = false;
-            }
-        } else if (e.key === 'l' || e.key === 'ArrowRight') {
-            if (selectedCategoryIdx >= 0 && !isCategoryExpanded(selectedCategoryIdx)) {
-                e.preventDefault();
-                e.stopPropagation();
-                expandCategory(selectedCategoryIdx);
-                const urls = getUrlsInCategory(categories[selectedCategoryIdx]);
-                if (urls.length > 0) {
-                    selectUrlItem(selectedCategoryIdx, 0);
-                }
-            }
-        } else if (e.key === 'h' || e.key === 'ArrowLeft') {
-            if (selectedCategoryIdx >= 0) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (selectedUrlIdx >= 0) {
-                    selectedUrlIdx = -1;
-                    selectCategory(selectedCategoryIdx);
-                } else if (isCategoryExpanded(selectedCategoryIdx)) {
-                    collapseCategory(selectedCategoryIdx);
-                }
-            }
-        }
-    }, true);
 })();
 </script>
 {% endblock %}