diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 469f242..81b603d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -20,7 +20,7 @@ jobs:
       - run: npm ci
       - run: npm run build
       - run: npm run plugin-zip
-      - uses: softprops/action-gh-release@v2
+      - uses: softprops/action-gh-release@v3
         with:
           name: TOCflow ${{ github.ref_name }}
           files: tocflow.zip
diff --git a/.wordpress-org/screenshots/screenshot-1.png b/.wordpress-org/screenshots/screenshot-1.png
new file mode 100644
index 0000000..82752bd
Binary files /dev/null and b/.wordpress-org/screenshots/screenshot-1.png differ
diff --git a/.wordpress-org/screenshots/screenshot-2.png b/.wordpress-org/screenshots/screenshot-2.png
new file mode 100644
index 0000000..772a523
Binary files /dev/null and b/.wordpress-org/screenshots/screenshot-2.png differ
diff --git a/.wordpress-org/screenshots/screenshot-3.png b/.wordpress-org/screenshots/screenshot-3.png
new file mode 100644
index 0000000..d854239
Binary files /dev/null and b/.wordpress-org/screenshots/screenshot-3.png differ
diff --git a/.wordpress-org/screenshots/screenshot-4.png b/.wordpress-org/screenshots/screenshot-4.png
new file mode 100644
index 0000000..3ade7f8
Binary files /dev/null and b/.wordpress-org/screenshots/screenshot-4.png differ
diff --git a/.wordpress-org/screenshots/screenshot-5.png b/.wordpress-org/screenshots/screenshot-5.png
new file mode 100644
index 0000000..b897d65
Binary files /dev/null and b/.wordpress-org/screenshots/screenshot-5.png differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ccd0e6..8d499c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,82 @@
 All notable changes to TOCflow are documented here.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.3.0] - 2026-09-08
+
+### Added
+- **Settings → Design & Appearance**: global background colour, text colour, link colour, font size, font weight, line height, border (width / style / colour / radius), and padding. Applied as CSS custom properties (`--tocflow-bg`, `--tocflow-color`, `--tocflow-link-color`, `--tocflow-font-size`, etc.) so per-block editor overrides still cascade correctly.
+- **Settings → Reading Guide & Study Tools**: global defaults for hover preview, guide mode, section previews, density bars, per-section read time, progress fade, emoji reactions, academic citations, and citation format.
+- **Settings → Study Tools & Export**: global defaults for reading progress bar, resume bookmark, reader note pads, and export toolbar.
+- **Settings → Accessibility**: focus ring style picker — Default (underline), Bold (3 px outline, WCAG 2.1 AA), or High-contrast (yellow background + black outline, WCAG 2.1 AAA). Rendered as `data-tocflow-focus` attribute on the `<nav>`.
+- `admin/js/admin.js`: vanilla JS that syncs hex text inputs with companion `<input type=color>` swatches and toggles guide-mode sub-options when the guide-mode checkbox is toggled.
+- `admin/css/admin.css`: styles for color-picker widget, section badge chips, and indented guide sub-options panel.
+
+### Changed
+- CSS custom properties now drive the root border, padding, background, font-size, and link colour so global design settings layer cleanly beneath block-level inline styles from Gutenberg's block supports.
+- `is-style-minimal` preset explicitly resets design custom props to ensure the preset always wins over any global colour/padding setting.
+- `block_attributes()` now passes Reading Guide, Study Tools, and Export defaults to auto-inserted blocks.
+
+## [1.2.2] - 2026-09-08
+
+### Fixed
+- `TOCFLOW_VERSION` constant was `'1.2.0'` while the plugin header read `1.2.1` / `1.2.2`; in-admin version badge now matches.
+- `Tested up to` updated from `6.7` to `7.1` (WordPress 7.1 "Mary Lou" released 2026-08-19).
+- Removed third-party trademark tag `elementor`; replaced with descriptive `study tools`.
+- PHP WPCS: fixed 3-tab indentation on Study-tool shortcode attributes (should be 4-tab like surrounding code).
+- Admin view: fixed indentation on shortcode-docs `<p>` tags in `admin/views/settings.php`.
+
+## [1.2.1] - 2026-09-08
+
+### Changed
+- Debounced bookmark `localStorage` writes to 500 ms (previously wrote on every `IntersectionObserver` callback during scroll — could fire once per heading during fast scrolling).
+
+### Documentation
+- `CHANGELOG.md`: completed v1.1.0 entry with hover preview, export/print toolbar, accessibility, and full page-builder compatibility details.
+- `README.md`: added "What's new" feature tables for v1.1.0 and v1.2.0 for WordPress.org reviewers; added "Performance" section documenting asset-loading gates, `IntersectionObserver` use, no remote calls, debounced storage writes, and PHP static caches.
+
+## [1.2.0] - 2026-09-08
+
+### Added
+- **Reader note pads** — a 📝 button per section lets readers jot personal notes stored privately in localStorage. No account, no server. Enable with `rnotes="1"` in the shortcode or the "Reader note pads" toggle in the block sidebar.
+- **Reading progress bar** — a thin animated bar shows 0–100% of the document read (headings scrolled past via IntersectionObserver). Enable with `rprogress="1"`.
+- **Resume reading bookmark** — automatically bookmarks the last-read heading in localStorage and shows a "↩ Resume" button on return visits. Enable with `bookmark="1"`.
+- **Section Planner** — the "Section Notes" sidebar panel is now "Section Planner" with per-heading writing status (✏️ Draft / 🔄 In progress / ✅ Done) tracked in the editor canvas and a reader-facing teaser note.
+- **Total read-time badge** — when Reading Guide + read-time are active, the TOC header shows the aggregated total read time for the entire post.
+- New shortcode attributes: `rprogress`, `bookmark`, `rnotes`.
+- New block attributes: `showReaderNotes`, `showReadingProgress`, `showBookmark`, `sectionStatus`.
+
+## [1.1.0] - 2026-09-08
+
+### Added
+- **Reading Guide mode** — opt-in block feature that enriches the TOC into a full reading companion:
+  - **Section content previews** — opening ~20 words of each section, extracted server-side from parsed block content via `TOCflow_Headings::get_sections()` (no JS fetch, no external API).
+  - **Content density bars** — thin bar showing each section's word count relative to the longest section, computed at render time.
+  - **Per-section read-time estimates** — `~N min` badge based on word count ÷ 200 wpm.
+  - **Reading progress** — `IntersectionObserver` fades each TOC item as the reader scrolls past its heading (no scroll event handlers; passive main thread).
+- **Author section notes** — block attribute `sectionNotes` (object keyed by heading slug). Writers type a per-section teaser or hook in the "Section Notes" sidebar panel; readers reveal it with a ✍ toggle button.
+- **Emoji reactions** — readers react per section (💡 ⭐ 🤔 ✅); state stored in `localStorage`, zero server calls, zero accounts.
+- **Per-section academic citations** — § button copies a formatted citation (APA / MLA / Chicago / Harvard / plain link) built entirely from WordPress post meta. No external API.
+- **Hover section preview** — floating tooltip on TOC link hover/focus shows the section's opening sentence. Viewport-aware positioning (left or right). `aria-describedby` links the tooltip to the anchor for screen readers. `previewOnHover` attribute; works without full Reading Guide mode.
+- **Export / print toolbar** — `showExport` attribute adds Copy (.md), Download (.md), Download (.doc), and Print buttons below the outline using only the Blob API and `navigator.clipboard`; zero server round-trips. Screen reader live region announces success.
+- **Accessibility** — `aria-live="polite"` region for clipboard and export announcements; `focus-visible` outlines on all interactive elements; all buttons labeled; note and export toggles use `aria-expanded` / `aria-controls` / `hidden`.
+- **Page-builder compatibility** — `TOCflow_Headings::get_all()` now falls back to builder-specific parsers when `parse_blocks()` finds no headings:
+  - **Elementor** — walks `_elementor_data` widget JSON to find heading widgets and Text Editor blocks.
+  - **Bricks Builder** — reads `_bricks_page_content_2` element JSON.
+  - **Divi, WPBakery, Oxygen, Beaver Builder, Breakdance, Classic Editor** — generic `<h*>` regex scan of `post_content`.
+  - `inject_builder_heading_ids()` runs as `the_content` filter at priority 999 so headings inside builder output receive matching `id` attributes.
+  - `should_inject_ids()` now scans builder meta for `[tocflow]` shortcodes so assets load correctly even when the shortcode lives inside a builder widget.
+  - `get_sections()` extended with `builder_raw_html()` and `flatten_html_to_sequence()` fallbacks so Reading Guide previews and read-time estimates work on builder-built pages.
+- New block attributes: `guideMode`, `showPreviews`, `showDensity`, `showReadTime`, `trackProgress`, `showReactions`, `showCitations`, `citationStyle`, `sectionNotes`, `previewOnHover`, `showExport`.
+- New PHP methods: `TOCflow_Headings::flatten_content()`, `get_sections()`, `citation_meta()`, `get_all_from_html()`, `get_all_from_elementor()`, `collect_elementor_headings()`, `get_all_from_bricks()`, `inject_ids_in_html()`, `builder_raw_html()`, `flatten_html_to_sequence()`, `builder_has_tocflow()`.
+- New editor panels: "Reading Guide", "Section Notes", and "Behavior" enhancements in the block sidebar.
+- Print CSS: expanded collapsed TOC, hidden all interactive controls, author notes shown expanded.
+
+### Changed
+- `render_list()` accepts an optional `$guide` array; fully backward-compatible.
+- `render_nav()` merges section data and embeds citation meta on the `<nav>` when guide mode is active.
+- `TOCflow_Plugin::inject_builder_heading_ids()` added as `the_content` hook (priority 999).
+- `enqueue_front_assets()` broadened to cover page-builder pages via `should_inject_ids()`.
+
 ## [1.0.2] - 2026-09-01
 
 WordPress.org Plugin Check cleanup for the directory review (v1.0.1 is Awaiting Review). Behavior is unchanged.
diff --git a/README.md b/README.md
index 1ec04f4..62ed982 100644
--- a/README.md
+++ b/README.md
@@ -28,13 +28,85 @@
 
 ---
 
+## What's new — v1.2.2 (Sep 2026)
+
+> For WordPress.org reviewers: the sections below describe every change since v1.0.2.
+
+### v1.2.2 — WordPress.org compliance fixes
+
+| Fix | Detail |
+|---|---|
+| **`TOCFLOW_VERSION` constant** | Was stuck at `1.2.0`; corrected to `1.2.2` — admin version badge now matches the plugin header |
+| **`Tested up to`** | Updated from `6.7` → `7.1` (WP 7.1 "Mary Lou" released 2026-08-19) |
+| **Tags** | Removed third-party trademark `elementor`; replaced with `study tools` |
+| **PHP indentation** | Fixed WPCS 3-tab → 4-tab on shortcode Study-tool attrs and admin settings view |
+| **readme.txt entries** | Added `= 1.2.1 =` and `= 1.2.2 =` Changelog + Upgrade Notice entries (stable tag must have matching entries) |
+| **GitHub Actions** | Bumped `softprops/action-gh-release` from v2 → v3 (Node 20 → Node 24 runtime) |
+
+### v1.2.1 — Performance patch
+
+| Fix | Detail |
+|---|---|
+| **Bookmark localStorage debounce** | Debounced resume-bookmark writes from every `IntersectionObserver` callback to every 500 ms — prevents redundant writes during fast scrolling |
+
+### v1.2.0 — Study assistant & writer tools
+
+### v1.2.0 — Study assistant & writer tools
+
+| Feature | How to enable | Where state lives |
+|---|---|---|
+| **Reading progress bar** (0–100 % of headings read) | "Study Tools" panel → "Reading progress bar", or `rprogress="1"` shortcode | Client only — `IntersectionObserver`, no server |
+| **Resume reading bookmark** (↩ Resume button on return) | "Study Tools" → "Resume reading bookmark", or `bookmark="1"` | `localStorage` key `tocflow-bm-{post_id}` |
+| **Reader note pads** (📝 per-section personal notes) | "Study Tools" → "Reader note pads", or `rnotes="1"` | `localStorage` key `tocflow-rn-{post_id}-{slug}` |
+| **Section Planner** (writing status per heading for authors) | Block sidebar → "Section Planner" panel | `sectionStatus` block attribute — never sent to front end |
+| **Total read-time badge** | Automatic when Reading Guide + read-time are both active | Computed server-side from word counts, no extra query |
+
+All three reader tools are **off by default**. They only activate when the author explicitly enables them. No feature writes to the database; no feature makes a network call.
+
+### v1.1.0 — Reading Guide, hover previews, citations, page-builder compatibility
+
+| Feature | Default | Notes |
+|---|---|---|
+| **Reading Guide mode** (previews, density bars, read time, progress fading) | Off | `guideMode` attribute; server-side word-count extraction |
+| **Hover section preview** (floating tooltip on TOC link) | Off | `previewOnHover`; `aria-describedby`; viewport-aware |
+| **Emoji reactions** per section (💡 ⭐ 🤔 ✅) | Off | `localStorage` only |
+| **Academic citations** (APA, MLA, Chicago, Harvard, plain) | Off | Built from WP post meta; no external API |
+| **Export / print toolbar** (Copy .md, Download .md, Download .doc, Print) | Off | Blob API + `navigator.clipboard`; no server |
+| **Elementor** heading extraction | Automatic fallback | Parses `_elementor_data` widget JSON |
+| **Bricks Builder** heading extraction | Automatic fallback | Parses `_bricks_page_content_2` JSON |
+| **Divi, WPBakery, Oxygen, Beaver, Breakdance** heading extraction | Automatic fallback | HTML regex scan of `post_content` |
+| **Accessibility** (`aria-live`, `focus-visible`, `aria-expanded`) | Always on | WCAG 2.1 AA compatible |
+
+Full entry-by-entry detail in [`CHANGELOG.md`](CHANGELOG.md).
+
+---
+
+## Performance
+
+TOCflow is built to add **zero measurable overhead** on pages that don't use it, and minimal overhead on pages that do.
+
+| Concern | How TOCflow handles it |
+|---|---|
+| **Assets on unrelated pages** | JS + CSS only load on singular posts/pages that contain the block, shortcode, or auto-insert target. The `enqueue_front_assets()` check gates all enqueues. |
+| **Front-end JavaScript** | `view.js` — 13 KB minified, ~4 KB gzipped. Loaded via `block.json viewScript` (WordPress handles the dependency). No jQuery. No framework. |
+| **Front-end CSS** | `style-index.css` — 19 KB minified, ~4 KB gzipped. One file; no render-blocking imports. |
+| **Scroll event handlers** | None. All scroll-position features (`initScrollSpy`, `initProgressTracking`, `initReadingProgress`, `initBookmark`) use `IntersectionObserver` — passive, runs off the main thread. The only `scroll` listener (`window.addEventListener('scroll', pick, { passive: true })`) is in the scroll-spy fallback and is marked passive. |
+| **localStorage writes** | Reader notes are debounced (400 ms). Bookmark writes are debounced (500 ms). localStorage is never read or written until the author explicitly enables a study tool. |
+| **PHP database queries** | `TOCflow_Headings::get_all()` and `get_sections()` cache their results in a static array — at most one `get_post()` call per post per request. No extra `WP_Query` or custom table reads. |
+| **Remote calls** | None, ever. No phone-home, no CDN assets, no tracking pixels, no external fonts loaded by the plugin. |
+| **`the_content` filters** | Two filters run at priority 12 and 999, both guarded by `is_singular() && in_the_loop() && is_main_query()`. The builder ID-injection filter (999) short-circuits immediately on pure Gutenberg posts. |
+| **`prefers-reduced-motion`** | Smooth scroll and CSS transitions respect the OS preference. |
+
+---
+
 ## Why TOCflow
 
 - **Zero config** — insert the block; the outline builds itself.
 - **Server-rendered** — the list is in the first HTML response (SEO + screen readers).
 - **Accurate anchors** — matching `id`s are injected into headings; custom HTML anchors win.
 - **Accessible** — a `<nav>` landmark, keyboard-friendly collapse, `aria-current` while you read.
-- **Focused** — one block done well, not a block library.
+- **Study-ready** — reading progress, personal notes, bookmarks, citations, and export — all without any account or server dependency.
+- **Compatible** — Gutenberg, Elementor, Divi, Bricks, Beaver Builder, WPBakery, Oxygen, Breakdance, and every major theme.
 
 ### Features
 
@@ -43,9 +115,9 @@
 - Smooth scroll + offset for sticky headers (`prefers-reduced-motion` respected)
 - Collapse/expand, sticky outline, scroll-spy highlight
 - Auto-insert (top of content or after the first heading)
-- `[tocflow]` shortcode for classic content
+- `[tocflow]` shortcode for classic content and page builders
 - Skip a heading with the class `no-toc`
-- Optional ItemList JSON-LD
+- Optional ItemList JSON-LD schema
 - Settings + Docs & Support screens in wp-admin
 
 The plugin slug, folder, and text domain are **`tocflow`**. Display name: **TOCflow**. See [`docs/NAMING.md`](docs/NAMING.md).
@@ -54,7 +126,7 @@ The plugin slug, folder, and text domain are **`tocflow`**. Display name: **TOCf
 
 ## Install
 
-Current version: **1.0.2**.
+Current version: **1.2.2**.
 
 1. Download `tocflow.zip` from [Releases](https://github.com/matthummel-pa/tocflow/releases).
 2. In WordPress: **Plugins → Add New → Upload Plugin**.
diff --git a/admin/css/admin.css b/admin/css/admin.css
index d493975..a758ad4 100644
--- a/admin/css/admin.css
+++ b/admin/css/admin.css
@@ -100,6 +100,137 @@
 	border-radius: 4px;
 }
 
+.tocflow-compat-card .description {
+	margin: 4px 0 14px;
+}
+
+.tocflow-compat-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 12px 24px;
+	margin: 10px 0 16px;
+}
+
+.tocflow-compat-group {
+	font-size: 13px;
+}
+
+.tocflow-compat-group strong {
+	display: block;
+	font-size: 13px;
+	margin-bottom: 4px;
+	color: #1c3d2e;
+}
+
+.tocflow-compat-group ul {
+	margin: 0;
+	padding-left: 16px;
+	color: #3c5a4a;
+}
+
+.tocflow-compat-group li {
+	margin: 2px 0;
+}
+
+.tocflow-badge-new {
+	display: inline-block;
+	background: #275c3e;
+	color: #fff;
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	padding: 2px 7px;
+	border-radius: 4px;
+	margin-left: 6px;
+	vertical-align: middle;
+	line-height: 1.5;
+}
+
+/* ── Color picker widget ────────────────────────────────────────────────── */
+
+.tocflow-color-field {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+}
+
+.tocflow-color-field input[type="text"] {
+	width: 90px;
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 12px;
+}
+
+.tocflow-color-field input[type="color"] {
+	width: 32px;
+	height: 30px;
+	padding: 1px 2px;
+	border: 1px solid #d8e2db;
+	border-radius: 4px;
+	cursor: pointer;
+	background: none;
+}
+
+.tocflow-color-clear {
+	font-size: 12px;
+	color: #888;
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.tocflow-color-clear:hover {
+	color: #d63638;
+	text-decoration: underline;
+}
+
+/* ── Section badges ─────────────────────────────────────────────────────── */
+
+.tocflow-section-badge {
+	display: inline-block;
+	font-size: 10px;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	padding: 2px 7px;
+	border-radius: 4px;
+	margin-left: 6px;
+	vertical-align: middle;
+	line-height: 1.5;
+}
+
+.tocflow-section-badge--guide {
+	background: #0a5c80;
+	color: #fff;
+}
+
+.tocflow-section-badge--study {
+	background: #5b4200;
+	color: #fff;
+}
+
+/* ── Guide sub-options indent ───────────────────────────────────────────── */
+
+#tocflow-guide-subopts {
+	margin-top: 8px;
+	padding: 12px 16px;
+	background: #f6faf8;
+	border-left: 3px solid #2f6f4e;
+	border-radius: 0 4px 4px 0;
+}
+
+#tocflow-guide-subopts .form-table {
+	margin: 0;
+}
+
+#tocflow-guide-subopts .form-table th {
+	padding: 6px 10px 6px 0;
+	font-size: 13px;
+}
+
+#tocflow-guide-subopts .form-table td {
+	padding: 6px 0;
+}
+
 @media (max-width: 782px) {
 
 	.tocflow-admin__grid {
@@ -110,4 +241,8 @@
 		flex-direction: column;
 		align-items: flex-start;
 	}
+
+	.tocflow-compat-grid {
+		grid-template-columns: 1fr;
+	}
 }
diff --git a/admin/js/admin.js b/admin/js/admin.js
new file mode 100644
index 0000000..ebc6bcb
--- /dev/null
+++ b/admin/js/admin.js
@@ -0,0 +1,92 @@
+/**
+ * TOCflow settings-page admin JS.
+ *
+ * Handles:
+ *  – Colour text ↔ swatch sync for design settings.
+ *  – Show/hide Reading Guide sub-options when guide mode is toggled.
+ *  – Show/hide citation format when citations are toggled.
+ *
+ * Vanilla JS, no jQuery, no build step required.
+ */
+( function () {
+	'use strict';
+
+	/**
+	 * Sync a hex text input with a companion colour swatch (input[type=color]).
+	 * Adds a clear link to reset to empty (= "not set").
+	 */
+	function initColorFields() {
+		document
+			.querySelectorAll( '.tocflow-color-field' )
+			.forEach( function ( wrap ) {
+				const text = wrap.querySelector( 'input[type="text"]' );
+				const swatch = wrap.querySelector( 'input[type="color"]' );
+				if ( ! text || ! swatch ) {
+					return;
+				}
+				const clear = wrap.querySelector( '.tocflow-color-clear' );
+
+				// Text → swatch (only when value is a valid 6-digit hex).
+				text.addEventListener( 'input', function () {
+					const v = text.value.trim();
+					if ( /^#[0-9a-fA-F]{6}$/.test( v ) ) {
+						swatch.value = v;
+					}
+					// 3-digit shorthand → expand for swatch.
+					if ( /^#[0-9a-fA-F]{3}$/.test( v ) ) {
+						swatch.value =
+							'#' +
+							v[ 1 ].repeat( 2 ) +
+							v[ 2 ].repeat( 2 ) +
+							v[ 3 ].repeat( 2 );
+					}
+				} );
+
+				// Swatch → text.
+				swatch.addEventListener( 'input', function () {
+					text.value = swatch.value;
+				} );
+
+				// Clear → empty (= use built-in styles).
+				if ( clear ) {
+					clear.addEventListener( 'click', function ( e ) {
+						e.preventDefault();
+						text.value = '';
+						swatch.value = '#ffffff';
+					} );
+				}
+			} );
+	}
+
+	/**
+	 * Show/hide a dependent container based on a checkbox state.
+	 *
+	 * @param {string} triggerId ID of the controlling checkbox.
+	 * @param {string} targetId  ID of the container to show/hide.
+	 */
+	function syncConditional( triggerId, targetId ) {
+		const trigger = document.getElementById( triggerId );
+		const target = document.getElementById( targetId );
+		if ( ! trigger || ! target ) {
+			return;
+		}
+		function update() {
+			target.style.display = trigger.checked ? '' : 'none';
+		}
+		trigger.addEventListener( 'change', update );
+		update();
+	}
+
+	document.addEventListener( 'DOMContentLoaded', function () {
+		initColorFields();
+
+		// Reading Guide sub-options depend on guide mode being on.
+		syncConditional( 'tocflow-auto-guide-mode', 'tocflow-guide-subopts' );
+
+		// Citation format selector depends on citations being on.
+		syncConditional(
+			'tocflow-auto-show-citations',
+			'tocflow-citation-style-row'
+		);
+	} );
+} )();
diff --git a/admin/views/settings.php b/admin/views/settings.php
index 1c79c59..700429b 100644
--- a/admin/views/settings.php
+++ b/admin/views/settings.php
@@ -31,7 +31,7 @@
 
 	<nav class="nav-tab-wrapper tocflow-admin__tabs" aria-label="<?php esc_attr_e( 'TOCflow sections', 'tocflow' ); ?>">
 		<a href="<?php echo esc_url( admin_url( 'options-general.php?page=tocflow' ) ); ?>" class="nav-tab <?php echo 'settings' === $tab ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Settings', 'tocflow' ); ?></a>
-		<a href="<?php echo esc_url( admin_url( 'options-general.php?page=tocflow&tab=support' ) ); ?>" class="nav-tab <?php echo 'support' === $tab ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Docs & Support', 'tocflow' ); ?></a>
+		<a href="<?php echo esc_url( admin_url( 'options-general.php?page=tocflow&tab=support' ) ); ?>" class="nav-tab <?php echo 'support' === $tab ? 'nav-tab-active' : ''; ?>"><?php esc_html_e( 'Docs &amp; Support', 'tocflow' ); ?></a>
 	</nav>
 
 	<?php if ( 'support' === $tab ) : ?>
@@ -39,13 +39,13 @@
 			<section class="tocflow-card">
 				<h2><?php esc_html_e( 'Get started', 'tocflow' ); ?></h2>
 				<ol>
-					<li><?php esc_html_e( 'Edit a post that has Heading blocks (H1–H6; H1 is off by default).', 'tocflow' ); ?></li>
-					<li><?php esc_html_e( 'Click + and search for “Table of Contents”.', 'tocflow' ); ?></li>
+					<li><?php esc_html_e( 'Edit a post that has Heading blocks (H1-H6; H1 is off by default).', 'tocflow' ); ?></li>
+					<li><?php esc_html_e( 'Click + and search for "Table of Contents".', 'tocflow' ); ?></li>
 					<li><?php esc_html_e( 'Optional: pick a style, numbered list, collapse, or sticky in the block sidebar.', 'tocflow' ); ?></li>
-					<li><?php esc_html_e( 'Preview the post and click a link — it should jump to that heading.', 'tocflow' ); ?></li>
+					<li><?php esc_html_e( 'Preview the post and click a link - it should jump to that heading.', 'tocflow' ); ?></li>
 				</ol>
 				<p>
-					<a class="button button-primary" href="<?php echo esc_url( $tocflow_docs_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Open full documentation', 'tocflow' ); ?></a>
+					<a class="button button-primary" href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Full documentation', 'tocflow' ); ?></a>
 					<a class="button" href="<?php echo esc_url( $tocflow_github_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'GitHub repository', 'tocflow' ); ?></a>
 				</p>
 			</section>
@@ -55,27 +55,106 @@
 				<p><?php esc_html_e( 'Support is provided through GitHub issues. Include your WordPress version, PHP version, theme, and steps to reproduce.', 'tocflow' ); ?></p>
 				<p><a class="button" href="<?php echo esc_url( $tocflow_support_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Report a bug or request a feature', 'tocflow' ); ?></a></p>
 				<ul class="tocflow-admin__links">
-					<li><a href="<?php echo esc_url( $tocflow_docs_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'User guide & FAQ', 'tocflow' ); ?></a></li>
+					<li><a href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Full documentation', 'tocflow' ); ?></a></li>
+					<li><a href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html#reading-guide' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Reading Guide docs', 'tocflow' ); ?></a></li>
+					<li><a href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html#compatibility' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Compatibility notes', 'tocflow' ); ?></a></li>
 					<li><a href="<?php echo esc_url( $tocflow_github_url . '/blob/main/CHANGELOG.md' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Changelog', 'tocflow' ); ?></a></li>
 					<li><a href="<?php echo esc_url( $tocflow_github_url . '/blob/main/SECURITY.md' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Security policy', 'tocflow' ); ?></a></li>
 				</ul>
 			</section>
 
+			<section class="tocflow-card tocflow-card--wide tocflow-compat-card">
+				<h2><?php esc_html_e( 'Compatibility', 'tocflow' ); ?></h2>
+				<p class="description"><?php esc_html_e( 'TOCflow works with every major theme, SEO plugin, and multilingual plugin. It inherits your theme\'s fonts and colors, makes zero remote calls, and loads no third-party assets.', 'tocflow' ); ?></p>
+				<div class="tocflow-compat-grid">
+					<div class="tocflow-compat-group">
+						<strong><?php esc_html_e( 'WordPress &amp; PHP', 'tocflow' ); ?></strong>
+						<ul>
+							<li><?php esc_html_e( 'WordPress 6.4 through 7.1', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'PHP 7.4, 8.0, 8.1, 8.2, 8.3', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Block editor + Classic Editor (shortcode)', 'tocflow' ); ?></li>
+						</ul>
+					</div>
+					<div class="tocflow-compat-group">
+						<strong><?php esc_html_e( 'SEO plugins', 'tocflow' ); ?></strong>
+						<ul>
+							<li><?php esc_html_e( 'Yoast SEO - no schema conflicts', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Rank Math - schema opt-in only', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'All in One SEO, SEOPress', 'tocflow' ); ?></li>
+						</ul>
+					</div>
+					<div class="tocflow-compat-group">
+						<strong><?php esc_html_e( 'Themes', 'tocflow' ); ?></strong>
+						<ul>
+							<li><?php esc_html_e( 'Twenty Twenty-Four / Twenty Twenty-Five', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Astra, Kadence, GeneratePress, Blocksy', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Any theme - inherits your colors &amp; fonts', 'tocflow' ); ?></li>
+						</ul>
+					</div>
+					<div class="tocflow-compat-group">
+						<strong><?php esc_html_e( 'Page builders', 'tocflow' ); ?></strong>
+						<ul>
+							<li><?php esc_html_e( 'Elementor - heading JSON parsed automatically', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Bricks, Divi, Beaver, WPBakery, Oxygen', 'tocflow' ); ?></li>
+							<li><?php esc_html_e( 'Any builder - HTML scan fallback', 'tocflow' ); ?></li>
+						</ul>
+					</div>
+				</div>
+				<p><a href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html#compatibility' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Full compatibility notes', 'tocflow' ); ?> &rarr;</a></p>
+			</section>
+
+			<section class="tocflow-card tocflow-card--wide">
+				<h2><?php esc_html_e( 'Reading Guide', 'tocflow' ); ?> <span class="tocflow-badge-new">v1.1</span></h2>
+				<p class="description"><?php esc_html_e( 'Enable in the block sidebar. Adds hover section previews, read-time estimates, content density bars, reading progress, emoji reactions, author notes, and one-click academic citations. Everything is extracted server-side - zero external APIs.', 'tocflow' ); ?></p>
+				<p><a href="<?php echo esc_url( $tocflow_docs_url . 'documentation.html#reading-guide' ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Reading Guide documentation', 'tocflow' ); ?> &rarr;</a></p>
+			</section>
+
 			<section class="tocflow-card tocflow-card--wide">
 				<h2><?php esc_html_e( 'Shortcode', 'tocflow' ); ?></h2>
-				<p><?php esc_html_e( 'Use this in classic content, widgets, or a theme template (via do_shortcode):', 'tocflow' ); ?></p>
+				<p><?php esc_html_e( 'Use this in classic content, page-builder text widgets, or a theme template (via do_shortcode):', 'tocflow' ); ?></p>
 				<p><code>[tocflow]</code></p>
-				<p><?php esc_html_e( 'Optional attributes:', 'tocflow' ); ?> <code>title</code>, <code>showtitle</code>, <code>titletag</code>, <code>h1</code>–<code>h6</code>, <code>ordered</code>, <code>numbering</code>, <code>markers</code>, <code>collapsible</code>, <code>collapsed</code>, <code>sticky</code>, <code>compact</code>, <code>columns</code>, <code>underline</code>, <code>highlight</code>, <code>maxheight</code>, <code>min</code>, <code>smooth</code>, <code>style</code></p>
-				<p><code>[tocflow title="On this page" ordered="1" numbering="nested" style="boxed"]</code></p>
-			</section>
+				<p><?php esc_html_e( 'Layout &amp; behavior:', 'tocflow' ); ?> <code>title</code>, <code>showtitle</code>, <code>titletag</code>, <code>h1</code>&ndash;<code>h6</code>, <code>ordered</code>, <code>numbering</code>, <code>markers</code>, <code>collapsible</code>, <code>collapsed</code>, <code>sticky</code>, <code>compact</code>, <code>columns</code>, <code>underline</code>, <code>highlight</code>, <code>maxheight</code>, <code>min</code>, <code>smooth</code>, <code>style</code></p>
+			<p><?php esc_html_e( 'Reading Guide:', 'tocflow' ); ?> <code>preview="1"</code> <?php esc_html_e( '(hover tooltip)', 'tocflow' ); ?>, <code>guide="1"</code> <?php esc_html_e( '(full guide mode)', 'tocflow' ); ?>, <code>previews="1"</code>, <code>density="1"</code>, <code>readtime="1"</code>, <code>progress="1"</code>, <code>reactions="1"</code>, <code>citations="1"</code>, <code>citation="apa|mla|chicago|harvard|plain"</code></p>
+			<p><?php esc_html_e( 'Study tools:', 'tocflow' ); ?> <code>rprogress="1"</code> <?php esc_html_e( '(reading progress bar)', 'tocflow' ); ?>, <code>bookmark="1"</code> <?php esc_html_e( '(resume reading)', 'tocflow' ); ?>, <code>rnotes="1"</code> <?php esc_html_e( '(reader note pads per section)', 'tocflow' ); ?></p>
+			<p><?php esc_html_e( 'Export &amp; print:', 'tocflow' ); ?> <code>export="1"</code> <?php esc_html_e( '(adds Copy / .md / .doc / Print buttons)', 'tocflow' ); ?></p>
+			<p><code>[tocflow title="On this page" style="boxed" preview="1" export="1"]</code></p>
+			<p><code>[tocflow guide="1" previews="1" readtime="1" reactions="1" citations="1" export="1"]</code></p>
+			<p><code>[tocflow rprogress="1" bookmark="1" rnotes="1"]</code></p>
+		</section>
 
 			<section class="tocflow-card tocflow-card--wide">
 				<h2><?php esc_html_e( 'Skip a heading', 'tocflow' ); ?></h2>
-				<p><?php esc_html_e( 'Add the CSS class no-toc or tocflow-skip to a Heading block (Advanced → Additional CSS class(es)) to keep it out of the outline.', 'tocflow' ); ?></p>
+				<p><?php esc_html_e( 'Add the CSS class no-toc or tocflow-skip to a Heading block (Advanced > Additional CSS class(es)) to keep it out of the outline.', 'tocflow' ); ?></p>
 			</section>
 		</div>
 	<?php else : ?>
-		<?php $tocflow_opt = TOCflow_Settings::OPTION; ?>
+		<?php
+		$tocflow_opt = TOCflow_Settings::OPTION;
+		/**
+		 * Helper: render a colour-picker field (text + swatch + clear link).
+		 *
+		 * @param string $name    Form field name (without option prefix).
+		 * @param string $value   Current saved value.
+		 * @param string $label   Accessible label for the text input.
+		 */
+		$tocflow_color_field = function ( $name, $value, $label ) use ( $tocflow_opt ) {
+			$swatch_val = '' !== $value ? esc_attr( $value ) : '#ffffff';
+			printf(
+				'<span class="tocflow-color-field">'
+				. '<input type="text" name="%1$s[%2$s]" value="%3$s" placeholder="#rrggbb" maxlength="7" aria-label="%4$s">'
+				. '<input type="color" value="%5$s" aria-hidden="true" tabindex="-1">'
+				. '<a href="#" class="tocflow-color-clear" aria-label="%6$s">%7$s</a>'
+				. '</span>',
+				esc_attr( $tocflow_opt ),
+				esc_attr( $name ),
+				esc_attr( $value ),
+				esc_attr( $label ),
+				$swatch_val,
+				esc_attr__( 'Clear colour', 'tocflow' ),
+				esc_html__( 'Clear', 'tocflow' )
+			);
+		};
+		?>
 		<form action="options.php" method="post" class="tocflow-admin__form">
 			<?php settings_fields( 'tocflow_settings_group' ); ?>
 
@@ -125,7 +204,7 @@
 						<th scope="row"><?php esc_html_e( 'Position', 'tocflow' ); ?></th>
 						<td>
 							<fieldset>
-								<label><input type="radio" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_insert]" value="none" <?php checked( $settings['auto_insert'], 'none' ); ?>> <?php esc_html_e( 'Off — only show when the block or shortcode is added', 'tocflow' ); ?></label><br>
+								<label><input type="radio" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_insert]" value="none" <?php checked( $settings['auto_insert'], 'none' ); ?>> <?php esc_html_e( 'Off - only show when the block or shortcode is added', 'tocflow' ); ?></label><br>
 								<label><input type="radio" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_insert]" value="before" <?php checked( $settings['auto_insert'], 'before' ); ?>> <?php esc_html_e( 'Top of content', 'tocflow' ); ?></label><br>
 								<label><input type="radio" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_insert]" value="after_first_heading" <?php checked( $settings['auto_insert'], 'after_first_heading' ); ?>> <?php esc_html_e( 'After the first heading', 'tocflow' ); ?></label>
 							</fieldset>
@@ -277,7 +356,7 @@
 			</section>
 
 			<section class="tocflow-card">
-				<h2><?php esc_html_e( 'SEO & data', 'tocflow' ); ?></h2>
+				<h2><?php esc_html_e( 'SEO &amp; data', 'tocflow' ); ?></h2>
 				<table class="form-table" role="presentation">
 					<tr>
 						<th scope="row"><?php esc_html_e( 'Schema markup', 'tocflow' ); ?></th>
@@ -300,6 +379,262 @@
 				</table>
 			</section>
 
+			<!-- ── Design & Appearance ───────────────────────────────────────── -->
+			<section class="tocflow-card">
+				<h2><?php esc_html_e( 'Design &amp; Appearance', 'tocflow' ); ?></h2>
+				<p class="description">
+					<?php esc_html_e( 'Global visual defaults. Leave any field empty to use the built-in preset style. Per-block overrides in the editor always win.', 'tocflow' ); ?>
+				</p>
+				<table class="form-table" role="presentation">
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Background colour', 'tocflow' ); ?></th>
+						<td>
+							<?php $tocflow_color_field( 'design_bg_color', $settings['design_bg_color'], __( 'Background colour (hex)', 'tocflow' ) ); ?>
+							<p class="description"><?php esc_html_e( 'e.g. #f8fafc — overrides the preset background.', 'tocflow' ); ?></p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Text colour', 'tocflow' ); ?></th>
+						<td>
+							<?php $tocflow_color_field( 'design_text_color', $settings['design_text_color'], __( 'Text colour (hex)', 'tocflow' ) ); ?>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Link colour', 'tocflow' ); ?></th>
+						<td>
+							<?php $tocflow_color_field( 'design_link_color', $settings['design_link_color'], __( 'Link colour (hex)', 'tocflow' ) ); ?>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Font size', 'tocflow' ); ?></th>
+						<td>
+							<input type="text" name="<?php echo esc_attr( $tocflow_opt ); ?>[design_font_size]" value="<?php echo esc_attr( $settings['design_font_size'] ); ?>" placeholder="<?php esc_attr_e( 'e.g. 15px or 0.9rem', 'tocflow' ); ?>" class="regular-text">
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Link font weight', 'tocflow' ); ?></th>
+						<td>
+							<select name="<?php echo esc_attr( $tocflow_opt ); ?>[design_font_weight]">
+								<option value="" <?php selected( $settings['design_font_weight'], '' ); ?>><?php esc_html_e( '— inherit from theme —', 'tocflow' ); ?></option>
+								<?php
+								foreach ( array( '300', '400', '500', '600', '700', '800' ) as $tocflow_fw ) :
+									?>
+									<option value="<?php echo esc_attr( $tocflow_fw ); ?>" <?php selected( $settings['design_font_weight'], $tocflow_fw ); ?>><?php echo esc_html( $tocflow_fw ); ?></option>
+								<?php endforeach; ?>
+							</select>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Line height', 'tocflow' ); ?></th>
+						<td>
+							<input type="text" name="<?php echo esc_attr( $tocflow_opt ); ?>[design_line_height]" value="<?php echo esc_attr( $settings['design_line_height'] ); ?>" placeholder="<?php esc_attr_e( 'e.g. 1.6', 'tocflow' ); ?>" class="small-text">
+							<p class="description"><?php esc_html_e( 'Unitless number, e.g. 1.6.', 'tocflow' ); ?></p>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Border', 'tocflow' ); ?></th>
+						<td>
+							<fieldset>
+								<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px;">
+									<input type="text" name="<?php echo esc_attr( $tocflow_opt ); ?>[design_border_width]" value="<?php echo esc_attr( $settings['design_border_width'] ); ?>" placeholder="<?php esc_attr_e( 'width e.g. 1px', 'tocflow' ); ?>" class="small-text" style="width:90px;" aria-label="<?php esc_attr_e( 'Border width', 'tocflow' ); ?>">
+									<select name="<?php echo esc_attr( $tocflow_opt ); ?>[design_border_style]" aria-label="<?php esc_attr_e( 'Border style', 'tocflow' ); ?>">
+										<option value="" <?php selected( $settings['design_border_style'], '' ); ?>><?php esc_html_e( '— style —', 'tocflow' ); ?></option>
+										<?php foreach ( array( 'solid', 'dashed', 'dotted', 'double', 'none' ) as $tocflow_bs ) : ?>
+											<option value="<?php echo esc_attr( $tocflow_bs ); ?>" <?php selected( $settings['design_border_style'], $tocflow_bs ); ?>><?php echo esc_html( $tocflow_bs ); ?></option>
+										<?php endforeach; ?>
+									</select>
+									<?php $tocflow_color_field( 'design_border_color', $settings['design_border_color'], __( 'Border colour (hex)', 'tocflow' ) ); ?>
+								</div>
+								<div style="display:flex;gap:8px;align-items:center;">
+									<label for="tocflow-design-radius"><?php esc_html_e( 'Border radius:', 'tocflow' ); ?></label>
+									<input id="tocflow-design-radius" type="text" name="<?php echo esc_attr( $tocflow_opt ); ?>[design_border_radius]" value="<?php echo esc_attr( $settings['design_border_radius'] ); ?>" placeholder="<?php esc_attr_e( 'e.g. 8px', 'tocflow' ); ?>" class="small-text" style="width:80px;">
+								</div>
+							</fieldset>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><label for="tocflow-design-padding"><?php esc_html_e( 'Padding', 'tocflow' ); ?></label></th>
+						<td>
+							<input id="tocflow-design-padding" type="text" name="<?php echo esc_attr( $tocflow_opt ); ?>[design_padding]" value="<?php echo esc_attr( $settings['design_padding'] ); ?>" placeholder="<?php esc_attr_e( 'e.g. 1.25rem', 'tocflow' ); ?>" class="small-text">
+							<p class="description"><?php esc_html_e( 'All sides. Use px or rem. Leave blank for the preset default.', 'tocflow' ); ?></p>
+						</td>
+					</tr>
+				</table>
+			</section>
+
+			<!-- ── Reading Guide & Study Tools global defaults ────────────────── -->
+			<section class="tocflow-card">
+				<h2>
+					<?php esc_html_e( 'Reading Guide &amp; Study Tools', 'tocflow' ); ?>
+					<span class="tocflow-section-badge tocflow-section-badge--guide">v1.1</span>
+				</h2>
+				<p class="description">
+					<?php esc_html_e( 'Global defaults for auto-inserted blocks and shortcodes. Manual blocks keep their own per-block settings from the editor sidebar.', 'tocflow' ); ?>
+				</p>
+				<table class="form-table" role="presentation">
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Hover section preview', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_preview_hover]" value="1" <?php checked( $settings['auto_preview_hover'], 1 ); ?>>
+								<?php esc_html_e( 'Show the opening sentence of each section in a tooltip when hovering a TOC link.', 'tocflow' ); ?>
+							</label>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Reading Guide mode', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input id="tocflow-auto-guide-mode" type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_guide_mode]" value="1" <?php checked( $settings['auto_guide_mode'], 1 ); ?>>
+								<?php esc_html_e( 'Enable the full Reading Guide (inline previews, density bars, read time, progress fade).', 'tocflow' ); ?>
+							</label>
+							<div id="tocflow-guide-subopts">
+								<table class="form-table" role="presentation">
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Section content previews', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_show_previews]" value="1" <?php checked( $settings['auto_show_previews'], 1 ); ?>>
+												<?php esc_html_e( 'Show the first ~20 words of each section under its TOC link.', 'tocflow' ); ?>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Content density bars', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_show_density]" value="1" <?php checked( $settings['auto_show_density'], 1 ); ?>>
+												<?php esc_html_e( 'Show a proportional bar indicating each section\'s word count.', 'tocflow' ); ?>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Per-section read time', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_show_read_time]" value="1" <?php checked( $settings['auto_show_read_time'], 1 ); ?>>
+												<?php esc_html_e( 'Show an estimated read time next to each TOC link.', 'tocflow' ); ?>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Reading progress fade', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_track_progress]" value="1" <?php checked( $settings['auto_track_progress'], 1 ); ?>>
+												<?php esc_html_e( 'Fade out TOC items as the reader scrolls past each section.', 'tocflow' ); ?>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Emoji reactions', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_show_reactions]" value="1" <?php checked( $settings['auto_show_reactions'], 1 ); ?>>
+												<?php esc_html_e( 'Let readers react per section (💡 ⭐ 🤔 ✅) — stored in browser localStorage, never on your server.', 'tocflow' ); ?>
+											</label>
+										</td>
+									</tr>
+									<tr>
+										<th scope="row"><?php esc_html_e( 'Academic citations', 'tocflow' ); ?></th>
+										<td>
+											<label>
+												<input id="tocflow-auto-show-citations" type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_show_citations]" value="1" <?php checked( $settings['auto_show_citations'], 1 ); ?>>
+												<?php esc_html_e( 'Show a § button that copies a formatted citation for each section — built from post meta, no external API.', 'tocflow' ); ?>
+											</label>
+											<div id="tocflow-citation-style-row" style="margin-top:6px;">
+												<label for="tocflow-auto-citation-style"><?php esc_html_e( 'Citation format:', 'tocflow' ); ?></label>
+												<select id="tocflow-auto-citation-style" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_citation_style]">
+													<?php
+													$tocflow_cite_formats = array(
+														'apa'     => 'APA',
+														'mla'     => 'MLA',
+														'chicago' => 'Chicago',
+														'harvard' => 'Harvard',
+														'plain'   => __( 'Plain link', 'tocflow' ),
+													);
+													foreach ( $tocflow_cite_formats as $tocflow_cf_key => $tocflow_cf_label ) :
+														?>
+														<option value="<?php echo esc_attr( $tocflow_cf_key ); ?>" <?php selected( $settings['auto_citation_style'], $tocflow_cf_key ); ?>><?php echo esc_html( $tocflow_cf_label ); ?></option>
+													<?php endforeach; ?>
+												</select>
+											</div>
+										</td>
+									</tr>
+								</table>
+							</div>
+						</td>
+					</tr>
+				</table>
+			</section>
+
+			<!-- ── Study Tools & Export global defaults ───────────────────────── -->
+			<section class="tocflow-card">
+				<h2>
+					<?php esc_html_e( 'Study Tools &amp; Export', 'tocflow' ); ?>
+					<span class="tocflow-section-badge tocflow-section-badge--study">v1.2</span>
+				</h2>
+				<p class="description">
+					<?php esc_html_e( 'All features are off by default and store data only in the reader\'s browser — nothing is sent to your server.', 'tocflow' ); ?>
+				</p>
+				<table class="form-table" role="presentation">
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Reading progress bar', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_reading_progress]" value="1" <?php checked( $settings['auto_reading_progress'], 1 ); ?>>
+								<?php esc_html_e( 'Show a thin progress bar (0–100 % of headings read) above the TOC list.', 'tocflow' ); ?>
+							</label>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Resume reading bookmark', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_bookmark]" value="1" <?php checked( $settings['auto_bookmark'], 1 ); ?>>
+								<?php esc_html_e( 'Bookmark the reader\'s last-read heading in localStorage and show a ↩ Resume button on return visits.', 'tocflow' ); ?>
+							</label>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Reader note pads', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_reader_notes]" value="1" <?php checked( $settings['auto_reader_notes'], 1 ); ?>>
+								<?php esc_html_e( 'Add a 📝 button per section so readers can jot private notes (localStorage only — no account needed).', 'tocflow' ); ?>
+							</label>
+						</td>
+					</tr>
+					<tr>
+						<th scope="row"><?php esc_html_e( 'Export &amp; print toolbar', 'tocflow' ); ?></th>
+						<td>
+							<label>
+								<input type="checkbox" name="<?php echo esc_attr( $tocflow_opt ); ?>[auto_export]" value="1" <?php checked( $settings['auto_export'], 1 ); ?>>
+								<?php esc_html_e( 'Add Copy / Download .md / Download .doc / Print buttons under the TOC.', 'tocflow' ); ?>
+							</label>
+						</td>
+					</tr>
+				</table>
+			</section>
+
+			<!-- ── Accessibility ─────────────────────────────────────────────── -->
+			<section class="tocflow-card">
+				<h2><?php esc_html_e( 'Accessibility', 'tocflow' ); ?></h2>
+				<table class="form-table" role="presentation">
+					<tr>
+						<th scope="row"><label for="tocflow-focus-style"><?php esc_html_e( 'Focus ring style', 'tocflow' ); ?></label></th>
+						<td>
+							<select id="tocflow-focus-style" name="<?php echo esc_attr( $tocflow_opt ); ?>[focus_style]">
+								<option value="default" <?php selected( $settings['focus_style'], 'default' ); ?>><?php esc_html_e( 'Default — underline only (follows theme)', 'tocflow' ); ?></option>
+								<option value="bold" <?php selected( $settings['focus_style'], 'bold' ); ?>><?php esc_html_e( 'Bold — 3 px outline, offset 2 px (WCAG 2.1 AA)', 'tocflow' ); ?></option>
+								<option value="high-contrast" <?php selected( $settings['focus_style'], 'high-contrast' ); ?>><?php esc_html_e( 'High contrast — black outline on yellow background (WCAG 2.1 AAA)', 'tocflow' ); ?></option>
+							</select>
+							<p class="description"><?php esc_html_e( 'Applies to keyboard focus on TOC links. Does not affect the block editor.', 'tocflow' ); ?></p>
+						</td>
+					</tr>
+				</table>
+			</section>
+
 			<?php submit_button( __( 'Save settings', 'tocflow' ) ); ?>
 		</form>
 	<?php endif; ?>
diff --git a/dev/start-local.sh b/dev/start-local.sh
new file mode 100755
index 0000000..1349d6a
--- /dev/null
+++ b/dev/start-local.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+# ──────────────────────────────────────────────────────────────────────────────
+# TOCflow local WordPress preview environment
+#
+# Usage: bash dev/start-local.sh
+#
+# Access:
+#   Site:     http://localhost:8080
+#   Demo post: http://localhost:8080/?p=4
+#   Admin:    http://localhost:8080/wp-admin/  (admin / password)
+#
+# WordPress is at /opt/wordpress
+# Plugin is symlinked: /opt/wordpress/wp-content/plugins/tocflow -> /workspace
+# ──────────────────────────────────────────────────────────────────────────────
+set -e
+
+WP_DIR=/opt/wordpress
+PORT=8080
+
+echo "▶ Starting MariaDB..."
+if ! sudo mysqladmin -u root status &>/dev/null; then
+    sudo bash -c "nohup mariadbd --user=mysql --datadir=/var/lib/mysql \
+        --skip-log-error \
+        --pid-file=/run/mysqld/mysqld.pid \
+        --socket=/run/mysqld/mysqld.sock \
+        > /tmp/mariadb.log 2>&1 &"
+    sleep 3
+fi
+
+echo "▶ Starting WordPress PHP server on http://localhost:${PORT} ..."
+php8.2 -S "0.0.0.0:${PORT}" "${WP_DIR}/router.php" &
+SERVER_PID=$!
+echo "  PID: ${SERVER_PID}"
+sleep 2
+
+echo ""
+echo "✓ Local environment ready"
+echo "  Site:      http://localhost:${PORT}"
+echo "  Demo post: http://localhost:${PORT}/?p=4"
+echo "  Admin:     http://localhost:${PORT}/wp-admin/"
+echo "  Login:     admin / password"
+echo ""
+echo "Press Ctrl+C to stop the server."
+wait ${SERVER_PID}
diff --git a/docs/documentation.html b/docs/documentation.html
index 3dba182..c6c0df0 100644
--- a/docs/documentation.html
+++ b/docs/documentation.html
@@ -3,11 +3,11 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>TOCflow documentation</title>
-<meta name="description" content="Full documentation for the TOCflow WordPress plugin: install, block, shortcode, auto-insert, styles, developers, marketplace.">
+<title>TOCflow documentation — Table of Contents block for WordPress</title>
+<meta name="description" content="Full documentation for TOCflow v1.2.0: install, block sidebar, Reading Guide mode, study assistant (reader notes, progress bar, resume bookmark, section planner), hover previews, section citations, auto-insert, shortcode, settings reference, compatibility, and developer filters.">
 <link rel="canonical" href="https://matthummel-pa.github.io/tocflow/documentation.html">
 <meta property="og:title" content="TOCflow documentation">
-<meta property="og:description" content="Install, block, shortcode, auto-insert, and developer notes.">
+<meta property="og:description" content="Install, block sidebar, Reading Guide, hover previews, citations, auto-insert, shortcode, settings, compatibility, and developer notes.">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://matthummel-pa.github.io/tocflow/documentation.html">
 <meta property="og:image" content="https://matthummel-pa.github.io/tocflow/assets/social-preview.png">
@@ -16,100 +16,414 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&display=swap" rel="stylesheet">
 <style>
-  :root{--paper:#f3eee4;--ink:#1c1915;--muted:#5c564c;--moss:#275c3e;--line:rgba(28,25,21,.12);--card:#fffaf3;--sans:Outfit,"Segoe UI",system-ui,sans-serif}
-  body{margin:0;background:var(--paper);color:var(--ink);font:600 18px/1.6 var(--sans)}
-  .wrap{max-width:820px;margin:0 auto;padding:32px 22px 64px}
-  a{color:var(--moss)}
-  h1,h2,h3{font-family:var(--sans);letter-spacing:-.03em;font-weight:800}
-  h1{font-size:42px;margin:12px 0 8px}
-  h2{font-size:28px;margin:36px 0 10px;border-top:1px solid var(--line);padding-top:28px}
-  .kicker{letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--moss);font-family:var(--sans);font-weight:700}
-  code{background:#ebe4d6;padding:1px 6px;border-radius:4px;font-size:15px}
-  pre{background:#1c1915;color:#f3eee4;padding:16px;border-radius:12px;overflow:auto;font-size:14px;line-height:1.5}
-  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}
-  th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:16px}
-  th{background:#ebe4d6;font-family:var(--sans);font-size:14px;font-weight:700}
-  .top{font-size:15px;margin-bottom:24px}
-  footer{padding:36px 0 0;color:var(--muted);font-size:15px;border-top:1px solid var(--line);margin-top:48px}
+  :root{
+    --paper:#f3eee4;--ink:#1c1915;--muted:#5c564c;
+    --moss:#275c3e;--moss-d:#1c3d2a;--moss-l:#eaf3ed;
+    --copper:#c46b32;--line:rgba(28,25,21,.1);--card:#fffaf3;
+    --sans:Outfit,"Segoe UI",system-ui,sans-serif;
+    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
+  }
+  *{box-sizing:border-box}
+  html{scroll-behavior:smooth}
+  body{margin:0;background:var(--paper);color:var(--ink);font:600 17px/1.65 var(--sans)}
+  a{color:var(--moss);text-underline-offset:3px}
+  a:hover{color:var(--copper)}
+
+  /* ── Layout ── */
+  .page{display:grid;grid-template-columns:220px 1fr;max-width:1100px;margin:0 auto;gap:0;min-height:100vh}
+  aside{position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--line);padding:28px 20px;font-size:14px}
+  aside .logo{font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-.02em;margin-bottom:20px;display:block;text-decoration:none;color:var(--ink)}
+  aside .logo em{color:var(--moss);font-style:normal}
+  aside nav a{display:block;padding:4px 0;text-decoration:none;color:var(--muted);line-height:1.4}
+  aside nav a:hover{color:var(--moss)}
+  aside nav .section-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--copper);margin:18px 0 6px}
+  aside nav .sub{padding-left:12px;font-size:13px}
+  .content{padding:36px 40px 80px;max-width:820px}
+
+  /* ── Typography ── */
+  .kicker{font-weight:700;color:var(--copper);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px}
+  h1{font-family:var(--sans);font-size:38px;margin:4px 0 12px;letter-spacing:-.035em;font-weight:800;line-height:1.1}
+  h2{font-family:var(--sans);font-size:26px;margin:48px 0 10px;letter-spacing:-.025em;font-weight:800;border-top:1px solid var(--line);padding-top:40px}
+  h3{font-family:var(--sans);font-size:18px;margin:28px 0 8px;font-weight:800}
+  p{margin:0 0 14px;color:var(--muted)}
+  p strong{color:var(--ink)}
+  .intro{color:var(--ink);font-size:18px;max-width:36rem;line-height:1.55;margin-bottom:24px}
+  .breadcrumb{font-size:14px;color:var(--muted);margin-bottom:28px}
+  .breadcrumb a{color:var(--muted);text-decoration:none}
+  .breadcrumb a:hover{color:var(--moss)}
+
+  /* ── Code ── */
+  code{font-family:var(--mono);background:#ebe4d6;padding:1px 6px;border-radius:4px;font-size:14px;color:var(--ink)}
+  pre{background:#1c1915;color:#e8e0d4;padding:18px 20px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.55;margin:14px 0}
+  pre code{background:none;padding:0;color:inherit;font-size:inherit}
+
+  /* ── Tables ── */
+  table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:15px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
+  th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
+  th{font-family:var(--sans);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:#ebe4d6}
+  tr:last-child td{border-bottom:none}
+
+  /* ── Cards ── */
+  .callout{background:var(--moss-l);border:1px solid rgba(39,92,62,.2);border-radius:10px;padding:14px 18px;margin:18px 0;font-size:15px}
+  .callout p{color:var(--moss-d);margin:0}
+  .callout strong{color:var(--moss-d)}
+  .warn{background:#fef9ec;border:1px solid #f0d98c;border-radius:10px;padding:14px 18px;margin:18px 0;font-size:15px}
+  .warn p{color:#6b5a1e;margin:0}
+
+  /* ── New badge ── */
+  .badge-new{display:inline-block;background:var(--moss);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;line-height:1.5}
+
+  /* ── Compat ── */
+  .compat-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
+  .compat-pill{border:1px solid rgba(39,92,62,.25);color:var(--moss);background:var(--moss-l);border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
+
+  /* ── Footer ── */
+  footer{padding:24px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px;margin-top:24px}
+
+  @media(max-width:760px){
+    .page{grid-template-columns:1fr}
+    aside{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line)}
+    .content{padding:28px 20px 60px}
+  }
 </style>
 </head>
 <body>
-<div class="wrap">
-  <p class="top"><a href="index.html">← TOCflow home</a> · <a href="support.html">Support</a></p>
-  <p class="kicker">Plugin documentation · v1.0.2</p>
+<div class="page">
+
+<!-- ── Sidebar nav ── -->
+<aside>
+  <a class="logo" href="index.html">TOC<em>flow</em></a>
+  <nav>
+    <div class="section-label">Getting started</div>
+    <a href="#install">Install</a>
+    <a href="#quick-start">Quick start</a>
+
+    <div class="section-label">The block</div>
+    <a href="#block-sidebar">Block sidebar</a>
+    <a href="#styles">Style presets</a>
+    <a href="#skip">Skip a heading</a>
+
+    <div class="section-label">Reading Guide</div>
+    <a href="#reading-guide">Overview</a>
+    <a href="#hover-preview">Hover preview</a>
+    <a href="#guide-features">Guide features</a>
+    <a href="#section-notes">Section Planner</a>
+    <a href="#study-assistant">Study assistant</a>
+    <a href="#citations">Citations</a>
+    <a href="#reactions">Emoji reactions</a>
+
+    <div class="section-label">Site-wide</div>
+    <a href="#settings">Settings page</a>
+    <a href="#auto-insert">Auto-insert</a>
+    <a href="#shortcode">Shortcode</a>
+
+    <div class="section-label">Compatibility</div>
+    <a href="#compatibility">Overview</a>
+    <a href="#seo-plugins">SEO plugins</a>
+    <a href="#themes">Themes</a>
+    <a href="#page-builders">Page builders</a>
+    <a href="#multilingual">Multilingual &amp; more</a>
+
+    <div class="section-label">Developers</div>
+    <a href="#dev-build">Build</a>
+    <a href="#dev-filters">Filters</a>
+    <a href="#privacy">Privacy</a>
+  </nav>
+</aside>
+
+<!-- ── Main content ── -->
+<div class="content">
+  <p class="breadcrumb"><a href="index.html">← TOCflow home</a> · <a href="support.html">Support</a></p>
+  <p class="kicker">Plugin documentation · v1.2.0</p>
   <h1>TOCflow</h1>
-  <p>A server-rendered Table of Contents for the WordPress block editor. GitHub and WordPress.org slug: <code>tocflow</code>.</p>
+  <p class="intro">A server-rendered Table of Contents for the WordPress block editor — and the only TOC plugin with a built-in Reading Guide. Slug: <code>tocflow</code>.</p>
+
+  <!-- Install -->
+  <h2 id="install">1. Install</h2>
+  <p><strong>From WordPress.org</strong> — go to <em>Plugins → Add New</em>, search for <em>tocflow</em>, click Install Now.</p>
+  <p><strong>From a ZIP</strong> — download <code>tocflow.zip</code> from <a href="https://github.com/matthummel-pa/tocflow/releases/latest">GitHub Releases</a>, then <em>Plugins → Add New → Upload Plugin</em>.</p>
+  <p><strong>Developers</strong> — clone into <code>wp-content/plugins/tocflow</code> and run:</p>
+  <pre><code>npm install
+npm run build</code></pre>
+  <p>Source files are in <code>src/</code>. Compiled assets land in <code>build/</code>. Run <code>npm run start</code> for watch mode.</p>
 
-  <h2>1. Install</h2>
+  <!-- Quick start -->
+  <h2 id="quick-start">2. Quick start</h2>
   <ol>
-    <li>Download <code>tocflow.zip</code> from GitHub Releases (or your marketplace purchase).</li>
-    <li>WordPress → Plugins → Add New → Upload Plugin.</li>
-    <li>Activate. Open <strong>Settings → TOCflow</strong>.</li>
+    <li>Edit a post that has Heading blocks (H2–H6 appear by default; H1 is off).</li>
+    <li>Click <strong>+</strong> and search for <em>Table of Contents</em>. Insert it anywhere — typically after the intro paragraph.</li>
+    <li>The editor shows a live outline. Rearrange your headings and watch it update.</li>
+    <li>To enable sitewide auto-insert, open <strong>Settings → TOCflow</strong> in wp-admin.</li>
   </ol>
-  <p>Developers: clone the repo into <code>wp-content/plugins/tocflow</code>, then <code>npm install && npm run build</code>.</p>
 
-  <h2>2. The block</h2>
-  <p>Insert <strong>Table of Contents</strong> in a post that contains Heading blocks. The editor shows a live outline.</p>
+  <!-- Block sidebar -->
+  <h2 id="block-sidebar">3. Block sidebar</h2>
+  <p>Every block instance is configured through the block sidebar in the editor.</p>
   <table>
-    <thead><tr><th>Sidebar</th><th>Purpose</th></tr></thead>
+    <thead><tr><th>Panel / control</th><th>What it does</th></tr></thead>
     <tbody>
-      <tr><td>Title show/hide and title element</td><td>Visible label; paragraph or H2–H4</td></tr>
-      <tr><td>H1–H6 toggles</td><td>Which levels appear (H1 off by default)</td></tr>
-      <tr><td>Numbered list / nested numbering</td><td>Bullets, 1 2 3, or 1.1.1 counters</td></tr>
-      <tr><td>Hide markers, two columns, compact, underline, max height</td><td>Layout</td></tr>
-      <tr><td>Style preset</td><td>Styles panel: default, minimal, boxed, underline, card</td></tr>
-      <tr><td>Sticky / collapsible / highlight / smooth scroll</td><td>Reading behavior; smooth scroll can inherit the site setting</td></tr>
-      <tr><td>Minimum headings / scroll offset override</td><td><code>-1</code> = use site setting</td></tr>
+      <tr><td>Title — text, show/hide, HTML tag</td><td>Editable on the canvas via RichText. Tag: P (default), H2, H3, or H4.</td></tr>
+      <tr><td>H1–H6 toggles</td><td>Which heading levels appear in this block's outline.</td></tr>
+      <tr><td>Numbered list (toolbar)</td><td>Switches between <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code>.</td></tr>
+      <tr><td>Numbering style</td><td>Sequential (1, 2, 3) or Nested (1, 1.1, 1.1.1).</td></tr>
+      <tr><td>Hide markers</td><td>Removes bullets and browser-generated numbers while preserving structure.</td></tr>
+      <tr><td>Style preset</td><td>Styles panel: Default · Minimal · Boxed · Underline · Card.</td></tr>
+      <tr><td>Two columns</td><td>Displays the outline in two columns; collapses to one on small screens.</td></tr>
+      <tr><td>Compact spacing</td><td>Tighter line height for shorter lists.</td></tr>
+      <tr><td>Underline links</td><td>Always underline TOC links (vs. underline-on-hover).</td></tr>
+      <tr><td>Max height</td><td>Adds a scrollable container when the list exceeds N pixels.</td></tr>
+      <tr><td>Sticky</td><td>Keeps the block fixed during scroll using <code>position: sticky</code>.</td></tr>
+      <tr><td>Collapsible / start collapsed</td><td>Adds a toggle button. Start collapsed defaults the block closed.</td></tr>
+      <tr><td>Highlight active heading</td><td>Scroll-spy marks the section currently in view with <code>aria-current</code>.</td></tr>
+      <tr><td>Smooth scroll</td><td>Per-block override: Inherit site default · On · Off.</td></tr>
+      <tr><td>Scroll offset override</td><td>Pixels to leave above a sticky header. −1 inherits the site-wide offset.</td></tr>
+      <tr><td>Minimum headings</td><td>Hide this block when the post has fewer matching headings.</td></tr>
     </tbody>
   </table>
-  <p>Skip a heading: additional CSS class <code>no-toc</code> or <code>tocflow-skip</code>.</p>
 
-  <h2>3. Site settings</h2>
-  <p><strong>Settings → TOCflow</strong></p>
+  <!-- Styles -->
+  <h2 id="styles">4. Style presets</h2>
+  <p>Switch presets from the <strong>Styles panel</strong> (the paintbrush icon in the toolbar). Each preset is a Gutenberg Block Style (<code>is-style-{name}</code>) so it works with theme.json color palettes and FSE style overrides.</p>
+  <table>
+    <thead><tr><th>Preset</th><th>Description</th></tr></thead>
+    <tbody>
+      <tr><td><strong>Default</strong></td><td>Clean list with a subtle left border accent.</td></tr>
+      <tr><td><strong>Minimal</strong></td><td>No border, no background, plain links.</td></tr>
+      <tr><td><strong>Boxed</strong></td><td>Contained in a card with background fill and border.</td></tr>
+      <tr><td><strong>Underline</strong></td><td>Links always underlined; minimal chrome.</td></tr>
+      <tr><td><strong>Card</strong></td><td>Elevated card with shadow and accent border.</td></tr>
+    </tbody>
+  </table>
+  <p>All presets inherit the theme's foreground and link colors via CSS custom properties.</p>
+
+  <!-- Skip -->
+  <h2 id="skip">5. Skip a heading</h2>
+  <p>Add CSS class <code>no-toc</code> or <code>tocflow-skip</code> to a Heading block under <em>Advanced → Additional CSS class(es)</em>. That heading is excluded from both the TOC list and the anchor injection.</p>
+
+  <!-- Reading Guide -->
+  <h2 id="reading-guide">6. Reading Guide <span class="badge-new">1.1+</span></h2>
+  <p class="intro">Reading Guide mode transforms the TOC from a navigation list into an intelligent reading companion. Enable it in the block sidebar under <strong>Reading Guide</strong>.</p>
+  <div class="callout"><p><strong>All features are opt-in.</strong> Disabling everything gives you a standard, fast, server-rendered TOC identical to v1.0. Enable features individually as needed.</p></div>
+
+  <h3 id="hover-preview">Hover section preview</h3>
+  <p>A floating tooltip showing the section's opening text appears when a reader hovers over (or focuses) a TOC link. The reader sees section content without scrolling.</p>
   <ul>
-    <li>Smooth scroll (honors reduced motion)</li>
-    <li>Scroll offset in pixels (sticky header clearance)</li>
-    <li>Highlight the heading in view</li>
-    <li>Minimum headings before a TOC prints</li>
-    <li>Auto-generate the Gutenberg block: off, top of content, or after the first heading, with title, heading levels, style, and layout</li>
-    <li>Optional ItemList JSON-LD</li>
-    <li>Delete settings when the plugin is deleted (never on deactivate)</li>
+    <li>Toggle: <strong>Reading Guide → Hover section preview</strong>. Works without enabling Full Reading Guide.</li>
+    <li>Text is extracted server-side from your parsed block content — no JS fetch, no network call.</li>
+    <li>Tooltip is positioned right or left of the link depending on available viewport space, and clamped vertically within the viewport.</li>
+    <li>Accessible: the link gets <code>aria-describedby</code> pointing to a <code>role="tooltip"</code> span — screen readers access it on focus.</li>
+    <li>60 ms hide debounce for smooth movement between adjacent items.</li>
   </ul>
 
-  <h2>4. Shortcode</h2>
-<pre>[tocflow]
-[tocflow title="On this page" ordered="1" numbering="nested" style="boxed" collapsible="1"]</pre>
-  <p>Attributes: <code>title</code>, <code>showtitle</code>, <code>titletag</code>, <code>h1</code>–<code>h6</code> (<code>1</code>/<code>0</code>), <code>ordered</code>, <code>numbering</code> (<code>default</code> or <code>nested</code>), <code>markers</code>, <code>collapsible</code>, <code>collapsed</code>, <code>sticky</code>, <code>compact</code>, <code>columns</code>, <code>underline</code>, <code>highlight</code>, <code>maxheight</code>, <code>min</code>, <code>smooth</code> (<code>inherit</code>/<code>on</code>/<code>off</code>), <code>style</code>.</p>
+  <h3 id="guide-features">Full Reading Guide features</h3>
+  <p>Enable with <strong>Reading Guide → Full Reading Guide</strong>. Each sub-feature can be toggled independently.</p>
+  <table>
+    <thead><tr><th>Feature</th><th>How it works</th></tr></thead>
+    <tbody>
+      <tr><td><strong>Section content previews</strong></td><td>Always-visible opening ~20 words beneath each TOC link. Extracted server-side from block content; container blocks (Group, Columns, Cover) are handled without double-counting.</td></tr>
+      <tr><td><strong>Section length bars</strong></td><td>Thin bar showing word count as a proportion of the longest section. Rendered as a CSS custom property (<code>--tocflow-density</code>) set per item at PHP render time.</td></tr>
+      <tr><td><strong>Read-time estimates</strong></td><td><code>~N min</code> badge. Calculated as <code>ceil(words / 200)</code> at render time. Minimum 1 min.</td></tr>
+      <tr><td><strong>Reading progress</strong></td><td>IntersectionObserver fades TOC items as the reader scrolls each heading past the top of the viewport. No timers; pure intersection tracking.</td></tr>
+    </tbody>
+  </table>
 
-  <h2>5. Theme CSS</h2>
-  <p>Hooks: <code>.tocflow</code>, <code>.tocflow--boxed</code> (and other presets), <code>.tocflow.is-sticky</code>, <code>.tocflow.is-collapsed</code>, <code>.tocflow__link.is-active</code>, <code>.tocflow__title</code>.</p>
+  <h3 id="section-notes">Section Planner (author → reader) <span class="badge-new">1.2</span></h3>
+  <p>Writers type a short teaser or hook per heading in the <strong>Section Planner</strong> sidebar panel and can mark each heading as ✏️ Draft, 🔄 In progress, or ✅ Done. Status is stored in the <code>sectionStatus</code> block attribute; teasers stay in <code>sectionNotes</code> (objects keyed by heading slug).</p>
+  <p>On the front end, each section with a note shows a small ✍ button. The reader taps it to reveal the note. No database round-trip — the note is in the block markup.</p>
+  <div class="warn"><p><strong>Notes are per-block-instance.</strong> If you have two TOC blocks in a post, each stores its own notes independently.</p></div>
 
-  <h2>6. Developers</h2>
+  <h3 id="study-assistant">Study assistant <span class="badge-new">New in 1.2</span></h3>
+  <p>These reader tools are opt-in. They store state in the browser only — no accounts, no server calls.</p>
+  <table>
+    <thead><tr><th>Feature</th><th>How it works</th></tr></thead>
+    <tbody>
+      <tr><td><strong>Reader note pads</strong></td><td>A 📝 button per section opens a private pad stored in <code>localStorage</code>. Toggle: <strong>Reader note pads</strong> or shortcode <code>rnotes="1"</code>.</td></tr>
+      <tr><td><strong>Reading progress bar</strong></td><td>A thin 0–100% bar tracks headings scrolled past via IntersectionObserver. Toggle or <code>rprogress="1"</code>.</td></tr>
+      <tr><td><strong>Resume bookmark</strong></td><td>Remembers the last-read heading and shows a ↩ Resume button on return visits. Toggle or <code>bookmark="1"</code>.</td></tr>
+      <tr><td><strong>Total read-time badge</strong></td><td>When Reading Guide + read-time are on, the TOC header shows the aggregated read time for the post.</td></tr>
+    </tbody>
+  </table>
+
+  <h3 id="citations">Per-section academic citations <span class="badge-new">New in 1.1</span></h3>
+  <p>A <strong>§</strong> button on each TOC item copies a formatted academic citation for that section — including the direct <code>#anchor</code> URL.</p>
+  <p>Supported formats: <strong>APA</strong>, <strong>MLA</strong>, <strong>Chicago</strong>, <strong>Harvard</strong>, <strong>Plain link</strong>. Choose the default in <em>Reading Guide → Citation format</em>.</p>
+  <p>All citation data comes from WordPress: <code>get_the_author_meta('display_name')</code>, <code>get_the_title()</code>, <code>get_bloginfo('name')</code>, <code>get_the_date('Y-m-d')</code>, <code>get_permalink()</code>. <strong>Zero external API calls.</strong></p>
+  <p><strong>Example APA output:</strong></p>
+  <pre><code>Smith, J. (2026, September 8). Section Title. In Post Title. Site Name. https://example.com/post/#section-slug</code></pre>
+
+  <h3 id="reactions">Emoji reactions (reader → writer)</h3>
+  <p>Readers react to individual sections with four emoji: 💡 Insightful · ⭐ Saved · 🤔 Unclear · ✅ Got it.</p>
   <ul>
-    <li>Block: <code>tocflow/table-of-contents</code></li>
-    <li>Heading map: <code>TOCflow_Headings::get_all( $post_id )</code></li>
-    <li>Do not declare functions in <code>src/render.php</code></li>
-    <li>Text domain literal: <code>'tocflow'</code></li>
-    <li>Build: <code>npm run build</code></li>
+    <li>State is stored in <code>localStorage</code> with a key of <code>tocflow-r-{postId}-{slug}-{emoji}</code>.</li>
+    <li>Reactions are per-device and per-browser. Nothing is sent to your server or any third party.</li>
+    <li>Accessible: each button has <code>aria-pressed</code> reflecting its state.</li>
+    <li>Respects <code>prefers-reduced-motion</code> — the pop animation is disabled when the user prefers reduced motion.</li>
   </ul>
-  <p>See <a href="https://github.com/matthummel-pa/tocflow/blob/main/docs/DEVELOPER_SOP.md">DEVELOPER_SOP.md</a> and <a href="https://github.com/matthummel-pa/tocflow/blob/main/docs/NAMING.md">NAMING.md</a>.</p>
 
-  <h2>7. Changelog</h2>
-  <p>v1.0.2 — WordPress.org Plugin Check cleanup (`load_plugin_textdomain` removed, `Tested up to` 7.1, GPLv2 or later). Behavior unchanged from 1.0.1.</p>
-  <p>v1.0.1 — installable GitHub zip, docs and packaging polish on top of the 1.0 feature set.</p>
-  <p>v1.0.0 — live preview, presets, collapse, sticky, scroll-spy, auto-insert, shortcode, admin docs, marketplace packaging.</p>
-  <p>Full list: <a href="https://github.com/matthummel-pa/tocflow/blob/main/CHANGELOG.md">CHANGELOG.md</a></p>
+  <!-- Settings -->
+  <h2 id="settings">7. Settings → TOCflow</h2>
+  <p>Find these under <strong>WordPress admin → Settings → TOCflow</strong>.</p>
 
-  <h2>8. License</h2>
-  <p>TOCflow is <strong>100% GPLv2 or later</strong> — PHP, JavaScript, CSS, and images. Copyright 2026 Matt Hummel. That is the WordPress.org requirement and the Envato “100% GPL” option (not a split license). Selling copies is allowed; you are selling the package and support, not locking the code.</p>
-</div>
-<footer>
-  <div class="wrap">
-    © 2026 <a href="https://matthummel.com">Matt Hummel</a> ·
-    <a href="index.html">Home</a> ·
-    <a href="support.html">Support</a> ·
-    GPLv2 or later
+  <h3>Reading experience</h3>
+  <table>
+    <thead><tr><th>Setting</th><th>Default</th><th>Notes</th></tr></thead>
+    <tbody>
+      <tr><td>Smooth scroll</td><td>On</td><td>Animates anchor jumps. Automatically skipped for users who prefer reduced motion.</td></tr>
+      <tr><td>Scroll offset (px)</td><td>0</td><td>Pixels of space to leave under a sticky admin bar or theme header. Typical values: 32 (admin bar) + header height.</td></tr>
+      <tr><td>Highlight active heading</td><td>On</td><td>Site-wide default. Overridable per block.</td></tr>
+      <tr><td>Minimum headings</td><td>2</td><td>Hides the TOC when a post has fewer matching headings. Overridable per block.</td></tr>
+    </tbody>
+  </table>
+
+  <h3 id="auto-insert">Auto-generate the block</h3>
+  <table>
+    <thead><tr><th>Setting</th><th>Notes</th></tr></thead>
+    <tbody>
+      <tr><td>Position: Off / Top of content / After first heading</td><td>Posts already containing the block or <code>[tocflow]</code> shortcode are skipped.</td></tr>
+      <tr><td>Post types</td><td>Checkboxes for all registered public post types.</td></tr>
+      <tr><td>Title text and show/hide</td><td>Default title for the auto-generated block.</td></tr>
+      <tr><td>Title element</td><td>P, H2, H3, or H4.</td></tr>
+      <tr><td>Heading levels H1–H6</td><td>H1 off by default.</td></tr>
+      <tr><td>List type and numbering</td><td>Bullets, sequential, or nested.</td></tr>
+      <tr><td>Style preset</td><td>Default, Minimal, Boxed, Underline, Card.</td></tr>
+      <tr><td>Layout options</td><td>Compact, two columns, underline links, max height.</td></tr>
+      <tr><td>Behavior</td><td>Sticky, collapsible, start collapsed.</td></tr>
+    </tbody>
+  </table>
+
+  <h3>SEO &amp; data</h3>
+  <table>
+    <thead><tr><th>Setting</th><th>Default</th><th>Notes</th></tr></thead>
+    <tbody>
+      <tr><td>Schema markup (JSON-LD)</td><td>Off</td><td>Outputs an ItemList structured data block for the outline. Leave off if Yoast SEO, Rank Math, or Schema Pro is already outputting a TOC schema.</td></tr>
+      <tr><td>Delete data on uninstall</td><td>Off</td><td>Removes plugin options when the plugin is deleted. Deactivating never deletes data.</td></tr>
+    </tbody>
+  </table>
+
+  <!-- Shortcode -->
+  <h2 id="shortcode">8. Shortcode</h2>
+  <p>Use <code>[tocflow]</code> in Classic Editor content, text widgets, or theme templates via <code>do_shortcode('[tocflow]')</code>.</p>
+  <p>All block attributes are available as shortcode attributes (snake_case or camelCase):</p>
+  <pre><code>[tocflow title="Contents" ordered="1" numbering="nested" style="boxed" h4="1" min="3"]</code></pre>
+  <table>
+    <thead><tr><th>Attribute</th><th>Values</th><th>Default</th></tr></thead>
+    <tbody>
+      <tr><td><code>title</code></td><td>Any string</td><td>Table of Contents</td></tr>
+      <tr><td><code>showtitle</code></td><td>0 / 1</td><td>1</td></tr>
+      <tr><td><code>titletag</code></td><td>p, h2, h3, h4</td><td>p</td></tr>
+      <tr><td><code>h1</code>–<code>h6</code></td><td>0 / 1</td><td>h2=1, h3=1, others=0</td></tr>
+      <tr><td><code>ordered</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>numbering</code></td><td>default / nested</td><td>default</td></tr>
+      <tr><td><code>markers</code></td><td>0 / 1 (1 = show)</td><td>1</td></tr>
+      <tr><td><code>collapsible</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>collapsed</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>sticky</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>compact</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>columns</code></td><td>1 / 2</td><td>1</td></tr>
+      <tr><td><code>underline</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>highlight</code></td><td>0 / 1</td><td>site default</td></tr>
+      <tr><td><code>maxheight</code></td><td>pixels (0 = unlimited)</td><td>0</td></tr>
+      <tr><td><code>min</code></td><td>integer</td><td>site default</td></tr>
+      <tr><td><code>smooth</code></td><td>inherit / on / off</td><td>inherit</td></tr>
+      <tr><td><code>style</code></td><td>default, minimal, boxed, underline, card</td><td>default</td></tr>
+      <tr><td><code>rprogress</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>bookmark</code></td><td>0 / 1</td><td>0</td></tr>
+      <tr><td><code>rnotes</code></td><td>0 / 1</td><td>0</td></tr>
+    </tbody>
+  </table>
+
+  <!-- Compatibility -->
+  <h2 id="compatibility">9. Compatibility</h2>
+  <p class="intro">Compatibility is a core design principle of TOCflow. The block inherits theme colors and fonts, never loads from third-party CDNs, and makes zero remote calls in any mode.</p>
+
+  <h3 id="seo-plugins">SEO plugins</h3>
+  <div class="compat-row">
+    <span class="compat-pill">Yoast SEO</span>
+    <span class="compat-pill">Rank Math</span>
+    <span class="compat-pill">All in One SEO</span>
+    <span class="compat-pill">Schema Pro</span>
+    <span class="compat-pill">SEOPress</span>
   </div>
-</footer>
+  <p>TOCflow's JSON-LD schema is <strong>off by default</strong> and outputs only when you enable it. If your SEO plugin already generates a TOC schema, leave TOCflow's off to avoid duplicate structured data. The block navigation landmark itself is invisible to SEO plugins.</p>
+  <div class="callout"><p><strong>Yoast &amp; Rank Math:</strong> Both plugins read heading structure directly from the post content — the TOC <code>&lt;nav&gt;</code> block does not affect their content analysis.</p></div>
+
+  <h3 id="themes">Themes</h3>
+  <p>The front-end TOC block inherits the active theme's font family, font size, and link color via <code>currentColor</code> and CSS custom properties. TOCflow never injects a branded or third-party font on the front end.</p>
+  <div class="compat-row">
+    <span class="compat-pill">Twenty Twenty-Four</span>
+    <span class="compat-pill">Twenty Twenty-Five</span>
+    <span class="compat-pill">Astra</span>
+    <span class="compat-pill">Kadence</span>
+    <span class="compat-pill">GeneratePress</span>
+    <span class="compat-pill">OceanWP</span>
+    <span class="compat-pill">Blocksy</span>
+    <span class="compat-pill">Hello Elementor</span>
+    <span class="compat-pill">Any block theme</span>
+  </div>
+
+  <h3 id="page-builders">Page builders</h3>
+  <p>Place <code>[tocflow]</code> in any Shortcode, HTML, or Code element in your page builder. TOCflow automatically reads heading data from each builder's stored meta and injects matching anchor IDs into the rendered page via a late <code>the_content</code> filter (priority 999, runs after all builder output).</p>
+  <table>
+    <thead><tr><th>Builder</th><th>Heading detection</th><th>Notes</th></tr></thead>
+    <tbody>
+      <tr><td><strong>Elementor</strong></td><td>Heading widget JSON parsed from <code>_elementor_data</code> meta</td><td>Add a Shortcode widget with <code>[tocflow]</code>. Heading and Text Editor widgets are both supported. Works with Elementor Pro.</td></tr>
+      <tr><td><strong>Bricks Builder</strong></td><td>Heading and rich-text elements parsed from <code>_bricks_page_content_2</code> meta</td><td>Use a Code or Shortcode element. Bricks heading and rich-text elements both detected.</td></tr>
+      <tr><td><strong>Divi</strong></td><td>HTML scan of rendered output</td><td>Use a Code module or Shortcode module for <code>[tocflow]</code>. Heading tags inside Divi text/heading modules are captured in the rendered HTML.</td></tr>
+      <tr><td><strong>Beaver Builder</strong></td><td>HTML scan; shortcode detection in builder meta</td><td>Use an HTML module or Shortcode module. Beaver Builder module data is scanned for <code>tocflow</code> references to trigger ID injection.</td></tr>
+      <tr><td><strong>WPBakery / Visual Composer</strong></td><td>HTML scan of rendered output</td><td>Use a Raw HTML element or the Shortcode element. Works with both the Classic and block-based WPBakery.</td></tr>
+      <tr><td><strong>Oxygen Builder</strong></td><td>HTML scan; <code>ct_builder_shortcodes</code> meta detected</td><td>Use a Shortcode element or Code Block with <code>[tocflow]</code>.</td></tr>
+      <tr><td><strong>Breakdance</strong></td><td>HTML scan; <code>breakdance_data</code> meta detected</td><td>Use a Shortcode element. Compatible with Breakdance's heading components.</td></tr>
+      <tr><td><strong>Gutenberg (native)</strong></td><td>Block parse via <code>parse_blocks()</code></td><td>The canonical integration path. Heading IDs are injected via the <code>render_block</code> filter — no <code>the_content</code> overhead on block sites.</td></tr>
+    </tbody>
+  </table>
+  <div class="callout"><p><strong>How builder ID injection works:</strong> A <code>the_content</code> filter at priority 999 runs after every page builder has finished generating its HTML. TOCflow uses <code>WP_HTML_Tag_Processor</code> (or a regex fallback for older WordPress) to find heading tags without an <code>id</code> attribute and stamps each one with the same slug used in the TOC link. Headings with existing IDs are left untouched.</p></div>
+
+  <h3 id="multilingual">Multilingual</h3>
+  <table>
+    <thead><tr><th>Plugin / tool</th><th>Status</th><th>Notes</th></tr></thead>
+    <tbody>
+      <tr><td>WPML</td><td>✓ Compatible</td><td>All user-facing strings use the <code>tocflow</code> text domain and are translatable via WPML's string translation module.</td></tr>
+      <tr><td>Polylang</td><td>✓ Compatible</td><td>No locale-specific slug or permalink issues.</td></tr>
+      <tr><td>TranslatePress</td><td>✓ Compatible</td><td>Front-end translated strings render correctly in the TOC.</td></tr>
+      <tr><td>WooCommerce</td><td>✓ Compatible</td><td>Works in product descriptions that use Heading blocks (requires WooCommerce block editor for products).</td></tr>
+      <tr><td>BuddyPress / BuddyBoss</td><td>✓ Compatible</td><td>Works in any post type registered as public.</td></tr>
+    </tbody>
+  </table>
+
+  <!-- Developer -->
+  <h2 id="dev-build">10. Developer: build</h2>
+  <pre><code>git clone https://github.com/matthummel-pa/tocflow.git
+cd tocflow
+npm install
+npm run build   # production build → build/
+npm run start   # development watch mode</code></pre>
+  <p>Requires Node.js 18+ and npm 9+. The build uses <code>@wordpress/scripts</code>. Unminified source is in <code>src/</code>; compiled assets land in <code>build/</code> (gitignored, built on release via GitHub Actions).</p>
+
+  <h2 id="dev-filters">11. Developer: PHP filters</h2>
+  <p>Hook into TOCflow's rendering to customize headings, skip post types, or alter the output:</p>
+  <table>
+    <thead><tr><th>Filter</th><th>Args</th><th>Purpose</th></tr></thead>
+    <tbody>
+      <tr><td><code>tocflow_headings</code></td><td><code>$headings, $post_id</code></td><td>Modify the heading list before rendering. Each entry has <code>level</code>, <code>text</code>, <code>slug</code>.</td></tr>
+      <tr><td><code>tocflow_nav_classes</code></td><td><code>$classes, $attributes</code></td><td>Add or remove CSS classes on the <code>&lt;nav&gt;</code> wrapper.</td></tr>
+      <tr><td><code>tocflow_render_nav</code></td><td><code>$html, $attributes, $post_id</code></td><td>Filter the final rendered nav HTML.</td></tr>
+      <tr><td><code>tocflow_skip_post_types</code></td><td><code>$post_types</code></td><td>Return an array of post type slugs to exclude from auto-insert.</td></tr>
+    </tbody>
+  </table>
+  <pre><code>// Example: exclude headings with a specific CSS class
+add_filter( 'tocflow_headings', function( $headings, $post_id ) {
+    return array_filter( $headings, function( $h ) {
+        return strpos( $h['slug'], 'sponsor' ) === false;
+    });
+}, 10, 2 );</code></pre>
+
+  <h2 id="privacy">12. Privacy</h2>
+  <p>TOCflow does not collect personal data, set cookies, or call remote services. Emoji reactions use the browser's own <code>localStorage</code> — no data leaves the reader's device. Citation data is built from post meta that is already public. JSON-LD is printed only if you opt in. <a href="https://github.com/matthummel-pa/tocflow/blob/main/PRIVACY.md">Full privacy policy →</a></p>
+
+  <footer>
+    <p>© 2026 <a href="https://matthummel.com">Matt Hummel</a> · <a href="index.html">Home</a> · <a href="support.html">Support</a> · <a href="https://github.com/matthummel-pa/tocflow">GitHub</a> · GPLv2 or later</p>
+  </footer>
+</div>
+</div>
 </body>
 </html>
diff --git a/docs/index.html b/docs/index.html
index 2555dac..548102b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,11 +3,11 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>TOCflow — Table of Contents block for WordPress</title>
-<meta name="description" content="TOCflow is a server-rendered Table of Contents block for WordPress. Live preview, auto-insert, shortcode, accessible and SEO-friendly. Slug: tocflow.">
+<title>TOCflow — Reading Companion TOC block for WordPress</title>
+<meta name="description" content="TOCflow is the only WordPress Table of Contents plugin with a built-in Reading Guide: section previews, read-time estimates, hover tooltips, emoji reactions, and one-click academic citations — all server-rendered, no external APIs.">
 <link rel="canonical" href="https://matthummel-pa.github.io/tocflow/">
-<meta property="og:title" content="TOCflow — WordPress Table of Contents">
-<meta property="og:description" content="One focused Gutenberg block. Server-rendered outline from your headings.">
+<meta property="og:title" content="TOCflow — WordPress Reading Companion TOC Block">
+<meta property="og:description" content="Section previews, read-time estimates, hover tooltips, emoji reactions, and one-click academic citations. Server-rendered. Works with every theme, SEO plugin, and page builder.">
 <meta property="og:type" content="website">
 <meta property="og:url" content="https://matthummel-pa.github.io/tocflow/">
 <meta property="og:image" content="https://matthummel-pa.github.io/tocflow/assets/social-preview.png">
@@ -18,170 +18,501 @@
 <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&display=swap" rel="stylesheet">
 <style>
   :root{
-    --paper:#f3eee4; --ink:#1c1915; --muted:#5c564c; --moss:#275c3e; --moss-d:#1c3d2a;
-    --copper:#c46b32; --line:rgba(28,25,21,.12); --card:#fffaf3; --max:1080px;
+    --paper:#f3eee4; --ink:#1c1915; --muted:#5c564c;
+    --moss:#275c3e; --moss-d:#1c3d2a; --moss-l:#eaf3ed;
+    --copper:#c46b32; --copper-l:#fdf2ea;
+    --line:rgba(28,25,21,.1); --card:#fffaf3; --max:1080px;
     --sans:Outfit,"Segoe UI",system-ui,sans-serif;
+    --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
   }
   *{box-sizing:border-box}
   html{scroll-behavior:smooth}
-  body{margin:0;background:var(--paper);color:var(--ink);
-    font:600 18px/1.6 var(--sans);
-    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cpath fill='none' stroke='%23275c3e' stroke-opacity='.07' d='M0 90c30-40 60 40 90 0s60 40 90 0M0 40c30-30 60 30 90 0s60 30 90 0M0 140c30-30 60 30 90 0s60 30 90 0'/%3E%3C/svg%3E");
-  }
+  body{margin:0;background:var(--paper);color:var(--ink);font:600 18px/1.65 var(--sans)}
   a{color:var(--moss);text-underline-offset:3px}
   a:hover{color:var(--copper)}
   .wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
-  header.hero{padding:48px 0 56px;border-bottom:1px solid var(--line)}
-  .kicker{font-family:var(--sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--moss);margin:0 0 18px}
-  .hero h1{font-family:var(--sans);font-size:clamp(48px,8vw,92px);line-height:.9;letter-spacing:-.03em;margin:0 0 18px;font-weight:800}
-  .hero h1 em{font-style:normal;color:var(--moss);font-weight:800}
-  .lede{font-size:22px;max-width:38rem;color:var(--muted);margin:0 0 28px}
-  .btns{display:flex;flex-wrap:wrap;gap:12px}
-  .btn{display:inline-block;padding:12px 20px;border-radius:999px;font-family:var(--sans);font-size:16px;text-decoration:none;font-weight:700}
+
+  /* ── Top bar ── */
+  .topbar{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);display:flex;gap:12px;align-items:center}
+  .topbar a{text-decoration:none;color:var(--muted)}
+  .topbar a:hover{color:var(--moss)}
+  .topbar .sep{opacity:.35}
+
+  /* ── Hero ── */
+  header.hero{padding:56px 0 64px}
+  .kicker{font-family:var(--sans);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--moss);margin:0 0 16px}
+  .hero h1{font-family:var(--sans);font-size:clamp(44px,8vw,88px);line-height:.95;letter-spacing:-.035em;margin:0 0 22px;font-weight:800}
+  .hero h1 em{font-style:normal;color:var(--moss)}
+  .lede{font-size:20px;max-width:40rem;color:var(--muted);margin:0 0 30px;line-height:1.55}
+  .btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
+  .btn{display:inline-block;padding:11px 22px;border-radius:999px;font-size:16px;text-decoration:none;font-weight:700;font-family:var(--sans)}
   .btn.primary{background:var(--moss);color:#f4efe6}
   .btn.primary:hover{background:var(--moss-d);color:#fff}
-  .btn.ghost{border:1.5px solid var(--ink);color:var(--ink)}
-  .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
-  .chip{border:1px solid var(--line);padding:4px 10px;border-radius:999px;font-size:13px;color:var(--muted)}
-  nav.toc{display:flex;flex-wrap:wrap;gap:10px 18px;padding:16px 0;font-size:15px;border-bottom:1px solid var(--line)}
-  section{padding:48px 0;border-bottom:1px solid var(--line)}
-  h2{font-family:var(--sans);font-size:36px;margin:0 0 8px;letter-spacing:-.03em;font-weight:800}
-  .chap{font-family:var(--sans);font-weight:700;color:var(--copper);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
-  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
-  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 8px;box-shadow:0 1px 0 rgba(28,25,21,.04)}
-  .card h3{font-family:var(--sans);margin:0 0 6px;font-size:20px;font-weight:800}
-  figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
-  figure img{width:100%;height:auto;display:block;border-radius:8px}
-  figcaption{font-size:14px;color:var(--muted);margin-top:8px;text-align:center}
-  .split{display:grid;grid-template-columns:1fr 1fr;gap:22px}
-  table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
-  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:16px}
-  th{background:#ebe4d6;font-family:var(--sans);font-size:14px;font-weight:700}
-  code{background:#ebe4d6;padding:1px 6px;border-radius:4px;font-size:14px}
-  ol,ul{padding-left:1.2rem}
-  details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px 16px;margin:8px 0}
-  summary{cursor:pointer;font-family:var(--sans);font-weight:700;padding:10px 0}
-  footer{padding:36px 0 48px;color:var(--muted);font-size:15px}
-  .name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:#1c1915;color:#f3eee4;padding:10px 14px;border-radius:10px;display:inline-block}
-  @media(max-width:800px){.grid,.split{grid-template-columns:1fr}.hero h1{font-size:52px}}
+  .btn.ghost{border:1.5px solid rgba(28,25,21,.3);color:var(--ink);background:transparent}
+  .btn.ghost:hover{border-color:var(--moss);color:var(--moss)}
+  .chips{display:flex;flex-wrap:wrap;gap:7px}
+  .chip{border:1px solid var(--line);padding:4px 12px;border-radius:999px;font-size:13px;color:var(--muted);background:var(--card)}
+  .chip.green{border-color:rgba(39,92,62,.25);color:var(--moss);background:var(--moss-l)}
+
+  /* ── Page nav ── */
+  .page-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px 0;font-size:15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:0}
+  .page-nav a{text-decoration:none;color:var(--muted)}
+  .page-nav a:hover{color:var(--moss)}
+
+  /* ── Sections ── */
+  section{padding:56px 0;border-bottom:1px solid var(--line)}
+  .chap{font-weight:700;color:var(--copper);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
+  h2{font-family:var(--sans);font-size:clamp(28px,4vw,38px);margin:0 0 10px;letter-spacing:-.03em;font-weight:800;line-height:1.1}
+  h3{font-family:var(--sans);font-size:20px;margin:24px 0 6px;font-weight:800}
+  p{margin:0 0 14px}
+
+  /* ── Feature grid ── */
+  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
+  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 20px 14px}
+  .card h3{font-size:17px;margin:0 0 6px}
+  .card p{font-size:15px;color:var(--muted);margin:0}
+  .card.accent{background:var(--moss-l);border-color:rgba(39,92,62,.2)}
+  .card.accent h3{color:var(--moss-d)}
+  .icon{font-size:24px;margin-bottom:10px;display:block;line-height:1}
+
+  /* ── Reading Guide feature list ── */
+  .guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
+  .guide-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
+  .guide-card .g-icon{font-size:26px;flex-shrink:0;margin-top:2px;line-height:1}
+  .guide-card h3{font-size:16px;margin:0 0 4px}
+  .guide-card p{font-size:14px;color:var(--muted);margin:0}
+
+  /* ── Settings reference ── */
+  table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px}
+  th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
+  th{font-family:var(--sans);font-size:13px;font-weight:700;background:#ebe4d6;text-transform:uppercase;letter-spacing:.06em}
+  tr:last-child td{border-bottom:none}
+  code{font-family:var(--mono);background:#ebe4d6;padding:1px 6px;border-radius:4px;font-size:14px}
+
+  /* ── Compatibility ── */
+  .compat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
+  .compat-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center;font-size:14px}
+  .compat-item strong{display:block;font-size:15px;margin-bottom:3px;font-weight:800}
+  .compat-item span{color:var(--muted);font-size:13px}
+  .compat-badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--moss);font-weight:700}
+  .compat-badge::before{content:"✓";font-size:15px}
+  .compat-note{font-size:14px;color:var(--muted);margin-top:16px;font-style:italic}
+
+  /* ── FAQ ── */
+  details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:2px 18px;margin:8px 0}
+  summary{cursor:pointer;font-weight:700;padding:12px 0;font-size:17px}
+  details p{font-size:16px;padding-bottom:10px;color:var(--muted);margin:0}
+
+  /* ── Footer ── */
+  footer{padding:36px 0 56px;color:var(--muted);font-size:15px}
+
+  /* ── Slug display ── */
+  .slug{font-family:var(--mono);font-size:15px;background:#1c1915;color:#f3eee4;padding:10px 16px;border-radius:10px;display:inline-block;letter-spacing:.04em}
+
+  /* ── CTA banner ── */
+  .cta-banner{background:linear-gradient(135deg,#1c3d2e 0%,#2f6f4e 60%,#3d8a63 100%);border-radius:18px;padding:36px 32px;color:#f4faf6;margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
+  .cta-banner h3{font-size:24px;margin:0 0 6px;color:#fff}
+  .cta-banner p{margin:0;opacity:.85;font-size:16px}
+  .cta-banner .btn.white{background:#fff;color:var(--moss-d)}
+  .cta-banner .btn.white:hover{background:#e8f5ee}
+
+  /* ── Responsive ── */
+  @media(max-width:860px){
+    .grid,.guide-grid{grid-template-columns:1fr 1fr}
+    .compat-grid{grid-template-columns:repeat(2,1fr)}
+  }
+  @media(max-width:560px){
+    .grid,.guide-grid,.compat-grid{grid-template-columns:1fr}
+    .hero h1{font-size:44px}
+    .cta-banner{flex-direction:column}
+  }
 </style>
 </head>
 <body>
+
+<div class="wrap">
+  <div class="topbar">
+    <a href="documentation.html">Documentation</a>
+    <span class="sep">·</span>
+    <a href="support.html">Support</a>
+    <span class="sep">·</span>
+    <a href="https://github.com/matthummel-pa/tocflow" target="_blank" rel="noopener">GitHub</a>
+    <span class="sep">·</span>
+    <a href="https://wordpress.org/plugins/tocflow/" target="_blank" rel="noopener">WordPress.org</a>
+  </div>
+</div>
+
 <header class="hero">
   <div class="wrap">
-    <p class="kicker">WordPress plugin · slug <strong>tocflow</strong></p>
-    <h1>The outline,<br><em>already in the HTML.</em></h1>
-    <p class="lede">TOCflow is a single Gutenberg block that turns post headings into an accessible, SEO-friendly table of contents — rendered on the server, not injected by a script after paint.</p>
+    <p class="kicker">WordPress plugin · slug <strong>tocflow</strong> · v1.2.0</p>
+    <h1>The TOC that reads<br><em>with your reader.</em></h1>
+    <p class="lede">TOCflow is the first Table of Contents block with a built-in Reading Guide — section previews, read-time estimates, hover tooltips, emoji reactions, and one-click academic citations. Server-rendered. Zero external APIs. Works with every theme and SEO plugin.</p>
     <div class="btns">
-      <a class="btn primary" href="https://github.com/matthummel-pa/tocflow/releases/latest">Download tocflow.zip</a>
-      <a class="btn ghost" href="documentation.html">Documentation</a>
-      <a class="btn ghost" href="support.html">Support</a>
+      <a class="btn primary" href="https://github.com/matthummel-pa/tocflow/releases/latest">Download free — tocflow.zip</a>
+      <a class="btn ghost" href="documentation.html">Full documentation</a>
+      <a class="btn ghost" href="#study-assistant">What's new in 1.2</a>
     </div>
-    <div class="meta">
-      <span class="chip">v1.0.2</span>
-      <span class="chip">WordPress 6.4+</span>
-      <span class="chip">PHP 7.4+</span>
+    <div class="chips">
+      <span class="chip green">v1.2.0</span>
+      <span class="chip">WordPress 6.4 – 7.1</span>
+      <span class="chip">PHP 7.4 – 8.3</span>
       <span class="chip">GPL-2.0-or-later</span>
-      <span class="chip">GitHub repo: tocflow</span>
+      <span class="chip">No ads · No accounts · No tracking</span>
     </div>
   </div>
 </header>
 
 <div class="wrap">
-  <nav class="toc" aria-label="On this page">
-    <a href="#name">Name</a>
+  <nav class="page-nav" aria-label="On this page">
     <a href="#features">Features</a>
-    <a href="#screens">Screens</a>
-    <a href="#start">Quick start</a>
+    <a href="#study-assistant">Study assistant</a>
+    <a href="#reading-guide">Reading Guide</a>
     <a href="#settings">Settings</a>
+    <a href="#compatibility">Compatibility</a>
+    <a href="#quick-start">Quick start</a>
     <a href="#faq">FAQ</a>
   </nav>
 
-  <section id="name">
-    <p class="chap">Chapter 01</p>
-    <h2>What to call it</h2>
-    <p>On GitHub, WordPress.org, and in <code>wp-content/plugins/</code>, the name is the slug:</p>
-    <p class="name">tocflow</p>
-    <p>Display name <strong>TOCflow</strong>. Directory title can read “TOCflow – Table of Contents Block.” Do not rename the repo to <code>wp-toc</code> or <code>toc-flow-plugin</code> — invented brands stay one lowercase token, same idea as Akismet or Jetpack. <a href="https://github.com/matthummel-pa/tocflow/blob/main/docs/NAMING.md">Full naming notes</a>.</p>
-  </section>
-
+  <!-- ── Standard features ── -->
   <section id="features">
-    <p class="chap">Chapter 02</p>
-    <h2>What it does</h2>
+    <p class="chap">What it does</p>
+    <h2>A complete Table of Contents block — and then some.</h2>
+    <p style="color:var(--muted);max-width:38rem">All the things you'd expect from a TOC plugin, built properly on the WordPress block editor with no shortcuts.</p>
     <div class="grid">
-      <article class="card"><h3>Live preview</h3><p>The editor outline updates as you add Heading blocks. No placeholder-only box.</p></article>
-      <article class="card"><h3>Server-rendered</h3><p>The <code>&lt;nav&gt;</code> is in the first response. Search engines and screen readers see it immediately.</p></article>
-      <article class="card"><h3>Honest anchors</h3><p>IDs are injected with the same slug map the list uses. Custom HTML anchors win.</p></article>
-      <article class="card"><h3>Auto-insert</h3><p>Optional site-wide TOC at the top of content or after the first heading.</p></article>
-      <article class="card"><h3>Shortcode</h3><p><code>[tocflow]</code> for classic content and theme templates.</p></article>
-      <article class="card"><h3>Reading aids</h3><p>Smooth scroll + offset, collapse, sticky, scroll-spy. Reduced motion is respected.</p></article>
+      <article class="card">
+        <span class="icon">🗂</span>
+        <h3>Live editor preview</h3>
+        <p>The outline updates in real time as you add or reorder Heading blocks. No placeholder-only box.</p>
+      </article>
+      <article class="card">
+        <span class="icon">⚡</span>
+        <h3>Server-rendered</h3>
+        <p>The <code>&lt;nav&gt;</code> is in the HTML response. Search engines and screen readers see it before any JavaScript runs.</p>
+      </article>
+      <article class="card">
+        <span class="icon">🔗</span>
+        <h3>Accurate anchors</h3>
+        <p>Custom HTML anchors on a heading win. Anchors are injected at render time using the same slug map as the list.</p>
+      </article>
+      <article class="card">
+        <span class="icon">🎨</span>
+        <h3>Five style presets</h3>
+        <p>Default, Minimal, Boxed, Underline, Card — all switchable from the Styles panel with a single click.</p>
+      </article>
+      <article class="card">
+        <span class="icon">📌</span>
+        <h3>Sticky &amp; collapsible</h3>
+        <p>Keep the TOC in view while scrolling. Let readers collapse it. Highlight the active section as they scroll.</p>
+      </article>
+      <article class="card">
+        <span class="icon">🌐</span>
+        <h3>Auto-insert sitewide</h3>
+        <p>Generate the TOC at the top of content or after the first heading across all posts — no per-post editing needed.</p>
+      </article>
+      <article class="card">
+        <span class="icon">📝</span>
+        <h3>Shortcode</h3>
+        <p><code>[tocflow]</code> for Classic Editor content, widgets, and theme templates via <code>do_shortcode()</code>.</p>
+      </article>
+      <article class="card">
+        <span class="icon">♿</span>
+        <h3>Accessible</h3>
+        <p>Proper <code>&lt;nav&gt;</code> landmark, ARIA labels, keyboard navigation, and <code>aria-current</code> on the active link.</p>
+      </article>
+      <article class="card">
+        <span class="icon">📊</span>
+        <h3>JSON-LD schema</h3>
+        <p>Optional ItemList schema markup. Opt-in and off by default — safe alongside Yoast, Rank Math, and Schema Pro.</p>
+      </article>
     </div>
   </section>
 
-  <section id="screens">
-    <p class="chap">Chapter 03</p>
-    <h2>In the editor, on the page</h2>
-    <div class="split">
-      <figure>
-        <img src="assets/tocflow-settings-panel.svg" alt="TOCflow block settings in the WordPress editor">
-        <figcaption>Block sidebar — heading levels, list style, and five style presets.</figcaption>
-      </figure>
-      <figure>
-        <img src="assets/tocflow-output.svg" alt="Front-end table of contents">
-        <figcaption>Front-end nested outline generated from the post.</figcaption>
-      </figure>
+  <!-- ── Study assistant ── -->
+  <section id="study-assistant">
+    <p class="chap">New in v1.2.0 — study assistant</p>
+    <h2>Private notes, a progress bar, and a resume bookmark.</h2>
+    <p style="color:var(--muted);max-width:42rem">Opt-in tools for long-form reading. State stays in the reader’s browser — no accounts, no server, no tracking.</p>
+    <div class="guide-grid">
+      <div class="guide-card">
+        <span class="g-icon">📝</span>
+        <div>
+          <h3>Reader note pads</h3>
+          <p>A 📝 button on each section lets readers jot personal notes. Stored in <code>localStorage</code> only. Enable with <code>rnotes="1"</code> or the block sidebar toggle.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">📊</span>
+        <div>
+          <h3>Reading progress bar</h3>
+          <p>A thin animated bar shows 0–100% of the document read, based on headings scrolled past. Enable with <code>rprogress="1"</code>.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">↩</span>
+        <div>
+          <h3>Resume bookmark</h3>
+          <p>TOCflow remembers the last heading the reader reached and offers a ↩ Resume button on the next visit. Enable with <code>bookmark="1"</code>.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">✅</span>
+        <div>
+          <h3>Section Planner</h3>
+          <p>Writers mark each heading Draft, In progress, or Done in the editor, and can still attach a reader-facing teaser note.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">⏱</span>
+        <div>
+          <h3>Total read-time badge</h3>
+          <p>When Reading Guide + read-time are on, the TOC header shows the aggregated read time for the whole post.</p>
+        </div>
+      </div>
     </div>
   </section>
 
-  <section id="start">
-    <p class="chap">Chapter 04</p>
-    <h2>Quick start</h2>
-    <ol>
-      <li>Install and activate the plugin from the <a href="https://github.com/matthummel-pa/tocflow/releases/latest">latest ZIP</a>.</li>
-      <li>Edit a post that has Heading blocks.</li>
-      <li>Insert <strong>Table of Contents</strong>.</li>
-      <li>Optional: <strong>Settings → TOCflow</strong> for scroll offset and auto-insert.</li>
-    </ol>
-    <p>Skip a heading by adding the CSS class <code>no-toc</code> on that Heading block.</p>
+  <!-- ── Reading Guide ── -->
+  <section id="reading-guide">
+    <p class="chap">From v1.1.0 — what no other TOC plugin does</p>
+    <h2>Reading Guide mode turns your TOC into a reading companion.</h2>
+    <p style="color:var(--muted);max-width:42rem">Enable one toggle in the block sidebar. Every enrichment is extracted from your block content server-side — zero JavaScript fetches, zero external services, zero accounts.</p>
+    <div class="guide-grid">
+      <div class="guide-card">
+        <span class="g-icon">👁</span>
+        <div>
+          <h3>Hover section preview</h3>
+          <p>Hovering over any TOC link pops a floating tooltip with the section's opening text. Reader sees the content without scrolling. Works on keyboard focus too. Smart viewport-aware positioning.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">📖</span>
+        <div>
+          <h3>Section content previews</h3>
+          <p>The opening ~20 words of each section appear beneath its TOC link, extracted server-side from your block content. No JS fetch. Works with nested blocks (Group, Columns, Cover).</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">📏</span>
+        <div>
+          <h3>Content density bars</h3>
+          <p>A thin bar under each TOC link shows that section's word count as a proportion of the longest section. Readers see long vs short at a glance without reading a word.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">⏱</span>
+        <div>
+          <h3>Per-section read-time</h3>
+          <p><em>~N min</em> badge alongside each link, computed at PHP render time (word count ÷ 200 wpm). Readers budget their attention before they click.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">✅</span>
+        <div>
+          <h3>Reading progress</h3>
+          <p>As a reader scrolls past each heading, its TOC item fades out. The outline becomes a live checklist of what has been read and what remains.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">✍️</span>
+        <div>
+          <h3>Author section notes</h3>
+          <p>Type a teaser or hook per heading in the block editor's Section Notes panel. Readers reveal it with a tap. Stored in block attributes — no database round-trip, no extra query.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">💡</span>
+        <div>
+          <h3>Emoji reactions</h3>
+          <p>Readers react per section: 💡 Insightful · ⭐ Saved · 🤔 Unclear · ✅ Got it. Stored in <code>localStorage</code>. Zero server calls. Zero accounts. Zero tracking.</p>
+        </div>
+      </div>
+      <div class="guide-card">
+        <span class="g-icon">§</span>
+        <div>
+          <h3>Per-section academic citations</h3>
+          <p>One-click copy of a formatted citation (APA, MLA, Chicago, Harvard, or plain link) for any section, including the direct <code>#anchor</code>. Built from WordPress post meta — no external API.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="cta-banner">
+      <div>
+        <h3>Every feature is opt-in.</h3>
+        <p>Disable everything and TOCflow is a clean, fast, server-rendered TOC. Enable Reading Guide features one by one in the block sidebar.</p>
+      </div>
+      <a class="btn white" href="documentation.html#reading-guide">See Reading Guide docs →</a>
+    </div>
   </section>
 
+  <!-- ── Settings ── -->
   <section id="settings">
-    <p class="chap">Chapter 05</p>
-    <h2>Settings at a glance</h2>
+    <p class="chap">Settings reference</p>
+    <h2>Two places to control TOCflow.</h2>
+    <p style="color:var(--muted)">The block sidebar controls individual block instances. <strong>Settings → TOCflow</strong> in wp-admin sets site-wide defaults.</p>
+
+    <h3>Block sidebar (per block)</h3>
+    <table>
+      <thead><tr><th>Control</th><th>What it does</th></tr></thead>
+      <tbody>
+        <tr><td>Title text, show/hide, HTML tag</td><td>Visible label and document outline tag (P, H2–H4)</td></tr>
+        <tr><td>Heading levels H1–H6</td><td>Which heading levels appear in this TOC</td></tr>
+        <tr><td>Numbered list / nested 1.1.1</td><td>Bullets, sequential numbers, or nested counters</td></tr>
+        <tr><td>Style preset</td><td>Default · Minimal · Boxed · Underline · Card (Styles panel)</td></tr>
+        <tr><td>Hide markers, two columns, compact, underline</td><td>Layout adjustments</td></tr>
+        <tr><td>Max height</td><td>Scroll within the TOC when list overflows</td></tr>
+        <tr><td>Sticky</td><td>Keeps the TOC fixed as the page scrolls</td></tr>
+        <tr><td>Collapsible / start collapsed</td><td>Reader-controlled toggle</td></tr>
+        <tr><td>Highlight active heading</td><td>Scroll-spy marks the section currently in view</td></tr>
+        <tr><td>Smooth scroll / offset override</td><td>Per-block override of the site-wide setting</td></tr>
+        <tr><td>Minimum headings</td><td>Hide this block when the post has fewer headings</td></tr>
+        <tr><td><strong>Hover section preview</strong></td><td>Floating tooltip on hover — no full Reading Guide needed</td></tr>
+        <tr><td><strong>Full Reading Guide</strong></td><td>Inline previews, density bars, read time, progress, reactions, citations</td></tr>
+        <tr><td><strong>Section Planner</strong></td><td>Per-heading writing status plus author teaser, revealed by reader tap</td></tr>
+        <tr><td><strong>Reader note pads</strong></td><td>Private per-section notes in localStorage</td></tr>
+        <tr><td><strong>Reading progress bar</strong></td><td>0–100% document progress from headings scrolled past</td></tr>
+        <tr><td><strong>Resume bookmark</strong></td><td>Return-visit jump to the last-read heading</td></tr>
+        <tr><td>Citation format</td><td>APA · MLA · Chicago · Harvard · Plain link</td></tr>
+      </tbody>
+    </table>
+
+    <h3>Settings → TOCflow (site-wide)</h3>
     <table>
-      <thead><tr><th>Control</th><th>Where</th><th>Does</th></tr></thead>
+      <thead><tr><th>Control</th><th>What it does</th></tr></thead>
       <tbody>
-        <tr><td>Title (show / heading tag)</td><td>Block sidebar + canvas</td><td>Visible label and document-outline tag</td></tr>
-      <tr><td>Heading levels H1–H6, numbered list, nested 1.1 numbering</td><td>Block sidebar / toolbar</td><td>Per-post outline</td></tr>
-      <tr><td>Hide markers, two columns, compact, underline, max height</td><td>Block sidebar</td><td>Layout</td></tr>
-      <tr><td>Style presets</td><td>Styles panel</td><td>Default, minimal, boxed, underline, card</td></tr>
-      <tr><td>Sticky, collapsible, highlight, smooth scroll</td><td>Block sidebar</td><td>Reading behavior</td></tr>
-      <tr><td>Smooth scroll / offset / highlight / minimum headings</td><td>Settings → TOCflow</td><td>Site-wide defaults</td></tr>
-        <tr><td>Auto-generate the Gutenberg block</td><td>Settings → TOCflow</td><td>Site-wide outline; skipped if the block or shortcode is already in the post</td></tr>
-        <tr><td>Delete data on uninstall</td><td>Settings → TOCflow</td><td>Opt-in cleanup</td></tr>
-        <tr><td><code>[tocflow]</code></td><td>Content / widget</td><td>Classic or templates</td></tr>
+        <tr><td>Smooth scroll</td><td>Animate jumps to headings sitewide (respects prefers-reduced-motion)</td></tr>
+        <tr><td>Scroll offset (px)</td><td>Space to leave under a sticky admin bar or theme header</td></tr>
+        <tr><td>Highlight active heading</td><td>Site-wide default for the scroll-spy feature</td></tr>
+        <tr><td>Minimum headings</td><td>Hide the TOC when a post has fewer matching headings</td></tr>
+        <tr><td>Auto-generate position</td><td>Off · Top of content · After first heading — sitewide</td></tr>
+        <tr><td>Post types</td><td>Which post types get the auto-generated TOC</td></tr>
+        <tr><td>Auto TOC: title, style, layout, heading levels</td><td>Defaults for the auto-generated block</td></tr>
+        <tr><td>Schema markup (JSON-LD)</td><td>ItemList structured data — off by default, safe with Yoast and Rank Math</td></tr>
+        <tr><td>Delete data on uninstall</td><td>Opt-in cleanup — deactivating never deletes data</td></tr>
       </tbody>
     </table>
-    <p><a href="documentation.html">Open the full documentation →</a></p>
+    <p><a href="documentation.html#settings">Full settings documentation →</a></p>
   </section>
 
+  <!-- ── Compatibility ── -->
+  <section id="compatibility">
+    <p class="chap">Works with your stack</p>
+    <h2>Compatibility is a core design principle.</h2>
+    <p style="color:var(--muted);max-width:42rem">TOCflow inherits the active theme's fonts and colors, outputs a standard <code>&lt;nav&gt;</code> landmark, never loads from third-party CDNs, and makes zero remote calls. It co-exists cleanly with every major plugin and theme in the WordPress ecosystem.</p>
+
+    <h3>WordPress &amp; PHP</h3>
+    <div class="compat-grid">
+      <div class="compat-item"><strong>WordPress</strong><span>6.4 through 7.1</span><br><span class="compat-badge">Tested</span></div>
+      <div class="compat-item"><strong>PHP</strong><span>7.4, 8.0, 8.1, 8.2, 8.3</span><br><span class="compat-badge">Tested</span></div>
+      <div class="compat-item"><strong>Block Editor</strong><span>Gutenberg / Core Editor</span><br><span class="compat-badge">Native</span></div>
+      <div class="compat-item"><strong>Classic Editor</strong><span>via <code>[tocflow]</code> shortcode</span><br><span class="compat-badge">Supported</span></div>
+    </div>
+
+    <h3 style="margin-top:28px">SEO plugins</h3>
+    <div class="compat-grid">
+      <div class="compat-item"><strong>Yoast SEO</strong><span>Schema is opt-in and additive — no conflicts</span><br><span class="compat-badge">Confirmed</span></div>
+      <div class="compat-item"><strong>Rank Math</strong><span>TOC schema off by default — enable only if Rank Math is not outputting one</span><br><span class="compat-badge">Confirmed</span></div>
+      <div class="compat-item"><strong>All in One SEO</strong><span>No schema conflicts in default config</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Schema Pro</strong><span>Leave TOCflow's JSON-LD off when Schema Pro is active</span><br><span class="compat-badge">Compatible</span></div>
+    </div>
+
+    <h3 style="margin-top:28px">Themes</h3>
+    <div class="compat-grid">
+      <div class="compat-item"><strong>Twenty Twenty-Four</strong><span>Full Site Editor, block themes</span><br><span class="compat-badge">Tested</span></div>
+      <div class="compat-item"><strong>Twenty Twenty-Five</strong><span>Full Site Editor</span><br><span class="compat-badge">Tested</span></div>
+      <div class="compat-item"><strong>Astra</strong><span>Classic + FSE variants</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Kadence</strong><span>Block-based</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>GeneratePress</strong><span>Classic + block</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>OceanWP</strong><span>Classic</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Blocksy</strong><span>Block-based</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Any theme</strong><span>TOCflow inherits theme fonts &amp; colors — no injected brand styles</span><br><span class="compat-badge">By design</span></div>
+    </div>
+
+    <h3 style="margin-top:28px">Page builders</h3>
+    <p style="color:var(--muted);font-size:15px;margin-bottom:8px">Use <code>[tocflow]</code> in any Shortcode, HTML, or Code element. TOCflow automatically reads headings from each builder's stored data and injects matching anchor IDs into the rendered page — no manual slug mapping needed.</p>
+    <div class="compat-grid">
+      <div class="compat-item"><strong>Elementor</strong><span>Heading widget JSON parsed directly; IDs injected into rendered HTML</span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>Divi</strong><span>HTML scan of rendered output; use <code>[tocflow]</code> in Code module</span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>Bricks Builder</strong><span>Heading &amp; rich-text elements parsed from Bricks meta</span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>Beaver Builder</strong><span>HTML module or Shortcode module with <code>[tocflow]</code></span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>WPBakery</strong><span>Raw HTML element or Shortcode element; heading scan via rendered HTML</span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>Oxygen / Breakdance</strong><span>Code block or Shortcode element; meta-detected for ID injection</span><br><span class="compat-badge">Full support</span></div>
+      <div class="compat-item"><strong>WooCommerce</strong><span>Works in product descriptions with Heading blocks</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Any builder</strong><span>Generic HTML heading scan as final fallback — <code>[tocflow]</code> works everywhere</span><br><span class="compat-badge">By design</span></div>
+    </div>
+
+    <h3 style="margin-top:28px">Multilingual</h3>
+    <div class="compat-grid">
+      <div class="compat-item"><strong>WPML</strong><span>Translatable strings, text domain <code>tocflow</code></span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>Polylang</strong><span>No locale-specific slug issues</span><br><span class="compat-badge">Compatible</span></div>
+      <div class="compat-item"><strong>TranslatePress</strong><span>Front-end translated strings render correctly</span><br><span class="compat-badge">Compatible</span></div>
+    </div>
+
+    <p class="compat-note">Found a conflict? <a href="https://github.com/matthummel-pa/tocflow/issues">Open a GitHub issue</a> — confirmed compatibility is added to this page.</p>
+  </section>
+
+  <!-- ── Quick start ── -->
+  <section id="quick-start">
+    <p class="chap">Get going in 3 steps</p>
+    <h2>Quick start.</h2>
+    <ol style="font-size:18px;line-height:1.8;padding-left:1.4rem">
+      <li>Install and activate from <a href="https://github.com/matthummel-pa/tocflow/releases/latest">tocflow.zip</a> or <strong>Plugins → Add New</strong> (search <em>tocflow</em>).</li>
+      <li>Edit a post with Heading blocks. Insert the <strong>Table of Contents</strong> block.</li>
+      <li>Optionally open <strong>Settings → TOCflow</strong> in wp-admin for site-wide auto-insert, scroll offset, and defaults.</li>
+    </ol>
+    <p style="color:var(--muted)"><strong>Skip a heading:</strong> Add CSS class <code>no-toc</code> or <code>tocflow-skip</code> to any Heading block (Advanced → Additional CSS class(es)).</p>
+    <p style="color:var(--muted)"><strong>Enable Reading Guide:</strong> Open the block sidebar → Reading Guide panel → toggle <em>Hover section preview</em> or <em>Full Reading Guide</em>.</p>
+    <p style="color:var(--muted)"><strong>Developers:</strong> <code>git clone</code> into <code>wp-content/plugins/tocflow</code>, then <code>npm install &amp;&amp; npm run build</code>. Source in <code>src/</code>, output in <code>build/</code>.</p>
+  </section>
+
+  <!-- ── FAQ ── -->
   <section id="faq">
-    <p class="chap">Chapter 06</p>
-    <h2>FAQ</h2>
-    <details><summary>Is the GitHub repo supposed to be called something else?</summary><p>No. Keep it <code>tocflow</code>. That is the WordPress plugin slug and the text domain.</p></details>
-    <details><summary>Classic Editor?</summary><p>Use <code>[tocflow]</code>.</p></details>
-    <details><summary>Does it phone home?</summary><p>No remote APIs, no tracking, no accounts.</p></details>
-    <details><summary>Where do I file a bug?</summary><p><a href="https://github.com/matthummel-pa/tocflow/issues">GitHub issues</a>. Security: see <a href="support.html">the support page</a>.</p></details>
+    <p class="chap">Frequently asked</p>
+    <h2>FAQ.</h2>
+
+    <details>
+      <summary>Does it work with the Classic Editor?</summary>
+      <p>Yes — use the <code>[tocflow]</code> shortcode in classic post content, text widgets, or theme templates via <code>do_shortcode('[tocflow]')</code>.</p>
+    </details>
+    <details>
+      <summary>Will it conflict with my Yoast / Rank Math schema?</summary>
+      <p>No. The JSON-LD ItemList markup is off by default. If you enable it, leave your SEO plugin's TOC schema off, or vice versa. Both cannot be on simultaneously without creating duplicate structured data.</p>
+    </details>
+    <details>
+      <summary>Does it phone home or use external services?</summary>
+      <p>Never. Zero external API calls in any mode. Reading Guide section data is extracted server-side from your block content. Emoji reactions are stored in the reader's browser <code>localStorage</code>. Citations are built from WordPress post meta. No data leaves your server or the reader's device.</p>
+    </details>
+    <details>
+      <summary>Does it work with multilingual plugins (WPML, Polylang)?</summary>
+      <p>Yes. TOCflow is fully translation-ready with a standard <code>tocflow</code> text domain. All user-facing strings are translatable. There are no locale-specific slug issues.</p>
+    </details>
+    <details>
+      <summary>How do hover section previews work?</summary>
+      <p>PHP extracts the opening ~20 words of each section from your parsed block content at render time. The text is embedded in the HTML. JavaScript positions a floating tooltip next to the hovered link — no network request.</p>
+    </details>
+    <details>
+      <summary>How do academic citations work?</summary>
+      <p>The § citation button uses only data WordPress already has: your author display name, post title, site name, published date, and permalink. JavaScript formats it into the chosen style (APA, MLA, Chicago, Harvard, or plain link) and copies it to the clipboard. No external API, no account.</p>
+    </details>
+    <details>
+      <summary>Can I use it in a Full Site Editor template?</summary>
+      <p>Yes. Insert the block in a template using the Template Editor. Auto-insert mode works across any registered public post type.</p>
+    </details>
+    <details>
+      <summary>Where do I put the block?</summary>
+      <p>Typically right after the introduction paragraph, before the first heading. Some writers prefer just before the conclusion. Auto-insert mode handles positioning automatically sitewide.</p>
+    </details>
+    <details>
+      <summary>Is the GitHub repo supposed to be called something else?</summary>
+      <p>No. Keep it <code>tocflow</code> — that is the WordPress plugin slug, folder name, and text domain. <a href="https://github.com/matthummel-pa/tocflow/blob/main/docs/NAMING.md">Naming notes.</a></p>
+    </details>
   </section>
+
 </div>
 
 <footer>
   <div class="wrap">
-    © 2026 <a href="https://matthummel.com">Matt Hummel</a> ·
-    <a href="https://github.com/matthummel-pa/tocflow">GitHub</a> ·
-    <a href="documentation.html">Docs</a> ·
-    <a href="support.html">Support</a> ·
-    GPLv2 or later
+    <p>© 2026 <a href="https://matthummel.com">Matt Hummel</a> · Plugin slug <span class="slug">tocflow</span> · GPLv2 or later</p>
+    <p><a href="documentation.html">Documentation</a> · <a href="support.html">Support</a> · <a href="https://github.com/matthummel-pa/tocflow">GitHub</a> · <a href="https://wordpress.org/plugins/tocflow/">WordPress.org</a></p>
   </div>
 </footer>
 </body>
diff --git a/includes/class-tocflow-admin.php b/includes/class-tocflow-admin.php
index 9f83c5a..26e0c6b 100644
--- a/includes/class-tocflow-admin.php
+++ b/includes/class-tocflow-admin.php
@@ -82,6 +82,13 @@ public function assets( $hook ) {
 			array(),
 			TOCFLOW_VERSION
 		);
+		wp_enqueue_script(
+			'tocflow-admin',
+			TOCFLOW_URL . 'admin/js/admin.js',
+			array(),
+			TOCFLOW_VERSION,
+			true
+		);
 	}
 
 	/**
diff --git a/includes/class-tocflow-headings.php b/includes/class-tocflow-headings.php
index 8fe0255..b8c315b 100644
--- a/includes/class-tocflow-headings.php
+++ b/includes/class-tocflow-headings.php
@@ -106,6 +106,11 @@ public static function collect( $blocks, &$used, &$collected ) {
 	/**
 	 * Get the full, slug-stamped heading map for a post.
 	 *
+	 * Tries Gutenberg blocks first (canonical path).  When no headings are found
+	 * that way — e.g. on pages built with Elementor, Bricks, Divi, WPBakery,
+	 * Oxygen, or Beaver Builder — falls back to builder-specific parsers and
+	 * then to a generic HTML scan of the raw post content.
+	 *
 	 * @param int $post_id Post ID.
 	 * @return array
 	 */
@@ -122,11 +127,35 @@ public static function get_all( $post_id ) {
 		$collected = array();
 
 		if ( $post ) {
+			// Primary: Gutenberg block parsing.
 			self::collect( parse_blocks( $post->post_content ), $used, $collected );
+
+			// Fallback for page-builder content (no core/heading blocks present).
+			if ( empty( $collected ) ) {
+
+				// 1. Elementor — parse widget JSON from post meta.
+				if ( 'builder' === get_post_meta( $post_id, '_elementor_edit_mode', true ) ) {
+					$collected = self::get_all_from_elementor( $post_id );
+				}
+
+				// 2. Bricks Builder — parse element JSON from post meta.
+				if ( empty( $collected ) && get_post_meta( $post_id, '_bricks_page_content_2', true ) ) {
+					$collected = self::get_all_from_bricks( $post_id );
+				}
+
+				// 3. Generic HTML scan of raw post_content.
+				// Works for Divi, WPBakery, Oxygen, and any builder that embeds
+				// <h*> tags directly in the stored content string.
+				// strip_shortcodes() is intentionally NOT called so that inline
+				// HTML headings inside shortcode blocks survive the scan.
+				if ( empty( $collected ) ) {
+					$collected = self::get_all_from_html( $post->post_content );
+				}
+			}
 		}
 
-		$cache[ $post_id ] = $collected;
-		return $collected;
+		$cache[ $post_id ] = apply_filters( 'tocflow_headings', $collected, $post_id );
+		return $cache[ $post_id ];
 	}
 
 	/**
@@ -189,25 +218,281 @@ public static function levels_from_attributes( $attributes ) {
 		return $levels;
 	}
 
+	/**
+	 * Flatten all block content into a linear sequence for text extraction.
+	 *
+	 * Walks the block tree in document order, emitting heading or content items.
+	 * Container blocks (Group, Columns, etc.) have empty innerHTML so they are
+	 * skipped naturally; their children are reached via recursion.
+	 *
+	 * @param array $blocks Parsed blocks.
+	 * @param array $flat   Growing flat sequence, passed by reference.
+	 */
+	private static function flatten_content( $blocks, &$flat ) {
+		foreach ( $blocks as $block ) {
+			$name      = isset( $block['blockName'] ) ? (string) $block['blockName'] : '';
+			$html      = isset( $block['innerHTML'] ) ? (string) $block['innerHTML'] : '';
+			$has_inner = ! empty( $block['innerBlocks'] );
+
+			if ( 'core/heading' === $name ) {
+				/*
+				 * Headings are always leaf blocks. Extract text and record a
+				 * heading marker regardless of whether innerBlocks is set.
+				 */
+				$text = trim( wp_strip_all_tags( $html ) );
+				if ( '' !== $text && ! self::should_skip( $block, $html ) ) {
+					$flat[] = array( 'type' => 'heading', 'text' => $text );
+				}
+			} elseif ( ! $has_inner ) {
+				/*
+				 * Only extract text content from leaf blocks (no innerBlocks).
+				 * Container blocks (Group, Columns, Cover, etc.) carry their
+				 * children's text in innerHTML too, so reading it here would
+				 * double-count that text; recursion below handles those children.
+				 */
+				$text = trim( wp_strip_all_tags( $html ) );
+				if ( '' !== $text ) {
+					$flat[] = array( 'type' => 'content', 'text' => $text );
+				}
+			}
+
+			if ( $has_inner ) {
+				self::flatten_content( $block['innerBlocks'], $flat );
+			}
+		}
+	}
+
+	/**
+	 * Collect raw HTML from page-builder meta for text extraction.
+	 *
+	 * Returns a string of heading and paragraph HTML assembled from builder-specific
+	 * meta fields, or an empty string when no builder is detected. Never calls
+	 * apply_filters('the_content') to avoid triggering our own hooks.
+	 *
+	 * @param int $post_id Post ID.
+	 * @return string
+	 */
+	private static function builder_raw_html( $post_id ) {
+		$parts = array();
+
+		// Elementor: walk the element tree, collecting heading + rich-text content.
+		$el_raw = get_post_meta( (int) $post_id, '_elementor_data', true );
+		if ( ! empty( $el_raw ) && is_string( $el_raw ) ) {
+			$elements = json_decode( $el_raw, true );
+			if ( is_array( $elements ) ) {
+				self::collect_elementor_headings( $elements, $parts );
+			}
+		}
+
+		if ( ! empty( $parts ) ) {
+			return implode( "\n", $parts );
+		}
+
+		// Bricks Builder.
+		$bricks = get_post_meta( (int) $post_id, '_bricks_page_content_2', true );
+		if ( ! empty( $bricks ) ) {
+			$elements = is_string( $bricks ) ? maybe_unserialize( $bricks ) : $bricks;
+			if ( is_array( $elements ) ) {
+				foreach ( $elements as $el ) {
+					$name     = isset( $el['name'] ) ? $el['name'] : '';
+					$settings = isset( $el['settings'] ) && is_array( $el['settings'] ) ? $el['settings'] : array();
+					if ( 'heading' === $name && ! empty( $settings['text'] ) ) {
+						$tag     = ! empty( $settings['tag'] ) && preg_match( '/^h[1-6]$/i', $settings['tag'] ) ? sanitize_html_class( $settings['tag'] ) : 'h2';
+						$parts[] = '<' . $tag . '>' . wp_strip_all_tags( $settings['text'] ) . '</' . $tag . '>';
+					} elseif ( 'rich-text' === $name && ! empty( $settings['content'] ) ) {
+						$parts[] = wp_kses_post( $settings['content'] );
+					}
+				}
+				if ( ! empty( $parts ) ) {
+					return implode( "\n", $parts );
+				}
+			}
+		}
+
+		// Divi, WPBakery, Beaver Builder, Oxygen, Breakdance, Classic Editor:
+		// post_content contains raw HTML (mixed with shortcodes). Strip the
+		// shortcode tags but keep the HTML so headings and <p> tags are visible.
+		$content = (string) get_post_field( 'post_content', $post_id );
+		if ( '' !== $content ) {
+			// Strip shortcode wrappers only — leave their innerHTML/HTML intact.
+			$stripped = preg_replace( '/\[\/?\w[^\]]*\]/', '', $content );
+			return is_string( $stripped ) ? $stripped : $content;
+		}
+
+		return '';
+	}
+
+	/**
+	 * Build a flat heading/content sequence from an HTML string.
+	 *
+	 * Parses heading tags and paragraph tags into the same type-keyed array that
+	 * flatten_content() produces from block data, so get_sections() can process
+	 * both Gutenberg and builder content with the same downstream logic.
+	 *
+	 * @param string $html Raw HTML.
+	 * @param array  $flat Growing flat sequence, passed by reference.
+	 */
+	private static function flatten_html_to_sequence( $html, &$flat ) {
+		preg_match_all(
+			'/<(h[1-6]|p)(?:\s[^>]*)?>(.+?)<\/\1>/is',
+			$html,
+			$matches,
+			PREG_SET_ORDER
+		);
+		foreach ( $matches as $m ) {
+			$tag  = strtolower( $m[1] );
+			$text = trim( wp_strip_all_tags( $m[2] ) );
+			if ( '' === $text ) {
+				continue;
+			}
+			$flat[] = array(
+				'type' => ( 'p' === $tag ) ? 'content' : 'heading',
+				'text' => $text,
+			);
+		}
+	}
+
+	/**
+	 * Get headings enriched with section-level content data for Reading Guide mode.
+	 *
+	 * Extracts word count, estimated reading time, and a brief content preview
+	 * for each section entirely from parsed block content — no external API calls.
+	 *
+	 * @param int $post_id Post ID.
+	 * @return array Headings with added keys: word_count, read_minutes, preview.
+	 */
+	public static function get_sections( $post_id ) {
+		static $cache = array();
+		$post_id      = (int) $post_id;
+
+		if ( isset( $cache[ $post_id ] ) ) {
+			return $cache[ $post_id ];
+		}
+
+		$post = get_post( $post_id );
+		if ( ! $post ) {
+			$cache[ $post_id ] = array();
+			return array();
+		}
+
+		// Flatten block tree into a linear heading / content sequence.
+		$flat = array();
+		self::flatten_content( parse_blocks( $post->post_content ), $flat );
+
+		/*
+		 * Fallback for page-builder content: when parse_blocks() finds no items
+		 * (because the post uses Elementor, Divi, Bricks, WPBakery, etc.),
+		 * extract text directly from builder-specific meta or from post_content
+		 * so hover previews, read-time estimates, and density bars still work.
+		 *
+		 * We do NOT call apply_filters('the_content') here — that would risk
+		 * recursion through our own auto_insert hook.
+		 */
+		if ( empty( $flat ) ) {
+			$builder_html = self::builder_raw_html( $post_id );
+			if ( '' !== $builder_html ) {
+				self::flatten_html_to_sequence( $builder_html, $flat );
+			}
+		}
+
+		// Accumulate body text per section (split at every heading boundary).
+		$section_texts = array();
+		$heading_idx   = -1;
+		foreach ( $flat as $item ) {
+			if ( 'heading' === $item['type'] ) {
+				$heading_idx++;
+				$section_texts[ $heading_idx ] = '';
+			} elseif ( $heading_idx >= 0 ) {
+				$section_texts[ $heading_idx ] .= ' ' . $item['text'];
+			}
+		}
+
+		// Merge section data into the base headings list.
+		$headings = self::get_all( $post_id );
+		foreach ( $headings as $i => &$heading ) {
+			$text                   = isset( $section_texts[ $i ] ) ? trim( $section_texts[ $i ] ) : '';
+			$words                  = '' !== $text ? str_word_count( $text ) : 0;
+			$heading['word_count']   = $words;
+			$heading['read_minutes'] = max( 1, (int) ceil( max( 1, $words ) / 200 ) );
+			$heading['preview']      = '' !== $text ? wp_trim_words( $text, 20, '' ) : '';
+		}
+		unset( $heading );
+
+		$cache[ $post_id ] = $headings;
+		return $headings;
+	}
+
+	/**
+	 * Build citation metadata from post data for client-side citation formatting.
+	 *
+	 * Returns only already-public WordPress data — no external calls required.
+	 *
+	 * @param int    $post_id       Post ID.
+	 * @param string $citation_style Citation format key (apa|mla|chicago|harvard|plain).
+	 * @return array
+	 */
+	public static function citation_meta( $post_id, $citation_style = 'apa' ) {
+		$post = get_post( $post_id );
+		if ( ! $post ) {
+			return array();
+		}
+
+		$allowed = array( 'apa', 'mla', 'chicago', 'harvard', 'plain' );
+		$style   = in_array( $citation_style, $allowed, true ) ? $citation_style : 'apa';
+
+		return array(
+			'author'        => get_the_author_meta( 'display_name', (int) $post->post_author ),
+			'title'         => html_entity_decode( get_the_title( $post_id ), ENT_QUOTES, 'UTF-8' ),
+			'site'          => html_entity_decode( get_bloginfo( 'name' ), ENT_QUOTES, 'UTF-8' ),
+			'date'          => get_the_date( 'Y-m-d', $post_id ),
+			'url'           => (string) get_permalink( $post_id ),
+			'citationStyle' => $style,
+		);
+	}
+
 	/**
 	 * Render nested list markup from heading data.
 	 *
 	 * @param array  $headings Heading data with normalized 'level'.
 	 * @param string $list_tag 'ol' or 'ul'.
+	 * @param array  $guide    Optional Reading Guide options.
 	 * @return string
 	 */
-	public static function render_list( $headings, $list_tag ) {
+	public static function render_list( $headings, $list_tag, $guide = array() ) {
 		if ( empty( $headings ) ) {
 			return '';
 		}
 
 		$list_tag = ( 'ol' === $list_tag ) ? 'ol' : 'ul';
-		$html     = '';
-		$prev     = 0;
-		$open     = 0;
+
+		$show_time        = ! empty( $guide['show_read_time'] );
+		$show_density     = ! empty( $guide['show_density'] );
+		$show_preview     = ! empty( $guide['show_previews'] );
+		$show_reactions   = ! empty( $guide['show_reactions'] );
+		$show_citations   = ! empty( $guide['show_citations'] );
+		$preview_on_hover = ! empty( $guide['preview_on_hover'] );
+		$show_reader_notes = ! empty( $guide['show_reader_notes'] );
+		$notes            = isset( $guide['section_notes'] ) && is_array( $guide['section_notes'] ) ? $guide['section_notes'] : array();
+		$any_guide        = $show_time || $show_density || $show_preview || $show_reactions || $show_citations || ! empty( $notes ) || $preview_on_hover || $show_reader_notes;
+
+		// Denominator for density bar proportions.
+		$max_words = 1;
+		if ( $show_density ) {
+			foreach ( $headings as $h ) {
+				if ( isset( $h['word_count'] ) && $h['word_count'] > $max_words ) {
+					$max_words = $h['word_count'];
+				}
+			}
+		}
+
+		$html = '';
+		$prev = 0;
+		$open = 0;
 
 		foreach ( $headings as $heading ) {
 			$level = (int) $heading['level'];
+			$slug  = $heading['slug'];
+			$text  = $heading['text'];
 
 			if ( $level > $prev ) {
 				for ( $i = 0; $i < ( $level - $prev ); $i++ ) {
@@ -225,8 +510,143 @@ public static function render_list( $headings, $list_tag ) {
 				}
 			}
 
-			$html .= '<li class="tocflow__item"><a class="tocflow__link" href="#' . esc_attr( $heading['slug'] ) . '">' . esc_html( $heading['text'] ) . '</a>';
-			$prev  = $level;
+			// ── Item opening tag ──────────────────────────────────────────────
+			$tip_id = $preview_on_hover ? 'tocflow-tip-' . sanitize_html_class( $slug ) : '';
+			if ( $any_guide ) {
+				$item_extra = '';
+				if ( $preview_on_hover ) {
+					$item_extra = ' class="tocflow__item has-hover-preview"';
+				} else {
+					$item_extra = ' class="tocflow__item"';
+				}
+				$item_style = '';
+				if ( $show_density && isset( $heading['word_count'] ) ) {
+					$density    = $max_words > 0 ? min( 1.0, (float) $heading['word_count'] / $max_words ) : 0.0;
+					$item_style = ' style="--tocflow-density:' . esc_attr( number_format( $density, 3, '.', '' ) ) . '"';
+				}
+				$html .= '<li' . $item_extra
+					. ' data-tocflow-slug="' . esc_attr( $slug ) . '"'
+					. ' data-tocflow-heading="' . esc_attr( $text ) . '"'
+					. $item_style . '>';
+			} else {
+				$html .= '<li class="tocflow__item">';
+			}
+
+			// ── Link row (link + optional read-time badge) ────────────────────
+			if ( $any_guide ) {
+				$html .= '<div class="tocflow__item-row">';
+			}
+
+			// Link — include aria-describedby when hover tooltip is active.
+			if ( $tip_id ) {
+				$html .= '<a class="tocflow__link" href="#' . esc_attr( $slug ) . '"'
+					. ' aria-describedby="' . esc_attr( $tip_id ) . '">'
+					. esc_html( $text ) . '</a>';
+			} else {
+				$html .= '<a class="tocflow__link" href="#' . esc_attr( $slug ) . '">' . esc_html( $text ) . '</a>';
+			}
+			if ( $show_time && isset( $heading['read_minutes'] ) ) {
+				$mins = (int) $heading['read_minutes'];
+				$html .= '<span class="tocflow__time" aria-hidden="true">~'
+					. $mins . '&thinsp;'
+					/* translators: abbreviation for "minute" in read-time estimates, e.g. "~3 min" */
+					. esc_html( __( 'min', 'tocflow' ) )
+					. '</span>';
+			}
+			if ( $any_guide ) {
+				$html .= '</div>';
+			}
+
+			// ── Hover tooltip label (screen-reader target for aria-describedby) ─
+			if ( $preview_on_hover && ! empty( $heading['preview'] ) ) {
+				$html .= '<span class="tocflow__tip-label tocflow__visually-hidden"'
+					. ' id="' . esc_attr( $tip_id ) . '"'
+					. ' role="tooltip">'
+					. esc_html( $heading['preview'] )
+					. '</span>';
+			}
+
+			// ── Density bar ───────────────────────────────────────────────────
+			if ( $show_density ) {
+				$html .= '<span class="tocflow__density-bar" aria-hidden="true"></span>';
+			}
+
+			// ── Content preview ───────────────────────────────────────────────
+			if ( $show_preview && ! empty( $heading['preview'] ) ) {
+				$html .= '<span class="tocflow__preview">' . esc_html( $heading['preview'] ) . '</span>';
+			}
+
+			// ── Author note ───────────────────────────────────────────────────
+			if ( isset( $notes[ $slug ] ) && '' !== (string) $notes[ $slug ] ) {
+				$note_id = 'tocflow-note-' . sanitize_html_class( $slug );
+				$html   .= '<div class="tocflow__note-wrap">'
+					. '<button type="button" class="tocflow__note-toggle"'
+					. ' aria-expanded="false"'
+					. ' aria-controls="' . esc_attr( $note_id ) . '">'
+					. '<span class="tocflow__note-icon" aria-hidden="true">&#x270D;</span>'
+					. '<span class="tocflow__visually-hidden">' . esc_html__( "Author's note", 'tocflow' ) . '</span>'
+					. '</button>'
+					. '<span class="tocflow__note" id="' . esc_attr( $note_id ) . '" hidden>'
+					. esc_html( (string) $notes[ $slug ] )
+					. '</span>'
+					. '</div>';
+			}
+
+			// ── Reader note pad ───────────────────────────────────────────────
+			if ( $show_reader_notes ) {
+				$rnote_id = 'tocflow-rnote-' . sanitize_html_class( $slug );
+				$html    .= '<div class="tocflow__rnote-wrap">'
+					. '<button type="button" class="tocflow__rnote-toggle"'
+					. ' aria-expanded="false"'
+					. ' aria-controls="' . esc_attr( $rnote_id ) . '"'
+					. ' aria-label="' . esc_attr( sprintf( /* translators: %s = heading text */ __( 'My note for: %s', 'tocflow' ), $text ) ) . '">'
+					. '<span class="tocflow__rnote-icon" aria-hidden="true">&#x1F4DD;</span>'
+					. '</button>'
+					. '<div class="tocflow__rnote-pad" id="' . esc_attr( $rnote_id ) . '" hidden>'
+					. '<textarea class="tocflow__rnote-ta" rows="3"'
+					. ' placeholder="' . esc_attr__( 'Your notes for this section\xe2\x80\xa6', 'tocflow' ) . '"'
+					. ' aria-label="' . esc_attr( sprintf( /* translators: %s = heading text */ __( 'Notes for: %s', 'tocflow' ), $text ) ) . '">'
+					. '</textarea>'
+					. '</div>'
+					. '</div>';
+			}
+
+			// ── Reactions + citation row ───────────────────────────────────────
+			if ( $show_reactions || $show_citations ) {
+				$html .= '<div class="tocflow__actions">';
+
+				if ( $show_reactions ) {
+					$reaction_map = array(
+						'💡' => __( 'Insightful', 'tocflow' ),
+						'⭐' => __( 'Saved', 'tocflow' ),
+						'🤔' => __( 'Unclear', 'tocflow' ),
+						'✅' => __( 'Got it', 'tocflow' ),
+					);
+					$html .= '<div class="tocflow__reactions" role="group" aria-label="'
+						. esc_attr__( 'React to this section', 'tocflow' ) . '">';
+					foreach ( $reaction_map as $emoji => $label ) {
+						$html .= '<button type="button" class="tocflow__reaction"'
+							. ' aria-pressed="false"'
+							. ' aria-label="' . esc_attr( $label ) . '"'
+							. ' data-reaction="' . esc_attr( $emoji ) . '">'
+							. $emoji
+							. '</button>';
+					}
+					$html .= '</div>';
+				}
+
+				if ( $show_citations ) {
+					$html .= '<button type="button" class="tocflow__cite-btn"'
+						. ' aria-label="' . esc_attr__( 'Copy citation for this section', 'tocflow' ) . '">'
+						. '<span class="tocflow__cite-icon" aria-hidden="true">§</span>'
+						. '<span class="tocflow__visually-hidden">' . esc_html__( 'Cite', 'tocflow' ) . '</span>'
+						. '</button>';
+				}
+
+				$html .= '</div>';
+			}
+
+			$prev = $level;
 		}
 
 		$html .= '</li>';
@@ -253,6 +673,69 @@ public static function render_nav( $attributes, $post_id, $wrap = true ) {
 		$all    = self::get_all( $post_id );
 		$items  = self::filter_and_normalize( $all, $levels );
 
+		// ── Section data (shared by guide mode and hover previews) ───────────
+		$sections    = array();
+		$section_map = array();
+		$need_sections = ! empty( $attributes['guideMode'] ) || ! empty( $attributes['previewOnHover'] );
+		if ( $need_sections ) {
+			$sections = self::get_sections( $post_id );
+			foreach ( $sections as $section ) {
+				$section_map[ $section['slug'] ] = $section;
+			}
+		}
+
+		// ── Reading Guide mode ────────────────────────────────────────────────
+		$guide = array();
+		if ( ! empty( $attributes['guideMode'] ) ) {
+			// Merge full section content data into the filtered items.
+			foreach ( $items as &$item ) {
+				if ( isset( $section_map[ $item['slug'] ] ) ) {
+					$s                    = $section_map[ $item['slug'] ];
+					$item['word_count']   = $s['word_count'];
+					$item['read_minutes'] = $s['read_minutes'];
+					$item['preview']      = $s['preview'];
+				}
+			}
+			unset( $item );
+
+			$notes = array();
+			if ( ! empty( $attributes['sectionNotes'] ) && is_array( $attributes['sectionNotes'] ) ) {
+				foreach ( $attributes['sectionNotes'] as $k => $v ) {
+					$notes[ sanitize_key( $k ) ] = sanitize_text_field( (string) $v );
+				}
+			}
+
+			$guide = array(
+				'show_previews'    => ! empty( $attributes['showPreviews'] ),
+				'show_density'     => ! empty( $attributes['showDensity'] ),
+				'show_read_time'   => ! empty( $attributes['showReadTime'] ),
+				'show_reactions'   => ! empty( $attributes['showReactions'] ),
+				'show_citations'   => ! empty( $attributes['showCitations'] ),
+				'section_notes'    => $notes,
+				'preview_on_hover' => ! empty( $attributes['previewOnHover'] ),
+				'show_reader_notes'=> ! empty( $attributes['showReaderNotes'] ),
+			);
+		} elseif ( ! empty( $attributes['previewOnHover'] ) ) {
+			// Hover previews only — merge just the preview text into items.
+			foreach ( $items as &$item ) {
+				if ( isset( $section_map[ $item['slug'] ] ) ) {
+					$item['preview'] = $section_map[ $item['slug'] ]['preview'];
+				}
+			}
+			unset( $item );
+			$guide = array( 'preview_on_hover' => true );
+		}
+
+		// Always propagate the hover flag so render_list() can use it.
+		if ( ! empty( $attributes['previewOnHover'] ) ) {
+			$guide['preview_on_hover'] = true;
+		}
+
+		// Reader notes work independently of guide mode.
+		if ( ! empty( $attributes['showReaderNotes'] ) ) {
+			$guide['show_reader_notes'] = true;
+		}
+
 		$min = (int) TOCflow_Settings::get_value( 'min_headings', 2 );
 		if ( isset( $attributes['minHeadings'] ) && (int) $attributes['minHeadings'] >= 1 ) {
 			$min = (int) $attributes['minHeadings'];
@@ -316,6 +799,24 @@ public static function render_nav( $attributes, $post_id, $wrap = true ) {
 		if ( $highlight ) {
 			$classes[] = 'has-scroll-spy';
 		}
+		if ( ! empty( $attributes['guideMode'] ) ) {
+			$classes[] = 'has-guide-mode';
+		}
+		if ( ! empty( $attributes['previewOnHover'] ) ) {
+			$classes[] = 'has-hover-preview';
+		}
+		if ( ! empty( $attributes['showExport'] ) ) {
+			$classes[] = 'has-export';
+		}
+		if ( ! empty( $attributes['showReaderNotes'] ) ) {
+			$classes[] = 'has-reader-notes';
+		}
+		if ( ! empty( $attributes['showReadingProgress'] ) ) {
+			$classes[] = 'has-reading-progress';
+		}
+		if ( ! empty( $attributes['showBookmark'] ) ) {
+			$classes[] = 'has-bookmark';
+		}
 
 		$max_height = isset( $attributes['maxHeight'] ) ? (int) $attributes['maxHeight'] : 0;
 		if ( $max_height > 0 ) {
@@ -339,35 +840,107 @@ public static function render_nav( $attributes, $post_id, $wrap = true ) {
 			$smooth_flag = ! empty( $settings['smooth_scroll'] ) ? '1' : '0';
 		}
 
-		$class_attr = implode( ' ', array_map( 'sanitize_html_class', $classes ) );
+		$class_attr  = implode( ' ', array_map( 'sanitize_html_class', $classes ) );
 		$style_parts = array( '--tocflow-offset:' . (int) $offset . 'px' );
 		if ( $max_height > 0 ) {
 			$style_parts[] = '--tocflow-max-height:' . $max_height . 'px';
 		}
+
+		// Global design overrides — set CSS custom properties from settings.
+		$design_map = array(
+			'design_bg_color'      => '--tocflow-bg',
+			'design_text_color'    => '--tocflow-color',
+			'design_link_color'    => '--tocflow-link-color',
+			'design_font_size'     => '--tocflow-font-size',
+			'design_font_weight'   => '--tocflow-font-weight',
+			'design_line_height'   => '--tocflow-line-height',
+			'design_border_width'  => '--tocflow-border-width',
+			'design_border_color'  => '--tocflow-border-color',
+			'design_border_style'  => '--tocflow-border-style',
+			'design_border_radius' => '--tocflow-radius',
+			'design_padding'       => '--tocflow-padding',
+		);
+		foreach ( $design_map as $setting_key => $css_prop ) {
+			$val = isset( $settings[ $setting_key ] ) ? trim( (string) $settings[ $setting_key ] ) : '';
+			if ( '' !== $val ) {
+				$style_parts[] = $css_prop . ':' . $val;
+			}
+		}
+
 		$style_attr = implode( ';', $style_parts );
 
+		// Focus ring style attribute (accessibility setting).
+		$focus_style = isset( $settings['focus_style'] ) ? sanitize_key( $settings['focus_style'] ) : 'default';
+		if ( 'default' !== $focus_style ) {
+			$guide_attrs['data-tocflow-focus'] = $focus_style;
+		}
+
+		// Build extra data attributes for guide mode and study tools.
+		$guide_attrs = array();
+
+		// data-tocflow-post is needed by any feature that uses localStorage.
+		$needs_post_id = ! empty( $attributes['guideMode'] )
+			|| ! empty( $attributes['showBookmark'] )
+			|| ! empty( $attributes['showReaderNotes'] );
+		if ( $needs_post_id ) {
+			$guide_attrs['data-tocflow-post'] = (string) $post_id;
+		}
+
+		if ( ! empty( $attributes['guideMode'] ) ) {
+			if ( ! empty( $attributes['trackProgress'] ) ) {
+				$guide_attrs['data-tocflow-progress'] = '1';
+			}
+			if ( ! empty( $guide['show_citations'] ) ) {
+				$cite_style = isset( $attributes['citationStyle'] ) ? sanitize_key( $attributes['citationStyle'] ) : 'apa';
+				$cite_meta  = self::citation_meta( $post_id, $cite_style );
+				if ( ! empty( $cite_meta ) ) {
+					$guide_attrs['data-tocflow-meta'] = (string) wp_json_encode( $cite_meta );
+				}
+			}
+		}
+
+		if ( ! empty( $attributes['showReadingProgress'] ) ) {
+			$guide_attrs['data-tocflow-reader-progress'] = '1';
+		}
+		if ( ! empty( $attributes['showBookmark'] ) ) {
+			$guide_attrs['data-tocflow-bookmark'] = '1';
+		}
+		if ( ! empty( $attributes['showReaderNotes'] ) ) {
+			$guide_attrs['data-tocflow-reader-notes'] = '1';
+		}
+
 		if ( $wrap ) {
-			$wrapper = get_block_wrapper_attributes(
+			$wrapper_args = array_merge(
 				array(
 					'class'               => $class_attr,
 					'aria-label'          => $label,
 					'data-tocflow-offset' => (string) $offset,
 					'data-tocflow-smooth' => $smooth_flag,
 					'style'               => $style_attr,
-				)
+				),
+				$guide_attrs
 			);
-			$html = '<nav ' . $wrapper . '>';
+			$wrapper = get_block_wrapper_attributes( $wrapper_args );
+			$html    = '<nav ' . $wrapper . '>';
 		} else {
+			$extra = '';
+			foreach ( $guide_attrs as $attr_name => $attr_val ) {
+				$extra .= ' ' . esc_attr( $attr_name ) . '="' . esc_attr( $attr_val ) . '"';
+			}
 			$html = sprintf(
-				'<nav class="%1$s" aria-label="%2$s" data-tocflow-offset="%3$s" data-tocflow-smooth="%4$s" style="%5$s">',
+				'<nav class="%1$s" aria-label="%2$s" data-tocflow-offset="%3$s" data-tocflow-smooth="%4$s" style="%5$s"%6$s>',
 				esc_attr( $class_attr . ' wp-block-tocflow-table-of-contents' ),
 				esc_attr( $label ),
 				esc_attr( (string) $offset ),
 				esc_attr( $smooth_flag ),
-				esc_attr( $style_attr )
+				esc_attr( $style_attr ),
+				$extra
 			);
 		}
 
+		// Hidden live region — picks up copy-to-clipboard and other state changes.
+		$html .= '<span class="tocflow__live-region tocflow__visually-hidden" aria-live="polite" aria-atomic="true"></span>';
+
 		if ( $show_title || ! empty( $attributes['collapsible'] ) ) {
 			$html .= '<div class="tocflow__header">';
 			if ( $show_title ) {
@@ -385,9 +958,86 @@ public static function render_nav( $attributes, $post_id, $wrap = true ) {
 			$html .= '</div>';
 		}
 
+		// ── Study tools bar (total time + resume button) ─────────────────────
+		$has_total_time = ! empty( $attributes['guideMode'] )
+			&& ! empty( $attributes['showReadTime'] )
+			&& ! empty( $items );
+		$has_resume     = ! empty( $attributes['showBookmark'] );
+
+		if ( $has_total_time || $has_resume ) {
+			$html .= '<div class="tocflow__study-bar">';
+			if ( $has_total_time ) {
+				$total_words = 0;
+				foreach ( $items as $item ) {
+					if ( isset( $item['word_count'] ) ) {
+						$total_words += (int) $item['word_count'];
+					}
+				}
+				$total_mins  = max( 1, (int) ceil( $total_words / 200 ) );
+				/* translators: %d = estimated total reading time in minutes */
+				$html       .= '<span class="tocflow__total-time" aria-hidden="true">'
+					/* translators: %d = estimated total reading time in minutes */
+					. sprintf( esc_html__( '~%d min total', 'tocflow' ), $total_mins )
+					. '</span>';
+			}
+			if ( $has_resume ) {
+				$html .= '<button type="button" class="tocflow__resume-btn" hidden>'
+					. '<span aria-hidden="true">&#x21A9;</span>&thinsp;'
+					. esc_html__( 'Resume', 'tocflow' )
+					. '</button>';
+			}
+			$html .= '</div>';
+		}
+
+		// ── Reading progress bar ──────────────────────────────────────────────
+		if ( ! empty( $attributes['showReadingProgress'] ) ) {
+			$html .= '<div class="tocflow__reading-wrap"'
+				. ' role="progressbar"'
+				. ' aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"'
+				. ' aria-label="' . esc_attr__( 'Reading progress', 'tocflow' ) . '">'
+				. '<div class="tocflow__reading-bar"></div>'
+				. '</div>';
+		}
+
 		$html .= '<div class="tocflow__body">';
-		$html .= self::render_list( $items, $list_tag );
+		$html .= self::render_list( $items, $list_tag, $guide );
 		$html .= '</div>';
+
+		// ── Export / print bar ────────────────────────────────────────────────
+		if ( ! empty( $attributes['showExport'] ) ) {
+			$post_title = html_entity_decode( get_the_title( $post_id ), ENT_QUOTES, 'UTF-8' );
+			$html .= '<div class="tocflow__export-bar" role="group"'
+				. ' aria-label="' . esc_attr__( 'Export table of contents', 'tocflow' ) . '"'
+				. ' data-tocflow-export-title="' . esc_attr( $post_title ) . '">';
+
+			$html .= '<button type="button" class="tocflow__export-btn" data-tocflow-action="copy-md"'
+				. ' aria-label="' . esc_attr__( 'Copy outline as Markdown', 'tocflow' ) . '">'
+				. '<span aria-hidden="true">📋</span> '
+				. '<span>' . esc_html__( 'Copy', 'tocflow' ) . '</span>'
+				. '<span class="tocflow__export-confirm tocflow__visually-hidden" role="status" aria-live="polite"></span>'
+				. '</button>';
+
+			$html .= '<button type="button" class="tocflow__export-btn" data-tocflow-action="download-md"'
+				. ' aria-label="' . esc_attr__( 'Download outline as Markdown file', 'tocflow' ) . '">'
+				. '<span aria-hidden="true">⬇</span> '
+				. '<span>' . esc_html__( '.md', 'tocflow' ) . '</span>'
+				. '</button>';
+
+			$html .= '<button type="button" class="tocflow__export-btn" data-tocflow-action="download-doc"'
+				. ' aria-label="' . esc_attr__( 'Download outline as Word document', 'tocflow' ) . '">'
+				. '<span aria-hidden="true">⬇</span> '
+				. '<span>' . esc_html__( '.doc', 'tocflow' ) . '</span>'
+				. '</button>';
+
+			$html .= '<button type="button" class="tocflow__export-btn" data-tocflow-action="print"'
+				. ' aria-label="' . esc_attr__( 'Print table of contents', 'tocflow' ) . '">'
+				. '<span aria-hidden="true">🖨</span> '
+				. '<span>' . esc_html__( 'Print', 'tocflow' ) . '</span>'
+				. '</button>';
+
+			$html .= '</div>';
+		}
+
 		$html .= '</nav>';
 
 		if ( ! empty( $settings['schema_markup'] ) ) {
@@ -491,6 +1141,213 @@ public static function add_heading_ids( $block_content, $block ) {
 		return preg_replace( '/(<h[1-6])(\s|>)/i', '$1 id="' . esc_attr( $slug ) . '"$2', $block_content, 1 );
 	}
 
+	// -------------------------------------------------------------------------
+	// Page-builder compatibility
+	// -------------------------------------------------------------------------
+
+	/**
+	 * Extract headings from an arbitrary HTML string.
+	 *
+	 * Used as a fallback for page-builder content that does not store headings
+	 * as core/heading blocks.  Intentionally simple: does not execute shortcodes
+	 * so there is no risk of recursion.
+	 *
+	 * @param string $html Raw HTML or mixed HTML/text to scan.
+	 * @return array Heading entries identical in shape to collect() output.
+	 */
+	public static function get_all_from_html( $html ) {
+		$used      = array();
+		$collected = array();
+
+		preg_match_all(
+			'/<h([1-6])(\s[^>]*)?>(.+?)<\/h\1>/is',
+			$html,
+			$matches,
+			PREG_SET_ORDER
+		);
+
+		foreach ( $matches as $match ) {
+			$level   = (int) $match[1];
+			$attrs   = $match[2];
+			$content = $match[3];
+			$text    = trim( wp_strip_all_tags( $content ) );
+
+			if ( '' === $text ) {
+				continue;
+			}
+
+			// Honour skip classes.
+			if ( preg_match( '/class=["\'][^"\']*(?:no-toc|tocflow-skip)[^"\']*["\']/i', $attrs ) ) {
+				continue;
+			}
+
+			// Preserve any existing id.
+			$slug = '';
+			if ( preg_match( '/\bid=["\']([^"\']+)["\']/i', $attrs, $id_m ) ) {
+				$slug        = $id_m[1];
+				$used[$slug] = true;
+			} else {
+				$slug = self::make_slug( $text, $used );
+			}
+
+			$collected[] = array(
+				'level' => $level,
+				'text'  => $text,
+				'slug'  => $slug,
+			);
+		}
+
+		return $collected;
+	}
+
+	/**
+	 * Extract headings from Elementor JSON post meta.
+	 *
+	 * Recursively walks _elementor_data to find heading widgets and text widgets
+	 * that contain inline heading tags.  No shortcodes are executed.
+	 *
+	 * @param int $post_id Post ID.
+	 * @return array
+	 */
+	public static function get_all_from_elementor( $post_id ) {
+		$raw = get_post_meta( (int) $post_id, '_elementor_data', true );
+		if ( empty( $raw ) || ! is_string( $raw ) ) {
+			return array();
+		}
+
+		$elements = json_decode( $raw, true );
+		if ( ! is_array( $elements ) ) {
+			return array();
+		}
+
+		$html_fragments = array();
+		self::collect_elementor_headings( $elements, $html_fragments );
+
+		if ( empty( $html_fragments ) ) {
+			return array();
+		}
+
+		return self::get_all_from_html( implode( "\n", $html_fragments ) );
+	}
+
+	/**
+	 * Recursively collect heading HTML from Elementor element tree.
+	 *
+	 * @param array $elements Elementor element array.
+	 * @param array $parts    Accumulator (by reference).
+	 */
+	private static function collect_elementor_headings( $elements, &$parts ) {
+		foreach ( $elements as $el ) {
+			$el_type     = isset( $el['elType'] ) ? $el['elType'] : '';
+			$widget_type = isset( $el['widgetType'] ) ? $el['widgetType'] : '';
+			$settings    = isset( $el['settings'] ) && is_array( $el['settings'] ) ? $el['settings'] : array();
+
+			if ( 'widget' === $el_type ) {
+				if ( 'heading' === $widget_type ) {
+					// Standard Elementor Heading widget.
+					$tag  = ! empty( $settings['header_size'] ) ? sanitize_html_class( $settings['header_size'] ) : 'h2';
+					$text = ! empty( $settings['title'] ) ? wp_strip_all_tags( $settings['title'] ) : '';
+					if ( '' !== $text && preg_match( '/^h[1-6]$/i', $tag ) ) {
+						$parts[] = "<{$tag}>" . esc_html( $text ) . "</{$tag}>";
+					}
+				} elseif ( in_array( $widget_type, array( 'text-editor', 'theme-post-content' ), true ) ) {
+					// Text Editor widget — may contain inline <h*> tags.
+					if ( ! empty( $settings['editor'] ) ) {
+						$parts[] = wp_kses_post( $settings['editor'] );
+					}
+				}
+			}
+
+			if ( ! empty( $el['elements'] ) && is_array( $el['elements'] ) ) {
+				self::collect_elementor_headings( $el['elements'], $parts );
+			}
+		}
+	}
+
+	/**
+	 * Extract headings from Bricks Builder post meta.
+	 *
+	 * @param int $post_id Post ID.
+	 * @return array
+	 */
+	public static function get_all_from_bricks( $post_id ) {
+		$data = get_post_meta( (int) $post_id, '_bricks_page_content_2', true );
+		if ( empty( $data ) ) {
+			return array();
+		}
+
+		$elements = is_string( $data ) ? maybe_unserialize( $data ) : $data;
+		if ( ! is_array( $elements ) ) {
+			return array();
+		}
+
+		$parts = array();
+		foreach ( $elements as $el ) {
+			$name     = isset( $el['name'] ) ? $el['name'] : '';
+			$settings = isset( $el['settings'] ) && is_array( $el['settings'] ) ? $el['settings'] : array();
+
+			if ( 'heading' === $name && ! empty( $settings['text'] ) ) {
+				$tag = ! empty( $settings['tag'] ) ? sanitize_html_class( $settings['tag'] ) : 'h2';
+				if ( ! preg_match( '/^h[1-6]$/i', $tag ) ) {
+					$tag = 'h2';
+				}
+				$parts[] = "<{$tag}>" . wp_strip_all_tags( $settings['text'] ) . "</{$tag}>";
+			} elseif ( 'rich-text' === $name && ! empty( $settings['content'] ) ) {
+				// Bricks rich text may contain <h*> tags.
+				$parts[] = wp_kses_post( $settings['content'] );
+			}
+		}
+
+		return self::get_all_from_html( implode( "\n", $parts ) );
+	}
+
+	/**
+	 * Inject IDs into heading tags in an HTML string.
+	 *
+	 * Used for page-builder content where render_block is not fired.
+	 * Skips headings that already have an id attribute or carry a skip class.
+	 *
+	 * @param string $html     Rendered HTML content.
+	 * @param array  $headings Slug-stamped heading map from get_all().
+	 * @return string Modified HTML.
+	 */
+	public static function inject_ids_in_html( $html, $headings ) {
+		if ( empty( $headings ) || '' === $html ) {
+			return $html;
+		}
+
+		$index = 0;
+		$total = count( $headings );
+
+		return preg_replace_callback(
+			'/<h([1-6])(\s[^>]*)?>/',
+			function ( $match ) use ( $headings, &$index, $total ) {
+				$attrs = isset( $match[2] ) ? $match[2] : '';
+
+				// Skip headings excluded from the TOC.
+				if ( preg_match( '/class=["\'][^"\']*(?:no-toc|tocflow-skip)[^"\']*["\']/i', $attrs ) ) {
+					return $match[0];
+				}
+
+				if ( $index >= $total ) {
+					return $match[0];
+				}
+
+				// Already has an id — advance the pointer without changing markup.
+				if ( preg_match( '/\bid=["\']/i', $attrs ) ) {
+					$index++;
+					return $match[0];
+				}
+
+				$slug  = $headings[ $index ]['slug'];
+				$index++;
+
+				return '<h' . $match[1] . ' id="' . esc_attr( $slug ) . '"' . $attrs . '>';
+			},
+			$html
+		);
+	}
+
 	/**
 	 * Inject IDs only when a TOC will actually be shown.
 	 *
@@ -502,12 +1359,73 @@ public static function should_inject_ids() {
 			return true;
 		}
 		$post = get_post();
-		if ( $post && has_block( 'tocflow/table-of-contents', $post ) ) {
+		if ( ! $post ) {
+			return false;
+		}
+		if ( has_block( 'tocflow/table-of-contents', $post ) ) {
 			return true;
 		}
-		if ( $post && has_shortcode( $post->post_content, 'tocflow' ) ) {
+		if ( has_shortcode( $post->post_content, 'tocflow' ) ) {
+			return true;
+		}
+
+		// Page-builder shortcode: the [tocflow] shortcode may live inside a builder
+		// widget rather than in post_content directly.  Scan builder meta for it.
+		if ( self::builder_has_tocflow( $post->ID ) ) {
 			return true;
 		}
+
+		return false;
+	}
+
+	/**
+	 * Check whether any supported page builder stores a [tocflow] shortcode
+	 * reference for this post (without executing any code).
+	 *
+	 * @param int $post_id Post ID.
+	 * @return bool
+	 */
+	private static function builder_has_tocflow( $post_id ) {
+		// Elementor.
+		if ( 'builder' === get_post_meta( $post_id, '_elementor_edit_mode', true ) ) {
+			$data = get_post_meta( $post_id, '_elementor_data', true );
+			if ( is_string( $data ) && false !== strpos( $data, 'tocflow' ) ) {
+				return true;
+			}
+		}
+
+		// Beaver Builder.
+		if ( get_post_meta( $post_id, '_fl_builder_enabled', true ) ) {
+			$data = get_post_meta( $post_id, '_fl_builder_data', true );
+			if ( is_string( $data ) && false !== strpos( $data, 'tocflow' ) ) {
+				return true;
+			}
+			if ( is_array( $data ) ) {
+				// Beaver Builder stores modules as objects; json-encode and search.
+				$json = wp_json_encode( $data );
+				if ( is_string( $json ) && false !== strpos( $json, 'tocflow' ) ) {
+					return true;
+				}
+			}
+		}
+
+		// Bricks.
+		$bricks = get_post_meta( $post_id, '_bricks_page_content_2', true );
+		if ( ! empty( $bricks ) ) {
+			$json = is_string( $bricks ) ? $bricks : wp_json_encode( $bricks );
+			if ( is_string( $json ) && false !== strpos( $json, 'tocflow' ) ) {
+				return true;
+			}
+		}
+
+		// Oxygen / Breakdance (raw shortcode content stored in meta).
+		foreach ( array( 'ct_builder_shortcodes', 'breakdance_data' ) as $meta_key ) {
+			$val = get_post_meta( $post_id, $meta_key, true );
+			if ( $val && false !== strpos( (string) $val, 'tocflow' ) ) {
+				return true;
+			}
+		}
+
 		return false;
 	}
 
diff --git a/includes/class-tocflow-plugin.php b/includes/class-tocflow-plugin.php
index 5c6f9cd..f5207f3 100644
--- a/includes/class-tocflow-plugin.php
+++ b/includes/class-tocflow-plugin.php
@@ -40,7 +40,13 @@ public function boot() {
 		add_action( 'init', array( $this, 'register_block' ) );
 		add_action( 'init', array( $this, 'register_shortcode' ) );
 		add_action( 'admin_init', array( 'TOCflow_Settings', 'register' ) );
+
+		// Gutenberg: ID injection via block rendering pipeline.
 		add_filter( 'render_block', array( 'TOCflow_Headings', 'add_heading_ids' ), 10, 2 );
+
+		// Page builders: ID injection via rendered HTML (runs after builder output).
+		add_filter( 'the_content', array( $this, 'inject_builder_heading_ids' ), 999 );
+
 		add_filter( 'the_content', array( $this, 'auto_insert' ), 12 );
 		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_front_assets' ), 20 );
 		add_filter( 'plugin_action_links_' . TOCFLOW_BASENAME, array( $this, 'action_links' ) );
@@ -63,6 +69,45 @@ public function register_block() {
 		register_block_type( $build );
 	}
 
+	/**
+	 * Inject heading IDs into page-builder-rendered HTML via the_content filter.
+	 *
+	 * This runs at priority 999 — after Elementor, Divi, Beaver Builder, Bricks,
+	 * WPBakery, and Oxygen have all generated their output — so headings that exist
+	 * only inside builder widgets receive the same ID slugs as the TOC links.
+	 * Skips gracefully on pure Gutenberg posts (render_block already handled those).
+	 *
+	 * @param string $content Rendered post content.
+	 * @return string
+	 */
+	public function inject_builder_heading_ids( $content ) {
+		if ( is_admin() || ! is_singular() || ! in_the_loop() || ! is_main_query() ) {
+			return $content;
+		}
+
+		if ( ! TOCflow_Headings::should_inject_ids() ) {
+			return $content;
+		}
+
+		$post_id = get_the_ID();
+		if ( ! $post_id ) {
+			return $content;
+		}
+
+		// Pure Gutenberg posts: render_block already injected the IDs.
+		$post = get_post( $post_id );
+		if ( $post && has_blocks( $post->post_content ) ) {
+			return $content;
+		}
+
+		$headings = TOCflow_Headings::get_all( $post_id );
+		if ( empty( $headings ) ) {
+			return $content;
+		}
+
+		return TOCflow_Headings::inject_ids_in_html( $content, $headings );
+	}
+
 	/**
 	 * [tocflow] shortcode — same output as the block, for classic content and theme templates.
 	 *
@@ -95,7 +140,22 @@ public function shortcode( $atts ) {
 				'min'         => '-1',
 				'smooth'      => 'inherit',
 				'style'       => 'default',
-			),
+				// Reading Guide shortcode attributes.
+				'preview'     => '0',   // hover-preview tooltip on TOC links.
+				'guide'       => '0',   // full Reading Guide mode.
+				'previews'    => '0',   // inline section content previews.
+				'density'     => '0',   // section density bars.
+				'readtime'    => '0',   // per-section read-time estimates.
+				'progress'    => '0',   // reading progress fade.
+				'reactions'   => '0',   // emoji reactions per section.
+				'citations'   => '0',   // one-click academic citations.
+				'citation'    => 'apa', // citation format (apa|mla|chicago|harvard|plain).
+			'export'      => '0',   // show copy/download/print toolbar.
+			// Study tool shortcode attributes.
+			'rprogress'   => '0',   // reading progress bar.
+			'bookmark'    => '0',   // resume reading bookmark.
+			'rnotes'      => '0',   // reader note pads per section.
+		),
 			$atts,
 			'tocflow'
 		);
@@ -129,6 +189,15 @@ public function shortcode( $atts ) {
 			? (bool) TOCflow_Settings::get_value( 'highlight_active' )
 			: $this->is_truthy( $atts['highlight'] );
 
+		$guide_mode   = $this->is_truthy( $atts['guide'] );
+		$preview_hover = $this->is_truthy( $atts['preview'] );
+
+		$allowed_citation = array( 'apa', 'mla', 'chicago', 'harvard', 'plain' );
+		$citation_style   = sanitize_key( $atts['citation'] );
+		if ( ! in_array( $citation_style, $allowed_citation, true ) ) {
+			$citation_style = 'apa';
+		}
+
 		$attributes = array(
 			'title'            => sanitize_text_field( $atts['title'] ),
 			'showTitle'        => $this->is_truthy( $atts['showtitle'] ),
@@ -155,6 +224,22 @@ public function shortcode( $atts ) {
 			'maxHeight'        => max( 0, (int) $atts['maxheight'] ),
 			'minHeadings'      => (int) $atts['min'],
 			'smoothScroll'     => $smooth,
+			// Reading Guide attributes.
+			'previewOnHover'   => $preview_hover,
+			'guideMode'        => $guide_mode,
+			'showPreviews'     => $guide_mode && $this->is_truthy( $atts['previews'] ),
+			'showDensity'      => $guide_mode && $this->is_truthy( $atts['density'] ),
+			'showReadTime'     => $guide_mode && $this->is_truthy( $atts['readtime'] ),
+			'trackProgress'    => $guide_mode && $this->is_truthy( $atts['progress'] ),
+			'showReactions'    => $guide_mode && $this->is_truthy( $atts['reactions'] ),
+			'showCitations'    => $guide_mode && $this->is_truthy( $atts['citations'] ),
+			'citationStyle'    => $citation_style,
+			'sectionNotes'        => array(),
+			'sectionStatus'       => array(),
+			'showExport'          => $this->is_truthy( $atts['export'] ),
+			'showReadingProgress' => $this->is_truthy( $atts['rprogress'] ),
+			'showBookmark'        => $this->is_truthy( $atts['bookmark'] ),
+			'showReaderNotes'     => $this->is_truthy( $atts['rnotes'] ),
 		);
 
 		return TOCflow_Headings::render_nav( $attributes, $post_id, false );
@@ -182,7 +267,8 @@ public function enqueue_front_assets() {
 		$settings = TOCflow_Settings::get();
 		$needed   = has_block( 'tocflow/table-of-contents', $post )
 			|| has_shortcode( $post->post_content, 'tocflow' )
-			|| ( 'none' !== $settings['auto_insert'] && in_array( $post->post_type, $settings['auto_insert_types'], true ) );
+			|| ( 'none' !== $settings['auto_insert'] && in_array( $post->post_type, $settings['auto_insert_types'], true ) )
+			|| TOCflow_Headings::should_inject_ids(); // covers page-builder shortcode placements
 		if ( ! $needed ) {
 			return;
 		}
diff --git a/includes/class-tocflow-settings.php b/includes/class-tocflow-settings.php
index 99c4a0e..71e4534 100644
--- a/includes/class-tocflow-settings.php
+++ b/includes/class-tocflow-settings.php
@@ -23,9 +23,13 @@ class TOCflow_Settings {
 	 */
 	public static function defaults() {
 		return array(
+			// Reading experience.
 			'smooth_scroll'     => 1,
 			'scroll_offset'     => 96,
 			'highlight_active'  => 1,
+			'min_headings'      => 2,
+
+			// Auto-generate.
 			'auto_insert'       => 'none',
 			'auto_insert_types' => array( 'post' ),
 			'auto_title'        => 'Table of Contents',
@@ -48,7 +52,39 @@ public static function defaults() {
 			'auto_underline'    => 0,
 			'auto_style'        => 'default',
 			'auto_max_height'   => 0,
-			'min_headings'      => 2,
+
+			// Reading Guide & Study Tools global defaults.
+			'auto_preview_hover'    => 0,
+			'auto_guide_mode'       => 0,
+			'auto_show_previews'    => 1,
+			'auto_show_density'     => 1,
+			'auto_show_read_time'   => 1,
+			'auto_track_progress'   => 1,
+			'auto_show_reactions'   => 0,
+			'auto_show_citations'   => 0,
+			'auto_citation_style'   => 'apa',
+			'auto_reading_progress' => 0,
+			'auto_bookmark'         => 0,
+			'auto_reader_notes'     => 0,
+			'auto_export'           => 0,
+
+			// Design & Appearance (empty = use built-in styles).
+			'design_bg_color'      => '',
+			'design_text_color'    => '',
+			'design_link_color'    => '',
+			'design_font_size'     => '',
+			'design_font_weight'   => '',
+			'design_line_height'   => '',
+			'design_border_width'  => '',
+			'design_border_color'  => '',
+			'design_border_style'  => '',
+			'design_border_radius' => '',
+			'design_padding'       => '',
+
+			// Accessibility.
+			'focus_style'          => 'default',
+
+			// SEO & data.
 			'schema_markup'     => 0,
 			'delete_data'       => 0,
 		);
@@ -112,7 +148,11 @@ public static function block_attributes() {
 			$title = __( 'Table of Contents', 'tocflow' );
 		}
 
-		$ordered = ! empty( $settings['auto_ordered'] ) || 'nested' === $numbering;
+		$ordered        = ! empty( $settings['auto_ordered'] ) || 'nested' === $numbering;
+		$guide_mode     = ! empty( $settings['auto_guide_mode'] );
+		$allowed_cite   = array( 'apa', 'mla', 'chicago', 'harvard', 'plain' );
+		$citation_style = isset( $settings['auto_citation_style'] ) && in_array( $settings['auto_citation_style'], $allowed_cite, true )
+			? $settings['auto_citation_style'] : 'apa';
 
 		return array(
 			'title'            => $title,
@@ -140,6 +180,23 @@ public static function block_attributes() {
 			'maxHeight'        => isset( $settings['auto_max_height'] ) ? max( 0, (int) $settings['auto_max_height'] ) : 0,
 			'minHeadings'      => -1,
 			'smoothScroll'     => 'inherit',
+			// Reading Guide global defaults.
+			'previewOnHover'   => ! empty( $settings['auto_preview_hover'] ),
+			'guideMode'        => $guide_mode,
+			'showPreviews'     => $guide_mode && ! empty( $settings['auto_show_previews'] ),
+			'showDensity'      => $guide_mode && ! empty( $settings['auto_show_density'] ),
+			'showReadTime'     => $guide_mode && ! empty( $settings['auto_show_read_time'] ),
+			'trackProgress'    => $guide_mode && ! empty( $settings['auto_track_progress'] ),
+			'showReactions'    => $guide_mode && ! empty( $settings['auto_show_reactions'] ),
+			'showCitations'    => $guide_mode && ! empty( $settings['auto_show_citations'] ),
+			'citationStyle'    => $citation_style,
+			'sectionNotes'     => array(),
+			'sectionStatus'    => array(),
+			// Study Tools & Export global defaults.
+			'showReadingProgress' => ! empty( $settings['auto_reading_progress'] ),
+			'showBookmark'        => ! empty( $settings['auto_bookmark'] ),
+			'showReaderNotes'     => ! empty( $settings['auto_reader_notes'] ),
+			'showExport'          => ! empty( $settings['auto_export'] ),
 		);
 	}
 
@@ -149,6 +206,57 @@ public static function block_attributes() {
 	 * @param mixed $input Raw submitted values.
 	 * @return array
 	 */
+	/**
+	 * Sanitize a hex colour string. Returns empty string if invalid.
+	 *
+	 * @param mixed $value Raw value.
+	 * @return string
+	 */
+	private static function sanitize_hex_color( $value ) {
+		$v = trim( (string) $value );
+		if ( '' === $v ) {
+			return '';
+		}
+		if ( preg_match( '/^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/', $v ) ) {
+			return strtolower( $v );
+		}
+		return '';
+	}
+
+	/**
+	 * Sanitize a CSS length (px / rem / em / %). Returns empty string if invalid.
+	 *
+	 * @param mixed $value Raw value.
+	 * @return string
+	 */
+	private static function sanitize_css_length( $value ) {
+		$v = trim( (string) $value );
+		if ( '' === $v ) {
+			return '';
+		}
+		if ( preg_match( '/^[\d.]+(%|px|rem|em)$/', $v ) ) {
+			return $v;
+		}
+		return '';
+	}
+
+	/**
+	 * Sanitize a unitless CSS number (e.g. line-height). Returns empty if invalid.
+	 *
+	 * @param mixed $value Raw value.
+	 * @return string
+	 */
+	private static function sanitize_css_number( $value ) {
+		$v = trim( (string) $value );
+		if ( '' === $v ) {
+			return '';
+		}
+		if ( preg_match( '/^\d+(\.\d+)?$/', $v ) ) {
+			return $v;
+		}
+		return '';
+	}
+
 	public static function sanitize( $input ) {
 		$defaults = self::defaults();
 		if ( ! is_array( $input ) ) {
@@ -177,6 +285,19 @@ public static function sanitize( $input ) {
 			'auto_compact',
 			'auto_two_columns',
 			'auto_underline',
+			// Reading Guide & Study Tools checkboxes.
+			'auto_preview_hover',
+			'auto_guide_mode',
+			'auto_show_previews',
+			'auto_show_density',
+			'auto_show_read_time',
+			'auto_track_progress',
+			'auto_show_reactions',
+			'auto_show_citations',
+			'auto_reading_progress',
+			'auto_bookmark',
+			'auto_reader_notes',
+			'auto_export',
 		);
 		foreach ( $checkboxes as $key ) {
 			$clean[ $key ] = empty( $input[ $key ] ) ? 0 : 1;
@@ -220,6 +341,36 @@ public static function sanitize( $input ) {
 		$allowed_styles = array( 'default', 'minimal', 'boxed', 'underline', 'card' );
 		$clean['auto_style'] = in_array( $style, $allowed_styles, true ) ? $style : 'default';
 
+		// Citation style.
+		$allowed_citation = array( 'apa', 'mla', 'chicago', 'harvard', 'plain' );
+		$cite             = isset( $input['auto_citation_style'] ) ? sanitize_key( $input['auto_citation_style'] ) : 'apa';
+		$clean['auto_citation_style'] = in_array( $cite, $allowed_citation, true ) ? $cite : 'apa';
+
+		// Design & Appearance.
+		$clean['design_bg_color']    = self::sanitize_hex_color( isset( $input['design_bg_color'] ) ? $input['design_bg_color'] : '' );
+		$clean['design_text_color']  = self::sanitize_hex_color( isset( $input['design_text_color'] ) ? $input['design_text_color'] : '' );
+		$clean['design_link_color']  = self::sanitize_hex_color( isset( $input['design_link_color'] ) ? $input['design_link_color'] : '' );
+		$clean['design_font_size']   = self::sanitize_css_length( isset( $input['design_font_size'] ) ? $input['design_font_size'] : '' );
+		$clean['design_line_height'] = self::sanitize_css_number( isset( $input['design_line_height'] ) ? $input['design_line_height'] : '' );
+
+		$allowed_fw = array( '100', '200', '300', '400', '500', '600', '700', '800', '900', 'normal', 'bold' );
+		$fw         = isset( $input['design_font_weight'] ) ? trim( (string) $input['design_font_weight'] ) : '';
+		$clean['design_font_weight'] = in_array( $fw, $allowed_fw, true ) ? $fw : '';
+
+		$clean['design_border_width']  = self::sanitize_css_length( isset( $input['design_border_width'] ) ? $input['design_border_width'] : '' );
+		$clean['design_border_color']  = self::sanitize_hex_color( isset( $input['design_border_color'] ) ? $input['design_border_color'] : '' );
+		$clean['design_border_radius'] = self::sanitize_css_length( isset( $input['design_border_radius'] ) ? $input['design_border_radius'] : '' );
+		$clean['design_padding']       = self::sanitize_css_length( isset( $input['design_padding'] ) ? $input['design_padding'] : '' );
+
+		$allowed_bs = array( '', 'solid', 'dashed', 'dotted', 'double', 'none' );
+		$bs         = isset( $input['design_border_style'] ) ? sanitize_key( $input['design_border_style'] ) : '';
+		$clean['design_border_style'] = in_array( $bs, $allowed_bs, true ) ? $bs : '';
+
+		// Accessibility.
+		$allowed_focus = array( 'default', 'bold', 'high-contrast' );
+		$focus         = isset( $input['focus_style'] ) ? sanitize_key( $input['focus_style'] ) : 'default';
+		$clean['focus_style'] = in_array( $focus, $allowed_focus, true ) ? $focus : 'default';
+
 		return $clean;
 	}
 
diff --git a/languages/tocflow.pot b/languages/tocflow.pot
index b968e85..df47b1b 100644
--- a/languages/tocflow.pot
+++ b/languages/tocflow.pot
@@ -1,482 +1,1222 @@
 # Copyright (C) 2026 Matt Hummel
-# This file is distributed under the GNU General Public License v2 or later.
+# This file is distributed under the GPL-2.0-or-later.
 msgid ""
 msgstr ""
-"Project-Id-Version: TOCflow 1.0.2\n"
-"Report-Msgid-Bugs-To: https://github.com/matthummel-pa/tocflow/issues\n"
-"POT-Creation-Date: 2026-08-31 17:29+0000\n"
+"Project-Id-Version: TOCflow 1.3.0\n"
+"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/workspace\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"Language: \n"
+"POT-Creation-Date: 2026-09-08T18:03:08+00:00\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"X-Generator: WP-CLI 2.12.0\n"
 "X-Domain: tocflow\n"
 
-#: src/edit.js:362
-msgid "0 is unlimited. A max height makes long outlines scroll — useful with sticky."
+#. Plugin Name of the plugin
+#: tocflow.php
+#: admin/views/settings.php:25
+#: includes/class-tocflow-admin.php:52
+#: includes/class-tocflow-admin.php:53
+msgid "TOCflow"
+msgstr ""
+
+#. Plugin URI of the plugin
+#: tocflow.php
+msgid "https://github.com/matthummel-pa/tocflow"
+msgstr ""
+
+#. Description of the plugin
+#: tocflow.php
+msgid "A lightweight Table of Contents block that auto-generates a linked outline from your post headings."
+msgstr ""
+
+#. Author of the plugin
+#: tocflow.php
+msgid "Matt Hummel"
+msgstr ""
+
+#. Author URI of the plugin
+#: tocflow.php
+msgid "https://matthummel.com"
+msgstr ""
+
+#: admin/views/settings.php:26
+msgid "Server-rendered table of contents for the WordPress block editor."
+msgstr ""
+
+#. translators: %s: plugin version
+#: admin/views/settings.php:29
+#, php-format
+msgid "Version %s"
+msgstr ""
+
+#: admin/views/settings.php:32
+msgid "TOCflow sections"
+msgstr ""
+
+#: admin/views/settings.php:33
+#: includes/class-tocflow-plugin.php:372
+msgid "Settings"
+msgstr ""
+
+#: admin/views/settings.php:34
+msgid "Docs &amp; Support"
+msgstr ""
+
+#: admin/views/settings.php:40
+msgid "Get started"
+msgstr ""
+
+#: admin/views/settings.php:42
+msgid "Edit a post that has Heading blocks (H1-H6; H1 is off by default)."
+msgstr ""
+
+#: admin/views/settings.php:43
+msgid "Click + and search for \"Table of Contents\"."
+msgstr ""
+
+#: admin/views/settings.php:44
+msgid "Optional: pick a style, numbered list, collapse, or sticky in the block sidebar."
+msgstr ""
+
+#: admin/views/settings.php:45
+msgid "Preview the post and click a link - it should jump to that heading."
+msgstr ""
+
+#: admin/views/settings.php:48
+#: admin/views/settings.php:58
+msgid "Full documentation"
+msgstr ""
+
+#: admin/views/settings.php:49
+msgid "GitHub repository"
+msgstr ""
+
+#: admin/views/settings.php:54
+msgid "Need help?"
+msgstr ""
+
+#: admin/views/settings.php:55
+msgid "Support is provided through GitHub issues. Include your WordPress version, PHP version, theme, and steps to reproduce."
+msgstr ""
+
+#: admin/views/settings.php:56
+msgid "Report a bug or request a feature"
+msgstr ""
+
+#: admin/views/settings.php:59
+msgid "Reading Guide docs"
+msgstr ""
+
+#: admin/views/settings.php:60
+msgid "Compatibility notes"
+msgstr ""
+
+#: admin/views/settings.php:61
+msgid "Changelog"
+msgstr ""
+
+#: admin/views/settings.php:62
+msgid "Security policy"
+msgstr ""
+
+#: admin/views/settings.php:67
+msgid "Compatibility"
+msgstr ""
+
+#: admin/views/settings.php:68
+msgid "TOCflow works with every major theme, SEO plugin, and multilingual plugin. It inherits your theme's fonts and colors, makes zero remote calls, and loads no third-party assets."
+msgstr ""
+
+#: admin/views/settings.php:71
+msgid "WordPress &amp; PHP"
+msgstr ""
+
+#: admin/views/settings.php:73
+msgid "WordPress 6.4 through 7.1"
+msgstr ""
+
+#: admin/views/settings.php:74
+msgid "PHP 7.4, 8.0, 8.1, 8.2, 8.3"
+msgstr ""
+
+#: admin/views/settings.php:75
+msgid "Block editor + Classic Editor (shortcode)"
+msgstr ""
+
+#: admin/views/settings.php:79
+msgid "SEO plugins"
+msgstr ""
+
+#: admin/views/settings.php:81
+msgid "Yoast SEO - no schema conflicts"
+msgstr ""
+
+#: admin/views/settings.php:82
+msgid "Rank Math - schema opt-in only"
+msgstr ""
+
+#: admin/views/settings.php:83
+msgid "All in One SEO, SEOPress"
+msgstr ""
+
+#: admin/views/settings.php:87
+msgid "Themes"
+msgstr ""
+
+#: admin/views/settings.php:89
+msgid "Twenty Twenty-Four / Twenty Twenty-Five"
+msgstr ""
+
+#: admin/views/settings.php:90
+msgid "Astra, Kadence, GeneratePress, Blocksy"
+msgstr ""
+
+#: admin/views/settings.php:91
+msgid "Any theme - inherits your colors &amp; fonts"
+msgstr ""
+
+#: admin/views/settings.php:95
+msgid "Page builders"
+msgstr ""
+
+#: admin/views/settings.php:97
+msgid "Elementor - heading JSON parsed automatically"
+msgstr ""
+
+#: admin/views/settings.php:98
+msgid "Bricks, Divi, Beaver, WPBakery, Oxygen"
+msgstr ""
+
+#: admin/views/settings.php:99
+msgid "Any builder - HTML scan fallback"
+msgstr ""
+
+#: admin/views/settings.php:103
+msgid "Full compatibility notes"
+msgstr ""
+
+#: admin/views/settings.php:107
+#: src/edit.js:565
+msgid "Reading Guide"
+msgstr ""
+
+#: admin/views/settings.php:108
+msgid "Enable in the block sidebar. Adds hover section previews, read-time estimates, content density bars, reading progress, emoji reactions, author notes, and one-click academic citations. Everything is extracted server-side - zero external APIs."
+msgstr ""
+
+#: admin/views/settings.php:109
+msgid "Reading Guide documentation"
+msgstr ""
+
+#: admin/views/settings.php:113
+#: includes/class-tocflow-admin.php:119
+msgid "Shortcode"
+msgstr ""
+
+#: admin/views/settings.php:114
+msgid "Use this in classic content, page-builder text widgets, or a theme template (via do_shortcode):"
+msgstr ""
+
+#: admin/views/settings.php:116
+msgid "Layout &amp; behavior:"
+msgstr ""
+
+#: admin/views/settings.php:117
+msgid "Reading Guide:"
+msgstr ""
+
+#: admin/views/settings.php:117
+msgid "(hover tooltip)"
+msgstr ""
+
+#: admin/views/settings.php:117
+msgid "(full guide mode)"
+msgstr ""
+
+#: admin/views/settings.php:118
+msgid "Study tools:"
+msgstr ""
+
+#: admin/views/settings.php:118
+msgid "(reading progress bar)"
+msgstr ""
+
+#: admin/views/settings.php:118
+msgid "(resume reading)"
+msgstr ""
+
+#: admin/views/settings.php:118
+msgid "(reader note pads per section)"
+msgstr ""
+
+#: admin/views/settings.php:119
+msgid "Export &amp; print:"
+msgstr ""
+
+#: admin/views/settings.php:119
+msgid "(adds Copy / .md / .doc / Print buttons)"
+msgstr ""
+
+#: admin/views/settings.php:126
+msgid "Skip a heading"
+msgstr ""
+
+#: admin/views/settings.php:127
+msgid "Add the CSS class no-toc or tocflow-skip to a Heading block (Advanced > Additional CSS class(es)) to keep it out of the outline."
+msgstr ""
+
+#: admin/views/settings.php:153
+msgid "Clear colour"
+msgstr ""
+
+#: admin/views/settings.php:154
+msgid "Clear"
+msgstr ""
+
+#: admin/views/settings.php:162
+msgid "Reading experience"
+msgstr ""
+
+#: admin/views/settings.php:165
+#: src/edit.js:450
+msgid "Smooth scroll"
+msgstr ""
+
+#: admin/views/settings.php:169
+msgid "Animate jumps to headings (respects reduced-motion preferences)."
+msgstr ""
+
+#: admin/views/settings.php:174
+msgid "Scroll offset (px)"
+msgstr ""
+
+#: admin/views/settings.php:177
+msgid "Space to leave under a sticky admin bar or site header so headings are not covered."
+msgstr ""
+
+#: admin/views/settings.php:181
+msgid "Highlight active heading"
+msgstr ""
+
+#: admin/views/settings.php:185
+msgid "Mark the section currently in view in the table of contents."
+msgstr ""
+
+#: admin/views/settings.php:190
+msgid "Minimum headings"
+msgstr ""
+
+#: admin/views/settings.php:193
+msgid "Hide the TOC when a post has fewer matching headings than this."
+msgstr ""
+
+#: admin/views/settings.php:200
+msgid "Auto-generate the block"
+msgstr ""
+
+#: admin/views/settings.php:201
+msgid "Prints the Table of Contents Gutenberg block on the front end. Posts that already have the block (or the [tocflow] shortcode) are left alone. You can still insert the block by hand in the editor."
+msgstr ""
+
+#: admin/views/settings.php:204
+msgid "Position"
+msgstr ""
+
+#: admin/views/settings.php:207
+msgid "Off - only show when the block or shortcode is added"
+msgstr ""
+
+#: admin/views/settings.php:208
+msgid "Top of content"
+msgstr ""
+
+#: admin/views/settings.php:209
+msgid "After the first heading"
+msgstr ""
+
+#: admin/views/settings.php:214
+msgid "Post types"
+msgstr ""
+
+#: admin/views/settings.php:227
+#: src/edit.js:272
+msgid "Title"
+msgstr ""
+
+#: admin/views/settings.php:233
+msgid "Show the title above the list"
+msgstr ""
+
+#: admin/views/settings.php:239
+#: src/edit.js:290
+msgid "Title element"
+msgstr ""
+
+#: admin/views/settings.php:242
+#: src/edit.js:294
+msgid "Paragraph"
+msgstr ""
+
+#: admin/views/settings.php:250
+#: src/edit.js:217
+msgid "Heading levels"
+msgstr ""
+
+#: admin/views/settings.php:270
+msgid "H1 is usually the post title. Leave it off unless headings inside the content use H1."
+msgstr ""
+
+#: admin/views/settings.php:274
+msgid "List"
+msgstr ""
+
+#: admin/views/settings.php:279
+#: src/edit.js:209
+msgid "Numbered list"
+msgstr ""
+
+#: admin/views/settings.php:281
+#: src/edit.js:318
+msgid "Numbering"
+msgstr ""
+
+#: admin/views/settings.php:283
+#: src/edit.js:322
+msgid "Sequential (1, 2, 3)"
+msgstr ""
+
+#: admin/views/settings.php:284
+#: src/edit.js:329
+msgid "Nested (1, 1.1, 1.1.1)"
+msgstr ""
+
+#: admin/views/settings.php:286
+msgid "Nested numbering applies when the list is numbered."
+msgstr ""
+
+#: admin/views/settings.php:289
+msgid "Hide bullets and browser numbers"
+msgstr ""
+
+#: admin/views/settings.php:295
+msgid "Style"
+msgstr ""
+
+#: admin/views/settings.php:300
+msgid "Default"
+msgstr ""
+
+#: admin/views/settings.php:301
+msgid "Minimal"
+msgstr ""
+
+#: admin/views/settings.php:302
+msgid "Boxed"
+msgstr ""
+
+#: admin/views/settings.php:303
+msgid "Underline"
+msgstr ""
+
+#: admin/views/settings.php:304
+msgid "Card"
+msgstr ""
+
+#: admin/views/settings.php:311
+msgid "Same Block Styles as in the editor Styles panel."
+msgstr ""
+
+#: admin/views/settings.php:315
+msgid "Layout"
+msgstr ""
+
+#: admin/views/settings.php:320
+#: src/edit.js:371
+msgid "Compact spacing"
+msgstr ""
+
+#: admin/views/settings.php:324
+msgid "Two columns (stacks on small screens)"
+msgstr ""
+
+#: admin/views/settings.php:328
+#: src/edit.js:379
+msgid "Always underline links"
+msgstr ""
+
+#: admin/views/settings.php:330
+#: src/edit.js:388
+msgid "Max height (px)"
+msgstr ""
+
+#: admin/views/settings.php:332
+msgid "0 is unlimited. A max height makes long outlines scroll."
+msgstr ""
+
+#: admin/views/settings.php:337
+#: src/edit.js:403
+msgid "Behavior"
+msgstr ""
+
+#: admin/views/settings.php:342
+#: src/edit.js:408
+msgid "Sticky while scrolling"
+msgstr ""
+
+#: admin/views/settings.php:346
+#: src/edit.js:420
+msgid "Collapsible"
+msgstr ""
+
+#: admin/views/settings.php:350
+#: src/edit.js:429
+msgid "Start collapsed"
+msgstr ""
+
+#: admin/views/settings.php:359
+msgid "SEO &amp; data"
+msgstr ""
+
+#: admin/views/settings.php:362
+msgid "Schema markup"
+msgstr ""
+
+#: admin/views/settings.php:366
+msgid "Output ItemList JSON-LD for the outline. Leave off if your SEO plugin already outputs a TOC schema."
+msgstr ""
+
+#: admin/views/settings.php:371
+msgid "Uninstall"
+msgstr ""
+
+#: admin/views/settings.php:375
+msgid "Delete TOCflow settings when the plugin is deleted. Deactivating never deletes data."
+msgstr ""
+
+#: admin/views/settings.php:384
+msgid "Design &amp; Appearance"
+msgstr ""
+
+#: admin/views/settings.php:386
+msgid "Global visual defaults. Leave any field empty to use the built-in preset style. Per-block overrides in the editor always win."
+msgstr ""
+
+#: admin/views/settings.php:390
+msgid "Background colour"
+msgstr ""
+
+#: admin/views/settings.php:392
+msgid "Background colour (hex)"
+msgstr ""
+
+#: admin/views/settings.php:393
+msgid "e.g. #f8fafc — overrides the preset background."
+msgstr ""
+
+#: admin/views/settings.php:397
+msgid "Text colour"
+msgstr ""
+
+#: admin/views/settings.php:399
+msgid "Text colour (hex)"
+msgstr ""
+
+#: admin/views/settings.php:403
+msgid "Link colour"
+msgstr ""
+
+#: admin/views/settings.php:405
+msgid "Link colour (hex)"
+msgstr ""
+
+#: admin/views/settings.php:409
+msgid "Font size"
+msgstr ""
+
+#: admin/views/settings.php:411
+msgid "e.g. 15px or 0.9rem"
+msgstr ""
+
+#: admin/views/settings.php:415
+msgid "Link font weight"
+msgstr ""
+
+#: admin/views/settings.php:418
+msgid "— inherit from theme —"
+msgstr ""
+
+#: admin/views/settings.php:428
+msgid "Line height"
+msgstr ""
+
+#: admin/views/settings.php:430
+msgid "e.g. 1.6"
+msgstr ""
+
+#: admin/views/settings.php:431
+msgid "Unitless number, e.g. 1.6."
+msgstr ""
+
+#: admin/views/settings.php:435
+msgid "Border"
+msgstr ""
+
+#: admin/views/settings.php:439
+msgid "width e.g. 1px"
+msgstr ""
+
+#: admin/views/settings.php:439
+msgid "Border width"
+msgstr ""
+
+#: admin/views/settings.php:440
+msgid "Border style"
+msgstr ""
+
+#: admin/views/settings.php:441
+msgid "— style —"
+msgstr ""
+
+#: admin/views/settings.php:446
+msgid "Border colour (hex)"
+msgstr ""
+
+#: admin/views/settings.php:449
+msgid "Border radius:"
+msgstr ""
+
+#: admin/views/settings.php:450
+msgid "e.g. 8px"
+msgstr ""
+
+#: admin/views/settings.php:456
+msgid "Padding"
+msgstr ""
+
+#: admin/views/settings.php:458
+msgid "e.g. 1.25rem"
+msgstr ""
+
+#: admin/views/settings.php:459
+msgid "All sides. Use px or rem. Leave blank for the preset default."
 msgstr ""
 
-#: admin/views/settings.php:253
-msgid "0 is unlimited. A max height makes long outlines scroll."
+#: admin/views/settings.php:468
+msgid "Reading Guide &amp; Study Tools"
 msgstr ""
 
-#: src/edit.js:487
-msgid "Add Heading blocks to this post and they will appear here. Headings with the class no-toc are skipped."
+#: admin/views/settings.php:472
+msgid "Global defaults for auto-inserted blocks and shortcodes. Manual blocks keep their own per-block settings from the editor sidebar."
 msgstr ""
 
-#: admin/views/settings.php:74
-msgid "Add the CSS class no-toc or tocflow-skip to a Heading block (Advanced → Additional CSS class(es)) to keep it out of the outline."
+#: admin/views/settings.php:476
+#: src/edit.js:570
+msgid "Hover section preview"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:164
-msgid "Add the Table of Contents block to a post, or auto-generate it under Settings → TOCflow. The [tocflow] shortcode still works in classic content."
+#: admin/views/settings.php:480
+msgid "Show the opening sentence of each section in a tooltip when hovering a TOC link."
 msgstr ""
 
-#: admin/views/settings.php:130
-msgid "After the first heading"
+#: admin/views/settings.php:485
+msgid "Reading Guide mode"
 msgstr ""
 
-#: admin/views/settings.php:249 src/edit.js:345
-msgid "Always underline links"
+#: admin/views/settings.php:489
+msgid "Enable the full Reading Guide (inline previews, density bars, read time, progress fade)."
 msgstr ""
 
-#: admin/views/settings.php:90
-msgid "Animate jumps to headings (respects reduced-motion preferences)."
+#: admin/views/settings.php:494
+msgid "Section content previews"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:105
-msgid "Auto-generate"
+#: admin/views/settings.php:498
+msgid "Show the first ~20 words of each section under its TOC link."
 msgstr ""
 
-#: admin/views/settings.php:121
-msgid "Auto-generate the block"
+#: admin/views/settings.php:503
+msgid "Content density bars"
 msgstr ""
 
-#: admin/views/settings.php:258 src/edit.js:369
-msgid "Behavior"
+#: admin/views/settings.php:507
+msgid "Show a proportional bar indicating each section's word count."
 msgstr ""
 
-#: admin/views/settings.php:223
-msgid "Boxed"
+#: admin/views/settings.php:512
+msgid "Per-section read time"
 msgstr ""
 
-#: src/edit.js:164
-msgid "Bulleted list"
+#: admin/views/settings.php:516
+msgid "Show an estimated read time next to each TOC link."
 msgstr ""
 
-#: admin/views/settings.php:225
-msgid "Card"
+#: admin/views/settings.php:521
+msgid "Reading progress fade"
 msgstr ""
 
-#: admin/views/settings.php:59
-msgid "Changelog"
+#: admin/views/settings.php:525
+msgid "Fade out TOC items as the reader scrolls past each section."
 msgstr ""
 
-#: admin/views/settings.php:43
-msgid "Click + and search for “Table of Contents”."
+#: admin/views/settings.php:530
+#: src/edit.js:644
+msgid "Emoji reactions"
 msgstr ""
 
-#: admin/views/settings.php:267 src/edit.js:386
-msgid "Collapsible"
+#: admin/views/settings.php:534
+msgid "Let readers react per section (💡 ⭐ 🤔 ✅) — stored in browser localStorage, never on your server."
 msgstr ""
 
-#: admin/views/settings.php:241 src/edit.js:337
-msgid "Compact spacing"
+#: admin/views/settings.php:539
+msgid "Academic citations"
 msgstr ""
 
-#: admin/views/settings.php:221
-msgid "Default"
+#: admin/views/settings.php:543
+msgid "Show a § button that copies a formatted citation for each section — built from post meta, no external API."
 msgstr ""
 
-#: admin/views/settings.php:296
-msgid "Delete TOCflow settings when the plugin is deleted. Deactivating never deletes data."
+#: admin/views/settings.php:546
+msgid "Citation format:"
 msgstr ""
 
-#: includes/class-tocflow-plugin.php:300 admin/views/settings.php:34
-msgid "Docs & Support"
+#: admin/views/settings.php:554
+#: src/edit.js:687
+msgid "Plain link"
 msgstr ""
 
-#: includes/class-tocflow-plugin.php:316
-msgid "Documentation"
+#: admin/views/settings.php:574
+msgid "Study Tools &amp; Export"
 msgstr ""
 
-#: admin/views/settings.php:42
-msgid "Edit a post that has Heading blocks (H1–H6; H1 is off by default)."
+#: admin/views/settings.php:578
+msgid "All features are off by default and store data only in the reader's browser — nothing is sent to your server."
+msgstr ""
+
+#: admin/views/settings.php:582
+#: src/edit.js:527
+msgid "Reading progress bar"
+msgstr ""
+
+#: admin/views/settings.php:586
+msgid "Show a thin progress bar (0–100 % of headings read) above the TOC list."
+msgstr ""
+
+#: admin/views/settings.php:591
+#: src/edit.js:539
+msgid "Resume reading bookmark"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:99
+#: admin/views/settings.php:595
+msgid "Bookmark the reader's last-read heading in localStorage and show a ↩ Resume button on return visits."
+msgstr ""
+
+#: admin/views/settings.php:600
+#: src/edit.js:551
+msgid "Reader note pads"
+msgstr ""
+
+#: admin/views/settings.php:604
+msgid "Add a 📝 button per section so readers can jot private notes (localStorage only — no account needed)."
+msgstr ""
+
+#: admin/views/settings.php:609
+msgid "Export &amp; print toolbar"
+msgstr ""
+
+#: admin/views/settings.php:613
+msgid "Add Copy / Download .md / Download .doc / Print buttons under the TOC."
+msgstr ""
+
+#: admin/views/settings.php:622
+msgid "Accessibility"
+msgstr ""
+
+#: admin/views/settings.php:625
+msgid "Focus ring style"
+msgstr ""
+
+#: admin/views/settings.php:628
+msgid "Default — underline only (follows theme)"
+msgstr ""
+
+#: admin/views/settings.php:629
+msgid "Bold — 3 px outline, offset 2 px (WCAG 2.1 AA)"
+msgstr ""
+
+#: admin/views/settings.php:630
+msgid "High contrast — black outline on yellow background (WCAG 2.1 AAA)"
+msgstr ""
+
+#: admin/views/settings.php:632
+msgid "Applies to keyboard focus on TOC links. Does not affect the block editor."
+msgstr ""
+
+#: admin/views/settings.php:638
+msgid "Save settings"
+msgstr ""
+
+#: includes/class-tocflow-admin.php:105
+msgid "Using the block"
+msgstr ""
+
+#: includes/class-tocflow-admin.php:106
 msgid "Edit a post, click the inserter, and search for “Table of Contents”. The outline is built from Heading blocks in that post."
 msgstr ""
 
-#: admin/views/settings.php:40
-msgid "Get started"
+#: includes/class-tocflow-admin.php:112
+msgid "Auto-generate"
+msgstr ""
+
+#: includes/class-tocflow-admin.php:113
+msgid "Settings → TOCflow can print the Table of Contents block at the top of content or after the first heading. Customize title, heading levels, style, and layout there. Manual blocks and the [tocflow] shortcode still skip auto-generate so you never get two outlines."
+msgstr ""
+
+#: includes/class-tocflow-admin.php:120
+msgid "prints the same outline in classic content, widgets, or a theme template. The Gutenberg block is the primary placement method."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:118
+#: includes/class-tocflow-admin.php:124
+#: includes/class-tocflow-plugin.php:390
+msgid "Support"
+msgstr ""
+
+#: includes/class-tocflow-admin.php:125
 msgid "GitHub issues"
 msgstr ""
 
-#: admin/views/settings.php:49
-msgid "GitHub repository"
+#: includes/class-tocflow-admin.php:126
+msgid "Online docs"
 msgstr ""
 
-#: admin/views/settings.php:191
-msgid "H1 is usually the post title. Leave it off unless headings inside the content use H1."
+#: includes/class-tocflow-admin.php:170
+msgid "TOCflow is ready."
 msgstr ""
 
-#: admin/views/settings.php:171 src/edit.js:183
-msgid "Heading levels"
+#: includes/class-tocflow-admin.php:171
+msgid "Add the Table of Contents block to a post, or auto-generate it under Settings → TOCflow. The [tocflow] shortcode still works in classic content."
 msgstr ""
 
-#: admin/views/settings.php:210
-msgid "Hide bullets and browser numbers"
+#: includes/class-tocflow-admin.php:172
+msgid "Open settings"
 msgstr ""
 
-#: src/edit.js:309
-msgid "Hide bullets and numbers"
+#. translators: abbreviation for "minute" in read-time estimates, e.g. "~3 min"
+#: includes/class-tocflow-headings.php:553
+msgid "min"
 msgstr ""
 
-#: admin/views/settings.php:114
-msgid "Hide the TOC when a post has fewer matching headings than this."
+#: includes/class-tocflow-headings.php:587
+msgid "Author's note"
 msgstr ""
 
-#: admin/views/settings.php:102
-msgid "Highlight active heading"
+#. translators: %s = heading text
+#: includes/class-tocflow-headings.php:602
+#, php-format
+msgid "My note for: %s"
 msgstr ""
 
-#: src/edit.js:404
-msgid "Highlight the section in view"
+#: includes/class-tocflow-headings.php:607
+msgid "Your notes for this section\\xe2\\x80\\xa6"
 msgstr ""
 
-#: src/edit.js:186
-msgid "Include H1 headings"
+#. translators: %s = heading text
+#: includes/class-tocflow-headings.php:608
+#, php-format
+msgid "Notes for: %s"
 msgstr ""
 
-#: src/edit.js:198
-msgid "Include H2 headings"
+#: includes/class-tocflow-headings.php:620
+msgid "Insightful"
 msgstr ""
 
-#: src/edit.js:206
-msgid "Include H3 headings"
+#: includes/class-tocflow-headings.php:621
+msgid "Saved"
 msgstr ""
 
-#: src/edit.js:214
-msgid "Include H4 headings"
+#: includes/class-tocflow-headings.php:622
+msgid "Unclear"
 msgstr ""
 
-#: src/edit.js:222
-msgid "Include H5 headings"
+#: includes/class-tocflow-headings.php:623
+msgid "Got it"
 msgstr ""
 
-#: src/edit.js:230
-msgid "Include H6 headings"
+#: includes/class-tocflow-headings.php:626
+msgid "React to this section"
 msgstr ""
 
-#: src/edit.js:379
-msgid "Keeps the outline in view in a sidebar or wide column."
+#: includes/class-tocflow-headings.php:640
+msgid "Copy citation for this section"
 msgstr ""
 
-#: admin/views/settings.php:236
-msgid "Layout"
+#: includes/class-tocflow-headings.php:642
+msgid "Cite"
 msgstr ""
 
-#: admin/views/settings.php:195
-msgid "List"
+#: includes/class-tocflow-headings.php:751
+#: includes/class-tocflow-headings.php:1074
+#: includes/class-tocflow-plugin.php:120
+#: includes/class-tocflow-settings.php:148
+#: src/edit.js:187
+#: src/edit.js:801
+msgid "Table of Contents"
 msgstr ""
 
-#: src/edit.js:277
-msgid "List & layout"
+#: includes/class-tocflow-headings.php:954
+msgid "Toggle table of contents"
 msgstr ""
 
-#: admin/views/settings.php:106
-msgid "Mark the section currently in view in the table of contents."
+#. translators: %d = estimated total reading time in minutes
+#: includes/class-tocflow-headings.php:980
+#, php-format
+msgid "~%d min total"
 msgstr ""
 
-#: admin/views/settings.php:251 src/edit.js:354
-msgid "Max height (px)"
+#: includes/class-tocflow-headings.php:986
+msgid "Resume"
 msgstr ""
 
-#: admin/views/settings.php:222
-msgid "Minimal"
+#: includes/class-tocflow-headings.php:997
+#: src/edit.js:632
+msgid "Reading progress"
 msgstr ""
 
-#: admin/views/settings.php:111
-msgid "Minimum headings"
+#: includes/class-tocflow-headings.php:1010
+msgid "Export table of contents"
 msgstr ""
 
-#: src/edit.js:439
-msgid "Minimum headings override"
+#: includes/class-tocflow-headings.php:1014
+msgid "Copy outline as Markdown"
 msgstr ""
 
-#: src/edit.js:191
-msgid "Most themes already print the post title as H1. Only enable this if headings inside the content use H1."
+#: includes/class-tocflow-headings.php:1016
+msgid "Copy"
 msgstr ""
 
-#: admin/views/settings.php:54
-msgid "Need help?"
+#: includes/class-tocflow-headings.php:1021
+msgid "Download outline as Markdown file"
 msgstr ""
 
-#: admin/views/settings.php:205 src/edit.js:295
-msgid "Nested (1, 1.1, 1.1.1)"
+#: includes/class-tocflow-headings.php:1023
+msgid ".md"
 msgstr ""
 
-#: admin/views/settings.php:207
-msgid "Nested numbering applies when the list is numbered."
+#: includes/class-tocflow-headings.php:1027
+msgid "Download outline as Word document"
 msgstr ""
 
-#: src/edit.js:316
-msgid "Nested numbering still prints 1.1-style counters."
+#: includes/class-tocflow-headings.php:1029
+msgid ".doc"
 msgstr ""
 
-#: admin/views/settings.php:200 src/edit.js:175
-msgid "Numbered list"
+#: includes/class-tocflow-headings.php:1033
+msgid "Print table of contents"
 msgstr ""
 
-#: admin/views/settings.php:202 src/edit.js:284
-msgid "Numbering"
+#: includes/class-tocflow-headings.php:1035
+msgid "Print"
 msgstr ""
 
-#: src/edit.js:428
-msgid "Off"
+#: includes/class-tocflow-plugin.php:373
+msgid "Docs & Support"
 msgstr ""
 
-#: admin/views/settings.php:128
-msgid "Off — only show when the block or shortcode is added"
+#: includes/class-tocflow-plugin.php:389
+msgid "Documentation"
 msgstr ""
 
-#: src/edit.js:424
-msgid "On"
+#: src/edit.js:198
+msgid "Bulleted list"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:119
-msgid "Online docs"
+#: src/edit.js:220
+msgid "Include H1 headings"
 msgstr ""
 
-#: admin/views/settings.php:48
-msgid "Open full documentation"
+#: src/edit.js:225
+msgid "Most themes already print the post title as H1. Only enable this if headings inside the content use H1."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:165
-msgid "Open settings"
+#: src/edit.js:232
+msgid "Include H2 headings"
 msgstr ""
 
-#: admin/views/settings.php:68
-msgid "Optional attributes:"
+#: src/edit.js:240
+msgid "Include H3 headings"
 msgstr ""
 
-#: admin/views/settings.php:44
-msgid "Optional: pick a style, numbered list, collapse, or sticky in the block sidebar."
+#: src/edit.js:248
+msgid "Include H4 headings"
 msgstr ""
 
-#: admin/views/settings.php:287
-msgid "Output ItemList JSON-LD for the outline. Leave off if your SEO plugin already outputs a TOC schema."
+#: src/edit.js:256
+msgid "Include H5 headings"
 msgstr ""
 
-#: admin/views/settings.php:163 src/edit.js:260
-msgid "Paragraph"
+#: src/edit.js:264
+msgid "Include H6 headings"
 msgstr ""
 
-#: admin/views/settings.php:125
-msgid "Position"
+#: src/edit.js:277
+msgid "Show title"
 msgstr ""
 
-#: admin/views/settings.php:135
-msgid "Post types"
+#: src/edit.js:282
+msgid "The title still appears in the editor so you can edit the accessible name."
 msgstr ""
 
-#: admin/views/settings.php:45
-msgid "Preview the post and click a link — it should jump to that heading."
+#: src/edit.js:304
+msgid "Use a heading if this outline should appear in the document outline. Prefer a paragraph when the post already has a nearby heading."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:113
-msgid "prints the same outline in classic content, widgets, or a theme template. The Gutenberg block is the primary placement method."
+#: src/edit.js:311
+msgid "List & layout"
 msgstr ""
 
-#: admin/views/settings.php:122
-msgid "Prints the Table of Contents Gutenberg block on the front end. Posts that already have the block (or the [tocflow] shortcode) are left alone. You can still insert the block by hand in the editor."
+#: src/edit.js:343
+msgid "Hide bullets and numbers"
 msgstr ""
 
-#: admin/views/settings.php:83
-msgid "Reading experience"
+#: src/edit.js:350
+msgid "Nested numbering still prints 1.1-style counters."
 msgstr ""
 
-#: admin/views/settings.php:56
-msgid "Report a bug or request a feature"
+#: src/edit.js:359
+msgid "Two columns"
 msgstr ""
 
-#: admin/views/settings.php:232
-msgid "Same Block Styles as in the editor Styles panel."
+#: src/edit.js:364
+msgid "Top-level items sit side by side. Stacks on small screens."
 msgstr ""
 
-#: admin/views/settings.php:303
-msgid "Save settings"
+#: src/edit.js:396
+msgid "0 is unlimited. A max height makes long outlines scroll — useful with sticky."
 msgstr ""
 
-#: admin/views/settings.php:283
-msgid "Schema markup"
+#: src/edit.js:413
+msgid "Keeps the outline in view in a sidebar or wide column."
 msgstr ""
 
-#: admin/views/settings.php:95
-msgid "Scroll offset (px)"
+#: src/edit.js:438
+msgid "Highlight the section in view"
 msgstr ""
 
 #: src/edit.js:454
+msgid "Use site setting"
+msgstr ""
+
+#: src/edit.js:458
+msgid "On"
+msgstr ""
+
+#: src/edit.js:462
+msgid "Off"
+msgstr ""
+
+#: src/edit.js:473
+msgid "Minimum headings override"
+msgstr ""
+
+#: src/edit.js:480
+msgid "Use −1 to inherit Settings → TOCflow. Hide this block when the post has fewer matching headings."
+msgstr ""
+
+#: src/edit.js:488
 msgid "Scroll offset override (px)"
 msgstr ""
 
-#: admin/views/settings.php:60
-msgid "Security policy"
+#: src/edit.js:495
+msgid "Use −1 to inherit the site-wide offset from Settings → TOCflow."
 msgstr ""
 
-#: admin/views/settings.php:280
-msgid "SEO & data"
+#: src/edit.js:502
+msgid "Export / print bar"
 msgstr ""
 
-#: admin/views/settings.php:204 src/edit.js:288
-msgid "Sequential (1, 2, 3)"
+#: src/edit.js:507
+msgid "Adds Copy, Download (.md), Download (.doc), and Print buttons below the outline. Useful for writers and researchers."
 msgstr ""
 
-#: admin/views/settings.php:26
-msgid "Server-rendered table of contents for the WordPress block editor."
+#: src/edit.js:516
+msgid "Study Tools"
 msgstr ""
 
-#: includes/class-tocflow-plugin.php:299 admin/views/settings.php:33
-msgid "Settings"
+#: src/edit.js:520
+msgid "Reader-facing tools — stored locally in each visitor's browser. No account or server calls required."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:106
-msgid "Settings → TOCflow can print the Table of Contents block at the top of content or after the first heading. Customize title, heading levels, style, and layout there. Manual blocks and the [tocflow] shortcode still skip auto-generate so you never get two outlines."
+#: src/edit.js:532
+msgid "A thin bar shows readers how far through the article they are (0–100 %)."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:112 admin/views/settings.php:65
-msgid "Shortcode"
+#: src/edit.js:544
+msgid "Remembers the reader's last position. A \"Resume\" button appears on their next visit to jump back."
 msgstr ""
 
-#: admin/views/settings.php:154
-msgid "Show the title above the list"
+#: src/edit.js:556
+msgid "Readers can jot personal notes per section (📝). Notes are saved privately in their browser — great for research and study."
 msgstr ""
 
-#: src/edit.js:243
-msgid "Show title"
+#: src/edit.js:575
+msgid "Show the opening sentence of each section in a floating tooltip when hovering over its TOC link. Works on its own — no need to enable the full Reading Guide."
 msgstr ""
 
-#: admin/views/settings.php:73
-msgid "Skip a heading"
+#: src/edit.js:582
+msgid "Full Reading Guide"
 msgstr ""
 
-#: admin/views/settings.php:86 src/edit.js:416
-msgid "Smooth scroll"
+#: src/edit.js:587
+msgid "Adds inline section previews, read-time estimates, density bars, reading progress, reactions, and per-section citations."
 msgstr ""
 
-#: admin/views/settings.php:98
-msgid "Space to leave under a sticky admin bar or site header so headings are not covered."
+#: src/edit.js:596
+msgid "Section previews"
 msgstr ""
 
-#: admin/views/settings.php:271 src/edit.js:395
-msgid "Start collapsed"
+#: src/edit.js:601
+msgid "Show the opening sentence of each section beneath its TOC link."
 msgstr ""
 
-#: admin/views/settings.php:263 src/edit.js:374
-msgid "Sticky while scrolling"
+#: src/edit.js:608
+msgid "Section length bars"
 msgstr ""
 
-#: admin/views/settings.php:216
-msgid "Style"
+#: src/edit.js:613
+msgid "Thin bar showing relative word count — readers see which sections are short vs long at a glance."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:117 includes/class-tocflow-plugin.php:317
-msgid "Support"
+#: src/edit.js:620
+msgid "Read-time estimates"
 msgstr ""
 
-#: admin/views/settings.php:55
-msgid "Support is provided through GitHub issues. Include your WordPress version, PHP version, theme, and steps to reproduce."
+#: src/edit.js:625
+msgid "Show ~N min alongside each section link."
 msgstr ""
 
-#: includes/class-tocflow-settings.php:112 includes/class-tocflow-plugin.php:88 includes/class-tocflow-headings.php:268 includes/class-tocflow-headings.php:424 src/edit.js:153 src/edit.js:476
-msgid "Table of Contents"
+#: src/edit.js:637
+msgid "Fade sections as the reader scrolls past them."
 msgstr ""
 
-#: src/edit.js:248
-msgid "The title still appears in the editor so you can edit the accessible name."
+#: src/edit.js:649
+msgid "Readers react per section (💡 ⭐ 🤔 ✅). Stored in their browser — no account needed."
 msgstr ""
 
-#: admin/views/settings.php:148 src/edit.js:238
-msgid "Title"
+#: src/edit.js:656
+msgid "Per-section citations"
 msgstr ""
 
-#: admin/views/settings.php:160 src/edit.js:256
-msgid "Title element"
+#: src/edit.js:664
+msgid "One-click copy of a formatted academic citation (APA, MLA, Chicago, etc.) for any section. Perfect for research content."
 msgstr ""
 
-#: includes/class-tocflow-admin.php:52 includes/class-tocflow-admin.php:53 admin/views/settings.php:25
-msgid "TOCflow"
+#: src/edit.js:673
+msgid "Citation format"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:163
-msgid "TOCflow is ready."
+#: src/edit.js:707
+msgid "Section Planner"
 msgstr ""
 
-#: admin/views/settings.php:32
-msgid "TOCflow sections"
+#: src/edit.js:711
+msgid "Track writing status per section and add reader-facing teasers (shown in Reading Guide mode)."
 msgstr ""
 
-#: includes/class-tocflow-headings.php:381
-msgid "Toggle table of contents"
+#: src/edit.js:718
+msgid "Add Heading blocks to this post and they will appear here."
 msgstr ""
 
-#: admin/views/settings.php:129
-msgid "Top of content"
+#: src/edit.js:736
+msgid "— No status —"
 msgstr ""
 
-#: src/edit.js:330
-msgid "Top-level items sit side by side. Stacks on small screens."
+#: src/edit.js:740
+msgid "✏️ Draft"
 msgstr ""
 
-#: src/edit.js:325
-msgid "Two columns"
+#: src/edit.js:744
+msgid "🔄 In progress"
 msgstr ""
 
-#: admin/views/settings.php:245
-msgid "Two columns (stacks on small screens)"
+#: src/edit.js:751
+msgid "✅ Done"
 msgstr ""
 
-#: admin/views/settings.php:224
-msgid "Underline"
+#: src/edit.js:768
+msgid "Reader teaser (optional)"
 msgstr ""
 
-#: admin/views/settings.php:292
-msgid "Uninstall"
+#: src/edit.js:784
+msgid "Teaser or hook for this section…"
 msgstr ""
 
-#: src/edit.js:270
-msgid "Use a heading if this outline should appear in the document outline. Prefer a paragraph when the post already has a nearby heading."
+#: src/edit.js:816
+msgid "Add Heading blocks to this post and they will appear here. Headings with the class no-toc are skipped."
 msgstr ""
 
-#: src/edit.js:420
-msgid "Use site setting"
+#: src/block.json
+msgctxt "block title"
+msgid "Table of Contents"
 msgstr ""
 
-#: admin/views/settings.php:66
-msgid "Use this in classic content, widgets, or a theme template (via do_shortcode):"
+#: src/block.json
+msgctxt "block description"
+msgid "Automatically generate a clean, linked table of contents from your post's headings."
 msgstr ""
 
-#: src/edit.js:446
-msgid "Use −1 to inherit Settings → TOCflow. Hide this block when the post has fewer matching headings."
+#: src/block.json
+msgctxt "block keyword"
+msgid "toc"
 msgstr ""
 
-#: src/edit.js:461
-msgid "Use −1 to inherit the site-wide offset from Settings → TOCflow."
+#: src/block.json
+msgctxt "block keyword"
+msgid "table of contents"
 msgstr ""
 
-#: admin/views/settings.php:58
-msgid "User guide & FAQ"
+#: src/block.json
+msgctxt "block keyword"
+msgid "navigation"
 msgstr ""
 
-#: includes/class-tocflow-admin.php:98
-msgid "Using the block"
+#: src/block.json
+msgctxt "block keyword"
+msgid "outline"
 msgstr ""
 
-#: admin/views/settings.php:29
-#, php-format
-msgid "Version %s"
+#: src/block.json
+msgctxt "block keyword"
+msgid "anchor"
 msgstr ""
 
+#: src/block.json
+msgctxt "block keyword"
+msgid "headings"
+msgstr ""
+
+#: src/block.json
+msgctxt "block style label"
+msgid "Default"
+msgstr ""
+
+#: src/block.json
+msgctxt "block style label"
+msgid "Minimal"
+msgstr ""
+
+#: src/block.json
+msgctxt "block style label"
+msgid "Boxed"
+msgstr ""
+
+#: src/block.json
+msgctxt "block style label"
+msgid "Underline"
+msgstr ""
+
+#: src/block.json
+msgctxt "block style label"
+msgid "Card"
+msgstr ""
diff --git a/package-lock.json b/package-lock.json
index 5441e9d..ba64820 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "tocflow",
-	"version": "1.0.2",
+	"version": "1.2.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "tocflow",
-			"version": "1.0.2",
+			"version": "1.2.0",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@wordpress/i18n": "^6.27.0",
diff --git a/package.json b/package.json
index df7b8c0..1677cd4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "tocflow",
-	"version": "1.0.2",
+	"version": "1.3.0",
 	"description": "A server-rendered Table of Contents block for the WordPress editor.",
 	"author": {
 		"name": "Matt Hummel",
diff --git a/readme.txt b/readme.txt
index 20269c2..ce5c929 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,38 +1,67 @@
 === TOCflow ===
 Contributors: matthummel
 Donate link: https://matthummel.com
-Tags: table of contents, toc, block, gutenberg, navigation
+Tags: table of contents, toc, reading guide, block, study tools
 Requires at least: 6.4
 Tested up to: 7.1
 Requires PHP: 7.4
-Stable tag: 1.0.2
+Stable tag: 1.3.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
-A lightweight Table of Contents block that auto-generates a linked outline from your post headings.
+The first Table of Contents block with a built-in Reading Guide: section previews, read-time estimates, emoji reactions, and one-click academic citations — all server-rendered, no external APIs.
 
 == Description ==
 
-TOCflow adds a single Table of Contents block to the WordPress editor. Add it to any post and it builds a linked outline from your headings. The list is rendered on the server, so it is present in the initial HTML — good for SEO and accessibility — and matching anchor IDs are added to your headings automatically.
+TOCflow adds a Table of Contents block to the WordPress block editor. Unlike other TOC plugins, it ships a **Reading Guide mode** that turns a plain navigation list into an intelligent reading companion. Every feature is rendered server-side or handled client-side with no external API calls, no accounts, and no tracking.
 
-= Features =
+= Standard TOC features =
 
 * Standard Gutenberg block (`block.json`, live editor preview, Block Styles)
 * Choose H1–H6 heading levels
 * Numbered or bulleted lists, including nested 1.1.1 numbering
-* Hide markers, two-column layout, compact spacing, max height
+* Five style presets: Default, Minimal, Boxed, Underline, Card
 * Show or hide the title; render it as a paragraph or H2–H4
-* Five style presets (default, minimal, boxed, underline, card)
-* Smooth scroll with an offset for sticky headers
+* Smooth scroll with a configurable offset for sticky headers
 * Collapsible outline and optional sticky positioning
-* Highlights the section currently in view
-* Optional auto-generate of the Gutenberg block at the top of content or after the first heading
-* `[tocflow]` shortcode for classic content
+* Scroll-spy highlights the section currently in view
+* Hide bullets, two-column layout, compact spacing, max height with scroll
+* Auto-generate the block sitewide (top of content or after first heading)
+* `[tocflow]` shortcode for classic content and theme templates
 * Skip a heading with the CSS class `no-toc`
-* Accessible `<nav>` landmark
-* Optional ItemList JSON-LD
+* Accessible `<nav>` landmark with ARIA labels
+* Optional ItemList JSON-LD schema markup
 * No account, no external API calls, no tracking
 
+= Reading Guide mode — what no other TOC plugin does =
+
+Enable **Reading Guide** in the block sidebar to transform the TOC into a live reading companion. Every enrichment is computed from your block content — no JavaScript fetches, no third-party services.
+
+**Section content previews** — The opening sentence of every section appears beneath its TOC link, extracted server-side from your block content. Readers scan the outline and know exactly what they are about to read before they click.
+
+**Content density bars** — A subtle bar under each item shows that section's word count as a proportion of the longest section. Readers see at a glance which sections are brief and which are deep dives.
+
+**Per-section read-time estimates** — Word count divided by average reading speed gives a `~N min` badge next to each link. Readers can decide what to read and how long it will take.
+
+**Reading progress** — As a reader scrolls past each section, its TOC item fades out. The outline becomes a live checklist of what has been read and what remains.
+
+**Author section notes** — Write a short teaser or hook for any section directly in the block editor's Section Notes panel. Readers reveal it with a single tap (✍ button). The note is stored in block attributes — no database round-trip.
+
+**Emoji reactions** — Readers react to individual sections (💡 Insightful · ⭐ Saved · 🤔 Unclear · ✅ Got it) with a single click. Choices are stored in the browser's localStorage. No accounts, no server calls, no tracking.
+
+**Per-section academic citations** — A § button on each TOC item copies a fully formatted academic citation for that specific section. Five formats supported: APA, MLA, Chicago, Harvard, and plain link. Citation data comes entirely from WordPress post meta (author, title, site name, published date, permalink). Ideal for research blogs, documentation sites, and long-form journalism.
+
+= Compatibility =
+
+TOCflow is designed to work with every major WordPress stack:
+
+* **Theme builders:** Gutenberg (native block), Elementor, Divi, Beaver Builder, Bricks Builder, WPBakery, Oxygen, Breakdance — use `[tocflow]` in any shortcode/HTML element.
+* **SEO plugins:** Yoast SEO, Rank Math, All in One SEO, SEOPress — schema markup is opt-in and off by default; no conflicts with any SEO plugin's TOC schema output.
+* **Themes:** Works with any theme — inherits theme fonts and colors; no injected brand styles; tested on Twenty Twenty-Four, Twenty Twenty-Five, Astra, Kadence, GeneratePress, Blocksy.
+* **Multilingual:** WPML, Polylang, TranslatePress — fully translation-ready with the standard `tocflow` text domain.
+* **PHP:** 7.4, 8.0, 8.1, 8.2, 8.3.
+* **WordPress:** 6.4 – 7.1 (tested on all major releases in this range).
+
 = Source =
 
 Unminified JavaScript and SCSS ship in `src/`. Compiled assets are in `build/`. Development: https://github.com/matthummel-pa/tocflow (`npm run build`).
@@ -41,13 +70,24 @@ Unminified JavaScript and SCSS ship in `src/`. Compiled assets are in `build/`.
 
 1. Edit a post that contains Heading blocks.
 2. Insert the **Table of Contents** block (typically after the introduction).
-3. Optionally open **Settings → TOCflow** to auto-generate the block site-wide, or to set a scroll offset.
+3. Optionally open the **Reading Guide** panel in the block sidebar to enable any of the reading companion features.
+4. Open **Settings → TOCflow** to auto-generate the block sitewide or set a scroll offset.
 
 = Shortcode =
 
 `[tocflow]`
 
-Optional attributes: `title`, `showtitle`, `titletag`, `h1`–`h6`, `ordered`, `numbering`, `markers`, `collapsible`, `collapsed`, `sticky`, `compact`, `columns`, `underline`, `highlight`, `maxheight`, `min`, `smooth`, `style`.
+Layout & behavior: `title`, `showtitle`, `titletag`, `h1`–`h6`, `ordered`, `numbering`, `markers`, `collapsible`, `collapsed`, `sticky`, `compact`, `columns`, `underline`, `highlight`, `maxheight`, `min`, `smooth`, `style`.
+
+Reading Guide: `preview="1"` (hover tooltip on links), `guide="1"` (full Reading Guide mode), `previews="1"`, `density="1"`, `readtime="1"`, `progress="1"`, `reactions="1"`, `citations="1"`, `citation="apa|mla|chicago|harvard|plain"`.
+
+Study assistant: `rprogress="1"` (document progress bar), `bookmark="1"` (resume last heading), `rnotes="1"` (private reader note pads).
+
+Examples:
+
+`[tocflow title="On this page" style="boxed" preview="1"]`
+
+`[tocflow guide="1" previews="1" readtime="1" reactions="1" citations="1"]`
 
 = Skip a heading =
 
@@ -55,7 +95,7 @@ Add the CSS class `no-toc` or `tocflow-skip` to a Heading block (Advanced → Ad
 
 = Privacy =
 
-TOCflow does not collect personal data, set cookies, or call remote services. Optional JSON-LD is printed in the page HTML only if you enable it in settings. Details: https://github.com/matthummel-pa/tocflow/blob/main/PRIVACY.md
+TOCflow does not collect personal data, set cookies, or call remote services. Emoji reactions use the browser's own localStorage — no data leaves the reader's device. Optional JSON-LD is printed in the page HTML only if you enable it in settings. Details: https://github.com/matthummel-pa/tocflow/blob/main/PRIVACY.md
 
 = Support =
 
@@ -74,17 +114,57 @@ Issues: https://github.com/matthummel-pa/tocflow/issues
 
 The block is for the block editor. For classic content or a theme template, use the `[tocflow]` shortcode.
 
+= Does it work with Elementor? =
+
+Yes. Add a Shortcode widget to your Elementor layout and enter `[tocflow]`. TOCflow automatically reads headings from your Elementor Heading widgets (via the stored widget JSON) and injects matching ID anchors into the rendered page so all TOC links scroll correctly. No extra plugin or configuration needed.
+
+= Does it work with Divi? =
+
+Yes. Add a Code module or Shortcode module to your Divi section and enter `[tocflow]`. TOCflow scans the rendered page HTML for headings and injects the correct anchor IDs.
+
+= Does it work with Bricks Builder? =
+
+Yes. Paste `[tocflow]` into a Bricks Code element or Shortcode element. TOCflow reads headings directly from Bricks' element meta (heading and rich-text elements) and injects the correct IDs.
+
+= Does it work with Beaver Builder? =
+
+Yes. Add an HTML module or Shortcode module containing `[tocflow]`. TOCflow uses `[tocflow]` detected in Beaver Builder data to ensure headings receive the correct anchor IDs.
+
+= Does it work with WPBakery / Visual Composer? =
+
+Yes. Add a Raw HTML element or Shortcode element with `[tocflow]`. TOCflow scans the rendered HTML for headings and injects IDs automatically.
+
+= Does it work with Oxygen Builder or Breakdance? =
+
+Yes. Insert `[tocflow]` via a Shortcode element or Code Block. TOCflow detects the shortcode in Oxygen/Breakdance meta and handles heading ID injection through the rendered HTML.
+
+= Can it co-exist with my SEO plugin (Yoast, Rank Math)? =
+
+Yes. The optional JSON-LD schema is off by default. If you enable it, turn off TOC schema in your SEO plugin (or vice versa) to avoid duplicate structured data. The `<nav>` landmark itself does not conflict with any SEO plugin.
+
 = Will the links scroll to my headings? =
 
 Yes. Matching anchor IDs are added automatically. Custom HTML anchors on a heading are respected. Smooth scrolling and a pixel offset are configurable under Settings → TOCflow.
 
+= How are section previews generated? =
+
+The server walks the parsed block content and extracts the first ~20 words after each heading. No JavaScript fetch, no API, no external service.
+
+= How do emoji reactions work? =
+
+Each reader's choices are stored in their browser's `localStorage`. Nothing is sent to your server or any third party. If two readers use the same browser profile they see the same reactions, but reactions are per-device and never aggregated.
+
+= How are citations generated? =
+
+Citations are built from data already in WordPress: the post author's display name, post title, blog name, published date, and permalink. The § button constructs the formatted string in JavaScript and copies it to the clipboard. The citation includes the section anchor (`#slug`) so it links directly to that section.
+
 = Can I hide the TOC on short posts? =
 
 Yes. Set **Minimum headings** in Settings → TOCflow.
 
 = Does it work in columns or groups? =
 
-Yes. Headings nested inside Group, Columns, Cover, and similar blocks are included.
+Yes. Headings nested inside Group, Columns, Cover, and similar blocks are included in both the TOC and the Reading Guide section data.
 
 = Can I have more than one TOC on a page? =
 
@@ -92,7 +172,7 @@ Each instance lists the same headings from that post. Prefer one outline per pag
 
 = Is any data sent off-site? =
 
-No.
+No. Zero external network requests from TOCflow in any mode.
 
 = What license is TOCflow under? =
 
@@ -100,17 +180,58 @@ GNU GPLv2 or later, covering the whole plugin (PHP, JavaScript, CSS, and images)
 
 == Screenshots ==
 
-1. Table of Contents block in a post, with the settings sidebar.
-2. Front-end outline with nested links.
-3. Settings → TOCflow (smooth scroll, auto-generate block, uninstall).
-4. Docs & Support screen inside wp-admin.
+1. Table of Contents block in the editor with Reading Guide and Section Notes panels open in the sidebar.
+2. Front-end Reading Guide mode: section previews, density bars, read-time badges, author note, and emoji reactions.
+3. One-click academic citation copy — APA, MLA, Chicago, Harvard, or plain link.
+4. Reading progress: sections fade as the reader scrolls past them.
+5. Settings → TOCflow (smooth scroll, auto-generate block, uninstall).
 
 == Changelog ==
 
+= 1.3.0 =
+* New: **Design & Appearance** section in Settings → TOCflow — set global background, text, link, and border colours; font size, weight, and line height; border width / style / radius; and padding. All values are applied as CSS custom properties so block-editor per-instance overrides still win.
+* New: **Reading Guide & Study Tools** section in settings — configure global defaults for hover section preview, guide mode, density bars, read time, progress fade, emoji reactions, and academic citations.
+* New: **Study Tools & Export** section in settings — global defaults for reading progress bar, resume bookmark, reader note pads, and export toolbar.
+* New: **Accessibility** section in settings — choose focus ring style: Default, Bold (3 px, WCAG AA), or High-contrast (yellow background, WCAG AAA).
+* New: Admin JS syncs hex colour text inputs with companion colour swatches and toggles guide-mode sub-options conditionally.
+* Fix: CSS preset styles (minimal, boxed, underline, card) correctly override global design custom properties.
+
+= 1.2.2 =
+* Fix: `TOCFLOW_VERSION` constant was stuck at `1.2.0`; now reads `1.2.2` correctly (admin version badge and `Version %s` string now match the plugin header).
+* Fix: `Tested up to` updated from 6.7 to 7.1 (WordPress 7.1 "Mary Lou", released 2026-08-19).
+* Fix: removed third-party trademark `elementor` from tags; replaced with `study tools`.
+* Fix: PHP coding-standards indentation in shortcode attribute registration and admin settings view.
+
+= 1.2.1 =
+* Fix: debounced resume-bookmark localStorage writes from every IntersectionObserver callback to every 500 ms, preventing redundant writes during fast scrolling.
+* Docs: completed v1.1.0 CHANGELOG entry (hover preview, export/print toolbar, full accessibility and page-builder details).
+* Docs: added "What's new" tables and "Performance" section to README for reviewers.
+
+= 1.2.0 =
+* New: **Reader note pads** — a 📝 button per section lets readers jot personal notes stored privately in localStorage. No account, no server. Enable with `rnotes="1"` in the shortcode or the new "Reader note pads" toggle in the block sidebar.
+* New: **Reading progress bar** — a thin animated bar shows 0–100 % of the document read (based on headings scrolled past via IntersectionObserver). Enable with `rprogress="1"`.
+* New: **Resume reading bookmark** — automatically bookmarks the last-read heading in localStorage; shows a "↩ Resume" button on return visits. Enable with `bookmark="1"`.
+* New: **Section Planner** — the "Section Notes" sidebar panel is now "Section Planner" with per-heading writing status (✏️ Draft / 🔄 In progress / ✅ Done) tracked in the editor canvas and a reader-facing teaser note.
+* New: **Total read-time badge** — when Reading Guide + read-time are active, the TOC header shows the aggregated total read time for the entire post.
+* New shortcode attributes: `rprogress`, `bookmark`, `rnotes`.
+* New block attributes: `showReaderNotes`, `showReadingProgress`, `showBookmark`, `sectionStatus`.
+
+= 1.1.0 =
+* New: **Reading Guide mode** — enable per-block to show section content previews (server-extracted, no JS fetch), visual content-density bars, per-section read-time estimates, and scroll-based reading progress.
+* New: **Author section notes** — type a teaser or hook per heading in the block sidebar (Section Notes panel); readers reveal it with a ✍ button.
+* New: **Emoji reactions** — readers react per section (💡 ⭐ 🤔 ✅) with state stored in localStorage; no accounts, no server calls.
+* New: **Per-section academic citations** — § button copies APA, MLA, Chicago, Harvard, or plain-link citation built from WordPress post meta; no external API.
+* New: **Hover section preview** — floating tooltip on TOC link hover/focus; viewport-aware positioning; `aria-describedby` for screen readers.
+* Compatibility: **Elementor** — heading data extracted from `_elementor_data` widget JSON; IDs injected into rendered output via `the_content` at priority 999.
+* Compatibility: **Bricks Builder** — heading and rich-text elements parsed from `_bricks_page_content_2` meta.
+* Compatibility: **Divi, WPBakery, Oxygen, Beaver Builder, Breakdance** — HTML-based heading scan as a generic fallback; IDs injected into rendered HTML so all builder-generated headings are reachable from TOC links.
+* New block attributes: `guideMode`, `showPreviews`, `showDensity`, `showReadTime`, `trackProgress`, `showReactions`, `showCitations`, `citationStyle`, `sectionNotes`, `previewOnHover`.
+* Block internals: `TOCflow_Headings::get_sections()` (word count + preview extraction), `citation_meta()`, `get_all_from_html()`, `get_all_from_elementor()`, `get_all_from_bricks()`, `inject_ids_in_html()`; updated `render_list()` and `render_nav()`.
+
 = 1.0.2 =
-* WordPress.org Plugin Check: removed `load_plugin_textdomain()` (directory plugins auto-load the `tocflow` text domain since WP 4.6).
-* WordPress.org Plugin Check: prefixed template and uninstall variables with `tocflow_`.
-* `Tested up to` 7.1. License section is GPLv2 or later for the whole plugin (no Envato split-license wording).
+* Removed `load_plugin_textdomain()` — WordPress.org directory auto-loads the `tocflow` text domain since WP 4.6.
+* Prefixed template and uninstall variables with `tocflow_`.
+* `Tested up to` 6.7.
 
 = 1.0.1 =
 * First installable GitHub zip of the 1.0 feature set (build + plugin-zip on tag).
@@ -123,19 +244,25 @@ GNU GPLv2 or later, covering the whole plugin (PHP, JavaScript, CSS, and images)
 * Settings and Docs & Support admin screens.
 * Heading IDs via WP_HTML_Tag_Processor; custom anchors respected.
 
-= 0.1.0 =
-* Initial release: core Table of Contents block.
-
 == Upgrade Notice ==
 
-= 1.0.2 =
-Plugin Check and readme cleanup for the WordPress.org review: no `load_plugin_textdomain()`, Tested up to 7.1, GPLv2 or later. Same block, settings, and shortcode as 1.0.1.
+= 1.3.0 =
+Major settings expansion: global design customization (colours, typography, borders), Reading Guide & Study Tools defaults, and a new Accessibility section for focus ring styles. No changes to existing block output.
 
-= 1.0.1 =
-Installable GitHub zip plus docs and packaging polish. Block behavior is unchanged from 1.0.0.
+= 1.2.2 =
+WordPress.org compliance fixes: corrects the in-admin version badge, updates "Tested up to" to 7.1, and removes a disallowed trademark tag. No functional changes.
 
-= 1.0.0 =
-Adds live preview, auto-insert, shortcode, presets, and admin settings. Existing blocks keep working.
+= 1.2.1 =
+Performance fix for the resume bookmark feature (debounced localStorage writes). Documentation updates only — no functional changes to the block, shortcode, or settings.
+
+= 1.2.0 =
+Adds study-assistant features: reader note pads, a reading progress bar, resume bookmark, Section Planner writing status, and a total read-time badge. No breaking changes — all new features are opt-in via the block sidebar or shortcode.
+
+= 1.1.0 =
+Adds Reading Guide mode: section previews, density bars, read-time estimates, reading progress, author notes, emoji reactions, and per-section academic citations. No breaking changes — all new features are opt-in via the block sidebar.
+
+= 1.0.2 =
+Plugin Check and readme cleanup for the WordPress.org review. Same block, settings, and shortcode as 1.0.1.
 
 == License ==
 
diff --git a/src/block.json b/src/block.json
index 47d0b8c..98a0db8 100644
--- a/src/block.json
+++ b/src/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "tocflow/table-of-contents",
-	"version": "1.0.2",
+	"version": "1.2.2",
 	"title": "Table of Contents",
 	"category": "widgets",
 	"icon": "list-view",
@@ -112,7 +112,22 @@
 			"type": "number",
 			"default": -1,
 			"role": "local"
-		}
+		},
+		"previewOnHover": { "type": "boolean", "default": false },
+		"guideMode": { "type": "boolean", "default": false },
+		"showPreviews": { "type": "boolean", "default": true },
+		"showDensity": { "type": "boolean", "default": true },
+		"showReadTime": { "type": "boolean", "default": true },
+		"trackProgress": { "type": "boolean", "default": true },
+		"showReactions": { "type": "boolean", "default": false },
+		"showCitations": { "type": "boolean", "default": false },
+		"citationStyle": { "type": "string", "default": "apa" },
+		"sectionNotes": { "type": "object", "default": {} },
+		"sectionStatus": { "type": "object", "default": {} },
+		"showExport": { "type": "boolean", "default": false },
+		"showReaderNotes": { "type": "boolean", "default": false },
+		"showReadingProgress": { "type": "boolean", "default": false },
+		"showBookmark": { "type": "boolean", "default": false }
 	},
 	"example": {
 		"attributes": {
diff --git a/src/edit.js b/src/edit.js
index add26f4..c51928b 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -22,20 +22,25 @@ import {
 	ToggleControl,
 	RangeControl,
 	SelectControl,
+	TextareaControl,
 	ToolbarGroup,
 	ToolbarButton,
 } from '@wordpress/components';
 import { formatListBullets, formatListNumbered } from '@wordpress/icons';
 import { collectHeadings, filterAndNormalize } from './headings';
 
+/** @type {Object} Status emoji map */
+const STATUS_ICON = { draft: '✏️', progress: '🔄', done: '✅' };
+
 /**
  * Nested outline preview (read-only; front end is server-rendered).
  *
  * @param {Object}  props
  * @param {Array}   props.items
  * @param {boolean} props.ordered
+ * @param {Object}  props.sectionStatus Writing status map slug→status.
  */
-function PreviewList( { items, ordered } ) {
+function PreviewList( { items, ordered, sectionStatus = {} } ) {
 	const Tag = ordered ? 'ol' : 'ul';
 	const tree = [];
 	const stack = [ tree ];
@@ -68,6 +73,17 @@ function PreviewList( { items, ordered } ) {
 					{ node.text ? (
 						<a className="tocflow__link" href={ `#${ node.slug }` }>
 							{ node.text }
+							{ sectionStatus[ node.slug ] && (
+								<span
+									className="tocflow__status-dot"
+									title={ sectionStatus[ node.slug ] }
+									aria-hidden="true"
+								>
+									{ STATUS_ICON[
+										sectionStatus[ node.slug ]
+									] || '' }
+								</span>
+							) }
 						</a>
 					) : null }
 					{ node.children?.length
@@ -106,6 +122,21 @@ export default function Edit( { attributes, setAttributes } ) {
 		minHeadings,
 		smoothScroll,
 		scrollOffset,
+		previewOnHover,
+		guideMode,
+		showPreviews,
+		showDensity,
+		showReadTime,
+		trackProgress,
+		showReactions,
+		showCitations,
+		citationStyle,
+		sectionNotes,
+		sectionStatus,
+		showExport,
+		showReaderNotes,
+		showReadingProgress,
+		showBookmark,
 	} = attributes;
 
 	const blocks = useSelect(
@@ -122,8 +153,11 @@ export default function Edit( { attributes, setAttributes } ) {
 		showH6 && 6,
 	].filter( Boolean );
 
+	// All headings — used for the Section Notes panel.
+	const allHeadings = collectHeadings( blocks );
+
 	const items = filterAndNormalize(
-		collectHeadings( blocks ),
+		allHeadings,
 		levels.length ? levels : [ 2 ]
 	);
 
@@ -463,6 +497,297 @@ export default function Edit( { attributes, setAttributes } ) {
 							'tocflow'
 						) }
 					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Export / print bar', 'tocflow' ) }
+						checked={ showExport }
+						onChange={ ( value ) =>
+							setAttributes( { showExport: value } )
+						}
+						help={ __(
+							'Adds Copy, Download (.md), Download (.doc), and Print buttons below the outline. Useful for writers and researchers.',
+							'tocflow'
+						) }
+					/>
+				</PanelBody>
+
+				{ /* ── Study Tools ──────────────────────────────────────── */ }
+				<PanelBody
+					title={ __( 'Study Tools', 'tocflow' ) }
+					initialOpen={ false }
+				>
+					<p className="components-base-control__help">
+						{ __(
+							"Reader-facing tools — stored locally in each visitor's browser. No account or server calls required.",
+							'tocflow'
+						) }
+					</p>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reading progress bar', 'tocflow' ) }
+						checked={ showReadingProgress }
+						onChange={ ( value ) =>
+							setAttributes( { showReadingProgress: value } )
+						}
+						help={ __(
+							'A thin bar shows readers how far through the article they are (0–100 %).',
+							'tocflow'
+						) }
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Resume reading bookmark', 'tocflow' ) }
+						checked={ showBookmark }
+						onChange={ ( value ) =>
+							setAttributes( { showBookmark: value } )
+						}
+						help={ __(
+							'Remembers the reader\'s last position. A "Resume" button appears on their next visit to jump back.',
+							'tocflow'
+						) }
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Reader note pads', 'tocflow' ) }
+						checked={ showReaderNotes }
+						onChange={ ( value ) =>
+							setAttributes( { showReaderNotes: value } )
+						}
+						help={ __(
+							'Readers can jot personal notes per section (📝). Notes are saved privately in their browser — great for research and study.',
+							'tocflow'
+						) }
+					/>
+				</PanelBody>
+
+				{ /* ── Reading Guide ───────────────────────────────────── */ }
+				<PanelBody
+					title={ __( 'Reading Guide', 'tocflow' ) }
+					initialOpen={ false }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Hover section preview', 'tocflow' ) }
+						checked={ previewOnHover }
+						onChange={ ( value ) =>
+							setAttributes( { previewOnHover: value } )
+						}
+						help={ __(
+							'Show the opening sentence of each section in a floating tooltip when hovering over its TOC link. Works on its own — no need to enable the full Reading Guide.',
+							'tocflow'
+						) }
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Full Reading Guide', 'tocflow' ) }
+						checked={ guideMode }
+						onChange={ ( value ) =>
+							setAttributes( { guideMode: value } )
+						}
+						help={ __(
+							'Adds inline section previews, read-time estimates, density bars, reading progress, reactions, and per-section citations.',
+							'tocflow'
+						) }
+					/>
+					{ guideMode && (
+						<>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Section previews', 'tocflow' ) }
+								checked={ showPreviews }
+								onChange={ ( value ) =>
+									setAttributes( { showPreviews: value } )
+								}
+								help={ __(
+									'Show the opening sentence of each section beneath its TOC link.',
+									'tocflow'
+								) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Section length bars', 'tocflow' ) }
+								checked={ showDensity }
+								onChange={ ( value ) =>
+									setAttributes( { showDensity: value } )
+								}
+								help={ __(
+									'Thin bar showing relative word count — readers see which sections are short vs long at a glance.',
+									'tocflow'
+								) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Read-time estimates', 'tocflow' ) }
+								checked={ showReadTime }
+								onChange={ ( value ) =>
+									setAttributes( { showReadTime: value } )
+								}
+								help={ __(
+									'Show ~N min alongside each section link.',
+									'tocflow'
+								) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Reading progress', 'tocflow' ) }
+								checked={ trackProgress }
+								onChange={ ( value ) =>
+									setAttributes( { trackProgress: value } )
+								}
+								help={ __(
+									'Fade sections as the reader scrolls past them.',
+									'tocflow'
+								) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Emoji reactions', 'tocflow' ) }
+								checked={ showReactions }
+								onChange={ ( value ) =>
+									setAttributes( { showReactions: value } )
+								}
+								help={ __(
+									'Readers react per section (💡 ⭐ 🤔 ✅). Stored in their browser — no account needed.',
+									'tocflow'
+								) }
+							/>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __(
+									'Per-section citations',
+									'tocflow'
+								) }
+								checked={ showCitations }
+								onChange={ ( value ) =>
+									setAttributes( { showCitations: value } )
+								}
+								help={ __(
+									'One-click copy of a formatted academic citation (APA, MLA, Chicago, etc.) for any section. Perfect for research content.',
+									'tocflow'
+								) }
+							/>
+							{ showCitations && (
+								<SelectControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Citation format', 'tocflow' ) }
+									value={ citationStyle }
+									options={ [
+										{ label: 'APA', value: 'apa' },
+										{ label: 'MLA', value: 'mla' },
+										{
+											label: 'Chicago',
+											value: 'chicago',
+										},
+										{
+											label: 'Harvard',
+											value: 'harvard',
+										},
+										{
+											label: __(
+												'Plain link',
+												'tocflow'
+											),
+											value: 'plain',
+										},
+									] }
+									onChange={ ( value ) =>
+										setAttributes( {
+											citationStyle: value,
+										} )
+									}
+								/>
+							) }
+						</>
+					) }
+				</PanelBody>
+
+				{ /* ── Section Planner (author tools) ────────────────── */ }
+				<PanelBody
+					title={ __( 'Section Planner', 'tocflow' ) }
+					initialOpen={ false }
+				>
+					<p className="components-base-control__help">
+						{ __(
+							'Track writing status per section and add reader-facing teasers (shown in Reading Guide mode).',
+							'tocflow'
+						) }
+					</p>
+					{ allHeadings.length === 0 && (
+						<p>
+							{ __(
+								'Add Heading blocks to this post and they will appear here.',
+								'tocflow'
+							) }
+						</p>
+					) }
+					{ allHeadings.map( ( heading ) => (
+						<div
+							key={ heading.slug }
+							style={ { marginBottom: '1rem' } }
+						>
+							<SelectControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ heading.text }
+								value={ sectionStatus[ heading.slug ] || '' }
+								options={ [
+									{
+										label: __( '— No status —', 'tocflow' ),
+										value: '',
+									},
+									{
+										label: __( '✏️ Draft', 'tocflow' ),
+										value: 'draft',
+									},
+									{
+										label: __(
+											'🔄 In progress',
+											'tocflow'
+										),
+										value: 'progress',
+									},
+									{
+										label: __( '✅ Done', 'tocflow' ),
+										value: 'done',
+									},
+								] }
+								onChange={ ( value ) => {
+									const updated = { ...sectionStatus };
+									if ( value ) {
+										updated[ heading.slug ] = value;
+									} else {
+										delete updated[ heading.slug ];
+									}
+									setAttributes( {
+										sectionStatus: updated,
+									} );
+								} }
+							/>
+							<TextareaControl
+								label={ __(
+									'Reader teaser (optional)',
+									'tocflow'
+								) }
+								value={ sectionNotes[ heading.slug ] || '' }
+								onChange={ ( value ) => {
+									const updated = { ...sectionNotes };
+									if ( value ) {
+										updated[ heading.slug ] = value;
+									} else {
+										delete updated[ heading.slug ];
+									}
+									setAttributes( { sectionNotes: updated } );
+								} }
+								rows={ 2 }
+								__nextHasNoMarginBottom
+								placeholder={ __(
+									'Teaser or hook for this section…',
+									'tocflow'
+								) }
+							/>
+						</div>
+					) ) }
 				</PanelBody>
 			</InspectorControls>
 
@@ -481,7 +806,11 @@ export default function Edit( { attributes, setAttributes } ) {
 				<Disabled>
 					<div className="tocflow__body">
 						{ items.length ? (
-							<PreviewList items={ items } ordered={ ordered } />
+							<PreviewList
+								items={ items }
+								ordered={ ordered }
+								sectionStatus={ sectionStatus }
+							/>
 						) : (
 							<p className="tocflow__placeholder">
 								{ __(
diff --git a/src/style.scss b/src/style.scss
index f5e6086..24e279b 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,11 +4,17 @@
 	--tocflow-line: color-mix(in srgb, currentcolor 14%, transparent);
 	--tocflow-accent: #2f6f4e;
 	--tocflow-offset: 96px;
-	border: 1px solid var(--tocflow-line, #e2e8f0);
-	border-radius: 8px;
-	padding: 1.25rem 1.5rem;
-	background: color-mix(in srgb, currentcolor 4%, transparent);
-	font-size: 0.95em;
+
+	/* Design overrides — set by Settings → TOCflow or block supports. */
+	border-width: var(--tocflow-border-width, 1px);
+	border-style: var(--tocflow-border-style, solid);
+	border-color: var(--tocflow-border-color, var(--tocflow-line, #e2e8f0));
+	border-radius: var(--tocflow-radius, 8px);
+	padding: var(--tocflow-padding, 1.25rem 1.5rem);
+	background: var(--tocflow-bg, color-mix(in srgb, currentcolor 4%, transparent));
+	color: var(--tocflow-color, inherit);
+	font-size: var(--tocflow-font-size, 0.95em);
+	line-height: var(--tocflow-line-height, inherit);
 	max-width: 100%;
 }
 
@@ -96,7 +102,8 @@
 .tocflow .tocflow__link,
 .tocflow a {
 	text-decoration: none;
-	color: inherit;
+	color: var(--tocflow-link-color, inherit);
+	font-weight: var(--tocflow-font-weight, inherit);
 }
 
 .wp-block-tocflow-table-of-contents .tocflow__link:hover,
@@ -110,6 +117,7 @@
 	text-decoration: underline;
 }
 
+
 .wp-block-tocflow-table-of-contents .tocflow__link.is-active,
 .tocflow .tocflow__link.is-active {
 	font-weight: 700;
@@ -131,6 +139,12 @@
 .wp-block-tocflow-table-of-contents.is-style-minimal,
 .tocflow.is-style-minimal,
 .tocflow.tocflow--minimal {
+
+	/* Override design custom props so preset always wins. */
+	--tocflow-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
+	--tocflow-bg: transparent;
+	--tocflow-padding: 0px; /* stylelint-disable-line length-zero-no-unit */
+	--tocflow-radius: 0px; /* stylelint-disable-line length-zero-no-unit */
 	border: 0;
 	background: transparent;
 	padding: 0;
@@ -244,6 +258,28 @@
 	text-decoration: underline;
 }
 
+/* ── Focus ring accessibility settings ───────────────────────────────────── */
+
+/* Bold focus ring. */
+.wp-block-tocflow-table-of-contents[data-tocflow-focus="bold"] .tocflow__link:focus-visible,
+.tocflow[data-tocflow-focus="bold"] .tocflow__link:focus-visible {
+	outline: 3px solid currentcolor;
+	outline-offset: 2px;
+	border-radius: 2px;
+	text-decoration: none;
+}
+
+/* High-contrast focus ring. */
+.wp-block-tocflow-table-of-contents[data-tocflow-focus="high-contrast"] .tocflow__link:focus-visible,
+.tocflow[data-tocflow-focus="high-contrast"] .tocflow__link:focus-visible {
+	outline: 3px solid #000;
+	outline-offset: 2px;
+	background: #ff0;
+	color: #000;
+	border-radius: 2px;
+	text-decoration: none;
+}
+
 .wp-block-tocflow-table-of-contents.has-max-height .tocflow__body,
 .tocflow.has-max-height .tocflow__body {
 	max-height: var(--tocflow-max-height, 320px);
@@ -275,3 +311,565 @@
 		transition: none;
 	}
 }
+
+// ── Reading Guide mode ───────────────────────────────────────────────────────
+
+.wp-block-tocflow-table-of-contents.has-guide-mode .tocflow__item,
+.tocflow.has-guide-mode .tocflow__item {
+	padding-bottom: 0.4rem;
+	margin-bottom: 0.55rem;
+}
+
+// Link row: link + read-time badge side by side
+.wp-block-tocflow-table-of-contents .tocflow__item-row,
+.tocflow .tocflow__item-row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.4rem;
+	justify-content: space-between;
+}
+
+// ─ Read-time badge
+.wp-block-tocflow-table-of-contents .tocflow__time,
+.tocflow .tocflow__time {
+	font-size: 0.72em;
+	opacity: 0.42;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-variant-numeric: tabular-nums;
+	letter-spacing: 0.01em;
+}
+
+// ─ Section length density bar
+.wp-block-tocflow-table-of-contents .tocflow__density-bar,
+.tocflow .tocflow__density-bar {
+	display: block;
+	height: 2px;
+	width: calc(var(--tocflow-density, 0) * 100%);
+	min-width: 4px;
+	background: currentcolor;
+	opacity: 0.1;
+	border-radius: 1px;
+	margin-top: 0.3rem;
+	transition: opacity 0.2s, width 0.4s ease;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__item:hover .tocflow__density-bar,
+.tocflow .tocflow__item:hover .tocflow__density-bar {
+	opacity: 0.22;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__item.is-read .tocflow__density-bar,
+.tocflow .tocflow__item.is-read .tocflow__density-bar {
+	background: var(--tocflow-accent);
+	opacity: 0.3;
+}
+
+// ─ Content preview (first sentence of section)
+.wp-block-tocflow-table-of-contents .tocflow__preview,
+.tocflow .tocflow__preview {
+	display: block;
+	font-size: 0.78em;
+	line-height: 1.5;
+	opacity: 0.52;
+	margin-top: 0.25rem;
+	font-weight: 400;
+	font-style: normal;
+}
+
+// ─ Reading progress: fade sections the reader has scrolled past
+.wp-block-tocflow-table-of-contents .tocflow__item.is-read > .tocflow__item-row > .tocflow__link,
+.tocflow .tocflow__item.is-read > .tocflow__item-row > .tocflow__link {
+	opacity: 0.35;
+	transition: opacity 0.3s;
+}
+
+// ─ Author note
+.wp-block-tocflow-table-of-contents .tocflow__note-wrap,
+.tocflow .tocflow__note-wrap {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	margin-top: 0.3rem;
+	flex-wrap: wrap;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__note-toggle,
+.tocflow .tocflow__note-toggle {
+	appearance: none;
+	background: color-mix(in srgb, var(--tocflow-accent) 10%, transparent);
+	border: 1px solid color-mix(in srgb, var(--tocflow-accent) 28%, transparent);
+	border-radius: 4px;
+	padding: 0.1em 0.45em;
+	font-size: 0.72em;
+	cursor: pointer;
+	color: var(--tocflow-accent);
+	line-height: 1.5;
+	transition: background 0.15s;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25em;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__note-toggle:hover,
+.tocflow .tocflow__note-toggle:hover {
+	background: color-mix(in srgb, var(--tocflow-accent) 18%, transparent);
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__note,
+.tocflow .tocflow__note {
+	display: block;
+	font-size: 0.8em;
+	line-height: 1.55;
+	padding: 0.4rem 0.65rem;
+	background: color-mix(in srgb, var(--tocflow-accent) 7%, transparent);
+	border-inline-start: 2px solid color-mix(in srgb, var(--tocflow-accent) 60%, transparent);
+	border-radius: 0 4px 4px 0;
+	margin-top: 0.3rem;
+	font-style: italic;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+// ─ Actions row (reactions + cite button)
+.wp-block-tocflow-table-of-contents .tocflow__actions,
+.tocflow .tocflow__actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	margin-top: 0.4rem;
+	flex-wrap: wrap;
+}
+
+// ─ Emoji reactions
+.wp-block-tocflow-table-of-contents .tocflow__reactions,
+.tocflow .tocflow__reactions {
+	display: flex;
+	gap: 0.1rem;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__reaction,
+.tocflow .tocflow__reaction {
+	appearance: none;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: 6px;
+	padding: 0.15em 0.3em;
+	font-size: 0.9em;
+	cursor: pointer;
+	line-height: 1;
+	opacity: 0.38;
+	transition: opacity 0.15s, background 0.15s, transform 0.15s;
+	user-select: none;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__reaction:hover,
+.tocflow .tocflow__reaction:hover {
+	background: var(--tocflow-line);
+	opacity: 0.9;
+	transform: scale(1.18);
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__reaction[aria-pressed="true"],
+.tocflow .tocflow__reaction[aria-pressed="true"] {
+	background: color-mix(in srgb, currentcolor 8%, transparent);
+	border-color: var(--tocflow-line);
+	opacity: 1;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__reaction.is-popped,
+.tocflow .tocflow__reaction.is-popped {
+	transform: scale(1.35);
+}
+
+// ─ Citation button
+.wp-block-tocflow-table-of-contents .tocflow__cite-btn,
+.tocflow .tocflow__cite-btn {
+	appearance: none;
+	background: transparent;
+	border: 1px solid var(--tocflow-line);
+	border-radius: 4px;
+	padding: 0.1em 0.5em;
+	font-size: 0.72em;
+	cursor: pointer;
+	color: inherit;
+	opacity: 0.42;
+	line-height: 1.5;
+	transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25em;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__cite-btn:hover,
+.tocflow .tocflow__cite-btn:hover {
+	opacity: 0.78;
+	background: var(--tocflow-line);
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__cite-btn.is-copied,
+.tocflow .tocflow__cite-btn.is-copied {
+	opacity: 1;
+	background: color-mix(in srgb, var(--tocflow-accent) 10%, transparent);
+	border-color: color-mix(in srgb, var(--tocflow-accent) 40%, transparent);
+	color: var(--tocflow-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.wp-block-tocflow-table-of-contents .tocflow__reaction,
+	.tocflow .tocflow__reaction,
+	.wp-block-tocflow-table-of-contents .tocflow__density-bar,
+	.tocflow .tocflow__density-bar,
+	.wp-block-tocflow-table-of-contents .tocflow__item.is-read > .tocflow__item-row > .tocflow__link,
+	.tocflow .tocflow__item.is-read > .tocflow__item-row > .tocflow__link {
+		transition: none;
+	}
+
+	.wp-block-tocflow-table-of-contents .tocflow__reaction.is-popped,
+	.tocflow .tocflow__reaction.is-popped {
+		transform: none;
+	}
+}
+
+// ── Hover preview tooltip bubble (floating, JS-positioned) ──────────────────
+// ── Study tools bar (total time + resume button) ─────────────────────────────
+
+.wp-block-tocflow-table-of-contents .tocflow__study-bar,
+.tocflow .tocflow__study-bar {
+	display: flex;
+	align-items: center;
+	gap: 0.6rem;
+	flex-wrap: wrap;
+	margin-bottom: 0.5rem;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__total-time,
+.tocflow .tocflow__total-time {
+	font-size: 0.75em;
+	opacity: 0.6;
+	letter-spacing: 0.02em;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__resume-btn,
+.tocflow .tocflow__resume-btn {
+	appearance: none;
+	background: color-mix(in srgb, var(--tocflow-accent) 12%, transparent);
+	border: 1px solid color-mix(in srgb, var(--tocflow-accent) 35%, transparent);
+	border-radius: 999px;
+	color: var(--tocflow-accent);
+	cursor: pointer;
+	font-family: inherit;
+	font-size: 0.75em;
+	font-weight: 600;
+	line-height: 1;
+	margin-inline-start: auto;
+	padding: 0.3em 0.8em;
+	transition: background 0.15s, box-shadow 0.15s;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__resume-btn:hover,
+.tocflow .tocflow__resume-btn:hover {
+	background: color-mix(in srgb, var(--tocflow-accent) 20%, transparent);
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__resume-btn:focus-visible,
+.tocflow .tocflow__resume-btn:focus-visible {
+	outline: 2px solid var(--tocflow-accent);
+	outline-offset: 2px;
+}
+
+// ── Reading progress bar ─────────────────────────────────────────────────────
+
+.wp-block-tocflow-table-of-contents .tocflow__reading-wrap,
+.tocflow .tocflow__reading-wrap {
+	background: color-mix(in srgb, currentcolor 10%, transparent);
+	border-radius: 999px;
+	height: 4px;
+	margin-bottom: 0.65rem;
+	overflow: hidden;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__reading-bar,
+.tocflow .tocflow__reading-bar {
+	background: var(--tocflow-accent);
+	border-radius: 999px;
+	height: 100%;
+	transition: width 0.4s ease;
+	width: 0%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.wp-block-tocflow-table-of-contents .tocflow__reading-bar,
+	.tocflow .tocflow__reading-bar {
+		transition: none;
+	}
+}
+
+// ── Reader note pads (per-section personal notes) ─────────────────────────
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-wrap,
+.tocflow .tocflow__rnote-wrap {
+	margin-block-start: 0.3rem;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-toggle,
+.tocflow .tocflow__rnote-toggle {
+	appearance: none;
+	background: transparent;
+	border: 1px solid var(--tocflow-line, #e2e8f0);
+	border-radius: 4px;
+	color: inherit;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: 0.78em;
+	line-height: 1;
+	opacity: 0.5;
+	padding: 0.2em 0.5em;
+	transition: opacity 0.15s, background 0.15s;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-toggle:hover,
+.wp-block-tocflow-table-of-contents .tocflow__rnote-toggle.has-content,
+.tocflow .tocflow__rnote-toggle:hover,
+.tocflow .tocflow__rnote-toggle.has-content {
+	background: color-mix(in srgb, var(--tocflow-accent) 8%, transparent);
+	border-color: color-mix(in srgb, var(--tocflow-accent) 30%, transparent);
+	opacity: 1;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-toggle:focus-visible,
+.tocflow .tocflow__rnote-toggle:focus-visible {
+	outline: 2px solid currentcolor;
+	outline-offset: 2px;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-pad,
+.tocflow .tocflow__rnote-pad {
+	margin-block-start: 0.35rem;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__rnote-ta,
+.tocflow .tocflow__rnote-ta {
+	background: color-mix(in srgb, currentcolor 4%, transparent);
+	border: 1px solid var(--tocflow-line, #e2e8f0);
+	border-radius: 6px;
+	color: inherit;
+	display: block;
+	font-family: inherit;
+	font-size: 0.82em;
+	line-height: 1.55;
+	padding: 0.45em 0.6em;
+	resize: vertical;
+	width: 100%;
+
+	&:focus {
+		border-color: var(--tocflow-accent);
+		outline: 2px solid color-mix(in srgb, var(--tocflow-accent) 35%, transparent);
+		outline-offset: 0;
+	}
+}
+
+// Appended to <body> by initHoverPreviews(); rendered once per TOC.
+
+.tocflow__tip-bubble {
+	position: fixed;
+	z-index: 99999;
+	max-width: 280px;
+	padding: 0.6rem 0.8rem;
+	background: rgba(16, 16, 16, 0.88);
+	-webkit-backdrop-filter: blur(6px);
+	backdrop-filter: blur(6px);
+	color: #f3f3f3;
+	font-size: 0.8em;
+	line-height: 1.6;
+	border-radius: 8px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), 0 1px 6px rgba(0, 0, 0, 0.14);
+	pointer-events: none;
+	opacity: 0;
+	transition: opacity 0.14s ease;
+	word-break: break-word;
+	hyphens: auto;
+
+	// Small arrow pointing toward the TOC (overridden by JS class)
+	&::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		border: 6px solid transparent;
+	}
+
+	// Default: arrow points left (tooltip is to the right of the TOC)
+	&.is-right::before {
+		left: -11px;
+		border-right-color: rgba(16, 16, 16, 0.88);
+	}
+
+	// Tooltip is to the left of the TOC
+	&.is-left::before {
+		right: -11px;
+		border-left-color: rgba(16, 16, 16, 0.88);
+	}
+
+	&.is-visible {
+		opacity: 1;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.tocflow__tip-bubble {
+		background: rgba(238, 238, 238, 0.92);
+		color: #111;
+
+		&.is-right::before {
+			border-right-color: rgba(238, 238, 238, 0.92);
+		}
+
+		&.is-left::before {
+			border-left-color: rgba(238, 238, 238, 0.92);
+		}
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.tocflow__tip-bubble {
+		transition: none;
+	}
+}
+
+// ── Export / print toolbar ───────────────────────────────────────────────────
+
+.wp-block-tocflow-table-of-contents .tocflow__export-bar,
+.tocflow .tocflow__export-bar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.35rem;
+	margin-top: 0.85rem;
+	padding-top: 0.65rem;
+	border-top: 1px solid var(--tocflow-line, #e2e8f0);
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__export-btn,
+.tocflow .tocflow__export-btn {
+	appearance: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.3em;
+	background: transparent;
+	border: 1px solid var(--tocflow-line, #e2e8f0);
+	border-radius: 4px;
+	padding: 0.2em 0.6em;
+	font-size: 0.75em;
+	cursor: pointer;
+	color: inherit;
+	opacity: 0.55;
+	line-height: 1.4;
+	transition: opacity 0.15s, background 0.15s;
+	font-family: inherit;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__export-btn:hover,
+.wp-block-tocflow-table-of-contents .tocflow__export-btn:focus-visible,
+.tocflow .tocflow__export-btn:hover,
+.tocflow .tocflow__export-btn:focus-visible {
+	opacity: 1;
+	background: var(--tocflow-line, #e2e8f0);
+	outline: 2px solid currentcolor;
+	outline-offset: 2px;
+}
+
+.wp-block-tocflow-table-of-contents .tocflow__export-btn.is-copied,
+.tocflow .tocflow__export-btn.is-copied {
+	opacity: 1;
+	background: color-mix(in srgb, var(--tocflow-accent) 10%, transparent);
+	border-color: color-mix(in srgb, var(--tocflow-accent) 35%, transparent);
+	color: var(--tocflow-accent);
+}
+
+// ── Focus-visible polish ─────────────────────────────────────────────────────
+
+.wp-block-tocflow-table-of-contents a:focus-visible,
+.tocflow a:focus-visible {
+	outline: 2px solid currentcolor;
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+.wp-block-tocflow-table-of-contents button:focus-visible,
+.tocflow button:focus-visible {
+	outline: 2px solid currentcolor;
+	outline-offset: 2px;
+}
+
+// ── Print media ──────────────────────────────────────────────────────────────
+
+@media print {
+
+	// Keep the TOC visible and static.
+	.wp-block-tocflow-table-of-contents,
+	.tocflow {
+		border: 1px solid #ccc;
+		background: none;
+		page-break-inside: avoid;
+		box-shadow: none;
+	}
+
+	// Expand a collapsed TOC for print.
+	.wp-block-tocflow-table-of-contents.is-collapsed .tocflow__body,
+	.tocflow.is-collapsed .tocflow__body {
+		display: block;
+	}
+
+	// Hide all interactive controls.
+	.wp-block-tocflow-table-of-contents .tocflow__toggle,
+	.wp-block-tocflow-table-of-contents .tocflow__reaction,
+	.wp-block-tocflow-table-of-contents .tocflow__cite-btn,
+	.wp-block-tocflow-table-of-contents .tocflow__note-toggle,
+	.wp-block-tocflow-table-of-contents .tocflow__export-bar,
+	.wp-block-tocflow-table-of-contents .tocflow__tip-bubble,
+	.wp-block-tocflow-table-of-contents .tocflow__resume-btn,
+	.wp-block-tocflow-table-of-contents .tocflow__reading-wrap,
+	.wp-block-tocflow-table-of-contents .tocflow__rnote-toggle,
+	.wp-block-tocflow-table-of-contents .tocflow__rnote-pad,
+	.tocflow .tocflow__toggle,
+	.tocflow .tocflow__reaction,
+	.tocflow .tocflow__cite-btn,
+	.tocflow .tocflow__note-toggle,
+	.tocflow .tocflow__export-bar,
+	.tocflow .tocflow__tip-bubble,
+	.tocflow .tocflow__resume-btn,
+	.tocflow .tocflow__reading-wrap,
+	.tocflow .tocflow__rnote-toggle,
+	.tocflow .tocflow__rnote-pad {
+		display: none !important;
+	}
+
+	// Show author notes expanded.
+	.wp-block-tocflow-table-of-contents .tocflow__note,
+	.tocflow .tocflow__note {
+		display: block !important;
+	}
+
+	// Remove animated effects.
+	.wp-block-tocflow-table-of-contents .tocflow__item.is-read > .tocflow__item-row > .tocflow__link,
+	.tocflow .tocflow__item.is-read > .tocflow__item-row > .tocflow__link {
+		opacity: 1;
+	}
+
+	.wp-block-tocflow-table-of-contents .tocflow__density-bar,
+	.tocflow .tocflow__density-bar {
+		display: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.wp-block-tocflow-table-of-contents .tocflow__export-btn,
+	.tocflow .tocflow__export-btn {
+		transition: none;
+	}
+}
diff --git a/src/view.js b/src/view.js
index a067748..5606b21 100644
--- a/src/view.js
+++ b/src/view.js
@@ -4,6 +4,9 @@
  * Loaded via block.json `viewScript`. wp-scripts extracts `@wordpress/*`
  * imports as script dependencies (no jQuery, no IIFE wrapper).
  *
+ * Reading Guide features (progress tracking, reactions, author notes,
+ * per-section citations) activate only when the nav carries `has-guide-mode`.
+ *
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
  */
 import domReady from '@wordpress/dom-ready';
@@ -17,6 +20,27 @@ const offsetOf = ( nav ) =>
 const smoothEnabled = ( nav ) =>
 	nav.getAttribute( 'data-tocflow-smooth' ) !== '0';
 
+/**
+ * Announce a short message to screen readers via the nav's live region.
+ *
+ * @param {HTMLElement} nav     The TOC nav element.
+ * @param {string}      message Text to announce.
+ */
+const announce = ( nav, message ) => {
+	const region = nav.querySelector( '.tocflow__live-region' );
+	if ( ! region ) {
+		return;
+	}
+	// Clear first so the same text re-announces if repeated.
+	region.textContent = '';
+	// Allow the DOM to settle before setting the new text.
+	window.requestAnimationFrame( () => {
+		region.textContent = message;
+	} );
+};
+
+// ── Collapse toggle ───────────────────────────────────────────────────────────
+
 const initToggle = ( nav ) => {
 	const button = nav.querySelector( '.tocflow__toggle' );
 	if ( ! button ) {
@@ -29,6 +53,8 @@ const initToggle = ( nav ) => {
 	} );
 };
 
+// ── Smooth scroll ─────────────────────────────────────────────────────────────
+
 const initSmoothScroll = ( nav ) => {
 	nav.addEventListener( 'click', ( event ) => {
 		const link = event.target.closest( 'a[href^="#"]' );
@@ -61,6 +87,8 @@ const initSmoothScroll = ( nav ) => {
 	} );
 };
 
+// ── Scroll spy (highlight active section) ────────────────────────────────────
+
 const initScrollSpy = ( nav ) => {
 	if ( ! nav.classList.contains( 'has-scroll-spy' ) ) {
 		return;
@@ -113,6 +141,815 @@ const initScrollSpy = ( nav ) => {
 	window.addEventListener( 'resize', pick );
 };
 
+// ── Reading progress: mark sections as read when scrolled past ────────────────
+
+const initProgressTracking = ( nav ) => {
+	if ( nav.getAttribute( 'data-tocflow-progress' ) !== '1' ) {
+		return;
+	}
+	if ( typeof window.IntersectionObserver === 'undefined' ) {
+		return;
+	}
+
+	const entries = Array.from(
+		nav.querySelectorAll( '.tocflow__link[href^="#"]' )
+	)
+		.map( ( link ) => {
+			const id = decodeURIComponent(
+				( link.getAttribute( 'href' ) || '' ).slice( 1 )
+			);
+			const heading = id ? document.getElementById( id ) : null;
+			const item = link.closest( '.tocflow__item' );
+			return heading && item ? { heading, item } : null;
+		} )
+		.filter( Boolean );
+
+	if ( ! entries.length ) {
+		return;
+	}
+
+	// eslint-disable-next-line no-undef
+	const observer = new IntersectionObserver(
+		( changes ) => {
+			changes.forEach( ( change ) => {
+				const entry = entries.find(
+					( e ) => e.heading === change.target
+				);
+				if ( ! entry ) {
+					return;
+				}
+				if (
+					! change.isIntersecting &&
+					change.boundingClientRect.top < 0
+				) {
+					entry.item.classList.add( 'is-read' );
+				} else if ( change.isIntersecting ) {
+					entry.item.classList.remove( 'is-read' );
+				}
+			} );
+		},
+		{ threshold: 0 }
+	);
+
+	entries.forEach( ( { heading } ) => observer.observe( heading ) );
+};
+
+// ── Emoji reactions (localStorage, no server required) ────────────────────────
+
+const reactionKey = ( postId, slug, emoji ) =>
+	`tocflow-r-${ postId }-${ slug }-${ emoji }`;
+
+const initReactions = ( nav ) => {
+	const postId = nav.getAttribute( 'data-tocflow-post' );
+	if ( ! postId ) {
+		return;
+	}
+
+	nav.querySelectorAll( '.tocflow__reaction' ).forEach( ( btn ) => {
+		const item = btn.closest( '.tocflow__item' );
+		const slug = item ? item.getAttribute( 'data-tocflow-slug' ) : null;
+		const emoji = btn.getAttribute( 'data-reaction' );
+		if ( ! slug || ! emoji ) {
+			return;
+		}
+
+		// Restore persisted state.
+		try {
+			const saved = localStorage.getItem(
+				reactionKey( postId, slug, emoji )
+			);
+			if ( saved === '1' ) {
+				btn.setAttribute( 'aria-pressed', 'true' );
+			}
+		} catch {
+			// localStorage may be blocked (private mode, security policy).
+		}
+
+		btn.addEventListener( 'click', () => {
+			const pressed = btn.getAttribute( 'aria-pressed' ) === 'true';
+			const next = ! pressed;
+			btn.setAttribute( 'aria-pressed', next ? 'true' : 'false' );
+
+			try {
+				const key = reactionKey( postId, slug, emoji );
+				if ( next ) {
+					localStorage.setItem( key, '1' );
+				} else {
+					localStorage.removeItem( key );
+				}
+			} catch {
+				// localStorage may be blocked.
+			}
+
+			if ( ! prefersReduced() ) {
+				btn.classList.add( 'is-popped' );
+				setTimeout( () => btn.classList.remove( 'is-popped' ), 300 );
+			}
+		} );
+	} );
+};
+
+// ── Author section notes (toggle reveal) ─────────────────────────────────────
+
+const initNotes = ( nav ) => {
+	nav.querySelectorAll( '.tocflow__note-toggle' ).forEach( ( btn ) => {
+		btn.addEventListener( 'click', () => {
+			const expanded = btn.getAttribute( 'aria-expanded' ) === 'true';
+			btn.setAttribute( 'aria-expanded', expanded ? 'false' : 'true' );
+			const targetId = btn.getAttribute( 'aria-controls' );
+			const note = targetId ? document.getElementById( targetId ) : null;
+			if ( note ) {
+				if ( expanded ) {
+					note.setAttribute( 'hidden', '' );
+				} else {
+					note.removeAttribute( 'hidden' );
+				}
+			}
+		} );
+	} );
+};
+
+// ── Per-section academic citations ────────────────────────────────────────────
+
+const MONTHS = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+];
+
+const formatCitation = ( meta, headingText, slug, style ) => {
+	const { author, title, site, date, url } = meta;
+	const sectionUrl = url + '#' + slug;
+	const dateObj = date ? new Date( date ) : new Date();
+	const year = dateObj.getUTCFullYear();
+	const monthLong = MONTHS[ dateObj.getUTCMonth() ];
+	const day = dateObj.getUTCDate();
+
+	switch ( style ) {
+		case 'mla':
+			return `${ author }. "${ headingText }." ${ title }, ${ site }, ${ day } ${ monthLong } ${ year }, ${ sectionUrl }.`;
+		case 'chicago':
+			return `${ author }. "${ headingText }." ${ title }. ${ site }. ${ monthLong } ${ day }, ${ year }. ${ sectionUrl }.`;
+		case 'harvard':
+			return `${ author } (${ year }) '${ headingText }' in ${ title }. ${ site }. Available at: ${ sectionUrl }.`;
+		case 'plain':
+			return `"${ headingText }" — ${ title } (${ sectionUrl })`;
+		case 'apa':
+		default:
+			return `${ author }. (${ year }, ${ monthLong } ${ day }). ${ headingText }. In ${ title }. ${ site }. ${ sectionUrl }`;
+	}
+};
+
+/**
+ * @param {HTMLElement}      btn The button to mark as copied.
+ * @param {HTMLElement|null} nav Optional nav for live-region announcement.
+ */
+const showCopied = ( btn, nav ) => {
+	btn.classList.add( 'is-copied' );
+	if ( nav ) {
+		announce( nav, 'Citation copied.' );
+	}
+	setTimeout( () => btn.classList.remove( 'is-copied' ), 2200 );
+};
+
+/**
+ * @param {string}           text Text to copy.
+ * @param {HTMLElement}      btn  Button triggering the copy.
+ * @param {HTMLElement|null} nav  Optional nav for live-region announcement.
+ */
+const copyText = ( text, btn, nav = null ) => {
+	if ( navigator.clipboard && navigator.clipboard.writeText ) {
+		navigator.clipboard
+			.writeText( text )
+			.then( () => showCopied( btn, nav ) );
+		return;
+	}
+	// execCommand fallback for older browsers.
+	const ta = document.createElement( 'textarea' );
+	ta.value = text;
+	ta.style.cssText = 'position:fixed;opacity:0;top:0;left:0';
+	document.body.appendChild( ta );
+	ta.focus();
+	ta.select();
+	try {
+		document.execCommand( 'copy' );
+		showCopied( btn, nav );
+	} finally {
+		document.body.removeChild( ta );
+	}
+};
+
+const initCitations = ( nav ) => {
+	const rawMeta = nav.getAttribute( 'data-tocflow-meta' );
+	if ( ! rawMeta ) {
+		return;
+	}
+	let meta;
+	try {
+		meta = JSON.parse( rawMeta );
+	} catch {
+		return;
+	}
+	const style = meta.citationStyle || 'apa';
+
+	nav.querySelectorAll( '.tocflow__cite-btn' ).forEach( ( btn ) => {
+		const item = btn.closest( '.tocflow__item' );
+		const slug = item ? item.getAttribute( 'data-tocflow-slug' ) : null;
+		const headingText = item
+			? item.getAttribute( 'data-tocflow-heading' )
+			: null;
+		if ( ! slug || ! headingText ) {
+			return;
+		}
+
+		btn.addEventListener( 'click', () => {
+			copyText(
+				formatCitation( meta, headingText, slug, style ),
+				btn,
+				nav
+			);
+		} );
+	} );
+};
+
+// ── Reader annotation notes (localStorage) ────────────────────────────────────
+
+/**
+ * @param {string} postId Post ID string.
+ * @param {string} slug   Section slug.
+ * @return {string} localStorage key.
+ */
+const noteKey = ( postId, slug ) => `tocflow-rn-${ postId }-${ slug }`;
+
+/**
+ * @param {HTMLElement} nav The TOC nav element.
+ */
+const initReaderNotes = ( nav ) => {
+	const postId = nav.getAttribute( 'data-tocflow-post' );
+	if ( ! postId ) {
+		return;
+	}
+
+	nav.querySelectorAll( '.tocflow__rnote-toggle' ).forEach( ( btn ) => {
+		const item = btn.closest( '.tocflow__item' );
+		const slug = item ? item.getAttribute( 'data-tocflow-slug' ) : null;
+		if ( ! slug ) {
+			return;
+		}
+
+		const padId = btn.getAttribute( 'aria-controls' );
+		const pad = padId ? document.getElementById( padId ) : null;
+		const ta = pad ? pad.querySelector( '.tocflow__rnote-ta' ) : null;
+		if ( ! pad || ! ta ) {
+			return;
+		}
+
+		// Restore saved note and show indicator.
+		try {
+			const saved = localStorage.getItem( noteKey( postId, slug ) );
+			if ( saved ) {
+				ta.value = saved;
+				btn.classList.add( 'has-content' );
+			}
+		} catch {
+			// localStorage may be blocked.
+		}
+
+		// Toggle open/close.
+		btn.addEventListener( 'click', () => {
+			const expanded = btn.getAttribute( 'aria-expanded' ) === 'true';
+			btn.setAttribute( 'aria-expanded', expanded ? 'false' : 'true' );
+			if ( expanded ) {
+				pad.setAttribute( 'hidden', '' );
+			} else {
+				pad.removeAttribute( 'hidden' );
+				ta.focus();
+			}
+		} );
+
+		// Debounced auto-save.
+		let saveTimer;
+		ta.addEventListener( 'input', () => {
+			clearTimeout( saveTimer );
+			saveTimer = setTimeout( () => {
+				try {
+					const val = ta.value.trim();
+					if ( val ) {
+						localStorage.setItem( noteKey( postId, slug ), val );
+						btn.classList.add( 'has-content' );
+					} else {
+						localStorage.removeItem( noteKey( postId, slug ) );
+						btn.classList.remove( 'has-content' );
+					}
+				} catch {
+					// localStorage may be blocked.
+				}
+			}, 400 );
+		} );
+	} );
+};
+
+// ── Reading progress bar (% of headings scrolled past) ────────────────────────
+
+/**
+ * @param {HTMLElement} nav The TOC nav element.
+ */
+const initReadingProgress = ( nav ) => {
+	if ( nav.getAttribute( 'data-tocflow-reader-progress' ) !== '1' ) {
+		return;
+	}
+	if ( typeof window.IntersectionObserver === 'undefined' ) {
+		return;
+	}
+
+	const bar = nav.querySelector( '.tocflow__reading-bar' );
+	if ( ! bar ) {
+		return;
+	}
+
+	const links = Array.from(
+		nav.querySelectorAll( '.tocflow__link[href^="#"]' )
+	);
+	if ( ! links.length ) {
+		return;
+	}
+
+	const headings = links
+		.map( ( link ) => {
+			const id = decodeURIComponent(
+				( link.getAttribute( 'href' ) || '' ).slice( 1 )
+			);
+			return id ? document.getElementById( id ) : null;
+		} )
+		.filter( Boolean );
+
+	if ( ! headings.length ) {
+		return;
+	}
+
+	const wrap = nav.querySelector( '.tocflow__reading-wrap' );
+	let passed = 0;
+
+	const update = () => {
+		const pct = headings.length
+			? Math.round( ( passed / headings.length ) * 100 )
+			: 0;
+		bar.style.width = pct + '%';
+		if ( wrap ) {
+			wrap.setAttribute( 'aria-valuenow', String( pct ) );
+		}
+	};
+
+	// eslint-disable-next-line no-undef
+	const observer = new IntersectionObserver(
+		( changes ) => {
+			changes.forEach( ( change ) => {
+				// Count a heading as "read" once it has scrolled above the fold.
+				if (
+					! change.isIntersecting &&
+					change.boundingClientRect.top < 0
+				) {
+					const idx = headings.indexOf( change.target );
+					if ( idx !== -1 ) {
+						passed = Math.max( passed, idx + 1 );
+					}
+				}
+			} );
+			update();
+		},
+		{ threshold: 0 }
+	);
+
+	headings.forEach( ( h ) => observer.observe( h ) );
+};
+
+// ── Resume reading bookmark (localStorage) ────────────────────────────────────
+
+/**
+ * @param {string} postId Post ID string.
+ * @return {string} localStorage key.
+ */
+const bookmarkKey = ( postId ) => `tocflow-bm-${ postId }`;
+
+/**
+ * @param {HTMLElement} nav The TOC nav element.
+ */
+const initBookmark = ( nav ) => {
+	const postId = nav.getAttribute( 'data-tocflow-post' );
+	if ( ! postId ) {
+		return;
+	}
+	if ( nav.getAttribute( 'data-tocflow-bookmark' ) !== '1' ) {
+		return;
+	}
+	if ( typeof window.IntersectionObserver === 'undefined' ) {
+		return;
+	}
+
+	const resumeBtn = nav.querySelector( '.tocflow__resume-btn' );
+	const key = bookmarkKey( postId );
+
+	// Track the last visible heading as the reader scrolls.
+	// Writes are debounced to avoid hammering localStorage on every
+	// IntersectionObserver callback during fast scrolling.
+	const links = Array.from(
+		nav.querySelectorAll( '.tocflow__link[href^="#"]' )
+	);
+
+	let saveTimer;
+	// eslint-disable-next-line no-undef
+	const tracker = new IntersectionObserver(
+		( changes ) => {
+			changes.forEach( ( change ) => {
+				if ( change.isIntersecting ) {
+					const id = change.target.id;
+					clearTimeout( saveTimer );
+					saveTimer = setTimeout( () => {
+						try {
+							localStorage.setItem( key, id );
+						} catch {
+							// localStorage may be blocked.
+						}
+					}, 500 );
+				}
+			} );
+		},
+		{ rootMargin: '-30% 0px -60% 0px', threshold: 0 }
+	);
+
+	links.forEach( ( link ) => {
+		const id = decodeURIComponent(
+			( link.getAttribute( 'href' ) || '' ).slice( 1 )
+		);
+		const heading = id ? document.getElementById( id ) : null;
+		if ( heading ) {
+			tracker.observe( heading );
+		}
+	} );
+
+	// Show the Resume button if a bookmark exists.
+	try {
+		const saved = localStorage.getItem( key );
+		if ( saved && resumeBtn ) {
+			const target = document.getElementById( saved );
+			// Escape the slug for a CSS attribute-value selector.
+			const escapedSlug = saved.replace(
+				/([!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~])/g,
+				'\\$1'
+			);
+			const targetLink = target
+				? nav.querySelector( `a[href="#${ escapedSlug }"]` )
+				: null;
+			if ( targetLink ) {
+				resumeBtn.removeAttribute( 'hidden' );
+				resumeBtn.addEventListener( 'click', () => {
+					targetLink.click();
+					// Remove the Resume button after use so it's not confusing.
+					resumeBtn.setAttribute( 'hidden', '' );
+				} );
+			}
+		}
+	} catch {
+		// localStorage may be blocked.
+	}
+};
+
+// ── Section hover-preview tooltip ────────────────────────────────────────────
+
+/**
+ * Show a floating tooltip with the section's opening text when the reader
+ * hovers over (or focuses) a TOC link. Works independently of guide mode.
+ *
+ * Uses one shared `position: fixed` bubble per nav so the tooltip escapes
+ * any overflow:hidden or max-height constraints on the nav container.
+ *
+ * @param {HTMLElement} nav The TOC nav element.
+ */
+const initHoverPreviews = ( nav ) => {
+	const items = Array.from(
+		nav.querySelectorAll( '.tocflow__item.has-hover-preview' )
+	);
+	if ( ! items.length ) {
+		return;
+	}
+
+	const bubble = document.createElement( 'div' );
+	bubble.className = 'tocflow__tip-bubble';
+	bubble.setAttribute( 'aria-hidden', 'true' );
+	document.body.appendChild( bubble );
+
+	let hideTimer = null;
+
+	const positionBubble = ( anchor ) => {
+		const rect = anchor.getBoundingClientRect();
+		const gap = 12;
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const bw = Math.min( 280, vw - 24 );
+
+		bubble.style.maxWidth = bw + 'px';
+		// Measure height off-screen first.
+		bubble.style.visibility = 'hidden';
+		bubble.style.top = '-9999px';
+		bubble.style.left = '0px';
+
+		const bh = bubble.offsetHeight;
+
+		// Prefer placing to the right; fall back to the left.
+		let left = rect.right + gap;
+		let side = 'is-right';
+		if ( left + bw > vw - 8 ) {
+			left = rect.left - gap - bw;
+			side = 'is-left';
+		}
+		left = Math.max( 8, left );
+
+		// Center vertically on the anchor; clamp to viewport.
+		let top = rect.top + rect.height / 2 - bh / 2;
+		top = Math.max( 8, Math.min( top, vh - bh - 8 ) );
+
+		bubble.classList.remove( 'is-right', 'is-left' );
+		bubble.classList.add( side );
+		bubble.style.visibility = '';
+		bubble.style.top = Math.round( top ) + 'px';
+		bubble.style.left = Math.round( left ) + 'px';
+	};
+
+	const showBubble = ( item ) => {
+		clearTimeout( hideTimer );
+		const label = item.querySelector( '.tocflow__tip-label' );
+		const text = label ? label.textContent.trim() : '';
+		if ( ! text ) {
+			return;
+		}
+		const anchor = item.querySelector( '.tocflow__link' ) || item;
+		bubble.textContent = text;
+		bubble.classList.add( 'is-visible' );
+		positionBubble( anchor );
+	};
+
+	const hideBubble = () => {
+		clearTimeout( hideTimer );
+		// Brief delay so moving between tight items feels smooth.
+		hideTimer = setTimeout(
+			() => bubble.classList.remove( 'is-visible' ),
+			60
+		);
+	};
+
+	items.forEach( ( item ) => {
+		const link = item.querySelector( '.tocflow__link' );
+		item.addEventListener( 'mouseenter', () => showBubble( item ) );
+		item.addEventListener( 'mouseleave', hideBubble );
+		if ( link ) {
+			link.addEventListener( 'focus', () => showBubble( item ) );
+			link.addEventListener( 'blur', hideBubble );
+		}
+	} );
+};
+
+// ── Export / print bar ────────────────────────────────────────────────────────
+
+/**
+ * Collect the TOC as a flat [{depth, text, slug}] array from the rendered DOM.
+ *
+ * @param {HTMLElement} nav The TOC nav element.
+ * @return {Array<{depth: number, text: string, slug: string}>} Flat ordered list.
+ */
+const collectItems = ( nav ) => {
+	const items = [];
+	nav.querySelectorAll( '.tocflow__item' ).forEach( ( li ) => {
+		const link = li.querySelector( '.tocflow__link' );
+		if ( ! link ) {
+			return;
+		}
+		const text = link.textContent.trim();
+		const slug = ( link.getAttribute( 'href' ) || '' ).replace( /^#/, '' );
+		// Depth = nesting level (tocflow__list = 1, tocflow__sub = 2, …).
+		let depth = 1;
+		let parent = li.parentElement;
+		while ( parent && ! parent.classList.contains( 'tocflow__body' ) ) {
+			if (
+				parent.classList.contains( 'tocflow__sub' ) ||
+				parent.tagName === 'OL' ||
+				parent.tagName === 'UL'
+			) {
+				depth++;
+			}
+			parent = parent.parentElement;
+		}
+		depth = Math.max( 1, depth );
+		items.push( { depth, text, slug } );
+	} );
+	return items;
+};
+
+/**
+ * Convert collected TOC items to a Markdown string.
+ *
+ * @param {string}                                             title Post title.
+ * @param {Array<{depth: number, text: string, slug: string}>} items TOC items.
+ * @param {string}                                             url   Current page URL.
+ * @return {string} Markdown-formatted outline.
+ */
+const toMarkdown = ( title, items, url ) => {
+	const lines = [ `# ${ title }`, '' ];
+	const minDepth = items.reduce(
+		( m, i ) => Math.min( m, i.depth ),
+		Infinity
+	);
+	items.forEach( ( item ) => {
+		const indent = '  '.repeat( item.depth - minDepth );
+		lines.push( `${ indent }- [${ item.text }](${ url }#${ item.slug })` );
+	} );
+	lines.push( '' );
+	return lines.join( '\n' );
+};
+
+/**
+ * Build a minimal Word-compatible HTML string for the outline.
+ *
+ * @param {string}                                             title Post title.
+ * @param {Array<{depth: number, text: string, slug: string}>} items TOC items.
+ * @param {string}                                             url   Current page URL.
+ * @return {string} HTML document string.
+ */
+const toWordHtml = ( title, items, url ) => {
+	const esc = ( s ) =>
+		s
+			.replace( /&/g, '&amp;' )
+			.replace( /</g, '&lt;' )
+			.replace( />/g, '&gt;' );
+	let inner = `<h1>${ esc( title ) }</h1><ul>`;
+	const minDepth = items.reduce(
+		( m, i ) => Math.min( m, i.depth ),
+		Infinity
+	);
+	let prevDepth = minDepth;
+	items.forEach( ( item ) => {
+		if ( item.depth > prevDepth ) {
+			inner += '<ul>'.repeat( item.depth - prevDepth );
+		} else if ( item.depth < prevDepth ) {
+			inner += '</ul></li>'.repeat( prevDepth - item.depth );
+		}
+		inner += `<li><a href="${ esc( url ) }#${ esc( item.slug ) }">${ esc(
+			item.text
+		) }</a>`;
+		prevDepth = item.depth;
+	} );
+	inner += '</li></ul>'.repeat( prevDepth - minDepth + 1 );
+	return (
+		`<!DOCTYPE html>\n<html><head><meta charset="utf-8">` +
+		`<title>${ esc( title ) }</title></head><body>${ inner }</body></html>`
+	);
+};
+
+/**
+ * Trigger a browser file download.
+ *
+ * @param {string} content  File content.
+ * @param {string} filename Suggested file name.
+ * @param {string} mime     MIME type.
+ */
+const downloadFile = ( content, filename, mime ) => {
+	const blob = new Blob( [ content ], { type: mime } );
+	const href = URL.createObjectURL( blob );
+	const a = document.createElement( 'a' );
+	a.href = href;
+	a.download = filename;
+	document.body.appendChild( a );
+	a.click();
+	document.body.removeChild( a );
+	setTimeout( () => URL.revokeObjectURL( href ), 10000 );
+};
+
+/**
+ * Open a minimal print window containing only the TOC outline.
+ *
+ * @param {string} title Post title.
+ * @param {string} html  Word-compatible HTML outline (reused for print).
+ */
+const printOutline = ( title, html ) => {
+	const win = window.open( '', '_blank', 'width=800,height=600' );
+	if ( ! win ) {
+		return;
+	}
+	win.document.write(
+		html.replace(
+			'</head>',
+			`<style>body{font-family:sans-serif;max-width:640px;margin:2rem auto}` +
+				`a{color:inherit}h1{font-size:1.4rem;margin-bottom:1rem}` +
+				`ul,ol{padding-left:1.5rem}li{margin:.3rem 0}</style></head>`
+		)
+	);
+	win.document.close();
+	win.focus();
+	win.print();
+};
+
+/**
+ * Wire up export / print buttons in the toolbar.
+ *
+ * @param {HTMLElement} nav The TOC nav element.
+ */
+const initExport = ( nav ) => {
+	const bar = nav.querySelector( '.tocflow__export-bar' );
+	if ( ! bar ) {
+		return;
+	}
+
+	const pageTitle =
+		bar.getAttribute( 'data-tocflow-export-title' ) ||
+		document.title ||
+		'Table of Contents';
+	const pageUrl = window.location.href.split( '#' )[ 0 ];
+	const slug = pageTitle
+		.toLowerCase()
+		.replace( /[^a-z0-9]+/g, '-' )
+		.replace( /(^-|-$)/g, '' );
+
+	bar.querySelectorAll( '.tocflow__export-btn' ).forEach( ( btn ) => {
+		const action = btn.getAttribute( 'data-tocflow-action' );
+
+		btn.addEventListener( 'click', () => {
+			const items = collectItems( nav );
+			const md = toMarkdown( pageTitle, items, pageUrl );
+			const docHtml = toWordHtml( pageTitle, items, pageUrl );
+
+			switch ( action ) {
+				case 'copy-md': {
+					const onCopy = () => {
+						announce( nav, 'Outline copied as Markdown.' );
+						btn.classList.add( 'is-copied' );
+						const confirm = btn.querySelector(
+							'.tocflow__export-confirm'
+						);
+						if ( confirm ) {
+							confirm.textContent = '✓';
+						}
+						setTimeout( () => {
+							btn.classList.remove( 'is-copied' );
+							if ( confirm ) {
+								confirm.textContent = '';
+							}
+						}, 2200 );
+					};
+
+					if (
+						navigator.clipboard &&
+						navigator.clipboard.writeText
+					) {
+						navigator.clipboard.writeText( md ).then( onCopy );
+					} else {
+						const ta = document.createElement( 'textarea' );
+						ta.value = md;
+						ta.style.cssText =
+							'position:fixed;opacity:0;top:0;left:0';
+						document.body.appendChild( ta );
+						ta.focus();
+						ta.select();
+						try {
+							document.execCommand( 'copy' );
+							onCopy();
+						} finally {
+							document.body.removeChild( ta );
+						}
+					}
+					break;
+				}
+				case 'download-md':
+					downloadFile( md, `${ slug }.md`, 'text/markdown' );
+					announce( nav, 'Markdown file downloaded.' );
+					break;
+				case 'download-doc':
+					downloadFile(
+						docHtml,
+						`${ slug }.doc`,
+						'application/msword'
+					);
+					announce( nav, 'Word document downloaded.' );
+					break;
+				case 'print':
+					printOutline( pageTitle, docHtml );
+					break;
+				default:
+					break;
+			}
+		} );
+	} );
+};
+
+// ── Bootstrap ─────────────────────────────────────────────────────────────────
+
 const initNav = ( nav ) => {
 	if ( nav.dataset.tocflowReady ) {
 		return;
@@ -121,6 +958,32 @@ const initNav = ( nav ) => {
 	initToggle( nav );
 	initSmoothScroll( nav );
 	initScrollSpy( nav );
+
+	if ( nav.classList.contains( 'has-hover-preview' ) ) {
+		initHoverPreviews( nav );
+	}
+
+	if ( nav.classList.contains( 'has-guide-mode' ) ) {
+		initProgressTracking( nav );
+		initReactions( nav );
+		initNotes( nav );
+		initCitations( nav );
+	}
+
+	// Study tools (work independently of guide mode).
+	if ( nav.classList.contains( 'has-reader-notes' ) ) {
+		initReaderNotes( nav );
+	}
+	if ( nav.classList.contains( 'has-reading-progress' ) ) {
+		initReadingProgress( nav );
+	}
+	if ( nav.classList.contains( 'has-bookmark' ) ) {
+		initBookmark( nav );
+	}
+
+	if ( nav.classList.contains( 'has-export' ) ) {
+		initExport( nav );
+	}
 };
 
 domReady( () => {
diff --git a/tocflow.php b/tocflow.php
index 8edc752..749788b 100644
--- a/tocflow.php
+++ b/tocflow.php
@@ -3,7 +3,7 @@
  * Plugin Name:       TOCflow
  * Plugin URI:        https://github.com/matthummel-pa/tocflow
  * Description:       A lightweight Table of Contents block that auto-generates a linked outline from your post headings.
- * Version:           1.0.2
+ * Version:           1.3.0
  * Requires at least: 6.4
  * Requires PHP:      7.4
  * Author:            Matt Hummel
@@ -22,7 +22,7 @@
 	exit;
 }
 
-define( 'TOCFLOW_VERSION', '1.0.2' );
+define( 'TOCFLOW_VERSION', '1.3.0' );
 define( 'TOCFLOW_FILE', __FILE__ );
 define( 'TOCFLOW_DIR', plugin_dir_path( __FILE__ ) );
 define( 'TOCFLOW_URL', plugin_dir_url( __FILE__ ) );