feat(ui): error & state UX — error surface, view states, map selection, sheet gestures (F4)

- lib/error/: classify any caught error into a stable ErrorKind from the
  transport signal (HTTP status / Connect Code / fetch TypeError /
  navigator.onLine); map to translated error.* messages via reportError
  (sticky Retry toast for retryable kinds) or errorMessageKey (inline).
  Mail compose now surfaces the translated 403/error inline.
- lib/ui/view-state.svelte: shared loading/empty/error placeholder with
  the right live-region role + optional action; entity tables
  (races/sciences/ship-classes) migrated, rest adopt incrementally.
- map/selection-ring.ts: accent ring around the selected planet, fed into
  the map buildExtras alongside the reach circles.
- lib/ui/sheet-dismiss.ts: tap-outside + drag-handle swipe-down dismissal
  for the planet/ship-group bottom-sheets (hand-rolled pointer events).

Tests: error, view-state, selection-ring, sheet-dismiss (761 total).
Docs: ui/docs/error-state-ux.md (+ index); F4 marked done.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/frontend/src/lib/active-view/table-sciences.svelte

@@ -23,6 +23,7 @@ data fetching is performed here — the layout is responsible.
 
 	import type { ScienceSummary } from "../../api/game-state";
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
+	import ViewState from "$lib/ui/view-state.svelte";
 	import {
 		RENDERED_REPORT_CONTEXT_KEY,
 		type RenderedReportSource,
@@ -160,13 +161,17 @@ data fetching is performed here — the layout is responsible.
 	</header>
 
 	{#if !reportLoaded}
-		<p class="status" data-testid="sciences-loading">
-			{i18n.t("game.table.sciences.loading")}
-		</p>
+		<ViewState
+			kind="loading"
+			testid="sciences-loading"
+			message={i18n.t("game.table.sciences.loading")}
+		/>
 	{:else if localScience.length === 0}
-		<p class="status" data-testid="sciences-empty">
-			{i18n.t("game.table.sciences.empty")}
-		</p>
+		<ViewState
+			kind="empty"
+			testid="sciences-empty"
+			message={i18n.t("game.table.sciences.empty")}
+		/>
 	{:else}
 		<table class="grid" data-testid="sciences-table">
 			<thead>
@@ -271,11 +276,6 @@ data fetching is performed here — the layout is responsible.
 		color: var(--color-text);
 		border-color: var(--color-accent);
 	}
-	.status {
-		margin: 0;
-		color: var(--color-text-muted);
-		font-size: 0.9rem;
-	}
 	.grid {
 		border-collapse: collapse;
 		width: 100%;