fix(ui): reserve scrollbar gutter in public TOC so it doesn't overlay text

TODO.md

@@ -7,6 +7,9 @@
 - [x] #cover-home-lazy-intersect-fix [!high] Fix lazy covers not loading after initial images. Root cause: home grid scrolls inside <main class="home-main"> (overflow-y:auto, body height:100vh flex), but htmx `revealed` listens to window scroll only — so below-fold covers never revealed. Fix: hx-trigger="intersect threshold:0.05 once" (IntersectionObserver works inside any scroll container). VERIFIED LIVE: progressive scroll loads covers 5→11→15→20→22/22 (before: stuck ~5). Committed fix(home): use intersect trigger.
 - [x] #cover-image-webp-avif-serve-lite [!medium] Serve lightweight webp cover thumbnails instead of full-res PNG originals (~99% on worst cases). DONE VERIFIED LIVE 2026-08-31: `cwebp -resize 800 q80` sidecars (+ GD fallback for CMYK JPEGs) generated by ThesisFileHandler at upload (FilePond + legacy); /cover-fragment emits <picture> (webp source + original fallback); backfill scripts/generate-cover-webp.php + `just deploy-cover-webp`. PROD: tools installed (docs), 46/46 covers backfilled (44 cwebp + 2 GD/CMYK), app code deployed, /cover-fragment + /media?path=*.webp verified 200 image/webp 61KB (vs 15.8MB orig). AVIF dropped (no viable prod resize; WEBP sufficient). NOTE: just deploy-code's final nginx/permissions step needs sudo password (operational, pre-existing — not a regression).
 
+## In Progress
+- [x] #fix-toc-scrollbar-overlap-content-pages Fix TOC scrollbar overlapping text on about/charte/licence pages (desktop sticky sidebar). Root cause: `.toc` scroll container (overflow-y:auto, 180px col) had no right gutter, so native scrollbar sat on top of link text. Fix: padding-right (not margin) on the `.toc` scroll container + matching padding on summary.
+
 ## Pending
 - [x] #home-htmx-lazy-cover-images [!medium] Add htmx lazyloading on home page cover images: `revealed`-triggered cover-fragment endpoint, swap-in `<img>`, settle fade CSS, load htmx on home
 

app/public/assets/css/components/toc.css

@@ -126,6 +126,14 @@
 		max-height: calc(100vh - var(--space-xl) - var(--space-2xl));
 		overflow-y: auto;
 		overscroll-behavior: contain;
+		/* Reserve right gutter on the scroll container itself (padding, not
+		   margin) so the native scrollbar never overlays the TOC text. */
+		padding-right: var(--space-3xs);
+	}
+
+	/* Keep the caret/summary aligned with the reserved gutter */
+	.toc summary {
+		padding-right: var(--space-3xs);
 	}
 
 	.toc summary {