diff --git a/app/docs/reading-progress-tracker/README.md b/app/docs/reading-progress-tracker/README.md
index be3058dd41..b40e25111a 100644
--- a/app/docs/reading-progress-tracker/README.md
+++ b/app/docs/reading-progress-tracker/README.md
@@ -203,12 +203,15 @@ On first load, legacy `readingProgress` and `mediaProgress` keys are merged into
 
 ---
 
-## Return visit — optional continue prompt
+## Return visit — resume offer in the reading pill
 
-When the user reopens an in-progress article, a **Continue reading** card slides in from the right on SingleContent (not the notification system). The user chooses:
+When the user reopens an in-progress article, the top-bar reading pill (`ArticleOutline.vue`) opens as a **Continue where you left off** offer with the saved percentage on its track. The user chooses:
 
-- **Continue reading** — scrolls to the saved position after **300 ms**
-- **Start from top** — dismisses the prompt; saved progress is kept
+- **Continue where you left off** — scrolls to the saved position
+- **Start from top** (×) — dismisses the offer; saved progress is kept
+- Scrolling into the article also dismisses it
+
+Either way the pill becomes the chapter dropdown, which keeps a *Continue where you left off* entry while a saved position exists. The resume offer's track shows `readingProgressPercent` (live confirmed segments, kept even when saving is disabled for short articles); the chapter dropdown's track follows `scrollProgressPercent`, the viewport's position within the article.
 
 During programmatic restore, for **400 ms** (`READING_RESTORE_GUARD_MS`), tracking is suppressed so the scroll jump does not count as reading.
 
@@ -251,12 +254,12 @@ inside `collectSegments()` — if a gate needs a new measurement, precompute it
 
 | File | Role |
 |------|------|
-| `app/src/pages/SingleContent/SingleContent.vue` | Wires the tracker and continue prompt |
+| `app/src/pages/SingleContent/SingleContent.vue` | Wires the tracker and the reading pill |
 | `app/src/composables/useReadingProgressTracker.ts` | Segments, gates, dwell loop, scroll restore |
 | `app/src/util/readingTime.ts` | WPM, dwell math, words/sec skim cap |
 | `app/src/contentProgress.ts` | `localStorage` read/write (`contentProgress`) |
 | `app/src/components/HomePage/ContinueProgress.vue` | Homepage row |
-| `app/src/components/content/ContinueReadingPrompt.vue` | In-article resume prompt |
+| `app/src/pages/SingleContent/ArticleOutline.vue` | Reading pill: resume offer, chapter dropdown, progress track |
 
 ---
 
@@ -280,8 +283,8 @@ inside `collectSegments()` — if a gate needs a new measurement, precompute it
 
 - `app/src/composables/useReadingProgressTracker.spec.ts` — segments, gates, dwell, skim, restore
 - `app/src/util/readingTime.spec.ts` — dwell and words/sec math
-- `app/src/components/content/ContinueReadingPrompt.spec.ts` — resume prompt UI
+- `app/src/pages/SingleContent/__tests__/ArticleOutline.spec.ts` — reading pill UI
 
 ```sh
-cd app && npm run test -- src/util/readingTime.spec.ts src/composables/useReadingProgressTracker.spec.ts src/components/content/ContinueReadingPrompt.spec.ts
+cd app && npm run test -- src/util/readingTime.spec.ts src/composables/useReadingProgressTracker.spec.ts src/pages/SingleContent/__tests__/ArticleOutline.spec.ts
 ```
diff --git a/app/src/App.vue b/app/src/App.vue
index f3c4140011..dfaa67e957 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -18,6 +18,7 @@ import PrivacyPolicyModal from "@/components/navigation/PrivacyPolicyModal.vue";
 import SearchModal from "@/components/navigation/SearchModal.vue";
 import AudioPlayer from "@/components/content/AudioPlayer.vue";
 import MobileMenu from "@/components/navigation/MobileMenu.vue";
+import { useMobileChromeAutoHide } from "@/composables/useMobileChromeAutoHide";
 import AffinityDebugOverlay from "@/components/debug/AffinityDebugOverlay.vue";
 import { affinityDebugEnabled, applyAffinityDebugQuery } from "@/recommendation/affinityDebug";
 import { useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
@@ -32,6 +33,7 @@ const LOGO = import.meta.env.VITE_LOGO || defaultLogo;
 
 const { t } = useI18n();
 const { needRefresh, reload } = usePwaUpdate();
+const mobileChrome = useMobileChromeAutoHide();
 
 const router = useRouter();
 
@@ -227,9 +229,19 @@ onErrorCaptured((err) => {
 
         <!-- Mobile Navigation (mobile only) -->
         <!-- <MobileMenu class="w-full lg:hidden z-10" /> -->
-        <MobileMenu
-            class="z-50 w-full border-t-2 border-t-zinc-100/25 dark:border-t-slate-700/50 lg:hidden"
-        />
+        <!-- Collapses via grid rows while a reading page scrolls down; see useMobileChromeAutoHide. -->
+        <div
+            class="z-50 grid w-full transition-[grid-template-rows] duration-300 ease-out lg:hidden"
+            :class="
+                mobileChrome.hidden.value ? '[grid-template-rows:0fr]' : '[grid-template-rows:1fr]'
+            "
+        >
+            <div class="min-h-0 overflow-hidden">
+                <MobileMenu
+                    class="w-full border-t-2 border-t-zinc-100/25 dark:border-t-slate-700/50"
+                />
+            </div>
+        </div>
 
         <!-- Privacy Policy Modal for authentication flow -->
         <PrivacyPolicyModal
diff --git a/app/src/components/BasePage.vue b/app/src/components/BasePage.vue
index 7ef5964725..df98228ca3 100644
--- a/app/src/components/BasePage.vue
+++ b/app/src/components/BasePage.vue
@@ -9,6 +9,7 @@ import { queryParams } from "@/globalConfig";
 import type { ContentDto } from "luminary-shared";
 import { ChevronLeftIcon } from "@heroicons/vue/24/outline";
 import { useBackNavigation } from "@/composables/useBackNavigation";
+import { useMobileChromeAutoHide } from "@/composables/useMobileChromeAutoHide";
 
 const showNotifications = !queryParams.has("supress-notifications");
 
@@ -19,16 +20,51 @@ const isSSG = import.meta.env.VITE_BUILD_TARGET === "web";
 const SSG_NOTIFICATION_DELAY_MS = 3000;
 const notificationsReady = ref(!isSSG);
 
-defineProps<{
+const props = defineProps<{
     content?: ContentDto;
     showBackButton?: boolean;
     desktopTopBar?: boolean;
+    /** The centre slot is occupied before any scrolling; keep the row below the chrome clear for it. */
+    reserveTopBarCenter?: boolean;
 }>();
 
 const { onBackClick } = useBackNavigation();
 
 const main = ref<HTMLElement | undefined>(undefined);
 
+// The fade under the pinned chrome only makes sense once body content has scrolled beneath
+// it; until the strip's own height has gone by, what sits under it is still the page title.
+const TOP_CHROME_H = 56;
+const scrolled = ref(false);
+// Reading pages let the mobile top bar and bottom menu step aside while scrolling down.
+const mobileChrome = useMobileChromeAutoHide();
+const onMainScroll = () => {
+    const el = main.value;
+    const scrollTop = el?.scrollTop ?? 0;
+    scrolled.value = scrollTop >= TOP_CHROME_H;
+    if (props.desktopTopBar && el) {
+        mobileChrome.onScroll(scrollTop, el.scrollHeight - el.clientHeight - scrollTop);
+    }
+};
+// Shared so whatever a page puts in the centre slot can reveal itself in step with the fade.
+provide("topChromeScrolled", scrolled);
+// Rendered as an always-present layer whose opacity animates, so the fade eases in rather
+// than snapping on at the threshold. It overshoots the strip's top edge so browsers that
+// place the sticky strip a few pixels lower still get a fade that reaches the top bar.
+// Backing that lifts the pinned controls off whatever scrolls beneath them (hero images,
+// text); fades in with the chrome so nothing changes at rest.
+const controlBacking =
+    "transition-[background-color,box-shadow] duration-500 ease-out rounded-lg ring-1 ring-transparent";
+const controlBackingOn =
+    "bg-zinc-100 shadow-md !ring-zinc-900/10 dark:bg-slate-700 dark:!ring-white/10";
+// Same treatment applied to each quick control individually, so they read as separate pills.
+const quickControlBacking =
+    "[&>*]:rounded-lg [&>*]:ring-1 [&>*]:ring-transparent [&>*]:transition-[background-color,box-shadow] [&>*]:duration-500 [&>*]:ease-out";
+const quickControlBackingOn =
+    "[&>*]:bg-zinc-100 [&>*]:shadow-md [&>*]:!ring-zinc-900/10 dark:[&>*]:bg-slate-700 dark:[&>*]:!ring-white/10";
+const topChromeFade =
+    "pointer-events-none absolute inset-x-0 -top-4 bottom-6 bg-gradient-to-b from-white from-45% via-white/60 via-70% to-transparent transition-opacity duration-500 ease-out dark:from-slate-900 dark:via-slate-900/70";
+
 // Expose the scrolling <main> to descendants (e.g. SearchPanel in page mode) so they can drive
 // infinite scroll off the page's real scroll container instead of an internal one.
 provide("appMainScrollEl", main);
@@ -42,10 +78,13 @@ const handleArrowKeyFocus = (e: KeyboardEvent) => {
 onMounted(() => {
     if (isSSG) setTimeout(() => (notificationsReady.value = true), SSG_NOTIFICATION_DELAY_MS);
     document.addEventListener("keydown", handleArrowKeyFocus);
+    main.value?.addEventListener("scroll", onMainScroll, { passive: true });
 });
 
 onUnmounted(() => {
     document.removeEventListener("keydown", handleArrowKeyFocus);
+    main.value?.removeEventListener("scroll", onMainScroll);
+    mobileChrome.reset();
 });
 </script>
 
@@ -57,13 +96,25 @@ onUnmounted(() => {
 
         <!-- Content column -->
         <div class="flex min-w-0 flex-1 flex-col scrollbar-hide">
-            <!-- Mobile top bar -->
-            <TopBar
-                :showBackButton="showBackButton"
-                class="border-b-2 border-b-zinc-200/50 dark:border-b-slate-950/50 lg:hidden"
+            <!-- Mobile top bar. Collapses via grid rows (no height to measure) while the
+                 reader scrolls down, and returns on the first scroll up. -->
+            <div
+                class="grid transition-[grid-template-rows] duration-300 ease-out lg:hidden"
+                :class="
+                    mobileChrome.hidden.value
+                        ? '[grid-template-rows:0fr]'
+                        : '[grid-template-rows:1fr]'
+                "
             >
-                <template #quickControls><slot name="quickControls" /></template>
-            </TopBar>
+                <div class="min-h-0 overflow-hidden">
+                    <TopBar
+                        :showBackButton="showBackButton"
+                        class="border-b-2 border-b-zinc-200/50 dark:border-b-slate-950/50"
+                    >
+                        <template #quickControls><slot name="quickControls" /></template>
+                    </TopBar>
+                </div>
+            </div>
 
             <Teleport
                 v-if="notificationsReady"
@@ -73,37 +124,86 @@ onUnmounted(() => {
             </Teleport>
 
             <main
-                class="flex-1 overflow-y-scroll px-2 py-2 scrollbar-hide focus:outline-none dark:bg-slate-900 md:max-lg:px-4"
+                class="flex-1 overflow-y-scroll px-2 pb-2 scrollbar-hide focus:outline-none dark:bg-slate-900 md:max-lg:px-4"
+                :class="desktopTopBar ? 'pt-0' : 'pt-2'"
                 ref="main"
             >
                 <!-- Desktop pinned chrome: back (left) + quick controls (right) stay fixed while scrolling.
                      Direct child of the scrolling <main> so `sticky` keeps it pinned the whole way.
-                     -mb-9 collapses its flow height so page content originates at the top of the page,
-                     sharing this row; pointer-events-none lets clicks fall through the empty centre. -->
+                     <main> drops its top padding on these pages so `top-0` lands on the scrollport edge in
+                     every engine; the strip's 8px of remaining flow height (h-16 minus -mb-14) stands in for
+                     that padding, so page content still originates where it always did, sharing this row.
+                     Negative side margins let it bleed over <main>'s horizontal padding; pointer-events-none
+                     lets clicks fall through the empty centre.
+                     The fade below the controls row lets content dissolve under the chrome. -->
                 <div
                     v-if="desktopTopBar"
-                    class="pointer-events-none sticky top-0 z-20 -mb-9 hidden h-9 items-center lg:flex"
+                    class="pointer-events-none sticky top-0 z-20 -mx-2 -mb-14 hidden h-16 items-start px-2 pt-2 lg:flex"
                 >
-                    <RouterLink
-                        v-if="showBackButton"
-                        :to="{ name: 'home' }"
-                        v-slot="{ href }"
-                        custom
-                    >
-                        <a
-                            :href="href"
-                            class="pointer-events-auto flex-shrink-0 rounded-md p-1 text-zinc-600 hover:bg-zinc-200 dark:text-slate-100 dark:hover:bg-slate-700"
-                            @click="onBackClick($event)"
-                            aria-label="Go back"
+                    <div
+                        :class="[topChromeFade, scrolled ? 'opacity-100' : 'opacity-0']"
+                        aria-hidden="true"
+                    />
+                    <div class="relative flex h-9 w-full items-center">
+                        <!-- Centred on the full row (= the content column's axis) rather than
+                             on the space left between the two asymmetric control groups.
+                             top-0.5 matches the 2px inset the centred back/quick controls get
+                             from being shorter than the row, so the pill's top edge lines up
+                             with theirs instead of sitting flush against the row top. -->
+                        <div class="pointer-events-none absolute inset-x-0 top-0.5 flex justify-center">
+                            <div class="pointer-events-auto flex min-w-0 max-w-[calc(100%-16rem)]">
+                                <slot name="topBarCenter" />
+                            </div>
+                        </div>
+                        <RouterLink
+                            v-if="showBackButton"
+                            :to="{ name: 'home' }"
+                            v-slot="{ href }"
+                            custom
                         >
-                            <ChevronLeftIcon class="h-5 w-5" />
-                        </a>
-                    </RouterLink>
-                    <div class="pointer-events-auto ml-auto flex items-center gap-2 pr-2">
-                        <slot name="quickControls" />
+                            <a
+                                :href="href"
+                                class="pointer-events-auto relative z-10 flex-shrink-0 p-1.5 text-zinc-600 hover:bg-zinc-200 dark:text-slate-100 dark:hover:bg-slate-600"
+                                :class="[controlBacking, { [controlBackingOn]: scrolled }]"
+                                @click="onBackClick($event)"
+                                aria-label="Go back"
+                            >
+                                <ChevronLeftIcon class="h-5 w-5" />
+                            </a>
+                        </RouterLink>
+                        <div
+                            class="pointer-events-auto relative z-10 ml-auto flex items-center gap-2 pr-2"
+                            :class="[quickControlBacking, { [quickControlBackingOn]: scrolled }]"
+                        >
+                            <slot name="quickControls" />
+                        </div>
                     </div>
                 </div>
 
+                <!-- Mobile counterpart of the centre slot: pinned at the top of the scrolling area with
+                     the same collapsed flow height, so it floats over the content. -->
+                <div
+                    v-if="desktopTopBar && $slots.topBarCenter"
+                    class="pointer-events-none sticky top-0 z-20 -mx-2 -mb-14 flex h-16 items-start justify-center px-2 pt-2 md:-mx-4 md:px-4 lg:hidden"
+                >
+                    <div
+                        :class="[topChromeFade, scrolled ? 'opacity-100' : 'opacity-0']"
+                        aria-hidden="true"
+                    />
+                    <div
+                        class="pointer-events-auto relative flex h-9 min-w-0 max-w-full items-center justify-center"
+                    >
+                        <slot name="topBarCenter" />
+                    </div>
+                </div>
+
+                <!-- Spacer that keeps in-flow content (banners, the page title) out from under a
+                     centre-slot control that is showing before the page has scrolled. -->
+                <div
+                    v-if="desktopTopBar && reserveTopBarCenter"
+                    class="h-11"
+                />
+
                 <!-- Desktop notification: normal flow below the pinned chrome; pushes article down when present.
                      [&>div]:mb-2 trims the banner's default mb-4 so the gap above the title matches the page-top gap. -->
                 <div
diff --git a/app/src/components/common/DropdownMenu.vue b/app/src/components/common/DropdownMenu.vue
index ff89fd4eb6..588f88ad9a 100644
--- a/app/src/components/common/DropdownMenu.vue
+++ b/app/src/components/common/DropdownMenu.vue
@@ -5,7 +5,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(
     defineProps<{
-        placement?: "bottom-end" | "bottom-start" | "top-start" | "top-end";
+        placement?: "bottom-end" | "bottom-start" | "bottom-center" | "top-start" | "top-end";
         panelClass?: string;
     }>(),
     { placement: "bottom-end" },
@@ -53,11 +53,13 @@ onUnmounted(() => {
 const placementClasses =
     props.placement === "bottom-start"
         ? "left-0 origin-top-left"
-        : props.placement === "top-start"
-          ? "bottom-full mb-2 left-0 origin-bottom-left"
-          : props.placement === "top-end"
-            ? "bottom-full mb-2 right-0 origin-bottom-right"
-            : "right-0 origin-top-right";
+        : props.placement === "bottom-center"
+          ? "left-1/2 -translate-x-1/2 origin-top"
+          : props.placement === "top-start"
+            ? "bottom-full mb-2 left-0 origin-bottom-left"
+            : props.placement === "top-end"
+              ? "bottom-full mb-2 right-0 origin-bottom-right"
+              : "right-0 origin-top-right";
 </script>
 
 <template>
diff --git a/app/src/components/content/ContentTile.spec.ts b/app/src/components/content/ContentTile.spec.ts
index 09c71869dc..0af509d731 100644
--- a/app/src/components/content/ContentTile.spec.ts
+++ b/app/src/components/content/ContentTile.spec.ts
@@ -385,7 +385,7 @@ describe("ContentTile", () => {
         });
 
         expect(wrapper.html()).toContain('style="width: 45%');
-        // Reading progress uses the ContinueReadingPrompt bar style (yellow fill).
+        // Reading progress uses the shared progress-bar style (yellow fill).
         expect(wrapper.html()).toContain("bg-yellow-500");
     });
 
diff --git a/app/src/components/content/ContentTile.vue b/app/src/components/content/ContentTile.vue
index 83dab93791..39661d0617 100644
--- a/app/src/components/content/ContentTile.vue
+++ b/app/src/components/content/ContentTile.vue
@@ -240,7 +240,7 @@ const displayProgress = computed(() => Math.max(mediaProgress.value, readingProg
                             </p>
                         </div>
 
-                        <!-- Progress (playback or reading): same bar design as ContinueReadingPrompt, on the image's bottom edge. -->
+                        <!-- Progress (playback or reading): same bar design as the reading pill, on the image's bottom edge. -->
                         <div
                             v-if="showProgress && displayProgress > 0"
                             class="absolute inset-x-0 bottom-0 z-20 h-1 overflow-hidden rounded-b-lg bg-zinc-200 dark:bg-slate-600"
diff --git a/app/src/components/content/ContinueReadingPrompt.spec.ts b/app/src/components/content/ContinueReadingPrompt.spec.ts
deleted file mode 100644
index e684f48b1b..0000000000
--- a/app/src/components/content/ContinueReadingPrompt.spec.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
-import ContinueReadingPrompt from "./ContinueReadingPrompt.vue";
-
-describe("ContinueReadingPrompt", () => {
-    it("renders when visible and emits continue on action click", async () => {
-        const wrapper = mount(ContinueReadingPrompt, {
-            props: {
-                visible: true,
-                progressPercent: 42,
-            },
-            global: {
-                mocks: {
-                    t: (key: string) => key,
-                },
-            },
-        });
-
-        expect(wrapper.text()).toContain("content.continueReading.action");
-        expect(wrapper.text()).not.toContain("42%");
-        expect(wrapper.find('[role="progressbar"]').attributes("aria-valuenow")).toBe("42");
-        expect(wrapper.find('[style*="width: 42%"]').exists()).toBe(true);
-
-        const continueButton = wrapper.findAll("button")[0];
-        await continueButton.trigger("click");
-        expect(wrapper.emitted("continue")).toHaveLength(1);
-    });
-
-    it("emits dismiss via the X button without emitting continue", async () => {
-        const wrapper = mount(ContinueReadingPrompt, {
-            props: {
-                visible: true,
-                progressPercent: 42,
-            },
-            global: {
-                mocks: {
-                    t: (key: string) => key,
-                },
-            },
-        });
-
-        const dismissButton = wrapper.findAll("button")[1];
-        expect(dismissButton.attributes("aria-label")).toBe("content.continueReading.dismiss");
-
-        await dismissButton.trigger("click");
-
-        expect(wrapper.emitted("dismiss")).toHaveLength(1);
-        expect(wrapper.emitted("continue")).toBeUndefined();
-    });
-
-    it("grows for long translation strings without clipping the action label", () => {
-        const longLabel =
-            "Continue where you left off in this very long article title that keeps going";
-
-        const wrapper = mount(ContinueReadingPrompt, {
-            props: {
-                visible: true,
-                progressPercent: 75,
-            },
-            global: {
-                mocks: {
-                    t: (key: string) =>
-                        key === "content.continueReading.action" ? longLabel : key,
-                },
-            },
-        });
-
-        expect(wrapper.text()).toContain(longLabel);
-        expect(wrapper.find(".max-w-\\[min\\(24rem\\,calc\\(100vw-2rem\\)\\)\\]").exists()).toBe(
-            true,
-        );
-    });
-});
diff --git a/app/src/components/content/ContinueReadingPrompt.vue b/app/src/components/content/ContinueReadingPrompt.vue
deleted file mode 100644
index 723b4ca44a..0000000000
--- a/app/src/components/content/ContinueReadingPrompt.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { XMarkIcon } from "@heroicons/vue/20/solid";
-import { useI18n } from "vue-i18n";
-
-defineProps<{
-    visible: boolean;
-    progressPercent: number;
-}>();
-
-const emit = defineEmits<{
-    continue: [];
-    dismiss: [];
-}>();
-
-const { t } = useI18n();
-</script>
-
-<template>
-    <Transition
-        enter-active-class="transition duration-300 ease-out"
-        enter-from-class="translate-y-full opacity-0"
-        enter-to-class="translate-y-0 opacity-100"
-        leave-active-class="transition duration-200 ease-in"
-        leave-from-class="translate-y-0 opacity-100"
-        leave-to-class="translate-y-full opacity-0"
-    >
-        <div
-            v-if="visible"
-            class="fixed z-40 w-max min-w-[12rem] max-w-[min(24rem,calc(100vw-2rem))] -translate-x-1/2 px-4 max-lg:left-1/2 max-lg:bottom-[calc(var(--mobile-menu-h,78px)+0.75rem)] lg:bottom-5 lg:left-[calc(50%+var(--desktop-sidebar-w,16rem)/2)]"
-            role="dialog"
-            :aria-label="t('content.continueReading.prompt')"
-        >
-            <div
-                class="overflow-hidden rounded-lg bg-zinc-100 shadow-lg ring-1 ring-zinc-900/10 dark:bg-slate-700 dark:ring-slate-600"
-            >
-                <div
-                    class="h-1 bg-zinc-200 dark:bg-slate-600"
-                    role="progressbar"
-                    :aria-valuenow="progressPercent"
-                    aria-valuemin="0"
-                    aria-valuemax="100"
-                >
-                    <div
-                        class="h-full bg-yellow-500 transition-[width] duration-300"
-                        :style="{ width: `${progressPercent}%` }"
-                    />
-                </div>
-                <div class="flex items-center gap-1 p-1.5">
-                    <button
-                        type="button"
-                        class="min-w-0 flex-1 rounded-md px-3 py-2 text-left text-sm font-semibold text-zinc-900 hover:bg-zinc-200 dark:text-slate-100 dark:hover:bg-slate-600"
-                        @click="emit('continue')"
-                    >
-                        {{ t("content.continueReading.action") }}
-                    </button>
-                    <button
-                        type="button"
-                        class="flex-shrink-0 rounded-md p-2 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-100"
-                        :aria-label="t('content.continueReading.dismiss')"
-                        @click="emit('dismiss')"
-                    >
-                        <XMarkIcon class="h-5 w-5" />
-                    </button>
-                </div>
-            </div>
-        </div>
-    </Transition>
-</template>
diff --git a/app/src/components/navigation/DesktopSidebar.vue b/app/src/components/navigation/DesktopSidebar.vue
index d16a1ca650..aecb7069f0 100644
--- a/app/src/components/navigation/DesktopSidebar.vue
+++ b/app/src/components/navigation/DesktopSidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { getNavigationItems } from "./navigationItems";
 import { useSearchOverlay } from "@/composables/useSearchOverlay";
@@ -29,7 +29,10 @@ import LDialog from "../common/LDialog.vue";
 import LToggle from "../form/LToggle.vue";
 import { cmsLanguages } from "@/globalConfig";
 import { useDisplayLanguageIds } from "@/ssg/renderLanguage";
-import { showPrivacyPolicyModal, useAuthWithPrivacyPolicy } from "@/composables/useAuthWithPrivacyPolicy";
+import {
+    showPrivacyPolicyModal,
+    useAuthWithPrivacyPolicy,
+} from "@/composables/useAuthWithPrivacyPolicy";
 import { isConnected } from "luminary-shared";
 import { useNotificationStore, type Notification } from "@/stores/notification";
 import { useHydrated } from "@/composables/useHydrated";
@@ -124,32 +127,6 @@ const confirmLogout = async () => {
     forceReauthOnNextLogin.value = false;
 };
 
-// Publish rendered width as --desktop-sidebar-w so fixed overlays (e.g. ContinueReadingPrompt)
-// can center in the content column instead of the full viewport.
-const rootRef = ref<HTMLElement | null>(null);
-let resizeObserver: ResizeObserver | null = null;
-
-const publishWidth = (width: number) => {
-    document.documentElement.style.setProperty("--desktop-sidebar-w", `${width}px`);
-};
-
-onMounted(() => {
-    if (!rootRef.value) return;
-    const measure = () => {
-        if (rootRef.value) publishWidth(rootRef.value.getBoundingClientRect().width);
-    };
-    measure();
-    if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(measure);
-        resizeObserver.observe(rootRef.value);
-    }
-});
-
-onUnmounted(() => {
-    resizeObserver?.disconnect();
-    document.documentElement.style.removeProperty("--desktop-sidebar-w");
-});
-
 const handleLogin = () => {
     if (isConnected.value) {
         loginWithRedirect();
@@ -167,7 +144,6 @@ const handleLogin = () => {
 
 <template>
     <nav
-        ref="rootRef"
         class="relative hidden flex-shrink-0 flex-col border-r border-zinc-200 bg-zinc-100 transition-[width] duration-200 ease-out dark:border-slate-700 dark:bg-slate-800 lg:flex"
         :class="collapsed ? 'w-[4.5rem]' : 'w-64'"
     >
@@ -250,7 +226,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ item.name }}</span>
+                        >{{ item.name }}</span
+                    >
                 </a>
             </RouterLink>
 
@@ -271,7 +248,8 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                >{{ t("menu.search") }}</span>
+                    >{{ t("menu.search") }}</span
+                >
             </span>
 
             <RouterLink
@@ -293,7 +271,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ t("profile_menu.bookmarks") }}</span>
+                        >{{ t("profile_menu.bookmarks") }}</span
+                    >
                 </a>
             </RouterLink>
 
@@ -313,7 +292,8 @@ const handleLogin = () => {
                     <span
                         v-if="!collapsed"
                         :class="navLabelClass"
-                    >{{ t("profile_menu.theme") }}</span>
+                        >{{ t("profile_menu.theme") }}</span
+                    >
                 </span>
 
                 <span
@@ -327,13 +307,14 @@ const handleLogin = () => {
                     />
                     <div
                         v-if="!collapsed"
-                        class="min-w-0 flex flex-col leading-none"
+                        class="flex min-w-0 flex-col leading-none"
                     >
                         <span :class="navLabelClass">{{ t("profile_menu.language") }}</span>
                         <span
                             v-if="renderLanguage?.name"
                             :class="navMetaClass"
-                        >{{ renderLanguage.name }}</span>
+                            >{{ renderLanguage.name }}</span
+                        >
                     </div>
                 </span>
 
@@ -356,7 +337,8 @@ const handleLogin = () => {
                         <span
                             v-if="!collapsed"
                             :class="navLabelClass"
-                        >{{ t("profile_menu.settings") }}</span>
+                            >{{ t("profile_menu.settings") }}</span
+                        >
                     </a>
                 </RouterLink>
             </div>
@@ -380,7 +362,8 @@ const handleLogin = () => {
                 <span
                     v-if="!collapsed"
                     :class="navLabelClass"
-                >{{ t("profile_menu.privacy_policy") }}</span>
+                    >{{ t("profile_menu.privacy_policy") }}</span
+                >
             </button>
 
             <button
@@ -390,7 +373,9 @@ const handleLogin = () => {
                 @click="isAuthenticated ? handleLogout() : handleLogin()"
             >
                 <component
-                    :is="isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon"
+                    :is="
+                        isAuthenticated ? ArrowRightEndOnRectangleIcon : ArrowLeftEndOnRectangleIcon
+                    "
                     :class="navIconClass"
                     aria-hidden="true"
                 />
@@ -406,7 +391,7 @@ const handleLogin = () => {
                 v-if="isAuthenticated"
                 :class="[
                     'flex items-center rounded-md',
-                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 pl-1.5 py-1.5',
+                    collapsed ? 'justify-center px-0 py-1' : 'gap-3 py-1.5 pl-1.5',
                 ]"
                 :title="profileTooltip"
             >
diff --git a/app/src/composables/useMobileChromeAutoHide.spec.ts b/app/src/composables/useMobileChromeAutoHide.spec.ts
new file mode 100644
index 0000000000..9a308bdfb3
--- /dev/null
+++ b/app/src/composables/useMobileChromeAutoHide.spec.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { useMobileChromeAutoHide } from "./useMobileChromeAutoHide";
+
+describe("useMobileChromeAutoHide", () => {
+    const chrome = useMobileChromeAutoHide();
+
+    beforeEach(() => chrome.reset());
+
+    it("stays visible near the top of the page", () => {
+        chrome.onScroll(40);
+        chrome.onScroll(70);
+        expect(chrome.hidden.value).toBe(false);
+    });
+
+    it("hides after scrolling down and shows again on scrolling up", () => {
+        chrome.onScroll(100);
+        chrome.onScroll(140);
+        expect(chrome.hidden.value).toBe(true);
+
+        chrome.onScroll(120);
+        expect(chrome.hidden.value).toBe(false);
+    });
+
+    it("ignores small jitter in either direction", () => {
+        chrome.onScroll(100);
+        chrome.onScroll(140);
+        expect(chrome.hidden.value).toBe(true);
+
+        chrome.onScroll(135);
+        expect(chrome.hidden.value).toBe(true);
+    });
+
+    it("comes back when returning to the top regardless of direction history", () => {
+        chrome.onScroll(300);
+        chrome.onScroll(400);
+        expect(chrome.hidden.value).toBe(true);
+        chrome.onScroll(0);
+        expect(chrome.hidden.value).toBe(false);
+    });
+
+    it("comes back when the end of the page is reached while scrolling down", () => {
+        chrome.onScroll(300, 2000);
+        chrome.onScroll(400, 1900);
+        expect(chrome.hidden.value).toBe(true);
+        chrome.onScroll(2250, 50);
+        expect(chrome.hidden.value).toBe(false);
+    });
+
+    it("never hides on a page with too little to scroll", () => {
+        chrome.onScroll(100, 150);
+        chrome.onScroll(140, 110);
+        expect(chrome.hidden.value).toBe(false);
+    });
+
+    it("is shared between callers and cleared by reset", () => {
+        chrome.onScroll(200);
+        chrome.onScroll(300);
+        expect(useMobileChromeAutoHide().hidden.value).toBe(true);
+        chrome.reset();
+        expect(useMobileChromeAutoHide().hidden.value).toBe(false);
+    });
+});
diff --git a/app/src/composables/useMobileChromeAutoHide.ts b/app/src/composables/useMobileChromeAutoHide.ts
new file mode 100644
index 0000000000..67e03fee61
--- /dev/null
+++ b/app/src/composables/useMobileChromeAutoHide.ts
@@ -0,0 +1,54 @@
+import { ref } from "vue";
+
+/** Scroll distance from the top below which the chrome always stays visible. */
+const SHOW_NEAR_TOP_PX = 80;
+/** Minimum movement in one direction before the chrome reacts, so jitter doesn't toggle it. */
+const DIRECTION_THRESHOLD_PX = 12;
+/** Remaining scroll distance below which the chrome comes back — the reader has arrived. */
+const SHOW_NEAR_END_PX = 80;
+/**
+ * Smallest scroll range worth hiding for. Collapsing the bars enlarges the viewport and so
+ * shrinks the range; on a short page that would clamp the reader to the end and pop the bars
+ * straight back, so short pages keep their chrome.
+ */
+const MIN_RANGE_PX = 480;
+
+// Shared across the app shell: the page that owns the scroll container reports scrolling,
+// while the top bar (BasePage) and the bottom menu (App.vue) read the result.
+const hidden = ref(false);
+let lastScrollTop = 0;
+
+/**
+ * Mobile chrome that steps out of the way while reading: hides once the reader scrolls
+ * down, comes back as soon as they scroll up or return to the top.
+ */
+export function useMobileChromeAutoHide() {
+    /**
+     * @param scrollTop current scroll offset
+     * @param remaining distance left to the end of the scroll range, when known
+     */
+    function onScroll(scrollTop: number, remaining = Infinity) {
+        const delta = scrollTop - lastScrollTop;
+
+        if (
+            scrollTop + remaining < MIN_RANGE_PX ||
+            scrollTop <= SHOW_NEAR_TOP_PX ||
+            remaining <= SHOW_NEAR_END_PX
+        ) {
+            hidden.value = false;
+            lastScrollTop = scrollTop;
+            return;
+        }
+        if (Math.abs(delta) < DIRECTION_THRESHOLD_PX) return;
+
+        hidden.value = delta > 0;
+        lastScrollTop = scrollTop;
+    }
+
+    function reset() {
+        hidden.value = false;
+        lastScrollTop = 0;
+    }
+
+    return { hidden, onScroll, reset };
+}
diff --git a/app/src/composables/useReadingProgressTracker.ts b/app/src/composables/useReadingProgressTracker.ts
index 60785edf25..b0c0f6fecb 100644
--- a/app/src/composables/useReadingProgressTracker.ts
+++ b/app/src/composables/useReadingProgressTracker.ts
@@ -251,6 +251,12 @@ function getMaxSegmentHeight(container: HTMLElement | Window): number {
 export function useReadingProgressTracker(options: {
     contentId: Ref<Uuid | undefined>;
     articleRoot: Ref<HTMLElement | null>;
+    /**
+     * Element the visual scroll progress is measured over; defaults to `articleRoot`. Pass a
+     * wider wrapper (title through prose) so the bar starts filling as soon as the reader
+     * scrolls, not only once the body text reaches the top.
+     */
+    progressRoot?: Ref<HTMLElement | null>;
     scrollContainer: Ref<HTMLElement | Window>;
     enabled: Ref<boolean>;
     /** Language averageReadingSpeed (words per minute); defaults to 200 when unset. */
@@ -322,6 +328,57 @@ export function useReadingProgressTracker(options: {
         return p > 0 && p < 100;
     });
 
+    // Live reading progress for the top-bar pill: confirmed segments as a percentage, kept
+    // even when saving is disabled for short articles, so the indicator always has a value.
+    const readingProgressPercent = ref(0);
+
+    // Scroll position within the article for the chapter pill's track. Deliberately separate
+    // from the dwell-gated reading progress above: this follows the viewport frame by frame.
+    const scrollProgressPercent = ref(0);
+    let progressRafPending = false;
+
+    function computeScrollProgress() {
+        const el = options.progressRoot?.value ?? options.articleRoot.value;
+        if (!el) {
+            scrollProgressPercent.value = 0;
+            return;
+        }
+
+        const rect = el.getBoundingClientRect();
+        if (rect.height <= 0) {
+            scrollProgressPercent.value = 0;
+            return;
+        }
+
+        const container = options.scrollContainer.value;
+        const containerRect =
+            container === window
+                ? { top: 0, bottom: window.innerHeight }
+                : (container as HTMLElement).getBoundingClientRect();
+        const viewportHeight = containerRect.bottom - containerRect.top;
+
+        // Reader position: 0 once the article's top reaches the viewport top, 100 once its
+        // bottom reaches the viewport bottom. An article shorter than the viewport can't
+        // travel that way, so it fills as it comes into view instead.
+        const travel = rect.height - viewportHeight;
+        const percent =
+            travel > 0
+                ? ((containerRect.top - rect.top) / travel) * 100
+                : ((containerRect.bottom - rect.top) / rect.height) * 100;
+        scrollProgressPercent.value = Math.min(100, Math.max(0, Math.round(percent)));
+    }
+
+    function scheduleProgressUpdate() {
+        if (progressRafPending) return;
+        progressRafPending = true;
+        requestAnimationFrame(() => {
+            progressRafPending = false;
+            computeScrollProgress();
+        });
+    }
+
+    useEventListener(options.scrollContainer, "scroll", scheduleProgressUpdate, { passive: true });
+
     const observerRoot = computed(() =>
         options.scrollContainer.value === window
             ? null
@@ -507,6 +564,7 @@ export function useReadingProgressTracker(options: {
         const saved = getReadingProgress(id);
         if (saved <= 0) return;
 
+        readingProgressPercent.value = saved;
         confirmedSegments.clear();
 
         if (saved >= 100) {
@@ -531,6 +589,7 @@ export function useReadingProgressTracker(options: {
         const computedProgress = Math.round((confirmedSegments.size / segments.value.length) * 100);
         const existing = getReadingProgress(id);
         const progress = Math.max(existing, computedProgress);
+        readingProgressPercent.value = progress;
 
         if (progress === lastSavedProgress) return;
         lastSavedProgress = progress;
@@ -730,6 +789,7 @@ export function useReadingProgressTracker(options: {
                 if (!options.enabled.value) return;
                 const prevLength = segmentList.length;
                 collectSegments();
+                computeScrollProgress();
                 if (segmentList.length !== prevLength) {
                     visibleSegments.clear();
                     clearDwellAccumulation();
@@ -791,6 +851,7 @@ export function useReadingProgressTracker(options: {
     function setup(contentChanged: boolean) {
         collectSegments();
         setupResizeObserver();
+        computeScrollProgress();
 
         if (!options.enabled.value) return;
 
@@ -822,6 +883,8 @@ export function useReadingProgressTracker(options: {
                 sourceElements.value = [];
                 teardownResizeObserver();
                 trackedContentId = undefined;
+                readingProgressPercent.value = 0;
+                scrollProgressPercent.value = 0;
                 return;
             }
 
@@ -854,6 +917,8 @@ export function useReadingProgressTracker(options: {
         isRestoring,
         savedProgressPercent,
         hasResumableProgress,
+        readingProgressPercent,
+        scrollProgressPercent,
         restoreScrollPosition,
         setup,
     };
diff --git a/app/src/pages/SingleContent/ArticleOutline.vue b/app/src/pages/SingleContent/ArticleOutline.vue
new file mode 100644
index 0000000000..3a609f2113
--- /dev/null
+++ b/app/src/pages/SingleContent/ArticleOutline.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { computed, inject, nextTick, ref, watch, type Ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import { ArrowUturnLeftIcon, CheckCircleIcon, ChevronDownIcon } from "@heroicons/vue/24/outline";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import DropdownMenu from "@/components/common/DropdownMenu.vue";
+
+const props = defineProps<{
+    articleRoot: HTMLElement | null;
+    scrollContainer: HTMLElement | Window;
+    /** Re-scans headings whenever this changes (a translation/article swap). */
+    contentId: string | undefined;
+    /** Shown in place of the chapter dropdown when the article has no headings. */
+    title?: string;
+    /** Scroll position, 0-100 — the chapter pill's track. */
+    progress?: number;
+    /** Saved reading progress, 0-100 — shown by the resume offer and its menu entry. */
+    savedProgress?: number;
+    /** A saved reading position exists; adds a "continue" entry to the chapter list. */
+    resumable?: boolean;
+    /** Show the pill as a resume offer instead of the chapter dropdown. */
+    offerResume?: boolean;
+    /**
+     * Title elements the dropdown stands in for: it stays hidden until the visible one has
+     * scrolled above the container. Several may be passed when the title is rendered per
+     * breakpoint; only the displayed one is measured.
+     */
+    titleEls?: (HTMLElement | null)[];
+}>();
+
+const emit = defineEmits<{
+    resume: [];
+    dismiss: [];
+}>();
+
+const { t } = useI18n();
+
+type OutlineHeading = { id: string; text: string; level: number };
+
+const headings = ref<OutlineHeading[]>([]);
+const activeId = ref<string | null>(null);
+const titleScrolledOut = ref(false);
+const articleScrolledPast = ref(false);
+const open = ref(false);
+
+// Provided by BasePage: true once its top-chrome fade is showing, so the pill appears in
+// the same moment rather than a few pixels earlier.
+const chromeScrolled = inject<Ref<boolean>>("topChromeScrolled", ref(true));
+
+/** Reading progress from which an article counts as finished — nothing left to continue. */
+const RESUME_COMPLETE_PERCENT = 99;
+
+const hasUnfinishedSave = computed(
+    () => !!props.resumable && (props.savedProgress ?? 0) < RESUME_COMPLETE_PERCENT,
+);
+// Both the resume offer and the menu's "continue" entry exist as long as the save is unfinished.
+const showResumeOffer = computed(() => !!props.offerResume && hasUnfinishedSave.value);
+const showResumeOption = hasUnfinishedSave;
+
+// Undefined until a heading has actually scrolled past the top offset — before that the
+// reader is still in the article's lead-in, not in any chapter.
+const activeHeading = computed(() => headings.value.find((h) => h.id === activeId.value));
+
+// The pill stands in for the article title first, and only names the active chapter once the
+// reader has scrolled into one — so it doesn't jump to the first heading before reaching it.
+const triggerLabel = computed(() => activeHeading.value?.text ?? props.title ?? "");
+// The pill belongs to the article: it takes over from the title and steps aside again once
+// the whole body has gone past and the reader is in the related content below. The resume
+// offer is the exception — it shows from the start, before any scrolling.
+const visible = computed(
+    () =>
+        showResumeOffer.value ||
+        (chromeScrolled.value && titleScrolledOut.value && !articleScrolledPast.value),
+);
+
+// Starting to read is an answer to the offer: once the reader scrolls into the article it
+// gives way to the chapter dropdown.
+watch(chromeScrolled, (scrolled) => {
+    if (scrolled && showResumeOffer.value) emit("dismiss");
+});
+
+function slugify(text: string, taken: Set<string>) {
+    const base =
+        text
+            .toLowerCase()
+            .trim()
+            .replace(/[^a-z0-9]+/g, "-")
+            .replace(/(^-|-$)/g, "") || "section";
+    let slug = base;
+    let i = 2;
+    while (taken.has(slug)) slug = `${base}-${i++}`;
+    taken.add(slug);
+    return slug;
+}
+
+// Headings need a stable id to link/scroll to — CMS-authored HTML rarely carries one, so
+// one is generated (and reused if already present) the first time each article is scanned.
+function collectHeadings() {
+    const root = props.articleRoot;
+    if (!root) {
+        headings.value = [];
+        return;
+    }
+    const taken = new Set<string>();
+    const elements = Array.from(root.querySelectorAll("h2, h3")) as HTMLElement[];
+    headings.value = elements.map((el) => {
+        if (el.id) taken.add(el.id);
+        else el.id = `outline-${slugify(el.textContent ?? "", taken)}`;
+        return {
+            id: el.id,
+            text: el.textContent?.trim() ?? "",
+            level: el.tagName === "H3" ? 3 : 2,
+        };
+    });
+}
+
+watch(
+    () => [props.articleRoot, props.contentId] as const,
+    () => {
+        open.value = false;
+        nextTick(collectHeadings);
+    },
+    {
+        immediate: true,
+    },
+);
+
+function containerTop() {
+    const container = props.scrollContainer;
+    return container === window ? 0 : (container as HTMLElement).getBoundingClientRect().top;
+}
+
+// Active heading: the last one that's scrolled past a small offset from the container's
+// visible top, rAF-throttled like the other scroll-driven reads in this composable family.
+const ACTIVE_OFFSET = 80;
+
+function updateActiveHeading() {
+    if (!headings.value.length) return;
+    const top = containerTop();
+
+    let current: string | null = null;
+    for (const h of headings.value) {
+        const el = document.getElementById(h.id);
+        if (!el) continue;
+        if (el.getBoundingClientRect().top - top <= ACTIVE_OFFSET) current = h.id;
+        else break;
+    }
+    activeId.value = current;
+}
+
+function updateTitleScrolledOut() {
+    const title = props.titleEls?.find((el) => el && el.getClientRects().length > 0);
+    if (!title) {
+        titleScrolledOut.value = true;
+        return;
+    }
+    titleScrolledOut.value = title.getBoundingClientRect().bottom - containerTop() <= 0;
+}
+
+function updateArticleScrolledPast() {
+    const root = props.articleRoot;
+    articleScrolledPast.value =
+        !!root && root.getBoundingClientRect().bottom - containerTop() <= ACTIVE_OFFSET;
+}
+
+let rafPending = false;
+function scheduleUpdate() {
+    if (rafPending) return;
+    rafPending = true;
+    requestAnimationFrame(() => {
+        rafPending = false;
+        updateActiveHeading();
+        updateTitleScrolledOut();
+        updateArticleScrolledPast();
+    });
+}
+
+useEventListener(() => props.scrollContainer, "scroll", scheduleUpdate, { passive: true });
+watch(headings, () =>
+    nextTick(() => {
+        updateActiveHeading();
+        updateTitleScrolledOut();
+        updateArticleScrolledPast();
+    }),
+);
+watch(visible, (isVisible) => {
+    if (!isVisible) open.value = false;
+});
+
+const SCROLL_OFFSET = 96;
+
+function goToHeading(id: string) {
+    open.value = false;
+    const el = document.getElementById(id);
+    if (!el) return;
+    const container = props.scrollContainer;
+
+    if (container === window) {
+        window.scrollTo({
+            top: el.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET,
+            behavior: "smooth",
+        });
+        return;
+    }
+    const containerEl = container as HTMLElement;
+    const top =
+        el.getBoundingClientRect().top -
+        containerEl.getBoundingClientRect().top +
+        containerEl.scrollTop -
+        SCROLL_OFFSET;
+    containerEl.scrollTo({ top, behavior: "smooth" });
+}
+
+function onResume() {
+    open.value = false;
+    emit("resume");
+}
+</script>
+
+<template>
+    <span
+        v-if="showResumeOffer"
+        class="relative flex max-w-full items-center rounded-lg bg-zinc-100/70 shadow-md ring-1 ring-zinc-900/10 dark:bg-slate-700/70 dark:ring-white/10"
+        data-test="articleOutlineResume"
+    >
+        <button
+            type="button"
+            class="flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-1.5 overflow-hidden rounded-l-lg pb-2.5 pl-2.5 pr-1 pt-1.5 text-center text-sm text-zinc-800 hover:bg-zinc-200 dark:text-slate-50 dark:hover:bg-slate-600"
+            :aria-label="`${t('content.continueReading.action')} · ${savedProgress ?? 0}%`"
+            data-test="articleOutlineResumeButton"
+            @click="onResume"
+        >
+            <span class="truncate font-semibold">{{ t("content.continueReading.action") }}</span>
+            <span class="tabular-nums text-zinc-500 dark:text-slate-300">
+                {{ savedProgress ?? 0 }}%
+            </span>
+        </button>
+        <button
+            type="button"
+            class="mr-1 flex-shrink-0 cursor-pointer self-start rounded-md p-1.5 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-800 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-50"
+            :aria-label="t('content.continueReading.dismiss')"
+            data-test="articleOutlineDismiss"
+            @click="emit('dismiss')"
+        >
+            <XMarkIcon class="h-5 w-5" />
+        </button>
+        <span
+            class="pointer-events-none absolute inset-x-0 bottom-0 h-1 overflow-hidden rounded-b-lg bg-zinc-300 dark:bg-slate-600"
+            aria-hidden="true"
+            data-test="articleOutlineProgress"
+        >
+            <span
+                class="block h-full bg-yellow-500 transition-[width] duration-300 dark:bg-yellow-400"
+                :style="{ width: `${savedProgress ?? 0}%` }"
+            />
+        </span>
+    </span>
+    <span
+        v-else-if="visible && !headings.length"
+        class="relative flex max-w-full items-center overflow-hidden rounded-lg bg-zinc-100/70 px-3.5 pb-2.5 pt-1.5 text-sm text-zinc-800 shadow-md ring-1 ring-zinc-900/10 dark:bg-slate-700/70 dark:text-slate-50 dark:ring-white/10"
+        data-test="articleOutlineTitle"
+    >
+        <span class="truncate">{{ title }}</span>
+        <span
+            v-if="progress !== undefined"
+            class="pointer-events-none absolute inset-x-0 bottom-0 h-1 bg-zinc-300 dark:bg-slate-600"
+            aria-hidden="true"
+            data-test="articleOutlineProgress"
+        >
+            <span
+                class="block h-full bg-yellow-500 transition-[width] duration-300 dark:bg-yellow-400"
+                :style="{ width: `${progress}%` }"
+            />
+        </span>
+    </span>
+    <DropdownMenu
+        v-else-if="visible"
+        v-model:open="open"
+        placement="bottom-center"
+        panel-class="max-h-[60vh] w-max min-w-full max-w-[calc(100vw-2rem)] overflow-y-auto py-1"
+        class="min-w-0 max-w-full"
+        data-test="articleOutline"
+    >
+        <template #trigger>
+            <span
+                class="relative flex max-w-full items-center gap-1.5 overflow-hidden rounded-lg bg-zinc-100/70 px-3.5 pb-2.5 pt-1.5 text-sm text-zinc-800 shadow-md ring-1 ring-zinc-900/10 hover:bg-zinc-200 dark:bg-slate-700/70 dark:text-slate-50 dark:ring-white/10 dark:hover:bg-slate-600"
+                :aria-label="activeHeading ? `Current section: ${activeHeading.text}` : title"
+                data-test="articleOutlineTrigger"
+            >
+                <!-- The title and every heading are stacked invisibly in the same grid cell, so the
+                     pill is sized to the longest label and stays put as its content changes. -->
+                <span class="grid min-w-0 flex-1 text-left">
+                    <span
+                        class="invisible col-start-1 row-start-1 whitespace-nowrap"
+                        aria-hidden="true"
+                    >
+                        {{ title }}
+                    </span>
+                    <span
+                        v-for="h in headings"
+                        :key="h.id"
+                        class="invisible col-start-1 row-start-1 whitespace-nowrap"
+                        aria-hidden="true"
+                    >
+                        {{ h.text }}
+                    </span>
+                    <span class="col-start-1 row-start-1 truncate">{{ triggerLabel }}</span>
+                </span>
+                <ChevronDownIcon
+                    class="h-4 w-4 flex-shrink-0 transition-transform"
+                    :class="{ 'rotate-180': open }"
+                    aria-hidden="true"
+                />
+                <span
+                    v-if="progress !== undefined"
+                    class="pointer-events-none absolute inset-x-0 bottom-0 h-1 bg-zinc-300 dark:bg-slate-600"
+                    aria-hidden="true"
+                    data-test="articleOutlineProgress"
+                >
+                    <span
+                        class="block h-full bg-yellow-500 transition-[width] duration-300 dark:bg-yellow-400"
+                        :style="{ width: `${progress}%` }"
+                    />
+                </span>
+            </span>
+        </template>
+        <button
+            v-if="showResumeOption"
+            type="button"
+            role="menuitem"
+            class="mb-1 flex w-full cursor-pointer select-none items-center gap-2 border-b border-zinc-900/10 py-2 pl-4 pr-3 text-left text-sm font-medium leading-5 text-yellow-600 hover:bg-zinc-50 dark:border-white/10 dark:text-yellow-400 dark:hover:bg-slate-600"
+            data-test="articleOutlineResumeOption"
+            @click="onResume"
+        >
+            <ArrowUturnLeftIcon
+                class="h-4 w-4 flex-shrink-0"
+                aria-hidden="true"
+            />
+            <span class="flex-1">{{ t("content.continueReading.action") }}</span>
+            <span class="font-normal tabular-nums text-zinc-500 dark:text-slate-300">
+                {{ savedProgress ?? 0 }}%
+            </span>
+        </button>
+        <button
+            v-for="h in headings"
+            :key="h.id"
+            type="button"
+            role="menuitem"
+            class="flex w-full cursor-pointer select-none items-center gap-2 py-2 pr-3 text-left text-sm leading-5 hover:bg-zinc-50 dark:hover:bg-slate-600"
+            :class="[
+                h.level === 3 ? 'pl-8' : 'pl-4',
+                activeId === h.id
+                    ? 'font-medium text-yellow-600 dark:text-yellow-400'
+                    : 'text-zinc-800 dark:text-white',
+            ]"
+            data-test="articleOutlineOption"
+            @click="goToHeading(h.id)"
+        >
+            <span class="flex-1">{{ h.text }}</span>
+            <CheckCircleIcon
+                v-if="activeId === h.id"
+                class="h-5 w-5 flex-shrink-0 text-yellow-500"
+                aria-hidden="true"
+            />
+        </button>
+    </DropdownMenu>
+</template>
diff --git a/app/src/pages/SingleContent/SingleContent.vue b/app/src/pages/SingleContent/SingleContent.vue
index 4f05e3f2cf..5cf8d1c796 100644
--- a/app/src/pages/SingleContent/SingleContent.vue
+++ b/app/src/pages/SingleContent/SingleContent.vue
@@ -65,9 +65,9 @@ import { markLanguageSwitch } from "@/util/isLangSwitch";
 import LoadingBar from "@/components/LoadingBar.vue";
 import { activeImageCollection } from "@/components/images/LImageProvider.vue";
 import VideoPlayer from "@/components/content/VideoPlayer.vue";
-import ContinueReadingPrompt from "@/components/content/ContinueReadingPrompt.vue";
 import LHighlightable from "@/components/common/LHighlightable.vue";
 import DropdownMenu from "@/components/common/DropdownMenu.vue";
+import ArticleOutline from "./ArticleOutline.vue";
 import { markPageReady } from "@/util/renderState";
 import { computeEstimatedReadingMinutes, resolveReadingSpeedWpm } from "@/util/readingTime";
 import {
@@ -398,6 +398,10 @@ if (!isSSG) {
     );
 }
 
+// Only translations whose Language doc is actually loaded get a dropdown entry — never
+// fabricate a languageCode from the language id. `cmsLanguages` (prerender) and the
+// `localLanguages` fetch (client) cover every referenced language, so an unloaded one is a
+// brief pre-load gap, not a permanent drop.
 // All known Language docs by id — `cmsLanguages` (global, prerender-seeded) plus
 // `localLanguages` (client supplement for a translation whose Language doc isn't in the
 // public set). Used both for the dropdown (below) and for looking up the current article's
@@ -406,10 +410,6 @@ const languagesById = computed(
     () => new Map([...cmsLanguages.value, ...localLanguages.value].map((l) => [l._id, l])),
 );
 
-// Only translations whose Language doc is actually loaded get a dropdown entry — never
-// fabricate a languageCode from the language id. `cmsLanguages` (prerender) and the
-// `localLanguages` fetch (client) cover every referenced language, so an unloaded one is a
-// brief pre-load gap, not a permanent drop.
 const languages = computed<LanguageDto[]>(() =>
     availableTranslations.value
         .map((t) => languagesById.value.get(t.language))
@@ -562,6 +562,9 @@ const selectedCategory = computed(() => {
 });
 
 const articleProseRef = ref<HTMLElement | null>(null);
+const articleRef = ref<HTMLElement | null>(null);
+const desktopTitleRef = ref<HTMLElement | null>(null);
+const mobileTitleRef = ref<HTMLElement | null>(null);
 const scrollContainer = ref<HTMLElement | Window>(window);
 
 const readingTrackerEnabled = computed(() => !!content.value?._id && !!content.value?.text);
@@ -586,24 +589,30 @@ const readingTime = computed<number>(() =>
     computeEstimatedReadingMinutes(content.value?.wordCount ?? 0, averageReadingSpeed.value),
 );
 
-const { hasResumableProgress, savedProgressPercent, restoreScrollPosition } =
-    useReadingProgressTracker({
-        contentId,
-        articleRoot: articleProseRef,
-        scrollContainer,
-        enabled: readingTrackerEnabled,
-        averageReadingSpeed,
-        disableSaving: computed(() => readingTime.value <= 1),
-        onSessionEnd: (endedContentId, finalDepthPercent) => {
-            const endedTags = contentTagsById.get(endedContentId);
-            contentTagsById.delete(endedContentId);
-            const weight = readingDepthWeight(finalDepthPercent, affinityConfig.value);
-            if (weight > 0) recordAffinity(endedTags, weight);
-        },
-    });
+const {
+    hasResumableProgress,
+    readingProgressPercent,
+    scrollProgressPercent,
+    restoreScrollPosition,
+} = useReadingProgressTracker({
+    contentId,
+    articleRoot: articleProseRef,
+    progressRoot: articleRef,
+    scrollContainer,
+    enabled: readingTrackerEnabled,
+    averageReadingSpeed,
+    disableSaving: computed(() => readingTime.value <= 1),
+    onSessionEnd: (endedContentId, finalDepthPercent) => {
+        const endedTags = contentTagsById.get(endedContentId);
+        contentTagsById.delete(endedContentId);
+        const weight = readingDepthWeight(finalDepthPercent, affinityConfig.value);
+        if (weight > 0) recordAffinity(endedTags, weight);
+    },
+});
 
-/** Hide the resume prompt for this visit after the user continues or dismisses. */
+/** Hide the resume offer for this visit after the user continues, dismisses, or scrolls. */
 const continuePromptHandled = ref(false);
+const resumeOffered = computed(() => hasResumableProgress.value && !continuePromptHandled.value);
 
 watch(contentId, () => {
     continuePromptHandled.value = false;
@@ -675,7 +684,28 @@ watch([isLoading, content, is404], async () => {
     <BasePage
         :showBackButton="true"
         desktopTopBar
+        :reserveTopBarCenter="resumeOffered && readingProgressPercent < 99"
     >
+        <!-- Reading pill: offers to resume on open, then stands in for the title as a chapter
+             dropdown once it scrolls out of view. -->
+        <template
+            #topBarCenter
+            v-if="!is404 && content && readingTrackerEnabled"
+        >
+            <ArticleOutline
+                :articleRoot="articleProseRef"
+                :scrollContainer="scrollContainer"
+                :contentId="content._id"
+                :title="content.title"
+                :progress="scrollProgressPercent"
+                :savedProgress="readingProgressPercent"
+                :resumable="hasResumableProgress"
+                :offerResume="resumeOffered"
+                :titleEls="[desktopTitleRef, mobileTitleRef]"
+                @resume="onContinueReading"
+                @dismiss="continuePromptHandled = true"
+            />
+        </template>
         <template
             #quickControls
             v-if="!is404"
@@ -753,234 +783,251 @@ watch([isLoading, content, is404], async () => {
             :class="{ 'mb-6': !tags.length }"
         >
             <div
-                class="flex flex-grow justify-center"
+                class="flex flex-grow justify-center lg:grid lg:grid-cols-[1fr_minmax(0,48rem)_1fr] lg:gap-x-8"
                 :class="{ 'items-center': isLoading && !content }"
             >
                 <LoadingBar
                     v-if="isLoading && !content"
                     :label="t('singlecontent.loading')"
+                    class="lg:col-start-2"
                 />
-                <article
-                    class="w-full lg:w-3/4 lg:max-w-3xl"
-                    v-else-if="content"
-                >
-                    <!-- Desktop: title row originates at the top of the page, level with the pinned
+
+                <template v-else-if="content">
+                    <article
+                        ref="articleRef"
+                        class="w-full lg:col-start-2"
+                    >
+                        <!-- Desktop: title row originates at the top of the page, level with the pinned
                          topbar chrome, and scrolls away with the content like normal. -->
-                    <div class="hidden h-9 items-center justify-center gap-2 lg:flex">
-                        <h1
-                            class="truncate text-xl tracking-tight text-zinc-900 dark:text-slate-50 lg:text-2xl"
+                        <div
+                            ref="desktopTitleRef"
+                            class="hidden h-9 items-center justify-center gap-2 lg:flex"
                         >
-                            {{ content.title }}
-                        </h1>
-                        <button
-                            v-if="canEdit() && cmsUrl"
-                            @click="openCmsEditor"
-                            class="flex flex-shrink-0 cursor-pointer items-center text-zinc-400 hover:text-yellow-500 dark:hover:text-yellow-400"
-                            data-test="editButton"
+                            <h1
+                                class="truncate text-xl tracking-tight text-zinc-900 dark:text-slate-50 lg:text-2xl"
+                            >
+                                {{ content.title }}
+                            </h1>
+                            <button
+                                v-if="canEdit() && cmsUrl"
+                                @click="openCmsEditor"
+                                class="flex flex-shrink-0 cursor-pointer items-center text-zinc-400 hover:text-yellow-500 dark:hover:text-yellow-400"
+                                data-test="editButton"
+                            >
+                                <PencilIcon class="h-5 w-5" />
+                            </button>
+                        </div>
+
+                        <div
+                            ref="mobileTitleRef"
+                            class="flex w-full flex-col items-center lg:hidden"
                         >
-                            <PencilIcon class="h-5 w-5" />
-                        </button>
-                    </div>
-
-                    <div class="flex w-full flex-col items-center lg:hidden">
-                        <div class="mt-1 flex flex-col gap-4 text-center md:mt-4">
-                            <div class="flex flex-row items-start justify-center gap-2">
-                                <h1
-                                    class="text-xl tracking-tight text-zinc-900 dark:text-slate-50 lg:text-2xl"
-                                >
-                                    {{ content.title }}
-                                </h1>
-                                <button
-                                    v-if="canEdit() && cmsUrl"
-                                    @click="openCmsEditor"
-                                    class="mt-1.5 flex cursor-pointer items-center text-zinc-400 hover:text-yellow-500 dark:hover:text-yellow-400"
-                                    data-test="editButton"
-                                >
-                                    <PencilIcon class="h-5 w-5" />
-                                </button>
+                            <div class="mt-1 flex flex-col gap-4 text-center md:mt-4">
+                                <div class="flex flex-row items-start justify-center gap-2">
+                                    <h1
+                                        class="text-xl tracking-tight text-zinc-900 dark:text-slate-50 lg:text-2xl"
+                                    >
+                                        {{ content.title }}
+                                    </h1>
+                                    <button
+                                        v-if="canEdit() && cmsUrl"
+                                        @click="openCmsEditor"
+                                        class="mt-1.5 flex cursor-pointer items-center text-zinc-400 hover:text-yellow-500 dark:hover:text-yellow-400"
+                                        data-test="editButton"
+                                    >
+                                        <PencilIcon class="h-5 w-5" />
+                                    </button>
+                                </div>
                             </div>
                         </div>
-                    </div>
 
-                    <div class="mt-5 lg:mt-2">
-                        <IgnorePagePadding
-                            :mobileOnly="true"
-                            :ignoreTop="true"
-                        >
-                            <VideoPlayer
-                                v-if="content && content.video"
-                                :key="content._id"
-                                :content="content"
-                                :language="selectedLanguageCode"
-                            />
-                            <div
-                                v-else-if="content.parentId || content.parentImageData"
-                                class="relative cursor-pointer overflow-hidden"
-                                @click="
-                                    () => {
-                                        if (content)
-                                            currentImageIndex = activeImageCollection(content);
-                                        enableZoom = true;
-                                    }
-                                "
+                        <div class="mt-5 lg:mt-2">
+                            <IgnorePagePadding
+                                :mobileOnly="true"
+                                :ignoreTop="true"
                             >
-                                <LImage
-                                    :image="content.parentImageData"
-                                    :content-parent-id="content.parentId"
-                                    :parent-image-bucket-id="content.parentImageBucketId"
-                                    aspectRatio="video"
-                                    size="post"
+                                <VideoPlayer
+                                    v-if="content && content.video"
+                                    :key="content._id"
+                                    :content="content"
+                                    :language="selectedLanguageCode"
                                 />
                                 <div
-                                    v-if="
-                                        (content.parentImageData?.fileCollections?.length ?? 0) > 1
-                                    "
-                                    class="absolute bottom-2 right-2 flex items-center gap-1"
-                                >
-                                    <DocumentDuplicateIcon class="h-10 w-10 text-zinc-400" />
-                                </div>
-
-                                <!-- Small Play Audio Button (only show if content has audio but no video) -->
-                                <button
-                                    v-if="hasAudioFiles"
-                                    @click.stop="
-                                        (event) => {
-                                            playAudio();
-                                            // Prevent focus staying on button
-                                            (event.target as HTMLElement).blur();
+                                    v-else-if="content.parentId || content.parentImageData"
+                                    class="relative cursor-pointer overflow-hidden"
+                                    @click="
+                                        () => {
+                                            if (content)
+                                                currentImageIndex = activeImageCollection(content);
+                                            enableZoom = true;
                                         }
                                     "
-                                    class="absolute bottom-2.5 left-3.5 flex items-center justify-center gap-1.5 rounded-full bg-black/60 py-1 pl-2 pr-3.5 text-white shadow-lg backdrop-blur-sm transition-all duration-200 hover:scale-110 hover:bg-black/80 focus:outline-none focus:ring-2 focus:ring-yellow-400"
-                                    title="Play Audio"
                                 >
-                                    <SpeakerWaveIcon class="h-5 w-5" />
-                                    {{ t("singlecontent.listen") }}
-                                </button>
-                            </div>
-                        </IgnorePagePadding>
-                    </div>
-
-                    <div
-                        v-if="content.summary"
-                        class="mt-6 flex justify-center"
-                    >
-                        <p
-                            class="max-w-2xl text-center text-lg leading-relaxed text-zinc-600 dark:text-slate-300"
-                        >
-                            {{ content.summary }}
-                        </p>
-                    </div>
+                                    <LImage
+                                        :image="content.parentImageData"
+                                        :content-parent-id="content.parentId"
+                                        :parent-image-bucket-id="content.parentImageBucketId"
+                                        aspectRatio="video"
+                                        size="post"
+                                    />
+                                    <div
+                                        v-if="
+                                            (content.parentImageData?.fileCollections?.length ??
+                                                0) > 1
+                                        "
+                                        class="absolute bottom-2 right-2 flex items-center gap-1"
+                                    >
+                                        <DocumentDuplicateIcon class="h-10 w-10 text-zinc-400" />
+                                    </div>
+
+                                    <!-- Small Play Audio Button (only show if content has audio but no video) -->
+                                    <button
+                                        v-if="hasAudioFiles"
+                                        @click.stop="
+                                            (event) => {
+                                                playAudio();
+                                                // Prevent focus staying on button
+                                                (event.target as HTMLElement).blur();
+                                            }
+                                        "
+                                        class="absolute bottom-2.5 left-3.5 flex items-center justify-center gap-1.5 rounded-full bg-black/60 py-1 pl-2 pr-3.5 text-white shadow-lg transition-all duration-200 hover:scale-110 hover:bg-black/80 focus:outline-none focus:ring-2 focus:ring-yellow-400"
+                                        title="Play Audio"
+                                    >
+                                        <SpeakerWaveIcon class="h-5 w-5" />
+                                        {{ t("singlecontent.listen") }}
+                                    </button>
+                                </div>
+                            </IgnorePagePadding>
+                        </div>
 
-                    <div class="mt-6 flex flex-col items-center gap-4">
                         <div
-                            class="flex w-fit flex-wrap items-center justify-center gap-y-2 border-t-2 border-yellow-500/25 px-8 pt-6 text-sm text-zinc-500 dark:text-slate-400"
+                            v-if="content.summary"
+                            class="mt-6 flex justify-center"
                         >
-                            <!-- Author -->
-                            <div
-                                v-if="content.author"
-                                class="flex items-center after:px-2 after:font-normal after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700"
+                            <p
+                                class="max-w-2xl text-center text-lg leading-relaxed text-zinc-600 dark:text-slate-300"
                             >
-                                By {{ content.author }}
-                            </div>
+                                {{ content.summary }}
+                            </p>
+                        </div>
 
-                            <!-- Reading Time -->
+                        <div class="mt-6 flex flex-col items-center gap-4">
                             <div
-                                v-if="readingTime && readingTime > 1"
-                                class="flex items-center gap-1.5 after:px-2 after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700"
+                                class="flex w-fit flex-wrap items-center justify-center gap-y-2 border-t-2 border-yellow-500/25 px-8 pt-6 text-sm text-zinc-500 dark:text-slate-400"
                             >
-                                <ClockIcon class="h-4 w-4 flex-shrink-0" />
-                                <span>{{ readingTime }} min</span>
-                            </div>
+                                <!-- Author -->
+                                <div
+                                    v-if="content.author"
+                                    class="flex items-center after:px-2 after:font-normal after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700"
+                                >
+                                    By {{ content.author }}
+                                </div>
 
-                            <!-- Publish Date -->
-                            <div
-                                v-if="content.publishDate && content.parentPublishDateVisible"
-                                class="flex items-center text-center after:px-2 after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700 sm:text-left"
-                            >
-                                {{ formatPublishDate(content.publishDate) }}
-                            </div>
+                                <!-- Reading Time -->
+                                <div
+                                    v-if="readingTime && readingTime > 1"
+                                    class="flex items-center gap-1.5 after:px-2 after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700"
+                                >
+                                    <ClockIcon class="h-4 w-4 flex-shrink-0" />
+                                    <span>{{ readingTime }} min</span>
+                                </div>
+
+                                <!-- Publish Date -->
+                                <div
+                                    v-if="content.publishDate && content.parentPublishDateVisible"
+                                    class="flex items-center text-center after:px-2 after:text-zinc-300 after:content-['•'] last:after:hidden dark:after:text-slate-700 sm:text-left"
+                                >
+                                    {{ formatPublishDate(content.publishDate) }}
+                                </div>
 
-                            <!-- Fallback language: shown when the article isn't available in a
+                                <!-- Fallback language: shown when the article isn't available in a
                                  language the user chose (it fell through to the default / another).
                                  Renders nothing for chosen-language content, so no stray separator. -->
-                            <FallbackLanguageBadge :content="content" />
+                                <FallbackLanguageBadge :content="content" />
+                            </div>
+
+                            <!-- Bookmark Button -->
+                            <button
+                                v-if="
+                                    !(
+                                        content.parentPostType &&
+                                        content.parentPostType == PostType.Page
+                                    )
+                                "
+                                @click="toggleBookmark"
+                                data-test="bookmark"
+                                class="flex items-center transition-colors"
+                            >
+                                <component
+                                    :is="isBookmarked ? BookmarkIconSolid : BookmarkIconOutline"
+                                    class="h-5 w-5"
+                                    :class="{
+                                        'text-yellow-500': isBookmarked,
+                                        'text-zinc-400 hover:text-zinc-600 dark:text-slate-500 dark:hover:text-slate-200':
+                                            !isBookmarked,
+                                    }"
+                                />
+                            </button>
                         </div>
 
-                        <!-- Bookmark Button -->
-                        <button
-                            v-if="
-                                !(content.parentPostType && content.parentPostType == PostType.Page)
-                            "
-                            @click="toggleBookmark"
-                            data-test="bookmark"
-                            class="flex items-center transition-colors"
+                        <div
+                            class="mt-6 flex flex-wrap justify-center gap-2"
+                            v-if="categoryTags.length"
                         >
-                            <component
-                                :is="isBookmarked ? BookmarkIconSolid : BookmarkIconOutline"
-                                class="h-5 w-5"
-                                :class="{
-                                    'text-yellow-500': isBookmarked,
-                                    'text-zinc-400 hover:text-zinc-600 dark:text-slate-500 dark:hover:text-slate-200':
-                                        !isBookmarked,
-                                }"
-                            />
-                        </button>
-                    </div>
+                            <span
+                                v-for="tag in categoryTags"
+                                :key="tag._id"
+                                @click="
+                                    selectedCategoryId = tag.parentId;
+                                    showCategoryModal = true;
+                                "
+                                class="flex cursor-pointer items-center justify-center rounded-lg border border-yellow-500/25 bg-yellow-500/10 py-1 pl-1 pr-2 text-sm hover:bg-yellow-100/25 dark:bg-slate-700 dark:hover:bg-yellow-100/25"
+                            >
+                                <TagIcon class="mr-2 h-5 w-5 text-yellow-500/75" />
+                                <span class="line-clamp-1">{{ tag.title }}</span>
+                            </span>
+                        </div>
 
-                    <div
-                        class="mt-6 flex flex-wrap justify-center gap-2"
-                        v-if="categoryTags.length"
-                    >
-                        <span
-                            v-for="tag in categoryTags"
-                            :key="tag._id"
-                            @click="
-                                selectedCategoryId = tag.parentId;
-                                showCategoryModal = true;
+                        <!-- Render content with highlighting support -->
+                        <LHighlightable
+                            v-if="content.text"
+                            :content-id="content._id"
+                            @highlighted="
+                                recordAffinity(
+                                    content?.parentTags,
+                                    affinityConfig.eventWeight.highlight,
+                                )
+                            "
+                            @highlight-removed="
+                                recordAffinity(
+                                    content?.parentTags,
+                                    affinityConfig.eventWeight.highlightRemoved,
+                                )
                             "
-                            class="flex cursor-pointer items-center justify-center rounded-lg border border-yellow-500/25 bg-yellow-500/10 py-1 pl-1 pr-2 text-sm hover:bg-yellow-100/25 dark:bg-slate-700 dark:hover:bg-yellow-100/25"
+                            @highlights-changed="notifyHighlightsChanged"
                         >
-                            <TagIcon class="mr-2 h-5 w-5 text-yellow-500/75" />
-                            <span class="line-clamp-1">{{ tag.title }}</span>
-                        </span>
-                    </div>
-
-                    <!-- Render content with highlighting support -->
-                    <LHighlightable
-                        v-if="content.text"
-                        :content-id="content._id"
-                        @highlighted="
-                            recordAffinity(
-                                content?.parentTags,
-                                affinityConfig.eventWeight.highlight,
-                            )
-                        "
-                        @highlight-removed="
-                            recordAffinity(
-                                content?.parentTags,
-                                affinityConfig.eventWeight.highlightRemoved,
-                            )
-                        "
-                        @highlights-changed="notifyHighlightsChanged"
-                    >
+                            <div
+                                ref="articleProseRef"
+                                :data-ssr-article-text="isPrerender() ? true : undefined"
+                                v-html="text"
+                                class="prose prose-zinc mt-8 max-w-full dark:prose-invert lg:prose-lg prose-headings:font-bold prose-a:text-yellow-600 dark:prose-a:text-yellow-400"
+                                :class="{
+                                    'border-t border-zinc-100 pt-8 dark:border-slate-800':
+                                        categoryTags.length == 0,
+                                }"
+                            ></div> </LHighlightable
+                        ><br />
                         <div
-                            ref="articleProseRef"
-                            :data-ssr-article-text="isPrerender() ? true : undefined"
-                            v-html="text"
-                            class="prose prose-zinc mt-8 max-w-full dark:prose-invert lg:prose-lg prose-headings:font-bold prose-a:text-yellow-600 dark:prose-a:text-yellow-400"
-                            :class="{
-                                'border-t border-zinc-100 pt-8 dark:border-slate-800':
-                                    categoryTags.length == 0,
-                            }"
-                        ></div> </LHighlightable
-                    ><br />
-                    <div
-                        v-if="content.copyright"
-                        class="text-xs text-zinc-500 dark:text-slate-300"
-                    >
-                        {{ content.copyright }}
-                    </div>
-                </article>
+                            v-if="content.copyright"
+                            class="text-xs text-zinc-500 dark:text-slate-300"
+                        >
+                            {{ content.copyright }}
+                        </div>
+                    </article>
+
+                    <!-- Right gutter: kept empty, mirrors the left one so the article stays centred. -->
+                    <div class="hidden lg:block" />
+                </template>
             </div>
 
             <IgnorePagePadding v-if="content && tags.length">
@@ -997,14 +1044,6 @@ watch([isLoading, content, is404], async () => {
             <IgnorePagePadding ignoreBottom>
                 <CopyrightBanner />
             </IgnorePagePadding>
-
-            <ContinueReadingPrompt
-                v-if="readingTrackerEnabled"
-                :visible="hasResumableProgress && !continuePromptHandled"
-                :progress-percent="savedProgressPercent"
-                @continue="onContinueReading"
-                @dismiss="continuePromptHandled = true"
-            />
         </div>
     </BasePage>
 
diff --git a/app/src/pages/SingleContent/__tests__/ArticleOutline.spec.ts b/app/src/pages/SingleContent/__tests__/ArticleOutline.spec.ts
new file mode 100644
index 0000000000..bd6b61781a
--- /dev/null
+++ b/app/src/pages/SingleContent/__tests__/ArticleOutline.spec.ts
@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick, ref } from "vue";
+import ArticleOutline from "../ArticleOutline.vue";
+
+vi.mock("vue-i18n", () => ({
+    useI18n: () => ({ t: (key: string) => key }),
+}));
+
+// jsdom has no layout: a title with a client rect that sits above the container top counts
+// as scrolled out, so the pill (dropdown or title fallback) is shown.
+function makeTitleEl(scrolledOut: boolean) {
+    const el = document.createElement("div");
+    el.getClientRects = () => [{}] as unknown as DOMRectList;
+    el.getBoundingClientRect = () => ({ bottom: scrolledOut ? -10 : 40, top: 0 }) as DOMRect;
+    return el;
+}
+
+function makeRoot(headingTexts: string[], scrolledPast = false) {
+    const root = document.createElement("div");
+    root.getBoundingClientRect = () => ({ top: 0, bottom: scrolledPast ? -10 : 1000 }) as DOMRect;
+    for (const text of headingTexts) {
+        const h = document.createElement("h2");
+        h.textContent = text;
+        root.appendChild(h);
+    }
+    document.body.appendChild(root);
+    return root;
+}
+
+describe("ArticleOutline", () => {
+    beforeEach(() => {
+        vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+            cb(0);
+            return 0;
+        });
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+        document.body.innerHTML = "";
+    });
+
+    async function mountOutline(
+        headingTexts: string[],
+        scrolledOut: boolean,
+        options: {
+            articleScrolledPast?: boolean;
+            resumable?: boolean;
+            offerResume?: boolean;
+            chromeScrolled?: ReturnType<typeof ref<boolean>>;
+        } = {},
+    ) {
+        const wrapper = mount(ArticleOutline, {
+            props: {
+                articleRoot: makeRoot(headingTexts, options.articleScrolledPast),
+                scrollContainer: window,
+                contentId: "c1",
+                title: "The Long Walk",
+                progress: 17,
+                savedProgress: 42,
+                resumable: options.resumable,
+                offerResume: options.offerResume,
+                titleEls: [makeTitleEl(scrolledOut)],
+            },
+            global: {
+                provide: options.chromeScrolled
+                    ? { topChromeScrolled: options.chromeScrolled }
+                    : {},
+            },
+        });
+        await nextTick();
+        await nextTick();
+        return wrapper;
+    }
+
+    it("stays hidden while the title is still in view", async () => {
+        const wrapper = await mountOutline(["Chapter one"], false);
+        expect(wrapper.find('[data-test="articleOutline"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="articleOutlineTitle"]').exists()).toBe(false);
+    });
+
+    it("shows the chapter dropdown once the title has scrolled out", async () => {
+        const wrapper = await mountOutline(["Chapter one", "Chapter two"], true);
+        // jsdom gives every heading the same (zero) position, so the last one reads as
+        // active; only the pill's presence and the option list are meaningful here.
+        expect(wrapper.find('[data-test="articleOutlineTrigger"]').text()).toMatch(/Chapter/);
+        expect(wrapper.findAll('[data-test="articleOutlineOption"]')).toHaveLength(2);
+        expect(wrapper.find('[data-test="articleOutlineResumeOption"]').exists()).toBe(false);
+    });
+
+    it("draws the scroll position as a track on the chapter pill", async () => {
+        const wrapper = await mountOutline(["Chapter one"], true);
+        expect(
+            wrapper.find('[data-test="articleOutlineProgress"] > span').attributes("style"),
+        ).toContain("width: 17%");
+    });
+
+    it("draws the saved reading progress on the resume offer", async () => {
+        const wrapper = await mountOutline(["Chapter one"], false, {
+            resumable: true,
+            offerResume: true,
+        });
+        expect(
+            wrapper.find('[data-test="articleOutlineProgress"] > span').attributes("style"),
+        ).toContain("width: 42%");
+    });
+
+    it("steps aside once the whole article body has scrolled past", async () => {
+        const wrapper = await mountOutline(["Chapter one"], true, { articleScrolledPast: true });
+        expect(wrapper.find('[data-test="articleOutline"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="articleOutlineTitle"]').exists()).toBe(false);
+    });
+
+    it("falls back to the article title when there are no headings", async () => {
+        const wrapper = await mountOutline([], true);
+        expect(wrapper.find('[data-test="articleOutline"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="articleOutlineTitle"]').text()).toBe("The Long Walk");
+    });
+
+    it("offers to resume before any scrolling and emits resume / dismiss", async () => {
+        const wrapper = await mountOutline(["Chapter one"], false, {
+            resumable: true,
+            offerResume: true,
+        });
+        const resume = wrapper.find('[data-test="articleOutlineResume"]');
+        expect(resume.exists()).toBe(true);
+        expect(resume.text()).toContain("content.continueReading.action");
+        expect(resume.text()).toContain("42%");
+        expect(wrapper.find('[data-test="articleOutline"]').exists()).toBe(false);
+
+        await wrapper.find('[data-test="articleOutlineResumeButton"]').trigger("click");
+        expect(wrapper.emitted("resume")).toHaveLength(1);
+
+        await wrapper.find('[data-test="articleOutlineDismiss"]').trigger("click");
+        expect(wrapper.emitted("dismiss")).toHaveLength(1);
+    });
+
+    it("dismisses the resume offer once the reader scrolls into the article", async () => {
+        const chromeScrolled = ref(false);
+        const wrapper = await mountOutline(["Chapter one"], false, {
+            resumable: true,
+            offerResume: true,
+            chromeScrolled,
+        });
+        expect(wrapper.emitted("dismiss")).toBeUndefined();
+        chromeScrolled.value = true;
+        await nextTick();
+        expect(wrapper.emitted("dismiss")).toHaveLength(1);
+    });
+
+    it("keeps a continue entry in the chapter list while the read is unfinished", async () => {
+        const wrapper = await mountOutline(["Chapter one"], true, { resumable: true });
+        const row = wrapper.find('[data-test="articleOutlineResumeOption"]');
+        expect(row.text()).toContain("content.continueReading.action");
+        await row.trigger("click");
+        expect(wrapper.emitted("resume")).toHaveLength(1);
+    });
+
+    it("treats a 99%+ read as finished: no offer, no continue entry", async () => {
+        const wrapper = await mountOutline(["Chapter one"], true, {
+            resumable: true,
+            offerResume: true,
+        });
+        await wrapper.setProps({ savedProgress: 99, progress: 10 });
+        expect(wrapper.find('[data-test="articleOutlineResume"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="articleOutlineResumeOption"]').exists()).toBe(false);
+        expect(wrapper.find('[data-test="articleOutlineTrigger"]').exists()).toBe(true);
+    });
+
+    it("keeps the continue entry even after scrolling past the saved position", async () => {
+        const wrapper = await mountOutline(["Chapter one"], true, { resumable: true });
+        await wrapper.setProps({ progress: 90 });
+        expect(wrapper.find('[data-test="articleOutlineResumeOption"]').exists()).toBe(true);
+    });
+});
diff --git a/app/src/pages/SingleContent/__tests__/SingleContent.ssr.spec.ts b/app/src/pages/SingleContent/__tests__/SingleContent.ssr.spec.ts
index 71000d0bb3..e4355d47e3 100644
--- a/app/src/pages/SingleContent/__tests__/SingleContent.ssr.spec.ts
+++ b/app/src/pages/SingleContent/__tests__/SingleContent.ssr.spec.ts
@@ -41,8 +41,7 @@ vi.mock("vue-router", () => ({
         props: ["to"],
         setup(props, { slots }) {
             return () => {
-                const slug =
-                    (props.to as { params?: { slug?: string } })?.params?.slug ?? "";
+                const slug = (props.to as { params?: { slug?: string } })?.params?.slug ?? "";
                 return h("a", { href: `/${slug}` }, slots.default?.());
             };
         },
@@ -81,6 +80,8 @@ vi.mock("@/composables/useReadingProgressTracker", () => ({
     useReadingProgressTracker: () => ({
         hasResumableProgress: ref(false),
         savedProgressPercent: ref(0),
+        readingProgressPercent: ref(0),
+        scrollProgressPercent: ref(0),
         restoreScrollPosition: vi.fn(),
     }),
     resolveArticleScrollContainer: () => (typeof window !== "undefined" ? window : {}),
@@ -117,7 +118,10 @@ function passthrough(name: string) {
     return defineComponent({
         name,
         inheritAttrs: false,
-        setup: (_, { slots }) => () => h("div", slots.default?.()),
+        setup:
+            (_, { slots }) =>
+            () =>
+                h("div", slots.default?.()),
     });
 }
 
@@ -133,12 +137,18 @@ vi.mock("@/components/BasePage.vue", () => ({
     default: defineComponent({
         name: "BasePage",
         inheritAttrs: false,
-        setup: (_, { slots }) => () =>
-            h("div", [slots.quickControls?.(), slots.default?.()]),
+        setup:
+            (_, { slots }) =>
+            () =>
+                h("div", [slots.quickControls?.(), slots.default?.()]),
     }),
 }));
-vi.mock("@/components/IgnorePagePadding.vue", () => ({ default: passthrough("IgnorePagePadding") }));
-vi.mock("@/components/common/LHighlightable.vue", () => ({ default: passthrough("LHighlightable") }));
+vi.mock("@/components/IgnorePagePadding.vue", () => ({
+    default: passthrough("IgnorePagePadding"),
+}));
+vi.mock("@/components/common/LHighlightable.vue", () => ({
+    default: passthrough("LHighlightable"),
+}));
 vi.mock("@/components/common/DropdownMenu.vue", () => ({ default: passthrough("DropdownMenu") }));
 vi.mock("@/components/images/LImage.vue", () => ({ default: voidStub("LImage") }));
 vi.mock("@/components/images/ImageModal.vue", () => ({ default: voidStub("ImageModal") }));
@@ -146,13 +156,12 @@ vi.mock("@/components/images/LImageProvider.vue", () => ({
     activeImageCollection: () => 0,
 }));
 vi.mock("@/components/content/VideoPlayer.vue", () => ({ default: voidStub("VideoPlayer") }));
-vi.mock("@/components/content/CopyrightBanner.vue", () => ({ default: voidStub("CopyrightBanner") }));
+vi.mock("@/components/content/CopyrightBanner.vue", () => ({
+    default: voidStub("CopyrightBanner"),
+}));
 vi.mock("@/components/content/FallbackLanguageBadge.vue", () => ({
     default: voidStub("FallbackLanguageBadge"),
 }));
-vi.mock("@/components/content/ContinueReadingPrompt.vue", () => ({
-    default: voidStub("ContinueReadingPrompt"),
-}));
 vi.mock("@/components/form/LModal.vue", () => ({ default: passthrough("LModal") }));
 vi.mock("@/components/tags/VerticalTagViewer.vue", () => ({
     default: voidStub("VerticalTagViewer"),
@@ -254,9 +263,7 @@ describe("SingleContent — server-render (prerender) regression", () => {
         queryRemoteMock.mockReset().mockResolvedValue([]);
         writeResponseCacheMock.mockReset();
         (import.meta.env as { SSR: boolean }).SSR = true;
-        (
-            import.meta.env as { VITE_BUILD_TARGET?: string }
-        ).VITE_BUILD_TARGET = "web";
+        (import.meta.env as { VITE_BUILD_TARGET?: string }).VITE_BUILD_TARGET = "web";
     });
 
     afterEach(() => {
@@ -266,9 +273,7 @@ describe("SingleContent — server-render (prerender) regression", () => {
         // stale resolved promise can't interfere with a later test's chain ordering.
         releaseSsrChain(ROUTE_PATH);
         (import.meta.env as { SSR: boolean }).SSR = false;
-        (
-            import.meta.env as { VITE_BUILD_TARGET?: string }
-        ).VITE_BUILD_TARGET = undefined;
+        (import.meta.env as { VITE_BUILD_TARGET?: string }).VITE_BUILD_TARGET = undefined;
     });
 
     it("renders chips, the Read more heading, and a related card when the full chain resolves", async () => {
@@ -305,4 +310,4 @@ describe("SingleContent — server-render (prerender) regression", () => {
         expect(issues.length).toBeGreaterThan(0);
         expect(issues.some((i) => i.kind === "provably-empty")).toBe(true);
     });
-});
\ No newline at end of file
+});
diff --git a/app/src/pages/SingleContent/__tests__/SingleContent.ssrrtext.spec.ts b/app/src/pages/SingleContent/__tests__/SingleContent.ssrrtext.spec.ts
index f3324e1314..88a5b4ab40 100644
--- a/app/src/pages/SingleContent/__tests__/SingleContent.ssrrtext.spec.ts
+++ b/app/src/pages/SingleContent/__tests__/SingleContent.ssrrtext.spec.ts
@@ -14,7 +14,9 @@ vi.mock("@/ssg/isPrerender", () => ({ isPrerender: () => false }));
 // the hydrated client starts from. The ref itself is created inside the mock
 // factory (which can async-import vue) — vi.hoisted runs before the module's own
 // `vue` import is initialized, so it cannot close over that binding directly.
-const { seed } = vi.hoisted(() => ({ seed: { ref: undefined as unknown as import("vue").Ref<ContentDto[]> } }));
+const { seed } = vi.hoisted(() => ({
+    seed: { ref: undefined as unknown as import("vue").Ref<ContentDto[]> },
+}));
 vi.mock("@/composables/useContentQuery", async () => {
     const { ref, computed } = await import("vue");
     seed.ref = ref<ContentDto[]>([]);
@@ -91,6 +93,8 @@ vi.mock("@/composables/useReadingProgressTracker", () => ({
     useReadingProgressTracker: () => ({
         hasResumableProgress: ref(false),
         savedProgressPercent: ref(0),
+        readingProgressPercent: ref(0),
+        scrollProgressPercent: ref(0),
         restoreScrollPosition: vi.fn(),
     }),
     resolveArticleScrollContainer: () => (typeof window !== "undefined" ? window : {}),
@@ -108,7 +112,14 @@ vi.mock("@/router", () => ({
 vi.mock("video.js", () => ({ default: vi.fn() }));
 
 function passthrough(name: string) {
-    return defineComponent({ name, inheritAttrs: false, setup: (_, { slots }) => () => h("div", slots.default?.()) });
+    return defineComponent({
+        name,
+        inheritAttrs: false,
+        setup:
+            (_, { slots }) =>
+            () =>
+                h("div", slots.default?.()),
+    });
 }
 function voidStub(name: string) {
     return defineComponent({ name, inheritAttrs: false, setup: () => () => h("div") });
@@ -118,22 +129,34 @@ vi.mock("@/components/BasePage.vue", () => ({
     default: defineComponent({
         name: "BasePage",
         inheritAttrs: false,
-        setup: (_, { slots }) => () => h("div", [slots.quickControls?.(), slots.default?.()]),
+        setup:
+            (_, { slots }) =>
+            () =>
+                h("div", [slots.quickControls?.(), slots.default?.()]),
     }),
 }));
-vi.mock("@/components/IgnorePagePadding.vue", () => ({ default: passthrough("IgnorePagePadding") }));
-vi.mock("@/components/common/LHighlightable.vue", () => ({ default: passthrough("LHighlightable") }));
+vi.mock("@/components/IgnorePagePadding.vue", () => ({
+    default: passthrough("IgnorePagePadding"),
+}));
+vi.mock("@/components/common/LHighlightable.vue", () => ({
+    default: passthrough("LHighlightable"),
+}));
 vi.mock("@/components/common/DropdownMenu.vue", () => ({ default: passthrough("DropdownMenu") }));
 vi.mock("@/components/images/LImage.vue", () => ({ default: voidStub("LImage") }));
 vi.mock("@/components/images/ImageModal.vue", () => ({ default: voidStub("ImageModal") }));
 vi.mock("@/components/images/LImageProvider.vue", () => ({ activeImageCollection: () => 0 }));
 vi.mock("@/components/content/VideoPlayer.vue", () => ({ default: voidStub("VideoPlayer") }));
-vi.mock("@/components/content/CopyrightBanner.vue", () => ({ default: voidStub("CopyrightBanner") }));
-vi.mock("@/components/content/FallbackLanguageBadge.vue", () => ({ default: voidStub("FallbackLanguageBadge") }));
-vi.mock("@/components/content/ContinueReadingPrompt.vue", () => ({ default: voidStub("ContinueReadingPrompt") }));
+vi.mock("@/components/content/CopyrightBanner.vue", () => ({
+    default: voidStub("CopyrightBanner"),
+}));
+vi.mock("@/components/content/FallbackLanguageBadge.vue", () => ({
+    default: voidStub("FallbackLanguageBadge"),
+}));
 vi.mock("@/components/content/RelatedContent.vue", () => ({ default: voidStub("RelatedContent") }));
 vi.mock("@/components/form/LModal.vue", () => ({ default: passthrough("LModal") }));
-vi.mock("@/components/tags/VerticalTagViewer.vue", () => ({ default: voidStub("VerticalTagViewer") }));
+vi.mock("@/components/tags/VerticalTagViewer.vue", () => ({
+    default: voidStub("VerticalTagViewer"),
+}));
 vi.mock("@/components/LoadingBar.vue", () => ({ default: voidStub("LoadingBar") }));
 vi.mock("@/pages/NotFoundPage.vue", () => ({ default: voidStub("NotFoundPage") }));
 
@@ -185,4 +208,4 @@ describe("SingleContent — client-boot article text recovery", () => {
         expect(wrapper.find(".prose").exists()).toBe(false);
         expect(wrapper.text()).not.toContain("Article body text");
     });
-});
\ No newline at end of file
+});