diff --git a/Cargo.lock b/Cargo.lock
index daeec69..7c8d42d 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2066,6 +2066,7 @@ checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
  "bitflags 2.13.2",
  "block2",
+ "libc",
  "objc2",
  "objc2-core-foundation",
 ]
@@ -2544,6 +2545,30 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "rfd"
+version = "0.16.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a15ad77d9e70a92437d8f74c35d99b4e4691128df018833e99f90bcd36152672"
+dependencies = [
+ "block2",
+ "dispatch2",
+ "glib-sys",
+ "gobject-sys",
+ "gtk-sys",
+ "js-sys",
+ "log",
+ "objc2",
+ "objc2-app-kit",
+ "objc2-core-foundation",
+ "objc2-foundation",
+ "raw-window-handle",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+ "windows-sys 0.60.2",
+]
+
 [[package]]
 name = "rsqlite-vfs"
 version = "0.1.1"
@@ -2995,6 +3020,8 @@ dependencies = [
  "strata_db",
  "tauri",
  "tauri-build",
+ "tauri-plugin-dialog",
+ "tauri-plugin-fs",
  "tempfile",
 ]
 
@@ -3274,6 +3301,64 @@ dependencies = [
  "tauri-utils",
 ]
 
+[[package]]
+name = "tauri-plugin"
+version = "2.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1140cf34a3b3b836a13103dcab17f18831d5cc3534cbd435dc01a5c6daa65aa2"
+dependencies = [
+ "anyhow",
+ "glob",
+ "plist",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "tauri-utils",
+ "walkdir",
+]
+
+[[package]]
+name = "tauri-plugin-dialog"
+version = "2.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3dca325d6e66e9170f2e1b9631722e4e544bcbc51781575d266abdaba697bd51"
+dependencies = [
+ "log",
+ "raw-window-handle",
+ "rfd",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "tauri-plugin-fs",
+ "thiserror 2.0.21",
+ "url",
+]
+
+[[package]]
+name = "tauri-plugin-fs"
+version = "2.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "213fae2d85d4b76b06de5915d1862db9fa74541171f9d2c15da6ac9bd6e788c6"
+dependencies = [
+ "anyhow",
+ "dunce",
+ "glob",
+ "log",
+ "objc2-foundation",
+ "percent-encoding",
+ "schemars 0.8.22",
+ "serde",
+ "serde_json",
+ "serde_repr",
+ "tauri",
+ "tauri-plugin",
+ "tauri-utils",
+ "thiserror 2.0.21",
+ "toml 1.1.8+spec-1.1.0",
+ "url",
+]
+
 [[package]]
 name = "tauri-runtime"
 version = "2.12.1"
@@ -4169,7 +4254,16 @@ version = "0.45.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
 dependencies = [
- "windows-targets",
+ "windows-targets 0.42.2",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.60.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f2f500e4d28234f72040990ec9d39e3a6b950f9f22d3dba18416c35882612bcb"
+dependencies = [
+ "windows-targets 0.53.5",
 ]
 
 [[package]]
@@ -4187,13 +4281,30 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8e5180c00cd44c9b1c88adb3693291f1cd93605ded80c250a75d472756b4d071"
 dependencies = [
- "windows_aarch64_gnullvm",
- "windows_aarch64_msvc",
- "windows_i686_gnu",
- "windows_i686_msvc",
- "windows_x86_64_gnu",
- "windows_x86_64_gnullvm",
- "windows_x86_64_msvc",
+ "windows_aarch64_gnullvm 0.42.2",
+ "windows_aarch64_msvc 0.42.2",
+ "windows_i686_gnu 0.42.2",
+ "windows_i686_msvc 0.42.2",
+ "windows_x86_64_gnu 0.42.2",
+ "windows_x86_64_gnullvm 0.42.2",
+ "windows_x86_64_msvc 0.42.2",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.53.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4945f9f551b88e0d65f3db0bc25c33b8acea4d9e41163edf90dcd0b19f9069f3"
+dependencies = [
+ "windows-link",
+ "windows_aarch64_gnullvm 0.53.1",
+ "windows_aarch64_msvc 0.53.1",
+ "windows_i686_gnu 0.53.1",
+ "windows_i686_gnullvm",
+ "windows_i686_msvc 0.53.1",
+ "windows_x86_64_gnu 0.53.1",
+ "windows_x86_64_gnullvm 0.53.1",
+ "windows_x86_64_msvc 0.53.1",
 ]
 
 [[package]]
@@ -4220,42 +4331,90 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
 
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a9d8416fa8b42f5c947f8482c43e7d89e73a173cead56d044f6a56104a6d1b53"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
 
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9d782e804c2f632e395708e99a94275910eb9100b2114651e04744e9b125006"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
 
+[[package]]
+name = "windows_i686_gnu"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "960e6da069d81e09becb0ca57a65220ddff016ff2d6af6a223cf372a506593a3"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fa7359d10048f68ab8b09fa71c3daccfb0e9b559aed648a8f95469c27057180c"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
 
+[[package]]
+name = "windows_i686_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e7ac75179f18232fe9c285163565a57ef8d3c89254a30685b57d83a38d326c2"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
 
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9c3842cdd74a865a8066ab39c8a7a473c0778a3f29370b5fd6b4b9aa7df4a499"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
 
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0ffa179e2d07eee8ad8f57493436566c7cc30ac536a3379fdf008f47f6bb7ae1"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
 
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.53.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d6bbff5f0aada427a1e5a6da5f1f98158182f26556f345ac9e04d36d0ebed650"
+
 [[package]]
 name = "winnow"
 version = "0.5.40"
diff --git a/app/package.json b/app/package.json
index 82d22c0..714ed47 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,10 +16,13 @@
     "@fontsource/ibm-plex-sans": "^5.3.0",
     "@strata/core": "*",
     "@tauri-apps/api": "^2.12.0",
+    "@tauri-apps/plugin-dialog": "^2.8.2",
+    "@tauri-apps/plugin-fs": "^2.7.0",
     "class-variance-authority": "^0.7.1",
     "cn": "^0.4.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^1.48.0",
+    "pdf-lib": "^1.17.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-leaflet": "^5.0.0",
diff --git a/app/src-tauri/Cargo.toml b/app/src-tauri/Cargo.toml
index 6664a0e..26eb921 100644
--- a/app/src-tauri/Cargo.toml
+++ b/app/src-tauri/Cargo.toml
@@ -17,6 +17,8 @@ tauri-build = { version = "2", features = [] }
 
 [dependencies]
 tauri = { version = "2", features = [] }
+tauri-plugin-dialog = "2"
+tauri-plugin-fs = "2"
 serde = { version = "1", features = ["derive"] }
 strata_db = { path = "../../strata/core/db" }
 # Must stay the same version as strata_db's, so both use one SQLite and one Connection type.
diff --git a/app/src-tauri/capabilities/default.json b/app/src-tauri/capabilities/default.json
index c2ca36e..fd3e894 100644
--- a/app/src-tauri/capabilities/default.json
+++ b/app/src-tauri/capabilities/default.json
@@ -3,5 +3,5 @@
   "identifier": "default",
   "description": "Capability for the main window",
   "windows": ["main"],
-  "permissions": ["core:default"]
+  "permissions": ["core:default", "dialog:allow-save", "fs:allow-write-file"]
 }
diff --git a/app/src-tauri/src/lib.rs b/app/src-tauri/src/lib.rs
index 5f2fa7e..8426660 100644
--- a/app/src-tauri/src/lib.rs
+++ b/app/src-tauri/src/lib.rs
@@ -11,6 +11,9 @@ fn load_data(app: tauri::AppHandle) -> Result<data::Records, data::LoadError> {
 
 pub fn run() {
     tauri::Builder::default()
+        // Saving a section as a picture or PDF: the Save dialog, and writing the file chosen there.
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_fs::init())
         .setup(|app| Ok(open_main_window(app)?))
         .invoke_handler(tauri::generate_handler![load_data])
         .run(tauri::generate_context!())
diff --git a/app/src/App.tsx b/app/src/App.tsx
index 0d2b922..ae98ef4 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -6,13 +6,17 @@ import { useModel } from "@/lib/useModel";
 import { text } from "@/text";
 import { MapView } from "@/views/MapView";
 import { QualityView } from "@/views/QualityView";
+import { SectionView } from "@/views/SectionView";
 
 type State = { records: Records; as: string } | { problem: LoadError } | null;
-type View = "map" | "quality";
+type View = "map" | "section" | "quality";
 
 export default function App() {
   const [state, setState] = useState<State>(null);
   const [view, setView] = useState<View>("map");
+  // The section's map is first drawn when it is first shown: a map set up while hidden has no size to fit the borewells to.
+  const [sectionSeen, setSectionSeen] = useState(false);
+  if (view === "section" && !sectionSeen) setSectionSeen(true);
 
   // Reading again keeps what is on screen until the new records arrive, so the map does not blink.
   // Records that turn out unchanged are kept as they are, so nothing is worked out again for them.
@@ -42,7 +46,7 @@ export default function App() {
         <h1 className="text-base font-semibold">{text.appName}</h1>
         {records && (
           <nav className="flex gap-1">
-            {(["map", "quality"] as const).map((v) => (
+            {(["map", "section", "quality"] as const).map((v) => (
               <Button key={v} variant={view === v ? "secondary" : "ghost"} size="sm" aria-current={view === v ? "page" : undefined} onClick={() => setView(v)}>
                 {text.tabs[v]}
               </Button>
@@ -56,8 +60,9 @@ export default function App() {
         : !records ? <Message>{text.empty}</Message>
         : (
           <>
-            {/* The map stays mounted behind Data quality, so it keeps its place and the picked spot. */}
+            {/* The maps stay mounted behind the other screens, so they keep their place, the picked spot and the line. */}
             <div className={view === "map" ? "flex min-h-0 flex-1" : "hidden"}><MapView records={records} model={model} onHowGood={() => setView("quality")} /></div>
+            {sectionSeen && <div className={view === "section" ? "flex min-h-0 flex-1" : "hidden"}><SectionView records={records} model={model} onHowGood={() => setView("quality")} /></div>}
             {view === "quality" && <QualityView model={model} />}
           </>
         )}
diff --git a/app/src/components/SectionDrawing.tsx b/app/src/components/SectionDrawing.tsx
new file mode 100644
index 0000000..ebaccfd
--- /dev/null
+++ b/app/src/components/SectionDrawing.tsx
@@ -0,0 +1,154 @@
+import type { ReactNode, Ref } from "react";
+import { GROUPS } from "@/model/groups";
+import type { Section } from "@/model/section";
+import { GROUP_COLOUR, GROUP_NAME, blocks } from "@/model/words";
+import { text } from "@/text";
+
+// Drawing size; the picture saved is the same.
+const W = 1000, L = 64, R = 24, TOP = 96, PH = 380, KEY = 64;
+const PW = W - L - R, H = TOP + PH + 30 + KEY;
+const WATER = "#2f7fb8";
+const HATCH = "url(#section-hatch)";
+
+/** A round step for ruler marks so that about `count` of them span `range`. */
+function niceStep(range: number, count: number) {
+  const raw = range / count, p = 10 ** Math.floor(Math.log10(raw));
+  return [1, 2, 5, 10].map((m) => m * p).find((s) => s >= raw)!;
+}
+
+/** Points of a line that breaks where a value is missing. */
+function brokenLine(points: ([number, number] | null)[]) {
+  let d = "", open = false;
+  for (const pt of points) {
+    if (!pt) open = false;
+    else {
+      d += `${open ? "L" : "M"}${pt[0].toFixed(1)} ${pt[1].toFixed(1)}`;
+      open = true;
+    }
+  }
+  return d;
+}
+
+const short = (id: string) => (id.length > 14 ? `${id.slice(0, 13)}…` : id);
+
+/**
+ * A section through the model. Heights are feet above sea level, so layers line up by height
+ * whatever the ground does. Borewells near the line are drawn solid, as measured; between them the
+ * model's columns are faded (likely), paler (rough guess) or hatched (not enough data).
+ */
+export function SectionDrawing({ section: s, ref }: { section: Section; ref?: Ref<SVGSVGElement> }) {
+  const grounds = [...s.columns.map((c) => c.groundFt), ...s.borewells.map((b) => b.p.groundFt)].filter((g): g is number => g != null);
+  const bottoms = [
+    ...s.columns.map((c) => (c.groundFt != null && c.steps?.length ? c.groundFt - c.steps[c.steps.length - 1].bottom : null)),
+    ...s.borewells.map((b) => b.p.bottomFt),
+  ].filter((g): g is number => g != null);
+  const highFt = Math.max(...grounds) + 5;
+  const lowFt = Math.min(highFt - 50, ...bottoms);
+  // Borewells up to 50 m past either end belong to the line; they are drawn at its end.
+  const x = (km: number) => L + (s.lengthKm ? (Math.min(Math.max(km, 0), s.lengthKm) / s.lengthKm) * PW : 0);
+  const y = (ft: number) => TOP + ((highFt - ft) / (highFt - lowFt)) * PH;
+  const colW = PW / Math.max(1, s.columns.length - 1);
+
+  const cells = s.columns.flatMap((c, i) => {
+    if (c.groundFt == null || !c.steps) return [];
+    const g = c.groundFt, cx = x(c.km) - colW / 2;
+    if (c.steps.length === 0) return [{ key: `${i}`, x: cx, top: y(g), bottom: TOP + PH, group: null, level: "none" as const }];
+    return blocks(c.steps).map((b) => ({ key: `${i}-${b.top}`, x: cx, top: y(g - b.top), bottom: y(g - b.bottom), group: b.group, level: b.level }));
+  });
+  // Borewells at one spot, or almost: only the first is named, so the names stay readable.
+  const named: Section["borewells"] = [];
+  for (const b of s.borewells) if (!named.length || x(b.alongKm) - x(named[named.length - 1].alongKm) >= 11) named.push(b);
+
+  const hStep = niceStep(highFt - lowFt, 8);
+  const heights: number[] = [];
+  for (let h = Math.ceil(lowFt / hStep) * hStep; h <= highFt; h += hStep) heights.push(h);
+  const kStep = niceStep(s.lengthKm || 1, 8);
+  const kms: number[] = [];
+  for (let k = 0; k <= s.lengthKm + 1e-9; k += kStep) kms.push(k);
+
+  const key: [string, (kx: number) => ReactNode][] = [
+    ...GROUPS.map((g): [string, (kx: number) => ReactNode] => [GROUP_NAME[g], (kx) => <rect x={kx} y={-9} width={14} height={10} fill={GROUP_COLOUR[g]} stroke="var(--foreground)" strokeOpacity="0.5" />]),
+    [text.section.keyMeasured, (kx) => <rect x={kx + 3} y={-11} width={8} height={14} fill={GROUP_COLOUR.clay} stroke="var(--foreground)" />],
+    [text.levels.likely, (kx) => <rect x={kx} y={-9} width={14} height={10} fill={GROUP_COLOUR.waterBearing} fillOpacity={0.6} />],
+    [text.levels.rough, (kx) => <rect x={kx} y={-9} width={14} height={10} fill={GROUP_COLOUR.waterBearing} fillOpacity={0.3} />],
+    [text.levels.none, (kx) => <rect x={kx} y={-9} width={14} height={10} fill={HATCH} stroke="var(--muted-foreground)" strokeOpacity="0.4" />],
+    [text.section.keyWater, (kx) => <line x1={kx} x2={kx + 14} y1={-4} y2={-4} stroke={WATER} strokeWidth="1.5" strokeDasharray="4 3" />],
+  ];
+  // Two rows of key, laid out by a rough width per letter.
+  const keyRows: { at: number; row: number; entry: (typeof key)[number] }[] = [];
+  for (let i = 0, at = L, row = 0; i < key.length; i++) {
+    const width = 20 + key[i][0].length * 7 + 20;
+    if (at + width > W - R) [at, row] = [L, row + 1];
+    keyRows.push({ at, row, entry: key[i] });
+    at += width;
+  }
+
+  return (
+    <svg ref={ref} viewBox={`0 0 ${W} ${H}`} width={W} role="img" aria-label={text.section.drawingLabel} fontSize={11} className="h-auto max-w-full">
+      <defs>
+        <pattern id="section-hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+          <line x1="0" y1="0" x2="0" y2="6" stroke="var(--muted-foreground)" strokeOpacity="0.45" />
+        </pattern>
+        <clipPath id="section-plot"><rect x={L} y={0} width={PW} height={TOP + PH} /></clipPath>
+      </defs>
+
+      {/* Ruler: height above sea level, and distance along the line. */}
+      {heights.map((h) => (
+        <g key={h}>
+          <line x1={L} x2={W - R} y1={y(h)} y2={y(h)} stroke="var(--muted-foreground)" strokeOpacity="0.15" />
+          <text x={L - 6} y={y(h) + 4} textAnchor="end" fill="var(--muted-foreground)">{Math.round(h)}</text>
+        </g>
+      ))}
+      <text transform={`translate(14 ${TOP + PH / 2}) rotate(-90)`} textAnchor="middle" fill="var(--muted-foreground)">{text.section.heightAxis}</text>
+      {kms.map((k) => (
+        <g key={k}>
+          <line x1={x(k)} x2={x(k)} y1={TOP + PH} y2={TOP + PH + 5} stroke="var(--muted-foreground)" />
+          <text x={x(k)} y={TOP + PH + 17} textAnchor="middle" fill="var(--muted-foreground)">{Number(k.toFixed(2))}</text>
+        </g>
+      ))}
+      <text x={W - R} y={TOP + PH + 30} textAnchor="end" fill="var(--muted-foreground)">{text.section.kmAxis}</text>
+      <line x1={L} x2={W - R} y1={TOP + PH} y2={TOP + PH} stroke="var(--muted-foreground)" />
+
+      <g clipPath="url(#section-plot)">
+        {/* The model's columns. Each strength is faded as one layer, so neighbouring columns can
+            overlap a little without seams. Nobody within reach: hatched from the ground down. */}
+        {(["likely", "rough", "none"] as const).map((level) => (
+          <g key={level} opacity={level === "likely" ? 0.6 : level === "rough" ? 0.3 : 1}>
+            {cells.filter((c) => c.level === level).map((c) => (
+              <rect key={c.key} x={c.x} y={c.top} width={colW + 0.5} height={c.bottom - c.top} fill={c.group ? GROUP_COLOUR[c.group] : HATCH} />
+            ))}
+          </g>
+        ))}
+        <path d={brokenLine(s.columns.map((c) => (c.groundFt == null ? null : [x(c.km), y(c.groundFt)])))} fill="none" stroke="var(--foreground)" strokeWidth="1.5" />
+        <path d={brokenLine(s.columns.map((c) => (c.groundFt == null || c.waterFt == null ? null : [x(c.km), y(c.groundFt - c.waterFt)])))}
+          fill="none" stroke={WATER} strokeWidth="1.5" strokeDasharray="6 4" />
+        {s.bendsKm.map((k) => <line key={k} x1={x(k)} x2={x(k)} y1={TOP} y2={TOP + PH} stroke="var(--muted-foreground)" strokeDasharray="2 4" />)}
+        {/* The borewells: what was measured, solid. */}
+        {s.borewells.map(({ p, alongKm }) => (
+          <g key={p.id}>
+            <title>{p.borewellId}</title>
+            {p.runs.map((r, j) => (
+              <rect key={j} x={x(alongKm) - 5} y={y(r.topFt)} width={10} height={y(r.bottomFt) - y(r.topFt)} fill={GROUP_COLOUR[r.group]} stroke="var(--foreground)" strokeWidth="0.75" />
+            ))}
+          </g>
+        ))}
+      </g>
+
+      {named.map(({ p, alongKm }) => (
+        <text key={p.id} transform={`translate(${x(alongKm) + 3} ${y(p.groundFt) - 4}) rotate(-90)`} fill="var(--foreground)" fontSize="10">{short(p.borewellId)}</text>
+      ))}
+      {s.bendsKm.map((k) => <text key={k} x={x(k)} y={TOP + PH - 4} textAnchor="middle" fill="var(--muted-foreground)">{text.section.bend}</text>)}
+      <text x={L} y={14} fontWeight="600" fill="var(--foreground)" fontSize="13">A</text>
+      <text x={W - R} y={14} fontWeight="600" textAnchor="end" fill="var(--foreground)" fontSize="13">A′</text>
+
+      <g transform={`translate(0 ${TOP + PH + 52})`}>
+        {keyRows.map(({ at, row, entry: [label, swatch] }) => (
+          <g key={label} transform={`translate(0 ${row * 20})`}>
+            {swatch(at)}
+            <text x={at + 20} y={0} fill="var(--foreground)">{label}</text>
+          </g>
+        ))}
+      </g>
+    </svg>
+  );
+}
diff --git a/app/src/components/SiteMap.tsx b/app/src/components/SiteMap.tsx
index a5b4bcb..ecf0e51 100644
--- a/app/src/components/SiteMap.tsx
+++ b/app/src/components/SiteMap.tsx
@@ -1,5 +1,5 @@
 import "leaflet/dist/leaflet.css";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, type ReactNode } from "react";
 import { CircleMarker, MapContainer, TileLayer, Tooltip, useMap, useMapEvents } from "react-leaflet";
 import type { LatLngBoundsExpression, LatLngExpression } from "leaflet";
 import type { SiteRecord } from "@/lib/api";
@@ -14,16 +14,20 @@ export const located = (sites: SiteRecord[]) => sites.filter((s) => s.borewell.l
  * The borewells on OpenStreetMap's online tiles. Without internet the tiles are a plain background
  * and the pins still show. Clicking a pin selects that borewell; clicking anywhere else picks the spot.
  */
-export function SiteMap({ sites, selectedId, picked, onSelect, onPick }: {
+export function SiteMap({ sites, selectedId, picked, onSelect, onPick, children, doubleClickZoom = true }: {
   sites: SiteRecord[];
   selectedId: string | null;
   picked: [number, number] | null;
   onSelect: (id: string) => void;
   onPick: (latitude: number, longitude: number) => void;
+  /** Anything else to draw on the map, such as a section line. */
+  children?: ReactNode;
+  /** Off where every click adds a point: a double-click would add two and zoom too. */
+  doubleClickZoom?: boolean;
 }) {
   const pins = useMemo(() => located(sites), [sites]);
   return (
-    <MapContainer center={CITY_CENTRE} zoom={12} preferCanvas className="strata-map z-0 h-full w-full cursor-crosshair bg-map-land">
+    <MapContainer center={CITY_CENTRE} zoom={12} doubleClickZoom={doubleClickZoom} preferCanvas className="strata-map z-0 h-full w-full cursor-crosshair bg-map-land">
       <TileLayer
         url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -52,6 +56,7 @@ export function SiteMap({ sites, selectedId, picked, onSelect, onPick }: {
       })}
       {/* The picked spot: an open, dashed ring, so it cannot be taken for a borewell. */}
       {picked && <CircleMarker center={picked} radius={11} interactive={false} pathOptions={{ color: "#16202a", weight: 2, dashArray: "4 4", fill: false }} />}
+      {children}
     </MapContainer>
   );
 }
diff --git a/app/src/lib/saving.test.ts b/app/src/lib/saving.test.ts
new file mode 100644
index 0000000..208832e
--- /dev/null
+++ b/app/src/lib/saving.test.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { PDFDocument } from "pdf-lib";
+import { onePagePdf, printableSvg, wrap } from "./saving";
+
+describe("saving", () => {
+  it("makes a drawing standalone, in fixed colours whatever the theme", () => {
+    const svg = printableSvg('<svg viewBox="0 0 10 10"><text fill="var(--foreground)">A</text><line stroke="var(--border)"/></svg>');
+    expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    expect(svg).toContain('fill="#16202a"');
+    expect(svg).not.toContain("var(");
+    expect(svg).toContain("font-size:11px"); // the screen's text size, which a class would lose
+  });
+
+  it("wraps words into lines that fit", () => {
+    expect(wrap("aa bb cc dd", (s) => s.length, 5)).toEqual(["aa bb", "cc dd"]);
+    expect(wrap("toolongword x", (s) => s.length, 5)).toEqual(["toolongword", "x"]);
+  });
+
+  it("puts the picture and its words on one landscape page", async () => {
+    const dot = Uint8Array.from(atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="), (c) => c.charCodeAt(0));
+    const pdf = await PDFDocument.load(await onePagePdf("Section A to A′", ["Line A to A′: 2.0 km"], { bytes: dot, width: 1000, height: 600 }, ["A note"]));
+    expect(pdf.getPageCount()).toBe(1);
+    expect(pdf.getTitle()).toBe("Section A to A′");
+    expect(pdf.getPage(0).getWidth()).toBeGreaterThan(pdf.getPage(0).getHeight());
+  });
+});
diff --git a/app/src/lib/saving.ts b/app/src/lib/saving.ts
new file mode 100644
index 0000000..851320b
--- /dev/null
+++ b/app/src/lib/saving.ts
@@ -0,0 +1,82 @@
+/**
+ * Saving a drawing as a picture or a PDF, built on this computer (StrataField's approach). Saved
+ * files use fixed light colours, so they look the same whatever the app's theme.
+ */
+import { PDFDocument, StandardFonts, rgb } from "pdf-lib";
+
+const PRINT_COLOURS: Record<string, string> = { "--foreground": "#16202a", "--muted-foreground": "#5a6774" };
+
+/** The drawing as standalone SVG: namespace, a white page, fixed colours and a common font. */
+export function printableSvg(markup: string): string {
+  return markup
+    .replace("<svg ", `<svg xmlns="http://www.w3.org/2000/svg" `)
+    .replace(/(<svg[^>]*>)/, `$1<style>text{font-family:Helvetica,Arial,sans-serif;font-size:11px}</style><rect width="100%" height="100%" fill="#ffffff"/>`)
+    .replace(/var\((--[a-z-]+)\)/g, (_, name: string) => PRINT_COLOURS[name] ?? "#000000");
+}
+
+/** Standalone SVG as a PNG, `scale` times its size. */
+export async function svgToPng(svg: string, scale = 2): Promise<{ bytes: Uint8Array; width: number; height: number }> {
+  const [, width, height] = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/)!.map(Number);
+  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml" }));
+  try {
+    const img = new Image();
+    img.src = url;
+    await img.decode();
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(width * scale);
+    canvas.height = Math.round(height * scale);
+    canvas.getContext("2d")!.drawImage(img, 0, 0, canvas.width, canvas.height);
+    const blob: Blob = await new Promise((ok, fail) => canvas.toBlob((b) => (b ? ok(b) : fail(new Error("no picture"))), "image/png"));
+    return { bytes: new Uint8Array(await blob.arrayBuffer()), width, height };
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+/** One A4 landscape page: a title, lines under it, the picture, and notes at the foot. */
+export async function onePagePdf(title: string, lines: string[], png: { bytes: Uint8Array; width: number; height: number }, notes: string[]): Promise<Uint8Array> {
+  const doc = await PDFDocument.create();
+  doc.setTitle(title);
+  doc.setCreator("StrataVision");
+  const font = await doc.embedFont(StandardFonts.Helvetica), bold = await doc.embedFont(StandardFonts.HelveticaBold);
+  const [W, H, M] = [841.89, 595.28, 36];
+  const page = doc.addPage([W, H]);
+  const ink = rgb(0.086, 0.125, 0.165), quiet = rgb(0.353, 0.404, 0.455);
+  // The standard fonts only know Latin-1: the prime of A′ becomes an apostrophe.
+  const safe = (s: string) => s.replace(/′/g, "'").replace(/…/g, "...").replace(/[^\x20-\xff]/g, "?");
+  let y = H - M - 16;
+  page.drawText(safe(title), { x: M, y, size: 16, font: bold, color: ink });
+  for (const line of lines) page.drawText(safe(line), { x: M, y: (y -= 15), size: 10, font, color: quiet });
+  const noteSize = 8.5, wrapped = notes.flatMap((n) => wrap(safe(n), (s) => font.widthOfTextAtSize(s, noteSize), W - 2 * M));
+  const room = { width: W - 2 * M, height: y - 12 - (M + wrapped.length * 12 + 6) };
+  const scale = Math.min(room.width / png.width, room.height / png.height);
+  const image = await doc.embedPng(png.bytes);
+  page.drawImage(image, { x: M + (room.width - png.width * scale) / 2, y: y - 12 - png.height * scale, width: png.width * scale, height: png.height * scale });
+  wrapped.forEach((line, i) => page.drawText(line, { x: M, y: M + (wrapped.length - 1 - i) * 12, size: noteSize, font, color: quiet }));
+  return doc.save();
+}
+
+/** Words into lines no wider than `max`. */
+export function wrap(s: string, widthOf: (s: string) => number, max: number): string[] {
+  const lines: string[] = [];
+  let line = "";
+  for (const word of s.split(" ")) {
+    const next = line ? `${line} ${word}` : word;
+    if (line && widthOf(next) > max) {
+      lines.push(line);
+      line = word;
+    } else line = next;
+  }
+  return line ? [...lines, line] : lines;
+}
+
+/** Asks where to save and writes the file. The path saved to, or null if the Save dialog was cancelled. */
+export async function saveFile(suggestedName: string, kind: "png" | "pdf", bytes: Uint8Array): Promise<string | null> {
+  const { save } = await import("@tauri-apps/plugin-dialog");
+  const filters = { png: [{ name: "Picture", extensions: ["png"] }], pdf: [{ name: "PDF", extensions: ["pdf"] }] }[kind];
+  const path = await save({ defaultPath: suggestedName, filters });
+  if (!path) return null;
+  const { writeFile } = await import("@tauri-apps/plugin-fs");
+  await writeFile(path, bytes);
+  return path;
+}
diff --git a/app/src/model/city.test.ts b/app/src/model/city.test.ts
index a10a446..04b6604 100644
--- a/app/src/model/city.test.ts
+++ b/app/src/model/city.test.ts
@@ -8,12 +8,13 @@ import { checkModel, share } from "./check";
 import { madeUpCity, truth } from "./madeUpCity";
 import { GROUPS, type Group } from "./groups";
 import { predictColumn, prepare, type Prepared } from "./model";
+import { sectionAlong } from "./section";
 
 const city = (count: number) => {
   const { sites, grid } = madeUpCity(count);
-  return { grid, prepared: prepare(sites, DEFAULT_MATERIALS, grid) };
+  return { sites, grid, prepared: prepare(sites, DEFAULT_MATERIALS, grid) };
 };
-const { grid, prepared } = city(500);
+const { sites, grid, prepared } = city(500);
 const result = checkModel(prepared, grid);
 
 /**
@@ -101,8 +102,8 @@ describe("a made-up city of 500 borewells", () => {
   it("is fast enough", { timeout: 30_000 }, () => {
     const times = {
       column: timed(() => predictColumn(26.87, 80.97, prepared, grid)),
-      // A section: 200 columns along a line across the city.
-      section: timed(() => { for (let i = 0; i < 200; i++) predictColumn(26.76 + i * 0.0009, 80.86 + i * 0.0009, prepared, grid); }),
+      // A section: 200 columns along a line across the city, with the borewells near it and the water.
+      section: timed(() => sectionAlong([[26.76, 80.86], [26.94, 81.04]], 0.5, prepared, grid, sites.map((s) => s.borewell))),
       // A city map: 100 × 100 points.
       map: timed(() => { for (let i = 0; i < 100; i++) for (let j = 0; j < 100; j++) predictColumn(26.75 + i * 0.002, 80.85 + j * 0.002, prepared, grid); }),
       check: timed(() => checkModel(prepared, grid)),
diff --git a/app/src/model/section.test.ts b/app/src/model/section.test.ts
new file mode 100644
index 0000000..b4925fa
--- /dev/null
+++ b/app/src/model/section.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, it } from "vitest";
+import { DEFAULT_MATERIALS, METRES_TO_FEET, heightAt, type Borewell, type ElevationGrid } from "@strata/core";
+import { prepare, type ModelSite } from "./model";
+import { sectionAlong } from "./section";
+import { CENTRE, east, flatGrid, north, site, slopeGrid } from "./testGround";
+
+const flat = flatGrid(120);
+const CLAY: [number, number, string][] = [[0, 200, "clay"]];
+const along = (path: [number, number][], sites: ModelSite[], grid: ElevationGrid = flat, halfWidthKm = 0.5, count = 5) =>
+  sectionAlong(path, halfWidthKm, prepare(sites, DEFAULT_MATERIALS, grid), grid, sites.map((s) => s.borewell), count);
+
+describe("sectionAlong", () => {
+  it("samples evenly along a line with a bend, by distance along the line", () => {
+    const s = along([CENTRE, [north(0), east(2)], [north(2), east(2)]], []);
+    expect(s.lengthKm).toBeCloseTo(4, 1);
+    expect(s.columns.map((c) => c.km)).toEqual([0, 1, 2, 3, 4].map((k) => expect.closeTo(k, 1)));
+    expect(s.columns[3].latitude).toBeCloseTo(north(1), 4);
+    expect(s.columns[3].longitude).toBeCloseTo(east(2), 4);
+    expect(s.bendsKm).toEqual([expect.closeTo(2, 1)]);
+  });
+
+  it("lines a layer up by height on sloping ground", () => {
+    // Clay down to 330 ft above sea level and water-bearing sand below it, at every borewell, while
+    // the ground climbs eastwards: the boundary is deeper below ground in the east.
+    const grid = slopeGrid(60, 180);
+    const boundaryFt = 330;
+    const at = (id: string, lat: number, lon: number) => {
+      const groundFt = heightAt(grid, lat, lon)! * METRES_TO_FEET;
+      return site(id, lat, lon, [[0, groundFt - boundaryFt, "clay"], [groundFt - boundaryFt, groundFt - boundaryFt + 100, "medium_sand"]]);
+    };
+    const sites = [at("w", north(0.3), east(-1)), at("m", north(-0.3), east(0)), at("e", north(0.3), east(1))];
+    const s = along([[north(0), east(-1)], [north(0), east(1)]], sites, grid);
+    for (const c of s.columns) {
+      const atHeight = (ft: number) => c.steps!.find((st) => st.top <= c.groundFt! - ft && c.groundFt! - ft < st.bottom)!.likely;
+      expect(atHeight(boundaryFt + 10)).toBe("clay");
+      expect(atHeight(boundaryFt - 10)).toBe("waterBearing");
+    }
+    expect(s.columns[4].groundFt! - s.columns[0].groundFt!).toBeGreaterThan(10);
+  });
+
+  it("takes only the borewells near the line, in order along it", () => {
+    const sites = [site("far", north(0.8), east(0.5), CLAY), site("b", north(-0.3), east(1.5), CLAY), site("a", north(0.2), east(0.5), CLAY)];
+    const s = along([CENTRE, [north(0), east(2)]], sites);
+    expect(s.borewells.map((b) => b.p.id)).toEqual(["a", "b"]);
+    expect(s.borewells[0].alongKm).toBeCloseTo(0.5, 2);
+    expect(s.nearby).toBe(2);
+  });
+
+  it("leaves a gap where the ground height is not known", () => {
+    // The made-up ground ends at latitude 26.6.
+    const s = along([[26.59, 80.95], [26.61, 80.95]], [site("a", 26.605, 80.95, CLAY)]);
+    expect(s.columns[0]).toMatchObject({ groundFt: null, steps: null });
+    expect(s.columns[4].groundFt).toBeCloseTo(120 * METRES_TO_FEET, 1);
+  });
+
+  it("gives the expected water level only where there is a recent reading nearby", () => {
+    const wet = site("wet", north(0.1), east(0), CLAY, { waterLevel: 40, waterLevelOn: "2026-03-01" } as Partial<Borewell>);
+    const s = along([CENTRE, [north(0), east(4)]], [wet]);
+    expect(s.columns[0].waterFt).toBeCloseTo(40, 5);
+    expect(s.columns[4].waterFt).toBeNull();
+  });
+
+  it("ignores a point clicked twice, so it is not a bend", () => {
+    const s = along([CENTRE, [north(0), east(1)], [north(0.001), east(1)], [north(0), east(2)]], []);
+    expect(s.bendsKm).toEqual([expect.closeTo(1, 1)]);
+    expect(along([CENTRE, [north(0.001), east(0)]], [])).toMatchObject({ lengthKm: 0, columns: [] });
+  });
+
+  it("is empty for fewer than two points", () => {
+    expect(along([CENTRE], [site("a", north(0), east(0), CLAY)])).toEqual({ lengthKm: 0, columns: [], borewells: [], nearby: 0, bendsKm: [] });
+  });
+});
diff --git a/app/src/model/section.ts b/app/src/model/section.ts
new file mode 100644
index 0000000..25dd0d0
--- /dev/null
+++ b/app/src/model/section.ts
@@ -0,0 +1,75 @@
+/**
+ * A section along a line with bends: the model's column at evenly spaced places along it, and the
+ * borewells near it, placed by StrataField's own rule. Heights are feet above sea level, so the
+ * drawing can line layers up by height whatever the ground does.
+ */
+import { METRES_TO_FEET, heightAt, kmBetween, placeAlongPath, thinAlongLine, type Borewell, type ElevationGrid, type LatLon } from "@strata/core";
+import { predictColumn, type Prepared, type Step } from "./model";
+import { waterHere } from "./words";
+
+export interface SectionColumn {
+  /** Distance along the line from its start. */
+  km: number;
+  latitude: number;
+  longitude: number;
+  /** Feet above sea level; null where the ground height is not known (and so nothing is proposed). */
+  groundFt: number | null;
+  steps: Step[] | null;
+  /** Expected depth to water, feet below ground; null where there is no recent reading nearby. */
+  waterFt: number | null;
+}
+
+export interface SectionBorewell {
+  p: Prepared;
+  alongKm: number;
+  /** Distance from the line; positive is to the right walking from A to A′. */
+  offsetKm: number;
+}
+
+export interface Section {
+  lengthKm: number;
+  columns: SectionColumn[];
+  /** The borewells drawn, nearest the line in each stretch when there are too many. */
+  borewells: SectionBorewell[];
+  /** How many borewells are within reach of the line, drawn or not. */
+  nearby: number;
+  /** Where the line bends, as distances along it. */
+  bendsKm: number[];
+}
+
+/** `count` evenly spaced places along a line with bends, with their distance along it. */
+function placesAlong(path: LatLon[], count: number) {
+  const parts = path.slice(1).map((b, i) => ({ a: path[i], b, km: kmBetween(path[i][0], path[i][1], b[0], b[1]) }));
+  const total = parts.reduce((s, p) => s + p.km, 0);
+  return Array.from({ length: count }, (_, n) => {
+    const km = (n / (count - 1)) * total;
+    let rest = km, i = 0;
+    while (i < parts.length - 1 && rest > parts[i].km) rest -= parts[i++].km;
+    const { a, b, km: len } = parts[i], t = len ? Math.min(1, rest / len) : 0;
+    return { km, latitude: a[0] + (b[0] - a[0]) * t, longitude: a[1] + (b[1] - a[1]) * t };
+  });
+}
+
+/** Points closer than this to the one before are the same point clicked twice, not a bend. */
+export const SAME_POINT_KM = 0.005;
+
+export function sectionAlong(given: LatLon[], halfWidthKm: number, prepared: Prepared[], grid: ElevationGrid, borewells: Borewell[], count = 200): Section {
+  const path: LatLon[] = [];
+  for (const p of given) if (!path.length || kmBetween(...path[path.length - 1], ...p) >= SAME_POINT_KM) path.push(p);
+  if (path.length < 2) return { lengthKm: 0, columns: [], borewells: [], nearby: 0, bendsKm: [] };
+  const columns = placesAlong(path, count).map(({ km, latitude, longitude }) => {
+    const groundM = heightAt(grid, latitude, longitude);
+    return {
+      km, latitude, longitude,
+      groundFt: groundM == null ? null : groundM * METRES_TO_FEET,
+      steps: predictColumn(latitude, longitude, prepared, grid, { groundM: groundM ?? undefined }),
+      waterFt: waterHere(latitude, longitude, borewells)?.feet ?? null,
+    };
+  });
+  const lengthKm = columns[columns.length - 1].km;
+  const { placed } = placeAlongPath(path, halfWidthKm, prepared);
+  const shown = thinAlongLine(placed, lengthKm);
+  const bendsKm: number[] = [];
+  for (let i = 1, km = 0; i < path.length - 1; i++) bendsKm.push((km += kmBetween(path[i - 1][0], path[i - 1][1], path[i][0], path[i][1])));
+  return { lengthKm, columns, borewells: shown.map(({ item, alongKm, offsetKm }) => ({ p: item, alongKm, offsetKm })), nearby: placed.length, bendsKm };
+}
diff --git a/app/src/text/index.ts b/app/src/text/index.ts
index a0553d0..6c19c39 100644
--- a/app/src/text/index.ts
+++ b/app/src/text/index.ts
@@ -3,7 +3,7 @@ export const text = {
   appName: "StrataVision",
   loading: "Reading your borewell records…",
   refresh: "Refresh",
-  tabs: { map: "Map", quality: "Data quality" },
+  tabs: { map: "Map", section: "Section", quality: "Data quality" },
 
   /** Why the records could not be shown, by the kind of problem the Rust side reports. */
   problems: {
@@ -41,7 +41,7 @@ export const text = {
   groundFailed: "The ground heights could not be read, so layers cannot be proposed.",
   notEnoughHere: "There are not enough borewells near this spot to say anything.",
   fromBorewells: (n: number, nearest: string) => (n === 1 ? `From 1 borewell, ${nearest} away` : `From ${n} borewells, nearest ${nearest}`),
-  noGroundHere: "The ground height is not known at this spot, so layers cannot be proposed here.",
+  noGroundHere: "The ground height is not known here, so layers cannot be proposed.",
   waterExpected: (feet: number, nearest: string, since: string) =>
     `Water level expected about ${feet} ft below ground (nearest reading ${nearest} away; levels measured since ${since})`,
   noWater: "No recent water level within 1 km",
@@ -78,6 +78,31 @@ export const text = {
     keySuggested: "Slotted pipe suggested",
   },
 
+  section: {
+    hint: "Click the map to draw a line through the ground. Each click adds a point, so the line can bend. Clicking a borewell puts the line through it.",
+    needTwo: "Click a second point to draw the section.",
+    undo: "Undo last point",
+    clear: "Clear",
+    width: "Show borewells within",
+    widthOption: (km: number) => (km < 1 ? `${km * 1000} m` : `${km} km`),
+    length: (km: number, bends: number) => `Line A to A′: ${km.toFixed(1)} km${bends ? `, ${bends === 1 ? "1 bend" : `${bends} bends`}` : ""}`,
+    nearby: (n: number, within: string) => `${n === 1 ? "1 borewell" : `${n} borewells`} within ${within} of the line`,
+    thinned: (shown: number) => `${shown} drawn: the one closest to the line in each stretch`,
+    nothing: "No borewell is within 5 km of any part of this line, so nothing can be proposed along it.",
+    drawingLabel: "Section along the line from A to A′",
+    heightAxis: "Feet above sea level",
+    kmAxis: "km along the line from A",
+    bend: "bend",
+    keyMeasured: "Measured at a borewell",
+    keyWater: "Water level expected",
+    savePicture: "Save as picture",
+    savePdf: "Save as PDF",
+    saved: (path: string) => `Saved to ${path}`,
+    saveFailed: "The file could not be saved.",
+    pdfTitle: "Section A to A′",
+    pdfKey: "Solid columns are borewells as measured. Everything between them is proposed from past drilling: faded where likely, paler where a rough guess, hatched where there is not enough data. Heights are feet above sea level.",
+  },
+
   quality: {
     checking: "Checking…",
     notEnough: "There are not enough borewells with layers and a location to check yet (at least 10 are needed).",
diff --git a/app/src/views/SectionView.tsx b/app/src/views/SectionView.tsx
new file mode 100644
index 0000000..f9af2d0
--- /dev/null
+++ b/app/src/views/SectionView.tsx
@@ -0,0 +1,120 @@
+import { useMemo, useRef, useState } from "react";
+import { CircleMarker, Polygon, Polyline, Tooltip } from "react-leaflet";
+import { corridorPolygons, kmBetween, type LatLon } from "@strata/core";
+import { Button } from "@/components/ui/button";
+import { SectionDrawing } from "@/components/SectionDrawing";
+import { SiteMap } from "@/components/SiteMap";
+import type { Records } from "@/lib/api";
+import type { Model } from "@/lib/useModel";
+import { SAME_POINT_KM, sectionAlong } from "@/model/section";
+import { text } from "@/text";
+
+const WIDTHS = [0.25, 0.5, 1, 2];
+const LINE = "#16202a";
+
+/** Draw a line on the map; the ground along it is drawn underneath, and can be saved. */
+export function SectionView({ records, model, onHowGood }: { records: Records; model: Model | "failed" | null; onHowGood: () => void }) {
+  const { sites } = records;
+  const [path, setPath] = useState<LatLon[]>([]);
+  const [widthKm, setWidthKm] = useState(0.5);
+  const [note, setNote] = useState<string | null>(null);
+  const drawing = useRef<SVGSVGElement>(null);
+  const t = text.section;
+
+  const ready = model && model !== "failed" ? model : null;
+  const borewells = useMemo(() => sites.map((s) => s.borewell), [sites]);
+  const section = useMemo(() => {
+    const s = ready && path.length >= 2 ? sectionAlong(path, widthKm, ready.prepared, ready.grid, borewells) : null;
+    return s && s.lengthKm > 0 ? s : null;
+  }, [ready, path, widthKm, borewells]);
+  const anything = section && (section.borewells.length > 0 || section.columns.some((c) => c.steps?.length));
+
+  // A double-click, or a pin clicked twice, is one point, not a bend.
+  const add = (point: LatLon) => {
+    setPath((p) => (p.length && kmBetween(...p[p.length - 1], ...point) < SAME_POINT_KM ? p : [...p, point]));
+    setNote(null);
+  };
+  const change = (next: (p: LatLon[]) => LatLon[]) => {
+    setPath(next);
+    setNote(null);
+  };
+
+  const save = async (kind: "png" | "pdf") => {
+    if (!drawing.current || !section) return;
+    // Taken now, so the picture and its words are of the same section.
+    const markup = drawing.current.outerHTML;
+    const lines = [t.length(section.lengthKm, section.bendsKm.length), t.nearby(section.nearby, t.widthOption(widthKm))];
+    try {
+      const { onePagePdf, printableSvg, saveFile, svgToPng } = await import("@/lib/saving");
+      const png = await svgToPng(printableSvg(markup), 2);
+      const bytes = kind === "png" ? png.bytes : await onePagePdf(t.pdfTitle, lines, png, [t.pdfKey, text.quality.fixed]);
+      const saved = await saveFile(`Section.${kind}`, kind, bytes);
+      if (saved) setNote(t.saved(saved));
+    } catch (e) {
+      setNote(`${t.saveFailed} ${e instanceof Error ? e.message : String(e)}`);
+    }
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex min-h-0 basis-1/2">
+        <div className="min-w-0 flex-1">
+          <SiteMap sites={sites} selectedId={null} picked={null} doubleClickZoom={false}
+            onSelect={(id) => {
+              const b = sites.find((s) => s.borewell.id === id)?.borewell;
+              if (b?.latitude != null && b.longitude != null) add([b.latitude, b.longitude]);
+            }}
+            onPick={(lat, lon) => add([lat, lon])}>
+            {path.length >= 2 && corridorPolygons(path, widthKm).map((poly, i) => (
+              <Polygon key={i} positions={poly} interactive={false} pathOptions={{ color: LINE, weight: 0, fillOpacity: 0.08 }} />
+            ))}
+            {path.length >= 2 && <Polyline positions={path} interactive={false} pathOptions={{ color: LINE, weight: 2.5 }} />}
+            {path.map((p, i) => (
+              <CircleMarker key={`${i}-${p.join()}`} center={p} radius={5} interactive={false} pathOptions={{ color: LINE, weight: 2, fillColor: "#ffffff", fillOpacity: 1 }}>
+                {(i === 0 || (i === path.length - 1 && path.length > 1)) && <Tooltip permanent direction="top" offset={[0, -6]}>{i === 0 ? "A" : "A′"}</Tooltip>}
+              </CircleMarker>
+            ))}
+          </SiteMap>
+        </div>
+        <aside className="w-[22rem] shrink-0 space-y-3 overflow-y-auto border-l p-4 text-sm">
+          <p className="text-muted-foreground">{path.length === 1 ? t.needTwo : t.hint}</p>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" size="sm" disabled={path.length === 0} onClick={() => change((p) => p.slice(0, -1))}>{t.undo}</Button>
+            <Button variant="outline" size="sm" disabled={path.length === 0} onClick={() => change(() => [])}>{t.clear}</Button>
+          </div>
+          <label className="flex items-center gap-2">
+            {t.width}
+            <select className="rounded-md border bg-background px-2 py-1" value={widthKm} onChange={(e) => {
+              setWidthKm(Number(e.target.value));
+              setNote(null);
+            }}>
+              {WIDTHS.map((w) => <option key={w} value={w}>{t.widthOption(w)}</option>)}
+            </select>
+          </label>
+          {section && (
+            <div className="space-y-1 border-t pt-3">
+              <p>{t.length(section.lengthKm, section.bendsKm.length)}</p>
+              <p>{t.nearby(section.nearby, t.widthOption(widthKm))}</p>
+              {section.borewells.length < section.nearby && <p className="text-muted-foreground">{t.thinned(section.borewells.length)}</p>}
+            </div>
+          )}
+          {anything && (
+            <div className="flex flex-wrap gap-2">
+              <Button variant="outline" size="sm" onClick={() => save("png")}>{t.savePicture}</Button>
+              <Button variant="outline" size="sm" onClick={() => save("pdf")}>{t.savePdf}</Button>
+            </div>
+          )}
+          {note && <p className="text-muted-foreground break-all">{note}</p>}
+          <button type="button" className="text-primary underline underline-offset-2" onClick={onHowGood}>{text.howGood}</button>
+        </aside>
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto border-t p-4">
+        {model === "failed" ? <p>{text.groundFailed}</p>
+          : !ready ? <p className="text-muted-foreground">{text.readingGround}</p>
+          : !section ? null
+          : anything ? <SectionDrawing section={section} ref={drawing} />
+          : <p>{section.columns.every((c) => c.groundFt == null) ? text.noGroundHere : t.nothing}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/docs/superpowers/plans/2026-10-14-stratavision-phase-5-section.md b/docs/superpowers/plans/2026-10-14-stratavision-phase-5-section.md
new file mode 100644
index 0000000..44ae897
--- /dev/null
+++ b/docs/superpowers/plans/2026-10-14-stratavision-phase-5-section.md
@@ -0,0 +1,66 @@
+# StrataVision Phase 5 (Section) Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** A Section screen: draw a line with bends on the map; see the ground along it from the model, with the real borewells near the line drawn solid; save it as a picture or a PDF.
+
+**Architecture:** A pure function `sectionAlong(path, halfWidthKm, prepared, grid, borewells)` in `app/src/model/section.ts` samples the line, asks `predictColumn` at each sample, and places the borewells near the line with StrataField's `placeAlongPath`. A `SectionDrawing` SVG draws heights above sea level (so sloping ground looks right), and a `SectionView` puts the map with the line above the drawing. Saving reuses StrataField's approach: SVG → PNG on a canvas, PDF with pdf-lib, the Save dialog and file writing through Tauri's dialog and fs plugins.
+
+**Tech Stack:** TypeScript, React, Vitest, react-leaflet; new: `pdf-lib`, `@tauri-apps/plugin-dialog`, `@tauri-apps/plugin-fs` (and their Rust crates), all already used by StrataField.
+
+**Spec:** `docs/superpowers/specs/2026-10-13-stratavision-design.md`, "Screens → Section".
+
+## Global Constraints
+
+- Branch `phase-5-section` from `main`. One pull request; the owner merges. No AI attribution lines.
+- The drawing's height is feet above sea level. Model columns are placed by the ground height at their sample; recorded borewells by their own ground height (the same one the model uses).
+- 200 model columns along the line, whatever its length. Same strengths as the new-site column: likely 0.6, rough 0.3, none hatched. Real borewells: solid, full colour, by group, with their ID.
+- Borewells within the chosen distance of the line (0.25, 0.5, 1 or 2 km; 0.5 by default), at most `MAX_SECTION_BOREWELLS`, thinned as StrataField does.
+- The expected water line is drawn only where `waterHere` gives a level; it breaks elsewhere.
+- Saved files are built on this computer; the picture and the PDF use fixed light colours.
+- All wording in `app/src/text/index.ts`.
+
+## Review Focus
+
+1. Sloping ground: a model column and a borewell at the same place must line up by height. (Task 1)
+2. A line with bends: distances along the line, not straight from A. (Task 1)
+3. Spots with no ground height or nothing nearby: a gap, not a crash or a zero-height column. (Tasks 1–2)
+4. Saving: cancelled dialog does nothing; the saved picture does not depend on the app's theme. (Task 3)
+
+---
+
+### Task 1: The section, as numbers
+
+**Files:** Create `app/src/model/section.ts`, `app/src/model/section.test.ts`.
+
+```ts
+export interface SectionColumn { km: number; latitude: number; longitude: number; groundFt: number | null; steps: Step[] | null; waterFt: number | null }
+export interface SectionBorewell { p: Prepared; alongKm: number; offsetKm: number }
+export interface Section { lengthKm: number; columns: SectionColumn[]; borewells: SectionBorewell[]; nearby: number }
+export function sectionAlong(path: LatLon[], halfWidthKm: number, prepared: Prepared[], grid: ElevationGrid, borewells: Borewell[], count = 200): Section;
+```
+
+- [ ] Tests first: samples evenly along a line with a bend, distances along the line; a flat layer between two borewells comes out at the same height on sloping ground; borewells outside the corridor left out, inside ordered along the line; no ground height → `groundFt: null, steps: null`; fewer than two points → empty section; the made-up city's section within the time limit.
+- [ ] Implement; tests, typecheck, lint. Commit `Work out a section along a line`.
+
+### Task 2: The Section screen
+
+**Files:** Create `app/src/components/SectionDrawing.tsx`, `app/src/views/SectionView.tsx`; modify `app/src/App.tsx`, `app/src/components/SiteMap.tsx` (overlays as children), `app/src/text/index.ts`, `e2e/smoke.mjs`.
+
+- [ ] Tab "Section". Click the map to add points (a pin adds its own position); "Undo last point", "Clear". The line, its corridor and A / A′ are drawn on the map.
+- [ ] The drawing: ground line, model columns, borewell columns with IDs, dashed water line, height ruler (ft above sea level), distance along the bottom, A and A′, a key.
+- [ ] Under it: "N borewells within X of the line" (and "M shown" when thinned).
+- [ ] Smoke test: on the Section tab, two clicks draw a section; expect "borewells within".
+- [ ] Verify in the real app with a screenshot. Commit `Draw a section along a line`.
+
+### Task 3: Save as picture and PDF
+
+**Files:** Create `app/src/lib/saving.ts`; modify `app/src-tauri/Cargo.toml`, `app/src-tauri/src/lib.rs`, `app/src-tauri/capabilities/default.json`, `app/package.json`.
+
+- [ ] Picture: PNG at twice the size, light colours. PDF: one A4 landscape page with title, line length, corridor, the picture, the key in words, and the fixed line that these are proposals, not measurements.
+- [ ] Verify both files open. Commit `Save a section as a picture or PDF`.
+
+### Task 4: Review and pull request
+
+- [ ] Fresh reviewer on the branch; fix Critical/Important with a failing test first.
+- [ ] Pull request; Auto-fix on.
diff --git a/e2e/smoke.mjs b/e2e/smoke.mjs
index 244c2c0..5766b2d 100644
--- a/e2e/smoke.mjs
+++ b/e2e/smoke.mjs
@@ -2,8 +2,8 @@
 //
 // 1. Started on a data folder that does not exist, it explains in plain words that there are no
 //    records yet, and leaves no trace (the folder is not created).
-// 2. Started on made-up borewells, clicking a spot on the map shows proposed layers there, and
-//    Data quality reports on them.
+// 2. Started on made-up borewells, clicking a spot on the map shows proposed layers there,
+//    Data quality reports on them, and a line drawn on the Section map draws the section.
 //
 // Build first: npm run tauri -w app -- build --debug --no-bundle
 import { execFileSync, spawn } from "node:child_process";
@@ -114,6 +114,16 @@ const scenarios = {
         await js("[...document.querySelectorAll('header button')].find((b) => b.innerText.trim() === 'Data quality').click()");
         await expectScreen("Checked against 26 borewells");
         await expectScreen("BW-008"); // the one logged upside down
+        // A section across the middle of the made-up borewells.
+        await js("[...document.querySelectorAll('header button')].find((b) => b.innerText.trim() === 'Section').click()");
+        await expectScreen("Click the map to draw a line");
+        await sleep(2500);
+        const [sx, sy] = await js("(() => { const r = [...document.querySelectorAll('.leaflet-container')].find((m) => m.offsetParent).getBoundingClientRect(); return [r.x + r.width / 2, r.y + r.height / 2 + 20]; })()");
+        await click(sx - 150, sy);
+        await click(sx + 150, sy);
+        await expectScreen("borewells within 500 m of the line");
+        await expectScreen("Save as PDF");
+        if (!(await js("!!document.querySelector('svg[aria-label^=\"Section along\"]')"))) throw new Error("the section was not drawn");
       });
     } finally {
       rmSync(dataDir, { recursive: true, force: true, maxRetries: 10, retryDelay: 500 }); // the app may still be letting go
diff --git a/package-lock.json b/package-lock.json
index 60ed01b..d5abdfc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,10 +26,13 @@
         "@fontsource/ibm-plex-sans": "^5.3.0",
         "@strata/core": "*",
         "@tauri-apps/api": "^2.12.0",
+        "@tauri-apps/plugin-dialog": "^2.8.2",
+        "@tauri-apps/plugin-fs": "^2.7.0",
         "class-variance-authority": "^0.7.1",
         "cn": "^0.4.0",
         "leaflet": "^1.9.4",
         "lucide-react": "^1.48.0",
+        "pdf-lib": "^1.17.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-leaflet": "^5.0.0",
@@ -1271,6 +1274,24 @@
         "url": "https://github.com/sponsors/oxc-project"
       }
     },
+    "node_modules/@pdf-lib/standard-fonts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+      "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.6"
+      }
+    },
+    "node_modules/@pdf-lib/upng": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+      "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.10"
+      }
+    },
     "node_modules/@react-leaflet/core": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
@@ -2129,6 +2150,24 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tauri-apps/plugin-dialog": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-dialog/-/plugin-dialog-2.8.2.tgz",
+      "integrity": "sha512-LFqp8OTx0bHOwhKRhMMDyRDlo/2IO5XxoOclpf8+yvjAfM2ytVdbB6tk63dBlicsR8pRw38maj/GxrU6cW8mXw==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.12.0"
+      }
+    },
+    "node_modules/@tauri-apps/plugin-fs": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-fs/-/plugin-fs-2.7.0.tgz",
+      "integrity": "sha512-8RQbPkuYuLZ2r/IRkmmEoBMbtNA01dknnVSh+tw27/CHvaZkJdk9yfPez3XPaT3pJ81SRqukiGdKJVqDokyDgQ==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.12.0"
+      }
+    },
     "node_modules/@ts-morph/common": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
@@ -5940,6 +5979,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parse-ms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
@@ -6001,6 +6046,24 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/pdf-lib": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+      "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "pako": "^1.0.11",
+        "tslib": "^1.11.1"
+      }
+    },
+    "node_modules/pdf-lib/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",