Add sticky ToC sidebar to document read view

Builds a table of contents client-side from rendered heading IDs.
Highlights the current section on scroll. Collapses to inline on
narrow screens.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/static/style.css

@@ -353,8 +353,75 @@ button:hover, .btn:hover {
 }
 
 /* ===========================
-   Read view
+   Read view — two-column layout
    =========================== */
+.read-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 2rem 2rem 0;
+}
+.read-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+.read-main {
+  max-width: 900px;
+  min-width: 0;
+}
+.read-toc {
+  position: sticky;
+  top: 1rem;
+  max-height: calc(100vh - 2rem);
+  overflow-y: auto;
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  border-right: 1px solid var(--border-lt);
+  padding-right: 1rem;
+}
+.read-toc ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.read-toc li {
+  margin-bottom: 0.25rem;
+}
+.read-toc a {
+  color: var(--text-lt);
+  text-decoration: none;
+  display: block;
+  padding: 0.125rem 0;
+  transition: color 0.1s;
+}
+.read-toc a:hover {
+  color: var(--text);
+  text-decoration: none;
+}
+.read-toc a.toc-active {
+  color: var(--accent);
+}
+
+@media (max-width: 900px) {
+  .read-container {
+    padding: 1.5rem 1rem;
+  }
+  .read-layout {
+    grid-template-columns: 1fr;
+  }
+  .read-toc {
+    position: static;
+    max-height: none;
+    border-right: none;
+    border-bottom: 1px solid var(--border-lt);
+    padding-right: 0;
+    padding-bottom: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+}
+
 .read-header {
   margin-bottom: 1.5rem;
 }