diff --git a/.gitignore b/.gitignore
index 14acc17ca9..704e888aff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,5 @@
 /_bmad-output
 .github/agents/bmad-*
 .github/prompts/bmad-*
-.direnv/
\ No newline at end of file
+.direnv/
+.claude/
diff --git a/docs/superpowers/plans/2026-06-08-editor-pagination.md b/docs/superpowers/plans/2026-06-08-editor-pagination.md
new file mode 100644
index 0000000000..d2a4e367c0
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-08-editor-pagination.md
@@ -0,0 +1,1372 @@
+# Editor Pagination Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add page-by-page rendering (200 rows/page) to the States, Cultures, Religions, Rivers, and Routes list editors so they stay responsive on maps with 1,000+ entries.
+
+**Architecture:** Add a small shared pagination/sort toolkit of global functions to `public/modules/ui/editors.js`. Each editor's `…AddLines` function builds its full filtered array, sorts the *whole* array via the toolkit (so sorting spans all pages), slices to the current page, renders only that slice, and draws `‹ Page n of N ›` controls in its footer. CSV exports and one DOM-walking helper are reworked to read the full dataset instead of the rendered (now-partial) DOM.
+
+**Tech Stack:** Vanilla browser JS. `public/modules/ui/*.js` are global `<script>` files; `public/modules/dynamic/editors/*.js` are ES modules loaded via dynamic `import()`. Reference: the working pagination in `public/modules/ui/burgs-overview.js`.
+
+**Spec:** `docs/superpowers/specs/2026-06-08-editor-pagination-design.md`
+
+## Testing approach (read first)
+
+This repo unit-tests only `src/**/*.ts` modules (vitest). The files changed here are
+browser-global UI scripts in `public/modules/` — there is **no** precedent or harness for
+unit-testing them, and `editors.js` is loaded as a non-module `<script>` so its helpers
+cannot be ESM-imported. **Do not invent a test harness.** Per the spec, verification is:
+
+1. **Syntax gate (per task):** `node --check <changed-file>` — must exit 0 with no output.
+2. **Manual browser verification (per editor):** run `npm run dev`, open the editor, and
+   walk the checklist in that task. (A large map with 1k+ states is needed to see
+   multiple pages; on a small map the controls hide themselves — that is also a checklist
+   item.)
+
+`biome` lints only `src/**/*.ts`, so it will not touch these files; no formatting step is
+needed for them.
+
+## File structure
+
+| File | Responsibility | Change |
+|---|---|---|
+| `.gitignore` | repo hygiene | add `.claude/` so the pre-commit `biome` hook stops erroring on the nested worktree config |
+| `public/modules/ui/editors.js` | shared editor utilities (already holds `applySorting`, `sortLines`, `fitContent`) | add 5 pagination/sort helpers + `EDITOR_PAGE_SIZE` |
+| `public/modules/dynamic/editors/states-editor.js` | States editor | paginate `statesEditorAddLines`; accessors; page state; fix `downloadStatesCsv` + `randomizeStatesExpansion` |
+| `public/modules/dynamic/editors/cultures-editor.js` | Cultures editor | paginate `culturesEditorAddLines`; accessors; page state; fix `downloadCulturesCsv` |
+| `public/modules/dynamic/editors/religions-editor.js` | Religions editor | paginate `religionsEditorAddLines`; accessors; page state; fix `downloadReligionsCsv` |
+| `public/modules/ui/rivers-overview.js` | Rivers overview | paginate `riversOverviewAddLines`; accessors; page state; search resets page; fix `downloadRiversData` |
+| `public/modules/ui/routes-overview.js` | Routes overview | paginate `routesOverviewAddLines`; accessors; page state; search resets page; fix `downloadRoutesData` |
+
+---
+
+## Task 0: Unblock the pre-commit hook
+
+The pre-commit hook runs `npm run lint` (`biome check --write`). Biome aborts because a
+git worktree under `.claude/worktrees/json-importer/` contains a nested `biome.json`.
+`.claude/` is not gitignored, and biome's `useIgnoreFile: true` only skips gitignored
+paths. Ignoring `.claude/` fixes the hook and is correct hygiene (Claude worktrees are
+never committed).
+
+**Files:**
+- Modify: `.gitignore`
+
+- [ ] **Step 1: Append `.claude/` to `.gitignore`**
+
+Add this line to the end of `.gitignore`:
+
+```
+.claude/
+```
+
+- [ ] **Step 2: Verify the hook now passes**
+
+Run: `npm run lint`
+Expected: biome runs to completion (it checks only `src/**/*.ts`) with no "nested root configuration" error. It may report/auto-fix existing `src` issues; that is fine as long as it exits 0.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add .gitignore
+git commit -m "chore: gitignore .claude worktrees to unblock biome pre-commit hook"
+```
+
+If the commit is still blocked by an unrelated pre-existing `src` lint error, re-run with `SKIP_SIMPLE_GIT_HOOKS=1 git commit -m "…"` and note it, but prefer fixing Step 2 so the rest of the plan has a working hook.
+
+---
+
+## Task 1: Shared pagination/sort toolkit in `editors.js`
+
+**Files:**
+- Modify: `public/modules/ui/editors.js` (insert after `applySorting`, which ends at the closing brace near line 130)
+
+- [ ] **Step 1: Add the helpers**
+
+Insert this block immediately after the `applySorting` function (after its closing `}`):
+
+```javascript
+// ---- Shared editor pagination (used by states, cultures, religions, rivers, routes) ----
+const EDITOR_PAGE_SIZE = 200;
+
+// Read the active sort column from a header element, or null if none is active.
+// Mirrors how applySorting reads the icon-sort-* class set by sortLines.
+function getActiveSort(headers) {
+  const header = headers.querySelector("div[class*='icon-sort']");
+  if (!header) return null;
+  return {
+    sortby: header.dataset.sortby,
+    name: header.classList.contains("alphabetically"),
+    desc: header.className.includes("-down") ? -1 : 1
+  };
+}
+
+// Sort `data` IN PLACE to match the header's active column.
+// `accessors` maps a data-sortby key to a value getter, e.g. {name: s => s.name}.
+function sortDataByActiveHeader(headers, data, accessors) {
+  const sort = getActiveSort(headers);
+  if (!sort) return data;
+  const get = accessors[sort.sortby];
+  if (!get) return data;
+  return data.sort((a, b) => {
+    const av = get(a);
+    const bv = get(b);
+    if (sort.name) {
+      const as = String(av);
+      const bs = String(bv);
+      return (as > bs ? 1 : as < bs ? -1 : 0) * sort.desc;
+    }
+    return (av - bv) * sort.desc;
+  });
+}
+
+// Clamp the page and return the slice for the current page.
+// `pageRef` is a mutable {page} holder so the clamped value persists across calls.
+function getEditorPage(data, pageRef, size = EDITOR_PAGE_SIZE) {
+  const total = data.length;
+  const totalPages = Math.max(1, Math.ceil(total / size));
+  pageRef.page = Math.min(Math.max(1, pageRef.page || 1), totalPages);
+  const start = (pageRef.page - 1) * size;
+  return {items: data.slice(start, start + size), page: pageRef.page, totalPages, total};
+}
+
+// Inject/refresh pagination controls inside `footerEl`. Calls onGoto(page) on navigation.
+// Hidden when there is a single page. Rebuilding innerHTML drops stale listeners.
+function renderEditorPagination(footerEl, info, onGoto) {
+  let nav = footerEl.querySelector(":scope > .editorPagination");
+  if (!nav) {
+    // margin-left:auto only right-aligns inside a flex row; .totalLine footers are not
+    // guaranteed to be flex, so make the footer a flex row when we first inject.
+    footerEl.style.display = "flex";
+    footerEl.style.alignItems = "center";
+    nav = document.createElement("div");
+    nav.className = "editorPagination";
+    nav.style.cssText = "margin-left: auto; display: inline-flex; gap: 0.3em; align-items: center;";
+    footerEl.appendChild(nav);
+  }
+  if (info.totalPages <= 1) {
+    nav.style.display = "none";
+    nav.innerHTML = "";
+    return;
+  }
+  nav.style.display = "inline-flex";
+  nav.innerHTML = /* html */ `
+    <button class="icon-left-open editorPagePrev" data-tip="Previous page" style="padding: 0 4px;" ${info.page <= 1 ? "disabled" : ""}></button>
+    <span>Page&nbsp;<input class="editorPageInput" type="number" min="1" max="${info.totalPages}" value="${info.page}" style="width: 3.5em" data-tip="Jump to page" />&nbsp;of&nbsp;${info.totalPages}</span>
+    <button class="icon-right-open editorPageNext" data-tip="Next page" style="padding: 0 4px;" ${info.page >= info.totalPages ? "disabled" : ""}></button>`;
+  nav.querySelector(".editorPagePrev").on("click", () => onGoto(info.page - 1));
+  nav.querySelector(".editorPageNext").on("click", () => onGoto(info.page + 1));
+  nav.querySelector(".editorPageInput").on("change", e => onGoto(+e.target.value));
+}
+
+// Bind sort-header clicks to reset to page 1 and re-render.
+// Register AFTER sortLines is bound so the icon-sort-* class is toggled first.
+function bindEditorSortReset(headerEl, onSort) {
+  headerEl.querySelectorAll(".sortable").forEach(el => el.on("click", () => onSort()));
+}
+```
+
+> Note: `.on(...)` is the project's jQuery-free alias for `addEventListener` (used throughout these files). `getActiveSort` is also used internally by `sortDataByActiveHeader`; keep both.
+
+- [ ] **Step 2: Syntax check**
+
+Run: `node --check public/modules/ui/editors.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add public/modules/ui/editors.js
+git commit -m "feat(editors): add shared pagination + cross-page sort helpers"
+```
+
+---
+
+## Task 2: Paginate the States editor
+
+**Files:**
+- Modify: `public/modules/dynamic/editors/states-editor.js`
+
+States is an ES module. Row rendering triggers a COA render per row, so capping to 200
+is the main win. The neutral row (`i=0`) is part of `pack.states` and flows through sort
+and pagination as a normal item (per spec decision).
+
+- [ ] **Step 1: Add page state and accessor map**
+
+At the top of the file, after the existing `let statesManualHistory = [];` (line 3), add:
+
+```javascript
+const statesPage = {page: 1};
+const STATES_SORT_ACCESSORS = {
+  name: s => s.name,
+  form: s => s.formName,
+  capital: s => (s.i ? pack.burgs[s.capital].name : ""),
+  culture: s => (s.i ? pack.cultures[s.culture].name : ""),
+  burgs: s => s.burgs,
+  area: s => s.area,
+  population: s => s.rural * populationRate + s.urban * populationRate * urbanization,
+  type: s => s.type || "",
+  expansionism: s => s.expansionism || 0,
+  cells: s => s.cells
+};
+```
+
+- [ ] **Step 2: Reset to page 1 when the editor opens**
+
+In `open()` (starts line 5), add a page reset right before the `refreshStatesEditor();` call:
+
+```javascript
+  statesPage.page = 1;
+  refreshStatesEditor();
+```
+
+- [ ] **Step 3: Bind sort clicks to reset+re-render**
+
+In `addListeners()` (starts line 97), immediately after the existing
+`applySortingByHeader("statesHeader");` line, add:
+
+```javascript
+  bindEditorSortReset(ensureEl("statesHeader"), () => {
+    statesPage.page = 1;
+    statesEditorAddLines();
+  });
+```
+
+- [ ] **Step 4: Rewrite `statesEditorAddLines` to sort-all, total-all, render-page**
+
+Replace the whole `statesEditorAddLines` function (lines 160-299) with the version below.
+It (a) builds the full non-removed list, (b) sorts the full list, (c) accumulates footer
+totals over the full list, (d) renders only the page slice, (e) draws pagination, and
+(f) drops the trailing `applySorting(statesHeader)` call.
+
+```javascript
+// add line for each state (current page only; sort + totals span all states)
+function statesEditorAddLines() {
+  const unit = getAreaUnit();
+  const hidden = ensureEl("statesRegenerateButtons").style.display === "block" ? "" : "hidden"; // toggle regenerate columns
+
+  const allStates = pack.states.filter(s => !s.removed);
+  sortDataByActiveHeader(ensureEl("statesHeader"), allStates, STATES_SORT_ACCESSORS);
+
+  // footer totals over the full set
+  let totalArea = 0;
+  let totalPopulation = 0;
+  let totalBurgs = 0;
+  for (const s of allStates) {
+    totalArea += getArea(s.area);
+    totalPopulation += rn(s.rural * populationRate + s.urban * populationRate * urbanization);
+    totalBurgs += s.burgs;
+  }
+
+  const pageInfo = getEditorPage(allStates, statesPage);
+  let lines = "";
+
+  for (const s of pageInfo.items) {
+    const area = getArea(s.area);
+    const rural = s.rural * populationRate;
+    const urban = s.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
+      urban
+    )}. Click to change`;
+    const focused = defs.select("#fog #focusState" + s.i).size();
+
+    if (!s.i) {
+      // Neutral line
+      lines += /* html */ `<div
+        class="states"
+        data-id=${s.i}
+        data-name="${s.name}"
+        data-cells=${s.cells}
+        data-area=${area}
+        data-population=${population}
+        data-burgs=${s.burgs}
+        data-color=""
+        data-form=""
+        data-capital=""
+        data-culture=""
+        data-type=""
+        data-expansionism=""
+      >
+        <svg width="1em" height="1em" class="placeholder"></svg>
+        <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
+          s.name
+        }" readonly />
+        <svg class="coaIcon placeholder"></svg>
+        <input class="stateForm placeholder" value="none" />
+        <span class="icon-star-empty placeholder"></span>
+        <input class="stateCapital placeholder" />
+        <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
+        <span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
+        <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
+        <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
+        <select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
+        <span class="icon-resize-full ${hidden} placeholder show hide"></span>
+        <input class="statePower ${hidden} placeholder show hide" type="number" value="0" />
+        <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
+        <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
+      </div>`;
+      continue;
+    }
+
+    const capital = pack.burgs[s.capital].name;
+    COArenderer.trigger("stateCOA" + s.i, s.coa);
+    lines += /* html */ `<div
+      class="states"
+      data-id=${s.i}
+      data-name="${s.name}"
+      data-form="${s.formName}"
+      data-capital="${capital}"
+      data-color="${s.color}"
+      data-cells=${s.cells}
+      data-area=${area}
+      data-population=${population}
+      data-burgs=${s.burgs}
+      data-culture=${pack.cultures[s.culture].name}
+      data-type=${s.type}
+      data-expansionism=${s.expansionism}
+    >
+      <fill-box fill="${s.color}"></fill-box>
+      <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
+        s.i
+      }"></use></svg>
+      <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
+        s.formName
+      }" readonly />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
+      <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
+        s.culture
+      )}</select>
+      <span data-tip="Click to overview state burgs" style="padding-right: 1px" class="icon-dot-circled pointer hide"></span>
+      <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
+      <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
+      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
+      <span data-tip="${populationTip}" class="icon-male hide"></span>
+      <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
+      <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(
+        s.type
+      )}</select>
+      <span data-tip="State expansionism" class="icon-resize-full ${hidden} show hide"></span>
+      <input data-tip="Expansionism (defines competitive size). Change to re-calculate states based on new value"
+        class="statePower ${hidden} show hide" type="number" min="0" max="99" step=".1" value=${s.expansionism} />
+      <span data-tip="Cells count" class="icon-check-empty ${hidden} show hide"></span>
+      <div data-tip="Cells count" class="stateCells ${hidden} show hide">${s.cells}</div>
+      <span data-tip="Locate the state" class="icon-target hide"></span>
+      <span data-tip="Toggle state focus" class="icon-pin ${focused ? "" : " inactive"} hide"></span>
+      <span data-tip="Lock the state to protect it from re-generation" class="icon-lock${
+        s.lock ? "" : "-open"
+      } hide"></span>
+      <span data-tip="Remove the state" class="icon-trash-empty hide"></span>
+    </div>`;
+  }
+  $body.innerHTML = lines;
+
+  // update footer
+  ensureEl("statesFooterStates").innerHTML = pack.states.filter(s => s.i && !s.removed).length;
+  ensureEl("statesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  ensureEl("statesFooterBurgs").innerHTML = totalBurgs;
+  ensureEl("statesFooterArea").innerHTML = si(totalArea) + unit;
+  ensureEl("statesFooterArea").dataset.area = totalArea;
+  ensureEl("statesFooterPopulation").innerHTML = si(totalPopulation);
+  ensureEl("statesFooterPopulation").dataset.population = totalPopulation;
+
+  renderEditorPagination(ensureEl("statesFooter"), pageInfo, page => {
+    statesPage.page = page;
+    statesEditorAddLines();
+  });
+
+  // add listeners
+  $body.querySelectorAll(":scope > div").forEach($line => {
+    $line.on("mouseenter", stateHighlightOn);
+    $line.on("mouseleave", stateHighlightOff);
+    $line.on("click", selectStateOnLineClick);
+  });
+
+  if ($body.dataset.type === "percentage") {
+    $body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  $("#statesEditor").dialog({ width: fitContent() });
+}
+```
+
+- [ ] **Step 5: Make `randomizeStatesExpansion` page-safe**
+
+In `randomizeStatesExpansion` (line ~871), the per-state DOM write throws for off-page
+states. Guard it with optional chaining. Replace:
+
+```javascript
+    $body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
+```
+
+with:
+
+```javascript
+    const $power = $body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower");
+    if ($power) $power.value = expansionism;
+```
+
+- [ ] **Step 6: Make `downloadStatesCsv` export the full set, not the page**
+
+Replace the body of `downloadStatesCsv` (line ~1491) so it iterates `pack.states`
+directly instead of the rendered DOM rows:
+
+```javascript
+function downloadStatesCsv() {
+  const unit = getAreaUnit("2");
+  const headers = `Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area ${unit},Total Population,Rural Population,Urban Population`;
+  const data = pack.states
+    .filter(s => !s.removed)
+    .map(s => {
+      const area = getArea(s.area);
+      const ruralPopulation = Math.round(s.rural * populationRate);
+      const urbanPopulation = Math.round(s.urban * populationRate * urbanization);
+      const population = ruralPopulation + urbanPopulation;
+      const capital = s.i ? pack.burgs[s.capital].name : "";
+      const culture = s.i ? pack.cultures[s.culture].name : "";
+      return [
+        s.i,
+        s.name,
+        s.fullName || "",
+        s.formName || "",
+        s.color || "",
+        capital,
+        culture,
+        s.type || "",
+        s.expansionism ?? "",
+        s.cells,
+        s.burgs,
+        area,
+        population,
+        ruralPopulation,
+        urbanPopulation
+      ].join(",");
+    });
+  const csvData = [headers].concat(data).join("\n");
+
+  const name = getFileName("States") + ".csv";
+  downloadFile(csvData, name);
+}
+```
+
+- [ ] **Step 7: Syntax check**
+
+Run: `node --check public/modules/dynamic/editors/states-editor.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 8: Manual browser verification**
+
+Run `npm run dev`, load a map with 1k+ states, open the States editor (Tools → States or the states layer editor). Confirm:
+- Opens quickly; shows 200 rows and a `‹ Page 1 of N ›` control in the footer.
+- Next/Prev navigate; the page input jumps; buttons disable at the first/last page; out-of-range input clamps.
+- Click "Population" header: page resets to 1 and the top row is the **global** max/min (not just the previously-visible max). Toggle the same header to reverse order.
+- Footer totals (states/cells/burgs/area/population) are unchanged by paging (full-set totals).
+- Toggle percentage mode on page 2: visible rows show sensible percentages of the full totals.
+- Export CSV from page 2: the file has every state, not 200.
+- Open the regenerate menu and click "Randomize": no console error (off-page rows are skipped); apply works.
+- Remove the last state on the last page: editor lands on the new last page, not an empty page.
+
+- [ ] **Step 9: Commit**
+
+```bash
+git add public/modules/dynamic/editors/states-editor.js
+git commit -m "feat(states-editor): paginate rows, sort across pages, fix CSV + randomize"
+```
+
+---
+
+## Task 3: Paginate the Cultures editor
+
+**Files:**
+- Modify: `public/modules/dynamic/editors/cultures-editor.js`
+
+ES module; rows have a fill-box + selects (no COA render). Neutral row `i=0` flows
+through sort/pagination. The editor toggles the `emblems` sort column's visibility based
+on `selectShape`; preserve that.
+
+- [ ] **Step 1: Add page state and accessor map**
+
+After `let culturesManualHistory = [];` (line 3) and the `cultureTypes` const (line 5),
+add:
+
+```javascript
+const culturesPage = {page: 1};
+const CULTURES_SORT_ACCESSORS = {
+  name: c => c.name,
+  type: c => c.type || "",
+  base: c => c.base,
+  cells: c => c.cells,
+  expansionism: c => c.expansionism || 0,
+  area: c => c.area,
+  population: c => c.rural * populationRate + c.urban * populationRate * urbanization,
+  emblems: c => c.shield
+};
+```
+
+- [ ] **Step 2: Reset to page 1 on open**
+
+In `open()` (line 7), add the reset right before `refreshCulturesEditor();`:
+
+```javascript
+  culturesPage.page = 1;
+  refreshCulturesEditor();
+```
+
+- [ ] **Step 3: Bind sort clicks to reset+re-render**
+
+In `addListeners()` (line 78), right after `applySortingByHeader("culturesHeader");`, add:
+
+```javascript
+  bindEditorSortReset(ensureEl("culturesHeader"), () => {
+    culturesPage.page = 1;
+    culturesEditorAddLines();
+  });
+```
+
+- [ ] **Step 4: Rewrite `culturesEditorAddLines` to sort-all, total-all, render-page**
+
+Replace the whole `culturesEditorAddLines` function (lines 121-263) with:
+
+```javascript
+function culturesEditorAddLines() {
+  const unit = getAreaUnit();
+
+  const emblemShapeGroup = ensureEl("emblemShape").selectedOptions[0]?.parentNode?.label;
+  const selectShape = emblemShapeGroup === "Diversiform";
+
+  const allCultures = pack.cultures.filter(c => !c.removed);
+  sortDataByActiveHeader(ensureEl("culturesHeader"), allCultures, CULTURES_SORT_ACCESSORS);
+
+  // footer totals over the full set
+  let totalArea = 0;
+  let totalPopulation = 0;
+  for (const c of allCultures) {
+    totalArea += getArea(c.area);
+    totalPopulation += rn(c.rural * populationRate + c.urban * populationRate * urbanization);
+  }
+
+  const pageInfo = getEditorPage(allCultures, culturesPage);
+  let lines = "";
+
+  for (const c of pageInfo.items) {
+    const area = getArea(c.area);
+    const rural = c.rural * populationRate;
+    const urban = c.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
+      urban
+    )}. Click to edit`;
+
+    if (!c.i) {
+      // Uncultured (neutral) line
+      lines += /* html */ `<div
+          class="states"
+          data-id="${c.i}"
+          data-name="${c.name}"
+          data-color=""
+          data-cells="${c.cells}"
+          data-area="${area}"
+          data-population="${population}"
+          data-base="${c.base}"
+          data-type=""
+          data-expansionism=""
+          data-emblems="${c.shield}"
+        >
+          <svg width="11" height="11" class="placeholder"></svg>
+          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" style="width: 7em"
+            value="${c.name}" autocorrect="off" spellcheck="false" />
+          <span class="icon-cw placeholder"></span>
+          <select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
+          <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
+            class="cultureBase">${getBaseOptions(c.base)}</select>
+          <span data-tip="Cells count" class="icon-check-empty hide"></span>
+          <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+          <span class="icon-resize-full placeholder hide"></span>
+          <input class="cultureExpan placeholder hide" type="number" />
+          <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+          <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+          <span data-tip="${populationTip}" class="icon-male hide"></span>
+          <div data-tip="${populationTip}" class="culturePopulation hide pointer"
+            style="width: 4em">${si(population)}</div>
+          ${getShapeOptions(selectShape, c.shield)}
+        </div>`;
+      continue;
+    }
+
+    lines += /* html */ `<div
+        class="states"
+        data-id="${c.i}"
+        data-name="${c.name}"
+        data-color="${c.color}"
+        data-cells="${c.cells}"
+        data-area="${area}"
+        data-population="${population}"
+        data-base="${c.base}"
+        data-type="${c.type}"
+        data-expansionism="${c.expansionism}"
+        data-emblems="${c.shield}"
+      >
+        <fill-box fill="${c.color}"></fill-box>
+        <input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
+          value="${c.name}" autocorrect="off" spellcheck="false" />
+        <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
+        <select data-tip="Culture type. Defines growth model. Click to change"
+          class="cultureType">${getTypeOptions(c.type)}</select>
+        <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names"
+          class="cultureBase">${getBaseOptions(c.base)}</select>
+        <span data-tip="Cells count" class="icon-check-empty hide"></span>
+        <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+        <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
+        <input
+          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
+          class="cultureExpan hide"
+          type="number"
+          min="0"
+          max="99"
+          step=".1"
+          value=${c.expansionism}
+        />
+        <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="culturePopulation hide pointer"
+          style="width: 4em">${si(population)}</div>
+        ${getShapeOptions(selectShape, c.shield)}
+        <span data-tip="Locate the culture" class="icon-target hide"></span>
+        <span data-tip="Lock culture" class="icon-lock${c.lock ? "" : "-open"} hide"></span>
+        <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
+      </div>`;
+  }
+  $body.innerHTML = lines;
+
+  // update footer
+  ensureEl("culturesFooterCultures").innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
+  ensureEl("culturesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  ensureEl("culturesFooterArea").innerHTML = `${si(totalArea)} ${unit}`;
+  ensureEl("culturesFooterPopulation").innerHTML = si(totalPopulation);
+  ensureEl("culturesFooterArea").dataset.area = totalArea;
+  ensureEl("culturesFooterPopulation").dataset.population = totalPopulation;
+
+  renderEditorPagination(ensureEl("culturesFooter"), pageInfo, page => {
+    culturesPage.page = page;
+    culturesEditorAddLines();
+  });
+
+  // add listeners
+  $body.querySelectorAll(":scope > div").forEach($line => {
+    $line.on("mouseenter", cultureHighlightOn);
+    $line.on("mouseleave", cultureHighlightOff);
+    $line.on("click", selectCultureOnLineClick);
+  });
+  $body.querySelectorAll("fill-box").forEach($el => $el.on("click", cultureChangeColor));
+  $body.querySelectorAll("div > input.cultureName").forEach($el => $el.on("input", cultureChangeName));
+  $body.querySelectorAll("div > span.icon-cw").forEach($el => $el.on("click", cultureRegenerateName));
+  $body.querySelectorAll("div > input.cultureExpan").forEach($el => $el.on("change", cultureChangeExpansionism));
+  $body.querySelectorAll("div > select.cultureType").forEach($el => $el.on("change", cultureChangeType));
+  $body.querySelectorAll("div > select.cultureBase").forEach($el => $el.on("change", cultureChangeBase));
+  $body.querySelectorAll("div > select.cultureEmblems").forEach($el => $el.on("change", cultureChangeEmblemsShape));
+  $body.querySelectorAll("div > div.culturePopulation").forEach($el => $el.on("click", changePopulation));
+  $body.querySelectorAll("div > span.icon-arrows-cw").forEach($el => $el.on("click", cultureRegenerateBurgs));
+  $body.querySelectorAll("div > span.icon-target").forEach($el => $el.on("click", cultureHighlightElement));
+  $body.querySelectorAll("div > span.icon-trash-empty").forEach($el => $el.on("click", cultureRemovePrompt));
+  $body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
+  $body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
+
+  const $culturesHeader = ensureEl("culturesHeader");
+  $culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
+
+  if ($body.dataset.type === "percentage") {
+    $body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  $("#culturesEditor").dialog({ width: fitContent() });
+}
+```
+
+- [ ] **Step 5: Make `downloadCulturesCsv` export the full set**
+
+Replace `downloadCulturesCsv` (line ~858) so it iterates `pack.cultures` instead of DOM
+rows. Read the surrounding original to preserve the exact column set; the rewrite:
+
+```javascript
+function downloadCulturesCsv() {
+  const unit = getAreaUnit("2");
+  const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origins`;
+  const data = pack.cultures
+    .filter(c => !c.removed)
+    .map(c => {
+      const area = getArea(c.area);
+      const population = rn(c.rural * populationRate + c.urban * populationRate * urbanization);
+      const namesbase = nameBases[c.base].name;
+      const origins = (c.origins || []).join("-");
+      return [
+        c.i,
+        c.name,
+        c.color || "",
+        c.cells,
+        c.expansionism ?? "",
+        c.type || "",
+        area,
+        population,
+        namesbase,
+        c.shield,
+        origins
+      ].join(",");
+    });
+  const csvData = [headers].concat(data).join("\n");
+
+  const name = getFileName("Cultures") + ".csv";
+  downloadFile(csvData, name);
+}
+```
+
+> Before applying, open the original `downloadCulturesCsv` and confirm the exact column
+> order and how `origins` was serialized; match it. If the original wrapped a field in
+> quotes, keep that. Adjust the array above to match the original header string verbatim.
+
+- [ ] **Step 6: Syntax check**
+
+Run: `node --check public/modules/dynamic/editors/cultures-editor.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 7: Manual browser verification**
+
+`npm run dev`, open Cultures editor on a map with many cultures. Confirm: paginates at
+200; sort spans all pages and resets to page 1; footer totals stable across pages; the
+`emblems` column still shows/hides with Diversiform emblem shapes; percentage mode on a
+later page shows correct shares; CSV export contains all cultures. With < 200 cultures,
+no pagination control appears.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add public/modules/dynamic/editors/cultures-editor.js
+git commit -m "feat(cultures-editor): paginate rows, sort across pages, fix CSV export"
+```
+
+---
+
+## Task 4: Paginate the Religions editor
+
+**Files:**
+- Modify: `public/modules/dynamic/editors/religions-editor.js`
+
+ES module; preserves the existing "extinct" hide rule and `getExpansionColumns(r)`
+trailing markup. Neutral row `i=0` flows through sort/pagination.
+
+- [ ] **Step 1: Add page state and accessor map**
+
+After `addListeners();` (line 2) at the top of the file, add:
+
+```javascript
+const religionsPage = {page: 1};
+const RELIGIONS_SORT_ACCESSORS = {
+  name: r => r.name,
+  type: r => r.type || "",
+  form: r => r.form || "",
+  deity: r => r.deity || "",
+  area: r => r.area,
+  population: r => r.rural * populationRate + r.urban * populationRate * urbanization,
+  expansion: r => r.expansion || "",
+  expansionism: r => r.expansionism || 0
+};
+```
+
+- [ ] **Step 2: Reset to page 1 on open**
+
+In `open()` (line 4), add the reset right before `refreshReligionsEditor();`:
+
+```javascript
+  religionsPage.page = 1;
+  refreshReligionsEditor();
+```
+
+- [ ] **Step 3: Bind sort clicks; reset page when toggling extinct**
+
+In `addListeners()` (line 93), right after `applySortingByHeader("religionsHeader");`, add:
+
+```javascript
+  bindEditorSortReset(ensureEl("religionsHeader"), () => {
+    religionsPage.page = 1;
+    religionsEditorAddLines();
+  });
+```
+
+Then find `toggleExtinct` (the handler bound to `religionsExtinct`) and add
+`religionsPage.page = 1;` as its first statement so toggling extinct visibility restarts
+at page 1. (If `toggleExtinct` re-renders via `religionsEditorAddLines`, the reset just
+needs to precede that call.)
+
+- [ ] **Step 4: Rewrite `religionsEditorAddLines` to sort-all, total-all, render-page**
+
+Replace the whole `religionsEditorAddLines` function (lines 133-263) with:
+
+```javascript
+// add line for each religion (current page only; sort + totals span all religions)
+function religionsEditorAddLines() {
+  const unit = " " + getAreaUnit();
+
+  const allReligions = pack.religions.filter(
+    r => !r.removed && !(r.i && !r.cells && $body.dataset.extinct !== "show")
+  );
+  sortDataByActiveHeader(ensureEl("religionsHeader"), allReligions, RELIGIONS_SORT_ACCESSORS);
+
+  // footer totals over the full (visible) set
+  let totalArea = 0;
+  let totalPopulation = 0;
+  for (const r of allReligions) {
+    totalArea += getArea(r.area);
+    totalPopulation += rn(r.rural * populationRate + r.urban * populationRate * urbanization);
+  }
+
+  const pageInfo = getEditorPage(allReligions, religionsPage);
+  let lines = "";
+
+  for (const r of pageInfo.items) {
+    const area = getArea(r.area);
+    const rural = r.rural * populationRate;
+    const urban = r.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
+      urban
+    )}. Click to change`;
+
+    if (!r.i) {
+      // No religion (neutral) line
+      lines += /* html */ `<div
+        class="states"
+        data-id="${r.i}"
+        data-name="${r.name}"
+        data-color=""
+        data-area="${area}"
+        data-population="${population}"
+        data-type=""
+        data-form=""
+        data-deity=""
+        data-expansion=""
+        data-expansionism=""
+      >
+        <svg width="9" height="9" class="placeholder"></svg>
+        <input data-tip="Religion name. Click and type to change" class="religionName italic" style="width: 11em"
+          value="${r.name}" autocorrect="off" spellcheck="false" />
+        <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
+          ${getTypeOptions(r.type)}
+        </select>
+        <input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
+        <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
+        <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Religion area" class="religionArea hide" style="width: 6em">${si(area) + unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${si(
+          population
+        )}</div>
+      </div>`;
+      continue;
+    }
+
+    lines += /* html */ `<div
+      class="states"
+      data-id=${r.i}
+      data-name="${r.name}"
+      data-color="${r.color}"
+      data-area=${area}
+      data-population=${population}
+      data-type="${r.type}"
+      data-form="${r.form}"
+      data-deity="${r.deity || ""}"
+      data-expansion="${r.expansion}"
+      data-expansionism="${r.expansionism}"
+    >
+      <fill-box fill="${r.color}"></fill-box>
+      <input data-tip="Religion name. Click and type to change" class="religionName" style="width: 11em"
+        value="${r.name}" autocorrect="off" spellcheck="false" />
+      <select data-tip="Religion type" class="religionType" style="width: 5em">
+        ${getTypeOptions(r.type)}
+      </select>
+      <input data-tip="Religion form" class="religionForm" style="width: 6em"
+        value="${r.form}" autocorrect="off" spellcheck="false" />
+      <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
+      <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
+        value="${r.deity || ""}" autocorrect="off" spellcheck="false" />
+      <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
+      <div data-tip="Religion area" class="religionArea hide" style="width: 6em">${si(area) + unit}</div>
+      <span data-tip="${populationTip}" class="icon-male hide"></span>
+      <div data-tip="${populationTip}" class="religionPopulation hide pointer" style="width: 5em">${si(
+        population
+      )}</div>
+      ${getExpansionColumns(r)}
+      <span data-tip="Locate the religion" class="icon-target hide"></span>
+      <span data-tip="Lock this religion" class="icon-lock${r.lock ? "" : "-open"} hide"></span>
+      <span data-tip="Remove religion" class="icon-trash-empty hide"></span>
+    </div>`;
+  }
+  $body.innerHTML = lines;
+
+  // update footer
+  const validReligions = pack.religions.filter(r => r.i && !r.removed);
+  ensureEl("religionsOrganized").innerHTML = validReligions.filter(r => r.type === "Organized").length;
+  ensureEl("religionsHeresies").innerHTML = validReligions.filter(r => r.type === "Heresy").length;
+  ensureEl("religionsCults").innerHTML = validReligions.filter(r => r.type === "Cult").length;
+  ensureEl("religionsFolk").innerHTML = validReligions.filter(r => r.type === "Folk").length;
+  ensureEl("religionsFooterArea").innerHTML = si(totalArea) + unit;
+  ensureEl("religionsFooterPopulation").innerHTML = si(totalPopulation);
+  ensureEl("religionsFooterArea").dataset.area = totalArea;
+  ensureEl("religionsFooterPopulation").dataset.population = totalPopulation;
+
+  renderEditorPagination(ensureEl("religionsFooter"), pageInfo, page => {
+    religionsPage.page = page;
+    religionsEditorAddLines();
+  });
+
+  // add listeners
+  $body.querySelectorAll(":scope > div").forEach($line => {
+    $line.on("mouseenter", religionHighlightOn);
+    $line.on("mouseleave", religionHighlightOff);
+    $line.on("click", selectReligionOnLineClick);
+  });
+  $body.querySelectorAll("fill-box").forEach(el => el.on("click", religionChangeColor));
+  $body.querySelectorAll("div > input.religionName").forEach(el => el.on("input", religionChangeName));
+  $body.querySelectorAll("div > select.religionType").forEach(el => el.on("change", religionChangeType));
+  $body.querySelectorAll("div > input.religionForm").forEach(el => el.on("input", religionChangeForm));
+  $body.querySelectorAll("div > input.religionDeity").forEach(el => el.on("input", religionChangeDeity));
+  $body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.on("click", regenerateDeity));
+  $body.querySelectorAll("div > div.religionPopulation").forEach(el => el.on("click", changePopulation));
+  $body.querySelectorAll("div > select.religionExtent").forEach(el => el.on("change", religionChangeExtent));
+  $body.querySelectorAll("div > input.religionExpantion").forEach(el => el.on("change", religionChangeExpansionism));
+  $body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", religionRemovePrompt));
+  $body.querySelectorAll("div > span.icon-target").forEach($el => $el.on("click", highlightReligion));
+  $body.querySelectorAll("div > span.icon-lock").forEach($el => $el.on("click", updateLockStatus));
+  $body.querySelectorAll("div > span.icon-lock-open").forEach($el => $el.on("click", updateLockStatus));
+
+  if ($body.dataset.type === "percentage") {
+    $body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+
+  $("#religionsEditor").dialog({ width: fitContent() });
+}
+```
+
+- [ ] **Step 5: Make `downloadReligionsCsv` export the full set**
+
+Replace `downloadReligionsCsv` (line ~809) so it iterates `pack.religions` instead of DOM
+rows. Open the original first to copy the exact header string and `origins`/`deity`
+quoting, then mirror it:
+
+```javascript
+function downloadReligionsCsv() {
+  const unit = getAreaUnit("2");
+  const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins,Potential,Expansionism`;
+  const data = pack.religions
+    .filter(r => !r.removed && !(r.i && !r.cells && $body.dataset.extinct !== "show"))
+    .map(r => {
+      const area = getArea(r.area);
+      const believers = rn(r.rural * populationRate + r.urban * populationRate * urbanization);
+      const deityText = '"' + (r.deity || "") + '"';
+      const origins = (r.origins || []).join("-");
+      return [
+        r.i,
+        r.name,
+        r.color || "",
+        r.type || "",
+        r.form || "",
+        deityText,
+        area,
+        believers,
+        origins,
+        r.expansion || "",
+        r.expansionism ?? ""
+      ].join(",");
+    });
+  const csvData = [headers].concat(data).join("\n");
+
+  const name = getFileName("Religions") + ".csv";
+  downloadFile(csvData, name);
+}
+```
+
+> Confirm against the original: column order, the `deity` quoting, and how `origins` was
+> joined. Match the original header verbatim.
+
+- [ ] **Step 6: Syntax check**
+
+Run: `node --check public/modules/dynamic/editors/religions-editor.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 7: Manual browser verification**
+
+`npm run dev`, open Religions editor on a map with many religions. Confirm: paginates at
+200; sort spans all pages and resets to page 1; toggling "show extinct" resets to page 1
+and changes the set; footer Organized/Heresies/Cults/Folk + area + believers correct;
+percentage mode on a later page correct; CSV export contains all religions (respecting
+the extinct toggle).
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add public/modules/dynamic/editors/religions-editor.js
+git commit -m "feat(religions-editor): paginate rows, sort across pages, fix CSV export"
+```
+
+---
+
+## Task 5: Paginate the Rivers overview
+
+**Files:**
+- Modify: `public/modules/ui/rivers-overview.js`
+
+Plain global script. `riversOverviewAddLines` is a closure inside `overviewRivers`. The
+search input already re-renders; make it reset to page 1. The `riversHeader` `.sortable`
+elements are bound to `sortLines` at load via the global `editors.js` handler, so only
+add `bindEditorSortReset` (once, in the guarded init block).
+
+- [ ] **Step 1: Add a file-level page state**
+
+At the very top of the file, after `"use strict";` (line 1), add:
+
+```javascript
+const riversPage = {page: 1};
+const RIVERS_SORT_ACCESSORS = {
+  name: r => r.name || "",
+  type: r => r.type || "",
+  discharge: r => r.discharge,
+  length: r => r.length,
+  width: r => r.width
+};
+```
+
+> `basin` sorting needs the `riversById` map built inside the function; it is added to the
+> accessor map at call time in Step 3.
+
+- [ ] **Step 2: Reset page when (re)opening and bind sort reset**
+
+In `overviewRivers`, the page should reset each time the dialog opens. Add
+`riversPage.page = 1;` immediately before the existing `riversOverviewAddLines();` call
+near line 9.
+
+Then, inside the `if (modules.overviewRivers) return;`-guarded init block (after line 13,
+alongside the other `ensureEl(...).on(...)` listeners), add the sort-reset binding and
+make search reset the page. Replace the existing search line:
+
+```javascript
+  ensureEl("riversSearch").on("input", riversOverviewAddLines);
+```
+
+with:
+
+```javascript
+  ensureEl("riversSearch").on("input", () => {
+    riversPage.page = 1;
+    riversOverviewAddLines();
+  });
+  bindEditorSortReset(ensureEl("riversHeader"), () => {
+    riversPage.page = 1;
+    riversOverviewAddLines();
+  });
+```
+
+- [ ] **Step 3: Paginate `riversOverviewAddLines`**
+
+In `riversOverviewAddLines` (line 32): after `filteredRivers` is computed (the block
+ending at line 50) and before the `for (const r of filteredRivers)` loop, insert sorting
++ pagination, and change the loop to iterate the page slice. Concretely:
+
+Replace:
+
+```javascript
+    for (const r of filteredRivers) {
+```
+
+with:
+
+```javascript
+    sortDataByActiveHeader(ensureEl("riversHeader"), filteredRivers, {
+      ...RIVERS_SORT_ACCESSORS,
+      basin: r => riversById.get(r.basin)?.name || ""
+    });
+    const pageInfo = getEditorPage(filteredRivers, riversPage);
+
+    for (const r of pageInfo.items) {
+```
+
+- [ ] **Step 4: Draw pagination controls and drop the DOM sort**
+
+Still in `riversOverviewAddLines`, after the footer update block (the four
+`riversFooter*` assignments ending ~line 88) and the row-listener block, replace the
+trailing:
+
+```javascript
+    applySorting(riversHeader);
+```
+
+with:
+
+```javascript
+    renderEditorPagination(ensureEl("riversFooter"), pageInfo, page => {
+      riversPage.page = page;
+      riversOverviewAddLines();
+    });
+```
+
+> The footer averages (`riversFooterNumber`, discharge/length/width) are already computed
+> from `filteredRivers` (full set), so they stay correct across pages — no change needed
+> there.
+
+- [ ] **Step 5: Make `downloadRiversData` export the full filtered set**
+
+Replace `downloadRiversData` (line 154) so it iterates the search-filtered `pack.rivers`
+instead of DOM rows:
+
+```javascript
+  function downloadRiversData() {
+    let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers
+
+    const riversById = new Map(pack.rivers.map(river => [river.i, river]));
+    const searchText = ensureEl("riversSearch").value.toLowerCase().trim();
+    const exported = pack.rivers.filter(r => {
+      if (!searchText) return true;
+      const name = (r.name || "").toLowerCase();
+      const type = (r.type || "").toLowerCase();
+      const basinName = (riversById.get(r.basin)?.name || "").toLowerCase();
+      return name.includes(searchText) || type.includes(searchText) || basinName.includes(searchText);
+    });
+
+    exported.forEach(function (r) {
+      const discharge = r.discharge + " m³/s";
+      const length = rn(r.length * distanceScale) + " " + distanceUnitInput.value;
+      const width = rn(r.width * distanceScale, 3) + " " + distanceUnitInput.value;
+      const basin = riversById.get(r.basin)?.name || "";
+      data += [r.i, r.name, r.type, discharge, length, width, basin].join(",") + "\n";
+    });
+
+    const name = getFileName("Rivers") + ".csv";
+    downloadFile(data, name);
+  }
+```
+
+- [ ] **Step 6: Syntax check**
+
+Run: `node --check public/modules/ui/rivers-overview.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 7: Manual browser verification**
+
+`npm run dev`, open Rivers overview on a map with many rivers (1k+ for multiple pages).
+Confirm: paginates at 200; sort (incl. Basin) spans all pages and resets to page 1;
+typing in search resets to page 1 and filters across all pages; footer averages reflect
+the filtered set; CSV export honors the search filter and contains all matching rivers.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add public/modules/ui/rivers-overview.js
+git commit -m "feat(rivers-overview): paginate rows, sort across pages, fix CSV export"
+```
+
+---
+
+## Task 6: Paginate the Routes overview
+
+**Files:**
+- Modify: `public/modules/ui/routes-overview.js`
+
+Plain global script, same closure shape as rivers. Note: rows with `< 2` points are
+skipped at render time; they may occupy a slot in the page slice and simply render
+nothing (rare, acceptable — matches current skip behavior).
+
+- [ ] **Step 1: Add a file-level page state and accessors**
+
+At the top, after `"use strict";` (line 1), add:
+
+```javascript
+const routesPage = {page: 1};
+const ROUTES_SORT_ACCESSORS = {
+  name: route => route.name || "",
+  group: route => route.group || "",
+  length: route => route.length
+};
+```
+
+- [ ] **Step 2: Reset page on open; bind sort reset; search resets page**
+
+Add `routesPage.page = 1;` immediately before the `routesOverviewAddLines();` call near
+line 9.
+
+Inside the `if (modules.overviewRoutes) return;`-guarded init block, replace the existing
+search line:
+
+```javascript
+  ensureEl("routesSearch").on("input", routesOverviewAddLines);
+```
+
+with:
+
+```javascript
+  ensureEl("routesSearch").on("input", () => {
+    routesPage.page = 1;
+    routesOverviewAddLines();
+  });
+  bindEditorSortReset(ensureEl("routesHeader"), () => {
+    routesPage.page = 1;
+    routesOverviewAddLines();
+  });
+```
+
+- [ ] **Step 3: Paginate `routesOverviewAddLines`**
+
+In `routesOverviewAddLines` (line 31): after the `filteredRoutes` search block (ending
+line 44), before the `for (const route of filteredRoutes)` loop, insert sort + pagination
+and iterate the slice. Replace:
+
+```javascript
+    for (const route of filteredRoutes) {
+```
+
+with:
+
+```javascript
+    sortDataByActiveHeader(ensureEl("routesHeader"), filteredRoutes, ROUTES_SORT_ACCESSORS);
+    const pageInfo = getEditorPage(filteredRoutes, routesPage);
+
+    for (const route of pageInfo.items) {
+```
+
+- [ ] **Step 4: Draw pagination controls and drop the DOM sort**
+
+After the footer update (lines 73-75) and the row-listener block, replace the trailing:
+
+```javascript
+    applySorting(routesHeader);
+```
+
+with:
+
+```javascript
+    renderEditorPagination(ensureEl("routesFooter"), pageInfo, page => {
+      routesPage.page = page;
+      routesOverviewAddLines();
+    });
+```
+
+> `routesFooterNumber` and the average length are computed from `filteredRoutes` (full
+> set), so they remain correct across pages.
+
+- [ ] **Step 5: Make `downloadRoutesData` export the full filtered set**
+
+Replace `downloadRoutesData` (line 113) so it iterates the search-filtered `pack.routes`
+instead of DOM rows:
+
+```javascript
+  function downloadRoutesData() {
+    let data = "Id,Route,Group,Length\n"; // headers
+
+    const searchText = ensureEl("routesSearch").value.toLowerCase().trim();
+    const exported = pack.routes.filter(route => {
+      if (!searchText) return true;
+      const name = (route.name || "").toLowerCase();
+      const group = (route.group || "").toLowerCase();
+      return name.includes(searchText) || group.includes(searchText);
+    });
+
+    exported.forEach(function (route) {
+      const length = rn(route.length * distanceScale) + " " + distanceUnitInput.value;
+      data += [route.i, route.name, route.group, length].join(",") + "\n";
+    });
+
+    const name = getFileName("Routes") + ".csv";
+    downloadFile(data, name);
+  }
+```
+
+- [ ] **Step 6: Syntax check**
+
+Run: `node --check public/modules/ui/routes-overview.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 7: Manual browser verification**
+
+`npm run dev`, open Routes overview on a map with many routes. Confirm: paginates at 200;
+sort spans all pages and resets to page 1; search resets to page 1 and filters across all
+pages; footer count + average length reflect the filtered set; lock-all + remove-all
+still re-render correctly and stay on a valid page; CSV export honors the search filter
+and contains all matching routes.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add public/modules/ui/routes-overview.js
+git commit -m "feat(routes-overview): paginate rows, sort across pages, fix CSV export"
+```
+
+---
+
+## Task 7: Cache-bust the changed scripts and final verification
+
+The app pins script versions with `?v=` query strings in `src/index.html` (e.g.
+`modules/ui/editors.js?v=1.122.11`) and in the dynamic `import()` calls inside
+`editors.js` (e.g. `../dynamic/editors/states-editor.js?v=1.122.11`). Deployed builds
+serve cached files unless these are bumped. In dev (vite) this is irrelevant, but bump
+them so production picks up the changes. The current `package.json` version is `1.122.12`.
+
+**Files:**
+- Modify: `src/index.html` (script tag for `modules/ui/editors.js`)
+- Modify: `public/modules/ui/editors.js` (the three `import("../dynamic/editors/…")` lines)
+
+- [ ] **Step 1: Find the current version strings**
+
+Run:
+```bash
+grep -n "editors.js?v=" src/index.html
+grep -n "dynamic/editors/.*?v=" public/modules/ui/editors.js
+```
+Expected: shows `editors.js?v=1.122.11` in index.html and `states-editor.js?v=1.122.11`,
+`cultures-editor.js?v=1.122.11`, `religions-editor.js?v=1.122.11` in editors.js.
+
+- [ ] **Step 2: Bump the changed files' versions to `1.122.12`**
+
+In `src/index.html`, change `modules/ui/editors.js?v=1.122.11` → `…?v=1.122.12`.
+
+In `public/modules/ui/editors.js`, change the `?v=1.122.11` to `?v=1.122.12` on the three
+dynamic imports for `states-editor.js`, `cultures-editor.js`, and `religions-editor.js`.
+
+> `rivers-overview.js` and `routes-overview.js` script tags in `src/index.html` should
+> also be bumped if they carry a `?v=` string — check with
+> `grep -n "rivers-overview.js?v=\|routes-overview.js?v=" src/index.html` and bump any
+> matches to `1.122.12`.
+
+- [ ] **Step 3: Syntax check the edited script**
+
+Run: `node --check public/modules/ui/editors.js`
+Expected: exits 0, no output.
+
+- [ ] **Step 4: Build to confirm nothing is broken**
+
+Run: `npm run build`
+Expected: `tsc` then `vite build` complete with no errors (build output goes to `../dist/`).
+
+- [ ] **Step 5: Full cross-editor smoke test**
+
+`npm run dev`, on a large map open each of the five editors in turn and confirm no console
+errors on open, pagination present where > 200 rows, and absent where ≤ 200 rows.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/index.html public/modules/ui/editors.js
+git commit -m "chore(editors): bump cache-bust versions for paginated editor scripts"
+```
+
+---
+
+## Self-review notes (already reconciled against the spec)
+
+- **Spec coverage:** toolkit (Task 1) ✓; states/cultures/religions/rivers/routes pagination (Tasks 2-6) ✓; full-set sort via `sortDataByActiveHeader` replacing `applySorting` ✓; full-set footer totals ✓; page-reset rules (open/sort/search/extinct) ✓; CSV page-independence for all five ✓; `randomizeStatesExpansion` guard ✓; neutral rows flow with sort (no pinning) ✓; percentage mode unchanged ✓.
+- **Naming consistency:** helpers `getActiveSort`, `sortDataByActiveHeader`, `getEditorPage`, `renderEditorPagination`, `bindEditorSortReset`, constant `EDITOR_PAGE_SIZE`; per-editor state holders `statesPage`/`culturesPage`/`religionsPage`/`riversPage`/`routesPage`; accessor maps `*_SORT_ACCESSORS` — used identically across all tasks.
+- **CSV caveat:** Tasks 3 & 4 instruct confirming the *original* header string / field quoting before applying the rewrite, because the exact column formatting was not fully captured in this plan. This is the one place to read the existing code first.
diff --git a/docs/superpowers/specs/2026-06-08-editor-pagination-design.md b/docs/superpowers/specs/2026-06-08-editor-pagination-design.md
new file mode 100644
index 0000000000..008332a8ed
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-08-editor-pagination-design.md
@@ -0,0 +1,305 @@
+# Editor Pagination — Design
+
+**Date:** 2026-06-08
+**Status:** Approved (pending spec review)
+
+## Problem
+
+The States Editor becomes unusable on maps with 1,000+ states. The dominant cost is
+that `statesEditorAddLines()` renders every state in one pass, and each state row
+triggers a coat-of-arms render (`COArenderer.trigger("stateCOA" + s.i, s.coa)`). At
+1k+ states this is thousands of synchronous emblem renders per open, plus a large DOM
+write. The same unbounded-render pattern exists in several other list editors.
+
+The Burgs Overview already solved this with pagination (`public/modules/ui/burgs-overview.js`):
+module-scoped page state, sort-the-full-set-then-slice, and `‹ Page n of N ›` controls.
+This spec generalizes that approach into a small shared toolkit and applies it to the
+five list editors most at risk on large maps.
+
+## Scope
+
+In scope — add pagination to:
+
+| Editor | File | Module kind | Per-row weight |
+|---|---|---|---|
+| States | `public/modules/dynamic/editors/states-editor.js` | ES module | Heavy (COA render per row) |
+| Cultures | `public/modules/dynamic/editors/cultures-editor.js` | ES module | Medium (fill-box + selects) |
+| Religions | `public/modules/dynamic/editors/religions-editor.js` | ES module | Medium (fill-box + selects) |
+| Rivers | `public/modules/ui/rivers-overview.js` | plain script | Light (text) |
+| Routes | `public/modules/ui/routes-overview.js` | plain script | Light (text) |
+
+Out of scope: provinces, markers, military, diplomacy, regiments overviews (smaller or
+per-state datasets); the existing burgs implementation (left as-is); the pre-existing
+"Cannot render custom emblem" console warnings (a separate `renderer.ts` concern, not
+caused or fixed here — pagination merely reduces how often it fires).
+
+## Page size
+
+`200` rows per page, matching `BURGS_PAGE_SIZE`.
+
+## Architecture: shared toolkit in `editors.js`
+
+`public/modules/ui/editors.js` is a plain script whose functions (`applySorting`,
+`sortLines`, `applySortingByHeader`, `fitContent`, …) are global. Adding the pagination
+helpers here makes them reachable from both the plain-script overviews and the
+ES-module editors (modules share `window`). New helpers:
+
+```js
+const EDITOR_PAGE_SIZE = 200;
+
+// Read the active sort column from a header element, or null if none is active.
+// Mirrors how applySorting / sortFilteredBurgs read the icon-sort-* class.
+function getActiveSort(headers) {
+  const header = headers.querySelector("div[class*='icon-sort']");
+  if (!header) return null;
+  return {
+    sortby: header.dataset.sortby,
+    name: header.classList.contains("alphabetically"),
+    desc: header.className.includes("-down") ? -1 : 1
+  };
+}
+
+// Sort `data` IN PLACE to match the header's active column.
+// `accessors` maps a data-sortby key to a value getter: {name: s => s.name, ...}.
+function sortDataByActiveHeader(headers, data, accessors) {
+  const sort = getActiveSort(headers);
+  if (!sort) return data;
+  const get = accessors[sort.sortby];
+  if (!get) return data;
+  return data.sort((a, b) => {
+    const av = get(a);
+    const bv = get(b);
+    if (sort.name) {
+      const as = String(av), bs = String(bv);
+      return (as > bs ? 1 : as < bs ? -1 : 0) * sort.desc;
+    }
+    return (av - bv) * sort.desc;
+  });
+}
+
+// Clamp the page and return the slice for the current page.
+// `pageRef` is a mutable {page} holder so the clamped value persists.
+function getEditorPage(data, pageRef, size = EDITOR_PAGE_SIZE) {
+  const total = data.length;
+  const totalPages = Math.max(1, Math.ceil(total / size));
+  pageRef.page = Math.min(Math.max(1, pageRef.page || 1), totalPages);
+  const start = (pageRef.page - 1) * size;
+  return {items: data.slice(start, start + size), page: pageRef.page, totalPages, total};
+}
+
+// Inject/refresh the pagination controls inside `footerEl`. Calls onGoto(page) on nav.
+// Auto-hidden when there is only one page. Rebuilding innerHTML drops stale listeners.
+function renderEditorPagination(footerEl, info, onGoto) {
+  let nav = footerEl.querySelector(":scope > .editorPagination");
+  if (!nav) {
+    // margin-left:auto only right-aligns inside a flex row; the .totalLine footers are
+    // not guaranteed to be flex, so make the footer a flex row when we first inject.
+    footerEl.style.display = "flex";
+    footerEl.style.alignItems = "center";
+    nav = document.createElement("div");
+    nav.className = "editorPagination";
+    nav.style.cssText = "margin-left: auto; display: inline-flex; gap: 0.3em; align-items: center;";
+    footerEl.appendChild(nav);
+  }
+  if (info.totalPages <= 1) {
+    nav.style.display = "none";
+    nav.innerHTML = "";
+    return;
+  }
+  nav.style.display = "inline-flex";
+  nav.innerHTML = /* html */ `
+    <button class="icon-left-open editorPagePrev" data-tip="Previous page" style="padding: 0 4px;" ${info.page <= 1 ? "disabled" : ""}></button>
+    <span>Page&nbsp;<input class="editorPageInput" type="number" min="1" max="${info.totalPages}" value="${info.page}" style="width: 3.5em" data-tip="Jump to page" />&nbsp;of&nbsp;${info.totalPages}</span>
+    <button class="icon-right-open editorPageNext" data-tip="Next page" style="padding: 0 4px;" ${info.page >= info.totalPages ? "disabled" : ""}></button>`;
+  nav.querySelector(".editorPagePrev").on("click", () => onGoto(info.page - 1));
+  nav.querySelector(".editorPageNext").on("click", () => onGoto(info.page + 1));
+  nav.querySelector(".editorPageInput").on("change", e => onGoto(+e.target.value));
+}
+
+// Bind sort-header clicks to reset to page 1 and re-render.
+// Must be registered AFTER sortLines is bound so the icon-sort-* class is toggled first.
+function bindEditorSortReset(headerEl, onSort) {
+  headerEl.querySelectorAll(".sortable").forEach(el => el.on("click", () => onSort()));
+}
+```
+
+### Why two sort handlers (the existing precedent)
+
+`sortLines` (bound via the global `.sortable` handler for static HTML, or via
+`applySortingByHeader` for dynamically-injected editors) toggles the `icon-sort-*`
+class and does a DOM-only sort. Burgs adds a *second* handler that resets the page and
+re-renders, and `sortFilteredBurgs` reads the freshly-toggled class to sort the full
+set. We reproduce exactly this: keep the existing `sortLines` binding (it owns the
+visual sort indicator), and add `bindEditorSortReset` to trigger the full re-render.
+Listener fire order follows registration order, so `bindEditorSortReset` must be
+registered after the `sortLines` binding.
+
+The old per-editor `applySorting(headerEl)` call at the end of each `…AddLines` is
+**removed** — `sortDataByActiveHeader` now sorts the data before slicing, which is what
+makes sort span all pages instead of just the visible 200. Initial sort still works
+because the initial `icon-sort-*` class is preset in the editor HTML and read by
+`getActiveSort`.
+
+## Per-editor changes
+
+Each `…AddLines` function is restructured to:
+
+1. Build the filtered data array (preserve existing filters — see per-editor notes).
+2. `sortDataByActiveHeader(headerEl, data, ACCESSORS)`.
+3. Compute footer totals over the **full filtered `data`** (not the page slice).
+4. `const pageInfo = getEditorPage(data, pageRef)`.
+5. Build row HTML by looping over `pageInfo.items` only.
+6. Write the body, update the footer, then `renderEditorPagination(footerEl, pageInfo, gotoPage)`.
+7. Attach row listeners (existing logic, now only over the page's rows).
+8. Remove the trailing `applySorting(...)` call.
+
+Page state holder per editor (module/file scope): `let <name>Page = {page: 1};`
+`gotoPage(n)` sets `<name>Page.page = n` and calls the editor's `…AddLines`.
+
+Page reset rules:
+- **Reset to 1:** on `open()`; on sort (via `bindEditorSortReset`); on search input
+  (rivers/routes); on the religions extinct-toggle.
+- **Keep (clamped):** on data mutations that re-render via refresh/addLines
+  (add/remove/recalculate/merge). `getEditorPage` clamps, so removing the last row on
+  the last page lands the user on the new last page rather than an empty one.
+
+### Sort-accessor maps
+
+States (`statesHeader`):
+```
+name: s => s.name
+form: s => s.formName
+capital: s => s.i ? pack.burgs[s.capital].name : ""
+culture: s => s.i ? pack.cultures[s.culture].name : ""
+burgs: s => s.burgs
+area: s => s.area
+population: s => s.rural * populationRate + s.urban * populationRate * urbanization
+type: s => s.type || ""
+expansionism: s => s.expansionism || 0
+cells: s => s.cells
+```
+
+Cultures (`culturesHeader`):
+```
+name: c => c.name
+type: c => c.type || ""
+base: c => c.base
+cells: c => c.cells
+expansionism: c => c.expansionism || 0
+area: c => c.area
+population: c => c.rural * populationRate + c.urban * populationRate * urbanization
+emblems: c => c.shield
+```
+
+Religions (`religionsHeader`):
+```
+name: r => r.name
+type: r => r.type || ""
+form: r => r.form || ""
+deity: r => r.deity || ""
+area: r => r.area
+population: r => r.rural * populationRate + r.urban * populationRate * urbanization
+expansion: r => r.expansion || ""
+expansionism: r => r.expansionism || 0
+```
+
+Rivers (`riversHeader`) — `riversById` already built in the function:
+```
+name: r => r.name || ""
+type: r => r.type || ""
+discharge: r => r.discharge
+length: r => r.length
+width: r => r.width
+basin: r => riversById.get(r.basin)?.name || ""
+```
+
+Routes (`routesHeader`):
+```
+name: route => route.name || ""
+group: route => route.group || ""
+length: route => route.length
+```
+
+### Data arrays paginated
+
+- States: `pack.states.filter(s => !s.removed)` (includes neutral `i=0`).
+- Cultures: `pack.cultures.filter(c => !c.removed)` (includes neutral `i=0`).
+- Religions: `pack.religions.filter(r => !r.removed && !(r.i && !r.cells && $body.dataset.extinct !== "show"))`
+  (preserves the existing extinct-hiding rule).
+- Rivers: `pack.rivers` then the existing search filter.
+- Routes: `pack.routes` then the existing search filter; rows with `< 2` points are
+  still skipped at render time (they are rare; they may occupy a slot in the slice but
+  simply render nothing — acceptable, matches current skip behavior).
+
+Neutral rows (`i=0`) flow through sort and pagination as ordinary items (per decision —
+matches burgs; not pinned to the top).
+
+## Regression fixes (page-independence)
+
+These currently read the rendered DOM, which after pagination would reflect only the
+current page. Each is reworked to be page-independent.
+
+1. **CSV exports** (all five): `downloadStatesCsv`, `downloadCulturesCsv`,
+   `downloadReligionsCsv`, `downloadRiversData`, `downloadRoutesData` iterate
+   `$body.querySelectorAll(":scope > div")` today. Rework each to iterate the full
+   logical set instead:
+   - States/cultures/religions: iterate the same filtered `pack` set the editor shows
+     (non-removed; religions also respects the extinct rule), recomputing the exported
+     fields from `pack` (the values are simple derivations already computed in
+     `…AddLines`). Existing `pack`-side lookups (e.g. `origins`, `fullName`,
+     rural/urban populations) are unchanged.
+   - Rivers/routes: re-apply the active search filter and iterate the full filtered
+     set (today's DOM-based export already reflects the search filter; this preserves
+     that, minus the page truncation).
+
+   CSV row order is not significant and need not match the on-screen sort.
+
+2. **`randomizeStatesExpansion`** (states): writes
+   `$body.querySelector("div.states[data-id='<i>'] > input.statePower").value` for every
+   state. Off-page states have no DOM row, so guard the assignment with `?.` (the
+   authoritative value is still written to `s.expansionism`; the input update is a
+   visual nicety for visible rows only).
+
+## Behavior notes (accepted, by design)
+
+- **Sort operates on the full array; percentage mode operates on visible rows.** Sort
+  reorders the entire filtered set before slicing, so "sort by population descending"
+  surfaces the global top rows on page 1. Percentage mode only rewrites the displayed
+  text of rendered rows, but divides by footer totals computed over the full set, so
+  each visible percentage is its true share; paging/sorting re-applies the transform on
+  re-render. No incorrect value is ever shown.
+- Percentage/absolute toggling keeps its existing per-render re-application
+  (`if ($body.dataset.type === "percentage") { ...; togglePercentageMode(); }`).
+
+## Testing
+
+Manual verification (no automated UI test harness for these dialogs):
+
+1. Load a large map (1k+ states). Open States Editor — confirm it opens quickly and
+   shows page 1 of N with 200 rows.
+2. Page next/prev and jump-to-page via the input; confirm clamping at bounds and
+   disabled buttons at the ends.
+3. Click each sortable column; confirm page resets to 1 and ordering reflects the full
+   set (e.g. top of page 1 is the global max/min, not just the previously-visible max).
+4. Toggle percentage mode on a non-first page; confirm visible rows show correct
+   percentages of the full-set totals.
+5. Export CSV from a non-first page; confirm the file contains all rows, not just 200.
+6. Remove the only row on the last page; confirm the editor lands on the new last page.
+7. Repeat opens for cultures, religions, rivers, routes; for rivers/routes confirm the
+   search box resets to page 1 and filters across all pages; confirm their CSV exports
+   honor the search filter and span all pages.
+8. Confirm editors with `< 200` items show no pagination controls.
+
+## Files touched
+
+- `public/modules/ui/editors.js` — add the five shared helpers + `EDITOR_PAGE_SIZE`.
+- `public/modules/dynamic/editors/states-editor.js` — paginate, accessors, page reset,
+  fix `downloadStatesCsv` + `randomizeStatesExpansion`.
+- `public/modules/dynamic/editors/cultures-editor.js` — paginate, accessors, page reset,
+  fix `downloadCulturesCsv`.
+- `public/modules/dynamic/editors/religions-editor.js` — paginate, accessors, page reset,
+  fix `downloadReligionsCsv`.
+- `public/modules/ui/rivers-overview.js` — paginate, accessors, search-resets-page,
+  fix `downloadRiversData`.
+- `public/modules/ui/routes-overview.js` — paginate, accessors, search-resets-page,
+  fix `downloadRoutesData`.
diff --git a/public/modules/dynamic/editors/cultures-editor.js b/public/modules/dynamic/editors/cultures-editor.js
index 5c2b9b5b4f..3ceeec7c45 100644
--- a/public/modules/dynamic/editors/cultures-editor.js
+++ b/public/modules/dynamic/editors/cultures-editor.js
@@ -4,6 +4,18 @@ let culturesManualHistory = [];
 
 const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
 
+const culturesPage = {page: 1};
+const CULTURES_SORT_ACCESSORS = {
+  name: c => c.name,
+  type: c => c.type || "",
+  base: c => c.base,
+  cells: c => c.cells,
+  expansionism: c => c.expansionism || 0,
+  area: c => c.area,
+  population: c => c.rural * populationRate + c.urban * populationRate * urbanization,
+  emblems: c => c.shield
+};
+
 export function open() {
   closeDialogs("#culturesEditor, .stable");
   if (!layerIsOn("toggleCultures")) toggleCultures();
@@ -12,6 +24,7 @@ export function open() {
   if (layerIsOn("toggleReligions")) toggleReligions();
   if (layerIsOn("toggleProvinces")) toggleProvinces();
 
+  culturesPage.page = 1;
   refreshCulturesEditor();
 
   $("#culturesEditor").dialog({
@@ -77,6 +90,10 @@ function insertEditorHtml() {
 
 function addListeners() {
   applySortingByHeader("culturesHeader");
+  bindEditorSortReset(ensureEl("culturesHeader"), () => {
+    culturesPage.page = 1;
+    culturesEditorAddLines();
+  });
 
   ensureEl("culturesEditorRefresh").on("click", refreshCulturesEditor);
   ensureEl("culturesEditStyle").on("click", () => editStyle("cults"));
@@ -120,15 +137,25 @@ function culturesCollectStatistics() {
 
 function culturesEditorAddLines() {
   const unit = getAreaUnit();
-  let lines = "";
-  let totalArea = 0;
-  let totalPopulation = 0;
 
   const emblemShapeGroup = ensureEl("emblemShape").selectedOptions[0]?.parentNode?.label;
   const selectShape = emblemShapeGroup === "Diversiform";
 
-  for (const c of pack.cultures) {
-    if (c.removed) continue;
+  const allCultures = pack.cultures.filter(c => !c.removed);
+  sortDataByActiveHeader(ensureEl("culturesHeader"), allCultures, CULTURES_SORT_ACCESSORS);
+
+  // footer totals over the full set
+  let totalArea = 0;
+  let totalPopulation = 0;
+  for (const c of allCultures) {
+    totalArea += getArea(c.area);
+    totalPopulation += rn(c.rural * populationRate + c.urban * populationRate * urbanization);
+  }
+
+  const pageInfo = getEditorPage(allCultures, culturesPage);
+  let lines = "";
+
+  for (const c of pageInfo.items) {
     const area = getArea(c.area);
     const rural = c.rural * populationRate;
     const urban = c.urban * populationRate * urbanization;
@@ -136,8 +163,6 @@ function culturesEditorAddLines() {
     const populationTip = `Total population: ${si(population)}. Rural population: ${si(rural)}. Urban population: ${si(
       urban
     )}. Click to edit`;
-    totalArea += area;
-    totalPopulation += population;
 
     if (!c.i) {
       // Uncultured (neutral) line
@@ -231,6 +256,11 @@ function culturesEditorAddLines() {
   ensureEl("culturesFooterArea").dataset.area = totalArea;
   ensureEl("culturesFooterPopulation").dataset.population = totalPopulation;
 
+  renderEditorPagination(ensureEl("culturesFooter"), pageInfo, page => {
+    culturesPage.page = page;
+    culturesEditorAddLines();
+  });
+
   // add listeners
   $body.querySelectorAll(":scope > div").forEach($line => {
     $line.on("mouseenter", cultureHighlightOn);
@@ -258,7 +288,6 @@ function culturesEditorAddLines() {
     $body.dataset.type = "absolute";
     togglePercentageMode();
   }
-  applySorting($culturesHeader);
   $("#culturesEditor").dialog({ width: fitContent() });
 }
 
@@ -578,12 +607,12 @@ function drawCultureCenters() {
     .attr("cy", d => pack.cells.p[d.center][1])
     .on("mouseenter", d => {
       tip(tooltip, true);
-      $body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
+      $body.querySelector(`div[data-id='${d.i}']`)?.classList.add("selected");
       cultureHighlightOn(event);
     })
     .on("mouseleave", d => {
       tip("", true);
-      $body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
+      $body.querySelector(`div[data-id='${d.i}']`)?.classList.remove("selected");
       cultureHighlightOff(event);
     })
     .call(d3.drag().on("start", cultureCenterDrag));
@@ -682,6 +711,8 @@ function recalculateCultures(force) {
 function enterCultureManualAssignent() {
   if (!layerIsOn("toggleCultures")) toggleCultures();
   customization = 4;
+  culturesPage.page = 1;
+  culturesEditorAddLines();
   cults.append("g").attr("id", "temp");
   document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
   ensureEl("culturesManuallyButtons").style.display = "inline-block";
@@ -718,8 +749,10 @@ function selectCultureOnMapClick() {
   const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
   const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
 
-  $body.querySelector("div.selected").classList.remove("selected");
-  $body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
+  const $row = $body.querySelector("div[data-id='" + culture + "']");
+  if (!$row) return; // clicked culture's row is on another page; ignore to avoid a crash
+  $body.querySelector("div.selected")?.classList.remove("selected");
+  $row.classList.add("selected");
 }
 
 function dragCultureBrush() {
@@ -794,7 +827,7 @@ function exitCulturesManualAssignment(close) {
   ensureEl("culturesManuallyButtons").style.display = "none";
 
   culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
-  culturesFooter.style.display = "block";
+  culturesFooter.style.display = "flex";
   $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
   if (!close) $("#culturesEditor").dialog({ position: { my: "right top", at: "right-10 top+10", of: "svg" } });
 
@@ -858,15 +891,16 @@ function addCulture() {
 function downloadCulturesCsv() {
   const unit = getAreaUnit("2");
   const headers = `Id,Name,Color,Cells,Expansionism,Type,Area ${unit},Population,Namesbase,Emblems Shape,Origins`;
-  const lines = Array.from($body.querySelectorAll(":scope > div"));
-  const data = lines.map($line => {
-    const { id, name, color, cells, expansionism, type, area, population, emblems, base } = $line.dataset;
-    const namesbase = nameBases[+base].name;
-    const { origins } = pack.cultures[+id];
-    const originList = origins.filter(origin => origin).map(origin => pack.cultures[origin].name);
-    const originText = '"' + originList.join(", ") + '"';
-    return [id, name, color, cells, expansionism, type, area, population, namesbase, emblems, originText].join(",");
-  });
+  const data = pack.cultures
+    .filter(c => !c.removed)
+    .map(c => {
+      const area = getArea(c.area);
+      const population = rn(c.rural * populationRate + c.urban * populationRate * urbanization);
+      const namesbase = nameBases[c.base].name;
+      const originList = (c.origins || []).filter(origin => origin).map(origin => pack.cultures[origin].name);
+      const originText = '"' + originList.join(", ") + '"';
+      return [c.i, c.name, c.color || "", c.cells, c.i ? (c.expansionism ?? "") : "", c.type || "", area, population, namesbase, c.shield, originText].join(",");
+    });
   const csvData = [headers].concat(data).join("\n");
 
   const name = getFileName("Cultures") + ".csv";
diff --git a/public/modules/dynamic/editors/religions-editor.js b/public/modules/dynamic/editors/religions-editor.js
index b3d151635d..543dc6ec2c 100644
--- a/public/modules/dynamic/editors/religions-editor.js
+++ b/public/modules/dynamic/editors/religions-editor.js
@@ -1,6 +1,18 @@
 const $body = insertEditorHtml();
 addListeners();
 
+const religionsPage = {page: 1};
+const RELIGIONS_SORT_ACCESSORS = {
+  name: r => r.name,
+  type: r => r.type || "",
+  form: r => r.form || "",
+  deity: r => r.deity || "",
+  area: r => r.area,
+  population: r => r.rural * populationRate + r.urban * populationRate * urbanization,
+  expansion: r => r.expansion || "",
+  expansionism: r => r.expansionism || 0
+};
+
 export function open() {
   closeDialogs("#religionsEditor, .stable");
   if (!layerIsOn("toggleReligions")) toggleReligions();
@@ -9,6 +21,7 @@ export function open() {
   if (layerIsOn("toggleCultures")) toggleCultures();
   if (layerIsOn("toggleProvinces")) toggleProvinces();
 
+  religionsPage.page = 1;
   refreshReligionsEditor();
   drawReligionCenters();
 
@@ -92,6 +105,10 @@ function insertEditorHtml() {
 
 function addListeners() {
   applySortingByHeader("religionsHeader");
+  bindEditorSortReset(ensureEl("religionsHeader"), () => {
+    religionsPage.page = 1;
+    religionsEditorAddLines();
+  });
 
   ensureEl("religionsEditorRefresh").on("click", refreshReligionsEditor);
   ensureEl("religionsEditStyle").on("click", () => editStyle("relig"));
@@ -129,17 +146,27 @@ function religionsCollectStatistics() {
   }
 }
 
-// add line for each religion
+// add line for each religion (current page only; sort + totals span all religions)
 function religionsEditorAddLines() {
   const unit = " " + getAreaUnit();
-  let lines = "";
+
+  const allReligions = pack.religions.filter(
+    r => !r.removed && !(r.i && !r.cells && $body.dataset.extinct !== "show")
+  );
+  sortDataByActiveHeader(ensureEl("religionsHeader"), allReligions, RELIGIONS_SORT_ACCESSORS);
+
+  // footer totals over the full (visible) set
   let totalArea = 0;
   let totalPopulation = 0;
+  for (const r of allReligions) {
+    totalArea += getArea(r.area);
+    totalPopulation += rn(r.rural * populationRate + r.urban * populationRate * urbanization);
+  }
 
-  for (const r of pack.religions) {
-    if (r.removed) continue;
-    if (r.i && !r.cells && $body.dataset.extinct !== "show") continue; // hide extinct religions
+  const pageInfo = getEditorPage(allReligions, religionsPage);
+  let lines = "";
 
+  for (const r of pageInfo.items) {
     const area = getArea(r.area);
     const rural = r.rural * populationRate;
     const urban = r.urban * populationRate * urbanization;
@@ -147,8 +174,6 @@ function religionsEditorAddLines() {
     const populationTip = `Believers: ${si(population)}; Rural areas: ${si(rural)}; Urban areas: ${si(
       urban
     )}. Click to change`;
-    totalArea += area;
-    totalPopulation += population;
 
     if (!r.i) {
       // No religion (neutral) line
@@ -233,6 +258,11 @@ function religionsEditorAddLines() {
   ensureEl("religionsFooterArea").dataset.area = totalArea;
   ensureEl("religionsFooterPopulation").dataset.population = totalPopulation;
 
+  renderEditorPagination(ensureEl("religionsFooter"), pageInfo, page => {
+    religionsPage.page = page;
+    religionsEditorAddLines();
+  });
+
   // add listeners
   $body.querySelectorAll(":scope > div").forEach($line => {
     $line.on("mouseenter", religionHighlightOn);
@@ -258,7 +288,6 @@ function religionsEditorAddLines() {
     togglePercentageMode();
   }
 
-  applySorting(religionsHeader);
   $("#religionsEditor").dialog({ width: fitContent() });
 }
 
@@ -640,6 +669,7 @@ async function showHierarchy() {
 }
 
 function toggleExtinct() {
+  religionsPage.page = 1;
   $body.dataset.extinct = $body.dataset.extinct !== "show" ? "show" : "hide";
   religionsEditorAddLines();
   drawReligionCenters();
@@ -648,6 +678,8 @@ function toggleExtinct() {
 function enterReligionsManualAssignent() {
   if (!layerIsOn("toggleReligions")) toggleReligions();
   customization = 7;
+  religionsPage.page = 1;
+  religionsEditorAddLines();
   relig.append("g").attr("id", "temp");
   document.querySelectorAll("#religionsBottom > *").forEach(el => (el.style.display = "none"));
   ensureEl("religionsManuallyButtons").style.display = "inline-block";
@@ -683,8 +715,10 @@ function selectReligionOnMapClick() {
   const assigned = relig.select("#temp").select("polygon[data-cell='" + i + "']");
   const religion = assigned.size() ? +assigned.attr("data-religion") : pack.cells.religion[i];
 
-  $body.querySelector("div.selected").classList.remove("selected");
-  $body.querySelector("div[data-id='" + religion + "']").classList.add("selected");
+  const $row = $body.querySelector("div[data-id='" + religion + "']");
+  if (!$row) return; // clicked religion's row is on another page; ignore to avoid a crash
+  $body.querySelector("div.selected")?.classList.remove("selected");
+  $row.classList.add("selected");
 }
 
 function dragReligionBrush() {
@@ -760,7 +794,7 @@ function exitReligionsManualAssignment(close) {
   ensureEl("religionsEditor")
     .querySelectorAll(".hide")
     .forEach(el => el.classList.remove("hidden"));
-  ensureEl("religionsFooter").style.display = "block";
+  ensureEl("religionsFooter").style.display = "flex";
   $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
   if (!close) $("#religionsEditor").dialog({ position: { my: "right top", at: "right-10 top+10", of: "svg" } });
 
@@ -809,15 +843,28 @@ function addReligion() {
 function downloadReligionsCsv() {
   const unit = getAreaUnit("2");
   const headers = `Id,Name,Color,Type,Form,Supreme Deity,Area ${unit},Believers,Origins,Potential,Expansionism`;
-  const lines = Array.from($body.querySelectorAll(":scope > div"));
-  const data = lines.map($line => {
-    const { id, name, color, type, form, deity, area, population, expansion, expansionism } = $line.dataset;
-    const deityText = '"' + deity + '"';
-    const { origins } = pack.religions[+id];
-    const originList = (origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
-    const originText = '"' + originList.join(", ") + '"';
-    return [id, name, color, type, form, deityText, area, population, originText, expansion, expansionism].join(",");
-  });
+  const data = pack.religions
+    .filter(r => !r.removed && !(r.i && !r.cells && $body.dataset.extinct !== "show"))
+    .map(r => {
+      const area = getArea(r.area);
+      const population = rn(r.rural * populationRate + r.urban * populationRate * urbanization);
+      const deityText = '"' + (r.deity || "") + '"';
+      const originList = (r.origins || []).filter(origin => origin).map(origin => pack.religions[origin].name);
+      const originText = '"' + originList.join(", ") + '"';
+      return [
+        r.i,
+        r.name,
+        r.color || "",
+        r.type || "",
+        r.form || "",
+        deityText,
+        area,
+        population,
+        originText,
+        r.expansion || "",
+        r.i ? (r.expansionism ?? "") : ""
+      ].join(",");
+    });
   const csvData = [headers].concat(data).join("\n");
 
   const name = getFileName("Religions") + ".csv";
diff --git a/public/modules/dynamic/editors/states-editor.js b/public/modules/dynamic/editors/states-editor.js
index 1433aac920..2548ebb1bd 100644
--- a/public/modules/dynamic/editors/states-editor.js
+++ b/public/modules/dynamic/editors/states-editor.js
@@ -1,6 +1,19 @@
 const $body = insertEditorHtml();
 addListeners();
 let statesManualHistory = [];
+const statesPage = {page: 1};
+const STATES_SORT_ACCESSORS = {
+  name: s => s.name,
+  form: s => s.formName,
+  capital: s => (s.i ? pack.burgs[s.capital].name : ""),
+  culture: s => (s.i ? pack.cultures[s.culture].name : ""),
+  burgs: s => s.burgs,
+  area: s => s.area,
+  population: s => s.rural * populationRate + s.urban * populationRate * urbanization,
+  type: s => s.type || "",
+  expansionism: s => s.expansionism || 0,
+  cells: s => s.cells
+};
 
 export function open() {
   closeDialogs("#statesEditor, .stable");
@@ -10,6 +23,7 @@ export function open() {
   if (layerIsOn("toggleBiomes")) toggleBiomes();
   if (layerIsOn("toggleReligions")) toggleReligions();
 
+  statesPage.page = 1;
   refreshStatesEditor();
 
   $("#statesEditor").dialog({
@@ -96,6 +110,10 @@ function insertEditorHtml() {
 
 function addListeners() {
   applySortingByHeader("statesHeader");
+  bindEditorSortReset(ensureEl("statesHeader"), () => {
+    statesPage.page = 1;
+    statesEditorAddLines();
+  });
 
   ensureEl("statesEditorRefresh").on("click", refreshStatesEditor);
   ensureEl("statesEditStyle").on("click", () => editStyle("regions"));
@@ -156,17 +174,28 @@ function refreshStatesEditor() {
   statesEditorAddLines();
 }
 
-// add line for each state
+// add line for each state (current page only; sort + totals span all states)
 function statesEditorAddLines() {
   const unit = getAreaUnit();
   const hidden = ensureEl("statesRegenerateButtons").style.display === "block" ? "" : "hidden"; // toggle regenerate columns
-  let lines = "";
+
+  const allStates = pack.states.filter(s => !s.removed);
+  sortDataByActiveHeader(ensureEl("statesHeader"), allStates, STATES_SORT_ACCESSORS);
+
+  // footer totals over the full set
   let totalArea = 0;
   let totalPopulation = 0;
   let totalBurgs = 0;
+  for (const s of allStates) {
+    totalArea += getArea(s.area);
+    totalPopulation += rn(s.rural * populationRate + s.urban * populationRate * urbanization);
+    totalBurgs += s.burgs;
+  }
 
-  for (const s of pack.states) {
-    if (s.removed) continue;
+  const pageInfo = getEditorPage(allStates, statesPage);
+  let lines = "";
+
+  for (const s of pageInfo.items) {
     const area = getArea(s.area);
     const rural = s.rural * populationRate;
     const urban = s.urban * populationRate * urbanization;
@@ -174,9 +203,6 @@ function statesEditorAddLines() {
     const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(
       urban
     )}. Click to change`;
-    totalArea += area;
-    totalPopulation += population;
-    totalBurgs += s.burgs;
     const focused = defs.select("#fog #focusState" + s.i).size();
 
     if (!s.i) {
@@ -283,6 +309,11 @@ function statesEditorAddLines() {
   ensureEl("statesFooterPopulation").innerHTML = si(totalPopulation);
   ensureEl("statesFooterPopulation").dataset.population = totalPopulation;
 
+  renderEditorPagination(ensureEl("statesFooter"), pageInfo, page => {
+    statesPage.page = page;
+    statesEditorAddLines();
+  });
+
   // add listeners
   $body.querySelectorAll(":scope > div").forEach($line => {
     $line.on("mouseenter", stateHighlightOn);
@@ -294,7 +325,6 @@ function statesEditorAddLines() {
     $body.dataset.type = "absolute";
     togglePercentageMode();
   }
-  applySorting(statesHeader);
   $("#statesEditor").dialog({ width: fitContent() });
 }
 
@@ -873,7 +903,8 @@ function randomizeStatesExpansion() {
     if (!s.i || s.removed) return;
     const expansionism = rn(Math.random() * 4 + 1, 1);
     s.expansionism = expansionism;
-    $body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower").value = expansionism;
+    const $power = $body.querySelector("div.states[data-id='" + s.i + "'] > input.statePower");
+    if ($power) $power.value = expansionism;
   });
   recalculateStates(true, true);
 }
@@ -892,6 +923,8 @@ function exitRegenerationMenu() {
 function enterStatesManualAssignent() {
   if (!layerIsOn("toggleStates")) toggleStates();
   customization = 2;
+  statesPage.page = 1;
+  statesEditorAddLines();
   statesBody.append("g").attr("id", "temp");
   document.querySelectorAll("#statesBottom > button").forEach(el => (el.style.display = "none"));
   ensureEl("statesManuallyButtons").style.display = "inline-block";
@@ -930,8 +963,10 @@ function selectStateOnMapClick() {
   const assigned = statesBody.select("#temp").select("polygon[data-cell='" + i + "']");
   const state = assigned.size() ? +assigned.attr("data-state") : pack.cells.state[i];
 
-  $body.querySelector("div.selected").classList.remove("selected");
-  $body.querySelector("div[data-id='" + state + "']").classList.add("selected");
+  const $row = $body.querySelector("div[data-id='" + state + "']");
+  if (!$row) return; // clicked state's row is on another page; ignore to avoid a crash
+  $body.querySelector("div.selected")?.classList.remove("selected");
+  $row.classList.add("selected");
 }
 
 function dragStateBrush() {
@@ -1171,7 +1206,7 @@ function exitStatesManualAssignment(close) {
   ensureEl("statesEditor")
     .querySelectorAll(".hide:not(.show)")
     .forEach(el => el.classList.remove("hidden"));
-  statesFooter.style.display = "block";
+  statesFooter.style.display = "flex";
   $body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
   if (!close)
     $("#statesEditor").dialog({ position: { my: "right top", at: "right-10 top+10", of: "svg", collision: "fit" } });
@@ -1491,31 +1526,33 @@ function openStateMergeDialog() {
 function downloadStatesCsv() {
   const unit = getAreaUnit("2");
   const headers = `Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area ${unit},Total Population,Rural Population,Urban Population`;
-  const lines = Array.from($body.querySelectorAll(":scope > div"));
-  const data = lines.map($line => {
-    const { id, name, form, color, capital, culture, type, expansionism, cells, burgs, area, population } =
-      $line.dataset;
-    const { fullName = "", rural, urban } = pack.states[+id];
-    const ruralPopulation = Math.round(rural * populationRate);
-    const urbanPopulation = Math.round(urban * populationRate * urbanization);
-    return [
-      id,
-      name,
-      fullName,
-      form,
-      color,
-      capital,
-      culture,
-      type,
-      expansionism,
-      cells,
-      burgs,
-      area,
-      population,
-      ruralPopulation,
-      urbanPopulation
-    ].join(",");
-  });
+  const data = pack.states
+    .filter(s => !s.removed)
+    .map(s => {
+      const area = getArea(s.area);
+      const ruralPopulation = Math.round(s.rural * populationRate);
+      const urbanPopulation = Math.round(s.urban * populationRate * urbanization);
+      const population = ruralPopulation + urbanPopulation;
+      const capital = s.i ? pack.burgs[s.capital].name : "";
+      const culture = s.i ? pack.cultures[s.culture].name : "";
+      return [
+        s.i,
+        s.name,
+        s.fullName || "",
+        s.formName || "",
+        s.color || "",
+        capital,
+        culture,
+        s.type || "",
+        s.expansionism ?? "",
+        s.cells,
+        s.burgs,
+        area,
+        population,
+        ruralPopulation,
+        urbanPopulation
+      ].join(",");
+    });
   const csvData = [headers].concat(data).join("\n");
 
   const name = getFileName("States") + ".csv";
diff --git a/public/modules/ui/editors.js b/public/modules/ui/editors.js
index eabf03dbaa..a2d36a982b 100644
--- a/public/modules/ui/editors.js
+++ b/public/modules/ui/editors.js
@@ -129,6 +129,91 @@ function applySorting(headers) {
     .forEach(line => list.appendChild(line));
 }
 
+// ---- Shared editor pagination (used by states, cultures, religions, rivers, routes) ----
+const EDITOR_PAGE_SIZE = 200;
+
+// Read the active sort column from a header element, or null if none is active.
+// Mirrors how applySorting reads the icon-sort-* class set by sortLines.
+function getActiveSort(headers) {
+  const header = headers.querySelector("div[class*='icon-sort']");
+  if (!header) return null;
+  return {
+    sortby: header.dataset.sortby,
+    name: header.classList.contains("alphabetically"),
+    desc: header.className.includes("-down") ? -1 : 1
+  };
+}
+
+// Sort `data` IN PLACE to match the header's active column.
+// `accessors` maps a data-sortby key to a value getter, e.g. {name: s => s.name}.
+function sortDataByActiveHeader(headers, data, accessors) {
+  const sort = getActiveSort(headers);
+  if (!sort) return data;
+  const get = accessors[sort.sortby];
+  if (!get) return data;
+  return data.sort((a, b) => {
+    const av = get(a);
+    const bv = get(b);
+    if (sort.name) {
+      const as = String(av);
+      const bs = String(bv);
+      return (as > bs ? 1 : as < bs ? -1 : 0) * sort.desc;
+    }
+    return (av - bv) * sort.desc;
+  });
+}
+
+// Clamp the page and return the slice for the current page.
+// `pageRef` is a mutable {page} holder so the clamped value persists across calls.
+function getEditorPage(data, pageRef, size = EDITOR_PAGE_SIZE) {
+  const total = data.length;
+  const totalPages = Math.max(1, Math.ceil(total / size));
+  pageRef.page = Math.min(Math.max(1, pageRef.page || 1), totalPages);
+  const start = (pageRef.page - 1) * size;
+  return {items: data.slice(start, start + size), page: pageRef.page, totalPages, total};
+}
+
+// Inject/refresh pagination controls inside `footerEl`. Calls onGoto(page) on navigation.
+// Hidden when there is a single page. Rebuilding innerHTML drops stale listeners.
+function renderEditorPagination(footerEl, info, onGoto) {
+  let nav = footerEl.querySelector(":scope > .editorPagination");
+  if (!nav) {
+    // The editor dialogs are sized with fit-content (max-content of their children). If the footer
+    // were allowed to grow with the pager it would become the widest child for narrow tables
+    // (e.g. Rivers) and stretch the whole dialog, leaving an empty gutter beside the rows.
+    // width:0 + min-width:100% makes the footer fill the table-driven width WITHOUT contributing
+    // to it; flex-wrap lets the pager drop to its own line instead of widening the dialog.
+    footerEl.style.display = "flex";
+    footerEl.style.flexWrap = "wrap";
+    footerEl.style.alignItems = "center";
+    footerEl.style.width = "0";
+    footerEl.style.minWidth = "100%";
+    nav = document.createElement("div");
+    nav.className = "editorPagination";
+    nav.style.cssText = "margin-left: auto; display: inline-flex; gap: 0.3em; align-items: center;";
+    footerEl.appendChild(nav);
+  }
+  if (info.totalPages <= 1) {
+    nav.style.display = "none";
+    nav.innerHTML = "";
+    return;
+  }
+  nav.style.display = "inline-flex";
+  nav.innerHTML = /* html */ `
+    <button class="icon-left-open editorPagePrev" data-tip="Previous page" style="padding: 0 4px;" ${info.page <= 1 ? "disabled" : ""}></button>
+    <span>Page&nbsp;<input class="editorPageInput" type="number" min="1" max="${info.totalPages}" value="${info.page}" style="width: 3.5em" data-tip="Jump to page" />&nbsp;of&nbsp;${info.totalPages}</span>
+    <button class="icon-right-open editorPageNext" data-tip="Next page" style="padding: 0 4px;" ${info.page >= info.totalPages ? "disabled" : ""}></button>`;
+  nav.querySelector(".editorPagePrev").on("click", () => onGoto(info.page - 1));
+  nav.querySelector(".editorPageNext").on("click", () => onGoto(info.page + 1));
+  nav.querySelector(".editorPageInput").on("change", e => onGoto(+e.target.value));
+}
+
+// Bind sort-header clicks to reset to page 1 and re-render.
+// Register AFTER sortLines is bound so the icon-sort-* class is toggled first.
+function bindEditorSortReset(headerEl, onSort) {
+  headerEl.querySelectorAll(".sortable").forEach(el => el.on("click", () => onSort()));
+}
+
 // draw legend box
 function drawLegend(name, data) {
   legend.selectAll("*").remove(); // fully redraw every time
@@ -994,19 +1079,19 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js?v=1.122.11");
+  const Editor = await import("../dynamic/editors/states-editor.js?v=1.122.12");
   Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.122.11");
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.122.12");
   Editor.open();
 }
 
 async function editReligions() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.122.11");
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.122.12");
   Editor.open();
 }
 
diff --git a/public/modules/ui/rivers-overview.js b/public/modules/ui/rivers-overview.js
index 73e1a32886..1c76a4e814 100644
--- a/public/modules/ui/rivers-overview.js
+++ b/public/modules/ui/rivers-overview.js
@@ -1,11 +1,21 @@
 "use strict";
 
+const riversPage = {page: 1};
+const RIVERS_SORT_ACCESSORS = {
+  name: r => r.name || "",
+  type: r => r.type || "",
+  discharge: r => r.discharge,
+  length: r => r.length,
+  width: r => r.width
+};
+
 function overviewRivers() {
   if (customization) return;
   closeDialogs("#riversOverview, .stable");
   if (!layerIsOn("toggleRivers")) toggleRivers();
 
   const body = ensureEl("riversBody");
+  riversPage.page = 1;
   riversOverviewAddLines();
   $("#riversOverview").dialog();
 
@@ -26,7 +36,14 @@ function overviewRivers() {
   ensureEl("riversBasinHighlight").on("click", toggleBasinsHightlight);
   ensureEl("riversExport").on("click", downloadRiversData);
   ensureEl("riversRemoveAll").on("click", triggerAllRiversRemove);
-  ensureEl("riversSearch").on("input", riversOverviewAddLines);
+  ensureEl("riversSearch").on("input", () => {
+    riversPage.page = 1;
+    riversOverviewAddLines();
+  });
+  bindEditorSortReset(ensureEl("riversHeader"), () => {
+    riversPage.page = 1;
+    riversOverviewAddLines();
+  });
 
   // add line for each river
   function riversOverviewAddLines() {
@@ -37,7 +54,7 @@ function overviewRivers() {
     // Precompute a lookup map from river id to river for efficient basin lookup
     const riversById = new Map(pack.rivers.map(river => [river.i, river]));
 
-    let filteredRivers = pack.rivers;
+    let filteredRivers = pack.rivers.slice(); // copy so cross-page sort never mutates pack.rivers order
     const searchText = ensureEl("riversSearch").value.toLowerCase().trim();
     if (searchText) {
       filteredRivers = filteredRivers.filter(r => {
@@ -49,7 +66,13 @@ function overviewRivers() {
       });
     }
 
-    for (const r of filteredRivers) {
+    sortDataByActiveHeader(ensureEl("riversHeader"), filteredRivers, {
+      ...RIVERS_SORT_ACCESSORS,
+      basin: r => riversById.get(r.basin)?.name || ""
+    });
+    const pageInfo = getEditorPage(filteredRivers, riversPage);
+
+    for (const r of pageInfo.items) {
       const discharge = r.discharge + " m³/s";
       const length = rn(r.length * distanceScale) + " " + unit;
       const width = rn(r.width * distanceScale, 3) + " " + unit;
@@ -94,7 +117,10 @@ function overviewRivers() {
     body.querySelectorAll("div > span.icon-pencil").forEach(el => el.on("click", openRiverEditor));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", triggerRiverRemove));
 
-    applySorting(riversHeader);
+    renderEditorPagination(ensureEl("riversFooter"), pageInfo, page => {
+      riversPage.page = page;
+      riversOverviewAddLines();
+    });
   }
 
   function riverHighlightOn(event) {
@@ -154,12 +180,22 @@ function overviewRivers() {
   function downloadRiversData() {
     let data = "Id,River,Type,Discharge,Length,Width,Basin\n"; // headers
 
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      const d = el.dataset;
-      const discharge = d.discharge + " m³/s";
-      const length = rn(d.length * distanceScale) + " " + distanceUnitInput.value;
-      const width = rn(d.width * distanceScale, 3) + " " + distanceUnitInput.value;
-      data += [d.id, d.name, d.type, discharge, length, width, d.basin].join(",") + "\n";
+    const riversById = new Map(pack.rivers.map(river => [river.i, river]));
+    const searchText = ensureEl("riversSearch").value.toLowerCase().trim();
+    const exported = pack.rivers.filter(r => {
+      if (!searchText) return true;
+      const name = (r.name || "").toLowerCase();
+      const type = (r.type || "").toLowerCase();
+      const basinName = (riversById.get(r.basin)?.name || "").toLowerCase();
+      return name.includes(searchText) || type.includes(searchText) || basinName.includes(searchText);
+    });
+
+    exported.forEach(function (r) {
+      const discharge = r.discharge + " m³/s";
+      const length = rn(r.length * distanceScale) + " " + distanceUnitInput.value;
+      const width = rn(r.width * distanceScale, 3) + " " + distanceUnitInput.value;
+      const basin = riversById.get(r.basin)?.name || "";
+      data += [r.i, r.name, r.type, discharge, length, width, basin].join(",") + "\n";
     });
 
     const name = getFileName("Rivers") + ".csv";
diff --git a/public/modules/ui/routes-overview.js b/public/modules/ui/routes-overview.js
index 808693664d..649efe7a34 100644
--- a/public/modules/ui/routes-overview.js
+++ b/public/modules/ui/routes-overview.js
@@ -1,11 +1,19 @@
 "use strict";
 
+const routesPage = {page: 1};
+const ROUTES_SORT_ACCESSORS = {
+  name: route => route.name || "",
+  group: route => route.group || "",
+  length: route => route.length
+};
+
 function overviewRoutes() {
   if (customization) return;
   closeDialogs("#routesOverview, .stable");
   if (!layerIsOn("toggleRoutes")) toggleRoutes();
 
   const body = ensureEl("routesBody");
+  routesPage.page = 1;
   routesOverviewAddLines();
   $("#routesOverview").dialog();
 
@@ -25,14 +33,29 @@ function overviewRoutes() {
   ensureEl("routesExport").on("click", downloadRoutesData);
   ensureEl("routesLockAll").on("click", toggleLockAll);
   ensureEl("routesRemoveAll").on("click", triggerAllRoutesRemove);
-  ensureEl("routesSearch").on("input", routesOverviewAddLines);
+  ensureEl("routesSearch").on("input", () => {
+    routesPage.page = 1;
+    routesOverviewAddLines();
+  });
+  bindEditorSortReset(ensureEl("routesHeader"), () => {
+    routesPage.page = 1;
+    routesOverviewAddLines();
+  });
 
   // add line for each route
   function routesOverviewAddLines() {
     body.innerHTML = "";
     let lines = "";
 
-    let filteredRoutes = pack.routes;
+    let filteredRoutes = pack.routes.slice(); // copy so cross-page sort never mutates pack.routes order
+
+    // route name/length are computed lazily; populate them for the whole set so search,
+    // sort, footer averages and CSV export are consistent across all pages, not just the visible one
+    for (const route of filteredRoutes) {
+      if (!route.points || route.points.length < 2) continue;
+      route.name = route.name || Routes.generateName(route);
+      route.length = route.length || Routes.getLength(route.i);
+    }
 
     const searchText = ensureEl("routesSearch").value.toLowerCase().trim();
     if (searchText) {
@@ -43,10 +66,11 @@ function overviewRoutes() {
       });
     }
 
-    for (const route of filteredRoutes) {
+    sortDataByActiveHeader(ensureEl("routesHeader"), filteredRoutes, ROUTES_SORT_ACCESSORS);
+    const pageInfo = getEditorPage(filteredRoutes, routesPage);
+
+    for (const route of pageInfo.items) {
       if (!route.points || route.points.length < 2) continue;
-      route.name = route.name || Routes.generateName(route);
-      route.length = route.length || Routes.getLength(route.i);
       const length = rn(route.length * distanceScale) + " " + distanceUnitInput.value;
 
       lines += /* html */ `<div
@@ -82,7 +106,10 @@ function overviewRoutes() {
     body.querySelectorAll("div > span.locks").forEach(el => el.on("click", toggleLockStatus));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.on("click", triggerRouteRemove));
 
-    applySorting(routesHeader);
+    renderEditorPagination(ensureEl("routesFooter"), pageInfo, page => {
+      routesPage.page = page;
+      routesOverviewAddLines();
+    });
   }
 
   function routeHighlightOn(event) {
@@ -113,10 +140,20 @@ function overviewRoutes() {
   function downloadRoutesData() {
     let data = "Id,Route,Group,Length\n"; // headers
 
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      const d = el.dataset;
-      const length = rn(d.length * distanceScale) + " " + distanceUnitInput.value;
-      data += [d.id, d.name, d.group, length].join(",") + "\n";
+    const searchText = ensureEl("routesSearch").value.toLowerCase().trim();
+    const exported = pack.routes.filter(route => {
+      if (!route.points || route.points.length < 2) return false; // skip degenerate routes (never rendered)
+      if (!searchText) return true;
+      const name = (route.name || "").toLowerCase();
+      const group = (route.group || "").toLowerCase();
+      return name.includes(searchText) || group.includes(searchText);
+    });
+
+    exported.forEach(function (route) {
+      route.name = route.name || Routes.generateName(route);
+      route.length = route.length || Routes.getLength(route.i);
+      const length = rn(route.length * distanceScale) + " " + distanceUnitInput.value;
+      data += [route.i, route.name, route.group, length].join(",") + "\n";
     });
 
     const name = getFileName("Routes") + ".csv";
diff --git a/src/index.html b/src/index.html
index 4fac62bf98..a8bebabc40 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8590,7 +8590,7 @@
     <script defer src="main.js?v=1.120.5"></script>
 
     <script defer src="modules/ui/style.js?v=1.122.0"></script>
-    <script defer src="modules/ui/editors.js?v=1.122.11"></script>
+    <script defer src="modules/ui/editors.js?v=1.122.12"></script>
     <script defer src="modules/ui/tools.js?v=1.120.5"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.120.5"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.120.5"></script>
@@ -8617,8 +8617,8 @@
     <script defer src="modules/ui/diplomacy-editor.js?v=1.120.5"></script>
     <script defer src="modules/ui/zones-editor.js?v=1.120.5"></script>
     <script defer src="modules/ui/burgs-overview.js?v=1.120.5"></script>
-    <script defer src="modules/ui/routes-overview.js?v=1.120.5"></script>
-    <script defer src="modules/ui/rivers-overview.js?v=1.120.5"></script>
+    <script defer src="modules/ui/routes-overview.js?v=1.122.12"></script>
+    <script defer src="modules/ui/rivers-overview.js?v=1.122.12"></script>
     <script defer src="modules/ui/military-overview.js?v=1.108.5"></script>
     <script defer src="modules/ui/regiments-overview.js?v=1.108.5"></script>
     <script defer src="modules/ui/markers-overview.js?v=1.120.5"></script>