From 264b8c01156f4f503e69468148e8ee4e4b1de021 Mon Sep 17 00:00:00 2001
From: William Zujkowski <williamzujkowski@gmail.com>
Date: Tue, 31 Mar 2026 21:56:38 -0400
Subject: [PATCH] feat: subsection anchor links with :target highlighting
 (#131)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inline script assigns IDs to subsection list items:
- (a) → #subsec-a
- (a)(1) → #subsec-a-1
- (a)(A) → #subsec-a-A

Enables deep-linking: /statute/.../section-111/#subsec-b

CSS :target highlighting:
- Gold background flash when arriving via anchor link
- scroll-margin-top for sticky header clearance
- Dark mode compatible

Closes #131

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/web/src/pages/statute/[...slug].astro | 25 ++++++++++++++++++++++
 apps/web/src/styles/global.css             | 16 ++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/apps/web/src/pages/statute/[...slug].astro b/apps/web/src/pages/statute/[...slug].astro
index 4dc406c..b7eb354 100644
--- a/apps/web/src/pages/statute/[...slug].astro
+++ b/apps/web/src/pages/statute/[...slug].astro
@@ -441,6 +441,31 @@ const readingTimeMin = Math.max(1, Math.round(wordCount / 200));
     })();
   </script>
 
+  <!-- Subsection anchor IDs: (a) → #subsec-a, (a)(1) → #subsec-a-1 -->
+  <script is:inline>
+    (function () {
+      var prose = document.querySelector('.prose');
+      if (!prose) return;
+      var items = prose.querySelectorAll('li');
+      var currentParent = '';
+      items.forEach(function (li) {
+        var strong = li.querySelector('strong');
+        if (!strong) return;
+        var marker = strong.textContent.trim().replace(/[()]/g, '');
+        if (!marker) return;
+        // Determine nesting: top-level (a-z), numeric (1-99), upper (A-Z), roman (i-xx)
+        if (/^[a-z]$/.test(marker)) {
+          currentParent = marker;
+          li.id = 'subsec-' + marker;
+        } else if (/^\d{1,2}$/.test(marker) && currentParent) {
+          li.id = 'subsec-' + currentParent + '-' + marker;
+        } else if (/^[A-Z]$/.test(marker) && currentParent) {
+          li.id = 'subsec-' + currentParent + '-' + marker;
+        }
+      });
+    })();
+  </script>
+
   <!-- Keyboard shortcuts: j/k navigate sections -->
   <script is:inline>
     document.addEventListener('keydown', function (e) {
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 4170033..63965af 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -170,6 +170,22 @@
   a[href]::after { content: none !important; }
 }
 
+/* Subsection anchor highlighting — gold flash when arriving via #subsec-a link */
+[id^="subsec-"] {
+  scroll-margin-top: 4rem;
+}
+
+[id^="subsec-"]:target {
+  background: var(--color-amber-light, #FEF0C8);
+  border-radius: 0.25rem;
+  margin: -0.25rem;
+  padding: 0.25rem;
+}
+
+:where(.dark, .dark *) [id^="subsec-"]:target {
+  background: rgba(194, 133, 12, 0.15);
+}
+
 /* Respect reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {