feat(reader): mobile-pattern toolbar — compact row + ⋯ overflow menu under 768px

Wrapping alone isn't how polished mobile readers work. Adopt the
standard pattern (Kindle/Apple Books/Mihon) responsively:

- >= 768px: the full fixed-layout toolbar stays (wrap still absorbs
  mid-size widths) — power users keep one-click zoom/fit/spread.
- < 768px: single-line compact row — page back, back-to-location pin,
  slider, page forward, progress, and a ⋯ overflow button. No
  wrapping, no horizontal scroll.
- ⋯ opens a glass menu anchored above the bar with LABELED rows
  (Zoom −/%/+, Fit, Page position/Recenter, Magnifier, Pointer
  Smart/Pan/Text, Double page, Contents) — labels beat mystery icons
  on touch. Pointer row hides for comics; menu scrolls if tall.
- Dismissal: Esc, outside click (⋯ button exempt so it re-toggles
  cleanly), opening any drawer or TOC closes it; hides with the
  chrome. Compact slider registered in progressSliders() so all
  three stay in sync with relocate events.

web/src/reader/reader.ts

@@ -389,6 +389,7 @@ document.addEventListener("alpine:init", () => {
     chromeVisible: true,
     chromeBehavior: "auto-hide" as string,
     hideTimer: null as ReturnType<typeof setTimeout> | null,
+    toolsOpen: false,
     tapZonesEnabled: true as boolean,
     tapZoneSize: 30 as number,
     tapZoneTimer: null as ReturnType<typeof setTimeout> | null,
@@ -879,12 +880,19 @@ document.addEventListener("alpine:init", () => {
       document.addEventListener("pointermove", () => this.pokeChrome(), {
         passive: true,
       });
-      // Dismiss the selection popover on clicks outside it (iframe clicks
-      // are covered by the selection tracker's collapsed check).
+      // Dismiss the selection popover and tools menu on clicks outside them
+      // (iframe clicks are covered by the selection tracker's collapsed
+      // check; the ⋯ toggle is exempt so its own click re-toggles cleanly).
       document.addEventListener("pointerdown", (e: PointerEvent) => {
-        if (!this.selectionPopover.open) return;
-        if ((e.target as HTMLElement)?.closest?.("#selection-popover")) return;
-        this.hideSelectionPopover();
+        const target = e.target as HTMLElement;
+        if (this.selectionPopover.open &&
+            !target?.closest?.("#selection-popover")) {
+          this.hideSelectionPopover();
+        }
+        if (this.toolsOpen &&
+            !target?.closest?.(".reader-tools-popover, [data-tools-toggle]")) {
+          this.toolsOpen = false;
+        }
       }, { passive: true });
       if (this.chromeBehavior === "always-visible") {
         this.chromeVisible = true;
@@ -1488,6 +1496,9 @@ document.addEventListener("alpine:init", () => {
         );
       }
     },
+    toggleTools() {
+      this.toolsOpen = !this.toolsOpen;
+    },
     anyDrawerOpen(): boolean {
       return this.tocOpen || this.settingsOpen || this.bookmarksOpen || this.searchOpen;
     },
@@ -1496,6 +1507,7 @@ document.addEventListener("alpine:init", () => {
       this.settingsOpen = false;
       this.bookmarksOpen = false;
       this.searchOpen = false;
+      this.toolsOpen = false;
     },
     // ----- in-book search (reflowable) -----
     // view.search() is an async generator: it progressively scans sections,
@@ -1977,7 +1989,11 @@ document.addEventListener("alpine:init", () => {
     // The reflowable and fixed-layout bottom rows each have their own slider
     // (only one is displayed); helpers below target whichever exists.
     progressSliders(): HTMLInputElement[] {
-      const ids = ["progress-slider", "progress-slider-fx"];
+      const ids = [
+        "progress-slider",
+        "progress-slider-fx",
+        "progress-slider-fx-compact",
+      ];
       return ids
         .map((id) => document.getElementById(id) as HTMLInputElement | null)
         .filter((el): el is HTMLInputElement => !!el);
@@ -2137,6 +2153,8 @@ document.addEventListener("alpine:init", () => {
       else if (k === "Escape") {
         if (this.selectionPopover.open) {
           this.hideSelectionPopover();
+        } else if (this.toolsOpen) {
+          this.toolsOpen = false;
         } else if (this.anyDrawerOpen()) {
           this.closeDrawers();
         } else if (this.isFixedLayout && this.renderer?.zoomMagnifierEnabled) {

web/static/input.css

@@ -991,6 +991,55 @@
     gap: 0.25rem;
   }
 
+  /* Fixed-layout toolbar responsiveness:
+     - >= 768px: full toolbar (flex-wrap absorbs mid-size widths)
+     - < 768px:  compact single line + ⋯ overflow menu (mobile-reader
+       pattern: paging/slider/progress stay, power tools get a labeled menu) */
+  .fx-compact {
+    display: none;
+  }
+  @media (max-width: 767px) {
+    .fx-tools-full {
+      display: none;
+    }
+    .fx-compact {
+      display: flex;
+    }
+  }
+  .reader-tools-popover {
+    position: absolute;
+    bottom: 100%;
+    right: 0.5rem;
+    margin-bottom: 0.5rem;
+    min-width: 16rem;
+    max-width: calc(100vw - 1.5rem);
+    max-height: min(26rem, 65vh);
+    overflow-y: auto;
+    background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent);
+    -webkit-backdrop-filter: blur(18px) saturate(1.3);
+    backdrop-filter: blur(18px) saturate(1.3);
+    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    border-radius: 0.75rem;
+    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.35);
+    padding: 0.25rem;
+  }
+  .reader-tools-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    border-radius: 0.5rem;
+  }
+  .reader-tools-row + .reader-tools-row {
+    border-top: 1px solid
+      color-mix(in srgb, var(--border) 45%, transparent);
+  }
+  .reader-tools-row:hover {
+    background-color: color-mix(in srgb, currentColor 6%, transparent);
+  }
+
   /* In-book search */
   .reader-search-bar {
     display: flex;