diff --git a/src/app/globals.css b/src/app/globals.css
index f501c83..bdeaba3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -17,9 +17,24 @@
   --surface-2: #1f1f1f;
   --nav-bg: #121212;
   --text: #ffffff;
-  --text-secondary: rgba(255, 255, 255, 0.80); /* 5.7:1 — AA body text, subtitles */
-  --text-muted: rgba(255, 255, 255, 0.56);     /* 3.8:1 — AA large text only (18px+) */
-  --text-dim: rgba(255, 255, 255, 0.34);       /* 2.3:1 — decorative only, never body */
+  --text-secondary: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* 5.7:1 — AA body text, subtitles */
+  --text-muted: rgba(
+    255,
+    255,
+    255,
+    0.56
+  ); /* 3.8:1 — AA large text only (18px+) */
+  --text-dim: rgba(
+    255,
+    255,
+    255,
+    0.34
+  ); /* 2.3:1 — decorative only, never body */
   --border: rgba(220, 219, 214, 0.12);
   --border-strong: rgba(220, 219, 214, 0.18);
   /** Brand dark teal — icons on white chips, light-mode accent. */
@@ -49,9 +64,14 @@
   --surface-2: #f6f6f4;
   --nav-bg: #ffffff;
   --text: #0a0a0a;
-  --text-secondary: rgba(10, 10, 10, 0.72);   /* 5.0:1 — AA body text, subtitles */
-  --text-muted: rgba(10, 10, 10, 0.56);        /* 3.8:1 — AA large text only (18px+) */
-  --text-dim: rgba(10, 10, 10, 0.36);          /* 2.4:1 — decorative only, never body */
+  --text-secondary: rgba(
+    10,
+    10,
+    10,
+    0.72
+  ); /* 5.0:1 — AA body text, subtitles */
+  --text-muted: rgba(10, 10, 10, 0.56); /* 3.8:1 — AA large text only (18px+) */
+  --text-dim: rgba(10, 10, 10, 0.36); /* 2.4:1 — decorative only, never body */
   --border: rgba(45, 45, 42, 0.12);
   --border-strong: rgba(45, 45, 42, 0.17);
   --accent-solid: #006c66;
@@ -98,10 +118,12 @@
 
   --shadow-editor: var(--editor-shadow);
 
-  --font-sans: var(--font-geist-sans), "Geist", "Geist Fallback", -apple-system,
-    system-ui, sans-serif;
-  --font-mono: var(--font-geist-mono), "Geist Mono", "Geist Mono Fallback",
-    ui-monospace, monospace;
+  --font-sans:
+    var(--font-geist-sans), "Geist", "Geist Fallback", -apple-system, system-ui,
+    sans-serif;
+  --font-mono:
+    var(--font-geist-mono), "Geist Mono", "Geist Mono Fallback", ui-monospace,
+    monospace;
 }
 
 @layer base {
@@ -117,12 +139,17 @@
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     overflow-x: hidden;
-    transition: background 0.5s ease, color 0.5s ease;
+    transition:
+      background 0.5s ease,
+      color 0.5s ease;
   }
 
   /* The app only ever renders the editor shell, which owns the viewport. */
+  html:has(.editor-shell),
   body:has(.editor-shell) {
+    height: 100%;
     overflow: hidden;
+    overscroll-behavior: none;
   }
 
   /* The footer is rendered by the root layout on every route, but the app
diff --git a/src/components/layout/EditorShell.tsx b/src/components/layout/EditorShell.tsx
index 608080f..6892ba7 100644
--- a/src/components/layout/EditorShell.tsx
+++ b/src/components/layout/EditorShell.tsx
@@ -1,25 +1,127 @@
-import type { ReactNode } from "react";
+"use client";
+
+import { useRef, useState, type PointerEvent, type ReactNode } from "react";
+
+/** Id of the mobile controls drawer, for aria-controls on its triggers. */
+export const EDITOR_CONTROLS_ID = "editor-controls";
+
+/** Drag distance (px) or flick speed (px/ms) that dismisses the sheet. */
+const DISMISS_DISTANCE = 80;
+const DISMISS_VELOCITY = 0.5;
 
 type EditorShellProps = {
   header: ReactNode;
   sidebar: ReactNode;
   preview: ReactNode;
+  /** Whether the mobile controls drawer is open (<=900px only). */
+  controlsOpen: boolean;
+  onCloseControls: () => void;
 };
 
-export function EditorShell({ header, sidebar, preview }: EditorShellProps) {
+export function EditorShell({
+  header,
+  sidebar,
+  preview,
+  controlsOpen,
+  onCloseControls,
+}: EditorShellProps) {
+  const drag = useRef<{
+    startY: number;
+    lastY: number;
+    lastT: number;
+    v: number;
+  } | null>(null);
+  const moved = useRef(false);
+  const [dragY, setDragY] = useState<number | null>(null);
+
+  const onHandleDown = (event: PointerEvent<HTMLButtonElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = {
+      startY: event.clientY,
+      lastY: event.clientY,
+      lastT: event.timeStamp,
+      v: 0,
+    };
+    moved.current = false;
+    setDragY(0);
+  };
+
+  const onHandleMove = (event: PointerEvent<HTMLButtonElement>) => {
+    const state = drag.current;
+    if (!state) return;
+    const dy = event.clientY - state.startY;
+    if (Math.abs(dy) > 4) moved.current = true;
+    const dt = event.timeStamp - state.lastT;
+    if (dt > 0) state.v = (event.clientY - state.lastY) / dt;
+    state.lastY = event.clientY;
+    state.lastT = event.timeStamp;
+    // There is nothing above the open position to reveal, so up only rubber-bands.
+    setDragY(dy > 0 ? dy : Math.max(-24, dy / 3));
+  };
+
+  const onHandleUp = (event: PointerEvent<HTMLButtonElement>) => {
+    const state = drag.current;
+    drag.current = null;
+    setDragY(null);
+    if (!state) return;
+    const dy = event.clientY - state.startY;
+    if (dy > DISMISS_DISTANCE || state.v > DISMISS_VELOCITY) onCloseControls();
+  };
+
+  const onHandleClick = () => {
+    if (moved.current) return;
+    onCloseControls();
+  };
+
   return (
-    <div className="editor-shell flex h-dvh flex-col bg-editor-bg-base text-editor-fg-primary [--editor-sidebar-width:min(400px,36vw)]">
+    <div className="editor-shell flex h-svh flex-col overflow-hidden bg-editor-bg-base text-editor-fg-primary [--editor-sidebar-width:min(400px,36vw)]">
       <header className="relative z-[100] flex-shrink-0 overflow-visible bg-editor-bg-base">
         {header}
       </header>
-      <div className="flex min-h-0 flex-1 max-[900px]:flex-col">
+      <div className="flex min-h-0 flex-1">
+        {/* Backdrop behind the mobile drawer. */}
+        <button
+          type="button"
+          aria-hidden="true"
+          tabIndex={-1}
+          onClick={onCloseControls}
+          className={`fixed inset-0 z-[105] bg-black/40 backdrop-blur-[2px] transition-opacity duration-[380ms] ease-[cubic-bezier(0.22,1,0.36,1)] min-[901px]:hidden ${
+            controlsOpen ? "opacity-100" : "pointer-events-none opacity-0"
+          }`}
+        />
         <aside
-          className="flex w-[var(--editor-sidebar-width)] flex-shrink-0 flex-col gap-3 overflow-y-auto bg-editor-bg-base p-4 max-[900px]:max-h-[42vh] max-[900px]:w-full max-[900px]:border-b max-[900px]:border-editor-border"
+          id={EDITOR_CONTROLS_ID}
+          className={`flex flex-shrink-0 flex-col gap-3 overflow-y-auto bg-editor-bg-base p-4 min-[901px]:w-[var(--editor-sidebar-width)] max-[900px]:fixed max-[900px]:inset-x-0 max-[900px]:bottom-0 max-[900px]:top-auto max-[900px]:z-[110] max-[900px]:min-w-0 max-[900px]:overflow-x-hidden max-[900px]:overscroll-contain max-[900px]:rounded-t-editor-lg max-[900px]:border-t max-[900px]:border-editor-border max-[900px]:pt-4 max-[900px]:shadow-[0_-12px_40px_rgba(0,0,0,0.28)] max-[900px]:max-h-[80svh] max-[900px]:transition-[translate,opacity,visibility] max-[900px]:duration-[380ms] max-[900px]:ease-[cubic-bezier(0.22,1,0.36,1)] max-[900px]:will-change-[translate] max-[900px]:motion-reduce:transition-none ${
+            controlsOpen
+              ? "max-[900px]:visible max-[900px]:translate-y-0 max-[900px]:opacity-100"
+              : "max-[900px]:invisible max-[900px]:translate-y-full max-[900px]:opacity-0"
+          }`}
+          style={
+            dragY === null
+              ? undefined
+              : { translate: `0 ${dragY}px`, transition: "none" }
+          }
           aria-label="Map controls"
         >
+          <button
+            type="button"
+            onClick={onHandleClick}
+            onPointerDown={onHandleDown}
+            onPointerMove={onHandleMove}
+            onPointerUp={onHandleUp}
+            onPointerCancel={onHandleUp}
+            aria-label="Close time series"
+            className="hidden flex-shrink-0 touch-none select-none flex-col items-center gap-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-editor-fg-tertiary transition-colors hover:text-editor-fg-primary active:cursor-grabbing max-[900px]:flex"
+          >
+            <span
+              aria-hidden="true"
+              className="h-1 w-9 rounded-full bg-editor-border"
+            />
+            Time series
+          </button>
           {sidebar}
         </aside>
-        <div className="flex min-w-0 flex-1 bg-editor-bg-base pb-2 pr-2 max-[900px]:pl-2">
+        <div className="flex min-w-0 flex-1 bg-editor-bg-base pb-2 pr-2 max-[900px]:px-2 max-[900px]:pb-2">
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-editor-lg border border-editor-border bg-editor-bg-primary">
             <div className="relative isolate min-h-0 flex-1 overflow-hidden rounded-[inherit]">
               {preview}
diff --git a/src/components/layout/Nav.tsx b/src/components/layout/Nav.tsx
index fa1f637..ab54012 100644
--- a/src/components/layout/Nav.tsx
+++ b/src/components/layout/Nav.tsx
@@ -27,38 +27,44 @@ export function Nav({
 }: NavProps) {
   return (
     <nav className="relative z-[100] flex w-full flex-col gap-0 overflow-visible">
-      <div className="relative z-[2] box-border grid h-12 w-full grid-cols-[var(--editor-sidebar-width)_1fr] items-center gap-0 overflow-visible rounded-none border-0 bg-transparent p-0">
-        <div className="box-border flex min-w-0 items-center px-4 py-2">
+      <div className="relative z-[2] box-border grid h-12 w-full grid-cols-[var(--editor-sidebar-width)_1fr] items-center max-[900px]:grid-cols-[auto_1fr] gap-0 overflow-visible rounded-none border-0 bg-transparent p-0">
+        <div className="box-border flex min-w-0 items-center gap-2 px-4 py-2">
           <Brand />
         </div>
         <div className="box-border flex min-w-0 items-center bg-editor-bg-base py-2 pl-0 pr-2">
           <div className="mr-auto flex flex-shrink-0 items-center gap-1.5">
+            {/* On mobile (<=900px) the view toggle and these controls move to
+                the map's floating side panels. */}
             {onViewModeChange ? (
-              <EditorViewTabs value={viewMode} onChange={onViewModeChange} />
-            ) : null}
-            {hasSelection && onZoomToSelection ? (
-              <IconButton
-                className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
-                aria-label="Zoom to selection"
-                onClick={onZoomToSelection}
-              >
-                <CrosshairIcon />
-              </IconButton>
-            ) : null}
-            {hasSelection && onTogglePatch ? (
-              <IconButton
-                className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
-                aria-label={
-                  showPatch
-                    ? "Hide downloaded patch extent"
-                    : "Show downloaded patch extent"
-                }
-                aria-pressed={showPatch}
-                onClick={onTogglePatch}
-              >
-                <PatchIcon />
-              </IconButton>
+              <div className="max-[900px]:hidden">
+                <EditorViewTabs value={viewMode} onChange={onViewModeChange} />
+              </div>
             ) : null}
+            <div className="flex items-center gap-1.5 max-[900px]:hidden">
+              {hasSelection && onZoomToSelection ? (
+                <IconButton
+                  className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+                  aria-label="Zoom to selection"
+                  onClick={onZoomToSelection}
+                >
+                  <CrosshairIcon />
+                </IconButton>
+              ) : null}
+              {hasSelection && onTogglePatch ? (
+                <IconButton
+                  className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+                  aria-label={
+                    showPatch
+                      ? "Hide downloaded patch extent"
+                      : "Show downloaded patch extent"
+                  }
+                  aria-pressed={showPatch}
+                  onClick={onTogglePatch}
+                >
+                  <PatchIcon />
+                </IconButton>
+              ) : null}
+            </div>
           </div>
           <NavActions />
         </div>
diff --git a/src/components/map/EarthMap.tsx b/src/components/map/EarthMap.tsx
index f29542f..52cfbda 100644
--- a/src/components/map/EarthMap.tsx
+++ b/src/components/map/EarthMap.tsx
@@ -22,8 +22,13 @@ import { ZarrChunkReader } from "@/lib/zarr/ZarrChunkReader";
 import { DEFAULT_HISTORY_YEARS } from "@/lib/zarr/timeRange";
 import type { MapSelection, MapViewMode, MapViewState } from "@/types/map";
 import { useTheme } from "@/providers/ThemeProvider";
-import { EditorShell } from "@/components/layout/EditorShell";
+import {
+  EditorShell,
+  EDITOR_CONTROLS_ID,
+} from "@/components/layout/EditorShell";
 import { Nav } from "@/components/layout/Nav";
+import { MapSideControls } from "@/components/map/MapSideControls";
+import { MapSearch } from "@/components/map/MapSearch";
 import { MapReadout } from "@/components/map/MapReadout";
 import { GlobeSelectionOverlay } from "@/components/map/GlobeSelectionOverlay";
 
@@ -58,6 +63,7 @@ export function EarthMap() {
   const [mapSize, setMapSize] = useState({ width: 0, height: 0 });
   const [selection, setSelection] = useState<MapSelection | null>(null);
   const [showPatch, setShowPatch] = useState(true);
+  const [controlsOpen, setControlsOpen] = useState(false);
   const [historyYears, setHistoryYears] = useState(DEFAULT_HISTORY_YEARS);
   const [loadingSeries, setLoadingSeries] = useState(false);
   const [seriesProgress, setSeriesProgress] = useState<{
@@ -166,7 +172,11 @@ export function EarthMap() {
       };
 
       setSelection(nextSelection);
-      const focused = viewStateFocusedOnCell(viewState, nextSelection.grid, viewMode);
+      const focused = viewStateFocusedOnCell(
+        viewState,
+        nextSelection.grid,
+        viewMode,
+      );
       flyToView(focused, SELECTION_FOCUS_TRANSITION_MS);
       void loadTimeSeries(nextSelection, historyYears);
     },
@@ -235,6 +245,8 @@ export function EarthMap() {
 
   return (
     <EditorShell
+      controlsOpen={controlsOpen}
+      onCloseControls={() => setControlsOpen(false)}
       header={
         <Nav
           viewMode={viewMode}
@@ -298,6 +310,23 @@ export function EarthMap() {
               />
             ) : null}
           </Map>
+          <div className="pointer-events-none absolute inset-x-0 top-2 z-30 flex justify-center px-2">
+            <MapSearch
+              onSelect={handlePick}
+              className="pointer-events-auto w-full min-[901px]:max-w-[400px]"
+            />
+          </div>
+          <MapSideControls
+            viewMode={viewMode}
+            onViewModeChange={handleViewModeChange}
+            hasSelection={selection !== null}
+            onZoomToSelection={handleZoomToSelection}
+            showPatch={showPatch}
+            onTogglePatch={handleTogglePatch}
+            controlsOpen={controlsOpen}
+            onToggleControls={() => setControlsOpen((open) => !open)}
+            controlsId={EDITOR_CONTROLS_ID}
+          />
         </div>
       }
     />
diff --git a/src/components/map/MapReadout.tsx b/src/components/map/MapReadout.tsx
index bdf787e..ba938c3 100644
--- a/src/components/map/MapReadout.tsx
+++ b/src/components/map/MapReadout.tsx
@@ -115,22 +115,19 @@ export function MapReadout({
   return (
     <div className="flex flex-col divide-y divide-editor-border">
       <section className="pb-4">
-        <div className="flex items-baseline justify-between gap-3">
-          <h2 className="font-mono text-[20px] leading-none tracking-tight tabular-nums text-editor-fg-primary">
-            {formatCoordinate(selection.click.lat)}
-            <span className="text-editor-fg-tertiary">, </span>
-            {formatCoordinate(selection.click.lon)}
-          </h2>
-          <span className={`flex-shrink-0 ${META}`}>{ZARR_STORE.kicker}</span>
-        </div>
+        <h2 className="font-mono text-[20px] leading-none tracking-tight tabular-nums text-editor-fg-primary">
+          {formatCoordinate(selection.click.lat)}
+          <span className="text-editor-fg-tertiary">, </span>
+          {formatCoordinate(selection.click.lon)}
+        </h2>
         <p className="mt-2 text-[12.5px] leading-[1.5] text-editor-fg-tertiary">
-          Snapped to the nearest {ZARR_STORE.spatialResolutionDeg}° cell ·
-          variable {ZARR_STORE.defaultVariable}
+          {ZARR_STORE.kicker} · snapped to the nearest{" "}
+          {ZARR_STORE.spatialResolutionDeg}° cell
         </p>
         <p className="mt-2 text-[12.5px] leading-[1.5] text-editor-fg-tertiary">
           Each click downloads a {patchCells}×{patchCells} patch ({patchDeg}° ×{" "}
-          {patchDeg}°), drawn as the dashed box. Toggle it with the patch button
-          in the top bar.
+          {patchDeg}°), drawn as the dashed box. Toggle it with the patch
+          button.
         </p>
       </section>
 
@@ -173,7 +170,8 @@ function formatBytes(bytes: number): string {
 function SeriesLoader({ progress }: { progress: SeriesProgress | null }) {
   const hasBytes = progress !== null && progress.total > 0;
   const value = hasBytes ? progress.loaded / progress.total : undefined;
-  const pct = value === undefined ? null : Math.min(100, Math.round(value * 100));
+  const pct =
+    value === undefined ? null : Math.min(100, Math.round(value * 100));
 
   return (
     <div className="grid gap-2">
diff --git a/src/components/map/MapSearch.tsx b/src/components/map/MapSearch.tsx
new file mode 100644
index 0000000..ef1de6a
--- /dev/null
+++ b/src/components/map/MapSearch.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { CrosshairIcon } from "@/icons/CrosshairIcon";
+import { SearchIcon } from "@/icons/SearchIcon";
+import {
+  geocodeAddress,
+  parseCoordinates,
+  type SearchResult,
+} from "@/lib/search/geocode";
+import { loadSearchHistory, pushSearchHistory } from "@/lib/search/history";
+
+type MapSearchProps = {
+  onSelect: (lon: number, lat: number) => void;
+  className?: string;
+};
+
+type Status = "idle" | "loading" | "done" | "error";
+
+const DEBOUNCE_MS = 300;
+
+export function MapSearch({ onSelect, className }: MapSearchProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const skipNextFetchRef = useRef(false);
+
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [status, setStatus] = useState<Status>("idle");
+  const [open, setOpen] = useState(false);
+  const [history, setHistory] = useState<SearchResult[]>([]);
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const trimmed = query.trim();
+  const coord = parseCoordinates(trimmed);
+
+  // Focus the input when the user presses "/" outside of another field.
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "/") return;
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+      const target = event.target as HTMLElement | null;
+      const tag = target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
+        return;
+      }
+      event.preventDefault();
+      inputRef.current?.focus();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  // Debounced address lookup. Empty/coordinate input is resolved in the change
+  // handler, so this effect only fires network requests and updates state from
+  // their async results.
+  useEffect(() => {
+    if (skipNextFetchRef.current) {
+      skipNextFetchRef.current = false;
+      return;
+    }
+    const q = query.trim();
+    if (!q || parseCoordinates(q)) return;
+
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      geocodeAddress(q, controller.signal)
+        .then((next) => {
+          setResults(next);
+          setStatus("done");
+          setActiveIndex(0);
+        })
+        .catch(() => {
+          if (controller.signal.aborted) return;
+          setResults([]);
+          setStatus("error");
+        });
+    }, DEBOUNCE_MS);
+
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [query]);
+
+  const onQueryChange = (value: string) => {
+    setQuery(value);
+    setActiveIndex(0);
+    const q = value.trim();
+    if (q && !parseCoordinates(q)) {
+      setStatus("loading");
+    } else {
+      setResults([]);
+      setStatus(q ? "done" : "idle");
+    }
+  };
+
+  const list: SearchResult[] = trimmed
+    ? coord
+      ? [coord, ...results]
+      : results
+    : history;
+
+  const showEmpty =
+    Boolean(trimmed) && !coord && status !== "loading" && results.length === 0;
+  const showDropdown =
+    open && (list.length > 0 || status === "loading" || showEmpty);
+
+  const select = (result: SearchResult) => {
+    onSelect(result.lon, result.lat);
+    setHistory(pushSearchHistory(result));
+    skipNextFetchRef.current = true;
+    setQuery(result.label);
+    setOpen(false);
+    inputRef.current?.blur();
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActiveIndex((index) => Math.min(list.length - 1, index + 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActiveIndex((index) => Math.max(0, index - 1));
+    } else if (event.key === "Enter") {
+      const target = list[activeIndex] ?? list[0] ?? coord;
+      if (target) {
+        event.preventDefault();
+        select(target);
+      }
+    } else if (event.key === "Escape") {
+      setOpen(false);
+      inputRef.current?.blur();
+    }
+  };
+
+  return (
+    <div className={`relative ${className ?? ""}`}>
+      <div
+        className={`flex h-10 items-center gap-2.5 rounded-editor-sm border bg-editor-bg-base px-3 shadow-editor transition-colors ${
+          open ? "border-accent" : "border-editor-border"
+        }`}
+      >
+        <span className="flex-shrink-0 text-editor-fg-tertiary">
+          <SearchIcon />
+        </span>
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+          onFocus={() => {
+            setHistory(loadSearchHistory());
+            setOpen(true);
+          }}
+          onBlur={() => setOpen(false)}
+          onKeyDown={onKeyDown}
+          placeholder="Search address or coordinates"
+          aria-label="Search address or coordinates"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          className="min-w-0 flex-1 bg-transparent text-base text-editor-fg-primary placeholder:text-editor-fg-tertiary focus:outline-none min-[901px]:text-sm"
+        />
+        {query ? (
+          <button
+            type="button"
+            // Keep the input focused so clearing doesn't close the box.
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => {
+              onQueryChange("");
+              inputRef.current?.focus();
+            }}
+            aria-label="Clear search"
+            className="grid size-6 flex-shrink-0 place-items-center rounded-full text-editor-fg-tertiary transition-colors hover:bg-editor-bg-secondary hover:text-editor-fg-primary"
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              aria-hidden="true"
+            >
+              <path d="M6 6l12 12M18 6 6 18" />
+            </svg>
+          </button>
+        ) : !open ? (
+          <kbd className="flex-shrink-0 rounded-[5px] border border-editor-border px-1.5 py-0.5 font-mono text-[11px] text-editor-fg-tertiary">
+            /
+          </kbd>
+        ) : null}
+      </div>
+
+      {showDropdown ? (
+        <div
+          // Keep input focus so clicking a row still fires its onClick.
+          onMouseDown={(event) => event.preventDefault()}
+          className="absolute inset-x-0 top-full z-10 mt-2 overflow-hidden rounded-editor-sm border border-editor-border bg-editor-bg-base py-1 shadow-editor"
+        >
+          {status === "loading" ? (
+            <p className="px-3 py-3 text-sm text-editor-fg-tertiary">
+              Searching…
+            </p>
+          ) : showEmpty ? (
+            <p className="px-3 py-3 text-sm text-editor-fg-tertiary">
+              No matches for “{trimmed}”.
+            </p>
+          ) : (
+            <>
+              {!trimmed ? (
+                <p className="px-3 pb-1 pt-1.5 text-[11px] font-medium uppercase tracking-wide text-editor-fg-tertiary">
+                  Recent
+                </p>
+              ) : null}
+              {list.map((result, index) => (
+                <button
+                  key={result.id}
+                  type="button"
+                  onClick={() => select(result)}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  data-active={index === activeIndex}
+                  className="flex w-full items-center gap-2.5 px-3 py-1.5 text-left data-[active=true]:bg-editor-bg-secondary"
+                >
+                  <span className="flex-shrink-0 text-editor-fg-tertiary">
+                    <CrosshairIcon />
+                  </span>
+                  <span className="min-w-0 flex-1 leading-tight">
+                    <span className="block truncate text-sm text-editor-fg-primary">
+                      {result.label}
+                    </span>
+                    {result.detail ? (
+                      <span className="block truncate text-xs text-editor-fg-tertiary">
+                        {result.detail}
+                      </span>
+                    ) : null}
+                  </span>
+                </button>
+              ))}
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/map/MapSideControls.tsx b/src/components/map/MapSideControls.tsx
new file mode 100644
index 0000000..1686602
--- /dev/null
+++ b/src/components/map/MapSideControls.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { IconButton } from "@/components/ui/IconButton";
+import { CrosshairIcon } from "@/icons/CrosshairIcon";
+import { FingerprintIcon } from "@/icons/FingerprintIcon";
+import { GlobeIcon } from "@/icons/GlobeIcon";
+import { MapIcon } from "@/icons/MapIcon";
+import { PatchIcon } from "@/icons/PatchIcon";
+import type { MapViewMode } from "@/types/map";
+
+type MapSideControlsProps = {
+  viewMode: MapViewMode;
+  onViewModeChange: (mode: MapViewMode) => void;
+  hasSelection: boolean;
+  onZoomToSelection: () => void;
+  showPatch: boolean;
+  onTogglePatch: () => void;
+  controlsOpen: boolean;
+  onToggleControls: () => void;
+  controlsId: string;
+};
+
+const ISLAND_CLASS =
+  "pointer-events-auto flex flex-col items-center gap-1.5 rounded-editor-sm " +
+  "border border-editor-border bg-editor-bg-base p-1.5 shadow-editor";
+
+// Mobile-only counterpart to the header nav controls. On narrow layouts
+// (<=900px, matching EditorShell's stacking breakpoint) the view toggle and the
+// crosshair/patch controls move out of the header and float against the right
+// edge of the map as stacked "islands", mirroring the issue #49 mockup. The
+// last island opens the readout drawer, replacing the header hamburger; like
+// the crosshair/patch island it only appears once a cell has been picked, since
+// there is nothing to read out before then.
+export function MapSideControls({
+  viewMode,
+  onViewModeChange,
+  hasSelection,
+  onZoomToSelection,
+  showPatch,
+  onTogglePatch,
+  controlsOpen,
+  onToggleControls,
+  controlsId,
+}: MapSideControlsProps) {
+  return (
+    <div className="pointer-events-none absolute right-3 top-1/2 z-20 hidden -translate-y-1/2 flex-col items-end gap-2 max-[900px]:flex">
+      <div className={ISLAND_CLASS}>
+        <IconButton
+          variant="plain"
+          tooltipPlacement="left"
+          aria-label="Plan view"
+          aria-pressed={viewMode === "2d"}
+          onClick={() => onViewModeChange("2d")}
+        >
+          <MapIcon />
+        </IconButton>
+        <IconButton
+          variant="plain"
+          tooltipPlacement="left"
+          aria-label="Sphere view"
+          aria-pressed={viewMode === "sphere"}
+          onClick={() => onViewModeChange("sphere")}
+        >
+          <GlobeIcon />
+        </IconButton>
+      </div>
+      {hasSelection ? (
+        <>
+          <div className={ISLAND_CLASS}>
+            <IconButton
+              variant="plain"
+              tooltipPlacement="left"
+              className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+              aria-label="Zoom to selection"
+              onClick={onZoomToSelection}
+            >
+              <CrosshairIcon />
+            </IconButton>
+            <IconButton
+              variant="plain"
+              tooltipPlacement="left"
+              className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+              aria-label={
+                showPatch
+                  ? "Hide downloaded patch extent"
+                  : "Show downloaded patch extent"
+              }
+              aria-pressed={showPatch}
+              onClick={onTogglePatch}
+            >
+              <PatchIcon />
+            </IconButton>
+          </div>
+          <div className={ISLAND_CLASS}>
+            <IconButton
+              variant="plain"
+              tooltipPlacement="left"
+              className="animate-[zoomToSelectionIn_0.18s_cubic-bezier(0.16,1,0.3,1)]"
+              aria-label={controlsOpen ? "Hide time series" : "Show time series"}
+              aria-expanded={controlsOpen}
+              aria-controls={controlsId}
+              aria-pressed={controlsOpen}
+              onClick={onToggleControls}
+            >
+              <FingerprintIcon />
+            </IconButton>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/nav/Brand.tsx b/src/components/nav/Brand.tsx
index 08b66db..9493254 100644
--- a/src/components/nav/Brand.tsx
+++ b/src/components/nav/Brand.tsx
@@ -6,13 +6,13 @@ export function Brand() {
   return (
     <Link
       href="/map"
-      className="flex flex-shrink-0 items-center gap-[11px]"
+      className="flex min-w-0 items-center gap-[11px]"
       aria-label={`${SITE_NAME} home`}
     >
       <span className="flex flex-shrink-0">
         <BrandMark size={32} />
       </span>
-      <span className="text-[17px] font-semibold tracking-[-0.02em] text-editor-fg-primary">
+      <span className="truncate text-[17px] font-semibold tracking-[-0.02em] text-editor-fg-primary">
         <b className="font-semibold">{SITE_NAME}</b>
       </span>
     </Link>
diff --git a/src/components/ui/IconButton.tsx b/src/components/ui/IconButton.tsx
index 00d5a54..8763525 100644
--- a/src/components/ui/IconButton.tsx
+++ b/src/components/ui/IconButton.tsx
@@ -10,6 +10,13 @@ type IconButtonProps = {
   "aria-pressed"?: boolean;
   /** When set, renders an anchor to this URL instead of a button. */
   href?: string;
+  /**
+   * "plain" drops the border/background so the button reads as a bare icon —
+   * used inside the mobile floating islands, which already carry their own
+   * border and shadow.
+   */
+  variant?: "default" | "plain";
+  tooltipPlacement?: "bottom" | "left";
 };
 
 // Every IconButton renders inside the editor nav, so the editor sizing/colour
@@ -26,16 +33,31 @@ const ICON_BUTTON_PRESSED_CLASS =
   "hover:text-accent hover:border-[color-mix(in_srgb,var(--accent)_45%,transparent)] " +
   "hover:bg-[color-mix(in_srgb,var(--accent)_16%,transparent)]";
 
-// Appears below the button on hover or keyboard focus. Decorative only — the
-// button keeps its aria-label so screen readers do not double-announce.
+// Borderless variant — no border or resting background.
+const ICON_BUTTON_PLAIN_CLASS =
+  "peer grid size-8 place-items-center rounded-editor-sm border border-transparent " +
+  "bg-transparent text-editor-fg-secondary transition-all duration-200 " +
+  "hover:bg-editor-bg-secondary hover:text-editor-fg-primary";
+
+const ICON_BUTTON_PLAIN_PRESSED_CLASS =
+  "bg-[color-mix(in_srgb,var(--accent)_16%,transparent)] text-accent " +
+  "hover:text-accent hover:bg-[color-mix(in_srgb,var(--accent)_16%,transparent)]";
+
+// Appears on hover or keyboard focus. Decorative only — the button keeps its
+// aria-label so screen readers do not double-announce.
 const TOOLTIP_CLASS =
-  "pointer-events-none absolute left-1/2 top-full z-[200] mt-2 -translate-x-1/2 " +
-  "translate-y-[-2px] whitespace-nowrap rounded-editor-sm border border-editor-border " +
-  "bg-editor-bg-depth px-2 py-1 text-xs font-medium text-editor-fg-primary shadow-editor " +
-  "opacity-0 transition-all duration-150 " +
-  "group-hover:translate-y-0 group-hover:opacity-100 " +
-  "group-focus-within:translate-y-0 group-focus-within:opacity-100 " +
-  "peer-aria-expanded:hidden";
+  "pointer-events-none absolute z-[200] whitespace-nowrap rounded-editor-sm " +
+  "border border-editor-border bg-editor-bg-depth px-2 py-1 text-xs font-medium " +
+  "text-editor-fg-primary shadow-editor opacity-0 transition-all duration-150 " +
+  "group-hover:opacity-100 group-focus-within:opacity-100 peer-aria-expanded:hidden";
+
+const TOOLTIP_BOTTOM_CLASS =
+  "left-1/2 top-full mt-2 -translate-x-1/2 translate-y-[-2px] " +
+  "group-hover:translate-y-0 group-focus-within:translate-y-0";
+
+const TOOLTIP_LEFT_CLASS =
+  "right-full top-1/2 mr-2 -translate-y-1/2 translate-x-[2px] " +
+  "group-hover:translate-x-0 group-focus-within:translate-x-0";
 
 export function IconButton({
   children,
@@ -47,11 +69,18 @@ export function IconButton({
   "aria-controls": ariaControls,
   "aria-pressed": ariaPressed,
   href,
+  variant = "default",
+  tooltipPlacement = "bottom",
 }: IconButtonProps) {
   const tooltipLabel = tooltip ?? ariaLabel;
+  const plain = variant === "plain";
   const classes = [
-    ICON_BUTTON_CLASS,
-    ariaPressed ? ICON_BUTTON_PRESSED_CLASS : null,
+    plain ? ICON_BUTTON_PLAIN_CLASS : ICON_BUTTON_CLASS,
+    ariaPressed
+      ? plain
+        ? ICON_BUTTON_PLAIN_PRESSED_CLASS
+        : ICON_BUTTON_PRESSED_CLASS
+      : null,
     className,
   ]
     .filter(Boolean)
@@ -85,7 +114,15 @@ export function IconButton({
   return (
     <span className="group relative inline-flex">
       {control}
-      <span role="tooltip" aria-hidden="true" className={TOOLTIP_CLASS}>
+      <span
+        role="tooltip"
+        aria-hidden="true"
+        className={`${TOOLTIP_CLASS} ${
+          tooltipPlacement === "left"
+            ? TOOLTIP_LEFT_CLASS
+            : TOOLTIP_BOTTOM_CLASS
+        }`}
+      >
         {tooltipLabel}
       </span>
     </span>
diff --git a/src/icons/FingerprintIcon.tsx b/src/icons/FingerprintIcon.tsx
new file mode 100644
index 0000000..232e9d9
--- /dev/null
+++ b/src/icons/FingerprintIcon.tsx
@@ -0,0 +1,23 @@
+export function FingerprintIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M12 11a1 1 0 0 1 1 1c0 3.2-.5 5.7-1.4 7.6" />
+      <path d="M9.2 20.7c1.2-2.2 1.8-4.9 1.8-8.7a1 1 0 0 1 2 0c0 1.6-.1 3-.3 4.3" />
+      <path d="M8 12a4 4 0 1 1 8 0c0 2.6-.2 4.8-.7 6.6" />
+      <path d="M6.6 18.2c.9-1.8 1.4-4 1.4-6.2a4 4 0 0 1 .5-2" />
+      <path d="M5 12a7 7 0 0 1 12-4.9" />
+      <path d="M19 12c0 1.5-.1 2.9-.3 4.1" />
+      <path d="M4.6 15.5c.3-1.1.4-2.3.4-3.5" />
+    </svg>
+  );
+}
diff --git a/src/icons/GlobeIcon.tsx b/src/icons/GlobeIcon.tsx
new file mode 100644
index 0000000..baee5c6
--- /dev/null
+++ b/src/icons/GlobeIcon.tsx
@@ -0,0 +1,19 @@
+export function GlobeIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18" />
+      <path d="M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z" />
+    </svg>
+  );
+}
diff --git a/src/icons/MapIcon.tsx b/src/icons/MapIcon.tsx
new file mode 100644
index 0000000..9fd8fc0
--- /dev/null
+++ b/src/icons/MapIcon.tsx
@@ -0,0 +1,19 @@
+export function MapIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2Z" />
+      <path d="M9 4v14" />
+      <path d="M15 6v14" />
+    </svg>
+  );
+}
diff --git a/src/icons/MenuIcon.tsx b/src/icons/MenuIcon.tsx
deleted file mode 100644
index 9336b7f..0000000
--- a/src/icons/MenuIcon.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-type MenuIconProps = {
-  open?: boolean;
-};
-
-export function MenuIcon({ open = false }: MenuIconProps) {
-  return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeLinecap="round"
-    >
-      {open ? (
-        <>
-          <path d="M6 6l12 12M18 6 6 18" />
-        </>
-      ) : (
-        <>
-          <path d="M4 7h16M4 12h16M4 17h16" />
-        </>
-      )}
-    </svg>
-  );
-}
diff --git a/src/icons/SearchIcon.tsx b/src/icons/SearchIcon.tsx
new file mode 100644
index 0000000..fa18ce4
--- /dev/null
+++ b/src/icons/SearchIcon.tsx
@@ -0,0 +1,18 @@
+export function SearchIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="11" cy="11" r="7" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+}
diff --git a/src/lib/search/geocode.ts b/src/lib/search/geocode.ts
new file mode 100644
index 0000000..0791c9d
--- /dev/null
+++ b/src/lib/search/geocode.ts
@@ -0,0 +1,88 @@
+// Geocoding helpers for the map search box. Address lookups use Nominatim
+// (OpenStreetMap) — keyless and CORS-enabled, matching the keyless OpenFreeMap
+// tiles the map already uses. Raw coordinate input is parsed locally.
+
+export type SearchResult = {
+  id: string;
+  /** Primary line, e.g. "Jena". */
+  label: string;
+  /** Secondary greyed line, e.g. "Thuringia · Germany" or "Coordinates". */
+  detail: string;
+  lon: number;
+  lat: number;
+};
+
+// Accepts "lat, lon", "lat lon", or "lat; lon" with an optional leading sign.
+const COORD_PATTERN =
+  /^\s*(-?\d{1,2}(?:\.\d+)?)\s*[,;\s]\s*(-?\d{1,3}(?:\.\d+)?)\s*$/;
+
+export function parseCoordinates(query: string): SearchResult | null {
+  const match = query.match(COORD_PATTERN);
+  if (!match) return null;
+
+  const lat = Number(match[1]);
+  const lon = Number(match[2]);
+  if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;
+  if (lat < -90 || lat > 90 || lon < -180 || lon > 180) return null;
+
+  return {
+    id: `coord:${lat},${lon}`,
+    label: `${lat.toFixed(4)}, ${lon.toFixed(4)}`,
+    detail: "Coordinates",
+    lon,
+    lat,
+  };
+}
+
+type NominatimPlace = {
+  place_id: number;
+  lat: string;
+  lon: string;
+  name?: string;
+  display_name: string;
+};
+
+const NOMINATIM_URL = "https://nominatim.openstreetmap.org/search";
+
+function toResult(place: NominatimPlace): SearchResult {
+  const parts = place.display_name.split(", ");
+  const label = place.name?.trim() || parts[0] || place.display_name;
+  const rest = parts[0] === label ? parts.slice(1) : parts;
+  const detail = rest.slice(0, 3).join(" · ");
+
+  return {
+    id: `osm:${place.place_id}`,
+    label,
+    detail,
+    lon: Number(place.lon),
+    lat: Number(place.lat),
+  };
+}
+
+export async function geocodeAddress(
+  query: string,
+  signal?: AbortSignal,
+): Promise<SearchResult[]> {
+  const params = new URLSearchParams({
+    q: query,
+    format: "jsonv2",
+    limit: "6",
+  });
+
+  const response = await fetch(`${NOMINATIM_URL}?${params.toString()}`, {
+    signal,
+    headers: { Accept: "application/json" },
+  });
+  if (!response.ok) {
+    throw new Error("Search request failed");
+  }
+
+  const data = (await response.json()) as unknown;
+  if (!Array.isArray(data)) return [];
+
+  return (data as NominatimPlace[])
+    .map(toResult)
+    .filter(
+      (result) => Number.isFinite(result.lon) && Number.isFinite(result.lat),
+    );
+}
diff --git a/src/lib/search/history.ts b/src/lib/search/history.ts
new file mode 100644
index 0000000..6182798
--- /dev/null
+++ b/src/lib/search/history.ts
@@ -0,0 +1,32 @@
+// Recent map searches, persisted to localStorage so they survive reloads.
+
+import type { SearchResult } from "@/lib/search/geocode";
+
+const STORAGE_KEY = "earthprints:search-history";
+const MAX_ENTRIES = 5;
+
+export function loadSearchHistory(): SearchResult[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as SearchResult[];
+    return Array.isArray(parsed) ? parsed.slice(0, MAX_ENTRIES) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function pushSearchHistory(result: SearchResult): SearchResult[] {
+  if (typeof window === "undefined") return [];
+  const next = [
+    result,
+    ...loadSearchHistory().filter((entry) => entry.id !== result.id),
+  ].slice(0, MAX_ENTRIES);
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+  } catch {
+    // Ignore quota/serialization failures — history is best-effort.
+  }
+  return next;
+}